/*
 * Huber-Bausteine: transparente Kopfzeile (Teil 7). Gilt nur, wenn das Skript kopfzeile.js die Klasse
 * hb-kopf-ueber am <html> setzt. Kopfzeile: im Entwurf body > header[data-abschnitt], in WordPress der
 * Vorlagenteil «header». Farben kommen aus den Variablen des Designsystems; im durchsichtigen Zustand
 * werden sie in der Kopfzeile auf «Text auf dunkler Fläche» umgestellt. Ein dunkler Schleier
 * (--kopf-schleier, vom Studio so berechnet, dass Text auch über einem weissen Bild mindestens 4,5:1
 * Kontrast hat) liegt hinter der Kopfzeile.
 */
html.hb-kopf-ueber :is(body > header[data-abschnitt], .wp-site-blocks > header) {
	position: sticky;
	top: 0;
	z-index: 50;
	isolation: isolate;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Ursprüngliche Farben merken (für Teile der Kopfzeile, die nicht über dem Bild liegen, z.B. Aktionsleiste unten) */
html.hb-kopf-ueber {
	--hb-o-hintergrund: var(--farbe-hintergrund);
	--hb-o-text: var(--farbe-text);
	--hb-o-text-leise: var(--farbe-text-leise);
	--hb-o-primaer-text: var(--farbe-primaer-text);
}

/* Startbereich rutscht unter die Kopfzeile (Bild bzw. dunkle Fläche reicht bis ganz oben) */
html.hb-kopf-ueber .hb-kopf-start {
	margin-top: calc(-1 * var(--kopf-hoehe, 72px)) !important;
}

/* Durchsichtig: nicht gescrollt, Menü nicht offen */
html.hb-kopf-ueber:not(.hb-kopf-gescrollt):not(.has-modal-open) :is(body > header[data-abschnitt], .wp-site-blocks > header):not(:has([aria-expanded='true'])) {
	--farbe-hintergrund: transparent;
	--farbe-text: var(--farbe-auf-dunkel);
	--farbe-text-leise: var(--farbe-auf-dunkel);
	--farbe-primaer-text: var(--farbe-auf-dunkel);
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--farbe-auf-dunkel);
}

html.hb-kopf-ueber:not(.hb-kopf-gescrollt):not(.has-modal-open) :is(body > header[data-abschnitt], .wp-site-blocks > header):not(:has([aria-expanded='true']))::before {
	content: '';
	position: absolute;
	inset: 0 0 -48px 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--farbe-dunkel) var(--kopf-schleier, 60%), transparent) calc(100% - 48px), transparent);
}

/* Helle Fassung des Logos (erzeugt das Skript): ohne Überblendung, sonst verschwindet sie */
img.hb-logo-hell {
	mix-blend-mode: normal !important;
	filter: none !important;
}

/* Links und Menü-Knopf erben die helle Farbe (Knöpfe .btn und die Aktionsleiste bleiben, wie sie sind) */
html.hb-kopf-ueber:not(.hb-kopf-gescrollt):not(.has-modal-open) :is(body > header[data-abschnitt], .wp-site-blocks > header):not(:has([aria-expanded='true'])) :is(a, button):not(.btn):not(.btn *):not(.wp-block-button__link):not(:is(.kopf__unten, .hc-aktionsleiste, [data-sonderbaustein]) *) {
	color: var(--farbe-auf-dunkel);
}

/* Aktionsleiste unten auf dem Handy liegt nicht über dem Bild: normale Farben */
html.hb-kopf-ueber :is(body > header[data-abschnitt], .wp-site-blocks > header) :is(.kopf__unten, .hc-aktionsleiste, [data-sonderbaustein]) {
	--farbe-hintergrund: var(--hb-o-hintergrund);
	--farbe-text: var(--hb-o-text);
	--farbe-text-leise: var(--hb-o-text-leise);
	--farbe-primaer-text: var(--hb-o-primaer-text);
	color: var(--hb-o-text);
}

@media (prefers-reduced-motion: reduce) {
	html.hb-kopf-ueber :is(body > header[data-abschnitt], .wp-site-blocks > header) {
		transition: none;
	}
}