/* ============================================================
   Erfahrungsraum, Mockup-Stil
   Dunkler Hero, heller Körper, dunkler Abschluss.

   Das hier ist das Entwurfsblatt, nicht der Produktivstand.
   Wenn es sitzt, wandert es nach src/app/globals.css.

   Aufbau
     1  Marken-Token, dunkel und hell
     2  Grundlagen
     3  Bausteine (Knopf, Kicker, Karte, Marker)
     4  Kopf und die klebende Leiste
     5  Hero
     6  Datenband
     7  Die zwei Abende
     8  Für wen
     9  Melanie & Oliver, Marken
    10  Stimmen
    11  Fragen
    12  Abschluss und Fuss
    13  Anmeldung
    14  Bestätigung
   ============================================================ */

/* ── 0. Schriften ─────────────────────────────────────────── */
/* Aus dem Projekt, nicht von Google. Auf einer deutschen Seite mit
   bezahltem Verkehr ist ein Aufruf an fonts.gstatic.com eine
   Übermittlung der Besucher-IP in die USA, für die es keine
   Rechtsgrundlage gibt.
   Nur der latin-Ausschnitt und nur die vier Schnitte, die wirklich
   vorkommen. Zusammen 95 KB statt 380 KB für das ganze Kit.
   swap: die Seite steht sofort in der Ersatzschrift und wechselt,
   sobald die echte da ist. Nichts bleibt unsichtbar. */

@font-face{
  font-family:'Cormorant Garamond';
  src:url(../public/schriften/cormorant-garamond-400-latin.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url(../public/schriften/inter-400-latin.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url(../public/schriften/inter-500-latin.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url(../public/schriften/inter-600-latin.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* ── 1. Token ─────────────────────────────────────────────── */

:root{
  /* Dunkel, unverändert aus dem Brandkit */
  --ink-950:#0E0F0D;
  --ink-900:#161814;
  --ink-800:#22241E;
  --ink-700:#34372F;
  --ink-600:#4E5247;
  --ink-500:#6F7467;

  --gold-200:#F7CA97;
  --gold-300:#E8B173;
  --gold-400:#D79850;
  --gold-500:#CC8533;
  --gold-600:#A16A2B;
  --bronze:#3A250E;

  --sage-200:#CDD0C8;
  --sage-300:#AFB3A8;
  --sage-400:#8E9385;

  --cream-50:#F1ECE4;
  --cream-100:#E4DED3;

  /* Hell. Neu, weil das Brandkit nur die dunkle Seite kennt.
     Der Grundton ist derselbe warme Cremeton, nur als Fläche
     statt als Schriftfarbe. */
  --hell-bg:#F5F2EC;
  --hell-bg-tief:#EBE6DB;
  --hell-karte:#FBFAF7;
  --hell-titel:#14160F;
  --hell-text:#3D4137;
  --hell-schwach:#6F7467;
  --hell-linie:#DFD9CC;

  --serif:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Abstände. Deutlich enger als vorher: die alte Seite war auf
     dem Rechner 10.700 px lang, das ist für bezahlten Verkehr
     etwa das Doppelte des Sinnvollen. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:44px; --s8:64px; --s9:88px; --s10:120px;

  --breite:1180px;
  --rundung:10px;
}

/* ── 2. Grundlagen ────────────────────────────────────────── */

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

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

body{
  margin:0;
  background:var(--hell-bg);
  color:var(--hell-text);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* Der Rahmen jeder Sektion. Eine Klasse, ein Wert, sonst
   entsteht wieder das Gefühl von zufälligen Abständen. */
.huelle{
  width:min(100% - 2*var(--s5),var(--breite));
  margin-inline:auto;
}
.huelle--schmal{width:min(100% - 2*var(--s5),780px);}

/* Die Luft zwischen den Sektionen. Vorher lief alles selbst auf einem
   grossen Bildschirm ineinander: der Blick sah eine lange Wand statt
   sieben Aussagen. Der grosse Wert greift ab rund 1330 px Breite, der
   mittlere schon auf dem MacBook. */
.block{padding-block:clamp(72px,9vw,var(--s10));}
.block--dunkel{background:var(--ink-950);color:var(--sage-200);}
.block--tief{background:var(--hell-bg-tief);}

/* Überschriften: Serife nur im Hero, sonst Sans. Genau da
   liegt der Unterschied zwischen edel und altbacken. */
.h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.5rem,5.2vw,4.05rem);
  line-height:1.06;letter-spacing:-.01em;
  color:var(--cream-50);margin:0;
  text-wrap:balance;
}
.h1 em{font-style:normal;color:var(--gold-400);display:block;}

.h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.14;letter-spacing:-.022em;
  color:var(--hell-titel);margin:0 0 var(--s5);
  text-wrap:balance;
}
.block--dunkel .h2{color:var(--cream-50);}
.h2 em{font-style:normal;color:var(--gold-600);}
.block--dunkel .h2 em{color:var(--gold-400);}

.h3{
  font-family:var(--sans);font-weight:500;
  font-size:1.22rem;line-height:1.3;letter-spacing:-.012em;
  color:var(--hell-titel);margin:0 0 var(--s2);
}
.block--dunkel .h3{color:var(--cream-50);}

.vor{
  font-size:1.16rem;line-height:1.62;max-width:60ch;
  color:var(--hell-text);margin:0 0 var(--s6);
}
.block--dunkel .vor{color:var(--sage-200);}

p{margin:0 0 var(--s4);}
p:last-child{margin-bottom:0;}

.klein{font-size:.94rem;color:var(--hell-schwach);}
.block--dunkel .klein{color:var(--sage-400);}

/* ── 3. Bausteine ─────────────────────────────────────────── */

.kicker{
  font-size:.7rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-600);
  margin:0 0 var(--s3);
}
.block--dunkel .kicker{color:var(--gold-400);}

/* Der Knopf sieht überall gleich aus, hell wie dunkel. Vier
   verschieden aussehende Handlungsaufforderungen waren einer
   der Gründe, warum die alte Seite gleichzeitig voll und
   flach wirkte. */
/* Heller als die Markenfarbe und mit einem Verlauf statt einer
   Fläche. Auf dem fast schwarzen Grund ist #CC8533 zwar korrekt,
   aber leise. Der helle Rand oben lässt den Knopf aus der Fläche
   heraustreten, statt darin zu liegen. */
.knopf{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:54px;padding:0 var(--s6);
  background:linear-gradient(176deg,var(--gold-200) 0%,var(--gold-400) 52%,var(--gold-500) 100%);
  color:#17180F;
  font-family:var(--sans);font-size:1.02rem;font-weight:600;letter-spacing:.005em;
  text-decoration:none;border:0;border-radius:var(--rundung);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 22px rgba(204,133,51,.26);
  cursor:pointer;transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;
}
.knopf:hover{
  filter:brightness(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px rgba(204,133,51,.36);
  transform:translateY(-1px);
}
.knopf:active{transform:translateY(1px);}
.knopf--voll{width:100%;}
.knopf--gross{min-height:62px;padding:0 var(--s7);font-size:1.08rem;}

/* Auf dem Handy nimmt der Hauptknopf die ganze Breite. Ein Knopf, der
   dort nur so breit ist wie sein Text, sieht aus wie ein Hinweis und
   wird auch so behandelt. Kopf und klebende Leiste bleiben aussen vor,
   die haben ihre eigene Grösse.
   Dazu weniger Polster und eine Spur kleinere Schrift: mit 44 px an
   jeder Seite bricht "Jetzt kostenlosen Platz sichern" auf einem
   360-px-Gerät in zwei Zeilen. */
@media (max-width:600px){
  .hero .knopf,.mitte-cta .knopf,.abschluss .knopf{width:100%;}
  .knopf--gross{padding-inline:var(--s4);font-size:1rem;}
}
/* Unter 400 px reicht es auch damit nicht. Statt den Text zu kürzen
   bricht er dort sauber um: zwei ausgeglichene Zeilen, enger gesetzt,
   und der Knopf wächst mit. Das liest sich besser als eine Zeile, die
   an der falschen Stelle abknickt. */
@media (max-width:400px){
  .knopf--gross{padding-inline:var(--s3);font-size:.98rem;}
}
.knopf{line-height:1.25;text-wrap:balance;padding-block:12px;}
/* Der leise Knopf. Auf dunklem Grund heller werden, auf hellem
   dunkler: eine feste Farbe für beide gab es hier vorher, und auf der
   Bestätigungsseite lief der Knopf beim Überfahren ins Schwarze. */
.knopf--stumm{
  background:transparent;color:var(--cream-50);
  border:1px solid var(--ink-600);box-shadow:none;font-weight:500;
}
.knopf--stumm:hover{background:var(--ink-800);box-shadow:none;}
.knopf--stumm::after{display:none;}

.block:not(.block--dunkel) .knopf--stumm,
.anmelde .knopf--stumm{
  color:var(--hell-titel);border-color:var(--hell-linie);background:#fff;
}
.block:not(.block--dunkel) .knopf--stumm:hover,
.anmelde .knopf--stumm:hover{
  background:var(--hell-bg-tief);border-color:var(--gold-500);color:var(--hell-titel);
}

/* Ein Lichtstreifen, der alle paar Sekunden über den Knopf zieht.
   Kein Funkeln und kein Rauch: beides zieht auf einer Seite über
   Nervensystem und Ruhe den Ton nach unten. Ein einzelner Streifen
   fängt den Blick und bleibt still genug für die Marke.
   Die Pause ist der eigentliche Trick. Ein Streifen alle sechs
   Sekunden wird bemerkt, ein durchlaufender wird ausgeblendet. */
@media (prefers-reduced-motion:no-preference){
  /* Verschoben wird über transform und nicht über left. left rechnet
     bei jedem Bild das Layout der ganzen Seite neu, und auf dem Handy
     ruckelt dann das Scrollen, solange irgendein Knopf im Speicher
     steht. transform läuft auf der Grafikeinheit. */
  .knopf::after{
    content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:28%;
    background:linear-gradient(100deg,
      transparent 0%,rgba(255,255,255,.62) 50%,transparent 100%);
    pointer-events:none;will-change:transform;
    animation:schimmer 6s cubic-bezier(.3,0,.2,1) infinite;
  }
  /* Die Prozente beziehen sich auf die eigene Breite, also auf 28 %
     des Knopfes. Einmal ganz durch sind rund 380 %. */
  @keyframes schimmer{
    0%{transform:translateX(-130%) skewX(-16deg);}
    26%,100%{transform:translateX(430%) skewX(-16deg);}
  }
}

/* Im Kopf atmet der Knopf zusätzlich. Er steht dort neben dem Logo
   und ohne diesen Schein liest ihn das Auge als Teil der Leiste. */
@media (prefers-reduced-motion:no-preference){
  .kopf .knopf{animation:pochen 3.6s ease-in-out infinite;}
  @keyframes pochen{
    0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 0 rgba(232,177,115,.5);}
    50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 7px rgba(232,177,115,0);}
  }
}

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--gold-300);outline-offset:3px;
}

/* Die Zeile unter jedem Knopf. Trägt die Einwände, bevor sie
   entstehen: was es kostet, ob aufgezeichnet wird. */
.beweis{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-top:var(--s5);padding:0;list-style:none;
  font-size:.9rem;color:var(--sage-300);
}
.block:not(.block--dunkel) .beweis{color:var(--hell-schwach);}
.beweis li{display:flex;align-items:center;gap:var(--s2);}
.beweis li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold-500);flex:0 0 7px;
}

.karte{
  background:var(--hell-karte);
  border:1px solid var(--hell-linie);
  border-radius:var(--rundung);
  padding:var(--s6);
}

/* Marker als offener Ring, nie als Strich. Ein Spiegelstrich
   liest sich sofort wie eine Aufzählung aus dem Textgenerator. */
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);}
.punkte li{position:relative;padding-left:26px;}
.punkte li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--gold-500);
}
.punkte--nein li::before{
  border-color:var(--hell-linie);
  background:var(--hell-linie);
}

/* ── 4. Kopf und klebende Leiste ──────────────────────────── */

.kopf{
  position:sticky;top:0;z-index:40;
  background:rgba(14,15,13,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(52,55,47,.7);
}
.kopf__innen{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:70px;
}
/* Das Lockup aus kit/logo/hsb-logo-horizontal.svg, unverändert und
   inline. Als <img> eingebunden bliebe currentColor wirkungslos, das
   Zeichen käme schwarz. */
/* Signet und Wortmarke werden getrennt gesetzt. In einer gemeinsamen
   Zeichnung hängen ihre Grössen aneinander, und das Verhältnis des
   Originals lässt die Schrift in einer 40-px-Leiste auf vier Pixel
   schrumpfen.
   Kein vector-effect mehr. Eine feste Strichstärke in Bildschirmpixeln
   war der falsche Weg: die konzentrischen Ringe im Signet liegen bei
   dieser Grösse gut einen Pixel auseinander, und ein Strich von
   anderthalb Pixeln macht daraus eine Fläche. Die Stärken stehen jetzt
   in der Zeichnung und skalieren mit. */
.kopf__marke{display:flex;align-items:center;gap:14px;text-decoration:none;}
.kopf__signet{height:42px;width:auto;color:var(--cream-50);display:block;flex:0 0 auto;}
/* 13 px Höhe der Versalien, also etwa Fliesstextgrösse. Darunter liest
   sich die Wortmarke als Zierrat statt als Name. */
.kopf__wort{height:13px;width:auto;color:var(--cream-50);display:block;}
.kopf__termin{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage-400);
}
/* Gedrungen: niedriger, enger, dafür fetter und mit mehr Sperrung.
   Ein flacher, breiter Knopf liest sich in einer 70-px-Leiste als
   Schaltfläche, ein hoher als zweites Logo. */
   Unter 44 px geht nicht: das ist die kleinste Fläche, die sich
   sicher treffen lässt. Gedrungen wird der Knopf über das engere
   Polster und die kleinere Schrift, nicht über die Höhe. */
.kopf .knopf{
  min-height:44px;padding:0 var(--s5);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  border-radius:8px;
}

/* Mobil steht der Knopf schon in der Leiste unten und im Hero. Ein
   dritter oben macht die Seite nur laut. */
@media (max-width:860px){
  .kopf__termin{display:none;}
}
@media (max-width:760px){
  .kopf .knopf{display:none;}
  .kopf__signet{height:34px;}
  .kopf__wort{height:11px;}
  .kopf__marke{gap:11px;}
  .kopf__innen{min-height:58px;justify-content:flex-start;}
}
/* Ganz schmal trägt nur noch das Zeichen. Die Wortmarke wäre bei
   390 px Fensterbreite entweder winzig oder sie schöbe den Rest raus. */
@media (max-width:430px){
  .kopf__wort{display:none;}
  .kopf__signet{height:36px;}
}

/* Mobil klebt der Knopf unten. Auf dem Handy ist das der
   Unterschied zwischen "später vielleicht" und jetzt.
   Er fährt aber erst hoch, wenn der Hero durch ist. Solange der
   grosse Knopf im Bild steht, wäre die Leiste doppelt. */
.leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;gap:var(--s4);align-items:center;
  padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(14,15,13,.94);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--ink-700);
  transform:translateY(115%);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.leiste.sichtbar{transform:none;}
.leiste__text{font-size:.82rem;line-height:1.3;color:var(--sage-300);flex:1;}
.leiste__text b{display:block;color:var(--cream-50);font-weight:500;}
@media (max-width:760px){
  .leiste{display:flex;}
  /* Nur die Startseite hat die Leiste. Ohne diese Bedingung stehen
     auf Anmelde- und Dankeseite 92 leere Pixel unter dem Fuss. */
  body:has(.leiste){padding-bottom:92px;}
}

/* ── 5. Hero ──────────────────────────────────────────────── */

.hero{
  position:relative;overflow:hidden;
  background:var(--ink-950);color:var(--sage-200);
  padding-block:clamp(48px,7vw,86px) clamp(48px,6vw,72px);
}
/* Die eine Lichtquelle der Marke, unten mittig. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 108%,
    rgba(204,133,51,.20) 0%,rgba(204,133,51,.06) 45%,transparent 74%);
}
/* Das Licht atmet, im selben Takt wie der Ring weiter unten: sechzehn
   Sekunden für einen Zug. Bewusst so langsam, dass man es nicht als
   Animation liest, sondern die Fläche nur lebendig wirkt. */
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:glut 16s ease-in-out infinite;}
  @keyframes glut{
    0%,100%{opacity:.72;transform:scale(1);}
    45%{opacity:1;transform:scale(1.06);}
  }
}
.hero__raster{
  position:relative;display:grid;gap:clamp(32px,5vw,64px);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:920px){
  .hero__raster{grid-template-columns:1.08fr .92fr;}
}
.hero__vor{
  font-size:clamp(1.08rem,1.6vw,1.24rem);line-height:1.6;
  color:var(--sage-200);max-width:46ch;margin:var(--s5) 0 var(--s6);
}
.hero__bild{
  position:relative;border-radius:var(--rundung);overflow:hidden;
  border:1px solid var(--ink-700);
}
.hero__bild img{width:100%;}
@media (max-width:919px){
  .hero__bild{max-width:420px;margin-inline:auto;}
}

/* ── 6. Datenband ─────────────────────────────────────────── */

.band{background:var(--ink-900);border-block:1px solid var(--ink-700);}
.band__raster{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;
}
@media (min-width:820px){.band__raster{grid-template-columns:repeat(4,1fr);}}
.band__feld{
  padding:var(--s5) var(--s5);
  border-right:1px solid var(--ink-700);
  border-bottom:1px solid var(--ink-700);
}
@media (min-width:820px){
  .band__feld{border-bottom:0;}
  .band__feld:last-child{border-right:0;}
}
@media (max-width:819px){
  .band__feld:nth-child(2n){border-right:0;}
  .band__feld:nth-last-child(-n+2){border-bottom:0;}
}
.band__kopf{
  display:flex;align-items:center;gap:var(--s2);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-400);margin:0 0 var(--s2);
}
/* Emoji statt gezeichnetem Zeichen: es liest sich auf einen Blick
   und braucht keine eigene Datei. Der Preis ist, dass jedes System
   seinen eigenen Satz zeichnet. */
.band__kopf span{font-size:1.05rem;line-height:1;letter-spacing:0;}
.band__wert{font-size:1.02rem;color:var(--cream-50);margin:0;line-height:1.4;}

/* ── 6a. Vertrauenszeile direkt unter dem Band ────────────── */
/* Die Fremdlogos stehen weiter unten noch einmal gross. Hier oben
   arbeiten sie anders: sie beantworten die Frage "wer sind die
   eigentlich" in dem Moment, in dem sie aufkommt, nämlich direkt
   nach der Überschrift. Deshalb klein, ruhig und ohne Rahmen. */
.vertrauen{
  background:var(--ink-900);
  border-bottom:1px solid var(--ink-700);
  padding-block:var(--s5);
}
.vertrauen__innen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s4) clamp(26px,4vw,54px);
}
.vertrauen__wort{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage-400);margin:0;
}
/* Hier oben stehen nur Wortmarken. Das Siegel der Entrepreneur
   University ist ein Ring mit Schrift darin und wird bei dieser Grösse
   zu einem grauen Fleck, der eher nach Wasserzeichen aussieht als nach
   Auszeichnung. Es steht weiter unten gross und liest sich dort. */
.vertrauen img{height:27px;width:auto;opacity:.66;}
.vertrauen img.hoch{height:34px;}
@media (max-width:600px){
  .vertrauen img{height:21px;}
  .vertrauen img.hoch{height:26px;}
  .vertrauen__innen{gap:var(--s3) var(--s5);}
  /* Auf dem Handy tragen drei Zeichen dieselbe Aussage wie vier,
     und die Zeile bleibt einzeilig. */
  .vertrauen img:nth-of-type(n+4){display:none;}
}

/* ── 6b. Wo du gerade stehst ──────────────────────────────── */
/* Vier Sätze mit je einem Zeichen davor. Derselbe Inhalt als
   Fliesstext wären acht Zeilen, die niemand liest. */

.stand{display:grid;gap:var(--s5);grid-template-columns:1fr;}
@media (min-width:640px){.stand{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.stand{grid-template-columns:repeat(4,1fr);}}

.stand__feld{
  background:var(--hell-karte);border:1px solid var(--hell-linie);
  border-radius:var(--rundung);padding:var(--s6);
}
.stand__feld svg{
  width:30px;height:30px;color:var(--gold-500);
  margin-bottom:var(--s4);display:block;
}
.stand__feld p{font-size:1.02rem;line-height:1.5;color:var(--hell-titel);margin:0;}

.stand__schluss{
  margin-top:var(--s7);padding-top:var(--s6);
  border-top:1px solid var(--hell-linie);
  font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.45;
  color:var(--hell-titel);max-width:52ch;text-wrap:balance;
}
.stand__schluss em{font-style:normal;color:var(--gold-600);}

/* ── 6c. Der Atemzug ──────────────────────────────────────── */
/* Der eine Abschnitt, der nichts erklärt, sondern machen lässt.
   Vier Sekunden ein, vier halten, sechs aus, zwei Ruhe. */

.atem{text-align:center;}
.atem__ring{
  position:relative;width:min(260px,62vw);aspect-ratio:1;
  margin:var(--s7) auto 0;display:grid;place-items:center;
}
/* Der äussere Ring steht still und gibt das Ziel an. Er muss hell
   genug sein, um auf dem fast schwarzen Grund zu stehen, sonst
   fehlt der Scheibe der Bezugspunkt. */
.atem__ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--ink-600);
}
.atem__scheibe{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--gold-500);
  background:radial-gradient(circle at 50% 50%,
    rgba(204,133,51,.20) 0%,rgba(204,133,51,.05) 55%,transparent 72%);
  transform:scale(.58);
}
.atem__wort{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  align-content:center;gap:var(--s2);
  font-family:var(--serif);font-size:1.9rem;color:var(--cream-50);
  opacity:0;
}
/* Ohne laufende Animation bleibt das erste Wort stehen, statt
   dass die Fläche leer ist. */
.atem__wort:first-of-type{opacity:1;}

@media (prefers-reduced-motion:no-preference){
  .atem__scheibe{animation:atmen 16s ease-in-out infinite;}
  .atem__wort:nth-of-type(1){animation:wort1 16s linear infinite;}
  .atem__wort:nth-of-type(2){animation:wort2 16s linear infinite;}
  .atem__wort:nth-of-type(3){animation:wort3 16s linear infinite;}
  .atem__wort:nth-of-type(4){animation:wort4 16s linear infinite;}
}

/* Übernimmt das Skript, schaltet CSS ab. Beide gleichzeitig laufen
   zu lassen ginge schief: zwei Zeitachsen, die getrennt starten,
   driften nach ein paar Minuten sichtbar auseinander. */
.atem__ring.gefuehrt .atem__scheibe,
.atem__ring.gefuehrt .atem__wort{animation:none;}
.atem__ring.gefuehrt .atem__wort{opacity:0;}
.atem__ring.gefuehrt .atem__wort.jetzt{opacity:1;}

/* Der Sekundenzähler. Steht unter dem Wort und macht aus dem Ring
   eine Anleitung: man weiss, wie lange die Phase noch geht. */
.atem__zahl{
  font-family:var(--sans);font-size:.92rem;font-weight:500;letter-spacing:.2em;
  color:var(--gold-300);font-variant-numeric:tabular-nums;
}
.atem__ring:not(.gefuehrt) .atem__zahl{display:none;}

/* Der Fortschrittsbogen auf dem Aussenring, aus dem Entwurf
   übernommen. Ein Kegelverlauf, aus dem die Mitte ausmaskiert ist.
   closest-side ist entscheidend: ohne das rechnet der Verlauf gegen
   die Ecke des Quadrats statt gegen den Radius, und aus dem Bogen
   wird ein vierzig Pixel breiter Reifen. */
.atem__bogen{
  position:absolute;inset:0;border-radius:50%;opacity:0;z-index:1;
  mask:radial-gradient(circle closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  -webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
}
.atem__ring.gefuehrt .atem__bogen{opacity:1;}
.atem__ring.gefuehrt::before{opacity:0;}
@keyframes atmen{
  0%{transform:scale(.58);}
  25%{transform:scale(1);}
  50%{transform:scale(1);}
  87.5%{transform:scale(.58);}
  100%{transform:scale(.58);}
}
/* Je Phase eigene Keyframes. Ein gemeinsamer Satz mit
   Verzögerung lässt die Wörter am Zyklusende überlappen. */
@keyframes wort1{0%,23%{opacity:1;} 25%,100%{opacity:0;}}
@keyframes wort2{0%,23%{opacity:0;} 25%,48%{opacity:1;} 50%,100%{opacity:0;}}
@keyframes wort3{0%,48%{opacity:0;} 50%,85.5%{opacity:1;} 87.5%,100%{opacity:0;}}
@keyframes wort4{0%,85.5%{opacity:0;} 87.5%,98%{opacity:1;} 100%{opacity:0;}}

/* Die vier Phasen als Leiste, aus dem Entwurf übernommen. Die
   Segmentbreite folgt der Dauer, deshalb ist "6 aus" das breiteste.
   Damit sieht man den ganzen Zyklus auf einen Blick, nicht nur die
   Sekunde, in der man gerade steckt. */
.atem__takt{
  display:flex;gap:var(--s3);
  width:min(100%,460px);margin:var(--s7) auto 0;padding:0;list-style:none;
}
.atem__takt li{display:grid;gap:var(--s2);text-align:left;}
.atem__takt li:nth-child(1){flex:4;}
.atem__takt li:nth-child(2){flex:4;}
.atem__takt li:nth-child(3){flex:6;}
.atem__takt li:nth-child(4){flex:2;}
.atem__balken{height:2px;background:var(--ink-700);position:relative;overflow:hidden;}
.atem__balken i{
  position:absolute;inset:0 auto 0 0;width:0;
  background:var(--gold-400);display:block;
}
.atem__takt span{
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-500);transition:color .24s linear;
}
.atem__takt li.jetzt span{color:var(--cream-50);}
/* Ohne Skript füllt sich nichts. Dann steht die Leiste still da und
   nennt trotzdem den Takt. */
.atem__ring:not(.gefuehrt) ~ .atem__takt .atem__balken{display:none;}

/* ── 7. Die zwei Abende ───────────────────────────────────── */

.abende{display:grid;gap:var(--s6);grid-template-columns:1fr;}
@media (min-width:900px){.abende{grid-template-columns:1fr 1fr;gap:var(--s7);}}

.abend{
  background:var(--hell-karte);
  border:1px solid var(--hell-linie);
  border-radius:var(--rundung);
  overflow:hidden;display:flex;flex-direction:column;
}
.abend__bild{aspect-ratio:16/9;overflow:hidden;background:var(--ink-900);}
.abend__bild img{width:100%;height:100%;object-fit:cover;}
.abend__innen{padding:var(--s6);display:flex;flex-direction:column;flex:1;}
.abend__marke{
  display:inline-flex;align-items:center;gap:var(--s2);
  align-self:flex-start;margin-bottom:var(--s4);
  padding:5px var(--s3) 5px var(--s2);border-radius:99px;
  background:rgba(204,133,51,.13);
  font-size:.72rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-600);
}
.abend__marke svg{width:17px;height:17px;}
.abend__wann{
  font-size:.9rem;color:var(--hell-schwach);margin:0 0 var(--s4);
}
.abend__mit{
  margin-top:auto;padding-top:var(--s5);
  border-top:1px solid var(--hell-linie);
}
.abend__mit .h3{font-size:.98rem;}

.mitte-cta{
  display:grid;justify-items:center;gap:var(--s3);
  margin:clamp(40px,5vw,var(--s8)) 0 0;text-align:center;
}

/* ── 8. Für wen ───────────────────────────────────────────── */

.fuerwen{display:grid;gap:var(--s6);grid-template-columns:1fr;}
@media (min-width:820px){.fuerwen{grid-template-columns:1fr 1fr;gap:var(--s7);}}
.fuerwen__spalte{
  padding:var(--s6);border-radius:var(--rundung);
  border:1px solid var(--hell-linie);
}
.fuerwen__spalte--ja{background:var(--hell-karte);}
.fuerwen__spalte--nein{background:transparent;}

/* Haken und Kreuz als Emoji. Bewusst kein gezeichnetes Zeichen: die
   beiden sind so bekannt, dass sie ohne Lesen wirken, und genau das
   ist hier der Zweck. */
.marker{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s4);}
.marker li{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);align-items:start;}
.marker li::before{content:"✅";font-size:1.1rem;line-height:1.5;}
.marker--nein li::before{content:"❌";}

/* ── 9. Melanie & Oliver, Marken ──────────────────────────── */

.gast{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:center;}
@media (min-width:900px){.gast{grid-template-columns:.8fr 1.2fr;}}
.gast__bild{border-radius:var(--rundung);overflow:hidden;}

.zahlen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  margin-top:var(--s6);
}
.zahl__wert{
  font-family:var(--serif);font-size:2.3rem;line-height:1;
  color:var(--hell-titel);
  /* Beim Hochzaehlen wechselt jede Ziffer. Ohne feste Ziffernbreite
     zappelt die Spalte waehrend der Sekunde. */
  font-variant-numeric:tabular-nums;
}
.zahl__label{
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--hell-schwach);margin-top:var(--s2);
}

.marken{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,64px);margin-top:var(--s8);
  padding-top:var(--s7);border-top:1px solid var(--hell-linie);
}
/* Eigene Dateien statt eines CSS-Filters: invert() macht aus dem
   Siegel der Entrepreneur University einen Klecks, weil dort die
   Binnenzeichnung die Aussage trägt. */
.marken img{height:34px;width:auto;opacity:.72;}
.marken img.rund{height:52px;opacity:.6;}
.marken img.hoch{height:46px;}
.marken__zeile{
  width:100%;text-align:center;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hell-schwach);margin:0;
}

/* ── 9b. Das Einladungsvideo ──────────────────────────────── */
/* Steht als Fläche mit Vorschaubild und Abspielzeichen da. Das echte
   Video kommt später und wird erst beim Klick geladen: eine
   eingebettete Fremdseite zieht sonst auf jeder Seitenladung ein
   halbes Megabyte und drei Zählpixel mit. */

.video{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;overflow:hidden;
  border-radius:14px;border:1px solid var(--hell-linie);
  background:var(--ink-900);cursor:pointer;
  box-shadow:0 18px 50px rgba(20,22,15,.12);
}
.block--dunkel .video,.danke__kopf .video{border-color:var(--ink-700);}
.video img{width:100%;height:100%;object-fit:cover;}
/* Nach unten abdunkeln, damit die Zeile über dem Bild trägt. */
.video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,15,13,.05) 0%,rgba(14,15,13,.1) 55%,rgba(14,15,13,.72) 100%);
}
.video__knopf{
  position:absolute;inset:0;margin:auto;z-index:2;
  width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(247,202,151,.94);color:#17180F;
  border:0;cursor:pointer;
  box-shadow:0 8px 30px rgba(14,15,13,.45);
  transition:transform .18s ease,background .18s ease;
}
.video:hover .video__knopf{transform:scale(1.06);background:var(--gold-200);}
.video__knopf svg{width:30px;height:30px;margin-left:4px;}
/* Ein Ring, der einmal nach aussen läuft. Dasselbe Mittel wie beim
   Knopf im Kopf, hier etwas weiter. */
@media (prefers-reduced-motion:no-preference){
  .video__knopf::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    border:1px solid rgba(247,202,151,.6);
    animation:ausbreiten 2.8s ease-out infinite;
  }
  @keyframes ausbreiten{
    0%{transform:scale(1);opacity:.7;}
    100%{transform:scale(1.75);opacity:0;}
  }
}
.video__zeile{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--s5) var(--s6);margin:0;
  color:var(--cream-50);font-size:.95rem;text-align:left;
}
.video__zeile b{display:block;font-weight:500;font-size:1.06rem;}
.video__zeile span{color:var(--sage-300);font-size:.88rem;}

/* Sobald der Rahmen drin ist, verschwindet alles, was zum Vorschaubild
   gehört: Abdunklung, Zeiger, Zeile. */
.video--laeuft{cursor:default;}
.video--laeuft::after{display:none;}
.video iframe{width:100%;height:100%;border:0;display:block;}

/* ── 9c. Countdown ────────────────────────────────────────── */

.countdown{
  display:flex;justify-content:center;gap:var(--s5);
  margin:var(--s7) 0 0;padding:0;list-style:none;
}
.countdown li{text-align:center;min-width:74px;}
.countdown__wert{
  font-family:var(--serif);font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;
  color:var(--cream-50);display:block;font-variant-numeric:tabular-nums;
}
.countdown__label{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-400);margin-top:var(--s2);display:block;
}
.block:not(.block--dunkel) .countdown__wert{color:var(--hell-titel);}
.block:not(.block--dunkel) .countdown__label{color:var(--hell-schwach);}

/* ── 10. Stimmen ──────────────────────────────────────────── */

.stimmen{display:grid;gap:var(--s5);grid-template-columns:1fr;}
@media (min-width:860px){.stimmen{grid-template-columns:repeat(3,1fr);}}
.stimme{
  background:var(--hell-karte);border:1px solid var(--hell-linie);
  border-radius:var(--rundung);padding:var(--s6);
  display:flex;flex-direction:column;
}
.stimme__text{
  font-family:var(--serif);font-size:1.2rem;line-height:1.45;
  color:var(--hell-titel);margin:0 0 var(--s5);
}
.stimme__wer{
  margin:auto 0 0;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--hell-schwach);
}
.sterne{color:var(--gold-500);letter-spacing:.14em;margin-bottom:var(--s3);font-size:.9rem;}

/* ── 11. Fragen ───────────────────────────────────────────── */

.fragen{border-top:1px solid var(--hell-linie);}
.frage{border-bottom:1px solid var(--hell-linie);}
.frage summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;min-height:56px;cursor:pointer;list-style:none;
  font-size:1.06rem;font-weight:500;color:var(--hell-titel);
}
.frage summary::-webkit-details-marker{display:none;}
.frage summary::after{
  content:"";flex:0 0 12px;width:12px;height:12px;
  border-right:1.5px solid var(--gold-600);
  border-bottom:1.5px solid var(--gold-600);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .2s ease;
}
.frage[open] summary::after{transform:rotate(-135deg) translateY(-3px);}
.frage__text{padding-bottom:var(--s5);max-width:70ch;margin:0;}

/* ── 12. Abschluss und Fuss ───────────────────────────────── */

.abschluss{
  position:relative;overflow:hidden;text-align:center;
  background:var(--ink-950);color:var(--sage-200);
}
.abschluss::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 0%,
    rgba(204,133,51,.18) 0%,transparent 70%);
}
.abschluss > *{position:relative;}
.abschluss .beweis{justify-content:center;}

/* Der Fuss trägt den Horizont der Marke. Das Motiv liegt als
   Elementhintergrund, nicht als Pseudo-Ebene: ein Pseudo-Element mit
   negativem z-index verschwindet hinter der Grundfarbe des Elternteils
   und wäre unsichtbar.
   Darüber nur so viel Abdunklung, dass die Schrift trägt. Das Bild
   bringt seine Dunkelheit selbst mit. */
.fuss{
  position:relative;overflow:hidden;
  /* 70 % statt bottom: der Glutkern liegt bei rund 60 % der Bildhöhe.
     Mit "bottom" schneidet ein niedriger Fuss genau darunter an und
     zeigt nur die schwarze Fläche. Die Mindesthöhe sorgt dafür, dass
     auch die kurzen Fusszeilen der Unterseiten Platz für das Motiv
     haben. */
  background:var(--ink-950) url(../public/bilder/fuss-horizont.jpg) center 70%/cover no-repeat;
  color:var(--sage-400);
  border-top:1px solid var(--ink-800);
  padding-block:var(--s9) var(--s8);font-size:.86rem;
  min-height:280px;display:flex;align-items:center;
}
.fuss::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,15,13,.92) 0%,rgba(14,15,13,.55) 45%,rgba(14,15,13,.7) 100%);
}
.fuss__innen{position:relative;width:100%;}
.fuss__innen{display:grid;gap:var(--s5);justify-items:center;text-align:center;}
.fuss__claim{font-family:var(--serif);font-size:1.15rem;color:var(--cream-100);margin:0;}
.fuss__links{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:center;}
.fuss__links a{color:var(--sage-300);text-decoration:none;}
.fuss__links a:hover{color:var(--cream-50);text-decoration:underline;}
.fuss__recht{max-width:64ch;font-size:.76rem;line-height:1.6;color:var(--ink-500);margin:0;}

/* ── 13. Anmeldung ────────────────────────────────────────── */

/* Einspaltig und mittig. Alles, was daneben stand, zog den Blick von
   den zwei Kacheln weg, und genau die sind der erste Schritt. */
.anmelde{
  min-height:100vh;background:var(--hell-bg);
  padding-block:var(--s8) var(--s9);
}
.anmelde__mitte{
  width:min(100% - 2*var(--s5),660px);margin-inline:auto;text-align:center;
}
.anmelde__mitte .vor{margin-inline:auto;}

/* Ein Kasten, drei Felder, ein Knopf. Der Zwischenschritt mit den
   zwei Kacheln ist raus: jeder Klick vor dem ersten Feld ist eine
   Hürde, und die Frage nach der Vorgeschichte war keine, die dem
   Eintragen vorausgehen muss. Sie steht jetzt klein darunter. */
.formular{
  display:grid;gap:var(--s5);text-align:left;
  margin-top:var(--s6);
  background:var(--hell-karte);
  border:1px solid var(--hell-linie);border-radius:14px;
  padding:clamp(24px,4vw,var(--s7));
  box-shadow:0 14px 44px rgba(20,22,15,.06);
}

.feld{display:grid;gap:var(--s2);}
.feld label{
  display:flex;align-items:center;gap:var(--s2);
  font-size:.95rem;font-weight:500;color:var(--hell-titel);
}
.feld label span{font-size:1.05rem;line-height:1;}
.feld input{
  width:100%;min-height:56px;padding:0 var(--s4);
  background:#fff;color:var(--hell-titel);
  border:1px solid var(--hell-linie);border-radius:var(--rundung);
  font-family:var(--sans);font-size:1rem;
}
.feld input::placeholder{color:#A8A79E;}
.feld input:focus{border-color:var(--gold-500);outline:none;box-shadow:0 0 0 3px rgba(204,133,51,.16);}
.feld__hinweis{font-size:.84rem;color:var(--hell-schwach);margin:0;}

/* Was der Server bemängelt, steht am Feld und nicht auf einer eigenen
   Seite. Farbe allein trägt die Aussage nicht: der Rahmen wird dicker,
   ein Zeichen steht davor und der Text nennt den Grund. */
.feld__fehler{
  font-size:.86rem;line-height:1.45;color:#A32C1E;margin:0;
  display:flex;align-items:flex-start;gap:6px;
}
.feld__fehler::before{content:"⚠";flex:0 0 auto;}
.feld__fehler[hidden]{display:none;}
.feld--fehler input,.feld--fehler .tel{border-color:#A32C1E;border-width:1.5px;}
.knopf:disabled{opacity:.7;cursor:default;}
.knopf:disabled::after{display:none;}

/* Der Ring, der sich dreht, solange der Server arbeitet. Ohne ihn
   stand der Knopf einfach da, und niemand weiss, ob der Klick
   angekommen ist. */
.laedt{
  display:inline-block;flex:0 0 auto;
  width:17px;height:17px;margin-right:10px;
  border:2px solid rgba(23,24,15,.28);
  border-top-color:#17180F;border-radius:50%;
  animation:drehen .7s linear infinite;
}
@keyframes drehen{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  /* Kein Drehen, aber auch kein stummer Knopf: dann pulsiert er. */
  .laedt{animation:pochen-still 1.2s ease-in-out infinite;}
  @keyframes pochen-still{0%,100%{opacity:.35;}50%{opacity:1;}}
}

/* Vorwahl und Nummer als ein Feld. Die Auswahl steht links, damit
   klar ist, dass die Nummer ohne Ländercode eingetippt wird. */
.tel{
  display:flex;align-items:stretch;
  border:1px solid var(--hell-linie);border-radius:var(--rundung);
  background:#fff;overflow:hidden;
}
.tel:focus-within{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(204,133,51,.16);}
.tel select{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:0 var(--s6) 0 var(--s4);min-height:56px;
  font-family:var(--sans);font-size:1rem;color:var(--hell-titel);
  border-right:1px solid var(--hell-linie);
  background-image:linear-gradient(45deg,transparent 50%,var(--hell-schwach) 50%),
                   linear-gradient(135deg,var(--hell-schwach) 50%,transparent 50%);
  background-position:calc(100% - 20px) 25px,calc(100% - 15px) 25px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.tel select:focus{outline:none;}
.tel input{border:0;border-radius:0;box-shadow:none;flex:1;min-width:0;}
.tel input:focus{box-shadow:none;}

/* Die eine Frage, die wir trotzdem brauchen: wer schon einmal dabei
   war, bekommt eine andere Mail und eine andere Ansprache im Raum.
   Als kleine Auswahl unter den Feldern kostet sie keinen Schritt.
   Wird sie übersprungen, geht der Eintrag trotzdem durch. */
/* Bewusst div und nicht fieldset: legend rechnet in jedem Browser
   etwas anders, sobald der Container ein Raster ist. role und
   aria-labelledby sagen der Vorlesehilfe dasselbe. */
.vorher{display:grid;gap:var(--s3);}
.vorher__frage{
  font-size:.95rem;font-weight:500;color:var(--hell-titel);margin:0;
}
.pillen{display:flex;flex-wrap:wrap;gap:var(--s3);}
.pille{
  position:relative;display:inline-flex;align-items:center;gap:var(--s2);
  min-height:46px;padding:0 var(--s5);cursor:pointer;
  border:1px solid var(--hell-linie);border-radius:99px;background:#fff;
  font-size:.95rem;color:var(--hell-text);
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.pille:hover{border-color:var(--gold-500);}
.pille input{position:absolute;opacity:0;width:0;height:0;}
.pille:has(input:focus-visible){outline:2px solid var(--gold-300);outline-offset:3px;}
.pille:has(input:checked){
  border-color:var(--gold-500);background:rgba(204,133,51,.1);
  color:var(--hell-titel);font-weight:500;
}
.pille span{font-size:1.05rem;line-height:1;}

.einwilligung{font-size:.78rem;line-height:1.55;color:var(--hell-schwach);margin:0;}
.einwilligung a{color:var(--gold-600);}

.nur-vorlesen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Was vorher rechts stand, steht jetzt unter dem Formular: erst
   handeln, dann nachlesen.
   Vorher waren das zwei Kästen unterschiedlicher Höhe nebeneinander,
   und dazwischen brach der Text an ungünstigen Stellen um. Jetzt eine
   ruhige Faktenzeile und darunter ein einziger Kasten. */
.stuetze{
  margin-top:var(--s8);padding-top:var(--s7);
  border-top:1px solid var(--hell-linie);text-align:left;
}

.fakten{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5);
  list-style:none;margin:0 0 var(--s7);padding:0;
}
@media (min-width:720px){.fakten{grid-template-columns:repeat(4,1fr);}}
.fakten li{display:grid;gap:2px;align-content:start;}
.fakten em{font-style:normal;font-size:1.3rem;line-height:1;margin-bottom:var(--s2);}
.fakten b{
  font-size:.66rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--hell-schwach);
}
.fakten span{font-size:.98rem;line-height:1.45;color:var(--hell-titel);}

/* Gesichter und Stimme in einem Kasten, nebeneinander. Das Zitat
   bekommt damit genug Breite: in der schmalen Spalte vorher brach
   die Serifenschrift in sieben Zeilen. */
.beleg{
  display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:center;
  background:var(--hell-karte);border:1px solid var(--hell-linie);
  border-radius:var(--rundung);padding:var(--s6);
}
@media (min-width:660px){.beleg{grid-template-columns:auto 1fr;gap:var(--s7);}}
.beleg__wer{display:flex;align-items:center;gap:var(--s4);}
.beleg__wer img{width:76px;height:95px;object-fit:cover;border-radius:6px;flex:0 0 76px;}
.beleg blockquote{margin:0;}
.beleg .stimme__text{font-size:1.14rem;margin-bottom:var(--s3);}
.beleg .stimme__wer{text-transform:none;letter-spacing:.02em;font-size:.86rem;}

.zurueck{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:.88rem;color:var(--hell-schwach);text-decoration:none;
}
.zurueck:hover{color:var(--hell-titel);}

/* ── 14. Bestätigung ──────────────────────────────────────── */

/* Konfetti liegt als Ebene über der ganzen Seite und verschwindet,
   sobald es durchgelaufen ist. Es hört auf Bewegungsvorlieben.
   fixed und nicht absolute: als Kind des dunklen Kopfes hat es dort
   im Fluss gestanden und beim Abräumen die Seite hochrutschen lassen.
   Jetzt liegt es ausserhalb jedes Abschnitts und rührt das Layout
   nicht mehr an. */
canvas.konfetti{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:60;
}

.danke__kopf{
  position:relative;overflow:hidden;text-align:center;
  background:var(--ink-950);color:var(--sage-200);
  padding-block:clamp(56px,8vw,var(--s9));
}
.danke__kopf::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0%,
    rgba(204,133,51,.20) 0%,transparent 70%);
}
.danke__kopf > *{position:relative;}
.haken{
  width:56px;height:56px;margin:0 auto var(--s5);
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--gold-500);color:var(--gold-400);
}

/* Die drei Handgriffe direkt nach der Anmeldung. Gleiche Karten wie
   bei der Vorbereitung, nur mit Platz für eine Aktion unten. */
.schritte{display:grid;gap:var(--s5);grid-template-columns:1fr;counter-reset:v;}
@media (min-width:900px){.schritte{grid-template-columns:repeat(3,1fr);}}
.schritte .karte{display:flex;flex-direction:column;}
.schritte .karte .klein{margin-bottom:var(--s5);}
.schritte .karte b{color:var(--hell-titel);font-weight:500;}

/* In der Karte stehen die zwei Kalenderknöpfe untereinander: nebeneinander
   bleibt in einer Drittelspalte kein Wort mehr lesbar. */
.kalender{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-top:auto;}
.kalender .knopf{width:100%;padding-inline:var(--s4);font-size:.94rem;}

.vorbereitung{display:grid;gap:var(--s5);grid-template-columns:1fr;counter-reset:v;}
@media (min-width:820px){.vorbereitung{grid-template-columns:repeat(3,1fr);}}
.vorbereitung .karte{display:flex;flex-direction:column;}

/* Zeichen statt Ziffer. Die Zahl allein sagte nur "das ist Punkt
   zwei", das Zeichen sagt worum es geht, bevor die Überschrift
   gelesen ist. Die Zahl steht klein daneben und hält die Reihenfolge. */
.vorb__kopf{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s5);}
.vorb__zeichen{
  flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(204,133,51,.12);color:var(--gold-600);
  border:1px solid rgba(204,133,51,.28);
}
.vorb__zeichen svg{width:25px;height:25px;}
.vorb__schritt{
  counter-increment:v;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hell-schwach);margin:0;
}
.vorb__schritt::before{content:"Schritt " counter(v);}

/* ── Bewegung ─────────────────────────────────────────────── */
/* Nur Verschiebung, nie Deckkraft. Ein Element, das bei
   opacity 0 startet, bleibt unsichtbar, wenn die Zeitachse
   nicht anspringt. Auf einer Seite mit bezahltem Verkehr darf
   Inhalt nie verschwinden. */
@media (prefers-reduced-motion:no-preference){
  .auf{animation:auf .5s cubic-bezier(.2,.7,.3,1) both;}
  @keyframes auf{from{transform:translateY(14px);}to{transform:none;}}
}