/* Smashq website. Tokens follow the app design system (docs/design-system, Concept B). */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/space-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/space-grotesk-700.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-sans-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/instrument-sans-600.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-600.woff2) format('woff2')}

/* ---------- tokens: light is the base, dark via media query, data-theme wins ---------- */
:root{
  --bg:oklch(97.2% 0.004 250);
  --raise:oklch(99.2% 0.002 250);
  --over:oklch(94.5% 0.005 250);
  --line:oklch(88% 0.006 250);
  --fg:oklch(24% 0.012 250);
  --mut:oklch(46% 0.01 250);
  --acc:oklch(55% 0.16 230);
  --acc10:oklch(55% 0.16 230 / 0.08);
  --glow:oklch(55% 0.16 230 / 0.1);
  --btnfg:oklch(99% 0.002 250);
  --ok:oklch(56% 0.13 155);
  --warn:oklch(62% 0.12 70);
  --err:oklch(55% 0.19 25);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:oklch(16% 0.01 250);
    --raise:oklch(19.5% 0.011 250);
    --over:oklch(23% 0.012 250);
    --line:oklch(29% 0.012 250);
    --fg:oklch(93% 0.005 250);
    --mut:oklch(63% 0.01 250);
    --acc:oklch(72% 0.14 230);
    --acc10:oklch(72% 0.14 230 / 0.1);
    --glow:oklch(72% 0.14 230 / 0.15);
    --btnfg:oklch(15% 0.02 250);
  }
}
:root[data-theme="dark"]{
  --bg:oklch(16% 0.01 250);
  --raise:oklch(19.5% 0.011 250);
  --over:oklch(23% 0.012 250);
  --line:oklch(29% 0.012 250);
  --fg:oklch(93% 0.005 250);
  --mut:oklch(63% 0.01 250);
  --acc:oklch(72% 0.14 230);
  --acc10:oklch(72% 0.14 230 / 0.1);
  --glow:oklch(72% 0.14 230 / 0.15);
  --btnfg:oklch(15% 0.02 250);
}
:root[data-theme="light"]{
  --bg:oklch(97.2% 0.004 250);
  --raise:oklch(99.2% 0.002 250);
  --over:oklch(94.5% 0.005 250);
  --line:oklch(88% 0.006 250);
  --fg:oklch(24% 0.012 250);
  --mut:oklch(46% 0.01 250);
  --acc:oklch(55% 0.16 230);
  --acc10:oklch(55% 0.16 230 / 0.08);
  --glow:oklch(55% 0.16 230 / 0.1);
  --btnfg:oklch(99% 0.002 250);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.in{max-width:1040px;margin:0 auto;padding:0 28px}
/* Die Story-Abschnitte brechen bewusst breiter aus als der Textrumpf: das
   App-Fenster ist informationsdicht und wird sonst unlesbar klein skaliert. */
.in-wide{max-width:1420px;margin:0 auto;padding:0 28px}
.in-bleed{max-width:1500px;margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:'Space Grotesk',sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:0.14em;font-size:12px;color:var(--mut);
}
.eyebrow .n{color:var(--acc)}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:26px;padding:16px 0;border-bottom:1px solid var(--line)}
.logo{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:15px;color:var(--fg)}
.logo .cur{color:var(--acc)}
.logo-word{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:0.02em;margin-left:8px;font-size:15px}
.nav .links{display:flex;gap:20px;font-size:13.5px;color:var(--mut);margin-left:8px}
.nav .links a:hover{color:var(--fg)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.theme-btn{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;background:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--mut);cursor:pointer;padding:0}
.theme-btn:hover{color:var(--fg);border-color:var(--mut)}
.theme-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="dark"] .icon-moon{display:none}
:root:not([data-theme="dark"]) .icon-sun{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .icon-moon{display:none}
  :root:not([data-theme="light"]) .icon-sun{display:inline}
}
.lang{font-family:'JetBrains Mono',monospace;font-size:11px;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex}
.lang b{padding:3px 8px;background:var(--over);color:var(--fg);font-weight:400}
.lang a{padding:3px 8px;color:var(--mut)}
.lang a:hover{color:var(--fg)}
.btn{background:var(--acc);color:var(--btnfg);border-radius:6px;padding:7px 14px;
  font-weight:600;font-size:13.5px;display:inline-block}
.btn:hover{opacity:0.9}
.btn-ghost{border:1px solid var(--line);border-radius:6px;padding:7px 14px;font-size:13.5px;color:var(--fg);display:inline-block}
.btn-ghost:hover{border-color:var(--mut)}

/* ---------- hero ---------- */
.hero{padding:80px 0 72px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(32px,5vw,54px);line-height:1.05;letter-spacing:-0.018em;
  margin:6px 0 4px;max-width:16ch;text-wrap:balance}
.hero p{color:var(--mut);font-size:clamp(15.5px,1.5vw,18px);max-width:56ch;margin:0}
.hero p b{color:var(--fg);font-weight:600}
.cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.meta{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--mut)}
.hero .meta{margin-top:2px}
/* Die Version kommt zur Laufzeit aus /releases/latest.json. Bis dahin - und
   dauerhaft, falls der Abruf scheitert - ist der Span leer und traegt seinen
   Trenner selbst. Eine eingebaute Zahl waere schlimmer als gar keine: sie
   stammt aus dem Build, nicht aus der Realitaet, und behauptet bei totem
   Manifest eine Version, die die Tabelle darunter gerade dementiert.

   Trenner-Zeichen als Escapes: ein Leerzeichen NACH \00B7 wuerde die
   Escape-Sequenz beenden und dabei selbst verschluckt - der Punkt klebte dann
   am naechsten Wort. Geschuetzte Leerzeichen halten den Trenner ausserdem beim
   Umbruch bei der Versionsnummer statt ihn allein in die naechste Zeile zu
   schicken. */
#release-version:empty{display:none}
#release-version:not(:empty)::after{content:'\00A0\00B7\00A0'}
.scroll-cue{display:flex;align-items:center;gap:10px;margin-top:22px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--mut)}
.scroll-cue i{width:1px;height:30px;background:var(--line);position:relative;overflow:hidden;display:block}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--acc);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{to{top:110%}}

/* ---------- Kapitel-Leiste ---------- */
/* Ohne JS unsichtbar: sie behauptet einen Zustand, den nur das Skript kennt. */
.rail{display:none}
[data-story="on"] .rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:20;
  display:flex;flex-direction:column;gap:14px;pointer-events:none}
.rail span{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--mut);opacity:0.45;transition:opacity .25s ease,color .25s ease}
.rail span i{display:block;width:14px;height:1px;background:currentColor;
  transition:width .25s ease}
.rail span[data-state="past"]{opacity:0.7}
.rail span[data-state="current"]{opacity:1;color:var(--acc)}
.rail span[data-state="current"] i{width:26px}
@media (max-width:1620px){[data-story="on"] .rail{display:none}}

/* ---------- Story-Layout ---------- */
.story{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;
  align-items:start;padding:0 0 40px}
/* Der Auslauf gehoert in die Kapitelspalte, nicht an den Abschnitt: die
   Grid-Zeile ist so hoch wie ihr hoechstes Element, und nur sie begrenzt den
   Weg des klebenden Fensters. Padding am Abschnitt liegt ausserhalb der Zeile
   und wuerde den Rahmen weiterhin mitten im letzten Kapitel loesen. */
.chapters{display:flex;flex-direction:column;padding-bottom:30vh}
.chapter{min-height:92vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.chapter h2{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(21px,2.1vw,27px);line-height:1.16;letter-spacing:-0.01em;margin:0;text-wrap:balance}
.chapter h2 em{font-style:normal;color:var(--acc)}
.chapter p{color:var(--mut);font-size:15px;margin:0;max-width:40ch}
.chapter p b{color:var(--fg);font-weight:600}
.ui-ref{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mut);
  border:1px solid var(--line);border-radius:5px;padding:3px 8px;align-self:flex-start}
/* Erst wenn das Skript uebernommen hat, wird gedimmt. Ohne JS bleibt alles lesbar. */
.story[data-ready] .chapter{opacity:.22;transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
.story[data-ready] .chapter[data-state="current"]{opacity:1}
.stage{position:sticky;top:88px}
.cap{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mut);min-height:17px}
.cap span{display:none}
.cap span b{color:var(--acc);font-weight:400}
.story[data-active="0"] .cap .c0,
.story[data-active="1"] .cap .c1,
.story[data-active="2"] .cap .c2{display:inline}

/* ================= APP-FENSTER: 1:1-Nachbau der echten Oberflaeche =================
   Werte stammen aus smashq/src/index.css (.dark) und den React-Komponenten.
   Der Rahmen wird in echten Pixeln gebaut und per transform skaliert, damit die
   Proportionen exakt bleiben statt naeherungsweise nachgestellt zu werden. */
/* Hoehe kommt aus dem Seitenverhaeltnis, nicht erst aus dem Skript: sonst
   springt das Layout nach dem Laden und ein Ankersprung landet daneben. */
.aw{position:relative;width:100%;overflow:hidden}
.stage .aw{max-width:1200px;aspect-ratio:1200 / 700}
.rcstick .aw{max-width:1320px;aspect-ratio:1320 / 820}
.app{position:absolute;top:0;left:0;transform-origin:top left;
  transform:scale(var(--s,1));overflow:hidden;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 22px 60px -24px var(--glow),0 2px 10px oklch(0% 0 0 / 0.28);
  /* App-Tokens, dark ist der kanonische Look der Anwendung */
  --accent-l:72%;--accent-c:0.16;--accent-h:230;
  --a-acc:oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --a-a05:oklch(var(--accent-l) var(--accent-c) var(--accent-h) / .05);
  --a-a10:oklch(var(--accent-l) var(--accent-c) var(--accent-h) / .10);
  --a-a15:oklch(var(--accent-l) var(--accent-c) var(--accent-h) / .15);
  --a-a30:oklch(var(--accent-l) var(--accent-c) var(--accent-h) / .30);
  --a-a40:oklch(var(--accent-l) var(--accent-c) var(--accent-h) / .40);
  --n100:oklch(95% .003 280);--n200:oklch(87% .004 280);--n300:oklch(70% .006 280);
  --n400:oklch(62% .011 280);--n500:oklch(56% .012 280);--n600:oklch(46% .010 280);
  --n700:oklch(36% .008 280);--n800:oklch(27% .007 280);--n900:oklch(22% .006 280);
  --n950:oklch(18% .005 280);
  --sbase:var(--n950);--sraised:var(--n900);--soverlay:var(--n800);--sinset:oklch(15% .004 280);
  --a-ok:oklch(72% .16 155);--a-err:oklch(62% .22 25);--a-warn:oklch(75% .14 70);
  --hovov:oklch(100% 0 0 / .05);
  --hairline:inset 0 0 0 1px oklch(100% 0 0 / .06);
  --lift:0 1px 2px oklch(0% 0 0 / .4),0 8px 16px oklch(0% 0 0 / .3),inset 0 0 0 1px oklch(100% 0 0 / .08);
  --dadd:oklch(72% .16 155 / .12);--drem:oklch(62% .22 25 / .12);
  --daddw:oklch(72% .16 155 / .30);--dremw:oklch(62% .22 25 / .30);
  --dmark:oklch(75% .14 70 / .10);
  --asans:'Inter','Segoe UI',system-ui,sans-serif;
  --amono:'JetBrains Mono','Fira Code','Consolas',monospace;
  --eout:cubic-bezier(.16,1,.3,1);
  background:var(--sbase);color:var(--n200);font-family:var(--asans);
  font-size:14px;line-height:1.45;
}
.app-1{width:1200px;height:700px}
/* Das Review-Center braucht mehr Breite als das Sessions-Fenster: bei
   geoeffnetem Seitenpanel bleiben von 1200 nur 580 fuer die Diff-Spalte, und
   die Fusszeile passt dann nicht mehr in eine Zeile. */
.app-2{width:1320px;height:820px}
.app svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
@keyframes twpulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes fadein{to{opacity:1}}
@keyframes blink{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fenster-Titelleiste */
.tbar{display:flex;align-items:center;gap:9px;height:32px;padding:0 12px;
  background:var(--n900);border-bottom:1px solid var(--n700)}
.tbar .tl{font-family:var(--amono);font-size:12px;color:var(--n300)}
.tbar .tl b{color:var(--a-acc);font-weight:400}
.tbar .tn{font-size:12px;font-weight:600;color:var(--n300);letter-spacing:.02em}
.tbar .tw{margin-left:auto;display:flex;gap:18px;color:var(--n500);font-size:12px}

/* ---------- Sidebar (SessionList, 240px) ---------- */
.abody{display:flex;height:668px}
.app-2 .abody{height:739px}
.sb{width:240px;flex:none;display:flex;flex-direction:column;height:100%;
  background:var(--sbase);border-right:1px solid var(--n700)}
.sbs{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.favs{padding:8px 0 0 8px;display:flex;flex-direction:column;gap:2px}
.fav{position:relative;display:flex;align-items:center;gap:8px;height:28px;padding:0 8px 0 12px;
  border-radius:6px;transition:background-color .3s ease}
.fav i{flex:none;width:8px;height:8px;border-radius:9999px;
  background:oklch(var(--accent-l) var(--accent-c) var(--accent-h))}
.fav .nm{font-weight:500;font-size:14px;color:var(--n200);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav .fa{display:none;align-items:center;gap:2px;flex:none}
.ib{padding:4px;border-radius:6px;display:inline-flex;color:var(--n400)}
.ib svg{width:14px;height:14px}
.ib.play{color:var(--a-ok)}
.ib.play svg{fill:currentColor;stroke:none}
.favfoot{padding:8px 12px;display:flex;align-items:center;gap:6px}
.favfoot .ng{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--n600)}
.favfoot .ng svg{width:12px;height:12px}
.favfoot .sp{flex:1}
.isq{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:6px;color:var(--n400)}
.isq svg{width:14px;height:14px}
.sdiv{display:flex;align-items:center;gap:8px;margin:6px 12px}
.sdiv u{height:1px;flex:1;background:var(--n800);text-decoration:none}
.rows{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 4px 0 8px}
.nosess{padding:12px;text-align:center;color:var(--n500);font-size:12px;transition:opacity .3s ease}
.srow{position:relative;display:flex;align-items:center;gap:8px;height:28px;padding:0 8px 0 12px;
  border-radius:6px;opacity:0;transform:translateX(-8px);
  transition:opacity .5s var(--eout),transform .5s var(--eout),background-color .3s ease}
.srow.sel{background:var(--a-a10)}
.srow i{flex:none;width:8px;height:8px;border-radius:9999px;
  background:oklch(var(--accent-l) var(--accent-c) var(--accent-h))}
.srow i.run{animation:twpulse 2s cubic-bezier(.4,0,.6,1) infinite}
.srow .nm{font-weight:500;font-size:14px;color:var(--n200);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .pj{flex:none;max-width:92px;font-size:11px;color:var(--n500);font-family:var(--amono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:margin .3s ease}
/* Mini-Map: Geometrie exakt aus sessionGridLayout.ts, 6 Kacheln quer */
.mm{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;
  width:18px;height:12px;gap:1px;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;
  grid-template-areas:"a b c" "d e f";opacity:0;transition:opacity .35s ease}
.mm span{border-radius:2px;background:var(--n600)}
.mm span.on{background:oklch(var(--accent-l) var(--accent-c) var(--accent-h))}
/* Kontextmenue "Starten mit" (SessionAccentMenu) */
.ctx{position:absolute;left:112px;top:4px;z-index:20;display:flex;flex-direction:column;gap:8px;
  border-radius:6px;background:var(--soverlay);box-shadow:var(--lift);padding:8px;width:190px;
  opacity:0;transform:scale(.97);transform-origin:top left}
.ctx .lb{padding:0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--n500)}
.ctx .gp{display:flex;flex-direction:column;gap:2px}
.ctx .mi{font-size:12px;text-align:left;padding:4px 6px;border-radius:4px;color:var(--n300)}
.ctx .mi.hv{color:var(--a-acc);background:var(--hovov)}
.ctx .mi.ds{color:var(--n600)}
.ctx .sep{border-top:1px solid var(--n700)}
.ctx .sw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ctx .sw u{width:20px;height:20px;border-radius:9999px;display:block;text-decoration:none}
/* OpenMdPathInput + SessionPanelDock */
.mdin{flex:none;border-top:1px solid var(--n800);padding:6px 8px;display:flex;align-items:center;gap:6px}
.mdin .ip{flex:1;min-width:0;border-radius:6px;background:var(--sraised);padding:4px 8px;
  font-size:12px;color:var(--n500)}
.mdin .go{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:6px;color:var(--n400)}
.mdin .go svg{width:12px;height:12px}
.dock{flex:none;border-top:1px solid var(--n800);background:var(--sbase);padding:10px 12px;
  display:flex;flex-direction:column;gap:8px}
.dock .r1{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.dock .r2{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:6px;
  border-top:1px solid var(--n800);padding-top:8px}
.db{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:6px;color:var(--n400)}
.db svg{width:16px;height:16px}
.bdg{position:absolute;top:2px;right:2px;min-width:14px;height:14px;padding:0 2px;
  border-radius:9999px;background:var(--a-acc);color:var(--sbase);font-size:9px;font-weight:700;
  font-family:var(--amono);display:inline-flex;align-items:center;justify-content:center}
.vp{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:6px;
  background:var(--sraised);font-size:10px;font-weight:500;letter-spacing:-.025em;color:var(--n500)}
.vp u{width:6px;height:6px;border-radius:9999px;background:var(--a-acc);display:block;text-decoration:none}
.grip{width:4px;flex:none;background:var(--n700)}

/* ---------- Terminal-Bereich ---------- */
.tmain{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}
.tpill{position:absolute;top:8px;right:8px;z-index:10;display:flex;align-items:center;gap:4px;
  padding:2px 4px;border-radius:6px;background:var(--sbase);box-shadow:var(--hairline);
  opacity:0;transition:opacity .35s ease}
.bchip{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px;
  background:var(--n800);font-size:10px;color:var(--n400);max-width:140px}
.bchip svg{width:12px;height:12px;flex:none}
.bchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb{position:relative;padding:4px;border-radius:6px;display:inline-flex;color:var(--n500)}
.tb svg{width:16px;height:16px}
.tb.s14 svg{width:14px;height:14px}
.tb.s12 svg{width:12px;height:12px}
.tb.on{color:var(--a-acc);background:var(--a-a10)}
.tb .bdg{top:-4px;right:-2px;padding:0 4px;font-size:8.5px;font-weight:400}
.segc{display:flex;align-items:stretch;border-radius:6px;box-shadow:var(--hairline);
  overflow:hidden;background:var(--sraised)}
.segc .tb{border-radius:0}
/* EmptyState, wortgleich mit EmptyState.tsx */
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:24px;padding:32px;text-align:center;z-index:2;transition:opacity .4s ease}
.empty .ic{position:relative}
.empty .ic u{position:absolute;inset:0;border-radius:9999px;background:var(--a-a10);
  filter:blur(24px);display:block;text-decoration:none}
.empty .ic svg{position:relative;width:48px;height:48px;stroke:var(--n500);stroke-width:1.5}
.empty h4{margin:0;font-size:18px;line-height:28px;font-weight:600;color:var(--n200)}
.empty p{font-size:14px;line-height:1.625;color:var(--n500);max-width:384px;margin:0}
.empty .pb{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:6px;
  background:var(--a-acc);color:var(--n950);font-weight:500;font-size:14px;box-shadow:var(--hairline)}
.empty .pb svg{width:16px;height:16px}
.empty .hn{font-size:12px;color:var(--n500)}

/* ================= CLI-SIMULATIONEN =================
   Wiederverwendbar: .cli traegt die Terminal-Flaeche, .cli-claude/.cli-codex/
   .cli-grok die jeweilige Chrome. Format nach Recherche am App-Repo und an den
   oeffentlichen Quellen der drei CLIs; die Inhalte sind Platzhalter.
   Farben: GitHub-Dark-16 auf dem in SessionTerminal.tsx gepinnten #0d1117. */
.cli{background:#0d1117;color:#e6edf3;
  font-family:ui-monospace,'SF Mono',Menlo,Monaco,'Cascadia Code','Fira Code',Consolas,monospace;
  font-size:13px;line-height:1.5;white-space:pre;overflow:hidden}
.cli .d{color:#6e7681}
.cli .w{color:#f0f6fc;font-weight:600}
.cli .g{color:#3fb950}
.cli .r{color:#ff7b72}
.cli .y{color:#d29922}
.cli .c{color:#39c5cf}
.cli .m{color:#bc8cff}
.cli .b{color:#58a6ff}
.cli .ln{opacity:0}
.cli .cur{display:inline-block;width:7px;height:14px;vertical-align:-2px;background:#00b5f5;
  animation:blink 1.1s steps(1) infinite}
/* Claude Code haengt sein eigenes 2-Spalten-Margin an jede Zeile an. Die Regel
   sitzt auf der Zeile, nicht auf dem Container: sonst kollidiert sie mit dem
   Padding der Terminalflaeche. */
.cli-claude .ln{padding-left:2ch}
.cli-claude .bl{color:#d29922}
.cli-codex .bl{color:#6e7681}
.cli-grok .bl{color:#6e7681}
.cli-grok .barbox{border-left:2px solid #39c5cf;padding-left:6px}

/* ---------- Einzelansicht und Grid ---------- */
.single{position:absolute;inset:0;padding:4px 10px;opacity:0;transition:opacity .4s ease}
.grid6{position:absolute;inset:0;display:grid;gap:2px;
  grid-template:"a b c" 1fr "d e f" 1fr / 1fr 1fr 1fr;opacity:0;transition:opacity .5s ease}
.cell{position:relative;border-radius:6px;overflow:hidden;box-sizing:border-box;
  border:2px solid oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  display:flex;flex-direction:column;min-height:0;min-width:0;
  opacity:0;transform:scale(.985);
  transition:opacity .5s var(--eout),transform .5s var(--eout),box-shadow .3s ease}
.cell .ct{flex:1;min-height:0;padding:34px 8px 6px;font-size:11px;line-height:1.45}
.cell.ca{grid-area:a}.cell.cb{grid-area:b}.cell.cc{grid-area:c}
.cell.cd{grid-area:d}.cell.ce{grid-area:e}.cell.cf{grid-area:f}
.cpill{position:absolute;top:6px;right:6px;z-index:5;display:flex;align-items:center;gap:4px;
  padding:2px 4px;border-radius:6px;background:var(--sbase);box-shadow:var(--hairline);opacity:.9}
.cpill .bchip{max-width:104px;font-size:9px}
.cpill .bchip svg{width:10px;height:10px}
.cpill .tb{padding:3px}
.cpill .tb svg{width:12px;height:12px}

/* ================= REVIEW-CENTER ================= */
.rcsec{border-top:1px solid var(--line);background:var(--raise);padding:72px 0 0;margin-top:56px}
.beats{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;
  align-items:start;padding-bottom:40px}
.beatcol{display:flex;flex-direction:column;padding-bottom:30vh}
.rcbeat{min-height:96vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.rcbeat h2{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(21px,2.1vw,27px);line-height:1.16;letter-spacing:-0.01em;margin:0;text-wrap:balance}
.rcbeat h2 em{font-style:normal;color:var(--acc)}
.rcbeat p{color:var(--mut);font-size:15px;margin:0;max-width:40ch}
.rcbeat p b{color:var(--fg);font-weight:600}
.beats[data-ready] .rcbeat{opacity:.22;transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
.beats[data-ready] .rcbeat[data-state="current"]{opacity:1}
.rcstick{position:sticky;top:88px}

.rct{display:flex;align-items:center;gap:8px;height:49px;padding:0 16px;
  border-bottom:1px solid var(--n700);flex:none}
.rct h5{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--n300)}
.rct .fd{font-family:var(--amono);font-size:10px;color:var(--n500)}
/* Sidebar 300px */
.rsb{width:300px;flex:none;border-right:1px solid var(--n700);background:var(--sraised);
  display:flex;flex-direction:column;min-height:0}
.rh{display:flex;width:100%;align-items:center;gap:6px;padding:8px 12px;
  border-top:1px solid var(--n700);border-bottom:1px solid var(--n700);background:var(--soverlay);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--n100)}
.rh.mt{margin-top:4px}
.rh svg{width:12px;height:12px;flex:none}
.rsec{background:var(--sbase);overflow:hidden}
.rgl{padding:10px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--n500)}
.rsr{display:flex;width:100%;align-items:flex-start;gap:8px;padding:8px 10px;border-left:2px solid transparent}
.rsr.sel{border-left-color:var(--a-acc);background:var(--a-a10)}
.rsr u{width:8px;height:8px;border-radius:9999px;flex:none;margin-top:4px;background:var(--a-acc);
  display:block;text-decoration:none}
.rsr u.hist{background:var(--n600)}
.rsr .cc{min-width:0;display:flex;flex-direction:column}
.rsr .t1{font-size:12px;color:var(--n100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsr .t2{font-family:var(--amono);font-size:10px;color:var(--n500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rov{margin-top:2px;display:inline-flex;width:fit-content;align-items:center;gap:4px;border-radius:4px;
  border:1px solid var(--n700);background:color-mix(in oklch, var(--a-warn) 10%, transparent);
  padding:1px 6px;font-family:var(--amono);font-size:9px;color:var(--a-warn)}
.rov svg{width:10px;height:10px;flex:none}
.rscope{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--n700);padding:8px 12px;flex:none}
.rscope .ch{display:flex;align-items:center;gap:4px}
.rscope .ch span{border-radius:9999px;padding:4px 10px;font-size:11px;color:var(--n400)}
.rscope .ch span.on{background:var(--a-a15);color:var(--a-acc)}
.rscope .bs{font-family:var(--amono);font-size:10px;color:var(--n500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbulk{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--n700);padding:6px 12px;flex:none}
.rbulk svg{width:14px;height:14px;flex:none;color:var(--n500)}
.rbulk .lb{font-size:11px;color:var(--n300)}
.rbulk .pg{margin-left:auto;font-family:var(--amono);font-size:10px;color:var(--n400);white-space:nowrap}
.rfiles{flex:1;min-height:0;overflow:hidden;background:var(--sbase)}
.rdir{padding:8px 12px 4px;font-family:var(--amono);font-size:10px;letter-spacing:.025em;color:var(--n500)}
.rf{display:flex;width:100%;align-items:stretch;border-left:2px solid transparent;
  transition:background-color .3s ease,border-color .3s ease}
.rf.sel{border-left-color:var(--a-acc);background:var(--a-a10)}
.rf .st{display:flex;flex:none;align-items:center;padding:0 4px 0 8px}
.rf .st svg{width:14px;height:14px;color:var(--n500)}
.rf .st svg.ok{color:var(--a-ok)}
.rf .rw{display:flex;min-width:0;flex:1;align-items:center;gap:8px;padding:6px 12px 6px 6px;
  font-size:12px;color:var(--n300)}
.rf.sel .rw{color:var(--n100)}
.rf .ch{width:12px;flex:none;font-family:var(--amono);font-weight:700}
.rf .ch.m{color:var(--a-warn)}.rf .ch.a{color:var(--a-ok)}.rf .ch.d{color:var(--a-err)}
.rf .pt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-family:var(--amono);font-size:11px}
.bal{flex:none;font-family:var(--amono);font-size:10px;color:var(--n400)}
.bal .p{color:var(--a-ok)}.bal .m{color:var(--a-err)}.bal .s{padding:0 2px;color:var(--n500)}
/* Diff-Spalte */
.rcol{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}
.rsum{margin:12px 16px 0;flex:none;border-radius:6px;border:1px solid var(--n700);
  border-left:2px solid var(--a-acc);background:var(--sraised)}
.rsum .hd{display:flex;width:100%;align-items:center;gap:6px;padding:8px 12px;font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--n400)}
.rsum .hd svg{width:12px;height:12px}
.rsum .hd svg.ac{color:var(--a-acc)}
.rsum .bd{padding:0 12px 12px;font-size:12px;line-height:1.625;color:var(--n300);max-width:78ch}
.rph{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--n700);flex:none}
.rph .pp{font-family:var(--amono);font-size:12px;color:var(--n300)}
.rph .bal{margin-left:auto}
.rrg{display:flex;align-items:stretch;border:1px solid var(--n700);font-size:12px;flex:none}
.rrg span{padding:4px 8px;color:var(--n400)}
.rrg span+span{border-left:1px solid var(--n700)}
.rrg span.on{background:var(--a-a15);color:var(--a-acc)}
.pri{display:inline-flex;align-items:center;gap:6px;border-radius:6px;background:var(--a-acc);
  padding:4px 10px;font-size:12px;font-weight:500;color:var(--n950);box-shadow:var(--hairline)}
.pri svg{width:14px;height:14px}
.sec{display:inline-flex;align-items:center;gap:6px;border-radius:6px;border:1px solid var(--n700);
  padding:4px 10px;font-size:12px;color:var(--n300)}
.sec svg{width:14px;height:14px}
.rdw{display:flex;flex:1;min-height:0;background:var(--sbase)}
.rdiff{flex:1;min-width:0;overflow:hidden;font-family:var(--amono);font-size:13px;line-height:1.4}
.dl{display:flex;align-items:flex-start}
.dl .gm{width:10px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--sraised);align-self:stretch}
.dl .gm u{width:8px;height:8px;border-radius:9999px;display:none;text-decoration:none}
.dl .gm u.nt{background:var(--a-acc)}
.dl .gm u.rq{background:var(--a-warn);animation:twpulse 2s cubic-bezier(.4,0,.6,1) infinite}
.dl .no{width:42px;flex:none;padding:0 6px;text-align:right;font-size:12px;color:var(--n500);
  background:var(--sraised);border-right:1px solid var(--n800);align-self:stretch}
.dl .sg{width:16px;flex:none;text-align:center;font-weight:700;font-size:12px;color:transparent}
.dl .tx{flex:1;min-width:0;padding:0 16px 0 6px;white-space:pre;overflow:hidden;color:var(--n200)}
.dl.add{background:var(--dadd)}
.dl.add .sg{color:var(--a-ok)}
.dl.del{background:var(--drem)}
.dl.del .sg{color:var(--a-err)}
.dl .hl{background:var(--daddw);border-radius:2px}
.dl.del .hl{background:var(--dremw)}
.dcol{padding:4px 16px;color:var(--a-acc);background:var(--a-a05);font-size:11px}
.sy-k{color:var(--a-acc)}.sy-s{color:var(--a-ok)}.sy-c{color:var(--n500)}
.sy-f{color:oklch(76% .13 285)}.sy-p{color:oklch(76% .10 250)}
.rrul{position:relative;width:8px;flex:none;border-left:1px solid var(--n700);background:var(--sinset)}
.rrul u{position:absolute;border-radius:4px;opacity:.9;display:block;text-decoration:none}
.rrul u.ad{left:0;width:5px;background:var(--a-ok)}
.rrul u.rm{left:0;width:3px;background:var(--a-err)}
.rrul u.rq{right:0;width:3px;background:var(--a-warn);opacity:0;transition:opacity .5s ease}
.rrul u.nt{right:0;width:3px;background:var(--a-acc)}
.rft{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--n700);
  background:var(--sbase);font-size:12px;flex:none}
/* Die Mitte gibt zuerst nach, die Schaltflaechen bleiben einzeilig. */
.rft .md{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  overflow:hidden;white-space:nowrap;font-family:var(--amono);color:var(--n400)}
.rft .rst,.rft .pri,.rft .rrf,.rft .rrg{flex:none;white-space:nowrap}
.rst{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:4px 8px;color:var(--a-err)}
.rst svg{width:14px;height:14px}
.rrf{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;color:var(--n300)}
.rrf svg{width:14px;height:14px}
/* Ueber der Fusszeile, nicht darauf: die Trigger sind im Original ebenfalls
   so gesetzt, dass sie nichts Bedienbares verdecken. */
.rtrig{position:absolute;right:8px;bottom:48px;z-index:10;display:flex;flex-direction:column;gap:4px}
.rtrig span{position:relative;border-radius:6px;border:1px solid var(--n700);padding:4px;
  background:var(--soverlay);color:var(--n400);display:inline-flex;transition:all .3s ease}
.rtrig span svg{width:16px;height:16px}
.rtrig span u{position:absolute;right:2px;top:2px;width:6px;height:6px;border-radius:9999px;display:block}
.rtrig span u.ac{background:var(--a-acc)}
.rtrig span u.wr{background:var(--a-warn)}
.rside{width:0;flex:none;overflow:hidden;transition:width .6s var(--eout)}
.rpanel{width:320px;height:100%;display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--n700);background:var(--sraised)}
.rpt{display:flex;flex:none;align-items:center;gap:8px;border-bottom:1px solid var(--n700);padding:8px 12px}
.rpt .tt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--n300)}
.rpt .sp{flex:1}
.rpt .ib svg{width:14px;height:14px}
.rpl{display:flex;min-height:0;flex:1;flex-direction:column;gap:8px;overflow:hidden;padding:12px}
.crd{border-radius:6px;border:1px solid var(--n700);border-left:2px solid var(--a-warn);
  background:var(--sraised);opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--eout),transform .5s var(--eout)}
.crd .hd{display:flex;flex-direction:column;gap:4px;padding:8px 12px}
.crd .k{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--n400)}
.crd .k svg{width:12px;height:12px;flex:none;color:var(--a-warn)}
.crd .pp{font-family:var(--amono);font-size:10px;color:var(--n500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crd .tx{font-size:12px;color:var(--n300)}
.rpp{border-top:1px solid var(--n700);flex:none}
.rpp .tp{padding:8px 12px}
.rpp .lb{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--n500);padding-bottom:4px;display:block}
.rpp .ta{width:100%;border-radius:6px;border:1px solid var(--n700);background:var(--soverlay);
  padding:8px 12px;font-family:var(--amono);font-size:10.5px;line-height:1.625;color:var(--n400);
  white-space:pre-wrap;height:100px;overflow:hidden}
.rpp .ac{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--n700);padding:8px 12px}
.rpp .cn{font-family:var(--amono);font-size:10px;color:var(--n500)}
.rpp .sp{flex:1}
.rfb{display:flex;width:100%;align-items:center;gap:6px;padding-top:4px;font-size:10.5px;
  color:var(--n400);opacity:0}
.rfb svg{width:14px;height:14px;flex:none;animation:spin 1s linear infinite}

/* ================= ZUSTAENDE DER KAPITEL =================
   Der Endzustand steht als statische Regel am Zustandsselektor, die Keyframes
   laufen nur darauf zu. Eine abgebrochene Animation landet damit nie auf einem
   Zwischenbild, und beim Zurueckscrollen startet sie neu, weil animation-name
   von none auf einen Namen wechselt. */
/* Kapitel 01 beginnt im Leerzustand und blendet ihn aus, sobald die Session
   startet. Ohne diese Kurve stuenden Leerzustand und laufendes Terminal
   gleichzeitig im Bild. */
.story[data-active="0"] .empty{opacity:1;animation:emptyout .45s 2.9s forwards}
@keyframes emptyout{to{opacity:0;visibility:hidden}}
.story:not([data-active="0"]) .empty{opacity:0;visibility:hidden}
.story[data-active="0"] .fav-1 .fa{display:flex}
.story[data-active="0"] .fav-1{background:var(--a-a10)}
.story[data-active="0"] .ctx{animation:ctxin .01s .9s forwards,ctxout .5s 2.6s forwards}
@keyframes ctxin{to{opacity:1;transform:scale(1)}}
@keyframes ctxout{to{opacity:0;transform:scale(.97)}}
.story[data-active="0"] .nosess{animation:fadeout .01s 3s forwards}
.story:not([data-active="0"]) .nosess{opacity:0;position:absolute;pointer-events:none}
@keyframes fadeout{to{opacity:0;position:absolute}}
.story[data-active="0"] .srow.s1{animation:rowin .5s 3.1s var(--eout) forwards}
@keyframes rowin{to{opacity:1;transform:none}}
.story[data-active="0"] .single{animation:fadein .01s 3.3s forwards}
.story[data-active="0"] .tpill{animation:pillin .01s 3.4s forwards}
@keyframes pillin{to{opacity:.8}}
.story[data-active="0"] .single .l1{animation:fadein .01s 3.7s forwards}
.story[data-active="0"] .single .l2{animation:fadein .01s 4.5s forwards}
.story[data-active="0"] .single .l3{animation:fadein .01s 5.4s forwards}
.story[data-active="0"] .single .l4{animation:fadein .01s 6.3s forwards}
.story[data-active="0"] .single .l5{animation:fadein .01s 7.2s forwards}
.story[data-active="0"] .single .l6{animation:fadein .01s 8.1s forwards}
/* Kapitel 02 und 03: alle Sitzungen da, Grid aktiv */
.story[data-active="1"] .srow,.story[data-active="2"] .srow{opacity:1;transform:none}
.story[data-active="1"] .srow{transition-delay:0s}
.story[data-active="1"] .srow.s2{transition-delay:.45s}
.story[data-active="1"] .srow.s3{transition-delay:.9s}
.story[data-active="1"] .srow.s4{transition-delay:1.35s}
.story[data-active="1"] .srow.s5{transition-delay:1.8s}
.story[data-active="1"] .srow.s6{transition-delay:2.25s}
.story[data-active="1"] .mm,.story[data-active="2"] .mm{opacity:1}
.story[data-active="1"] .pj,.story[data-active="2"] .pj{margin-right:22px}
.story[data-active="1"] .grid6,.story[data-active="2"] .grid6{opacity:1}
.story[data-active="1"] .single,.story[data-active="2"] .single{opacity:0}
.story[data-active="1"] .tpill,.story[data-active="2"] .tpill{opacity:.8}
.story[data-active="1"] .seg-1,.story[data-active="2"] .seg-1{color:var(--n500);background:none}
.story[data-active="1"] .seg-6,.story[data-active="2"] .seg-6{color:var(--a-acc);background:var(--a-a10)}
/* Kacheln kommen einzeln, nicht als Blitz */
.story[data-active="1"] .cell,.story[data-active="2"] .cell{opacity:1;transform:none}
.story[data-active="1"] .cell{transition-delay:0s}
.story[data-active="1"] .cell.cb{transition-delay:.45s}
.story[data-active="1"] .cell.cc{transition-delay:.9s}
.story[data-active="1"] .cell.cd{transition-delay:1.35s}
.story[data-active="1"] .cell.ce{transition-delay:1.8s}
.story[data-active="1"] .cell.cf{transition-delay:2.25s}
/* Die Grundzeilen einer Kachel stehen ab Kapitel 02. Zeilen mit .seq gehoeren
   zur Choreografie von Kapitel 03 und werden dort einzeln eingeblendet. */
.story[data-active="1"] .ct .ln:not(.seq),
.story[data-active="2"] .ct .ln:not(.seq){opacity:1}
/* Kapitel 03: Freigabe-Abfrage, Fehler, Neustart */
.story[data-active="2"] .ca{box-shadow:0 0 6px color-mix(in oklch, var(--a-acc) 40%, transparent),
  0 0 12px color-mix(in oklch, var(--a-acc) 15%, transparent)}
.story[data-active="2"] .q-ask{animation:fadein .01s .5s forwards}
.story[data-active="2"] .q-pick{animation:fadein .01s 2.6s forwards}
.story[data-active="2"] .q-run{animation:fadein .01s 3.6s forwards}
.story[data-active="2"] .q-base{animation:fadeout .01s .5s forwards}
.story[data-active="2"] .e-fail{animation:fadein .01s 1.4s forwards}
.story[data-active="2"] .e-restart{animation:fadein .01s 4.4s forwards}
.story[data-active="2"] .srow.s4 i{animation:none;background:var(--a-err)}
.story[data-active="2"] .rsbtn{animation:ringpulse 6s ease forwards}
@keyframes ringpulse{0%,52%{outline-color:transparent;color:var(--n500)}
  56%,70%{outline:2px solid var(--a-acc);outline-offset:2px;color:var(--n200)}
  74%,100%{outline-color:transparent;color:var(--n500)}}
/* Beats des Review-Centers */
.beats[data-active="1"] .rside{width:320px}
.beats[data-active="1"] .dl.mk{background:var(--dmark);box-shadow:inset 2px 0 0 var(--a-warn)}
.beats[data-active="1"] .dl.mk .gm u.rq{display:block}
.beats[data-active="1"] .rrul u.rq{opacity:.9}
.beats[data-active="1"] .crd{opacity:1;transform:none}
.beats[data-active="1"] .crd.k2{transition-delay:.35s}
.beats[data-active="1"] .crd.k3{transition-delay:.7s}
.beats[data-active="1"] .rfb{animation:fadein .01s 2.2s forwards}
.beats[data-active="1"] .t-req{border-color:color-mix(in oklch, var(--a-warn) 50%, transparent);
  background:color-mix(in oklch, var(--a-warn) 10%, transparent);color:var(--a-warn)}
.beats[data-active="0"] .dl .gm u.nt{display:block}
.beats[data-active="0"] .cap .c3,.beats[data-active="1"] .cap .c4{display:inline}

/* ================= FEATURE-RASTER, DREI VARIANTEN =================
   Alle drei tragen dieselben achtzehn Eintraege. Vor dem Merge bleibt eine. */
.fsec{padding:80px 0 20px}
.fhead{margin-bottom:30px}
.fhead h2{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.01em;margin:10px 0 8px;text-wrap:balance}
.fhead p{color:var(--mut);max-width:54ch;font-size:15px;margin:0}
.vlab{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;padding:5px 12px;
  border:1px dashed var(--line);border-radius:999px;font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--mut)}
.vlab b{color:var(--acc);font-weight:400}
.vblock{padding-bottom:60px;border-bottom:1px dashed var(--line);margin-bottom:60px}
.vblock:last-child{border-bottom:0;margin-bottom:0}
/* A: gruppiertes Raster */
.vA{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.vA h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--mut);margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.vA ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.vA li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--mut)}
.vA li svg{width:14px;height:14px;flex:none;margin-top:3px;stroke:var(--acc);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vA li b{font-weight:600;color:var(--fg)}
/* B: Fenster-Galerie */
.vBw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:32px}
.wt{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--raise)}
.wt .hd{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line);
  background:var(--over)}
.wt .hd u{width:6px;height:6px;border-radius:9999px;background:var(--acc);display:block;text-decoration:none}
.wt .hd span{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--fg)}
.wt .bd{height:80px;padding:8px;display:flex;flex-direction:column;gap:4px}
.wt .bar{height:6px;border-radius:2px;background:var(--over)}
.wt .bar.a{background:var(--acc10)}
.wt .cols{display:flex;gap:4px;height:100%}
.wt .cols div{flex:1;border-radius:3px;background:var(--over);padding:4px;display:flex;
  flex-direction:column;gap:3px}
.wt .cols div u{display:block;height:5px;border-radius:2px;background:var(--line);text-decoration:none}
.wt .cp{padding:0 8px 8px;font-size:11.5px;color:var(--mut);line-height:1.4}
.vBr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.vBr h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--mut);margin:0 0 12px}
.vBr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vBr li{font-size:14px;color:var(--mut);padding-left:14px;position:relative;line-height:1.45}
.vBr li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:9999px;background:var(--acc)}
.vBr li b{color:var(--fg);font-weight:600}
/* C: Spezifikationsblatt */
.vC{border:1px solid var(--line);border-radius:10px;background:var(--raise);overflow-x:auto}
.vC pre{margin:0;padding:26px 28px;font-family:'JetBrains Mono',monospace;font-size:12.5px;
  line-height:2;color:var(--mut);white-space:pre}
.vC .h{color:var(--acc)}
.vC .k{color:var(--fg)}
.vC .c{opacity:.65}

/* ---------- Versprechen ---------- */
.promise{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--raise);
  padding:80px 0;text-align:center}
.promise h2{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(24px,3.2vw,38px);letter-spacing:-0.015em;max-width:20ch;margin:12px auto 16px;text-wrap:balance}
.promise p{color:var(--mut);max-width:60ch;margin:0 auto;font-size:15.5px}
.promise p b{color:var(--fg);font-weight:600}

/* ---------- Preise ----------
   Die hervorgehobene Karte traegt denselben 2px-Akzentrahmen wie .cell im
   Sechs-Terminal-Beat. Die Seite hat fuer diese Geste bereits eine Bedeutung
   ("das hier ist das aktive Element"); Pro erbt sie, statt eine zweite
   Hervorhebungssprache einzufuehren. */
.pricing{padding:72px 0 8px}
.pricing h2{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:-0.01em;margin:10px 0 10px;text-wrap:balance}
.price-lead{color:var(--mut);max-width:58ch;margin:0 0 22px;font-size:15px}

/* Abrechnungsschalter. Die gewaehlte Seite traegt die Akzentflaeche, weil die
   Seite Akzent ohnehin als "aktiv" liest. Die Ersparnis steht in --ok, damit
   sie nicht mit der Auswahl um dieselbe Farbe konkurriert. */
.bill{display:inline-flex;gap:3px;background:var(--raise);border:1px solid var(--line);
  border-radius:999px;padding:3px;margin:0 0 26px}
.bill-opt{font-family:'Instrument Sans',system-ui,sans-serif;font-size:13.5px;color:var(--mut);
  background:none;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;gap:8px}
.bill-opt:hover{color:var(--fg)}
.bill-opt[aria-pressed="true"]{background:var(--acc10);color:var(--acc);font-weight:600}
.bill-save{font-size:11.5px;color:var(--ok);white-space:nowrap}

/* Sichtbar ist immer genau eine Abrechnungsvariante. */
.pricing[data-billing="monthly"] [data-bill="annual"]{display:none}
.pricing[data-billing="annual"] [data-bill="monthly"]{display:none}

.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

/* Randstaerken und Innenabstaende ergaenzen sich zu derselben Aussenkante:
   1+19 bei den ruhigen Karten, 2+18 bei der hervorgehobenen. */
.price-card{background:var(--raise);border:1px solid var(--line);border-radius:8px;
  padding:19px 17px;display:flex;flex-direction:column}
.price-card-featured{background:var(--over);border:2px solid var(--acc);padding:18px 16px;
  box-shadow:0 0 0 4px var(--glow)}
.price-kicker{font-family:'Space Grotesk',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:0.1em;font-size:10.5px;color:var(--mut)}
.price-card-featured .price-kicker{color:var(--acc)}
.price-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;margin:6px 0 0}

/* Beschreibung und Preis bekommen eine Mindesthoehe, damit Preiszeile und
   Knopf ueber alle drei Karten auf derselben Linie liegen. Ohne sie
   verschiebt ein einziger zusaetzlicher Zeilenumbruch die halbe Karte. */
.price-for{color:var(--mut);font-size:12.5px;line-height:1.6;margin:8px 0 0;min-height:40px}
.price-value{font-family:'Space Grotesk',sans-serif;margin:14px 0 16px;min-height:47px;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:7px}
.price-value b{font-weight:700;font-size:30px;letter-spacing:-0.02em}
.price-value.is-text b{font-size:22px}
.price-unit{color:var(--mut);font-family:'Instrument Sans',system-ui,sans-serif;font-size:12.5px}

/* Der gefuellte Knopf hat keinen Rand, der Geister-Knopf einen von 1px. Ohne
   Ausgleich waeren die Karten um genau diese 2px gegeneinander verschoben. */
.price-action{display:block;text-align:center}
.price-action.btn{border:1px solid transparent}
.price-action[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* Zwei Zeilen sind reserviert, weil diese Zeile ihren Text zur Laufzeit
   wechselt (Wartehinweis, Testmodus, verbunden). Ohne feste Hoehe verschiebt
   der laengere Text nur die eine Karte und die Listen laufen auseinander. */
.price-status{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mut);
  margin:9px 0 0;line-height:1.55;min-height:calc(2 * 1.55em)}
.price-status.is-ready{color:var(--ok)}
.price-status.is-test{color:var(--warn)}

.price-head{font-size:12.5px;font-weight:600;color:var(--fg);
  margin:18px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.price-list{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.85;color:var(--mut)}
.price-list li{display:flex;gap:8px}
.price-list li::before{content:"\2713";color:var(--acc);flex-shrink:0}
.price-fine{font-size:11.5px;line-height:1.6;color:var(--mut);margin:16px 0 0}

@media (max-width:820px){
  .price-grid{grid-template-columns:minmax(0,1fr)}
  .price-for,.price-value{min-height:0}
}

/* ---------- Vertrauen ---------- */
.trust{padding:72px 0 8px}
.trust .gr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.trust h2{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:-0.01em;margin:10px 0 14px;text-wrap:balance}
.trust p{color:var(--mut);max-width:46ch;margin:0}
.trust p b{color:var(--fg);font-weight:600}
.term{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.9;overflow-x:auto}
.term .c{color:var(--mut)}.term .g{color:var(--ok)}.term .a{color:var(--acc)}

/* ---------- releases ---------- */
.rel{border-top:1px solid var(--line);padding:40px 0 48px;margin-top:40px}
.rel .rt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.rel h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:0.14em;color:var(--mut);margin:0}
.reltab{background:var(--raise);border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.reltab table{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:12px;min-width:520px}
.reltab th{padding:8px 16px;border-bottom:1px solid var(--line);text-align:left;
  font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:0.12em;color:var(--mut)}
.reltab td{padding:9px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.reltab tr:last-child td{border-bottom:none}
.reltab a{color:var(--fg)}
.reltab a:hover{color:var(--acc)}
.reltab .dim{color:var(--mut)}
.note{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--mut);margin-top:12px}
.note b{color:var(--acc);font-weight:400}

/* ---------- Abschluss ---------- */
.fin{padding:16px 0 84px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.fin h2{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(24px,3.2vw,36px);letter-spacing:-0.015em;max-width:18ch;margin:8px 0 0;text-wrap:balance}
.fin p{color:var(--mut);max-width:46ch;margin:0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;
  font-size:12.5px;color:var(--mut);flex-wrap:wrap;gap:8px}
.foot a:hover{color:var(--fg)}

/* ---------- legal pages ---------- */
.legal-wrap{max-width:720px;margin:0 auto;padding:40px 28px 72px}
.legal-wrap h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;margin:24px 0 16px}
.legal-wrap h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:17px;margin:28px 0 8px}
.legal-wrap p,.legal-wrap li{font-size:14.5px;color:var(--fg)}
.legal-wrap .back{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut)}
.legal-wrap .back:hover{color:var(--acc)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .vA{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vBw{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .story{grid-template-columns:1fr;gap:0}
  .stage{order:-1;top:8px;padding:8px 0 4px;background:var(--bg);z-index:5}
  .chapter{min-height:70vh}
  .beats{grid-template-columns:1fr;gap:0}
  .rcbeat{min-height:74vh}
  .rcstick{order:-1;top:8px;padding:8px 0 4px;background:var(--raise);z-index:5}
  .trust .gr{grid-template-columns:1fr}
  .nav .links{display:none}
  .vA{grid-template-columns:1fr}
  .vBw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vBr{grid-template-columns:1fr}
}

/* Ohne Bewegung: jedes Kapitel sofort im Endzustand, nichts bleibt verborgen. */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important}
  html{scroll-behavior:auto}
  .srow,.cell,.crd,.single,.grid6,.mm,.tpill,.cli .ln,.rfb{opacity:1 !important;transform:none !important}
  .mm{transform:translateY(-50%) !important}
  .ctx,.empty{opacity:0 !important}
  .story[data-ready] .chapter,.beats[data-ready] .rcbeat{opacity:1 !important}
}