/* OPENZOE · CI 1.3 · 16.10.2026. Markenwerte aus brand/tokens.json.
   Komponenten verwenden semantische Rollen, keine Markenwerte oder Alias-Paletten.
   Statusfarben und dunkle Statusvarianten: Vorschlag – Freigabe nötig. */
@font-face { font-family: Inter; src: url('/brand/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('/brand/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url('/brand/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('/brand/fonts/InterDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --marke-nachtblau: #0B1B2B;
  --marke-tuerkis: #4BC7D5;
  --marke-papier: #F4F8FA;
  --marke-weiss: #FFFFFF;
  --marke-interaktion: #1F7890;
  --marke-sekundaer: #506878;
  --marke-linie: #D9E5EA;
  --farbe-hintergrund: var(--marke-papier);
  --farbe-flaeche: var(--marke-weiss);
  --farbe-navigation: var(--marke-weiss);
  --farbe-text: var(--marke-nachtblau);
  --farbe-sekundaer: var(--marke-sekundaer);
  --farbe-linie: var(--marke-linie);
  --farbe-trennung: var(--marke-linie);
  --farbe-primaer: var(--marke-nachtblau);
  --farbe-auf-primaer: var(--marke-weiss);
  --farbe-aktion: var(--marke-interaktion);
  --farbe-aktion-hover: #155B70;
  --farbe-auf-aktion: var(--marke-weiss);
  --farbe-aktion-flaeche: #ECF6F8;
  --farbe-hover: #ECF6F8;
  --farbe-neutral-flaeche: var(--marke-papier);
  --farbe-akzent: var(--marke-tuerkis);
  --farbe-invers: var(--marke-nachtblau);
  --farbe-invers-flaeche: #142E43;
  --farbe-auf-invers: var(--marke-weiss);
  --farbe-fokus: var(--marke-interaktion);
  --farbe-erfolg: #216B58;
  --farbe-erfolg-flaeche: #EAF4EF;
  --farbe-warnung: #805817;
  --farbe-warnung-flaeche: #FBF3E3;
  --farbe-fehler: #804363;
  --farbe-fehler-hover: #66334E;
  --farbe-fehler-flaeche: #F6ECF1;
  --farbe-info: var(--marke-interaktion);
  --farbe-info-flaeche: #ECF6F8;
  --farbe-zoe-aus: #C35660;
  --farbe-code: var(--marke-nachtblau);
  --farbe-auf-code: var(--marke-papier);
  --farbe-code-schluessel: #80D4DF;
  --farbe-code-string: #A9D8C5;
  --farbe-code-zahl: #F2D398;
  --farbe-code-literal: #DFB7CD;
  --farbe-code-kommentar: #A8BDC9;
  --farbe-markierung: #F0DEA9;
  --farbe-schatten: rgba(11, 27, 43, 0.08);
  --farbe-abdeckung: rgba(11, 27, 43, 0.56);
  --ent-sev-critical: var(--farbe-fehler);
  --ent-sev-error: var(--farbe-fehler);
  --ent-sev-warning: var(--farbe-warnung);
  --ent-sev-info: var(--farbe-info);
  --reihe-1: var(--farbe-aktion);
  --reihe-2: var(--farbe-fehler);
  --reihe-3: var(--farbe-erfolg);
  --reihe-4: var(--farbe-warnung);
  --schrift-text: Inter, ui-sans-serif, system-ui, sans-serif;
  --schrift-titel: 'Inter Display', Inter, ui-sans-serif, system-ui, sans-serif;
  --schrift-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --schrift-display: 48px;
  --schrift-abschnitt: 28px;
  --schrift-basis: 16px;
  --schrift-label: 12px;
  --schrift-navigation: 14px;
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-6: 24px;
  --abstand-8: 32px;
  --abstand-12: 48px;
  --abstand-16: 64px;
  --radius-bedienung: 8px;
  --radius-karte: 16px;
  --radius-flaeche: 24px;
  --schatten: 0 1px 3px var(--farbe-schatten);
  --schatten-hoch: 0 8px 24px var(--farbe-schatten);
  --schatten-dialog: 0 16px 48px var(--farbe-schatten);
  --fokus-ring: 0 0 0 2px var(--farbe-fokus);
  --dauer: 180ms;
  color-scheme: light;
}
/* Ein gemeinsamer Dunkelmodus. Das Dashboard folgt System oder gewählter Ansicht.
   Helle Aktionen brauchen eine dunkle Gegenfarbe; keine weißen Texte auf Türkis. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { color-scheme: dark; }
}
:root[data-theme='dark'] { color-scheme: dark; }
@supports (color: light-dark(white, black)) {
  :root {
    --farbe-hintergrund: light-dark(var(--marke-papier), var(--marke-nachtblau));
    --farbe-flaeche: light-dark(var(--marke-weiss), #142E43);
    --farbe-navigation: light-dark(var(--marke-weiss), #142E43);
    --farbe-text: light-dark(var(--marke-nachtblau), var(--marke-papier));
    --farbe-sekundaer: light-dark(var(--marke-sekundaer), #B8CBD6);
    --farbe-linie: light-dark(var(--marke-linie), #405B70);
    --farbe-trennung: var(--farbe-linie);
    --farbe-primaer: light-dark(var(--marke-nachtblau), var(--marke-tuerkis));
    --farbe-auf-primaer: light-dark(var(--marke-weiss), var(--marke-nachtblau));
    --farbe-aktion: light-dark(var(--marke-interaktion), #80D4DF);
    --farbe-aktion-hover: light-dark(#155B70, #A1E3EB);
    --farbe-auf-aktion: light-dark(var(--marke-weiss), var(--marke-nachtblau));
    --farbe-aktion-flaeche: light-dark(#ECF6F8, #1A3B50);
    --farbe-hover: var(--farbe-aktion-flaeche);
    --farbe-neutral-flaeche: light-dark(var(--marke-papier), #1A3449);
    --farbe-fokus: light-dark(var(--marke-interaktion), var(--marke-tuerkis));
    --farbe-erfolg: light-dark(#216B58, #9DDBC4);
    --farbe-erfolg-flaeche: light-dark(#EAF4EF, #173E36);
    --farbe-warnung: light-dark(#805817, #F2D398);
    --farbe-warnung-flaeche: light-dark(#FBF3E3, #443821);
    --farbe-fehler: light-dark(#804363, #E6B5D0);
    --farbe-fehler-hover: light-dark(#66334E, #F3D1E4);
    --farbe-fehler-flaeche: light-dark(#F6ECF1, #422C40);
    --farbe-info: var(--farbe-aktion);
    --farbe-info-flaeche: var(--farbe-aktion-flaeche);
    --farbe-markierung: light-dark(#F0DEA9, #55451E);
  }
}
/* Gemeinsame zugängliche Grundbausteine für alle Oberflächen. */
html { font-family: var(--schrift-text); line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { font-family: var(--schrift-text); font-size: var(--schrift-basis); line-height: 1.5; }
h1,h2,h3 { font-family: var(--schrift-titel); font-weight: 700; text-align: left; }
h1,h2 { font-size: var(--schrift-abschnitt); line-height: 1.2143; }
h3 { font-size: var(--schrift-basis); line-height: 1.5; }
button,input,select,textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--farbe-fokus); outline-offset: 3px; }
input,select,textarea { accent-color: var(--farbe-aktion); }
[aria-invalid='true'] { border-color: var(--farbe-fehler); }
[aria-busy='true'] { cursor: progress; }
button:disabled,[aria-disabled='true'] { cursor: not-allowed; }
.openzoe-logo { display: block; width: 180px; height: auto; flex-shrink: 0; }
.openzoe-logo-dunkel { display: none; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme='light']) .openzoe-logo-hell { display:none; }
  :root:not([data-theme='light']) .openzoe-logo-dunkel { display:block; }
}
:root[data-theme='dark'] .openzoe-logo-hell { display:none; }
:root[data-theme='dark'] .openzoe-logo-dunkel { display:block; }
.openzoe-icon { width:48px; height:48px; object-fit:contain; }
.lucide { width:24px; height:24px; stroke-width:2; vertical-align:middle; flex-shrink:0; }
.lucide-sm { width:20px; height:20px; }
button .lucide { pointer-events:none; }
.zoe-zustand { display:flex; align-items:center; gap:var(--abstand-3); }
.zoe-zustand img { width:64px; height:64px; object-fit:contain; }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}