/* ============================================================
   Der Karrierecoach · Klon Phase 1
   Alle Werte am Original nachgemessen, Quelle _quelle/stil/*.json
   ============================================================ */

@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(schrift/poppins-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:italic;font-weight:300;font-display:swap;src:url(schrift/poppins-300-italic.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(schrift/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(schrift/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(schrift/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(schrift/poppins-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(schrift/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(schrift/inter-600.woff2) format("woff2")}

:root{
  --orange:#ff9a1f;              /* Marke. Flaeche, Ring, Symbol UND Text. Ein Ton, ueberall. */
  --orange-tief:#ff652d;         /* zweiter Halt des Knopfverlaufs */
  --auf-orange:#fff;             /* Schrift auf Orange, wie im Original */
  --auf-cyan:#fff;               /* Schrift auf der Zahlenkarte, wie im Original */
  --orange-rand:#fde7d7;
  --plus:#eba03d;
  --blau:#265bd6;
  --cyan:#12dbe6;
  --cyan-blau:#0082fc;
  --schwarz:#000;
  --weiss:#fff;
  --tinte:#111827;
  --grau-lesbar:rgba(26,29,33,.68);   /* kleine Texte, 4,9:1 auf Weiss */
  --kopf-text:#25282b;
  --grau:#52575c;
  --schrift:Poppins,system-ui,sans-serif;
  --schrift-fuss:Inter,system-ui,sans-serif;

  --kopf-hoehe:80px;
  --held-radius:32px 32px 0 32px;
}

*,*::before,*::after{box-sizing:border-box}

/* Jede Klassenregel mit eigenem display schlaegt sonst das hidden-Attribut:
   das Element bleibt sichtbar, obwohl das Markup es versteckt. Erst beim
   Aufklappmenue passiert, dann beim Auswerten-Knopf. Einmal fuer alle. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--weiss);
  color:var(--tinte);
  font-family:var(--schrift);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:inherit}

.sprung{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--tinte);color:var(--weiss);
  padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none;
}
.sprung:focus{left:0}

/* ============================= Kopf ========================= */

.kopf{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--kopf-hoehe);
  background:var(--weiss);
  transition:box-shadow .25s var(--bogen);
}
/* Am obersten Rand liegt die Leiste auf weissem Grund und faellt nicht auf.
   Sobald gescrollt wird, trennt eine Haarlinie sie vom Inhalt darunter. */
.kopf.ist-gescrollt{
  box-shadow:rgba(20,23,28,.08) 0 1px 0 0, rgba(20,23,28,.06) 0 6px 20px 0;
}

/* Sprungziele duerfen nicht unter der Leiste landen.
   Gilt fuer alles mit einer ID und fuer Ueberschriften, damit auch
   die Seitensuche des Browsers nicht hinter der Leiste landet. */
[id],h1,h2,h3{scroll-margin-top:calc(var(--kopf-hoehe) + 20px)}

.kopf-innen{
  max-width:1280px;margin:0 auto;height:100%;
  padding:0 64px;
  display:flex;align-items:center;justify-content:center;gap:50px;
}

.kopf-marke{display:flex;align-items:center;flex-shrink:0;min-height:44px}
.kopf-marke img{width:240px;height:auto}

.kopf-pille{
  display:flex;align-items:center;gap:32px;
  height:40px;padding:8px 24px;
  background:var(--weiss);
  border:1px solid var(--orange-rand);
  border-radius:25px;
}

.kopf-gruppe{position:relative}

.kopf-link{
  display:flex;align-items:center;gap:0;
  min-height:44px;padding:0 0 2px;
  background:none;border:0;cursor:pointer;
  font-family:var(--schrift);font-size:16px;font-weight:400;
  letter-spacing:.16px;line-height:24px;color:var(--kopf-text);
}

.kopf-pfeil{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:80px;color:var(--grau);
}
.kopf-pfeil svg{width:14px;height:14px}
.kopf-link[aria-expanded=true] .kopf-pfeil{transform:rotate(180deg)}

.kopf-klappe{
  /* Linksbuendig am Knopf, NICHT ueber transform zentriert: die
     Auftritts-Animation setzt transform neu und loeschte das
     translateX(-50%) still mit -- die Klappe stand danach um die halbe
     Knopfbreite nach rechts versetzt. */
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:260px;padding:8px;
  background:var(--weiss);
  border:1px solid var(--orange-rand);
  border-radius:18px;
  box-shadow:rgba(20,23,28,.12) 0 10px 30px;
  display:flex;flex-direction:column;
}
/* Klassenregel schlaegt sonst das hidden-Attribut */
.kopf-klappe[hidden]{display:none}
.kopf-klappe a{
  padding:11px 14px;border-radius:12px;
  font-size:15px;line-height:22px;color:var(--kopf-text);text-decoration:none;min-height:44px;display:flex;align-items:center}
@media (hover:hover){
  .kopf-klappe a:hover{background:#faf6f1;color:var(--blau)}
}

.kopf-kontakt{
  position:relative;
  display:inline-flex;align-items:center;
  height:40px;padding:10px 20px;border-radius:1000px;
  font-size:16px;font-weight:400;letter-spacing:-.48px;line-height:24px;
  color:var(--orange);text-decoration:none;white-space:nowrap;
  /* Ring als Innenschatten, damit der Kasten exakt 190,3 x 40 bleibt */
  box-shadow:inset 0 0 0 1px var(--orange);
}
/* Sichtbarer Knopf bleibt 40 px hoch wie im Original,
   die Tipp-Flaeche wird unsichtbar auf 44 px gezogen. */
.kopf-kontakt::after{content:"";position:absolute;inset:-2px;border-radius:inherit}

@media (hover:hover){
  .kopf-kontakt:hover{color:var(--orange);box-shadow:inset 0 0 0 2px var(--orange)}
}

.kopf-brenner{display:none}
.kopf-mobil{display:none}

/* ============================= Held ========================= */

.held{
  position:relative;
  /* Breiter als die Baender darunter, damit der Auftakt traegt. */
  max-width:1600px;margin:0 auto;
  /* Er fuellt den Bildschirm. svh statt vh, sonst rutscht auf dem
     Handy die Leiste des Browsers in die Rechnung. */
  min-height:100vh;
  min-height:100svh;
  padding:96px 56px 40px;
  background:var(--weiss);
  display:flex;
}

.held-flaeche{
  position:relative;flex:1;
  display:flex;flex-direction:column;
  padding:80px 80px 0;
  background:var(--schwarz);
  border-radius:var(--held-radius);
  overflow:hidden;
}

.held-bild{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}

.held-schleier{
  position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.8) 0%,rgba(0,0,0,.25) 75%);
}

.held-inhalt{
  position:relative;z-index:2;
  width:100%;max-width:1000px;
  display:flex;flex-direction:column;gap:15px;
}

/* 70px ab 1208px Breite, darunter fliessend.
   lh 1.1 und ls -0.03em ergeben bei 70px exakt die gemessenen 77px / -2.1px. */
.held-titel{
  margin:0;
  font-size:clamp(44px,5.8vw,70px);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;
  color:var(--weiss);
}
.ton{color:var(--orange)}
.held-titel .ton,.abschluss-titel .ton{color:var(--orange)}

.held-text{display:flex;flex-direction:column;gap:10px}

.held-zeile{
  margin:0;max-width:85%;
  font-size:20px;font-weight:400;line-height:30px;color:var(--weiss);
}

.held-punkte{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:15px;
}
.held-punkte li{display:flex;align-items:center;gap:5px}
.haken{width:24px;height:24px;flex-shrink:0;color:var(--orange)}
.held-punkte span{
  font-size:16px;font-weight:300;font-style:italic;
  line-height:19.2px;color:var(--weiss);
}

/* Zahlenkarten im Hero. Eigener Name, weil .zahlen auf der Schulen-Seite
   ein Raster ist und seine Regeln sonst stumm hier landen. */
.held-zahlen{display:contents}

.zahl{
  position:absolute;z-index:3;
  display:flex;flex-direction:column;gap:5px;
  padding:15px;border-radius:24px;
  background:linear-gradient(var(--cyan) 0%,var(--cyan-blau) 100%);
}
.zahl-rechts{right:46px;top:48%;transform:translateY(-50%)}
.zahl-links{left:27px;top:71%;transform:translateY(-50%)}

.zahl-wert{
  margin:0;font-size:22px;font-weight:700;line-height:26.4px;color:var(--auf-cyan);
}
.zahl-plus{color:var(--plus)}
.zahl-wort{
  margin:0;font-size:14px;font-weight:500;
  letter-spacing:.14px;line-height:21px;color:var(--auf-cyan);white-space:nowrap;
}

/* Kerbe unten rechts */
.held-ecke{
  position:absolute;right:0;bottom:0;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;
}
.held-kerbe{width:40px;height:40px;transform:rotate(180deg);display:block}
.held-ecke-reihe{display:flex;align-items:flex-end}

.held-knopf-feld{
  display:flex;gap:8px;
  padding:12px 0 0 16px;
  background:var(--weiss);
  border-radius:32px 0 0 0;
}

.knopf{
  /* <button> bringt eine graue Standardkante mit. Ohne diese Zeile sitzt sie
     um jeden Knopf, der kein <a> ist. */
  border:0;appearance:none;-webkit-appearance:none;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-width:264px;min-height:55px;padding:10px 20px;border-radius:1000px;
  background:linear-gradient(var(--orange) 0%,var(--orange-tief) 100%);
  color:var(--auf-orange);text-decoration:none;
  font-size:16px;font-weight:600;letter-spacing:-.48px;line-height:24px;
  white-space:nowrap;
  box-shadow:rgba(0,0,0,.15) 0 2px 5px 0,
             rgba(255,255,255,.04) 0 .241451px .531191px 0 inset,
             rgba(255,255,255,.3) 0 2px 4.4px 0 inset;
}
@media (hover:hover){
  .knopf:hover{filter:brightness(1.06)}
}

/* Flussknopf: der Verlauf dreht sich langsam. Rechts hell, dann oben hell,
   dann links hell, und wieder zurueck. Nur dieser eine Knopf. */
@property --fluss-winkel{syntax:"<angle>";inherits:false;initial-value:90deg}

.knopf--fluss{position:relative;overflow:hidden;isolation:isolate}
.knopf--fluss>span{position:relative;z-index:1}
.knopf--fluss::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  opacity:0;transition:opacity .5s var(--weich);
  background:linear-gradient(var(--fluss-winkel),
    #1f4fd2 0%, #2f8cf0 52%, var(--cyan) 100%);
  animation:knopf-fluss 12s ease-in-out infinite alternate;
  animation-play-state:paused;
}
@keyframes knopf-fluss{
  0%  {--fluss-winkel:90deg}
  100%{--fluss-winkel:-90deg}
}
@media (hover:hover){
  .knopf--fluss:hover{filter:none}
  .knopf--fluss:hover::before,.knopf--fluss:focus-visible::before{
    opacity:1;animation-play-state:running;
  }
}
@media (prefers-reduced-motion:reduce){
  .knopf--fluss::before{animation:none}
}

/* ============================= Fuß ========================= */

.fuss{background:var(--weiss)}

.fuss-innen{
  max-width:1330px;margin:0 auto;
  padding:64px 32px 24px;
  display:flex;flex-direction:column;gap:48px;
}

/* Vorher: eine Spalte mit acht Eintraegen gegen eine mit einem, dazu
   96 px Luft und ein 500-px-Loch in der Mitte. Jetzt ein Raster, in dem
   die Markenspalte nur so breit ist, wie ihr Text braucht. */
.fuss-oben{
  display:grid;
  grid-template-columns:minmax(260px,330px) repeat(4,1fr);
  gap:48px;align-items:start;
}

.fuss-marke{
  display:flex;flex-direction:column;gap:24px;
}
.fuss-logo{display:flex;align-items:center;min-height:44px}
.fuss-logo img{width:240px;height:auto}

.fuss-satz{
  margin:0;max-width:40ch;
  font-size:16px;font-weight:300;line-height:1.55;
  color:rgba(17,24,39,.75);
}

.fuss-sozial{display:flex;gap:32px}
.fuss-sozial a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-10px;color:var(--tinte);
}
.fuss-sozial svg{width:24px;height:24px}
@media (hover:hover){
  .fuss-sozial a:hover{color:var(--blau)}
}

.fuss-spalten{display:contents}
.fuss-spalte{display:flex;flex-direction:column;font-family:var(--schrift-fuss)}

/* Kleiner und ruhiger als vorher: eine Spaltenueberschrift, keine Schlagzeile. */
.fuss-kopf{
  margin:0 0 10px;
  font-size:15px;font-weight:600;line-height:22px;
  letter-spacing:.01em;color:var(--tinte);
}
.fuss-unterkopf{
  margin:16px 0 4px;
  font-size:16px;font-weight:600;line-height:20.8px;color:var(--tinte);
}
/* 12 px oben und unten ergaben 45 px Abstand pro Zeile. Das las sich wie
   eine Liste mit Luft statt wie eine Fusszeile. Jetzt 11 px Polster fuer
   eine Tippflaeche von 44 px, und -5 px Rand zieht den sichtbaren
   Rhythmus wieder auf 34 px zusammen. */
.fuss-spalte a{
  padding:11px 0;margin:-5px 0;
  font-size:15px;font-weight:400;line-height:22px;
  color:var(--tinte);text-decoration:none;
}
@media (hover:hover){
  .fuss-spalte a:hover{color:var(--blau)}
}


/* Schmal: Marke ueber zwei Spalten, darunter zwei Linkspalten nebeneinander. */
@media screen and (max-width:1024px){
  .fuss-oben{grid-template-columns:repeat(2,1fr);gap:36px}
  .fuss-marke{grid-column:1 / -1}
}
@media screen and (max-width:480px){
  .fuss-oben{grid-template-columns:1fr;gap:28px}
}

.fuss-unten{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:16px;line-height:22.4px;color:var(--tinte);
}
.fuss-unten p{margin:0}
.fuss-unten a{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;color:var(--tinte);
}
@media (hover:hover){
  .fuss-unten a:hover{color:var(--blau)}
}

/* ======================= Sektionsrahmen ===================== */

.band{max-width:1330px;margin:0 auto;padding:100px 32px 60px;background:var(--weiss)}
.band--schmal{padding:60px 32px}
.band-innen{max-width:1266px;margin:0 auto}
#quiz{padding:120px 32px 60px}
#generator{padding:75px 0}

.kopfzeile{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  text-align:center;
}

.marke{
  margin:0;padding:5px 12px;border-radius:100px;
  background:rgba(39,98,234,.15);
  font-size:14px;font-weight:500;letter-spacing:-.56px;line-height:21px;
  color:#1e4fba;
}

.titel{
  margin:0;max-width:750px;
  font-size:clamp(32px,3.62vw,52px);font-weight:600;
  letter-spacing:-.03em;line-height:1.4;
  color:var(--dunkel);
}

/* ========================= 1 · Wege ========================= */

.wege{
  display:flex;align-items:flex-start;justify-content:center;gap:32px;
  margin-top:25px;
}

.weg{
  position:relative;display:block;flex:1 1 0;max-width:345px;
  aspect-ratio:.8;border-radius:24px;overflow:hidden;text-decoration:none;
}
.weg img{width:100%;height:100%;object-fit:cover}
.weg--kippe-links{transform:rotate(-3deg)}
.weg--kippe-rechts{transform:rotate(3deg)}

.weg-fuss{
  position:absolute;inset:auto 0 0 0;min-height:240px;
  display:flex;align-items:flex-end;justify-content:center;
  padding:24px 24px 35px;
  background:linear-gradient(rgba(39,91,214,0) 0%,rgb(38,91,214) 100%);
}
.weg-titel{
  font-size:24px;font-weight:700;line-height:31.2px;
  color:var(--weiss);text-align:center;
}
@media (hover:hover){
  .weg{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
  .weg--kippe-links:hover{transform:rotate(-3deg) translateY(-6px)}
  .weg--kippe-rechts:hover{transform:rotate(3deg) translateY(-6px)}
  .weg:hover{transform:translateY(-6px)}
}

/* ========================= 2 · Gabel ======================== */

.gabel-liste{max-width:620px;margin:0 auto}
.gabel-liste[hidden]{display:none}

.gabel-zurueck{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:10px 0;margin:0 0 8px;
  background:none;border:0;cursor:pointer;
  font-family:var(--schrift);font-size:14px;font-weight:500;
  color:rgba(26,29,33,.62);
}
.gabel-zurueck svg{width:16px;height:16px}

.gabel-frage{
  margin:0 0 20px;
  font-size:24px;font-weight:600;color:var(--text);
}

.gabel-option{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 20px;margin-bottom:12px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.14);border-radius:12px;
  box-shadow:rgba(20,23,28,.08) 0 6px 24px;
  text-decoration:none;
}
.gabel-option-titel{display:block;font-size:17px;font-weight:600;color:var(--text)}
.gabel-option-text{display:block;font-size:14px;font-weight:500;color:rgba(26,29,33,.62)}
.gabel-chevron{width:18px;height:18px;flex-shrink:0;color:rgba(26,29,33,.4)}
@media (hover:hover){
  .gabel-option{transition:transform .25s,box-shadow .25s,border-color .25s}
  .gabel-option:hover{
    transform:translateY(-2px);
    box-shadow:rgba(20,23,28,.14) 0 14px 34px;
    border-color:rgba(38,91,214,.45);
  }
}

/* ========================= 3 · Coach ======================== */

.coach{display:flex;align-items:stretch;gap:24px;margin-top:50px}

.coach-bild{
  width:519px;height:541px;flex-shrink:0;
  object-fit:cover;border-radius:50px;
}

.coach-karte{
  flex:1;display:flex;flex-direction:column;
  padding:24px;background:var(--weiss);border-radius:9px;
}

.coach-zitat{
  margin:0;
  font-size:28px;font-weight:300;line-height:33.6px;
  color:rgba(17,24,39,.75);
}

.coach-abzeichen{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  margin:auto 0 0;padding:10px 15px;border-radius:15px;
  background:linear-gradient(270deg,rgb(22,217,231) 0%,rgb(2,131,251) 100%);
}
.coach-zahl,.coach-plus{font-size:35px;font-weight:500;line-height:42px}
.coach-zahl{color:var(--auf-cyan)}
.coach-plus{color:var(--plus)}
.coach-wort{margin-left:5px;font-size:20px;font-weight:500;line-height:24px;color:var(--auf-cyan)}

.coach-name{
  margin:25px 0 0;font-family:var(--schrift-fuss);
  font-size:24px;font-weight:500;letter-spacing:-.48px;line-height:28.8px;
  color:var(--tinte);
}
.coach-rolle{
  margin:4px 0 0;font-family:var(--schrift-fuss);
  font-size:16px;font-weight:400;line-height:20.8px;
  color:rgb(70,74,82);
}

/* ======================== 4 · Stimmen ======================= */

.stimmen{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:50px;
}

.stimmen-bahn{
  display:flex;gap:40px;
  width:100%;
  /* 30 waren zu wenig: overflow-x macht auch senkrecht einen Beschnitt,
     dadurch wurde der Schatten gerade abgeschnitten. */
  padding:46px calc(50% - 290px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.stimmen-bahn::-webkit-scrollbar{display:none}

.stimme{
  flex:0 0 580px;max-width:100%;scroll-snap-align:center;
  margin:0;padding:50px;
  background:var(--weiss);border-radius:50px;
  box-shadow:0 16px 36px -20px rgba(26,29,33,.34);
  transform:scale(.78);opacity:.35;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s;
}
.stimme.ist-mitte{transform:scale(1);opacity:1}
.stimme blockquote{
  margin:0;
  font-size:18px;font-weight:300;font-style:italic;
  letter-spacing:-.36px;line-height:27px;
  color:rgb(115,115,115);
}
.stimme-sterne{display:flex;gap:6px;margin-bottom:18px;color:var(--orange)}
.stimme-sterne svg{width:18px;height:18px}
.stimme figcaption{display:block;margin-top:24px}
.stimme-name{
  display:block;
  font-size:20px;font-weight:500;letter-spacing:-.8px;line-height:22px;
  color:var(--blau);
}
.stimme-weg{
  display:block;font-family:var(--schrift-fuss);
  font-size:16px;font-weight:400;line-height:19.2px;
  color:var(--blau);
}

.stimmen-pfeil{
  position:relative;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:40px;cursor:pointer;
  background:var(--orange);color:var(--weiss);
}
.stimmen-pfeil::after{content:"";position:absolute;inset:-2px;border-radius:inherit}
.stimmen-pfeil svg{width:20px;height:20px}
.stimmen-pfeil[disabled]{opacity:.35;cursor:default}

/* ======================== 5 · Bahn ========================== */

.bahn{margin-top:54px}
.bahn-texte{margin:0;padding:0;list-style:none}

/* Jedes Bild steht bei seinem Text. Nichts klebt, nichts schiebt sich
   uebereinander, und auf dem Handy liegt das Bild einfach darueber. */
.bahn-text{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center;
  padding:40px 0;
}
.bahn-text + .bahn-text{border-top:1px solid rgba(26,29,33,.07)}
/* Jede zweite Zeile dreht sich, sonst sind es fuenf gleiche Reihen. */
.bahn-text:nth-child(even) .bahn-bild{order:2}

.bahn-bild{
  border-radius:26px;overflow:hidden;aspect-ratio:4 / 3;
  background:#EDF2FD;
}
.szene-bild{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 1.6s var(--weich);
}
.bahn-text.ist-da .szene-bild{transform:scale(1)}

.bahn-wort-feld{display:flex;flex-direction:column}
.bahn-text .bahn-zahl{
  margin:0 0 10px;font-size:14px;font-weight:600;color:var(--blau);
}
.bahn-text .bahn-wort{
  margin:0 0 14px;font-size:clamp(26px,2.8vw,34px);font-weight:700;
  letter-spacing:-.02em;line-height:1.15;color:var(--text);
}
.bahn-satz{margin:0;font-size:18px;line-height:29px;color:var(--text)}
.bahn-satz--klein{
  margin-top:12px;font-size:16px;line-height:26px;color:var(--grau-lesbar);
}

@media screen and (max-width:860px){
  .bahn-text{grid-template-columns:1fr;gap:22px;padding:30px 0}
  .bahn-text:nth-child(even) .bahn-bild{order:0}
  .bahn-bild{aspect-ratio:16 / 10}
  .bahn-text .bahn-wort{font-size:24px}
  .bahn-satz{font-size:17px;line-height:27px}
  .bahn-satz--klein{font-size:15px;line-height:24px}
}

.bahn-aktion{margin:56px 0 0;text-align:center}
.knopf--schmal{min-width:0;min-height:44px}

/* Zweitknopf: gleiche Form, ohne Flaeche, damit nicht zwei orange
   Knoepfe nebeneinander stehen. */
.knopf--leise{
  background:none;color:var(--blau);
  border:1.5px solid rgba(38,91,214,.35);
  box-shadow:none;
}
@media (hover:hover){
  .knopf--leise:hover{filter:none;background:rgba(38,91,214,.07)}
}
.brief-aktion{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ====================== Druck: nur das Anschreiben ======================
   Der Druckdialog des Browsers sichert das als PDF. Alles ausser dem
   Brieftext wird ausgeblendet, Raender nach DIN-Gewohnheit. */
@media print{
  /* Auftritts-Animationen starten auf opacity:0 und werden erst sichtbar,
     wenn der Beobachter sie einmal im Blickfeld hatte. Wer von oben weg
     druckt, bekommt sonst leere Seiten -- der Brief war genau deshalb leer. */
  .js-bewegt [data-auftritt],
  .js-bewegt .zeile-innen,
  .js-bewegt .kopf-innen > *{
    opacity:1 !important;transform:none !important;filter:none !important;
  }

  /* Alles ausser dem Hauptteil, und darin alles ausser dem Brief.
     Die Abschluss-Sektion liegt ausserhalb des Hauptteils, deshalb zwei
     Regeln statt einer Liste einzelner Klassen. */
  body.druckt-brief > *:not(#inhalt){display:none !important}
  body.druckt-brief #inhalt > *:not(.band--brief){display:none !important}

  body.druckt-brief .band--brief{padding:0;background:none;max-width:none}
  body.druckt-brief .band--brief .kopfzeile,
  body.druckt-brief .brief-form,
  body.druckt-brief .stufen-leiste,
  body.druckt-brief .stufen-nav,
  body.druckt-brief .brief-check,
  body.druckt-brief .brief-aktion,
  body.druckt-brief .tr-label,
  body.druckt-brief .spur-hinweis{display:none !important}

  body.druckt-brief .brief,
  body.druckt-brief .brief-seite{
    display:block;margin:0;padding:0;border:0;background:none;box-shadow:none;
  }
  /* Der Kopfbalken laeuft bis an die Blattkante, deshalb hat die Seite
     selbst keinen Rand -- der Satzspiegel steckt im Blatt. */
  @page{size:A4;margin:0}

  body.druckt-brief .blatt{
    /* Volle Blatthoehe, damit der Fussbalken einen Anker hat. position:fixed
       traegt im Druck nicht verlaesslich -- er landete auf halber Seite. */
    position:relative;min-height:297mm;box-sizing:border-box;
    margin:0;border:0;border-radius:0;box-shadow:none;overflow:visible;
    font:10pt/1.5 Poppins,system-ui,sans-serif;color:#000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  body.druckt-brief .blatt-kopf{
    /* min-height statt height: lieber ein etwas hoeherer Balken als
       abgeschnittene Kontaktdaten. Richtung ausdruecklich gesetzt, damit
       keine Bildschirmregel den Kopf im Druck wieder stapelt. */
    min-height:97pt;box-sizing:border-box;padding:0 58pt;gap:28pt;
    flex-direction:row;align-items:center;justify-content:space-between;
    background:var(--blatt-navy) !important;color:#fff !important;
  }
  body.druckt-brief .blatt-name{font-size:23pt;line-height:1.1}
  body.druckt-brief .blatt-rolle{font-size:8.5pt;margin-top:4pt;color:#e8b9a4 !important}
  body.druckt-brief .blatt-kontakt{font-size:7pt;gap:2.5pt 9pt}
  body.druckt-brief .blatt-kontakt dt{color:rgba(255,255,255,.66) !important}
  body.druckt-brief .blatt-kontakt dd{color:#fff !important}

  body.druckt-brief .blatt-koerper{padding:29pt 58pt 0}
  body.druckt-brief .blatt-koerper p{margin:0 0 9pt}
  body.druckt-brief .blatt-rueck{font-size:7.5pt;margin-bottom:16pt !important}
  body.druckt-brief .blatt-an{margin-bottom:20pt !important}
  body.druckt-brief .blatt-datum{margin-bottom:16pt !important}
  body.druckt-brief .blatt-betreff{
    font-size:11pt;border-left-width:5pt;padding-left:16pt;
    color:var(--blatt-navy) !important;margin-bottom:16pt !important;
  }
  body.druckt-brief .blatt-gruss{margin-top:14pt !important;margin-bottom:40pt !important}
  body.druckt-brief .brief-seite{position:static}
  body.druckt-brief .blatt mark{color:var(--blatt-terra) !important;background:none !important}
  body.druckt-brief .blatt-kopf mark{color:#e8b9a4 !important}

  /* Ein Vorfahr mit transform wird zum Bezugsrahmen fuer position:fixed --
     der Fussbalken klebte dadurch an der Unterkante von .brief statt am
     Blattfuss. Im Druck gehoert ohnehin keine Transformation in den Brief. */
  body.druckt-brief .brief,
  body.druckt-brief .brief *{transform:none !important}

  /* Fussbalken: fest am Blattfuss, wiederholt sich auf jeder Seite. */
  body.druckt-brief .blatt::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:3pt;
    background:var(--blatt-navy) !important;
  }
}

/* ========================= 6 · Pfad ========================= */

.pfad{margin-top:50px}

.pfad-reiter{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-bottom:36px;
}
.pfad-reiter-knopf{
  min-height:44px;padding:10px 18px;cursor:pointer;
  background:transparent;border:1px solid rgba(26,29,33,.14);border-radius:999px;
  font-family:var(--schrift);font-size:15px;font-weight:500;line-height:21px;
  color:rgba(26,29,33,.62);
  transition:background .3s,color .3s,border-color .3s;
}
.pfad-reiter-knopf[aria-selected=true]{
  background:var(--blau);border-color:transparent;color:var(--weiss);
}

.pfad-schritte{
  position:relative;max-width:720px;margin:0 auto;padding:0;list-style:none;
}
/* Die Linie haengt an den Schritten, nicht an der Liste. An der Liste
   lief sie bis 24 px ueber deren Unterkante -- also quer durch die letzte
   Karte und ein Stueck ins Leere darunter. So endet sie am letzten Knoten. */
/* :last-child trifft hier nicht: das Skript haengt die blaue Fuellung als
   <span> hinter den letzten <li>. Damit ist der letzte Schritt nur noch
   vorletztes Kind -- und bekam seine Linie doch. :last-of-type zaehlt nur
   die <li> und trifft. */
.pfad-schritt:not(:last-of-type)::before{
  content:"";position:absolute;left:24px;top:24px;bottom:0;width:3px;
  transform:translateX(-50%);
  background:rgba(26,29,33,.12);border-radius:999px;
}
.pfad-schritte--fest .pfad-schritt::before{display:none}
.pfad-fuellung{
  position:absolute;left:24px;top:24px;width:3px;height:0;
  transform:translateX(-50%);transform-origin:top;
  background:var(--blau);border-radius:999px;
}

.pfad-schritt{position:relative;display:flex;gap:20px;padding-bottom:36px}
.pfad-schritt:last-of-type{padding-bottom:0}

.pfad-spalte{
  width:48px;flex-shrink:0;
  display:flex;justify-content:center;
}
.pfad-knoten{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  /* Deckend, nicht halbdurchsichtig. Sonst laeuft die Spur sichtbar durch
     den Knoten hindurch -- beim letzten, nicht erreichten Knoten sieht das
     aus, als ginge die Linie darunter weiter. #f3f4f4 ist derselbe Ton,
     den rgba(26,29,33,.05) auf Weiss ergibt. */
  background:#f3f4f4;border:1.5px solid rgba(26,29,33,.18);
  color:rgba(26,29,33,.62);
  font-weight:700;font-size:19.2px;
  transition:background .45s,color .45s,border-color .45s,box-shadow .45s;
}
.pfad-knoten svg{width:24px;height:24px}
.pfad-schritt--ziel .pfad-knoten{width:58px;height:58px;font-size:23.2px}
.pfad-schritt.erreicht .pfad-knoten{
  background:var(--blau);border-color:transparent;color:var(--weiss);
  box-shadow:0 0 0 5px rgba(38,91,214,.12);
}
.pfad-schritt--ziel.erreicht .pfad-knoten{box-shadow:0 0 0 8px rgba(38,91,214,.22)}

.pfad-karte{
  flex:1;margin-top:2px;padding:18px 22px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.14);border-radius:16px;
  box-shadow:rgba(20,23,28,.06) 0 4px 20px;
  transition:background .4s,border-color .4s;
}
.pfad-schritt--ziel.erreicht .pfad-karte{
  border-color:rgba(38,91,214,.5);background:rgba(38,91,214,.06);
}
.pfad-fahne{
  display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;
  background:rgba(38,91,214,.12);color:var(--blau);
  font-size:14px;font-weight:700;letter-spacing:.2px;
}
.pfad-titel{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--text)}
.pfad-schritt--ziel .pfad-titel{font-size:20px}
.pfad-text{margin:0;font-size:15px;line-height:1.55;color:rgba(26,29,33,.62)}

/* ======================= 7 · Abschluss ====================== */

.abschluss{
  padding:100px 32px;
  /* Am Vollabzug der Live-Seite abgelesen: 0 % #21dcea, 50 % #24ace1,
     100 % #265bd6. Die dunkle Petrol-Fassung davor war meine Kontrast-
     Abdunklung, nicht die Marke. */
  background:linear-gradient(#21dcea 0%,#24ace1 50%,#265bd6 100%);
}
.abschluss-innen{
  max-width:1376px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  text-align:center;
}
.abschluss-titel{
  margin:0;
  font-size:clamp(36px,5vw,72px);font-weight:600;
  letter-spacing:-.03em;line-height:1;
  color:rgb(248,249,251);
}
.abschluss-zeile{
  margin:0;max-width:725px;
  font-size:16px;font-weight:400;line-height:1.55;
  color:#ffffff;
}

/* ============== Unterseiten: Hero und Bausteine ============= */

.held--unterseite{min-height:0;height:auto;padding:88px 25px 0;display:block}
.held-flaeche--unterseite{
  height:560px;border-radius:28px;padding:90px 32px;
  align-items:center;justify-content:center;
}
.held-schleier--unterseite{
  background:linear-gradient(rgba(10,20,48,.467),rgba(10,20,48,.55));
}
.held-inhalt--mitte{align-items:center;text-align:center;max-width:960px;gap:0}

.held-marke{
  margin:0;padding:7px 16px;border-radius:999px;
  background:var(--orange);color:var(--auf-orange);
  font-size:14px;font-weight:700;letter-spacing:.2px;
}
.held-titel--unterseite{
  margin-top:20px;max-width:900px;
  font-size:clamp(32px,4.2vw,60px);letter-spacing:-.5px;line-height:1.08;
}
.held-zeile--unterseite{
  margin-top:17px;max-width:600px;
  font-size:20px;font-weight:500;line-height:31px;color:rgba(255,255,255,.9);
}

.merkmale{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:34px 0 0;padding:0;list-style:none;
}
.merkmale li{
  display:flex;align-items:center;gap:9px;
  padding:11px 18px 11px 14px;border-radius:999px;
  background:var(--weiss);
  box-shadow:rgba(20,23,28,.18) 0 8px 24px;
  font-size:15px;font-weight:600;color:var(--text);
}
.merkmal-zeichen{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  background:rgba(38,91,214,.12);color:var(--blau);
}
.merkmal-zeichen svg{width:16px;height:16px}

.band--unterseite{padding:75px 32px}
.titel--eng{line-height:1.1}

/* Nutzenkarten */
.nutzen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  max-width:1000px;margin:50px auto 0;padding:0;list-style:none;
}
.nutzen-karte{
  display:flex;flex-direction:column;
  padding:28px 26px;background:var(--weiss);
  border:1px solid rgba(26,29,33,.1);border-radius:18px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.nutzen-zeichen{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-bottom:18px;border-radius:14px;
  background:rgba(38,91,214,.1);color:var(--blau);
}
.nutzen-zeichen svg{width:24px;height:24px}
.nutzen-titel{margin:0 0 8px;font-size:18px;font-weight:600;line-height:23.4px;color:var(--text)}
.nutzen-text{margin:0;font-size:15px;font-weight:400;line-height:23.25px;color:rgba(26,29,33,.64)}

/* Klappen */
.klappen{max-width:1000px;margin:50px auto 0;display:flex;flex-direction:column;gap:12px}
.klappe{
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:16px;
  box-shadow:rgba(20,23,28,.04) 0 2px 10px;
}
.klappe[open]{
  border-color:rgba(38,91,214,.4);
  box-shadow:rgba(38,91,214,.1) 0 8px 26px;
}
.klappe summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:68px;padding:22px 20px;cursor:pointer;list-style:none;
}
.klappe summary::-webkit-details-marker{display:none}
.klappe-titel{font-size:18px;font-weight:600;line-height:23.4px;color:var(--text)}
.klappe-zeichen{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  background:rgba(38,91,214,.1);color:var(--blau);
}
.klappe-zeichen svg{width:16px;height:16px}
.klappe[open] .klappe-zeichen{background:var(--blau);color:var(--weiss);transform:rotate(180deg)}
.klappe p{margin:0;padding:0 20px 20px;font-size:15px;line-height:24px;color:rgba(26,29,33,.66)}

.klappen-fuss{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:28px 0 0;text-align:center;
}
.klappen-hinweis{font-size:14px;line-height:20px;color:var(--grau-lesbar)}

/* Zeitplan */
/* Vier Spalten auf 1000 px ergaben 235 px je Karte und 24 Zeichen pro
   Zeile. Zwei Spalten geben rund 60 -- lesbar, und der Zeitplan bleibt
   ein Raster, statt noch ein Stapel zu werden. */
.zeitplan{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  max-width:1000px;margin:50px auto 0;padding:0;list-style:none;
}
.zeitplan-stufe{
  padding:24px 26px;background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:16px;
  transition:background .4s,border-color .4s,box-shadow .4s;
}
.zeitplan-stufe.ist-jetzt{
  border-color:rgba(38,91,214,.5);background:rgba(38,91,214,.06);
  box-shadow:rgba(38,91,214,.12) 0 8px 26px;
}
.zeitplan-wann{
  margin:0 0 10px;
  font-size:14px;font-weight:700;letter-spacing:.2px;
  color:var(--blau);
}
.zeitplan-titel{margin:0 0 6px;font-size:18px;font-weight:600;color:var(--text)}
.zeitplan-text{margin:0;font-size:15px;line-height:23.25px;color:rgba(26,29,33,.64)}
.zeitplan-fuss{margin:20px 0 0;text-align:center;font-size:14px;line-height:22px;color:var(--grau-lesbar)}
.zeitplan-jetzt{
  display:inline-block;margin-right:8px;padding:3px 10px;border-radius:999px;
  background:rgba(38,91,214,.12);color:var(--blau);font-weight:600;
}
.zeitplan-jetzt:empty{display:none}

/* Duale Ausbildung */
.dual{
  display:flex;align-items:stretch;justify-content:center;gap:16px;
  max-width:1100px;margin:50px auto 0;
}
.dual-karte{
  flex:1;display:flex;flex-direction:column;
  padding:28px 26px;background:var(--weiss);
  border:1px solid rgba(26,29,33,.1);border-radius:18px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.dual-karte--ziel{
  border-color:transparent;background:var(--blau);
  box-shadow:rgba(38,91,214,.26) 0 10px 30px;
}
.dual-karte--ziel .nutzen-titel{color:var(--weiss)}
.dual-karte--ziel .nutzen-text{color:rgba(255,255,255,.82)}
.dual-karte--ziel .nutzen-zeichen{background:rgba(255,255,255,.18);color:var(--weiss)}
.dual-zeichen{align-self:center;margin:0;font-size:28px;font-weight:600;color:rgba(26,29,33,.45)}
.dual-chip{
  align-self:flex-start;margin:16px 0 0;padding:5px 12px;border-radius:999px;
  background:rgba(38,91,214,.1);color:var(--blau);
  font-size:14px;font-weight:600;
}

/* Fester Pfad auf Unterseiten */
/* Auf Unterseiten laeuft die Schrittfolge waagerecht, wie im Original */
/* --- Der Weg als klebender Karten-Stapel ---
   Vorher lagen fuenf Karten nebeneinander: 207 px breit, 17 bis 25 Zeichen
   pro Zeile. Lesbar wird es ab etwa 45. Jetzt liegt jede Karte ueber die
   volle Breite, klebt beim Scrollen fest und die naechste schiebt sich
   darueber -- die Kante der vorherigen bleibt sichtbar. */
.pfad-schritte--fest{
  display:block;
  max-width:840px;margin:56px auto 0;
  --stapel-oben:calc(var(--kopf-hoehe) + 28px);
  --stapel-versatz:16px;
}
.pfad-schritte--fest::before,
.pfad-schritte--fest .pfad-fuellung{display:none}

.pfad-schritte--fest .pfad-schritt{
  position:sticky;
  top:var(--stapel-oben);
  display:flex;flex-direction:row;align-items:flex-start;gap:22px;
  padding:30px 34px;margin:0 0 20px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.10);
  border-radius:22px;
  box-shadow:0 1px 2px rgba(20,23,28,.04),
             0 20px 44px -26px rgba(20,23,28,.30);
}
.pfad-schritte--fest .pfad-schritt:nth-child(1){top:calc(var(--stapel-oben) + 0 * var(--stapel-versatz))}
.pfad-schritte--fest .pfad-schritt:nth-child(2){top:calc(var(--stapel-oben) + 1 * var(--stapel-versatz))}
.pfad-schritte--fest .pfad-schritt:nth-child(3){top:calc(var(--stapel-oben) + 2 * var(--stapel-versatz))}
.pfad-schritte--fest .pfad-schritt:nth-child(4){top:calc(var(--stapel-oben) + 3 * var(--stapel-versatz))}
.pfad-schritte--fest .pfad-schritt:nth-child(5){top:calc(var(--stapel-oben) + 4 * var(--stapel-versatz))}
.pfad-schritte--fest .pfad-schritt:nth-child(6){top:calc(var(--stapel-oben) + 5 * var(--stapel-versatz))}
.pfad-schritte--fest .pfad-schritt:last-child{margin-bottom:0}

.pfad-schritte--fest .pfad-spalte{width:auto;flex:0 0 auto;justify-content:flex-start}
.pfad-schritte--fest .pfad-knoten{width:48px;height:48px;font-size:19.2px}
.pfad-schritte--fest .pfad-karte{flex:1;min-width:0;padding:0;border:0;background:none;box-shadow:none}
.pfad-schritte--fest .pfad-titel{margin:6px 0 8px}
.pfad-schritte--fest .pfad-text{margin:0;max-width:52ch}
.pfad-schritte--fest .pfad-titel{max-width:46ch}
.pfad-schritte--fest .pfad-aktion{margin:14px 0 0}

/* Schmal: kein Kleben. Uebereinander gestapelte Karten auf kleinem Schirm
   verdecken mehr, als sie zeigen. */
@media screen and (max-width:768px){
  .pfad-schritte--fest{max-width:none;margin-top:36px}
  .pfad-schritte--fest .pfad-schritt{
    position:static;padding:22px 20px;gap:16px;border-radius:18px;
  }
}
.pfad-aktion{margin:12px 0 0}
.pfad-aktion a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:600;color:var(--blau);text-decoration:none;
}

.gabel-liste--offen{margin-top:50px;max-width:720px}

/* ======================== Wegweiser ========================= */

.wegweiser{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  max-width:1180px;margin:50px auto 0;padding:0;list-style:none;
}
.wegweiser-karte{
  display:flex;flex-direction:column;height:100%;
  padding:26px 22px;text-decoration:none;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:18px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.wegweiser-zeichen{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:16px;border-radius:14px;
  background:rgba(38,91,214,.1);color:var(--blau);
}
.wegweiser-zeichen svg{width:24px;height:24px}
.wegweiser-titel{margin-bottom:6px;font-size:18px;font-weight:600;color:var(--text)}
.wegweiser-text{font-size:15px;line-height:23.25px;color:rgba(26,29,33,.64)}
.wegweiser-pfeil{margin-top:auto;padding-top:16px;font-size:20px;color:#1e4fba}
.wegweiser-karte--quiz{
  border-color:var(--orange);background:rgba(255,154,31,.06);
}
.wegweiser-karte--quiz .wegweiser-zeichen{background:rgba(255,154,31,.16);color:#c26a0a}
.wegweiser-karte--quiz .wegweiser-pfeil{color:#c26a0a}
@media (hover:hover){
  .wegweiser-karte{transition:transform .25s,box-shadow .25s,border-color .25s}
  .wegweiser-karte:hover{
    transform:translateY(-4px);border-color:rgba(38,91,214,.4);
    box-shadow:rgba(20,23,28,.14) 0 14px 34px;
  }
  .wegweiser-karte--quiz:hover{border-color:var(--orange)}
}

/* ========================== Quiz ============================ */

.quiz{
  max-width:720px;margin:50px auto 0;padding:32px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:24px;
  box-shadow:rgba(20,23,28,.08) 0 10px 34px;
  text-align:center;
}
.quiz [data-schritt][hidden]{display:none}
.quiz-vorsatz{margin:0 0 18px;font-size:15px;line-height:23px;color:rgba(26,29,33,.62)}

.quiz-leiste{
  height:6px;margin-bottom:18px;border-radius:999px;
  background:rgba(26,29,33,.1);overflow:hidden;
}
.quiz-leiste-fuellung{
  display:block;height:100%;width:0;border-radius:999px;
  background:var(--blau);transition:width .35s cubic-bezier(.22,.61,.36,1);
}
.quiz-stand{
  margin:0 0 10px;
  font-size:14px;font-weight:600;letter-spacing:.2px;
  color:var(--blau);
}
.quiz-frage{
  margin:0 0 22px;
  font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.25;color:var(--text);
}


.quiz-antworten{display:flex;flex-direction:column;gap:10px}
.quiz-antwort{
  min-height:44px;padding:16px 20px;cursor:pointer;text-align:left;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.14);border-radius:14px;
  font-family:var(--schrift);font-size:17px;font-weight:500;color:var(--text);
  transition:border-color .2s,background .2s,transform .2s;
}
.quiz-antwort[aria-pressed=true]{border-color:var(--blau);background:rgba(38,91,214,.06)}
@media (hover:hover){
  .quiz-antwort:hover{border-color:var(--blau);background:rgba(38,91,214,.05);transform:translateY(-2px)}
}

.quiz-zurueck{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;margin-top:16px;padding:10px 0;
  background:none;border:0;cursor:pointer;
  font-family:var(--schrift);font-size:14px;font-weight:500;color:rgba(26,29,33,.62);
}
.quiz-zurueck svg{width:16px;height:16px}
.quiz-zurueck[hidden]{display:none}

.quiz-titel{margin:0 0 12px;font-size:clamp(24px,2.6vw,30px);font-weight:600;color:var(--text)}

.quiz-text{margin:0 auto 20px;max-width:560px;font-size:16px;line-height:26px;color:rgba(26,29,33,.72)}
.quiz-berufe{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0 0 24px;padding:0;list-style:none;
}
.quiz-berufe li{
  padding:7px 14px;border-radius:999px;
  background:rgba(38,91,214,.1);color:var(--blau);
  font-size:15px;font-weight:500;
}
.quiz-aktionen{display:flex;flex-direction:column;align-items:center;gap:10px}
.quiz-zweitweg{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;color:rgba(26,29,33,.62);text-decoration:none;
}
.quiz-zweitweg span{margin-left:5px;color:var(--blau);font-weight:600}
.quiz-hinweis{margin:18px 0 0;font-size:14px;line-height:22px;color:var(--grau-lesbar)}

/* ====================== Fragen-Trainer ====================== */

.trainer{
  max-width:860px;margin:50px auto 0;padding:28px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:20px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.tr-kopf{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tr-schalter{
  min-height:44px;padding:10px 18px;cursor:pointer;
  background:transparent;border:1px solid rgba(26,29,33,.14);border-radius:999px;
  font-family:var(--schrift);font-size:15px;font-weight:500;color:rgba(26,29,33,.62);
}
.tr-schalter[aria-pressed=true]{background:var(--blau);border-color:transparent;color:var(--weiss)}
.tr-uhr{font-variant-numeric:tabular-nums;font-weight:700}

.tr-karten{margin:0;padding:0;list-style:none}
.tr-karte[hidden]{display:none}
.tr-nr{
  margin:0 0 8px;
  font-size:14px;font-weight:600;letter-spacing:.2px;
  color:var(--blau);
}
.tr-frage{margin:0 0 20px;font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.25;color:var(--text)}

.tr-hilfe[hidden]{display:none}
.tr-block{
  margin-bottom:12px;padding:16px 18px;border-radius:14px;
  background:rgba(38,91,214,.05);border:1px solid rgba(38,91,214,.16);
}
.tr-block--fehler{background:rgba(255,101,45,.06);border-color:rgba(255,101,45,.22)}
.tr-label{
  margin:0 0 4px;
  font-size:14px;font-weight:700;letter-spacing:.3px;color:var(--blau);
}
.tr-block--fehler .tr-label{color:#c2410c}
.tr-text{margin:0;font-size:15px;line-height:24px;color:rgba(26,29,33,.78)}
.tr-text--beispiel{font-style:italic}

.tr-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px}
.tr-blatt{
  min-height:44px;padding:10px 16px;cursor:pointer;
  background:transparent;border:0;
  font-family:var(--schrift);font-size:15px;font-weight:500;color:rgba(26,29,33,.62);
}
.tr-blatt[disabled]{opacity:.35;cursor:default}
.tr-hinweis{margin:18px 0 0;font-size:14px;line-height:22px;color:var(--grau-lesbar)}

.trainer.ist-beamer{
  position:fixed;inset:0;z-index:200;max-width:none;margin:0;
  padding:7vh 8vw;border-radius:0;overflow-y:auto;
}
.trainer.ist-beamer .tr-frage{font-size:clamp(32px,5vw,64px)}
.trainer.ist-beamer .tr-text{font-size:clamp(18px,2vw,26px);line-height:1.5}
.trainer.ist-beamer .tr-label{font-size:clamp(15px,1.4vw,20px)}
.trainer.ist-beamer .tr-nr{font-size:clamp(15px,1.4vw,20px)}

/* ======================= Studium-Check ====================== */

.check{
  max-width:860px;margin:50px auto 0;padding:28px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:20px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.check-frage{margin-bottom:22px}
.check-frage:last-of-type{margin-bottom:0}
.check-nr{
  margin:0 0 6px;
  font-size:14px;font-weight:600;letter-spacing:.2px;
  color:var(--blau);
}
.check-text{margin:0 0 12px;font-size:18px;font-weight:600;color:var(--text)}
.check-antworten{display:flex;flex-wrap:wrap;gap:8px}
.check-antwort{
  min-height:44px;padding:10px 18px;cursor:pointer;
  background:transparent;border:1px solid rgba(26,29,33,.14);border-radius:999px;
  font-family:var(--schrift);font-size:15px;font-weight:500;color:rgba(26,29,33,.72);
}
.check-antwort[aria-pressed=true]{background:var(--blau);border-color:transparent;color:var(--weiss)}
@media (hover:hover){
  .check-antwort:hover{border-color:var(--blau)}
}
.check-ergebnis{
  margin:22px 0 0;padding:16px 18px;border-radius:14px;
  background:rgba(38,91,214,.07);border:1px solid rgba(38,91,214,.2);
  font-size:16px;line-height:25px;color:var(--text);
}
.check-ergebnis:empty{display:none}

.vgl col.ist-treffer,.vgl th.ist-treffer,.vgl td.ist-treffer{background:rgba(38,91,214,.1)}
.vgl thead th.ist-treffer{background:rgba(38,91,214,.18)}

/* ==================== Praktikums-Spur ======================= */

.spur,.brief{
  max-width:860px;margin:50px auto 0;padding:28px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:20px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.spur-felder{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin-bottom:16px}
.spur-form{display:flex;flex-direction:column;align-items:flex-start}

.spur-leer{margin:22px 0 0;font-size:15px;line-height:24px;color:var(--grau-lesbar)}
.spur-leer[hidden]{display:none}
.spur-liste{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.spur-eintrag{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 18px;border-radius:14px;
  background:rgba(26,29,33,.03);border:1px solid rgba(26,29,33,.12);
}
.spur-eintrag.ist-faellig{background:rgba(255,154,31,.08);border-color:rgba(255,154,31,.45)}
.spur-eintrag.ist-erledigt{opacity:.55}
.spur-betrieb{flex:1;min-width:160px;font-size:16px;font-weight:600;color:var(--text)}
.spur-wann{font-size:14px;color:rgba(26,29,33,.62)}
.spur-stand{
  padding:4px 12px;border-radius:999px;
  background:rgba(38,91,214,.1);color:var(--blau);
  font-size:14px;font-weight:600;white-space:nowrap;
}
.spur-eintrag.ist-faellig .spur-stand{background:rgba(255,154,31,.2);color:#c26a0a}
.spur-knopf{
  min-height:44px;padding:8px 14px;cursor:pointer;
  background:transparent;border:1px solid rgba(26,29,33,.16);border-radius:999px;
  font-family:var(--schrift);font-size:14px;font-weight:500;color:rgba(26,29,33,.7);
}
.spur-text{margin-top:22px}
.spur-text[hidden]{display:none}
.spur-hinweis{
  max-width:720px;margin:20px auto 0;text-align:center;
  font-size:14px;line-height:22px;color:var(--grau-lesbar);
}

/* =================== Anschreiben-Generator ================== */

/* Rechts steht ein ganzes A4-Blatt, links nur ein Schritt des Formulars.
   Damit die Spalten nicht auseinanderlaufen: das Blatt bekommt etwas mehr
   Breite (und wird dadurch kuerzer), die Prueferliste sitzt links darunter. */
.brief{
  display:grid;grid-template-columns:1fr 1.18fr;gap:28px 28px;
  align-items:start;
}
.brief-form{grid-column:1;grid-row:1}
.brief-stand{grid-column:1;grid-row:2}
.brief-seite{grid-column:2;grid-row:1 / span 2}
.brief-stand{padding-top:4px}
.brief-stand .tr-label{margin-bottom:12px}
/* Zwei Spalten, damit zusammengehoerige Angaben (PLZ und Ort, Telefon und
   E-Mail) nebeneinander stehen statt als vierzehn gleich lange Zeilen. */
.brief-form{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;align-items:end}
.brief-form .frage-feld{grid-column:1 / -1}
/* Zwischenueberschriften: 29 Felder am Stueck sind fuer Schueler keine
   Aufgabe mehr, sondern eine Wand. Die Abschnitte teilen sie in Portionen. */
.brief-gruppe{
  grid-column:1 / -1;margin:14px 0 -2px;
  font-size:15px;font-weight:600;color:var(--blau);
}
.brief-gruppe:first-child{margin-top:0}
/* Sprungmarke beim Stufenwechsel, kein Bedienelement: kein Rahmen. */
.brief-gruppe:focus,.brief-gruppe:focus-visible{outline:none}

/* --- Stufen ---
   Ohne JavaScript bleibt .brief-form das Raster mit allen Feldern. Erst
   .ist-stufig stapelt die Schritte und blendet alle bis auf einen aus. */
.brief-form.ist-stufig{
  display:flex;flex-direction:column;gap:18px;
  /* Das align-items:end der Rasterfassung gilt hier weiter und bedeutet
     im Flex-Kontext rechtsbuendig: die Fussleiste war dadurch nur so
     breit wie ihr Knopf, samt Trennlinie. */
  align-items:stretch;
}
.ist-stufig .brief-stufe{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;align-items:end;
  /* Die Stufe haelt ihre Mindesthoehe (per JS die der hoechsten), damit
     die Navigation darunter nicht springt. align-content haelt die Felder
     oben zusammen, statt sie ueber die ganze Hoehe zu ziehen. */
  align-content:start;
  min-width:0;margin:0;
}
.ist-stufig .brief-stufe[hidden]{display:none}
.ist-stufig .brief-gruppe{margin-top:0}

.stufen-leiste{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid rgba(26,29,33,.1);
}
.stufen-stand{margin:0;font-size:14px;font-weight:600;color:var(--blau)}
.stufen-punkte{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.stufen-punkt button{
  width:30px;height:30px;padding:0;cursor:pointer;
  font-family:var(--schrift);font-size:13px;font-weight:600;
  color:rgba(26,29,33,.5);background:var(--weiss);
  border:1px solid rgba(26,29,33,.16);border-radius:50%;
}
.stufen-punkt.ist-vorbei button{color:var(--blau);border-color:rgba(38,91,214,.4)}
.stufen-punkt.ist-hier button{
  color:var(--weiss);background:var(--blau);border-color:transparent;
}
@media (hover:hover){
  .stufen-punkt button:hover{border-color:var(--blau);color:var(--blau)}
  .stufen-punkt.ist-hier button:hover{color:var(--weiss)}
}
.stufen-nav{
  display:flex;gap:10px;justify-content:flex-end;
  padding-top:16px;border-top:1px solid rgba(26,29,33,.1);
}
.stufen-nav button[hidden]{display:none}
.brief-form select{
  width:100%;min-height:44px;padding:0 14px;
  font-family:var(--schrift);font-size:15px;color:var(--text);
  background:var(--weiss);border:1px solid rgba(26,29,33,.18);border-radius:12px;
}
.brief-form .frage-feld--halb{grid-column:auto}
.brief-form textarea{resize:vertical;min-height:62px}
/* Das Blatt laeuft mit: das Formular ist laenger als die Vorschau, und wer
   tippt, soll sehen was dabei entsteht. */
.brief-seite{display:flex;flex-direction:column;position:sticky;top:96px;align-self:start}
/* --- Das Blatt ---
   Masse aus der Vorlage abgenommen (A4 = 595 x 842 pt):
   Kopfbalken 97 pt randlos, Satzspiegel 58 pt links und rechts,
   Fussbalken 3 pt. Am Bildschirm in px gespiegelt, im Druck in pt. */
:root{
  --blatt-navy:#25395c;
  --blatt-terra:#a85937;
  --blatt-rand:58;          /* pt, dient nur der Dokumentation */
}
.blatt{
  flex:1;margin:0 0 14px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:10px;
  box-shadow:rgba(20,23,28,.08) 0 6px 20px;
  overflow:hidden;
  font-family:var(--schrift);color:#1a1d21;
  overflow-wrap:anywhere;
}
.blatt-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;background:var(--blatt-navy);color:var(--weiss);
}
.blatt-name{margin:0;font-size:22px;font-weight:700;line-height:1.15}
.blatt-rolle{margin:4px 0 0;font-size:12px;line-height:1.35;color:#e8b9a4}
.blatt-kontakt{
  display:grid;grid-template-columns:auto auto;gap:3px 12px;
  margin:0;font-size:10px;line-height:1.5;
}
.blatt-kontakt dt{color:rgba(255,255,255,.62);white-space:nowrap}
.blatt-kontakt dd{margin:0;color:var(--weiss)}
.blatt-koerper{padding:22px 26px 26px;font-size:13px;line-height:1.55}
.blatt-koerper p{margin:0 0 11px}
.blatt-rueck{font-size:10px;color:rgba(26,29,33,.6);margin-bottom:16px !important}
.blatt-an{margin-bottom:18px !important}
.blatt-datum{text-align:right;margin-bottom:18px !important}
.blatt-betreff{
  font-weight:700;color:var(--blatt-navy);
  border-left:4px solid var(--blatt-navy);padding-left:12px;
  margin-bottom:18px !important;
}
.blatt-gruss{margin-top:16px !important;margin-bottom:28px !important}
.blatt-wer{font-weight:700;margin-bottom:0 !important}
.blatt mark{background:none;color:var(--blatt-terra);padding:0}
/* Terrakotta auf Navy ergibt 2,28:1 und ist nicht lesbar. Im Kopfbalken
   bekommen Platzhalter deshalb den hellen Ton der Rollenzeile (6,55:1). */
.blatt-kopf mark{color:#e8b9a4}
.brief-check{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.brief-check li{
  position:relative;padding-left:24px;
  font-size:14px;line-height:22px;color:rgba(26,29,33,.7);
}
.brief-check li::before{
  content:"";position:absolute;left:0;top:7px;
  width:9px;height:9px;border-radius:50%;background:var(--orange);
}
.brief-check li.ist-gut::before{background:#16b364}
.brief-check li.ist-gut{color:rgba(26,29,33,.5)}

/* =================== Persönlichkeitstest ==================== */

.test{
  max-width:860px;margin:50px auto 0;padding:28px;
  background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:20px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.test-vorsatz{margin:0 0 24px;font-size:15px;line-height:24px;color:rgba(26,29,33,.64)}
.test-teil{
  margin:28px 0 4px;font-size:22px;font-weight:600;color:var(--text);
}
.test-teil:first-of-type{margin-top:0}
.test-unterteil{margin:24px 0 10px;font-size:18px;font-weight:600;color:var(--text)}
.test-unter{margin:0 0 18px;font-size:15px;line-height:23px;color:rgba(26,29,33,.62)}

.test-liste{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.test-zeile{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-radius:14px;
  background:rgba(26,29,33,.02);border:1px solid rgba(26,29,33,.1);
}
.test-zeile.ist-beantwortet{background:rgba(38,91,214,.05);border-color:rgba(38,91,214,.25)}
.test-zeile--lage{border-style:dashed}
.test-zeile--lage.ist-beantwortet{border-style:solid}
.test-aussage{margin:0;flex:1;min-width:220px;font-size:16px;line-height:24px;color:var(--text)}

.test-skala{display:flex;gap:6px}
.test-punkt{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;cursor:pointer;
  background:var(--weiss);border:1px solid rgba(26,29,33,.18);border-radius:50%;
  font-family:var(--schrift);font-size:15px;font-weight:600;color:var(--grau-lesbar);
}
.test-punkt[aria-checked=true]{background:var(--blau);border-color:transparent;color:var(--weiss)}
@media (hover:hover){
  .test-punkt:hover{border-color:var(--blau)}
  .test-knopf:hover{border-color:var(--blau)}
}

.test-wahl{display:flex;gap:8px}
.test-knopf{
  min-height:44px;padding:10px 16px;cursor:pointer;
  background:var(--weiss);border:1px solid rgba(26,29,33,.18);border-radius:999px;
  font-family:var(--schrift);font-size:14px;font-weight:500;color:rgba(26,29,33,.68);
}
.test-knopf[aria-pressed=true]{background:var(--blau);border-color:transparent;color:var(--weiss)}

.test-stand{margin:14px 0 0;font-size:15px;color:rgba(26,29,33,.62)}
.test-stand:empty{display:none}
.test-ergebnis[hidden]{display:none}

.zug{margin-bottom:16px}
.zug-kopf{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.zug-name{font-size:16px;font-weight:600;color:var(--text)}
.zug-wert{font-size:15px;color:var(--blau);font-weight:600}
.zug-balken{height:10px;border-radius:999px;background:rgba(26,29,33,.1);overflow:hidden}
.zug-fuellung{display:block;height:100%;border-radius:999px;background:var(--blau)}
.zug-text{margin:6px 0 0;font-size:14px;line-height:22px;color:rgba(26,29,33,.64)}

.feld-karte{
  margin-bottom:12px;padding:18px 20px;border-radius:16px;
  background:rgba(38,91,214,.05);border:1px solid rgba(38,91,214,.2);
}
.feld-name{margin:0 0 4px;font-size:18px;font-weight:600;color:var(--text)}
.feld-berufe{margin:0;font-size:15px;line-height:23px;color:rgba(26,29,33,.72)}

.test-warnung{
  margin:22px 0 18px;padding:16px 18px;border-radius:14px;
  background:rgba(255,154,31,.08);border:1px solid rgba(255,154,31,.3);
  font-size:14px;line-height:23px;color:rgba(26,29,33,.78);
}

/* =================== Weitere Bausteine ====================== */

.nutzen--2{grid-template-columns:repeat(2,1fr)}
.nutzen--3{grid-template-columns:repeat(3,1fr)}
.nutzen--4{grid-template-columns:repeat(4,1fr)}
.nutzen--5{grid-template-columns:repeat(5,1fr);max-width:1180px}

.klappe-inhalt{display:flex;flex-direction:column}
.klappe-bild{
  width:calc(100% - 40px);margin:0 20px 20px;border-radius:12px;
  aspect-ratio:1.4;object-fit:cover;
}

/* Seiten ohne Foto bekommen eine gebaute Markenflaeche, kein Stockbild.
   Der Verlauf traegt die Marke, das Raster gibt Tiefe, der Schimmer waermt. */
.held-flaeche--ohne-bild{
  background:
    radial-gradient(60% 80% at 82% 18%, rgba(255,154,31,.38) 0%, rgba(255,154,31,0) 60%),
    radial-gradient(70% 90% at 12% 88%, rgba(18,219,230,.26) 0%, rgba(18,219,230,0) 62%),
    linear-gradient(142deg, #091129 0%, #15306d 48%, #265bd6 100%);
}
.held-flaeche--ohne-bild::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    repeating-linear-gradient(68deg, rgba(255,255,255,.06) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(-68deg, rgba(255,255,255,.04) 0 1px, transparent 1px 38px);
  mask-image:radial-gradient(85% 85% at 50% 42%, #000 0%, transparent 78%);
}
.held-flaeche--ohne-bild .held-schleier{
  background:linear-gradient(rgba(9,17,41,.25), rgba(9,17,41,.45));
}

/* Vergleich */
.vgl-rahmen{
  max-width:1000px;margin:50px auto 0;overflow-x:auto;
  border:1px solid rgba(26,29,33,.12);border-radius:18px;background:var(--weiss);
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.vgl{border-collapse:collapse;width:100%;min-width:720px;text-align:left}
.vgl th,.vgl td{padding:16px 20px;vertical-align:top;border-top:1px solid rgba(26,29,33,.1)}
.vgl thead td,.vgl thead th{border-top:0}
.vgl thead th{background:rgba(38,91,214,.06)}
.vgl-name{display:block;font-size:18px;font-weight:600;color:var(--text)}
.vgl-unter{display:block;margin-top:2px;font-size:14px;font-weight:500;color:var(--blau)}
.vgl tbody th{
  width:160px;font-size:15px;font-weight:600;color:rgba(26,29,33,.62);
  background:rgba(26,29,33,.02);
}
.vgl tbody td{font-size:15px;line-height:23.25px;color:rgba(26,29,33,.76)}

/* Waage */
.waage{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1000px;margin:50px auto 0}
.waage-seite{padding:28px 26px;border-radius:18px;border:1px solid rgba(26,29,33,.1);background:var(--weiss)}
.waage-seite--dafuer{border-color:rgba(38,91,214,.3);background:rgba(38,91,214,.04)}
.waage-seite--dagegen{border-color:rgba(26,29,33,.12);background:rgba(26,29,33,.02)}
.waage-titel{margin:0 0 14px;font-size:18px;font-weight:600;color:var(--text)}
.waage-liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.waage-liste li{
  position:relative;padding-left:26px;
  font-size:15px;line-height:23.25px;color:rgba(26,29,33,.72);
}
.waage-liste li::before{
  content:"";position:absolute;left:0;top:8px;
  width:10px;height:10px;border-radius:50%;background:rgba(26,29,33,.2);
}
.waage-seite--dafuer .waage-liste li::before{background:var(--blau)}

/* Zahlen */
.zahlen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  max-width:1000px;margin:50px auto 0;padding:0;list-style:none;
}
.zahlen li{
  display:flex;flex-direction:column;gap:6px;
  padding:26px 22px;border-radius:18px;
  background:var(--weiss);border:1px solid rgba(26,29,33,.1);
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.zahl-gross{font-size:38px;font-weight:700;line-height:1.1;color:var(--blau)}
.zahl-wort2{font-size:15px;line-height:22px;color:rgba(26,29,33,.64)}
.zahlen-hinweis{
  max-width:720px;margin:20px auto 0;text-align:center;
  font-size:14px;line-height:22px;color:var(--grau-lesbar);
}

/* Pakete */
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:50px auto 0}
.paket{
  display:flex;flex-direction:column;
  padding:28px 26px;background:var(--weiss);
  border:1px solid rgba(26,29,33,.12);border-radius:18px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.paket--mitte{border-color:var(--orange);box-shadow:rgba(255,154,31,.18) 0 10px 30px}
.paket-marke{
  align-self:flex-start;margin-bottom:14px;padding:4px 12px;border-radius:999px;
  background:rgba(38,91,214,.12);color:#1e4fba;
  font-size:14px;font-weight:600;
}
.paket--mitte .paket-marke{background:rgba(255,154,31,.18);color:#8f550f}
.paket-titel{margin:0 0 4px;font-size:24px;font-weight:600;color:var(--text)}
.paket-zeile{margin:0 0 18px;font-size:15px;line-height:23.25px;color:rgba(26,29,33,.64)}
.paket-daten{margin:0 0 18px;display:flex;flex-direction:column;gap:6px}
.paket-daten div{display:flex;gap:8px;font-size:14px;line-height:21px}
.paket-daten dt{font-weight:600;color:var(--text)}
.paket-daten dd{margin:0;color:rgba(26,29,33,.64)}
.paket-punkte{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.paket-punkte li{
  position:relative;padding-left:24px;
  font-size:15px;line-height:23.25px;color:rgba(26,29,33,.72);
}
.paket-punkte li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:50%;background:var(--blau);
}
.paket-hinweis{margin:0 0 18px;font-size:14px;line-height:21px;color:var(--grau-lesbar)}
.paket-knopf{margin-top:auto;align-self:stretch;justify-content:center}

.extra{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  max-width:1100px;margin:18px auto 0;padding:28px 26px;border-radius:18px;
  background:#0f1b3d;color:var(--weiss);
}
.extra-marke{
  padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:14px;font-weight:600;letter-spacing:.2px;
}
.extra-titel{margin:6px 0 0;font-size:22px;font-weight:600}
.extra-text{margin:0 0 10px;max-width:640px;font-size:15px;line-height:23.25px;color:rgba(255,255,255,.8)}

/* Textvorlage */
.vorlage{
  max-width:860px;margin:50px auto 0;padding:28px;
  background:var(--weiss);border:1px solid rgba(26,29,33,.12);border-radius:18px;
  box-shadow:rgba(20,23,28,.06) 0 6px 22px;
}
.vorlage-felder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vorlage-feld{display:flex;flex-direction:column;gap:6px}
.vorlage-feld span{font-size:14px;font-weight:500;color:rgba(26,29,33,.72)}
.vorlage-feld input{
  min-height:44px;padding:10px 14px;
  font-family:var(--schrift);font-size:15px;color:var(--text);
  background:var(--weiss);border:1px solid rgba(26,29,33,.18);border-radius:12px;
}
.vorlage-feld input:focus{outline:3px solid rgba(38,91,214,.18);border-color:var(--blau)}
.vorlage-schutz{margin:12px 0 20px;font-size:14px;color:var(--grau-lesbar)}
.vorlage-reiter-reihe{display:flex;gap:8px;margin-bottom:16px}
.vorlage-reiter{
  min-height:44px;padding:10px 18px;cursor:pointer;
  background:transparent;border:1px solid rgba(26,29,33,.14);border-radius:999px;
  font-family:var(--schrift);font-size:15px;font-weight:500;color:rgba(26,29,33,.62);
}
.vorlage-reiter[aria-selected=true]{background:var(--blau);border-color:transparent;color:var(--weiss)}
.vorlage-text{
  margin:0 0 18px;padding:20px;border-radius:14px;
  background:rgba(38,91,214,.05);border:1px solid rgba(38,91,214,.18);
  font-family:var(--schrift);font-size:15px;line-height:24px;color:var(--text);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.vorlage-text[hidden]{display:none}
.vorlage-text mark{background:rgba(255,154,31,.25);color:inherit;padding:0 2px;border-radius:4px}

/* Firmenliste */
.firmen-filter-reihe{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  max-width:1000px;margin:50px auto 0;
}
.firmen-filter{
  min-height:44px;padding:10px 18px;cursor:pointer;
  background:transparent;border:1px solid rgba(26,29,33,.14);border-radius:999px;
  font-family:var(--schrift);font-size:15px;font-weight:500;color:rgba(26,29,33,.62);
}
.firmen-filter[aria-pressed=true]{background:var(--blau);border-color:transparent;color:var(--weiss)}
.firmen-zahl{margin:16px 0 0;text-align:center;font-size:15px;color:rgba(26,29,33,.62)}
.firmen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:1100px;margin:20px auto 0;padding:0;list-style:none;
}
.firma[hidden]{display:none}
.firma a{
  display:flex;align-items:center;gap:10px;min-height:68px;
  padding:16px 18px;text-decoration:none;
  background:var(--weiss);border:1px solid rgba(26,29,33,.12);border-radius:16px;
  box-shadow:rgba(20,23,28,.04) 0 2px 10px;
}
.firma-name{flex:1;font-size:16px;font-weight:600;color:var(--text)}
.firma-branche{font-size:14px;color:var(--grau-lesbar);white-space:nowrap}
.firma-pfeil{color:var(--blau);font-size:16px}
@media (hover:hover){
  .firma a{transition:transform .25s,box-shadow .25s,border-color .25s}
  .firma a:hover{transform:translateY(-2px);border-color:rgba(38,91,214,.4);box-shadow:rgba(20,23,28,.12) 0 10px 26px}
}
.firmen-hinweis{
  max-width:720px;margin:24px auto 0;text-align:center;
  font-size:14px;line-height:22px;color:var(--grau-lesbar);
}

/* Rechtstexte */
.band--recht{padding:120px 32px 60px}
.recht-kopf{
  margin:0 0 28px;max-width:860px;
  font-size:clamp(32px,3.62vw,52px);font-weight:600;
  letter-spacing:-.03em;line-height:1.1;color:var(--dunkel);
}
.recht{max-width:860px;overflow-wrap:anywhere}
.recht p{margin:0 0 14px;font-size:16px;line-height:26px;color:rgba(26,29,33,.78);overflow-wrap:anywhere}
.recht-titel{margin:32px 0 12px;font-size:24px;font-weight:600;color:var(--text)}
.recht-untertitel{margin:26px 0 8px;font-size:18px;font-weight:600;color:var(--text)}
.recht-liste{margin:0 0 14px;padding-left:22px;color:rgba(26,29,33,.78);font-size:16px;line-height:26px;overflow-wrap:anywhere}

/* 404 */
.band--leer{padding:140px 32px 80px;text-align:center}
.leer-zahl{
  margin:0 0 8px;font-size:72px;font-weight:700;line-height:1;
  color:rgba(38,91,214,.22);
}
.leer-text{max-width:560px;margin:18px auto 24px;font-size:17px;line-height:27px;color:rgba(26,29,33,.68)}
.leer-wege{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:32px 0 0;padding:0;list-style:none;
}
.leer-wege a{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  border:1px solid rgba(26,29,33,.14);border-radius:999px;
  font-size:15px;font-weight:500;color:var(--text);text-decoration:none;
}
@media (hover:hover){
  .leer-wege a:hover{border-color:var(--blau);color:var(--blau)}
}

/* ==================== Frag-mich-Formular ==================== */

.frage{
  width:100%;max-width:640px;margin-top:8px;
  display:flex;flex-direction:column;gap:16px;
  padding:28px;background:var(--weiss);border-radius:24px;
  box-shadow:rgba(20,23,28,.14) 0 10px 40px;
  text-align:left;
}
.frage-falle{display:none}
.frage-reihe{display:flex;gap:16px}
.frage-feld{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.frage-feld>span{font-size:14px;font-weight:500;color:rgba(26,29,33,.72)}
.frage-feld input,
.frage-feld select,
.frage-feld textarea{
  min-height:44px;padding:11px 14px;
  font-family:var(--schrift);font-size:16px;font-weight:400;line-height:24px;
  color:var(--text);background:var(--weiss);
  border:1px solid rgba(26,29,33,.18);border-radius:12px;
}
.frage-feld textarea{resize:vertical;min-height:110px}
.frage-feld input:focus,
.frage-feld select:focus,
.frage-feld textarea:focus{
  outline:3px solid rgba(38,91,214,.18);outline-offset:0;
  border-color:var(--blau);
}
.frage button{align-self:flex-start;margin-top:4px}
.frage-fuss{margin:0;font-size:14px;line-height:20px;color:rgba(26,29,33,.62)}
.frage-fuss a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--blau);
}

.kopf-klappe-extern{border-top:1px solid rgba(26,29,33,.08);margin-top:4px;padding-top:13px}

/* Zwischen 1024 und 1200: weniger Polster, damit der Titel
   zweizeilig bleibt. Oberhalb gelten wieder die Messwerte. */
@media screen and (min-width:1024px) and (max-width:1200px){
  .held{padding:96px 40px 40px}
  .held-flaeche{padding:80px 48px 0}
  .kopf-innen{padding:0 24px;gap:24px}
  /* "Fuer Schulen & Jugendarbeit" ist 70 px breiter als "Fuer Schulen".
     Bei genau 1024 px stand die Leiste danach 8 px links und rechts
     ueber dem Fenster -- Wortmarke und Innenpolster geben den Platz her. */
  .kopf-marke img{width:200px}
  .kopf-pille{gap:22px;padding:8px 18px}
}

/* ====================== Tablet und darunter ================= */

@media screen and (max-width:1023px){
  :root{--kopf-hoehe:64px}

  .kopf{background:var(--weiss)}
  .kopf-innen{
    max-width:none;padding:0 0 0 25px;
    justify-content:space-between;gap:16px;
  }
  .kopf-marke img{width:175px}
  .kopf-pille,.kopf-kontakt{display:none}

  .kopf-brenner{
    display:flex;flex-direction:column;justify-content:center;gap:5.6px;
    width:60px;height:64px;padding:0 18px;
    background:none;border:0;cursor:pointer;
  }
  .kopf-brenner span{
    display:block;width:24px;height:2.4px;border-radius:2px;
    background:var(--tinte);
  }

  .kopf-mobil{
    display:flex;flex-direction:column;
    padding:8px 25px 20px;
    background:var(--weiss);
    border-top:1px solid var(--orange-rand);
  }
  .kopf-mobil[hidden]{display:none}
  .kopf-mobil a{
    padding:12px 0;
    font-size:16px;line-height:20.8px;color:var(--kopf-text);text-decoration:none;
  }
  .kopf-mobil-kontakt{color:var(--orange);font-weight:500}
  .kopf-mobil-titel{
    margin:18px 0 2px;font-size:13px;font-weight:600;letter-spacing:.02em;
    color:var(--grau-lesbar);
  }
  .kopf-mobil-titel:first-child{margin-top:4px}
  .kopf-mobil a{padding-left:12px}
  .kopf-mobil .kopf-mobil-direkt,.kopf-mobil-kontakt{
    padding-left:0;margin-top:18px;border-top:1px solid rgba(26,29,33,.08);padding-top:16px;
  }

  .held{
    height:auto;min-height:0;
    padding:92px 16px 28px;
    display:block;
  }
  .held-flaeche{
    height:auto;min-height:540px;
    padding:64px 22px 96px;
  }
  /* Die Gesichter sitzen im unteren Drittel. Auf dem Handy steht der Knopf
     dort, deshalb den Ausschnitt nach oben ziehen. */
  .held-bild{object-position:50% 28%}
  .held-inhalt{max-width:600px;margin:0 auto}
  .held-titel{
    font-size:clamp(28px,8.2vw,34px);letter-spacing:-.01em;line-height:1.16;
    text-align:center;
  }
  /* Der feste Umbruch stammt von der breiten Fassung. */
  .held-zeile br{display:none}
  .held-zeile{max-width:none;font-size:15px;line-height:22px}
  .held-punkte{gap:8px 14px;justify-content:center}
  .held-punkte span{font-size:14px;line-height:18px}

  /* Der Knopf verlaesst die Ecke und wird zur vollen Leiste unten. */
  .held-ecke{left:0;right:0;flex-direction:row}
  .held-kerbe{display:none}
  .held-ecke-reihe{display:block;width:100%}
  .held-knopf-feld{padding:0 18px 18px;background:none;border-radius:0}
  .held-knopf-feld .knopf{width:100%;min-width:0}

  .held-zahlen{
    display:flex;gap:12px;flex-wrap:wrap;
    margin-top:16px;
  }
  .zahl{
    position:static;transform:none;flex:1 1 150px;
  }

  .fuss-oben{flex-direction:column;gap:40px}
  .fuss-marke{width:auto}
  .fuss-spalten{gap:48px}
  .fuss-unten{flex-direction:column;align-items:flex-start;gap:8px}
}

@media screen and (max-width:420px){
  .held-flaeche{padding:80px 24px 0}
  .fuss-innen{padding:24px 16px 16px}
  .fuss-spalten{flex-direction:column;gap:24px}
}

/* ============ Sektionen auf Tablet und Handy ================ */

@media screen and (max-width:1023px){
  .band{padding:50px 16px 60px}
  .band--schmal{padding:40px 16px}
  #quiz{padding:60px 16px}
  #generator{padding:50px 16px}

  .wege{flex-direction:column;align-items:center;gap:24px}
  .weg{width:100%;max-width:343px;flex:none}
  .weg--kippe-links,.weg--kippe-rechts{transform:none}
  .weg-fuss{min-height:200px;padding:24px 20px 28px}
  .weg-titel{font-size:20px;line-height:26px}

  .wegweiser{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .quiz{padding:22px 18px;margin-top:32px;border-radius:20px}
  .quiz-antwort{padding:14px 16px;font-size:16px}
  .trainer{padding:20px;margin-top:32px}
  .tr-fuss{flex-direction:column;align-items:stretch}
  .tr-fuss .knopf{order:-1;justify-content:center}
  .trainer.ist-beamer{padding:5vh 6vw}
  .check{padding:20px;margin-top:32px}
  .spur,.brief{padding:20px;margin-top:32px}
  .test{padding:20px;margin-top:32px}
  .test-zeile{flex-direction:column;align-items:stretch;gap:12px}
  .test-skala{justify-content:space-between}
  .test-punkt{width:52px;height:52px}
  .spur-felder{grid-template-columns:1fr}
  .brief{grid-template-columns:1fr;gap:18px}
  /* Eine Spalte: erst ausfuellen, dann das Ergebnis sehen, dann was
     noch fehlt. Die Pruefliste dazwischen schoebe das Blatt zu weit nach
     unten. */
  .brief-form{grid-column:1;grid-row:auto;order:1}
  .brief-seite{grid-column:1;grid-row:auto;position:static;order:2}
  .brief-stand{grid-column:1;grid-row:auto;order:3}
  .brief{display:flex;flex-direction:column}
  /* Auf dem Handy stapelt der Briefkopf, sonst quetschen sich Name und
     Kontaktspalte nebeneinander auf je zwei Zeilen. */
  .blatt-kopf{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px}
  .blatt-koerper{padding:18px 20px 22px}

  .coach{flex-direction:column;gap:20px}
  .coach-bild{width:100%;height:auto;aspect-ratio:1;border-radius:32px}
  .coach-karte{padding:0}
  .coach-zitat{font-size:20px;line-height:30px}
  .coach-abzeichen{margin:24px 0 0}
  .coach-zahl,.coach-plus{font-size:28px;line-height:34px}
  .coach-wort{font-size:16px}

  .stimmen{gap:10px}
  /* Die Pfeile standen in der Reihe und haben dem Schieber 108 Pixel
     weggenommen, die Karte war dadurch nur 250 breit. */
  .stimmen{position:relative;gap:0;padding-bottom:62px}
  /* Unter der Karte statt darauf, sonst liegen sie im Zitat. */
  .stimmen-pfeil{position:absolute;top:auto;bottom:0;z-index:3}
  .stimmen-pfeil[data-richtung=zurueck]{left:calc(50% - 52px)}
  .stimmen-pfeil[data-richtung=vor]{right:calc(50% - 52px)}
  .stimmen-bahn{width:100%}
  .stimme{flex-basis:min(100%,460px);padding:28px;border-radius:28px}
  .stimme blockquote{font-size:16px;line-height:24px}

  .bahn{height:auto;padding-bottom:24px}
  .bahn-flug{position:static;transform:none;width:100%;height:150px;margin:0 auto 24px}
  .bahn-schritte{flex-direction:column;align-items:flex-start;gap:16px;max-width:none}
  .bahn-schritt{flex-direction:row;align-items:center;gap:14px;width:100%}
  .bahn-schritt::before{
    top:-16px;left:24px;right:auto;bottom:auto;
    width:3px;height:16px;transform:translateX(-50%);
  }
  .bahn-aktion{margin-top:28px}

  .pfad-schritt{gap:14px;padding-bottom:28px}
  .pfad-karte{padding:16px 18px}

  .abschluss{padding:60px 16px}
  .frage{padding:20px;border-radius:20px}

  .held--unterseite{padding:76px 16px 0}
  .held-flaeche--unterseite{height:auto;min-height:480px;padding:48px 20px;border-radius:24px}
  .held-zeile--unterseite{font-size:16px;line-height:25px}
  .merkmale{gap:8px;margin-top:24px}
  .merkmale li{padding:9px 14px 9px 11px;font-size:14px}
  .merkmal-zeichen{width:26px;height:26px}

  .band--unterseite{padding:50px 16px}
  .nutzen{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .klappen{margin-top:32px}
  .klappe summary{padding:18px 16px}
  .klappe p{padding:0 16px 16px}
  .zeitplan{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .dual{flex-direction:column;gap:12px;margin-top:32px}
  .dual-zeichen{font-size:22px}
  .pfad-schritte--fest{flex-direction:column;gap:0;margin-top:32px}
  .pfad-schritte--fest::before{top:24px;bottom:24px;left:24px;right:auto;width:3px;height:auto;transform:translateX(-50%)}
  .pfad-schritte--fest .pfad-schritt{flex-direction:row;gap:14px;padding-bottom:28px}
  .pfad-schritte--fest .pfad-schritt:last-child{padding-bottom:0}
  .pfad-schritte--fest .pfad-spalte{width:48px}
  .dual-karte--ziel{box-shadow:rgba(38,91,214,.22) 0 6px 20px}
  .gabel-liste--offen{margin-top:32px}

  .nutzen--2,.nutzen--3,.nutzen--4,.nutzen--5{grid-template-columns:1fr}
  .vgl-rahmen{margin-top:32px}
  .waage{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .zahlen{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px}
  .zahl-gross{font-size:30px}
  .pakete{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .extra{padding:22px 20px}
  .vorlage{padding:20px;margin-top:32px}
  .vorlage-felder{grid-template-columns:1fr}
  .vorlage-reiter-reihe{flex-wrap:wrap}
  .firmen-filter-reihe{margin-top:32px}
  .firmen{grid-template-columns:1fr;margin-top:16px}
  .band--recht{padding:96px 16px 50px}
  .band--leer{padding:110px 16px 60px}
  .klappe-bild{width:calc(100% - 32px);margin:0 16px 16px}
  .frage-reihe{flex-direction:column;gap:16px}
}

/* ========================= Bewegung =========================
   Grundsatz: ohne JavaScript ist alles sichtbar. Erst wenn das
   Skript laeuft, setzt es html.js-bewegt und nur dann gelten die
   Anfangszustaende hier. Wer Bewegung abbestellt hat, sieht sie nie.
   ============================================================ */

:root{
  --bogen:cubic-bezier(.22,.61,.36,1);     /* kurze Wege, Knoepfe, Hover */
  --weich:cubic-bezier(.16,1,.3,1);        /* Auftritte. Laeuft lange aus. */
  --dauer:.85s;
}

/* Lenis traegt den Lauf des Scrollens. Das Original laeuft darauf, und
   ohne es fuehlt sich jede Bewegung haerter an. Seine eigenen Regeln,
   woertlich aus lenis.css, damit nichts nachgeladen wird: */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Faellt Lenis aus, traegt der Browser weich. Laeuft Lenis, schaltet
   seine Regel oben das hier ab. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- Auftritt beim Scrollen ---
   Kein Blur auf den Abschnittsflaechen. Gemessen: mit Blur hatte das
   Scrollen Aussetzer von 109 ms, ohne nur 36. Eine unscharfe Flaeche muss
   ueber ihre ganze Groesse neu gerastert werden, und bei gestaffelten
   Auftritten laufen mehrere gleichzeitig. Deckkraft und Versatz laufen
   dagegen auf der Grafikkarte.
   Die Unschaerfe bleibt dort, wo sie zu sehen ist und wenig kostet:
   auf den Ueberschriftzeilen und einmal auf dem Hero. */
.js-bewegt [data-auftritt]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--dauer) var(--weich),
             transform var(--dauer) var(--weich);
  transition-delay:var(--verzug, 0ms);
}
.js-bewegt [data-auftritt="seite"]{transform:translateX(-24px)}
.js-bewegt [data-auftritt="ruhig"]{transform:translateY(12px)}
.js-bewegt [data-auftritt].ist-da{opacity:1;transform:none}
.js-bewegt [data-auftritt].ruht{transition:none}

/* --- Ueberschriften: Zeile fuer Zeile aus der Unschaerfe ---
   Keine Huelle mit overflow mehr. Die Huelle ist ein schlichter Block,
   damit die Ueberschrift exakt so hoch bleibt wie ohne Bewegung. */
.zeile-huelle{display:block}
.js-bewegt .zeile-innen{
  display:block;
  opacity:0;
  filter:blur(10px);
  transform:translateY(16px);
  transition:opacity .95s var(--weich),
             filter .95s var(--weich),
             transform .95s var(--weich);
  transition-delay:var(--verzug, 0ms);
}
.js-bewegt .ist-da .zeile-innen,
.js-bewegt [data-auftritt].ist-da .zeile-innen{opacity:1;filter:blur(0);transform:none}
.js-bewegt .ruht .zeile-innen{filter:none;transition:none}

/* --- Auftakt der Seite --- */
.js-bewegt .held-flaeche{
  opacity:0;filter:blur(12px);transform:scale(.985);
  transition:opacity .9s var(--weich),filter 1.1s var(--weich),transform 1.1s var(--weich);
}
.js-bewegt .held-flaeche.ist-da{opacity:1;filter:blur(0);transform:none}
.js-bewegt .held-flaeche.ruht{filter:none}

.js-bewegt .kopf-innen > *{
  opacity:0;transform:translateY(-10px);
  transition:opacity .6s var(--weich),transform .6s var(--weich);
  transition-delay:var(--verzug, 0ms);
}
.js-bewegt .kopf.ist-da .kopf-innen > *{opacity:1;transform:none}

/* --- Seitenwechsel: die alte Seite geht unscharf, die neue kommt scharf --- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:seite-raus .28s var(--bogen) both}
  ::view-transition-new(root){animation:seite-rein .5s var(--weich) both}
}
@keyframes seite-raus{
  to{opacity:0;filter:blur(8px);transform:translateY(-8px)}
}
@keyframes seite-rein{
  from{opacity:0;filter:blur(10px);transform:translateY(14px)}
  to{opacity:1;filter:blur(0);transform:none}
}
/* Der Kopf steht beim Wechsel still, sonst springt er mit. */
.kopf{view-transition-name:kopf}
::view-transition-old(kopf),::view-transition-new(kopf){animation:none;mix-blend-mode:normal}

/* --- Zahlen zaehlen hoch, der Kasten darf dabei nicht springen --- */
.zahl-wert,.coach-zahl,.zahl-gross{font-variant-numeric:tabular-nums}


/* --- Navigation: zwei Gruppen und ein Direktlink --- */
/* Der Abstand kommt allein aus dem gap der Pille. Mein erster Versuch
   setzte gap auf 2 px und gab jedem Eintrag eigenes Polster -- beides
   addierte sich und die Abstaende wurden ungleich. */
.kopf-pille{gap:28px}
.kopf-link{gap:5px}
.kopf-direkt{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 0 2px;
  font-size:16px;font-weight:400;letter-spacing:.16px;line-height:24px;
  color:var(--kopf-text);text-decoration:none;white-space:nowrap;
}
/* Fett als Hier-bin-ich wuerde die Breite aendern und die ganze Leiste
   verschieben, sobald man die Seite wechselt. Ein Strich kostet keinen Platz. */
.kopf-link.ist-hier,.kopf-direkt[aria-current="page"]{position:relative}
.kopf-link.ist-hier::after,.kopf-direkt[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--orange);border-radius:2px;
}
.kopf-direkt[aria-current="page"]::after{right:0}
@media (hover:hover){
  .kopf-direkt:hover,.kopf-link:hover{color:var(--blau)}
}
/* Zwischen Knopf und Klappe liegen 10 px Luft. Ohne Bruecke faellt der
   Zeiger dort heraus und das Menue schliesst auf dem Weg nach unten. */
.js-klappe .kopf-gruppe::after{
  content:"";position:absolute;left:-14px;top:100%;height:14px;
  /* So breit wie die Klappe (260 px) plus Rand, nicht so breit wie der
     Knopf: die Klappe ragt rechts ueber ihn hinaus, und wer dort schraeg
     nach unten faehrt, fiele sonst aus der Bruecke heraus. */
  width:288px;
  display:none;
}
.js-klappe .kopf-gruppe:has(.kopf-klappe.ist-offen)::after{display:block}

/* --- Aufklappmenue im Kopf ---
   Ohne JavaScript bleibt das hidden-Attribut stehen und das Menue zu;
   dieselben Links stehen in der Fusszeile. Mit JavaScript faellt hidden
   weg und der Zustand haengt an .ist-offen. */
.kopf-klappe[hidden]{display:none}
.js-klappe .kopf-klappe{
  opacity:0;visibility:hidden;
  transform:translateY(-10px) scale(.97);
  transform-origin:top left;
  transition:opacity .24s var(--bogen),
             transform .24s var(--bogen),
             visibility 0s linear .24s;
}
.js-klappe .kopf-klappe.ist-offen{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .26s var(--weich),
             transform .34s var(--weich),
             visibility 0s linear 0s;
}
.js-klappe .kopf-klappe a{
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s var(--weich),transform .3s var(--weich),background .2s,color .2s;
  transition-delay:var(--verzug, 0ms);
}
.js-klappe .kopf-klappe.ist-offen a{opacity:1;transform:none}
.kopf-pfeil{display:inline-flex;transition:transform .3s var(--weich)}
.kopf-link[aria-expanded="true"] .kopf-pfeil{transform:rotate(180deg)}

/* --- Klappen oeffnen weich, wo der Browser es kann --- */
.klappe .klappe-inhalt{display:grid;grid-template-rows:1fr}
.klappe-zeichen{transition:transform .34s var(--weich),background .3s,color .3s}
.klappe[open] .klappe-zeichen{transform:rotate(45deg)}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .klappe::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .42s var(--weich),content-visibility .42s allow-discrete;
  }
  .klappe[open]::details-content{block-size:auto}
}

/* --- Kleine Reaktionen --- */
@media (hover:hover){
  .gabel-option .gabel-chevron,
  .wegweiser-pfeil,
  .firma-pfeil{transition:transform .32s var(--weich)}
  .gabel-option:hover .gabel-chevron{transform:translateX(4px)}
  .wegweiser-karte:hover .wegweiser-pfeil{transform:translateX(5px)}
  .firma a:hover .firma-pfeil{transform:translate(2px,-2px)}
  .knopf,.kopf-kontakt,.kopf-link,.tr-schalter,.quiz-antwort,.check-antwort,.test-knopf,
  .test-punkt,.firmen-filter,.pfad-reiter-knopf,.vorlage-reiter,.wegweiser-karte,
  .firma a,.gabel-option,.paket{
    transition:transform .22s var(--weich),background .24s,color .24s,
               border-color .24s,box-shadow .28s var(--weich);
  }
}
/* Jeder Druck gibt nach. Auch auf dem Handy, darum ausserhalb des Hover-Zweigs. */
.knopf:active,.kopf-kontakt:active,.kopf-link:active,.quiz-antwort:active,
.check-antwort:active,.test-knopf:active,.firmen-filter:active,
.pfad-reiter-knopf:active,.vorlage-reiter:active,.tr-schalter:active{
  transform:scale(.97);transition-duration:.08s;
}
.wegweiser-karte:active,.gabel-option:active,.firma a:active{
  transform:scale(.99);transition-duration:.08s;
}

/* --- Sichtbarer Fokus, ueberall --- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(38,91,214,.45);outline-offset:3px;border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  .js-bewegt [data-auftritt],
  .js-bewegt .held-flaeche,
  .js-bewegt .kopf-innen > *,
  .js-bewegt .zeile-innen{opacity:1 !important;filter:none !important;transform:none !important}
  .js-klappe .kopf-klappe a{opacity:1 !important;transform:none !important}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .bahn-flieger{animation:none;offset-distance:70%}
}

/* ===================== Test in Stufen =======================
   Im HTML stehen alle 44 Fragen untereinander -- das ist die
   Rueckfallebene ohne JavaScript. Laeuft das Skript, setzt es
   .js-stufen und ab hier gilt: eine Frage auf dem Schirm.
   ============================================================ */

/* Teil- und Unterueberschrift wandern in den Kopf der Huelle und werden
   dort je Frage geschrieben. Der Vorsatz wandert als Ganzes mit nach unten
   -- versteckt man ihn, geht sein Text fuer alle verloren, die ihn
   brauchen. */
.js-stufen > .test-teil,
.js-stufen > .test-unter{display:none}
.stufe-still{display:none}
.stufe-vorsatz{
  margin:0;padding-top:20px;
  border-top:1px solid rgba(26,29,33,.08);
  font-size:14px;line-height:1.55;color:var(--grau-lesbar);
}

.stufe-huelle{
  max-width:720px;margin:0 auto;
  display:flex;flex-direction:column;gap:22px;
}

.stufe-kopf{display:flex;flex-direction:column;gap:10px}
.stufe-balken{
  height:6px;border-radius:999px;overflow:hidden;
  background:rgba(26,29,33,.08);
}
.stufe-fortschritt{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--blau) 100%);
  transition:width .5s var(--weich);
}
.stufe-marken{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.stufe-teil{
  margin:0;font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--blau);text-transform:none;
}
.stufe-zaehler{
  margin:0;font-size:14px;font-weight:500;color:var(--grau-lesbar);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stufe-unter{margin:0;font-size:15px;line-height:1.55;color:var(--grau-lesbar)}

/* Die Buehne traegt beide Fragelisten. Als Flex-Container teilen die sich
   die Breite und jede Frage waere nur halb so breit -- darum block. */
.stufe-buehne{display:block;min-height:250px}
.js-stufen .test-liste{
  width:100%;margin:0;padding:0;list-style:none;display:block;
}

/* Nur die laufende Frage steht auf der Buehne, und sie steht direkt darauf.
   Eine Karte in der Karte waere ein zweiter Rahmen um denselben Inhalt. */
.js-stufen .test-zeile{display:none}
.js-stufen .test-zeile.ist-aktiv{
  display:flex;flex-direction:column;align-items:stretch;gap:34px;
  width:100%;padding:0;border:0;background:none;box-shadow:none;
}
.js-stufen .test-zeile.ist-aktiv.ist-beantwortet{background:none;border:0}
.js-stufen .test-aussage{
  margin:0;min-width:0;max-width:20ch;
  font-size:38px;font-weight:600;line-height:1.2;
  letter-spacing:-.01em;color:var(--tinte);
}

/* Skala gross und ueber die volle Breite, mit Beschriftung an den Enden. */
.js-stufen .test-skala{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.js-stufen .test-punkt{
  width:auto;height:76px;border-radius:18px;
  font-size:20px;
  transition:transform .18s var(--weich),background .2s,border-color .2s,color .2s;
}
.js-stufen .test-zeile:not(.test-zeile--lage) .test-skala::before{content:none}
.test-skala-enden{display:none}
.js-stufen .test-skala-enden{
  display:flex;justify-content:space-between;
  margin:-16px 0 0;
  font-size:14px;color:var(--grau-lesbar);
}
/* Die Ja-Nein-Zeilen tragen zwei breite Knoepfe statt der Skala. */
.js-stufen .test-zeile--lage .test-knopf{min-height:56px;flex:1}

.stufe-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;
}
.stufe-zurueck{
  min-height:44px;padding:10px 18px;border-radius:999px;
  background:none;border:1px solid rgba(26,29,33,.16);cursor:pointer;
  font-family:var(--schrift);font-size:15px;color:var(--text);
  transition:background .2s,border-color .2s,opacity .2s;
}
.stufe-zurueck:disabled{opacity:.35;cursor:default}
@media (hover:hover){
  .stufe-zurueck:not(:disabled):hover{background:rgba(26,29,33,.05)}
}
.stufe-hinweis{margin:0;font-size:14px;color:var(--blau);font-weight:500}

/* Der Wechsel von Frage zu Frage: aus der Unschaerfe, von der Seite,
   aus der die man kommt. */
@media (prefers-reduced-motion:no-preference){
  .js-stufen .test-zeile.kommt-von-rechts{animation:frage-rechts .42s var(--weich) both}
  .js-stufen .test-zeile.kommt-von-links{animation:frage-links .42s var(--weich) both}
}
@keyframes frage-rechts{
  from{opacity:0;filter:blur(8px);transform:translateX(26px)}
  to{opacity:1;filter:blur(0);transform:none}
}
@keyframes frage-links{
  from{opacity:0;filter:blur(8px);transform:translateX(-26px)}
  to{opacity:1;filter:blur(0);transform:none}
}

@media screen and (max-width:640px){
  .js-stufen .test-zeile.ist-aktiv{gap:24px}
  .js-stufen .test-aussage{font-size:25px;max-width:none}
  .js-stufen .test-punkt{height:60px;font-size:17px}
  .js-stufen .test-skala{gap:7px}
  .stufe-buehne{min-height:0}
}

/* Die Frage-Ueberschriften tragen tabindex="-1" und werden beim Blaettern
   angesprungen, damit Vorlesesoftware an der richtigen Stelle weiterliest.
   Einen Rahmen bekommen sie dabei nicht: sie sind keine Bedienelemente,
   und der sichtbare Wechsel des Inhalts zeigt die Stelle schon an.
   Der Fokus bleibt gesetzt, nur der Ring faellt weg. */
.quiz-frage:focus,.quiz-frage:focus-visible,
.quiz-titel:focus,.quiz-titel:focus-visible,
.tr-frage:focus,.tr-frage:focus-visible{outline:none}