/* =====================================================================
   Dynamische Header-Hoehe fuer Bricks + Automatic CSS  (set & forget)
   Global laden, damit es auch im Bricks-Builder greift.

   3 Schichten, eine Variable (--header-height-live):
     1) header-height-prime.js  - inline im Header-Template, misst real VOR
        dem Paint (pro Seite, banner-adaptiv) -> Frontend ohne Flash.
     2) header-height-live.js    - extern/defer, verfeinert + Resize + Heilung.
     3) dieses CSS               - koppelt ACSS-Vars an die Live-Hoehe und
        liefert den Fallback fuer den Builder / Notnetz.
   ===================================================================== */

/* 1) Live-Hoehe + Fallback.
      Der Fallback ist NICHT optional: Er haelt die Hoehe korrekt, wo das
      Script nicht laeuft (Bricks-Builder, erster Frame). Generischer
      Ballpark genuegt - der Prime macht es auf dem Frontend ohnehin exakt.
      Fuer 0px Rest-Flash die Werte grob an die reale Headerhoehe setzen
      (root-font = 10px, also 127px = 12.7rem). Den @media-Breakpoint auf
      den Punkt legen, an dem der Header die Hoehe wechselt (ACSS-"m" =
      768px ist ueblich). */
:root {
  --header-height-live: 13rem;   /* Desktop-Fallback ~130px */
  --scroll-offset-extra: 0rem;   /* optional: Extra-Luft ueber Anker-Sprungzielen */
}
@media (max-width: 767px) {
  :root { --header-height-live: 11rem; } /* Mobile-Fallback ~110px */
}

/* 2) ACSS-Variable an die Live-Hoehe koppeln.
      !important schlaegt ACSS' eigene :root-Regeln (die nutzen kein important);
      das Script (inline !important auf --header-height-live) bleibt die Quelle. */
:root {
  --header-height: var(--header-height-live) !important;
}

/* 2b) OPTIONAL: Nur aktivieren, wenn das Projekt ACSS "Content Offset" ueber
      --offset nutzt (Content-Wrapper bekommt padding-top: var(--offset)).
      Vorsicht: Wenn die Hero-Section ihr Padding bereits aus --header-height
      zieht, fuehrt das zu doppeltem Abstand. Erst testen.
:root {
  --offset: var(--header-height-live) !important;
}
*/

/* 3) Robuste, generische Anker-Offsets (zusaetzlich zu ACSS).
      Sorgt dafuer, dass #anchor-Sprungziele unter dem Header landen. */
html {
  scroll-padding-block-start: calc(var(--header-height-live) + var(--scroll-offset-extra));
}
:where([id]) {
  scroll-margin-block-start: calc(var(--header-height-live) + var(--scroll-offset-extra));
}