/* Bingo Hunter – Stylesheet im Logo-Stil (Comic-Aufkleber). Schriften liegen selbst gehostet in fonts/ (SIL OFL),
   keine Verbindung zu fremden Servern. Vorlage: design/neuer-look/vorschau-logo-stil.html */
@font-face { font-family: "Lilita One"; src: url("fonts/lilita-one-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Nunito als variable Schrift 600–900: normaler Text (400) wird bewusst als 600 gezeigt, das ist der runde, kräftige Ton des Logos */
@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
:root {
  /* Logo-Palette, abgelesen aus design/BingoHunterLogo.png */
  --k: #14294a;                                   /* Kontur: dunkle Umrandung aller Logo-Buchstaben */
  --blau: #3fb6ec;   --blau-hell: #8fdcff;   --blau-tief: #1f7fc0;
  --gruen: #6cc644;  --gruen-hell: #aef07c;  --gruen-tief: #3f9426;
  --gelb: #ffc21a;   --gelb-hell: #ffe680;   --gelb-tief: #e08a00;
  --lila: #9b5bd6;   --lila-hell: #cfa0f5;   --lila-tief: #6a33a8;
  --orange: #f28a1e; --orange-hell: #ffc06a; --orange-tief: #c45a0a; --rost: #a8440c;
  --creme: #fff8e8;  --creme-2: #ffefc9;
  --himmel-1: #4cc3f5; --himmel-2: #2a8fdc; --himmel-3: #1d63b8;
  --himmel: radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.35), transparent 70%),
            repeating-conic-gradient(from 0deg at 50% 0%, rgba(255,255,255,.07) 0 9deg, transparent 9deg 18deg),
            linear-gradient(180deg, var(--himmel-1), var(--himmel-2) 55%, var(--himmel-3));
  /* Bisherige Namen, auf die Palette umgelegt. --primary ist Füllfläche (weiße Schrift darauf), --primary-text
     ist Schriftfarbe – NICHT zusammenlegen (docs/review/2026-09-20-ui-ux-pruefung.md, Befund 1.3). */
  --bg: var(--himmel-2); --surface: var(--creme); --surface-low: #ffffff; --container: var(--creme-2); --container-high: #f3dca4;
  --text: var(--k); --text2: #2f4570; --muted: #4b5f86; --muted-weiss: #4b5f86; --line-soft: #ead9ae;
  --primary: #1a6fb0; --primary-text: #1a5f9c; --primary-dark: var(--k); --primary-soft: #d6efff;
  --amber: var(--gelb); --amber-dark: #7a4100; --amber-soft: var(--gelb-hell); --amber-soft2: #fff3c4;
  --green: var(--gruen-tief); --green-dark: #2b6b18; --green-soft: #dcf7c9;
  --red: #d6342b; --red-dark: #9a1a14; --red-soft: #ffd6d0; --red-soft2: #ffe6e2;
  /* Festwerte für Flächen, die in beiden Modi hell/weiß oder dunkel bleiben (Weiß-Knöpfe, Listenzeilen, Kacheln, Meldung):
     --amber-dark/--green-dark/--red-dark/--muted werden nachts hell und wären dort unlesbar. Darum hier die Tageswerte,
     nachts bewusst NICHT überschrieben. */
  --amber-weiss: #7a4100; --gruen-weiss: #2b6b18; --rot-weiss: #9a1a14; --rot-flaeche-weiss: #ffd6d0;
  --toast-ok: #2b6b18; --toast-fehler: #9a1a14;   /* Meldung: dunkle Fläche, weiße Schrift (≥ 4,5:1) in beiden Modi */
  /* Aufkleber: fester Schatten nach unten statt weicher Schatten */
  --hart: 0 4px 0 var(--k);
  --hart-gross: 0 6px 0 var(--k), 0 12px 24px rgba(10,30,70,.25);
  --shadow1: var(--hart); --shadow2: 0 6px 0 var(--k); --shadow3: var(--hart-gross);
  --pille: var(--surface);
  /* Deko des Startbildschirms (Task 7 nutzt sie auf der Infoseite mit): URL-kodierte SVGs, %23 = # */
  --deko-wolke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M22 52c-12 0-18-8-16-16 2-9 12-12 19-9 3-12 15-20 29-16 7 2 12 7 14 13 9-6 24-2 26 10 10-1 19 6 18 14-1 3-3 4-6 4z' fill='%23fff' stroke='%2314294a' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --deko-funkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2c1.6 9 6.4 15.8 16 18-9.6 2.2-14.4 9-16 18-1.6-9-6.4-15.8-16-18 9.6-2.2 14.4-9 16-18z' fill='%23fff' stroke='%2314294a' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --r: 14px; --r-lg: 24px;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font: "Nunito", var(--font-system);
  --titel: "Lilita One", "Nunito", var(--font-system);
}
/* Nacht-Variante: gleicher Stil, Nachthimmel statt Sonnentag, Karten tiefblau */
@media (prefers-color-scheme: dark) {
  :root {
    --k: #060b1f;
    --creme: #1b2d63; --creme-2: #22377a;
    --himmel: radial-gradient(1.5px 1.5px at 18% 12%, #ffffff, transparent), radial-gradient(1.5px 1.5px at 72% 8%, #ffffff, transparent),
              radial-gradient(1px 1px at 44% 22%, #ffffff, transparent), radial-gradient(1px 1px at 86% 30%, #ffffff, transparent),
              radial-gradient(1.5px 1.5px at 8% 40%, #ffffff, transparent), radial-gradient(60% 40% at 50% 0%, rgba(155,91,214,.25), transparent 70%),
              linear-gradient(180deg, #0f1d45, #1d1460);
    --bg: #0f1d45; --surface: var(--creme); --surface-low: #22377a; --container: #263f86; --container-high: #304b99;
    --text: #ffffff; --text2: #d5defa; --muted: #a9b6e0; --line-soft: #2e4790;
    --primary-text: #8fdcff; --primary-dark: #cfeeff; --primary-soft: #23406f;
    --amber-dark: #ffd66b; --amber-soft: #4a3a0a; --amber-soft2: #3a2e0c;
    --green-dark: #9be27a; --green-soft: #173d16;
    --red-dark: #ff9d96; --red-soft: #4a1515; --red-soft2: #3a1414;
    --huegel-nacht: #1f4a28;                      /* Nacht-Hügel des Startbildschirms */
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
/* Kein Markieren von Text auf der Seite (Eingabefelder bleiben bedienbar) */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
body { font-family: var(--font); font-weight: 600; font-synthesis: none; background: transparent; color: var(--text); font-size: 15px; line-height: 1.4; -webkit-tap-highlight-color: transparent; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
/* Kein Nachfedern am Seitenanfang/-ende: wirkt nur am äußersten Element (html), am body wird es ignoriert. Beim Federn
   zitterten auf dem iPhone die festen Ebenen (Himmel, Kopfzeile, Leisten). */
html { background: var(--bg); overscroll-behavior-y: none; }
/* Himmel als feste Ebene hinter allem: background-attachment: fixed ignoriert Safari auf dem iPhone */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--himmel); background-color: var(--bg); pointer-events: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, .btn { font-family: var(--titel); font-weight: 400; }
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; padding: 24px 16px; }
.center-text { text-align: center; margin-top: 8px; }
main { padding: 12px 16px 24px; max-width: 640px; margin: 0 auto; }
.stack > * + * { margin-top: 12px; }
.space { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }

/* Kopfzeile */
header { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 4px solid var(--k); box-shadow: 0 4px 0 rgba(10,30,70,.15); padding: calc(6px + env(safe-area-inset-top)) 16px 6px; }
.hdr { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(0, max-content) minmax(100px, 1fr); align-items: center; gap: 8px; max-width: 608px; margin: 0 auto; }
.brand { display: flex; align-items: center; min-width: 0; min-height: 32px; }
/* Lobby-Code als dunkelblaues Schild mit gelber Comic-Schrift (wie in der Vorschau) */
.lobby-code { border: 3px solid #fff; cursor: pointer; background: var(--k); color: var(--gelb); box-shadow: 0 3px 0 rgba(10,30,70,.45); border-radius: 999px; padding: 5px 14px; display: inline-flex; align-items: baseline; gap: 1px; line-height: 1.2; font-family: var(--titel); }
.lobby-code .hash { font-size: 15px; font-weight: 700; color: var(--gelb-hell); opacity: .8; }
.lobby-code b { font-family: var(--titel); font-size: 20px; font-weight: 400; letter-spacing: .1em; }
.lobby-code.named { flex-direction: column; align-items: center; gap: 0; padding: 3px 12px 4px; border-radius: 14px; font-family: inherit; max-width: 100%; min-width: 0; justify-self: center; }
.lobby-code.named .code { font-size: 10px; font-weight: 400; letter-spacing: .08em; opacity: .75; font-family: var(--titel); color: var(--gelb-hell); line-height: 1.2; }
.lobby-code.named .name { font-size: 13px; font-family: var(--titel); font-weight: 400; color: #fff; letter-spacing: -0.01em; line-height: 1.2; max-width: 100%; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
@media (min-width: 480px) { .lobby-code.named .name { font-size: 15px; } }
.lobby-code:active { transform: scale(.97); }
.who-wrap { position: relative; justify-self: end; min-width: 0; max-width: 100%; }
.who { border: 3px solid var(--k); cursor: pointer; background: #fff; box-shadow: 0 3px 0 var(--k); border-radius: 999px; padding: 6px 8px 6px 12px; font: inherit; font-size: 13px; font-weight: 800; color: var(--k); max-width: 100%; display: flex; align-items: center; gap: 4px; }
.who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .caret { color: var(--k); font-size: 11px; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface); border: 3.5px solid var(--k); border-radius: 18px; box-shadow: var(--hart-gross); padding: 6px; z-index: 30; text-align: left; }
.menu.pop { animation: pop .15s ease-out; } /* nur beim Öffnen per Tipp, nicht beim Neuzeichnen durch den Spielstand-Abruf */
.menu-head { padding: 8px 10px 10px; border-bottom: 2px dashed var(--line-soft); margin-bottom: 4px; font-weight: 800; line-height: 1.3; }
.menu-item { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 11px 10px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 800; color: var(--text); cursor: pointer; }
.menu-item:active { background: var(--container); }
.menu-item.danger { color: var(--red-dark); }
/* Reiterleiste unten (nur Spielleitung): Inhalt bis 608 px breit, wie Kopf und Hauptteil */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; display: flex; gap: 6px; margin: 0;
  padding: 8px max(12px, calc((100% - 608px) / 2)) calc(8px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 4px solid var(--k); box-shadow: 0 -4px 0 rgba(10,30,70,.12); }
.tabs button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 2px 4px;
  border: 3px solid transparent; border-radius: 16px; background: transparent; cursor: pointer; white-space: nowrap;
  font-family: var(--font); font-weight: 900; font-size: 12.5px; line-height: 1.1; color: var(--text2); }
.tabs button svg { width: 24px; height: 24px; display: block; fill: var(--blau); stroke: var(--k); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tabs button svg .frei { fill: var(--gelb); }
.tabs button svg .linie { fill: none; stroke-width: 2.6; }
/* Aktiver Reiter: orange Pille; Beschriftung unter 16 px, deshalb dunkel statt weiß mit Kontur */
.tabs button.active { background: var(--orange); color: var(--k); border-color: var(--k); box-shadow: 0 3px 0 var(--k); }
.tabs button.active svg { fill: #fff; }
.tabs .dot { position: absolute; top: 4px; right: calc(50% - 22px); width: 11px; height: 11px; border: 2px solid var(--k); border-radius: 50%; background: var(--red); animation: pulse 1s infinite alternate; }
/* Mit Reiterleiste: feste Leisten und das Seitenende rücken über die Leiste (8 + 52 + 8 + 4 px Rand) */
#app.with-tabbar main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
#app.with-tabbar .claim-bar, #app.with-tabbar .wiz-bar { bottom: calc(72px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
#app.with-tabbar .claim-bar { padding-bottom: 20px; }
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Pills, Chips */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 2.5px solid var(--k); box-shadow: 0 2px 0 var(--k); font-size: 12px; font-weight: 800; line-height: 18px; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.green { background: var(--gruen-hell); color: var(--k); }
.pill.amber { background: var(--gelb-hell); color: var(--k); }
.pill.gray { background: #fff; color: var(--k); }
.people { display: flex; flex-wrap: wrap; gap: 8px; }
.role, .rating { background: var(--gelb); color: var(--k); border: 2px solid var(--k); font-weight: 800; }
.role { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; vertical-align: middle; }
.chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--k); border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); font-weight: 800; font-size: 14px; }
.chip.pick { cursor: pointer; background: var(--blau-hell); color: var(--k); min-height: 36px; }
.chip.pick:active { transform: translateY(3px); box-shadow: none; }
.chip.done { opacity: .55; }

/* Buttons */
/* Knöpfe wie die Logo-Buchstaben: Kontur, fester Schatten, Glanzstreifen, beim Drücken sinkt der Knopf ein.
   isolation + z-index:-1 legt den Glanz über die Füllung, aber unter die Schrift. */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 10px 18px;
  border: 3.5px solid var(--k); border-radius: 18px; box-shadow: var(--hart); cursor: pointer;
  font-family: var(--titel); font-weight: 400; font-size: 19px; letter-spacing: .02em; line-height: 1.1; color: #fff;
  -webkit-text-stroke: 4px var(--k); paint-order: stroke fill; text-shadow: 0 2px 0 var(--k);
  background-color: var(--orange);
  background-image: radial-gradient(circle at 22% 72%, var(--rost) 0 2px, transparent 3px), radial-gradient(circle at 71% 62%, var(--rost) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 86% 80%, var(--rost) 0 2px, transparent 3px), linear-gradient(180deg, var(--orange-hell), var(--orange) 50%, var(--orange-tief));
  transition: transform .08s, box-shadow .08s; }
.btn::before { content: ""; position: absolute; z-index: -1; left: 12px; top: 6px; width: 42%; height: 9px; border-radius: 99px; background: rgba(255,255,255,.5); pointer-events: none; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--k); }
a.btn { text-decoration: none; }
.btn:disabled { background-color: var(--container-high); background-image: none; color: var(--text2); -webkit-text-stroke: 0; text-shadow: none; box-shadow: none; border-color: var(--muted); cursor: default; transform: none; }
.btn:disabled::before { display: none; }
/* Nebenaktion grün, Weiß für „Abbrechen“ und Ähnliches */
.btn.tint { background-color: var(--gruen); background-image: linear-gradient(180deg, var(--gruen-hell), var(--gruen) 50%, var(--gruen-tief)); }
.btn.soft { background-color: #fff; background-image: none; color: var(--k); -webkit-text-stroke: 0; text-shadow: none; }
.btn.soft::before, .btn.outline-danger::before { display: none; } /* Glanzstreifen auf weißem Knopf wirkt wie ein Fleck (nachts blau auf weiß, läuft in die Schrift) */
.btn.danger { background-color: var(--red); background-image: linear-gradient(180deg, #ff7a6e, var(--red) 55%, #9a1a14); }
.btn.outline-danger { background-color: #fff; background-image: none; color: var(--rot-weiss); -webkit-text-stroke: 0; text-shadow: none; border-color: var(--k); }
.btn.big { min-height: 64px; font-size: 24px; border-radius: 20px; box-shadow: var(--hart-gross); }
.btn.big:active { box-shadow: 0 0 0 var(--k); }
/* Kleine Knöpfe (unter 16 px): keine Kontur auf der Schrift, dunkle Schrift – sonst zu klein zum Lesen */
.vcard-acts .btn, .compare thead .btn, .dash-side-foot .btn { font-family: var(--font); font-weight: 900; color: var(--k); -webkit-text-stroke: 0; text-shadow: none; }
.vcard-acts .btn.tint, .compare thead .btn.tint { color: var(--k); }
/* Hauptknopf auf der Wartekarte der Spielleitung: ein Glanzstreifen wandert alle paar Sekunden über den Knopf
   (nur transform, kein Vergrößern, damit es auf iPhone, Android und Desktop gleich aussieht) */
.btn.gold { background-color: var(--gelb); background-image: linear-gradient(180deg, var(--gelb-hell), var(--gelb) 55%, var(--gelb-tief)); color: #fff; }
.btn.gold.cta::after { background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%); }
.btn.cta { position: relative; overflow: hidden; margin-top: 14px; }
.btn.cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-100%); animation: ctaShine 2.8s ease-in-out infinite; }
@keyframes ctaShine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.icon-btn { background: none; border: 0; min-height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--primary-text); }
.icon-btn[data-del], .icon-btn[data-remove] { color: var(--red-dark); }
.icon-btn:active { background: var(--container); }

/* Karten, Formulare */
.card { background: var(--surface); border: 4px solid var(--k); border-radius: var(--r-lg); padding: 18px 16px; box-shadow: var(--hart-gross); position: relative; }
/* feine gestrichelte Innenlinie wie bei einem Aufkleber */
.card::after { content: ""; position: absolute; inset: 5px; border-radius: 19px; border: 2px dashed rgba(20,41,74,.12); pointer-events: none; }
.card + .card { margin-top: 16px; }
.card h3 { margin-bottom: 10px; font-family: var(--titel); font-weight: 400; font-size: 21px; letter-spacing: .02em; }
input[type=text], input[type=password], input[type=email], textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 3px solid var(--k); border-radius: var(--r); background: #fff; color: var(--k); box-shadow: inset 0 3px 0 rgba(20,41,74,.08); font-weight: 700; outline: none; }
input:focus, textarea:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(242,138,30,.3); }
.add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.add-row input { flex: 1; min-width: 0; }
.add-row .btn { width: auto; padding: 0 16px; flex-shrink: 0; }
/* Unter 400px (z.B. iPhone SE) bleiben dem Feld sonst nur rund 94px Innenbreite, weil der Knopf in
   derselben Zeile steht: Lücke sowie die Innenabstände von Feld und Knopf verkleinern. Kein negativer Rand
   mehr (Review-Fund: die Zeile stand dadurch 16px weiter außen als Überschrift und Liste in derselben
   Karte) – die Zeile bleibt mit dem restlichen Karteninhalt bündig. */
@media (max-width: 399px) {
  /* Die 4px dicke Kartenkontur frisst schon 8px Breite – dafür sitzt der Karteninhalt am schmalen Handy etwas enger */
  .card { padding: 16px 12px; }
  .add-row { gap: 6px; }
  .add-row input { padding-left: 10px; padding-right: 10px; }
  .add-row .btn { padding: 0 10px; }
}
label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.bar { height: 14px; background: #fff; border: 2.5px solid var(--k); border-radius: 99px; overflow: hidden; }
.bar > div { height: 100%; background-color: var(--gelb); background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.3) 0 6px, transparent 6px 12px); border-right: 2.5px solid var(--k); border-radius: 99px 0 0 99px; transition: width .3s; }
.seg { display: flex; background: #fff; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; min-height: 42px; border: 2.5px solid transparent; background: transparent; border-radius: 10px; font-weight: 800; color: var(--k); cursor: pointer; }
.seg button.active { background: var(--orange); color: var(--k); border: 2.5px solid var(--k); box-shadow: none; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); color: var(--k); border-radius: 12px; }
.list li + li { margin-top: 8px; }
.list li .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.num-chip { width: 26px; height: 26px; border-radius: 8px; background: var(--gelb); color: var(--k); border: 2px solid var(--k); display: inline-flex; align-items: center; justify-content: center; font-family: var(--titel); font-size: 12px; font-weight: 400; flex-shrink: 0; }
.danger-zone { border-color: var(--red); }
.danger-zone h3 { color: var(--red-dark); }

/* Login */
.login { max-width: 420px; margin: 40px auto; padding: 0 16px; }
.login .hero { text-align: center; margin-bottom: 20px; }
.login .logo-box { max-width: 300px; margin: 0 auto 12px; }
.login .logo-box img { display: block; width: 100%; height: auto; }
.login h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.login .hero p { color: var(--text); background: var(--pille); display: inline-block; padding: 6px 14px; border: 3px solid var(--k); border-radius: 18px; box-shadow: 0 3px 0 var(--k); font-weight: 800; font-size: 16px; margin-top: 6px; }
/* Startbildschirm-Deko (nur hier und auf der Infoseite): Hügel unten, Wolken und Funkeln (Lupe und Kamera bewusst nicht: sie wirkten wie Knöpfe). Nur Pseudo-
   Elemente, fest am Bildschirm, ohne Klicks – das Formular bleibt bedienbar und das Markup unverändert. */
.login { position: relative; }
.login::before { content: ""; position: fixed; left: -10vw; right: -10vw; bottom: -26vh; height: 46vh; z-index: -1; pointer-events: none;
  border-radius: 50% 50% 0 0; border-top: 4px solid var(--k);
  background: linear-gradient(180deg, var(--gruen-hell), var(--gruen) 30%, var(--gruen-tief)); background-color: var(--gruen); }
.login::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--deko-wolke), var(--deko-wolke), var(--deko-funkel), var(--deko-funkel);
  background-repeat: no-repeat;
  background-size: 120px 60px, 100px 50px, 24px 24px, 18px 18px;
  background-position: -30px 14%, calc(100% + 34px) 30%, 88% 9%, 6% 33%; }
@media (prefers-color-scheme: dark) {
  /* Nachts: dunkle Hügel, Wolken gedimmt. Der Verlauf behält feste Grüntöne (Ausnahme von „nur Variablen“), die Fläche nutzt --huegel-nacht. */
  .login::before { background: linear-gradient(180deg, #2f6b3a, #1f4a28 40%, #14331b); background-color: var(--huegel-nacht); }
  .login::after { opacity: .7; }
}
.master-box summary { cursor: pointer; color: var(--primary-text); font-weight: 600; font-size: 14px; }

/* Spielfeld */
/* Spielbrett auf einer Aufkleber-Karte */
.grid-wrap { position: relative; margin-top: 4px; padding: 10px; background: var(--surface); border: 4px solid var(--k); border-radius: var(--r-lg); box-shadow: var(--hart-gross); }
.card-view .grid-wrap { box-shadow: none; }
.grid { display: grid; gap: 8px; }
.grid-wrap svg.line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.bingo-word { font-family: var(--titel); font-weight: 400; font-size: 11px; letter-spacing: .06em; fill: var(--gelb); stroke: var(--k); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke fill; text-anchor: middle; dominant-baseline: central; }
.cell { position: relative; aspect-ratio: 1; border-radius: 14px; border: 3px solid var(--k); background: #fff center/cover no-repeat; padding: 0; overflow: visible; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 var(--k); }
.cell:disabled { cursor: default; }
/* Umbruch: erst an Silbengrenzen trennen (lang="de" liefert die Trennstellen), nur im Notfall mitten im Wort.
   Vier Zeilen statt drei, weil die Silbentrennung mehr, dafür kürzere Zeilen erzeugt. */
.cell .term { font-size: 12px; font-weight: 900; line-height: 14px; text-align: center; padding: 0 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; color: var(--k); }
.cell.size3 .term, .cell.size4 .term { font-size: 14px; line-height: 16px; }
.cell.size5 .term { line-height: 13px; }
.cell.size6 .term { font-size: 10px; line-height: 12px; }
/* Unter 380 px (iPhone SE und schmaler) wird eine 6×6-Zelle nur noch 43 px breit */
@media (max-width: 380px) {
  .cell.size5 .term { font-size: 10px; line-height: 12px; }
  .cell.size6 .term { font-size: 9px; line-height: 10px; }
}
.cell.has-photo .term { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 0; border-bottom: 5px solid rgba(0,0,0,.75); color: #fff; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); background-color: rgba(0,0,0,.38); /* Mittelton des Verlaufs */ text-shadow: 0 1px 2px rgba(0,0,0,.6); -webkit-line-clamp: 2; }
/* Foto-Felder: dicker Rahmen, der nach Position durch die Logo-Farben wechselt (Blau, Grün, Gelb, Lila, Orange) */
.cell.has-photo { border-width: 4px; box-shadow: 0 0 0 2px var(--k), 0 5px 0 var(--k); }
.cell.has-photo:nth-child(5n+1) { border-color: var(--blau); }
.cell.has-photo:nth-child(5n+2) { border-color: var(--gruen); }
.cell.has-photo:nth-child(5n+3) { border-color: var(--gelb); }
.cell.has-photo:nth-child(5n+4) { border-color: var(--lila); }
.cell.has-photo:nth-child(5n+5) { border-color: var(--orange); }
.cell.has-photo .term { border-radius: 0 0 10px 10px; }
/* Gestrichelt = „wartet auf Bewertung“; im Besuchsmodus gibt es keine Bewertung (no-review), dort bleibt der Rahmen durchgezogen */
.cell.submitted:not(.no-review) { border-style: dashed; }
.cell.inline { box-shadow: 0 0 0 2px var(--k), 0 0 0 6px var(--orange), 0 5px 0 var(--k); }
/* Stand-Aufkleber oben rechts */
.cell .st { position: absolute; top: -8px; right: -8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--k); box-shadow: 0 2px 0 var(--k); font-size: 13px; line-height: 1; filter: none; }
.cell .st svg { width: 15px; height: 15px; fill: none; stroke: var(--k); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cell .st.st-wait { background: var(--gelb); }
.cell .st.st-wait svg { stroke-width: 2.4; }
.cell .st.st-ok { background: var(--gruen); }
.cell .st.st-busy { background: #fff; color: var(--k); font-weight: 900; }
.cell .hint-mark { background: var(--blau-tief); border: 2px solid var(--k); }
/* Große Raster: dünnere Kontur, kleinere Aufkleber, sonst kleistert die Umrandung die Felder zu */
.cell.size5, .cell.size6 { border-width: 2px; border-radius: 10px; box-shadow: 0 2px 0 var(--k); }
.cell.size5.has-photo, .cell.size6.has-photo { border-width: 2px; box-shadow: 0 0 0 1px var(--k), 0 2px 0 var(--k); }
.size5 .st, .size6 .st { width: 18px; height: 18px; top: -6px; right: -6px; border-width: 2px; }
.size5 .st svg, .size6 .st svg { width: 11px; height: 11px; }
.cell.peek { cursor: zoom-in; }
/* Schwere Begriffe: Stern oben links auf dem Feld, in Liste und Bewertung */
.grid, .cell, .cell * { -webkit-tap-highlight-color: transparent; }
.cell { touch-action: manipulation; transition: transform .12s ease-out; }
/* Halten: orange Fläche füllt die Kachel von unten, solange der Finger liegt (Dauer = HOLD_MS in app.js) */
.cell.pressing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(242,138,30,.35); pointer-events: none; animation: hold-fill .45s linear forwards; }
.cell.pressing { border-color: var(--orange); transform: translateY(-2px) scale(1.03); }
@keyframes hold-fill { to { height: 100%; } }
.cell .hint-mark { position: absolute; bottom: 5px; right: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; font-family: Georgia, serif; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* Auf Foto-Feldern wandert das „i“ nach oben links, rechts oben sitzt jetzt der Stand-Aufkleber */
.cell.has-photo .hint-mark { bottom: auto; top: 5px; right: auto; left: 6px; }
/* … und neben den Chili, falls das Feld schwer ist (die Kachel trägt keine eigene Klasse dafür) */
.cell.has-photo:has(.hard-mark) .hint-mark { left: 24px; }
.term-view { text-align: center; padding: 6px 0 2px; }
.term-view .big { font-size: 28px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; margin-bottom: 8px; }
.term-hint { margin: 8px 0 4px; padding: 11px 12px; background: var(--amber-soft2); color: var(--amber-dark); border-radius: 12px; font-size: 16.5px; line-height: 1.5; text-align: left; }
.term-view .term-hint { text-align: center; }
.list li:has(.hint-line) { flex-wrap: wrap; row-gap: 2px; }
.list li .hint-line { flex-basis: 100%; padding-left: 36px; white-space: normal; font-weight: 500; line-height: 1.3; }
.chip-i { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 9px; font-family: Georgia, serif; align-items: center; justify-content: center; margin-left: 2px; }
.cell .hard-mark { position: absolute; top: 4px; left: 6px; font-size: 14px; line-height: 1; color: var(--amber); filter: drop-shadow(0 1px 0 var(--k)); }
.star { color: var(--amber); }
.chili { font-size: 20px; padding: 0 6px; } /* Chili nur bei schweren Begriffen, gesetzt wird die Stufe im Bearbeiten-Fenster */
.list li.hard .grow { color: var(--amber-weiss); }
.chip.pick.hard { background: var(--gelb-hell); color: var(--k); }
.stepper { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: #fff; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); color: var(--k); border-radius: 14px; }
.stepper .grow { font-weight: 800; font-size: 14px; line-height: 1.3; }
.stepper b { min-width: 28px; text-align: center; font-size: 18px; }
.stepper button { width: 40px; height: 40px; border: 3px solid var(--k); border-radius: 10px; background: var(--gelb); color: var(--k); font-family: var(--titel); font-size: 22px; font-weight: 400; cursor: pointer; box-shadow: 0 3px 0 var(--k); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper button:active:not(:disabled) { transform: translateY(3px); box-shadow: none; background: var(--gelb); }
/* Ankreuzzeile im Stepper-Look, z. B. „Begriffe vom letzten Spiel übernehmen“ */
.check { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; background: #fff; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); color: var(--k); border-radius: 14px; cursor: pointer; }
.check .grow { font-weight: 800; font-size: 14px; line-height: 1.3; }
/* Schalter statt nacktem Häkchen: runder Schieber, blau wenn an */
.check input { flex: none; appearance: none; -webkit-appearance: none; width: 48px; height: 28px; margin: 0; border-radius: 999px; background: var(--container-high); border: 2.5px solid var(--k); position: relative; cursor: pointer; transition: background .15s; }
.check input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 2px solid var(--k); box-shadow: none; transition: transform .15s; }
.check input:checked { background: var(--gruen); }
.check input:checked::before { transform: translateX(20px); }
.check input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.check .grow { order: -1; } /* Text links, Schalter rechts */
/* Miniatur eines Spielfelds in der Spielerliste nach dem Spiel */
.mini { display: grid; gap: 2px; width: 46px; height: 46px; flex: none; padding: 3px; border-radius: 9px; background: var(--k); }
.mini i { display: block; border-radius: 2px; background: #fff; }
.mini i.submitted { background: var(--gelb); }
.mini i.confirmed { background: var(--gruen); }
.mini i.inline { outline: 2px solid var(--orange); outline-offset: -1px; }
.list li.tap { cursor: pointer; }
.list li.tap:active { background: var(--container); }
.list li.tap .grow { white-space: normal; line-height: 1.25; }
/* Listenzeilen, Stepper, Schalterzeilen und Takt-Zeile sind in beiden Modi weiß: Nebentext darf nachts nicht das helle --muted nehmen (blass auf weiß) */
.list li .muted, .stepper .muted, .check .muted, .rotate-row .muted, .my-vote.owner .muted, .claim-tally.owner .muted { color: var(--muted-weiss); }
.list li .chev { color: var(--muted-weiss); font-size: 22px; line-height: 1; }
/* Online-Punkt in Spielerliste und „Schon dabei“ (grün = in den letzten 3 Minuten gesehen) */
.online-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); opacity: .45; flex-shrink: 0; }
.chip .online-dot { width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; }
.online-dot.on { background: var(--green); opacity: 1; box-shadow: 0 0 0 3px var(--green-soft); }
.card-view .cell { box-shadow: none; }
.cell.busy { background-color: var(--gelb-hell); border-color: var(--k); animation: pulse .7s infinite alternate; }
/* (.hint steht als Aufkleber-Pille im Abschnitt „Lose Texte“) */
/* Bingo-Knopf: klebt unten am Bildschirm und pulsiert, damit man ihn nicht übersieht */
.claim-spacer { height: 96px; }
/* z-index über der Reiterleiste (26) und unten mehr Luft, damit das Leuchten des Knopfs nicht abgeschnitten wird */
.claim-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 27; padding: 14px 16px calc(22px + env(safe-area-inset-bottom)); background: transparent; }
.claim-bar .btn { max-width: 608px; margin: 0 auto; display: flex; }
/* Bingo-Knopf: orange wie jeder Hauptknopf, pulsiert weiter (jetzt mit festem Schatten) */
.btn.claim { animation: bingoPulse 1.3s ease-in-out infinite; text-shadow: 0 3px 0 var(--k); }
.btn.claim:active { animation: none; transform: translateY(4px); box-shadow: none; }
/* Puls als Leuchten per drop-shadow: folgt der ganzen Knopfform samt festem Schatten. Ein box-shadow-Ring lag
   unter dem festen Schatten und wurde unten von ihm verdeckt (sah abgeschnitten aus). */
@keyframes bingoPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,194,26,0)); }
  50% { transform: scale(1.03); filter: drop-shadow(0 0 7px rgba(255,194,26,.95)) drop-shadow(0 0 14px rgba(255,194,26,.6)); }
}
.hint b { color: var(--text); }

/* Bewertung */
.claim-head { background: var(--gelb-hell); color: var(--k); margin-bottom: 12px; } /* gelbe Fläche bleibt nachts hell: Überschrift dunkel */
.claim-head p { margin-top: 6px; color: var(--k); }
.vote { background: var(--surface); border: 4px solid var(--k); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--hart-gross); }
.vote + .vote { margin-top: 12px; }
.vote .photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--container); border: 3px solid var(--k); cursor: zoom-in; margin-bottom: 10px; }
.vote .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vote .term { font-family: var(--titel); font-weight: 400; font-size: 22px; }
/* Wievieltes Foto der Linie gerade bewertet wird: Text plus eine Punktreihe als schneller Blick */
.claim-step { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; }
.claim-step .dots { display: inline-flex; gap: 4px; }
.claim-step .dots i { width: 10px; height: 10px; border: 2px solid var(--k); border-radius: 50%; background: #fff; }
.claim-step .dots i.on { background: var(--orange); }
.timer { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }
.timer .bar { flex: 1; height: 10px; }
.timer .bar > div { background-color: var(--gelb); transition: width 1s linear; }
.timer span { font-weight: 700; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text2); }
.timer.urgent .bar > div { background-color: var(--red); }
.timer.urgent span { color: var(--red-dark); }
.vote .away { margin: -4px 0 10px; font-size: 13px; color: var(--text2); }
.vote .list { margin-top: 4px; }
.vote-btns { display: flex; gap: 10px; margin-top: 10px; }
.vote-btns button { flex: 1; min-height: 54px; border-radius: 14px; border: 3.5px solid var(--k); box-shadow: var(--hart); font-family: var(--titel); font-weight: 400; font-size: 19px; color: #fff; -webkit-text-stroke: 4px var(--k); paint-order: stroke fill; cursor: pointer; }
.vote-btns .up { background-color: var(--gruen); background-image: linear-gradient(180deg, var(--gruen-hell), var(--gruen) 50%, var(--gruen-tief)); }
.vote-btns .down { background-color: var(--red); background-image: linear-gradient(180deg, #ff7a6e, var(--red) 55%, #9a1a14); }
.vote-btns .up.active, .vote-btns .down.active { border-color: var(--k); box-shadow: 0 0 0 4px var(--gelb), var(--hart); color: #fff; }
.vote-btns .up.active { background-color: var(--gruen); }
.vote-btns .down.active { background-color: var(--red); }
.vote-btns.voted button:not(.active) { opacity: .4; }
.vote-btns button.active { transform: scale(1.03); }
.my-vote { text-align: center; font-size: 14px; font-weight: 600; margin-top: 10px; }
.my-vote.valid { color: var(--primary-dark); }
.my-vote.invalid { color: var(--red-dark); }
.my-vote.muted { font-weight: 500; }
/* Für die Rufende ersetzt diese Zeile die Abstimmknöpfe: ruhiger Ton, aber deutlich genug zum Lesen */
.my-vote.owner, .claim-tally.owner { background: #fff; border: 3px solid var(--k); color: var(--k); }
.my-vote.owner { border-radius: var(--r); padding: 12px 14px; text-align: center; }
/* Für die Rufende ist der Zwischenstand („2 × Passt · 0 × Passt nicht“) die einzige Information, die sich
   bewegt – sie stimmt selbst nicht mit ab, das ist ihr ganzer Bildschirm. Deshalb dieselbe Fläche wie die
   Meldung darunter, aber größer und mittig statt klein und rechtsbündig wie bei den Mitspielern. */
.claim-tally.owner { border-radius: var(--r); padding: 12px 14px; margin-top: 10px; text-align: center; font-size: 17px; font-weight: 700; }

/* Warteraum / Endseite */
.empty { text-align: center; padding: 28px 12px 24px; }
.empty h2, .win h2, .result h2 { font-family: var(--titel); font-weight: 400; letter-spacing: .02em; }
.empty h2 { font-size: 24px; margin-bottom: 8px; }
.empty p { color: var(--text2); font-size: 16px; }
.win { text-align: center; background: var(--gelb-hell); color: var(--k); }
.win h2 { font-size: 26px; }
.win h2::before { content: "👑 "; }
.win p { color: var(--k); margin-top: 4px; }
.thumbs { display: flex; gap: 8px; margin-top: 16px; }
.thumb { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; font-weight: 600; cursor: zoom-in; }
.thumb .img { width: 100%; aspect-ratio: 1; border-radius: 10px; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); overflow: hidden; background: var(--container); margin-bottom: 4px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; line-height: 1.25; }
/* Raster statt flex: Name/Balken, Zahl und Knopfspalte haben feste Plätze. Die Knopfspalte bleibt auch
   dort stehen, wo kein Knopf ist (Spielleitung) – sonst wäre ihr Balken länger und sähe nach Vorsprung aus.
   Die Knopfspalte ist „auto“ statt fest verdrahtet: Sie passt sich der tatsächlichen Breite ihres Inhalts an
   (der Platzhalter in der Zeile ohne Knopf hat dieselbe Breite wie ein echter Knopf, nur unsichtbar – siehe
   app.js), statt immer denselben Festbetrag zu reservieren. Das gibt der Namensspalte auf schmalen Geräten
   mehr Platz. Die Zahlenspalte (56px, reicht bis „36/36“ – die größte Karte ist 6×6) bleibt dagegen FEST:
   jede .player-Zeile ist ihr eigenes Grid, „auto“ würde die Spalte pro Zeile neu vermessen und wäre bei
   „10/16“ ein Zeichen breiter als bei „0/16“ – der Balken der Spielerin mit dem meisten Fortschritt wäre
   dann der kürzeste. Genau das sollte Befund 1.6 verhindern. */
.player { display: grid; grid-template-columns: minmax(0, 1fr) 56px auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 2px dashed var(--line-soft); }
.player:last-child { border-bottom: 0; }
/* Die Klasse .info gehört auch der Infoseite (info.php): margin/padding/max-width dort auf 0/0/none, weil
   .player .info sonst nur die selbst gesetzten Eigenschaften überschreibt und die fremde Regel (margin:0 auto,
   Innenabstand, Maximalbreite) durchschlägt – Balken wären wieder unterschiedlich breit bzw. die Zeile zu hoch. */
.player .info { min-width: 0; margin: 0; padding: 0; max-width: none; }
/* overflow-wrap: ein langer, unteilbarer Name (bis zu 20 Zeichen erlaubt) bricht sonst nicht um und läuft
   sichtbar in die Zahlen-/Knopfspalte hinein – Umbrechen statt Abschneiden, weil man bei einem Spielernamen
   sehen will, wer gemeint ist. */
.player .name { font-weight: 700; margin-bottom: 6px; overflow-wrap: anywhere; }
.player .pct { font-size: 14px; font-family: var(--titel); font-weight: 400; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.result { text-align: center; padding: 8px 4px; animation: pop .25s ease-out; }
.result .ico { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 48px; border: 4px solid var(--k); box-shadow: var(--hart); background: var(--gelb); }
.result .ico.red { background: var(--red-soft); color: var(--red-dark); font-weight: 800; }
.result h2 { font-size: 26px; margin: 8px 0 6px; }
.result p { color: var(--text2); font-size: 16px; }

/* Toast, Banner, Modal */
.toast { position: fixed; left: 16px; right: 16px; top: calc(12px + env(safe-area-inset-top)); z-index: 60; background: var(--toast-ok); color: #fff; padding: 14px 16px; border-radius: 16px; border: 3.5px solid var(--k); box-shadow: var(--hart-gross); font-weight: 800; animation: pop .2s ease-out; max-width: 600px; margin: 0 auto; }
.toast.error { background: var(--toast-fehler); }

.banner { position: sticky; top: 0; z-index: 30; background: var(--gelb); color: var(--k); border-bottom: 3px solid var(--k); text-align: center; padding: 8px 12px; font-size: 13px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.banner button { font: inherit; font-weight: 800; border: 0; border-radius: 999px; padding: 6px 14px; background: var(--k); color: var(--gelb); cursor: pointer; }
.modal { position: fixed; inset: 0; background: rgba(6,11,31,.6); display: flex; align-items: flex-end; justify-content: center; padding: 12px; z-index: 50; }
@media (min-width: 500px) { .modal { align-items: center; } }
/* Höhe am sichtbaren Bereich (dvh) messen: Safari rechnet vh ohne Adressleiste, das Fenster ragte sonst oben aus dem
   Bildschirm (Logo im QR-Fenster abgeschnitten, iPhone 12). 92vh bleibt als Rückfall für Browser ohne dvh.
   overscroll-behavior: contain – am Ende des Fensters federt nicht die Seite dahinter mit. */
.modal-box { background: var(--surface); border: 4px solid var(--k); box-shadow: var(--hart-gross); border-radius: 26px; padding: 20px; width: 100%; max-width: 440px; max-height: 92vh; max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; animation: pop .2s ease-out; }
.modal-box h3 { font-family: var(--titel); font-weight: 400; font-size: 24px; }
.modal-box h3:empty { display: none; }
.modal-box img.full { width: 100%; max-height: 55vh; object-fit: contain; border-radius: 14px; border: 3px solid var(--k); background: var(--container); }
.modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.modal-actions:empty { display: none; }

/* Kein Text direkt auf dem Himmel: lose Zeilen bekommen eine Aufkleber-Pille */
.hint, .rotation, .center { background: var(--pille); color: var(--text); border: 3px solid var(--k); border-radius: 18px; box-shadow: 0 3px 0 var(--k); }
.hint { margin-top: 14px; padding: 12px 14px; font-size: 15px; }
.rotation { display: table; margin: 0 auto 10px; padding: 6px 14px; }
.center { max-width: 320px; margin: 24px auto; }
.legal-link { display: table; margin: 18px auto 0; padding: 6px 14px; background: var(--pille); border: 3px solid var(--k); border-radius: 18px; box-shadow: 0 3px 0 var(--k); }

/* ---------- Lobby ---------- */

.code-boxes { display: flex; gap: 8px; }
.code-boxes .code-box { flex: 1; min-width: 0; padding: 12px 0; text-align: center; font-size: 26px; line-height: 1.2; font-weight: 400; text-transform: uppercase; font-family: var(--titel); border-radius: 14px; box-shadow: 0 4px 0 var(--k); caret-color: var(--primary-text); }
.code-inline { letter-spacing: .12em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.login .or { text-align: center; color: var(--text); font-family: var(--titel); font-size: 17px; }
.legal-link { text-align: center; font-size: 13px; }
main .legal-link { margin-top: 24px; }
.legal-link a { color: var(--text); font-weight: 800; text-decoration: none; }
/* Impressum-Seite */
/* Impressum und Rangliste: Text steht auf einer Tafel, nicht direkt auf dem Himmel */
.legal { max-width: 560px; line-height: 1.5; background: var(--surface); border: 4px solid var(--k); border-radius: 28px; box-shadow: var(--hart-gross); padding: 24px 20px 32px; margin: 24px auto; }
@media (max-width: 599px) { .legal { margin: 16px 12px; } }
.legal .back { display: inline-block; margin-bottom: 16px; color: var(--primary-text); text-decoration: none; font-weight: 800; }
.legal h1 { font-family: var(--titel); font-weight: 400; font-size: 30px; margin-bottom: 4px; }
.legal h2 { font-family: var(--titel); font-weight: 400; font-size: 19px; margin: 20px 0 6px; }
/* Stern hinter der Beschriftung eines Pflichtfelds */
.req { color: var(--red-dark); font-weight: 700; }
.invite { text-align: center; }
.invite .logo { max-width: 170px; margin: 0 auto 8px; }
.invite .logo img { display: block; width: 100%; height: auto; }
.invite .name { font-family: var(--titel); font-weight: 400; font-size: 20px; margin-bottom: 2px; }
.invite h4 { margin: 16px 0 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 15px; }
.invite .people { justify-content: center; }
.lobby-hint { margin-top: 6px; color: var(--green-dark); }
.lobby-hint.bad { color: var(--red-dark); }
.card.empty .lobby-desc { color: var(--text); font-weight: 600; margin-bottom: 6px; }
/* Hinweisbox in Schritt „Begriffe“: wie viele noch fehlen (gelb) bzw. genug (grün) */
.need { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); background: var(--gelb-hell); color: var(--k); font-size: 14px; line-height: 1.35; }
.need b { font-size: 16px; }
.need span { color: var(--k); }
.need.ok { background: var(--gruen-hell); color: var(--k); }
/* Warten auf die KI: Text plus Punkte unter dem Knopf */
.ai-wait .waiting-dots { margin-top: 10px; }
.waiting-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.waiting-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--blau); border: 2px solid var(--k); animation: dotBounce 1.2s ease-in-out infinite; }
.waiting-dots i:nth-child(1) { background: var(--blau); }
.waiting-dots i:nth-child(2) { background: var(--gelb); animation-delay: .2s; }
.waiting-dots i:nth-child(3) { background: var(--orange); animation-delay: .4s; }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-7px); opacity: 1; } }
.invite .code { font-size: 36px; font-weight: 400; letter-spacing: .2em; font-family: var(--titel); margin: 6px 0 12px; color: var(--k); background: var(--gelb); border: 3px solid var(--k); border-radius: 16px; box-shadow: 0 3px 0 var(--k); display: inline-block; padding: 4px 14px; }
.invite .qr { max-width: 240px; margin: 0 auto 12px; background: #fff; padding: 8px; border-radius: 12px; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); }
.invite .qr svg { display: block; width: 100%; height: auto; }
.invite input { text-align: center; font-size: 13px; margin-bottom: 10px; }
/* Link-Feld, das beim Antippen kopiert: Text links, kleines „Kopieren“ rechts im Feld */
.copy-field { position: relative; margin-bottom: 10px; }
.copy-field input { width: 100%; margin: 0; padding-right: 46px; text-align: left; text-overflow: ellipsis; cursor: pointer; }
.copy-field .copy-tag { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--primary-text); pointer-events: none; }

/* ---------- „Neues Spiel“ in drei Schritten ---------- */
.steps { display: flex; list-style: none; padding: 0; margin: 0 0 4px; }
.steps li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--text); }
.steps li + li::before { content: ''; position: absolute; top: 14px; right: 50%; width: 100%; height: 4px; background: var(--k); opacity: .25; }
.steps li.done + li::before { background: var(--gruen-tief); opacity: 1; }
.steps .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--k); background: #fff; color: var(--k); font-family: var(--titel); font-size: 13px; font-weight: 400; }
.steps li.active, .steps li.done { color: var(--text); }
.steps li.active .dot { background: var(--orange); color: var(--k); }

.steps li.done .dot { background: var(--gruen); color: var(--k); }
.wiz-nav { display: flex; gap: 8px; }
.wiz-spacer { height: 96px; }
.wiz-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 4px solid var(--k); }
.wiz-bar .wiz-nav, .wiz-bar .wiz-why { max-width: 608px; margin-left: auto; margin-right: auto; }
.wiz-nav .btn { flex: 1 1 0; width: auto; min-width: 0; }
.wiz-nav .btn.soft { flex: 0 0 auto; padding: 10px 16px; }
.wiz-nav .btn.big { font-size: 20px; }
.summary { list-style: none; padding: 0; margin: 0; }
.summary li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.summary li:last-child { border-bottom: 0; }
.summary li span { color: var(--text2); }
.wiz-why { margin-bottom: 8px; text-align: center; }
/* Begriffsliste: Wort darf umbrechen, die drei Knöpfe sind schmale Symbole */
/* Begriffszeile mit Wischen zum Löschen: die Vorderseite (.swipe-body) trägt das Layout und lässt sich nach links
   schieben, dahinter liegt das rote „Löschen“ (auch mit der Maus ziehbar) */
.list li.term { display: block; position: relative; overflow: hidden; padding: 0; background: transparent; border: 0; box-shadow: none; }
.list li.term .swipe-body { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); color: var(--k); border-radius: 12px; position: relative; z-index: 1; transition: transform .2s ease-out; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.list li.term .swipe-body:has(.hint-line) { flex-wrap: wrap; row-gap: 2px; }
.list li.term.tap:active { background: transparent; }
.list li.term .swipe-del { position: absolute; top: 0; bottom: 0; right: 0; width: 100px; padding-left: 12px; border: 3px solid var(--k); border-radius: 12px; background: var(--red); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.list li.term .grow { white-space: normal; overflow: visible; line-height: 1.25; overflow-wrap: anywhere; }
.list li.term .acts { display: inline-flex; gap: 0; flex-shrink: 0; margin-right: -6px; }
.list li.term .acts .chili { font-size: 20px; }

/* Spielmodi (Schritt 1 des Steppers) */
.mode-pick { display: flex; flex-direction: column; gap: 8px; }
.mode-pick button { text-align: left; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--k); background: #fff; box-shadow: 0 3px 0 var(--k); cursor: pointer; display: flex; gap: 12px; align-items: flex-start; font: inherit; color: var(--k); }
.mode-pick button.active { background: var(--gelb-hell); border-color: var(--k); box-shadow: 0 3px 0 var(--k), 0 0 0 3px var(--orange); }
.mode-pick .mark { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--k); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; margin-top: 2px; }
.mode-pick button.active .mark { background: var(--orange); border-color: var(--k); color: var(--k); }
.mode-pick .name { font-family: var(--titel); font-weight: 400; font-size: 18px; display: block; margin-bottom: 2px; }
.mode-pick .desc { font-size: 13px; color: var(--k); line-height: 1.35; display: block; }
/* Weiche vor dem Assistenten (wayPickHtml): Pfeil statt Auswahlkreis, da ein Tipp sofort weiterführt statt nur
   auszuwählen; align-self zentriert ihn an der rechten Seite, obwohl der Knopf sonst oben ausrichtet (align-items). */
.mode-pick .chev { align-self: center; flex: none; color: var(--k); font-size: 22px; line-height: 1; }
/* Sprachwahl (ui.js chooseLanguage): zwei Spalten antippbarer Kästen wie bei den Spielmodi, die aktive Sprache gelb */
.lang-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lang-opt { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border-radius: 14px; border: 3px solid var(--k); background: #fff; box-shadow: 0 3px 0 var(--k); cursor: pointer; font: inherit; font-weight: 800; font-size: 15px; color: var(--k); text-align: left; }
.lang-opt.active { background: var(--gelb-hell); box-shadow: 0 3px 0 var(--k), 0 0 0 3px var(--orange); }
.lang-opt .flag-img { width: 30px; margin-right: 0; }
.flag-img { flex: none; display: inline-block; width: 1.5em; height: auto; aspect-ratio: 3 / 2; vertical-align: -0.2em; margin-right: 0.35em; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--k); overflow: hidden; }
.lang-opt .mark { font-weight: 900; }
.lang-opt .grow { min-width: 0; overflow-wrap: anywhere; }
/* Chaos-Takt (Schritt 2) */
.rotate-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: #fff; border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); color: var(--k); border-radius: 14px; }
.rotate-row .grow { font-weight: 800; font-size: 14px; line-height: 1.3; }
.rotate-row input[type=text] { width: 72px; text-align: center; padding: 8px 6px; }
.rotate-row .seg { flex: none; padding: 3px; }
.rotate-row .seg button { min-height: 34px; padding: 0 10px; font-size: 13px; }

/* Chaos: Countdown und Wechsel-Aufblinken */
.rotation { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.cell.swapped { animation: swap .9s ease-out; }
@keyframes swap { 0% { background-color: var(--gelb-hell); transform: scale(.94); } 60% { background-color: var(--gelb-hell); } 100% { transform: scale(1); } }
/* Blackout: volle Karte */
.grid.full { outline: 4px solid var(--gelb); outline-offset: 4px; border-radius: 8px; }
.thumbs.many { flex-wrap: wrap; }
.thumbs.many .thumb { flex: 0 0 calc(25% - 6px); }
/* Endseite: Neue Runde */
.card.round { text-align: center; }
.card.round h3 { font-size: 22px; font-variant-numeric: tabular-nums; }
.card.round .btn.cta { margin-top: 0; }
/* Vollbild-Countdown (letzte fünf Sekunden vor dem Start) */
#countdown { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(6,11,31,.5); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
#countdown .num { font-family: var(--titel); font-weight: 400; font-size: 46vmin; line-height: 1; color: #fff; -webkit-text-stroke: 14px var(--k); paint-order: stroke fill; text-shadow: 0 12px 0 var(--k); font-variant-numeric: tabular-nums; }
#countdown .num.go { font-size: 30vmin; color: var(--gelb); letter-spacing: .04em; }
#countdown .num.pop { animation: countPop .9s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes countPop { 0% { transform: scale(1.7); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.88); opacity: .95; } }

/* ---------- Einrichtungen (einrichtung.php) ---------- */
.venue-hdr { grid-template-columns: 1fr auto; }
.venue-hdr .brand img { height: 26px; width: auto; display: block; }
.venue-hdr .who .caret { font-size: 12px; font-weight: 600; }
/* (input[type=email] steht oben bei den übrigen Eingabefeldern) */
.list li.vcard { display: block; }
.list li.vcard .grow { white-space: normal; overflow: visible; }
.vcard-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vcard-acts .btn { width: auto; flex: 1 1 calc(50% - 6px); min-height: 42px; font-size: 14px; padding: 8px 10px; }
.kasse-result { border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); padding: 14px; border-radius: 12px; font-size: 16px; line-height: 1.4; animation: pop .2s ease-out; }
.kasse-result b { display: block; font-size: 18px; margin-bottom: 4px; }
.kasse-result.valid { background: var(--gruen-hell); color: var(--k); }
.kasse-result.checked { background: var(--gelb-hell); color: var(--k); }
.kasse-result.unknown { background: var(--rot-flaeche-weiss); color: var(--k); }
.code-input { font-family: var(--titel); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: 20px; }

/* ---------- Besucherkarte (besuch.php) ---------- */
.besuch-hdr { grid-template-columns: auto 1fr; }
.besuch-hdr .brand img { height: 24px; width: auto; display: block; }
.besuch-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.besuch-title b { font-family: var(--titel); font-weight: 400; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.besuch-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.full-banner { text-align: center; background: var(--gelb-hell); color: var(--k); margin-bottom: 12px; }
.full-banner h2 { font-family: var(--titel); font-weight: 400; font-size: 22px; }
.full-banner p { color: var(--k); margin-top: 4px; }
.progress { text-align: center; background: var(--pille); border: 3px solid var(--k); border-radius: 18px; box-shadow: 0 3px 0 var(--k); display: table; margin: 12px auto 0; padding: 6px 14px; color: var(--text); }
.result.redeemed { padding: 24px 16px; }
.result.redeemed .ico { background: var(--green-soft); }
.result .reward { font-weight: 700; color: var(--text); margin-top: 4px; }
.redeem-code { font-size: 40px; font-weight: 400; letter-spacing: .2em; font-family: var(--titel); margin: 10px 0 4px; color: var(--k); background: var(--gelb); border: 4px solid var(--k); border-radius: 18px; box-shadow: var(--hart); display: inline-block; padding: 4px 18px; }
.besuch-title .rule { white-space: normal; }

/* Spielerkonten: Wertungs-Abzeichen und Veränderung nach dem Spiel */
.rating { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.delta { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 800; vertical-align: middle; }
.delta.up { color: var(--gruen-weiss); }
.delta.down { color: var(--rot-weiss); }
.account-line a, .login .muted a { color: var(--primary-text); font-weight: 600; text-decoration: none; }
#username[readonly] { background: var(--surface-low); color: var(--text2); }

/* Rangliste (rangliste.php) */
.ranking .rank { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.ranking .rank th { text-align: left; font-size: 12px; color: var(--text); font-weight: 900; padding: 6px 8px; border-bottom: 3px solid var(--k); }
.ranking .rank td { padding: 9px 8px; border-bottom: 2px dashed var(--line-soft); }
.ranking .rank td.r { font-family: var(--titel); color: var(--text); width: 48px; }
.ranking .rank tbody tr:first-child td.r::before { content: "👑 "; }
.ranking .rank td.n { font-weight: 600; }
.ranking .rank td.w { font-weight: 700; }
.ranking .rank tr.me td { background: var(--gelb-hell); color: var(--k); }
.ranking .rank tr.me td.n::after { content: ' (du)'; font-weight: 500; color: var(--k); }
.ranking .rank tr.gap td { text-align: center; color: var(--muted); }

/* Startseite (info.php): viel Luft, schmale Spalte, drei Schritte, zwei Karten, leichter Vergleich; am Handy einspaltig */
.info-page { -webkit-user-select: text; user-select: text; }
.info { max-width: 880px; margin: 0 auto; padding: 72px 24px 48px; line-height: 1.55; }
.info section + section { margin-top: 88px; }
.info h1 { font-family: var(--titel); font-size: 40px; font-weight: 400; letter-spacing: .01em; line-height: 1.1; margin-top: 28px; color: #fff; -webkit-text-stroke: 7px var(--k); paint-order: stroke fill; text-shadow: 0 4px 0 var(--k); }
.info h2 { font-family: var(--titel); font-size: 26px; font-weight: 400; letter-spacing: .01em; margin-bottom: 28px; text-align: center; }
.info h3 { font-size: 19px; margin-top: 12px; }
.info .lead { font-size: 19px; color: var(--text); background: var(--pille); border: 3px solid var(--k); border-radius: 18px; box-shadow: 0 3px 0 var(--k); padding: 10px 16px; margin-top: 14px; max-width: 520px; }
/* Symbole: gezeichnete Strichgrafiken in der Grundfarbe, kein Emoji */
.info .ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gelb); color: var(--k); border: 3px solid var(--k); box-shadow: 0 3px 0 var(--k); }
.info .ico svg { width: 24px; height: 24px; display: block; }
/* Kopfbereich zweispaltig: links Text, rechts die Beispielkarte */
/* Infoseite: Kopfbereich auf dem Himmel mit Deko, alle weiteren Abschnitte als Tafeln */
.info-hero { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.info-hero::after { content: ""; position: absolute; inset: -40px -60px; z-index: -1; pointer-events: none;
  background-image: var(--deko-wolke), var(--deko-wolke), var(--deko-funkel);
  background-repeat: no-repeat; background-size: 140px 70px, 110px 55px, 26px 26px;
  background-position: 0 6%, 100% 18%, 82% 2%; }
.info section:not(.info-hero) { background: var(--surface); border: 4px solid var(--k); border-radius: 28px; box-shadow: var(--hart-gross); padding: 40px 28px; }
.info-logo { display: block; width: 340px; max-width: 100%; height: auto; }
.info-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.info-actions .btn { width: auto; min-width: 170px; padding: 12px 28px; }
/* QR-Block darunter in derselben Spalte: Code links, Text rechts */
.info-qr { display: flex; align-items: center; gap: 18px; margin-top: 40px; padding: 14px 18px 14px 14px; border-radius: var(--r-lg); background: var(--surface); border: 3px solid var(--k); box-shadow: var(--hart); text-align: left; max-width: 460px; }
.info-qr .qr { flex: none; width: 96px; height: 96px; background: #fff; border: 2px solid var(--k); padding: 5px; border-radius: 12px; }
.info-qr .qr svg { display: block; width: 100%; height: 100%; }
.info-qr p { margin: 0; }
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: center; }
.how li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.how b { font-size: 17px; }
.how p { color: var(--text2); max-width: 260px; }
.info-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.info-two .card { padding: 28px 28px 30px; }
.info-two .card + .card { margin-top: 0; }
.info-two .card p { color: var(--text2); margin-top: 8px; }
.info-two .card, .venue-grid .card { background: #fff; color: var(--k); }
.info-two .card p, .venue-grid .card p { color: var(--k); }
/* Abschnitt für Einrichtungen: drei Kacheln, Faktenliste, Hinweis zu Kosten, Knopf */
.info-venue { background: var(--surface); margin-left: 0; margin-right: 0; }
.info-venue .muted { text-align: center; max-width: 620px; margin: -14px auto 0; }
.info-venue .card { background: #fff; }
.venue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.venue-grid .card { padding: 24px; }
.venue-grid .card + .card { margin-top: 0; }
.venue-grid .card p { color: var(--k); margin-top: 8px; font-size: 14px; }
.venue-facts { list-style: none; margin: 28px auto 0; padding: 0; max-width: 620px; display: grid; gap: 10px; }
.venue-facts li { position: relative; padding-left: 28px; color: var(--text2); }
.venue-facts li::before { content: '✓'; position: absolute; left: 4px; top: 0; color: var(--gruen-tief); font-weight: 700; }
.venue-note { max-width: 620px; margin: 28px auto 0; padding: 16px 20px; border-radius: var(--r-lg); background: var(--gelb-hell); color: var(--k); border: 3px solid var(--k); text-align: center; font-size: 14px; }
.venue-note a { color: inherit; }
.venue-cta { margin-top: 24px; text-align: center; }
.venue-cta .btn { width: auto; min-width: 260px; padding: 12px 28px; text-decoration: none; }
.info-compare .muted { text-align: center; max-width: 560px; margin: -12px auto 0; }
.info-compare .small { margin-top: 20px; text-align: center; }
.table-wrap { overflow-x: auto; margin-top: 36px; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 13px 14px; text-align: center; vertical-align: middle; border-bottom: 2px dashed var(--line-soft); }
/* Kopf wie drei Tarifkarten: Name, Halbsatz, Knopf */
.compare thead th { vertical-align: bottom; padding: 0 14px 20px; border-bottom: 3px solid var(--k); }
.compare thead th:first-child { border-bottom: 0; }
.compare .plan { display: block; font-size: 17px; font-family: var(--titel); font-weight: 400; letter-spacing: -0.01em; }
.compare .sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.compare thead .btn { width: auto; min-height: 40px; margin-top: 14px; padding: 8px 18px; font-size: 14px; text-decoration: none; }
/* Beim seitlichen Schieben am Handy bleibt die Beschriftungsspalte stehen */
.compare tbody th, .compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.compare tbody th { width: 200px; text-align: left; font-weight: 600; color: var(--text2); padding-left: 0; }
.compare tbody td { color: var(--text2); }
/* Ja/Nein als Häkchen und Strich; das Wort bleibt für Vorleseprogramme erhalten */
.compare .yes, .compare .no { font-size: 0; }
.compare .yes::before, .compare .no::before { font-size: 19px; font-weight: 700; line-height: 1; }
.compare .yes::before { content: '✓'; color: var(--gruen-tief); }
.compare .no::before { content: '–'; color: var(--muted); opacity: .55; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.info-foot { margin-top: 96px; text-align: center; font-size: 13px; background: var(--pille); border: 3px solid var(--k); border-radius: 18px; box-shadow: 0 3px 0 var(--k); display: table; margin-left: auto; margin-right: auto; padding: 8px 16px; color: var(--text); }
.info-foot a { color: var(--text); text-decoration: none; }
@media (max-width: 699px) {
  .info { padding: 40px 16px 32px; }
  .info section + section { margin-top: 64px; }
  .info h1 { font-size: 30px; }
  .info h2 { font-size: 23px; margin-bottom: 20px; }
  .info .lead { font-size: 17px; }
  .info-actions .btn { flex: 1 1 100%; }
  .info section:not(.info-hero) { padding: 28px 16px; border-radius: 22px; }
  .info-logo { width: 260px; }
  .info-actions { width: 100%; }
  .info-venue { margin-left: 0; margin-right: 0; }
  .info .ico { width: 40px; height: 40px; }
  .how { grid-template-columns: 1fr; gap: 28px; }
  .info-two { grid-template-columns: 1fr; }
  .venue-grid { grid-template-columns: 1fr; gap: 12px; }
  .venue-cta .btn { width: 100%; min-width: 0; }
  .compare { min-width: 620px; font-size: 14px; }
  .compare tbody th { width: 140px; padding-right: 10px; }
  .compare .plan { font-size: 15px; }
  .info-foot { margin-top: 64px; }
}

/* Feinschliff 2026-10-03 ------------------------------------------------------------------------------------------- */
/* Antippen: auch Reiter und Namensknopf geben kurz nach, wie die übrigen Knöpfe */
.tabs button:active, .who:active { transform: scale(.97); }
.tabs button, .who { transition: transform .1s, background-color .15s, color .15s; }
/* Tastatur: sichtbarer Rahmen um das gerade gewählte Element (nur bei Tastaturbedienung, nicht beim Tippen) */
:where(button, a, input, select, textarea, summary, [tabindex], [data-view], [data-card]):focus-visible { outline: 3px solid var(--primary-text); outline-offset: 2px; }
.cell:focus-visible { outline-offset: 1px; }
/* Maus: dezente Rückmeldung beim Darüberfahren – greift nur an Geräten mit Maus, am Handy ändert sich nichts */
@media (hover: hover) and (pointer: fine) {
  /* :not(:active): sonst (höhere Spezifität) hält der Hover den Knopf 1px oben und das Einsinken beim Klick mit der Maus fällt aus */
  .btn:not(:disabled):hover:not(:active) { filter: brightness(1.06); transform: translateY(-1px); }
  .btn.tint:not(:disabled):hover:not(:active), .btn.soft:not(:disabled):hover:not(:active) { filter: brightness(.97); }
  /* brightness() bewegt sich auf dem fast weißen Grund von .outline-danger kaum sichtbar – eigener Hover-Hintergrund statt Filter */
  .btn.outline-danger:not(:disabled):hover:not(:active) { background: var(--red-soft2); filter: none; }
  .cell:not(:disabled) { transition: transform .12s ease-out, box-shadow .12s ease-out; }
  /* :not(.pressing) lässt das Halten (Vergrößern aufs Öffnen des Fensters) gewinnen, sonst überschrieb der Hover
     das Scale wieder auf 1; beim blau umrandeten .inline-Feld bleibt der Ring zusätzlich zum Hover-Schatten erhalten. */
  .cell:not(:disabled):not(.pressing):hover { transform: translateY(-2px); box-shadow: var(--shadow2); }
  .cell.inline:not(:disabled):hover { box-shadow: 0 0 0 2px var(--k), 0 0 0 6px var(--orange), 0 7px 0 var(--k); }
  .tabs button:not(.active):hover { background: var(--container); color: var(--text); }
  .who:hover, .lobby-code:hover { filter: brightness(.97); }
  .list li.tap:hover, .thumb:hover .img { filter: brightness(.98); }
  .list li.tap { transition: filter .12s; }
  .vote-btns button:not(.active):hover { border-color: currentColor; }
  .legal-link a:hover { color: var(--text); }
}
/* Bewertung am Rechner: Foto in der Höhe begrenzen, damit „Passt / Passt nicht“ auch auf Laptops ohne Scrollen sichtbar bleibt.
   Ganzes Foto zeigen (contain) statt zu beschneiden – der Rand bekommt die Kartenfarbe. min-height zusätzlich zu
   min-width, sonst greift die Begrenzung auch im Handy-Querformat (z.B. 844×390) und quetscht das Foto auf ~170px. */
@media (min-width: 700px) and (min-height: 600px) {
  .vote .photo { aspect-ratio: auto; height: min(438px, 44vh); }
  .vote .photo img { object-fit: contain; }
}
/* Begriffszeilen: das rote „Löschen“ hinter der Zeile schimmerte an den runden Ecken als dünne rote Kante durch.
   Erst zeigen, wenn die Zeile wirklich nach links geschoben ist; beim Zurückgleiten bleibt Rot sichtbar, bis die
   Zeile (Transition .2s, siehe .swipe-body oben) wieder drüber liegt – sonst sähe man kurz eine weiße Lücke.
   .open und :has() stehen bewusst in zwei eigenen Regeln statt in einer Selektorliste: iOS < 15.4 kennt :has()
   nicht und würfe sonst die ganze Regel weg, dann wäre „Löschen“ nirgends antippbar. */
.list li.term .swipe-del { visibility: hidden; transition: visibility 0s linear .2s; }
.list li.term.open .swipe-del { visibility: visible; transition-delay: 0s; }
.list li.term:has(.swipe-body[style*="translateX(-"]) .swipe-del { visibility: visible; transition-delay: 0s; }
/* Wisch-Hinweis (swipeHint in ui.js): die oberste Begriffszeile rutscht einmal kurz nach links und zeigt das rote
   „Löschen“, damit man die Geste entdeckt. Wie die Hervorhebung neuer Begriffe darunter läuft er bewusst auch bei
   „Bewegung reduzieren“: klein, kurz, einmalig und erklärt eine Funktion. */
.list li.term.swipe-hint .swipe-del { visibility: visible; transition-delay: 0s; }
.list li.term.swipe-hint .swipe-body { animation: swipe-hint 2s ease-in-out; }
/* langsam nach links (0–35 %), kurz halten (35–55 %), zurück nach rechts (55–100 %); jeder Abschnitt mit eigenem Anlaufen/Abbremsen */
@keyframes swipe-hint { 0% { transform: translateX(0); animation-timing-function: ease-in-out; } 35% { transform: translateX(-40px); } 55% { transform: translateX(-40px); animation-timing-function: ease-in-out; } 100% { transform: translateX(0); } }
/* Neu hinzugefügter Begriff (markNewTerms in ui.js): Zeile schiebt sich von oben herein und leuchtet kurz gelb auf */
.list li.term.term-new { animation: term-new-in .35s ease-out; }
.list li.term.term-new .swipe-body { animation: term-new-glow 1.6s ease-out; }
@keyframes term-new-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes term-new-glow { 0%, 35% { background: var(--gelb-hell); } 100% { background: #fff; } }
.list li.term.term-new.swipe-hint .swipe-body { animation: swipe-hint 2s ease-in-out, term-new-glow 1.6s ease-out; } /* beide zugleich, etwa beim ersten Begriff */