/* Design „Werkstatt modern“: dunkle Kopfleiste mit Bierbaum-Gold, helle Karten mit runden Ecken.
   Nur Systemschriften: im Firmennetz gibt es kein Internet.

   Inhalt:
    1. Farben und Grundlagen (hell, dunkel)        9. Wochenplan, Wünsche, Bereitschaft
    2. Kopfleiste und Reiter                      10. Auswertungen
    3. Bedienelemente                             11. Anlagen, Schaltpläne, Dokumente, Assistent
    4. Karten, Kennzeichen, Tabellen              12. Lager
    5. Dialog und Formulare                       13. Energie und Kesselhaus
    6. Anmeldung                                  14. Reparaturen, Kontakte, Chat
    7. Kacheln, Meldung, Hinweis nach Update      15. Schmale Bildschirme (Handy)
    8. Startseite                                 16. Druck

   Reihenfolge zählt bei gleich starken Regeln: Handy und Druck stehen deshalb am Ende. */

/* ---------- 1. Farben und Grundlagen ---------- */
:root {
  --bg: #eef0f3; --panel: #ffffff; --panel-2: #f5f6f8; --line: #dde1e6; --line-strong: #c3c9d0;
  --fg: #1b2026; --muted: #5a646e;
  --accent: #f2b705; --accent-ink: #1b2026; --accent-ring: rgba(242, 183, 5, .4);
  --kopf-bg: #1b2026; --kopf-fg: #f4f5f7; --kopf-muted: #b4bcc4; --kopf-line: rgba(255, 255, 255, .16);
  --elektro: #2563a8; --mechanik: #8a5a1f;
  --viz-1: #2a78d6; --viz-2: #eb6834; /* Diagramm-Reihen (geprüft auf Farbsehschwäche, hell) */
  --ok: #2e7d4f; --warn: #b26a00; --crit: #c0362c;
  --ok-bg: #e3f2e8; --warn-bg: #fdf0d9; --crit-bg: #fbe4e1; --el-bg: #e3edf8; --me-bg: #f4ebde;
  --radius: 10px; --radius-sm: 8px;
  --schatten: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --schatten-gross: 0 18px 48px rgba(16, 24, 40, .24);
  --font-display: "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: Consolas, ui-monospace, "Courier New", monospace;
  color-scheme: light;
}
/* Dunkel: vom Benutzer gewählt (data-ansicht="dunkel") oder automatisch nach dem Gerät, solange er nicht „hell“ gewählt hat. */
:root[data-ansicht="dunkel"] {
    --bg: #121519; --panel: #1b2026; --panel-2: #21272e; --line: #2e363e; --line-strong: #44505a; --fg: #e6e9ec; --muted: #9ea8b1;
    --accent: #f5c518; --accent-ink: #14181c; --accent-ring: rgba(245, 197, 24, .35);
    --kopf-bg: #0b0d10; --kopf-line: rgba(255, 255, 255, .1);
    --elektro: #7fb0ea; --mechanik: #e0b072; --viz-1: #3987e5; --viz-2: #d95926;
    --ok: #5cc28a; --warn: #e8a33c; --crit: #f07167;
    --ok-bg: #1d3327; --warn-bg: #3a2c14; --crit-bg: #3d1f1c; --el-bg: #1b2b3f; --me-bg: #35291a;
    --schatten: 0 1px 2px rgba(0, 0, 0, .35);
    --schatten-gross: 0 18px 48px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ansicht="hell"]) {
    --bg: #121519; --panel: #1b2026; --panel-2: #21272e; --line: #2e363e; --line-strong: #44505a; --fg: #e6e9ec; --muted: #9ea8b1;
    --accent: #f5c518; --accent-ink: #14181c; --accent-ring: rgba(245, 197, 24, .35);
    --kopf-bg: #0b0d10; --kopf-line: rgba(255, 255, 255, .1);
    --elektro: #7fb0ea; --mechanik: #e0b072; --viz-1: #3987e5; --viz-2: #d95926;
    --ok: #5cc28a; --warn: #e8a33c; --crit: #f07167;
    --ok-bg: #1d3327; --warn-bg: #3a2c14; --crit-bg: #3d1f1c; --el-bg: #1b2b3f; --me-bg: #35291a;
    --schatten: 0 1px 2px rgba(0, 0, 0, .35);
    --schatten-gross: 0 18px 48px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 14px; line-height: 1.45; }
[hidden] { display: none !important; }

/* ---------- 2. Kopfleiste und Reiter ---------- */
.kopfleiste { background: var(--kopf-bg); color: var(--kopf-fg); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.kopfleiste-innen { max-width: 1320px; margin: 0 auto; padding: 12px 16px 0; display: grid; gap: 8px; }
header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mark { width: 68px; height: 56px; display: grid; place-items: center; color: var(--kopf-fg); flex: none; }
.mark svg { width: 68px; height: 56px; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin: 0; letter-spacing: .01em; }
.kopfleiste h1 { color: var(--kopf-fg); }
.who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--kopf-fg); }
.role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--kopf-line); color: var(--kopf-muted); }
.role.lead { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.kopfleiste .btn:not(.primary) { background: transparent; color: var(--kopf-fg); border-color: var(--kopf-line); }
.kopfleiste select { min-height: 28px; padding: 3px 8px; font-size: 12px; border-radius: 6px; background: transparent; color: var(--kopf-fg); border-color: var(--kopf-line); }
.kopfleiste select option { color: #1b2026; background: #ffffff; }
.kopfleiste .btn:not(.primary):hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }

nav.tabs { display: flex; gap: 2px; flex-wrap: wrap; align-items: flex-end; }
nav.tabs .tab { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; padding: 10px 14px 11px; border: 0; background: transparent; color: var(--kopf-muted);
  cursor: pointer; border-radius: 6px 6px 0 0; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent; }
nav.tabs .tab:hover { color: var(--kopf-fg); background: rgba(255, 255, 255, .06); }
nav.tabs .tab[aria-selected="true"] { color: var(--kopf-fg); box-shadow: inset 0 -3px 0 var(--accent); }
/* Zahl am Reiter (z. B. ungelesene Chat-Nachrichten) */
.tab-zahl { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--crit); color: #fff;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 56px; display: grid; gap: 18px; }

/* ---------- 3. Bedienelemente ---------- */
input, select, textarea { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line-strong); padding: 7px 10px; border-radius: var(--radius-sm); min-width: 0; min-height: 36px; }
textarea { min-height: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--accent); }
input[type="file"] { padding: 6px; }
.btn { font: inherit; font-weight: 600; padding: 7px 14px; min-height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.btn:hover { border-color: var(--fg); background: var(--panel-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.btn.primary:hover { background: #e0aa04; border-color: #e0aa04; }
.btn.sm { padding: 3px 10px; min-height: 28px; font-size: 12px; border-radius: 6px; }
.btn.danger { color: var(--crit); }
.btn.danger:hover { border-color: var(--crit); background: var(--crit-bg); }
.btn.ghost { border-color: transparent; background: transparent; }
a.btn { color: var(--fg); }
a.btn.primary { color: var(--accent-ink); }

.akte-link { font: inherit; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.akte-link:hover { text-decoration-color: var(--accent); }
.actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.toolbar .left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }

/* ---------- 4. Karten, Kennzeichen, Tabellen ---------- */
.reports { display: grid; gap: 10px; }
.report { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--schatten); padding: 12px 16px; display: grid; gap: 6px; }
.report.el { border-left-color: var(--elektro); } .report.me { border-left-color: var(--mechanik); }
.report.dringend { border-color: var(--crit); box-shadow: inset 0 0 0 1px var(--crit), var(--schatten); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.report .head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.report .meta { font-size: 12px; color: var(--muted); display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; }
.report .txt { white-space: pre-wrap; max-width: 75ch; overflow-wrap: anywhere; }
mark { background: var(--warn-bg); color: inherit; box-shadow: 0 0 0 1px var(--warn); border-radius: 3px; }
.parts { display: flex; flex-wrap: wrap; gap: 6px; }
.part { font-family: var(--font-mono); font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.chip.el { background: var(--el-bg); color: var(--elektro); } .chip.me { background: var(--me-bg); color: var(--mechanik); }
.chip.auftrag { background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); font-family: var(--font-mono); font-weight: 500; }
.chip.ok { background: var(--ok-bg); color: var(--ok); } .chip.crit { background: var(--crit-bg); color: var(--crit); } .chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.leer { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.emptystate { padding: 28px 16px; text-align: center; color: var(--muted); background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

.tablebox { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten); }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; background: var(--panel-2); }
tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--font-mono); font-size: 12.5px; }
tr:last-child td { border-bottom: 0; }

/* ---------- 5. Dialog und Formulare ---------- */
.overlay { position: fixed; inset: 0; background: rgba(10, 14, 18, .55); display: grid; place-items: center; padding: 16px; z-index: 10; backdrop-filter: blur(2px); }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--schatten-gross); width: min(760px, 100%); max-height: 92vh; overflow-y: auto; }
.dialog > header { padding: 14px 18px; border-bottom: 3px solid var(--accent); display: flex; justify-content: space-between; align-items: center; gap: 8px; position: sticky; top: 0;
  background: var(--panel); z-index: 1; border-radius: 14px 14px 0 0; }
.dialog h2 { margin: 0; font-family: var(--font-display); font-size: 19px; }
.dialog .body { padding: 16px 18px 20px; display: grid; gap: 14px; }
.subtabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.subtabs button { font: inherit; font-weight: 600; font-size: 13px; padding: 7px 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; }
.subtabs button:hover { color: var(--fg); }
.subtabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
dl.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
dl.kv dd { margin: 0; white-space: pre-wrap; }
.safety { background: var(--crit-bg); color: var(--fg); border-left: 4px solid var(--crit); border-radius: var(--radius-sm); padding: 10px 12px; white-space: pre-wrap; }
.safety b { color: var(--crit); }

form.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg label { padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--fg); position: relative; }
.seg label + label { border-left: 1px solid var(--line); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 6px; align-items: center; }
.prow .free { grid-column: 1 / 2; }
.prows { display: grid; gap: 6px; }
.formfoot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.formfoot .r { display: flex; gap: 8px; margin-left: auto; }
.confirm-del { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--crit); flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--muted); }
.stockhint { display: block; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; background: var(--panel-2); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 12px; }
.upload .row { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.filelist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.filelist li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
.filelist a { font-weight: 600; color: var(--fg); }
.filelist .ft { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.vorschlaege { display: grid; gap: 8px; background: var(--warn-bg); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 12px; }
.vorschlaege h3 { margin: 0; font-family: var(--font-display); font-size: 15px; }
.fehlerliste { margin: 0; padding-left: 18px; color: var(--crit); }

/* ---------- 6. Anmeldung ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--bg); }
.login-card { width: min(420px, 100%); display: grid; gap: 14px; }
main.login > .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--schatten-gross); padding: 26px 26px 28px; }
.login-card .login-card { padding: 0; border: 0; box-shadow: none; }
.login-marke { display: grid; place-items: center; margin-bottom: 4px; }
.login-marke img { width: 100%; height: auto; }
.login-marke .logo-dunkel { display: none; }
:root[data-ansicht="dunkel"] .login-marke .logo-hell { display: none; }
:root[data-ansicht="dunkel"] .login-marke .logo-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-ansicht="hell"]) .login-marke .logo-hell { display: none; }
  :root:not([data-ansicht="hell"]) .login-marke .logo-dunkel { display: block; }
}
.login-card p { margin: 0; color: var(--muted); }
.login-card input, .login-card select { width: 100%; padding: 10px 12px; font-size: 15px; min-height: 44px; }
.login-card .btn { padding: 11px 14px; font-size: 15px; min-height: 44px; }
.err { color: var(--crit); font-size: 13px; min-height: 1.2em; }

/* ---------- 7. Kacheln, Meldung, Hinweis nach Update ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
.tile { text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--schatten); padding: 28px 24px;
  display: grid; gap: 6px; cursor: pointer; min-height: 160px; align-content: end; transition: transform .12s, box-shadow .12s, border-color .12s; }
.tile b { font-family: var(--font-display); font-size: 30px; }
.tile span { color: var(--muted); font-size: 14px; }
.tile:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .12); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: var(--radius); box-shadow: var(--schatten-gross);
  font-weight: 500; z-index: 20; max-width: calc(100% - 32px); }
.toast.fehler { background: var(--crit); color: #fff; }
/* Hinweis nach einem Update: „Die App wurde aktualisiert – Jetzt neu laden“ (oben, über allem) */
.update-hinweis { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  max-width: calc(100vw - 32px); background: var(--warn-bg); color: var(--fg); border: 1px solid var(--warn); border-radius: var(--radius); padding: 8px 12px; box-shadow: var(--schatten-gross); font-weight: 600; }

/* ---------- 8. Startseite ---------- */
/* Schichtübergabe und Nachträge */
.ue-titel { margin: 0; font-family: var(--font-display); font-size: 20px; }
.ue-block { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ue-block::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--accent); }
.ue-gruppe { margin: 12px 0 6px; font-size: 13px; }
.ue-auftraege { display: grid; gap: 8px; }
.ue-auftrag { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; text-align: left; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--schatten); color: var(--fg); font: inherit; cursor: pointer; }
.ue-auftrag:hover { border-color: var(--accent); }
.ue-auftrag .ue-text { flex: 1 1 200px; color: var(--muted); }
.chip.schicht { background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); }
.nachtraege { display: grid; gap: 6px; margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--line); }
/* Startkacheln: vier Felder (2 × 2), auf dem Handy untereinander */
.tiles.tiles-4 { max-width: 900px; }
.tile-info { cursor: default; align-content: start; }
.tile-info:hover { transform: none; border-color: var(--line); box-shadow: var(--schatten); }
.tile-info .btn { justify-self: start; margin-top: 6px; }
.tile-zeile { display: block; font-size: 14px; color: var(--fg); }
.tile-zeile a { font-weight: 600; }
.tiles-4 .tile { align-content: start; min-height: 150px; }
.tile .tile-zeile b { font-family: var(--font-body); font-size: 15px; }
/* Startseite: Kachel „Kesselhaus“ über die ganze Breite unter den vier Kacheln */
.tiles-4 .tile.kh-start { grid-column: 1 / -1; min-height: 0; }
.kh-start-zeile { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.tile .kh-start-zeile .chip { font-size: 13px; }

/* ---------- 9. Wochenplan, Wünsche, Bereitschaft ---------- */
.wtitel { font-family: var(--font-display); font-size: 16px; margin-left: 6px; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.legende .schicht { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--fg); font-weight: 600; }
table.wplan { min-width: 860px; }
table.wplan th[scope="row"] { font-weight: 600; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--fg); background: var(--panel); }
table.wplan th[scope="row"] .hint { font-weight: 400; }
table.wplan th.heute { box-shadow: inset 0 -3px 0 var(--accent); color: var(--fg); }
table.wplan td.w-zelle { padding: 4px 6px; text-align: center; font-weight: 600; }
table.wplan td.heute { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
table.wplan td.konflikt { outline: 2px solid var(--crit); outline-offset: -2px; }
table.wplan select { width: 100%; padding: 4px 6px; min-height: 30px; background: transparent; border-color: transparent; }
table.wplan select:hover { border-color: var(--line-strong); }
table.wplan tr.gruppe th { background: var(--panel); color: var(--fg); font-size: 12px; }
table.wplan td.besetzung { font-size: 11px; color: var(--muted); white-space: nowrap; text-align: center; }
table.wplan tfoot th { font-size: 11px; }
table.wplan tbody tr:hover td { background: none; }
.e-frueh { background: var(--warn-bg); } .e-tag { background: var(--ok-bg); } .e-spaet { background: var(--me-bg); } .e-nacht { background: var(--el-bg); }
.e-urlaub, .e-frei, .e-abwesend { background: var(--panel-2); color: var(--muted); font-style: italic; } .e-krank { background: var(--crit-bg); }
table.wplan tbody tr:hover td.e-frueh { background: var(--warn-bg); } table.wplan tbody tr:hover td.e-tag { background: var(--ok-bg); }
table.wplan tbody tr:hover td.e-spaet { background: var(--me-bg); } table.wplan tbody tr:hover td.e-nacht { background: var(--el-bg); }
.zeitpaar { display: flex; gap: 6px; align-items: center; }
.zeitpaar input { width: auto; }
/* Wochenplan: offener Urlaubs-/Frei-Wunsch in der Zelle, Liste der Wünsche */
table.wplan td.mit-wunsch { box-shadow: inset 0 0 0 2px var(--warn); }
.w-wunsch { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px dashed var(--warn); border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 11px; font-style: normal; font-weight: 600; }
.w-antwort { display: block; }
/* Bereitschaft und Telefonliste */
.bplan td.b-zelle { min-width: 90px; }
.bplan td.belegt { background: var(--el-bg); }
.ue-bereitschaft { display: grid; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--schatten); padding: 12px 14px; }
.ue-bereitschaft a { font-weight: 600; }
.bplan-mechanik td.belegt { background: var(--me-bg); }

/* ---------- 10. Auswertungen ---------- */
.auswertung { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px; display: grid; gap: 10px; }
.auswertung .kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.auswertung .kopf .btn { margin-left: auto; }
.auswertung h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.auswertung h4 { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
table.schmal { min-width: 560px; }
.balkenzelle { white-space: nowrap; }
.balken { display: inline-block; width: 120px; height: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-right: 8px; vertical-align: middle; }
.balken > span { display: block; height: 100%; background: var(--accent); }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kz { border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; }
.kz b { font-family: var(--font-display); font-size: 26px; }
.kz span { font-size: 12px; color: var(--muted); }
.kz.warnen { border-color: var(--crit); background: var(--crit-bg); }
.kz.warnen b { color: var(--crit); }
.offenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.offenliste li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.offentext { flex: 1; min-width: 160px; overflow-wrap: anywhere; }

/* ---------- 11. Anlagen, Schaltpläne, Dokumente, Assistent ---------- */
/* Register Anlagen */
.anl-abteilung { display: grid; gap: 6px; }
.anl-titel { margin: 0; font-family: var(--font-display); font-size: 16px; }
table.anl-tabelle tr.anl-anlage td { background: var(--panel-2); }
table.anl-tabelle tr.anl-aggregat td:first-child { padding-left: 32px; }
table.anl-tabelle tr.anl-still td { color: var(--muted); }
table.anl-tabelle input, .anl-abteilung .toolbar input { padding: 4px 8px; min-height: 30px; }
/* Schaltpläne */
.plan { display: grid; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten); padding: 10px 14px; }
.plan-kopf { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.plan-treffer { display: grid; gap: 2px; font-size: 13px; padding-left: 10px; border-left: 3px solid var(--accent); }
.plan-seiten { display: grid; gap: 8px; }
.plan-seiten summary { cursor: pointer; font-size: 13px; color: var(--muted); }
/* Dokumente */
.dk-hersteller { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
/* Ausschnitt als Fließtext (nicht als Grid wie .plan-treffer – sonst stünde jede Markierung in einer eigenen Zeile). */
.dk-ausschnitt { font-size: 13px; line-height: 1.45; padding-left: 10px; border-left: 3px solid var(--accent); overflow-wrap: anywhere; }
.dk-zeile { font-size: 13px; padding: 2px 8px; border-left: 3px solid var(--line-strong); }
.dk-ok { border-left-color: var(--ok); }
.dk-hinweis { border-left-color: var(--warn); }
.dk-fehler { border-left-color: var(--crit); color: var(--crit); }
/* Assistent */
.ka-frage { display: flex; gap: 8px; flex-wrap: wrap; }
.ka-frage input { flex: 1 1 320px; font-size: 15px; min-height: 42px; }
.ka-frage .btn { min-height: 42px; }
.ka-abhilfe { background: var(--ok-bg); border-radius: var(--radius-sm); padding: 6px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ka-antwort { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 12px 16px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.ka-fall [aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ka-kompakt { display: grid; gap: 6px; background: var(--panel-2); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; }
.ka-kompakt > div { overflow-wrap: anywhere; }

/* ---------- 12. Lager ---------- */
.lg-reiter { flex-wrap: wrap; }
.lg-ausleihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 4px; }
/* Lager: Reiter je Hersteller und ihre Anleitungen */
.lg-hersteller { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lg-hersteller:empty { display: none; }
/* Lager → Elektromotoren und Sensoren: Auswahlliste der Arten (gelb umrandet, wenn eine Art gewählt ist) */
.lg-artwahl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.lg-artwahl select { min-width: 220px; color: var(--fg); }
.lg-artwahl select.aktiv { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); font-weight: 600; }
/* Lager: Motor- und Ersatz-Suche, Fotos */
.lg-ms-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.lg-treffer-liste { display: grid; gap: 8px; }
.lg-treffer { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.lg-kriterien { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.lg-foto-stand { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-foto-stand img { display: block; max-height: 72px; max-width: 120px; border-radius: 6px; border: 1px solid var(--line); }
/* Lager: „Passend für“ als Auswahl */
.lg-passend { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 24px; }
.lg-chip-weg { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 6px; font-weight: 700; font-size: 13px; line-height: 1; }
/* Sensor-Formular: Hinweis, solange keine Sensorart gewählt ist */
.lg-art-waehlen { background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 8px 10px; }
/* Lager: Motor vom Typenschild-Foto */
.lg-schild { display: grid; gap: 10px; }
.lg-schild-bild { display: block; max-width: 100%; max-height: 260px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); }
.lg-schild-hinweis { background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 8px 10px; }
.lg-schild-text summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.lg-schild-text pre { margin: 6px 0 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }

/* ---------- 13. Energie und Kesselhaus ---------- */
.en-reiter { flex-wrap: wrap; }
.en-rundgang td { vertical-align: middle; }
.en-diff { font-size: 12px; color: var(--muted); }
.en-diff.en-warn { color: var(--warn); font-weight: 600; }
.en-diff.en-fehler { color: var(--crit); font-weight: 600; }
.en-diagramme { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.en-diagramm { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten); padding: 10px 12px; display: grid; gap: 4px; }
.en-diagramm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.en-diagramm figcaption { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.en-plot { position: relative; }
.en-plot svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.en-raster { stroke: var(--line); stroke-width: 1; }
.en-referenz { stroke: var(--muted); stroke-width: 1; }
.en-achse { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.en-linie { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.en-punkt, .en-zeiger { fill: var(--viz-1); stroke: var(--panel); stroke-width: 2; }
.en-kreuz { stroke: var(--line-strong); stroke-width: 1; }
.en-flaeche { fill: transparent; cursor: crosshair; }
.en-saeule.en-reihe-1 { fill: var(--viz-1); } .en-saeule.en-reihe-2 { fill: var(--viz-2); }
.en-legende { display: inline-flex; gap: 12px; font-size: 12px; color: var(--muted); }
.en-legende span { display: inline-flex; align-items: center; gap: 4px; }
.en-legende i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.en-legende i.en-reihe-1, .en-schluessel.en-reihe-1 { background: var(--viz-1); }
.en-legende i.en-reihe-2, .en-schluessel.en-reihe-2 { background: var(--viz-2); }
.en-schluessel { display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: middle; }
.en-tooltip { position: absolute; top: 8px; pointer-events: none; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--schatten); padding: 6px 8px; font-size: 12px; white-space: nowrap; z-index: 2; }
.en-tooltip b { font-variant-numeric: tabular-nums; }
.en-letzter { margin: 0; font-size: 12px; color: var(--muted); }
.en-letzter b { color: var(--fg); }
.en-tabelle td.en-unter { background: var(--warn-bg); }
.en-tabelle td.en-ueber { background: var(--crit-bg); color: var(--crit); font-weight: 600; }
.en-tabelle th.en-eta { text-transform: none; } /* „η“ würde groß zu „Η“ (sieht aus wie H) */
/* Energie → Kesselhaus: Energiefluss (Sankey). Strom = Reihe 1, Wärme = Reihe 2, Notablass rot (Verlust), Rest neutral. */
.kh-band { opacity: .4; } .kh-band:hover { opacity: .65; }
.kh-band.kh-strom, .kh-knoten.kh-strom { fill: var(--viz-1); }
.kh-band.kh-warmwasser, .kh-knoten.kh-warmwasser, .kh-band.kh-dampf, .kh-knoten.kh-dampf { fill: var(--viz-2); }
.kh-band.kh-dampf { opacity: .55; }
.kh-band.kh-notablass, .kh-knoten.kh-notablass { fill: var(--crit); } .kh-band.kh-notablass { opacity: .7; }
.kh-band.kh-verluste, .kh-knoten.kh-verluste { fill: var(--muted); }
.kh-knoten { fill: var(--line-strong); }
.kh-titel { font-size: 13px; font-weight: 600; fill: var(--fg); }
.kh-wert { font-size: 12px; fill: var(--muted); }
.en-saeule.kh-notablass { fill: var(--crit); } .en-schluessel.kh-notablass { background: var(--crit); }
.en-diagramme.kh-einzeln { grid-template-columns: minmax(0, 680px); }
/* Energiefluss auf dem Handy: lesbare Mindestbreite, seitlich wischen (die Zahlen stehen darunter als Karten). */
.kh-fluss { overflow-x: auto; }
.kh-fluss svg { min-width: 560px; }
/* Energie: Hinweis „Ablesung fällig“; Kesselhaus: Meister-Zeile mit Nummer bzw. Feld zum Eintragen */
.en-faellig { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; background: var(--warn-bg); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 10px 12px; }
.kh-meister { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kh-nummer { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }

/* ---------- 14. Reparaturen, Kontakte, Chat ---------- */
.rp-positionen { display: grid; gap: 2px; font-size: 13px; padding-left: 10px; border-left: 3px solid var(--accent); }
.rp-verlauf { font-size: 12px; }
#rp-form .tablebox input { min-width: 0; }
.kt-fehlen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kt-partner-link { font-size: 12px; text-align: left; margin-top: 2px; }
.kt-vorschau { max-height: 40vh; overflow: auto; }
/* Chat: links Unterhaltungen, rechts Verlauf; eigene Nachrichten rechts in Gold, andere links */
.chat { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; }
.chat-liste { display: grid; gap: 10px; }
.chat-neu { display: grid; gap: 5px; }
.chat-neu label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.chat-unterhaltungen { display: grid; gap: 6px; }
.chat-u { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; text-align: left; font: inherit; color: var(--fg);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; cursor: pointer; }
.chat-u:hover { border-color: var(--accent); }
.chat-u[aria-current="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.chat-u b, .chat-u > .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-u > .hint { grid-column: 1 / -1; }
.chat-verlauf { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(72vh, 720px); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--schatten); }
.chat-verlauf > .chat-leer { grid-row: 1 / -1; }
.chat-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-kopf h3 { margin: 0; font-family: var(--font-display); font-size: 16px; }
.chat-nachrichten { overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-n { max-width: min(560px, 85%); align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 7px 11px; }
.chat-n.eigene { align-self: flex-end; background: color-mix(in srgb, var(--accent) 20%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 12px 12px 4px 12px; }
.chat-von { font-size: 12px; font-weight: 600; color: var(--muted); }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-zeit { display: flex; justify-content: flex-end; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 2px; }
.chat-weg { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.chat-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; }
.chat-leer { display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; }
.chat-zurueck { display: none; }
/* Datumszeile und Linie „Neue Nachrichten“ im Verlauf */
.chat-tag, .chat-neu-linie { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; color: var(--muted); margin: 4px 0; }
.chat-tag::before, .chat-tag::after, .chat-neu-linie::before, .chat-neu-linie::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.chat-neu-linie { color: var(--crit); }
.chat-neu-linie::before, .chat-neu-linie::after { border-top-color: var(--crit); }
/* Häkchen: ✓ gesendet, ✓✓ gelesen (grün) */
.chat-haken { font-weight: 700; letter-spacing: -.12em; cursor: default; }
.chat-haken.gelesen { color: var(--ok); }
/* Foto in der Nachricht und Knopf zum Schicken */
.chat-foto { display: block; margin: 2px 0 4px; }
.chat-foto img { display: block; max-width: min(280px, 100%); max-height: 260px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
.chat-foto-knopf { padding-inline: 10px; font-size: 18px; }
.chat-foto-knopf.laedt { pointer-events: none; opacity: .5; }

/* ---------- 15. Schmale Bildschirme (Handy) ---------- */
@media (max-width: 700px) {
  .kopfleiste-innen { padding: 10px 12px 0; }
  header.top { gap: 8px; }
  h1 { font-size: 18px; }
  .mark, .mark svg { width: 56px; height: 46px; }
  .who { width: 100%; justify-content: space-between; }
  .who #me-name { font-weight: 600; }
  /* Reiter in einer Zeile, seitlich wischbar */
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: -12px; padding-inline: 8px; }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs .tab { padding: 10px 12px 11px; font-size: 14px; }
  .wrap { padding-inline: 12px; padding-block: 16px 48px; }
}
@media (max-width: 560px) { .upload, form.grid { grid-template-columns: 1fr; } dl.kv { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 120px; } .dialog { max-height: 100vh; } .overlay { padding: 8px; } }
/* Tabellen auf dem Handy als Karten (Lager, Kontakte) – alles ohne seitliches Wischen; td[data-label] beschriftet. */
@media (max-width: 700px) {
  table.karten-mobil { min-width: 0; }
  .karten-mobil thead { display: none; }
  .karten-mobil, .karten-mobil tbody, .karten-mobil tr, .karten-mobil td { display: block; width: 100%; }
  .karten-mobil tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .karten-mobil td { border: 0; padding: 2px 0; text-align: left; }
  .karten-mobil td.num { text-align: left; }
  .karten-mobil td:empty { display: none; }
  .karten-mobil td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
  .karten-mobil td.lg-status { padding: 4px 0; }
  .karten-mobil td .actions { justify-content: flex-start; padding-top: 4px; }
  .karten-mobil td.emptystate { padding: 16px 0; }
}
@media (max-width: 700px) { .karten-mobil caption { display: block; width: 100%; } }
@media (max-width: 700px) {
  .chat { grid-template-columns: 1fr; }
  .chat.offen .chat-liste, .chat:not(.offen) .chat-verlauf { display: none; }
  .chat-zurueck { display: inline-flex; }
  .chat-verlauf { height: calc(100vh - 220px); min-height: 320px; }
}

/* ---------- 16. Druck ---------- */
@media print {
  .kopfleiste { background: none; color: #000; box-shadow: none; }
  .kopfleiste h1, .who { color: #000; }
  nav.tabs, .who .btn, #new-report { display: none; }
  .report, .tablebox, .plan, .auswertung, .ue-auftrag { box-shadow: none; }
}