/* ==========================================================================
   01 — DESIGN TOKENS
   Zentrale Stellschrauben für Farbe, Typografie, Abstände, Radien, Motion.
   Wer das Erscheinungsbild anpassen will, ändert idealerweise NUR diese Datei.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     FARBEN
     Natürliches Schema: Papier / Sand / Oliv-Anthrazit + Waldgrün als Akzent.
     Die Neutraltöne haben einen leichten Grün-Grau-Stich, damit die warmen
     Fotos darauf wirken und die Seite nicht in Richtung Standard-Beige kippt.
     -------------------------------------------------------------------- */
  --c-cream:      #f5f4ed; /* Papierton mit leicht olivem Einschlag           */
  --c-shell:      #ebe9df; /* alternierender Sektions-Hintergrund             */
  --c-sand:       #d9d6c4; /* Flächen, Trennbänder                           */
  --c-sand-deep:  #c7c3ac; /* Hover / Akzentkanten auf Sand                  */
  --c-ink:        #1c1e19; /* tiefes Oliv-Anthrazit (Headlines)              */
  --c-ink-2:      #43473c; /* Fließtext                                      */
  --c-muted:      #82857a; /* Eyebrows, Meta, Captions                       */
  --c-accent:     #4f6045; /* Waldgrün, sparsam einsetzen                    */
  --c-accent-ink: #3d4b35; /* Akzent auf hellem Grund, Hover                 */

  --c-line:       rgba(28, 30, 25, 0.16); /* Haarlinien / Rahmen             */
  --c-line-soft:  rgba(28, 30, 25, 0.09);
  --c-ink-invert: #ebe9df; /* Text auf dunklem Grund                        */

  /* --------------------------------------------------------------------
     TYPOGRAFIE
     Display = Serif (editorial, warm) · Text = Sans (clean, humanistisch)
     -------------------------------------------------------------------- */
  --font-display: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid Type Scale – skaliert stufenlos zwischen 380px und 1600px Viewport */
  --fs-eyebrow: 0.72rem;
  --fs-micro:   0.8rem;
  --fs-small:   0.9375rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
  --fs-h4:      clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
  --fs-h3:      clamp(1.5rem, 1.3rem + 0.95vw, 2.25rem);
  --fs-h2:      clamp(2.125rem, 1.5rem + 2.6vw, 3.875rem);
  --fs-h1:      clamp(2.5rem, 1.5rem + 4.1vw, 5.5rem);
  --fs-display: clamp(3.25rem, 1.5rem + 7vw, 8.5rem);   /* Galerie-/CTA-Titel */

  --lh-tight:   1.06;
  --lh-head:    1.08;
  --lh-snug:    1.28;
  --lh-body:    1.68;

  --tracking-eyebrow: 0.2em;
  --tracking-tight:  -0.025em;

  /* --------------------------------------------------------------------
     LAYOUT & ABSTÄNDE
     -------------------------------------------------------------------- */
  --container:      1320px;  /* großzügige Seitenbreite (Desktop)          */
  --container-slim: 880px;   /* für Lesetexte                              */
  --gutter:         clamp(1.25rem, 5vw, 4.5rem); /* horizontale Innenabstände */

  --section-y:      clamp(5.5rem, 11vw, 11.5rem); /* vertikale Section-Luft */
  --section-y-lg:   clamp(7rem, 14vw, 15rem);     /* für Hero / CTA         */
  --gap-col:        clamp(2rem, 5vw, 6rem);       /* Spaltenabstand Text|Bild */

  --header-h:       70px;

  /* --------------------------------------------------------------------
     RADIEN, RAHMEN, MOTION
     Sehr flache Radien – wirkt editorial statt "App-haft".
     -------------------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur:       320ms;
  --dur-slow:  760ms;
}

/* Auf sehr großen Screens den Header etwas höher setzen */
@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}