/* HW Landingpages 1.44.0 – Mega-Menü „Kategorien“ im CD. Wirkt nur auf den Eintrag li.hw-mm (Modul Navigation). */
@font-face { font-family: "HW Barlow Condensed"; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "HW Barlow Condensed"; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "HW Barlow"; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "HW Barlow"; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

li.hw-mm {
	--hw-mm-anth: #263039;
	--hw-mm-ink: #3A444D;
	--hw-mm-muted: #55606A;
	--hw-mm-brown: #B08E75;
	--hw-mm-brown-text: #7A5B45;
	--hw-mm-line: #EADBD0;
	--hw-mm-cream: #FBF2ED;
	--hw-mm-display: "HW Barlow Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
	--hw-mm-body: "HW Barlow", Barlow, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--hw-mm-gap: clamp(18px, 2.4vw, 40px);
	--hw-mm-pad: clamp(20px, 3vw, 40px);
	--hw-mm-edge: #D6C2B2;
}

/* ---------- Desktop: Mega-Menü ---------- */
/* Panel: feiner Rand ringsum, braune Oberkante, kräftiger Schatten */
#site-navigation li.hw-mm > .atomion-mega-menu.menu-level-0 {
	box-sizing: border-box;
	border: 1px solid var(--hw-mm-edge) !important;
	border-top: 3px solid var(--hw-mm-brown) !important;
	border-radius: 0 0 24px 0;
	background-color: #fff;
	box-shadow: 0 26px 52px rgba(38, 48, 57, 0.22), 0 4px 10px rgba(38, 48, 57, 0.08);
}
/* Offen: leichter Anthrazit-Schleier über der Seite darunter (die Kopfleiste bleibt frei) */
#site-navigation li.hw-mm:hover > .atomion-mega-menu.menu-level-0,
#site-navigation li.hw-mm:focus-within > .atomion-mega-menu.menu-level-0 {
	box-shadow: 0 26px 52px rgba(38, 48, 57, 0.22), 0 4px 10px rgba(38, 48, 57, 0.08), 0 0 0 100vmax rgba(38, 48, 57, 0.2);
	clip-path: inset(0 -100vmax -100vmax -100vmax);
}
@media (prefers-reduced-transparency: reduce) {
	#site-navigation li.hw-mm:hover > .atomion-mega-menu.menu-level-0 { box-shadow: 0 26px 52px rgba(38, 48, 57, 0.22); clip-path: none; }
}
#site-navigation li.hw-mm > .menu-level-0 > ul.sub-menu {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0 var(--hw-mm-gap);
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	/* Inhalt höchstens 1240 px breit und mittig, die Liste selbst reicht von Rand zu Rand (für das Fußband) */
	padding: 34px max(var(--hw-mm-pad), calc((100% - 1240px) / 2)) 0 !important;
	box-sizing: border-box;
	clip-path: inset(0 round 0 0 23px 0);
}
#site-navigation li.hw-mm > .menu-level-0 > ul.sub-menu > li {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 0 26px !important;
	border: 0 !important;
}
#site-navigation li.hw-mm > .menu-level-0 > ul.sub-menu > li::before { content: none !important; }

/* Spaltentitel */
#site-navigation li.hw-mm li.hw-mm-col > a {
	display: block !important;
	margin: 0 0 14px !important;
	padding: 0 0 10px !important;
	font-family: var(--hw-mm-display) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--hw-mm-anth) !important;
	background: none !important;
	position: relative;
}
#site-navigation li.hw-mm li.hw-mm-col > a::after {
	content: "" !important;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 26px;
	height: 2px;
	background: var(--hw-mm-brown);
	transition: width 0.2s ease;
}
#site-navigation li.hw-mm li.hw-mm-col > a:hover::after { width: 46px; }
/* Eigene Unterstreichung des Themes am Titel-Span abschalten, die Linie kommt von ::after am Link */
#site-navigation li.hw-mm li.hw-mm-col > a span { display: inline !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: inherit !important; }
#site-navigation li.hw-mm li.hw-mm-col > a span::before,
#site-navigation li.hw-mm li.hw-mm-col > a span::after,
#site-navigation li.hw-mm li.hw-mm-col > a::before { content: none !important; }
#site-navigation li.hw-mm li.hw-mm-col > .menu-level-1 {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
}
#site-navigation li.hw-mm li.hw-mm-col > .menu-level-1 > ul.sub-menu {
	display: block !important;
	position: static !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
}
#site-navigation li.hw-mm li.hw-mm-link {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
#site-navigation li.hw-mm li.hw-mm-link::before { content: none !important; }
#site-navigation li.hw-mm li.hw-mm-link > a {
	display: flex !important;
	align-items: center;
	gap: 9px;
	padding: 5px 0 !important;
	font-family: var(--hw-mm-body) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--hw-mm-ink) !important;
	background: none !important;
	transition: color 0.15s ease, transform 0.15s ease;
}
#site-navigation li.hw-mm li.hw-mm-link > a::after { content: none !important; }
#site-navigation li.hw-mm li.hw-mm-link > a:hover,
#site-navigation li.hw-mm li.hw-mm-link > a:focus-visible { color: var(--hw-mm-brown-text) !important; transform: translateX(3px); }
#site-navigation li.hw-mm li.hw-mm-link.current-menu-item > a { font-weight: 600 !important; color: var(--hw-mm-brown-text) !important; }
/* In Spalten mit Farbpunkten Texte ohne Punkt bündig einrücken */
#site-navigation li.hw-mm li.hw-mm-col:has(li[class*="hw-mm-c-"]) li.hw-mm-link:not([class*="hw-mm-c-"]) > a { padding-left: 20px !important; }

/* Farbpunkte */
li.hw-mm li[class*="hw-mm-c-"] > a::before {
	content: "" !important;
	flex: none;
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(38, 48, 57, 0.18);
}
li.hw-mm li.hw-mm-c-rot > a::before { background: #B8322A; }
li.hw-mm li.hw-mm-c-gelb > a::before { background: #E2B23C; }
li.hw-mm li.hw-mm-c-blau > a::before { background: #2D6CB0; }
li.hw-mm li.hw-mm-c-gruen > a::before { background: #3F8A57; }
li.hw-mm li.hw-mm-c-sw > a::before { background: linear-gradient(90deg, #1F272E 50%, #fff 50%); }
li.hw-mm li.hw-mm-c-swf > a::before { background: linear-gradient(90deg, #1F272E 50%, #B8322A 50%); }

/* Fußzeile im Mega-Menü */
/* Cremefarbenes Band über die volle Panelbreite: border-image mit seitlichem Überstand malt Linie und
   Fläche bis an die Panelränder, die Liste schneidet den Überstand dort ab (clip-path oben). */
#site-navigation li.hw-mm > .menu-level-0 > ul.sub-menu > li.hw-mm-foot {
	grid-column: span 3;
	align-self: stretch;
	padding: 19px 0 20px !important;
	border-width: 0 !important; /* nicht „border: 0“: die Kurzform setzt auch border-image zurück */
	background: none !important;
	border-image: linear-gradient(to bottom, var(--hw-mm-line) 1px, var(--hw-mm-cream) 1px) fill 0 / 0 / 0 100vmax !important; /* !important: die allgemeine Regel „border: 0 !important“ setzt border-image sonst zurück */
}
/* Überstand nur nach außen bzw. in die Spaltenlücke, damit keine Zelle die Schrift der anderen überdeckt */
#site-navigation li.hw-mm > .menu-level-0 > ul.sub-menu > li.hw-mm-foot-1 { border-image-outset: 0 var(--hw-mm-gap) 0 100vmax !important; }
#site-navigation li.hw-mm > .menu-level-0 > ul.sub-menu > li.hw-mm-foot:last-child { text-align: right; border-image-outset: 0 100vmax 0 0 !important; }
#site-navigation li.hw-mm li.hw-mm-foot > a {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 0 !important;
	font-family: var(--hw-mm-display) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--hw-mm-brown-text) !important;
	background: none !important;
}
#site-navigation li.hw-mm li.hw-mm-foot > a::after { content: "→" !important; position: static; width: auto; height: auto; background: none; transition: transform 0.15s ease; }
#site-navigation li.hw-mm li.hw-mm-foot > a:hover { color: var(--hw-mm-anth) !important; }
#site-navigation li.hw-mm li.hw-mm-foot > a:hover::after { transform: translateX(3px); }

@media (max-width: 1280px) {
	#site-navigation li.hw-mm li.hw-mm-link > a { font-size: 14px !important; }
	#site-navigation li.hw-mm li.hw-mm-col > a { font-size: 14px !important; letter-spacing: 0.1em !important; }
}

/* ---------- Mobil: Akkordeon von Atomion, nur Schrift und Farbpunkte ---------- */
#mobile-site-navigation li.hw-mm li.hw-mm-col > a {
	font-family: var(--hw-mm-display) !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--hw-mm-anth) !important;
}
#mobile-site-navigation li.hw-mm li.hw-mm-link > a { display: flex !important; align-items: center; gap: 9px; text-transform: none !important; }
#mobile-site-navigation li.hw-mm li.hw-mm-foot > a { font-weight: 600 !important; color: var(--hw-mm-brown-text) !important; }