/* Fundus · Rezept „Brauerei und Brauhaus: Sud, Sorte, Stammtisch“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/brauerei-brauhaus-getraenke/ · 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: 'Imbue'; src: url('../../../../assets/fonts/imbue-latin-opsz-normal.woff') format('woff'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('../../../../assets/fonts/literata-latin-full-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Imbue', system-ui, sans-serif;
  --schrift-text: 'Literata', Georgia, serif;
  /* Größen laut Rezept: Wortmarke und Sortennamen Imbue in Versal, opsz 100, wght 600, über die volle Breite eingepasst (versal-kondensiert-fit-to-width: Größe je Zeile aus der gemessenen Breite, Zeilenhöhe 0.85, Laufweite +0.01em); h1 Imbue clamp(2.75rem, 1.4rem + 6vw, 7rem), Versal, wght 500; h2 clamp(2rem, 1.4rem + 2.6vw, 3.5rem), gemischte Schreibung, wght 600, opsz an die Größe gekoppelt (opsz 100 nur für Wortmarke und H1). Fließtext Literata 1.125rem (18 px), opsz automatisch, wght 400, Zeilenhöhe 1.6, höchstens 64ch. Bierdaten (% vol, Stammwürze in °P, IBU, Füllmenge, Preis je Liter, Pfand) Literata 500 mit Tabellenziffern. Knöpfe Literata 600, 1rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Farben des Brauens: Malz hell als Grund, Gerste als Fläche für Sortenkarten und Bierdaten, dunkler Sud für Brauhaus-Band und Footer. Ein Kupferton wie der Sudkessel nur für Kaufen, Buchen und Tickets. Bierfarben (Gold, Bernstein, Schwarz) kommen aus den Fotos, nie als Verlauf. Keine Hopfenranken, kein Bayern-Rautenmuster als Deko, keine Schaumkronen-Grafik.) */
  --farbe-grund: #F3EBDD; /* Grund Malz */
  --farbe-text: #1E1A16; /* Text (14,6 : 1 auf Grund) */
  --farbe-flaeche: #E7D4AE; /* Fläche Gerste: Sortenkarten, Bierdaten, Führungen (Text 11,9 : 1) */
  --farbe-dunkel: #2A1F18; /* Dunkel Sud: Brauhaus-Band, Footer (Weiß darauf 16,1 : 1) */
  --farbe-signal: #9A421B; /* Signal Kupfer: In den Warenkorb, Führung buchen, Tickets (Weiß darauf 6,6 : 1; als Fläche auf Grund 5,6 : 1, auf Gerste 4,6 : 1); auf Sud stattdessen Malz-Knopf mit dunkler Schrift */
  --farbe-leise: #625749; /* Leise: Meta-Angaben, Pfand und Preis je Liter (6,0 : 1 auf Grund, 4,8 : 1 auf Gerste) */
  --farbe-linie: #D6C7AA; /* Linie: Etikett-Linien um Bierdaten (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.5 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 250 (Hover, Farbe), 400 (Reiter, Akkordeon, schließen), 525 (Drawer, Dialog öffnen), 725 (Masken-Reveal eines Sudhaus-Fotos, einmal) */
  --dauer-rezept-1: 250ms;
  --dauer-rezept-2: 400ms;
  --dauer-rezept-3: 525ms;
  --dauer-rezept-4: 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 */

  /* Flächen, Bilder, Seitenwechsel (clip-path, Panels, Bänder): Kurve ohne Überschwingen */
  --ease-flaeche: var(--ease-ein);
  --ease-flaeche-aus: var(--ease-aus);
  --dauer-xl: 725ms; /* größte Stufe für große Flächen (= --dauer-gross der Partitur); der Seitenwechsel nimmt --dauer-seitenwechsel */

  /* Bewegungs-Partitur (rezept.bewegung, Stand 04.11.2026): Rollen statt Stufen; gleiche Werte wie oben, nur benannt */
  --dauer-klein: 250ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 525ms; /* = --dauer-rezept-3 */
  --dauer-gross: 725ms; /* = --dauer-rezept-4 */
  --dauer-seitenwechsel: 525ms; /* = --dauer-rezept-3 */
  --dauer-schliessen: 400ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 250ms;
  --dauer-hover-aus: 175ms;
  /* Laden 1: Hero-Foto (inset-rahmen) */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 725ms;

  /* Raum (mittel): Etikett-dicht bei Bierdaten (4 bis 8 px), Brauhaus und Sudhaus mit viel Luft. */
  --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, 9vw, 136px);
  /* Raster: Wortmarke über volle Breite, Hero 7/5 darunter. Sorten als Reihe mit Etikett-Karten, Bierseite 7/5 (Bild und Name links, Kaufbox rechts sticky). */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(12px, 2vw, 28px);
  --raster-max: 1320px;
  /* Form: Eckig wie ein Etikett; Kupfer nur auf Kauf- und Buchungsknöpfen. */
  --radius-klein: 0;
  --radius-gross: 0;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #D6C7AA als Etikett-Rahmen um Bierdaten und Kaufbox */
  /* 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; }
  :root { --dauer-klein: 150ms; --dauer-mittel: 150ms; --dauer-gross: 150ms; --dauer-seitenwechsel: 150ms; --dauer-schliessen: 100ms; --dauer-hover-ein: 150ms; --dauer-hover-aus: 100ms; } /* nur Überblenden, höchstens 150 ms; nie länger als normal */
  /* Partitur reduziert: Fotos stehen sofort, Panels ohne Weg (Rezept); Seitenwechsel als Überblendung. */
  /* Reduziert laut Stil: Farbwechsel ohne Bewegung */
}