/* =========================================================================
   Go & Grow — Website
   Farben und Abstände folgen der App (src/GoGrow_App.jsx), damit sich Seite
   und App wie ein Stück anfühlen. Die Seite ist als Geschichte gebaut:
   Haken → Warum → Beweis → Mitmachen → Inhalt → Preis → Ehrlichkeit → Ende.
   Auffällige Farben gibt es NUR an drei Stellen (siehe --pop).
   ========================================================================= */

/* ---------- Schriften (selbst gehostet, keine Anfrage an Dritte) ---------- */
@font-face{font-family:'Anton';src:url('/assets/fonts/anton-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif-400i.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bg:#0e1213; --card:#161b1c; --surface:#1b2223; --surface2:#232b2c;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --text:#fff; --muted:#9aa8a5; --faint:rgba(220,232,229,.62);

  --primary:#5fb5ab;
  --primary-dim:rgba(95,181,171,.14);
  --primary-line:rgba(95,181,171,.34);
  --xp:#5aa0e0; --green:#2fc95f; --gold:#e0b94a; --red:#de5650;

  /* Der eine Ton, der herausstechen darf. Sparsam einsetzen — sonst sticht nichts mehr heraus. */
  --pop:#ff8a3d;
  --pop-dim:rgba(255,138,61,.13);
  --pop-line:rgba(255,138,61,.4);

  /* iPhone-Rahmen: gebürstetes Orange */
  --rail1:#f2b48b; --rail2:#c9683a; --rail3:#8d4322; --rail4:#f7d3b8;

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --pad:20px; --wrap:1140px; --nav-h:60px;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:680px;margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.sr:focus-visible{position:fixed;top:10px;left:10px;z-index:100;width:auto;height:auto;
  clip:auto;margin:0;padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:99px;background:var(--primary);color:#0b1112;font-weight:700;text-decoration:none}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}

.display{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.95}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0}
h1{font-size:clamp(40px,10.5vw,80px)}
h2{font-size:clamp(30px,7vw,52px)}
h3{font-size:clamp(18px,3.6vw,22px);line-height:1.25;font-weight:700}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--primary);margin-bottom:14px}
.lead{font-size:clamp(16px,2.3vw,19px);line-height:1.6;color:var(--faint);margin-top:16px}
.lead strong{color:#fff;font-weight:600}
.small{font-size:13.5px;line-height:1.55;color:var(--muted)}
.tiny{font-size:12px;line-height:1.5;color:var(--muted)}
.pop{color:var(--pop)}

section{padding:clamp(52px,8vw,96px) 0;position:relative}
.hair{height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}

.rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.shown{opacity:1;transform:none}

/* ======================= NAVIGATION ======================= */
.nav{position:sticky;top:0;z-index:60;background:rgba(14,18,19,.84);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;
  font-size:17px;margin-right:auto;min-height:44px}
.brand img{width:30px;height:30px;border-radius:8px}
.brand i{color:var(--primary);font-style:normal}
.nav__links{display:none;gap:22px;align-items:center}
.nav__links a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--muted);
  padding:8px 2px;transition:color .18s}
.nav__links a:hover{color:#fff}
@media(min-width:900px){.nav__links{display:flex}}

/* ======================= SCHALTFLÄCHEN ======================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 22px;border-radius:99px;border:1px solid transparent;
  font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .14s var(--ease),background .18s,border-color .18s,opacity .18s;
  background:var(--primary);color:#0b1112}
.btn:hover{background:#71c4ba;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.btn.is-loading{opacity:.7;pointer-events:none}
.btn--ghost{background:transparent;color:#fff;border-color:var(--line-strong)}
.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:var(--primary)}
.btn--pop{background:var(--pop);color:#160b04}
.btn--pop:hover{background:#ff9d5c}
.btn--sm{min-height:44px;padding:10px 17px;font-size:13.5px}
.btn--wide{width:100%}
.btn svg{flex:none}

.stores{display:grid;gap:12px;margin-top:24px}
@media(min-width:540px){.stores{grid-template-columns:1fr 1fr}}
.store{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 20px;
  border-radius:var(--r-md);text-decoration:none;background:#fff;color:#0b1112;
  border:1px solid transparent;transition:transform .14s var(--ease),box-shadow .2s}
.store:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.store span{display:block;text-align:left;line-height:1.2}
.store span i{font-style:normal;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.66;display:block;margin-bottom:2px}
.store span b{font-size:16px;font-weight:800}
.store--soon{background:transparent;color:#fff;border-color:var(--line-strong)}
.store--soon:hover{border-color:var(--primary);box-shadow:none}

/* ======================= iPHONE-RAHMEN =======================
   In CSS nachgebaut: Titan-Schiene in gebuerstetem Orange, schwarze Blende, Tasten.
   BEWUSST OHNE Dynamic Island — die Bildschirmfotos haben oben ihre eigene
   Statuszeile, ein aufgesetzter schwarzer Balken wuerde echte Inhalte verdecken. */
.iphone{position:relative;width:min(300px,78vw);margin-inline:auto;
  border-radius:48px;padding:7px;
  background:linear-gradient(118deg,
    #ffdcc2 0%, #f0ab77 6%, #c2622c 17%, #8f3f16 27%,
    #f3bd92 38%, #d98a4e 47%, #7d3610 58%,
    #f7cba6 70%, #c96a33 82%, #8a3d14 92%, #ffdcc2 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    0 30px 64px rgba(0,0,0,.66),
    0 4px 12px rgba(0,0,0,.5),
    inset 0 1px 2px rgba(255,255,255,.75),
    inset 0 -2px 3px rgba(0,0,0,.55);
}
/* Feiner dunkler Ring zwischen Schiene und Bildschirm — sonst wirkt es wie ein Aufkleber. */
.iphone__screen{position:relative;border-radius:40px;overflow:hidden;background:#0e1213;
  box-shadow:inset 0 0 0 2px #06080a, 0 0 0 2px rgba(0,0,0,.85)}
.iphone__screen img{width:100%;display:block}
/* Schmaler Streifen wie eine Statusleiste: schiebt den App-Inhalt aus der Ecken-
   Rundung heraus — sonst schneidet der Rahmen Glocke und Profilbild an. */
.iphone__bar{display:block;height:16px;background:#0e1213}

.iphone__btn{position:absolute;width:3.5px;border-radius:3px;z-index:1;
  background:linear-gradient(180deg,#ffdcc2,#c2622c 45%,#7d3610);
  box-shadow:0 1px 2px rgba(0,0,0,.6)}
.iphone__btn--a{left:-3px;top:14%;height:3.4%}
.iphone__btn--b{left:-3px;top:21%;height:6.4%}
.iphone__btn--c{left:-3px;top:29.5%;height:6.4%}
.iphone__btn--d{right:-3px;top:22%;height:9%}

.iphone--tilt{transform:rotate(-2.2deg)}
/* Leicht gedrehte Seitenansicht wie in Produktbildern */
.stage3d{perspective:1700px}
.iphone--angle{transform:rotateY(-17deg) rotateX(3deg) rotate(-1deg);transform-origin:72% 50%}
.iphone--angle-r{transform:rotateY(14deg) rotateX(2deg) rotate(1deg);transform-origin:28% 50%}

.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:-1}
.glow--a{width:420px;height:420px;background:rgba(95,181,171,.20);top:-160px;left:-180px}
.glow--b{width:380px;height:380px;background:rgba(255,138,61,.10);top:30%;right:-200px}

/* ======================= KOPFBEREICH ======================= */
.hero{padding-top:clamp(34px,6vw,64px);overflow:hidden}
.hero__grid{display:grid;gap:32px;align-items:center;
  grid-template-areas:'lead' 'shot' 'act'}
.hero__lead{grid-area:lead}
.hero__shot{grid-area:shot}
.hero__act{grid-area:act}
@media(min-width:980px){
  .hero__grid{grid-template-columns:1.02fr .98fr;column-gap:56px;row-gap:26px;
    grid-template-areas:'lead shot' 'act shot';align-items:center}
  .hero__shot{align-self:center}
}
.hero h1{margin-bottom:20px}
.hero h1 .dim{color:#4d5a58;display:block;margin-top:.14em}
.hero__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.fact{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;
  background:var(--primary-dim);border:1px solid var(--primary-line);
  font-size:12.5px;font-weight:600;color:var(--primary)}
.fact--pop{background:var(--pop-dim);border-color:var(--pop-line);color:var(--pop)}
.hero__note{margin-top:16px;font-size:12.5px;color:var(--muted)}

/* ======================= TAKTSCHLAG ======================= */
.beats{display:flex;flex-direction:column;gap:2px;margin:12px 0 8px}
.beat{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(34px,9.5vw,64px);line-height:1.02;color:#394344;position:relative;
  width:max-content;max-width:100%;
  opacity:0;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.beat.shown{opacity:1;transform:none}
.beat::after{content:"";position:absolute;left:0;top:52%;height:3px;width:0;
  background:var(--red);transition:width .45s ease .3s}
.beat.shown.strike::after{width:100%}
.beat--last{color:var(--pop);font-size:clamp(40px,11.5vw,76px);
  text-shadow:0 0 40px rgba(255,138,61,.28)}
.beat--last::after{display:none}

/* ======================= ZAHLEN ALS GESCHICHTE =======================
   Bewusst KEINE Kachel-Liste, sondern ein Satz im selben Takt wie
   «Gehört. Verstanden. … Getan.» — die Zahlen zaehlen beim Sichtkontakt hoch. */
.saga__story{margin-top:26px;font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(27px,7vw,54px);line-height:1.1;color:#4e5a58;letter-spacing:.005em}
.saga__story .l{display:block}
.saga__story .n{color:var(--primary);font-weight:400;
  text-shadow:0 0 34px rgba(95,181,171,.28)}
.saga__story .n--pop{color:var(--pop);text-shadow:0 0 34px rgba(255,138,61,.3)}

/* ======================= QUEST ZUM AUSPROBIEREN ======================= */
.demo{max-width:540px;margin-inline:auto}
.demo__meta{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.demo__bars{display:flex;gap:6px;flex:1}
.demo__bars i{height:4px;flex:1;border-radius:99px;background:rgba(255,255,255,.12);transition:background .4s}
.demo__bars i.on{background:var(--sc,var(--primary))}
.demo__count{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:700;white-space:nowrap}

.demo__stage{position:relative;min-height:560px;perspective:1400px;perspective-origin:50% 40%}
.demo__tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .2s ease-out}
.demo__card{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:linear-gradient(158deg,var(--surface2) 0%,var(--card) 50%,#101516 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 22px;
  box-shadow:var(--shadow);backface-visibility:hidden;
  transition:transform .68s var(--ease),opacity .45s ease;
}
/* Der Balken oben trägt die Farbe des jeweiligen Schritts. */
.demo__card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;
  border-radius:99px;background:var(--sc);box-shadow:0 0 20px var(--sc);opacity:.9}
/* WICHTIG: ohne z-index legen sich spätere Karten über die aktive und der Text doppelt sich. */
.demo__card[data-state="active"]{transform:translateZ(0);opacity:1;z-index:4}
.demo__card[data-state="next"]{transform:translate3d(0,18px,-90px) ;opacity:.42;z-index:3;pointer-events:none}
.demo__card[data-state="far"]{transform:translate3d(0,34px,-170px);opacity:0;z-index:2;pointer-events:none}
.demo__card[data-state="gone"]{transform:translate3d(0,-120px,190px) rotateX(-52deg);opacity:0;z-index:1;pointer-events:none}

.demo__tag{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sc);margin-bottom:14px}
.demo__tag u{text-decoration:none;width:7px;height:7px;border-radius:50%;background:var(--sc)}
.demo__card h3{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,6vw,34px);line-height:1;margin-bottom:12px}
.demo__body{font-size:15px;line-height:1.62;color:var(--faint);overflow-y:auto;flex:1;min-height:0}
.demo__body strong{color:#fff;font-weight:600}
.demo__src{font-size:11.5px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.demo__ex{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);font-size:13.5px;color:var(--muted)}
.demo__foot{margin-top:18px;flex:none}

/* Die grosse Zahl */
.bignum{font-family:'Anton',Impact,sans-serif;font-size:clamp(78px,21vw,124px);line-height:.82;
  letter-spacing:-.02em;color:var(--sc);margin:6px 0 2px;text-shadow:0 0 60px rgba(90,160,224,.3)}
.bignum__sub{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(20px,5vw,26px);color:var(--faint);margin-bottom:16px}

/* Wette gegen Wirklichkeit */
.versus{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.vs{display:flex;align-items:center;gap:12px}
.vs__lab{flex:none;width:74px;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.vs__track{flex:1;height:26px;border-radius:99px;background:rgba(255,255,255,.05);overflow:hidden}
/* display:block ist Pflicht — als span bliebe der Balken inline und Breite/Höhe würden ignoriert. */
.vs__fill{display:block;height:100%;width:0;border-radius:99px;transition:width 1s var(--ease)}
.vs__fill--you{background:linear-gradient(90deg,rgba(95,181,171,.5),var(--primary))}
.vs__fill--real{background:linear-gradient(90deg,rgba(255,138,61,.5),var(--pop))}
.vs__n{flex:none;min-width:56px;text-align:right;font-family:'Anton',Impact,sans-serif;font-size:19px}
.vs__n--real{color:var(--pop)}

.field{margin-top:14px}
.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sc,var(--primary));margin-bottom:7px}
.input,.textarea{width:100%;padding:14px 15px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:#fff;font-size:15.5px;
  transition:border-color .18s,background .18s}
.textarea{min-height:96px;resize:vertical;line-height:1.55}
.input::placeholder,.textarea::placeholder{color:#68746f}
.input:hover,.textarea:hover{border-color:var(--line-strong)}
.input:focus,.textarea:focus{outline:none;border-color:var(--primary);
  background:rgba(95,181,171,.06);box-shadow:0 0 0 3px rgba(95,181,171,.18)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--red)}

.demo__done{text-align:center;justify-content:center}
.ring{width:86px;height:86px;border-radius:50%;border:2px solid var(--primary);
  margin:0 auto 16px;display:grid;place-items:center;color:var(--primary);
  box-shadow:0 0 44px rgba(95,181,171,.3);animation:pop .6s var(--ease) both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.xp{font-family:'Anton',Impact,sans-serif;font-size:46px;color:var(--primary);line-height:1}
.result{margin-top:18px;padding:16px 18px;border-radius:var(--r-md);text-align:left;
  background:var(--primary-dim);border:1px solid var(--primary-line);font-size:15px;line-height:1.5}
.result b{color:var(--primary)}

/* ======================= SKILLS =======================
   Alle 17 Karten untereinander waren über 2000 px hoch — den Aufbau sah man
   nie am Stück. Jetzt steht oben die Pyramide als Steuerung und darunter nur
   die Phase, auf der man gerade ist. Damit passt der ganze Abschnitt auf
   einen Bildschirm, und die Karten selbst bleiben unverändert. */
.skillbox{margin-top:24px}
/* Ab Desktop steht die Pyramide neben der Überschrift statt darunter — das
   spart die Höhe, die den Abschnitt vorher über den Bildschirmrand schob.
   `display:contents` hängt Pyramide und Bühne direkt ins Raster des
   Abschnitts, ohne die Struktur im JavaScript zu ändern. */
@media(min-width:940px){
  .skillsec{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'kopf pyra' 'buehne buehne';
    column-gap:clamp(30px,5vw,70px);align-items:center}
  .skillsec__kopf{grid-area:kopf}
  .skillbox{display:contents}
  .pyra{grid-area:pyra;margin:0}
  .phase{grid-area:buehne;margin-top:26px}
}
.phase{min-width:0}
.phase__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.phase__no{font-family:'Anton',Impact,sans-serif;font-size:14px;color:var(--primary);letter-spacing:.06em}
.phase__head h3{font-size:19px}
.skills{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
@media(min-width:900px){
  .skills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
  .skill{flex:0 0 208px}
  .phase__head{justify-content:center;text-align:center}
  .phase__head p{text-align:center}
}
.skill{position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px;overflow:hidden;
  transition:border-color .2s,transform .2s var(--ease)}
/* Das Symbol liegt gross und blass hinter dem Text — wie die Sonne hinter der
   Tages-Linse in der App. */
.skill__bg{position:absolute;right:-26px;top:-22px;line-height:0;pointer-events:none;
  opacity:.075;transition:opacity .35s,transform .5s var(--ease)}
.skill:hover .skill__bg{opacity:.13;transform:scale(1.06) rotate(-4deg)}
.skill:hover{border-color:var(--primary-line);transform:translateY(-3px)}


.skill__n{font-family:'Anton',Impact,sans-serif;font-size:11px;color:var(--tint,var(--primary));
  letter-spacing:.14em;margin-bottom:4px}
.skill h4{font-size:16.5px;font-weight:700;margin-bottom:6px}
.skill p{font-size:13.5px;color:var(--muted);line-height:1.5}
/* ---------- Buch-Karussell ----------
   Drei Buecher auf drei Plaetzen: links angeschnitten, in der Mitte vorne,
   rechts angeschnitten. Sie wandern im Kreis — die Kartenhoehe bleibt dabei
   IMMER gleich, damit nicht die ganze Reihe mitwaechst. */
.karu{position:relative;height:104px;margin-top:auto;padding-top:16px;perspective:760px;
  transform-style:preserve-3d}
.buch{position:absolute;top:6px;left:50%;width:64px;height:88px;
  border-radius:3px 8px 8px 3px;
  background:linear-gradient(120deg,#2b3435 0%,#1d2425 55%,#161c1d 100%);
  box-shadow:inset 7px 0 0 rgba(0,0,0,.45), inset 8px 0 0 color-mix(in srgb, var(--tint) 55%, transparent),
             0 10px 20px rgba(0,0,0,.55);
  display:grid;place-items:center;
  transition:transform .62s var(--ease), opacity .5s ease, filter .5s ease;
  will-change:transform}
.buch em{font-family:'Anton',Impact,sans-serif;font-style:normal;font-size:27px;
  color:var(--tint);line-height:1;padding-left:9px}

.buch[data-p="1"]{transform:translate(-50%,0) translateZ(46px);opacity:1;z-index:3;filter:none}
.buch[data-p="0"]{transform:translate(calc(-50% - 56px),9px) rotateY(48deg) scale(.84);
  opacity:.55;z-index:2;filter:brightness(.7)}
.buch[data-p="2"]{transform:translate(calc(-50% + 56px),9px) rotateY(-48deg) scale(.84);
  opacity:.55;z-index:2;filter:brightness(.7)}

/* Unter dem Karussell steht immer, welches Buch gerade vorne liegt. */
.karu__l{margin-top:12px;text-align:center;min-height:38px}
.karu__l span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tint)}
.karu__l b{display:block;font-size:13px;font-weight:600;color:var(--faint);
  line-height:1.3;margin-top:3px}

/* ======================= 21 TAGE ======================= */
.daylab{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.wqhint{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--muted)}
.wqhint b{display:inline-block;width:12px;height:22px;border-radius:4px;background:#a87fd6;
  box-shadow:0 0 0 2px #a87fd6}

/* ======================= BILDER ======================= */
.shots{display:grid;gap:34px 26px;grid-template-columns:1fr;margin-top:32px}
@media(min-width:620px){.shots{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot figcaption{margin-top:16px;font-size:14px;color:var(--faint);text-align:center;line-height:1.45}
.shot .iphone{width:100%;max-width:290px}

/* ======================= HANDY ZUM BEDIENEN =======================
   Ein Geraet, echte Tabs darunter. Antippen wechselt den Bildschirm; daneben
   erscheint die Erklaerung, verbunden ueber eine gekruemmte Linie. */
/* Gerät oben, Erklärung darunter — wie auf dem Handy. Rechts daneben steht
   jetzt der Fahrplan (.appduo), darum bleibt der Showcase einspaltig. */
.appduo{display:grid;gap:40px;margin-top:30px}
@media(min-width:940px){
  .appduo{grid-template-columns:minmax(0,400px) minmax(0,1fr);
    gap:clamp(38px,5vw,72px);align-items:start}
  .appduo__plan{padding-left:clamp(38px,5vw,72px);border-left:1px solid var(--line)}
}
.appduo__h{font-size:clamp(30px,7vw,52px);margin:0 0 4px}
.appduo__plan .plan-rows{margin-top:18px}
.appduo__plan{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* Nur noch das Gerät. Der Erklärkasten daneben ist weg — man sieht ja den
   Bildschirm, und gelesen hat ihn ohnehin niemand. */
.showcase{display:flex;justify-content:center}
.sc__stage{width:100%;display:flex;justify-content:center}
.sc__phone{width:min(300px,74vw);transition:transform .25s var(--ease)}

/* Bedient wird direkt an der Tab-Leiste im Gerät. Sie ist im Showcase
   anklickbar — in allen anderen Geräten auf der Seite bleibt sie reine
   Anzeige. Die Trefferfläche ist die ganze Zelle. */
.sc__phone .a-nav__i{cursor:pointer;border-radius:10px;
  transition:color .2s var(--ease),background .2s var(--ease)}
.sc__phone .a-nav__i:hover{color:#cfe0dc;background:rgba(255,255,255,.05)}
.sc__phone .a-nav__i:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sc__phone .a-nav__i.on{color:#5fb5ab}

/* ======================= PREISE ======================= */
.plans{display:grid;gap:14px;grid-template-columns:1fr;margin-top:24px}
@media(min-width:820px){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  display:flex;flex-direction:column;height:100%}
.plan--hl{border-color:var(--primary-line);background:linear-gradient(170deg,rgba(95,181,171,.10),var(--card) 55%)}
.plan__badge{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--primary);background:var(--primary-dim);
  border:1px solid var(--primary-line);border-radius:99px;padding:5px 11px;margin-bottom:14px}
.plan h3{font-size:20px;margin-bottom:6px}
.plan__price{font-family:'Anton',Impact,sans-serif;font-size:38px;line-height:1;margin:12px 0 2px}
.plan__price small{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--muted)}
.plan__alt{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.plan ul{display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.5;flex:1}
.plan li{display:flex;gap:9px;color:var(--faint)}
.plan li{align-items:flex-start}
.plan li svg{flex:none;margin-top:1px;color:var(--primary);
  padding:3px;box-sizing:content-box;border-radius:7px;background:var(--primary-dim)}
.plan--hl li svg{background:rgba(95,181,171,.2)}

/* Kein Kasten mehr: auf der ganzen Seite steht sonst nichts in Kästen. Zwei
   Haarlinien reichen, damit der Vergleich als eigener Gedanke steht. */
.anchor{margin-top:24px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  justify-content:space-between;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.anchor__big{font-family:'Anton',Impact,sans-serif;font-size:clamp(32px,7vw,46px);
  line-height:1;color:var(--pop)}

/* ======================= EHRLICHKEIT + FAHRPLAN NEBENEINANDER =======================
   Zwei kurze Listen untereinander sind auf dem Schirm viel Leerlauf. Auf dem
   Desktop stehen sie deshalb nebeneinander: links, was die App nicht kann,
   rechts, was noch kommt. Auf dem Handy bleibt es untereinander. */
.duo{display:grid;gap:46px}
@media(min-width:940px){
  .duo{grid-template-columns:1fr 1fr;gap:clamp(38px,5vw,72px)}
  .duo__r{padding-left:clamp(38px,5vw,72px);border-left:1px solid var(--line);margin-left:-1px}
}
.duo h2{margin-bottom:18px}

/* ======================= EHRLICHKEIT ======================= */
.nope li{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.55;color:var(--faint)}
.nope li:first-child{border-top:0}
.nope b{display:block;color:#fff;font-weight:700;margin-bottom:3px;font-size:16px}
.nope .x{color:var(--red);font-size:18px;line-height:1.35;flex:none}

/* Der Abschluss des Ehrlichkeits-Teils: keine vierte Absage, sondern die
   Einladung, hinterher zu sagen, ob es geklappt hat. Ruhig gesetzt, mit einer
   Kante in der Hauptfarbe statt eines weiteren Kastens. */
.echo{margin-top:30px;padding:22px 0 4px 22px;border-left:2px solid var(--primary-line)}
.echo__kopf{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.echo__k{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--primary)}
/* Eine kleine Uhr läuft einmal durch, dann kommt der Text — «und danach» wird
   damit sichtbar, statt nur dazustehen. */
.echo__uhr{flex:none;width:30px;height:30px;display:block}
.echo__uhr circle{fill:none;stroke:var(--primary-line)}
.echo__uhr .u-rand{stroke-width:1.6}
.echo__uhr .u-mitte{fill:var(--primary);stroke:none}
.echo__uhr line{stroke:var(--primary);stroke-linecap:round;transform-box:fill-box;
  transform-origin:bottom center}
.echo__uhr .u-m{stroke-width:1.8}
.echo__uhr .u-h{stroke-width:2.4;opacity:.75}
.echo.shown .echo__uhr .u-m{animation:uhrDreh 1.5s cubic-bezier(.2,.75,.2,1) forwards}
.echo.shown .echo__uhr .u-h{animation:uhrDrehH 1.5s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes uhrDreh{from{transform:rotate(0)}to{transform:rotate(1080deg)}}
@keyframes uhrDrehH{from{transform:rotate(0)}to{transform:rotate(90deg)}}
.echo.shown .echo__t{animation:echoRein .55s var(--ease) .5s backwards}
.echo.shown .echo__s{animation:echoRein .55s var(--ease) .72s backwards}
.echo.shown .echo__l{animation:echoRein .55s var(--ease) .92s backwards}
@keyframes echoRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .echo.shown .echo__uhr line,.echo.shown .echo__t,
  .echo.shown .echo__s,.echo.shown .echo__l{animation:none}
}
.echo__t{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;line-height:1;
  font-size:clamp(22px,4.6vw,32px);color:#fff;margin-bottom:12px}
.echo__s{font-size:15px;line-height:1.62;color:var(--faint);max-width:52ch}
.echo__l{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:18px}
.echo__mail{font-size:13.5px;color:var(--muted);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .18s,border-color .18s}
.echo__mail:hover{color:#fff;border-color:var(--primary)}

/* ======================= FAHRPLAN (kurz) ======================= */
.plan-rows{margin-top:26px;display:flex;flex-direction:column}
.prow{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-top:1px solid var(--line);
  flex-wrap:wrap}
.prow:first-child{border-top:0}
.prow__no{font-family:'Anton',Impact,sans-serif;font-size:clamp(15px,2.6vw,19px);
  color:#3f4a49;flex:none;min-width:34px;letter-spacing:.04em}
.prow[data-status="laufend"] .prow__no{color:var(--pop)}
.prow__t{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(19px,4.2vw,27px);line-height:1.1;color:#fff;flex:1;min-width:190px}
.prow[data-status="fertig"] .prow__t{color:#5d6a68}
.prow[data-status="laufend"] .prow__t{color:var(--pop)}
.prow__d{flex-basis:100%;font-size:13.5px;color:var(--muted);line-height:1.5}
.chip{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;border:1px solid var(--line-strong);color:var(--muted);
  white-space:nowrap}
.chip--fertig{color:var(--primary);border-color:var(--primary-line);background:var(--primary-dim)}
.chip--laufend{color:var(--pop);border-color:var(--pop-line);background:var(--pop-dim)}
.chip--geplant{color:var(--xp);border-color:rgba(90,160,224,.34);background:rgba(90,160,224,.12)}
.chip--spaeter{color:var(--muted)}
.chip--community{color:var(--green);border-color:rgba(47,201,95,.34);background:rgba(47,201,95,.12)}

/* Zeitstrahl (Unterseite /ideen) */
.timeline{position:relative;margin-top:28px;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--primary),rgba(95,181,171,.15))}
.tl{position:relative;padding:0 0 24px 6px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-25px;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--bg);border:3px solid var(--primary)}
.tl[data-status="fertig"]::before{background:var(--primary)}
.tl[data-status="laufend"]::before{border-color:var(--pop);box-shadow:0 0 0 5px rgba(255,138,61,.16)}
.tl[data-status="geplant"]::before{border-color:var(--xp)}
.tl[data-status="spaeter"]::before{border-color:#4a5556}
.tl__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:5px}
.tl h3{font-size:17px;font-weight:700}
.tl p{font-size:14px;color:var(--muted);line-height:1.5;margin-top:3px}

/* ======================= IDEEN-BOARD ======================= */
.board{display:grid;gap:26px}
@media(min-width:980px){
  .board{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:40px}
  /* Das Einreiche-Feld bleibt stehen, waehrend man die Liste durchgeht. */
  .board aside{position:sticky;top:calc(var(--nav-h) + 20px)}
}
/* Kopfzeile ueber der Liste: Anzahl und Sortierhinweis */
.board__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-bottom:14px}
.board__top h2{margin:0}
.board__zahl{font-size:13px;color:var(--muted)}
.board__zahl b{color:var(--primary);font-weight:700}
.ideas{display:flex;flex-direction:column;gap:12px}
.idea{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;
  transition:border-color .18s,transform .18s var(--ease),background .18s}
.idea:hover{border-color:var(--primary-line);transform:translateX(3px);
  background:linear-gradient(90deg,rgba(95,181,171,.05),var(--card) 40%)}
/* Die drei mit der meisten Zustimmung bekommen einen Rang davor. */
.idea__rang{position:absolute;left:-13px;top:16px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-family:'Anton',Impact,sans-serif;font-size:12px;
  background:var(--surface2);border:1px solid var(--primary-line);color:var(--primary)}
.idea{position:relative}
.idea__vote{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-width:56px;min-height:56px;padding:6px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line);cursor:pointer;
  transition:border-color .16s,background .16s,transform .12s var(--ease)}
.idea__vote:hover{border-color:var(--primary-line);background:rgba(95,181,171,.10)}
.idea__vote:active{transform:scale(.96)}
.idea__vote[aria-pressed="true"]{background:var(--primary-dim);border-color:var(--primary);color:var(--primary)}
.idea__vote b{font-size:17px;font-weight:800;line-height:1}
.idea__vote span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.idea__vote[aria-pressed="true"] span{color:var(--primary)}
.idea__main{min-width:0;flex:1}
.idea__main h3{font-size:16px;font-weight:700;margin-bottom:5px}
.idea__main p{font-size:14px;color:var(--muted);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.idea__foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.idea__by{font-size:12px;color:var(--muted)}
.idea[data-status="abgelehnt"]{opacity:.6}

/* Zahlenkacheln der Verwaltung */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 16px;text-align:center}
.stat b{display:block;font-family:'Anton',Impact,sans-serif;font-size:clamp(28px,6vw,38px);
  color:var(--primary);line-height:1;margin-bottom:6px}
.stat span{font-size:12.5px;color:var(--muted);line-height:1.4;display:block}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.panel h3{font-size:18px;margin-bottom:6px}
.msg{margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.5}
.msg--ok{background:rgba(47,201,95,.10);border:1px solid rgba(47,201,95,.32);color:#8ce4a8}
.msg--err{background:rgba(222,86,80,.10);border:1px solid rgba(222,86,80,.32);color:#f3a4a0}
.msg[hidden]{display:none}
.check{display:flex;gap:11px;align-items:flex-start;margin-top:14px;font-size:13px;
  color:var(--muted);line-height:1.5;cursor:pointer;min-height:44px;padding:6px 0}
.check input{flex:none;width:24px;height:24px;margin-top:1px;accent-color:var(--primary);cursor:pointer}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.empty{text-align:center;padding:56px 26px;border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);color:var(--muted);font-size:15px;line-height:1.6}
.empty b{display:block;color:#fff;font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(20px,4vw,26px);margin-bottom:10px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filter{min-height:40px;padding:8px 15px;border-radius:99px;background:transparent;
  border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:.16s}
.filter:hover{border-color:var(--line-strong);color:#fff}
.filter[aria-pressed="true"]{background:var(--primary-dim);border-color:var(--primary);color:var(--primary)}

/* ======================= ENDE & FUSS ======================= */
.final{text-align:center}
/* Zwei leicht gedrehte Geräte statt eines schmalen in der Mitte. */
/* Die beiden Geräte stehen leicht ineinander statt nebeneinander — mit Lücke
   sah es aus wie zwei Bilder, überlappend wie eine Aufnahme. */
.zwei{display:flex;justify-content:center;align-items:center;margin:30px 0 8px}
/* .iphone hat margin-inline:auto — in einem Flex-Kasten saugen automatische
   Ränder den freien Platz auf, und genau das riss die Lücke zwischen den beiden
   Geräten auf (bei 1440 px waren es 116 px Rand am ersten Gerät). Hier also
   fester Rand null, und die Überlappung macht ein negativer Rand. */
.zwei figure{margin-inline:0}
.zwei figure + figure{margin-left:clamp(-14px,-1vw,-6px)}
.waitlist{max-width:520px;margin:26px auto 0;text-align:left}
.waitlist__row{display:grid;gap:10px}
@media(min-width:560px){.waitlist__row{grid-template-columns:1fr auto}}
.seg{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.seg label{flex:1;min-width:96px}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;
  border-radius:var(--r-sm);border:1px solid var(--line);font-size:13.5px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:.16s}
.seg label:hover span{border-color:var(--line-strong);color:#fff}
.seg input:checked+span{background:var(--primary-dim);border-color:var(--primary);color:var(--primary)}
.seg input:focus-visible+span{outline:3px solid var(--primary);outline-offset:3px}

footer{border-top:1px solid var(--line);padding:40px 0 48px;margin-top:20px}
.foot{display:flex;flex-direction:column;gap:22px}
@media(min-width:760px){.foot{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__links a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:6px 0;transition:color .16s}
.foot__links a:hover{color:#fff;text-decoration:underline}
.foot__legal{font-size:12px;color:#5c6a68;line-height:1.7}

/* ======================= TEXTSEITEN ======================= */
.prose{max-width:720px;margin-inline:auto}
.prose h1{font-size:clamp(30px,7vw,44px);margin-bottom:8px}
.prose h2{font-size:clamp(20px,4vw,26px);margin:34px 0 10px;font-family:'Inter',sans-serif;
  font-weight:700;text-transform:none;letter-spacing:0;line-height:1.3}
.prose p{margin:12px 0;color:var(--faint);font-size:15.5px;line-height:1.72}
.prose ul{margin:12px 0;display:flex;flex-direction:column;gap:8px}
.prose li{padding-left:20px;position:relative;color:var(--faint);font-size:15.5px;line-height:1.65}
.prose li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--primary)}
.prose a{color:var(--primary);text-underline-offset:3px}

/* ======================= KURZMELDUNGEN ======================= */
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
  width:min(420px,calc(100vw - 32px))}
.toast{padding:12px 18px;border-radius:99px;font-size:14px;font-weight:600;
  background:var(--surface2);border:1px solid var(--line-strong);color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.45);text-align:center}
.toast--ok{border-color:var(--primary-line);background:linear-gradient(180deg,rgba(95,181,171,.22),var(--surface2))}
.toast--err{border-color:rgba(222,86,80,.4);background:linear-gradient(180deg,rgba(222,86,80,.2),var(--surface2))}

/* ---------- Auf dem Handy wischen statt endlos scrollen ----------
   17 Karten untereinander sind ueber 5000 px Scrollweg. Als Reihe zum Wischen
   bleibt alles erreichbar, fuehlt sich wie in einer App an — und die angeschnittene
   naechste Karte am Rand zeigt von selbst, dass es weitergeht. */
@media(max-width:760px){
  .skills,.shots{
    display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* Bewusst OHNE negativen Aussenabstand: mit Rand-zu-Rand-Trick verschiebt
       der erste Schnappunkt die Reihe, und die Karte steht nicht mehr unter der
       Ueberschrift. So beginnt sie exakt auf der Textkante. */
    margin-inline:0;padding:2px 0 16px;scroll-padding-left:0;
    scrollbar-width:none;
  }
  .skills::-webkit-scrollbar,.shots::-webkit-scrollbar{display:none}
  .skills{gap:12px}
  .shots{gap:18px}
  .skill{flex:0 0 76%;scroll-snap-align:start}
  .shot{flex:0 0 72%;scroll-snap-align:center}
  .shot .iphone{max-width:100%}
  /* Kleiner Hinweis, dass die Reihe seitlich weitergeht */
  .swipe{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px}
  .swipe::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--muted),transparent)}
}
@media(min-width:761px){.swipe{display:none}}

/* ======================= WENIGER BEWEGUNG ======================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
  .beat{opacity:1;transform:none}
  .beat.shown.strike::after{width:100%}
  .bz__f{transition:none}
  .buch{transition:none}
  .iphone--angle,.iphone--angle-r,.iphone--tilt{transform:none}
}

/* ---- Bühne für die Quest im Handy ---- */
.quest-buehne{margin-top:26px;display:flex;justify-content:center}
/* Groesser als die anderen Geraete: hier wird wirklich gelesen und getippt. */
/* Das Gerät stand vorher fast so gross da wie ein echtes Handy und liess die
   halbe Fläche leer. Kleiner wirkt es wie ein Gerät auf dem Tisch — und der
   Text darin ist trotzdem besser lesbar, weil er in der App-Oberfläche selbst
   grösser gesetzt ist (app-ui.css, Abschnitt Quest-Blatt). */
.q-phone{width:min(322px,80vw);transition:transform .25s var(--ease)}
@media(min-width:900px){.q-phone{width:336px}}

/* ---- Preis-Punkte: Stichwort fett, Erklärung dahinter ---- */
.plan li span{display:block}
.plan li b{color:#fff;font-weight:700}
/* ---- Rang-Leiter beim Einsteiger ----
   Zeigt statt einer Textzeile, wie weit man kommt. Der fünfte Rang ist
   ausgegraut, weil er zu Premium gehört — das bleibt ehrlich sichtbar. */
.leiter{display:flex;align-items:center;gap:0;margin:2px 0 16px}
.leiter__s{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--primary);position:relative;text-align:center}
.leiter__s i{width:11px;height:11px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 0 3px var(--primary-dim)}
/* Verbindungslinie zwischen den Stufen */
.leiter__s::before{content:"";position:absolute;top:5px;left:-50%;width:100%;height:1.5px;
  background:var(--primary-line)}
.leiter__s:first-child::before{display:none}
.leiter__s--aus{color:#4e5a58}
.leiter__s--aus i{background:#3a4344;box-shadow:none}
.leiter__s--aus::before{background:var(--line)}

/* ---- Handy-Feinschliff ---- */
@media(max-width:760px){
  /* Die Zahlen sollen auf dem Handy wuchten, nicht flüstern. */
  .saga__story{font-size:clamp(34px,10.5vw,52px);line-height:1.06}
  /* Der Preis-Anker stand auf dem Handy einsam in der Mitte — jetzt linksbündig
     unter dem Text, wie alles andere auch. */
  .anchor{flex-direction:column;align-items:stretch;gap:14px;padding:20px}
  .anchor>div:last-child{text-align:left!important;min-width:0!important}
  .anchor__big{font-size:clamp(38px,11vw,52px)}
}

/* ---- Die Pyramide als Steuerung ----
   Fünf Reihen mit 5 · 4 · 3 · 2 · 3 Punkten. Die Punktegruppe steht in einer
   gleich breiten Spalte und ist zentriert — dadurch entsteht die Form. Die
   Namen daneben fluchten. Antippen (oder mit der Maus drüberfahren) wechselt
   die Phase darunter. */
.pyra{--pd:13px;--pg:7px;display:flex;flex-direction:column;gap:5px;
  width:max-content;max-width:100%;margin:0 auto 22px}
.pyra__r{display:grid;grid-template-columns:calc(var(--pd) * 5 + var(--pg) * 4) minmax(0,1fr);
  align-items:center;gap:16px;min-height:42px;padding:6px 14px;border-radius:12px;
  background:transparent;border:1px solid transparent;cursor:pointer;text-align:left;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.pyra__r:hover{background:rgba(255,255,255,.035)}
.pyra__r.an{background:color-mix(in srgb,var(--tint) 10%,transparent);
  border-color:color-mix(in srgb,var(--tint) 30%,transparent)}
.pyra__r:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.pyra__d{display:flex;gap:var(--pg);justify-content:center}
.pyra__d i{width:var(--pd);height:var(--pd);border-radius:50%;background:var(--tint);
  opacity:.3;transition:opacity .25s var(--ease),box-shadow .25s var(--ease)}
.pyra__r:hover .pyra__d i{opacity:.6}
.pyra__r.an .pyra__d i{opacity:1;
  box-shadow:0 0 10px color-mix(in srgb,var(--tint) 55%,transparent)}
.pyra__t{font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;
  transition:color .2s var(--ease)}
.pyra__r.an .pyra__t{color:#fff}
.pyra__t em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#5c6a68;margin-top:1px}
@media(max-width:520px){
  .pyra{--pd:11px;--pg:6px;width:100%}
  .pyra__r{gap:12px;padding:6px 10px}
  .pyra__t{font-size:12.5px}
}

/* ---- Showcase auf dem Handy ----
   Vorher standen Gerät, Text und Tab-Leiste so weit auseinander, dass man beim
   Tippen nie beides gleichzeitig sah. Jetzt: kleineres Gerät, direkt darunter
   die Tabs (Daumen-Reichweite), darunter die Erklärung. Alles auf einem Blick. */
@media(max-width:899px){
  .sc__phone{width:min(250px,66vw)}
}

/* ---- Quest-Abschnitt: Gerät plus Erklärung ----
   Vorher stand das Gerät allein auf einer leeren Fläche. Jetzt baut die Spalte
   daneben Spannung auf, bevor man tippt — und der Bogen verbindet beides. */
.qgrid{display:grid;gap:26px;margin-top:26px;align-items:center}
@media(min-width:960px){
  .qgrid{grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:clamp(40px,5vw,72px)}
}
.quest-buehne{display:flex;justify-content:center}
.qmeta{position:relative;max-width:520px}
.qmeta .sc__link{display:none}
@media(min-width:960px){
  .qmeta .sc__link{display:block;position:absolute;left:-48px;top:26px;width:48px;height:130px;
    opacity:.6;overflow:visible}
}
.qmeta__tag{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pop);margin-bottom:10px}
.qmeta h3{font-size:clamp(28px,6.5vw,44px);margin-bottom:14px}
.qmeta__lead{font-size:clamp(15.5px,2.3vw,18.5px);line-height:1.62;color:var(--faint)}
.qmeta__lead strong{color:#fff;font-weight:600}
.qmeta__l{display:flex;gap:10px;margin:20px 0 18px}
.qmeta__l li{flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 14px}
.qmeta__l b{display:block;font-family:'Anton',Impact,sans-serif;font-size:clamp(24px,5vw,32px);
  color:var(--primary);line-height:1;margin-bottom:5px}
.qmeta__l span{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.qmeta__buch{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  padding-top:14px;border-top:1px solid var(--line)}
.qmeta__hin{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pop);opacity:.85}
@media(min-width:960px){.qmeta__hin{display:none}}

/* ---- Umlaute brauchen Luft ----
   Bei line-height .95 stossen die Pünktchen von «GEHÖRT» an das «L» der Zeile
   darüber. Anton setzt die Umlaute sehr hoch — deshalb hier etwas mehr Zeilenabstand
   für die grossen Überschriften, die Umlaute enthalten können. */
.hero h1{line-height:1.14}
h2.display,.beat{line-height:1.06}
.saga__story{line-height:1.12}



/* ======================= PLAKAT-BAND =======================
   Kachel und Wort sind exakt gleich hoch, und die Schrift füllt die Zeile fast
   ganz aus — dadurch entsteht der ruhige Plakat-Raster statt einer Sammlung
   unterschiedlich hoher Blöcke. */
.band{--bh:clamp(96px,21vw,168px);
  /* minmax(0,1fr) statt 1fr: Eine 1fr-Spalte darf nicht schmaler werden als ihr
     Inhalt (Boden = min-content). Ein langes Wort wie «JE 21 TAGE» machte das
     Raster deshalb breiter als die Seite — genau daher kam der waagrechte
     Scroll. Mit minmax(0,1fr) bekommt jede Spalte nur ihren Anteil, egal wie
     breit der Inhalt ist. */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:26px}
.band__w{height:var(--bh);display:flex;align-items:center;gap:.16em;
  font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  /* fast Kachelhöhe — Anton hat viel Luft über und unter den Versalien */
  font-size:min(calc(var(--bh) * .62), 9.6vw);line-height:.82;
  color:#e9efec;letter-spacing:.005em;
  /* EINE Zeile, immer. Vorher durfte das Wort umbrechen, damit es nie aus der
     Spalte ragt (sonst scrollt die Seite waagrecht) — aber bei line-height .82
     liegen zwei Zeilen buchstäblich übereinander: aus «51 BÜCHER» wurde ein
     Knäuel aus «BÜCHE» über «R». Passiert ist das immer dann, wenn Anton noch
     nicht geladen war und die breitere Ersatzschrift stand.
     Die Lösung liegt jetzt in band.js: dort wird jede Zeile gemessen und die
     Schrift so weit verkleinert, bis sie in ihre Spalte passt — nach dem Laden
     der Schrift und bei jeder Grössenänderung erneut. overflow:hidden ist nur
     das Sicherheitsnetz, damit selbst ein Messfehler die Seite nicht breit
     macht. min-width:0 hält die Rasterspalte auf ihrem Anteil. */
  min-width:0;white-space:nowrap;overflow:hidden}
.band__w--r{justify-content:flex-end;text-align:right}
.band__w .n{color:var(--primary)}
.band__w .n--pop{color:var(--pop)}

.band__b{position:relative;min-width:0;height:var(--bh);border-radius:var(--r-md);overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}
.bz__svg{width:auto;height:100%;max-width:100%;display:block}

/* --- Skala für die 21 Tage ---
   Alle Felder gleich hoch und gleich breit, nur der Boss ragt heraus. Die
   Höhe je Zustand zu ändern sah unruhig aus; jetzt macht das allein die
   Farbe. Die Welle färbt von links nach rechts ein — oben im Band und unten
   im eigenen Abschnitt exakt gleich. */
.bz__skala{width:100%;max-width:calc(var(--bh) * 2.3);display:flex;flex-direction:column;gap:10px}
.bz__reihe{display:grid;grid-template-columns:repeat(21,1fr);gap:clamp(2px,.6vw,5px);
  align-items:end;height:clamp(32px,6.4vw,48px)}
.bz__f{height:82%;border-radius:clamp(3px,.9vw,6px);transform-origin:bottom;
  /* Auch ungefärbt bleibt der Tag sichtbar — sonst steht zwischen zwei Wellen
     eine leere Kachel da. Die Welle hellt auf, sie zaubert nicht herbei. */
  background:color-mix(in srgb,var(--f) 17%,#141b1c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.bz__f.boss{height:100%}
.bz__f.an{background:color-mix(in srgb,var(--f) 68%,#0f1516);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 45%,transparent)}
.bz__f.wq.an{background:color-mix(in srgb,var(--f) 94%,#fff);
  box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.92),
    0 0 12px color-mix(in srgb,var(--f) 45%,transparent)}
.bz__f.boss.an{background:#35d96c;
  box-shadow:inset 0 0 0 1.8px #fff,0 0 22px rgba(47,201,95,.7)}
.bz__f.schlag{animation:bzSchlag .46s var(--ease)}
@keyframes bzSchlag{0%{transform:scaleY(.76)}55%{transform:scaleY(1.1)}100%{transform:scaleY(1)}}
.bz__wochen{display:flex;justify-content:space-between;font-size:9.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#5c6a68}

/* --- Regal: Skill links, Bücher mittig, Kernsatz rechts --- */
.bz__regal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(10px,2.2vw,26px);width:100%;height:100%}
.bz__skill{min-width:0}
.bz__skill span{display:block;font-family:'Anton',Impact,sans-serif;font-size:11px;
  letter-spacing:.12em;color:var(--gold)}
.bz__skill b{display:block;font-size:clamp(12px,1.5vw,15px);font-weight:700;margin-top:3px;
  line-height:1.2;max-width:11ch}
.bz__mitte{display:flex;flex-direction:column;align-items:center;min-width:0}
.bz__unten{text-align:center;margin-top:8px}
.bz__unten span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.bz__unten b{display:block;font-size:clamp(11px,1.4vw,13.5px);font-weight:600;
  color:var(--faint);margin-top:2px;line-height:1.25}
.bz__satz{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(12px,1.6vw,16px);line-height:1.35;color:var(--faint);
  max-width:15ch;text-align:left}

/* --- Buchkarussell ---
   Es sind buchstäblich die Karten aus der Skill-Pyramide (.buch): gleiches
   Seitenverhältnis 64:88, gleicher Rücken, gleiche Drehung. Vorher war die
   Höhe an die Kachel gekoppelt — dadurch wurden die Bücher hoch und schmal
   und sahen aus wie ein anderes Element. */
.bz__karu{--bw:min(64px, calc(var(--bh) * .29));
  position:relative;width:100%;height:calc(var(--bw) * 1.375 + 14px);
  perspective:760px;transform-style:preserve-3d}
.bz__buch{top:6px;width:var(--bw);height:calc(var(--bw) * 1.375)}
.bz__buch em{font-size:calc(var(--bw) * .42);padding-left:calc(var(--bw) * .14)}
.bz__buch[data-p="0"]{transform:translate(calc(-50% - var(--bw) * .875),9px) rotateY(48deg) scale(.84)}
.bz__buch[data-p="2"]{transform:translate(calc(-50% + var(--bw) * .875),9px) rotateY(-48deg) scale(.84)}

/* --- Roulette ---
   Das Rad liegt in einer eigenen Hülle, damit es nach dem Wurf nach unten aus
   dem Bild sinken kann, während der Satz von oben hereinkommt. Vorher stand
   «Tag 0» einfach als Zeile über dem Rad — das sah angeklebt aus. */
.bz__radbox{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bz__spruch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:0 clamp(12px,3vw,28px);text-align:center;
  opacity:0;transform:translateY(-46%);pointer-events:none;
  transition:opacity .26s var(--ease),transform .6s var(--ease)}
.bz__spruch.da{opacity:1;transform:none}
.bz__spruch b{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;line-height:.92;
  font-size:clamp(26px,calc(var(--bh) * .3),56px);color:var(--pop)}
.bz__spruch span{font-size:clamp(11px,calc(var(--bh) * .082),15.5px);line-height:1.35;
  color:var(--faint);max-width:24ch}

/* Drehpunkt für SVG-Gruppen zuverlässig auf die Mitte der Zeichenfläche legen.
   Ohne transform-box dreht Chrome um den Ursprung oben links, und das Rad
   wandert aus seinem Rahmen. */
.bz__svg g{transform-box:view-box;transform-origin:50% 50%}
.bz__svg path,.bz__svg circle{transform-box:fill-box;transform-origin:50% 50%}
.bz__svg{overflow:visible}

/* ---- Band auf dem Handy ----
   Zwei Spalten plus `white-space:nowrap` liessen «JE 21 TAGE» breiter werden
   als die Spalte — dadurch scrollte die ganze Seite waagrecht (516 statt
   390 px). Zwei Dinge halten das jetzt auseinander:
   1. Auf schmalen Schirmen läuft das Band einspaltig, wie ein Plakat: Kachel,
      darunter das Wort — jedes Wort hat die volle Breite.
   2. Grundsätzlich (siehe .band und .band__w oben) kann keine Spalte mehr
      breiter werden als ihr Anteil, und ein Wort bricht notfalls um, statt aus
      der Spalte zu ragen. Auch die frühere Regel
      @media(min-width:901px){.band__w{white-space:nowrap}} ist deshalb weg —
      sie hielt genau die Zeilen zusammen, die die Seite breit gemacht haben. */
@media(max-width:900px){
  .band{grid-template-columns:minmax(0,1fr);--bh:clamp(118px,31vw,158px);gap:10px}
  /* Auf dem Handy ist die Kachel flach. Der Kernsatz rechts hätte dort nur zwei
     Wörter je Zeile — er fliegt raus, damit Bücher und Buchtitel Platz haben.
     Vorher wurde der Buchtitel («Make It Stick») am unteren Rand abgeschnitten. */
  .band__b{padding:10px}
  .bz__regal{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .bz__satz{display:none}
  .bz__karu{--bw:min(58px, calc(var(--bh) * .3));height:calc(var(--bw) * 1.375 + 8px)}
  .bz__unten{margin-top:5px}
  .bz__unten b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  /* height:auto, damit ein umgebrochenes Wort die Kachelhöhe sprengen darf,
     statt aus dem Kasten zu laufen. Die Schriftgrösse setzt der Deckel weiter
     unten (er gilt für alle Breiten) — eine eigene Grösse hier wäre wirkungslos,
     weil die spätere Regel gewinnt. */
  .band__w{height:auto;line-height:.9;padding:2px 0 6px}
  .band__w--r{justify-content:flex-start;text-align:left}
}

/* ---- Nach dem Umstellen: Taktschlag grösser ----
   Er steht jetzt nach «Ein Jahr. Ein Weg.» und ist der Übergang in die Quest —
   dort darf er lauter sein als vorher. */
.beat{font-size:clamp(42px,12.5vw,86px)}
/* Zwei Sätze, zwei Zeilen — dazwischen Luft, damit der zweite als eigene
   Ansage steht und nicht als Anhängsel. */
.beat__z{display:block}
.beat__z + .beat__z{margin-top:10px}
.beat--last{font-size:clamp(50px,15vw,104px)}

/* ---- Band: kompakter, Wort und Kachel fast gleich hoch ----
   Vorher waren die Kacheln so hoch, dass die Schrift daneben klein wirkte und
   der Abschnitt viel Platz brauchte. Flachere Kacheln (--bh ganz oben) und ein
   grösserer Faktor bringen Wort und Kachel optisch auf dieselbe Höhe. */
/* Die Schrift ist so gross wie die Kachel hoch — aber nie breiter als ihre
   Spalte. Das laengste Wort («Je 21 Tage») braucht 3,87 em; bei zwei Spalten
   im 1140er-Raster ist die Spalte (Breite − 56px)/2 breit. Daraus der Teiler
   7,9 (2 × 3,95) mit etwas Luft. Ohne diese Grenze wurde bei 1440 px das
   letzte Zeichen abgeschnitten. */
.band__w{font-size:min(calc(var(--bh) * .82), calc((min(100vw, 1140px) - 56px) / 7.9))}
.band__b{padding:clamp(14px,2vw,24px)}

/* Rad und Roulette sind absichtlich grösser als ihre Kachel und ragen hinaus —
   angeschnitten wirken sie wie ein Ausschnitt aus etwas Grösserem. */
.band__b--anschnitt{padding:0}
/* Das Rad ist absichtlich grösser als die Kachel, darf unten aber nicht
   mehr anstossen — sonst schneidet der Rand die Zahlen an. */
.bz__svg--oben{height:122%;transform:translateY(-8%)}
.bz__svg--unten{height:150%;transform:translateY(20%)}

/* Regal: Rand einhalten und die Bücher nicht quetschen — gleiche Masse wie in
   der Pyramide weiter unten. */
.bz__regal{gap:clamp(14px,2.6vw,34px);padding:0 clamp(2px,1vw,10px)}
.bz__skill b{max-width:13ch}
.bz__satz{max-width:17ch}

/* Die grosse Fassung der Skala im eigenen Abschnitt */
/* Die grosse Fassung ist nur wenig höher als die im Band — vorher ragten die
   Balken hier deutlich weiter hoch und wirkten wie ein anderes Element. */
.bz__skala--gross{max-width:none;gap:14px}
.bz__skala--gross .bz__reihe{height:clamp(34px,7vw,54px);gap:clamp(3px,.8vw,7px)}
.bz__skala--gross .bz__f{border-radius:clamp(4px,1vw,7px)}
.bz__skala--gross .bz__wochen{font-size:11.5px;letter-spacing:.2em}

/* Der eigene Abschnitt ist nur noch Rahmen — die Skala selbst kommt aus
   band.js, damit oben und unten wirklich dasselbe steht. */
/* Der ganze Abschnitt steht mittig über der Skala — links ausgerichteter Text
   über einer symmetrischen Skala sah aus, als wäre etwas verrutscht. */
.tagsk{margin:28px 0 12px}
.tagsk-sec{text-align:center}
.tagsk-sec .lead{margin-inline:auto;max-width:34ch}
.tagsk-sec .wqhint{justify-content:center}

/* ======================= TARIFE ALS KLEINE PYRAMIDE =======================
   Vorher steckte hier alles in Kästen — als Einziges auf der ganzen Seite.
   Jetzt sind es drei Zeilen wie die Skill-Pyramide: oben Supporter mit allen
   15 Punkten, darunter Premium, unten der Einsteiger. Die Punktegruppe ist in
   einer gleich breiten Spalte zentriert, daraus entsteht die Form. Was der
   gewählte Plan freischaltet, steht darunter als Kachelfeld. */
.tarife{--tf:var(--primary);margin-top:26px}
.tf__pyra{--pd:clamp(7px,1vw,13px);--pg:clamp(3px,.5vw,7px);
  display:flex;flex-direction:column;gap:6px;width:100%}
.tf__r{display:grid;
  grid-template-columns:calc(var(--pd) * 15 + var(--pg) * 14) minmax(0,1fr) auto;
  align-items:center;gap:clamp(12px,2vw,26px);min-height:56px;
  padding:10px clamp(10px,1.6vw,18px);border-radius:14px;text-align:left;
  background:transparent;border:1px solid transparent;cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease)}
.tf__r:hover{background:rgba(255,255,255,.035)}
.tf__r[aria-selected="true"]{background:color-mix(in srgb,var(--tw) 10%,transparent);
  border-color:color-mix(in srgb,var(--tw) 30%,transparent)}
.tf__r:focus-visible{outline:2px solid var(--tw);outline-offset:2px}
.tf__d{display:flex;gap:var(--pg);justify-content:center}
.tf__d i{width:var(--pd);height:var(--pd);border-radius:50%;background:var(--tw);
  opacity:.32;transition:opacity .25s var(--ease),box-shadow .25s var(--ease)}
.tf__r:hover .tf__d i{opacity:.6}
.tf__r[aria-selected="true"] .tf__d i{opacity:1;
  box-shadow:0 0 9px color-mix(in srgb,var(--tw) 55%,transparent)}
.tf__n{font-size:15px;font-weight:700;color:var(--muted);transition:color .22s var(--ease)}
.tf__r[aria-selected="true"] .tf__n{color:#fff}
.tf__n em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#5c6a68;margin-top:2px}
.tf__r[aria-selected="true"] .tf__n em{color:var(--tw)}
.tf__p{display:flex;align-items:baseline;gap:3px;color:var(--muted);
  transition:color .22s var(--ease)}
.tf__p b{font-family:'Anton',Impact,sans-serif;font-size:clamp(26px,4vw,38px);line-height:1}
.tf__p small{font-size:11.5px}
.tf__r[aria-selected="true"] .tf__p{color:var(--tw)}

.tf__unten{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.tf__satz{margin-bottom:16px}
.tf__satz b{display:block;font-size:16px;font-weight:600;color:#fff}
.tf__satz span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.tf__zahl{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.tf__zahl b{font-family:'Anton',Impact,sans-serif;font-size:26px;color:var(--tf);
  transition:color .4s var(--ease)}
.tf__zahl span{font-size:12px;color:var(--muted)}

.tf__gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.tf__k{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 6px;border-radius:var(--r-sm);background:rgba(255,255,255,.02);
  border:1px solid var(--line);color:#3f4a49;
  transition:color .35s var(--ease),background .35s var(--ease),
    border-color .35s var(--ease),box-shadow .35s var(--ease)}
.tf__k svg{width:20px;height:20px}
.tf__k b{font-size:10.5px;font-weight:700;text-align:center;line-height:1.2}
/* Jede Kachel trägt die Farbe der Stufe, mit der sie dazukommt (--kf) — nicht
   die des gerade gewählten Plans. Sonst leuchtet beim Umschalten die ganze
   Fläche in einer Farbe, und man sieht gerade nicht mehr, was neu ist. */
.tf__k.an{color:var(--kf);background:color-mix(in srgb,var(--kf) 12%,transparent);
  border-color:color-mix(in srgb,var(--kf) 32%,transparent)}

/* --- Der Aufstieg ---
   Eine Kachel nach der anderen, ruhig. Kein Sprung, keine Stauchung — nur ein
   Schimmer, der einmal rundherum aufgeht und wieder verschwindet. */
.tf__k--neu{animation:tfSchimmer 1.15s var(--ease)}
@keyframes tfSchimmer{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--kf) 0%,transparent)}
  30%{box-shadow:0 0 20px 3px color-mix(in srgb,var(--kf) 52%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--kf) 0%,transparent)}}

@media(max-width:620px){
  /* Auf dem Handy stehen Punkte und Text untereinander, sonst bleibt für den
     Namen nichts übrig. Die Pyramidenform tragen die Punkte weiterhin. */
  .tf__r{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 10px}
  .tf__d{grid-column:1/-1;justify-content:flex-start}
  .tf__n{align-self:center}
}

@media(prefers-reduced-motion:reduce){ .tf__k--neu{animation:none} }

/* ======================= WARTELISTE =======================
   Kein Formular-Kasten mehr, sondern ein Abschluss wie der Rest der Seite:
   Überschrift gross, eine Zeile zum Eintragen, der Rest klein darunter. */
.wl{max-width:560px;margin:34px auto 0;text-align:left;padding-top:26px;
  border-top:1px solid var(--line)}
.wl__tag{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pop);margin-bottom:10px}
.wl h3{font-size:clamp(30px,7vw,52px);line-height:.98;margin-bottom:12px}
.wl__sub{font-size:15px;line-height:1.55;color:var(--faint);margin-bottom:18px}
.wl__zeile{display:grid;gap:10px}
@media(min-width:520px){.wl__zeile{grid-template-columns:1fr auto}}
.wl__feld{width:100%;padding:15px 17px;border-radius:99px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);color:#fff;font-size:16px;transition:.18s}
.wl__feld::placeholder{color:#68746f}
.wl__feld:focus{outline:0;border-color:var(--pop);background:rgba(255,138,61,.07);
  box-shadow:0 0 0 3px rgba(255,138,61,.18)}
.wl__seg{display:flex;gap:8px;border:0;padding:0;margin:12px 0 0}
.wl__seg label{flex:1}
.wl__seg input{position:absolute;opacity:0;width:0;height:0}
.wl__seg span{display:flex;align-items:center;justify-content:center;min-height:44px;
  border-radius:99px;border:1px solid var(--line);font-size:13.5px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:.16s}
.wl__seg label:hover span{border-color:var(--line-strong);color:#fff}
.wl__seg input:checked+span{background:var(--pop-dim);border-color:var(--pop);color:var(--pop)}
.wl__seg input:focus-visible+span{outline:3px solid var(--pop);outline-offset:3px}
.wl__ok{display:flex;gap:11px;align-items:flex-start;margin-top:14px;min-height:44px;
  font-size:12.5px;line-height:1.5;color:var(--muted);cursor:pointer}
.wl__ok input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--pop);cursor:pointer}