/* stuv Friends · Projektschicht über dem stuv-CI-Paket (static/stuv-ci/css/stuv.css).
   Alle Seiten laufen im App-Stil (body.stuv-app, Muster PLEITE, wie stuv Tix):
   nur Inter, 40-px-Bedienelemente, 8/12 px Rundung. Hier steht nur, was das
   Paket nicht mitbringt: Seitenbreite, Fußzeile, Auswahlgruppen des
   Fragebogens, Fließtext der Rechtstexte. Ausschließlich Tokens des Pakets
   (--stuv-*), keine eigenen Farben, Radien oder Schriftgrößen. */

/* ── Seite ───────────────────────────────────────────────────────────────── */
/* Sticky-Footer: kurzer Inhalt schiebt die Fußzeile an den unteren Rand. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; min-width: 0; width: 100%; box-sizing: border-box; }
/* main ist selbst das Raster: der Sticky-Footer dehnt es, die Zeilen bleiben oben */
.stuv-app main.stuv-inhalt-app { align-content: start; }
/* Die Anwendung ist schmal: Formulare und Karten lesen sich bis 56 rem am besten;
   die Verwaltung mit ihren Tabellen darf breiter. */
.stuv-app .stuv-inhalt-app { max-width: calc(56rem + 2 * var(--stuv-s6)); padding-bottom: var(--stuv-s10); }
.stuv-app.admin .stuv-inhalt-app { max-width: var(--stuv-app-breite); }
/* Seitenkopf: Titel und Einleitung dicht beieinander, danach das 28-px-Raster */
.date-kopf { display: grid; gap: var(--stuv-s2); }
.date-kopf p { max-width: 42rem; }
.date-kopf .stuv-aktionen { margin-top: var(--stuv-s3); }
/* Schmale Karte (Anmeldung, Bestätigungen): mittig, 480 px */
.date-schmal { max-width: 480px; width: 100%; justify-self: center; box-sizing: border-box; }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
/* Wenige Menüeinträge – die tragen auf jeder Breite ihren Text und brechen
   nicht um (das Paket blendet den Text zwischen 760 und 1100 px aus). */
.stuv-app .stuv-menue a span { display: inline; }
.stuv-app .stuv-menue a { white-space: nowrap; }
@media (max-width: 1100px) { .stuv-app .stuv-menue a { padding: 0 var(--stuv-s3); } }
.stuv-app .stuv-kopf-rechts .stuv-knopf--leise { color: var(--stuv-text-2); }
.stuv-app .stuv-menue-form { display: inline; }
.stuv-app .stuv-menue-form button { height: var(--stuv-app-hoehe); color: var(--stuv-text-2); white-space: nowrap; }

/* ── Fußzeile ────────────────────────────────────────────────────────────── */
.date-fuss { max-width: var(--stuv-app-breite); margin: 0 auto; padding: 0 var(--stuv-s6) var(--stuv-s8); width: 100%; box-sizing: border-box;
             font-size: var(--stuv-app-klein); color: var(--stuv-text-2); display: grid; gap: var(--stuv-s2); }
.date-fuss nav { display: flex; flex-wrap: wrap; gap: var(--stuv-s2) var(--stuv-s4); }
.date-fuss a { color: var(--stuv-text-2); }
@media (max-width: 640px) { .date-fuss { padding: 0 var(--stuv-s4) var(--stuv-s6); } }

/* ── Inhalt ──────────────────────────────────────────────────────────────── */
.stuv-app .stuv-karte p, .stuv-app .stuv-meldung { line-height: 1.5; }
.stuv-app .stuv-meldung a, .stuv-app .stuv-karte a { text-decoration: underline; }
.stuv-app .stuv-menue a, .stuv-app .stuv-karte a.stuv-knopf, .stuv-app .stuv-meldung a.stuv-knopf { text-decoration: none; }
.stuv-app .stuv-meldung a { color: inherit; font-weight: 600; }
/* Listen in Karten (Ablauf, Zusagen, Verweise) */
.date-liste { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--stuv-s2); line-height: 1.5; }
.date-liste--haken { list-style: none; padding: 0; }
.date-liste--haken li { padding-left: 1.5rem; position: relative; }
.date-liste--haken li::before { content: "✓"; position: absolute; left: 0; color: var(--stuv-positiv); font-weight: 700; }
.date-liste--links { list-style: none; padding: 0; }
/* Honeypot gegen Bots: für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nowrap { white-space: nowrap; }
/* Wiederherstellungscode und Kontaktinfo: gut kopierbar, umbrechbar */
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--stuv-app-titel); letter-spacing: 0.06em;
        background: var(--stuv-hintergrund); border: 1px solid var(--stuv-linie); border-radius: var(--stuv-r-feld);
        padding: var(--stuv-s2) var(--stuv-s3); display: inline-block; overflow-wrap: anywhere; }
.stuv-app .stuv-meldung.date-box { display: grid; gap: var(--stuv-s3); padding: var(--stuv-s4) var(--stuv-s5); }
/* Startseite (F-60): Anmeldeknopf auf dem Telefon zusätzlich am unteren Rand */
.date-cta-unten { display: none; }
@media (max-width: 640px) {
  body.start .stuv-inhalt-app { padding-bottom: 5.5rem; }
  .date-cta-unten { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: var(--stuv-s3) var(--stuv-s4);
                    padding-bottom: calc(var(--stuv-s3) + env(safe-area-inset-bottom));
                    background: var(--stuv-flaeche); border-top: 1px solid var(--stuv-linie); z-index: var(--stuv-z-menue); }
  .date-cta-unten .stuv-knopf { width: 100%; box-sizing: border-box; }
}
/* Rechtstexte: Fließtext in einer Karte. Das Karten-Raster (16 px) gilt
   nicht für die Absätze darin – hier eigene Abstände, Zeilenlänge begrenzt. */
.date-text { --zeile: min(70ch, 100%); line-height: 1.6; }
.date-text h1 { margin: 0 0 var(--stuv-s4); }
.date-text p, .date-text ul, .date-text ol { margin: 0 0 var(--stuv-s4); max-width: var(--zeile); }
.date-text ul { list-style-type: disc; padding-left: 1.5rem; }
.date-text ol { list-style-type: decimal; padding-left: 1.5rem; }
.date-text li { margin-bottom: var(--stuv-s1); }
.date-text h2 { margin: var(--stuv-s8) 0 var(--stuv-s3); }
.date-text h3 { margin: var(--stuv-s6) 0 var(--stuv-s2); }
.date-text > :first-child { margin-top: 0; }
.date-text > :last-child { margin-bottom: 0; }
.date-text > * { overflow-wrap: break-word; }
.date-text p, .date-text li { hyphens: auto; }
.date-text a { overflow-wrap: anywhere; text-decoration: underline; }
/* Platzhalter und Entwurfshinweise in den Rechtstexten sichtbar machen */
mark { background: var(--stuv-akzent-heller); color: var(--stuv-akzent-dunkel); padding: 0 var(--stuv-s1); border-radius: var(--stuv-r-chip); }
.draft { background: var(--stuv-akzent-heller); color: var(--stuv-akzent-dunkel); border-left: 3px solid var(--stuv-akzent);
         padding: var(--stuv-s3) var(--stuv-s4); border-radius: var(--stuv-r-feld); max-width: var(--zeile, 100%); }

/* ── Formulare ───────────────────────────────────────────────────────────── */
.stuv-app .stuv-feld > span { font-size: var(--stuv-app-klein); color: var(--stuv-text-2); font-weight: 500; }
.stuv-app .stuv-feld { display: grid; gap: 6px; }
.stuv-app .stuv-feld small { font-size: var(--stuv-app-klein); color: var(--stuv-text-2); line-height: 1.4; }
/* Feldfehler (N-03): rote Zeile unter dem Feld, roter Rahmen */
.stuv-app .stuv-feld em { font-style: normal; font-size: var(--stuv-app-klein); color: var(--stuv-negativ); font-weight: 500; }
.stuv-app .stuv-feld--fehler input:not([type=checkbox]):not([type=radio]), .stuv-app .stuv-feld--fehler select,
.stuv-app .stuv-feld--fehler textarea, .stuv-app .stuv-feld--fehler .date-einwilligung { border-color: var(--stuv-negativ); }
.stuv-app .stuv-reihe { align-items: start; }
/* Abschnitte eines langen Formulars */
.stuv-app fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; gap: var(--stuv-s4); }
/* Grid-Kinder dürfen schrumpfen: breite Tabellen scrollen in .stuv-tabelle statt die Seite zu verbreitern */
.stuv-app fieldset > * { min-width: 0; }
/* Absolut positionierte .stuv-sr-Texte in Tabellen bleiben im Scrollrahmen */
.stuv-app .stuv-tabelle { position: relative; }
.stuv-app fieldset + fieldset { margin-top: var(--stuv-s3); }
.stuv-app legend { padding: 0; margin-bottom: var(--stuv-s2); font-size: var(--stuv-app-titel); font-weight: 600; line-height: 1.25; }
/* Auswahlgruppen: Radios und Kästchen nebeneinander, auf dem Telefon untereinander */
.date-wahl { display: flex; flex-wrap: wrap; gap: var(--stuv-s2) var(--stuv-s4); }
.date-wahl label { display: inline-flex; align-items: center; gap: var(--stuv-s2); min-height: var(--stuv-app-hoehe-klein); cursor: pointer; }
/* Mehrfachauswahl als Chips (8 px wie alle Bedienelemente, gewählt in Hellrot/Dunkelrot) */
.date-wahl--chips { gap: var(--stuv-s2); }
.date-wahl--chips label { height: var(--stuv-app-hoehe-klein); padding: 0 var(--stuv-s3); border: 1px solid var(--stuv-linie);
                          border-radius: var(--stuv-r-feld); background: var(--stuv-flaeche); }
.date-wahl--chips label:has(input:checked) { background: var(--stuv-akzent-heller); border-color: var(--stuv-akzent-heller); color: var(--stuv-akzent-dunkel); font-weight: 600; }
@media (max-width: 640px) { .date-wahl:not(.date-wahl--chips) { flex-direction: column; align-items: flex-start; } }
/* Bestätigungszeilen dürfen umbrechen (Standard: eine Zeile, 40 px) */
.stuv-app .stuv-check-zeile { height: auto; min-height: var(--stuv-app-hoehe); align-items: flex-start; font-size: var(--stuv-app-basis); color: var(--stuv-text); line-height: 1.5; }
.stuv-app .stuv-check-zeile input { margin-top: 3px; flex: none; }
/* Einwilligungen (Art. 9): abgesetzter Kasten mit Hairline */
.date-einwilligung { border: 1px solid var(--stuv-linie); border-radius: var(--stuv-r-feld); padding: var(--stuv-s3) var(--stuv-s4); }
/* Geburtsdatum in drei Feldern, Altersspanne */
.date-datum3, .date-spanne { display: flex; gap: var(--stuv-s2); align-items: center; }
.date-datum3 label, .date-spanne label { flex: 1; min-width: 0; }
/* Prioritäten-Tabelle: Radios zentriert */
.date-prio td, .date-prio th { text-align: center; }
.date-prio td:first-child, .date-prio th:first-child { text-align: left; }
.date-prio label { display: inline-flex; padding: var(--stuv-s1); cursor: pointer; }
/* Vergleichstabelle im Match (F-30): beide Antworten nebeneinander */
.date-vergleich th:first-child { width: 40%; }
.date-vergleich td:nth-child(2) { color: var(--stuv-text-2); }
.date-vergleich td:nth-child(3) { font-weight: 600; }
.stuv-tabelle td.date-inhalt { white-space: pre-line; max-width: 28rem; overflow-wrap: anywhere; }
/* Aktionszeile: Löschen und Melden nie primär – rot, ganz rechts */
.stuv-app .stuv-knopf--gefahr, .stuv-app button.stuv-knopf--gefahr { color: var(--stuv-negativ); margin-left: auto; }
.stuv-app .stuv-knopf--gefahr:hover, .stuv-app button.stuv-knopf--gefahr:hover { background: var(--stuv-akzent-heller); }
.stuv-app .stuv-meldungen { margin: 0; }
/* Anmeldung der Verwaltung: Logo 110 px, Formular 420 px */
.stuv-app .stuv-anmeldung .stuv-karte { width: 100%; box-sizing: border-box; }

/* ── Schmale Fenster ─────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .stuv-app .stuv-aktionen > * { flex: 1 1 auto; }
  .stuv-app .stuv-knopf--gefahr { flex: 0 0 auto; }
  .date-vergleich td, .date-vergleich th { overflow-wrap: break-word; hyphens: auto; padding: var(--stuv-s2); }
  .date-vergleich th:first-child { width: 34%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }