/* ==================================================================
   K&K ImMob – Hausstil nach K&K FLOWRIZON (16.10.2026)
   Dieselbe Formensprache wie die Schwesterwerkzeuge: dunkles Schema als
   Grundeinstellung, helles Schema umschaltbar (Knopf in der Kopfleiste, die
   Wahl steht im Browser), Karten mit 12 px Radius, ruhige Tabellen.
   Hausfarbe von ImMob bleibt Petrol (#0e7c86) – jedes Werkzeug hat seine
   eigene (CONNECT orange, FLOWRIZON blau, WORKNEX grün). Auf dunklem Grund
   ist sie aufgehellt (gleicher Farbton), sonst erreicht Schrift nicht 4,5:1.
   Signalfarben je Schema getrennt: ein Rot, das auf Dunkelblau leuchtet,
   wird auf Weiß blass – und umgekehrt.
   ================================================================== */
:root{
  color-scheme:dark;
  --bg:#0f1720; --card:#172230; --panel-2:#1e2c3d; --th:#172230;
  --line:#2a3a4d; --line-ui:#3a4d63;
  --ink:#e6edf3; --tx:#e6edf3; --mut:#8fa3b8; --grau:#8fa3b8;
  --brand:#3dbdc6; --brand-d:#7fd6dc; --on-brand:#06121f;
  --pos:#2fb886; --neg:#e5484d; --gelb:#e0a63c; --orange:#e0a63c;
  --violett:#9b94f0; --violett-bg:rgba(155,148,240,.16); --violett-ink:#bdb8ff;
  --hover:rgba(255,255,255,.035); --hover-marke:rgba(61,189,198,.10);
  --info-bg:rgba(61,189,198,.09); --info-line:rgba(61,189,198,.30); --info-ink:#cfe3e6;
  --warn-bg:rgba(224,166,60,.13); --warn-bg-2:rgba(224,166,60,.06); --warn-line:rgba(224,166,60,.35);
  --warn-ink:#f0c46e;
  --ok-bg:rgba(47,184,134,.14); --bad-bg:rgba(229,72,77,.11); --treffer:rgba(224,166,60,.14);
  --side:#121c27; --side-ink:#8fa3b8;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6f9; --card:#ffffff; --panel-2:#eef1f5; --th:#fafbfc;
  --line:#d3dae2; --line-ui:#c3ccd8;
  --ink:#14202c; --tx:#14202c; --mut:#4a5765; --grau:#6b7686;
  --brand:#0e7c86; --brand-d:#0a5b63; --on-brand:#ffffff;
  --pos:#147a52; --neg:#c0392b; --gelb:#8a5a00; --orange:#c98a15;
  --violett:#5b53c4; --violett-bg:#eceafb; --violett-ink:#4b4fbf;
  --hover:#f7f9fb; --hover-marke:#eef4f4;
  --info-bg:#f2f7f8; --info-line:#d9e7e9; --info-ink:#20343a;
  --warn-bg:#fff8e6; --warn-bg-2:#fffdf5; --warn-line:#f0e2b8; --warn-ink:#6b5613;
  --ok-bg:#eaf5ef; --bad-bg:#fdf1ef; --treffer:#fff8e1;
  --side:#ffffff; --side-ink:#4a5765;
}

*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:0.875rem;line-height:1.45}
a{color:inherit;text-decoration:none}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--side);color:var(--side-ink);flex-shrink:0;display:flex;flex-direction:column}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.sidebar .brand:hover{opacity:.9}
.logo{width:34px;height:34px;border-radius:9px;display:block;flex:none}
.brandtxt{font-weight:700;color:var(--on-brand);font-size:1rem;line-height:1.15}
.brandtxt .claim{display:block;font-weight:500;font-size:0.6562rem;color:var(--side-ink);
  letter-spacing:.2px;opacity:.85}
.sidebar nav{display:flex;flex-direction:column;padding:6px}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--side-ink);font-weight:500}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:var(--on-brand)}
.sidebar nav a.on{background:var(--brand);color:var(--on-brand)}
.sidebar nav a .ic{width:20px;text-align:center;opacity:.9}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 22px;background:var(--card);border-bottom:1px solid var(--line)}
.crumb{font-size:1.0625rem;font-weight:650}
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{background:var(--panel-2);color:var(--mut);border-radius:20px;padding:4px 12px;font-size:0.75rem}
.pill.role{background:var(--info-bg);color:var(--brand-d);font-weight:600}
.logout{color:var(--mut);font-size:0.8125rem;border:1px solid var(--line);padding:5px 12px;border-radius:8px}
.logout:hover{color:var(--brand)}
.content{padding:22px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.kpi .l{color:var(--mut);font-size:0.75rem;margin-bottom:6px}
.kpi .v{font-size:1.375rem;font-weight:700}
.kpi .v.neg{color:var(--neg)}

/* Karten & Tabellen */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:auto;margin-bottom:16px}
.card.pad{padding:16px 18px}
table{width:100%;border-collapse:collapse;font-size:0.8125rem}
th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
th{background:var(--th);color:var(--mut);font-weight:600}
tbody tr:hover{background:var(--hover)}
.matrix td.mid,.matrix th{text-align:center}
.matrix td.modname{text-align:left;font-weight:500}
.tag{background:var(--panel-2);color:var(--mut);border-radius:8px;padding:1px 7px;font-size:0.6875rem}
.scoperow select{font-size:0.75rem;padding:3px 6px;border:1px solid var(--line);border-radius:6px}

.hinweis{color:var(--mut);font-size:0.8125rem;margin:8px 0}
.hinweis.ok{color:var(--pos)} .hinweis.fehler,.fehler{color:var(--neg)}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:9px;padding:9px 16px;font-weight:600;color:var(--ink)}
button.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
button:hover{border-color:var(--brand)}
input[type=file]{margin-right:10px}

/* Login */
.loginbg{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--side)}
.loginbox{background:var(--card);border-radius:16px;padding:30px 32px;width:340px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.loginlogo{display:block;width:112px;height:112px;margin:0 auto 6px;border-radius:24px}
.loginbox h1{font-size:1.125rem;margin:6px 0 16px;text-align:center}
.loginbox label{display:block;font-size:0.8125rem;color:var(--mut);margin-bottom:12px}
.loginbox input{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:0.875rem}
.loginbox button{width:100%;margin-top:6px;background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

@media (max-width:760px){
  .sidebar{width:64px}.brandtxt,.sidebar nav a span:not(.ic){display:none}
  .sidebar nav a{justify-content:center}
}

/* ---------- Ergänzungen der zusammengeführten Fassung ---------- */
.sidebar .fuss{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:0.75rem}
.sidebar .fuss a{color:var(--side-ink)}.sidebar .fuss a:hover{color:var(--on-brand)}
.sidebar .fuss .wer{margin-top:8px;color:var(--on-brand);font-weight:600}
.sidebar .fuss .wer span{display:block;color:var(--side-ink);font-weight:400}
.sidebar nav a .zahl{margin-left:auto;background:var(--orange);color:var(--on-brand);border-radius:10px;
  padding:0 7px;font-size:0.6875rem;font-weight:700}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink);font-weight:600}
.umschalt{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.umschalt a{padding:4px 10px;font-size:0.75rem;color:var(--mut)}
.umschalt a.on{background:var(--brand);color:var(--on-brand)}

.vorspann{background:var(--info-bg);border:1px solid var(--info-line);border-left:4px solid var(--brand);
  border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:0.8125rem;line-height:1.6;color:var(--info-ink)}
.vorspann.warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--orange);color:var(--warn-ink)}
.vorspann a{text-decoration:underline}
h3.abschnitt{font-size:0.9375rem;margin:22px 0 10px}
.kpis.klein{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpis.klein .kpi{padding:10px 12px;border-radius:10px}
.kpis.klein .kpi .l{font-size:0.6875rem;margin-bottom:2px}
.kpis.klein .kpi .v{font-size:1.0625rem}

.unter{display:block;color:var(--mut);font-size:0.7188rem;font-weight:400;white-space:normal}
.klein{font-size:0.75rem;color:var(--mut);white-space:normal}
.amp{display:inline-flex;align-items:center;margin-right:7px;vertical-align:middle}
.amp i{width:9px;height:9px;border-radius:50%;display:block}
.amp.gruen i{background:var(--pos)}.amp.gelb i{background:var(--gelb)}
.amp.rot i{background:var(--neg)}.amp.grau i{background:var(--grau)}
.caret{color:var(--mut);font-size:0.6875rem;display:inline-block;width:12px}
.objtab tbody tr.klickbar{cursor:pointer}
.objtab tbody tr.klickbar:hover{background:var(--hover-marke)}
tr.detail{background:var(--hover)}tr.detail:hover{background:var(--hover)}
tr.detail>td{padding:0}
tr.detail .inn{padding:10px 14px 14px}
.dettab{font-size:0.7812rem;background:var(--card);border:1px solid var(--line);border-radius:10px}
.dettab th{background:var(--panel-2);font-size:0.7188rem}
.dettab tr.hervor{background:var(--ok-bg)}
.dettab td.geld{text-align:right;white-space:nowrap}
tr.warnzeile{background:var(--warn-bg-2)}
input.mk{width:64px;text-align:right;padding:5px 7px;border:1px solid var(--line);border-radius:7px}
form.reihe{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
form.reihe label,form.spalte label{display:block;font-size:0.75rem;color:var(--mut)}
form.reihe input,form.reihe select,form.spalte input{display:block;margin-top:4px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;font-size:0.8125rem}
form.spalte label{margin-bottom:12px}
form.spalte input{width:100%}
form.inline{display:inline-flex;gap:5px;align-items:center;margin:0}
form.inline select,form.inline input{padding:5px 8px;border:1px solid var(--line);border-radius:7px;font-size:0.75rem}
form.inline button{padding:5px 10px;font-size:0.75rem;font-weight:500}
.hinweis.fuss{margin-top:14px;line-height:1.6;max-width:900px}
.tag.warn{background:var(--warn-bg);color:var(--warn-ink);font-weight:600}

/* Prozessaufnahme */
.linkfeld{width:100%;min-width:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.75rem;padding:6px 9px;border:1px solid var(--line);border-radius:7px;
  background:var(--bg);color:var(--mut)}
.knopfzeile{display:flex;gap:8px;align-items:center;white-space:nowrap}
.knopflink{color:var(--brand);text-decoration:underline;font-size:0.8125rem}
.knopflink.gross{font-size:0.9375rem;font-weight:600}
.qa{padding:12px 0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:none}
.qa .q{font-weight:600;margin-bottom:5px}
.qa .a{white-space:pre-wrap;color:var(--ink);max-width:70ch}
.qa .a.leer{color:var(--mut);font-style:italic}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.7812rem;
  background:var(--bg);padding:1px 5px;border-radius:5px}
.zugangskarte{background:var(--info-bg);border:1px solid var(--brand);border-radius:14px;
  padding:20px 22px;margin-bottom:18px}
.zugangskarte h3{margin:0 0 6px;font-size:1.125rem}
.zugangskarte p{color:var(--brand-d);max-width:64ch;margin:0 0 12px;font-size:0.8438rem}
.zugangskarte pre{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;
  white-space:pre-wrap;margin:0 0 12px}
.vorspann.warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--orange);color:var(--warn-ink)}

/* Objektreiter – wie das Objekt-Dashboard des Cockpits */
.objekt-kpis{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.objekt-kpis .kpi{padding:12px 14px;border-radius:12px}
.objekt-kpis .kpi .l{font-size:0.7188rem;margin-bottom:3px}
.objekt-kpis .kpi .v{font-size:1.1875rem}
.objekt-kpis .kpi .d{font-size:0.7188rem;color:var(--mut);margin-top:3px;display:flex;gap:4px;
  align-items:center}
.objekt-kpis .kpi .d.gut{color:var(--pos)}
.objekt-kpis .kpi .d.krit{color:var(--neg)}
.objekt-kpis .kpi .ar{font-size:0.625rem}
.werkzeug{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 14px}
.werkzeug .grp{display:inline-flex;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:var(--card)}
.werkzeug .grp button{border:0;background:transparent;padding:7px 13px;font:inherit;
  font-size:0.8125rem;color:var(--mut);cursor:pointer;border-radius:0}
.werkzeug .grp button.on{background:var(--brand);color:var(--on-brand);font-weight:600}
.werkzeug input[type=search]{flex:1;min-width:190px;font:inherit;font-size:0.8438rem;
  padding:8px 12px;border:1px solid var(--line);border-radius:20px;background:var(--card);
  color:var(--ink)}
.werkzeug .anz{color:var(--mut);font-size:0.8125rem;white-space:nowrap}
th.sortierbar{cursor:pointer;user-select:none}
th.sortierbar:hover{color:var(--brand)}
th .s{opacity:.45;font-size:0.625rem}
td.neg{color:var(--neg)}
.zahlenblock{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px;
  margin-bottom:14px}
.zahlenblock div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--line);
  padding:4px 0;font-size:0.8125rem}
.zahlenblock .n{color:var(--mut)}
.zahlenblock .w{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
tr.detail h4{margin:4px 0 8px;font-size:0.8438rem}
.legende{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:var(--mut);
  font-size:0.7812rem;margin-top:12px}
.legende .st{display:inline-flex;align-items:center}

/* Kopfzeile am Telefon: Umschalter darf umbrechen bzw. für sich scrollen */
@media (max-width:760px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .meta{width:100%;justify-content:flex-start}
  .umschalt{max-width:100%;overflow-x:auto}
  .werkzeug input[type=search]{min-width:140px}
}

/* Objektdetail wie im Cockpit */
.objkopf{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  margin-bottom:14px}
.objkopf h3{font-size:1.0312rem;margin:0 0 5px}
.objkopf .marken{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--mut);font-size:0.7812rem;
  align-items:center}
.objkopf .marke{background:var(--warn-bg);color:var(--warn-ink);border-radius:20px;padding:2px 10px;
  font-weight:600;font-size:0.7188rem}
button.schliessen{border:1px solid var(--line);background:var(--card);color:var(--mut);
  border-radius:8px;padding:5px 11px;font-size:0.7812rem;font-weight:500;flex:none}
.zweispaltig{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px 26px}
tr.detail h4{margin:14px 0 6px;font-size:0.8438rem;font-weight:700}
tr.detail h4:first-child{margin-top:0}
.leise{color:var(--mut);font-weight:400;font-size:0.75rem}
.dettab tr.summe td{border-top:1px solid var(--line)}
.summenzeile{margin:8px 0 0;font-size:0.8125rem;color:var(--mut)}
.summenzeile b{color:var(--ink);font-variant-numeric:tabular-nums}
.einzelkonten{margin-top:10px}
.einzelkonten summary{cursor:pointer;color:var(--brand);font-size:0.7812rem;padding:4px 0}
.quelle{color:var(--mut);font-size:0.75rem;line-height:1.55;margin-top:10px;max-width:70ch}

/* ------------------------------------------------------------------ Startseite:
   eine Kachel je Thema, ein Klick führt hinein. Die Farbe links am Rand ist die
   Ampel; sie steht bewusst als Balken und nicht als Hintergrund, damit die Zahl
   lesbar bleibt und die Seite nicht wie eine Warnmeldung wirkt. */
.themen{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:14px;margin:6px 0 18px}
.thema{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--line);border-radius:12px;padding:15px 17px 13px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);transition:box-shadow .12s,transform .12s;
  min-height:168px}
.thema:hover{box-shadow:0 4px 14px rgba(16,24,40,.10);transform:translateY(-1px)}
.thema:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.thema.rot{border-left-color:var(--neg)}
.thema.gelb{border-left-color:var(--gelb)}
.thema.gruen{border-left-color:var(--pos)}
.thema.grau{border-left-color:var(--grau)}

.tkopf{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.tic{width:22px;text-align:center;color:var(--brand);font-size:0.9375rem;flex:none}
.ttitel{font-weight:650;font-size:0.9062rem;flex:1;min-width:0}
.tpunkt{width:11px;height:11px;border-radius:50%;flex:none;background:var(--grau)}
.thema.rot .tpunkt{background:var(--neg)}
.thema.gelb .tpunkt{background:var(--gelb)}
.thema.gruen .tpunkt{background:var(--pos)}

.twert{font-size:1.5625rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;
  letter-spacing:-.4px}
.thema.rot .twert{color:var(--neg)}
.twas{color:var(--mut);font-size:0.7812rem;margin-top:2px}
.tdelta{margin-top:7px;font-size:0.7812rem;font-weight:600;font-variant-numeric:tabular-nums}
.tdelta.pos{color:var(--pos)}
.tdelta.neg{color:var(--neg)}
.tsub{color:var(--mut);font-size:0.7812rem;line-height:1.5;margin-top:9px;flex:1}
.tpfeil{color:var(--brand);font-size:0.7812rem;font-weight:600;margin-top:11px}

.legende2{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 16px;color:var(--mut);font-size:0.7812rem;max-width:80ch}
.legende2 summary{cursor:pointer;color:var(--brand);font-weight:600}
.legende2 p{line-height:1.6}
.legende2 ul{margin:8px 0;padding-left:20px}
.legende2 li{margin-bottom:5px;line-height:1.55}
.legende2 b{color:var(--ink)}

@media (max-width:760px){
  .themen{grid-template-columns:1fr}
  .thema{min-height:0}
}

.sidebar .fassung{color:var(--mut);font-size:0.6875rem;margin-top:8px;letter-spacing:.2px}

/* Anteilsschalter im Objektdetail: „was bekomme / zahle ich allein?“ */
.anteilschalter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px}
.anteilschalter .lab{color:var(--mut);font-size:0.75rem;margin-right:2px}
.anteilschalter button{border:1px solid var(--line);background:var(--card);color:var(--mut);
  border-radius:20px;padding:4px 12px;font-size:0.75rem;font-weight:600;cursor:pointer;
  font-family:inherit}
.anteilschalter button:hover{border-color:var(--brand);color:var(--brand)}
.anteilschalter button.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.anteilzeile{color:var(--mut)}
.anteilzeile b{color:var(--ink);font-variant-numeric:tabular-nums}

/* Legenden: mehrere Zeilen untereinander, jede mit einer fetten Überschrift */
.legende + .legende{margin-top:6px}
.legende b{color:var(--ink)}
.hinweis .d{display:inline;font-size:inherit;font-weight:600}
.hinweis .d.gut{color:var(--pos)} .hinweis .d.krit{color:var(--neg)}

.fehlerbox{width:min(460px,92vw);text-align:center}
.fehlerbox h1{font-size:1.1875rem;margin:8px 0 12px}
.fehlerbox p{color:var(--mut);font-size:0.875rem;line-height:1.6;text-align:left}
.fehlerbox .weiter{text-align:center;margin-top:16px}
.fehlerbox .weiter a{color:var(--brand);font-weight:600}

/* ==================================================================
   Bedienbarkeit: Tastatur, Tippflächen, Telefon, Drucken
   ================================================================== */

/* Sichtbarer Fokusrahmen, der nicht von einer späteren Regel verschwindet.
   Wer ohne Maus arbeitet, muss sehen, wo er gerade ist. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.sidebar a:focus-visible{outline-color:var(--on-brand)}

/* Sprunglink: auf jeder Seite stehen 22 Bedienelemente vor dem Inhalt. */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:var(--on-brand);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600}
.sprung:focus{left:0}

/* Die Objektzeile wird über einen echten Knopf geöffnet: Tastatur,
   Vorlesesoftware und eine Tippfläche von 44 px in einem Zug. */
button.objname{background:none;border:0;padding:8px 2px;margin:-8px 0;font:inherit;
  color:inherit;text-align:left;cursor:pointer;display:block;width:100%;min-height:44px}
button.objname b{font-weight:650}
th.sortierbar{padding:0}
th.sortierbar button{background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  padding:11px 12px;width:100%;text-align:inherit;min-height:44px}

/* Ampeln: Form zusätzlich zur Farbe, damit sie ohne Farbwahrnehmung und im
   Schwarz-Weiß-Ausdruck unterscheidbar bleiben. */
.amp.gelb i{border-radius:2px;transform:rotate(45deg)}
.amp.grau i{border-radius:1px;height:3px;margin-top:3px}
.amp.gruen i{background:var(--card);border:2.5px solid var(--pos)}

/* Tippflächen */
input[type=checkbox]{width:20px;height:20px;accent-color:var(--brand)}
.umschalt a{padding:9px 12px}
.loginbox button{padding:12px}
.loginbox input{padding:12px}
.sidebar .fuss a{display:inline-block;padding:8px 0}
input, select, button, .werkzeug input[type=search]{border-color:var(--line-ui)}

@media (max-width:760px){
  /* Die Beschriftungen im schmalen Menü liefen bisher unter den Inhalt. */
  .sidebar{width:56px}
  .sidebar nav a{justify-content:center;padding:12px 6px}
  .brandtxt, .sidebar .wer, .sidebar .fassung{display:none}
  .sidebar nav a .titel{display:none}
  .sidebar .brand{justify-content:center;padding:14px 6px}
  /* Am Telefon zeigt die Objektliste nur drei Spalten: Objekt, Kontostand,
     Rückstand. Die übrigen acht standen ohnehin rechts außerhalb des Bildes –
     und weil der aufgeklappte Detailblock in derselben Tabelle steckt, war er
     dadurch ebenfalls 1.156 px breit und damit unlesbar. Alles Weggelassene
     steht im Detailblock, der jetzt in die Breite passt. */
  /* Nur die **äußere** Tabelle: ohne den Kindselektor trafen diese Regeln auch
     die Tabellen im aufgeklappten Detailblock. Dort blieben am Telefon nur die
     Beschriftungen übrig, die Beträge daneben verschwanden – die Seite sah
     vollständig aus und war es nicht. */
  #objtab > thead > tr > th:nth-child(2), #objtab > tbody > tr > td:nth-child(2),
  #objtab > thead > tr > th:nth-child(3), #objtab > tbody > tr > td:nth-child(3),
  #objtab > thead > tr > th:nth-child(n+5):nth-child(-n+10),
  #objtab > tbody > tr > td:nth-child(n+5):nth-child(-n+10){display:none}
  .zweispaltig{grid-template-columns:1fr}
  .dettab{table-layout:fixed;width:100%;font-size:0.75rem}
  .dettab td, .dettab th{padding:6px 4px;word-break:break-word}
  .objtab .unter{white-space:normal}
}

/* ------------------------------------------------------------------ Drucken
   Für die Bankbesprechung: quer, ohne Menü, mit allen Spalten und mit
   Ampeln, die auf Papier auch wirklich erscheinen. */
@page{size:A4 landscape;margin:12mm}
@media print{
  .sidebar, .werkzeug, .topbar .meta, .legende2, .sprung, .tpfeil,
  button.schliessen, .anteilschalter, .einzelkonten summary{display:none !important}
  body{background:var(--card);font-size:0.5625rem}
  .layout{display:block}
  .card{overflow:visible;border:0;box-shadow:none}
  .content{padding:0}
  .topbar{border:0;padding:0 0 6px}
  h1.crumb{font-size:1rem}
  table{width:100%;font-size:0.5625rem}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  tr.detail{break-inside:auto}
  .amp i, .tpunkt, .thema{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .themen{grid-template-columns:repeat(3,1fr)}
  a[href]::after{content:""}
  .drucknotiz{display:block;margin-top:8px;color:#444;font-size:0.5rem}
}
.drucknotiz{display:none}
.nurhandy{display:none}
@media (max-width:760px){ .nurhandy{display:block;color:var(--mut);font-size:0.75rem;flex-basis:100%} }

/* Liquiditätsvorschau: Verlaufskurven */
.kurvenkarte{padding:16px 18px 12px}
.kurvenkarte h3{margin:0 0 10px;font-size:0.9375rem}
svg.kurve{width:110px;height:26px;display:block}
svg.kurve.gross{width:100%;height:180px}
.kurvenzelle{width:120px;padding:4px 8px}
.kurvenachse{display:flex;justify-content:space-between;color:var(--mut);font-size:0.6875rem;
  margin-top:4px;overflow:hidden}
.kurvenachse span{flex:1;text-align:center;white-space:nowrap}

/* Verlauf über die Datenstände – die kleine Linie in einer Dashboard-Kachel */
.tverlauf{margin-top:8px}
svg.verlauf{display:block;width:100%;height:auto;max-height:52px;overflow:visible}
.verlauf-achse{display:flex;justify-content:space-between;color:var(--mut);font-size:0.6875rem;
  margin-top:2px;font-variant-numeric:tabular-nums}

/* Kontostand über die Monate der Vorschau. Die Fläche wird auf die Breite
   gezogen; Schrift und Punkte liegen als HTML darüber, damit sie nicht mit
   verzerrt werden. */
.kvrahmen{margin:0}
.kv{display:grid;grid-template-columns:64px 1fr;grid-template-rows:200px auto}
.kv.klein{grid-template-rows:150px auto}
.kv-y{position:relative;grid-row:1;grid-column:1}
.kv-y span{position:absolute;right:8px;transform:translateY(-50%);color:var(--mut);
  font-size:0.6875rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.kv-flaeche{position:relative;grid-row:1;grid-column:2;border-left:1px solid var(--line)}
.kv-flaeche svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.kv-flaeche rect.treffer{fill:transparent}
.kv-flaeche rect.treffer:hover{fill:var(--hover-marke)}
.kv-punkt{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--card);border:2px solid var(--brand);box-sizing:border-box;pointer-events:none}
.kv-punkt.ende,.kv-punkt.tief{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--brand)}
.kv-punkt.neg{border-color:var(--neg)}
.kv-punkt.neg.ende,.kv-punkt.neg.tief{background:var(--neg)}
.kv-wert{position:absolute;right:0;transform:translateY(-130%);font-size:0.75rem;
  color:var(--ink);background:var(--card);padding:0 4px;border-radius:4px;pointer-events:none;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.kv-wert.tief{right:auto;transform:translate(-50%,40%);color:var(--mut);font-weight:600}
.kv-x{position:relative;grid-row:2;grid-column:2;height:20px;margin-top:4px}
.kv-x span{position:absolute;transform:translateX(-50%);color:var(--mut);font-size:0.6875rem;
  white-space:nowrap}
.kv-x span:first-child{transform:none}
.kv-x span:last-child{transform:translateX(-100%)}
.kurvenkarte h3 .kvlink{float:right;font-weight:600;font-size:0.8125rem;color:var(--brand)}
.kvtabelle summary{cursor:pointer}
.kvtabelle table{margin-top:8px}
@media (max-width:760px){
  .kv{grid-template-columns:52px 1fr}
  .kv-x span:nth-child(even){display:none}
}
.werkzeug .grp a{border:1px solid var(--line-ui);background:var(--card);color:var(--mut);
  padding:9px 14px;font-size:0.8125rem;font-weight:600;display:inline-block;
  border-right:0}
.werkzeug .grp a:first-child{border-radius:9px 0 0 9px}
.werkzeug .grp a:last-child{border-radius:0 9px 9px 0;border-right:1px solid var(--line-ui)}
.werkzeug .grp a.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
@media (max-width:760px){ .kurvenzelle{display:none} }

/* ------------------------------------------------------- Offene Posten
   Zwei zusätzliche Stufen neben der Farbskala der Risikoklassen: der Altfall
   (offen, aber ohne laufendes Soll) und der Sonderfall (Konto der eigenen
   Gruppe). Beide bekommen wie die übrigen Ampeln eine **eigene Form**, damit
   sie ohne Farbwahrnehmung und im Schwarz-Weiß-Ausdruck unterscheidbar
   bleiben: der Altfall ein liegendes Rechteck, der Sonderfall eine Raute in
   Violett. */
.amp.alt i{background:var(--grau);border-radius:1px;width:11px;height:5px;margin-top:2px}
.amp.sonder i{background:var(--violett);border-radius:2px;transform:rotate(45deg);width:8px;height:8px}
.pill.sonder{background:var(--violett-bg);color:var(--violett-ink);font-weight:600}
.werkzeug .lbl{color:var(--mut);font-size:0.8125rem;align-self:center;
  padding:0 8px 0 0;white-space:nowrap}
.werkzeug .grp .lbl{padding:9px 4px 9px 12px}
.werkzeug .suchfeld{flex:1;min-width:190px;display:flex}
.werkzeug .suchfeld input{flex:1}
.werkzeug .zuruecksetzen{color:var(--brand);text-decoration:underline;font-size:0.8125rem;
  padding:9px 4px}
.knopf{display:inline-block;border:1px solid var(--line-ui);background:var(--card);
  color:var(--brand);border-radius:9px;padding:9px 14px;font:inherit;font-size:0.8125rem;
  font-weight:600;cursor:pointer;text-decoration:none;min-height:40px;white-space:nowrap}
.knopf:hover{background:var(--hover-marke)}
.knopf.klein{padding:6px 10px;font-size:0.75rem;min-height:34px}
.kurztext{display:none}
.warnzeile{border-left:3px solid var(--gelb);padding-left:10px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zurueck{margin:0 0 12px}
.zurueck a{color:var(--brand);text-decoration:underline;font-size:0.875rem;
  display:inline-block;padding:6px 0}

/* Mieterliste im aufgeklappten Objekt: die Spalten der beiden Stände stehen
   nebeneinander, deshalb braucht die Tabelle Luft und rechtsbündige Beträge. */
.mieterliste td.geld, .mieterliste th:nth-child(n+3):nth-child(-n+8){text-align:right}
.mieterliste td:first-child{min-width:210px;max-width:320px}
.mieterliste td, .mieterliste th{padding:7px 8px}
.mieterliste .pill{margin-left:4px}

/* Kommunikationsseite */
.kontokopf h2{margin:0 0 8px;font-size:1.125rem}
.kontokopf .marken{margin-bottom:8px;gap:0}
.kontokopf .marken > *+*::before{content:"·";color:var(--mut);padding:0 8px}
.wasserfall td:last-child{text-align:right;white-space:nowrap}
.wasserfall tr.summe td{border-top:2px solid var(--line);font-weight:700}
.schritte{margin:8px 0 0 18px;padding:0}
.schritte li{margin-bottom:6px}
textarea{width:100%;font:inherit;font-size:0.8125rem;line-height:1.5;padding:10px 12px;
  border:1px solid var(--line-ui);border-radius:9px;background:var(--panel-2);resize:vertical}
.ok{color:var(--pos);font-size:0.8125rem;font-weight:600}

@media (max-width:760px){
  /* Am Telefon zeigt die Objektzeile nur Objekt, Forderung und Netto – die
     übrigen sieben Spalten standen rechts außerhalb des Bildes und machten
     zugleich den aufgeklappten Mieterblock unlesbar breit. */
  /* Nur die **äußere** Tabelle. Ohne den Kindselektor trafen diese Regeln auch
     die Mieterliste im aufgeklappten Objekt – dort verschwand ausgerechnet die
     Spalte mit dem offenen Betrag. */
  #posttab > thead > tr > th:nth-child(n+2):nth-child(-n+5),
  #posttab > tbody > tr > td:nth-child(n+2):nth-child(-n+5),
  #posttab > thead > tr > th:nth-child(7),
  #posttab > tbody > tr > td:nth-child(7),
  #posttab > thead > tr > th:nth-child(n+9),
  #posttab > tbody > tr > td:nth-child(n+9){display:none}
  #posttab > tbody > tr.detail > td{display:table-cell;padding:6px}
  /* Feste Breite auch außen, sonst zieht der Inhalt die Tabelle über den Rand
     der Karte hinaus und der Knopf der Mieterzeile steht im Nirgendwo. */
  #posttab{table-layout:fixed;width:100%}
  #posttab > thead > tr > th:first-child, #posttab > tbody > tr > td:first-child{width:50%}
  #posttab > thead > tr > th:nth-child(6), #posttab > tbody > tr > td:nth-child(6){width:25%}
  #posttab > thead > tr > th:nth-child(8), #posttab > tbody > tr > td:nth-child(8){width:25%}
  /* Die Mieterliste hat neun Spalten – am Telefon bleiben Mieterkonto, der
     offene Betrag und der Knopf. Alles Übrige steht auf der Kontoseite, die
     der Knopf öffnet; nebeneinandergequetscht wäre nichts davon lesbar. */
  .mieterliste th:nth-child(2), .mieterliste td:nth-child(2),
  .mieterliste th:nth-child(n+4):nth-child(-n+8),
  .mieterliste td:nth-child(n+4):nth-child(-n+8){display:none}
  /* Feste Breiten, damit die drei verbleibenden Spalten in den Bildschirm
     passen und der Name umbricht, statt den Betrag hinauszuschieben. */
  .mieterliste{table-layout:fixed;width:100%}
  .mieterliste td, .mieterliste th{min-width:0;max-width:none;word-break:break-word}
  .mieterliste th:first-child, .mieterliste td:first-child{width:52%}
  .mieterliste th:nth-child(3), .mieterliste td:nth-child(3){width:24%}
  .mieterliste th:nth-child(9), .mieterliste td:nth-child(9){width:24%}
  /* Am Telefon ist „Kommunikation" in einer 24-%-Spalte ein dreizeiliger
     Wortsalat. Der Knopf heißt dort „öffnen" – wohin er führt, steht auf der
     Seite, die er öffnet. */
  .mieterliste .knopf.klein{padding:8px 4px;font-size:0.75rem;display:block;text-align:center}
  .mieterliste .langtext{display:none}
  .mieterliste .kurztext{display:inline}
}

/* ------------------------------------- Werkzeugleiste der Modulseiten
   Sortierbare Spaltenköpfe sind Verweise, keine Schaltflächen: die Sortierung
   steht in der Adresse und lässt sich damit weiterreichen und ausdrucken. */
th.sortierbar a{display:block;padding:11px 12px;color:inherit;text-decoration:none;
  min-height:44px;box-sizing:border-box}
th.sortierbar a:hover{background:var(--hover-marke)}
th.sortierbar .s{color:var(--mut);font-size:0.75rem;margin-left:2px}
.objtab th.sortierbar{padding:0}
/* Eine Zeile, die den Suchbegriff enthält – damit man im aufgeklappten Detail
   sieht, warum das Objekt in der Liste steht. */
tr.treffer > td{background:var(--treffer)}
tr.treffer > td:first-child{box-shadow:inset 3px 0 0 var(--gelb)}
a.objlink{color:inherit;text-decoration:none;display:inline-block;padding:6px 0;min-height:32px}
a.objlink:hover b{text-decoration:underline;color:var(--brand)}
tr.minus > td{background:var(--bad-bg)}
tr.minus > td:first-child{box-shadow:inset 3px 0 0 var(--neg)}

/* ------------------------------------------- Mieterhöhung: Rechner und Pflege */
.rechnerform{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.rechnerform label{display:flex;flex-direction:column;gap:4px;font-size:0.8125rem;
  color:var(--mut)}
.rechnerform input[type=text]{font:inherit;font-size:0.9375rem;padding:9px 11px;
  border:1px solid var(--line-ui);border-radius:9px;min-width:120px}
.feldhilfe{color:var(--mut);font-size:0.75rem}
fieldset.kappwahl{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0}
fieldset.kappwahl legend{font-size:0.75rem;color:var(--mut);padding:0 4px}
fieldset.kappwahl label{display:block;font-size:0.8125rem;color:var(--tx);
  flex-direction:row;align-items:center;gap:6px;padding:3px 0}
.spiegelform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Die Zelle bleibt eine Tabellenzelle – `display:flex` auf einem td löst das
   colspan auf, und die Formularfelder landeten in der ersten Spalte. */
td.formzelle{padding:6px 10px}
.spiegeltab td, .spiegeltab th{vertical-align:middle}
.spiegelform label{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;
  color:var(--mut)}
.spiegelform input[type=text], .spiegelform select{font:inherit;font-size:0.875rem;
  padding:7px 10px;border:1px solid var(--line-ui);border-radius:8px}
@media (max-width:760px){
  .rechnerform, .spiegelform{flex-direction:column;align-items:stretch}
  /* Am Telefon bleiben Ort und Eingabefelder; die Kennzahlen daneben stehen
     ohnehin im Prüfstand. Ohne das schob die Tabelle die ganze Seite nach
     rechts, und die Menüleiste rutschte aus dem Bild. */
  .spiegeltab th:nth-child(2), .spiegeltab td:nth-child(2),
  .spiegeltab th:nth-child(3), .spiegeltab td:nth-child(3),
  .spiegeltab th:nth-child(n+9), .spiegeltab td:nth-child(n+9){display:none}
  .spiegeltab{table-layout:fixed;width:100%}
  .spiegeltab input[type=text], .spiegeltab select{width:100%;box-sizing:border-box}
  .spiegelform label{width:100%}
}
/* Im Detail ist ein Verweis auf die Einheitenseite als solcher erkennbar –
   sonst findet ihn nur, wer zufällig darüberfährt. */
.dettab a.objlink{color:var(--brand);text-decoration:underline;padding:0}

/* CSV-Export aus der Werkzeugleiste – ein Verweis, kein Knopf: er trägt die
   Filter der Adresse mit, deshalb steht er neben dem Zähler. */
a.csvlink{font-size:0.75rem;color:var(--brand);text-decoration:underline;white-space:nowrap;margin-left:auto}
@media print{a.csvlink{display:none}}
@media print{.nichtdrucken{display:none !important}}

/* Fristen & Termine: die Spalte „was zu tun ist" ist ein Satz und darf
   umbrechen – sonst schiebt sie die Tabelle über den Rand und der Satz ist weg. */
.objtab td[data-sp="was zu tun ist"]{white-space:normal;text-align:left;min-width:24ch;max-width:46ch;line-height:1.4}
.objtab td[data-sp="Termin"],.objtab td[data-sp="wann"]{white-space:nowrap}
table.kompakt th,table.kompakt td{text-align:left;white-space:normal}


/* ==================================================================
   Hausstil K&K (nach FLOWRIZON) – steht zuletzt und gewinnt deshalb.
   ================================================================== */
body{font-size:14px;line-height:1.4}

/* Menü: Fläche wie eine Karte, aktiver Punkt wie der Unterreiter in FLOWRIZON */
.sidebar{background:var(--side);color:var(--side-ink);border-right:1px solid var(--line)}
.sidebar .brand{padding:18px 16px 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.brandtxt{color:var(--ink);font-weight:600;font-size:17px;letter-spacing:.01em}
.brandtxt .marke{color:var(--brand)}
.brandtxt .claim{font-style:italic;font-size:11px;font-weight:500;color:var(--ink);opacity:.72;
  margin-top:1px;letter-spacing:0}
.sidebar nav a{color:var(--side-ink);font-weight:600;font-size:13.5px;padding:9px 12px;
  border-radius:8px;border-left:3px solid transparent}
.sidebar nav a:hover{background:var(--panel-2);color:var(--ink)}
.sidebar nav a.on{background:var(--panel-2);color:var(--brand);border-left-color:var(--brand)}
.sidebar nav a .zahl{color:var(--on-brand)}
.sidebar .fuss{border-top:1px solid var(--line)}
.sidebar .fuss a{color:var(--side-ink)} .sidebar .fuss a:hover{color:var(--brand)}
.sidebar .fuss .wer{color:var(--ink)}
.sidebar .fuss .wer span{color:var(--mut)}
.sidebar a:focus-visible{outline-color:var(--brand)}

/* Kopfleiste klebt beim Scrollen, wie in FLOWRIZON */
.topbar{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);
  padding:14px 22px}
.crumb{font-size:20px;font-weight:600;letter-spacing:.01em;margin:0}
.pill{background:var(--panel-2);color:var(--mut);border:1px solid var(--line);padding:3px 11px}
.pill.role{background:var(--info-bg);color:var(--brand);border-color:var(--info-line)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.umschalt{background:var(--panel-2);border-color:var(--line);border-radius:8px;padding:3px;gap:2px}
.umschalt a{border-radius:6px;padding:5px 11px;font-weight:600;font-size:12.5px}
.umschalt a:hover{color:var(--ink)}
.umschalt a.on{background:var(--brand);color:var(--on-brand)}
.logout,.themaknopf{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.logout:hover,.themaknopf:hover{border-color:var(--brand);color:var(--ink)}
.themaknopf{min-width:34px;min-height:32px}

/* Kennzahlen und Karten */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px 11px}
.kpi .l{color:var(--mut);font-size:11.5px;line-height:1.3;margin-bottom:3px}
.kpi .v{font-size:20px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}
.card{background:var(--card);border-color:var(--line);border-radius:12px}
.thema,.legende2,.zugangskarte,.dettab,.vorspann{border-radius:12px}
.thema{box-shadow:none}
.thema:hover{box-shadow:0 4px 18px rgba(0,0,0,.18);border-color:var(--line-ui)}
.vorspann{color:var(--info-ink)}
.vorspann.warn{color:var(--warn-ink)}

/* Tabellen: ruhig, Köpfe gedämpft, Zahlen gleich breit */
table{font-size:13px}
th,td{padding:8px 11px;border-bottom:1px solid var(--line)}
th{background:var(--th);color:var(--mut);font-weight:600;font-size:12px}
td{font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--hover)}

/* Bedienelemente wie .btn / .field in FLOWRIZON */
button,.knopf{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;
  font-size:12.5px;font-weight:600}
button:hover,.knopf:hover{border-color:var(--brand);background:var(--panel-2)}
button.primary,.loginbox button{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}
.knopf{color:var(--brand)}
input,select,textarea{background:var(--panel-2);color:var(--ink);border:1px solid var(--line-ui)}
input::placeholder,textarea::placeholder{color:var(--mut)}
input:focus,select:focus,textarea:focus{outline:1px solid var(--brand);border-color:var(--brand)}
.werkzeug .grp{background:var(--panel-2);border-color:var(--line);border-radius:8px;padding:3px;gap:2px}
.werkzeug .grp button{border-radius:6px;padding:5px 12px;font-weight:600;font-size:12.5px}
.werkzeug .grp button.on{background:var(--brand);color:var(--on-brand)}
.werkzeug input[type=search]{background:var(--panel-2);border-radius:8px}
.tag{background:var(--panel-2);color:var(--mut)}
code{background:var(--panel-2)}
.zugangskarte pre{background:var(--panel-2);color:var(--ink)}
.sprung{color:var(--on-brand)}

/* Anmeldung: Marke wie im Werkzeugkopf */
.loginbg{background:var(--bg)}
.loginbox{background:var(--card);border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.30)}
.loginmarke{text-align:center;font-size:20px;font-weight:600;margin:4px 0 0}
.loginmarke .marke{color:var(--brand)}
.loginclaim{text-align:center;font-style:italic;font-size:11.5px;opacity:.72;margin:0 0 14px}

/* Drucken immer hell, egal welches Schema gewählt ist */
@media print{
  :root,:root[data-theme]{color-scheme:light;
    --bg:#fff; --card:#fff; --panel-2:#f3f5f8; --th:#fff; --line:#d3dae2; --line-ui:#c3ccd8;
    --ink:#14202c; --tx:#14202c; --mut:#4a5765; --grau:#6b7686;
    --brand:#0e7c86; --brand-d:#0a5b63; --on-brand:#fff;
    --pos:#147a52; --neg:#c0392b; --gelb:#8a5a00; --orange:#c98a15;
    --hover:transparent; --info-bg:#f2f7f8; --info-ink:#20343a; --warn-bg:#fff8e6; --warn-ink:#6b5613;
    --ok-bg:#eaf5ef; --bad-bg:#fdf1ef; --treffer:#fff8e1}
  .topbar{position:static}
  .themaknopf{display:none}
}

/* ------------------------------------------------- Hinweise & Klärung */
.hinweiskarte{border-left:4px solid var(--orange)}
.hinweiskarte.status-klaerung{border-left-color:var(--brand)}
.hinweiskarte.status-erledigt{border-left-color:var(--pos);opacity:.85}
.hkopf{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.hkopf h3{margin:0 0 4px;font-size:15px}
.hinweiskarte .marken{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:8px;align-items:center}
.htext{white-space:pre-wrap;line-height:1.55;max-width:90ch;margin:6px 0 8px}
.pill.hstatus-offen{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.pill.hstatus-klaerung{background:var(--info-bg);color:var(--brand);border-color:var(--info-line)}
.pill.hstatus-erledigt{background:var(--ok-bg);color:var(--pos);border-color:transparent}
.kommentare{list-style:none;margin:8px 0;padding:0;border-top:1px solid var(--line)}
.kommentare li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.kommentare li div{white-space:pre-wrap;margin-top:3px;max-width:90ch}
.kommentarform{margin-top:10px}
.kommentarform .knopfzeile,.neuhinweis .knopfzeile{margin-top:8px;flex-wrap:wrap}
.kommentarform select,.neuhinweis select,.neuhinweis input{margin-left:6px;padding:6px 8px;border-radius:8px}
.neuhinweis label{display:block;margin-bottom:10px}
.neuhinweis input[name=titel]{width:100%;margin:4px 0 0;padding:8px 10px}
.werkzeug .grp a{padding:5px 11px}

/* Zweiter Faktor: Einrichtung */
.zfkarte{max-width:620px}
.zfschritte{padding-left:20px;margin:0}
.zfschritte li{margin-bottom:14px;line-height:1.5}
.zfqr{margin:10px 0}
.zfqr svg{display:block;width:200px;height:200px;border-radius:8px}
.zfgeheim{display:block;margin:6px 0 0;font-size:0.9375rem;letter-spacing:0.08em;
  word-break:break-all;user-select:all}