/* =============================================================================
   Der Gesangscoach — Website-Demo
   Statisches Stylesheet, erzeugt aus dem Designsystem "Der Gesangscoach".
   Tokens sind 1:1 aus tokens/colors.css, typography.css, spacing.css,
   effects.css übernommen. Ergänzungen sind als [ERGÄNZUNG] markiert.

   Breakpoints entsprechen bewusst den Elementor-Standardwerten,
   damit der spätere Nachbau ohne eigene Breakpoint-Definition auskommt:
     mobile   max-width: 767px
     tablet   max-width: 1024px
   ============================================================================= */

/* ---------------------------------------------------------------- 1. Fonts */
/* Archivo, Archivo Black, Manrope — SIL Open Font License 1.1,
   lokal ausgeliefert (kein Google-Fonts-CDN, keine Drittanbieter-Requests). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;
  src:url("../fonts/archivo-latin.woff2") format("woff2");
  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:"Archivo";font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;
  src:url("../fonts/archivo-latin-ext.woff2") format("woff2");
  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:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/archivo-black-latin.woff2") format("woff2");
  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:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/archivo-black-latin-ext.woff2") format("woff2");
  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:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/manrope-latin.woff2") format("woff2");
  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";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/manrope-latin-ext.woff2") format("woff2");
  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 */
:root{
  /* Marke */
  --blue-stage:#0033ab;--blue-brand:#0050c0;--blue-600:#0044b3;--blue-400:#3d7ad6;--blue-200:#b9cdf0;--blue-050:#e8f0fc;
  --yellow:#fbb703;--yellow-light:#ffcb3d;--yellow-deep:#e0a200;--yellow-050:#fff6e0;
  --black:#050506;--navy:#011a42;--navy-deep:#000c22;
  --paper:#faf3ed;--paper-card:#ffffff;--paper-sunk:#f2e9e1;
  /* warme Neutralen */
  --gray-900:#231f1c;--gray-700:#4a443e;--gray-500:#6a625b;--gray-400:#9a918a;--gray-300:#c4bab2;--gray-200:#e6dbd0;--gray-100:#f1e9e2;
  /* Semantik: Flächen */
  --surface-page:var(--paper);--surface-card:var(--paper-card);--surface-sunk:var(--paper-sunk);
  --surface-dark:var(--navy);--surface-darkest:var(--navy-deep);--surface-stage:var(--black);
  --surface-brand:var(--blue-brand);--surface-signal:var(--yellow);
  /* Semantik: Text */
  --text-body:var(--gray-900);--text-muted:var(--gray-500);
  /* [ANPASSUNG BARRIEREFREIHEIT] Das Designsystem bindet --text-faint an
     --gray-400 (#9a918a). Auf Warmweiß ergibt das 2,81:1 und auf Weiß 3,09:1 –
     beides unter den 4,5:1, die WCAG 2.2 AA für kleine Schrift verlangt.
     Die Rolle zeigt hier deshalb auf --gray-500 (5,4–6,0:1). Die Palette selbst
     bleibt unverändert; die Abstufung zu --text-muted trägt jetzt Schriftgröße,
     Versalien und Sperrung. Siehe docs/05 und docs/09. */
  --text-faint:var(--gray-500);
  --text-heading:var(--black);--text-on-dark:var(--paper);--text-on-dark-muted:#b6c3d8;
  --text-on-brand:var(--paper);--text-on-signal:var(--black);--text-link:var(--blue-brand);--text-link-hover:var(--blue-stage);
  /* Semantik: Linien */
  --line-hairline:var(--gray-200);--line-strong:var(--gray-300);--line-on-dark:rgba(250,243,237,.16);
  /* Marker */
  --marker-blue:var(--blue-stage);--marker-yellow:var(--yellow);--marker-black:var(--black);--marker-paper:var(--paper);
  /* Fehlerfarbe aus components/forms/Input.jsx */
  --error:#c2352b;

  /* Typografie */
  --font-display:"Archivo Black","Archivo",system-ui,sans-serif;
  --font-expanded:"Archivo",system-ui,sans-serif;
  --font-brand:"Manrope",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-condensed:"Manrope",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-11:11px;--fs-13:13px;--fs-15:15px;--fs-17:17px;--fs-19:19px;--fs-22:22px;--fs-26:26px;
  --fs-32:32px;--fs-40:40px;--fs-52:52px;--fs-68:68px;--fs-84:84px;--fs-104:104px;
  --lh-display:.95;--lh-tight:1.12;--lh-snug:1.3;--lh-body:1.62;--lh-loose:1.8;
  --ls-display:-.02em;--ls-tight:-.005em;--ls-normal:0;--ls-label:.12em;--ls-brand:.22em;
  --fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --measure-text:68ch;

  /* [ERGÄNZUNG] Fließende Schriftgrößen. Das Designsystem gibt eine feste
     px-Skala vor; für Mobil bis Desktop werden die Rollen zwischen zwei
     Stufen dieser Skala interpoliert — es entstehen keine neuen Größen. */
  /* Hero bewusst eine Stufe kleiner als --fs-84: bei 84 px rutschen die
     Knöpfe unter die Falz. Die Skala des Designsystems bleibt eingehalten. */
  --fs-hero:clamp(var(--fs-32),5.4vw,var(--fs-68));
  --fs-h1:clamp(var(--fs-32),6.4vw,var(--fs-68));
  --fs-h2:clamp(var(--fs-26),4.4vw,var(--fs-40));
  --fs-h3:clamp(var(--fs-19),2.2vw,var(--fs-26));
  --fs-lead:clamp(var(--fs-19),1.6vw,var(--fs-22));
  --fs-stat:clamp(var(--fs-32),4.6vw,var(--fs-52));

  /* Rollen */
  --type-h3:var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-body);
  --type-lead:var(--fw-regular) var(--fs-lead)/1.5 var(--font-body);
  --type-body:var(--fw-regular) var(--fs-17)/var(--lh-body) var(--font-body);
  --type-small:var(--fw-regular) var(--fs-15)/1.55 var(--font-body);
  --type-label:var(--fw-medium) var(--fs-13)/1.2 var(--font-brand);
  --type-button:var(--fw-semibold) var(--fs-17)/1 var(--font-body);

  /* Raster & Maße */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;
  --container:1200px;--container-wide:1440px;
  --gutter:clamp(20px,5vw,48px);
  --section-y:clamp(64px,8vw,128px);
  --header-h:72px;--header-h-compact:60px;
  --radius-pill:999px;--radius-card:12px;--radius-input:8px;--radius-tag:4px;--radius-none:0;
  --border-w:1px;--border-w-strong:2px;

  /* Effekte */
  --shadow-sm:0 1px 2px rgba(5,5,6,.06),0 2px 8px rgba(5,5,6,.06);
  --shadow-md:0 4px 10px rgba(5,5,6,.08),0 12px 28px rgba(5,5,6,.10);
  --shadow-lg:0 12px 24px rgba(5,5,6,.14),0 32px 64px rgba(5,5,6,.18);
  --shadow-hard:6px 6px 0 var(--black);
  --ring:0 0 0 3px var(--yellow);
  --glow-stage:radial-gradient(58% 68% at 62% 38%,#0a4ec2 0%,#01327f 42%,var(--navy) 72%,var(--navy-deep) 100%);
  --scrim-bottom:linear-gradient(to top,var(--navy) 0%,rgba(1,26,66,.72) 28%,rgba(1,26,66,0) 55%);
  --overlay-dialog:rgba(1,26,66,.72);--overlay-blur:6px;
  --ease-out:cubic-bezier(.22,.61,.36,1);--ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:380ms;
  --t-fast:var(--dur-fast) var(--ease-out);
  --t-base:var(--dur-base) var(--ease-out);
  --t-slow:var(--dur-slow) var(--ease-out);
}

/* ----------------------------------------------------------------- 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
h1,h2,h3,h4{margin:0;color:var(--text-heading);letter-spacing:var(--ls-display)}
h1,h2{text-transform:uppercase;font-family:var(--font-display);font-weight:var(--fw-regular);line-height:var(--lh-display)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
h3,.title-sm{font:var(--type-h3);letter-spacing:var(--ls-tight);text-transform:none}
/* .title-sm: semantisch h2 (Listen- und Randbereichs-Überschriften),
   optisch die h3-Stufe des Designsystems. Verhindert Sprünge in der
   Überschriftenstruktur auf Seiten ohne eigene Abschnitts-h2. */
h4{font:var(--fw-semibold) var(--fs-19)/1.35 var(--font-body);letter-spacing:var(--ls-tight);text-transform:none}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
img{display:block;max-width:100%;height:auto}
/* [ANPASSUNG BARRIEREFREIHEIT] Das Designsystem schreibt einen 3 px starken
   gelben Fokusring vor. Gegen Warmweiß erreicht Gelb nur 1,61:1 – WCAG 2.2
   verlangt für Fokusanzeigen 3:1. Der gelbe Ring bleibt (Markenzeichen) und
   bekommt außen eine 2-px-Fassung in Bühnenblau (9,3:1 gegen Warmweiß).
   Auf dunklen Flächen trägt weiterhin der gelbe Ring (9,7:1 gegen Navy). */
:focus-visible{outline:none;border-radius:2px;
  box-shadow:0 0 0 3px var(--yellow),0 0 0 5px var(--blue-stage)}
::selection{background:var(--yellow);color:var(--black)}
hr{border:0;border-top:1px solid var(--line-hairline);margin:var(--sp-10) 0}
.u-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--sp-4);top:-100px;z-index:100;background:var(--yellow);
  color:var(--black);padding:12px 20px;border-radius:var(--radius-pill);font:var(--type-button);transition:top var(--t-fast)}
.skip-link:focus{top:var(--sp-4);text-decoration:none}
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------- 4. Layout: Section */
/* Elementor-Entsprechung: Section (äußerer Container) + Container (innen) */
.section{background:var(--surface-page);position:relative}
.section--sunk{background:var(--surface-sunk)}
.section--dark{background:var(--surface-dark);color:var(--text-on-dark)}
.section--stage{background:var(--surface-dark);background-image:var(--glow-stage);color:var(--text-on-dark)}
.section--brand{background:var(--surface-brand);color:var(--text-on-brand)}
.section--dark h1,.section--dark h2,.section--stage h1,.section--stage h2,
.section--dark h3,.section--stage h3,.section--dark h4,.section--stage h4{color:var(--text-on-dark)}
.section--flush{padding:0}
.container{max-width:var(--container);margin:0 auto;padding:var(--section-y) var(--gutter);
  display:grid;gap:var(--sp-12)}
.container--wide{max-width:var(--container-wide)}
.container--narrow{max-width:820px}
.container--flush{padding-top:0;padding-bottom:0}
.container--tight{gap:var(--sp-8)}

/* Raster */
.grid{display:grid;gap:var(--sp-6)}
/* Rasterspalten dürfen unter ihre Mindestbreite schrumpfen. Ohne diese Regel
   erzwingt der längste Inhalt (Überschrift, Link, Bild) die Spaltenbreite und
   die Seite läuft auf schmalen Geräten waagerecht über. */
.grid > *{min-width:0}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--split{grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center}
.grid--split-text{grid-template-columns:.85fr 1.15fr;gap:var(--sp-16);align-items:start}
/* Artikel: breite Textspalte links, schmale Randspalte rechts */
.grid--article{grid-template-columns:1.4fr .6fr;gap:var(--sp-16);align-items:start}
.grid--start{align-items:start}

/* -------------------------------------------------------- 5. Marke: Textbau */
.eyebrow{font:var(--type-label);letter-spacing:var(--ls-brand);text-transform:uppercase;
  color:var(--blue-brand);margin:0}
.section--dark .eyebrow,.section--stage .eyebrow,.hero .eyebrow,.ctaband .eyebrow,
.eyebrow--on-dark{color:var(--yellow)}
.eyebrow--muted{color:var(--text-muted)}

.marker{background:var(--marker-yellow);color:var(--text-on-signal);display:inline;
  padding:0 .16em .08em;border-radius:var(--radius-none);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.marker--blue{background:var(--marker-blue);color:var(--paper)}
.marker--black{background:var(--marker-black);color:var(--paper)}

.section-head{display:grid;gap:var(--sp-4);justify-items:start}
/* Seiten ohne Hero tragen ihre <h1> im Abschnittskopf. Optisch bleibt es
   die H2-Stufe des Designsystems, semantisch ist es die Seitenüberschrift. */
.section-head h1{font-size:var(--fs-h2);line-height:var(--lh-tight)}
.section-head--center{text-align:center;justify-items:center;max-width:760px;margin:0 auto}
.section-head p{font:var(--type-lead);color:var(--text-muted);max-width:var(--measure-text);margin:0}
.section--dark .section-head p,.section--stage .section-head p{color:var(--text-on-dark-muted)}

.prose{max-width:var(--measure-text);overflow-wrap:break-word}
h1,h2,h3,h4,.link-arrow span{overflow-wrap:break-word}
.prose h2{margin:var(--sp-12) 0 var(--sp-4)}
.prose h3{margin:var(--sp-8) 0 var(--sp-3)}
.prose > :first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 var(--sp-4);padding-left:var(--sp-6)}
.prose li{margin-bottom:var(--sp-2)}
.prose strong{font-weight:var(--fw-bold)}
.lead{font:var(--type-lead);color:var(--text-muted);max-width:var(--measure-text)}
.section--dark .lead,.section--stage .lead{color:var(--text-on-dark-muted)}
.small{font:var(--type-small);color:var(--text-muted)}
.u-expanded{font-family:var(--font-expanded);font-weight:var(--fw-bold);font-stretch:125%;
  text-transform:uppercase;letter-spacing:var(--ls-display)}

/* -------------------------------------------------------------- 6. Buttons */
/* Elementor-Entsprechung: Button-Widget, Variante über CSS-Klasse */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font:var(--type-button);padding:13px 24px;border-radius:var(--radius-pill);
  border:2px solid transparent;cursor:pointer;text-decoration:none;text-align:center;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn .icon{width:18px;height:18px}
.btn--lg{font:var(--fw-semibold) var(--fs-19)/1 var(--font-body);padding:17px 32px}
.btn--lg .icon{width:20px;height:20px}
.btn--sm{font:var(--fw-semibold) var(--fs-15)/1 var(--font-body);padding:8px 16px}
.btn--sm .icon{width:16px;height:16px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--blue-brand);color:var(--text-on-brand);border-color:var(--blue-brand)}
.btn--primary:hover{background:var(--blue-stage);border-color:var(--blue-stage);color:var(--text-on-brand)}
.btn--signal{background:var(--yellow);color:var(--text-on-signal);border-color:var(--yellow)}
.btn--signal:hover{background:var(--yellow-light);border-color:var(--yellow-light);color:var(--text-on-signal)}
.btn--outline{background:transparent;color:var(--black);border-color:var(--black)}
.btn--outline:hover{background:var(--black);color:var(--paper)}
.btn--on-dark{background:var(--paper);color:var(--black);border-color:var(--paper)}
.btn--on-dark:hover{background:#fff;border-color:#fff;color:var(--black)}
.btn--ghost{background:transparent;color:var(--blue-brand)}
.btn--ghost:hover{background:var(--blue-050);color:var(--blue-stage)}
.btn-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}

/* Textlink mit Pfeil */
/* min-height 24px: Klickflächen-Mindestmaß nach WCAG 2.2 AA (SC 2.5.8). */
.link-arrow{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:24px;
  font:var(--fw-semibold) var(--fs-17)/1.4 var(--font-body)}
.link-arrow .icon{width:18px;height:18px;transition:transform var(--t-fast)}
.link-arrow:hover .icon{transform:translateX(3px)}

/* ------------------------------------------------------- 7. Badge, Tag, Pill */
.badge{display:inline-flex;align-items:center;gap:6px;font:var(--type-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--blue-050);color:var(--blue-stage)}
.badge .icon{width:14px;height:14px}
.badge--signal{background:var(--yellow);color:var(--black)}
.badge--dark{background:var(--navy);color:var(--paper)}
.badge--neutral{background:var(--gray-100);color:var(--gray-700)}
.badge--on-dark{background:rgba(250,243,237,.14);color:var(--paper)}
.tag{display:inline-block;font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:4px 8px;border-radius:var(--radius-tag);background:var(--gray-100);color:var(--gray-700)}

/* ---------------------------------------------------------------- 8. Karten */
.card{background:var(--surface-card);border:1px solid var(--line-hairline);
  border-radius:var(--radius-card);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.card--sunk{background:var(--surface-sunk)}
.card--dark{background:var(--navy);color:var(--text-on-dark);border-color:var(--line-on-dark)}
.card--brand{background:var(--blue-brand);color:var(--text-on-brand);border-color:var(--blue-brand)}
.card--pad-lg{padding:var(--sp-8)}

/* Nutzenkarte */
.benefit{display:grid;gap:var(--sp-4);align-content:start;background:var(--surface-card);
  border:1px solid var(--line-hairline);border-radius:var(--radius-card);padding:var(--sp-6)}
.benefit__icon{width:44px;height:44px;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:var(--blue-050);color:var(--blue-brand)}
.benefit__icon .icon{width:22px;height:22px}
.benefit h3{margin:0}
.benefit p{font:var(--type-small);color:var(--text-muted);margin:0}
.section--dark .benefit,.section--stage .benefit{background:var(--navy);border-color:var(--line-on-dark)}
.section--dark .benefit__icon,.section--stage .benefit__icon{background:rgba(251,183,3,.16);color:var(--yellow)}
.section--dark .benefit p,.section--stage .benefit p{color:var(--text-on-dark-muted)}

/* ------------------------------------------------- 8b. Karte nach Level */
.levelcard{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--surface-card);
  border:1px solid var(--line-hairline);border-radius:var(--radius-card);
  padding:var(--sp-8) var(--sp-6) var(--sp-6);position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:box-shadow var(--t-base)}
.levelcard:hover{box-shadow:var(--shadow-md)}
/* Farbiger Kopfstrich statt zusätzlicher Fläche */
.levelcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--blue-brand)}
.levelcard:first-child::before{background:var(--yellow)}
.levelcard__icon{width:44px;height:44px;border-radius:var(--radius-pill);display:grid;
  place-items:center;background:var(--blue-050);color:var(--blue-brand)}
.levelcard__icon .icon{width:22px;height:22px}
.levelcard__kicker{font:var(--type-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-muted);margin:0}
.levelcard h3{margin:0}
.levelcard > p{font:var(--type-small);color:var(--text-muted);margin:0}
/* Der Link sitzt am Kartenfuß, damit die drei Karten bündig abschließen */
.levelcard__link{margin:auto 0 0;padding-top:var(--sp-2)}

/* ---------------------------------------------------- 8c. Kernaussage */
.statement{display:grid;gap:var(--sp-5);justify-items:start}
.statement__text{font:var(--fw-regular) var(--fs-h3)/1.5 var(--font-body);
  color:var(--text-heading);margin:0;max-width:60ch;
  border-left:4px solid var(--yellow);padding-left:var(--sp-6)}
.statement__text strong{font-weight:var(--fw-bold)}
.statement__by{font:var(--type-label);letter-spacing:var(--ls-brand);text-transform:uppercase;
  color:var(--text-muted);margin:0;padding-left:calc(var(--sp-6) + 4px)}

/* ---------------------------------------------------------------- 9. Schritte */
.steps{display:grid}
.step{display:grid;grid-template-columns:44px 1fr;gap:var(--sp-5)}
.step__rail{display:grid;justify-items:center;gap:var(--sp-2);grid-template-rows:auto 1fr}
.step__num{width:44px;height:44px;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:var(--blue-brand);color:var(--paper);
  font:var(--fw-regular) var(--fs-22)/1 var(--font-display)}
.step__line{width:2px;min-height:24px;height:100%;background:var(--line-hairline)}
.step__body{display:grid;gap:var(--sp-2);padding-bottom:var(--sp-8)}
.step:last-child .step__body{padding-bottom:0}
.step__body p{color:var(--text-muted);max-width:var(--measure-text);margin:0}
.section--dark .step__num,.section--stage .step__num{background:rgba(250,243,237,.12)}
.section--dark .step__line,.section--stage .step__line{background:var(--line-on-dark)}
.section--dark .step__body p,.section--stage .step__body p{color:var(--text-on-dark-muted)}

/* ------------------------------------------------------------ 10. Zahlenband */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8);
  background:var(--surface-brand);padding:var(--sp-8) var(--gutter)}
.statstrip--sunk{background:var(--paper-sunk)}
.stat{display:grid;gap:var(--sp-2);justify-items:center;text-align:center;align-content:start}
.stat__value{font-family:var(--font-expanded);font-weight:var(--fw-bold);font-stretch:125%;
  font-size:var(--fs-stat);line-height:1.05;color:var(--paper);text-wrap:balance}
.stat__label{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:rgba(250,243,237,.8)}
.statstrip--sunk .stat__value{color:var(--blue-stage)}
.statstrip--sunk .stat__label{color:var(--text-muted)}

/* ------------------------------------------------------------- 11. Kachel/Video */
.lesson{background:var(--surface-card);border:1px solid var(--line-hairline);
  border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t-base);display:flex;flex-direction:column}
.lesson:hover{box-shadow:var(--shadow-md)}
.lesson__media{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden}
.lesson__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-base)}
.lesson:hover .lesson__media img{transform:scale(1.03)}
.lesson__scrim{position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none}
.lesson__play{position:absolute;left:var(--sp-4);bottom:var(--sp-4);width:44px;height:44px;
  border-radius:var(--radius-pill);background:var(--yellow);color:var(--black);display:grid;place-items:center}
.lesson__play .icon{width:20px;height:20px;fill:currentColor;stroke:none}
.lesson__badge{position:absolute;right:var(--sp-4);top:var(--sp-4)}
.lesson__body{padding:var(--sp-5);display:grid;gap:var(--sp-2);align-content:start;flex:1}
.lesson__body h3{margin:0}
.lesson__body h3 a{color:var(--text-heading)}
.lesson__body h3 a:hover{color:var(--blue-brand);text-decoration:none}
.lesson__meta{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-faint);margin:0}

/* ---------------------------------------------------------- 12. Kundenstimmen */
.testimonial{margin:0;background:var(--surface-card);border:1px solid var(--line-hairline);
  border-radius:var(--radius-card);padding:var(--sp-6);display:grid;gap:var(--sp-4);align-content:start}
.testimonial__quote{margin:0;font:var(--fw-regular) var(--fs-19)/1.55 var(--font-body);color:var(--text-body)}
.testimonial figcaption{display:flex;gap:var(--sp-3);align-items:center;margin-top:auto}
.testimonial figcaption > span{display:grid}
.testimonial img{width:40px;height:40px;border-radius:var(--radius-pill);object-fit:cover}
.testimonial__name{font:var(--fw-semibold) var(--fs-15)/1.3 var(--font-body);color:var(--text-heading)}
.testimonial__detail{font:var(--fs-13)/1.3 var(--font-body);color:var(--text-faint)}

/* ------------------------------------------------------------- 13. Preiskarte */
.pricing{display:grid;gap:var(--sp-5);align-content:start;border-radius:var(--radius-card);
  padding:var(--sp-8);background:var(--surface-card);border:1px solid var(--line-hairline);
  box-shadow:var(--shadow-sm)}
.pricing--featured{background:var(--navy);color:var(--text-on-dark);border:2px solid var(--yellow);
  box-shadow:var(--shadow-lg)}
.pricing__head{display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-3);flex-wrap:wrap}
.pricing__name{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--blue-brand)}
.pricing--featured .pricing__name{color:var(--yellow)}
.pricing__price{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.pricing__amount{font:var(--fw-regular) var(--fs-stat)/1 var(--font-display);color:var(--text-heading)}
.pricing--featured .pricing__amount{color:var(--paper)}
.pricing__period{font:var(--type-small);color:var(--text-faint)}
.pricing--featured .pricing__period{color:var(--text-on-dark-muted)}
.pricing__note{font:var(--type-small);color:var(--text-muted);margin:0}
.pricing--featured .pricing__note{color:var(--text-on-dark-muted)}
.pricing ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3)}
.pricing li{display:flex;gap:var(--sp-3);font:var(--type-small);color:var(--text-body)}
.pricing--featured li{color:var(--paper)}
.pricing li .icon{width:17px;height:17px;color:var(--blue-brand);margin-top:.2em}
.pricing--featured li .icon{color:var(--yellow)}
.pricing .btn{margin-top:auto}

/* --------------------------------------------------------------- 14. Checkliste */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3)}
.checklist li{display:flex;gap:var(--sp-3);align-items:flex-start}
.checklist .icon{width:20px;height:20px;color:var(--blue-brand);margin-top:.22em}
.section--dark .checklist .icon,.section--stage .checklist .icon{color:var(--yellow)}
.checklist--inline{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.checklist--inline li{font:var(--type-small);color:var(--text-on-dark-muted);align-items:center}
.checklist--inline .icon{width:16px;height:16px;color:var(--yellow);margin:0}

/* ------------------------------------------------------------------- 15. Hero */
/* [ANPASSUNG BARRIEREFREIHEIT] Auf dem Bühnenschein erreicht die gedämpfte
   Textfarbe #b6c3d8 über der hellsten Stelle des Verlaufs (#0a4ec2) nur
   4,09:1. Auf diesen drei Flächen zeigt die Rolle deshalb auf Warmweiß
   (6,6:1 im ungünstigsten Fall). Auf flachem Navy bleibt #b6c3d8 (9,6:1). */
.hero,.ctaband,.section--stage{--text-on-dark-muted:var(--paper)}

/* --- Hero-Variante „Vollbild": Foto full-bleed, Text auf einer Abdunklung.
   Das Designsystem erlaubt große Bildflächen ausdrücklich full-bleed. Der
   Verlauf ersetzt hier den Bühnenschein, damit der Text überall 4,5:1 erreicht. */
.hero--cover{position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy-deep);background-image:none;
  display:grid;align-items:center;min-height:min(86svh,720px)}
.hero--cover .hero__bg{position:absolute;inset:0;z-index:-2}
.hero--cover .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:72% 30%}
.hero--cover::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(94deg,
    rgba(0,12,34,.97) 0%, rgba(1,26,66,.95) 40%, rgba(1,26,66,.78) 56%,
    rgba(1,26,66,.22) 76%, rgba(0,12,34,.26) 100%)}
.hero--cover .hero__inner{grid-template-columns:1fr;gap:0;width:100%;
  padding-block:clamp(64px,7vw,104px)}
.hero--cover .hero__body{max-width:40rem;gap:var(--sp-5)}
.hero--cover .hero__lead{max-width:36ch}
/* Gelber Taktstrich über dem Eyebrow – setzt das Signal, ohne eine Fläche zu belegen */
.hero--cover .eyebrow{position:relative;padding-top:var(--sp-5)}
.hero--cover .eyebrow::before{content:"";position:absolute;top:0;left:0;
  width:56px;height:4px;background:var(--yellow)}
/* Belegzeile: soll auf Desktop und Tablet in eine Zeile passen, deshalb
   13 px und enge Abstände. Auf Mobil darf sie umbrechen. */
.hero__proof{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin:var(--sp-2) 0 0;
  padding:0;list-style:none;color:var(--text-on-dark-muted);
  font:var(--fw-regular) var(--fs-13)/1.5 var(--font-body)}
.hero__proof li{display:flex;align-items:center;gap:var(--sp-2)}
.hero__proof li + li::before{content:"";width:4px;height:4px;border-radius:999px;
  background:var(--yellow);margin-right:var(--sp-2)}
.hero{background:var(--surface-dark);background-image:var(--glow-stage);color:var(--text-on-dark)}
.hero__inner{max-width:var(--container);margin:0 auto;padding:var(--section-y) var(--gutter);
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-16);align-items:center}
.hero__inner--single{grid-template-columns:1fr;max-width:900px;text-align:center;justify-items:center}
.hero__body{display:grid;gap:var(--sp-6);justify-items:start}
.hero__inner--single .hero__body{justify-items:center}
/* text-wrap:balance verteilt die Zeilen gleichmäßig – sonst stehen bei
   langen deutschen Wörtern einzelne Wörter allein auf einer Zeile. */
.hero h1{font-size:var(--fs-hero);color:var(--paper);margin:0;text-wrap:balance}
.hero__lead{font:var(--type-lead);color:var(--text-on-dark-muted);max-width:46ch;margin:0}
.hero__media img{width:100%;border-radius:var(--radius-none)}
/* Das Schlüsselbild bringt den Bühnenschein selbst mit und läuft deshalb ohne
   Schatten in den Hero-Hintergrund aus. */
.hero__media--blend img{box-shadow:none}
.hero__media--framed img{box-shadow:var(--shadow-lg)}
.hero__note{font:var(--fs-13)/1.5 var(--font-body);color:var(--text-on-dark-muted);margin:0}

/* --------------------------------------------------------------- 16. CTA-Band */
.ctaband{background:var(--surface-dark);background-image:var(--glow-stage);color:var(--text-on-dark)}
.ctaband__inner{max-width:820px;margin:0 auto;padding:var(--section-y) var(--gutter);
  display:grid;gap:var(--sp-5);justify-items:center;text-align:center}
.ctaband h2{font-size:var(--fs-h1);color:var(--paper);margin:0}
.ctaband p{color:var(--text-on-dark-muted);max-width:50ch;margin:0}
.ctaband__lead{font:var(--type-lead)}
.ctaband__note{font:var(--fs-13)/1.4 var(--font-body)}

/* -------------------------------------------------------------- 17. Akkordeon */
.accordion{display:grid}
.accordion__item{border-top:1px solid var(--line-hairline)}
.accordion__item:last-child{border-bottom:1px solid var(--line-hairline)}
.accordion__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  background:transparent;border:none;padding:var(--sp-5) 0;cursor:pointer;text-align:left;
  font:var(--type-h3);color:var(--text-heading);font-family:var(--font-body)}
.accordion__btn .icon{width:22px;height:22px;color:var(--blue-brand);transition:transform var(--t-base)}
.accordion__btn[aria-expanded="true"] .icon{transform:rotate(180deg)}
.accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow)}
.accordion__btn[aria-expanded="true"] + .accordion__panel{grid-template-rows:1fr}
.accordion__panel > div{overflow:hidden}
.accordion__panel p{font:var(--type-body);color:var(--text-muted);max-width:var(--measure-text);
  margin:0 0 var(--sp-5)}

/* -------------------------------------------------------------- 18. Kopfzeile */
.site-header{position:sticky;top:0;z-index:30;background:rgba(250,243,237,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-hairline)}
.site-header__inner{max-width:var(--container);margin:0 auto;height:var(--header-h);
  padding:0 var(--gutter);display:flex;align-items:center;gap:var(--sp-6)}
.site-header__logo img{height:30px;width:auto}
.site-nav{display:flex;gap:var(--sp-6);margin-left:auto;align-items:center}
.site-nav__group{position:relative;display:flex;align-items:center}
.site-nav__trigger{display:inline-flex;align-items:center;gap:6px;min-height:24px;
  background:transparent;border:0;padding:0;cursor:pointer;
  font:var(--fw-medium) var(--fs-15)/1 var(--font-condensed);text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-body)}
.site-nav__trigger .icon{width:16px;height:16px;color:var(--blue-brand);
  transition:transform var(--t-fast)}
.site-nav__trigger:hover{color:var(--blue-brand)}
.site-nav__trigger[aria-expanded="true"] .icon{transform:rotate(180deg)}
.site-nav__group.is-active > .site-nav__trigger{color:var(--blue-brand);
  box-shadow:inset 0 -3px 0 0 var(--yellow)}
.site-nav__sub{position:absolute;top:calc(100% + 14px);left:-16px;z-index:40;
  display:none;grid-template-columns:1fr;gap:2px;width:max-content;max-width:min(92vw,360px);
  background:var(--paper-card);border:1px solid var(--line-hairline);
  border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:var(--sp-3)}
.site-nav__group:hover > .site-nav__sub,
.site-nav__group:focus-within > .site-nav__sub,
.site-nav__trigger[aria-expanded="true"] + .site-nav__sub{display:grid}
/* Unsichtbare Brücke, damit der Zeiger die Lücke zum Panel überqueren kann */
.site-nav__group::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
/* Höhere Spezifität als `.site-nav a` (steht weiter unten und würde sonst
   display:inline-flex und white-space:nowrap durchsetzen). */
.site-nav .site-nav__sub a{display:grid;gap:2px;padding:10px 12px;
  border-radius:var(--radius-input);text-transform:none;letter-spacing:0;
  white-space:normal;min-height:0;align-items:start}
.site-nav__sub a:hover{background:var(--blue-050);text-decoration:none}
/* Kein box-shadow:none – das hat zuvor den Fokusring überschrieben. */
.site-nav__sub a[aria-current="page"]{background:var(--blue-050)}
.site-nav__sub a[aria-current="page"] .site-nav__sub-title{color:var(--blue-brand)}
.site-nav__sub-title{font:var(--fw-semibold) var(--fs-15)/1.3 var(--font-body);
  color:var(--text-heading)}
.site-nav__sub a:hover .site-nav__sub-title{color:var(--blue-brand)}
.site-nav__sub-note{font:var(--fs-13)/1.35 var(--font-body);color:var(--text-muted)}
.site-nav a{font:var(--fw-medium) var(--fs-15)/1 var(--font-condensed);text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-body);white-space:nowrap;
  /* Mindestmaß für Klickflächen (WCAG 2.2 AA, SC 2.5.8) */
  display:inline-flex;align-items:center;min-height:24px}
.site-nav a:hover{color:var(--blue-brand);text-decoration:none}
.site-nav > a[aria-current="page"]{color:var(--blue-brand);
  box-shadow:inset 0 -3px 0 0 var(--yellow)}
.site-header__cta{flex:none}
.site-nav__cta{display:none}
/* Knöpfe im Menü folgen der Button-Typografie, nicht der Navigations-Versalie. */
.site-nav .btn{text-transform:none;letter-spacing:normal}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:2px solid var(--black);
  border-radius:var(--radius-pill);width:44px;height:44px;place-items:center;cursor:pointer;color:var(--black)}
.nav-toggle .icon{width:22px;height:22px}
.nav-toggle .icon--close{display:none}
.nav-toggle[aria-expanded="true"] .icon--menu{display:none}
.nav-toggle[aria-expanded="true"] .icon--close{display:block}

/* --------------------------------------------------------------- 19. Fußzeile */
.site-footer{background:var(--surface-darkest);color:var(--text-on-dark);padding:var(--sp-16) 0 var(--sp-8)}
.site-footer__inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);display:grid;gap:var(--sp-12)}
.site-footer__cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--sp-10)}
.site-footer__brand{display:grid;gap:var(--sp-4);align-content:start}
.site-footer__brand img{height:30px;width:auto}
.site-footer__brand p{font:var(--type-small);color:var(--text-on-dark-muted);max-width:34ch;margin:0}
.site-footer__col{display:grid;gap:var(--sp-3);align-content:start}
.site-footer__col p{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--yellow);margin:0}
.site-footer__col a{font:var(--type-small);color:var(--text-on-dark-muted);
  display:inline-flex;align-items:center;min-height:24px}
.site-footer__col a:hover{color:var(--paper)}
.site-footer__legal{border-top:1px solid var(--line-on-dark);padding-top:var(--sp-6);
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font:var(--fs-13)/1.4 var(--font-body);color:var(--text-on-dark-muted)}
.site-footer__legal a{color:inherit;display:inline-flex;align-items:center;min-height:24px}
.site-footer__legal nav{display:flex;gap:var(--sp-5);flex-wrap:wrap}

/* --------------------------------------------------------------- 20. Formular */
.field{display:grid;gap:var(--sp-2)}
.field > label{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line-strong);
  border-radius:var(--radius-input);padding:13px 14px;font:var(--type-body);color:var(--text-body);
  background:var(--paper-card);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-brand);box-shadow:var(--ring)}
.field__hint{font:var(--fs-13)/1.4 var(--font-body);color:var(--text-faint);margin:0}
.form{display:grid;gap:var(--sp-5)}
.form--on-dark .field > label{color:var(--text-on-dark-muted)}
.form--on-dark .field input,.form--on-dark .field textarea{background:rgba(250,243,237,.08);
  border-color:var(--line-on-dark);color:var(--paper)}
.form--on-dark .field input::placeholder,.form--on-dark .field textarea::placeholder{color:rgba(182,195,216,.7)}
.form--on-dark .field__hint{color:var(--text-on-dark-muted)}
.consent{display:flex;gap:var(--sp-3);align-items:flex-start;font:var(--type-small);color:var(--text-muted)}
.form--on-dark .consent{color:var(--text-on-dark-muted)}
.consent input{margin-top:.1em;width:24px;height:24px;flex:none;accent-color:var(--blue-brand)}

/* Demo-Hinweis an Formularen */
.demo-note{display:flex;gap:var(--sp-3);align-items:flex-start;background:var(--yellow-050);
  border:1px solid var(--yellow);border-radius:var(--radius-input);padding:var(--sp-4);
  font:var(--type-small);color:var(--gray-900)}
.demo-note .icon{width:20px;height:20px;color:var(--yellow-deep);flex:none;margin-top:.1em}
.form--on-dark .demo-note{background:rgba(251,183,3,.14);border-color:rgba(251,183,3,.5);color:var(--paper)}
.form--on-dark .demo-note .icon{color:var(--yellow)}
.form__status{font:var(--fw-semibold) var(--fs-15)/1.5 var(--font-body);color:var(--blue-stage);
  background:var(--blue-050);border-radius:var(--radius-input);padding:var(--sp-4);margin:0}
.form--on-dark .form__status{background:rgba(250,243,237,.12);color:var(--paper)}

/* ------------------------------------------------------- 21. Bild + Bildunterschrift */
.figure{display:grid;gap:var(--sp-3);margin:0}
.figure img{width:100%;box-shadow:var(--shadow-md)}
.figure figcaption{font:var(--fs-13)/1.5 var(--font-body);color:var(--text-faint)}
.media-frame{position:relative;display:block;overflow:hidden;background:var(--navy)}
.media-frame img{width:100%;transition:transform var(--t-base)}
.media-frame:hover img{transform:scale(1.03)}
.media-frame__play{position:absolute;inset:0;display:grid;place-items:center}
.media-frame__play span{width:72px;height:72px;border-radius:var(--radius-pill);background:var(--yellow);
  color:var(--black);display:grid;place-items:center;box-shadow:var(--shadow-md)}
.media-frame__play .icon{width:30px;height:30px;fill:currentColor;stroke:none}
/* Beschriftung als eigene Fläche statt als Verlaufsband: die Vorschaubilder
   tragen eigenen Text, ein Verlauf allein reicht für die Lesbarkeit nicht. */
.media-frame__label{position:absolute;left:var(--sp-4);bottom:var(--sp-4);
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:var(--radius-pill);background:var(--navy);color:var(--paper);
  font:var(--fw-semibold) var(--fs-13)/1.2 var(--font-body);letter-spacing:.02em}
.media-frame::after{content:"";position:absolute;inset:0;background:var(--scrim-bottom);
  pointer-events:none}
.media-frame__play,.media-frame__label{z-index:1}

/* ------------------------------------------------------------- 22. Artikelkopf */
.article-head{display:grid;gap:var(--sp-5);max-width:var(--measure-text)}
.article-meta{display:flex;gap:var(--sp-4);flex-wrap:wrap;font:var(--type-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint)}
.breadcrumb{font:var(--type-small);color:var(--text-muted);margin:0;line-height:1.7}
.breadcrumb a{color:var(--text-muted)}
.article-aside{background:var(--surface-sunk);border-radius:var(--radius-card);padding:var(--sp-6);
  display:grid;gap:var(--sp-4);align-content:start;position:sticky;top:calc(var(--header-h) + var(--sp-6))}
.article-nav{display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
  border-top:1px solid var(--line-hairline);padding-top:var(--sp-6)}

/* ------------------------------------------------------------- 23. Bewegung */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .lesson:hover .lesson__media img,.media-frame:hover img{transform:none}
}

/* ------------------------------------------------- 24. Tablet (max 1024px) */
@media (max-width:1024px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .statstrip{grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-10)}
  .hero__media{order:-1;max-width:560px}
  /* Hochformat: das Foto steht oben frei, der Text darunter auf gedeckter Fläche. */
  .hero--cover{min-height:min(88svh,760px)}
  .hero--cover .hero__bg img{object-position:60% 16%}
  .hero--cover::after{background:linear-gradient(180deg,
    rgba(0,12,34,.10) 0%, rgba(0,12,34,.22) 20%, rgba(1,26,66,.72) 38%,
    rgba(1,26,66,.94) 52%, rgba(0,12,34,.99) 72%)}
  .hero--cover .hero__inner{padding-block:clamp(230px,52vw,340px) clamp(48px,8vw,72px);
    align-content:end}
  .hero--cover .hero__body{max-width:none}
  /* Auf der Opt-in-Seite steht das Formular unter der Botschaft, nicht darüber. */
  .hero--form .hero__media{order:0;max-width:none}
  .grid--split,.grid--split-text,.grid--article{grid-template-columns:1fr;gap:var(--sp-10)}
  .site-footer__cols{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .article-aside{position:static}
  /* Navigation klappt ab Tablet zusammen — entspricht dem Elementor-Standard
     des Nav-Menu-Widgets ("Breakpoint: Tablet"). */
  .site-header__cta{display:none}
  .site-nav__cta{display:block}
  .nav-toggle{display:grid}
  .site-nav{position:absolute;left:0;right:0;top:var(--header-h);display:none;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--paper);border-bottom:1px solid var(--line-hairline);
    box-shadow:var(--shadow-md);padding:var(--sp-2) var(--gutter) var(--sp-6)}
  .site-nav[data-open="true"]{display:flex}
  .site-nav > a{padding:var(--sp-4) 0;border-bottom:1px solid var(--line-hairline);font-size:var(--fs-17)}
  /* box-shadow nur zurücknehmen, solange kein Fokus anliegt – sonst
     verschluckt die Regel den Fokusring. */
  .site-nav > a[aria-current="page"]{border-left:3px solid var(--yellow);padding-left:var(--sp-3)}
  .site-nav > a[aria-current="page"]:not(:focus-visible){box-shadow:none}
  /* Untermenü klappt hier inline auf, statt über der Seite zu schweben */
  .site-nav__group{display:block;position:static}
  .site-nav__group::after{display:none}
  .site-nav__trigger{width:100%;justify-content:space-between;padding:var(--sp-4) 0;
    border-bottom:1px solid var(--line-hairline);font-size:var(--fs-17);min-height:56px}
  .site-nav__group.is-active > .site-nav__trigger{
    border-left:3px solid var(--yellow);padding-left:var(--sp-3)}
  .site-nav__group.is-active > .site-nav__trigger:not(:focus-visible){box-shadow:none}
  .site-nav__sub{position:static;display:none;width:auto;max-width:none;
    border:0;border-bottom:1px solid var(--line-hairline);border-radius:0;
    box-shadow:none;background:var(--paper-sunk);padding:var(--sp-3) var(--sp-3) var(--sp-4);
    margin:0 calc(var(--gutter) * -1);padding-left:var(--gutter);padding-right:var(--gutter)}
  .site-nav__group:hover > .site-nav__sub,
  .site-nav__group:focus-within > .site-nav__sub{display:none}
  .site-nav__trigger[aria-expanded="true"] + .site-nav__sub{display:grid;gap:var(--sp-1)}
  .site-nav__sub a{padding:var(--sp-3) 0;border:0}
  .site-nav__sub a:hover{background:transparent}
  .site-nav__cta{margin-top:var(--sp-5)}
  .site-nav__cta .btn{width:100%;justify-content:center;font:var(--type-button);padding:13px 24px}
}

/* -------------------------------------------------- 25. Mobil (max 767px) */
@media (max-width:767px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .container{gap:var(--sp-10)}
  .site-footer__cols{grid-template-columns:1fr;gap:var(--sp-8)}
  .site-header__inner{gap:var(--sp-4)}
  .btn{width:100%}
  .btn-row{width:100%}
  .btn-row .btn{width:100%}
  .hero__body{justify-items:stretch}
  .checklist--inline{flex-direction:column;gap:var(--sp-3)}
  .pricing{padding:var(--sp-6)}
  .article-nav{flex-direction:column;gap:var(--sp-4)}
  .site-footer__legal{flex-direction:column;gap:var(--sp-3)}
}

/* Sehr schmale Geräte (360 px) */
@media (max-width:400px){
  .site-header__logo img{height:26px}
}