: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));
}