/* KBK Beerpong — Stylesheet v2 (Cockpit-Look)
   Farben, Schriften und Effekte folgen dem echten KBK-Code
   (kaboomkartell/src/app/globals.css + layout.tsx): Neon-Rasta, Bungee /
   Space Grotesk / JetBrains Mono, Scanlines, Film-Grain, Radial-Glow,
   Obsidian-Knöpfe mit atmendem Neon-Rahmen, roter Marquee.
   Alle Maße stehen hier, nicht im JavaScript (Haus-Regel 17 §6).
   Tippziele: 44 px am Schreibtisch, 48 px unter 768 px. */

:root {
  --gruen: #3FCF4A;
  --gruen-hell: #5EDD68;
  --gruen-dunkel: #2DB036;
  --gelb: #F5D02E;
  --gelb-dunkel: #D4B020;
  --rot: #E63B2E;
  --rot-hell: #F25A4E;
  --blau: #4A9EDE;
  --lila: #C77DFF;

  --schwarz: #0A0B0C;
  --dunkel-900: #121315;
  --dunkel-800: #1A1C1E;
  --dunkel-700: #242628;
  --dunkel-600: #33363A;
  --grau-500: #666666;
  --grau-400: #999999;
  --grau-300: #B3B3B3;
  --hell-200: #E0E0E0;
  --hell-100: #F0F0F0;

  --bg: var(--schwarz);
  --flaeche: var(--dunkel-900);
  --erhoben: var(--dunkel-800);
  --rand: var(--dunkel-700);
  --text: var(--hell-100);
  --text-2: var(--grau-300);
  --text-3: var(--grau-500);

  --schrift-display: 'Bungee', 'Archivo Black', Impact, sans-serif;
  --schrift-text: 'Space Grotesk', system-ui, sans-serif;
  --schrift-mono: 'JetBrains Mono', ui-monospace, monospace;

  --tipp: 44px;
  --tipp-gross: 64px;
  --symbol: 24px;
  --radius: 6px;
  --abstand: 12px;
  --kopf-hoehe: 56px;
  --inhalt-breite: 720px;
  --neon-r: 63; --neon-g: 207; --neon-b: 74;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
html { overflow-x: hidden; }
body {
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0));
}
button { font: inherit; color: inherit; }
a { color: var(--gruen); }
[hidden] { display: none !important; } /* Sichtbarkeit per el.hidden; ohne !important gewinnt jede display-Regel unten. */
img.sym { image-rendering: pixelated; }

/* --- Cockpit-Effekte (layout.tsx 161–200 im KBK-Code) ----------------- */
.fx { position: fixed; inset: 0; pointer-events: none; }
.fx-glow { z-index: 0; background: radial-gradient(600px circle at 20% 20%, rgba(63,207,74,0.10), transparent 60%), radial-gradient(500px circle at 80% 70%, rgba(230,59,46,0.08), transparent 60%); }
.fx-scan { z-index: 1; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px); }
.fx-grain { z-index: 2; opacity: 0.08; mix-blend-mode: overlay; background-repeat: repeat; background-size: 200px 200px; }
.buehne { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .fx-grain { display: none; }
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; } /* Bewegung ausschalten ist der Sinn der Einstellung; ohne !important bliebe jede Animation unten stehen. */
}

/* --- Kopf ------------------------------------------------------------ */
.kopf {
  position: sticky; top: 0; z-index: 20;
  height: var(--kopf-hoehe);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 var(--abstand);
  background: rgba(10, 11, 12, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rand);
}
.wortmarke {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tipp); min-width: var(--tipp); text-decoration: none;
  font-family: var(--schrift-display); font-size: 18px; letter-spacing: 0.04em;
}
.wortmarke-kbk { color: var(--gruen); }
.wortmarke-titel { color: var(--hell-100); }
.nav { display: flex; gap: 2px; align-items: center; }
.uhr { font-family: var(--schrift-mono); font-size: 13px; color: var(--text-2); letter-spacing: 0.08em; padding: 0 6px; }
.nav-zaehler {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--rot); color: #fff; font-family: var(--schrift-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.nav .knopf { position: relative; }
.nav .knopf-aktiv { box-shadow: inset 0 -2px 0 var(--gruen); border-color: transparent; }

/* --- Section-Title (SectionTitle.tsx) --------------------------------- */
.abschnitt { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 8px; }
.abschnitt-sub { font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.2em; font-weight: 700; white-space: nowrap; color: var(--gruen); }
.abschnitt-gelb .abschnitt-sub { color: var(--gelb); }
.abschnitt-rot .abschnitt-sub { color: var(--rot); }
.abschnitt-linie { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(63,207,74,0.25), transparent); }
.abschnitt-gelb .abschnitt-linie { background: linear-gradient(90deg, rgba(245,208,46,0.25), transparent); }
.abschnitt-rot .abschnitt-linie { background: linear-gradient(90deg, rgba(230,59,46,0.25), transparent); }
.abschnitt-titel { font-family: var(--schrift-display); font-size: 20px; margin: 0; color: #fff; text-transform: uppercase; letter-spacing: -0.01em; font-weight: 400; }
.abschnitt-rechts { font-family: var(--schrift-mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }

/* --- Knöpfe (Symbol vor Text, Regel 17 §4) --------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--tipp); min-height: var(--tipp);
  padding: 0 12px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--erhoben); color: var(--text);
  cursor: pointer; user-select: none;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.knopf:hover { border-color: var(--grau-500); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: 0.4; cursor: not-allowed; }
.knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.knopf-symbol { padding: 0; width: var(--tipp); }
.knopf-gruen { background: var(--gruen); border-color: var(--gruen-dunkel); color: var(--schwarz); }
.knopf-gruen:hover { background: var(--gruen-hell); }
.knopf-rot { background: transparent; border-color: var(--rot); }
.knopf-gelb { background: var(--gelb); border-color: var(--gelb-dunkel); color: var(--schwarz); }
.knopf-geist { background: transparent; border-color: transparent; }
.knopf-gross { min-height: var(--tipp-gross); min-width: var(--tipp-gross); font-size: 18px; }
.knopf-aktiv { border-color: var(--gruen); box-shadow: inset 0 0 0 1px var(--gruen); }
.knopf .sym { width: var(--symbol); height: var(--symbol); }
.knopf-gross .sym { width: 32px; height: 32px; }

/* Obsidian mit atmendem Neon-Rahmen (globals.css 1071–1207 im KBK-Code; Grain-Ebene ohne SVG) */
.obsidian {
  position: relative; isolation: isolate;
  border: 1px solid rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.5); border-radius: 8px; color: #fff;
  background:
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(220,230,245,0.075) 0%, transparent 50%),
    radial-gradient(ellipse 50% 70% at 20% 80%, rgba(63,207,74,0.05) 0%, transparent 60%),
    linear-gradient(118deg, transparent 28%, rgba(255,255,255,0.038) 28.3%, transparent 28.6%),
    linear-gradient(142deg, transparent 64%, rgba(255,255,255,0.048) 64.2%, transparent 64.5%),
    radial-gradient(ellipse 120% 80% at 25% 15%, var(--dunkel-600) 0%, var(--dunkel-700) 25%, var(--dunkel-800) 60%, var(--dunkel-900) 100%);
  box-shadow:
    inset 0 1px 0 rgba(240,245,255,0.18), inset -1px 0 0 rgba(0,0,0,0.5), inset 0 -1px 0 rgba(0,0,0,0.7),
    inset 0 0 14px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.08),
    0 0 0 1px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.18),
    0 0 14px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.28),
    0 0 36px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.14),
    0 4px 12px rgba(0,0,0,0.55);
}
.obsidian::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow:
    inset 0 0 22px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.14),
    0 0 0 1px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.45),
    0 0 26px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.46),
    0 0 64px rgba(var(--neon-r), var(--neon-g), var(--neon-b), 0.24);
  animation: neon-atmen 2.6s ease-in-out infinite;
}
.obsidian > * { position: relative; z-index: 3; }
.obsidian-rot { --neon-r: 230; --neon-g: 59; --neon-b: 46; }
.obsidian-gelb { --neon-r: 245; --neon-g: 208; --neon-b: 46; }
@keyframes neon-atmen { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.fab-stapel { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0)); z-index: 15; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fab { width: 64px; height: 64px; border-radius: 50%; }
.fab-klein { width: 48px; height: 48px; }

/* --- Layout ------------------------------------------------------------ */
.ansicht { max-width: var(--inhalt-breite); margin: 0 auto; padding: var(--abstand); }
.titel { font-family: var(--schrift-display); font-size: 22px; letter-spacing: 0.03em; margin: 8px 0 12px; color: var(--hell-100); font-weight: 400; }
.titel-klein { font-size: 13px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.12em; margin: 20px 0 8px; font-weight: 700; }
.zeile { display: flex; align-items: center; gap: var(--abstand); }
.zeile-zwischen { justify-content: space-between; }
.zeile-mitte { justify-content: center; }
.zeile-umbruch { flex-wrap: wrap; }
.zeile-ende { justify-content: flex-end; }
.zeile-abstand { margin-bottom: 12px; }
.zeile-eng { gap: 6px; }
.wachsen { flex: 1 1 auto; min-width: 0; }
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: var(--abstand); margin-bottom: var(--abstand);
}
.karte-klick { cursor: pointer; }
.karte-klick:hover { border-color: var(--grau-500); }
.karte-liste { padding: 0 4px; }
.karte-live { border-color: var(--gruen); box-shadow: 0 0 0 1px rgba(63, 207, 74, 0.3); }
.karte-warn { background: rgba(245, 208, 46, 0.10); border-color: rgba(245, 208, 46, 0.5); }
.mono { font-family: var(--schrift-mono); }
.leise { color: var(--text-2); }
.sehr-leise { color: var(--text-3); }
.klein { font-size: 13px; }
.mittig { text-align: center; }
.leer { color: var(--text-3); text-align: center; padding: 24px 0; }
.leer .sym { width: 40px; height: 40px; display: block; margin: 0 auto 8px; }
.warteglas { display: block; width: 42px; height: 54px; margin: 0 auto 8px; image-rendering: pixelated; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--dunkel-700); color: var(--text-2);
}
.chip-gruen { background: rgba(63, 207, 74, 0.18); color: var(--gruen); }
.chip-gelb { background: rgba(245, 208, 46, 0.18); color: var(--gelb); }
.chip-rot { background: rgba(230, 59, 46, 0.18); color: var(--rot-hell); }
.chip-blau { background: rgba(74, 158, 222, 0.18); color: var(--blau); }
.chip-lila { background: rgba(199, 125, 255, 0.18); color: var(--lila); }
.chip-grau { background: var(--dunkel-700); color: var(--text-3); }
.chip .sym { width: 14px; height: 14px; }
.punkt-live {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gruen); box-shadow: 0 0 8px var(--gruen);
  animation: pulsieren 1.2s ease-in-out infinite;
}
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.offen { color: var(--text-3); font-family: var(--schrift-mono); font-size: 12px; }

/* --- Avatare ----------------------------------------------------------- */
.avatar { width: 40px; height: 40px; border-radius: var(--radius); image-rendering: pixelated; background: var(--dunkel-700); flex: 0 0 auto; }
.avatar-klein { width: 28px; height: 28px; }
.avatar-mini { width: 22px; height: 22px; }
.avatar-gross { width: 96px; height: 96px; border-radius: 10px; }
.avatar-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.avatar-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 96px; padding: 10px 4px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  cursor: pointer; text-align: center;
}
.avatar-kachel:hover { border-color: var(--grau-500); }
.avatar-kachel .avatar { width: 48px; height: 48px; }
.avatar-kachel-name { font-size: 13px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-neu { display: flex; align-items: center; justify-content: center; }
.avatar-kachel-neu { border-style: dashed; border-color: var(--gruen-dunkel); }

/* --- Anmeldung / PIN ---------------------------------------------------- */
.anmelde-kopf { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0 16px; }
.eingabe {
  width: 100%; min-height: var(--tipp); padding: 0 12px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--rand); border-radius: var(--radius);
  color: var(--text); font: inherit; font-size: 16px;
}
.eingabe:focus { outline: none; border-color: rgba(63, 207, 74, 0.6); box-shadow: 0 0 0 2px rgba(63, 207, 74, 0.15); background: rgba(0, 0, 0, 0.55); }
.pin-punkte { display: flex; justify-content: center; gap: 14px; margin: 12px 0; min-height: 20px; }
.pin-punkt { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--grau-500); }
.pin-punkt-voll { background: var(--gruen); border-color: var(--gruen); }
.pin-punkt-fehler { border-color: var(--rot); background: var(--rot); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.pinpad .knopf { min-height: 60px; font-family: var(--schrift-mono); font-size: 24px; font-weight: 700; }
.pin-hinweis { text-align: center; color: var(--text-2); margin: 8px 0; min-height: 22px; }

/* --- Dashboard --------------------------------------------------------- */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.kacheln-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 6px; text-align: center; min-width: 0; }
.kachel-zahl { font-family: var(--schrift-mono); font-size: 22px; font-weight: 700; line-height: 1.1; }
.kachel-text { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.kachel-gruen { color: var(--gruen); }
.kachel-gelb { color: var(--gelb); }
.kachel-rot { color: var(--rot-hell); }
.diagramm { display: block; width: 100%; height: 150px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }
.diagramm-hoch { height: 190px; }
.diagramm-flach { height: 110px; }
.verlauf-linie { display: block; width: 100%; height: 90px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }
.spalten-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.top-liste { padding: 0 4px; margin-bottom: 0; }
.preise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preis { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--erhoben); border: 1px solid var(--rand); min-height: 56px; }
.preis-leer { opacity: 0.45; }
.preis-symbol { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(245, 208, 46, 0.12); flex: 0 0 auto; }
.preis-symbol .sym { width: 24px; height: 24px; }
.preis-text { min-width: 0; }
.preis-titel { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; }
.preis-wert { font-weight: 700; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }

/* Marquee (Marquee.tsx + kk-marquee im KBK-Code) */
.laufband {
  background: var(--rot); color: var(--schwarz); padding: 8px 0; overflow: hidden;
  border-top: 2px solid #000; border-bottom: 2px solid #000;
  transform: skewY(-1deg); margin: 16px -12px 8px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.laufband-spur { display: flex; gap: 28px; white-space: nowrap; animation: laufen 30s linear infinite; will-change: transform; font-family: var(--schrift-display); font-size: 12px; letter-spacing: 0.06em; }
@keyframes laufen { from { transform: skewY(1deg) translateX(0); } to { transform: skewY(1deg) translateX(-33.333%); } }

/* --- Rangliste / Bestenliste --------------------------------------------- */
.reiter { display: flex; gap: 6px; justify-content: space-between; margin-bottom: 10px; }
.reiter .knopf { flex: 1 1 0; padding: 0; }
.rang { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px; border-bottom: 1px solid var(--rand); cursor: pointer; }
.rang:last-child { border-bottom: 0; }
.rang:hover { background: var(--erhoben); }
.rang-platz { width: 28px; text-align: center; font-family: var(--schrift-mono); font-weight: 700; color: var(--text-2); flex: 0 0 auto; }
.rang-platz-1 { color: var(--gelb); }
.rang-platz-2 { color: var(--grau-300); }
.rang-platz-3 { color: #C8873A; }
.rang-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-bilanz { font-size: 12px; color: var(--text-2); font-family: var(--schrift-mono); }
.rang-wert { font-family: var(--schrift-mono); font-size: 20px; font-weight: 700; color: var(--gruen); min-width: 64px; text-align: right; }
.rang-neu { opacity: 0.6; }
.rang-neu .rang-wert { color: var(--text-3); font-size: 14px; }
.trend { font-family: var(--schrift-mono); font-size: 12px; font-weight: 700; min-width: 34px; text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.trend .sym { width: 14px; height: 14px; }
.trend-hoch { color: var(--gruen); }
.trend-runter { color: var(--rot-hell); }
.trend-gleich { color: var(--text-3); }
.trend-neu { color: var(--gelb); }
.countdown-chip { font-family: var(--schrift-mono); font-size: 12px; font-weight: 700; color: var(--gelb); background: rgba(245, 208, 46, 0.18); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.enthuellung .rang { animation: einfliegen 0.5s ease-out both; }
.enthuellung .rang:nth-child(1) { animation-delay: 0.9s; }
.enthuellung .rang:nth-child(2) { animation-delay: 0.7s; }
.enthuellung .rang:nth-child(3) { animation-delay: 0.5s; }
.enthuellung .rang:nth-child(4) { animation-delay: 0.35s; }
.enthuellung .rang:nth-child(5) { animation-delay: 0.2s; }
@keyframes einfliegen { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.enthuellung-zaehler { text-align: center; font-family: var(--schrift-display); font-size: 48px; color: var(--gelb); padding: 30px 0; }

/* --- Aufstellung (Namensfelder) ------------------------------------------ */
.seiten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.seite { min-height: 120px; padding: 8px; border-radius: var(--radius); background: var(--flaeche); border: 2px solid var(--rand); }
.seite-a { border-color: rgba(63, 207, 74, 0.6); }
.seite-b { border-color: rgba(245, 208, 46, 0.6); }
.seite-kopf { font-family: var(--schrift-display); font-size: 13px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.seite-a .seite-kopf { color: var(--gruen); }
.seite-b .seite-kopf { color: var(--gelb); }
.seite-sieger { box-shadow: 0 0 0 2px rgba(63, 207, 74, 0.35); }
.namensfeld { position: relative; margin-bottom: 8px; }
.namensfeld-gesetzt { display: flex; align-items: center; gap: 8px; min-height: var(--tipp); padding: 0 6px 0 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--rand); border-radius: var(--radius); }
.namensfeld-gesetzt .wachsen { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vorschlag { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--erhoben); border: 1px solid var(--rand); font-size: 13px; font-weight: 700; cursor: pointer; }
.vorschlag:hover { border-color: var(--grau-500); }
.vorschlag-neu { border-style: dashed; border-color: var(--gruen-dunkel); color: var(--gruen); padding-left: 8px; }
.modus-wahl { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.modus-wahl .knopf { font-family: var(--schrift-mono); font-size: 15px; font-weight: 700; }
.becher-wahl { display: flex; gap: 8px; }
.becher-wahl .knopf { font-family: var(--schrift-mono); font-size: 18px; font-weight: 700; min-width: 64px; }
.zahlen-wahl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 8px 0; }
.zahlen-wahl .knopf { font-family: var(--schrift-mono); font-size: 18px; font-weight: 700; }
.treffer-eingabe { display: flex; align-items: center; gap: 8px; min-height: var(--tipp); }
.treffer-eingabe .eingabe { width: 72px; text-align: center; font-family: var(--schrift-mono); }
.startknopf { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--tipp-gross); width: 100%; margin-top: 10px; cursor: pointer; font-family: var(--schrift-display); font-size: 16px; letter-spacing: 0.06em; }
.startknopf:disabled { opacity: 0.4; cursor: not-allowed; }
.startknopf .sym { width: 28px; height: 28px; }

/* --- Live-Spiel --------------------------------------------------------- */
.spiel-seite { padding: 10px; border-radius: var(--radius); background: var(--flaeche); border: 2px solid var(--rand); margin-bottom: 10px; position: relative; }
.spiel-seite-a { border-color: rgba(63, 207, 74, 0.5); }
.spiel-seite-b { border-color: rgba(245, 208, 46, 0.5); }
.spiel-seite-sieger { border-color: var(--gruen); box-shadow: 0 0 0 2px rgba(63, 207, 74, 0.35); }
.spiel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spiel-rest { font-family: var(--schrift-mono); font-size: 40px; font-weight: 700; line-height: 1; }
.spiel-seite-a .spiel-rest { color: var(--gruen); }
.spiel-seite-b .spiel-rest { color: var(--gelb); }
.spiel-rest-beschriftung { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.becher-feld { display: block; width: 100%; max-width: 260px; height: auto; margin: 6px auto; image-rendering: pixelated; }
.spieler-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.treffer-knopf { flex: 1 1 140px; min-height: var(--tipp-gross); justify-content: space-between; padding: 0 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.treffer-knopf .treffer-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treffer-knopf .treffer-zahl { font-family: var(--schrift-mono); font-size: 20px; color: var(--text-2); min-width: 28px; text-align: right; }
.treffer-knopf .avatar { width: 36px; height: 36px; }
.treffer-knopf .sym { width: var(--symbol); height: var(--symbol); }
.spiel-leiste { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 8px; }
.spiel-entscheidung {
  padding: 14px; border-radius: var(--radius); margin-bottom: 10px;
  background: rgba(63, 207, 74, 0.12); border: 1px solid var(--gruen);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.spiel-entscheidung-text { font-family: var(--schrift-display); font-size: 16px; color: var(--gruen); }
.spiel-ergebnis { text-align: center; padding: 16px 8px; }
.spiel-ergebnis-titel { font-family: var(--schrift-display); font-size: 24px; color: var(--gruen); }
.spiel-ergebnis-sub { color: var(--text-2); margin-top: 4px; }
.spiel-ergebnis-perfekt { position: relative; border-color: var(--gelb); box-shadow: 0 0 0 1px rgba(245, 208, 46, 0.35), 0 0 30px rgba(245, 208, 46, 0.15); }
.stempel {
  position: absolute; top: 8px; right: 12px; transform: rotate(12deg);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 3px solid var(--gelb); border-radius: 6px;
  font-family: var(--schrift-display); font-size: 14px; letter-spacing: 0.08em; color: var(--gelb);
  animation: stempeln 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.stempel .sym { width: 18px; height: 18px; }
@keyframes stempeln { from { transform: rotate(12deg) scale(2.2); opacity: 0; } to { transform: rotate(12deg) scale(1); opacity: 1; } }
.spiel-freigabe { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* --- Spielkarten (Verlauf, Dashboard) ----------------------------------- */
.spielkarte { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.spielkarte-team { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.spielkarte-team-b { justify-content: flex-end; }
.spielkarte-avatare { display: flex; gap: 4px; flex: 0 0 auto; }
.spielkarte-name { font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; }
.spielkarte-stand { font-family: var(--schrift-mono); font-size: 18px; font-weight: 700; white-space: nowrap; }
.spielkarte-team-sieger .spielkarte-name { color: var(--gruen); }
.spielkarte-zeit { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.spielkarte-chips { display: flex; gap: 4px; justify-content: center; margin-top: 2px; }

/* --- Freigaben / Konten --------------------------------------------------- */
.freigabe-aktionen { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.konto { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 8px; border-bottom: 1px solid var(--rand); }
.konto:last-child { border-bottom: 0; }
.konto-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-meta { font-size: 12px; color: var(--text-3); font-family: var(--schrift-mono); }
.konto-aktionen { display: flex; gap: 4px; flex: 0 0 auto; }
.formular { display: grid; gap: 10px; }
.rollen-wahl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* --- Profil --------------------------------------------------------------- */
.profil-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.profil-name { font-family: var(--schrift-display); font-size: 22px; }
.profil-elo { font-family: var(--schrift-mono); font-size: 32px; font-weight: 700; color: var(--gruen); line-height: 1; }
.partner { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--rand); }
.partner:last-child { border-bottom: 0; }
.partner-bilanz { margin-left: auto; font-family: var(--schrift-mono); color: var(--text-2); }

/* --- Ich ------------------------------------------------------------------ */
.einstellung { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--rand); }
.einstellung:last-child { border-bottom: 0; }

/* --- Prozess-Bibliothek --------------------------------------------------- */
.prozess-kachel { display: block; width: 100%; text-align: left; }
.prozess-name { font-weight: 700; }
.prozess-summary { color: var(--text-2); font-size: 14px; margin-top: 2px; }
.prozess-body h1, .prozess-body h2, .prozess-body h3 { font-family: var(--schrift-display); font-weight: 400; letter-spacing: 0.02em; }
.prozess-body h1 { font-size: 20px; } .prozess-body h2 { font-size: 16px; margin-top: 20px; } .prozess-body h3 { font-size: 14px; }
.prozess-body p, .prozess-body li { color: var(--hell-200); }
.prozess-body code { font-family: var(--schrift-mono); font-size: 13px; background: var(--dunkel-700); padding: 1px 5px; border-radius: 3px; }
.prozess-body pre { overflow-x: auto; background: var(--dunkel-800); border: 1px solid var(--rand); padding: 10px; border-radius: var(--radius); }
.prozess-body pre code { background: none; padding: 0; }
.prozess-body table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.prozess-body th, .prozess-body td { border: 1px solid var(--rand); padding: 6px 8px; text-align: left; vertical-align: top; }
.prozess-body th { background: var(--dunkel-800); }
.mermaid-feld { background: var(--dunkel-800); border: 1px solid var(--rand); border-radius: var(--radius); padding: 8px; overflow-x: auto; margin: 10px 0; }
.mermaid-feld svg { max-width: 100%; height: auto; min-width: 0 !important; } /* Mermaid setzt eigene min-width — ohne !important läuft das Diagramm auf dem Handy aus dem Kasten. */

/* --- Hinweis / Dialog ----------------------------------------------------- */
.hinweis {
  position: fixed; left: 50%; top: calc(var(--kopf-hoehe) + 8px); transform: translateX(-50%);
  z-index: 30; max-width: calc(100% - 24px);
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--dunkel-700); border: 1px solid var(--grau-500); color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.hinweis-fehler { border-color: var(--rot); }
.hinweis-gut { border-color: var(--gruen); }
.dialog-schleier {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--kopf-hoehe) + 12px) 12px 12px;
  overflow-y: auto;
}
.dialog { width: 100%; max-width: 420px; background: var(--flaeche); border: 1px solid var(--grau-500); border-radius: var(--radius); padding: 16px; }
.dialog-text { margin: 0 0 14px; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 10px; }
.dialog-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.dialog-weg { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 96px; justify-content: center; padding: 10px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--erhoben); cursor: pointer; font-size: 13px; font-weight: 700; text-align: center; }
.dialog-weg .sym { width: 32px; height: 32px; }
.dialog-weg:hover { border-color: var(--grau-500); }

.feier { position: fixed; inset: 0; z-index: 35; pointer-events: none; width: 100%; height: 100%; }

/* --- TV-Modus ---------------------------------------------------------------- */
body.tv { padding-bottom: 0; overflow: hidden; }
body.tv .kopf, body.tv .fab-stapel { display: none; }
body.tv .ansicht { max-width: none; padding: 0; }
.tv-buehne { position: relative; z-index: 3; height: 100vh; display: flex; flex-direction: column; padding: 24px 36px 0; overflow-y: auto; overflow-x: hidden; }
.tv-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.tv-wortmarke { font-family: var(--schrift-display); font-size: 34px; letter-spacing: 0.04em; }
.tv-uhr { font-family: var(--schrift-mono); font-size: 34px; font-weight: 700; letter-spacing: 0.06em; }
.tv-countdown { font-family: var(--schrift-mono); font-size: 16px; color: var(--text-2); }
.tv-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; margin-top: 20px; flex: 1 1 auto; min-height: 0; }
.tv-spalte { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.tv-live { padding: 22px; border-radius: 8px; background: var(--flaeche); border: 2px solid var(--gruen); box-shadow: 0 0 0 2px rgba(63, 207, 74, 0.25), 0 0 40px rgba(63, 207, 74, 0.15); }
.tv-live-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tv-live-team { display: flex; flex-direction: column; gap: 8px; }
.tv-live-team-b { align-items: flex-end; text-align: right; }
.tv-live-name { font-family: var(--schrift-display); font-size: 24px; }
.tv-live-stand { font-family: var(--schrift-mono); font-size: 64px; font-weight: 700; line-height: 1; text-align: center; }
.tv-kacheln .kachel-zahl { font-size: 36px; }
.tv-kacheln .kachel-text { font-size: 12px; }
.tv-liste .rang { min-height: 58px; }
.tv-liste .rang-name { font-size: 22px; }
.tv-liste .rang-wert { font-size: 30px; min-width: 90px; }
.tv-liste .rang-platz { font-size: 22px; }
.tv-liste .avatar { width: 44px; height: 44px; }
.tv-laufband { margin: 18px -44px 0; padding: 12px 0; border-top-width: 3px; border-bottom-width: 3px; }
.tv-laufband .laufband-spur { font-size: 20px; gap: 48px; }
.blasen { position: fixed; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; }

/* --- Handy ------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root { --tipp: 48px; --tipp-gross: 68px; }
  /* Kopfzeile: sieben Symbole plus Uhr passen nicht in 375 px (Bild-Prüfer 05.09.2026, Überlauf 584 px).
     Die Uhr steht ohnehin oben im Handy-Rand, die Navigation wird 40 px breit (Fläche bleibt über 36 px). */
  .kopf { padding: 0 8px; }
  .uhr { display: none; }
  .nav { gap: 0; }
  .nav .knopf { width: 40px; min-width: 40px; }
  .wortmarke { font-size: 15px; gap: 5px; }
  .ansicht { padding: 10px; }
  .titel { font-size: 20px; }
  .abschnitt-titel { font-size: 18px; }
  .avatar-raster { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .spiel-rest { font-size: 36px; }
  .treffer-knopf { flex: 1 1 100%; }
  .spielkarte-team { flex-direction: column; align-items: flex-start; gap: 4px; }
  .spielkarte-team-b { align-items: flex-end; text-align: right; }
  .laufband { margin: 16px -10px 8px; }
  .kacheln { gap: 6px; }
  .kachel-zahl { font-size: 20px; }
  .spalten-2 { grid-template-columns: 1fr; }
}
@media (max-width: 419px) {
  .wortmarke-titel { display: none; }
}
@media (hover: none) {
  button, a { -webkit-tap-highlight-color: transparent; }
}