/* ISMS-Kompass – Ergänzungen zum FairBase-Grundlayout */
:root { --g: #1d7a4b; --y: #c98a00; --rd: #b3261e; --off: #9aa7b5; --na: #c4ccd6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g: #5cc690; --y: #e3b450; --rd: #f08a80; --off: #6b7b8c; --na: #364759; } }
:root[data-theme="dark"] { --g: #5cc690; --y: #e3b450; --rd: #f08a80; --off: #6b7b8c; --na: #364759; }
body { padding-left: 0; padding-right: 0; }
.content { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.dot-gruen, .dot-gelb, .dot-rot, .dot-offen, .dot-na { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; vertical-align: -1px; }
.dot-gruen { background: var(--g); } .dot-gelb { background: var(--y); } .dot-rot { background: var(--rd); }
.dot-offen { background: transparent; border: 2px solid var(--off); } .dot-na { background: var(--na); }
.amp { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.amp-gruen { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.amp-gelb { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.amp-rot { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.ampbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); min-width: 120px; }
.ampbar i { display: block; height: 100%; }
.ampbar .b-gruen { background: var(--g); } .ampbar .b-gelb { background: var(--y); } .ampbar .b-rot { background: var(--rd); } .ampbar .b-offen { background: transparent; } .ampbar .b-na { background: var(--na); }
.walk { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.areanav { position: sticky; top: 12px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.areanav button { all: unset; cursor: pointer; display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 6px; font-size: .9rem; }
.areanav button:hover { background: var(--surface-2); }
.areanav button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.areanav button:focus-visible { outline: 2px solid var(--accent); }
.areanav small { color: var(--muted); font-variant-numeric: tabular-nums; }
.chk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.chk > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; }
.chk > summary::-webkit-details-marker { display: none; }
.chk > summary:focus-visible { outline: 2px solid var(--accent); border-radius: var(--r); }
.chk[open] > summary { border-bottom: 1px solid var(--line); }
.chk .key { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.chk .body { padding: 14px; display: grid; gap: 14px; }
.chk .q { font-size: 1.02rem; font-weight: 600; }
.crit { display: grid; gap: 6px; }
.crit div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 7px 10px; border-radius: 6px; font-size: .9rem; }
.crit .cg { background: var(--ok-soft); } .crit .cy { background: var(--warn-soft); } .crit .cr { background: var(--bad-soft); }
.crit b { display: inline-flex; gap: 6px; align-items: center; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plist { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.plist li { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: .92rem; padding: 4px 0; border-bottom: 1px solid var(--line); }
.plist li:last-child { border-bottom: 0; }
.pa { display: inline-flex; flex: none; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.pa label { padding: 3px 8px; font-size: .8rem; cursor: pointer; border-left: 1px solid var(--line-strong); color: var(--muted); }
.pa label:first-child { border-left: 0; }
.pa input { position: absolute; opacity: 0; pointer-events: none; }
.pa label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.pa label.pa-ja:has(input:checked) { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.pa label.pa-teil:has(input:checked) { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.pa label.pa-nein:has(input:checked) { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.pa label.pa-na:has(input:checked) { background: var(--surface-2); color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .plist li { flex-direction: column; align-items: flex-start; gap: 4px; } }
.ulist { margin: 0; padding-left: 18px; font-size: .92rem; display: grid; gap: 2px; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; }
.ref { font-size: .74rem; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.ref b { color: var(--ink); font-weight: 600; }
.ampsel { display: flex; flex-wrap: wrap; gap: 6px; }
.ampsel label { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: .88rem; font-weight: 550; }
.ampsel input { position: absolute; opacity: 0; pointer-events: none; }
.ampsel label:has(input:focus-visible) { outline: 2px solid var(--accent); }
.ampsel label:has(input[value=gruen]:checked) { background: var(--ok-soft); border-color: var(--g); color: var(--ok); }
.ampsel label:has(input[value=gelb]:checked) { background: var(--warn-soft); border-color: var(--y); color: var(--warn); }
.ampsel label:has(input[value=rot]:checked) { background: var(--bad-soft); border-color: var(--rd); color: var(--bad); }
.ampsel label:has(input[value=na]:checked), .ampsel label:has(input[value=offen]:checked) { background: var(--surface-2); border-color: var(--ink); }
.rec { border-left: 3px solid var(--accent); padding: 6px 12px; background: var(--accent-soft); border-radius: 0 6px 6px 0; font-size: .92rem; }
.netplan { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.grid-edit { overflow-x: auto; }
.grid-edit table td { padding: 4px; vertical-align: top; }
.grid-edit input, .grid-edit select { min-width: 110px; font-size: .86rem; padding: 6px 8px; }
.phase { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.phase .no { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.phase .no.done { background: var(--ok); color: #fff; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 6px; }
.kpi h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kpi b { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.demo-note { background: var(--mark); color: var(--ink); padding: 6px 12px; border-radius: 6px; font-size: .84rem; }
tr.over td { background: var(--bad-soft); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 980px) { .walk { grid-template-columns: 1fr; } .areanav { position: static; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .cols2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .crit div { grid-template-columns: 1fr; } .chk > summary { grid-template-columns: 1fr; } }

.pcols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 900px) { .pcols { grid-template-columns: minmax(0, 1fr); } }

.linkbox { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; margin: 8px 0; }
.sv-area > summary { cursor: pointer; list-style: none; }
.sv-area > summary::-webkit-details-marker { display: none; }
.demo-bar { background: var(--warn-soft); color: var(--warn); padding: 8px 16px; font-size: .88rem; text-align: center; }
.kunde { max-width: 820px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 16px; }
.k-head { display: flex; gap: 14px; align-items: center; }
.k-logo { width: 56px; height: 56px; border-radius: 10px; }
.k-q { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.k-q:last-child { border-bottom: 0; }
.k-q p { margin: 0; font-weight: 550; }
.k-pa { flex-wrap: wrap; justify-self: start; }
.k-pa label { padding: 6px 12px; font-size: .88rem; }
.k-flash { max-width: 820px; margin: 16px auto 0; }
.ce-p { display: flex; gap: 8px; align-items: center; }
.ce-p input[type=text] { flex: 1; }
.fmt-menu { position: absolute; z-index: 50; width: 240px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; display: grid; }
.fmt-menu button { all: unset; display: grid; gap: 1px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.fmt-menu button:hover, .fmt-menu button:focus-visible { background: var(--accent-soft); }
.fmt-menu small { color: var(--muted); font-size: .78rem; }

.modal-bg { position: fixed; inset: 0; background: rgba(10, 20, 35, .45); z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--surface); color: var(--ink); border-radius: 10px; box-shadow: var(--shadow); max-width: 560px; width: 100%; max-height: 85vh; overflow: auto; padding: 20px 22px; display: grid; gap: 10px; border-top: 4px solid var(--warn); }
.modal h2 { margin: 0; font-size: 1.1rem; }
.miss { outline: 2px solid var(--warn); outline-offset: -1px; background: var(--warn-soft) !important; }
.mtab td:nth-child(2) { width: 130px; } .mtab td:nth-child(3) { width: 40%; }
.mtab select, .mtab input { width: 100%; }
.mdev > summary { cursor: pointer; list-style: none; } .mdev > summary::-webkit-details-marker { display: none; }
.mdev[open] > summary { margin-bottom: 10px; }
/* Wartung Seite für Seite */
.mstep-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mstep-bar select { max-width: 320px; }
.mstep-nav { justify-content: space-between; }
.vm-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vm-pick button { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 8px 14px; cursor: pointer; display: grid; text-align: left; font-weight: 600; }
.vm-pick button small { font-weight: 400; color: var(--muted); font-size: .75rem; }
.vm-pick button.on { border-color: var(--accent); background: var(--accent-soft); }
.vq { display: grid; gap: 14px; max-width: 720px; }
.vq-cur { margin: 0; font-size: 1.05rem; }
.vq-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.05rem; font-weight: 600; }
.vq-q label { border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 26px; cursor: pointer; font-weight: 600; }
.vq-q input { position: absolute; opacity: 0; pointer-events: none; }
.vq-q label:has(input:focus-visible) { outline: 2px solid var(--accent); }
.vq-q label.pa-ja:has(input:checked) { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.vq-q label.pa-na:has(input:checked) { background: var(--surface-2); border-color: var(--ink); }
.vq .newver, .vq .vq-keep { display: none; }
.vq:has(input[name=upd][value=ja]:checked) .newver { display: grid; }
.vq:has(input[name=upd][value=nein]:checked) .vq-keep { display: block; }
.vq .newver input { font-size: 1.1rem; max-width: 360px; }
/* Wartung: Software auf dem Server */
.vq-sw .mtab td { vertical-align: middle; }
.vq-sw label.pa-ja, .vq-sw label.pa-na { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-size: .88rem; }
.vq-sw label.pa-ja input, .vq-sw label.pa-na input { margin: 0; }
.vq-sw label.pa-ja:has(input:checked) { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.vq-sw label.pa-na:has(input:checked) { background: var(--surface-2); border-color: var(--ink); font-weight: 600; }
.vq-sw input[type=text] { min-width: 120px; }
.vq-sw tr.sw-add td { background: var(--surface-2); }
.nowrap { white-space: nowrap; }
.vq-sw input[type=radio] { width: auto !important; min-width: 0 !important; height: auto; padding: 0; box-shadow: none; accent-color: var(--accent); }
.vq-sw .pa-sw { display: inline-flex; gap: 6px; }
.vq-sw tr.sw-add input[name=swnew_name] { width: 100%; }
.vq-sw td:first-child { min-width: 190px; }

/* ---------- Responsiv ----------
   Grid-Elemente dürfen schmaler werden als ihr Inhalt, damit Tabellen innerhalb der Karte scrollen statt herauszuragen. */
.tcontent > *, .card, .card > *, .card form, .content > * { min-width: 0; max-width: 100%; }
.tw, .grid-edit { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Erfassungstabellen (Dokumentation) und Software je Server: unterhalb von 1200 px als Karten mit Beschriftung */
@media (max-width: 1200px) {
  .grid-edit thead, .vq-sw thead { display: none; }
  .grid-edit table, .grid-edit tbody, .vq-sw table, .vq-sw tbody { display: block; width: 100%; }
  .grid-edit tr[data-row] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; background: var(--surface); }
  .grid-edit td { display: block; padding: 0; border: 0 !important; }
  .grid-edit td[hidden] { display: none !important; }
  .grid-edit td[data-label]::before, .vq-sw td[data-label]::before { content: attr(data-label); display: block; font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
  .grid-edit input, .grid-edit select { width: 100%; min-width: 0; box-sizing: border-box; }
  .grid-edit td.ge-act { align-self: end; justify-self: end; }
  .vq-sw tr[data-sw], .vq-sw tr.sw-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .vq-sw td { display: block; padding: 0 !important; border: 0 !important; }
  .vq-sw td:first-child { min-width: 0; grid-column: 1 / -1; }
  .vq-sw tr.sw-add td:first-child { grid-column: 1 / -1; }
  .vq-sw input[type=text] { width: 100%; min-width: 0; box-sizing: border-box; }
}
@media (max-width: 640px) {
  .f2, .f3 { grid-template-columns: 1fr !important; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  .kpi b { font-size: 1.4rem !important; overflow-wrap: anywhere; }
  .card { padding: 16px; }
  .head, .k-head { flex-wrap: wrap; }
  .toolbar, .row { flex-wrap: wrap; }
  .mstep-bar { flex-wrap: wrap; gap: 8px; }
  .mstep-bar select { max-width: 100%; }
  .tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .tabs button, .tabs a { white-space: nowrap; flex: none; }
}

/* ---------- Gestaltung „Hell und ruhig“ ----------
   Schrift Manrope (SIL Open Font License 1.1), lokal ausgeliefert. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); }
:root {
  --bg: #f6f8fa; --surface: #ffffff; --surface-2: #f3f6f9; --line: #e6ebf1; --line-strong: #cfd7e1;
  --ink: #1b2430; --muted: #5f6b7a; --accent: #2f6197; --accent-ink: #ffffff; --accent-soft: #e8f0fa;
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --r: 14px;
  --shadow-soft: 0 1px 2px rgba(20, 40, 70, .06), 0 8px 24px rgba(20, 40, 70, .05);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f151c; --surface: #172029; --surface-2: #1c2632; --line: #26323f; --line-strong: #35424f; --ink: #e5ebf1; --muted: #9aa8b6;
  --accent: #8fb8e8; --accent-ink: #0b1a2c; --accent-soft: #1b2e45; --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4); } }
:root[data-theme="dark"] { --bg: #0f151c; --surface: #172029; --surface-2: #1c2632; --line: #26323f; --line-strong: #35424f; --ink: #e5ebf1; --muted: #9aa8b6; --accent: #8fb8e8; --accent-ink: #0b1a2c; --accent-soft: #1b2e45; --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4); }

body { font-size: 15px; letter-spacing: -.003em; }
h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.12rem; font-weight: 800; }
h3 { font-weight: 700; }
.card { border: 0; border-radius: 20px; box-shadow: var(--shadow-soft); padding: 22px 24px; }
.card.flush .card-h { padding: 18px 22px; border-bottom-color: var(--line); }
.kpi { border: 0 !important; border-radius: 20px !important; box-shadow: var(--shadow-soft); padding: 20px 22px !important; }
.card .kpi { box-shadow: none; background: var(--surface-2); }
.kpi b { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.btn { border-radius: 999px; padding: 9px 18px; font-weight: 700; }
.btn.sm { padding: 5px 12px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea { border-radius: 10px; }
.pill { border-radius: 999px; }
.tabs { border-bottom: 0; gap: 6px; }
.tabs button, .tabs a { border-radius: 999px; border-bottom: 0; margin-bottom: 0; padding: 7px 14px; font-weight: 600; }
.tabs button.on, .tabs a.on { background: var(--accent-soft); color: var(--accent); }
details.chk, .chk { border-radius: 16px; }
.modal { border-radius: 20px; border-top-width: 0; box-shadow: 0 20px 60px rgba(10, 20, 35, .25); }

/* Rahmen: Navigation oben */
.tshell { min-height: 100vh; display: flex; flex-direction: column; }
.tbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.tbar-in, .tsub-in, .tcontent, .tfoot { max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.tbar-in { display: flex; align-items: center; gap: 22px; min-height: 64px; flex-wrap: wrap; }
.tbrand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; color: var(--ink); white-space: nowrap; }
.tbrand-logo { width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.tnav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; align-items: center; }
.tnav > button, .nav-dd > summary { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 650; white-space: nowrap; }
.tnav > button:hover, .nav-dd > summary:hover { background: var(--surface-2); color: var(--ink); }
.tnav > button.on, .nav-dd.on > summary { background: var(--accent-soft); color: var(--accent); font-weight: 750; }
.tnav > button:focus-visible, .nav-dd > summary:focus-visible, .tuser > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-dd, .tuser { position: relative; }
.nav-dd > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.nav-dd > summary::-webkit-details-marker, .tuser > summary::-webkit-details-marker { display: none; }
.dd-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 40, 70, .14); padding: 6px; display: grid; z-index: 50; }
.dd-panel.dd-right { left: auto; right: 0; }
.dd-panel button, .dd-panel a { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; }
.dd-panel button:hover, .dd-panel a:hover, .dd-panel button.on { background: var(--accent-soft); color: var(--accent); }
.dd-panel form { margin: 0; display: grid; }
.dd-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.dd-who { padding: 10px 12px 8px; display: grid; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.dd-who span { color: var(--muted); font-size: .85rem; }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.tright { display: flex; align-items: center; gap: 10px; }
.tuser > summary { list-style: none; cursor: pointer; }
.tavatar { width: 38px; height: 38px; border-radius: 50%; background: #123160; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.tnav-toggle { display: none; }
.tsub { background: transparent; }
.tsub-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 18px; }
.tcust { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); font-weight: 700; }
.tcust select { font-weight: 800; font-size: 1rem; color: var(--ink); background: var(--surface); border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow-soft); border: 1px solid var(--line); max-width: 360px; }
.tmods { font-size: .85rem; color: var(--muted); }
.tstatus { margin-left: auto; font-size: .82rem; color: var(--muted); }
.tstatus .sync-ok::before { color: var(--ok); }
.tstatus .sync-err { color: var(--bad); }
.tstatus .sync-ro { color: var(--warn); }
.tcontent { flex: 1; padding-top: 22px; padding-bottom: 48px; display: grid; gap: 20px; align-content: start; }
.tfoot { border-top: 1px solid var(--line); }
@media (max-width: 1100px) {
  .tnav-toggle { all: unset; display: inline-flex; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 700; margin-left: auto; }
  .tnav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: 12px; }
  .tnav.open { display: flex; }
  .tnav > button, .nav-dd > summary { display: flex; }
  .dd-panel { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; }
  .tright { order: 1; margin-left: auto; }
  .tnav-toggle { order: 2; margin-left: 0; }
  .tnav { order: 3; }
  .tstatus { margin-left: 0; flex-basis: 100%; }
  h1 { font-size: 1.5rem; }
}

/* Ergänzungen für die Live-Version */
.boot { padding: 40px; text-align: center; color: var(--muted); }
.sync { font-size: .78rem; }
.sync-ok::before { content: "✓ "; color: #7fd4a4; }
.sync-busy::before { content: "… "; }
.sync-err { color: #ffb4ab; font-weight: 600; }
.sync-ro { color: #ffd98a; }
/* Kundenportal: Dokumente als Seite */
.p-doc h2 { margin: 22px 0 8px; font-size: 1.15rem; } .p-doc h2:first-child { margin-top: 0; }
.p-doc h3 { margin: 16px 0 6px; font-size: 1rem; } .p-doc h4 { margin: 12px 0 4px; }
.p-doc p, .p-doc li { line-height: 1.55; } .p-doc .tw { margin: 8px 0 14px; }
.p-doc table td, .p-doc table th { vertical-align: top; }