/* =========================================================================
   BELAU Projektsteuerung – Design Tokens & Basisklassen
   Einbindung: Elementor Pro → Custom Code → Ort: <head> → Seiten: ganze Website
   In Elementor in <style> … </style> einfügen.
   Präfix "b-" = eigene Klassen, kollidiert nicht mit Elementor.
   ========================================================================= */

:root {
  /* ---- Farben ---------------------------------------------------------- */
  --b-ink-900: #1B252B;   /* Schiefer – dunkle Sektionen */
  --b-ink-800: #24323A;
  --b-ink-700: #34444D;
  --b-text: #1F2A30;
  --b-text-muted: #5F6B71;
  --b-stone-300: #C9D1D5;
  --b-stone-100: #E9EDEF;
  --b-stone-50: #F4F6F7;
  --b-white: #FFFFFF;
  --b-brand: #8BB1BF;      /* Blaugrau – Logo. NICHT als Text auf Hell! */
  --b-brand-300: #B9D0D9;
  --b-brand-100: #E6EFF2;
  --b-brand-700: #4F7584;  /* Blaugrau als Text auf Hell (5,0:1) */
  --b-gold: #D2B559;       /* Signal – nur auf Dunkel oder als Grafik */
  --b-gold-700: #8A7128;   /* Gold als Text auf Hell (4,7:1) */
  --b-error: #B5473A;

  /* ---- Typografie (fließend 375 → 1440 px) ------------------------------ */
  --b-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --b-fs-display: clamp(2.75rem, 1.61rem + 4.88vw, 6rem);     /* 44 → 96 */
  --b-fs-h1:      clamp(2.25rem, 1.63rem + 2.63vw, 4rem);     /* 36 → 64 */
  --b-fs-h2:      clamp(1.875rem, 1.48rem + 1.69vw, 3rem);    /* 30 → 48 */
  --b-fs-h3:      clamp(1.375rem, 1.24rem + 0.56vw, 1.75rem); /* 22 → 28 */
  --b-fs-h4:      clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18 → 20 */
  --b-fs-lead:    clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);/* 18 → 22 */
  --b-fs-body:    clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);   /* 16 → 17 */
  --b-fs-small:   0.875rem;
  --b-fs-eyebrow: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
  --b-fs-quote:   clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem);   /* 24 → 36 */
  --b-fs-number:  clamp(3rem, 2.3rem + 3vw, 5rem);            /* 48 → 80 */

  /* ---- Abstände -------------------------------------------------------- */
  --b-space-1: 4px;  --b-space-2: 8px;   --b-space-3: 12px;  --b-space-4: 16px;
  --b-space-5: 24px; --b-space-6: 32px;  --b-space-7: 48px;  --b-space-8: 64px;
  --b-space-9: 96px; --b-space-10: 128px;
  --b-section-y: clamp(56px, 3rem + 4vw, 96px);
  --b-section-y-lg: clamp(72px, 3.5rem + 6vw, 128px);
  --b-gutter: clamp(20px, 1rem + 3vw, 64px);
  --b-content: 1280px;

  /* ---- Formen ---------------------------------------------------------- */
  --b-radius: 4px;
  --b-line: 1px solid var(--b-stone-300);
  --b-stroke: 1.5px;

  /* ---- Bewegung -------------------------------------------------------- */
  --b-dur-fast: 160ms;
  --b-dur-base: 280ms;
  --b-dur-slow: 700ms;
  --b-dur-draw: 1200ms;
  --b-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --b-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --b-stagger: 70ms;
}

/* ---- Basis ------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--b-font); color: var(--b-text); font-feature-settings: "ss01" 0; }
::selection { background: var(--b-brand); color: var(--b-ink-900); }
:focus-visible { outline: 2px solid var(--b-brand-700); outline-offset: 3px; }
.b-dark :focus-visible { outline-color: var(--b-brand); }

/* ---- Dunkle Sektion ---------------------------------------------------- */
.b-dark { background-color: var(--b-ink-900); color: var(--b-stone-300); }
.b-dark .elementor-heading-title { color: var(--b-white); }
.b-dark a:not(.elementor-button) { color: var(--b-brand); }

/* ---- Bauplan-Raster ---------------------------------------------------- */
.b-grid-bg { position: relative; isolation: isolate; }
.b-grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(52, 68, 77, .4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(52, 68, 77, .4) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* ---- Eyebrow mit Maßlinie ---------------------------------------------- */
.b-eyebrow, .b-eyebrow .elementor-heading-title {
  font-size: var(--b-fs-eyebrow); font-weight: 600; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase; color: var(--b-brand-700);
}
.b-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 12px; }
.b-eyebrow .elementor-heading-title::before {
  content: ""; width: 24px; height: 1px; background: currentColor; flex: none;
}
.b-dark .b-eyebrow, .b-dark .b-eyebrow .elementor-heading-title { color: var(--b-brand); }

/* ---- Kennzahlen -------------------------------------------------------- */
.b-num, .b-num .elementor-counter-number-wrapper {
  font-variant-numeric: tabular-nums; font-weight: 200; letter-spacing: -.02em;
}

/* ---- Textlink mit zeichnendem Unterstrich ------------------------------ */
.b-link-draw a, a.b-link-draw {
  color: var(--b-brand-700); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  padding-bottom: 4px;
  transition: background-size var(--b-dur-base) var(--b-ease-out);
}
.b-link-draw a:hover, a.b-link-draw:hover { background-size: 100% 1px; }
.b-dark .b-link-draw a, .b-dark a.b-link-draw { color: var(--b-brand); }

/* ---- Buttons: Pfeil-Bewegung (Farben kommen aus Elementor-Global) ------ */
.elementor-button .elementor-button-icon { transition: transform var(--b-dur-fast) var(--b-ease-out); }
.elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ---- Karten ------------------------------------------------------------ */
.b-card {
  position: relative; border: var(--b-line); border-radius: var(--b-radius);
  background: var(--b-white);
  transition: transform var(--b-dur-base) var(--b-ease-out), border-color var(--b-dur-base);
}
.b-card::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--b-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--b-dur-slow) var(--b-ease-out);
}
@media (hover: hover) {
  .b-card:hover { transform: translateY(-4px); border-color: var(--b-brand); }
  .b-card:hover::after { transform: scaleX(1); }
}

/* Projektkarte: Bild-Zoom */
.b-project img { transition: transform var(--b-dur-slow) var(--b-ease-out); }
@media (hover: hover) { .b-project:hover img { transform: scale(1.04); } }
.b-project .elementor-widget-image, .b-project .elementor-widget-theme-post-featured-image { overflow: hidden; }

/* ---- Einblenden (gesteuert von belau-core.js) -------------------------- */
.b-js .b-reveal, .b-js .b-reveal-stagger > .e-con-inner > *, .b-js .b-reveal-stagger > .e-con > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--b-dur-slow) var(--b-ease-out), transform var(--b-dur-slow) var(--b-ease-out);
  transition-delay: calc(var(--b-i, 0) * var(--b-stagger));
}
.b-js .b-reveal.is-in, .b-js .b-reveal-stagger.is-in > .e-con-inner > *, .b-js .b-reveal-stagger.is-in > .e-con > * {
  opacity: 1; transform: none;
}
/* Im Elementor-Editor immer sichtbar */
.elementor-editor-active .b-reveal, .elementor-editor-active .b-reveal-stagger * { opacity: 1 !important; transform: none !important; }

/* ---- Header-Zustände (Klasse am Header-Container: b-header) ------------ */
.b-header { transition: background-color var(--b-dur-base), box-shadow var(--b-dur-base), padding var(--b-dur-base); }
.b-header.is-scrolled {
  background-color: rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--b-stone-300);
}
.b-header .b-logo-light { display: block; } .b-header .b-logo-dark { display: none; }
.b-header.is-scrolled .b-logo-light { display: none; } .b-header.is-scrolled .b-logo-dark { display: block; }

/* ---- Mobile Kontaktleiste (Container mit Klasse b-mobilebar) ----------- */
.b-mobilebar { display: none; }
@media (max-width: 767px) {
  .b-mobilebar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--b-ink-900);
    transform: translateY(110%);
    transition: transform var(--b-dur-base) var(--b-ease-out);
  }
  .b-mobilebar.is-visible { transform: none; }
}

/* ---- Reduzierte Bewegung ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .b-js .b-reveal, .b-js .b-reveal-stagger * { opacity: 1 !important; transform: none !important; }
}