/*
  Datei: server/pb_public/mitglieder.css
  Zweck: Gestaltung nur fuer die Mitglieder-Seite am Handy (index.html) und die Seite "Neues Passwort"
         (passwort.html): einspaltig, Handy zuerst, Kopf scrollt mit, Kiste gross oben, Reiter, Bereiche
         aufklappbar, Mengenfeld, Vorlieben-Leiste, Sonderwuensche, Beleg.
  Zielgeraet: Handys der Mitglieder (iPhone ab iOS 14, Android-Chrome ab 85, E12; Nutzer 16.10.2026), auch Laptop.
  Eingaben: Variablen und Bausteine aus gestaltung.css (muss vorher eingebunden sein).
  Ausgaben: Klassen .seite, .kiste, .janein, .bereich, .zeile, .menge, .wahl, .sonder-liste, .beleg u. a.
  Herkunft: woertlich aus der freigegebenen Skizze prototyp/mitglieder.html (Block "Seite Mitglieder"),
            ergaenzt um wenige Regeln fuer die echte Seite (am Ende, Abschnitt "Ergaenzt im Bau").
  Belege: PLAN 7 und 7.1 (Q-160 Eingabeschrift 16 px, Q-175 bis Q-178 grosse Schrift, Umbruch 320 px,
          keine feste Leiste, Tippflaechen 44 px), Vertrag V5 Abschnitte 2, 5 und 6.
  Flex-gap: `gap` in Flex-Behaeltern kennt Safari erst ab iOS 14.5 (Q-304, Q-305); @supports (gap) erkennt das nicht
          (Q-306). Auf iOS 14.0 bis 14.4 fehlen daher nur Abstaende (Ableitung); hingenommen, kein Umbau (Nutzer 19.10.2026).
*/
.seite { max-width: 36rem; margin: 0 auto; padding: 0 var(--rand-seite-schmal) var(--a48); }
.zentriert { text-align: center; }

/* Anmelden und Passwort */
.feld { display: block; margin: 0 0 var(--a16); }
.feld > span { display: block; font: var(--typo-text-betont); margin-bottom: var(--a4); }
.eingabe { min-height: var(--groesse-knopf); }
.pw-zeile { display: flex; gap: var(--a8); }
.pw-zeile .eingabe { flex: 1; min-width: 0; }
.pw-zeile .knopf { flex: none; }
form.karte h2, section > .karte > h2:first-child { margin-top: 0; }

/* Kopf scrollt mit (keine feste Leiste) */
.kopf { padding: var(--a20) 0 var(--a8); }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a8); flex-wrap: wrap; }
.kopf-zeile > div { display: flex; gap: var(--a4); }
.runde-text { margin: var(--a4) 0 0; font: var(--typo-text-klein); color: var(--text-2); }
.frist { margin: var(--a8) 0 0; font: var(--typo-text-betont); }
.frist::before { content: "◷ "; color: var(--text-3); }
.gesamtstatus { margin: var(--a4) 0 0; font: var(--typo-hinweis); color: var(--text-3); min-height: 1.4em; }

/* Kiste: die wichtigste Frage der Runde, gross oben (PLAN 7.1 Punkt 2) */
.kiste { display: flex; align-items: center; justify-content: space-between; gap: var(--a12); flex-wrap: wrap; margin: var(--a12) 0 0; border-width: 2px; border-color: var(--text); }
.kiste-titel { min-width: 0; overflow-wrap: anywhere; font: var(--typo-titel-klein); } /* "Kiste diese Runde?" bei 320 px, 200 %, ohne Trennung (AUF-2-W7) */
.janein { display: inline-flex; max-width: 100%; padding: 3px; gap: 3px; border-radius: var(--radius-klein); background: var(--flaeche-2); }
.janein button { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; min-height: var(--groesse-knopf); padding: 0 var(--a24); border: 0; border-radius: 6px; background: none; cursor: pointer; font: var(--typo-text-betont); color: var(--text-2); }
.janein button[aria-checked="true"] { background: var(--akzent); color: var(--auf-akzent); }
.janein button[aria-checked="true"]::before { content: "✓ "; }
#st-kiste:empty { display: none; }

/* Reiter oben, nicht fest (Nutzer 15.10.2026) */
/* fuenf Reiter (mit Dienstplan): so viele je Zeile, wie hineinpassen; nie breiter als die Seite (PLAN 7, 200 % Schrift) */
.reiter { margin: var(--a20) 0 var(--a8); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); }
.reiter button { min-width: 0; overflow-wrap: anywhere; }
.reiter .zaehler { font: var(--typo-mini); background: var(--sonder-weich); color: var(--sonder); border-radius: var(--radius-pille); padding: 1px 6px; margin-left: var(--a4); }

/* Bereiche aufklappbar */
details.bereich { background: var(--flaeche); border: var(--rahmen) solid var(--linie); border-radius: var(--radius-mittel); margin-top: var(--a12); overflow: hidden; }
details.bereich > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: var(--a8); min-height: var(--groesse-zeile); padding: var(--a8) var(--a16); font: var(--typo-text-betont); }
details.bereich > summary::-webkit-details-marker { display: none; }
details.bereich > summary::after { content: "+"; margin-left: var(--a4); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--flaeche-2); color: var(--text-2); }
details.bereich[open] > summary::after { content: "−"; }
details.bereich[open] > summary { border-bottom: var(--rahmen) solid var(--linie); }
.summe-bereich { font: var(--typo-hinweis); color: var(--text-3); margin-left: auto; }
.zeilen { list-style: none; margin: 0; padding: 0; }

/* Zeile je Wunschgruppe: Name links, Menge rechts; bricht bei grosser Schrift um */
.zeile { padding: var(--a12) var(--a16); border-top: var(--rahmen) solid var(--linie); }
.zeile:first-child { border-top: 0; }
.zeile-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a8) var(--a12); flex-wrap: wrap; }
.name { font: var(--typo-text-betont); }
.einheit { display: block; font: var(--typo-hinweis); color: var(--text-3); }
.menge { display: inline-flex; align-items: stretch; max-width: 100%; border: var(--rahmen) solid var(--rand-feld); border-radius: var(--radius-klein); overflow: hidden; background: var(--flaeche); }
.rund { width: var(--groesse-tippflaeche); min-height: var(--groesse-tippflaeche); flex: none; border: 0; background: var(--flaeche-2); font: var(--typo-titel-klein); line-height: 1; cursor: pointer; color: var(--text); }
.rund:disabled { opacity: .35; cursor: default; }
.mengenfeld { width: 4.5rem; max-width: 100%; min-width: 0; min-height: var(--groesse-tippflaeche); text-align: right; font-variant-numeric: tabular-nums; padding: 0 var(--a4); border: 0; border-radius: 0; font: var(--typo-text-betont); }
.mengenfeld[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--alarm); border: 0; }
.einh { font: var(--typo-text-klein); color: var(--text-2); align-self: center; padding: 0 var(--a8) 0 var(--a4); }
.zeile-status { margin-top: var(--a4); }
.zeile-status:empty { display: none; }
.ohne-kiste .zeilen, .gesperrt-inhalt .zeilen { opacity: .6; }

/* Vorlieben: vier Stufen in einer Leiste, die gewaehlte mit Haken und Fuellung */
.wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--a8); border: var(--rahmen) solid var(--rand-feld); border-radius: var(--radius-klein); overflow: hidden; }
@media (max-width: 22rem) { .wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wahl button { min-height: var(--groesse-tippflaeche); padding: var(--a4); border: 0; border-left: var(--rahmen) solid var(--linie); background: var(--flaeche); font: var(--typo-text-klein); color: var(--text-2); cursor: pointer; }
.wahl button:first-child { border-left: 0; }
.wahl button[aria-checked="true"] { font-weight: 600; color: var(--text); }
.wahl button[aria-checked="true"]::before { content: "✓ "; }
.wahl button[data-v="nie"][aria-checked="true"] { background: var(--alarm-weich); color: var(--alarm); }
.wahl button[data-v="neutral"][aria-checked="true"] { background: var(--flaeche-2); }
.wahl button[data-v="gerne"][aria-checked="true"] { background: var(--akzent-weich); }
.wahl button[data-v="sehr_gerne"][aria-checked="true"] { background: var(--akzent); color: var(--auf-akzent); }
.extras { display: flex; flex-wrap: wrap; gap: var(--a8) var(--a16); align-items: center; margin-top: var(--a8); }
.fest { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--a8); font: var(--typo-text-klein); max-width: 100%; }
.fest .eingabe { width: 5rem; min-height: var(--groesse-tippflaeche); text-align: right; }
.vorliebe-hinweis { font: var(--typo-hinweis); color: var(--text-2); margin-top: var(--a8); }

/* Sonderwuensche */
.sonder-liste { list-style: none; margin: 0; padding: 0; }
.sonder-liste li { padding: var(--a12) 0; border-top: var(--rahmen) solid var(--linie); display: flex; justify-content: space-between; gap: var(--a8); flex-wrap: wrap; align-items: center; }
.sonder-liste li:first-child { border-top: 0; }
.sonder-liste .etikett { margin-right: var(--a8); }
.art-wahl { display: flex; flex-wrap: wrap; gap: var(--a8); margin: 0 0 var(--a16); border: 0; padding: 0; }
.art-wahl legend { font: var(--typo-text-betont); margin-bottom: var(--a4); padding: 0; }
/* min-width 0 und overflow-wrap hier und bei .tag-zeile: wie .kennzahl, ohne Silbentrennung (AUF-2-W7) */
.art-wahl label { flex: 1 1 9rem; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: var(--a8); min-height: var(--groesse-tippflaeche); padding: var(--a8) var(--a12); border: var(--rahmen) solid var(--rand-feld); border-radius: var(--radius-klein); cursor: pointer; }
.art-wahl label:has(input:checked) { border: 2px solid var(--akzent); background: var(--akzent-weich); }
.art-wahl input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--akzent); }

/* Beleg */
.beleg { width: 100%; border-collapse: collapse; font: var(--typo-text-klein); }
.beleg th, .beleg td { padding: var(--a8) var(--a4); border-top: var(--rahmen) solid var(--linie); vertical-align: top; text-align: left; }
.beleg th { font: var(--typo-hinweis); font-weight: 600; color: var(--text-2); }
.beleg .zahl { text-align: right; white-space: nowrap; }
.beleg tfoot td { font: var(--typo-text-betont); border-top: 2px solid var(--text); }

/* ---------- Ergaenzt im Bau (nicht in der Skizze) ---------- */
/* Kiste ohne Eintrag fuer diese Runde: keiner der Knoepfe ist gewaehlt, Hinweis "bitte waehlen" */
.kiste-offen { font: var(--typo-hinweis); color: var(--warnung); font-weight: 600; }
/* Vorliebe noch nie gewaehlt: kurzer Hinweis unter der Leiste (zaehlt wie neutral, V1 Abschnitt 4) */
.vorliebe-leer { font: var(--typo-hinweis); color: var(--text-3); margin-top: var(--a4); }
/* Ladeanzeige beim Start (keine Bewegung, nur Text) */
.laden { padding: var(--a32) 0; text-align: center; color: var(--text-2); }
/* Zaehler am Reiter "Sonder" nur zeigen, wenn es Sonderwuensche gibt */
.reiter .zaehler:empty { display: none; }
/* iPhone: Seite folgt der Systemschrift (Einstellungen > Anzeige > Textgroesse). Nur auf iOS (-webkit-touch-callout
   gibt es nur dort), sonst wuerde Safari am Mac kleiner (13 px). Beleg: Q-175; Nutzer 15.10.2026. Android: Q-176. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}
/* Fokusrahmen auch ohne :focus-visible (Chrome 85, iOS 14.0 bis 15.3; Pruefer-Befund S6) */
:focus { outline: 3px solid var(--fokus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Verteildienst (I-001, js/mitglieder-dienst.js, Skizze prototyp/dienstplan.html) ---------- */
#dienst-karte { margin-top: var(--a16); }
.dienst-karte { border: 2px solid var(--text); }
.dienst-karte.leise-karte { border: var(--rahmen) solid var(--linie); }
.dienst-gross { font: var(--typo-titel); margin: var(--a4) 0; }
.dienst-anfrage { margin-top: var(--a8); }
.tage { list-style: none; margin: 0; padding: 0; border: var(--rahmen) solid var(--linie); border-radius: var(--radius-mittel); background: var(--flaeche); }
.tage > li { padding: var(--a12) var(--a16); border-top: var(--rahmen) solid var(--linie); }
.tage > li:first-child { border-top: 0; }
.tage > li.ich { background: var(--akzent-weich); box-shadow: inset 4px 0 0 var(--akzent); }
.tage > li.ausfall { color: var(--text-3); }
.tag-zeile { display: flex; flex-wrap: wrap; gap: var(--a4) var(--a12); align-items: center; }
.tag-zeile .datum { font: var(--typo-text-betont); min-width: 6.5em; font-variant-numeric: tabular-nums; }
.tag-zeile .wer { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.tag-zeile .tag-text { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.st[data-s="fest"] { color: var(--text); }
.st[data-s="geplant"] { color: var(--text-2); font-weight: 400; }
.st[data-s="ausfall"] { color: var(--warnung); }
.inline-form { margin-top: var(--a8); padding: var(--a16); border: var(--rahmen) solid var(--linie-stark); border-radius: var(--radius-mittel); background: var(--flaeche); box-shadow: var(--schatten-schwebend); }
.ohne-rahmen { border: 0; padding: 0; margin: 0; }
.ohne-rahmen legend { font: var(--typo-text-betont); padding: 0; margin-bottom: var(--a8); }
.wahl-liste { display: grid; gap: var(--a4); margin-bottom: var(--a12); }
.wahl-liste label { display: flex; gap: var(--a8); align-items: center; min-height: var(--groesse-tippflaeche); cursor: pointer; }
.wahl-liste input { width: 1.375rem; height: 1.375rem; margin: 0; flex: none; accent-color: var(--akzent); }
.feld-block { display: block; }
.feld-block > span { display: block; font: var(--typo-text-klein); font-weight: 600; margin-bottom: var(--a4); }
.formknoepfe { display: flex; flex-wrap: wrap; gap: var(--a8); align-items: center; margin-top: var(--a12); }

/* Abstaende, die vorher als style-Attribut in index.html und passwort.html standen; als Klassen, damit die
   Content-Security-Policy kein 'unsafe-inline' fuer Stile braucht (V1 1.3 Abschnitt 10.2, AUF-2-W6) */
.rand-oben-0 { margin-top: 0; }
.rand-oben-4 { margin-top: var(--a4); }
.rand-oben-8 { margin-top: var(--a8); }
.rand-oben-16 { margin-top: var(--a16); }
.rand-12-oben { margin: var(--a12) 0 0; }
.ohne-rand { margin: 0; }
.volle-zeile { flex-basis: 100%; }
.liste-schmal { padding-left: 1.25rem; margin: 0; }