:root {
  --green: #16a34a;
  --green-dark: #15803d;
  --green-light: #dcfce7;
  --green-lighter: #f0fdf4;
  --amber: #f59e0b;
  --amber-light: #fef3c7;
  --red: #dc2626;
  --red-light: #fee2e2;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-light: #dbeafe;
  --blue-lighter: #eff6ff;

  /* ---------- Farbrollen (07.08.2026, Thema "Schiri-Schwarz") ----------
     Vorher war Grün gleichzeitig Vereins-/Markenfarbe UND die Farbe für
     "richtig". Dadurch konkurrierte jede Auswahlfarbe mit dem Erfolgsgrün,
     und die Seite wirkte grün-blau zusammengewürfelt (Max' Kritik).

     Jetzt sauber getrennt:
       --marke*   Anthrazit - Kopfbereich, Buttons, Fokus. Thematisch das
                  schwarze Schiedsrichter-Trikot, nicht "farblos".
       --karte-*  Gelb/Rot als Akzent - die Karten des Schiedsrichters.
       Grün und Rot sind ab jetzt AUSSCHLIESSLICH Rückmeldung
       (richtig/falsch) und werden nirgends mehr dekorativ verwendet. */
  --marke: #1f2937;
  --marke-dunkel: #111827;
  --marke-hell: #374151;
  --marke-lighter: #f3f4f6;
  --karte-gelb: #facc15;
  --karte-orange: #f97316;
  --bg-start: #f6f7f9;
  --bg-end: #eef0f4;
  --card-bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 2px 10px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.12);
  --font-titel: "Poppins", "Segoe UI", sans-serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  background: linear-gradient(160deg, var(--bg-start) 0%, var(--bg-end) 55%, #ffffff 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
}

/* ---------- Kopfbereich ---------- */

.kopf {
  background: linear-gradient(120deg, var(--marke) 0%, var(--marke-dunkel) 100%);
  padding: 28px 20px 26px;
  border-radius: 0 0 28px 28px;
  box-shadow: var(--shadow);
}

.kopf-inhalt {
  max-width: 900px;
  margin: 0 auto;
}

.kopf-titelzeile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ball {
  font-size: 2.4rem;
  display: inline-block;
  animation: schwingen 3.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes schwingen {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.kopf h1 {
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 1.5rem;
  color: #ffffff;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.subtitle {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-size: 0.92rem;
}

.subtitle[hidden] { display: none; }

.fortschritt-wrap {
  margin-top: 18px;
  padding: 10px 12px 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}

.fortschritt-zeile {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 8px;
  align-items: center;
}

#fortschritt-prozent {
  min-width: 48px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--marke-dunkel);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fortschritt-track {
  height: 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

/* Fortschrittsbalken in den Karten-Farben (07.08.2026) statt in reinem
   Weiß - greift den Akzentstreifen der Fragekarten auf, sodass beides als
   dieselbe Formensprache gelesen wird. */
.fortschritt-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--karte-gelb) 0%, var(--karte-orange) 100%);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.45);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.fortschritt-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,0.42) 50%, transparent 58% 100%);
  transform: translateX(-100%);
  animation: fortschritt-glanz 2.8s ease-in-out infinite;
}

@keyframes fortschritt-glanz {
  0%, 58% { transform: translateX(-100%); }
  82%, 100% { transform: translateX(100%); }
}

/* ---------- Layout ---------- */

.wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 18px 48px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}

/* ---------- Login-Karte ---------- */

.login-card {
  text-align: left;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.login-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--marke-lighter);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin: 0 auto 10px;
}

.card-titel {
  font-family: var(--font-titel);
  font-size: 1.1rem;
  text-align: center;
  margin: 0 0 18px;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.92rem;
}

select, input[type="password"], input[type="text"], input[type="email"], textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  width: 100%;
  margin-bottom: 14px;
  background: #fafafa;
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
  resize: vertical;
  min-height: 70px;
}

select:focus, input:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px rgba(31,41,55,0.12);
  background: #ffffff;
}

button {
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-weight: 700;
}

#start-button {
  width: 100%;
  background: var(--marke);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, transform 0.1s;
  margin-top: 18px;
}

#start-button[hidden] { display: none; }

#start-button:not(:disabled):hover {
  background: var(--marke-dunkel);
  transform: translateY(-1px);
}

#start-button:disabled {
  background: #cfd8d3;
  cursor: not-allowed;
}

.hinweis {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 10px;
  margin-bottom: 0;
}

.login-merken {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  cursor: pointer;
}

.login-merken input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--green);
}

.login-merken span { display: grid; gap: 2px; line-height: 1.35; }
.login-merken strong { font-size: .9rem; }
.login-merken small { color: var(--muted); font-size: .78rem; font-weight: 400; }

.fehler {
  color: var(--red);
  font-weight: 600;
  background: var(--red-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 16px;
}

/* ---------- Angemeldet-Leiste ---------- */
/* Update 11.07.2026 (drittes Feedback): "Angemeldet als X" + "Abmelden"
   wirkten als reiner Fließtext/Link "billig" - jetzt ein Badge mit Avatar
   fürs Angemeldet-sein plus ein echter, umrahmter Button fürs Abmelden
   (".sekundaer-button", siehe unten - dieselbe Bauart wird auch für den
   "← Zurück"-Button im Üben-Bereich verwendet). */

.angemeldet-leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 4px 4px 0;
}

/* Gleiche Falle wie bei ".freitext-lade-hinweis" oben (siehe Kommentar dort):
   ohne diese Zeile überschreibt "display: flex" das HTML-"hidden"-Attribut -
   die Leiste ("Angemeldet als ..." + Abmelden-Button) wäre dann die ganze
   Zeit sichtbar, auch schon auf der allerersten "Wer bist du"-Seite, bevor
   überhaupt jemand angemeldet ist (Max' Feedback, 11.07.2026: die Kästchen
   sollen dort weg, nach echtem Login aber unverändert bleiben). */
.angemeldet-leiste[hidden] {
  display: none;
}

.angemeldet-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: 0.85rem;
  color: var(--text);
  box-shadow: var(--shadow);
}

.angemeldet-avatar {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Gemeinsamer, umrahmter Pillen-Button für sekundäre Aktionen (Abmelden,
   Zurück) - gleiche Bauart wie ".historie-neu-laden-button" weiter unten,
   nur ohne festes Icon, damit er auch für reinen Text taugt. */
.sekundaer-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.sekundaer-button[hidden] { display: none; }

.sekundaer-button:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* ---------- Anfrage-Formular & Meine-Anfragen-Liste (Baustein 5a) ---------- */

#anfrage-aermellaenge-bereich[hidden] { display: none; }

#anfrage-absenden-button {
  width: 100%;
  background: var(--marke);
  color: white;
  transition: background 0.15s, transform 0.1s;
}

#anfrage-absenden-button:hover {
  background: var(--marke-dunkel);
  transform: translateY(-1px);
}

.anfrage-zeile {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.anfrage-zeile:last-child { margin-bottom: 0; }

.anfrage-zeile-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.anfrage-zeile-titel {
  font-weight: 600;
  font-size: 0.92rem;
}

.anfrage-status-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.anfrage-status-badge.offen { background: var(--amber-light); color: #92400e; }
.anfrage-status-badge.angenommen { background: var(--green-light); color: var(--green-dark); }
.anfrage-status-badge.abgelehnt { background: var(--red-light); color: var(--red); }
.anfrage-status-badge.erledigt { background: #e0e7ff; color: #3730a3; }

.anfrage-zeile-detail {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}

/* ---------- Anliegen-Formular & Rechnungs-Upload (Baustein 5c) ---------- */

#anliegen-absenden-button,
#rechnung-hochladen-button {
  width: 100%;
  background: var(--marke);
  color: white;
  transition: background 0.15s, transform 0.1s;
}

#anliegen-absenden-button:hover,
#rechnung-hochladen-button:not(:disabled):hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

#rechnung-hochladen-button:disabled {
  background: #cfd8d3;
  cursor: not-allowed;
}

#rechnung-datei-eingabe {
  width: 100%;
  margin-bottom: 14px;
}

#rechnung-vorschau-bild {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  background: var(--bg-end);
}

#rechnung-vorschau-bild[hidden] { display: none; }

/* Typ-Badge ("Antrag"/"Anliegen") in der Meine-Anfragen-Liste, damit auf
   einen Blick klar ist, um welche Art Eintrag es sich handelt. */
.anfrage-typ-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* "Rechnung hochladen"-Hinweis/Link innerhalb einer Zeile in "Meine
   Anfragen" - eigene Pillen-Optik statt eines vollwertigen Buttons, damit
   die Liste nicht zu wuchtig wirkt. */
.anfrage-zeile-rechnung-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  background: var(--amber-light);
  color: #92400e;
  border: none;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.anfrage-zeile-rechnung-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--green-dark);
  font-weight: 600;
}

/* ---------- Fragen-Liste ---------- */

.fragen-liste {
  display: grid;
  grid-template-columns: 1fr;
  /* Mehr Luft zwischen den Fragen (10.08.2026, Max: "dass das klarer
     abgegrenzt ist, wo die eine Frage aufhört und die nächste anfängt").
     16px reichten nicht - die Karten wirkten wie ein durchgehender Block. */
  gap: 26px;
  margin-top: 16px;
}

.frage-karte {
  position: relative;
  padding-top: 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, transform 0.2s;
  overflow: hidden;
}

/* Farbiger Akzentstreifen am oberen Rand jeder offenen Frage (07.08.2026,
   Max: "ein bisschen farbiger und lebendiger"). Bei beantworteten Fragen
   wird er weiter unten grau/grün/rot überschrieben. */
.frage-karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--karte-gelb) 0%, var(--karte-orange) 100%);
}
.frage-karte.beantwortet::before {
  background: var(--border);
}
.frage-karte.beantwortet.richtig-karte::before {
  background: var(--green);
}
.frage-karte.beantwortet.falsch-karte::before {
  background: var(--red);
}

.frage-karte:hover {
  box-shadow: var(--shadow-hover);
}

.frage-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* Standard-Badge neutral (07.08.2026): war vorher grün und konkurrierte
   damit mit dem Erfolgsgrün der richtigen Antwort - Grün darf auf dieser
   Seite nur noch "richtig" bedeuten. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--marke-lighter);
  color: var(--marke-hell);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.badge.schwierigkeit {
  background: var(--amber-light);
  color: #92400e;
  letter-spacing: 1px;
}

/* Fragetyp-Badges (07.08.2026): eigene Farbwelt je Typ, damit beim Scrollen
   sofort auffällt, was einen erwartet. Farbe ist bewusst nur die Zugabe -
   der Text steht immer mit dabei, sonst wäre der Typ für farbfehlsichtige
   Nutzer nicht unterscheidbar. */
.badge.typ-video {
  background: #ede9fe;
  color: #5b21b6;
}
.badge.typ-freitext {
  background: var(--blue-light);
  color: var(--blue-dark);
}

/* Fragen-Nummer: gibt jeder Frage eine feste, sichtbare Kennung ("F1"),
   damit man sich beim Besprechen im Team darauf beziehen kann und die
   Reihenfolge zwischen Website und Planung nachvollziehbar wird
   (07.08.2026, Max' Wunsch "jede Frage bekommt so eine eigene Rangnummer"). */
.badge.frage-nummer {
  background: var(--text);
  color: #fff;
  letter-spacing: 0.03em;
}

/* Die Frage bekommt mehr Gewicht und Luft nach unten, damit sie sich klar
   von den Antwortmöglichkeiten absetzt (07.08.2026) - vorher lief beides
   fast gleichwertig ineinander. */
.frage-text {
  font-family: var(--font-titel);
  font-weight: 600;
  line-height: 1.5;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.frage-text-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.frage-text-zeile .frage-text {
  margin-bottom: 0;
  flex: 1;
}

/* Vorlese-Button (Text-to-Speech, 10.07.2026): liest die Frage per
   Browser-Sprachausgabe vor, kein eigener Server/Dienst nötig (Web Speech
   API). Erscheint nur, wenn der Browser das unterstützt (Feature-Check in
   app.js). */
.vorlesen-button {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.vorlesen-button:hover {
  background: var(--marke);
  color: #fff;
  transform: scale(1.08);
}

.vorlesen-button:active {
  transform: scale(0.95);
}

/* Aktiver Zustand während die Frage vorgelesen wird - Klick stoppt sie. */
.vorlesen-button.spricht {
  background: var(--marke);
  color: #fff;
}

/* ---------- Freitext-Fragen mit KI-Auswertung (10.07.2026) ---------- */

.freitext-hinweis {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 10px;
}

.freitext-eingabe {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  width: 100%;
  resize: vertical;
  min-height: 70px;
  background: #fafafa;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.freitext-eingabe:focus {
  outline: none;
  border-color: var(--marke);
  box-shadow: 0 0 0 3px rgba(31,41,55,0.12);
  background: #ffffff;
}

.freitext-eingabe:disabled {
  opacity: 0.7;
}

.freitext-zaehler {
  text-align: right;
  font-size: 0.76rem;
  color: var(--muted);
  margin: 4px 0 12px;
}

.freitext-eigene-antwort {
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-end);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 10px;
}

/* Lade-Hinweis während die Freitext-Antwort geprüft wird - verhindert, dass
   ungeduldige Nutzer:innen mehrfach klicken (Button/Feld sind während dieser
   Zeit ohnehin per JS deaktiviert, dieser Hinweis erklärt nur warum). */
.freitext-lade-hinweis {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
  margin-top: 12px;
}

/* WICHTIG: ohne diese Zeile überschreibt die obige "display: flex"-Regel das
   HTML-"hidden"-Attribut (Browser-Standardverhalten für [hidden] ist zwar
   "display: none", aber jede eigene CSS-Regel mit "display" für dieselbe
   Klasse hat Vorrang) - der Lade-Hinweis wäre sonst die ganze Zeit sichtbar,
   auch bevor man überhaupt etwas abgeschickt hat (genau der Bug, den Max
   gemeldet hat). Dieselbe Falle gilt für jedes Element, das gleichzeitig
   "hidden" UND eine eigene "display"-Regel bekommt. */
.freitext-lade-hinweis[hidden] {
  display: none;
}

.freitext-ergebnis-kopf {
  font-weight: 700;
  margin: 0 0 4px;
}

.freitext-ergebnis-muster {
  font-weight: 600;
  margin: 0 0 4px;
}

.freitext-ergebnis-ki {
  font-weight: 400;
  font-size: 0.88rem;
  opacity: 0.85;
  margin: 0;
}

.freitext-ergebnis-hinweis {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 6px;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--marke);
  border-radius: 50%;
  animation: spinner-drehen 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spinner-drehen {
  to { transform: rotate(360deg); }
}

.option-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

/* Farbsystem der Antwortmöglichkeiten (07.08.2026, Max' Wunsch):
   BLAU = von dir ausgewählt (noch nicht abgeschickt) - bewusst nicht grün,
          damit die reine Auswahl nicht schon wie eine Erfolgsmeldung wirkt.
   GRÜN = die richtige Antwort (erst nach dem Abschicken sichtbar).
   ROT  = deine Antwort, wenn sie falsch war.
   Der Hover-Effekt greift nur, solange die Frage offen ist - vorher blieb er
   auch nach dem Abschicken aktiv, wodurch bereits gesperrte Felder weiterhin
   anklickbar wirkten (Max' Bugmeldung). */
.option:hover:not(.gesperrt) {
  border-color: var(--marke-hell);
  background: var(--marke-lighter);
}

.option input {
  accent-color: var(--marke);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.option.ausgewaehlt {
  border-color: var(--marke);
  background: var(--marke-lighter);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--marke);
}

.option.gesperrt,
.option.gesperrt input[type="radio"] {
  cursor: default;
}

/* Aufgelöste Antwort */
.option.ist-richtig {
  border-color: var(--green);
  background: var(--green-light);
  font-weight: 600;
}
.option.ist-falsch {
  border-color: var(--red);
  background: var(--red-light);
  font-weight: 600;
}

/* Zeichen am Zeilenende, damit die Auflösung nicht allein über Farbe
   transportiert wird (Farbfehlsichtigkeit). */
.option-marke {
  margin-left: auto;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.option.ist-richtig .option-marke { color: var(--green-dark); }
.option.ist-falsch .option-marke { color: var(--red); }

/* Trefferflaeche des Absende-Knopfes (Usability-Test Runde 3, iPhone: die
   Testperson hat ihn zweimal hintereinander verfehlt und dachte, es passiere
   nichts).

   Gemessen war die Breite nie das Problem - "width: 100%" heisst hier volle
   Kartenbreite. Zwei andere Dinge schon:

   1. Die Hoehe hing allein an "padding: 13px 18px" der Grundregel fuer
      button. Das ergibt rund 45 px, solange die Schrift genau so gerendert
      wird wie erwartet - bei groesserer Systemschrift oder einer
      Ersatzschrift kann die Zeilenbox kleiner ausfallen und der Knopf unter
      44 px rutschen. "min-height" macht daraus einen garantierten Boden
      (WCAG 2.5.5).
   2. Ueber dem Knopf lagen nur 14 px Abstand zur letzten Antwortzeile - und
      die ist selbst ein tippbares <label>. Ein Tipp knapp zu hoch landete
      also nicht ins Leere, sondern wechselte still die ausgewaehlte Antwort:
      es "passierte nichts" Sichtbares, und die Auswahl war trotzdem eine
      andere. Der groessere Abstand macht den Fehlgriff folgenlos
      (WCAG 2.5.8, Target Spacing). */
.frage-karte .absenden-button {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  background: var(--marke);
  color: white;
}

.frage-karte .absenden-button:not(:disabled):hover {
  background: var(--green-dark);
}

.frage-karte .absenden-button:disabled {
  background: #cfd8d3;
  cursor: not-allowed;
}

.feedback {
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.feedback.richtig { color: var(--green-dark); background: var(--green-light); }
.feedback.falsch { color: var(--red); background: var(--red-light); }

/* ---------- Bereits beantwortete Fragen ---------- */

/* Beantwortete Fragen heben sich beim Scrollen ab (Max: "ausgrauen"), ohne
   unlesbar zu werden - zurückgenommener Hintergrund statt globaler Deckkraft,
   damit "Warum?" und Vorlesen kontraststark bedienbar bleiben. */
/* Beantwortete Fragen deutlich zurücknehmen (07.08.2026, zweite Runde nach
   Max' Rückmeldung: "das ist zwar etwas ausgegraut, aber für das menschliche
   Auge kaum sichtbar"). Jetzt wirken mehrere Signale zusammen, damit man
   beim Scrollen sofort trennt "erledigt" von "noch offen":
     - spürbar grauerer Kartenhintergrund statt fast-weiß
     - kein Schlagschatten mehr (offene Karten heben sich dadurch ab)
     - blasserer Text und blasse Antwortzeilen
     - nur die richtige Antwort bleibt voll kräftig
   Das frühere "🔒 Bereits beantwortet"-Etikett entfällt dadurch - der
   Zustand ist jetzt am Aussehen erkennbar und braucht keine Textzeile mehr. */
.frage-karte.beantwortet {
  background: #eef0f3;
  border-color: #cfd4db;
  box-shadow: none;
}
.frage-karte.beantwortet .frage-text {
  color: #6b7280;
}
.frage-karte.beantwortet .option {
  opacity: 1;
  color: #6b7280;
  background: #f7f8fa;
  border-color: #c8ced7;
}
.frage-karte.beantwortet .option.ist-richtig,
.frage-karte.beantwortet .option.ist-falsch {
  opacity: 1;
}
.frage-karte.beantwortet .frage-badges .badge {
  opacity: 0.65;
}

.frage-karte.beantwortet.richtig-karte {
  border-color: #86d9a2;
  box-shadow: inset 4px 0 0 var(--green);
}

.frage-karte.beantwortet.falsch-karte {
  border-color: #f3a3a3;
  box-shadow: inset 4px 0 0 var(--red);
}

.beantwortet-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

.beantwortet-ergebnis {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin: 0;
}

.beantwortet-ergebnis.richtig { color: var(--green-dark); background: var(--green-light); }
.beantwortet-ergebnis.falsch { color: var(--red); background: var(--red-light); }

/* ---------- Gemeinsam abschicken ---------- */

.sammel-absenden-wrap {
  margin-top: 18px;
  text-align: center;
}

.sammel-absenden-button {
  background: var(--blue);
  color: white;
  /* Gleicher Boden wie beim Absende-Knopf der einzelnen Frage - er haengt
     sonst ebenfalls allein am Innenabstand. */
  min-height: 48px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.sammel-absenden-button:hover {
  background: #1d4ed8;
}

.sammel-absenden-button:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

.sammel-absenden-hinweis {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 8px 0 0;
}

/* ---------- Fertig-Karte ---------- */

.fertig-card {
  text-align: center;
  padding: 34px 20px;
}

.fertig-emoji {
  font-size: 2.6rem;
  margin-bottom: 6px;
}

.fertig-text {
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 4px 0;
}

.naechste-runde {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 0.92rem;
}

.naechste-runde strong {
  color: var(--green-dark);
}

/* ---------- Desktop-Layout ---------- */

@media (min-width: 760px) {
  .wrap {
    max-width: 920px;
    padding: 32px 24px 56px;
  }

  .kopf-inhalt, .fortschritt-wrap {
    max-width: 920px;
  }

  .kopf {
    padding: 34px 32px 30px;
  }

  .kopf h1 {
    font-size: 1.85rem;
  }

  .ball {
    font-size: 3rem;
  }

  .login-card {
    padding: 32px 36px;
  }

  .fragen-liste {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .fertig-card,
  #keine-fragen-hinweis {
    grid-column: 1 / -1;
  }

  .sammel-absenden-wrap {
    margin-top: 22px;
  }

  .sammel-absenden-button {
    padding: 14px 32px;
  }

  .frage-karte {
    display: flex;
    flex-direction: column;
  }

  .option:hover {
    transform: translateX(2px);
  }
}

@media (min-width: 1080px) {
  .fragen-liste {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- "Üben" (Wiederholung alter Fragen, 11.07.2026) ---------- */
/* Wiederhergestellt am 11.07.2026: die erste Auslieferung dieses Blocks
   basierte versehentlich auf einer veralteten style.css OHNE die
   Freitext-Styles - dadurch sahen Freitext-Fragen "gequetscht" aus
   (Hinweistext groß, Zähler links statt klein rechts unten). Diese Datei
   ist jetzt wieder: kompletter Stand von Commit 13f523e + Historie-Block.

   Update (11.07.2026, zweite Feedback-Runde nach Max' Live-Test): der
   Bereich heißt auf der Website ab jetzt "Üben" (Wording-Wunsch, das
   App-Wording "Wiederholung" bleibt unangetastet). Drei konkrete Punkte:
   1) Der Kopfbereich (grüner Balken + Wochen-Fortschritt) sah im Üben-
      Modus identisch zur normalen Quiz-Seite aus, obwohl er dort nichts
      mehr bedeutet (die Wochen-Fragen sind ja schon fertig) - bekommt jetzt
      per ".kopf-uebung"-Klasse (in app.js beim Betreten/Verlassen des
      Modus umgeschaltet) einen blauen statt grünen Verlauf, der
      Fortschrittsbalken wird komplett ausgeblendet, der Untertitel-Text
      wechselt.
   2) Der Neu-laden-Button wirkte als reiner Emoji-Kreis "billig" - jetzt
      ein richtiger Pillen-Button mit SVG-Icon + Beschriftung, gleiche
      Bauart wie die anderen sekundären Buttons im Projekt.
   3) Neu: ".historie-weiter-button" erscheint direkt in der Frage-Karte,
      nachdem eine Antwort abgeschickt wurde - vorher blieb man nach dem
      Antworten "hängen" (Max' Wortwahl), jetzt ist der Weg zur nächsten
      Frage Teil der Karte selbst statt eines weit entfernten Icons. Bei
      Multiple-Choice zusätzlich mit einer dünnen Fortschrittslinie, die
      eine automatische Weiterleitung ankündigt (abbrechbar per Klick) -
      bei Freitext bewusst ohne Automatik, weil das KI-Feedback erst
      gelesen werden soll. */

.kopf.kopf-uebung {
  background: linear-gradient(120deg, var(--blue) 0%, #1e3a8a 100%);
}

.historie-start-button {
  margin: 14px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: white;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
}

.historie-start-button:hover {
  background: #1d4ed8;
}

.historie-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.historie-neu-laden-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.historie-neu-laden-button:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: var(--shadow-hover);
}

.historie-neu-laden-icon {
  flex-shrink: 0;
}

/* Volle 360°-Drehung bei jedem Klick (per JS kurz angehängte Klasse, siehe
   app.js) statt der alten reinen Hover-Drehung - fühlt sich wie eine echte
   "neu laden"-Aktion an statt einer Spielerei. */
@keyframes historie-icon-dreht-sich {
  to { transform: rotate(360deg); }
}

.historie-neu-laden-icon.dreht-sich {
  animation: historie-icon-dreht-sich 0.5s ease;
}

/* Scoreboard (11.07.2026, drittes Feedback: ersetzt den reinen
   Fließtext-Fortschritt "Du hast schon X ... gemacht", der Max zu "billig"
   wirkte). Angelehnt an eine Stadion-Anzeigetafel: dunkles Ziffernfeld mit
   fetten, monospaced Zahlen in einem umrahmten Kasten (gleiche Bauart wie
   die Frage-Karten), die Zahl "wippt" kurz per Flip-Animation, sobald sie
   sich ändert (Klasse ".aktualisiert", per JS in
   "aktualisiereHistorieFortschrittText" gesetzt). Zeigt bewusst den
   Sitzungs-Fortschritt ("Heute geübt") groß an, der Gesamt-Stand seit
   Beginn steht klein daneben. */
.historie-scoreboard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px 16px;
  margin: 14px 0 0;
}

.historie-scoreboard-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.historie-scoreboard-label {
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.historie-scoreboard-gesamt-hinweis {
  font-size: 0.78rem;
  color: var(--muted);
}

.historie-scoreboard-anzeige {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.historie-scoreboard-feld {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  border-radius: var(--radius-sm);
  padding: 10px 8px 8px;
}

.historie-scoreboard-trenner {
  width: 1px;
  background: var(--border);
  margin: 4px 0;
}

.historie-scoreboard-ziffer {
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  color: #f8fafc;
  display: inline-block;
}

.historie-scoreboard-ziffer-richtig {
  color: #4ade80;
}

.historie-scoreboard-ziffer-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* Flip-Effekt (kurzes Kippen um die X-Achse, wie eine Anzeigetafel-Klappe),
   spielt genau einmal ab, sobald sich die jeweilige Zahl ändert. */
@keyframes historie-scoreboard-flip {
  0% { transform: rotateX(0deg); }
  45% { transform: rotateX(90deg); }
  55% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

.historie-scoreboard-ziffer.aktualisiert {
  animation: historie-scoreboard-flip 0.5s ease;
}

.frage-karte-historie {
  margin-top: 16px;
}

/* "Nächste Frage"-Button, wird nach dem Beantworten direkt in die
   Frage-Karte eingehängt (siehe app.js "zeigeHistorieWeiterButton"). */
.historie-weiter-button {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 10px;
  background: var(--blue);
  color: white;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.historie-weiter-button:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* Dünne, von rechts nach links schrumpfende Linie unten am Button - zeigt
   die automatische Weiterleitung an (nur bei Multiple-Choice-Fragen, siehe
   app.js). Start-Zustand hier "scaleX(1)"; app.js setzt den Ziel-Zustand
   ("scaleX(0)") einen Frame später, damit der Browser die CSS-Transition
   tatsächlich abspielt statt direkt im Endzustand zu starten. */
.historie-weiter-fortschritt {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  transform-origin: left;
  transform: scaleX(1);
}

/* ---------- Footer / Rechtliches (12.07.2026) ---------- */

.fuss {
  max-width: 620px;
  margin: 32px auto 0;
  padding: 0 18px 24px;
  text-align: center;
}

.fuss-inhalt {
  font-size: 0.8rem;
  color: var(--muted);
}

.fuss-inhalt a {
  color: var(--muted);
  text-decoration: none;
}

.fuss-inhalt a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.fuss-trenner {
  margin: 0 8px;
}

@media (min-width: 760px) {
  .fuss {
    max-width: 920px;
  }
}

.rechtstext-card {
  text-align: left;
  line-height: 1.6;
}

.rechtstext-card h2 {
  font-family: var(--font-titel);
  font-size: 1rem;
  margin: 22px 0 8px;
}

.rechtstext-card h2:first-of-type {
  margin-top: 4px;
}

.rechtstext-card p {
  margin: 0 0 12px;
  font-size: 0.92rem;
}

.rechtstext-card .hinweis {
  margin-top: 20px;
}

/* ---------- "Warum?"-Erklärpopup (Explain-my-answer, 12.07.2026) ---------- */
/* KI-generierte Kurzerklärung (Gemini), erscheint als Button unter bereits
   beantworteten Fragen (egal ob gerade eben oder beim erneuten Laden der
   Seite) - siehe app.js "oeffneErklaerung"/"baueWarumButton". */

.warum-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  margin-top: 10px;
  transition: border-color 0.15s, background 0.15s;
}

.warum-button:hover {
  border-color: var(--blue);
  background: var(--bg-end);
}

.warum-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.erklaerung-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

/* Gleiche Falle wie bei ".freitext-lade-hinweis"/".angemeldet-leiste" weiter
   oben: ohne diese Zeile würde die "display: flex"-Regel oben das
   HTML-"hidden"-Attribut überschreiben und das Popup wäre die ganze Zeit
   sichtbar. */
.erklaerung-overlay[hidden] {
  display: none;
}

.erklaerung-popup {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  max-width: 460px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px 22px 22px;
}

.erklaerung-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.erklaerung-kopf h3 {
  font-family: var(--font-titel);
  font-size: 1.05rem;
  margin: 0;
}

.erklaerung-schliessen-button {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--bg-end);
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.erklaerung-schliessen-button:hover {
  background: var(--red-light);
  color: var(--red);
}

.erklaerung-inhalt {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text);
}

.erklaerung-inhalt p {
  margin: 0;
}

.erklaerung-lade-hinweis {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-style: italic;
}

.erklaerung-fehler {
  color: var(--red);
}

/* ---------- Video-Fragetyp (12.07.2026) ---------- */
/* Datenschutzfreundlicher Modal-first-Ablauf: erst ein lokaler Platzhalter,
   das YouTube-iframe (youtube-nocookie.com) lädt erst nach Klick und direkt
   in der Großansicht - siehe src/video-player.js. */

.video-einbettung {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-karten-aktionen {
  display: flex;
  justify-content: flex-end;
}

.video-info-button {
  min-height: 40px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--blue);
  padding: 7px 13px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.video-info-button:hover,
.video-info-button:focus-visible {
  border-color: var(--blue);
  background: var(--bg-end);
}

.video-info-panel {
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--bg-end);
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.5;
}

.video-info-panel[hidden] {
  display: none;
}

.video-info-panel p {
  margin: 0;
}

.video-info-panel p + p {
  margin-top: 8px;
}

.video-info-panel .video-info-titel {
  margin-top: 12px;
  font-weight: 750;
  color: var(--text);
}

.video-info-panel .video-info-titel:first-child {
  margin-top: 0;
}

.video-info-zeit {
  font-weight: 700;
}

.video-info-fallback {
  color: var(--muted);
  font-size: 0.76rem;
}

/* Platzhalter und Player bekommen jeweils ihre eigene 16:9-Box, statt dass
   ".video-einbettung" selbst per aspect-ratio begrenzt ist. */
.video-platzhalter {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  border: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
  padding: 16px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
}

.video-platzhalter:disabled {
  cursor: default;
  opacity: 0.85;
}

.video-platzhalter-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: background 0.15s, transform 0.15s;
}

.video-platzhalter:hover .video-platzhalter-icon {
  background: var(--marke);
  transform: scale(1.06);
}

.video-platzhalter-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.video-platzhalter-hinweis {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  max-width: 260px;
  text-align: center;
}

/* Nachbesserung (13.07.2026): "bereits angesehen"-Zustand, damit zwei
   Video-Fragen hintereinander sich optisch unterscheiden, statt beide
   identisch als schwarze Box mit "▶" dazustehen (Max' gemeldete
   Verwechslungsgefahr, besonders nach Hoch/Quer-Drehen auf dem Handy).
   Dezent anderer Verlauf (etwas grünlicher, klar erkennbar beim schnellen
   Scrollen) statt komplett neuer Farbwelt - bleibt trotzdem eindeutig
   ".video-platzhalter" zugehörig. */
.video-platzhalter-angesehen {
  background: linear-gradient(160deg, #1e2f28 0%, #0f1f19 100%);
}

.video-platzhalter-fehler {
  border: 2px solid rgba(248, 113, 113, 0.8);
  background: linear-gradient(160deg, #3b2024 0%, #211014 100%);
}

.video-platzhalter-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(34, 197, 94, 0.22);
  border: 1px solid rgba(34, 197, 94, 0.55);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #86efac;
  letter-spacing: 0.02em;
}

/* Bühne aus Player und externer Bedienleiste. Die ganze Bühne wird beim
   Vergrößern verschoben; der YouTube-Player wird dabei nicht neu geladen. */
.video-spieler-buehne {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-spieler-halter {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: 200px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
}

.video-spieler-halter iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* YouTubes Nutzungsregeln untersagen eigene Overlays vor dem eingebetteten
   Player. Deshalb liegen Play/Pause und Vergrößern in einer echten Leiste
   darunter statt als transparente Klickschicht auf dem Video. */
.video-bedienleiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.video-abspiel-button {
  min-height: 42px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 7px;
}

.video-abspiel-button:hover {
  border-color: var(--blue);
  background: var(--bg-end);
}

.video-abspiel-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.video-abspiel-button.laeuft {
  border-color: var(--blue);
  color: var(--blue);
}

.video-status {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.video-status[hidden] {
  display: none;
}

.video-reset-button {
  min-height: 42px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--blue);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.video-button-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1em;
  line-height: 1;
}

.video-reset-button:hover {
  border-color: var(--blue);
  background: var(--bg-end);
}

.video-reset-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

/* Modal-first-Großansicht: eigenes Overlay statt YouTubes nativem
   Vollbild-Button (den wir per "fs: 0" bewusst abschalten). Der Player
   wird direkt hier aufgebaut und muss nicht zwischen Karte und Dialog
   verschoben werden.
   Die Größe von ".video-gross-spieler-halter" reagiert rein über CSS
   automatisch auf Drehung des Handys: die Breite ist das Minimum aus 94%
   der Viewport-Breite UND der aus 94% der Viewport-HÖHE abgeleiteten
   16:9-Breite - im Hochformat begrenzt meist die Breite, im Querformat
   (mehr Höhe frei) wird das Video automatisch entsprechend größer und
   breiter. Kein eigener "orientationchange"-JS-Handler nötig. */
.video-gross-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 10, 20, 0.86);
}

.video-gross-overlay[hidden] {
  display: none;
}

body.video-dialog-offen {
  overflow: hidden;
}

/* ---------- Rueckfrage vor dem Verlassen des Quiz ----------

   Max am 03.09.2026: "das find ich gut, dass da ein Hinweis kommt, wenn
   man das Quiz verlaesst, dass ungespeicherte Antworten verschluckt
   werden."

   Bewusst dieselbe Formsprache wie die Video-Grossansicht direkt darueber:
   dunkle Flaeche, eine Karte darin, zwei runde Knoepfe. Ein zweites
   Fensterdesign auf derselben Seite waere nur mehr zu lernen.

   Der sichere Knopf ("Weiter beantworten") traegt die kraeftige Farbe und
   bekommt den Fokus. Wer versehentlich die Eingabetaste drueckt, bleibt
   damit im Quiz. Beschriftet sind beide mit dem, was sie tun - "OK" und
   "Abbrechen" sagen an dieser Stelle nichts. */

.verlassen-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 10, 20, 0.86);
}

.verlassen-overlay[hidden] {
  display: none;
}

body.verlassen-dialog-offen {
  overflow: hidden;
}

.verlassen-karte {
  width: min(440px, 100%);
  border-radius: var(--radius-sm);
  background: linear-gradient(155deg, #17243a 0%, #0f172a 100%);
  color: #fff;
  padding: 24px 22px;
  text-align: center;
}

.verlassen-karte h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.verlassen-karte p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  line-height: 1.55;
}

.verlassen-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.verlassen-knopf {
  min-height: 44px;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.verlassen-bleiben {
  border: 1px solid var(--marke);
  background: var(--marke);
  color: #fff;
}

.verlassen-gehen {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.verlassen-knopf:focus-visible {
  outline: 3px solid var(--karte-gelb);
  outline-offset: 2px;
}

.video-gross-inhalt {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.video-gross-spieler-halter {
  position: relative;
  /* 84vh statt 94vh (10.08.2026, Max' Meldung): Im Querformat am Handy war
     das Video zwar schön groß, füllte aber die ganze Höhe - der
     Schließen-Knopf darüber lag dadurch außerhalb des Sichtbereichs und man
     musste das Gerät zurückdrehen, um ihn zu treffen. Die etwas kleinere
     Begrenzung kostet kaum Bildgröße und lässt oben Platz für die
     Bedienung. */
  width: min(94vw, calc((84vh - 58px) * 16 / 9));
  /* Der Schließen-Knopf bleibt in einer eigenen Zone oberhalb des Players.
     So überdeckt keine eigene Bedienfläche das YouTube-iframe. */
  margin-top: 56px;
}

.video-gross-spieler-halter .video-spieler-buehne {
  width: 100%;
}

.video-dialog-sitzung {
  width: 100%;
}

.video-ladeanzeige {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 650;
}

.video-dialog-karte {
  aspect-ratio: 16 / 9;
  min-height: 240px;
  border-radius: var(--radius-sm);
  background: linear-gradient(155deg, #17243a 0%, #0f172a 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
}

.video-dialog-karte-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #86efac;
  font-size: 1.55rem;
  font-weight: 800;
}

.video-dialog-karte h3,
.video-dialog-karte p {
  margin: 0;
}

.video-dialog-karte p {
  max-width: 440px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.88rem;
  line-height: 1.5;
}

.video-dialog-karte-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.video-dialog-primaer-button,
.video-dialog-sekundaer-button {
  min-height: 44px;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.video-dialog-primaer-button {
  border: 1px solid var(--marke);
  background: var(--marke);
  color: #fff;
}

.video-dialog-sekundaer-button {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.video-gross-schliessen-button {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.video-gross-schliessen-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ---------- Vereinskennung / Gast-Zugang (13.07.2026) ---------- */

/* Reiner Text-Link im Button-Gewand (z.B. "Kennung nicht bekannt? Als Gast
   weiter", "Mehr Infos beim SVFD") - bewusst ohne Rahmen/Hintergrund, um sich
   klar vom primären "Los geht's"-Button und vom umrahmten
   ".sekundaer-button" abzusetzen. */
.linktext-button {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 6px 0 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.linktext-button:hover {
  color: var(--green-dark);
}

.linktext-button[hidden] { display: none; }

#kennung-hinweis.hinweis-fehler {
  color: var(--red);
}

#kennung-hinweis.hinweis-erfolg {
  color: var(--green-dark);
}

#mitglied-bereich,
#gast-bereich {
  margin-top: 4px;
}

.gast-kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 4px 4px 0;
  margin-bottom: 4px;
}

#gast-fortschritt-anzeige {
  font-weight: 700;
  color: var(--green-dark);
}

.interesse-optionen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

/* ---------- Feedback-Runde 2 zu Vereinskennung/Gast-Zugang (13.07.2026) ---------- */

/* Vereinskennung wie ein Passwort behandeln (Max' Wunsch: "ist ja irgendwo
   trotzdem ein Passwort") - Eingabefeld + Augen-Button zum kurzzeitigen
   Aufdecken in einem gemeinsamen, relativ positionierten Wrapper. */
.kennung-eingabe-wrapper {
  position: relative;
}

.kennung-eingabe-wrapper input {
  padding-right: 44px;
}

.auge-button {
  position: absolute;
  top: 0;
  right: 2px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  display: grid;
  place-items: center;
}

.auge-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auge-button:hover {
  color: var(--text);
}

/* Layout-Korrektur (Max' Feedback): "Weiter"-Button UND der Gast-Link
   standen wegen ihres jeweils inline-artigen "display" nebeneinander statt
   untereinander, sobald der (anfangs versteckte) Hinweis-Absatz dazwischen
   keinen Platz beanspruchte. ":not([hidden])" statt einer zusätzlichen
   "[hidden] { display:none }"-Gegenregel, um genau die schon dreimal in
   diesem Projekt aufgetretene "eigene display-Regel überschreibt das
   hidden-Attribut"-Falle von vornherein zu vermeiden. */
#kennung-weiter-button:not([hidden]) {
  display: flex;
  justify-content: center;
  width: 100%;
}

#gast-wechsel-button:not([hidden]) {
  display: block;
  width: 100%;
  text-align: center;
  margin: 4px 0 14px;
}

/* ---------- Login-Karte: freundlicher Einstieg (07.08.2026) ---------- */
/* Vorher stand auf der Startseite ohne jede Erklärung ein Passwortfeld.
   Für Schiedsrichter, die die Seite zum ersten Mal sehen (und beim Vorführen
   im Team), ist das unnötig abweisend. Ein kurzer Einleitungssatz erklärt
   deshalb den nächsten Schritt, ohne die Startkarte mit Werbetext zu füllen. */
.login-einleitung {
  margin: 0 0 20px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ============================================================
   Barrierefreiheit / WCAG-Grundlagen (07.08.2026, Max' Wunsch)

   Bewusst als Grundausstattung angelegt, nicht als vollständige
   WCAG-2.2-AA-Konformität - das wäre eine eigene, größere Runde mit
   echtem Test per Screenreader. Was hier drin ist, deckt die Punkte ab,
   die im Alltag am meisten bringen und ohne Umbau machbar waren:
     1.4.1 Nicht allein über Farbe informieren (✓/✗ bei den Antworten)
     2.1.1 Bedienbarkeit per Tastatur
     2.4.7 Sichtbarer Fokus
     2.5.5 Ausreichend große Klickflächen
     2.3.3 Animationen abschaltbar
   ============================================================ */

/* Sichtbarer Fokusrahmen für Tastatur-Navigation. ":focus-visible" statt
   ":focus", damit der Rahmen nur bei Tastaturbedienung erscheint und nicht
   nach jedem Mausklick stehen bleibt. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Die Antwortmöglichkeiten sind <label>-Elemente - der Fokus liegt technisch
   auf dem Radio darin. Damit trotzdem die ganze Zeile hervorgehoben wird
   (und nicht nur der kleine Kreis), wird der Rahmen ans Label durchgereicht. */
.option:has(input[type="radio"]:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Mindestgröße für Klick-/Tippflächen (WCAG 2.5.5: 44x44 px empfohlen).
   Betrifft vor allem die kleinen runden Symbolknöpfe (Auge, Vorlesen). */
.auge-button,
.vorlesen-button,
.video-abspiel-button {
  min-width: 44px;
  min-height: 44px;
}

/* Wer im Betriebssystem "Bewegung reduzieren" eingeschaltet hat, bekommt
   keine Übergänge und keine Animationen - relevant u.a. bei Migräne und
   vestibulären Beschwerden. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Nur für Screenreader sichtbarer Text - für Zusatzinformationen, die
   optisch schon aus dem Zusammenhang hervorgehen. */
.nur-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Freitext: Zwischenstufe "teilweise richtig" (07.08.2026) ----------
   Max' Beobachtung: Wer den Grundgedanken getroffen, aber z.B. die
   Spielfortsetzung vergessen hat, bekam bisher dieselbe rote Rückmeldung wie
   jemand mit einer komplett falschen Antwort - das entmutigt unnötig und ist
   sachlich ungenau. Orange als eigene Stufe dazwischen. Gewertet wird die
   Antwort weiterhin als nicht bestanden. */
.feedback.teilweise {
  color: #92400e;
  background: var(--amber-light);
}
.freitext-ergebnis-kopf.teilweise {
  color: #92400e;
}

/* ============================================================
   Menü rechts oben (07.08.2026, Max' Wunsch)

   Die Seite soll perspektivisch eine richtige Schiedsrichter-Startseite
   werden (Stadtverband, Verein, DFBnet), ohne dass beim Anmelden schon
   alles im Weg steht - deshalb ein Menüknopf statt einer Navigationsleiste.
   ============================================================ */

/* Der Menü-Knopf sitzt absolut in der oberen rechten Ecke des Kopfbereichs
   statt im Textfluss (07.08.2026, nach dem Browsertest): im Flex-Fluss nahm
   er der Überschrift so viel Platz weg, dass "Schiri-Quiz der Woche" auf dem
   Handy zweizeilig umbrach und der Untertitel abgeschnitten wurde. */
.kopf-menue {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
}

/* Heim-Knopf (18.08.2026): ersetzt das frühere Klappmenü an derselben
   Stelle. Max' Begründung: Auf der Startseite stehen ohnehin alle
   Verlinkungen - ein zweites Menü hier wäre dieselbe Navigation ein
   zweites Mal. Wichtig war ihm nur, dass man aus dem Quiz überhaupt
   wieder herausfindet.

   Übernimmt bewusst die Maße des alten Knopfes (44 px, Ecke oben rechts),
   damit der Kopfbereich unverändert bleibt und "Schiri-Quiz der Woche"
   weiterhin einzeilig passt. */
.heim-knopf {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  font: 650 .88rem/1 var(--font-text, inherit);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.heim-knopf:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .45);
}

.heim-knopf:focus-visible {
  outline: 3px solid var(--karte-gelb);
  outline-offset: 2px;
}

/* Bezugspunkt für die absolute Positionierung + Platz, damit der Text nicht
   unter den Knopf läuft. */
.kopf-titelzeile {
  position: relative;
  padding-right: 56px;
}

/* "display:flex" + "place-items:center" (07.08.2026): vorher sass das
   ☰-Zeichen sichtbar nach rechts unten versetzt im Knopf - ein Button
   zentriert seinen Textinhalt nicht zuverlässig, sobald Schriftgröße und
   Knopfgröße auseinanderliegen. */
.menue-button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.menue-button:hover {
  background: rgba(255, 255, 255, 0.28);
}
.menue-button[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.32);
}

.menue-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: min(300px, calc(100vw - 32px));
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.menue-panel[hidden] {
  display: none;
}

.menue-titel {
  margin: 6px 0 4px;
  padding: 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.menue-eintrag {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.menue-eintrag:hover {
  background: var(--bg-end);
}
.menue-eintrag strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}
.menue-eintrag small {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
}
.menue-symbol {
  font-size: 1.15rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

/* Noch nicht verlinkte Einträge: sichtbar, aber klar als "kommt noch"
   erkennbar - besser als ein Link, der ins Leere führt. */
.menue-eintrag.deaktiviert {
  opacity: 0.5;
  cursor: default;
}
.menue-eintrag.deaktiviert:hover {
  background: transparent;
}

.menue-fusszeile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 4px 8px 2px;
}
.menue-fusszeile a {
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
}
.menue-fusszeile a:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* Der "Weiter"-Knopf unter der Vereinskennung ist auf der Startseite die
   eigentliche Hauptaktion - als heller Umriss-Button ging er unter
   (07.08.2026, Max: "sieht noch leer und lasch aus"). Deshalb hier gefüllt
   und über die volle Breite, während die anderen "sekundaer-button" im
   Projekt unverändert bleiben. */
#kennung-weiter-button,
#mitglied-weiter-button {
  display: flex;
  width: 100%;
  justify-content: center;
  background: var(--marke);
  border-color: var(--marke);
  color: #fff;
  padding: 12px 16px;
  font-size: 0.92rem;
  margin-top: 4px;
}
#kennung-weiter-button:hover,
#mitglied-weiter-button:hover {
  background: var(--marke-dunkel);
  border-color: var(--marke-dunkel);
  color: #fff;
}

/* Startgrafik auf der Anmeldekarte (07.08.2026). Ersetzt das kleine
   Emoji-Rundicon - die Karte wirkte darüber sehr leer. Das SVG bringt seine
   eigene dunkle Fläche mit und greift damit den Kopfbereich auf, sodass die
   Seite als Ganzes zusammenhängt. */
.start-grafik {
  margin: -4px 0 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
}
.start-grafik svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Offene Fragen reagieren dezent auf den Mauszeiger - macht die Liste
   lebendiger, ohne aufdringlich zu sein. Beantwortete Karten bleiben
   bewusst ruhig (sie sind ja erledigt). */
.frage-karte:not(.beantwortet):hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* Menü-Einträge lebendiger (07.08.2026, Max: "dass die Menüpunkte belebter
   aussehen"): Symbol auf eigener runder Fläche, Eintrag rückt beim
   Darüberfahren leicht ein. */
.menue-symbol {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--marke-lighter);
  font-size: 1rem;
}
.menue-eintrag {
  transition: background 0.15s, transform 0.15s;
}
.menue-eintrag:hover {
  background: var(--marke-lighter);
  transform: translateX(2px);
}
.menue-eintrag:hover .menue-symbol {
  background: var(--marke);
}

/* Regel-Badge mit rein dekorativem Symbol. Das Zeichen steht im HTML mit
   aria-hidden, damit Screenreader nur "Regel …" und nicht "Paragraph Regel …"
   ansagen. */
.badge-symbol {
  font-weight: 800;
  opacity: 0.55;
}

/* Maskierte Eingabefelder ohne type="password" (10.08.2026).
   Grund: Safari/iOS blenden bei jedem echten Passwortfeld ungefragt den
   "Starkes Passwort verwenden"-Vorschlag ein und ignorieren dabei
   autocomplete="off". Für eine vierstellige Vereins-PIN ist dieses Fenster
   nur verwirrend - besonders für ältere Nutzer.
   Diese Felder sind deshalb normale Textfelder und werden nur optisch
   maskiert. Fällt der Browser bei "-webkit-text-security" durch, schaltet
   app.js sie automatisch wieder auf type="password" um. */
input.maskiert {
  -webkit-text-security: disc;
  text-security: disc;
}

/* Beim Anzeigen über das Auge-Symbol wird die Maskierung aufgehoben. */
input.maskiert.sichtbar {
  -webkit-text-security: none;
  text-security: none;
}

/* ---------- Video-Großansicht: kompakte Bedienung (25.08.2026) ----------
   Die eigenen Schaltflächen liegen außerhalb des YouTube-Players. Im flachen
   Handy-Querformat werden sie zu einer schmalen Symbolleiste rechts; dadurch
   bleibt das Video groß, ohne YouTubes Oberfläche mit einer Klickschicht zu
   überdecken. */
.video-gross-overlay .video-gross-schliessen-button {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 5;
  align-self: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 16px;
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
}

/* Die externe Bedienleiste bleibt auch in der Großansicht gut erreichbar,
   ohne irgendeinen Teil des YouTube-Players zu überdecken. */
.video-gross-spieler-halter .video-bedienleiste {
  padding-bottom: env(safe-area-inset-bottom);
}

.video-gross-spieler-halter .video-abspiel-button,
.video-gross-spieler-halter .video-reset-button {
  min-height: 46px;
  padding: 10px 18px;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.video-gross-spieler-halter .video-abspiel-button:hover,
.video-gross-spieler-halter .video-reset-button:hover {
  background: rgba(15, 23, 42, 0.92);
}

/* Im flachen Querformat zusätzlich Höhe sparen. */
@media (orientation: landscape) and (max-height: 500px) {
  .video-gross-overlay {
    padding: 0;
    align-items: stretch;
  }

  .video-gross-inhalt {
    height: 100dvh;
    gap: 0;
  }

  .video-gross-spieler-halter {
    width: 100vw;
    height: 100dvh;
    margin-top: 0;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    box-sizing: border-box;
  }

  .video-gross-spieler-halter .video-dialog-sitzung {
    height: 100%;
  }

  .video-gross-spieler-halter .video-spieler-buehne {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }

  .video-gross-spieler-halter .video-spieler-halter {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: min(100%, calc((100dvh - 12px) * 16 / 9));
    min-height: 0;
  }

  .video-gross-spieler-halter .video-bedienleiste {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 58px 0 max(2px, env(safe-area-inset-bottom));
    gap: 8px;
  }

  .video-gross-overlay .video-gross-schliessen-button {
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .video-gross-spieler-halter .video-abspiel-button,
  .video-gross-spieler-halter .video-reset-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .video-gross-overlay .video-button-beschriftung {
    display: none;
  }

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

  .video-gross-spieler-halter .video-dialog-karte {
    width: min(calc(100vw - 70px), calc((100dvh - 12px) * 16 / 9));
    min-height: 0;
    max-height: calc(100dvh - 12px);
    margin-right: 58px;
    padding: 18px;
  }
}

/* ---------- Kopfzeile je Frage (10.08.2026) ----------
   Max' Wunsch nach einer klareren Trennung: Jede Frage bekommt über dem
   Fragetext eine eigene, abgesetzte Zeile mit Nummer und Kennzeichen. Damit
   ist beim Scrollen sofort erkennbar, wo eine neue Frage beginnt - vorher
   ging die Badge-Reihe optisch im Fragetext auf. */
.frage-badges {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.frage-karte.beantwortet .frage-badges {
  border-bottom-color: #dcdfe4;
}

/* Die Nummer wird zum wichtigsten Element der Kopfzeile - sie ist der
   Ankerpunkt, über den im Team gesprochen wird ("bei F3 war ich unsicher"). */
.badge.frage-nummer {
  font-size: 0.8rem;
  padding: 4px 11px;
}

/* ============================================================
   Orange als eigener Zustand mit zweitem Versuch (11.08.2026)

   Die Zwischenstufe von oben wird zum echten Zustand: Wer den Kern
   getroffen, aber einen zwingenden Punkt vergessen hat, bekommt genau eine
   Ergänzung. Die Karte bleibt so lange offen und deutlich orange.

   Farbe kommuniziert hier bewusst nicht allein - Symbol ("🟠"), Überschrift
   ("Wartet auf deine Ergänzung") und der Hinweistext sagen dasselbe noch
   einmal in Worten, für alle, die Orange und Rot nicht unterscheiden.
   ============================================================ */
.frage-karte.teilweise-karte {
  border-color: #fcd34d;
  box-shadow: inset 4px 0 0 var(--karte-orange);
  /* Bewusst NICHT ausgegraut wie die anderen beantworteten Karten - hier
     ist ja noch etwas zu tun. */
  opacity: 1;
}

.frage-karte.teilweise-karte::before {
  background: var(--karte-orange);
}

.beantwortet-tag.teilweise {
  background: var(--amber-light);
  color: #92400e;
}

.beantwortet-ergebnis.teilweise {
  background: var(--amber-light);
  color: #92400e;
}

.freitext-ergaenzung {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  background: color-mix(in srgb, var(--amber-light) 45%, transparent);
}

.freitext-ergaenzung.abgeschlossen {
  border-color: var(--border);
  background: transparent;
}

.freitext-nachfrage {
  margin: 0 0 6px;
  font-weight: 600;
  line-height: 1.45;
  color: #92400e;
}

.freitext-ergaenzung-hinweis {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
}

@media (prefers-reduced-motion: no-preference) {
  .frage-karte.teilweise-karte {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
}

/* Falls beide Klassen gleichzeitig gesetzt sein sollten (z.B. weil ein alter
   Zwischenstand nicht abgeräumt wurde), gewinnt das Endergebnis - orange ist
   immer nur ein Zwischenzustand. */
.feedback.teilweise.richtig,
.beantwortet-ergebnis.teilweise.richtig {
  color: var(--green-dark, #166534);
  background: var(--green-light, #dcfce7);
}

/* ============================================================
   Rueckmeldung zu einer Frage ("Passt was nicht?", 03.09.2026)
   ============================================================
   Max: "Ich wuerde keinen unaufdringlichen Link machen, sondern so einen
   Button mit einem Fragezeichen oder Feedback - ein Button sieht geiler
   aus als so ein Text mit Hyperlink."

   Der Knopf steht BEI DER LOESUNG, nicht an der offenen Frage - die
   Begruendung steht im Kopf von src/features/frage-melden.js. Damit die
   Frage nicht ueberladen wirkt (Max' ausdrueckliche Sorge), steht dort
   genau ein Knopf, direkt neben dem schon vorhandenen "Warum?".

   Das Fenster uebernimmt die Formsprache des Erklaerungs-Popups (helle
   Karte auf dunkler Flaeche) und nicht die der Verlassen-Rueckfrage: Das
   hier ist ein Formular zum Lesen und Tippen, keine Warnung.
   ============================================================ */

.loesung-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* Der "Warum?"-Knopf bringt seinen eigenen Abstand mit. In der Zeile
   wuerde er die beiden Knoepfe gegeneinander verschieben.

   Usability-Test Runde 1, in Runde 3 bestaetigt: Steht die Antwort auf
   "falsch", schiesst die Frustration hoch und man sucht eine BEGRUENDUNG -
   nicht den Meldeweg. Vorher standen beide Knoepfe nebeneinander in einer
   Zeile, und ausgerechnet der kleinere war die Erklaerung: "Warum?" war
   rund 30 px hoch und nur ein Umriss, "Feedback geben" 44 px mit Icon. Das
   Gewicht zeigte damit auf das Beschwerdeformular.

   Ab jetzt steht die Erklaerung allein in der ersten Zeile, in voller
   Breite und gefuellt - sie ist das Erste nach dem Ergebnis. Geaendert sind
   nur Reihenfolge und Gewichtung; wie die Erklaerung entsteht, bleibt
   unberuehrt (src/ui/explanation-dialog.js). */
.loesung-aktionen .warum-button {
  flex: 1 0 100%;
  justify-content: center;
  /* Vorher ergab sich die Hoehe allein aus 7 px Innenabstand und 0,82 rem
     Schrift - rund 30 px und damit unter der Mindest-Trefferflaeche. */
  min-height: 44px;
  margin-top: 0;
  border-color: var(--blue);
  font-size: 0.92rem;
  font-weight: 700;
}

/* Voll ausgefuellt genau dort, wo der Test die Frustration gemessen hat:
   bei falscher (und bei teilweise richtiger) Antwort. Auf richtig
   beantworteten Karten bleibt derselbe Knopf ein Umriss - sonst leuchtete
   auf einer abgearbeiteten Wochenliste hinter jeder Frage ein blauer
   Balken, und die Betonung waere wieder keine. */
.frage-karte.falsch-karte .loesung-aktionen .warum-button,
.frage-karte.teilweise-karte .loesung-aktionen .warum-button {
  background: var(--blue);
  color: #fff;
}

.loesung-aktionen .warum-button:hover {
  border-color: var(--blue-dark);
  background: var(--blue-lighter);
}

.frage-karte.falsch-karte .loesung-aktionen .warum-button:hover,
.frage-karte.teilweise-karte .loesung-aktionen .warum-button:hover {
  background: var(--blue-dark);
}

.melde-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 44 px ist die kleinste Flaeche, die man auf dem Handy zuverlaessig
     trifft - hier als Mindestmass und nicht als feste Hoehe, damit der
     Knopf bei grosser Schrift mitwaechst. */
  min-height: 44px;
  min-width: 44px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--marke);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.melde-knopf:hover {
  border-color: var(--marke);
  background: var(--marke-lighter);
}

.melde-knopf:focus-visible {
  outline: 3px solid var(--karte-gelb);
  outline-offset: 2px;
}

/* Gegenstueck zur Aufwertung des "Warum?"-Knopfes: Der Meldeweg bleibt
   vollstaendig erhalten, steht aber jetzt in der zweiten Zeile und ohne
   sichtbaren Rahmen da. Leiser heisst ausdruecklich nicht kleiner - die
   44 px Trefferflaeche aus der Grundregel oben bleiben unangetastet
   (WCAG 2.5.5), und beim Ueberfahren/Fokussieren kommt der Rahmen zurueck. */
.loesung-aktionen .melde-knopf {
  border-color: transparent;
  color: var(--muted);
  font-weight: 600;
}

.melde-symbol {
  width: 18px;
  height: 18px;
  line-height: 0;
}

.melde-symbol svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.melde-symbol .melde-symbol-punkt {
  fill: currentColor;
  stroke: none;
}

/* Die Marke an einer schon gemeldeten Frage. Bewusst leise: sie ist eine
   Empfangsbestaetigung, keine Auszeichnung - und sie steht als Wort da,
   nicht als Haekchen. */
.melde-marke {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--marke-lighter);
  color: var(--muted);
  padding: 5px 11px;
  font-size: 0.74rem;
  font-weight: 600;
}

/* Die Bestaetigung direkt nach dem Abschicken. Sie steht in derselben
   Zeile wie der Knopf, hat keinen Schliessen-Knopf und geht nach ein paar
   Sekunden von allein - ein Fenster, das man wegklicken muss, waere genau
   das, was hier gerade abgeschafft wurde. */
.melde-bestaetigung {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 600;
}

.melde-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Ohne diese Zeile schlaegt "display: flex" oben das hidden-Attribut und
   das Fenster stuende die ganze Zeit offen - dieselbe Falle wie beim
   Erklaerungs-Popup. */
.melde-overlay[hidden] {
  display: none;
}

body.melde-dialog-offen {
  overflow: hidden;
}

.melde-karte {
  box-sizing: border-box;
  /* Die eigenen Innenabstaende als Variable, weil die klebende Knopfzeile
     weiter unten genau sie wieder herausrechnen muss. Mobil werden beide
     Werte im @media-Block ueberschrieben. */
  --melde-rand: 22px;
  --melde-rand-unten: 22px;
  width: min(100%, 460px);
  max-height: min(85dvh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 20px 22px 22px;
}

.melde-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Usability-Test Runde 3: "Das Kreuz ist zu klein und sieht anders aus als
   die anderen Schliessen-Knoepfe." Nachgemessen war die Trefferflaeche
   bereits 44 x 44 px - zu klein WIRKTE der Knopf, weil er keine hatte:
   durchsichtiger Grund, nur ein duennes Kreuz. Der Erklaerungs-Dialog
   nebenan zeigt an derselben Stelle einen gefuellten grauen Kreis
   (.erklaerung-schliessen-button). Der Knopf bekommt deshalb dieselbe
   Bauart - Kreisflaeche, gedaempftes Grau, rot beim Ueberfahren - und
   behaelt die 44 px (WCAG 2.5.5). */
.melde-schliessen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-end);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.melde-schliessen:hover { background: var(--red-light); color: var(--red); }
.melde-schliessen:focus-visible {
  outline: 3px solid var(--karte-gelb);
  outline-offset: 1px;
}
.melde-schliessen svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.melde-karte h2 {
  margin: 0;
  font-family: var(--font-titel);
  font-size: 1.05rem;
}

.melde-einleitung {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.melde-kategorien {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  border: none;
}

.melde-kategorien legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}

.melde-kategorie {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 10px;
  min-height: 44px;
  align-content: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
}

.melde-kategorie:hover {
  border-color: var(--marke);
}

.melde-kategorie:focus-within {
  outline: 3px solid var(--karte-gelb);
  outline-offset: 2px;
}

.melde-kategorie-wort {
  font-size: 0.88rem;
  font-weight: 600;
}

.melde-kategorie-hinweis {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.melde-text-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 700;
}

.melde-eingabe[hidden] {
  display: none;
}

.melde-text {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: inherit;
  /* Mindestens 16 px verhindern auf iPhone-Safari den automatischen Zoom
     beim Fokussieren des Textfelds. */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

@media (max-width: 560px) {
  .melde-overlay {
    align-items: flex-end;
    padding: max(12px, env(safe-area-inset-top)) 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: rgba(15, 23, 42, 0.46);
  }

  .melde-karte {
    --melde-rand: 16px;
    --melde-rand-unten: 18px;
    width: 100%;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    border-radius: 20px;
    padding: 16px 16px 18px;
  }

  .melde-einleitung { margin-top: 4px; }
}

.melde-text:focus-visible {
  outline: 3px solid var(--karte-gelb);
  outline-offset: 1px;
}

/* Der Zaehler taucht erst kurz vor der Grenze auf und warnt dann - er
   sperrt nicht. Max: "eine maximale Zeichenanzahl, aber dass da auch
   nicht so richtig gesperrt wird." */
.melde-zaehler {
  margin: 6px 0 0;
  text-align: right;
  color: var(--muted);
  font-size: 0.76rem;
}

.melde-zaehler.zu-lang {
  color: var(--red);
  font-weight: 700;
}

.melde-hinweis {
  margin: 10px 0 0;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--bg-end);
  color: var(--text);
}

.melde-hinweis.melde-fehler {
  background: var(--red-light);
  color: var(--red);
}

.melde-hinweis.melde-erfolg {
  background: var(--green-light);
  color: var(--green-dark);
}

/* Usability-Test Runde 3: "Zum Absende-Knopf muss man scrollen, obwohl
   genug Platz auf dem Bildschirm war." Die Ursache war nicht die
   Fenstergroesse, sondern der Ablauf: Erst mit der Wahl einer Kategorie
   klappt die Texteingabe auf, und sie schiebt die Knopfzeile in einem Zug
   unter den unteren Rand der scrollbaren Karte - sichtbar bleibt nur das
   Textfeld, in das der Fokus gerade gesprungen ist. Wer tippt, sieht also
   nie, wohin er als Naechstes soll.

   Die Zeile klebt deshalb am unteren Rand der Karte. "bottom: 0" bezieht
   sich auf den sichtbaren Ausschnitt der Karte; die negativen Aussenabstaende
   ziehen die Zeile bis an deren Innenkanten, damit darunter kein Text
   durchscrollt. */
.melde-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 16px calc(var(--melde-rand) * -1) calc(var(--melde-rand-unten) * -1);
  padding: 12px var(--melde-rand) 14px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
}

.melde-knopf-senden,
.melde-knopf-abbrechen {
  min-height: 44px;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.melde-knopf-senden {
  border: 1px solid var(--marke);
  background: var(--marke);
  color: #fff;
}

.melde-knopf-senden:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.melde-knopf-abbrechen {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
}

.melde-knopf-senden:focus-visible,
.melde-knopf-abbrechen:focus-visible {
  outline: 3px solid var(--karte-gelb);
  outline-offset: 2px;
}

/* ============================================================
   Wegweiser auf den rechtlichen Seiten (12.09.2026)
   ============================================================
   impressum/datenschutz/nutzungsbedingungen laden AUSSCHLIESSLICH diese
   Datei - kein basis.css, kein kopf-fuss.css, kein JavaScript. Der
   Wegweiser steht dort als festes HTML, also braucht er seine paar
   Regeln auch hier. Bewusst eine Dublette und kein gemeinsamer Import:
   ein zweites Stylesheet nur fuer drei Zeilen waere auf jeder dieser
   Seiten ein zusaetzlicher Netzaufruf vor dem ersten Bild. */
.wegweiser { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 18px; }
.wegweiser-zurueck {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 8px 15px 8px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--text); font-weight: 650; font-size: .93rem; text-decoration: none;
}
.wegweiser-pfeil { font-size: 1.25rem; line-height: 1; }
.wegweiser-pfad { display: none; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--muted); }
.wegweiser-pfad li { display: inline; }
.wegweiser-pfad li + li::before { content: "\203A"; margin: 0 7px; color: var(--border); }
.wegweiser-pfad a { color: var(--muted); }
.wegweiser-pfad [aria-current="page"] { color: var(--text); font-weight: 650; }
@media (min-width: 640px) { .wegweiser-pfad { display: block; } }