/* =================================================================
   Designsystem — zentrale Marken-Werte
   Farben, Typografie, Abstände als CSS-Variablen.
   Exakte Markenfarben hier ändern, der Rest der Seite zieht nach.
   ================================================================= */

:root {
  /* --- Farben ---------------------------------------------------- */
  /* Hintergründe & Flächen: weiches, warmes Off-White */
  --color-bg:            #faf7f2;  /* Seitenhintergrund */
  --color-surface:       #ffffff;  /* Karten, Header */
  --color-surface-alt:   #f2ede4;  /* abgesetzte Abschnitte */

  /* Text: warmes Dunkelbraun statt hartem Schwarz */
  --color-text:          #2b2622;  /* Fließtext, Überschriften */
  --color-text-muted:    #6b635b;  /* Sekundärtext, Hinweise */
  --color-text-invert:   #ffffff;  /* Text auf dunklen/farbigen Flächen */

  /* Salbeigrün — ruhige Sekundärfarbe */
  --color-sage:          #7c8a72;
  --color-sage-dark:     #5f6c57;
  --color-sage-soft:     #e7ece2;  /* zarte grüne Tönung für Flächen */

  /* Akzent — Logo-Rot (#bd1a1a). Wichtigste Aktion (Termin-CTA). */
  --color-accent:        #bd1a1a;
  --color-accent-hover:  #9c1414;
  --color-accent-soft:   #f6e4e2;  /* zarter roter Hauch */

  /* Linien & Fokus */
  --color-border:        #e3dcd0;
  --color-focus:         #1a5fbd;  /* gut sichtbarer Tastatur-Fokus */

  /* --- Typografie ----------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  /* fluid type scale (mobile-first, klemmt zwischen min/max) */
  --text-xs:   0.8125rem;                              /* 13px */
  --text-sm:   0.9375rem;                              /* 15px */
  --text-base: 1rem;                                   /* 16px */
  --text-lg:   1.125rem;                               /* 18px */
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl:  clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* --- Abstände (4px-Raster) ------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* --- Layout ---------------------------------------------------- */
  --container-max: 72rem;   /* ~1152px */
  --container-narrow: 44rem;
  --container-pad: 1.25rem;

  /* --- Form & Tiefe --------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(43, 38, 34, 0.06);
  --shadow-md: 0 6px 20px rgba(43, 38, 34, 0.08);
  --shadow-lg: 0 12px 32px rgba(43, 38, 34, 0.12);

  /* --- Verläufe -------------------------------------------------- */
  /* sanfte Hero-Tönung: ruhige Tiefe statt flacher Farbfläche */
  --hero-gradient:
    radial-gradient(120% 85% at 88% -15%, rgba(124, 138, 114, 0.22), transparent 60%),
    linear-gradient(180deg, var(--color-sage-soft) 0%, var(--color-bg) 100%);

  --transition: 160ms ease;
}