/* ============================================================
   Zurück zur Mitte — Design-Tokens (CLAUDE.md Kap. 3)
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --farbe-beige: #F9F6F0;
  --farbe-waldgruen: #1C2E24;
  --farbe-anthrazit: #2C2C2C;
  /* Gold: NUR dekorativ auf hellem Grund (Linien, Kreis, Diamant) —
     nie für Text auf Beige (Kontrast ~1,9:1) */
  --farbe-gold: #C5A880;
  /* Gold als TEXT auf Beige (Preise, Metatexte) — Kontrast 4,6:1 gegen #F9F6F0 */
  --farbe-gold-text: #8A6B3F;

  /* Schriften */
  --schrift-serif: 'Playfair Display', Georgia, serif;
  --schrift-sans: 'Inter', system-ui, sans-serif;

  /* Typo-Skalen */
  --groesse-headline: clamp(2.4rem, 6vw, 7rem);
  --groesse-fliesstext: 1rem;          /* 0.95–1.05rem */
  --groesse-metatext: 0.88rem;
  --zeilenhoehe-headline: 1.1;         /* 1.05–1.15 */
  --laufweite-fliesstext: 0.05em;
  --laufweite-metatext: 0.2em;
  --spaltenbreite-text: 38ch;          /* Absätze bei 30–40 Wörtern */

  /* Raum */
  --abstand-elemente: 15vh;            /* min. Weißraum zwischen Elementen */

  /* Bühne: maximale Inhaltsbreite der Screens. Auf großen Displays
     zentriert sich die Komposition, statt an die Ränder zu laufen. */
  --breite-buehne: 72rem;
  /* Seitenrand: normales Padding ODER der Rest neben der Bühne —
     je nachdem, was größer ist (zentriert die Bühne automatisch) */
  --rand-buehne: max(
    clamp(1.25rem, 6vw, 6rem),
    calc((100vw - var(--breite-buehne)) / 2)
  );

  /* Linien: hauchdünn, gold bzw. anthrazit mit niedriger Deckkraft */
  --linie-gold: 1px solid var(--farbe-gold);
  --linie-dunkel: 1px solid rgba(44, 44, 44, 0.25);
}