/* ─────────────────────────────────────────────────────────────────
   Nachtrag zum Stylesheet der Website, für die Teilnahmebestätigung.

   Die Feldstile sind dieselben wie auf der Live-Seite. Sie stehen
   hier bewusst noch einmal, statt aus /live/seite-live.css geladen zu
   werden: die beiden Seiten sollen unabhängig voneinander hochgeladen
   und abgeschaltet werden können. Ändert sich ein Feldstil, ist er an
   beiden 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 ──────────────────────────────────────────────────── */

/* Der Abstand nach oben ist groesser als die uebrigen Abstaende der
   Karte (40px statt 24px, Vorgabe von Volker am 19.09.2026): ueber dem
   Formular steht noch der Satz "Dieses Formular ist nur heute ...
   geoeffnet", und ohne diese Luft klebt das erste Feld daran fest. Die
   Trennung zwischen Lesen und Ausfuellen soll man sehen. */
.datenformular {
  margin-top: var(--space-10);
  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 am einzelnen Feld. */
.feld-meldung {
  font: var(--text-doc-caption);
  color: var(--color-accent-text);
}

/* Sammelmeldung über dem Formular: wer mit Fehlern 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: 480px;
}

/* Erklärender Satz unter einem Feld, ohne Fehlercharakter. */
.feld-hinweis {
  font: var(--text-doc-caption);
  color: var(--text-muted);
  margin: calc(var(--space-4) * -1) 0 0;
  max-width: 480px;
}

/* ── Feldreihen ────────────────────────────────────────────────────
   Straße und Hausnummer, Postleitzahl und Ort stehen nebeneinander:
   so liest sich die Anschrift wie auf einem Briefumschlag, und die
   kurzen Felder bekommen nicht dieselbe Breite wie die langen.

   Unter 520px bricht die Reihe auf eine Spalte um. Nebeneinander wäre
   das Ortsfeld dort nur noch gut hundert Pixel breit. */
.feldreihe {
  display: grid;
  gap: var(--space-5);
  width: 100%;
}

.feldreihe--strasse { grid-template-columns: 1fr 120px; }
.feldreihe--ort     { grid-template-columns: 140px 1fr; }

@media (max-width: 520px) {
  .feldreihe--strasse,
  .feldreihe--ort {
    grid-template-columns: 1fr;
  }
}

/* Postleitzahl: gleiche Zeichenbreite, damit die fünf Ziffern beim Tippen
   nicht wandern. */
#feld-plz {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ── Ankreuzfeld ───────────────────────────────────────────────────
   Ergänzt am 14.09.2026 für den freiwilligen Haken „auch über künftige
   Veranstaltungen informieren".

   Kein nachgebautes Kästchen aus einem <span>: das Ankreuzfeld ist das
   echte Element, nur vergrößert. Ein Nachbau bringt regelmäßig die
   Tastaturbedienung und die Sprachausgabe durcheinander, und beides
   braucht diese Zielgruppe eher mehr als weniger.

   22px statt der browserüblichen 13px, und die Beschriftung ist Teil der
   Klickfläche — auf dem Telefon trifft man sonst daneben. */
.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 Kästchen 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);
}

/* 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;
}

/* ── Übernommen aus seite-bestaetigen.css ──────────────────────── */

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

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

.knopfreihe--luft { margin-top: var(--space-8); }

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

/* 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. 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; }` (Abschnitt Einladungsvideo)
   hat dieselbe Spezifität und gewinnt. Ein Selektor mit einer Klasse mehr
   greift verlässlich, ohne dass die Startseite ihr Raster verliert. */
.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);
  }
}

/* ── Einwilligungsblock, ergänzt am 18.09.2026 ──────────────────────
   Optisch abgesetzt, weil hier ein anderes Thema beginnt: Bis hierhin
   ging es um die Bescheinigung, ab hier um etwas Freiwilliges. Ein
   blosser Abstand haette das nicht getragen — die beiden Haken sahen
   vorher aus wie ein Nachklapp der Anschrift.

   Als <fieldset> mit <legend> und nicht als <div> mit <h2>: Screenreader
   lesen die Legende bei jedem Feld darin mit vor. Wer den E-Mail-Haken
   hoert, hoert „Möchten Sie von uns hören?" dazu und weiss, wofuer das
   Feld da ist. */

.einwilligungen {
  margin: var(--space-6) 0 0;
  padding: var(--space-6);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Ein <fieldset> bringt eigene Voreinstellungen mit, die die
     Formularbreite sprengen wuerden. */
  min-width: 0;
}

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

.einwilligungen-lead {
  font: var(--text-doc-caption);
  color: var(--text-body);
  max-width: 52ch;
  margin: 0;
}

/* Vor- und Nachname nebeneinander, gleiche Breite — anders als bei
   Straße/Hausnummer, wo das Verhältnis bewusst ungleich ist. */
.feldreihe--name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 560px) {
  .feldreihe--name { grid-template-columns: 1fr; }
  .einwilligungen  { padding: var(--space-5); }
}