/* =========================================================================
   Chris Faderl · Coaching · PRO-VARIANTE
   Consulting-Niveau, Wechsel dunkel/hell, fette Sans-Headlines, Checklisten.
   Farbwelt: Tannengrün · warmes Weiß · Smaragd · Gold (sparsam).
   Inhalte/Texte unverändert aus index.html übernommen.
   ========================================================================= */

/* ---------------- Lokale Schriften (kein Google-CDN) ---------------- */
/* Inter als variabler Schnitt (Latin-Subset) deckt 400 bis 800 ab. */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-latin-var.woff2") format("woff2");
}
/* Newsreader nur im benötigten Schnitt (600) für Serif-Akzente. */
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/newsreader-latin-600.woff2") format("woff2");
}

:root{
  /* Dunkles Tannengrün */
  --fir:#0A2E23;
  --fir-deep:#062018;
  --fir-mid:#134A39;
  --fir-line:rgba(255,255,255,.13);

  /* Warmes Weiß */
  --paper:#FAFAF7;
  --paper-2:#F1F0EA;
  --white:#FFFFFF;

  /* Smaragd · zwei Stufen für Kontrast-Sicherheit */
  --emerald:#00966E;        /* Akzent/Checkmarks auf Hell (große/fette Elemente) */
  --emerald-cta:#007A59;    /* Buttonfläche: weiße Schrift erreicht 5,3:1 */
  --emerald-lt:#3FD6A4;     /* Akzent/Text auf Dunkel: 7,3:1 gegen --fir */

  /* Gold · nur Premium-Detail */
  --gold:#C2952F;
  --gold-lt:#E3BE62;

  /* Text */
  --text:#0F231C;           /* auf Hell */
  --text-mute:#4E6158;      /* auf Hell, 7:1 */
  --on-dark:#F2F7F4;
  --on-dark-mute:#A9C0B6;   /* auf Dunkel, 8:1 */
  --line:#E0DFD6;

  --radius:14px;
  --radius-sm:8px;
  --max:1200px;

  --font:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:"Newsreader", Georgia, serif;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--paper);color:var(--text);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--emerald-lt);outline-offset:3px;border-radius:4px;
}
::selection{background:var(--emerald);color:#fff}
img{max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}

/* iPhone mit Notch / Dynamic Island: im Querformat liegen die sicheren Bereiche
   seitlich. max() haelt den bisherigen Abstand als Untergrenze, die Seite
   veraendert sich also ueberall dort nicht, wo es keine Insets gibt.
   Zusammen mit viewport-fit=cover laufen die farbigen Flaechen randlos durch. */
@supports (padding: max(0px)) {
  .wrap{
    padding-left:max(32px, env(safe-area-inset-left));
    padding-right:max(32px, env(safe-area-inset-right));
  }
  @media(max-width:640px){
    .wrap{
      padding-left:max(20px, env(safe-area-inset-left));
      padding-right:max(20px, env(safe-area-inset-right));
    }
  }
}

/* Touch-Feedback in Markenfarbe statt des grauen iOS-Kastens */
a,button,summary,.check-opt{-webkit-tap-highlight-color:rgba(0,150,110,.15)}

/* Sektions-Rhythmus + Flächenwechsel */
section{padding:clamp(72px,8vw,120px) 0;position:relative}
section.dark{background:var(--fir);color:var(--on-dark)}
section.light{background:var(--paper)}
section.light + section.light{padding-top:0}

/* ---------------- Typo-System (Inter, fett, eng) ---------------- */
h1,h2,h3{letter-spacing:-.03em;line-height:1.05;font-weight:800}
h1{font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:-.035em;
   hyphens:manual;text-wrap:balance}
/* Nur auf sehr schmalen Screens darf umbrochen werden */
@media(max-width:520px){h1{overflow-wrap:break-word;hyphens:auto}}
h2{font-size:clamp(1.85rem,3.7vw,3.1rem);text-wrap:balance}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.02em}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  /* Auf Hell die dunklere Smaragdstufe: 12px/700 braucht 4,5:1 */
  color:var(--emerald-cta);margin-bottom:18px;
}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
/* Auf dunklem Grund die helle Stufe (7,3:1 gegen Tannengrün) */
.dark .kicker,.hero .kicker{color:var(--emerald-lt)}

.section-head{max-width:56ch;margin-bottom:clamp(40px,5vw,64px)}
.section-head .sub{margin-top:18px;color:var(--text-mute);font-size:1.05rem;max-width:52ch}
.dark .section-head .sub{color:var(--on-dark-mute)}

/* ---------------- Nav ---------------- */
header{
  position:sticky;top:0;z-index:60;background:var(--fir);
  border-bottom:1px solid var(--fir-line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{
  display:inline-flex;align-items:center;gap:0;
  color:var(--white);text-decoration:none;
  font-weight:800;font-size:1.2rem;letter-spacing:-.03em;white-space:nowrap;line-height:1;
}
/* Wortmarke „einskommaeins." · Dunkel-Variante (Nav) */
.brand .wordmark{display:inline-flex;align-items:baseline}
.brand .wordmark .komma{color:var(--emerald-lt)}
.brand .wordmark .dot{color:var(--gold)}
/* Bildmarke: nur unter 520px sichtbar */
.brand .iconmark{display:none;width:30px;height:30px}
@media(max-width:520px){
  .brand .wordmark{display:none}
  .brand .iconmark{display:block}
}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a:not(.btn){
  color:var(--on-dark-mute);text-decoration:none;font-size:.9rem;font-weight:500;
  position:relative;padding-bottom:3px;transition:color .2s var(--ease-soft);
}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--emerald-lt);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.nav-links a:not(.btn):hover{color:var(--white)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
@media(max-width:880px){.nav-links li:not(:last-child){display:none}}
/* „Fuer Unternehmen" ist der laengste Link und weicht als Erstes,
   damit die Nav zwischen 880px und ~930px nicht ueberlaeuft. */
@media(max-width:1000px){.nav-links li.nav-b2b{display:none}}
@media(max-width:520px){
  .nav .btn.outline{padding:10px 14px;font-size:.72rem;white-space:nowrap}
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:14px 26px;border-radius:999px;min-height:48px;cursor:pointer;
  font-weight:700;font-size:.92rem;letter-spacing:-.01em;text-decoration:none;
  border:1.5px solid transparent;position:relative;overflow:hidden;
  transition:transform .18s var(--ease-out), background .2s var(--ease-soft),
             color .2s var(--ease-soft), border-color .2s var(--ease-soft),
             box-shadow .28s var(--ease-out);
}
.btn::before{
  content:"";position:absolute;inset:0 auto 0 -120%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease-out);pointer-events:none;
}
.btn:hover::before{left:130%}
.btn .arrow{display:inline-block;transition:transform .22s var(--ease-out)}
.btn:hover .arrow{transform:translateX(5px)}
.btn:active{transform:translateY(0)!important}

/* Smaragd-CTA: weiße Schrift auf #007A59 = 5,3:1 */
.btn.primary{background:var(--emerald-cta);color:#fff;border-color:var(--emerald-cta)}
.btn.primary:hover{background:#00694C;border-color:#00694C;transform:translateY(-2px);
  box-shadow:0 14px 30px -14px rgba(0,122,89,.75)}
.btn.lg{padding:18px 38px;font-size:1rem;min-height:56px}

/* Outline auf Dunkel */
.btn.outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn.outline:hover{border-color:var(--emerald-lt);color:var(--emerald-lt);background:rgba(63,214,164,.08)}
.nav .btn.outline{padding:11px 20px;font-size:.84rem;min-height:42px}

.btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}

/* Outline auf Hell */
.btn.outline-dark{background:transparent;color:var(--fir);border-color:var(--fir)}
.btn.outline-dark:hover{background:var(--fir);color:var(--white);transform:translateY(-2px)}

/* =========================================================================
   HERO · dunkelgrüne Vollfläche mit stark abgedunkeltem Hintergrundbild
   ========================================================================= */
.hero{
  background:var(--fir);color:var(--on-dark);overflow:hidden;
  padding:clamp(80px,11vw,150px) 0 clamp(72px,9vw,120px);
  min-height:min(88vh,860px);display:flex;align-items:center;
}
.hero-media{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:flex-end;
}
/* Tonales „1,1"-Wasserzeichen: Dunkelgrün auf Dunkelgrün, rein dekorativ */
.hero-watermark{
  display:block;margin-right:2vw;flex:none;
  font-size:clamp(9rem,19vw,17rem);line-height:1;
  font-weight:800;letter-spacing:-.07em;color:#17543F;opacity:.9;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  user-select:none;-webkit-user-select:none;will-change:transform;
}
/* Verschleierung: links praktisch deckend (Textzone), rechts ~75 % */
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, var(--fir) 0%, rgba(10,46,35,.97) 34%, rgba(10,46,35,.8) 58%, rgba(10,46,35,.6) 100%),
    radial-gradient(70% 60% at 12% 20%, rgba(19,74,57,.7), rgba(10,46,35,0) 70%);
}
.hero-inner{position:relative;z-index:2;max-width:900px}
.hero .lede{
  margin-top:26px;font-size:clamp(1.05rem,1.35vw,1.22rem);
  color:var(--on-dark-mute);max-width:56ch;
}
.hero h1 em{font-style:normal;color:var(--emerald-lt)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-note{margin-top:18px;font-size:.86rem;color:var(--on-dark-mute)}
@media(max-width:900px){
  .hero{min-height:0}
  /* Mobil: vollstaendiges „1,1" unten rechts, wo Freiflaeche ist */
  .hero-media{align-items:flex-end;padding-bottom:clamp(20px,7vw,52px)}
  .hero-watermark{margin-right:5vw;font-size:clamp(4.5rem,22vw,7.5rem);opacity:.6}
}

/* =========================================================================
   PROOF-LEISTE · echte Zahlen, direkt unter dem Hero
   ========================================================================= */
.proof{
  background:var(--white);border-bottom:1px solid var(--line);
  padding:clamp(34px,4vw,54px) 0;
}
/* minmax(0,1fr) statt 1fr: sonst kann eine Spalte nicht unter die Mindestbreite
   ihres laengsten Wortes schrumpfen ("Consulting-Programme" auf 360px). */
.proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center}
.proof-item{position:relative;padding:0 12px}
.proof-item + .proof-item::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--line);
}
.proof-item b{
  display:block;font-size:clamp(2.1rem,4vw,3.2rem);font-weight:800;
  letter-spacing:-.045em;color:var(--fir);line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.proof-item span{
  display:block;margin-top:10px;font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
  /* „AUSLANDSSTATIONEN" ist gesperrt breiter als eine Viertelspalte und lief
     zwischen 761px und 900px in die Nachbarspalte. Die Trennstelle steht als
     ­ im Markup (Auslands-stationen), weil die automatische Trennung
     „AUSLANDSSTA-TIONEN" ergab. break-word bleibt als letzte Reissleine. */
  overflow-wrap:break-word;
}
/* Namensgeschichte · nur unter der Abschlussnote */
.proof-item .proof-hint{
  margin-top:5px;font-size:.72rem;font-weight:500;letter-spacing:.02em;
  text-transform:none;color:var(--emerald-cta);
}
@media(max-width:760px){
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .proof-item{padding:0 6px}
  /* Enger gesperrt, damit die Labels im Zweispalter seltener trennen muessen */
  .proof-item span{letter-spacing:.06em}
  .proof-item:nth-child(odd)::before{display:none}
}

/* =========================================================================
   ANGEBOTE · Pricing-Karten mit dunkelgrünem Header + Smaragd-Checks
   ========================================================================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
             border-color .3s var(--ease-soft);
  will-change:transform;
}
.card:hover{
  transform:translateY(-6px);border-color:rgba(0,150,110,.45);
  box-shadow:0 28px 56px -30px rgba(10,46,35,.42);
}
.card-head{background:var(--fir);color:var(--on-dark);padding:28px 28px 26px;position:relative}
.card.featured .card-head{background:linear-gradient(150deg,var(--fir-mid),var(--fir))}
.card.featured{border-color:var(--emerald);box-shadow:0 0 0 1px var(--emerald)}
.card-head .tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--emerald-lt);margin-bottom:14px;
}
.card.featured .card-head .tag{
  color:var(--fir-deep);background:var(--emerald-lt);padding:5px 12px;border-radius:999px;
}
.card-head h3{color:var(--white)}
.card-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.card-body > p{font-size:.95rem;color:var(--text-mute);margin-bottom:20px}

/* Checklisten im Referenz-Stil */
.checks{list-style:none;margin-bottom:24px;flex:1;display:grid;gap:11px}
.checks li{position:relative;padding-left:30px;font-size:.93rem;line-height:1.5}
.checks li::before{
  content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;border-radius:50%;
  background:rgba(0,150,110,.12);
}
.checks li::after{
  content:"";position:absolute;left:6px;top:.42em;width:7px;height:11px;
  border:solid var(--emerald);border-width:0 2.2px 2.2px 0;transform:rotate(43deg);
}
.dark .checks li::before{background:rgba(63,214,164,.16)}
.dark .checks li::after{border-color:var(--emerald-lt)}

.preis{
  font-size:.86rem;color:var(--text-mute);margin-bottom:18px;margin-top:auto;
  padding-top:18px;border-top:1px solid var(--line);
}
.preis b{color:var(--fir);font-size:1.35rem;font-weight:800;letter-spacing:-.03em}
/* Preiszeile bricht nur zwischen den Positionen um, nie innerhalb eines Preises */
.pteil{white-space:nowrap}
.ptrenn{color:var(--line);padding:0 .1em}
@media(max-width:420px){
  .preis{font-size:.82rem}
  .preis b{font-size:1.25rem}
}
.card .btn{width:100%}
@media(max-width:980px){.cards{grid-template-columns:1fr;gap:20px}}
/* Tablet: einspaltig, aber Zeilenlaenge begrenzen statt auf volle Breite ziehen */
@media(min-width:640px) and (max-width:980px){.cards{max-width:620px;margin-inline:auto}}

/* =========================================================================
   ZEUGNIS · Scrollytelling: ein Papier-Dokument in vier Kapiteln
   Desktop: gepinnt + scrub. Mobile: Kapitel als reveale Karten.
   ========================================================================= */
.scrolly{
  background:
    radial-gradient(60% 70% at 85% 25%, rgba(19,74,57,.85), rgba(10,46,35,0) 70%),
    var(--fir);
}
.scrolly-inner{
  max-width:var(--max);margin:0 auto;padding:0 32px;
  display:flex;justify-content:center;width:100%;
}
@media(max-width:640px){.scrolly-inner{padding:0 20px}}
/* Gepinnter Modus (nur Desktop, per JS aktiviert) */
.scrolly.is-pinned{padding-top:0;padding-bottom:0}
.scrolly.is-pinned .scrolly-inner{min-height:100vh;align-items:center}

/* Traeger fuer Dokument + Siegel: gleiche Box wie .doc, aber ohne clip-path */
.doc-wrap{position:relative;width:min(620px,100%)}

/* Papier-Dokument */
.doc{
  --pad:clamp(30px,4vw,50px);
  position:relative;width:100%;margin:0;
  background:var(--paper);color:var(--text);
  border-radius:var(--radius);padding:var(--pad);
  box-shadow:0 40px 90px -42px rgba(0,0,0,.78);
  background-image:repeating-linear-gradient(0deg, rgba(10,46,35,.02) 0 1px, transparent 1px 27px);
}
/* Guilloché-artige Doppellinie in Gold · das einzige großflächige Gold-Detail */
.doc::before{content:"";position:absolute;inset:10px;border:1px solid rgba(194,149,47,.5);
  border-radius:9px;pointer-events:none}
.doc::after{content:"";position:absolute;inset:14px;border:1px solid rgba(194,149,47,.2);
  border-radius:7px;pointer-events:none}

.doc-kicker{
  font-family:var(--font-serif);font-weight:600;font-size:.82rem;letter-spacing:.22em;
  text-transform:uppercase;text-align:center;color:var(--fir);
  padding-bottom:16px;border-bottom:2px solid var(--fir);position:relative;z-index:1;
}

/* Kapitel-Container: im Flow (mobil) gestapelt, gepinnt überlagernd */
.chapters{position:relative;margin-top:24px}
/* Höhe hugt das höchste Kapitel (259px), damit unten keine tote Fläche bleibt */
.scrolly.is-pinned .chapters{min-height:268px;perspective:1000px}
.chap{position:relative}
.chap + .chap{margin-top:20px;padding-top:22px;border-top:1px dashed var(--line)}
.scrolly.is-pinned .chap{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  transform-style:preserve-3d;
}
.scrolly.is-pinned .chap + .chap{margin-top:0;padding-top:0;border-top:none}

/* Kapitel 1 · Gesamtnote */
.chap-1{text-align:center}
.doc-title{
  font-size:clamp(1.28rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.02em;
  color:var(--fir);text-align:center;line-height:1.16;
}
.grade{
  display:block;text-align:center;margin-top:16px;
  font-size:clamp(3.4rem,9vw,5.4rem);font-weight:800;letter-spacing:-.045em;
  color:var(--fir);line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}

/* Kapitel 2/3 · Zeugnis-Zeilen */
.chap-2 .doc-title{margin-bottom:20px}
.progress-line{
  display:block;height:3px;width:100%;border-radius:2px;margin-bottom:18px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));transform-origin:left center;
}
.dlines{list-style:none}
.dlines li{
  position:relative;padding:12px 2px 12px 32px;font-size:.98rem;line-height:1.4;
  border-bottom:1px dashed var(--line);color:var(--text);
}
.dlines li:last-child{border-bottom:none}
/* Kapitel 1 · Master-Zeile mittig unter der Note, ohne Trennlinie */
.dlines-center{margin-top:18px;display:flex;justify-content:center}
.dlines-center li{border-bottom:none;padding:0 2px 0 30px;font-size:.95rem;font-weight:600}
.dlines-center li::before{top:.62em}
.dlines li::before{
  content:"";position:absolute;left:3px;top:50%;width:8px;height:13px;
  border:solid var(--emerald);border-width:0 2.4px 2.4px 0;
  transform:translateY(-62%) rotate(43deg);
}

/* Kapitel 4 · Abschluss */
.chap-4{text-align:center}
.close-line{
  font-family:var(--font-serif);font-weight:600;line-height:1.3;color:var(--fir);
  font-size:clamp(1.22rem,2.2vw,1.55rem);margin-bottom:24px;
}
.chap-4 .btn{margin:0 auto}

/* Gold-Siegel · bleibt über alle Kapitel sichtbar */
.seal{
  position:absolute;top:-26px;right:-18px;width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-lt), var(--gold) 68%);
  color:var(--fir-deep);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:600;font-size:.74rem;text-align:center;
  line-height:1.25;box-shadow:0 16px 34px -12px rgba(194,149,47,.6);
  transform:rotate(9deg);padding:10px;z-index:4;
}
@media(max-width:900px){
  .seal{right:-8px;top:-22px;width:74px;height:74px;font-size:.66rem}
}

/* =========================================================================
   ÜBER MICH
   ========================================================================= */
.ueber .wrap{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(40px,6vw,84px);align-items:start;
}
.portrait-col{position:sticky;top:100px}
.portrait{margin:0;position:relative;border-radius:var(--radius)}
.portrait img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 32%;border-radius:var(--radius);position:relative;z-index:1;
  box-shadow:0 28px 56px -32px rgba(10,46,35,.5);
}
/* Versetzter Smaragdrahmen statt Gold · Gold bleibt dem Siegel vorbehalten */
.portrait::after{
  content:"";position:absolute;inset:0;border:1.5px solid var(--emerald);
  border-radius:var(--radius);transform:translate(16px,16px);pointer-events:none;z-index:0;
}
.body-lead{margin-top:26px;font-size:1.1rem;line-height:1.6}
.body-copy{margin-top:16px;color:var(--text-mute)}
/* =========================================================================
   MEIN WEG · abgesetzter Block in der Ueber-mich-Sektion
   Heller Karten-Hintergrund plus schmale Smaragd-Kante links.
   ========================================================================= */
.mein-weg{
  margin-top:34px;padding:clamp(22px,2.6vw,32px);
  background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--emerald);
  border-radius:var(--radius);
}
.weg-titel{
  font-family:var(--font-serif);font-weight:600;
  font-size:clamp(1.18rem,1.9vw,1.42rem);line-height:1.25;
  letter-spacing:-.01em;color:var(--text);margin-bottom:14px;
}
.mein-weg p{font-size:.95rem;line-height:1.7;color:var(--text-mute)}
.mein-weg p + p{margin-top:12px}

/* ---- Zeitleiste: Desktop horizontal, mobil gestapelt ---- */
.weg-timeline{
  list-style:none;margin-top:26px;padding-top:4px;
  display:grid;grid-template-columns:repeat(6,1fr);
}
.weg-timeline li{
  position:relative;padding:26px 10px 0;text-align:center;
  font-size:.8rem;line-height:1.4;color:var(--text);
  text-wrap:balance;
}
/* Verbindungslinie, laeuft hinter den Punkten durch */
.weg-timeline li::before{
  content:"";position:absolute;top:9px;left:0;right:0;height:2px;
  background:var(--line);
}
.weg-timeline li:first-child::before{left:50%}
.weg-timeline li:last-child::before{right:50%}
/* Punkt: fuer alle Stationen identisch, keine Hervorhebung einzelner Etappen */
.weg-timeline li::after{
  content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:999px;
  background:var(--white);border:2.5px solid var(--emerald);
}
@media(max-width:760px){
  .weg-timeline{grid-template-columns:1fr;margin-top:22px}
  .weg-timeline li{
    text-align:left;padding:0 0 20px 30px;font-size:.86rem;
  }
  .weg-timeline li:last-child{padding-bottom:0}
  /* Erste und letzte Station mitnennen: sonst gewinnen die Desktop-Regeln
     .weg-timeline li:first-child/:last-child::before ueber die Spezifitaet. */
  .weg-timeline li::before,
  .weg-timeline li:first-child::before,
  .weg-timeline li:last-child::before{
    top:0;bottom:0;left:6px;right:auto;width:2px;height:auto;
  }
  .weg-timeline li:first-child::before{top:10px}
  .weg-timeline li:last-child::before{bottom:auto;height:10px}
  .weg-timeline li::after{top:3px;left:0;transform:none}
}

.stationen{list-style:none;margin-top:40px;border-top:2px solid var(--fir)}
.stationen li{
  display:grid;grid-template-columns:150px 1fr;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--line);font-size:.95rem;
  transition:padding-left .3s var(--ease-out);
}
.stationen li:hover{padding-left:8px}
.stationen .wo{font-weight:800;color:var(--emerald-cta);letter-spacing:-.02em;font-size:1.05rem}
.shots{grid-column:2;display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;padding-bottom:4px}
.shot{
  margin:0;width:132px;flex:none;background:var(--white);padding:8px 8px 22px;
  border:1px solid var(--line);box-shadow:0 14px 28px -16px rgba(10,46,35,.45);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  will-change:transform;
}
.shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.shot.s-a{transform:rotate(-2.5deg)}
.shot.s-b{transform:rotate(2deg)}
.shot.s-c{transform:rotate(-1.5deg)}
.shot:hover{transform:rotate(0) translateY(-4px) scale(1.03);z-index:2;
  box-shadow:0 22px 40px -18px rgba(10,46,35,.55)}
@media(max-width:900px){
  .ueber .wrap{grid-template-columns:1fr}
  .portrait-col{position:static;max-width:380px}
  .portrait::after{transform:translate(12px,12px)}
  .stationen li{grid-template-columns:1fr;gap:6px}
  .shots{grid-column:1}
  .shot{width:min(42vw,150px)}
}

/* =========================================================================
   ABLAUF · drei Schritte, große Smaragd-Ziffern
   ========================================================================= */
#ablauf .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,48px)}
.step{position:relative;padding-top:22px;border-top:2px solid var(--fir-line)}
.step-num{
  display:block;font-size:clamp(2.6rem,4.4vw,3.6rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;color:var(--emerald-lt);margin-bottom:16px;
}
.step h3{color:var(--white);margin-bottom:10px}
.step p{color:var(--on-dark-mute);font-size:.95rem}
@media(max-width:900px){#ablauf .steps{grid-template-columns:1fr;gap:32px}}

/* =========================================================================
   STIMMEN
   ========================================================================= */
.stimmen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stimme{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;margin:0;position:relative;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
             border-color .3s var(--ease-soft);
}
.stimme:hover{transform:translateY(-4px);border-color:rgba(0,150,110,.45);
  box-shadow:0 24px 46px -28px rgba(10,46,35,.4)}
/* Smaragd-Tag über jedem Zitat */
.stimme-tag{
  align-self:flex-start;margin-bottom:16px;
  padding:5px 12px;border-radius:999px;
  background:rgba(0,150,110,.12);color:var(--emerald-cta);
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.stimme blockquote{
  font-size:.98rem;line-height:1.55;margin:0 0 18px;font-weight:500;flex:1;
  text-wrap:pretty;
}
.stimme .wer{
  font-size:.72rem;color:var(--text-mute);font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;line-height:1.4;
  padding-top:16px;border-top:1px solid var(--line);
}
@media(max-width:1080px){.stimmen-grid{grid-template-columns:repeat(2,1fr)}}
/* Erst unter 640px einspaltig: auf Tablets bleiben zwei Spalten,
   sonst werden die Zitatkarten unangenehm breit. */
@media(max-width:639px){.stimmen-grid{grid-template-columns:1fr}}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-list{border-top:2px solid var(--fir);max-width:56rem}
details{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;list-style:none;font-weight:700;font-size:1.08rem;
  letter-spacing:-.015em;padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  transition:color .2s var(--ease-soft);
}
summary:hover{color:var(--emerald)}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";flex:none;width:15px;height:15px;
  background:
    linear-gradient(var(--emerald),var(--emerald)) center/100% 2.2px no-repeat,
    linear-gradient(var(--emerald),var(--emerald)) center/2.2px 100% no-repeat;
  transition:transform .3s var(--ease-out);
}
details[open] summary::after{transform:rotate(135deg)}
details p{padding:0 0 24px;color:var(--text-mute);max-width:62ch}

/* =========================================================================
   CTA + Footer
   ========================================================================= */
.cta-final{text-align:center;position:relative;overflow:hidden}
/* Regensburg-Motiv als atmosphärischer Hintergrund, stark abgedunkelt */
.cta-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-media img{
  position:absolute;top:-9%;left:0;width:100%;height:118%;
  object-fit:cover;object-position:50% 55%;will-change:transform;
}
/* Tannengrün-Overlay ~80 bis 90 %: Text/Button bleiben WCAG-konform lesbar */
.cta-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,32,24,.9) 0%, rgba(10,46,35,.82) 45%, rgba(6,32,24,.93) 100%),
    radial-gradient(80% 90% at 50% 45%, rgba(10,46,35,.55), rgba(6,32,24,.9) 100%);
}
.cta-final .wrap{position:relative;z-index:2}
.cta-final .kicker{justify-content:center}
.cta-final h2{max-width:17ch;margin:0 auto}
.cta-final .sub{max-width:48ch;margin:22px auto 26px;color:var(--on-dark-mute);font-size:1.05rem}
/* Mission-Satz direkt über dem Button */
.cta-final .mission{
  max-width:44ch;margin:0 auto 30px;
  font-family:var(--font-serif);font-weight:600;line-height:1.35;
  font-size:clamp(1.08rem,1.9vw,1.35rem);color:var(--emerald-lt);text-wrap:balance;
}
/* Button-Paar: WhatsApp (primaer) + E-Mail (Ghost).
   Umbricht auf schmalen Screens sauber untereinander. */
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
@media(max-width:560px){
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%}
}
/* WhatsApp-Glyph als Inline-SVG, einfarbig in Buttonfarbe (kein externer Request) */
.btn .ico-wa{width:1.15em;height:1.15em;flex:none;fill:currentColor}

.cta-final .hero-note{margin-top:18px}
.cta-final .hero-note + .hero-note{margin-top:6px}

/* Zwei-Klick-Buchung: erst sichtbar, wenn main.js sie freischaltet
   (CALENDLY_ENABLED + URL gesetzt). Ohne JS bleibt beides aus. */
.cta-book,
.calendly-note{display:none}
.cta-book.is-on{display:flex;margin-top:14px}
.calendly-note.is-on{display:block;margin-top:10px}
.cta-book .btn[aria-busy="true"]{opacity:.7;cursor:progress}

/* Unten zusaetzlich um den Home-Indicator herum Platz lassen */
footer{
  background:var(--fir-deep);color:var(--on-dark-mute);font-size:.85rem;
  padding:44px 0;padding-bottom:max(44px, env(safe-area-inset-bottom));
}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:#D6E4DD;text-decoration:none;transition:color .2s var(--ease-soft)}
footer a:hover{color:var(--emerald-lt)}

/* =========================================================================
   404 · Fehlerseite
   ========================================================================= */
.fehler{text-align:center;min-height:min(72vh,680px);display:flex;align-items:center}
.fehler .wrap{max-width:52rem}
.fehler-marke{width:clamp(84px,11vw,120px);height:auto;margin:0 auto 28px;display:block;opacity:.9}
.fehler .kicker{justify-content:center}
.fehler h1{font-size:clamp(1.9rem,4.4vw,3.4rem);margin-bottom:20px;text-wrap:balance}
.fehler .sub{
  color:var(--on-dark-mute);font-size:1.05rem;max-width:46ch;margin:0 auto 34px;
}

/* =========================================================================
   TOUCH-ZIELE · Trefferflaechen auf mind. 44px ziehen.
   Bewusst ueber Pseudo-Elemente: veraendert die Darstellung an keiner Stelle,
   vergroessert nur die tippbare Flaeche (wichtig auf Smartphone/Tablet).
   ========================================================================= */
footer a{position:relative}
footer a::before{content:"";position:absolute;inset:-14px -8px}

/* Auf dem Smartphone stehen die Rechtslinks in zwei Zeilen. Ohne zusaetzlichen
   Zeilenabstand ueberlappen sich die vergroesserten Trefferflaechen und man
   tippt den Link der Nachbarzeile. Abstand > Trefferhoehe loest das sauber. */
@media(max-width:640px){
  /* Zeilenabstand muss groesser sein als die Trefferflaeche, sonst liegen die
     Flaechen zweier Zeilen uebereinander und man tippt den Link der Nachbar-
     zeile. 13,6px x 3,6 = 49px Zeilenbox gegen 45px Trefferhoehe. */
  footer .wrap span:last-child{line-height:3.6}
  footer a::before{inset:-14px -8px}
}

.nav-links a:not(.btn)::before{content:"";position:absolute;inset:-12px -8px}

/* Marke: Nav ist 72px hoch, die Mindestgroesse aendert dort nichts */
.brand{min-height:44px;min-width:44px}

/* =========================================================================
   RECHTSTEXTE · Impressum / Datenschutz (helle Sektion)
   ========================================================================= */
.legal{padding-top:clamp(48px,7vw,90px)}
.legal .wrap{max-width:60rem}
.legal h1{
  font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;margin-bottom:8px;color:var(--fir);
}
.legal .stand{color:var(--text-mute);font-size:.9rem;margin-bottom:clamp(28px,4vw,44px)}
.legal h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem);margin:clamp(32px,4vw,48px) 0 12px;
  padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line);color:var(--fir);
}
.legal h2:first-of-type{border-top:none;padding-top:0}
.legal h3{margin:24px 0 6px;font-size:1.05rem}
.legal p{margin-bottom:14px;color:var(--text);max-width:70ch}
.legal p.muted{color:var(--text-mute);font-size:.95rem}
.legal .form-muster{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper-2);padding:22px 24px;margin:4px 0 20px;
}
.legal .form-muster p{margin-bottom:12px;max-width:none;overflow-wrap:anywhere}
.legal .form-muster p:last-child{margin-bottom:0}
.legal ul{list-style:none;margin:0 0 16px;max-width:70ch}
.legal ul li{position:relative;padding:6px 0 6px 26px;color:var(--text)}
.legal ul li::before{
  content:"";position:absolute;left:2px;top:.9em;width:7px;height:11px;
  border:solid var(--emerald);border-width:0 2.2px 2.2px 0;transform:rotate(43deg);
}
.legal a{color:var(--emerald-cta);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--fir)}
.legal .backlink{
  display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(32px,4vw,48px);
  font-weight:700;text-decoration:none;color:var(--emerald-cta);
}
.legal .backlink:hover{color:var(--fir)}
/* Eigenstaendige Links in den Rechtstexten: groessere Trefferflaeche.
   Fliesstext-Links innerhalb von Saetzen bleiben unangetastet (WCAG 2.5.8
   nimmt Inline-Links im Satz ausdruecklich aus, Padding wuerde den Zeilenfall stoeren). */
.legal .backlink{position:relative}
.legal .backlink::before{content:"";position:absolute;inset:-10px -8px}
/* Telefon und E-Mail stehen in den Adressbloecken per <br> direkt untereinander
   (Zeilenbox 27px). Eine Trefferflaeche von 45px griff dort ueber die Nachbar-
   zeile und man waehlte die Nummer statt die Mailadresse. Die Flaeche bleibt
   deshalb knapp unter der Zeilenbox: 31px, sauber getrennt und weiterhin klar
   ueber den 24px, die WCAG 2.5.8 fuer Inline-Links im Satz verlangt. */
.legal p a[href^="tel:"],.legal p a[href^="mailto:"]{position:relative}
.legal p a[href^="tel:"]::before,.legal p a[href^="mailto:"]::before{
  content:"";position:absolute;inset:-5px -8px;
}

/* =========================================================================
   RISIKOFREI-ZEILE auf den Angebots-Karten · dezent unter der Preiszeile
   ========================================================================= */
.risiko{
  position:relative;padding-left:24px;margin-bottom:20px;
  font-size:.85rem;line-height:1.45;color:var(--text-mute);
}
/* Smaragd-Haekchen, gezeichnet wie in .checks (kein Icon-Request) */
.risiko::before{
  content:"";position:absolute;left:4px;top:.35em;width:6px;height:10px;
  border:solid var(--emerald-cta);border-width:0 2px 2px 0;transform:rotate(43deg);
}

/* =========================================================================
   EMPFEHLUNGSZEILE unter den Angebots-Karten
   ========================================================================= */
.empfehlung{
  max-width:62ch;margin:clamp(32px,4vw,48px) auto 0;
  text-align:center;font-size:.98rem;line-height:1.6;color:var(--text-mute);
  border-top:1px solid var(--line);padding-top:clamp(24px,3vw,32px);
}

/* =========================================================================
   VIDEO · „In 60 Sekunden" (helle, schmale Sektion)
   Fester 16:9-Rahmen reserviert den Platz → kein Layout-Shift beim Einsetzen.
   ========================================================================= */
.video-section{padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px)}
.video-section .section-head{margin-left:auto;margin-right:auto;text-align:center;max-width:44ch}
.video-section .kicker{justify-content:center}
.video-frame{
  position:relative;max-width:720px;margin:0 auto;
  aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);
}
.video-frame .video-el{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* Platzhalter: sehr helles Grau-Gruen, klar als Platzhalter lesbar */
.video-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:0 22px;
  background:linear-gradient(160deg,#EFF4F1 0%,#E6EDE9 100%);
}
.play-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:999px;flex:none;
  background:var(--emerald-cta);color:#fff;
  box-shadow:0 12px 28px -14px rgba(0,122,89,.8);
}
.play-badge svg{fill:currentColor;margin-left:3px}
.video-hint{
  font-size:.88rem;font-weight:600;letter-spacing:.02em;color:var(--text-mute);
  text-align:center;max-width:36ch;text-wrap:balance;
}
/* Ton-Umschalter, erst sichtbar wenn das Video aktiv ist */
.video-sound{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);background:rgba(10,46,35,.62);color:#fff;
  transition:background .2s var(--ease-soft),border-color .2s var(--ease-soft);
}
.video-sound:hover{background:rgba(10,46,35,.85);border-color:var(--emerald-lt)}
.video-sound svg{fill:currentColor;pointer-events:none}
@media(max-width:640px){
  .video-frame{border-radius:var(--radius-sm)}
  .play-badge{width:54px;height:54px}
}

/* =========================================================================
   STIPENDIEN-CHECK · /stipendien-check.html
   Laeuft komplett im Browser. Uebergaenge nur ueber transform/opacity.
   ========================================================================= */
.check-section{padding-top:clamp(48px,6vw,80px)}
.check{max-width:760px;margin:0 auto}

/* Fortschritt */
.check-kopf{display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,4vw,40px)}
.check-balken{
  flex:1;height:6px;border-radius:999px;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);
}
.check-balken span{
  display:block;height:100%;width:0;border-radius:999px;
  background:var(--emerald-cta);transition:width .45s var(--ease-out);
}
.check-zaehler{
  flex:none;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-mute);font-variant-numeric:tabular-nums;
}

/* Schritt-Uebergang */
.check-step{opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.check-step.is-in{opacity:1;transform:none}

.check-frage{
  font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.025em;
  color:var(--fir);margin-bottom:clamp(22px,3vw,30px);text-wrap:balance;
}

/* Antwort-Buttons */
.check-optionen{display:grid;gap:12px}
.check-opt{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:16px 20px;min-height:56px;border-radius:var(--radius);
  border:1.5px solid var(--line);background:var(--white);
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--text);
  transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft),
             transform .18s var(--ease-out);
}
.check-opt:hover{border-color:var(--emerald);background:#F4FAF7;transform:translateY(-2px)}
.check-opt[aria-pressed="true"]{border-color:var(--emerald-cta);background:#F0F8F5}

.check-fuss{margin-top:26px}
.check-link{
  background:none;border:none;cursor:pointer;padding:10px 4px;
  font-family:inherit;font-size:.9rem;font-weight:700;color:var(--emerald-cta);
  text-decoration:underline;text-underline-offset:3px;min-height:44px;
}
.check-link:hover{color:var(--fir)}

/* ---- Ergebnis ---- */
.check-ergebnis-titel{
  font-size:clamp(1.5rem,3vw,2.2rem);color:var(--fir);
  margin-bottom:clamp(22px,3vw,30px);
}
.weg-gitter{display:grid;gap:16px}
.weg-karte{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px 24px 68px;
}
.weg-rang{
  position:absolute;left:22px;top:24px;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;flex:none;
  background:var(--emerald-cta);color:#fff;font-weight:800;font-size:.95rem;
}
/* Rang zusaetzlich fuer Screenreader, visuell ausgeblendet */
.weg-rang-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.weg-name{font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--fir);margin-bottom:8px}
.weg-geld{font-size:.95rem;font-weight:700;color:var(--emerald-cta);margin-bottom:10px}
.weg-warum{font-size:.95rem;line-height:1.6;color:var(--text-mute)}

/* Ehrliches Ergebnis */
.ehrlich-karte{
  border-left:3px solid var(--gold);background:var(--paper-2);
  border-radius:var(--radius-sm);padding:24px 26px;margin-bottom:22px;
}
.ehrlich-titel{font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--fir);margin-bottom:12px}
.ehrlich-text{font-size:.98rem;line-height:1.65;color:var(--text)}

.check-fazit{
  margin:clamp(28px,4vw,38px) 0 0;padding-top:clamp(22px,3vw,28px);
  border-top:1px solid var(--line);
  font-family:var(--font-serif);font-weight:600;
  font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.4;color:var(--fir);
}
.check-cta{justify-content:flex-start;margin-top:22px}
.check-neben{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px}
.check-klein{margin-top:18px;font-size:.8rem;line-height:1.55;color:var(--text-mute)}

.check-noscript{
  max-width:760px;margin:0 auto;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;
}
.check-noscript h2{font-size:1.3rem;color:var(--fir);margin-bottom:10px}
.check-noscript p{color:var(--text-mute);margin-bottom:18px}

@media(max-width:640px){
  .weg-karte{padding:22px 20px 22px 20px}
  .weg-rang{position:static;margin-bottom:12px}
  .check-cta{flex-direction:column;align-items:stretch}
  .check-cta .btn{width:100%}
}
/* Der Werke-Name listet 10 Stiftungen auf und wird auf kleinen iPhones sonst
   zu einem sehr hohen Fettblock. Etwas kleiner gesetzt bleibt er ruhig. */
@media(max-width:480px){
  .weg-name{font-size:1.02rem;line-height:1.3}
  .weg-geld{font-size:.9rem}
}
@media (prefers-reduced-motion: reduce){
  .check-step{opacity:1!important;transform:none!important;transition:none!important}
  .check-balken span{transition:none}
  .check-opt{transition:none}
}

/* =========================================================================
   ZIEL-SCHNITT-RECHNER · /schnitt-rechner.html
   ========================================================================= */
.tabs{display:flex;gap:8px;margin-bottom:clamp(24px,3vw,32px)}
.tab{
  flex:1;cursor:pointer;padding:14px 18px;min-height:48px;
  border:1.5px solid var(--line);border-radius:999px;background:var(--white);
  font-family:inherit;font-size:.95rem;font-weight:700;color:var(--text-mute);
  transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft),color .2s var(--ease-soft);
}
.tab:hover{border-color:var(--emerald)}
.tab[aria-selected="true"]{background:var(--fir);border-color:var(--fir);color:var(--white)}

.feld-gitter{display:grid;gap:16px}
@media(min-width:720px){.feld-gitter{grid-template-columns:repeat(3,1fr)}}
.feld-ziel{margin-top:20px}
@media(min-width:720px){.feld-ziel{grid-template-columns:1fr;max-width:320px}}

/* Laengere Labels brechen um. Die Felder trotzdem auf einer Linie halten,
   indem die Spalten gleich hoch sind und das Eingabefeld unten sitzt. */
.feld-block{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.feld-label{
  display:block;margin-bottom:7px;
  font-size:.85rem;font-weight:700;letter-spacing:-.01em;color:var(--fir);
}
/* 17px Schriftgroesse: darunter zoomt iOS Safari beim Fokussieren hinein */
.feld{
  width:100%;padding:14px 16px;min-height:52px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);color:var(--text);
  font-family:inherit;font-size:1rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft);
}
.feld::placeholder{color:#98A9A1;font-weight:500}
.feld:focus{outline:none;border-color:var(--emerald-cta);box-shadow:0 0 0 3px rgba(0,122,89,.15)}
.feld-hilfe{margin-top:14px;font-size:.86rem;line-height:1.55;color:var(--text-mute)}
.feld-titel{font-size:1.1rem;color:var(--fir);margin-bottom:14px}

/* Notenzeilen im Detail-Modus */
.noten-box{display:grid;gap:10px;margin-bottom:14px}
.noten-zeile{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.noten-feld{display:block}
.noten-label{
  display:block;margin-bottom:5px;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-mute);
}
.noten-weg{
  flex:none;width:48px;height:52px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--white);
  font-family:inherit;font-size:1.3rem;line-height:1;color:var(--text-mute);
  transition:border-color .2s var(--ease-soft),color .2s var(--ease-soft);
}
.noten-weg:hover{border-color:#C25B4A;color:#C25B4A}

.live-schnitt{
  margin:6px 0 22px;padding:14px 18px;border-radius:var(--radius-sm);
  background:var(--paper-2);font-size:.95rem;color:var(--text);
}
.live-schnitt b{font-size:1.15rem;color:var(--fir);font-variant-numeric:tabular-nums}
.live-ects{color:var(--text-mute);margin-left:6px;font-size:.88rem}

.feld-fehler{
  margin-top:18px;padding:14px 18px;border-radius:var(--radius-sm);
  background:#FBF0EE;border-left:3px solid #C25B4A;
  font-size:.93rem;line-height:1.55;color:#7A3227;
}
.rechner-los{margin-top:24px}

/* Ergebnis als Zeugnis-Dokument, angelehnt an den Leistungsnachweis */
.rechner-ergebnis{
  margin-top:clamp(32px,4vw,44px);
  opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.rechner-ergebnis.is-in{opacity:1;transform:none}
.zeugnis{
  position:relative;background:var(--paper);border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);text-align:center;
  border:1px solid var(--line);
  box-shadow:0 30px 70px -46px rgba(0,0,0,.5);
  background-image:repeating-linear-gradient(0deg, rgba(10,46,35,.02) 0 1px, transparent 1px 27px);
}
/* Feine Goldlinie wie beim Zeugnis, das einzige Gold-Detail hier */
.zeugnis::before{
  content:"";position:absolute;inset:10px;border:1px solid rgba(194,149,47,.45);
  border-radius:9px;pointer-events:none;
}
.zeugnis > *{position:relative;z-index:1}
.zeugnis-kicker{
  font-family:var(--font-serif);font-weight:600;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fir);
  padding-bottom:14px;border-bottom:2px solid var(--fir);margin-bottom:22px;
}
.zeugnis-titel{
  font-size:clamp(1.3rem,2.6vw,1.85rem);letter-spacing:-.025em;
  color:var(--fir);text-wrap:balance;margin-bottom:18px;
}
.zeugnis-wert{
  display:block;font-size:clamp(3.2rem,8.5vw,5rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--fir);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.zeugnis-label{
  margin-top:10px;font-size:.82rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mute);
}
.zeugnis-text{
  margin:22px auto 0;max-width:56ch;text-align:left;
  font-size:.98rem;line-height:1.65;color:var(--text);
}
.rechner-quer{
  margin-top:22px;padding:16px 20px;border-radius:var(--radius-sm);
  background:var(--paper-2);font-size:.93rem;line-height:1.6;color:var(--text-mute);
}
.rechner-quer a{color:var(--emerald-cta);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.rechner-quer a:hover{color:var(--fir)}

@media(max-width:520px){
  .noten-zeile{grid-template-columns:1fr 1fr auto;gap:8px}
  .zeugnis-text{text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .rechner-ergebnis{opacity:1!important;transform:none!important;transition:none!important}
  .tab,.feld,.noten-weg{transition:none}
}

/* =========================================================================
   VORLAGEN-SEITE · /vorlagen.html
   ========================================================================= */
.vorlagen-grid{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.vorlagen-grid{grid-template-columns:1fr}}
.vorlage-karte{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 28px;
}
.vorlage-tag{
  align-self:flex-start;margin-bottom:14px;padding:5px 12px;border-radius:999px;
  background:var(--paper-2);color:var(--text-mute);
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.vorlage-karte h3{color:var(--fir);margin-bottom:10px}
.vorlage-karte p{font-size:.95rem;line-height:1.6;color:var(--text-mute);margin-bottom:22px;flex:1}
/* Zwei Stufen: PDF direkt, Word auf Zuruf */
.vorlage-aktionen{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.vorlage-aktionen .btn{width:100%}
@media(min-width:520px){
  .vorlage-aktionen{flex-direction:row;flex-wrap:wrap;align-items:center}
  .vorlage-aktionen .btn{width:auto}
}
.vorlage-btn{align-self:flex-start}
/* Deaktiviert: klar erkennbar, kein Hover, nicht fokussierbar */
.vorlage-btn:disabled{
  opacity:1;cursor:default;pointer-events:none;
  background:var(--paper-2);border-color:var(--line);color:var(--text-mute);
}
.vorlagen-klein{margin-top:clamp(26px,3vw,34px);font-size:.85rem;color:var(--text-mute)}

/* ---------------- Vorher / Nachher ---------------- */
.vgl{position:relative}
/* Welche Bedienung sichtbar ist, entscheidet allein die Modus-Klasse auf .vgl.
   Frueher lief das ueber das hidden-Attribut, das hier aber von display:flex
   ueberstimmt wurde: die Tabs blieben am Desktop klickbar und haben eine Seite
   dauerhaft ausgeblendet, die der Slider nicht zurueckholen konnte. */
.vgl-tabs{display:none;gap:8px;margin-bottom:20px}
.vgl.is-tabs .vgl-tabs{display:flex}

/* Slider: immer beide Seiten, Vergleich nur ueber clip-path */
.vgl.is-slider .vgl-seite{display:block}
/* Tabs: genau die aktive Seite, gesteuert ueber data-aktiv */
.vgl.is-tabs .vgl-seite{display:none}
.vgl.is-tabs[data-aktiv="vorher"] .vgl-seite[data-seite="vorher"]{display:block}
.vgl.is-tabs[data-aktiv="nachher"] .vgl-seite[data-seite="nachher"]{display:block}
/* Griff und Regler existieren ausschliesslich im Slider-Modus */
.vgl:not(.is-slider) .vgl-range,
.vgl:not(.is-slider) .vgl-trenner{display:none}
.vgl-buehne{position:relative;--pos:50%}

/* Slider: beide Seiten deckungsgleich in derselben Rasterzelle. Dadurch
   bestimmt die laengere Seite die Hoehe und es bleibt unten kein Leerraum,
   wie es eine feste Seitenproportion erzwingen wuerde. */
.vgl.is-slider .vgl-buehne{
  max-width:760px;margin:0 auto;display:grid;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 70px -46px rgba(0,0,0,.5);
}
.vgl.is-slider .vgl-seite{grid-area:1/1;position:relative}
.vgl.is-slider .vgl-nachher{clip-path:inset(0 0 0 var(--pos))}
.vgl.is-slider .vgl-vorher{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}

.vgl-trenner{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
  background:var(--emerald-lt);z-index:3;pointer-events:none;
  transform:translateX(-1px);
}
.vgl-griff{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:999px;
  background:var(--emerald-cta);border:2px solid #fff;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
}
/* Zwei Pfeilspitzen im Griff */
.vgl-griff::before,.vgl-griff::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;
  border:solid #fff;border-width:2px 2px 0 0;
}
.vgl-griff::before{left:11px;transform:translateY(-50%) rotate(-135deg)}
.vgl-griff::after{right:11px;transform:translateY(-50%) rotate(45deg)}

/* Unsichtbares, aber bedienbares Range-Element ueber der Buehne */
.vgl-range{
  position:absolute;inset:0;width:100%;height:100%;z-index:4;
  margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none;
  background:transparent;
}
.vgl-range:focus-visible ~ .vgl-trenner .vgl-griff{
  outline:3px solid var(--emerald-lt);outline-offset:3px;
}
.vgl-range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%}
.vgl-range::-moz-range-thumb{width:56px;height:100%;border:0;background:transparent}

/* Tabs-Modus (schmale Screens): eine Seite am Stueck, volle Lesbarkeit */
.vgl.is-tabs .vgl-buehne{max-width:none}
.vgl.is-tabs .vgl-seite{position:static}
.vgl.is-tabs .vgl-trenner,
.vgl.is-tabs .vgl-range{display:none}
.vgl.is-tabs .cv{border-radius:var(--radius)}

/* Je Seite eine eigene Ecke: zwei mittige Beschriftungen wuerden sich am
   Trenner ueberlagern und unlesbar ineinanderlaufen. */
.vgl-label{
  position:absolute;bottom:14px;z-index:2;
  padding:8px 15px;border-radius:999px;white-space:nowrap;
  background:rgba(10,46,35,.9);color:var(--on-dark);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.vgl-vorher .vgl-label{left:14px}
.vgl-nachher .vgl-label{right:14px}
.vgl.is-tabs .vgl-label{
  position:static;display:block;text-align:center;white-space:normal;
  border-radius:0 0 var(--radius) var(--radius);padding:11px 14px;
}

.vgl-hinweis{
  max-width:64ch;margin:clamp(22px,3vw,30px) auto 0;text-align:center;
  font-size:.93rem;line-height:1.6;color:var(--text-mute);
}
.vgl-hinweis a{color:var(--emerald-cta);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.vgl-hinweis a:hover{color:var(--fir)}

/* ---------------- Schematische Lebenslaeufe ---------------- */
.cv{
  height:100%;overflow:hidden;background:var(--white);color:var(--text);
  padding:clamp(18px,2.6vw,30px);
  font-size:clamp(.66rem,1.05vw,.8rem);line-height:1.5;
}
.vgl.is-tabs .cv{
  height:auto;font-size:.8rem;border:1px solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
}
.cv-kopf{border-bottom:2px solid var(--fir);padding-bottom:12px;margin-bottom:14px}
.cv-name{font-size:1.7em;font-weight:800;letter-spacing:-.02em;color:var(--fir);line-height:1.1}
.cv-rolle{font-weight:700;color:var(--emerald-cta);margin:3px 0 6px}
.cv-zeile{color:var(--text-mute);margin-bottom:2px}
.cv-h{
  margin:14px 0 7px;font-weight:800;font-size:.92em;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fir);
  border-bottom:1px solid var(--line);padding-bottom:3px;
}
.cv-eintrag{display:grid;grid-template-columns:9em 1fr;gap:10px;margin-bottom:9px}
.cv-datum{color:var(--text-mute);font-variant-numeric:tabular-nums}
.cv-titel{font-weight:700;color:var(--text)}
.cv-detail{color:var(--text-mute)}
.cv-liste{list-style:none;margin-top:3px}
.cv-liste li{position:relative;padding-left:11px;color:var(--text-mute);margin-bottom:2px}
.cv-liste li::before{
  content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
  border-radius:50%;background:var(--emerald);
}

/* „Vorher": bewusst uneinheitlich gesetzt, das ist der Punkt der Gegenueberstellung */
.cv-kopf-alt{display:flex;gap:14px;align-items:flex-start;border-bottom-width:1px;border-color:var(--line)}
.cv-foto{
  flex:none;width:4.6em;height:6em;display:flex;align-items:center;justify-content:center;
  /* Grau genug, dass es als Platzhalterkasten liest, aber mit 4,6:1 lesbar.
     Das vorherige #98A9A1 kam auf 2,15:1 und war der einzige WCAG-Verstoss
     der Seite. */
  background:var(--paper-2);border:1px dashed #B9C4BE;color:#5F6F68;
  font-size:.82em;transform:rotate(-2.5deg);
}
.cv-name-alt{font-family:var(--font-serif);font-size:1.5em;font-weight:600;letter-spacing:0}
.cv-h-alt{
  font-family:var(--font-serif);text-transform:none;letter-spacing:0;
  font-size:1.06em;font-weight:600;border-bottom:none;margin:12px 0 3px;
}
.cv-alt .cv-liste li::before{background:#B9C4BE}

@media (prefers-reduced-motion: reduce){
  .vgl-range,.vorlage-btn{transition:none}
}

/* =========================================================================
   OFFENE SPRECHSTUNDE · index.html
   ========================================================================= */
.sprechstunde .wrap{max-width:64rem}
.sprechstunde-box{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);
}
.sprechstunde-box h2{color:var(--fir);margin-bottom:14px}
.sprechstunde-text{max-width:58ch;color:var(--text-mute);font-size:1.02rem;line-height:1.65}
.sprechstunde-termin{
  display:inline-block;margin:22px 0 24px;padding:11px 18px;border-radius:var(--radius-sm);
  background:var(--paper-2);border-left:3px solid var(--gold);
  font-size:.92rem;font-weight:700;color:var(--fir);
}
.sprechstunde-klein{margin-top:16px;font-size:.85rem;color:var(--text-mute)}

/* Einstieg aus der Angebots-Karte */
.card-link{
  position:relative;display:inline-block;margin-bottom:14px;font-size:.9rem;font-weight:700;
  color:var(--emerald-cta);text-decoration:underline;text-underline-offset:3px;
}
.card-link:hover{color:var(--fir)}
/* Eigenstaendiger CTA, also auf 44px Trefferflaeche ziehen (Darstellung bleibt gleich) */
.card-link::before{content:"";position:absolute;inset:-12px -8px}

/* =========================================================================
   B2B-SEITE · /unternehmen.html (Sie-Ansprache, kompakter Hero ohne Bild)
   ========================================================================= */
.page-hero{
  padding:clamp(64px,8vw,110px) 0 clamp(56px,7vw,90px);
}
.page-hero h1{max-width:20ch}
.page-hero h1 em{font-style:normal;color:var(--emerald-lt)}
.page-hero .lede{
  margin-top:26px;font-size:clamp(1.05rem,1.35vw,1.22rem);
  color:var(--on-dark-mute);max-width:60ch;
}

/* Fliesstext-Block „Warum einskommaeins" */
.b2b-text{max-width:68ch}
.b2b-text p{margin-bottom:18px;font-size:1.05rem}
.b2b-text p:last-child{margin-bottom:0}

/* Checkmark-Liste als eigenstaendige Sektion: etwas groesser als in den Karten */
.checks-lg{max-width:70ch;gap:20px}
.checks-lg li{font-size:1.02rem;line-height:1.6;padding-left:34px}

/* Vertrauens-Absatz: kompakt, Gold nur als feine Linie */
.b2b-trust{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.trust-note{
  max-width:70ch;color:var(--text-mute);font-size:1rem;
  border-left:2px solid var(--gold);padding:6px 0 6px 22px;
}

/* =========================================================================
   Animationen · Initialzustände nur bei .anim-ready (JS da + Bewegung erlaubt)
   ========================================================================= */
.anim-ready [data-hero]{opacity:0}
.anim-ready .reveal{opacity:0}
.anim-ready .proof-item{opacity:0}
.anim-ready #angebote .card{opacity:0}
.anim-ready #ablauf .step{opacity:0}
.anim-ready .scrolly .chap{opacity:0}
.anim-ready .shots{opacity:0}
.anim-ready .portrait img{clip-path:inset(0 0 100% 0)}
.anim-ready .hero-watermark{opacity:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .anim-ready [data-hero],
  .anim-ready .reveal,
  .anim-ready .proof-item,
  .anim-ready #angebote .card,
  .anim-ready #ablauf .step,
  .anim-ready .scrolly .chap,
  .anim-ready .shots{opacity:1!important}
  .anim-ready .hero-watermark{opacity:.9!important}
  @media(max-width:900px){.anim-ready .hero-watermark{opacity:.6!important}}
  .anim-ready .portrait img{clip-path:none!important}
  /* Kapitel bleiben untereinander statisch sichtbar; Fortschrittslinie voll */
  .anim-ready .progress-line{transform:none!important}
}

/* =========================================================================
   LAYOUT-SHIFT · Platz fuer die Tools vorab reservieren

   Beide Tools stehen bis zum Start von JavaScript auf hidden (das ist die
   noscript-Absicherung). Ohne Reservierung nimmt der Block null Hoehe ein und
   der Footer springt beim Einblenden nach unten: auf stipendien-check.html
   waren das in Produktion CLS 0,124.

   Die Werte liegen knapp unter der gemessenen Tool-Hoehe, damit nie eine
   sichtbare Luecke entsteht. :has() ist reine Progressive Enhancement: wo es
   fehlt, verhaelt sich die Seite wie bisher.
   ========================================================================= */
.check-section:has(#check) .wrap{min-height:350px}
.check-section:has(#rechner) .wrap{min-height:580px}
/* Ab 720px wird das Feld-Gitter dreispaltig, der Rechner also deutlich flacher */
@media(min-width:720px){
  .check-section:has(#check) .wrap{min-height:380px}
  .check-section:has(#rechner) .wrap{min-height:390px}
}

/* =========================================================================
   MOBIL & TABLET · Fliesstext auf mindestens 16px

   Auf dem Desktop tragen die Komponenten bewusst leicht reduzierte Groessen
   (.93rem bis .98rem). Auf dem Smartphone ist das zu klein zum Lesen, und die
   Hauptzielgruppe kommt vom Handy. Unterhalb 900px wird deshalb alles, was
   echter Fliesstext ist, auf 1rem gezogen.

   Bewusst NICHT enthalten, weil es kein Fliesstext ist: Kicker und Tags
   (Auszeichnungslabels), .preis (Preiszeile mit grosser Zahl), Kleingedrucktes
   wie .check-klein/.vorlagen-klein/.hero-note/.stand sowie die
   Lebenslauf-Attrappe (.cv-*), deren kleine Schrift den Dokumentcharakter
   ausmacht. Reine Groessenaenderung: Desktop bleibt unveraendert.
   ========================================================================= */
@media(max-width:900px){
  .card-body > p,
  .checks:not(.checks-lg) li,
  .step p,
  .stationen li,
  .stimme blockquote,
  .empfehlung,
  .dlines li,
  .dlines-center li,
  .vorlage-karte p,
  .vgl-hinweis,
  .weg-geld,
  .weg-warum,
  .ehrlich-text,
  .zeugnis-text,
  .check-opt,
  .live-schnitt,
  .feld-fehler,
  .rechner-quer,
  .legal p.muted{font-size:1rem}
}