/* =========================================================
   NoFire SiGe-Tool — Stylesheet v0.9.0
   Farben in OKLCH, getönte Neutraltöne, krümmungsstetige Ecken.
   Schrift: Geist (SIL OFL) lokal eingebunden — kein externer Abruf.
   ========================================================= */

@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-subset.woff2) format("woff2");font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/GeistMono-subset.woff2) format("woff2");font-weight:100 900;font-display:swap;font-style:normal}

:root{
  --nf-red:        oklch(54% 0.215 27);
  --nf-red-dark:   oklch(46% 0.185 27);
  --nf-red-soft:   oklch(95.5% 0.028 27);
  --nf-red-soft2:  oklch(90% 0.05 27);

  --ink-900: oklch(24% 0.014 40);
  --ink-700: oklch(41% 0.012 44);
  --ink-500: oklch(50% 0.011 48);
  --ink-400: oklch(54% 0.011 52);
  --ink-zart:oklch(70% 0.009 54);
  --ink-300: oklch(84% 0.007 50);
  --ink-200: oklch(91.5% 0.006 50);
  --ink-100: oklch(96% 0.005 52);
  --ink-50:  oklch(97.6% 0.005 52);
  --flaeche: oklch(99.2% 0.003 60);

  --ok:      oklch(50% 0.118 152);
  --ok-flaeche: oklch(58% 0.118 152);
  --ok-soft: oklch(96% 0.032 152);
  --warn:    oklch(48% 0.13 55);
  --warn-flaeche: oklch(67% 0.148 55);
  --warn-soft:oklch(96% 0.042 60);
  --info:    oklch(50% 0.115 250);
  --info-soft:oklch(96% 0.03 250);

  --stufe-gering:oklch(58% 0.118 152);
  --stufe-mittel:oklch(72% 0.135 86);
  --stufe-erhoeht:oklch(67% 0.148 55);
  --stufe-hoch:oklch(56% 0.205 27);

  --shadow-sm: 0 1px 1px oklch(30% 0.02 45 / .04), 0 2px 5px oklch(30% 0.02 45 / .035);
  --shadow-md: 0 1px 1px oklch(30% 0.02 45 / .05), 0 6px 14px oklch(30% 0.02 45 / .06), 0 20px 42px oklch(30% 0.02 45 / .07);
  --radius:   12px;
  --radius-sm:9px;
  --sidebar:  260px;
  --aus:cubic-bezier(0.23, 1, 0.32, 1);
  --schub:cubic-bezier(0.32, 0.72, 0, 1);
  --transition: 180ms cubic-bezier(0.23, 1, 0.32, 1);

  --sq-karte:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cpath%20d%3D%22M%2024.8%200%20c%206.721%200%2010.081%200%2012.648%201.308%20a%2012%2012%200%200%201%205.244%205.244%20c%201.308%202.567%201.308%205.927%201.308%2012.648%20L%2044%2024.8%20c%200%206.721%200%2010.081%20-1.308%2012.648%20a%2012%2012%200%200%201%20-5.244%205.244%20c%20-2.567%201.308%20-5.927%201.308%20-12.648%201.308%20L%2019.2%2044%20c%20-6.721%200%20-10.081%200%20-12.648%20-1.308%20a%2012%2012%200%200%201%20-5.244%20-5.244%20c%20-1.308%20-2.567%20-1.308%20-5.927%20-1.308%20-12.648%20L%200%2019.2%20c%200%20-6.721%200%20-10.081%201.308%20-12.648%20a%2012%2012%200%200%201%205.244%20-5.244%20c%202.567%20-1.308%205.927%20-1.308%2012.648%20-1.308%20Z%22%20fill%3D%22%23FEFDFB%22%20stroke%3D%22%23E9E4E0%22%20stroke-width%3D%221%22%20transform%3D%22translate(0.5%200.5)%20scale(0.9772727272727273)%22%2F%3E%3C%2Fsvg%3E");
  --sq-warn:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cpath%20d%3D%22M%2024.8%200%20c%206.721%200%2010.081%200%2012.648%201.308%20a%2012%2012%200%200%201%205.244%205.244%20c%201.308%202.567%201.308%205.927%201.308%2012.648%20L%2044%2024.8%20c%200%206.721%200%2010.081%20-1.308%2012.648%20a%2012%2012%200%200%201%20-5.244%205.244%20c%20-2.567%201.308%20-5.927%201.308%20-12.648%201.308%20L%2019.2%2044%20c%20-6.721%200%20-10.081%200%20-12.648%20-1.308%20a%2012%2012%200%200%201%20-5.244%20-5.244%20c%20-1.308%20-2.567%20-1.308%20-5.927%20-1.308%20-12.648%20L%200%2019.2%20c%200%20-6.721%200%20-10.081%201.308%20-12.648%20a%2012%2012%200%200%201%205.244%20-5.244%20c%202.567%20-1.308%205.927%20-1.308%2012.648%20-1.308%20Z%22%20fill%3D%22%23FEF5F4%22%20stroke%3D%22%23F3DAD8%22%20stroke-width%3D%221%22%20transform%3D%22translate(0.5%200.5)%20scale(0.9772727272727273)%22%2F%3E%3C%2Fsvg%3E");
  --sq-kern:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20d%3D%22M%2027.32%200%20c%208.105%200%2012.158%200%2015.231%201.627%20a%2014%2014%200%200%201%205.822%205.822%20c%201.627%203.073%201.627%207.126%201.627%2015.231%20L%2050%2027.32%20c%200%208.105%200%2012.158%20-1.627%2015.231%20a%2014%2014%200%200%201%20-5.822%205.822%20c%20-3.073%201.627%20-7.126%201.627%20-15.231%201.627%20L%2022.68%2050%20c%20-8.105%200%20-12.158%200%20-15.231%20-1.627%20a%2014%2014%200%200%201%20-5.822%20-5.822%20c%20-1.627%20-3.073%20-1.627%20-7.126%20-1.627%20-15.231%20L%200%2022.68%20c%200%20-8.105%200%20-12.158%201.627%20-15.231%20a%2014%2014%200%200%201%205.822%20-5.822%20c%203.073%20-1.627%207.126%20-1.627%2015.231%20-1.627%20Z%22%20fill%3D%22%23F7F4F1%22%20stroke%3D%22%23EDE8E4%22%20stroke-width%3D%221%22%20transform%3D%22translate(0.5%200.5)%20scale(0.98)%22%2F%3E%3C%2Fsvg%3E");

  font-family:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink-50);color:var(--ink-900);font-size:14px;line-height:1.5;letter-spacing:-0.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.num,.mono{font-family:"Geist Mono","Geist",monospace;font-variant-numeric:tabular-nums}
button{font-family:inherit}
a{color:var(--nf-red);text-decoration:none}
a:hover{text-decoration:underline}

.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

/* Sidebar */
.sidebar{background:var(--flaeche);border-right:1px solid var(--ink-200);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar__brand{padding:18px 22px;border-bottom:1px solid var(--ink-200)}
.sidebar__brand img{display:block;width:100%;max-width:200px;height:auto}
.sidebar__app-name{margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}
.sidebar__app-name span{color:var(--nf-red)}

.sidebar__nav{padding:14px 10px;flex:1}
.sidebar__group{margin-bottom:18px}
.sidebar__label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);padding:0 12px 6px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--ink-700);font-size:13.5px;cursor:pointer;text-align:left;transition:background var(--transition),color var(--transition)}
.nav-item:hover{background:var(--ink-100)}
.nav-item.is-active{background:var(--nf-red-soft);color:var(--nf-red-dark);font-weight:600}
.nav-item.is-active svg{color:var(--nf-red)}
.nav-item svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-500)}
.nav-item .badge-pill{margin-left:auto;background:var(--nf-red);color:oklch(99% 0.006 60);font-size:10.5px;padding:1px 7px;border-radius:99px;font-weight:700}

.sidebar__user{border-top:1px solid var(--ink-200);padding:14px 18px;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--nf-red-dark);color:oklch(99% 0.01 27);display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
.user-meta{font-size:13px;line-height:1.3;min-width:0;flex:1}
.user-meta strong{display:block;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta span{color:var(--ink-500);font-size:11.5px}
.user-meta .admin-tag{display:inline-block;background:var(--nf-red);color:oklch(99% 0.006 60);font-size:9.5px;padding:1px 5px;border-radius:3px;margin-left:4px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.logout-btn{background:transparent;border:0;color:var(--ink-500);cursor:pointer;padding:6px;border-radius:var(--radius-sm)}
.logout-btn:hover{background:var(--ink-100);color:var(--nf-red)}

/* Main */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--flaeche);border-bottom:1px solid var(--ink-200);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:10}
.crumbs{font-size:12.5px;color:var(--ink-500);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crumbs strong{color:var(--ink-900);font-weight:600}
.crumbs .sep{color:var(--ink-300)}
.topbar__actions{display:flex;align-items:center;gap:8px}

.content{padding:28px;max-width:1280px;width:100%}

/* Page header */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.page-head h1{font-size:24px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.page-head p{margin:0;color:var(--ink-500);font-size:13.5px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap;line-height:1.2}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn--primary{background:var(--nf-red);color:oklch(99% 0.006 60);border-color:var(--nf-red)}
.btn--primary:hover:not(:disabled){background:var(--nf-red-dark);border-color:var(--nf-red-dark)}
.btn--ghost{background:transparent;color:var(--ink-700);border-color:var(--ink-300)}
.btn--ghost:hover:not(:disabled){background:var(--ink-100);border-color:var(--ink-400)}
.btn--subtle{background:var(--ink-100);color:var(--ink-700);border-color:var(--ink-100)}
.btn--subtle:hover:not(:disabled){background:var(--ink-200)}
.btn--danger{background:var(--flaeche);color:var(--nf-red);border-color:var(--nf-red-soft2)}
.btn--danger:hover:not(:disabled){background:var(--nf-red-soft);border-color:var(--nf-red);color:var(--nf-red-dark)}
.btn--sm{padding:5px 10px;font-size:12px}
.btn--icon{padding:7px;width:32px;height:32px;justify-content:center}

/* Cards / Tables */
.card{background:var(--flaeche);border:1px solid var(--ink-200);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card__head{padding:14px 18px;border-bottom:1px solid var(--ink-200);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card__head h2{margin:0;font-size:14.5px;font-weight:600}
.card__body{padding:18px}
.card__body--flush{padding:0}

.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;padding:11px 16px;font-weight:600;color:var(--ink-500);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--ink-200);background:var(--ink-50)}
.table td{padding:13px 16px;border-bottom:1px solid var(--ink-200);color:var(--ink-700);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr.row-link{cursor:pointer;transition:background var(--transition)}
.table tr.row-link:hover{background:var(--ink-50)}
.table .nowrap{white-space:nowrap}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
/* Aktionszellen bleiben echte Tabellenzellen — display:flex bricht die
   Zeilenhöhe und schiebt die Knöpfe an den oberen Rand. */
.table .actions{text-align:right;white-space:nowrap;vertical-align:middle}
.table .actions>*{display:inline-flex;vertical-align:middle}
.table .actions>*+*{margin-left:6px}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:600;line-height:1.4;white-space:nowrap}
.badge--draft     {background:var(--ink-100);color:var(--ink-700)}
.badge--review    {background:var(--warn-soft);color:var(--warn)}
.badge--final     {background:var(--ok-soft);color:var(--ok)}
.badge--locked    {background:#EEE9FB;color:#5B3DBE}
.badge--pending   {background:var(--info-soft);color:var(--info)}
.badge--opened    {background:var(--warn-soft);color:var(--warn)}
.badge--submitted {background:var(--ok-soft);color:var(--ok)}
.badge--expired   {background:var(--ink-100);color:var(--ink-500)}
.badge--revoked   {background:var(--nf-red-soft);color:var(--nf-red-dark)}
.badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

/* Forms */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-700)}
.field .hint{font-size:11.5px;color:var(--ink-500)}
.input,.select,.textarea{width:100%;padding:9px 11px;border:1px solid var(--ink-300);border-radius:var(--radius-sm);font-size:13.5px;font-family:inherit;color:var(--ink-900);background:var(--flaeche);transition:border-color var(--transition), box-shadow var(--transition)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--nf-red);box-shadow:0 0 0 3px var(--nf-red-soft)}
.textarea{min-height:80px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--flaeche);border:1px solid var(--ink-200);border-radius:var(--radius);padding:16px 18px}
.stat__label{font-size:11.5px;font-weight:600;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em}
.stat__value{font-size:26px;font-weight:700;margin-top:4px;letter-spacing:-.02em}
.stat__delta{font-size:12px;color:var(--ink-500);margin-top:2px}
.stat__delta strong{color:var(--ok)}

/* Filter bar */
.filterbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:240px;max-width:420px}
.search input{padding-left:34px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-400);pointer-events:none}

/* Document detail */
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.section-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.section-list li{padding:11px 14px;border:1px solid var(--ink-200);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:space-between;background:var(--flaeche);cursor:pointer;transition:border-color var(--transition), background var(--transition)}
.section-list li:hover{border-color:var(--ink-400);background:var(--ink-50)}
.section-list li.is-active{border-color:var(--nf-red);background:var(--nf-red-soft);color:var(--nf-red-dark)}
.section-list .sec-title{font-weight:600;font-size:13px}
.section-list .sec-meta{font-size:11.5px;color:var(--ink-500)}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--ink-200);margin-bottom:18px}
.tab{padding:10px 16px;border:0;background:transparent;font-size:13px;font-weight:600;color:var(--ink-500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--transition), border-color var(--transition)}
.tab:hover{color:var(--ink-900)}
.tab.is-active{color:var(--nf-red);border-bottom-color:var(--nf-red)}

/* Hazards */
.hazard{border:1px solid var(--ink-200);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px;background:var(--flaeche)}
.hazard__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.hazard__title{font-weight:600;font-size:13.5px}
.hazard__meta{font-size:12px;color:var(--ink-500);margin-bottom:8px}
.hazard__actions{display:flex;gap:6px}
.risk-pill{padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}
.risk-low{background:#E8F4EC;color:#1F7A3A}
.risk-mid{background:#FBEFE0;color:#B8651A}
.risk-high{background:#FCE0E2;color:#B30410}

/* Audit log */
.log{display:flex;flex-direction:column}
.log__entry{display:grid;grid-template-columns:120px 32px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--ink-200);font-size:13px}
.log__entry:last-child{border-bottom:0}
.log__time{color:var(--ink-500);font-size:12px;font-variant-numeric:tabular-nums}
.log__avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:oklch(99% 0.006 60);font-weight:600;font-size:11px;align-self:start;margin-top:2px}
.log__action strong{color:var(--ink-900)}
.log__action .field-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--ink-100);padding:1px 5px;border-radius:3px;font-size:12px}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(28,27,27,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-backdrop.is-open{display:flex}
.modal{background:var(--flaeche);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.25);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;animation:modalIn 200ms cubic-bezier(.2,.8,.2,1)}
.modal--wide{max-width:720px}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal__head{padding:18px 22px;border-bottom:1px solid var(--ink-200);display:flex;align-items:center;justify-content:space-between}
.modal__head h2{margin:0;font-size:16px;font-weight:600}
.modal__body{padding:22px}
.modal__foot{padding:14px 22px;border-top:1px solid var(--ink-200);display:flex;justify-content:flex-end;gap:8px;background:var(--ink-50);border-radius:0 0 var(--radius) var(--radius)}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink-900);color:oklch(99% 0.006 60);padding:11px 16px;border-radius:var(--radius-sm);font-size:13px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:9px;z-index:200;transform:translateY(20px);opacity:0;transition:all 220ms cubic-bezier(.2,.8,.2,1);pointer-events:none;max-width:400px}
.toast.is-show{transform:none;opacity:1}
.toast.is-error{background:var(--nf-red-dark)}
.toast svg{width:16px;height:16px;color:#7DD89F;flex-shrink:0}
.toast.is-error svg{color:#FBC2C5}

/* Empty */
.empty{padding:40px 20px;text-align:center;color:var(--ink-500)}
.empty svg{width:36px;height:36px;color:var(--ink-300);margin-bottom:8px}

/* Share / checklist */
.share-card{background:var(--flaeche);border:20px solid transparent;border-image:var(--sq-karte) 20 fill / 20px / 0 stretch;border-radius:14px;box-shadow:var(--shadow-sm);margin-top:16px}
.checklist{margin:0;padding:0;list-style:none}
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--ink-200);font-size:13px}
.checklist li:last-child{border-bottom:0}
.checklist input[type=checkbox]{width:16px;height:16px;accent-color:var(--nf-red);margin-top:2px;flex-shrink:0;cursor:pointer}
.checklist label{cursor:pointer;flex:1}
.checklist .desc{color:var(--ink-500);font-size:12px;display:block;margin-top:1px}

/* Token display */
.token-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--ink-100);padding:10px 12px;border-radius:var(--radius-sm);
  font-size:12px;word-break:break-all;border:1px solid var(--ink-200);
  display:flex;align-items:center;gap:8px;justify-content:space-between
}

/* Mobile */
.menu-toggle{display:none;background:transparent;border:0;padding:6px;cursor:pointer;color:var(--ink-700)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;display:none}
.scrim.is-open{display:block}
@media (max-width: 900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-280px;top:0;height:100vh;width:260px;z-index:50;transition:left var(--transition);box-shadow:var(--shadow-md)}
  .sidebar.is-open{left:0}
  .menu-toggle{display:inline-flex}
  .stats{grid-template-columns:repeat(2,1fr)}
  .doc-grid{grid-template-columns:1fr}
  .content{padding:18px}
  .topbar{padding:12px 16px}
  .field-row,.field-row-3{grid-template-columns:1fr}
  .topbar__actions .btn-text{display:none}
}

/* Status indicator dots inline */
.status-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-500)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-400);display:inline-block;flex-shrink:0}
.dot--ok{background:var(--ok)}
.dot--warn{background:var(--warn)}
.dot--err{background:var(--nf-red)}

/* =========================================================
   v0.3.0 — Gefährdungsbeurteilung, Risikomatrix, Risiko-Chips
   ========================================================= */

/* Risikobänder (Hintergrund + Schriftfarbe) — werden mit Form-Klassen kombiniert */
.band-green  { background:oklch(95.5% 0.035 152); color:oklch(44% 0.11 152); }
.band-yellow { background:oklch(96% 0.05 92);    color:oklch(44% 0.09 86); }
.band-orange { background:oklch(95.5% 0.045 60); color:oklch(45% 0.12 55); }
.band-red    { background:oklch(94.5% 0.04 27);  color:oklch(44% 0.17 27); }

/* Risiko-Chip (R groß, S×E klein) */
.risk-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:36px;padding:3px 7px;border-radius:6px;font-weight:700;line-height:1.05}
.risk-chip b{font-size:14px}
.risk-chip i{font-size:9.5px;font-style:normal;font-weight:600;opacity:.78;margin-top:1px}

/* Segmented control (Risikomodell) */
.seg{display:flex;gap:4px;background:var(--ink-100);border-radius:var(--radius-sm);padding:4px}
.seg__btn{flex:1;border:0;background:transparent;padding:7px 8px;border-radius:5px;font-size:12.5px;font-weight:600;color:var(--ink-500);cursor:pointer;transition:all var(--transition)}
.seg__btn:hover{color:var(--ink-700)}
.seg__btn.is-active{background:var(--flaeche);color:var(--nf-red-dark);box-shadow:var(--shadow-sm)}

/* Kompakte Risikomatrix (Seitenspalte) */
.riskmatrix{border-collapse:collapse;width:100%;table-layout:fixed;margin-top:2px}
.riskmatrix th,.riskmatrix td{border:1px solid var(--ink-200);text-align:center;font-size:11px;height:30px;padding:0;font-variant-numeric:tabular-nums}
.riskmatrix .rm__corner{background:var(--ink-50)}
.riskmatrix .rm__s,.riskmatrix .rm__e{background:var(--ink-50);color:var(--ink-500);font-weight:700}
.riskmatrix .rm__cell{font-weight:700}
.rm__axes{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-400);margin-top:6px}
.rm__legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:9px}
.rm__leg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-500)}
.rm__leg i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* GBU-Tabelle */
.gbu-warn{display:flex;align-items:center;gap:9px;background:var(--nf-red-soft);color:var(--nf-red-dark);border:1px solid var(--nf-red-soft2);border-radius:var(--radius-sm);padding:9px 13px;font-size:12.5px;font-weight:600;margin-bottom:14px}
.gbu-warn svg{width:17px;height:17px;flex-shrink:0}
.gbu-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gbu-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:880px}
.gbu-table thead th{background:var(--ink-50);color:var(--ink-500);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--ink-200);text-align:left;vertical-align:middle}
.gbu-table thead th.gbu-grp{text-align:center;background:var(--ink-100)}
.gbu-table thead th.gbu-rh{text-align:center}
.gbu-table thead th.gbu-rh small{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-400)}
.gbu-table tbody td{padding:9px 10px;border-bottom:1px solid var(--ink-200);vertical-align:top;color:var(--ink-700)}
.gbu-table tbody tr:hover{background:var(--ink-50)}
.gbu-nr{width:36px;text-align:center;color:var(--ink-400);font-variant-numeric:tabular-nums}
.gbu-haz{font-weight:600;color:var(--ink-900)}
.gbu-sub{font-size:11px;color:var(--ink-500);margin-top:2px}
.gbu-muted{color:var(--ink-500)}
.gbu-rcell{text-align:center;vertical-align:middle;white-space:nowrap}
.gbu-resp{font-size:11.5px;line-height:1.45}
.gbu-resp strong{color:var(--ink-700)}
.gbu-actions{white-space:nowrap;text-align:right;width:1%}
.gbu-flag{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:700;color:var(--nf-red-dark);background:var(--nf-red-soft);padding:1px 8px;border-radius:99px}
.gbu-row--warn{background:#FFFBFB}
.gbu-row--warn:hover{background:#FFF3F4}

/* Maßnahmen-Vorschläge */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{border:1px solid var(--ink-300);background:var(--flaeche);color:var(--ink-700);border-radius:99px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;transition:all var(--transition);font-family:inherit}
.chip:hover{border-color:var(--nf-red);color:var(--nf-red-dark);background:var(--nf-red-soft)}

/* Risiko-Block im Modal */
.hz-risk-block{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 6px}
.hz-risk-col{border:1px solid var(--ink-200);border-radius:var(--radius-sm);padding:12px;background:var(--ink-50)}
.hz-risk-title{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);margin-bottom:8px}
.hz-rpreview{display:flex;align-items:center;gap:9px;margin-top:4px;min-height:36px}
.hz-band{font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px}
.hz-hint{font-size:12px;margin-top:7px;min-height:16px;color:var(--ink-500)}
.hz-hint.is-warn{color:var(--nf-red-dark);font-weight:600}

@media (max-width: 720px){
  .hz-risk-block{grid-template-columns:1fr}
}

/* =========================================================
   v0.4.0 — Zurück-Link, Präventionszeit-Panel
   ========================================================= */
.backlink{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-500);margin-bottom:6px}
.backlink:hover{color:var(--nf-red-dark);text-decoration:none}
.backlink svg{width:14px;height:14px}

.pz-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.pz-inputs{min-width:0}
.pz-result{background:var(--ink-50);border:1px solid var(--ink-200);border-radius:var(--radius-sm);padding:16px}
.pz-total{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--ink-200)}
.pz-total__num{font-size:30px;font-weight:800;color:var(--nf-red-dark);line-height:1;font-variant-numeric:tabular-nums}
.pz-total__lbl{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);margin-top:6px}
.pz-total__raw{font-size:11.5px;color:var(--ink-400);margin-top:2px}
.pz-mode{font-size:12px;color:var(--ink-700);margin:12px 0;padding:8px 10px;border-radius:var(--radius-sm)}
.pz-mode.is-betreuung{background:var(--ok-soft);color:var(--ok)}
.pz-mode.is-begehung{background:var(--info-soft);color:var(--info)}
.pz-split{display:flex;flex-direction:column;gap:2px}
.pz-split__row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--ink-200)}
.pz-split__row span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.pz-split__row--nofire{border-bottom:0;margin-top:4px;padding-top:10px;border-top:2px solid var(--ink-200)}
.pz-split__row--nofire span{color:var(--nf-red-dark);font-weight:700}
.pz-under{color:var(--nf-red-dark)}
.pz-warn{margin-top:10px;background:var(--nf-red-soft);color:var(--nf-red-dark);border:1px solid var(--nf-red-soft2);border-radius:var(--radius-sm);padding:8px 11px;font-size:11.5px;font-weight:600}

@media (max-width: 760px){
  .pz-grid{grid-template-columns:1fr}
}

/* ===== v0.5.1 — Schreibschutz-Banner, Gruppenzeilen, PZ-Untertitel ===== */
.ro-banner{display:flex;align-items:center;gap:10px;background:var(--warn-soft);color:var(--warn);border:1px solid #F0D9B8;border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;margin-bottom:14px}
.ro-banner svg{width:18px;height:18px;flex-shrink:0}
.gbu-table tbody tr.gbu-group td{background:var(--ink-100);font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-700);padding:6px 10px}
.gbu-table tbody tr.gbu-group:hover td{background:var(--ink-100)}
.pz-sub{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);margin-bottom:8px}
.pz-three{grid-template-columns:1fr 1fr 1fr}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--ink-50);color:var(--ink-500);cursor:not-allowed}
.seg__btn:disabled{cursor:not-allowed;opacity:.6}

/* =========================================================
   v0.6.0 — Aufwertungsschicht: Karten mit krümmungsstetigen Ecken,
   Reiter, Kennzahlen, Ringe, Balken, Zeitstrahl, Erinnerungen
   ========================================================= */

/* Karten */
.card{
  background:var(--flaeche);
  border:20px solid transparent;
  border-image:var(--sq-karte) 20 fill / 20px / 0 stretch;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  padding:0;
}
.card__head{padding:0 0 16px;border-bottom:1px solid var(--ink-200);margin-bottom:16px;display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.card__head h2{font-size:15px;font-weight:560;letter-spacing:-0.018em;margin:0}
.card__body{padding:0}
.card__body--flush{margin:0 0 -4px;padding:0}   /* kein Überstand: overflow:hidden der Karte würde ihn abschneiden */
.card__body--flush .table{border-radius:0 0 14px 14px;overflow:hidden}
.card__body--flush .empty{padding:24px 18px}

/* Knöpfe */
.btn{border-radius:99px;font-weight:540;letter-spacing:-0.008em;transition:transform .16s var(--aus),background .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.975)}
.btn--primary{box-shadow:0 1px 2px oklch(46% 0.185 27 / .3),0 4px 12px oklch(46% 0.185 27 / .18)}
.btn--ghost{box-shadow:inset 0 0 0 1px var(--ink-200),var(--shadow-sm);background:var(--flaeche)}
.btn--icon{border-radius:50%}

/* Reiter im Dokument */
.reiter{position:relative;display:flex;gap:2px;padding:4px;margin-bottom:18px;border-radius:99px;background:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-200);overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.reiter::-webkit-scrollbar{display:none}
.reiter__knopf{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:520;color:var(--ink-500);padding:8px 15px;border-radius:99px;transition:color .3s var(--aus)}
.reiter__knopf:hover{color:var(--ink-700)}
.reiter__knopf.is-an{color:var(--ink-900);font-weight:560}
.reiter__zahl{font-family:"Geist Mono","Geist",monospace;font-size:10.5px;font-weight:500;padding:1px 6px;border-radius:99px;background:oklch(45% 0.012 44 / .09);color:var(--ink-500)}
.reiter__zahl--warn{background:var(--nf-red-soft);color:var(--nf-red-dark)}
.reiter__anzeiger{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:99px;background:var(--flaeche);box-shadow:var(--shadow-sm);transition:transform .45s var(--schub),width .45s var(--schub)}

/* Kennzahlen */
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kachel{background:var(--flaeche);border:20px solid transparent;border-image:var(--sq-karte) 20 fill / 20px / 0 stretch;border-radius:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;transition:transform .5s var(--aus),box-shadow .5s var(--aus)}
.kachel:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kachel__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.kachel__label{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-400)}
.kachel__wert{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;letter-spacing:-0.035em;line-height:1}
.kachel__einheit{font-size:14px;font-weight:450;color:var(--ink-400)}
.kachel__zusatz{font-size:12px;color:var(--ink-500)}
.kachel--achtung{background:oklch(98.4% 0.013 27);border-image:var(--sq-warn) 20 fill / 20px / 0 stretch}
.kachel--achtung .kachel__wert{color:var(--nf-red-dark)}
.marke{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}
.marke--zahl{letter-spacing:0;font-size:11.5px;font-variant-numeric:tabular-nums;text-transform:none}
.mini{width:52px;height:8px}
.mini--ring{width:26px;height:26px}

/* Überblicks-Raster */
.uebersicht{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:start}
.u-4{grid-column:span 4}.u-5{grid-column:span 5}.u-7{grid-column:span 7}.u-8{grid-column:span 8}.u-12{grid-column:span 12}

/* Ringe */
.ringe{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ringgruppe{display:flex;flex-direction:column;align-items:center;gap:8px}
.ringgruppe__lbl{font-size:11.5px;color:var(--ink-500)}
.ring{overflow:visible}
.ring__wert{font-size:21px;font-weight:580;letter-spacing:-0.03em;fill:var(--ink-900);font-variant-numeric:tabular-nums}
.ring__lbl{font-size:9px;letter-spacing:.05em;text-transform:uppercase;fill:var(--ink-400)}
.pfeil-gross{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink-100);color:var(--ink-500);box-shadow:inset 0 0 0 1px var(--ink-200)}
.pfeil-gross svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stufen{display:flex;flex-direction:column;gap:6px;min-width:146px}
.stufe-zeile{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-500)}
.stufe-zeile i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.stufe-zeile b{margin-left:auto;font-family:"Geist Mono","Geist",monospace;font-weight:500;color:var(--ink-700)}
.i-green{background:var(--stufe-gering)}.i-yellow{background:var(--stufe-mittel)}
.i-orange{background:var(--stufe-erhoeht)}.i-red{background:var(--stufe-hoch)}

/* Wirkungszeile */
.wirkung{margin-top:18px;padding-top:15px;border-top:1px solid var(--ink-200)}
.wirkung__zeile{display:flex;align-items:center;gap:12px;margin-bottom:7px}
.wirkung__lbl{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);width:64px;flex:0 0 auto}
.wirkung__bar{display:flex;gap:3px;flex:1;height:9px}
.wirkung__bar i{border-radius:3px;display:block;min-width:6px}
.wirkung__text{margin:10px 0 0;font-size:12.5px;color:var(--ink-500);max-width:56ch}

/* Balken je Bereich */
.bbar{position:relative;padding-bottom:20px}
.bbar__gitter{position:absolute;inset:0 0 20px 0;pointer-events:none}
.bbar__gitter span{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-200);transform:translateX(-.5px)}
.bbar__zeile{margin-bottom:14px;position:relative}
.bbar__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.bbar__name{font-size:12.5px;color:var(--ink-700)}
.bbar__wert{font-size:11.5px;color:var(--ink-500);white-space:nowrap;background:var(--flaeche);padding-left:7px;position:relative;z-index:1}
.bbar__pfeil{color:var(--ink-400);margin:0 4px}
.bbar__spur{height:7px;margin-bottom:3px}
.bbar__spur i{display:block;height:100%;border-radius:3.5px;transform-origin:left center}
.bbar__vor.stufe--green{background:var(--stufe-gering)}
.bbar__vor.stufe--yellow{background:var(--stufe-mittel)}
.bbar__vor.stufe--orange{background:var(--stufe-erhoeht)}
.bbar__vor.stufe--red{background:var(--stufe-hoch)}
.bbar__nach{background:var(--ink-zart)}
.bbar__achse{position:relative;height:14px}
.bbar__achse span{position:absolute;transform:translateX(-50%);font-family:"Geist Mono","Geist",monospace;font-size:9.5px;color:var(--ink-400)}
.bbar__achse .ist-start{transform:none}
.bbar__achse .ist-ende{transform:translateX(-100%)}

/* Zeitstrahl */
.zstrahl{--spalte:44%}
.zstrahl__kopf{position:relative;height:14px;margin-left:calc(var(--spalte) + 12px);margin-bottom:6px}
.zstrahl__kopf span{position:absolute;transform:translateX(-50%);font-family:"Geist Mono","Geist",monospace;font-size:9.5px;color:var(--ink-400);white-space:nowrap}
.zstrahl__kopf .ist-start{transform:none;left:0}
.zstrahl__kopf .ist-ende{transform:translateX(-100%)}
.zstrahl__zeile{display:flex;align-items:center;gap:12px;padding:7px 0}
.zstrahl__text{width:var(--spalte);flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
.zstrahl__name{font-size:12.5px;color:var(--ink-700);line-height:1.25}
.zstrahl__datum{font-family:"Geist Mono","Geist",monospace;font-size:10.5px;color:var(--ink-400)}
.zstrahl__spur{flex:1;position:relative;height:14px;border-top:1px dotted var(--ink-300)}
.zstrahl__heute{position:absolute;top:-11px;bottom:-11px;width:1.5px;background:repeating-linear-gradient(to bottom,var(--nf-red) 0 2px,transparent 2px 6px)}
.zstrahl__punkt{position:absolute;top:-5px;width:11px;height:11px;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 3px var(--flaeche)}
.zstrahl__punkt.ist-ueber{background:var(--stufe-hoch)}
.zstrahl__punkt.ist-bald{background:var(--stufe-erhoeht)}
.zstrahl__punkt.ist-ok{background:var(--stufe-gering)}

/* Matrix mit Belegung */
.matrix{position:relative;padding-left:22px;display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto auto;gap:6px}
.matrix__skala--s{grid-area:2/2;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
.matrix__skala--e{grid-area:1/1;align-self:stretch;display:grid;gap:6px;align-items:center;justify-items:center}
.matrix__skala span{font-size:10.5px;color:var(--ink-400);font-family:"Geist Mono","Geist",monospace}
.matrix__raster{grid-area:1/2;display:grid;gap:6px}
.matrix__achse{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.matrix__achse--s{grid-area:3/2;text-align:center;margin-top:2px}
.matrix__achse--e{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg)}
.zelle{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;position:relative;transition:transform .32s var(--aus),box-shadow .32s var(--aus)}
.zelle.stufe--green{background:oklch(95.5% 0.035 152)}
.zelle.stufe--yellow{background:oklch(96% 0.05 92)}
.zelle.stufe--orange{background:oklch(95.5% 0.045 60)}
.zelle.stufe--red{background:oklch(94.5% 0.04 27)}
.zelle__r{position:absolute;top:5px;left:7px;font-size:10px;font-family:"Geist Mono","Geist",monospace;color:var(--ink-500);opacity:.55}
.zelle__punkte{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center}
.zelle__punkte--nach{display:none}
.zelle__punkte i{width:13px;height:13px;border-radius:50%;display:block;box-shadow:0 0 0 3px var(--flaeche),0 1px 3px oklch(30% 0.02 45 / .2)}
.stufe--green .zelle__punkte i{background:var(--stufe-gering)}
.stufe--yellow .zelle__punkte i{background:var(--stufe-mittel)}
.stufe--orange .zelle__punkte i{background:var(--stufe-erhoeht)}
.stufe--red .zelle__punkte i{background:var(--stufe-hoch)}
.matrix.zeigt-nach .zelle__punkte--vor{display:none}
.matrix.zeigt-nach .zelle__punkte--nach{display:flex}
.zelle:hover,.zelle:focus-visible{transform:scale(1.06);box-shadow:var(--shadow-sm);outline:none;z-index:2}

/* Segmentierte Umschaltung */
.segment{position:relative;display:inline-flex;padding:3px;border-radius:99px;background:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-200)}
.segment__knopf{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:12px;font-weight:530;color:var(--ink-500);padding:6px 14px;border-radius:99px;transition:color .28s var(--aus)}
.segment__knopf.is-an{color:var(--ink-900)}
.segment__anzeiger{position:absolute;top:3px;left:3px;height:calc(100% - 6px);border-radius:99px;background:var(--flaeche);box-shadow:var(--shadow-sm);transition:transform .42s var(--schub),width .42s var(--schub)}

/* Erinnerungen */
.erinnerungen{list-style:none;margin:0;padding:0}
.erin{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ink-200)}
.erin:last-child{border-bottom:0;padding-bottom:0}
.erin:first-child{padding-top:0}
.erin__marke{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--ok-flaeche);position:relative}
.erin--ueber .erin__marke{background:var(--nf-red)}
.erin--bald .erin__marke{background:var(--warn-flaeche)}
.erin--ueber .erin__marke::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--nf-red);animation:puls 2.8s var(--aus) infinite}
@keyframes puls{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.erin__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.erin__titel{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erin__kontext{font-size:11.5px;color:var(--ink-400)}
.erin__wann{font-size:11.5px;font-weight:520;color:var(--ink-500);white-space:nowrap;flex:0 0 auto}
.erin--ueber .erin__wann{color:var(--nf-red-dark)}
.erin--bald .erin__wann{color:var(--warn)}

/* Vollständigkeit */
.fortschritt{display:flex;align-items:center;gap:14px}
.fortschritt__schiene{flex:0 0 110px;height:6px;border-radius:99px;background:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-200);overflow:hidden}
.fortschritt__wert{height:100%;border-radius:99px;background:var(--ok-flaeche);transform-origin:left center;transition:transform 1s var(--aus)}
.fortschritt__txt{font-size:12.5px;line-height:1.4}
.fortschritt__txt b{font-weight:560}
.fortschritt__offen{display:block;color:var(--ink-500)}
.hinweis-zeile{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--ok);background:var(--ok-soft);padding:8px 12px;border-radius:10px}
.hinweis-zeile svg{width:14px;height:14px;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Eintreten */
.js .auf{opacity:0;transform:translateY(12px) scale(.99);filter:blur(2px)}
.auf.da{opacity:1;transform:none;filter:none;transition:opacity .6s var(--aus) calc(var(--i,0) * 50ms),transform .6s var(--aus) calc(var(--i,0) * 50ms),filter .6s var(--aus) calc(var(--i,0) * 50ms)}
.js .ring__seg{opacity:0;transform:scale(.92)}
.da .ring__seg{opacity:1;transform:none;transition:opacity .5s var(--aus) calc(var(--i,0) * 80ms + 120ms),transform .55s var(--schub) calc(var(--i,0) * 80ms + 120ms)}
.ring__seg{transform-origin:center;transform-box:fill-box}
.js .bbar__spur i{transform:scaleX(0)}
.da .bbar__spur i{transform:none;transition:transform .8s var(--aus) calc(var(--i,0) * 60ms + 100ms)}
.js .zelle__punkte i{transform:scale(0)}
.da .zelle__punkte i{transform:none;transition:transform .5s var(--schub) calc(var(--i,0) * 60ms + 200ms)}
.js .zstrahl__punkt{opacity:0;transform:translateX(-50%) scale(.6)}
.da .zstrahl__punkt{opacity:1;transform:translateX(-50%) scale(1);transition:opacity .5s var(--aus) calc(var(--i,0) * 60ms + 140ms),transform .5s var(--schub) calc(var(--i,0) * 60ms + 140ms)}

:where(.btn,.reiter__knopf,.segment__knopf,.zelle):focus-visible{outline:2px solid var(--nf-red);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .auf,.js .ring__seg,.js .zstrahl__punkt{opacity:1;transform:none;filter:none}
  .js .bbar__spur i,.js .zelle__punkte i{transform:none}
}

@media (max-width:1080px){
  .u-7,.u-8,.u-4,.u-5{grid-column:span 12}   /* gestapelte Spalten untereinander, keine halbe Zeile */
  .kacheln{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .u-4,.u-5,.u-7,.u-8{grid-column:span 12}
  .kacheln{grid-template-columns:repeat(2,1fr);gap:10px}
  .kachel__wert{font-size:24px}
  .kachel__kopf{flex-wrap:wrap;gap:6px}
  .kachel__label{white-space:normal}
  .card,.kachel{border-width:16px;border-image-width:20px;border-radius:14px}
  .card__body--flush{margin:0 0 -4px}
  .ringe{gap:14px}
  .stufen{width:100%}
  .zstrahl{--spalte:50%}
  .pfeil-gross{transform:rotate(90deg)}
}

/* Tabellen scrollen innerhalb ihrer Karte, nicht die ganze Seite */
.card__body--flush{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card__body--flush>.table{min-width:560px}
.card{max-width:100%;overflow:hidden}
.main,.content{min-width:0}
@media (max-width:760px){
  .card__body--flush>.table{min-width:0}
  .table th,.table td{padding:9px 10px;font-size:12.5px}
}

/* Rasterspalten dürfen von breiten Tabellen nicht aufgeblasen werden */
.doc-grid>*,.uebersicht>*,.admin-grid>*{min-width:0}
.admin-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:920px}


/* Handy: Kennzahlen zu zweit bis hinunter zu kleinen Geräten, Überschriften dürfen umbrechen */
@media (max-width:760px){
  .card__head{flex-wrap:wrap;align-items:flex-start;gap:4px}
  .card__head .hint{flex:1 0 100%;font-size:11.5px}
  .kacheln{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:359px){ .kacheln{grid-template-columns:1fr} }

/* Archiv-Einstieg im Admin-Panel */
.archiv-liste{display:flex;flex-direction:column;gap:8px}
.archiv-eintrag{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-200);color:var(--ink-700);text-decoration:none;transition:background var(--transition),transform var(--transition)}
.archiv-eintrag:hover{background:var(--flaeche);transform:translateY(-1px);text-decoration:none;box-shadow:inset 0 0 0 1px var(--ink-300),var(--shadow-sm)}
/* Feste Breite, damit die Titel trotz unterschiedlich langer Nummern
   (v0.3.0 gegen v0.6.11) auf einer Kante beginnen. */
.archiv-eintrag__nr{font-family:"Geist Mono","Geist",monospace;font-weight:600;font-size:12px;color:var(--nf-red-dark);background:var(--nf-red-soft);border-radius:99px;padding:2px 9px;flex:0 0 auto;
  min-width:72px;text-align:center;align-self:flex-start}
.archiv-eintrag__txt{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archiv-eintrag__pfad{font-family:"Geist Mono","Geist",monospace;font-size:11.5px;color:var(--ink-400);flex:0 0 auto}

/* =========================================================
   v0.6.2 — Gestaltungssystem auf die gesamte Hülle angewandt
   (Seitenleiste, Kopfleiste, Kennzahlen, Tabellen, Anmeldung)
   ========================================================= */

/* ---- Seitenleiste ---- */
.sidebar{background:var(--flaeche);border-right:1px solid var(--ink-200);padding:0}
.sidebar__brand{padding:22px 20px 16px;border-bottom:0}
.sidebar__brand img{max-width:168px}
.sidebar__app-name{margin-top:14px;font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--ink-400)}
.sidebar__nav{padding:8px 12px}
.sidebar__group{margin-bottom:22px}
.sidebar__label{font-size:10px;font-weight:600;letter-spacing:.13em;color:var(--ink-400);padding:0 12px 8px}
.nav-item{gap:11px;padding:9px 12px;border-radius:10px;font-size:13.5px;font-weight:480;color:var(--ink-700);
  transition:background .24s var(--aus),color .24s var(--aus),transform .24s var(--aus)}
.nav-item:hover{background:var(--ink-100)}
.nav-item:active{transform:scale(.985)}
.nav-item.is-active{background:var(--nf-red-soft);color:var(--nf-red-dark);font-weight:580;box-shadow:inset 0 0 0 1px var(--nf-red-soft2)}
.nav-item svg{width:17px;height:17px;color:var(--ink-400)}
.nav-item.is-active svg{color:var(--nf-red)}
.sidebar__user{border-top:1px solid var(--ink-200);padding:14px 16px;background:var(--ink-50)}
.user-meta strong{font-weight:560;letter-spacing:-0.01em}
.logout-btn{border-radius:10px;transition:background .24s var(--aus)}

/* ---- Kopfleiste ---- */
.topbar{background:oklch(99.2% 0.003 60 / .82);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--ink-200);padding:12px 28px}
.crumbs{font-size:12.5px;color:var(--ink-400);display:flex;align-items:center;gap:7px}
.crumbs .sep{color:var(--ink-300)}
.crumbs strong,.crumbs>span:last-child{color:var(--ink-700);font-weight:530}

/* ---- Seitenkopf ---- */
.page-head h1{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.14}
.page-head p{font-size:13px;color:var(--ink-500);margin-top:6px}
.backlink{font-weight:530}

/* ---- Kennzahlen im Dashboard (gleiche Sprache wie der Überblick) ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat{background:var(--flaeche);border:20px solid transparent;border-image:var(--sq-karte) 20 fill / 20px / 0 stretch;
  border-radius:18px;box-shadow:var(--shadow-sm);padding:0;display:flex;flex-direction:column;gap:7px;
  transition:transform .5s var(--aus),box-shadow .5s var(--aus)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat__label{font-size:10.5px;font-weight:600;letter-spacing:.11em;color:var(--ink-400)}
.stat__value{font-size:30px;font-weight:600;letter-spacing:-.035em;margin:0;font-variant-numeric:tabular-nums;line-height:1}
.stat__delta{font-size:12px;color:var(--ink-500);margin:0}
.stat__delta strong{color:var(--ok);font-weight:560}

/* ---- Tabellen ---- */
.table{font-size:13px}
.table th{padding:10px 2px;font-size:10.5px;font-weight:600;letter-spacing:.11em;color:var(--ink-400);
  background:transparent;border-bottom:1px solid var(--ink-200)}
.table td{padding:13px 2px;border-bottom:1px solid var(--ink-200);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tr.row-link{transition:background .22s var(--aus)}
.table tr.row-link:hover{background:var(--ink-50)}
.table tr.row-link:hover td:first-child{box-shadow:inset 3px 0 0 var(--nf-red);border-radius:3px 0 0 3px}
.table strong{font-weight:560}

/* ---- Abzeichen ---- */
.badge{font-weight:530;padding:3px 10px 3px 8px}
.badge--dot::before{width:6px;height:6px}

/* ---- Leerzustände ---- */
.empty{padding:44px 20px;color:var(--ink-500)}
.empty svg{width:34px;height:34px;color:var(--ink-300);margin-bottom:10px}

/* ---- Eingabefelder ---- */
.input,.select,.textarea{border:0;background:var(--ink-100);border-radius:10px;padding:10px 12px;
  box-shadow:inset 0 0 0 1px var(--ink-200);transition:box-shadow .22s var(--aus),background .22s ease;font-family:inherit}
.input:focus,.select:focus,.textarea:focus{outline:none;background:var(--flaeche);
  box-shadow:inset 0 0 0 1.5px var(--nf-red),0 0 0 4px var(--nf-red-soft)}
.field label{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}

/* ---- Dialoge ---- */
.modal{border-radius:20px;box-shadow:var(--shadow-md);background:var(--flaeche)}
.modal__head{border-bottom:1px solid var(--ink-200)}
.modal__head h2{font-weight:570;letter-spacing:-.02em}
.modal__foot{border-top:1px solid var(--ink-200);background:var(--ink-50);border-radius:0 0 20px 20px}
.modal-backdrop{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* ---- Anmeldeseite ---- */
.login-page{background:var(--ink-50)}
.login-card{background:var(--flaeche);border:0;border-radius:22px;box-shadow:var(--shadow-md);padding:34px 32px}
.login-card h1{font-size:22px;font-weight:600;letter-spacing:-.025em}
.login-card .sub{color:var(--ink-500);font-size:13px}
.demo-creds{background:var(--ink-50);border-radius:12px;box-shadow:inset 0 0 0 1px var(--ink-200);font-size:12px}

/* ---- Kundenseite (öffentlicher Link) ---- */
.cust-card{border-radius:22px;box-shadow:var(--shadow-md);border:0;background:var(--flaeche)}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .stat{border-width:16px;border-image-width:20px;border-radius:14px}
  .stat__value{font-size:24px}
  .page-head h1{font-size:22px}
  .topbar{padding:10px 16px}
}
@media (max-width:359px){ .stats{grid-template-columns:1fr} }

/* Dashboard: Tabelle und Termine nebeneinander */
.dash-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
.dash-grid>*{min-width:0}
.stat__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.stat--achtung{background:oklch(98.4% 0.013 27);border-image:var(--sq-warn) 20 fill / 20px / 0 stretch}
.stat--achtung .stat__value{color:var(--nf-red-dark)}
.erin[role="button"]{cursor:pointer;transition:background .2s var(--aus)}
.erin[role="button"]:hover{background:var(--ink-50)}
.erin[role="button"]:focus-visible{outline:2px solid var(--nf-red);outline-offset:-2px;border-radius:8px}
@media (max-width:1080px){ .dash-grid{grid-template-columns:1fr} }

/* gleiche Regel für die Gefährdungstabelle */
.gbu-table .gbu-actions{text-align:right;white-space:nowrap;vertical-align:middle}
.gbu-table .gbu-actions>*{display:inline-flex;vertical-align:middle}
.gbu-table .gbu-actions>*+*{margin-left:6px}

/* Tippflächen: auf Touchgeräten mindestens 40 px, auch für Textlinks */
.logout-btn{width:36px;height:36px;display:grid;place-items:center}
.backlink,.card__head a,.page-head a,.crumbs a{display:inline-flex;align-items:center;min-height:30px}
@media (pointer:coarse){
  .logout-btn{width:44px;height:44px}
  .btn--icon{width:40px;height:40px;padding:9px}
  .backlink,.card__head a,.page-head a,.erin__wann{min-height:40px}
  .nav-item{padding:12px}
  .reiter__knopf{padding:11px 15px}
  .segment__knopf{padding:9px 14px}
  .table .actions>*+*{margin-left:10px}
}

/* Inline-Links im Karteninhalt bekommen überall eine greifbare Höhe */
.card__body a,.card a:not(.btn){display:inline-flex;align-items:center;min-height:24px}

/* Tippflächen: schmale Geräte ODER Touchbedienung (auch große Tablets) */
@media (max-width:1024px), (hover:none), (pointer:coarse){
  .btn{min-height:40px}
  .btn--sm{min-height:38px;padding:9px 14px}
  .btn--icon,.btn--icon.btn--sm{min-height:38px;min-width:38px;width:auto;padding:9px}
  .logout-btn{width:42px;height:42px}
  .backlink,.card__head a,.page-head a,.card__body a,.card a:not(.btn),.crumbs a{display:inline-flex;align-items:center;min-height:38px}
  .nav-item{padding:12px}
  .reiter__knopf{padding:11px 15px}
  .segment__knopf{padding:9px 14px}
}

/* Compliance-Zeilen dürfen auf schmalen Geräten umbrechen */
.status-row{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;line-height:1.45}
.status-row .dot{margin-top:5px;flex:0 0 auto}

/* Maßnahmen-Vorschläge greifbar machen */
.chip{min-height:32px;padding:6px 12px;display:inline-flex;align-items:center}
@media (max-width:1024px), (hover:none), (pointer:coarse){ .chip{min-height:38px;padding:9px 14px} }

/* =========================================================
   v0.6.6 — Kartenköpfe, Tabellenandeutung, Info-Zeilen, Matrix
   ========================================================= */

/* Kartenkopf: der Zusatztext rutscht bei Enge immer auf eine eigene Zeile */
.card__head{flex-wrap:wrap;align-items:baseline;row-gap:4px}
.card__head h2{flex:1 1 auto;min-width:0}
.card__head .hint,.card__head>span:last-child:not(.badge){flex:0 1 auto;text-align:right}
@media (max-width:1200px){
  /* gleiche Spezifität wie die Basisregel, sonst greift sie nicht */
  .card__head .hint,.card__head>span:last-child:not(.badge){flex:1 0 100%;text-align:left;margin-top:2px}
}

/* Tabellen: sichtbarer Hinweis, dass seitlich gescrollt werden kann */
.card__body--flush{position:relative}
.card__body--flush.ist-scrollbar{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);
}
.card__body--flush.ist-ende{-webkit-mask-image:none;mask-image:none}
.card__body--flush>.table{min-width:0}

/* Info-Zeilen (Kundendaten) dürfen umbrechen statt zu zerquetschen */
.info-zeile{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--ink-200)}
.info-zeile:last-child{border-bottom:0}
.info-zeile>span:first-child{color:var(--ink-500);flex:0 0 auto}
.info-zeile>span:last-child{text-align:right;min-width:0;overflow-wrap:anywhere}

/* Matrix: Zellen wachsen nicht ins Unendliche */
.matrix__raster{max-width:340px}
.matrix{max-width:380px}
.matrix__achse--e{font-size:9.5px}

/* Leeransicht im Überblick */
.leer-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 16px 18px;max-width:46ch;margin:0 auto}
.leer-block svg{width:34px;height:34px;color:var(--ink-300)}
.leer-block h3{font-size:15px;font-weight:560;margin:0}
.leer-block p{margin:0;font-size:13px;color:var(--ink-500);line-height:1.6}

/* =========================================================
   Tabellen in schmalen Behältern: gestapelte Zeilen statt
   seitlichem Scrollen (Behälterabfrage, kein Viewport-Bezug)
   ========================================================= */
.card__body--flush{container-type:inline-size}

@container (max-width: 560px){
  .card__body--flush>.table{min-width:0}
  .card__body--flush>.table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .card__body--flush>.table,
  .card__body--flush>.table tbody,
  .card__body--flush>.table tr{display:block;width:100%}
  .card__body--flush>.table tr{padding:12px 0;border-bottom:1px solid var(--ink-200)}
  .card__body--flush>.table tr:last-child{border-bottom:0}
  .card__body--flush>.table td{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:3px 0;border:0;text-align:right}
  .card__body--flush>.table td:first-child{justify-content:flex-start;text-align:left;padding-bottom:6px}
  .card__body--flush>.table td[data-label]::before{
    content:attr(data-label);flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-400);text-align:left}
  .card__body--flush>.table td:empty{display:none}
  .card__body--flush>.table td.actions{justify-content:flex-end;padding-top:8px}
  /* Zellen ohne Beschriftung (Pfeil, Symbole) gehören nach rechts */
  .card__body--flush>.table td:not([data-label]):not(:first-child){justify-content:flex-end}
  .card__body--flush>.table td.num{justify-content:space-between}
  .card__body--flush>.table tr.row-link:hover td:first-child{box-shadow:none}
  .card__body--flush>.table tr.row-link:hover{background:var(--ink-50)}
  .card__body--flush.ist-scrollbar{-webkit-mask-image:none;mask-image:none}
}

/* =========================================================
   v0.6.7 — Keine Lücken: Zeilen füllen, Karten auf gleiche Höhe,
   Kacheln groß genug und anklickbar
   ========================================================= */

/* Karten einer Zeile enden auf gleicher Höhe, Inhalt verteilt sich darin */
/* Karten hängen an ihrer natürlichen Höhe und werden in Spalten gestapelt —
   erzwungene Zeilenhöhen erzeugen sonst Leerraum innerhalb der Karten. */
.uebersicht,.dash-grid,.doc-grid{align-items:start}
.admin-grid{align-items:start}
.u-spalte{display:flex;flex-direction:column;gap:16px;min-width:0}
.card{display:flex;flex-direction:column}
.card>.empty,.card>.leer-block{margin-block:auto}

.admin-saeule{display:flex;flex-direction:column;gap:16px;min-width:0}
.admin-saeule>.card{flex:0 0 auto}
.admin-saeule>.card:last-child{flex:1 1 auto}

/* Kennzahlen: verlässliche Mindesthöhe, Inhalt oben und unten verankert */
.kachel,.stat{min-height:122px;justify-content:space-between;text-align:left}
.kachel__wert,.stat__value{margin-top:2px}

/* anklickbare Kennzahl */
.kachel--aktiv{border-width:20px;cursor:pointer;font:inherit;color:inherit;position:relative;
  transition:transform .4s var(--aus),box-shadow .4s var(--aus)}
.kachel--aktiv:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kachel--aktiv:active{transform:translateY(0) scale(.995)}
.kachel__aktion{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:11.5px;font-weight:540;
  color:var(--ink-400);transition:color .24s var(--aus)}
.kachel__aktion svg{width:12px;height:12px;transition:transform .3s var(--aus)}
.kachel--aktiv:hover .kachel__aktion{color:var(--nf-red-dark)}
.kachel--aktiv:hover .kachel__aktion svg{transform:translateX(2px)}
.kachel--achtung .kachel__aktion{color:var(--nf-red-dark)}

/* Offene DOK-VO-Punkte über die volle Breite in Spalten */
.offen-liste{margin:14px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-500);line-height:1.7;
  columns:2;column-gap:32px}
@media (max-width:760px){ .offen-liste{columns:1} }

/* Inhalte, die mitwachsen sollen, statt Leerraum zu lassen */
.offen-liste{columns:1}
@media (min-width:1100px){ .card.u-12 .offen-liste{columns:2;column-gap:32px} }


/* Kundenseite: Seitenspalte rückt früher unter die Hauptspalte,
   sonst steht sie neben einer kurzen Dokumentenliste ins Leere */
@media (max-width:1100px){ .doc-grid{grid-template-columns:minmax(0,1fr)} }

/* =========================================================
   v0.6.9 — Lesbare Feldbeschriftungen, ruhige Tabellenköpfe
   ========================================================= */

/* Versalien nur für kurze Abschnittsmarken, nicht für Feldnamen */
.field label{font-size:12px;font-weight:530;letter-spacing:-0.004em;text-transform:none;color:var(--ink-500)}
.feld-hinweis{align-self:end;margin:0 0 9px;font-size:11.5px;color:var(--ink-400);line-height:1.45}
.pz-sub__zusatz{text-transform:none;letter-spacing:0;font-weight:450;color:var(--ink-400);margin-left:6px}

/* Zahlenfelder brauchen keine volle Spaltenbreite */
.pz-inputs .input{max-width:220px}

/* Tabellenkopf der Gefährdungsbeurteilung: eine Zeile, kein abgesetzter Block */
.gbu-table thead th{background:transparent;border-bottom:1px solid var(--ink-200);vertical-align:bottom}
.gbu-table thead th.gbu-rh{text-align:center}
.gbu-table thead th.gbu-rh small{display:block;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--ink-400);font-size:9.5px;margin-top:2px}
.gbu-table tbody tr.gbu-group td{background:var(--ink-100)}
.gbu-table tbody tr.gbu-group .gbu-muted{font-weight:500;text-transform:none;letter-spacing:0;margin-left:8px}

/* Audit-Log: lesbare Aktionen statt technischer Schlüssel */
.audit-aktion{display:inline-block;font-size:12px;font-weight:530;color:var(--ink-700);background:var(--ink-100);
  padding:2px 9px;border-radius:99px;white-space:nowrap}
.audit-alt{color:var(--ink-500);text-decoration:line-through}

/* Admin: Kennzahlen und Karten auf dieselbe rechte Kante */
#content:has(.admin-grid) .stats{max-width:920px}
.titel-zitat{font-size:11.5px;font-weight:450;color:var(--ink-400);letter-spacing:0;margin-left:8px}

/* =========================================================
   v0.7 — Umsetzungsstatus, Suche und Filter
   ========================================================= */
.mstatus{display:inline-block;margin-top:5px;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:99px}
.mstatus--offen{background:var(--ink-100);color:var(--ink-500)}
.mstatus--ueber{background:var(--nf-red-soft);color:var(--nf-red-dark)}
.mstatus--umgesetzt{background:var(--info-soft);color:var(--info)}
.mstatus--wirksam{background:var(--ok-soft);color:var(--ok)}

.filterleiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.such-feld{position:relative;flex:1 1 240px;min-width:200px}
.such-feld svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-400);pointer-events:none}
.such-feld .input{padding-left:34px;max-width:none}
.filterleiste .select{width:auto;min-width:150px}
.filter-zahl{font-size:12px;color:var(--ink-500);margin-left:auto;white-space:nowrap}

.hz-umsetzung{margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-200)}
.hz-umsetzung__kopf{margin-bottom:10px}
.haken{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;font-weight:500;min-height:38px}
.haken input{width:18px;height:18px;accent-color:var(--nf-red);cursor:pointer}

@media (max-width:760px){
  .filterleiste .select{width:100%;min-width:0}
  .filter-zahl{margin-left:0}
}

/* Geleistete Präventionszeit: Soll-Ist und Erfassung */
.soll-ist-gruppe{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.soll-ist__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--ink-700);margin-bottom:6px}
.soll-ist__schiene{height:8px;border-radius:99px;background:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-200);overflow:hidden}
.soll-ist__schiene i{display:block;height:100%;border-radius:99px;background:var(--nf-red);transition:width .8s var(--aus)}
.soll-ist__schiene i.ist-voll{background:var(--ok-flaeche)}
.einsatz-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--ink-200)}
.einsatz-form .field--weit{grid-column:span 2}
.einsatz-form .btn{white-space:nowrap}
.einsatz-form .input,.einsatz-form .select{max-width:none}
@media (max-width:760px){ .einsatz-form{grid-template-columns:1fr} .einsatz-form .field--weit{grid-column:span 1} }

/* Ereignisse: auf schmalen Geräten umbrechen statt überlaufen */
.erin__kontext{overflow-wrap:anywhere}
@media (max-width:620px){
  .erin{flex-wrap:wrap;row-gap:6px}
  .erin__text{flex:1 1 100%;order:1}
  .erin__marke{order:0}
  .erin__wann{order:2;margin-left:17px}
  .erin .btn{order:3;margin-left:auto}
}

/* Begehungen und Mängel */
.modal--breit{max-width:820px}
.prio{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:11.5px;font-weight:700}
.prio--1{background:var(--nf-red-soft);color:var(--nf-red-dark)}
.prio--2{background:var(--warn-soft);color:var(--warn)}
.prio--3{background:var(--ink-100);color:var(--ink-500)}
.pruef-gruppe{margin-bottom:18px}
.pruef-gruppe__titel{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-400);
  padding-bottom:6px;border-bottom:1px solid var(--ink-200);margin-bottom:6px}
.pruef-punkt{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--ink-100)}
.pruef-punkt:last-child{border-bottom:0}
.pruef-punkt__text{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.pruef-punkt__notiz{margin-top:3px;font-size:12px;color:var(--nf-red-dark)}
.pruef-punkt__wahl{display:flex;gap:6px;flex:0 0 auto}
.wahl{border:0;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;padding:7px 11px;border-radius:99px;
  background:var(--ink-100);color:var(--ink-500);box-shadow:inset 0 0 0 1px var(--ink-200);transition:all .2s var(--aus);min-height:36px}
.wahl:hover{background:var(--flaeche)}
.pruef-punkt[data-bewertung="ok"] .wahl--ok{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 1.5px var(--ok)}
.pruef-punkt[data-bewertung="mangel"] .wahl--mangel{background:var(--nf-red-soft);color:var(--nf-red-dark);box-shadow:inset 0 0 0 1.5px var(--nf-red)}
.pruef-punkt[data-bewertung="nz"] .wahl--nz{background:var(--ink-200);color:var(--ink-700);box-shadow:inset 0 0 0 1.5px var(--ink-300)}
@media (max-width:620px){
  .pruef-punkt{flex-wrap:wrap}
  .pruef-punkt__wahl{flex:1 1 100%}
  .wahl{flex:1}
}

/* Begehung: Fortschritt, Filter, Mangelaufnahme am Punkt */
.bg-kopf{position:sticky;top:0;z-index:2;background:var(--flaeche);padding-bottom:12px;margin-bottom:6px}
.bg-kopf__zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bg-filter{font-size:12.5px;font-weight:450;color:var(--ink-500);min-height:32px}
.bg-fortschritt{display:flex;align-items:center;gap:12px;margin-top:8px}
.bg-fortschritt__schiene{flex:1;height:6px;border-radius:99px;background:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-200);overflow:hidden}
.bg-fortschritt__schiene i{display:block;height:100%;border-radius:99px;background:var(--ok-flaeche);transition:width .4s var(--aus)}
.bg-fortschritt__txt{font-size:12px;color:var(--ink-500);white-space:nowrap;font-variant-numeric:tabular-nums}
#bg-koerper.nur-offen .pruef-punkt[data-bewertung]:not([data-bewertung=""]){display:none}
#bg-koerper.nur-offen .pruef-punkt[data-bewertung]:not([data-bewertung=""]) + .mangel-feld{display:none}

.mangel-feld{padding:10px 0 14px;border-bottom:1px solid var(--ink-100)}
.mangel-feld .input{margin-bottom:10px}
.mangel-feld__zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mangel-feld__lbl{font-size:12px;color:var(--ink-500)}
.prio-wahl{display:inline-flex;gap:4px;padding:3px;border-radius:99px;background:var(--ink-100);box-shadow:inset 0 0 0 1px var(--ink-200)}
.prio-knopf{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;
  padding:7px 12px;border-radius:99px;color:var(--ink-500);transition:all .2s var(--aus);min-height:34px}
.prio-knopf.ist-an{background:var(--flaeche);box-shadow:var(--shadow-sm);color:var(--ink-900)}
.prio-knopf--1.ist-an{color:var(--nf-red-dark)}
.prio-knopf--2.ist-an{color:var(--warn)}
@media (max-width:620px){
  .mangel-feld__zeile{flex-direction:column;align-items:stretch}
  .prio-wahl{width:100%;justify-content:space-between}
  .prio-knopf{flex:1}
  .mangel-feld__zeile .btn{width:100%}
}

/* Gefährdungskatalog */
.kat-kopf{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--ink-200)}
.kat-kopf .field{flex:1 1 180px;margin:0}
.kat-liste{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow-y:auto}
.kat-eintrag{display:flex;align-items:flex-start;gap:12px;padding:11px 10px;border-radius:10px;cursor:pointer;
  transition:background .18s var(--aus)}
.kat-eintrag:hover{background:var(--ink-50)}
.kat-eintrag input{margin-top:3px;width:18px;height:18px;accent-color:var(--nf-red);flex:0 0 auto;cursor:pointer}
.kat-eintrag.ist-drin{opacity:.55;cursor:default}
.kat-eintrag__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.kat-eintrag__titel{font-size:13.5px;font-weight:530;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kat-eintrag__meta{font-size:11.5px;color:var(--ink-400)}
.kat-eintrag__massnahme{font-size:12px;color:var(--ink-500);line-height:1.45}
.kat-marke{font-size:10px;font-weight:600;padding:1px 7px;border-radius:99px;background:var(--ink-100);color:var(--ink-500)}
.kat-marke--eigen{background:var(--ok-soft);color:var(--ok)}
@media (max-width:620px){ .kat-kopf .field,.kat-kopf .such-feld{flex:1 1 100%} .kat-liste{max-height:none} }

/* Bereichsauswahl im Katalog */
.bereich-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bereich-chip{border:0;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:530;padding:6px 11px;
  border-radius:99px;background:var(--ink-100);color:var(--ink-700);box-shadow:inset 0 0 0 1px var(--ink-200);
  transition:background .18s var(--aus);min-height:32px}
.bereich-chip:hover{background:var(--flaeche)}

/* Versionsvergleich im Admin-Panel */
.archiv-eintrag{align-items:flex-start}
.archiv-eintrag__txt{display:flex;flex-direction:column;gap:2px;white-space:normal;text-overflow:clip}
.archiv-eintrag__neu{font-size:11.5px;color:var(--ink-500);line-height:1.45}
.archiv-eintrag--jetzt{background:var(--ok-soft);box-shadow:inset 0 0 0 1px oklch(88% 0.06 152);cursor:default}
.archiv-eintrag--jetzt:hover{transform:none;background:var(--ok-soft)}
.archiv-eintrag--jetzt .archiv-eintrag__nr{background:var(--ok-soft);color:var(--ok)}
@media (max-width:620px){
  .archiv-eintrag{flex-wrap:wrap;row-gap:6px}
  .archiv-eintrag__txt{flex:1 1 100%;order:1}
  .archiv-eintrag__txt strong{white-space:normal;overflow-wrap:anywhere}
  .archiv-eintrag__pfad{order:2;margin-left:auto}
}

/* ============================================================
   Versionswahl in der Kopfzeile  (v0.9.1)
   Bewusst zurückhaltend: im Ruhezustand nur die Nummer in gedämpftem
   Grau. Sie ist ein Werkzeug für Vorführungen und soll im Alltag nicht
   mit den Seitenaktionen um Aufmerksamkeit konkurrieren. Kontur und
   Fläche erscheinen erst bei Maus, Tastatur oder geöffnetem Menü.
   `white-space:nowrap` ist Absicht: der Knopf darf auch dann nicht
   umbrechen, wenn diese Regeln einmal fehlen (altes CSS im Cache).
   ============================================================ */
.topbar__rechts{display:flex;align-items:center;gap:8px;min-width:0}

.vwahl{position:relative;flex:0 0 auto}
.vwahl__knopf{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 5px;
  white-space:nowrap;
  font:inherit;font-size:11.5px;font-weight:500;color:var(--ink-400);
  background:none;border:0;border-radius:7px;box-shadow:none;cursor:pointer;
  transition:color var(--transition),background var(--transition)}
.vwahl__knopf:hover{color:var(--ink-600);background:var(--ink-100)}
.vwahl__knopf:focus-visible{outline:2px solid var(--nf-red);outline-offset:2px;color:var(--ink-600)}
.vwahl__knopf[aria-expanded="true"]{color:var(--ink-700);background:var(--ink-100)}
.vwahl__aktuell{font-family:"Geist Mono","Geist",monospace;letter-spacing:-.01em}
.vwahl__pfeil{width:11px;height:11px;flex:0 0 auto;opacity:.6;transition:transform var(--transition)}
.vwahl__knopf[aria-expanded="true"] .vwahl__pfeil{transform:rotate(180deg)}

.vwahl__menue{position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  width:min(400px,calc(100vw - 32px));padding:6px;
  background:var(--flaeche);border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--ink-200),var(--shadow-lg,0 12px 32px oklch(0% 0 0/.13))}
.vwahl__kopf{display:flex;flex-direction:column;gap:1px;padding:8px 10px 10px;
  font-size:12.5px;font-weight:600;color:var(--ink-900)}
.vwahl__kopf span{font-weight:400;font-size:11.5px;color:var(--ink-500)}

.vwahl__eintrag{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--ink-700);text-decoration:none;transition:background var(--transition)}
.vwahl__eintrag:hover,.vwahl__eintrag:focus-visible{background:var(--ink-100);text-decoration:none;outline:none}
.vwahl__eintrag:focus-visible{box-shadow:inset 0 0 0 2px var(--nf-red)}
.vwahl__nr{flex:0 0 auto;min-width:72px;text-align:center;
  font-family:"Geist Mono","Geist",monospace;font-weight:600;font-size:11.5px;
  color:var(--nf-red-dark);background:var(--nf-red-soft);border-radius:99px;padding:2px 8px}
.vwahl__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.vwahl__txt strong{font-weight:600;color:var(--ink-900)}
.vwahl__neu{font-size:11.5px;color:var(--ink-500);line-height:1.45}
.vwahl__haken{width:16px;height:16px;flex:0 0 auto;color:var(--ok);margin-top:2px}
.vwahl__eintrag--aktiv .vwahl__nr{background:var(--ok-soft);color:var(--ok)}

/* Mit dem Finger bedient: die Tippfläche wächst auf die im Haus übliche
   Mindesthöhe. Das Aussehen bleibt gleich — im Ruhezustand trägt der Knopf
   keine Fläche, die höhere Trefferzone ist also unsichtbar. */
@media (pointer:coarse){
  .vwahl__knopf{height:38px;padding:0 8px}
}

/* Handy: das Menü spannt über die Breite, der Knopf bleibt wie er ist */
@media (max-width:760px){
  .vwahl__menue{width:calc(100vw - 24px);right:-4px}
  .vwahl__nr{min-width:64px}
}