/* =========================================================================
   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}

/* Beim Tippen auf dem Handy legte Android einen hellen RECHTECK-Schleier über
   runde Knöpfe (Eluan 23.08.: «sieht nicht schön aus»). Der Schleier ist weg;
   die Rückmeldung kommt stattdessen aus :active, die folgt der runden Form. */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,[role="button"],[role="tab"]{-webkit-tap-highlight-color:transparent}
/* Ein Mausklick soll keinen Fokusrahmen stehen lassen, nur die Tastatur. */
:focus:not(:focus-visible){outline:none}
@media(hover:none){
  a:active,button:active,[role="button"]:active,[role="tab"]:active{opacity:.72}
  .btn:active{opacity:1}
}

.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}
/* Eine Fuehrungszeile, die ausdruecklich die ganze Spalte nutzt statt der
   680 Pixel von .narrow (Eluan 08.09.2026: «endet mitten auf der Seite»).
   Steht hier als eigene Klasse, damit spaeter niemand versehentlich wieder
   .narrow danebenschreibt. text-wrap:pretty haelt nur einzelne Woerter vom
   Zeilenende fern; ausgeglichen wird NICHT, sonst waere die Zeile wieder
   schmal. */
.lead--breit{max-width:none;margin-inline:0;text-wrap:pretty}
.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}

/* ======================= KOPFLEISTE =======================
   Seit dem 11.10.2026 (Handy-Umbau) EINE Zeile auf jeder Seite.
   Am Handy: Marke links, rechts «App holen» und der Menü-Knopf. Das Menü
   klappt darunter auf und enthält die Seiten und die Sprachwahl DE/EN.
   Ab 900 Pixeln stehen Seiten und Sprache in der Zeile, der Knopf fällt weg.
   Vorher waren es am Handy zwei bis drei Zeilen und 132 Pixel, jetzt 57.

   Das Menü ist nur zu, wenn kopfleiste.js läuft (html[data-kopf="js"]).
   Ohne Skript stehen die Verweise offen unter der Leiste.
   Bewegung nur über transform und opacity, ohne bei reduzierter Bewegung.
   Jeder Verweis hat eine Berührfläche von mindestens 44 x 44 Pixeln. */
.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:8px;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;min-width:0}
.brand img{width:30px;height:30px;border-radius:8px}
.brand i{color:var(--primary);font-style:normal}

.nav__menue{display:flex;align-items:center;gap:10px}
.nav__links{display:flex;gap:4px;align-items:center}
.nav__links a{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 9px;text-decoration:none;font-size:14.5px;font-weight:500;
  color:var(--muted);white-space:nowrap;transition:color .18s}
.nav__links a:hover{color:#fff}
.nav__links a[aria-current="page"]{color:#fff;font-weight:700}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:6px;
  height:2px;border-radius:99px;background:var(--primary);
  box-shadow:0 0 10px rgba(95,181,171,.6)}

/* ---------- Sprachumschalter DE | EN ----------
   Leise gehalten: kein Kasten, keine Füllung, die aktive Sprache steht in
   Weiss, die andere gedimmt (Eluan 23.08.: «nicht so fett und aufdringlich»).
   Kein Trennstrich zwischen DE und EN (Eluan 23.08.). */
.lang{display:flex;align-items:center;padding:0;border:0;background:none}
.lang a{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 6px;
  font-size:12px;font-weight:700;letter-spacing:.09em;line-height:1;
  color:var(--muted);text-decoration:none;transition:color .18s}
.lang a:hover{color:#fff}
.lang a:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;border-radius:10px}
.lang a[aria-current]{color:#fff}

.nav__holen{flex:none;white-space:nowrap}
.nav__knopf{display:none}

/* ---------- Am Handy und am Tablet: eine Zeile, Menü klappt auf ---------- */
@media(max-width:899px){
  :root{--nav-h:56px}
  .brand span{font-size:16px}
  .brand img{width:28px;height:28px}
  .nav .nav__holen{min-height:44px;padding:0 16px;font-size:14px}
  .nav__knopf{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;margin-right:-6px;padding:0;border:0;border-radius:12px;
    background:transparent;color:#fff;cursor:pointer;transition:background .18s}
  .nav__knopf svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .nav__knopf:hover{background:rgba(255,255,255,.06)}
  .nav__knopf:active{background:rgba(255,255,255,.1)}
  .nav__knopf:focus-visible{outline:3px solid var(--primary);outline-offset:-3px;border-radius:12px}
  .nav--offen .nav__knopf{background:var(--surface)}
  /* Offen wird aus den drei Strichen ein Kreuz (nur transform und opacity) */
  .nav__knopf path{transform-box:view-box;transform-origin:12px 12px;
    transition:transform .2s var(--ease),opacity .2s var(--ease)}
  .nav--offen .nav__knopf path:nth-child(1){transform:rotate(45deg) translateY(5px)}
  .nav--offen .nav__knopf path:nth-child(2){opacity:0}
  .nav--offen .nav__knopf path:nth-child(3){transform:rotate(-45deg) translateY(-5px)}

  .nav__menue{position:absolute;top:100%;left:0;right:0;z-index:61;
    display:block;padding:6px var(--pad) 18px;
    background:var(--bg);border-bottom:1px solid var(--line-strong);
    box-shadow:0 24px 40px rgba(0,0,0,.45);
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
  html[data-kopf="js"] .nav__menue{visibility:hidden;opacity:0;transform:translateY(-8px);
    pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
  html[data-kopf="js"] .nav--offen .nav__menue{visibility:visible;opacity:1;transform:none;
    pointer-events:auto;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s}

  .nav__links{flex-direction:column;align-items:stretch;gap:0}
  .nav__links a{justify-content:flex-start;min-height:52px;padding:0 4px;font-size:18px;font-weight:600;
    color:#fff;border-bottom:1px solid var(--line)}
  .nav__links a[aria-current="page"]{color:var(--primary)}
  .nav__links a[aria-current="page"]::after{left:auto;right:6px;top:50%;bottom:auto;width:8px;height:8px;
    margin-top:-4px;border-radius:99px}
  .lang{gap:8px;margin-top:14px}
  .lang a{min-width:56px;font-size:14px;letter-spacing:.06em;
    border:1px solid var(--line-strong);border-radius:99px}
  .lang a[aria-current]{background:var(--surface);border-color:var(--primary-line)}

  /* Ohne Skript: kein Knopf, die Verweise stehen offen unter der Leiste */
  html:not([data-kopf="js"]) .nav__knopf{display:none}
  html:not([data-kopf="js"]) .nav__in{flex-wrap:wrap;height:auto;min-height:var(--nav-h);padding-top:6px}
  html:not([data-kopf="js"]) .nav__links a[aria-current="page"]::after{left:4px;right:4px;top:auto;bottom:6px;
    width:auto;height:2px;margin-top:0}
  html:not([data-kopf="js"]) .nav__menue{position:static;order:5;width:100%;padding:0 0 10px;
    border:0;box-shadow:none;background:none;max-height:none}
  html:not([data-kopf="js"]) .nav__links{flex-direction:row;flex-wrap:wrap}
  html:not([data-kopf="js"]) .nav__links a{font-size:15px;border:0;min-height:44px}
}
@media(max-width:899px) and (prefers-reduced-motion:reduce){
  html[data-kopf="js"] .nav__menue,
  html[data-kopf="js"] .nav--offen .nav__menue{transition:none;transform:none}
  .nav__knopf path{transition:none}
}
/* Sehr schmale Schirme (unter 340): die Marke nur als Zeichen */
@media(max-width:339px){
  .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ======================= 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}

/* ---------- Kurzes Aufleuchten der zwei Knöpfe ----------
   Wer unten auf einer Vertiefungsseite auf «App holen» tippt und kein Handy
   benutzt, landet über /?leuchten=1#holen genau hier. Damit er die zwei
   Knöpfe bemerkt, legt sich zweimal kurz ein weicher Schein um sie, knapp
   zwei Sekunden lang, danach ist es von selbst vorbei.
   Nur box-shadow: das braucht keinen Platz, also springt nichts und der
   Zeilenumbruch bleibt, wie er ist. Die Farbe ist --primary, die schon für
   jede ruhige Hervorhebung der Seite steht. */
.store.store--leuchtet{animation:storeLeuchten 1.8s var(--ease)}
@keyframes storeLeuchten{
  0%,100%{box-shadow:0 0 0 0 rgba(95,181,171,0)}
  16%,66%{box-shadow:0 0 0 3px var(--primary-line),0 0 26px 6px var(--primary-dim)}
  41%{box-shadow:0 0 0 0 rgba(95,181,171,0)}
}
/* Wer im Betriebssystem Bewegung vermeiden will, bekommt dieselbe Aussage ohne
   jede Bewegung: der Schein steht einfach da, solange die Klasse gesetzt ist. */
@media(prefers-reduced-motion:reduce){
  .store.store--leuchtet{animation:none;transition:none;
    box-shadow:0 0 0 3px var(--primary-line),0 0 0 7px var(--primary-dim)}
}

/* ======================= 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. */
/* Rundung und Rahmenbreite haengen an der Geraetebreite (--pw). Vorher waren sie
   fest: ein 190-px-Handy bekam denselben 48-px-Radius wie ein 300-px-Handy und
   sah aus wie eine Seifenblase (Eluan 23.08.). Verhaeltnis wie beim iPhone. */
.iphone{--pw:min(300px,78vw);position:relative;width:var(--pw);margin-inline:auto;
  border-radius:calc(var(--pw) * .152);padding:calc(var(--pw) * .0235);
  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:calc(var(--pw) * .129);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 h1{margin-bottom:20px}
.hero h1 .dim{color:#4d5a58;display:block;margin-top:.14em}
.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)}

/* ======================= 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)}

/* Die alte Karten-Optik der Quest (.demo__*, .bignum, .versus) stand hier und ist
   am 2026-08-28 entfernt worden: Die Quest läuft seit dem 20.08. im Gerät
   (assets/css/quest.css, assets/js/quest.js), die Klassen kamen in keiner
   Seite mehr vor. */
.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)}

.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}

/* ======================= DER WANDEL =======================
   Gleiche Bildsprache wie die Play-Store-Grafiken: ein dunkles Verlaufsfeld mit
   feinem Raster, oben eine Pille, dann eine grosse zweifarbige Zeile und darunter
   die Geräte. Das ist der einzige Kasten auf der Startseite, er soll wie eine
   Karte aus dem Store wirken. */
.wandel-abstand{height:0}
.wsl{position:relative;overflow:hidden;margin-top:30px;
  padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px) clamp(30px,4vw,44px);
  border-radius:var(--r-xl);border:1px solid rgba(95,181,171,.18);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(95,181,171,.20), transparent 62%),
    linear-gradient(165deg,#13201f 0%, #101718 46%, #0c1213 100%);
  text-align:center}
/* Das feine Raster aus den Store-Bildern, kaum sichtbar, gibt aber Tiefe. */
.wsl::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 10%, #000, transparent 75%)}
.wsl > *{position:relative}

.wsl__pill{display:inline-flex;align-items:center;gap:8px;margin:0 auto 18px;
  padding:8px 16px;border-radius:99px;border:1px solid rgba(95,181,171,.34);
  background:rgba(95,181,171,.08);
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--primary)}
.wsl__pill i{width:7px;height:7px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 10px rgba(95,181,171,.8)}
.wsl__h{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:none;
  font-size:clamp(30px,5.6vw,54px);line-height:1.04;letter-spacing:-.01em;color:#fff}
.wsl__h span{color:var(--primary)}
.wsl__sub{margin:14px auto 0;max-width:44ch;font-size:15.5px;line-height:1.6;color:var(--faint)}

.wsl__reihe{display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(12px,2.4vw,30px);margin-top:clamp(26px,4vw,44px)}
.wsl__k{width:min(200px,27vw);margin:0}
/* Der Bildschirm ist jetzt ein eigener Rahmen: oben die Statusleiste, darunter
   das Bild von damals. Dadurch klebt die App-Kopfzeile nicht mehr an der Kante. */
.wsl__scr{container-type:inline-size;display:flex;flex-direction:column;
  background:var(--bg,#0e1213);border-radius:clamp(12px,1.6vw,20px);overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  /* Unten weich auslaufen lassen, genau wie auf den Store-Grafiken. */
  mask-image:linear-gradient(180deg,#000 74%,transparent 100%)}
.wsl__k img{width:100%;height:auto;display:block}
.wsl__k--mitte{width:min(224px,30vw)}
.wsl__k figcaption{margin-top:14px}
.wsl__k figcaption b{display:block;font-family:'Anton',Impact,sans-serif;
  font-size:15px;letter-spacing:.02em;color:#fff}
.wsl__k figcaption span{display:block;margin-top:5px;font-size:11.5px;line-height:1.35;
  color:var(--muted);position:relative;padding-top:9px}
.wsl__k figcaption span::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:99px;background:var(--f)}

.wsl__cta{margin-top:clamp(26px,4vw,40px)}
.wsl__hin{display:block;margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

@media(max-width:640px){
  /* Auf dem Handy als Wisch-Reihe: drei Geräte nebeneinander wären Briefmarken. */
  .wsl{padding-inline:0;text-align:center}
  .wsl__pill,.wsl__h,.wsl__sub,.wsl__cta{padding-inline:20px}
  .wsl__reihe{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 20px 6px;gap:16px;scrollbar-width:none}
  .wsl__reihe::-webkit-scrollbar{display:none}
  .wsl__k,.wsl__k--mitte{flex:0 0 62%;width:auto;scroll-snap-align:center}
}

/* ======================= HANDY-STATUSLEISTE =======================
   Die alten Bildschirmfotos und die Vorschau-Rahmen wurden ohne Statusleiste
   aufgenommen: die App-Kopfzeile klebte oben an der Gerätekante (Eluan 23.08.).
   Diese Leiste kommt darüber (Uhrzeit links, Kamera-Insel in der Mitte,
   WLAN und Akku rechts) und schiebt den Inhalt nach unten.
   Die Grössen hängen an der Breite des Rahmens (cqw), damit dieselbe Leiste
   auf einem 200-px-Gerät und auf einem 390-px-Gerät stimmt. */
.psb{position:relative;width:100%;aspect-ratio:8.4/1;flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5.5cqw;color:#fff;pointer-events:none;user-select:none}
.psb b{font-size:clamp(7px,5.4cqw,15px);font-weight:700;letter-spacing:.01em;line-height:1}
/* Auf ganz schwarzen Bildschirmen wäre eine schwarze Insel unsichtbar, ein
   hauchdünner Rand und die angedeutete Linse machen sie überall sichtbar. */
.psb__insel{position:absolute;left:50%;top:22%;transform:translateX(-50%);
  width:26cqw;height:54%;border-radius:99px;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* Die Linse ist nur zu erahnen, ein grosser Punkt sieht sofort unecht aus. */
.psb__insel::after{content:"";position:absolute;right:12%;top:50%;transform:translateY(-50%);
  width:16%;aspect-ratio:1;border-radius:50%;background:#0a0d0e;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07)}
.psb__r{display:flex;align-items:center;gap:1.6cqw}
.psb__r svg{display:block;width:auto;height:clamp(7px,4.6cqw,13px)}
/* Ohne Container-Abfragen (sehr alte Browser) bleibt es lesbar, nur fix. */
@supports not (width:1cqw){
  .psb{padding:0 11px}
  .psb b{font-size:11px}
  .psb__insel{width:62px}
  .psb__r svg{height:9px}
}

/* ======================= FRAGEN =======================
   Sichtbarer Text, keine Klapp-Elemente: was zugeklappt ist, liest niemand,
   und eine KI zitiert lieber, was offen dasteht. */
.faq{margin-top:26px;display:grid;gap:2px}
@media(min-width:820px){.faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 44px}}
.faq__f{padding:18px 0;border-top:1px solid var(--line)}
.faq__f h3{font-size:16.5px;font-weight:700;margin-bottom:6px;color:#fff}
.faq__f p{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ======================= 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)}

/* Der Vergleich bleibt bewusst ein Kasten: er ist eine eigene Behauptung und
   soll sich vom Rest abheben, die Tarife darunter kommen dafür ohne aus. */
.anchor{margin-top:24px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  justify-content:space-between;padding:22px 24px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--pop-dim),var(--card) 60%);border:1px solid var(--pop-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. */
/* Eine kleine Uhr läuft einmal durch, dann kommt der Text, «und danach» wird
   damit sichtbar, statt nur dazustehen. */

/* ======================= 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(-46px,-3.2vw,-18px);position:relative;z-index:2}
.zwei figure:first-child{filter:brightness(.94)}
.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}

/* Fusszeile. Seit dem 11.10.2026 (Handy-Umbau) zentral:
   · Schrift in var(--muted), 7,6 zu 1 auf --bg. Vorher #5c6a68 mit 3,3 zu 1,
     das verfehlte AA; die Kopien dieser Regel in den Seiten-Stilblättern sind weg.
   · Jeder Verweis hat eine Berührfläche von mindestens 44 x 44 Pixeln, auch
     die Mailadresse und «Messung: Wahl ändern». */
footer{border-top:1px solid var(--line);padding:36px 0 44px;margin-top:20px}
.foot{display:flex;flex-direction:column;gap:18px}
@media(min-width:760px){.foot{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.foot__links{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 -7px}
.foot__links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 7px;
  font-size:15px;color:var(--muted);text-decoration:none;transition:color .16s}
.foot__links a:hover{color:#fff;text-decoration:underline}
.foot__legal{font-size:14px;color:var(--muted);line-height:1.7}
.foot__legal a{display:inline-flex;align-items:center;min-height:44px}

/* ======================= 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:16px;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:16px;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). */
/* 86vw statt 80vw: Auf einem 375er-Handy war das Gerät 300px breit, alles darin
   also auf 77% verkleinert. Der Pfeil zurück kam damit nicht mehr auf 44px
   Grifffläche. Auf dem Rechner bleibt es bei 336px. */
.q-phone{width:min(322px,86vw);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;position:relative;display:flex;flex-direction:column;gap:5px;
  width:max-content;max-width:100%;margin:0 auto 22px;padding-left:24px}
/* Der Weg durch die Phasen: ein Strich von oben nach unten mit Spitze am Ende.
   Er sagt ohne ein Wort, dass man beim Fundament anfängt und bei «Hebel &
   Sinn» herauskommt. */
.pyra__weg{position:absolute;left:2px;top:10px;bottom:8px;width:13px;
  display:flex;flex-direction:column;align-items:center;
  color:var(--primary);opacity:.55;pointer-events:none}
.pyra__weg i{flex:1;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(95,181,171,0),var(--primary))}
.pyra__weg svg{display:block;margin-top:-2px}
.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:620px){
  /* Auf dem Handy müssen Pyramide UND die Karten der gewählten Phase
     gleichzeitig zu sehen sein. Darum: kleinere Punkte, flachere Reihen, und
     der Phasenkopf fällt weg, weil sein Name schon in der aktiven Reihe steht. */
  .pyra{--pd:9px;--pg:5px;width:100%;gap:3px;margin-bottom:14px;padding-left:20px}
  .pyra__r{gap:10px;padding:4px 10px;min-height:36px}
  .pyra__t{font-size:12.5px}
  .pyra__t em{font-size:9px;letter-spacing:.12em}
  .skillbox{margin-top:16px}
  .phase__head{display:none}
  .skill{padding:14px}
  .skill h4{font-size:15.5px}
  .skill p{font-size:13px}
  .karu{height:92px;padding-top:10px}
  .buch{width:56px;height:77px}
  .buch em{font-size:24px}
  .buch[data-p="0"]{transform:translate(calc(-50% - 49px),8px) rotateY(48deg) scale(.84)}
  .buch[data-p="2"]{transform:translate(calc(-50% + 49px),8px) rotateY(-48deg) scale(.84)}
}

/* ---- 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. Erst wenn es weg ist, kommt der Satz von oben herein.
   Vorher stand «Tag 0» einfach als Zeile über dem Rad, das sah angeklebt aus.

   Am 08.09.2026 sind Weg und Dauer des Satzes kleiner geworden: er kam bis
   dahin aus 46 Prozent Höhe und brauchte 600 ms für den Weg, lief also noch,
   während das Rad absank, und schob sich sichtbar darüber. Jetzt startet er
   erst nach dem Rad, kommt aus 20 Prozent Höhe und ist in 220 ms da. Beides
   zusammen dauert weniger als das Nebeneinander vorher. Die Dauer steht auch
   in assets/js/band.js (PAUSE), beide Werte gehören zusammen. */
.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(-20%);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s 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}
  /* Einspaltig stand die Reihenfolge aus dem Zweispalter kopf: Kachel, Wort,
     Wort, Kachel … Hier wird sie so sortiert, wie man sie liest, erst das
     Wort, dann die Kachel, die es zeigt. */
  .band > *:nth-child(1){order:2}   /* Rad      */
  .band > *:nth-child(2){order:1}   /* 17 Skills */
  .band > *:nth-child(3){order:3}   /* Je 21 Tage */
  .band > *:nth-child(4){order:4}   /* Skala    */
  .band > *:nth-child(5){order:6}   /* Bücher   */
  .band > *:nth-child(6){order:5}   /* 51 Bücher */
  .band > *:nth-child(7){order:7}   /* 357 Tage */
  .band > *:nth-child(8){order:8}   /* Roulette */
  /* 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}
/* Die Leiste hing vorher frei im Dunkeln. Jetzt liegt sie mit ihrer Erklärung
   auf einer eigenen Fläche, die ringsum leuchtet, und hat damit einen Boden. */
.tagsk-feld{margin-top:26px;padding:8px clamp(14px,4vw,28px) 20px;
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(95,181,171,.10),0 0 52px rgba(95,181,171,.16)}
.tagsk-feld .tagsk{margin:18px 0 0}
/* Als Block statt Flex: so läuft die Erklärung um das Farbfeld herum, statt
   dass das Feld allein auf einer eigenen Zeile steht. */
.tagsk-feld .wqhint{display:block;margin-top:18px;line-height:1.65;max-width:52ch;
  margin-inline:auto}
.tagsk-feld .wqhint b{margin-right:9px;vertical-align:-5px}

/* ======================= VERTRAUEN & TESTZEIT =======================
   Vor der Preisentscheidung stehen vier Punkte, die anderswo auf der Seite
   ohnehin belegt sind, gebündelt, damit man sie nicht suchen muss. Danach
   zeigt ein kurzer Strahl, was in den 14 Tagen passiert. Beides bewusst ohne
   Druckmittel: keine Countdowns, keine erfundene Knappheit. */
.vertr{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;
  padding-bottom:4px}
.vertr li{position:relative;padding-left:22px;font-size:14px;font-weight:600;color:var(--faint)}
.vertr li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:7px;
  border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:rotate(-45deg)}

.test{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.test__k{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px}
.test__bahn{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.06);
  overflow:hidden}
.test__fuell{position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 40%,var(--pop)));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease) .2s}
.rise.shown .test__fuell,.test.shown .test__fuell{transform:scaleX(1)}
.test__marken{display:grid;gap:18px;margin-top:16px}
@media(min-width:720px){.test__marken{grid-template-columns:1fr 1fr;gap:34px}}
.test__m{position:relative;padding-top:14px;border-top:1px solid var(--line)}
.test__m::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;
  border-radius:50%;background:var(--primary);box-shadow:0 0 10px rgba(95,181,171,.6)}
.test__m--r::before{background:var(--pop);box-shadow:0 0 10px rgba(255,138,61,.6)}
@media(min-width:720px){.test__m--r{text-align:right}.test__m--r::before{left:auto;right:0}}
.test__m b{display:block;font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:19px;color:#fff;margin-bottom:5px}
.test__m span{display:block;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:42ch}
@media(min-width:720px){.test__m--r span{margin-left:auto}}

/* ======================= TARIFE ALS KLEINE PYRAMIDE =======================
   ‼️ STILLGELEGT AM 25.09.2026. Auf keiner Seite trägt noch ein Element die
   Klassen .tarife, .tf__*, .vertr oder .frei: der Preis-Abschnitt ist weg, weil
   die Website nichts mehr über Geld sagt (Eluan: «mach den preis gar nicht hier
   auf die webseite»). Die Regeln bleiben absichtlich stehen, damit der Abschnitt
   sich in einem Zug zurückholen lässt; wie das geht, steht in
   stillgelegt/LIES-MICH.md. Sie kosten nichts, weil sie auf nichts passen.
   Wer hier aufräumt, nimmt den ganzen Block bis vor .wl__ mit.

   Drei Zeilen, oben die schmalste: Supporter mit seinen drei Bereichen,
   darunter Premium mit fünf, unten der Einsteiger mit sieben. Die Kacheln
   selbst bilden die Pyramide, abstrakte Punkte daneben braucht es nicht.
   Gewählt heisst: diese Zeile und alles darunter ist enthalten. */
.tarife{--tf:var(--primary);margin-top:26px}
.tf__pyra{display:flex;flex-direction:column;gap:8px}
.tf__r{position:relative;display:grid;
  grid-template-columns:minmax(112px,152px) minmax(0,1fr) auto;
  align-items:center;gap:clamp(12px,2vw,24px);
  padding:14px clamp(12px,1.8vw,20px);border-radius:16px;text-align:left;
  background:transparent;border:0;cursor:pointer;
  transition:background .25s var(--ease)}
.tf__r:hover{background:rgba(255,255,255,.03)}
/* Statt eines Kastens: ein Farbverlauf, der nach rechts ausläuft. Der harte
   Rahmen wirkte wie ein Formularfeld.
   Die leuchtende Kante links (3 px, var(--tw), Schein rundherum) ist am
   30.08. entfernt worden. Eluan: «lösch den neonleuchtenden Strich auf der
   linken Seite, dass es normal aussieht». Deckt sich mit seiner Regel gegen
   farbige Randakzente links an Kästen. Gewählt bleibt am Verlauf, am weissen
   Namen und am farbigen Preis erkennbar. */
.tf__r[aria-selected="true"]{
  background:linear-gradient(90deg,color-mix(in srgb,var(--tw) 18%,transparent),
    color-mix(in srgb,var(--tw) 5%,transparent) 55%,transparent 88%)}
.tf__r:focus-visible{outline:2px solid var(--tw);outline-offset:2px}

.tf__n{font-size:15.5px;font-weight:700;color:var(--muted);transition:color .22s var(--ease)}
.tf__r.drin .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:3px}
.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(24px,3.4vw,34px);line-height:1}
.tf__p small{font-size:11.5px}
.tf__r[aria-selected="true"] .tf__p{color:var(--tw)}

/* Die Kachelgruppe steht mittig, dadurch stehen 3, 5 und 7 Kacheln als
   Pyramide untereinander. */
.tf__g{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tf__k{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  width:96px;padding:11px 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 ihrer Stufe (die Zeile setzt --tw), nicht die
   des gewählten Plans. So sieht man, WAS auf welcher Stufe dazukommt. */
.tf__k.an{color:var(--tw);background:color-mix(in srgb,var(--tw) 12%,transparent);
  border-color:color-mix(in srgb,var(--tw) 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(--tw) 0%,transparent)}
  30%{box-shadow:0 0 20px 3px color-mix(in srgb,var(--tw) 52%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tw) 0%,transparent)}}

.tf__unten{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 26px}
.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}
.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)}

@media(max-width:720px){
  /* Auf dem Handy steht der Name über den Kacheln, der Preis daneben. */
  .tf__r{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:14px 10px}
  .tf__g{grid-column:1/-1;justify-content:flex-start}
  .tf__k{width:calc((100% - 16px) / 3);min-width:0}
}

@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}

/* «14 Tage kostenlos testen», ein Satz statt eines Zeitstrahls (Eluan 23.08.). */
.frei{margin-top:26px;padding:18px 20px;border-radius:var(--r-lg);
  background:rgba(95,181,171,.06);border:1px solid var(--primary-line);
  font-size:15px;line-height:1.6;color:var(--muted);max-width:760px}
.frei b{color:#fff;font-weight:700}

/* Stand und Urheber im Fuss: für Leserinnen ein Zeichen, dass die Seite gepflegt
   wird, und für Suchmaschinen wie KI-Assistenten ein Frische- und Herkunftssignal. */
.foot__stand{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}
.foot__stand time{color:var(--muted)}


/* ======================= UMBAU RUNDE 2, 30.08.2026 =======================
   Vier kleine Bausteine, die zu den Textaenderungen der Startseite gehoeren.
   Bewusst ans Ende gestellt, damit oben nichts umgeschrieben werden musste. */

/* --- 1 · Die Bindewoerter im Plakat-Band ---
   «mal», «aus», «macht»: sie machen aus vier losen Zahlen EINE Rechnung
   (17 Skills mal 21 Tage, aus 51 Buechern, macht 357 Tage). Klein und leise,
   damit die Zahlen gross bleiben. band.js misst sie beim Anpassen mit. */
.band__op{font-family:'Anton',Impact,sans-serif;font-size:.4em;line-height:1;
  color:var(--muted);letter-spacing:.02em;align-self:center}

/* --- 2 · Der Hinweis unter der 21-Tage-Leiste ---
   Drei getrennte Aussagen statt einer langen Zeile. Ohne Aufzaehlungspunkte:
   es sind drei Saetze, keine Liste von Eigenschaften. */
/* Linksbuendig in einem mittigen Block: so faengt jede der drei Aussagen an
   derselben Stelle an, und eine umgebrochene Zeile ist als Fortsetzung zu
   erkennen und nicht als vierte Aussage. */
.wqhint--liste{list-style:none;padding:0;text-align:left}
/* Zwei Klassen tief, weil «.tagsk-feld .wqhint» weiter oben schon eine Breite
   setzt: eine einzelne Klasse verliert dagegen und die Liste stand auf dem
   Handy ueber den Rand hinaus. */
.tagsk-feld .wqhint--liste{display:grid;gap:8px;width:max-content;max-width:100%;
  margin-inline:auto;text-align:left}
.wqhint--liste li{line-height:1.55}

/* --- 3 · Die 17 Skills als Kachel im Band (band.js, data-bz="phasen") ---
   Ein Punkt je Skill, eine Zeile je Phase: 5 · 4 · 3 · 2 · 3 = 17. Dasselbe
   Bild wie die Pyramide weiter unten, nur klein und ohne Bedienung. */
/* width:max-content, damit der Block als Ganzes in der Kachel steht statt
   linksbuendig an der Kante zu kleben. */
.bz__turm{--td:clamp(6px,1.3vw,11px);--tg:clamp(3px,.6vw,6px);
  display:grid;gap:clamp(3px,.9vw,7px);width:max-content;max-width:100%}
.bz__turm-r{display:grid;
  grid-template-columns:calc(var(--td) * 5 + var(--tg) * 4) minmax(0,auto);
  align-items:center;gap:clamp(7px,1.5vw,13px)}
.bz__turm-d{display:flex;gap:var(--tg)}
.bz__turm-d i{width:var(--td);height:var(--td);border-radius:50%;
  background:color-mix(in srgb,var(--f) 20%,#141b1c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.bz__turm-d i.an{background:var(--f);
  box-shadow:0 0 10px color-mix(in srgb,var(--f) 45%,transparent)}
.bz__turm-r b{font-size:clamp(9px,1.05vw,12px);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5c6a68;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ease)}
.bz__turm-r.an b{color:var(--faint)}

/* --- 4 · Die Leiste oben markiert den Abschnitt, in dem man gerade steht ---
   Gesetzt wird das in main.js (aria-current="true"), das Aussehen ist genau
   dasselbe wie fuer die aktuelle Seite. Zwei Regeln statt einer geaenderten,
   damit an der Navigation weiter oben nichts angefasst werden musste. */
.nav__links a[aria-current="true"]{color:#fff;font-weight:700}
.nav__links a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;
  height:2px;border-radius:99px;background:var(--primary);
  box-shadow:0 0 10px rgba(95,181,171,.6)}
/* Wer Bewegung abbestellt hat, bekommt den Wechsel hart statt weich. */
@media(prefers-reduced-motion:reduce){
  .nav__links a{transition:none}
  .bz__turm-d i,.bz__turm-r b{transition:none}
}

/* --- 5 · Der Aufmacher: zwei Haelften, je eine Zeile ---
   Der Slogan besteht aus zwei ungleich langen Haelften. In der schmalen Anton
   brach die laengere um, sobald die Spalte eng wurde, und unten hing ein
   einzelnes Wort: genau das sah schlecht aus. Gemessen braucht
   «Viel vorgenommen.» das 7,72-fache der Schriftgroesse an Breite. Ab 980 px
   steht rechts daneben das Geraet, die Spalte ist dann nur noch halb so breit.
   Die Groesse hier ist so gewaehlt, dass beide Haelften von 980 px aufwaerts in
   EINE Zeile passen; darunter ist die Spalte ohnehin breit genug.
   text-wrap:balance ist das Sicherheitsnetz fuer Zwischengroessen: bricht eine
   Haelfte doch einmal um, stehen zwei aehnlich lange Zeilen da statt einer
   langen und einer Silbe. */
.hero h1{text-wrap:balance}
@media(min-width:980px){
  .hero h1{font-size:clamp(44px,5.7vw,66px)}
}

/* --- 6 · Der Fahrplan: was fertig ist, in einer Zeile ---
   Der Zustand «fertig» bekommt keine eigenen Reihen mehr, sondern eine kurze
   Zeile unter den Meilensteinen. Im Handy daneben sieht man das ohnehin. */
.plan-fertig{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.plan-fertig b{color:var(--faint);font-weight:700}

/* --- 7 · Nachtrag 30.08., Abend ---
   Fuenf kleine Sachen nach Eluans zweitem Durchgang. Sein Massstab: weniger
   lesen muessen. */

/* Das Malzeichen ein Stueck groesser als die Woerter «aus» und «macht»: ein ×
   hat viel weniger Flaeche als drei Buchstaben und wirkt bei gleicher
   Schriftgroesse kleiner, als es ist. Angesprochen wird es ueber seinen Platz
   im Band, nicht ueber eine eigene Klasse: auf den englischen Seiten ersetzt
   die Uebersetzung das ganze Band als EINEN Block, eine hier neu vergebene
   Klasse kaeme dort nicht an. Der Platz ist in beiden Sprachen derselbe. */
.band > *:nth-child(3) .band__op{font-size:.48em}

/* Im 21-Tage-Kasten liegt jetzt nur noch die Leiste mit ihren drei
   Wochennamen. Der Erklaertext steht darunter im normalen Fliesstext, darum
   hier andere Abstaende und ein neuer Ort fuer die drei Aussagen. */
.tagsk-feld{padding:20px clamp(14px,4vw,28px) 22px}
.tagsk-feld .tagsk{margin:0}
.tagsk-sec .wqhint--liste{display:grid;gap:8px;width:max-content;max-width:100%;
  margin:20px auto 0;text-align:left}

/* --- 8 · Kopfbereich vom 07.09.2026 ---
   Diese Regeln stammen aus dem Kopfbereich vom 07.09.2026. Am 08.09.2026 ist
   der Kasten «Vom Vorsatz zur Gewohnheit» aus dem Kopfbereich in einen eigenen
   Abschnitt gewandert (siehe .vorsatz ganz unten in dieser Datei), und die vier
   Sätze in Ich-Form haben mit .viert einen eigenen Satz Regeln bekommen.
   Die .dafuer- und .probl-Regeln bleiben trotzdem stehen: die vier
   Vertiefungsseiten unter /warum bauen ihre Belegkästen darauf. */

/* Der Kasten selbst: ruhig, abgesetzt, mit einer türkisen Kante links, damit
   er sich vom Hero darunter unterscheidet, ohne laut zu sein. */
.dafuer{padding-top:clamp(28px,5vw,44px);padding-bottom:clamp(28px,5vw,44px)}
.dafuer__k{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--primary);border-radius:var(--r-lg);
  padding:clamp(22px,5vw,34px)}
.dafuer__h{font-size:clamp(28px,6.6vw,44px);line-height:1.08;margin-bottom:14px}
.dafuer__t{font-size:clamp(15.5px,2.2vw,18px);line-height:1.6;color:var(--faint);margin-top:12px}
.dafuer__t--an{color:#fff}
/* Die Belegzeile mit Lally 2010. Bewusst leiser und kleiner als die zwei
   Antwortzeilen darüber: sie stützt die Aussage, sie trägt sie nicht. */
.dafuer__beleg{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:18px}
.dafuer__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.dafuer__mehr{display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;color:var(--muted);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--line-strong);
  transition:color .18s,text-decoration-color .18s}
.dafuer__mehr:hover{color:#fff;text-decoration-color:var(--primary)}
.dafuer__mehr:active{opacity:.8}
/* Die leise Standzeile unter dem Knopf (Testphase, Prüfung bei Apple).
   Klein und grau: sie sagt den Stand, sie wirbt nicht. */
.dafuer__leise{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:16px}


/* Die vier Sätze mit ihrer Antwort (08.09.2026, loest .wortl ab).
   Je Block oben der Satz in Ich-Form, darunter die Antwort der App, unten der
   Verweis auf die eigene Seite. Die Bloecke stehen untereinander, nicht
   nebeneinander: auf 375 Pixeln liest sich das in einem Zug, und die Trennung
   bleibt auf jeder Breite deutlich. */
.probl{padding-top:clamp(30px,5vw,48px);padding-bottom:clamp(30px,5vw,48px)}
.probl__l{list-style:none;display:grid;gap:clamp(16px,3.2vw,24px);
  margin:18px 0 0;padding:0}
/* Kein eigenes transition hier: der Block trägt gleichzeitig .rise, und deren
   Übergang (0.7s) würde von einem späteren transition überschrieben. Die
   Bewegung beim Zeigen steckt darum allein im Verweis darunter. */
.probl__b{position:relative;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--primary);border-radius:var(--r-lg);
  padding:clamp(18px,4vw,26px)}
.probl__s{font-size:clamp(17px,3.2vw,21px);line-height:1.35;font-weight:700;
  color:#fff;text-wrap:pretty}
.probl__a{font-size:clamp(15px,2.2vw,17px);line-height:1.6;color:var(--faint);
  margin-top:10px}

/* Der ganze Block ist anklickbar, und trotzdem gibt es nur EIN Bedienelement:
   der Verweis unten ist der echte Link, sein ::before legt sich unsichtbar
   über die ganze Karte. Für die Tastatur ändert sich damit nichts (ein Tabstopp
   pro Block, sprechender Linktext), für die Maus wird die Karte zur Fläche.
   Der Fokusrahmen sitzt über :focus-within am Block, nicht am Textstück. */
.probl__mehr{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin-top:14px;font-size:14.5px;font-weight:700;color:var(--primary);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--primary-line);
  transition:color .18s,text-decoration-color .18s,gap .18s var(--ease)}
.probl__mehr::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.probl__mehr::after{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg)}
.probl__b:hover{border-color:var(--line-strong);border-left-color:var(--primary)}
.probl__b:hover .probl__mehr{color:#fff;text-decoration-color:#fff;gap:11px}
.probl__mehr:active{opacity:.85}
/* Der Fokusrahmen liegt um die ganze Karte, nicht nur um den Textschnipsel.
   Der Rahmen am Verweis selbst bleibt als Rückfallebene stehen, falls ein
   Browser :has() nicht kennt: sichtbar ist der Fokus dann trotzdem. */
.probl__mehr:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
.probl__b:has(.probl__mehr:focus-visible){outline:3px solid var(--primary);outline-offset:3px}
.probl__b:has(.probl__mehr:focus-visible) .probl__mehr{outline:none}
@media(prefers-reduced-motion:reduce){
  .probl__mehr{transition:none}
}

/* Hier standen die Regeln fuer das Aufklappen «Alle Funktionen» (.mehrf).
   Am 08.09.2026 ist es ersatzlos gestrichen (Eluan: wird nicht gebraucht),
   und damit sind auch seine Regeln weg. Sie galten nur fuer diese eine
   Stelle im Abschnitt «Aus der laufenden App». */


/* =========================================================================
   Zustimmungsband für die Messung

   Sitzt unten am Bildschirm, deckt den Kopfbereich also nie zu. Es entsteht
   erst im Browser (assets/js/analytics.js) und nur dann, wenn ein
   PostHog-Schlüssel eingetragen ist und noch keine Wahl getroffen wurde.
   ========================================================================= */
/* Seit dem 11.10.2026 (Handy-Umbau) schmal: eine Textzeile mit dem Verweis
   «Datenschutz», darunter zwei gleich grosse Knöpfe nebeneinander, gleich
   gestaltet. «Nur das Nötige» ist so leicht zu erreichen wie «Einverstanden».
   Bei 375 Pixeln 96 statt 194 Pixel hoch, Rand oben mitgezählt (dazu kommt auf Geräten mit
   Home-Balken deren Sicherheitsabstand).
   Am Handy steht der kurze Satz (.zust__kurz), ab 600 Pixeln der volle
   (.zust__lang). Beide nennen dieselben zwei Zwecke.
   Der Verweis «Datenschutz» ist eine Zeile hoch; seine Berührfläche wird
   über ::before auf 44 Pixel vergrössert. Sie reicht nur in den Innenabstand
   und die Lücke über den Knöpfen und überdeckt die Knöpfe nicht. */
.zust{position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;gap:10px;
  padding:10px var(--pad) calc(5px + env(safe-area-inset-bottom));
  background:rgba(22,27,28,.97);border-top:1px solid var(--line-strong);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 -14px 40px rgba(0,0,0,.4)}
.zust__t{margin:0;font-size:14px;line-height:26px;color:var(--faint)}
.zust__lang{display:none}
.zust__act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.zust__k{width:100%;min-width:0;padding:0 10px;font-size:14px;
  background:var(--surface2);color:#fff;border-color:var(--line-strong)}
.zust__k:hover{background:#2c3537;border-color:var(--primary)}
.zust__mehr{position:relative;color:#fff;text-decoration:underline;
  text-decoration-color:var(--primary);text-underline-offset:3px;transition:color .18s}
.zust__mehr::before{content:"";position:absolute;left:-8px;right:-8px;top:-14px;bottom:-14px}
.zust__mehr:hover{color:var(--primary)}
.zust__mehr:active{opacity:.8}
.zust__mehr:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
@media(min-width:600px){
  .zust{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 20px;
    padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom))}
  .zust__t{line-height:1.5;font-size:14px}
  .zust__lang{display:inline}
  .zust__kurz{display:none}
  .zust__act{grid-template-columns:repeat(2,minmax(150px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .zust{backdrop-filter:none}
}

/* -------------------------------------------------------------------------
   Ohne JavaScript (08.09.2026)

   Der Kasten steht in einem <noscript> im Kopfbereich der Startseite und wird
   deshalb nur gezeichnet, wenn der Browser keine Skripte ausfuehrt. Er ist
   bewusst leise gehalten: eine Zeile, ein Knopf, sonst nichts. Der Knopf ist
   ein gewoehnlicher .btn und bringt seine Zustaende (Hover, Fokus, Aktiv)
   von dort mit. */
.ohnejs{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  max-width:640px;margin:22px 0 0;padding:16px 18px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-lg)}
.ohnejs__t{flex:1 1 260px;margin:0;font-size:13.5px;line-height:1.55;color:var(--faint)}
.ohnejs__t a{color:#fff;text-decoration:underline;
  text-decoration-color:var(--line-strong);text-underline-offset:3px}
.ohnejs__t a:hover{text-decoration-color:var(--primary)}
.ohnejs__t a:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
@media(max-width:520px){
  .ohnejs{padding:14px 15px}
  .ohnejs .btn{width:100%}
}

/* =========================================================================
   9 · Umbau der Startseite vom 08.09.2026 (Eluans dritter Durchgang)

   (Die Regeln für .holen, .vorsatz und .viert sind am 11.10.2026 entfernt
   worden: die Startseite hat diese Teile nicht mehr. Abgelegt in
   stillgelegt/zusammenfuehrung-2026-10-11/site-css-entfernt.css.)

   Warum eigene Namen statt der alten .probl-Klassen: die vier
   Vertiefungsseiten unter /warum benutzen .probl__l, .probl__b und .probl__s
   weiterhin fuer ihre Belegkaesten. Wuerde ich diese Regeln auf zwei Spalten
   umstellen, kippten dort die Kaesten mit. Die alten Regeln bleiben also
   unveraendert stehen, der Umbau bekommt seinen eigenen Satz.
   ========================================================================= */


.pz{width:100%;height:100%;display:block}


/* ---- 9d · Die vier Zeichnungen ----
   Reines SVG aus dem vorhandenen Farbsatz, es wird keine Datei nachgeladen.
   Alle vier liegen auf EINEM Raster: Flaeche 160 x 100, Rand 8, Boden bei
   y = 84. Dadurch stimmen Grundlinie, Strichstaerken und Abstaende ueberein.
   Die Farben sind dieselben wie in der 21-Tage-Leiste weiter unten und im Band
   «17 Skills. Ein Jahr.» weiter oben. Der auffaellige Ton --pop kommt hier
   bewusst NICHT vor: er ist fuer drei Stellen der Seite reserviert. */
.pz{--w1:#5aa0e0;--w2:#a87fd6;--w3:#2fc95f}
/* .pz__grund ist am 08.09.2026 entfallen. Eluan hat die waagrechte Linie am
   unteren Rand angestrichen: sie lag unter allen vier Zeichnungen, trug
   nichts bei und sah wie ein vergessener Rest aus. Die Zeichnungen selbst
   sind unveraendert, sie stehen weiter auf demselben Raster (Boden y = 84). */
.pz__netz{stroke:rgba(255,255,255,.055);stroke-width:1}

/* 1 · Das Feld der Tage. Zweiter Anlauf am 08.09.2026. Der erste bestand aus
   blauen Rechtecken mit weissen Haken und einem gruenen Feld am Schluss;
   Eluan fand das zu grob und zu weit weg von den anderen drei Zeichnungen.
   Jetzt dieselbe Sprache wie beim Feld der Karte «Bremsen»: gleich grosse
   Felder in EINEM Raster, unterschieden nur durch den Farbton. Drei Toene,
   mehr nicht: erledigt, heute, offen. Dazu die Luecke als einziger Umriss. */
.pz__w1{fill:color-mix(in srgb,var(--w1) 62%,#0f1516)}
.pz__w2{fill:color-mix(in srgb,var(--w2) 62%,#0f1516)}
.pz__w3{fill:color-mix(in srgb,var(--w3) 62%,#0f1516)}
.pz__wq{stroke:rgba(255,255,255,.5);stroke-width:.75;filter:brightness(1.22)}
/* Ein erledigter Tag. Derselbe Ton wie die klaren Felder unter der Lupe. */
.pz__tag{fill:var(--primary);fill-opacity:.45}
/* Heute: derselbe Farbton, nur ganz. Das reicht als einzige Hervorhebung,
   und die Zeichnung bleibt innerhalb des Rasters (Boden y = 84). */
.pz__heute{fill:var(--primary)}
/* Der fehlende Tag: leer und gestrichelt, aber in derselben Form und Groesse
   wie die anderen. Er ist eine Luecke, kein Fehler, darum kein Warnton. */
.pz__luecke{fill:none;stroke:var(--line-strong);stroke-width:1.2;
  stroke-dasharray:3 3}

/* 2 · Was du getan hast, und dein Held. Neu am 08.09.2026: vorher standen
   hier Vermutung und Messung nebeneinander, also eine halbe Karte Problem.
   Jetzt stapeln sich links die erledigten Tage, rechts steht der Held, der in
   der App fuer dich steht, mit dem Rangzeichen darueber.
   3 · Dieselbe Linie mit einer Delle. Gleiche Strichstaerke, gleiche Punkte:
   die Delle soll als dieselbe Linie lesbar sein. Die leise Waagrechte zeigt
   die Hoehe von vor dem Rueckschlag. */
.pz__saeule{fill:var(--primary);fill-opacity:.32}
.pz__saeule--jetzt{fill-opacity:.72}
.pz__held{fill:var(--primary)}
.pz__rang{fill:none;stroke:var(--gold);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.pz__vorher{stroke:rgba(255,255,255,.1);stroke-width:1;stroke-dasharray:3 4}
.pz__s1{stop-color:var(--primary);stop-opacity:.26}
.pz__s2{stop-color:var(--primary);stop-opacity:0}
.pz__linie{fill:none;stroke:var(--primary);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* Das Stueck aus der Delle heraus: gestrichelt, also der Weg zurueck. */
.pz__weg{fill:none;stroke:var(--primary);stroke-width:2.4;stroke-linecap:round;
  stroke-opacity:.5;stroke-dasharray:3.5 4.5}
.pz__pkt{fill:var(--primary);fill-opacity:.55}
.pz__halo{fill:var(--primary);fill-opacity:.18}
.pz__jetzt{fill:var(--primary)}
.pz__tiefring{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-opacity:.7}
.pz__tief{fill:var(--gold)}

/* 4 · Das Feld mit der Lupe. Dieselben Felder wie die Tage im Journal: fast
   alle kaum zu sehen, im Ausschnitt stehen sie klar da.
   .pz__matt traegt seit dem 08.09.2026 auch die offenen Tage in Zeichnung 1.
   Genau so soll es sein: derselbe Ton fuer dasselbe, «noch nicht da». */
.pz__matt{fill:rgba(255,255,255,.09)}
.pz__lupe{fill:var(--primary-dim)}
.pz__klar{fill:var(--primary);fill-opacity:.6}
.pz__ring{fill:none;stroke:var(--primary);stroke-width:1.5;stroke-opacity:.55}

/* Am 08.09.2026 groesser gesetzt (Eluan): links stand seit der Kuerzung nur
   noch eine Zeile unter den fuenf Woertern, und die halbe Spalte wirkte
   dadurch leichter als die Karte rechts. Die Schrift waechst so weit, wie
   «ZUGESTIMMT.» als laengstes Wort in der linken Spalte Platz hat: bei 1280
   sind das rund 600 Pixel Spalte gegen rund 420 Pixel Wortbreite. */
/* Die eine Zeile, die vom Taktschlag uebrig bleibt. Sie traegt jetzt allein,
   was vorher drei Zeilen sagten, und ist darum kraeftiger gesetzt. */
.lead--schluss{font-weight:700;color:#fff;margin-top:14px}


/* =========================================================================
   10 · Gleiche Spalte fuer alle Abschnitte (08.09.2026)

   Eluan: die meisten Abschnitte sind 1100 Pixel breit, zwei waren es nicht.
   «21 Tage» und «Bevor du zahlst» hingen mit 640 Pixeln in der Mitte und
   sahen aus, als waeren sie verrutscht. Beide stehen jetzt auf .wrap, und
   ihr Inhalt verteilt sich auf zwei Spalten, statt in einer schmalen Saeule
   zu stapeln. Unter 900 Pixeln bleibt alles untereinander, in derselben
   Reihenfolge wie zuvor.
   ========================================================================= */

/* --- «21 Tage»: links der Text, rechts die Leiste mit den 21 Tagesfeldern --- */
/* min-width:0 an beiden Spalten: ohne das darf eine Rasterspalte nicht unter
   ihren breitesten Inhalt schrumpfen, und die Liste «Am Schluss die finale
   Quest …» (width:max-content) schob auf 375 Pixeln die ganze Seite auf. */
/* Seit dem 08.09.2026 steht die Ueberschrift nicht mehr in der linken Spalte,
   sondern als eigene Zeile ueber beiden (.tagduo__kopf). In der halben Spalte
   brach «21 Tage. Ein Thema / Skill.» mitten im Satz um; ueber der ganzen
   Breite steht sie auf einer Zeile. Darunter erst der Text, rechts daneben
   unveraendert die Leiste mit den 21 Tagesfeldern. */
.tagduo{display:grid;gap:clamp(24px,4.6vw,44px)}
.tagduo > *{min-width:0}
.tagduo__kopf{margin-bottom:calc(clamp(24px,4.6vw,44px) * -0.5)}
@media(min-width:900px){
  .tagduo{grid-template-columns:minmax(0,1fr) minmax(0,540px);
    grid-template-areas:'kopf kopf' 'text feld';
    align-items:center;column-gap:clamp(36px,5vw,72px);
    row-gap:clamp(14px,2.2vw,24px)}
  .tagduo__kopf{grid-area:kopf;margin-bottom:0}
  .tagduo__l{grid-area:text}
  .tagduo__r{grid-area:feld}
  /* .tagsk-sec stellt den ganzen Abschnitt mittig; nebeneinander liest sich
     linksbuendig besser, darum hier zurueckgenommen. */
  .tagsk-sec .tagduo{text-align:left}
  .tagsk-sec .tagduo .lead{margin-inline:0;max-width:30ch}
  .tagsk-sec .tagduo .wqhint--liste{margin-inline:0;justify-content:start}
  .tagduo__r .tagsk-feld{margin-top:0}
}


/* =========================================================================
   10 · «Die Geschichte» auf dieselbe Breite wie alle anderen Abschnitte
        (08.09.2026)

   Die Seite /design-entwicklung setzte ihre Abschnitte auf .gs-schmal, also
   auf 760 Pixel aussen und 720 innen, waehrend jeder Abschnitt der Startseite
   und der Vertiefungsseiten 1100 Pixel innen misst. Nebeneinander sah die
   Geschichte dadurch aus wie eine fremde Seite.

   Warum die Regel hier steht und nicht in der Seite selbst: das Stilblatt der
   Seite steht NACH site.css, eine gleich starke Regel wuerde also wieder
   ueberschrieben. Zwei Klassen sind staerker als eine, damit gewinnt diese
   hier, egal in welcher Reihenfolge die Dateien geladen werden.

   Die Zeilen bleiben trotzdem lesbar: der Fliesstext haengt an .lead und
   .gs-hinweis und behaelt seine 64 Zeichen. Nur was ohnehin als Karte,
   Liste oder Ueberschrift gebaut ist, nimmt die ganze Breite. */
.wrap.gs-schmal{max-width:var(--wrap)}
/* Der Vorspann oben und das Zitat sind reiner Fliesstext ohne eigene
   Begrenzung. Ohne diese zwei Zeilen liefen sie ueber die volle Breite. */
.gs-kopf .lead{max-width:64ch}
.gs-zitat{max-width:64ch}

/* =========================================================================
   11 · DIE STARTSEITE AUF DEM TELEFON (10.09.2026)

   Eluan hat die Seite auf einem Android-Telefon mit rund 412 Punkten Breite
   angeschaut und fuenf Dinge gemeldet: die Navigation laeuft ueber den Rand,
   der Kopfbereich klebt zusammen, «Dafuer ist die App» sieht aus wie
   Fliesstext statt wie Karten, die zwei Store-Knoepfe wirken wie eine
   Textzeile, und der Notizzettel zeigt nur dunkle Vierecke.

   Geprueft wurde zuerst, ob das Stilblatt ueberhaupt ankommt: es hat null
   Parse-Fehler, keine verschachtelten Regeln, und alle drei Dateien werden
   auf der Live-Seite geladen (747 + 216 + 29 Regeln). Ein Syntaxfehler, ab
   dem der Browser den Rest verwirft, liegt also NICHT vor. Was fehlt, ist
   Kontrast: Karten und Knoepfe stehen in einem Ton, der sich vom Grund der
   Seite kaum abhebt, und auf einem Telefon im Tageslicht verschwindet dieser
   Unterschied ganz. Genau das liest sich dann wie «keine Gestaltung».

   Die Regeln hier stehen am Ende der Datei, damit sie ohne Kunstgriffe
   gewinnen, und fast alle nur unter 900 Punkten, damit am grossen Schirm
   nichts anders aussieht als vorher.
   ========================================================================= */

/* (11a · Navigation umbrechen: am 11.10.2026 entfernt, die Kopfleiste ist
   jetzt eine Zeile mit Menü, siehe Abschnitt KOPFLEISTE oben.) */

/* ---------- 11b · Die vier Store-Knoepfe sehen aus wie Knoepfe ----------
   Zwei stehen im Kopfbereich (.holen__b), zwei im Schlussabschnitt
   (.store--soon). Beide waren durchsichtig mit einer Kante aus 16 Prozent
   Weiss. Auf dem Telefon blieb davon eine Textzeile uebrig. Sie bekommen
   jetzt eine eigene Flaeche, sichtbar heller als der Grund, und bleiben
   trotzdem leiser als die zwei echten Handlungsknoepfe («App holen» in
   Tuerkis, «Eintragen» in Orange). Hoehe unveraendert 62 und 60 Punkte,
   also klar ueber den geforderten 44. */
.store--soon{background:var(--surface);border-color:var(--line-strong)}
.store--soon:hover{background:var(--surface2);border-color:var(--primary)}
.store--soon:active{background:var(--surface)}
/* Die kleine Zeile «Bald fuer» stand in var(--muted) auf durchsichtigem
   Grund. Auf der neuen Flaeche darf sie etwas heller sein. */
.store--soon span i{color:var(--faint)}


/* ---------- 11d · Lesbare Graustufen ----------
   Zwei Stellen standen unter dem Verhaeltnis 3 zu 1, das grosse Schrift
   mindestens braucht: die zweite Zeile der Hauptzeile («Wenig veraendert.»)
   mit 2,7 zu 1 und die vier durchgestrichenen Woerter («Gehoert.
   Verstanden. …») mit 1,9 zu 1. Beide bleiben leise, sind aber jetzt zu
   lesen. Gemessen gegen var(--bg): 3,3 und 3,4 zu 1. */
.hero h1 .dim{color:#5f6d6b}
.beat{color:#5c6a6b}

/* ---------- 11e · Zweispaltiges untereinander ----------
   Die vier Zusagen ueber den Preisen standen zu zweit nebeneinander und
   reichten bis an den Rand. Untereinander liest sich die Liste in einem Zug. */
@media(max-width:620px){
  .vertr{flex-direction:column;gap:9px}
}

/* ---------- 11f · Das Zahlenband: Umlaute nicht abschneiden ----------
   Die Zeilen des Bandes standen auf Zeilenhoehe 0,9. Bei Anton in
   Grossbuchstaben liegen die zwei Punkte des Ue ueber der Zeile, sie wurden
   dadurch weggeschnitten: aus «BUECHERN» wurde sichtbar «BUCHERN». Eine
   Zeilenhoehe von 1,0 laesst sie stehen und kostet drei Punkte Hoehe. */
@media(max-width:900px){
  .band__w{line-height:1;padding-top:4px}
}

/* ---------- 11g · Ruhigere Abstaende ----------
   Zwischen den Abschnitten standen bis zu 150 Punkte Leere am Stueck, auf
   einem Telefon fast ein Fuenftel des Schirms. Die Abstaende bleiben
   deutlich, werden aber kleiner, damit zwei Dinge gleichzeitig ins Bild
   passen und der Zusammenhang sichtbar bleibt. */
@media(max-width:899px){
  section{padding:clamp(38px,7vw,64px) 0}
  .hero{padding-top:clamp(24px,4vw,40px)}
  /* Die Hauptzeile stand auf Zeilenhoehe 0,95 und klebte dadurch zusammen. */
  .hero h1{line-height:1.02;margin-bottom:18px}
  .beats{gap:4px}
}


/* ---------- 11i · Untergrenzen der fliessenden Schriftgroessen ----------
   Drei Stellen rechnen die Schriftgroesse aus der Fensterbreite. Auf einem
   Telefon greift dort immer der kleinste erlaubte Wert, und der lag bei 9
   beziehungsweise 10 Punkten. Gemessen bei 360, 390 und 412 Punkten Breite
   steht jetzt nirgends im Seitentext weniger als 11.
   Ausgenommen bleibt das abgebildete Telefon (.a-nav): das ist ein Bild der
   App, keine Schrift der Seite, und seine Leiste wuerde bei groesserer
   Schrift nicht mehr wie eine Leiste aussehen. */
.bz__turm-r b{font-size:clamp(11px,1.05vw,12px)}

/* ---------- 11j · Kleinschrift auf dem Telefon ----------
   Die Seite arbeitet an vielen Stellen mit kurzen Grossbuchstaben-Zeilen
   («ERKUNDEN · TRAINING · FINALE», «WOCHE 1», «+ 3 DAZU»). Am Schreibtisch
   lesen sie sich als leise Beschriftung, auf einem Telefon standen sie mit
   9 bis 10,5 Punkten und weitem Buchstabenabstand an der Grenze des
   Lesbaren. Unter 900 Punkten steht keine davon mehr unter 11 Punkten.
   Der Buchstabenabstand wird dabei etwas enger, damit die Zeilen trotz der
   groesseren Schrift nicht breiter werden als vorher.
   Nicht angefasst: die Leiste im abgebildeten Telefon. Sie gehoert zum Bild
   der App und wuerde sonst aus dem Rahmen wachsen. */
@media(max-width:899px){
  .bz__unten span,.bz__wochen,.karu__l span,.idea__vote span{font-size:11px;letter-spacing:.12em}
  .leiter__s,.pyra__t em{font-size:11px;letter-spacing:.05em}
  .daylab,.chip,.tf__n em{font-size:11px;letter-spacing:.11em}
  .store span i,.plan__badge,.qmeta__tag,.test__k,.wl__tag,.tf__k b{font-size:11px}
}

/* ==========================================================================
   12 · UMBAU VOM 25.09.2026

   Eluan: die Startseite soll sich um Problem und Lösung drehen, nicht um
   Funktionen. Vier Abschnitte (#rechnung, #skills, #tage, #bilder) sind darum
   auf die neue Seite /funktionen gezogen. Hier steht nur, was dabei neu
   dazugekommen ist: die eine Brücke auf der Startseite und der Kopf und der
   Abschluss der neuen Seite. Keine neue Farbe, keine neue Schrift, keine neuen
   Radien: alles kommt aus dem :root-Block ganz oben.

   Bewegt wird ausschliesslich über transform und opacity, und zwar über die
   vorhandene Klasse .rise. Darum braucht dieser Abschnitt keinen eigenen
   Eintrag unter prefers-reduced-motion: .rise ist dort schon abgefangen.
   ========================================================================== */


/* ---------- 12b · Der Kopf der Seite /funktionen ----------
   Ein Hauptelement: die grosse Zeile. Alles andere leise. */
.seitenkopf{padding-bottom:clamp(30px,5vw,52px)}
.seitenkopf__h{font-size:clamp(38px,9vw,74px);margin-top:2px}

/* Die drei Marken darunter. Sie sind ein Inhaltsverzeichnis, kein Menü:
   leise gesetzt, gleich gross, keine Farbe. 44 Pixel hoch, damit sie auf dem
   Telefon sicher zu treffen sind. Text var(--muted) #9aa8a5 auf var(--bg)
   #0e1213 ergibt 7,7 zu 1, im Zeigen #fff mit 17,9 zu 1. */
.sprung{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sprung a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:99px;
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600;
  transition:color .18s,border-color .18s,background .18s}
.sprung a:hover{color:#fff;border-color:var(--line-strong);background:rgba(255,255,255,.05)}
.sprung a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sprung a{transition:none}}

/* ---------- 12c · Der Abschluss der Seite /funktionen ----------
   Ein lauter Knopf, ein leiser daneben. Darunter stand am 25.09.2026 für ein
   paar Stunden eine stille Zeile zum Preis; seit demselben Tag sagt die Website
   nichts mehr über Geld, und die Zeile ist weg. Die Regeln .zurueck__preis
   bleiben stehen, falls die Stelle je wieder gebraucht wird; sie passen im
   Moment auf nichts. */
.zurueck__tat{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.zurueck__preis{margin-top:18px;font-size:13.5px}
.zurueck__preis a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;
  color:var(--muted);text-decoration:underline;text-underline-offset:4px;
  transition:color .18s}
.zurueck__preis a:hover{color:#fff}
.zurueck__preis a:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.zurueck__preis a{transition:none}}

/* ---------- 12d · Der Taktschlag hat nur noch drei Wörter ----------
   Die zwei Wörter «Zugestimmt» und «Vergessen» sind am 25.09.2026 aus index.html
   verschwunden, und mit ihnen der Durchstrich. Die Regeln .beat::after und .beat.shown.strike
   weiter oben stehen unverändert, sie finden nur kein Element mehr; wer den
   Durchstrich zurückholen will, setzt die Klasse strike wieder ins HTML.

   ‼️ UND DER FEHLER, DEN ELUAN GESEHEN HAT:
   «Getan.» war gar nicht orange. Der Grund steht in Abschnitt 11d: die Zeile
   .beat{color:#5c6a6b} hob die vier leisen Wörter auf ein lesbares Grau, steht
   aber weiter unten in dieser Datei als .beat--last{color:var(--pop)} in
   Abschnitt «Taktschlag». Gleiche Gewichtung, also gewinnt die spätere Zeile,
   und das Wort stand grau da. Geblieben war nur der orange Schein des
   text-shadow, darum fiel es lange nicht auf.
   Diese Zeile hier stellt die Farbe wieder her. Sie steht bewusst ganz am Ende
   der Datei, damit keine spätere .beat-Regel sie wieder aussticht.
   Gemessen: #ff8a3d auf var(--bg) #0e1213 ergibt 8,1 zu 1. Die zwei leisen
   Wörter behalten #5c6a6b mit 3,4 zu 1, also über den 3 zu 1, die grosse
   Schrift braucht. */
.beat--last{color:var(--pop)}

/* ---------- 12e · Der Ehrlichkeits-Abschnitt hat keine Kreuze mehr ----------
   Am 25.09.2026 (Eluan: «das klingt zu demotivierend»). Die Liste .nope hiess
   «Was es nicht kann» und trug drei rote Kreuze. Zwei der drei Zeilen sind
   inzwischen keine Absage mehr, sondern eine Einordnung; ein Kreuz davor wäre
   falsch und liest sich wie ein Nein auf einen Satz, der Ja sagt.

   An ihrer Stelle steht ein ruhiger waagrechter Strich in der Hausfarbe. Er
   gliedert die Liste, ohne zu werten. Die Zeichen im HTML sind darum leer, der
   Strich ist reine Gestaltung und trägt aria-hidden wie zuvor.
   Gemessen: var(--primary) #5fb5ab auf var(--bg) #0e1213 ergibt 7,7 zu 1, also
   klar über den 3 zu 1, die eine Umrandung oder ein grafisches Zeichen braucht.
   Die Regel .nope .x oben in Abschnitt 5 bleibt stehen, sie wird hier nur
   überschrieben: wer die Kreuze zurückholen will, löscht diesen Block. */
.nope .x{flex:none;width:13px;height:2px;margin-top:11px;border-radius:2px;
  background:var(--primary);color:transparent;font-size:0;line-height:0}


/* ---------- 13a · Stelle 1: in der Lücke zwischen «Verstanden.» und «Getan.» ----------
   Die drei Wörter und die Figur stehen in einer Zeile, senkrecht mittig. Damit
   sitzt sie auf der Höhe von «Verstanden.», also genau in der Lücke, von der
   der Abschnitt handelt. «Getan.» bleibt unbegleitet.
   flex-wrap ist die Sicherung für schmale Geräte: passt die Figur nicht mehr
   neben die Wörter, rutscht sie darunter, statt die Seite breiter zu machen. */
.beatsreihe{display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(10px,2.5vw,22px)}


/* 3 · Schlussabschnitt: rechts oben neben «Ich sag dir, wann es losgeht.»,
   in der freien Fläche über dem Eintragefeld. Der Knopf «Eintragen» sitzt
   darunter und bleibt unberührt. Die Zeile darf umbrechen: passt die Figur auf
   einem schmalen Gerät nicht mehr daneben, rutscht sie darunter, statt die
   Überschrift zu quetschen. */
.wl__kopf{display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:12px}


/* =========================================================================
   14 · Zusammenführung des Handy-Umbaus (11.10.2026)

   Was die Seiten-Agenten je in ihr eigenes Stilblatt geschrieben hatten und
   allen Seiten gehört, steht jetzt einmal hier:
   · der Zurück-Knopf oben links (.seite-zurueck, auf der Geschichte
     .gs-zurueck, derselbe Knopf), Verhalten in assets/js/unterseite.js und
     assets/js/geschichte.js
   · der Schluss «App holen und Tag 0» (.laden-tat) mit den zwei Laden-Karten
     untereinander (.laden.stores)
   · Fliesstext mindestens 16 Pixel
   Die Fusszeile (Farbe --muted, Berührflächen) steht oben bei ENDE & FUSS.
   ========================================================================= */

/* ---- 14a · Zurück-Knopf oben links ----
   Pille mit Rand, Pfeil in var(--primary), 44 Pixel hoch. So bleibt er ab 768
   Pixeln; am Handy schwebt er seit Runde 4 (13.10.2026) unten rechts (18b). */
.seite-zurueck,.gs-zurueck{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  margin:0 0 22px -4px;padding:0 16px 0 10px;border-radius:99px;
  border:1px solid var(--line-strong);background:var(--card);
  color:var(--text);font-size:16px;font-weight:600;text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .14s var(--ease)}
.seite-zurueck svg,.gs-zurueck svg{width:18px;height:18px;flex:none;color:var(--primary)}
.seite-zurueck:hover,.gs-zurueck:hover{border-color:var(--primary-line);background:var(--primary-dim)}
.seite-zurueck:active,.gs-zurueck:active{transform:scale(.985)}
@media(prefers-reduced-motion:reduce){.seite-zurueck,.gs-zurueck{transition:none}}

/* ---- 14b · Der Schluss: App holen und Tag 0 ----
   Am Handy ein Knopf «App holen» (assets/js/unterseite.js zeigt ihn und
   versteckt die Karten), am Rechner die zwei Karten, App Store oben, Google
   Play darunter, auf jeder Breite untereinander. Darunter leiser der Weg zum
   Probe-Chat. Das hidden-Attribut braucht eine eigene Regel, weil .btn und
   .stores sonst ihre Anzeige behalten. */
.laden.stores{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
.laden-tat{display:grid;gap:12px;max-width:340px;margin:26px auto 0}
.laden-tat .stores{margin-top:0}
.laden-tat__haupt{width:100%;min-height:56px;font-size:17px}
.laden-tat__haupt[hidden],.laden[hidden]{display:none}
.laden-tat__tag0{width:100%}
.laden-tat__tag0 svg{flex:none;color:var(--primary)}

/* ---- 14c · Fliesstext mindestens 16 Pixel ----
   Was als Absatz gelesen wird, steht nicht unter 16 Pixeln, auch wenn es
   als Neben- oder Kleingedrucktes gemeint ist (.small, .tiny). Kurze
   Etiketten, Pillen und Beschriftungen in Grossbuchstaben bleiben kleiner. */
main p.small,main li.small,main .tiny{font-size:16px}

/* ---- 14d · Ein Verweis allein in seiner Zeile: 44 Pixel hoch ----
   Für Verweise, die nicht mitten im Satz stehen (etwa die Mailadresse im
   Impressum). Links mitten im Fliesstext bleiben, wie sie sind. */
.ziel44{display:inline-flex;align-items:center;min-height:44px}

/* ---- 14e · Buch-Karussell: die zwei seitlichen Bücher ohne Nummer ----
   Sie stehen gedreht, gedimmt (opacity .55, brightness .7) und dienen nur der
   Tiefe. Ihre Nummer lag damit bei 2,7 zu 1 und verfehlte AA auch für grosse
   Schrift. Jetzt zeigt nur das vordere Buch seine Nummer, die anderen
   blenden sie aus; beim Drehen kommt sie mit (nur opacity). */
.buch em{transition:opacity .4s ease}
.buch[data-p="0"] em,.buch[data-p="2"] em{opacity:0}
@media(prefers-reduced-motion:reduce){.buch em{transition:none}}

/* =========================================================================
   15 · Nachbesserung vom 11.10.2026 (Prüfung des Handy-Umbaus)
   ========================================================================= */

/* ---- 15a · Laden-Knöpfe überall schwarz ----
   Startseite und Warum-Seiten zeigen die Läden als schwarzes Abzeichen mit
   heller Kante (seite-start.css, .st-laden). Die Karten im Schluss der
   Unterseiten (.laden) und auf der Geschichte (.gs-laeden) waren weiss.
   Jetzt sehen sie überall gleich aus. */
.laden .store,.gs-laeden .store{min-height:58px;padding:8px 18px;background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.34)}
.laden .store span i,.gs-laeden .store span i{font-size:14px;font-weight:500;letter-spacing:0;
  text-transform:none;opacity:1;color:#c9d3d1;margin:0 0 1px}
.laden .store span b,.gs-laeden .store span b{font-size:19px}
/* Im Schluss «App holen und Tag 0» so breit wie der Knopf darunter. Mit
   margin-inline:auto (14b) schrumpfte der Block im Raster auf seinen Inhalt,
   die zwei Karten standen schmaler als «Probier Tag 0 aus». */
.laden-tat .laden.stores{width:100%}
.laden .store:hover,.gs-laeden .store:hover{border-color:var(--primary);background:#0b0f10;box-shadow:none}
.laden .store:focus-visible,.gs-laeden .store:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* ---- 15b · Laden-Block, der das Gerät erkennt ----
   Dieselbe Regel wie in seite-start.css und seite-warum.css, hier für alle
   Seiten: in einem Block mit data-laden-geraet steht auf dem iPhone nur der
   App Store, auf Android nur Google Play (assets/js/laden-geraet.js setzt
   data-geraet am html-Element). Ohne Skript, am Rechner und am iPad stehen
   beide, App Store oben. */
html[data-geraet="apple"] [data-laden-geraet] .store[href*="play.google.com"],
html[data-geraet="android"] [data-laden-geraet] .store[href*="apps.apple.com"]{display:none}

/* ---- 15c · Der Kernsatz eines Blogtextes ----
   Die Blogtexte liefen am Handy über fünf Bildschirme Fliesstext ohne einen
   Punkt, an dem das Auge hängen bleibt. Jeder Text hat einen Satz, der seine
   Aussage trägt («Rahmen statt Versprechen», «bringt den Inhalt mit»). Dieser
   eine Absatz steht jetzt auf einer Fläche mit einer Kante in var(--primary),
   in Weiss und etwas grösser. Ein Absatz je Text, nicht mehr. */
.prose p.kern{margin:26px 0;padding:16px 18px 16px 20px;border-left:3px solid var(--primary);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--card);
  color:var(--text);font-size:18px;line-height:1.55;font-weight:500}

/* ---- 15d · Zurück-Knopf auch im Blog (12.10.2026) ----
   Jede Unterseite hat oben links den Zurück-Knopf (14a), nur der Blog hatte
   keinen. Im Lesetext gilt «.prose a» (türkis, unterstrichen), darum hier die
   stärkere Regel, damit er genau aussieht wie überall sonst. Der Kopf rückt
   nach oben wie auf /funktionen und /ideen, sonst stünde über dem Knopf ein
   leerer Streifen. */
.prose a.seite-zurueck{color:var(--text);text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .14s var(--ease)}
section.artikel{padding-top:18px}
@media (min-width:900px){section.artikel{padding-top:28px}}

/* =========================================================================
   16 · V2 HANDY (12.10.2026): Kopfleiste als schwebende Pille, Laden-Knopf
   nach Gerät, Unterseiten ohne Tag 0

   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 1 bis 3.
   Die wichtigste Grenze: am Rechner und am Tablet (ab 768 Pixeln) ändert sich
   kein Pixel. Darum gilt hier alles nur unter 768 Pixeln, und was es nur am
   Handy gibt, ist darüber ausgeblendet. Beweis: Ganze-Seiten-Bilder bei 1280,
   900 und 768 Pixeln vor und nach V2 sind pixelgleich
   (docs/umbau-handy/v2/bericht-kopfleiste-unterseiten.html).
   Bewegung nur über transform und opacity, ohne bei reduzierter Bewegung.
   ========================================================================= */

/* ---- 16a · Nur am Handy, nur am Rechner ----
   .nur-handy steht ab 768 Pixeln nie da, .nur-rechner unter 768 Pixeln nie. */
@media(min-width:768px){.nur-handy{display:none!important}}
@media(max-width:767px){.nur-rechner{display:none!important}}

/* ---- 16b · Baustein: der Laden-Knopf nach Gerät ----
   <div class="laden-weiche">
     <a class="… apple" href="https://apps.apple.com/…" data-beat="store_ios_<stelle>">Jetzt laden im App Store</a>
     <a class="… google" href="https://play.google.com/…" data-beat="store_android_<stelle>">Jetzt laden im Play Store</a>
   </div>
   · Auf dem iPhone (html[data-geraet="apple"], gesetzt von
     assets/js/laden-geraet.js) steht nur der Apple-Knopf, auf Android nur der
     Google-Knopf. Am iPad, bei unbekanntem Gerät und ohne Skript stehen beide
     nebeneinander. Reicht die Breite nicht (unter rund 330 Pixeln), stehen sie
     untereinander, App Store oben. So bleibt es ab 768 Pixeln. Am Handy
     gelten seit Runde 4 (13.10.2026) zwei feste Anordnungen, Grundform und
     .laden-weiche--reihe, siehe 18a.
   · Aussehen wie die schwarzen Laden-Abzeichen der Seite (.laden .store).
     Steht im Knopf ein <svg> mit dem Zeichen und <span><i>…</i><b>…</b></span>,
     ist es das zweizeilige Abzeichen. Steht nur Text darin, kommt das Zeichen
     aus ::before und der Text bricht von selbst auf zwei Zeilen um.
   · Gezählt wird über data-beat: analytics.js macht daraus store_klick und
     StoreKlickIOS bzw. StoreKlickAndroid, «stelle» ist das Wort nach dem
     letzten Unterstrich.
   · Die Klassen gewinnen gegen .store, .btn und Seitenklassen (0,1,1). */
.laden-weiche{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.laden-weiche > a{flex:1 1 140px;min-width:0;max-width:280px;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;margin:0;padding:8px 12px;border-radius:var(--r-md);background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.34);box-shadow:none;text-decoration:none;text-align:left;
  font-size:14px;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;
  transition:transform .14s var(--ease)}
.laden-weiche > a svg{flex:none}
.laden-weiche > a span{display:block;min-width:0;text-align:left;line-height:1.2}
.laden-weiche > a span i{display:block;margin:0 0 1px;font-style:normal;font-size:12px;font-weight:500;
  letter-spacing:0;text-transform:none;opacity:1;color:#c9d3d1;white-space:nowrap}
.laden-weiche > a span b{display:block;font-size:17px;font-weight:800;white-space:nowrap}
.laden-weiche > a:hover{border-color:var(--primary);background:#0b0f10;color:#fff;box-shadow:none;transform:translateY(-1px)}
.laden-weiche > a:active{transform:scale(.985)}
.laden-weiche > a:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:var(--r-md)}
/* Nur Text im Knopf: das Zeichen kommt aus ::before (Daten-Adresse, keine Anfrage) */
.laden-weiche > a:not(:has(svg))::before{content:"";flex:none;width:20px;height:24px;
  background-position:center;background-repeat:no-repeat;background-size:contain}
.laden-weiche > .apple:not(:has(svg))::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E")}
.laden-weiche > .google:not(:has(svg))::before{width:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 59v394l208-197z' fill='%232fc95f'/%3E%3Cpath d='M48 59l268 128-60 69z' fill='%235aa0e0'/%3E%3Cpath d='M48 453l268-128-60-69z' fill='%23e0b94a'/%3E%3Cpath d='M316 187l88 42c22 11 22 43 0 54l-88 42-60-69z' fill='%23de5650'/%3E%3C/svg%3E")}
html[data-geraet="apple"] .laden-weiche > .google,
html[data-geraet="android"] .laden-weiche > .apple{display:none}
@media(prefers-reduced-motion:reduce){
  .laden-weiche > a{transition:none}
  .laden-weiche > a:hover,.laden-weiche > a:active{transform:none}
}

/* ---- 16c · Kopfleiste als schwebende Pille (nur unter 768 Pixeln) ----
   Vorbild Gentler Streak: eine abgerundete Pille, die mit Abstand zum Rand
   über der Seite schwebt. Links der Menü-Knopf mit zwei Strichen, die beim
   Öffnen zum X werden, daneben «Go & Grow». Rechts «DE / EN» und ein
   Schalter wie im Design-System Kiesel (Schalter: Spur aus text-zart, an in
   akzent-flaeche, weisser Griff, 250 ms, kurve-standard), der genau in die
   Rundung der Pille passt: Pille 56 hoch mit Radius 28, Schalter 6 Pixel vom
   Rand, also 44 hoch mit Radius 22, beide Bögen haben denselben Mittelpunkt.
   Der Schalter ist ein Verweis auf dieselbe Seite in der anderen Sprache
   (die Adressen stehen schon in der Sprachwahl, der Server biegt sie nicht
   um, siehe src/i18n/index.js). Griff links: Deutsch, rechts: English.

   Gilt nur für <nav class="nav nav--pille">. Seit dem 12.10.2026 tragen alle
   Seiten mit Kopfleiste diese Klasse, auch die Startseite (eingesetzt mit
   docs/umbau-handy/zusammenfuehrung/kopfleiste-einsetzen.mjs --mit-start).

   Das Menü öffnet ein Blatt unter der Pille: die fünf Seiten und darunter
   der Laden-Knopf nach Gerät (16b). Verhalten in assets/js/kopfleiste.js. */
.kopf__knopf{display:none}
.lang[data-kopf-sprache]{display:none}
.nav .laden-weiche{display:none}

@media(max-width:767px){
  .nav.nav--pille{padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));
    background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
  .nav--pille .nav__in{position:relative;height:56px;max-width:none;padding:0 5px;gap:2px;pointer-events:auto;
    border:1px solid rgba(255,255,255,.12);border-radius:28px;background:rgba(22,27,28,.88);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:0 2px 8px rgba(0,1,1,.4),0 16px 40px rgba(0,1,1,.6)}

  /* Links: Menü-Knopf, zwei Striche, offen ein X (nur transform) */
  .nav--pille .kopf__knopf{display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;margin:0;padding:0;border:0;border-radius:22px;
    background:transparent;color:#fff;cursor:pointer}
  .nav--pille .kopf__knopf svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .nav--pille .kopf__knopf path{transform-box:view-box;transform-origin:12px 12px;
    transition:transform .25s cubic-bezier(.25,.1,.25,1)}
  .nav--pille.nav--offen .kopf__knopf path:nth-child(1){transform:rotate(45deg) translateY(2.5px)}
  .nav--pille.nav--offen .kopf__knopf path:nth-child(2){transform:rotate(-45deg) translateY(-2.5px)}
  .nav--pille .kopf__knopf:active{background:rgba(255,255,255,.12)}
  .nav--pille.nav--offen .kopf__knopf{background:rgba(255,255,255,.09)}
  .nav--pille .kopf__knopf:focus-visible{outline:3px solid var(--primary);outline-offset:0;border-radius:22px}

  /* «Go & Grow» gleich daneben, ohne Zeichen, auch auf sehr schmalen Schirmen */
  .nav--pille .brand{margin-right:auto;padding:0 6px 0 4px;gap:0}
  .nav--pille .brand img{display:none}
  .nav--pille .brand span{position:static;width:auto;height:auto;overflow:visible;clip:auto;
    font-size:17px;white-space:nowrap}

  /* Was es in der Pille nicht gibt: «App holen» und der alte Menü-Knopf */
  .nav--pille .nav__holen,.nav--pille .nav__knopf{display:none}

  /* Rechts: «DE / EN» und der Schalter.
     Die Sprache, in der die Seite steht, ist der Text (weiss, das andere
     Kürzel leise davor oder dahinter). Der Verweis auf die andere Sprache
     liegt unsichtbar über dem ganzen Feld, also über Text und Schalter: ein
     Ziel, 44 Pixel hoch und rund 150 breit. Sein Text bleibt für
     Bildschirmleser da. Den Fokusrahmen zeichnet er um das ganze Feld. */
  .nav--pille .lang[data-kopf-sprache]{display:flex;align-items:center;position:relative;flex:none;
    height:44px;margin:0;padding:0 82px 0 8px;gap:0;border:0;background:none}
  .nav--pille .lang[data-kopf-sprache] a{display:inline-flex;align-items:center;position:static;
    min-width:44px;min-height:44px;height:44px;padding:0;border:0;border-radius:0;background:none;
    font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1;color:#fff;white-space:nowrap}
  .nav--pille .lang[data-kopf-sprache] a[hreflang="de"][aria-current]::after{content:"\0000a0/\0000a0EN";content:"\0000a0/\0000a0EN" / "";color:var(--muted)}
  .nav--pille .lang[data-kopf-sprache] a[hreflang="en"][aria-current]::before{content:"DE\0000a0/\0000a0";content:"DE\0000a0/\0000a0" / "";color:var(--muted)}
  .nav--pille .lang[data-kopf-sprache] a:not([aria-current]){display:block;position:absolute;inset:0;z-index:1;
    min-width:0;height:auto;border-radius:22px;color:var(--muted);
    text-indent:100%;white-space:nowrap;overflow:hidden}
  .nav--pille .lang[data-kopf-sprache] a:not([aria-current]):focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:24px}
  .nav--pille .lang[data-kopf-sprache] a[aria-current]:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
  /* Der Schalter: Spur und Griff, gezeichnet vom Feld selbst */
  .nav--pille .lang[data-kopf-sprache]::before{content:"";position:absolute;top:0;right:0;width:72px;height:44px;
    border-radius:22px;background:#8e9795;pointer-events:none}
  .nav--pille .lang[data-kopf-sprache]::after{content:"";position:absolute;top:3px;right:31px;width:38px;height:38px;
    border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,1,1,.4),0 2px 6px rgba(0,1,1,.3);pointer-events:none;
    transition:transform .25s cubic-bezier(.25,.1,.25,1)}
  html[lang|="en"] .nav--pille .lang[data-kopf-sprache]::before{background:var(--primary)}
  html[lang|="en"] .nav--pille .lang[data-kopf-sprache]::after{transform:translateX(28px)}
  /* Beim Antippen gleitet der Griff hinüber, dann kommt die andere Seite (kopfleiste.js) */
  .nav--pille .lang[data-kopf-sprache].kopf-wechsel::before{background:var(--primary)}
  .nav--pille .lang[data-kopf-sprache].kopf-wechsel::after{transform:translateX(28px)}
  html[lang|="en"] .nav--pille .lang[data-kopf-sprache].kopf-wechsel::before{background:#8e9795}
  html[lang|="en"] .nav--pille .lang[data-kopf-sprache].kopf-wechsel::after{transform:none}

  /* Das Blatt: unter der Pille, gleich breit, gleich rund */
  /* Ohne eigenes backdrop-filter: es läge in der Pille, die schon eines hat,
     und Chrome zeichnete den Inhalt dahinter dann ungefiltert durch. Die
     Fläche ist darum einfach deckend. */
  .nav--pille .nav__menue{top:calc(100% + 8px);left:-1px;right:-1px;padding:8px 16px 16px;
    background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;
    border:1px solid rgba(255,255,255,.12);border-radius:28px;
    box-shadow:0 2px 8px rgba(0,1,1,.4),0 16px 40px rgba(0,1,1,.6);
    max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);transform-origin:50% 0}
  html[data-kopf="js"] .nav--pille .nav__menue{transform:translateY(-6px) scale(.98);
    transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1),visibility 0s linear .25s}
  html[data-kopf="js"] .nav--pille.nav--offen .nav__menue{transform:none;
    transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1),visibility 0s}
  .nav--pille .nav__links a{padding:0 8px}
  .nav--pille .nav__links a:last-child{border-bottom:0}
  .nav--pille .nav__menue .lang{display:none}
  .nav--pille .laden-weiche{display:flex;margin-top:12px}
  .nav--pille .laden-weiche > a{max-width:none}

  /* Ohne Skript: kein Menü-Knopf, die Seiten stehen in der Pille darunter */
  html:not([data-kopf="js"]) .nav--pille .kopf__knopf{display:none}
  html:not([data-kopf="js"]) .nav--pille .nav__in{flex-wrap:wrap;height:auto;min-height:56px;padding:5px 5px 8px 12px}
  html:not([data-kopf="js"]) .nav--pille .nav__menue{position:static;order:5;width:100%;padding:0;
    border:0;border-radius:0;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;max-height:none}
  html:not([data-kopf="js"]) .nav--pille .laden-weiche{display:none}
}
/* Hover nur mit echter Maus: auf dem Telefon bliebe der Schein nach dem Tippen stehen */
@media(max-width:767px) and (hover:hover){
  .nav--pille .kopf__knopf:hover{background:rgba(255,255,255,.07)}
}
/* Sehr schmale Schirme: der Schalter wird etwas schmaler, damit alles in die Pille passt */
@media(max-width:359px){
  .nav--pille .lang[data-kopf-sprache]{padding-right:72px;padding-left:4px}
  .nav--pille .lang[data-kopf-sprache]::before{width:64px}
  .nav--pille .lang[data-kopf-sprache]::after{right:23px}
  html[lang|="en"] .nav--pille .lang[data-kopf-sprache]::after,
  .nav--pille .lang[data-kopf-sprache].kopf-wechsel::after{transform:translateX(20px)}
  html[lang|="en"] .nav--pille .lang[data-kopf-sprache].kopf-wechsel::after{transform:none}
  .nav--pille .brand span{font-size:16px}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  html[data-kopf="js"] .nav--pille .nav__menue,
  html[data-kopf="js"] .nav--pille.nav--offen .nav__menue{transition:none;transform:none}
  .nav--pille .kopf__knopf path,
  .nav--pille .lang[data-kopf-sprache]::after{transition:none}
}

/* ---- 16d · Die Schlüsse der Unterseiten am Handy ----
   «Probier Tag 0 aus» fällt am Handy weg (Tag 0 steckt jetzt im Onboarding
   der App), ebenso der Probe-Chat auf den Warum-Seiten mit seiner Zeile.
   An ihrer Stelle steht der Laden-Knopf nach Gerät (16b). Die alten Teile
   tragen im HTML die Klasse nur-rechner, der neue Knopf nur-handy. Am
   Rechner bleibt alles, wie es war. Die Regel für die Warum-Seiten steht
   hier, weil start.js den Probe-Knopf erst zur Laufzeit einsetzt. */
@media(max-width:767px){
  .wy-probe{display:none}
  /* Die Warum-Seiten haben oben einen Schein (.glow--a). Ihr Kopf schnitt ihn
     an seiner Oberkante ab; mit der schwebenden Pille stand dort eine harte
     Kante quer über den Schirm. Jetzt reicht der Schein hinter die Pille.
     (.wy davor, weil seite-warum.css nach diesem Stilblatt geladen wird.) */
  .wy .wy-kopf{overflow:visible}
  .laden-tat .laden-weiche,.wy-laden .laden-weiche{width:100%}
  .gs-schritt .laden-weiche,.wy-laden .laden-weiche{justify-content:flex-start}
  /* Geschichte, Schritt 1: die Knöpfe über die ganze Breite der Karte, sonst
     passen zwei nicht nebeneinander */
  .gs-schritt--haupt > .laden-weiche{grid-column:1/-1}
}

/* =========================================================================
   17 · V2 HANDY, RUNDE 2 (12.10.2026 abends): Blättern, Zustimmungsband,
   Fusszeile

   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 13 bis 15.
   Wie Abschnitt 16 gilt alles nur unter 768 Pixeln. Ab 768 Pixeln (Tablet
   und Rechner) ändert sich kein Pixel.
   ========================================================================= */

/* ---- 17a · Blättern: ein Bereich, ein Bildschirm ----
   Die Schnittstelle (fest, auch für die Unterseiten; ausführlich in
   docs/umbau-handy/v2/blaettern-schnittstelle.md):
     <html class="blaettern">    die Seite blättert
     class="bildschirm"          dieser Bereich füllt genau einen Bildschirm
   Unter 768 Pixeln rastet die Seite beim Scrollen an jedem .bildschirm ein,
   einer pro Wisch (scroll-snap-stop:always), zuletzt an der Fusszeile. Das
   Einrasten ist nur CSS; die zwei Sicherungen am Ende dieses Abschnitts
   setzt assets/js/blaettern.js.
   · Eingerastet wird im Fenster selbst: scroll-snap-type steht am
     html-Element (am body greift es in Safari nicht).
   · Die Pille schwebt hier fest über der Seite (fixed statt sticky). Sonst
     nähme sie oben 72 Pixel Platz weg, und der erste Bereich begänne nicht
     am Rastpunkt. Jeder Bereich hält dafür oben die Pille frei: ihr Abstand
     zum Rand (8, auf Geräten mit Insel deren Sicherheitsabstand), ihre Höhe
     (56) und 8 Pixel Luft. Ohne Skript bleibt die Leiste klebend, weil sie
     dann mit den Verweisen höher ist.
   · 100svh: die Höhe mit eingeblendeten Leisten. Beim Ein- und Ausblenden
     der Safari-Leiste ändert sich so keine Höhe, nichts springt; mit
     ausgeblendeter Leiste schaut unten ein Streifen des nächsten Bereichs
     herein.
   · scroll-padding-top ist hier 0 (sonst 72 für Sprungmarken unter der
     klebenden Leiste): der Rastpunkt ist genau die Oberkante des Bereichs.
   · Senkrecht steht der Inhalt mittig (align-content wirkt ohne anderes
     display, also auch auf Blöcken und Rastern der Seiten; ältere Browser
     setzen ihn oben an). display wird hier bewusst nicht gesetzt, damit
     display:none der Seiten weiter gilt.
   · Lange Lesetexte (Blog, Datenschutz, Impressum, Rechtstexte der App)
     tragen die Klasse NICHT: Einrasten zerstörte dort das Lesen. */
@media(max-width:767px){
  html.blaettern{
    --blatt-oben:calc(max(8px, env(safe-area-inset-top, 0px)) + 64px);
    --blatt-unten:calc(24px + env(safe-area-inset-bottom, 0px));
    scroll-snap-type:y mandatory;scroll-padding-top:0}
  html.blaettern[data-kopf="js"] .nav.nav--pille{position:fixed;top:0;left:0;right:0}
  html.blaettern .bildschirm{box-sizing:border-box;min-height:100vh;min-height:100svh;margin-block:0;
    padding-top:var(--blatt-oben);padding-bottom:var(--blatt-unten);align-content:center;
    scroll-snap-align:start;scroll-snap-stop:always}
  /* Die Fusszeile ist seit Runde 3 (12.10.2026) keine eigene Station mehr.
     Eluan: die eigene Fusszeilen-Station sei «absolut unnötig», mit
     Datenschutz und Impressum in der Mitte. Sie ist jetzt klein (17d) und
     hängt unten am letzten Bildschirm: der letzte Bereich in <main> ist um
     ihre Höhe (--fuss-h) kürzer, beide zusammen sind genau ein Bildschirm.
     --fuss-h misst assets/js/blaettern.js; der Wert hier gilt nur bis dahin.
     Der letzte Bereich hält unten nur 8 Pixel frei, den Rest gibt die
     Fusszeile. Steht zwischen dem letzten Bereich und der Fusszeile noch
     etwas (die Quellen der Warum-Seiten), teilt das Stilblatt der Seite die
     Station auf (seite-warum.css). scroll-snap-align:end bleibt an der
     Fusszeile: so ist das Ende der Seite immer erreichbar, auch wenn die
     Station einmal nicht genau passt.
     Bis Runde 3 war die Fusszeile die letzte Station und füllte sie ganz
     (davor einen halben Bildschirm, darüber stand dann angeschnitten der
     Bereich davor). */
  html.blaettern{--fuss-h:calc(54px + env(safe-area-inset-bottom, 0px))}
  html.blaettern main > .bildschirm:last-child{min-height:calc(100vh - var(--fuss-h));min-height:calc(100svh - var(--fuss-h));
    padding-bottom:8px}
  html.blaettern footer{box-sizing:border-box;min-height:0;margin-top:0;
    padding:0 0 calc(10px + env(safe-area-inset-bottom, 0px));border-top:0;
    scroll-snap-align:end;scroll-snap-stop:always}
  /* Zwei Sicherungen, gesetzt von assets/js/blaettern.js (auf jeder
     Blätter-Seite eingebunden):
     · blaettern-pause: ein Eingabefeld hat den Fokus. Die Tastatur
       verschiebt die Seite, das Einrasten risse sie sonst vom Feld weg.
     · blaettern-frei: ein Bereich ist höher als der Bildschirm (grössere
       Schrift in den Einstellungen, eine lange Ideenliste) oder die letzte
       Station passt nicht mehr. Die Seite rastet dann nur noch in der Nähe
       der Bereiche ein, statt Inhalt zu überspringen. */
  html.blaettern.blaettern-frei{scroll-snap-type:y proximity}
  html.blaettern.blaettern-pause{scroll-snap-type:none}
}

/* ---- 17b · Zustimmungsband am Handy: eine schwebende Karte ----
   Eine Zeile Text («Nutzung und Werbung messen? Datenschutz»), darunter die
   zwei Knöpfe. Höchstens rund 104 Pixel hoch, 10 Pixel über dem Rand, wie
   die Pille oben. «Einverstanden» rechts und grün, «Nur das Nötige» links
   mit Umriss: GLEICH gross, weisse Schrift (17 zu 1), mit einem Tipp
   erreichbar. Zurückhaltend heisst hier nur «ohne Füllung», nie blass oder
   deaktiviert. Die Reihenfolge im Code bleibt (Einverstanden zuerst), damit
   analytics.js und die Prüfskripte unverändert greifen; nur die Lage im
   Raster tauscht. Die Klassen zust__k--ja und zust__k--nein setzt
   analytics.js. Wirkung unverändert: ohne Wahl und nach «Nur das Nötige»
   lädt weder PostHog noch der Meta-Pixel. */
@media(max-width:767px){
  .zust{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    max-width:480px;margin-inline:auto;
    grid-template-columns:minmax(0,1fr);gap:10px;align-items:stretch;
    padding:12px;border:1px solid var(--line-strong);border-radius:24px;
    background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 2px 8px rgba(0,1,1,.4),0 16px 40px rgba(0,1,1,.6)}
  .zust__t{padding:0 4px;font-size:15px;line-height:24px;color:#c9d3d1}
  .zust__lang{display:none}
  .zust__kurz{display:inline}
  /* Der Verweis «Datenschutz»: Berührfläche 44 hoch, sie endet genau über den Knöpfen */
  .zust__mehr::before{top:-13px;bottom:-13px}
  .zust__act{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .zust .zust__k{height:44px;min-height:44px;padding:0 8px;border-radius:99px;border-width:1px;
    font-size:14px;font-weight:700;line-height:1.15;letter-spacing:0;
    transition:transform .14s var(--ease)}
  .zust .zust__k--ja{grid-column:2;grid-row:1;background:var(--primary);border-color:var(--primary);color:#0b1112}
  .zust .zust__k--nein{grid-column:1;grid-row:1;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);color:#fff}
  .zust .zust__k:active{transform:scale(.97)}
  .zust .zust__k:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:99px}
  .zust .zust__k--ja:focus-visible{outline-color:#fff}
}
@media(max-width:767px) and (hover:hover){
  .zust .zust__k--ja:hover{background:#71c4ba;border-color:#71c4ba}
  .zust .zust__k--nein:hover{background:rgba(255,255,255,.1);border-color:var(--primary)}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .zust .zust__k{transition:none}
  .zust .zust__k:active{transform:none}
}
/* Der Widerruf in der Fusszeile hat zwei Beschriftungen (analytics.js): am
   Rechner wie bisher «Messung: Wahl ändern», am Handy kurz «Messung». */
.zust__widerruf .zust__w-kurz{display:none}
@media(max-width:767px){
  .zust__widerruf .zust__w-lang{display:none}
  .zust__widerruf .zust__w-kurz{display:inline}
}

/* ---- 17c · Fusszeile am Handy: kurz und geordnet ----
   Eluan: «sieht furchtbar ungeordnet aus». Am Handy jetzt vier Teile:
     Marke
     die vier Seiten in zwei Spalten (Funktionen, Über mich, Was fehlt dir?, Blog)
     eine leise Zeile: Datenschutz · Impressum · Messung
     eine leise Zeile: die Mailadresse
   Nur ausgeblendet, nichts gelöscht, nur CSS (die Fusszeile steht in jeder
   Seite einzeln): Startseite (die Marke führt dorthin), Andere Apps,
   Instagram, Konto löschen, der Satz zur Firma (steht im Impressum) und die
   Zeile mit dem Datum. Impressum und Datenschutz bleiben auf jeder Seite
   mit einem Tipp erreichbar. Die Reihenfolge stellt order her: die Marke,
   der Firmensatz und die Datumszeile stehen im HTML in einem gemeinsamen
   div, das hier display:contents bekommt. Vom Firmensatz bleibt nur die
   Mailadresse sichtbar (Schriftgrösse 0 für den Rest, Bildschirmleser lesen
   ihn weiter). Jede Berührfläche mindestens 44 Pixel. */
@media(max-width:767px){
  footer{padding:24px 0 calc(28px + env(safe-area-inset-bottom, 0px))}
  .foot{gap:0}
  .foot > div{display:contents}
  .foot .brand{order:1;align-self:flex-start;margin:0 0 10px!important}
  .foot__stand{display:none}
  .foot__links{order:2;display:flex;flex-wrap:wrap;gap:0;margin:0 -8px}
  .foot__links::after{content:"";order:2;flex:0 0 100%;height:8px}
  /* Zwei Spalten, links 58 Prozent: so passt «What are you missing?» bis
     360 Pixel in eine Zeile, rechts stehen nur kurze Namen. */
  .foot__links a{order:1;flex:0 0 42%;justify-content:flex-start;min-width:0;padding:0 8px;
    font-size:16px;font-weight:500;color:#dfe7e5;white-space:nowrap}
  .foot__links a[href$="/funktionen"],.foot__links a[href$="/features"],
  .foot__links a[href$="/ideen"],.foot__links a[href$="/roadmap"]{flex-basis:58%}
  .foot__links a[href="/"],.foot__links a[href="/en"],.foot__links a[href$="#apps"],
  .foot__links a[href*="instagram.com"],.foot__links a[href="/app-konto-loeschen"]{display:none}
  .foot__links a[href="/datenschutz"],.foot__links a[href="/impressum"],.foot__links .zust__widerruf{
    order:3;position:relative;flex:0 0 auto;padding:0 10px 0 8px;font-size:15px;font-weight:400;color:var(--muted)}
  .foot__links a[href="/datenschutz"] ~ a[href="/impressum"],
  .foot__links a[href="/datenschutz"] ~ .zust__widerruf,
  .foot__links a[href="/impressum"] ~ .zust__widerruf{padding-left:10px}
  .foot__links a[href="/datenschutz"] ~ a[href="/impressum"]::before,
  .foot__links a[href="/datenschutz"] ~ .zust__widerruf::before,
  .foot__links a[href="/impressum"] ~ .zust__widerruf::before{
    content:"·";content:"·" / "";position:absolute;left:0;top:50%;transform:translate(-50%,-50%);
    color:var(--muted);font-weight:700}
  .foot > div > .foot__legal{order:3;margin:0;font-size:0;line-height:0}
  .foot > div > .foot__legal a{font-size:15px;line-height:1.4;text-decoration:none}
  /* Datenschutz und Impressum haben eine kurze Fusszeile ohne Marke: dort
     bleibt der Satz zur Firma oben stehen. */
  .foot > .foot__legal{order:1;margin:0 0 6px}
}

/* ---- 17d · Fusszeile auf Blätter-Seiten: eine leise Zeile (Runde 3) ----
   Eluan, Runde 3 (12.10.2026, Punkt 24): «Der Schluss ist gut», die eigene
   Fusszeilen-Station danach «absolut unnötig». Auf Seiten mit Blättern
   (html.blaettern) steht die Fusszeile darum am Handy nur noch als eine
   leise Zeile unten am letzten Bildschirm (17a):
     Datenschutz · Impressum · Messung · Kontakt
   Ausgeblendet, nicht gelöscht (die Fusszeile steht in jeder Seite einzeln,
   am Rechner bleibt sie ganz): die Marke, die Seiten (sie stehen im Menü der
   Pille), Instagram, Andere Apps, Konto löschen, der Satz zur Firma (steht im
   Impressum). «Kontakt» ist die Mailadresse: ihr Text ist hier unsichtbar
   (Schriftgrösse 0, Bildschirmleser lesen ihn weiter), sichtbar steht
   «Kontakt» bzw. «Contact». Jede Berührfläche 44 Pixel hoch. Seiten ohne
   Blättern (Blog, Datenschutz, Impressum) behalten die Fusszeile aus 17c. */
@media(max-width:767px){
  html.blaettern footer .foot{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;padding-inline:12px}
  html.blaettern footer .foot .brand{display:none}
  html.blaettern footer .foot__links{display:contents}
  html.blaettern footer .foot__links::after{display:none}
  html.blaettern footer .foot__links a{display:none}
  html.blaettern footer .foot__links a[href="/datenschutz"],
  html.blaettern footer .foot__links a[href="/impressum"],
  html.blaettern footer .foot__links .zust__widerruf{display:inline-flex;order:1;flex:0 0 auto;position:relative;
    min-height:44px;padding:0 6px;font-size:14px;font-weight:400;color:var(--muted)}
  html.blaettern footer .foot > div > .foot__legal{order:2;display:block;margin:0;font-size:0;line-height:0}
  html.blaettern footer .foot > div > .foot__legal a{position:relative;display:inline-flex;align-items:center;min-height:44px;
    padding:0 6px;font-size:0;line-height:0;text-decoration:none}
  html.blaettern footer .foot > div > .foot__legal a::before{content:"·";content:"·" / "";position:absolute;left:0;top:50%;
    transform:translate(-50%,-50%);font-size:14px;line-height:1;font-weight:700;color:var(--muted)}
  html.blaettern footer .foot > div > .foot__legal a::after{content:"Kontakt";font-size:14px;line-height:1.4;color:var(--muted)}
  html.blaettern[lang|="en"] footer .foot > div > .foot__legal a::after{content:"Contact"}
  html.blaettern footer .foot > div > .foot__legal a:hover::after{color:#fff;text-decoration:underline}
}

/* =========================================================================
   18 · V2 HANDY, RUNDE 4 (13.10.2026): Laden-Knöpfe überall gleich,
   Zurück-Knopf unten rechts

   Auftrag: docs/umbau-handy/V2-HANDY-2026-10-12.md, Punkte 27 und 33.
   Wie 16 und 17 gilt alles nur unter 768 Pixeln. Ab 768 Pixeln (Tablet und
   Rechner) ändert sich kein Pixel: die Laden-Knöpfe stehen dort weiter wie
   in 16b, der Zurück-Knopf oben links wie in 14a.
   ========================================================================= */

/* ---- 18a · Laden-Knöpfe: zwei Anordnungen ----
   Eluan, Punkt 27: kein «Auch für Android» oder «Auch fürs iPhone» mehr.
   Ist das Gerät sicher erkannt, steht auf dem iPhone nur der App Store, auf
   Android nur Google Play (16b, html[data-geraet]). Sonst (Rechner, iPad,
   unbekannt) stehen beide. Beide Knöpfe sind gleich gestaltet: gleich hoch,
   gleich breit, dieselbe Schrift.
   Zwei Anordnungen, die Klassennamen sind fest (Schnittstelle in
   docs/umbau-handy/v2/blaettern-schnittstelle.md, «Laden-Knöpfe»):
     .laden-weiche          Grundform. Beide sichtbar: untereinander, App
                            Store oben, Google Play darunter, volle Breite.
     .laden-weiche--reihe   Beide sichtbar: nebeneinander, Google Play links,
                            App Store rechts (Punkt 29). Im DOM bleibt der App
                            Store zuerst, die Lage macht order.
   Steht nur ein Knopf da, füllt er in beiden Formen die ganze Breite.
   Unter 360 Pixeln ist für zwei Knöpfe nebeneinander kein Platz, dort steht
   auch die Reihe untereinander wie die Grundform. */
@media(max-width:767px){
  .laden-weiche{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:10px}
  .laden-weiche > a{flex:none;width:100%;max-width:none;min-height:56px;padding:8px 14px;gap:10px}
  .laden-weiche--reihe{flex-direction:row}
  .laden-weiche--reihe > a{flex:1 1 0;width:auto;min-width:0}
  .laden-weiche--reihe > .google{order:-1}
}
@media(max-width:359px){
  .laden-weiche--reihe{flex-direction:column}
  .laden-weiche--reihe > a{flex:none;width:100%}
  .laden-weiche--reihe > .google{order:0}
}

/* ---- 18b · Zurück-Knopf unten rechts, schwebend ----
   Eluan, Punkt 33: oben weg, unten rechts schwebend, mit dem rechten Daumen
   gut erreichbar. Gilt für jede Unterseite mit Zurück-Knopf (.seite-zurueck,
   auf der Geschichte .gs-zurueck). Das Element bleibt, wo es im HTML steht,
   und bleibt ein gewöhnlicher Verweis (in der Vorschau wichtig, dort gibt es
   kein history.back). Am Handy schwebt es fest über der Seite:
     · rund, 48 Pixel, 16 Pixel vom rechten und unteren Rand (dazu der
       Home-Balken), Glas wie die Pille oben, der Pfeil weiss
     · das Wort «Zurück» bleibt für Bildschirmleser im Verweis, sichtbar ist
       nur der Pfeil
     · unter der Kopfleiste und ihrem Menü (z-index 60), über dem Inhalt
     · am letzten Bildschirm einer Blätter-Seite hebt er sich über die leise
       Fusszeile, und liegt in Ruhe ein Knopf unter ihm, weicht er darüber aus
       (assets/js/zurueck-schwebend.js, --zurueck-heben, nur transform)
     · solange das Zustimmungsband offen ist, hat es Vorrang: der Knopf ist
       dann ausgeblendet und kommt nach der Wahl wieder (nur opacity)
   Bewegung nur über transform und opacity (200 ms, kurve-standard). */
@media(max-width:767px){
  .seite-zurueck,.gs-zurueck,.prose a.seite-zurueck{position:fixed;z-index:55;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));left:auto;top:auto;
    display:flex;align-items:center;justify-content:center;gap:0;
    width:48px;height:48px;min-height:48px;margin:0;padding:0;border-radius:50%;
    border:1px solid rgba(255,255,255,.16);background:rgba(22,27,28,.9);color:#fff;
    -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:0 2px 8px rgba(0,1,1,.4),0 12px 30px rgba(0,1,1,.55);
    transform:translateY(calc(var(--zurueck-heben, 0px) * -1));
    opacity:1;visibility:visible;
    transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .2s cubic-bezier(.25,.1,.25,1),visibility 0s}
  .seite-zurueck svg,.gs-zurueck svg{width:22px;height:22px;margin-left:-2px;color:#fff;stroke-width:2.4}
  .seite-zurueck span,.gs-zurueck span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .seite-zurueck:hover,.gs-zurueck:hover{border-color:rgba(255,255,255,.16);background:rgba(22,27,28,.9)}
  .seite-zurueck:active,.gs-zurueck:active{transform:translateY(calc(var(--zurueck-heben, 0px) * -1));
    background:#2a3335}
  .seite-zurueck:focus-visible,.gs-zurueck:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:50%}
  /* Das Zustimmungsband ist offen (analytics.js hängt es an body an) */
  body:has(> .zust) .seite-zurueck,body:has(> .zust) .gs-zurueck{opacity:0;visibility:hidden;
    transition:opacity .2s cubic-bezier(.25,.1,.25,1),visibility 0s linear .2s}
}
@media(max-width:767px) and (hover:hover){
  .seite-zurueck:hover,.gs-zurueck:hover{border-color:var(--primary);background:#1e2627}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .seite-zurueck,.gs-zurueck,.prose a.seite-zurueck,
  body:has(> .zust) .seite-zurueck,body:has(> .zust) .gs-zurueck{transition:none}
}

/* ---- 18c · Am Ende sitzt der Zurück-Knopf in der Fusszeile ----
   Reste nach Runde 4 (13.10.2026): Auf Blätter-Seiten steht der Knopf am
   letzten Bildschirm über der leisen Fusszeile (17d). Ist dort kein Platz,
   weil der letzte Bildschirm bis knapp über die Fusszeile gefüllt ist (etwa
   /design-entwicklung bei 375 × 667 mit beiden Laden-Knöpfen: der Knopf lag
   auf der Ecke der dritten Karte), bleibt er unten und setzt sich rechts in
   die Fusszeile. Das entscheidet assets/js/zurueck-schwebend.js und setzt
   dann html.zurueck-im-fuss. Hier lassen die Verweise ihm rechts 72 Pixel
   frei (16 Rand, 48 Knopf, 8 Luft), etwas enger gesetzt, damit sie bis 375
   Pixel in einer Zeile bleiben, und die Zeile steht auf seiner Mitte
   (unten 18 statt 10 Pixel). Ohne die Klasse gilt 17d unverändert. */
@media(max-width:767px){
  html.blaettern.zurueck-im-fuss footer{padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))}
  html.blaettern.zurueck-im-fuss footer .foot{padding-left:12px;padding-right:72px}
  html.blaettern.zurueck-im-fuss footer .foot__links a[href="/datenschutz"],
  html.blaettern.zurueck-im-fuss footer .foot__links a[href="/impressum"],
  html.blaettern.zurueck-im-fuss footer .foot__links .zust__widerruf,
  html.blaettern.zurueck-im-fuss footer .foot > div > .foot__legal a{padding:0 4px}
}
@media(max-width:389px){
  html.blaettern.zurueck-im-fuss footer .foot__links a[href="/datenschutz"],
  html.blaettern.zurueck-im-fuss footer .foot__links a[href="/impressum"],
  html.blaettern.zurueck-im-fuss footer .foot__links .zust__widerruf,
  html.blaettern.zurueck-im-fuss footer .foot > div > .foot__legal a::before,
  html.blaettern.zurueck-im-fuss footer .foot > div > .foot__legal a::after{font-size:13px}
}

/* ---- 18d · Sprünge ohne Fahrt (13.10.2026, Abend) ----
   Eluan: zurück von einer Warum-Seite nach «Was trifft auf dich zu?»
   (/#dafuer) oder über «16 weitere Skills» nach /funktionen#skills begann
   die Seite oben und fuhr dann sichtbar hinunter. Er will direkt dort sein.
   Die Fahrt kam von html{scroll-behavior:smooth} (oben bei den Grundlagen):
   es macht auch den Sprung des Browsers zur Marke beim Laden weich.
   · html.ankunft setzt assets/js/kopfleiste.js (6), solange eine neue Seite
     mit Sprungmarke oder nach einem Sprachwechsel ihr Ziel anfährt, bis sie
     geladen ist: kein weiches Scrollen, kein Scroll-Anker des Browsers (das
     Skript hält das Ziel selbst fest), am Handy kein Einrasten. Danach
     rastet sie genau dort ein, wo sie steht.
   · html.ankunft-verlauf: zurück über den Verlauf oder neu geladen. Die
     Stelle stellt der Browser her, nur ohne Fahrt.
   · html.ankunft-verdeckt: die Seite bleibt unsichtbar, bis das Ziel steht
     (in der Regel kein einziges Bild, weil das Ziel vor dem ersten Bild da
     ist). Die Animation ist die Sicherung ohne Skript: nach 1,5 Sekunden ist
     die Seite in jedem Fall sichtbar.
   · Am Handy springt auch ein Verweis innerhalb der Seite (#holen aus der
     Pille) ohne Fahrt. Am Rechner bleibt dort das weiche Scrollen. */
html.ankunft,html.ankunft-verlauf{scroll-behavior:auto!important}
html.ankunft{overflow-anchor:none}
html.ankunft-verdeckt{visibility:hidden;animation:ankunft-sicher 0s linear 1.5s forwards}
@keyframes ankunft-sicher{to{visibility:visible}}
@media(max-width:767px){
  html{scroll-behavior:auto}
  html.blaettern.ankunft{scroll-snap-type:none!important}
}

/* ---- 17e · Blättern am Rechner: ein Bereich, ein Bildschirm (13.10.2026) ----
   Eluan, Runde 2 am Rechner: einmal scrollen, und die Seite hakt sauber beim
   nächsten Bereich ein, wie am Handy. Ersetzt die Regel «kein erzwungenes
   Einrasten am Rechner». Schnittstelle: docs/umbau-handy/v2/
   blaettern-schnittstelle.md, Abschnitt «Rechner».
     <html class="blaettern blaettern-rechner">   die Seite blättert auch ab
                                                  768 Pixeln
     class="bildschirm"                           ein Bereich, eine Station
   blaettern-rechner ist eine eigene Klasse, weil auch /funktionen und die
   Warum-Seiten html.blaettern tragen (für das Handy), am Rechner aber frei
   scrollen. Gilt für Start, Über mich, Geschichte und Was fehlt dir?.
   · Hier steht nur die Höhe: jeder Bereich ist mindestens ein Fenster minus
     Kopfleiste hoch (--blatt-kopf, die Leiste mit ihrem Rand), und Sprünge
     zu einer Marke (#holen, #dafuer) enden genau unter der Kopfleiste.
   · Das Einhaken selbst macht assets/js/blaettern.js (e): eine Geste mit
     Mausrad oder Trackpad, ein Pfeil, Bild ab/auf oder die Leertaste führen
     genau einen Bereich weiter, in rund 600 ms, bei weniger Bewegung sofort.
     Ein Bereich, der höher als das Fenster ist, scrollt frei bis an sein Ende.
   · Tablets ohne Maus (Berührung) rasten über CSS ein wie das Handy (17a). */
@media (min-width:768px){
  html.blaettern-rechner{--blatt-kopf:calc(var(--nav-h) + 1px);scroll-padding-top:var(--blatt-kopf)}
  html.blaettern-rechner .bildschirm{box-sizing:border-box;min-height:calc(100vh - var(--blatt-kopf))}
  /* Der letzte Bereich und die Fusszeile sind zusammen ein Bildschirm (--fuss-h
     misst assets/js/blaettern.js), wie am Handy (17a) */
  html.blaettern-rechner main > .bildschirm:last-child{min-height:calc(100vh - var(--blatt-kopf) - var(--fuss-h, 0px))}
  html.blaettern-rechner footer{margin-top:0}
}
@media (min-width:768px) and (hover:none) and (pointer:coarse){
  html.blaettern-rechner{scroll-snap-type:y mandatory}
  html.blaettern-rechner .bildschirm{scroll-snap-align:start}
  html.blaettern-rechner.blaettern-frei{scroll-snap-type:y proximity}
  html.blaettern-rechner.blaettern-pause{scroll-snap-type:none}
}