/* KW Biohof – Hero-Slider. */

/* === Wrapper & Bühne ==================================================== */

.biohof-hero {
	position: relative;
	margin-block: 0;
	/* Überhang der Feature-Kästen in die Bühne. Punkte und Pause-Knopf weichen
	   um denselben Betrag aus – sonst verdeckt die mittlere Karte die Leiste. */
	--biohof-hero-box-overlap: 0px;
}

.biohof-hero:has(.biohof-hero__boxes) {
	--biohof-hero-box-overlap: var(--biohof-space-xl);
}

/* Volle Fensterbreite (Breakout aus dem Inhaltscontainer). */
.biohof-hero--full {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* 100vw schließt die Scrollbar ein – horizontalen Überlauf abschneiden. */
body:has(.biohof-hero--full) {
	overflow-x: clip;
}

/* Breakout korrigiert um Sidebar-Versatz (sonst ragt der Hero rechts raus). */
@media (min-width: 60em) {
	body:has(.biohof-nav) .biohof-hero--full {
		width: calc(100vw - var(--biohof-nav-width));
		margin-inline: calc(50% - 50vw + var(--biohof-nav-width) / 2);
	}
}

.biohof-hero__stage {
	position: relative;
	height: var(--biohof-hero-height, 70svh);
	min-height: var(--biohof-hero-min-height, 420px);
	overflow: clip;
	isolation: isolate;
}

/* === Slides (gestapelt, Crossfade) ====================================== */

.biohof-hero__slides {
	position: absolute;
	inset: 0;
}

.biohof-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity var(--biohof-hero-crossfade, 800ms) var(--biohof-ease);
}

.biohof-hero__slide.is-active {
	opacity: 1;
}

/* Spezifität (0,2,0) gegen Elementors .elementor-widget img { height:auto }. */
.biohof-hero .biohof-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--biohof-hero-object-position, center center);
	/* Ken Burns dauerhaft definiert, aber angehalten – nur der aktive Slide
	   läuft. Ausblendende Bilder frieren an ihrem Stand ein (kein sichtbarer
	   Rückwärts-Zoom in der Blende); Neustart je Aktivierung macht hero.js. */
	animation: biohof-hero-kenburns var(--biohof-hero-kenburns-duration, 7s) linear forwards;
	animation-play-state: paused;
}

/* Ken Burns – vier abwechselnde Ursprungspunkte für lebendige Bewegung. */
.biohof-hero__slide:nth-child(4n + 1) .biohof-hero__image { transform-origin: 30% 60%; }
.biohof-hero__slide:nth-child(4n + 2) .biohof-hero__image { transform-origin: 70% 40%; }
.biohof-hero__slide:nth-child(4n + 3) .biohof-hero__image { transform-origin: 50% 30%; }
.biohof-hero__slide:nth-child(4n + 4) .biohof-hero__image { transform-origin: 75% 70%; }

.biohof-hero__slide.is-active .biohof-hero__image {
	animation-play-state: running;
}

@keyframes biohof-hero-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.07); }
}

/* Pause friert auch den Ken-Burns-Zoom ein – nicht nur den Fortschrittsbalken. */
.biohof-hero[data-biohof-hero-paused] .biohof-hero__slide.is-active .biohof-hero__image {
	animation-play-state: paused;
}

/* === Abdunklung ========================================================= */

.biohof-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 25%, var(--biohof-hero-overlay-color));
	opacity: var(--biohof-hero-overlay-opacity, 0.45);
}

/* === Inhalts-Overlay (Eyebrow, Titel, Untertitel, CTA) ================= */

.biohof-hero__content {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-sm);
	max-width: min(40rem, calc(100% - 2 * var(--biohof-space-lg)));
	padding: var(--biohof-space-md);
	overflow-wrap: break-word;
}

/* CTA braucht Zeiger-Ereignisse trotz dekorativem Overlay-Kontext. */
.biohof-hero__content a {
	pointer-events: auto;
}

/* Vertikale Lage */
.biohof-hero__content--top-left,
.biohof-hero__content--top-center,
.biohof-hero__content--top-right { top: var(--biohof-space-lg); }

.biohof-hero__content--center-left,
.biohof-hero__content--center,
.biohof-hero__content--center-right { top: 50%; translate: 0 -50%; }

.biohof-hero__content--bottom-left,
.biohof-hero__content--bottom-center,
.biohof-hero__content--bottom-right { bottom: var(--biohof-space-xl); }

/* Horizontale Lage */
.biohof-hero__content--top-left,
.biohof-hero__content--center-left,
.biohof-hero__content--bottom-left {
	inset-inline-start: var(--biohof-space-lg);
	align-items: flex-start;
	text-align: start;
}

.biohof-hero__content--top-center,
.biohof-hero__content--center,
.biohof-hero__content--bottom-center {
	inset-inline-start: 50%;
	translate: -50% 0;
	align-items: center;
	text-align: center;
}

.biohof-hero__content--center {
	translate: -50% -50%;
}

.biohof-hero__content--top-right,
.biohof-hero__content--center-right,
.biohof-hero__content--bottom-right {
	inset-inline-end: var(--biohof-space-lg);
	align-items: flex-end;
	text-align: end;
}

/* Eyebrow-Maß identisch zur geteilten Überschrift (heading.css): fs-300 / 0.18em. */
.biohof-hero__eyebrow {
	color: var(--biohof-hero-eyebrow-color);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-semibold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-shadow:
		0 1px 2px color-mix(in srgb, black 80%, transparent),
		0 2px 14px color-mix(in srgb, black 55%, transparent);
}

/* paint-order: Stroke unter der Füllung, frisst keine Innenfläche. */
.biohof-hero__title {
	margin: 0;
	color: var(--biohof-hero-title-color);
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-800);
	font-weight: var(--biohof-weight-bold);
	line-height: var(--biohof-line-tight);
	text-shadow:
		0 1px 2px color-mix(in srgb, black 85%, transparent),
		0 2px 10px color-mix(in srgb, black 70%, transparent),
		0 0 40px color-mix(in srgb, black 50%, transparent);
	-webkit-text-stroke: 1px color-mix(in srgb, black 45%, transparent);
	paint-order: stroke fill;
}

.biohof-hero__subtitle {
	margin: 0;
	color: var(--biohof-hero-subtitle-color);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-500);
	font-weight: var(--biohof-weight-regular);
	line-height: var(--biohof-line-snug);
	text-shadow:
		0 1px 2px color-mix(in srgb, black 85%, transparent),
		0 2px 14px color-mix(in srgb, black 60%, transparent);
}

/* === CTA-Button (Marken-Farben via Token-Fallback) ===================== */

.biohof-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--biohof-space-2xs);
	margin-block-start: var(--biohof-space-xs);
	min-height: 44px;
	padding: 0.75rem 1.75rem;
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-hero-cta-bg, var(--biohof-color-primary));
	color: var(--biohof-hero-cta-text, var(--biohof-color-on-primary));
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	font-weight: var(--biohof-weight-semibold);
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: var(--biohof-shadow-md);
	transition: background-color var(--biohof-duration) var(--biohof-ease), transform var(--biohof-duration) var(--biohof-ease);
}

/* Textfarbe in ALLEN Zuständen halten: `a.…` + Wrapper ergibt (0,3,1) und
   schlägt das Theme-/Elementor-Kit `a:hover` (0,2,1) – sonst wird der Text
   beim Überfahren grün-auf-grün. Ohne !important. */
.biohof-hero a.biohof-hero__cta,
.biohof-hero a.biohof-hero__cta:hover,
.biohof-hero a.biohof-hero__cta:focus,
.biohof-hero a.biohof-hero__cta:focus-visible,
.biohof-hero a.biohof-hero__cta:active {
	color: var(--biohof-hero-cta-text, var(--biohof-color-on-primary));
}

/* Anruf-Knopf im Schild: Schild-Textfarbe in ALLEN Zuständen halten (sonst
   überschreibt die Kit-Pink-Regel den Link). Gleiches Muster wie der CTA. */
.biohof-hero a.biohof-hero__badge-tel,
.biohof-hero a.biohof-hero__badge-tel:hover,
.biohof-hero a.biohof-hero__badge-tel:focus,
.biohof-hero a.biohof-hero__badge-tel:focus-visible,
.biohof-hero a.biohof-hero__badge-tel:active {
	color: var(--biohof-hero-badge-text);
	text-decoration: none;
}

@media (hover: hover) {
	.biohof-hero a.biohof-hero__cta:hover {
		background: var(--biohof-hero-cta-hover-bg, var(--biohof-color-primary-hover));
		transform: translateY(-2px);
	}
}

.biohof-hero .biohof-hero__cta:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 3px;
}

.biohof-hero .biohof-hero__cta:active {
	transform: translateY(0);
}

/* === Gestaffelte Einblendung des aktiven Inhalts ======================= */

/* Start NACH der Bildblende: Slide- und Text-Deckkraft multiplizieren sich,
   mitfadender Text wirkt sonst bis zum Crossfade-Ende dunkler. */
.biohof-hero__slide.is-active .biohof-hero__eyebrow { animation: biohof-hero-rise 600ms var(--biohof-ease) var(--biohof-hero-crossfade, 800ms) both; }
.biohof-hero__slide.is-active .biohof-hero__title { animation: biohof-hero-rise 600ms var(--biohof-ease) calc(var(--biohof-hero-crossfade, 800ms) + 150ms) both; }
.biohof-hero__slide.is-active .biohof-hero__subtitle { animation: biohof-hero-rise 600ms var(--biohof-ease) calc(var(--biohof-hero-crossfade, 800ms) + 300ms) both; }
.biohof-hero__slide.is-active .biohof-hero__cta { animation: biohof-hero-rise 600ms var(--biohof-ease) calc(var(--biohof-hero-crossfade, 800ms) + 450ms) both; }

@keyframes biohof-hero-rise {
	from { opacity: 0; transform: translateY(1.25rem); }
	to { opacity: 1; transform: translateY(0); }
}

/* === Öffnungszeiten-Schild ============================================ */

.biohof-hero__badge {
	position: absolute;
	inset-block-start: clamp(0.75rem, 2vw, 1.25rem);
	inset-inline-end: clamp(0.75rem, 3vw, 1.75rem);
	z-index: 5;
	/* Auf den Inhalt zusammenziehen (keine tote Fläche rechts), nach oben gedeckelt. */
	width: fit-content;
	max-width: min(20rem, calc(100% - 2 * clamp(0.75rem, 3vw, 1.75rem)));
	padding: clamp(0.7rem, 1.3vw, 1rem) clamp(0.85rem, 1.5vw, 1.2rem);

	border-radius: var(--biohof-radius-md);
	border: 1px solid color-mix(in oklch, var(--biohof-hero-badge-text) 22%, transparent);
	border-block-start: 3px solid var(--biohof-hero-badge-accent, var(--biohof-color-primary));
	background: var(--biohof-hero-badge-bg);
	backdrop-filter: var(--biohof-hero-badge-blur, blur(14px));
	-webkit-backdrop-filter: var(--biohof-hero-badge-blur, blur(14px));
	color: var(--biohof-hero-badge-text);
	box-shadow: var(--biohof-shadow-lg);
	overflow: hidden;
}

.biohof-hero--full .biohof-hero__badge {
	inset-inline-end: clamp(0.75rem, 4vw, 2.5rem);
}

.biohof-hero__badge-title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 clamp(0.4rem, 0.8vw, 0.55rem);
	font-family: var(--biohof-font-heading);
	font-size: clamp(0.95rem, 1.1vw, 1.15rem);
	font-weight: var(--biohof-weight-semibold);
	letter-spacing: 0.01em;
}

/* Icon folgt der Akzentfarbe, wenn gesetzt – sonst Schild-Textfarbe (weiß),
   damit es auf dem dunklen Standard-Glas nicht verschwindet. */
.biohof-hero__badge-ico {
	display: inline-flex;
	width: 1.15em;
	height: 1.15em;
	color: var(--biohof-hero-badge-accent, var(--biohof-hero-badge-text));
}

.biohof-hero__badge-ico svg {
	width: 100%;
	height: 100%;
}

/* Zwei-Spalten-Tabelle: Tag (Auto-Breite) + Zeit, fester Abstand statt
   space-between – Zeiten fluchten in einer Spalte, Tag↔Zeit bleiben gekoppelt.
   Reihen sind display:contents, damit dt/dd direkt im Listen-Grid liegen. */
.biohof-hero__badge-list {
	margin: 0;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	column-gap: var(--biohof-space-md);
	row-gap: clamp(2px, 0.4vw, 5px);
	font-size: clamp(0.85rem, 1vw, 1rem);
	line-height: 1.4;
}

.biohof-hero__badge-row {
	display: contents;
}

.biohof-hero__badge-days {
	margin: 0;
	font-weight: var(--biohof-weight-semibold);
	letter-spacing: 0.02em;
	/* Tageslabel nie umbrechen (sonst „Mo-/Fr" auf schmalem Schild). */
	white-space: nowrap;
}

/* Volle Deckkraft – AA hängt vom Foto darunter ab, daher kein opacity-Dimmen
   (siehe HeroContrastTest). Geschlossene Tage werden kursiv abgesetzt, nicht
   ausgegraut. */
.biohof-hero__badge-time {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.biohof-hero__badge-row.is-closed .biohof-hero__badge-time {
	font-style: italic;
}

/* === Schild: Kurzhinweis-Modus ========================================= */

/* Inhalt mittig (nur Kurzhinweis – die Wochenübersicht bleibt als Tag/Zeit-
   Raster linksbündig, sonst zerfällt die Zeitspalte). */
.biohof-hero__badge--note .biohof-hero__badge-title {
	justify-content: center;
}

.biohof-hero__badge-note {
	margin: 0;
	font-size: clamp(0.9rem, 1.05vw, 1.05rem);
	line-height: 1.45;
	text-align: center;
}

/* Kontaktblock: feine Trennlinie darüber, Hinweis + Anruf-Knopf zentriert.
   Linienfarbe = Schild-Textfarbe gedämpft (color-mix, kein Hex). */
.biohof-hero__badge-contact {
	margin-block-start: clamp(0.5rem, 1vw, 0.7rem);
	padding-block-start: clamp(0.5rem, 1vw, 0.7rem);
	border-block-start: 1px solid color-mix(in oklch, var(--biohof-hero-badge-text) 22%, transparent);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.4rem, 0.8vw, 0.55rem);
	text-align: center;
}

.biohof-hero__badge-call {
	margin: 0;
	font-size: clamp(0.8rem, 0.95vw, 0.95rem);
	line-height: 1.4;
}

/* Anruf-Knopf: vertieftes Glasfeld (Glas-bg ein ZWEITES Mal → dunkler statt
   heller, damit weißer Text klar über AA bleibt) mit hellem Rand; Hover hebt
   den Rand auf Akzentgrün. Nummer mit Ziffern-gleichlauf, gut fürs Auge. */
.biohof-hero__badge-tel {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-block-size: 44px;
	padding: 0.4rem 0.9rem;
	box-sizing: border-box;
	border-radius: var(--biohof-radius-pill);
	border: 1px solid color-mix(in oklch, var(--biohof-hero-badge-text) 38%, transparent);
	background: var(--biohof-hero-badge-bg);
	font-weight: var(--biohof-weight-semibold);
	font-size: clamp(0.9rem, 1.05vw, 1.05rem);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	/* Telefonnummer nie mitten im Ziffernblock umbrechen. */
	white-space: nowrap;
	transition: border-color var(--biohof-duration) var(--biohof-ease), transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-hero__badge-tel-ico {
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	color: var(--biohof-hero-badge-accent, var(--biohof-hero-badge-text));
}

.biohof-hero__badge-tel-ico svg {
	width: 100%;
	height: 100%;
}

@media (hover: hover) {
	.biohof-hero a.biohof-hero__badge-tel:hover {
		border-color: var(--biohof-hero-badge-accent, var(--biohof-color-primary));
		transform: translateY(-1px);
	}
}

.biohof-hero .biohof-hero__badge-tel:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.biohof-hero__badge-tel {
		transition: none;
	}

	.biohof-hero a.biohof-hero__badge-tel:hover {
		transform: none;
	}
}

/* === Navigationspunkte (Progress-Balken) =============================== */

/* Fallbacks = Control-Defaults: Bedienelemente bleiben sichtbar, falls Elementors post-CSS fehlt (404). */

/* Schild-Hintergrund wie beim Pause-Knopf: hebt die Punkte auch über hellem
   Foto ab (WCAG 1.4.11). Lücke ≥ 12px hält die 44px-Klickflächen getrennt. */
.biohof-hero__dots {
	position: absolute;
	inset-block-end: calc(var(--biohof-hero-box-overlap) + var(--biohof-space-md));
	inset-inline-start: 50%;
	translate: -50% 0;
	z-index: 3;
	display: flex;
	gap: var(--biohof-space-sm);
	padding: var(--biohof-space-2xs) var(--biohof-space-xs);
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-hero-shade, rgba(0, 0, 0, 0.5));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.biohof-hero__dot {
	position: relative;
	width: 2rem;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-hero-dot-color, rgba(255, 255, 255, 0.8));
	cursor: pointer;
	overflow: hidden;
	transition: background-color var(--biohof-duration) var(--biohof-ease);
}

/* 44×44px-Touch-Ziel über unsichtbare Hüllfläche (Balken 32×4px). */
.biohof-hero__dot::before {
	content: "";
	position: absolute;
	inset: -20px -6px;
}

/* Fortschritts-Füllung auf dem aktiven Balken. */
.biohof-hero__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--biohof-hero-dot-active, #ffffff);
	transform-origin: left;
	animation: biohof-hero-progress var(--biohof-hero-autoplay-duration, 6000ms) linear forwards;
}

.biohof-hero[data-biohof-hero-paused] .biohof-hero__dot.is-active::after {
	animation-play-state: paused;
}

.biohof-hero__dot:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 3px;
}

@keyframes biohof-hero-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* === Pause/Play-Button ================================================= */

/* (0,3,0): tooltip.css setzt .biohof .biohof-tooltip auf position: relative
   (0,2,0) – ohne diese Gewichtung fällt der Knopf in den Fluss (oben links). */
.biohof.biohof-hero .biohof-hero__pause-wrap {
	position: absolute;
	inset-block-end: calc(var(--biohof-hero-box-overlap) + var(--biohof-space-md));
	inset-inline-end: var(--biohof-space-md);
	z-index: 4;
}

.biohof-hero .biohof-hero__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--biohof-hero-dot-active, #ffffff);
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-hero-shade, rgba(0, 0, 0, 0.5));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--biohof-hero-dot-active, #ffffff);
	cursor: pointer;
	transition: transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-hero .biohof-hero__pause:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 3px;
}

/* Pause-Symbol: zwei Balken. */
.biohof-hero__pause-icon {
	display: flex;
	gap: 3px;
}

.biohof-hero__pause-icon::before,
.biohof-hero__pause-icon::after {
	content: "";
	width: 4px;
	height: 14px;
	border-radius: 1px;
	background: currentColor;
}

/* Play-Symbol: Dreieck (im pausierten Zustand). */
.biohof-hero__pause[aria-pressed="true"] .biohof-hero__pause-icon {
	gap: 0;
}

.biohof-hero__pause[aria-pressed="true"] .biohof-hero__pause-icon::before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 13px;
	border-color: transparent transparent transparent currentColor;
	background: transparent;
	border-radius: 0;
}

.biohof-hero__pause[aria-pressed="true"] .biohof-hero__pause-icon::after {
	display: none;
}

/* Die Button-Defense (elementor-defense.css) setzt bei nackten Buttons in den
   Interaktionszuständen color: inherit + background transparent (0,3,1) –
   Symbol (currentColor) und Schild hier explizit halten. (0,4,0) gewinnt. */
.biohof.biohof-hero .biohof-hero__pause:is(:hover, :focus, :focus-visible, :active) {
	background: var(--biohof-hero-shade, rgba(0, 0, 0, 0.5));
	color: var(--biohof-hero-dot-active, #ffffff);
}

.biohof.biohof-hero .biohof-hero__dot:is(:hover, :focus, :focus-visible, :active) {
	background: var(--biohof-hero-dot-active, #ffffff);
}

@media (hover: hover) {
	.biohof-hero .biohof-hero__pause:hover {
		transform: scale(1.06);
	}
}

.biohof-hero .biohof-hero__pause:active {
	transform: scale(0.94);
}

/* === Feature-Kästen ==================================================== */

.biohof-hero__boxes {
	--biohof-hero-box-pad: var(--biohof-space-md);
	position: relative;
	z-index: 6;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--biohof-space-sm);
	width: min(100% - 2 * var(--biohof-space-md), var(--biohof-content-max));
	margin-inline: auto;
	margin-block-start: calc(-1 * var(--biohof-hero-box-overlap));
	padding-inline: var(--biohof-space-md);
}

.biohof-hero__box {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* „start | center | end" gilt für beide Achsen gleichermaßen. */
	align-items: var(--biohof-hero-box-align, center);
	text-align: var(--biohof-hero-box-align, center);
	gap: var(--biohof-space-xs);
	padding: var(--biohof-hero-box-pad);
	border-radius: var(--biohof-radius-lg);
	border: 1px solid var(--biohof-hero-box-border);
	border-block-start: 3px solid var(--biohof-hero-box-link, var(--biohof-color-primary));
	background: var(--biohof-hero-box-bg);
	color: var(--biohof-hero-box-text);
	box-shadow: var(--biohof-shadow-lg);
	text-decoration: none;
}

/* Glas-Variante: getönte Transparenz + Weichzeichnung. */
.biohof-hero__boxes.is-glass .biohof-hero__box {
	background: color-mix(in oklch, var(--biohof-hero-box-bg) calc(var(--biohof-hero-glass-opacity, 0.55) * 100%), transparent);
	backdrop-filter: var(--biohof-hero-glass-blur, blur(14px));
	-webkit-backdrop-filter: var(--biohof-hero-glass-blur, blur(14px));
}

.biohof-hero__boxes.is-glass .biohof-hero__box::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, color-mix(in srgb, white 10%, transparent) 0%, color-mix(in srgb, white 2%, transparent) 35%, transparent 60%);
	pointer-events: none;
}

.biohof-hero__box > * {
	position: relative;
}

.biohof-hero__box-ico {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--biohof-hero-box-icon, var(--biohof-color-accent));
}

.biohof-hero__box-ico svg {
	width: 100%;
	height: 100%;
}

.biohof-hero__box-title {
	margin: 0;
	color: var(--biohof-hero-box-text);
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-500);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-tight);
}

.biohof-hero__box-text {
	margin: 0;
	/* Eigene Farbe, damit die Beschreibung beim Hover über die Karte nicht die
	   geerbte Link-Farbe (Pink-Defense) annimmt. Volle Deckkraft – opacity 0.9 lag
	   über hellem Foto bei nur 4,55:1 (siehe HeroContrastTest), volldeckend 5,16:1. */
	color: var(--biohof-hero-box-text);
	font-size: var(--biohof-fs-300);
	line-height: var(--biohof-line-base);
}

/* Link-Label: Standard = Box-Textfarbe (weiß, lesbar auf dem dunklen Glas).
   Akzentgrün als Text fiele auf 2,22:1 und verstößt gegen die Akzent-schweigt-
   Regel; das Grün bleibt auf Oberkante + Hover-Ring (Deko). Control überstimmt. */
.biohof-hero__box-link {
	margin-block-start: auto;
	padding-block-start: var(--biohof-space-2xs);
	color: var(--biohof-hero-box-link, var(--biohof-hero-box-text));
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Verlinkte Karte: Hover/Aktiv-Feedback + Tastatur-Fokus. Spezifität (0,3,0)
   schlägt die Pink-Defense (0,2,1) sicher, ohne !important. */
.biohof-hero .biohof-hero__box--link {
	transition: transform var(--biohof-duration) var(--biohof-ease), box-shadow var(--biohof-duration) var(--biohof-ease);
}

@media (hover: hover) {
	.biohof-hero .biohof-hero__box--link:hover {
		transform: translateY(-3px);
		box-shadow: var(--biohof-shadow-lg), 0 0 0 1px color-mix(in oklch, var(--biohof-hero-box-link, var(--biohof-color-accent)) 50%, transparent);
	}

	/* Feedback am Link selbst (Unterstreichung) – Farbe bleibt das lesbare Weiß
	   (Pink-Defense abgewehrt), nicht das kontrastschwache Akzentgrün. */
	.biohof-hero .biohof-hero__box--link:hover .biohof-hero__box-link {
		color: var(--biohof-hero-box-link, var(--biohof-hero-box-text));
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

.biohof-hero .biohof-hero__box--link:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 3px;
}

.biohof-hero .biohof-hero__box--link:active {
	transform: translateY(0);
}

/* === Kästen-Einblendung (rein CSS, ab Seitenladung) ===================== */

/* Der Hero ist immer sofort sichtbar – ein Scroll-Beobachter würde nur ruckeln
   (sichtbar → verstecken → neu einblenden). Bei „Keine" fehlt das Attribut. */
.biohof-hero__boxes[data-biohof-hero-animation] .biohof-hero__box {
	animation: biohof-hero-rise 600ms var(--biohof-ease) both;
}

.biohof-hero__boxes[data-biohof-hero-animation="fade-in"] .biohof-hero__box {
	animation-name: biohof-hero-fade;
}

.biohof-hero__boxes[data-biohof-hero-animation="slide-left"] .biohof-hero__box {
	animation-name: biohof-hero-slide;
}

.biohof-hero__boxes[data-biohof-hero-animation] .biohof-hero__box:nth-child(2) { animation-delay: 120ms; }
.biohof-hero__boxes[data-biohof-hero-animation] .biohof-hero__box:nth-child(3) { animation-delay: 240ms; }
.biohof-hero__boxes[data-biohof-hero-animation] .biohof-hero__box:nth-child(4) { animation-delay: 360ms; }
.biohof-hero__boxes[data-biohof-hero-animation] .biohof-hero__box:nth-child(5) { animation-delay: 480ms; }

@keyframes biohof-hero-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes biohof-hero-slide {
	from { opacity: 0; transform: translateX(-1.5rem); }
	to { opacity: 1; transform: translateX(0); }
}

/* === Editor-Platzhalter ================================================ */

.biohof-hero--empty {
	display: grid;
	place-items: center;
	min-height: 240px;
	padding: var(--biohof-space-xl);
	border: 2px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	background: var(--biohof-color-surface-soft);
	text-align: center;
}

.biohof-hero__placeholder {
	display: grid;
	gap: var(--biohof-space-xs);
	max-width: 32rem;
}

.biohof-hero__placeholder-title {
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-500);
	color: var(--biohof-color-text-strong);
}

.biohof-hero__placeholder-desc {
	font-size: var(--biohof-fs-400);
	color: var(--biohof-color-text);
}

/* === Responsive (Mobile-First → Tablet/Desktop) ======================== */

/* Sehr schmal: Boxen-Innenraum straffen, weniger Überhang. */
@media (max-width: 30em) {
	.biohof-hero:has(.biohof-hero__boxes) {
		--biohof-hero-box-overlap: var(--biohof-space-lg);
	}

	.biohof-hero__boxes {
		--biohof-hero-box-pad: var(--biohof-space-sm);
		gap: var(--biohof-space-xs);
	}
}

/* Kompakte Wegweiser-Zeilen statt Karten-Wand (Mockup-Abnahme 2026-06-04):
   Symbol links im Medaillon, Text linksbündig, Stapel rund 30 % flacher. */
@media (max-width: 36em) {
	.biohof-hero__box {
		align-items: start;
		text-align: start;
	}

	/* Zweispaltig nur mit Symbol – sonst bliebe eine leere Einrück-Spalte. */
	.biohof-hero__box:has(.biohof-hero__box-ico) {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: var(--biohof-space-sm);
		row-gap: var(--biohof-space-2xs);
	}

	.biohof-hero__box-ico {
		grid-row: 1 / span 3;
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
		border-radius: var(--biohof-radius-pill);
		background: color-mix(in srgb, var(--biohof-hero-box-icon, var(--biohof-color-accent)) 16%, transparent);
	}

	.biohof-hero__box-ico svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	/* Titel/Text brauchen ZWEI Skalenstufen Abstand (Hierarchie) – Nachbar-
	   stufen der 1,2er-Skala wirken gleich groß. Paar hier: fs-600 / fs-400. */
	.biohof-hero__box-title {
		font-size: var(--biohof-fs-600);
	}

	/* Kurztext auf zwei Zeilen begrenzen – hält die Zeilen ruhig und flach.
	   fs-400 statt fs-300: 12,6px wären auf dem Glas kaum lesbar (BFSG). */
	.biohof-hero__box-text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: var(--biohof-fs-400);
	}

	.biohof-hero__box-link {
		display: inline-flex;
		align-items: center;
		gap: var(--biohof-space-2xs);
		margin-block-start: 0;
	}

	/* Pfeil als Klick-Signal; leerer Alternativtext hält ihn aus der Vorlesung. */
	.biohof-hero__box-link::after {
		content: "→" / "";
		color: var(--biohof-hero-box-icon, var(--biohof-color-accent));
	}
}

@media (min-width: 36em) {
	.biohof-hero__boxes[data-count="2"],
	.biohof-hero__boxes[data-count="4"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62em) {
	.biohof-hero:has(.biohof-hero__boxes) {
		--biohof-hero-box-overlap: var(--biohof-space-2xl);
	}

	.biohof-hero__boxes {
		gap: var(--biohof-space-md);
	}

	.biohof-hero__boxes[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
	.biohof-hero__boxes[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
	.biohof-hero__boxes[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
	.biohof-hero__boxes[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
}

/* === Dark Mode ========================================================= */

@media (prefers-color-scheme: dark) {
	.biohof-hero__overlay {
		opacity: calc(var(--biohof-hero-overlay-opacity, 0.45) + 0.1);
	}
}

/* === Reduced Motion ==================================================== */

@media (prefers-reduced-motion: reduce) {
	.biohof-hero__slide {
		transition: none;
	}

	.biohof-hero .biohof-hero__image,
	.biohof-hero__slide.is-active .biohof-hero__image {
		animation: none;
		transform: none;
	}

	.biohof-hero__slide.is-active :where(.biohof-hero__eyebrow, .biohof-hero__title, .biohof-hero__subtitle, .biohof-hero__cta) {
		animation: none;
	}

	/* Ohne Bewegung kein Autoplay – Pause-Button ist gegenstandslos. */
	.biohof-hero__pause-wrap {
		display: none;
	}

	.biohof-hero__dot.is-active::after {
		animation: none;
		transform: scaleX(1);
	}

	.biohof-hero__boxes[data-biohof-hero-animation] .biohof-hero__box {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.biohof-hero .biohof-hero__cta,
	.biohof-hero .biohof-hero__box--link,
	.biohof-hero .biohof-hero__pause {
		transition: none;
	}
}

/* === Forced Colors (Windows-Kontrastmodus) ============================= */

@media (forced-colors: active) {
	.biohof-hero__title,
	.biohof-hero__subtitle,
	.biohof-hero__eyebrow {
		-webkit-text-stroke: 0;
		text-shadow: none;
		color: CanvasText;
	}

	.biohof-hero__box,
	.biohof-hero__badge {
		background: Canvas;
		color: CanvasText;
		border: 1px solid CanvasText;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.biohof-hero__box-ico,
	.biohof-hero__badge-ico {
		color: CanvasText;
	}

	.biohof-hero__badge-contact {
		border-block-start-color: CanvasText;
	}

	.biohof-hero a.biohof-hero__badge-tel {
		color: ButtonText;
		border-color: ButtonText;
		background: ButtonFace;
	}

	.biohof-hero__badge-tel-ico {
		color: ButtonText;
	}

	.biohof-hero__cta {
		border: 1px solid ButtonText;
	}

	.biohof-hero__dot {
		background: ButtonText;
	}

	.biohof-hero__dot.is-active::after {
		background: Highlight;
	}

	.biohof-hero :where(.biohof-hero__cta, .biohof-hero__box--link, .biohof-hero__dot, .biohof-hero__pause):focus-visible {
		outline: 3px solid Highlight;
	}
}