/* ─────────────────────────────────────────────────────────────────
   Nachtrag zum Stylesheet der Website, für die Videoaufzeichnungen.

   Die Feldstile sind dieselben wie auf der Live-Seite und unter
   /teilnahmebestaetigung. Sie stehen hier bewusst noch einmal, statt
   von dort geladen zu werden: die Bereiche sollen sich unabhängig
   voneinander hochladen und abschalten lassen. Ändert sich ein
   Feldstil, ist er an allen Stellen zu ändern — der Preis für die
   Unabhängigkeit.

   Eigene Datei statt <style> im Dokument, damit die Content-Security-
   Policy der Seite ohne 'unsafe-inline' für Stile auskommt.
   ───────────────────────────────────────────────────────────────── */

button.knopf {
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
}

button.knopf[disabled] {
  cursor: default;
  opacity: 0.72;
}

/* ── Formular ──────────────────────────────────────────────────── */

.datenformular {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  width: 100%;
  max-width: 480px;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.feld-label {
  font: var(--text-doc-label);
  color: var(--text-heading);
}

/* 52px Mindesthöhe wie beim Knopf — für die Zielgruppe ab etwa 50 Jahren
   und für die Bedienung am Telefon. 17px Schrift, weil iOS unter 16px
   beim Fokus in das Feld hineinzoomt und das Layout verspringt. */
.feld-eingabe {
  font: 400 17px/1.4 var(--font-body);
  color: var(--text-heading);
  background: var(--surface-card);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  min-height: 52px;
  width: 100%;
  transition: box-shadow .18s ease;
}

.feld-eingabe::placeholder { color: var(--color-neutral-500); }

.feld-eingabe:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-blue-600);
}

.feld-eingabe:focus-visible {
  outline: 2px solid var(--color-blue-600);
  outline-offset: 2px;
}

.feld-eingabe[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--color-accent-text);
}

/* Meldung über dem Formular: wer mit einem Fehler zurückkommt, liest oben. */
.feld-fehler {
  font: var(--text-doc-body-sm);
  color: var(--color-accent-text);
  background: var(--color-blue-100);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-7) 0 0;
  width: 100%;
  max-width: 560px;
}

/* Der Honigtopf. Nicht display:none und nicht hidden — beides erkennt ein
   Bot am Markup. So steht das Feld im Dokument, ist für Menschen aber
   unerreichbar: außerhalb des Bildes, ohne Fläche, nicht anspringbar. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.knopf-nachsatz {
  font: var(--text-doc-caption);
  color: var(--text-body);
  max-width: 62ch;
  margin-top: var(--space-7);
}

.knopf-nachsatz--dicht { margin-top: 0; }

.fehlercode {
  font: var(--text-ui-2xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: var(--space-8);
}

/* ── Übersicht der Aufzeichnungen ──────────────────────────────────
   Kein Karten-Raster nebeneinander: Die Beiträge haben eine Reihenfolge
   — die des Tages. Eine Liste untereinander behält sie bei, ein Raster
   macht daraus eine Auslage. */

.video-kopf {
  max-width: 760px;
  margin: 0 auto var(--space-9);
  text-align: center;
}

.video-kopf .feld-fehler {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.videoliste {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Drei Spalten: Uhrzeit, Beitrag, Knopf. Die Uhrzeit steht vorn, weil sie
   die Liste ordnet und man einen gesuchten Beitrag darüber wiederfindet. */
.videokarte {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--space-6);
  align-items: center;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  padding: var(--space-6) var(--space-7);
}

/* Noch nicht hochgeladen: sichtbar zurückgenommen, aber lesbar. Die Zeile
   verschwindet nicht — sie sagt, was noch kommt. */
.videokarte--wartet {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border-hairline);
}

.videokarte-zeit {
  font: var(--text-ui-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
}

.videokarte-titel {
  font: var(--text-doc-label);
  color: var(--text-heading);
  margin: 0;
}

.videokarte-wer {
  font: var(--text-doc-caption);
  color: var(--text-body);
  margin: var(--space-2) 0 0;
}

.videokarte-dauer {
  font: var(--text-ui-2xs);
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}

.videokarte-aktion { justify-self: end; }

.videokarte-hinweis {
  font: var(--text-doc-caption);
  color: var(--text-muted);
  white-space: nowrap;
}

.videoliste + .knopf-nachsatz {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-8);
}

/* Unter 720px bricht die Karte auf zwei Zeilen um: oben Uhrzeit und
   Beitrag, darunter der Knopf über die volle Breite. Nebeneinander bliebe
   für den Titel sonst eine Spalte von gut hundert Pixeln. */
@media (max-width: 720px) {
  .videokarte {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }

  .videokarte-aktion {
    justify-self: stretch;
    margin-top: var(--space-3);
  }

  .videokarte-aktion .knopf {
    width: 100%;
    justify-content: center;
  }
}

/* Der Seitenfuß soll am unteren Rand sitzen, auch wenn der Inhalt den
   Bildschirm nicht füllt. Ohne das steht unter dem dunklen Fuß noch ein
   Streifen Seitengrund – die Seite sieht dann abgeschnitten aus. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1 0 auto; }

/* Lesebreite für die Karte des Formulars. Warum das hier nochmal steht,
   obwohl seite.css für .hero-karte--solo schon max-width: 760px vorsieht:
   die spätere Regel `.hero-karte { max-width: none; margin: 0; }` hat
   dieselbe Spezifität und gewinnt. */
.hero .hero-karte--solo {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 460px) {
  .hero-karte .datenformular { max-width: none; }

  .hero-karte button.knopf--gross,
  .hero-karte .knopf--gross {
    width: 100%;
    justify-content: center;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* ── Freiwilliger Haken, ergaenzt am 16.09.2026 ─────────────────────
   Wortgleich uebernommen aus `teilnahmebestaetigung/seite-teilnahme.css`,
   damit derselbe Haken auf beiden Seiten gleich aussieht. Die beiden
   Bereiche teilen sich bewusst keine Datei — sie laufen getrennt, mit
   eigenem Szenario und eigenem shared_secret. Wer hier etwas aendert,
   aendert es dort mit. */

.haken {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  width: 100%;
  max-width: 480px;
}

.haken-schalter {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--color-blue-600);
  cursor: pointer;
  /* Optische Grundlinie: das Kaestchen soll auf der ersten Textzeile
     sitzen, nicht an deren Oberkante kleben. */
  margin-top: 2px;
}

.haken-schalter:focus-visible {
  outline: 2px solid var(--color-blue-600);
  outline-offset: 2px;
}

.haken-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
}

.haken-satz {
  font: var(--text-doc-body-sm);
  color: var(--text-heading);
}

.haken-nachsatz {
  font: var(--text-doc-caption);
  color: var(--text-muted);
}

/* ── Gruppen, Sprungleiste, Folien-Knopf (ergänzt am 30.09.2026) ────
   Die Mediathek ist von sieben auf zwanzig Einträge gewachsen und in
   vier Bereiche geteilt. Die Sprungleiste im Kopf spart auf dem Telefon
   das lange Scrollen bis zu den Praxisräumen. */

.video-sprung {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
  font: var(--text-doc-body-sm);
}

.video-sprung a { color: var(--text-heading); }

.video-gruppe {
  max-width: 860px;
  margin: var(--space-10) auto var(--space-5);
  scroll-margin-top: var(--space-10);
}

.video-gruppe:first-of-type { margin-top: 0; }

/* Zwei Knöpfe untereinander, gleich breit, damit die Spalte ruhig steht. */
.videokarte-aktion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  min-width: 190px;
}

.videokarte-aktion .knopf { justify-content: center; }

.videokarte-aktion .videokarte-hinweis { text-align: center; }

.knopf-klein {
  font: var(--text-ui-2xs);
  opacity: 0.8;
  margin-left: var(--space-2);
}

@media (max-width: 720px) {
  .videokarte-aktion { min-width: 0; }
  .videokarte-aktion .videokarte-hinweis { text-align: left; }
}

/* ── Ruhigere Karten (01.10.2026) ─────────────────────────────────
   Die Knöpfe der Startseite (52px hoch, Schatten) sind für ein
   einzelnes Ziel gebaut. In einer Liste mit 19 Karten und bis zu drei
   Knöpfen je Karte erschlagen sie den Titel. Hier deshalb kompakt, und
   die Bereichsüberschriften eine Stufe kleiner als die Seitenüberschrift. */

.video-gruppe {
  font: var(--text-h3);
  margin: var(--space-11) auto var(--space-6);
}

.video-gruppe:first-of-type { margin-top: var(--space-9); }

.videokarte-aktion {
  min-width: 170px;
  gap: var(--space-2);
}

.videokarte-aktion .knopf {
  min-height: 0;
  padding: var(--space-3) var(--space-6);
  font: var(--text-ui-xs);
  gap: var(--space-2);
  box-shadow: none;
}

.videokarte-aktion .knopf svg { width: 15px; height: 15px; }

.videokarte-aktion .knopf-klein { margin-left: var(--space-1); }

/* Der Sekundärknopf zieht seine Kontur aus dem Schatten, der oben
   abgeschaltet ist; die feine Innenlinie bleibt. */
.videokarte-aktion .knopf--sekundaer { box-shadow: var(--inset-hairline); }