/* ===========================================================================
   tokens.css — Schmelzer Backend. Geerbt aus 07-Skills/app-bausatz/.
   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 wie platform.openai.com (Bausatz 12.10.2026, Wolfgang „Ecken von OpenAI“):
     Karte/Navigation 10 · Knopf/Feld 8 · kleiner Knopf 6 · Badge 4 · Filter-Pille/Schalter/Avatar rund. */
  --radius-karte:10px; --radius-knopf:8px; --radius-klein:6px; --radius-marke:4px; --radius-pill:999px;

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

  --leiste-breite:260px; /* OpenAI-Maß, Bausatz 12.10.2026 */

  /* ---- 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) */
  /* Schmelzer Klima, gemessen aus Brand/BRAND-KIT_Schmelzer.md (Webflow-Export
     01.07.2026, :root verifiziert) -- nicht geschaetzt.
     Kontrast nachgerechnet, nicht angenommen:
       --marke        #002f87 auf Weiss = 11,9:1  (Text waere erlaubt)
       --marke-dunkel #001446 auf Weiss = 16,8:1
       weisser Text   auf --leiste #001446        = 16,8:1
     Damit haelt jede Kombination 4,5:1 mit grossem Abstand.
     Toshiba-Rot #e20514 steht bewusst NICHT hier: Es ist laut Brand-Kit der
     einzige Eyecatcher je Layout und in einer Arbeitsoberflaeche waere es
     entweder inflationaer oder es kollidiert mit --rot (Gefahr). */
  --marke:#002f87;
  --marke-dunkel:#001446;
  --marke-hell:#dbe7ff;
  --marke-bg:#eceeff;
  /* Die linke Leiste traegt das Blau der Top-Bar von schmelzerklima.at.
     GEMESSEN am 18.09.2026 im Browser: `.top-contact-section` hat
     background-color #002f87 — NICHT #001446, wie das Brand-Kit behauptet
     ("Primary Dark: Top-Bar"). Die Live-Seite schlaegt das Dokument.
     Kontrast: weisser Text auf #002f87 = 11,9:1, --leiste-mute = 4,8:1. */
  --leiste:#002f87;
  --leiste-text:#fff;
  --leiste-mute:#aebede;

  /* Weil --leiste jetzt dieselbe Farbe wie --marke ist, kann die Aktiv-
     Markierung nicht mehr aus der Markenfarbe kommen — sie waere unsichtbar.
     Deshalb ein heller Schleier und ein weisser Fokusrahmen.
     Werte gerechnet, nicht probiert: Der Rand traegt die Abgrenzung (45 % Weiss
     ueber #002f87 = rgb(115,141,189), das sind 3,6:1 — ueber der Grenze von 3:1
     fuer Bedienelemente). Die Flaeche allein kaeme nur auf 1,8:1 und ist deshalb
     Unterstuetzung, nicht Traeger. */
  --leiste-aktiv:rgba(255,255,255,.20);
  --leiste-aktiv-linie:rgba(255,255,255,.45);
  --leiste-fokus:#fff;

  /* Primaerknopf in Schmelzer-Rot — Entscheidung Wolfgang, 17.09.2026.
     Farbe aus dem Brand-Kit: #e20514 (Toshiba-Rot, dort der CTA-/Telefonknopf).
     Kontrast nachgerechnet: weisser Text auf #e20514 = 4,9:1, auf #b30410 = 6,6:1.
     Beides ueber der Grenze von 4,5:1.
     Das Brand-Kit erlaubt Rot ausdruecklich nur als EINEN Blickfang je Layout —
     die Hausregel "genau ein Primaerknopf je Ansicht" deckt sich damit exakt.
     Zwei rote Flaechen auf einem Schirm waeren ein Bruch beider Regeln.
     Der Gefahrenknopf (.knopf.gefahr) bleibt ein WEISSER Knopf mit rotem Rand —
     Flaeche gegen Umriss ist der Unterschied, an dem man die beiden erkennt. */
  --knopf-primaer:#e20514;
  --knopf-primaer-hover:#b30410;
  --knopf-primaer-text:#fff;

  /* ---- Neutrale Flaechen. Nie reines Schwarz/Weiss — immer einen Hauch
         Richtung Markenfarbe tuenchen (design-quality 3). ---- */
  --tinte:#15161a;   --text:#333;      --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. */
  /* Schmelzer-Website: Raleway (Ueberschriften) und Open Sans (Text), Brand/BRAND-KIT_Schmelzer.md.
     Seit 05.11.2026 (.22y) selbst gehostet: assets/fonts/, je Familie latin + latin-ext als
     variable woff2 (Raleway 100-900, Open Sans 400-700, Breite 100). Lizenz OFL.
     Raleway hat Mediaevalziffern -> bei Zahlen 'lnum' (Brand-Kit 22.10.2026). */
  --font:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-marke:"Raleway","Open Sans",system-ui,sans-serif;

  /* Felder wie Bausatz (Flaeche + Hauch-Rand + Innenschatten), Ring in Schmelzer-Blau. */
  --feld-rand:#d9dbe0; --feld-rand-hover:#b9bdc6; --feld-platzhalter:#73757b;
  --feld-grund:#fafafb; --feld-schimmer:inset 0 1px 2px rgba(20,20,40,.045);
  --feld-ring:0 0 0 3px rgba(0,47,135,.16);
  /* Zeilen-Hover in Listen: sichtbar gegen Weiss, ruhiger als --marke-bg */
  --zeile-hover:#f5f6f9;
}

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

/* Schriften selbst gehostet (Bausatz Abschnitt 3). Zeichenbereiche wie Google Fonts. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/assets/fonts/opensans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/assets/fonts/opensans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/raleway-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/raleway-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}