/* ==========================================================================
   OvaOptimize – ovaoptimize.de
   Redesign-Fassung, Stand 24. August 2026.
   Merge aus Variante A (Editorial Warm) und Variante B (Clinical Contrast)
   nach Spezifikation v1. Farbsystem unverändert aus dem Corporate Design.
   Keine externen Ressourcen. Alle Pfade relativ.

   ABSCHNITTE
     1  Schriften            6  Buttons und Links      9g Kursmockup (Schutz)
     2  Tokens               7  Kopfzeile              9h Musterbericht
     3  Grundlagen           8  Bausteine (neu)        10 SVG-Grundlagen (Schutz)
     4  Layout und Flächen   9  Inhaltsbausteine       10a Zeitstrahl (Schutz)
     4b Hero-Optik (Schutz)                            10b Wahrnehmungstest (Schutz)
     5  Sektionsmuster                                 10c–e Kleinteile
                                                       11 Fußzeile

   SCHUTZ-ABSCHNITTE: 4b, 9g, 10, 10a, 10b tragen Elemente, deren Aufbau,
   Achsen, Beschriftungen und Animation nicht verändert werden dürfen.
   Farben laufen dort über Tokens – umgefärbt wird über die Token-Werte,
   niemals durch Umbau der Geometrie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften – lokal eingebunden, keine externen Aufrufe

   Manrope trägt die gesamte Seitentypografie (Variable Font, 400–800 in einer
   Datei). Fraunces steht ausschließlich als kursiver Akzentschnitt für
   einzelne Wörter in Überschriften – nie als Fließtext.

   Newsreader, Plex Sans und Plex Mono bleiben liegen: Das Kursmockup in
   Abschnitt „Einblick" setzt sie über Inline-Angaben weiter und ist
   unverändert aus dem Entwurf übernommen.

   Die Aufteilung in latin und latin-ext ist Absicht: Über unicode-range lädt
   der Browser latin-ext nur, wenn ein Zeichen daraus tatsächlich vorkommt.
   Deutsche Texte brauchen es nicht – Umlaute und ß liegen in latin.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-var-latin-ext.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-ital-latin.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-ital-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-var-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-var-latin-ext.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/plex-sans-var-latin.woff2") format("woff2");
  font-weight:100 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/plex-sans-var-latin-ext.woff2") format("woff2");
  font-weight:100 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens – ausschließlich diese Werte verwenden
   -------------------------------------------------------------------------- */
:root{
  /* Markenfarben */
  --blau:#003479;
  --tuerkis:#0cc0df;
  --violett:#6f2fee;

  /* Tints Dunkelblau */
  --blau-1:#f0f3f7;  --blau-2:#e6ebf2;  --blau-3:#d1dae7;  --blau-4:#a6b8d0;
  /* Aufgehellte Varianten von --blau, ausschließlich für Flächen INNERHALB
     dunkler Abschnitte. Nirgends sonst verwenden. */
  --blau-d0:#04275c; --blau-d1:#0a3f86; --blau-d2:#0e4a99;
  /* Tints Türkis */
  --tuerkis-1:#f0fbfd; --tuerkis-2:#e7f9fc; --tuerkis-3:#d3f4f9; --tuerkis-4:#aae9f4;
  /* Tints Violett */
  --violett-1:#f6f3fe; --violett-2:#f1eafd; --violett-3:#e5dafc; --violett-4:#cdb6f9;

  --text:#16233a;
  --gedaempft:#5a6678;
  --text-invers:#ffffff;
  /* Textfarben auf dunkler Fläche */
  --auf-dunkel:#c8d5e8;
  --auf-dunkel-2:#9fc2ef;

  /* Schriften. --font-h, --font-b und --font-m zeigen bewusst alle auf
     Manrope: Die Schutz-Abschnitte referenzieren diese Namen, und über sie
     wechselt die gesamte Seitentypografie in einem Zug. Die Sperrung der
     Labelschriften steckt in den jeweiligen Klassen, nicht im Token. */
  --font-h:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-b:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-m:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-akz:"Fraunces", Georgia, "Times New Roman", serif;

  --wrap:72rem;
  --col:40rem;
  --pad-x:clamp(20px, 5vw, 40px);
  --pad-y:clamp(64px, 9vw, 112px);
  --radius:4px;
  --r-karte:18px;
  --r-pill:999px;
  --schatten:0 4px 28px -8px rgba(0,52,121,.10);
  --schatten-tief:0 30px 70px -30px rgba(0,52,121,.30);
}

/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:var(--font-b);
  font-size:1.0625rem;      /* 17px */
  font-weight:500;
  line-height:1.62;
  font-synthesis-weight:none;
}
@media (min-width:48em){ body{font-size:1.125rem} }   /* 18px */

img,svg{max-width:100%;height:auto}

/* Typo-Skala nach Variante B: große, eng gesetzte Überschriften mit knapper
   Zeilenhöhe.

   Silbentrennung NUR auf schmalen Geräten: Dort ist sie nötig, weil
   „Patientinnenbegleitung" bei 320 px breiter ist als die Spalte. In großen
   Überschriften auf breiten Bildschirmen zerlegt sie dagegen Wörter, die
   bequem passen würden („empfeh-len", „Betreu-ung") und macht aus einer
   ruhigen Headline eine Treppe. overflow-wrap bleibt überall als Netz. */
h1,h2,h3,h4{font-family:var(--font-h);color:var(--blau);margin:0 0 .6em;
  text-wrap:balance;overflow-wrap:break-word}
@media (max-width:48em){
  h1,h2,h3,h4{hyphens:auto;-webkit-hyphens:auto}
}
h1{font-size:clamp(2.5rem, 5.6vw, 4.3rem);font-weight:700;
  line-height:1.05;letter-spacing:-.035em;max-width:19ch}
h2{font-size:clamp(1.9rem, 3.6vw, 2.8rem);font-weight:700;
  line-height:1.08;letter-spacing:-.03em;max-width:22ch}
h3{font-size:clamp(1.18rem, 2.4vw, 1.5rem);font-weight:700;
  line-height:1.25;letter-spacing:-.02em;max-width:28ch}
h4{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}

/* Der einzige Ort für Fraunces: ein kursives Akzentwort je Überschrift.
   Nie als Fließtext, nie als vollständige Headline. */
h1 em,h2 em,h3 em,.akzent{
  font-family:var(--font-akz);font-style:italic;font-weight:400;
  letter-spacing:0;
}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--blau)}

a{color:var(--blau)}
:focus-visible{outline:3px solid var(--violett);outline-offset:3px;border-radius:2px}
/* Violett auf Dunkelblau trägt als Fokusring nicht – dort Türkis. */
.f-dunkel :focus-visible,.kopf :focus-visible,.fuss :focus-visible{outline-color:var(--tuerkis)}

/* Sichtbar nur für Screenreader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--pad-x);top:-100px;z-index:100;background:var(--violett);
  color:#fff;padding:12px 18px;border-radius:var(--radius);text-decoration:none;transition:top .15s}
.skip:focus{top:12px}

/* --------------------------------------------------------------------------
   4. Layout und Flächen
   -------------------------------------------------------------------------- */
/* Sprungziele nicht unter der klebenden Kopfzeile landen lassen – betrifft
   auch die Fußnotenziffern, die ins Quellenverzeichnis führen. */
[id]{scroll-margin-top:calc(var(--kopf-h, 56px) + 1rem)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.col{max-width:var(--col)}
.section{padding-block:var(--pad-y)}
/* Zwei Sektionen derselben Fläche, die inhaltlich zusammengehören: die
   zweite verliert ihre obere Polsterung, sonst reißt der Block auseinander. */
.section--anschluss{padding-top:0}

/* Flächenrhythmus – genau drei Zustände, harte Schnitte ohne Verlauf.

   Türkis und Violett sind keine Flächenfarben: Türkis ist Akzent und
   Handlungsfarbe, Violett Auszeichnung für Daten und Entscheidungen. */
.f-weiss  {background:#fff}
.f-getoent{background:var(--blau-2)}

/* Dunkle Inseln: Wissenschaft (Zeitstrahl), Aufwand, Vergleich. */
.f-dunkel {background:var(--blau);color:var(--auf-dunkel)}
.f-dunkel h1,.f-dunkel h2,.f-dunkel h3,.f-dunkel h4,.f-dunkel strong,.f-dunkel b{color:#fff}
.f-dunkel .kernsatz{color:#fff;border-left-color:var(--tuerkis)}
.f-dunkel .eyebrow{color:var(--auf-dunkel-2)}
.f-dunkel .eyebrow::before{background:var(--tuerkis)}
.f-dunkel .ausfuehrung{color:var(--auf-dunkel)}
.f-dunkel a{color:#fff}
.f-dunkel h2 em,.f-dunkel h3 em{color:var(--tuerkis-4)}

/* --------------------------------------------------------------------------
   4b. Hero mit Mikroskop-Optik  ·  SCHUTZ-ABSCHNITT

   Geschichtete, weich gezeichnete Formen hinter einer Blende, die ein
   Sichtfeld nachbildet. Alle Farben sind Alpha-Varianten der Markentöne,
   keine neuen Farbwerte. Der Verlauf über dem Bild („scrim") hält den
   Textbereich ruhig – ohne ihn schwankt der Kontrast mit der Animation.

   Opazität, Bewegungsgeschwindigkeit, Aussehen und Anordnung unverändert
   aus der Live-Seite. Der Hero bleibt hell – der Hintergrund ist dafür gebaut.
   -------------------------------------------------------------------------- */
.ova-hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;background:var(--tuerkis-1);
  /* Stellschrauben. --optik-y setzt die Mitte des Sichtfelds: kleiner = höher.
     Maske, Milchschleier und Linse folgen diesem Wert gemeinsam. */
  --optik-x:64%; --optik-y:40%;
  --tempo:1;      /* kleiner = schneller */
  --schaerfe:1;   /* Amplitude des Fokusatmens */
}

.ova-optik{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at var(--optik-x) var(--optik-y), #000 40%, rgba(0,0,0,.4) 63%, transparent 84%);
          mask-image:radial-gradient(circle at var(--optik-x) var(--optik-y), #000 40%, rgba(0,0,0,.4) 63%, transparent 84%)}

/* Der ganze „Objektträger" driftet langsam.

   Die Kanten sitzen bewusst außerhalb des Rahmens, damit an den Rändern keine
   Formen abreißen. Oben ist der Überstand größer als unten: Dadurch liegen die
   Zellen höher und sind ohne Scrollen sichtbar. Verschoben wird über inset,
   nicht über transform – transform gehört der Drift-Animation, ein zweiter
   Wert an derselben Stelle würde sie überschreiben. */
.ova-optik__praeparat{position:absolute;top:-26%;right:-14%;bottom:-2%;left:-14%;
  animation:ovaPraeparat calc(180s * var(--tempo)) ease-in-out infinite alternate;will-change:transform}
@keyframes ovaPraeparat{ to{ transform:translate3d(-3%,2%,0) rotate(2.2deg); } }

.ova-ebene{position:absolute;inset:0}
.ova-ebene--tief{filter:blur(28px);opacity:.85}
.ova-ebene--mitte{filter:blur(9px);opacity:.88}
/* Die vorderste Ebene rastet nie ganz ein – sie bleibt leicht unscharf */
.ova-ebene--scharf{filter:blur(1.6px);
  animation:ovaFokus calc(17s * var(--tempo)) ease-in-out infinite;will-change:opacity}
@keyframes ovaFokus{
  0%,100%{opacity:calc(.52 + .06 * var(--schaerfe))}
  45%    {opacity:calc(.78 + .14 * var(--schaerfe))}
  68%    {opacity:calc(.66 + .10 * var(--schaerfe))}
}

/* Milchschleier über allem, leicht gegenläufig pulsierend */
.ova-optik__milch{position:absolute;inset:0;
  background:radial-gradient(circle at var(--optik-x) var(--optik-y),
    rgba(255,255,255,.28) 0%, rgba(240,251,253,.42) 44%,
    rgba(231,249,252,.30) 76%, transparent 100%);
  animation:ovaTrueb calc(23s * var(--tempo)) ease-in-out infinite;will-change:opacity}
@keyframes ovaTrueb{0%,100%{opacity:1}50%{opacity:.84}}

.ova-blob{position:absolute;left:var(--x);top:var(--y);width:var(--r);height:var(--r);
  margin-left:calc(var(--r) / -2);margin-top:calc(var(--r) / -2);border-radius:50%;
  background:radial-gradient(circle at 42% 38%, var(--c) 0%, transparent 70%);
  animation:ovaDrift calc(var(--d) * var(--tempo)) ease-in-out var(--dl) infinite;
  will-change:transform}
/* Wanderpfad statt Hin und Her: sechs Wegpunkte, Anfang gleich Ende */
@keyframes ovaDrift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  18% {transform:translate3d(calc(var(--dx) *  1.25), calc(var(--dy) *   .5),0) scale(calc(1 + (var(--s) - 1) * .4))}
  36% {transform:translate3d(calc(var(--dx) *  -.5),  calc(var(--dy) *  1.35),0) scale(var(--s))}
  54% {transform:translate3d(calc(var(--dx) *   .8),  calc(var(--dy) *  -.9),0)  scale(calc(1 + (var(--s) - 1) * .7))}
  72% {transform:translate3d(calc(var(--dx) * -1.35), calc(var(--dy) *   .3),0)  scale(calc(1 + (var(--s) - 1) * .3))}
  88% {transform:translate3d(calc(var(--dx) *   .4),  calc(var(--dy) * -1.25),0) scale(calc(1 + (var(--s) - 1) * .55))}
  100%{transform:translate3d(0,0,0) scale(1)}
}

/* Zellen mit sichtbarer Membran */
.ova-zelle{position:absolute;left:var(--x);top:var(--y);width:var(--r);height:var(--r);
  margin-left:calc(var(--r) / -2);margin-top:calc(var(--r) / -2);border-radius:50%;
  border:1px solid rgba(12,192,223,.42);
  background:radial-gradient(circle at 38% 34%, rgba(255,255,255,.92) 0%, var(--c) 46%, rgba(170,233,244,.18) 74%, transparent 78%);
  box-shadow:inset -8px -10px 24px rgba(0,52,121,.09), 0 0 0 6px rgba(12,192,223,.05);
  animation:ovaDrift calc(var(--d) * var(--tempo)) ease-in-out var(--dl) infinite;
  will-change:transform}
.ova-zelle::after{content:"";position:absolute;left:38%;top:36%;
  width:26%;height:26%;border-radius:50%;background:rgba(0,52,121,.16)}

/* Kleine Partikel mit schnellerer Eigenbewegung */
.ova-partikel{position:absolute;left:var(--x);top:var(--y);width:var(--r);height:var(--r);
  border-radius:50%;background:rgba(0,52,121,.22);
  animation:ovaZittern calc(var(--d) * var(--tempo)) ease-in-out var(--dl) infinite;
  will-change:transform}
@keyframes ovaZittern{
  0%  {transform:translate3d(0,0,0)}
  20% {transform:translate3d(calc(var(--dx) *  1.6), calc(var(--dy) *  .4),0)}
  40% {transform:translate3d(calc(var(--dx) * -1.2), calc(var(--dy) * 1.1),0)}
  60% {transform:translate3d(calc(var(--dx) *  1.3), calc(var(--dy) * -1.2),0)}
  80% {transform:translate3d(calc(var(--dx) * -1.5), calc(var(--dy) *  .6),0)}
  100%{transform:translate3d(0,0,0)}
}

/* Linsenanmutung: heller Kern, Randabdunklung */
.ova-optik__linse{position:absolute;inset:0;
  background:
    radial-gradient(circle at var(--optik-x) calc(var(--optik-y) - 4%), rgba(255,255,255,.55) 0%, transparent 46%),
    radial-gradient(circle at var(--optik-x) var(--optik-y), transparent 52%, rgba(12,192,223,.10) 72%, rgba(0,52,121,.13) 100%)}

/* Beruhigt den Textbereich. Ohne diese Fläche wandert der Kontrast
   der Überschrift mit der Animation – das ist nicht prüfbar.
   Deckt bis 46 % nahezu voll und läuft erst bei 78 % aus. */
.ova-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, var(--tuerkis-1) 8%, rgba(240,251,253,.92) 46%, rgba(240,251,253,0) 78%)}

@media (max-width:47.5em){
  .ova-hero{--optik-x:50%;--optik-y:30%;min-height:84vh}
  .ova-hero__scrim{background:linear-gradient(180deg, rgba(240,251,253,.45) 0%, rgba(240,251,253,.94) 42%)}
  /* Auf schmalen Geräten die teuerste Ebene abschalten – vier großflächig
     weichgezeichnete Formen kosten dort spürbar Rechenzeit. */
  .ova-ebene--tief{display:none}
}

@media (prefers-reduced-motion: reduce){
  .ova-blob,.ova-zelle,.ova-partikel,.ova-optik__praeparat,
  .ova-ebene--scharf,.ova-optik__milch{animation:none}
  .ova-ebene--scharf{opacity:.6}
}

/* --------------------------------------------------------------------------
   4c. Hero-Textebene (neu, Aufteilung aus Variante B)
   Linksbündig: Eyebrow → große kompakte H1 → Lead → CTA → Feinzeile → Belege.
   -------------------------------------------------------------------------- */
.ova-hero__inner{max-width:var(--wrap);margin-inline:auto;
  padding:clamp(72px,11vh,124px) var(--pad-x) clamp(64px,9vh,96px);width:100%}
/* Die beiden Sätze der Gegenüberstellung sind eigene Blöcke. Damit beginnt
   der zweite Satz auf jeder Bildschirmbreite auf einer neuen Zeile; innerhalb
   eines Satzes fließt der Text normal um. Wer den Text ändert, lässt die
   beiden Sätze in ihren Spans. */
.ova-hero h1{margin-bottom:.42em;max-width:17ch}
.ova-hero h1 .satz{display:block}
.ova-hero .kernsatz{max-width:44ch}
.ova-hero .ausfuehrung{max-width:36rem}
/* Die Produktzeile tritt hinter den Kernsatz zurück: Sie beantwortet die
   Frage „was ist das", trägt aber nicht die Spannung der Überschrift. */
.hero-produkt{max-width:52ch;margin:1.4rem 0 0;font-size:.98rem;
  line-height:1.6;color:var(--gedaempft)}
@media (max-width:47.5em){
  .ova-hero__inner{padding-block:clamp(44px,7vh,120px) clamp(40px,6vh,96px)}
  .ova-hero h1{max-width:none}
}

/* Belegreihe: vier Umrandungs-Pills, auf helle Fläche umgefärbt.
   Türkis trägt nur den Punkt, nie die Schrift – als Textfarbe erreicht es
   auf Weiß nur 2,2 : 1. */
.belege{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding:0;list-style:none}
.beleg{display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--blau-3);background:rgba(255,255,255,.72);
  border-radius:var(--r-pill);padding:8px 16px;
  font-size:.79rem;font-weight:600;color:var(--gedaempft);white-space:nowrap}
.beleg::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tuerkis);flex:0 0 auto}
.beleg b{color:var(--blau);font-weight:700}
.f-dunkel .beleg{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:var(--auf-dunkel)}
.f-dunkel .beleg b{color:#fff}

/* --------------------------------------------------------------------------
   5. Sektionsmuster: Eyebrow → H2 mit einem Akzentwort → Kernsatz → Inhalt
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-m);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blau);
  display:flex;align-items:center;gap:10px;
  margin:0 0 1.3em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--tuerkis);flex:0 0 auto}

/* Kernsatz – die Brücke zwischen Überschrift und Text. Der Türkisstrich
   links bindet ihn optisch an den Eyebrow zurück. */
.kernsatz{
  font-size:clamp(1.08rem, 1.9vw, 1.3rem);
  font-weight:500;
  line-height:1.5;
  color:var(--gedaempft);
  max-width:52ch;
  margin:0 0 30px;
  padding-left:16px;
  border-left:2px solid var(--tuerkis);
  text-wrap:pretty;
}
/* Sonderregel Hero: Die Zeile unter der Überschrift tritt zurück, statt mit
   ihr zu konkurrieren – kein Strich, dafür etwas mehr Größe. */
.ova-hero .kernsatz{
  font-size:clamp(1.05rem, 1.9vw, 1.28rem);
  line-height:1.58;padding-left:0;border-left:0;color:var(--gedaempft);
}

/* Brückensatz zwischen Kernsatz und Kartenreihe: sagt, warum die Karten
   überhaupt kommen. Tritt hinter den Kernsatz zurück, steht aber vor der
   Reihe – sonst liest sie sich als Aufzählung ohne Anlass. */
.bruecke{max-width:var(--col);margin:1.5rem 0 0;font-size:.98rem;
  line-height:1.6;color:var(--gedaempft)}

.ausfuehrung{max-width:var(--col);color:var(--gedaempft)}
.ausfuehrung > * + *{margin-top:0}
.lead-in{font-weight:700;color:var(--blau);margin-bottom:.5em}
.zentriert{text-align:center}
.zentriert .eyebrow{justify-content:center}
.zentriert .kernsatz{margin-inline:auto;border-left:0;padding-left:0}
.zentriert h2{margin-inline:auto}

/* Fußnotenziffern.
   Das Buildspec verbietet Türkis für Text ohne Ausnahme (2,2 : 1). Die Ziffer
   steht deshalb in Violett – der Akzentfarbe für Daten und Verweise – und die
   Trefferfläche wird über ein unsichtbares Pseudoelement auf 26 px gebracht,
   ohne den Zeilenfluss zu verändern. */
sup.q{font-family:var(--font-m);font-size:.62em;font-weight:700;line-height:0;
  vertical-align:super;margin-left:.15em}
sup.q a{position:relative;color:var(--violett);text-decoration:none;
  border-bottom:1px solid var(--violett-4)}
sup.q a::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;min-width:100%;min-height:100%}
/* Auf dunkelblauer Vollfläche wäre Violett nicht lesbar –
   sup.q a ist spezifischer als .f-dunkel a und gewinnt sonst. */
.f-dunkel sup.q a{color:var(--tuerkis-4);border-bottom-color:rgba(170,233,244,.5)}

/* --------------------------------------------------------------------------
   6. Buttons und Links

   Türkis ist die Handlungsfarbe. Die Schrift darauf steht in Dunkelblau
   (#04275c auf #0cc0df = 6,6 : 1); weiß auf Türkis erreicht nur 2,2 : 1.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--tuerkis);color:var(--blau-d0);
  font-family:var(--font-b);font-size:1rem;font-weight:700;line-height:1.2;
  padding:.92em 1.7em;border-radius:var(--r-pill);
  text-decoration:none;border:2px solid var(--tuerkis);
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px -8px rgba(12,192,223,.55)}
.btn .pfeil{flex:0 0 auto}
/* In dunklen Abschnitten färbt .f-dunkel a alle Links weiß – auch den Button.
   Weiß auf Türkis ergibt 2,2 : 1 und ist unlesbar. Die Regel ist spezifischer
   und holt die dunkelblaue Schrift zurück; die Füllfarbe bleibt Türkis. */
.f-dunkel .btn{color:var(--blau-d0)}
/* Zweitrangig: gleiche Form, nur Kontur. Für Stellen, an denen ein zweiter
   gefüllter Knopf dem primären Aufruf den Rang abliefe. */
.btn--kontur{background:transparent;color:var(--blau);border-color:var(--blau)}
.btn--kontur:hover{background:var(--blau);color:#fff;box-shadow:none}
.f-dunkel .btn--kontur{color:#fff;border-color:rgba(255,255,255,.5)}
.f-dunkel .btn--kontur:hover{background:#fff;color:var(--blau)}

/* Sekundär: Textlink mit Pfeil, Unterstreichung in Türkis */
.link-sek{
  display:inline-flex;align-items:center;gap:.5em;
  color:var(--blau);font-weight:700;font-size:1rem;
  text-decoration:none;
  border-bottom:2px solid var(--tuerkis);
  padding-bottom:2px;
}
.link-sek:hover{border-bottom-color:var(--blau)}
.f-dunkel .link-sek{color:#fff;border-bottom-color:var(--tuerkis)}

.cta-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;margin-top:2rem}
.cta-fein{font-size:.88rem;color:var(--gedaempft);margin-top:1rem;max-width:56ch}
.f-dunkel .cta-fein{color:var(--auf-dunkel)}
.zentriert .cta-zeile{justify-content:center}
.zentriert .cta-fein{margin-inline:auto}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}

/* --------------------------------------------------------------------------
   7. Kopfzeile

   Durchgehende Leiste in Dunkelblau: Kopf und Fuß klammern die Seite ein, der
   Inhalt dazwischen bleibt hell. Sie weicht beim Abwärtsscrollen zurück – wer
   nach unten scrollt, will lesen; wer nach oben scrollt, sucht die Navigation.
   Gesteuert über data-versteckt aus main.js. Ohne JavaScript bleibt sie
   dauerhaft sichtbar – das ist der unschädliche Rückfall.
   -------------------------------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:40;
  background:var(--blau);
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:transform .28s ease;
}
.kopf .logo{color:#fff}
.kopf[data-versteckt="ja"]{transform:translateY(-100%)}
/* Tastaturbedienung: Sobald etwas in der Kopfzeile den Fokus bekommt, muss
   sie sichtbar sein – sonst springt der Fokus auf ein unsichtbares Ziel. */
.kopf:focus-within{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){ .kopf{transition:none} }
.kopf-inner{display:flex;align-items:center;gap:1.25rem;
  min-height:56px;padding-block:.45rem}

/* Sprungleiste: Bei dreizehn Abschnitten ist sie keine Zusatzfunktion,
   sondern die Landkarte. Sie sitzt in der Kopfzeile statt in einer zweiten
   Leiste – zwei klebende Balken für eine Navigation verdecken nur Inhalt.

   overflow-x:auto statt Umbruch: Auf schmalen Geräten schiebt sich die Reihe
   seitlich, die Leiste bleibt einzeilig und damit flach. */
.kopf-anker{display:flex;gap:1.15rem;align-items:center;
  margin-inline:auto;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.kopf-anker::-webkit-scrollbar{display:none}
.kopf-anker a{font-size:.84rem;font-weight:600;color:#fff;opacity:.74;
  text-decoration:none;white-space:nowrap;padding-block:.35rem}
.kopf-anker a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
/* Die Ankerreihe erscheint erst, wenn der Inhaltsrahmen breit genug ist.
   Entweder alle oder keiner: Ein halb sichtbarer Menüpunkt ist schlechter
   als gar keiner. Darunter übernimmt das Klappmenü. */
@media (max-width:72em){ .kopf-anker{display:none} }

/* Unter 22em reichen Wortmarke und Button zusammen über den Rand hinaus.
   Die Bildmarke weicht als erstes – sie trägt keine Information, die die
   Wortmarke nicht auch trägt. */
@media (max-width:22em){
  .kopf .logo-marke{display:none}
  .kopf .logo{gap:0}
}
.logo{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-h);font-size:1.16rem;font-weight:700;letter-spacing:-.025em;
  color:var(--blau);text-decoration:none;line-height:1;white-space:nowrap;flex:0 0 auto}
.logo-marke{height:1.7em;width:auto;display:block;flex:0 0 auto}
.kopf-nav{display:flex;align-items:center;gap:1rem}
.kopf-nav .btn{font-size:.84rem;padding:.66em 1.1em;white-space:nowrap}
/* Auf sehr schmalen Geräten weicht der Pfeil, damit der Buttontext
   „Erstgespräch vereinbaren" vollständig lesbar bleibt. */
.kopf-nav .btn .pfeil{display:none}
.kopf-nav .btn:hover{transform:none;box-shadow:0 6px 20px -6px rgba(12,192,223,.6)}
@media (max-width:26em){
  .logo{font-size:.95rem;gap:.4rem}
  .kopf-nav .btn{font-size:.75rem;padding:.66em .8em}
  .kopf-inner{gap:.5rem}
}
@media (min-width:26em){ .kopf-nav .btn{font-size:.86rem;padding:.66em 1.15em} .kopf-nav .btn .pfeil{display:block} }

/* Mobiles Menü: Ein <details>-Element statt Skript-Menü – öffnet und schließt
   ohne JavaScript; main.js ergänzt nur das Schließen nach Linkklick, bei Klick
   außerhalb und per Escape. Ab 72em übernimmt wieder die Sprungleiste. */
.kopf-menue{display:none;flex:0 0 auto}
@media (max-width:72em){
  .kopf-menue{display:block}
  .kopf-nav{margin-left:auto}
}
.kopf-menue summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;color:#fff;
  border:1px solid rgba(255,255,255,.45);border-radius:var(--radius)}
.kopf-menue summary::-webkit-details-marker{display:none}
.kopf-menue summary:hover{border-color:rgba(255,255,255,.75)}
.kopf-menue .mi--zu{display:none}
.kopf-menue[open] .mi--auf{display:none}
.kopf-menue[open] .mi--zu{display:block}
/* Das Feld hängt an der Kopfzeile (position:sticky zählt als Bezugsrahmen),
   nicht am Knopf: volle Breite, gleiche Farbwelt. */
.menue-liste{position:absolute;left:0;right:0;top:100%;
  background:var(--blau);border-bottom:2px solid var(--tuerkis);
  padding:.4rem clamp(16px,4vw,28px) .9rem;
  display:flex;flex-direction:column}
.menue-liste a{font-size:.9rem;font-weight:600;color:#fff;opacity:.85;text-decoration:none;
  padding:.85rem 2px;border-bottom:1px solid rgba(255,255,255,.14)}
.menue-liste a:last-child{border-bottom:none}
.menue-liste a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
@media (max-width:26em){ .kopf-menue summary{width:36px;height:36px} }
/* Mit dem Menüknopf braucht die Kopfzeile bei 320 px etwas mehr Platz, als da
   ist – Abstände und Knopf rücken enger zusammen. Der Block steht bewusst NACH
   den 26em-Regeln: gleiche Spezifität, die spätere Regel gewinnt. */
@media (max-width:22em){
  .kopf-inner{gap:.35rem}
  .kopf-nav .btn{padding:.66em .55em}
  .kopf-menue summary{width:32px;height:32px}
}

/* --------------------------------------------------------------------------
   8. Karten, Raster, Reveals (neu)
   -------------------------------------------------------------------------- */
.karte{background:#fff;border:1px solid var(--blau-3);border-radius:var(--r-karte);
  padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--schatten)}
.f-getoent .karte{background:#fff}
.f-dunkel .karte{background:var(--blau-d1);border-color:rgba(255,255,255,.16);
  box-shadow:none;color:var(--auf-dunkel)}
.f-dunkel .karte h3{color:#fff}
.karte h3{margin:0 0 .5rem}
.karte p{font-size:.96rem;color:var(--gedaempft)}
.f-dunkel .karte p{color:var(--auf-dunkel)}
.karte > :last-child{margin-bottom:0}

.raster{display:grid;gap:22px}
@media (min-width:48em){
  .r2{grid-template-columns:1fr 1fr}
  .r3{grid-template-columns:repeat(3,1fr)}
}

/* Kennzahl-Kopf einer Karte: große Zahl über der Überschrift. */
.karte .kennzahl{font-size:clamp(2rem,4vw,2.5rem);font-weight:700;color:var(--blau);
  letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.karte .kennzahl em{font-family:var(--font-akz);font-style:italic;font-weight:400;letter-spacing:0}
.karte .kennzahl--zitat{font-size:clamp(1.25rem,2.4vw,1.5rem);line-height:1.3;letter-spacing:-.02em}

/* Scroll-Reveal, einmalig.

   WICHTIG – der .js-Vorsatz ist kein Schmuck: Ohne ihn stünde der
   Startzustand opacity:0 auch dann im CSS, wenn kein JavaScript läuft. Dann
   gäbe es niemanden, der .ist-da setzt, und die halbe Seite bliebe unsichtbar.
   Die Klasse .js setzt ein winziges Inline-Skript im <head> – erst danach
   greifen die Startzustände. Ohne JavaScript ist alles sofort sichtbar.
   Ohne Bewegungswunsch ebenfalls (siehe Guard weiter unten). */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.rv.ist-da{opacity:1;transform:none}
.js .staffel > *{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.staffel.ist-da > *{opacity:1;transform:none}
.staffel.ist-da > *:nth-child(2){transition-delay:.1s}
.staffel.ist-da > *:nth-child(3){transition-delay:.2s}
.staffel.ist-da > *:nth-child(4){transition-delay:.3s}
.staffel.ist-da > *:nth-child(5){transition-delay:.4s}
@media (prefers-reduced-motion: reduce){
  .js .rv,.js .staffel > *{opacity:1 !important;transform:none !important;transition:none !important}
  .wort{opacity:1 !important;transform:none !important;animation:none !important}
}
/* Wort-für-Wort-Reveal der Hero-Überschrift. Die Spans setzt main.js;
   ohne JavaScript steht die Überschrift unverändert da. */
.wort{display:inline-block;opacity:0;transform:translateY(.45em);
  animation:wortEin .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wortEin{to{opacity:1;transform:none}}

/* Bildplatzhalter – hält das Seitenverhältnis, solange die Bilddatei fehlt.
   Kommt das Bild, ersetzt es den Inhalt; onerror schaltet zurück. */
.bildplatz{border-radius:var(--r-karte);border:1px dashed var(--blau-4);
  background:linear-gradient(135deg,var(--tuerkis-2),var(--violett-1));
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;text-align:center;font-size:.82rem;color:var(--gedaempft)}
.bildplatz img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-karte) - 1px)}
.f-dunkel .bildplatz{border-color:rgba(255,255,255,.3);
  background:linear-gradient(135deg,rgba(12,192,223,.14),rgba(111,47,238,.14));color:var(--auf-dunkel)}

/* --------------------------------------------------------------------------
   9. Inhaltsbausteine
   -------------------------------------------------------------------------- */

/* Listen */
ul.punkte{list-style:none;padding:0;margin:1.5rem 0;max-width:var(--col)}
ul.punkte li{position:relative;padding-left:1.6rem;margin-bottom:.85em}
ul.punkte li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--tuerkis)}

/* Zitatfragen (Abschnitt Belastung) */
.fragen{margin:1.75rem 0;max-width:var(--col);border-left:2px solid var(--tuerkis);padding-left:1.4rem}
.fragen p{font-size:1.12rem;font-weight:600;color:var(--blau);margin:0 0 .7em;letter-spacing:-.015em}
.fragen p:last-child{margin-bottom:0}

/* Klarstellungs-Kasten – Vertrauenssignal, kein Kleingedrucktes */
.klarstellung{
  background:var(--tuerkis-2);
  border:1px solid var(--tuerkis-4);
  border-left-width:5px;border-left-color:var(--tuerkis);
  border-radius:var(--r-karte);
  padding:clamp(1.4rem,4vw,2.2rem);
  margin-top:2.5rem;
  max-width:48rem;
}
.klarstellung h3{margin-top:0;font-size:clamp(1.1rem,2.4vw,1.32rem)}
.klarstellung p{max-width:52ch;color:var(--gedaempft);font-size:.97rem}
/* Das Aufklappelement im Kasten trägt keine eigene Trennlinie und keinen
   eigenen Abstand – der Kasten ist die Auszeichnung. */
.klarstellung details.mehr{margin-top:0;border-top:0;padding-top:0;max-width:none}
.klarstellung details.mehr summary{font-size:1rem}

/* Themenfelder als Dot-Bullet-Liste (aus Variante B): Türkis-Punkt, fetter
   Name, gedämpfte Kurzbeschreibung. Keine Icons – eine Icon-Reihe lädt die
   B2C-Lesart ein, die die Positionierung vermeidet. */
.themen{list-style:none;padding:0;margin:1.6rem 0 0;max-width:44rem}
.themen li{display:flex;gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--blau-3);font-size:1rem}
.themen li:last-child{border-bottom:none}
.themen li::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--tuerkis);flex:0 0 auto;transform:translateY(-1px)}
.themen b{color:var(--blau);font-weight:700}
.themen span{color:var(--gedaempft);font-size:.92rem}
.f-getoent .themen li{border-bottom-color:var(--blau-3)}

/* Chips: drei Kennwerte über der Themenliste */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:1.6rem 0 0;padding:0;list-style:none}
.chip{border-radius:var(--r-pill);padding:8px 16px;font-size:.82rem;font-weight:700;
  border:1px solid var(--blau-3);color:var(--gedaempft);background:#fff}
.chip--an{background:var(--blau);color:#fff;border-color:var(--blau)}

/* Schrittkarten (Abschnitt Aufwand). Genau ein Schritt liegt bei der Klinik –
   dieser Kontrast trägt die Aussage und deckt sich mit der großen 1 darunter.
   Die Nummern-Pill hängt über der Kartenkante. */
.schritte{list-style:none;counter-reset:s;padding:0;margin:3rem 0 0;
  display:grid;gap:22px}
@media (min-width:48em){ .schritte{grid-template-columns:repeat(3,1fr)} }
.schritte li{counter-increment:s;position:relative;padding-top:2.4rem}
.schritte .num{position:absolute;top:-14px;left:22px;
  border-radius:var(--r-pill);padding:6px 15px;font-size:.76rem;font-weight:700;
  background:var(--tuerkis);color:var(--blau-d0);white-space:nowrap}
.schritte h3{font-size:1.08rem;margin:0 0 .4rem}
.schritte p.txt{margin:0;font-size:.94rem;line-height:1.55;color:var(--gedaempft)}
/* Auf dunkler Fläche darf der gedämpfte Grauton nicht stehen bleiben:
   #5a6678 auf #0a3f86 ergibt 1,5 : 1 und ist praktisch unlesbar. Die Regel
   muss NACH .schritte p.txt stehen – gleiche Spezifität, die spätere gewinnt. */
.f-dunkel .schritte p.txt{color:var(--auf-dunkel)}
/* Der Klinik-Schritt ist der einzige abgesetzte: helle Fläche auf dunklem
   Grund, damit er dort steht, wo die Aussage sitzt. */
.f-dunkel .schritte li[data-akteur="klinik"]{background:#fff;border-color:#fff}
.f-dunkel .schritte li[data-akteur="klinik"] h3{color:var(--blau)}
.f-dunkel .schritte li[data-akteur="klinik"] p.txt{color:var(--gedaempft)}
/* OvaOptimize-Schritt in Violett – Rahmen und Pill, sonst nichts. */
.schritte li[data-akteur="ovaoptimize"]{border:1.5px solid var(--violett)}
.schritte li[data-akteur="ovaoptimize"] .num{background:var(--violett);color:#fff}
.f-dunkel .schritte li[data-akteur="ovaoptimize"]{border-color:var(--violett-4)}
.f-dunkel .schritte li[data-akteur="ovaoptimize"] .num{background:var(--violett-4);color:var(--blau-d0)}

/* Fazitzeile unter der Schrittliste */
.fazit{max-width:52rem;margin:2rem 0 0;padding-top:1rem;
  border-top:1px solid var(--blau-3);font-size:1.02rem;line-height:1.6}
.f-dunkel .fazit{border-top-color:rgba(255,255,255,.22);color:#e2eaf5}
.f-dunkel .fazit strong{color:#fff}

/* Ablauf-Zeitliste (Abschnitt Ablauf). Der eigentliche Inhalt ist nicht, dass
   es vier Schritte gibt, sondern dass der Entscheidungstermin von Anfang an
   feststeht – deshalb die Zeitebene und die Auszeichnung des dritten Schritts
   als einziges violettes Element des Abschnitts. */
.ablaufliste{list-style:none;padding:0;margin:0}
.ablaufliste li{display:grid;grid-template-columns:7.5rem 1fr;gap:18px;
  padding:20px 0;border-bottom:1px solid var(--blau-3)}
.ablaufliste li:last-child{border-bottom:none}
/* Wochenzahlen in Violett (Karo, 25.08.2026). Violett ist im Projekt die
   Farbe für Daten und Entscheidungen – und es trägt: #6f2fee auf Weiß ergibt
   6,3 : 1. Türkis wäre hier bei 2,2 : 1 gelandet und damit unlesbar.
   Der Entscheidungsschritt bleibt trotzdem der herausgehobene: Er trägt
   zusätzlich die violette Fläche und die Kante. */
.ablaufliste .wk{font-size:.86rem;font-weight:700;letter-spacing:.02em;color:var(--violett)}
.ablaufliste h3{font-size:1.05rem;margin:0 0 .25rem}
.ablaufliste p{margin:0;font-size:.94rem;color:var(--gedaempft);line-height:1.55}
.ablaufliste li[data-entscheidung]{
  background:var(--violett-1);border-radius:var(--r-karte);
  box-shadow:inset 3px 0 0 var(--violett);
  padding-inline:1.1rem;border-bottom-color:transparent}
.ablaufliste li[data-entscheidung] .wk{color:var(--violett)}
@media (max-width:34em){
  .ablaufliste li{grid-template-columns:1fr;gap:6px}
}

/* --------------------------------------------------------------------------
   9b. Displayzahl

   Eine große Zahl mit kleiner Erläuterung – das wirksamste Mittel, um einer
   textlastigen Seite Ankerpunkte zu geben. Höchstens drei auf der Seite.
   Nur beschreibende Größen: Dauer, Anzahl, Kosten. Niemals Erfolgsraten.
   -------------------------------------------------------------------------- */
.zahl{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(20px,4vw,42px);
  align-items:end;margin:clamp(38px,6vw,60px) 0 0;padding-top:26px;
  border-top:1px solid var(--blau-3)}
.zahl .z{font-weight:700;line-height:.82;
  font-size:clamp(4.4rem,13vw,8rem);letter-spacing:-.05em;color:var(--blau)}
.zahl .b{padding-bottom:.5rem}
.zahl .b .l{font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gedaempft);margin:0 0 6px}
.zahl .b .t{font-size:1rem;line-height:1.5;margin:0;max-width:38ch;color:var(--gedaempft)}
.f-dunkel .zahl{border-top-color:rgba(255,255,255,.22)}
.f-dunkel .zahl .z{color:#fff}
.f-dunkel .zahl .b .l{color:var(--tuerkis-4)}
.f-dunkel .zahl .b .t{color:var(--auf-dunkel)}
@media (max-width:760px){
  .zahl{grid-template-columns:1fr;gap:14px}
  .zahl .b{padding-bottom:0}
}

/* --------------------------------------------------------------------------
   9c. „Mehr dazu" – nimmt Erklärabsätze aus dem Lesefluss, ohne sie zu
   verstecken. Für alles, was für die Kaufentscheidung nicht nötig ist.
   -------------------------------------------------------------------------- */
details.mehr{max-width:var(--col);margin-top:22px;
  border-top:1px solid var(--blau-3);padding-top:14px}
details.mehr summary{font-size:.86rem;font-weight:700;
  color:var(--blau);cursor:pointer;list-style:none}
details.mehr summary::-webkit-details-marker{display:none}
details.mehr summary::before{content:"+ "}
details.mehr[open] summary::before{content:"– "}
details.mehr .inhalt{padding-top:14px;font-size:.95rem;line-height:1.62;color:var(--gedaempft)}
details.mehr .inhalt p{margin:0 0 .9em}
details.mehr .inhalt p:last-child{margin-bottom:0}
.karte details.mehr{max-width:none;border-top-color:var(--blau-3)}
.f-dunkel details.mehr{border-top-color:rgba(255,255,255,.18)}
.f-dunkel details.mehr summary{color:#cfe0f6}
.f-dunkel details.mehr .inhalt{color:var(--auf-dunkel)}

/* --------------------------------------------------------------------------
   9e. Vergleichskarten (Abschnitt „kosten", dunkle Insel)
   -------------------------------------------------------------------------- */
.vergleich{margin-top:clamp(34px,5vw,48px)}
.vergleich .marke{font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--auf-dunkel-2);margin:0 0 .7rem}
.vergleich .gross{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:700;
  letter-spacing:-.04em;line-height:1.04;color:#fff;font-variant-numeric:tabular-nums}
.vergleich .karte--akzent{border:1.5px solid var(--tuerkis);
  box-shadow:0 0 44px -12px rgba(12,192,223,.45)}
.vergleich .karte--akzent .marke{color:var(--tuerkis)}
.vergleich .karte--akzent .gross{color:var(--tuerkis)}
/* Einordnender Satz unter der großen Zahl, vor den Stichpunkten. */
.vergleich .karte-lead{margin:1rem 0 0;font-size:.96rem;line-height:1.55;
  color:var(--auf-dunkel)}
.vergleich ul{list-style:none;padding:0;margin:1.2rem 0 0}
.vergleich li{position:relative;padding:8px 0 8px 28px;font-size:.94rem;color:var(--auf-dunkel)}
.vergleich li::before{content:"";position:absolute;left:0;top:14px;
  width:12px;height:12px;border-radius:50%;border:3px solid var(--tuerkis)}
.vergleich .btn{margin-top:1.4rem}

/* --------------------------------------------------------------------------
   9f. Paketkarten und Preistabellen (preise.html)

   Drei Pakete im Kartensystem der Startseite: Radius, Rahmen und Schatten wie
   überall sonst. Das frühere Haarlinienraster mit subgrid ist entfallen – es
   war der einzige Baustein, der optisch quer zum Rest stand, und die lokale
   Sonderregelung in preise.html fällt damit weg.

   Drei Spalten, weil es drei Pakete gibt. Enterprise ist kein viertes Paket,
   sondern ein Hinweis, und steht deshalb als Streifen darunter statt als
   gleichwertige Karte daneben.
   -------------------------------------------------------------------------- */
.pakete{list-style:none;padding:0;margin:clamp(28px,4vw,42px) 0 0;
  display:grid;gap:22px;max-width:var(--wrap)}
@media (min-width:52em){ .pakete{grid-template-columns:repeat(3,1fr)} }

.paket{position:relative;display:flex;flex-direction:column;
  padding-top:clamp(1.9rem,3.4vw,2.5rem)}
/* Die Empfehlung hängt als Pille über der Kartenkante – dasselbe Muster wie
   die Schrittnummern auf der Startseite. Sie steht damit außerhalb des
   Textflusses; ohne das säße die Karte mit Hinweis eine Zeile tiefer als die
   beiden anderen, und die Beträge flüchteten nicht mehr. */
.paket .empfehlung{position:absolute;top:-13px;left:22px;
  border-radius:var(--r-pill);padding:6px 15px;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;background:var(--tuerkis);color:var(--blau-d0);white-space:nowrap}
.paket--empfohlen{border:1.5px solid var(--tuerkis)}

.paket-name{font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gedaempft);margin:0 0 .9rem}
/* Die Platzzahl ist die größte Zahl der Karte – sie ist der einzige echte
   Unterschied zwischen den Paketen, und die Überschrift verspricht sie. */
.paket-zahl{font-weight:700;font-size:clamp(2.8rem,5.6vw,3.6rem);line-height:.88;
  letter-spacing:-.05em;color:var(--blau);margin:0;font-variant-numeric:tabular-nums}
.paket-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gedaempft);margin:.7rem 0 0}
/* margin-top:auto schiebt den Preisblock an den unteren Kartenrand. Dadurch
   liegen die Beträge über alle drei Karten auf einer Höhe, ohne dass die
   Karten sich ein gemeinsames Raster teilen müssen. */
.paket-preis{margin:auto 0 0;padding-top:1.3rem;border-top:1px solid var(--blau-3);
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.paket--empfohlen .paket-preis{border-top-color:var(--tuerkis-4)}
/* tabular-nums hält die Ziffern auf gleicher Breite – sonst stehen die
   Beträge untereinander nicht bündig. */
.paket-preis b{font-weight:700;font-size:1.5rem;letter-spacing:-.035em;
  color:var(--blau);font-variant-numeric:tabular-nums}
.paket-preis span{font-size:.86rem;color:var(--gedaempft)}
.paket-jahr{margin:.6rem 0 0;font-size:.83rem;line-height:1.5;color:var(--gedaempft)}
.paket-jahr b{font-weight:700;color:var(--blau);font-variant-numeric:tabular-nums}

/* Enterprise als Streifen: kein Paket mit Preis, sondern ein Hinweis. Eine
   gleichwertige vierte Karte würde etwas anderes behaupten. */
.enterprise{max-width:var(--wrap);margin:22px 0 0;
  padding:1.1rem clamp(1.2rem,3vw,1.6rem);
  background:#fff;border:1px solid var(--blau-3);border-left:3px solid var(--tuerkis);
  border-radius:var(--r-karte);
  display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:baseline;
  font-size:.92rem;line-height:1.55;color:var(--gedaempft)}
.enterprise .e-label{font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blau);white-space:nowrap}
@media (max-width:34em){ .enterprise{grid-template-columns:1fr;gap:6px} }
.feinzeile{max-width:var(--wrap);margin:14px 0 0;font-size:.8rem;color:var(--gedaempft)}

/* Konditionen im Aufklappelement: Begriff und Erklärung als Beschreibungs-
   liste statt als zweite Tabelle – eine Tabelle in einem Aufklappelement
   wirkt wie ein zweiter Anlauf auf dieselbe Sache. */
.kondi-liste{margin:0}
.kondi-liste dt{font-weight:700;color:var(--blau);margin-top:1rem}
.kondi-liste dt:first-child{margin-top:0}
.kondi-liste dd{margin:.25rem 0 0;max-width:62ch}

.preistabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.preistabelle caption{text-align:left}
.preistabelle th,.preistabelle td{padding:.75rem .9rem;text-align:right;
  border-bottom:1px solid var(--blau-3);vertical-align:baseline}
.preistabelle thead th{font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gedaempft);
  border-bottom:1px solid var(--blau-4)}
/* Erste Spalte ist die Zeilenbezeichnung: linksbündig und kräftiger. */
.preistabelle th:first-child,.preistabelle td:first-child{text-align:left}
.preistabelle tbody th{font-weight:700;color:var(--blau)}
.preistabelle tbody tr:last-child th,
.preistabelle tbody tr:last-child td{border-bottom:none}
.preistabelle tbody th[scope="row"]:last-child{text-align:right}
.tabelle-huelle{overflow-x:auto;margin:2rem 0;max-width:52rem}

/* --------------------------------------------------------------------------
   9g. Kursmockup (Abschnitt „Einblick")  ·  SCHUTZ-ABSCHNITT

   Die Bühne rechnet in den Originalmaßen des Entwurfs (1800 × 1200) und wird
   als Ganzes herunterskaliert. Vorteil: Alle Abstände, Schriftgrößen und
   Schatten bleiben im Verhältnis, ohne dass eine einzige Zahl umgerechnet
   werden muss. Newsreader und Plex Mono stehen im Mockup als Inline-Angaben
   und bleiben dort erhalten.

   cqw ist die Containerbreite in Prozent; die Division durch die Bezugsbreite
   ergibt den Maßstab. Der feste Wert davor ist die Rückfallebene für Browser
   ohne Container-Queries.
   -------------------------------------------------------------------------- */
.kursmockup{margin:clamp(2rem,5vw,3rem) 0 0;max-width:var(--wrap)}
.kursmockup__buehne{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:1800/1200;overflow:hidden;
}
.kursmockup__flaeche{
  position:absolute;top:0;left:0;width:1800px;height:1200px;
  transform-origin:top left;
  transform:scale(.55);
  transform:scale(calc(100cqw / 1800px));
}
.kursmockup figcaption{font-size:.85rem;color:var(--gedaempft);
  margin-top:1rem;line-height:1.5;max-width:64ch}
.kursmockup .eyebrow{margin-bottom:.9em}

/* Das Mockup in der Programmspalte.

   Auf die halbe Spaltenbreite heruntergerechnet wären die Modulzeilen rund
   sieben Pixel hoch – das Mockup würde zum grauen Fleck. Deshalb rechnet die
   Spaltenfassung gegen 1100 statt 1800 Pixel: Die Kursübersicht mit der
   Modulliste (1060 px breit) füllt die Spalte in lesbarer Größe, die übrigen
   drei Ansichten sind seitlich erreichbar. Dieselbe Mechanik, die das Mockup
   schon auf Telefonen benutzt – nur mit anderem Bezugsmaß. */
.kursmockup--spalte{margin-top:0}
.kursmockup--spalte .kursmockup__buehne{
  aspect-ratio:1100/1160;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
.kursmockup--spalte .kursmockup__flaeche{
  transform:scale(.62);
  transform:scale(calc(100cqw / 1100px));
}

/* Auf schmalen Geräten würde der Maßstab auf 0,19 fallen – die Modulzeilen
   wären dann 3,5 px hoch und das Mockup ein grauer Fleck. Stattdessen bleibt
   es in halber Größe stehen und wird seitlich erkundbar. */
@media (max-width:760px){
  .kursmockup__buehne{
    aspect-ratio:auto;height:600px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .kursmockup__flaeche{transform:scale(.5)}
  /* Die Spaltenfassung ist hier nicht mehr in einer Spalte – sie fällt auf
     dieselbe Telefonlösung zurück wie die Grundfassung. Die Regel muss
     ausdrücklich dastehen: .kursmockup--spalte ist spezifischer und würde
     die Zeile darüber sonst überstimmen. */
  .kursmockup--spalte .kursmockup__buehne{aspect-ratio:auto;height:600px}
  .kursmockup--spalte .kursmockup__flaeche{transform:scale(.5)}
}

/* --------------------------------------------------------------------------
   9g-2. Programmraster: Kursinhalte und Mockup nebeneinander

   Links steht, was drin ist, rechts, wie es aussieht. Die rechte Spalte ist
   die breitere – das Mockup braucht Fläche, die Liste nicht.
   -------------------------------------------------------------------------- */
.programm-raster{display:grid;gap:clamp(28px,4vw,48px);
  margin-top:clamp(28px,4vw,42px);align-items:start}
@media (min-width:62em){
  .programm-raster{grid-template-columns:minmax(0,21rem) minmax(0,1fr)}
  /* Das Mockup steht oben bündig mit den Chips, nicht mit der Liste. */
  .programm-raster > .kursmockup{margin-top:0}
}
.programm-inhalte .chips{margin-top:0}

/* --------------------------------------------------------------------------
   9h. Musterbericht (Abschnitt „Kennzahlen")

   Dokument-Charakter: Der Bericht ist eine zusammenhängende, klar abgesetzte
   Berichtsfläche – ein Blatt auf getöntem Grund, nicht ein aufgelöstes
   Dashboard aus Einzelkacheln. Oben das Kennungsband in Dunkelblau, darunter
   die fünf Kennzahlen und beide Diagramme.

   Das Band ist keine Zierde: Ohne den Hinweis liest sich der Block als
   Erwartungswert. Es steht deshalb ÜBER den Zahlen, nicht darunter.
   Aufbau, Achsen und Beschriftungen der Diagramme sind unverändert.
   -------------------------------------------------------------------------- */
.bericht{max-width:64rem;margin:clamp(2rem,5vw,3rem) 0 0;
  background:#fff;border:1px solid var(--blau-3);border-radius:var(--r-karte);
  box-shadow:var(--schatten-tief);overflow:hidden}

.bericht__band{display:flex;gap:.9rem;align-items:flex-start;
  background:var(--blau);color:var(--auf-dunkel);
  padding:.9rem clamp(1.1rem,3vw,1.9rem);margin:0;
  font-size:.8rem;line-height:1.5}
.bericht__kennung{font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);
  padding:.2rem .65rem;flex:0 0 auto}
.bericht__koerper{padding:clamp(1.2rem,3.5vw,2rem)}

/* Fünf Kacheln im Haarlinienraster – die Bauweise eines Berichtsblatts,
   nicht die von Einzelkarten. */
.bericht__kacheln{display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--blau-3);border:1px solid var(--blau-3);border-radius:var(--radius);
  overflow:hidden}
.bericht__kachel{background:#fff;padding:.95rem .9rem .9rem;
  display:grid;grid-template-rows:auto auto auto;align-content:start}
.k-label{font-size:.76rem;color:var(--gedaempft);line-height:1.35;min-height:2.8em}
.k-wert{font-size:1.85rem;font-weight:700;letter-spacing:-.035em;
  line-height:1;color:var(--blau);margin-top:.7rem;font-variant-numeric:tabular-nums}
.k-einheit{font-size:.86rem;font-weight:600;color:var(--gedaempft);margin-left:1px;letter-spacing:0}
.k-fuss{font-size:.68rem;color:var(--gedaempft);margin-top:.45rem;line-height:1.45}

.bericht__charts{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.9rem;
  align-items:start}
.bericht__chart h3{margin:0 0 .15rem;font-size:.92rem;
  font-weight:700;color:var(--blau);letter-spacing:0}
.c-unter{margin:0 0 .7rem;font-size:.78rem;color:var(--gedaempft);line-height:1.45}
.bericht__chart svg{width:100%;height:auto;display:block;overflow:visible}
.c-achse{font-family:var(--font-m);font-size:11px;font-weight:600;fill:var(--gedaempft)}
.c-direkt{font-family:var(--font-b);font-size:12.5px;font-weight:700;fill:var(--blau)}
.c-referenz{font-family:var(--font-m);font-size:11px;font-weight:600;fill:var(--gedaempft)}
.c-quelle{font-size:.7rem;color:var(--gedaempft);margin-top:.55rem;line-height:1.5}

.bericht figcaption{margin-top:1.6rem;padding-top:1rem;
  border-top:1px solid var(--blau-3);
  font-size:.78rem;color:var(--gedaempft);line-height:1.5}

@media (max-width:760px){
  .bericht__kacheln{grid-template-columns:repeat(2,1fr)}
  .bericht__charts{grid-template-columns:1fr;gap:1.6rem}
  .k-label{min-height:0}
}

/* Zitat (Abschnitt Stimmen)

   Nach Variante A: eine breite, zentrierte Karte mit viel Luft – das Zitat
   ist der Inhalt, nicht die Beigabe. Deshalb großzügige Polsterung und eine
   Zitatgröße, die deutlich über dem Fließtext liegt.

   Der Block ist einspaltig und auf Lesebreite begrenzt. Für eine zweite
   Stimme genügt die Zusatzklasse stimmen--zwei. */
.stimmen{display:grid;gap:22px;max-width:46rem;
  margin:0 auto clamp(2.5rem,5vw,3.5rem)}
.stimmen--zwei{max-width:64rem}
@media (min-width:48em){
  .stimmen--zwei{grid-template-columns:1fr 1fr}
}

figure.stimme{margin:0;max-width:none;text-align:center;
  padding:clamp(2rem,5vw,3.25rem) clamp(1.5rem,4vw,3rem)}
figure.stimme blockquote{margin:0;
  font-family:var(--font-akz);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,3.2vw,1.75rem);line-height:1.4;color:var(--blau);
  text-wrap:pretty}
figure.stimme figcaption{margin:1.4rem auto 0;max-width:52ch;
  font-size:.88rem;font-weight:600;color:var(--gedaempft)}

/* FAQ */
.faq{max-width:48rem;margin-top:2.5rem}
.faq details{background:#fff;border:1px solid var(--blau-3);border-radius:var(--r-karte);
  padding:.4rem 1.5rem;margin-bottom:10px;box-shadow:var(--schatten)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 2rem 1.05rem 0;position:relative;
  font-size:1rem;font-weight:700;color:var(--blau);line-height:1.4;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.3rem;top:1.4rem;
  width:10px;height:10px;border-right:2px solid var(--tuerkis);border-bottom:2px solid var(--tuerkis);
  transform:rotate(45deg);transition:transform .18s
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .antwort{padding:0 0 1.2rem;max-width:52ch;font-size:.96rem;color:var(--gedaempft)}
@media (prefers-reduced-motion: reduce){ .faq summary::after{transition:none} }

/* Zusätzlicher Abstand nach einer Grafik */
.abstand-oben{margin-top:2.6rem}

/* Quellenverzeichnis – ruhige Fläche, kein Akzentton */
.quellen{font-size:.9rem;padding-block:clamp(40px,6vw,64px)}
.quellen-vorwort{max-width:64ch;margin-bottom:1.6rem;color:var(--gedaempft)}

.quellen-klapp{max-width:58rem}
.quellen-klapp > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.6em;
  font-weight:700;color:var(--blau);font-size:.95rem;padding:.6em 0;
}
.quellen-klapp > summary::-webkit-details-marker{display:none}
.quellen-klapp > summary::after{
  content:"";width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--tuerkis);border-bottom:2px solid var(--tuerkis);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.quellen-klapp[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}

/* Eigene Ziffern statt ol-Zählung: „10a" ließe sich sonst nicht darstellen. */
.quellen ol{list-style:none;padding:0;margin:1rem 0 0;max-width:58rem}
.quellen li{position:relative;padding-left:3.2rem;margin-bottom:1.1em;line-height:1.55;
  color:var(--gedaempft)}
.quellen li::before{
  content:attr(data-ziffer) ".";position:absolute;left:0;top:0;width:2.6rem;
  font-size:.85em;font-weight:700;color:var(--blau);text-align:right}
.quellen li i{font-style:italic}
.quellen li a{color:var(--blau);word-break:break-word}
.quelle-zurueck{display:inline-block;margin-left:.35em;text-decoration:none;
  font-size:1.05em;line-height:1;padding:.2em .35em;border-radius:2px}
.quelle-zurueck:hover{background:var(--blau-3)}
/* Beim Sprung aus dem Text die Zielzeile markieren. Über eine Klasse statt
   :target – history.replaceState aktualisiert die Adresse, löst aber kein
   :target aus. */
.quellen li.ist-ziel::after{content:"";position:absolute;left:-.9rem;right:0;top:-.35em;bottom:-.35em;
  border-left:3px solid var(--tuerkis);pointer-events:none}
.quellen li:focus-visible{outline:3px solid var(--violett);outline-offset:4px}

/* TODO-Markierung – im fertigen Stand darf keine mehr sichtbar sein */
.todo{font-size:.8em;background:var(--violett-2);color:var(--blau);
  padding:.15em .45em;border-radius:2px;border:1px dashed var(--violett-4)}

/* --------------------------------------------------------------------------
   9i. Bildbausteine (Fotos, ergaenzt 25.08.2026)

   Vier Varianten: Breitbild als Sektionsauftakt, Zweispalter, Panoramaband
   und kleines gedrehtes Bild. Jedes Bild traegt width/height im HTML, das
   Seitenverhaeltnis steht damit vor dem Laden fest - kein Layoutsprung.
   -------------------------------------------------------------------------- */

.foto{
  border-radius:20px;
  border:1px solid var(--blau-3);
  box-shadow:0 24px 60px rgba(0,52,121,.14);
  overflow:hidden;
  margin:0;
}
.foto img{display:block;width:100%;height:auto}

/* Auf dunkler Flaeche traegt der blaue Schatten nicht - der Rahmen uebernimmt */
.f-dunkel .foto{border-color:rgba(255,255,255,.22);
  box-shadow:0 24px 60px rgba(0,0,0,.28)}

/* Bild 1 - Breitbild als Auftakt ueber den Schritt-Karten */
.foto--breit{max-width:900px;margin:0 0 clamp(2rem,5vw,3rem)}

/* Bild 2 - Zweispalter: Bild links, Text rechts */
.bild-duo{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:center;
  margin-top:22px}
@media (min-width:52em){
  .bild-duo{grid-template-columns:minmax(0,480px) minmax(0,1fr)}
}

/* Bild 3 - Panoramaband, 3:1, Hoehe gedeckelt */
.foto--band{border:0;box-shadow:0 16px 40px rgba(0,52,121,.10);
  margin:0 0 clamp(2rem,5vw,3rem)}
.foto--band img{aspect-ratio:3/1;max-height:280px;width:100%;
  object-fit:cover;object-position:center 62%}

/* Bild 4 - kleines Bild, leicht gedreht: Papiercharakter, leitet den
   Musterbericht ein und ersetzt ihn nicht */
.foto--klein{max-width:420px;transform:rotate(-1.5deg);
  margin:clamp(1.75rem,4vw,2.5rem) auto}
@media (min-width:60em){
  .foto--klein{float:right;margin:.5rem 0 2rem 2.5rem}
  /* Der Musterbericht ist Schutz-Element und darf nie schmaler werden als
     seine Spalte - er raeumt den Float deshalb ab. */
  #kennzahlen .bericht{clear:both}
}
/* Ohne Float - also auf schmalen Geraeten - wuerde das Bild vor Eyebrow und
   Ueberschrift stehen, weil es im Quelltext zuerst kommt. Die Reihenfolge
   wird dort gedreht: erst die Ueberschrift, dann das Bild. */
@media (max-width:59.99em){
  #kennzahlen .wrap > div.rv{display:flex;flex-direction:column}
  #kennzahlen .foto--klein{order:2;margin-top:0}
}
@media (prefers-reduced-motion:reduce){.foto--klein{transform:none}}

/* --------------------------------------------------------------------------
   10. SVG-Grafiken  ·  SCHUTZ-ABSCHNITT (Grundlagen)
   -------------------------------------------------------------------------- */
.grafik{margin:2.75rem 0 0;max-width:52rem}
.grafik svg{display:block;width:100%;height:auto}
.grafik figcaption{font-size:.8rem;color:var(--gedaempft);
  margin-top:.9rem;line-height:1.5}

.svg-flaeche{fill:var(--blau-1)}
.svg-text{font-family:var(--font-b);fill:var(--blau)}
.svg-mono{font-family:var(--font-m);fill:var(--blau)}

/* --------------------------------------------------------------------------
   10a. Signature-Element A – 85-Tage-Zeitachse  ·  SCHUTZ-ABSCHNITT

   Scrollgesteuert. Aufbau, Achsen, Beschriftungen und Mechanik unverändert
   aus der Live-Seite. Neu ist ausschließlich die Farbgebung: Die Sektion
   steht jetzt auf Dunkelblau, und die Grafik ist dafür umgefärbt.

   UMFÄRBEN OHNE UMBAU: main.js setzt die Farben der Balken, Bänder, Linien
   und Marker als var(--…)-Verweise. Der Block .ova-reifung unten definiert
   diese Token für den Innenraum der Grafik neu – dadurch wechselt die
   Farbwelt, ohne dass eine einzige Koordinate oder Zeile Skript angefasst
   werden muss. Wer hier etwas ändert, ändert nur Werte, nie Namen.
   -------------------------------------------------------------------------- */
.ova-reifung{
  margin-block:clamp(2rem,5vw,3.5rem);
  /* Dark-Varianten der Tokens, ausschließlich innerhalb der Grafik gültig. */
  --blau:#ffffff;                    /* Programmlinie, Marker, starke Elemente */
  --blau-1:rgba(255,255,255,.055);   /* Wochenbänder */
  --blau-3:rgba(255,255,255,.30);    /* Grundlinie und Achsen */
  --blau-4:rgba(255,255,255,.45);    /* gestrichelte Linien, Führungslinien */
}
/* Der Zellkern bleibt dunkel: Er liegt auf dem hell leuchtenden Follikel und
   verschwände in Weiß. Die CSS-Eigenschaft schlägt das Präsentationsattribut
   fill="var(--blau)" im SVG – deshalb genügt diese eine Zeile. */
.ova-reifung #ovaNucleus{fill:var(--blau-d0)}

.ova-reifung__stage{height:420vh;position:relative}

/* Die Bühne klebt UNTER der Kopfzeile, nicht dahinter. --kopf-h wird von
   main.js aus der tatsächlichen Höhe gesetzt (Vorgabewert für den Fall ohne
   JavaScript). Ohne diesen Versatz schiebt sich die sticky Kopfzeile über die
   Tagesanzeige, und der Wert ist beim Scrollen nicht mehr lesbar.

   justify-content:flex-start statt center: Reicht die Höhe einmal nicht aus,
   wird unten abgeschnitten – nie oben. Die Tagesanzeige steht oben und muss
   unter allen Umständen sichtbar bleiben. */
.ova-reifung__sticky{position:sticky;top:var(--kopf-h,68px);
  height:calc(100vh - var(--kopf-h,68px));
  display:flex;flex-direction:column;justify-content:flex-start;
  padding-block:clamp(.75rem,2vh,1.75rem)}
.ova-reifung__inner{max-width:78rem;margin-inline:auto;padding-inline:var(--pad-x);width:100%;
  display:flex;flex-direction:column;min-height:0}

.ova-reifung__fuss{max-width:78rem;margin-inline:auto;padding-inline:var(--pad-x);width:100%;
  padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.ova-reifung__unterschrift{font-size:.82rem;color:var(--auf-dunkel);
  max-width:64ch;margin:0;line-height:1.5}

/* Vorspann über der Grafik – erklärt die 85 Tage, bevor sie laufen. */
.ova-reifung__intro{max-width:44rem;margin:0 0 clamp(2rem,5vw,3.5rem)}
.ova-reifung__titel{font-weight:700;color:#fff;
  font-size:clamp(1.9rem,5vw,3rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 .55em}
.ova-reifung__titel em{display:block;font-family:var(--font-akz);font-style:italic;
  font-weight:400;letter-spacing:0;color:var(--tuerkis-4)}
.ova-reifung__intro p{color:var(--auf-dunkel);max-width:56ch}

.ova-reifung__readout{display:flex;align-items:baseline;gap:1.25rem;flex-wrap:wrap;margin:0 0 .5rem}
.ova-reifung__day{font-size:clamp(38px,7vw,72px);font-weight:700;
  color:var(--tuerkis);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.ova-reifung__day span{font-size:.26em;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--auf-dunkel-2);margin-left:10px;vertical-align:middle}
.ova-reifung__phase{font-size:.95rem;color:var(--auf-dunkel)}
.ova-reifung__phase b{color:#fff;font-weight:700}

/* Die Grafik nimmt den Platz, der nach der Tagesanzeige übrig bleibt.
   min-height:0 ist nötig, damit sie im Flex-Container schrumpfen darf,
   statt die Anzeige darüber hinauszudrängen. */
.ova-reifung svg{display:block;width:100%;height:auto;max-height:78vh;
  flex:1 1 auto;min-height:0;overflow:visible}
/* Schriftgrößen in SVG sind Nutzereinheiten und schrumpfen mit der viewBox.
   --s ist der Kehrwert des Skalierungsfaktors und wird von main.js gesetzt;
   die Grundwerte unten sind das, was tatsächlich auf dem Schirm ankommen soll.
   Ohne JavaScript greift der Vorgabewert 1.

   Opazität nicht unter .8: darunter fällt die Beschriftung unter 4,5 : 1.
   Auf Dunkelblau ergibt Weiß mit 80 % rund 7 : 1. */
.ova-lbl{font-family:var(--font-m);font-size:calc(11.5px * var(--s,1));font-weight:600;
  fill:var(--blau);opacity:.8;letter-spacing:.06em}
.ova-lbl-on{opacity:1;font-weight:700}
.ova-lbl-stark{opacity:1}
.ova-cap{font-family:var(--font-b);font-size:calc(12.5px * var(--s,1));font-weight:600;
  fill:var(--blau);opacity:.85}

/* Lesbarkeit der Zeitachse (25.08.2026)

   Auf dunklem Grund und über die volle Fensterbreite gestreckt trugen die
   Grundwerte oben zu wenig: 11,5 px Beschriftung und Haarlinien mit
   Strichstärke 1 verschwanden. Größen und Strichstärken sind hier für die
   Zeitachse angehoben – Geometrie, Achsen, Beschriftungen und Mechanik
   bleiben unverändert.

   Die Strichstärken stehen in main.js als Präsentationsattribute. Die
   CSS-Eigenschaft schlägt sie, deshalb genügen diese Regeln; das Skript wird
   nicht angefasst. Die nth-child-Auswahl folgt der Reihenfolge, in der
   main.js die drei Linien in #ovaProgLine einhängt:
     1 gestrichelte Grundlinie · 2 aktive Programmlinie · 3 Senkrechte Tag 85 */
/* Die Deckelung mit min() ist nicht kosmetisch: main.js hebt --s auf schmalen
   Geräten bis auf 2 an. Ohne Deckel wäre ein Markerlabel dort rund 32
   viewBox-Einheiten hoch – der Stufenabstand der fünf Prozessmarker beträgt
   34. Bei 23 Einheiten bleibt Luft (gemessene Kastenhöhe rund 32), und die
   Beschriftungen laufen nicht ineinander. */
.ova-reifung .ova-lbl{font-size:min(calc(13.5px * var(--s,1)), 23px);font-weight:700;opacity:.9}
.ova-reifung .ova-lbl-on{opacity:1}
.ova-reifung .ova-cap{font-size:min(calc(15.5px * var(--s,1)), 26px);font-weight:700;opacity:1}

/* Grundlinie der Balkenreihe und Klammer der Programmwochen */
.ova-reifung svg > line,
.ova-reifung svg > path{stroke-width:1.8}

.ova-reifung #ovaProgLine line:nth-child(1){stroke-width:1.8}
.ova-reifung #ovaProgLine line:nth-child(2){stroke-width:4}
.ova-reifung #ovaProgLine line:nth-child(3){stroke-width:1.8}
.ova-reifung #ovaMarker line{stroke-width:1.8}
.ova-reifung #ovaBlob{stroke-width:2}
.ova-reifung #ovaStem{stroke-width:1.8}
.ova-reifung #ovaZona{stroke-width:5}

/* Schmale Geräte: Die Achse behält eine Mindestbreite und wird seitlich
   verschiebbar – dieselbe Lösung, die das Kursmockup dort schon benutzt.

   Der Grund ist Rechnerei, keine Vorliebe: Die viewBox ist 948 Einheiten
   breit. In einem 350 px schmalen Fenster steht jede Einheit auf 0,37 px, und
   selbst die vergrößerte Beschriftung käme bei rund fünf Pixeln an. Mit
   700 px Mindestbreite sind es rund siebzehn. Geometrie, Achsen, Texte und
   Scroll-Mechanik bleiben unverändert – verschoben wird nur der Ausschnitt. */
@media (max-width:760px){
  .ova-reifung__inner{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .ova-reifung svg{min-width:700px}
}

/* Niedrige Fenster (Laptops im Querformat, geteilte Bildschirme): Die
   Tagesanzeige wird kompakter, damit der Grafik genug Höhe bleibt. */
@media (max-height:700px){
  .ova-reifung__stage{height:320vh}
  .ova-reifung__day{font-size:clamp(28px,5vw,44px)}
  .ova-reifung__readout{gap:.85rem;margin-bottom:.25rem}
  .ova-reifung__phase{font-size:.85rem}
  .ova-reifung svg{max-height:80vh}
}
/* Ohne Bewegungswunsch: keine überlange Bühne, Grafik steht als Standbild */
@media (prefers-reduced-motion: reduce){
  .ova-reifung__stage{height:auto}
  .ova-reifung__sticky{position:static;height:auto;padding-block:var(--pad-y)}
}

/* --------------------------------------------------------------------------
   10b. Signature-Element B – Wahrnehmungslücke  ·  SCHUTZ-ABSCHNITT
   Erst selbst schätzen, dann die Vergleichswerte. Die Karte steht auf weißer
   Sektionsfläche; Aufbau, Achsen und Auswertung sind unverändert.
   Die Werte 2,54 / 0,96 stehen in main.js und sind dort verbindlich.
   -------------------------------------------------------------------------- */
.ova-gap{background:#fff;border:1px solid var(--blau-3);border-radius:var(--r-karte);
  box-shadow:var(--schatten);
  padding:clamp(1.5rem,4vw,2.6rem);margin:0 auto;max-width:48rem}
.ova-gap__frage{font-size:clamp(1.25rem,2.8vw,1.75rem);color:var(--blau);
  font-weight:700;line-height:1.16;letter-spacing:-.03em;margin:0 0 .5rem;max-width:30ch}
.ova-gap__sub{font-size:.94rem;color:var(--gedaempft);margin:0 0 1.75rem;max-width:58ch}

.ova-gap__wert{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .4rem}
.ova-gap__wert b{font-size:2.75rem;font-weight:700;color:var(--violett);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.ova-gap__wert span{font-size:.88rem;font-weight:600;color:var(--gedaempft)}

.ova-gap input[type=range]{width:100%;accent-color:var(--violett);margin:.9rem 0 .25rem}
.ova-gap__skala{display:flex;justify-content:space-between;gap:1rem;
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gedaempft);margin:0}

.ova-gap__btn{font-family:var(--font-b);font-size:1rem;font-weight:700;padding:.85em 1.7em;
  border:2px solid var(--blau);border-radius:var(--r-pill);cursor:pointer;
  background:var(--blau);color:#fff;margin-top:1.6rem;transition:filter .15s}
.ova-gap__btn:hover{filter:brightness(1.35)}
/* „Ausgewertet" ist eine Rückmeldung und muss lesbar bleiben. Weiß auf
   --blau-4 erreicht nur 2 : 1 – deshalb dunkelblaue Schrift auf heller Fläche. */
.ova-gap__btn[disabled]{background:var(--blau-2);border-color:var(--blau-4);color:var(--blau);
  cursor:default;filter:none}

/* display:none statt nur opacity:0 – sonst reserviert die Grafik ihren vollen
   Platz und hinterlässt vor dem Klick eine große leere Fläche in der Karte.
   .ist-bereit schaltet sie ein, .ist-sichtbar blendet sie auf. */
.ova-gap__ergebnis{display:none;opacity:0;transform:translateY(12px);
  transition:opacity .7s ease, transform .7s ease}
.ova-gap__ergebnis.ist-bereit{display:block}
.ova-gap__ergebnis.ist-sichtbar{opacity:1;transform:none}
.ova-gap svg{display:block;width:100%;height:auto;overflow:visible;margin:.75rem 0 .25rem}
.ova-num{font-family:var(--font-b);font-size:calc(20px * var(--s,1));font-weight:700;fill:var(--blau);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}

.ova-gap__deutung{border-left:2px solid var(--tuerkis);padding-left:1.25rem;margin:2rem 0 0;
  font-size:.95rem;color:var(--gedaempft);max-width:58ch}
.ova-gap__deutung b{color:var(--blau)}
/* Bleibt im Dokument, damit aria-live greift, nimmt aber leer keinen Platz
   und zeigt keinen Randstrich. */
.ova-gap__deutung:empty{margin:0;padding:0;border:0}
/* Abschluss unter der Auswertung – steht auf der Sektionsfläche, nicht in
   der weißen Karte. Kein gefüllter Button: Der Abschnitt trägt keinen CTA. */
.ova-gap__schluss{max-width:48rem;margin:clamp(2.25rem,5vw,3.25rem) auto 0}
.ova-gap__schluss h3{font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.12;
  letter-spacing:-.03em;max-width:28ch;margin:0 0 .6em}
.ova-gap__schluss p{max-width:56ch;margin:0;color:var(--gedaempft)}

.ova-gap__fein{font-size:.79rem;color:var(--gedaempft);margin:2.25rem 0 0;max-width:64ch;
  border-top:1px solid var(--blau-3);padding-top:1rem}
/* Fassung über der Grafik: Der Strich sitzt unten, sonst trennt er den
   Hinweis vom Auswerten-Button statt von der Auswertung. */
.ova-gap__fein--vor{margin:1.75rem 0 0;border-top:0;border-bottom:1px solid var(--blau-3);
  padding-top:0;padding-bottom:1rem}

@media (prefers-reduced-motion: reduce){ .ova-gap__ergebnis{transition:none} }

/* --------------------------------------------------------------------------
   10c. Gründerin – Foto und Text
   -------------------------------------------------------------------------- */
.gruenderin{display:grid;gap:clamp(28px,5vw,52px);align-items:center}
@media (min-width:48em){ .gruenderin{grid-template-columns:320px 1fr} }
.bild-portraet{margin:0;padding:0;max-width:320px}
/* Weiches Rechteck statt Kreis: Ein Porträt im Kreis liest als Profilbild,
   das Rechteck als Bild in einem Dossier. */
.bild-portraet img{width:100%;height:auto;display:block;border-radius:32px;
  box-shadow:var(--schatten-tief)}
.bild-portraet figcaption{font-size:.8rem;color:var(--gedaempft);margin-top:.8rem}

/* Zitat der Gründerin. Bewusst schlichter als die Teilnehmerinnen-Stimme:
   Es steht im Fließtext der Sektion, nicht als eigene Karte – sonst hätte
   die Seite zwei gleich laute Zitatkästen kurz hintereinander. Der türkise
   Strich links bindet es an das Kernsatz-Muster zurück. */
.gruenderin-zitat{margin:1.6rem 0;padding-left:1.4rem;
  border-left:2px solid var(--tuerkis)}
.gruenderin-zitat blockquote{margin:0}
.gruenderin-zitat blockquote p{font-family:var(--font-akz);font-style:italic;
  font-weight:400;font-size:clamp(1.08rem,2.1vw,1.28rem);line-height:1.45;
  color:var(--blau);text-wrap:pretty;margin:0}
.gruenderin-zitat figcaption{margin-top:.9rem;font-size:.85rem;
  font-weight:600;color:var(--gedaempft)}

/* --------------------------------------------------------------------------
   10d. Co-Partner-Block
   -------------------------------------------------------------------------- */
.co-partner-block{max-width:56ch;margin:2.5rem 0 0;padding:1.5rem;
  background:#fff;border:1px solid var(--blau-3);
  border-left:3px solid var(--tuerkis);border-radius:var(--r-karte)}
.co-partner-block p{margin:0;line-height:1.6;font-size:.97rem;color:var(--gedaempft)}
.co-partner-block a{color:var(--blau);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--tuerkis)}

/* --------------------------------------------------------------------------
   10e. Rechtstexte – impressum.html, datenschutz.html
   -------------------------------------------------------------------------- */
.rechtstext{max-width:46rem}
.rechtstext h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-top:2.75rem;max-width:34ch}
.rechtstext h3{font-size:1.12rem;margin-top:1.9rem}
.rechtstext p,.rechtstext li{max-width:64ch;color:var(--gedaempft)}
.rechtstext ul{padding-left:1.3rem}
.rechtstext li{margin-bottom:.5em}
.rechtstext dl{margin:1.2rem 0}
.rechtstext dt{font-weight:700;color:var(--blau);margin-top:1rem}
.rechtstext dd{margin:.2rem 0 0;color:var(--gedaempft)}
.hinweis-redaktion{background:var(--violett-1);border:1px dashed var(--violett-4);
  border-radius:var(--r-karte);padding:1.2rem 1.4rem;margin:2rem 0;font-size:.95rem}
.hinweis-redaktion p{max-width:64ch}

/* --------------------------------------------------------------------------
   11. Fußzeile
   -------------------------------------------------------------------------- */
.fuss{background:var(--blau);color:var(--auf-dunkel);
  border-top:2px solid var(--tuerkis);
  padding-block:clamp(2.5rem,6vw,4rem);font-size:.95rem}
.fuss a{color:#fff;text-decoration:none;border-bottom:1px solid var(--tuerkis);padding-bottom:1px}
.fuss-grid{display:grid;gap:2rem}
@media (min-width:44em){ .fuss-grid{grid-template-columns:1fr auto;align-items:end} }
.fuss-nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.fuss .logo{color:#fff;font-size:1.16rem;margin-bottom:.7rem}