/* Codewerk Mega-Menu-Widget — Design-Tokens gemäß Figma-Vorgabe. */

/* --------------------------------------------------------------------------
 * Hintergrund der Kopfzeile auf kleinen Bildschirmen
 *
 * Auf grossen Bildschirmen bringt dieses Widget seine eigene abgerundete
 * Fläche mit; der Hintergrund der umgebenden Kopfzeilen-Section ist deshalb
 * im Template auf transparent gesetzt. Auf Tablet und Handy ist das Widget
 * jedoch ausgeblendet — dort greift weiterhin das bisherige Menü. Ohne die
 * folgende Regel hätte die Kopfzeile dort gar keinen Hintergrund mehr und
 * der Seiteninhalt würde durchscheinen.
 *
 * Der Wert entspricht dem ursprünglichen Hintergrund der Section.
 * ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* `!important` ist hier nötig: Elementor setzt den transparenten Grund über
	   einen element-spezifischen Selektor, der jede einfache Klassenregel
	   überstimmt. */
	.header-inner {
		background-color: #022b4dcf !important;
	}
}

/* --------------------------------------------------------------------------
 * Kopfzeile schwebt über dem Seiteninhalt
 *
 * In der Vorlage liegt die Leiste über dem Bild ganz oben — der Inhalt beginnt
 * also bündig an der Oberkante. Solange die Kopfzeile im normalen Fluss steht,
 * schiebt sie den Inhalt um ihre Höhe nach unten; da sie seit dem Umbau keinen
 * eigenen Hintergrund mehr hat, blieb dort ein weißer Streifen sichtbar.
 *
 * Sie wird deshalb aus dem Fluss genommen und über den Inhalt gelegt. Der
 * Z-Index entspricht dem, was am Element ohnehin gesetzt ist.
 *
 * Zwei Einschränkungen:
 * 1. Nur auf großen Bildschirmen — auf Tablet und Handy bleibt die Kopfzeile
 *    im Fluss, dort greift weiterhin das bisherige Menü.
 * 2. Nur auf Seiten mit bildschirmfüllendem Kopfbereich (Body-Klasse
 *    `cw-has-hero`, gesetzt in functions.php). Seiten, die direkt mit einer
 *    Überschrift beginnen, würden sonst oben verdeckt.
 * ----------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.cw-has-hero #header_pop {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 12;
	}

	/* Auf Hero-Seiten soll nur die dunkle Leiste selbst sichtbar sein und über
	   dem Seiteninhalt schweben. Der äußere Kopfbereich und der innere Kasten
	   müssen dafür durchsichtig sein. Der globale Header ist das bereits; ein
	   dupliziertes Header-Template (etwa für die Vorschauseite) bringt jedoch
	   eigene Hintergründe mit — diese Regel stellt den schwebenden Zustand
	   unabhängig davon her, gebunden nur an die Body-Klasse. */
	.cw-has-hero #header_pop,
	.cw-has-hero .header-inner {
		background-color: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
	}
}

/* --------------------------------------------------------------------------
 * Hintergrund auf Seiten ohne bildschirmfüllenden Kopfbereich
 *
 * Bisher lag hinter der Leiste ein zweiter, hellerer Kasten (`.header-inner`),
 * der als abgesetzter Rahmen um die Leiste herum sichtbar wurde. Stattdessen
 * trägt jetzt der äußere Kopfbereich (`.header-bg-style`) den helleren Ton
 * über die volle Breite; die Leiste selbst sitzt in ihrem dunklen Blau darauf.
 *
 * Die Eigenabstände von `.header-inner` und der Elementor-Spalte werden dabei
 * entfernt, damit die Leiste senkrecht exakt mittig im farbigen Bereich sitzt:
 * 30 px oben, 80 px Leiste, 30 px unten.
 * ----------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.header-bg-style .header-inner {
		background-color: transparent !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	.header-bg-style .header-inner > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding: 0 !important;
	}

	/* Elementor gibt jedem Widget standardmäßig 20 px Abstand nach unten. In der
	   Kopfzeile sitzt nur die Leiste, dieser Abstand würde sie nach oben
	   verschieben und die senkrechte Mitte verfehlen. */
	.header-bg-style .header-inner .elementor-widget-wrap > .elementor-element {
		margin-bottom: 0 !important;
	}

	body:not(.cw-has-hero) .header-bg-style {
		background-color: #436079;
	}

	/* Beim Scrollen fixiert Elementor die Kopfzeile am oberen Rand. Damit sie
	   nicht direkt am Browserrand klebt, bekommt sie im fixierten Zustand einen
	   Abstand von 10 px. Das gilt bewusst für alle Seiten — auch die
	   Hero-Vorschauseite läuft über ein eigenes Template, dessen Innenabstand
	   nicht dem des globalen Headers entspricht; ohne diese Regel würde die
	   Leiste dort oben ankleben. Die mittige Ausrichtung im Ruhezustand bleibt
	   unberührt, weil die Regel nur im fixierten Zustand greift. */
	.header-inner.elementor-sticky--active {
		padding-top: 10px !important;
	}
}

/* Wurzelelement: die komplette Kopfleiste (Logo, Menü, Sprache, Suche) nach
   Figma-Vorgabe — abgerundete Fläche, 80 px hoch, Inhalte auf einer Zeile
   verteilt. */
.cw-mega {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	padding: 0 32px;
	background-color: #022b4d;
	border-radius: 20px;
	font-family: "Barlow", -apple-system, system-ui, sans-serif;
}

/* Logo, 200 x 32 px, linksbündig und vertikal zentriert. Ohne Bild greift der
   Rückfall über das Logo-Symbol der Codewerk-Iconschrift — dessen natürliches
   Seitenverhältnis wird bewusst nicht verzerrt, deshalb kein fixes width auf
   dem Symbol selbst. */
.cw-mega__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	width: 200px;
	height: 32px;
	color: #ffffff;
	text-decoration: none;
}

.cw-mega__logo-image {
	display: block;
	max-width: 200px;
	max-height: 32px;
	width: auto;
	height: auto;
}

.cw-mega__logo-icon {
	display: inline-block;
	font-size: 32px;
	line-height: 1;
}

/* Die Menüpunkte sitzen mittig zwischen Logo und rechter Aktionsgruppe. */
.cw-mega__list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cw-mega__item {
	position: static;
}

/* Rechte Gruppe: Sprachumschalter und Such-Symbol. */
.cw-mega__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}

/* Auslöser (Top-Level mit zugeordnetem Rubrik-Menü).
   Maße exakt nach Figma-Node 247:367: Schriftstärke 400, Polsterung 32px 16px
   (ergibt mit line-height 16 die Leistenhöhe von 80 px), Abstand zum Chevron 6 px. */
.cw-mega__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: none;
	border: none;
	margin: 0;
	padding: 32px 16px;
	color: #ffffff;
	text-transform: uppercase;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	cursor: pointer;
	border-radius: 0;
}

.cw-mega__trigger:hover,
.cw-mega__trigger:focus-visible {
	color: #9efc4f;
}

/* Aktiver Zustand nach Figma-Node 247:370: hellerer Blauton als Grund,
   Beschriftung in Grün. */
.cw-mega__trigger[aria-expanded="true"] {
	background-color: #355571;
	color: #9efc4f;
}

.cw-mega__trigger-icon {
	flex: 0 0 auto;
	color: currentColor;
	transition: transform 0.2s ease;
}

.cw-mega__trigger[aria-expanded="true"] .cw-mega__trigger-icon {
	transform: rotate(180deg);
}

/* Einfacher Link ohne Panel (Top-Level ohne Zuordnung).
   Gleiche Maße wie der Auslöser, damit die Leiste einheitlich bleibt. */
.cw-mega__link-toplevel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
	color: #ffffff;
	text-transform: uppercase;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	text-decoration: none;
	border-radius: 0;
}

.cw-mega__link-toplevel:hover,
.cw-mega__link-toplevel:focus-visible {
	color: #9efc4f;
}

/* Mega-Panel.
   Im Figma sitzt das Panel 13 px unterhalb der Leiste (Leiste endet bei y=112,
   Panel beginnt bei y=125) und ist eine eigene abgerundete Fläche, die exakt
   so breit ist wie die Leiste darüber. Da die Leiste jetzt das Wurzelelement
   des Widgets ist, ist das Panel automatisch gleich breit — kein Ausgleich
   mehr nötig. */
.cw-mega__panel {
	position: absolute;
	top: calc(100% + 13px);
	left: 0;
	right: 0;
	z-index: 100;
}

.cw-mega__panel[hidden] {
	display: none;
}

/* Die Spaltenzahl liefert das Widget als --cw-mega-cols: ein Bereich mit
   Unterpunkten belegt zwei Spalten, einer ohne eine. Dadurch bleiben rechts
   keine leeren Spalten stehen, wenn ein Rubrik-Menü weniger Bereiche hat. */
.cw-mega__grid {
	display: grid;
	grid-template-columns: repeat(var(--cw-mega-cols, 6), minmax(0, 1fr));
	gap: 18px;
	background-color: #022b4d;
	border-radius: 20px;
	padding: 24px;
}

.cw-mega__col--wide {
	grid-column: span 2;
}

.cw-mega__col--narrow {
	grid-column: span 1;
}

.cw-mega__col-title {
	display: block;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
	padding: 18px 24px;
}

a.cw-mega__col-title--link {
	text-decoration: none;
	border-radius: 8px;
}

a.cw-mega__col-title--link:hover,
a.cw-mega__col-title--link:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	color: #9efc4f;
}

/* Individuelle Fläche eines Bereichs (im Design bei „Unternehmen" unter
   „Über uns"): hellere Fläche mit mittig gesetztem Text. Sie füllt die Höhe
   der Spalte aus, damit sie mit der Nachbarspalte unten bündig abschließt. */
.cw-mega__col--has-note {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.cw-mega__note {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: 120px;
	margin-top: 6px;
	padding: 24px;
	background-color: #355571;
	border-radius: 8px;
	text-align: center;
}

.cw-mega__note-text {
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
}

/* Grüner Akzent innerhalb der Fläche, gesetzt über <span class="accent">. */
.cw-mega__note-text .accent {
	color: #9efc4f;
}

.cw-mega__links {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Der Platz, den der Hover-Pfeil später einnimmt (10 px Symbol + 10 px
   Abstand), wird schon im Ruhezustand rechts freigehalten. Dadurch bleibt die
   für den Text verfügbare Breite in beiden Zuständen exakt gleich und ein
   mehrzeiliger Eintrag bricht beim Überfahren nicht anders um. */
.cw-mega__link {
	display: flex;
	align-items: center;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	padding: 12px 44px 12px 24px;
	border-radius: 8px;
	text-decoration: none;
	transition: padding-right 0.18s ease;
}

/* Hover-Zustand nach Figma-Komponente „Variante2" (Node 235:248):
   hellerer Grund, grüne Schrift und ein nach rechts zeigendes Dreieck vor der
   Beschriftung. Das Dreieck ist immer im Markup, damit der Übergang animiert
   werden kann — im Ruhezustand hat es Breite null und ist unsichtbar, beim
   Überfahren klappt es auf 10 px auf und schiebt den Text um insgesamt 20 px
   nach rechts (10 px Symbol plus 10 px Abstand, wie in der Vorlage). */
.cw-mega__link-arrow {
	flex: 0 0 auto;
	width: 0;
	margin-right: 0;
	opacity: 0;
	overflow: hidden;
	transition: width 0.18s ease, margin-right 0.18s ease, opacity 0.18s ease;
}

.cw-mega__link-text {
	min-width: 0;
}

/* Symbol für Verweise nach außen. Ersetzt das Zeichen „↗", das die Hausschrift
   nicht enthält und das der Browser sonst mit einer Ersatzschrift darstellt
   (je nach System als leeres Kästchen). Übernimmt die Textfarbe und wandert
   dadurch beim Überfahren automatisch auf Grün mit. */
.cw-mega__ext-icon {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 4px;
	vertical-align: -1px;
	flex: 0 0 auto;
}

/* Beim Überfahren wandert der reservierte Platz von rechts nach links: der
   Pfeil klappt auf 10 px auf, die rechte Polsterung geht von 44 auf 24 px
   zurück. Die Textbreite bleibt dabei über den gesamten Übergang konstant. */
.cw-mega__link:hover,
.cw-mega__link:focus-visible {
	background-color: #355571;
	color: #9efc4f;
	padding-right: 24px;
}

.cw-mega__link:hover .cw-mega__link-arrow,
.cw-mega__link:focus-visible .cw-mega__link-arrow {
	width: 10px;
	margin-right: 10px;
	opacity: 1;
}

.cw-mega__sublist {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
}

.cw-mega__link--sub {
	padding-left: 40px;
	font-size: 13px;
	opacity: 0.8;
}

/* Sprachumschalter: aktuelle Sprache in Großbuchstaben, danach ein kleines
   Dreieck. Klick öffnet eine Liste mit den übrigen Sprachen. */
.cw-mega__lang {
	position: relative;
}

.cw-mega__lang-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.48px;
	cursor: pointer;
}

.cw-mega__lang-code {
	text-transform: uppercase;
}

.cw-mega__lang-arrow {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: currentColor;
	transition: transform 0.2s ease;
}

.cw-mega__lang-trigger[aria-expanded="true"] .cw-mega__lang-arrow {
	transform: rotate(180deg);
}

.cw-mega__lang-list {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 110;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 64px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background-color: #022b4d;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.cw-mega__lang-list[hidden] {
	display: none;
}

.cw-mega__lang-option {
	display: block;
	padding: 6px 10px;
	border-radius: 6px;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
}

.cw-mega__lang-option:hover,
.cw-mega__lang-option:focus-visible {
	background-color: #355571;
	color: #9efc4f;
}

/* Such-Symbol: Lupe, 17 x 17 px, öffnet ein schlankes Suchformular. */
.cw-mega__search {
	position: relative;
	display: flex;
	align-items: center;
}

.cw-mega__search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

/* `width: max-content` ist hier entscheidend: Ohne eigene Breitenangabe
   orientiert sich ein absolut gesetztes Element an seinem Bezugsrahmen — das
   ist hier nur das schmale Lupensymbol. Das Eingabefeld wurde dadurch auf
   wenige Pixel zusammengedrückt. */
.cw-mega__search-form {
	position: absolute;
	top: calc(100% + 13px);
	right: 0;
	z-index: 110;
	display: flex;
	align-items: center;
	width: 320px;
	max-width: 90vw;
	padding: 8px;
	background-color: #022b4d;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.cw-mega__search-form[hidden] {
	display: none;
}

/* Sichtbar nur für Screenreader — das Suchfeld braucht ein Label, aber die
   Lupe im Auslöser macht den Zweck optisch schon deutlich. */
.cw-mega__search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Das Theme setzt Eingabefeldern generell `width: 100%`; das Feld füllt damit
   die Breite des Formulars aus, die oben festgelegt ist. */
.cw-mega__search-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 8px 12px;
	border: none;
	border-radius: 8px;
	background-color: #ffffff;
	color: #022b4d;
	font-family: inherit;
	font-size: 14px;
}

/* Sichtbarer Fokus (a11y) — kein outline: none ohne Alternative. */
.cw-mega__trigger:focus-visible,
.cw-mega__link-toplevel:focus-visible,
a.cw-mega__col-title--link:focus-visible,
.cw-mega__link:focus-visible,
.cw-mega__lang-trigger:focus-visible,
.cw-mega__search-trigger:focus-visible,
.cw-mega__search-input:focus-visible {
	outline: 2px solid #9efc4f;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cw-mega__trigger-icon,
	.cw-mega__trigger,
	.cw-mega__link-toplevel,
	a.cw-mega__col-title--link,
	.cw-mega__link,
	.cw-mega__link-arrow,
	.cw-mega__lang-arrow {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Kaskaden-Schutz gegen Elementor-, Kit- und Plugin-Styles
 *
 * Ohne diesen Block gewinnen fremde Regeln mit höherer Spezifität und das
 * Menü wird unlesbar. Im Test am 2026-07-20 gemessen:
 *   - Panel-Links erbten `color: rgb(60, 60, 60)` → dunkelgrau auf Dunkelblau
 *   - der geöffnete Auslöser bekam den grünen Button-Hintergrund aus dem
 *     Elementor-Kit-CSS statt der dezenten Aufhellung
 *
 * Farb- und Hintergrund-Angaben werden deshalb bewusst mit `!important`
 * festgeschrieben. Das ist hier vertretbar, weil alle Selektoren im eigenen
 * `.cw-mega`-Namespace liegen und nichts außerhalb des Widgets beeinflussen.
 * ------------------------------------------------------------------------- */
.cw-mega .cw-mega__link,
.cw-mega .cw-mega__col-title,
.cw-mega a.cw-mega__col-title--link,
.cw-mega .cw-mega__link-toplevel,
.cw-mega .cw-mega__trigger {
	color: #ffffff !important;
}

.cw-mega .cw-mega__trigger,
.cw-mega .cw-mega__link-toplevel,
.cw-mega .cw-mega__link,
.cw-mega a.cw-mega__col-title--link {
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Geometrie der Leiste ebenfalls festschreiben — Elementor setzt sonst eigene
   Polsterungen und Schriftstärken auf Schaltflächen und Verweise. */
.cw-mega .cw-mega__trigger,
.cw-mega .cw-mega__link-toplevel {
	padding: 32px 16px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 16px !important;
	border-radius: 0 !important;
	text-transform: uppercase !important;
}

.cw-mega .cw-mega__trigger[aria-expanded="true"] {
	background-color: #355571 !important;
}

.cw-mega .cw-mega__trigger:hover,
.cw-mega .cw-mega__trigger:focus-visible,
.cw-mega .cw-mega__link-toplevel:hover,
.cw-mega .cw-mega__link-toplevel:focus-visible {
	color: #9efc4f !important;
}

.cw-mega .cw-mega__link:hover,
.cw-mega .cw-mega__link:focus-visible,
.cw-mega a.cw-mega__col-title--link:hover,
.cw-mega a.cw-mega__col-title--link:focus-visible {
	background-color: #355571 !important;
	color: #9efc4f !important;
}

/* Der Pfeil darf vom Kaskaden-Schutz oben nicht auf transparent gesetzt und
   nicht in der Breite festgenagelt werden — er lebt von der Animation. */
.cw-mega .cw-mega__link-arrow {
	background: none !important;
	padding: 0 !important;
	border: none !important;
	color: inherit !important;
}

/* Das Außen-Symbol darf vom Kaskaden-Schutz nicht eingefärbt werden — es
   folgt der Textfarbe seines Eintrags. */
.cw-mega .cw-mega__ext-icon {
	background: none !important;
	padding: 0 !important;
	border: none !important;
	color: inherit !important;
}

/* Die individuelle Fläche behält ihren Grund und ihre Schriftfarben. */
.cw-mega .cw-mega__note {
	background-color: #355571 !important;
}

.cw-mega .cw-mega__note-text {
	color: #ffffff !important;
}

.cw-mega .cw-mega__note-text .accent {
	color: #9efc4f !important;
}

/* Der geöffnete Auslöser trägt die Grün-auf-Blau-Kombination aus dem Design —
   auch wenn der Mauszeiger darauf steht. Steht bewusst nach den Hover-Regeln. */
.cw-mega .cw-mega__trigger[aria-expanded="true"],
.cw-mega .cw-mega__trigger[aria-expanded="true"]:hover,
.cw-mega .cw-mega__trigger[aria-expanded="true"]:focus-visible {
	color: #9efc4f !important;
	background-color: #355571 !important;
}

/* Kaskaden-Schutz für Logo, Sprachumschalter und Suche — dieselbe Begründung
   wie oben: Elementor- und Kit-Styles greifen sonst auf Verweise und
   Schaltflächen durch. */
.cw-mega .cw-mega__logo,
.cw-mega .cw-mega__lang-trigger,
.cw-mega .cw-mega__lang-option,
.cw-mega .cw-mega__search-trigger {
	color: #ffffff !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.cw-mega .cw-mega__lang-option:hover,
.cw-mega .cw-mega__lang-option:focus-visible {
	background-color: #355571 !important;
	color: #9efc4f !important;
}

.cw-mega .cw-mega__lang-list,
.cw-mega .cw-mega__search-form {
	background-color: #022b4d !important;
}

.cw-mega .cw-mega__search-input {
	background-color: #ffffff !important;
	color: #022b4d !important;
	border: none !important;
}

/* ── Widescreen / 4K ──
   Auf sehr großen Bildschirmen (ab 2500 px) wirkt die feste 14-px-Schrift der
   Navigation zu klein. Ab hier skalieren Leiste, Logo, Aktionen und der
   Dropdown-Inhalt proportional mit. Unterhalb bleibt alles unverändert.
   (Redmine #18456, Rückmeldung Samuel Wenz.) */
@media (min-width: 2500px) {
	.cw-mega {
		/* Leiste um ~50 % höher als die Standard-80px, damit Logo und die
		   vergrößerte Navigation nicht mehr über den Balken hinausragen
		   (Rückmeldung Samuel Wenz, 4K-Darstellung). Logogröße bleibt. */
		height: 120px;
		padding: 0 40px;
	}
	.cw-mega .cw-mega__trigger,
	.cw-mega .cw-mega__link-toplevel {
		font-size: 20px !important;
		padding-top: 40px;
		padding-bottom: 40px;
		line-height: 22px;
		gap: 8px;
	}
	.cw-mega__logo {
		width: 288px;
		height: 46px;
	}
	.cw-mega__logo-image {
		max-width: 288px;
		max-height: 46px;
	}
	.cw-mega__logo-icon {
		font-size: 46px;
	}
	.cw-mega__actions {
		gap: 28px;
	}
	.cw-mega__actions svg {
		width: 26px;
		height: 26px;
	}
	.cw-mega__trigger-icon svg {
		width: 18px;
		height: 18px;
	}
	/* Dropdown-Inhalt an die größere Leiste angleichen (proportional zur 20-px-Nav) */
	.cw-mega .cw-mega__col-title {
		font-size: 20px !important;
	}
	.cw-mega .cw-mega__link-text {
		font-size: 18px;
	}
	.cw-mega .cw-mega__link--sub .cw-mega__link-text {
		font-size: 16px;
	}
}