/* Fundus · Rezept „Industrie-Mittelstand: Datenblatt und Fachperson“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/industrie-b2b-mittelstand/ · 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: 'Strichpunkt Sans'; src: url('../../../../assets/fonts/strichpunkt-sans-latin-wght-normal.woff') format('woff'); font-weight: 400 900; font-stretch: 100% 200%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../../../../assets/fonts/archivo-latin-wdth-wght.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Strichpunkt Sans', system-ui, sans-serif;
  --schrift-text: 'Archivo', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Strichpunkt Sans clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 600, wdth 116, Laufweite -0.03em, Zeilenhöhe 0.98; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem), wght 600, wdth 110, -0.02em; h3 Archivo 1.25rem wght 600 wdth 100. Fließtext Archivo 1.0625rem (17 px), wght 400, wdth 100, Zeilenhöhe 1.55, max. 68ch. Tabellen (technische Daten, Messen, Downloads) Archivo 0.9375rem, wdth 87, Tabellenziffern, Einheit in eigener Spalte rechtsbündig neben dem Wert. Abschnittscodes und Achsbeschriftung des Rasters („01 · Anwendungen“, „A–D“, „1–12“) Archivo 0.75rem, wdth 75, wght 600, Versal, +0.08em. Artikelnummern Archivo wdth 87, Tabellenziffern, kopierbar. Höchstens zwei Gewichte je Familie (400/600). */
  --mass: 68ch;
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Kühles Blechgrau als Grund, Graphit statt Schwarz, Rasterlinien in 13 % Graphit, dunkles Stahlblau für Kopf, Messen und Fußzeile. Genau ein Signal: Verkehrsblau (RAL 5017 als Beispiel; im Projekt die echte Hausfarbe, flach, nie als Verlauf) nur für „Projekt anfragen“, aktive Filter und Fokus. Keine Glanzflächen, kein Dunkelmodus als Gestaltungsidee, Farbe in Fotos kommt aus Maschine, Werkstoff und Halle.) */
  --farbe-grund: #F3F3F0; /* Grund (Blechgrau, Datenblattpapier) */
  --farbe-text: #111417; /* Text Graphit (16,6 : 1) */
  --farbe-text-2: #4E555B; /* Sekundärtext, Einheiten, Meta (6,8 : 1) */
  --farbe-flaeche: #E4E5E1; /* Tabellenkopf, Zellfläche bei Hover */
  --farbe-dunkel: #16202A; /* Stahlblau dunkel: Kopf, Messen-Band, Fußzeile (Weiß darauf 16,5 : 1) */
  --farbe-signal: #0E518D; /* Signal Verkehrsblau: Projekt anfragen, aktiver Filter, Fokus (Weiß darauf 8,1 : 1; auf Grund 7,3 : 1) */
  --farbe-linie: #CFCFCD; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.9 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 200 (Hover, Filter-Indikator, Reiter), 350 (Mega-Menü, Akkordeon, Listenzeilen nach Filterwechsel), 500 (Bild-Maske bei Referenzen, Schritt der Anfrage), 700 (H1 im Hero, einmal); Austritt 70 % davon, Versatz 40 ms */
  --dauer-rezept-1: 40ms;
  --dauer-rezept-2: 70ms;
  --dauer-rezept-3: 200ms;
  --dauer-rezept-4: 350ms;
  --dauer-rezept-5: 500ms;
  --dauer-rezept-6: 700ms;
  /* Bewegung: token-swiss-knackig */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-ein: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-aus: cubic-bezier(0.5, 0, 0.75, 0);
  --dauer-xs: 200ms;
  --dauer-s: 350ms;
  --dauer-m: 500ms;
  --dauer-l: 700ms;
  --stagger: 40ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: nur x oder y; Text 100 % in Zeilenmaske, Pfeile 8 px; keine Rotation */

  /* Raum (dicht): Datenblatt-Dichte: Tabellenzeilen 8 bis 12 px, Zellen mit 16 bis 24 px Innenabstand. Jedes Element sitzt auf einer Rasterlinie. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 64px;
  --raum-9: 96px;
  --raum-10: 128px;
  --raum-sektion: clamp(64px, 8vw, 128px);
  /* Raster: 12 Spalten ab 821 px, 8 bis 820 px, 4 darunter (Regel). Sichtbares Raster mit Plus-Markern nur an Schnittpunkten und Achsbeschriftung im Steg (blueprint-raster-sichtbar). Spaltenabstand 0, Linien sind die Zellkanten; Innenabstand der Zelle clamp(16px, 2vw, 24px). */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 3vw, 40px);
  --raster-spalt: 0;
  --raster-max: 1440px;
  /* Form: Keine Rundung, kein Glanz. Nebenweg als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Verkehrsblau flach. */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px rgba(17, 20, 23, .13) für Raster und Plus-Marker; Tabellenkopf auf #E4E5E1 */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, kontur-button-zeichnen (Variante ecken) */
  --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; }
  /* Reduziert laut Stil: opacity 150 ms linear, Masken sofort offen */
}