:root{
  --blau:#0080C9; --blau-d:#005f96; --orange:#DC500F;
  --tinte:#1b2a34; --grau:#5b6b76; --linie:#e3e9ee; --bg:#f4f7f9;
  --karte:#fff; --ok:#1f9d57; --warn:#b8860b;
  --r:10px; --schatten:0 1px 3px rgba(20,40,60,.08),0 6px 18px rgba(20,40,60,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Open Sans",system-ui,sans-serif;color:var(--tinte);background:var(--bg);line-height:1.5}
h1,h2,h3{font-family:"Montserrat",sans-serif;margin:0}
a{color:var(--blau)}
code,pre{font-family:"Fira Code",ui-monospace,monospace}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem 1.4rem;background:linear-gradient(100deg,var(--blau),var(--blau-d));color:#fff}
.brand{display:flex;align-items:center;gap:.8rem}
.brand-logo{width:46px;height:46px;flex:0 0 auto;display:block;object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.topbar h1{font-size:1.25rem;letter-spacing:.2px}
.sub{margin:.1rem 0 0;font-size:.78rem;opacity:.85}
.brand-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.stats{display:flex;gap:1.2rem;font-size:.8rem;text-align:right}
.stats b{display:block;font-size:1.25rem;font-family:"Montserrat";line-height:1.1}
.hdr-version-pill{font-family:"Fira Code",monospace;font-size:.78rem;font-weight:700;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  border-radius:20px;padding:.32rem .8rem;line-height:1;white-space:nowrap;transition:background .12s}
.hdr-version-pill:hover{background:rgba(255,255,255,.28)}
.hdr-version-pill::before{content:"⬡ ";opacity:.85}

/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  padding:.8rem 1.4rem;background:#fff;border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:5}
.toolbar input[type=search],.toolbar select{font:inherit;padding:.5rem .7rem;border:1px solid var(--linie);
  border-radius:8px;background:#fff;color:var(--tinte)}
.toolbar input[type=search]{flex:1 1 260px;min-width:200px}
.toolbar select{cursor:pointer}
.chk{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--grau);cursor:pointer}
.viewtoggle{display:flex;border:1px solid var(--linie);border-radius:8px;overflow:hidden}
.viewtoggle button{font-size:1rem;line-height:1;border:0;background:#fff;color:var(--grau);
  padding:.45rem .6rem;cursor:pointer}
.viewtoggle button+button{border-left:1px solid var(--linie)}
.viewtoggle button.active{background:var(--blau);color:#fff}
.count{margin-left:auto;font-size:.8rem;color:var(--grau)}
/* Spaltenauswahl (Listenansicht) */
.colpick{position:relative;display:inline-flex}
.colpick-btn{font:inherit;font-size:.85rem;padding:.5rem .7rem;border:1px solid var(--linie);border-radius:8px;
  background:#fff;color:var(--grau);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;line-height:1}
.colpick-btn:hover{border-color:var(--blau);color:var(--blau)}
.colpick-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:190px;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten);padding:.5rem}
.colpick-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grau);
  padding:.15rem .4rem .35rem;font-weight:600}
.colpick-item{display:flex;align-items:center;gap:.5rem;padding:.3rem .4rem;border-radius:6px;
  font-size:.85rem;color:var(--tinte);cursor:pointer}
.colpick-item:hover{background:var(--bg)}
.colpick-item.locked{opacity:.55;cursor:default}
.colpick-item input{cursor:pointer;accent-color:var(--blau)}
.colpick-item.locked input{cursor:default}
.colpick-actions{border-top:1px solid var(--linie);margin-top:.4rem;padding-top:.4rem}
.colpick-actions button{font:inherit;font-size:.8rem;padding:.3rem .5rem;border:0;background:none;
  color:var(--blau);cursor:pointer;border-radius:6px;width:100%}
.colpick-actions button:hover{background:var(--bg)}
/* RAG-/Volltext-Suchtreffer */
.rag{padding:0 1.4rem}
.rag:empty{display:none}
.rag-head{font-size:.8rem;color:var(--grau);padding:.7rem 0 .4rem;font-weight:600}
.rag-head .rag-hint{font-weight:400;font-size:.72rem;opacity:.8}
.rag-head.rag-err{color:var(--warn)}
.rag-hit{background:var(--karte);border:1px solid var(--linie);border-left:3px solid var(--blau);border-radius:8px;padding:.5rem .7rem;margin-bottom:.4rem}
.rag-t{font-size:.82rem;color:var(--tinte);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.rag-tag{font-size:.68rem;background:#eef2f5;color:var(--grau);border-radius:20px;padding:.05rem .5rem}
.rag-score{font-family:"Fira Code";font-size:.7rem;color:var(--ok)}
.rag-snip{font-size:.78rem;color:var(--grau);margin-top:.25rem;line-height:1.4}
.rag-hit.rag-doc{cursor:pointer}
.rag-hit.rag-doc:hover{border-left-color:var(--orange);background:#fafcfe}
/* Lösch-/Bearbeitungsvermerke */
td.vermerke{white-space:nowrap;text-align:right}
/* Liste: read-only Statusanzeige */
.vermerk-ind{font-size:.95rem;line-height:1;margin-left:.3rem;cursor:default}
.vermerk-ind.pruef{color:#7a5cc7} .vermerk-ind.bearb{color:var(--blau)} .vermerk-ind.loesch{color:var(--orange)}
.vm-none{color:#c8d2da}
/* Vermerke rechts im Detail-Kopf: Icon-Cluster (Status) + Klapp-Popover mit Steuerung */
.d-vmc{position:relative}
.d-vmc-sum{display:flex;align-items:center;gap:.35rem;cursor:pointer;list-style:none;
  padding:.35rem .55rem;border:1px solid var(--linie);border-radius:8px;background:#fff}
.d-vmc-sum::-webkit-details-marker{display:none}
.d-vmc-sum:hover,.d-vmc[open] .d-vmc-sum{border-color:var(--blau)}
.d-vmc-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(370px,82vw);
  background:#fff;border:1px solid var(--linie);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.16);padding:.5rem .8rem .7rem}
.d-vmc-pop-h{font-family:"Montserrat";font-weight:700;font-size:.82rem;color:var(--tinte);margin:.1rem 0 .35rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.vmc-icons{display:flex;gap:.35rem;align-items:center}
.vmc-ico{font-size:1.1rem;line-height:1;opacity:.5}
.vmc-ico.on{opacity:1}
.vmc-ico.pruef.on{color:#7a5cc7} .vmc-ico.bearb.on{color:var(--blau)} .vmc-ico.loesch.on{color:var(--orange)}
.vmc-offen{min-width:1.15rem;text-align:center;font-family:"Open Sans";font-weight:700;font-size:.66rem;color:#fff;background:var(--warn);border-radius:20px;padding:.05rem .3rem}
.vmc-body{padding:0}
.vmc-ziel{font-family:"Open Sans";font-weight:600;font-size:.68rem;color:var(--ok);background:#e6f6ee;border-radius:20px;padding:.1rem .5rem}
.vmc-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .1rem;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.vmc-item:last-child{border-bottom:0}
.vmc-ic{font-size:1.15rem;line-height:1;width:1.4rem;text-align:center;opacity:.5}
.vmc-item.on .vmc-ic{opacity:1}
.vmc-item.pruef.on .vmc-ic{color:#7a5cc7} .vmc-item.bearb.on .vmc-ic{color:var(--blau)} .vmc-item.loesch.on .vmc-ic{color:var(--orange)}
.vmc-txt{display:flex;flex-direction:column;line-height:1.25;min-width:120px;flex:1 1 auto}
.vmc-txt b{font-size:.85rem;color:var(--tinte)}
.vmc-state{font-size:.72rem;color:var(--grau)}
.vmc-state.on{color:var(--tinte)}
.vmc-acts{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.vmc-act{font:inherit;font-size:.78rem;font-weight:600;border:1px solid var(--linie);background:#fff;border-radius:7px;padding:.3rem .6rem;cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s}
.vmc-act:hover{border-color:var(--blau)}
.vmc-act.set{color:var(--blau)} .vmc-act.zurueck{color:var(--grau)}
.vmc-act.erledigt{color:var(--ok);border-color:var(--ok)} .vmc-act.erledigt:hover{background:#e6f6ee}
.vmc-hint{font-size:.7rem;color:var(--grau);font-style:italic}
.vm-zurueck{color:var(--grau)}
/* Detail: Verantwortliche/r (Dropdown) */
.vrw{flex-basis:100%;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .1rem;padding:.5rem .7rem;background:#f6f8fa;border:1px solid var(--linie);border-radius:var(--r)}
.vrw-l{font-size:.78rem;font-weight:600;color:var(--tinte)}
.vrw-sel{font:inherit;font-size:.82rem;padding:.3rem .5rem;border:1px solid var(--linie);border-radius:7px;background:#fff;cursor:pointer}
.vrw-info{font-size:.72rem;color:var(--grau)}
.vrw-ov{color:var(--orange);font-weight:600}
.vm-panel .vm-row{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;border-bottom:1px solid var(--linie);font-size:.82rem}
.vm-panel .vm-row:last-child{border-bottom:0}
.vm-b{flex:1;color:var(--tinte)}
.vm-c{font-family:"Fira Code";font-size:.78rem;min-width:2.6em;text-align:right}
.vm-c.pruef{color:#7a5cc7} .vm-c.bearb{color:var(--blau)} .vm-c.loesch{color:var(--orange)}

/* ─── Übersicht / Dashboard ─────────────────────────────────────────── */
/* Startseite (v0.5.0) — Hero + Hinweis, ueber der Uebersicht */
.hero{padding:1rem 1.4rem 0;background:var(--bg)}
.hero-media{position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--schatten);background:#0d1b26}
.hero-img{display:block;width:100%;height:auto;
  /* Das Motiv sitzt rechts, der Text links — bei schmalen Fenstern das Bild
     rechtsbuendig anschneiden statt es zu stauchen. */
  max-height:260px;object-fit:cover;object-position:right center}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:.5rem;padding:1.4rem 1.6rem;
  /* Verlauf sichert den Textkontrast auch dann, wenn das Motiv weiter nach links rutscht */
  background:linear-gradient(90deg,rgba(8,20,30,.92) 0%,rgba(8,20,30,.75) 42%,rgba(8,20,30,0) 72%)}
.hero-t{font-size:1.6rem;color:#fff;letter-spacing:.2px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hero-s{margin:0;font-size:.9rem;color:rgba(255,255,255,.86);max-width:34ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}
.hero-badge{display:inline-flex;align-items:center;gap:.4rem;
  font-size:.76rem;font-weight:600;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.4);
  border-radius:20px;padding:.34rem .75rem;line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-badge svg{flex:0 0 auto;opacity:.95}
.hero-badge:first-child{border-color:rgba(255,255,255,.55)}
.hero-note{display:flex;align-items:flex-start;gap:.5rem;margin:.7rem 0 0;
  font-size:.83rem;color:var(--tinte);
  background:#fff7f0;border:1px solid #f3d3bd;border-left:3px solid var(--orange);
  border-radius:8px;padding:.6rem .8rem}
.hero-note svg{flex:0 0 auto;color:var(--orange);margin-top:.1rem}

@media (max-width:820px){
  .hero{padding:.7rem 1rem 0}
  .hero-img{max-height:180px}
  .hero-overlay{padding:1rem;
    background:linear-gradient(90deg,rgba(8,20,30,.94) 0%,rgba(8,20,30,.82) 60%,rgba(8,20,30,.3) 100%)}
  .hero-t{font-size:1.2rem}
  .hero-s{font-size:.8rem;max-width:26ch}
}

.dash{padding:1rem 1.4rem .2rem;background:var(--bg)}
.dash.collapsed{padding:.6rem 1.4rem}
.dash-head{margin-bottom:.7rem}
.dash-toggle{display:inline-flex;align-items:center;gap:.4rem;font-family:"Montserrat";font-weight:700;
  font-size:.95rem;color:var(--tinte);background:none;border:0;cursor:pointer;padding:0}
.dash-caret{color:var(--blau);font-size:.8rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem;margin-bottom:.8rem}
.kpi{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:.7rem .9rem;
  box-shadow:var(--schatten)}
.kpi-n{font-family:"Montserrat";font-weight:700;font-size:1.5rem;line-height:1.1;color:var(--blau)}
.kpi.ok .kpi-n{color:var(--ok)} .kpi.warn .kpi-n{color:var(--warn)}
.kpi-l{font-size:.74rem;color:var(--grau);margin-top:.15rem}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem;
  padding-bottom:1rem}
.panel{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:.85rem .95rem;
  box-shadow:var(--schatten)}
.panel h3{font-size:.82rem;font-family:"Montserrat";color:var(--tinte);margin-bottom:.7rem}
.donut-wrap{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.donut{flex:0 0 auto}
.donut-n{font-family:"Montserrat";font-weight:700;font-size:19px;fill:var(--tinte)}
.donut-l{font-size:8px;fill:var(--grau);text-transform:uppercase;letter-spacing:.5px}
.lg-list{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.lg-item{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--tinte);background:none;
  border:0;cursor:pointer;padding:.1rem .15rem;text-align:left;border-radius:6px}
.lg-item:hover{background:#eef4f8}
.lg-item .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.lg-item b{margin-left:auto;font-family:"Fira Code";color:var(--grau);font-weight:600}
.bars{display:flex;flex-direction:column;gap:.35rem}
.bar-row{display:flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;padding:.1rem;
  border-radius:6px;font:inherit}
.bar-row:hover{background:#eef4f8}
.bar-l{flex:0 0 92px;font-size:.75rem;color:var(--grau);text-align:right;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.bar-track{flex:1;height:12px;background:#eef2f5;border-radius:6px;overflow:hidden}
.bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--blau),var(--blau-d));border-radius:6px}
.bar-v{flex:0 0 auto;font-size:.75rem;font-family:"Fira Code";color:var(--tinte);min-width:1.6em;text-align:right}
.seg{display:flex;height:16px;border-radius:8px;overflow:hidden;background:#eef2f5;margin-bottom:.55rem}
.seg-part{display:block;height:100%}
.seg-part.ok{background:var(--ok)} .seg-part.warn{background:var(--warn)}
.seg-lg{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.74rem;color:var(--grau)}
.seg-lg b{color:var(--tinte)}
.fr-quote{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.fr-quote-n{font-family:"Montserrat";font-weight:700;font-size:2rem;line-height:1;color:var(--ok)}
.fr-quote-n small{font-size:1rem;font-weight:600}
.fr-quote-l{font-size:.74rem;color:var(--grau);line-height:1.25}
.vm-offen{color:var(--warn)}
.seg-lg i.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.3rem;vertical-align:middle}
.sw.ok{background:var(--ok)} .sw.warn{background:var(--warn)} .sw.ext{background:#c2ccd3}
.cols{display:flex;align-items:flex-end;gap:.25rem;height:84px;padding-top:.3rem}
.col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:.2rem}
.col-bar{width:100%;max-width:20px;background:linear-gradient(180deg,var(--blau),var(--blau-d));border-radius:3px 3px 0 0;
  min-height:2px}
.col-x{font-size:.62rem;color:var(--grau);font-family:"Fira Code"}
.muted.small{font-size:.76rem}

/* Listenansicht */
.listwrap{padding:1rem 1.4rem 3rem;overflow-x:auto}
table.list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r);overflow:hidden;font-size:.86rem;box-shadow:var(--schatten)}
table.list thead th{text-align:left;font-family:"Montserrat";font-weight:600;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.4px;color:var(--grau);background:#f4f8fb;
  padding:.6rem .8rem;border-bottom:1px solid var(--linie);white-space:nowrap}
table.list tbody td{padding:.55rem .8rem;border-bottom:1px solid var(--linie);vertical-align:middle}
table.list tbody tr{cursor:pointer}
table.list tbody tr:hover{background:#f3f9fd}
table.list tbody tr:last-child td{border-bottom:0}
table.list td.id{font-family:"Fira Code";font-weight:700;color:var(--blau);white-space:nowrap}
table.list td.bez b{display:block} table.list td.bez .zw{color:var(--grau);font-size:.78rem}
table.list td.rev{font-family:"Fira Code";color:var(--orange);font-weight:700;text-align:center}
.vb{font-size:.72rem;font-weight:600;padding:.12rem .5rem;border-radius:20px;white-space:nowrap}
.vb.gen{background:#eef0ff;color:#4b46c7} .vb.orig{background:#fff3ec;color:var(--orange)}
.vb.none{background:#f0f1f3;color:#6b7682}
.vb.app{background:#e6f7f0;color:#0a7a52;border:1px solid #bce8d6}
table.list td.ver{font-family:"Fira Code";color:var(--grau);font-size:.78rem;white-space:nowrap}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem;padding:1.2rem 1.4rem 3rem}
.card{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:.9rem 1rem;
  cursor:pointer;box-shadow:var(--schatten);transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column;gap:.5rem}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(20,40,60,.12),0 12px 28px rgba(20,40,60,.10);border-color:#cfe0ec}
.card .row1{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.card .id{font-family:"Fira Code";font-weight:700;color:var(--blau);font-size:.85rem}
.card h3{font-size:1rem;line-height:1.25}
.card .zweck{font-size:.82rem;color:var(--grau);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto}

/* Badges */
.badge{font-size:.7rem;font-weight:600;padding:.15rem .5rem;border-radius:20px;white-space:nowrap;
  background:#eef3f7;color:var(--grau);border:1px solid var(--linie)}
.badge.rev{background:#fff3ec;color:var(--orange);border-color:#f6d4c2}
.badge.bereich{background:#e8f3fb;color:var(--blau-d);border-color:#cfe6f7}
.badge.produktiv{background:#e7f6ee;color:var(--ok);border-color:#bfe6cf}
.badge.entwurf{background:#fff7e6;color:#b8860b;border-color:#f0dca8}
.badge.bestand{background:#f0f1f3;color:#6b7682;border-color:#dde1e6}
.badge.abgeloest{background:#fdecec;color:#c0392b;border-color:#f0c0c0}
.badge.gen{background:#eef0ff;color:#4b46c7;border-color:#d4d6f6}
.badge.app{background:#e6f7f0;color:#0a7a52;border-color:#bce8d6}
.badge.ver{background:#eef3f7;color:var(--grau);border-color:var(--linie);font-family:"Fira Code"}
.card .row1-r{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Overlay / Detail */
/* z-index 35: über der Topbar (z30) → Sheet-Kopf (ID+Titel) sichtbar + Backdrop dunkelt Topbar ab;
   unter den Modals (z40, Versionen/Legende). */
.overlay{position:fixed;inset:0;background:rgba(18,30,40,.45);display:flex;justify-content:flex-end;z-index:35}
.overlay[hidden]{display:none}
.sheet{width:min(960px,100%);background:#fff;height:100%;display:flex;flex-direction:column;
  box-shadow:-8px 0 30px rgba(0,0,0,.2);animation:slide .18s ease}
@keyframes slide{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1rem 1.3rem;border-bottom:1px solid var(--linie)}
.sheet-head-main{min-width:0;flex:1 1 0}
.sheet-head-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:.5rem;flex:1 1 0}
.sheet-head .d-id{font-family:"Fira Code";font-weight:700;color:var(--blau);font-size:.85rem}
.sheet-head h2{font-size:1.25rem;margin:.15rem 0 .45rem}
.d-badges{display:flex;flex-wrap:wrap;gap:.35rem}
.close{border:0;background:#eef3f7;width:34px;height:34px;border-radius:8px;font-size:1.4rem;line-height:1;
  cursor:pointer;color:var(--grau);flex:0 0 auto}
.close:hover{background:#e0e8ee;color:var(--tinte)}
.d-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding:.7rem 1.3rem;font-size:.82rem;
  color:var(--grau);border-bottom:1px solid var(--linie);background:#fafcfd}
.d-meta b{color:var(--tinte);font-weight:600}
.d-meta a{word-break:break-all}

/* ISO-9001-Dokumentenlenkung (Detail-Overlay) */
/* Detail-Kopf: Aktions-Icons mittig (v0.5.0) — Ausfüllen, Formular herunterladen.
   Vorher lag zwischen Titel (links) und Vermerken/Schliessen (rechts) nur Leerraum. */
.sheet-head-center{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;align-self:center}
.d-act{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.8rem;font-weight:600;
  color:var(--grau);text-decoration:none;white-space:nowrap;cursor:pointer;
  background:#fff;border:1px solid var(--linie);border-radius:8px;padding:.4rem .7rem;line-height:1;
  transition:border-color .12s,color .12s,background .12s}
.d-act:hover{border-color:var(--blau);color:var(--blau)}
.d-act.active{border-color:var(--blau);color:#fff;background:var(--blau)}
.d-act svg{flex:0 0 auto}
@media (max-width:640px){ .d-act-t{display:none} .d-act{padding:.4rem .5rem} }

/* Dokumentation als zugeklappter Block über der Lenkung (v0.5.0, 3-E) */
.doku{flex-basis:100%;border:1px solid var(--linie);border-radius:var(--r);
  background:#fff;margin:.1rem 0 .3rem}
.doku-sum{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem .85rem;cursor:pointer;list-style:none}
.doku-sum::-webkit-details-marker{display:none}
.doku-sum::before{content:"▸";color:var(--grau);font-size:.7rem;transition:transform .12s}
.doku[open] .doku-sum::before{transform:rotate(90deg)}
.doku-t{font-family:"Montserrat";font-weight:700;font-size:.82rem;color:var(--tinte)}
.doku-hint{font-size:.72rem;color:var(--grau)}
.doku:not([open]) .doku-sum .doku-hint{display:none}
.doku-body{padding:0 .85rem .7rem;max-height:52vh;overflow:auto}

.lenkung{flex-basis:100%;border:1px solid var(--linie);border-radius:var(--r);
  background:#fff;margin:.1rem 0 .3rem}
.lenkung-sum{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem .85rem;cursor:pointer;list-style:none}
.lenkung-sum::-webkit-details-marker{display:none}
.lenkung-sum::before{content:"▸";color:var(--grau);font-size:.7rem;transition:transform .12s}
.lenkung[open] .lenkung-sum::before{transform:rotate(90deg)}
.lenkung-body{padding:0 .85rem .7rem}
/* ISO-Tag + Freigabe-Badge nur bei aufgeklappter Lenkung anzeigen */
.lenkung:not([open]) .lenkung-sum .iso-tag,
.lenkung:not([open]) .lenkung-sum .badge{display:none}
.lenkung-t{font-family:"Montserrat";font-weight:700;font-size:.82rem;color:var(--tinte)}
.iso-tag{font-size:.62rem;font-weight:700;letter-spacing:.4px;color:var(--blau-d);
  background:#e8f3fb;border:1px solid #cfe6f7;border-radius:6px;padding:.05rem .35rem}
.lenkung-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.45rem .9rem}
.lk{display:flex;flex-direction:column;gap:.1rem}
.lk .ll{font-size:.66rem;text-transform:uppercase;letter-spacing:.4px;color:var(--grau)}
.lk .lv{font-size:.82rem;color:var(--tinte);font-weight:600}
.lk .lv em.muted{font-weight:400;color:var(--warn);font-style:normal}
.lenkung-note{margin-top:.5rem;font-size:.72rem;color:var(--grau);font-style:italic}
.lenkung.in-pruefung{border-color:#f0dca8;background:#fffdf6}
.lenkung-note.bearb{color:var(--warn);font-style:normal}
.badge.bearbeitung{background:#fff7e6;color:var(--warn);border-color:#f0dca8}
.vb.bearbeitung{background:#fff7e6;color:var(--warn)}

/* Freigabe-Marker (Liste + Badges) */
.vb.freigabe-ok{background:#e7f6ee;color:var(--ok)}
.vb.freigabe-offen{background:#fff7e6;color:var(--warn)}
.badge.freigabe-ok{background:#e7f6ee;color:var(--ok);border-color:#bfe6cf}
.badge.freigabe-offen{background:#fff7e6;color:var(--warn);border-color:#f0dca8}
.lg-note{font-size:.78rem;color:var(--grau);margin:.2rem 0 .5rem;line-height:1.45}

.tabs{display:flex;gap:.2rem;padding:0 1.3rem;border-bottom:1px solid var(--linie);overflow-x:auto;background:#fff}
.tabs button{font:inherit;font-size:.85rem;border:0;background:none;padding:.7rem .8rem;cursor:pointer;
  color:var(--grau);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--tinte)}
.tabs button.active{color:var(--blau);border-bottom-color:var(--blau);font-weight:600}

.tabpane{flex:1;overflow:auto;padding:1.2rem 1.3rem;background:#fff}
.tabpane iframe{width:100%;height:100%;min-height:70vh;border:1px solid var(--linie);border-radius:8px}
.tabpane pre.code{background:#0f1b24;color:#d6e2ec;padding:1rem;border-radius:8px;overflow:auto;
  font-size:.8rem;line-height:1.55;white-space:pre;tab-size:2}
.muted{color:var(--grau)}
.loading{color:var(--grau);font-size:.85rem;padding:1rem 0}

/* SharePoint-Reiter: Zugang zum Original (nicht einbettbar) */
.sp-pane{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;padding:1.5rem 0}
.sp-note{color:var(--grau);font-size:.9rem;max-width:58ch;line-height:1.55;margin:0}
.sp-open{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;
  color:#fff;background:var(--blau);border-radius:8px;padding:.65rem 1.1rem;text-decoration:none}
.sp-open:hover{background:var(--blau-d)}
.sp-dl{display:flex;flex-wrap:wrap;gap:.6rem}

/* Lebenslauf */
.hinweis{background:#fff8ec;border:1px solid #f0dca8;color:#7a5a12;padding:.7rem .9rem;border-radius:8px;
  font-size:.82rem;margin-bottom:1rem}
.hist-h{font-family:"Montserrat";font-size:.95rem;margin:1.4rem 0 .5rem;color:var(--tinte)}
.hist-h:first-child{margin-top:0}
table.lz{width:100%;border-collapse:collapse;font-size:.84rem}
table.lz th,table.lz td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--linie);vertical-align:top}
table.lz th{font-family:"Montserrat";font-weight:600;color:var(--grau);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.3px}
table.lz td.rev{font-family:"Fira Code";color:var(--orange);font-weight:700}
table.lz td.hash{font-family:"Fira Code";color:var(--blau)}
.seedflag{font-size:.7rem;color:var(--warn);font-weight:600}

/* Markdown-Render */
.md{font-size:.9rem;line-height:1.6;max-width:78ch}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{font-family:"Montserrat";margin:1.2rem 0 .5rem;line-height:1.3}
.md h1{font-size:1.3rem;color:var(--blau-d)} .md h2{font-size:1.1rem} .md h3{font-size:.98rem}
/* h4–h6 wurden vom Parser erzeugt, hatten aber keine Regel → Browser-Default (zu gross/fett) */
.md h4{font-size:.9rem;color:var(--grau)} .md h5,.md h6{font-size:.85rem;color:var(--grau)}
.md h2{border-bottom:1px solid var(--linie);padding-bottom:.25rem}
.md h1:first-child,.md h2:first-child,.md h3:first-child{margin-top:0}
.md p{margin:.5rem 0}
.md ul,.md ol{margin:.4rem 0 .6rem 1.25rem;padding:0}
.md ol{margin-left:1.5rem}
.md li{margin:.22rem 0}
.md li>ul,.md li>ol{margin:.22rem 0 .1rem 1rem}   /* verschachtelte Liste enger anbinden */
.md ul ul{list-style:circle}
.md em{font-style:italic}
.md a{color:var(--blau);text-decoration:underline;text-underline-offset:2px}
.md a:hover{color:var(--orange)}
.md blockquote{margin:.7rem 0;padding:.5rem .8rem;border-left:3px solid var(--orange);
  background:#fff7f0;border-radius:0 8px 8px 0;color:var(--tinte)}
.md blockquote > :first-child{margin-top:0} .md blockquote > :last-child{margin-bottom:0}
.md code{background:#eef3f7;padding:.05rem .3rem;border-radius:4px;font-size:.85em;
  white-space:nowrap}
.md hr{border:0;border-top:1px solid var(--linie);margin:1rem 0}
/* Tabellen können breiter als der Lesebereich sein → eigener Scroll statt Layout sprengen */
.md table{border-collapse:collapse;width:100%;margin:.6rem 0;font-size:.84rem;
  display:block;overflow-x:auto;max-width:100%}
.md th,.md td{border:1px solid var(--linie);padding:.4rem .55rem;text-align:left;
  vertical-align:top}
.md th{background:#f0f5f9;font-family:"Montserrat";font-weight:600;white-space:nowrap}
.md tbody tr:nth-child(even){background:#fafcfe}

@media (max-width:560px){
  .topbar{flex-direction:column;align-items:flex-start;gap:.6rem}
  .stats{align-self:stretch;justify-content:space-between;text-align:left}
}

/* ============ Versions-Modal (fux-framework versioning pattern) ============ */
.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;padding:1rem}
.modal-overlay[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;z-index:0;background:rgba(18,30,40,.5)}     /* z-index:0 — NICHT erhöhen (NZA-Bug v2.0.5d) */
.modal-content{position:relative;z-index:1;background:#fff;border-radius:var(--r);
  box-shadow:0 20px 60px rgba(0,0,0,.28);max-width:600px;width:100%;max-height:84vh;
  display:flex;flex-direction:column;overflow:hidden;animation:slide .18s ease}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.9rem 1.2rem;border-bottom:1px solid var(--linie)}
.modal-header h2{font-size:1rem;font-family:"Montserrat";color:var(--tinte)}
.modal-close{width:32px;height:32px;border:0;background:#eef3f7;border-radius:8px;font-size:1.3rem;
  line-height:1;cursor:pointer;color:var(--grau)}
.modal-close:hover{background:#e0e8ee;color:var(--tinte)}
.modal-body{overflow-y:auto;padding:.9rem 1.2rem;flex:1}
.versions-loading{text-align:center;color:var(--grau);padding:2rem}

.vh-entry{border:1px solid var(--linie);border-radius:8px;margin-bottom:.7rem;overflow:hidden}
.vh-summary{display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;cursor:pointer;
  list-style:none;background:#f4f8fb;font-weight:600;user-select:none}
.vh-summary::-webkit-details-marker{display:none}
.vh-summary>*{pointer-events:none}                                                    /* Icon-Klick-Fix */
.vh-version-tag{display:inline-block;padding:2px 9px;background:var(--blau);color:#fff;
  border-radius:999px;font-size:.72rem;font-weight:700;font-family:"Fira Code"}
.vh-date{font-size:.74rem;color:var(--grau);font-weight:400;font-family:"Fira Code"}
.vh-title{flex:1;font-size:.9rem;color:var(--tinte)}
.vh-body{padding:.7rem .95rem;border-top:1px solid var(--linie)}
.vh-body ul{margin:.2rem 0 .4rem;padding-left:1.2rem;font-size:.86rem;line-height:1.6}
.vh-forms-h{font-size:.76rem;color:var(--grau);font-weight:600;margin:.5rem 0 .35rem;
  text-transform:uppercase;letter-spacing:.3px}
.vh-forms{display:flex;flex-wrap:wrap;gap:.35rem}
.vh-form{font-family:"Fira Code";font-size:.74rem;font-weight:700;color:var(--blau);
  background:#e8f3fb;border:1px solid #cfe6f7;border-radius:6px;padding:.2rem .5rem;cursor:pointer}
.vh-form:hover{background:var(--blau);color:#fff;border-color:var(--blau)}
.vh-breaking{margin-top:.5rem;padding:.5rem .75rem;background:#fff3cd;border:1px solid #ffc107;
  border-radius:6px;font-size:.8rem}
.vh-breaking-label{font-weight:700;color:#856404}

/* ============ v0.1.3 — Header-Suche, Sidebar, Legende ============ */
.topbar{flex-wrap:wrap;position:relative;z-index:30}
.brand{margin-right:auto}                       /* Brand links bündig, Suche nach rechts */
.brand-title{flex-wrap:nowrap}                  /* Titel · Version · Legende auf einer Zeile, keine Kollision */
.hdr-icon-btn{display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;
  cursor:pointer;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  border-radius:8px;padding:.3rem .5rem;transition:background .12s;flex:0 0 auto}
.hdr-icon-btn svg{display:block}
.hdr-icon-btn:hover{background:rgba(255,255,255,.28)}
.hdr-user{display:flex;align-items:center;gap:.5rem}
.hdr-user-name{color:#fff;font-size:.85rem;font-weight:600;opacity:.95;white-space:nowrap}
.hdr-login-btn{font:inherit;font-size:.82rem;font-weight:600;color:var(--blau);background:#fff;
  border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:.32rem .9rem;cursor:pointer;white-space:nowrap}
.hdr-login-btn:hover{background:#eaf4fb}
#sidebar-toggle{font-size:1.15rem}
.hdr-search{flex:0 1 230px;min-width:130px;display:flex;order:3}
.hdr-search input[type=search]{width:100%;font:inherit;font-size:.85rem;padding:.38rem .7rem;border:0;
  border-radius:8px;background:rgba(255,255,255,.95);color:var(--tinte)}
.hdr-search input[type=search]::placeholder{color:#7d8c97}

/* Layout mit auf-/zuklappbarer Sidebar */
.layout{display:flex;align-items:stretch}
.sidebar{flex:0 0 232px;width:232px;background:#fff;border-right:1px solid var(--linie);
  padding:1rem .7rem;overflow:hidden;transition:flex-basis .18s ease,width .18s ease,padding .18s ease}
.layout.collapsed .sidebar{flex-basis:0;width:0;padding:0;border-right:0}
.content{flex:1 1 0;min-width:0}
.sidebar-h{font-family:"Montserrat";font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;
  color:var(--grau);padding:.2rem .6rem .6rem;white-space:nowrap}
.doktyp-nav{display:flex;flex-direction:column;gap:.15rem}
.dt-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;
  font:inherit;font-size:.86rem;text-align:left;border:0;background:none;cursor:pointer;
  color:var(--tinte);padding:.5rem .6rem;border-radius:8px;white-space:nowrap}
.dt-item:hover{background:#f0f6fb}
.dt-item.active{background:var(--blau);color:#fff;font-weight:600}
.dt-label{overflow:hidden;text-overflow:ellipsis}
.dt-count{font-family:"Fira Code";font-size:.72rem;background:#eef3f7;color:var(--grau);
  border-radius:20px;padding:.05rem .5rem;min-width:1.7rem;text-align:center;flex:0 0 auto}
.dt-item.active .dt-count{background:rgba(255,255,255,.25);color:#fff}
.dt-item.empty{color:#aab4bc;cursor:default}
.dt-item.empty:hover{background:none}
.dt-item.empty .dt-count{background:#f4f6f8;color:#b3bcc3}

/* Datum-Spalte (Liste) */
table.list td.datum{font-family:"Fira Code";font-size:.78rem;color:var(--grau);white-space:nowrap}

/* Legende-Modal */
.lg-sec{margin-bottom:1.1rem}
.lg-sec:last-child{margin-bottom:0}
.lg-sec h3{font-family:"Montserrat";font-size:.8rem;color:var(--blau-d);margin:0 0 .4rem;
  text-transform:uppercase;letter-spacing:.4px}
.lg-tab{width:100%;border-collapse:collapse;font-size:.84rem}
.lg-tab td{padding:.35rem .55rem;border-bottom:1px solid var(--linie);vertical-align:top;color:var(--grau)}
.lg-tab tr:last-child td{border-bottom:0}
.lg-tab td.lg-k{white-space:nowrap;font-weight:600;color:var(--tinte);width:1%}

/* Anlagen-Badge (Kachel/Liste) */
.badge.anl{background:#fff3ec;color:var(--orange);border-color:#f6d4c2}
.vb.anl{background:#fff3ec;color:var(--orange)}

/* Anlagen-Tab: Unterliste links + PDF rechts */
.anlagen-split{display:flex;gap:1rem;height:100%;min-height:66vh}
.anlagen-list{flex:0 0 240px;display:flex;flex-direction:column;gap:.2rem;overflow:auto;
  border-right:1px solid var(--linie);padding-right:.6rem}
.an-item{display:flex;align-items:flex-start;gap:.55rem;text-align:left;border:0;background:none;
  font:inherit;cursor:pointer;padding:.5rem .55rem;border-radius:8px;color:var(--tinte)}
.an-item:hover{background:#f0f6fb}
.an-item.active{background:var(--blau);color:#fff}
.an-nr{font-family:"Fira Code";font-weight:700;font-size:.78rem;min-width:1.5rem;text-align:right;
  color:var(--blau);flex:0 0 auto}
.an-item.active .an-nr{color:#fff}
.an-tit{font-size:.84rem;line-height:1.35}
.an-link-i{margin-left:.3rem;color:var(--blau);font-weight:700}
.an-item.active .an-link-i{color:#fff}
.an-badge{display:inline-block;margin-left:.4rem;font-size:.62rem;font-weight:700;padding:.05rem .4rem;
  border-radius:20px;vertical-align:middle;text-transform:uppercase;letter-spacing:.3px}
.an-badge.pflicht{background:#e7f6ee;color:var(--ok)}
.an-badge.erweitert{background:#eef0ff;color:#4b46c7}
.an-badge.empfohlen{background:#fff3ec;color:var(--orange)}
.an-badge.optional{background:#f0f1f3;color:#6b7682}
.an-item.active .an-badge{background:rgba(255,255,255,.22);color:#fff}
.anlagen-view{flex:1;min-width:0;display:flex;flex-direction:column}
.anlagen-view iframe{width:100%;flex:1;min-height:60vh;border:1px solid var(--linie);border-radius:8px}
.opt-desc{display:block;font-size:.74rem;color:var(--grau);margin-top:.1rem}
.an-item.active .opt-desc{color:rgba(255,255,255,.85)}

.subpane{min-height:40vh}

.an-ref{margin-bottom:.6rem;font-size:.82rem;color:var(--grau)}
.an-reflink{font-family:"Fira Code";font-weight:700;font-size:.8rem;color:var(--blau);
  background:#e8f3fb;border:1px solid #cfe6f7;border-radius:6px;padding:.2rem .55rem;cursor:pointer}
.an-reflink:hover{background:var(--blau);color:#fff}
@media (max-width:680px){
  .anlagen-split{flex-direction:column;min-height:auto}
  .anlagen-list{flex-basis:auto;border-right:0;border-bottom:1px solid var(--linie);padding-right:0;padding-bottom:.5rem}
  .anlagen-view iframe{min-height:50vh}
}

/* Sidebar mobil: als Drawer über den Inhalt (kein Quetschen) */
@media (max-width:820px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(280px,82vw);flex-basis:auto;
    z-index:50;box-shadow:2px 0 22px rgba(0,0,0,.28);overflow:auto;
    transition:transform .2s ease;padding-top:1rem}
  .layout.collapsed .sidebar{transform:translateX(-100%);box-shadow:none;width:min(280px,82vw);flex-basis:auto}
  .layout:not(.collapsed)::before{content:"";position:fixed;inset:0;z-index:40;background:rgba(18,30,40,.38)}
}

/* ═══════════════════════════════════════════════════════════════
   Formular ausfüllen  (dok_fill.js — „Ausfüllen“-Reiter)
   ═══════════════════════════════════════════════════════════════ */
.ff-wrap{display:flex;flex-direction:column;gap:1rem}
.ff-intro{margin:0;color:var(--grau);font-size:.92rem;background:var(--bg);
  border-left:3px solid var(--blau);border-radius:0 var(--r) var(--r) 0;padding:.6rem .8rem}
.ff-gate{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:#fff6ed;border:1px solid #f3d3b8;color:#8a4b16;border-radius:var(--r);padding:.6rem .85rem;font-size:.9rem}
.ff-gate .ff-login{background:var(--orange);color:#fff;border:0;border-radius:8px;
  padding:.4rem .9rem;font-weight:600;cursor:pointer}
.ff-gate .ff-login:hover{filter:brightness(1.06)}

.ff{display:flex;flex-direction:column;gap:1.1rem}
.ff-section{border:1px solid var(--linie);border-radius:var(--r);padding:.9rem 1rem;background:var(--karte)}
.ff-sec-h{font-size:1rem;color:var(--blau-d);margin:0 0 .7rem;padding-bottom:.4rem;border-bottom:1px solid var(--linie)}
.ff-sec-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem .9rem}

.ff-node{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.ff-node[data-kind="group"],.ff-node[data-kind="table"],.ff-node[data-kind="list"]{grid-column:1/-1}
.ff-label,.ff-grp-h{font-size:.82rem;font-weight:600;color:var(--tinte)}
.ff-grp-h{margin-bottom:.35rem;color:var(--blau-d)}
.ff-star{color:var(--orange);margin-left:.15rem}
.ff-help{font-weight:400;color:var(--grau);font-size:.76rem}
.ff-input{width:100%;font:inherit;font-size:.9rem;color:var(--tinte);background:#fff;
  border:1px solid #cdd7de;border-radius:8px;padding:.45rem .55rem;transition:border-color .12s,box-shadow .12s}
.ff-input:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,128,201,.15)}
textarea.ff-input{resize:vertical;min-height:2.6rem;line-height:1.4}
.ff-check{display:flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--tinte)}
.ff-check input{width:auto}
.ff-node.ff-err .ff-input{border-color:var(--orange);box-shadow:0 0 0 3px rgba(220,80,15,.13)}

/* verschachtelte Gruppen/Tabellen */
.ff-grp-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .8rem;
  border-left:2px solid var(--linie);padding-left:.7rem}
.ff-rows{display:flex;flex-direction:column;gap:.55rem}
.ff-row{display:flex;align-items:flex-start;gap:.5rem;background:var(--bg);
  border:1px solid var(--linie);border-radius:8px;padding:.55rem .6rem}
.ff-row-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .7rem;flex:1;min-width:0}
.ff-row .ff-node[data-kind="table"],.ff-row .ff-node[data-kind="list"],
.ff-row .ff-node[data-kind="group"]{grid-column:1/-1}
.ff-rm{flex:0 0 auto;width:1.7rem;height:1.7rem;border:1px solid #d8c3bb;background:#fff;color:var(--orange);
  border-radius:6px;font-size:1.15rem;line-height:1;cursor:pointer;font-weight:700}
.ff-rm:hover{background:#fdeee6}
.ff-addrow{align-self:flex-start;background:#eef6fb;color:var(--blau-d);border:1px dashed var(--blau);
  border-radius:8px;padding:.4rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer;margin-top:.5rem}
.ff-addrow:hover{background:#e2eff9}

/* Aktionsleiste */
.ff-actions{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  padding:.7rem .9rem;box-shadow:var(--schatten)}
.ff-opt{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--grau)}
.ff-opt input{width:auto}
.ff-btns{display:flex;gap:.6rem;margin-left:auto}
.ff-reset{background:#fff;color:var(--grau);border:1px solid #cdd7de;border-radius:8px;padding:.5rem 1rem;font-weight:600;cursor:pointer}
.ff-reset:hover{background:var(--bg)}
.ff-gen{background:linear-gradient(100deg,var(--blau),var(--blau-d));color:#fff;border:0;border-radius:8px;
  padding:.5rem 1.3rem;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,128,201,.28)}
.ff-gen:hover{filter:brightness(1.05)}
.ff-gen:disabled{opacity:.6;cursor:default;filter:none}

/* Status + Ergebnis */
.ff-status{font-size:.9rem;min-height:0}
.ff-status:empty{display:none}
.ff-status.busy{color:var(--blau-d)}
.ff-status.busy::before{content:"⏳ "}
.ff-status.ok{color:var(--ok)}
.ff-status.err{color:var(--orange);font-weight:600}
.ff-result:empty{display:none}
.ff-res-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.92rem;
  background:#eef7f1;border:1px solid #cfe8da;border-radius:var(--r);padding:.55rem .8rem}
.ff-res-meta{color:var(--grau);font-size:.82rem}
.ff-dl{margin-left:auto;background:var(--ok);color:#fff;text-decoration:none;border-radius:8px;padding:.35rem .85rem;font-weight:600;font-size:.85rem}
.ff-dl:hover{filter:brightness(1.05)}
.ff-sp{font-size:.85rem;margin:.5rem 0 0}
.ff-sp.ok{color:var(--ok)}
.ff-sp.err{color:var(--orange)}
.ff-preview{width:100%;height:min(72vh,780px);border:1px solid var(--linie);border-radius:var(--r);margin-top:.7rem;background:#fff}

@media (max-width:720px){
  .ff-sec-body,.ff-grp-body,.ff-row-fields{grid-template-columns:1fr}
}