/*
  Das Erscheinungsbild von VOWA.

  Zwei Farbwelten, festgelegt durch die Klasse am body (S-46):

  - fachlich: Vorgänge und Kunden, die Arbeitsfläche der Mitarbeiter. Hell.
  - verwaltend: Einstellungen, Anbindungen, Konten, Lizenz, Protokoll.
    Dauerhaft dunkel, ohne Umschalter. Wer dort ist, ändert etwas für alle;
    das muss aus dem Augenwinkel erkennbar sein und nicht beim Hinsehen.

  Die Regeln darunter sind für beide dieselben; nur die Farben unterscheiden
  sich. Ein Umschalter auf dunkel für die fachliche Oberfläche wäre erlaubt
  und ist in dieser Fassung nicht gebaut.

  Kein JavaScript: die Hilfetafel ist ein Kontrollkästchen (Q-12), damit die
  Sicherheitsrichtlinie ohne unsafe-inline bleibt (S-35).
*/

body.fachlich {
  color-scheme: light;
  --grund: #f5f7f9;
  --flaeche: #ffffff;
  --rand: #d8dee4;
  --schrift: #1b2430;
  --gedaempft: #5b6b7a;
  --marke: #0b6bcb;
  --auf-marke: #ffffff;
  --warnung: #b26a00;
  --fehler: #c62828;
  --gut: #2e7d32;
  --blase-kunde: #ffffff;
  --blase-wir: #e3f0ff;
}

body.verwaltend {
  color-scheme: dark;
  --grund: #14181c;
  --flaeche: #1c2228;
  --rand: #2c353d;
  --schrift: #dfe6ec;
  --gedaempft: #93a2ae;
  --marke: #52a5ff;
  --auf-marke: #08121c;
  --warnung: #ffb454;
  --fehler: #ff6b6b;
  --gut: #7bd88f;
  --blase-kunde: #1c2228;
  --blase-wir: #1f3347;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: var(--marke); }

/* ------------------------------------------------------------------ Kopf */

.kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.marke { font-weight: 700; color: var(--marke); }
.bereich { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--gedaempft); }
body.verwaltend .bereich { color: var(--warnung); }
.fassung {
  padding: 2px 8px; border: 1px solid var(--rand); border-radius: 10px;
  color: var(--gedaempft); font-variant-numeric: tabular-nums; font-size: 12px;
}
.luecke { flex: 1; }
.wer { color: var(--gedaempft); font-size: 13px; }
.abmelden { margin: 0; }

.kopfhinweis {
  margin: 0; padding: 8px 18px;
  background: var(--warnung); color: #1b1b1b; font-weight: 600;
}

.navigation {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding: 8px 18px; background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
.navigation a { text-decoration: none; color: var(--schrift); }
.navigation a:hover { color: var(--marke); }
.navigation .trenner { color: var(--rand); }

/* ----------------------------------------------------------------- Inhalt */

main { padding: 22px 18px 90px; max-width: 1280px; }
h1 { margin: 0 0 18px; font-size: 22px; }
h2 { margin: 26px 0 10px; font-size: 17px; }
h3 { margin: 18px 0 6px; font-size: 15px; }

.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.karte h2:first-child, .karte h3:first-child { margin-top: 0; }
.spalten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; }
@media (max-width: 900px) { .spalten { grid-template-columns: 1fr; } }

table { width: 100%; border-collapse: collapse; background: var(--flaeche); }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
th { color: var(--gedaempft); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.marke-klein { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--rand); white-space: nowrap; }
.s-offen_fuer_neue { border-color: var(--marke); color: var(--marke); font-weight: 600; }
.s-offen { border-color: var(--warnung); color: var(--warnung); }
.s-warten_auf_kunde { color: var(--gedaempft); }
.s-abgeschlossen { color: var(--gut); border-color: var(--gut); }
.p-hoch, .p-dringend { color: var(--fehler); border-color: var(--fehler); font-weight: 600; }

.hinweis { padding: 10px 12px; border-left: 3px solid var(--warnung); background: var(--flaeche); }
.fehler { padding: 10px 12px; border-left: 3px solid var(--fehler); background: var(--flaeche); }
.gut { padding: 10px 12px; border-left: 3px solid var(--gut); background: var(--flaeche); }
ul.fehler { list-style: disc inside; }
.gedaempft { color: var(--gedaempft); font-size: 13px; }

.meldungen { list-style: none; padding: 0; margin: 0 0 16px; }
.meldung { padding: 10px 12px; margin-bottom: 6px; border-left: 3px solid var(--marke); background: var(--flaeche); }
.meldung.error { border-left-color: var(--fehler); }
.meldung.success { border-left-color: var(--gut); }

code, .geheimnis {
  padding: 2px 6px; background: var(--grund); border: 1px solid var(--rand); border-radius: 4px;
  font-family: Consolas, "SF Mono", monospace; letter-spacing: .04em; word-break: break-all;
}
.vortext { white-space: pre-wrap; }

/* -------------------------------------------------------------- Verlauf */

.verlauf { display: flex; flex-direction: column; gap: 8px; }
.blase { max-width: 80%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rand); background: var(--blase-kunde); white-space: pre-wrap; }
.blase.ausgehend { align-self: flex-end; background: var(--blase-wir); }
.blase .wer-zeile { font-size: 12px; color: var(--gedaempft); margin-bottom: 2px; white-space: normal; }
.blase.nicht-gesendet { border-color: var(--fehler); }
.blase .grund { color: var(--fehler); font-size: 12px; white-space: normal; }

/* ---------------------------------------------------------------- Formular */

form.schmal { max-width: 460px; }
form.reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
form.reihe label { margin: 0; }
form.reihe button { margin-top: 0; }
form.inline { display: inline; }

label { display: block; margin: 12px 0 4px; color: var(--gedaempft); font-size: 13px; }
.helptext { display: block; color: var(--gedaempft); font-size: 12px; margin-top: 2px; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; padding: 8px 10px;
  background: var(--grund); border: 1px solid var(--rand); border-radius: 6px;
  color: var(--schrift); font: inherit;
}
form.reihe input, form.reihe select { width: auto; min-width: 160px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; }

button, .knopf {
  display: inline-block; margin-top: 14px; padding: 8px 14px;
  background: var(--marke); border: 0; border-radius: 6px;
  color: var(--auf-marke); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
button.zweitrangig, .knopf.zweitrangig { background: transparent; border: 1px solid var(--rand); color: var(--schrift); font-weight: 400; }
button.gefahr { background: var(--fehler); color: #fff; }
.abmelden button { margin: 0; padding: 5px 11px; background: transparent; border: 1px solid var(--rand); color: var(--gedaempft); font-weight: 400; }

.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.reiter a { padding: 4px 12px; border: 1px solid var(--rand); border-radius: 14px; text-decoration: none; color: var(--schrift); }
.reiter a.aktiv { background: var(--marke); color: var(--auf-marke); border-color: var(--marke); }

/* ------------------------------------------------------------ Hilfetafel */

.hilfe-schalter { position: absolute; opacity: 0; pointer-events: none; }
.hilfe-knopf {
  position: fixed; right: 20px; bottom: 20px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 50%;
  color: var(--marke); font-size: 20px; font-weight: 700; cursor: pointer; user-select: none;
}
.hilfe-schalter:focus-visible + .hilfe-knopf { outline: 2px solid var(--marke); outline-offset: 2px; }
.hilfe-tafel {
  position: fixed; top: 0; right: 0; width: min(440px, 92vw); height: 100%;
  padding: 20px 22px 70px; overflow-y: auto;
  background: var(--flaeche); border-left: 1px solid var(--rand);
  transform: translateX(100%); transition: transform .16s ease-out;
}
.hilfe-schalter:checked ~ .hilfe-tafel { transform: translateX(0); }
.hilfe-tafel h2 { margin-top: 0; }
.hilfe-tafel dt { margin-top: 10px; font-weight: 600; color: var(--marke); }
.hilfe-tafel dd { margin: 2px 0 0; color: var(--gedaempft); }
.hilfe-tafel ol, .hilfe-tafel ul { padding-left: 20px; color: var(--gedaempft); }
@media (prefers-reduced-motion: reduce) { .hilfe-tafel { transition: none; } }