/* SolvePlus — gemeinsames Design-System (alle Seiten binden das ein) */
:root{
  --navy:#002454;--navy-2:#00366f;--marine:#032D5A;--gold:#F0C030;--green:#9CC018;--thanu:#801425;
  --bg:#eef1f6;--surface:#fff;--surface-2:#f6f8fc;--border:#dde5ef;--text:#0f2033;--text-dim:#5b6b7f;
  --shadow:0 10px 34px rgba(2,26,58,.12);--head:var(--navy);--chip:#eef3fa;
  --sat:#f2f5f9;--sun:#e7ecf3;--holi:#fff5da;
  /* Status-Badges (.bs): Kontrast >= 4.5:1 in Hell und Dunkel */
  --bs-fg:var(--navy);--bs-ok-bg:#dcfce7;--bs-ok-fg:#166534;--bs-warn-bg:#fde9c8;--bs-warn-fg:#7a4f00;--bs-bad-bg:#fde2e2;--bs-bad-fg:#8a1c1c;--bs-info-bg:#dbeafe;--bs-info-fg:#1e3a8a;
  --link:#00366f; /* Links in Inhalten: Kontrast >= 4.5:1 auf allen Flaechen (Hell 10.7:1, Dunkel 7.9:1) */
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--display:'Teko',var(--sans);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#020a15;--surface:#0a1c33;--surface-2:#0d2340;--border:#1a3556;--text:#e8eef6;--text-dim:#9db2cc;
  --shadow:0 12px 40px rgba(0,0,0,.55);--head:#eaf1fb;--chip:#12294a;--sat:#0c2039;--sun:#0a1a30;--holi:#33280a;
  --bs-fg:var(--text);--bs-ok-bg:#14532d;--bs-ok-fg:#bbf7d0;--bs-warn-bg:#5c3d06;--bs-warn-fg:#fde68a;--bs-bad-bg:#6b1a1a;--bs-bad-fg:#fecaca;--bs-info-bg:#1e3a8a;--bs-info-fg:#dbeafe;--link:#8cc4ff;
}}
:root[data-theme="dark"]{
  --bg:#020a15;--surface:#0a1c33;--surface-2:#0d2340;--border:#1a3556;--text:#e8eef6;--text-dim:#9db2cc;
  --shadow:0 12px 40px rgba(0,0,0,.55);--head:#eaf1fb;--chip:#12294a;--sat:#0c2039;--sun:#0a1a30;--holi:#33280a;
  --bs-fg:var(--text);--bs-ok-bg:#14532d;--bs-ok-fg:#bbf7d0;--bs-warn-bg:#5c3d06;--bs-warn-fg:#fde68a;--bs-bad-bg:#6b1a1a;--bs-bad-fg:#fecaca;--bs-info-bg:#1e3a8a;--bs-info-fg:#dbeafe;--link:#8cc4ff;
}
*{box-sizing:border-box}html,body{height:100%}
/* Seiten-Hintergrund reicht immer bis unten (auch in der App-WebView mit sp-embed und kurzem Inhalt) */
html{background:var(--bg);min-height:100dvh}body{min-height:100dvh}
/* Links: eigenes Token statt fester Navy-Farbe — im Dunkelmodus hell. Knoepfe/Menue/Kacheln haben eigene Farben;
   im Dunkelmodus gewinnen einfache Inhalts-Links (ohne eigene Klasse) auch gegen seiteneigene Navy-Regeln. */
a{color:var(--link)}
:root[data-theme="dark"] .content a:is(:not([class]),.blur,.anker,.maplink,.trt):not([style*="color"]){color:var(--link)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .content a:is(:not([class]),.blur,.anker,.maplink,.trt):not([style*="color"]){color:var(--link)}}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,rgba(0,36,84,.10),transparent 60%),var(--bg);color:var(--text);font-family:var(--sans);line-height:1.45}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:.3px;color:var(--head);margin:0}

/* Rahmen — EINHEITLICH auf allen Seiten */
.frame{max-width:1280px;margin:14px auto;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:calc(100dvh - 28px)}
.content{flex:1;display:flex;flex-direction:column}
.wrap{padding:18px}

/* Top-Bar */
.top{display:flex;align-items:center;gap:12px;padding:11px 16px;background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff}
.brand{font-family:var(--display);font-size:30px;font-weight:700;line-height:1;display:flex;align-items:center;gap:8px}
.brand .plus{color:var(--gold)}
.brand small{font-family:var(--sans);font-size:10px;font-weight:600;color:#9fb6d6;letter-spacing:1.4px;text-transform:uppercase;margin-left:2px}
.top .sp{flex:1}
.demo{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--navy);background:var(--gold);padding:4px 8px;border-radius:6px}
.who{font-size:11px;color:#c7d2e5;text-align:right;max-width:26vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbtn{all:unset;cursor:pointer;min-width:38px;height:38px;display:inline-flex;align-items:center;gap:7px;justify-content:center;padding:0 11px;border-radius:11px;color:#dae4f2;font-size:15px;font-weight:600}
.tbtn:hover{background:rgba(255,255,255,.15)}
.tbtn.on{background:rgba(255,255,255,.22)}
.tbtn .t{font-size:13px}
.sgbadge{background:#fff;border-radius:50%;cursor:pointer;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sgbadge img{height:30px;width:30px}

/* Nav-Drawer (globales Menü) */
.navback{position:fixed;inset:0;background:rgba(0,10,25,.5);z-index:70;opacity:0;pointer-events:none;transition:.2s}
.navback.open{opacity:1;pointer-events:auto}
.navdrawer{position:fixed;top:0;left:0;height:100%;width:280px;max-width:84vw;background:var(--surface);z-index:71;transform:translateX(-100%);transition:.22s;box-shadow:2px 0 22px rgba(0,0,0,.25);display:flex;flex-direction:column}
.navdrawer.open{transform:none}
.navdrawer .ndh{display:flex;align-items:center;gap:10px;padding:16px;background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;font-family:var(--display);font-size:22px}
.ndbody{overflow:auto;flex:1;padding-bottom:16px}
.navitem{display:flex;align-items:center;gap:10px;padding:12px 18px;color:var(--text);text-decoration:none;font-weight:600;font-size:15px}
.navitem.active{background:var(--chip);color:var(--head);border-left:4px solid var(--gold)}
.navitem:not(.muted):hover{background:var(--surface-2)}
.navitem.muted{color:var(--text-dim);font-weight:500;cursor:default}
.navitem em{font-style:normal;color:var(--text-dim);font-weight:400;font-size:11px;margin-left:auto}
.ndsec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--navy);background:var(--surface-2);padding:9px 18px;margin-top:2px}
:root[data-theme="dark"] .ndsec,:root:not([data-theme="light"]) .ndsec{color:var(--gold)}

/* Formularelemente + Buttons (einheitlich) */
label,.label{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text);font-size:14px;font-family:var(--sans)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);border-color:transparent}
textarea{min-height:80px;resize:vertical}
.btn{cursor:pointer;border:0;border-radius:11px;font-weight:700;font-size:13px;padding:10px 14px;display:inline-flex;gap:7px;align-items:center;justify-content:center}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.primary{background:var(--navy);color:#fff}
.btn.green{background:var(--green);color:#173a00}
.btn.ghost{background:var(--chip);color:var(--head)}
.btn.danger{background:var(--thanu);color:#fff}
.btn.sm{padding:7px 11px;font-size:12px}
.cta{width:100%;margin-top:16px;padding:13px;border:0;border-radius:11px;background:linear-gradient(120deg,var(--navy),#00468f);color:#fff;font-weight:700;font-size:15px;cursor:pointer}

/* Karten / Utility */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px;margin-bottom:12px}
.muted{color:var(--text-dim);font-size:13px}
.dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.g2{display:flex;gap:10px;flex-wrap:wrap}.g2>*{flex:1;min-width:150px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar select{width:auto}
.err{color:var(--thanu);font-size:13px;min-height:18px}
[hidden]{display:none!important}

/* Status-Badges (einheitlich) */
.st{font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;text-transform:uppercase;letter-spacing:.4px}
.st.draft{background:var(--chip);color:var(--text-dim)}
.st.submitted{background:#fde9c8;color:#8a5a00}
.st.approved{background:#dcfce7;color:#166534}
.st.rejected{background:#fde2e2;color:#8a1c1c}

/* Login (einheitlich) */
.login{max-width:420px;margin:5vh auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:28px}
.login .logo{font-family:var(--display);font-size:56px;font-weight:700;text-align:center;color:var(--head);line-height:1}
.login .logo .plus{color:var(--gold)}
.login .sub{text-align:center;color:var(--text-dim);margin:2px 0 14px;font-size:13px}
.login .sgico{height:74px;width:74px;display:block;margin:0 auto 6px}

/* Modal (einheitlich) */
.overlay{position:fixed;inset:0;background:rgba(0,10,25,.55);display:none;align-items:center;justify-content:center;padding:14px;z-index:60}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:520px;width:100%;max-height:92dvh;overflow:auto}
.modal-h{background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;padding:12px 16px;font-family:var(--display);font-size:22px;display:flex;justify-content:space-between;align-items:center}
.modal-b{padding:16px}

/* Footer (dunkel, Logos ohne Hintergrund) */
footer{border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(120deg,var(--navy),var(--navy-2));padding:16px;display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap}
.made{font-family:var(--display);font-size:20px;color:#aebfda;display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:center}
.made .amp{color:var(--gold);font-weight:700}
.made .flogo{height:22px;display:block;filter:brightness(0) invert(1);opacity:.95}

/* Privacy */
.privacy-on .blur{filter:blur(5px);user-select:none}

@media(max-width:640px){
  .frame{margin:0;border-radius:0;border:0;min-height:100dvh}
  .brand small,.tbtn .t{display:none}
  .who{max-width:34vw}
}

/* Tablet + Orientierung (quer/hochkant) */
@media(min-width:641px) and (max-width:1024px){ .frame{margin:8px auto} }
@media (orientation:landscape) and (max-height:560px){ .frame{margin:0;border-radius:0;border:0;min-height:100dvh} }

/* Sprach-Auswahl in der Top-Bar (Optionen dunkel lesbar, nicht weiss-auf-weiss) */
#langSel{width:auto;min-width:0;background:rgba(255,255,255,.16);color:#fff;border:0;height:34px;padding:0 8px;font-weight:600;font-size:13px;cursor:pointer;border-radius:10px}
#langSel option{color:var(--text);background:var(--surface)}

/* ===== Portal-Layout (02.10.2026): breite Tabellen, Dialoge, Suchleisten, Knopf-Icons — tests/Feature/PortalLayoutTest.php ===== */

/* 1) Breite Tabellen: Kopfzeile und erste Spalte bleiben beim Scrollen stehen.
   .tabelle-fix auf dem Scroll-Container; die vorhandenen Huellen .tw/.tscroll/.table-wrap bekommen es automatisch.
   Kopf = erste thead-Zeile (oder erste Zeile nur aus th, wenn es kein thead gibt). Erste Spalte darf ein
   Kontrollkaestchen sein (bleibt dann fix). Zellen mit colspan (Summenzeilen) scrollen mit.
   Hintergrund der fixierten Zellen: deckende Flaeche (::before, --tabelle-fix-bg) + Zeilenfarbe der Seite darueber
   (::after erbt sie), damit getoente/markierte Zeilen ihre Farbe behalten und nichts durchscheint. */
:is(.tabelle-fix,.tw,.tscroll,.table-wrap){overflow:auto;max-height:min(80dvh,calc(100dvh - 110px));-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
:is(.modal,.overlay) :is(.tabelle-fix,.tw,.tscroll,.table-wrap){max-height:none}
:is(.tabelle-fix,.tw,.tscroll,.table-wrap) table :is(thead>tr:first-child,tbody:first-child>tr:first-child:not(:has(td)))>th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--border)}
:is(.tabelle-fix,.tw,.tscroll,.table-wrap) table tr>:is(th,td):first-child:not([colspan]){position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--border),5px 0 7px -5px rgba(2,26,58,.28)}
:is(.tabelle-fix,.tw,.tscroll,.table-wrap) table :is(thead>tr:first-child,tbody:first-child>tr:first-child:not(:has(td)))>th:first-child{z-index:3;box-shadow:1px 1px 0 var(--border),5px 0 7px -5px rgba(2,26,58,.28)}
:is(.tabelle-fix,.tw,.tscroll,.table-wrap) table :is(thead>tr:first-child,tbody:first-child>tr:first-child:not(:has(td)))>th::before,:is(.tabelle-fix,.tw,.tscroll,.table-wrap) table tr>:is(th,td):first-child:not([colspan])::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--tabelle-fix-bg,var(--surface));pointer-events:none}
:is(.tabelle-fix,.tw,.tscroll,.table-wrap) table :is(thead>tr:first-child,tbody:first-child>tr:first-child:not(:has(td)))>th::after,:is(.tabelle-fix,.tw,.tscroll,.table-wrap) table tr>:is(th,td):first-child:not([colspan])::after{content:"";position:absolute;inset:0;z-index:-1;background:inherit;pointer-events:none}
[dir="rtl"] :is(.tabelle-fix,.tw,.tscroll,.table-wrap) table tr>:is(th,td):first-child:not([colspan]){left:auto;right:0;box-shadow:-1px 0 0 var(--border),-5px 0 7px -5px rgba(2,26,58,.28)}
[dir="rtl"] :is(.tabelle-fix,.tw,.tscroll,.table-wrap) table :is(thead>tr:first-child,tbody:first-child>tr:first-child:not(:has(td)))>th:first-child{box-shadow:-1px 1px 0 var(--border),-5px 0 7px -5px rgba(2,26,58,.28)}
@media(max-width:640px){
  /* Handy: erste Spalte schmal (max. ca. 40 %), lange Namen brechen um statt die Tabelle zu sprengen */
  :is(.tabelle-fix,.tw,.tscroll,.table-wrap) table tr>:is(th,td):first-child:not([colspan]){max-width:40vw;min-width:64px;white-space:normal;overflow-wrap:break-word;word-break:normal;hyphens:auto}
}
@media print{
  /* Druck unveraendert: nichts fixiert, keine Scroll-Huelle, keine Schatten */
  :is(.tabelle-fix,.tw,.tscroll,.table-wrap){max-height:none!important}
  :is(.tabelle-fix,.tw,.tscroll,.table-wrap) table :is(th,td){position:static!important;box-shadow:none!important;max-width:none!important}
  :is(.tabelle-fix,.tw,.tscroll,.table-wrap) table :is(th,td)::before,:is(.tabelle-fix,.tw,.tscroll,.table-wrap) table :is(th,td)::after{content:none!important}
}

/* 2) Dialoge: Kopf (Titel + Schliessen) bleibt sichtbar, nur der Inhalt scrollt; Fuss (.modal-f) bleibt unten.
   Schliessen per Abdunklung, Esc und Zurueck-Geste regelt js/sitzung.js (SPS.modal). */
.overlay{padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));overscroll-behavior:contain}
.modal{display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;max-height:calc(100dvh - max(14px,env(safe-area-inset-top)) - max(14px,env(safe-area-inset-bottom)))}
.modal-h{position:sticky;top:0;z-index:5;flex:none;gap:10px}
.modal-h>:first-child{min-width:0;overflow-wrap:anywhere}
.modal-b{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.modal-f{position:sticky;bottom:0;z-index:5;flex:none;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:12px 16px;background:var(--surface);border-top:1px solid var(--border)}
.modal-h :is(.sps-x,[data-close]){all:unset;box-sizing:border-box;flex:none;min-width:44px;min-height:44px;margin:-10px -12px -10px 0;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;cursor:pointer;color:#fff;font-family:var(--sans);font-size:20px;line-height:1}
[dir="rtl"] .modal-h :is(.sps-x,[data-close]){margin:-10px 0 -10px -12px}
.modal-h :is(.sps-x,[data-close]):hover{background:rgba(255,255,255,.16)}
.modal-h :is(.sps-x,[data-close]):focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
@media(max-width:640px){
  .overlay{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .modal{max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))}
}

/* 3) Such- und Filterleisten: Suchfeld volle Breite in eigener erster Zeile, 44px hoch, 16px Schrift (kein iOS-Zoom);
   Filter, Schalter und Knoepfe brechen darunter um. Greift fuer .toolbar mit #search, type=search oder .suche. */
.toolbar>:is(input#search,input[type="search"],input.suche){flex:1 1 100%;order:-1;max-width:none!important;width:100%;min-height:44px;font-size:16px}
.toolbar>input[type="search"]{-webkit-appearance:none;appearance:none}
.toolbar>label.chk{display:inline-flex;align-items:center;gap:7px;margin:0;cursor:pointer}
.toolbar>label.chk input{width:auto;min-height:0}
@media(max-width:640px){
  .toolbar>:is(select,.btn,label.chk){min-height:44px}
  .toolbar>select{flex:1 1 150px;font-size:16px}
}

/* 4) Icons in Knoepfen erben die Schriftfarbe (weiss auf .btn.primary/.danger, navy auf .gold …) */
.btn :is(svg,i,.ico,.sps-plus){color:inherit}
.btn svg:not([fill]){fill:currentColor}
.btn svg [fill]:not([fill="none"]){fill:currentColor}
.btn svg[stroke]:not([stroke="none"]),.btn svg [stroke]:not([stroke="none"]){stroke:currentColor}
.btn .sps-plus{font-weight:800;font-size:1.25em;line-height:1;font-variant-emoji:text}

/* 5) Formular-Abstaende (05.10.2026, wie die App: lib/widgets/formular.dart) — Felder kleben nicht aneinander.
   Beschriftung 14px ueber dem Feld (oben, auch gegen seiteneigene `.frm label{margin-top:8px}`; Beschriftungen mit
   eigener Klasse wie Radio-Kacheln bleiben unberuehrt). Zwei Felder direkt untereinander ohne Beschriftung bekommen
   12px Luft — nur in Formularen/Karten/Dialogen, nicht in Werkzeug-/Filterleisten (.toolbar, .row, .g2, .grid2).
   Auf breiten Schirmen werden einspaltige Formulare (form.frm) hoechstens 720px breit statt ueber die volle Breite. */
form.frm label:not([class]){margin-top:14px}
:is(form,.modal-b,.card,.login)>:is(input,select,textarea):not([type="checkbox"],[type="radio"],[type="hidden"],[hidden])+:is(input,select,textarea):not([type="checkbox"],[type="radio"],[type="hidden"]){margin-top:12px}
@media(min-width:901px){form.frm{max-width:720px}}