@import url('/fonts/fonts.css');

/* ==========================================================================
   STARIS Nachweis — Produktseite
   --------------------------------------------------------------------------
   Dieselbe Sprache wie die Anwendung: Tinte als Aktionsfarbe, Farbe nur für
   Status, ruhige Neutraltöne, Kanten statt Schatten. Nur größer gesetzt —
   eine Verkaufsseite darf atmen, ein Werkzeug nicht.
   ========================================================================== */

:root {
  --n-0:#FFFFFF; --n-25:#FCFCFB; --n-50:#F7F7F5; --n-100:#F1F1EE;
  --n-200:#E6E6E2; --n-300:#D6D6D1; --n-400:#A9A9A2; --n-500:#6E6E65;
  --n-600:#57574F; --n-700:#3D3D37; --n-900:#1B1B18;

  --tinte:#1B1B18; --tinte-hover:#33332E;
  --gruen:#0F7A4D; --gruen-flaeche:#E9F5EE; --gruen-linie:#B4DFC7;
  --amber:#A15C00; --amber-flaeche:#FDF3E4; --amber-linie:#F0D8A6;
  --rot:#B42318;   --rot-flaeche:#FDECEA;   --rot-linie:#F5C3BD;
  --blau:#15489E;  --blau-flaeche:#EBF1FB;  --blau-linie:#C2D5F0;

  --radius:8px; --radius-l:14px;
  --breite:68rem;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0; background:var(--n-0); color:var(--n-900);
  font-family:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  font-size:1rem; line-height:1.6; letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 { margin:0 0 .5em; font-weight:600; line-height:1.15; letter-spacing:-0.025em; }
h1 { font-size:clamp(2rem,5.5vw,3.25rem); letter-spacing:-0.035em; }
h2 { font-size:clamp(1.4rem,3vw,1.9rem); }
h3 { font-size:1.125rem; letter-spacing:-0.015em; }
p  { margin:0 0 1em; }
a  { color:var(--blau); text-underline-offset:2px; }
ul,ol { padding-left:1.25rem; }
li { margin-bottom:.35rem; }
hr { border:0; border-top:1px solid var(--n-200); margin:0; }
strong { font-weight:600; }
:focus-visible { outline:2px solid var(--blau); outline-offset:3px; border-radius:4px; }

.mono { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.9em; }
.tabellenziffern { font-variant-numeric:tabular-nums; }

.rahmen { max-width:var(--breite); margin:0 auto; padding:0 1.25rem; }
.eng { max-width:44rem; }
.still { color:var(--n-500); }
.klein { font-size:.875rem; }
.mittig { text-align:center; }

/* --- Kopf ---------------------------------------------------------------- */

.kopf { border-bottom:1px solid var(--n-200); position:sticky; top:0; background:rgba(255,255,255,.9);
        backdrop-filter:saturate(180%) blur(8px); z-index:50; }
.kopf-innen { display:flex; align-items:center; gap:1.5rem; height:4rem; }
.kopf a.marke img { height:1.15rem; width:auto; display:block; }
.kopf nav { margin-left:auto; display:flex; align-items:center; gap:1.5rem; }
.kopf nav a { color:var(--n-600); text-decoration:none; font-size:.9375rem; }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color:var(--n-900); }
@media (max-width:44rem){ .kopf nav .verstecken-klein { display:none; } }

/* --- Knöpfe -------------------------------------------------------------- */

.knopf {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:500; font-size:.9375rem; text-decoration:none;
  padding:.65rem 1.15rem; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
.knopf-haupt { background:var(--tinte); color:#fff; }
.knopf-haupt:hover { background:var(--tinte-hover); color:#fff; }
.knopf-still { background:var(--n-0); color:var(--n-700); border-color:var(--n-300); }
.knopf-still:hover { background:var(--n-50); color:var(--n-900); }
.knopf-gross { padding:.85rem 1.5rem; font-size:1rem; }
.knopfreihe { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* --- Abschnitte ---------------------------------------------------------- */

.held { padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem); }
.held p.unter { font-size:clamp(1.0625rem,2.2vw,1.3rem); color:var(--n-600); max-width:38rem; }
.abschnitt { padding:clamp(2.5rem,6vw,4.5rem) 0; }
.abschnitt-flaeche { background:var(--n-50); border-top:1px solid var(--n-200); border-bottom:1px solid var(--n-200); }
.abschnitt-kopf { max-width:40rem; margin-bottom:2.5rem; }
.abschnitt-kopf p { font-size:1.0625rem; color:var(--n-600); margin-bottom:0; }

.marke-zeile { display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem;
               font-weight:500; color:var(--n-500); margin-bottom:1.25rem; }
.marke-zeile::before { content:""; width:1.5rem; height:1px; background:var(--n-300); }

/* --- Raster -------------------------------------------------------------- */

.raster { display:grid; gap:1.25rem; }
.raster-2 { grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); }
.raster-3 { grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }

.karte { background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--radius-l); padding:1.5rem; }
.karte h3 { margin-bottom:.35rem; }
.karte p:last-child { margin-bottom:0; }
.karte-verlinkt { text-decoration:none; color:inherit; display:block; transition:border-color .12s ease; }
.karte-verlinkt:hover { border-color:var(--n-400); }
.karte-verlinkt .weiter { color:var(--blau); font-weight:500; font-size:.9375rem; }

/* --- Schritte ------------------------------------------------------------ */

.schritte { counter-reset:schritt; display:grid; gap:1.75rem; }
.schritt { display:grid; grid-template-columns:2rem 1fr; gap:1rem; align-items:start; }
.schritt::before {
  counter-increment:schritt; content:counter(schritt);
  width:2rem; height:2rem; border-radius:50%; background:var(--tinte); color:#fff;
  display:grid; place-items:center; font-size:.875rem; font-weight:600;
}
.schritt h3 { margin-bottom:.15rem; }
.schritt p { margin-bottom:0; color:var(--n-600); }

/* --- Prüfplakette: dasselbe Zeichen wie im Produkt ----------------------- */

.plakette {
  --pf:var(--gruen); --pfl:var(--gruen-flaeche); --pfr:var(--gruen-linie);
  width:3.25rem; height:3.25rem; border-radius:50%; flex:0 0 auto;
  border:1.5px solid var(--pfr); background:var(--pfl); color:var(--pf);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.05; font-variant-numeric:tabular-nums;
}
.plakette .monat { font-size:.9375rem; font-weight:600; }
.plakette .jahr { font-size:.6875rem; opacity:.8; }
.plakette.gelb { --pf:var(--amber); --pfl:var(--amber-flaeche); --pfr:var(--amber-linie); }
.plakette.rot { --pf:var(--rot); --pfl:var(--rot-flaeche); --pfr:var(--rot-linie); border-width:2px; }

.status { display:inline-flex; align-items:center; gap:.4rem; font-size:.875rem; font-weight:500; }
.status::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
.status.gruen{color:var(--gruen)} .status.gelb{color:var(--amber)} .status.rot{color:var(--rot)}

/* Beispielzeile wie in der Anwendung */
.beispiel { border:1px solid var(--n-200); border-radius:var(--radius-l); overflow:hidden; background:var(--n-0); }
.beispiel-kopf { background:var(--n-50); border-bottom:1px solid var(--n-200); padding:.6rem 1rem;
                 font-size:.8125rem; color:var(--n-500); }
.beispiel-zeile { display:flex; gap:1rem; align-items:center; padding:.9rem 1rem; border-bottom:1px solid var(--n-200); }
.beispiel-zeile:last-child { border-bottom:0; }
.beispiel-zeile .text { flex:1; min-width:0; }
.beispiel-zeile .titel { font-weight:600; font-size:.9375rem; }
.beispiel-zeile .detail { font-size:.8125rem; color:var(--n-500); }
.beispiel-zeile .rechts { text-align:right; flex:0 0 auto; }

/* --- Merkzeichen --------------------------------------------------------- */

.pille { display:inline-block; font-size:.8125rem; font-weight:500; padding:.15rem .6rem;
         border-radius:999px; border:1px solid var(--n-200); background:var(--n-50); color:var(--n-600); }
.pille-gruen { background:var(--gruen-flaeche); border-color:var(--gruen-linie); color:var(--gruen); }
.pillen { display:flex; flex-wrap:wrap; gap:.4rem; }

.hinweis { border:1px solid var(--blau-linie); background:var(--blau-flaeche); color:var(--blau);
           border-radius:var(--radius-l); padding:1rem 1.15rem; }
.hinweis.warnung { border-color:var(--amber-linie); background:var(--amber-flaeche); color:var(--amber); }
.hinweis p:last-child { margin-bottom:0; }

/* --- Liste mit Haken ----------------------------------------------------- */

.haken { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.haken li { display:grid; grid-template-columns:1.15rem 1fr; gap:.6rem; margin:0; }
.haken li::before { content:"✓"; color:var(--gruen); font-weight:600; line-height:1.5; }
.kreuze li::before { content:"✕"; color:var(--n-400); }

/* --- Preise -------------------------------------------------------------- */

.preis { border:1px solid var(--n-200); border-radius:var(--radius-l); padding:1.5rem; background:var(--n-0); }
.preis.hervor { border-color:var(--tinte); border-width:2px; }
.preis .name { font-weight:600; font-size:1.0625rem; }
.preis .zahl { font-size:2.25rem; font-weight:600; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.preis .zahl small { font-size:.9375rem; font-weight:400; color:var(--n-500); letter-spacing:0; }
.preis .umfang { color:var(--n-500); font-size:.9375rem; }

/* --- Formular ------------------------------------------------------------ */

.feld { margin-bottom:1.15rem; }
.feld label { display:block; font-weight:500; font-size:.875rem; margin-bottom:.3rem; color:var(--n-700); }
.feld .hilfe { font-size:.8125rem; color:var(--n-500); margin-bottom:.35rem; }
input[type=text],input[type=email],input[type=tel],textarea,select {
  width:100%; font:inherit; font-size:1rem; padding:.6rem .75rem; color:var(--n-900);
  background:var(--n-0); border:1px solid var(--n-300); border-radius:var(--radius);
}
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--n-400); box-shadow:0 0 0 3px rgba(21,72,158,.12); }
textarea { min-height:8rem; resize:vertical; }
.wahl { display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.6rem; }
.wahl input { width:1.05rem; height:1.05rem; margin-top:.28rem; accent-color:var(--tinte); flex:0 0 auto; }
.wahl label { font-weight:400; font-size:.9375rem; margin:0; color:var(--n-700); }

.meldung { border-radius:var(--radius-l); padding:1rem 1.15rem; margin-bottom:1.5rem; border:1px solid; }
.meldung-gut { background:var(--gruen-flaeche); border-color:var(--gruen-linie); color:var(--gruen); }
.meldung-fehler { background:var(--rot-flaeche); border-color:var(--rot-linie); color:var(--rot); }
.meldung ul { margin:.4rem 0 0; }
.meldung p:last-child { margin-bottom:0; }

/* --- Fließtext (Recht) --------------------------------------------------- */

.rechtstext { max-width:44rem; }
.rechtstext h2 { font-size:1.25rem; margin-top:2.25rem; }
.rechtstext h2:first-of-type { margin-top:0; }
.rechtstext h3 { font-size:1rem; margin-top:1.5rem; }
.rechtstext p, .rechtstext li { color:var(--n-700); }
.rechtstext dl { display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.5rem; margin:0 0 1em; }
.rechtstext dt { font-weight:500; color:var(--n-500); }
.rechtstext dd { margin:0; }

/* --- Fuß ----------------------------------------------------------------- */

.fuss { border-top:1px solid var(--n-200); background:var(--n-50); padding:3rem 0 2.5rem; margin-top:0; }
.fuss-innen { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; }
.fuss h4 { font-size:.8125rem; color:var(--n-500); font-weight:500; margin-bottom:.75rem; }
.fuss ul { list-style:none; padding:0; margin:0; }
.fuss li { margin-bottom:.4rem; }
.fuss a { color:var(--n-600); text-decoration:none; font-size:.9375rem; }
.fuss a:hover { color:var(--n-900); }
.fuss img { height:1rem; width:auto; opacity:.7; margin-bottom:.75rem; display:block; }
.fuss-unten { border-top:1px solid var(--n-200); margin-top:2.5rem; padding-top:1.25rem;
              font-size:.8125rem; color:var(--n-500); }
@media (max-width:44rem){ .fuss-innen { grid-template-columns:1fr; gap:1.75rem; } }

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important} }