/* ==========================================================================================
   Jonix Soullink Tracker – Website-Stylesheet, Look "Kanto Nacht" (wie die App)
   Tokens, Farben und Schriften sind identisch mit dem App-Fundament (docs/features/ui-foundation.md):
   Standard = Kanto Nacht (dunkel, :root), [data-theme="kanto"] = Kanto Tag (hell). Umschalter in der Kopfzeile.
   Schriften liegen LOKAL unter assets/fonts/ (OFL-Lizenzen daneben) – keine Anfrage an Google oder andere Server.
   Icons: Pixel-Icons aus dem App-Set als Inline-SVG (.px-ic) bzw. als CSS-Maske (--ic-*). Keine Emojis.
   ========================================================================================== */
@font-face{ font-family:'Press Start 2P'; font-weight:400; font-display:swap; src:url(fonts/press-start-2p-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'VT323'; font-weight:400; font-display:swap; src:url(fonts/vt323-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'Pixelify Sans'; font-weight:400; font-display:swap; src:url(fonts/pixelify-sans-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'Pixelify Sans'; font-weight:500; font-display:swap; src:url(fonts/pixelify-sans-latin-500-normal.woff2) format('woff2'); }
@font-face{ font-family:'Pixelify Sans'; font-weight:600; font-display:swap; src:url(fonts/pixelify-sans-latin-600-normal.woff2) format('woff2'); }
@font-face{ font-family:'Pixelify Sans'; font-weight:700; font-display:swap; src:url(fonts/pixelify-sans-latin-700-normal.woff2) format('woff2'); }

:root{
  /* --- Raster & Maße (4-px-Raster, wie die App) --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --bw:2px; --notch:2px; --ctl-h:40px; --ctl-h-sm:32px; --ctl-h-lg:52px;
  --maxw:1200px;
  /* --- Schrift --- */
  --f-display:'Press Start 2P', ui-monospace, monospace;   /* nur GROSSBUCHSTABEN-Labels und Titel */
  --f-ui:'Pixelify Sans', 'VT323', system-ui, sans-serif;  /* Fließtext, Knöpfe, Tabellen */
  --f-num:'VT323', ui-monospace, 'Consolas', monospace;    /* Zahlen, Level, Codes */
  --lh:1.5;
  /* --- Kanto Nacht (Standard) --- */
  --bg:#0f0e1a; --bg-glow:#1d1a3a;
  --surface:#181727; --surface-2:#201f33; --surface-3:#2a2942; --surface-hi:#34335a;
  --line:#34335a; --line-strong:#6a68a6;
  --text:#efeefa; --text-2:#bdbbe0; --text-3:#9896c2;
  --brand:#ffcb05; --on-brand:#1a1400; --brand-ink:#ffcb05; /* Gelb als Schrift/Icon auf Fläche */
  --blue:#7d8cff; --on-blue:#0b0d2a;
  --ok:#43d98a; --ok-bg:#133526; --on-ok:#06210f;
  --warn:#ffb547; --warn-bg:#3a2a10; --on-warn:#1b1000;
  --danger:#ff6178; --danger-bg:#3a1520; --on-danger:#22000a;
  --shiny:#ffd84d;
  --p1:#6cb8ff; --p2:#ff94cc;
  --focus:#ffcb05;
  --shadow:0 4px 0 0 rgba(0,0,0,.45);
  --stripe:rgba(255,255,255,.035);
  /* Pixel-Icons als Masken (aus dem App-Set, 12er/16er-Raster) */
  --ic-chev-right:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M4 2h2v1h-2zM5 3h2v1h-2zM6 4h2v1h-2zM6 5h2v1h-2zM5 6h2v1h-2zM4 7h2v1h-2z%27/%3E%3C/svg%3E");
  --ic-chev-down:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M2 3h2v1h-2zM8 3h2v1h-2zM3 4h2v1h-2zM7 4h2v1h-2zM4 5h4v1h-4zM5 6h2v1h-2z%27/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M10 2h1v1h-1zM9 3h2v1h-2zM8 4h2v1h-2zM1 5h1v1h-1zM7 5h2v1h-2zM1 6h2v1h-2zM6 6h2v1h-2zM2 7h2v1h-2zM5 7h2v1h-2zM3 8h3v1h-3zM4 9h1v1h-1z%27/%3E%3C/svg%3E");
  --ic-warn:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M5 1h2v1h-2zM4 2h4v1h-4zM4 3h1v1h-1zM7 3h1v1h-1zM3 4h2v1h-2zM7 4h2v1h-2zM3 5h2v1h-2zM7 5h2v1h-2zM2 6h8v1h-8zM2 7h3v1h-3zM7 7h3v1h-3zM1 8h10v1h-10z%27/%3E%3C/svg%3E");
  --ic-info:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M5 1h6v1h-6zM3 2h10v1h-10zM2 3h6v1h-6zM10 3h4v1h-4zM2 4h6v1h-6zM10 4h4v1h-4zM1 5h14v1h-14zM1 6h5v1h-5zM9 6h6v1h-6zM1 7h6v1h-6zM9 7h6v1h-6zM1 8h6v1h-6zM9 8h6v1h-6zM1 9h6v1h-6zM9 9h6v1h-6zM2 10h5v1h-5zM9 10h5v1h-5zM2 11h4v1h-4zM10 11h4v1h-4zM3 12h10v1h-10zM5 13h6v1h-6z%27/%3E%3C/svg%3E");
  --ic-bolt:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M9 1h4v1h-4zM8 2h4v1h-4zM7 3h4v1h-4zM6 4h4v1h-4zM5 5h4v1h-4zM4 6h10v1h-10zM3 7h10v1h-10zM7 8h4v1h-4zM6 9h4v1h-4zM5 10h4v1h-4zM4 11h3v1h-3zM4 12h2v1h-2zM4 13h1v1h-1z%27/%3E%3C/svg%3E");
  color-scheme:dark;
}
/* Kanto Tag (hell) – Werte wie im App-Theme "kanto" */
[data-theme="kanto"]{
  --bg:#dedbcb; --bg-glow:#ece9da;
  --surface:#f9f8f1; --surface-2:#f0eee3; --surface-3:#e5e2d2; --surface-hi:#d8d4bf;
  --line:#cfcbb5; --line-strong:#8a876b;
  --text:#1c1b29; --text-2:#46445c; --text-3:#5f5d75;
  --brand:#ffcb05; --on-brand:#1a1400; --brand-ink:#7a5800; /* im hellen Theme dunkles Gold (Kontrast >= 4,5) */
  --blue:#3346c4; --on-blue:#ffffff;
  --ok:#146c35; --ok-bg:#d6f2df; --on-ok:#ffffff;
  --warn:#8a4f00; --warn-bg:#fbe8c8; --on-warn:#ffffff;
  --danger:#c21d3a; --danger-bg:#fadbe0; --on-danger:#ffffff;
  --shiny:#b88a00;
  --p1:#1f63c9; --p2:#b8327c;
  --focus:#3346c4;
  --shadow:0 4px 0 0 rgba(40,36,10,.2);
  --stripe:rgba(40,36,10,.04);
  color-scheme:light;
}

/* ================= Grundlagen ================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; min-height:100vh;
  background:
    radial-gradient(1200px 640px at 8% -8%, var(--bg-glow), transparent 62%),
    radial-gradient(900px 600px at 100% 40%, color-mix(in srgb, var(--bg-glow) 70%, transparent), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--f-ui); font-size:18px; line-height:var(--lh);
  display:flex; flex-direction:column;
}
button,input,select,textarea{ font:inherit; color:inherit; }
img,svg{ max-width:100%; }
a{ color:var(--blue); text-underline-offset:3px; text-decoration-thickness:2px; }
a:hover{ color:var(--text); }
p{ margin:0 0 .8em; }
ul,ol{ margin:0 0 .9em; padding-left:1.3em; }
li{ margin:.2em 0; }
b,strong{ font-weight:600; }
code, .mono{ font-family:var(--f-num); }
code{ background:var(--surface-3); color:var(--text); padding:0 .35em; font-size:1.12em; word-break:break-word; }
kbd{
  display:inline-block; min-width:1.7em; padding:0 .4em; text-align:center; font-family:var(--f-num); font-size:1.1em; line-height:1.25;
  background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 var(--bw) var(--line-strong), inset 0 -4px 0 var(--line);
}
kbd .px-ic{ vertical-align:-1px; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:400; line-height:1.55; margin:0 0 .8em; letter-spacing:.5px; color:var(--text); }
h1{ font-size:clamp(18px, 3vw, 30px); }
h2{ font-size:clamp(14px, 1.9vw, 18px); }
h3{ font-size:12px; }
h4{ font-size:10px; }
h1,h2,h3{ overflow-wrap:break-word; hyphens:manual; }
::selection{ background:var(--brand); color:var(--on-brand); }
hr{ border:0; height:var(--bw); background:var(--line); margin:var(--s-5) 0; }

/* Pixel-Icons (Inline-SVG aus dem App-Set) */
.px-ic{ display:inline-block; vertical-align:middle; flex:none; image-rendering:pixelated; }
/* Pixel-Ecke wie in der App (2 px abgeschnitten) */
.notch, .frame, .card, .btn, .textbox, .note, .shot, .video-frame, .stat, .app-window{
  clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,100% var(--notch),100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,var(--notch) 100%,0 calc(100% - var(--notch)),0 var(--notch));
}

/* Fokus: Innenring (clip-path würde einen äußeren Ring abschneiden), sonst klassischer Ring */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.btn:focus-visible, .icon-btn:focus-visible, .seg button:focus-visible, .nav a:focus-visible, .video-poster:focus-visible,
.related a:focus-visible, .search-results a:focus-visible, .cat a:focus-visible, details.faq summary:focus-visible{
  outline:none; box-shadow:inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--bg) !important;
}

.skip-link{
  position:absolute; left:12px; top:-80px; z-index:100; padding:10px 14px;
  background:var(--brand); color:var(--on-brand); font-family:var(--f-display); font-size:11px; text-decoration:none;
}
.skip-link:focus{ top:10px; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Sprachabschnitte: boot.js setzt <html lang> vor dem ersten Zeichnen */
html[lang="en"] [data-lang="de"], html:not([lang="en"]) [data-lang="en"]{ display:none!important; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .wrap{ padding:0 16px; } }
@media (min-width:1600px){ :root{ --maxw:1360px; } body{ font-size:19px; } }
main{ flex:1 0 auto; }

/* ================= Flächen ================= */
.frame{
  background:var(--surface); color:var(--text);
  box-shadow:inset 0 0 0 var(--bw) var(--line);
  padding:var(--s-6);
}
.card{
  background:var(--surface); color:var(--text);
  box-shadow:inset 0 0 0 var(--bw) var(--line);
  padding:var(--s-5); position:relative;
}
@media (max-width:600px){ .frame{ padding:var(--s-5) var(--s-4); } .card{ padding:var(--s-4); } }
/* Kasten mit gelber Kante (ersetzt die alte GBA-Textbox) */
.textbox{
  position:relative; background:var(--surface); color:var(--text);
  box-shadow:inset 0 0 0 var(--bw) var(--line), inset 4px 0 0 var(--brand);
  padding:var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 4px);
}

/* ================= Knöpfe ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--ctl-h); padding:0 16px; cursor:pointer; user-select:none; white-space:nowrap;
  font-family:var(--f-ui); font-size:17px; font-weight:500; line-height:1; text-decoration:none; text-align:center;
  color:var(--text); background:var(--surface-2); border:0;
  box-shadow:inset 0 0 0 var(--bw) var(--line-strong);
  transition:background-color .12s ease, filter .12s ease;
}
.btn:hover{ background:var(--surface-3); color:var(--text); }
.btn:active{ transform:translateY(1px); }
.btn .px-ic{ flex:none; }
.btn-primary{ background:var(--brand); color:var(--on-brand); box-shadow:inset 0 -4px 0 rgba(0,0,0,.22); }
.btn-primary:hover{ background:var(--brand); color:var(--on-brand); filter:brightness(1.07); }
.btn-blue{ background:var(--blue); color:var(--on-blue); box-shadow:inset 0 -4px 0 rgba(0,0,0,.22); }
.btn-blue:hover{ background:var(--blue); color:var(--on-blue); filter:brightness(1.07); }
.btn-ghost{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 var(--bw) var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-lg{ height:var(--ctl-h-lg); padding:0 22px; font-size:19px; }
.btn-sm{ height:var(--ctl-h-sm); padding:0 12px; font-size:15px; gap:8px; }
.btn[aria-disabled="true"]{ cursor:not-allowed; background:var(--surface-3); color:var(--text-2); box-shadow:inset 0 0 0 var(--bw) var(--line-strong); filter:none; }
.btn[aria-disabled="true"]:active{ transform:none; }
/* Pfeil-Link "mehr" (ersetzt das alte Guillemet-Zeichen) */
.more{ display:inline-flex; align-items:center; gap:6px; font-weight:500; }
.more::after{ content:''; width:12px; height:12px; flex:none; background:currentColor; -webkit-mask:var(--ic-chev-right) center/12px no-repeat; mask:var(--ic-chev-right) center/12px no-repeat; }

/* Kleine Labels (Press Start) */
.pill{
  display:inline-flex; align-items:center; gap:4px; font-family:var(--f-display); font-size:8px; line-height:1; letter-spacing:1px;
  padding:5px 6px 4px; background:var(--surface-3); color:var(--text-2); vertical-align:middle; white-space:nowrap;
}
.pill-new{ background:var(--brand); color:var(--on-brand); }
.pill-beta{ background:var(--warn-bg); color:var(--warn); box-shadow:inset 0 0 0 1px var(--warn); }
.pill-ok{ background:var(--ok-bg); color:var(--ok); }
.pill-dead{ background:var(--danger); color:var(--on-danger); }
.pill-dim{ background:var(--surface-3); color:var(--text-2); }
.chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; font-size:15px; background:var(--surface-2); color:var(--text-2); box-shadow:inset 0 0 0 var(--bw) var(--line); white-space:nowrap; }
.chip .px-ic{ color:var(--brand-ink); }

/* ================= Kopfzeile ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 calc(-1 * var(--bw)) 0 var(--line);
}
.site-header .wrap{ display:flex; align-items:center; gap:var(--s-4); min-height:64px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; flex-shrink:0; }
.brand .brand-ball{ color:var(--danger); }
.brand-text{ display:flex; flex-direction:column; font-family:var(--f-display); line-height:1.4; }
.brand-text b{ font-weight:400; font-size:12px; color:var(--brand-ink); letter-spacing:1px; }
.brand-text span{ font-size:7px; color:var(--text-3); letter-spacing:1px; }
.brand:hover{ color:var(--text); }
.nav{ display:flex; align-items:center; gap:2px; margin-left:var(--s-5); }
.nav a{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; position:relative;
  font-size:17px; color:var(--text-2); text-decoration:none;
}
.nav a .px-ic{ color:var(--text-3); }
.nav a:hover{ background:var(--surface-2); color:var(--text); }
.nav a[aria-current="page"]{ color:var(--text); background:var(--surface-3); }
.nav a[aria-current="page"] .px-ic{ color:var(--brand-ink); }
.nav a[aria-current="page"]::after{ content:''; position:absolute; left:8px; right:8px; bottom:-12px; height:4px; background:var(--brand); }
.header-tools{ display:flex; align-items:center; gap:var(--s-2); margin-left:auto; }
.seg{ display:inline-flex; align-items:center; gap:2px; padding:2px; background:var(--surface-2); box-shadow:inset 0 0 0 var(--bw) var(--line); }
.seg > .px-ic{ color:var(--text-3); margin:0 4px 0 6px; }
.seg button{
  height:32px; min-width:36px; padding:0 8px; font-family:var(--f-display); font-size:9px; letter-spacing:1px;
  background:transparent; color:var(--text-3); border:0; cursor:pointer;
}
.seg button:hover{ color:var(--text); }
.seg button[aria-pressed="true"]{ background:var(--surface-hi); color:var(--text); }
.icon-btn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  background:var(--surface-2); color:var(--text-2); border:0; box-shadow:inset 0 0 0 var(--bw) var(--line); cursor:pointer; padding:0;
}
.icon-btn:hover{ color:var(--text); background:var(--surface-3); }
.nav-toggle{ display:none; }
@media (max-width:1100px){ .header-dl{ display:none; } }
@media (max-width:880px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%; margin:0; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); box-shadow:inset 0 calc(-1 * var(--bw)) 0 var(--line), 0 12px 24px rgba(0,0,0,.35); padding:var(--s-2) var(--s-4) var(--s-4);
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ height:48px; font-size:18px; }
  .nav a[aria-current="page"]::after{ left:0; right:auto; top:8px; bottom:8px; width:4px; height:auto; }
}
@media (max-width:420px){
  .brand-text span{ display:none; }
  .brand-text b{ font-size:10px; }
  .seg > .px-ic{ display:none; }
  .site-header .wrap{ gap:var(--s-2); }
}
/* Theme-Knopf: Sonne im dunklen Theme (wechselt zu hell), Mond im hellen */
.theme-btn .ico-moon{ display:none; }
[data-theme="kanto"] .theme-btn .ico-sun{ display:none; }
[data-theme="kanto"] .theme-btn .ico-moon{ display:inline-block; }

/* ================= Hero ================= */
.hero{ padding:var(--s-7) 0 var(--s-6); }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:var(--s-7); align-items:center; }
.kicker{ font-family:var(--f-display); font-size:9px; color:var(--ok); letter-spacing:1px; margin-bottom:var(--s-5); display:flex; gap:10px; align-items:center; line-height:1.6; }
.kicker .led{ width:8px; height:8px; background:var(--ok); flex:none; }
.hero h1{ font-size:clamp(22px, 2.6vw, 32px); line-height:1.5; margin-bottom:var(--s-5); }
.hero h1 .hl{ color:var(--brand-ink); }
.hero .lead{ font-size:clamp(18px, 1.6vw, 21px); color:var(--text-2); max-width:40ch; margin-bottom:var(--s-5); }
.hero-facts{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0 0 var(--s-5); padding:0; list-style:none; }
.hero-facts li{ margin:0; }
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }
.dl-meta{ margin:var(--s-3) 0 0; font-size:16px; color:var(--text-3); }
.dl-meta b{ color:var(--text); font-weight:500; }
.dl-soon{ display:none; margin:var(--s-2) 0 0; font-size:16px; color:var(--warn); }
body.dl-pending .dl-soon{ display:block; }
@media (max-width:980px){
  .hero{ padding:var(--s-6) 0 var(--s-5); }
  .hero .wrap{ grid-template-columns:1fr; gap:var(--s-6); }
}
@media (max-width:600px){ .cta-row .btn{ width:100%; } }

/* ================= App-Fenster-Mockup (nachgebaut, Kanto Nacht) ================= */
.device{ position:relative; margin:0; width:100%; }
.device::before{ /* sanftes Leuchten hinter dem Fenster */
  content:''; position:absolute; inset:8% -4% -6% 6%; z-index:-1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--blue) 30%, transparent), transparent);
}
.app-window{ background:#0f0e1a; box-shadow:inset 0 0 0 var(--bw) #34335a, 0 24px 48px rgba(0,0,0,.45); overflow:hidden; }
.app-titlebar{ display:flex; align-items:center; gap:8px; height:30px; padding:0 10px; background:#181727; box-shadow:inset 0 -2px 0 #34335a; font-family:var(--f-display); font-size:7px; letter-spacing:1px; color:#9896c2; }
.app-titlebar .px-ic{ color:#ff6178; }
.app-titlebar .grow{ flex:1; }
.app-titlebar .wc{ display:flex; gap:10px; color:#6a68a6; }
.app-titlebar .wc i{ width:8px; height:2px; background:currentColor; display:block; }
.app-titlebar .wc i + i{ height:8px; background:none; box-shadow:inset 0 0 0 2px currentColor; }
.hero-shot{ display:block; width:100%; }
/* Mit echtem Screenshot (site.js renderHeroShot): Ausschnitt der Cockpit-Aufnahme, die Emulator-Einblendung liegt darüber */
#heroScreen.has-shot{ position:relative; }
#heroScreen.has-shot .shot-crop{ clip-path:none; }
#heroScreen.has-shot .shot-crop::after{ display:none; }
#heroScreen.has-shot .app-toast{ position:absolute; right:12px; bottom:12px; margin:0; max-width:min(78%, 360px); }
@media (max-width:620px){ #heroScreen.has-shot .app-toast{ left:8px; right:8px; bottom:8px; max-width:none; } }
/* Mini-App (rein dekorativ, feste Nacht-Farben – so sieht die App im Standard aus) */
.app{
  --a-bg:#0f0e1a; --a-s1:#181727; --a-s2:#201f33; --a-s3:#2a2942; --a-line:#34335a; --a-t:#efeefa; --a-t2:#bdbbe0; --a-t3:#9896c2;
  display:grid; grid-template-columns:118px minmax(0,1fr); grid-template-rows:auto 1fr; background:var(--a-bg); color:var(--a-t);
  font-family:var(--f-ui); font-size:12px; line-height:1.3; position:relative;
}
.app-side{ grid-row:1 / span 2; background:var(--a-s1); box-shadow:inset -2px 0 0 var(--a-line); padding:8px 6px; display:flex; flex-direction:column; gap:2px; }
.app-side .grp{ font-family:var(--f-display); font-size:5px; letter-spacing:1px; color:var(--a-t3); margin:6px 4px 2px; }
.app-side .grp:first-child{ margin-top:2px; }
.app-side .it{ display:flex; align-items:center; gap:6px; height:20px; padding:0 4px; color:var(--a-t2); font-size:11px; position:relative; white-space:nowrap; overflow:hidden; }
.app-side .it .px-ic{ color:var(--a-t3); }
.app-side .it.on{ background:var(--a-s3); color:var(--a-t); }
.app-side .it.on::before{ content:''; position:absolute; left:-6px; top:3px; bottom:3px; width:3px; background:#ffcb05; }
.app-side .it .n{ margin-left:auto; font-family:var(--f-num); font-size:13px; line-height:1; padding:0 3px; background:var(--a-s3); color:var(--a-t2); }
.app-side .it .n.red{ background:#3a1520; color:#ff6178; }
.app-side .it .n.on{ background:#133526; color:#43d98a; }
.app-main{ min-width:0; display:flex; flex-direction:column; }
.app-top{ display:flex; align-items:center; gap:6px; height:36px; padding:0 8px; box-shadow:inset 0 -2px 0 var(--a-line); background:var(--a-s1); }
.app-cap{ display:flex; align-items:center; gap:6px; height:24px; padding:0 6px 0 4px; background:var(--a-s2); box-shadow:inset 0 0 0 2px var(--a-line); min-width:0; flex:1 1 auto; max-width:250px; }
.app-cap .lv{ display:flex; align-items:center; gap:3px; background:#ffcb05; color:#1a1400; padding:0 4px; height:17px; flex:none; }
.app-cap .lv small{ font-family:var(--f-display); font-size:5px; }
.app-cap .lv b{ font-family:var(--f-num); font-size:17px; font-weight:400; line-height:1; }
.app-cap .t{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.app-top .grow{ flex:1; }
.app-live{ font-family:var(--f-display); font-size:5px; letter-spacing:1px; color:#43d98a; box-shadow:inset 0 0 0 2px #43d98a; height:18px; padding:0 5px; display:flex; align-items:center; gap:4px; flex:none; }
.app-live i{ width:4px; height:4px; background:currentColor; }
.app-av{ width:18px; height:18px; display:grid; place-items:center; font-family:var(--f-display); font-size:6px; color:#0b0b16; position:relative; flex:none; }
.app-av.p1{ background:#6cb8ff; } .app-av.p2{ background:#ff94cc; }
.app-av::after{ content:''; position:absolute; right:-2px; bottom:-2px; width:5px; height:5px; background:#43d98a; box-shadow:0 0 0 1px var(--a-s1); }
.app-body{ padding:10px; display:grid; gap:8px; }
.app-h{ display:flex; align-items:center; gap:6px; font-family:var(--f-display); font-size:7px; letter-spacing:1px; color:var(--a-t); }
.app-h .px-ic{ color:#ffcb05; }
.app-h .sub{ font-family:var(--f-ui); font-size:10px; letter-spacing:0; color:var(--a-t3); }
.app-rows{ display:grid; gap:0; box-shadow:inset 0 0 0 2px var(--a-line); background:var(--a-s1); }
.app-row{ display:grid; grid-template-columns:62px minmax(0,1fr) 16px minmax(0,1fr) 54px; gap:6px; align-items:center; min-height:34px; padding:3px 8px; box-shadow:inset 0 -1px 0 var(--a-line); }
.app-row:last-child{ box-shadow:none; }
.app-row.team{ box-shadow:inset 3px 0 0 #ffcb05, inset 0 -1px 0 var(--a-line); }
.app-row .route{ font-size:10px; color:var(--a-t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-row .mon{ display:flex; align-items:center; gap:5px; min-width:0; }
.app-row .mon .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.app-row .mon .lvl{ font-family:var(--f-num); font-size:14px; color:var(--a-t3); line-height:1; }
.app-row .chain{ color:var(--a-t3); }
.app-row .st{ display:flex; align-items:center; gap:3px; font-size:10px; color:#43d98a; justify-self:end; }
.app-row .st.open{ color:#ffb547; }
.app-row .st.dead{ color:#ff6178; }
.app-row.dead .nm{ text-decoration:line-through; color:var(--a-t3); }
.app-row.open{ background:repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.025) 6px 12px); }
.ball{ width:14px; height:14px; flex:none; position:relative; background:linear-gradient(180deg, #ff6178 0 42%, #0f0e1a 42% 58%, #efeefa 58%); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.ball.p2{ background:linear-gradient(180deg, #ff94cc 0 42%, #0f0e1a 42% 58%, #efeefa 58%); }
.ball.p1{ background:linear-gradient(180deg, #6cb8ff 0 42%, #0f0e1a 42% 58%, #efeefa 58%); }
.ball.dead{ filter:grayscale(1) brightness(.7); }
.app-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.app-stat{ background:var(--a-s2); box-shadow:inset 0 0 0 2px var(--a-line); padding:5px 7px; }
.app-stat b{ display:block; font-family:var(--f-num); font-size:22px; font-weight:400; line-height:.95; }
.app-stat span{ font-size:9px; color:var(--a-t3); }
.app-stat.ok b{ color:#43d98a; } .app-stat.warn b{ color:#ffb547; } .app-stat.danger b{ color:#ff6178; }
.app-toast{
  grid-column:2; justify-self:end; margin:0 10px 10px; max-width:78%; display:flex; gap:8px; align-items:flex-start;
  background:#201f33; color:#efeefa; box-shadow:inset 0 0 0 2px #7d8cff, 0 8px 18px rgba(0,0,0,.45);
  padding:7px 10px; font-size:11px; line-height:1.3;
  animation:jx-toast 8s ease-in-out infinite;
}
.app-toast .px-ic{ color:#7d8cff; margin-top:1px; }
.app-toast b{ display:block; font-family:var(--f-display); font-size:6px; letter-spacing:1px; color:#7d8cff; font-weight:400; margin-bottom:3px; }
@keyframes jx-toast{
  0%,82%{ transform:translateY(0); opacity:1; }
  88%,90%{ transform:translateY(8px); opacity:0; }
  96%,100%{ transform:translateY(0); opacity:1; }
}
@media (max-width:620px){
  .app{ grid-template-columns:1fr; min-height:0; }
  .app-side{ display:none; }
  .app-row{ grid-template-columns:52px minmax(0,1fr) 12px minmax(0,1fr); }
  .app-row .st{ display:none; }
  .app-live, .app-av{ display:none; }
  .app-toast{ grid-column:1; justify-self:stretch; max-width:none; animation:none; }
}

/* ================= Abschnitte ================= */
.section{ padding:var(--s-7) 0; }
.section + .section{ padding-top:var(--s-4); }
.section-head{ margin:0 0 var(--s-6); max-width:780px; }
.section-head.center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head h2{ font-size:clamp(16px, 2.1vw, 22px); line-height:1.5; margin-bottom:var(--s-3); }
.section-head p{ color:var(--text-2); font-size:19px; margin:0; }
.eyebrow{ font-family:var(--f-display); font-size:9px; letter-spacing:2px; color:var(--brand-ink); display:inline-flex; gap:8px; align-items:center; margin-bottom:var(--s-3); }
@media (max-width:600px){ .section{ padding:var(--s-6) 0; } }

/* Spotlight-Reihen: Text + Mockup abwechselnd */
.spot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7); align-items:center; padding:var(--s-6) 0; }
.spot + .spot{ box-shadow:inset 0 var(--bw) 0 var(--line); }
.spot.flip .spot-text{ order:2; }
.spot-text h3{ font-size:clamp(14px, 1.6vw, 17px); line-height:1.55; margin-bottom:var(--s-3); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.spot-text > p{ color:var(--text-2); font-size:19px; }
.spot-text > p:last-child{ margin-top:var(--s-4); margin-bottom:0; }
.spot-ic{ width:48px; height:48px; display:grid; place-items:center; background:var(--surface-2); box-shadow:inset 0 0 0 var(--bw) var(--line); color:var(--brand-ink); margin-bottom:var(--s-4); }
.ticks{ list-style:none; padding:0; margin:var(--s-4) 0 0; display:grid; gap:var(--s-2); }
.ticks li{ position:relative; padding-left:28px; margin:0; color:var(--text); font-size:17px; }
.ticks li::before{ content:''; position:absolute; left:0; top:5px; width:16px; height:16px; background:var(--ok); -webkit-mask:var(--ic-check) center/12px no-repeat; mask:var(--ic-check) center/12px no-repeat; }
.ticks li.warn::before{ background:var(--warn); -webkit-mask-image:var(--ic-warn); mask-image:var(--ic-warn); }
.honest{ margin-top:var(--s-4); font-size:16px; color:var(--text-2); padding:var(--s-3) var(--s-4); background:var(--warn-bg); box-shadow:inset 4px 0 0 var(--warn); }
.honest b{ color:var(--warn); }
@media (max-width:900px){
  .spot{ grid-template-columns:1fr; gap:var(--s-5); padding:var(--s-5) 0; }
  .spot.flip .spot-text{ order:0; }
}

/* Kleine Mockup-Karten für die Spotlights (dekorativ, Theme-Farben) */
.mini{ background:var(--surface); box-shadow:inset 0 0 0 var(--bw) var(--line), var(--shadow); padding:var(--s-4); font-size:15px; }
.mini-h{ display:flex; align-items:center; gap:8px; font-family:var(--f-display); font-size:8px; letter-spacing:1px; color:var(--text-2); margin-bottom:var(--s-3); }
.mini-h .px-ic{ color:var(--text-3); }
.mini-h .grow{ flex:1; }
.mini + .mini{ margin-top:var(--s-3); }
.duo{ display:grid; gap:0; box-shadow:inset 0 0 0 var(--bw) var(--line); }
.duo-row{ display:grid; grid-template-columns:78px minmax(0,1fr) 20px minmax(0,1fr); align-items:center; gap:8px; padding:8px 10px; box-shadow:inset 0 -1px 0 var(--line); }
.duo-row:last-child{ box-shadow:none; }
.duo-row.head{ font-family:var(--f-display); font-size:7px; letter-spacing:1px; color:var(--text-3); padding-top:6px; padding-bottom:6px; }
.duo-row.head .p1{ color:var(--p1); } .duo-row.head .p2{ color:var(--p2); }
.duo-row .r{ font-size:14px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.duo-row .m{ display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.duo-row .m small{ font-family:var(--f-num); font-size:17px; color:var(--text-3); }
.duo-row .c{ color:var(--text-3); }
.duo-row.dead .m span{ text-decoration:line-through; color:var(--text-3); }
.duo-row.dead .c{ color:var(--danger); }
@media (max-width:480px){ .duo-row{ grid-template-columns:62px minmax(0,1fr) 12px minmax(0,1fr); gap:6px; padding:8px; } .duo-row .m small{ display:none; } }
.sync-line{ display:flex; align-items:center; gap:8px; margin-top:var(--s-3); font-size:14px; color:var(--text-2); flex-wrap:wrap; }
.sync-line .av{ width:22px; height:22px; display:grid; place-items:center; font-family:var(--f-display); font-size:8px; color:#0b0b16; position:relative; }
.sync-line .av.p1{ background:var(--p1); } .sync-line .av.p2{ background:var(--p2); }
.sync-line .av::after{ content:''; position:absolute; right:-3px; bottom:-3px; width:7px; height:7px; background:var(--ok); box-shadow:0 0 0 2px var(--surface); }
.sync-line .ok{ color:var(--ok); display:inline-flex; align-items:center; gap:4px; margin-left:auto; }
/* Emulator-Ereignis */
.event{ display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-3); background:var(--surface-2); box-shadow:inset 0 0 0 var(--bw) var(--blue); }
.event .px-ic{ color:var(--blue); }
.event p{ margin:0 0 var(--s-2); font-size:16px; }
.event .acts{ display:flex; gap:var(--s-2); flex-wrap:wrap; }
.emus{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
.emu{ padding:var(--s-3); background:var(--surface-2); box-shadow:inset 0 0 0 var(--bw) var(--line); font-size:14px; color:var(--text-2); }
.emu b{ display:flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:400; font-size:8px; letter-spacing:1px; color:var(--text); margin-bottom:6px; }
.emu b .px-ic{ color:var(--brand-ink); }
.emu .pill{ margin-left:auto; }
@media (max-width:480px){ .emus{ grid-template-columns:1fr; } }
/* Cap-Karte */
.capcard{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-4); align-items:center; }
.cap-big{ background:var(--brand); color:var(--on-brand); padding:8px 14px 4px; text-align:center; }
.cap-big small{ display:block; font-family:var(--f-display); font-size:7px; letter-spacing:1px; }
.cap-big b{ display:block; font-family:var(--f-num); font-size:52px; font-weight:400; line-height:1; }
.cap-who{ display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.trainer{ width:56px; height:56px; flex:none; display:grid; place-items:center; background:var(--surface-2); box-shadow:inset 0 0 0 var(--bw) var(--line); color:var(--text-3); }
.cap-who strong{ display:block; font-size:18px; font-weight:600; }
.cap-who span{ font-size:14px; color:var(--text-3); }
.lvls{ display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.lvls i{ font-style:normal; font-family:var(--f-num); font-size:17px; line-height:1; padding:2px 6px; background:var(--surface-3); color:var(--text-2); }
.lvls i.ace{ box-shadow:inset 0 0 0 1px var(--danger); color:var(--danger); }
.badgerow{ display:flex; gap:6px; align-items:center; margin-top:var(--s-3); flex-wrap:wrap; }
.badgerow .px-ic{ color:var(--surface-hi); }
.badgerow .px-ic.on{ color:var(--brand-ink); }
.badgerow .n{ font-family:var(--f-num); font-size:18px; color:var(--text-2); margin-left:4px; }
.verified{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:var(--s-3); }
.calc-line{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-3); padding-top:var(--s-3); box-shadow:inset 0 var(--bw) 0 var(--line); font-size:14px; color:var(--text-2); flex-wrap:wrap; }
/* Overlay-Leiste (Overlay 2.0, Clean Dark) */
.ovl{ background:#0e1020; color:#f2f3ff; padding:var(--s-3) var(--s-4); display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow); border-radius:6px; font-family:system-ui, sans-serif; }
.ovl .timer{ font-family:var(--f-num); font-size:44px; line-height:1; letter-spacing:1px; display:flex; align-items:center; gap:10px; }
.ovl .timer i{ width:8px; height:8px; background:#43d98a; border-radius:50%; }
.ovl .deaths{ display:flex; align-items:center; gap:8px; color:#ff6178; }
.ovl .deaths b{ font-family:var(--f-num); font-size:40px; font-weight:400; line-height:1; }
.ovl .deaths span{ font-size:11px; letter-spacing:2px; color:#c9cbe8; text-transform:uppercase; line-height:1.3; }
.ovl .deaths span small{ display:block; letter-spacing:0; text-transform:none; font-size:12px; color:#9a9cc0; }
.ovl .grow{ flex:1; }
.ovl .bd{ display:flex; gap:4px; }
.ovl .bd .px-ic{ color:#3a3d5c; } .ovl .bd .px-ic.on{ color:#ffcb05; }
.ovl-alert{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-3); background:#0e1020; color:#f2f3ff; border-radius:6px; padding:10px 14px; box-shadow:inset 3px 0 0 #ff6178, var(--shadow); font-family:system-ui, sans-serif; font-size:15px; }
.ovl-alert .px-ic{ color:#ff6178; }
.ovl-alert b{ display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#ff6178; }
.ovl-layouts{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:var(--s-3); }

/* Feature-Raster ("Und außerdem") */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--s-4); }
.feature{ display:flex; flex-direction:column; gap:var(--s-2); }
.feature > .px-ic{ color:var(--brand-ink); margin-bottom:var(--s-1); }
.feature h3{ margin:0; font-size:11px; line-height:1.7; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.feature p{ margin:0; color:var(--text-2); font-size:17px; }
.scan{ transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.scan:hover{ background:var(--surface-2); }

/* Screenshot-Galerie mit Platzhaltern */
.shots{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-5) var(--s-4); align-items:start; }
.shots .wide{ grid-column:span 2; grid-row:span 2; }
.shot-fig{ margin:0; display:flex; flex-direction:column; gap:var(--s-2); }
.shot-fig figcaption{ font-size:16px; color:var(--text-2); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.shot-fig figcaption b{ text-transform:uppercase; font-family:var(--f-display); font-weight:400; font-size:9px; letter-spacing:1px; color:var(--text); }
.shot{ position:relative; aspect-ratio:16/10; background:var(--surface); box-shadow:inset 0 0 0 var(--bw) var(--line); overflow:hidden; }
.shot img{ display:block; width:100%; height:100%; object-fit:cover; }
.shot.ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-3); text-align:center; padding:var(--s-5);
  background:
    repeating-linear-gradient(135deg, var(--stripe) 0 12px, transparent 12px 24px),
    var(--surface);
}
.shot.ph::before{ /* gestrichelter Innenrahmen = "hier kommt was hin" */
  content:''; position:absolute; inset:12px; border:2px dashed var(--line-strong); pointer-events:none;
}
.shot.ph .px-ic{ color:var(--text-3); }
.shot.ph .ph-t{ font-family:var(--f-display); font-size:9px; letter-spacing:2px; color:var(--text-2); }
.shot.ph .ph-s{ font-family:var(--f-num); font-size:18px; color:var(--text-3); }
.shot .corner{ position:absolute; width:14px; height:14px; border-color:var(--brand); border-style:solid; }
.shot .corner.tl{ left:6px; top:6px; border-width:2px 0 0 2px; } .shot .corner.tr{ right:6px; top:6px; border-width:2px 2px 0 0; }
.shot .corner.bl{ left:6px; bottom:6px; border-width:0 0 2px 2px; } .shot .corner.br{ right:6px; bottom:6px; border-width:0 2px 2px 0; }
/* Echte Bilder aus img/shots (tools/make-screenshots.mjs): Link aufs große Bild, per JS als Lightbox */
a.shot{ display:block; cursor:zoom-in; }
.shot.r169{ aspect-ratio:16/9; }
a.shot::after, .shot-crop::after{ /* Rahmen über dem Bild (ein Innenschatten läge darunter) */
  content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 var(--bw) var(--line); transition:box-shadow .15s;
}
a.shot:hover::after, .shot-crop:hover::after{ box-shadow:inset 0 0 0 var(--bw) var(--brand); }
a.shot:focus-visible, .shot-crop:focus-visible{ outline:none; }
a.shot:focus-visible::after, .shot-crop:focus-visible::after{ box-shadow:inset 0 0 0 3px var(--focus); }
/* Ausschnitt eines 1600×1000-Bildes: --cx/--cy/--cw/--ch in Bildpixeln (inline gesetzt) */
.shot-crop{
  display:block; position:relative; overflow:hidden; cursor:zoom-in; background:var(--surface);
  aspect-ratio:var(--cw) / var(--ch);
  clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,100% var(--notch),100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,var(--notch) 100%,0 calc(100% - var(--notch)),0 var(--notch));
}
.shot-crop img{
  position:absolute; max-width:none; height:auto;
  width:calc(1600 / var(--cw) * 100%); left:calc(var(--cx) / var(--cw) * -100%); top:calc(var(--cy) / var(--ch) * -100%);
}
.spot-vis > .shot-crop, .spot-vis > a.shot{ box-shadow:var(--shadow); }
.help-shot{ margin:var(--s-4) 0 var(--s-5); }
.help-shot figcaption{ margin-top:var(--s-2); font-size:15px; color:var(--text-2); }
/* Lightbox (dialog, nur mit JS) */
dialog.lightbox{ padding:0; border:0; background:transparent; color:#efeefa; max-width:100vw; max-height:100vh; overflow:visible; }
dialog.lightbox::backdrop{ background:rgba(8,8,18,.9); }
.lightbox figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.lightbox img{ display:block; width:auto; height:auto; max-width:min(1600px, calc(100vw - 128px)); max-height:calc(100vh - 90px); box-shadow:0 0 0 2px #34335a, 0 24px 64px rgba(0,0,0,.6); }
.lightbox figcaption{ max-width:min(1100px, calc(100vw - 32px)); font-size:16px; text-align:center; color:#d6d4f2; }
.lb-btn{ position:fixed; width:44px; height:44px; display:grid; place-items:center; border:0; cursor:pointer; background:#201f33; color:#efeefa; box-shadow:inset 0 0 0 2px #34335a; }
.lb-btn:hover{ box-shadow:inset 0 0 0 2px #ffcb05; color:#ffcb05; }
.lb-btn:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--focus); }
.lb-close{ top:12px; right:12px; }
.lb-prev{ left:12px; top:calc(50% - 22px); } .lb-next{ right:12px; top:calc(50% - 22px); }
.lightbox.single .lb-prev, .lightbox.single .lb-next{ display:none; }
@media (max-width:700px){
  .lightbox img{ max-width:calc(100vw - 16px); max-height:calc(100vh - 150px); }
  .lb-prev, .lb-next{ top:auto; bottom:12px; } .lb-prev{ left:calc(50% - 56px); } .lb-next{ right:calc(50% - 56px); }
}
@media (max-width:980px){ .shots{ grid-template-columns:repeat(2, minmax(0,1fr)); } .shots .wide{ grid-row:auto; } }
@media (max-width:600px){ .shots{ grid-template-columns:1fr; } .shots .wide{ grid-column:auto; } }

/* So funktioniert Soullink */
.steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-5); list-style:none; padding:0; margin:0; }
.step{ position:relative; margin:0; }
.step .num{
  display:inline-grid; place-items:center; width:36px; height:36px; margin-bottom:var(--s-3);
  font-family:var(--f-display); font-size:14px; background:var(--brand); color:var(--on-brand);
}
.step h3{ margin-bottom:var(--s-2); }
.step p{ margin:0; color:var(--text-2); font-size:17px; }
.chain-demo{ display:flex; align-items:center; gap:8px; margin:var(--s-2) 0 var(--s-3); color:var(--text-3); }
.chain-demo .ball{ width:20px; height:20px; }
.chain-demo.broken .px-ic{ color:var(--danger); }
.chain-demo.broken .ball:last-child{ filter:grayscale(1); opacity:.6; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }

/* Systemanforderungen + FAQ-Teaser */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--s-5); align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.req{ list-style:none; padding:0; margin:0; display:grid; }
.req li{ display:grid; grid-template-columns:minmax(120px, 36%) 1fr; gap:var(--s-3); padding:var(--s-3) 0; margin:0; box-shadow:inset 0 -1px 0 var(--line); font-size:17px; }
.req li:last-child{ box-shadow:none; }
.req b{ font-family:var(--f-display); font-weight:400; font-size:8px; letter-spacing:1px; line-height:2.2; color:var(--text-3); }
@media (max-width:420px){ .req li{ grid-template-columns:1fr; gap:2px; } }

details.faq{ background:var(--surface-2); box-shadow:inset 0 0 0 var(--bw) var(--line); margin-bottom:var(--s-2); }
details.faq[open]{ box-shadow:inset 0 0 0 var(--bw) var(--line-strong); }
details.faq summary{
  cursor:pointer; list-style:none; padding:14px 48px 14px 16px; position:relative;
  font-size:17px; font-weight:600; line-height:1.4;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{
  content:''; position:absolute; right:16px; top:50%; width:12px; height:12px; margin-top:-6px; background:var(--brand);
  -webkit-mask:var(--ic-chev-down) center/12px no-repeat; mask:var(--ic-chev-down) center/12px no-repeat; transition:transform .15s ease;
}
details.faq[open] summary::after{ transform:rotate(180deg); }
details.faq summary:hover{ color:var(--text); background:var(--surface-3); }
details.faq .faq-body{ padding:0 16px 14px; color:var(--text-2); }
details.faq .faq-body p:last-child{ margin-bottom:0; }

/* Abschluss-Band */
.cta-band{ text-align:center; padding:var(--s-7) var(--s-5); background:
  radial-gradient(600px 220px at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%), var(--surface); }
.cta-band h2{ margin-bottom:var(--s-3); }
.cta-band p{ color:var(--text-2); }
.cta-band .cta-row{ justify-content:center; margin-top:var(--s-4); }

/* Hinweis für alte Browser-Tracker-Links (?room= / ?overlay=1) */
.legacy{ display:none; margin:var(--s-5) auto 0; max-width:var(--maxw); padding:0 24px; }
.legacy.show{ display:block; }
.legacy .textbox{ box-shadow:inset 0 0 0 var(--bw) var(--line), inset 4px 0 0 var(--danger); }

/* Overlay-Modus für alte OBS-Adressen (?overlay=1 / ?element=…, Klasse setzt boot.js):
   komplett transparent, die ganze Seite aus, nur ein kleines Banner unten links. */
html.overlay-mode, html.overlay-mode body{ background:transparent!important; min-height:0; }
html.overlay-mode body > *{ display:none!important; }
html.overlay-mode body > .ov-banner{ display:block!important; }
.ov-banner{ display:none; position:fixed; left:12px; bottom:12px; max-width:min(560px, calc(100vw - 24px));
  padding:8px 12px; background:rgba(15,14,26,.86); color:#efeefa; box-shadow:inset 0 0 0 2px #ff6178;
  font-family:var(--f-ui); font-size:17px; line-height:1.3; }
.ov-banner b{ font-family:var(--f-display); font-weight:400; font-size:10px; color:#ffcb05; display:block; margin-bottom:4px; }

/* ================= Unterseiten ================= */
.page-hero{ padding:var(--s-6) 0 var(--s-5); }
.page-hero h1{ margin-bottom:var(--s-3); }
.page-hero p.lead{ font-size:19px; color:var(--text-2); max-width:64ch; margin:0; }
.crumbs{ font-size:15px; margin-bottom:var(--s-4); color:var(--text-3); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumbs a{ color:var(--text-2); }
.crumbs a:hover{ color:var(--text); }
.crumbs span[aria-hidden]{ color:var(--text-3); }

.layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:var(--s-6); align-items:start; padding-bottom:var(--s-7); }
.layout > .frame{ min-width:0; }
@media (max-width:980px){ .layout{ grid-template-columns:1fr; gap:var(--s-4); } }

.toc{ position:sticky; top:88px; }
.toc .toc-title{ font-family:var(--f-display); font-size:8px; letter-spacing:2px; color:var(--text-3); margin-bottom:var(--s-3); }
.toc ol{ list-style:none; padding:0; margin:0; box-shadow:inset var(--bw) 0 0 var(--line); }
.toc li{ margin:0; }
.toc a{ display:block; padding:6px 10px 6px 14px; color:var(--text-2); text-decoration:none; font-size:16px; line-height:1.3; box-shadow:inset var(--bw) 0 0 transparent; }
.toc a:hover{ color:var(--text); background:var(--surface-2); }
.toc a.active{ color:var(--text); box-shadow:inset 4px 0 0 var(--brand); background:var(--surface-2); }
@media (max-width:980px){
  .toc{ position:static; }
  .toc details{ background:var(--surface); box-shadow:inset 0 0 0 var(--bw) var(--line); padding:var(--s-3) var(--s-4); }
  .toc details .toc-title{ margin:0; }
  .toc details[open] .toc-title{ margin-bottom:var(--s-3); }
}
.toc summary{ cursor:pointer; list-style:none; }
.toc summary::-webkit-details-marker{ display:none; }
@media (min-width:981px){ .toc summary{ pointer-events:none; } }

.prose{ font-size:18px; }
.prose h2{ margin-top:var(--s-7); padding-top:var(--s-2); font-size:clamp(13px, 1.5vw, 15px); scroll-margin-top:96px; display:flex; gap:12px; align-items:baseline; }
.prose h2::before{ content:''; width:8px; height:8px; background:var(--brand); flex:none; transform:translateY(-2px); }
.prose section:first-of-type h2{ margin-top:0; }
.prose section{ scroll-margin-top:96px; }
.prose h3{ margin-top:var(--s-5); font-size:11px; color:var(--text-2); }
.prose p, .prose li{ font-size:18px; }
.prose li::marker{ color:var(--text-3); }
.prose ol.steps-list{ counter-reset:s; list-style:none; padding:0; }
.prose ol.steps-list > li{ counter-increment:s; position:relative; padding-left:48px; margin:var(--s-3) 0; min-height:32px; }
.prose ol.steps-list > li::before{
  content:counter(s); position:absolute; left:0; top:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:11px; background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 var(--bw) var(--line-strong);
}
.prose b .px-ic, .prose td .px-ic, .prose li .px-ic{ vertical-align:-2px; }
.note{ background:var(--surface-2); box-shadow:inset 0 0 0 var(--bw) var(--line), inset 4px 0 0 var(--blue); padding:var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 8px); margin:var(--s-4) 0; }
.note.tip{ box-shadow:inset 0 0 0 var(--bw) var(--line), inset 4px 0 0 var(--ok); }
.note.warn{ box-shadow:inset 0 0 0 var(--bw) var(--line), inset 4px 0 0 var(--warn); }
.note.danger{ box-shadow:inset 0 0 0 var(--bw) var(--line), inset 4px 0 0 var(--danger); }
.note .note-t{ font-family:var(--f-display); font-size:8px; letter-spacing:1px; display:flex; align-items:center; gap:8px; margin-bottom:var(--s-2); color:var(--blue); }
.note .note-t::before{ content:''; width:12px; height:12px; background:currentColor; -webkit-mask:var(--ic-info) center/12px no-repeat; mask:var(--ic-info) center/12px no-repeat; }
.note.tip .note-t{ color:var(--ok); } .note.tip .note-t::before{ -webkit-mask-image:var(--ic-bolt); mask-image:var(--ic-bolt); }
.note.warn .note-t{ color:var(--warn); } .note.warn .note-t::before{ -webkit-mask-image:var(--ic-warn); mask-image:var(--ic-warn); }
.note.danger .note-t{ color:var(--danger); } .note.danger .note-t::before{ -webkit-mask-image:var(--ic-warn); mask-image:var(--ic-warn); }
.note p:last-child{ margin-bottom:0; }
.table-wrap{ overflow-x:auto; margin:var(--s-3) 0 var(--s-5); box-shadow:inset 0 0 0 var(--bw) var(--line); }
table{ border-collapse:collapse; width:100%; font-size:17px; }
th,td{ text-align:left; padding:10px 14px; box-shadow:inset 0 -1px 0 var(--line); vertical-align:top; }
th{ text-transform:uppercase; font-family:var(--f-display); font-weight:400; font-size:8px; letter-spacing:1px; background:var(--surface-2); color:var(--text-2); line-height:1.9; }
tr:last-child td{ box-shadow:none; }

.related{ margin-top:var(--s-7); }
.related ul{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:var(--s-2); }
.related li{ margin:0; }
.related a{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface-2); box-shadow:inset 0 0 0 var(--bw) var(--line); text-decoration:none; color:var(--text); font-size:17px; }
.related a:hover{ box-shadow:inset 0 0 0 var(--bw) var(--line-strong); background:var(--surface-3); }
.related a::before{ content:''; width:12px; height:12px; flex:none; background:var(--brand); -webkit-mask:var(--ic-chev-right) center/12px no-repeat; mask:var(--ic-chev-right) center/12px no-repeat; }

.helpful{ margin-top:var(--s-6); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); padding-top:var(--s-4); box-shadow:inset 0 var(--bw) 0 var(--line); }
.helpful .q{ font-family:var(--f-display); font-size:9px; letter-spacing:1px; }
.helpful .thanks{ color:var(--text-2); }

/* Kommentar-Marker für Stellen, die nach dem App-Umbau angepasst werden (nur im Quelltext sichtbar) */

/* ================= Mockups (eigene Nachbauten, keine Original-Screenshots) ================= */
.mock{ margin:var(--s-4) 0 var(--s-5); }
.mock-cap{ font-size:16px; color:var(--text-3); margin-top:var(--s-2); }
.mock-win{ max-width:560px; background:#fff; color:#1b1b1b; border:1px solid #9a9a9a; border-radius:8px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.35); font-family:'Segoe UI', system-ui, sans-serif; font-size:15px; line-height:1.45; }
.mock-win .mw-title{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:#f3f3f3; border-bottom:1px solid #ddd; font-size:13px; }
.mock-win .mw-title .x{ margin-left:auto; color:#555; display:inline-flex; }
.mock-win .mw-body{ padding:16px 18px; }
.mock-win button{ font:inherit; }
.mw-btn{ padding:6px 16px; border-radius:4px; border:1px solid #8a8a8a; background:#fdfdfd; color:#1b1b1b; cursor:pointer; min-width:96px; }
.mw-btn.primary{ background:#0b5cad; color:#fff; border-color:#0b5cad; }
.mw-row{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.mw-file{ display:flex; gap:12px; align-items:center; padding:10px; border:1px solid #e1e1e1; border-radius:6px; background:#fafafa; }
.mw-file .ico{ width:34px; height:40px; background:linear-gradient(180deg,#e9eef7,#c9d4e8); border:1px solid #8ea0c0; border-radius:3px; position:relative; flex-shrink:0; }
.mw-file .ico::after{ content:''; position:absolute; right:-1px; top:-1px; width:10px; height:10px; background:#fff; border-left:1px solid #8ea0c0; border-bottom:1px solid #8ea0c0; }
.mw-file .meta{ min-width:0; }
.mw-file .meta b{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mw-file .meta small{ color:#a4262c; }
.mw-menu{ display:inline-flex; flex-direction:column; border:1px solid #d6d6d6; border-radius:6px; box-shadow:0 6px 14px rgba(0,0,0,.18); margin-top:10px; background:#fff; overflow:hidden; }
.mw-menu span{ padding:6px 16px; }
.mw-menu span.hit{ background:#e5f0fb; outline:2px solid #0b5cad; outline-offset:-2px; }
.mw-dots{ display:inline-block; padding:0 8px; border:1px solid #bbb; border-radius:4px; margin-left:auto; }

/* SmartScreen-Nachbau: eigenes Layout in den typischen Farben, interaktiv (2 Zustände) */
.ss{ max-width:560px; background:#1f5fae; color:#fff; font-family:'Segoe UI', system-ui, sans-serif; padding:22px 26px 18px; box-shadow:0 12px 28px rgba(0,0,0,.4); border:1px solid #174a88; }
.ss .ss-title{ font-family:'Segoe UI', system-ui, sans-serif; font-size:24px; font-weight:300; letter-spacing:0; line-height:1.25; margin:0 0 14px; color:#fff; }
.ss p{ font-size:15px; line-height:1.5; margin:0 0 10px; }
.ss .ss-more{ background:none; border:0; padding:0; color:#fff; text-decoration:underline; font:inherit; font-size:15px; cursor:pointer; }
.ss .ss-details{ display:none; font-size:15px; line-height:1.6; margin:6px 0 4px; }
.ss .ss-details dt{ display:inline; opacity:.85; }
.ss .ss-details dd{ display:inline; margin:0 0 0 6px; font-weight:600; }
.ss.expanded .ss-details{ display:block; }
.ss .ss-row{ display:flex; gap:10px; justify-content:flex-end; margin-top:26px; flex-wrap:wrap; }
.ss .ss-btn{ font:inherit; font-size:15px; padding:6px 18px; min-width:120px; background:#fff; color:#1b1b1b; border:2px solid #fff; cursor:pointer; }
.ss .ss-btn.run{ display:none; background:transparent; color:#fff; }
.ss.expanded .ss-btn.run{ display:inline-block; }
.ss .ss-btn.pulse{ animation:jx-ring 1.4s ease-in-out infinite; }
@keyframes jx-ring{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,203,5,.9); } 50%{ box-shadow:0 0 0 6px rgba(255,203,5,0); } }
.ss-done{ display:none; margin-top:12px; font-size:15px; background:rgba(0,0,0,.2); padding:8px 10px; }
.ss-done .px-ic{ margin-right:6px; vertical-align:-2px; }
.ss.ran .ss-done{ display:block; }

/* Installer-Nachbau */
.inst{ max-width:560px; }
.inst .mw-body{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; min-height:210px; }
.inst .side{ background:linear-gradient(180deg,#3346c4,#0f0e1a); border-radius:4px; display:flex; align-items:flex-end; justify-content:center; padding:12px; color:#ff6178; }
.inst .side img{ width:64px; height:64px; image-rendering:pixelated; }
.inst .pane{ display:none; }
.inst .pane.on{ display:block; }
.inst .path{ border:1px solid #bbb; padding:5px 8px; border-radius:3px; background:#fff; font-family:Consolas, monospace; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.inst .prog{ height:16px; border:1px solid #9a9a9a; background:#eee; border-radius:3px; overflow:hidden; margin:12px 0; }
.inst .prog i{ display:block; height:100%; width:72%; background:repeating-linear-gradient(90deg,#2fa84f 0 10px,#35bd5a 10px 20px); }
.inst label{ display:flex; gap:8px; align-items:center; }
.inst-tabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:var(--s-3); }
.inst-tabs button{ font-family:var(--f-display); font-size:8px; letter-spacing:1px; height:34px; padding:0 12px; background:var(--surface-2); color:var(--text-2); border:0; box-shadow:inset 0 0 0 var(--bw) var(--line); cursor:pointer; }
.inst-tabs button:hover{ color:var(--text); }
.inst-tabs button[aria-selected="true"]{ background:var(--brand); color:var(--on-brand); box-shadow:none; }
.inst-tabs button:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--bg); }
@media (max-width:520px){ .inst .mw-body{ grid-template-columns:1fr; } .inst .side{ display:none; } }

/* Tracker-Nachbauten (Sprach-Gate, Startmenü, Dialog) im App-Stil Kanto Nacht */
.gate-mock{ max-width:min(520px, 100%); background:#181727; color:#efeefa; box-shadow:inset 0 0 0 2px #34335a, 0 16px 32px rgba(0,0,0,.35); padding:18px; margin:0; font-family:var(--f-ui); }
.gate-mock .g-title{ font-family:var(--f-display); font-size:10px; letter-spacing:1px; color:#ffcb05; margin-bottom:12px; }
.gate-mock .g-opt{ display:block; width:100%; text-align:left; background:#201f33; box-shadow:inset 0 0 0 2px #34335a; padding:10px 12px; margin-bottom:8px; font-size:16px; color:#bdbbe0; }
.gate-mock .g-opt b{ display:block; font-family:var(--f-display); font-weight:400; font-size:9px; margin-bottom:4px; color:#efeefa; letter-spacing:1px; }
.gate-mock .g-opt.hit{ background:#ffcb05; color:#1a1400; box-shadow:none; }
.gate-mock .g-opt.hit b{ color:#1a1400; }
.gate-mock .g-row{ display:flex; gap:8px; flex-wrap:wrap; }
.gate-mock .g-input{ flex:1; min-width:140px; background:#0f0e1a; box-shadow:inset 0 0 0 2px #6a68a6; padding:6px 10px; font-family:var(--f-num); font-size:22px; letter-spacing:3px; color:#efeefa; }
.gate-mock .g-btn{ font-size:16px; background:#ffcb05; color:#1a1400; padding:8px 14px; }
.gate-mock .g-lang{ display:flex; gap:10px; }
.gate-mock .g-lang span{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font-size:17px; padding:14px 8px; background:#201f33; box-shadow:inset 0 0 0 2px #34335a; }
.gate-mock .g-lang span.hit{ background:#ffcb05; color:#1a1400; box-shadow:none; }
.gate-mock .g-hint{ font-size:15px; color:#9896c2; margin-top:8px; }
.prose .gate-mock p{ font-size:15px; }

/* ================= Hilfezentrum ================= */
.search-box{ position:relative; max-width:760px; }
.search-box input{
  width:100%; font-family:var(--f-ui); font-size:21px; height:60px; padding:0 18px 0 56px;
  background:var(--surface); color:var(--text); border:0; box-shadow:inset 0 0 0 var(--bw) var(--line-strong), var(--shadow);
}
.search-box input:focus{ outline:none; box-shadow:inset 0 0 0 var(--bw) var(--focus), var(--shadow); }
.search-box input::placeholder{ color:var(--text-3); opacity:1; }
.search-box .px-ic{ position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--text-3); pointer-events:none; }
.search-hint{ font-size:16px; color:var(--text-3); margin-top:var(--s-3); }
.search-hint kbd{ font-size:1em; }
.search-results{ list-style:none; padding:0; margin:var(--s-4) 0 0; display:grid; gap:var(--s-2); max-width:760px; }
.search-results li{ margin:0; }
.search-results a{ display:block; text-decoration:none; color:var(--text); background:var(--surface); box-shadow:inset 0 0 0 var(--bw) var(--line); padding:12px 16px; }
.search-results a:hover{ box-shadow:inset 0 0 0 var(--bw) var(--line-strong); background:var(--surface-2); }
.search-results .r-t{ font-family:var(--f-display); font-size:10px; line-height:1.7; display:block; }
.search-results .r-s{ font-size:15px; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.search-results .r-s::before{ content:''; width:12px; height:12px; flex:none; background:var(--brand); -webkit-mask:var(--ic-chev-right) center/12px no-repeat; mask:var(--ic-chev-right) center/12px no-repeat; }
.search-results .r-x{ font-size:16px; display:block; margin-top:4px; color:var(--text-2); }
.search-results mark{ background:var(--brand); color:var(--on-brand); padding:0 2px; }
.search-empty{ color:var(--text-2); margin-top:var(--s-3); }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:var(--s-4); }
.cat h2{ font-size:11px; display:flex; align-items:center; gap:10px; margin-bottom:var(--s-3); }
.cat h2 .px-ic{ color:var(--brand-ink); }
.cat ul{ list-style:none; padding:0; margin:0; }
.cat li{ margin:0; box-shadow:inset 0 1px 0 var(--line); }
.cat li:first-child{ box-shadow:none; }
.cat a{ display:block; padding:10px 6px; font-size:18px; text-decoration:none; color:var(--text); margin:0 -6px; }
.cat a:hover{ background:var(--surface-2); color:var(--text); }
.cat a small{ display:block; color:var(--text-3); font-size:15px; }
.cat a .pill{ margin-left:6px; vertical-align:2px; }
.cat.scan:hover{ background:var(--surface); }
.help-mini-search{ display:flex; gap:8px; max-width:420px; margin-top:var(--s-4); }
.help-mini-search input{ flex:1; min-width:0; font-size:18px; height:40px; padding:0 12px; background:var(--surface); color:var(--text); border:0; box-shadow:inset 0 0 0 var(--bw) var(--line-strong); }

/* ================= Videos ================= */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:var(--s-5); }
.video{ display:flex; flex-direction:column; gap:var(--s-3); }
.video-frame{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0b0a14; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-poster{
  position:absolute; inset:0; width:100%; height:100%; border:0; padding:14px; cursor:pointer; color:#efeefa; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px),
    radial-gradient(420px 200px at 30% 20%, #2a2f7a 0%, transparent 70%),
    radial-gradient(360px 200px at 85% 90%, #5a1a2e 0%, transparent 70%),
    #13122a;
  font-family:var(--f-ui); font-size:16px;
}
.video-poster::before{ content:''; position:absolute; inset:10px; border:2px dashed rgba(255,255,255,.14); pointer-events:none; }
.video-poster .play{ width:64px; height:64px; background:#ffcb05; color:#1a1400; display:grid; place-items:center; box-shadow:inset 0 -4px 0 rgba(0,0,0,.25); }
.video-poster:hover .play{ filter:brightness(1.08); }
.video-poster:disabled{ cursor:default; }
.video-poster:disabled .play{ background:#2a2942; color:#9896c2; box-shadow:inset 0 0 0 2px #34335a; }
.video-poster .vp-note{ text-transform:uppercase; max-width:36ch; color:#bdbbe0; font-family:var(--f-display); font-size:8px; letter-spacing:1px; line-height:1.8; }
.video h2{ font-size:11px; margin:0; line-height:1.7; }
.video .v-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.video p{ margin:0; color:var(--text-2); font-size:17px; }
.privacy-note{ font-size:17px; }
/* Video oben im Hilfe-Artikel (site.js renderArticleVideos) */
.article-video{ margin:0 0 var(--s-5); max-width:720px; }
.article-video figcaption{ margin-top:var(--s-2); font-size:16px; color:var(--text-2); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.article-video figcaption b{ font-family:var(--f-display); font-weight:400; font-size:9px; letter-spacing:1px; color:var(--brand-ink); }

/* ================= Changelog ================= */
.release{ margin-bottom:var(--s-5); }
.release-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:var(--s-3); }
.release-head h2{ margin:0; }
.release ul{ list-style:none; padding:0; }
.release li{ position:relative; padding-left:28px; margin:8px 0; }
.release li::before{ content:''; position:absolute; left:0; top:6px; width:16px; height:16px; background:var(--ok); -webkit-mask:var(--ic-check) center/12px no-repeat; mask:var(--ic-check) center/12px no-repeat; }

/* ================= Fußzeile ================= */
.site-footer{ margin-top:var(--s-7); background:var(--surface); color:var(--text-2); box-shadow:inset 0 var(--bw) 0 var(--line); padding:var(--s-7) 0 var(--s-5); }
.foot-grid{ display:grid; grid-template-columns:1.5fr repeat(3, 1fr); gap:var(--s-6); }
.foot-grid h2{ text-transform:uppercase; font-size:8px; letter-spacing:2px; color:var(--text-3); margin-bottom:var(--s-3); }
.foot-grid ul{ list-style:none; padding:0; margin:0; }
.foot-grid li{ margin:6px 0; }
.foot-grid a{ color:var(--text); text-decoration:none; font-size:17px; }
.foot-grid a:hover{ color:var(--brand); text-decoration:underline; }
[data-theme="kanto"] .foot-grid a:hover{ color:var(--blue); }
.foot-brand p{ font-size:16px; margin:var(--s-3) 0 var(--s-4); max-width:36ch; }
.foot-grid .bmc, .foot-grid .bmc:hover{ color:var(--on-brand); text-decoration:none; }
.foot-legal{ margin-top:var(--s-6); padding-top:var(--s-4); box-shadow:inset 0 1px 0 var(--line); font-size:15px; color:var(--text-3); }
.foot-legal a{ color:var(--text-2); }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1 / -1; } }
@media (max-width:420px){ .foot-grid{ grid-template-columns:1fr; } }

/* ================= Kleinkram ================= */
.center{ text-align:center; }
.muted{ color:var(--text-3); }
.mt0{ margin-top:0; }
.hash{ font-family:var(--f-num); font-size:19px; word-break:break-all; }
.stack{ display:grid; gap:var(--s-5); }
.err404{ text-align:center; padding:var(--s-7) 0; }
.err404 .big{ font-family:var(--f-display); font-size:clamp(44px, 10vw, 96px); color:var(--brand-ink); margin-bottom:var(--s-3); }
.err404 .big-ic{ color:var(--text-3); margin-bottom:var(--s-4); }
mark.todo{ background:transparent; color:var(--danger); border:2px dashed var(--danger); padding:0 4px; }
.prose details.faq{ scroll-margin-top:96px; }
.h-related{ font-size:11px!important; margin-top:0!important; }
.h-related::before{ display:none!important; }
.prose .mock-win p, .prose .mock-win li{ font-size:15px; margin:0 0 8px; }

@media (max-width:480px){
  .hero h1{ font-size:clamp(17px, 5.4vw, 22px); }
  .page-hero h1{ font-size:clamp(15px, 5vw, 20px); }
  .section-head h2{ font-size:15px; }
  .kicker{ font-size:8px; }
  body{ font-size:17px; }
}
/* Bewegung nur, wenn gewünscht */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; }
  .app-toast{ transform:none; opacity:1; }
}
@media print{
  .site-header, .site-footer, .toc, .helpful, .related{ display:none; }
  body{ background:#fff; color:#000; }
  .frame{ box-shadow:none; border:1px solid #000; }
}