/* Design Tokens — Custom Properties
   Edit these to re-skin the site globally. */

:root {
  /* ---------- Color ----------
     Schwarz-Blau-Schema: das "Schwarz" ist ein tiefes Anthrazit-Blau
     (#1A2238) — wirkt edel statt düster. Akzent ist ein kräftiges Royal-Blau. */
  --bg-base:         #FFFFFF;
  --bg-elevated:     #FFFFFF;
  --bg-soft:         #F4F6FA;

  --ink-900:         #1A2238;
  --ink-700:         #2A3447;
  --ink-500:         #5A6680;
  --ink-300:         #A8B1C2;

  --accent:          #1D4ED8;
  --accent-dk:       #1E3A8A;
  --accent-soft:     #DBEAFE;

  --line:            #E2E6EF;
  --line-strong:     #1A2238;

  /* ---------- Fonts (system stacks only — no webfonts) ---------- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --font-serif:
    ui-serif, Georgia, "Times New Roman", "Times", serif;

  /* Accent — kursive Serif (editorial, hochwertig, nicht verspielt).
     Bewusst KEINE Handschrift-Stacks; passt besser zum bodenständigen Markenbild. */
  --font-accent:
    ui-serif, Georgia, "Times New Roman", "Times", serif;

  /* ---------- Type Scale (fluid) ---------- */
  --fs-h1:       clamp(2.5rem, 7vw, 5rem);
  --fs-h2:       clamp(1.75rem, 4.5vw, 3rem);
  --fs-h3:       clamp(1.25rem, 2.5vw, 1.625rem);
  --fs-body:     1rem;
  --fs-body-lg:  1.0625rem;
  --fs-eyebrow:  0.8125rem;
  --fs-caption:  0.8125rem;

  /* ---------- Spacing ---------- */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    1.5rem;
  --space-lg:    2rem;
  --space-xl:    3rem;
  --space-2xl:   4rem;
  --space-3xl:   6rem;

  --container-max:   1280px;
  --container-pad:   1.25rem;  /* 20px mobile */
  --section-pad-y:   4rem;     /* 64px mobile */

  /* ---------- Radii ---------- */
  --r-card:    16px;
  --r-pill:    999px;
  --r-input:   10px;

  /* ---------- Elevation ---------- */
  --shadow-card:    0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  --shadow-card-h:  0 2px 6px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.08);
  --shadow-nav:     0 1px 0 var(--line);
  --shadow-sticky:  0 -4px 16px rgba(0,0,0,.08);

  /* ---------- Motion ---------- */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:        150ms;
  --t-base:        250ms;
  --t-slow:        600ms;

  /* ---------- Z-Index ----------
     Reihenfolge wichtig: Mobile-Overlay UNTER der Nav, damit der
     Hamburger-Button auch bei geöffnetem Menü klickbar bleibt. */
  --z-sticky-cta:  40;
  --z-overlay:     45;
  --z-nav:         50;
  --z-progress:    70;
  --z-lightbox:    80;
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 3rem;       /* 48px desktop */
    --section-pad-y: 6rem;       /* 96px desktop */
    --fs-body:       1.0625rem;  /* 17px on desktop */
  }
}