/* gbu.bfmps.de · Oberfläche · Clean Light (CD/CI v1.2), Design-System GBU-Plattform/design-system/MASTER.md */
:root{--blue:#0E3B5C;--mint:#14C29B;--mint-text:#0E866B;--amber:#F59E0B;--amber-text:#A56A07;--violet:#6366F1;--ink:#1A2433;--muted:#4A5568;--surface:#F7FAFC;--line:#E5EAF0;--rot:#B42318;--font:'Helvetica Neue',Inter,Arial,'Liberation Sans',sans-serif}
*{box-sizing:border-box}html{color-scheme:light}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.5;color:var(--ink);background:#fff}
a{color:var(--blue)}a:hover{text-decoration-thickness:2px}
header.top{border-bottom:1px solid var(--line);background:#fff}
header.top .in{max-width:1280px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
header.top .marke{display:flex;align-items:center;gap:12px;text-decoration:none}header.top .logo{height:34px;display:block}
header.top .marke-text{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;line-height:1.2}
header.top .mandant{display:flex;align-items:center;height:40px;max-width:180px;padding:2px 10px;border-left:1px solid var(--line)}header.top .mandant img{max-height:36px;max-width:160px;width:auto;height:auto;display:block}
@media (max-width:700px){header.top .marke-text{display:none}header.top .mandant{max-width:120px}}
nav.haupt{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav.haupt a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:500;transition:background .15s,color .15s}
nav.haupt a:hover,nav.haupt a.aktiv{background:var(--surface);color:var(--blue)}
main{max-width:1280px;margin:0 auto;padding:28px 20px 60px}
footer.fuss{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:20px;text-align:center}
h1{font-size:26px;letter-spacing:-.01em;margin:0 0 6px;color:var(--blue)}h2{font-size:18px;margin:28px 0 8px;color:var(--blue)}h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:20px 0 8px;font-weight:600}
p.lead{color:var(--muted);margin:0 0 20px;max-width:70ch}
.meldung{background:var(--surface);border-left:4px solid var(--mint);padding:10px 14px;border-radius:6px;margin:0 0 20px}
.karte{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:0 0 18px}
.karte.hell{background:var(--surface);border-color:transparent}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
table.tab{width:100%;border-collapse:collapse;font-size:14px}
table.tab th,table.tab td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.tab td.aktionen{white-space:normal;min-width:170px}table.tab td.aktionen .knopf,table.tab td.aktionen form{display:inline-block;margin:2px 4px 2px 0;vertical-align:middle}table.tab td.aktionen form{margin-right:0}
table.tab th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;background:var(--surface)}
table.tab tr:hover td{background:#fbfcfd}
.tabwrap{overflow-x:auto}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface);color:var(--muted);white-space:nowrap}
.badge.ok{background:#E3F7F0;color:var(--mint-text)}.badge.warn{background:#FDF2DC;color:var(--amber-text)}.badge.rot{background:#FBE9E7;color:var(--rot)}.badge.blau{background:#E6EEF4;color:var(--blue)}
.knopf,button.knopf,input[type=submit].knopf{display:inline-block;padding:9px 16px;border-radius:8px;border:1px solid var(--blue);background:var(--blue);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s}
.knopf:hover{background:#0b2f4a}.knopf:active{transform:translateY(1px)}
.knopf.sekundaer{background:#fff;color:var(--blue)}.knopf.sekundaer:hover{background:var(--surface)}
.knopf.klein{padding:5px 10px;font-size:13px}.knopf.gefahr{border-color:var(--rot);color:var(--rot);background:#fff}.knopf.gefahr:hover{background:#FBE9E7}
form.zeile{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
label{display:block;font-size:13px;color:var(--muted);font-weight:600;margin:10px 0 4px}
input:not([type]),input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],input[type=search],input[type=file],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
textarea.code{font-family:'DejaVu Sans Mono',Menlo,monospace;font-size:12.5px;min-height:420px;line-height:1.45}
.hinweis{font-size:13px;color:var(--muted)}
.code{font-family:'DejaVu Sans Mono',Menlo,monospace;font-size:13px;letter-spacing:.04em}
.check{display:flex;gap:8px;align-items:center;margin:8px 0}.check input{width:auto}
div.zeile{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}div.zeile>div{flex:1;min-width:160px}div.zeile>label{font-weight:400;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}.chip{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:400;color:var(--ink);margin:0;cursor:pointer;background:#fff}.chip:has(input:checked){background:#E6EEF4;border-color:var(--blue)}.chip input{width:auto;margin:0}
details.karte>summary{cursor:pointer;font-size:16px}details.karte[open]>summary{margin-bottom:10px}
.matrix td.ok{background:#E3F7F0}.matrix td.bald{background:#FDF2DC}.matrix td.fehlt{background:#FBE9E7}.matrix td.frei{background:#fff;color:var(--muted)}.matrix td{font-size:13px;white-space:nowrap}
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.zweispaltig.breit{grid-template-columns:3fr 2fr}
@media (max-width:860px){.zweispaltig,.zweispaltig.breit{grid-template-columns:1fr}}
.pruef{max-width:640px;margin:0 auto}
.pruef .status{font-size:22px;font-weight:700;padding:16px 18px;border-radius:12px;margin:14px 0}
.pruef .status.ok{background:#E3F7F0;color:var(--mint-text)}.pruef .status.warn{background:#FDF2DC;color:var(--amber-text)}.pruef .status.rot{background:#FBE9E7;color:var(--rot)}
.pruef dl{display:grid;grid-template-columns:180px 1fr;gap:6px 14px;margin:0}.pruef dt{color:var(--muted)}
.siegelzeile{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin-top:8px;font-size:14px}
.token{background:#FDF2DC;border:1px solid var(--amber);padding:12px 14px;border-radius:8px;word-break:break-all}
iframe.vorschau{width:100%;height:78vh;border:1px solid var(--line);border-radius:8px;background:#eee}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}



/* ---------- aus nachweis.bfmps.de übernommen: Kacheln, Kennzahlen, Seitenkopf, Gruppen ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0 0 24px}
.kachel{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .1s}
.kachel:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(14,59,92,.08);text-decoration:none}.kachel:active{transform:translateY(1px)}
.kachel .kopf{display:flex;gap:14px;align-items:center;margin-bottom:12px}.kachel .titel{font-weight:700;font-size:16px;color:var(--blue);line-height:1.25}.kachel .sub{font-size:13px;color:var(--muted)}
.avatar{width:48px;height:48px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;font-weight:700;color:var(--blue);font-size:15px;letter-spacing:.02em}.avatar img{max-width:100%;max-height:100%;object-fit:contain}
.avatar.gross{width:72px;height:72px;border-radius:14px;font-size:20px}
.kachel .zahlen{display:flex;gap:18px;flex-wrap:wrap}.kachel .zahlen div{font-size:13px;color:var(--muted)}.kachel .zahlen strong{display:block;font-size:20px;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.kachel .aktionen{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.kachel .aktionen a{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--surface);color:var(--blue);text-decoration:none;font-weight:500}.kachel .aktionen a:hover{background:#E6EEF4}
.seitenkopf{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:0 0 18px}.seitenkopf>div:not(.avatar):not(.rechts){flex:1;min-width:260px}.seitenkopf h1{margin:0}.seitenkopf .sub{color:var(--muted);font-size:14px}.seitenkopf .rechts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0 0 24px}
.kpi{background:var(--surface);border-radius:10px;padding:12px 14px}.kpi strong{display:block;font-size:24px;line-height:1.1;color:var(--blue);font-variant-numeric:tabular-nums}.kpi span{font-size:13px;color:var(--muted)}.kpi.warn strong{color:var(--amber-text)}.kpi.ok strong{color:var(--mint-text)}
.gruppe{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;background:#fff}.gruppe>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px;font-weight:700;color:var(--blue)}.gruppe>summary::-webkit-details-marker{display:none}
.gruppe>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;flex:none}.gruppe[open]>summary::before{transform:rotate(45deg)}
.gruppe>summary .anzahl{margin-left:auto;font-weight:500;font-size:13px;color:var(--muted)}.gruppe .tabwrap{padding:0 8px 8px}.gruppe table.tab{margin:0}
.leer{padding:32px;text-align:center;color:var(--muted);background:var(--surface);border-radius:12px}
details.verwaltung{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;background:#fff}details.verwaltung>summary{cursor:pointer;padding:12px 16px;font-weight:600;color:var(--blue);list-style:none;display:flex;align-items:center;gap:10px}details.verwaltung>summary::-webkit-details-marker{display:none}details.verwaltung>summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:400;font-size:18px}details.verwaltung[open]>summary::after{content:"–"}details.verwaltung>form,details.verwaltung>div{padding:0 16px 16px}
.logo-vorschau{display:flex;align-items:center;gap:14px;margin:6px 0 10px}.logo-vorschau img{max-height:60px;max-width:200px;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff}
.pflichtgruppe{border:1px solid var(--line);border-radius:8px;margin:0 0 8px;background:#fff}.pflichtgruppe>summary{cursor:pointer;padding:8px 12px;font-weight:600;color:var(--blue)}.pflichtgruppe .chips{padding:0 12px 6px;margin:0}.gruppe>summary .anzahl strong.rot{color:var(--rot)}
/* ---------- gbu.bfmps.de: Ergänzungen nach Design-System ---------- */
:root{--stufe-gruen-bg:#E3F7F0;--stufe-gelb-bg:#FDF2DC;--stufe-rot-bg:#FBE9E7;--stufe-grau-bg:#EEF1F5}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;border:2px solid var(--blue);z-index:100}.skip:focus{left:8px;top:8px}
.meldung.warn{border-left-color:var(--amber)}.meldung.rot{border-left-color:var(--rot)}
.knopf:disabled,button.knopf[disabled]{opacity:.5;cursor:not-allowed}
.knopf.klein.rot{background:var(--rot);border-color:var(--rot);color:#fff}
/* Stufen-Badges: Farbe plus Zahl plus Wort */
.stufe{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.stufe .rz{font-variant-numeric:tabular-nums;font-size:13px}
.stufe.gruen{background:var(--stufe-gruen-bg);color:var(--mint-text)}.stufe.gelb{background:var(--stufe-gelb-bg);color:var(--amber-text)}.stufe.rot{background:var(--stufe-rot-bg);color:var(--rot)}.stufe.grau,.stufe.offen{background:var(--stufe-grau-bg);color:var(--muted)}
/* Zyklus-Stepper */
.stepper{display:flex;gap:0;flex-wrap:wrap;margin:0 0 20px;padding:0;list-style:none;counter-reset:s}
.stepper li{flex:1 1 120px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:3px solid var(--line);font-size:13px;color:var(--muted);min-height:44px}
.stepper li .n{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:none;background:#fff}
.stepper li.erledigt{border-bottom-color:var(--mint)}.stepper li.erledigt .n{border-color:var(--mint);background:var(--stufe-gruen-bg);color:var(--mint-text)}
.stepper li.aktiv{border-bottom-color:var(--blue);color:var(--blue);font-weight:600}.stepper li.aktiv .n{background:var(--blue);border-color:var(--blue);color:#fff}
@media (max-width:700px){.stepper{flex-direction:row;overflow-x:auto;flex-wrap:nowrap;gap:6px;padding-bottom:4px}.stepper li{flex:none;min-height:36px;padding:4px 8px;font-size:12px;border-bottom-width:3px}.stepper li:not(.aktiv) span:last-child{display:none}.stepper li.aktiv{flex:none}}
/* Risikomatrix 4×4 */
.matrix-wahl{border-collapse:separate;border-spacing:4px;margin:6px 0}
.matrix-wahl th{font-size:11.5px;color:var(--muted);font-weight:600;text-align:center;padding:2px 4px;white-space:nowrap}
.matrix-wahl th.w{text-align:right}
.matrix-wahl td{padding:0}
.matrix-wahl label{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;cursor:pointer;font-weight:700;font-size:15px;border:2px solid transparent;position:relative;font-variant-numeric:tabular-nums}
.matrix-wahl label input{position:absolute;opacity:0;width:1px;height:1px}
.matrix-wahl label.gruen{background:var(--stufe-gruen-bg);color:var(--mint-text)}.matrix-wahl label.gelb{background:var(--stufe-gelb-bg);color:var(--amber-text)}.matrix-wahl label.rot{background:var(--stufe-rot-bg);color:var(--rot)}
.matrix-wahl label:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px rgba(14,59,92,.15)}.matrix-wahl label:has(input:checked)::after{content:"✓";font-size:10px;position:absolute;right:4px;bottom:2px}
.matrix-wahl label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.matrix-wahl label small{font-size:9px;font-weight:500;color:inherit;opacity:.8}
.matrix-legende{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:4px 0 10px}
.matrix-paar{display:flex;gap:28px;flex-wrap:wrap}
/* Segmentierte Schaltergruppe (Prüflisten) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-wrap:wrap}
.seg label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;cursor:pointer;font-weight:600;font-size:14px;color:var(--muted);background:#fff;border-right:1px solid var(--line);position:relative;margin:0}
.seg label:last-child{border-right:none}.seg label input{position:absolute;opacity:0;width:1px;height:1px}
.seg label:has(input:checked){color:#fff;background:var(--blue)}
.seg label.ja:has(input:checked),.seg label.kein:has(input:checked){background:var(--mint-text)}.seg label.nein:has(input:checked),.seg label.dringend:has(input:checked){background:var(--rot)}.seg label.spaeter:has(input:checked),.seg label.handlungsbedarf:has(input:checked){background:var(--amber-text)}.seg label.trifft_nicht_zu:has(input:checked){background:var(--muted)}
.seg label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:-2px}
/* Prüfpunkt */
.punkt{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 10px;background:#fff}
.punkt.hb{border-left:4px solid var(--amber)}.punkt.hb.rot{border-left-color:var(--rot)}.punkt.ok{border-left:4px solid var(--mint)}
.punkt .kopf{display:flex;gap:12px;align-items:flex-start}.punkt .nr{font-weight:700;color:var(--blue);flex:none;min-width:38px;font-variant-numeric:tabular-nums}
.punkt .frage{font-weight:600}.punkt .quelle{font-size:12.5px;color:var(--muted);margin-top:2px}
.punkt .massnahme{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.fortschritt{height:6px;background:var(--surface);border-radius:3px;overflow:hidden;margin:6px 0}.fortschritt span{display:block;height:100%;background:var(--mint)}
/* Gefährdungen */
.gef{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 10px;background:#fff}
.gef .kopf{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.gef .faktor{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.gef .titel{font-weight:600;flex:1;min-width:240px}.gef .rechts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gef.zu-pruefen{border-left:4px solid var(--violet)}
.gef .mass{margin:8px 0 0;padding:0;list-style:none}.gef .mass li{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.stop{display:inline-block;width:22px;height:22px;border-radius:6px;background:var(--blue);color:#fff;font-weight:700;font-size:12px;text-align:center;line-height:22px;flex:none}
.stop.S{background:#0E866B}.stop.T{background:#0E3B5C}.stop.O{background:#6366F1}.stop.P{background:#A56A07}
.ueberfaellig{color:var(--rot);font-weight:700}
/* Baum */
.baum .bereich{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;background:#fff}
.baum .bereich>summary{padding:12px 16px;cursor:pointer;font-weight:700;color:var(--blue);display:flex;gap:10px;align-items:center;list-style:none}.baum .bereich>summary::-webkit-details-marker{display:none}
.baum .taet{display:flex;gap:10px;align-items:center;padding:8px 16px;border-top:1px solid var(--line);flex-wrap:wrap}.baum .taet a.name{font-weight:600;flex:1;min-width:200px}
.baum .zahlen{display:flex;gap:6px}
.relevanz{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.relevanz .f{border:1px solid var(--line);border-radius:10px;padding:10px 12px}.relevanz .f strong{display:block;margin-bottom:6px}
.relevanz .f .seg label{min-height:36px;padding:0 10px;font-size:13px}
.filter{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;position:sticky;top:0;background:#fff;padding:8px 0 10px;z-index:5;border-bottom:1px solid var(--line);margin-bottom:12px}.filter>div{min-width:130px}.filter label{margin-top:0}
.assistent .schritte{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}.assistent .schritte a,.assistent .schritte span{padding:6px 12px;border-radius:999px;font-size:13px;text-decoration:none;background:var(--surface);color:var(--muted)}.assistent .schritte .aktiv{background:var(--blue);color:#fff}.assistent .schritte .erledigt{color:var(--mint-text)}
.kpi.rot strong{color:var(--rot)}
.karte.betreuung{background:var(--surface);border-color:transparent}
.tabelle-klein{font-size:13px}
.pdf-link{font-weight:600}
.inline{display:inline}
details.klein>summary{cursor:pointer;font-size:13px;color:var(--blue)}

/* Überlauf verhindern: Tabellen scrollen im Wrapper, nie die Seite */
main{overflow-x:clip}table.tab{table-layout:auto}.tabwrap{max-width:100%}
.kpi.rot{background:#FBE9E7}.kpi.warn{background:#FDF2DC}.kpi.ok{background:#E3F7F0}
.gef .rechts .badge{white-space:normal}
@media (max-width:700px){.punkt .kopf{flex-direction:column}.punkt .rechts{align-self:flex-start}.seg label{padding:0 10px;font-size:13px}.gef .kopf .rechts{width:100%}main{padding:16px 16px 48px}h1{font-size:22px}.kpis{grid-template-columns:repeat(2,1fr)}}
.zweispaltig>div,.raster>*{min-width:0}.tabwrap table{min-width:480px}
input.fehlt{border-color:var(--amber);background:#FDF2DC}
.markiert{outline:2px solid var(--blue);outline-offset:3px;border-radius:12px}

.gef details.regelwerk{margin:8px 0 0}.regelliste{margin:6px 0 0;padding:0;list-style:none}.regelliste li{padding:4px 0;border-top:1px solid var(--line);font-size:13.5px}.regelliste li:first-child{border-top:0}
a.kpi{text-decoration:none;display:block}a.kpi:hover{background:#eef2f6}