:root{color-scheme:light;--surface-1: #fcfcfb;--surface-2: #f2f1ed;--page: #f9f9f7;--text-primary: #0b0b0b;--text-secondary: #52514e;--text-muted: #898781;--gridline: #e1e0d9;--baseline: #c3c2b7;--border: rgba(11, 11, 11, .1);--marke-blau: #0000fe;--akzent: #1e3a7a;--akzent-hover: #162d5f;--akzent-tint: #e8edf7;--akzent-text: #1e3a7a;--series-1: #2a78d6;--series-2: #eb6834;--status-good: #0ca30c;--status-warning: #fab219;--status-serious: #ec835a;--status-critical: #d03b3b;--pille-kritisch-bg: #fdeceb;--pille-kritisch-fg: #a92a2a;--pille-warnung-bg: #fdf3e0;--pille-warnung-fg: #8a5a08;--pille-gut-bg: #e7f5ea;--pille-gut-fg: #1d6b32;--pille-neutral-bg: var(--surface-2);--pille-neutral-fg: var(--text-secondary);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--radius-sm: 6px;--radius: 10px;--radius-lg: 14px;--radius-pille: 999px;--shadow-1: 0 1px 2px rgba(11, 11, 11, .04);--shadow-2: 0 4px 12px rgba(11, 11, 11, .07);--halle-deckkraft: .5;--halle-filter: none;--logo-hell: block;--logo-dunkel: none;--font: system-ui, -apple-system, "Segoe UI", sans-serif}@media(prefers-color-scheme:dark){:root:where(:not([data-theme=light])){color-scheme:dark;--surface-1: #1a1a19;--surface-2: #242423;--page: #0d0d0d;--text-primary: #ffffff;--text-secondary: #c3c2b7;--text-muted: #898781;--gridline: #2c2c2a;--baseline: #383835;--border: rgba(255, 255, 255, .1);--akzent: #3f6bbf;--akzent-hover: #4f7bcf;--akzent-tint: #1e2942;--akzent-text: #8fb3ea;--series-1: #3987e5;--series-2: #d95926;--pille-kritisch-bg: #3a1f1f;--pille-kritisch-fg: #f0a0a0;--pille-warnung-bg: #382d16;--pille-warnung-fg: #f0c878;--pille-gut-bg: #1b2f20;--pille-gut-fg: #8ed6a3;--shadow-1: 0 1px 2px rgba(0, 0, 0, .3);--shadow-2: 0 4px 12px rgba(0, 0, 0, .45);--halle-deckkraft: .35;--halle-filter: invert(1);--logo-hell: none;--logo-dunkel: block}}:root[data-theme=dark]{color-scheme:dark;--surface-1: #1a1a19;--surface-2: #242423;--page: #0d0d0d;--text-primary: #ffffff;--text-secondary: #c3c2b7;--text-muted: #898781;--gridline: #2c2c2a;--baseline: #383835;--border: rgba(255, 255, 255, .1);--akzent: #3f6bbf;--akzent-hover: #4f7bcf;--akzent-tint: #1e2942;--akzent-text: #8fb3ea;--series-1: #3987e5;--series-2: #d95926;--pille-kritisch-bg: #3a1f1f;--pille-kritisch-fg: #f0a0a0;--pille-warnung-bg: #382d16;--pille-warnung-fg: #f0c878;--pille-gut-bg: #1b2f20;--pille-gut-fg: #8ed6a3;--shadow-1: 0 1px 2px rgba(0, 0, 0, .3);--shadow-2: 0 4px 12px rgba(0, 0, 0, .45);--halle-deckkraft: .35;--halle-filter: invert(1);--logo-hell: none;--logo-dunkel: block}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--page);color:var(--text-primary);font-family:var(--font);font-size:14px;line-height:1.5}h1{font-size:34px;letter-spacing:-.02em;margin:0 0 var(--sp-1)}h2{font-size:16px;margin:0}a{color:inherit}:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:var(--radius-sm)}.app{display:grid;grid-template-columns:260px 1fr;min-height:100%}.sidebar{background:var(--surface-1);border-right:1px solid var(--border);padding:var(--sp-5) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1)}.marke{padding:0 var(--sp-3) var(--sp-5)}.marke img{width:150px;height:auto}.marke img.hell{display:var(--logo-hell)}.marke img.dunkel{display:var(--logo-dunkel)}.marke .anwendung{margin-top:var(--sp-2);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--text-secondary)}.sidebar .gruppe{color:var(--text-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-4) var(--sp-3) var(--sp-1)}.sidebar a{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);text-decoration:none;color:var(--text-secondary)}.sidebar a svg{flex:none;opacity:.75}.sidebar a:hover{background:var(--page);color:var(--text-primary)}.sidebar a.aktiv{background:var(--akzent-tint);color:var(--akzent-text);font-weight:600}.sidebar a.aktiv svg{opacity:1}.kopfzeile{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-6);background:var(--surface-1);border-bottom:1px solid var(--border)}.suche{display:flex;gap:var(--sp-2);flex:1;max-width:620px}.suche .feldgruppe{position:relative;flex:1}.suche .feldgruppe svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.suche input{width:100%;padding-left:36px;background:var(--surface-2);border-color:transparent}.suche input:focus{background:var(--surface-1);border-color:var(--baseline)}.benutzer-menue{position:relative;flex:none}.benutzer-knopf{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2);background:none;border:1px solid transparent;border-radius:var(--radius-sm);text-align:left}.benutzer-knopf:hover{background:var(--page)}.initialen{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:var(--radius-pille);background:var(--akzent-tint);color:var(--akzent-text);font-size:12px;font-weight:700;letter-spacing:.03em}.benutzer-knopf .name{font-weight:600;line-height:1.2}.benutzer-knopf .rolle{color:var(--text-muted);font-size:12px;line-height:1.2}.benutzer-klappe{position:absolute;right:0;top:calc(100% + var(--sp-2));min-width:220px;padding:var(--sp-2);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:2px}.benutzer-klappe .kennung{padding:var(--sp-2) var(--sp-3) var(--sp-3);border-bottom:1px solid var(--border);margin-bottom:var(--sp-2)}.benutzer-klappe .kennung .mail{color:var(--text-muted);font-size:12px;word-break:break-all}.benutzer-klappe a,.benutzer-klappe button{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2) var(--sp-3);background:none;border:none;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-secondary);font:inherit;text-align:left}.benutzer-klappe a:hover,.benutzer-klappe button:hover{background:var(--page);color:var(--text-primary)}.benutzer-klappe button.abmelden{color:var(--status-critical)}.hauptspalte{display:flex;flex-direction:column;min-width:0;min-height:100%}.inhalt{flex:1;padding:var(--sp-6) var(--sp-8);max-width:1440px;width:100%}.fusszeile{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);justify-content:space-between;padding:var(--sp-4) var(--sp-8);border-top:1px solid var(--border);color:var(--text-muted);font-size:12px}.seitenkopf{position:relative;margin-bottom:var(--sp-6);min-height:92px}.seitenkopf:after{content:"";position:absolute;inset:-12px 0 auto auto;width:min(62%,780px);height:190px;background:url(/halle.png) right top / contain no-repeat;opacity:var(--halle-deckkraft);filter:var(--halle-filter);mask-image:linear-gradient(to right,transparent,#000 45%);-webkit-mask-image:linear-gradient(to right,transparent,#000 45%);pointer-events:none;z-index:0}.seitenkopf>*{position:relative;z-index:1}.kopf{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-5)}.untertitel{color:var(--text-secondary);margin:0}.karte{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5);box-shadow:var(--shadow-1)}.karte-kopf{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}.karte-kopf .anzahl{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-pille);background:var(--surface-2);color:var(--text-secondary);font-size:12px;font-weight:600}.mehr{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--akzent-text);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}.mehr:hover{text-decoration:underline}.karte-kopf .mehr{margin-left:auto}.kachel-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}.kachel{display:flex;align-items:flex-start;gap:var(--sp-4)}.kachel .symbol{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:var(--radius);background:var(--akzent-tint);color:var(--akzent-text)}.kachel .symbol.warnung{background:var(--pille-warnung-bg);color:var(--pille-warnung-fg)}.kachel .wert{font-size:30px;font-weight:650;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.kachel .beschriftung{font-weight:600}.kachel .zusatz{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:2px;color:var(--text-muted);font-size:12px;text-decoration:none}.tafel-raster{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-4);align-items:start}.tafel-spalte{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}@media(max-width:1200px){.tafel-raster{grid-template-columns:minmax(0,1fr)}}@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:none;border-bottom:1px solid var(--border)}.sidebar .gruppe{display:none}.marke{padding:0 var(--sp-3) 0 0}.inhalt{padding:var(--sp-4)}.benutzer-knopf .name,.benutzer-knopf .rolle{display:none}}.aktivitaeten{display:flex;flex-direction:column;gap:var(--sp-1)}.aktivitaet{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:var(--sp-3);align-items:start;padding:var(--sp-2) 0}.aktivitaet .symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-secondary)}.aktivitaet .titel{font-weight:600}.aktivitaet .detail{color:var(--text-muted);font-size:12px;overflow-wrap:anywhere}.aktivitaet .zeit{color:var(--text-muted);font-size:12px;white-space:nowrap;padding-top:2px}.filterzeile{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;margin-bottom:var(--sp-4)}.feld{display:flex;flex-direction:column;gap:var(--sp-1)}.feld label{color:var(--text-secondary);font-size:12px}input,select,button{font:inherit;color:inherit;background:var(--surface-1);border:1px solid var(--baseline);border-radius:var(--radius-sm);padding:7px 10px}button{cursor:pointer}button.primaer{background:var(--akzent);border-color:var(--akzent);color:#fff;font-weight:600}button.primaer:hover:not(:disabled){background:var(--akzent-hover);border-color:var(--akzent-hover)}button:disabled{opacity:.55;cursor:not-allowed}.schalter{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.schalter input{margin:0}.legende{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 var(--sp-1);padding:0;list-style:none;color:var(--text-secondary);font-size:13px}.legende li{display:flex;align-items:center;gap:7px}.legende .marke{width:12px;height:3px;border-radius:2px;flex:none;padding:0}.legende .marke.gestrichelt{background-image:linear-gradient(90deg,currentColor 55%,transparent 55%);background-size:6px 3px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--gridline)}tbody tr:last-child td{border-bottom:none}th{color:var(--text-muted);font-weight:600;font-size:12px}td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums}td.kritisch{color:var(--pille-kritisch-fg);font-weight:600}td.warnung{color:var(--pille-warnung-fg);font-weight:600}.hinweis{color:var(--text-secondary);padding:var(--sp-4) 0}.fehler{color:var(--status-critical);padding:var(--sp-3) 0}.pille{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--radius-pille);font-size:12px;font-weight:600;white-space:nowrap;background:var(--pille-neutral-bg);color:var(--pille-neutral-fg)}.pille.kritisch{background:var(--pille-kritisch-bg);color:var(--pille-kritisch-fg)}.pille.warnung{background:var(--pille-warnung-bg);color:var(--pille-warnung-fg)}.pille.gut{background:var(--pille-gut-bg);color:var(--pille-gut-fg)}.abzeichen{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600}.abzeichen:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.abzeichen.kritisch{color:var(--status-critical)}.abzeichen.ok{color:var(--status-good)}.anmeldung{display:grid;place-items:center;min-height:100%;padding:var(--sp-4)}.anmeldung .karte{width:360px;box-shadow:var(--shadow-2)}.anmeldung form{display:flex;flex-direction:column;gap:var(--sp-3)}.anmeldung .marke{padding:0 0 var(--sp-5)}.anmeldung .marke img{width:170px;margin:0 auto}.anmeldung .marke .anwendung{text-align:center}
