/**
 * Header: Restyling der bestehenden Header-Zeile + Mega-Menü-Flyouts + Mobile-Drawer.
 *
 * Gliederung:
 *   1. Bestehender Header (Overrides)
 *   2. Mega-Menü / Flyouts
 *   3. Menüpunkte im Flyout
 *   4. Mobile-Drawer
 *
 * @package TiMd\Hfw
 */

/* ==========================================================================
   1. Bestehender Header
   ========================================================================== */

/**
 * .ti-md-hfw-header wird vom JS auf das Element gesetzt, das
 * config/header.php → attach.root_selector benennt (aktuell .module-header).
 * Dadurch zeigt kein CSS hier auf Theme-Klassen — ändert sich das Markup,
 * reicht eine Zeile in der Config.
 */

.ti-md-hfw-header {
	--ti-md-hfw-header-current-height: var(--ti-md-hfw-header-height);

	/* Bezugspunkt fuer die Flyouts (top: 100%). Das JS haengt sie direkt
	   hierher, damit kein innerer Container den Bezug uebernimmt. */
	position: relative;

	/* Die Flyouts ragen aus dem Header heraus und duerfen nicht
	   beschnitten werden. */
	overflow: visible;
	transition: height var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing);
}

/* Verkleinerter Zustand, wird per JS gesetzt. */
.ti-md-hfw-header.is-ti-md-hfw-shrunk {
	--ti-md-hfw-header-current-height: var(--ti-md-hfw-header-height-shrunk);
}

/* Hover-Underline der Hauptnavigation. */
.ti-md-hfw-header-active [data-ti-md-hfw-trigger] {
	position: relative;
}

.ti-md-hfw-header-active [data-ti-md-hfw-trigger]::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--ti-md-hfw-color-primary);
	content: "";
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing);
}

.ti-md-hfw-header-active [data-ti-md-hfw-trigger]:hover::after,
.ti-md-hfw-header-active [data-ti-md-hfw-trigger].is-active::after {
	transform: scaleX(1);
}

/* --- Hervorhebungen in theme-gerenderten Menues ---------------------------
   Gesetzt von src/Frontend/Header/MenuClasses.php ueber nav_menu_css_class.
   Greift damit auch im Mini-Header, den das Theme ausgibt. */

/* Die Theme-Regel .module-header .menu-item > a wiegt gleich schwer und wird
   spaeter geladen; .menu-item mitzunehmen gibt den Ausschlag. */
.ti-md-hfw-header-active .menu-item.ti-md-hfw-emphasis-bold > a {
	color: var(--ti-md-hfw-color-accent);

	font-weight: 600;
}

.ti-md-hfw-header-active .menu-item.ti-md-hfw-emphasis-button > a {
	padding: var(--ti-md-hfw-space-3xs) var(--ti-md-hfw-space-sm);
	border: 2px solid var(--ti-md-hfw-color-primary);
	border-radius: var(--ti-md-hfw-radius-pill);
	background: var(--ti-md-hfw-color-primary);
	color: var(--ti-md-hfw-color-primary-contrast);
	font-weight: var(--ti-md-hfw-font-weight-medium);
}

.ti-md-hfw-header-active .menu-item.ti-md-hfw-emphasis-button > a:hover {
	background: var(--ti-md-hfw-color-primary-hover-bg);
	color: var(--ti-md-hfw-color-primary-hover-text);
}

/* Trennstrich vor dem Sprachumschalter, wie im Design. */
/**
 * Trennlinie vor der Sprachwahl.
 *
 * Sie haengt am letzten regulaeren Eintrag davor, nicht am ersten
 * Sprach-Eintrag: Das Theme blendet je nach Seitensprache eine der beiden
 * Sprachen aus, und an einem ausgeblendeten Element waere auch die Linie weg.
 * Sie sitzt mittig im Abstand der Liste (1.5em).
 */
.ti-md-hfw-header-active
	.module-header__menu-service
	li:not([class*="weglot"]):has(+ li[class*="weglot"]) {
	position: relative;
}

.ti-md-hfw-header-active
	.module-header__menu-service
	li:not([class*="weglot"]):has(+ li[class*="weglot"])::after {
	position: absolute;
	top: 50%;
	right: -0.75em;

	/* Volle Hoehe der Metazeile; der Wert kommt aus dem Theme. */
	height: var(--module-header-meta-height, calc(40 * var(--ti-md-hfw-u)));
	border-left: 1px solid var(--theme-color-gray, #b3b2b2);
	content: "";
	transform: translateY(-50%);
}


/* ==========================================================================
   2. Mega-Menü / Flyouts
   ========================================================================== */

/**
 * Position: fixed statt absolute.
 *
 * Die Oberkante setzt das JS aus der gemessenen Header-Unterkante
 * (--ti-md-hfw-megamenu-top). Damit ist die Platzierung unabhaengig davon,
 * welcher Vorfahre positioniert ist und wie hoch er gerade ist — beides
 * bestimmt Theme-CSS, das nach unserem laedt.
 */
.ti-md-hfw-megamenu {
	position: fixed;
	top: var(--ti-md-hfw-megamenu-top, 0);
	right: 0;
	left: 0;
	/* Nie breiter als das Fenster, auch wenn das Panel-Mass groesser ist. */
	max-width: min(var(--ti-md-hfw-panel-max), calc(100vw - 2 * var(--ti-md-hfw-space-md)));
	margin-inline: auto;
	z-index: var(--ti-md-hfw-header-z);
}

.ti-md-hfw-megamenu[hidden] {
	display: none;
}

/* --- Panel-Grundform ------------------------------------------------------
   Laut Design: heller Verlauf von oben nach unten, weicher Schlagschatten,
   grosse Rundung an den unteren Ecken. */

.ti-md-hfw-megamenu__panel {
	position: absolute;
	top: 0;
	background:
		linear-gradient(
			180deg,
			var(--theme-color-light, #f2f2f2) 0,
			var(--ti-md-hfw-color-surface) calc(120 * var(--ti-md-hfw-u))
		);
	border-radius: 0 0 var(--ti-md-hfw-radius-panel) var(--ti-md-hfw-radius-panel);
	box-shadow: var(--ti-md-hfw-shadow-flyout);

	/* Das Panel reicht hoechstens bis kurz vor den unteren Fensterrand und
	   scrollt darueber hinaus in sich selbst. */
	max-height: calc(100vh - var(--ti-md-hfw-megamenu-top, 0px) - var(--ti-md-hfw-space-lg));
	overflow-y: auto;
	opacity: 0;
	transform: translateY(calc(-8 * var(--ti-md-hfw-u)));
	transition:
		opacity var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing),
		transform var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing);
}

.ti-md-hfw-megamenu__panel[hidden] {
	display: none;
}

.ti-md-hfw-megamenu__panel.is-open {
	opacity: 1;
	transform: translateY(0);
}

/* --- Breiter Typ: Spalten ------------------------------------------------- */

.ti-md-hfw-megamenu__panel--columns,
.ti-md-hfw-megamenu__panel--featured {
	right: 0;
	left: 0;
}

.ti-md-hfw-megamenu__panel--columns .ti-md-hfw-megamenu__inner,
.ti-md-hfw-megamenu__panel--featured .ti-md-hfw-megamenu__inner {
	display: grid;
	box-sizing: border-box;
	gap: var(--ti-md-hfw-space-2xl) var(--ti-md-hfw-space-xl);
	grid-template-columns: repeat(var(--ti-md-hfw-megamenu-columns, 3), minmax(0, 1fr));

	/* Keine eigene max-width noetig: Das Panel ist bereits Inhaltsbreite
	   plus zweimal Polsterung breit, der Inhalt landet damit exakt auf der
	   Kante des regulaeren Seiteninhalts. */
	padding: var(--ti-md-hfw-panel-padding);
}

/* Teaser-Spalte rechts. */
.ti-md-hfw-megamenu__panel--featured .ti-md-hfw-megamenu__inner {
	grid-template-columns:
		repeat(var(--ti-md-hfw-megamenu-columns, 3), minmax(0, 1fr))
		minmax(0, 0.85fr);
}

/* --- Schmaler Typ --------------------------------------------------------
   Laut Design sitzen die schmalen Panels nicht unter ihrem Ausloeser,
   sondern rechtsbuendig an derselben Kante wie die breiten. */

.ti-md-hfw-megamenu__panel--simple {
	right: 0;
	left: auto;
	width: min(90vw, calc(450 * var(--ti-md-hfw-u)));
}

.ti-md-hfw-megamenu__panel--simple .ti-md-hfw-megamenu__inner {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: var(--ti-md-hfw-space-md);

	/* Dieselbe Polsterung wie im breiten Panel. */
	padding: var(--ti-md-hfw-panel-padding);
}

/* Im schmalen Panel sind die Eintraege normale Links, keine
   Gruppenueberschriften – deshalb ohne Versalien und Trennlinie.
   CTA- und Teaser-Karten sind ausgenommen: Sie brauchen ihre eigene
   Polsterung, sonst klebt der Text am Rand. */
.ti-md-hfw-megamenu__panel--simple
	.ti-md-hfw-menu-item--level-1:not(.ti-md-hfw-menu-item--cta):not(.ti-md-hfw-menu-item--teaser)
	> .ti-md-hfw-menu-item__link {
	padding: 0;
	border-bottom: 0;
	margin-bottom: 0;
	letter-spacing: normal;
	text-transform: none;
}

/* Gruppenueberschrift-Optik auch bei CTA/Teaser abschalten. */
.ti-md-hfw-megamenu__panel--simple .ti-md-hfw-menu-item--cta > .ti-md-hfw-menu-item__link,
.ti-md-hfw-megamenu__panel--simple .ti-md-hfw-menu-item--teaser > .ti-md-hfw-menu-item__link {
	border-bottom: 0;
	margin-bottom: 0;
	letter-spacing: normal;
	text-transform: none;
}

/* --- Spalten und Gruppen --------------------------------------------------
   Jede Spalte ist ein eigener Block im Raster: Startspalte und Breite kommen
   aus den Menuepunkt-Feldern. Mehrere Gruppen in derselben Spalte stehen
   untereinander. Eine Gruppe, die mehrere Spalten breit ist, laesst ihre
   Eintraege per CSS-Spalten darin umfliessen — so spannt die Trennlinie unter
   der Ueberschrift ueber die volle Gruppenbreite. */

.ti-md-hfw-megamenu__column {
	display: flex;
	flex-direction: column;
	/* Abstand zwischen zwei Gruppen in derselben Spalte: nur etwas mehr als
	   der Zeilenabstand der Eintraege, nicht der grosse Rasterabstand. */
	gap: var(--ti-md-hfw-space-md);
	grid-column: var(--ti-md-hfw-col-start, auto) / span var(--ti-md-hfw-col-span, 1);
}

.ti-md-hfw-megamenu__panel--columns .ti-md-hfw-menu-item--level-1 > .ti-md-hfw-menu-item__children,
.ti-md-hfw-megamenu__panel--featured .ti-md-hfw-menu-item--level-1 > .ti-md-hfw-menu-item__children {
	display: block;
	columns: var(--ti-md-hfw-span, 1);
	column-gap: var(--ti-md-hfw-space-xl);
}

/* Eintraege duerfen nicht ueber den Spaltenumbruch zerrissen werden. */
.ti-md-hfw-menu-item--level-1 > .ti-md-hfw-menu-item__children > .ti-md-hfw-menu-item {
	break-inside: avoid;
	margin-bottom: var(--ti-md-hfw-space-sm);
}

.ti-md-hfw-megamenu__close {
	position: absolute;
	top: var(--ti-md-hfw-space-sm);
	right: var(--ti-md-hfw-space-sm);
	display: none; /* nur bei Klick-Trigger sichtbar */
	padding: var(--ti-md-hfw-space-3xs);
	border: 0;
	background: none;
	color: var(--ti-md-hfw-color-text-muted);
	cursor: pointer;
}

.ti-md-hfw-megamenu.is-click-mode .ti-md-hfw-megamenu__close {
	display: block;
}

/* --- Teaser-Karte --------------------------------------------------------- */

.ti-md-hfw-megamenu__featured {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--ti-md-hfw-space-sm);
}

.ti-md-hfw-teaser {
	display: block;
	overflow: hidden;
	padding: var(--ti-md-hfw-space-sm) var(--ti-md-hfw-space-md);
	border-radius: var(--ti-md-hfw-radius-md);
	background:
		linear-gradient(120deg, var(--theme-color-darkblue, #00325b) 0%, #0a4a7d 100%);
	color: #ffffff;
	text-decoration: none;
}

.ti-md-hfw-teaser__title {
	display: block;
	font-size: var(--ti-md-hfw-font-size-base);
	line-height: 1.25;
}

.ti-md-hfw-teaser__text {
	display: block;
	margin-top: var(--ti-md-hfw-space-3xs);
	font-size: var(--ti-md-hfw-font-size-subtitle);
	font-weight: var(--ti-md-hfw-font-weight-light);
	opacity: 0.85;
}

/* ==========================================================================
   3. Menüpunkte im Flyout
   ========================================================================== */

/* --- Ebene 1: Gruppenüberschrift mit Trennlinie ---------------------------
   Teaser-Karten und CTAs stehen ebenfalls auf Ebene 1, sind aber keine
   Ueberschriften und deshalb ausgenommen: Sie behalten ihre eigene Flaeche,
   Schriftlage und Polsterung. */

.ti-md-hfw-menu-item--level-1:not(.ti-md-hfw-menu-item--teaser):not(.ti-md-hfw-menu-item--cta)
	> .ti-md-hfw-menu-item__link {
	padding: 0 0 var(--ti-md-hfw-space-2xs);
	border-bottom: 1px solid var(--ti-md-hfw-color-border);
	margin-bottom: var(--ti-md-hfw-space-sm);
	color: var(--ti-md-hfw-color-accent);
	font-size: var(--ti-md-hfw-font-size-base);
	font-weight: var(--ti-md-hfw-font-weight-regular);
	line-height: 1.2;
}

.ti-md-hfw-menu-item--level-1:not(.ti-md-hfw-menu-item--teaser):not(.ti-md-hfw-menu-item--cta)
	> .ti-md-hfw-menu-item__link:hover,
.ti-md-hfw-menu-item--level-1:not(.ti-md-hfw-menu-item--teaser):not(.ti-md-hfw-menu-item--cta)
	> .ti-md-hfw-menu-item__link:focus-visible {
	background: none;
}

/* --- Ebene 2: Eintrag mit Untertitel -------------------------------------- */

.ti-md-hfw-menu-item__link {
	display: flex;
	align-items: flex-start;
	padding: 0;
	color: var(--ti-md-hfw-color-text);
	font-size: var(--ti-md-hfw-font-size-base);
	font-weight: var(--ti-md-hfw-font-weight-regular);
	gap: var(--ti-md-hfw-space-2xs);
	line-height: 1.3;
	text-decoration: none;
	transition: color var(--ti-md-hfw-duration-fast) var(--ti-md-hfw-easing);
}

/**
 * Beim Ueberfahren faehrt ein grauer Balken hinter den Text, wie in der
 * Hauptzeile des Headers. Die Schriftfarbe bleibt, damit Ueberschriften
 * ihr Blau behalten.
 *
 * Er ist der Hintergrund des Titels, keine eigene Flaeche darunter. Dadurch
 * folgt er dem Text: Bricht der Eintrag um, bekommt jede Zeile ihr eigenes
 * Stueck in ihrer eigenen Laenge. `box-decoration-break: clone` sorgt dafuer,
 * dass jedes Zeilenstueck als eigener Hintergrund gezeichnet wird.
 *
 * Aufgezogen wird ueber die Hoehe von `background-size` -- `background-size`
 * ist animierbar, anders als der Farbverlauf selbst.
 */
.ti-md-hfw-menu-item__title {
	background-image: linear-gradient(
		var(--theme-color-accent-secondary, #c9c9c9),
		var(--theme-color-accent-secondary, #c9c9c9)
	);
	/* Zusammengeklappt sitzt der Balken auf seiner spaeteren Unterkante und
	   hat keine Hoehe. Beim Aufziehen wandert die Oberkante nach oben, die
	   Unterkante bleibt -- er waechst also von unten nach oben. */
	background-position: 0 calc(1.27em - 1px);
	background-repeat: no-repeat;
	background-size: 100% 0;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	transition:
		background-size var(--ti-md-hfw-duration-slow, 350ms) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1)),
		background-position var(--ti-md-hfw-duration-slow, 350ms) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

.ti-md-hfw-menu-item__link:hover .ti-md-hfw-menu-item__title,
.ti-md-hfw-menu-item__link:focus-visible .ti-md-hfw-menu-item__title {
	background-position: 0 calc(0.72em - 1px);
	background-size: 100% 0.55em;
}

/* CTAs und Teaser-Karten behalten ihren eigenen Effekt. */
.ti-md-hfw-menu-item--cta .ti-md-hfw-menu-item__title,
.ti-md-hfw-menu-item--teaser .ti-md-hfw-menu-item__title {
	background-image: none;
}

.ti-md-hfw-menu-item__children {
	display: flex;
	flex-direction: column;
	gap: var(--ti-md-hfw-space-sm);
}

/* Block statt Flex-Spalte: Nur so bleibt der Titel ein Inline-Element und
   zerfaellt beim Umbruch in Zeilenstuecke, an denen der Hover-Balken haengt. */
.ti-md-hfw-menu-item__text {
	display: block;
	min-width: 0;
}

.ti-md-hfw-menu-item__subtitle {
	display: block;
	margin-top: calc(2 * var(--ti-md-hfw-u));
	color: var(--ti-md-hfw-color-text-muted);
	font-size: var(--ti-md-hfw-font-size-subtitle);
	font-weight: var(--ti-md-hfw-font-weight-light);
	line-height: 1.35;
}

.ti-md-hfw-menu-item__badge {
	display: inline-block;
	padding: calc(1 * var(--ti-md-hfw-u)) var(--ti-md-hfw-space-3xs);
	border-radius: var(--ti-md-hfw-radius-pill);
	margin-left: var(--ti-md-hfw-space-3xs);
	background: var(--ti-md-hfw-color-primary);
	color: var(--ti-md-hfw-color-primary-contrast);
	font-size: var(--ti-md-hfw-font-size-xs);
	text-transform: uppercase;
	vertical-align: middle;
}

/* --- Teaser-Karte ---------------------------------------------------------
   Dunkelblaue Karte mit optionalem Hintergrundbild, wie im Design. Der
   Untertitel des Menuepunkts wird zur zweiten Zeile. */

.ti-md-hfw-menu-item--teaser > .ti-md-hfw-menu-item__link {
	position: relative;

	/* Eigene Stapelebene, damit Ueberblendung und Text darin bleiben. */
	z-index: 0;
	overflow: hidden;
	min-height: calc(96 * var(--ti-md-hfw-u));

	/* Text mittig in der Karte. */
	align-items: center;
	padding: var(--ti-md-hfw-space-sm) var(--ti-md-hfw-space-md);
	border-radius: var(--ti-md-hfw-radius-md);
	background-color: var(--theme-color-darkblue, #00325b);
	background-image:
		linear-gradient(120deg, rgb(0 50 91 / 92%) 0%, rgb(0 50 91 / 55%) 100%),
		var(--ti-md-hfw-teaser-image, none);
	background-position: center;
	background-size: cover;
	color: #ffffff;
	text-transform: none;
}

/**
 * Hover: Eine Flaeche in Mittel- und Hellblau blendet sich ueber die Karte,
 * die Farbe schwingt also ins Blaue statt aufzuhellen. Als eigene Ebene mit
 * `opacity` laesst sie sich weich ueberblenden -- ein Wechsel des
 * Farbverlaufs selbst waere ein harter Schnitt.
 */
.ti-md-hfw-menu-item--teaser > .ti-md-hfw-menu-item__link::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	background: linear-gradient(120deg, var(--theme-color-midblue, #009ee3) 0%, var(--theme-color-lightblue, #a1daf7) 100%);
	border-radius: inherit;
	content: "";
	opacity: 0;
	transition: opacity var(--ti-md-hfw-duration-slow, 350ms) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

.ti-md-hfw-menu-item--teaser > .ti-md-hfw-menu-item__link:hover::before,
.ti-md-hfw-menu-item--teaser > .ti-md-hfw-menu-item__link:focus-visible::before {
	opacity: 0.35;
}

/* Schrift und Bild liegen ueber der eingeblendeten Flaeche. */
.ti-md-hfw-menu-item--teaser > .ti-md-hfw-menu-item__link > * {
	position: relative;
	z-index: 1;
}

.ti-md-hfw-menu-item--teaser .ti-md-hfw-menu-item__title {
	font-size: var(--ti-md-hfw-font-size-base);
	line-height: 1.25;
}

/* Der Textblock nimmt die volle Kartenbreite ein, damit sich der Untertitel
   darauf beziehen kann. */
.ti-md-hfw-menu-item--teaser .ti-md-hfw-menu-item__text {
	width: 100%;
}

.ti-md-hfw-menu-item--teaser .ti-md-hfw-menu-item__subtitle {
	/* Bricht innerhalb der Polsterung auf 75 Prozent der Kartenbreite um,
	   damit rechts Platz fuer das Motiv bleibt. */
	max-width: 75%;
	color: rgb(255 255 255 / 85%);
}

/* Fett-Variante im Flyout. */
.ti-md-hfw-menu-item--bold > .ti-md-hfw-menu-item__link {
	font-weight: var(--ti-md-hfw-font-weight-bold);
}

/* CTA-Menüpunkt – übernimmt bewusst die Optik von .theme-button des Themes. */
.ti-md-hfw-menu-item--cta > .ti-md-hfw-menu-item__link {
	display: flex;
	min-height: calc(40 * var(--ti-md-hfw-u));
	align-items: center;
	justify-content: space-between;
	padding: var(--ti-md-hfw-space-2xs) var(--ti-md-hfw-space-sm);
	border: 2px solid var(--ti-md-hfw-color-primary);
	border-radius: var(--ti-md-hfw-radius-pill);
	background: var(--ti-md-hfw-color-primary);
	color: var(--ti-md-hfw-color-primary-contrast);
	font-size: var(--ti-md-hfw-font-size-base);
	font-weight: var(--ti-md-hfw-font-weight-regular);
	line-height: 1.2;
	text-transform: none;
	transition:
		background-color var(--ti-md-hfw-duration-slow, 350ms) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1)),
		border-color var(--ti-md-hfw-duration-slow, 350ms) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1)),
		color var(--ti-md-hfw-duration-slow, 350ms) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Beschriftung mittig, auch wenn sie zweizeilig ist. */
.ti-md-hfw-menu-item--cta .ti-md-hfw-menu-item__text {
	justify-content: center;
}

.ti-md-hfw-menu-item--cta > .ti-md-hfw-menu-item__link:hover,
.ti-md-hfw-menu-item--cta > .ti-md-hfw-menu-item__link:focus-visible {
	background: var(--ti-md-hfw-color-primary-hover-bg);
	color: var(--ti-md-hfw-color-primary-hover-text);
}

/* ==========================================================================
   4. Mobile-Drawer
   ========================================================================== */

/**
 * Vollflaechiges Overlay. Aufbau von oben nach unten:
 *   Kopfzeile    Logo + Schliessen
 *   Graue Zeile  Kontakt / Karriere / News
 *   Weisse Zeile CTA + Sprachwahl + Login
 *   Akkordeon    Hauptmenue, jede Verschachtelung eine eigene Klappe
 */

.ti-md-hfw-mobile[hidden] {
	display: none;
}

.ti-md-hfw-mobile {
	/* Seitlicher Rand aller Zeilen und der eine Einzug der Unterebenen. */
	--ti-md-hfw-mobile-pad: 16px;
	--ti-md-hfw-mobile-indent: 20px;

	position: fixed;

	/* Ueber der Leiste am unteren Rand (--ti-md-hfw-rail-z, 9000). */
	z-index: 9500;
	inset: 0;
	background: var(--ti-md-hfw-color-surface);
	overflow-y: auto;
	opacity: 0;
	transition: opacity var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing);
	z-index: calc(var(--ti-md-hfw-header-z) + 10);
}

.ti-md-hfw-mobile.is-open {
	opacity: 1;
}

.ti-md-hfw-mobile__panel {
	display: flex;
	min-height: 100%;
	flex-direction: column;
}

/* --- Kopfbereich ---------------------------------------------------------
   Die drei oberen Zeilen bleiben beim Scrollen im Drawer stehen. Sie liegen
   dafuer in einem eigenen Behaelter -- einzeln gesetzt muesste jede Zeile die
   Hoehen der darueberliegenden kennen. */

.ti-md-hfw-mobile__top {
	position: sticky;
	top: 0;

	/* Ueber den Ebenen der Eintraege: Teaser-Texte und Menuetitel liegen selbst
	   auf 1, um ihre eigenen Flaechen zu ueberdecken. */
	z-index: 5;
	background: var(--ti-md-hfw-color-surface);
}

/* --- Kopfzeile ------------------------------------------------------------ */

.ti-md-hfw-mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ti-md-hfw-space-sm) var(--ti-md-hfw-mobile-pad);
}

.ti-md-hfw-mobile__logo img {
	display: block;
	/* Dieselbe Hoehe wie das Logo im Header (logo.scss), damit es beim
	   Oeffnen des Drawers an Ort und Stelle bleibt. */
	height: calc(22 * var(--ti-md-hfw-u));
	width: auto;
}

/* Dieselbe Flaeche wie der Burger: 32x32 mit einem Zeichen von 24x24. */
.ti-md-hfw-mobile__close {
	display: flex;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 0;
	background: none;
	color: var(--ti-md-hfw-color-accent);
	cursor: pointer;
}

/* Beim Ueberfahren schnurrt das Zeichen federnd zusammen und wird hellblau. */
.ti-md-hfw-mobile__close .ti-md-hfw-icon {
	width: 24px;
	height: 24px;

	/* Ergibt dieselbe Strichstaerke wie die Balken des Burgers. */
	stroke-width: 2.75;
	transition:
		scale var(--ti-md-hfw-duration-spring, 700ms) var(--ti-md-hfw-easing-spring, ease-out),
		color var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing-soft, ease-out);
}

.ti-md-hfw-mobile__close:hover .ti-md-hfw-icon,
.ti-md-hfw-mobile__close:focus-visible .ti-md-hfw-icon {
	color: var(--theme-color-midblue, #009ee3);
	scale: 0.7;
}

/* --- Graue Zeile: Kontakt / Karriere / News ------------------------------- */

.ti-md-hfw-mobile__links {
	display: flex;
	justify-content: flex-end;
	padding: var(--ti-md-hfw-space-2xs) var(--ti-md-hfw-mobile-pad);
	background: var(--ti-md-hfw-color-surface-alt);
	gap: var(--ti-md-hfw-space-md);
}

.ti-md-hfw-mobile__links a {
	color: var(--ti-md-hfw-color-accent);
	font-size: var(--ti-md-hfw-font-size-sm);
	text-decoration: none;
}

/* --- Weisse Zeile: CTA, Sprachwahl, Login --------------------------------- */

.ti-md-hfw-mobile__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px var(--ti-md-hfw-mobile-pad);
	gap: var(--ti-md-hfw-space-sm);
}

.ti-md-hfw-mobile__cta {
	display: inline-flex;
	align-items: center;
	padding: var(--ti-md-hfw-space-2xs) var(--ti-md-hfw-space-md);
	border: 2px solid var(--ti-md-hfw-color-primary);
	border-radius: var(--ti-md-hfw-radius-pill);
	background: var(--ti-md-hfw-color-primary);
	color: var(--ti-md-hfw-color-primary-contrast);
	font-size: var(--ti-md-hfw-font-size-sm);
	font-weight: var(--ti-md-hfw-font-weight-medium);
	text-decoration: none;
}

.ti-md-hfw-mobile__meta-links {
	display: flex;
	align-items: center;
	gap: var(--ti-md-hfw-space-md);
}

.ti-md-hfw-mobile__meta-links a {
	color: var(--ti-md-hfw-color-accent);
	font-size: var(--ti-md-hfw-font-size-sm);
	text-decoration: none;
}

/* Derselbe Schnitt wie im Desktop-Header. */
.ti-md-hfw-mobile__meta-links a.is-bold {
	font-weight: 600;
}

/* --- Akkordeon ------------------------------------------------------------
   Unterebenen stehen alle um denselben Betrag eingerueckt. Die Ebene selbst
   steht als Klasse am Eintrag (--level-1, --level-2 ...), falls einzelne
   Ebenen doch eigene Regeln brauchen. */

.ti-md-hfw-mobile__list,
.ti-md-hfw-mobile__submenu {
	padding: 0;
	margin: 0;
	list-style: none;
}

.ti-md-hfw-mobile__submenu[hidden] {
	display: none;
}

/**
 * Trennlinien -- genau zwei Stellen tragen eine:
 *
 * 1. unter jedem Punkt der ersten Ebene ausser dem letzten. Sie sitzt am
 *    Listenelement, liegt bei geoeffneter Klappe also unter der ganzen Gruppe.
 * 2. unter jedem Punkt der zweiten Ebene in den Spalten-Flyouts. Sie sitzt an
 *    der Zeile und bleibt damit beim Aufklappen als Unterstreichung der
 *    Ueberschrift stehen. Einfache Listen fuehren keine.
 */
.ti-md-hfw-mobile__list > .ti-md-hfw-mobile__item:not(:last-child) {
	border-bottom: 1px solid var(--ti-md-hfw-color-border);
}

.ti-md-hfw-mobile__item:not(.ti-md-hfw-mobile__item--layout-simple)
	> .ti-md-hfw-mobile__submenu
	> .ti-md-hfw-mobile__item--level-2
	> .ti-md-hfw-mobile__row {
	border-bottom: 1px solid var(--ti-md-hfw-color-border);
}

/* Ebene 1 laeuft ueber die volle Breite, tiefere Ebenen stehen eingerueckt. */
.ti-md-hfw-mobile__row {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding-left: var(--ti-md-hfw-mobile-pad);
}

.ti-md-hfw-mobile__item:not(.ti-md-hfw-mobile__item--level-1) > .ti-md-hfw-mobile__row {
	padding-left: 0;
	margin-left: calc(var(--ti-md-hfw-mobile-pad) + var(--ti-md-hfw-mobile-indent));
}

/**
 * Alle Ebenen im Drawer gleich gross; unterschieden wird ueber Versalien,
 * Farbe und Einrueckung, nicht ueber die Schriftgroesse.
 *
 * Feste 16px statt der Einheit --ti-md-hfw-u: die haengt an der fluiden
 * Wurzelgroesse des Themes und ergaebe je nach Fensterbreite 14 bis 27px.
 */
.ti-md-hfw-mobile__link,
.ti-md-hfw-mobile .ti-md-hfw-menu-item__link {
	font-size: 16px;
}

.ti-md-hfw-mobile__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: calc(2 * var(--ti-md-hfw-u));
	padding: 8px 0;
	color: var(--ti-md-hfw-color-accent);
	font-weight: var(--ti-md-hfw-font-weight-regular, 400);
	line-height: 1.3;
	text-decoration: none;
}

/* Die oberste Ebene steht etwas luftiger als ihre Unterpunkte. */
.ti-md-hfw-mobile__item--level-1 > .ti-md-hfw-mobile__row .ti-md-hfw-mobile__link {
	padding: 12px 0;
}

/**
 * Versalien steuert das Feld "Großbuchstaben" am Menüpunkt; ab der zweiten
 * Ebene ist es vorgegeben. CTAs und Teaser bleiben ausgenommen, sie tragen
 * eigene Beschriftungen.
 */
.ti-md-hfw-menu-item--uppercase:not(.ti-md-hfw-menu-item--teaser):not(.ti-md-hfw-menu-item--cta)
	> .ti-md-hfw-menu-item__link,
.ti-md-hfw-mobile__item--uppercase > .ti-md-hfw-mobile__row .ti-md-hfw-mobile__link {
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ti-md-hfw-mobile__item--level-3 > .ti-md-hfw-mobile__row .ti-md-hfw-mobile__link {
	color: var(--ti-md-hfw-color-text);
}
/* Steht der oberste Punkt auf "Einfache Liste", lesen sich seine Eintraege
   wie die dritte Ebene der Spalten-Flyouts: normal geschrieben, in Textfarbe
   und ohne Versalien. */
.ti-md-hfw-mobile__item--layout-simple
	.ti-md-hfw-mobile__item--level-2
	> .ti-md-hfw-mobile__row
	.ti-md-hfw-mobile__link {
	color: var(--ti-md-hfw-color-text);
	letter-spacing: normal;
	text-transform: none;
}

/* Untertitel wie im Flyout: kleiner, grau und in der leichten Schrift. */
.ti-md-hfw-mobile__subtitle {
	color: var(--ti-md-hfw-color-text-muted);
	font-size: var(--ti-md-hfw-font-size-subtitle);
	font-weight: var(--ti-md-hfw-font-weight-light, 300);
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
}


.ti-md-hfw-mobile__toggle {
	display: flex;
	width: calc(56 * var(--ti-md-hfw-u));
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;

	/* Geschlossen dunkelblau wie die Schrift, geoeffnet im hellen Blau --
	   so ist der offene Zweig auch ohne Hinterlegung erkennbar. */
	color: var(--ti-md-hfw-color-accent);
	cursor: pointer;
	transition: color var(--ti-md-hfw-duration-fast) var(--ti-md-hfw-easing);
}

.ti-md-hfw-mobile__toggle[aria-expanded="true"] {
	color: var(--ti-md-hfw-color-primary);
}

.ti-md-hfw-mobile__toggle .ti-md-hfw-icon {
	transition: transform var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing);
}

.ti-md-hfw-mobile__toggle[aria-expanded="true"] .ti-md-hfw-icon {
	transform: rotate(180deg);
}

/* Teaser-Karten im Drawer. */
.ti-md-hfw-mobile__submenu > .ti-md-hfw-menu-item--teaser {
	display: block;
	margin-left: calc(var(--ti-md-hfw-mobile-pad) + var(--ti-md-hfw-mobile-indent));
	padding: var(--ti-md-hfw-space-xs) var(--ti-md-hfw-space-md) var(--ti-md-hfw-space-xs) 0;
}

/* Stehen zwei Karten direkt untereinander, addieren sich sonst unterer und
   oberer Abstand zum doppelten Zwischenraum. Der obere entfaellt deshalb --
   zwischen den Karten bleibt genau ein Abstand. */
.ti-md-hfw-mobile__submenu > .ti-md-hfw-menu-item--teaser + .ti-md-hfw-menu-item--teaser {
	padding-top: 0;
}

/* Ab Desktop kein Drawer. */
@media (min-width: 1000px) {
	.ti-md-hfw-mobile {
		display: none;
	}
}

/* Unter Desktop keine Flyouts. */
@media (max-width: 999px) {
	.ti-md-hfw-megamenu {
		display: none;
	}
}