/* Fundus · Rezept „Salon: Handschrift und Termin“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/friseur-salon-handschrift/ · 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: 'Kalnia'; src: url('../../../../assets/fonts/kalnia-latin-full-normal.woff2') format('woff2'); font-weight: 100 700; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('../../../../assets/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Mrs Saint Delafield'; src: url('../../../../assets/fonts/mrs-saint-delafield-latin-400-normal.woff') format('woff'); font-weight: 400; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Kalnia', Georgia, serif;
  --schrift-text: 'Familjen Grotesk', system-ui, sans-serif;
  --schrift-akzent: 'Mrs Saint Delafield', cursive;
  /* Größen laut Rezept: Salonname und h1 Kalnia clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem), wdth 112, wght 500, Laufweite -0.02em, Zeilenhöhe 0.95 (Barbershop: wdth 125, wght 700, Versal, Laufweite +0.01em); h2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem), wdth 100, wght 500. Fließtext Familjen Grotesk 1.0625rem/1.55, wght 400, max. 62ch; Preiszeilen 1rem wght 500, Preise rechtsbündig in Tabellenziffern; Rubriken und Stufen 0.8125rem Versal, +0.06em in Familjen (keine Mono). Mrs Saint Delafield nur für den Namen unter dem Porträt, 2.25–3rem, um -4° gedreht, höchstens einmal pro Ansicht; der Name steht darunter noch einmal in Familjen, damit ihn jeder lesen kann. */
  --mass: 62ch;
  --zeilenhoehe-text: 1.55; /* Standard */

  /* Farbe (Prinzip: Puder statt Reinweiß, Espresso statt Schwarz und ein Lackrot, das nur „Termin buchen“ und aktive Zustände trägt. Große Flächen aus Puder und Espresso (Preisliste, Gutschein, Fußzeile). Die Farbe kommt aus den Fotos der Arbeiten, deshalb bleiben die UI-Flächen neutral warm und färben keine Haarfarbe um. Barbershop: Espresso als Grund, Puder als Schrift.) */
  --farbe-grund: #F4E9E4; /* Grund (Puder) */
  --farbe-grund-2: #1E1412; /* Text, dunkle Sektionen, Barbershop-Grund (15 : 1 auf Puder) */
  --farbe-signal: #9B1D2E; /* Signal Lackrot: Termin buchen, aktiver Reiter (6,8 : 1 auf Puder; Weiß darauf 8 : 1; auf Espresso nur mit 2 px Puder-Rand) */
  --farbe-flaeche: #E9DBD4; /* Kartenfläche, Preisliste */
  --farbe-text: #6E5A55; /* Meta: Dauer, Stufe, Bildunterschrift (5,4 : 1 auf Puder) */
  --farbe-linie: #D9C8C0; /* Linien */
  --farbe-leise: #77645F; /* abgeleitet: Meta-Text, 4.7 : 1 auf Grund */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.5 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 250 (Farbe, Schatten, Hover), 400 (Menü, Drawer, Akkordeon, Unterstreichung, Reiter der Preisliste), 475 (Buttons: Fläche fährt von unten ein), 725 (nur Wurf und Rückkehr der Look-Karten, Hero-Bild einmalig); Schließen 65 % der Öffnungsdauer mit derselben Kurve (Menü 260) */
  --dauer-rezept-1: 65ms;
  --dauer-rezept-2: 250ms;
  --dauer-rezept-3: 400ms;
  --dauer-rezept-4: 475ms;
  --dauer-rezept-5: 725ms;
  /* Bewegung: token-studio-signatur */
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-ein: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-aus: cubic-bezier(0.625, 0.05, 0, 1);
  --dauer-xs: 250ms;
  --dauer-s: 400ms;
  --dauer-button: 475ms;
  --dauer-m: 525ms;
  --dauer-l: 725ms;
  --stagger: 40ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: Button-Fläche translateY 101 % → 0, Text rollt 100 %, Unterschriften 8 bis 16 px, Bild scale 1.08 → 1 */

  /* Raum (mittel): Preisliste dicht und lesbar (Zeilen 12 px, Rubriken 32 px), Team-Karten mit Luft. Bewertungsband direkt unter dem Hero ohne großen Abstand. */
  --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: 136px;
  --raum-sektion: clamp(64px, 8vw, 120px);
  /* Raster: Hero 7/5 (Name/Foto im Hochformat). Preisliste mit Stufen als Spalten, Team als 3er-Raster mit Kartenstapel je Person. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(12px, 2vw, 24px);
  --raster-max: 1360px;
  /* Form: Pillen für Knöpfe (fuellung-vom-eintrittspunkt), 16 px für Look-Karten und Porträts (Demo flick-karten-stapel zeigt 12 bis 16 px). */
  --radius-klein: 8px;
  --radius-gross: 16px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #D9C8C0 */
  /* Schatten: nur die Look-Karten im Stapel (flick-karten-stapel) heben sich weich in Espresso ab; sonst keiner */

  /* Buttons: fuellung-vom-eintrittspunkt (Variante basis), pfeil-icon-button (Variante tausch) */
  --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: Farbwechsel ohne Bewegung */
}