/* ============================================================
   1. TOKENS
   ------------------------------------------------------------
   1a. FARBE
   1b. MODULARE TYPO-SKALA (Ratio 1.25, fluid via clamp())
   1c. VERTIKALER RHYTHMUS (bewusst 4 Stufen, nicht 1 Wert)
   1d. MOTION (unveraendert – Animationslogik bleibt gleich)
   ============================================================ */
:root{
  /* --- 1a Farbe (an Layout-Vorlage angeglichen) --- */
  --bg:#0a0a0a;
  --bg-2:#0d0d0d;          /* Sektionswechsel wie in der Vorlage */
  --card:#121212;
  --card-2:#1a1a1c;
  --ink:#ffffff;
  /* Fliesstext hell genug fuer WCAG AA auf dunklem Grund (L >= 0.85).
     Vorher #a1a1a6 (mittelgrau, unter AA) -> wirkte wie unbewusster Default. */
  --sub:#d4d4d8;
  /* Sekundaertext (Captions, kleine Labels): heller als vorher, besteht AA (~6:1). */
  --sub-2:#9a9aa0;
  --line:rgba(255,255,255,0.10);
  --line-strong:rgba(255,255,255,0.18);
  --gold:#e4c08a;
  --gold-soft:rgba(228,192,138,.14);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Helvetica,Arial,sans-serif;

  /* --- 1b Typo-Skala ---------------------------------------
     Basis 17px, Ratio 1.25. Jede Stufe ist fluid; es gibt
     KEINE freien px-Werte mehr im Dokument.                  */
  --t-1:clamp(11.5px,.15vw + 11px,12.5px);   /* Micro-Label, uppercase */
  --t-2:clamp(13.5px,.2vw + 13px,15px);      /* Caption / Footer */
  --t-3:clamp(16.5px,.25vw + 16px,18px);     /* Fliesstext */
  --t-4:clamp(19px,.6vw + 17px,22px);        /* Fliesstext gross */
  --t-5:clamp(22px,1.1vw + 18px,28px);       /* Lead */
  --t-6:clamp(26px,1.7vw + 20px,36px);       /* H4 / Karten-Titel gross */
  --t-7:clamp(31px,2.7vw + 22px,45px);       /* H3 */
  --t-8:clamp(37px,4.2vw + 23px,56px);       /* H2 klein */
  --t-9:clamp(43px,5.8vw + 22px,70px);       /* H2 */
  --t-10:clamp(52px,8.4vw + 16px,98px);      /* Display / H1 */

  /* Zeilenhoehen als Funktion der Groesse: je groesser, je enger */
  --lh-display:0.98;
  --lh-head:1.07;
  --lh-lead:1.32;
  --lh-body:1.62;

  /* Zeilenlaenge: 60–72 Zeichen. Zwei Werte, bewusst eingesetzt. */
  --measure:64ch;
  --measure-tight:46ch;

  /* --- 1c Rhythmus ----------------------------------------
     Vier Stufen statt einem globalen --pad. Sections nutzen
     unterschiedliche Kombinationen (oben/unten getrennt).    */
  --sp-xl:clamp(120px,14vw,210px);
  --sp-lg:clamp(92px,10vw,150px);
  --sp-md:clamp(64px,7vw,104px);
  --sp-sm:clamp(40px,4.5vw,64px);
  --gutter:clamp(20px,4vw,48px);
  --maxw:1180px;

  /* --- 1d Motion (unveraendert) --- */
  --dur-1:180ms;
  --dur-2:120ms;
  --dur-3:620ms;
  --dur-4:900ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-emphasis:cubic-bezier(.22,.61,.36,1);
  --stagger:80ms;
  --lift:20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:var(--t-3);line-height:var(--lh-body);letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:var(--gold);text-decoration:none;transition:color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
a:hover{color:#fff}
::selection{background:rgba(228,192,138,.28)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ============================================================
   2. TYPO-KLASSEN
   Jede Stufe hat feste line-height + tracking – Grossbuchstaben
   und Displaygroessen brauchen anderes Tracking als Fliesstext.
   ============================================================ */
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
.display{font-size:var(--t-10);line-height:var(--lh-display);letter-spacing:-.038em}
.h2{font-size:var(--t-9);line-height:var(--lh-head);letter-spacing:-.03em}
.h2-sm{font-size:var(--t-8);line-height:var(--lh-head);letter-spacing:-.028em}
.h3{font-size:var(--t-7);line-height:1.1;letter-spacing:-.026em}
.h4{font-size:var(--t-6);line-height:1.16;letter-spacing:-.022em}
.h5{font-size:var(--t-4);line-height:1.25;letter-spacing:-.018em;font-weight:600}

/* Akzentwort in Ueberschriften: leichteres Gewicht + Goldton.
   Setzt einen Fokuspunkt pro Section statt gleichmaessiger Masse. */
.accent{color:var(--gold)}
.thin{font-weight:300;letter-spacing:-.03em}

p{margin:0;text-wrap:pretty}
.lead{font-size:var(--t-5);line-height:var(--lh-lead);letter-spacing:-.018em;color:var(--sub);max-width:var(--measure)}
.lead--ink{color:var(--ink)}
.body{font-size:var(--t-3);line-height:var(--lh-body);color:var(--sub);max-width:var(--measure)}
.body--lg{font-size:var(--t-4);line-height:1.5;color:var(--sub);max-width:var(--measure)}
.caption{font-size:var(--t-2);line-height:1.5;color:var(--sub-2);letter-spacing:-.005em}

/* Micro-Label: eigenes Register (uppercase + weites Tracking).
   Dadurch liest sich das Label nie wie ein kleiner Fliesstext. */
/* Micro-Label: kleines, gedimmtes Gold-Label in Satzschreibung (kein
   Uppercase, kein Sperrsatz) - der Inhalt ist bereits sauber kapitalisiert. */
.label{
  font-size:var(--t-2);font-weight:600;
  letter-spacing:-.004em;color:var(--gold);
}
.label--mute{color:var(--sub-2)}
/* Label mit Ziffer-Praefix, per CSS – Zaehler statt Handarbeit */
.label--rule{display:flex;align-items:center;gap:14px}
.label--rule::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}

/* ============================================================
   3. LAYOUT-GERUEST
   Ein 12-Spalten-Grid als gemeinsame Referenz. Jede Section
   besetzt bewusst ANDERE Spalten -> kein Baukasten-Raster.
   ============================================================ */
.section{position:relative;background:var(--bg)}
.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.shell--narrow{max-width:860px}
.shell--wide{max-width:1360px}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.hairline{height:1px;background:var(--line);border:none;margin:0}

/* Vertikaler Rhythmus wird pro Section gesetzt (siehe Markup),
   Utility-Klassen halten die Werte trotzdem im System. */
.pt-xl{padding-top:var(--sp-xl)} .pb-xl{padding-bottom:var(--sp-xl)}
.pt-lg{padding-top:var(--sp-lg)} .pb-lg{padding-bottom:var(--sp-lg)}
.pt-md{padding-top:var(--sp-md)} .pb-md{padding-bottom:var(--sp-md)}
.pb-sm{padding-bottom:var(--sp-sm)}

/* ============================================================
   4. SCROLL-REVEAL BASIS (unveraendert)
   ============================================================ */
[data-reveal]{
  opacity:0;transform:translate3d(0,var(--lift),0);
  transition:opacity var(--dur-3) var(--ease-emphasis),transform var(--dur-3) var(--ease-emphasis);
  transition-delay:var(--delay,0ms);will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal].is-done{will-change:auto;transition:none}
[data-reveal="fade"]{transform:none}
[data-reveal="media"]{
  opacity:0;transform:scale(1.04);
  transition:opacity var(--dur-4) var(--ease-emphasis),transform var(--dur-4) var(--ease-emphasis);
}
[data-reveal="media"].is-in{opacity:1;transform:scale(1)}

/* ============================================================
   5. NAVIGATION (Verhalten unveraendert, nur Typo praezisiert)
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease),backdrop-filter var(--dur-3) var(--ease);
}
.nav.is-scrolled{
  background:rgba(0,0,0,.62);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__logo{
  display:flex;align-items:center;padding:8px 14px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.nav__logo:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.nav__logo:active{transform:scale(.97)}
.nav__logo img{height:32px;width:auto}
.nav__links{display:flex;gap:clamp(20px,2.4vw,36px);align-items:center}
.nav__link{
  position:relative;color:var(--ink);opacity:.66;font-size:var(--t-2);
  letter-spacing:-.005em;white-space:nowrap;padding:6px 0;
  transition:opacity var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.nav__link:hover{opacity:1;color:var(--ink)}
.nav__link::after{
  content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,4px) scale(0);opacity:0;
  transition:transform var(--dur-3) var(--ease-emphasis),opacity var(--dur-1) var(--ease);
}
.nav__link.is-active{opacity:1}
.nav__link.is-active::after{transform:translate(-50%,0) scale(1);opacity:1}

/* ============================================================
   6. BUTTONS / LINKS (Micro-Interactions unveraendert)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;color:#000;border:none;font-family:var(--font);font-weight:500;
  font-size:var(--t-3);letter-spacing:-.012em;line-height:1;border-radius:980px;
  cursor:pointer;padding:15px 28px;
  transition:transform var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease),box-shadow var(--dur-3) var(--ease),background var(--dur-1) var(--ease);
  will-change:transform;
}
.btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,255,255,.14)}
.btn:active{transform:translateY(0) scale(.975);transition-duration:var(--dur-2)}
.btn--sm{padding:9px 18px;font-size:var(--t-2)}
.btn--lg{padding:18px 34px;font-size:var(--t-4)}
/* Sekundaerer Button: Outline in Gold – das zweite Akzentmoment */
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--ghost:hover{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--gold);opacity:1}

.link-arrow{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.68);font-size:var(--t-3);letter-spacing:-.012em;transition:color var(--dur-1) var(--ease)}
.link-arrow .chev{display:inline-block;transition:transform var(--dur-1) var(--ease)}
.link-arrow:hover{color:#fff;opacity:1}
.link-arrow:hover .chev{transform:translateX(3px)}

/* ============================================================
   7. FLAECHEN & KARTEN
   Drei Radius-Stufen, bewusst pro Kontext verteilt:
   --r-s (12px) kleine Flaechen, --r-m (20px) Karten,
   --r-l (30px) grosse Medien. Bleed-Medien laufen mit
   asymmetrischem Radius in den Viewport-Rand.
   ============================================================ */
.card{
  background:var(--card);border-radius:20px;border:1px solid var(--line);
  transition:transform var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease),background var(--dur-3) var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--card-2)}
/* Akzentkarte: einmalig auf der Seite (Preis) */
.card--accent{background:linear-gradient(180deg,#191512 0%,#141416 60%);border-color:rgba(228,192,138,.32)}
.card--accent:hover{border-color:rgba(228,192,138,.55)}
/* Flache Zeile statt Box – fuer Listen, die keine Karten brauchen */
.row{display:grid;gap:6px;padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--line)}
.row:hover .row__t{color:var(--gold)}
.row__t{transition:color var(--dur-1) var(--ease)}

/* ============================================================
   8. MEDIEN
   - aspect-ratio verhindert CLS (zusaetzlich width/height im HTML)
   - object-position pro Bild individuell (siehe Markup)
   - .bleed-* laesst Bilder gezielt aus dem Container laufen
   ============================================================ */
.media{position:relative;overflow:hidden;background:#101012;border-radius:20px}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media--r-l{border-radius:30px}
.media--r-s{border-radius:12px}
/* Bleed nach links/rechts bis an die Viewport-Kante */
.bleed-l{margin-left:calc(50% - 50vw);border-radius:0 26px 26px 0}
.bleed-r{margin-right:calc(50% - 50vw);border-radius:26px 0 0 26px}
.bleed-full{width:100vw;margin-left:calc(50% - 50vw);border-radius:0}
/* Feiner Innenrand auf dunklen Bildern, damit sie nicht "kleben" */
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

/* ============================================================
   9. HERO – links gesetzt, unten verankert, kein Zentrum
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg)}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  /* Bildfokus: Kopf/Oberkoerper im oberen Drittel; funktioniert fuer
     das Hochformat (ganze Figur) wie den breiten Ausschnitt. */
  object-position:50% 32%;
  transform:scale(1.03);opacity:0;transition:opacity 900ms var(--ease);
}
body.is-ready .hero__media img{opacity:1;animation:kenburns 26s var(--ease) forwards}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1)}}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.15) 34%,rgba(0,0,0,.72) 78%,#000 100%),
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 52%,rgba(0,0,0,0) 78%);
}
.hero__content{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(96px,14vh,140px) var(--gutter) clamp(26px,4vh,46px);pointer-events:none}
.hero__col{max-width:min(820px,94%)}
.hero [data-enter]{
  opacity:0;transform:translate3d(0,24px,0);
  transition:opacity 760ms var(--ease-emphasis),transform 760ms var(--ease-emphasis);
  transition-delay:var(--delay,0ms);
}
body.is-ready .hero [data-enter]{opacity:1;transform:none}
/* Meta-Zeile im Hero: kleine Fakten, weites Tracking, Hairlines */
/* Fakten-Zeile: bewusst an die untere Hero-Kante gesetzt, mit grossem
   Abstand zum Hauptblock – ruhiger Abschluss vor dem naechsten Abschnitt.
   Bleibt auf einer Zeile: Schrift/Tracking/Abstand skalieren mit der
   Viewport-Breite, statt umzubrechen. */
.hero__meta{display:flex;flex-wrap:nowrap;gap:0 clamp(14px,2.4vw,40px);align-items:center;pointer-events:auto;margin-top:clamp(44px,9vh,120px)}
.hero__meta span{font-size:clamp(11px,1vw,13.5px);letter-spacing:-.002em;white-space:nowrap;color:rgba(255,255,255,.82);padding:16px 0}
/* Handys: drei Fakten unterschiedlicher Laenge ergeben nie eine saubere
   Zeile (2+1-Umbruch wirkt zufaellig). Daher als gestapelte, gleich
   behandelte Liste mit feinen Trennlinien – ein ruhiger Credentials-Block. */
@media (max-width:560px){
  .hero__meta{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin-top:clamp(32px,6vh,72px)}
  .hero__meta span{
    width:100%;font-size:13px;letter-spacing:-.002em;padding:12px 0;
    border-top:1px solid rgba(255,255,255,.10);
  }
  .hero__meta span:first-child{border-top:none}
}
.hero__hint{
  position:absolute;left:var(--gutter);bottom:26px;width:1px;height:40px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.5));
  opacity:0;transition:opacity 800ms var(--ease) 1400ms;
}
body.is-ready .hero__hint{opacity:1;animation:breathe 3.2s var(--ease) 1.6s infinite}
@keyframes breathe{0%,100%{transform:scaleY(.6);opacity:.3}50%{transform:scaleY(1);opacity:.85}}

/* ============================================================
   10. SEKTIONS-SPEZIFISCHE LAYOUTS (Anti-Baukasten)
   ============================================================ */
/* --- Fuer wen: Header zweispaltig, Karten vertikal versetzt --- */
.split-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:end}
.stack-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:start}
/* Versatz: 2. Karte tiefer, 3. Karte am tiefsten – bricht die Reihe auf */
.stack-cards > *:nth-child(2){margin-top:clamp(16px,3.4vw,46px)}
.stack-cards > *:nth-child(3){margin-top:clamp(32px,6.8vw,92px)}
/* Fuer-wen-Karte: drei gleichwertige Aussagen als klare Statement-Karten.
   Keine grossen Ziffern mehr (die wirkten wie ein Big-Number-Banner) - die
   Aussage selbst traegt die Karte. */
.fw-card{padding:clamp(30px,3.4vw,44px);display:flex;flex-direction:column;justify-content:center;min-height:clamp(150px,15vw,190px)}
.fw-card .h5{font-weight:500;line-height:1.32}
@media (max-width:760px){
  .fw-card{min-height:0}
}

/* --- Coaching: Leistungen als Zeilen, Prozess als Timeline --- */
.rows{display:grid;border-bottom:1px solid var(--line)}
.rows .row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(12px,3vw,48px)}
@media (max-width:700px){.rows .row{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);counter-reset:step}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.step::before{
  content:"";position:absolute;top:-3.5px;left:0;width:7px;height:7px;border-radius:50%;background:var(--gold);
}

/* --- Preis: rechts eingerueckt, nicht mittig --- */
.price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.price{font-size:var(--t-9);font-weight:600;letter-spacing:-.04em;line-height:1}
.price small{font-size:var(--t-4);color:var(--sub);font-weight:400;letter-spacing:-.01em}

/* --- Ergebnisse: unterschiedliche Hoehen + Versatz --- */
.ba{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(14px,2.4vw,28px);align-items:start}
.ba__before{margin-top:clamp(24px,5vw,72px)}

/* --- Stimmen: eine grosse Stimme + zwei kleinere --- */
.quotes{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,32px);align-items:start}
.quotes__side{display:grid;gap:clamp(20px,3vw,32px)}
.quote{font-size:var(--t-4);line-height:1.44;letter-spacing:-.018em;font-weight:500;color:var(--ink)}
.quote--lead{font-size:var(--t-6);line-height:1.26;letter-spacing:-.024em;font-weight:500}
.quote__by{font-size:var(--t-2);font-weight:600;color:var(--sub-2);letter-spacing:-.002em;margin-top:22px}

/* --- Ueber mich: Bild und Text ueberlappen --- */
.overlap{position:relative}
.overlap__text{position:relative;margin-top:clamp(-72px,-6vw,-24px);margin-left:auto;max-width:min(560px,86%);background:var(--bg);padding:clamp(26px,3vw,40px) 0 0 clamp(26px,3vw,44px)}
.pull{font-size:var(--t-8);line-height:1.12;letter-spacing:-.03em;font-weight:600;max-width:22ch}

/* --- FAQ: Sticky-Spalte links, Liste rechts --- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.faq-head{position:sticky;top:120px}

/* --- Kontakt: grosse Typo links, Formular rechts --- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);align-items:start}

/* ============================================================
   10b. BAUSTEINE DER LAYOUT-VORLAGE
   Gestapelte Section-Header, gleichwertige Grids, Prozess-
   Karten, Preis-Box, Kapitel (Ueber mich), Lizenz-/Stat-Karten.
   Alles auf Basis der bestehenden Tokens.
   ============================================================ */
/* Gestapelter Section-Header: Label, H2, Intro untereinander.
   Volle Breite; die Intro-Breite steuert .lead--wide, die Ausrichtung
   .sec-head--right (fuer den Links/Rechts-Rhythmus der Sektionen). */
.sec-head{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);max-width:none}
.lead--wide{max-width:880px}
/* Rechtsbuendige Variante: Block + Text nach rechts, Label-Linie gespiegelt */
.sec-head--right{align-items:flex-end;text-align:right}
.sec-head--right .label--rule{flex-direction:row-reverse}
/* Zentrierte Variante: Block + Text mittig, Label-Linie beidseitig */
.sec-head--center{align-items:center;text-align:center;margin-inline:auto}
.sec-head--center .label--rule{justify-content:center}
.sec-head--center .label--rule::before{content:"";flex:1;height:1px;background:var(--line);max-width:120px}

/* Abschluss "Fuer wen": Haltelinie, Label links, Aussage rechts gross */
.fw-closer{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:baseline;
  margin-top:clamp(48px,6vw,80px);padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line-strong);
}
.fw-closer .h4{line-height:1.3;letter-spacing:-.02em;max-width:none}

/* Gleichwertige Raster (kein Versatz) */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,24px);align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
.grid-3 > *{height:100%}

/* --- Coaching-Prozess: drei nummerierte Karten --- */
.proc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 32px;flex-wrap:wrap}
.proc-head .caption{max-width:52ch}
.proc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);align-items:stretch}
.proc-card{
  display:flex;flex-direction:column;gap:16px;height:100%;
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  padding:clamp(30px,3.2vw,42px);
  transition:border-color var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
}
.proc-card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.proc-card__top{display:flex;align-items:center;gap:14px}
/* Zeitmarke = Anker der Prozessschritte (ersetzt die 1-2-3-Ziffernbadges).
   Gold, deutlich lesbar, Satzschreibung - eine echte Zeitleiste statt Zaehlung. */
.proc-when{font-size:var(--t-2);font-weight:600;letter-spacing:-.004em;color:var(--gold)}
.proc-card__title{margin-top:2px}
.proc-card__desc{font-size:var(--t-3);line-height:1.55;color:var(--sub)}

/* --- Angebot: Leistungen (Zeilen) + Preis-Karte ---
   Die Zeilen darueber sind "was dabei ist"; die Angebots-Karte darunter
   fasst Preis, Reassurance und CTA zu einem bewussten Abschluss zusammen. */
.offer-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(28px,5vw,64px);
  padding:clamp(30px,4vw,52px) clamp(28px,4vw,56px);
  margin-top:clamp(36px,5vw,64px);
}
.offer-card:hover{transform:none} /* Preis-Karte bleibt ruhig, kein Lift */
.offer-price{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.offer-price__amount{font-size:clamp(40px,4.4vw,60px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.offer-price__int{font-size:var(--t-4);color:var(--sub);font-weight:400;letter-spacing:-.01em}
.offer-card__note{margin-top:16px;max-width:36ch}
.offer-card__aside{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:min(300px,42vw)}
.offer-card__micro{text-align:center}

/* --- Ueber mich: Kapitel (Bild/Text im Wechsel) --- */
.chapter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,6vw,96px);align-items:center}
.chapter__head{display:flex;align-items:baseline;gap:18px}
.chapter-roman{font-size:clamp(46px,6vw,72px);line-height:.78;font-weight:700;letter-spacing:-.04em;color:rgba(228,192,138,.22)}
.figcap{margin-top:14px;font-size:var(--t-2);letter-spacing:-.002em;color:var(--sub-2)}
.emph{font-size:var(--t-4);line-height:1.4;font-weight:600;color:var(--ink);max-width:26ch}

/* --- Qualifikation: Lizenz-Karten (Goldrand) + Stat-Kacheln --- */
.lic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,24px);align-items:stretch}
.lic{
  display:flex;flex-direction:column;gap:18px;height:100%;
  background:linear-gradient(180deg,#16130e 0%,#111 100%);
  border:1px solid rgba(228,192,138,.35);border-radius:20px;
  padding:clamp(32px,3.4vw,44px);
  transition:border-color var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
}
.lic:hover{border-color:rgba(228,192,138,.6);transform:translateY(-4px)}
/* Titel = Lizenzname, darunter das FACHGEBIET (was er kann), Quelle klein unten */
.lic__title{letter-spacing:-.02em}
.lic__covers{font-size:var(--t-4);line-height:1.4;color:var(--ink)}
.lic__rule{margin-top:auto}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,24px)}
.stat{
  display:flex;flex-direction:column;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,3vw,36px);
}
/* Zwei echte Qualifikations-Belege (kein Vanity-Banner): moderat statt riesig. */
.stat__big{font-size:var(--t-6);font-weight:600;letter-spacing:-.025em;line-height:1.05}

/* ============================================================
   11. FAQ (Mechanik unveraendert)
   ============================================================ */
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(16px,3vw,40px);
  background:none;border:none;color:var(--ink);font-family:var(--font);
  font-size:var(--t-4);font-weight:500;letter-spacing:-.018em;line-height:1.34;
  text-align:left;padding:clamp(22px,2.4vw,30px) 0;cursor:pointer;
  transition:color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease);
}
.faq__q:hover{color:#fff;opacity:.82}
/* Plus -> Minus: der vertikale Balken schrumpft weg (kein Zeichentausch) */
.faq__sign{position:relative;width:26px;height:26px;flex:none;margin-top:2px}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--gold);border-radius:1px;
  transition:transform var(--dur-3) var(--ease-emphasis);
}
.faq__sign::before{width:15px;height:1.5px;transform:translate(-50%,-50%)}
.faq__sign::after{width:1.5px;height:15px;transform:translate(-50%,-50%)}
.faq__item.is-open .faq__sign::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-3) var(--ease-emphasis)}
.faq__item.is-open .faq__panel{grid-template-rows:1fr}
.faq__panel > div{overflow:hidden}
.faq__a{
  font-size:var(--t-3);line-height:var(--lh-body);color:var(--sub);
  max-width:58ch;padding:0 0 clamp(24px,3vw,32px);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);
}
.faq__item.is-open .faq__a{opacity:1;transform:none;transition-delay:60ms}

/* ============================================================
   12. FORMULAR (Mechanik unveraendert)
   ============================================================ */
.form{display:grid;gap:18px;max-width:520px}
.field{position:relative}
.field label{
  display:block;font-size:var(--t-2);letter-spacing:-.004em;
  font-weight:600;color:var(--sub-2);margin-bottom:9px;
  transition:color var(--dur-1) var(--ease);
}
.field:focus-within label{color:var(--gold)}
.field input,.field textarea{
  width:100%;background:#101012;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-family:var(--font);font-size:var(--t-3);letter-spacing:-.011em;
  padding:15px 16px;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#55555a}
.field input:focus,.field textarea:focus{outline:none;background:#141417;border-color:rgba(228,192,138,.6);box-shadow:0 0 0 3px var(--gold-soft)}
.field.is-invalid input,.field.is-invalid textarea{
  border-color:#c0574f;box-shadow:0 0 0 3px rgba(192,87,79,.14);
  animation:nudge var(--dur-3) var(--ease);
}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.field__error{font-size:var(--t-2);color:#e08b84;margin-top:7px;max-height:0;opacity:0;overflow:hidden;transition:max-height var(--dur-3) var(--ease),opacity var(--dur-1) var(--ease)}
.field.is-invalid .field__error{max-height:2.4em;opacity:1}
.form__ok{font-size:var(--t-2);color:var(--gold);opacity:0;transform:translateY(6px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease-emphasis)}
.form.is-sent .form__ok{opacity:1;transform:none}
/* Einwilligungs-Checkbox: bricht bewusst aus dem .field-Input-Styling aus. */
.field--check .check{display:flex;gap:11px;align-items:flex-start;margin:0;text-transform:none;letter-spacing:-.006em;font-weight:400;font-size:var(--t-2);line-height:1.55;color:var(--sub);cursor:pointer}
.field--check:focus-within .check{color:var(--sub)}
.field--check input{width:18px;height:18px;flex:0 0 auto;margin:2px 0 0;padding:0;border-radius:5px;accent-color:var(--gold);cursor:pointer}
.field--check input:focus{outline:none;background:transparent;box-shadow:0 0 0 3px var(--gold-soft)}
.field--check .check a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.field--check.is-invalid input{outline:2px solid #c0574f;outline-offset:2px;box-shadow:none;animation:nudge var(--dur-3) var(--ease)}

/* ============================================================
   13. FOOTER
   ============================================================ */
.footer{background:var(--bg-2);border-top:1px solid var(--line)}
.footer__inner{
  max-width:var(--maxw);margin:0 auto;padding:clamp(36px,4vw,56px) var(--gutter);
  display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.footer a{color:var(--sub-2);font-size:var(--t-2);letter-spacing:-.005em}
.footer a:hover{color:#fff}

/* ============================================================
   14. RESPONSIVE – Layouts fallen kontrolliert in eine Spalte
   ============================================================ */
@media (max-width:960px){
  .price-grid,.faq-grid,.contact-grid,.quotes{grid-template-columns:1fr}
  .faq-head{position:static}
  .steps{grid-template-columns:1fr}
  .overlap__text{margin:24px 0 0;max-width:100%;padding-left:0}
  /* Vorlage-Bausteine: Angebots-Karte + Kapitel einspaltig */
  .offer-card{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}
  .offer-card__aside{min-width:0}
  .chapter{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  /* Bild im Kapitel immer zuerst, egal welche Seite im DOM steht */
  .chapter__media{order:-1}
}
/* Coaching ruhiger bei mittlerer Breite: Zeilen + Prozess einspaltig,
   bevor die Spalten zu eng werden und Text zerfranst. */
@media (max-width:900px){
  .rows .row{grid-template-columns:1fr;gap:8px}
  .proc{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav__links{display:none}
  .split-head{grid-template-columns:1fr;align-items:start}
  .stack-cards{grid-template-columns:1fr}
  .stack-cards > *:nth-child(2),.stack-cards > *:nth-child(3){margin-top:0}
  .ba{grid-template-columns:1fr}
  .ba__before{margin-top:0}
  .bleed-l,.bleed-r{margin-inline:0;border-radius:20px}
  .hero__col{max-width:100%}
  /* Vorlage-Bausteine: gleichwertige Raster + Prozess einspaltig */
  .grid-2,.grid-3,.proc,.lic-grid,.stat-grid{grid-template-columns:1fr}
  .fw-closer{grid-template-columns:1fr;gap:14px}
  /* Rechtsbuendige Header auf kleinen Screens wieder linksbuendig */
  .sec-head--right{align-items:flex-start;text-align:left}
  .sec-head--right .label--rule{flex-direction:row}

  /* Ueber mich: das Kapitelbild fuehrt sonst als hohes Hochformat und
     erschlaegt den Text. Bild bleibt zuerst (order:-1 aus dem 960er-Block),
     wird aber zur kompakten, zentrierten Stuetze verkleinert – gleich
     behandelt fuer alle Kapitel. */
  .chapter{gap:clamp(22px,5vw,32px)}
  .chapter__media .media{aspect-ratio:4/5 !important;max-width:300px;margin-inline:auto}
  .chapter .figcap{text-align:center}

  /* Ergebnisse: Vorher/Nachher gehoeren nebeneinander (Vergleich auf einen
     Blick), nicht uebereinander gestapelt und ellenlang. */
  #ergebnisse .grid-2{grid-template-columns:1fr 1fr;gap:clamp(10px,2.6vw,16px)}
  #ergebnisse .grid-2 .label{font-size:var(--t-1)}
}

/* ============================================================
   15. REDUCED MOTION (unveraendert)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  :root{--lift:0px}
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  [data-reveal],[data-enter]{opacity:1 !important;transform:none !important}
  .hero__media img{opacity:1 !important;transform:none !important}
  .hero__hint{display:none}
}
/* ===== Feinschliff nach Abnahme (Migration triple-m-neu) =====
   Nur additive Overrides. Original-Regeln oben bleiben unveraendert.
   1) Testimonials: Lead-Karte fuellt die Reihenhoehe (height:100% ist
      im Markup schon gesetzt), damit die Spalten unten buendig sind
      statt 125px ausgefranst. Inhalt vertikal zentriert. */
.quotes{align-items:stretch}
.quotes > div:first-child > .card{display:flex;flex-direction:column;justify-content:center}

/* 2) Mobile-Navigation: Burger + Dropdown-Panel.
      Desktop unveraendert (Burger display:none, Actions-Gruppe = nur CTA). */
.nav__actions{display:flex;align-items:center;gap:10px}
.nav__burger{
  display:none;width:42px;height:42px;flex:0 0 auto;padding:0;cursor:pointer;
  align-items:center;justify-content:center;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.nav__burger:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
.nav__burger:active{transform:scale(.96)}
.nav__burger-box{position:relative;width:18px;height:12px}
.nav__burger-box span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink);
  transition:transform var(--dur-2) var(--ease-emphasis),opacity var(--dur-1) var(--ease);
}
.nav__burger-box span:nth-child(1){top:0}
.nav__burger-box span:nth-child(2){bottom:0}
.nav.is-open .nav__burger-box span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav.is-open .nav__burger-box span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:760px){
  .nav__burger{display:inline-flex}
  /* Links werden zum Dropdown-Panel (ueberschreibt display:none aus Zeile 427) */
  #nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:70px;left:var(--gutter);right:var(--gutter);
    background:rgba(10,10,10,.97);border:1px solid var(--line-strong);border-radius:16px;padding:10px;
    -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
    box-shadow:0 24px 48px rgba(0,0,0,.6);
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
  }
  .nav.is-open #nav-links{opacity:1;transform:none;pointer-events:auto}
  #nav-links .nav__link{opacity:.85;font-size:var(--t-3);padding:13px 12px;border-radius:10px}
  #nav-links .nav__link:hover,#nav-links .nav__link.is-active{opacity:1;background:rgba(255,255,255,.06)}
  #nav-links .nav__link::after{display:none}
}