/* Gestaltungswerte an einer Stelle.
 *
 * Leitmotiv: Licht auf Wasser. Eine ruhige, farbige Tiefe, ueber der wenige
 * Glasflaechen schweben. Uebernommen aus dem Entwurf "Glas und Licht",
 * gewaehlt am 22.09.2026.
 *
 * Drei Regeln, an denen das Design haengt:
 * 1. Glas nur fuer schwebende Ebenen: Kopfzeile, untere Leiste, Dialog.
 *    Niemals fuer eine Flaeche mit Daten darunter, dort wird es unlesbar.
 * 2. Jede Glasflaeche hat eine helle Oberkante und eine dunklere Unterkante.
 *    Ohne diese Lichtkante ist es Milchglas, nicht Glas.
 * 3. Daten liegen auf EINER Flaeche und werden durch Haarlinien getrennt,
 *    nicht durch viele gleichfoermige Karten mit gleichem Radius.
 */

@import url('/assets/schriften/schriften.css');

:root {
  color-scheme: light dark;

  /* Tinte: Text in drei Staerken */
  --text:         #0C1B2A;
  --text-weich:   #33475C;
  --text-leise:   #52657C;
  --text-auf-farbe: #FFFFFF;

  /* Azur: die Marke. Der Knopf traegt einen Verlauf, damit er Licht faengt. */
  --blau:         #1550C8;
  --blau-dunkel:  #0F3E9E;
  --blau-tief:    #0B2F7A;
  --blau-hell:    #E3ECFD;
  --blau-hell-stark: #CFE0FB;
  --blau-schleier: rgba(21, 80, 200, .10);
  --blau-knopf:   linear-gradient(180deg, #2F6BE0 0%, #1550C8 100%);

  /* Flaechen. Der Grund ist ein Verlauf, damit das Glas etwas zu brechen hat. */
  --grund:        #F6FAFD;
  --grund-verlauf:
      radial-gradient(1100px 620px at 12% -8%, #D6E8FA 0%, transparent 62%),
      radial-gradient(940px 560px at 96% 4%, #E4E2FB 0%, transparent 58%),
      linear-gradient(180deg, #F6FAFD 0%, #EEF4FA 100%);
  --flaeche:      #FFFFFF;
  --flaeche-sanft:#F6FAFE;
  --flaeche-versenkt: #EBF1F8;
  --flaeche-hover: rgba(12, 27, 42, .035);
  --flaeche-aktiv: #E3ECFD;

  /* Linien: Haarlinien statt Kaesten */
  --linie:        rgba(12, 27, 42, .11);
  --linie-zart:   rgba(12, 27, 42, .06);
  --linie-stark:  rgba(12, 27, 42, .18);

  /* Glas. Nur fuer schwebende Ebenen. */
  --glas-fuellung: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.58) 100%);
  --glas-filter:   saturate(180%) blur(22px);
  --glas-kante:    inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(12,27,42,.07);
  --glas-wurf:     0 2px 6px -2px rgba(12,27,42,.14), 0 20px 44px -22px rgba(12,27,42,.42);
  --glas-deckend:  #FAFCFE;

  /* Seitenleiste: tiefes Blau, kein Schwarz */
  --leiste:           #0E2035;
  --leiste-verlauf:   linear-gradient(180deg, #12293F 0%, #0A1A2C 100%);
  --leiste-text:      #C3D6EA;
  --leiste-leise:     #6F8AA6;
  --leiste-aktiv-bg:  rgba(127, 176, 255, .16);
  --leiste-aktiv-kante: #7FB0FF;
  --leiste-hover:     rgba(255, 255, 255, .06);
  --leiste-linie:     rgba(255, 255, 255, .09);

  /* Marke und Ueberlagerungen. Stehen hier, damit in den Ansichten keine
     harten Farbwerte mehr auftauchen und der Dunkelmodus sie mitnimmt. */
  --marke-verlauf: linear-gradient(140deg, #5AA0FF, #1E6FE0);
  --marke-wurf:    0 2px 8px rgba(30, 111, 224, .45);
  --schleier:      rgba(9, 18, 30, .44);
  --auf-farbe-weich: rgba(255, 255, 255, .86);
  --auf-farbe-zart:  rgba(255, 255, 255, .22);
  --bildtext-verlauf: linear-gradient(transparent, rgba(9, 18, 30, .72));
  /* Der Himmel liegt als Schleier ueber hellen Flaechen, statt sie einzufaerben.
     Aus dem Entwurf uebernommen: Licht, kein Farbblock. */
  --himmel: radial-gradient(760px 360px at 8% -30%, var(--blau-hell-stark) 0%, transparent 64%),
            radial-gradient(620px 320px at 92% -10%, #E4E2FB 0%, transparent 60%);

  --fokus-ring: 0 0 0 3px rgba(21, 80, 200, .28);
  --fokus-kante: #0F3E9E;

  /* Schatten nur drei Stufen, und sparsam */
  --schatten-karte:   0 1px 2px rgba(12, 27, 42, .05);
  --schatten-hebung:  0 1px 2px rgba(12, 27, 42, .06), 0 10px 26px -12px rgba(12, 27, 42, .22);
  --schatten-schwebe: var(--glas-wurf);

  /* Status. Minze statt Gruen, damit es zur kuehlen Welt passt. */
  --erfolg-bg:  #DFF4EC;  --erfolg-text:  #0A7A55;  --erfolg:  #0E9E6E;
  --warnung-bg: #FBEFD8;  --warnung-text: #8A5A00;  --warnung: #C08400;
  --fehler-bg:  #FCE7E5;  --fehler-text:  #A32A22;  --fehler:  #C4352C;
  --info-bg:    #E0F0F8;  --info-text:    #0B5F79;  --info:    #0E7E9E;
  --neutral-bg: #EBF1F8;  --neutral-text: #52657C;  --neutral: #7A8CA3;
  --laeuft-bg:  #E8E6FB;  --laeuft-text:  #463BA8;  --laeuft:  #5B4ECC;

  /* Schrift: der Wechsel von Serife zu Grotesk traegt die Hierarchie */
  --schrift: "Manrope", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  /* Eine Familie fuer alles. --display bleibt als Name bestehen, damit die
     Ansichten nicht angefasst werden muessen, zeigt aber auf dieselbe Schrift. */
  --display: "Manrope", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --schrift-zahl: "Manrope", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px; --r8: 64px;

  /* Radien unterscheiden sich nach Aufgabe, nicht nach Gewohnheit */
  --rad-s: 12px; --rad: 20px; --rad-l: 24px; --rad-xl: 28px;

  --leiste-breite: 252px;
  --kopf-hoehe: 62px;
  --zeile-hoehe: 40px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --text:         #E7EFF8;
    --text-weich:   #BACBDE;
    --text-leise:   #93A8BF;
    --text-auf-farbe: #06121E;

    --blau:         #7FB0FF;
    --blau-dunkel:  #A8CBFF;
    --blau-tief:    #C3DBFF;
    --blau-hell:    rgba(127, 176, 255, .16);
    --blau-hell-stark: rgba(127, 176, 255, .26);
    --blau-schleier: rgba(127, 176, 255, .13);
    --blau-knopf:   linear-gradient(180deg, #3C7BEA 0%, #1D58D2 100%);

    --grund:        #07131F;
    --grund-verlauf:
        radial-gradient(1100px 620px at 12% -8%, #12304F 0%, transparent 62%),
        radial-gradient(940px 560px at 96% 4%, #1E2150 0%, transparent 58%),
        linear-gradient(180deg, #07131F 0%, #050F19 100%);
    --flaeche:      #101F2F;
    --flaeche-sanft:#0C1929;
    --flaeche-versenkt: #0A1624;
    --flaeche-hover: rgba(255, 255, 255, .05);
    --flaeche-aktiv: rgba(127, 176, 255, .13);

    --linie:        rgba(255, 255, 255, .11);
    --linie-zart:   rgba(255, 255, 255, .06);
    --linie-stark:  rgba(255, 255, 255, .18);

    --glas-fuellung: linear-gradient(180deg, rgba(24,44,66,.78) 0%, rgba(16,31,47,.62) 100%);
    --glas-filter:   saturate(160%) blur(22px);
    --glas-kante:    inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.30);
    --glas-wurf:     0 2px 6px -2px rgba(0,0,0,.44), 0 20px 44px -22px rgba(0,0,0,.70);
    --glas-deckend:  #13243A;

    --leiste:           #050F1A;
    --leiste-verlauf:   linear-gradient(180deg, #0A1A2B 0%, #040D16 100%);
    --leiste-text:      #B8CCE2;
    --leiste-leise:     #647F9B;
    --leiste-aktiv-bg:  rgba(127, 176, 255, .20);
    --leiste-aktiv-kante: #A8CBFF;

    --marke-verlauf: linear-gradient(140deg, #4C86D8, #1C4FA8);
    --marke-wurf:    0 2px 8px rgba(0, 0, 0, .50);
    --schleier:      rgba(2, 8, 14, .62);
    --auf-farbe-weich: rgba(255, 255, 255, .80);
    --auf-farbe-zart:  rgba(255, 255, 255, .14);
    --bildtext-verlauf: linear-gradient(transparent, rgba(2, 8, 14, .82));
    --himmel: radial-gradient(760px 360px at 8% -30%, rgba(127,176,255,.14) 0%, transparent 64%),
              radial-gradient(620px 320px at 92% -10%, rgba(150,140,240,.12) 0%, transparent 60%);

    --fokus-ring: 0 0 0 3px rgba(127, 176, 255, .34);
    --fokus-kante: #A8CBFF;

    --schatten-karte:   0 1px 2px rgba(0, 0, 0, .40);
    --schatten-hebung:  0 1px 2px rgba(0, 0, 0, .40), 0 10px 26px -12px rgba(0, 0, 0, .55);

    --erfolg-bg:  rgba(79,214,160,.15);  --erfolg-text:  #6FE0B4;  --erfolg:  #4FD6A0;
    --warnung-bg: rgba(240,194,101,.14); --warnung-text: #F0C265;  --warnung: #E5B450;
    --fehler-bg:  rgba(255,142,134,.14); --fehler-text:  #FF9E96;  --fehler:  #F4665C;
    --info-bg:    rgba(110,205,235,.14); --info-text:    #74D2EC;  --info:    #3FB6D8;
    --neutral-bg: rgba(150,175,205,.12); --neutral-text: #9DB3CB;  --neutral: #7A8CA3;
    --laeuft-bg:  rgba(130,118,235,.17); --laeuft-text:  #ADA2F7;  --laeuft:  #8171E2;
  }
}

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

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

body {
  margin: 0;
  background: var(--grund);
  background-image: var(--grund-verlauf);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Der Hierarchiesprung kommt aus Gewicht und Laufweite, nicht mehr aus einem
   Schriftwechsel. Damit das traegt, muss der Abstand zum Fliesstext gross genug
   sein: der laeuft bei 400 bis 500, die Ueberschriften bei 700 bis 800. Ein
   Zwischenschritt bei 600 wuerde den Sprung wieder einebnen.
   Je groesser der Grad, desto enger die Laufweite: sonst faellt eine kraeftige
   Grotesk in grosser Groesse auseinander. */
h1, h2, h3, h4 {
  font-family: var(--display); margin: 0; line-height: 1.14;
  font-weight: 800; letter-spacing: -.032em;
}
h1 { font-size: 31px; }
h2 { font-size: 22.5px; letter-spacing: -.026em; }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -.016em; }
h4 { font-size: 15px; font-weight: 700; letter-spacing: -.012em; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: 2px; }

.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 */

/* Das Blatt: EINE Flaeche, auf der Daten liegen. Innen wird durch Haarlinien
   getrennt, nicht durch weitere Karten. */
.karte, .blatt {
  background: var(--flaeche);
  border-radius: var(--rad);
  box-shadow: var(--schatten-hebung);
}
.karte > * + *, .blatt > * + * { border-top: 1px solid var(--linie-zart); }

/* Glas. Nur Kopfzeile, untere Leiste, Dialog. */
.glas {
  background: var(--glas-fuellung);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-kante), var(--glas-wurf);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: var(--glas-deckend); }
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 42px; padding: 0 var(--r5);
  border: 1px solid var(--linie-stark); border-radius: var(--rad-s);
  background: var(--flaeche); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background .14s, border-color .14s, transform .06s;
}
.knopf:hover { background: var(--flaeche-hover); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf-haupt {
  background: var(--blau-knopf); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(12,27,42,.18);
}
.knopf-haupt:hover { filter: brightness(1.06); }
.knopf-gross { min-height: 54px; 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: 42px; padding: 9px var(--r4);
  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: 54px; font-size: 17px; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-leise); margin-bottom: var(--r1); letter-spacing: .02em; }

.abzeichen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; 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: dicht genug fuer viele Zeilen, getrennt durch Haarlinien */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th {
  position: sticky; top: 0; z-index: 2;
  background: var(--flaeche-sanft); color: var(--text-leise);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  text-align: left; padding: var(--r2) var(--r4);
  border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: 0 var(--r4); 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); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}