/* stuv Dinner · 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, Schrittleiste des Formulars,
   Adress-Vorschläge, 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; }
/* Anmeldung und Portal sind schmal; 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 */
.rd-kopf { display: grid; gap: var(--stuv-s2); }
.rd-kopf p { max-width: 42rem; }
.rd-kopf .stuv-aktionen { margin-top: var(--stuv-s3); }
/* Schmale Karte (Anmeldung der Verwaltung, Fehler): mittig, 480 px */
.rd-schmal { max-width: 480px; width: 100%; justify-self: center; box-sizing: border-box; }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
/* Menüeinträge 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; }
/* Sechs Einträge in der Verwaltung: die Leiste scrollt notfalls, statt die Seite zu verbreitern */
.stuv-app .stuv-menue { min-width: 0; flex: 0 1 auto; overflow-x: auto; }
@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 ────────────────────────────────────────────────────────────── */
.rd-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); }
.rd-fuss nav { display: flex; flex-wrap: wrap; gap: var(--stuv-s2) var(--stuv-s4); }
.rd-fuss a { color: var(--stuv-text-2); }
@media (max-width: 640px) { .rd-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-karte a, .stuv-app .stuv-meldung a { text-decoration: underline; }
.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; }
.stuv-app .stuv-meldungen { margin: 0; }
/* Infotext der Startseite: Zeilenumbrüche aus dem Admin-Textfeld bleiben erhalten */
.rd-info { white-space: pre-line; }
.nowrap { white-space: nowrap; }
/* Honeypot gegen Bots: für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rd-liste { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--stuv-s1); line-height: 1.5; }
/* Gutscheincodes zum Kopieren */
pre.codes { background: var(--stuv-hintergrund); border: 1px solid var(--stuv-linie); border-radius: var(--stuv-r-feld);
            padding: var(--stuv-s3) var(--stuv-s4); overflow-x: auto; margin: 0; font-size: var(--stuv-app-klein); }
/* 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. */
.rd-text { --zeile: min(70ch, 100%); line-height: 1.6; }
.rd-text h1 { margin: 0 0 var(--stuv-s4); }
.rd-text p, .rd-text ul, .rd-text ol { margin: 0 0 var(--stuv-s4); max-width: var(--zeile); }
.rd-text ul { list-style-type: disc; padding-left: 1.5rem; }
.rd-text ol { list-style-type: decimal; padding-left: 1.5rem; }
.rd-text li { margin-bottom: var(--stuv-s1); }
.rd-text h2 { margin: var(--stuv-s8) 0 var(--stuv-s3); }
.rd-text h3 { margin: var(--stuv-s6) 0 var(--stuv-s2); }
.rd-text > :first-child { margin-top: 0; }
.rd-text > :last-child { margin-bottom: 0; }
.rd-text > * { overflow-wrap: break-word; }
.rd-text p, .rd-text li { hyphens: auto; }
.rd-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, .stuv-app .rd-hinweis { font-size: var(--stuv-app-klein); color: var(--stuv-text-2); line-height: 1.4; }
/* Feldfehler: 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.rd-einwilligung, .stuv-app .stuv-feld--fehler .rd-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); }
.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 nebeneinander, auf dem Telefon untereinander; WG-Auswahl immer untereinander */
.rd-wahl { display: flex; flex-wrap: wrap; gap: var(--stuv-s2) var(--stuv-s4); }
.rd-wahl label { display: inline-flex; align-items: center; gap: var(--stuv-s2); min-height: var(--stuv-app-hoehe-klein); cursor: pointer; }
.rd-wahl--spalte { flex-direction: column; align-items: flex-start; }
@media (max-width: 640px) { .rd-wahl { 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; }
.stuv-app .stuv-check-zeile a { text-decoration: underline; }
/* Einwilligung (Art. 9) und WG-Auswahl: abgesetzter Kasten mit Hairline */
.rd-einwilligung { border: 1px solid var(--stuv-linie); border-radius: var(--stuv-r-feld); padding: var(--stuv-s3) var(--stuv-s4); display: grid; gap: var(--stuv-s2); }
/* Selbstverwaltung: Felder, die nach Anmeldeschluss feststehen */
.rd-fest { border: 1px dashed var(--stuv-linie); border-radius: var(--stuv-r-feld); padding: var(--stuv-s3) var(--stuv-s4); background: var(--stuv-hintergrund); }
.rd-fest .rd-wert { font-weight: 600; }
/* Adress-Vorschläge (Formular und After-Party): Karte unter dem Feld */
.rd-adresse { position: relative; }
.rd-vorschlaege { list-style: none; margin: 0; padding: var(--stuv-s1) 0; position: absolute; z-index: var(--stuv-z-menue); left: 0; right: 0;
                  background: var(--stuv-flaeche); border: 1px solid var(--stuv-linie); border-radius: var(--stuv-r-karte);
                  box-shadow: var(--stuv-schatten-menue); max-height: 260px; overflow: auto; }
.rd-vorschlaege li { padding: var(--stuv-s2) var(--stuv-s3); min-height: var(--stuv-app-hoehe-menue); box-sizing: border-box; cursor: pointer; }
.rd-vorschlaege li:hover, .rd-vorschlaege li[aria-selected=true] { background: var(--stuv-linie-leicht); }
.rd-vorschlaege li.empty { color: var(--stuv-text-2); cursor: default; }
.rd-gewaehlt { margin: 0; display: flex; flex-wrap: wrap; gap: var(--stuv-s2); align-items: center; }
/* Schrittleiste des Anmeldeformulars (steps.js baut sie auf) */
.rd-schritte { display: flex; flex-wrap: wrap; gap: var(--stuv-s1); padding-bottom: var(--stuv-s3); border-bottom: 1px solid var(--stuv-linie); }
.rd-schritte .schritt { display: inline-flex; align-items: center; gap: var(--stuv-s2); font: inherit; font-size: var(--stuv-app-klein);
                        background: none; border: 0; padding: 0 var(--stuv-s2); height: var(--stuv-app-hoehe-klein); border-radius: var(--stuv-r-feld);
                        color: var(--stuv-text-2); cursor: default; }
.rd-schritte .schritt .nr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--stuv-r-chip);
                            font-size: var(--stuv-app-klein); font-weight: 600; border: 1px solid var(--stuv-linie); background: var(--stuv-flaeche); }
.rd-schritte .schritt.erledigt { color: var(--stuv-text); cursor: pointer; }
.rd-schritte .schritt.erledigt:hover { background: var(--stuv-linie-leicht); }
.rd-schritte .schritt.erledigt .nr { background: var(--stuv-linie-leicht); border-color: transparent; }
.rd-schritte .schritt.aktiv { color: var(--stuv-text); font-weight: 600; }
.rd-schritte .schritt.aktiv .nr { background: var(--stuv-akzent); border-color: var(--stuv-akzent); color: var(--stuv-text-auf-akzent); }
.stuv-app .rd-schritte .schritt[disabled] { opacity: 1; }
.rd-blaettern { display: flex; gap: var(--stuv-s2); padding-top: var(--stuv-s4); border-top: 1px solid var(--stuv-linie); }
/* Auf schmalen Fenstern nur die Nummern, sonst bricht die Leiste über mehrere Zeilen */
@media (max-width: 520px) {
  .rd-schritte .schritt .txt { display: none; }
  .rd-schritte .schritt.aktiv .txt { display: inline; }
}
/* Aktionszeile: Löschen und Stornieren 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); }
/* Anmeldung der Verwaltung: Logo 110 px, Formular 420 px */
.stuv-app .stuv-anmeldung .stuv-karte { width: 100%; box-sizing: border-box; }

/* ── Verwaltung ──────────────────────────────────────────────────────────── */
.stuv-app .stuv-seite-kopf h1 { margin-right: auto; }
.stuv-app .stuv-werkzeuge input:not([type=checkbox]), .stuv-app .stuv-werkzeuge select { width: auto; min-width: 180px; }
.stuv-app .stuv-werkzeuge .stuv-feld { display: grid; }
/* Fortschritt der Zuordnung (admin.js setzt die Breite) */
.rd-balken { height: 6px; background: var(--stuv-linie); border-radius: 3px; overflow: hidden; }
.rd-balken div { height: 100%; width: 0; background: var(--stuv-akzent); transition: width 0.5s; }
/* Zuordnung: Teams, die nach der Berechnung storniert haben */
.rd-fehlt, .rd-fehlt a { color: var(--stuv-negativ); }
.stuv-tabelle td .stuv-chip { vertical-align: middle; margin: 0 2px 2px 0; }
.stuv-tabelle td small { font-size: var(--stuv-app-klein); color: var(--stuv-text-2); }
/* Route eines Teams: eine Karte je Gang */
ol.rd-route { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--stuv-s4); }
ol.rd-route ul { margin: 0; padding-left: 1.4rem; }

/* ── Schmale Fenster ─────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .stuv-app .stuv-aktionen > *, .rd-blaettern > * { flex: 1 1 auto; }
  .stuv-app .stuv-knopf--gefahr { flex: 0 0 auto; }
  dl.stuv-daten { grid-template-columns: 1fr; gap: var(--stuv-s1) 0; }
  dl.stuv-daten dd { margin-bottom: var(--stuv-s2); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Admin-Karte (/admin/karte): Regler oben, darunter die Karte. Farben der Punkte
   entsprechen den Kartenebenen in admin-karte.js (nur CI-Tokens). */
.rd-karte-kopf { gap: var(--stuv-s3); padding: var(--stuv-s4) var(--stuv-s6); }
.rd-regler { display: grid; gap: var(--stuv-s1); }
.rd-regler input[type=range] { width: 100%; accent-color: var(--stuv-akzent); margin: 0; }
.rd-regler-marken { display: flex; justify-content: space-between; gap: var(--stuv-s2); flex-wrap: wrap; }
.rd-legende { display: flex; flex-wrap: wrap; gap: var(--stuv-s2) var(--stuv-s5); margin: 0;
  font-size: var(--stuv-app-klein); color: var(--stuv-text-2); }
.rd-legende span { display: inline-flex; align-items: center; gap: var(--stuv-s2); }
.rd-punkt { display: inline-block; width: 12px; height: 12px; border-radius: var(--stuv-r-pille); }
.rd-punkt--0 { background: var(--stuv-rot); }
.rd-punkt--1 { background: var(--stuv-blau); }
.rd-punkt--2 { background: var(--stuv-rot-dunkel); }
.rd-punkt--storniert { background: var(--stuv-ink-35); }
.rd-punkt--party { background: var(--stuv-blau-dunkel); }
.rd-gebiet { display: inline-block; width: 16px; border-top: 2px dashed var(--stuv-blau-dunkel); }
/* So hoch, dass Kopf, Regler und Karte zusammen ins Fenster passen */
.rd-karte { height: calc(100vh - 400px); height: calc(100dvh - 400px); min-height: 360px; border: 1px solid var(--stuv-linie-leicht);
  border-radius: var(--stuv-r-karte); overflow: hidden; background: var(--stuv-creme); }
.rd-popup { display: grid; gap: var(--stuv-s1); font-size: var(--stuv-app-klein); }
.rd-popup strong { font-size: var(--stuv-app-basis); overflow-wrap: anywhere; }
/* MapLibre-Bedienelemente nicht in 40-px-CI-Knöpfe verwandeln (.stuv-app button) */
.stuv-app .rd-karte .maplibregl-popup-close-button { height: auto; min-width: 0; padding: 0 var(--stuv-s2);
  line-height: 1.6; font-size: var(--stuv-app-titel); color: var(--stuv-text-2); }
.rd-popup strong { padding-right: var(--stuv-s6); }