/* Manea Control: Design-System der App.
   Ausgelagert aus resources/views/layouts/app.blade.php (Inline-<style>), damit das
   Stylesheet ueber Seitenwechsel im Browser-Cache bleibt und die CSP ohne
   'unsafe-inline' fuer <style> auskommt. Einbindung per <link> mit filemtime-
   Cachebuster, genau wie in der Archivruntime (layouts/app.blade.php:32-34). */
/* Zwei Subsets mit unicode-range: latin-ext enthaelt weder a-z noch Ziffern noch Umlaute,
   ohne den latin-Teil faellt der Browser pro Zeichen auf den Systemfont zurueck.
   font-weight: 300 800 ist die reale fvar-wght-Achse der Variable Font. */
@font-face{font-family:"Manea Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("../assets/fonts/funnel-sans-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manea Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("../assets/fonts/funnel-sans-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Rollenfarben (--accent, --accent-strong, --accent-soft, --focus, --ok, --warn,
   --danger, --button), Radien und Kartenmasse kommen aus brand/tokens.css und
   werden im Layout vor dieser Datei eingebunden. Hier stehen nur noch die
   app-eigenen Flaechen, Textstufen und Statustinten sowie die Umbenennung
   --accent2 -> --accent-strong. */
:root{color-scheme:dark;--bg:#080c0c;--surface:#0d1212;--surface2:#111717;--line:#243131;--line2:rgba(255,255,255,.12);--border-soft:rgba(255,255,255,.1);--border-faint:rgba(255,255,255,.08);--field-bg:rgba(255,255,255,.04);--subtle-bg:rgba(255,255,255,.035);--text:#f5f8f7;--muted:#9aa8a5;--soft:#c8d3d0;--accent2:var(--accent-strong);--warn-ink:#f4df9f;--danger-ink:#ffab9f;--font:"Manea Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",ui-sans-serif,system-ui,sans-serif}
html[data-theme="light"]{color-scheme:light;--bg:#f6f8f7;--surface:#ffffff;--surface2:#f1f5f4;--line:#dce5e3;--line2:rgba(14,22,21,.12);--border-soft:rgba(14,22,21,.11);--border-faint:rgba(14,22,21,.08);--field-bg:#ffffff;--subtle-bg:rgba(14,22,21,.035);--text:#111817;--muted:#61706d;--soft:#33413f;--warn-ink:#7f610e;--danger-ink:#ad4232}
/* Flaeche und Rand aus dem jeweils geltenden --danger/--warn ableiten, damit beide Themes
   mitziehen. Vorher standen die Dark-Mode-Hexwerte literal in den Komponenten und der
   Light-Mode blieb bei 1,19-1,66:1 haengen.
   9% statt 10% und 7% statt 8%: beide Toene sind in Light dunkler geworden
   (#b94b3f -> #a83e2f, #8a6a10 -> #7d5a17). Die duenneren Toenungen halten
   --danger-ink bei 4,67:1 (statt 4,60:1) und --warn-ink bei 4,80:1 (statt 4,75:1);
   beide liegen damit ueber dem heutigen Stand von 4,64:1 bzw. 4,79:1. */
:root{--danger-tint:color-mix(in srgb,var(--danger) 9%,transparent);--danger-edge:color-mix(in srgb,var(--danger) 75%,transparent);--warn-tint:color-mix(in srgb,var(--warn) 7%,transparent);--warn-edge:color-mix(in srgb,var(--warn) 75%,transparent)}
*{box-sizing:border-box}
/* scroll-padding-top an der Wurzel statt scroll-margin-top an einzelnen Elementen:
   die klebende .topbar ist 68px hoch, und JEDES Sprungziel muss darunter
   hervorkommen - der Umgehungslink, ein Fragment aus einer Mail, das
   Fokus-Scrollen mit Tab (SC 2.4.11). Zwei Einzelregeln haetten nur die zwei
   Faelle gedeckt, an die jemand gedacht hat. */
html{scroll-padding-top:80px}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);letter-spacing:0;font-synthesis:none;-webkit-font-smoothing:antialiased}
body :where(a,button,input,select,textarea,small,strong,b,em,p,li,th,td,span,div,h1,h2,h3,h4,h5,h6,code,kbd,samp,pre){font-family:var(--font);letter-spacing:0;font-synthesis:none;font-synthesis-weight:none;font-synthesis-style:none}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
/* --focus statt rgba(69,201,187,.72): die transparente Linie erreicht im Light-Theme
   nur 1,57-1,67:1, WCAG 2.2 SC 1.4.11 verlangt 3:1. */
/* summary gehoert in diese Liste: die drei Bereichsschalter der Navigation sind
   <summary>-Elemente. Ohne den Eintrag waeren sie die einzigen Bedienelemente
   der App ohne sichtbaren Fokusring (SC 2.4.7). */
:where(a,button,input,select,textarea,summary,.btn,.check):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:where(.check):focus-within{outline:3px solid var(--focus);outline-offset:3px}
/* Umgehung der Navigation. Bleibt fokussierbar (kein display:none), steht per
   position:fixed auch auf einer gescrollten Seite im Bild und liegt mit z-index
   30 ueber der klebenden Topbar (z-index 20). */
.skip-link{position:fixed;left:-9999px;top:8px;z-index:30;display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--accent);border-radius:var(--radius-soft);background:var(--surface);color:var(--text);font-size:13px;font-weight:700;padding:0 14px}
.skip-link:focus{left:clamp(18px,4vw,52px)}
.topbar{height:68px;border-bottom:1px solid var(--border-faint);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(18px,4vw,52px);background:var(--surface);position:sticky;top:0;z-index:20}
.brand-lockup{display:inline-flex;align-items:center;gap:13px;color:var(--text);line-height:1}
.brand-lockup img{display:block;width:138px;height:auto}
.brand-logo.is-light{display:none}
.brand-logo.is-dark{display:block}
html[data-theme="light"] .brand-logo.is-light{display:block}
html[data-theme="light"] .brand-logo.is-dark{display:none}
.is-light{display:none}
html[data-theme="light"] .is-light{display:inline-block}
html[data-theme="light"] .is-dark{display:none}
.brand-divider{display:block;width:1px;height:26px;background:var(--line2)}
.brand-sub{color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.tb-right{display:flex;align-items:center;gap:10px}
.tb-link,.tb-pill{display:inline-flex;align-items:center;min-height:36px;border:1px solid var(--line);border-radius:var(--radius-soft);padding:0 11px;color:var(--soft);font-size:13px;font-weight:700;background:transparent}
.tb-link:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
.tb-pill{color:var(--accent2);border-color:color-mix(in srgb,var(--accent) 42%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;border:1px solid var(--line);border-radius:var(--radius-soft);background:transparent;color:var(--soft);cursor:pointer}
.icon-btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
.icon-btn svg{width:17px;height:17px}
/* ===== Navigationsband =====
   Vorher lagen 33 Ziele flach in einem waagerechten Scroller mit ausgeblendetem
   Balken (overflow-x:auto + scrollbar-width:none). Ohne Horizontalrad war der
   rechte Teil mit der Maus nicht erreichbar (SC 2.1.1), und der 3px-Fokusring
   wurde an der Klippkante des Scrollers beschnitten (SC 2.4.7). Beides ist an
   der Wurzel behoben: das Band bricht um, der Scroller entfaellt ersatzlos.
   Der aktive Bereich ist im Markup das letzte Kind und nimmt eine eigene Zeile
   ein - so bleibt die sichtbare Reihenfolge gleich der DOM-Reihenfolge, ohne
   dass die order-Eigenschaft die Fokusfolge verdreht. */
.gnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:9px clamp(18px,4vw,52px);border-bottom:1px solid var(--border-faint);background:var(--surface)}
.nav-area{min-width:0}
.nav-area[open]{flex:1 1 100%}
.gnav-side{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.gnav form{margin:0}
.nav-body{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:9px 0 1px}
/* .nav-group trug display:contents und .nav-title display:none - die Gruppe war
   aufgeloest, ihr Titel auch aus dem Accessibility-Tree entfernt. Jetzt traegt
   die Gruppe, und der Titel benennt per aria-labelledby die Liste ihrer Ziele. */
.nav-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;min-width:0}
.nav-title{margin:0;color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;white-space:nowrap}
.nav-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
/* :where() haelt die Chipbasis auf Klassen-Spezifitaet (0,1,0) - dasselbe Muster
   wie beim Kartendefault .card :where(h2). Der Abstand zwischen zwei Zielen ist
   8px und damit groesser als outline-offset (3px) plus outline-width (3px); bei
   den alten .2rem stiessen Fokusring und Nachbarchip aneinander. */
.gnav :where(a,button,summary){display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:1px solid transparent;border-radius:var(--radius-soft);background:transparent;color:var(--soft);font-weight:650;font-size:13px;padding:7px 12px;white-space:nowrap;cursor:pointer;list-style:none}
.gnav summary::-webkit-details-marker{display:none}
.gnav summary svg{width:15px;height:15px;flex:0 0 auto;margin-right:7px;transition:transform .16s ease}
.nav-area[open]>summary svg{transform:rotate(180deg)}
.gnav a:hover,.gnav button:hover,.gnav summary:hover{border-color:var(--line2);background:var(--subtle-bg);color:var(--text)}
/* Aktiv-Zustand. Der Rand ist deckendes var(--accent) statt color-mix(in srgb,var(--accent) 45%,transparent):
   5,53:1 gegen --surface (dark) und 3,41:1 (light), beide ueber den 3:1 aus
   SC 1.4.11 - vorher trug der Rand 2,04:1 bzw. 1,69:1 und die Flaeche 1,12:1.
   Dazu zwei Merkmale, die keine Farbe sind (SC 1.4.1): ein 3px-Balken, der als
   Innenschatten keine Breite kostet und die Nachbarchips deshalb nicht springen
   laesst, und ein schwereres Schriftgewicht. Hover und Aktiv teilen sich damit
   nicht laenger dasselbe Rezept. */
.gnav a.on,.gnav summary.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text);font-weight:750;box-shadow:inset 0 -3px 0 var(--accent)}
/* Zustandsschnitt aktiv+hover. Ohne diese Regel (0,3,0) gewinnt die spaeter
   stehende Aktiv-Regel gegen die gleich spezifische Hover-Regel, und der aktive
   Chip ist das einzige Ziel im Band ohne jede Hover-Rueckmeldung. */
.gnav a.on:hover,.gnav summary.on:hover{border-color:var(--accent);background:var(--subtle-bg)}
/* Die Topbar fuehrt denselben Archiv-Link als .tb-link und blendet ihn unter
   760px aus; dieses Exemplar traegt ihn genau dort. Ohne die Regel stuenden
   oberhalb von 760px zwei identische Links auf jeder Seite. */
@media(min-width:761px){.gnav-archive{display:none}}
/* Im Windows-Kontrastmodus verwirft der Browser Toenung und Innenschatten; dort
   traegt den Zustand die Systemfarbe plus Unterstreichung. */
@media(forced-colors:active){.gnav a.on,.gnav summary.on{border-color:Highlight;text-decoration:underline;text-underline-offset:3px}}
@media(prefers-reduced-motion:reduce){.gnav summary svg{transition:none}}
/* Das Sprungziel des Umgehungslinks haelt html{scroll-padding-top:80px} unter
   der klebenden Topbar hervor, nicht mehr eine Einzelregel hier. */
.wrap{max-width:1180px;margin:0 auto;padding:30px 26px 70px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.head h1{margin:0;font-size:clamp(23px,2.4vw,32px);line-height:1.12;font-weight:650}
.head p{margin:6px 0 0;max-width:760px;color:var(--muted);font-size:13.5px;line-height:1.5}
/* Nach dem Entwurfspaket (.chip): Flaeche, Farbe, Radius -- kein Rahmen und
   kein Punkt davor. Der Punkt war eine Zutat von uns; Sven am 2026-09-05:
   "noch immer einmal das Ornament in den badges". Die Farben kommen jetzt
   aus den Tokens statt als hart notiertes rgba des alten Markentons -- die
   Umstellung auf #157567 hatte diese Stelle deshalb nicht erreicht. */
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent2);border-radius:var(--radius-pill);padding:5px 10px;font-size:12px;font-weight:700}
.maintenance-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;border-top:1px solid var(--border-faint);padding-top:18px}
.maintenance-panel{border:1px solid var(--border-soft);background:var(--surface);border-radius:var(--radius-soft);padding:18px}
.maintenance-panel h2{margin:0 0 8px;font-size:17px}
.maintenance-panel p,.maintenance-panel li{color:var(--muted);font-size:13.5px;line-height:1.52}
.maintenance-panel ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
/* Ebenfalls ein Ornament von uns. Im Entwurfspaket tragen Listen keinen
   gefuellten Punkt; der Einzug allein ordnet sie. */
.maintenance-panel li{padding-left:14px;position:relative}
.maintenance-panel li:before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.portal-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;min-width:0}
.portal-dashboard>*,.portal-side{min-width:0}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.summary-card{display:grid;gap:8px;min-width:0;border:1px solid var(--border-soft);border-radius:var(--radius-soft);background:var(--surface);padding:16px}
.summary-card h2{margin:0;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase}
.summary-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.summary-card a{color:var(--accent2);font-size:13px;font-weight:700}
.portal-side{display:grid;gap:16px}
.quick-list,.task-feed{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.quick-list a{display:grid;gap:4px;border-top:1px solid var(--border-faint);padding-top:10px;color:var(--text)}
.quick-list li:first-child a{border-top:0;padding-top:0}
.quick-list strong,.task-item strong{font-size:14px}
.quick-list span,.task-meta{color:var(--muted);font-size:13px;line-height:1.45}
.task-item{display:grid;gap:7px;border-top:1px solid var(--border-faint);padding-top:12px}
.task-item:first-child{border-top:0;padding-top:0}
.task-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.priority{display:inline-flex;align-items:center;min-height:24px;border:1px solid var(--line2);border-radius:var(--radius-pill);padding:3px 8px;color:var(--soft);font-size:11.5px;font-weight:700;white-space:nowrap}
.priority.high{border-color:var(--danger-edge);background:var(--danger-tint);color:var(--danger-ink)}
.priority.medium{border-color:var(--warn-edge);background:var(--warn-tint);color:var(--warn-ink)}
/* Kartenkontrakt (brand/tokens.css). Diese App polstert die Karte selbst; sobald
   ein Band (.card-h/.card-b) darin sitzt, nimmt tokens.css ihr das Polster ab -
   sonst polsterte aus dem Archiv kopiertes Markup doppelt. */
.card{min-width:0;border:1px solid var(--border-soft);border-radius:var(--radius-soft);background:var(--surface);padding:var(--card-pad)}
/* :where() haelt diesen Kartendefault auf Klassen-Spezifitaet (0,1,0). Ohne das
   schlaegt '.card h2' (0,1,1) jede Utility-Klasse (0,1,0): die 36 Ueberschriften,
   die vorher style="margin:0" bzw. margin-top:20px trugen, bekaemen ihren Abstand
   nicht mehr weg, weil ein style-Attribut diese Regel schlug und .u-m-0 es nicht
   kann. Ein Default ist eine Voreinstellung, keine Ansage - er gehoert unter die
   Utility-Ebene, nicht darueber. UtilityCascadeTest haelt das fest. */
.card :where(h2){margin:0 0 8px;font-size:17px}
.card-h{border-bottom:1px solid var(--border-faint)}
.card-h h2{margin:0;font-size:15px}
.card p,.card li{color:var(--muted);font-size:13.5px;line-height:1.52}
.card ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.card li:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:10px}
.card .quick-list,.card .task-feed{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.card .quick-list li:before,.card .task-feed li:before{content:none;display:none}
.card .quick-list a{display:grid;gap:4px;border-top:1px solid var(--border-faint);padding-top:10px;color:var(--text)}
.card .quick-list li:first-child a{border-top:0;padding-top:0}
.metric{font-size:28px;line-height:1;font-weight:650;margin:8px 0;color:var(--text);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.warn{color:var(--warn)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px}
.search{display:flex;align-items:center;gap:10px;min-width:min(100%,420px);border:1px solid var(--line);background:var(--subtle-bg);border-radius:var(--radius-soft);padding:10px 12px}
.search input{width:100%;border:0;background:transparent;color:var(--text);font:inherit;outline:0}
.search:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
/* Buttonkontrakt (brand/tokens.css). .btn ist hier der getoente Umriss; die
   Flaeche kommt aus --accent-soft statt aus einem eigenen rgba-Literal - dieselbe
   Toenung, die das Archiv seit jeher fuehrt. Messung: die Akzentschrift auf der
   Flaeche steigt von 7,70 auf 7,94:1 (dark) und von 4,46 auf 4,67:1 (light) und
   ueberschreitet damit in Light erstmals die 4,5:1. Der Rand bleibt bewusst bei
   .45 - --accent-line (.4/.32) waere duenner und der Rand faellt von 2,03 auf
   1,84:1 (dark) bzw. von 1,64 auf 1,41:1 (light). */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft);color:var(--accent2);border-radius:var(--radius-soft);padding:10px 13px;font-weight:700;cursor:pointer}
/* Hauptaktion. Fehlte dieser App als einziger - die Anmeldung fuehrte ihre
   Hauptaktion im schwaechsten der drei Stile (auth/login.blade.php). */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--button);background:var(--button);color:var(--button-ink);border-radius:var(--radius-soft);padding:10px 13px;font-weight:700;cursor:pointer;text-decoration:none}
.btn-primary:hover{border-color:var(--button-hover);background:var(--button-hover)}
.btn-danger,.btn.danger{border-color:var(--danger-edge);background:var(--danger-tint);color:var(--danger-ink)}
/* Nebenaktion neben einer Hauptaktion (operator/provisioning/index.blade.php:87).
   Ohne diese Regel erbte der Button die Akzentflaeche von .btn und stand
   gleichwertig neben der eigentlichen Hauptaktion. */
.btn-ghost,.btn.secondary{border-color:var(--line);background:var(--subtle-bg);color:var(--soft)}
.btn-ghost:hover,.btn.secondary:hover{border-color:var(--line2);background:var(--surface2);color:var(--text)}
.table-wrap{max-width:100%;overflow:auto;border:1px solid var(--border-soft);border-radius:var(--radius-soft);background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-faint)}
th{color:var(--muted);font-size:12px;text-transform:uppercase}
td{color:var(--soft)}
tr:last-child td{border-bottom:0}
.empty{padding:34px 18px;text-align:center;color:var(--muted)}
.pill{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:var(--radius-pill);padding:5px 8px;color:var(--soft);font-size:12px;font-weight:700}
.pill.danger{border-color:var(--danger-edge);background:var(--danger-tint);color:var(--danger-ink)}
.stack{display:grid;gap:16px}
.contract{display:grid;gap:8px}
.contract-row{display:grid;grid-template-columns:190px 1fr 1.1fr;gap:10px;border-top:1px solid var(--border-faint);padding-top:10px}
.contract-row:first-child{border-top:0;padding-top:0}
.contract-row b{color:var(--text)}
.strip{margin-top:16px;border:1px solid var(--warn-edge);background:var(--warn-tint);border-radius:var(--radius-soft);padding:16px 18px;color:var(--warn-ink);line-height:1.55}
.panel{max-width:720px}
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{color:var(--soft);font-weight:700}
.input{width:100%;border:1px solid var(--line);border-radius:var(--radius-soft);background:var(--field-bg);color:var(--text);font:inherit;padding:13px 14px}
.input:focus{border-color:color-mix(in srgb,var(--accent) 75%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.check{display:flex;align-items:flex-start;gap:10px;color:var(--muted);line-height:1.45}
.check input{margin-top:4px;accent-color:var(--accent)}
.error{color:var(--danger);font-size:13px;font-weight:600}
.notice{border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:var(--radius-soft);padding:14px 16px;color:var(--soft);line-height:1.55}
.notice.warn{border-color:var(--warn-edge);background:var(--warn-tint);color:var(--warn-ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.actions .btn{min-height:46px}
.link{color:var(--accent2);font-weight:700}
.foot{border-top:1px solid var(--border-faint);background:var(--surface);padding:22px clamp(18px,4vw,52px);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px}
.foot nav{display:flex;flex-wrap:wrap;gap:14px}
.foot a{color:var(--soft)}
@media(max-width:1100px){.portal-dashboard{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.maintenance-shell,.grid,.grid2{grid-template-columns:1fr}.head{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.topbar{height:64px;min-height:64px;align-items:center;flex-direction:row;padding-top:0;padding-bottom:0;gap:10px}.brand-lockup{min-width:0;gap:9px}.brand-lockup img{width:124px}.brand-divider,.brand-sub{display:none}.tb-right{width:auto;justify-content:flex-end;margin-left:auto;gap:8px;flex:0 0 auto}.tb-link{display:none}.tb-pill{min-height:34px;padding:0 9px;font-size:12px}.icon-btn{width:34px;height:34px;min-width:34px}.wrap{padding-top:26px}.summary-grid{grid-template-columns:1fr}.task-title{align-items:flex-start;flex-direction:column}.foot{flex-direction:column}.contract-row{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.search{min-width:0;width:100%}}
/* ===== Navigationsband auf schmalen Viewports =====

   Das alte Band loeste Schmalheit mit "overflow-x:auto;scrollbar-width:none" -
   es scrollte seitwaerts, ohne das anzuzeigen. Das umbrechende Band hat den
   umgekehrten Fehler, wenn man es laesst: es waechst unbegrenzt in die Hoehe
   und schiebt bei 375px den Inhalt aus dem ersten Bildschirm.

   Deshalb hier eine Spalte statt eines Umbruchs - das ist auf einem Telefon die
   natuerliche Form einer Bereichsliste - und eine gedeckelte Hoehe fuer den
   aufgeklappten Bereich. Der Deckel ist bewusst ein SICHTBARER Scrollbereich
   innerhalb eines Bereichs, den der Nutzer selbst aufgeklappt hat, nicht ein
   verborgener wie vorher. */
@media(max-width:760px){
  /* flex-wrap MUSS hier ueberall auf nowrap. Die Basisregeln tragen wrap; in
     Spaltenrichtung mit gedeckelter Hoehe brechen die Eintraege sonst in neue
     SPALTEN statt zu scrollen, und das Band laeuft seitlich aus dem Viewport -
     derselbe verborgene Seitwaertsscroll, den dieser Umbau beseitigen soll,
     nur um 90 Grad gedreht. Gemessen bei 375px: drei Spalten, abgeschnittene
     Beschriftungen, horizontale Scrollleiste. */
  /* Die Bereichsschalter und der Aktionsblock bleiben nebeneinander und
     umbrechen wie bisher - sie sind kurz. Nur die Ziele des aufgeklappten
     Bereichs werden zur vollbreiten Spalte. Ein pauschales width:100% auf
     alle Bedienelemente hatte jedem der vier Sekundaer-Chips eine eigene
     Zeile gegeben und das Band auf 645px von 812px aufgeblaeht. */
  .nav-body{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;max-height:min(44vh,340px);overflow-y:auto;padding:10px 0 2px}
  .nav-group{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px}
  .nav-list{flex-direction:column;flex-wrap:nowrap;gap:6px}
  /* Kein width:100%: .nav-list ist eine Flex-Spalte, ihre Kinder strecken
     ohnehin auf die volle Breite. Die explizite Breite waere Doppelung. */
  .nav-list :where(a){justify-content:flex-start}
  /* margin-left:auto haette den Aktionsblock an den rechten Rand gedrueckt,
     wo er neben den Bereichsschaltern als zweite, konkurrierende Spalte las. */
  .gnav-side{margin-left:0}
  .gnav form{display:flex}
}

/* ===== Utility-Klassen =====
   Loesen die 151 style-Attribute aus 35 Views ab (46x margin-top:16px, 41x
   margin:0, 35x margin:6px 0 0, 17x margin-bottom:16px, Rest einzeln). Solange
   die Attribute im Markup standen, musste style-src 'unsafe-inline' tragen und
   die Richtlinie schuetzte nur Skripte; SecurityHeadersPolicyTest haelt Ausnahme
   und Ursache aneinander.

   Reihenfolge im Block ist Teil des Vertrags: .u-m-0 steht vor .u-divider-top,
   damit die Kombination beider Klassen "margin:14px 0 0" ergibt - genau der Wert,
   den das abgeloeste Attribut am <p class="muted"> hatte. */
.u-m-0{margin:0}
.u-mt-6{margin:6px 0 0}
.u-mt-8{margin-top:8px}
.u-mt-10{margin-top:10px}
.u-mt-12{margin-top:12px}
.u-mt-16{margin-top:16px}
.u-mt-20{margin-top:20px}
.u-mb-8{margin-bottom:8px}
.u-mb-16{margin-bottom:16px}
/* Abgesetzter Folgeabschnitt in einer Karte. Der Rand kam bisher als
   rgba(255,255,255,.08) aus dem Markup und war im Light-Theme unsichtbar
   (1,00:1 auf weiss); --border-faint zieht in beiden Themes mit (1,13:1 light). */
.u-divider-top{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-faint)}
.u-field-wide{min-width:min(100%,280px)}
.u-align-end{align-items:end}