/* ============================================================
   intuiview.com · landing.css

   Davor stehen /design/fonts.css und /design/tokens.css, sonst nichts:
   keine base.css, keine components.css. Die Seite hat eigene Knoepfe
   und einen eigenen Rhythmus, aber keine eigenen Werte — jede Farbe,
   jeder Abstand, jede Grösse kommt aus packages/design/tokens.css
   (CLAUDE.md, Regel 1). Fehlt ein Wert, kommt er dorthin.

   Aendern: Datei speichern, Browser neu laden. Kein Build.
   Lokal ansehen: node apps/landing/dev.mjs
   ============================================================ */

/* ---------- Rollen ----------
   Die Seite spricht in neun Rollen. Hell sind sie an die Tokens des
   Systems gebunden, .inv bindet dieselben Rollen an die Tokens fuer
   dunklen Grund. Jeder Baustein sieht damit in einem dunklen Rahmen
   richtig aus, ohne eine zweite Regel. Das Formular steht als helle
   Karte im dunklen Rahmen und bekommt die hellen Rollen zurueck.   */
:root,.inv .form{
  --bg:var(--bg-site);
  --surface:var(--bg-surface);
  --ink:var(--text);
  --soft:var(--text-body);
  --accent:var(--action);
  --on-accent:var(--text-on-accent);
  --mint:var(--bg-highlight);
  --line:var(--border);
  --focus:var(--focus-ring);
}
.inv{
  --bg:var(--bg-inverse);
  --surface:var(--bg-inverse-raised);
  --ink:var(--text-on-inverse);
  --soft:var(--text-muted-on-inverse);
  --accent:var(--action-on-inverse);
  --on-accent:var(--text-on-action-inverse);
  --mint:var(--bg-inverse-selected);
  --line:var(--border-on-inverse);
  --focus:var(--action-on-inverse);
  background:var(--bg);color:var(--ink);
}
.inv .form{background:var(--surface);color:var(--ink)}

/* ---------- Grundlagen ---------- */
:root{
  /* Abstand zwischen Bildschirmkante und Leiste bzw. dunklem Rahmen. */
  --gutter:clamp(var(--sp-5),2.4vw,var(--sp-8));
  color-scheme:light;
  interpolate-size:allow-keywords;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Ein Anker landet unter der klebenden Leiste, nicht dahinter. */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--h-site-bar) + var(--sp-5) + var(--sp-6));scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-site);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:var(--ls-display);line-height:var(--lh-hero);margin:0}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-section)}
h3{font-size:var(--fs-site-lg);letter-spacing:var(--ls-title);line-height:var(--lh-heading)}
p{margin:0}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
/* Ein Feld mit hidden bleibt weg, auch wenn seine Klasse display setzt. */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Der Sprite mit der Bildmarke steht einmal je Seite und ist nie sichtbar. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.wrap{width:100%;max-width:var(--w-site);margin-inline:auto;padding-inline:clamp(var(--sp-7),5vw,var(--sp-10))}
section{padding-block:clamp(var(--sp-11),10vw,var(--sp-13))}
.lead{color:var(--soft);font-size:var(--fs-site-lead);max-width:34em}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);min-height:var(--h-control-xl);padding:var(--sp-5) var(--sp-8);border-radius:var(--r-full);border:1.5px solid transparent;font-weight:var(--fw-medium);text-decoration:none;cursor:pointer;background:none;transition:transform var(--dur-slow) var(--ease-glide),box-shadow var(--dur-slow),background var(--dur-slow),border-color var(--dur-slow)}
.btn .arr{display:inline-block;transition:transform var(--dur-slow) var(--ease-glide)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost{border-color:var(--line);background:var(--surface)}
.btn-text{padding-inline:var(--sp-2);text-decoration:underline;text-underline-offset:var(--sp-2);text-decoration-color:var(--line)}
.btn:disabled{cursor:default;opacity:.6}

/* ---------- Kopf ----------
   Eine Glasleiste, die beim Runterscrollen schmaler wird und beim
   Hochscrollen wieder aufgeht (landing.js). */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:var(--z-sticky);padding-top:var(--sp-5);pointer-events:none}
.navwrap{padding-inline:var(--gutter)}
.bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;width:min(var(--w-site-bar),100%);margin-inline:auto;min-height:var(--h-site-bar);gap:var(--sp-6);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-8);border-radius:var(--r-full);background:var(--bg-glass);border:1px solid var(--border-glass);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);box-shadow:var(--sh-glass);transition:width var(--dur-glide) var(--ease-glide),min-height var(--dur-glide) var(--ease-glide),padding var(--dur-glide) var(--ease-glide),box-shadow var(--dur-glide)}
.bar.compact{width:min(var(--w-site-bar-compact),100%);min-height:var(--h-control-xl);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-7);box-shadow:var(--sh-glass-compact)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bar{background:var(--bg-glass-solid)}}

.logo{display:flex;align-items:center;gap:var(--sp-4);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-title);letter-spacing:var(--ls-title);text-decoration:none;color:var(--accent)}
.logo span{color:var(--ink)}
.logo svg{width:var(--icon-lg);height:var(--icon-lg);fill:currentColor;transform-origin:50% 92%;transition:transform var(--dur-glide) var(--ease-spring)}

.bar nav{position:relative;display:flex;gap:var(--sp-2);align-items:center}
.bar nav a.link{position:relative;z-index:1;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-full);text-decoration:none;color:var(--ink);opacity:.72;font-size:var(--fs-body);transition:opacity var(--dur-slow)}
.bar nav a.link:hover,.bar nav a.link.on{opacity:1}
/* Die Flaeche hinter dem aktiven Anker gleitet von Link zu Link. */
.nav-ind{position:absolute;left:0;top:0;z-index:0;border-radius:var(--r-full);background:var(--mint);opacity:0;pointer-events:none;transition:transform var(--dur-glide) var(--ease-glide),width var(--dur-glide) var(--ease-glide),height var(--dur-slow),opacity var(--dur-slow)}
.bar nav .btn{margin-left:var(--sp-4);min-height:var(--h-control-lg);padding:var(--sp-3) var(--sp-6);font-size:var(--fs-body)}
@media (max-width:720px){
  .bar nav a.link,.nav-ind{display:none}
  .bar{min-height:var(--h-site-bar-sm);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6)}
}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(var(--sp-10),7vw,var(--sp-12));padding-bottom:clamp(var(--sp-10),8vw,var(--sp-12))}
.hero-grid{display:grid;gap:clamp(var(--sp-9),6vw,var(--sp-11));align-items:center}
@media (min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.status{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-site-sm);color:var(--soft);margin-bottom:var(--sp-7)}
.status i{width:var(--sp-4);height:var(--sp-4);border-radius:50%;background:var(--accent);display:inline-block}
.hero .lead{margin-top:var(--sp-8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;margin-top:var(--sp-9)}

/* ---------- Telefon im Hero ----------
   Ein endloses Gespraech, abgespielt von landing.js. Innen gelten die
   Farben der Teilnehmerseite, nicht die Rollen: das Telefon bleibt
   hell, egal wo es steht. */
.stage{--pw:var(--w-phone);position:relative;display:grid;place-items:center;padding-block:var(--sp-4)}
.blob{position:absolute;width:min(92%,var(--w-phone-halo));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--mint),color-mix(in srgb,var(--mint) 40%,var(--bg)) 70%,transparent 72%)}
.ring{position:absolute;width:min(100%,var(--w-phone-ring));aspect-ratio:1;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--accent) 35%,transparent)}
.phone{position:relative;width:var(--pw);aspect-ratio:9/18.4;padding:var(--sp-4);border-radius:var(--r-device);background:var(--bg-device);box-shadow:var(--sh-device);will-change:transform;transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(calc(-2.5deg + var(--pr,0deg)))}
.screen{height:100%;border-radius:var(--r-screen);background:var(--bg-app);overflow:hidden;display:flex;flex-direction:column;position:relative}
.sb{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-5) var(--sp-7) var(--sp-2);font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--text);position:relative}
.island{position:absolute;left:50%;top:var(--sp-4);width:calc(var(--sp-11) + var(--sp-5));height:var(--sp-7);transform:translateX(-50%);border-radius:var(--r-full);background:var(--bg-device-island)}
.bat{width:calc(var(--sp-7) + var(--sp-1));height:calc(var(--sp-4) + var(--sp-1));border-radius:calc(var(--r-xs) / 2);border:1.5px solid var(--text);padding:1px;display:block}
.bat b{display:block;height:100%;width:72%;background:var(--text);border-radius:1px}
.ph-head{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-4);border-bottom:1px solid var(--border-soft)}
.ph-head .back{font-size:var(--fs-site-xl);line-height:1;color:var(--text-body);margin-right:calc(var(--sp-1) * -1)}
.ph-head .av{width:var(--avatar);height:var(--avatar);border-radius:50%;background:var(--action);color:var(--text-on-accent);display:grid;place-items:center;flex:none}
.ph-head .av svg{width:var(--icon-sm);height:var(--icon-sm);fill:currentColor}
.ph-head b{display:block;font-size:var(--fs-ui);line-height:var(--lh-tight);color:var(--text)}
.ph-head small{display:block;font-size:var(--fs-micro);color:var(--text-muted);line-height:var(--lh-heading)}
/* Neue Nachrichten schieben von unten nach, oben blendet die Liste aus. */
.pm-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-4);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,var(--text) var(--sp-10));mask-image:linear-gradient(to bottom,transparent 0,var(--text) var(--sp-10))}
.pm{display:block;max-width:var(--w-bubble);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);font-size:var(--fs-meta);line-height:var(--lh-snug);color:var(--text)}
.pm.new{animation:pop var(--dur-slow) ease-out both}
.pm.bot{background:var(--bg-surface);border:1px solid var(--border);border-bottom-left-radius:var(--r-xs);align-self:flex-start}
.pm.me{background:var(--bg-highlight);border-bottom-right-radius:var(--r-xs);align-self:flex-end}
/* Eine Nachfrage: der Moment, um den es auf dieser Seite geht. */
.pm.follow{border-color:var(--action);box-shadow:0 0 0 3px color-mix(in srgb,var(--action) 10%,transparent)}
.pm.follow::before{content:"\21B3  ";color:var(--action);font-weight:var(--fw-semibold)}
.ptyping{display:none;align-self:flex-start;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-md);border-bottom-left-radius:var(--r-xs)}
.ptyping.on{display:inline-flex}
.ptyping i{width:var(--sp-3);height:var(--sp-3);border-radius:50%;background:var(--text-muted);animation:blink 1s infinite}
.ptyping i:nth-child(2){animation-delay:.15s}
.ptyping i:nth-child(3){animation-delay:.3s}
.comp{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-2) var(--sp-4) var(--sp-5);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg-surface)}
.ptext{flex:1;font-size:var(--fs-meta);color:var(--text);line-height:var(--lh-heading);max-height:2.6em;overflow:hidden;display:block}
.ptext em{display:inline-block;width:1.5px;height:.95em;background:var(--action);vertical-align:-.15em;margin-left:1px;animation:blink 1s infinite}
.send{width:var(--h-control-sm);height:var(--h-control-sm);border-radius:50%;background:var(--action);color:var(--text-on-accent);display:grid;place-items:center;flex:none}
.send svg{width:var(--icon-sm);height:var(--icon-sm)}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(var(--sp-3))}to{opacity:1;transform:none}}

/* ---------- Fragebogen gegen Gespraech ---------- */
.head2{display:grid;gap:var(--sp-6);margin-bottom:clamp(var(--sp-9),5vw,var(--sp-11))}
@media (min-width:920px){.head2{grid-template-columns:1fr 1fr;align-items:end}}
.shared{margin:0 0 var(--sp-8);font-family:var(--font-display);font-size:var(--fs-site-quote);font-weight:var(--fw-medium);letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
.shared small{display:block;font-family:var(--font);font-size:var(--fs-site-sm);font-weight:var(--fw-regular);letter-spacing:0;color:var(--soft);margin-bottom:var(--sp-3)}
.compare{display:grid;gap:var(--sp-6)}
@media (min-width:860px){.compare{grid-template-columns:1fr 1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(var(--sp-7),4vw,var(--sp-9));display:flex;flex-direction:column;gap:var(--sp-6)}
.ptag{align-self:flex-start;padding:var(--sp-2) var(--sp-5);border-radius:var(--r-full);border:1.5px solid var(--line);font-size:var(--fs-site-sm);font-weight:var(--fw-medium);color:var(--soft)}
.ptag.win{background:var(--mint);color:var(--ink);border-color:transparent}
.opts{display:flex;flex-direction:column;gap:var(--sp-4);margin:0;padding:0;list-style:none}
.opt{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--h-control-lg);padding:var(--sp-4) var(--sp-6);border:1.5px solid var(--line);border-radius:var(--r-md)}
.opt::before{content:"";width:calc(var(--sp-6) + var(--sp-1));height:calc(var(--sp-6) + var(--sp-1));border-radius:50%;border:1.5px solid var(--soft);flex:none}
.opt.is-on{border-color:var(--accent);background:var(--mint)}
.opt.is-on::before{border-color:var(--accent);background:radial-gradient(var(--accent) 45%,transparent 50%)}
.thread{display:flex;flex-direction:column;gap:var(--sp-4)}
.msg{max-width:100%;padding:var(--sp-5) var(--sp-6);border-radius:var(--r-lg);font-size:var(--fs-chat);line-height:var(--lh-snug)}
.msg.bot{background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:var(--r-xs);align-self:flex-start}
.msg.me{background:var(--mint);border-bottom-right-radius:var(--r-xs);align-self:flex-end}
.msg.bot.follow::before{content:"\21B3  ";color:var(--accent);font-weight:var(--fw-semibold)}
/* Das Wort, an dem der Interviewer hängen bleibt. Wird unterstrichen,
   sobald das Panel ins Bild kommt (.seen, landing.js). */
.msg mark{background-color:transparent;background-image:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent) 45%,transparent) 62%);background-repeat:no-repeat;background-size:100% 100%;color:inherit;transition:background-size var(--dur-reveal) var(--ease-glide) var(--dur-glide)}
.result{margin-top:auto;padding:var(--sp-6) var(--sp-7);border-radius:var(--r-md);border:1.5px dashed var(--line);display:grid;gap:var(--sp-1)}
.result small{font-size:var(--fs-site-sm);color:var(--soft)}
.result b{font-family:var(--font-display);font-size:var(--fs-site-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
.result span{font-size:var(--fs-body);color:var(--soft)}
.result.dim b{color:var(--soft)}
.result.win{background:var(--mint);color:var(--ink);border:0}
.vs{display:none}

/* ---------- So funktioniert's ---------- */
.steps{display:grid;border-top:1px solid var(--line);counter-reset:s}
.step{position:relative;display:grid;gap:var(--sp-4) var(--sp-9);padding-block:var(--sp-8);border-bottom:1px solid var(--line);counter-increment:s}
@media (min-width:820px){.step{grid-template-columns:var(--sp-12) 1fr 1.3fr;align-items:baseline}}
.step::before{content:counter(s);font-family:var(--font-display);font-size:var(--fs-site-num);font-weight:var(--fw-semibold);color:var(--accent);line-height:1}
.step p{color:var(--soft)}

/* ---------- Dunkle Rahmen ----------
   Partner und Fuss: gleicher Abstand zum Bildschirmrand rundherum. */
.frame-sec{padding:var(--gutter)}
.frame{border-radius:var(--r-frame);padding-block:clamp(var(--sp-11),9vw,var(--sp-13));border:1px solid var(--line)}

/* ---------- Partner ---------- */
.partner-grid{display:grid;gap:clamp(var(--sp-9),6vw,var(--sp-11))}
@media (min-width:920px){.partner-grid{grid-template-columns:1fr 1fr;align-items:start}}
.partner-grid .lead{margin-top:var(--sp-7)}
.give{display:grid;margin-top:var(--sp-9);border-top:1px solid var(--line)}
.give div{padding-block:var(--sp-6);border-bottom:1px solid var(--line)}
.give b{display:block;font-family:var(--font-display);font-size:var(--fs-lead);font-weight:var(--fw-semibold);letter-spacing:var(--ls-title);margin-bottom:var(--sp-1)}
.give span{color:var(--soft)}

.form{border-radius:var(--r-xl);padding:clamp(var(--sp-7),4vw,var(--sp-9));display:grid;gap:var(--sp-6)}
.fields{display:grid;gap:var(--sp-6)}
.form h3{font-size:var(--fs-site-xl)}
.form label{display:grid;gap:var(--sp-3);font-weight:var(--fw-medium);font-size:var(--fs-body)}
.form .optional{font-weight:var(--fw-regular);color:var(--soft)}
/* 17px im Feld: darunter zoomt iOS beim Tippen hinein. */
.form input,.form textarea{width:100%;padding:var(--sp-5) var(--sp-6);border-radius:var(--r-md);border:1.5px solid var(--border-input);background:var(--bg);font-weight:var(--fw-regular);font-size:var(--fs-site);transition:border-color var(--dur-slow),box-shadow var(--dur-slow)}
.form textarea{min-height:calc(var(--sp-12) + var(--sp-9));resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 var(--sp-2) color-mix(in srgb,var(--accent) 18%,transparent)}
.fine{font-size:var(--fs-site-sm);color:var(--soft)}
.form-error{font-size:var(--fs-site-sm);color:var(--text-danger)}
.form-error:empty{display:none}
.done{display:none;gap:var(--sp-5)}
.done .btn{justify-self:start}
.sent .fields{display:none}
.sent .done{display:grid}

/* ---------- Team ---------- */
.team-grid{max-width:var(--w-site-team);margin-inline:auto}
.polaroid{position:relative;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-5) var(--sp-8);box-shadow:var(--sh-photo);transform:rotate(-1deg);transition:transform var(--dur-glide) var(--ease-glide),box-shadow var(--dur-glide)}
.tape{--w:calc(var(--sp-12) + var(--sp-5));position:absolute;top:calc(var(--sp-5) * -1);left:50%;width:var(--w);height:calc(var(--sp-8) + var(--sp-2));margin-left:calc(var(--w) / -2);transform:rotate(-3deg);background:color-mix(in srgb,var(--mint) 85%,transparent);border:1px solid var(--line);z-index:2;transition:transform var(--dur-glide) var(--ease-glide)}
/* Zwei Portraets nebeneinander, Lewin links, Felix rechts. Der Abstand
   ist der Rand des Polaroids, der Radius passt in dessen Ecke. */
.photo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.photo img{display:block;width:100%;height:auto;border-radius:var(--r-sm);background:var(--mint)}
.cap{display:grid;gap:var(--sp-7) var(--sp-10);padding:var(--sp-8) var(--sp-5) 0}
@media (min-width:760px){.cap{grid-template-columns:1fr 1fr;align-items:start}.cap .contact-line{grid-column:1/-1}}
.cap h3{font-size:var(--fs-section);line-height:1}
.names{display:grid;gap:var(--sp-5)}
.names b{display:block;font-family:var(--font-display);font-size:var(--fs-site-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-display);line-height:1.1}
.names span{color:var(--accent);font-weight:var(--fw-medium)}
.cap p{color:var(--soft)}
.cap a{color:var(--accent);font-weight:var(--fw-medium)}

/* ---------- Kurz gefragt ---------- */
#faq{padding-top:0}
.faq{max-width:var(--w-site-faq);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);padding-block:clamp(var(--sp-6),3vw,var(--sp-7));min-height:var(--h-control-xl);font-size:var(--fs-lead);font-weight:var(--fw-medium);transition:padding-left var(--dur-slow) var(--ease-glide),color var(--dur-slow)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--fs-site-xl);color:var(--accent);flex:none;transition:transform var(--dur-slow) var(--ease-glide)}
/* .closing setzt landing.js, solange eine Antwort zugeht: Farbe und
   Plus kehren sofort zurueck, nicht erst am Ende der Bewegung. */
.faq details[open]:not(.closing) summary{color:var(--accent)}
.faq details[open]:not(.closing) summary::after{transform:rotate(45deg)}
.faq .inner{padding-bottom:var(--sp-7);color:var(--soft);max-width:40em}

/* ---------- Fuss ---------- */
.ft{min-height:max(33vh,var(--h-site-foot));display:flex;flex-direction:column;padding-block:clamp(var(--sp-8),4vw,var(--sp-10))}
.ft-in{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-9)}
.ft-top{display:grid;gap:var(--sp-10)}
@media (min-width:860px){.ft-top{grid-template-columns:1fr auto;align-items:start}}
.ft-cta{display:grid;gap:var(--sp-7);justify-items:start}
.ft-cta h2{font-size:var(--fs-section)}
/* Im dunklen Fuss ist der Knopf hell: Schrift- und Grundfarbe getauscht. */
.ft-cta .btn-primary{background:var(--ink);color:var(--bg)}
.ft-cols{display:grid;grid-template-columns:repeat(3,auto);align-items:start;gap:var(--sp-8) clamp(var(--sp-8),4vw,var(--sp-10));justify-content:start}
.ft-cols div{display:grid;gap:var(--sp-4);align-content:start}
.ft-cols h3{font-family:var(--font);font-size:var(--fs-site-sm);font-weight:var(--fw-regular);letter-spacing:0;color:var(--soft);margin-bottom:var(--sp-1)}
.ft-cols a{white-space:nowrap}
@media (max-width:520px){.ft-cols{grid-template-columns:1fr 1fr}.ft-cols a{white-space:normal}}
/* Dieselbe gleitende Flaeche wie in der Kopfleiste (landing.js), hier
   auf --mint des dunklen Rahmens. Der negative Rand haelt den Text auf
   der Linie der Spaltenkoepfe, die Flaeche ragt darueber hinaus. */
.ft-cols,.ft-bottom{position:relative}
.ft-cols a,.ft-bottom a:not(.logo){position:relative;z-index:1;justify-self:start;margin:calc(var(--sp-2) * -1) calc(var(--sp-4) * -1);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);text-decoration:none;opacity:.88;transition:opacity var(--dur-slow)}
.ft-ind{position:absolute;left:0;top:0;z-index:0;border-radius:var(--r-full);background:var(--mint);opacity:0;pointer-events:none;transition:transform var(--dur-glide) var(--ease-glide),width var(--dur-glide) var(--ease-glide),height var(--dur-slow),opacity var(--dur-slow)}
.ft-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5) var(--sp-8);padding-top:var(--sp-8);border-top:1px solid var(--line);font-size:var(--fs-body);color:var(--soft)}
.ft-bottom .logo{margin-right:auto}
.ft-bottom .up{display:inline-block;transition:transform var(--dur-slow) var(--ease-glide)}

/* ---------- Knopf am unteren Rand (nur Handy) ----------
   Erscheint nur, wenn weder Hero noch Partner noch Fuss im Bild sind. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);padding:var(--sp-4) clamp(var(--sp-6),5vw,var(--sp-9)) calc(var(--sp-4) + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform var(--dur-slow);display:none}
.dock .btn{width:100%}
@media (max-width:720px){.dock{display:block}.dock.on{transform:none}}

/* ---------- Rechtstexte und 404 ----------
   Impressum, Datenschutz. Reine Lesetypografie. */
.legal{max-width:var(--w-prose);margin:0 auto;padding:var(--sp-11) clamp(var(--sp-7),5vw,var(--sp-10)) var(--sp-12)}
.legal h1{font-size:var(--fs-section);margin-bottom:var(--sp-8)}
.legal h2{font-size:var(--fs-site-lg);letter-spacing:var(--ls-title);line-height:var(--lh-heading);margin:var(--sp-10) 0 var(--sp-5)}
.legal p,.legal li,.legal dd{color:var(--soft)}
.legal p+p,.legal ul{margin-top:var(--sp-5)}
.legal ul{padding:0;list-style:none}
.legal li{padding-left:var(--sp-6);position:relative}
.legal li+li{margin-top:var(--sp-3)}
.legal li::before{content:"·";position:absolute;left:0;color:var(--text-faint)}
.legal dl{display:grid;gap:var(--sp-3) var(--sp-6);align-items:baseline;margin:var(--sp-5) 0 0}
@media (min-width:640px){.legal dl{grid-template-columns:max-content 1fr}}
.legal dt{font-size:var(--fs-site-sm);color:var(--text-muted)}
.legal dd{margin:0}
.legal a{color:var(--accent)}
/* Hinweis, dass ein Text noch nicht fertig ist. Dieselben Toene wie
   .notice--warn im Cockpit. */
.legal-note{padding:var(--sp-5) var(--sp-6);border-radius:var(--r-md);background:var(--o-050);color:var(--o-700);font-size:var(--fs-body)}
.lost{min-height:60vh;display:grid;align-content:center;justify-items:start;gap:var(--sp-7)}

/* ===== Bewegung: jede Animation hat einen Zweck =====
   Die Landingpage ist die Ausnahme von Regel 10 und 11 des
   Design-Systems: hier darf etwas hereinkommen und auf die Maus
   reagieren. Cockpit und Teilnehmerseite bleiben still.
   Ohne JavaScript oder mit prefers-reduced-motion fehlt die Klasse
   .js an <html>, und alles steht sofort da.                        */
@keyframes fadeUp{from{opacity:0;transform:translateY(var(--sp-6))}to{opacity:1;transform:none}}
@keyframes wordUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes phoneIn{from{opacity:0;transform:translate3d(var(--sp-8),var(--sp-9),0) rotate(-7deg)}to{opacity:1;transform:translate3d(0,0,0) rotate(-2.5deg)}}
@keyframes softIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes navIn{from{opacity:0;transform:translateY(calc(var(--sp-7) * -1))}to{opacity:1;transform:none}}
@keyframes frameIn{from{transform:scale(.94)}to{transform:none}}

.js header .bar{animation:navIn var(--dur-reveal) var(--ease-glide) .1s backwards}
/* Die Ueberschrift steigt Wort fuer Wort auf (landing.js zerlegt sie). */
.js .hero h1:not(.split){opacity:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block;animation:wordUp var(--dur-reveal) var(--ease-glide) backwards;animation-delay:calc(.2s + var(--i,0) * .08s)}
.js .in-up{animation:fadeUp var(--dur-reveal) var(--ease-glide) backwards;animation-delay:var(--d,0s)}
.js .phone{animation:phoneIn var(--dur-enter) var(--ease-glide) .4s backwards}
.js .blob,.js .ring{animation:softIn var(--dur-enter) var(--ease-glide) .25s backwards}
/* Inhalte erscheinen in Lesereihenfolge. */
.js .rv{opacity:0;transform:translateY(var(--sp-8));transition:opacity var(--dur-reveal) var(--ease-glide),transform var(--dur-reveal) var(--ease-glide);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .compare .panel:not(.seen) .msg mark{background-size:0% 100%}
/* Dunkle Rahmen oeffnen sich beim Hereinscrollen. */
@supports (animation-timeline:view()){
  .frame{animation:frameIn linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
}

/* Hover nur dort, wo es Hover gibt. */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{transform:translateY(calc(var(--sp-1) * -1));box-shadow:var(--sh-action-lift)}
  .btn:hover .arr{transform:translateX(var(--sp-2))}
  .btn-ghost:hover{border-color:var(--accent)}
  .logo:hover svg{transform:rotate(-14deg) scale(1.1)}

  .panel{transition:transform var(--dur-glide) var(--ease-glide),border-color var(--dur-glide),box-shadow var(--dur-glide)}
  .panel:hover{transform:translateY(calc(var(--sp-2) * -1));border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:var(--sh-inverse-lift)}
  .msg.follow{transition:box-shadow var(--dur-glide)}
  .panel:hover .msg.follow{box-shadow:0 0 0 var(--sp-2) color-mix(in srgb,var(--accent) 28%,transparent)}
  .result{transition:transform var(--dur-glide) var(--ease-glide)}
  .result.win:hover{transform:scale(1.02)}

  .give div{transition:transform var(--dur-glide) var(--ease-glide)}
  .give div:hover{transform:translateX(var(--sp-4))}

  .polaroid:hover{transform:rotate(0) translateY(calc(var(--sp-4) * -1));box-shadow:var(--sh-photo-lift)}
  .polaroid:hover .tape{transform:rotate(-7deg) translateY(var(--sp-1))}

  .faq summary:hover{padding-left:var(--sp-4)}
  .faq summary:hover::after{transform:scale(1.25)}
  .faq details[open]:not(.closing) summary:hover::after{transform:rotate(45deg) scale(1.25)}

  .ft-cols a:hover,.ft-bottom a:not(.logo):hover{opacity:1}
  .ft-bottom a:hover .up{transform:translateY(calc(var(--sp-2) * -1))}
}
.btn:active{transform:translateY(0) scale(.98)}

/* ===== Handy: eigene Reihenfolge und Dichte, kein verkleinerter Desktop ===== */
@media (max-width:720px){
  section{padding-block:var(--sp-11)}
  h1{font-size:var(--fs-hero-sm);line-height:1}
  .d-only{display:none}
  .hero{padding-top:var(--sp-8);padding-bottom:var(--sp-4)}
  .hero-grid{gap:var(--sp-7)}
  .status{margin-bottom:var(--sp-5)}
  .hero .lead{margin-top:var(--sp-5)}
  .hero-cta{margin-top:var(--sp-7)}
  .hero-cta .btn-primary{width:100%}
  .hero-cta .btn-text{margin-inline:auto}
  .stage{--pw:var(--w-phone-sm)}
  .head2{margin-bottom:var(--sp-8);gap:var(--sp-4)}
  .frame{padding-block:var(--sp-11)}
  .shared{margin-bottom:var(--sp-6)}
  .panel{gap:var(--sp-5);padding:var(--sp-7)}
  .vs{display:flex;justify-content:center}
  .vs span{padding:var(--sp-2) var(--sp-6);border-radius:var(--r-full);border:1.5px dashed var(--line);font-size:var(--fs-site-sm);color:var(--soft)}
  .step{grid-template-columns:var(--sp-10) 1fr;gap:var(--sp-2) var(--sp-5);padding-block:var(--sp-7)}
  .step::before{grid-row:1 / span 2;font-size:var(--fs-display)}
  .step h3,.step p{grid-column:2}
  .give{margin-top:var(--sp-7)}
  .give div{padding-block:var(--sp-5)}
  .partner-grid{gap:var(--sp-9)}
  .form{padding:var(--sp-7)}
  .cap{padding:var(--sp-7) var(--sp-3) 0;gap:var(--sp-6)}
  .names{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .names b{font-size:var(--fs-title)}
  .names span{font-size:var(--fs-body);display:block;line-height:var(--lh-heading);margin-top:var(--sp-1)}
  .ft{min-height:0}
  .ft-top{gap:var(--sp-9)}
  .ft-bottom{gap:var(--sp-4) var(--sp-7)}
  .ft-bottom .logo{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .phone,.frame{animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}