/* Gerüst der Zentrale (plan-design.md). Jeder Wert steht genau einmal, hier oben als Variable (Regel 26); darunter
   stehen nur Verweise darauf. Farben als light-dark(hell, dunkel): hell ruhig mit einem Akzent Blau, dunkel fast
   schwarz mit einem Akzent Bernstein. Die Kontraste rechnet nachweis-design/kontrast.py nach (Regel 17). */
:root {
  color-scheme: light dark;
  /* farben */
  --grund: light-dark(#f5f4f1, #0b0b0b);
  --flaeche: light-dark(#ffffff, #161616);
  --text: light-dark(#1c1c1a, #ecebe8);
  --leise: light-dark(#5f5e59, #a3a19b);
  --linie: light-dark(#e1dfd8, #2a2a28);
  --rand: light-dark(#8a877f, #75736d);
  --druck: light-dark(#ebe9e3, #232321);
  --akzent: light-dark(#1f5fbf, #f2b544);
  --akzent-grund: light-dark(#e8eef9, #2a2212);
  --akzent-text: var(--flaeche);
  --warn: light-dark(#b3261e, #f4aca7);
  --warn-grund: light-dark(#fbecea, #2d1513);
  --ok: light-dark(#1e6b30, #8fd19e);
  --ok-grund: light-dark(#e8f3eb, #11241a);
  /* schrift: in rem, damit die schriftgröße des systems gilt (Regel 5); klein und eng (Regel 1) */
  --familie: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --familie-fest: ui-monospace, monospace;
  --schrift: .875rem;
  --schrift-klein: .75rem;
  --schrift-titel: 1rem;
  --schrift-gross: 1.25rem;
  --schrift-druck: 10pt;
  --zeile-eng: 1.3;
  --zeile-text: 1.4;
  --fett: 600;
  --halbfett: 500;
  --sperrung: .12em;
  /* abstände, ecken, striche */
  --abstand: .75rem;
  --luecke: .5rem;
  --luecke-klein: .25rem;
  --rund: .625rem;
  --rund-klein: .375rem;
  --strich: 1px;
  --strich-dick: 2px;
  /* größen: trefferfläche mindestens 44 px (Regel 4), breiten fließend (Regel 33) */
  --treffer: 44px;
  --treffer-klein: 2rem;
  --seite-breite: 60rem;
  --feld-breite: 9rem;
  --blase-breite: 88%;
  --qr-breite: min(80vw, 20rem);
  --vorschau: 3.5rem;
  --bild-hoehe: 60vh;
  --eingabe-hoehe: 40vh;
  --seite-hoehe: 100dvh;
  /* zeit (Regel 32: höchstens 150 ms; ladezeichen erst nach echter wartezeit, Regel 20) */
  --dauer: 120ms;
  --warte: 300ms;
  /* deckkraft und ebenen */
  --blass: .55;
  --gedaempft: .8;
  --ebene-kopf: 2;
  --ebene-meldung: 3;
  /* wand, stufe „groß“ (B16): aus 3 m lesbar; schrift ab 3,5 cm bei 82 cm höhe = 4,3 % */
  --wand-gross: 6.6vh;
  --wand-mittel: 5.4vh;
  --wand-klein: 4.4vh;
  --wand-titel: 3.2vh;
  --wand-rand-hoch: 2.5vh;
  --wand-rand-quer: 3vw;
  --wand-luecke: 1.2vh;
  --wand-hoehe: 95vh;
  --wand-spalte: 1.15fr;
  --wand-text-anteil: 60%;
  --wand-zeilen: 2;
  --wand-zeilen-frage: 4;
}
/* wahl in der app (Regel 14): „Hell“ sperrt auch das automatische umfärben von chrome (Regel 13) */
:root[data-theme="hell"] { color-scheme: only light; }
:root[data-theme="dunkel"] { color-scheme: only dark; }

* { box-sizing: border-box; }
/* oberflächentest 21.10.: „hidden“ gilt auch gegen display einer klasse (.knopf blendete zurück, menü und
   „weitere laden“ nie aus) */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--grund); color: var(--text); }
/* handy: kein blaues tipp-kästchen (Regel 6), kein doppeltipp-zoom (Regel 7), kein neuladen durch herunterziehen
   (Regel 9); die schrift am body in rem, damit die schriftgröße des systems gilt (Regel 5) */
html { -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior-y: contain; }
/* gleich breite ziffern (Regel 16), deutsche silbentrennung nach lang="de" (Regel 15) */
body { min-height: var(--seite-hoehe); padding-bottom: env(safe-area-inset-bottom); font-variant-numeric: tabular-nums;
       font-family: var(--familie); font-size: var(--schrift); line-height: var(--zeile-eng);
       overscroll-behavior-y: contain; hyphens: auto; -webkit-hyphens: auto; }
.geheim, .code-gross, input, textarea, select, .zeit, .kopf h1, .marke, .knopf { hyphens: manual; -webkit-hyphens: manual; }
/* kamera-loch und gestenleiste (Regel 10): oben, unten und quer an den seiten */
.kopf { position: sticky; top: 0; z-index: var(--ebene-kopf); display: flex; align-items: center; gap: var(--luecke);
        padding: calc(env(safe-area-inset-top) + var(--luecke)) calc(env(safe-area-inset-right) + var(--abstand))
                 var(--luecke) calc(env(safe-area-inset-left) + var(--abstand));
        background: var(--grund); border-bottom: var(--strich) solid var(--linie); }
/* ladezeichen (Regel 20): eine linie unter dem kopf, erst nach echter wartezeit */
.kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--strich-dick);
               background: var(--akzent); opacity: 0; pointer-events: none; }
html.laedt .kopf::after, .laden { animation: erscheinen var(--dauer) linear var(--warte) both; }
[aria-busy="true"] { cursor: progress; }
.knopf[aria-busy="true"] { animation: daempfen var(--dauer) linear var(--warte) both; }
@keyframes erscheinen { from { opacity: 0; } to { opacity: 1; } }
@keyframes daempfen { from { opacity: 1; } to { opacity: var(--blass); } }
.kopf h1 { flex: 1; margin: 0; font-size: var(--schrift-titel); font-weight: var(--fett); overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
main { max-width: var(--seite-breite); margin: 0 auto;
       padding: var(--abstand) calc(env(safe-area-inset-right) + var(--abstand)) var(--abstand)
                calc(env(safe-area-inset-left) + var(--abstand)); }
h2 { font-size: var(--schrift); margin: var(--abstand) 0 var(--luecke); color: var(--leise); font-weight: var(--fett); }
p { line-height: var(--zeile-text); }
.leise { color: var(--leise); }
.karte { background: var(--flaeche); border: var(--strich) solid var(--linie); border-radius: var(--rund);
         padding: var(--abstand); margin-bottom: var(--luecke); }
.liste { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: var(--strich) solid var(--linie);
         border-radius: var(--rund); overflow: hidden; }
.liste li { border-top: var(--strich) solid var(--linie); }
.liste li:first-child { border-top: 0; }
.eintrag { display: flex; gap: var(--abstand); width: 100%; padding: var(--luecke) var(--abstand); background: none;
           border: 0; color: inherit; font: inherit; text-align: left; align-items: baseline; }
button.eintrag, a.eintrag { min-height: var(--treffer); align-items: center; cursor: pointer; text-decoration: none; }
button.eintrag:active, a.eintrag:active { background: var(--druck); }
.eintrag .haupt { flex: 1; min-width: 0; }
.eintrag .titel { display: block; overflow-wrap: anywhere; }
.eintrag .unter { display: block; color: var(--leise); font-size: var(--schrift-klein); overflow-wrap: anywhere; }
.eintrag .zeit { color: var(--leise); font-size: var(--schrift-klein); white-space: nowrap; }
dl { display: flex; flex-wrap: wrap; gap: 0 var(--abstand); margin: 0; }
.feld { flex: 1 1 var(--feld-breite); min-width: 0; margin: 0 0 var(--luecke); }
.feld.lang { flex-basis: 100%; }
.feld dd .knopf.klein { margin-left: var(--luecke-klein); }
.feld dt { color: var(--leise); font-size: var(--schrift-klein); }
.feld dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
label { display: block; margin: var(--abstand) 0 var(--luecke-klein); color: var(--leise); font-size: var(--schrift-klein); }
input, select, textarea { width: 100%; padding: var(--luecke); font: inherit; color: inherit; background: var(--flaeche);
                          border: var(--strich) solid var(--rand); border-radius: var(--rund-klein);
                          scroll-margin: calc(var(--treffer) + var(--abstand)) 0 var(--abstand); }
input:not([type="checkbox"]):not([type="radio"]), select { min-height: var(--treffer); }
input.code { font-family: var(--familie-fest); letter-spacing: var(--sperrung); text-transform: lowercase; }
input.code::placeholder { text-transform: none; letter-spacing: normal; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--luecke-klein);
         min-height: var(--treffer); padding: var(--luecke) var(--abstand); border-radius: var(--rund); border: 0;
         background: var(--akzent); color: var(--akzent-text); font: inherit; font-weight: var(--fett); cursor: pointer;
         text-decoration: none; position: relative; }
.knopf:active:not(:disabled) { opacity: var(--gedaempft); }
.knopf.zweit:active:not(:disabled), .knopf.leise:active:not(:disabled) { opacity: 1; background: var(--druck); }
.knopf[aria-pressed="true"] { background: var(--akzent-grund); border-color: var(--akzent); color: var(--text); }
.knopf.breit { width: 100%; margin-top: var(--luecke); }
.knopf.leise { background: none; color: var(--text); padding: var(--luecke-klein) var(--luecke);
               font-size: var(--schrift-gross); min-width: var(--treffer); }
.knopf.zweit { background: var(--flaeche); color: var(--text); border: var(--strich) solid var(--rand); }
.knopf.warn { background: var(--warn); color: var(--flaeche); }
.knopf:disabled { opacity: var(--blass); }
.meldung { display: flex; align-items: center; gap: var(--abstand);
           position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--abstand)); transform: translateX(-50%);
           max-width: calc(100% - 2 * var(--abstand)); padding: var(--luecke) var(--abstand); border-radius: var(--rund);
           background: var(--text); color: var(--grund); z-index: var(--ebene-meldung); }
.meldung.fehler { background: var(--warn); color: var(--flaeche); }
.meldung.tun { cursor: pointer; }
.meldung .knopf { flex: none; }
.qr { display: block; width: var(--qr-breite); height: auto; margin: var(--luecke) auto; border-radius: var(--rund-klein); }
.code-gross { font-family: var(--familie-fest); font-size: var(--schrift-gross); letter-spacing: var(--sperrung); text-align: center; }
/* status zurückhaltend: heller grund, ring, kräftiges zeichen, keine vollen farbigen pillen */
.marke { display: inline-block; padding: 0 var(--luecke-klein); border-radius: var(--rund-klein); font-size: var(--schrift-klein);
         background: var(--akzent-grund); border: var(--strich) solid var(--akzent); color: var(--text); }
.marke.ok { background: var(--ok-grund); border-color: var(--ok); }
.marke.warn { background: var(--warn-grund); border-color: var(--warn); }
.marke.ok::before { content: "✓ "; color: var(--ok); font-weight: var(--fett); }
.marke.warn::before { content: "! "; color: var(--warn); font-weight: var(--fett); }
.knopf.klein { min-height: var(--treffer-klein); padding: var(--luecke-klein) var(--luecke); font-size: var(--schrift-klein);
               font-weight: var(--halbfett); vertical-align: middle; }
/* klein im bild, die trefferfläche bleibt 44 px hoch (Regel 4) */
.knopf.klein::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 100%; min-height: var(--treffer);
                      transform: translateY(-50%); }
.geheim { font-family: var(--familie-fest); overflow-wrap: anywhere; user-select: all; }
.frage .knopf { margin-top: var(--luecke); }
.frage input { margin-top: var(--abstand); }
.codes { padding-left: var(--schrift-gross); }
/* raster (Regel 2): kurze knöpfe nebeneinander, umbruch erst bei platzmangel, die zeile ganz gefüllt */
.raster { display: flex; flex-wrap: wrap; gap: var(--luecke-klein); margin-top: var(--luecke); }
.raster > * { flex: 1 1 auto; }
.raster > .knopf { width: auto; margin-top: 0; }
/* leerzustand (Regel 19): sagt, was zu tun ist */
.leer { margin: 0 0 var(--luecke); padding: var(--abstand); border: var(--strich) dashed var(--rand); border-radius: var(--rund);
        color: var(--leise); text-align: center; line-height: var(--zeile-text); }
.codes .code-gross { text-align: left; margin: var(--luecke-klein) 0; }
/* drucken (plan-drucken.md): schwarz auf weiß, titel und stand oben, ohne kopf, knöpfe, meldungen und eingaben */
.druckkopf, .nur-druck { display: none; }
@media print {
  :root, :root[data-theme] { color-scheme: only light; }
  .kopf, .meldung, .knopf, input, textarea, select, .geheim, body.notfall h2 { display: none !important; }
  .druckkopf { display: block; margin: 0 0 var(--abstand); font-size: var(--schrift-druck); }
  .nur-druck { display: inline; }
  .karte { border: 0; padding: 0; }
  body, html { background: var(--flaeche); color: var(--text); }
  * { color: var(--text) !important; background: transparent !important; box-shadow: none !important; }
  .feld, .liste li, .karte p { break-inside: avoid; }
  main { max-width: none; margin: 0; padding: 0; }
}
/* gespräch und offene fragen (B8) */
.klein-text { font-size: var(--schrift-klein); }
.gespraech { display: flex; flex-direction: column; gap: var(--luecke); padding: var(--luecke) 0; }
.blase { max-width: var(--blase-breite); padding: var(--luecke) var(--abstand); border-radius: var(--rund);
         background: var(--flaeche); border: var(--strich) solid var(--linie); overflow-wrap: anywhere; align-self: flex-start; }
.blase.du { align-self: flex-end; background: var(--akzent-grund); border-color: var(--akzent); }
.blase .kopfzeile { font-size: var(--schrift-klein); color: var(--leise); margin-bottom: var(--luecke-klein); }
.blase .text { white-space: pre-wrap; }
.blase .bezug, .bezug-feld { font-size: var(--schrift-klein); color: var(--leise); border-left: var(--strich-dick) solid currentColor;
                             padding-left: var(--luecke); margin-bottom: var(--luecke-klein); }
.bezug-feld { display: flex; align-items: center; justify-content: space-between; }
.blase .umschrift { font-style: italic; margin-top: var(--luecke-klein); white-space: pre-wrap; }
.blase audio { display: block; width: 100%; margin-top: var(--luecke-klein); }
.blase img { display: block; max-width: 100%; border-radius: var(--rund-klein); }
.blase a { color: inherit; }
.schreiben { position: sticky; bottom: 0; background: var(--grund);
             padding: var(--luecke) 0 calc(env(safe-area-inset-bottom) + var(--luecke)); border-top: var(--strich) solid var(--linie); }
.schreiben .zeile { display: flex; gap: var(--luecke); align-items: flex-end; margin-top: var(--luecke); }
.schreiben .zeile > .knopf { flex: 1; }
.schreiben .zeile textarea { flex: 1; min-height: var(--treffer); max-height: var(--eingabe-hoehe); resize: vertical; }
.schreiben .zeile textarea + .knopf { flex: 0 0 auto; }
.zustand { text-align: center; color: var(--leise); font-size: var(--schrift-klein); min-height: var(--zeile-text); }
.frage.erledigt { opacity: var(--blass); }
.frage textarea { margin-top: var(--abstand); }
@media print { .schreiben, #frueher { display: none !important; } }

/* handy (B9): teilen */
.vorschau { width: var(--vorschau); height: var(--vorschau); object-fit: cover; border-radius: var(--rund-klein); flex: none; }
/* c9: das foto oben in einer einzelansicht von „geschickt“, ganz und nicht beschnitten */
.vorschau.gross { display: block; width: 100%; height: auto; max-height: var(--bild-hoehe); object-fit: contain;
                  margin-bottom: var(--abstand); }
p.fehler { color: var(--warn); }

/* wand (B16, plan-b16-wand.md): immer dunkel, ruhig. Dieselben bausteine (überschrift, liste, eintrag, leerzustand)
   in der stufe „groß“ (Regel 29): die zone setzt nur die größen, das aussehen bleibt das der bausteine */
body.wand { color-scheme: only dark; background: var(--grund); color: var(--text); }
.zone { min-width: 0; overflow: hidden; font-size: var(--schrift); }
.zone h2 { margin-top: 0; }
.zone .liste { margin-bottom: var(--luecke); }
.zone .eintrag .titel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--wand-zeilen); overflow: hidden; }
.zone.frage .eintrag .titel { -webkit-line-clamp: var(--wand-zeilen-frage); }
.zone.klein h2 { display: none; }
.zone .leer { text-align: left; }
.zone.gross { --schrift: var(--schrift-gross); }
.zone.mittel { --schrift: var(--schrift-titel); }
.zone h2 { --schrift: var(--schrift-titel); }
/* quer an der wand: aus 3 m lesbar, ohne kopf und mauszeiger (Regel 25) */
@media (orientation: landscape) {
  body.wand { cursor: none; }
  body.wand .kopf { display: none; }
  body.wand main { max-width: none; margin: 0; padding: var(--wand-rand-hoch) var(--wand-rand-quer); }
  .wandflaeche { display: grid; height: var(--wand-hoehe); gap: var(--wand-rand-hoch) var(--wand-rand-quer);
                 grid-template-columns: var(--wand-spalte) 1fr; grid-template-rows: auto 1fr auto;
                 grid-template-areas: "heute frage" "bald post" "zahlen zahlen"; overflow: hidden; }
  .zone.heute { grid-area: heute; } .zone.frage { grid-area: frage; } .zone.bald { grid-area: bald; }
  .zone.post { grid-area: post; } .zone.zahlen { grid-area: zahlen; }
  .zone { --schrift-klein: var(--wand-klein); --abstand: var(--wand-rand-quer); --luecke: var(--wand-luecke); }
  .zone.gross { --schrift: var(--wand-gross); }
  .zone.mittel { --schrift: var(--wand-mittel); }
  .zone.klein { --schrift: var(--wand-klein); }
  .zone h2 { --schrift: var(--wand-titel); }
}