/* ===========================================================================
   tokens.css — die EINZIGE Datei, die je Projekt angefasst wird.
   Teil des Haus-Bausatzes. Wird als ERSTE geladen.

   Regel: Hier aendern sich NUR Farben und Schriften.
   Abstaende, Radien, Dauern und Schatten bleiben in jedem Projekt identisch —
   genau das macht aus mehreren Apps eine Handschrift.
   Grundlage: design-quality 6d (Schatten/Bewegung) und 6e (OpenAI-Referenz).

   Woher die Farben kommen: aus der Live-Website oder dem Brand-Kit des Kunden,
   gemessen — nicht geschaetzt. Bei eigenen Marken aus 08-Brands/{Marke}/brand.md.
   =========================================================================== */
:root{

  /* ---- NICHT ANFASSEN: Leiter fuer Abstand, Schrift, Radius, Zeit ---- */
  --abstand-1:4px;  --abstand-2:8px;  --abstand-3:12px;
  --abstand-4:16px; --abstand-5:24px; --abstand-6:32px;

  --schrift-1:12px; --schrift-2:14px; --schrift-3:16px;
  --schrift-4:20px; --schrift-5:24px;

  /* Radienleiter, genau drei Werte (6e/2). Nichts dazwischen erfinden. */
  --radius-karte:12px; --radius-knopf:8px; --radius-pill:999px;

  --dauer-1:100ms; --dauer-2:200ms; --dauer-3:300ms;
  --kurve:cubic-bezier(.2,.8,.2,1);

  --leiste-breite:250px;

  /* ---- HIER TAUSCHEN: Markenfarben ----------------------------------
     --marke        Handlungsfarbe (Knoepfe, Aktiv-Markierung, Links)
     --marke-dunkel Textfassung der Markenfarbe. MUSS auf Weiss 4.5:1 haben —
                    nachmessen, nicht annehmen. Viele CI-Farben (Gelb, Gold,
                    Hellgruen) sind als Textfarbe unlesbar und brauchen eine
                    eigene dunklere Variante.
     --marke-bg     sehr helle Tuenchung derselben Farbe fuer Flaechen
     --leiste       Flaeche der linken Navigation (meist die dunkle CI-Farbe) */
  --marke:#c41a1b;
  --marke-dunkel:#a31516;
  --marke-hell:#e98181;
  --marke-bg:#fff0f0;
  --leiste:#181818;
  --leiste-text:#fff;
  --leiste-mute:#b8b8b8;

  /* Primaerknopf. Eigene Token, damit eine Marke ihn einfaerben kann, OHNE dass
     dafuer app.css angefasst wird (Regel: nur tokens.css wird je Projekt geaendert).
     Vorgabe ist das bisherige Verhalten — fuer laufende Apps aendert sich nichts.
     Wer hier eine Markenfarbe einsetzt: Kontrast des Textes auf der Flaeche
     nachrechnen, 4,5:1 ist die Untergrenze. Und die Hausregel "genau ein
     Primaerknopf je Ansicht" wird damit wichtiger, nicht unwichtiger — eine
     Signalfarbe, die zweimal auf dem Schirm steht, ist keine mehr. */
  --knopf-primaer:var(--marke);
  --knopf-primaer-hover:var(--marke-dunkel);
  --knopf-primaer-text:#fff;

  /* Aktiv-Markierung und Fokus IN der Seitenleiste. Eigene Token, weil sie sich
     gegen --leiste behaupten muessen und nicht gegen die helle Flaeche.
     Vorgabe ist das bisherige Verhalten.
     ACHTUNG, wenn eine Marke ihre Leiste in der Markenfarbe einfaerbt: Dann ist
     --leiste gleich --marke, und eine Tuenchung VON --marke ist auf dieser
     Flaeche unsichtbar — Aktiv-Markierung und Fokusrahmen verschwinden lautlos.
     In dem Fall hier auf einen hellen Ton umstellen. */
  --leiste-aktiv:color-mix(in srgb,var(--marke) 18%,transparent);
  --leiste-aktiv-linie:var(--marke-hell);
  --leiste-fokus:var(--marke);

  /* ---- Neutrale Flaechen. Nie reines Schwarz/Weiss — immer einen Hauch
         Richtung Markenfarbe tuenchen (design-quality 3). ---- */
  --tinte:#181818;   --text:#272727;      --text-2:#56585e;  --text-3:#6f7176;
  --linie:#e6e6e6;   --linie-2:#f0efec;
  --flaeche:#f3f3f3; --karte:#fff;

  /* ---- Signalfarben. EINE Logik, ueberall gleich:
         gruen = erledigt · gelb = wartet · rot = Gefahr · blau = Hinweis.
         Wird Farbe fuer anderes benutzt, verliert sie ihre Signalwirkung. ---- */
  --gruen:#1a7f3c; --gruen-bg:#eef7f0; --gruen-linie:#cfe6d5;
  --gelb:#a86a12;  --gelb-bg:#fbf7e8;  --gelb-linie:#e8d9a8;
  --rot:#c0392b;   --rot-bg:#fdeeec;   --rot-linie:#f2cec9;
  --blau:#305bab;  --blau-bg:#eaf0fb;

  /* ---- Schatten: EINE Lichtquelle, drei Stufen, mehrschichtig (6d).
         --schatten-h ist der Farbton des Schattens. Auf farbigem Grund den
         Hintergrundton uebernehmen, auf neutralem Grund neutral lassen. ---- */
  --schatten-h:220 20% 15%;
  --schatten-1:0 1px 1px hsl(var(--schatten-h)/.04),0 2px 2px hsl(var(--schatten-h)/.04),0 4px 4px hsl(var(--schatten-h)/.04);
  --schatten-2:0 2px 2px hsl(var(--schatten-h)/.05),0 4px 4px hsl(var(--schatten-h)/.05),0 8px 8px hsl(var(--schatten-h)/.05),0 16px 16px hsl(var(--schatten-h)/.04);
  --schatten-3:0 4px 4px hsl(var(--schatten-h)/.06),0 8px 8px hsl(var(--schatten-h)/.06),0 16px 16px hsl(var(--schatten-h)/.06),0 32px 32px hsl(var(--schatten-h)/.05),0 48px 48px hsl(var(--schatten-h)/.04);

  /* ---- HIER TAUSCHEN: Schriften ---------------------------------------
     Selbst hosten (2x woff2 reicht: Normal + Fett), nie per CDN — laeuft damit
     auf Shared Hosting, hinter jeder CSP und offline.
     Inter und DM Sans sind als unbegruendeter Vorgabewert verboten
     (design-quality 3): Schriftwahl braucht einen Satz Begruendung. */
  --font:"Kumbh Sans",Arial,sans-serif;
  --font-marke:"Newsreader",Georgia,serif;
}

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