/* ═══════════════════════════════════════════════════════════════
   EVERIZE — Design-Tokens
   Quelle: Everize/Farben.txt + Branding/13 Brand Identity System
   Palette bewusst kühl/souverän (Caregiver + Ruler) — Wärme kommt
   über Bildsprache, nicht über Farbe.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Markenfarben ── */
  --navy:        #0A2342;   /* Primär: Headlines, Text, dunkle Sektionen */
  --navy-700:    #0E2C52;   /* etwas heller, für Verläufe/Boxen auf Navy */
  --blue:        #0A2342;   /* Marken-Blau = Navy (nur Navy + Hellblau, kein Zwischen-Blau): CTAs, Links, Akzente auf Hell */
  --blue-dark:   #071A33;   /* Hover / aktiv (dunkleres Navy) */
  --blue-light:  #7FB0F2;   /* Hellblau (heller Marken-Akzent, wie „erreichbar"): Icons, Glows, Akzente auf Dunkel */
  --blue-mid:    #427DD0;   /* Mittelblau (zwischen Hellblau und saturiert): Eyebrows/Unterüberschriften auf Hell */
  --blue-soft:   #E7EEF8;   /* zarter Blau-Hintergrund (Badges, Hover-Flächen) */

  --gray-100:    #DCE2EA;   /* helle Section-Backgrounds, Karten-Trenner */
  --gray-50:     #F4F7FB;   /* sehr heller Section-Wechsel */
  --gray-300:    #9AA7B8;   /* Sekundärtext, Boxen, Divider */
  --gray-500:    #5C6B7E;   /* Fließtext-Sekundär (besserer Kontrast) */

  --white:       #FFFFFF;
  --black:       #000000;

  /* ── Semantische Rollen ── */
  --bg:          var(--white);
  --bg-alt:      var(--gray-50);
  --surface:     var(--white);
  --text:        var(--navy);
  --text-muted:  var(--gray-500);
  --border:      var(--gray-100);
  --accent:      var(--blue);

  /* ── Typografie (Everize-Platzhalter: Montserrat + Inter; swappbar, falls Marken-Hausschrift kommt) ── */
  --font-head: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ── Maße ── */
  --max-site:  1280px;
  --max-text:  720px;
  --header-h:  76px;
  --radius:    16px;
  --radius-sm: 10px;
  --radius-full: 9999px;

  /* ── Schatten (Navy-getönt für Kohärenz) ── */
  --shadow-sm:  0 2px 8px rgba(10,35,66,.06);
  --shadow:     0 6px 28px rgba(10,35,66,.09);
  --shadow-lg:  0 18px 48px rgba(10,35,66,.14);
  --shadow-cta: 0 10px 28px rgba(10,35,66,.22);
  --shadow-float: 0 0 22px rgba(10,35,66,.10), 0 12px 34px rgba(10,35,66,.12); /* weicher Rundum-Schatten für freistehende Bilder (3D-Effekt) */

  /* ── Bewegung ── */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur:      .35s;
  --dur-slow: .6s;
  --dur-fast: .2s;
}