/* =========================================================================
   Sallox · Scribe — Launch-Seite
   Farben und Maße stammen direkt aus den Velox-UI-Tokens der App
   (VeloxUI/Sources/VeloxUI/Tokens.swift), damit Seite und Programm
   dieselbe Identität haben. Alle Farbtöne laufen über die Variablen unten
   (…-rgb für halbtransparente Flächen).
   ========================================================================= */

:root{
  /* Grund */
  --bg:            #0F1117;   /* VeloxColor.windowBackground */
  --bg-rgb:        15,17,23;
  --bg-content:    #161826;   /* VeloxColor.contentBackground */
  --bg-content-rgb:22,24,38;
  --surface:       #232532;   /* VeloxColor.surface */
  --surface-rgb:   35,37,50;
  --surface-hi:    #2A2C3B;

  /* Text (--text-3 etwas heller als in der App: WCAG AA auf --surface) */
  --text:          #E9E9ED;
  --text-2:        rgba(233,233,237,.70);
  --text-3:        rgba(233,233,237,.62);

  /* Marken */
  --accent:        #147DBA;   /* VeloxTool.scribe */
  --accent-rgb:    20,125,186;
  --accent-hi:     #57B6E6;   /* accent.lightened(0.55) – Text auf Tönung */
  --accent-hi-rgb: 87,182,230;
  --indigo:        #462783;   /* VeloxColor.indigo */
  --indigo-rgb:    70,39,131;
  --signal:        #C4271C;   /* VeloxColor.signal */

  /* Linien */
  --line:          rgba(233,233,237,.16);
  --hairline:      rgba(233,233,237,.10);
  --inner:         rgba(233,233,237,.08);
  --hover:         rgba(233,233,237,.06);

  /* Radien */
  --r-row: 8px; --r-layer: 12px; --r-hud: 14px; --r-pill: 18px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --nav-h: 56px;
  --max: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Inter, system-ui, sans-serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.032em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
svg{ display:block; }

/* ------------------------- Barrierefreiheit ---------------------------
   Sprunglink: erstes fokussierbares Element, per Tab sichtbar.
   Fokus-Ringe: Tastaturbedienung muss den Fokus immer zeigen.          */
.skip{
  position:fixed; top:10px; left:12px; z-index:300;
  padding:11px 18px; border-radius:980px;
  background:var(--accent-hi); color:#08111A;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.6);
  transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip:focus{ transform:translateY(0); }

:focus-visible{
  outline:3px solid var(--accent-hi);
  outline-offset:3px;
}
main[tabindex="-1"]:focus{ outline:none; }

::selection{ background:rgba(var(--accent-rgb),.5); color:#fff; }

/* ---------- Hintergrund-Grün (aus veloxWindowBackground abgeleitet) ------ */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.ambient__glow{
  position:absolute; border-radius:50%; filter:blur(90px);
  will-change:transform;
}
.ambient__glow--accent{
  top:-320px; left:-240px; width:900px; height:760px;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.30), transparent 68%);
}
.ambient__glow--indigo{
  top:-380px; right:-260px; width:820px; height:720px;
  background:radial-gradient(circle, rgba(var(--indigo-rgb),.42), transparent 68%);
}

main{ position:relative; z-index:1; }

.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto; padding-inline:24px;
}
.wrap--wide{ max-width:1240px; }
.wrap--narrow{ max-width:820px; }

/* =========================== TYPOGRAFIE =============================== */
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent-hi);
  margin-bottom:18px;
}

h1{
  font-size:clamp(2.9rem, 7.6vw, 6rem);
  line-height:1.02; letter-spacing:-.04em; font-weight:600;
}
h2{
  font-size:clamp(2.1rem, 5.2vw, 3.9rem);
  line-height:1.06; letter-spacing:-.035em;
}
h3{ font-size:1.28rem; line-height:1.25; letter-spacing:-.02em; }

.grad{
  background:linear-gradient(96deg, var(--accent-hi) 0%, var(--accent) 46%, #8E7BE8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:230% 100%;
  animation:gradShift 11s ease-in-out infinite alternate;
}
@keyframes gradShift{
  from{ background-position:0% 50%; }
  to{ background-position:100% 50%; }
}

/* Titel-Animation: Die zweite Zeile wird von links nach rechts aufgedeckt,
   ein Cursor läuft mit — dieselbe Bewegung wie beim Transkribieren.
   Auf dem Clip liegt die Animation, nicht auf einzelnen Wörtern: sonst
   würde background-clip:text auf den Kindern nicht mehr greifen. */
.grad-line{ position:relative; display:inline-block; }
.h1-type{ display:inline-block; }
.js .h1-type{
  clip-path:inset(0 100% -.35em 0);
  animation:wipeIn .95s cubic-bezier(.2,.8,.2,1) .85s forwards;
}
@keyframes wipeIn{ to{ clip-path:inset(0 0 -.35em 0); } }

.caret{ display:none; }
.js .caret{
  display:block; position:absolute; left:0; top:.16em;
  width:.07em; height:.72em; border-radius:2px;
  background:var(--accent-hi);
  opacity:0;
  animation:
    caretGo .95s cubic-bezier(.2,.8,.2,1) .85s forwards,
    caretBlink .55s steps(1) 1.95s 5 forwards;
}
@keyframes caretGo{
  from{ left:0; opacity:1; }
  to{ left:100%; opacity:1; }
}
@keyframes caretBlink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

.lede{
  max-width:640px; margin-top:26px;
  font-size:clamp(1.05rem, 1.7vw, 1.32rem);
  line-height:1.5; color:var(--text-2); letter-spacing:-.015em;
}
.lede--left{ max-width:560px; }

/* ============================ BUTTONS ================================= */
.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--btn-bg); border:1px solid transparent;
  border-radius:980px; font-size:15px; font-weight:600; letter-spacing:-.015em;
  padding:13px 24px; cursor:pointer;
  transition:transform .32s var(--ease), background .32s var(--ease),
             box-shadow .32s var(--ease), border-color .32s var(--ease),
             filter .32s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* --btn-bg absichtlich etwas dunkler als --accent: Weiß-auf-Blau erfüllt damit
   WCAG AA (≥ 4.5:1) auch in normaler Textgröße, auch im Hover-Zustand. */
.btn--primary{
  --btn-bg:#1173A8; color:#fff;
  box-shadow:0 6px 24px -8px rgba(var(--accent-rgb),.75), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.09);
  box-shadow:0 14px 34px -10px rgba(var(--accent-rgb),.85), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--ghost{
  --btn-bg:rgba(233,233,237,.07);
  border-color:var(--line); color:var(--text);
}
.btn--ghost:hover{
  transform:translateY(-2px);
  --btn-bg:rgba(233,233,237,.12);
  border-color:rgba(233,233,237,.28);
}
.btn--lg{ padding:15px 28px; font-size:16px; }
.btn--sm{ padding:8px 17px; font-size:14px; }

/* Deaktivierter Button – z. B. der Download, solange die Datei fehlt */
button.btn{ font-family:inherit; }
.btn:disabled,
.btn:disabled:hover{
  --btn-bg:rgba(233,233,237,.10);
  border-color:var(--line);
  color:var(--text-2);
  box-shadow:none;
  filter:none;
  transform:none;
  cursor:not-allowed;
  opacity:.82;
}

/* ============================== NAV =================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--nav-h);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(var(--bg-rgb),.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom-color:var(--hairline);
}
.nav__inner{
  max-width:1240px; height:100%; margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brandmark{
  display:flex; align-items:center; gap:9px;
  font-size:16.5px; font-weight:600; letter-spacing:-.02em;
}
.brandmark img{ border-radius:8px; }
.brandmark span{ white-space:nowrap; }

.nav__links{ display:flex; gap:30px; }
.nav__links a{
  font-size:14.5px; color:var(--text-2); letter-spacing:-.01em;
  transition:color .25s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a.is-here{ color:var(--accent-hi); }

/* --------------------------- SPRACHE (i18n) ---------------------------
   Sprachumschaltung: ein natives <select> direkt in der Nav, von i18n.js
   eingefügt. Bei ≤900px wandert es in die scrollbare Linkzeile, damit die
   Nav keine zusätzliche Höhe bekommt.                              */
.langpick{
  flex:0 0 auto; align-self:center;
  appearance:none; -webkit-appearance:none;
  font-family:var(--font); font-size:13px; font-weight:500; line-height:1;
  letter-spacing:.02em; color:var(--text-2);
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A93A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
  border:1px solid var(--hairline); border-radius:999px;
  padding:7px 26px 7px 12px;
  cursor:pointer; color-scheme:dark;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.langpick:hover{ color:var(--text); border-color:var(--line); }
.langpick option{ background-color:var(--bg); color:var(--text); }
.nav__end{ display:flex; align-items:center; gap:12px; }

/* Fremdsprache im Laden: verhindert einen kurzen deutschen Blitz, bis
   i18n.js gegriffen hat. Die Ausfallsicherung im Kopf der Seite hebt das
   nach spätestens 4 Sekunden wieder auf. */
html.i18n-pending body{ visibility:hidden; }

/* Ankersprünge dürfen nicht unter der Nav landen */
section[id]{ scroll-margin-top:calc(var(--nav-h) + 20px); }

/* ============================== HERO ================================== */
.hero{
  position:relative;
  padding-top:clamp(130px, 17vh, 190px);
  padding-bottom:clamp(70px, 9vh, 120px);
  text-align:center;
}
.hero__copy{ position:relative; z-index:3; }
.hero .lede{ margin-inline:auto; }

.hero__cta{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top:38px;
}
.hero__meta{
  margin-top:22px; font-size:13.5px; color:var(--text-3); letter-spacing:-.005em;
}

.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid var(--line);
  border-radius:14px; display:flex; justify-content:center; padding-top:7px;
  opacity:.75; z-index:3;
}
.scroll-hint span{
  width:3px; height:7px; border-radius:2px; background:var(--accent-hi);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{ transform:translateY(0); opacity:0; }
  25%{ opacity:1; }
  70%{ transform:translateY(13px); opacity:0; }
  100%{ transform:translateY(13px); opacity:0; }
}

/* --------- Hero: ein App-Fenster statt schwebender Karten --------- */
.hero__stage{
  position:relative; z-index:2;
  margin-top:clamp(44px, 6vw, 74px);
  padding-inline:24px;
}
.win{
  max-width:1140px; margin-inline:auto;
  text-align:left;
  background:linear-gradient(180deg, rgba(var(--surface-rgb),.94), rgba(var(--bg-content-rgb),.94));
  border:1px solid var(--inner);
  border-radius:calc(var(--r-layer) + 4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 46px 92px -42px rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  overflow:hidden;
  animation:winFloat 12s ease-in-out infinite;
}
@keyframes winFloat{ 50%{ transform:translateY(-9px); } }

.win__bar{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:14px; padding:13px 18px;
  background:rgba(233,233,237,.03);
  border-bottom:1px solid var(--hairline);
}
.win__bar .lights{ display:flex; gap:7px; }
.win__bar .cluster{ margin-left:0; justify-content:flex-end; }
.win__title{
  font-size:13px; font-weight:500; color:var(--text-3);
  text-align:center; letter-spacing:-.005em;
}

.win__body{
  display:grid; grid-template-columns:1.02fr 1.34fr 1.12fr;
}
.win__col{
  min-width:0; padding:20px;
  display:flex; flex-direction:column; gap:16px;
  border-left:1px solid var(--hairline);
}
.win__col:first-child{ border-left:0; }
.win__head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.win__col .wave{ height:104px; }
.win__col .typed{ min-height:168px; }
.win__col .card__foot{ margin-top:auto; }
.win__col .out{ margin-top:auto; }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 11px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; letter-spacing:-.005em;
  background:rgba(233,233,237,.08); color:var(--text-2);
  border:1px solid var(--hairline);
}
.chip--live{ background:rgba(196,39,28,.16); border-color:rgba(196,39,28,.5); color:#F2A69F; }
.chip--accent{ background:rgba(var(--accent-rgb),.20); border-color:rgba(var(--accent-rgb),.55); color:var(--accent-hi); }
.chip--ghost{ color:var(--text-3); }
.chip--mode{ background:rgba(var(--indigo-rgb),.28); border-color:rgba(139,116,224,.45); color:#C3B6F5; }

.dot{
  width:7px; height:7px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 rgba(196,39,28,.7);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(196,39,28,.6); }
  70%{ box-shadow:0 0 0 8px rgba(196,39,28,0); }
  100%{ box-shadow:0 0 0 0 rgba(196,39,28,0); }
}

.card__foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:16px;
}
.timer{
  font-size:24px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stop{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--text-2);
}
.stop i{
  width:12px; height:12px; border-radius:3px; background:var(--signal);
  display:inline-block;
}

/* Waveform */
.wave{
  display:flex; align-items:center; gap:3px; height:76px;
  overflow:hidden;
}
.wave i{
  flex:1 0 3px; min-width:3px; max-width:5px;
  border-radius:3px;
  background:linear-gradient(180deg, var(--accent-hi), var(--accent));
  height:20%;
  transform-origin:center;
  animation:bar 1.15s ease-in-out infinite alternate;
  opacity:.9;
}
.wave i.is-quiet{ background:rgba(233,233,237,.24); }
@keyframes bar{ from{ height:14%; } to{ height:var(--h, 80%); } }

.wave--app{ height:64px; gap:4px; }

/* Transkript tippen */
.typed{ display:flex; flex-direction:column; gap:11px; min-height:132px; }
.typed__line{
  font-size:15.5px; line-height:1.5; color:var(--text-2);
  letter-spacing:-.012em; min-height:1.5em;
}
.typed__line::after{
  content:""; display:inline-block; width:2px; height:1em;
  background:var(--accent-hi); margin-left:3px; vertical-align:-2px;
  opacity:0;
}
.typed__line.is-typing::after{ opacity:1; animation:caret .85s steps(1) infinite; }
.typed__line.is-done::after{ display:none; }
@keyframes caret{ 50%{ opacity:0; } }

/* Ergebnis-Card */
.out{ display:flex; flex-direction:column; gap:9px; }
.out__row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 12px; border-radius:var(--r-row);
  background:rgba(233,233,237,.05); border:1px solid var(--hairline);
  font-size:14px;
  opacity:0; transform:translateY(10px);
  animation:rowIn .7s var(--ease) forwards;
}
.out__row:nth-child(1){ animation-delay:.15s; }
.out__row:nth-child(2){ animation-delay:.42s; }
.out__row:nth-child(3){ animation-delay:.69s; }
@keyframes rowIn{ to{ opacity:1; transform:none; } }
.out__row b{ font-weight:600; font-size:12.5px; color:var(--accent-hi);
  text-transform:uppercase; letter-spacing:.06em; }
.out__row span{ color:var(--text-2); text-align:right; }

/* ============================== STRIP ================================= */
.strip{
  position:relative; z-index:1;
  border-block:1px solid var(--hairline);
  background:rgba(var(--bg-content-rgb),.5);
  overflow:hidden;
  padding:17px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:marquee 42s linear infinite;
}
.strip__track span{
  font-size:14px; font-weight:500; color:var(--text-3);
  letter-spacing:-.01em; white-space:nowrap;
}
.strip__track i{
  width:5px; height:5px; border-radius:50%; background:var(--accent);
  opacity:.55; flex:none;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================== WARUM ================================= */
.why{
  padding-top:clamp(90px, 13vh, 150px);
  text-align:center;
}
.why .lede{ margin-inline:auto; max-width:720px; }

.why__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  margin-top:clamp(46px, 6vw, 74px); text-align:left;
}
.pain{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--surface-rgb),.7), rgba(var(--bg-content-rgb),.7));
  border:1px solid var(--inner);
  border-radius:var(--r-layer);
  padding:26px 26px 30px;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transition:transform .55s var(--ease), border-color .55s var(--ease),
             box-shadow .55s var(--ease);
}
.pain::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.9), transparent);
  opacity:.55;
}
.pain:hover{
  transform:translateY(-5px);
  border-color:rgba(var(--accent-rgb),.4);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
}
.pain__statt{
  font-size:15px; color:var(--text-3); letter-spacing:-.01em;
  /* Gleiche Höhe in allen drei Kacheln, damit die Pfeile auf einer Linie sitzen */
  min-height:3em;
  display:flex; align-items:flex-start;
}
.pain__statt s{
  text-decoration-thickness:1px;
  text-decoration-color:rgba(196,39,28,.75);
}
.pain__arrow{
  display:grid; place-items:center;
  width:32px; height:32px; margin:16px 0 14px;
  border-radius:50%;
  background:rgba(var(--accent-rgb),.16);
  border:1px solid rgba(var(--accent-rgb),.42);
  color:var(--accent-hi);
}
.pain__arrow svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.pain h3{
  font-size:1.22rem; line-height:1.24; letter-spacing:-.024em;
}
.pain p{
  margin-top:12px; font-size:15.5px; line-height:1.55; color:var(--text-2);
  letter-spacing:-.01em;
}

/* Einsatzbereiche */
.uses{ margin-top:clamp(52px, 7vw, 84px); text-align:left; }
.uses__label{
  font-size:13px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3);
  padding-bottom:16px; border-bottom:1px solid var(--hairline);
}
.uses__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:20px;
}
.use{
  padding:20px 22px 22px;
  border:1px solid var(--inner); border-radius:var(--r-layer);
  background:rgba(233,233,237,.035);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             transform .4s var(--ease);
}
.use:hover{
  background:rgba(var(--accent-rgb),.10);
  border-color:rgba(var(--accent-rgb),.34);
  transform:translateY(-3px);
}
.use h4{
  margin:0; font-size:16.5px; font-weight:600; letter-spacing:-.018em;
}
.use p{
  margin-top:7px; font-size:14.5px; line-height:1.5; color:var(--text-2);
  letter-spacing:-.01em;
}

/* ============================== AUSSAGE =============================== */
.statement{
  padding:clamp(96px, 15vh, 180px) 0;
  text-align:center;
  position:relative;
}
.statement::before{
  content:""; position:absolute; inset:auto 0 0 0; top:0;
  background:radial-gradient(60% 90% at 50% 50%, rgba(var(--indigo-rgb),.30), transparent 72%);
  pointer-events:none;
}
.statement .wrap{ position:relative; }
.statement__text{
  font-size:clamp(2rem, 5.4vw, 4.1rem);
  font-weight:600; line-height:1.08; letter-spacing:-.038em;
  margin:0;
}
.statement__sub{
  margin:26px auto 0; max-width:560px;
  font-size:clamp(1rem, 1.6vw, 1.22rem);
  line-height:1.5; color:var(--text-2); letter-spacing:-.014em;
}

/* ====================== FUNKTIONEN / BENTO ============================ */
.fn{ padding-top:clamp(90px, 13vh, 150px); }

.bento-track{
  position:relative;
  height:calc(6 * 58vh + 100vh);
  margin-top:clamp(46px, 6vw, 76px);
}
.bento-sticky{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center;
}
.bento{
  display:flex; flex-direction:column; gap:18px;
  /* Feste Höhe, damit die beiden Reihen beim Wachsen/Schrumpfen
     tatsächlich Platz austauschen können. */
  height:min(76vh, 700px);
}
.bento__row{
  display:flex; gap:18px; align-items:stretch;
  /* Die Reihe mit der aktiven Kachel wird höher, die andere weicht zurück —
     sonst passt der ausführliche Text der großen Kachel nicht in die Reihe. */
  flex-grow:1;
  min-height:0;
  transition:flex-grow .85s var(--ease);
}
.bento__row.is-tall{ flex-grow:1.55; }

.tile{
  flex:1 1 0; min-width:0;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--surface-rgb),.72), rgba(var(--bg-content-rgb),.72));
  border:1px solid var(--inner);
  border-radius:var(--r-layer);
  padding:22px 24px 20px;
  display:flex; flex-direction:column;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transition:flex-grow .85s var(--ease),
             background .6s var(--ease),
             border-color .6s var(--ease),
             opacity .6s var(--ease),
             transform .85s var(--ease),
             box-shadow .6s var(--ease);
  flex-grow:1;
}
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%, rgba(var(--accent-rgb),.20), transparent 62%);
  opacity:0; transition:opacity .6s var(--ease);
}

.tile__icon{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:11px;
  background:rgba(var(--accent-rgb),.14);
  border:1px solid rgba(var(--accent-rgb),.36);
  color:var(--accent-hi);
  margin-bottom:13px;
  transition:transform .7s var(--ease), background .5s var(--ease);
}
.tile__icon svg{
  width:21px; height:21px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.tile h3{
  font-size:1.14rem; transition:font-size .7s var(--ease), color .5s var(--ease);
}
.tile p{
  margin-top:10px; font-size:14.5px; line-height:1.48; color:var(--text-2);
  letter-spacing:-.012em;
  opacity:.62;
  max-width:46ch;
  transition:opacity .55s var(--ease), max-height .7s var(--ease),
             margin-top .55s var(--ease), transform .7s var(--ease);
  overflow:hidden;
}
.tile__meta{
  margin-top:auto; padding-top:13px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:var(--accent-hi);
  opacity:.55;
  transition:opacity .5s var(--ease);
}

/* Aktive Kachel wächst, die anderen weichen zurück */
.tile.is-active{ flex-grow:2.9; transform:none; }
.tile.is-active::after{ opacity:1; }
.tile.is-active .tile__icon{ transform:scale(1.12); background:rgba(var(--accent-rgb),.24); }
.tile.is-active h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); color:#fff; }
.tile.is-active p{ opacity:1; }
.tile.is-active .tile__meta{ opacity:1; }

.tile.is-dim{
  flex-grow:.72;
  opacity:.5; transform:scale(.985);
}
.tile.is-dim p{ opacity:0; max-height:0; margin-top:0; }
.tile.is-dim .tile__meta{ opacity:0; }

.bento__progress{
  margin-top:22px; height:2px; width:100%;
  background:rgba(233,233,237,.10); border-radius:2px; overflow:hidden;
}
.bento__progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-hi));
  transition:width .25s linear;
}
.bento__count{
  margin-top:12px; font-size:12.5px; letter-spacing:.12em;
  color:var(--text-3); font-variant-numeric:tabular-nums;
}

/* ============================== ABLAUF ================================ */
.show{
  padding-top:clamp(90px, 13vh, 150px);
  padding-bottom:clamp(60px, 9vh, 110px);
}
.show__title{ margin-bottom:clamp(40px, 5vw, 64px); }
.show__caption{
  margin-top:18px; font-size:13.5px; color:var(--text-3);
  text-align:center; letter-spacing:-.005em;
}
.show__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:70px;
  align-items:start;
}
.show__visual{
  position:sticky; top:calc(var(--nav-h) + 44px);
  height:fit-content;
}
.show__steps{ padding-top:6px; }
.step{
  min-height:74vh; display:flex; flex-direction:column; justify-content:center;
  border-top:1px solid var(--hairline);
  opacity:.32; transform:translateY(8px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.step:first-of-type{ border-top:0; margin-top:34px; }
.step.is-current{ opacity:1; transform:none; }
.step__num{
  font-size:13px; font-weight:600; letter-spacing:.14em;
  color:var(--accent-hi); margin-bottom:16px;
}
.step h2{
  font-size:clamp(1.7rem, 3vw, 2.5rem); letter-spacing:-.03em; line-height:1.25;
}
.step p{
  margin-top:16px; font-size:17px; line-height:1.58;
  color:var(--text-2); max-width:44ch;
}

/* ---------- App-Fenster-Mockup ---------- */
.app{
  background:linear-gradient(180deg, #171A27, #101219);
  border:1px solid var(--inner);
  border-radius:16px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 50px 90px -40px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.4);
  transform:perspective(1600px) rotateX(1.4deg);
  transform-origin:center top;
}
.app__bar{
  display:flex; align-items:center; gap:16px;
  padding:11px 14px;
  background:rgba(var(--surface-rgb),.7);
  border-bottom:1px solid var(--hairline);
}
.tl{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.tl--r{ background:#FF5F57; } .tl--y{ background:#FEBC2E; } .tl--g{ background:#28C840; }

.cluster{ display:flex; gap:7px; margin-left:6px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 11px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:500;
  background:rgba(233,233,237,.07); color:var(--text-3);
  border:1px solid var(--hairline);
}
.pill--rec{
  background:rgba(var(--accent-rgb),.2); border-color:rgba(var(--accent-rgb),.45);
  color:var(--accent-hi);
}
.pill--rec .dot{ width:6px; height:6px; }

.app__body{
  display:grid; grid-template-columns:172px 1fr;
  min-height:430px;
}
.app__side{
  background:rgba(var(--bg-rgb),.72);
  border-right:1px solid var(--hairline);
  padding:15px 13px;
}
.app__brand{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; margin-bottom:18px; padding-left:3px;
}
.app__brand img{ border-radius:5px; }
.side__list{ display:flex; flex-direction:column; gap:2px; }
.side__list li{
  display:flex; align-items:center; gap:9px;
  height:32px; padding:0 9px; border-radius:var(--r-row);
  font-size:13px; color:var(--text-2);
}
.side__list li.is-active{
  background:rgba(var(--accent-rgb),.18);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.42);
}
.side__list em{
  margin-left:auto; font-style:normal; font-size:11.5px; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.side__list--dim li{ color:var(--text-3); }
.sq{ width:9px; height:9px; border-radius:3px; background:rgba(233,233,237,.28); flex:none; }
.sq--accent{ background:var(--accent-hi); }
.sq--indigo{ background:#8B74E0; }
.side__label{
  margin:20px 0 8px; padding-left:9px;
  font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3);
}

.app__main{ padding:16px; display:flex; flex-direction:column; gap:13px; }

.pane{
  background:linear-gradient(180deg, rgba(var(--surface-rgb),.78), rgba(var(--bg-content-rgb),.78));
  border:1px solid var(--hairline);
  border-radius:var(--r-layer);
  padding:15px;
}
.pane--rec{ background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), rgba(var(--surface-rgb),.7));
  border-color:rgba(var(--accent-rgb),.3); }
.pane__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pane__head--sm{ margin-bottom:12px; }
.pane__title{ font-size:14.5px; font-weight:600; letter-spacing:-.015em; }
.pane__sub{ font-size:12px; color:var(--text-3); margin-top:2px; }

.pane--text{ display:flex; flex-direction:column; gap:10px; padding:14px 15px; }
.line{
  font-size:14.5px; line-height:1.45; color:var(--text-2);
  letter-spacing:-.012em;
  display:flex; gap:10px; align-items:flex-start;
}
.line .who{
  flex:none; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-3);
  background:rgba(233,233,237,.07); border:1px solid var(--hairline);
  border-radius:6px; padding:2px 6px; margin-top:2px;
}
.line--live{ color:var(--text); }
.line--live .who{ color:var(--accent-hi); background:rgba(var(--accent-rgb),.18);
  border-color:rgba(var(--accent-rgb),.4); }

.pane--out .blocks{ display:flex; flex-direction:column; gap:8px; }
.block{
  height:9px; border-radius:5px;
  background:linear-gradient(90deg, rgba(233,233,237,.24), rgba(233,233,237,.10));
  width:82%;
}
.block--wide{ width:100%; }
.block--mid{ width:64%; }
.block--short{ width:41%; }

.mindmap{ position:relative; margin-top:15px; height:118px; }
.mindmap svg{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:rgba(var(--accent-rgb),.55); stroke-width:1.4;
}
.node{
  position:absolute; z-index:1;
  font-size:11.5px; font-weight:600; padding:5px 11px;
  border-radius:var(--r-pill);
  background:rgba(var(--surface-rgb),.95); border:1px solid rgba(var(--accent-rgb),.45);
  color:var(--text-2); white-space:nowrap;
}
.node--root{
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:#1173A8; color:#fff; border-color:transparent; /* AA-Kontrast für weiße Schrift */
  box-shadow:0 8px 22px -8px rgba(var(--accent-rgb),.9);
}
.node--a{ left:6%; top:6%; }
.node--b{ left:4%; bottom:6%; }
.node--c{ right:6%; top:44%; }

/* Zustandssteuerung: je weiter man scrollt, desto mehr erscheint */
.pane--text, .pane--out{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.app[data-state="2"] .pane--text,
.app[data-state="3"] .pane--text{ opacity:1; transform:none; }
.app[data-state="3"] .pane--out{ opacity:1; transform:none; transition-delay:.12s; }

/* ========================== PRIVATSPHÄRE ============================== */
.priv{
  padding-top:clamp(90px, 13vh, 150px);
  text-align:center;
}
.priv .lede{ margin-inline:auto; }
.priv__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  margin-top:clamp(46px, 6vw, 72px); text-align:left;
}
.pcard{
  background:linear-gradient(180deg, rgba(var(--surface-rgb),.7), rgba(var(--bg-content-rgb),.7));
  border:1px solid var(--inner);
  border-radius:var(--r-layer);
  padding:28px 26px 30px;
  position:relative; overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.pcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.85), transparent);
  opacity:.6;
}
.pcard:hover{ transform:translateY(-4px); border-color:rgba(var(--accent-rgb),.35); }
.pcard__num{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--accent-hi); opacity:.8;
}
.pcard h2{ margin-top:14px; font-size:1.2rem; line-height:1.3; }
.pcard p{ margin-top:12px; font-size:15.5px; line-height:1.55; color:var(--text-2); }

/* ======================== TECHNISCHE DATEN ============================ */
.specs{ padding-top:clamp(90px, 13vh, 150px); }
.specs__title{
  font-size:clamp(1.5rem, 2.6vw, 2rem); text-align:center; margin-bottom:34px;
}
.specs__list{
  margin:0;
  border-top:1px solid var(--line);
  max-width:880px; margin-inline:auto;
}
.specs__list > div{
  display:grid; grid-template-columns:200px 1fr; gap:24px;
  padding:17px 4px;
  border-bottom:1px solid var(--hairline);
  transition:background .3s var(--ease);
}
.specs__list > div:hover{ background:var(--hover); }
.specs__list dt{
  font-size:15px; color:var(--text-3); font-weight:500;
}
.specs__list dd{
  margin:0; font-size:15.5px; color:var(--text); letter-spacing:-.01em;
}

/* ============================== FAQ =================================== */
.faq{ padding-top:clamp(90px, 13vh, 150px); text-align:center; }
.faq h2{ margin-bottom:36px; }
.acc{ text-align:left; border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--hairline); }
.acc summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px;
  font-size:17.5px; font-weight:500; letter-spacing:-.017em;
  transition:color .3s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--accent-hi); }
.acc__sign{
  position:relative; width:16px; height:16px; flex:none;
}
.acc__sign::before, .acc__sign::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.6px;
  background:currentColor; transform:translateY(-50%);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.acc__sign::after{ transform:translateY(-50%) rotate(90deg); }
.acc details[open] .acc__sign::after{ transform:translateY(-50%) rotate(0deg); opacity:0; }
.acc__body{
  overflow:hidden;
  padding:0 4px;
}
.acc__body p{
  padding-bottom:24px; max-width:66ch;
  font-size:16.5px; line-height:1.6; color:var(--text-2);
}
.acc details[open] .acc__body{ animation:accOpen .45s var(--ease); }
@keyframes accOpen{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:none; }
}

/* ============================== CTA =================================== */
.cta{
  margin-top:clamp(90px, 13vh, 150px);
  padding:clamp(70px, 10vh, 120px) 0 clamp(80px, 11vh, 130px);
  text-align:center;
  position:relative;
  border-top:1px solid var(--hairline);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(var(--accent-rgb),.18), transparent 70%),
    linear-gradient(180deg, rgba(var(--bg-content-rgb),.6), transparent);
}
.cta__icon{
  margin:0 auto 28px;
  border-radius:22px;
  box-shadow:0 22px 50px -20px rgba(var(--accent-rgb),.75);
}
.cta .lede{ margin-inline:auto; }
.cta__buttons{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px;
}
.cta__meta{ margin-top:22px; font-size:13.5px; color:var(--text-3); }

/* ============================= FOOTER ================================= */
.foot{
  position:relative; z-index:1;
  border-top:1px solid var(--hairline);
  padding:36px 0 46px;
  background:rgba(var(--bg-rgb),.6);
}
.foot__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
}
.foot__brand{ display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:600; }
.foot__brand img{ border-radius:6px; }
.foot__about{ flex:1 1 100%; max-width:560px; font-size:14.5px; line-height:1.55; color:var(--text-2); }
.foot__links{ display:flex; gap:24px; flex-wrap:wrap; }
.foot__links a{ font-size:14px; color:var(--text-2); transition:color .25s var(--ease); }
.foot__links a:hover{ color:var(--text); }
.foot__legal{ font-size:13.5px; color:var(--text-3); }
.foot__legal a{ color:var(--text-3); border-bottom:1px solid transparent; }
.foot__legal a:hover{ color:var(--text-2); border-bottom-color:var(--line); }

/* ========================= UNTERSEITEN ================================ */
.phead{
  text-align:center;
  padding-top:calc(var(--nav-h) + clamp(52px, 8vh, 96px));
  padding-bottom:clamp(20px, 3vh, 40px);
}
.phead h1{ font-size:clamp(2.5rem, 6vw, 4.6rem); }
.phead .lede{ margin-inline:auto; }

/* Rechtsseiten: nur außerhalb von Deutsch sichtbar — die deutsche Fassung
   bleibt maßgeblich (in Deutsch wird der Hinweis gar nicht angezeigt). */
.langnote{
  display:none;
  max-width:640px; margin:24px auto 0; text-align:left;
  font-size:14.5px; line-height:1.6; color:var(--text-2);
}
html[lang]:not([lang="de"]) .langnote{
  display:block;
  padding:13px 17px;
  border:1px solid var(--hairline); border-radius:var(--r-row);
}

.psec{ padding-top:clamp(56px, 9vh, 110px); text-align:left; }
.psec--tight{ padding-top:clamp(30px, 5vh, 56px); }

/* Funktions-Karten */
.featgrid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
  margin-top:clamp(34px, 4vw, 52px);
}
.feat{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--surface-rgb),.7), rgba(var(--bg-content-rgb),.7));
  border:1px solid var(--inner); border-radius:var(--r-layer);
  padding:26px 26px 30px;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  transition:transform .5s var(--ease), border-color .5s var(--ease),
             box-shadow .5s var(--ease);
}
.feat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.9), transparent);
  opacity:.55;
}
.feat:hover{
  transform:translateY(-5px);
  border-color:rgba(var(--accent-rgb),.4);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
}
.feat__icon{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:11px;
  background:rgba(var(--accent-rgb),.14);
  border:1px solid rgba(var(--accent-rgb),.36);
  color:var(--accent-hi);
  margin-bottom:16px;
}
.feat__icon svg{
  width:21px; height:21px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.feat h3{ font-size:1.2rem; }
.feat p{ margin-top:11px; font-size:15.5px; line-height:1.56; color:var(--text-2);
  letter-spacing:-.01em; }

/* Download-Karte */
.dlcard{
  display:flex; gap:clamp(20px, 3vw, 34px); align-items:flex-start;
  text-align:left;
  background:linear-gradient(180deg, rgba(var(--surface-rgb),.8), rgba(var(--bg-content-rgb),.8));
  border:1px solid var(--inner); border-radius:var(--r-hud);
  padding:clamp(26px, 4vw, 44px);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
             0 44px 90px -50px rgba(0,0,0,.95);
}
.dlcard__icon{ flex:none; border-radius:20px;
  box-shadow:0 20px 44px -20px rgba(var(--accent-rgb),.8); }
.dlcard__body{ flex:1; min-width:0; }
.dlcard__name{ font-size:clamp(1.25rem, 2.4vw, 1.6rem); font-weight:600;
  letter-spacing:-.026em; }
.dlcard__ver{ margin-top:7px; font-size:14.5px; color:var(--text-3); }
.dlcard__req{ margin-top:22px; display:grid; gap:9px; }
.dlcard__req li{ position:relative; padding-left:25px;
  font-size:15.5px; color:var(--text-2); letter-spacing:-.01em; }
.dlcard__req li::before{
  content:""; position:absolute; left:3px; top:.52em;
  width:8px; height:8px; border-radius:50%; background:var(--accent-hi);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);
}
.dlcard .btn{ margin-top:28px; }
.dlcard__meta{ margin-top:15px; font-size:13.5px; color:var(--text-3); }

/* Installationsschritte */
.ministeps{
  list-style:none; margin:clamp(34px, 4vw, 52px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.ministep{ border-top:1px solid var(--line); padding-top:22px; }
.ministep__num{ font-size:13px; font-weight:600; letter-spacing:.14em;
  color:var(--accent-hi); }
.ministep h3{ margin-top:15px; font-size:1.2rem; }
.ministep p{ margin-top:11px; font-size:15.5px; line-height:1.56;
  color:var(--text-2); letter-spacing:-.01em; }

/* Hinweis-Kasten */
.note{
  margin-top:clamp(34px, 4vw, 52px);
  padding:20px 24px;
  background:rgba(var(--accent-rgb),.10);
  border:1px solid rgba(var(--accent-rgb),.34);
  border-radius:var(--r-layer);
}
.note p{ font-size:15.5px; line-height:1.62; color:var(--text-2); }
.note b{ color:var(--text); }

/* Fließtext für Datenschutz / Impressum */
.prose{ max-width:760px; margin-inline:auto; text-align:left; }
.prose h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); margin-top:46px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin-top:16px; font-size:16.5px; line-height:1.68; color:var(--text-2); }
.prose p b{ color:var(--text); font-weight:600; }
.prose ul{ margin-top:16px; }
.prose ul li{
  position:relative; padding-left:26px; margin-top:12px;
  font-size:16.5px; line-height:1.6; color:var(--text-2);
}
.prose ul li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--accent-hi);
}
.prose .link{ color:var(--accent-hi);
  border-bottom:1px solid rgba(var(--accent-hi-rgb),.42); }
.prose .link:hover{ border-bottom-color:var(--accent-hi); }

/* ====================== WARTELISTE & PREIS ============================ */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Early-Access-Hinweis über dem Preis */
.price{ margin:34px auto 0; max-width:640px; }
.price__early{
  display:inline-block; padding:9px 16px; border-radius:var(--r-pill);
  background:rgba(var(--accent-rgb),.16);
  border:1px solid rgba(var(--accent-rgb),.42);
  font-size:15px; line-height:1.45; color:var(--text); letter-spacing:-.01em;
}
.price__main{
  margin-top:18px; font-size:clamp(1.7rem, 4.2vw, 2.6rem);
  font-weight:600; letter-spacing:-.03em; line-height:1.15;
}

/* E-Mail-Feld + Button */
.wl{ margin:30px auto 0; max-width:560px; text-align:left; }
.wl__row{ display:flex; gap:10px; flex-wrap:wrap; }
.wl__input{
  flex:1 1 240px; min-width:0;
  font-family:var(--font); font-size:16px; letter-spacing:-.01em;
  padding:15px 20px; border-radius:980px;
  background:rgba(var(--bg-rgb),.7); color:var(--text);
  border:1px solid rgba(233,233,237,.32);
}
.wl__input::placeholder{ color:var(--text-3); }
.wl__input:focus-visible{ outline:3px solid var(--accent-hi); outline-offset:2px; }
.wl__row .btn{ flex:0 0 auto; }
.wl__hint{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--text-3); text-align:center; }
.wl__hint a{ border-bottom:1px solid var(--line); }
.wl__hint a:hover{ color:var(--text-2); }
.wl__status{ margin-top:10px; font-size:14px; line-height:1.5; color:var(--accent-hi); text-align:center; min-height:1.2em; }
.wl__alt{ display:flex; justify-content:center; margin-top:16px; }
.hero .wl{ margin-top:38px; }
.wl__status.is-error{ color:var(--text); }
.wl__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.wl.is-done .wl__row, .wl.is-done .wl__hint{ display:none; }
.hide-sm{ display:inline; }
.price--left{ margin:26px 0 0; max-width:none; text-align:left; }
.dlcard .wl{ margin:20px 0 0; max-width:none; }
.dlcard .wl__hint, .dlcard .wl__status{ text-align:left; }
.dlcard .wl__row .btn, .dlcard .wl__alt .btn{ margin-top:0; }
.wl__alt--left{ justify-content:flex-start; }
.note a{ color:var(--accent-hi); border-bottom:1px solid rgba(var(--accent-hi-rgb),.4); }

/* Beta-Anmeldung (download.html#beta): aufklappbar unter der Wartelisten-Karte */
.beta{ margin-top:16px; }
.beta > summary{ list-style:none; }
.beta > summary::-webkit-details-marker{ display:none; }
.dlcard .beta > summary{ margin-top:0; }
.beta[open] > summary{ border-color:rgba(var(--accent-hi-rgb),.55); }
.betaform{ margin:18px 0 0; max-width:none; padding-top:18px; border-top:1px solid var(--hairline); }
.betaform__fields{ display:grid; gap:14px; }
.betaform__intro{ font-size:15px; line-height:1.55; color:var(--text-2); }
.betaform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.betaform__field{ display:grid; gap:6px; min-width:0; }
.betaform__field label{ font-size:14px; font-weight:600; color:var(--text); letter-spacing:-.01em; }
.betaform__opt{ font-weight:400; color:var(--text-3); }
.betaform .wl__input{ width:100%; flex:none; padding:12px 16px; border-radius:var(--r-layer); }
.betaform select.wl__input{
  -webkit-appearance:none; appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E9E9ED' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
}
.betaform select.wl__input option, .betaform select.wl__input optgroup{ background:var(--surface); color:var(--text); }
.betaform textarea.wl__input{ resize:vertical; min-height:88px; line-height:1.45; }
.betaform__intel{
  display:none; padding:10px 14px; border-radius:var(--r-row);
  background:rgba(196,39,28,.14); border:1px solid rgba(196,39,28,.45);
  font-size:14px; line-height:1.5; color:var(--text);
}
.betaform:has(select[name="chip"] option[value="intel"]:checked) .betaform__intel{ display:block; }
.dlcard .betaform .btn{ margin-top:4px; justify-self:start; }
.betaform .wl__hint{ margin-top:0; }
.betaform.is-done .betaform__fields{ display:none; }
.betaform.is-done{ border-top:0; padding-top:0; }

/* ========================= REVEAL-ANIMATION =========================== */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal--delay-1{ transition-delay:.09s; }
.reveal--delay-2{ transition-delay:.18s; }
.reveal--delay-3{ transition-delay:.27s; }
.reveal--delay-4{ transition-delay:.36s; }

/* ============================ RESPONSIVE ============================== */
@media (max-width:1080px){
  .show__grid{ grid-template-columns:1fr; gap:44px; }
  .show__visual{ position:static; }
  .step{ min-height:auto; padding:40px 0; opacity:1; transform:none; }
  .priv__grid{ grid-template-columns:1fr; }
  .why__grid{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; }
  .uses__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:900px){
  /* Statt auszublenden: die Unterseiten-Links wandern in eine eigene Zeile,
     damit auch auf schmalen Bildschirmen erreichbar bleibt, was es gibt. */
  .nav__inner{ flex-wrap:wrap; gap:8px 16px; padding-top:11px; padding-bottom:9px; }
  .nav{ height:auto; min-height:var(--nav-h); }
  section[id]{ scroll-margin-top:118px; }
  .phead{ padding-top:calc(var(--nav-h) + 74px); }
  .featgrid{ grid-template-columns:1fr; }
  .ministeps{ grid-template-columns:1fr; gap:0; }
  .ministep{ padding-top:20px; padding-bottom:6px; }
  .dlcard{ flex-direction:column; align-items:stretch; }
  .dlcard__icon{ align-self:flex-start; }
  .nav__links{ order:3; width:100%; gap:20px; overflow-x:auto; scrollbar-width:none; }
  .nav__links::-webkit-scrollbar{ display:none; }
  .nav__links a{ white-space:nowrap; font-size:.82rem; }
  .brandmark{ margin-right:auto; }
  .hero{ padding-top:150px; }

  /* Auf zwei Zeilen umbrechende Headline: der mitlaufende Cursor würde daneben
     stehen — die Bewegung trägt hier der Wisch-Effekt allein. */
  .caret{ display:none !important; }

  /* Das Hero-Fenster stapelt sich: eine Spalte, feine Trennlinien statt
     Seitentrennern, ohne dass irgend etwas überlappt. */
  .win{ animation:none; }
  .win__body{ grid-template-columns:1fr; }
  .win__col{ border-left:0; border-top:1px solid var(--hairline); }
  .win__col:first-child{ border-top:0; }
  .win__col .typed{ min-height:0; }
  .win__col .wave{ height:84px; }

  /* Kacheln werden zum einfachen Stapel – kein Sticky, keine Skalierung.
     Wichtig: die feste Höhe entfällt, sonst laufen die gestapelten Kacheln
     aus dem Box heraus und liegen über den nächsten Abschnitten. */
  .bento-track{ height:auto; margin-top:36px; }
  .bento-sticky{ position:static; height:auto; display:block; }
  .bento{ height:auto; }
  .bento__row,
  .bento__row.is-tall{ flex:none; flex-direction:column; }
  .tile{ flex:none; opacity:1 !important; transform:none !important; }
  .tile p{ opacity:1 !important; max-height:none !important; margin-top:11px !important; }
  .tile__meta{ opacity:1 !important; }
  .tile h3{ font-size:1.2rem !important; }
  .bento__progress, .bento__count{ display:none; }

  .app__body{ grid-template-columns:1fr; min-height:0; }
  .app__side{ display:none; }
  .app{ transform:none; }

  .specs__list > div{ grid-template-columns:1fr; gap:4px; }
  .uses__grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .hide-sm{ display:none; }
  .nav__inner{ gap:8px 10px; padding-inline:16px; }
  .nav__end{ gap:8px; }
  .nav__end .btn--sm{ padding:8px 13px; font-size:13px; }
  .brandmark{ font-size:15px; gap:8px; }
  .wl__row .btn{ width:100%; justify-content:center; }
  .betaform__grid{ grid-template-columns:1fr; }
  .beta > summary, .dlcard .betaform .btn{ width:100%; justify-content:center; }
  h1{ letter-spacing:-.032em; }
  .hero{ padding-top:138px; }
  .hero__cta .btn{ width:100%; justify-content:center; }
  .cta__buttons .btn{ width:100%; justify-content:center; }
  .foot__inner{ flex-direction:column; align-items:flex-start; }
  .strip__track{ animation-duration:28s; }
}

/* ========================= REDUZIERTE BEWEGUNG ======================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .scroll-hint{ display:none; }
  .tile p, .tile .tile__meta{ opacity:1; max-height:none; }
  .pane--text, .pane--out{ opacity:1; transform:none; }
  /* Titel: animation-duration wird zurückgesetzt, die VERZÖGERUNG (.85s)
     aber nicht — ohne eigenes Regel bliebe die zweite Zeile die ganze Zeit
     unsichtbar. Also direkt auf den Endzustand setzen. */
  .js .h1-type{ animation:none !important; clip-path:none !important; }
  .js .caret{ animation:none !important; opacity:0 !important; }
  .grad{ animation:none !important; }
}