/* ==========================================================================
   ChargeCommand — Oberfläche
   --------------------------------------------------------------------------
   Bisher gab es keine einzige CSS-Datei: 4 947 Zeilen verteilt auf 56
   <style>-Blöcke in den Ansichten, mit 33 mal demselben Farbsatz. 27
   Ansichten verlinkten eine /public/light.css, die es nicht gab.

   Hier steht alles einmal. Farben sind Token, keine festen Werte —
   deshalb funktioniert die dunkle Darstellung, ohne dass eine einzige
   Komponente davon weiß.

   Aufbau:
     1  Token
     2  Grundlagen
     3  Gerüst (Navigation, Kopfzeile, Seite)
     4  Bausteine (Karten, Tabellen, Marken, Kennzahlen)
     5  Formulare
     6  Dialoge und Meldungen
     7  Diagramme
     8  Hilfsklassen
   ========================================================================== */

/* 1 ── Token ─────────────────────────────────────────────────────────── */

:root {
  /* Flächen und Schrift */
  --ground:#EDF0F1; --surface:#FFFFFF; --surface-2:#F5F7F8; --surface-3:#E7ECEE;
  --ink:#0F161B; --ink-2:#33424E; --muted:#63737F; --faint:#8896A1;
  --line:#D6DDE1; --line-soft:#E6EBED;

  /* Leitfarbe: ein tiefes Petrol. Industrie, nicht Software-Startup. */
  --accent:#0E5A61; --accent-soft:#DCEBEC; --accent-ink:#0B474D; --accent-on:#FFFFFF;

  /* Signalfarbe: Warnschild-Bernstein, sparsam eingesetzt */
  --signal:#C98A05; --signal-soft:#FBEFD2;

  /* Zustände — bewusst getrennt von der Leitfarbe */
  --ok:#1C7147;   --ok-soft:#DBEEE3;
  --warn:#B0700B; --warn-soft:#FAEDD5;
  --crit:#A6241D; --crit-soft:#F7DFDD;
  --info:#3B4C9C; --info-soft:#E1E6F7;
  --viol:#6B3E9E; --viol-soft:#EDE4F6;

  /* Navigation: immer dunkel, in beiden Darstellungen */
  --nav:#111C21; --nav-ink:#B7C6CE; --nav-ink-2:#6C7F8A; --nav-on:#FFFFFF;

  --shadow:0 1px 2px rgba(15,22,27,.06), 0 10px 30px -14px rgba(15,22,27,.28);
  --radius:7px; --radius-sm:5px;

  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Archivo", var(--font);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: light;
}

/* Dunkel, wenn das Betriebssystem es sagt — außer der Benutzer hat
   ausdrücklich hell gewählt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --ground:#0C1216; --surface:#131C22; --surface-2:#18232A; --surface-3:#202D35;
    --ink:#E8EFF3; --ink-2:#BECBD4; --muted:#8B9BA6; --faint:#6B7C88;
    --line:#243139; --line-soft:#1D272E;
    --accent:#4EBEC5; --accent-soft:#12333A; --accent-ink:#7FD6DB; --accent-on:#062226;
    --signal:#EDB637; --signal-soft:#332813;
    --ok:#4FBE85;   --ok-soft:#12301F;
    --warn:#E0A340; --warn-soft:#312313;
    --crit:#E4776E; --crit-soft:#331A18;
    --info:#8C9BE8; --info-soft:#1B2140;
    --viol:#B08FE0; --viol-soft:#241B33;
    --nav:#0A1014; --nav-ink:#9FB0BA; --nav-ink-2:#5C6E79;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}

/* Dunkel, weil der Benutzer es gewählt hat — schlägt das Betriebssystem. */
:root[data-theme="dunkel"] {
  --ground:#0C1216; --surface:#131C22; --surface-2:#18232A; --surface-3:#202D35;
  --ink:#E8EFF3; --ink-2:#BECBD4; --muted:#8B9BA6; --faint:#6B7C88;
  --line:#243139; --line-soft:#1D272E;
  --accent:#4EBEC5; --accent-soft:#12333A; --accent-ink:#7FD6DB; --accent-on:#062226;
  --signal:#EDB637; --signal-soft:#332813;
  --ok:#4FBE85;   --ok-soft:#12301F;
  --warn:#E0A340; --warn-soft:#312313;
  --crit:#E4776E; --crit-soft:#331A18;
  --info:#8C9BE8; --info-soft:#1B2140;
  --viol:#B08FE0; --viol-soft:#241B33;
  --nav:#0A1014; --nav-ink:#9FB0BA; --nav-ink-2:#5C6E79;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  color-scheme: dark;
}

/* 2 ── Grundlagen ────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.018em; }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: 16px; font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }

p { margin: 0 0 12px; }
a { color: var(--accent-ink); }
a:hover { text-decoration: underline; }

button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.mono, code, kbd { font-family: var(--font-mono); }
code { font-size: .92em; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* 3 ── Gerüst ────────────────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: 214px minmax(0, 1fr); min-height: 100vh; }

.nav {
  background: var(--nav); color: var(--nav-ink);
  padding: 14px 9px 30px; display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto; max-height: 100vh; position: sticky; top: 0;
}
.nav__brand { display: flex; align-items: center; gap: 8px; padding: 4px 10px 14px; text-decoration: none; }
.nav__brand b { font-family: var(--font-display); color: var(--nav-on); font-size: 14px; letter-spacing: -.01em; }
.nav__brand:hover { text-decoration: none; }
.nav__gruppe {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nav-ink-2); padding: 14px 10px 5px; font-family: var(--font-mono);
}
.nav a.nav__punkt {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: var(--nav-ink); padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.3;
}
.nav a.nav__punkt:hover { background: rgba(255,255,255,.07); color: var(--nav-on); text-decoration: none; }
.nav a.nav__punkt[aria-current="page"] { background: var(--accent); color: var(--accent-on); font-weight: 500; }
.nav__icon { width: 15px; height: 15px; flex: none; opacity: .85; }
.nav a.nav__punkt[aria-current="page"] .nav__icon { opacity: 1; }
.nav__zaehler {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  background: rgba(255,255,255,.12); padding: 1px 5px; border-radius: 9px; min-width: 18px; text-align: center;
}
.nav a[aria-current="page"] .nav__zaehler { background: rgba(0,0,0,.24); }
.nav__zaehler--hot { background: var(--crit); color: #fff; }
.nav__fuss { margin-top: auto; padding: 14px 10px 0; font-size: 11px; color: var(--nav-ink-2); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 12px; padding: 9px 22px;
  border-bottom: 1px solid var(--line); background: var(--surface);
  flex-wrap: wrap; position: sticky; top: 0; z-index: 30;
}
.krumen { font-size: 12px; color: var(--muted); }
.krumen b { color: var(--ink); font-weight: 500; }
.krumen a { color: var(--muted); text-decoration: none; }
.krumen a:hover { color: var(--ink); }
.topbar__rechts { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.avatar {
  width: 27px; height: 27px; border-radius: 50%; background: var(--accent); color: var(--accent-on);
  display: grid; place-items: center; font-size: 11px; font-weight: 600; font-family: var(--font-display);
  text-decoration: none;
}
.avatar:hover { text-decoration: none; filter: brightness(1.1); }

.inhalt { padding: 20px 22px 60px; }
.inhalt--schmal { max-width: 900px; }

.seitenkopf { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.seitenkopf h1 { font-size: 22px; }
.seitenkopf p { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 72ch; }
.seitenkopf__aktionen { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }

/* 4 ── Bausteine ─────────────────────────────────────────────────────── */

.karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.karte__kopf {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; padding: 10px 15px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display);
}
.karte__kopf .rechts {
  margin-left: auto; font-family: var(--font); letter-spacing: 0; text-transform: none;
  font-size: 12px; font-weight: 400; display: flex; gap: 6px; align-items: center;
}
.karte__inhalt { padding: 15px; }

/* Im Dashboard weicht der Titel, nicht die Bedienung. Ohne das rutschen
   Breitenwahl und × bei langen Titeln in eine zweite Zeile, und die
   Kachelköpfe einer Reihe stehen unterschiedlich hoch. */
#raster .karte__kopf { flex-wrap: nowrap; }
#raster .karte__kopf > span:first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#raster .karte__kopf .rechts { flex: 0 0 auto; }

.spalten   { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 14px; align-items: start; }
.spalten--gleich { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.spalten--links  { grid-template-columns: 230px minmax(0,1fr); }
.stapel { display: grid; gap: 14px; }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; }
table.tabelle { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.tabelle th {
  text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 9.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  padding: 8px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2);
}
table.tabelle th a { color: inherit; text-decoration: none; }
table.tabelle th a:hover { color: var(--ink); }
table.tabelle td { padding: 9px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.tabelle tr:last-child td { border-bottom: 0; }
table.tabelle tr.klickbar { cursor: pointer; }
table.tabelle tr.klickbar:hover td { background: var(--surface-2); }
table.tabelle td b { font-weight: 600; }
.unterzeile { display: block; font-size: 11px; color: var(--muted); }
/* Zwischenueberschrift in einer Tabelle — eine Zeile, die eine Gruppe
   benennt statt Daten zu zeigen. */
.tabelle__gruppe { background: var(--surface-3); }
.spalte--breit { min-width: 230px; }
.spalte--rolle { min-width: 96px; }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechtsbuendig { text-align: right; }

.leer { padding: 32px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.leer strong { display: block; color: var(--ink); font-family: var(--font-display); margin-bottom: 4px; }

/* Marken */
.marke {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap; font-weight: 500;
}
.marke--neu  { background: var(--info-soft); color: var(--info); }
.marke--warn { background: var(--warn-soft); color: var(--warn); }
.marke--arb  { background: var(--accent-soft); color: var(--accent-ink); }
.marke--ok   { background: var(--ok-soft); color: var(--ok); }
.marke--crit { background: var(--crit-soft); color: var(--crit); }
.marke--grau { background: var(--surface-3); color: var(--muted); }
.marke--viol { background: var(--viol-soft); color: var(--viol); }
.punkt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.kat {
  display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 20px;
  border: 1px solid; margin: 1px 2px 1px 0; white-space: nowrap;
}
.kat--rot     { color: var(--crit); border-color: var(--crit); background: var(--crit-soft); }
.kat--blau    { color: var(--info); border-color: var(--info); background: var(--info-soft); }
.kat--gelb    { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.kat--gruen   { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.kat--tuerkis { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.kat--violett { color: var(--viol); border-color: var(--viol); background: var(--viol-soft); }
.kat--grau    { color: var(--muted); border-color: var(--line); background: var(--surface-2); }

.chip {
  font-size: 10.5px; padding: 1px 8px; border-radius: 20px; background: var(--surface-2);
  border: 1px solid var(--line-soft); color: var(--ink-2); display: inline-block;
}
.chip--an { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px,1fr)); gap: 9px; margin-bottom: 15px; }
.kennzahl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 13px; }
.kennzahl b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kennzahl span { font-size: 11px; color: var(--muted); display: block; margin-top: 1px; }
.kennzahl em { font-style: normal; font-size: 10.5px; color: var(--faint); display: block; margin-top: 4px; }
.kennzahl--crit b { color: var(--crit); }
.kennzahl--ok b   { color: var(--ok); }
.kennzahl--warn b { color: var(--warn); }
.kennzahl a { text-decoration: none; color: inherit; display: block; }
.kennzahl a:hover b { color: var(--accent-ink); }

/* Beschreibungslisten */
.liste { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 6px 14px; font-size: 12.5px; margin: 0; }
.liste dt { color: var(--muted); white-space: nowrap; }
.liste dd { margin: 0; }

/* Reiter */
.reiter { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); overflow-x: auto; }
.reiter a, .reiter button {
  border: 0; background: none; padding: 8px 12px; font-size: 12.5px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none;
}
.reiter a[aria-selected="true"], .reiter button[aria-selected="true"] {
  color: var(--ink); border-bottom-color: var(--accent); font-weight: 600;
}
.reiter a:hover, .reiter button:hover { color: var(--ink); text-decoration: none; }

/* Zeitstrahl */
.strahl { display: grid; }
.strahl__eintrag { display: grid; grid-template-columns: 92px 14px minmax(0,1fr); gap: 0 9px; padding-bottom: 13px; }
.strahl__wann { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; padding-top: 1px; }
.strahl__linie { position: relative; display: flex; justify-content: center; }
.strahl__linie i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); margin-top: 5px; z-index: 1; }
.strahl__linie::before { content: ""; position: absolute; top: 5px; bottom: -13px; width: 1px; background: var(--line-soft); }
.strahl__eintrag:last-child .strahl__linie::before { display: none; }
.strahl__eintrag--an   .strahl__linie i { background: var(--accent); }
.strahl__eintrag--ok   .strahl__linie i { background: var(--ok); }
.strahl__eintrag--crit .strahl__linie i { background: var(--crit); }
.strahl__was { font-size: 12.5px; line-height: 1.4; }
.strahl__was em { font-style: normal; color: var(--muted); font-size: 11.5px; display: block; }

/* 5 ── Formulare ─────────────────────────────────────────────────────── */

.knopf {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm); padding: 5px 12px; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1.45;
}
.knopf:hover { background: var(--surface-2); text-decoration: none; }
.knopf--haupt { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.knopf--haupt:hover { filter: brightness(1.08); background: var(--accent); }
.knopf--klein { padding: 3px 9px; font-size: 11.5px; }
.knopf--leise { border-color: transparent; background: transparent; color: var(--accent-ink); }
.knopf--leise:hover { background: var(--accent-soft); }
.knopf--gefahr { color: var(--crit); }
.knopf--gefahr:hover { background: var(--crit-soft); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.feld { display: block; margin-bottom: 12px; }
.feld > span, label.beschriftung {
  display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; font-weight: 500;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], select, textarea {
  width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 13px;
}
textarea { resize: vertical; min-height: 60px; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }

.felder-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.felder-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 11px 20px; }
.feldhinweis { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

.filterleiste {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  padding: 12px 15px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
}
.filterleiste .feld { margin: 0; min-width: 130px; }

/* Auswahl als Kachel — für Personen, Firmen, Rollen */
.wahl {
  display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 0 10px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px;
  background: var(--surface); text-align: left; width: 100%; text-decoration: none; color: inherit;
}
.wahl:hover { background: var(--surface-2); text-decoration: none; }
.wahl[aria-pressed="true"], .wahl[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.wahl__punkt { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line); margin-top: 4px; }
.wahl[aria-pressed="true"] .wahl__punkt { border-color: var(--accent); border-width: 4px; }
.wahl__name { font-weight: 600; font-size: 13px; display: block; }
.wahl__zusatz { font-size: 11px; color: var(--muted); font-family: var(--font-mono); display: block; }

/* 6 ── Dialoge und Meldungen ─────────────────────────────────────────── */

.hinweis {
  border-left: 3px solid var(--signal); background: var(--signal-soft);
  padding: 11px 15px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px; color: var(--ink-2);
}
.hinweis b { font-family: var(--font-display); font-size: 12.5px; display: block; margin-bottom: 3px; color: var(--ink); }
.hinweis--crit { border-color: var(--crit); background: var(--crit-soft); }
.hinweis--ok   { border-color: var(--ok);   background: var(--ok-soft); }
.hinweis--info { border-color: var(--accent); background: var(--accent-soft); }

dialog.dialog {
  border: 1px solid var(--line); border-radius: 9px; padding: 0; background: var(--surface);
  color: var(--ink); box-shadow: var(--shadow); width: min(600px, 94vw); max-height: 88vh;
}
dialog.dialog::backdrop { background: rgba(10,16,20,.55); }
.dialog__kopf { padding: 15px 19px 11px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 12px; }
.dialog__kopf h3 { font-size: 16.5px; }
.dialog__schliessen { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; padding: 2px 6px; border-radius: 4px; }
.dialog__schliessen:hover { background: var(--surface-2); color: var(--ink); }
.dialog__inhalt { padding: 17px 19px; overflow-y: auto; }
.dialog__fuss { padding: 12px 19px; border-top: 1px solid var(--line-soft); display: flex; gap: 7px; justify-content: flex-end; background: var(--surface-2); flex-wrap: wrap; }

.blase {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(70px);
  background: var(--nav); color: #fff; padding: 9px 17px; border-radius: 22px; font-size: 12.5px;
  box-shadow: var(--shadow); opacity: 0; transition: .28s; z-index: 99; pointer-events: none;
  max-width: 90vw; text-align: center;
}
.blase--an { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 7 ── Diagramme ─────────────────────────────────────────────────────── */

.balken { display: flex; align-items: flex-end; gap: 3px; height: 88px; }
.balken i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; display: block; opacity: .82; }
.balken i.hoch { background: var(--signal); opacity: 1; }
.achse { display: flex; justify-content: space-between; font-size: 10px; color: var(--faint); margin-top: 5px; font-family: var(--font-mono); }

.stapelbalken { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--surface-3); }
.stapelbalken i { display: block; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; font-size: 11px; color: var(--muted); }
.legende span { display: flex; align-items: center; gap: 5px; }
.legende u { width: 8px; height: 8px; border-radius: 2px; text-decoration: none; display: block; }

.messer { height: 6px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.messer i { display: block; height: 100%; background: var(--accent); }
.messer i.ok { background: var(--ok); } .messer i.warn { background: var(--warn); } .messer i.crit { background: var(--crit); }

.punkte { display: flex; gap: 3px; }
.punkte i { width: 8px; height: 8px; border-radius: 2px; display: block; }

.sparkline { display: block; width: 100%; height: 28px; }

/* Wege ohne Anmeldung — Protokoll- und Auftragsformular.
   Kein Menue, keine Kopfzeile: Wer hier landet, hat keinen Zugang zu
   ChargeCommand und soll auch keinen Eindruck davon bekommen. */
.offen { max-width: 780px; margin: 0 auto; padding: 0 13px 60px; }
.offen__kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.offen__kopf b { font-family: var(--font-display); font-size: 15px; display: block; }
.offen__kopf span { font-size: 12px; color: var(--muted); display: block; }
.offen__inhalt { display: block; }
/* Die Rueckfrage steht auf einem Telefon in einer Hand — schmaler als
   das Auftragsformular, das auch auf einem Tablet gelesen wird. */
.offen--schmal { max-width: 540px; }

/* Rueckfrage: Frage, Zusatz und die Antwortknoepfe.
   Die Knoepfe sind Fingerziele, keine Listenzeilen — deshalb die
   groessere Variante von .wahl statt eigener Klassen. */
.frage__titel { font-size: 20px; line-height: 1.3; }
.frage__zusatz { color: var(--ink-2); font-size: 14px; white-space: pre-line; margin-top: 8px; }
.frage__wahl { display: grid; gap: 9px; }
.wahl--gross { padding: 14px 15px; }
.wahl--gross .wahl__name { font-size: 15px; }
.wahl--gross .wahl__zusatz { font-family: var(--font); font-size: 12px; }
.wahl--ok   { border-color: var(--ok);   background: var(--ok-soft); }
.wahl--warn { border-color: var(--warn); background: var(--warn-soft); }
.wahl--crit { border-color: var(--crit); background: var(--crit-soft); }
.wahl[disabled] { opacity: .45; pointer-events: none; }

/* Der gefuehrte Ablauf: Schritt, Pruefpunkt, Bilder */
.schritt { border-top: 1px solid var(--line-soft); }
.schritt:first-of-type { border-top: 0; }
.schritt--dran { background: var(--accent-soft); }
.schritt__kopf {
  display: flex; align-items: center; gap: 9px; padding: 11px 15px;
  font-family: var(--font-display); font-size: 13px;
}
.schritt__nr {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--surface-3); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--font-mono);
}
.schritt--dran .schritt__nr { background: var(--accent); color: var(--accent-on); }
.schritt__inhalt { padding: 0 15px 13px; }

.punkt { padding: 11px 0; border-top: 1px dashed var(--line-soft); }
.punkt:first-child { border-top: 0; }
.punkt__frage { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }

/* Das Auftragsformular.
   Alles, was dort vorher als style="…" am Element stand — der alte Stand
   hatte hier zusaetzlich 1 664 Zeilen mit eigenem Farbsatz. Die Masze
   sind groesser als sonst im Haus, weil das Formular auf einem Telefon
   mit einem Daumen bedient wird und der Techniker Handschuhe traegt. */
.formular__sprache {
  width: auto; padding: 4px 8px; font-size: 12px; background: var(--surface-2);
}
.formular__knopf { width: 100%; padding: 11px; }
.formular__knopf--gross { width: 100%; padding: 13px; font-size: 15px; }
.formular__navi { padding: 10px 16px; }
/* Zugangshinweise, Tickettexte und Auftragstexte kommen mit ihren
   Zeilenumbruechen aus der Datenbank. */
.formular__text { white-space: pre-wrap; }
.formular__option { width: auto; min-width: 140px; }
.formular__fotos { align-items: flex-start; }
.formular__foto { margin: 0; width: 132px; }
.formular__foto img {
  width: 100%; height: 98px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); display: block;
}

.fotos { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.foto { margin: 0; }
.foto img {
  width: 92px; height: 92px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); display: block;
}
.foto figcaption { font-size: 10.5px; color: var(--muted); margin-top: 3px; }

/* 8 ── Hilfsklassen ──────────────────────────────────────────────────── */

.verborgen { display: none !important; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leise { color: var(--muted); }
.klein { font-size: 11.5px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 8px; }  .mb-1 { margin-bottom: 8px; }
.mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; }
.flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flex-auto { margin-left: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 1080px) { .spalten { grid-template-columns: 1fr; } .spalten--links { grid-template-columns: 1fr; } }
@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; }
  .nav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; padding: 9px; }
  .nav__brand, .nav__gruppe, .nav__fuss { display: none; }
  .nav a.nav__punkt { width: auto; font-size: 11.5px; padding: 5px 9px; }
  .inhalt { padding: 15px 13px 50px; }
  .felder-2 { grid-template-columns: 1fr; }
  .strahl__eintrag { grid-template-columns: 70px 14px minmax(0,1fr); }
}

@media print {
  .nav, .topbar, .seitenkopf__aktionen, .knopf { display: none !important; }
  body { background: #fff; }
  .karte { border-color: #ccc; break-inside: avoid; }
}