/**
 * Eigenes Mega-Menü — mobile first, border-radius 6px.
 *
 * Logo-Größe: unten --wunschstoff-mega-logo-max (oder in „Design → Customizer → Zusätzliches CSS“ überschreiben).
 */

.wunschstoff-mega-root {
	--wunschstoff-mega-logo-max: 3.75rem;
	/* Eine gemeinsame Bezugsgröße für Nav-Links und Bubbles (style.css: Kreise 2.15rem) — wirkt ruhiger als Mix aus stretch/min-height. */
	--wunschstoff-mega-bar-rail: 2.75rem;
	/* Desktop: Menüzeile (Text + Herzen) nach unten schieben = positiver Wert (Customizer überschreibbar). */
	--wunschstoff-mega-nav-shift-y: 6px;
	--wunschstoff-mega-panel-bg: #f5f5f5;
	--wunschstoff-mega-panel-bg-image: none;
	/* Beton o. Ä.: Originalpixel, oben mittig, keine Kachel */
	--wunschstoff-mega-panel-bg-size: auto;
	--wunschstoff-mega-panel-bg-position: top center;
	--wunschstoff-mega-panel-bg-repeat: no-repeat;
	/* Hover / Akzent (Taupe) */
	--wunschstoff-mega-accent: #9a8d84;
	--wunschstoff-mega-accent-soft: rgba(154, 141, 132, 0.14);
	--wunschstoff-mega-accent-softer: rgba(154, 141, 132, 0.1);
	/* Einstell-Tokens: mehr Luft zwischen Spalten / zum Hochkant-Bild */
	--wunschstoff-mega-gap-col: clamp(4rem, 10vw, 11rem);
	--wunschstoff-mega-gap-body-x: clamp(3rem, 7vw, 6rem);
	/*
	 * Spalten-Trennlinien: aus #1f2933 weich gezogen — harter Vollton wirkte zu kontrastreich auf #f5f5f5.
	 * Überschreiben z. B.: rgba(31, 41, 51, 0.55) oder ein neutrales Grau.
	 */
	--wunschstoff-mega-col-sep: rgba(31, 41, 51, 0.38);
	/* Vertikaler Rand Mega-Panel — nur nötiger Rand, kein Vollbild-Gefühl */
	--wunschstoff-mega-panel-pad-y: clamp(0.75rem, 2vw, 1.25rem);
	position: relative;
	width: 100%;
	max-width: none;
	z-index: 100050;
	overflow: visible;
}

/* Mega offen: über Divi-Dropdowns im Header legen (typ. hohe z-index bei .et_pb_menu) */
.wunschstoff-mega-root.is-mega-open {
	z-index: 500010;
	position: relative;
}

/*
 * Divi begrenzt Header-Zeilen oft auf ~1080px — dann wirkt das Mega trotz CSS „zusammengestaucht“.
 * Nur dort, wo unser Shortcode sitzt: Section/Row/Spalte auf volle Browserbreite (ohne 100vw-Panel).
 */
.et-l--header .et_pb_section:has(.wunschstoff-mega-root),
.et-l--header .et_pb_section.et_section_regular:has(.wunschstoff-mega-root) {
	max-width: none !important;
	width: 100% !important;
}

.et-l--header .et_pb_row:has(.wunschstoff-mega-root) {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
	padding-left: clamp(0.75rem, 3vw, 2.5rem) !important;
	padding-right: clamp(0.75rem, 3vw, 2.5rem) !important;
}

.et-l--header .et_pb_column:has(.wunschstoff-mega-root) {
	width: 100% !important;
	max-width: none !important;
}

/* Divi Header: Shortcode-Modul nutzt volle Spaltenbreite (ohne 100vw-Panel-Trick). */
.et-l--header .et_pb_text:has(.wunschstoff-mega-root) .et_pb_text_inner {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

/*
 * Divi-Modul-Hintergrund (oft Weiß) liegt sonst über dem Mega-Panel-Hintergrund / Bild.
 */
.et_pb_text:has(.wunschstoff-mega-root) .et_pb_text_inner {
	background-color: transparent !important;
}

/*
 * Nuclear (Regression): WP-/Divi-Untermenüs im Header immer ausblenden, sobald der Shortcode da ist —
 * nicht nur bei offenem Mega (body.wunschstoff-mega-open). Sonst bleibt die graue Divi-Fläche als „Hintergrund“.
 * Unser Mega nutzt .wunschstoff-mega-col__list, keine .sub-menu.
 * html/body.has-wunschstoff-mega-nav setzt wunschstoff-mega-nav.js (Fallback wenn :has fehlt).
 */
.et-l--header:has(.wunschstoff-mega-root) .et_pb_menu ul.sub-menu,
.et-l--header:has(.wunschstoff-mega-root) .et_pb_fullwidth_menu ul.sub-menu,
.et-l--header:has(.wunschstoff-mega-root) .et_pb_menu li.menu-item-has-children > ul,
.et-l--header:has(.wunschstoff-mega-root) .et_pb_fullwidth_menu li.menu-item-has-children > ul,
.et-l--header:has(.wunschstoff-mega-root) nav.et-menu-nav ul.sub-menu,
body.has-wunschstoff-mega-nav .et-l--header .et_pb_menu ul.sub-menu,
body.has-wunschstoff-mega-nav .et-l--header .et_pb_fullwidth_menu ul.sub-menu,
body.has-wunschstoff-mega-nav .et-l--header .et_pb_menu li.menu-item-has-children > ul,
body.has-wunschstoff-mega-nav .et-l--header .et_pb_fullwidth_menu li.menu-item-has-children > ul,
body.has-wunschstoff-mega-nav .et-l--header nav.et-menu-nav ul.sub-menu,
body.has-wunschstoff-mega-nav #main-header ul.sub-menu,
body.has-wunschstoff-mega-nav #main-header li.menu-item-has-children > ul,
body.has-wunschstoff-mega-nav #top-header ul.sub-menu,
body.has-wunschstoff-mega-nav #top-header li.menu-item-has-children > ul,
body.has-wunschstoff-mega-nav #et-top-navigation ul.sub-menu,
body.has-wunschstoff-mega-nav #et-top-navigation li.menu-item-has-children > ul,
body.has-wunschstoff-mega-nav .et_pb_sticky .et_pb_menu ul.sub-menu,
body.has-wunschstoff-mega-nav .et_pb_sticky .et_pb_fullwidth_menu ul.sub-menu {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	max-height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	left: -7000px !important;
	width: 0 !important;
	min-height: 0 !important;
}

/*
 * Divi-Menümodul im gleichen Header: klassisches WP-/Divi-.sub-menu (grauer Kasten + Pfeil)
 * liegt sonst über oder durch das Shortcode-Mega — wir blenden es nur aus, solange unser Mega offen ist.
 * body.wunschstoff-mega-open setzt das Skript zuverlässig (nicht nur :has()).
 */
.et-l--header:has(.wunschstoff-mega-root.is-mega-open) .et_pb_menu ul.sub-menu,
.et-l--header:has(.wunschstoff-mega-root.is-mega-open) .et_pb_menu li ul.sub-menu,
.et-l--header:has(.wunschstoff-mega-root.is-mega-open) .et_pb_menu li.menu-item-has-children > ul,
.et-l--header:has(.wunschstoff-mega-root.is-mega-open) .et_pb_fullwidth_menu ul.sub-menu,
.et-l--header:has(.wunschstoff-mega-root.is-mega-open) .et_pb_fullwidth_menu li ul.sub-menu,
.et-l--header:has(.wunschstoff-mega-root.is-mega-open) .et_pb_fullwidth_menu li.menu-item-has-children > ul,
body.wunschstoff-mega-open header ul.sub-menu,
body.wunschstoff-mega-open #main-header ul.sub-menu,
body.wunschstoff-mega-open #et-top-navigation ul.sub-menu,
body.wunschstoff-mega-open .et_pb_menu ul.sub-menu,
body.wunschstoff-mega-open .et_pb_menu li.menu-item-has-children > ul,
body.wunschstoff-mega-open .et_pb_fullwidth_menu ul.sub-menu,
body.wunschstoff-mega-open .et_pb_fullwidth_menu li.menu-item-has-children > ul,
body.wunschstoff-mega-open nav.et-menu-nav li.menu-item-has-children > ul {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	max-height: 0 !important;
	overflow: hidden !important;
}

/*
 * Divi setzt Dropdown-Hintergrund auf „.nav li ul“ (Theme Builder + klassischer Header).
 * #top-header / Sticky: eigene Wrapper — zusätzliche Selektoren gegen „Geister“-Dropdown.
 */
body.wunschstoff-mega-open #top-header .et_pb_menu .nav li ul,
body.wunschstoff-mega-open #top-header .et_pb_fullwidth_menu .nav li ul,
body.wunschstoff-mega-open .et_pb_sticky .et_pb_menu .nav li ul,
body.wunschstoff-mega-open .et_pb_sticky .et_pb_fullwidth_menu .nav li ul,
body.wunschstoff-mega-open .et_pb_menu .nav li > ul,
body.wunschstoff-mega-open .et_pb_fullwidth_menu .nav li > ul {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	max-height: 0 !important;
	overflow: hidden !important;
}

/* Theme Builder (.et-l--header statt <header>) + Divi „Mega Menu“-Klasse am WP-Menüpunkt */
body.wunschstoff-mega-open .et-l--header .et_pb_menu li > ul,
body.wunschstoff-mega-open .et-l--header .et_pb_menu li.mega-menu > ul,
body.wunschstoff-mega-open .et-l--header .et_pb_fullwidth_menu li > ul,
body.wunschstoff-mega-open .et-l--header .et_pb_fullwidth_menu li.mega-menu > ul,
body.wunschstoff-mega-open #main-header #top-menu li > ul,
body.wunschstoff-mega-open #main-header .nav li ul,
body.wunschstoff-mega-open #main-header li.mega-menu > ul,
body.wunschstoff-mega-open .et_pb_menu .et_pb_menu__menu nav > ul > li > ul {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	max-height: 0 !important;
	overflow: hidden !important;
}

.wunschstoff-mega-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	min-height: 4rem;
	box-sizing: border-box;
}

/* Alle drei Blöcke (Logo / Links / Bubbles) dieselbe Querachse — kein stretch der Nav-Spalte. */
.wunschstoff-mega-root .wunschstoff-mega-bar > .wunschstoff-mega-bar__logo,
.wunschstoff-mega-root .wunschstoff-mega-bar > .wunschstoff-mega-bar__toggle,
.wunschstoff-mega-root .wunschstoff-mega-bar > .wunschstoff-mega-bar__nav,
.wunschstoff-mega-root .wunschstoff-mega-bar > .wunschstoff-mega-bar__icons {
	align-self: center;
}

.wunschstoff-mega-bar__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	max-width: min(60vw, 20rem);
	line-height: 0;
}

.wunschstoff-mega-bar__logo .custom-logo-link {
	display: inline-block;
	line-height: 0;
	border-radius: 6px;
}

.wunschstoff-mega-bar__logo img,
.wunschstoff-mega-bar__logo .custom-logo {
	max-height: var(--wunschstoff-mega-logo-max, 3.75rem);
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	border-radius: 6px;
}

.wunschstoff-mega-root .wunschstoff-mega-bar__logo-text {
	display: inline-block;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	padding: 0.25rem 0;
	border-radius: 6px;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

.wunschstoff-mega-root .wunschstoff-mega-bar__logo-text:hover,
.wunschstoff-mega-root .wunschstoff-mega-bar__logo-text:focus-visible {
	color: #9a8d84 !important;
	-webkit-text-fill-color: #9a8d84;
}

.wunschstoff-mega-root .wunschstoff-mega-bar__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	background: transparent;
	color: #ffffff !important;
	cursor: pointer;
}

.wunschstoff-mega-root .wunschstoff-mega-bar__toggle:hover,
.wunschstoff-mega-root .wunschstoff-mega-bar__toggle:focus-visible {
	color: #9a8d84 !important;
	border-color: rgba(154, 141, 132, 0.65);
}

.wunschstoff-mega-bar__burger::before {
	content: "";
	display: block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Gleiche Spezifität wie .wunschstoff-mega-root … __toggle oben — sonst gewinnt inline-flex und der Burger bleibt auf Desktop sichtbar. */
@media (min-width: 981px) {
	.wunschstoff-mega-root .wunschstoff-mega-bar__toggle {
		display: none !important;
	}

	.wunschstoff-mega-root .wunschstoff-mega-bar__nav {
		transform: translateY(var(--wunschstoff-mega-nav-shift-y, -6px));
	}
}

.wunschstoff-mega-bar__nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

@media (max-width: 980px) {
	.wunschstoff-mega-bar__logo {
		order: 0;
	}

	.wunschstoff-mega-bar__toggle {
		order: 1;
	}

	.wunschstoff-mega-bar__icons {
		order: 2;
		margin-left: auto;
	}

	.wunschstoff-mega-root:not(.is-mobile-open) .wunschstoff-mega-bar__nav {
		display: none;
		width: 100%;
		flex-basis: 100%;
		order: 3;
	}

	.wunschstoff-mega-root.is-mobile-open .wunschstoff-mega-bar__nav {
		display: flex;
		justify-content: flex-start;
	}
}

.wunschstoff-mega-bar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 980px) {
	.wunschstoff-mega-bar__list {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Divi Theme Builder + style.css nutzen oft !important auf Links — hier mit Root-Scope kontern.
 */
/* Oberste Zeile: nur ruhige Textfarbe — kein Glow/Schatten (wirkt billig neben dem Panel-Inhalt). */
.wunschstoff-mega-root .wunschstoff-mega-bar__nav .wunschstoff-mega-bar__link,
.wunschstoff-mega-root .wunschstoff-mega-bar__nav .wunschstoff-mega-bar__link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: var(--wunschstoff-mega-bar-rail, 2.75rem);
	padding: 0.2rem 0;
	box-sizing: border-box;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 6px;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	transition: color 0.2s ease, -webkit-text-fill-color 0.2s ease;
}

.wunschstoff-mega-root .wunschstoff-mega-bar__nav .wunschstoff-mega-bar__link:hover,
.wunschstoff-mega-root .wunschstoff-mega-bar__nav .wunschstoff-mega-bar__link:focus-visible {
	color: var(--wunschstoff-mega-accent, #9a8d84) !important;
	-webkit-text-fill-color: var(--wunschstoff-mega-accent, #9a8d84);
	background: transparent;
	transform: none;
	box-shadow: none;
}

.wunschstoff-mega-bar__label {
	display: inline-block;
	line-height: inherit;
}

/* Erste Zeile: Symbol mindestens Schriftgröße, bündig zur Zeile */
.wunschstoff-mega-bar__icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	line-height: 1;
	box-sizing: border-box;
}

.wunschstoff-mega-bar__icon--heart {
	background-color: currentcolor;
	-webkit-mask-image: var(--wunschstoff-heart-icon);
	mask-image: var(--wunschstoff-heart-icon);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.wunschstoff-mega-bar__icon--percent {
	width: auto;
	height: auto;
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
}

.wunschstoff-mega-bar__icon--palette {
	background: conic-gradient(
		from 0deg,
		#e53935,
		#fbc02d,
		#43a047,
		#1e88e5,
		#8e24aa,
		#e53935
	);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.wunschstoff-mega-bar__icon--text {
	width: auto;
	height: auto;
	font-size: 1em;
	line-height: 1;
	font-weight: 600;
}

.wunschstoff-mega-bar__icons {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: var(--wunschstoff-mega-bar-rail, 2.75rem);
	box-sizing: border-box;
}

/*
 * Vorher gap 0.35rem — zu eng; style.css hat 1rem, wurde hier überschrieben.
 * Extra Abstand zwischen Warenkorb- und Konto-Bubble.
 */
.wunschstoff-mega-root .wunschstoff-mega-bar__icons .wunschstoff-header-icons-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 1.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wunschstoff-mega-root .wunschstoff-mega-bar__icons .wunschstoff-header-icons-menu > li.wunschstoff-menu-action > a,
.wunschstoff-mega-root .wunschstoff-mega-bar__icons a.wunschstoff-menu-action__link {
	align-self: center;
	color: #202a34 !important;
	transition: color 0.15s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
		transform 0.18s ease;
}

.wunschstoff-mega-root .wunschstoff-mega-bar__icons .wunschstoff-header-icons-menu > li.wunschstoff-menu-action > a:hover,
.wunschstoff-mega-root .wunschstoff-mega-bar__icons .wunschstoff-header-icons-menu > li.wunschstoff-menu-action > a:focus-visible {
	color: #202a34 !important;
	/* In der Kopfzeile kein translateY aus style.css — sonst wirkt die Reihe „unruhig“. */
	transform: none !important;
}

.wunschstoff-mega-root .wunschstoff-mega-bar__icons .wunschstoff-menu-action__count {
	color: #202a34 !important;
}

.wunschstoff-mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: -4px;
	padding: var(--wunschstoff-mega-panel-pad-y, 40px) 0;
	background-color: var(--wunschstoff-mega-panel-bg);
	background-image: var(--wunschstoff-mega-panel-bg-image, none);
	background-size: var(--wunschstoff-mega-panel-bg-size, auto);
	background-position: var(--wunschstoff-mega-panel-bg-position, top center);
	background-repeat: var(--wunschstoff-mega-panel-bg-repeat, no-repeat);
	border-radius: 6px;
	/* Panel-Schatten: etwas kräftiger, Inhalt/Beton unverändert */
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(0, 0, 0, 0.28);
	overflow: visible;
}

/* Bildebene (PHP): Originalgröße, oben mittig — zuverlässiger als nur background-image */
.wunschstoff-mega-panel__bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	pointer-events: none;
}

.wunschstoff-mega-panel__bg img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* Schmales Textur-Band nur ohne Mediathek-Thema (Fallback ohne --has-theme-bg-Img-Layer) */
	max-height: min(9rem, 24vh);
	object-fit: contain;
	object-position: top center;
}

/*
 * Mediathek-/Theme-Hintergrund: volle Panel-Fläche (vorher: kleines Bildband + großes Grau).
 * __bg füllt die Höhe des Panels; Bild mit cover — nicht nur 9rem Streifen.
 */
.wunschstoff-mega-panel.wunschstoff-mega-panel--has-theme-bg .wunschstoff-mega-panel__bg {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: stretch;
	justify-content: stretch;
	border-radius: 6px;
	overflow: hidden;
}

.wunschstoff-mega-panel.wunschstoff-mega-panel--has-theme-bg .wunschstoff-mega-panel__bg img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	min-height: 100%;
	object-fit: cover;
	object-position: top center;
}

.wunschstoff-mega-panel[hidden] {
	display: none !important;
}

.wunschstoff-mega-root.is-mega-open .wunschstoff-mega-panel {
	display: block !important;
}

@media (max-width: 980px) {
	.wunschstoff-mega-panel {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		margin-top: 0.5rem;
		order: 4;
		flex-basis: 100%;
	}

	.wunschstoff-mega-root:not(.is-mobile-open) .wunschstoff-mega-panel {
		display: none !important;
	}
}

/*
 * Volle nutzbare Breite (rot markierter Bereich): Kinder strecken, nicht zentriert schmal halten.
 */
.wunschstoff-mega-panel__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: min(100rem, 100%);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5.5vw, 4rem);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

/* Volle Breite des Panels — kein künstlicher Umbruch durch schmale Intro-Box. */
.wunschstoff-mega-intro {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	text-align: left;
	align-self: stretch;
}

/* Panel-Kopf: im PHP bereits <h2> — hier optisch klar als Hauptüberschrift des Mega-Bereichs. */
.wunschstoff-mega-intro__title {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 0.35rem;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: #1a2229;
}

.wunschstoff-mega-intro__text {
	margin: 0 0 1rem;
}

/*
 * Zeile: Text-Spalten + Hochkant-Bild — bei Sidebar sind alle Spuren gleich breit (CSS Grid, jeweils 1fr).
 * --wunschstoff-mega-body-cols kommt aus PHP (Text-Spalten + 1 für das Bild).
 */
.wunschstoff-mega-body {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	box-sizing: border-box;
	gap: 1.75rem var(--wunschstoff-mega-gap-body-x, clamp(3rem, 7vw, 6rem));
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	margin-bottom: 1.25rem;
}

.wunschstoff-mega-body--banner-only {
	justify-content: flex-end;
}

@media (min-width: 768px) {
	.wunschstoff-mega-body {
		flex-wrap: nowrap;
		align-items: stretch;
		overflow-x: hidden;
		min-width: 0;
	}

	/*
	 * Textblöcke + Sidebar: eine Grid-Zeile, alle Spuren gleich breit (Klasse + --wunschstoff-mega-body-cols aus PHP).
	 * .wunschstoff-mega-columns mit display:contents — die .wunschstoff-mega-col werden direkte Grid-Kinder neben dem Bild.
	 */
	.wunschstoff-mega-body.wunschstoff-mega-body--equal-cols {
		display: grid;
		grid-template-columns: repeat(var(--wunschstoff-mega-body-cols, 5), minmax(0, 1fr));
		column-gap: clamp(0.45rem, 1vw, 0.95rem);
		row-gap: 1.75rem;
		align-items: start;
		justify-items: stretch;
	}

	.wunschstoff-mega-body.wunschstoff-mega-body--equal-cols .wunschstoff-mega-columns {
		display: contents;
	}

	.wunschstoff-mega-body.wunschstoff-mega-body--equal-cols .wunschstoff-mega-sidebar {
		width: auto;
		max-width: none;
		min-width: 0;
		flex: unset;
		margin-left: 0;
		border-left: 1px solid var(--wunschstoff-mega-col-sep, rgba(31, 41, 51, 0.38));
		padding-left: 1.25rem;
		box-sizing: border-box;
	}

	/* Sidebar + Spalten ohne Equal-Cols-Klasse (Cache): klassisches Flex */
	.wunschstoff-mega-body:not(.wunschstoff-mega-body--equal-cols) .wunschstoff-mega-columns {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}

	.wunschstoff-mega-body:not(.wunschstoff-mega-body--equal-cols) .wunschstoff-mega-sidebar {
		margin-left: auto;
	}
}

.wunschstoff-mega-sidebar {
	flex: 0 0 auto;
	width: min(13rem, 32vw);
	max-width: 100%;
	align-self: start;
}

.wunschstoff-mega-sidebar__link,
.wunschstoff-mega-sidebar__frame {
	display: block;
	height: auto;
	min-height: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.wunschstoff-mega-sidebar__link:hover,
.wunschstoff-mega-sidebar__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(32, 42, 52, 0.14);
}

.wunschstoff-mega-sidebar__link {
	text-decoration: none;
}

/*
 * Hochkant-CTA: festes Seitenverhältnis 3:5 + cover — kein max-height,
 * sonst kollidiert das mit aspect-ratio und wirkt wie ein „queres“ Rechteck.
 */
.wunschstoff-mega-sidebar__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

@media (max-width: 767px) {
	.wunschstoff-mega-body {
		flex-direction: column;
		align-items: center;
	}

	.wunschstoff-mega-body.wunschstoff-mega-body--equal-cols {
		display: flex;
	}

	.wunschstoff-mega-body.wunschstoff-mega-body--equal-cols .wunschstoff-mega-columns {
		display: grid !important;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.wunschstoff-mega-body.wunschstoff-mega-body--equal-cols .wunschstoff-mega-sidebar {
		border-left: none;
		padding-left: 0;
		max-width: 100%;
	}

	.wunschstoff-mega-body--banner-only {
		justify-content: center;
	}

	.wunschstoff-mega-body .wunschstoff-mega-columns {
		width: 100%;
		order: 1;
	}

	.wunschstoff-mega-sidebar {
		width: min(17rem, 92vw);
		order: 2;
	}

}

/*
 * Spaltenanzahl kommt aus PHP (--wunschstoff-mega-n-cols): eine Gitter-Zeile,
 * damit z. B. „Unisex“ nicht unter „Zielgruppen“ umbricht (auto-fit war das Problem).
 */
.wunschstoff-mega-columns {
	--wunschstoff-mega-n-cols: 1;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.75rem;
	row-gap: 1.25rem;
	margin-bottom: 1.25rem;
	width: 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.wunschstoff-mega-columns {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		column-gap: var(--wunschstoff-mega-gap-col, clamp(4rem, 10vw, 11rem));
		row-gap: 2rem;
		justify-items: stretch;
		align-items: start;
		/* 1fr gleichmäßig, min 0 = keine erzwungene Summe aus max-content (war Scrollbalken-Ursache). */
		grid-template-columns: repeat(var(--wunschstoff-mega-n-cols, 1), minmax(0, 1fr));
	}

	.wunschstoff-mega-columns .wunschstoff-mega-col {
		max-width: none;
		min-width: 0;
		width: 100%;
	}

	/* Vertikale Strukturlinien zwischen den Spalten (1px, dezent). */
	.wunschstoff-mega-columns .wunschstoff-mega-col:not(:first-child) {
		border-left: 1px solid var(--wunschstoff-mega-col-sep, rgba(31, 41, 51, 0.38));
		padding-left: 1.25rem;
		box-sizing: border-box;
	}
}

@media (max-width: 767px) {
	/* Gestapelte Spalten: Trennung nach oben statt zwischen schmalen Spalten. */
	.wunschstoff-mega-columns .wunschstoff-mega-col:not(:first-child) {
		border-top: 1px solid var(--wunschstoff-mega-col-sep, rgba(31, 41, 51, 0.38));
		padding-top: 1.15rem;
		margin-top: 0.35rem;
	}
}

.wunschstoff-mega-col {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
}

.wunschstoff-mega-col__head {
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	text-align: left;
	box-sizing: border-box;
}

/* Unsichtbar, aber gleiche Box wie .wunschstoff-mega-col__title — Listen starten bündig. */
.wunschstoff-mega-col__title--placeholder {
	visibility: hidden;
	pointer-events: none;
	user-select: none;
}

.wunschstoff-mega-col__title {
	display: block;
	width: 100%;
	max-width: none !important;
	box-sizing: border-box;
	align-self: stretch;
	margin: 0;
	padding: 0;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.045em;
	text-align: left;
	color: #1b252f;
}

.wunschstoff-mega-root .wunschstoff-mega-col__title:not(.wunschstoff-mega-col__title--placeholder) {
	padding-bottom: 0.4rem;
	margin-bottom: 0;
}

/*
 * Linie unter der Spaltenüberschrift: nicht am h3 (Divi macht die oft „kurz“),
 * sondern eigener Balken unter dem Kopf-Container = volle Spaltenbreite, gleicher Innenabstand links/rechts.
 */
.wunschstoff-mega-root .wunschstoff-mega-col__head:has(.wunschstoff-mega-col__title:not(.wunschstoff-mega-col__title--placeholder))::after {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	border-bottom: 1px solid var(--wunschstoff-mega-col-sep, rgba(31, 41, 51, 0.38));
	margin: 0 0 0.75rem;
	box-sizing: border-box;
}

/*
 * Theme/Divi setzt oft noch ul-Padding (Bullet-Platz) — Herzen wirkten dann „eingerückt“
 * statt bündig unter dem ersten Buchstaben der Überschrift.
 */
.wunschstoff-mega-root .wunschstoff-mega-col__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	padding-left: 0;
	margin-inline-start: 0;
	width: 100%;
	align-self: stretch;
	text-align: left;
	box-sizing: border-box;
}

/*
 * Original-Herz (ws-icon.png über --wunschstoff-heart-icon aus functions.php):
 * als Maske + dunkle Füllfarbe — auf hellem Panel sichtbar, Form bleibt eure PNG.
 */
/* Zeile volle Spaltenbreite: Link flex-grow — Hover-Fläche bis zum rechten Rand (lange Labels). */
.wunschstoff-mega-root .wunschstoff-mega-col__list li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 0;
	list-style: none;
	box-sizing: border-box;
}

/* Herz links neben dem Text (kein flex „order“ — sonst wirkte es wie „hinter“ dem Link). */
.wunschstoff-mega-root .wunschstoff-mega-col__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background-color: #202a34;
	-webkit-mask-image: var(--wunschstoff-heart-icon);
	mask-image: var(--wunschstoff-heart-icon);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	align-self: center;
	margin-left: 0.15rem;
}

/*
 * Divi: .et_pb_text_inner a ist oft display:inline — dann bleibt Hover-Hintergrund nur Textbreite.
 * Eigene Klasse + flex !important: Zeile nutzt volle Spaltenbreite (Herz bleibt ::before).
 */
.et_pb_text_inner .wunschstoff-mega-root .wunschstoff-mega-col__list li a.wunschstoff-mega-col__link,
.wunschstoff-mega-root .wunschstoff-mega-col__list li a.wunschstoff-mega-col__link {
	display: flex !important;
	align-items: center;
	flex: 1 1 0% !important;
	min-width: 0 !important;
	align-self: stretch;
	line-height: 1.35;
	text-decoration: none !important;
	color: #202a34 !important;
	-webkit-text-fill-color: #202a34;
	padding: 0.35rem 0.4rem 0.35rem 0;
	border-radius: 6px;
	box-sizing: border-box;
	transition: color 0.2s ease, background 0.2s ease;
}

.et_pb_text_inner .wunschstoff-mega-root .wunschstoff-mega-col__list li a.wunschstoff-mega-col__link:hover,
.et_pb_text_inner .wunschstoff-mega-root .wunschstoff-mega-col__list li a.wunschstoff-mega-col__link:focus-visible,
.wunschstoff-mega-root .wunschstoff-mega-col__list li a.wunschstoff-mega-col__link:hover,
.wunschstoff-mega-root .wunschstoff-mega-col__list li a.wunschstoff-mega-col__link:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--wunschstoff-mega-accent, #9a8d84) !important;
	-webkit-text-fill-color: var(--wunschstoff-mega-accent, #9a8d84) !important;
}

.wunschstoff-mega-root .wunschstoff-mega-col__list li:has(a.wunschstoff-mega-col__link:hover)::before,
.wunschstoff-mega-root .wunschstoff-mega-col__list li:has(a.wunschstoff-mega-col__link:focus-visible)::before {
	background-color: var(--wunschstoff-mega-accent, #9a8d84);
}

.wunschstoff-mega-root .wunschstoff-mega-col__list li a.wunschstoff-mega-col__link:focus-visible {
	outline: 2px solid var(--wunschstoff-mega-accent, #9a8d84);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.wunschstoff-mega-root .wunschstoff-mega-col__list a.wunschstoff-mega-col__link {
		white-space: nowrap;
	}
}

.wunschstoff-mega-ctas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.wunschstoff-mega-ctas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		max-width: 100%;
		align-self: stretch;
		column-gap: clamp(1rem, 3vw, 2rem);
	}
}

.wunschstoff-mega-cta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.wunschstoff-mega-cta:hover,
.wunschstoff-mega-cta:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(32, 42, 52, 0.12);
}

.wunschstoff-mega-cta__img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.wunschstoff-mega-cta__footer {
	display: flex;
	justify-content: center;
	padding: 0.75rem 1rem 1rem;
}

.wunschstoff-mega-cta__btn {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	background: #202a34;
	color: #fff;
	font-size: 0.9rem;
	text-align: center;
}

.wunschstoff-mega-cta:hover .wunschstoff-mega-cta__btn,
.wunschstoff-mega-cta:focus-visible .wunschstoff-mega-cta__btn {
	background: var(--wunschstoff-mega-accent, #9a8d84);
	color: #fff;
}

/* Ankerpunkt für das Caret unter „Dein WunschStoff“ */
.wunschstoff-mega-root .wunschstoff-mega-bar__nav .wunschstoff-mega-bar__link--mega {
	position: relative;
	z-index: 2;
}

/*
 * Kleines Dreieck (Caret) mittig unter dem Mega-Link — gleiche Flächenfarbe wie das Panel,
 * damit es wie ein zusammenhängender „Tab“ wirkt (engl. oft „dropdown caret“).
 */
.wunschstoff-mega-root.is-mega-open .wunschstoff-mega-bar__nav .wunschstoff-mega-bar__link--mega::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 0;
	height: 0;
	margin-left: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--wunschstoff-mega-panel-bg, #f5f5f5);
	z-index: 100060;
	pointer-events: none;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.07));
}

.wunschstoff-mega-root.is-mega-open .wunschstoff-mega-bar__nav .wunschstoff-mega-bar__link--mega {
	color: #9a8d84 !important;
	-webkit-text-fill-color: #9a8d84;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Volle Panelbreite — nach Theme/Divi (align-items:center etc.) erzwingen.
 * Asset-Ver in mega-menu.php (WUNSCHSTOFF_MEGA_NAV_ASSET_VER) bei Layout-Tuning erhöhen.
 */
.wunschstoff-mega-root .wunschstoff-mega-panel__inner {
	align-items: stretch !important;
	width: 100% !important;
}

.wunschstoff-mega-root .wunschstoff-mega-body {
	width: 100% !important;
	max-width: 100% !important;
	align-self: stretch !important;
}

@media (min-width: 768px) {
	.wunschstoff-mega-root .wunschstoff-mega-body:not(.wunschstoff-mega-body--equal-cols) .wunschstoff-mega-columns {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.wunschstoff-mega-root .wunschstoff-mega-ctas {
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}