/* =====================================================================
   Dynamische Header-Hoehe fuer Bricks + Automatic CSS  (set & forget)
   Gehoert zusammen mit header-height-live.js (Scripts Organizer, Frontend).
   Global laden, damit es auch im Bricks-Builder greift.
   ===================================================================== */

/* 1) Live-Hoehe + Fallback.
      Der Fallback ist NICHT optional: Er haelt die Hoehe korrekt, wo das
      Script nicht laeuft (Bricks-Builder, erster Frame beim Laden).
      Ballpark genuegt - das Script macht es auf dem Frontend exakt.
      Werte grob an die reale Headerhoehe anpassen (root-font = 10px). */
:root {
  --header-height-live: 12.7rem;   /* Desktop-Fallback ~130px (real ~127px) */
  --scroll-offset-extra: 0rem;   /* optional: Extra-Luft ueber Anker-Sprungzielen */
}
@media (max-width: 767px) {
  :root { --header-height-live: 10.7rem; } /* Mobile-Fallback ~110px (real ~107px) */
}

/* 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 dein Projekt ACSS "Content Offset" ueber
      --offset nutzt (Content-Wrapper bekommt padding-top: var(--offset)).
      Vorsicht: Wenn deine 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));
}