/* ============================================================
   EBS — Gestaltungsgrößen

   Welt: Beratung vor Ort. Warmes Papier, Navy als Fläche, Orange am Lastgang.
   Dunkler Modus bleibt Navy — nicht generisches Charcoal.
   Fotos und eigene Grafiken tragen die Branche, nicht eine Metapher.

   Kontrast: Textpaare in beiden Modi mindestens 4,5:1.
   Schrift: Archivo 400–800 (UI), Instrument Serif 400 (Display).
   ============================================================ */

:root {
  color-scheme: light dark;

  /* —— Marke —————————————————————————————————————————————
     Navy #12303f ist Fläche (Bänder, Hero, Footer-Kontrast).
     Logo-Blau #106fa3 bleibt auf der Wortmarke — nicht als Flächenfarbe.
     CTA bleibt #b4460d. Kein Angleichen der Navy an Cyan. */
  --brand-deep: #12303f;
  --brand-mid: #1d4a5f;
  --brand-mark: #106fa3;

  /* —— Heller Modus (Vorgabe) —————————————————————————————
     Tageslicht wie im Vor-Ort-Gespräch: warmes Papier, Navy, Orange. */
  --bg: #f3f0ea;
  --surface: #fbf8f3;
  --surface-2: #ebe6dc;
  --surface-3: #ddd6c9;
  --line: color-mix(in srgb, var(--brand-deep) 16%, #f3f0ea);
  --line-strong: color-mix(in srgb, var(--brand-deep) 28%, #f3f0ea);

  --ink: #191b19;        /* 15,4:1 auf --bg */
  --ink-2: #4a4f4c;      /*  8,1:1 auf --bg */
  --ink-3: #626864;      /*  5,4:1 auf --bg */

  --accent: #b4460d;     /*  5,6:1 auf --bg, weiße Schrift 4,9:1 darauf */
  --accent-hover: #953a0a;
  --accent-soft: #fdf0e8;
  --accent-line: #f0c9b0;
  --on-accent: #ffffff;

  --ok: #1f6b46;
  --ok-soft: #e9f4ee;
  --warn: #8a4b00;
  --danger: #b3261e;
  --danger-soft: #fdecec;
  --on-danger: #8c2020;

  /* Fläche für dunkle Bänder im hellen Modus */
  --deep: var(--brand-deep);
  /* Der Akzent des hellen Modus ist auf Navy zu dunkel. Auf dunklen
     Bändern gilt die aufgehellte Fassung — ≥ 4,5:1 auf --deep. */
  --accent-on-deep: #ff9b57;
  --on-deep: #ffffff;
  --on-deep-2: #e8ebe8; /* solid, nicht Alpha — sonst bricht Kontrast auf Fotos */
  --deep-line: color-mix(in srgb, #ffffff 22%, transparent);

  /* —— Schrift ———————————————————————————————————————————— */
  --font: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, serif;

  --w-book: 400;
  --w-mid: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-black: 800;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.1875rem;
  --t-lg: 1.4375rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.85rem);
  --t-2xl: clamp(1.85rem, 1.2rem + 2.1vw, 2.65rem);
  --t-3xl: clamp(2.35rem, 1.35rem + 3.2vw, 3.6rem);
  --t-4xl: clamp(2.85rem, 1.5rem + 5vw, 5.1rem);

  --lh-display: 1.04;
  --lh-head: 1.14;
  --lh-body: 1.62;

  /* —— Raster ————————————————————————————————————————————— */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.75rem; --s8: 3.5rem;
  --s9: 5rem;    --s10: 7.5rem;

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4.2vw, 3.25rem);
  --band: clamp(5rem, 10vw, 8.5rem);
  --header-h: 5.6rem;

  /* —— Form ——————————————————————————————————————————————
     Eine Radius-Familie: scharf genug für Unterlagen, weich genug
     für Knöpfe. Keine Pillen, keine Blob-Masken. */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-blob: 8px;
  --r-pill: var(--r);

  --shade: 0 1px 2px rgba(18, 48, 63, 0.05), 0 10px 28px rgba(18, 48, 63, 0.07);
  --shade-lg: 0 2px 6px rgba(18, 48, 63, 0.06), 0 24px 56px rgba(18, 48, 63, 0.12);

  --glass: color-mix(in srgb, var(--bg) 58%, transparent);
  --glass-line: color-mix(in srgb, var(--ink) 18%, transparent);

  /* PUNKT 3: Bewegung mit Masse, keine lineare Blende. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 0.16s var(--ease);
  --base: 0.32s var(--ease);
  --slow: 0.6s var(--ease);
}

/* —— Dunkler Modus ————————————————————————————————————————
   Folgt der Einstellung des Betriebssystems. Der Umschalter im
   Kopfbereich überschreibt das per data-theme.
   Navy-Familie, nicht Charcoal-SaaS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1c24;
    --surface: #132833;
    --surface-2: #183240;
    --surface-3: #1e3d4d;
    --line: color-mix(in srgb, #e8ebe8 14%, transparent);
    --line-strong: color-mix(in srgb, #e8ebe8 26%, transparent);

    --ink: #f2f3f1;        /* ≥ 14:1 auf --bg */
    --ink-2: #c5d0d4;      /* ≥  8:1 auf --bg */
    --ink-3: #9aadb4;      /* ≥  4,5:1 auf --bg */

    --accent: #ff9b57;     /* ≥  8:1 auf --bg, passt zum Löwen */
    --accent-hover: #ffb27c;
    --accent-soft: #2a2118;
    --accent-line: #5a3d28;
    --on-accent: #0d1c24;

    --ok: #6fd3a0;
    --ok-soft: #163028;
    --warn: #e0a45c;
    --danger: #ff9d94;
    --danger-soft: #2e1a1a;
    --on-danger: #ff9d94;

    --deep: #09151c;
    --accent-on-deep: #ff9b57;
    --on-deep: #f2f3f1;
    --on-deep-2: #d5d9d5;
    --deep-line: color-mix(in srgb, #f2f3f1 22%, transparent);

    --shade: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(9, 21, 28, 0.5);
    --shade-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(9, 21, 28, 0.55);

    --glass: color-mix(in srgb, var(--bg) 42%, transparent);
    --glass-line: color-mix(in srgb, #e8ebe8 22%, transparent);
  }
}

/* Manuelle Wahl schlägt die Systemeinstellung */
:root[data-theme="dark"] {
  --bg: #0d1c24;
  --surface: #132833;
  --surface-2: #183240;
  --surface-3: #1e3d4d;
  --line: color-mix(in srgb, #e8ebe8 14%, transparent);
  --line-strong: color-mix(in srgb, #e8ebe8 26%, transparent);

  --ink: #f2f3f1;
  --ink-2: #c5d0d4;
  --ink-3: #9aadb4;

  --accent: #ff9b57;
  --accent-hover: #ffb27c;
  --accent-soft: #2a2118;
  --accent-line: #5a3d28;
  --on-accent: #0d1c24;

  --ok: #6fd3a0;
  --ok-soft: #163028;
  --warn: #e0a45c;
  --danger: #ff9d94;
  --danger-soft: #2e1a1a;
  --on-danger: #ff9d94;

  --deep: #09151c;
  --accent-on-deep: #ff9b57;
  --on-deep: #f2f3f1;
  --on-deep-2: #d5d9d5;
  --deep-line: color-mix(in srgb, #f2f3f1 22%, transparent);

  --shade: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(9, 21, 28, 0.5);
  --shade-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(9, 21, 28, 0.55);

  --glass: color-mix(in srgb, var(--bg) 42%, transparent);
  --glass-line: color-mix(in srgb, #e8ebe8 22%, transparent);
}