/* Fundus · Rezept „Handwerk: Werkstatt und Klartext“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/handwerk-werkstatt-klartext/ · 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: 'Special Gothic'; src: url('../../../../assets/fonts/special-gothic-latin-standard-normal.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('../../../../assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Special Gothic', system-ui, sans-serif;
  --schrift-text: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  /* Größen laut Rezept: h1 clamp(2.25rem, 1.5rem + 3vw, 3.5rem), Special Gothic wght 700, wdth 100, Laufweite -0.01em, Zeilenhöhe 1.05 (Holzrausch lg: 3rem / -0.01em / 1); h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); Gewerk-Labels und Zahlenleiste in Special Gothic Condensed One (bzw. wdth 75), 0.8125rem Versal, +0.04em; Fließtext Atkinson Hyperlegible Next mind. 1.0625rem (17px), Zeilenhöhe 1.55; Meta 0.8125rem. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Materialfarben als Flächen (Zement, Holz, Salbei), dunkle Schrift, und genau ein kräftiger Signalton, der nur für Anfrage- und Anruf-Buttons gilt. Kein Firmenblau-Verlauf.) */
  --farbe-grund: #EFEDEA; /* Grund (Holzrausch hellblau) */
  --farbe-flaeche: #D3CDC2; /* Karten/Flächen (cement) */
  --farbe-flaeche-2: #C3B4A5; /* Holzton für Akzentflächen (braun) */
  --farbe-flaeche-3: #BDC1A9; /* Sekundärfläche (grün) */
  --farbe-text: #1A1A1A; /* Text */
  --farbe-signal: #FB6100; /* Signal: Anfrage/Anruf (Holzrausch orange; bei SHK z. B. Rot wie thermondo #F60439) */
  --farbe-leise: #696867; /* abgeleitet: Meta-Text, 4.8 : 1 auf Grund */
  --farbe-linie: #CDCBC9; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.6 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Hover, Farbe), 200–280 (Menüs, Akkordeon), 400 (Bild-Einblendung) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 280ms;
  --dauer-rezept-4: 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 */

  /* Raum (mittel): Klar gegliedert, nicht gedrängt: Leistungen als Liste mit 24 px zwischen den Punkten, Zahlenleiste mit 32 px Innenabstand. Mobil eine Leiste unten, darüber 80 px Freiraum am Seitenende. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 40px;
  --raum-8: 56px;
  --raum-9: 80px;
  --raum-10: 120px;
  --raum-sektion: clamp(64px, 8vw, 120px);
  /* Raster: Hero asymmetrisch 5/7 (Text links, Foto rechts). Leistungen als Liste mit kurzer Beschreibung, keine Icon-Kacheln. Referenzen als Masonry mit 3 Spalten, mobil 1. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(16px, 2.4vw, 32px);
  --raster-max: 1280px;
  /* Form: Flächen trennen sich über die Materialtöne (Zement, Holz, Salbei), nicht über Schatten. Der Signalton #FB6100 ist nur Fläche der Anfrage- und Anruf-Knöpfe. */
  --radius-klein: 4px;
  --radius-gross: 8px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #D3CDC2 (Zement) zwischen Leistungen und um Formularfelder */
  /* Schatten: keiner */

  /* Buttons: fuellung-vom-eintrittspunkt (Variante basis), 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 rein, 100 ms raus */
}

/* ------------------------------------------------------------------
   Starter Hartlieb · abgeleitete Werte (nur aus den Rezept-Tokens oben,
   keine neuen Farben außer den dunklen Tafeln aus --farbe-text)
   ------------------------------------------------------------------ */
:root {
  --h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);        /* Rezept */
  --h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);     /* Rezept */
  --h3: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  --text: 1.0625rem;                                  /* 17 px, Rezept */
  --text-gross: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --meta: .8125rem;                                   /* Rezept */
  --label-breite: 75%;                                /* Special Gothic wdth 75 für Gewerk-Labels und Zahlen */
  /* Zahlen als Typo-Ereignis (zahlen-fakten-section, Variante typo) und Seitennamen im Vorhang */
  --monument: clamp(4.5rem, 1rem + 15vw, 15rem);
  --monument-klein: clamp(3rem, 1rem + 8vw, 8.5rem);
  /* Dunkle Tafel = Textfarbe als Fläche */
  --tafel: var(--farbe-text);
  --tafel-text: var(--farbe-grund);
  --tafel-leise: #b2aea8;          /* abgeleitet: 8,1 : 1 auf #1A1A1A */
  --tafel-linie: rgb(239 237 234 / .18);
  --papier: #f7f6f3;               /* abgeleitet: Formularfelder, eine Stufe heller als Grund */
  --kopf-hoehe: 72px;
  --vorhang-dauer: calc(var(--dauer-xl) * 2 + var(--dauer-m));   /* 950 ms: rein, halten, raus */
}
@media (max-width: 760px) { :root { --kopf-hoehe: 60px; } }