/* ==========================================================================
   Design-Tokens – Praxis Dr. Maienfisch AG
   Zentrale Token-Datei: ALLE Stilwerte leben hier (siehe CLAUDE.md).
   Farbwelt abgeleitet aus dem Logo-Blau (Design-Handoff 2026-07-26).
   ========================================================================== */

:root {
  /* --- Primitive Farbtokens (Logo-Blau-Palette) --- */
  --blue-300: #6e8db0;   /* Logo-Blau · Bildmarke, Deko */
  --blue-500: #48688c;   /* Primärfarbe (Buttons, Links, Kicker) */
  --blue-700: #385474;   /* Hover, dunkle Bänder (Ticker) */
  --blue-900: #24374d;   /* Footer, dunkelste Flächen */
  --accent-300: #a8c0d8; /* helles Blau für Verläufe/Deko */
  --mist-100: #eaf0f6;   /* Helle Akzentflächen (Icons, Notices) */
  --mist-50: #f6f9fb;    /* Sektionshintergründe */
  --ink-900: #1c2733;    /* Fliesstext */
  --ink-500: #526379;    /* Sekundärtext */
  --line-200: #d8e2ec;   /* Linien, Rahmen */
  --white: #ffffff;

  /* --- Semantische Farbtokens --- */
  --surface-page: var(--white);
  --surface-soft: var(--mist-50);
  --surface-accent: var(--mist-100);
  --surface-band: var(--blue-700);
  --surface-inverse: var(--blue-900);
  --fg-default: var(--ink-900);
  --fg-soft: var(--ink-500);
  --fg-accent: var(--blue-500);
  --fg-accent-strong: var(--blue-700);
  --fg-inverse: var(--white);
  --fg-inverse-soft: rgba(255, 255, 255, 0.75);
  --fg-inverse-faint: rgba(255, 255, 255, 0.55);
  --border-default: var(--line-200);
  --border-inverse: rgba(255, 255, 255, 0.15);

  /* --- Glas-Karte (Hero) --- */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: 14px;

  /* --- Overlays / Verläufe (RGB von --blue-900-nah, #172A3A)
     Bewusst hell gehalten, damit das Hero-Foto leuchtet. --- */
  --overlay-top: rgba(23, 42, 58, 0.10);
  --overlay-mid: rgba(23, 42, 58, 0.02);
  --overlay-bottom: rgba(23, 42, 58, 0.18);
  /* Leichte Aufhellung des Hero-Fotos */
  --hero-img-filter: brightness(1.07) saturate(1.04);

  /* --- Typografie --- */
  --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-h1: clamp(2.2rem, 5vw, 3.4rem);
  --fs-h1-hero: clamp(2rem, 4.5vw, 3.4rem);
  --fs-h1-page: clamp(2rem, 4vw, 2.8rem);
  --fs-h2: clamp(1.7rem, 3.5vw, 2.4rem);
  --fs-h3: 1.25rem;
  --fs-lead: 1.15rem;
  --fs-base: 1.0625rem;
  --fs-ui: 0.98rem;
  --fs-sm: 0.95rem;
  --fs-fine: 0.85rem;
  --fs-kicker: 0.8rem;
  --lh-body: 1.65;
  --lh-head: 1.2;
  --ls-head: -0.01em;
  --ls-kicker: 0.14em;

  /* --- Abstände (4px-Basis) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;

  /* --- Formularfelder (Meldeformular, Kontaktseite) --- */
  --field-bg: var(--white);
  --field-border: var(--line-200);
  --field-border-focus: var(--blue-500);
  --field-ring: rgba(72, 104, 140, 0.15); /* weicher Fokus-Schein um Felder */
  --field-ring-width: 3px;
  --field-padding-y: 0.75rem;
  --field-padding-x: 1rem;
  --field-gap: 1.1rem;              /* Abstand zwischen zwei Feldern */
  --textarea-min-height: 9rem;
  --checkbox-size: 20px;

  /* --- Foto ohne harte Kante (Startseite, «fliessender» Übergang) ---
     Die Maske lässt das Bild zum Rand hin in die Sektionsfläche auslaufen.
     Innen deckend, aussen transparent – kein sichtbarer Bildrahmen. */
  /* Radien knapp unter 50% der Boxbreite/-höhe: nur so erreicht der Verlauf
     an allen vier Kanten wirklich «transparent». Grössere Werte lassen an
     den Kantenmitten einen harten Rand stehen. */
  --photo-fade-mask: radial-gradient(50% 48% at 50% 42%, #000 44%, rgba(0, 0, 0, 0.42) 76%, transparent 100%);
  --visual-portrait-ratio: 3 / 4;

  /* --- Schwebende Karten (Startseite) ---
     Versatz der mittleren Karte nach oben. Derselbe Wert dient als
     margin-top des Rasters, damit die versetzte Karte denselben Abstand
     zum Sektionskopf behält wie ein normales Raster. */
  --cards-float-offset: 2.2rem;

  /* --- Karten-Einbettung (Kontaktseite) --- */
  --map-height: 380px;
  --map-height-sm: 300px;

  /* --- Aufzählungs-Zahn (ersetzt die Häkchen) --- */
  --bullet-size: 18px;              /* Zahn in .checklist */
  --bullet-size-sm: 15px;           /* Zahn im Ticker-Band */
  --placeholder-icon-size: 42px;    /* Zahn in der Team-Foto-Platzhalterkachel */
  --placeholder-icon-opacity: 0.55;

  /* --- Radien & Schatten --- */
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-xl: calc(var(--radius-lg) * 1.6); /* Glas-Karte, Hero-Flächen */
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(36, 55, 77, 0.08);
  --shadow-glass: 0 24px 60px rgba(23, 42, 58, 0.25);

  /* --- Layout --- */
  --container-max: 1120px;
  --header-height: 88px;
  --touch-target: 44px;
  --logo-height: 62px;
  --logo-height-md: 52px; /* ab 1000px, wenn der Header kompakter wird */
  --logo-height-sm: 48px;
  --footer-logo-height: 52px;

  /* --- Animation --- */
  --floaty-duration: 7s;
}