:root {
  color-scheme: light;
  --bg: #f9f9f7;
  --card: #fcfcfb;
  --card-2: #f3f2ee;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --line: #e1e0d9;
  --axis: #c3c2b7;
  --accent: #2a78d6;
  --accent-ink: #ffffff;
  --good: #0ca30c;
  --good-ink: #006300;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --ring: rgba(11, 11, 11, .10);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
  --tip-bg: #ffffff;
  --tip-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}
/* Dunkel: fest gewählt (Darstellung «Dunkel») oder automatisch nach Gerät, solange nicht «Hell» gewählt ist */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0d;
  --card: #1a1a19;
  --card-2: #232321;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --line: #2c2c2a;
  --axis: #383835;
  --accent: #3987e5;
  --good-ink: #0ca30c;
  --ring: rgba(255, 255, 255, .10);
  --shadow: none;
  --tip-bg: #2c2c2a;
  --tip-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0d0d;
    --card: #1a1a19;
    --card-2: #232321;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --line: #2c2c2a;
    --axis: #383835;
    --accent: #3987e5;
    --good-ink: #0ca30c;
    --ring: rgba(255, 255, 255, .10);
    --shadow: none;
    --tip-bg: #2c2c2a;
    --tip-shadow: 0 4px 14px rgba(0, 0, 0, .6);
  }
}
* { box-sizing: border-box; }
/* Scrollleisten überall ganz schmal (Seite, Seitenleiste, Tabellen, Plan, Dialoge): 6 px statt der Leiste des Systems. Nur mit Maus –
   auf Handy und Tablet blendet das Gerät seine ohnehin schmale Leiste selbst ein und aus. Firefox kennt nur «thin». */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 50%, transparent); }
  @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; } }
}
body { margin: 0; background: var(--bg); color: var(--ink); display: flex; min-height: 100vh; line-height: 1.45; }
a { color: var(--accent); }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0; }
h3 { font-size: 14px; margin: 0 0 10px; color: var(--ink-2); font-weight: 600; }
.sub { color: var(--ink-2); margin: 0 0 20px; max-width: 80ch; }

/* ---------- Navigation */
.sidebar { width: 220px; flex: none; background: var(--card); border-inline-end: 1px solid var(--line); padding: 0 12px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; }
/* Logo-Bereich bleibt beim Scrollen der Navigation oben stehen */
.brand { display: flex; gap: 10px; align-items: center; padding: 16px 20px 12px; margin: 0 -12px 8px; position: sticky; top: 0; z-index: 3; background: var(--card); border-bottom: 1px solid var(--line); }
.brand-name { min-width: 0; }
.brand-knoepfe { margin-inline-start: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
/* Benutzer und Einstellungen ganz unten (bei kurzer Navigation am unteren Rand) */
.sidebar-fuss { margin-top: auto; padding-top: 10px; }
/* Einstellungen als Symbolleiste: unsichtbares Auswahlfeld über jedem Symbol öffnet die Liste */
.einst-leiste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.einst-icon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 8px; color: var(--ink-2); cursor: pointer; }
.einst-icon:hover, .einst-icon:focus-within { background: var(--card-2); color: var(--ink); }
.einst-icon:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.einst-icon select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.einst-wert { font-size: 10px; line-height: 1.2; font-weight: 600; color: var(--muted); min-height: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
.logo { width: 30px; height: 30px; border-radius: 8px; background: #1baf7a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 25V13M16 15c0-4 3-7 8-7 0 5-3 8-8 7zM16 18c0-4-3-7-8-7 0 5 3 8 8 7z' stroke='white' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover; flex: none; }
nav { --nav-ink: color-mix(in srgb, var(--ink-2) 75%, var(--ink)); }
nav a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--nav-ink); text-decoration: none; margin-bottom: 1px; }
nav a:hover { background: var(--card-2); color: var(--ink); }
nav a.active { background: var(--card-2); color: var(--ink); font-weight: 600; }
.nav-sep { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 16px 10px 4px; }
button.nav-sep { width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; font: inherit; text-transform: none; letter-spacing: normal; color: var(--nav-ink); padding: 7px 10px; margin-top: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
button.nav-sep:hover { background: var(--card-2); color: var(--ink); }
.nav-items a { margin-inline-start: 12px; }
button.nav-sep::after { content: "▸"; font-size: 10px; transition: transform .15s; }
.nav-group.open > button.nav-sep::after { transform: rotate(90deg); }
.nav-group:not(.open) > .nav-items { display: none; }
.lo-kopf { cursor: pointer; margin: 0; }
.lo-kopf::before { content: "▸"; font-size: 11px; color: var(--muted); transition: transform .15s; }
.lo-card.open .lo-kopf::before { transform: rotate(90deg); }
.lo-card.open .lo-body { margin-top: 10px; }
.lo-card:not(.open) .lo-body { display: none; }
main { flex: 1; min-width: 0; padding: 28px 32px 60px; outline: none; }

/* ---------- Bausteine */
.link-x { background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--muted); font: inherit; }
.link-x:hover { color: var(--critical, #d03b3b); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.tile .label { color: var(--ink-2); font-size: 12px; }
.tile .value { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }
.tile .hint { color: var(--muted); font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.toolbar label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-2); gap: 3px; }
.btn { font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 7px; padding: 6px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--axis); background: var(--card-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--critical); }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.icon-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; }
.icon { display: inline-flex; }
.dd-pfeil { font-size: 10px; color: var(--muted); }
.dd { position: relative; display: inline-block; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; }
.dd-menu button { display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: 6px; padding: 7px 10px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.dd-menu button:hover, .dd-menu button:focus-visible { background: var(--card-2); outline: none; }
.dd-menu button.dd-trenn { margin-top: 5px; position: relative; }
.dd-menu button.dd-trenn::before { content: ''; position: absolute; left: 4px; right: 4px; top: -3px; border-top: 1px solid var(--line); }
/* PDF-Sammlung: Zahl der gesammelten Ansichten am Druckersymbol, Liste im Dialog */
.pdf-zahl { min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.pdf-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pdf-zeile { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.pdf-zeile .pdf-nr { min-width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pdf-zeile .pdf-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.icon { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-2); padding: 2px 6px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; min-width: 0; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
input[type=color] { padding: 2px; height: 34px; width: 60px; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-inline-end: 6px; }
.empty { color: var(--muted); text-align: center; padding: 20px !important; }
.error { color: var(--critical); padding: 20px; }
.info { background: var(--card-2); border-radius: 7px; padding: 8px 10px; color: var(--ink-2); grid-column: 1 / -1; }
.warn-text { color: var(--critical); }

/* ---------- Tabellen */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.data { border-collapse: collapse; width: 100%; }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.data .num { text-align: right; }
table.data th { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--card-2); position: sticky; top: 0; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--card-2); }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.actions .btn { margin-inline-start: 4px; }
table.data tfoot td { font-weight: 600; background: var(--card-2); }
table.data input[type=number] { width: 90px; text-align: right; }
.clickable { cursor: pointer; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover, table.data th.sortable:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--card-2) 70%, var(--axis)); outline: none; }
table.data th.sortable .th-in::after { content: "↕"; margin-inline-start: 4px; font-size: 11px; color: var(--muted); opacity: .5; }
table.data th.sortable[aria-sort=ascending] .th-in::after { content: "▲"; opacity: 1; color: var(--accent); font-size: 9px; }
table.data th.sortable[aria-sort=descending] .th-in::after { content: "▼"; opacity: 1; color: var(--accent); font-size: 9px; }
table.data .col-aus { display: none !important; }
table.data th[draggable=true] { cursor: grab; }
table.data th.zieht { opacity: .45; }
table.data th.drop-l { box-shadow: inset 3px 0 0 var(--accent); }
table.data th.drop-r { box-shadow: inset -3px 0 0 var(--accent); }
table.data th .spalten-greifer { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 2; touch-action: none; }
table.data th .spalten-greifer::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 0; width: 2px; border-radius: 1px; background: var(--accent); opacity: 0; }
table.data thead:hover .spalten-greifer::after { opacity: .25; }
table.data th .spalten-greifer:hover::after, table.data.spalten-zieht .spalten-greifer::after { opacity: 1; }
table.data.spalten-zieht, table.data.spalten-zieht * { cursor: col-resize !important; user-select: none; }
table.data.spalten-fix { table-layout: fixed; }
table.data.spalten-fix th, table.data.spalten-fix td { overflow: hidden; text-overflow: ellipsis; }
.spalten-btn { display: inline-flex; vertical-align: middle; margin-inline-start: 6px; padding: 2px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
table.data thead:hover .spalten-btn, .spalten-btn:focus-visible { opacity: 1; }
.spalten-btn:hover { color: var(--ink); background: var(--line); }
@media (hover: none) { .spalten-btn { opacity: .7; } }
.spalten-zeile { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.spalten-zeile label { flex: 1; }

/* ---------- Status-Badges (Farbe + Symbol + Text) */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 1px 8px 1px 6px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.badge.good::before { background: var(--good); }
.badge.warning::before { background: var(--warning); }
.badge.serious::before { background: var(--serious); }
.badge.critical::before { background: var(--critical); }
.badge.accent::before { background: var(--accent); }

/* ---------- Formulare & Dialoge */
dialog.modal { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
dialog.modal.wide { width: min(980px, calc(100vw - 32px)); }
dialog.modal.klein { width: min(460px, calc(100vw - 32px)); }
dialog.modal.confirm header { border-bottom: 0; padding-bottom: 4px; }
dialog.modal.confirm footer { border-top: 0; padding-top: 4px; }
.confirm-text { white-space: pre-line; color: var(--ink-2); line-height: 1.55; }
.btn.danger-solid { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn.danger-solid:hover { filter: brightness(1.08); background: var(--critical); }
.btn:focus-visible, dialog.confirm footer .btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
dialog.modal::backdrop { background: rgba(0, 0, 0, .35); }
dialog.modal[open] { display: flex; flex-direction: column; }
/* Kopf und Aktionsleiste bleiben immer sichtbar, nur der Inhalt scrollt (dvh: Handy-Browserleisten) */
dialog.modal > header, dialog.modal > footer { flex: none; }
dialog.modal { max-height: calc(100dvh - 48px); }
dialog header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 16px 18px; overflow-y: auto; }
dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
dialog footer .left { margin-inline-end: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.field select { min-width: 0; max-width: 100%; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field .mit-knopf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }  /* Eingabefeld mit Knopf daneben, z. B. «Nächstes freies Datum» */
.field .mit-knopf input { flex: 1; min-width: 140px; }
.field label { font-size: 12px; color: var(--ink-2); }
.field small { color: var(--muted); font-size: 11px; }
.field.full { grid-column: 1 / -1; }
.field.check { flex-direction: row; align-items: center; gap: 8px; padding-top: 18px; }
.field.check label { font-size: 14px; color: var(--ink); }

/* ---------- Böden-Auswahl */
.boden-pick { grid-column: 1 / -1; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.boden-pick[hidden] { display: none; }
.boden-pick .row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.boden-pick .row b { width: 64px; font-size: 12px; color: var(--ink-2); }
.chip { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; cursor: pointer; user-select: none; background: var(--card); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- Belegungsplan */
.plan { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: auto; max-height: calc(100vh - 210px); }
.plan-inner { min-width: 900px; position: relative; cursor: grab; user-select: none; }
body.plan-zieht, body.plan-zieht * { cursor: grabbing !important; }
body.plan-zieht #tip { display: none !important; }
.plan-row { display: flex; height: 22px; border-bottom: 1px solid var(--line); }
.plan-row .code { width: 72px; flex: none; font-size: 11px; color: var(--ink-2); padding: 3px 8px; position: sticky; left: 0; background: var(--card); z-index: 2; border-inline-end: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.plan-row.inactive .code { color: var(--muted); text-decoration: line-through; }
.plan-row .lane { position: relative; flex: 1; }
.plan-head { position: sticky; top: 0; z-index: 3; background: var(--card-2); height: 30px; }
.plan-head .code { background: var(--card-2); font-weight: 600; padding-top: 7px; }
.plan-head .wk { position: absolute; top: 0; bottom: 0; font-size: 11px; color: var(--ink-2); padding: 7px 4px 0; border-inline-start: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.plan-mod { height: 24px; background: var(--card-2); font-size: 12px; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); position: sticky; left: 0; cursor: pointer; }
.plan-mod::before { content: "▸"; display: inline-block; width: 14px; text-align: center; font-size: 11px; color: var(--muted); transition: transform .15s; }
.plan-mod.open::before { transform: rotate(90deg); }
.gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.todayline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--critical); z-index: 1; opacity: .7; }
.bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; font-size: 11px; line-height: 14px; padding: 0 5px; overflow: hidden; white-space: nowrap; color: var(--ink); cursor: pointer; border-inline-start: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 42%, var(--card)); }
.bar.geplant { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--card)) 0 5px, color-mix(in srgb, var(--c) 32%, var(--card)) 5px 10px); }
.bar.geerntet { background: var(--card-2); border-inline-start-color: var(--muted); color: var(--muted); }
.bar:hover { outline: 2px solid var(--c); z-index: 2; }
.bar .schnitt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--card); opacity: .85; pointer-events: none; }
.plan-row.anzucht { height: 34px; background: var(--card-2); }
.plan-row.anzucht .code { background: var(--card-2); font-weight: 600; line-height: 1.2; }
.anz-seg { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.anz-seg .anz-fill { position: absolute; left: 0; right: 0; bottom: 2px; background: color-mix(in srgb, var(--good) 55%, var(--card)); border-radius: 2px 2px 0 0; box-shadow: inset 1px 0 var(--card-2); }
.anz-seg.voll .anz-fill { background: var(--warning); }
.anz-seg.ueber .anz-fill { background: var(--critical); }
.anz-seg span { position: absolute; left: 5px; bottom: 3px; font-size: 11px; line-height: 14px; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-mod .muted { font-weight: 400; }
.anz-kap { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--muted); pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); align-items: center; }
.legend .pat { display: inline-block; width: 22px; height: 10px; border-radius: 3px; vertical-align: middle; margin-inline-end: 5px; border: 1px solid var(--axis); }

/* ---------- Diagramm Auslastung */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 0 0 22px 34px; position: relative; }
.chart .axis { position: absolute; left: 34px; right: 0; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.chart .axis span { position: absolute; left: -34px; top: -8px; width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.chart .axis.base { border-top-color: var(--axis); }
.chart .col { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.chart .col .b { width: min(70%, 44px); background: var(--accent); border-radius: 4px 4px 0 0; min-height: 1px; }
.chart .col.over .b { background: var(--critical); }
.chart .col:hover .b { filter: brightness(1.12); }
.chart .col .x { position: absolute; bottom: -20px; font-size: 11px; color: var(--muted); white-space: nowrap; }

#tip { position: fixed; z-index: 1000; background: var(--tip-bg); color: var(--ink); border: 1px solid var(--axis); font-size: 12px; line-height: 1.45; padding: 7px 10px; border-radius: 7px; pointer-events: none; max-width: 340px; white-space: pre-line; box-shadow: var(--tip-shadow); }

/* ---------- Info-Symbole, Erklärboxen, Hilfe */
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-inline-start: 5px; border-radius: 50%; border: 1px solid var(--axis); background: var(--card); color: var(--ink-2); font: italic 600 10px/1 Georgia, serif; cursor: help; padding: 0; vertical-align: middle; flex: none; }
.info-i:hover, .info-i:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); outline: none; }
.th-in { display: inline-flex; align-items: center; }
th.num .th-in { justify-content: flex-end; }
.dotted { border-bottom: 1px dotted var(--muted); cursor: help; }
.small { font-size: 12px; }
.full-row { grid-column: 1 / -1; }
:root[data-hinweise="aus"] details.howto { display: none; }  /* Einstellung «Hinweise: ausblenden» */
details.howto { background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 8px; margin: 0 0 16px; max-width: 110ch; }
details.howto summary { cursor: pointer; padding: 8px 12px; color: var(--ink-2); font-weight: 600; font-size: 13px; list-style-position: inside; }
details.howto[open] summary { border-bottom: 1px solid var(--line); }
.howto-body, .hilfe section { padding: 4px 14px 10px; color: var(--ink-2); }
.howto-body p, .hilfe p { margin: 8px 0; }
.howto-body ul, .hilfe ul { margin: 6px 0; padding-inline-start: 20px; }
.howto-body li, .hilfe li { margin: 3px 0; }
.formula { font: 500 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; background: var(--card-2); color: var(--ink); border-radius: 6px; padding: 4px 10px; margin: 4px 0; overflow-x: auto; white-space: pre-wrap; }
.hilfe { max-width: 920px; }
.hilfe section { margin-top: 14px; padding: 16px 20px; scroll-margin-top: 16px; }
.hilfe h2 { font-size: 17px; margin-bottom: 6px; color: var(--ink); }
.hilfe-nr { color: var(--muted); font-variant-numeric: tabular-nums; }
.toc { margin: 0; padding-inline-start: 20px; columns: 2; column-gap: 32px; }
.toc li { margin: 4px 0; }
.formeln input[type=search] { min-width: 280px; }
.formeln [hidden] { display: none; }

.card h3 { display: flex; align-items: center; }
.tile .label { display: flex; align-items: center; }
/* «Ansicht als»: farbiger Rahmen und Hinweisleiste, solange der Admin als anderer Benutzer sieht */
body.ansicht-als main { box-shadow: inset 0 0 0 3px var(--warning); }
#ansicht-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1500; display: flex; align-items: center; gap: 12px;
  background: var(--warning); color: #000; padding: 8px 10px 8px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px); }
@media print { #ansicht-banner { display: none; } body.ansicht-als main { box-shadow: none; } }
/* Popover (index.html): liegt im Top-Layer über modalen Fenstern; die Vorgaben des Browsers für Popover (Mitte, Rahmen, Hintergrund) sind hier aufgehoben */
#toast { position: fixed; inset: auto 20px 20px auto; margin: 0; border: 0; padding: 0; background: none; color: inherit; overflow: visible; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
#toast div { background: var(--ink); color: var(--card); padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); max-width: 420px; }
#toast div.err { background: var(--critical); color: #fff; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { font: inherit; border: 0; background: none; padding: 8px 12px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

@media (max-width: 800px) {
  body { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 0 16px 10px; }
  .brand { padding: 10px 16px 8px; margin: 0 -16px; border-bottom: 0; }
  nav { display: flex; flex-direction: column; }  /* wie am Desktop: die Gruppen lassen sich auf- und zuklappen */
  button.nav-sep { padding: 10px 12px; margin-top: 2px; }
  main { padding: 18px 16px 40px; }
  .grid.two { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Anmeldung / Registrierung / Ersteinrichtung */
body.auth-mode .sidebar, body.auth-mode main { display: none; }
#auth { position: fixed; inset: 0; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 40px;
  background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, #1baf7a 14%, var(--bg)), var(--bg)); }
#auth[hidden] { display: none; }
.auth-karte { width: min(440px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.auth-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-kopf .spacer { flex: 1; }
.auth-kopf small { display: block; color: var(--muted); font-size: 12px; }
.auth-kopf select { font-size: 12px; padding: 3px 6px; }
.auth-karte h1 { font-size: 20px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.auth-form .btn.primary { padding: 9px 14px; margin-top: 4px; }
.auth-fehler { background: color-mix(in srgb, var(--critical) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--critical) 40%, var(--card)); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.auth-ok { background: color-mix(in srgb, var(--good) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--card)); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 6px; }
.auth-fehler[hidden], .auth-ok[hidden] { display: none; }
.auth-unten { margin-top: 16px; text-align: center; font-size: 13px; }

/* ---------- Benutzerbox in der Seitenleiste */
.user-box { padding: 4px 0 0; border-top: 1px solid var(--line); }
.user-box:empty { display: none; }
.user-name strong { display: block; font-size: 13px; }
.user-name small { color: var(--muted); font-size: 12px; }
.user-aktionen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.user-box > button.nav-sep { display: flex; padding: 6px 10px; }
.user-box.open > button.nav-sep::after { transform: rotate(90deg); }
.user-box:not(.open) > .user-aktionen { display: none; }

/* ---------- Benutzer & Rechte */
.hinweis-band { background: color-mix(in srgb, var(--warning) 16%, var(--card)); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--card)); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.rechte { display: flex; flex-direction: column; gap: 10px; }
.rechte-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.rechte fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 0; }
.rechte legend { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.recht { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.recht label { cursor: pointer; }
.pw-zeile { display: flex; gap: 6px; }
.totp-qr { display: block; width: 200px; max-width: 100%; margin: 0 auto; }
.totp-qr svg { display: block; width: 100%; height: auto; }
.totp-secret { font-family: ui-monospace, Menlo, monospace; user-select: all; }
.totp-form { grid-template-columns: 1fr; }
.totp-codes { columns: 2; white-space: nowrap; margin: 0; padding-inline-start: 28px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; line-height: 1.8; }
.totp-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pw-zeile input { flex: 1; font-family: ui-monospace, Menlo, monospace; }

/* ---------- Historie */
ul.diff { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.5; }
ul.diff del { color: var(--muted); }
.balken-zelle { display: inline-flex; align-items: center; gap: 6px; }
.balken { display: inline-block; height: 8px; border-radius: 0 4px 4px 0; background: var(--accent); }
.chart.tage { gap: 2px; }
.chart.tage .col .b { width: 100%; max-width: 18px; border-radius: 3px 3px 0 0; }

/* ---------- Systemzustand (Admin) */
.meter { height: 6px; border-radius: 3px; background: var(--card-2); margin-top: 8px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--good); }
.meter span.hinweis { background: var(--warning); }
.meter span.warning { background: var(--serious); }
.meter span.critical { background: var(--critical); }
.sys-card { margin: 16px 0; }
.sys-card .tiles { margin-bottom: 10px; }
.probleme { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
table.kv td:first-child { width: 40%; }
table.kv td { word-break: break-word; }

/* ---------- Druck (Knopf «Drucken» in den Ansichten): immer helles Layout, Bedienelemente ausgeblendet */
#druck-kopf, #druck-inhalt { display: none; }
@media print {
  .lo-card .lo-body { display: block !important; margin-top: 10px; } .lo-kopf::before { display: none; }
  /* Die Zusätze [data-theme] und :not(…) machen die Regel so spezifisch wie die dunklen Farben oben – sonst gewinnen diese und der Ausdruck wird dunkel */
  :root, :root[data-theme], :root:not([data-theme="light"]) { color-scheme: light; --bg: #fff; --card: #fff; --card-2: #f3f2ee; --ink: #000; --ink-2: #444; --muted: #777; --line: #d6d5ce; --axis: #b5b4aa;
    --accent: #2a78d6; --good-ink: #006300; --ring: rgba(11, 11, 11, .10); --shadow: none; --tip-bg: #fff; --tip-shadow: none; font-size: 9pt; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { display: block; background: #fff; }
  .sidebar, #toast, #tip, #auth, dialog, #druck-frame, .btn, a.btn, details.howto, .tabs, .info-i, td.actions, table.data th:last-child:empty, table.data th.kopf-leer, .spalten-btn, .spalten-greifer,
  .toolbar > div > p.sub, label:has(input[type=search]:placeholder-shown) { display: none !important; }
  main { padding: 0; }
  body:not(.druck-komplett) main h1 { display: none; }
  body.druck-komplett main { display: none; }
  #druck-inhalt { display: block; }
  .druck-teil + .druck-teil { break-before: page; }
  /* PDF-Sammlung: jede Ansicht mit eigenem Kopf (ihre Bezeichnung als Titel) und eigenem Format; ihr h1 entfällt */
  .pdf-teil.quer { page: pdfquer; } .pdf-teil.hoch { page: pdfhoch; }
  .pdf-teil .toolbar h1 { display: none; }
  #druck-kopf, .pdf-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12mm; border-bottom: 2px solid #148a5f; padding-bottom: 2.5mm; margin-bottom: 5mm; }
  .druck-marke { font-size: 8pt; font-weight: 700; color: #148a5f; letter-spacing: .06em; text-transform: uppercase; }
  .druck-marke span { color: var(--muted); font-weight: 400; margin-inline-start: 6px; }
  .druck-titel { font-size: 15pt; font-weight: 700; margin-top: 1mm; }
  .druck-info { color: var(--ink-2); margin-top: .5mm; }
  .druck-stand { text-align: right; font-size: 8pt; color: var(--muted); white-space: nowrap; }
  h1 { font-size: 13pt; }
  h2 { font-size: 12pt; margin: 0 0 3mm; }
  .toolbar { margin-bottom: 3mm; }
  .toolbar input, .toolbar select, .form-grid input, .form-grid textarea, td input[type=number] { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; color: var(--ink); font: inherit; box-shadow: none; }
  .form-grid textarea { resize: none; }
  .card, .table-wrap, .plan { box-shadow: none; border-radius: 0; }
  .table-wrap, .plan { overflow: visible; max-height: none; }
  table.data { font-size: 8.5pt; }
  table.data.spalten-fix { table-layout: auto; width: 100% !important; }
  table.data.spalten-fix th { width: auto !important; }
  table.data thead { display: table-header-group; }
  table.data tr, .tile, .plan-row, .sys-card, .grid.two > .card { break-inside: avoid; }
  .plan-inner { min-width: 0; }
  .plan-head, .plan-row .code, .plan-mod { position: static; }
  .bar { cursor: default; }
  .plan-mod::before { display: none; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* Lager & Einkauf */
[hidden] { display: none !important; }
.good-text { color: var(--good); }
.nowrap { white-space: nowrap; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
dl.kv.two { grid-template-columns: max-content 1fr max-content 1fr; }
.kv dt { color: var(--ink-2); font-size: 12px; padding-top: 2px; }
.kv dd { margin: 0; }
@media (max-width: 760px) { dl.kv.two { grid-template-columns: max-content 1fr; } }
.mailtext, .logtext { white-space: pre-wrap; font: 12px/1.45 ui-monospace, Menlo, monospace; margin: 0; }
.mailtext { background: var(--card-2); border-radius: 7px; padding: 10px 12px; max-height: 42vh; overflow: auto; }
.logtext { max-height: 9em; overflow: auto; }
.mail-liste { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; font-size: 13px; }
.pruef { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pruef-punkt { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2); }
table.we input, table.we select { font-size: 13px; }
table.we input.kurz { width: 76px; }
table.we input.mittel { width: 110px; }
table.we td.mangel { min-width: 170px; }
table.we td.mangel > * { display: block; width: 100%; margin-bottom: 3px; }
.lagerung { color: var(--accent); }
.scan-feld { min-width: 220px; }
.hinweise { margin: 0; padding-inline-start: 0; list-style: none; display: grid; gap: 6px; }
.hinweise li { line-height: 1.45; }
table.log td { vertical-align: top; }

/* Gebäudeplan */
.gp-tools { align-items: center; }
.gp-suche { min-width: 240px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-links { min-width: 0; display: grid; gap: 10px; }
.gp-legende-unten { padding: 0 2px; }
.gp-chip .muted { font-size: 11px; }
.gp-icon { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.gp-zoom .gp-mess-knopf { min-width: 30px; padding-inline: 0; display: inline-flex; align-items: center; justify-content: center; }
.gp-chip { font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.gp-chip.an { color: var(--ink); border-color: var(--axis); }
.gp-chip:not(.an) .gp-punkt, .gp-chip:not(.an) .gp-icon { opacity: .3; }
.gp-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; flex: none; }
.gp-chip .gp-punkt { margin-inline-end: 0; }
.gp-etagen { display: inline-flex; gap: 4px; }
.gp-etage-hits { margin-inline-start: 5px; padding: 0 5px; border-radius: 99px; background: var(--critical); color: #fff; font-size: 11px; }
.gp-raster { flex-direction: row !important; align-items: center; gap: 6px !important; }
.gp-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }  /* der Plan hat immer die ganze Breite, Bereichinfos stehen darunter */
.gp-canvas { position: relative; padding: 0; overflow: hidden; height: calc(100vh - 300px); min-height: 420px; }
.gp-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: grab; background: var(--card); }
.gp-svg:active { cursor: grabbing; }
/* 3D-Ansicht (floorplan3d.js): die Box liegt über dem Plan, SVG und Zoomknöpfe bleiben verborgen im DOM */
.gp-canvas.gp-3d > *:not(.gp-3d-box) { display: none; }
.gp-3d-box { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; background: var(--card); }
.gp-3d-box canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; }
.gp-3d-box.gp-3d-geht canvas { cursor: crosshair; }
.gp-3d-box.gp-3d-zieht canvas { cursor: move; }
.gp-3d-box:focus-within { box-shadow: inset 0 0 0 2px var(--ring); }
.gp-3d-label { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: none; font-size: 12px; line-height: 1.3; padding: 1px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--ink); white-space: nowrap; border: 1px solid var(--line); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.gp-3d-label.klein { font-size: 10px; opacity: .85; }
.gp-3d-label.sel { font-weight: 600; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gp-3d-label.oeff { font-size: 10px; opacity: .8; border-style: dashed; }
.gp-3d-knoepfe { position: absolute; top: 8px; right: 8px; display: grid; gap: 4px; justify-items: end; }
.gp-3d-geh { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 42px); gap: 4px; }
.gp-3d-geh .btn { padding: 6px 0; font-size: 16px; }
.gp-3d-hinweis { position: absolute; left: 8px; bottom: 8px; font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--card) 85%, transparent); padding: 2px 8px; border-radius: 6px; pointer-events: none; max-width: calc(100% - 160px); }
.gp-3d-laedt { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.gp-auge-an { opacity: .55; }
.gp-3d-tools { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gp-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.gp-zoom .btn { min-width: 30px; }
.gp-panel { max-width: 760px; }
.gp-panel h3 { margin: 0 0 10px; display: flex; align-items: center; }
.gp-panel .table-wrap { margin: 8px 0; }
.gp-liste, .gp-legende { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.gp-legende li { display: flex; align-items: center; }
.gp-notiz { white-space: pre-wrap; color: var(--ink-2); }
.gp-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.gp-leiste:not(:empty) { display: flex; }
.gp-leiste { display: none; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }  /* unter dem Plan: verdeckt nichts */
.gp-leiste .gp-aktionen { margin: 0; }
.gp-aktionen .gp-ebene { width: auto; max-width: 150px; padding: 3px 6px; font-size: 13px; }
.gp-form { grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.gp-farbe { display: flex; gap: 6px; align-items: center; }
.gp-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.gp-panel > .field { margin-bottom: 10px; }
.small { font-size: 12px; }
.gp-r1 { fill: none; stroke: var(--line); stroke-width: .02; }
.gp-r5 { fill: none; stroke: var(--axis); stroke-width: .04; }
.gp-bg { pointer-events: none; }
.gp-achse text { font-size: .6px; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.gp-hallenwand { fill: var(--card-2); fill-opacity: .55; stroke: var(--ink-2); stroke-width: .22; }
.gp-halle-name { font-size: .7px; fill: var(--muted); font-weight: 600; pointer-events: none; }
.gp-el { outline: none; }
.gp-el .gp-flaeche { fill-opacity: .2; stroke-width: .08; }
.gp-el .gp-gestrichelt { fill-opacity: .12; }
/* Linienform des Umrisses: Bereiche zeichnen in Metern, Unterelemente und Hilfslinien mit fester Strichstärke in Bildpunkten (siehe unten) */
.gp-linie-strich { stroke-dasharray: .4 .25; }
.gp-linie-punkt { stroke-dasharray: .01 .22; stroke-linecap: round; }
.gp-linie-strichpunkt { stroke-dasharray: .5 .2 .01 .2; stroke-linecap: round; }
.gp-el:not(.sel):not(.treffer) .gp-linie-keine, .gp-passiv .gp-linie-keine { stroke: none; }
.gp-schraffur { stroke: var(--axis); stroke-width: .05; }
.gp-muster { opacity: .6; }
.gp-name { fill: var(--ink); text-anchor: middle; font-weight: 600; pointer-events: none; }
.gp-unter { fill: var(--ink-2); text-anchor: middle; pointer-events: none; }
.gp-schloss { text-anchor: end; pointer-events: none; }
.gp-balken-bg { fill: var(--line); }
.gp-el:not(.gp-halle):hover .gp-flaeche, .gp-el:focus-visible .gp-flaeche { fill-opacity: .32; stroke-width: .14; }
.gp-el.sel .gp-flaeche, .gp-el.sel .gp-hallenwand { stroke: var(--accent); stroke-width: .2; fill-opacity: .35; }
.gp-el.ziehbar { cursor: move; }
.gp-el.gedimmt { opacity: .22; }
.gp-el.treffer .gp-flaeche { stroke: var(--critical); stroke-width: .28; fill-opacity: .4; }
.gp-geist rect, .gp-geist polygon { fill: none; stroke: var(--muted); stroke-width: .06; stroke-dasharray: .3 .2; }
.gp-geist text { fill: var(--muted); font-style: italic; }
.gp-ecke { fill: #fff; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: move; }
.gp-kante { fill: var(--accent); fill-opacity: .45; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: copy; }
.gp-ecken { margin: 0 0 10px; display: grid; gap: 4px; font-size: 13px; }
.gp-ausrichten { display: grid; gap: 6px; margin: 0 0 10px; font-size: 13px; }
.gp-ausrichten select { width: 100%; box-sizing: border-box; }
.gp-ausrichten .gp-aktionen { margin: 0; }
.gp-ecken-kopf { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.gp-ecke-zeile { display: grid; grid-template-columns: 18px 1fr 1fr auto; gap: 6px; align-items: center; }
.gp-ecke-zeile input { width: 100%; box-sizing: border-box; }
.gp-svg.gp-misst, .gp-svg.gp-misst .gp-el { cursor: crosshair; }
/* Bemassung nach Norm: dünne Masshilfs- und Masslinien, gefüllte Pfeile an den Enden, Mass über der Linie – alles in Schriftfarbe (schwarz, im Dunkelmodus weiss) */
.gp-mass line, .gp-messungen line { stroke: var(--ink); stroke-width: .75px; fill: none; vector-effect: non-scaling-stroke; }
.gp-mass line.gp-mass-offen { stroke-dasharray: 6 4; }
.gp-mass polygon.gp-mass-pfeil, .gp-messungen polygon.gp-mass-pfeil { fill: var(--ink); stroke: none; }
.gp-mass line.gp-mass-teil, .gp-messungen line.gp-mass-teil { stroke-width: .5px; stroke-dasharray: 4 3; opacity: .8; }  /* Katheten einer Schrägmessung */
.gp-mass polygon.gp-mass-teil, .gp-messungen polygon.gp-mass-teil { opacity: .8; }
.gp-mass line.gp-mass-fang { stroke-width: .75px; stroke-dasharray: 3 3; opacity: .7; }
/* Referenzobjekt unter der Maus beim Messen: Umriss, bei der Objektmitte gefüllt; Kante dick; Dreieck auf der Kantenmitte */
.gp-mass polygon.gp-mass-ref { fill: none; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.gp-mass polygon.gp-mass-ref-voll { fill: var(--accent); fill-opacity: .22; }
.gp-mass line.gp-mass-ref-saum { stroke: var(--card); stroke-width: 7px; stroke-linecap: round; opacity: .9; }
.gp-mass line.gp-mass-ref-kante { stroke: var(--accent); stroke-width: 4px; stroke-linecap: round; }
.gp-mass polygon.gp-mass-ref-dreieck { fill: var(--accent); stroke: var(--card); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.gp-mass polygon.gp-mass-ref-aktiv { fill: #fff; stroke: var(--accent); stroke-width: 2px; }
.gp-mass rect.gp-mass-ref-quadrat { fill: #fff; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.gp-mass circle.gp-mass-punkt, .gp-messungen circle.gp-mass-punkt { fill: none; stroke: var(--ink); stroke-width: .75px; vector-effect: non-scaling-stroke; }
.gp-mass text, .gp-messungen text { fill: var(--ink); stroke: var(--card); paint-order: stroke; stroke-linejoin: round; text-anchor: middle; font-weight: 500; font-family: system-ui, sans-serif; }
.gp-messungen line.gp-m-linie { stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
.gp-svg.gp-misst .gp-messungen line.gp-m-linie { pointer-events: none; }
.gp-messungen text.gp-m-treffer { pointer-events: all; cursor: pointer; }
.gp-messungen .gp-m.sel .gp-m-treffer { cursor: move; }  /* gewählt: Masslinie und Mass lassen sich ziehen */
.gp-messungen .gp-m.sel line:not(.gp-m-linie) { stroke-width: 1.5px; }
.gp-messungen .gp-m.sel text.gp-m-text { font-weight: 700; }
.gp-m-del { pointer-events: all; cursor: pointer; }
.gp-messungen .gp-m-del circle.gp-m-del-kreis { fill: var(--critical); stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.gp-m-del-kreuz { fill: none; stroke: #fff !important; stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.gp-messbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 12px; }
.gp-messbox h3 { margin: 0; font-size: 14px; }
.gp-messbox .gp-aktionen { margin: 0; }
.gp-messbox .kv { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.gp-messbox p { margin: 0; flex: 1 1 260px; }
.gp-messbox[hidden], .gp-panel[hidden] { display: none; }
.gp-wrap.gp-ohne-panel { grid-template-columns: minmax(0, 1fr); }
.gp-fang line { stroke: var(--critical); stroke-width: 1px; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.gp-griff { fill: var(--accent); stroke: #fff; stroke-width: .05; cursor: nwse-resize; }
/* Türen, Tore, Fenster in der Wand; Einrichtung im Detailplan. Strichstärken in Bildschirmpixeln (non-scaling-stroke), damit sie im
   ganzen Plan und im stark vergrösserten Detailplan gleich fein bleiben */
.gp-plan { max-width: 230px; }
.gp-oeff-neu { display: inline-flex; gap: 4px; }
.gp-greif { fill: transparent; }
.gp-oeff polygon, .gp-oeff polyline, .gp-oeff path, .gp-kind .gp-flaeche, .gp-passiv .gp-flaeche { vector-effect: non-scaling-stroke; }
.gp-luecke { fill: var(--card); stroke-width: 1px; }
.gp-glas { fill: none; stroke-width: 2px; }
.gp-rolltor { fill: none; stroke-width: 3px; stroke-dasharray: 7 4; }
.gp-fluegel { fill: none; stroke-width: 2px; stroke-linecap: round; }
.gp-schwenk { fill-opacity: .12; stroke-width: 1px; stroke-dasharray: 4 3; }
.gp-schiebeweg { fill: none; stroke-width: 1px; stroke-dasharray: 4 3; }
.gp-tor-name { font-weight: 600; pointer-events: none; }
.gp-tor-name.gp-titel-zieh { pointer-events: auto; cursor: move; }
.gp-oeff:hover .gp-luecke, .gp-oeff:focus-visible .gp-luecke { stroke-width: 2px; }
.gp-oeff.sel .gp-luecke { stroke: var(--accent); stroke-width: 2.5px; }
/* Mehrfachauswahl: abgehakte Elemente (in der Liste, werden nicht mitgeändert) gestrichelt; Liste im Seitenfeld mit eigenem Rollbalken */
.gp-el.gp-mehr-aus .gp-flaeche, .gp-el.gp-mehr-aus .gp-hallenwand { stroke: var(--accent); stroke-width: .12; stroke-dasharray: .3 .25; }
.gp-oeff.gp-mehr-aus .gp-luecke { stroke: var(--accent); stroke-dasharray: 3 3; }
.gp-el.gp-mehr-zeig .gp-flaeche, .gp-el.gp-mehr-zeig .gp-hallenwand { stroke: var(--critical); stroke-width: .25; }  /* Maus auf der Zeile der Liste */
.gp-oeff.gp-mehr-zeig .gp-luecke { stroke: var(--critical); stroke-width: 4px; }
.gp-mehr-liste { max-height: 240px; overflow: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.gp-mehr-liste .gp-check { margin: 0; align-items: flex-start; }
.gp-mehr-liste .gp-punkt { flex: none; margin-top: 4px; }
.gp-mehr-wahl { width: auto; max-width: 150px; padding: 3px 6px; font-size: 13px; }
.gp-oeff.treffer .gp-luecke { stroke: var(--critical); stroke-width: 3px; }
.gp-passiv .gp-flaeche { fill-opacity: .3; stroke-width: .7px; }
.gp-el.gp-kind .gp-flaeche { fill-opacity: .3; stroke-width: 1.5px; }
.gp-el.gp-kind:not(.gp-halle):hover .gp-flaeche, .gp-el.gp-kind:focus-visible .gp-flaeche { fill-opacity: .42; stroke-width: 2px; }
.gp-el.gp-kind.sel .gp-flaeche { stroke-width: 3px; fill-opacity: .45; }
.gp-el.gp-kind.treffer .gp-flaeche { stroke-width: 3px; }
.gp-kind .gp-linie-strich, .gp-passiv .gp-linie-strich { stroke-dasharray: 7 5; }
.gp-kind .gp-linie-punkt, .gp-passiv .gp-linie-punkt { stroke-dasharray: .1 5; }
.gp-kind .gp-linie-strichpunkt, .gp-passiv .gp-linie-strichpunkt { stroke-dasharray: 10 5 .1 5; }
/* Unterraum (Wände als kräftiger Umriss), Wand (deckend), Hilfslinie (nur Umriss; ein breiter unsichtbarer Rand macht sie anklickbar) */
.gp-el.gp-kind .gp-flaeche.gp-mauer, .gp-passiv .gp-flaeche.gp-mauer { fill-opacity: .08; stroke-width: 3px; }
.gp-el.gp-kind:not(.gp-halle):hover .gp-flaeche.gp-mauer, .gp-el.gp-kind:focus-visible .gp-flaeche.gp-mauer { fill-opacity: .14; stroke-width: 3.5px; }
.gp-el.gp-kind.sel .gp-flaeche.gp-mauer { fill-opacity: .16; stroke-width: 4px; }
.gp-el.gp-kind .gp-flaeche.gp-massiv, .gp-passiv .gp-flaeche.gp-massiv { fill-opacity: .85; stroke-width: 1px; }
.gp-el.gp-kind:not(.gp-halle):hover .gp-flaeche.gp-massiv, .gp-el.gp-kind:focus-visible .gp-flaeche.gp-massiv { fill-opacity: 1; }
.gp-el.gp-kind.sel .gp-flaeche.gp-massiv { fill-opacity: .9; stroke-width: 2.5px; }
.gp-passiv .gp-flaeche.gp-hilf { stroke-width: 1px; }
.gp-hilf-greif { fill: none; stroke: transparent; stroke-width: 12px; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.gp-passiv .gp-hilf-greif { pointer-events: none; }
.gp-grundflaeche { fill-opacity: .07; stroke: var(--ink-2); stroke-width: .2; pointer-events: none; }
.gp-raum-name { fill: var(--muted); font-weight: 600; pointer-events: none; }
.gp-version { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; max-width: 100%; }
.gp-version label { min-width: 0; }
.gp-version select { max-width: 220px; min-width: 0; }
.gp-version-hinweis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: 8px; border-inline-start: 4px solid var(--warning); }
@media (max-width: 1100px) { .gp-canvas { height: calc(60vh - 44px); } }  /* schmal bricht die Werkzeugzeile um (Version): die Knöpfe unter dem Plan bleiben ohne Scrollen sichtbar */
@media print {
  .gp-tools, .gp-zoom, .gp-panel, .gp-leiste, .gp-messbox, .gp-version-hinweis { display: none !important; }
  .gp-wrap { display: block; }
  .gp-canvas { height: 170mm; border: 0; }
  .gp-druck-blatt h2 { margin: 0 0 2mm; }
  .gp-druck-svg { width: 100%; height: 138mm; display: block; border: 1px solid var(--line); }
  .gp-druck-legende { display: flex; flex-wrap: wrap; gap: 1mm 5mm; margin-top: 2mm; font-size: 8pt; }
  .gp-druck-legende .gp-punkt { margin-inline-end: 1mm; }
}

/* Video-Anleitungen */
.an-wrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 12px; align-items: start; }
.an-liste { padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 190px); overflow: auto; }
.an-kap { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.an-kap:hover { background: var(--card-2); }
.an-kap.aktiv { background: var(--accent); color: var(--accent-ink); }
.an-kap.aktiv small { color: inherit; opacity: .85; }
.an-gruppe { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 8px 2px; }
.an-gruppe:first-child { padding-top: 4px; }
.an-nr { min-width: 1.6em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; align-self: flex-start; }
.an-kap.aktiv .an-nr { color: inherit; opacity: .85; }
.an-titel { display: flex; flex-direction: column; line-height: 1.25; }
.an-titel small { color: var(--muted); font-size: 11px; }
.an-inhalt h2 { margin: 0; }
.an-video { display: block; width: 100%; max-height: 58vh; background: #000; cursor: pointer; }
.an-buehne { position: relative; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.an-buehne .an-ut:not(.im-bild) { margin: 0; border-radius: 0; }
/* eigene Bedienleiste unter dem Video – verdeckt weder Bild noch Text */
.an-leiste { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #0f1412; color: #fff; }
.an-knopf { flex: none; min-width: 36px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.an-knopf:hover, .an-knopf:focus-visible { background: rgba(255, 255, 255, .14); }
.an-regler { flex: 1; min-width: 60px; accent-color: var(--accent); cursor: pointer; }
.an-uhr { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-buehne:fullscreen { display: flex; flex-direction: column; border-radius: 0; }
.an-buehne:fullscreen .an-video { flex: 1; min-height: 0; max-height: none; }
/* Untertitel über dem Bild (Videos von vrec2): der laufende Satz unten im Bild, weiss mit leichtem Schatten – Lage und Schriftgrösse setzt tutorials.js */
.an-ut.im-bild { position: absolute; z-index: 1; margin: 0; padding: 0 4%; min-height: 0; border-radius: 0; background: transparent; line-height: 1.25; pointer-events: none; box-sizing: border-box; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .55); }
.an-video::cue { color: #fff; background: transparent; font-family: system-ui, sans-serif; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 5px rgba(0, 0, 0, .55); }  /* derselbe Untertitel als Textspur, wenn das Video allein im Vollbild läuft – Grösse: tutorials.js */
.an-ut { background: #0f1412; color: #fff; font-weight: 600; text-align: center; padding: 8px 14px; min-height: 3.6em; border-radius: 0 0 8px 8px; margin-bottom: 10px; }
.an-leer { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--axis); border-radius: 8px; }
.an-schritte { padding-inline-start: 22px; display: grid; gap: 6px; }
.an-schritte li { padding: 4px 8px; border-radius: 6px; }
.an-schritte li.klickbar { cursor: pointer; }
.an-schritte li.klickbar:hover { background: var(--card-2); }
.an-schritte li.aktiv { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
@media (max-width: 900px) { .an-wrap { grid-template-columns: 1fr; } .an-liste { max-height: none; } }
.gp-form input, .gp-form select, .gp-panel textarea { width: 100%; box-sizing: border-box; }

/* ---------- Meldungen (Glocke) und Handy-Menü */
.glocke { position: relative; background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 6px; color: var(--ink-2); cursor: pointer; display: inline-flex; }
.glocke:hover, .glocke:focus-visible { background: var(--card-2); color: var(--ink); }
.glocke .zahl:not(:empty) { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--warning); color: #111; font: 600 10px/16px system-ui, sans-serif; text-align: center; }
.glocke.kritisch .zahl:not(:empty) { background: var(--critical); color: #fff; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 18px; color: var(--ink); cursor: pointer; }
ul.meldungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.meldungen a { color: var(--ink); text-decoration: none; display: block; padding: 6px 8px; border-radius: 7px; }
ul.meldungen a:hover { background: var(--card-2); }
.meldung-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.meldung-chips a { text-decoration: none; color: var(--ink); }

/* ---------- Heute (für Handy und Tablet gross bedienbar) */
.heute-grid { columns: 380px; column-gap: 16px; }
.heute-karte { break-inside: avoid; margin-bottom: 16px; }
.heute-zeile { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.heute-zeile:first-of-type { border-top: 0; }
.heute-zeile.ueber .heute-text > strong, .heute-zeile.ueber .heute-text > a { color: var(--critical); }
.heute-text { min-width: 0; flex: 1 1 220px; }
.heute-knoepfe { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.heute-knoepfe .btn { padding: 8px 12px; }
.heute-schnell { margin-bottom: 14px; flex-wrap: wrap; }
.heute-tage { margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.small { font-size: 12px; }

/* ---------- Beobachtungen, Prüf-Checkliste, Foto */
.beob-liste { display: grid; gap: 12px; }
.card.beob { display: flex; gap: 14px; align-items: flex-start; }
.card.beob img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex: none; }
.beob-text { flex: 1; min-width: 0; }
.beob-text p { margin: 6px 0; }
.foto-vorschau img { max-width: 100%; max-height: 220px; border-radius: 8px; }
.foto-vorschau { grid-column: 1 / -1; }
.qs-liste { display: grid; gap: 4px; }
.qs-punkt { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.qs-punkt input[type=checkbox] { width: 20px; height: 20px; flex: none; order: 2; }
.qs-punkt > span { flex: 1; }
.qs-punkt input[type=number] { width: 110px; }
.qs-punkt:has(input[type=checkbox]:checked) { border-color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--card)); }
.qs-punkt.nok { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, var(--card)); }

/* ---------- Sensoren: Kacheln mit Sparkline, Verlauf mit Fadenkreuz */
.sensor-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card.sensor { text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 4px; }
.card.sensor:hover { border-color: var(--axis); }
.card.sensor.alarm { border-color: var(--critical); }
.card.sensor.inaktiv { opacity: .6; }
.sensor-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: center; }  /* langer Name + Status: Status rutscht in die nächste Zeile statt über den Rand */
.sensor-wert { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
svg.sparkline { width: 100%; height: 36px; }
svg.verlauf { width: 100%; height: auto; max-height: 320px; margin: 8px 0; }
svg.sparkline .linie, svg.verlauf .linie { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg.verlauf .raster { stroke: var(--line); stroke-width: 1; }
svg.verlauf .grenze { stroke: var(--critical); stroke-width: 1; stroke-dasharray: 4 4; }
svg.verlauf .achse { fill: var(--muted); font-size: 11px; }
svg.verlauf .kreuz { stroke: var(--axis); stroke-width: 1; }
svg.verlauf .punkt { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.chart .axis.kapazitaet { border-top: 1px dashed var(--critical); }
.chart .axis.kapazitaet span { color: var(--critical); }

/* ---------- Nachfrage-Planung, Rechnungssummen */
table.nachfrage td.fehlt { background: color-mix(in srgb, var(--critical) 10%, var(--card)); }
table.nachfrage td.fehlt > div:first-child { color: var(--critical); font-weight: 600; }
.summen { justify-self: end; min-width: 260px; display: grid; gap: 4px; }
.summen > div { display: flex; justify-content: space-between; gap: 20px; font-variant-numeric: tabular-nums; }
.summen .total { font-weight: 700; border-top: 2px solid var(--ink); padding-top: 4px; }

@media (max-width: 800px) {
  .menu-btn { display: inline-block; }
  .brand-knoepfe { flex-direction: row; gap: 4px; }
  .sidebar nav, .sidebar .sidebar-fuss { display: none; }
  body.menu-offen .sidebar nav { display: flex; }
  body.menu-offen .sidebar .sidebar-fuss { display: block; }
  nav a { padding: 10px 12px; }
  .heute-grid { columns: 1; }
  .heute-zeile { flex-wrap: wrap; }
  .heute-knoepfe { width: 100%; justify-content: stretch; }
  .heute-knoepfe .btn { flex: 1; padding: 11px 12px; font-size: 15px; }
  .card.beob { flex-direction: column; }
  .card.beob img { width: 100%; height: 180px; }
  .toolbar { flex-wrap: wrap; }
}
@media print { .glocke, .menu-btn { display: none !important; } }

/* Arabisch: Nur die Schrift läuft von rechts nach links – Aufbau, Reihenfolge und Ausrichtung der Oberfläche bleiben wie in den anderen Sprachen.
   Jeder Text richtet sich nach seiner eigenen Sprache (Hinweise können in anderer Sprache als die Oberfläche sein); Diagramme und Gebäudeplan bleiben unberührt */
html { text-align: left; }
:where(input, textarea, select) { text-align: left; }
#tip, .howto-body, .hilfe section, .field small { unicode-bidi: plaintext; }
:root:lang(ar) body * { unicode-bidi: plaintext; }
:root:lang(ar) svg *, :root:lang(ar) summary { unicode-bidi: normal; }

/* «Aktiv» in Listen: Schalter direkt in der Zeile */
input.aktiv-schalter { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; margin: 0; border: 0; border-radius: 10px; background: var(--axis); position: relative; cursor: pointer; vertical-align: middle; transition: background .15s; }
input.aktiv-schalter::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); transition: transform .15s; }
input.aktiv-schalter:checked { background: var(--good); }
input.aktiv-schalter:checked::after { transform: translateX(14px); }
input.aktiv-schalter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { input.aktiv-schalter { appearance: auto; -webkit-appearance: auto; width: auto; height: auto; background: none; } input.aktiv-schalter::after { content: none; } }