/* ============================================================
   Veranstaltungen: Uebersicht (/veranstaltungen) und Detailseite
   (/veranstaltung/<slug>)
   ============================================================
   Nur ueber $stile auf diesen beiden Seiten geladen. Der Baustein
   "Inhalt links, klebende Beileiste rechts" (.mit-beileiste, .beileiste)
   steht dagegen in add.css - er gehoert dem Designsystem und nicht dieser
   Seite; hier stehen bloss seine Fuellungen.

   Der Verwaltungsteil der Veranstaltungen liegt in verwaltung.css und hat
   mit dieser Datei nichts zu tun.
   ============================================================ */

/* ---------- Filter nach Kategorie ---------- */

.vt-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8); }
.vt-filter a {
  padding: 0.42rem 0.95rem; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft);
  border: 1px solid rgba(26, 57, 65, 0.16); background: var(--white);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.vt-filter a:hover { border-color: rgba(26, 57, 65, 0.34); color: var(--ink); }
.vt-filter a.aktiv { background: var(--ink); border-color: var(--ink); color: var(--text-on-dark); font-weight: 600; }

/* ---------- Terminliste ---------- */

.vt-liste { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }

/* Eine Zeile steht mit ihresgleichen in einem Raster - deshalb --radius und
   nicht --radius-lg. Das Datum bekommt eine feste Spalte, damit die Titel
   aller Zeilen auf einer Kante beginnen.

   230px und nicht mehr die frueheren 190: Der laengste Zeitraum eines Monats
   ("20.-30. September 2026") misst 219px und bricht nirgends um - er darf es
   nicht, sonst stuende die Jahreszahl allein auf der zweiten Zeile. Die
   Spalte muss ihn also tragen. Zeitraeume ueber einen Monatswechsel sind
   laenger, brechen aber am Gedankenstrich; darum kuemmert sich .vt-tag-teil. */
.vt-zeile {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) auto;
  gap: var(--sp-6); align-items: center;
  padding: var(--sp-6); border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--card-line); color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bg-cream .vt-zeile { background: var(--white); }
.vt-zeile:hover { transform: translateY(var(--lift)); border-color: rgba(26, 57, 65, 0.24); box-shadow: var(--shadow); }

/* Die Angebotszeile des unteren Abschnitts ist dieselbe Karte ohne
   Datumsspalte: Eine Veranstaltung, die inhouse oder auf Anfrage buchbar ist,
   hat kein Datum, das dort stehen koennte. */
.vt-angebot { grid-template-columns: minmax(0, 1fr) auto; }
/* Die Kurzbeschreibung ist ein Absatz und kein Beiwerk - sie braucht eine
   Zeilenlaenge, in der man sie liest. */
.vt-angebot .vt-meta { max-width: 68ch; }

/* Datum und Uhrzeit stehen untereinander: Das Datum ist die Hauptangabe der
   Spalte, die Uhrzeit ihre Ergaenzung. Nebeneinander waeren es zwei
   gleichrangige Angaben, und die 230px-Spalte truege sie ohnehin nicht. */
.vt-wann { display: flex; flex-direction: column; gap: 0.2rem; }
.vt-tag {
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink);
}
/* Ein Datum bricht in sich nicht um. Der Zeitraum ist dafuer in seine Daten
   zerlegt (siehe $zeitraum in veranstaltungen.php); die Luecke zwischen den
   Teilen ist die einzige Stelle, an der die Zeile umbrechen darf. */
.vt-tag-teil { white-space: nowrap; }
/* Die Uhrzeit steht nur da, wo eine einzige fuer den ganzen Termin gilt
   (siehe veranstaltungen_einheitliche_uhrzeit()). Sie ist kleiner und
   gedaempft: eine Ergaenzung des Datums, kein zweiter Titel. */
.vt-zeit { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; }
.vt-pille {
  align-content: center; padding: 0.38rem 0.85rem; border-radius: var(--radius-pill);
  font-size: 0.78rem; font-weight: 600; color: var(--ink-soft);
  background: rgba(143, 174, 155, 0.18); border: 1px solid rgba(109, 144, 128, 0.28);
}

.vt-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.vt-kat {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--coral-deep);
}
.vt-text .h4 { color: var(--ink); }
.vt-meta { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }

.vt-seite { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.vt-lage {
  align-content: center; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--coral-deep); background: rgba(224, 98, 69, 0.12);
}
/* Wo die Anmeldung offensteht, sagt die Zeile das im Klartext - der Pfeil
   allein benennt das Ziel nicht. Bei einem ausgebuchten oder geschlossenen
   Termin steht stattdessen die Lage: "Anmeldung" waere dort eine
   Einladung, die ins Leere fuehrt. */
.vt-cta {
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft);
  white-space: nowrap; transition: color 0.25s var(--ease);
}
.vt-zeile:hover .vt-cta { color: var(--ink); }

/* Die Pillen der Buchbarkeit stehen dort, wo bei einer Terminzeile die Lage
   steht - eine Veranstaltung kann beide tragen. Dann stehen sie
   untereinander: Nebeneinander ergaben "Auf Anfrage" und "Inhouse buchbar"
   ein breites Band, das dem Titel die halbe Zeile nahm und sich nicht als
   zwei Angaben lesen liess. */
.vt-pillen {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--sp-2);
}

.vt-seite .arw { display: inline-flex; color: var(--coral); transition: transform 0.25s var(--ease); }
.vt-zeile:hover .arw { transform: translateX(3px); }

.vt-leer { margin-top: var(--sp-8); max-width: 62ch; }
.vt-leer p { margin-bottom: var(--sp-4); color: var(--text-muted); line-height: 1.7; }
.vt-leer .lead { color: var(--ink-soft); }
.vt-hinweis { margin-top: var(--sp-8); max-width: 62ch; color: var(--text-muted); line-height: 1.7; }

@media (max-width: 860px) {
  .vt-zeile { grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-4); padding: var(--sp-5); }
  .vt-wann { grid-column: 1 / -1; }
  .vt-tag { font-size: 1.1rem; }
  .vt-seite { flex-direction: column; align-items: flex-end; gap: var(--sp-2); }

  /* Schmal wird die Zeile selbst zum Knopf, und der Pfeil genuegt als
     Zeichen dafuer. Der Klartext bleibt im Markup, damit Vorleseprogramme
     das Ziel weiter nennen - dieselben Angaben wie in .sr-only. */
  .vt-cta {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* In der Angebotszeile stehen rechts zwei Pillen statt eines kurzen
     Worts. Nebeneinander bliebe fuer den Titel eine Spalte von wenigen
     Zeichen - deshalb bekommen beide eine eigene Zeile. */
  .vt-angebot .vt-text { grid-column: 1 / -1; }
  .vt-angebot .vt-seite {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; gap: var(--sp-3);
  }
  .vt-angebot .vt-pillen { align-items: flex-start; }
}

/* ---------- Detailseite ---------- */

/* Das Band der Vorschau. Es steht vor dem Seitenkopf und traegt deshalb den
   Platz fuer die feste Kopfzeile selbst; der Seitenkopf darunter gibt seinen
   dafuer ab, sonst klaffte zwischen Band und Ueberschrift eine Luecke.

   Bewusst hell und nicht dunkel: Die Kopfzeile liegt bis zum Scrollen
   durchsichtig darueber und schreibt auf dieser Seite in Tinte - auf einem
   dunklen Band waere sie nicht zu lesen. Das Korallenrot der Marke setzt es
   trotzdem deutlich ab. Es ist ein Streifen ueber die volle Breite und keine
   Karte, deshalb kein Radius. */
.vd-entwurf {
  padding: calc(var(--header-h) + var(--sp-3)) 0 var(--sp-4);
  background: rgba(224, 98, 69, 0.12);
  border-bottom: 1px solid rgba(224, 98, 69, 0.32);
}
.vd-entwurf p {
  font-size: var(--text-sm); line-height: 1.5; color: var(--ink);
}
.vd-entwurf strong { font-weight: 700; }
.vd-entwurf + .pagehero { padding-top: var(--sp-12); }


.vd-kopfbild {
  margin: 0 0 var(--sp-8); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--sand); box-shadow: var(--shadow);
}
.vd-kopfbild img { width: 100%; height: auto; display: block; }

/* Der Vorspann ist derselbe Satz, der in der Uebersicht die Zeile traegt.
   Als blosser groesserer Absatz stuende er ohne Bezug vor der Beschreibung -
   deshalb ein abgesetzter Kasten. Er steht allein und nicht mit seinesgleichen
   in einem Raster, also --radius-lg. Ob er ueberhaupt erscheint, entscheidet
   der Haken in der Verwaltung. */
.vd-vorspann {
  max-width: 72ch; margin: 0; padding: var(--sp-6) var(--sp-8);
  border-radius: var(--radius-lg);
  background: var(--cream); border: 1px solid var(--card-line);
}
.bg-white .vd-vorspann { background: var(--cream); }
.vd-vorspann + .rte { margin-top: var(--sp-8); }

/* Text aus dem Editor der Verwaltung. Was hier ankommen kann, steht in
   veranstaltungen_html_saeubern(): p, strong, em, h3, h4, ul, ol, li, a, br,
   blockquote - und sonst nichts. Mehr Selektoren braucht es deshalb nicht. */
.rte { max-width: 72ch; color: var(--ink-soft); }
.rte > :first-child { margin-top: 0; }
.rte p { margin: 0 0 var(--sp-4); line-height: 1.75; }
.rte h3 { margin: var(--sp-10) 0 var(--sp-3); font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.rte h4 { margin: var(--sp-8) 0 var(--sp-2); font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.rte ul, .rte ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
/* Kein Abstand zwischen den Punkten: Eine Aufzaehlung ist ein Block und
   keine Folge von Absaetzen - mit Luft dazwischen zerfaellt sie. Die
   Aufzaehlung als Ganzes hat ihren Abstand ueber ul/ol. */
.rte li { line-height: 1.7; }
.rte ul { list-style: none; padding-left: 0; }
.rte ul li { position: relative; padding-left: 1.15rem; }
.rte ul li::before {
  content: ""; position: absolute; left: 0; top: 0.66rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--coral);
}
.rte a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.rte a:hover { text-decoration-thickness: 2px; }
.rte blockquote {
  margin: var(--sp-6) 0; padding-left: var(--sp-6);
  border-left: 3px solid var(--sand-deep);
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; color: var(--ink);
}
.rte > :last-child { margin-bottom: 0; }

/* In der Beileiste steht derselbe Text auf engem Raum - Preis vor allem. */
.rte-eng { max-width: none; margin-top: var(--sp-2); font-size: var(--text-sm); }
.rte-eng p { margin-bottom: var(--sp-2); line-height: 1.55; }
.rte-eng strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); display: block; }

/* Der hervorgehobene Termin unter der Beschreibung. Ein Solitaer-Panel,
   also --radius-lg. */
.vd-termin {
  margin-top: var(--sp-12); padding: var(--sp-8); border-radius: var(--radius-lg);
  background: var(--cream); border: 1px solid var(--card-line);
}
.bg-white .vd-termin { background: var(--cream); }
.vd-termin .eyebrow { margin-bottom: var(--sp-3); }
.vd-termin .h3 { color: var(--ink); }

/* Was von den Zeitbloecken neben der Ueberschrift noch zu sagen ist - oft
   eine einzige Zeile, siehe veranstaltungen_zeitplan_zeilen(). Als Karten
   machten schon drei kurze Angaben einen halben Bildschirm voll; fuer je ein
   Datum ist eine eigene Kachel zu viel Gehaeuse. Der Punkt davor ist derselbe
   wie in .rte ul: Die Seite soll eine Aufzaehlung kennen und nicht zwei. */
.vd-bloecke {
  list-style: none; display: grid; gap: 0.4rem; margin-top: var(--sp-5);
}
.vd-bloecke li {
  position: relative; padding-left: 1.15rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem var(--sp-3);
}
.vd-bloecke li::before {
  content: ""; position: absolute; left: 0; top: 0.52rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--coral);
}
.vd-block-zeit { font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.vd-block-name { font-size: var(--text-sm); color: var(--text-muted); }

.vd-fakten { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-6); }
.vd-fakten dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.vd-fakten dd { margin-top: 0.2rem; font-size: var(--text-base); color: var(--ink); }
.vd-notiz { margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.65; max-width: 62ch; }

/* ---------- Fuellung der Beileiste ---------- */

.bl-knopf { margin-bottom: var(--sp-2); }
.bl-hinweis {
  padding: 0.85rem 1rem; border-radius: var(--radius); margin-bottom: var(--sp-3);
  background: rgba(224, 98, 69, 0.1); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-soft);
}
.bl-hinweis strong { color: var(--coral-deep); }

/* Der Pfeil als Rueckweg: er steht vor dem Text und zeigt beim Ueberfahren
   nach links. */
.btn .arw-zurueck { margin-left: 0; margin-right: var(--sp-2); }
.btn:hover .arw-zurueck { transform: translateX(-3px); }

.bl-zeile { display: grid; gap: 0.15rem; }
.bl-wann { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.bl-wo { font-size: var(--text-sm); color: var(--text-muted); }
.bl-lage { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--coral-deep); margin-top: 0.15rem; }

.bl-referenten { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.bl-referenten li { display: flex; gap: var(--sp-3); align-items: center; }
.bl-referenten img { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; background: var(--sand); }
.bl-ohne-bild {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: rgba(26, 57, 65, 0.06);
  font-family: var(--font-display); font-size: 1.25rem; color: var(--ink-soft);
}
.bl-name { display: block; font-weight: 600; font-size: var(--text-sm); color: var(--ink); line-height: 1.3; }
.bl-zusatz { display: block; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; margin-top: 0.15rem; }

@media (max-width: 1000px) {
  .vd-termin { padding: var(--sp-6); }
  .vd-fakten { gap: var(--sp-6); }
}

/* ---------- Anmeldung und Anfrage (/veranstaltung/<slug>/anmelden) ---------- */

/* Eine Spalte statt der vollen Breite, aber mit derselben linken Kante wie
   die Ueberschrift im Seitenkopf - deshalb kein "wrap narrow", das zentriert. */
.va-spalte { max-width: 880px; }

/* Der Termin in der Kurzinfo neben dem Formular. Er steht dort wie eine Zeile
   der Terminliste auf der Detailseite - nur eben ohne Verweis, weil er der
   bereits gewaehlte ist. Deshalb dieselben drei Zeilen wie in .bl-zeile und
   hier nur das, was die Zeilen untereinander bringt. */
.va-kurz-termin { display: grid; gap: 0.15rem; margin-top: var(--sp-2); }

/* Der Zeitplan steht in der Kurzinfo gleich unter dem Termin und traegt
   dessen Layout: je Tag eine Zeile aus Zeitangabe und Bezeichnung, in
   denselben zwei Stufen wie .bl-wann und .bl-wo. Die Punkte von .vd-bloecke
   auf der Detailseite bleiben dort - hier stehen die Zeilen schon unter einer
   eigenen Ueberschrift, ein zweites Gliederungszeichen daneben waere eins zu
   viel. Der Abstand zwischen den Tagen ist groesser als der innerhalb eines
   Tages, sonst zerfielen Zeit und Bezeichnung nicht mehr sichtbar in Paare. */
.va-kurz-zeitplan { list-style: none; display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.va-kurz-zeitplan li { display: grid; gap: 0.15rem; }

.va-form { margin-top: var(--sp-8); }

/* Formular und Kurzinfo fangen auf derselben Hoehe an. Seit die Ueberschrift
   im Seitenkopf steht, ist der erste Kasten der Spalte auch ihr Anfang - ein
   Abstand darueber liesse die Leiste daneben zu hoch stehen. Die dritte Zeile
   gilt dem Erfolgskasten: Hat das Skript den Formularteil versteckt, ist er
   der erste sichtbare, aber nicht das erste Element. */
.va-spalte > :first-child,
.va-formteil > :first-child,
.va-formteil[hidden] + .va-erfolg { margin-top: 0; }

/* Gruppen im Formularkasten. Ein Anmeldeformular ist laenger als ein
   Kontaktformular und braucht Zwischenueberschriften, sonst ist es eine Wand
   aus Feldern - fieldset und legend, damit es das auch fuer Vorleseprogramme
   ist und nicht bloss optisch. */
.va-gruppe { margin: 0; padding: 0; border: 0; }
.va-gruppe + .va-gruppe { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--card-line); }
.va-gruppe legend {
  padding: 0; font-family: var(--font-display); font-size: var(--text-lg);
  letter-spacing: -0.01em; line-height: 1.3; color: var(--ink);
}
.va-gruppe > .finder-grid,
.va-gruppe > .va-personen,
.va-gruppe > .finder-consent { margin-top: var(--sp-4); }
.va-erklaerung {
  margin-top: var(--sp-2); max-width: 62ch;
  font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6;
}

/* Die Auswahl "Was schwebt dir vor?" - zwei Zeilen, die mit ihresgleichen in
   einem Raster stehen und deshalb --radius tragen. Ein eigenes fieldset, weil
   die Frage zu den beiden Knoepfen gehoert und nicht bloss ueber ihnen steht;
   seine Legende ist keine Gruppenueberschrift wie die von .va-gruppe, sondern
   eine Feldbeschriftung und sieht deshalb aus wie eine. */
.va-wahl { margin: var(--sp-4) 0 0; padding: 0; border: 0; }
.va-wahl legend {
  padding: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.va-wahl-option {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  margin-top: var(--sp-2); padding: 0.7rem 0.9rem; border-radius: var(--radius);
  background: var(--cream); border: 1px solid var(--card-line);
  font-size: var(--text-sm); line-height: 1.5; color: var(--ink);
}
.va-wahl-option:hover { border-color: var(--ink-soft); }
.va-wahl-option input { flex: none; accent-color: var(--coral); }
.va-wahl-option:has(input:checked) { background: var(--white); border-color: var(--coral); }

/* Das Feld "Ort oder Haus" haengt an dieser Wahl und wird vom Skript
   weggeblendet. Die Regel muss sein: .field ist ein Grid, und display gewinnt
   gegen das hidden-Attribut der Browservorgabe. */
.va-ortfeld[hidden] { display: none; }

/* Aus demselben Grund: Die Kopfzeile ist ein Grid und braeuchte dieselbe
   Regel, wenn das Skript sie bei leerer Liste wegblendet. */
.va-personen-kopf[hidden] { display: none; }

/* Die Teilnehmerliste ist eine Tabelle und keine Folge von Karten: die
   Spaltennamen einmal oben, davor eine Nummer, dann je Person eine Zeile.
   Vorher trug jede Person einen eigenen Kasten mit eigener Ueberschrift und
   drei eigenen Feldbeschriftungen - dreimal dasselbe untereinander, was viel
   Platz kostete und die Liste unruhig machte.

   Kopfzeile und Personenzeile teilen sich dasselbe Raster, sonst stuenden die
   Spalten nicht uebereinander. Es steht auf dem umschliessenden fieldset und
   nicht auf .va-personen, weil die Kopfzeile deren Geschwister ist und von
   ihr nichts erben koennte. Die Spalten sind ungleich: Die E-Mail-Adresse ist
   von den dreien die laengste Eingabe, die Telefonnummer die kuerzeste - im
   gewoehnlichen Formularraster (.finder-grid, zwei Spalten) bekam
   ausgerechnet sie die volle Breite. */
.va-gruppe {
  --va-zeile: var(--sp-6) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.85fr) auto;
}
.va-personen-kopf,
.va-person {
  display: grid; grid-template-columns: var(--va-zeile);
  gap: var(--sp-4) var(--sp-5); align-items: center;
}

/* Die Kopfzeile sieht aus wie die Feldbeschriftungen, die sie ersetzt. */
.va-personen-kopf {
  padding-bottom: var(--sp-2);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.va-personen-kopf .hint {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  opacity: 0.8; font-size: 0.68rem; margin-left: 0.35rem;
}
.va-gruppe > .va-personen-kopf { margin-top: var(--sp-4); }
.va-personen-kopf + .va-personen { margin-top: 0; }

/* Die Zeilen trennt eine feine Linie statt eines Rahmens um jede einzelne.
   Kein Radius: Eine Zeile in einer Tabelle ist keine Karte in einem Raster. */
.va-personen { display: grid; }
.va-person { padding: var(--sp-3) 0; }
.va-person + .va-person { border-top: 1px solid var(--card-line); }

/* Die laufende Nummer - klein und gedaempft, rechtsbuendig zur Feldspalte.
   Tabellenziffern, damit 9 und 10 nicht unterschiedlich breit stehen. */
.va-person-nr {
  text-align: right; font-size: var(--text-sm); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Die drei Felder sitzen in den Spalten der Zeile, nicht in einem eigenen
   Raster darin - deshalb reicht der Wrapper seine Kinder nach oben durch. */
.va-person-felder { display: contents; }

.va-weg {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 0.18em;
}
.va-weg:hover { color: var(--coral-deep); }
.va-mehr { margin-top: var(--sp-4); }

/* Schmal ist fuer eine Tabelle kein Platz: Die Zeile bricht um, die Kopfzeile
   faellt weg - und weil sie wegfaellt, muessen die Beschriftungen an den
   Feldern wieder sichtbar werden. Sonst stuenden drei Eingaben ohne jede
   Beschriftung untereinander. Die Nummer wird dann zur Ueberschrift der
   Gruppe und sieht aus wie eine. */
@media (max-width: 720px) {
  .va-personen-kopf { display: none; }
  /* Den Abstand nach oben trug die Kopfzeile; ohne sie traegt ihn die Liste. */
  .va-personen-kopf + .va-personen { margin-top: var(--sp-4); }
  .va-person { display: block; padding: var(--sp-4) 0; }
  .va-person-felder {
    display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  }
  .va-person .sr-only {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
  }
  .va-person-nr {
    display: block; margin-bottom: var(--sp-3); text-align: left;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-soft);
  }
}

/* Die Einwilligung steht nicht in einer Gruppe, sondern hinter allen -
   sie gilt fuer das ganze Formular. */
.va-form > .finder-consent { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--card-line); }

.va-fehler {
  margin-top: var(--sp-8); padding: 0.9rem 1.1rem; border-radius: var(--radius);
  background: rgba(224, 98, 69, 0.1); border: 1px solid rgba(224, 98, 69, 0.28);
  font-size: var(--text-sm); line-height: 1.55; color: var(--ink);
}

/* "Ist eingegangen" und "geht gerade nicht" sind derselbe Solitaer-Kasten:
   In beiden Faellen steht dort ein Satz und zwei Wege weiter. */
.va-erfolg, .va-hinweis {
  margin-top: var(--sp-8); padding: var(--sp-10); border-radius: var(--radius-lg);
  background: var(--cream); border: 1px solid var(--card-line);
}
.va-erfolg .eyebrow { margin-bottom: var(--sp-3); }
.va-erfolg .lead { color: var(--ink-soft); max-width: 62ch; }
.va-erfolg p + p, .va-hinweis p { margin-top: var(--sp-4); max-width: 62ch; color: var(--text-muted); line-height: 1.7; }
.va-hinweis .h3, .va-hinweis .h4 { color: var(--ink); }
.va-erfolg-aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

@media (max-width: 720px) {
  .va-erfolg, .va-hinweis { padding: var(--sp-6); }
  .va-weg { display: block; margin-top: var(--sp-3); }
  .va-erfolg-aktionen .btn { width: 100%; justify-content: center; }
}