/* ============ Schriften ============
   Selbst ausgeliefert: der Browser fragt keinen fremden Server und
   uebermittelt keine IP-Adresse. Deshalb braucht die Seite kein
   Einwilligungsbanner. Manrope ist eine variable Schrift, ein Bereich
   500 bis 800 statt vier Einzeldateien. */
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:500 800; font-display:swap;
  src:url("assets/schriften/manrope-500-800-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:500 800; font-display:swap;
  src:url("assets/schriften/manrope-500-800-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:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/schriften/poppins-400-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:"Poppins"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/schriften/poppins-400-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:"Poppins"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/schriften/poppins-500-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:"Poppins"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/schriften/poppins-500-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}

/* ============ Token ============ */
:root{
  --petrol:#045664; --petrol-tief:#033f4a; --nacht:#0e1e23;
  --lime:#ddf28a;
  --papier:#ffffff; --flaeche:#f3f6f5; --linie:#e6ebe9;
  --text:#0e1e23; --text-leise:#4a5f65;
  --auf-dunkel:#ffffff; --auf-dunkel-leise:#c3d3d6; --auf-dunkel-still:#9aafb4;
  /* Zweckfarben: vorher standen sie 52-mal als Hexwert im Stylesheet. */
  --auf-lime:#1f3a40;          /* Text auf Lime, 9,87:1 */
  --stern:#b07714;             /* Sternwertung, 3,82:1 als Grafik */
  --fehler:#c0392f; --fehler-text:#a3271f;
  --platzhalter:#68787d;       /* 4,59:1 auf Weiss */
  --linie-stark:#cfd8d6;

  --display:"Manrope",system-ui,sans-serif;
  --lauf:"Poppins",system-ui,sans-serif;

  /* Typoskala, sieben Stufen, Faktor rund 1,25 (bei 1440 px in Klammern).
     Vorher lagen sechs Stufen in 7,4 px (15/16/18/19/21/22,4) und zwischen
     48 und 21 klaffte ein Faktor von 2,29. Die Stufe 36 fuellt das Loch. */
  --t-klein:.9375rem;                        /* 15 */
  --t-text:1.125rem;                         /* 18 */
  --t-gross:clamp(1.1875rem,1.6vw,1.375rem); /* 22 */
  --t-titel:clamp(1.375rem,2vw,1.75rem);     /* 28 */
  --t-gross-titel:clamp(1.6rem,2.8vw,2.25rem); /* 36 */
  --t-schau:clamp(1.95rem,3.6vw,3rem);       /* 48 */
  --t-haupt:clamp(2.7rem,6.2vw,4.75rem);     /* 76 */
  --t-ziffer:clamp(2.5rem,4.6vw,4rem);       /* 64, nur fuer Ziffernanzeigen */

  /* Radien: fuenf Stufen. Regel fuer verschachtelte Flaechen:
     innen = aussen minus Innenabstand, mindestens 4. */
  --r-mini:4px; --r-klein:8px; --r-symbol:16px;

  /* Abstandsskala. Vorher standen 91 Abstandsangaben in 54 verschiedenen
     clamp()-Paaren; bei 1440 px ergab das 47 verschiedene Werte auf einer
     Seite. Jetzt acht Stufen, die bei 900 px einmal umschalten. Frei
     interpolierend bleiben nur --rand, --abschnitt und die Kopfraeume. */
  --a1:4px; --a2:8px; --a3:12px; --a4:16px;
  --a5:20px; --a6:28px; --a7:36px; --a8:56px;

  --rand:clamp(1.25rem,4vw,2.5rem);
  --spalte:min(1320px,100% - var(--rand)*2);
  /* Zwei Abstandsstufen. Vorher hatten alle Abschnitte denselben Wert:
     2.436 px oder 22,7 % der Startseite waren Abschnittspolster, ohne dass
     der Abstand noch etwas ueber Zusammengehoerigkeit ausgesagt haette.
     „eng" bekommt ein Abschnitt, der das Thema des vorigen fortsetzt. */
  --abschnitt:clamp(4.25rem,7vw,7rem);
  --abschnitt-eng:clamp(2.5rem,4vw,4rem);

  --r-pille:999px; --r-karte:24px; --r-flaeche:var(--r-karte);
  --ease:cubic-bezier(.23,1,.32,1);
  /* Ueberschwinger, entspricht Curves.easeOutBack in der App. */
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --schatten:0 18px 44px -24px rgba(14,30,35,.42);
  --schatten-hoch:0 36px 70px -30px rgba(14,30,35,.45);
}
@media (min-width:900px){
  :root{--a3:16px; --a4:24px; --a5:32px; --a6:48px; --a7:72px; --a8:112px}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  position:relative; margin:0; background:var(--papier); color:var(--text);
  font-family:var(--lauf); font-size:1.125rem; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
h1,h2,h3{font-family:var(--display); margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--petrol); text-decoration-thickness:1px; text-underline-offset:.22em}

/* Browser-Oberflächen mitgestalten */
::selection{background:var(--lime); color:var(--nacht)}
:focus-visible{outline:3px solid var(--petrol); outline-offset:3px; border-radius:var(--r-mini)}
/* Sanftes Scrollen erst NACH dem Laden (siehe Skript im Fuss): sonst wird auch
   der Sprung zu #chemie beim Seitenaufruf animiert — 4.500 px zaeh statt sofort. */
html{caret-color:var(--petrol)}

/* ============ Typoskala ============ */
.d1{font-size:var(--t-haupt); line-height:1.02; font-weight:800; letter-spacing:-.028em}
.d2{font-size:var(--t-schau);  line-height:1.08; font-weight:800; letter-spacing:-.022em}
.d3{font-size:var(--t-titel); line-height:1.2;  font-weight:700; letter-spacing:-.012em}
.lead{font-size:var(--t-gross); line-height:1.5; color:var(--text-leise); max-width:44ch;
  text-wrap:pretty}
.fliess{max-width:68ch}
.klein{font-size:.9375rem; line-height:1.5; color:var(--text-leise)}
.zahl{font-variant-numeric:tabular-nums}

/* ============ Grundraster ============ */
.wrap{width:var(--spalte); margin-inline:auto}
section{padding-block:var(--abschnitt)}
section.abschnitt--eng{padding-top:var(--abschnitt-eng)}
/* Ueber der Ueberschrift muss mehr Luft sein als darunter, sonst
   gehoert sie optisch zum falschen Block. 101 zu 48 ist 2,1; im
   engen Abschnitt 58 zu 32 ist 1,8. */
.kopfzeile-block{margin-bottom:var(--a6)}
.abschnitt--eng .kopfzeile-block{margin-bottom:var(--a5)}
.kopfzeile-block .lead{margin-top:var(--a4)}

/* ============ Knöpfe: ein System ============ */
.knopf{
  --bg:var(--petrol); --fg:#fff;
  display:inline-flex; align-items:center; gap:var(--a2);
  background:var(--bg); color:var(--fg);
  font-family:var(--display); font-size:1.0625rem; font-weight:700; letter-spacing:-.005em;
  /* line-height und min-height explizit: <button> erbt die 1,65 aus dem
     body nicht (UA-Vorgabe „normal") und wurde dadurch 5 px flacher als
     dasselbe Element als <a>. Vier Hoehen (56/57/61/62) werden zu einer. */
  line-height:1.2; min-height:3.5rem; justify-content:center;
  padding:var(--a2) var(--a5); border:2px solid var(--bg); border-radius:var(--r-pille);
  text-decoration:none; cursor:pointer;
  transition:transform 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.knopf--rand{--bg:transparent; --fg:var(--petrol); border-color:currentColor}
/* ============ Abstand nach oben ============
   Vorher 74-mal als Inline-Stil, wo stylelint grundsaetzlich nicht
   hinsieht. Als Klasse steht der Wert an einer Stelle. */
.luft2{margin-top:var(--a2)}
.luft3{margin-top:var(--a3)}
.luft4{margin-top:var(--a4)}
.luft5{margin-top:var(--a5)}
.luft6{margin-top:var(--a6)}

/* Umriss auf dunklem Grund und auf Lime. Vorher 44-mal inline, in drei
   Fassungen, zwei davon nur um fuenf Hundertstel Alpha getrennt. */
.knopf--rand-hell{--bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.5)}
.knopf--rand-lime{--bg:transparent; --fg:var(--auf-lime); border-color:currentColor}
.knopf--hell{--bg:#fff; --fg:var(--nacht)}
.knopf--nacht{--bg:var(--nacht); --fg:#fff}
.knopf:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{background:var(--petrol-tief); border-color:var(--petrol-tief); color:#fff}
  .knopf--rand:hover{background:var(--petrol); border-color:var(--petrol)}
  .knopf--rand-hell:hover{background:#fff; --fg:var(--nacht); border-color:#fff}
  .knopf--rand-lime:hover{background:var(--auf-lime); --fg:var(--lime)}
  .knopf--hell:hover{background:var(--lime); border-color:var(--lime); color:var(--nacht)}
  .knopf--nacht:hover{background:var(--petrol); border-color:var(--petrol)}
}
.textlink{font-family:var(--display); font-weight:700; color:var(--petrol); text-decoration:none;
  border-bottom:2px solid rgba(4,86,100,.28); transition:border-color 160ms var(--ease)}
@media (hover:hover){.textlink:hover{border-color:var(--petrol)}}

/* ============ Kopf ============ */
/* Er liegt ueber dem Seitenkopf, nicht darueber angeklebt: transparent auf
   Bild und Nacht, in Markenfarbe auf den hellen Seiten. Nicht klebend —
   den dauerhaften Handlungsweg traegt auf dem Handy die Aktionsleiste unten. */
:root{--kopfhoehe:104px}
@media (max-width:900px){:root{--kopfhoehe:auto}}

.kopf{position:absolute; top:0; left:0; right:0; z-index:50}
.kopf__innen{width:var(--spalte); margin-inline:auto; display:flex; align-items:center;
  gap:var(--a6); min-height:var(--kopfhoehe); padding-block:var(--a5)}
.kopf__logo{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.kopf__logo img{width:clamp(150px,14vw,208px); height:auto}
.kopf__logo .logo--dunkel{display:none}

/* Schleier hinter dem Kopf: haelt weisse Schrift auch ueber hellen Bildstellen lesbar */
/* Deckung im Navigationsband bewusst >= .62 — darunter hält weisse Schrift
   ueber einer hellen Bildstelle die 4,5:1 nicht (nachgerechnet, nicht geschaetzt). */
.kopf::before{content:""; position:absolute; inset:0 0 auto 0; height:calc(var(--kopfhoehe, 104px) + 4.5rem);
  background:linear-gradient(to bottom,
    rgba(14,30,35,.74) 0%,
    rgba(14,30,35,.66) 42%,
    rgba(14,30,35,.32) 72%,
    rgba(14,30,35,0) 100%);
  pointer-events:none; z-index:-1}

.nav{margin-left:auto; display:flex; align-items:center; gap:var(--a3); flex-wrap:wrap}
.nav > a:not(.knopf), .nav__gruppe > a{font-family:var(--display); font-weight:600; font-size:1.0625rem;
  color:#fff; text-decoration:none; padding:var(--a2) var(--a1); letter-spacing:-.005em;
  border-bottom:2px solid transparent; border-radius:var(--r-mini);
  transition:border-color 160ms var(--ease), opacity 160ms var(--ease)}
.nav > a[aria-current]:not(.knopf), .nav__gruppe > a[aria-current]{border-bottom-color:#fff}
@media (hover:hover) and (pointer:fine){
  .nav > a:not(.knopf):hover, .nav__gruppe > a:hover{border-bottom-color:rgba(255,255,255,.55)}
}
.nav .knopf{margin-left:var(--a4); --bg:#fff; --fg:var(--nacht);
  padding-inline:var(--a6); font-size:1.0625rem; border-color:#fff}
@media (hover:hover) and (pointer:fine){
  .nav .knopf:hover{--bg:var(--lime); --fg:var(--nacht); border-color:var(--lime); background:var(--lime); color:var(--nacht)}
}

/* Helle Seiten: Grund in Markenflaeche, dunkle Schrift, dunkles Logo */
.kopf--hell{background:var(--flaeche)}
.kopf--hell::before{display:none}
.kopf--hell .kopf__logo .logo--weiss{display:none}
.kopf--hell .kopf__logo .logo--dunkel{display:block}
.kopf--hell .nav > a:not(.knopf), .kopf--hell .nav__gruppe > a{color:var(--text)}
.kopf--hell .nav > a[aria-current]:not(.knopf), .kopf--hell .nav__gruppe > a[aria-current]{border-bottom-color:var(--petrol); color:var(--petrol)}
@media (hover:hover) and (pointer:fine){
  .kopf--hell .nav > a:not(.knopf):hover, .kopf--hell .nav__gruppe > a:hover{border-bottom-color:rgba(4,86,100,.5)}
}
.kopf--hell .nav .knopf{--bg:var(--petrol); --fg:#fff; border-color:var(--petrol)}
@media (hover:hover) and (pointer:fine){
  .kopf--hell .nav .knopf:hover{--bg:var(--petrol-tief); background:var(--petrol-tief); border-color:var(--petrol-tief); color:#fff}
}

/* ---- Schalter fuer das Menue auf schmalen Geraeten ----
   Ohne JavaScript bleibt er verborgen und die Navigation steht wie bisher
   umgebrochen da. Erst mit Skript wird eingeklappt. */
.menueschalter{display:none}
.menueschalter__zu{display:none}
.kopf[data-menue] .menueschalter__auf{display:none}
.kopf[data-menue] .menueschalter__zu{display:block}

/* Schmale Geraete: die Navigation bricht um, deshalb bekommt der Kopf einen
   eigenen Grund statt eines Schleiers – so bleibt jede Zeile lesbar. */
@media (max-width:900px){
  /* Im Fluss statt ueberlagernd: die umgebrochene Navigation braucht echten
     Platz, sonst deckt sie die Ueberschrift zu. */
  .kopf{position:static; background:var(--nacht)}
  .kopf::before{display:none}
  .kopf__innen{padding-block:var(--a4); gap:var(--a3); align-items:flex-start; flex-wrap:wrap}
  .nav{width:100%; margin-left:0; gap:var(--a1) var(--a4)}
  .nav > a:not(.knopf), .nav__gruppe > a{font-size:1rem}
  .nav .knopf{margin-left:0; margin-top:var(--a1); padding-inline:var(--a5); font-size:1rem}
  .kopf--hell{background:var(--flaeche)}

  /* Mit Skript: eine Zeile Kopf, alles andere hinter dem Schalter.
     Vorher war der Kopf 203 px hoch, ein Viertel des Bildschirms, und die
     fuenf Fachrichtungen waren ueber die Navigation gar nicht erreichbar. */
  .js .kopf{position:relative}
  .js .kopf__innen{flex-wrap:nowrap; align-items:center; justify-content:space-between;
    padding-block:var(--a4); min-height:0}
  .js .menueschalter{display:inline-flex; align-items:center; gap:var(--a2);
    min-height:2.75rem; padding:var(--a2) var(--a3); margin-right:calc(-.75rem);
    background:none; border:0; border-radius:var(--r-klein); cursor:pointer;
    color:#fff; font-family:var(--display); font-weight:700; font-size:1rem}
  .js .kopf--hell .menueschalter{color:var(--text)}
  /* Kein `display` hier: diese Regel ist spezifischer als
     `.menueschalter__zu{display:none}` weiter oben und hat das Kreuz
     deshalb neben dem Burger stehen lassen — beide Zeichen, immer. */
  .js .menueschalter svg{width:1.5rem; height:1.5rem}
  .js .nav{display:none; position:absolute; top:100%; left:0; right:0; width:auto;
    margin:0; padding:var(--a1) var(--rand) var(--a5); gap:0;
    flex-direction:column; align-items:stretch;
    background:var(--nacht); border-top:1px solid rgba(255,255,255,.14);
    max-height:calc(100svh - 5rem); overflow-y:auto; z-index:60}
  .js .kopf--hell .nav{background:var(--flaeche); border-top-color:var(--linie)}
  .js .kopf[data-menue] .nav{display:flex}
  .js .nav > a:not(.knopf), .js .nav__gruppe > a{display:flex; align-items:center;
    min-height:3rem; font-size:1.0625rem; padding:var(--a1) 0; border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.12)}
  .js .kopf--hell .nav > a:not(.knopf), .js .kopf--hell .nav__gruppe > a{border-bottom-color:var(--linie)}
  .js .nav__gruppe{display:block}
  .js .nav .knopf{margin:var(--a4) 0 0; width:100%}
  /* Das Megamenue wird zur eingerueckten Liste statt zur schwebenden Flaeche */
  .js .megamenue{position:static; opacity:1; visibility:visible; pointer-events:auto;
    transform:none; transition:none; background:none; border:0; box-shadow:none;
    padding:0; color:inherit}
  .js .megamenue::before{display:none}
  .js .megamenue__innen{width:auto; display:block; padding:0}
  .js .megamenue__gitter{display:block}
  .js .megamenue__gruppe{margin-top:var(--a4); color:var(--auf-dunkel-leise)}
  .js .kopf--hell .megamenue__gruppe{color:var(--text-leise)}
  .js .megamenue a:not(.knopf){color:#fff; min-height:2.75rem; display:flex;
    align-items:center; padding:var(--a1) 0 var(--a1) var(--a4); font-size:1rem; font-weight:600}
  .js .kopf--hell .megamenue a:not(.knopf){color:var(--text)}
  .js .megamenue a .zusatz{display:none}
  .js .megamenue__karte, .js .megamenue__fuss{display:none}
  /* Freiraum fuer den Kopf entfaellt, er steht jetzt darueber */
  .hero__innen{padding-block:var(--a7) var(--a7)}
  .seitenkopf{padding-block:var(--a7) var(--a6)}
  .seitenkopf--bild{padding-block:var(--a7) var(--a7)}
  .seitenkopf--schlicht{padding-block:var(--a6) var(--a6)}
}

/* Nur fuer Vorleseprogramme: eine Gruppe aus Kontrollkaestchen braucht
   eine Legende, sichtbar braucht sie hier keine. */
.nur-vorlesen{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

.springmarke{position:absolute; left:-9999px; top:0; background:var(--nacht); color:#fff;
  padding:var(--a4) var(--a5); z-index:100; border-radius:0 0 var(--r-flaeche) 0}
.springmarke:focus{left:0}

/* ============ Aufmacher ============ */
.hero{position:relative; isolation:isolate; background:var(--nacht); padding-block:0}
.hero__bild{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero__bild img{width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  clip-path:inset(0 0 0 0); animation:aufdecken 1s var(--ease) both}
@keyframes aufdecken{from{clip-path:inset(0 0 14% 0); transform:scale(1.03)}
  to{clip-path:inset(0 0 0 0); transform:scale(1)}}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(103deg, rgba(14,30,35,.94) 0%, rgba(14,30,35,.78) 38%, rgba(14,30,35,.28) 72%, rgba(14,30,35,.12) 100%),
    linear-gradient(to top, rgba(14,30,35,.86) 0%, rgba(14,30,35,0) 55%)}
.hero__innen{width:var(--spalte); margin-inline:auto; padding-block:clamp(8.5rem,15vw,12rem) clamp(4rem,8vw,7rem);
  color:var(--auf-dunkel); max-width:min(1320px,100% - var(--rand)*2)}
.hero .d1{max-width:19ch}
.hero__lead{font-size:clamp(1.2rem,1.75vw,1.5rem); line-height:1.45; color:var(--auf-dunkel);
  text-wrap:pretty;
  max-width:40ch; margin-top:var(--a5); font-weight:500}
.hero__gegen{margin-top:var(--a3); max-width:44ch; color:var(--auf-dunkel-leise); font-size:1.0625rem}
.hero__aktionen{display:flex; flex-wrap:wrap; gap:var(--a3); margin-top:var(--a6)}
.hero__orte{display:flex; flex-wrap:wrap; gap:var(--a2) var(--a3); margin-top:var(--a7);
  padding-top:var(--a5); border-top:1px solid rgba(255,255,255,.22); list-style:none; padding-left:0; margin-bottom:0}
.hero__orte li{font-family:var(--display); font-weight:600; font-size:1rem; color:var(--auf-dunkel);
  display:inline-flex; align-items:center; gap:var(--a2)}
.hero__orte li:not(:last-child)::after{content:""; width:5px; height:5px; border-radius:50%;
  background:var(--lime); margin-left:var(--a1)}
.hero__orte .neu{font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--lime); color:var(--nacht); padding:var(--a1) var(--a2); border-radius:var(--r-klein)}

/* ============ Laufband ============
   Die Animation ist gewuenscht. Zwei Dinge bleiben aus der Ueberarbeitung:
   der Satz widerspricht nicht mehr dem Abschnitt darunter, und der Text
   steht einmal vorlesbar im Dokument (siehe .laufband__sr), waehrend die
   sechs sichtbaren Wiederholungen aria-hidden bleiben. */
.laufband{max-width:100%; background:var(--lime); color:var(--auf-lime); padding-block:var(--a4);
  overflow:hidden; border-block:2px solid var(--auf-lime); padding-inline:0}
.laufband__spur{display:flex; width:max-content; animation:laufen 34s linear infinite}
.laufband__spur span{font-family:var(--display); font-weight:800; font-size:clamp(1.1rem,1.9vw,1.6rem);
  letter-spacing:-.01em; padding-inline:var(--a5); display:inline-flex; align-items:center; gap:var(--a5)}
.laufband__spur span::after{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--auf-lime); flex:none}
@keyframes laufen{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .laufband__spur{animation:none; width:100%; justify-content:center}
  .laufband__spur span:nth-child(n+2){display:none}
  .laufband__spur span{text-align:center}
  .hero__bild img{animation:none}
}

/* ============ Infoabend (Lime) ============ */
.info{background:var(--lime); color:var(--nacht)}
.info__gitter{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a7)}
@media (min-width:960px){.info__gitter{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:start}}
.info .d2{max-width:22ch}
.info p{color:var(--auf-lime)}
.info .termin{border-color:transparent}
/* ---- Termine: Datumskachel, Angaben, Aktion ---- */
.termine{list-style:none; margin:0; padding:0; display:grid; gap:var(--a3)}
.termin{background:var(--papier); border:1px solid var(--linie); border-radius:var(--r-flaeche);
  padding:var(--a4); display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:var(--a4); align-items:center}
@media (min-width:820px){
  .termin{grid-template-columns:auto minmax(0,1fr) auto}
}
/* Die Kachel traegt das Datum, nicht ein Symbol — Information statt Dekoration. */
.termin__kachel{flex:0 0 auto; width:4.5rem; padding:var(--a3) var(--a2); border-radius:var(--r-symbol);
  background:var(--flaeche); text-align:center; align-self:start}
.termin__kachel b{display:block; font-family:var(--display); font-weight:800; font-size:1.85rem;
  line-height:1; letter-spacing:-.03em; color:var(--petrol); font-variant-numeric:tabular-nums}
.termin__kachel span{display:block; font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.09em; color:var(--text-leise); margin-top:var(--a1)}
.termin__datum{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.15rem,1.7vw,1.4rem); letter-spacing:-.016em; line-height:1.2;
  font-variant-numeric:tabular-nums}
.termin__ort{display:block; font-size:1rem; line-height:1.45; color:var(--text-leise); margin-top:var(--a1)}
.termin__marken{list-style:none; margin:var(--a3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--a1)}
.termin__marken li{font-size:.875rem; line-height:1.3; color:var(--text); background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--r-pille); padding:var(--a1) var(--a3)}
.termin__aktion{display:flex; flex-direction:column; gap:var(--a2); align-items:flex-start}
@media (min-width:820px){.termin__aktion{align-items:flex-end; text-align:right}}
.termin__aktion .knopf{padding-inline:var(--a5); font-size:1rem; white-space:nowrap}
.termin__ics{font-size:.875rem; font-weight:500; color:var(--petrol); text-decoration:none;
  border-bottom:2px solid rgba(4,86,100,.28); transition:border-color 150ms var(--ease); display:inline-flex; align-items:center; min-height:2.75rem}
@media (hover:hover){.termin__ics:hover{border-color:var(--petrol)}}
.termin--vorbei{opacity:.62}
.termin--vorbei .termin__kachel b{color:var(--text-leise)}

/* ============ Zweispalter ============ */
.paar{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a7); align-items:center}
@media (min-width:960px){
  .paar{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .paar--gedreht > :first-child{order:2}
}
.paar__bild{border-radius:var(--r-flaeche); overflow:hidden; box-shadow:var(--schatten)}
.paar__bild img{width:100%; aspect-ratio:4/3.4; object-fit:cover; object-position:50% 42%}
/* Bilder, die ihr Format mitbringen — ein Geraetemockup vertraegt keinen Beschnitt:
   Beim festen 4/3.4-Ausschnitt faellt links und rechts je ein Fuenftel weg,
   und das trifft das Telefon selbst. */
.paar__bild--frei img{aspect-ratio:auto; object-fit:contain}

/* ============ Standorte ============ */
.orte{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a5)}
@media (min-width:820px){.orte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ort{display:flex; flex-direction:column; gap:var(--a4)}
.ort__bild{border-radius:var(--r-karte); overflow:hidden; aspect-ratio:3/2; background:var(--flaeche)}
.ort__bild img{width:100%; height:100%; object-fit:cover}
.ort__platzhalter{display:grid; place-items:center; height:100%; background:var(--petrol); color:#fff;
  font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.02em;
  text-align:center; padding:var(--a5); line-height:1.1}
.ort__platzhalter--nacht{background:var(--nacht)}
.ort__platzhalter span{display:block; font-family:var(--lauf); font-weight:500; font-size:.9375rem;
  line-height:1.45; letter-spacing:0; color:var(--lime); margin-top:var(--a2)}
.ort address{font-style:normal; color:var(--text-leise); font-size:1rem; line-height:1.6}
.ort address a{display:inline-block; min-height:44px; line-height:44px}

/* ============ Fakten ============ */
.fakten{background:var(--nacht); color:var(--auf-dunkel); border-radius:var(--r-flaeche);
  padding:var(--a7)}
.fakten__gitter{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a6); margin-top:var(--a6)}
@media (min-width:760px){.fakten__gitter{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fakt dt{font-family:var(--display); font-weight:700; font-size:1.0625rem; color:var(--lime);
  padding-bottom:var(--a3); margin-bottom:var(--a4); border-bottom:1px solid rgba(221,242,138,.32)}
.fakt dd{margin:0; color:var(--auf-dunkel); font-size:1.0625rem; line-height:1.6}
.fakten__hinweis{margin-top:var(--a6); padding-top:var(--a6); border-top:1px solid rgba(255,255,255,.18);
  color:var(--auf-dunkel-leise); font-size:1rem; max-width:74ch}

/* ============ Vorteile: zwei Spalten mit Haarlinien ============ */
.vorteile{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr);
  gap:0; border-top:1px solid var(--linie)}
@media (min-width:820px){.vorteile{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--a7)}}
.vorteil{border-bottom:1px solid var(--linie); padding-block:var(--a5)}
/* Ein Verweis, der allein eine Ueberschrift bildet, ist ein Navigationsziel
   und braucht eine Trefferflaeche. Auf der Fehlerseite waren die vier Wege
   zurueck 28 px hoch. */
h1 > .textlink, h2 > .textlink, h3 > .textlink, h4 > .textlink{
  display:inline-flex; align-items:center; min-height:2.75rem}
.vorteil h3{margin-bottom:var(--a2)}
.vorteil p{color:var(--text-leise); max-width:52ch}

/* ============ Team ============ */
.team{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a5)}
@media (min-width:700px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.team{grid-template-columns:repeat(6,minmax(0,1fr))}}
.team img{border-radius:var(--r-karte); width:100%; aspect-ratio:1; object-fit:cover; background:var(--flaeche)}

/* ============ Stimmen ============ */
blockquote{margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.012em;
  line-height:1.28; text-wrap:pretty}
figcaption{margin-top:var(--a4); font-family:var(--lauf); font-weight:500; font-size:1rem; color:var(--text-leise)}

/* ============ Kontakt ============ */
.kontakt{background:var(--flaeche)}
.azav{display:inline-flex; align-items:center; gap:var(--a3); background:#fff; border:1px solid var(--linie);
  border-radius:var(--r-pille); padding:var(--a2) var(--a4); font-family:var(--display); font-weight:700;
  font-size:.9375rem; letter-spacing:.02em; color:var(--petrol)}
.azav::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 3px rgba(4,86,100,.18)}

/* ============ Fuß ============ */
.fuss{background:var(--nacht); color:var(--auf-dunkel-leise); padding-block:var(--a7) var(--a6)}
.fuss__oben{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a6)}
@media (min-width:900px){.fuss__oben{grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,auto)); gap:var(--a7)}}
.fuss img{width:180px; margin-bottom:var(--a4)}
.fuss h3{color:var(--auf-dunkel); font-size:1rem; font-weight:700; margin-bottom:var(--a2)}
.fuss address{font-style:normal; font-size:1rem; line-height:1.65}
.fuss a{color:var(--auf-dunkel); text-decoration-color:rgba(255,255,255,.4)}
.fuss address a{display:inline-block; min-height:44px; line-height:1.7; padding-block:var(--a2)}
.fuss__unten{margin-top:var(--a7); padding-top:var(--a6);
  border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; gap:var(--a3) var(--a6);
  align-items:center; font-size:.9375rem}
.fuss__unten nav{display:flex; flex-wrap:wrap; gap:var(--a3) var(--a5); margin-left:auto}

/* ============ Unterseiten ============ */
/* Seitenkopf ohne Vollbild */
.seitenkopf{background:var(--nacht); color:var(--auf-dunkel); padding-block:clamp(7.5rem,12vw,9.5rem) var(--a7)}
/* Formularkopf: knapper als ein Aufmacher, aber der obere Wert muss die
   ueberlagernde Kopfleiste (108 px) raeumen. 132 statt 152 px. */
.seitenkopf--knapp{padding-block:clamp(2.5rem,9.2vw,8.25rem) var(--a7)}
.seitenkopf .d1{font-size:clamp(2.3rem,5vw,3.9rem); max-width:22ch}
.seitenkopf__lead{font-size:var(--t-text); line-height:1.6; color:var(--auf-dunkel-still);
  text-wrap:pretty;
  max-width:62ch; margin-top:var(--a5)}
.seitenkopf__fach{display:flex; flex-wrap:wrap; gap:var(--a2); margin-top:var(--a6); list-style:none; padding:0}
.seitenkopf__fach li{font-family:var(--display); font-weight:600; font-size:.9375rem;
  border:1px solid rgba(255,255,255,.3); border-radius:var(--r-pille); padding:var(--a2) var(--a4); min-height:44px; display:flex; align-items:center}

/* Faktenleiste der Kursseiten */
.eckdaten{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--linie)}
@media (min-width:760px){.eckdaten{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--a7)}}
@media (min-width:1120px){.eckdaten{grid-template-columns:repeat(4,minmax(0,1fr))}}
.eckdaten > li{border-bottom:1px solid var(--linie); padding-block:var(--a5)}
.eckdaten dt,.eckdaten__titel{font-family:var(--display); font-weight:700; font-size:1rem; color:var(--petrol);
  margin-bottom:var(--a2)}
.eckdaten__wert{font-size:1.0625rem; line-height:1.55}
.eckdaten__wert ul{margin:var(--a2) 0 0; padding-left:var(--a4)}
.eckdaten__wert li{margin-bottom:var(--a1)}


/* Hinweisblock */
.hinweis{background:var(--flaeche); border-radius:var(--r-flaeche); padding:var(--a6);
  display:grid; gap:var(--a4)}
@media (min-width:820px){.hinweis{grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--a6)}}
.hinweis--lime{background:var(--lime)}
.hinweis p{color:var(--text-leise); max-width:64ch}
.hinweis--lime p{color:var(--auf-lime)}
.hinweis__aktionen{display:flex; flex-wrap:wrap; gap:var(--a3)}

/* Team mit Namen */
.personen{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--a5)}
@media (min-width:760px){.personen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person img{border-radius:var(--r-karte); width:100%; aspect-ratio:1; object-fit:cover; background:var(--flaeche)}
.person h3{font-size:1.1875rem; font-weight:700; margin-top:var(--a4)}
.person p{color:var(--text-leise); font-size:1rem; margin-top:var(--a1)}

/* Fragenliste (offen, nicht als Akkordeon) */
.fragen{margin:0; border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie); padding-block:var(--a6);
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a4)}
@media (min-width:900px){.frage{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:var(--a7); align-items:start}}
.frage h3{font-size:clamp(1.2rem,1.6vw,1.45rem); font-weight:700; letter-spacing:-.012em}
.frage__antwort{display:grid; gap:var(--a4); color:var(--text-leise)}
.frage__antwort p{max-width:64ch}
.frage__antwort ul{margin:0; padding-left:var(--a4)}
.frage__antwort li{margin-bottom:var(--a2)}
.frage__antwort strong{color:var(--text); font-weight:500}

/* Angebotskarten der Übersicht */
.angebote{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--a6)}
.angebot{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a6);
  padding-block:var(--a6); border-bottom:1px solid var(--linie); align-items:center}
@media (min-width:860px){
  .angebot{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
  .angebot:nth-child(even) > :first-child{order:2}
}
.angebot__bild{border-radius:var(--r-flaeche); overflow:hidden; aspect-ratio:3/2}
.angebot__bild img{width:100%; height:100%; object-fit:cover}
.angebot__text .d2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.angebot__text p{color:var(--text-leise); margin-top:var(--a4); max-width:56ch}
.angebot__text .knopf{margin-top:var(--a5)}

/* Terminliste Ausbilderschein */
.staffeln{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a4)}
@media (min-width:820px){.staffeln{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a4)}}
.staffel{background:var(--flaeche); border-radius:var(--r-karte); padding:var(--a5)}
.staffel h3{font-size:1.125rem; font-weight:700}
.staffel__zeit{font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em;
  color:var(--petrol); margin-top:var(--a1)}
.staffel dl{margin:var(--a4) 0 0; display:grid; gap:var(--a2); font-size:1rem}
.staffel dt{font-weight:500; color:var(--text)}
.staffel dd{margin:0; color:var(--text-leise)}

/* ============ Rechtstexte ============ */
.rechtstext{max-width:74ch}
.rechtstext h2{font-family:var(--display); font-size:clamp(1.4rem,2.2vw,1.85rem); font-weight:800;
  letter-spacing:-.018em; line-height:1.15; margin-top:var(--a6); margin-bottom:var(--a4)}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-family:var(--display); font-size:1.1875rem; font-weight:700;
  margin-top:var(--a6); margin-bottom:var(--a2)}
/* Nicht petrol und fett: so sehen auf dieser Seite die Links aus, und eine
   farbige fette Zeile, die nicht klickt, fuehrt in die Irre. Der Unterschied
   zu h3 kommt aus der Groesse, der zum Grundtext aus Schnitt und Familie. */
.rechtstext h4{font-family:var(--display); font-size:1.0625rem; font-weight:800;
  letter-spacing:-.01em; color:var(--text); margin:var(--a5) 0 var(--a2)}
.rechtstext p{margin-bottom:var(--a4); line-height:1.7}
.rechtstext ul,.rechtstext ol{margin:0 0 var(--a4); padding-left:var(--a5); line-height:1.7}
.rechtstext li{margin-bottom:var(--a2)}
.rechtstext strong{font-weight:500; color:var(--text)}
.rechtstext a{overflow-wrap:break-word}
/* Adressen stehen in Rechtstexten auch als blanker Text; eine davon war
   auf dem Telefon 800 px breit und liess die ganze Seite seitlich wandern. */
.rechtstext p,.rechtstext li{overflow-wrap:anywhere}
.rechtstext hr{border:0; border-top:1px solid var(--linie); margin-block:var(--a6)}

/* ============ Zulassungspruefer ============
   Der Master aus der App, hier als Frage-Mensch. Die Bewegungen sind aus
   `app/lib/core/widgets/master_robot.dart` uebernommen, damit App und
   Website dieselbe Figur mit denselben Stimmungen zeigen: `denkt` ist dort
   +/-0,03 rad ueber 1400 ms, `freut` ein Huepfer auf 1,12 mit easeOutBack,
   `jubelt` +/-0,04 rad mit 14 px Sprung. Ein Radiant sind 57,2958 Grad. */
.pruefer__karte{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a5);
  background:var(--papier); border:1px solid var(--linie);
  border-radius:var(--r-karte); padding:var(--a6)}
.pruefer__figur{position:relative; display:grid; place-items:center; justify-self:center}
.pruefer__master{width:140px; height:140px; display:block; position:relative}
/* Lime-Schein im Ruecken, nur beim Jubeln. In der App ein Kreis mit 20 %
   Deckkraft, der zwischen 0,9 und 1,08 atmet. */
/* Nicht dauerhaft mit opacity:0 herumstehen lassen: die Pruefung „nach dem
   Durchscrollen ist nichts mehr verborgen" filtert genau darauf und haette
   den Schein zu Recht als vergessenes Element gemeldet. Geschaltet wird er
   darum ueber `hidden`. */
.pruefer__schein{position:absolute; width:92%; aspect-ratio:1; border-radius:50%;
  background:rgba(221,242,138,.55); animation:schein 900ms var(--ease) infinite alternate}
.pruefer__schein[hidden]{display:none}
@keyframes schein{from{transform:scale(.9)} to{transform:scale(1.08)}}

.pruefer__blase{position:relative; background:var(--flaeche); border-radius:var(--r-karte);
  padding:var(--a4) var(--a5); font-size:var(--t-gross); line-height:1.45;
  color:var(--text); text-wrap:pretty; margin:0}
.pruefer__blase::after{content:""; position:absolute; left:var(--a6); top:-9px;
  border:10px solid transparent; border-top:0; border-bottom-color:var(--flaeche)}
.pruefer__wege{margin:var(--a4) 0 var(--a4); padding-left:var(--a5); line-height:1.6;
  display:grid; gap:var(--a2)}
.pruefer__antworten{display:grid; gap:var(--a2); margin-top:var(--a4)}
.antwort{display:flex; align-items:center; gap:var(--a3); width:100%; text-align:left;
  font:inherit; font-family:var(--display); font-weight:600; font-size:1.0625rem;
  color:var(--text); background:var(--papier); cursor:pointer;
  border:1px solid var(--linie); border-radius:var(--r-klein);
  padding:var(--a3) var(--a4); min-height:3.25rem;
  transition:border-color 180ms var(--ease), background-color 180ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .antwort:hover{border-color:rgba(4,86,100,.4); background:rgba(4,86,100,.04)}}
.antwort:focus-visible{outline:3px solid var(--petrol); outline-offset:3px}
.antwort__zeichen{flex:none; width:1.5rem; height:1.5rem; border-radius:50%;
  display:grid; place-items:center; font-size:.8125rem; font-weight:800;
  background:var(--flaeche); color:var(--text-leise)}
.pruefer__fuss{display:flex; align-items:center; gap:var(--a4); margin:var(--a4) 0 0;
  font-size:var(--t-klein); color:var(--text-leise); min-height:2.75rem}
.pruefer__zurueck{font:inherit; font-family:var(--display); font-weight:600;
  color:var(--petrol); background:none; border:0; cursor:pointer; padding:var(--a2) var(--a3);
  border-radius:var(--r-klein); min-height:2.75rem}
.pruefer__zurueck[hidden]{display:none}
@media (hover:hover){.pruefer__zurueck:hover{background:var(--flaeche)}}
.pruefer__zurueck:focus-visible{outline:3px solid var(--petrol); outline-offset:2px}
/* Ergebnis: der Weg, der zaehlt, plus der naechste Schritt. */
.pruefer__wegmarke{display:inline-flex; align-items:center; gap:var(--a2);
  background:var(--lime); color:var(--auf-lime); border-radius:var(--r-pille);
  padding:var(--a1) var(--a3); font-family:var(--display); font-weight:700;
  font-size:var(--t-klein); margin-bottom:var(--a3)}
.pruefer__weiter{display:flex; flex-wrap:wrap; gap:var(--a3); margin-top:var(--a5)}

/* Stimmungen. Ein Radiant = 57,2958 Grad. */
.pruefer__master{animation:schweben 2200ms var(--ease) infinite alternate}
@keyframes schweben{from{transform:translateY(0)} to{transform:translateY(-5px)}}
.pruefer__master[data-stimmung="denkt"]{animation:denken 1400ms var(--ease) infinite alternate}
@keyframes denken{from{transform:rotate(-1.72deg)} to{transform:rotate(1.72deg)}}
.pruefer__master[data-stimmung="freut"]{animation:freuen 480ms var(--ease-back) 1}
@keyframes freuen{
  0%{transform:translateY(0) scale(1)}
  46%{transform:translateY(-10px) scale(1.12)}
  100%{transform:translateY(0) scale(1)}}
.pruefer__master[data-stimmung="jubelt"]{animation:jubeln 800ms var(--ease) infinite}
@keyframes jubeln{
  0%{transform:translateY(0) rotate(-2.29deg)}
  47%{transform:translateY(-14px) rotate(0deg)}
  100%{transform:translateY(0) rotate(2.29deg)}}
.pruefer__master[data-stimmung="traurig"]{animation:betreten 820ms var(--ease) 1}
@keyframes betreten{
  0%{transform:translateY(0) scale(1)}
  39%{transform:translateY(6px) scale(.96)}
  55%{transform:translateY(6px) scale(.96) translateX(2px)}
  70%{transform:translateY(6px) scale(.96) translateX(-2px)}
  85%{transform:translateY(6px) scale(.96) translateX(2px)}
  100%{transform:translateY(0) scale(1)}}

@media (min-width:760px){
  .pruefer__karte{grid-template-columns:200px minmax(0,1fr); gap:var(--a6); align-items:start}
  .pruefer__figur{justify-self:start; position:sticky; top:var(--a8)}
  .pruefer__master{width:200px; height:200px}
  /* Auf einer Zeile zeigt die Blase nach links auf die Figur, nicht nach oben. */
  .pruefer__blase::after{left:-9px; top:var(--a5);
    border:10px solid transparent; border-left:0; border-right-color:var(--flaeche)}
}

@media (prefers-reduced-motion:reduce){
  .pruefer__master, .pruefer__karte[data-ergebnis="ja"] .pruefer__schein{animation:none}
}

/* ============ Formulare ============ */
.formular{display:grid; gap:var(--a5); max-width:38rem}
.feld{display:grid; gap:var(--a2); align-content:start}
.feld label,.feld legend{font-family:var(--display); font-weight:600; font-size:1rem; color:var(--text)}
.feld legend,.wahl legend{padding-inline:0}
.feld__optional{font-family:var(--lauf); font-weight:400; font-size:.9375rem; color:var(--text-leise)}
.feld input,.feld select,.feld textarea{
  font:inherit; font-size:1.0625rem; color:var(--text); background:#fff;
  border:1.5px solid var(--linie); border-radius:var(--r-symbol); padding:var(--a3) var(--a4); width:100%;
  transition:border-color 150ms var(--ease), box-shadow 150ms var(--ease)}
.feld input,.feld select{min-height:3.875rem}
/* Safari legt auf <select> eine eigene Box (-webkit-appearance:menulist),
   in der min-height nicht greift: die Auswahlfelder waren dort 32 statt
   62 px hoch. Mit appearance:none gilt unser Kasten, der Pfeil kommt als
   Hintergrundbild dazu. */
.feld select{
  appearance:none; -webkit-appearance:none;
  padding-right:calc(var(--a4) + 1.4rem);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5f65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--a4) center;
  background-size:1.15rem 1.15rem}
.feld textarea{min-height:8rem; resize:vertical}
.feld ::placeholder{color:var(--platzhalter); opacity:1}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--linie-stark)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none; border-color:var(--petrol);
  box-shadow:0 0 0 3px rgba(4,86,100,.18)}
.feld input:user-invalid,.feld select:user-invalid,.feld textarea:user-invalid{border-color:var(--fehler)}
.feld input:user-invalid ~ .feld__fehler,.feld textarea:user-invalid ~ .feld__fehler{display:block}
.feld__hinweis{font-size:.9375rem; color:var(--text-leise)}
.feld__fehler{display:none; font-size:.9375rem; color:var(--fehler-text); font-weight:500}
.wahl{display:grid; gap:var(--a3); border:0; padding:0; margin:0}
.wahl__zeile{display:flex; align-items:flex-start; gap:var(--a3); font-size:1.0625rem; line-height:1.5}
.wahl__zeile input{width:1.35rem; height:1.35rem; margin-top:var(--a1); accent-color:var(--petrol); flex:0 0 auto}
.wahl__zeile span{color:var(--text-leise)}
.wahl__zeile a{white-space:nowrap}
.formular__absenden{display:flex; flex-wrap:wrap; gap:var(--a4); align-items:center; margin-top:var(--a2)}
.formular__absenden .klein{max-width:34ch}

/* ============ BAföG-Rechner ============ */
.rechner{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a6); align-items:start}
@media (min-width:940px){.rechner{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}}
.rechner__eingabe{display:grid; gap:var(--a5)}
.rechner__ergebnis{background:var(--nacht); color:var(--auf-dunkel); border-radius:var(--r-flaeche);
  padding:var(--a6)}
.posten{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--a2) var(--a5); align-items:baseline;
  padding-block:var(--a3); border-bottom:1px solid rgba(255,255,255,.16); font-size:1.0625rem}
.posten span:last-child{font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.posten--abzug span:last-child{color:var(--lime)}
.posten--summe{border-bottom:0; border-top:2px solid var(--lime); margin-top:var(--a3); padding-top:var(--a5)}
.posten--summe span:first-child{font-family:var(--display); font-weight:700; font-size:1.1875rem}
.posten--summe span:last-child{font-size:clamp(1.75rem,3.2vw,2.4rem); letter-spacing:-.02em; font-weight:800; color:var(--lime)}
.posten__note{grid-column:1/-1; font-size:.9375rem; color:var(--auf-dunkel-leise); margin-top:-.35rem}

/* ============ Weiterbildungs-Finder ============ */
.finder{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a4)}
@media (min-width:760px){.finder{grid-template-columns:repeat(3,minmax(0,1fr))}}
.finder__wahl{position:relative}
.finder__wahl input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0}
.finder__wahl span{display:block; text-align:center; font-family:var(--display); font-weight:700;
  font-size:1.0625rem; padding:var(--a5) var(--a4); border:1.5px solid var(--linie); border-radius:var(--r-karte);
  background:#fff; transition:border-color 150ms var(--ease), background-color 150ms var(--ease)}
.finder__wahl input:checked + span{border-color:var(--petrol); background:rgba(4,86,100,.07); color:var(--petrol)}
.finder__wahl input:focus-visible + span{outline:3px solid var(--petrol); outline-offset:3px}
@media (hover:hover){.finder__wahl:hover span{border-color:var(--petrol)}}
.finder__ergebnis{background:var(--lime); color:var(--nacht); border-radius:var(--r-flaeche);
  padding:var(--a6); margin-top:var(--a6)}
.finder__ergebnis p{color:var(--auf-lime)}
.finder__marke{display:inline-block; font-family:var(--display); font-weight:700; font-size:.9375rem;
  letter-spacing:.03em; background:var(--nacht); color:var(--lime); padding:var(--a1) var(--a3); border-radius:var(--r-klein)}

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 2 — Zahlen führen, Köpfe variieren, ein Rhythmus
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Kopfvariante A: mit Bild (die Verkaufsseiten) ---- */
.seitenkopf--bild{position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(9rem,15vw,12rem) var(--a7)}
.seitenkopf--bild .kopfbild{position:absolute; inset:0; z-index:-2}
.seitenkopf--bild .kopfbild img{width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.seitenkopf--bild::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(14,30,35,.95) 0%, rgba(14,30,35,.86) 42%, rgba(14,30,35,.44) 78%, rgba(14,30,35,.22) 100%),
    linear-gradient(to top, rgba(14,30,35,.9) 0%, rgba(14,30,35,.72) 34%, rgba(14,30,35,0) 78%)}

/* ---- Kopfvariante B: mit Leitzahl (Werkzeugseiten) ---- */
.seitenkopf--zahl .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a7); align-items:end}
@media (min-width:900px){.seitenkopf--zahl .wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
.leitzahl{text-align:left}
@media (min-width:900px){.leitzahl{text-align:right}}
.leitzahl__wert{display:block; font-family:var(--display); font-weight:800; color:var(--lime);
  font-size:clamp(3.5rem,9vw,7rem); line-height:.9; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.leitzahl__text{display:block; font-size:1rem; color:var(--auf-dunkel-leise); margin-top:var(--a3); max-width:30ch}
@media (min-width:900px){.leitzahl__text{margin-left:auto}}

/* ---- Kopfvariante C: schlicht (Recht, Formulare) ---- */
.seitenkopf--schlicht{background:var(--flaeche); color:var(--text);
  border-bottom:1px solid var(--linie); padding-block:clamp(7rem,11vw,8.5rem) var(--a6)}
.seitenkopf--schlicht .d1{font-size:clamp(2rem,4vw,3.1rem); max-width:26ch}
.seitenkopf--schlicht .seitenkopf__lead{color:var(--text-leise); font-size:clamp(1.1rem,1.4vw,1.25rem)}

/* ---- Zahlenband: das Erkennungszeichen ---- */
.zahlenband{background:var(--nacht); color:var(--auf-dunkel); padding-block:var(--a7)}
.zahlenband--lime{background:var(--lime); color:var(--nacht)}
.zahlenband__gitter{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a6)}
@media (min-width:820px){.zahlenband__gitter{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zahl-posten{position:relative; padding-left:var(--a5)}
.zahl-posten:first-child{padding-left:0}
.zahl-posten::before{content:""; position:absolute; left:0; top:.35rem; bottom:.35rem; width:1px;
  background:rgba(221,242,138,.3)}
.zahl-posten:first-child::before{display:none}
.zahlenband--lime .zahl-posten::before{background:rgba(31,58,64,.28)}
@media (max-width:819px){
  .zahl-posten:nth-child(odd){padding-left:0}
  .zahl-posten:nth-child(odd)::before{display:none}
}
.zahl-posten__wert{display:block; font-family:var(--display); font-weight:800; color:var(--lime);
  font-size:var(--t-ziffer); line-height:.92; letter-spacing:-.038em;
  font-variant-numeric:tabular-nums}
.zahlenband--lime .zahl-posten__wert{color:var(--nacht)}
.zahl-posten__wert .einheit{font-size:.44em; letter-spacing:-.01em; margin-left:.12em; font-weight:700}
.zahl-posten__text{display:block; font-size:1rem; line-height:1.45; color:var(--auf-dunkel-leise); margin-top:var(--a3); max-width:22ch}
.zahlenband--lime .zahl-posten__text{color:var(--auf-lime)}
.zahl-posten__gegen{display:block; font-size:.9375rem; color:var(--lime); margin-top:var(--a2); font-weight:500}
.zahlenband--lime .zahl-posten__gegen{color:var(--petrol)}

/* ---- Eckdaten aufgewertet: Petrol-Haarlinien, Zahlen tragen ---- */
.eckdaten{border-top:2px solid var(--nacht)}
.eckdaten__titel{font-size:.9375rem; letter-spacing:.04em; text-transform:none;
  color:var(--petrol); font-weight:700}
.eckdaten > li{position:relative}
.eckdaten > li::after{content:""; position:absolute; left:0; bottom:-1px; width:2.5rem; height:2px;
  background:var(--lime); clip-path:inset(0 100% 0 0); transition:clip-path 320ms var(--ease)}
.eckdaten > li:hover::after{clip-path:inset(0 0 0 0)}

/* ---- Kursliste: Zeile reagiert ---- */
@media (hover:hover) and (pointer:fine){
  .kurs:hover > h3{transform:translateX(5px)}
  .kurs:hover > h3::after{clip-path:inset(0 0 0 0)}
}

/* ---- Abschnittsrhythmus: bewusst getönt, nicht zufällig ---- */
.hell{background:var(--papier)}
.getoent{background:var(--flaeche)}
.dunkel{background:var(--nacht); color:var(--auf-dunkel)}
.dunkel .d2,.dunkel .d3{color:#fff}
.dunkel .lead,.dunkel p{color:var(--auf-dunkel-leise)}
.dunkel .vorteil{border-bottom-color:rgba(255,255,255,.16)}
.dunkel .vorteile{border-top-color:rgba(255,255,255,.16)}

/* ---- FAQ: Sprungnavigation und Suche ---- */
.faq{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a7); align-items:start}
@media (min-width:1040px){.faq{grid-template-columns:minmax(0,.3fr) minmax(0,.7fr)}}
.faq__index{position:sticky; top:96px}
@media (max-width:1039px){.faq__index{position:static; top:auto}}
.faq__suche{margin-bottom:var(--a4)}
.faq__index ol{list-style:none; margin:0; padding:0; display:grid; gap:var(--a1);
  max-height:min(60vh,32rem); overflow-y:auto}
.faq__index a{display:flex; align-items:center; min-height:2.75rem;
  font-size:.9375rem; line-height:1.4; color:var(--text-leise);
  text-decoration:none; padding:var(--a2) var(--a3); border-radius:var(--r-symbol); border-left:2px solid transparent;
  transition:background-color 150ms var(--ease), color 150ms var(--ease)}
@media (hover:hover){.faq__index a:hover{background:var(--flaeche); color:var(--text)}}
.faq__index a.ist-aktiv{color:var(--petrol); background:rgba(4,86,100,.08); border-left-color:var(--petrol)}
.frage{scroll-margin-top:110px}
.frage[hidden]{display:none}
.faq__leer{padding:var(--a6) 0; color:var(--text-leise)}

/* ---- Termin: Kalendereintrag ---- */
.termin__ics{grid-column:2; margin-top:var(--a2); font-size:.9375rem; font-weight:500;
  color:var(--petrol); text-decoration:none; border-bottom:2px solid rgba(4,86,100,.28);
  justify-self:start; transition:border-color 150ms var(--ease)}
@media (hover:hover){.termin__ics:hover{border-color:var(--petrol)}}
@media (max-width:540px){.termin__ics{grid-column:1}}

/* ---- Bewegung zurücknehmen ---- */
@media (prefers-reduced-motion:reduce){
  .eckdaten > li::after,  .seitenkopf--bild .kopfbild img{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 3 — Zeitleiste, Vergleich, Aktionsleiste
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Kursphasen als Zeitleiste ---- */
.phasen{position:relative}
.phasen__spur{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:0}
@media (min-width:900px){
  .phasen__spur{grid-template-columns:repeat(var(--anzahl,4),minmax(0,1fr)); gap:var(--a5)}
  /* die durchgehende Linie, auf der die Phasen sitzen */
  .phasen__spur::before{content:""; position:absolute; left:0; right:0; top:11px; height:2px;
    background:rgba(4,86,100,.22)}
  .phasen__spur::after{content:""; position:absolute; left:0; right:0; top:11px; height:2px;
    background:var(--petrol); clip-path:inset(0 0 0 0)}
}
.phase{position:relative; padding-top:var(--a6); padding-bottom:var(--a5)}
@media (max-width:899px){
  .phase{padding-top:0; padding-left:var(--a6); padding-bottom:var(--a6)}
  .phase:not(:last-child)::before{content:""; position:absolute; left:10px; top:1.5rem; bottom:0;
    width:2px; background:rgba(4,86,100,.22)}
}
.phase__punkt{position:absolute; top:0; left:0; width:22px; height:22px; border-radius:50%;
  background:var(--papier); border:2px solid var(--petrol); display:grid; place-items:center}
@media (max-width:899px){.phase__punkt{top:.35rem}}
.phase__punkt::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--petrol);
  transform:scale(1); transition:transform 300ms var(--ease)}
.phase--ziel .phase__punkt{background:var(--petrol); border-color:var(--petrol)}
.phase--ziel .phase__punkt::after{background:var(--lime); width:10px; height:10px}
.phase__zeit{display:block; font-family:var(--display); font-weight:700; font-size:.9375rem;
  color:var(--petrol); letter-spacing:.02em; margin-bottom:var(--a2)}
.phase h3{font-size:1.125rem; font-weight:700; margin-bottom:var(--a2)}
.phase p{font-size:1rem; line-height:1.55; color:var(--text-leise); max-width:34ch}

/* Zeichnung: standardmaessig fertig. Erst wenn das Skript uebernimmt, wird
   sie zurueckgesetzt — und ein Zeitgeber zeichnet sie notfalls trotzdem. */
.phasen.animiert .phasen__spur::after{clip-path:inset(0 100% 0 0)}
.phasen.animiert .phase{opacity:0; transform:translateY(10px)}
.phasen.animiert .phase__punkt::after{transform:scale(0)}
.phasen.animiert.ist-gezeichnet .phasen__spur::after{clip-path:inset(0 0 0 0);
  transition:clip-path 1100ms var(--ease)}
.phasen.animiert.ist-gezeichnet .phase{opacity:1; transform:none;
  transition:opacity 420ms var(--ease), transform 420ms var(--ease)}
.phasen.animiert.ist-gezeichnet .phase__punkt::after{transform:scale(1); transition:transform 300ms var(--ease)}
.phasen.animiert.ist-gezeichnet .phase:nth-child(1){transition-delay:180ms}
.phasen.animiert.ist-gezeichnet .phase:nth-child(2){transition-delay:400ms}
.phasen.animiert.ist-gezeichnet .phase:nth-child(3){transition-delay:620ms}
.phasen.animiert.ist-gezeichnet .phase:nth-child(4){transition-delay:840ms}
.phasen.animiert.ist-gezeichnet .phase:nth-child(1) .phase__punkt::after{transition-delay:180ms}
.phasen.animiert.ist-gezeichnet .phase:nth-child(2) .phase__punkt::after{transition-delay:400ms}
.phasen.animiert.ist-gezeichnet .phase:nth-child(3) .phase__punkt::after{transition-delay:620ms}
.phasen.animiert.ist-gezeichnet .phase:nth-child(4) .phase__punkt::after{transition-delay:840ms}

/* ---- Vergleichstabelle ---- */
.vergleich{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%)}
@media (min-width:780px){
  /* Ab hier passt die Tabelle: keine Blende, keine Rastung. */
  .vergleich{mask-image:none; -webkit-mask-image:none; scroll-snap-type:none}
}
.vergleich thead th,.vergleich tbody td{scroll-snap-align:start}
/* Die Merkmalspalte bleibt stehen, damit die Zeile lesbar bleibt. */
.vergleich tbody th{position:sticky; left:0; z-index:1; background:var(--papier)}
.getoent .vergleich tbody th{background:var(--flaeche)}
.vergleich table{width:100%; min-width:44rem; border-collapse:collapse; font-size:1rem}
.vergleich caption{text-align:left; font-size:.9375rem; color:var(--text-leise);
  padding-bottom:var(--a4)}
.vergleich th,.vergleich td{text-align:left; vertical-align:top; padding:var(--a4) var(--a4);
  border-bottom:1px solid var(--linie); line-height:1.55}
.vergleich thead th{font-family:var(--display); font-weight:800; font-size:1.125rem;
  letter-spacing:-.012em; border-bottom:2px solid var(--nacht); padding-top:0}
.vergleich thead th:first-child{font-size:.9375rem; font-weight:600; color:var(--text-leise)}
.vergleich tbody th{font-family:var(--display); font-weight:700; font-size:.9375rem;
  color:var(--petrol); width:11rem; background:var(--flaeche)}
.vergleich td:first-of-type{background:rgba(221,242,138,.22)}
.vergleich .hervor{position:relative}
.vergleich thead .hervor::after{content:""; position:absolute; left:1.15rem; right:1.15rem;
  bottom:-2px; height:3px; background:var(--lime)}
.vergleich__hinweis{margin-top:var(--a4); font-size:.9375rem; color:var(--text-leise); max-width:70ch}
@media (max-width:700px){
  .vergleich{margin-inline:calc(var(--rand) * -1); padding-inline:var(--rand)}
  .vergleich table{min-width:40rem}
}

/* ---- Klebende Aktionsleiste (nur schmale Geräte) ---- */
.aktionsleiste{position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; gap:var(--a2); padding:var(--a3) calc(var(--rand) * .6) calc(var(--a3) + env(safe-area-inset-bottom));
  background:rgba(14,30,35,.96); backdrop-filter:blur(10px);
  border-top:1px solid rgba(221,242,138,.28)}
.aktionsleiste .knopf{flex:1 1 0; justify-content:center; padding:var(--a3) var(--a4); font-size:1rem}
.aktionsleiste .knopf--lime{--bg:var(--lime); --fg:var(--nacht)}
@media (max-width:860px){
  body:not(.ohne-leiste) .aktionsleiste{display:flex}
  body:not(.ohne-leiste){padding-bottom:var(--a8)}
  body:not(.ohne-leiste) .fuss{padding-bottom:var(--a4)}
}
.aktionsleiste[data-versteckt]{transform:translateY(105%); transition:transform 260ms var(--ease)}
.aktionsleiste{transition:transform 260ms var(--ease)}

@media (prefers-reduced-motion:reduce){
  .phasen.animiert .phase{opacity:1; transform:none}
  .phasen.animiert .phasen__spur::after{clip-path:inset(0 0 0 0)}
  .phasen.animiert .phase__punkt::after{transform:scale(1)}
  .aktionsleiste,.aktionsleiste[data-versteckt]{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 5 — bildschirmhoher Seitenkopf, Megamenü
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Seitenkopf mit Bild: bildschirmhoch wie im Original ---- */
.seitenkopf--bild{min-height:min(88svh,880px); display:grid; align-content:end;
  padding-block:clamp(9rem,15vw,12rem) var(--a7)}
.seitenkopf--bild .d1{font-size:clamp(2.6rem,6.2vw,5rem); line-height:1.02; max-width:20ch}
.seitenkopf--bild .seitenkopf__lead{font-size:var(--t-gross); color:var(--auf-dunkel-still);
  max-width:56ch; font-weight:400}
.kopf__aktionen{display:flex; flex-wrap:wrap; gap:var(--a3); margin-top:var(--a6)}
/* Fachrichtungen als echte Marken, nicht als Aufzählung mit Strichen */
.seitenkopf--bild .seitenkopf__fach{margin-top:var(--a6); gap:var(--a2)}
.seitenkopf--bild .seitenkopf__fach li{background:rgba(255,255,255,.14); backdrop-filter:blur(4px);
  border-color:rgba(255,255,255,.4); padding:var(--a2) var(--a4)}
@media (max-width:900px){
  .seitenkopf--bild{min-height:auto; display:block}
}

/* ---- Megamenü: über die ganze Bildschirmbreite ---- */
/* Kein position:relative auf der Gruppe — dadurch bezieht sich das Menü auf
   .kopf und spannt über den ganzen Bildschirm statt nur über den Auslöser. */
.megamenue{position:absolute; top:100%; left:0; right:0; width:100%;
  background:var(--papier); color:var(--text);
  border-top:1px solid var(--linie);
  box-shadow:var(--schatten-hoch);
  padding-block:var(--a6); z-index:70;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px);
  transition:opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
  /* Schliesst verzoegert, damit ein kurzes Verlassen es nicht zuklappt. */
  transition-delay:220ms}
/* Unsichtbare Bruecke ueber die Luecke zwischen Ausloeser und Panel — sonst
   verlaesst der Zeiger beide Flaechen und das Menue klappt sofort zu. */
.megamenue::before{content:""; position:absolute; left:0; right:0; top:-3.5rem; height:3.5rem}
.nav__gruppe:hover .megamenue,
.nav__gruppe:focus-within .megamenue{opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0); transition-delay:0ms}
.megamenue__innen{width:var(--spalte); margin-inline:auto; display:grid;
  gap:var(--a7)}
@media (min-width:1060px){
  .megamenue__innen{grid-template-columns:minmax(0,1fr) minmax(0,20rem); align-items:start}
}
.megamenue__gitter{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--a6)}
@media (max-width:1059px){.megamenue__gitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.megamenue__gruppe{font-family:var(--display); font-weight:700; font-size:.8125rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--petrol); padding-bottom:var(--a2); margin-bottom:var(--a3);
  border-bottom:1px solid var(--linie)}
.megamenue ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--a1)}
.megamenue a:not(.knopf){display:block; font-family:var(--display); font-weight:700; font-size:1.0625rem;
  color:var(--text); text-decoration:none; padding:var(--a2) var(--a3); margin-inline:-.8rem;
  border-radius:var(--r-symbol); line-height:1.35;
  transition:background-color 150ms var(--ease), color 150ms var(--ease)}
.megamenue a:not(.knopf) .zusatz{display:block; font-family:var(--lauf); font-weight:400; font-size:.875rem;
  color:var(--text-leise); margin-top:var(--a1)}
@media (hover:hover) and (pointer:fine){
  .megamenue a:not(.knopf):hover{background:var(--flaeche); color:var(--petrol)}
  .megamenue a:not(.knopf):hover .zusatz{color:var(--text-leise)}
}
.megamenue__fuss{grid-column:1 / -1; margin-top:var(--a1); padding-top:var(--a4);
  border-top:1px solid var(--linie); display:flex; flex-wrap:wrap; gap:var(--a3) var(--a5); align-items:center}
.megamenue__fuss .klein{margin-right:auto; max-width:44ch}

/* Die hervorgehobene Karte rechts */
.megamenue__karte{background:var(--nacht); color:var(--auf-dunkel); border-radius:var(--r-flaeche);
  overflow:hidden; display:flex; flex-direction:column}
.megamenue__karte img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.megamenue__karte-text{padding:var(--a4); display:flex; flex-direction:column; gap:var(--a3)}
.megamenue__titel{font-family:var(--display); font-weight:800; font-size:1.1875rem;
  letter-spacing:-.014em; line-height:1.2; color:#fff}
.megamenue__karte p{font-size:.9375rem; line-height:1.5; color:var(--auf-dunkel-leise)}
.megamenue__karte .knopf{margin-top:var(--a1); justify-content:center; font-size:1rem;
  --bg:var(--lime); --fg:var(--nacht); border-color:var(--lime)}
@media (hover:hover) and (pointer:fine){
  .megamenue__karte .knopf:hover{--bg:#fff; --fg:var(--nacht); background:#fff; border-color:#fff}
}

/* Der Auslöser bleibt ein Link auf die Übersicht — auf Touch führt er dorthin. */
.nav__gruppe{padding-block:var(--a2)}
.nav__gruppe > a::after{content:""; display:inline-block; width:.42em; height:.42em; margin-left:.45em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-.14em) rotate(45deg); opacity:.7;
  transition:transform 180ms var(--ease)}
.nav__gruppe:hover > a::after,
.nav__gruppe:focus-within > a::after{transform:translateY(.04em) rotate(225deg)}
@media (max-width:900px){
  /* Kein Megamenü auf schmalen Geräten — der Punkt führt auf die Übersicht,
     dort steht alles ohnehin untereinander. */
  .megamenue{display:none}
  .nav__gruppe > a::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .megamenue{transition:opacity 120ms linear, visibility 120ms; transform:translate(-50%,0)}
  .nav__gruppe > a::after{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 5b — Eckdaten mit Hierarchie, Vorteile als Zeilen
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Eckdaten: kleine Marke, grosser Wert ---- */
.daten{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--a6); border-top:2px solid var(--nacht); padding-top:var(--a6)}
@media (min-width:640px){.daten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.daten{grid-template-columns:repeat(4,minmax(0,1fr))}}
.datum{position:relative; padding-left:var(--a5)}
.datum:first-child{padding-left:0}
.datum::before{content:""; position:absolute; left:0; top:.2rem; bottom:.2rem; width:1px; background:var(--linie)}
.datum:first-child::before{display:none}
@media (max-width:999px){
  .datum:nth-child(odd){padding-left:0}
  .datum:nth-child(odd)::before{display:none}
}
@media (max-width:639px){.datum{padding-left:0} .datum::before{display:none}}
.datum__marke{display:block; font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--petrol); margin-bottom:var(--a3)}
.datum__wert{display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,1.7vw,1.5rem);
  line-height:1.25; letter-spacing:-.014em; color:var(--text)}
.datum__wert .leise{display:block; font-family:var(--lauf); font-weight:400; font-size:1rem;
  line-height:1.5; color:var(--text-leise); margin-top:var(--a2); letter-spacing:0}

/* Langer Block, der in einer Spalte nicht atmen kann */
.datenblock{margin-top:var(--a6); background:var(--flaeche);
  border-radius:var(--r-flaeche); padding:var(--a6);
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a6)}
@media (min-width:900px){.datenblock{grid-template-columns:minmax(0,.3fr) minmax(0,.7fr)}}
.datenblock h2{font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,1.6vw,1.45rem);
  letter-spacing:-.014em; line-height:1.2}
.datenblock__inhalt{font-size:1.0625rem; line-height:1.6}
.datenblock__inhalt p{color:var(--text-leise); max-width:62ch}
.datenblock__inhalt ul{list-style:none; margin:var(--a4) 0 0; padding:0; display:grid; gap:var(--a3)}
.datenblock__inhalt li{position:relative; padding-left:var(--a5); color:var(--text); max-width:62ch}
.datenblock__inhalt li::before{content:""; position:absolute; left:0; top:.58em; width:.62rem; height:.62rem;
  background:var(--lime); border:1px solid rgba(31,58,64,.35); border-radius:var(--r-mini)}
.datenblock__inhalt .oder{display:block; font-family:var(--display); font-weight:700; font-size:.8125rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--petrol); margin:var(--a4) 0 var(--a1)}

/* ---- Vorteile: volle Zeilen statt enger Spalten ---- */
.vorteile{grid-template-columns:minmax(0,1fr) !important; column-gap:0 !important}
.vorteil{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a2);
  padding-block:var(--a5)}
@media (min-width:820px){
  .vorteil{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); gap:var(--a7); align-items:start}
}
.vorteil h3{font-size:clamp(1.2rem,1.7vw,1.5rem); font-weight:800; letter-spacing:-.016em;
  line-height:1.22; position:relative; display:inline-block}
.vorteil h3::after{content:""; position:absolute; left:0; right:0; bottom:-.7rem; height:2px;
  background:var(--lime); clip-path:inset(0 100% 0 0); transition:clip-path 280ms var(--ease)}
@media (hover:hover) and (pointer:fine){.vorteil:hover h3::after{clip-path:inset(0 0 0 0)}}
.vorteil p{color:var(--text-leise); max-width:56ch; font-size:1.0625rem; line-height:1.6}

/* Eine Zeile hervorheben — dort, wo das Geld steht */
.vorteil--lime{background:var(--lime); border-radius:var(--r-flaeche); border-bottom-color:transparent;
  padding:var(--a5) var(--a5); margin-block:var(--a2)}
.vorteil--lime h3,.vorteil--lime p{color:var(--nacht)}
.vorteil--lime p{color:var(--auf-lime)}
.vorteil--lime h3::after{background:var(--nacht)}
.vorteil--lime .grosszahl{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,5vw,3.75rem); line-height:.95; letter-spacing:-.035em; color:var(--nacht);
  margin-bottom:var(--a4); font-variant-numeric:tabular-nums}
.vorteil--lime h3{margin-bottom:var(--a1)}
@media (prefers-reduced-motion:reduce){
  .vorteil h3::after{clip-path:inset(0 0 0 0); transition:none}
}
/* ---- Fachrichtungen als Sprungmarken ---- */
.seitenkopf__fach li a{color:inherit; text-decoration:none; margin:-.45rem -1rem;
  padding:var(--a2) var(--a4); border-radius:var(--r-pille); transition:background-color 150ms var(--ease); display:flex; align-items:center; min-height:44px}
@media (hover:hover) and (pointer:fine){
  .seitenkopf__fach li:hover{border-color:rgba(255,255,255,.75)}
  .seitenkopf__fach li a:hover{background:rgba(255,255,255,.12)}
}
.fachliste{list-style:none; margin:var(--a4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--a2)}
/* Marken sind Navigationsziele, keine Verweise im Fliesssatz. */
.fachliste li a{display:flex; align-items:center; min-height:44px}
.fachliste a{display:inline-block; font-family:var(--display); font-weight:600; font-size:.9375rem;
  color:var(--petrol); text-decoration:none; border:1.5px solid var(--linie); border-radius:var(--r-pille);
  padding:var(--a2) var(--a4); background:#fff;
  transition:border-color 150ms var(--ease), background-color 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .fachliste a:hover{border-color:var(--petrol); background:rgba(4,86,100,.06)}
}

/* ---- Fachrichtungs-Wechsler: zwischen den fünf springen, ohne zu scrollen ---- */
.wechsler{background:var(--flaeche); border-bottom:1px solid var(--linie); padding-block:var(--a4)}
.wechsler__innen{width:var(--spalte); margin-inline:auto; display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--a2) var(--a4)}
.wechsler__marke{font-family:var(--display); font-weight:700; font-size:.8125rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-leise); margin-right:var(--a1)}
.wechsler ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--a2)}
.wechsler a{display:inline-block; font-family:var(--display); font-weight:600; font-size:1rem;
  color:var(--text); text-decoration:none; padding:var(--a2) var(--a4); border-radius:var(--r-pille);
  border:1.5px solid var(--linie); background:#fff;
  transition:border-color 150ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .wechsler a:hover{border-color:var(--petrol); color:var(--petrol)}
}
.wechsler a[aria-current]{background:var(--petrol); border-color:var(--petrol); color:#fff}
@media (hover:hover) and (pointer:fine){
  .wechsler a[aria-current]:hover{background:var(--petrol-tief); border-color:var(--petrol-tief); color:#fff}
}

/* ---- Fachrichtungen als Karten auf der Übersichtsseite ---- */
.faecher{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--a5)}
@media (min-width:700px){.faecher{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.faecher{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fach{display:flex; flex-direction:column}
.fach a{text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%}
.fach__bild{border-radius:var(--r-karte); overflow:hidden; aspect-ratio:3/2; background:var(--flaeche)}
.fach__bild img{width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease)}
.fach h3{font-family:var(--display); font-weight:800; font-size:1.1875rem; letter-spacing:-.014em;
  margin-top:var(--a4); position:relative; display:inline-block; align-self:flex-start}
.fach h3::after{content:""; position:absolute; left:0; right:0; bottom:-.3rem; height:2px;
  background:var(--lime); clip-path:inset(0 100% 0 0); transition:clip-path 260ms var(--ease)}
.fach p{color:var(--text-leise); font-size:1rem; line-height:1.55; margin-top:var(--a3)}
.fach__ort{font-family:var(--display); font-weight:600; font-size:.875rem; color:var(--petrol);
  margin-top:var(--a3)}
@media (hover:hover) and (pointer:fine){
  .fach a:hover .fach__bild img{transform:scale(1.04)}
  .fach a:hover h3::after{clip-path:inset(0 0 0 0)}
}
@media (prefers-reduced-motion:reduce){
  .fach__bild img,.fach a:hover .fach__bild img{transform:none; transition:none}
  .fach h3::after{clip-path:inset(0 0 0 0); transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 7 — Lerninhalte: die Nummer trägt, Themen als Marken
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Der fachspezifische Block: das Unterscheidende, also groß ---- */
.lernblock{background:var(--papier); border-radius:var(--r-flaeche);
  padding:var(--a6); display:grid; gap:var(--a6);
  box-shadow:0 1px 0 rgba(14,30,35,.06)}
@media (min-width:1000px){
  .lernblock{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); align-items:stretch}
  .lernblock__bild{height:100%; min-height:24rem}
  .lernblock__bild img{height:100%; aspect-ratio:auto}
}
.lernblock__bild{border-radius:var(--r-karte); overflow:hidden}
.lernblock__bild img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.lernblock h3{font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,2.2vw,1.9rem);
  letter-spacing:-.02em; line-height:1.15}
.lernblock__lead{color:var(--text-leise); font-size:1.0625rem; line-height:1.6; margin-top:var(--a3);
  max-width:52ch}

/* ---- Handlungsbereich: die IHK-Nummer trägt die Gliederung ---- */
.bereiche{margin-top:var(--a5)}
.bereich{padding-block:var(--a4); border-top:1px solid var(--linie)}
.bereich:first-child{border-top:0; padding-top:0}
/* Ziffer und Ueberschrift sitzen in einer Zeile, mittig aufeinander — nicht
   uebereinander versetzt wie bei zwei Rasterzeilen. */
.bereich__kopf{display:flex; align-items:center; gap:var(--a3)}
.bereich h4{font-family:var(--display); font-weight:700; font-size:1.0625rem; line-height:1.3;
  letter-spacing:-.008em}
/* Alles unter der Ueberschrift fluchtet mit ihr, nicht mit der Ziffer. */
.bereich__unten{padding-left:calc(var(--a6) + var(--a3))}
.bereich__anzahl{font-size:.875rem; color:var(--text-leise); margin-top:var(--a2)}
.themen{list-style:none; margin:var(--a3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--a2)}
.themen li{font-size:.9375rem; line-height:1.35; color:var(--text); background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--r-pille); padding:var(--a1) var(--a3)}
@media (max-width:520px){
  .bereich__unten{padding-left:0; margin-top:var(--a2)}
}

/* ---- Die Basisqualifikation: zweiter Teil, nicht Randnotiz ---- */
.basis{margin-top:var(--a5); background:var(--papier);
  border-radius:var(--r-flaeche); padding:var(--a6);
  box-shadow:0 1px 0 rgba(14,30,35,.06);
  display:grid; gap:var(--a5)}
@media (min-width:900px){
  .basis{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr); align-items:start}
}
.basis__kopf h3{font-family:var(--display); font-weight:800; font-size:clamp(1.25rem,1.8vw,1.55rem);
  letter-spacing:-.016em; line-height:1.2}
.basis__kopf p{font-size:1rem; line-height:1.55; color:var(--text-leise); margin-top:var(--a2); max-width:38ch}
.basis .themen{margin-top:0}

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 9 — Formularseiten und Team
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Formularseiten: Formular links, Erwartung rechts ---- */
.formularlayout{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a7)}
@media (min-width:1000px){
  .formularlayout{grid-template-columns:minmax(0,1fr) minmax(0,21rem); align-items:start}
}
.formularhilfe{background:var(--flaeche); border-radius:var(--r-flaeche);
  padding:var(--a5); display:grid; gap:var(--a5)}
@media (min-width:1000px){.formularhilfe{position:sticky; top:2rem}}
.formularhilfe h2{font-family:var(--display); font-weight:800; font-size:1.25rem;
  letter-spacing:-.014em; line-height:1.2}
.schritte{list-style:none; margin:0; padding:0; display:grid; gap:var(--a4)}
.schritt{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--a4); align-items:start}
.schritt__nr{width:2rem; height:2rem; border-radius:var(--r-klein); background:var(--nacht); color:var(--lime);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:.9375rem;
  font-variant-numeric:tabular-nums}
.schritt h3{font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.3}
.schritt p{font-size:.9375rem; line-height:1.5; color:var(--text-leise); margin-top:var(--a1)}
.formularhilfe__zusatz{font-size:.9375rem; line-height:1.55; color:var(--text-leise);
  padding-top:var(--a4); border-top:1px solid var(--linie)}

/* ---- Team: Karten mit Rolle in Markenfarbe ---- */
.personen{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a5)}
@media (min-width:760px){.personen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person img{border-radius:var(--r-karte); width:100%; aspect-ratio:1; object-fit:cover;
  background:var(--flaeche); transition:transform 500ms var(--ease)}
.person{overflow:hidden}
.person h3{font-family:var(--display); font-weight:800; font-size:1.1875rem; letter-spacing:-.014em;
  margin-top:var(--a4)}
.person p{font-family:var(--display); font-weight:600; font-size:.9375rem; color:var(--petrol);
  margin-top:var(--a1)}
@media (prefers-reduced-motion:reduce){.person img{transition:none}}

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 8 — Abschluss, Stimmen, Kontakt
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Abschlussaufruf: heller Schlusspunkt statt grauer Fläche ---- */
.abschluss{background:var(--lime); color:var(--nacht)}
.abschluss__innen{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a6)}
@media (min-width:900px){
  .abschluss__innen{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center}
}
.abschluss .d2{color:var(--nacht); max-width:26ch}
.abschluss__text{color:var(--auf-lime); font-size:clamp(1.1rem,1.5vw,1.25rem); line-height:1.55;
  margin-top:var(--a5); max-width:46ch}
.abschluss__aktionen{display:flex; flex-wrap:wrap; gap:var(--a3); align-items:center}
@media (min-width:900px){.abschluss__aktionen{justify-content:flex-end}}
.abschluss .knopf{--bg:var(--nacht); --fg:#fff; border-color:var(--nacht)}
.abschluss .knopf--rand{--bg:transparent; --fg:var(--nacht); border-color:var(--nacht)}
@media (hover:hover) and (pointer:fine){
  .abschluss .knopf:hover{--bg:var(--petrol); background:var(--petrol); border-color:var(--petrol); color:#fff}
  .abschluss .knopf--rand:hover{background:var(--nacht); border-color:var(--nacht); color:#fff}
}
.azav--hell{background:#fff; border-color:transparent; color:var(--petrol); flex-basis:100%}
@media (min-width:520px){.azav--hell{flex-basis:auto}}

/* ---- Kontakt: die Standorte selbst sind der Inhalt ---- */
.kontaktwege{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a5);
  margin-top:var(--a6)}
@media (min-width:760px){.kontaktwege{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kontaktweg{background:var(--papier); border-radius:var(--r-karte);
  padding:var(--a4)}
.kontaktweg h3{font-family:var(--display); font-weight:800; font-size:1.125rem; letter-spacing:-.012em}
.kontaktweg address{font-style:normal; font-size:1rem; line-height:1.6; color:var(--text-leise);
  margin-top:var(--a2)}
.kontaktweg a{display:inline-block; min-height:44px; line-height:1.7; padding-block:var(--a2);
  font-weight:500}

/* ---- Symbolkacheln in den Lerninhalten ---- */
/* Gezeichnete Symbole, eine Strichstärke, keine Emoji und keine Fremdbibliothek. */
.bereich__symbol{flex:0 0 auto; width:2.75rem; height:2.75rem; border-radius:var(--r-symbol);
  background:rgba(4,86,100,.09); color:var(--petrol); display:grid; place-items:center}
.bereich__symbol svg{width:1.375rem; height:1.375rem; display:block}
.basis__kopf .bereich__symbol{margin-bottom:var(--a4)}

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 13 — Vorzugskarten, Stimmen-Karussell, Einblenden
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Warum MasterClass: Karten mit gezeichnetem Zeichen ---- */
/* Sechser-Raster als Grundlage: fünf Karten gehen sonst als 3 + 2 auf
   und lassen rechts ein leeres Feld stehen. So füllt die zweite Reihe
   ihre Breite aus — zwei breitere Karten für die zwei längeren Texte. */
.vorzuege{list-style:none; margin:0; padding:0; display:grid; gap:var(--a4);
  grid-template-columns:repeat(6,minmax(0,1fr))}
.vorzuege > li{grid-column:span 6}
@media (min-width:680px){
  .vorzuege > li{grid-column:span 3}
  .vorzuege > li:nth-child(5),
  .vorzuege > li.vorzug--lime{grid-column:span 6}
}
@media (min-width:1000px){
  .vorzuege > li:nth-child(-n+3){grid-column:span 2}
  .vorzuege > li:nth-child(4),
  .vorzuege > li:nth-child(5){grid-column:span 3}
}

.vorzug{background:var(--papier); border:1px solid var(--linie); border-radius:var(--r-karte);
  padding:var(--a5); display:flex; flex-direction:column; gap:var(--a3);
  transition:border-color 220ms var(--ease), box-shadow 260ms var(--ease),
             transform 260ms var(--ease)}
.getoent .vorzug{background:var(--papier)}
@media (hover:hover) and (pointer:fine){
  .vorzug:hover{border-color:rgba(4,86,100,.3); box-shadow:var(--schatten);
    transform:translate3d(0,-3px,0)}
  .vorzug:hover .vorzug__symbol{background:var(--petrol); color:#fff}
}
.vorzug__symbol{flex:0 0 auto; width:3rem; height:3rem; border-radius:var(--r-symbol);
  background:rgba(4,86,100,.09); color:var(--petrol); display:grid; place-items:center;
  margin-bottom:var(--a1); transition:background-color 220ms var(--ease), color 220ms var(--ease)}
.vorzug__symbol svg{width:1.5rem; height:1.5rem; display:block}
.vorzug h3{font-size:var(--t-gross); font-weight:800; letter-spacing:-.015em;
  line-height:1.24}
.vorzug p{color:var(--text-leise); font-size:1rem; line-height:1.6; max-width:38ch}

/* Auf schmalen Geraeten kostet die Kartenhuelle mehr als sie bringt: sechs
   Karten mit je 64 px Innenabstand und dem Zeichen ueber der Ueberschrift
   machten den Abschnitt 2.164 px hoch. Als Liste mit seitlichem Zeichen
   liest er sich in einer schmalen Spalte ohnehin besser. */
@media (max-width:679px){
  .vorzuege{gap:0}
  .vorzuege > li.vorzug:not(.vorzug--lime){background:none; border:0; border-radius:0;
    border-bottom:1px solid var(--linie); padding:var(--a5) 0;
    display:grid; grid-template-columns:auto minmax(0,1fr);
    column-gap:var(--a4); row-gap:var(--a1)}
  .vorzug:not(.vorzug--lime) .vorzug__symbol{grid-row:1 / span 2; align-self:start; margin:0}
  .vorzug:not(.vorzug--lime) h3{align-self:center; margin:0}
  .vorzug:not(.vorzug--lime) p{max-width:none}
  .vorzug--lime{margin-top:var(--a5)}
}

/* Eine Karte trägt das Geld — die bekommt die Fläche und die Farbe. */
.vorzug--lime{background:var(--lime); border-color:transparent}
.getoent .vorzug--lime{background:var(--lime)}

/* Über die ganze Zeile: Zahl, Text, Handlung. Ohne die dritte Spalte
   bliebe rechts ein leerer Streifen, weil der Absatz bei 62ch endet. */
@media (min-width:1000px){.vorzuege > li.vorzug--lime{grid-column:span 6}
  .vorzug--lime{display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:var(--a7); align-items:center}}
.vorzug--lime h3,.vorzug--lime p{color:var(--nacht)}
.vorzug--lime h3{font-size:var(--t-gross-titel); line-height:1.15}
.vorzug--lime p{color:var(--auf-lime); max-width:58ch}
.vorzug--lime .vorzug__symbol{background:rgba(14,30,35,.12); color:var(--nacht)}
@media (hover:hover) and (pointer:fine){
  .vorzug--lime:hover{border-color:transparent}
  .vorzug--lime:hover .vorzug__symbol{background:var(--nacht); color:var(--lime)}
}
.vorzug__zahl{display:block; font-family:var(--display); font-weight:800;
  font-size:var(--t-ziffer); line-height:.92; letter-spacing:-.04em; color:var(--nacht);
  font-variant-numeric:tabular-nums}
@media (min-width:1000px){.vorzug--lime .vorzug__symbol{display:none}}
.vorzug--lime > div{display:flex; flex-direction:column; gap:var(--a2)}

/* ---- Einblenden beim Erscheinen ---------------------------------------
   ACHTUNG: Alles zwischen den beiden AUTO-Marken erzeugt build.py aus
   EINBLEND_GRUPPEN. Von Hand geändert wird es beim nächsten Bauvorgang
   überschrieben — die Liste steht in build.py, und zwar nur dort.

   Warum erzeugt: die Liste stand vorher doppelt (hier und im Skript) und
   ist prompt auseinandergelaufen — die Angebotsbahn blieb unsichtbar.

   Verborgen wird ausschliesslich unter .js; diese Klasse setzt ein
   Einzeiler im <head>. Ohne JavaScript ist alles von Anfang an da.
   Die Auswahl steht in :where(), damit sie keine Spezifität beisteuert:
   sonst gewinnt „.js .vorzuege > li" (2 Klassen + 1 Element) gegen
   „.js [data-sichtbar]" (2 Klassen) und der Inhalt bleibt verborgen,
   obwohl das Skript ihn freigegeben hat. */
/* AUTO-EINBLENDEN-ANFANG */
.js :where(
  .hero__innen > *,
  .seitenkopf > .wrap > *,
  .seitenkopf--zahl > .wrap > div > *,
  .kopfzeile-block > *,
  .bandkopf > div:first-child > *
){
  opacity:0; transform:translate3d(0,15px,0);
  transition:opacity 560ms var(--ease), transform 620ms var(--ease), clip-path 760ms var(--ease);
}
/* Ueberschriften laufen von unten ins Bild: der Text spielt herein. */
.js :where(
  .hero__innen > h1,
  .hero__innen > h2,
  .seitenkopf > .wrap > h1,
  .seitenkopf > .wrap > h2,
  .seitenkopf--zahl > .wrap > div > h1,
  .seitenkopf--zahl > .wrap > div > h2,
  .kopfzeile-block > h1,
  .kopfzeile-block > h2,
  .bandkopf > div:first-child > h1,
  .bandkopf > div:first-child > h2
){
  clip-path:inset(0 -.14em 105% -.14em); transform:translate3d(0,.24em,0)
}
.js [data-sichtbar]{opacity:1; transform:none}
.js h1[data-sichtbar],
.js h2[data-sichtbar]{clip-path:inset(0 -.14em -.3em -.14em)}

@media (prefers-reduced-motion:reduce){
  /* Nichts wird verborgen, nichts bewegt sich — der Inhalt steht sofort. */
  .js :where(
  .hero__innen > *,
  .seitenkopf > .wrap > *,
  .seitenkopf--zahl > .wrap > div > *,
  .kopfzeile-block > *,
  .bandkopf > div:first-child > *
  ){
    opacity:1 !important; transform:none !important; clip-path:none !important;
    transition:none !important
  }
}
/* AUTO-EINBLENDEN-ENDE */

/* ══════════════════════════════════════════════════════════════════════
   Ausbaustufe 14 — Angebotsbahn, Mehrschritt-Formular, Stimmen als Band
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Bandkopf mit Steuerung (Angebot; allgemein verwendbar) ---- */
.bandkopf{display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--a6); margin-bottom:var(--a6); flex-wrap:wrap}
.bandkopf .lead{margin-top:var(--a4)}
.bandsteuerung{display:flex; gap:var(--a2); flex:0 0 auto}
.bandsteuerung[hidden]{display:none}
.bandknopf{width:3rem; height:3rem; border-radius:var(--r-pille); flex:0 0 auto;
  border:1px solid var(--linie); background:var(--papier); color:var(--petrol);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:background-color 180ms var(--ease), color 180ms var(--ease),
             border-color 180ms var(--ease), opacity 180ms var(--ease)}
.bandknopf svg{width:1.125rem; height:1.125rem; display:block}
@media (hover:hover) and (pointer:fine){
  .bandknopf:hover{background:var(--petrol); color:#fff; border-color:var(--petrol)}
}
.bandknopf:disabled{opacity:.4; cursor:default}

/* ---- Angebot: sieben Abschlüsse in einer Bahn statt untereinander ----
   Waagerecht statt senkrecht: sieben Karten kosten so rund 460 px Höhe
   statt gut 1.900 px in einem Raster. */
.angebot{overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--linie) transparent;
  padding-block:var(--a1); padding-inline:var(--rand); margin-inline:calc(var(--rand) * -1);
  /* Ohne scroll-padding rastet die erste Karte am Rand des Kastens ein und
     steht 40 px links neben der Überschrift. */
  scroll-padding-inline:var(--rand)}
.angebot__spur{list-style:none; margin:0; padding:0; display:grid;
  gap:var(--a4); grid-auto-flow:column;
  grid-auto-columns:min(18rem,74vw)}
.angebotkarte{scroll-snap-align:start; display:flex}
.angebotkarte > a{text-decoration:none; color:inherit; display:flex; flex-direction:column;
  width:100%; gap:var(--a4)}
.angebotkarte__bild{position:relative; border-radius:var(--r-karte); overflow:hidden;
  aspect-ratio:3/2; background:var(--flaeche)}
.angebotkarte__bild img{width:100%; height:100%; object-fit:cover;
  transition:transform 520ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .angebotkarte > a:hover .angebotkarte__bild img{transform:scale(1.045)}
  .angebotkarte > a:hover h3::after{clip-path:inset(0 0 0 0)}
}
.angebotkarte__marke{position:absolute; left:.75rem; top:.75rem; z-index:1;
  font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.04em;
  text-transform:uppercase; background:var(--papier); color:var(--nacht);
  padding:var(--a1) var(--a2); border-radius:var(--r-klein)}
.angebotkarte--weiter .angebotkarte__marke{background:var(--lime)}
.angebotkarte h3{font-family:var(--display); font-weight:800; font-size:var(--t-gross);
  letter-spacing:-.014em; line-height:1.22; position:relative; align-self:flex-start}
.angebotkarte h3::after{content:""; position:absolute; left:0; right:0; bottom:-.3rem;
  height:2px; background:var(--lime); clip-path:inset(0 100% 0 0);
  transition:clip-path 260ms var(--ease)}
.angebotkarte p{color:var(--text-leise); font-size:.9375rem; line-height:1.55;
  margin-top:-.3rem}
.angebotkarte__fuss{margin-top:auto; padding-top:var(--a1); font-family:var(--display);
  font-weight:600; font-size:.875rem; color:var(--petrol)}

/* ---- Stimmen: laufendes Band mit Sternen ---- */
/* Die Pfeile sind hier weg: das Band läuft von selbst. Wer lesen will,
   fährt darüber, dann steht es still. */
.stimmenband{position:relative; overflow:hidden; padding-block:var(--a2);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)}
.stimmenband__spur{list-style:none; margin:0; padding:0; display:flex; width:max-content;
  gap:var(--a4); animation:stimmenlauf 102s linear infinite}
@keyframes stimmenlauf{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
@media (hover:hover) and (pointer:fine){
  .stimmenband:hover .stimmenband__spur,
  .stimmenband:focus-within .stimmenband__spur{animation-play-state:paused}
}
.stimmenband__spur > li{display:flex; flex:0 0 auto}
.stimme{margin:0; width:min(32rem,84vw); background:var(--papier);
  border:1px solid var(--linie); border-radius:var(--r-karte);
  padding:var(--a5); display:flex; flex-direction:column; gap:var(--a4)}
.stimme__sterne{display:flex; gap:var(--a1); color:var(--stern)}
.stimme__sterne svg{width:1.0625rem; height:1.0625rem; display:block}
.stimme__zeichen{flex:0 0 auto; width:2.5rem; height:2.5rem; border-radius:var(--r-symbol);
  background:var(--lime); color:var(--nacht); display:grid; place-items:center}
.stimme__zeichen svg{width:1.25rem; height:1.25rem; display:block}
.stimme blockquote{margin:0; font-size:var(--t-text); line-height:1.6; color:var(--text)}
.stimme figcaption{margin:0; margin-top:auto; padding-top:var(--a2); display:flex;
  align-items:center; gap:var(--a3); border-top:1px solid var(--linie)}
.stimme__bild{flex:0 0 auto; width:2.75rem; height:2.75rem; border-radius:var(--r-pille);
  background:rgba(4,86,100,.09); color:var(--petrol); display:grid; place-items:center}
.stimme__bild svg{width:1.375rem; height:1.375rem; display:block}
.stimme__wer{display:flex; flex-direction:column; min-width:0}
.stimme__wer b{font-family:var(--display); font-weight:700; font-size:.9375rem; color:var(--text)}
.stimme__wer span{font-size:.9375rem; line-height:1.45; color:var(--text-leise)}
/* Gesamtwertung über dem Band — erscheint nur mit echter Angabe. */
.gesamtwertung{display:flex; align-items:center; gap:var(--a3); margin-top:var(--a4); flex-wrap:wrap}
.gesamtwertung .stimme__sterne svg{width:1.25rem; height:1.25rem}
.gesamtwertung b{font-family:var(--display); font-weight:800; font-size:1.125rem}
@media (prefers-reduced-motion:reduce){
  .stimmenband{mask-image:none; -webkit-mask-image:none}
  .stimmenband__spur{animation:none; flex-wrap:wrap; width:100%}
  li[data-doppel]{display:none}
}

/* ---- Mehrschritt-Formular ----
   Ohne JavaScript stehen alle Abschnitte untereinander und das Formular
   funktioniert als ganz normales Formular. Erst das Skript blendet aus. */
.mehrschritt{background:var(--papier); border:1px solid var(--linie);
  border-radius:var(--r-flaeche); padding:var(--a6);
  max-width:none; display:grid; gap:var(--a5)}
.mehrschritt__leiste,
.mehrschritt [data-schrittstand]{display:none}
.js .mehrschritt [data-schrittstand]{display:block}
.js .mehrschritt__leiste{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--a2); margin:0; padding:0; list-style:none}
/* Der Balken wächst, statt die Farbe umzuschalten: eine Bewegung,
   die zeigt, dass ein Schritt abgehakt ist. */
.mehrschritt__punkt{position:relative; display:flex; flex-direction:column; gap:var(--a2);
  font-family:var(--display); font-weight:600; font-size:.875rem; color:var(--text-leise);
  transition:color 260ms var(--ease)}
.mehrschritt__punkt::before{content:""; height:4px; border-radius:var(--r-mini);
  background-color:var(--linie);
  background-image:linear-gradient(var(--petrol), var(--petrol));
  background-repeat:no-repeat; background-size:0% 100%;
  transition:background-size 460ms var(--ease)}
.mehrschritt__punkt[data-stand]::before{background-size:100% 100%}
.mehrschritt__punkt[data-stand="aktiv"]{color:var(--petrol); font-weight:700}
.mehrschritt__punkt[data-stand="fertig"]{color:var(--text)}

/* Schrittwechsel: der alte Abschnitt geht zur Seite, der neue kommt von
   der Gegenseite herein, und die Höhe wandert mit — sonst springt die
   Karte bei unterschiedlich langen Schritten. */
/* Die Höhe wandert mit, damit die Karte beim Wechsel nicht springt.
   Der Detektor meldet das zu Recht als Layout-Animation — hier ist es
   bewusst: ein einzelnes Element, 340 ms, nur nach einem Klick. Die
   Alternative waere ein Sprung, und genau der sollte weg. */
.mehrschritt{transition:height 340ms var(--ease)}
.mehrschritt__schritt{border:0; margin:0; padding:0; display:grid; gap:var(--a4); min-width:0;
  transition:opacity 180ms var(--ease), transform 300ms var(--ease)}
.mehrschritt__schritt[hidden]{display:none}
.mehrschritt__schritt[data-weg]{opacity:0; transform:translate3d(-18px,0,0)}
.mehrschritt__schritt[data-weg="zurueck"]{transform:translate3d(18px,0,0)}
.mehrschritt__schritt[data-kommt]{opacity:0; transform:translate3d(18px,0,0)}
.mehrschritt__schritt[data-kommt="zurueck"]{transform:translate3d(-18px,0,0)}
@media (prefers-reduced-motion:reduce){
  .mehrschritt,
  .mehrschritt__schritt,
  .mehrschritt__punkt,
  .mehrschritt__punkt::before{transition:none}
  .mehrschritt__schritt[data-weg],
  .mehrschritt__schritt[data-kommt]{opacity:1; transform:none}
}
.mehrschritt__schritt > legend{font-family:var(--display); font-weight:800;
  font-size:var(--t-titel); letter-spacing:-.016em; padding:0; margin-bottom:var(--a1)}
.mehrschritt__schritt > .klein{margin-top:-.6rem}
.mehrschritt__navi{display:none}
.js .mehrschritt__navi{display:flex; flex-wrap:wrap; gap:var(--a3); align-items:center;
  padding-top:var(--a2); border-top:1px solid var(--linie)}
/* .knopf setzt display selbst — ohne diese Zeile bleibt „Zurück" auf
   Schritt 1 sichtbar, obwohl das Skript hidden gesetzt hat. */
.mehrschritt__navi .knopf[hidden]{display:none}
.mehrschritt__navi .klein{flex:1 1 14rem; margin:0}

/* Kacheln statt Auswahlliste: sichtbar, mit einer echten Trefferfläche */
.wahlkacheln{display:grid; gap:var(--a3); grid-template-columns:minmax(0,1fr); margin:0;
  padding:0; border:0}
@media (min-width:620px){.wahlkacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.wahlkacheln--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wahlkachel{display:flex; align-items:flex-start; gap:var(--a3); cursor:pointer;
  border:1px solid var(--linie); border-radius:var(--r-klein);
  padding:var(--a4) var(--a4); min-height:3.5rem; background:var(--papier);
  transition:border-color 180ms var(--ease), background-color 180ms var(--ease)}
@media (hover:hover) and (pointer:fine){.wahlkachel:hover{border-color:rgba(4,86,100,.4)}}
.wahlkachel:has(input:checked){border-color:var(--petrol); background:rgba(4,86,100,.05)}
.wahlkachel:has(input:focus-visible){outline:3px solid var(--petrol); outline-offset:3px}
.wahlkachel input{appearance:none; -webkit-appearance:none; flex:0 0 auto; margin:var(--a1) 0 0;
  width:1.25rem; height:1.25rem; border:2px solid #b6c3c2; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  transition:border-color 160ms var(--ease)}
.wahlkachel input::after{content:""; width:.625rem; height:.625rem; border-radius:50%;
  background:var(--petrol); transform:scale(0); transition:transform 160ms var(--ease)}
.wahlkachel input:checked{border-color:var(--petrol)}
.wahlkachel input:checked::after{transform:scale(1)}
.wahlkachel__text{display:flex; flex-direction:column; gap:var(--a1); min-width:0}
.wahlkachel__text b{font-family:var(--display); font-weight:700; font-size:1rem; color:var(--text)}
.wahlkachel__text span{font-size:.875rem; line-height:1.45; color:var(--text-leise)}

/* Der leise Nebenweg fuer Entschlossene. Bewusst ein Textlink und kein
   zweiter Knopf: zwei gleich starke Knoepfe geben die Entscheidung an den
   Besucher zurueck, und das kostet Abschluesse. */
.anfrage{display:grid; gap:var(--a4)}
.anfrage__nebenweg{margin:0}

/* Kontaktbereich: Formular links, Wege rechts */
.kontaktgitter{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--a7);
  align-items:start}
@media (min-width:1040px){.kontaktgitter{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
.kontaktspalte{display:grid; gap:var(--a4)}
.kontaktspalte .kontaktweg{background:var(--papier); border:1px solid var(--linie);
  border-radius:var(--r-karte); padding:var(--a4) var(--a5)}

/* Standortkarten im Kontaktblock: auf schmalen Geraeten ohne Kartenhuelle.
   Steht am Dateiende, weil die Kartenregel weiter oben sonst gewinnt. */
@media (max-width:679px){
  .kontaktspalte{gap:0}
  .kontaktspalte .kontaktweg{background:none; border:0; border-radius:0;
    border-bottom:1px solid var(--linie); padding:var(--a4) 0}
  .kontaktspalte .kontaktweg:last-child{border-bottom:0; padding-bottom:0}
}

/* Leerzustand der Terminliste. Die Infoabend-Seite ist von jeder Seite aus
   verlinkt; ohne Termine muss sie trotzdem einen Weg anbieten. */
.termine__leer{background:var(--flaeche); border-radius:var(--r-flaeche);
  padding:var(--a5); display:grid; gap:var(--a4); justify-items:start}
.termine__leer p{color:var(--text-leise); max-width:46ch}
.termine__leer .knopf{margin-top:var(--a1)}

/* Honigtopf: ein Feld, das kein Mensch sieht und kein Mensch fuellt. Ist es
   gefuellt, war es ein Automat. Nicht display:none, weil manche Automaten
   nur ausfuellen, was tatsaechlich gerendert wird. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ══════════════════════════════════════════════════════════════════════
   Telefon — was die Mobil-Pruefung (test/web/mobil-audit.mjs) fand
   ══════════════════════════════════════════════════════════════════════ */

/* Lange Woerter. „Ausbildereignungsschein." ist in der Hauptueberschrift
   511 px breit, auf einem 390er-Telefon stehen 350 zur Verfuegung; der
   Rest wurde abgeschnitten. In kurzen Bedienbeschriftungen trennt der
   Browser selbst — nachgemessen in Chromium und WebKit, nur wo ein Wort
   nicht passt. Im Fliesstext bewusst gar nicht, dort wuerde es Zeilen
   auffuellen und das Satzbild aendern. */
/* Kurze Bedienbeschriftungen trennt der Browser selbst. Nicht `label`:
   darauf gesetzt trennte er auch „Pro-zessleittechnik". Die Kacheltitel
   bekommen stattdessen die Wortfugen aus build.py (TRENNSTELLEN). */
.wahlkachel__text > b,.finder__wahl > span{-webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word}
.zahl-posten__text,.zahl-posten__gegen,.mehrschritt__punkt,.posten > span:first-child{
  -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word}
/* Ueberschriften trennen NICHT automatisch: Safari trennte
   „Ausbildereig-nungsschein". Stattdessen stehen in den langen Woertern
   weiche Trennstellen an den Wortfugen (&shy;, „Ausbilder-eignungs-
   schein"), die nur greifen, wenn das Wort nicht passt. Kommt eine neue
   lange Ueberschrift dazu, braucht sie dasselbe — `overflow-wrap` ist nur
   der Notanker gegen Abschneiden. */
h1,h2,h3,h4,h5,.d1,.d2,.d3{-webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word}

@media (max-width:860px){
  /* Fusszeilen-Links: 25 px hoch waren zu klein zum Antippen (Apple
     empfiehlt 44). Mit Polster statt groesserer Schrift — die Zeile soll
     nicht lauter werden, nur treffsicherer. */
  .fuss__unten nav{gap:0 var(--a4)}
  .fuss__unten nav a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px}

  /* Die Aktionsleiste unten ist 81 px hoch (auf dem iPhone plus
     Home-Balken), freigehalten waren 56 — am Seitenende lag sie auf den
     Rechtslinks. Und der Platz war Seitengrund: unter der dunklen
     Fusszeile stand ein weisser Streifen. Jetzt haelt die Fusszeile selbst
     den Platz frei, in ihrer eigenen Farbe. */
  body:not(.ohne-leiste){padding-bottom:0}
  body:not(.ohne-leiste) .fuss{padding-bottom:calc(var(--a6) + 5.25rem + env(safe-area-inset-bottom))}
}

/* Schrittanzeige im Anfrageformular: drei Spalten zu je rund 90 px, und
   „Weiterbildung" ragte in „Standort". Kleiner und trennbar. */
@media (max-width:420px){
  .js .mehrschritt__punkt{font-size:.8125rem}
}