/* ══════════════════════════════════════════════════════════════════════════
   Leading Legends — Alexander Faubel & Dorje
   Haltung: „Executive Calm", übernommen aus dem Executive Reset. Viel
   Weißraum, eine Schrift, kein Radius, keine Schatten. Trennung über
   Haarlinien und Flächen. Eine einzige Akzentfarbe (Gold).
   Fotos seit 28.09. nicht mehr schwarzweiß, sondern alle im selben
   Farblook „Moos & Champagner“: Grün moosig-olivig statt grell, Himmel
   zurückgenommen, Lichter warm Richtung Champagner/Creme, Schatten weich
   Richtung Grünschwarz — die Natur bleibt sichtbar, der Look passt zu
   Gold, Creme und Grünschwarz. Dokumentarisch, nicht inszeniert.
   Wenn eine Entscheidung zwischen mehr und weniger steht: weniger.

   Stand 27.09.2026 — Neubau nach Alexanders Konzept „Leading Legends"
   (Google-Doc): Retreat-Format statt Executive Reset, 15 Kapitel.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · Tokens ───────────────────────────────────────────────────────── */
:root{
  --paper:#F9F8F6;      /* warmes Cremeweiß                                  */
  --ink:#111C19;        /* Grünschwarz, bewusst kein reines Schwarz          */
  --muted:#616862;      /* Sekundärtext, 5,4:1 auf Papier                    */
  --field:#EFEDE7;      /* abgesetzte Flächen                                */
  --line:#DFDCD4;       /* Haarlinien                                        */
  --gold:#8A6A12;       /* Gold auf hellem Grund, 4,8:1                      */
  --gold-lt:#E0C07A;    /* Champagner — ausschließlich auf --ink-Flächen     */
  --paper-66:rgba(249,248,246,.66);
  --paper-16:rgba(249,248,246,.16);

  --font:"Inter Tight","Inter Tight Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --t-h1:clamp(46px, 7vw, 96px);   /* auf dem Handy nicht kleiner — der Hero traegt nur vier Elemente */
  --t-h2:clamp(29px, 4vw, 52px);
  --t-big:clamp(26px, 3.2vw, 44px);  /* die einzelnen Spiegel-Saetze */
  --t-num:clamp(30px, 3.4vw, 46px);
  --t-h3:clamp(20px, 1.5vw, 25px);
  --t-lead:clamp(17px, 1.15vw, 20px);
  --t-body:clamp(16px, .8vw, 17px);   /* 16 px ist die Komfortgrenze auf dem Handy */
  --t-meta:13px;
  --t-eyebrow:11px;

  --wrap:1320px;
  --pad:clamp(22px, 6vw, 88px);
  --sec:clamp(84px, 13vw, 190px);
  --head:clamp(62px, 6vw, 78px);
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ─── 2 · Grundlagen ───────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head) + 8px);
  overflow-x:clip;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
h1,h2,h3{
  font-weight:500;                 /* Überschriften nie fett */
  letter-spacing:-.035em;
  line-height:1.1;
  text-wrap:balance;
}
h1{font-size:var(--t-h1);line-height:1.02;max-width:15ch;}
h2{font-size:var(--t-h2);max-width:17ch;}
h3{font-size:var(--t-h3);line-height:1.24;letter-spacing:-.028em;}
p{max-width:58ch;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
ul,ol{list-style:none;}
::selection{background:var(--gold-lt);color:var(--ink);}

:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}
.on-ink :focus-visible{outline-color:var(--gold-lt);}

.skip{
  position:absolute;left:var(--pad);top:-100px;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;font-size:var(--t-eyebrow);
  letter-spacing:.2em;text-transform:uppercase;
  transition:top .2s;
}
.skip:focus{top:14px;}

/* ─── 3 · Bausteine ────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
section{padding-block:var(--sec);}
.rule{border-top:1px solid var(--line);}
.on-ink{background:var(--ink);color:var(--paper);}
.on-ink h2,.on-ink h3{color:var(--paper);}

.eyebrow{
  font-size:var(--t-eyebrow);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
}
.on-ink .eyebrow{color:var(--gold-lt);}
.eyebrow + h1,.eyebrow + h2{margin-top:22px;}

.lead{font-size:var(--t-lead);line-height:1.6;max-width:44ch;color:var(--muted);}
.meta{font-size:var(--t-meta);line-height:1.5;color:var(--muted);}
.on-ink .lead{color:var(--paper-66);}

/* Offene Stellen aus Alexanders Doc — sichtbar als das, was sie sind.
   Gold, gepunktet unterstrichen, damit sie beim Durchsehen sofort
   auffallen und niemand sie fuer fertigen Text haelt. */
.klaeren{
  color:var(--gold);
  text-decoration:underline dotted;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.on-ink .klaeren{color:var(--gold-lt);}

/* Button — Outline, Fläche läuft beim Hover von unten hoch */
.btn{
  position:relative;isolation:isolate;
  display:inline-block;
  border:1px solid var(--ink);
  padding:17px 34px;
  font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:transparent;
  cursor:pointer;overflow:hidden;
  transition:color .38s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .42s var(--ease);
}
.btn:hover{color:var(--paper);}
.btn:hover::before{transform:scaleY(1);}
.btn--inv{border-color:var(--paper);color:var(--paper);}
.btn--inv::before{background:var(--paper);}
.btn--inv:hover{color:var(--ink);}

.link{border-bottom:1px solid var(--line);transition:border-color .3s var(--ease);}
.link:hover{border-color:var(--ink);}
.on-ink .link{border-bottom-color:rgba(249,248,246,.28);}
.on-ink .link:hover{border-bottom-color:var(--paper);}

/* Feine Strichsymbole — nur Haken und Kreuz in „Für wen". */
.ico{
  width:22px;height:22px;flex:none;
  stroke:var(--gold);stroke-width:1;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.on-ink .ico{stroke:var(--gold-lt);}

.duo{display:grid;gap:clamp(26px,4vw,72px);}
@media (min-width:900px){
  .duo{grid-template-columns:5fr 6fr;gap:clamp(40px,6vw,110px);align-items:start;}
}

/* Platzhalterfläche — fuer Bilder, die noch nicht vorliegen */
.ph{
  position:relative;background:var(--field);width:100%;
  border:1px dashed var(--line);
}
.ph span{
  position:absolute;left:16px;bottom:14px;
  font-size:var(--t-eyebrow);letter-spacing:.2em;
  text-transform:uppercase;color:#6B6862;   /* 4,6:1 auf --field */
}
.on-ink .ph{background:rgba(249,248,246,.06);border-color:var(--paper-16);}
.on-ink .ph span{color:rgba(249,248,246,.45);}
/* Flache Variante mit mittigem Label — fuer grosse Flaechen, die sonst
   einen halben Bildschirm leer liessen. */
.ph--mid span{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);white-space:nowrap;}

/* ─── 4 · Kopfzeile ────────────────────────────────────────────────────── */
.head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--head);background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.head.is-scrolled{border-bottom-color:var(--line);}
.head .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.mark{
  font-size:clamp(12px, 1vw, 15px);
  font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,38px);}
.nav a{
  position:relative;
  font-size:var(--t-eyebrow);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .3s var(--ease);
  white-space:nowrap;
}
.nav a:hover{color:var(--ink);}
/* Vergroessert die Trefferflaeche auf sicher ueber 44 px, ohne das Layout zu
   beruehren: ein unsichtbares Rechteck ueber dem Link. */
.nav a::before,.mark::before,.foot a::before{
  content:"";position:absolute;inset:-14px -10px;
}
.mark,.foot a{position:relative;}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav a.apply{color:var(--gold);}
.nav a.apply:hover{color:var(--ink);}
@media (max-width:900px){.nav a:not(.apply){display:none;}}

/* Handy-Menue (Michi, 30.09.): ein Knopf „Menü“ mit zwei Haarlinien rechts
   in der Kopfzeile; darunter klappt eine Liste im Papierton auf, die Ziele
   gross untereinander, „Interesse anmelden“ in Gold als letzter Punkt.
   Schliesst bei Klick auf ein Ziel, ausserhalb oder mit Esc (site.js). */
.menu-btn{display:none;}
.menu{display:none;}
@media (max-width:900px){
  .head .wrap{gap:14px;}
  .mark,.nav{flex:none;}
}
/* Auf Handybreite (≤ 480 px) muessen Wortmarke, „Interesse anmelden“ und das
   Menue-Zeichen in eine Zeile: Sperrung und Abstaende enger, sonst schiebt
   sich das Zeichen ueber den Rand (gemessen: 360 px → 367 px Bedarf). */
@media (max-width:480px){
  .head .wrap{gap:10px;}
  .mark{font-size:11px;letter-spacing:.11em;}
  .nav a.apply{letter-spacing:.09em;}
}
@media (max-width:900px){
  /* Nur das Zeichen (zwei Linien, offen: Kreuz) — ein Wort daneben machte
     die Kopfzeile auf 390 px zu breit. Das Label bleibt fuer Screenreader. */
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;margin-right:6px;
    border:0;background:transparent;cursor:pointer;color:var(--ink);
  }
  .menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .menu-btn i{
    position:relative;width:22px;height:12px;display:block;
  }
  .menu-btn i::before,.menu-btn i::after{
    content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink);
    transition:transform .32s var(--ease), top .32s var(--ease);
  }
  .menu-btn i::before{top:0;}
  .menu-btn i::after{top:11px;}
  .menu-btn[aria-expanded="true"] i::before{top:5.5px;transform:rotate(45deg);}
  .menu-btn[aria-expanded="true"] i::after{top:5.5px;transform:rotate(-45deg);}
  .menu{
    display:block;
    position:fixed;left:0;right:0;top:var(--head);z-index:99;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding-block:6px 26px;
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .28s var(--ease), transform .32s var(--ease);
  }
  .menu[hidden]{display:block;}          /* hidden steuert nur den Zustand, die Animation macht das CSS */
  .menu.is-open{opacity:1;transform:none;pointer-events:auto;}
  /* .head .wrap ist eine Zeile mit Mittelachse — hier wieder eine Spalte,
     linksbuendig, ohne feste Hoehe */
  .head .menu nav{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;gap:0;}
  .menu a{
    display:block;padding-block:16px;
    border-top:1px solid var(--line);
    font-size:clamp(20px,5.6vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.2;
  }
  .menu a:first-child{border-top:0;}
  .menu a.apply{color:var(--gold);}
  /* Schleier ueber dem Rest der Seite, solange das Menue offen ist */
  .head.menu-open::after{
    content:"";position:fixed;inset:var(--head) 0 0 0;z-index:98;
    background:rgba(17,28,25,.28);
  }
  .head.menu-open{border-bottom-color:var(--line);}
}

/* ─── 5 · Hero — typografisch, darunter ein einziges Bild ──────────────── */
.hero{
  min-height:100svh;
  padding-top:calc(var(--head) + clamp(40px,7vw,90px));
  padding-bottom:0;
  display:flex;flex-direction:column;
}
.hero .wrap{flex:1;display:flex;flex-direction:column;justify-content:center;}
.hero h1{max-width:15ch;}   /* ohne Zeile darueber (Michi, 28.09.) */   /* „Begegne dir selbst." auf einer Zeile */
/* Die zweite Zeile beginnt eine eigene Zeile — so hat Alexander die
   Headline im Doc gezeichnet. balance verhindert ein Einzelwort am Ende. */
.hero h1 em{font-style:normal;color:var(--muted);display:block;text-wrap:balance;}
.hero .lead{margin-top:clamp(24px,2.6vw,38px);max-width:48ch;}
.hero .btn{margin-top:clamp(34px,3.6vw,52px);}
/* Die vier Eckdaten unter dem Button: klein, gesperrt, durch Punkte getrennt */
.facts-line{
  margin-top:clamp(30px,3.4vw,48px);
  display:flex;flex-wrap:wrap;gap:8px 0;
  font-size:var(--t-eyebrow);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
/* Der Punkt haengt am Eintrag davor und bricht nie allein an den Zeilenanfang. */
.facts-line li{white-space:nowrap;}
.facts-line li:not(:last-child)::after{content:"·";margin-inline:14px;color:var(--gold);}
/* Das Gruppenfoto unter der Headline — die Gruppe muss ganz zu sehen sein,
   vom Kopf bis zu den Schuhen. Deshalb festes 16:9 statt eines schmalen
   Streifens, und nie hoeher als der Bildschirm: auf breiten Monitoren wird
   das Bild lieber schmaler (mittig) als oben und unten beschnitten. */
.hero-media{margin-top:clamp(40px,4.5vw,64px);}
.hero-media img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  max-width:calc((100svh - var(--head) - 24px) * 16 / 9);
  margin-inline:auto;
}
/* Handy: eigener 4:3-Schnitt aus <picture>, seitlich enger — die Maenner
   werden so rund ein Drittel groesser als im Desktop-Schnitt. */
@media (max-width:700px){
  .hero-media img{aspect-ratio:4/3;max-width:none;}
}

/* ─── 6 · Das Leben vieler Männer — extrem reduziert ───────────────────── */
/* Linksbuendig wie alle anderen Kapitel (Michi, 01.10.) — frueher war die
   .wrap hier auf 900 px begrenzt und stand dadurch mittig eingerueckt. Die
   Textbloecke haben ihre eigenen Maximalbreiten. */
.life h2{max-width:20ch;}
/* V2 (Alexander): der Dreiklang gross hervorgehoben, jedes Wort auf
   eigener Zeile — Desktop nebeneinander mit Goldpunkten dazwischen. */
.life-key{
  margin-top:clamp(40px,5vw,72px);
  font-size:clamp(26px,2.85vw,40px);   /* Desktop: alle drei auf einer Zeile */
  font-weight:500;letter-spacing:-.03em;line-height:1.15;
  max-width:none;
}
.life-key span{display:block;}
@media (min-width:900px){
  /* Ohne Trennpunkte (Michi, 01.10.) — nur etwas mehr Luft zwischen den Saetzen */
  .life-key span{display:inline;white-space:nowrap;}
  .life-key span:not(:last-child){margin-right:.45em;}
}
.life-lines{margin-top:clamp(30px,3.6vw,52px);max-width:560px;}
.life-lines p{
  max-width:none;
  font-size:var(--t-lead);line-height:1.5;letter-spacing:-.01em;
  padding-block:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--line);
}
.life-lines p:last-child{border-bottom:1px solid var(--line);}
.life-lines p.trio{max-width:none;}
.life-lines p.trio span{display:block;}
.life-close{
  margin-top:clamp(44px,5vw,72px);
  font-size:var(--t-h2);font-weight:500;letter-spacing:-.035em;line-height:1.1;
  max-width:16ch;
}
.life-close::before{
  content:"";display:block;width:44px;height:1px;background:var(--gold);
  margin-bottom:clamp(22px,2.6vw,34px);
}

/* ─── 7 · Der Spiegel — dunkel, ein grosses Bild, Saetze nacheinander ──── */
/* Oben die Buehne: B2 (die Runde an der Feuerschale) liegt ueber die volle
   Breite tief im Gruenschwarz, wie das Bild im Schluss-Kapitel; „Der
   Spiegel“ und die Ueberschrift tauchen unten links darin auf. Darunter
   zweispaltig: links bleibt die Praemisse beim Scrollen stehen, rechts
   ziehen die Spiegel-Saetze vorbei. */
.mirror{padding-top:0;padding-bottom:var(--sec);}
/* V2 (Alexander): der Spiegel als zentraler Markenmoment — die Buehne
   fuellt am Desktop den ganzen Bildschirm, die Ueberschrift hat H1-Groesse. */
.mirror h2{max-width:14ch;font-size:var(--t-h1);line-height:1.02;}
.mirror-stage{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(62vw, 100svh);               /* fast Bildschirmhoehe, nie hoeher */
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(120px,14vw,220px);
  padding-bottom:clamp(44px,5vw,80px);
}
.mirror-bg{position:absolute;inset:0;z-index:-1;}
.mirror-bg img{width:100%;height:100%;object-fit:cover;opacity:.6;}
/* Verlauf von unten: dort steht die Schrift, dort ist es fast ganz dunkel;
   nach oben bleibt die Runde sichtbar. Unten laeuft das Bild nahtlos ins
   Gruenschwarz der Sektion aus. */
.mirror-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(17,28,25,.4) 0%, rgba(17,28,25,0) 55%),   /* links, wo die Schrift steht, etwas dunkler */
    linear-gradient(to top, var(--ink) 0%, rgba(17,28,25,.72) 16%, rgba(17,28,25,.45) 42%, rgba(17,28,25,.2) 100%);
}
.mirror-stage .wrap{position:relative;}
/* Handy: das Bild (4:3-Schnitt) steht oben in voller Breite, die Schrift
   beginnt in seinem unteren, schon dunklen Drittel und laeuft darunter
   weiter — so bleibt die ganze Runde zu sehen statt eines Ausschnitts. */
@media (max-width:700px){
  .mirror-stage{min-height:0;padding-top:52vw;padding-bottom:0;}
  .mirror-bg{bottom:auto;aspect-ratio:4/3;}
  .mirror-bg img{opacity:.62;}
  .mirror-bg::after{
    background:linear-gradient(to top, var(--ink) 0%, rgba(17,28,25,.7) 18%, rgba(17,28,25,.35) 50%, rgba(17,28,25,.12) 100%);
  }
}
.mirror-grid{margin-top:clamp(50px,6vw,90px);display:grid;gap:clamp(30px,4vw,56px);}
@media (min-width:940px){
  .mirror-grid{grid-template-columns:5fr 6fr;column-gap:clamp(40px,6vw,110px);align-items:start;}
  .mirror-premise{position:sticky;top:calc(var(--head) + 40px);}
}
/* Die Praemisse des Kapitels — gross genug, um neben den Spiegel-Saetzen
   zu bestehen, aber zurueckgenommen, damit die Saetze fuehren. */
.mirror-premise{
  font-size:clamp(22px,2.1vw,32px);line-height:1.3;letter-spacing:-.025em;
  color:var(--paper-66);max-width:22ch;
}
/* Die Saetze stehen untereinander; der, der gerade in der Bildschirmmitte
   liegt, ist hell, die anderen zurueckgenommen. site.js setzt .now. */
.mirror-lines{margin-top:0;}
.mirror-lines p:first-child{padding-top:0;}
.mirror-lines p > span{display:block;}
/* Handy und Tablet: die Saetze klappen beim Scrollen einer nach dem anderen
   auf. Jeder steigt aus seiner eigenen Zeile hoch, sobald er ins untere
   Fuenftel des Bildschirms kommt (site.js setzt .open), und klappt beim
   Zurueckscrollen wieder zu. Der Platz bleibt reserviert — nichts springt.
   Nur mit laufendem Observer; sonst (.no-io) stehen alle Saetze sofort da. */
@media (max-width:939px){
  .js:not(.no-io) .mirror-lines p{overflow:hidden;}
  .js:not(.no-io) .mirror-lines p > span{
    opacity:0;transform:translateY(calc(100% + 28px));
    transition:transform .9s cubic-bezier(.16,.84,.28,1), opacity .5s var(--ease);
  }
  .js:not(.no-io) .mirror-lines p.open > span{opacity:1;transform:none;}
}
.mirror-lines p{
  font-size:var(--t-big);font-weight:500;letter-spacing:-.03em;line-height:1.15;
  max-width:16ch;
  padding-block:clamp(14px,1.6vw,22px);
  color:rgba(249,248,246,.45);   /* 4,3:1 auf Gruenschwarz — auch die ruhenden Saetze bleiben lesbar */
  transition:color .6s var(--ease);
}
.mirror-lines p.now,.no-io .mirror-lines p{color:var(--paper);}
.mirror-lines p.turn{color:var(--gold-lt);margin-top:clamp(18px,2vw,30px);}
.no-io .mirror-lines p.turn{color:var(--gold-lt);}
.mirror-close{margin-top:clamp(60px,7vw,110px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--paper-16);}
.mirror-close h3{font-size:var(--t-h2);letter-spacing:-.035em;line-height:1.1;max-width:14ch;}
.mirror-close p{margin-top:clamp(22px,2.4vw,32px);color:var(--paper-66);font-size:var(--t-lead);line-height:1.6;max-width:44ch;}
.mirror-close .mirror-core{color:var(--paper);}

/* ─── 8 · Was Men's Work für uns bedeutet ──────────────────────────────── */
.work .lead{margin-top:clamp(22px,2.4vw,32px);color:var(--ink);}
.work .lead + .lead{margin-top:clamp(14px,1.6vw,20px);color:var(--muted);}
.work-questions{margin-top:clamp(26px,3vw,40px);}
.work-questions p{
  max-width:44ch;font-size:var(--t-lead);line-height:1.5;
  padding-block:clamp(12px,1.4vw,18px);border-top:1px solid var(--line);
}
.work-questions p:last-child{border-bottom:1px solid var(--line);}
/* Eyecatcher-Zitat (Alexander, 06.10.): gross, eigene Zeile, feiner
   Goldstrich davor — auf Papier, damit es sich von der dunklen Buehne
   darunter absetzt. */
.work-quote{
  margin-top:clamp(56px,7vw,110px);
  padding-left:clamp(18px,2.2vw,32px);border-left:2px solid var(--gold);
  font-size:var(--t-big);font-weight:500;letter-spacing:-.03em;line-height:1.15;
  color:var(--ink);max-width:28ch;text-wrap:balance;
}
/* Das Zitat als dunkle Buehne ueber die volle Breite (Michi, 28.09.):
   B3-1 (Jurte innen) liegt im Hintergrund — dieselbe Machart wie oben im
   Spiegel (.mirror-bg: Deckkraft, Verlauf von unten, Handy 4:3 oben). */
.work-stage{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(60px,7vw,110px);
  min-height:min(56.25vw, 100svh);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(120px,14vw,220px);
  padding-bottom:clamp(44px,5vw,80px);
}
.work-stage .wrap{position:relative;}
@media (max-width:700px){
  .work-stage{min-height:0;padding-top:52vw;padding-bottom:48px;}
}
.pull{
  font-size:var(--t-h2);font-weight:500;letter-spacing:-.035em;line-height:1.12;
  max-width:24ch;text-wrap:balance;
}
.pull span{display:block;}
.pull span+span{color:var(--paper-66);margin-top:.35em;}
/* Unter der Buehne steht seit 30.09. kein Bild mehr — die Buehne schliesst
   das Kapitel ab. */
.work{padding-bottom:0;}

/* ─── 9 · Die Erfahrung — fünf Dimensionen, editorial ─────────────────── */
/* V2 (Alexander): keine Kartenoptik. Jede Dimension ist eine Zeile
   zwischen Haarlinien; ab 900 px Bild und Text nebeneinander, die Seite
   wechselt von Zeile zu Zeile. Die Bildformate wechseln mit (4:5, 3:2),
   damit es nach Magazin aussieht und nicht nach Raster. „Reibung“ steht
   ohne Bild, zentriert — ein Atemzug im Rhythmus. */
.dims{margin-top:clamp(50px,7vw,100px);border-top:1px solid var(--line);}
.dim{
  display:grid;gap:clamp(24px,3vw,40px);
  padding-block:clamp(36px,4.5vw,72px);
  border-bottom:1px solid var(--line);
}
.dim-media{margin:0;}
.dim-media img{display:block;width:100%;height:auto;object-fit:cover;}
.dim-media--tall img{aspect-ratio:4/5;}
.dim-media--wide img{aspect-ratio:3/2;}
.dim-num{display:block;font-size:var(--t-num);font-weight:500;line-height:1;letter-spacing:-.035em;color:var(--gold);}
.dim-text h3{margin-top:clamp(16px,1.8vw,24px);font-size:var(--t-h2);letter-spacing:-.035em;line-height:1.1;}
.dim-text p{margin-top:clamp(16px,1.8vw,22px);font-size:var(--t-lead);line-height:1.55;color:var(--muted);max-width:34ch;}
.dim-text .tags{
  margin-top:clamp(20px,2.4vw,30px);
  font-size:var(--t-meta);letter-spacing:.02em;color:var(--ink);line-height:1.7;max-width:none;
}
.dim--solo .dim-text{text-align:center;}
.dim--solo .dim-text p{margin-inline:auto;}
.dim--solo .dim-text h3{margin-inline:auto;}
@media (max-width:899px){
  /* Handy: das Bild nach dem Text, der Text bleibt links */
  .dim-media{order:2;}
  .dim-media--tall img{aspect-ratio:4/3;}
}
@media (min-width:900px){
  .dim{grid-template-columns:5fr 6fr;column-gap:clamp(48px,7vw,120px);align-items:center;}
  .dim-media{grid-column:1;}
  .dim-text{grid-column:2;}
  .dim:nth-child(even) .dim-media{grid-column:2;}
  .dim:nth-child(even) .dim-text{grid-column:1;grid-row:1;}
  .dim-media--tall{max-width:440px;}
  .dim:nth-child(even) .dim-media--tall{justify-self:end;}
  .dim--solo{grid-template-columns:1fr;padding-block:clamp(60px,7vw,110px);}
  .dim--solo .dim-text{grid-column:1;max-width:40ch;margin-inline:auto;}
}

/* ─── 10 · Bilder — Fotostrecke als Magazinseite ───────────────────────── */
/* V2 (Alexander): ein grosses Key Image (Kochen) und zwei kleinere statt
   vier gleicher Kacheln. Seit 30.09. (Michi) ist das erste kleine Bild die
   Gruppe vor der Jurte — ein 16:9, das ungeschnitten bleiben muss (acht
   Maenner bis zum Rand). Desktop: Kochen links 4:3 ueber beide Reihen,
   rechts oben die Gruppe in ihrem Format, darunter fuellen die Matten auf
   der Wiese den Rest (rund 3:2). Handy: alles untereinander, die Matten
   als 4:3. */
.strip{padding-block:var(--sec);}
.strip-mag{display:grid;gap:clamp(8px,1vw,14px);}
/* Ueberschrift „Weitere Einblicke“ (Michi, 01.10.): gross und schwarz wie der Satz
   unter den Bildern, aber linksbuendig */
.strip-head{font-size:var(--t-h2);letter-spacing:-.035em;line-height:1.1;}
.strip-head + .strip-mag{margin-top:clamp(32px,4vw,56px);}
.strip-mag figure{margin:0;}
.strip-mag img{display:block;width:100%;height:auto;object-fit:cover;}
.sm-key img{aspect-ratio:4/3;}
.sm-a img{aspect-ratio:16/9;}
.sm-b img{aspect-ratio:4/3;object-position:50% 60%;}
@media (min-width:900px){
  .strip-mag{grid-template-columns:62fr 38fr;grid-template-rows:auto 1fr;}
  .sm-key{grid-column:1;grid-row:1 / span 2;}
  .sm-a{grid-column:2;grid-row:1;}
  .sm-b{grid-column:2;grid-row:2;position:relative;}
  .sm-b img{position:absolute;inset:0;height:100%;aspect-ratio:auto;}
}
.strip-line{
  margin:clamp(50px,6vw,90px) auto 0;
  text-align:center;text-wrap:balance;
  font-size:var(--t-h2);font-weight:500;letter-spacing:-.035em;line-height:1.1;
  max-width:20ch;
}

/* ─── 11 · Ablauf — die vier Tage als waagerechte Zeitleiste ───────────── */
.days-line{
  margin-top:clamp(50px,7vw,100px);
  display:grid;gap:clamp(30px,4vw,56px) clamp(24px,3vw,48px);
  position:relative;
}
@media (min-width:760px){.days-line{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.days-line{grid-template-columns:repeat(4,1fr);}}
.day{position:relative;padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line);display:flex;flex-direction:column;}
/* Ein Punkt auf der Linie, in Gold — die einzige Markierung der Leiste. */
.day::before{
  content:"";position:absolute;left:0;top:-4px;
  width:7px;height:7px;background:var(--gold);
}
.day-num{
  display:block;font-size:var(--t-num);font-weight:500;
  line-height:1;letter-spacing:-.035em;color:var(--gold);
}
/* V2: Wochentag und Zeit klein ueber der Ueberschrift, die konkreten
   Beispiele des Tages als Stichwortzeile darunter. */
.day-when{margin-top:clamp(14px,1.6vw,20px);font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.day h3{margin-top:clamp(10px,1.2vw,16px);}
.day p{margin-top:12px;color:var(--muted);line-height:1.6;max-width:30ch;}
.day .tags{margin-top:auto;padding-top:clamp(18px,2vw,26px);font-size:var(--t-meta);letter-spacing:.02em;color:var(--ink);line-height:1.7;max-width:none;}
.days-note{
  margin-top:clamp(44px,5vw,72px);
  font-size:var(--t-lead);line-height:1.5;letter-spacing:-.01em;max-width:34ch;
}
.days-note::before{content:"";display:block;width:44px;height:1px;background:var(--gold);margin-bottom:clamp(18px,2vw,26px);}

/* ─── 12 · Was bleibt — sechs Erfahrungsräume im Kreis ─────────────────── */
/* Dunkles Kapitel nach Michis Vorlage (28.09.): ein Goldring mit sechs
   Punkten, die Raeume aussen daran — oben Klarheit, dann im Uhrzeigersinn.
   Handy/Tablet: dieselbe Reihenfolge untereinander an einer Goldlinie. */
.remains h2{max-width:22ch;}
.remains h2 span span{display:block;color:var(--paper-66);}
.orbit{
  margin-top:clamp(56px,7vw,110px);
  position:relative;padding-left:34px;
}
/* Handy: senkrechte Goldlinie, jeder Raum haengt mit einem Punkt daran */
.orbit::before{
  content:"";position:absolute;left:5px;top:14px;bottom:14px;width:1px;
  background:rgba(224,192,122,.45);
}
.orbit-ring{display:none;}
.room{position:relative;padding-block:clamp(18px,2.4vw,26px);}
.room::before{
  content:"";position:absolute;left:-34px;top:calc(clamp(18px,2.4vw,26px) + .5em);
  width:11px;height:11px;border-radius:50%;
  background:var(--gold-lt);box-shadow:0 0 0 4px var(--ink);
}
.room h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;line-height:1.15;color:var(--paper);}
.room p{margin-top:10px;color:var(--paper-66);line-height:1.55;max-width:30ch;}

/* Ab 900 px der Kreis: drei Spalten (Raum links · Ring · Raum rechts),
   oben und unten je ein Raum. V2: vier Raeume, die Punkte oben, rechts,
   unten, links — die seitlichen Raeume sitzen auf Ringmitte. */
@media (min-width:900px){
  .orbit{
    --D:clamp(300px,33vw,450px);
    padding-left:0;
    display:grid;
    grid-template-columns:1fr var(--D) 1fr;
    grid-template-rows:auto var(--D) auto;
    column-gap:clamp(8px,1.4vw,22px);
    row-gap:clamp(18px,2vw,30px);
    max-width:1180px;margin-inline:auto;
  }
  .orbit::before,.room::before{display:none;}
  .room{padding:0;}
  .orbit-ring{display:block;position:relative;grid-column:2;grid-row:2;}
  .orbit-ring svg{display:block;width:100%;height:100%;overflow:visible;}
  .room--n,.room--s{grid-column:1 / -1;justify-self:center;text-align:center;}
  .room--n{grid-row:1;align-self:end;}
  .room--s{grid-row:3;align-self:start;}
  .room--n p,.room--s p{margin-inline:auto;max-width:28ch;}
  .room--w{grid-column:1;grid-row:2;justify-self:end;align-self:center;text-align:right;}
  .room--e{grid-column:3;grid-row:2;justify-self:start;align-self:center;}
  .room--w p{margin-left:auto;}
  .room p{max-width:24ch;}
  .room--w h3,.room--e h3{max-width:12ch;}
  .room--w h3{margin-left:auto;}
}
.ring{fill:none;stroke:rgba(224,192,122,.6);stroke-width:1px;vector-effect:non-scaling-stroke;}
.ring-in{fill:none;stroke:rgba(249,248,246,.1);stroke-width:1px;vector-effect:non-scaling-stroke;}
.orbit-ring .dot{fill:var(--gold-lt);stroke:var(--ink);stroke-width:1.1;}
/* Der Ring zeichnet sich beim Heranscrollen einmal von oben im Uhrzeigersinn */
.js .orbit-ring .ring{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.2s cubic-bezier(.3,.6,.2,1) .2s;}
.js .orbit-ring.in .ring{stroke-dashoffset:0;}
.orbit-label{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.3em;line-height:2.4;
  text-transform:uppercase;color:var(--gold-lt);
}
.remains-close{
  margin-top:clamp(56px,7vw,110px);
  font-size:clamp(22px,2.2vw,32px);line-height:1.3;letter-spacing:-.025em;max-width:30ch;text-wrap:balance;
}
.remains-close::before{
  content:"";display:block;width:44px;height:1px;background:var(--gold-lt);
  margin-bottom:clamp(22px,2.6vw,34px);
}
.remains-close span{display:block;color:var(--paper-66);}
@media (min-width:900px){
  .remains-close{margin-inline:auto;text-align:center;}
  .remains-close::before{margin-inline:auto;}
}

/* ─── 13 · Die Männer vor dir — vier Hochkant-Videos ───────────────────── */
.voices{
  margin-top:clamp(50px,6vw,90px);
  display:grid;gap:clamp(20px,2.6vw,40px) clamp(14px,1.8vw,28px);
  grid-template-columns:1fr 1fr;
}
@media (min-width:900px){.voices{grid-template-columns:repeat(4,1fr);}}
.voice{margin:0;}
.voice video{
  display:block;width:100%;height:auto;
  aspect-ratio:9/16;object-fit:cover;
  background:var(--field);
}
/* Vor dem ersten Klick keine Browser-Leiste ueber dem Gesicht: eine eigene
   Abspielmarke im Haus-Stil (Quadrat in Haarlinie, kleines Dreieck), darunter
   ein leichter Schleier, damit sie auf hellen Postern steht. Erst beim Klick
   setzt site.js controls und startet das Video. */
.voice-frame{position:relative;}
.play{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;padding:0;background:rgba(17,28,25,.18);
  display:grid;place-items:center;cursor:pointer;
  transition:background .4s var(--ease);
}
.play:hover{background:rgba(17,28,25,.32);}
.play span{
  position:relative;width:64px;height:64px;
  border:1px solid var(--paper);
  transition:background .3s var(--ease);
}
.play span::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-40%,-50%);
  border-left:16px solid var(--paper);
  border-block:10px solid transparent;
  transition:border-left-color .3s var(--ease);
}
.play:hover span{background:var(--paper);}
.play:hover span::after{border-left-color:var(--ink);}
.play:focus-visible{outline:2px solid var(--gold-lt);outline-offset:-6px;}
.voice-frame.is-playing .play{display:none;}
/* Das laufende Video bekommt denselben Farblook wie alle Bilder
   („Moos & Champagner“) — als CSS-Naeherung, weil die Videos selbst nicht
   neu eingefaerbt sind. Erst beim Abspielen, sonst waere das (schon
   gefilterte) Vorschaubild doppelt gefiltert. Gegen den Skript-Filter
   kalibriert (Variante 2 von 3). */
.voice-frame.is-playing video{filter:saturate(.72) sepia(.2) contrast(.9) brightness(1.04);}
.voice figcaption{margin-top:clamp(14px,1.6vw,20px);}
.voice .name{max-width:30ch;font-size:var(--t-meta);letter-spacing:.02em;color:var(--muted);}
.voice .said{margin-top:8px;font-size:var(--t-body);line-height:1.5;letter-spacing:-.01em;max-width:26ch;}

/* ─── 14 · Alexander & Dorje ───────────────────────────────────────────── */
/* Bild und Einstiegstext: Handy untereinander, ab 900 px nebeneinander —
   das Bild links (rund 56 %), der Text rechts auf Hoehe der Bildmitte
   (Michi, 30.09.). */
.us-top{margin-top:clamp(44px,5vw,76px);display:grid;gap:clamp(36px,4.5vw,64px);}
.us-media{margin:0;}
.us-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.us-intro p{font-size:var(--t-lead);line-height:1.6;max-width:48ch;}
.us-pull{margin-top:clamp(18px,2vw,28px);padding-left:clamp(16px,2vw,26px);border-left:1px solid var(--gold);font-size:var(--t-lead);line-height:1.6;max-width:48ch;color:var(--muted);}
.us-intro p+p{margin-top:clamp(18px,2vw,28px);color:var(--muted);}
@media (min-width:900px){
  .us-top{grid-template-columns:56fr 44fr;column-gap:clamp(40px,6vw,100px);align-items:center;}
  .us-intro p{max-width:40ch;}
}
.bios{
  margin-top:clamp(50px,6vw,90px);
  display:grid;gap:clamp(40px,5vw,72px);
}
@media (min-width:760px){.bios{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,100px);}}
/* Name mit kleinem rundem Kopf-Icon (Michi, 30.09. — wieder wie am 28.09.),
   darunter die Bio. */
.bio{border-top:1px solid var(--line);padding-top:clamp(20px,2.2vw,30px);}
.bio h3{color:var(--gold);display:flex;align-items:center;gap:16px;}
.bio-icon{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:var(--field);}
.bio p{margin-top:14px;color:var(--muted);max-width:40ch;line-height:1.6;}
.bio p:first-of-type{margin-top:clamp(14px,1.6vw,20px);color:var(--ink);}
.bio-more{margin-top:14px;}
.bio-more summary{cursor:pointer;color:var(--gold);list-style:none;display:inline-block;}
.bio-more summary::-webkit-details-marker{display:none;}
.bio-more summary:hover{text-decoration:underline;text-underline-offset:4px;}
.bio-more summary:focus-visible{outline:1px solid var(--gold);outline-offset:4px;}
.bio-more[open] summary{margin-bottom:2px;}
.bio .bio-more p:first-of-type{margin-top:14px;color:var(--muted);}
.us-quote{
  margin-top:clamp(60px,7vw,110px);padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--line);
  font-size:var(--t-h3);line-height:1.4;letter-spacing:-.02em;max-width:48ch;
}

/* ─── 15 · Der Rahmen — Eckdaten und Ort ───────────────────────────────── */
.frame h2 span span{display:block;color:var(--muted);}
/* Location-Slider (Michi, 28.09.): die Bilder gross, das aktuelle genau so
   breit wie der Inhalt, die Nachbarn schauen am Rand herein. Wischen ueber
   scroll-snap (nativ, auch ohne JavaScript); site.js schaltet alle 5 s
   weiter, haelt bei Beruehrung/Maus/Fokus an und fuehrt Zaehler + Linie. */
.slider{margin-top:clamp(44px,5vw,76px);}
.slider-track{
  --side:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  display:flex;gap:clamp(10px,1.2vw,18px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--side);
  padding-inline:var(--side);
  scrollbar-width:none;
}
.slider-track::-webkit-scrollbar{display:none;}
.slider-track:focus-visible{outline-offset:-2px;}
.slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always;}
.slide img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  max-height:calc(100svh - var(--head) - 120px);
  background:var(--field);
}
/* Handy: hoeherer Schnitt, damit die Bilder wirklich gross wirken */
@media (max-width:700px){.slide img{aspect-ratio:4/3;}}
/* Desktop (Michi, 28.09.): nicht mehr ein Bild ueber die ganze Breite —
   das wurde durch die Hoehenbegrenzung zum schmalen Streifen. Stattdessen
   fast quadratische Bilder (4:3) nebeneinander, knapp zwei im Blick, das
   dritte schaut herein. So ist jedes Bild fast ganz zu sehen. */
@media (min-width:900px){
  .slide{flex-basis:clamp(420px,42vw,640px);}
  .slide img{aspect-ratio:4/3;max-height:none;}
}
.slider-bar{display:none;}
.js .slider-bar{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(16px,1.8vw,24px);
}
.slider-line{flex:1;height:1px;background:var(--line);position:relative;}
.slider-fill{position:absolute;left:0;top:0;height:1px;width:12.5%;background:var(--gold);transition:width .6s var(--ease);}
.slider-btn{
  width:48px;height:48px;flex:none;position:relative;
  border:1px solid var(--line);background:transparent;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.slider-btn::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-top:1px solid var(--ink);border-right:1px solid var(--ink);
}
.slider-btn--next::after{transform:translate(-65%,-50%) rotate(45deg);}
.slider-btn--prev::after{transform:translate(-35%,-50%) rotate(-135deg);}
.slider-btn:hover{border-color:var(--ink);}
.frame .facts{margin-top:clamp(44px,5vw,76px);}
@media (min-width:760px){
  .frame .facts{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,100px);border-top:0;}
  .frame .facts div:nth-child(-n+2){border-top:1px solid var(--line);}
}
.facts{border-top:1px solid var(--line);}
.facts div{
  display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:16px;
  padding-block:clamp(14px,1.6vw,20px);border-bottom:1px solid var(--line);
}
.facts dt{font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:.35em;}
.facts dd{font-size:var(--t-lead);line-height:1.4;letter-spacing:-.01em;}
.facts dd .meta{display:block;margin-top:4px;}

/* ─── 16 · Für wen — Fit gegen Anti-Fit ────────────────────────────────── */
.fit-lead{margin-top:clamp(22px,2.4vw,32px);font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.35;color:var(--muted);max-width:30ch;}
.fit{
  margin-top:clamp(50px,6vw,88px);
  display:grid;gap:clamp(40px,5vw,64px);
  position:relative;
}
@media (min-width:860px){
  .fit{grid-template-columns:1fr 1fr;column-gap:clamp(56px,8vw,120px);}
  .fit::before{
    content:"";position:absolute;top:0;bottom:0;left:50%;
    width:1px;background:var(--line);
  }
}
@media (max-width:859px){
  .fit--no{padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--line);}
}
.fit h3{
  font-size:var(--t-eyebrow);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:16px;border-bottom:1px solid var(--ink);
  text-wrap:pretty;line-height:1.7;
}
.fit--no h3{color:var(--muted);border-bottom-color:var(--line);}
.fit li{
  display:flex;gap:14px;align-items:flex-start;
  border-bottom:1px solid var(--line);
  padding-block:clamp(16px,1.8vw,22px);
}
.fit li span{flex:1;max-width:40ch;}
.fit--no li{color:var(--muted);}
.ico--sm{width:18px;height:18px;margin-top:calc((1.65em - 18px) / 2);}
.fit--no .ico{stroke:var(--muted);}
.fit-cta{margin-top:clamp(40px,4.5vw,64px);}

/* ─── 17 · Fragen — Accordion ohne Schmuck ─────────────────────────────── */
.faq .wrap{max-width:960px;}
.faq-list{margin-top:clamp(44px,5vw,72px);border-top:1px solid var(--line);}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-block:clamp(18px,2vw,26px);
  font-size:var(--t-lead);line-height:1.4;letter-spacing:-.01em;
}
.faq-list summary::-webkit-details-marker{display:none;}
/* Das Plus: zwei Haarlinien, eine dreht beim Oeffnen weg. */
.faq-list summary::after{
  content:"";flex:none;width:14px;height:14px;align-self:center;
  background:
    linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;
  transition:transform .4s var(--ease);
}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list details > p{padding-bottom:clamp(18px,2vw,26px);color:var(--muted);max-width:56ch;}
/* V2: mehrere Absaetze je Antwort */
.faq-a{padding-bottom:clamp(22px,2.4vw,32px);}
.faq-a p{color:var(--muted);max-width:56ch;line-height:1.6;}
.faq-a p+p{margin-top:.9em;}

/* ─── 18 · Final — dunkel, ein Bild, ein Satz ──────────────────────────── */
.final{
  position:relative;isolation:isolate;
  padding-block:clamp(120px,18vw,260px);
  overflow:hidden;
}
.final-bg{
  position:absolute;inset:0;z-index:-1;
}
.final-bg img{
  width:100%;height:100%;object-fit:cover;
  opacity:.22;
}
/* Verlauf von unten, damit Satz und Button sicher lesbar bleiben */
.final-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(17,28,25,.92) 0%, rgba(17,28,25,.55) 55%, rgba(17,28,25,.35) 100%);
}
.final .mark-small{
  font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt);
}
.final h2{margin-top:clamp(26px,3vw,44px);font-size:var(--t-h1);line-height:1.04;max-width:16ch;}
.final h2 span span{display:block;color:var(--paper-66);}
.final .two{margin-top:clamp(34px,4vw,56px);font-size:var(--t-h2);font-weight:500;letter-spacing:-.03em;line-height:1.15;}
.final .two span{display:block;}
.final .btn{margin-top:clamp(40px,4.6vw,64px);}
/* V2: Mikrotext direkt unter dem Button */
.final .micro{margin-top:16px;font-size:var(--t-meta);letter-spacing:.02em;color:var(--paper-66);}
.final .next{
  margin-top:clamp(30px,3.4vw,48px);
  font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-66);max-width:none;
}

/* ─── 19 · Fußzeile ────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:clamp(38px,4vw,60px);}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:baseline;justify-content:space-between;}
.foot a,.foot p{font-size:var(--t-meta);color:var(--muted);}
.foot nav{display:flex;flex-wrap:wrap;gap:18px 28px;}
.foot a:hover{color:var(--ink);}

/* ─── 21 · Rechtstexte ─────────────────────────────────────────────────── */
.legal{padding-top:calc(var(--head) + clamp(60px,9vw,130px));}
.legal h2{font-size:var(--t-h3);margin-top:clamp(40px,4vw,64px);max-width:40ch;}
.legal p,.legal li{color:var(--muted);margin-top:16px;}
.legal ul{margin-top:8px;}
.legal li{padding-left:26px;position:relative;}
.legal li::before{content:"";position:absolute;left:0;top:.72em;width:13px;height:1px;background:var(--gold);}

/* ─── 22 · Bewegung ────────────────────────────────────────────────────── */
/* Versteckt wird nur, wenn JavaScript läuft. Eine Animation darf nie
   darüber entscheiden, ob ein Text existiert. */
.js [data-reveal]{opacity:0;transform:translateY(16px);}
[data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}

.mask{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;}
.js .mask[data-reveal],.mask[data-reveal].in{opacity:1;transform:none;}
.js .mask > span{display:block;transform:translateY(112%);}
.mask.in > span{
  transform:none;
  transition:transform 1.05s cubic-bezier(.16,.84,.28,1);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none;}
  .mask{overflow:visible;padding-bottom:0;margin-bottom:0;}
  .mask > span,.mask.in > span{transform:none;transition:none;}
  .mirror-lines p{color:var(--paper);transition:none;}
  .js .mirror-lines p > span{opacity:1!important;transform:none!important;transition:none!important;}
  .js .orbit-ring .ring{stroke-dashoffset:0;transition:none;}
  .nav a::after,.btn::before,.faq-list summary::after{transition:none;}
  *{animation:none!important;}
}