/* Anzeige-Einstellungen (22.09.2026): wertet die data-Attribute aus, die
   js/anzeige.js am <html> setzt. Wird als letztes Stylesheet geladen und
   ueberstimmt so die Farben und Groessen der Seiten. Fuenf Hilfen:
   data-schrift (normal | gross | sehr-gross), data-lesehilfe (Legasthenie),
   data-farben (standard | farbsicher), data-kontrast, data-ruhe. */

/* ---------------- Knoepfe und Dialog ---------------- */
.benutzer .benutzer-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.benutzer .benutzer-knoepfe button { margin-top: 0; }
.login-fuss .anzeige-knopf-leise { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: rgba(255, 255, 255, 0.6); font: inherit; font-size: 12.5px; font-weight: 400; cursor: pointer; }
.login-fuss .anzeige-knopf-leise:hover { color: #fff; text-decoration: underline; background: none; transform: none; }
header .anzeige-knopf { margin-left: auto; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: none; padding: 8px 14px; font-size: 13.5px; white-space: nowrap; }
header .anzeige-knopf:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); border-color: #fff; transform: none; }

.anzeige-dialog { border: 0; border-radius: 18px; padding: 0; width: min(540px, calc(100vw - 32px)); box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.5); color: var(--schwarz); background: #fff; }
.anzeige-dialog::backdrop { background: rgba(29, 29, 27, 0.45); }
.anzeige-form { display: grid; gap: 14px; padding: 24px 26px; }
.anzeige-form h2 { font-size: 22px; letter-spacing: -0.02em; }
.anzeige-hinweis { margin: 0; color: var(--grau); font-size: 13.5px; }
.anzeige-gruppe { margin: 0; padding: 12px 16px 14px; border: 1px solid var(--rahmen); border-radius: 12px; display: grid; gap: 10px; min-width: 0; }
.anzeige-gruppe legend { padding: 0 6px; font-weight: 600; }
.anzeige-optionen { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.anzeige-option { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.anzeige-schalter { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; cursor: pointer; }
.anzeige-schalter b { display: block; font-weight: 600; }
.anzeige-form input[type="radio"], .anzeige-form input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--gruen); }
.anzeige-erkl { display: block; color: var(--grau); font-size: 13.5px; line-height: 1.5; }
.anzeige-knoepfe { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.anzeige-form button { min-height: 44px; }

/* ---------------- Schriftgroesse: die ganze Seite waechst ---------------- */
/* zoom skaliert auch feste Pixelmasse; 100dvh-Hoehen werden zurueckgerechnet,
   damit Anmeldung und Inhalt nicht ueber den sichtbaren Bereich hinauswachsen. */
html[data-schrift="gross"] body { zoom: 1.15; }
html[data-schrift="sehr-gross"] body { zoom: 1.3; }
html[data-schrift="gross"] :is(.login, .inhalt) { min-height: calc(100dvh / 1.15); }
html[data-schrift="sehr-gross"] :is(.login, .inhalt) { min-height: calc(100dvh / 1.3); }

/* ---------------- Lesehilfe (Legasthenie) ---------------- */
/* OpenDyslexic nur, wenn sie auf dem Geraet installiert ist (local(), kein
   Netz); sonst Verdana/Tahoma - breite, offene Buchstaben. */
@font-face { font-family: "Lesehilfe"; src: local("OpenDyslexic"), local("OpenDyslexic-Regular"), local("OpenDyslexic Regular"); }
@font-face { font-family: "Lesehilfe"; font-weight: bold; src: local("OpenDyslexic-Bold"), local("OpenDyslexic Bold"); }
html[data-lesehilfe="1"] body {
  font-family: "Lesehilfe", Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.035em; word-spacing: 0.16em; line-height: 1.7;
  --grund: #f7f2e6; --flaeche: #fffdf8; --beige-zart: #f4eee0; --beige-hell: #ebe3d1;
}
html[data-lesehilfe="1"] :is(h1, h2, h3, b, strong, legend, th, .kicker, .login-kicker, .ll-bereich, .marke .titel, .mobilkopf .titel,
  .tafel > h2, .feldkopf h2, .abschnitt, .chatliste-kopf b, .ll-tabelle tr.ll-gruppe td, .status, .login-formular label,
  .ll-pos-kopf .ll-bereich, .qm-schritt) { letter-spacing: 0.02em; text-transform: none; }
html[data-lesehilfe="1"] .assistent::before { letter-spacing: 0.02em; text-transform: none; }
html[data-lesehilfe="1"] :is(p, li, .blase, .hinweis, td, label, dd, dt, .start-karte p, .login-marke p, .ll-pos-kopf, .ll-warnung, .anzeige-erkl) { line-height: 1.8; }
html[data-lesehilfe="1"] :is(em, i) { font-style: normal; font-weight: 600; }
html[data-lesehilfe="1"] .blase { max-width: 68ch; }
html[data-lesehilfe="1"] :is(main, .tafel, .blase, .login-marke) { text-align: left; }
html[data-lesehilfe="1"] :is(input, select, textarea, button) { letter-spacing: 0.03em; }
html[data-lesehilfe="1"] body.angemeldet .start-hero, html[data-lesehilfe="1"] body.arbeitsbereich .start-hero { letter-spacing: 0.02em; }

/* ---------------- Farbsichere Statusfarben ---------------- */
/* Rot-Gruen-Schwaeche ist die haeufigste: Erfolg wird Blau, Fehler Orange,
   Hinweis Gelb (dunkler Text), Beschaedigt Violett - nach der Okabe-Ito-
   Palette, abgedunkelt auf mindestens 4,5:1. Jeder Status traegt ein Zeichen. */
html[data-farben="farbsicher"] body { --rot: #9c3d00; --fs-blau: #005b8e; --fs-blau-hell: #e1eef8; --fs-blau-rand: #b9d3ea;
  --fs-orange: #9c3d00; --fs-orange-hell: #fbe6d9; --fs-orange-rand: #efc4a8; --fs-gelb: #6b5200; --fs-gelb-hell: #fff3c4; --fs-gelb-rand: #e8d27a;
  --fs-lila: #8a3d6c; --fs-lila-hell: #f6e3ee; --fs-lila-rand: #e0b8cf; --fs-grau: #3b4a5c; --fs-grau-hell: #e7eaee; --fs-grau-rand: #c9d0d9; }
/* Erfolg */
html[data-farben="farbsicher"] :is(.status.s-ERFOLGREICH, .status.s-ABGESCHLOSSEN, .status.p-GELADEN) { background: var(--fs-blau-hell); color: var(--fs-blau); border-color: var(--fs-blau-rand); }
html[data-farben="farbsicher"] :is(.status.s-ERFOLGREICH, .status.s-ABGESCHLOSSEN, .status.p-GELADEN)::before { content: "✓ "; }
/* Hinweis / laufend */
html[data-farben="farbsicher"] :is(.status.s-MANUELLE_PRUEFUNG, .status.s-IN_VERLADUNG, .status.p-TEILMENGE, .status.s-DRY_RUN, .status.s-lauf) { background: var(--fs-gelb-hell); color: var(--fs-gelb); border-color: var(--fs-gelb-rand); }
html[data-farben="farbsicher"] :is(.status.s-IN_VERLADUNG, .status.p-TEILMENGE)::before { content: "◐ "; }
html[data-farben="farbsicher"] :is(.status.s-MANUELLE_PRUEFUNG, .status.s-DUBLETTE)::before { content: "! "; }
/* Fehler / fehlt */
html[data-farben="farbsicher"] :is(.status.s-FEHLER, .status.p-FEHLT) { background: var(--fs-orange-hell); color: var(--fs-orange); border-color: var(--fs-orange-rand); }
html[data-farben="farbsicher"] :is(.status.s-FEHLER, .status.p-FEHLT)::before { content: "✕ "; }
/* Beschaedigt / Dublette */
html[data-farben="farbsicher"] :is(.status.p-BESCHAEDIGT, .status.s-DUBLETTE) { background: var(--fs-lila-hell); color: var(--fs-lila); border-color: var(--fs-lila-rand); }
html[data-farben="farbsicher"] .status.p-BESCHAEDIGT::before { content: "! "; }
/* Freigegeben: neutral blaugrau, damit es sich vom Erfolgsblau unterscheidet */
html[data-farben="farbsicher"] .status.s-FREIGEGEBEN { background: var(--fs-grau-hell); color: var(--fs-grau); border-color: var(--fs-grau-rand); }
/* Ladeliste: Karten, Knoepfe, Balken, Hinweise */
html[data-farben="farbsicher"] .ll-pos-knoepfe .ll-ok { background: linear-gradient(180deg, #0a6ea6, var(--fs-blau)); border-color: var(--fs-blau); }
html[data-farben="farbsicher"] .ll-pos-knoepfe .ll-ok:hover:not(:disabled) { background: #0a6ea6; }
html[data-farben="farbsicher"] .ll-pos-knoepfe .ll-teil { color: var(--fs-gelb); border-color: var(--fs-gelb-rand); background: var(--fs-gelb-hell); }
html[data-farben="farbsicher"] .ll-pos-knoepfe .ll-fehlt { color: var(--fs-orange); border-color: var(--fs-orange-rand); background: var(--fs-orange-hell); }
html[data-farben="farbsicher"] .ll-pos-knoepfe .ll-schaden { color: var(--fs-lila); border-color: var(--fs-lila-rand); background: var(--fs-lila-hell); }
html[data-farben="farbsicher"] .ll-pos.p-FEHLT { border-color: var(--fs-orange-rand); border-left: 4px solid var(--fs-orange); }
html[data-farben="farbsicher"] .ll-pos.p-TEILMENGE { border-color: var(--fs-gelb-rand); border-left: 4px solid var(--fs-gelb); }
html[data-farben="farbsicher"] .ll-pos.p-BESCHAEDIGT { border-left: 4px solid var(--fs-lila); }
html[data-farben="farbsicher"] .ll-pos.p-GELADEN { border-left: 4px solid var(--fs-blau); }
html[data-farben="farbsicher"] .ll-pos-soll .ll-rest { color: var(--fs-gelb); }
html[data-farben="farbsicher"] .ll-balken > div { background: linear-gradient(90deg, #0a6ea6, var(--fs-blau)); }
html[data-farben="farbsicher"] .ll-warnung { border-color: var(--fs-gelb); background: var(--fs-gelb-hell); }
html[data-farben="farbsicher"] .ll-warnung.gut { border-color: var(--fs-blau); background: var(--fs-blau-hell); }
html[data-farben="farbsicher"] .ll-meldung { border-color: var(--fs-blau); background: var(--fs-blau-hell); }
html[data-farben="farbsicher"] .ll-offenliste div { border-color: var(--fs-gelb); background: var(--fs-gelb-hell); }
html[data-farben="farbsicher"] .ll-offenliste div.fehlt { border-color: var(--fs-orange); background: var(--fs-orange-hell); }
html[data-farben="farbsicher"] .ll-tabelle tr.ll-neu td { background: var(--fs-blau-hell); }
html[data-farben="farbsicher"] .ll-tabelle tr.ll-unsicher td { background: var(--fs-gelb-hell); }
html[data-farben="farbsicher"] .arbeitsbereich .ll-vorbereitet.an { background: var(--fs-grau-hell); color: var(--fs-grau); border-color: var(--fs-grau-rand); }
/* QM: Kennzahlen und Hinweise */
html[data-farben="farbsicher"] .kachel.gut::before, html[data-farben="farbsicher"] .kachel.gut b { background-color: var(--fs-blau); color: var(--fs-blau); }
html[data-farben="farbsicher"] .kachel.gut b { background: none; }
html[data-farben="farbsicher"] .kachel.offen::before { background: var(--fs-gelb); }
html[data-farben="farbsicher"] .kachel.offen b { color: var(--fs-gelb); }
html[data-farben="farbsicher"] .kachel.rot::before { background: var(--fs-orange); }
html[data-farben="farbsicher"] .kachel.rot b { color: var(--fs-orange); }
html[data-farben="farbsicher"] .dropzone.aktiv { border-color: var(--fs-blau); box-shadow: inset 0 -4px 0 var(--fs-blau), 0 0 0 4px rgba(0, 91, 142, 0.25); }
/* Chat: Fundstellen-Markierung mit Rahmen statt nur Farbe */
html[data-farben="farbsicher"] .treffer mark { background: var(--fs-blau); }
html[data-farben="farbsicher"] .beleg mark { outline: 2px solid var(--fs-gelb); outline-offset: 0; }

/* ---------------- Hoher Kontrast (manuell, zusaetzlich zur Systemeinstellung) ---------------- */
html[data-kontrast="1"] body { --grau: #2e2e2e; --rahmen: #5a5a5a; --schwarz: #000; --beige-hell: #d9d9d9; --beige-zart: #f1f1f1;
  --grund: #fff; --flaeche: #fff; --leiste-text: #fff; --hero-neben: #fff; --hero-akzent: #fff; --fokus: rgba(0, 0, 0, 0.6);
  background: #fff; color: #000; }
html[data-kontrast="1"] body:is(.angemeldet, .arbeitsbereich) { --grau: #2e2e2e; --rahmen: #5a5a5a; --beige-hell: #d9d9d9; --beige-zart: #f1f1f1; --grund: #fff; }
html[data-kontrast="1"] :is(input:not([type=checkbox]):not([type=radio]), select, textarea, .ll-chip, .status, .ll-karte, .ll-pos, .tafel, .start-karte, .ll-knopflink, .datei-chip, .anhang-chip, .quelle, .treffer, .beleg, .ordner, .dok-eintrag, .eingabezeile, .kachel) { border-width: 2px; }
html[data-kontrast="1"] :is(button.leise, button.klein, button.gefahr) { border-width: 2px; border-color: #5a5a5a; }
html[data-kontrast="1"] main a:not(.ll-knopflink):not(.dok-eintrag):not(.ll-karte), html[data-kontrast="1"] .blase a, html[data-kontrast="1"] .leisten-fuss a, html[data-kontrast="1"] .login-fuss a { text-decoration: underline; }
html[data-kontrast="1"] .hinweis { color: #2e2e2e; }
html[data-kontrast="1"] :is(.angemeldet, .arbeitsbereich) .seitentitel::after, html[data-kontrast="1"] :is(.angemeldet, .arbeitsbereich) .inhalt::before { display: none; }
html[data-kontrast="1"] .ll-pos.p-GELADEN, html[data-kontrast="1"] .ll-pos.p-BESCHAEDIGT { opacity: 1; }
html[data-kontrast="1"] :is(.angemeldet, .arbeitsbereich) .seitenleiste { background: #04281b; }
html[data-kontrast="1"] .navigation a { color: #fff; }
html[data-kontrast="1"] th { color: #000; }
html[data-kontrast="1"] ::placeholder { color: #4a4a4a; opacity: 1; }
html[data-kontrast="1"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #000; outline-offset: 2px; }
/* Anmeldeseite bleibt dunkel: dort alles Weiss statt halbtransparent, Fokus in Weiss */
html[data-kontrast="1"] :is(.login-formular .hinweis, .login-formular label, .login-marke p, .login-fuss a, .login-fuss .anzeige-knopf-leise, .login-kicker) { color: #fff; }
html[data-kontrast="1"] .login-formular input { background: #06331f; border-color: #fff; }
html[data-kontrast="1"] .login :is(a, button, input):focus-visible { outline-color: #fff; }

/* ---------------- Weniger Bewegung (manuell, zusaetzlich zur Systemeinstellung) ---------------- */
html[data-ruhe="1"] *, html[data-ruhe="1"] *::before, html[data-ruhe="1"] *::after { animation: none !important; transition: none !important; }
html[data-ruhe="1"] :is(.tafel, .navigation a, .start-karte, .chat-eintrag, .dok-eintrag, .kachel, .dropzone, .quelle):hover { transform: none; }
html[data-ruhe="1"] { scroll-behavior: auto; }

/* Windows-Kontrastmodus: Zeichen der Statusfarben auch dort zeigen */
@media (forced-colors: active) {
  .anzeige-dialog { border: 1px solid; }
}