/* Chrome: Topbar, Header, Nav, Burger, Mobile-Panel, Bottom-Bar, Footer.
   Kein Modul -> alle Werte ueber Tokens aus project.css. Spec §3. */

:root {
	--fx-chrome-h: 133px;      /* Gesamthoehe Topbar + Header, von FxChrome gemessen */
	--fx-topbar-h: 41px;       /* Hoehe der Topbar, von FxChrome gemessen */
	--fx-bottombar-h: 0px;

	/* Headerhoehen. Startzustand und geschrumpfter Sticky-Zustand getrennt, damit
	   JS nur zwischen zwei fertigen Werten umschaltet statt Pixel zu rechnen. */
	--fx-header-h-start:  92px;
	--fx-header-h-sticky: 72px;
	--fx-header-h: var(--fx-header-h-start);
}
@media (max-width: 991px) {
	:root {
		--fx-bottombar-h: 58px;
		--fx-header-h-start:  64px;
		--fx-header-h-sticky: 64px;
	}
}
@media (max-width: 359px) { :root { --fx-bottombar-h: 50px; } }

/* 1 Skiplink + Geruest */
.fx_skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
}
.fx_skiplink:focus {
	left: 0;
	top: 0;
	z-index: 110;
	background: var(--fx-navy);
	color: var(--fx-white);
	padding: 12px 20px;
}

/*
 * Die Klebrigkeit sitzt an der Huelle, nicht am <header>: ein sticky Kind haftet
 * nur innerhalb seines Elternkastens, und .fx_chrome ist genau so hoch wie
 * Topbar plus Header — der Header loeste sich also sofort wieder. Mit dem
 * negativen Versatz in Topbar-Hoehe wandert die Topbar aus dem Bild und der
 * Header bleibt bei top:0 stehen. Genau das zeigt der Entwurf.
 */
.fx_chrome {
	position: sticky;
	top: calc(-1 * var(--fx-topbar-h));
	z-index: 100;
}
.fx_inhalt { display: block; }
body.fx_menue-offen { overflow: hidden; }

/* Ankersprung darf nicht unter dem Sticky-Header landen. */
.fx_inhalt [id] { scroll-margin-top: var(--fx-header-h); }

/* 2 Topbar (§3.1) */
.fx_topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 11px var(--fx-gutter);
	background: var(--fx-navy);
}
.fx_topbar .fx_topbar_info { color: var(--fx-mist); }
.fx_topbar .fx_topbar_kontakt {
	display: flex;
	align-items: center;
	gap: 24px;
}
.fx_topbar .fx_topbar_tel { color: var(--fx-white); }
.fx_topbar .fx_topbar_tel:hover { color: var(--fx-ice); }
.fx_topbar .fx_topbar_trenner {
	width: 1px;
	height: 18px;
	background: var(--fx-divider-dark);
}
.fx_topbar .fx_topbar_mail {
	font: 500 var(--fx-fs-fussnote)/1 var(--font-body);
	color: var(--fx-mist);
}
.fx_topbar .fx_topbar_mail:hover { color: var(--fx-white); }

/* 3 Header + Nav Desktop (§3.2, Handoff 1) */
.fx_header {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: stretch;
	height: var(--fx-header-h);
	padding-left: var(--fx-gutter);
	background: var(--fx-white);
	border-bottom: 1px solid var(--fx-line);
	transition: height var(--fx-dauer-header) ease;
}
.fx_chrome--gescrollt .fx_header {
	border-bottom-color: transparent;   /* der Schatten bringt die Haarlinie selbst mit */
	box-shadow: var(--fx-shadow-sticky);
}

.fx_header .fx_header_logo {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-right: 40px;
	text-decoration: none;
}
.fx_header .fx_logo_mark {
	height: 50px;
	width: auto;
	display: block;
	transition: height var(--fx-dauer-header) ease;
}
.fx_header .fx_logo_word {
	height: 28px;
	width: auto;
	display: block;
	transition: height var(--fx-dauer-header) ease;
}
.fx_chrome--gescrollt .fx_header .fx_logo_mark { height: 36px; }
.fx_chrome--gescrollt .fx_header .fx_logo_word { height: 20px; }

.fx_header .fx_nav {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 40px;
}
.fx_header .fx_nav_link {
	position: relative;
	display: flex;
	align-items: center;
	font: 600 var(--fx-fs-nav)/1 var(--font-body);
	color: var(--fx-navy);
	text-decoration: none;
	transition: color .18s ease;
}
.fx_header .fx_nav_link:hover { color: var(--fx-azure); }
.fx_header .fx_nav_link[aria-current] { color: var(--fx-azure); }
/* 3px-Balken deckt die 1px-Haarlinie des Headers mit ab, daher bottom:-1px. */
.fx_header .fx_nav_link[aria-current]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--fx-azure);
}

.fx_header .fx_header_aktionen {
	display: flex;
	align-items: stretch;
}
.fx_header .fx_header_anruf {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 0 30px;
	border-left: 1px solid var(--fx-line);
	text-decoration: none;
	transition: background-color .18s ease;
}
.fx_header .fx_header_anruf:hover { background: var(--fx-tint); }
.fx_header .fx_header_anruf_label {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 var(--fx-fs-caption)/1 var(--font-body);
	letter-spacing: var(--fx-ls-button);
	text-transform: uppercase;
	color: var(--fx-azure);
}
.fx_header .fx_header_anruf_nummer {
	font: 800 var(--fx-fs-tel-klein)/1 var(--font-heading);
	color: var(--fx-navy);
	transition: font-size var(--fx-dauer-header) ease;
}
.fx_chrome--gescrollt .fx_header .fx_header_anruf_nummer { font-size: var(--fx-fs-tel-sticky); }

.fx_header .fx_header_cta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 38px;
	background: var(--fx-navy);
	color: var(--fx-white);
	font: 700 var(--fx-fs-btn)/1 var(--font-heading);
	text-decoration: none;
	transition: background-color .18s ease, padding var(--fx-dauer-header) ease;
}
.fx_header .fx_header_cta:hover,
.fx_header .fx_header_cta:focus-visible { background: var(--fx-azure); }
.fx_chrome--gescrollt .fx_header .fx_header_cta { padding: 0 32px; }

/* Scroll-Fortschritt: Breite kommt als Faktor 0–1 aus FxChrome, nicht als
   zusammengebauter width-String — skalieren statt umlayouten. */
.fx_header .fx_header_fortschritt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--fx-azure);
	transform: scaleX(var(--fx-fortschritt, 0));
	transform-origin: left center;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
}
.fx_chrome--gescrollt .fx_header .fx_header_fortschritt { opacity: 1; }

.fx_header_anruf_mobil { display: none; }
.fx_burger { display: none; }
.fx_mobilenav { display: none; }

/* 4 Zwischenstufe 992-1299px (§3.2). Bis 2026-09-24 endete sie bei 1250 —
   bei 1251 standen Nav und Anruf-Block dann nur 9px auseinander. */
@media (min-width: 992px) and (max-width: 1299px) {
	.fx_header { padding-left: 32px; }
	.fx_header .fx_header_logo { gap: 12px; padding-right: 20px; }
	.fx_header .fx_nav { gap: 24px; }
	.fx_header .fx_header_anruf { padding: 0 20px; }
	.fx_header .fx_header_cta { padding: 0 26px; }
	.fx_chrome--gescrollt .fx_header .fx_header_cta { padding: 0 22px; }
}

/*
 * Enge Stufe 992-1199px. Logo + Nav + Anruf + CTA brauchen mit den Werten
 * oben ~1093px — bei 992 ueberlappten die Bloecke um bis zu 37px. Hier laeuft
 * der Header deshalb dauerhaft in den Groessen des geschrumpften Zustands
 * (Logo 36/20, Nummer in --fx-fs-tel-sticky), mit etwas knapperen Innenabstaenden.
 * Den Mindestabstand zwischen den drei Spalten haelt column-gap statt der
 * Logo-Polsterung: die Nav sitzt zentriert in der Mittelspalte, ein Polster
 * nur auf einer Seite schuetzte die andere nicht.
 */
@media (min-width: 992px) and (max-width: 1199px) {
	.fx_header { column-gap: 24px; }
	.fx_header .fx_header_logo { gap: 10px; padding-right: 0; }
	.fx_header .fx_logo_mark { height: 36px; }
	.fx_header .fx_logo_word { height: 20px; }
	.fx_header .fx_nav { gap: 20px; }
	.fx_header .fx_nav_link { white-space: nowrap; }
	.fx_header .fx_header_anruf { padding: 0 16px; }
	.fx_header .fx_header_anruf_nummer { font-size: var(--fx-fs-tel-sticky); }
	.fx_header .fx_header_cta,
	.fx_chrome--gescrollt .fx_header .fx_header_cta { padding: 0 20px; }
}
/* Unter 1100px reicht auch das nicht (bei 992 blieben 14px): der CTA-Pfeil
   faellt weg, das spart Icon plus Gap, rund 33px. */
@media (min-width: 992px) and (max-width: 1099px) {
	.fx_header .fx_header_cta .fx-icon { display: none; }
}

/* 5 Header mobil: Logo, Anruf-Knopf, Burger (§3.2, Handoff 1.6) */
@media (max-width: 991px) {
	.fx_topbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 10px 20px;
	}
	.fx_topbar .fx_topbar_trenner { display: none; }
	.fx_topbar .fx_topbar_mail { display: none; }
	.fx_topbar .fx_topbar_info { line-height: 1.4; }

	.fx_header {
		display: flex;
		align-items: center;
		padding: 0 8px 0 20px;
	}
	.fx_header .fx_header_logo {
		margin-right: auto;   /* haelt Anruf und Burger rechts, auch ohne Telefonnummer */
		gap: 8px;
		padding-right: 8px;
	}
	.fx_header .fx_logo_mark { height: 32px; }
	.fx_header .fx_logo_word { height: 18px; }
	.fx_chrome--gescrollt .fx_header .fx_logo_mark { height: 32px; }
	.fx_chrome--gescrollt .fx_header .fx_logo_word { height: 18px; }

	.fx_header .fx_nav,
	.fx_header .fx_header_aktionen { display: none; }

	.fx_header_anruf_mobil {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: var(--fx-tint);
	}
	.fx_header_anruf_mobil .fx-icon--telefon { stroke: var(--fx-navy); }

	.fx_burger {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 48px;
		height: 48px;
		margin-left: 4px;
		border: 0;
		border-radius: 0;
		background: var(--fx-navy);
		cursor: pointer;
		padding: 0;
	}
	.fx_burger_linie {
		width: 20px;
		height: 2px;
		background: var(--fx-white);
	}
	.fx_burger_kreuz {
		display: none;
		font: 400 var(--fx-fs-h3-gross)/1 var(--font-heading);
		color: var(--fx-white);
	}
	.fx_burger--aktiv .fx_burger_linie { display: none; }
	.fx_burger--aktiv .fx_burger_kreuz { display: block; }
}

/* 6 Mobile-Panel (§3.3, Handoff 1.7) */
@media (max-width: 991px) {
	.fx_mobilenav {
		display: block;
		/* --fx-chrome-unten ist die sichtbare Unterkante des Chrome im Viewport:
		   gescrollt ist die Topbar weg, ungescrollt steht sie noch darueber. */
		inset: var(--fx-chrome-unten, var(--fx-chrome-h)) 0 0 0;
		position: fixed;
		z-index: 90;
		background: var(--fx-white);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 0 var(--fx-bottombar-h);
	}
	.fx_mobilenav[hidden] { display: none; }

	.fx_mobilenav_liste { border-top: 1px solid var(--fx-line); }

	.fx_mobilenav_link {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) 20px;
		align-items: center;
		min-height: 64px;
		padding: 0 20px;
		border-bottom: 1px solid var(--fx-line);
		text-decoration: none;
	}
	.fx_mobilenav_nr {
		font: 800 var(--fx-fs-menue-nr)/1 var(--font-heading);
		color: var(--fx-azure);
		font-variant-numeric: tabular-nums;
	}
	.fx_mobilenav_label {
		font: 700 var(--fx-fs-h3-gross)/1.15 var(--font-heading);
		color: var(--fx-navy);
	}
	.fx_mobilenav .fx_mobilenav_pfeil { color: var(--fx-azure); }
	.fx_mobilenav_link:hover .fx_mobilenav_label { color: var(--fx-azure); }

	.fx_mobilenav_fuss {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 20px;
		background: var(--fx-tint);
	}
	.fx_mobilenav_anruf {
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-height: 48px;
		padding: 18px 20px;
		background: var(--fx-white);
		border: 1px solid var(--fx-line);
		text-decoration: none;
	}
	.fx_mobilenav_anruf_label {
		display: flex;
		align-items: center;
		gap: 8px;
		font: 700 var(--fx-fs-caption)/1 var(--font-body);
		letter-spacing: var(--fx-ls-button);
		text-transform: uppercase;
		color: var(--fx-azure);
	}

	.fx_mobilenav_anruf_nummer {
		font: 800 var(--fx-fs-tel-karte)/1 var(--font-heading);
		color: var(--fx-navy);
	}
	.fx_mobilenav_cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 48px;
		padding: 21px 20px;
		background: var(--fx-navy);
		color: var(--fx-white);
		font: 700 var(--fx-fs-btn)/1 var(--font-heading);
		text-decoration: none;
	}
	.fx_mobilenav_cta:hover,
	.fx_mobilenav_cta:focus-visible { background: var(--fx-azure); }
	.fx_mobilenav_zeiten {
		margin: 6px 0 0;
		font: 500 var(--fx-fs-fussnote)/1.4 var(--font-body);
		color: var(--fx-text);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fx_header,
	.fx_header .fx_logo_mark,
	.fx_header .fx_logo_word,
	.fx_header .fx_nav_link,
	.fx_header .fx_header_anruf,
	.fx_header .fx_header_anruf_nummer,
	.fx_header .fx_header_cta { transition: none; }
}

/* 7 Bottom-Bar (§3.4) */
.fx_bottombar { display: none; }
@media (max-width: 991px) {
	.fx_bottombar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 80;
		background: var(--fx-white);
		border-top: 1px solid var(--fx-line);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.fx_bottombar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 20px 0;
		min-height: 44px;
		text-decoration: none;
		font: 700 var(--fx-fs-btn-klein)/1 var(--font-heading);
	}
	.fx_bottombar_anruf { color: var(--fx-navy); }
	.fx_bottombar_termin { background: var(--fx-navy); color: var(--fx-white); }
	.fx_bottombar .fx-icon--telefon { stroke: var(--fx-azure); }
	.fx_bottombar_termin .fx-icon { stroke: currentColor; }
}
body { padding-bottom: calc(var(--fx-bottombar-h) + env(safe-area-inset-bottom)); }

/* 8 Footer Desktop (§3.5) */
.fx_footer {
	background: var(--fx-navy-deep);
	padding: 56px var(--fx-gutter) 28px;
}
.fx_footer .fx_footer_grid {
	display: grid;
	grid-template-columns: 1.2fr 1.4fr 1fr 1fr;
	gap: 44px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--fx-rule-dark);
}
.fx_footer .fx_footer_logo {
	display: flex;
	align-items: center;
	gap: 14px;
	width: fit-content;
}
/* width:auto ist Pflicht: die <img> tragen width/height-Attribute, und wer nur
   die Hoehe ueberschreibt, behaelt die Attributbreite — das Logo wurde gestaucht. */
.fx_footer .fx_footer_logo .fx_logo_mark,
.fx_footer .fx_footer_logo .fx_logo_word { display: block; width: auto; }
.fx_footer .fx_footer_logo .fx_logo_mark { height: 44px; }
.fx_footer .fx_footer_logo .fx_logo_word { height: 26px; }
.fx_footer .fx_footer_beschreibung { margin: 22px 0 0; }
.fx_footer .fx_footer_titel {
	font: 700 var(--fx-fs-label)/1 var(--font-body);
	letter-spacing: var(--fx-ls-button);
	text-transform: uppercase;
	color: var(--fx-white);
	margin-bottom: 20px;
}
/*
 * E-Mail-Adressen haben keine Trennstellen. overflow-wrap: anywhere bricht
 * notfalls mitten im Wort, aber der Browser schiebt das ganze Wort erst auf
 * die naechste Zeile und bricht es dort — dadurch stand "E-Mail:" allein oben.
 * die Kontakt-Spalte ist nun breit genug (1.4fr) — overflow-wrap: anywhere
 * bleibt fuer sehr schmale Viewports und mobile als Sicherheitsnetz.
 */
.fx_footer .fx_footer_kontakt,
.fx_topbar .fx_topbar_mail { overflow-wrap: anywhere; }

.fx_footer .fx_footer_kontakt a { color: var(--fx-white); }
.fx_footer .fx_footer_kontakt a:hover { color: var(--fx-ice); }
.fx_footer .fx_footer_liste {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.fx_footer .fx_footer_link {
	color: var(--fx-mist);
	text-decoration: none;
}
.fx_footer .fx_footer_link:hover { color: var(--fx-white); }
.fx_footer .fx_footer_cta {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	margin-top: 24px;
	padding: 16px 26px;
	background: var(--fx-azure);
	color: var(--fx-white);
	font: 700 var(--fx-fs-label)/1 var(--font-body);
	letter-spacing: var(--fx-ls-button);
	text-transform: uppercase;
	text-decoration: none;
}
.fx_footer .fx_footer_cta:hover { background: var(--fx-white); color: var(--fx-navy); }
.fx_footer .fx_footer_copyright { margin: 22px 0 0; }
.fx_footer .fx_footer_copyright--kurz { display: none; }

/* 9 Footer Zwischenbreite und mobil (§3.5) */
/* Bis 1399 zweispaltig: "E-Mail: <Adresse>" braucht einzeilig rund 330px, die
   vierspaltige Kontaktspalte liefert das erst ab etwa 1330px. */
@media (max-width: 1399px) {
	.fx_footer .fx_footer_grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 767px) {
	.fx_footer { padding: 34px 20px 22px; }
	/* Eine Spalte, Abstand ueber gap statt ueber Margins einzelner Kinder: mit
	   display:block fehlte zwischen Kontakt und Rechtliches jeder Abstand,
	   nur die Beschreibung brachte per margin-bottom eigenen mit. */
	.fx_footer .fx_footer_grid {
		display: flex;
		flex-direction: column;
		gap: 26px;
		padding-bottom: 0;
		border-bottom: 0;
	}
	.fx_footer .fx_footer_logo .fx_logo_mark { height: 38px; }
	.fx_footer .fx_footer_logo .fx_logo_word { height: 22px; }
	.fx_footer .fx_footer_logo { gap: 12px; }
	.fx_footer .fx_footer_beschreibung { margin: 18px 0 0; }
	.fx_footer .fx_footer_titel { margin-bottom: 14px; }
	.fx_footer .fx_footer_spalte--leistungen { display: none; }
	.fx_footer .fx_footer_cta { display: none; }
	.fx_footer .fx_footer_spalte--rechtliches .fx_footer_liste {
		flex-direction: row;
		gap: 20px;
		margin-top: 24px;
		padding-top: 20px;
		border-top: 1px solid var(--fx-rule-dark);
	}
	.fx_footer .fx_footer_copyright--lang { display: none; }
	.fx_footer .fx_footer_copyright--kurz { display: block; }
}

/* 10 Stufe <=359px (§3.2, §3.3, §3.4, §3.5)
   Rechnung bei 280px: 14 + 28 (Mark) + 6 + ~115 (Wortmarke bei 15px Hoehe)
   + 48 (Anruf) + 2 + 48 (Burger) + 6 = 267px. Passt ohne Querlauf. */
@media (max-width: 359px) {
	.fx_header { padding: 0 6px 0 14px; }
	.fx_header .fx_logo_mark,
	.fx_chrome--gescrollt .fx_header .fx_logo_mark { height: 28px; }
	.fx_header .fx_logo_word,
	.fx_chrome--gescrollt .fx_header .fx_logo_word { height: 15px; }
	.fx_header .fx_header_logo { gap: 6px; padding-right: 4px; }
	.fx_burger { margin-left: 2px; }

	.fx_mobilenav_link { grid-template-columns: 32px minmax(0, 1fr) 20px; padding: 0 14px; }
	.fx_mobilenav_fuss { padding: 14px; }
	.fx_mobilenav_anruf { padding: 14px 16px; }
	.fx_mobilenav_cta { padding: 18px 16px; }

	.fx_footer .fx_footer_logo { gap: 10px; }
	/* Selektor so spezifisch wie die Regel in Abschnitt 9 — vorher griff diese
	   Stufe nie, und die Wortmarke lief bei 280px bis 7px an den Rand. */
	.fx_footer .fx_footer_logo .fx_logo_mark { height: 32px; }
	.fx_footer .fx_footer_logo .fx_logo_word { height: 18px; }
	.fx_bottombar a { padding: 16px 0; gap: 8px; }
}