/* Fundus · Rezept „IT-Systemhaus: erreichbar und verlässlich“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/it-systemhaus-verlaesslich/ · Bauplan: bauplan.txt · Leitfaden: https://cecodesign.de/lab/fundus/leitfaden.txt
   Alle Gestaltung der Seite nutzt nur diese Variablen. Schriftpfade beim Kopieren in ein Projekt anpassen. */

@font-face { font-family: 'Host Grotesk'; src: url('../../../../assets/fonts/host-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('../../../../assets/fonts/martian-mono-latin-wght-normal.woff') format('woff'); font-weight: 100 800; font-stretch: 75% 112%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Host Grotesk', system-ui, sans-serif;
  --schrift-text: 'Host Grotesk', system-ui, sans-serif;
  --schrift-akzent: 'Martian Mono', ui-monospace, monospace;
  /* Größen laut Rezept: h1 Host Grotesk clamp(2.25rem, 1.4rem + 3.4vw, 4rem), wght 700, Laufweite -0.03em, Zeilenhöhe 1.0; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem), wght 600. Fließtext Host Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Martian Mono für Ticketnummern, Telefonzeiten, Reaktionszeiten, Versionen und Status: 0.875rem, wdth 87, wght 400; Labels 0.75rem Versal +0.08em. Knöpfe Host Grotesk 600, 1rem. */
  --mass: 66ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Hell und nüchtern wie ein aufgeräumter Serverschrank: helles Grau als Grund, etwas dunkleres Grau als Fläche für Pakete und Status, Grafit für Hotline-Band und Footer. Kobaltblau nur für Anfragen und Fernwartung starten. Statusfarben (Grün, Ocker, Rot) nur mit Wort und Symbol, nie allein. Kein Dunkelmodus mit Neon, kein Matrix-Grün, keine blauen Glow-Verläufe.) */
  --farbe-grund: #F1F2F3; /* Grund Hellgrau */
  --farbe-text: #16191D; /* Text (15,7 : 1 auf Grund) */
  --farbe-flaeche: #E1E4E8; /* Fläche Gehäuse: Pakete, Statuszeile, Formular (Text 13,8 : 1) */
  --farbe-dunkel: #1B1F24; /* Dunkel Grafit: Hotline-Band, Footer (Weiß darauf 16,6 : 1) */
  --farbe-signal: #2946B0; /* Signal Kobalt: Anfragen, Fernwartung starten (Weiß darauf 8,1 : 1; als Fläche auf Grund 7,2 : 1); auf Grafit stattdessen heller Knopf mit dunkler Schrift */
  --farbe-leise: #565C64; /* Leise: Meta-Angaben, Zeitstempel (6,0 : 1 auf Grund, 5,3 : 1 auf Fläche) */
  --farbe-erfolg: #1E6E43; /* Erfolg: Status „läuft“ (5,6 : 1 auf Grund, immer mit Wort) */
  --farbe-warnung: #7F5400; /* Warnung: Status „eingeschränkt“ (5,9 : 1 auf Grund, immer mit Wort) */
  --farbe-linie: #CDD1D6; /* Linie: Haarlinien in Tabellen (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.8 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 70 (Hover), 110 (Kopieren-Bestätigung), 240 (Akkordeon, Panels), 160 (schließen), 400 (Einblendung einer Statusmeldung) */
  --dauer-rezept-1: 70ms;
  --dauer-rezept-2: 110ms;
  --dauer-rezept-3: 160ms;
  --dauer-rezept-4: 240ms;
  --dauer-rezept-5: 400ms;
  /* Bewegung: token-tech-praezise */
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-ein: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-aus: cubic-bezier(0.2, 0, 1, 0.9);
  --dauer-xs: 70ms;
  --dauer-s: 110ms;
  --dauer-m: 150ms;
  --dauer-l: 240ms;
  --dauer-xl: 400ms;
  --dauer-xxl: 700ms;
  --stagger: 30ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: 4 bis 8 px, keine Skalierung, kein Federn */

  /* Flächen, Bilder, Seitenwechsel (clip-path, Panels, Bänder): Kurve ohne Überschwingen */
  --ease-flaeche: var(--ease-ein);
  --ease-flaeche-aus: var(--ease-aus);

  /* Bewegungs-Partitur (rezept.bewegung, Stand 04.11.2026): Rollen statt Stufen; gleiche Werte wie oben, nur benannt */
  --dauer-klein: 70ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 240ms; /* = --dauer-rezept-4 */
  --dauer-gross: 400ms; /* = --dauer-rezept-5 */
  --dauer-seitenwechsel: 450ms;
  --dauer-schliessen: 160ms; /* = --dauer-rezept-3 */
  --dauer-hover-ein: 110ms;
  --dauer-hover-aus: 70ms;
  /* Laden 1: Moment: Punktreihen des Status */
  --dauer-laden-1-ab: 120ms;
  --dauer-laden-1: 400ms;
  --dauer-laden-1-versatz: 30ms;

  /* Raum (mittel): Abstände in Vielfachen des 20-px-Punktrasters, wo das Raster sichtbar ist; Tabellen dicht. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 20px;
  --raum-6: 24px;
  --raum-7: 40px;
  --raum-8: 60px;
  --raum-9: 80px;
  --raum-10: 120px;
  --raum-sektion: clamp(60px, 8vw, 120px);
  /* Raster: Spalt gleich dem Punktraster (20 px). Hero 7/5 (Satz und Status links, Ansprechperson rechts). Pakete als Tabelle über 12 Spalten, mobil gestapelt mit fester erster Zeile. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 60px);
  --raster-spalt: 20px;
  --raster-max: 1280px;
  /* Form: Klare Kästen wie Module auf einer Platine; Statusfelder mit 1 px Rand in der Statusfarbe plus Wort. */
  --radius-klein: 4px;
  --radius-gross: 8px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #CDD1D6 in Tabellen; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, kontur-button-zeichnen (Variante laufend) */
  --button-hoehe: 44px; /* Trefferfläche mindestens 44 × 44 px */
  --button-farbe: var(--farbe-signal, currentColor);
  --fokus-ring: 2px solid var(--farbe-text, currentColor); /* außen um den Knopf, Abstand s. u.; auf dunklen Flächen eigene Farbe setzen */
  --fokus-abstand: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stagger: 0ms; --ui-stagger: 0ms; }
  :root { --dauer-klein: 70ms; --dauer-mittel: 150ms; --dauer-gross: 150ms; --dauer-seitenwechsel: 150ms; --dauer-schliessen: 100ms; --dauer-hover-ein: 110ms; --dauer-hover-aus: 70ms; } /* nur Überblenden, höchstens 150 ms; nie länger als normal */
  /* Partitur reduziert: Zustände wechseln ohne Weg (Rezept); Seitenwechsel als Überblendung. */
  /* Reduziert laut Stil: opacity 150 ms linear rein, 100 ms raus */
}