/* ==========================================================================
   BM GENERALBAU – Design Tokens
   Einzige Quelle der Wahrheit für Farben, Typografie, Abstände, Raster.
   Basis: Designsystem "BM Architectural Construct" + Logo/Banner-CI.
   Beim späteren WordPress-Theme unverändert übernehmbar.
   ========================================================================== */

:root {
  /* ── Marke: Anthrazit-Struktur ─────────────────────────────────────── */
  --c-slate-deep:    #181d24;  /* Primär: Headlines, dunkle Blöcke, CTA    */
  --c-slate-black:   #0f1216;  /* Tiefster Ton: Footer, Overlays           */
  --c-charcoal:      #222831;  /* Karten in dunklen Sektionen              */
  --c-border-dark:   #2e3642;  /* Hairlines auf dunklem Grund              */

  /* ── Marke: Bronze / Gold Akzent ───────────────────────────────────── */
  --c-bronze:        #c48044;  /* Akzent-TEXT auf dunkel – 5,3:1           */
  --c-bronze-deep:   #b87233;  /* Markenkupfer aus dem Logo (Linien, CTA)  */
  --c-bronze-ink:    #9c5c1c;  /* Kupfer-TEXT auf hell – 5,0:1             */
  --c-gold-light:    #d49a60;  /* Hover-Aufhellung auf dunkel – 6,9:1      */
  --c-bronze-tint:   #f0e8dd;  /* Badge-Hintergrund hell                   */
  --c-bronze-veil:   rgba(184, 114, 51, 0.14);
  --c-bronze-line:   rgba(184, 114, 51, 0.35);

  /* ── Neutralflächen ────────────────────────────────────────────────── */
  --c-stone:         #f8f9fa;  /* Seitenhintergrund (Tageslicht)           */
  --c-stone-2:       #f3f4f5;  /* Alternierende Bänder                     */
  --c-stone-3:       #edeeef;
  --c-white:         #ffffff;
  --c-border:        #e5e7eb;  /* Hairline auf hellem Grund                */
  --c-border-strong: #d6d8dc;

  /* ── Text ──────────────────────────────────────────────────────────── */
  --c-ink:           #191c1d;  /* Fließtext                                */
  --c-ink-soft:      #45474b;  /* Sekundärtext                             */
  --c-ink-muted:     #6b6e73;  /* Meta, Captions                           */
  --c-on-dark:       #ffffff;
  --c-on-dark-soft:  #c3c7cd;
  --c-on-dark-muted: #8f959e;

  /* ── Status ────────────────────────────────────────────────────────── */
  --c-error:         #ba1a1a;
  --c-error-bg:      #ffdad6;
  --c-success:       #1f6b3a;

  /* ── Fokus (Barrierefreiheit) ──────────────────────────────────────── */
  --c-focus:         #9c5c1c;
  --focus-ring:      0 0 0 3px rgba(184, 114, 51, 0.45);

  /* ── Typografie ────────────────────────────────────────────────────── */
  --ff-display: 'Syne', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;

  /* Fluide Skala – Mobile-Wert → Desktop-Wert (Designsystem-konform) */
  --fs-hero:    clamp(2.375rem, 1.30rem + 4.60vw, 4.000rem); /* 38 → 64 */
  --fs-h1:      clamp(2.125rem, 1.35rem + 3.35vw, 3.250rem); /* 34 → 52 */
  --fs-h2:      clamp(1.875rem, 1.40rem + 2.00vw, 2.750rem); /* 30 → 44 */
  --fs-h3:      clamp(1.375rem, 1.19rem + 0.80vw, 1.750rem); /* 22 → 28 */
  --fs-h4:      clamp(1.125rem, 1.06rem + 0.28vw, 1.250rem); /* 18 → 20 */
  --fs-lead:    clamp(1.063rem, 0.99rem + 0.32vw, 1.250rem); /* 17 → 20 */
  --fs-body-lg: clamp(1.000rem, 0.96rem + 0.18vw, 1.125rem); /* 16 → 18 */
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight:   1.12;
  --lh-heading: 1.2;
  --lh-body:    1.65;

  --ls-display: -0.03em;
  --ls-heading: -0.015em;
  --ls-caps:    0.14em;
  --ls-btn:     0.08em;

  /* ── Abstände ──────────────────────────────────────────────────────── */
  --sp-2xs: 0.25rem;
  --sp-xs:  0.5rem;
  --sp-sm:  0.75rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4.5rem;
  --sp-4xl: 6rem;

  /* Vertikaler Sektionsrhythmus – fluide, damit Mobile nicht auseinanderfällt */
  --sp-section:    clamp(3.5rem, 2.2rem + 5.5vw, 8rem);
  --sp-section-sm: clamp(2.5rem, 1.8rem + 3.0vw, 4.5rem);

  /* ── Raster / Container ────────────────────────────────────────────── */
  --container:     1360px;
  --container-narrow: 820px;   /* Fließtext: optimale Lesebreite          */
  --gutter:        clamp(1rem, 0.4rem + 2.4vw, 2rem);
  --grid-gap:      clamp(1rem, 0.6rem + 1.6vw, 2rem);

  /* ── Form ──────────────────────────────────────────────────────────── */
  --radius:      0px;      /* Architektonisch: scharfe Kanten             */
  --radius-soft: 2px;      /* Nur wo Touch-Ergonomie es verlangt          */
  --hairline:    1px;

  /* ── Tiefe: keine weichen Schatten, nur Kontaktschatten ────────────── */
  --shadow-card:   0 12px 32px rgba(15, 18, 22, 0.08);
  --shadow-header: 0 1px 0 rgba(15, 18, 22, 0.08);
  --shadow-panel:  0 24px 60px rgba(15, 18, 22, 0.18);

  /* ── Bewegung ──────────────────────────────────────────────────────── */
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── Ebenen ────────────────────────────────────────────────────────── */
  --z-header:     100;
  --z-dropdown:   110;
  --z-offcanvas:  200;
  --z-lightbox:   300;
  --z-skiplink:   400;

  /* ── Feste Höhen (verhindert CLS) ──────────────────────────────────── */
  --header-h:        96px;
  --header-h-scroll: 78px;
  --mobile-cta-h:    60px;
}

/* Kleinere Header-Höhe auf Mobile */
@media (max-width: 1023px) {
  :root {
    --header-h: 80px;
    --header-h-scroll: 72px;
  }
}