:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #1f2933;
  --muted: #6b7785;
  --bone: #2f4b6e;
  --accent: #2f6fb5;
  --chip: #e8f0fa;
  --chip-border: #b9cfe8;
  --danger: #c0392b;
  --over: #d9ecff;
  --line: #dde3ea;
  --accent-strong: #255a94;
  --button-hover: #d7e6f7;
  --field-bg: #fff;
  --field-border: #c5cfda;
  --surface-alt: #fafbfc;
  --surface-tint: #eef3f9;
  --panel-soft: #f5f8fc;
  --disabled-bg: #f0f2f5;
  --dashed-soft: #d3dbe4;
  --table-border: #aab6c4;
  --danger-border: #e0b4ae;
  --danger-hover: #fbeceb;
  --notice-bg: #fdf1e7;
  --notice-border: #e7b98f;
  --warn-bg: #fff7e6;
  --warn-border: #f0d9a8;
  --warn: #b7791f;
  --warn-tint: #fbf3e0;
  --ok: #2e7d4f;
  --ok-bg: #e7f4ec;
  --bad-bg: #fbeae8;
  --status-open-text: #b45309;
  --status-closed-text: #1f7a45;
  color-scheme: light;
}
/* Dunkelmodus (Schalter in der Benutzerleiste, theme.js); beim Drucken bleibt es hell */
@media screen {
:root[data-theme="dark"] {
    --bg: #12161c;
    --panel: #1b222b;
    --text: #e3e8ee;
    --muted: #9aa7b5;
    --bone: #3e6aa3;
    --accent: #3d7cc4;
    --chip: #243448;
    --chip-border: #36506f;
    --danger: #e5685a;
    --over: #223a55;
    --line: #2c3744;
    --accent-strong: #5b9bdc;
    --button-hover: #2d3e55;
    --field-bg: #151b22;
    --field-border: #3b4757;
    --surface-alt: #1a2029;
    --surface-tint: #1f2a38;
    --panel-soft: #1c2430;
    --disabled-bg: #232b36;
    --dashed-soft: #34404f;
    --table-border: #4a5668;
    --danger-border: #7a3b35;
    --danger-hover: #3b2220;
    --notice-bg: #3a2a1c;
    --notice-border: #7a5a3a;
    --warn-bg: #3a2f1a;
    --warn-border: #6b5726;
    --warn: #d9a441;
    --warn-tint: #352c17;
    --ok: #58b27a;
    --ok-bg: #17301f;
    --bad-bg: #3a1f1c;
    --status-open-text: #e08a3c;
    --status-closed-text: #58b27a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
.app-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5; /* Kopfzeile bleibt beim Scrollen sichtbar (unter den Dialogen, z-index 10) */
}
.user-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.user-name { font-size: .9rem; color: var(--muted); margin-right: 4px; }
.app-header h1 { margin: 0; font-size: 1.2rem; }
.app-header a { color: inherit; text-decoration: none; }
button {
  font: inherit; cursor: pointer; border: 1px solid var(--chip-border);
  background: var(--chip); color: var(--text); border-radius: 6px; padding: 6px 12px;
}
button:hover { background: var(--button-hover); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.primary:hover { background: var(--accent-strong); }
button.danger { color: var(--danger); border-color: var(--danger-border); background: var(--field-bg); }
button.danger:hover { background: var(--danger-hover); }
input[type="text"], input[type="search"], input[type="password"], input[type="date"], input[type="email"], input[type="number"], select, textarea {
  font: inherit; padding: 6px 8px; border: 1px solid var(--field-border); border-radius: 6px; background: var(--field-bg); color: var(--text);
}
input:disabled, textarea:disabled { background: var(--disabled-bg); color: var(--muted); }
#status { min-height: 1.6em; padding: 4px 20px; font-size: .9rem; color: var(--muted); position: sticky; top: var(--header-height, 58px); z-index: 4; background: var(--bg); } /* bleibt unter der Kopfzeile sichtbar: Meldungen gehen auf langen Seiten nicht mehr verloren */
#status.error { color: var(--danger); font-weight: 600; background: var(--danger-hover); border-bottom: 1px solid var(--danger-border); }
#view { padding: 0 20px 24px; }
.hint { font-size: .8rem; color: var(--muted); margin: 0; }
.error-text { color: var(--danger); font-weight: 600; }
.empty { color: var(--muted); padding: 24px 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.toolbar input[type="search"] { flex: 1; min-width: 180px; max-width: 360px; }
/* ---------- Tabellen ---------- */
.diagram-table {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.diagram-table th, .diagram-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.diagram-table th { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-alt); }
.diagram-table td.num { text-align: right; }
.diagram-table .muted { color: var(--muted); }
.diagram-table th.num { text-align: right; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > * { margin-left: 6px; vertical-align: middle; }
.area-table { width: auto; }
.area-table th:nth-child(1) { width: 240px; }
.area-table th:nth-child(2) { width: 90px; }
.area-table td input { width: 100%; box-sizing: border-box; }
.save-indicator { font-size: .85rem; color: var(--muted); min-width: 12em; }
.save-indicator[data-state="error"], .save-indicator[data-state="conflict"], .save-indicator[data-state="rejected"] { color: var(--danger); font-weight: 600; }
.chip {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: var(--chip); border: 1px solid var(--chip-border); border-radius: 6px;
  padding: 4px 8px; font-size: .88rem; cursor: grab; user-select: none;
}
.chip-delete { border: none; background: transparent; padding: 0 4px; color: var(--muted); font-size: 1rem; line-height: 1; }
.chip-delete:hover { color: var(--danger); background: transparent; }
/* ---------- Anmeldung / Overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(31, 41, 51, .55); padding: 16px;
}
.overlay[hidden] { display: none; }
.auth-form {
  width: 100%; max-width: 380px; background: var(--panel); border-radius: 12px; padding: 22px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.auth-form h2 { margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; }
/* Formularfelder stehen nebeneinander, solange der Platz reicht; kurze Angaben bleiben schmal, Bezeichnung und Notiz bekommen mehr. */
.form-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; margin: 8px 0; }
.form-grid .field { flex: 0 1 150px; min-width: 120px; }
.form-grid .field.long-label { flex: 0 1 215px; min-width: 200px; }
.form-grid .field.wide { flex: 1 1 240px; max-width: 420px; }
.form-grid .field-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* eine Zeile, damit alle Eingabefelder oben auf gleicher Höhe stehen */
.note-input { font: inherit; padding: 6px 8px; border: 1px solid var(--field-border); border-radius: 6px; background: var(--field-bg); color: var(--text); width: 330px; max-width: 100%; box-sizing: border-box; min-height: 36px; resize: both; }
.note-input:read-only { resize: none; }
.form-grid .field.note-field { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.form-grid .check { flex: 0 0 auto; align-self: flex-start; padding-top: 22px; }
.field-label { font-size: .8rem; color: var(--muted); }
.field input, .field select { width: 100%; }
.form-error { margin: 0; min-height: 1.2em; color: var(--danger); font-weight: 600; font-size: .9rem; }
.guest-button { width: 100%; }
/* ---------- Verwaltung ---------- */
.admin-section { margin-bottom: 28px; }
.section-header { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin: 18px 0 10px; }
.section-header h3 { margin: 0; font-size: 1rem; }
.setup-section { margin-top: 24px; }
.setup-section[hidden], .section-switch[hidden] { display: none; }
.switch-tab { position: relative; padding: 10px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 1.05rem; user-select: none; }
.switch-tab:hover { background: var(--panel-soft); }
.switch-tab input { position: absolute; opacity: 0; pointer-events: none; } /* der Radiobutton bleibt für Tastatur und Screenreader, sichtbar ist die Kachel */
.switch-tab-icon { font-size: 1.7rem; line-height: 1; }
.switch-tab:has(input:checked) { border-color: var(--accent); background: var(--surface-tint); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent); }
.switch-tab:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.section-switch { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.section-switch + .setup-section { margin-top: 8px; }
.setup-card { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 4px 16px 14px; margin-bottom: 12px; }
.setup-group-title { margin: 12px 0 4px; font-size: 1rem; }
.setup-group > .section-header { margin: 10px 0 4px; }
.setup-group > .section-header .setup-group-title { margin: 0; }
.setup-pending { margin: 0 0 8px; font-weight: 600; }
.setup-replaced-title { margin: 14px 0 2px; font-size: 0.9rem; color: var(--muted, inherit); }
.setup-line-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.setup-line-note { font-style: italic; }
.setup-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.setup-entry .section-header { flex-wrap: wrap; margin: 10px 0; }
.setup-entry .section-header h4 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.setup-card .section-header { flex-wrap: wrap; margin: 10px 0; }
.setup-card .section-header h4 { margin: 0; font-size: 0.95rem; }
.substance-card .limits-block { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.substance-card h5 { margin: 0 0 4px; font-size: 0.9rem; }
.limit-list { list-style: none; margin: 0 0 10px; padding: 0; }
.limit-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.limit-form { margin-top: 6px; }
.remark-form { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; } /* Feld und Knopf oben bündig */
.limit-row { flex-wrap: wrap; }
/* Grenzwert-Versionen in festen Spalten (Datum, UEG, Soll, OEG, Markierung, Löschen), damit „Löschen“ in jeder Zeile an derselben Stelle steht */
.limit-version { display: grid; grid-template-columns: 8.5em repeat(3, 10em) 4.5em auto; align-items: center; gap: 4px 12px; }
.limit-version > button { justify-self: start; }  /* Knopf nur so breit wie sein Text, nicht über die ganze Spalte */
@media (max-width: 820px) { .limit-version { display: flex; } }
.limit-date { min-width: 8.5em; }
.limit-value { display: inline-flex; gap: 5px; }
.limit-value + .limit-value::before { content: "·"; color: var(--muted); margin-right: 7px; }
.limit-label { color: var(--muted); }
.badge { padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--chip-border); background: var(--chip); color: var(--muted); }
.badge[data-state="active"] { border-color: var(--accent); color: var(--accent); }
.badge[data-state="reaction_open"] { border-color: var(--danger, #b3261e); color: var(--danger, #b3261e); }
.badge[data-state="done"] { border-color: var(--accent); color: var(--accent); }
.table-scroll { overflow-x: auto; margin-bottom: 12px; }
.inspection-grid tr.selected td { background: var(--surface-alt); }
.inspection-grid tr.todo-open td { background: var(--warn-bg); font-weight: 600; }
.inspection-grid tr.todo-open td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
.inspection-grid tr.todo-open.selected td { background: var(--warn-tint); }
.inspection-grid td, .inspection-grid th { white-space: nowrap; }
.inspection-detail .diagram-table { margin: 8px 0 12px; }
.inspection-detail h5 { margin: 12px 0 4px; font-size: 0.9rem; }
.inspection-detail .limits-block { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.entry-form { margin: 8px 0; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); gap: 12px; margin-top: 8px; }
.bath-tile, .info-tile { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 8px 14px 12px; }
.bath-tile[data-attention="true"] { border-color: var(--danger-border); }
.bath-tile h4 { margin: 4px 0 6px; font-size: 1rem; }
.bath-tile .hint { margin: 2px 0; }
.tile-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.tile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tile-head h4 { margin: 4px 0; }
.info-tiles { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; } /* Bereiche und Eingehende Analysen je in einer eigenen Zeile */
.inspection-overview h3 { margin: 10px 0 8px; font-size: 1rem; }
.incoming h3, .area-summary h3 { margin: 4px 0 8px; font-size: 1rem; }
.area-summary .diagram-table th:not(:first-child), .area-summary .diagram-table td:not(:first-child) { text-align: right; }
.tile-setups { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
.setup-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 3px 0; }
.setup-name { font-weight: 600; min-width: 7em; }
.setup-value { min-width: 9em; }
.badge[data-kind="alert"] { border-color: var(--danger); color: var(--danger); }
.badge[data-kind="ok"] { border-color: var(--accent); color: var(--accent); }
.entry-form .hint { margin-bottom: 8px; }
.filter-row th { padding-top: 0; font-weight: normal; }
.filter-row select { width: 100%; max-width: 100%; text-transform: none; letter-spacing: normal; }
.panel-form {
  display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
}
.panel-form h3 { margin: 0; font-size: 1rem; }
.form-buttons { display: flex; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; }
.inactive { color: var(--danger); }
.diagram-table td input, .diagram-table td select { width: 100%; min-width: 120px; }
.chip.read-only { cursor: default; }
@media print {
.app-header, .sidebar, #status { display: none; }
#view { padding: 0; }
body { background: #fff; }
.chip-delete { display: none; }
}
.admin-section .toolbar input[type="text"] { min-width: 280px; }
/* ---------- Layout mit Seitenleiste ---------- */
.header-start { display: flex; align-items: center; gap: 10px; }
.sidebar-toggle { padding: 4px 10px; font-size: 1.1rem; line-height: 1; }
.app-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
.app-layout.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.app-layout.sidebar-collapsed .sidebar { display: none; }
.sidebar {
  display: flex; flex-direction: column;
  position: sticky; top: var(--header-height, 58px); align-self: start;
  height: calc(100vh - var(--header-height, 58px)); height: calc(100dvh - var(--header-height, 58px));
  overflow-y: auto; /* Menü scrollt in der Leiste, der Name unten bleibt sichtbar */
  padding: 14px 10px 0; background: var(--panel); border-right: 1px solid var(--line);
}
.side-group { margin-bottom: 18px; }
.side-title { margin: 0 0 6px 10px; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.side-link { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
.side-link:hover { background: var(--chip); }
.side-link[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 600; }
@media (max-width: 900px) {
.app-layout { grid-template-columns: minmax(0, 1fr); }
.sidebar { position: static; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--line); }
}
.sidebar[hidden] + .content { grid-column: 1 / -1; }
/* ---------- Kontakte, Rich-Text und Anhänge ---------- */
.status { white-space: nowrap; font-weight: 600; }
.person-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.person-row select, .person-row input[type="text"] { flex: 1; min-width: 140px; }
.member-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.member { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 14px; background: var(--chip); border: 1px solid var(--chip-border); font-size: .88rem; }
.member-manual { background: var(--warn-bg); border-color: var(--warn-border); }
.member .chip-delete { cursor: pointer; }
.rich { position: relative; background: var(--panel); border: 1px solid var(--field-border); border-radius: 8px; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-alt); border-radius: 8px 8px 0 0; }
.rich-toolbar button { padding: 3px 10px; }
.rich-surface { min-height: 220px; padding: 10px 12px; overflow-wrap: anywhere; outline: none; }
.rich-surface:focus { box-shadow: inset 0 0 0 2px var(--chip-border); }
.rich-surface img { max-width: 100%; height: auto; border-radius: 4px; cursor: zoom-in; }
.rich-surface ul, .rich-surface ol { padding-left: 22px; }
.rich-readonly { background: var(--surface-alt); }
@media print {
.rich-toolbar { display: none; }
}
input[type="date"] { min-height: 36px; }
input[type="date"]:disabled { background: var(--disabled-bg); color: var(--muted); }
.rich-surface img { height: auto; }
.rich-surface table { border-collapse: collapse; width: 100%; margin: 8px 0; table-layout: auto; }
.rich-surface td, .rich-surface th { border: 1px solid var(--table-border); padding: 4px 8px; vertical-align: top; min-width: 30px; box-sizing: border-box; }
.rich-surface table:has(td[width], th[width]) { width: auto; }
.rich-surface th { background: var(--surface-tint); text-align: left; }
.table-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.table-panel, .table-edit { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.table-panel[hidden], .table-edit[hidden] { display: none; }
.table-panel input[type="number"] { width: 64px; height: 30px; padding: 2px 6px; }
.img-frame { position: absolute; border: 2px solid var(--accent); pointer-events: none; box-sizing: border-box; z-index: 2; }
.img-frame[hidden] { display: none; }
.img-handle { position: absolute; right: -8px; bottom: -8px; width: 14px; height: 14px; background: var(--accent); border: 2px solid var(--panel); border-radius: 3px; cursor: nwse-resize; pointer-events: auto; touch-action: none; }
@media print {
.img-frame { display: none; }
}
.attachments { margin: 12px 0 4px; }
.attachments[hidden] { display: none; }
.attachments-title { margin: 0 0 6px; font-size: 14px; }
.attachment-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; }
.attachment-row { display: flex; gap: 12px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.attachment-row:last-child { border-bottom: 0; }
.attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.attachment-link:hover { text-decoration: underline; }
.rich-surface a[href^="/api/files/"] {
  display: inline-block; margin: 4px 8px 4px 0; padding: 8px 14px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft);
  color: inherit; text-decoration: none; line-height: 1.3; cursor: default;
}
.rich-surface a[href^="/api/files/"]::first-letter { font-size: 2.4em; line-height: 1; }
.rich-readonly a[href^="/api/files/"] { cursor: pointer; }
.rich-readonly a[href^="/api/files/"]:hover { background: var(--chip); }
.attachment-icon { font-size: 1.5em; line-height: 1; }
.language-select { font: inherit; font-size: .9rem; padding: 4px 6px; }
.theme-button { font-size: 1.1rem; line-height: 1; padding: 3px 9px; }
.mode-switch { padding: 4px 12px; }
.side-label { margin: 0 0 4px; font-size: .85rem; color: var(--muted); }
.side-hint { margin: 6px 0 0; font-size: .75rem; color: var(--muted); line-height: 1.35; }
.mode-buttons { display: flex; gap: 0; }
.mode-button { flex: 1; border-radius: 0; }
.mode-button:first-child { border-radius: 6px 0 0 6px; }
.mode-button:last-child { border-radius: 0 6px 6px 0; }
.mode-button[aria-pressed="true"] { background: var(--bone); color: #fff; border-color: var(--bone); }
.side-footer { position: sticky; bottom: 0; margin-top: auto; padding: 10px 10px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.side-footer:empty { display: none; }
.side-version { display: block; margin-bottom: 4px; font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; text-decoration: none; }
.side-version:hover, .side-version[aria-current="page"] { color: var(--accent); text-decoration: underline; }
.changelog-page { max-width: 820px; }
.changelog-text { margin: 8px 0 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font: inherit; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.side-name { font-size: .9rem; font-weight: 600; color: var(--bone); overflow-wrap: anywhere; }
.name-field { margin-top: 12px; }
.name-field input { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.mail-page { max-width: 680px; }
.mail-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mail-form .field { align-self: stretch; }
.mail-form input:not([type="checkbox"]), .mail-form select, .mail-test input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: var(--field-bg);
}
.mail-test { display: flex; gap: 8px; align-self: stretch; }
.mail-test input { flex: 1; }
.mail-page .hint { margin-bottom: 14px; }
/* Verwaltung: mehr Luft zwischen Hinweis, Eingabezeile und Tabelle */
.admin-section > .hint { margin-bottom: 16px; }
.admin-section .toolbar { gap: 14px; margin-bottom: 20px; }
.admin-section .toolbar input[type="text"] { min-width: 340px; }
.audit-page .hint { margin-bottom: 14px; }
.audit-page .toolbar select { min-width: 180px; }
.audit-page .toolbar input[type="search"] { min-width: 220px; }
.audit-page > button { margin-top: 14px; }
.settings-page { max-width: 760px; }
.settings-page .hint { margin-bottom: 12px; }
.setting-row { margin-bottom: 18px; }
.setting-row .hint { margin: 4px 0 0; }
.setting-line { display: flex; align-items: center; gap: 10px; }
.setting-line input { width: 120px; box-sizing: border-box; }
.settings-page .form-buttons { margin: 8px 0 28px; display: flex; gap: 10px; }
/* Namensvorschläge beim Tippen */
.suggest-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.suggest-wrap > input { width: 100%; box-sizing: border-box; }
.suggest-list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--field-bg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); max-height: 220px; overflow-y: auto; }
.suggest-item { display: flex; gap: 10px; justify-content: space-between; padding: 6px 10px; cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--chip); }
.suggest-hint { font-size: 0.8em; }
/* Kontakte: „+“ neben dem Namensfeld, darunter das kleine Formular für einen neuen Leser */
.team-add { display: flex; flex-direction: column; gap: 6px; }
.add-user { min-width: 36px; height: 36px; box-sizing: border-box; padding: 0 10px; font-weight: 600; }
.new-user-form[hidden] { display: none; }
.needs-review { margin-left: 4px; padding: 1px 8px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-border); font-size: .8rem; }
/* Hilfe-Tooltips (tooltip.js) */
.tooltip { position: fixed; z-index: 1000; max-width: 320px; padding: 6px 10px; border-radius: 6px; background: var(--text); color: var(--panel);
  font-size: .8rem; line-height: 1.35; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); pointer-events: none; }
.tooltip[hidden] { display: none; }
/* Seite zur Versionsnummer: Reiter Changelog / Bugs / Features, Meldeformular, Liste, Einzelansicht */
.feedback-page { max-width: 980px; }
.feedback-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.feedback-content h2 { margin-top: 0; }
.feedback-content h3 { margin: 18px 0 8px; font-size: 1rem; }
.feedback-form { display: grid; gap: 10px; max-width: 720px; }
.feedback-form input, .feedback-form textarea, .feedback-comments textarea, .feedback-detail select {
  font: inherit; padding: 6px 8px; border: 1px solid var(--field-border); border-radius: 6px; background: var(--field-bg); color: var(--text);
}
.feedback-form input, .feedback-form textarea, .feedback-comments textarea { width: 100%; }
.feedback-form button[type="submit"] { justify-self: start; }
.feedback-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-description { margin: 12px 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font: inherit; line-height: 1.5; }
.feedback-detail-head { margin: 12px 0 0; }
.feedback-detail-head h2 { margin-bottom: 4px; overflow-wrap: anywhere; }
.feedback-comment { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--line); }
.feedback-comments button { margin-top: 8px; }
/* Einstellungen: jede Gruppe als eigene Karte, Sprungknöpfe oben, Speichern-Leiste bleibt unten sichtbar */
.settings-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.settings-nav button { padding: 4px 12px; font-size: .9rem; }
.settings-group { margin: 0 0 20px; padding: 16px 18px 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; scroll-margin-top: 90px; }
.settings-group h3 { margin: 0 0 4px; padding-left: 10px; border-left: 4px solid var(--accent); font-size: 1.05rem; }
.settings-group > .hint { margin: 0 0 12px; }
.settings-group .setting-row { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.settings-group-startup { background: transparent; border-style: dashed; padding-bottom: 14px; }
.settings-group-startup h3 { border-left-color: var(--muted); }
.settings-actions { position: sticky; bottom: 0; margin: 0 0 24px; padding: 10px 0; background: var(--bg); border-top: 1px solid var(--line); z-index: 3; }
.phase-tag { padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; font-size: .8rem; color: var(--muted); white-space: nowrap; } /* Phase der Bemerkung */
.tile-setups .setup-line, .tile-setups .setup-head { display: grid; grid-template-columns: minmax(5rem, 1fr) 4rem 9rem 11rem 7.5rem; gap: 0 8px; align-items: center; } /* feste Spalten: ein Ansatz = eine Zeile, Überschriften stehen darüber */
.tile-setups .setup-line > *, .tile-setups .setup-head > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tile-setups .setup-head { padding: 2px 0; font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.setup-due.overdue { color: var(--danger); font-weight: 600; } /* Stoff überfällig */
.setup-name { cursor: help; }
.series-popup { position: fixed; z-index: 60; width: 580px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 10px 12px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.series-popup.pinned { border-color: var(--accent); }
.series-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.series-close { border: none; background: transparent; font-size: 1.4rem; line-height: 1; padding: 0 6px; cursor: pointer; color: var(--muted); }
.series-close:hover { color: var(--danger); background: transparent; }
.series-range { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.series-range button { min-width: 32px; padding: 2px 8px; }
.series-range-label { min-width: 8em; text-align: center; color: var(--muted); font-size: .9rem; }
.series-chart { width: 100%; height: auto; display: block; cursor: pointer; }
.series-axes line { stroke: var(--table-border); stroke-width: 1; }
.series-axes .series-grid { stroke: var(--line); stroke-dasharray: 3 3; }
.series-axes text { fill: var(--muted); font-size: 11px; }
.series-limit { fill: none; stroke-width: 2; stroke-dasharray: none; } /* UEG und OEG als durchgehender Strich */
.series-ueg, .series-oeg { stroke: var(--danger); }
.series-soll { stroke: var(--ok); stroke-dasharray: 5 4; }
.series-marker { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
.series-dot { stroke: var(--panel); stroke-width: 1.5; fill: var(--accent); }
.series-dot.series-within { fill: var(--ok); }
.series-dot.series-below, .series-dot.series-above { fill: var(--danger); }
.series-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; }
.series-key::before { content: ""; display: inline-block; width: 18px; border-top: 2px solid currentColor; margin-right: 5px; vertical-align: middle; }
.series-key-dot::before { width: 9px; height: 9px; border: none; border-radius: 50%; margin-right: 6px; background: var(--ok); }
.series-key-dot.series-below::before { background: var(--danger); }
.series-key-dot.series-newsetup::before { background: var(--accent); }
.series-key-dot.series-newsetup { color: var(--text); }
.series-marker-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.series-key.series-ueg, .series-key.series-oeg { color: var(--danger); }
.series-key.series-soll { color: var(--ok); }
.series-key.series-marker { color: var(--accent); }
.tile-setups .setup-line > .badge { justify-self: start; max-width: 100%; box-sizing: border-box; } /* Badge nicht auf Spaltenbreite ziehen */
.tile-setups .setup-head > :last-child { padding-left: 11px; } /* Überschrift „Status“ beginnt bündig mit dem Text im Badge (Rand 1 px + Innenabstand 10 px) */