/* Greedline – Website (Landingpage). Noir-Pop wie im Spiel: harte Rahmen, Versatzschatten, Anton/Poppins.
   Rein statisch: kein JavaScript, kein Build, Schriften liegen lokal in fonts/ (keine fremden Server). */

/* ---------- Schriften (Anton, Poppins – aus @fontsource, OFL) ---------- */
/* anton-latin-400-normal */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/anton-latin-400-normal.woff2') format('woff2');
}
/* poppins-latin-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
}
/* poppins-latin-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
}
/* poppins-latin-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}
/* poppins-latin-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}

/* ---------- Design-Tokens aus dem Spiel (Farben, Schriften, Rahmen, Illustrationen; Stand 2026-10-14) ---------- */
:root {
  --bg: #14161f;
  --surface: #1e2130;
  --surface-2: #272b3d;
  --line: #34394f;
  --text: #f3ead7;
  --muted: #8a8fa3;
  --card: #f3ead7;
  --card-ink: #1b1c22;
  --gold: #f2b632;
  --alarm: #e5383b;
  --warm: #f08a24;
  --ok: #3fb68b;
  --calm: #5aa9e6;
  /* Steckbrief-Plakat (Papier) */
  --paper: #e9dcc0;
  --paper-ink: #2a2116;
  --paper-muted: #6d5d40;
  --paper-gold: #8a5a00;
  --paper-edge: #c9b78f;
  --paper-photo: #cdbd99;
  /* Hinweis-Kasten (blau) und eigene Zeile in Listen (Most Wanted) */
  --info-bg: #1d2a3a;
  --gold-soft: #2a2618;
  --radius: 14px;
  --gutter: 16px;
  /* Schrift: Anton für Titel/Zahlen, Poppins für Text (das Spiel nutzt Nunito – Website bewusst Poppins, User 2026-10-16) */
  --font-display: Anton, Impact, 'Arial Narrow', sans-serif;
  --font-text: Poppins, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Harte Rahmen + Versatzschatten (Plakat-Anleihe) */
  --frame-ink: #0b0c11;
  --frame: 2px solid var(--frame-ink);
  --hard: 3px 3px 0 var(--frame-ink);
  --hard-pressed: 1px 1px 0 var(--frame-ink);
  --panel-border: 2px solid var(--line);
  --card-inner: #c9b994;
  --card-art: radial-gradient(circle at 50% 40%, #fff6e2, #e2d3b0);
  /* Illustrationen (art.ts) */
  --ill-ink: #17181f;
  --ill-mask: #17181f;
  --ill-eye: #ffffff;
  --ill-skin1: #e8b48c;
  --ill-skin2: #c98a5e;
  --ill-skin3: #8d5a3b;
  --ill-body: #2d3550;
  --ill-suit: #3a3346;
  --ill-dark: #2a2c36;
  --ill-work: #5b6b4a;
  --ill-guard: #35558a;
  --ill-cardigan: #8a5a3c;
  --ill-shirt: #f6f1e4;
  --ill-a1: #c8402f;
  --ill-a2: #f2b632;
  --ill-red: #e5383b;
  --ill-green: #2f8f5b;
  --ill-metal: #9aa3b5;
  --ill-glass: #5aa9e6;
  --ill-glow: #63e6a4;
  --ill-ice: #bfe6f7;
  --ill-moon: #c3cfe2;
  --ill-hair: #3b2a20;
  --ill-hair2: #b5452a;
  --ill-grey: #bdb7ae;
  --ill-blueprint: #3d6fb6;
  --ill-cardboard: #c9935a;
  --ill-leather: #6b3f24;
  --ill-paper: #e9dcc0;
  --ill-fox: #d9773a;
  --ill-pink: #e8a0ab;
  --ill-bat: #5b4a78;
  --ill-wolf: #6f7d93;
  color-scheme: dark;
}

/* ---------- Seite ---------- */
:root {
  --text-2: #c9c3b3;
  --bg-alt: #191c28;
  --wrap: 1120px;
  --shadow-lg: 5px 5px 0 var(--frame-ink);
  /* Typo-Skala: H1 deutlich über H2, H3 wie Kartentitel im Spiel */
  --fs-h1: clamp(44px, 5.6vw, 82px);
  --fs-h2: clamp(34px, 4.4vw, 56px);
  --fs-h3: 22px;
  --fs-lead: clamp(17px, 1.5vw, 20px);
  --section-y: clamp(64px, 9vw, 116px);
  /* Werte auf hellen Karten: etwas dunkler als im Spiel, damit kleine Zahlen AA-Kontrast (≥ 4,5 : 1) halten */
  --loot-ink: var(--paper-gold);
  --calm-ink: #1a5f9a;
  --ok-ink: #17694a;
  --paper-text: #4a3d28;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.kicker {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 .9em; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.kicker::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: currentColor; flex: none; }
.intro { max-width: 38em; font-size: var(--fs-lead); color: var(--text-2); }
.accent { color: var(--gold); }
.nocase { text-transform: none; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; padding: 8px 14px; border-radius: 8px; background: var(--gold); color: var(--card-ink); font-weight: 700; }
.skip:focus { left: 16px; }

/* ---------- Illustrationen aus dem Spiel (wie apps/client/src/ui/styles.css) ---------- */
.ill { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; flex: none; overflow: visible; }
.ill .o { stroke: var(--ill-ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ill.sym { width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-left: .1em; }
.ill.ava { width: 100%; height: 100%; vertical-align: 0; }

/* ---------- Kopfzeile ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px;
  min-height: 62px;
  padding: 8px max(var(--gutter), calc((100% - var(--wrap)) / 2));
  background: rgb(20 22 31 / .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--frame-ink);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 24px; letter-spacing: .05em; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand.small { font-size: 18px; }
.brand.small .brand-mark { width: 26px; height: 26px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--text-2); }
.nav a:hover { color: var(--gold); background: var(--surface); }
.topbar-beta { margin-left: 8px; white-space: nowrap; }
.back { margin-left: auto; padding: 10px 0; font-weight: 600; text-decoration: none; color: var(--text-2); }
.back:hover { color: var(--gold); }

.dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgb(242 182 50 / .6); animation: ping 2.2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgb(242 182 50 / 0); } 100% { box-shadow: 0 0 0 0 rgb(242 182 50 / 0); } }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  border: var(--frame); border-radius: var(--radius);
  font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  box-shadow: 4px 4px 0 var(--frame-ink);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--hard-pressed); }
.btn-gold { background: var(--gold); color: #2a1d00; }
/* Kleiner Knopf (Kopfzeile) */
.btn-sm { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 17px; box-shadow: var(--hard); }
.btn-sm:hover { box-shadow: 4px 4px 0 var(--frame-ink); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--frame-ink); }

/* ---------- Kopfbereich ---------- */
.hero {
  position: relative;
  padding: clamp(28px, 5.5vw, 76px) 0 clamp(48px, 7vw, 96px);
  background:
    radial-gradient(ellipse 55% 70% at 76% 40%, rgb(242 182 50 / .17), transparent 70%),
    radial-gradient(ellipse 40% 50% at 8% 95%, rgb(90 169 230 / .1), transparent 70%);
  overflow: hidden;
}
.hero::before {
  /* Rasterpunkte wie auf einem Filmplakat */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgb(243 234 215 / .07) 1px, transparent 1.6px) 0 0 / 9px 9px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  grid-template-areas: 'copy visual' 'facts visual';
  column-gap: 48px; row-gap: 44px;
}
.hero-copy { grid-area: copy; align-self: end; }
.hero-visual { grid-area: visual; align-self: center; display: grid; place-items: center; padding: 16px 0; }
.facts { grid-area: facts; align-self: start; }

.hero h1 { font-size: var(--fs-h1); line-height: .98; margin-bottom: 26px; text-wrap: balance; }
.lead { font-size: var(--fs-lead); color: var(--text-2); max-width: 30em; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.soon { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 0; text-wrap: balance; font-weight: 700; color: var(--text); }

/* Drei Fakten: Symbol + kurzer Text, bewusst ohne Rahmen (sehen sonst wie Knöpfe aus) */
.facts { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; padding: 22px 0 0; list-style: none; border-top: 2px solid var(--line); }
.facts li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.3; color: var(--text-2); }
.facts strong { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.fact-icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: 12px; border: var(--frame); background: var(--card-art); box-shadow: var(--hard);
  font-size: 30px;
}
.fact-icon.dark { background: var(--surface-2); }

/* Handy mit schwebenden Karten: Karten hängen am Handy, nicht am Rand der Spalte */
.stage { position: relative; width: clamp(240px, 23vw, 300px); }
.phone {
  position: relative; margin: 0;
  padding: 9px; border-radius: 46px;
  background: #0b0c11;
  box-shadow: 0 0 0 2px var(--line), 10px 12px 0 rgb(0 0 0 / .45), 0 30px 80px rgb(0 0 0 / .45);
}
.phone img { width: 100%; border-radius: 38px; }

.float { position: absolute; z-index: 2; animation: bob 6s ease-in-out infinite; }
.float.f1 { top: 24%; left: -36%; --r: -9deg; }
.float.f2 { top: -4%; right: -30%; --r: 8deg; animation-delay: -2s; }
.float.f3 { bottom: 7%; right: -30%; --r: 6deg; animation-delay: -4s; }
.float > * { transform: rotate(var(--r)); }
.float .gcard { width: 116px; }
@keyframes bob { 50% { translate: 0 -10px; } }

/* ---------- Karten wie im Spiel ---------- */
.gcard {
  position: relative;
  width: 100%; max-width: 150px; min-height: 100%;
  padding: 10px 7px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: 10px;
  background: var(--card); color: var(--card-ink);
  border: var(--frame);
  box-shadow: 4px 4px 0 var(--frame-ink), inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--card-inner);
}
.gcard-icon { width: 100%; display: grid; place-items: center; padding: 5px 0 2px; border-radius: 6px; background: var(--card-art); font-size: 54px; line-height: 1; }
.gcard-name { max-width: 100%; font-family: var(--font-display); font-size: 15px; letter-spacing: .02em; text-transform: uppercase; text-align: center; line-height: 1.05; hyphens: manual; }
.gcard-stats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 20px; }
.stat { font-size: 14px; font-weight: 700; }
.stat .ill.sym { width: 1.25em; height: 1.25em; vertical-align: -.3em; margin-left: 0; }
.stat.loot { color: var(--loot-ink); }
.stat.alarm { color: #c1121f; }
.stat.calm { color: var(--calm-ink); }
.gcard-text { max-width: 100%; font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; color: #4d4a44; hyphens: manual; }
.gcard.alt::after {
  content: 'Alternative';
  position: absolute; top: -11px; right: -8px;
  padding: 2px 8px; border-radius: 999px; border: 2px solid var(--frame-ink);
  background: var(--calm); color: #08213a;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.scard {
  width: 92px; height: 116px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 10px;
  background: var(--card); color: var(--card-ink);
  font-size: 13px; font-weight: 600;
  border: var(--frame);
  box-shadow: 4px 4px 0 var(--frame-ink), inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--card-inner);
}
.scard-icon { font-size: 44px; line-height: 1; }
.scard-fx { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #fbd0d1; color: #a4161a; white-space: nowrap; }
.scard-fx.zero { background: #d6f2e6; color: var(--ok-ink); }
.scard.sec-kamera, .scard.sec-laser { border-color: var(--alarm); box-shadow: 4px 4px 0 var(--frame-ink), inset 0 0 0 1px var(--alarm); }
.scard.sec-goldbarren { border-color: var(--gold); box-shadow: 4px 4px 0 var(--frame-ink), inset 0 0 0 1px var(--gold); }

/* ---------- Abschnitte ---------- */
.section { padding: var(--section-y) 0; }
.section.alt { background: var(--bg-alt); border-block: 2px solid var(--frame-ink); }
.section-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.section h2 { font-size: var(--fs-h2); margin-bottom: 18px; text-wrap: balance; }
.section h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; margin-bottom: 10px; }

/* ---------- So läuft ein Coup: vier Felder wie eine Bildergeschichte ---------- */
.steps {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px;
  margin: 0; padding: 0 0 84px; list-style: none;
}
.step { display: flex; flex-direction: column; color: var(--text-2); }
.step h3 { color: var(--text); margin: 24px 0 8px; }
.step p { font-size: 16px; }
.panel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 214px; padding: 18px 12px;
  border: var(--frame); border-radius: 18px;
  background: radial-gradient(circle at 50% 42%, #2e3348, #1b1e2a 75%);
  box-shadow: var(--shadow-lg);
}
/* Pfeil zum nächsten Feld */
.step:not(:last-child) .panel::after {
  content: ''; position: absolute; top: 50%; right: -22px;
  border-block: 9px solid transparent; border-left: 12px solid var(--gold);
  transform: translateY(-50%);
}
.step-no {
  position: absolute; top: -16px; left: -12px; z-index: 1;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: var(--frame); background: var(--gold); color: #2a1d00;
  font-family: var(--font-display); font-size: 21px; box-shadow: var(--hard);
}
.panel .gcard { width: 124px; }
.panel .gcard-icon { font-size: 46px; }

/* Schleife „weiter“: von Feld 3 zurück zu Feld 1 (breit), sonst als Hinweis unter Feld 3 */
.step-loop {
  position: absolute; bottom: 4px;
  left: calc((100% - 84px) / 4.22 * .5); width: calc((100% - 84px) / 4.22 * 2.22 + 56px); height: 46px;
  margin: 0; border: 2px dashed var(--muted); border-top: 0; border-radius: 0 0 18px 18px;
}
.step-loop::before {
  content: ''; position: absolute; top: -12px; left: -9px;
  border-inline: 8px solid transparent; border-bottom: 13px solid var(--muted);
}
.step-loop span {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  padding: 2px 14px; background: var(--bg); color: var(--text);
  font-weight: 700; font-size: 15px; white-space: nowrap;
}

/* Sicherheitskarten als Fächer */
.scard-row { display: flex; justify-content: center; padding: 10px 0 4px; }
.scard-row .scard { width: 80px; height: 102px; font-size: 12px; margin-left: -14px; transform: rotate(var(--rot)) translateY(var(--y)); }
.scard-row .scard:first-child { margin-left: 0; }
.scard-row .scard:nth-child(1) { --rot: -10deg; --y: 12px; }
.scard-row .scard:nth-child(2) { --rot: -5deg; --y: 3px; }
.scard-row .scard:nth-child(3) { --rot: 0deg; --y: 0px; }
.scard-row .scard:nth-child(4) { --rot: 5deg; --y: 3px; }
.scard-row .scard:nth-child(5) { --rot: 10deg; --y: 12px; }
.scard-row .scard-icon { font-size: 38px; }
.panel .scard-row .scard { width: 64px; height: 84px; font-size: 10px; margin-left: -12px; gap: 3px; }
.panel .scard-row .scard:first-child { margin-left: 0; }
.panel .scard-row .scard-icon { font-size: 30px; }
.panel .scard-row .scard-fx { font-size: 10px; padding: 0 4px; }

/* Alarm-Balken: füllt sich bis 9/10, der letzte Platz blinkt */
.meter { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; }
.meter-label { font-weight: 700; font-size: 16px; white-space: nowrap; color: #ff6b6e; }
.segs { position: relative; flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.segs > i { height: 20px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.segs > i.edge { border-color: rgb(229 56 59 / .7); animation: pulse .6s infinite alternate; }
.lit {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
  clip-path: inset(0 calc((100% - 27px) / 10 + 3px) 0 0);
  animation: fill 5s infinite;
}
.lit i { border-radius: 4px; }
.lit .cool { background: var(--calm); }
.lit .warm { background: var(--warm); }
.lit .hot { background: var(--alarm); }
@keyframes fill {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(9, end); }
  55%, 100% { clip-path: inset(0 calc((100% - 27px) / 10 + 3px) 0 0); }
}
@keyframes pulse { to { background: rgb(229 56 59 / .35); } }
.btn-escape {
  margin-top: 24px; padding: 10px 12px;
  border-radius: var(--radius); border: var(--frame); box-shadow: var(--hard);
  background: var(--ok); color: #08261a;
  font-family: var(--font-display); font-size: 17px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}

.score-demo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pips { display: flex; gap: 10px; }
.pips i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--frame-ink); }
.pips .win { background: var(--ok); }
.pips .loss { background: var(--alarm); }
.score-big { font-family: var(--font-display); font-size: 66px; line-height: 1; letter-spacing: .02em; }
.score-cap { font-family: var(--font-display); font-size: 21px; color: var(--gold); text-transform: uppercase; letter-spacing: .03em; }

/* Kein Blindflug: wie „Noch im Stapel“ im Spiel */
.callout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 40px; align-items: center;
  margin-top: 24px; padding: 28px 32px;
  background: var(--info-bg); border: 2px solid #2c4560; border-radius: 20px;
  color: var(--text-2);
}
.callout h3 { color: var(--text); }
.pile-head { margin: 0 0 12px; color: var(--text); font-size: 16px; }
.pile-head .ill { font-size: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 15px; color: var(--text); white-space: nowrap; }
.chip .ill { font-size: 20px; }
.chip.sec-kamera, .chip.sec-laser { border-color: rgb(229 56 59 / .6); }

/* ---------- Gegner ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.split p:not(.kicker) { color: var(--text-2); }
.duel { grid-template-areas: 'copy demo' 'notes notes'; row-gap: 56px; }
.duel .split-copy { grid-area: copy; }
.duel .lead-s { font-size: var(--fs-lead); }
.duel .ghost-demo { grid-area: demo; }
.notes {
  grid-area: notes;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 24px 40px;
  margin: 0; padding: 36px 0 0; list-style: none; border-top: 2px dashed var(--line);
}
.notes li { display: flex; align-items: flex-start; gap: 16px; }
.notes p { margin: 0; }
.notes strong { color: var(--text); }
.note-icon {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 14px; border: var(--frame); background: var(--card-art); box-shadow: var(--hard);
  font-size: 34px;
}
.note-bot { background: var(--surface-2); border-color: var(--frame-ink); color: var(--text-2); font-family: var(--font-display); font-size: 17px; letter-spacing: .06em; }
.bot { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: #c3c7d4; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.6; vertical-align: .1em; }

/* Gegner-Spur: wie oben im Coup-Bildschirm, mit hartem Rahmen als „Bildschirm“ */
.ghost-demo {
  display: grid; gap: 14px;
  padding: 22px 22px 26px;
  border: var(--frame); border-radius: 24px;
  background: var(--bg);
  box-shadow: 0 0 0 2px var(--line), 8px 8px 0 var(--frame-ink);
}
.ghost-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.ghost-head .ill { font-size: 26px; }
.ghost-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 18px;
  box-shadow: var(--hard);
}
.ghost-row.you { border-color: var(--gold); margin-left: 28px; }
.ghost-row .ava { width: 54px; height: 54px; flex: none; border-radius: 50%; overflow: hidden; background: var(--paper-photo); border: 2px solid var(--frame-ink); }
.ghost-row .ava .ill { transform: translateY(6%) scale(1.08); }
.who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.who strong { font-weight: 700; font-size: 17px; }
.who small { font-size: 14px; color: var(--muted); }
.you .who small { color: var(--warm); font-weight: 600; }
.right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.score { font-family: var(--font-display); font-size: 32px; line-height: 1; color: var(--gold); white-space: nowrap; }
.score .ill.sym { width: .75em; height: .75em; }
.mini { display: flex; gap: 2px; }
.mini i { width: 8px; height: 6px; border-radius: 2px; background: var(--surface-2); }
.mini .cool { background: var(--calm); }
.mini .warm { background: var(--warm); }
.mini .hot { background: var(--alarm); }

/* ---------- Crew ---------- */
.crew-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 16px; justify-items: center; }
.alts {
  display: grid; gap: 32px;
  margin-top: 72px; padding: clamp(28px, 3.5vw, 40px); border-radius: 22px;
  background: var(--bg-alt); border: 2px solid var(--line);
}
.alts-copy { max-width: 40em; }
.alts-copy p { color: var(--text-2); }
.pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.pair { flex: 1 1 300px; max-width: 380px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; padding: 20px 14px; border-radius: 16px; background: var(--bg); }
.pair > div { display: flex; justify-content: center; }
.pair .gcard { height: 100%; }
.pair-or { align-self: center; font-family: var(--font-display); font-size: 18px; color: var(--muted); text-transform: uppercase; }

/* ---------- Ligen ---------- */
.ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0 0 80px; padding: 0; list-style: none; }
.ladder li { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: calc(var(--i) * 14px); }
.badge {
  width: 84px; height: 84px; display: grid; place-items: center; flex: none;
  border-radius: 20px; border: var(--frame); background: var(--card-art); box-shadow: var(--hard);
  font-size: 54px; line-height: 1;
}
.ladder li:last-child .badge { border-color: var(--gold); box-shadow: var(--hard), 0 0 0 3px var(--gold), 0 0 30px rgb(242 182 50 / .35); }
.ladder li:last-child .ladder-name { color: var(--gold); }
.ladder-name { font-family: var(--font-display); font-size: 16px; letter-spacing: .03em; text-transform: uppercase; }

.screens-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.duo { display: flex; justify-content: center; }
.phone.small { width: clamp(150px, 20vw, 240px); padding: 7px; border-radius: 36px; }
.phone.small img { border-radius: 30px; }
.phone.small:first-child { transform: rotate(-4deg); z-index: 1; }
.phone.small.offset { margin: 60px 0 0 -40px; transform: rotate(5deg); }
.wanted-copy { max-width: 30em; }
.wanted-icon {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px;
  border-radius: 16px; border: var(--frame); background: var(--card-art); box-shadow: var(--hard); font-size: 42px;
}
.wanted-copy h3 { font-size: 28px; }

/* ---------- Fair: Ehrenkodex als Aushang auf Papier ---------- */
.code {
  position: relative;
  padding: clamp(20px, 3vw, 36px) clamp(16px, 2vw, 24px);
  background: var(--paper); color: var(--paper-ink);
  border: var(--frame); border-radius: 6px;
  box-shadow: 8px 8px 0 var(--frame-ink);
}
/* Klebestreifen oben */
.code::before, .code::after {
  content: ''; position: absolute; top: -15px; width: 112px; height: 30px;
  background: rgb(242 182 50 / .9); border: 2px solid var(--frame-ink);
}
.code::before { left: 40px; transform: rotate(-4deg); }
.code::after { right: 40px; transform: rotate(5deg); }
.code-clip { overflow: hidden; }
/* Trennlinien: jede Zeile oben, jede Spalte links – die äußeren schneidet .code-clip ab (passt zu jeder Spaltenzahl) */
.code-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -2px 0 0 -2px; padding: 0; list-style: none; }
.code-list li { padding: 24px clamp(16px, 2vw, 26px); border-top: 2px dashed var(--paper-edge); border-left: 2px dashed var(--paper-edge); }
.para { display: block; margin-bottom: 10px; font-family: var(--font-display); font-size: 26px; line-height: 1; color: #a8281c; }
.section .code h3 { color: var(--paper-ink); font-size: 23px; }
.code p { color: var(--paper-text); font-size: 16px; }
.code .bot { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper); }

/* ---------- Abschluss ---------- */
.finale {
  position: relative; overflow: hidden;
  padding: 128px 0 100px; text-align: center;
  background: radial-gradient(ellipse 50% 70% at 50% 100%, rgb(242 182 50 / .18), transparent 70%);
}
.tape {
  position: absolute; top: 34px; left: -5%; width: 110%;
  transform: rotate(-2.5deg);
  background: var(--gold); border-block: 4px solid var(--frame-ink);
  overflow: hidden; white-space: nowrap;
}
.tape span {
  display: inline-block; padding: 8px 0;
  font-family: var(--font-display); font-size: 22px; letter-spacing: .1em; text-transform: uppercase; color: var(--frame-ink);
  animation: tape 40s linear infinite;
}
@keyframes tape { to { transform: translateX(-50%); } }
.finale h2 { font-size: clamp(40px, 6.4vw, 76px); margin: 40px 0 18px; text-wrap: balance; }
.finale p { font-size: var(--fs-lead); color: var(--text-2); max-width: 34em; margin: 0 auto 32px; text-wrap: balance; }
.finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; }

/* ---------- Fußzeile ---------- */
.footer { border-top: 2px solid var(--frame-ink); background: var(--bg-alt); padding: 18px 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; color: var(--muted); }
.footer nav { display: flex; gap: 12px; }
.footer a { display: inline-block; padding: 10px 6px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.footer a:hover, .footer a[aria-current='page'] { color: var(--gold); }
.footer small { font-size: 14px; color: #9a9fb2; }

/* ---------- Rechtliches ---------- */
.legal-main { max-width: calc(760px + 2 * var(--gutter)); padding-top: 56px; padding-bottom: 88px; }
.legal-main h1 { font-size: clamp(44px, 8vw, 64px); margin-bottom: 24px; }
.legal-main h2 { font-weight: 700; font-size: 20px; margin: 34px 0 8px; }
.legal-main h3 { font-weight: 600; font-size: 17px; margin: 24px 0 6px; }
.legal-main p, .legal-main ul { color: var(--text-2); }
.legal-main ul { padding-left: 1.2em; }
.legal-main li + li { margin-top: 6px; }
.legal-date { margin-top: 40px; font-size: 14px; }

/* ---------- Breiten ---------- */
/* Bis 1179 px: Bildergeschichte in 2 × 2, Schleife als Hinweis unter Feld 3 */
@media (max-width: 1179px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .float .gcard { width: 100px; }
  .float .gcard-icon { font-size: 44px; }
  .float .gcard-name { font-size: 13px; }
  .float .gcard-text { font-size: 11px; }
  .float .scard { width: 84px; height: 106px; }
  .float .scard-icon { font-size: 40px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; padding-bottom: 0; }
  .step:nth-child(2) .panel::after { display: none; }
  .callout { margin-top: 56px; }
  .step:not(:last-child) .panel::after { right: -29px; }
  .panel { height: 236px; }
  .panel .gcard { width: 140px; }
  .panel .gcard-icon { font-size: 52px; }
  .panel .scard-row .scard { width: 80px; height: 102px; font-size: 12px; margin-left: -14px; gap: 4px; }
  .panel .scard-row .scard:first-child { margin-left: 0; }
  .panel .scard-row .scard-icon { font-size: 38px; }
  .panel .scard-row .scard-fx { font-size: 12px; padding: 1px 6px; }
  .meter { max-width: 340px; }
  .btn-escape { font-size: 21px; padding: 13px 22px; }
  .score-big { font-size: 76px; }
  .score-cap { font-size: 24px; }
  .step-loop {
    position: static; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
    width: auto; height: auto; margin-top: 4px; padding: 6px 14px 6px 10px;
    border: 2px dashed var(--muted); border-radius: 999px;
  }
  .step-loop::before {
    position: static; border: 0; content: '↺'; font-size: 18px; line-height: 1; color: var(--gold);
  }
  .step-loop span { position: static; transform: none; padding: 0; background: none; font-size: 14px; }
}

@media (max-width: 1000px) {
  .nav { display: none; }
  .topbar-beta { margin-left: auto; }
  .crew-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .notes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'visual' 'facts'; row-gap: 28px; }
  .hero-visual { padding: 12px 0 4px; }
  .stage { width: min(280px, 68vw); }
  .facts { justify-content: center; }
  .split, .screens-split, .callout { grid-template-columns: minmax(0, 1fr); }
  .duel { grid-template-areas: 'copy' 'demo' 'notes'; row-gap: 40px; }
  .duel .ghost-demo { width: 100%; max-width: 540px; justify-self: center; }
  .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; margin-bottom: 64px; }
  .ladder li { margin-bottom: 0; }
  .screens-split .duo { order: 2; }
  .split { gap: 40px; }
  .code-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .step:not(:last-child) .panel::after { display: none; }
  .panel { height: auto; min-height: 164px; padding: 24px 12px; }
  .panel .gcard { width: 118px; }
  .panel .gcard-icon { font-size: 44px; }
  .panel .scard-row .scard { width: 66px; height: 88px; font-size: 10.5px; margin-left: -12px; }
  .panel .scard-row .scard-icon { font-size: 32px; }
  .panel .scard-row .scard-fx { font-size: 10.5px; padding: 0 4px; }
  .score-big { font-size: 64px; }
  .score-cap { font-size: 21px; }
  .btn-escape { font-size: 18px; padding: 11px 16px; margin-top: 20px; }
  .step h3 { margin-top: 20px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .topbar { min-height: 56px; gap: 12px; }
  .brand { font-size: 21px; }
  .brand-mark { width: 30px; height: 30px; }
  .btn-sm { min-height: 36px; padding: 0 12px; font-size: 15px; }
  .hero h1 { font-size: clamp(38px, 11.6vw, 54px); margin-bottom: 18px; }
  .lead { margin-bottom: 26px; }
  .hero-actions { gap: 14px 20px; }
  .stage { width: min(240px, 62vw); }
  .float .gcard { width: 80px; }
  .float .gcard-icon { font-size: 34px; }
  .float .gcard-name { font-size: 11px; }
  .float .gcard-text { font-size: 9.5px; }
  .float .gcard-stats { gap: 3px; flex-wrap: nowrap; }
  .float .stat { font-size: 11.5px; }
  .float .scard { width: 72px; height: 92px; font-size: 11px; }
  .float .scard-icon { font-size: 32px; }
  .float.f1 { top: 30%; left: -23%; }
  .float.f2 { top: 2%; right: -24%; }
  .float.f3 { display: none; }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 20px; }
  .facts li { flex-direction: column; justify-content: flex-start; gap: 10px; text-align: center; font-size: 14px; }
  .facts strong { font-size: 15px; }
  .fact-icon { width: 42px; height: 42px; font-size: 27px; }
  .crew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .gcard { padding: 8px 4px 10px; }
  .gcard-icon { font-size: 42px; }
  .gcard-name { font-size: 13px; }
  .gcard-text { font-size: 11px; }
  .stat { font-size: 13px; }
  .alts { margin-top: 56px; padding: 28px 16px 32px; margin-inline: calc(-1 * var(--gutter) + 6px); }
  .pairs { gap: 16px; }
  .pair { padding: 18px 8px; }
  .pair .gcard { width: min(128px, 100%); }
  .ghost-demo { padding: 14px 10px 16px; border-radius: 20px; gap: 10px; }
  .ghost-head { font-size: 18px; }
  .ghost-row.you { margin-left: 10px; }
  .ghost-row { padding: 10px; gap: 10px; }
  .who strong { font-size: 16px; }
  .who small { font-size: 13px; }
  .mini { gap: 2px; }
  .mini i { width: 6px; }
  .ghost-row .ava { width: 46px; height: 46px; }
  .score { font-size: 28px; }
  .notes li { gap: 14px; }
  .note-icon { width: 46px; height: 46px; font-size: 30px; }
  .note-bot { font-size: 15px; }
  /* Ligen: Leiter in einer Spalte mit Holm (lange Namen wie Fassadenkletterer passen nicht in zwei Spalten) */
  .ladder { position: relative; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 56px; }
  .ladder::before { content: ''; position: absolute; left: 23px; top: 20px; bottom: 20px; border-left: 2px dashed var(--line); }
  .ladder li { position: relative; flex-direction: row; gap: 16px; text-align: left; }
  .badge { width: 48px; height: 48px; border-radius: 14px; font-size: 32px; }
  .ladder-name { font-size: 18px; }
  .phone.small { width: 44vw; }
  .phone.small.offset { margin: 40px 0 0 -6vw; }
  .wanted-icon { width: 52px; height: 52px; font-size: 36px; }
  .wanted-copy h3 { font-size: 24px; }
  .callout { padding: 22px 18px; }
  .code { box-shadow: 6px 6px 0 var(--frame-ink); }
  .code::before { left: 20px; width: 90px; }
  .code::after { right: 20px; width: 90px; }
  .code-list { grid-template-columns: minmax(0, 1fr); }
  .code-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 6px; padding: 18px 4px; }
  .para { grid-row: span 2; margin: 2px 0 0; font-size: 22px; }
  .section .code h3 { font-size: 21px; margin-bottom: 6px; }
  .finale { padding: 112px 0 80px; }
  .tape span { font-size: 18px; }
}

/* Sehr schmale Handys: Karten trennen keine Wörter, drei Spalten wären für „Sprengmeister“/„Sicherheitskarte“ zu eng */
@media (max-width: 359px) {
  .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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