/* ==========================================================================
   GARTENGESTALTUNG BUSS — Design-Tokens (Single Source of Truth)
   Herleitung: design/DESIGN-SYSTEM.md · Prüfreferenz: .claude/anti-slop.md
   Kontraste (gegen --c-stein-50 #f7f6f1, sofern nicht anders vermerkt):
     --c-ink 15.2:1 AA/AAA · --c-ink-soft 5.6:1 AA · --c-brand-deep 4.6:1 AA
     --c-tanne-900 13.7:1 · --c-weiss auf --c-tanne-950 17.4:1
     --c-brand als TEXTFARBE nur auf --c-tanne-950 (7.1:1), nie auf hell!
   ========================================================================== */

/* ---- Fonts (lokal, variable, latin) ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-var-italic-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Farbe ---- */
  --c-brand: #91c021;        /* Logo-Grün: Buttons (Text: --c-ink), Marker, aktive Zustände */
  --c-brand-deep: #5c8412;   /* Akzent in Textgröße auf hell, Hover */
  --c-tanne-950: #151d13;
  --c-tanne-900: #1f2b1c;
  --c-tanne-700: #3a4d33;
  --c-ink: #1c211a;
  --c-ink-soft: #5b6355;
  --c-stein-50: #f7f6f1;
  --c-stein-100: #efede4;
  --c-stein-200: #e2dfd2;
  --c-wasser: #33707e;       /* NUR Schwimmteich-/Naturpool-Kontexte */
  --c-wasser-deep: #285a66;
  --c-weiss: #ffffff;
  --c-fehler: #a63d2f;
  --c-ok: #3f7d46;

  /* ---- Typografie ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Plakative Display-Skala — Headings deutlich größer, Body überdurchschnittlich */
  --fs-hero: clamp(2.9rem, 1.5rem + 5vw, 5rem);         /* 46 → 80px (ruhiger, weniger Umbruch) */
  --fs-h1: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);         /* 40 → 68px */
  --fs-h2: clamp(2rem, 1.35rem + 2.7vw, 3.15rem);        /* 32 → 50px */
  --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);        /* 21.6 → 29.6px */
  --fs-lead: clamp(1.3rem, 1.08rem + 0.75vw, 1.6rem);    /* 20.8 → 25.6px */
  --fs-body: 1.1875rem;                                  /* 19px */
  --fs-small: 1rem;                                      /* 16px */
  --fs-kicker: 0.875rem;                                 /* 14px */

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.62;

  /* Heading-Gewichte — plakativ (Black) */
  --fw-display: 900;
  --fw-heading: 900;

  /* ---- Raum ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 20px; --sp-5: 32px;
  --sp-6: 52px; --sp-7: 84px; --sp-8: 136px; --sp-9: 220px;
  --sp-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --sp-section-s: clamp(3rem, 2rem + 4vw, 6rem);

  /* ---- Raster ---- (breite Content-Zone: ~90% Bildschirm, mit Cap für Riesen-Screens) */
  --container: 118rem;         /* Cap ~1888px; effektiv 90% Breite via .container */
  --container-wide: 130rem;    /* Bildbühnen, nahezu voll */
  --container-text: 48rem;     /* Lesestrecken bleiben schmal (Lesbarkeit bei 19px) */
  --gutter: clamp(1.25rem, 5vw, 6rem);

  /* ---- Form ---- */
  --r-s: 2px;
  --r-m: 6px;
  --border: 1px solid var(--c-stein-200);
  --shadow-1: 0 1px 2px rgb(21 29 19 / .06);
  --shadow-2: 0 12px 32px -12px rgb(21 29 19 / .18);

  /* ---- Textur-Overlays (dezent, je Hintergrundfarbe; via background-blend-mode) ---- */
  /* Feines, nahtloses Papierkorn (feTurbulence) — seamless, scroll, kein Repeat sichtbar */
  --paper: url("../img/ui/paper.svg");

  /* ---- Motion ---- */
  --t-fast: 160ms cubic-bezier(.4, 0, .2, 1);
  --t-med: 320ms cubic-bezier(.4, 0, .2, 1);
  --t-reveal: 520ms cubic-bezier(.22, .61, .36, 1);

  /* ---- Z-Ebenen ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}