/* Gestaltungswerte an einer Stelle. Blau traegt die Struktur, Hellblau den
   Zustand, Weiss die Daten. Der Akzent erscheint nur dort, wo etwas passiert.
   Alle Textfarben sind gegen ihren Untergrund auf mindestens 4,5:1 gerechnet. */

:root {
  color-scheme: light dark;

  /* Flaechen, kuehl aber nicht grau */
  --grund:            #F2F6FC;
  --flaeche:          #FFFFFF;
  --flaeche-sanft:    #F7FAFE;
  --flaeche-versenkt: #E9EFF7;
  --flaeche-hover:    #F4F8FD;
  --flaeche-aktiv:    #E4EFFD;

  /* Linien */
  --linie:            #DEE7F2;
  --linie-stark:      #C6D4E6;
  --linie-zart:       #EBF1F8;

  /* Text */
  --text:             #0F1C2E;
  --text-weich:       #3A4B60;
  --text-leise:       #64778F;
  --text-auf-farbe:   #FFFFFF;

  /* Marke */
  --blau:             #1E6FE0;
  --blau-dunkel:      #1557B8;
  --blau-tief:        #10428F;
  --blau-hell:        #E4EFFD;
  --blau-hell-stark:  #CDE1FB;
  --blau-schleier:    rgba(30, 111, 224, .12);

  /* Seitenleiste, tiefes Navy statt Schwarz */
  --leiste:           #0D1B2E;
  --leiste-verlauf:   linear-gradient(180deg, #102340 0%, #0B1728 100%);
  --leiste-text:      #C9D8EC;
  --leiste-leise:     #7488A3;
  --leiste-aktiv-bg:  rgba(90, 160, 255, .18);
  --leiste-aktiv-kante: #5AA0FF;
  --leiste-hover:     rgba(255, 255, 255, .06);
  --leiste-linie:     rgba(255, 255, 255, .08);

  /* Fokus */
  --fokus-ring:       0 0 0 3px rgba(30, 111, 224, .32);
  --fokus-kante:      #1557B8;

  /* Schatten, drei Stufen, sonst keine */
  --schatten-karte:   0 1px 2px rgba(15, 28, 46, .05);
  --schatten-hebung:  0 1px 2px rgba(15, 28, 46, .06), 0 8px 24px rgba(15, 28, 46, .08);
  --schatten-schwebe: 0 2px 4px rgba(15, 28, 46, .06), 0 24px 56px rgba(15, 28, 46, .16);

  /* Glas, nur fuer schwebende Ebenen. Nicht auf Flaechen mit Daten darunter. */
  --glas-flaeche:     rgba(255, 255, 255, .72);
  --glas-filter:      saturate(180%) blur(20px);
  --glas-kante:       inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .45);

  /* Status. Bewusst kein weiteres Blau, sonst verschwimmt Marke mit Bedeutung. */
  --erfolg-bg:    #E4F4EA;  --erfolg-text:  #16653A;  --erfolg:  #1B8250;
  --warnung-bg:   #FCF1DA;  --warnung-text: #7A5200;  --warnung: #C98A0E;
  --fehler-bg:    #FCE6E4;  --fehler-text:  #A6231C;  --fehler:  #C62E25;
  --info-bg:      #DFF1F7;  --info-text:    #0B5E75;  --info:    #0E7D9B;
  --neutral-bg:   #E9EEF5;  --neutral-text: #4E5D70;  --neutral: #7B8CA1;
  --laeuft-bg:    #EAE8FB;  --laeuft-text:  #493FB0;  --laeuft:  #5A4BD1;

  /* Schrift */
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-zahl: "Inter", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Raster. Acht Punkte, keine krummen Werte. */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px; --r8: 64px;

  /* Radien */
  --rad-s: 8px; --rad: 12px; --rad-l: 18px; --rad-xl: 26px;

  /* Masse */
  --leiste-breite: 252px;
  --kopf-hoehe: 60px;
  --zeile-hoehe: 38px;      /* dicht genug fuer viele Datenzeilen */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:            #0A1420;
    --flaeche:          #111F31;
    --flaeche-sanft:    #0E1B2A;
    --flaeche-versenkt: #0C1826;
    --flaeche-hover:    #17293E;
    --flaeche-aktiv:    #1B3350;

    --linie:            #20344C;
    --linie-stark:      #30475F;
    --linie-zart:       #1A2C42;

    --text:             #E9F0F9;
    --text-weich:       #B3C3D6;
    --text-leise:       #8296AE;
    --text-auf-farbe:   #08131F;

    --blau:             #5AA0FF;
    --blau-dunkel:      #7DB6FF;
    --blau-tief:        #3E86E8;
    --blau-hell:        rgba(90, 160, 255, .14);
    --blau-hell-stark:  rgba(90, 160, 255, .24);
    --blau-schleier:    rgba(90, 160, 255, .16);

    --leiste:           #081320;
    --leiste-verlauf:   linear-gradient(180deg, #0C1B2C 0%, #070F1A 100%);
    --leiste-text:      #BCCDE3;
    --leiste-leise:     #6A7E98;
    --leiste-aktiv-bg:  rgba(90, 160, 255, .22);
    --leiste-aktiv-kante: #7DB6FF;

    --fokus-ring:       0 0 0 3px rgba(90, 160, 255, .38);
    --fokus-kante:      #7DB6FF;

    --schatten-karte:   0 1px 2px rgba(0, 0, 0, .40);
    --schatten-hebung:  0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .38);
    --schatten-schwebe: 0 2px 4px rgba(0, 0, 0, .40), 0 24px 56px rgba(0, 0, 0, .52);

    --glas-flaeche:     rgba(17, 31, 49, .68);
    --glas-filter:      saturate(160%) blur(20px);
    --glas-kante:       inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 1px rgba(255, 255, 255, .06);

    --erfolg-bg:  rgba(52,199,124,.14);  --erfolg-text:  #6EDBA0;  --erfolg:  #34C77C;
    --warnung-bg: rgba(240,180,60,.14);  --warnung-text: #F0B83C;  --warnung: #E0A62A;
    --fehler-bg:  rgba(255,120,110,.14); --fehler-text:  #FF9B93;  --fehler:  #F4655A;
    --info-bg:    rgba(90,205,235,.14);  --info-text:    #6FD3EC;  --info:    #38B6D8;
    --neutral-bg: rgba(150,170,195,.12); --neutral-text: #9BB0C8;  --neutral: #7B8CA1;
    --laeuft-bg:  rgba(120,110,230,.16); --laeuft-text:  #A99EF5;  --laeuft:  #7B6CE0;
  }
}

/* ------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.011em; }
h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--blau-dunkel); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: 2px; }

/* Zahlen in Tabellen muessen untereinander stehen */
.zahl, td.zahl, .tabellarisch { font-variant-numeric: tabular-nums; }

.leise { color: var(--text-leise); }
.weich { color: var(--text-weich); }
.klein { font-size: 13px; }
.nur-lesbar { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --------------------------------------------------------------- Bausteine */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rad);
  box-shadow: var(--schatten-karte);
}

/* Glas nur fuer Ebenen, die wirklich schweben: Kopfzeile, Dialog, Menue. */
.glas {
  background: var(--glas-flaeche);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-kante), var(--schatten-schwebe);
}
@supports not (backdrop-filter: blur(1px)) {
  .glas { background: var(--flaeche); }
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 38px; padding: 0 var(--r4);
  border: 1px solid var(--linie-stark); border-radius: var(--rad-s);
  background: var(--flaeche); color: var(--text);
  font: inherit; font-weight: 550; cursor: pointer;
  transition: background .14s, border-color .14s, transform .06s;
}
.knopf:hover { background: var(--flaeche-hover); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }
.knopf-haupt {
  background: var(--blau); border-color: var(--blau); color: #fff;
  box-shadow: 0 1px 2px rgba(15,28,46,.12);
}
.knopf-haupt:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf-gross { min-height: 52px; font-size: 17px; border-radius: var(--rad); }
.knopf-still { border-color: transparent; background: transparent; color: var(--text-weich); }
.knopf-still:hover { background: var(--flaeche-hover); }

.feld {
  width: 100%; min-height: 38px; padding: 7px var(--r3);
  border: 1px solid var(--linie-stark); border-radius: var(--rad-s);
  background: var(--flaeche); color: var(--text); font: inherit;
}
.feld:focus { outline: none; border-color: var(--blau); box-shadow: var(--fokus-ring); }
.feld-gross { min-height: 50px; font-size: 17px; }
label { display: block; font-size: 13px; font-weight: 550; color: var(--text-weich); margin-bottom: var(--r1); }

.abzeichen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--neutral-bg); color: var(--neutral-text);
}
.abzeichen-erfolg  { background: var(--erfolg-bg);  color: var(--erfolg-text); }
.abzeichen-warnung { background: var(--warnung-bg); color: var(--warnung-text); }
.abzeichen-fehler  { background: var(--fehler-bg);  color: var(--fehler-text); }
.abzeichen-info    { background: var(--info-bg);    color: var(--info-text); }
.abzeichen-laeuft  { background: var(--laeuft-bg);  color: var(--laeuft-text); }

/* Tabelle bewusst dicht: 38px je Zeile statt der 44px aus dem Shop-Vorbild,
   sonst passen auf einem 1080er-Bildschirm nur 14 Zeilen unter die Kopfleiste. */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  position: sticky; top: 0; z-index: 2;
  background: var(--flaeche-sanft); color: var(--text-leise);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: var(--r2) var(--r3);
  border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: 0 var(--r3); height: var(--zeile-hoehe); border-bottom: 1px solid var(--linie-zart); }
.tabelle tbody tr:hover { background: var(--flaeche-hover); }
.tabelle tbody tr[aria-selected="true"] { background: var(--flaeche-aktiv); }

.leer {
  display: grid; place-items: center; gap: var(--r3);
  padding: var(--r8) var(--r5); text-align: center; color: var(--text-leise);
}

/* Bewegung nur, wenn der Nutzer sie zulaesst */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}