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

  /* Block 10: heller, leicht warmer Grund, Karten klar abgehoben, Text mit
     viel Kontrast. Jede Farbe gibt es in beiden Themen (Test prueft das). */
  --text:         #121110;
  --text-weich:   #36322D;
  --text-leise:   #5E5850;
  --text-auf-farbe: #FFFFFF;

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

  --grund:        #F8F5F0;
  --grund-verlauf:
      radial-gradient(1100px 620px at 6% -14%, rgba(232, 99, 26, .10) 0%, transparent 62%),
      radial-gradient(900px 600px at 104% 4%, rgba(50, 121, 181, .07) 0%, transparent 60%),
      radial-gradient(1000px 700px at 50% 118%, rgba(46, 154, 99, .05) 0%, transparent 60%),
      linear-gradient(180deg, #FBF9F5 0%, #F4F0E9 100%);
  /* Sehr leises Punktraster fuer Tiefe, nur CSS, keine Datei. */
  --grund-muster: radial-gradient(rgba(60, 40, 20, .05) 1px, transparent 1.4px);
  --flaeche:      #FFFFFF;
  --flaeche-sanft:#FBF9F6;
  --flaeche-versenkt: #F1ECE4;
  --flaeche-hover: rgba(60, 40, 20, .045);
  --flaeche-aktiv: #FCEADD;

  --linie:        rgba(40, 30, 20, .11);
  --linie-zart:   rgba(40, 30, 20, .07);
  --linie-stark:  rgba(40, 30, 20, .20);
  --linie-karte:  rgba(40, 30, 20, .09);

  --glas-fuellung: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.70) 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:  #FCFAF7;

  /* Seitenleiste: Schwarz der Marke, in beiden Modi */
  --leiste-verlauf:   linear-gradient(180deg, #1B1A19 0%, #111010 100%);
  --leiste-text:      #E2DED8;
  --leiste-leise:     #9B958D;
  --leiste-aktiv-bg:  rgba(255, 255, 255, .09);
  --leiste-aktiv-kante: var(--ov-orange);
  --leiste-hover:     rgba(255, 255, 255, .055);
  --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:  #2E2B27;
  --knopf-haupt-text:   #FFFFFF;

  --schleier:      rgba(20, 16, 12, .40);

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

  --schatten-karte:   0 1px 2px rgba(60, 40, 20, .06);
  --schatten-hebung:  0 1px 2px rgba(60, 40, 20, .06), 0 10px 26px -14px rgba(60, 40, 20, .24);
  --schatten-schwebe: 0 2px 6px -2px rgba(20,20,20,.12), 0 20px 44px -22px rgba(20,20,20,.38);
  --schatten-zug:     0 18px 40px -12px rgba(20, 20, 20, .35), 0 2px 6px rgba(20, 20, 20, .12);

  --erfolg-bg:  #E0F2E7;  --erfolg-text:  #17633D;  --erfolg:  #2E9A63;
  --warnung-bg: #FBEFD3;  --warnung-text: #7A4D00;  --warnung: #C98A00;
  --fehler-bg:  #FBE4E0;  --fehler-text:  #9A271D;  --fehler:  #C9372C;
  --info-bg:    #E2EDF8;  --info-text:    #1B5480;  --info:    #3279B5;
  --neutral-bg: #EFEAE3;  --neutral-text: #57524B;  --neutral: #8A847C;
  --laeuft-bg:  #FDEBDF;  --laeuft-text:  #93390A;  --laeuft:  #E8631A;

  /* Phasen mit eigener Farbe: Leiste an Karten, Spaltenkoepfe, Kacheln */
  --phase-neu: #8A847C;            --phase-neu-hauch: #F1EDE7;
  --phase-onboarding: #3279B5;     --phase-onboarding-hauch: #E7F0F9;
  --phase-produktion: #E8631A;     --phase-produktion-hauch: #FDEEE3;
  --phase-freigabe: #C98A00;       --phase-freigabe-hauch: #FBF1D9;
  --phase-live: #2E9A63;           --phase-live-hauch: #E3F3EA;
  --phase-abgeschlossen: #A39D95;  --phase-abgeschlossen-hauch: #F0EDE9;
  --phase-on_hold: #8E6BB8;        --phase-on_hold-hauch: #F1EBF8;
  --phase-on_hold-text: #5E3F86;

  --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:         #F4F1EC;
    --text-weich:   #D4CFC7;
    --text-leise:   #A8A198;
    --text-auf-farbe: #141414;

    --akzent:        var(--ov-orange);
    --akzent-text:   #F7A16B;
    --akzent-hell:   rgba(232, 99, 26, .16);
    --akzent-schleier: rgba(232, 99, 26, .16);

    --grund:        #0F0E0E;
    --grund-verlauf:
        radial-gradient(1100px 620px at 6% -14%, rgba(232, 99, 26, .14) 0%, transparent 62%),
        radial-gradient(900px 600px at 104% 4%, rgba(93, 162, 224, .08) 0%, transparent 60%),
        linear-gradient(180deg, #141312 0%, #0B0B0B 100%);
    --grund-muster: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.2px);
    --flaeche:      #1C1B1A;
    --flaeche-sanft:#191817;
    --flaeche-versenkt: #141312;
    --flaeche-hover: rgba(255, 255, 255, .05);
    --flaeche-aktiv: rgba(232, 99, 26, .16);

    --linie:        rgba(255, 255, 255, .11);
    --linie-zart:   rgba(255, 255, 255, .065);
    --linie-stark:  rgba(255, 255, 255, .19);
    --linie-karte:  rgba(255, 255, 255, .09);

    --glas-fuellung: linear-gradient(180deg, rgba(36,35,34,.82) 0%, rgba(24,23,22,.70) 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:  #1E1D1C;

    --leiste-verlauf:   linear-gradient(180deg, #0D0C0C 0%, #070707 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, .7);
    --schatten-schwebe: 0 2px 6px -2px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.75);
    --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,.16);  --erfolg-text:  #86DDAE;  --erfolg:  #54C98B;
    --warnung-bg: rgba(240,190,90,.16);  --warnung-text: #F2C76E;  --warnung: #E0AC45;
    --fehler-bg:  rgba(255,130,120,.16); --fehler-text:  #FFA39A;  --fehler:  #F2665B;
    --info-bg:    rgba(110,170,230,.16); --info-text:    #9BC8F2;  --info:    #5DA2E0;
    --neutral-bg: rgba(255,255,255,.08); --neutral-text: #C4BEB6;  --neutral: #8A847C;
    --laeuft-bg:  rgba(232,99,26,.19);   --laeuft-text:  #F9AE7E;  --laeuft:  #E8631A;

    --phase-neu: #A59F97;            --phase-neu-hauch: rgba(165,159,151,.12);
    --phase-onboarding: #5DA2E0;     --phase-onboarding-hauch: rgba(93,162,224,.13);
    --phase-produktion: #F07A36;     --phase-produktion-hauch: rgba(240,122,54,.14);
    --phase-freigabe: #E0AC45;       --phase-freigabe-hauch: rgba(224,172,69,.13);
    --phase-live: #54C98B;           --phase-live-hauch: rgba(84,201,139,.13);
    --phase-abgeschlossen: #7E786F;  --phase-abgeschlossen-hauch: rgba(126,120,111,.12);
    --phase-on_hold: #B394DC;        --phase-on_hold-hauch: rgba(179,148,220,.14);
    --phase-on_hold-text: #CDB5EC;
  }
}

:root[data-theme="dunkel"] {
  --text:         #F4F1EC;
  --text-weich:   #D4CFC7;
  --text-leise:   #A8A198;
  --text-auf-farbe: #141414;

  --akzent:        var(--ov-orange);
  --akzent-text:   #F7A16B;
  --akzent-hell:   rgba(232, 99, 26, .16);
  --akzent-schleier: rgba(232, 99, 26, .16);

  --grund:        #0F0E0E;
  --grund-verlauf:
      radial-gradient(1100px 620px at 6% -14%, rgba(232, 99, 26, .14) 0%, transparent 62%),
      radial-gradient(900px 600px at 104% 4%, rgba(93, 162, 224, .08) 0%, transparent 60%),
      linear-gradient(180deg, #141312 0%, #0B0B0B 100%);
  --grund-muster: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.2px);
  --flaeche:      #1C1B1A;
  --flaeche-sanft:#191817;
  --flaeche-versenkt: #141312;
  --flaeche-hover: rgba(255, 255, 255, .05);
  --flaeche-aktiv: rgba(232, 99, 26, .16);

  --linie:        rgba(255, 255, 255, .11);
  --linie-zart:   rgba(255, 255, 255, .065);
  --linie-stark:  rgba(255, 255, 255, .19);
  --linie-karte:  rgba(255, 255, 255, .09);

  --glas-fuellung: linear-gradient(180deg, rgba(36,35,34,.82) 0%, rgba(24,23,22,.70) 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:  #1E1D1C;

  --leiste-verlauf:   linear-gradient(180deg, #0D0C0C 0%, #070707 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, .7);
  --schatten-schwebe: 0 2px 6px -2px rgba(0,0,0,.5), 0 20px 44px -22px rgba(0,0,0,.75);
  --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,.16);  --erfolg-text:  #86DDAE;  --erfolg:  #54C98B;
  --warnung-bg: rgba(240,190,90,.16);  --warnung-text: #F2C76E;  --warnung: #E0AC45;
  --fehler-bg:  rgba(255,130,120,.16); --fehler-text:  #FFA39A;  --fehler:  #F2665B;
  --info-bg:    rgba(110,170,230,.16); --info-text:    #9BC8F2;  --info:    #5DA2E0;
  --neutral-bg: rgba(255,255,255,.08); --neutral-text: #C4BEB6;  --neutral: #8A847C;
  --laeuft-bg:  rgba(232,99,26,.19);   --laeuft-text:  #F9AE7E;  --laeuft:  #E8631A;

  --phase-neu: #A59F97;            --phase-neu-hauch: rgba(165,159,151,.12);
  --phase-onboarding: #5DA2E0;     --phase-onboarding-hauch: rgba(93,162,224,.13);
  --phase-produktion: #F07A36;     --phase-produktion-hauch: rgba(240,122,54,.14);
  --phase-freigabe: #E0AC45;       --phase-freigabe-hauch: rgba(224,172,69,.13);
  --phase-live: #54C98B;           --phase-live-hauch: rgba(84,201,139,.13);
  --phase-abgeschlossen: #7E786F;  --phase-abgeschlossen-hauch: rgba(126,120,111,.12);
  --phase-on_hold: #B394DC;        --phase-on_hold-hauch: rgba(179,148,220,.14);
  --phase-on_hold-text: #CDB5EC;
}
: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-color: 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;
}

/* Leises Punktraster ueber dem Verlauf, als eigene Ebene, damit die
   Kachelgroesse nur fuer das Raster gilt. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grund-muster); background-size: 22px 22px;
}

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), 0 0 0 1px var(--linie-karte);
}

.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; }
}