/* Fundus · Rezept „Immobilien: diskret und hochwertig“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/immobilien-diskret-hochwertig/ · 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: 'Libre Caslon Display'; src: url('../../../../assets/fonts/libre-caslon-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../../../../assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../../../../assets/fonts/hanken-grotesk-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Libre Caslon Display', Georgia, serif;
  --schrift-text: 'Hanken Grotesk', system-ui, sans-serif;
  /* Größen laut Rezept: h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Libre Caslon Display 400, Laufweite -0.005em, Zeilenhöhe 1.08 – nur ab 2rem einsetzen (Display-Schnitt). Zwischentitel und Fließtext in Hanken Grotesk 400/500, 1.0625rem, Zeilenhöhe 1.55. Labels Versal 0.75rem mit 0.09em (~1.5px wie Inigo). Objektdaten (m², Zimmer, Preis) mit tabellarischen Ziffern. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Warme, fast weiße Flächen und ein Sandton als Bühne für Fotos, ein tiefer Markenton für Headlines und Footer, ein sparsamer Akzent ausschließlich für den Haupt-CTA (Bewertung anfragen).) */
  --farbe-grund: #FCFAF5; /* Grund (E&V white-linen) */
  --farbe-flaeche: #EFE8DF; /* Sandfläche/Karten (E&V brown-light, ähnlich Dahler #E8E2DB) */
  --farbe-marke: #02385C; /* Markenton für Headlines, Footer (Dahler) */
  --farbe-text: #313131; /* Fließtext */
  --farbe-linie: #B5B2AF; /* Linien/Meta (Inigo beige) */
  --farbe-signal: #ED7F1A; /* CTA-Akzent (Dahler) – nur Buttons */
  --farbe-text-2: #716F6D; /* Meta-Text barrierefrei (4.8 : 1 auf #FCFAF5; #B5B2AF nur für Linien oder Schrift ab 24 px) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.3 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 200 (Hover/Farbe), 400 (Menü, Höhe, Header), 900–1100 (Bild-Einblendung) */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 400ms;
  --dauer-rezept-3: 900ms;
  --dauer-rezept-4: 1100ms;
  /* Bewegung: token-editorial-langsam */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --dauer-m: 1000ms;
  --dauer-l: 1200ms;
  --dauer-xl: 1600ms;
  --stagger: 100ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Text 100 % in Zeilenmaske, Bilder clip-path inset und scale 1.1 → 1, Haarlinien scaleX */

  /* Bewegung für UI (Menüs, Formulare, Buchung): token-toggle-asymmetrisch */
  --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --ui-dauer-xs: 150ms;
  --ui-dauer-s: 220ms;
  --ui-dauer-m: 300ms;
  --ui-dauer-l: 450ms;
  --ui-stagger: 40ms;
  --ui-aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Panel clip-path, Links yPercent 100 → 0; Schließen schneller und mit Anlauf-Kurve */

  /* Raum (luftig): Viel Platz um Objektfotos; Objektdaten dagegen dicht in einer Zeile (Zimmer, m², Preis mit 16 px Abstand), damit man vergleichen kann. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 72px;
  --raum-9: 112px;
  --raum-10: 160px;
  --raum-sektion: clamp(88px, 10vw, 152px);
  /* Raster: Objektkarten 3 Spalten, Foto 4:3. Exposé 7/5: Bilder links scrollen, Eckdaten und Formular rechts sticky; mobil Eckdaten oben. */
  --raster-spalten: 12;
  --raster-rand: clamp(20px, 4vw, 64px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: 1440px;
  /* Form: Bilder und Karten eckig, nur die Haupthandlung ist eine dunkle Pille (pfeil-icon-button, Variante tausch). Der Akzent #ED7F1A bleibt dem einen CTA vorbehalten. */
  --radius-klein: 2px;
  --radius-gross: 0;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #B5B2AF für Linien und Meta-Trenner */
  /* Schatten: keiner */

  /* Buttons: pfeil-icon-button (Variante tausch), button-zustaende */
  --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 200 ms, Masken offen */
}