/* Zähler-App (Prompt 48): große Bedienelemente, mit einer Hand bedienbar; keine Schriften oder Bilder von außen.
   Prompt 61: Farben des LBU-Logos (gemessen aus icons/lbu-logo.png: --lbu-blau, --lbu-schiefer); jede Farbe nur hier als
   Variable – Kontrast jedes Text/Hintergrund-Paars nach WCAG AA per Test (konfig/test_web_p61_farben.py). */
:root {
  --lbu-blau: #004694;
  --lbu-schiefer: #33434e;
  --weiss: #ffffff;
  --seite: #f6f7f9;
  --leiste: #e8eef5;
  --warnung-grund: #fff4e5;
  --warnung-text: #8a3b00;
  --warnung-rand: #e65100;
  --rot: #b00020;
  --gruen: #1b5e20;
  --grau: #5f6368;
  --schwarz: #000000;
}
* { box-sizing: border-box; }
/* P48-1: hidden gilt für jedes Element – auch für Knöpfe mit display:block (einzige Regel mit !important) */
[hidden] { display: none !important; }
body { margin: 0; font: 18px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--lbu-schiefer); background: var(--seite); }
header, main { padding: 12px 16px; }
header { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px; color: var(--lbu-schiefer); background: var(--weiss);
  border-bottom: 3px solid var(--lbu-blau); }
.kopf { display: flex; align-items: center; gap: 12px; }
.logo { width: auto; height: 26px; margin: 0; border-radius: 0; }
h1 { margin: 0; font-size: 20px; color: var(--lbu-blau); }
h2 { margin: 12px 0 8px; font-size: 18px; color: var(--lbu-blau); }
section { margin-bottom: 12px; }
button, .knopf { display: block; width: 100%; min-height: 56px; margin: 8px 0; padding: 12px 16px; border: 0;
  border-radius: 10px; font: inherit; font-weight: 600; text-align: center; color: var(--weiss); background: var(--lbu-blau); }
button.zweit, .knopf.zweit, .liste-eintrag { color: var(--lbu-blau); background: var(--weiss); border: 2px solid var(--lbu-blau); }
.liste-eintrag { text-align: left; font-weight: 400; }
button.haupt { min-height: 64px; font-size: 20px; }
button:disabled { opacity: .45; }
/* Prompt 61 Nr. 2: Zustand der Taschenlampe sichtbar (gefüllt = an), nicht nur über aria-pressed */
button[aria-pressed="true"] { color: var(--weiss); background: var(--lbu-blau); }
.reihe { display: flex; gap: 8px; }
.reihe > * { flex: 1; }
.reihe > button { margin: 8px 0 0; padding: 8px; }
/* A7-Befund R2-W8: „Foto aufnehmen“ deutlich abgesetzt von „Anderen Zähler scannen“ (verwirft die Aufnahme) */
button.abgesetzt { margin-top: 24px; }
select { width: 100%; min-height: 52px; font: inherit; padding: 8px; border-radius: 8px; color: var(--lbu-schiefer); background: var(--weiss); }
label { display: block; margin-top: 8px; }
/* Prompt 61: EIN Kamerafenster, immer oben; Höhe nach dem kleinen Sichtbereich (svh), damit „Foto aufnehmen“ und die
   Knöpfe am Fenster im Hochformat ohne Blättern sichtbar bleiben (Messung im Bericht Prompt 61) */
.kamera-rahmen { border: 4px solid var(--seite); border-radius: 14px; transition: border-color .15s ease-out; }
.kamera-rahmen.blitz { border-color: var(--gruen); }
video { display: block; width: 100%; height: 38vh; height: 38svh; object-fit: cover; background: var(--schwarz); border-radius: 10px; }
img { width: 100%; border-radius: 10px; margin-top: 8px; }
.status { margin: 4px 0; color: inherit; }
.schritt { margin: 8px 0 0; font-weight: 600; color: var(--lbu-blau); }
/* P48-8: Zahl der nicht gesendeten Ablesungen, bleibt beim Blättern oben sichtbar */
.leiste { position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 16px; font-weight: 600; color: var(--lbu-schiefer); background: var(--leiste); }
.leiste.offen-warnung { background: var(--warnung-grund); color: var(--warnung-text); }
.hinweis { margin: 0; padding: 12px 16px; color: var(--lbu-schiefer); background: var(--warnung-grund); border-left: 6px solid var(--warnung-rand); }
.fehler { color: var(--rot); }
ul { list-style: none; padding: 0; margin: 0; }
li { background: var(--weiss); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
li .zustand { font-weight: 600; }
li.gesendet .zustand { color: var(--gruen); }
li.abgewiesen .zustand, li.anmeldung .zustand { color: var(--rot); }
li.alt { border: 2px solid var(--warnung-rand); }
/* Prompt 59: Formular „Neuer Zähler“ – Ankreuzfelder groß genug für den Daumen, Textfeld wie die Auswahllisten */
.formular { background: var(--weiss); border-radius: 10px; padding: 4px 12px 12px; }
label.kasten { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 8px 0; }
label.kasten input { width: 28px; height: 28px; flex: none; }
input[type="text"] { width: 100%; min-height: 52px; font: inherit; padding: 8px; border-radius: 8px; border: 1px solid var(--grau);
  color: var(--lbu-schiefer); background: var(--weiss); }
/* Prompt 61 Nr. 3: unzulässiges Zeichen sofort markiert */
input[type="text"].ungueltig { border: 3px solid var(--rot); }
.einzug { margin-left: 12px; padding-left: 12px; border-left: 4px solid var(--leiste); }
.klein { font-size: 15px; color: var(--grau); }
.klein.fehler { color: var(--rot); }
/* Prompt 61: zusammengeklapptes Formular – eine Zeile mit „Ändern“ */
.zeile { display: flex; align-items: center; gap: 8px; }
.zeile > p { flex: 1; margin: 0; }
button.schmal { width: auto; min-height: 44px; margin: 4px 0; padding: 8px 12px; }