/* CSS-Portal, Entwurf A "Leitstand" (Wahl des Nutzers 18.10.2026): Farben der Kasse, dunkelblaue Seitenleiste. Autor: ERA IT. */
@font-face{font-family:"Plex Mono";src:url(fonts/IBMPlexMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/IBMPlexMono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/IBMPlexMono-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --kopf:#1E3A5F;--kopf-hell:#28507F;--akzent:#2D6CDF;--akzent-hg:#EAF1FD;--hg:#E6EAF0;--flaeche:#fff;--rahmen:#C3CBD6;--linie:#E1E6ED;--feld:#F5F7FA;
  --text:#1B2533;--gedimmt:#6B7685;--gruen:#2E7D32;--gruen-hg:#E7F3E8;--rot:#C62828;--rot-hg:#FBE9E9;--gelb:#9A6700;--gelb-hg:#FFF3D1;
  --mono:"Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:14px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;color:var(--text);background:var(--hg)}
a{color:var(--akzent)}
h1:focus{outline:none}
.rahmen{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

/* Seitenleiste wie der Kopf der Kasse */
.seite{background:var(--kopf);color:#fff;display:flex;flex-direction:column;padding:18px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.marke{display:flex;gap:11px;align-items:center;padding:0 18px 18px;text-decoration:none;color:#fff}
.logo{width:40px;height:40px;border-radius:9px;background:#fff;display:grid;place-items:center;font:800 15px/1 "Segoe UI",sans-serif;color:var(--kopf);letter-spacing:.5px;position:relative;flex:none}
.logo:after{content:"";position:absolute;left:8px;right:8px;bottom:7px;height:3px;border-radius:2px;background:var(--akzent)}
.marke b{display:block;font-size:13px;line-height:1.2}
.marke span{font-size:11.5px;opacity:.7}
.mandant{margin:0 12px 14px;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.08);font-size:12.5px}
.mandant small{display:block;opacity:.65;font-size:11px}
.navi a{display:flex;justify-content:space-between;align-items:center;padding:9px 18px;text-decoration:none;font-size:14px;color:rgba(255,255,255,.86);border-left:3px solid transparent}
.navi a:hover{background:rgba(255,255,255,.06)}
.navi a.active{background:var(--kopf-hell);border-left-color:var(--akzent);color:#fff;font-weight:600}
.navi .zahl{font:600 11.5px var(--mono);background:rgba(255,255,255,.14);padding:1px 7px;border-radius:10px}
.navi .zahl.rot{background:var(--rot)}
.navi .gruppe{padding:16px 18px 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.navi a.spaeter{opacity:.5}
.seite .unten{margin-top:auto;padding:14px 18px 0;font-size:12px;opacity:.75;border-top:1px solid rgba(255,255,255,.1)}

/* Inhalt */
main.inhalt{padding:0 26px 30px;min-width:0}
.kopfzeile{display:flex;align-items:center;gap:16px;padding:18px 0 16px;flex-wrap:wrap}
.kopfzeile h1{margin:0;font-size:22px;font-weight:600}
.kopfzeile .zeit{color:var(--gedimmt);font-size:13px}
.kopfzeile .rechts{margin-left:auto;display:flex;align-items:center;gap:12px}
.benutzer{display:flex;align-items:center;gap:9px;font-size:13px}
.benutzer i{width:32px;height:32px;border-radius:50%;background:var(--kopf);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:12px}
.benutzer small{display:block;color:var(--gedimmt);font-size:11.5px}
.umgebung{font:600 11.5px var(--mono);padding:3px 9px;border-radius:12px;background:var(--gelb-hg);color:var(--gelb)}

.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kachel{background:var(--flaeche);border:1px solid var(--rahmen);border-radius:10px;padding:14px 16px}
.kachel small{color:var(--gedimmt);font-size:12.5px}
.kachel b{display:block;font:600 26px/1.15 var(--mono);margin-top:4px}
.kachel .neben{font-size:12.5px;color:var(--gedimmt);margin-top:2px}
.kachel.alarm b{color:var(--rot)}
.raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.spalte{display:flex;flex-direction:column;gap:16px;min-width:0}
.block{background:var(--flaeche);border:1px solid var(--rahmen);border-radius:10px;overflow:hidden}
.block+.block{margin-top:16px}
.spalte .block+.block{margin-top:0}
.block h2{margin:0;padding:12px 16px;font-size:14.5px;font-weight:600;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;align-items:center;gap:12px}
.block h2 a,.block h2 .neben{font-weight:400;font-size:12.5px;color:var(--akzent);text-decoration:none}
.block h2 .neben{color:var(--gedimmt)}
.block .innen{padding:14px 16px}
.huelle{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-weight:600;font-size:12px;color:var(--gedimmt);text-align:left;padding:8px 12px;background:#F5F7FA;border-bottom:1px solid var(--linie);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--linie);white-space:nowrap;vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F7F9FC}
tbody tr.waehlbar{cursor:pointer}
td.zahl,th.zahl{text-align:right;font-family:var(--mono)}
td .klein,.klein{font-size:12px;color:var(--gedimmt)}
td .klein{display:block}
td.umbruch{white-space:normal}
.mono{font-family:var(--mono)}
tr.stoerung{background:#FFF8F8}
.pille{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:2px 9px 2px 8px;border-radius:12px;white-space:nowrap}
.pille:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.gut{color:var(--gruen);background:var(--gruen-hg)}.schlecht{color:var(--rot);background:var(--rot-hg)}.achtung{color:var(--gelb);background:var(--gelb-hg)}
.neutral{color:var(--gedimmt);background:var(--feld)}
.liste{margin:0;padding:0;list-style:none}
.liste li{padding:10px 16px 10px 14px;border-bottom:1px solid var(--linie);border-left:3px solid transparent;font-size:13.5px}
.liste li:last-child{border-bottom:0}
.liste li small{display:block;color:var(--gedimmt);font-size:12px;margin-top:1px}
.liste li.stoerung{border-left-color:var(--rot)}.liste li.warnung{border-left-color:#E0A800}.liste li.gruen,.liste li.info{border-left-color:var(--gruen)}
.leer{padding:14px 16px;color:var(--gedimmt);font-size:13.5px}
.balken{height:8px;border-radius:5px;background:var(--linie);overflow:hidden;margin:6px 0 8px}
.balken i{display:block;height:100%;background:var(--gruen)}
.zeilen td:first-child{color:var(--gedimmt)}

/* Formulare */
.formular{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 14px;align-items:end}
.feld{display:flex;flex-direction:column;gap:4px}
.feld label{font-size:12.5px;color:var(--gedimmt);font-weight:600}
.feld input,.feld select,.feld textarea{font:inherit;padding:8px 10px;border:1px solid var(--rahmen);border-radius:7px;background:#fff;color:var(--text);min-width:0}
.feld input:focus,.feld select:focus{outline:2px solid var(--akzent-hg);border-color:var(--akzent)}
.feld.haken{flex-direction:row;align-items:center;gap:8px}
.knopf{font:600 13.5px "Segoe UI",system-ui,sans-serif;padding:8px 14px;border-radius:8px;border:1px solid var(--rahmen);background:#fff;color:var(--text);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.knopf:hover{background:var(--feld)}
.knopf.primaer{background:var(--akzent);border-color:var(--akzent);color:#fff}
.knopf.primaer:hover{background:#2560CC}
.knopf.gefahr{color:var(--rot);border-color:#E9B4B4}
.knopf.klein{padding:4px 10px;font-size:12.5px}
.knopfreihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.meldung{padding:10px 14px;border-radius:8px;font-size:13.5px;margin-bottom:14px;border-left:3px solid}
.meldung.ok{background:var(--gruen-hg);border-color:var(--gruen)}
.meldung.fehler{background:var(--rot-hg);border-color:var(--rot)}
.geheim{font:500 13px var(--mono);background:var(--feld);border:1px dashed var(--rahmen);padding:10px 12px;border-radius:8px;word-break:break-all;margin:8px 0}
pre.json{font:12px/1.5 var(--mono);background:var(--feld);padding:12px;border-radius:8px;overflow:auto;max-height:420px;margin:0}

/* Tage und Lücken */
.tage td{padding:4px 3px;text-align:center}
.tage td.f{text-align:left;padding-left:12px;white-space:nowrap}
.tag{display:inline-block;width:26px;height:20px;border-radius:4px;background:var(--feld);border:1px solid var(--linie)}
.tag.voll{background:#CDE8CF;border-color:#B5DCB8}.tag.ab{background:#9FD3A4;border-color:#86C68C}.tag.luecke{background:#F6D18A;border-color:#E9BD62}.tag.belege{background:#E0E6EE}

/* Anmeldung */
.anmeldung{min-height:100vh;display:grid;place-items:center;background:var(--kopf);padding:16px}
.anmeldung .karte{background:#fff;border-radius:12px;padding:28px 30px;width:100%;max-width:380px}
.anmeldung .marke{color:var(--kopf);padding:0 0 18px}
.anmeldung .marke .logo{background:var(--kopf);color:#fff}
.anmeldung form{display:flex;flex-direction:column;gap:12px}

@media(max-width:1200px){.raster{grid-template-columns:1fr}.kacheln{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.rahmen{grid-template-columns:1fr}.seite{position:static;height:auto}.navi{display:flex;flex-wrap:wrap}.navi .gruppe,.seite .unten,.navi a.spaeter{display:none}main.inhalt{padding:0 14px 24px}}

#blazor-error-ui{background:var(--gelb-hg);bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem}