/* Gestaltungswerte an einer Stelle.
 *
 * Rahmen und Regeln aus Parlier, Farben der BEG: Schwarz, Weiss, Orange.
 * Orange ist Akzent, keine Flaeche. Es markiert, wo man ist (Navigation),
 * was Aufmerksamkeit braucht (Warnung im Kanban) und wo der Fokus steht.
 *
 * Drei Regeln aus Parlier, an denen das Design haengt:
 * 1. Glas nur fuer schwebende Ebenen: Kopfzeile, Dialog, Meldungen.
 * 2. Jede Glasflaeche hat eine helle Oberkante und eine dunklere Unterkante.
 * 3. Daten liegen auf EINER Flaeche und werden durch Haarlinien getrennt.
 *
 * Hell/Dunkel folgt dem System. data-theme="hell" oder "dunkel" am
 * html-Element ueberstimmt es (Umschalter im Personenmenue).
 */

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

:root {
  color-scheme: light dark;

  /* Die drei Markenfarben, unveraendert */
  --ov-schwarz: #141414;
  --ov-weiss:   #FFFFFF;
  --ov-orange:  #E8631A;

  --text:         #141414;
  --text-weich:   #3D3A36;
  --text-leise:   #6B665F;
  --text-auf-farbe: #FFFFFF;

  /* Orange als Text braucht auf Weiss mehr Tiefe, sonst fehlt der Kontrast. */
  --akzent:        var(--ov-orange);
  --akzent-text:   #B3470B;
  --akzent-hell:   #FDEEE4;
  --akzent-schleier: rgba(232, 99, 26, .10);

  --grund:        #F6F5F2;
  --grund-verlauf:
      radial-gradient(1000px 560px at 8% -12%, rgba(232, 99, 26, .07) 0%, transparent 60%),
      radial-gradient(900px 520px at 100% 0%, rgba(20, 20, 20, .035) 0%, transparent 58%),
      linear-gradient(180deg, #F7F6F3 0%, #F2F0EC 100%);
  --flaeche:      #FFFFFF;
  --flaeche-sanft:#FAF9F7;
  --flaeche-versenkt: #F0EEEA;
  --flaeche-hover: rgba(20, 20, 20, .035);
  --flaeche-aktiv: #FBEDE4;

  --linie:        rgba(20, 20, 20, .10);
  --linie-zart:   rgba(20, 20, 20, .06);
  --linie-stark:  rgba(20, 20, 20, .17);

  --glas-fuellung: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.62) 100%);
  --glas-filter:   saturate(170%) blur(20px);
  --glas-kante:    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,20,20,.06);
  --glas-wurf:     0 2px 6px -2px rgba(20,20,20,.12), 0 20px 44px -22px rgba(20,20,20,.38);
  --glas-deckend:  #FBFAF8;

  /* Seitenleiste: Schwarz der Marke, in beiden Modi */
  --leiste-verlauf:   linear-gradient(180deg, #1A1A1A 0%, #101010 100%);
  --leiste-text:      #DAD6D0;
  --leiste-leise:     #8E8981;
  --leiste-aktiv-bg:  rgba(255, 255, 255, .08);
  --leiste-aktiv-kante: var(--ov-orange);
  --leiste-hover:     rgba(255, 255, 255, .05);
  --leiste-linie:     rgba(255, 255, 255, .08);

  /* Hauptknopf: im Hellen schwarz, im Dunklen orange. Weiss auf Orange
     erreicht nur 3,4 zu 1, Schwarz auf Orange 5,5 zu 1. */
  --knopf-haupt-bg:     #141414;
  --knopf-haupt-hover:  #2A2825;
  --knopf-haupt-text:   #FFFFFF;

  --schleier:      rgba(10, 10, 10, .42);

  --fokus-ring: 0 0 0 3px rgba(232, 99, 26, .30);
  --fokus-kante: #C4540F;

  --schatten-karte:   0 1px 2px rgba(20, 20, 20, .05);
  --schatten-hebung:  0 1px 2px rgba(20, 20, 20, .05), 0 12px 28px -14px rgba(20, 20, 20, .20);
  --schatten-schwebe: var(--glas-wurf);
  --schatten-zug:     0 18px 40px -12px rgba(20, 20, 20, .35), 0 2px 6px rgba(20, 20, 20, .12);

  --erfolg-bg:  #E2F2E9;  --erfolg-text:  #1B6B43;  --erfolg:  #2E9A63;
  --warnung-bg: #FBEFD6;  --warnung-text: #855400;  --warnung: #C98A00;
  --fehler-bg:  #FBE6E3;  --fehler-text:  #A02A20;  --fehler:  #C9372C;
  --info-bg:    #E4EEF7;  --info-text:    #1E5A85;  --info:    #3279B5;
  --neutral-bg: #EFEDE9;  --neutral-text: #5E5952;  --neutral: #8A847C;
  --laeuft-bg:  #FDEDE3;  --laeuft-text:  #9C3F0A;  --laeuft:  #E8631A;

  --schrift: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

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

  --rad-s: 10px; --rad: 16px; --rad-l: 22px;

  --leiste-breite: 244px;
  --kopf-hoehe: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --text:         #F2F0ED;
    --text-weich:   #CFCAC3;
    --text-leise:   #A09A92;
    --text-auf-farbe: #141414;

    --akzent-text:   #F59A63;
    --akzent-hell:   rgba(232, 99, 26, .16);
    --akzent-schleier: rgba(232, 99, 26, .14);

    --grund:        #0E0E0E;
    --grund-verlauf:
        radial-gradient(1000px 560px at 8% -12%, rgba(232, 99, 26, .10) 0%, transparent 60%),
        linear-gradient(180deg, #111111 0%, #0B0B0B 100%);
    --flaeche:      #1A1A1A;
    --flaeche-sanft:#161616;
    --flaeche-versenkt: #121212;
    --flaeche-hover: rgba(255, 255, 255, .045);
    --flaeche-aktiv: rgba(232, 99, 26, .14);

    --linie:        rgba(255, 255, 255, .10);
    --linie-zart:   rgba(255, 255, 255, .06);
    --linie-stark:  rgba(255, 255, 255, .17);

    --glas-fuellung: linear-gradient(180deg, rgba(34,34,34,.80) 0%, rgba(24,24,24,.66) 100%);
    --glas-filter:   saturate(150%) blur(20px);
    --glas-kante:    inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.35);
    --glas-wurf:     0 2px 6px -2px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.75);
    --glas-deckend:  #1C1C1C;

    --leiste-verlauf:   linear-gradient(180deg, #0B0B0B 0%, #060606 100%);
    --leiste-linie:     rgba(255, 255, 255, .07);

    --knopf-haupt-bg:     #E8631A;
    --knopf-haupt-hover:  #F07430;
    --knopf-haupt-text:   #141414;

    --schleier:      rgba(0, 0, 0, .62);
    --fokus-ring: 0 0 0 3px rgba(232, 99, 26, .40);
    --fokus-kante: #F59A63;

    --schatten-karte:   0 1px 2px rgba(0, 0, 0, .45);
    --schatten-hebung:  0 1px 2px rgba(0, 0, 0, .45), 0 12px 28px -14px rgba(0, 0, 0, .6);
    --schatten-zug:     0 18px 40px -12px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .5);

    --erfolg-bg:  rgba(84,201,139,.15);  --erfolg-text:  #7ED9A8;  --erfolg:  #54C98B;
    --warnung-bg: rgba(240,190,90,.15);  --warnung-text: #F0C265;  --warnung: #E0AC45;
    --fehler-bg:  rgba(255,130,120,.15); --fehler-text:  #FF9C93;  --fehler:  #F2665B;
    --info-bg:    rgba(110,170,230,.15); --info-text:    #93C3F0;  --info:    #5DA2E0;
    --neutral-bg: rgba(255,255,255,.08); --neutral-text: #BDB7AF;  --neutral: #8A847C;
    --laeuft-bg:  rgba(232,99,26,.18);   --laeuft-text:  #F8A673;  --laeuft:  #E8631A;
  }
}

:root[data-theme="dunkel"] {
  --text:         #F2F0ED;
  --text-weich:   #CFCAC3;
  --text-leise:   #A09A92;
  --text-auf-farbe: #141414;

  --akzent-text:   #F59A63;
  --akzent-hell:   rgba(232, 99, 26, .16);
  --akzent-schleier: rgba(232, 99, 26, .14);

  --grund:        #0E0E0E;
  --grund-verlauf:
      radial-gradient(1000px 560px at 8% -12%, rgba(232, 99, 26, .10) 0%, transparent 60%),
      linear-gradient(180deg, #111111 0%, #0B0B0B 100%);
  --flaeche:      #1A1A1A;
  --flaeche-sanft:#161616;
  --flaeche-versenkt: #121212;
  --flaeche-hover: rgba(255, 255, 255, .045);
  --flaeche-aktiv: rgba(232, 99, 26, .14);

  --linie:        rgba(255, 255, 255, .10);
  --linie-zart:   rgba(255, 255, 255, .06);
  --linie-stark:  rgba(255, 255, 255, .17);

  --glas-fuellung: linear-gradient(180deg, rgba(34,34,34,.80) 0%, rgba(24,24,24,.66) 100%);
  --glas-filter:   saturate(150%) blur(20px);
  --glas-kante:    inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.35);
  --glas-wurf:     0 2px 6px -2px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.75);
  --glas-deckend:  #1C1C1C;

  --leiste-verlauf:   linear-gradient(180deg, #0B0B0B 0%, #060606 100%);
  --leiste-linie:     rgba(255, 255, 255, .07);

  --knopf-haupt-bg:     #E8631A;
  --knopf-haupt-hover:  #F07430;
  --knopf-haupt-text:   #141414;

  --schleier:      rgba(0, 0, 0, .62);
  --fokus-ring: 0 0 0 3px rgba(232, 99, 26, .40);
  --fokus-kante: #F59A63;

  --schatten-karte:   0 1px 2px rgba(0, 0, 0, .45);
  --schatten-hebung:  0 1px 2px rgba(0, 0, 0, .45), 0 12px 28px -14px rgba(0, 0, 0, .6);
  --schatten-zug:     0 18px 40px -12px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .5);

  --erfolg-bg:  rgba(84,201,139,.15);  --erfolg-text:  #7ED9A8;  --erfolg:  #54C98B;
  --warnung-bg: rgba(240,190,90,.15);  --warnung-text: #F0C265;  --warnung: #E0AC45;
  --fehler-bg:  rgba(255,130,120,.15); --fehler-text:  #FF9C93;  --fehler:  #F2665B;
  --info-bg:    rgba(110,170,230,.15); --info-text:    #93C3F0;  --info:    #5DA2E0;
  --neutral-bg: rgba(255,255,255,.08); --neutral-text: #BDB7AF;  --neutral: #8A847C;
  --laeuft-bg:  rgba(232,99,26,.18);   --laeuft-text:  #F8A673;  --laeuft:  #E8631A;
}
:root[data-theme="hell"] { color-scheme: light; }
:root[data-theme="dunkel"] { color-scheme: dark; }

/* ------------------------------------------------------------- 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: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0; line-height: 1.15;
  font-weight: 700; letter-spacing: -.025em;
}
h1 { font-size: 30px; }
h2 { font-size: 23px; letter-spacing: -.022em; }
h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.012em; }
h4 { font-size: 14.5px; font-weight: 650; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--akzent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fokus-kante); outline-offset: 2px; }

.leise { color: var(--text-leise); }
.weich { color: var(--text-weich); }
.klein { font-size: 13px; }
.zahl { font-variant-numeric: tabular-nums; }
.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, .blatt {
  background: var(--flaeche);
  border-radius: var(--rad);
  box-shadow: var(--schatten-hebung);
}

.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: 40px; 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: 600; font-size: 14.5px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .14s, border-color .14s, transform .06s, filter .14s;
}
.knopf:hover { background: var(--flaeche-hover); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); border-color: var(--fokus-kante); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf-haupt {
  background: var(--knopf-haupt-bg); border-color: transparent; color: var(--knopf-haupt-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(20,20,20,.18);
}
.knopf-haupt:hover { background: var(--knopf-haupt-hover); }
.knopf-gefahr { background: var(--fehler); border-color: transparent; color: #fff; }
.knopf-gefahr:hover { background: var(--fehler); filter: brightness(1.08); }
.knopf-gross { min-height: 50px; font-size: 16px; border-radius: var(--rad-s); }
.knopf-still { border-color: transparent; background: transparent; color: var(--text-weich); }
.knopf-still:hover { background: var(--flaeche-hover); }
.knopf-klein { min-height: 32px; padding: 0 var(--r3); font-size: 13px; }

.feld {
  width: 100%; min-height: 42px; padding: 9px 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(--fokus-kante); box-shadow: var(--fokus-ring); }
.feld-gross { min-height: 50px; font-size: 16px; }
textarea.feld { min-height: 96px; resize: vertical; line-height: 1.5; }
select.feld { cursor: pointer; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-leise); margin-bottom: var(--r1); letter-spacing: .01em; }

.abzeichen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.6;
  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); }

.leer { display: grid; place-items: center; gap: var(--r2); padding: var(--r7) var(--r5); text-align: center; color: var(--text-leise); }
.leer h3 { color: var(--text); }
.leer p { max-width: 44ch; }

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