/* Prozessnavigator - StädteRegion Aachen
   Optik der Vorgängerversion, erweitert um Versionen, Rollen und Kosten. */
:root{
  --green:#b5dc11; --greenDark:#8fae0c; --blue:#002874; --blueSoft:#eef2fa;
  --ink:#1a2332; --ink-soft:#4a5568; --line:#e5e9ef; --line-strong:#d0d7e0;
  --warn:#c0392b; --warnSoft:#fdecea; --ok:#2e7d32; --okSoft:#e8f5e9;
  --amber:#d98324; --paper:#fff; --bg:#f7f8fa; --muted:#788896;
  --sidebar-w:262px;
}
*{box-sizing:border-box;}
body{font-family:'Segoe UI',system-ui,sans-serif;color:var(--ink);background:var(--bg);margin:0;}
body.plain{display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;}
a{color:var(--blue);}
h1{font-size:22px;color:var(--blue);margin:0;}
h3{color:var(--blue);font-size:16px;margin:26px 0 12px;}
p{margin:0 0 10px;}
code,.hash{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* --- Kopf: Testbanner --- */
.stagebar{background:#fff8dc;color:#8a6d00;border-bottom:1px solid #e8d5a8;padding:7px 20px;
  font-size:12px;font-weight:600;text-align:center;}

/* --- App-Gerüst: Sidebar + Inhalt --- */
.shell{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--paper);border-right:1px solid var(--line);
  padding:20px 16px;display:flex;flex-direction:column;gap:20px;min-height:100vh;
  position:sticky;top:0;overflow-y:auto;}
.content{flex:1;min-width:0;padding:30px 34px 60px;max-width:1240px;}

/* Marke in der Sidebar */
.sbrand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  padding-bottom:16px;border-bottom:1px solid var(--line);}
.sbrand img{height:38px;width:auto;display:block;}
.sbtitle{display:block;font-weight:700;color:var(--blue);font-size:15px;line-height:1.25;}
.sbsub{display:block;font-size:12px;color:var(--muted);}

/* Navigation */
.snav{display:flex;flex-direction:column;gap:3px;}
.sgroup{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:1.4px;margin:14px 0 5px 12px;}
.sgroup:first-child{margin-top:0;}
.sitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:var(--ink);font-size:14px;text-decoration:none;line-height:1.3;}
.sitem:hover{background:var(--blueSoft);color:var(--blue);}
.sitem.on{background:var(--blue);color:#fff;font-weight:600;}
.sicon{font-size:15px;min-width:20px;text-align:center;filter:grayscale(.15);}
.sitem.on .sicon{filter:none;}

/* Benutzerblock unten */
.suser{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:12px;}
.suname{font-weight:600;color:var(--ink);font-size:13px;}
.surole{color:var(--muted);margin-bottom:10px;}
.toolbtn.block{display:block;text-align:center;width:100%;box-sizing:border-box;}

/* Hamburger (nur schmale Geräte) */
.hamburger{display:none;position:fixed;top:10px;left:10px;z-index:1000;width:42px;height:42px;
  border:1px solid var(--line);background:var(--paper);border-radius:9px;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);}
.hamburger span{display:block;width:18px;height:2px;background:var(--blue);border-radius:2px;}
.navschatten{display:none;position:fixed;inset:0;background:rgba(16,24,40,.4);z-index:998;}

/* .wrap ist historisch: die Polsterung macht jetzt .content */
.wrap{max-width:none;margin:0;padding:0;}

.purpose{background:var(--blueSoft);border-left:3px solid var(--blue);border-radius:0 9px 9px 0;
  padding:12px 16px;font-size:13px;color:var(--blue);margin-bottom:18px;}
.appfoot{margin:34px 0 0;padding:0;display:flex;gap:14px;
  color:#aab4be;font-size:11px;font-family:ui-monospace,monospace;}
.appfoot .dbg{color:var(--amber);font-weight:600;}
.crumb{font-size:12px;color:var(--muted);margin-bottom:8px;}
.crumb span{margin:0 5px;}
.crumb a{text-decoration:none;}
.pagehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.pagehead h1{margin-right:auto;}
.vpicker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
.vpicker label{display:flex;align-items:center;gap:6px;font-weight:600;}
.vpicker select{width:auto;padding:6px 9px;font-size:13px;}

/* --- Knöpfe --- */
button{font-family:inherit;cursor:pointer;}
.toolbtn{padding:8px 13px;border-radius:7px;border:1px solid var(--line);background:#fff;
  color:var(--blue);font-weight:600;font-size:13px;text-decoration:none;display:inline-block;}
.toolbtn:hover{border-color:var(--blue);}
.toolbtn.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.toolbtn.danger{color:var(--warn);border-color:var(--warn);}
.addbtn{padding:11px 18px;border-radius:8px;background:#fff;color:var(--blue);
  border:1.5px dashed var(--blue);font-weight:700;font-size:14px;width:100%;}
.savebar{position:sticky;bottom:0;background:var(--bg);padding:14px 0;margin-top:14px;
  border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;}
.savebar .hint{font-size:12px;color:var(--muted);}

/* --- Reiter --- */
.tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.tab{padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-weight:600;font-size:13px;text-decoration:none;display:inline-block;}
.tab:hover{border-color:var(--blue);}
.tab.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.tab.quiet{color:var(--muted);}
.tabsep{flex:1;}

/* --- Flächen --- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px;}
label.field{display:block;font-size:13px;margin-bottom:4px;}
label.field>span{display:block;font-weight:600;margin-bottom:5px;color:#566573;}
input,select,textarea{width:100%;padding:9px 11px;border-radius:7px;border:1px solid var(--line);
  font-size:14px;font-family:inherit;background:#fff;color:var(--ink);}
input:disabled,select:disabled,textarea:disabled{background:#f7f8fa;color:#7a8794;}
textarea{resize:vertical;min-height:70px;line-height:1.5;}
.chk{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin-top:6px;cursor:pointer;line-height:1.45;}
.chk input{width:auto;margin-top:2px;accent-color:var(--blue);}
.mehr{margin-top:6px;}
.mehr>summary{font-size:12px;font-weight:600;color:var(--blue);cursor:pointer;padding:6px 0;}
.mehr[open]>summary{margin-bottom:8px;}
.leer{color:#9aa5b1;font-size:14px;}
.mt{margin-top:10px;}
.nomargin{margin:0 0 10px;}

/* --- Schrittkarten --- */
.steprow-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.stepno{font-weight:700;color:var(--blue);}
.mini{width:30px;height:30px;border-radius:6px;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-size:13px;margin-left:4px;}
.mini.danger{border-color:var(--warn);color:var(--warn);}
.step.weg{opacity:.4;}

/* --- Kennzahlen --- */
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 18px;
  min-width:130px;flex:1 1 130px;}
.kpi .lbl{font-size:12px;color:var(--muted);margin-bottom:4px;}
.kpi .val{font-size:22px;font-weight:700;color:var(--blue);}
.kpi .val.muted{color:#9aa5b1;}
.kpi .val.accent{color:var(--greenDark);}
.kpi .val.danger{color:var(--warn);}
.kpi .val.ok{color:var(--ok);}

/* --- Hinweise --- */
.note{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;line-height:1.5;}
.note.warn{background:var(--warnSoft);border:1px solid var(--warn);color:var(--warn);}
.note.ok{background:var(--okSoft);border:1px solid var(--ok);color:var(--ok);}
.note.info{background:var(--blueSoft);border:1px solid var(--blue);color:var(--blue);}
.note.lock{background:var(--blueSoft);border:1px solid var(--blue);color:var(--blue);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.note.lock .hash{background:rgba(0,40,116,.1);padding:2px 6px;border-radius:4px;}
.flash{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:14px;border:1px solid;}
.f-ok{background:var(--okSoft);border-color:var(--ok);color:var(--ok);}
.f-err{background:var(--warnSoft);border-color:var(--warn);color:var(--warn);}
.f-warn{background:#fff8dc;border-color:#d4b020;color:#8a6d00;}

/* --- Kette --- */
.chain{display:flex;align-items:stretch;overflow-x:auto;padding:8px 4px;}
.node{min-width:150px;max-width:185px;border:1.5px solid var(--blue);border-radius:10px;
  padding:10px 12px;background:#fff;}
.node .typ{font-size:10px;font-weight:700;text-transform:uppercase;margin-bottom:4px;color:var(--blue);}
.node .nm{font-size:13px;font-weight:600;margin-bottom:6px;}
.node .mt{font-size:11px;color:var(--muted);margin:0;}
.node.k-bearb{border-color:var(--blue);} .node.k-bearb .typ{color:var(--blue);}
.node.k-entsch{border-color:var(--greenDark);} .node.k-entsch .typ{color:var(--greenDark);}
.node.k-pruef{border-color:#5b7fd1;} .node.k-pruef .typ{color:#5b7fd1;}
.node.k-warte{border-color:#9aa5b1;} .node.k-warte .typ{color:#9aa5b1;}
.node.k-rueck{border-color:var(--amber);} .node.k-rueck .typ{color:var(--amber);}
.node.k-trans{border-color:#8a72c9;} .node.k-trans .typ{color:#8a72c9;}
.node.k-neu{border-color:var(--greenDark);background:var(--okSoft);} .node.k-neu .typ{color:var(--greenDark);}
.arrow{display:flex;align-items:center;color:var(--line);font-size:22px;padding:0 4px;}

/* --- Soll-Reiter --- */
.sollcard .istzeile{font-size:12px;color:var(--muted);margin:4px 0 12px;}
.fitbox{background:var(--bg);border-radius:8px;padding:12px;margin-top:10px;}
.fitbox .ttl{font-size:12px;font-weight:700;color:var(--blue);margin-bottom:8px;}
.verdict{margin-top:8px;font-size:12px;font-weight:700;}
.verdict.t-leer{color:#9aa5b1;} .verdict.t-warn{color:var(--warn);}
.verdict.t-amber{color:var(--amber);} .verdict.t-ok{color:var(--ok);}

/* --- Ergebnisblatt --- */
.ergtitel{font-weight:700;color:var(--blue);font-size:18px;margin-bottom:2px;}
.ergsub{font-size:13px;color:var(--muted);margin-bottom:16px;}
table.erg{width:100%;border-collapse:collapse;font-size:14px;}
table.erg td{padding:9px 0;border-bottom:1px solid var(--line);color:#566573;}
table.erg td.r{text-align:right;font-weight:500;color:var(--ink);}
table.erg td.r.strong{font-weight:700;color:var(--greenDark);}
.meas{padding:10px 0;border-bottom:1px solid var(--line);}
.meas:last-child{border-bottom:none;}
.meas .top{display:flex;justify-content:space-between;gap:12px;}
.meas .nm{font-weight:600;}
.mnote{font-size:13px;color:#566573;margin-top:4px;}
.mfit{font-size:12px;color:var(--amber);margin-top:4px;}
.actlabel{font-size:12px;font-weight:700;white-space:nowrap;}
.actlabel.a-w{color:var(--warn);} .actlabel.a-m{color:#9aa5b1;} .actlabel.a-g{color:var(--greenDark);}
.pruefliste{margin:0;padding-left:18px;font-size:13px;line-height:1.7;}
.pruefliste.blocker li{color:var(--warn);} .pruefliste.hinweis li{color:var(--amber);}
.fgtext{font-size:13px;color:#566573;}
.fgbtn{display:flex;align-items:flex-end;}
.dangerzone{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:12px;padding:14px 18px;margin-top:20px;}
.dangerzone p{margin:3px 0 0;font-size:12px;color:var(--muted);}

/* --- Versionen --- */
.vtbl{width:100%;border-collapse:collapse;font-size:13px;}
.vtbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:0 10px 8px 0;border-bottom:1px solid var(--line);}
.vtbl td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.vtbl tr.on{background:var(--blueSoft);}
.vtbl .wer{font-size:11px;color:var(--muted);}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;}
.b-frei{background:var(--okSoft);color:var(--ok);}
.b-entwurf{background:var(--bg);color:var(--muted);border:1px solid var(--line);}
.b-pruefung{background:var(--blueSoft);color:var(--blue);}
.b-alt{background:var(--bg);color:#9aa5b1;border:1px solid var(--line);}
.b-warn{background:var(--warnSoft);color:var(--warn);}
.b-kritis{background:var(--warnSoft);color:var(--warn);}
.b-soll{background:var(--blueSoft);color:var(--blue);}

/* --- Prozessübersicht --- */
.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
.filterbar input,.filterbar select{width:auto;min-width:200px;}
.grouphead{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:22px 0 8px;font-weight:700;}
.grouphead .count{background:var(--line);color:var(--muted);border-radius:20px;padding:1px 8px;
  margin-left:6px;letter-spacing:0;}
.plist{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.prow{display:grid;grid-template-columns:2.4fr 1.1fr 1fr .8fr 1.4fr;gap:12px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;text-decoration:none;color:inherit;}
.prow:last-child{border-bottom:none;}
a.prow:hover{background:var(--blueSoft);}
.prow.phead{background:var(--bg);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:700;}
.prow.arch{opacity:.55;}
.pname strong{display:block;}
.pname em{font-style:normal;font-size:11px;color:var(--muted);}
.stand{display:flex;gap:4px;flex-wrap:wrap;}
.empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:36px 24px;text-align:center;}
.empty h2{color:var(--blue);font-size:18px;margin:0 0 6px;}
.empty p{color:var(--muted);font-size:14px;max-width:56ch;margin:0 auto 14px;}
.pos{color:var(--greenDark);font-weight:700;} .weak{color:var(--amber);font-weight:700;}
.tinynote{color:var(--muted);font-size:12px;line-height:1.6;margin-top:14px;}
.sub{color:var(--muted);font-size:13px;margin:0 0 12px;}
.mono{font-family:ui-monospace,monospace;font-size:12px;}
.diff summary{font-size:11px;color:var(--blue);cursor:pointer;}
.dline{display:flex;gap:6px;font-size:11px;padding:2px 0;flex-wrap:wrap;}
.dline s{color:var(--warn);} .dline ins{color:var(--greenDark);text-decoration:none;}
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{text-align:left;color:var(--muted);padding:6px 12px 6px 0;vertical-align:top;white-space:nowrap;}
.tbl td{padding:6px 0;border-bottom:1px solid var(--line);}
.checklist{margin:0;padding-left:18px;font-size:13px;line-height:1.7;}
.checklist li.blocker{color:var(--warn);} .checklist li.hinweis{color:var(--amber);}
.snap{background:var(--ink);color:#dbe3ee;padding:14px;border-radius:8px;font-family:ui-monospace,monospace;
  font-size:11px;line-height:1.6;overflow:auto;max-height:460px;}

/* --- Dialoge --- */
.dlg{border:none;border-radius:12px;padding:22px;max-width:560px;width:calc(100% - 32px);
  box-shadow:0 12px 48px rgba(0,0,0,.22);}
.dlg::backdrop{background:rgba(31,41,51,.42);}
.dlgh{margin:0 0 6px;}
.dlgsub{font-size:13px;color:var(--muted);}
.dlgfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}

/* --- Einrichtung und Anmeldung --- */
.setupbox,.loginbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px;
  max-width:520px;width:100%;}
.loginbox{max-width:400px;}
.setuplogo{height:40px;margin-bottom:16px;}
.setupbox h1,.loginbox h1{font-size:22px;margin-bottom:6px;}
.setupbox h2{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:14px 0 0;}
.setuplist{margin:0 0 16px;padding-left:18px;font-size:13px;line-height:1.8;color:#566573;}
.warnbox{background:#fff8dc;border:1px solid #d4b020;border-radius:8px;padding:13px 16px;
  font-size:13px;color:#8a6d00;margin-top:16px;}
.warnbox ol{margin:7px 0 0;padding-left:18px;line-height:1.8;}
.stack{display:flex;flex-direction:column;gap:12px;}

/* --- Schmale Bildschirme --- */
@media (max-width:700px){
  header{padding:10px 14px;gap:10px;}
  .logoph{height:32px;} .htitle{font-size:14px;} .hsub{font-size:11px;}
  .mainnav{order:3;width:100%;margin-left:0;overflow-x:auto;}
  .mainnav a{padding:7px 10px;font-size:12px;}
  .userbox{margin-left:auto;} .urole{display:none;}
  .purpose{padding:10px 14px;font-size:12px;}
  .wrap{padding:16px 14px 50px;}
  .tabs{gap:4px;} .tab{padding:8px 10px;font-size:12px;flex:1 1 auto;text-align:center;}
  .tabsep{display:none;}
  .grid2{grid-template-columns:1fr;gap:10px;}
  .prow{grid-template-columns:1fr;gap:3px;}
  .prow.phead{display:none;}
  .dangerzone{flex-direction:column;align-items:flex-start;}
  .filterbar input,.filterbar select{min-width:0;width:100%;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}
@media print{
  header,.purpose,.tabs,.savebar,.toolbtn,.stagebar,.appfoot,.crumb,.vpicker,.addbtn,.dangerzone{display:none!important;}
  body{background:#fff;} .card{break-inside:avoid;border-color:#ccc;}
}

/* --- Export --- */
.exportbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
@media print{.exportbar{display:none;}}

/* =========================================================
   Wizard
   ========================================================= */
.wizard .wizhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;}
.wizsteps{display:flex;align-items:center;gap:4px;}
.wizdot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:#fff;flex:none;}
.wizdot.on{border-color:var(--blue);color:var(--blue);}
.wizdot.done{border-color:var(--green);background:var(--green);color:#fff;}
.wizline{width:26px;height:2px;background:var(--line);flex:none;}
.wizline.done{background:var(--green);}
.wizlead{color:var(--muted);font-size:14px;margin:0 0 18px;line-height:1.55;}
.wizrow{display:grid;grid-template-columns:26px 1fr 160px 1fr 1fr 34px;gap:8px;align-items:center;margin-bottom:8px;}
.wizrownr{color:var(--muted);font-weight:700;text-align:center;font-size:13px;}
.wizrow input,.wizrow select{width:100%;}
.addbtn{margin-top:6px;background:none;border:1px dashed var(--line);color:var(--blue);
  border-radius:7px;padding:8px 12px;font-weight:600;cursor:pointer;font-size:13px;width:100%;}
.addbtn:hover{border-color:var(--blue);}
.wizzeit{border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:12px;}
.wizzeit-kopf{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.wizzeit-kopf em{color:var(--muted);font-style:normal;font-size:12px;}
.wizsteplist{margin-top:12px;}
.wizsteprow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.wizsteprow em{color:var(--muted);font-style:normal;font-size:12px;}
.wizfoot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px;}
.mini{border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 9px;cursor:pointer;color:var(--muted);font-size:13px;}
.mini.danger:hover{border-color:var(--warn);color:var(--warn);}
@media (max-width:760px){
  .wizrow{grid-template-columns:22px 1fr 34px;grid-auto-flow:row;}
  .wizrow select,.wizrow input[name="rolle[]"],.wizrow input[name="system[]"]{grid-column:2 / 4;}
}

/* =========================================================
   Interviewmodus
   ========================================================= */
.ivbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.ivtrack{flex:1;height:8px;background:var(--line);border-radius:5px;overflow:hidden;}
.ivfill{height:100%;background:var(--green);width:0;transition:width .25s ease;}
.ivzaehler{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:600;}
.ivcard{animation:ivfade .25s ease;}
@keyframes ivfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.ivnr{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--green);font-weight:700;margin-bottom:12px;}
.ivfrage{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ivchecks{display:flex;flex-direction:column;gap:8px;justify-content:center;}
.ivfoot{display:flex;justify-content:space-between;gap:12px;margin-top:16px;}
.ivfoot .toolbtn{min-width:120px;text-align:center;}
@media (max-width:760px){.ivfrage{grid-template-columns:1fr;}}

/* =========================================================
   BPMN
   ========================================================= */
.bpmn-switch{display:flex;gap:4px;}
.bpmn-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;}
.bpmn-canvas{height:min(70vh,620px);border:1px solid var(--line);border-radius:10px;background:#fff;
  background-image:radial-gradient(#eef1f4 1px,transparent 1px);background-size:18px 18px;}
.bpmn-canvas .djs-palette{display:none;}
@media (max-width:760px){.bpmn-canvas{height:60vh;}}

/* =========================================================
   Landkarte
   ========================================================= */
.lk-legende{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font-size:12px;color:var(--muted);}
.lk-leg{display:flex;align-items:center;gap:6px;}
.lk-swatch{width:22px;height:3px;border-radius:2px;display:inline-block;}
.lk-loest_aus .lk-swatch{background:#002874;}
.lk-liefert_an .lk-swatch{background:#8fae0c;}
.lk-teil_von .lk-swatch{background:#8a72c9;}
.lk-nutzt .lk-swatch{background:#d98324;}
.lk-canvas{height:min(68vh,560px);border:1px solid var(--line);border-radius:10px;background:#fff;
  background-image:radial-gradient(#eef1f4 1px,transparent 1px);background-size:20px 20px;}
.lk-hint{margin-top:6px;}
.lk-tbl td{vertical-align:middle;}
.lk-badge{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap;}
.lk-badge.lk-loest_aus{background:#002874;}
.lk-badge.lk-liefert_an{background:#8fae0c;}
.lk-badge.lk-teil_von{background:#8a72c9;}
.lk-badge.lk-nutzt{background:#d98324;}
.lk-bem{color:var(--muted);font-size:13px;}
.lk-form{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;}
@media (max-width:760px){.lk-form{grid-template-columns:1fr;}.lk-canvas{height:56vh;}}

.ivhinweis{background:var(--blueSoft);border:1px solid var(--line);border-radius:9px;
  padding:11px 14px;font-size:13px;color:var(--blue);margin-bottom:14px;}

/* =========================================================
   KGSt-Prozessbibliothek
   ========================================================= */
.kgst-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 16px;}
.kgst-filter input[type="search"]{flex:1;min-width:200px;}
.kgst-filter select{min-width:150px;}
.kgst-zaehler{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;margin-left:auto;}
.kgst-liste{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff;}
.kgst-zeile{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:background .12s;}
.kgst-zeile:last-child{border-bottom:none;}
.kgst-zeile:hover{background:var(--blueSoft);}
.kgst-zeile-haupt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.kgst-zeile-titel{font-weight:600;color:var(--blue);font-size:14px;line-height:1.3;}
.kgst-zeile-meta{font-size:12px;color:var(--muted);}
.kgst-art{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11px;font-weight:700;letter-spacing:.03em;flex:none;}
.kgst-soll{background:var(--blueSoft);color:var(--blue);}
.kgst-ist{background:#fff4e5;color:#9a5b00;}
.kgst-leer{padding:22px;text-align:center;color:var(--muted);font-size:14px;
  border:1px dashed var(--line);border-radius:11px;margin-top:12px;}
.kgst-beschreibung{font-size:14px;line-height:1.6;color:var(--ink);}
@media (max-width:760px){
  .kgst-filter{flex-direction:column;align-items:stretch;}
  .kgst-filter input[type="search"],.kgst-filter select{width:100%;}
  .kgst-zaehler{margin-left:0;}
}

/* KGSt: Produkt in Zeile + Faktenblock in Detailansicht */
.kgst-zeile-produkt{font-size:12px;color:var(--greenDark);font-weight:600;}
.kgst-fakten{display:flex;flex-wrap:wrap;gap:10px 28px;margin:2px 0 16px;padding:12px 15px;
  background:var(--blueSoft);border-radius:9px;font-size:13px;}
.kgst-fakten>div{display:flex;flex-direction:column;gap:1px;}
.kgst-fakt-label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;}

/* =========================================================
   Feinschliff: ruhigere Flächen, klarere Hierarchie
   (steht bewusst am Ende und übersteuert die Grundregeln)
   ========================================================= */

h1{font-size:25px;letter-spacing:-.2px;line-height:1.2;}
h3{font-size:15px;margin:28px 0 12px;letter-spacing:.1px;}

.pagehead{margin-bottom:6px;}
.sub{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:78ch;margin:0 0 20px;}
.crumb{font-size:12px;color:var(--muted);margin-bottom:10px;}

/* Karten bekommen Luft und eine weichere Kante */
.card{border-radius:12px;padding:22px 24px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);}

/* Abschnittsüberschrift innerhalb einer Karte */
.section-heading,.grouphead{font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.4px;margin:0 0 16px;}

/* Formularfelder: Label klein und ruhig, Feld mit sichtbarem Fokus */
label.field{margin-bottom:16px;}
label.field>span{font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.9px;margin-bottom:7px;}
label.field>em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45;}
input,select,textarea{padding:10px 12px;border-radius:8px;border:1px solid var(--line-strong);
  font-size:14.5px;transition:border-color .12s,box-shadow .12s;}
input:hover,select:hover,textarea:hover{border-color:#b9c3d0;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,40,116,.11);}
.grid2{gap:16px 20px;margin-bottom:0;}

/* Knöpfe: etwas mehr Körper, klarer Vorrang */
.toolbtn{padding:9px 15px;border-radius:8px;border:1px solid var(--line-strong);
  font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;line-height:1.3;
  transition:border-color .12s,background .12s,box-shadow .12s;}
.toolbtn:hover{border-color:var(--blue);background:var(--blueSoft);}
.toolbtn.primary{background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 1px 3px rgba(0,40,116,.22);}
.toolbtn.primary:hover{background:#00205e;border-color:#00205e;}
.toolbtn.danger:hover{background:var(--warnSoft);}

/* Reiter */
.tab{padding:9px 15px;border-radius:8px;font-size:13.5px;font-weight:600;}
.tab.active,.tab.on{background:var(--blue);color:#fff;border-color:var(--blue);}

/* Tabellen etwas luftiger */
.tbl{font-size:13.5px;}
.tbl th{padding:8px 14px 8px 0;font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;}
.tbl td{padding:9px 0;}

/* Leerzustand */
.empty{border-radius:12px;padding:44px 24px;border-color:var(--line-strong);}
.empty p{line-height:1.6;margin-bottom:18px;}

/* Meldungen */
.flash{border-radius:9px;padding:11px 15px;font-size:13.5px;margin-bottom:16px;}

/* =========================================================
   Schmale Geräte: Sidebar wird zur Schublade
   ========================================================= */
@media (max-width:900px){
  .hamburger{display:flex;}
  .sidebar{position:fixed;left:calc(-1 * var(--sidebar-w) - 20px);top:0;height:100vh;
    z-index:999;transition:left .28s ease;box-shadow:2px 0 14px rgba(0,0,0,.12);}
  .sidebar.auf{left:0;}
  .navschatten.auf{display:block;}
  .content{padding:62px 18px 48px;max-width:none;}
  .pagehead{margin-top:4px;}
  .card{padding:18px 16px;}
  .grid2{grid-template-columns:1fr;}
}

/* Abstände, die nicht allein auf flex-gap bauen (ältere Renderer, Druck) */
.sbrand img{margin-right:11px;flex:none;}
.sbrand>span{min-width:0;}
.appfoot>span{margin-right:14px;}
.sitem .sicon{margin-right:2px;}

/* BPMN-Editor */
.bpmn-canvas.modeller{height:min(74vh,700px);}
.bpmn-canvas.modeller .djs-palette{display:block;}
.bpmn-canvas.nurlesen .djs-palette,.bpmn-canvas.nurlesen .djs-context-pad{display:none;}
.verborgen{display:none;}
.mstatus{margin-top:10px;font-size:12.5px;color:var(--muted);font-weight:600;}
.mstatus.offen{color:var(--amber);}
.mstatus.fehler{color:var(--warn);}
/* Beschreibungen aus der Bibliothek haben echte Absätze */
.kgst-beschreibung{white-space:pre-line;}

/* Gefahrenzone: endgültiges Löschen */
.gefahrzone{border-color:#f0c4bf;background:#fffaf9;}
.gefahrzone h3{color:var(--warn);}
.loeschliste{margin:0 0 14px;padding-left:20px;font-size:13.5px;color:var(--ink-soft);line-height:1.7;}
.loeschliste b{color:var(--ink);}

/* Schwebende Knöpfe: zurück und nach oben */
.schwebeknoepfe{position:fixed;right:22px;bottom:22px;z-index:900;
  display:flex;flex-direction:column;gap:10px;align-items:center;}
.rundknopf{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--paper);color:var(--blue);font-size:20px;line-height:1;cursor:pointer;
  box-shadow:0 2px 10px rgba(16,24,40,.14);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s,opacity .18s,transform .18s;}
.rundknopf:hover{background:var(--blueSoft);border-color:var(--blue);}
.nachoben{opacity:0;transform:translateY(8px);}
.nachoben.sichtbar{opacity:1;transform:none;}
@media (max-width:900px){
  .schwebeknoepfe{right:14px;bottom:14px;gap:8px;}
  .rundknopf{width:44px;height:44px;}
}

.leerfilter{padding:22px;text-align:center;color:var(--muted);font-size:14px;
  border:1px dashed var(--line-strong);border-radius:11px;margin-bottom:16px;}

/* =========================================================
   Kachel-Variante der Analyse (Label / Wert / Zusatz)
   Diese Kacheln nutzen .kl, <b> und <em> statt .lbl/.val.
   Ohne eigene Regeln liefen sie in einer Zeile zusammen.
   ========================================================= */
.kpi .kl{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;}
.kpi>b{display:block;font-size:22px;font-weight:700;color:var(--blue);line-height:1.15;}
.kpi>em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:4px;}
.kpi.good>b{color:var(--greenDark);}
.kpi{min-width:190px;}

/* =========================================================
   Silbentrennung: deutsche Komposita sprengen sonst jedes Kästchen
   ========================================================= */
.node .nm,
.prow .pname b,
.prow .pname em,
.kgst-zeile-titel,
.kgst-zeile-produkt,
.grouphead,
.wizsteprow b,
.ivnr,
.card h3,
.lk-tbl td,
.tbl td{
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
  word-break:normal;
}
h1,h2,h3,.kpi>b,.kpi .kl,.kpi>em{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
.node{max-width:200px;}

/* Suche */
.suchform{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.suchform input[type="search"]{flex:1;min-width:220px;font-size:15px;padding:11px 14px;}
.trefferliste{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;
  overflow:hidden;background:#fff;margin-bottom:8px;}
.treffer{display:flex;flex-direction:column;gap:3px;padding:12px 15px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:background .12s;}
.treffer:last-child{border-bottom:none;}
.treffer:hover{background:var(--blueSoft);}
.tr-titel{font-weight:600;color:var(--blue);font-size:14px;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
.tr-meta{font-size:12px;color:var(--muted);}
.tr-text{font-size:13px;color:var(--ink-soft);line-height:1.5;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
mark{background:#fdf3c8;color:inherit;padding:0 2px;border-radius:3px;}
h3 .count{display:inline-block;background:var(--blueSoft);color:var(--blue);border-radius:11px;
  padding:1px 9px;font-size:11px;font-weight:700;margin-left:6px;vertical-align:middle;}

/* =========================================================
   Wissensmanagement
   ========================================================= */
.wm-text{white-space:pre-line;font-size:14px;line-height:1.7;color:var(--ink);}
.wm-liste{display:flex;flex-direction:column;gap:2px;}
.wm-zeile{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.wm-zeile:last-child{border-bottom:none;}
.wm-zeile.vorschlag{opacity:.92;}
.wm-titel{font-weight:600;color:var(--blue);text-decoration:none;flex:1;min-width:0;}
.wm-titel:hover{text-decoration:underline;}
.wm-schlag{font-size:12px;color:var(--muted);}
.wm-liste.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.wm-karte{display:flex;flex-direction:column;gap:7px;padding:16px;border:1px solid var(--line);
  border-radius:11px;background:#fff;text-decoration:none;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;}
.wm-karte:hover{border-color:var(--blue);box-shadow:0 3px 12px rgba(0,40,116,.08);}
.wm-karte h4{margin:0;color:var(--blue);font-size:15px;line-height:1.3;}
.wm-karte-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.wm-fund{font-size:11px;color:var(--muted);white-space:nowrap;}
.wm-teaser{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0;}
.wm-schlagliste{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.wm-tag{font-size:12px;background:var(--blueSoft);color:var(--blue);padding:3px 10px;border-radius:11px;font-weight:600;}
.wissenknopf{text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}

/* Stände und Risikostufen */
.badge.status-gueltig{background:var(--okSoft);color:var(--ok);}
.badge.status-entwurf{background:var(--blueSoft);color:var(--blue);}
.badge.status-veraltet{background:#f1f3f5;color:var(--muted);}
.badge.stufe-sicher{background:var(--okSoft);color:var(--ok);}
.badge.stufe-kann{background:var(--blueSoft);color:var(--blue);}
.badge.stufe-kennt{background:#f1f3f5;color:var(--muted);}
.badge.risiko-offen{background:#f1f3f5;color:var(--muted);}
.badge.risiko-hoch{background:var(--warnSoft);color:var(--warn);}
.badge.risiko-mittel{background:#fff4e5;color:#9a5b00;}
.badge.risiko-ok{background:var(--okSoft);color:var(--ok);}

/* Gesprächsaufnahme */
.gesmarke{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;
  background:var(--okSoft);color:var(--ok);font-size:10px;font-weight:700;
  text-transform:none;letter-spacing:0;cursor:help;vertical-align:middle;}
.gesweg{margin:0;font-size:12px;color:var(--muted);}
.gesweg input{accent-color:var(--warn);}

/* =========================================================
   Kennzahlen-Kacheln: Beschriftung über die Zahl
   (.lbl und .val sind Spans und brauchen Blockdarstellung,
    sonst kleben Text und Zahl aneinander)
   ========================================================= */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px;}
.kpi{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:16px 18px;min-width:0;
  box-shadow:0 1px 2px rgba(16,24,40,.04);}
.kpi .lbl{display:block;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.7px;line-height:1.35;margin-bottom:6px;}
.kpi .val{display:block;font-size:28px;font-weight:700;color:var(--blue);line-height:1.1;
  font-variant-numeric:tabular-nums;}

/* Leerzustand etwas kompakter, damit er nicht die halbe Seite füllt */
.empty{padding:34px 24px;}
.empty h2{font-size:17px;}

@media (max-width:760px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
  .kpi{padding:13px 14px;}
  .kpi .val{font-size:24px;}
}

/* =========================================================
   hidden muss gewinnen.
   Die Browserregel [hidden]{display:none} ist nur eine
   Typselektor-Regel und verliert gegen jede Klasse mit
   display. Deshalb hier ausdruecklich - sonst blenden
   Filter Zeilen aus, die trotzdem stehen bleiben.
   ========================================================= */
[hidden]{display:none !important;}

/* =========================================================
   Kopfleiste oben rechts: Zurück, auf schmalen Geräten
   daneben das Menü. Die Schublade kommt dann ebenfalls von
   rechts, damit Knopf und Bewegung zusammenpassen.
   ========================================================= */
.kopfknoepfe{position:fixed;top:14px;right:18px;z-index:1000;display:flex;gap:8px;align-items:center;}
.kopfknoepfe .rundknopf{width:42px;height:42px;font-size:18px;}

.hamburger{display:none;position:static;width:42px;height:42px;
  border:1px solid var(--line-strong);background:var(--paper);border-radius:50%;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:4px;
  box-shadow:0 2px 10px rgba(16,24,40,.14);}
.hamburger:hover{background:var(--blueSoft);border-color:var(--blue);}

/* Inhalt bekommt oben rechts Platz, damit nichts unter den Knöpfen liegt */
.content{padding-right:80px;}

/* unten rechts bleibt nur der Pfeil nach oben */
.schwebeknoepfe{bottom:22px;}

@media (max-width:900px){
  .hamburger{display:flex;}
  .kopfknoepfe{top:10px;right:12px;}
  /* Schublade von rechts */
  .sidebar{left:auto;right:calc(-1 * var(--sidebar-w) - 20px);
    transition:right .28s ease;box-shadow:-2px 0 14px rgba(0,0,0,.12);}
  .sidebar.auf{left:auto;right:0;}
  .content{padding:70px 18px 48px;}
}

/* =========================================================
   Wissensseiten: ruhiger und dichter
   ========================================================= */

/* Leerzustand innerhalb einer Karte: sichtbar als solcher,
   statt als blasser Satz im leeren Raum */
.wm-leer{margin:0;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:9px;
  background:#fbfcfd;color:var(--muted);font-size:13.5px;line-height:1.55;}

/* Trennlinie zwischen Bestand und Eingabeformular */
.wm-trenner{margin:20px 0 12px;padding-top:18px;border-top:1px solid var(--line);}
.card>.wm-trenner:first-child{margin-top:0;padding-top:0;border-top:none;}

/* Formulare in den Wissenskarten: gleichmäßige Spalten statt 1fr auto 1fr */
.wm-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px;align-items:start;}
.wm-form>label.field{margin-bottom:0;}
.wm-form .wm-formfuss{grid-column:1 / -1;display:flex;justify-content:flex-end;margin-top:2px;}
.wm-form input[type="file"]{padding:8px 10px;font-size:13px;}

.wm-fussnote{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);line-height:1.5;}

/* Kennzeichen im Seitenkopf etwas kräftiger */
.badge.gross{font-size:12px;padding:5px 13px;border-radius:13px;}

/* Tabellen in den Wissenskarten enger an den Rand */
.card>.tbl{margin-top:2px;}

@media (max-width:760px){
  .wm-form{grid-template-columns:1fr;gap:12px;}
  .wm-form .wm-formfuss{justify-content:stretch;}
  .wm-form .wm-formfuss .toolbtn{width:100%;justify-content:center;}
}

/* Artikelzeilen: Titel darf schrumpfen, Knopf bleibt ganz sichtbar */
.wm-zeile{flex-wrap:wrap;gap:8px 12px;}
.wm-titel{flex:1 1 240px;min-width:0;overflow-wrap:anywhere;}
.wm-zeile .wm-schlag{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.wm-zeile form{flex:0 0 auto;margin-left:auto;}
.wm-zeile .badge{flex:0 0 auto;}
.wm-zeile .mini{white-space:nowrap;}

/* Artikelzeile als festes Raster: Titel links, Kennzeichen und Knopf
   rechts, beide immer vollständig sichtbar. */
.wm-zeile{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px 12px;}
.wm-zeile .wm-titel{grid-column:1;}
.wm-zeile .wm-schlag{grid-column:1;grid-row:2;font-size:11.5px;}
.wm-zeile .badge{grid-column:2;grid-row:1;}
.wm-zeile form{grid-column:3;grid-row:1;margin-left:0;}
@media (max-width:600px){
  .wm-zeile{grid-template-columns:1fr auto;}
  .wm-zeile form{grid-column:2;grid-row:2;justify-self:end;}
}

/* =========================================================
   Luft um Überschriften.
   Die gemeinsame Regel für .section-heading und .grouphead
   hatte margin-top 0 gesetzt. Innerhalb einer Karte ist das
   richtig, zwischen zwei Listen aber klebt die Überschrift
   dann an der Tabelle darüber.
   ========================================================= */

/* Gruppenüberschriften über Listen: deutlich abgesetzt */
.grouphead{margin:38px 0 14px;}
.group:first-of-type .grouphead{margin-top:26px;}
.group{margin-bottom:8px;}
.group + .group{margin-top:0;}

/* Zwischenüberschriften auf der Seite */
h3{margin:40px 0 14px;}
h3:first-child{margin-top:6px;}

/* Abschnittsüberschrift innerhalb einer Karte bleibt eng am Karteninhalt */
.card > .section-heading{margin:0 0 14px;}
.card > .section-heading.wm-trenner{margin:22px 0 14px;}

/* Nach einer Karte oder Tabelle nicht direkt die nächste Überschrift */
.card + h3, .plist + h3, .tbl + h3{margin-top:42px;}

@media (max-width:760px){
  .grouphead{margin:28px 0 12px;}
  h3{margin:30px 0 12px;}
  .card + h3, .plist + h3, .tbl + h3{margin-top:32px;}
}

/* =========================================================
   Werkstatt-Ranking
   ========================================================= */
.tbl th.r, .tbl td.r{text-align:right;}
.tbl td.r.gut{color:var(--greenDark);font-weight:700;}
.wk-tbl td{vertical-align:top;}
.wk-tbl td b{color:var(--blue);}
.wk-summe{float:right;font-size:13px;font-weight:700;color:var(--greenDark);}
.badge.wk-mb{background:#fff4e5;color:#9a5b00;margin-left:8px;font-size:10.5px;}
.kpi .val.wk-klein{font-size:17px;line-height:1.3;}
@media (max-width:760px){
  .wk-summe{float:none;display:block;margin-top:4px;}
  .wk-tbl{font-size:12.5px;}
}

/* Ergebnisblatt: Blocküberschrift über der Kennzahlentabelle */
.ergblock{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:1.4px;margin:22px 0 8px;}
.ergblock:first-child{margin-top:4px;}

/* Prüfliste der BPMN-Diagnose */
.pruefliste{margin:0;padding-left:22px;font-size:14px;line-height:1.9;}
.pruefliste .pstatus{font-weight:700;margin-left:6px;}
.pruefliste li.p-ok .pstatus{color:var(--ok);}
.pruefliste li.p-fehler .pstatus{color:var(--warn);}
.pruefliste li.p-warn .pstatus{color:var(--amber);}

/* =========================================================
   Verbund aus Teilprozessen
   ========================================================= */
.vb-teil{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
.vb-teil:last-of-type{border-bottom:none;}
.vb-teil.extern{opacity:.95;}
.vb-nr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blueSoft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.vb-teil.extern .vb-nr{background:#fff4e5;color:#9a5b00;}
.vb-haupt{flex:1;min-width:0;}
.vb-haupt a{text-decoration:none;color:var(--blue);}
.vb-haupt a:hover{text-decoration:underline;}
.vb-meta{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
.warnhinweis{color:var(--amber);font-weight:600;}
.vb-uebergabe{margin:0 0 4px 38px;padding:10px 14px;border-left:3px solid var(--line-strong);
  background:#fafbfc;font-size:12.5px;color:var(--ink-soft);line-height:1.55;border-radius:0 8px 8px 0;}
.vb-uebergabe.extern{border-left-color:var(--amber);background:#fffaf3;}
.vb-sort{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.vb-sort label.field{margin-bottom:0;}
.tbl tfoot td{padding-top:10px;border-top:2px solid var(--line-strong);}

/* =========================================================
   Geführtes Gespräch
   ========================================================= */
.gespraech{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;max-width:760px;}
.gs-zeile{display:flex;}
.gs-zeile.ich{justify-content:flex-end;}
.gs-blase{max-width:82%;padding:11px 16px;border-radius:15px;font-size:14px;line-height:1.55;}
.gs-blase.werkzeug{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink);}
.gs-blase.ich{background:var(--blue);color:#fff;border-bottom-right-radius:5px;}
.gs-blase.ich.unsicher{background:#eef1f5;color:var(--muted);font-style:italic;}
/* Rückmeldungen des Werkzeugs sind ruhiger als die Fragen */
.gs-blase.ton-still{background:#f7f9fb;border-color:transparent;color:var(--muted);font-size:13px;}
.gs-blase.ton-schritt{background:var(--okSoft);border-color:transparent;color:var(--ok);font-size:13px;font-weight:600;}
.gs-blase.ton-nachhaken{background:#fff4e5;border-color:#e8d5a8;color:#9a5b00;}

.gs-frage{border-color:var(--blue);box-shadow:0 3px 16px rgba(0,40,116,.09);}
.gs-fortschritt{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:1.3px;margin-bottom:10px;}
.gs-frage-text{margin:0 0 6px;font-size:19px;color:var(--blue);line-height:1.35;}
.gs-hilfe{margin:0 0 14px;font-size:13px;color:var(--ink-soft);line-height:1.55;}
.gs-frage textarea{width:100%;font-size:15px;line-height:1.6;}
.gs-knoepfe{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px;}
.gs-liste{margin:8px 0 0;padding-left:22px;font-size:13.5px;line-height:1.8;}
.gs-liste .wer{display:block;font-size:12px;}

@media (max-width:700px){
  .gs-blase{max-width:92%;}
  .gs-frage-text{font-size:17px;}
  .gs-knoepfe{justify-content:stretch;}
  .gs-knoepfe .toolbtn{flex:1;justify-content:center;}
}

/* Organigramm-Vorschau */
.og-tbl input[type="text"], .og-tbl input:not([type]){width:100%;}
.og-baum{white-space:nowrap;font-size:12px;color:var(--muted);}
.og-strich{display:inline-block;width:14px;border-left:1px solid var(--line-strong);height:14px;
  margin-right:2px;vertical-align:middle;}
.og-roh{background:#f7f9fb;border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font-size:12px;line-height:1.6;max-height:320px;overflow:auto;white-space:pre-wrap;}

/* Abhängigkeiten in der Schrittkarte */
.abh-block > summary{color:var(--blue);}
.abh-liste{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px;}
.abh-zeile{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;
  padding:7px 11px;background:#f7f9fb;border-radius:8px;}
.abh-partner{font-weight:600;color:var(--ink);}
.abh-neu{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,2fr) minmax(140px,1fr) auto;
  gap:8px;align-items:center;margin-top:8px;}
.abh-neu select, .abh-neu input{font-size:13px;padding:7px 9px;}
@media (max-width:760px){ .abh-neu{grid-template-columns:1fr;} }

/* Gesamtablauf über alle Teilprozesse */
.ga-abschnitt{border:1px solid var(--line);border-radius:11px;background:#fff;margin-bottom:16px;overflow:hidden;}
.ga-abschnitt.extern{border-style:dashed;border-color:var(--amber);background:#fffaf3;}
.ga-kopf{padding:13px 18px;background:#f7f9fb;border-bottom:1px solid var(--line);}
.ga-abschnitt.extern .ga-kopf{background:transparent;border-bottom:none;}
.ga-kopf a{color:var(--blue);text-decoration:none;}
.ga-kopf a:hover{text-decoration:underline;}
.ga-meta{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
.ga-schritt{display:flex;gap:13px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:flex-start;}
.ga-schritt:last-child{border-bottom:none;}
.ga-nr{flex:none;width:25px;height:25px;border-radius:50%;background:var(--blueSoft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;}
.ga-inhalt{flex:1;min-width:0;}
.ga-inhalt .badge{margin-left:7px;}
.ga-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.ga-link{font-size:11.5px;background:var(--blueSoft);color:var(--blue);padding:3px 9px;border-radius:10px;}
.ga-link.parallel{background:var(--okSoft);color:var(--ok);}

/* Dateien in der Schrittkarte */
.dat-block > summary{color:var(--blue);}
.dat-liste{display:flex;flex-direction:column;gap:6px;margin:8px 0;}
.dat-liste:empty{display:none;}
.dat-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;
  padding:7px 11px;background:#f7f9fb;border-radius:8px;}
.dat-zeile a{color:var(--blue);font-weight:600;text-decoration:none;}
.dat-zeile a:hover{text-decoration:underline;}
.dat-zeile .wer{flex:1;min-width:0;}
.dat-neu{display:grid;grid-template-columns:minmax(150px,1fr) minmax(180px,1.4fr) auto;gap:8px;
  align-items:center;margin-top:8px;}
.dat-neu input{font-size:13px;padding:7px 9px;}
@media (max-width:760px){ .dat-neu{grid-template-columns:1fr;} }

/* =========================================================
   Knöpfe mit Wörtern statt Symbolen
   .mini ist 30x30 Pixel gross - passend fuer ein ✕, aber jedes
   Wort wird darin zerquetscht. Deshalb: Knoepfe mit Text
   bekommen ihre natuerliche Breite zurueck.
   ========================================================= */
.mini.wort, .wissenknopf, .dat-add, .abh-add, .dat-block .mini:not(.danger), .abh-block .mini:not(.danger){
  width:auto;height:auto;min-height:34px;padding:7px 15px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--blue);border-color:var(--line-strong);
  background:#fff;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  justify-content:center;cursor:pointer;}
.mini.wort:hover, .wissenknopf:hover, .dat-add:hover, .abh-add:hover{
  border-color:var(--blue);background:var(--blueSoft);}
.dat-add[disabled], .abh-add[disabled]{opacity:.55;cursor:default;}

/* Der Wissen-Knopf am Schritt: Wort und Zahl nebeneinander, nicht ineinander */
.wissenknopf{text-decoration:none;}
.wissenknopf .badge{margin:0;}

/* Symbol-Knoepfe bleiben quadratisch */
.mini.danger{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;flex:none;}

/* =========================================================
   Luft in den Zusatzblöcken.
   Vorher klebten Titel, Dateiwahl und Knopf aneinander, während
   alle anderen Formularfelder Abstand haben.
   ========================================================= */
.dat-neu, .abh-neu{display:flex;flex-direction:column;gap:14px;margin-top:14px;}
.dat-neu input, .abh-neu select, .abh-neu input{
  width:100%;padding:11px 13px;font-size:14px;border:1px solid var(--line-strong);
  border-radius:9px;background:#fff;}
.dat-neu input[type="file"]{padding:9px 12px;}
.dat-neu .dat-add, .abh-neu .abh-add{align-self:flex-start;min-width:150px;}

.dat-block, .abh-block{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.dat-block > summary, .abh-block > summary{margin-bottom:6px;}
.dat-block .tinynote, .abh-block .tinynote{margin-top:12px;line-height:1.6;}

@media (min-width:820px){
  /* Auf breiten Schirmen nebeneinander, aber mit echtem Abstand */
  .dat-neu{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:center;}
  .abh-neu{display:grid;grid-template-columns:minmax(150px,1fr) minmax(200px,1.6fr) minmax(150px,1fr) auto;
    gap:14px;align-items:center;}
  .dat-neu .dat-add, .abh-neu .abh-add{align-self:auto;min-width:0;}
}

/* Die Zeile einer Abhängigkeit: Marke, Schrittname, Bemerkung, Knopf
   brauchen sichtbaren Abstand voneinander. */
.abh-zeile{gap:6px 12px;padding:9px 13px;line-height:1.5;}
.abh-zeile .badge{flex:none;}
.abh-zeile .abh-partner{margin-right:2px;}
.abh-zeile .wer{font-style:italic;}
.abh-zeile .mini.danger{margin-left:auto;}
.dat-zeile .mini.danger{margin-left:auto;}

/* =========================================================
   Die drei aufklappbaren Blöcke am Schritt einheitlich:
   Dateien, Reihenfolge, Erfahrungswissen. Jeder mit Trennstrich
   darüber, gleichmäßig und knapper als zuvor.
   ========================================================= */
.step .dat-block,
.step .abh-block,
.step .wissen-block{margin-top:0;padding-top:11px;padding-bottom:11px;
  border-top:1px solid var(--line);}
.step .dat-block{margin-top:14px;}
.step .wissen-block{padding-bottom:0;}
.step .dat-block > summary,
.step .abh-block > summary,
.step .wissen-block > summary{margin-bottom:0;padding:2px 0;}
.step .dat-block[open] > summary,
.step .abh-block[open] > summary,
.step .wissen-block[open] > summary{margin-bottom:10px;}
/* Inhalt eines geöffneten Blocks nicht zusätzlich weit abgesetzt */
.step .dat-block .dat-neu,
.step .abh-block .abh-neu{margin-top:10px;}
.step .dat-block .tinynote,
.step .abh-block .tinynote{margin-top:10px;margin-bottom:2px;}

/* =========================================================
   Trennlinien zwischen den drei Zusatzbereichen der Schrittkarte.
   Vorher fehlte die Linie über "Erfahrungswissen", weil dieser
   Block nicht in der Regel stand. Und die Abstände waren so
   grosszuegig, dass die Karte unnoetig in die Laenge ging.
   ========================================================= */
.step .dat-block,
.step .abh-block,
.step .wissen-block{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--line);
}
.step .dat-block > summary,
.step .abh-block > summary,
.step .wissen-block > summary{margin-bottom:4px;}

/* Der Inhalt eines aufgeklappten Bereichs braucht unten keinen zusätzlichen
   Rand mehr, die Linie des nächsten Bereichs übernimmt das. */
.step .dat-block[open], .step .abh-block[open], .step .wissen-block[open]{padding-bottom:2px;}
.step .dat-neu, .step .abh-neu{margin-top:11px;}
.step .dat-block .tinynote, .step .abh-block .tinynote{margin-top:9px;margin-bottom:0;}
.step .wissen-block label.field{margin-bottom:0;}

/* =========================================================
   Gleichzeitig laufende Schritte im Ist-Bild und Soll-Bild.
   Sie stehen untereinander statt hintereinander - das ist die
   ganze Aussage: Diese Schritte warten NICHT aufeinander.
   ========================================================= */
.parallel{position:relative;display:flex;flex-direction:column;gap:8px;
  padding:22px 14px 14px;border:2px dashed var(--line-strong);border-radius:12px;
  background:#fbfcfd;flex:none;}
.parallel-marke{position:absolute;top:-10px;left:14px;background:#fff;padding:1px 10px;
  border-radius:9px;font-size:10.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);}
.parallel-spalte{display:flex;flex-direction:column;gap:10px;}
.parallel-spalte .node{margin:0;}
.chain{align-items:center;}

/* Dateizeile: Name, Angaben, dann die beiden Wege */
.dat-zeile{gap:8px 12px;padding:10px 13px;}
.dat-name{font-weight:600;color:var(--ink);}
.dat-aktionen{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto;}
.dat-aktionen .mini.wort{min-height:30px;padding:5px 12px;font-size:12.5px;}
.tbl .dat-aktionen{margin-left:0;margin-top:6px;}

/* =========================================================
   Hinterlegte Dateien an einer Kachel im Ist-Bild / Soll-Bild.
   Die Kachel bekommt oben rechts eine Klammer mit Anzahl; ein
   Klick klappt die Dateien darunter auf.
   ========================================================= */
/* Die Klammer sitzt unten in der Kachel, damit sie die Kopfzeile
   nicht auseinanderzieht. Symbol und Zahl nebeneinander. */
.node-dateien > summary{margin-top:9px;display:inline-flex;flex-direction:row;
  align-items:center;gap:5px;white-space:nowrap;width:auto;}
.node-klammer{flex:none;display:block;}
.node-zahl{flex:none;line-height:1;}

.node-dateien{position:static;}
.node-dateien > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;border-radius:9px;background:var(--blueSoft);color:var(--blue);
  font-size:11px;font-weight:700;line-height:1.5;border:1px solid transparent;}
.node-dateien > summary::-webkit-details-marker{display:none;}
.node-dateien > summary:hover{border-color:var(--blue);}

.node-zahl{font-variant-numeric:tabular-nums;}

/* Die Liste klappt IN der Kachel auf, nicht schwebend darüber.
   Grund: Die Kette scrollt waagerecht (overflow-x), und in einem
   scrollenden Bereich wird alles Schwebende abgeschnitten. Eine
   Kachel, die kurz höher wird, ist das kleinere Übel. */
.node-dateiliste{margin-top:8px;background:#f7f9fb;border:1px solid var(--line);
  border-radius:9px;padding:4px 8px;min-width:0;}
/* Der Dateiname braucht eine Zeile für sich, sonst quetschen ihn die
   beiden Knöpfe auf drei Punkte zusammen. */
.node-datei{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:8px 9px;border-radius:7px;font-size:12px;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--ink);}
.node-datei + .node-datei{border-top:1px solid var(--line);}
.node-dateiwege{display:flex;gap:6px;}
.node-datei:hover{background:#f7f9fb;}
.node-dateiname{font-weight:600;line-height:1.4;overflow-wrap:anywhere;max-width:100%;}
.node-datei a{color:var(--blue);text-decoration:none;font-weight:600;white-space:nowrap;
  padding:2px 7px;border:1px solid var(--line);border-radius:6px;font-size:11px;}
.node-datei a:hover{border-color:var(--blue);background:var(--blueSoft);}

/* Die Kachel wächst mit, wenn die Liste offen ist */
.node{align-self:flex-start;}
.node-dateien[open] > summary{border-color:var(--blue);}

/* Kacheln mit Dateien brauchen etwas mehr Breite, sonst ragen die
   beiden Knöpfe über den Rand hinaus. */
.node:has(.node-dateien){min-width:230px;}
.node-dateiwege{flex-wrap:wrap;}
.node-datei a{display:inline-block;}

/* =========================================================
   Klammer und Zahl gehören in eine Zeile.
   Vorher standen zwei Regeln für dasselbe Element hintereinander,
   und in der schmalen Kachel brach der Inhalt um.
   ========================================================= */
.node-dateien > summary{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap;
  align-items:center;
  gap:5px;
  width:auto;
  max-width:100%;
  white-space:nowrap;
  margin-top:10px;
  padding:3px 9px;
}
.node-klammer{flex:0 0 auto;display:inline-block;vertical-align:middle;}
.node-zahl{flex:0 0 auto;line-height:1;display:inline-block;}

/* Die Kachel darf für die Klammer etwas breiter werden */
.node{min-width:150px;}

/* Klammer und Zahl auch dort nebeneinander, wo der Browser
   inline-flex auf <summary> nicht anwendet (älteres WebKit).
   Die Tabellendarstellung erzwingt eine Zeile ohne Umbruch. */
.node-dateien > summary{display:inline-table !important;}
.node-dateien > summary > *{display:table-cell;vertical-align:middle;padding-right:5px;}
.node-dateien > summary > *:last-child{padding-right:0;}
@supports (display:inline-flex){
  .node-dateien > summary{display:inline-flex !important;}
  .node-dateien > summary > *{display:inline-block;padding-right:0;}
}

/* =========================================================
   Datei-Symbol mit Zahlenkreis an der Ecke.
   Der Kreis sitzt am Blatt, nicht daneben - so bleibt das
   Ganze schmal und wird in der Kachel nie umgebrochen.
   ========================================================= */
.node-dateien > summary{
  display:inline-block !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  margin-top:10px;
  line-height:0;
}
.node-sym{
  position:relative;
  display:inline-block;
  width:34px;height:34px;
  border-radius:9px;
  background:var(--blueSoft);
  color:var(--blue);
  line-height:0;
  transition:background .15s;
}
.node-sym svg{position:absolute;top:8px;left:8px;}
.node-kreis{
  position:absolute;
  top:-6px;right:-6px;
  min-width:19px;height:19px;
  padding:0 4px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:19px;
  text-align:center;
  border:2px solid #fff;
  box-sizing:content-box;
  font-variant-numeric:tabular-nums;
}
.node-dateien > summary:hover .node-sym{background:#dce6f5;}
.node-dateien[open] > summary .node-sym{background:var(--blue);color:#fff;}
.node-dateien[open] > summary .node-kreis{background:#fff;color:var(--blue);border-color:var(--blue);}

/* =========================================================
   Knöpfe in Leerzuständen und Kopfzeilen brauchen Abstand.
   Vorher standen sie ohne umgebenden Behälter direkt
   nebeneinander, und der einzige Abstand kam vom Leerzeichen
   im Quelltext.
   ========================================================= */
.empty-wege{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:20px;
}
.empty-wege .toolbtn{margin:0;}

/* Auch dort, wo Knöpfe frei im Leerzustand stehen */
.empty .toolbtn{margin:5px 6px 0;}

/* Und in den Kopfzeilen der Seiten */
.pagehead{gap:12px;}
.pagehead .toolbtn{margin:0;}

@media (max-width:620px){
  .empty-wege{flex-direction:column;align-items:stretch;}
  .empty-wege .toolbtn{justify-content:center;}
}

/* =========================================================
   Abstände zwischen Knöpfen ohne "gap".
   Die Lücken-Eigenschaft für Flexbox kennt nicht jeder Browser,
   und wo sie fehlt, kleben die Knöpfe aneinander. Aussenabstände
   funktionieren überall. Der negative Rand am Behälter gleicht
   den zusätzlichen Platz an den Kanten wieder aus.
   ========================================================= */
.pagehead{margin-left:-5px;margin-right:-5px;}
.pagehead > .toolbtn,
.pagehead > a.toolbtn,
.pagehead > button.toolbtn{margin:5px;}
.pagehead > h1{margin-left:5px;margin-right:9px;}

.empty-wege{margin-left:-6px;margin-right:-6px;}
.empty-wege > .toolbtn{margin:6px;}

/* Die Filterleiste hat dasselbe Muster */
.filterbar{margin-left:-5px;margin-right:-5px;}
.filterbar > *{margin:5px;}

/* =========================================================
   Auswahlfeld für Organisationseinheiten mit Suche
   ========================================================= */
.orgwahl{position:relative;}
.orgwahl-feld{width:100%;padding:11px 38px 11px 13px;font-size:14px;
  border:1px solid var(--line-strong);border-radius:9px;background:#fff;}
.orgwahl-feld:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft);}
.orgwahl-leeren{position:absolute;top:9px;right:8px;width:26px;height:26px;border:none;
  background:none;color:var(--muted);cursor:pointer;border-radius:6px;font-size:13px;}
.orgwahl-leeren:hover{background:var(--line);color:var(--ink);}
.orgwahl-liste{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;
  max-height:320px;overflow-y:auto;background:#fff;border:1px solid var(--line-strong);
  border-radius:10px;box-shadow:0 8px 26px rgba(16,24,40,.16);padding:5px;}
.orgwahl-zeile{padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13.5px;
  line-height:1.4;color:var(--ink);}
.orgwahl-zeile:hover,.orgwahl-zeile.aktiv{background:var(--blueSoft);color:var(--blue);}
.orgwahl-zeile.gewaehlt{font-weight:700;color:var(--blue);}
.orgwahl-zeile.t1{padding-left:28px;}
.orgwahl-zeile.t2{padding-left:46px;font-size:13px;}
.orgwahl-zeile.t3{padding-left:64px;font-size:12.5px;}
.orgwahl-leer{padding:11px 12px;color:var(--muted);font-size:13px;}

/* =========================================================
   Stammdaten: Organisationseinheiten als Baum lesbar machen
   ========================================================= */
.orgliste .prow{align-items:center;}
.orgliste .oe-t1 .mono{padding-left:20px;}
.orgliste .oe-t2 .mono{padding-left:40px;}
.orgliste .oe-t3 .mono{padding-left:60px;}
.orgliste .oe-t1{background:#fcfdfe;}
.orgliste .oe-t2, .orgliste .oe-t3{background:#fafbfc;}
.orgliste .oe-t0 b{color:var(--blue);font-size:14.5px;}
.orgliste .oe-t1 b{font-size:14px;}
.orgliste .oe-t2 b, .orgliste .oe-t3 b{font-weight:600;font-size:13.5px;}
.oe-typ{font-size:12px;color:var(--muted);text-transform:capitalize;}

/* Entgelttabelle in der Vorschau */
.tarif td{white-space:nowrap;}
.tarif-roh{color:var(--muted);font-size:12px;}
.tarif-pfeil{color:var(--line-strong);margin:0 3px;font-size:11px;}
.tarif-neu{color:var(--blue);font-variant-numeric:tabular-nums;}
.tarif th{font-size:12px;}

/* =========================================================
   Selbsttätiges Speichern: Rückmeldung
   ========================================================= */
.autosave{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:#fff;padding:9px 18px;border-radius:999px;font-size:13px;
  font-weight:600;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;box-shadow:0 6px 20px rgba(16,24,40,.22);}
.autosave.sichtbar{opacity:1;transform:translateX(-50%) translateY(0);}
.autosave.fehler{background:var(--warn);}

/* Kurzes Aufleuchten am gespeicherten Feld */
.feld-gespeichert{border-color:var(--ok) !important;
  box-shadow:0 0 0 3px var(--okSoft) !important;transition:box-shadow .2s,border-color .2s;}

.neu-hinweis{background:var(--blueSoft);color:var(--blue);padding:9px 13px;border-radius:8px;
  margin-top:12px;}

/* =========================================================
   Sachkosten in der Schrittkarte
   ========================================================= */
.step .kost-block{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);}
.step .kost-block > summary{margin-bottom:4px;color:var(--blue);}
.kost-seite{margin-top:12px;}
.kost-titel{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;}
.kost-liste{display:flex;flex-direction:column;gap:6px;}
.kost-liste:empty{display:none;}
.kost-zeile{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:13px;
  padding:9px 13px;background:#f7f9fb;border-radius:8px;}
.kost-bez{font-weight:600;color:var(--ink);}
.kost-zeile .wer{flex:1;min-width:0;font-size:12px;}
.kost-jahr{color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap;}
.kost-zeile .mini.danger{flex:none;}
.kost-neu{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.kost-neu input, .kost-neu select{width:100%;padding:10px 12px;font-size:13.5px;
  border:1px solid var(--line-strong);border-radius:9px;background:#fff;}
.kost-neu .kost-add{align-self:flex-start;}
@media (min-width:820px){
  .kost-neu{display:grid;grid-template-columns:2fr 1.4fr 1fr .8fr 1.4fr auto;gap:10px;align-items:center;}
  .kost-neu .kost-add{align-self:auto;}
}

/* Name und Angaben brauchen sichtbaren Abstand, auch wo "gap" fehlt */
.kost-bez{margin-right:10px;}
.kost-zeile .wer{margin-right:10px;}
.kost-jahr{margin-left:auto;}

/* Konto-Zeile: Bearbeiten und Löschen nebeneinander */
.konto-aktionen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.konto-weg-form{display:inline;margin:0;}
.toolbtn.danger{border-color:var(--warn);color:var(--warn);}
.toolbtn.danger:hover{background:var(--warn);color:#fff;border-color:var(--warn);}

/* Eigener Name in der Seitenleiste führt zum Konto */
a.suname{display:block;text-decoration:none;color:var(--ink);font-weight:700;}
a.suname:hover{color:var(--blue);text-decoration:underline;}
.suser .toolbtn.block{margin-top:7px;}