/**
 * Schwebende Hilfsnavigation: Rail, Buttons, Panels.
 *
 * Gliederung:
 *   1. Container
 *   2. Rail (Desktop, sticky an der Seite)
 *   3. Buttons (Aufklappen bei Hover)
 *   4. Dialoge (Suche, Kontakt)
 *   5. Mobile (App-Leiste unten, schmalere Dialoge)
 *
 * @package TiMd\Hfw
 */

/* ==========================================================================
   1. Container
   ========================================================================== */

.ti-md-hfw-floating {
	position: fixed;
	z-index: var(--ti-md-hfw-rail-z);
	inset: 0;
	font-family: var(--ti-md-hfw-font-family);
	pointer-events: none; /* nur Kinder sind klickbar */
}

.ti-md-hfw-floating > * {
	pointer-events: auto;
}

/* Bei offenem Mobile-Menue tritt die Leiste zurueck: Sie laege sonst ueber
   den untersten Menuepunkten. Suche und Kontakt sind im Drawer erreichbar. */
body.ti-md-hfw-mobile-open .ti-md-hfw-floating {
	display: none;
}

.ti-md-hfw-floating__backdrop {
	position: absolute;
	inset: 0;
	background: var(--ti-md-hfw-color-backdrop);
	opacity: 0;
	transition: opacity var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing);
}

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

.ti-md-hfw-floating.has-open-panel .ti-md-hfw-floating__backdrop {
	opacity: 1;
}

/* ==========================================================================
   2. Rail
   ========================================================================== */

.ti-md-hfw-rail {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/* Etwas vom Fensterrand eingerueckt. */
.ti-md-hfw-floating--right .ti-md-hfw-rail {
	right: 40px;
}

.ti-md-hfw-floating--left .ti-md-hfw-rail {
	left: 40px;
}

.ti-md-hfw-rail__list {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	gap: 0;
	list-style: none;

	/* Jeder Eintrag haengt an der Aussenkante. Ohne das dehnt die Liste alle
	   Eintraege auf die Breite des gerade aufgeklappten Buttons aus, und die
	   uebrigen wandern mit. */
	align-items: flex-end;
}

.ti-md-hfw-floating--left .ti-md-hfw-rail__list {
	align-items: flex-start;
}

/**
 * Stapelreihenfolge: Je weiter unten, desto weiter vorn -- so faellt der
 * Schatten der unteren Buttons auf die darueberliegenden. Der aufgeklappte
 * Button liegt immer ganz vorn.
 */
.ti-md-hfw-rail__item {
	position: relative;
	z-index: 1;
}

.ti-md-hfw-rail__item:nth-child(2) {
	z-index: 2;
}

.ti-md-hfw-rail__item:nth-child(3) {
	z-index: 3;
}

.ti-md-hfw-rail__item:hover,
.ti-md-hfw-rail__item:focus-within {
	z-index: 4;
}

/**
 * Farbverlauf hinter den Buttons.
 *
 * Sichtbar sind nur die zwei Pixel, die am oberen und unteren Ende des
 * Stapels herausragen. Er sitzt am Eintrag und waechst deshalb beim
 * Aufklappen mit.
 */
.ti-md-hfw-rail__item::before {
	position: absolute;
	background: linear-gradient(90deg, var(--theme-color-darkblue, #00325b) 0%, var(--theme-color-midblue, #009ee3) 100%);
	content: "";
	inset: 0;
	z-index: -1;
}

.ti-md-hfw-rail__item:first-child::before {
	top: -2px;
	border-radius: var(--ti-md-hfw-radius-md) var(--ti-md-hfw-radius-md) 0 0;
}

.ti-md-hfw-rail__item:last-child::before {
	bottom: -2px;
	border-radius: 0 0 var(--ti-md-hfw-radius-md) var(--ti-md-hfw-radius-md);
}


/* ==========================================================================
   3. Buttons
   ========================================================================== */

.ti-md-hfw-btn {
	display: flex;
	overflow: hidden;
	width: var(--ti-md-hfw-btn-size);
	height: var(--ti-md-hfw-btn-size);
	box-sizing: border-box;
	align-items: center;
	padding: 0;
	border: 0;
	background: var(--ti-md-hfw-color-surface);
	color: var(--ti-md-hfw-color-accent);
	cursor: pointer;
	filter: drop-shadow(0 0 20px rgb(0 50 91 / 18%));
	gap: var(--ti-md-hfw-space-2xs);
	text-decoration: none;
	transition:
		width var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing),
		background-color var(--ti-md-hfw-duration-fast) var(--ti-md-hfw-easing),
		color var(--ti-md-hfw-duration-fast) var(--ti-md-hfw-easing);
}

/* Der Stapel ist ein Block: nur aussen abgerundet, innen stossen die
   Buttons ohne Abstand aneinander. */
.ti-md-hfw-rail__item:first-child .ti-md-hfw-btn {
	border-radius: var(--ti-md-hfw-radius-md) var(--ti-md-hfw-radius-md) 0 0;
}

.ti-md-hfw-rail__item:last-child .ti-md-hfw-btn {
	border-radius: 0 0 var(--ti-md-hfw-radius-md) var(--ti-md-hfw-radius-md);
}

.ti-md-hfw-btn__icon {
	display: flex;
	width: var(--ti-md-hfw-btn-size);
	height: var(--ti-md-hfw-btn-size);
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--ti-md-hfw-color-primary);
}

.ti-md-hfw-btn__label {
	/* Rechts derselbe Abstand wie zwischen Icon und Text: die freie Haelfte
	   der Icon-Flaeche plus der Spaltenabstand des Buttons. */
	padding-right: calc((var(--ti-md-hfw-btn-size) - var(--ti-md-hfw-icon-size)) / 2 + var(--ti-md-hfw-space-2xs));
	font-size: var(--ti-md-hfw-font-size-lg);
	opacity: 0;
	transition: opacity var(--ti-md-hfw-duration-fast) var(--ti-md-hfw-easing);
	white-space: nowrap;
}

/* Aufgehen bei Hover/Fokus. Breite per JS gesetzt, damit sie zum Text passt. */
.ti-md-hfw-btn:hover,
.ti-md-hfw-btn:focus-visible,
.ti-md-hfw-btn.is-expanded {
	width: var(--ti-md-hfw-btn-expanded-width, 180px);
}

.ti-md-hfw-btn:hover .ti-md-hfw-btn__label,
.ti-md-hfw-btn:focus-visible .ti-md-hfw-btn__label,
.ti-md-hfw-btn.is-expanded .ti-md-hfw-btn__label {
	opacity: 1;
}

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

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

/* ==========================================================================
   4. Dialoge
   ========================================================================== */

/* Liegt ueber dem Overlay, laesst dessen Klickflaeche aber frei. */
.ti-md-hfw-floating__panels {
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
}

/**
 * Mittig im Fenster, in der Breite begrenzt. Die Hoehe ergibt sich aus dem
 * Inhalt und bleibt unter der Fensterhoehe; darueber scrollt der Dialog.
 */
.ti-md-hfw-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: min(92vw, var(--ti-md-hfw-dialog-width));
	max-height: 86vh;
	padding: var(--ti-md-hfw-dialog-pad-block) var(--ti-md-hfw-dialog-pad-inline);
	border-radius: var(--ti-md-hfw-dialog-radius);
	background: var(--theme-color-light, #f2f2f2);
	box-shadow: var(--ti-md-hfw-shadow-dialog);
	color: var(--ti-md-hfw-color-accent);
	opacity: 0;
	overflow: auto;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(0.97);
	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-panel[hidden] {
	display: none;
}

.ti-md-hfw-panel.is-open {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Der Kontakt braucht Platz fuer das Bild an der rechten Kante. */
.ti-md-hfw-panel--contact {
	--ti-md-hfw-dialog-width: calc(860 * var(--ti-md-hfw-u));
	--ti-md-hfw-dialog-pad-inline: calc(72 * var(--ti-md-hfw-u));
}

.ti-md-hfw-panel__close {
	position: absolute;
	top: calc(24 * var(--ti-md-hfw-u));
	right: calc(24 * var(--ti-md-hfw-u));
	display: flex;
	width: calc(40 * var(--ti-md-hfw-u));
	height: calc(40 * var(--ti-md-hfw-u));
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--theme-color-darkgray, #878989);
	cursor: pointer;
	transition: color var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

.ti-md-hfw-panel__close:hover,
.ti-md-hfw-panel__close:focus-visible {
	color: var(--ti-md-hfw-color-accent);
}

.ti-md-hfw-panel__close .ti-md-hfw-icon {
	width: calc(30 * var(--ti-md-hfw-u));
	height: calc(30 * var(--ti-md-hfw-u));
	stroke-width: 1.2;
}

.ti-md-hfw-panel__title {
	margin: 0;
	color: var(--theme-color-midblue, #009ee3);
	font-size: var(--ti-md-hfw-dialog-title-size);
	font-weight: var(--ti-md-hfw-font-weight-medium);
	line-height: 1.1;
}

.ti-md-hfw-panel__intro {
	margin: var(--ti-md-hfw-space-sm) 0 0;
	font-size: var(--ti-md-hfw-font-size-lg);
	line-height: 1.45;
}

.ti-md-hfw-panel__body {
	margin-top: calc(40 * var(--ti-md-hfw-u));
}

/* --- Suche ---------------------------------------------------------------- */

.ti-md-hfw-search {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(28 * var(--ti-md-hfw-u));
}

.ti-md-hfw-search__field {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	border: 0;
	border-radius: var(--ti-md-hfw-radius-pill);
	background: var(--theme-color-background, #ffffff);
	box-shadow: var(--ti-md-hfw-shadow-dialog);
}

.ti-md-hfw-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: calc(12 * var(--ti-md-hfw-u)) calc(60 * var(--ti-md-hfw-u)) calc(12 * var(--ti-md-hfw-u)) calc(28 * var(--ti-md-hfw-u));
	border: 0;
	border-radius: inherit;
	background: none;
	color: var(--ti-md-hfw-color-accent);
	font-family: inherit;
	font-size: var(--ti-md-hfw-font-size-base);
}

.ti-md-hfw-search__input:focus {
	outline: none;
}

/* Lupe im Feld -- zweiter Absendeknopf ohne Beschriftung. */
.ti-md-hfw-search__icon-submit {
	position: absolute;
	right: calc(20 * var(--ti-md-hfw-u));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--theme-color-darkblue, #00325b);
	cursor: pointer;
	transition: color var(--ti-md-hfw-duration-slow, 350ms) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

.ti-md-hfw-search__icon-submit:hover,
.ti-md-hfw-search__icon-submit:focus-visible {
	color: var(--theme-color-midblue, #009ee3);
}

.ti-md-hfw-search__submit {
	display: inline-flex;
	min-height: 2.15em;
	align-items: center;
	justify-content: center;
	padding: 0 1.1em;
	border: 2px solid var(--theme-color-midblue, #009ee3);
	border-radius: var(--ti-md-hfw-radius-pill);
	background: var(--theme-color-midblue, #009ee3);
	color: var(--theme-color-background, #ffffff);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--ti-md-hfw-font-size-base);
	font-weight: var(--ti-md-hfw-font-weight-medium);
	line-height: 1;
	transition:
		background-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));
}

.ti-md-hfw-search__submit:hover,
.ti-md-hfw-search__submit:focus-visible {
	background: transparent;
	color: var(--theme-color-text, #2e2e2e);
}

/* --- Kontakt -------------------------------------------------------------- */

.ti-md-hfw-contact {
	--ti-md-hfw-contact-image: calc(330 * var(--ti-md-hfw-u));

	display: grid;
	align-items: end;
	gap: var(--ti-md-hfw-space-md);

	/* Die zweite Spalte bleibt fuer das Bild frei, das selbst aus dem Fluss
	   genommen ist. */
	grid-template-columns: minmax(0, 1fr) var(--ti-md-hfw-contact-image);
}

.ti-md-hfw-contact__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Umrissener Knopf: gefuellt wird er erst beim Ueberfahren. */
.ti-md-hfw-contact__cta {
	display: inline-flex;
	min-height: 2.15em;
	align-items: center;
	justify-content: center;
	padding: 0 1.1em;
	border: 2px solid var(--theme-color-midblue, #009ee3);
	border-radius: var(--ti-md-hfw-radius-pill);
	background: var(--theme-color-background, #ffffff);
	color: var(--ti-md-hfw-color-accent);
	font-size: var(--ti-md-hfw-font-size-base);
	font-weight: var(--ti-md-hfw-font-weight-bold);
	line-height: 1;
	text-decoration: 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)),
		color var(--ti-md-hfw-duration-slow, 350ms) var(--ti-md-hfw-easing-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

.ti-md-hfw-contact__cta:hover,
.ti-md-hfw-contact__cta:focus-visible {
	background: var(--theme-color-midblue, #009ee3);
	color: var(--theme-color-background, #ffffff);
}

.ti-md-hfw-contact__name {
	margin: calc(56 * var(--ti-md-hfw-u)) 0 0;
	font-size: var(--ti-md-hfw-font-size-lg);
	font-weight: var(--ti-md-hfw-font-weight-bold);
	line-height: 1.3;
}

.ti-md-hfw-contact__role {
	margin: 0;
	font-size: var(--ti-md-hfw-font-size-lg);
	line-height: 1.3;
}

.ti-md-hfw-contact__links {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: calc(36 * var(--ti-md-hfw-u)) 0 0;
	gap: calc(10 * var(--ti-md-hfw-u));
	list-style: none;
}

.ti-md-hfw-contact__links a {
	color: var(--ti-md-hfw-color-accent);
	font-size: var(--ti-md-hfw-font-size-lg);
	text-decoration: none;
	transition: color var(--ti-md-hfw-duration-base) var(--ti-md-hfw-easing);
}

.ti-md-hfw-contact__links a:hover,
.ti-md-hfw-contact__links a:focus-visible {
	color: var(--theme-color-midblue, #009ee3);
}

/**
 * Das Bild sitzt in der unteren rechten Ecke des Dialogs. Absolut gesetzt
 * bezieht es sich auf dessen Polsterungsrahmen und reicht damit bis an die
 * Kante, ohne die Polsterung einzurechnen.
 */
.ti-md-hfw-contact__figure {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
}

.ti-md-hfw-contact__image {
	display: block;
	width: var(--ti-md-hfw-contact-image);
	height: auto;
}

/* ==========================================================================
   5. Mobile
   ========================================================================== */

@media (max-width: 999px) {
	/* Die Leiste laeuft ueber die volle Breite; die seitliche Einrueckung des
	   Desktops wiegt mit zwei Klassen schwerer und wird hier zurueckgenommen. */
	.ti-md-hfw-floating--right .ti-md-hfw-rail,
	.ti-md-hfw-floating--left .ti-md-hfw-rail {
		right: 0;
		left: 0;
	}

	/* Rail wird zur App-Leiste am unteren Rand. */
	.ti-md-hfw-rail {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;

		/* Die mittige Ausrichtung des Desktops zuruecknehmen. */
		transform: none;
		border-radius: var(--ti-md-hfw-radius-md) var(--ti-md-hfw-radius-md) 0 0;
		background: var(--ti-md-hfw-color-surface);
		box-shadow: var(--ti-md-hfw-shadow-rail);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.ti-md-hfw-rail__list {
		flex-direction: row;
		align-items: stretch;
		justify-content: space-around;
		gap: 0;
	}

	.ti-md-hfw-rail__item {
		flex: 1 1 0;
	}

	/* Der Verlauf haengt hier nicht am einzelnen Button, sondern laeuft als
	   durchgehender Streifen ueber die ganze Leiste. */
	.ti-md-hfw-rail__item::before {
		display: none;
	}

	.ti-md-hfw-rail__list::before {
		position: absolute;

		/* Reicht bis unter die Buttons, damit die Rundung oben greift --
		   sichtbar ist nur der Ueberstand ueber der Leiste. */
		top: -2.5px;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: var(--ti-md-hfw-radius-md) var(--ti-md-hfw-radius-md) 0 0;
		background: linear-gradient(90deg, var(--theme-color-midblue, #009ee3) 0%, var(--theme-color-darkblue, #00325b) 100%);
		content: "";
		z-index: 0;
	}

	/* Abgerundet wird nur aussen: links oben und rechts oben. */
	.ti-md-hfw-rail__item:first-child .ti-md-hfw-btn {
		border-radius: var(--ti-md-hfw-radius-md) 0 0 0;
	}

	.ti-md-hfw-rail__item:last-child .ti-md-hfw-btn {
		border-radius: 0 var(--ti-md-hfw-radius-md) 0 0;
	}

	.ti-md-hfw-btn {
		width: 100%;
		height: 64px;
		flex-direction: column;
		justify-content: center;
		border-radius: 0;
		box-shadow: none;
		gap: 4px;
	}

	.ti-md-hfw-btn__icon {
		width: auto;
		height: auto;
	}

	/* Beschriftung unter dem Icon. Feste Pixel, weil rem hier der fluiden
	   Wurzelgroesse des Themes folgt und Bruchteile eines Pixels ergaebe. */
	.ti-md-hfw-btn__label {
		display: block;
		padding: 0;
		font-size: 13px;
		line-height: 1.2;
		opacity: 1;
	}

	.ti-md-hfw-btn:hover,
	.ti-md-hfw-btn:focus-visible,
	.ti-md-hfw-btn.is-expanded {
		width: 100%;
	}

	/* Buttons, die nur für Desktop gedacht sind, ausblenden. */
	.ti-md-hfw-btn:not(.ti-md-hfw-btn--in-mobile) {
		display: none;
	}

	/* Dialoge bleiben mittig, werden aber schmaler und weniger gepolstert. */
	.ti-md-hfw-panel,
	.ti-md-hfw-panel--contact {
		--ti-md-hfw-dialog-pad-block: calc(40 * var(--ti-md-hfw-u));
		--ti-md-hfw-dialog-pad-inline: calc(30 * var(--ti-md-hfw-u));
		--ti-md-hfw-dialog-title-size: calc(30 * var(--ti-md-hfw-u));

		width: min(92vw, calc(480 * var(--ti-md-hfw-u)));
	}

	.ti-md-hfw-panel__close {
		top: calc(14 * var(--ti-md-hfw-u));
		right: calc(14 * var(--ti-md-hfw-u));
	}

	.ti-md-hfw-panel__body {
		margin-top: calc(28 * var(--ti-md-hfw-u));
	}

	.ti-md-hfw-contact__name {
		margin-top: calc(36 * var(--ti-md-hfw-u));
	}

	/**
	 * Ein Strang statt zweier Spalten: Neben dem Bild bliebe fuer Text kaum
	 * Breite. Nur die Angaben unter dem Knopf halten Abstand zum Bild in
	 * der Ecke.
	 */
	.ti-md-hfw-contact {
		--ti-md-hfw-contact-image: calc(144 * var(--ti-md-hfw-u));

		grid-template-columns: minmax(0, 1fr);
	}

	/* Das Bild ragt in die Polsterung hinein, deshalb nur die Differenz. */
	.ti-md-hfw-contact__name,
	.ti-md-hfw-contact__role,
	.ti-md-hfw-contact__links {
		padding-right: calc(var(--ti-md-hfw-contact-image) - var(--ti-md-hfw-dialog-pad-inline));
	}
}

@media (min-width: 1000px) {
	/* Buttons, die nur für Mobile gedacht sind, ausblenden. */
	.ti-md-hfw-btn:not(.ti-md-hfw-btn--in-desktop) {
		display: none;
	}

	/**
	 * Vier Pixel mehr oben und unten als beim CTA im Header. Die Mindesthoehe
	 * waechst mit, sonst bliebe die Polsterung ohne Wirkung -- sie ist kleiner
	 * als der Wert, den 2.15em vorgibt.
	 */
	.ti-md-hfw-search__submit,
	.ti-md-hfw-contact__cta {
		min-height: calc(2.15em + calc(8 * var(--ti-md-hfw-u)));
		padding: calc(4 * var(--ti-md-hfw-u)) 1.1em;
	}
}

/* --- Gefuellte Icons ------------------------------------------------------
   Die Basisregel in tokens.css ist auf Konturen ausgelegt (fill: none,
   stroke: currentcolor). Diese drei Zeichen sind Flaechen, deshalb hier
   umgekehrt. */

.ti-md-hfw-icon--search,
.ti-md-hfw-icon--phone,
.ti-md-hfw-icon--document {
	width: auto;
	height: var(--ti-md-hfw-icon-size);
	fill: currentcolor;
	stroke: none;
}

.ti-md-hfw-icon--phone {
	stroke: currentcolor;
	stroke-width: 2;
}

/* Unter 600px sind die Knoepfe des Themes hoeher; hier dieselbe Regel. */
@media (max-width: 599px) {
	.ti-md-hfw-search__submit,
	.ti-md-hfw-contact__cta {
		min-height: 2.35em;
	}
}