/* ============================================================
   TRY NOT TO LAUGH — Design System
   Look: Live-Broadcast / Filmset. Dunkel, roh, REC-Rot,
   Expanded Grotesk + Mono-Timecodes, Körnung, Klebeband-Labels.
   Google Fonts werden nur nach Cookie-Einwilligung geladen (cookie.js).
   ============================================================ */

:root {
  --ink:      #0c0c0d;
  --ink-2:    #131315;
  --ink-3:    #1b1b1e;
  --paper:    #f1ede3;
  --paper-2:  #e7e2d4;
  --white:    #fbfaf7;
  --grey:     #9b9a94;
  --red:      #f03528;
  --red-hot:  #ff4a3d;
  --red-deep: #b71c12;
  --lime:     #c8f04b;
  --lime-dim: #8fae32;
  --line:     rgba(251, 250, 247, .16);
  --line-soft:rgba(251, 250, 247, .08);
  --line-ink: rgba(12, 12, 13, .18);

  --font-d: 'Archivo', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-b: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-m: 'Space Mono', 'Courier New', monospace;

  --nav-h: 72px;
  --pad: clamp(20px, 4vw, 56px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   LIGHT MODE — "EDITORIAL DAYLIGHT"
   ============================================================
   Konzept: warmes Print-Layout wie ein Filmmagazin auf Papier.
   Zwei Cream-Töne wechseln zwischen den Sektionen — Sektionen
   werden NICHT invertiert. Die "Ankerpunkte" (Buchungspanel,
   Kalender, Preistafel, Filmstrip, Footer) bleiben bewusst DARK
   und wirken wie schwarze Karten/Devices auf Creme. Signalfarben
   Rot/Lime bleiben unverändert; Lime wird auf Creme als
   Textfarbe zu --lime-dim (grasgrün) gedimmt.
   ============================================================ */

:root[data-theme="light"] {
  /* Basisflächen (creme, absteigende Wärme) */
  --ink:      #f5f1e5;   /* Body-BG · Basis-Creme                    */
  --ink-2:    #ebe4d1;   /* Section-Wechsel · leicht dunkleres Papier */
  --ink-3:    #dfd7c0;   /* Hover / Trennlinien-Papier                */

  /* Dark Anchor (bleiben dunkel im Light Mode) */
  --paper:    #17150f;   /* Kohle-Warm für Ankerflächen               */
  --paper-2:  #22201a;   /* Ankerflächen-Layer 2                      */

  /* Typo */
  --white:    #1a1815;   /* Primärtext (fast schwarz, warm getönt)   */
  --grey:     #66625a;   /* Sekundärtext                              */

  /* Linien */
  --line:      rgba(26, 24, 21, .18);
  --line-soft: rgba(26, 24, 21, .08);
  --line-ink:  rgba(245, 241, 229, .18);   /* auf Ankerflächen        */

  /* Grasgrün statt Lime für Text auf Creme (Lime bleibt für Buttons) */
  --lime-dim: #5b7318;

  /* Overlay-Tinten (statt hartkodiertes rgba(251,250,247,X)) */
  --tint-on-light: rgba(26, 24, 21, .06);
  --tint-on-dark:  rgba(245, 241, 229, .09);
}

/* Körnung dezenter auf Papier (multiply war zu düster) */
:root[data-theme="light"] body::after { opacity: .045; }

:root[data-theme="light"] ::selection { background: var(--red); color: #f5f1e5; }

/* ---------- Typo-Auszeichnungen ---------- */
html[data-theme="light"] .outline { -webkit-text-stroke-color: var(--white); }
html[data-theme="light"] .mark-lime { color: var(--lime-dim); }

/* ---------- Navbar ---------- */
:root[data-theme="light"] .navbar { background: rgba(245, 241, 229, .0); }
:root[data-theme="light"] .navbar.scrolled {
  background: rgba(245, 241, 229, .92);
  backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid var(--line);
}
html[data-theme="light"] .nav-links a:not(.btn) { color: rgba(26,24,21,.75); }
html[data-theme="light"] .nav-links a:not(.btn):hover { color: var(--white); }
:root[data-theme="light"] .nav-hamburger span { background: var(--white); }
@media (max-width: 760px) {
  :root[data-theme="light"] .nav-links { background: rgba(245,241,229,.98); }
  .nav-right { gap: .55rem; }
  .theme-toggle { padding: .3em .45em; }
}

/* ---------- Hero: cremig mit warmem Rot/Lime-Nebel ---------- */
:root[data-theme="light"] .hero { border-bottom: 1px solid var(--line-soft); }
:root[data-theme="light"] .hero-media {
  background:
    radial-gradient(ellipse at 78% 12%, rgba(240,53,40,.14), transparent 55%),
    radial-gradient(ellipse at 18% 82%, rgba(200,240,75,.18), transparent 55%),
    var(--ink);
}
:root[data-theme="light"] .hero-media::after {
  background: linear-gradient(to top, rgba(245,241,229,.0) 0%, rgba(245,241,229,.4) 70%, rgba(245,241,229,.0) 100%);
}
:root[data-theme="light"] .hud-corner { border-color: rgba(26,24,21,.55); }
:root[data-theme="light"] .hero-hud, :root[data-theme="light"] .hero-avail { color: var(--white); }
/* Timecode + Microline sind hardcoded near-white → auf Creme unsichtbar */
:root[data-theme="light"] .hero .tc { color: rgba(26,24,21,.6); }
:root[data-theme="light"] .hero-microline,
:root[data-theme="light"] .hero-microline .mono { color: rgba(26,24,21,.55); }
/* Lime-Text auf Creme ist unlesbar → grasgrün; Scarcity-Rot kräftiger */
:root[data-theme="light"] .hero-avail-inline { color: var(--lime-dim); }
:root[data-theme="light"] .hero-avail-inline.is-scarce { color: var(--red); }

/* ---------- Ticker: bleibt das rote Markenband (wie im Dark Mode) ---------- */
:root[data-theme="light"] .ticker {
  background: var(--red);
  color: #f8f5ec;
  border-block: 1px solid rgba(0,0,0,.15);
}
:root[data-theme="light"] .ticker-track span { color: #f8f5ec; }

/* ---------- .sec--paper: zweiter Cremeton (NICHT invertiert) ---------- */
:root[data-theme="light"] .sec--paper { background: var(--ink-2); color: var(--white); }
:root[data-theme="light"] .sec--paper .lead { color: var(--grey); }
:root[data-theme="light"] .sec--paper .outline { -webkit-text-stroke-color: var(--white); }
:root[data-theme="light"] .sec--paper ::selection { background: var(--ink); color: var(--white); }
:root[data-theme="light"] .sec--paper .step { border-color: var(--line); }
:root[data-theme="light"] .sec--paper .step:first-child { border-left-color: var(--line); }
:root[data-theme="light"] .sec--paper .tag {
  border-color: var(--line);
  color: var(--white);
  background: rgba(23,21,15,.05);
}
:root[data-theme="light"] .sec--paper .btn--ghost { border-color: var(--line); color: var(--white); }
:root[data-theme="light"] .sec--paper .btn--ghost:hover { background: var(--tint-on-light); border-color: var(--white); }

/* ---------- Buttons ---------- */
/* var(--white) ist im Light Mode dunkel → auf rotem Button unlesbar.
   Primär-CTAs behalten cremefarbenen Text, Lime-Buttons dunklen. */
:root[data-theme="light"] .btn { color: #f8f5ec; }
:root[data-theme="light"] .btn--lime { color: #0c0c0d; }
:root[data-theme="light"] .btn--ghost { border-color: var(--line); color: var(--white); }
:root[data-theme="light"] .btn--ghost:hover { background: var(--tint-on-light); border-color: var(--white); }

/* ---------- Tags ---------- */
:root[data-theme="light"] .tag { border-color: var(--line); background: rgba(23,21,15,.04); color: var(--white); }
:root[data-theme="light"] .tag--red { border-color: var(--red); color: var(--red); background: rgba(240,53,40,.08); }
:root[data-theme="light"] .tape--red { color: #fff; }
:root[data-theme="light"] .tag--tape { background: #efe8d0; color: #1a1815; }

/* ---------- Frame-Platzhalter (Media-Slots) ---------- */
:root[data-theme="light"] .frame { border-color: var(--line); background: var(--ink-2); }
:root[data-theme="light"] .frame.is-empty {
  border: 1px dashed rgba(26,24,21,.35);
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(26,24,21,.045) 14px 28px),
    var(--ink-2);
}
:root[data-theme="light"] .frame.is-empty .frame-empty .mono { color: rgba(26,24,21,.6); text-shadow: none; }
:root[data-theme="light"] .frame-empty-cam { border-color: rgba(26,24,21,.5); box-shadow: none; }
:root[data-theme="light"] .frame-empty-cam::before { border-color: rgba(26,24,21,.5); }
:root[data-theme="light"] .frame-empty-cam::after { border-left-color: rgba(26,24,21,.5); }
/* Kompakte "FOTO FOLGT"-Labels in Polaroids/Postkarten waren near-white */
:root[data-theme="light"] .polaroid .frame.is-empty .frame-empty::before,
:root[data-theme="light"] .postcard-stamp .frame.is-empty .frame-empty::before {
  color: rgba(26,24,21,.6);
  text-shadow: none;
}

/* ---------- Filmstrip: DARK ANCHOR ---------- */
:root[data-theme="light"] .filmstrip { background: var(--paper); border-color: var(--paper-2); }

/* ---------- Game- & Audience-Cards: Papier auf Papier ---------- */
:root[data-theme="light"] .game-card, :root[data-theme="light"] .aud-card {
  background: var(--ink);
  border-color: var(--line);
}
:root[data-theme="light"] .game-card:hover, :root[data-theme="light"] .aud-card:hover {
  background: #fffbf1;
  border-color: var(--white);
}

/* ---------- Preistafel: DARK ANCHOR ---------- */
:root[data-theme="light"] .price-panel {
  background: var(--paper);
  color: #f5f1e5;
  border-color: var(--line-ink);
}
:root[data-theme="light"] .price-panel .price-big { color: #f5f1e5; }
:root[data-theme="light"] .price-panel .price-big small { color: rgba(245,241,229,.55); }
:root[data-theme="light"] .price-panel .price-list li { color: rgba(245,241,229,.85); border-bottom-color: var(--line-ink); }
:root[data-theme="light"] .price-panel .kicker { color: var(--red-hot); }

/* ---------- FAQ ---------- */
:root[data-theme="light"] .faq details { border-color: var(--line); }
:root[data-theme="light"] .faq summary:hover { color: var(--white); }

/* ---------- Sticky-CTA (mobile) ---------- */
:root[data-theme="light"] .sticky-cta { background: rgba(245,241,229,.95); border-top-color: var(--line); }

/* ---------- Cookie-Banner ---------- */
:root[data-theme="light"] #cookie-banner {
  background: var(--paper);
  color: #f5f1e5;
  border: 1px solid var(--paper-2);
}
:root[data-theme="light"] #cookie-banner p { color: rgba(245,241,229,.75); }
:root[data-theme="light"] #cookie-banner a { color: var(--lime); }
:root[data-theme="light"] #cookie-banner button {
  background: transparent; color: #f5f1e5; border-color: var(--line-ink);
}
:root[data-theme="light"] #cookie-banner #cookie-accept { background: var(--red); border-color: var(--red); color: #f5f1e5; }

/* ---------- FOOTER: DARK ANCHOR ---------- */
:root[data-theme="light"] footer { background: var(--paper); color: rgba(245,241,229,.75); border-top-color: var(--paper-2); }
:root[data-theme="light"] .footer-brand-name { color: #f5f1e5; }
:root[data-theme="light"] .footer-col-title { color: var(--red-hot); }
:root[data-theme="light"] .footer-links a { color: rgba(245,241,229,.75); }
:root[data-theme="light"] .footer-links a:hover { color: #f5f1e5; }
:root[data-theme="light"] .footer-copy { color: rgba(245,241,229,.5); }

/* ---------- LEGAL-PAGES ---------- */
:root[data-theme="light"] .legal-page a { color: var(--lime-dim); }
:root[data-theme="light"] .legal-page strong { color: var(--white); }

/* ============================================================
   BUCHUNGSSEITE — Light Mode
   Konzept: Papier-Formular. Alle interaktiven Karten (Kalender,
   Slots, Location-Pills, Stepper, Summary) sind helles Papier
   (#fffbf1) mit Offset-Schatten auf Creme — wie ein Buchungs-
   formular auf dem Schreibtisch. Auswahl-Zustände bleiben Lime,
   Text-Akzente werden grasgrün / voll-rot.
   ============================================================ */
:root[data-theme="light"] .book-head { color: var(--white); }
:root[data-theme="light"] .book-mode-note { color: var(--grey); }

/* Tabs: rote Marker-Pills statt schwarzer Blöcke. Hover behält Kontrast,
   der aktive Tab wird nicht zum dominanten schwarzen Klotz. */
:root[data-theme="light"] .book-tab {
  color: var(--white);
  border-color: var(--line);
  background: #fffbf1;
}
:root[data-theme="light"] .book-tab:hover:not(.active) {
  color: var(--red);
  border-color: var(--red);
  background: #fffbf1;
}
:root[data-theme="light"] .book-tab.active {
  background: var(--red);
  color: #f8f5ec;
  border-color: var(--red);
}
:root[data-theme="light"] .book-tab.active:hover {
  background: var(--red-hot);
  color: #fff;
  border-color: var(--red-hot);
}

/* Step-Labels (1, 2, 3 …) */
:root[data-theme="light"] .book-step-label { color: var(--white); }
:root[data-theme="light"] .book-step-label .n { border-color: var(--red); color: var(--red); background: rgba(240,53,40,.08); }

/* Location-Pills: helle Papierkarten, Active grasgrün getönt */
:root[data-theme="light"] .loc-pill {
  background: #fffbf1;
  color: var(--white);
  border-color: var(--line);
  box-shadow: 2px 3px 0 rgba(26,24,21,.08);
}
:root[data-theme="light"] .loc-pill strong { color: var(--white); }
:root[data-theme="light"] .loc-pill .mono { color: var(--grey); }
:root[data-theme="light"] .loc-pill:hover:not(:disabled) { border-color: var(--white); background: #fffdf6; }
:root[data-theme="light"] .loc-pill.active {
  border-color: var(--lime-dim);
  background: rgba(143, 174, 50, .12);
  color: var(--white);
}
:root[data-theme="light"] .loc-pill.active strong { color: var(--lime-dim); }
:root[data-theme="light"] .loc-pill.active .mono { color: var(--lime-dim); }

/* Kalender: helle Papierkarte */
:root[data-theme="light"] .cal {
  background: #fffbf1;
  border: 1px solid var(--line);
  color: var(--white);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 3px 4px 0 rgba(26,24,21,.08);
}
:root[data-theme="light"] .cal-head { color: var(--white); border-bottom: 1px solid var(--line-soft); }
:root[data-theme="light"] .cal-title { color: var(--white); }
:root[data-theme="light"] .cal-nav { color: var(--white); border-color: var(--line); }
:root[data-theme="light"] .cal-week { border-bottom-color: var(--line-soft); }
:root[data-theme="light"] .cal-week span { color: var(--grey); }
:root[data-theme="light"] .cal-day { color: var(--white); }
:root[data-theme="light"] .cal-day:not(:disabled):hover { border-color: var(--line); }
:root[data-theme="light"] .cal-day:disabled { color: rgba(26,24,21,.25); }
:root[data-theme="light"] .cal-day .d-dot { background: var(--lime-dim); }
:root[data-theme="light"] .cal-day.full .d-dot { background: var(--red); }
:root[data-theme="light"] .cal-day .d-count { color: var(--lime-dim); }
:root[data-theme="light"] .cal-day.sel { background: var(--lime); color: #0c0c0d; }
:root[data-theme="light"] .cal-day.sel .d-count { color: #0c0c0d; }
:root[data-theme="light"] .cal-day.sel .d-dot { background: #0c0c0d; }
:root[data-theme="light"] .cal-legend { border-top-color: var(--line-soft); }
:root[data-theme="light"] .cal-legend span { color: var(--grey); }
:root[data-theme="light"] .cal-legend .lg-free i { background: var(--lime-dim); }

/* Slots: helle Papierkarten, belegt = rot durchgestrichen wie im Dark Mode */
:root[data-theme="light"] .slot {
  background: #fffbf1;
  border-color: var(--line);
  color: var(--white);
}
:root[data-theme="light"] .slot:not(:disabled):hover { border-color: var(--lime-dim); }
:root[data-theme="light"] .slot .s-state { color: var(--lime-dim); }
:root[data-theme="light"] .slot.booked {
  background: rgba(240,53,40,.05);
  border-color: rgba(240,53,40,.3);
}
:root[data-theme="light"] .slot.booked .s-time { color: rgba(26,24,21,.4); }
:root[data-theme="light"] .slot.booked .s-state { color: var(--red); }
:root[data-theme="light"] .slot.sel { background: var(--lime); border-color: var(--lime); color: #0c0c0d; }
:root[data-theme="light"] .slot.sel .s-state { color: #0c0c0d; }
:root[data-theme="light"] .slots-empty { color: var(--grey); }

/* Group-Stepper: helle Papierkarte */
:root[data-theme="light"] .gsize-ctrl { background: #fffbf1; border-color: var(--line); color: var(--white); box-shadow: 2px 3px 0 rgba(26,24,21,.08); }
:root[data-theme="light"] .gsize-ctrl button { color: var(--white); }
:root[data-theme="light"] .gsize-ctrl button:disabled { color: rgba(26,24,21,.25); }
:root[data-theme="light"] .gsize-val { border-left-color: var(--line-soft); border-right-color: var(--line-soft); }
:root[data-theme="light"] .gsize-note { color: var(--grey); }

/* Formularfelder */
:root[data-theme="light"] .f-label { color: var(--white); }
:root[data-theme="light"] .f-input {
  background: #fffbf1;
  border-color: var(--line);
  color: var(--white);
}
:root[data-theme="light"] .f-input:focus { border-color: var(--white); background: #fff; }
:root[data-theme="light"] .f-input::placeholder { color: rgba(26,24,21,.4); }
:root[data-theme="light"] select.f-input option { background: #fffbf1; color: var(--white); }
:root[data-theme="light"] .f-err { border-color: var(--red); background: rgba(240,53,40,.05); }

/* Sidebar-Summary: Papierkarte mit Bon-Charakter (Kopfzeile creme, Betrag grasgrün) */
:root[data-theme="light"] .book-summary {
  background: #fffbf1;
  border: 1px solid var(--line);
  color: var(--white);
  box-shadow: 4px 5px 0 rgba(26,24,21,.08);
}
:root[data-theme="light"] .book-summary-head {
  background: var(--ink-2);
  color: var(--grey);
  border-bottom-color: var(--line);
}
:root[data-theme="light"] .sum-row .k { color: var(--grey); }
:root[data-theme="light"] .sum-row .v { color: var(--white); }
:root[data-theme="light"] .sum-row .v.empty { color: rgba(26,24,21,.3); }
:root[data-theme="light"] .sum-total { color: var(--white); border-top-color: var(--line); }
:root[data-theme="light"] .sum-total .amount { color: var(--lime-dim); }
:root[data-theme="light"] .sum-note { color: var(--grey); border-top-color: var(--line-soft); }

/* Bestätigungsansicht */
:root[data-theme="light"] .book-done { background: rgba(143,174,50,.08); border-color: var(--lime-dim); color: var(--white); }
:root[data-theme="light"] .book-done .code { background: #fffbf1; color: var(--lime-dim); border-color: var(--lime-dim); }
:root[data-theme="light"] .done-kicker { color: var(--red); }

/* Körnung über allem – macht’s analog statt steril */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--red); color: var(--white); }

img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

.container { max-width: 1240px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Typo ---------- */

h1, h2, h3, .disp {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.015em;
}

.h-giant { font-size: clamp(3rem, 9.5vw, 8.2rem); }
.h-big   { font-size: clamp(2.2rem, 5.6vw, 4.4rem); }
.h-mid   { font-size: clamp(1.5rem, 3vw, 2.2rem); }

.outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--white);
}
.sec--paper .outline { -webkit-text-stroke: 2px var(--ink); }

.mark-red { color: var(--red-hot); }
.mark-lime { color: var(--lime); }

.mono {
  font-family: var(--font-m);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--grey);
  max-width: 40em;
}
.sec--paper .lead { color: #55534b; }

/* ---------- Labels / Sticker / Timecode ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-m);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: .45em 1em;
  border-radius: 2px;
  color: var(--white);
  background: rgba(12,12,13,.55);
}
.sec--paper .tag { border-color: var(--line-ink); color: var(--ink); background: rgba(241,237,227,.6); }

.tag--red { border-color: var(--red); color: var(--red-hot); }
.tag--tape {
  background: var(--paper);
  color: var(--ink);
  border: none;
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}


.tc { font-family: var(--font-m); font-size: .7rem; letter-spacing: .1em; color: rgba(251,250,247,.75); }

/* Sektionstitel-Zeile: "01 — DAS SPIEL" */
.kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-m);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red-hot);
  margin-bottom: 1.4rem;
}
.kicker::after {
  content: '';
  height: 1px;
  flex: 0 1 120px;
  background: currentColor;
  opacity: .5;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--font-m);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background: var(--red);
  border: 1px solid var(--red);
  padding: 1em 1.7em;
  border-radius: 2px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
}
.btn:hover { background: var(--red-hot); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(0,0,0,.45); }
.btn:active { transform: translate(0,0); box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.btn .arr { font-family: var(--font-b); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(251,250,247,.06); border-color: var(--white); box-shadow: none; }
.sec--paper .btn--ghost { border-color: var(--line-ink); color: var(--ink); }
.sec--paper .btn--ghost:hover { background: rgba(12,12,13,.05); border-color: var(--ink); }

.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn--lime:hover { background: #d6fa63; }

.btn--big { font-size: 1rem; padding: 1.2em 2.2em; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Navbar ---------- */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--pad);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.navbar.scrolled {
  background: rgba(12,12,13,.92);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line-soft);
}

.nav-logo {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 1.15rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  white-space: nowrap;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin-left: auto;
}
.nav-links a:not(.btn) {
  font-family: var(--font-m);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(251,250,247,.75);
  transition: color .15s;
}
.nav-links a:not(.btn):hover { color: var(--white); }
.nav-links .btn { padding: .7em 1.2em; font-size: .74rem; box-shadow: none; }

.nav-right { display: flex; align-items: center; gap: 1rem; }

.lang-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--white);
  font-family: var(--font-m);
  font-size: .68rem;
  letter-spacing: .08em;
  padding: .5em .8em;
}
.lang-toggle [data-role="other"], .lang-toggle .lang-sep { opacity: .4; }

.theme-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--white);
  padding: .35em .55em;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  line-height: 1;
  transition: border-color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--white); }
.theme-toggle .theme-icon {
  font-size: .9rem;
  transition: opacity .15s;
}
.theme-toggle .theme-icon--light { opacity: .35; }
.theme-toggle .theme-icon--dark { opacity: 1; }
html[data-theme="light"] .theme-toggle .theme-icon--light { opacity: 1; }
html[data-theme="light"] .theme-toggle .theme-icon--dark { opacity: .35; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.nav-hamburger span { width: 24px; height: 2px; background: var(--white); transition: .2s; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(240,53,40,.14), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(200,240,75,.05), transparent 50%),
    var(--ink-2);
}
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,13,.96) 0%, rgba(12,12,13,.55) 45%, rgba(12,12,13,.35) 100%);
}

/* Sucher-Overlay: Ecken + REC + Timecode */
.hero-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-hud .hud-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid rgba(251,250,247,.5);
}
.hud-corner.tl { top: calc(var(--nav-h) + 18px); left: 18px; border-right: 0; border-bottom: 0; }
.hud-corner.tr { top: calc(var(--nav-h) + 18px); right: 18px; border-left: 0; border-bottom: 0; }
.hud-corner.bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.hud-corner.br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.hero-hud .hud-rec {
  position: absolute;
  top: calc(var(--nav-h) + 26px);
  right: 58px;
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-m);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--white);
}
.hero-hud .hud-tc { position: absolute; bottom: 26px; right: 58px; }

.hero-inner {
  position: relative;
  z-index: 3;
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: 5.5rem;
  width: 100%;
}

.hero h1 { margin: 1.2rem 0 1.6rem; }
.hero .lead { margin-bottom: 2.2rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.hero-avail {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-m);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lime);
}

/* ---------- Ticker ---------- */

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--red);
  color: var(--white);
  padding: .8rem 0;
}
.ticker-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: ticker 28s linear infinite;
  font-family: var(--font-m);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ticker-track span { display: inline-block; padding-right: 3rem; }
.ticker-track span::after { content: '●'; font-size: .6em; opacity: .7; margin-left: 3rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */

.sec { padding: clamp(4.5rem, 9vw, 8.5rem) 0; position: relative; }
.sec--paper { background: var(--paper); color: var(--ink); }
.sec--paper ::selection { background: var(--ink); color: var(--paper); }
.sec--line-t { border-top: 1px solid var(--line-soft); }

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head .lead { margin-top: 1.4rem; }

/* ---------- Steps (Das Spiel) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-ink);
}
.step {
  border-bottom: 1px solid var(--line-ink);
  border-right: 1px solid var(--line-ink);
  padding: 1.8rem 1.5rem 2.2rem;
  position: relative;
}
.step:first-child { border-left: 1px solid var(--line-ink); }
.step-num {
  font-family: var(--font-m);
  font-size: .74rem;
  letter-spacing: .15em;
  color: var(--red);
  margin-bottom: 2.6rem;
}
.step h3 { font-size: 1.25rem; margin-bottom: .7rem; }
.step p { font-size: .95rem; color: #55534b; }

/* ---------- Media Frames (Footage) ---------- */

.frame {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.frame--tall { aspect-ratio: 4 / 5; }
.frame--sq { aspect-ratio: 1 / 1; }

.frame video, .frame img { width: 100%; height: 100%; object-fit: cover; }

.frame .frame-rec {
  position: absolute;
  top: 12px; left: 14px;
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-m);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  z-index: 3;
}
.frame .frame-tc {
  position: absolute;
  bottom: 10px; right: 14px;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.frame .frame-cap {
  position: absolute;
  bottom: 10px; left: 14px;
  z-index: 3;
  font-family: var(--font-m);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251,250,247,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

/* Platzhalter, solange kein echtes Material da ist */
.frame.is-empty {
  border: 1px dashed rgba(251,250,247,.35);
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(251,250,247,.045) 14px 28px),
    #14141a;
}
/* Wenn kein Bild geladen ist, den Original-Caption unterdrücken —
   sonst überlappt "Cam 05 · 00:34:19" mit dem "Foto folgt"-Platzhalter. */
.frame.is-empty .frame-cap,
.frame.is-empty .frame-rec,
.frame.is-empty .frame-tc { display: none; }
.frame.is-empty .frame-empty {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  text-align: center;
  padding: 1rem;
}
.frame.is-empty .frame-empty .mono {
  color: rgba(251,250,247,.82);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  max-width: 90%;
  word-break: break-word;
}
/* Kamera-Silhouette — deutlich größer, klarer als Kamera erkennbar */
.frame-empty-cam {
  width: 58px; height: 38px;
  border: 2.5px solid rgba(251,250,247,.75);
  border-radius: 4px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.frame-empty-cam::before {
  /* Linse (Kreis in der Mitte) */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border: 2px solid rgba(251,250,247,.75);
  border-radius: 50%;
}
.frame-empty-cam::after {
  /* Objektiv-Vorsatz rechts */
  content: '';
  position: absolute;
  right: -14px; top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left: 12px solid rgba(251,250,247,.75);
}

/* In sehr kleinen Frames (Polaroid, Postkarten-Stamp) den Icon verstecken
   und nur einen kompakten Text zeigen — sonst sieht's überladen aus. */
.polaroid .frame.is-empty .frame-empty-cam,
.postcard-stamp .frame.is-empty .frame-empty-cam { display: none; }
.polaroid .frame.is-empty .frame-empty,
.postcard-stamp .frame.is-empty .frame-empty { gap: .3rem; }
.polaroid .frame.is-empty .frame-empty::before,
.postcard-stamp .frame.is-empty .frame-empty::before {
  content: 'FOTO FOLGT';
  color: rgba(251,250,247,.9);
  font-family: var(--font-m);
  font-size: .68rem;
  letter-spacing: .18em;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.media-grid .m-a { grid-column: span 7; }
.media-grid .m-b { grid-column: span 5; }
.media-grid .m-c { grid-column: span 4; }
.media-grid .m-d { grid-column: span 4; }
.media-grid .m-e { grid-column: span 4; }

/* ---------- Film Section ---------- */

.film-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.filmstrip {
  position: relative;
  padding: 26px 0;
  background: #000;
  border: 1px solid var(--line);
}
.filmstrip::before, .filmstrip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  background-image: repeating-linear-gradient(90deg, transparent 0 8px, var(--ink) 8px 22px, transparent 22px 30px);
  background-color: #000;
  z-index: 1;
}
.filmstrip::before { top: 0; }
.filmstrip::after { bottom: 0; }
.filmstrip .frame { border-left: 0; border-right: 0; }

.film-points { list-style: none; margin-top: 2rem; display: grid; gap: 1.1rem; }
.film-points li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.02rem;
}
.film-points .mono { color: var(--red-hot); flex: none; padding-top: .1em; }
.film-points .fp-body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  line-height: 1.5;
}
.film-points .fp-title {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: .35rem;
  display: block;
}
:root[data-theme="light"] .film-points .fp-title { color: var(--white); }
/* Highlight-Punkt (03 · "Der Film gehört euch") bekommt einen zarten Akzent */
.film-points .fp-highlight {
  background: linear-gradient(90deg, rgba(240,53,40,.06) 0%, transparent 60%);
  border-left: 3px solid var(--red);
  padding: .3rem 0 1.2rem .9rem;
  margin-left: -.9rem;
  border-bottom: 1px solid var(--line-soft);
}
.film-points .fp-highlight .mono { color: var(--red); }

/* Deal-Absatz im 03er-Highlight: eigener kleiner Block mit Lime-Rand,
   damit Rabatt-Angebot als Angebot lesbar wird (nicht als Kleingedrucktes). */
.fp-deal {
  display: block;
  margin-top: .7rem;
  padding: .8rem 1rem .9rem;
  background: rgba(200, 240, 75, .06);
  border: 1px solid rgba(200, 240, 75, .3);
  border-left: 3px solid var(--lime);
  border-radius: 2px;
  font-size: .96rem;
  line-height: 1.5;
}
.fp-deal-tag {
  display: block;
  color: var(--lime);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.fp-deal b.mark-lime { color: var(--lime); font-weight: 800; }
:root[data-theme="light"] .fp-deal { background: rgba(143, 174, 50, .1); border-color: rgba(143, 174, 50, .4); border-left-color: var(--lime-dim); }
:root[data-theme="light"] .fp-deal-tag { color: var(--lime-dim); }
:root[data-theme="light"] .fp-deal b.mark-lime { color: var(--lime-dim); }

/* ---------- Minigames ---------- */

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.game-card {
  border: 1px solid var(--line-ink);
  background: var(--white);
  padding: 1.6rem 1.5rem 1.8rem;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.game-card .mono { color: var(--red); }
.game-card h3 { font-size: 1.3rem; margin: .9rem 0 .6rem; }
.game-card p { font-size: .95rem; color: #55534b; }
.game-card.game-card--secret {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.game-card--secret p { color: var(--grey); }
.game-card--secret:hover { box-shadow: 6px 6px 0 var(--red); }

/* ---------- Audience / Anlässe ---------- */

.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.aud-card {
  border: 1px solid var(--line);
  padding: 2rem 1.6rem;
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-height: 260px;
}
.aud-card h3 { font-size: 1.35rem; }
.aud-card p { color: var(--grey); font-size: .97rem; flex: 1; }
.aud-card .aud-link {
  font-family: var(--font-m);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lime);
  text-decoration: none;
}
.aud-card .aud-link:hover { text-decoration: underline; }

/* ---------- B2B strip ---------- */

.b2b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(1.6rem, 3.5vw, 3rem);
}
.b2b h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: .5rem; }
.b2b p { color: var(--grey); max-width: 34em; }

/* ---------- Preis ---------- */

.price-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  border: 1px solid var(--line-ink);
  background: var(--white);
  padding: clamp(1.8rem, 4vw, 3.5rem);
}
.price-big {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: .9;
}
.price-big small {
  font-size: .28em;
  display: block;
  margin-top: .4em;
  font-family: var(--font-m);
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.price-list { list-style: none; display: grid; gap: .8rem; }
.price-list li { display: flex; gap: .8rem; align-items: baseline; font-size: 1.02rem; }
.price-list li::before { content: '→'; color: var(--red); font-weight: 700; }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  font-family: var(--font-d);
  font-weight: 700;
  font-stretch: 110%;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-m); color: var(--red-hot); font-size: 1.2rem; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 1.4rem; color: var(--grey); max-width: 44em; }

/* ---------- CTA final ---------- */

.cta-final .h-giant { margin: 1rem 0 2rem; }

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--line-soft);
  background: #09090a;
  padding: 4rem 0 2rem;
}
.footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand-name {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-bottom: 1rem;
}
.footer-brand-desc { color: var(--grey); font-size: .95rem; max-width: 28em; }
.footer-col-title {
  font-family: var(--font-m);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red-hot);
  margin-bottom: 1rem;
}
.footer-links { list-style: none; display: grid; gap: .55rem; }
.footer-links a { color: var(--grey); text-decoration: none; font-size: .93rem; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  max-width: 1240px;
  margin: 3rem auto 0;
  padding: 1.4rem var(--pad) 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
}
.footer-copy { font-family: var(--font-m); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #5c5b57; }

/* ---------- Sticky Mobile CTA ---------- */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 850;
  display: none;
  padding: .8rem var(--pad);
  background: rgba(12,12,13,.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.sticky-cta .btn { width: 100%; justify-content: center; }

/* ============================================================
   BUCHUNG (buchen.html)
   ============================================================ */

.book-page { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 5rem; min-height: 100vh; }
.book-head { margin-bottom: 1.5rem; }

.book-tabs { display: flex; gap: 10px; margin: 2.2rem 0 2.6rem; flex-wrap: wrap; }
.book-tab {
  font-family: var(--font-m);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--grey);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .9em 1.5em;
}
.book-tab.active { background: var(--white); color: var(--ink); border-color: var(--white); }

.book-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.book-step { margin-bottom: 2.6rem; }
.book-step-label {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--font-m);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
}
.book-step-label .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--red);
  color: var(--red-hot);
  border-radius: 50%;
  font-size: .72rem;
  flex: none;
}

/* Standort-Pills */
.loc-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.loc-pill {
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--white);
  border-radius: 2px;
  padding: 1em 1.4em;
  text-align: left;
  display: grid;
  gap: .25em;
  min-width: 150px;
}
.loc-pill .mono { font-size: .64rem; color: var(--grey); }
.loc-pill strong { font-family: var(--font-d); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; }
.loc-pill.active { border-color: var(--lime); background: rgba(200,240,75,.08); }
.loc-pill.active .mono { color: var(--lime); }
.loc-pill:disabled { opacity: .45; cursor: not-allowed; }

/* Kalender */
.cal { border: 1px solid var(--line); background: var(--ink-2); }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.cal-title { font-family: var(--font-m); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.cal-nav {
  background: none;
  border: 1px solid var(--line);
  color: var(--white);
  width: 34px; height: 34px;
  border-radius: 2px;
  font-size: 1rem;
}
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week { border-bottom: 1px solid var(--line-soft); }
.cal-week span {
  font-family: var(--font-m);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
  padding: .6rem 0;
}
.cal-days { padding: 6px; gap: 4px; }
.cal-day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  background: transparent;
  color: var(--white);
  font-family: var(--font-m);
  font-size: .82rem;
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-day:not(:disabled):hover { border-color: var(--line); }
.cal-day.sel { background: var(--lime); color: var(--ink); font-weight: 700; }
.cal-day:disabled { color: #3f3f43; cursor: default; }
.cal-day .d-dot {
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lime);
}
.cal-day.full .d-dot { background: var(--red); }
.cal-day.sel .d-dot { background: var(--ink); }
.cal-day .d-count {
  position: absolute;
  top: 3px; right: 4px;
  font-family: var(--font-m);
  font-size: .56rem;
  letter-spacing: .04em;
  color: var(--lime);
  line-height: 1;
}
.cal-day.sel .d-count { color: var(--ink); }
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  padding: .8rem 1rem;
  border-top: 1px solid var(--line-soft);
}
.cal-legend span { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-m); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.cal-legend i { width: 7px; height: 7px; border-radius: 50%; }
.cal-legend .lg-free i { background: var(--lime); }
.cal-legend .lg-full i { background: var(--red); }

/* Zeitslots */
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.slot {
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--white);
  border-radius: 2px;
  padding: .9em .6em;
  display: grid;
  gap: .3em;
  text-align: center;
  font-family: var(--font-m);
  transition: border-color .12s, background .12s;
}
.slot .s-time { font-size: 1.02rem; font-weight: 700; letter-spacing: .04em; }
.slot .s-state { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.slot:not(:disabled):hover { border-color: var(--lime); }
.slot.sel { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.slot.sel .s-state { color: var(--ink); }
.slot.booked {
  cursor: not-allowed;
  border-color: rgba(240,53,40,.35);
  background: rgba(240,53,40,.05);
}
.slot.booked .s-time { color: #6a6a6e; text-decoration: line-through; }
.slot.booked .s-state { color: var(--red-hot); }
.slots-empty { font-family: var(--font-m); font-size: .78rem; color: var(--grey); letter-spacing: .06em; padding: 1rem 0; }

/* Gruppengröße Stepper */
.gsize { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.gsize-ctrl { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; background: var(--ink-2); }
.gsize-btn {
  width: 52px; height: 52px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  font-family: var(--font-m);
}
.gsize-btn:disabled { opacity: .3; }
.gsize-val {
  min-width: 90px;
  text-align: center;
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 1.6rem;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding: 0 .5rem;
  line-height: 52px;
}
.gsize-note { font-family: var(--font-m); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }

/* Formfelder */
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-field { display: grid; gap: .45rem; align-content: start; }
.f-field.wide { grid-column: 1 / -1; }
.f-label { font-family: var(--font-m); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.f-input, .f-field textarea, .f-field select {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--white);
  padding: .95em 1em;
  font-size: 1rem;
  width: 100%;
}
.f-input:focus, .f-field textarea:focus, .f-field select:focus { outline: none; border-color: var(--lime); }
.f-field textarea { min-height: 110px; resize: vertical; }
.f-err { border-color: var(--red) !important; }
.f-errmsg { font-family: var(--font-m); font-size: .68rem; color: var(--red-hot); letter-spacing: .06em; }

/* Zusammenfassung (Sidebar) */
.book-summary {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.book-summary-head {
  display: flex; align-items: center; gap: .6em;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-m);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.book-summary-body { padding: 1.3rem; display: grid; gap: .9rem; }
.sum-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.sum-row .k { font-family: var(--font-m); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); padding-top: .2em; }
.sum-row .v { text-align: right; font-weight: 600; }
.sum-row .v.empty { color: #4a4a4e; font-weight: 400; }
.sum-total {
  border-top: 1px solid var(--line-soft);
  padding: 1.1rem 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sum-total .amount { font-family: var(--font-d); font-weight: 900; font-stretch: 118%; font-size: 1.9rem; color: var(--lime); }
.book-summary .btn { margin: 0 1.3rem 1.3rem; width: calc(100% - 2.6rem); justify-content: center; }
.sum-note { padding: 0 1.3rem 1.2rem; font-family: var(--font-m); font-size: .64rem; letter-spacing: .06em; color: var(--grey); text-transform: uppercase; line-height: 1.8; }

/* Bestätigung */
.book-done {
  border: 1px solid var(--lime);
  background: rgba(200,240,75,.05);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: none;
}
.book-done.show { display: block; }
.book-done .code {
  font-family: var(--font-m);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: .18em;
  color: var(--lime);
  border: 1px dashed var(--lime);
  display: inline-block;
  padding: .4em .9em;
  margin: 1.2rem 0;
}

/* Prep-Hinweis nach Reservierung: „bereitet euch vor" */
.done-prep {
  display: block;
  margin-top: 1.6rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--red);
  background: rgba(240,53,40,.05);
}
.done-prep-kicker {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .5rem;
}
.done-prep-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--white);
}
.done-prep-body b { color: var(--red); }
:root[data-theme="light"] .done-prep {
  background: rgba(240,53,40,.06);
  border-left-color: var(--red);
}
:root[data-theme="light"] .done-prep-kicker { color: var(--red); }
:root[data-theme="light"] .done-prep-body { color: var(--white); }
:root[data-theme="light"] .done-prep-body b { color: var(--red); }

/* Offline/Fallback-Hinweis */
.book-mode-note {
  font-family: var(--font-m);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: .8rem;
}

/* AGB-Zustimmung über dem Bezahl-Button */
.book-terms {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: 0 1.3rem 1rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--grey);
  cursor: pointer;
}
.book-terms input { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; accent-color: var(--lime); }
.book-terms a { color: inherit; text-decoration: underline; }
.book-terms.f-err { color: var(--red); }

/* Hinweis nach abgebrochener / fehlgeschlagener Bezahlung */
.book-pay-note {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--red);
  background: rgba(240,53,40,.06);
  font-size: .9rem;
  line-height: 1.5;
}
.done-extra { margin: -.4rem 0 1rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.storno-main { max-width: 460px; margin-top: 2rem; }

/* ============================================================
   Rechtsseiten
   ============================================================ */

.legal-page { padding: calc(var(--nav-h) + 4rem) 0 5rem; }
.legal-page .container { max-width: 860px; }
.legal-page h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 2.5rem; }
.legal-page h2 { font-size: 1.15rem; margin: 2.2rem 0 .8rem; }
.legal-page h3 { font-size: 1rem; margin: 1.6rem 0 .6rem; }
.legal-page p, .legal-page li { color: var(--grey); font-size: .97rem; margin-bottom: .8rem; }
.legal-page ul, .legal-page ol { padding-left: 1.2rem; }
.legal-page a { color: var(--lime); }
.legal-page strong { color: var(--white); }
.legal-divider { height: 1px; background: var(--line-soft); margin: 2.4rem 0; }
.legal-meta {
  font-family: var(--font-m);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 3rem;
}

/* ---------- Cookie Banner ---------- */

#cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  z-index: 1500;
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,.5);
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
#cookie-banner .cookie-text { flex: 1 1 280px; }
#cookie-banner strong { font-family: var(--font-d); font-stretch: 112%; text-transform: uppercase; display: block; margin-bottom: .4rem; }
#cookie-banner p { font-size: .82rem; line-height: 1.5; }
#cookie-banner a { color: var(--red-deep); }
#cookie-banner .cookie-actions { display: flex; gap: .6rem; }
#cookie-banner button {
  font-family: var(--font-m);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .8em 1.2em;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
#cookie-banner #cookie-accept { background: var(--ink); color: var(--paper); }

/* ---------- Animationen ---------- */

.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(odd) { border-left: 1px solid var(--line-ink); }
  .film-wrap { grid-template-columns: 1fr; }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
  .book-grid { grid-template-columns: 1fr; }
  .book-summary { position: static; }
  .media-grid .m-a { grid-column: span 12; }
  .media-grid .m-b { grid-column: span 12; }
  .media-grid .m-c, .media-grid .m-d, .media-grid .m-e { grid-column: span 4; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  /* „Try Not To Laugh“ ist länger als der alte Name – Logo auf dem Handy kompakter */
  .navbar { gap: 1rem; }
  .nav-logo { font-size: .88rem; font-stretch: 105%; letter-spacing: 0; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(12,12,13,.98);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem var(--pad) 2rem;
    gap: 1.3rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-hamburger { display: flex; }

  .steps { grid-template-columns: 1fr; }
  .step { border-left: 1px solid var(--line-ink) !important; }
  .games-grid, .aud-grid { grid-template-columns: 1fr; }
  .media-grid .m-c, .media-grid .m-d, .media-grid .m-e { grid-column: span 12; }
  .price-panel { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr; }
  .hero-hud .hud-rec { right: 18px; }
  .hero-hud .hud-tc { right: 18px; }
  .sticky-cta.on { display: block; }
  footer { padding-bottom: 6rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}


/* ═════════════════════════════════════════════════════════════════
   TRY NOT TO LAUGH — LANDINGPAGE v2 · "PHYSICAL ARTIFACT" LAYER
   Neue Bausteine für index.html: Klebeband, Handschrift, Polaroids,
   Timeline, Sprachnotizen, Karteikarten, Postkarten, Post-it,
   Kassenbon, Notizbuch-FAQ, Founder-Anker, Türschild-CTA.
   Alles nutzt die bestehenden Farb-/Font-Variablen — nur ein
   dritter Utility-Font (Caveat) für handschriftliche Annotationen.
   ═════════════════════════════════════════════════════════════════ */

:root {
  /* Handschrift-Chain: erst Caveat (nach Cookie-Consent), dann breite
     System-Fallbacks — kein "cursive" am Ende, das rendert unpredictable. */
  --font-hand: 'Caveat', 'Bradley Hand', 'Marker Felt', 'Chalkboard SE',
               'Segoe Script', 'Segoe Print', 'Comic Sans MS',
               ui-serif, Georgia, serif;
  --tape-shadow: 0 6px 18px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.2);
  --paper-note: #f6e88a;
  --paper-lined-line: rgba(64, 110, 200, .16);

  /* MODE-UNABHÄNGIGE Farben für alle Bausteine, die ein festes,
     eigenes Papier haben (Polaroid, Postkarte, Post-it, Kassenbon,
     Notizbuch, Karteikarte). Hier NIE var(--ink) / var(--white)
     verwenden — die kippen im Light-Mode und verursachen
     schwarz-auf-schwarz / weiß-auf-weiß. */
  --paper-ink:   #1a1815;
  --paper-ink-2: #38352e;
  --paper-cream: #fbf6e6;
  --paper-white: #fffdf3;
}

/* Handschrift-Utility (Annotationen, Notizen, Zitate).
   Fallback-Sicherheit: wenn Caveat nicht geladen ist, wird der Text
   kursiv gerendert (statt in einer bizarren cursive-Systemschrift),
   und mit min. 1.05rem groß genug für klare Lesbarkeit. */
.hand {
  font-family: var(--font-hand);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
  color: inherit;
  font-size: 1.15rem;
}
/* Wenn Caveat NICHT geladen ist, wird die Handschrift kursiv/serif
   gerendert. Wir nutzen font-synthesis + font-style, damit selbst
   der Fallback wie eine handschriftliche Notiz wirkt. */
.hand { font-synthesis: style weight; }

.hand--sm { font-size: 1.05rem; }
.hand--md { font-size: 1.4rem; }
.hand--above { position: absolute; }
.hand--q { font-weight: 700; font-size: 1.35rem; }

/* Klebeband-Streifen (Hero-Stripes) */
.tape {
  display: inline-flex;
  align-items: center;
  padding: .4em 1em;
  font-family: var(--font-m);
  font-size: .78rem;
  letter-spacing: .08em;
  /* Tape-Hintergründe sind FIXE helle Farben → Textfarbe ebenfalls fix
     dunkel halten. var(--ink) kippt im Light Mode zu Creme (unlesbar). */
  color: var(--paper-ink);
  background: #efe8d0;
  box-shadow: var(--tape-shadow);
  transform: rotate(-1.5deg);
  position: relative;
}
.tape + .tape { margin-left: .35rem; }
.tape--yellow { background: #f5e15a; transform: rotate(1.2deg); }
.tape--white  { background: #f4efe0; transform: rotate(-1.8deg); }
.tape--red    { background: var(--red); color: var(--white); transform: rotate(.8deg); }
.tape::before, .tape::after {
  content: '';
  position: absolute;
  top: -3px; bottom: -3px;
  width: 6px;
  background: linear-gradient(rgba(0,0,0,.1), transparent 40%, rgba(0,0,0,.06));
}
.tape::before { left: -1px; }
.tape::after  { right: -1px; }


/* ────────────── HERO v2 ────────────── */

.hero--v2 .hero-inner--v2 {
  padding-top: calc(var(--nav-h) + 5rem);
  max-width: 1240px;
}
.hero--v2 .hero-tag-v2 { margin-bottom: 1.4rem; }
.hero--v2 .hero-h1-v2 {
  margin: 0 0 1.4rem;
  position: relative;
}
.hero--v2 .hand-anchor { position: relative; display: inline-block; }
.hero--v2 .hand--above {
  top: -1.4em;
  right: -.2em;
  transform: rotate(-6deg);
  font-size: clamp(1rem, 2vw, 1.6rem);
  color: var(--red-hot);
  white-space: nowrap;
}
.hero--v2 .hand--above::after {
  content: '';
  display: block;
  height: 6px;
  margin-top: .1em;
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q 25 1 50 5 T 98 4' fill='none' stroke='%23ff4a3d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .35rem;
  margin: 0 0 1.9rem;
}

.hero-lead-v2 { margin-bottom: 2.4rem; max-width: 42em; }

.hero-microline {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  color: rgba(251,250,247,.5);
  flex-wrap: wrap;
}
.hero-microline .mono { color: rgba(251,250,247,.5); }
.hero-avail-inline {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--lime);
  font-family: var(--font-m);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}
a.hero-avail-inline {
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  transition: opacity .2s ease;
}
a.hero-avail-inline:hover { opacity: .75; }
.hero-avail-arr { font-family: var(--font-m); }
/* Wenn <= 25% frei: rote Farbe für Urgency */
.hero-avail-inline.is-scarce { color: var(--red-hot); }


/* ────────────── SESSION LOG STRIPE ────────────── */

.stripe-log {
  background: var(--red);
  color: var(--white);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 1.6rem 0 1.9rem;
  position: relative;
  overflow: hidden;
}
.stripe-log::before {
  /* leichte "abgerissene" Kante oben */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background:
    linear-gradient(to right,
      transparent 0 4px, rgba(0,0,0,.18) 4px 5px,
      transparent 5px 12px, rgba(0,0,0,.18) 12px 13px,
      transparent 13px 22px, rgba(0,0,0,.18) 22px 23px);
  background-size: 22px 5px;
  opacity: .35;
}
.stripe-log-inner { display: flex; flex-direction: column; gap: .9rem; }
.stripe-log-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px dashed rgba(255,255,255,.35);
}
.stripe-log-head .mono { font-size: .82rem; letter-spacing: .18em; }
.stripe-log-head .hand { color: rgba(255,255,255,.9); transform: rotate(-2deg); display: inline-block; }
.stripe-log-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .5rem 1.6rem;
}
.stripe-log-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  align-items: baseline;
  font-size: .95rem;
  line-height: 1.4;
}
.stripe-log-list .mono { color: rgba(255,255,255,.75); font-size: .74rem; }
.stripe-log-list s { color: rgba(255,255,255,.55); text-decoration-thickness: 2px; }
.stripe-log-list b { font-weight: 700; }
.stripe-log-list .hand { color: rgba(255,255,255,.95); font-size: 1.15rem; }


/* ────────────── LETTER: "Was passiert hier eigentlich" ────────────── */

.letter {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.letter-h { margin-bottom: 2rem; }
.letter-body { max-width: 44em; }
.letter-body .letter-p {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  margin-bottom: 1.3rem;
  color: var(--white);
}
.sec--paper .letter-body .letter-p { color: var(--ink); }
.letter-body em { font-style: italic; }
.letter-body b { font-weight: 700; }
/* Regel-Klarstellung: kein Rauswurf, sondern Punkte — hebt sich vom Fließtext ab */
.letter-body .letter-p--pull {
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--lime);
  background: rgba(200, 240, 75, .06);
  border-radius: 2px;
}
.sec--paper .letter-body .letter-p--pull {
  background: rgba(143, 174, 50, .09);
  border-left-color: var(--lime-dim);
}
.letter-sign {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.letter-sign .hand { color: var(--red-hot); transform: rotate(-2deg); }
.sec--paper .letter-sign .hand { color: var(--red); }
.letter-sign-sub { color: var(--grey); }

.room-sketch {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  transform: rotate(1.3deg);
}
.room-sketch-frame {
  background: var(--paper-white);
  border: 1px solid rgba(0,0,0,.14);
  padding: 1.2rem 1.1rem .7rem;
  box-shadow: 6px 8px 22px rgba(0,0,0,.22), 1px 1px 0 rgba(0,0,0,.05);
  color: var(--paper-ink);
  position: relative;
  max-width: 340px;
  width: 100%;
}
.room-sketch-frame::before {
  /* Klebeband oben */
  content: '';
  position: absolute;
  top: -14px; left: 50%;
  width: 90px; height: 22px;
  background: rgba(245, 225, 90, .78);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.room-sketch-label {
  display: block;
  color: rgba(0,0,0,.5);
  margin-bottom: .5rem;
  font-size: .7rem;
}
.room-sketch-svg { width: 100%; height: auto; color: var(--paper-ink); }
.room-sketch-caption {
  color: var(--paper-ink);
  transform: rotate(-2deg);
  text-align: center;
  max-width: 240px;
}


/* ────────────── TIMELINE (Die 60 Minuten) ────────────── */

.timeline-head { margin-bottom: 3rem; max-width: 44em; }
.timeline-head .mono { color: var(--red-hot); display: block; margin-bottom: 1rem; }
.timeline-head h2 { margin-bottom: 1rem; }
.timeline-lead { margin-top: 1rem; }

.timeline {
  list-style: none;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 96px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 66px; top: 0; bottom: 0;
  width: 2px;
  background:
    linear-gradient(to bottom,
      transparent 0, var(--line) 12px, var(--line) calc(100% - 12px), transparent 100%);
}

.beat {
  position: relative;
  padding: 1.1rem 0 1.3rem 1.2rem;
  border-bottom: 1px dashed var(--line-soft);
}
.beat:last-child { border-bottom: 0; }

.beat-time {
  position: absolute;
  left: -96px;
  top: 1.2rem;
  width: 78px;
  color: var(--red-hot);
  font-size: .78rem;
  letter-spacing: .1em;
  white-space: normal;
  line-height: 1.2;
}
/* Farbcode ohne Punkte: pre- und danach-Beats werden lime, Kernphase bleibt rot */
.beat--pre .beat-time,
.beat--film .beat-time { color: var(--lime); }

/* "Vor dem Spiel" ist der wichtigste narrative Beat — Karten-artiges Highlight */
.beat--pre .beat-body {
  background: rgba(200, 240, 75, .06);
  border: 1px solid rgba(200, 240, 75, .25);
  border-left: 3px solid var(--lime);
  padding: 1rem 1.2rem;
  border-radius: 3px;
}
.beat--pre .beat-body em {
  color: var(--lime);
  font-style: normal;
  font-weight: 700;
}
.sec--paper .beat--pre .beat-body {
  background: rgba(143, 174, 50, .08);
  border-color: rgba(143, 174, 50, .35);
  border-left-color: var(--lime-dim);
}
.sec--paper .beat--pre .beat-body em { color: var(--lime-dim); }

/* Film-Beat bekommt einen limefarbenen Balken links — passiert nach dem Spiel */
.beat--film .beat-body {
  padding-left: 1rem;
  border-left: 3px solid var(--lime);
}
.beat--film .mini-title { font-size: 1.05rem; }

.beat-body {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--white);
  max-width: 44em;
}
.sec--paper .beat-body { color: var(--ink); }
.beat-body .mini-title {
  display: inline-block;
  margin-right: .4em;
  font-family: var(--font-d);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: -.01em;
}
.beat-body b { font-weight: 700; }

.beat-body--log {
  font-family: var(--font-m);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--grey);
  padding: .8rem 1rem;
  background: rgba(255,255,255,.02);
  border-left: 2px solid var(--red);
}
.beat-body--log .mono { color: var(--red-hot); margin-right: .5em; }

.quote-scrap {
  font-family: var(--font-d);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--white);
  max-width: 24em;
  padding: 1rem 0 .6rem;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  margin: .4rem 0;
}
.quote-scrap em { color: var(--red-hot); font-style: italic; font-weight: 700; }
.quote-scrap cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--font-m);
  font-size: .72rem;
  letter-spacing: .12em;
  font-style: normal;
  text-transform: uppercase;
  color: var(--grey);
}
.quote-scrap--alt { border-color: var(--lime); }
.quote-scrap--alt em { color: var(--lime); }

/* Polaroid im Timeline-Beat */
.beat--polaroid .polaroid { display: inline-block; }
.beat--polaroid.beat--right { text-align: right; padding-right: 0; }
.beat--polaroid.beat--right .polaroid { text-align: left; }

.timeline-cta {
  margin-top: 3rem;
  text-align: center;
}


/* ────────────── POLAROID ────────────── */

.polaroid {
  display: inline-block;
  width: 260px;
  padding: 12px 12px 20px;
  background: var(--paper-white);
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 6px 8px 24px rgba(0,0,0,.35), 1px 1px 0 rgba(0,0,0,.06);
  color: var(--paper-ink);
  max-width: 320px;
  position: relative;
  transform: rotate(-1.5deg);
  transition: transform .25s ease;
}
.polaroid:hover { transform: rotate(-.2deg) translateY(-3px); }

.polaroid--l { transform: rotate(-2.5deg); }
.polaroid--r { transform: rotate(2deg); }
.polaroid--tilt-l { transform: rotate(-3.5deg); }
.polaroid--tilt-r { transform: rotate(3deg); }

.polaroid .frame {
  aspect-ratio: 1 / 1;
  background: #111;
  border: none;
}
.polaroid .frame--sq { aspect-ratio: 1 / 1; }

.polaroid-cap {
  display: block;
  margin-top: .7rem;
  padding: 0 4px;
  text-align: center;
  color: var(--paper-ink);
  font-size: 1.2rem;
  line-height: 1.1;
  transform: rotate(-1deg);
}

.polaroid::before {
  /* Klebeband oben */
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 80px; height: 18px;
  background: rgba(245, 225, 90, .82);
  box-shadow: 0 2px 5px rgba(0,0,0,.22);
}

.polaroid--deleted {
  transform: rotate(-2deg);
  filter: saturate(.7);
}
.polaroid--deleted::after {
  content: 'CUT';
  position: absolute;
  top: 20px; right: -18px;
  transform: rotate(12deg);
  background: var(--red);
  color: #fff;
  font-family: var(--font-m);
  font-size: .68rem;
  letter-spacing: .18em;
  padding: .35em .7em;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}


/* ────────────── STIMMEN-HEAD ────────────── */

.stimmen-head {
  max-width: 44em;
  margin-bottom: 3rem;
}
.stimmen-head h2 { margin-bottom: 1.3rem; }
.stimmen-head .lead { color: var(--grey); }
.stimmen-head--dark { }


/* ────────────── VOICE MEMOS ────────────── */

.voicememos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
/* zweite Reihe (Text-Karten) rutscht direkt unter die Voice-Karten */
.voicememos--text { margin-top: 1.4rem; }
.voicememo {
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
/* Auch im Light Mode BLEIBT die Sprachnotiz-Karte dunkel (dark anchor) */
:root[data-theme="light"] .voicememo { background: var(--paper); color: #f5f1e5; border-color: var(--paper-2); }

.vm-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.vm-icon,
.vm-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: .95rem;
  padding-left: 3px;
  border: none;
  cursor: pointer;
  flex: none;
  transition: transform .12s ease, background .12s ease;
  box-shadow: 0 3px 10px rgba(240,53,40,.3);
}
.vm-play:hover { background: var(--red-hot); transform: scale(1.06); }
.vm-play:active { transform: scale(.96); }
.vm-play .vm-play-icon {
  font-family: var(--font-m);
  font-size: .85rem;
  letter-spacing: 0;
  line-height: 1;
  padding-left: 2px;
}
.voicememo.is-playing .vm-play {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 3px 14px rgba(200,240,75,.4);
}
.voicememo.is-playing .vm-play .vm-play-icon { padding-left: 0; }

/* Kleines "TXT"-Badge für die Chat-Text-Karte */
.vm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: .35em .55em;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  border-radius: 3px;
  font-size: .68rem;
  letter-spacing: .12em;
}

/* Progress-Bar unter der Waveform */
.vm-progress {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: -.3rem;
}
.vm-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--red-hot), var(--lime));
  transition: width .12s linear;
}

/* Wave-Verhalten beim Abspielen: Animation lebhafter */
.voicememo.is-playing .vm-wave span { animation-duration: .9s; opacity: 1; }

/* Feedback wenn keine Audio-Datei vorhanden */
.voicememo.vm-no-audio { animation: nudge .4s ease; }
.voicememo.vm-no-audio::after {
  content: 'Audio noch nicht hinterlegt';
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(240,53,40,.15);
  color: var(--red-hot);
  font-family: var(--font-m);
  font-size: .65rem;
  letter-spacing: .1em;
  padding: .3em .6em;
  border-radius: 2px;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.voicememo { position: relative; }
.vm-head .mono { color: rgba(255,255,255,.75); }
:root[data-theme="light"] .vm-head .mono { color: rgba(245,241,229,.7); }
.vm-when {
  font-family: var(--font-m);
  font-size: .7rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
}

.vm-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 42px;
  padding: 0 .2rem;
}
.vm-wave span {
  flex: 1;
  background: var(--red);
  border-radius: 2px;
  animation: waveIdle 2.4s ease-in-out infinite;
  opacity: .8;
}
.vm-wave span:nth-child(3n)   { height: 40%; animation-delay: -.15s; }
.vm-wave span:nth-child(4n)   { height: 80%; animation-delay: -.3s; }
.vm-wave span:nth-child(5n)   { height: 55%; animation-delay: -.6s; }
.vm-wave span:nth-child(7n)   { height: 95%; animation-delay: -.9s; }
.vm-wave span:nth-child(8n+1) { height: 25%; animation-delay: -1.2s; }
.vm-wave span:nth-child(9n+2) { height: 65%; animation-delay: -1.5s; }
.vm-wave span:nth-child(11n+3){ height: 30%; animation-delay: -1.8s; }
.vm-wave span:not(:nth-child(3n)):not(:nth-child(4n)):not(:nth-child(5n)):not(:nth-child(7n)):not(:nth-child(8n+1)):not(:nth-child(9n+2)):not(:nth-child(11n+3)) { height: 45%; }

@keyframes waveIdle {
  0%, 100% { transform: scaleY(.7); opacity: .55; }
  50%      { transform: scaleY(1);  opacity: .95; }
}

.vm-quote {
  font-family: var(--font-d);
  font-weight: 500;
  font-stretch: 102%;
  font-size: 1.05rem;
  line-height: 1.45;
  letter-spacing: -.005em;
  text-transform: none;
  color: rgba(255,255,255,.95);
}
:root[data-theme="light"] .vm-quote { color: rgba(245,241,229,.95); }

.vm-quote--chat {
  background: rgba(0, 130, 90, .18);
  border: 1px solid rgba(0, 190, 130, .3);
  padding: .9rem 1rem;
  border-radius: 12px 12px 12px 4px;
  position: relative;
}

.vm-attr {
  font-family: var(--font-m);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
:root[data-theme="light"] .vm-attr { color: rgba(245,241,229,.55); }

/* Handschriftliche "ich konnte nicht sprechen" Karte */
.voicememo--note {
  background: var(--paper-white);
  color: var(--paper-ink);
  border: 1px solid rgba(0,0,0,.12);
  transform: rotate(-1deg);
  padding: 2rem 2rem 1.4rem;
}
.voicememo--note .hand { color: var(--paper-ink); line-height: 1.3; font-size: 1.4rem; }
.voicememo--note .vm-attr { color: rgba(0,0,0,.55); }


/* ────────────── FILM SCATTER LAYOUT ────────────── */

.film-scatter {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: 620px;
}

.film-scatter-main { position: relative; z-index: 1; }
.filmstrip--big { padding: 32px 0; }
.filmstrip--big .frame { aspect-ratio: 16 / 10; }

.film-scatter-side { position: relative; z-index: 2; }
.film-kicker-loose { color: var(--red-hot); display: block; margin-bottom: 1rem; }
.film-h { margin-bottom: 1.4rem; }
.film-lead { margin-bottom: 1.6rem; }
.film-points--v2 li { border-bottom: 1px dashed var(--line); }
.film-btn { margin-top: 1.4rem; }

/* Polaroids drum-herum absolut positioniert */
.film-polaroid {
  position: absolute;
  z-index: 3;
  width: 190px;
  pointer-events: auto;
}
.film-polaroid .polaroid { max-width: 100%; }
.film-polaroid--a { top: -20px; left: -30px; transform: rotate(-6deg); }
.film-polaroid--b { bottom: -30px; left: 18%; transform: rotate(4deg); }


/* ────────────── KARTEIKARTEN (Minispiele) ────────────── */

.cards-scatter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 1.4rem;
  padding: 1rem 0 2rem;
}
.card-index {
  background: var(--paper-white);
  color: var(--paper-ink);
  border: 1px solid rgba(0,0,0,.1);
  padding: 1.3rem 1.4rem 1.5rem;
  box-shadow: 4px 5px 0 rgba(0,0,0,.08), 0 8px 22px rgba(0,0,0,.22);
  position: relative;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform .2s ease, box-shadow .2s ease;
  /* linierte Karteikarte */
  background-image:
    linear-gradient(to bottom, transparent 0 60px, var(--paper-lined-line) 60px 61px, transparent 61px),
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--paper-lined-line) 27px 28px);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat;
}
.card-index:hover { transform: translate(-2px, -3px); box-shadow: 6px 8px 0 rgba(0,0,0,.1), 0 12px 28px rgba(0,0,0,.28); }
.card-tilt-a { transform: rotate(-1.1deg); }
.card-tilt-b { transform: rotate(.9deg); }
.card-tilt-c { transform: rotate(-.4deg); }
.card-tilt-a:hover { transform: rotate(-.3deg) translate(-2px, -3px); }
.card-tilt-b:hover { transform: rotate(.2deg) translate(-2px, -3px); }
.card-tilt-c:hover { transform: rotate(-.1deg) translate(-2px, -3px); }

.card-index-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dashed rgba(0,0,0,.2);
  padding-bottom: .5rem;
}
.card-index .card-index-head .mono { color: var(--red); }
.card-index-tab {
  font-family: var(--font-m);
  font-size: .68rem;
  letter-spacing: .1em;
  padding: .15em .5em;
  background: var(--paper-ink);
  color: #fff;
  border-radius: 2px;
}

.card-index-title {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--paper-ink);
  padding-top: .3rem;
}
.card-index p {
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(0,0,0,.68);
  margin-top: auto;
}

/* Eselsohr */
.card-index--dogear::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 26px; height: 26px;
  background: linear-gradient(-135deg, transparent 46%, rgba(0,0,0,.15) 47%, rgba(0,0,0,.15) 50%, #efe8d0 50%);
}

/* Redaktion / Schwärzung */
.card-index--secret { background: var(--paper-ink); color: #fff; }
.card-index--secret {
  background-image:
    linear-gradient(to bottom, transparent 0 60px, rgba(255,255,255,.08) 60px 61px, transparent 61px),
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(255,255,255,.06) 27px 28px);
}
.card-index--secret .card-index-title,
.card-index--secret p { color: #fff; }
.card-index--secret .card-index-head { border-bottom-color: rgba(255,255,255,.2); }
.card-index--secret .card-index-head .mono { color: var(--red-hot); }
.card-index--secret .card-index-tab { background: var(--red); }

.redact {
  background: #000;
  color: transparent;
  padding: .1em .3em;
  border-radius: 1px;
  user-select: none;
  position: relative;
}
.redact:hover { color: rgba(255,255,255,.45); }
.redact-line {
  display: inline-block;
  background: #000;
  color: transparent;
  padding: .05em .3em;
  user-select: none;
}


/* ────────────── POSTKARTEN ────────────── */

.postcards {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: verhindert dass ein langes, nicht-brechbares
     Wort wie „JUNGGESELLENABSCHIED" die Spalte breiter macht als die anderen */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}
/* Vier-Karten-Variante: bei ≥ 1100px 4 in einer Reihe, sonst 2 */
.postcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .postcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.postcard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  background: var(--paper-cream);
  color: var(--paper-ink);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 6px 8px 0 rgba(0,0,0,.1), 0 16px 32px rgba(0,0,0,.22);
  text-decoration: none;
  position: relative;
  min-height: 420px;
  overflow: visible;               /* Text darf nicht abgeschnitten werden */
  transition: transform .2s ease, box-shadow .2s ease;
}
.postcard:hover {
  transform: translate(-3px, -4px);
  box-shadow: 8px 12px 0 rgba(0,0,0,.1), 0 20px 40px rgba(0,0,0,.28);
}
.postcard--a { transform: rotate(-.8deg); }
.postcard--b { transform: rotate(.6deg); }
.postcard--c { transform: rotate(-.4deg); }
.postcard--d { transform: rotate(.9deg); }
.postcard--a:hover { transform: rotate(-.1deg) translate(-3px, -4px); }
.postcard--b:hover { transform: rotate(.1deg) translate(-3px, -4px); }
.postcard--c:hover { transform: rotate(-.1deg) translate(-3px, -4px); }
.postcard--d:hover { transform: rotate(.1deg) translate(-3px, -4px); }

.postcard-stamp {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  align-self: stretch;
}
.postcard-stamp .frame {
  aspect-ratio: 4 / 3;
  background: #eee;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.15);
}
.postcard-stamp::after {
  /* Poststempel-Kreis überlagert das Foto oben rechts */
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 62px; height: 62px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 50%;
  transform: rotate(-14deg);
  opacity: .5;
  z-index: 2;
  background:
    radial-gradient(circle, transparent 55%, rgba(255,255,255,.4) 55.5%, rgba(255,255,255,.4) 62%, transparent 62.5%);
  pointer-events: none;
}

.postcard-body {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.2rem 1.3rem 1.3rem;
}
.postcard-address {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-bottom: .7rem;
  border-bottom: 1px dashed rgba(0,0,0,.22);
  font-size: 1.05rem;
  color: rgba(0,0,0,.6);
  line-height: 1.25;
}
.postcard-address span:first-child { color: rgba(0,0,0,.75); }
.postcard-title {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--paper-ink);
  margin-top: .1rem;
  /* Lange deutsche Komposita dürfen umbrechen, sonst sprengt „Junggesellenabschied"
     die Kartenbreite und macht die Karte breiter als die Geschwister */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.postcard-body p {
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(0,0,0,.75);
  flex: 1;
  margin: 0;
}
.postcard-cta {
  font-family: var(--font-m);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  padding-top: .4rem;
  border-top: 1px dashed rgba(0,0,0,.15);
  display: inline-block;
}


/* ────────────── POST-IT (B2B) ────────────── */

.postit-wrap {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: 2.5rem;
  align-items: center;
}
.postit {
  background: linear-gradient(135deg, #f6ea6c 0%, #eddc4c 100%);
  color: var(--paper-ink);
  padding: 2.2rem 2rem 2rem;
  transform: rotate(-1.8deg);
  box-shadow: 8px 10px 24px rgba(0,0,0,.32), 2px 2px 0 rgba(0,0,0,.06);
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.postit::before {
  /* leichter "geklebt oben"-Effekt */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), transparent);
  pointer-events: none;
}
.postit::after {
  /* leichter Falz-Schatten unten rechts */
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 40px; height: 40px;
  background: linear-gradient(-45deg, rgba(0,0,0,.15) 0%, transparent 45%);
  pointer-events: none;
}
.postit-corner {
  position: absolute;
  top: 12px; right: 14px;
  color: rgba(0,0,0,.55);
  font-size: .68rem;
}
.postit-h {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--paper-ink);
}
.postit p { color: rgba(0,0,0,.75); max-width: 30em; }
.postit-btn { margin-top: auto; align-self: flex-start; box-shadow: 3px 3px 0 rgba(0,0,0,.5); }

.postit-scribble {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--red-hot);
  transform: rotate(-3deg);
  padding-left: 1rem;
  border-left: 3px solid var(--red);
  max-width: 22em;
}


/* ────────────── PREIS: KASSENBON ────────────── */

.container--narrow { max-width: 720px; }

.receipt {
  background: #fbf7ea;
  color: #1a1815;
  padding: 2.4rem clamp(1.6rem, 4vw, 3rem) 2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 3px 0 rgba(0,0,0,.05);
  position: relative;
  font-family: var(--font-m);
  transform: rotate(-.4deg);
}
/* gezackte Ober- und Unterkante */
.receipt::before,
.receipt::after {
  content: '';
  position: absolute;
  left: -1px; right: -1px;
  height: 14px;
  background:
    radial-gradient(circle at 7px 0, transparent 6px, #fbf7ea 6.5px) 0 0/14px 14px;
}
.receipt::before {
  top: -13px;
  transform: scaleY(-1);
}
.receipt::after {
  bottom: -13px;
}

.receipt-head { text-align: center; margin-bottom: 1.6rem; padding-bottom: 1rem; border-bottom: 1px dashed rgba(0,0,0,.35); }
.receipt-brand {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--paper-ink);
  text-transform: uppercase;
}
.receipt-sub { font-size: .72rem; margin-top: .3rem; color: rgba(0,0,0,.55); }
.receipt-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: .72rem;
  color: rgba(0,0,0,.6);
}

.receipt-lines { display: flex; flex-direction: column; gap: .55rem; padding: .3rem 0 1rem; }
.receipt-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .92rem;
  color: #1a1815;
}
.receipt-line span:first-child { text-transform: uppercase; letter-spacing: .05em; }
.receipt-line span:last-child { font-weight: 700; white-space: nowrap; }
.receipt-line .dots {
  flex: 1;
  height: 1em;
  border-bottom: 2px dotted rgba(0,0,0,.35);
  transform: translateY(-.35em);
}
.receipt-line--strike { color: rgba(0,0,0,.4); }
.receipt-line--strike span:first-child { text-decoration: line-through; }
.receipt-line--strike span:last-child { color: var(--lime-dim); font-weight: 700; }

.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.2rem 0 1rem;
  padding: 1rem 0;
  border-top: 3px double rgba(0,0,0,.6);
  border-bottom: 3px double rgba(0,0,0,.6);
}
.receipt-total span:first-child {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: 1.2rem;
  color: var(--paper-ink);
}
.receipt-amount {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 2.4rem;
  letter-spacing: -.015em;
  color: var(--red);
}

.receipt-fine {
  font-size: .7rem;
  color: rgba(0,0,0,.6);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.55;
  padding: .6rem 0 1.4rem;
}

.receipt-barcode {
  border-top: 1px dashed rgba(0,0,0,.3);
  padding-top: 1.2rem;
  text-align: center;
}
.receipt-barcode .bars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
  margin-bottom: .5rem;
}
.receipt-barcode .bars span {
  background: var(--paper-ink);
  width: 3px;
  height: 100%;
}
.receipt-barcode .bars span:nth-child(2n)   { width: 1px; }
.receipt-barcode .bars span:nth-child(3n)   { width: 5px; }
.receipt-barcode .bars span:nth-child(4n+1) { width: 2px; }
.receipt-barcode .bars span:nth-child(5n)   { width: 1px; }
.receipt-barcode .bars span:nth-child(7n)   { width: 6px; }
.receipt-barcode .bars span:nth-child(11n+1){ width: 2px; }
.receipt-code { font-size: .7rem; color: rgba(0,0,0,.75); letter-spacing: .2em; }

.receipt-cta { margin-top: 1.6rem; text-align: center; }


/* ────────────── PREIS: BON-DRUCKER ────────────── */

.printer {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Gehäuse */
.printer-machine {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: 22px;
  padding: 12px 12px 30px;
  background: linear-gradient(180deg, #26252a, #151417 85%);
  border: 1px solid #0a0a0b;
  box-shadow:
    0 26px 44px -22px rgba(0,0,0,.55),
    0 6px 14px -8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.65);
}
.printer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 12px;
}
.printer-brand {
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(251,250,247,.4);
}
.printer-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgba(240,53,40,.7);
  flex: none;
  transition: background .3s ease, box-shadow .3s ease;
}
.printer[data-stage="complete"] .printer-led {
  background: var(--lime);
  box-shadow: 0 0 8px rgba(200,240,75,.7);
}

/* Display */
.printer-screen {
  position: relative;
  border-radius: 12px;
  border: 1px solid #000;
  background: #0c0c0e;
  padding: 1rem 1.1rem .9rem;
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,.9),
    inset 0 0 34px rgba(0,0,0,.5);
}
.printer-screen-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .85rem;
  margin-bottom: .85rem;
  border-bottom: 1px dashed rgba(251,250,247,.16);
}
.printer-screen-item {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .92rem;
  color: #fbfaf7;
}
.printer-screen-sub {
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,250,247,.45);
}
.printer-screen-price {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 1.5rem;
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--red-hot);
  white-space: nowrap;
}
.printer-screen-price small {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(251,250,247,.5);
}

/* Statuszeile */
.printer-status {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 18px;
}
.printer-status-icon {
  position: relative;
  width: 15px; height: 15px;
  flex: none;
}
.printer-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(251,250,247,.2);
  border-top-color: #fbfaf7;
  animation: printer-spin .8s linear infinite;
}
@keyframes printer-spin { to { transform: rotate(360deg); } }
.printer-check {
  position: absolute;
  inset: 0;
  color: var(--lime);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s ease, transform .18s cubic-bezier(.23,1,.32,1);
}
.printer[data-stage="complete"] .printer-spinner { display: none; }
.printer[data-stage="complete"] .printer-check { opacity: 1; transform: scale(1); }
.printer-status-label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,250,247,.6);
}
.printer-label { display: none; }
.printer[data-stage="idle"] [data-stage-label="processing"],
.printer[data-stage="processing"] [data-stage-label="processing"],
.printer[data-stage="printing"] [data-stage-label="printing"],
.printer[data-stage="complete"] [data-stage-label="complete"] { display: inline; }
.printer[data-stage="complete"] .printer-status-label { color: rgba(251,250,247,.8); }

/* Ausgabeschlitz */
.printer-slot {
  position: absolute;
  left: 26px; right: 26px; bottom: 11px;
  height: 8px;
  border-radius: 4px;
  background: #050506;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.95),
    0 1px 0 rgba(255,255,255,.06);
}

/* Papierausgabe: Bon fährt hier raus */
.printer-output {
  position: relative;
  z-index: 1;
  width: calc(100% - 3.2rem);
  margin: -20px auto 0;
  padding: 20px 22px 56px;
  overflow: hidden;
}
.printer-slot-shadow {
  position: absolute;
  top: 16px; left: 22px; right: 22px;
  z-index: 2;
  height: 8px;
  background: rgba(0,0,0,.55);
  filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.printer[data-stage="printing"] .printer-slot-shadow,
.printer[data-stage="complete"] .printer-slot-shadow { opacity: 1; }

.printer-paper {
  position: relative;
  z-index: 1;
  transform: translateY(calc(-100% + 2px));
  opacity: 0;
  transition: opacity .16s ease;
  will-change: transform;
}
.printer[data-stage="printing"] .printer-paper {
  opacity: 1;
  animation: printer-feed 2.6s cubic-bezier(.32,.04,.18,1) forwards;
}
.printer[data-stage="complete"] .printer-paper {
  opacity: 1;
  transform: none;
}

/* Gleichmäßiger Papiervorschub: sanft anlaufender Motor, weiches Auslaufen */
@keyframes printer-feed {
  from { transform: translateY(calc(-100% + 2px)); }
  to   { transform: translateY(0%); }
}

/* ── Buchungsseite: Kassenkopf über der Zusammenfassung ── */
.sum-machine {
  border-radius: 16px;
  padding: 10px 10px 12px;
  margin: 1.3rem 1.3rem 0;
  background: linear-gradient(180deg, #26252a, #151417 85%);
  border: 1px solid #0a0a0b;
  box-shadow:
    0 14px 26px -18px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.65);
}
.sum-machine .printer-top { padding: 2px 6px 9px; }
.sum-screen {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: .6rem .8rem;
}
.sum-ticker {
  font-size: .68rem;
  line-height: 1.45;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251,250,247,.7);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease;
}
.sum-ticker.is-out { opacity: 0; transform: translateY(-6px); }

/* ── Buchungsseite: Beleg-Drucker in der Bestätigung ── */
.printer--done {
  max-width: 420px;
  margin: 2rem auto 2.4rem;
}
.printer--done .receipt-barcode { margin-bottom: 0; }
.book-done .code[hidden] { display: none; }

/* ── Gästeliste (Pre-Launch) ── */
.gl-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: .5rem;
}
.gl-points { list-style: none; display: grid; gap: 1.3rem; }
.gl-point {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-size: 1.05rem;
  line-height: 1.55;
}
.gl-point-nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--lime);
  color: var(--lime);
  border-radius: 50%;
  font-size: .7rem;
  transform: translateY(.35em);
}
.gl-card {
  border: 1px solid var(--line);
  background: var(--ink-2);
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.gl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-m);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.gl-open-label { color: var(--lime); font-size: .66rem; letter-spacing: .14em; }
.gl-card-body { padding: 1.3rem; display: grid; gap: 14px; }
.gl-card-body .btn { justify-content: center; margin-top: .3rem; }
.gl-note { padding: 0; }
.gl-done { padding: 2rem 1.3rem 2.2rem; text-align: center; }
.gl-done-stamp {
  display: inline-block;
  border: 2px dashed var(--lime);
  color: var(--lime);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .6em 1.1em;
  transform: rotate(-2deg);
  margin-bottom: 1.2rem;
}
.gl-done-text { color: var(--grey); font-size: .95rem; line-height: 1.65; }

:root[data-theme="light"] .gl-card { background: #fffbf1; border-color: var(--line); }
:root[data-theme="light"] .gl-card-head { border-bottom-color: var(--line-soft); color: var(--white); }
:root[data-theme="light"] .gl-point-nr { border-color: var(--lime-dim); color: var(--lime-dim); }
:root[data-theme="light"] .gl-done-stamp { border-color: var(--lime-dim); color: var(--lime-dim); }

@media (max-width: 1020px) {
  .gl-grid { grid-template-columns: 1fr; }
  .gl-card { position: static; max-width: 520px; }
}

/* ── Buchungsseite: Breite besser nutzen, je schmaler der Schirm ──
   Sobald die Zusammenfassung unter das Formular rutscht, ist sie
   eine Querleiste – Werte nebeneinander statt als lange Liste. */
@media (max-width: 1020px) {
  .book-summary-body {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1.1rem 1.4rem;
  }
  .sum-row { flex-direction: column; gap: .25rem; }
  .sum-row .v { text-align: left; }
  .sum-machine { max-width: 420px; }
}

@media (max-width: 760px) {
  .book-page { padding-top: calc(var(--nav-h) + 1.8rem); }

  .book-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 1.8rem 0 2rem; }
  .book-tab { padding: .85em .7em; font-size: .68rem; letter-spacing: .08em; line-height: 1.45; }
  #tab-voucher { grid-column: 1 / -1; }

  .book-step { margin-bottom: 2.1rem; }
  .book-step-label { gap: .7rem; font-size: .72rem; margin-bottom: .9rem; }
  .loc-pill { flex: 1 1 140px; min-width: 0; padding: .9em 1.1em; }

  /* Kalendertage dürfen breiter als hoch sein: größere Tapfläche */
  .cal-head { padding: .8rem .9rem; }
  .cal-days { padding: 5px; gap: 3px; }
  .cal-day { aspect-ratio: auto; min-height: 46px; font-size: .88rem; }
  .cal-legend { gap: .9rem; padding: .7rem .9rem; }

  /* Drei Zeitslots pro Reihe statt zwei */
  .slots-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .slot { padding: .8em .4em; }
  .slot .s-time { font-size: .94rem; }
  .slot .s-state { font-size: .55rem; letter-spacing: .08em; }

  .sum-machine { margin: 1rem 1rem 0; max-width: none; }
  .book-summary-head { padding: .9rem 1rem; }
  .book-summary-body { padding: 1.2rem 1rem; }
  .sum-total { padding: 1rem; }
  .book-summary .btn { margin: 0 1rem 1rem; width: calc(100% - 2rem); }
  .sum-note { padding: 0 1rem 1.1rem; line-height: 1.7; }

  /* Drucker: schmaleres Gehäuse, Papier nutzt fast die volle Breite */
  .printer-machine { border-radius: 16px; padding: 10px 10px 26px; }
  .printer-top { padding: 4px 4px 10px; }
  .printer-slot { left: 18px; right: 18px; }
  .printer-output { width: calc(100% - 1.4rem); padding: 20px 10px 46px; }
  .printer-screen { padding: .85rem .9rem .8rem; }
  .printer-screen-price { font-size: 1.25rem; }
  .receipt { padding: 2rem 1.15rem 1.6rem; }
  .receipt-brand { font-size: 1.2rem; }
  .receipt-meta { flex-wrap: wrap; gap: .3rem 1rem; font-size: .64rem; }
  .receipt-line { font-size: .84rem; }

  .book-done { padding: 1.8rem 1.2rem; }
  .printer--done { margin: 1.6rem auto 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sum-ticker { transition: none; }
}

/* Bon im Drucker: gerade, flache Oberkante (kommt aus dem Schlitz) */
.printer .receipt {
  transform: none;
  box-shadow: 0 18px 34px rgba(0,0,0,.25), 0 3px 0 rgba(0,0,0,.05);
}
.printer .receipt::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .printer-paper {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .printer-spinner { animation: none; }
}


/* ────────────── FAQ: NOTIZBUCHSEITE ────────────── */

/* Notizbuch mit exaktem 36px-Zeilenrhythmus. Fragen UND Antworten sitzen
   AUF den blauen Linien und RECHTS der roten Randlinie (bei 60px).
   Baseline-Mathe:
   - Blaue Linien alle 36px, background-position um 12px verschoben
     → erste blaue Linie bei y = 12 + 35 = 47px (von Notebook-Innenkante oben)
   - Notebook padding-top = 23px → erste Text-Zeilenbox beginnt bei y=23
   - Caveat 1.65rem in line-height 36 → Baseline ~ 25px in der Zeilenbox
   - Erste Text-Baseline landet bei 23 + 25 = 48 ≈ 47 = auf der Linie
   Randlinie:
   - Rote Vertikale bei 60px absolut vom border-left
   - Notebook padding-left = 4.5rem (72px) → Content startet rechts der Linie */
.notebook {
  background: #fbf6e0;
  color: var(--paper-ink);
  padding: 23px clamp(1.4rem, 3vw, 2.5rem) 12px 4.5rem;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  position: relative;
  transform: rotate(-.2deg);
  background-image:
    linear-gradient(to right, transparent 0 60px, rgba(200,60,60,.35) 60px 61px, transparent 61px),
    repeating-linear-gradient(to bottom, transparent 0 35px, var(--paper-lined-line) 35px 36px);
  background-position: 0 0, 0 12px;
}
.notebook::before {
  /* Lochung links */
  content: '';
  position: absolute;
  left: 22px; top: 0; bottom: 0;
  width: 12px;
  background:
    radial-gradient(circle at 6px 30px, rgba(0,0,0,.15) 5px, transparent 5.5px),
    radial-gradient(circle at 6px 130px, rgba(0,0,0,.15) 5px, transparent 5.5px),
    radial-gradient(circle at 6px 230px, rgba(0,0,0,.15) 5px, transparent 5.5px),
    radial-gradient(circle at 6px 330px, rgba(0,0,0,.15) 5px, transparent 5.5px),
    radial-gradient(circle at 6px 430px, rgba(0,0,0,.15) 5px, transparent 5.5px),
    radial-gradient(circle at 6px 530px, rgba(0,0,0,.15) 5px, transparent 5.5px),
    radial-gradient(circle at 6px 630px, rgba(0,0,0,.15) 5px, transparent 5.5px),
    radial-gradient(circle at 6px 730px, rgba(0,0,0,.15) 5px, transparent 5.5px);
}
.nb-item { padding: 0; }
/* keine Trennlinie zwischen Items — die Leerzeile nach jeder Frage/Antwort
   ist der Separator und bleibt auf dem 36-px-Grid. */

.nb-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;                  /* flex, damit align-items:baseline echt funktioniert */
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 36px .5rem;        /* left klein, weil Notebook-Padding schon rechts der roten Linie ist */
  line-height: 36px;
}
.nb-item[open] summary { padding-bottom: 0; }  /* keine Leerzeile wenn Antwort direkt folgt */
.nb-item summary::-webkit-details-marker { display: none; }

.nb-item summary .hand {
  color: var(--paper-ink);
  font-size: 1.65rem;             /* Caveat, ~26px */
  line-height: 36px;
  flex: 1;
  min-width: 0;
  /* Hanging indent: das "→" hängt links raus, weitere Zeilen bleiben
     bündig am ersten Wort (nach dem Pfeil). */
  padding-left: 1.25em;
  text-indent: -1.25em;
}

.nb-plus {
  font-family: var(--font-d);
  font-weight: 700;
  color: var(--red);
  font-size: 1.5rem;
  line-height: 36px;
  flex: none;
  transition: transform .2s ease;
}
.nb-item[open] .nb-plus { transform: rotate(45deg); transform-origin: center; }

.nb-answer {
  padding: 0 0 36px .5rem;        /* Antwort startet bündig unter der Frage, rechts der roten Linie */
  color: rgba(0,0,0,.75);
  font-size: 1rem;                /* 16px in 36px-Zeile */
  line-height: 36px;
  max-width: 44em;
}
.nb-answer a { color: var(--red); text-decoration: underline; }


/* ────────────── FAQ · Karteikarten (Aktenordner-Look) ────────────── */

.faq-cards {
  /* CSS columns = simple Masonry: geöffnete Karten sprengen keine Zeile,
     Reihenfolge bleibt oben-nach-unten pro Spalte lesbar. */
  column-count: 2;
  column-gap: 1.6rem;
  margin-top: 1rem;
}
@media (max-width: 860px) {
  .faq-cards { column-count: 1; }
}

.faq-card {
  break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;                    /* nötig für break-inside in manchen Browsern */
  width: 100%;
  margin: 0 0 1.6rem;
  padding: 1.15rem 1.3rem 1.25rem;
  background: var(--paper-cream);
  color: var(--paper-ink);
  border: 1px solid rgba(0,0,0,.14);
  border-top: 4px solid var(--red);         /* Aktenordner-Deckel */
  box-shadow: 4px 5px 0 rgba(0,0,0,.08), 0 14px 28px rgba(0,0,0,.18);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.faq-card--tilt-a { transform: rotate(-.6deg); }
.faq-card--tilt-b { transform: rotate(.5deg); }
.faq-card--tilt-c { transform: rotate(-.3deg); }
.faq-card:hover  { transform: rotate(0) translate(-2px, -3px);
                   box-shadow: 6px 8px 0 rgba(0,0,0,.08), 0 18px 34px rgba(0,0,0,.22); }

/* Reiter oben rechts wie an einer Karteikarte */
.faq-card::before {
  content: '';
  position: absolute;
  top: -4px; right: 22px;
  width: 46px; height: 12px;
  background: var(--red);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
/* Kleine Büroklammer oben links */
.faq-card::after {
  content: '';
  position: absolute;
  top: -10px; left: 22px;
  width: 26px; height: 40px;
  border: 2.5px solid rgba(0,0,0,.35);
  border-radius: 12px 12px 3px 3px;
  border-bottom: 0;
  background: transparent;
  transform: rotate(-8deg);
  pointer-events: none;
  opacity: .55;
}

/* Klick-Kopf: Meta, Frage, Toggle */
.faq-card-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  outline: none;
}
.faq-card-head::-webkit-details-marker { display: none; }
.faq-card-head:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }

.faq-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .3rem;
  border-bottom: 1px dashed rgba(0,0,0,.2);
  padding-bottom: .55rem;
  margin-bottom: .1rem;
}
.faq-card-nr {
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(0,0,0,.55);
}
.faq-card-tab {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--paper-ink);
  background: rgba(240,53,40,.12);
  border: 1px solid rgba(240,53,40,.3);
  padding: .08em .55em;
  letter-spacing: .05em;
}

.faq-card-q {
  font-family: var(--font-d);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--paper-ink);
  margin: .3rem 0 0;
  padding-right: 2rem;                       /* Platz für Toggle */
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Toggle unten rechts — vertikaler + horizontaler Strich, wird zu × wenn offen */
.faq-card-toggle {
  position: absolute;
  bottom: 1rem; right: 1.1rem;
  width: 24px; height: 24px;
  display: inline-block;
}
.faq-card-toggle::before,
.faq-card-toggle::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--paper-ink);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-card-toggle::before { width: 14px; height: 2px; }
.faq-card-toggle::after  { width: 2px; height: 14px; }
.faq-card[open] .faq-card-toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

/* Antwort */
.faq-card-body {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px dashed rgba(0,0,0,.18);
  position: relative;
}
.faq-card-body p {
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(0,0,0,.82);
  margin: 0;
  padding-right: 2.2rem;
}
.faq-card-body a { color: var(--red); text-decoration: underline; }
.faq-card-body b { font-weight: 700; color: var(--paper-ink); }
/* Roter „BEANTWORTET"-Stempel, wenn Karte offen ist */
.faq-card[open] .faq-card-body::before {
  content: 'BEANTWORTET';
  position: absolute;
  top: -18px; right: -6px;
  font-family: var(--font-m);
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--red);
  padding: .3em .55em;
  border: 1.5px solid var(--red);
  transform: rotate(4deg);
  opacity: .65;
  pointer-events: none;
}


/* ────────────── FOUNDERS ────────────── */

.founders {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.founders-copy .mono { color: var(--red-hot); display: block; margin-bottom: 1rem; }
.founders-copy h2 { margin-bottom: 1.4rem; }
.founders-copy p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--white);
  max-width: 40em;
}
.sec--paper .founders-copy p { color: var(--ink); }
.founders-mail {
  display: inline-block;
  margin-top: 1rem;
  color: var(--red);
  border-bottom: 2px solid var(--red);
  padding: .2em 0;
  text-decoration: none;
}
.founders-mail:hover { background: rgba(240,53,40,.08); }

.founders-photos {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  align-items: flex-start;
  padding: 2.2rem 1rem 1.4rem;  /* Platz für Klebeband oben, Cap unten */
}
.founders-photos .polaroid {
  width: 240px;
  max-width: 46%;
  flex-shrink: 0;
  align-self: flex-start;
}
/* Klebeband-Overlay nur auf dem linken Polaroid — asymmetrischer,
   verhindert Überlappungen im Layout */
.founders-photos .polaroid--tilt-r::before { display: none; }


/* ────────────── DOOR CTA ────────────── */

.cta-door { padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.door {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.door-plate {
  background: var(--ink);
  border: 3px solid var(--red);
  padding: 1.5rem 1rem 1.8rem;
  text-align: center;
  color: var(--white);
  box-shadow: 8px 8px 0 var(--red), 0 20px 40px rgba(0,0,0,.4);
  transform: rotate(-2deg);
  position: relative;
}
.door-plate::before,
.door-plate::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--ink);
}
.door-plate::before { top: 8px; left: 8px; }
.door-plate::after  { top: 8px; right: 8px; }
.door-plate-top {
  display: block;
  color: rgba(255,255,255,.5);
  font-size: .8rem;
  letter-spacing: .28em;
  margin-bottom: .5rem;
}
.door-num {
  display: block;
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: .85;
  color: var(--red-hot);
  letter-spacing: -.03em;
  text-shadow: 0 0 24px rgba(240,53,40,.45), 0 0 60px rgba(240,53,40,.2);
}
/* ── Scroll-Trigger-Animation: 08 → 😂 → 09 ──
   Drei Frames im Grid-Stack, wechseln sequenziell durch. */
.door-num--stack {
  display: inline-grid;
  grid-template-areas: "stage";
  position: relative;
}
.door-num--stack .dn-frame {
  grid-area: stage;
  opacity: 0;
  transform: scale(.7) rotate(-6deg);
  transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  will-change: opacity, transform;
}
/* Start: nur die 08 sichtbar */
.door-num--stack .dn-frame--n1 { opacity: 1; transform: none; }
.door-num--stack .dn-frame--emoji {
  filter: drop-shadow(0 0 24px rgba(240,53,40,.35));
  text-shadow: none;
}

/* Phase 1: 08 raus, Emoji rein + wackeln */
.door-num--stack.is-laughing .dn-frame--n1 {
  opacity: 0; transform: scale(.55) rotate(-14deg);
}
.door-num--stack.is-laughing .dn-frame--emoji {
  opacity: 1; transform: none;
  animation: doorLaughShake .55s ease-in-out .1s 2;
}

/* Phase 2: Emoji raus, 09 rein — mit „+1"-Badge */
.door-num--stack.is-counted .dn-frame--emoji {
  opacity: 0; transform: scale(1.15) rotate(10deg);
}
.door-num--stack.is-counted .dn-frame--n2 {
  opacity: 1; transform: none;
  animation: doorNumPop .45s cubic-bezier(.34,1.56,.64,1);
}
.door-num--stack.is-counted .dn-plus { opacity: 1; transform: translate(0, -6px); }

/* Kleines „+1" Badge steigt kurz hoch, dann weg */
.dn-plus {
  position: absolute;
  top: -.35em; right: -1.1em;
  font-family: var(--font-m);
  font-size: .28em;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--lime);
  text-shadow: 0 0 12px rgba(200,240,75,.55);
  opacity: 0;
  transform: translate(0, 6px);
  transition: opacity .4s ease, transform .8s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}

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

@keyframes doorLaughShake {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(-8deg); }
  50%     { transform: rotate(6deg); }
  75%     { transform: rotate(-4deg); }
}
@keyframes doorNumPop {
  0%   { transform: scale(.65) rotate(-8deg); }
  60%  { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .door-num--stack .dn-frame,
  .door-num--stack .dn-plus { transition: none; animation: none; }
}
.door-plate-bot {
  display: block;
  margin-top: .6rem;
  font-family: var(--font-m);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.door-copy .door-h { margin: 1rem 0 1.4rem; }
.door-lead { margin-bottom: 2rem; max-width: 34em; }


/* ────────────── LIGHT-MODE OVERRIDES für v2-Bausteine ────────────── */

:root[data-theme="light"] .stripe-log { background: var(--red); color: #fff; }
:root[data-theme="light"] .stripe-log-head .hand,
:root[data-theme="light"] .stripe-log-list .hand { color: rgba(255,255,255,.98); }

/* ACHTUNG: var(--ink) ist im Light Mode CREME — für Textfarben auf hellen
   Flächen immer var(--white) (= dunkle Tinte) verwenden. */
:root[data-theme="light"] .beat-body { color: var(--white); }
:root[data-theme="light"] .beat-body .mini-title { color: var(--white); }
:root[data-theme="light"] .beat-body--log {
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.7);
  border-left-color: var(--red);
}
:root[data-theme="light"] .quote-scrap { color: var(--white); border-color: var(--red); }
:root[data-theme="light"] .quote-scrap cite { color: var(--grey); }
:root[data-theme="light"] .quote-scrap em { color: var(--red); }
:root[data-theme="light"] .quote-scrap--alt { border-color: var(--lime-dim); }
:root[data-theme="light"] .quote-scrap--alt em { color: var(--lime-dim); }

/* Timeline-Farbcode: Rot kräftiger, Lime → grasgrün auf Creme */
:root[data-theme="light"] .beat-time { color: var(--red); }
:root[data-theme="light"] .beat--pre .beat-time,
:root[data-theme="light"] .beat--film .beat-time { color: var(--lime-dim); }
:root[data-theme="light"] .beat--pre .beat-body {
  background: rgba(143, 174, 50, .09);
  border-color: rgba(143, 174, 50, .35);
  border-left-color: var(--lime-dim);
}
:root[data-theme="light"] .beat--pre .beat-body em { color: var(--lime-dim); }
:root[data-theme="light"] .beat--film .beat-body { border-left-color: var(--lime-dim); }

/* Kleine rote Mono-Akzente: red-hot ist auf Creme zu blass → Voll-Rot */
:root[data-theme="light"] .kicker,
:root[data-theme="light"] .timeline-head .mono,
:root[data-theme="light"] .film-kicker-loose,
:root[data-theme="light"] .founders-copy .mono,
:root[data-theme="light"] .film-points .mono,
:root[data-theme="light"] .f-errmsg,
:root[data-theme="light"] .beat-body--log .mono,
:root[data-theme="light"] .postit-scribble { color: var(--red); }
html[data-theme="light"] .mark-red { color: var(--red); }
/* … aber im dunklen Scoreboard bleibt das leuchtende Rot/Lime */
:root[data-theme="light"] .scoreboard .kicker { color: var(--red-hot); }
:root[data-theme="light"] .scoreboard .mark-lime { color: var(--lime); }
:root[data-theme="light"] .scoreboard .outline { -webkit-text-stroke-color: #f5f1e5; }

:root[data-theme="light"] .film-h { color: var(--white); }
:root[data-theme="light"] .film-lead { color: var(--grey); }
:root[data-theme="light"] .film-points--v2 li { color: var(--white); border-color: var(--line); }

:root[data-theme="light"] .letter-body .letter-p { color: var(--white); }
:root[data-theme="light"] .founders-copy p { color: var(--white); }

/* Handschrift-Notizkarte bleibt PAPIER (nicht dark anchor wie Voice-Karten) */
:root[data-theme="light"] .voicememo--note {
  background: var(--paper-white);
  color: var(--paper-ink);
  border-color: rgba(0,0,0,.12);
}
:root[data-theme="light"] .voicememo--note .vm-attr { color: rgba(0,0,0,.55); }
:root[data-theme="light"] .door-plate { background: var(--paper); border-color: var(--red); }
:root[data-theme="light"] .door-plate-top { color: rgba(245,241,229,.55); }
:root[data-theme="light"] .door-plate-bot { color: rgba(245,241,229,.75); }
:root[data-theme="light"] .door-h { color: var(--white); }
:root[data-theme="light"] .door-lead { color: var(--grey); }

/* Handschrift-Farbe in dark Zonen */
:root[data-theme="light"] .hand-anchor .hand--above { color: var(--red); }


/* ────────────── RESPONSIVE ────────────── */

@media (max-width: 980px) {
  .letter { grid-template-columns: 1fr; }
  .room-sketch { margin-top: 2rem; position: static; align-self: start; }
  .film-scatter { grid-template-columns: 1fr; min-height: 0; }
  .film-polaroid--a { top: -14px; left: -10px; width: 140px; }
  .film-polaroid--b { bottom: -20px; left: auto; right: -6px; width: 140px; }
  .voicememos { grid-template-columns: 1fr; }
  .postcards, .cards-scatter { grid-template-columns: repeat(2, 1fr); }
  .postit-wrap { grid-template-columns: 1fr; }
  .founders { grid-template-columns: 1fr; }
  .door { grid-template-columns: 1fr; text-align: center; }
  .door-plate { justify-self: center; }
}

@media (max-width: 640px) {
  .postcards, .postcards--4, .cards-scatter { grid-template-columns: 1fr; }
  .timeline { padding-left: 70px; }
  .timeline::before { left: 42px; }
  .beat-time { left: -70px; width: 60px; }
  .beat-time::after { right: -26px; }
  .hero-strip { gap: .45rem .3rem; }
  .tape { font-size: .68rem; padding: .3em .7em; }
  .film-polaroid { width: 110px; }
  .film-polaroid--a { top: -10px; left: 0; }
  .film-polaroid--b { bottom: -12px; right: 0; }
  .founders-photos { flex-direction: column; }
  .founders-photos .polaroid { width: 260px; max-width: 80%; }
  .receipt-total span:first-child { font-size: 1rem; }
  .receipt-amount { font-size: 2rem; }
  .stripe-log-list { grid-template-columns: 1fr; }
  .stripe-log-list li { grid-template-columns: 66px 1fr; gap: .7rem; }
  .nb-item summary .hand { font-size: 1.25rem; }
}


/* ═════════════════════════════════════════════════════════════════
   SCOREBOARD — Live-Board, Bestenliste, 0-Lacher-Wall
   Look: Broadcast-Control-Panel. Dunkler Anker auch im Light Mode.
   ═════════════════════════════════════════════════════════════════ */

.scoreboard {
  background: #0a0a0d;
  color: var(--white);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Im Light Mode bleibt das Scoreboard bewusst dark (dark anchor) */
:root[data-theme="light"] .scoreboard { background: #0a0a0d; color: #f5f1e5; }

/* Scanline-Overlay für Live-Look */
.scoreboard::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 3px,
      rgba(255,255,255,.015) 3px 4px);
  pointer-events: none;
  z-index: 0;
}
.scoreboard > * { position: relative; z-index: 1; }

.scoreboard-head { max-width: 44em; margin-bottom: 3rem; }
.scoreboard-head h2 { margin: 1rem 0 1.2rem; color: #f5f1e5; }
.scoreboard-head .lead { color: rgba(245,241,229,.65); }
:root[data-theme="light"] .scoreboard-head h2 { color: #f5f1e5; }
:root[data-theme="light"] .scoreboard-head .lead { color: rgba(245,241,229,.65); }

.sb-live {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .35em .8em;
  border: 1px solid rgba(240, 53, 40, .5);
  border-radius: 2px;
  background: rgba(240, 53, 40, .1);
}
.sb-live .mono { color: var(--red-hot); font-size: .72rem; letter-spacing: .12em; }

/* ── BLOCK A · COUNTER ──────────────────────────── */
.sb-counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 3.5rem;
}
.sb-counter {
  background: #101014;
  padding: 2rem 1.8rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
  overflow: hidden;
}
.sb-counter::before {
  /* dünner roter Balken oben */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--red-hot) 20%, var(--red-hot) 80%, transparent);
  opacity: .5;
}
.sb-counter--accent { background: #131318; }
.sb-counter--accent::before { opacity: 1; }

.sb-c-value {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(3rem, 6vw, 4.8rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: #f5f1e5;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px rgba(240, 53, 40, .18);
}
.sb-counter--accent .sb-c-value { color: var(--lime); text-shadow: 0 0 40px rgba(200, 240, 75, .28); }

.sb-c-label {
  font-family: var(--font-d);
  font-weight: 700;
  font-stretch: 108%;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: #f5f1e5;
  margin-top: .3rem;
}
.sb-c-sub { color: rgba(245,241,229,.5); font-size: .7rem; }

/* ── BLOCK B · HIGHSCORE ──────────────────────────── */
.sb-highscore {
  border: 1px solid rgba(255,255,255,.1);
  background: #0d0d11;
  margin-bottom: 3rem;
}
/* Header und Rows nutzen dasselbe Grid, damit Kategorie / Halter:in / Wert
   sauber übereinanderstehen. */
.sb-hs-head,
.sb-hs-row {
  display: grid;
  grid-template-columns: 48px minmax(180px, 1.3fr) minmax(160px, 1.5fr) minmax(120px, auto);
  gap: 1.4rem;
  align-items: center;
}
.sb-hs-head {
  padding: .8rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
}
.sb-hs-head .mono {
  color: rgba(245,241,229,.45);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sb-hs-h-value { text-align: right; }

.sb-hs-list { list-style: none; padding: 0; margin: 0; }
.sb-hs-row {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  transition: background .15s ease;
}
.sb-hs-row:last-child { border-bottom: none; }
.sb-hs-row:hover { background: rgba(255,255,255,.02); }

.sb-hs-rank {
  color: rgba(245,241,229,.35);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sb-hs-cat { display: flex; flex-direction: column; gap: .15rem; }
.sb-hs-cat-title {
  font-family: var(--font-d);
  font-weight: 700;
  font-stretch: 108%;
  text-transform: uppercase;
  font-size: 1.02rem;
  color: #f5f1e5;
  letter-spacing: -.005em;
}
.sb-hs-cat-sub { color: rgba(245,241,229,.4); font-size: .68rem; }

.sb-hs-holder { display: flex; flex-direction: column; gap: .15rem; }
.sb-hs-name {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 1rem;
  color: rgba(245,241,229,.9);
}
.sb-hs-session { color: rgba(245,241,229,.4); font-size: .7rem; }

.sb-hs-value {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--red-hot);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 4em;
  text-shadow: 0 0 20px rgba(240, 53, 40, .3);
}
.sb-hs-value--time { font-size: 1.8rem; }

.sb-hs-row--weekly .sb-hs-value { color: var(--lime); text-shadow: 0 0 20px rgba(200, 240, 75, .35); }
.sb-hs-row--weekly .sb-hs-cat-sub { color: var(--lime); opacity: .7; }

.sb-hs-row--hard .sb-hs-value {
  color: #f5f1e5;
  -webkit-text-stroke: 2px var(--red);
  color: transparent;
  text-shadow: none;
}

/* ── EXTRA · Ø-Zeit ──────────────────────────────── */
.sb-avg {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 1.8rem;
  background: linear-gradient(90deg, rgba(240,53,40,.08) 0%, transparent 80%);
  border: 1px solid rgba(240,53,40,.25);
  border-left: 4px solid var(--red);
  margin-bottom: 3.5rem;
}
.sb-avg-kicker {
  color: var(--red-hot);
  font-size: .7rem;
  display: block;
  margin-bottom: .6rem;
}
.sb-avg-title {
  font-family: var(--font-d);
  font-weight: 700;
  font-stretch: 108%;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.1;
  color: #f5f1e5;
  letter-spacing: -.005em;
}
.sb-avg-time-wrap { text-align: right; }
.sb-avg-time {
  display: block;
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: .9;
  color: var(--red-hot);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px rgba(240, 53, 40, .35);
}
.sb-avg-time-unit { color: rgba(245,241,229,.45); font-size: .7rem; margin-top: .3rem; display: inline-block; }

/* ── BLOCK C · WALL OF FAME ──────────────────────── */
.sb-wall {
  padding: 2rem 2rem 2.2rem;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(200,240,75,.06), transparent 60%),
    #0d0d11;
}
.sb-wall-head { margin-bottom: 1.8rem; }
.sb-wall-kicker {
  color: var(--lime);
  font-size: .72rem;
  display: block;
  margin-bottom: .8rem;
}
.sb-wall-h {
  font-family: var(--font-d);
  font-weight: 800;
  font-stretch: 110%;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -.005em;
  color: #f5f1e5;
  max-width: 46em;
}
.sb-wall-h .mark-lime {
  font-family: var(--font-d);
  font-size: 1.4em;
  font-weight: 900;
  padding: 0 .1em;
  color: var(--lime);
}
.sb-wall-h .mark-red { color: var(--red-hot); }

.sb-wall-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .6rem 1.4rem;
  padding: 0;
  margin: 0;
}
.sb-wall-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: .8rem;
  align-items: baseline;
  padding: .6rem .2rem;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.sb-wall-mark { color: var(--lime); font-size: .8rem; line-height: 1; text-shadow: 0 0 10px rgba(200,240,75,.6); }
.sb-wall-name {
  font-family: var(--font-b);
  font-weight: 700;
  color: #f5f1e5;
  font-size: 1rem;
  letter-spacing: 0;
}
.sb-wall-session { color: rgba(245,241,229,.4); font-size: .7rem; }
.sb-wall-item--placeholder { color: rgba(245,241,229,.35); }

.sb-wall-note {
  margin-top: 1.6rem;
  color: rgba(245,241,229,.4);
  font-size: .7rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255,255,255,.08);
}


/* ── SCOREBOARD RESPONSIVE ────────────────────── */
@media (max-width: 980px) {
  .sb-counters { grid-template-columns: 1fr; }
  .sb-hs-row {
    grid-template-columns: 40px 1fr auto;
    grid-template-areas:
      "rank cat   value"
      "rank holder value";
    gap: .3rem 1rem;
  }
  .sb-hs-rank    { grid-area: rank; align-self: center; }
  .sb-hs-cat     { grid-area: cat; }
  .sb-hs-holder  { grid-area: holder; }
  .sb-hs-value   { grid-area: value; align-self: center; font-size: 1.8rem; }
  .sb-avg { grid-template-columns: 1fr; text-align: left; gap: 1rem; }
  .sb-avg-time-wrap { text-align: left; }
}
@media (max-width: 540px) {
  .sb-wall-list { grid-template-columns: 1fr; }
  .sb-hs-value { font-size: 1.6rem; }
  .sb-hs-value--time { font-size: 1.4rem; }
}


/* ── SPIELER-PORTAL (gruppe.html) ────────────── */

.portal-dim { color: var(--grey); }
.portal-lead { margin: 1.2rem 0 1.8rem; max-width: 620px; }

.portal-bookinfo {
  font-family: var(--font-m);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 1rem;
}

.portal-explain { margin: 1.6rem 0 2.4rem; max-width: 760px; }
.portal-gate-grid { margin-top: .5rem; }

.portal-consent {
  grid-column: 1 / -1;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--grey);
  cursor: pointer;
}
.portal-consent input { margin-top: .25em; accent-color: var(--lime); flex: none; }
.portal-consent a { color: inherit; text-decoration: underline; }

.portal-submit { margin-top: 1.2rem; }

.portal-error {
  font-family: var(--font-m);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--red-hot);
  margin-top: .9rem;
}
.portal-ok {
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--lime);
}

.portal-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.portal-pill {
  font-family: var(--font-m);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5em 1em;
  background: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
}
.portal-pill:hover { border-color: currentColor; }
.portal-pill.active { border-color: var(--lime); color: var(--lime); }

.portal-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

.portal-drop {
  border: 1px dashed var(--line);
  border-radius: 2px;
  padding: 2.4rem 1.5rem;
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
}
.portal-drop.over { border-color: var(--lime); background: rgba(200, 240, 75, .05); }
.portal-drop .btn { margin-top: .6rem; }
.portal-allowed { margin-top: .7rem; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }

.portal-closed {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  padding: 1rem 1.2rem;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--grey);
}

.portal-progress { display: grid; gap: .35rem; margin-top: 1rem; font-size: .72rem; }

.portal-quota { display: grid; gap: .5rem; font-size: .78rem; }
.portal-quota-bar {
  height: 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.portal-quota-fill {
  height: 100%;
  width: 0;
  background: var(--lime);
  transition: width .25s ease;
}
.portal-quota-fill.full { background: var(--red); }

.portal-files { display: grid; }
.portal-file {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: .8rem .2rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: .86rem;
}
.portal-file-num { color: var(--red-hot); font-size: .66rem; letter-spacing: .1em; }
.portal-file-name { overflow-wrap: anywhere; }
.portal-file-size { color: var(--grey); font-size: .7rem; }
.portal-file-act {
  font-family: var(--font-m);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.portal-file-del { color: var(--red-hot); }

.portal-reset-grid { max-width: 420px; }

@media (max-width: 980px) {
  .portal-file { grid-template-columns: auto 1fr auto; }
  .portal-file-size { display: none; }
}

@media (max-width: 380px) {
  .nav-logo { font-size: .76rem; }
  .nav-right { gap: .4rem; }
}