/* ==========================================================================
   tokens.css — EINZIGE Stelle fuer #hex, px, ms (Fundament design, S3/T3.1)
   Alle Werte als --ds-* . Zwei Varianten derselben Tokens:
     Design A = sachlich, Teal – AKTIV (Owner-Wahl 07.10.: "bei allem A")
     Design B = weich, luftig (Radien 6/12/16/24, Schrift 15, weichere Schatten) – aufgehoben
   EINE Einstellung fuer alle Seiten, die diese Datei laden (Panel, Hub, games, Dienste):
   die Zeile "@layer ds-b, ds-a;" – die zuletzt genannte Variante gilt. B: "@layer ds-a, ds-b;".
   B ueberschreibt nur vorhandene A-Tokens, nie neue Variablen. Werte ausserhalb der Ebenen
   (Bewegung, Umbruchpunkte) gelten fuer beide Varianten.
   Dunkel = Standard, Hell ueber [data-theme="hell"]. Fehlt ein Wert: "TOKEN FEHLT"-Kommentar.
   ========================================================================== */

@layer ds-b, ds-a;   /* EINSTELLUNG Design-Variante: zuletzt genannt = aktiv */

/* ---------- Design A (aktiv) ---------- */
@layer ds-a {

:root {
  /* ---------- Farben: hell (Grundeinstellung) ---------- */
  --ds-farbe-grund:            #f7f8fa;   /* Seitenhintergrund */
  --ds-farbe-flaeche:          #ffffff;   /* Karten, Paneele, Eingabe */
  --ds-farbe-flaeche-2:        #f0f2f5;   /* Hover, leichte Füllung */
  --ds-farbe-flaeche-3:        #e4e8ee;   /* gedrückt, ausgewählt */
  --ds-farbe-leiste:           #ffffff;   /* Kopf-, Status-, Icon-Leisten */
  --ds-farbe-rahmen:           #d9dee5;   /* normale Umrandung */
  --ds-farbe-rahmen-stark:     #b7c0cb;   /* betonte Umrandung */
  --ds-farbe-text:             #14181f;
  --ds-farbe-text-2:           #444d59;   /* Nebentext */
  --ds-farbe-text-3:           #5f6873;   /* leise, Platzhalter, Zeitstempel */
  --ds-farbe-text-invers:      #ffffff;

  --ds-farbe-akzent:           #0b7f78;   /* Teal (d01), hell abgedunkelt für Kontrast */
  --ds-farbe-akzent-hover:     #09675f;
  --ds-farbe-akzent-text:      #ffffff;   /* Text auf Akzent-Füllung */
  --ds-farbe-akzent-hauch:     #dff3f1;   /* getönter Hintergrund */
  --ds-farbe-akzent-rahmen:    #8fd3cd;

  --ds-farbe-nutzer-grund:     #e9f6f5;   /* Nachricht vom Nutzer */
  --ds-farbe-nutzer-rahmen:    #8fd3cd;
  --ds-farbe-ki-grund:         #ffffff;   /* Antwort der KI */
  --ds-farbe-ki-rahmen:        #d9dee5;

  /* Status (Owner-Regel: in Arbeit orange · fertig grün · Fehler rot · wartend grau) */
  --ds-farbe-gut:              #1a7f37;
  --ds-farbe-gut-hauch:        #ddf4e4;
  --ds-farbe-arbeit:           #bc4c00;
  --ds-farbe-arbeit-hauch:     #fff1e5;
  --ds-farbe-fehler:           #cf222e;
  --ds-farbe-fehler-hauch:     #ffebe9;
  --ds-farbe-wartend:          #6e7781;
  --ds-farbe-wartend-hauch:    #eef1f4;
  --ds-farbe-aufnahme:         #d1242f;   /* roter Punkt beim Diktieren */

  /* Anbieter (Filter, Modell-Chips, Gruppen) */
  --ds-farbe-anbieter-claude:          #b45309;
  --ds-farbe-anbieter-claude-hauch:    #fdf0e1;
  --ds-farbe-anbieter-xai:             #1d4ed8;
  --ds-farbe-anbieter-xai-hauch:       #e5edfd;
  --ds-farbe-anbieter-openrouter:      #15803d;
  --ds-farbe-anbieter-openrouter-hauch:#e2f5e8;
  --ds-farbe-anbieter-text:            #ffffff;  /* Text auf gefülltem Anbieter-Chip */

  /* Pastell (Mobile „Consumer Soft“, Avatare, große Kacheln) */
  --ds-farbe-pastell-minze:    #d9f5ec;
  --ds-farbe-pastell-lavendel: #e7e3fb;
  --ds-farbe-pastell-pfirsich: #fde6d8;
  --ds-farbe-pastell-himmel:   #dcecfb;

  --ds-farbe-schleier:         rgba(17, 20, 26, 0.40);  /* hinter Dialogen/Sheets */

  /* Code (App-Editor, Codeblöcke in Antworten) */
  --ds-farbe-code-grund:          #f6f8fa;
  --ds-farbe-code-text:           #1f2328;
  --ds-farbe-code-schluesselwort: #cf222e;
  --ds-farbe-code-typ:            #0550ae;
  --ds-farbe-code-zeichenkette:   #0a3069;
  --ds-farbe-code-funktion:       #8250df;
  --ds-farbe-code-kommentar:      #6e7781;
  --ds-farbe-code-zeilennummer:   #8c959f;
  --ds-farbe-code-auswahl:        #dff3f1;

  /* Terminal (in beiden Modi dunkel) */
  --ds-farbe-terminal-grund:      #0d1117;
  --ds-farbe-terminal-text:       #e6edf3;
  --ds-farbe-terminal-leise:      #8b949e;
  --ds-farbe-terminal-erfolg:     #3fb950;
  --ds-farbe-terminal-fehler:     #ff7b72;

  /* Handy-Rahmen und Kamera-Attrappe (Mobile) */
  --ds-farbe-geraet-umgebung:  #e9ecf1;
  --ds-farbe-geraet-rahmen:    #15181d;
  --ds-farbe-kamera-grund:     #000000;
  --ds-farbe-kamera-text:      #ffffff;

  /* Verläufe (keine externen Bilder) */
  --ds-verlauf-orb:    radial-gradient(circle at 35% 30%, #b8f1eb 0%, #2ecfc4 45%, #6c7cf5 100%);
  --ds-verlauf-bild-a: linear-gradient(135deg, #9be7de 0%, #6c7cf5 100%);
  --ds-verlauf-bild-b: linear-gradient(135deg, #fde6d8 0%, #f59e0b 100%);

  /* Schatten */
  --ds-schatten-s:      0 1px 2px rgba(16, 24, 40, 0.06);
  --ds-schatten-m:      0 4px 12px rgba(16, 24, 40, 0.08);
  --ds-schatten-l:      0 12px 32px rgba(16, 24, 40, 0.14);
  --ds-schatten-popup:  0 8px 28px rgba(16, 24, 40, 0.14), 0 1px 3px rgba(16, 24, 40, 0.08);
  --ds-schatten-geraet: 0 30px 80px rgba(16, 24, 40, 0.25);

  /* ---------- Schrift ---------- */
  --ds-schrift-familie: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-schrift-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ds-schrift-2xs: 11px;
  --ds-schrift-xs:  12px;
  --ds-schrift-s:   13px;
  --ds-schrift-m:   14px;
  --ds-schrift-l:   16px;
  --ds-schrift-xl:  18px;
  --ds-schrift-2xl: 22px;
  --ds-schrift-3xl: 28px;
  --ds-schrift-4xl: 34px;

  --ds-gewicht-normal:   400;
  --ds-gewicht-mittel:   500;
  --ds-gewicht-halbfett: 600;
  --ds-gewicht-fett:     700;

  --ds-zeile-eng:    1.2;
  --ds-zeile-normal: 1.45;
  --ds-zeile-weit:   1.6;

  --ds-laufweite-normal:  0;
  --ds-laufweite-kapital: 0.08em;  /* für kleine Großbuchstaben-Überschriften */

  /* ---------- Abstände ---------- */
  --ds-abstand-0:  0;
  --ds-abstand-1:  2px;
  --ds-abstand-2:  4px;
  --ds-abstand-3:  6px;
  --ds-abstand-4:  8px;
  --ds-abstand-5:  12px;
  --ds-abstand-6:  16px;
  --ds-abstand-7:  20px;
  --ds-abstand-8:  24px;
  --ds-abstand-9:  32px;
  --ds-abstand-10: 40px;
  --ds-abstand-11: 48px;
  --ds-abstand-12: 64px;
  --ds-abstand-13: 96px;

  /* ---------- Radien ---------- */
  --ds-radius-s:     4px;
  --ds-radius-m:     8px;
  --ds-radius-l:     12px;
  --ds-radius-xl:    16px;
  --ds-radius-2xl:   24px;
  --ds-radius-voll:  999px;
  --ds-radius-geraet:       56px;
  --ds-radius-geraet-innen: 44px;

  /* ---------- Linien ---------- */
  --ds-linie-duenn:  1px;
  --ds-linie-mittel: 1.5px;
  --ds-linie-dick:   2px;

  /* ---------- Größen ---------- */
  --ds-groesse-icon-s:   16px;
  --ds-groesse-icon-m:   20px;
  --ds-groesse-icon-l:   24px;
  --ds-groesse-knopf-s:  28px;
  --ds-groesse-knopf-m:  36px;
  --ds-groesse-knopf-l:  44px;   /* Mindest-Tippfläche */
  --ds-groesse-knopf-xl: 56px;   /* große Knöpfe Mobile */
  --ds-groesse-avatar-s: 24px;
  --ds-groesse-avatar-m: 32px;
  --ds-groesse-avatar-l: 40px;
  --ds-groesse-orb:      168px;  /* Sprachgespräch */
  --ds-groesse-vorschaubild: 56px; /* Bild-Anhang als Kachel */

  --ds-breite-chat:                760px;  /* Nachrichten-Spalte und Eingabe, mittig */
  --ds-breite-anmeldung:           360px;
  --ds-breite-seitenleiste:        264px;
  --ds-breite-seitenleiste-schmal: 64px;   /* Icon-Leiste */
  --ds-breite-popup:               320px;
  --ds-breite-popup-l:             440px;
  --ds-breite-dialog:              520px;
  --ds-breite-explorer:            250px;  /* App, d01 */
  --ds-breite-app-chat:            320px;  /* App, rechte Chat-Spalte d01 */
  --ds-breite-werkzeug:            520px;  /* App, rechte Werkzeugfläche */
  --ds-breite-schublade-mobil:     80%;

  --ds-hoehe-kopf:          52px;
  --ds-hoehe-app-kopf:      46px;   /* d01 */
  --ds-hoehe-statusleiste:  24px;   /* d01 */
  --ds-hoehe-reiter:        36px;   /* Editor-Reiter */
  --ds-hoehe-eingabe-min:   44px;
  --ds-hoehe-eingabe-max:   200px;
  --ds-hoehe-unteres-panel: 220px;  /* App: Terminal/Vorschau unten */
  --ds-hoehe-tableiste:     64px;   /* Mobile */
  --ds-breite-spalte-schmal: 8ch;   /* Tabellenspalte: Status, Zahl */
  --ds-breite-spalte-mittel: 16ch;  /* Tabellenspalte: Name, Datum */
  --ds-breite-spalte-stand:  28ch;  /* Tabellenspalte: Beschreibung, Adresse */
  --ds-leiste-anzeige: none;        /* untere Leiste; schmal = flex */
  --ds-wurzel-unten: 0px;           /* Platz unter Inhalt; schmal = Tableiste */
  --ds-raster-spalten: repeat(auto-fit, minmax(var(--ds-breite-popup), 1fr));
  --ds-hoehe-sheet-halb:    50%;
  --ds-hoehe-sheet-voll:    92%;

  /* Handy-Rahmen: der Bildschirm selbst ist exakt 390 × 844 */
  --ds-geraet-breite:            390px;
  --ds-geraet-hoehe:             844px;
  --ds-geraet-rand:              12px;
  --ds-geraet-statusleiste:      47px;
  --ds-geraet-insel-breite:      120px;
  --ds-geraet-insel-hoehe:       34px;
  --ds-geraet-home-hoehe:        34px;
  --ds-geraet-home-balken-breite:134px;
  --ds-geraet-home-balken-hoehe: 5px;

  /* ---------- Ebenen ---------- */
  --ds-ebene-leiste:    10;
  --ds-ebene-schublade: 30;
  --ds-ebene-popup:     40;
  --ds-ebene-dialog:    50;
  --ds-ebene-meldung:   60;

  /* ---------- Deckkraft ---------- */
  --ds-deckkraft-aus:   0.45;  /* deaktivierte Knöpfe */
  --ds-deckkraft-leise: 0.7;

  /* ---------- Bewegung ---------- */
  --ds-dauer-schnell: 120ms;
  --ds-dauer-normal:  200ms;
  --ds-dauer-langsam: 320ms;
  --ds-dauer-puls:    1400ms;  /* Tipp-Punkte, Orb, Aufnahme */
  --ds-kurve-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-kurve-raus:     cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Fokus ---------- */
  --ds-fokus-ring: 0 0 0 2px var(--ds-farbe-grund), 0 0 0 4px var(--ds-farbe-akzent);
}


/* ---------- Farben: dunkel (d01-Teal) ---------- */
:root:not([data-theme="hell"]) {
    --ds-farbe-grund:            #0d1117;
    --ds-farbe-flaeche:          #161b22;
    --ds-farbe-flaeche-2:        #1c2230;
    --ds-farbe-flaeche-3:        #262d3a;
    --ds-farbe-leiste:           #010409;
    --ds-farbe-rahmen:           #30363d;
    --ds-farbe-rahmen-stark:     #484f58;
    --ds-farbe-text:             #e6edf3;
    --ds-farbe-text-2:           #b1bac4;
    --ds-farbe-text-3:           #8b949e;
    --ds-farbe-text-invers:      #0d1117;
    --ds-farbe-akzent:           #2ecfc4;
    --ds-farbe-akzent-hover:     #5bdad1;
    --ds-farbe-akzent-text:      #0d1117;
    --ds-farbe-akzent-hauch:     rgba(46, 207, 196, 0.16);
    --ds-farbe-akzent-rahmen:    #1f7f79;
    --ds-farbe-nutzer-grund:     rgba(46, 207, 196, 0.10);
    --ds-farbe-nutzer-rahmen:    #1f7f79;
    --ds-farbe-ki-grund:         #161b22;
    --ds-farbe-ki-rahmen:        #30363d;
    --ds-farbe-gut:              #3fb950;
    --ds-farbe-gut-hauch:        rgba(63, 185, 80, 0.15);
    --ds-farbe-arbeit:           #f0883e;
    --ds-farbe-arbeit-hauch:     rgba(240, 136, 62, 0.15);
    --ds-farbe-fehler:           #ff7b72;
    --ds-farbe-fehler-hauch:     rgba(255, 123, 114, 0.15);
    --ds-farbe-wartend:          #8b949e;
    --ds-farbe-wartend-hauch:    rgba(139, 148, 158, 0.15);
    --ds-farbe-aufnahme:         #ff6b6b;
    --ds-farbe-anbieter-claude:          #f59e0b;
    --ds-farbe-anbieter-claude-hauch:    rgba(245, 158, 11, 0.15);
    --ds-farbe-anbieter-xai:             #60a5fa;
    --ds-farbe-anbieter-xai-hauch:       rgba(96, 165, 250, 0.15);
    --ds-farbe-anbieter-openrouter:      #4ade80;
    --ds-farbe-anbieter-openrouter-hauch:rgba(74, 222, 128, 0.15);
    --ds-farbe-anbieter-text:            #0d1117;
    --ds-farbe-pastell-minze:    #173a31;
    --ds-farbe-pastell-lavendel: #2a2547;
    --ds-farbe-pastell-pfirsich: #3d2a1f;
    --ds-farbe-pastell-himmel:   #1c2f45;
    --ds-farbe-schleier:         rgba(1, 4, 9, 0.65);
    --ds-farbe-code-grund:          #0d1117;
    --ds-farbe-code-text:           #e6edf3;
    --ds-farbe-code-schluesselwort: #ff7b72;
    --ds-farbe-code-typ:            #79c0ff;
    --ds-farbe-code-zeichenkette:   #a5d6ff;
    --ds-farbe-code-funktion:       #d2a8ff;
    --ds-farbe-code-kommentar:      #8b949e;
    --ds-farbe-code-zeilennummer:   #484f58;
    --ds-farbe-code-auswahl:        rgba(46, 207, 196, 0.16);
    --ds-farbe-terminal-grund:      #010409;
    --ds-farbe-geraet-umgebung:  #05070a;
    --ds-farbe-geraet-rahmen:    #2a2f36;
    --ds-schatten-s:      0 1px 2px rgba(0, 0, 0, 0.40);
    --ds-schatten-m:      0 4px 12px rgba(0, 0, 0, 0.45);
    --ds-schatten-l:      0 12px 32px rgba(0, 0, 0, 0.55);
    --ds-schatten-popup:  0 8px 28px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.40);
    --ds-schatten-geraet: 0 30px 80px rgba(0, 0, 0, 0.60);
}


}  /* Ende @layer ds-a */

/* ---------- Design B (aufgehoben): weich, luftig – nur Abweichungen zu A ---------- */
@layer ds-b {
  :root {
    --ds-radius-s:     6px;
    --ds-radius-m:     12px;
    --ds-radius-l:     16px;
    --ds-radius-xl:    24px;
    --ds-schrift-m:    15px;
    --ds-linie-mittel: 1px;
  }
  :root[data-theme="hell"] {
    --ds-farbe-rahmen-stark: #c9d0d9;
    --ds-schatten-s: 0 2px 6px rgba(16, 24, 40, 0.06);
    --ds-schatten-m: 0 8px 24px rgba(16, 24, 40, 0.10);
    --ds-schatten-l: 0 16px 40px rgba(16, 24, 40, 0.16);
  }
  :root:not([data-theme="hell"]) {
    --ds-farbe-rahmen-stark: #3d444d;
    --ds-schatten-s: 0 2px 6px rgba(0, 0, 0, 0.45);
    --ds-schatten-m: 0 8px 24px rgba(0, 0, 0, 0.55);
    --ds-schatten-l: 0 16px 40px rgba(0, 0, 0, 0.65);
  }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-dauer-schnell: 0ms;
    --ds-dauer-normal:  0ms;
    --ds-dauer-langsam: 0ms;
    --ds-dauer-puls:    0ms;
  }
}

/* ---------- Umbruchpunkte: EINZIGE Stelle mit Pixelwert in @media (var() geht dort nicht).
   Schmal <= 720px (Handy), breit >= 1100px. Die Regeln in design.css lesen nur diese Variablen. ---------- */
@media (max-width:720px){
  :root{--ds-leiste-anzeige:flex;--ds-wurzel-unten:var(--ds-hoehe-tableiste);--ds-raster-spalten:1fr}
}
@media (min-width:1100px){
  :root{--ds-wurzel-breit:1}
}