/* Feinschliff der Startseite, der sich nicht über Design-Token oder
   Blockattribute abbilden lässt. */

/* Zertifikatsband: Der Mobil-Entwurf zeigt die vier Siegel nebeneinander,
   aber ohne Beschriftung — bei knapp 70 px Spaltenbreite bricht sie sonst
   auf drei Zeilen. Die Namen bleiben in den Alt-Texten der Bilder erhalten
   und damit für Screenreader lesbar. */
@media (max-width: 781.98px) {
	.hoerster-siegel-text {
		display: none;
	}
}

/* --- Kopfzeile als schwebender Balken --- */
/* Sie sitzt auf dem Hero, nicht darüber: fixiert, damit sie keinen Platz im
   Fluss belegt und das Bild bis an die Oberkante reicht. */
header.site-header {
	left: 0;
	position: fixed;
	right: 0;
	top: 1rem;
	z-index: 100;
}

/* Eingeloggt liegt die WordPress-Adminleiste fix über allem — der Balken
   rutscht sonst darunter. Für Besucher ändert das nichts. */
body.admin-bar header.site-header {
	top: calc(1rem + 32px);
}

@media (max-width: 782px) {
	body.admin-bar header.site-header {
		top: calc(1rem + 46px);
	}
}

/* Ohne Kopfzeile im Fluss beginnt der Hero bei null — bei allen anderen
   Seiten fehlt sonst der Platz für den Balken. */
body:not(.home) .wp-site-blocks > main {
	padding-top: 6rem;
}

/* Sprungmarken der Navigation dürfen nicht unter dem Balken landen */
section[id] {
	scroll-margin-top: 7rem;
}

/* Wer weniger Bewegung möchte, sieht das Standbild statt der Schleife */
@media (prefers-reduced-motion: reduce) {
	.hoerster-hero .wp-block-cover__video-background {
		display: none;
	}

	.hoerster-hero {
		background-image: url("../../uploads/2026/09/hero-bienenstand.jpg");
		background-position: 50% 55%;
		background-size: cover;
	}
}

/* --- Abschnitte stossen aneinander --- */
/* Block-Themes setzen zwischen Geschwisterbloecken einen Standardabstand.
   Bei vollbreiten Farbflaechen entstehen dadurch helle Streifen dazwischen —
   im Entwurf laufen die Flaechen ohne Fuge ineinander. */
.wp-site-blocks .entry-content > * {
	margin-block-end: 0;
	margin-block-start: 0;
}

/* --- Hero --- */
/* Siegel und Beizeile stehen 64 px ueber der Unterkante. Die Abstandsskala
   trifft diesen Wert an keiner Stelle, deshalb hier direkt am Bauteil. */
.hoerster-hero {
	padding-bottom: 4rem;
}

/* --- Abschnitte blenden beim Scrollen sanft ein --- */
/* Ohne Skript: die Animation haengt an der Sichtbarkeit im Ansichtsfenster.
   Browser ohne Unterstuetzung zeigen die Abschnitte einfach sofort — und wer
   weniger Bewegung eingestellt hat, bekommt gar keine. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.wp-site-blocks .entry-content > *:not(:first-child) {
			animation: hoerster-einblenden linear both;
			animation-range: entry 0% entry 35%;
			animation-timeline: view();
		}
	}
}

/* Nur Deckkraft, keine Verschiebung: die Abschnitte sind vollbreite
   Farbflaechen — ein Versatz risse zwischen ihnen sichtbare Fugen auf. */
@keyframes hoerster-einblenden {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Auf schmalen Bildschirmen ist die Wortmarke zu breit — Logo und Burger
   rutschen sonst untereinander und der Balken wird doppelt so hoch. */
@media (max-width: 30rem) {
	header.site-header .wp-block-group {
		flex-wrap: nowrap;
	}

	header.site-header .wp-block-site-logo img {
		width: 150px;
	}
}

/* Bildbaender laufen randlos durch — der Radius aus den Global Styles
   gilt fuer Karten, nicht fuer vollbreite Baender. */
.hoerster-bildband {
	border-radius: 0;
}

/* Die Bildunterschrift steht auf der Inhaltsbreite und fluchtet damit mit
   dem Text der uebrigen Abschnitte — der Cover-Block gibt seine
   Inhaltsbreite nicht von sich aus an den Innenbereich weiter. */
/* Statt den Innenbereich zu zentrieren — das verhindern die Kernregeln —
   rechnet der seitliche Abstand des Bandes die Inhaltskante aus. Auf
   schmalen Schirmen greift der gewoehnliche Seitenrand. */
.hoerster-bildband {
	/* 100 % waere die Breite des Inhaltsrahmens, nicht die des Fensters —
	   das Band laeuft aber vollbreit, also gegen die Fensterbreite rechnen. */
	padding-inline: max(
		var(--wp--preset--spacing--medium),
		calc((100vw - var(--wp--style--global--wide-size)) / 2)
	);
}