/* ============================================================
   LETZTE RUNDE — WEB
   Nachtschwarz trifft Neon. Dark only, kein Framework.
   Tokens gespiegelt aus design_system/tokens/*.css
   ============================================================ */

/* ============================================================
   SCHRIFTEN — selbst gehostet, latin-Subset, keine Fremd-Requests
   Unbounded und Space Grotesk sind Variable Fonts (eine Datei je
   Familie, Achse wght), Space Mono liegt als zwei Schnitte vor.
   Quelle: Google Fonts (OFL), heruntergeladen nach /fonts.
   ============================================================ */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/unbounded-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Palette --- */
  --lr-blackout:         #0C0C14;
  --lr-sperrstunde:      #16161F;
  --lr-sperrstunde-2:    #1E1E29;
  --lr-line:             #26262F;
  --lr-line-soft:        #1C1C26;

  --lr-bierschaum:       #F2EFE4;
  --lr-bierschaum-dim:   #B4B1A7;
  --lr-bierschaum-faint: #76746C;

  --lr-limette:          #D8F549;
  --lr-limette-deep:     #B6D018;
  --lr-pink:             #FF4D9E;
  --lr-pink-deep:        #E0337F;
  --lr-lila:             #8B5CF6;
  --lr-lila-deep:        #6F3FE0;

  --lr-limette-08: rgba(216, 245, 73, 0.08);
  --lr-limette-16: rgba(216, 245, 73, 0.16);
  --lr-pink-08:    rgba(255, 77, 158, 0.08);
  --lr-pink-16:    rgba(255, 77, 158, 0.16);
  --lr-lila-12:    rgba(139, 92, 246, 0.12);

  /* --- Semantik --- */
  --surface-stage:   var(--lr-blackout);
  --surface-card:    var(--lr-sperrstunde);
  --surface-raised:  var(--lr-sperrstunde-2);
  --surface-honoree: #14101A;

  --text-strong: var(--lr-bierschaum);
  --text-body:   var(--lr-bierschaum);
  --text-muted:  var(--lr-bierschaum-dim);
  --text-faint:  var(--lr-bierschaum-faint);

  --border-hairline: var(--lr-line);
  --border-soft:     var(--lr-line-soft);

  /* Signal-Farbe. Limette = Crew. Pink = Ehrengast/Geheim. */
  --accent:        var(--lr-limette);
  --accent-deep:   var(--lr-limette-deep);
  --accent-wash:   var(--lr-limette-16);
  --accent-faint:  var(--lr-limette-08);
  --text-on-accent: var(--lr-blackout);

  /* --- Typografie --- */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-ui:      'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --ls-wordmark: -0.015em;
  --ls-display:  -0.01em;
  --ls-eyebrow:  0.18em;
  --ls-mono:     0.06em;

  /* --- Spacing & Radien --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --tap-min: 44px;

  /* Breiten: die Marketing-Seite darf atmen, Lesetext bleibt schmal. */
  --width-wide: 1080px;
  --width-read: 720px;

  /* --- Effekte --- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-pop:  0 16px 48px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 0 0 1px rgba(216, 245, 73, 0.4), 0 6px 24px rgba(216, 245, 73, 0.22);
  --ring-focus:  0 0 0 3px rgba(216, 245, 73, 0.45);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  color-scheme: dark;
}

/* Ehrengast-Variante — pink-getönte Nacht (join.html?h=1) */
:root[data-variant='honoree'] {
  --surface-stage:  var(--surface-honoree);
  --accent:         var(--lr-pink);
  --accent-deep:    var(--lr-pink-deep);
  --accent-wash:    var(--lr-pink-16);
  --accent-faint:   var(--lr-pink-08);
  --text-on-accent: var(--lr-blackout);
  --glow-accent: 0 0 0 1px rgba(255, 77, 158, 0.4), 0 6px 24px rgba(255, 77, 158, 0.22);
  --ring-focus:  0 0 0 3px rgba(255, 77, 158, 0.45);
}

/* ============================================================
   RESET
   ============================================================ */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-6) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  background: var(--surface-stage);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kurze Seiten (join, pay) sitzen mittig auf der Bühne; lange Seiten
   (Start, Rechtstexte) laufen von oben nach unten. */
body.centered { justify-content: center; }

/* Die Nacht bekommt einen Hauch Neon — Textur, keine Fläche. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at 50% -8%, var(--accent-faint), transparent 72%),
    radial-gradient(60% 45% at 105% 108%, var(--lr-pink-08), transparent 70%);
}

:root[data-variant='honoree'] body::before {
  background:
    radial-gradient(70% 45% at 50% -8%, var(--lr-pink-08), transparent 72%),
    radial-gradient(60% 45% at 105% 108%, rgba(139, 92, 246, 0.1), transparent 70%);
}

h1, h2, p, figure { margin: 0; }

/* ============================================================
   BAUSTEINE
   ============================================================ */

.card {
  width: 100%;
  max-width: 560px;
  padding: var(--space-8) var(--space-6) var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Bierdeckel + Wortmarke */
.lockup {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.badge {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.badge .ring { stroke: var(--accent); }
.badge .tally { stroke: var(--accent); }
.badge .lr {
  font-family: var(--font-display);
  font-weight: 700;
  fill: var(--lr-bierschaum);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  color: var(--text-strong);
}

.wordmark span {
  display: block;
  color: var(--accent);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}


.headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(25px, 8vw, 44px);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.headline .line { display: block; }
.headline .accent { color: var(--accent); }

.lede {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 46ch;
}

.hint {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 46ch;
}

/* Hinweis-Zeile mit Signalpunkt */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--lr-blackout);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}

.note .dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}

/* Mono-Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips li {
  padding: 7px var(--space-3);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--lr-blackout);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Raum-Code — der Magic-Link-Look aus dem Onboarding */
.code-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-faint);
}

.code-chip {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(16px, 5vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  overflow-wrap: anywhere;
}

/* Buttons */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn:hover { background: color-mix(in srgb, var(--accent) 88%, #FFFFFF); }
.btn:active { transform: scale(0.97); background: var(--accent-deep); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--text-strong);
  min-height: var(--tap-min);
}

.btn-ghost:hover { background: var(--surface-raised); }
.btn-ghost:active { background: var(--surface-raised); }

/* Fokus — sichtbar, immer */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-pill);
}

.card a:not(.btn) {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* ============================================================
   FOOTER — auf jeder Seite dieselbe Leiste
   ============================================================ */

.legal {
  width: 100%;
  max-width: var(--width-wide);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* Auf langen Seiten sitzt die Leiste unten und bekommt eine Hairline;
   auf den zentrierten Kurzseiten hängt sie ohne Linie unter der Karte. */
body:not(.centered) .legal {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}

body.centered .legal { max-width: 560px; }

.legal a { color: var(--text-muted); text-decoration: none; }
.legal a:hover { color: var(--text-strong); text-decoration: underline; }

.legal p { margin: 0; }

/* Die Rechtslinks: eigene Gruppe, mit Mittelpunkt getrennt. */
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
}

.legal-nav a {
  display: inline-block;
  padding: var(--space-2) 2px;
}

.legal-nav .sep {
  -webkit-user-select: none;
  user-select: none;
}

/* Wenn die Leiste umbricht, sind die Trennpunkte im Weg — dann weg damit. */
@media (max-width: 479px) {
  .legal-nav { gap: var(--space-1) var(--space-4); }
  .legal-nav .sep { display: none; }
}

.legal-by a {
  color: var(--text-strong);
  text-decoration: none;
}

/* Sichtbarkeit je Variante / Zustand (join.html).
   :root im Selektor hebt die Spezifität über die Layout-Klassen (.stack). */
:root [data-when] { display: none; }
:root:not([data-variant='honoree']) [data-when='crew'] { display: block; }
:root[data-variant='honoree'] [data-when='honoree'] { display: block; }

:root [data-state] { display: none; }
:root[data-code='yes'] [data-state='code'] { display: flex; }
:root[data-code='no'] [data-state='nocode'] { display: flex; }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tight {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   RESPONSIVE — mobile first, ab 560px etwas mehr Luft
   ============================================================ */

/* Sehr schmale Geräte (iPhone SE & Co.) — Ränder zurücknehmen,
   damit die Headline-Zeilen ganz bleiben. */
@media (max-width: 359px) {
  body { padding: var(--space-4) var(--space-4) var(--space-6); }
  .card { padding: var(--space-6) var(--space-5); }
}

@media (min-width: 560px) {
  body { padding: var(--space-10) var(--space-8); }
  .card { padding: var(--space-10); }
  .badge { width: 80px; height: 80px; }
  .wordmark { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   ZAHL-SEITE (pay.html) — additiv, nichts oben drüber wird angefasst
   ============================================================ */

/* Zustandsmechanik wie data-code in join.html:
   loading → offline | error | ready. */
:root[data-pay='loading'] [data-state='loading'],
:root[data-pay='offline'] [data-state='offline'],
:root[data-pay='error']   [data-state='error'],
:root[data-pay='ready']   [data-state='ready'] { display: flex; }

/* Der Titel kommt aus dem Dokument und kann lang sein — etwas kleiner
   als die Claim-Headline, und er darf umbrechen. */
.headline-doc {
  font-size: clamp(22px, 6.6vw, 34px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.pay-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

/* Wer steht wo — Hairlines zwischen den Zeilen, kein Zebra. */
.rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--border-soft);
}

.rows:empty,
.transfers:empty { display: none; }

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--lr-blackout);
}

.row-name {
  font-size: 15px;
  color: var(--text-body);
  overflow-wrap: anywhere;
}

.row-amount {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: var(--ls-mono);
  white-space: nowrap;
}

/* Die Farbe ist die Information: Limette = bekommt, Creme = schuldet. */
.row-amount.is-pos { color: var(--lr-limette); }
.row-amount.is-neg { color: var(--lr-bierschaum); }

/* Der kürzeste Weg — eine Karte je Überweisung. */
.transfers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.transfer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--lr-blackout);
}

.transfer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-strong);
}

.transfer-name {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.transfer-arrow {
  font-weight: 700;
  color: var(--accent);
}

.transfer-sep { color: var(--text-faint); }

.transfer-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--ls-mono);
  color: var(--accent);
  white-space: nowrap;
}

.transfer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Kleinere Variante der Buttons — Daumen bleibt bedient (44px). */
.btn-small {
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  font-size: 15px;
}

.iban-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}

.iban {
  flex: 1 1 14ch;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-mono);
  color: var(--text-muted);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.iban-copy { flex: 0 0 auto; }

/* ============================================================
   SEITENGERÜST — Start- und Rechtsseiten
   Die kurzen Karten-Seiten (join, pay) bleiben unberührt.
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--width-wide);
}

.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Sprungmarke — nur sichtbar, wenn sie den Fokus hat. */
.skip {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip:focus { transform: none; }

/* Kopfzeile mit kleiner Marke (Rechtsseiten) */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.badge-sm { width: 40px; height: 40px; border-radius: 9px; }

.wordmark-inline { font-size: 13px; line-height: 1.2; }
.wordmark-inline span { display: inline; }

.topbar-back {
  padding: var(--space-2) 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}

.topbar-back:hover { color: var(--accent); }

/* ============================================================
   HERO (index.html)
   ============================================================ */

.hero {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 7.4vw, 58px);
  line-height: 0.96;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
  overflow-wrap: break-word;
}

.hero-title .line { display: block; }
.hero-title .accent { color: var(--accent); }

.hero-sub {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.35;
  color: var(--text-strong);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-actions .btn { flex: 1 1 220px; }

/* Der Beispiel-Deckel rechts: Countdown-Ticket + Tresor-Zeile. */
.hero-visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ticket {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--lr-blackout);
}

/* Perforation — die Kerben nehmen die Farbe der Karte auf. */
.ticket::before,
.ticket::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  transform: translateY(-50%);
}

.ticket::before { left: -10px; }
.ticket::after  { right: -10px; }

.ticket-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 9.5vw, 52px);
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--accent);
}

.ticket-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Stempel — schräg, aber nur er. */
.stamp {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  padding: 5px 9px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  transform: rotate(3deg);
}

.mini {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--lr-blackout);
}

.eyebrow-pink { color: var(--lr-pink); }

/* Freigegebener Chip im Tresor — Pink gehört dem Ehrengast. */
.chips li.is-on {
  border-color: var(--lr-pink);
  background: var(--lr-pink-16);
  color: var(--lr-pink);
}

/* ============================================================
   ABSCHNITTE & FEATURE-KARTEN
   ============================================================ */

.section-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5.6vw, 30px);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.section-intro {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 56ch;
}

.feature-grid {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.feature h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 4.8vw, 22px);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.feature p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
}

.feature .feature-meta {
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--accent-wash);
  border-radius: var(--radius-pill);
  background: var(--accent-faint);
  color: var(--accent);
}

.feature-icon svg { width: 22px; height: 22px; }

/* Der Tresor ist Ehrengast-Sache — also Pink, lokal umgeschaltet. */
.feature--pink {
  --accent: var(--lr-pink);
  --accent-wash: var(--lr-pink-16);
  --accent-faint: var(--lr-pink-08);
}

/* Die drei Rollen */
.roles {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.role {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--lr-blackout);
}

.role-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.role p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

/* Beta-Kasten — gestrichelt wie das Magic-Link-Feld im Onboarding. */
.beta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-faint);
}

.beta p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
}

.beta .btn { align-self: flex-start; }

/* ============================================================
   RECHTSSEITEN — ruhig, schmal, klare Struktur
   ============================================================ */

.doc {
  width: 100%;
  max-width: var(--width-read);
}

/* Auf den Rechtsseiten stehen Kopf, Text und Fußleiste in einer Spalte. */
body.doc-page .topbar,
body.doc-page .legal { max-width: var(--width-read); }

.doc h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
  overflow-wrap: break-word;
}

.doc h2 {
  margin: var(--space-10) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 4.6vw, 22px);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.doc h3 {
  margin: var(--space-6) 0 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-strong);
}

.doc p,
.doc li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

.doc p { margin: var(--space-3) 0 0; }

.doc ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.3em;
}

.doc li { margin-top: var(--space-2); }
.doc li::marker { color: var(--accent); }

.doc strong { color: var(--text-strong); font-weight: 700; }

.doc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: var(--ls-mono);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.doc a {
  color: var(--accent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.doc address {
  margin: var(--space-3) 0 0;
  font-style: normal;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

.doc-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
}

.doc-updated {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Anbieterblock / hervorgehobene Angaben */
.doc-box {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.doc-box > :first-child { margin-top: 0; }

/* ============================================================
   RESPONSIVE — Start- und Rechtsseiten
   ============================================================ */

@media (min-width: 560px) {
  .hero { padding: var(--space-10) var(--space-8); }
}

@media (min-width: 760px) {
  .page { gap: var(--space-16); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .feature--wide { grid-column: 1 / -1; }
  .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel { padding: var(--space-8); }
  .beta { padding: var(--space-8); }
}

@media (min-width: 940px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-10);
    padding: var(--space-12);
  }
}

@media (min-width: 1120px) {
  body { padding: var(--space-12) var(--space-10) var(--space-10); }
}

/* ============================================================
   BETA-WARTELISTE — additiv, nichts oben drüber wird angefasst
   Inline-Formular im Beta-Kasten (index.html) und die
   Bestätigungsseite (beta-bestaetigt.html).
   ============================================================ */

/* Zustandsmechanik wie data-code in join.html: ok | fehler.
   Der Kopf-Skript setzt fehler, das Markup startet auf ok. */
:root[data-beta='ok']     [data-state='ok'],
:root[data-beta='fehler'] [data-state='fehler'] { display: flex; }

/* Ohne JavaScript kommt das Formular nicht an die Edge Function — dann wäre
   es eine Falle: Der Browser würde die Adresse beim Absenden in den
   Query-String schreiben. Also weg damit; der noscript-Hinweis mit der
   mailto-Adresse steht direkt darunter und ist dann der richtige Weg.
   Das Kopf-Skript in index.html tauscht no-js gegen js, bevor gemalt wird. */
.no-js .beta-form,
.no-js .beta-status { display: none; }

/* Feld und Button stehen nebeneinander und brechen erst um, wenn es
   wirklich eng wird — das Feld darf dabei schrumpfen, der Button nicht. */
.beta-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
}

.beta-input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--lr-blackout);
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-weight: 400;
  /* Unter 16px zoomt iOS beim Fokus in die Seite hinein. */
  font-size: 16px;
  line-height: 1.2;
}

.beta-input::placeholder { color: var(--text-faint); }

.beta-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring-focus);
}

/* Im Formular sitzt der Button neben dem Feld, nicht linksbündig darunter —
   überschreibt .beta .btn { align-self: flex-start; }. */
.beta-form .btn {
  flex: 0 0 auto;
  align-self: stretch;
}

.beta-form .btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

.beta-form .btn[disabled]:hover { background: var(--accent); }
.beta-form .btn[disabled]:active { transform: none; background: var(--accent); }

/* Rückmeldung des Formulars. Die Zeile bleibt immer im DOM — eine
   Live-Region, die erst mit dem Text auftaucht, lesen manche Screenreader
   nicht vor. Solange sie leer ist, frisst das negative Margin den Flex-Gap
   des Kastens wieder auf; der Kasten springt beim ersten Text also nicht. */
.beta .beta-status {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
}

.beta .beta-status:empty { margin-top: calc(var(--space-4) * -1); }
.beta .beta-status[data-tone='ok'] { color: var(--accent); font-weight: 700; }
.beta .beta-status[data-tone='warn'] { color: var(--text-strong); }

.beta .beta-fineprint {
  font-size: 14px;
  line-height: 1.5;
}

.beta .beta-fineprint a {
  color: var(--accent);
  text-underline-offset: 3px;
}

/* Klick-Seite (beta-bestaetigen.html): Der Mail-Link führt hierher, erst der
   Knopf schickt das POST, das wirklich bestätigt. Zustandsmechanik wie oben. */
:root[data-klick='ok']     [data-state='ok'],
:root[data-klick='fehler'] [data-state='fehler'] { display: flex; }

/* Ohne JavaScript bekommt das Formular keine Function-URL als action — dann
   lieber gar kein Knopf; der noscript-Ausweg (Mail beantworten) übernimmt. */
.no-js .confirm-form { display: none; }