/*
 * KW Biohof – Footer-Widget. Marken-Footer mit Tiefe (Vorbild: KW Lobby, in
 * Biohof-Optik): organische Blattkante oben, Grün-Gradient, Akzent-Überschriften
 * mit Unterlinie, drei Spalten nebeneinander, eigene Copyright-Leiste mit rundem
 * „Nach oben"-Button. Alle Farben aus Tokens (color-mix), kein Hardcode. Mobil
 * sauber gestapelt. Vollbreite über Entkopplung des boxed Elementor-Containers.
 */

/* ── Footer-lokale Tokens (Light Mode; Kontraste gemessen) ─────────────────── */
.biohof-footer {
	--biohof-footer-bg: var(--biohof-color-primary);
	--biohof-footer-bg-deep: color-mix(in srgb, var(--biohof-color-primary) 82%, var(--biohof-color-text-strong));
	--biohof-footer-fg: var(--biohof-color-on-primary);
	--biohof-footer-fg-muted: color-mix(in srgb, var(--biohof-color-on-primary) 82%, var(--biohof-color-primary));
	--biohof-footer-border: color-mix(in srgb, var(--biohof-color-on-primary) 18%, transparent);
	/* Heller Grün-Akzent (≈ 3:1 auf der Fläche): nur Dekor + Icons, nie Text. */
	--biohof-footer-accent: color-mix(in srgb, var(--biohof-color-accent) 55%, var(--biohof-color-on-primary));
	--biohof-footer-pill-bg: color-mix(in srgb, var(--biohof-color-on-primary) 10%, transparent);
	--biohof-footer-pill-bg-hover: color-mix(in srgb, var(--biohof-color-on-primary) 20%, transparent);

	/* Geteilter Pinselstrich-Hover (core/link.css) für die Footer-Textlinks:
	   in der hellen Footer-Schrift, ohne Ruhe-Unterstrich (nur beim Hover). */
	--biohof-link-color: var(--biohof-footer-fg);
	--biohof-link-active-color: var(--biohof-footer-fg);
	--biohof-link-line-size: 0;

	color: var(--biohof-footer-fg);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
}

@media (prefers-color-scheme: dark) {
	.biohof-footer {
		--biohof-footer-bg: var(--biohof-color-surface);
		--biohof-footer-bg-deep: color-mix(in srgb, var(--biohof-color-surface) 64%, var(--biohof-color-bg));
		--biohof-footer-fg: var(--biohof-color-text-strong);
		--biohof-footer-fg-muted: var(--biohof-color-text);
		--biohof-footer-border: var(--biohof-color-border);
		--biohof-footer-accent: var(--biohof-color-primary);
		--biohof-footer-pill-bg: color-mix(in srgb, var(--biohof-color-text-strong) 8%, transparent);
		--biohof-footer-pill-bg-hover: color-mix(in srgb, var(--biohof-color-text-strong) 16%, transparent);
	}
}

/* Vollbreite: boxed Elementor-Container der Footer-Location entkoppeln. */
.elementor-location-footer:has(.biohof-footer) > .e-con,
.elementor-location-footer:has(.biohof-footer) .e-con-inner {
	max-inline-size: none;
	inline-size: 100%;
	padding-inline: 0;
}

/* Heller Text auch für Überschriften (schlägt die .biohof-Heading-Regel). */
.biohof-footer.biohof-footer :where(h2, h3) {
	color: var(--biohof-footer-fg);
}

/* Fokus sichtbar halten (Token-Fokusfarbe wäre hier zu farbnah). */
.biohof-footer.biohof-footer :where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--biohof-footer-accent);
	outline-offset: 2px;
}

/* ── Links allgemein. Dreifach-Klasse schlägt die Elementor-V4-Link-Defense. ─
   Wichtig: `:is(:hover, …)` statt `:where(:hover, …)` – `:where()` setzt die
   Spezifität der Pseudo-Klasse auf 0, womit die Regel (0,3,0) gegen die
   Elementor-Defense (0,3,1) verliert und der Hover-Text auf `primary-hover`
   springt → dunkles Grün auf grünem Footer = unlesbar. `:is()` propagiert
   die höchste Spezifität (hier 1 für die Pseudo-Klasse) → (0,3,1) → gewinnt.
   `:visited` ist mit dabei, weil Hello Elementor und Browser-Defaults
   besuchte Links sonst dunkel-violett/blass einfärben. */
.biohof-footer .biohof-footer__link {
	color: var(--biohof-footer-fg);
	text-decoration: none;
	border-radius: var(--biohof-radius-sm);
	transition: color var(--biohof-duration) var(--biohof-ease);
}
.biohof-footer.biohof-footer .biohof-footer__link:visited {
	color: var(--biohof-footer-fg);
}
.biohof-footer.biohof-footer .biohof-footer__link:is(:hover, :focus, :focus-visible, :active) {
	color: var(--biohof-footer-fg);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Textlinks (Telefon/E-Mail/Datenschutz): handgezogener Pinselstrich (core/link.css)
   am Text-Span statt schlichtem Unterstrich. Der Strich malt sich bei Link-Hover/
   -Fokus auf; den einfachen Unterstrich für diese Links unterdrücken. */
.biohof-footer.biohof-footer .biohof-footer__contact-link:is(:hover, :focus, :focus-visible, :active),
.biohof-footer.biohof-footer .biohof-footer__a11y:is(:hover, :focus, :focus-visible, :active) {
	text-decoration: none;
}

.biohof-footer__contact-link:is(:hover, :focus-visible) .biohof-inklink::before,
.biohof-footer__a11y:is(:hover, :focus-visible) .biohof-inklink::before {
	clip-path: inset(0 0 0 0);
}

/* Organische Blattkante: kachelnde Inline-Maske (data-URI = kein Lade-Aufblitzen). */
.biohof-footer__wave {
	block-size: clamp(1.5rem, 0.9rem + 3vw, 3rem);
	margin-block-end: -1px;
	background: var(--biohof-footer-bg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 32'%3E%3Cpath d='M0,16 C40,2 80,2 120,16 C160,30 200,30 240,16 L240,32 L0,32 Z'/%3E%3C/svg%3E") repeat-x left bottom / auto 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 32'%3E%3Cpath d='M0,16 C40,2 80,2 120,16 C160,30 200,30 240,16 L240,32 L0,32 Z'/%3E%3C/svg%3E") repeat-x left bottom / auto 100%;
}

/* ── Farbfläche mit Tiefe ──────────────────────────────────────────────────── */
.biohof-footer__body {
	background: linear-gradient(168deg, var(--biohof-footer-bg), var(--biohof-footer-bg-deep));
}

.biohof-footer__inner {
	container: biohof-footer / inline-size;
	/* Volle Breite (wie der Hero): kein 75rem-Deckel, nur Innenabstand. */
	max-inline-size: none;
	margin-inline: auto;
	padding: var(--biohof-space-xl) clamp(var(--biohof-space-lg), 4vw, var(--biohof-space-2xl));
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-lg);
	/* Nur horizontal kappen: versteckte Tooltip-Blasen (nowrap, position:absolute)
	   würden sonst am Handy seitlichen Scroll erzeugen. Vertikal bleibt frei, damit
	   sichtbare Blasen weiter nach oben aufklappen. */
	overflow-x: clip;
}

/* ── Marken-Block (zentriert) ──────────────────────────────────────────────── */
.biohof-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--biohof-space-2xs);
	text-align: center;
	padding-block-end: var(--biohof-space-sm);
}
.biohof-footer__wordmark-link { display: inline-block; }
.biohof-footer__wordmark {
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-600);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-tight);
}
.biohof-footer__tagline {
	margin: 0;
	max-inline-size: 52ch;
	color: var(--biohof-footer-fg-muted);
}

/* ── Spalten: auf dem Handy gestapelt, ab Tablet nebeneinander ──────────────── */
/* Spaltenzahl folgt der Inhalts-Zahl (--cN-Klasse vom Template). Schwellen bewusst
   hoch gesetzt: Handys (Container < 520px) bleiben EINSPALTIG – das hält den voll
   gefüllten Footer ruhig statt in enge Spalten gequetscht. Trennlinien erst, wenn
   ALLE Spalten in einer Reihe stehen (sonst verirrte Linien beim Umbruch). px statt
   em (Container-Query) und feste repeat(N) statt auto-fit (das in indefiniter
   Breite zu einer Spalte kollabiert). */
.biohof-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--biohof-space-lg);
}
.biohof-footer__col { min-inline-size: 0; }

/* Zwei Spalten ab kleinem Tablet – zwei bzw. vier Bereiche (Letztere als 2×2). */
@container biohof-footer (min-width: 520px) {
	.biohof-footer__cols--c2,
	.biohof-footer__cols--c4 { grid-template-columns: repeat(2, 1fr); }
}
/* Drei Bereiche: ab Tablet in eine Reihe (mit Trennlinien). */
@container biohof-footer (min-width: 700px) {
	.biohof-footer__cols--c3 {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--biohof-space-xl);
	}
	.biohof-footer__cols--c3 .biohof-footer__col + .biohof-footer__col {
		border-inline-start: 1px solid var(--biohof-footer-border);
		padding-inline-start: var(--biohof-space-xl);
	}
}
/* Vier Bereiche: volle Reihe erst auf breitem Schirm (mit Trennlinien). */
@container biohof-footer (min-width: 900px) {
	.biohof-footer__cols--c4 {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--biohof-space-xl);
	}
	.biohof-footer__cols--c4 .biohof-footer__col + .biohof-footer__col {
		border-inline-start: 1px solid var(--biohof-footer-border);
		padding-inline-start: var(--biohof-space-xl);
	}
}

/* ── Bereichstitel: warme Hof-Serife (Fraunces) wie die Wortmarke und die
   Plugin-Überschriften – normale Schreibung, kein Versalien-Label, kein
   Unterstrich. Konsistent mit core/heading.css statt Footer-Sondermuster. ──── */
.biohof-footer__title {
	margin: 0 0 var(--biohof-space-sm);
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-500);
	font-weight: var(--biohof-weight-medium);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-footer-fg);
}

/* ── Kontakt ───────────────────────────────────────────────────────────────── */
.biohof-footer__contact {
	display: grid;
	gap: var(--biohof-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}
.biohof-footer__contact-link,
.biohof-footer__contact-static {
	display: flex;
	align-items: center;
	gap: var(--biohof-space-sm);
	min-block-size: 32px;
}
.biohof-footer__contact-static--address { align-items: flex-start; }
.biohof-footer__contact-ico {
	flex: none;
	display: inline-flex;
	margin-block-start: 0.1em;
	color: var(--biohof-footer-accent);
}
.biohof-footer__contact-ico svg { inline-size: 1.1rem; block-size: 1.1rem; }
.biohof-footer__contact-text { overflow-wrap: break-word; }
.biohof-footer__contact-line { display: block; line-height: var(--biohof-line-snug); }

/* ── Öffnungszeiten (Tag ↔ Zeit) ───────────────────────────────────────────── */
.biohof-footer__hours { margin: 0; display: grid; gap: var(--biohof-space-2xs); }
.biohof-footer__hours-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--biohof-space-sm);
	padding-block: var(--biohof-space-2xs);
	border-block-end: 1px solid var(--biohof-footer-border);
}
.biohof-footer__hours-row:last-child { border-block-end: 0; }
.biohof-footer__hours-days { margin: 0; font-weight: var(--biohof-weight-medium); }
.biohof-footer__hours-time {
	margin: 0;
	color: var(--biohof-footer-fg-muted);
	font-variant-numeric: tabular-nums;
}
.biohof-footer__hours-row.is-closed .biohof-footer__hours-time { font-style: italic; }
.biohof-footer__hours-note {
	margin: var(--biohof-space-xs) 0 0;
	color: var(--biohof-footer-fg-muted);
	font-size: var(--biohof-fs-300);
	font-style: italic;
	line-height: var(--biohof-line-snug);
}

/* ── Menü (Bullet-Liste mit Hover-Versatz) ─────────────────────────────────── */
.biohof-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}
.biohof-footer__menu .biohof-footer__link {
	display: inline-flex;
	align-items: center;
	gap: var(--biohof-space-xs);
	min-block-size: 32px;
	padding-block: var(--biohof-space-2xs);
	font-weight: var(--biohof-weight-medium);
	transition: color var(--biohof-duration) var(--biohof-ease), transform var(--biohof-duration) var(--biohof-ease);
}
.biohof-footer__menu .biohof-footer__link::before {
	content: "";
	flex: none;
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-footer-accent);
	opacity: 0.55;
	transition: opacity var(--biohof-duration) var(--biohof-ease);
}
@media (hover: hover) {
	.biohof-footer.biohof-footer .biohof-footer__menu .biohof-footer__link:hover {
		color: var(--biohof-footer-fg);
		transform: translateX(3px);
		text-decoration: none;
	}
	.biohof-footer__menu .biohof-footer__link:hover::before { opacity: 1; }
}
.biohof-footer__menu-item.is-current > .biohof-footer__link::before { opacity: 1; }
.biohof-footer__menu-item.is-current > .biohof-footer__link { text-decoration: underline; text-underline-offset: 0.2em; }

/* ── Partner-Logos: gleichmäßiges Raster (dünn umrandet; Höhe & heller Grund im
   Widget einstellbar). Grid mit auto-fill → auf der schmalen Desktop-Spalte eine
   ruhige Säule, auf der vollen Handy-Breite ein gleichmäßiges Raster. Alle Kacheln
   gleich breit, das Logo auf die Kachel begrenzt (kein Überlauf – auch breite
   Banner nicht). ──────────────────────────────────────────────────────────────── */
.biohof-footer__partners {
	--biohof-footer-partner-h: 3.75rem; /* Logo-Höhe mittel (~60px, wie Altseite). */

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(6.5rem, 100%), 1fr));
	gap: var(--biohof-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
.biohof-footer__partners--s { --biohof-footer-partner-h: 2.5rem; }
.biohof-footer__partners--l { --biohof-footer-partner-h: 5rem; }

/* li, Tooltip-Wrapper und Link füllen die Rasterzelle → alle Kacheln gleich breit. */
.biohof-footer__partner { display: flex; }
.biohof-footer__partner > .biohof-tooltip { inline-size: 100%; }
.biohof-footer__partner-link { display: flex; inline-size: 100%; }

/* Standard: nur ein dünner, dezenter Rahmen – KEIN gefülltes weißes Feld. */
.biohof-footer__partner-tile {
	inline-size: 100%;
	display: grid;
	place-items: center;
	padding: var(--biohof-space-xs);
	background: transparent;
	border: 1px solid var(--biohof-footer-border);
	border-radius: var(--biohof-radius-sm);
	transition: border-color var(--biohof-duration) var(--biohof-ease), transform var(--biohof-duration) var(--biohof-ease);
}

/* Optional (Widget-Schalter): heller Grund hinter den Logos – für dunkle Logos,
   die auf dem Grün sonst untergehen. Bewusst mode-unabhängig hell. */
.biohof-footer__partners--plate .biohof-footer__partner-tile {
	background: color-mix(in srgb, white 92%, var(--biohof-footer-bg));
	border-color: transparent;
}

/* max-block-size (0,1,0) begrenzt die Höhe; die Breite via Doppel-Klasse (0,2,0)
   schlägt Elementors `.elementor img{max-width:100%}` (0,1,1) – sonst rendert ein
   breites Banner-Logo in voller Größe und sprengt am Handy den rechten Rand. */
.biohof-footer .biohof-footer__partner-img {
	max-block-size: var(--biohof-footer-partner-h);
	max-inline-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}
@media (hover: hover) {
	.biohof-footer.biohof-footer .biohof-footer__partner-link:hover .biohof-footer__partner-tile {
		border-color: var(--biohof-footer-accent);
		transform: translateY(-2px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.biohof-footer__partner-tile { transition: none; }
	.biohof-footer.biohof-footer .biohof-footer__partner-link:hover .biohof-footer__partner-tile { transform: none; }
}

/* ── Copyright-Leiste (eigene, dunklere Band-Fläche) ───────────────────────── */
.biohof-footer__bar {
	background: var(--biohof-footer-bg-deep);
	border-block-start: 1px solid var(--biohof-footer-border);
	color: var(--biohof-footer-fg-muted);
	font-size: var(--biohof-fs-300);
}
.biohof-footer__bar-inner {
	container: biohof-footer-bar / inline-size;
	position: relative;
	max-inline-size: none;
	margin-inline: auto;
	padding: var(--biohof-space-md) clamp(var(--biohof-space-lg), 4vw, var(--biohof-space-2xl));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--biohof-space-2xs);
	text-align: center;
}
.biohof-footer__copy { margin: 0; }
.biohof-footer__a11y {
	display: inline-flex;
	align-items: center;
	gap: var(--biohof-space-2xs);
	min-block-size: 32px;
}
.biohof-footer__a11y-ico { display: inline-flex; }
.biohof-footer__a11y-ico svg { inline-size: 1rem; block-size: 1rem; transform: rotate(-90deg); }

/* ── „Nach oben"-Button (nur mit JS sichtbar → kein toter Button) ──────────── */
.biohof-footer__totop {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--biohof-footer-border);
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-footer-pill-bg);
	color: var(--biohof-footer-accent);
	cursor: pointer;
	transition: background-color var(--biohof-duration) var(--biohof-ease), transform var(--biohof-duration) var(--biohof-ease);
}
@media (scripting: enabled) {
	.biohof-footer__totop { display: inline-flex; }
}
/* Auf breiten Leisten rechts angedockt, Copyright bleibt mittig. */
@container biohof-footer-bar (min-width: 30rem) {
	.biohof-footer__totop {
		position: absolute;
		inset-inline-end: var(--biohof-space-lg);
		inset-block-start: 50%;
		translate: 0 -50%;
	}
}
.biohof-footer__totop-ico { display: inline-flex; }
/* Chevron zeigt standardmäßig nach unten → für „nach oben" drehen. */
.biohof-footer__totop-ico svg { inline-size: 1.2rem; block-size: 1.2rem; transform: rotate(180deg); }
@media (hover: hover) {
	.biohof-footer.biohof-footer .biohof-footer__totop:hover {
		background: var(--biohof-footer-pill-bg-hover);
		color: var(--biohof-footer-fg);
		transform: translateY(-2px);
	}
}

/* ── Editor-Hinweis ────────────────────────────────────────────────────────── */
.biohof-footer__placeholder {
	display: grid;
	gap: var(--biohof-space-2xs);
	margin: var(--biohof-space-md);
	padding: var(--biohof-space-md);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	background: var(--biohof-color-surface-soft);
	color: var(--biohof-color-text);
}
.biohof-footer__placeholder-title { font-family: var(--biohof-font-heading); color: var(--biohof-color-text-strong); }

/* ── Mobile Aufwertung: der voll gefüllte Footer als gegliederte „Hof-Karten"
   statt nackter Stapelung. Greift nur im einspaltigen Handy-Layout (Container
   < 520px) – Tablet/Desktop bleiben unverändert. Tönungen aus --footer-fg, damit
   Hell- UND Dunkelmodus eine sauber abgesetzte Fläche bekommen. ──────────────── */
@media (max-width: 519.98px) {
	/* Feine Korn-Textur für etwas Material-Wärme (rein dekorativ, hinter dem Inhalt). */
	.biohof-footer__body {
		position: relative;
		isolation: isolate;
	}
	.biohof-footer__body::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		opacity: 0.6;
		background-image: radial-gradient(color-mix(in srgb, var(--biohof-footer-fg) 7%, transparent) 1px, transparent 1px);
		background-size: 7px 7px;
	}
}

@container biohof-footer (max-width: 519.98px) {
	.biohof-footer__cols { gap: var(--biohof-space-md); }

	/* Jeder Bereich eine dezent getönte Karte mit weicher Rundung. */
	.biohof-footer__col {
		padding: var(--biohof-space-lg);
		background: color-mix(in srgb, var(--biohof-footer-fg) 6%, transparent);
		border: 1px solid var(--biohof-footer-border);
		border-radius: var(--biohof-radius-lg);
	}

	/* Kontakt-Symbole als runde Akzent-Chips (ruhigeres, größeres Touch-Ziel). */
	.biohof-footer__contact-ico {
		inline-size: 2rem;
		block-size: 2rem;
		margin-block-start: 0;
		display: inline-grid;
		place-items: center;
		border-radius: var(--biohof-radius-pill);
		background: color-mix(in srgb, var(--biohof-footer-accent) 22%, transparent);
	}

	/* Partner-Logos auf hellem Schild – die Karte rahmt schon, daher randlos
	   (kein Doppelrahmen); der helle Grund hebt die bunten Logos sauber ab.
	   Bewusst mode-unabhängig hell, wie die Plate-Option. */
	.biohof-footer__partner-tile {
		border-color: transparent;
		background: color-mix(in srgb, white 92%, var(--biohof-footer-bg));
	}
}

/* ── Reduced Motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.biohof-footer__link,
	.biohof-footer__menu .biohof-footer__link,
	.biohof-footer__menu .biohof-footer__link::before,
	.biohof-footer__totop {
		transition: none;
	}
	@media (hover: hover) {
		.biohof-footer.biohof-footer .biohof-footer__menu .biohof-footer__link:hover,
		.biohof-footer__totop:hover {
			transform: none;
		}
	}
}