/* Teilnehmer-Ansicht (Smartphone): eine Spalte, große Touch-Ziele (§12.2). */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #10151c;
  --panel: #1a2230;
  --rand: #2b3648;
  --text: #ecf2f8;
  --dim: #94a3b8;
  --akzent: #38bdf8;
  --gut: #34d399;
  --warn: #fbbf24;
  --schlecht: #f87171;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
}

.kopf-titel { font-weight: 700; font-size: 1.05rem; }

.kopf-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--warn);
}

/* Pause (§8.9): ein Schild in der Kopfzeile, KEINE Tafel ueber dem Inhalt.
   Der Tisch soll waehrend der Pause weiter auf seinen Massnahmen sitzen und
   auch weiter ankreuzen koennen — abgeben kann er erst wieder, wenn es
   weitergeht (der Absendeknopf sagt das). Frueher ersetzte die Pause den
   ganzen Inhalt; dabei ging mit dem Neuaufbau auch die Auswahl verloren. */
.kopf-pause {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--warn);
  border-radius: 999px;
  color: var(--warn);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

main { padding: 1rem; max-width: 30rem; margin: 0 auto; }

.karte {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: 0.8rem;
  padding: 1rem;
  margin-bottom: 0.9rem;
}

.hinweis-karte { text-align: center; color: var(--dim); padding: 2rem 1rem; }
.hinweis-karte .gross { font-size: 2.2rem; display: block; margin-bottom: 0.6rem; }

.frage { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.3rem; }
.unterzeile { color: var(--dim); font-size: 0.9rem; margin-bottom: 0.8rem; }
.warnung { color: var(--warn); font-size: 0.9rem; margin-bottom: 0.8rem; }

.option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  background: #202a3c;
  color: var(--text);
  border: 2px solid var(--rand);
  border-radius: 0.7rem;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  cursor: pointer;
}

.option.gewaehlt { border-color: var(--akzent); background: #1d3346; }
.option .haken { font-size: 1.2rem; width: 1.4rem; text-align: center; color: var(--akzent); }
.option .label { flex: 1; }
/* ZAC-Joker (§8.10): deutlich abgesetzt von den Massnahmen — er ist keine,
   sondern der Verzicht darauf, selbst zu entscheiden. Ohne die Trennung kreuzt
   ihn jemand versehentlich als vierte Massnahme an. */
.option.joker {
  border-color: var(--akzent, #38bdf8);
  border-style: dashed;
  margin-top: 0.8rem;
}
.option.joker .label { color: var(--akzent, #38bdf8); }
.joker-rest {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  opacity: 0.8;
}
/* Sofortmeldung (§8.11): steht unter dem Trennstrich, gehört keinem Bereich
   und zählt nicht gegen die Kreuze. Durchgezogener Rahmen statt gestrichelt wie
   beim Joker — sie IST eine Maßnahme, nur eine, die jederzeit geht. Die Linie
   darüber macht die Trennung auch dann sichtbar, wenn kein Joker daneben steht. */
.option.sofort {
  border-color: var(--gut, #34d399);
  margin-top: 0.8rem;
  border-top-width: 3px;
}
.option.sofort .label { color: var(--gut, #34d399); }
.sofort-hinweis {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  opacity: 0.8;
}
/* Entwertete Maßnahme (§7e): sichtbar, aber gesperrt — der Saal soll sehen,
   welche Möglichkeit verspielt ist. Durchgestrichen statt nur blass: Auf einem
   Handy im halbdunklen Saal ist Blässe allein zu leicht zu übersehen.
   `pointer-events: none` zusätzlich zum disabled-Attribut, damit auch ein
   Tippen daneben nichts auslöst. */
.option.entwertet {
  opacity: 0.5;
  background: #1a2230;
  border-style: dashed;
  cursor: not-allowed;
  pointer-events: none;
}
.option.entwertet .label { text-decoration: line-through; }
.entwertet-grund {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--warn, #fbbf24);
  text-decoration: none;
}
.badges { display: flex; gap: 0.35rem; margin-top: 0.25rem; flex-wrap: wrap; }
.badge { font-size: 0.72rem; color: var(--dim); background: #141b26; border-radius: 0.4rem; padding: 0.1rem 0.4rem; }

.zaehler { text-align: center; color: var(--dim); margin: 0.4rem 0 0.8rem; }

/* Absende-Leiste (§12.2): klebt am unteren Rand, solange die Karte sichtbar
   ist. Der negative Rand zieht sie ueber die Polsterung der Karte hinaus, der
   Farbverlauf darueber macht sichtbar, dass die Liste weitergeht. Bewusst NICHT
   `position: fixed`: Auf der Endtafel und in der Tischwahl soll nichts kleben. */
.absende-leiste {
  position: sticky;
  bottom: 0;
  margin: 0.6rem -1rem -1rem;
  padding: 0.5rem 1rem 0.9rem;
  background: var(--panel);
  border-radius: 0 0 0.8rem 0.8rem;
}
.absende-leiste::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1.6rem; height: 1.6rem;
  background: linear-gradient(to bottom, rgba(26, 34, 48, 0), var(--panel));
  pointer-events: none;
}
.absende-leiste .zaehler { margin: 0 0 0.5rem; }

.senden {
  display: block;
  width: 100%;
  padding: 0.95rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #08131c;
  background: var(--akzent);
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
}
.senden:disabled { background: #2b3648; color: var(--dim); }

.fehler { color: var(--schlecht); text-align: center; margin-top: 0.6rem; }
.erledigt { color: var(--gut); }

/* Feedback-Sterne */
.sterne { display: flex; justify-content: center; gap: 0.4rem; font-size: 2.4rem; margin: 0.8rem 0; }
.stern { cursor: pointer; filter: grayscale(1) opacity(0.45); }
.stern.aktiv { filter: none; }
textarea {
  width: 100%;
  min-height: 5rem;
  background: #202a3c;
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: 0.6rem;
  padding: 0.6rem;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

.endtafel h2 { margin-bottom: 0.5rem; }
.endtafel p { color: var(--dim); margin-bottom: 0.4rem; }
.endtafel .wert { color: var(--text); font-weight: 700; }

/* --- Teams (§8.12) --------------------------------------------------------
   Ein Handy je Team. Seit dem 2026-08-24 gibt sich jedes Team einen Namen und
   bekommt die naechste freie Nummer — das Zahlenraster "Tisch 7 von 12" ist
   entfallen, weil vorher niemand weiss, wie viele Teams zusammensitzen. */
.versteckt { display: none !important; }

.kopf-tisch {
  background: #202a3c;
  color: var(--akzent);
  border: 1px solid var(--rand);
  border-radius: 0.6rem;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

/* Teamanmeldung (seit 2026-08-24 statt des Zahlenrasters, §8.12). Das
   Namensfeld ist das Erste, was ein Teilnehmer sieht: gross genug, dass es im
   Stehen, im Halbdunkel und von aelteren Augen getroffen wird (offener Punkt
   Nr. 7), und `font-size: 1.1rem` verhindert, dass iOS beim Antippen in das
   Feld hineinzoomt (unter 16px zoomt Safari automatisch). */
.team-feld {
  display: block;
  width: 100%;
  margin: 0.8rem 0;
  padding: 0.9rem 0.8rem;
  background: #202a3c;
  color: var(--text);
  border: 2px solid var(--rand);
  border-radius: 0.7rem;
  font: inherit;
  font-size: 1.1rem;
  text-align: center;
}
.team-feld:focus { border-color: var(--akzent); outline: none; }

.team-abbrechen {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.7rem;
  background: none;
  color: var(--dim);
  border: 1px solid var(--rand);
  border-radius: 0.7rem;
  font: inherit;
  cursor: pointer;
}

/* Die schon angemeldeten Teams — NICHT zum Aussuchen, sondern der Notausgang
   fuer ein Team, dessen Handy leer ist. Deshalb bewusst zurueckhaltend und
   unter einem Trennabstand: Wer neu ist, soll oben tippen, nicht hier suchen. */
.team-trenner { margin-top: 1.6rem; }
.teamliste { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.team-zeile {
  background: #202a3c;
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: 0.7rem;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.team-zeile:active { border-color: var(--akzent); }

.tischwertung { text-align: center; }
.tischwertung .tw-platz { font-size: 1.4rem; font-weight: 700; color: var(--akzent); }
.tischwertung .tw-regel { color: var(--dim); font-size: 0.85rem; margin-top: 0.6rem; }