/* ==========================================================================
   Design-Tokens — einzige Quelle für Farben, Abstände, Typografie
   Farbpalette übernommen von der Bestandsseite (nur Farben, nicht Aufbau).
   ========================================================================== */

:root {
  /* --- Markenfarben (aus podologiewieseler.de ausgelesen) --- */
  --color-primary: #0489b1;        /* Buttons, Icons, Fokus (nur große/fette Labels) */
  --color-primary-dark: #0e7492;   /* Hover/Aktiv, kleine Textlinks — besserer Kontrast */
  --color-primary-darker: #0a5f77; /* tiefere Betonung, Footer-Hintergrund */
  --color-alert: #cc3366;          /* nur Formular-Fehlermeldungen */

  /* --- Text & Hintergrund --- */
  --color-heading: #262626;
  --color-body: #333333;
  --color-muted: #69727d;          /* zurückhaltende Sekundärtexte */
  --color-bg: #ffffff;

  /* --- Struktur-Neutraltöne (tonal vom Primär-Blau abgeleitet) --- */
  --color-surface-alt: #eaf5f8;    /* alternierende Abschnitts-Hintergründe */
  --color-surface-tint: #f4fafc;   /* sehr dezenter Blauschimmer */
  --color-border: #e2e2e2;
  --color-border-strong: #cfd8dc;

  /* --- Typografie --- */
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;
  --line-body: 1.6;
  --line-heading: 1.2;

  /* Fluide Schriftgrößen (skalieren mit Viewport) */
  --fs-hero: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-h1: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
  --fs-h2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

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

  /* --- Layout & Effekte --- */
  --container-max: 1140px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(38, 38, 38, 0.08);
  --shadow-md: 0 6px 20px rgba(10, 95, 119, 0.12);
  --shadow-lg: 0 14px 40px rgba(10, 95, 119, 0.16);
  --transition: 160ms ease;
  --header-h: 72px;
}