/* Ferienhaus am Grimming, Version 2: Kalkstein, Fels und Enzian. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Farben: warmes Kalkweiß als Grund, dunkler Fels für Text, Holz als zweite Farbe, Enzian nur für Bedienung */
  --kalk: oklch(95.5% 0.014 80);
  --kalk-hell: oklch(98.6% 0.007 85);
  --kalk-tief: oklch(91.5% 0.018 78);
  --linie: oklch(86.5% 0.02 75);
  --fels: oklch(23% 0.015 55);
  --fels-2: oklch(39% 0.018 55);
  --grau: oklch(50% 0.02 60);
  --nacht: oklch(21% 0.016 50);
  --nacht-2: oklch(27% 0.018 50);
  --nacht-linie: oklch(36% 0.02 50);
  --holz: oklch(56% 0.09 58);
  --holz-text: oklch(47% 0.085 55);
  --holz-hell: oklch(91% 0.035 72);
  --holz-nacht: oklch(78% 0.075 70);
  --enzian: oklch(47% 0.2 266);
  --enzian-druck: oklch(41% 0.19 266);
  --enzian-hell: oklch(91.5% 0.045 266);
  --fehler: oklch(50% 0.18 28);
  --ok: oklch(48% 0.09 155);

  /* Schrift */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Typografie: große Größen enger laufen lassen, kleine minimal weiter */
  --t-display: clamp(2.75rem, 9vw + 0.5rem, 6.25rem);
  --t-h2: clamp(2rem, 4.5vw + 0.75rem, 3.75rem);
  --t-h3: 1.25rem;
  --t-lead: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Abstände */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --rand: 20px;
  --breite: 1200px;

  /* Formen */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-pill: 999px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 140ms;
  --d-kurz: 200ms;
  --d-mittel: 320ms;

  --z-bar: 50;
  --z-sheet: 80;
}

@media (min-width: 48rem) {
  :root { --rand: 40px; }
}