/**
 * Brücken-Help Child Theme – App-Shell-Redesign.
 *
 * Übernimmt 1:1 das Farb-/Typo-/Radien-System aus den Stitch-Mockups
 * (Startseite, ÖPNV Themen-Hub, Verkehrslage melden, Häufige Fragen,
 * Live-Ticker, Interaktive Karte, Mitfahrbörse, Inserat erstellen) – dort
 * per Tailwind-Config definiert, hier als CSS-Variablen + eigene
 * bh-app-*-Klassen, da das Theme kein Tailwind nutzt (kein CDN, keine
 * Build-Pipeline für Utility-Klassen).
 */

:root {
	--bh-primary: #27198c;
	--bh-primary-container: #3f36a3;
	--bh-on-primary: #ffffff;
	--bh-secondary: #a02a2e; /* Kontrast-Audit 10.07.2026: vorher #ae2f34 (4,44:1 auf Badge-Rosa) */
	--bh-accent: #ff6b6b;
	/* Kontrast-Audit 10.07.2026 (Nutzerhinweis): #ff6b6b schafft auf hellem
	   Grund nur 2,64:1 – als FLÄCHE (Buttons, mit dunkler Schrift drauf)
	   bleibt --bh-accent, als TEXT-/ICON-Farbe auf hell IMMER --bh-accent-ink
	   verwenden (4,89:1, AA auch für Fließtext). */
	--bh-accent-ink: #cc3333;
	/* Barrierefreiheit (09.07.2026): war #ffffff – Weiß auf Koralle erreicht
	   nur ~2,8:1 Kontrast (WCAG AA verlangt 4,5:1 für normalen Text). Das
	   dunkle Navy erreicht auf der Koralle-Fläche ~4,7:1 und passt zur
	   Stitch-Vorlage (dort steht Navy-Text auf Koralle-Karten). */
	--bh-on-accent: #27198c;

	--bh-surface: #fcf8ff;
	--bh-surface-container: #f0ecf6;
	--bh-surface-container-low: #f6f2fc;
	--bh-surface-container-lowest: #ffffff;
	--bh-surface-container-high: #eae6f0;
	--bh-surface-container-highest: #e5e1eb;
	--bh-surface-variant: #e5e1eb;

	--bh-on-surface: #1c1b22;
	--bh-on-surface-variant: #474553;
	--bh-outline: #6e6b79; /* Kontrast-Audit 10.07.2026: vorher #787584 (4,28:1 als Text) */
	--bh-outline-variant: #c8c4d5;
	--bh-error: #ba1a1a;

	--bh-warning-bg: #fffbeb;
	--bh-warning-border: #fbbf24;
	--bh-warning-text: #78350f;

	--bh-radius-sm: 1rem;
	--bh-radius-lg: 2rem;
	--bh-radius-xl: 3rem;
	--bh-radius-full: 9999px;

	--bh-content-width: 32rem;
	--bh-edge-margin: 1.5rem;
	--bh-topbar-height: 4rem;
	--bh-bottomnav-height: 4.75rem;

	--bh-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Z-Index-Skala (UI-Cleanup 08.07.2026): ersetzt vorher verstreute
	   Ad-hoc-Werte (1/5/49/50) durch eine dokumentierte Stufung, damit neue
	   Overlays sich einordnen lassen, ohne bestehende zu verdecken. */
	--bh-z-content-raised: 10;
	--bh-z-sticky-cta: 20;
	--bh-z-bottomnav: 30;
	--bh-z-overlay: 50;

	/* Easing-Kurven (Emil-Kowalski-Prinzip: eingebaute CSS-Easings sind zu
	   schwach für UI-Interaktionen – kräftigere Custom-Curves fühlen sich
	   bewusster/reaktionsschneller an). ease-out für Ein-/Ausblenden
	   (Tooltip, Menü, FAB), ease-in-out für Bewegung/Morphing auf dem
	   Bildschirm. Nie ease-in für UI (wirkt träge). */
	--bh-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--bh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Bewegung reduzieren, wenn vom System gewünscht: Opacity-/Farbübergänge
   bleiben (helfen beim Verständnis von Zustandswechseln), aber jede
   Transform-basierte Bewegung wird auf nahezu verzögerungsfrei gesetzt. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
 * Selbst gehostete Schriften (DSGVO, Entscheidung 08.07.2026): vorher via
 * fonts.googleapis.com/fonts.gstatic.com geladen – das überträgt bei jedem
 * Seitenaufruf die IP-Adresse der Besucher:innen an Google-Server, ohne
 * Einwilligung. Beide Dateien sind Variable Fonts (Google liefert für Inter
 * bereits eine einzige Datei für die Schnitte 400-800, für Material Symbols
 * Outlined eine einzige Datei für 100-700 – deshalb genügt je ein
 * @font-face-Block mit Gewichts-Spanne statt vier/mehreren einzelnen).
 * Nur der "latin"-Subset wurde geladen (deckt auch deutsche Umlaute/ß ab,
 * die Unicode-Range U+0000-00FF umfasst sie vollständig).
 * ------------------------------------------------------------------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-variable-latin.woff2?v=260c81a4') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 400;
	/* block statt swap (CLS-Befund Lighthouse 10.07.2026): mit swap
	   erscheinen die Icon-NAMEN ("share", "directions_boat", …) kurz als
	   Fließtext und verschieben das Layout. block hält die Fläche leer,
	   bis die Schrift da ist – bei einer Icon-Font das richtige Verhalten.
	   Subset statt Voll-Font (PSI 10.07.2026): die komplette Variable-Font
	   wog 1,1 MB und trieb die simulierte Mobile-LCP auf ~7 s. Die Subset-
	   Datei (6,7 KB, exakt die genutzten Icons, FILL-Achse erhalten) wird
	   über scripts/bh-icon-subset.sh erzeugt – nach JEDEM neuen Icon
	   erneut ausführen, sonst rendert es als Klartext-Name! */
	font-display: block;
	src: url('../fonts/material-symbols-subset.woff2?v=35519f00') format('woff2'); /* v= wird von scripts/bh-icon-subset.sh gepflegt */
}

/* ---------------------------------------------------------------------
 * Basis / Reset
 * ------------------------------------------------------------------- */

.bh-app-shell {
	background: var(--bh-surface);
	color: var(--bh-on-surface);
	font-family: var(--bh-font);
	margin: 0;
}

.bh-app-shell * {
	box-sizing: border-box;
}

.bh-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.material-symbols-outlined {
	/* font-family kam vorher implizit aus der externen Google-Fonts-CSS mit
	   (die dort auch die Klasse selbst definierte) – seit dem Umstieg auf
	   selbst gehostete Schriften muss das hier explizit stehen, sonst fällt
	   der Browser auf die normale Textschrift zurück und zeigt Icon-Namen
	   als Klartext statt Symbole (per Screenshot-Test gefunden). */
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	vertical-align: middle;
	line-height: 1;
}

/* ---------------------------------------------------------------------
 * TopAppBar + Pill-Nav (header.php)
 * ------------------------------------------------------------------- */

.bh-app-topbar {
	position: sticky;
	top: 0;
	z-index: var(--bh-z-overlay);
	background: var(--bh-primary-container);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.bh-app-topbar__row {
	max-width: var(--bh-content-width);
	margin: 0 auto;
	height: var(--bh-topbar-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--bh-edge-margin);
}

.bh-app-topbar__brand {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--bh-on-primary);
	text-decoration: none;
}

.bh-app-topbar__brand-accent {
	color: var(--bh-accent);
}

.bh-app-topbar__actions {
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

.bh-app-topbar__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--bh-radius-full);
	color: var(--bh-on-primary);
	background: transparent;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.bh-app-topbar__icon-btn:focus-visible {
	background: rgba(255, 255, 255, 0.15);
}

@media (hover: hover) {
	.bh-app-topbar__icon-btn:hover {
		background: rgba(255, 255, 255, 0.15);
	}
}

.bh-app-pillnav {
	max-width: var(--bh-content-width);
	margin: 0 auto;
	padding: 0 var(--bh-edge-margin) 0.75rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.bh-app-pillnav::-webkit-scrollbar {
	display: none;
}

.bh-app-pillnav__list {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.bh-app-pillnav__link {
	display: inline-block;
	padding-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.bh-app-pillnav__link.is-active,
.bh-app-pillnav__link:focus-visible {
	color: var(--bh-on-primary);
	border-bottom-color: var(--bh-accent);
}

@media (hover: hover) {
	.bh-app-pillnav__link:hover {
		color: var(--bh-on-primary);
		border-bottom-color: var(--bh-accent);
	}
}

@media (max-width: 640px) {
	/* UI-Cleanup 08.07.2026: War ein hartes display:none/block ohne jeden
	   Übergang – fühlte sich wie ein Rendering-Sprung an statt wie ein
	   geöffnetes Menü. grid-template-rows 0fr→1fr ist der etablierte Trick,
	   um "Höhe: auto" sauber zu animieren (reines height/max-height auf
	   variablen Inhalt ruckelt/schneidet ab). Bewusst kein reines
	   transform/opacity (Performance-Ideal laut Animation-Skill), weil das
	   Menü selten genutzt wird (kein 100x/Tag-Fall) und Layout-Verschiebung
	   hier gewollt ist – die Kosten sind vernachlässigbar. */
	.bh-app-pillnav {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows 0.2s var(--bh-ease-out), visibility 0s linear 0.2s;
	}

	.bh-app-pillnav > * {
		overflow: hidden;
		min-height: 0;
	}

	.bh-app-pillnav.is-open {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: grid-template-rows 0.2s var(--bh-ease-out);
	}

	/* Bugfix 09.07.2026 (Nutzerreport "Menü lässt sich nicht swipen"):
	   Der Grid-Aufklapp-Trick setzt overflow:hidden auf die Liste – der
	   horizontale Scroll der Pill-Nav war damit tot (Liste ~608px breit
	   bei ~342px Viewport). Statt Swipen: Pills umbrechen lassen, dann
	   sind im geöffneten Menü alle Punkte direkt sichtbar. */
	.bh-app-pillnav__list {
		flex-wrap: wrap;
		white-space: normal;
		row-gap: 0.65rem;
		padding-top: 0.25rem;
	}
}

/* ---------------------------------------------------------------------
 * Main Canvas
 * ------------------------------------------------------------------- */

.bh-app-main {
	max-width: var(--bh-content-width);
	margin: 0 auto;
	padding: 1.5rem var(--bh-edge-margin) calc(var(--bh-bottomnav-height) + 5rem);
}

/* Basis-Typografie für redaktionellen Inhalt (the_content()) – Kadence'
   Parent-Stylesheet wird bewusst nicht mehr geladen (s. functions.php),
   daher braucht der WYSIWYG-Content eigene Grundformatierung. */

.bh-page h1,
.bh-page h2,
.bh-page h3,
.bh-page h4 {
	color: var(--bh-primary-container);
	font-weight: 800;
	line-height: 1.3;
}

.bh-page h1 {
	font-size: 1.6rem;
	margin: 0 0 1rem;
}

.bh-page h2 {
	font-size: 1.25rem;
	margin: 2rem 0 0.85rem;
}

.bh-page h3 {
	font-size: 1.05rem;
	margin: 1.5rem 0 0.6rem;
}

.bh-page p {
	line-height: 1.6;
	margin: 0 0 1rem;
}

.bh-page a {
	color: var(--bh-primary-container);
}

.bh-page ul,
.bh-page ol {
	padding-left: 1.25rem;
	line-height: 1.6;
	margin: 0 0 1rem;
}

/* Karten-Listen (list-style: none) laufen bündig zur Textachse – die
   generische Einzugs-Regel oben gilt nur für echte Aufzählungen. Ohne
   diese Ausnahme rückten alle Karten-Raster auf Inhaltsseiten 1.25rem
   ein (Nutzerreport 11.07.2026, /faehren/ + /neu-im-portal/). Neue
   Karten-Listen hier ergänzen! */
.bh-page .bh-crossing-list,
.bh-page .bh-mitfahr-liste,
.bh-page .bh-oepnv-hub-liste,
.bh-page .bh-parkride-liste,
.bh-page .bh-stoerung-liste,
.bh-page .bh-strecken-chips,
.bh-page .bh-ticker-liste,
.bh-page .bh-ticker-scroll {
	padding-left: 0;
}

.bh-page img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bh-radius-sm);
}

/* ---------------------------------------------------------------------
 * Bottom-Tab-Bar + Melden-FAB (footer.php)
 * ------------------------------------------------------------------- */

.bh-app-bottomnav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--bh-z-bottomnav);
	max-width: var(--bh-content-width);
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0.5rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	background: rgba(252, 248, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-lg) var(--bh-radius-lg) 0 0;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.bh-app-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	/* Vorher opacity: 0.6 – das drückte die Labels auf ~3:1 (Lighthouse
	   10.07.2026). Gedämpfte, aber AA-feste Farbe statt Transparenz. */
	color: var(--bh-outline);
	text-decoration: none;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.5rem;
	border-radius: var(--bh-radius-full);
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.bh-app-bottomnav__item:focus-visible {
	color: var(--bh-on-surface-variant);
}

@media (hover: hover) {
	.bh-app-bottomnav__item:hover {
		color: var(--bh-on-surface-variant);
	}
}

.bh-app-bottomnav__item:active {
	transform: scale(0.92);
}

.bh-app-bottomnav__item.is-active {
	color: var(--bh-primary-container);
}

.bh-app-bottomnav__item.is-active .material-symbols-outlined {
	display: inline-flex;
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
	padding: 0.3rem 0.9rem;
	border-radius: var(--bh-radius-full);
	font-variation-settings: 'FILL' 1;
}

.bh-app-fab-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--bh-bottomnav-height) + 0.75rem);
	z-index: var(--bh-z-sticky-cta);
	display: flex;
	justify-content: center;
	padding: 0 var(--bh-edge-margin);
	pointer-events: none;
}

.bh-app-fab-melden {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: calc(var(--bh-content-width) - 2 * var(--bh-edge-margin));
	width: 100%;
	justify-content: center;
	background: var(--bh-accent);
	color: var(--bh-on-accent);
	font-weight: 800;
	font-size: 0.95rem;
	padding: 0.9rem 1.5rem;
	border-radius: var(--bh-radius-full);
	text-decoration: none;
	box-shadow: 0 10px 40px rgba(255, 107, 107, 0.4);
	transition: transform 0.15s ease;
}

.bh-app-fab-melden:focus-visible {
	color: var(--bh-on-accent);
	transform: translateY(-1px);
}

/* UI-Cleanup 08.07.2026: Hover-Lift hinter (hover: hover) gegatet, damit er
   auf Touch-Geräten nicht nach dem Antippen kleben bleibt. Tastatur-Fokus
   (oben) bleibt bewusst unabhängig davon immer sichtbar. */
@media (hover: hover) and (pointer: fine) {
	.bh-app-fab-melden:hover {
		color: var(--bh-on-accent);
		transform: translateY(-1px);
	}
}

.bh-app-fab-melden:active {
	transform: scale(0.97);
}

.bh-app-fab-wrap--scroll-reveal .bh-app-fab-melden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition: opacity 0.2s var(--bh-ease-out), transform 0.2s var(--bh-ease-out);
}

.bh-app-fab-wrap--scroll-reveal.is-visible .bh-app-fab-melden {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.bh-app-foerderhinweis {
	text-align: center;
	font-size: 0.72rem;
	color: var(--bh-outline);
	padding: 0.75rem 1rem calc(var(--bh-bottomnav-height) + 0.5rem);
	margin: 0;
}

.bh-app-foerderhinweis a {
	color: inherit;
}

/* ---------------------------------------------------------------------
 * Status-Zeile (Startseite, Redesign 09.07.2026): Nachfolger des früheren
 * .bh-status-strip. Der Dauerzustand "gesperrt" wird nicht mehr als Alarm
 * inszeniert (die Sperrung bleibt voraussichtlich Jahre bestehen – kein
 * Nachrichtenwert), sondern als ruhige, einzeilige Statusanzeige in
 * neutraler Fläche. Alert-Optik inkl. Puls-Animation nur noch als
 * --neuigkeit-Modifier, wenn der Status vom bekannten Dauerzustand
 * abweicht (s. bh_render_status_zeile() in functions.php).
 * ------------------------------------------------------------------- */

.bh-status-zeile {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 1rem;
	border-radius: var(--bh-radius-full);
	text-decoration: none;
	font-size: 0.78rem;
	background: var(--bh-surface-container);
	border: 1px solid rgba(0, 0, 0, 0.05);
	color: var(--bh-on-surface-variant);
	transition: background-color 0.2s ease;
}

.bh-status-zeile:focus-visible {
	background: var(--bh-surface-container-high, #eae6f0);
}

@media (hover: hover) {
	.bh-status-zeile:hover {
		background: var(--bh-surface-container-high, #eae6f0);
	}
}

.bh-status-zeile__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.bh-status-zeile.bh-ampel--rot { background: var(--bh-surface-container); color: var(--bh-on-surface-variant); }
.bh-status-zeile.bh-ampel--rot .bh-status-zeile__dot { background: #c62828; }
.bh-status-zeile.bh-ampel--gelb .bh-status-zeile__dot { background: #a67c00; }
.bh-status-zeile.bh-ampel--gruen .bh-status-zeile__dot { background: #2e7d32; }

.bh-status-zeile__dot-icon {
	font-size: 1.1rem;
	color: var(--bh-primary-container);
	flex-shrink: 0;
}

.bh-status-zeile__text {
	min-width: 0;
	/* Kein nowrap/ellipsis mehr (04.09.2026): Hier wurden mobil 88 % des
	   Statustexts STILL abgeschnitten – gemessen 219 px sichtbare Breite bei
	   1869 px Inhalt. Ein Umbruch ist hässlicher als eine Ellipse, aber eine
	   abgeschnittene Kernaussage ist schlimmer als beides. Die Längenprüfung
	   in functions.php hält die Zeile ohnehin kurz; das hier ist das Netz
	   darunter. */
	overflow-wrap: break-word;
}

.bh-status-zeile__text strong {
	color: var(--bh-on-surface);
	font-weight: 700;
}

.bh-status-zeile__meta {
	font-weight: 400;
}

.bh-status-zeile__link {
	display: inline-flex;
	align-items: center;
	gap: 0.1rem;
	margin-left: auto;
	font-weight: 700;
	color: var(--bh-primary-container);
	flex-shrink: 0;
}

.bh-status-zeile__link .material-symbols-outlined {
	font-size: 1.1rem;
}

@keyframes bh-pulse-ring {
	0% { transform: scale(0.9); opacity: 0.6; }
	50% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(0.9); opacity: 0.6; }
}

/* Ereignisgesteuerte Alert-Variante: nur wenn der Status vom bekannten
   Dauerzustand "rot/gesperrt" abweicht – also bei echten Neuigkeiten
   (Teilöffnung/Wiedereröffnung). Farbfläche je Ampelwert + Puls. */

.bh-status-zeile--neuigkeit,
.bh-status-zeile--neuigkeit.bh-ampel--rot {
	background: rgba(186, 26, 26, 0.12);
	border-color: rgba(186, 26, 26, 0.15);
	color: #8c1520;
}

.bh-status-zeile--neuigkeit.bh-ampel--gelb {
	background: rgba(201, 154, 0, 0.14);
	border-color: rgba(201, 154, 0, 0.18);
	color: var(--bh-warning-text);
}

.bh-status-zeile--neuigkeit.bh-ampel--gruen {
	background: rgba(46, 125, 50, 0.12);
	border-color: rgba(46, 125, 50, 0.15);
	color: #16643b;
}

.bh-status-zeile--neuigkeit .bh-status-zeile__dot {
	animation: bh-pulse-ring 2s infinite;
}

/* Ampel-Farbtöne: generisch (nicht auf .bh-status-strip beschränkt), damit
   sie auch im Routecheck-Modul, dessen Querungsliste etc. wiederverwendbar
   sind – eine Quelle für "was bedeutet Rot/Gelb/Grün" im ganzen Theme. */

.bh-ampel--rot {
	background: #ffdad8;
	color: #8c1520;
}

.bh-ampel--gelb {
	background: var(--bh-warning-bg);
	color: var(--bh-warning-text);
}

.bh-ampel--gruen {
	background: #d9f2e3;
	color: #16643b;
}

.bh-ampel-dot--rot,
.bh-crossing-item__dot.bh-ampel--rot {
	background: #c62828;
}

.bh-ampel-dot--gelb,
.bh-crossing-item__dot.bh-ampel--gelb {
	background: #a67c00;
}

.bh-ampel-dot--gruen,
.bh-crossing-item__dot.bh-ampel--gruen {
	background: #2e7d32;
}

/* ---------------------------------------------------------------------
 * Routecheck-Modul (Startseite-Hauptfeature): "Wie komme ich heute am
 * besten von A nach B?" – Rheinquerungen, Kennzahlen, Wetter.
 * ------------------------------------------------------------------- */

.bh-routecheck {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-lg);
	overflow: hidden;
	margin: 1.5rem 0;
	box-shadow: 0 20px 40px -24px rgba(28, 27, 34, 0.35);
}

.bh-routecheck__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--bh-surface-container-low);
}

.bh-routecheck__header-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.bh-routecheck__header-icon {
	font-size: 1.4rem;
	color: var(--bh-primary-container);
	flex-shrink: 0;
}

.bh-routecheck__header-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(6px);
	color: var(--bh-on-surface);
	border: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.6rem;
}

.bh-routecheck__header-badge::before {
	content: '';
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--bh-outline);
}

.bh-routecheck__header-badge--rot::before { background: #c62828; }
.bh-routecheck__header-badge--gelb::before { background: #a67c00; }
.bh-routecheck__header-badge--gruen::before { background: #2e7d32; }
/* Kein Live-Datenstand: neutral grau statt Ampel (27.07.2026). */
.bh-routecheck__header-badge--keine::before { background: var(--bh-outline); }

.bh-routecheck__header-text h2 {
	margin: 0.25rem 0 0;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.35;
	color: var(--bh-primary-container);
}

.bh-routecheck__header .bh-eyebrow-label {
	color: var(--bh-on-surface-variant);
}

.bh-routecheck__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 1rem 0.5rem;
	border-top: 1px solid var(--bh-surface-container-high);
	border-bottom: 1px solid var(--bh-surface-container-high);
}

.bh-routecheck__stat {
	text-align: center;
	border-left: 1px solid var(--bh-surface-container-high);
}

.bh-routecheck__stat:first-child {
	border-left: none;
}

.bh-routecheck__stat-label {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bh-on-surface-variant);
	margin-top: 0.2rem;
}

.bh-routecheck__stat-value {
	display: block;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--bh-on-surface);
}

.bh-routecheck__stat--delay .bh-routecheck__stat-value {
	color: var(--bh-secondary);
}

.bh-routecheck__subheading {
	margin: 1.1rem 1rem 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bh-on-surface-variant);
}

.bh-crossing-list {
	list-style: none;
	margin: 0;
	padding: 0 1rem 0.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bh-crossing-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.bh-crossing-item--gesperrt {
	opacity: 0.45;
}

/* „Keine Messwerte" (27.07.2026) – eigener Zustand, bewusst getrennt von
 * --gesperrt: eine fehlende Messung ist keine gesperrte Brücke. Neutral grau,
 * KEINE Ampelfarbe, damit der Zustand nicht als Verkehrslage gelesen wird. */
.bh-crossing-item--keine-daten {
	opacity: 0.7;
}

.bh-crossing-item--keine-daten .bh-crossing-item__dot,
.bh-ampel--keine {
	background: var(--bh-outline-variant, #c8c4d5);
	color: var(--bh-on-surface-variant);
}

.bh-crossing-item__zeit--leer {
	color: var(--bh-on-surface-variant);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: none;
}

.bh-routecheck__keine-daten {
	margin: 0 0 1rem;
}

.bh-crossing-item__dot {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.bh-crossing-item__left {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.bh-crossing-item__kopf {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.bh-crossing-item__name {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--bh-on-surface);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bh-crossing-item__route {
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--bh-on-surface-variant);
}

/* Von→Nach-Pfeilzeile (Stitch-Mockup "Startseite - Optimierte Fahrtrichtungen",
   Entscheidung 09.07.2026): kurze Richtungs-Labels statt langer Fließtext-
   Richtungsangabe, für schnelle Erfassbarkeit auf einen Blick. Einrückung
   (margin-left) richtet sich optisch am Punkt + Abstand der Kopfzeile aus. */
.bh-crossing-item__pfeil {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: 0.95rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--bh-on-surface-variant);
}

.bh-crossing-item__pfeil .material-symbols-outlined {
	font-size: 0.85rem;
	color: var(--bh-outline);
}

.bh-crossing-item__right {
	text-align: right;
	flex-shrink: 0;
}

.bh-crossing-item__zeit {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--bh-on-surface);
	white-space: nowrap;
}

.bh-crossing-item--gesperrt .bh-crossing-item__zeit {
	color: var(--bh-error);
	text-transform: uppercase;
	font-size: 0.78rem;
}

.bh-crossing-item__verzoegerung {
	font-weight: 400;
	font-size: 0.72rem;
	color: var(--bh-on-surface-variant);
}

.bh-crossing-item__auslastung {
	display: block;
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.bh-crossing-item__auslastung.bh-ampel--rot { color: #c62828; background: transparent; padding: 0; }
.bh-crossing-item__auslastung.bh-ampel--gelb { color: #8a6700; background: transparent; padding: 0; }
.bh-crossing-item__auslastung.bh-ampel--gruen { color: #2e7d32; background: transparent; padding: 0; }

.bh-routecheck__weather {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 1.1rem 1rem 1.25rem;
	padding: 0.85rem 1rem;
	background: var(--bh-surface-container);
	border-radius: var(--bh-radius-sm);
}

.bh-routecheck__weather > .material-symbols-outlined {
	font-size: 1.4rem;
	color: var(--bh-primary-container);
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.bh-routecheck__weather-heute {
	margin: 0 0 0.25rem;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--bh-on-surface);
}

.bh-routecheck__weather-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.75rem;
	color: var(--bh-on-surface-variant);
	line-height: 1.4;
}

.bh-routecheck__weather-hinweis .material-symbols-outlined {
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.bh-routecheck__quelle {
	margin: 1.1rem 0 0;
	padding: 0.6rem 1rem;
	background: var(--bh-surface-container);
	font-size: 0.62rem;
	color: var(--bh-on-surface-variant);
	font-style: italic;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Gemeinsame Bausteine: Hero-Karte, Cards, Badges, Buttons, Formulare
 * ------------------------------------------------------------------- */

.bh-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--bh-radius-lg);
	background: linear-gradient(135deg, var(--bh-primary-container) 0%, var(--bh-primary) 100%);
	color: var(--bh-on-primary);
	padding: 1.75rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 20px 40px -20px rgba(39, 25, 140, 0.5);
}

.bh-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #ffb1ab; /* helle Koralle: 5,35:1 auf dem Navy-Hero (Kontrast-Audit 10.07.2026) */
	margin-bottom: 0.5rem;
}

.bh-hero__eyebrow-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--bh-accent);
	animation: bh-pulse 2s infinite;
}

.bh-hero__title {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

/* Höhere Spezifität als ".bh-page h1" (Basis-Typografie für Editorial-
   Content, s. oben): sonst gewinnt dessen dunkle Indigo-Farbe gegen das
   geerbte Weiß aus .bh-hero und der Titel wird auf dem dunklen
   Hero-Hintergrund quasi unsichtbar. */
.bh-hero .bh-hero__title {
	color: var(--bh-on-primary);
}

.bh-hero__text {
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
	margin: 0;
}

.bh-hero__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.bh-hero__fact-label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 0.15rem;
}

.bh-hero__fact-value {
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0;
}

@keyframes bh-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Kernfakten-Block (ÖPNV-Linienseiten, Baustellen-Einzelseiten): kompaktes
   Pendant zum großen .bh-hero auf den Hub-/Pillar-Seiten – dieselbe
   Karten-Sprache, aber hell statt navy, da hier kein "diese eine Info
   dominiert die ganze Seite"-Anspruch besteht wie auf der Startseite. */

.bh-kernfakten {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1.5rem;
	margin: 0 0 1.5rem;
	box-shadow: 0 6px 16px rgba(28, 27, 34, 0.05);
}

.bh-kernfakten > .bh-badge {
	margin-bottom: 1rem;
}

.bh-kernfakten dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.6rem 1.5rem;
	margin: 0;
}

.bh-kernfakten dt {
	font-weight: 700;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bh-on-surface-variant);
	white-space: nowrap;
	padding-top: 0.1rem;
}

.bh-kernfakten dd {
	margin: 0;
	color: var(--bh-on-surface);
}

@media (max-width: 480px) {
	.bh-kernfakten dl {
		grid-template-columns: 1fr;
		gap: 0.15rem 0;
	}

	.bh-kernfakten dd {
		margin-bottom: 0.6rem;
	}
}

.bh-section {
	margin-bottom: 2rem;
}

.bh-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.85rem;
}

.bh-section__head-link {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--bh-primary-container);
	text-decoration: none;
	flex-shrink: 0;
	/* Klickziel auf >= 24px bringen (WCAG 2.5.8), ohne das Layout zu
	   verschieben: Padding vergrößert die Trefferfläche, der negative
	   Margin gleicht es optisch aus (A11y-Audit 10.07.2026). */
	padding: 0.35rem 0.25rem;
	margin: -0.35rem -0.25rem;
}

.bh-section__title {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--bh-primary-container);
	margin: 0;
}

.bh-section__title-accent {
	color: var(--bh-accent-ink);
}

.bh-eyebrow-label {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bh-on-surface-variant);
}

.bh-card {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1.25rem;
	box-shadow: 0 6px 16px rgba(28, 27, 34, 0.05);
}

.bh-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.75rem;
	border-radius: var(--bh-radius-full);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bh-badge--nordbruecke {
	background: rgba(255, 107, 107, 0.15);
	color: var(--bh-secondary);
}

.bh-badge--unabhaengig {
	background: rgba(63, 54, 163, 0.1);
	color: var(--bh-primary-container);
}

.bh-badge--unklar {
	background: var(--bh-surface-container);
	color: var(--bh-on-surface-variant);
}

.bh-badge--kategorie {
	background: var(--bh-surface-container);
	color: var(--bh-on-surface-variant);
	text-transform: none;
}

.bh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: inherit;
	font-weight: 800;
	font-size: 0.95rem;
	padding: 0.9rem 1.75rem;
	border-radius: var(--bh-radius-full);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.bh-btn:active {
	transform: scale(0.97);
}

.bh-btn--accent,
.bh-page a.bh-btn--accent {
	background: var(--bh-accent);
	color: var(--bh-on-accent); /* .bh-page a würde sonst gewinnen (Kontrast-Audit 10.07.2026) */
	box-shadow: 0 10px 30px rgba(255, 107, 107, 0.35);
	width: 100%;
}

.bh-btn--accent:focus-visible {
	background: var(--bh-accent); /* Kadence button:hover/:focus würde sonst sein Blau setzen */
	filter: brightness(1.08);
	color: var(--bh-on-accent);
}

@media (hover: hover) {
	.bh-btn--accent:hover {
		background: var(--bh-accent);
		filter: brightness(1.08);
		color: var(--bh-on-accent);
	}
}

.bh-btn--primary {
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
}

.bh-btn--primary:focus-visible {
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
	filter: brightness(1.08);
}

@media (hover: hover) {
	.bh-btn--primary:hover {
		background: var(--bh-primary-container);
		color: var(--bh-on-primary);
		filter: brightness(1.08);
	}
}

.bh-btn--ghost {
	background: var(--bh-surface-container);
	color: var(--bh-on-surface-variant);
	width: 100%;
}

/* Formulare */

.bh-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.bh-field__label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bh-on-surface-variant);
}

.bh-field__hint {
	font-size: 0.75rem;
	font-style: italic;
	color: var(--bh-on-surface-variant);
}

.bh-input,
.bh-select,
.bh-textarea {
	width: 100%;
	background: var(--bh-surface-container-low);
	border: none;
	border-radius: var(--bh-radius-sm);
	padding: 0.95rem 1.1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--bh-on-surface);
}

.bh-input:focus,
.bh-select:focus,
.bh-textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--bh-accent);
}

.bh-input--white,
.bh-select--white {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
}

.bh-form-row--honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.bh-form-status {
	margin-top: 1rem;
	font-weight: 700;
	font-size: 0.9rem;
}

.bh-form-status--error {
	color: var(--bh-error);
}

.bh-form-status--success {
	color: #16643b;
}

.bh-info-box {
	display: flex;
	gap: 0.75rem;
	background: var(--bh-surface-container);
	border-radius: var(--bh-radius-sm);
	padding: 1.1rem;
	border: 1px solid var(--bh-outline-variant);
}

.bh-info-box p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
}

.bh-info-box .material-symbols-outlined {
	color: var(--bh-primary-container);
	flex-shrink: 0;
}

/* Kategorie-/Themen-Kacheln (Melden-Formular, Inserat-Typ, Startseite-Themen) */

.bh-tile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.bh-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-align: center;
	padding: 1.4rem 1rem;
	border-radius: var(--bh-radius-sm);
	border: 2px solid transparent;
	background: var(--bh-surface-container);
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.bh-tile:focus {
	text-decoration: none;
}

/* UI-Cleanup 08.07.2026: Hover-Hintergründe hinter (hover: hover) gegatet –
   Touch-Geräte lösen :hover beim Tippen aus und der Zustand kann bis zum
   nächsten Tap "kleben" bleiben. Kein reiner Stilwechsel: exakt das Muster,
   das früher schon zum weiß-auf-weiß-Hover-Bug auf .bh-tile--dark geführt
   hat (s. Git-Historie) – hier präventiv für alle Tile-Hover-Zustände. */
@media (hover: hover) and (pointer: fine) {
	.bh-tile:hover {
		text-decoration: none;
		background: var(--bh-surface-variant);
	}

	/* .bh-tile:hover setzt einen hellen Hintergrund – auf .bh-tile--dark
	   (Indigo-Kacheln mit weißer Schrift) ergäbe das weißen Text auf
	   fast-weißem Grund. Eigene, dunkel bleibende Hover-Variante statt der
	   generischen. */
	.bh-tile--dark:hover {
		background: var(--bh-primary);
	}
}

/* Tastatur-Parität (A11y-Audit 10.07.2026): gleiche Rückmeldung wie beim
   Hover – zusätzlich zum globalen Fokus-Ring. */
.bh-tile:focus-visible {
	text-decoration: none;
	background: var(--bh-surface-variant);
}

.bh-tile--dark:focus-visible {
	background: var(--bh-primary);
}

.bh-tile:active {
	transform: scale(0.97);
}

.bh-tile.is-selected {
	border-color: var(--bh-accent);
	background: rgba(255, 107, 107, 0.06);
	box-shadow: 0 10px 25px -12px rgba(255, 107, 107, 0.6);
}

.bh-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(39, 25, 140, 0.1);
	color: var(--bh-primary-container);
}

.bh-tile.is-selected .bh-tile__icon,
.bh-tile:has(input:checked) .bh-tile__icon {
	background: rgba(255, 107, 107, 0.15);
	color: var(--bh-accent-ink);
}

.bh-tile:has(input:checked) {
	border-color: var(--bh-accent);
	background: rgba(255, 107, 107, 0.06);
}

.bh-tile__label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--bh-on-surface);
}

.bh-tile--dark {
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	padding: 1.25rem;
	border-color: transparent;
	gap: 1rem;
}

.bh-tile--dark .bh-tile__icon {
	background: transparent;
	color: var(--bh-accent);
	width: auto;
	height: auto;
	font-size: 1.9rem;
}

.bh-tile--dark .bh-tile__label {
	color: var(--bh-on-primary);
	font-size: 1rem;
}

.bh-tile--dark .bh-tile__desc {
	display: none;
}

/* Chips (Wochentage etc.) */

.bh-chip-row {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scrollbar-width: none;
}

.bh-chip-row::-webkit-scrollbar {
	display: none;
}

.bh-chip {
	flex: none;
	padding: 0.5rem 1.1rem;
	border-radius: var(--bh-radius-full);
	border: 1px solid var(--bh-outline-variant);
	background: var(--bh-surface-container-lowest);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--bh-on-surface);
	cursor: pointer;
}

.bh-chip.is-active,
.bh-chip:has(input:checked) {
	background: var(--bh-primary-container);
	border-color: var(--bh-primary-container);
	color: var(--bh-on-primary);
}

.bh-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Ticker (Startseite-Vorschau + Live-Ticker-Archiv)
 * ------------------------------------------------------------------- */

.bh-ticker-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.bh-ticker-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1rem 1.1rem;
}

.bh-ticker-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 107, 107, 0.12);
	color: var(--bh-accent-ink);
}

.bh-ticker-item--kritisch .bh-ticker-item__icon {
	background: rgba(186, 26, 26, 0.12);
	color: var(--bh-error);
}

.bh-ticker-item__body {
	flex: 1;
	min-width: 0;
}

.bh-ticker-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	align-items: center;
	margin-bottom: 0.35rem;
}

.bh-ticker-item__meta time {
	font-size: 0.75rem;
	color: var(--bh-on-surface-variant);
}

.bh-ticker-item__text {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--bh-on-surface);
}

.bh-ticker-item__quelle {
	font-size: 0.78rem;
	margin: 0.4rem 0 0;
}

.bh-ticker-item__quelle a {
	color: var(--bh-primary-container);
}

.bh-ticker-item__prioritaet--kritisch {
	color: var(--bh-error);
	font-weight: 700;
	font-size: 0.75rem;
}

.bh-ticker-vorschau-link,
.bh-see-all {
	display: block;
	text-align: center;
	margin-top: 1rem;
	font-weight: 700;
	color: var(--bh-primary-container);
	text-decoration: none;
}

/* Horizontaler Ticker-Carousel (Startseite-Vorschau) – die volle
   Archiv-Liste (archive-ticker_eintrag.php) bleibt vertikal (.bh-ticker-liste
   dort unverändert), dies ist ein bewusst separates, kompakteres Muster. */

.bh-ticker-scroll {
	list-style: none;
	display: flex;
	gap: 1rem;
	margin: 0 calc(var(--bh-edge-margin) * -1);
	padding: 0.25rem var(--bh-edge-margin) 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.bh-ticker-scroll::-webkit-scrollbar {
	display: none;
}

.bh-ticker-card {
	flex: 0 0 auto;
	scroll-snap-align: center;
	width: 78%;
	max-width: 280px;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1rem;
	box-shadow: 0 10px 25px -15px rgba(28, 27, 34, 0.3);
}

.bh-ticker-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.bh-ticker-card__zeit {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--bh-on-surface-variant);
	white-space: nowrap;
}

.bh-ticker-card__text {
	margin: 0 0 0.75rem;
	font-weight: 700;
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--bh-on-surface);
}

.bh-ticker-card__footer {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.bh-ticker-card__footer .material-symbols-outlined {
	font-size: 1.1rem;
	color: var(--bh-on-surface-variant);
}

.bh-zuletzt-aktualisiert {
	font-size: 0.8rem;
	color: var(--bh-on-surface-variant);
	margin: 0 0 1.5rem;
}

.bh-zuletzt-aktualisiert time {
	font-weight: 700;
}

.bh-archiv-intro {
	margin-bottom: 1.5rem;
	color: var(--bh-on-surface-variant);
}

.bh-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
	align-items: center;
}

.bh-legende__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* ---------------------------------------------------------------------
 * FAQ-Akkordeon (natives <details>/<summary>, per CSS gestylt)
 * ------------------------------------------------------------------- */

.bh-faq {
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

.bh-faq__item {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1.1rem 1.25rem;
	box-shadow: 0 6px 16px rgba(28, 27, 34, 0.05);
}

.bh-faq__frage {
	font-weight: 700;
	color: var(--bh-primary-container);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bh-faq__frage::-webkit-details-marker {
	display: none;
}

.bh-faq__chevron {
	color: var(--bh-accent-ink);
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.bh-faq__item[open] .bh-faq__chevron {
	transform: rotate(180deg);
}

.bh-faq__item[open] .bh-faq__frage {
	margin-bottom: 0.75rem;
}

.bh-faq__antwort {
	margin-top: 0.5rem;
	color: var(--bh-on-surface-variant);
	line-height: 1.55;
}

.bh-faq__antwort p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * ÖPNV-Hub: Nordbrücke-bedingt vs. unabhängige Baustelle
 * ------------------------------------------------------------------- */

.bh-oepnv-gruppe {
	border-radius: var(--bh-radius-sm);
	padding: 1.5rem;
	margin: 0 0 1.5rem;
	box-shadow: 0 6px 16px rgba(28, 27, 34, 0.05);
}

.bh-oepnv-gruppe h2 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0;
	font-size: 1.05rem;
}

.bh-oepnv-gruppe--nordbruecke {
	background: #ffdad8;
	border: 1px solid rgba(174, 47, 52, 0.15);
}

.bh-oepnv-gruppe--unabhaengig {
	background: #e3dfff;
	border: 1px solid rgba(63, 54, 163, 0.15);
}

.bh-oepnv-hub-liste {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.bh-oepnv-hub-liste li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.6);
	padding: 0.9rem 1.1rem;
	border-radius: var(--bh-radius-sm);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.bh-oepnv-hub-liste li a:focus-visible {
	background: #fff;
}

@media (hover: hover) {
	.bh-oepnv-hub-liste li a:hover {
		background: #fff;
	}
}

/* ---------------------------------------------------------------------
 * ÖPNV: Nächste Abfahrten (VRS-GTFS-Solldaten, s. cron-oepnv-abfahrten.php)
 * ------------------------------------------------------------------- */

.bh-oepnv-abfahrten {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1.5rem;
	margin: 0 0 1.5rem;
	box-shadow: 0 6px 16px rgba(28, 27, 34, 0.05);
}

.bh-oepnv-abfahrten h2 {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
}

.bh-oepnv-abfahrten__hinweis {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	color: var(--bh-on-surface-variant);
}

.bh-oepnv-abfahrten__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

/* Bewusst einspaltig auf allen Breiten (09.07.2026, Nutzerfeedback:
   der Zweispalter brach auf Desktop trotz min-width-Fix optisch aus dem
   Karten-Container – lange Haltestellen-/Zielnamen quetschen sich in
   zwei Spalten nur gegenseitig). */

.bh-oepnv-abfahrten__halt {
	background: var(--bh-surface-container-low);
	border-radius: var(--bh-radius-sm);
	padding: 1rem 1.1rem;
	/* Desktop-Fix 09.07.2026: Ohne min-width duerfen Grid-Items nicht unter
	   ihre Content-Breite schrumpfen – die nowrap-Richtungstexte drueckten
	   die Spalten dadurch aus dem Karten-Container heraus. */
	min-width: 0;
}

.bh-oepnv-abfahrten__halt-name {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	color: var(--bh-primary-container);
}

.bh-oepnv-abfahrten__leer {
	margin: 0;
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
}

.bh-oepnv-abfahrten__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0,1fr) statt impliziter auto-Spalte: auto wächst auf max-content
	   der breitesten Zeile – lange Zielnamen (MOTIS-Livedaten) drückten die
	   Verspätungs-Badges aus der Karte (Learning 09.07., Grid-min-content). */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem;
}

.bh-oepnv-abfahrten__liste li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 0.9rem;
}

.bh-oepnv-abfahrten__zeit {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--bh-on-surface);
	flex-shrink: 0;
}

.bh-oepnv-abfahrten__richtung {
	color: var(--bh-on-surface-variant);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* min-width:0, sonst schrumpft das Flex-Item nicht unter min-content und
	   lange Zielnamen drücken die Verspätungs-Badges aus der Karte
	   (Learning 09.07., gleiche Falle wie bei Grid). */
	flex: 1 1 auto;
	min-width: 0;
	/* Flex-Kind muss schrumpfen duerfen, sonst greift text-overflow nie. */
	flex: 1;
	min-width: 0;
}

/* Richtungs-Pfeil vor dem Fahrtziel (09.07.2026, analog zur
   Rheinquerungs-Liste der Startseite): stellt klar, dass der Text das
   Fahrtziel ist. */
.bh-oepnv-abfahrten__pfeil {
	font-size: 0.85rem;
	color: var(--bh-outline);
	flex-shrink: 0;
	align-self: center;
}

/* Live-Status-Widget (VRS-Störungen) */

.bh-stoerung-widget {
	margin: 2rem 0;
}

.bh-stoerung-liste {
	list-style: none;
	margin: 0.85rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.bh-stoerung-item {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1.1rem 1.25rem;
}

.bh-stoerung-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.bh-stoerung-item h3 {
	margin: 0 0 0.35rem;
	font-size: 1rem;
}

.bh-stoerung-item__zeitraum {
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
	margin: 0 0 0.5rem;
}

.bh-stoerung-widget__leer {
	color: var(--bh-on-surface-variant);
}

/* Warnhinweis-Block (unabhängige Baustellen klar kennzeichnen) */

.bh-warnhinweis {
	background: var(--bh-warning-bg);
	border: 2px solid var(--bh-warning-border);
	border-radius: var(--bh-radius-sm);
	padding: 1.1rem 1.25rem;
	margin: 0 0 1.5rem;
	line-height: 1.55;
}

.bh-warnhinweis p {
	margin: 0;
}

.bh-warnhinweis__titel {
	display: block;
	font-weight: 800;
	color: var(--bh-warning-text);
	margin: 0 0 0.35rem;
}

/* Marken-Variante (Coral #FE605D, dezent getönt) mit Warn-Icon links
   (21.07.2026, ÖPNV-Hinweisbox). Basis-.bh-warnhinweis bleibt unverändert
   für andere Seiten. Coral ist Marken-Akzent, KEINE Ampelfarbe – Regel ok.
   Titel bewusst dunkleres Coral (#c0392f) für AA-Kontrast auf hellem Tint;
   Fließtext bleibt dunkel/lesbar. */
.bh-warnhinweis--marke {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	background: rgba( 254, 96, 93, 0.08 );
	border-color: rgba( 254, 96, 93, 0.38 );
}
.bh-warnhinweis--marke .bh-warnhinweis__icon {
	color: #fe605d;
	font-size: 1.6rem;
	flex-shrink: 0;
	line-height: 1.4;
}
.bh-warnhinweis--marke .bh-warnhinweis__titel {
	color: #c0392f;
}
.bh-warnhinweis__text small {
	display: block;
	margin-top: 0.5rem;
	color: var(--bh-on-surface-variant);
	font-size: 0.8rem;
}

/* „Rund um deine Haltestelle" – Shared Mobility (BH-115/118).
   Design nach Stitch (Civic Pulse): Pill-Button coral, gerundete Karten mit
   Icon-Kreis, Mini-Karte + Legende. Rad = Coral, E-Scooter = Indigo (keine Ampelfarben). */
.bh-sharing { margin: 2rem 0 0; }
.bh-sharing__kopf { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1rem; }
.bh-sharing__kopf-ico { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--bh-primary); background: rgba(39, 25, 140, 0.08); border-radius: 12px; }
.bh-sharing__kopf-ico svg { width: 24px; height: 24px; }
.bh-sharing__titel { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--bh-primary); margin: 0 0 0.35rem; }
.bh-sharing__kopf .bh-sharing__titel { font-size: 1.05rem; margin: 0; line-height: 1.25; }
.bh-sharing__intro { margin: 0 0 1rem; color: var(--bh-on-surface-variant); }
.bh-sharing__kopf .bh-sharing__intro { margin: 0.15rem 0 0; font-size: 0.85rem; }
.bh-sharing__mehr { margin: 0.85rem 0 0; font-size: 0.9rem; }
.bh-sharing__mehr a { color: var(--bh-primary); font-weight: 700; }

/* Fallback-Suche ohne Standortfreigabe (Haltestelle eingeben). */
.bh-sharing__oder { display: flex; align-items: center; gap: 0.75rem; margin: 0.9rem 0; color: var(--bh-on-surface-variant); font-size: 0.85rem; }
.bh-sharing__oder::before, .bh-sharing__oder::after { content: ""; flex: 1; height: 1px; background: rgba(39, 25, 140, 0.15); }
.bh-sharing__suche-feld { position: relative; }
.bh-sharing__suche-lupe { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--bh-on-surface-variant); pointer-events: none; }
.bh-sharing__suche-feld .bh-sharing__suche-input { width: 100%; min-height: 48px; padding: 0.6rem 1rem 0.6rem 2.7rem; font: inherit; font-size: 0.95rem; border: 1.5px solid rgba(39, 25, 140, 0.25); border-radius: 999px; background: var(--bh-surface, #fff); color: inherit; box-shadow: 0 1px 4px rgba(39, 25, 140, 0.06); }
.bh-sharing__suche-feld .bh-sharing__suche-input::placeholder { color: var(--bh-on-surface-variant); opacity: 0.75; }
.bh-sharing__suche-feld .bh-sharing__suche-input:focus-visible { outline: 3px solid var(--bh-primary); outline-offset: 1px; border-color: var(--bh-primary); }
.bh-sharing__suche-status { margin: 0.5rem 0 0 0.4rem; font-size: 0.85rem; color: var(--bh-on-surface-variant); }
.bh-sharing__suche-status:empty { margin: 0; }
.bh-sharing__suche-ergebnisse { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bh-sharing__treffer { min-height: 40px; padding: 0.45rem 1rem; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--bh-primary); background: var(--bh-surface, #fff); border: 1.5px solid rgba(39, 25, 140, 0.3); border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
@media (hover: hover) { .bh-sharing__treffer:hover { background: var(--bh-primary); border-color: var(--bh-primary); color: var(--bh-on-primary, #fff); } }
.bh-sharing__treffer:focus-visible { outline: 3px solid var(--bh-primary); outline-offset: 2px; background: var(--bh-primary); border-color: var(--bh-primary); color: var(--bh-on-primary, #fff); }
.bh-sharing__btn {
	display: flex; align-items: center; justify-content: center; gap: 0.5rem;
	width: 100%; background: #ff6b6b; color: #fff; border: none;
	border-radius: 999px; padding: 1rem 1.2rem; font-weight: 800; font-size: 1rem;
	font-family: inherit; cursor: pointer; min-height: 52px;
	box-shadow: 0 10px 30px rgba(255,107,107,0.28);
	transition: transform 0.12s ease, opacity 0.12s ease;
}
.bh-sharing__btn:hover { opacity: 0.93; }
.bh-sharing__btn:active { transform: scale(0.985); }
.bh-sharing__btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }
.bh-sharing__btn-ico { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.bh-sharing__status { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--bh-on-surface-variant); }
.bh-sharing__map-wrap { margin-top: 0.9rem; }
.bh-sharing__map { width: 100%; height: 240px; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--bh-outline-variant, #c8c4d5); background: #eef1f6; }
.bh-sharing__legende { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bh-on-surface-variant); }
.bh-sharing__legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.bh-sharing__ldot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }
.bh-sharing__ldot--user { background: #27198c; }
.bh-sharing__ldot--rad { background: #fe605d; }
.bh-sharing__ldot--scooter { background: #4527a0; }
.bh-sharing__ergebnis { display: grid; gap: 0.7rem; margin-top: 0.9rem; }
.bh-sharing__card {
	display: flex; gap: 0.9rem; align-items: center;
	background: var(--bh-surface-container-low); border: 1px solid var(--bh-outline-variant, #c8c4d5);
	border-radius: 1.25rem; padding: 1rem 1.15rem;
}
.bh-sharing__card--leer { opacity: 0.75; }
.bh-sharing__card-ico { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.bh-sharing__card-ico svg { width: 1.6rem; height: 1.6rem; }
.bh-sharing__card-ico--rad { background: rgba(254,96,93,0.12); color: #fe605d; }
.bh-sharing__card-ico--scooter { background: rgba(69,39,160,0.12); color: #4527a0; }
.bh-sharing__card-body { min-width: 0; }
.bh-sharing__card-num { font-size: 1.5rem; font-weight: 800; color: var(--bh-on-surface); line-height: 1.1; }
.bh-sharing__card-num span { font-size: 0.85rem; font-weight: 700; color: var(--bh-on-surface-variant); }
.bh-sharing__card-label { font-size: 0.85rem; color: var(--bh-on-surface-variant); margin-top: 0.1rem; }
.bh-sharing__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.bh-sharing__chip { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bh-primary); background: var(--bh-surface-container-high); border-radius: 999px; padding: 0.24rem 0.6rem; }
.bh-sharing__quelle { font-size: 0.75rem; color: var(--bh-outline); margin: 1rem 0 0; }
.bh-sharing__pin span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #27198c; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(39,25,140,0.18); }

/* Park&Ride-Hub */

.bh-parkride-liste {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.bh-parkride-item {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1.1rem 1.25rem;
}

.bh-parkride-item h2 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.bh-parkride-item__adresse {
	color: var(--bh-on-surface-variant);
	margin: 0 0 0.5rem;
}

.bh-parkride-detail {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	box-shadow: 0 6px 16px rgba(28, 27, 34, 0.05);
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.bh-parkride-detail dt {
	font-weight: 700;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bh-on-surface-variant);
	margin-top: 1rem;
}

.bh-parkride-detail dt:first-child {
	margin-top: 0;
}

.bh-parkride-detail dd {
	margin: 0.25rem 0 0;
	color: var(--bh-on-surface);
}

/* ---------------------------------------------------------------------
 * Interaktive Karte
 * ------------------------------------------------------------------- */

.bh-karte-intro {
	color: var(--bh-on-surface-variant);
	line-height: 1.55;
}

.bh-karte-legende-bar {
	display: flex;
	gap: 1.25rem;
	background: var(--bh-surface-container);
	border-radius: var(--bh-radius-sm);
	padding: 0.9rem 1.1rem;
	margin: 1.25rem 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.bh-karte-legende-bar::-webkit-scrollbar {
	display: none;
}

.bh-karte-legende-bar__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.bh-karte-legende-bar__dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Layer-Toggle-Chips der LKW-Karte (/wirtschaft/logistik/): Legende =
   Steuerung, ein Element. Button-Reset + Chip-Optik analog Legende-Items,
   >=44px Touch-Ziel (A11y-Regel); ausgeschaltete Layer sichtbar gedimmt,
   Zustand hängt NICHT nur an Farbe (aria-pressed + Durchstreichung). */
.bh-karte-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	white-space: nowrap;
	flex-shrink: 0;
	background: none;
	border: 1px solid var(--bh-outline-variant, #cac4d0);
	border-radius: 999px;
	padding: 0.55rem 0.9rem;
	min-height: 44px;
	cursor: pointer;
	color: inherit;
	font-family: inherit;
}

.bh-karte-toggle[aria-pressed='false'] {
	opacity: 0.45;
	text-decoration: line-through;
}

.bh-karte-toggle:focus-visible {
	outline: 2px solid var(--bh-primary-container);
	outline-offset: 2px;
}

.bh-karte-sharing-status {
	font-size: 0.8rem;
	color: var(--bh-on-surface-variant);
	align-self: center;
}

.bh-karte-map {
	width: 100%;
	height: 420px;
	margin: 0 0 0.5rem;
	border-radius: var(--bh-radius-sm);
	border: 4px solid var(--bh-surface-container-lowest);
	box-shadow: 0 20px 40px -20px rgba(28, 27, 34, 0.35);
}

.bh-karte-map--platzhalter {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	color: var(--bh-on-surface-variant);
	font-size: 0.95rem;
	text-align: center;
	padding: 1rem;
}

.bh-karte-hinweis {
	font-size: 0.78rem;
	color: var(--bh-outline);
	text-align: center;
}

.bh-karte-marker span {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   TICKER-MELDUNG Detailseite (11.09.2026) – journalistischer Aufbau
   ========================================================================== */
.bh-meldung { display: flex; flex-direction: column; gap: 0.875rem; max-width: 42rem; }
.bh-meldung__zurueck { margin: 0.25rem 0 0; font-size: 0.875rem; }
.bh-meldung__zurueck a { color: var(--bh-primary-container); font-weight: 600; text-decoration: none; }
.bh-meldung__zurueck a:hover { text-decoration: underline; }
.bh-meldung__dach { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; }
.bh-meldung__prio { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.75rem; border-radius: var(--bh-radius-full); border: 1px solid var(--bh-outline); color: var(--bh-on-surface-variant); }
.bh-meldung__prio--kritisch { border-color: #b3261e; color: #b3261e; }
.bh-meldung__titel {
	margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; color: var(--bh-on-surface);
}
.bh-meldung__meta { margin: 0; font-size: 0.8125rem; color: var(--bh-outline); font-variant-numeric: tabular-nums; }
.bh-meldung__gilt {
	display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
	background: var(--bh-surface-container-lowest); border: 1px solid var(--bh-outline-variant); border-radius: var(--bh-radius-sm);
}
.bh-meldung__gilt .material-symbols-outlined { font-size: 1.375rem; color: var(--bh-primary-container); }
.bh-meldung__gilt-text { display: flex; flex-direction: column; gap: 0.0625rem; }
.bh-meldung__gilt-text strong { font-size: 0.9375rem; font-weight: 700; }
.bh-meldung__gilt-text span { font-size: 0.875rem; color: var(--bh-on-surface-variant); font-variant-numeric: tabular-nums; }
/* Zustand über Kontur und Icon, nicht über Ampelfarbe: Das ist kein Live-Status. */
.bh-meldung__gilt--kommt { border-style: dashed; }
.bh-meldung__gilt--vorbei { opacity: 0.7; }
.bh-meldung__gilt--vorbei .material-symbols-outlined { color: var(--bh-outline); }
/* BH-134: Hinweis auf ein Zeitfenster, das eine Planung ist und kein Termin.
   Bewusst zurückhaltend – kein Warn-Rot, keine Ampelfarbe (die sind für
   Live-Status reserviert). Es ist eine Einordnung, keine Störung. */
.bh-meldung__gilt--planung { border-style: dashed; }
.bh-meldung__gilt-hinweis {
	display: block;
	margin-top: 0.25rem;
	/* Haengender Einzug: Die zweite Zeile soll am Text stehen, nicht unter dem
	   Symbol -- sonst franst der Absatz links aus. */
	padding-left: 1.3125rem;
	font-size: 0.8125rem;
	font-style: normal;
	line-height: 1.35;
	color: var(--bh-on-surface-variant);
}
.bh-meldung__gilt-hinweis::before { content: "i"; display: inline-grid; place-items: center; width: 0.9375rem; height: 0.9375rem; margin-left: -1.3125rem; margin-right: 0.375rem; border: 1px solid currentColor; border-radius: 50%; font-size: 0.625rem; font-weight: 700; vertical-align: -0.125rem; }

/* BH-134 im Ausblick: „geplant" als kleine Marke am Zeitfenster, plus der
   ausgeschriebene Hinweis im Sheet. Gleiche Zurückhaltung wie oben. */
.bh-ausblick__planung {
	display: inline-block;
	margin-left: 0.375rem;
	padding: 0 0.3125rem;
	border: 1px solid var(--bh-outline);
	border-radius: 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--bh-on-surface-variant);
	vertical-align: 0.0625rem;
}
.bh-ausblick__fenster--planung { color: var(--bh-on-surface-variant); }
.bh-ausblick-sheet__planung {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--bh-on-surface-variant);
}
.bh-meldung__vorspann { margin: 0.25rem 0 0; font-size: 1.125rem; line-height: 1.5; font-weight: 600; color: var(--bh-on-surface); }
.bh-meldung__text { font-size: 1rem; line-height: 1.6; color: var(--bh-on-surface-variant); }
.bh-meldung__text p { margin: 0 0 0.875rem; }
.bh-meldung__text ul { margin: 0 0 0.875rem; padding-left: 1.25rem; }
.bh-meldung__text li { margin: 0 0 0.375rem; }
.bh-meldung__text strong { color: var(--bh-on-surface); }
.bh-meldung__quelle { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding-top: 0.875rem; border-top: 1px solid var(--bh-outline-variant); font-size: 0.875rem; color: var(--bh-on-surface-variant); }
.bh-meldung__quelle .material-symbols-outlined { font-size: 1.125rem; color: var(--bh-primary-container); }
.bh-meldung__quelle a { color: var(--bh-primary-container); font-weight: 600; }
.bh-meldung__weitere { margin-top: 1rem; }
.bh-meldung__weitere h2 { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.bh-meldung__weitere ul { margin: 0; padding: 0; list-style: none; background: var(--bh-surface-container-lowest); border: 1px solid var(--bh-outline-variant); border-radius: var(--bh-radius-sm); overflow: hidden; }
.bh-meldung__weitere li + li { border-top: 1px solid var(--bh-outline-variant); }
.bh-meldung__weitere a { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.75rem 1rem; min-height: 3rem; color: var(--bh-on-surface); text-decoration: none; font-size: 0.9375rem; font-weight: 600; }
.bh-meldung__weitere a:hover { background: var(--bh-surface-container-low); }
.bh-meldung__weitere-datum { flex: 0 0 3rem; font-size: 0.8125rem; color: var(--bh-outline); font-variant-numeric: tabular-nums; font-weight: 600; }
@media (min-width: 48rem) { .bh-meldung__titel { font-size: 1.875rem; } }

/* ==========================================================================
   KARTENSEITE /karte/ (08.09.2026) – die Karte ist der Inhalt.
   ==========================================================================
   Ebenen-Chips liegen AUF der Karte (Legende = Steuerung), Marker öffnen das
   Sheet. Ampelfarben nur in der Verkehrslage-Legende – das sind Live-Werte. */

.bh-kartenseite { display: flex; flex-direction: column; gap: 0.75rem; }
.bh-kartenseite__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bh-kartenseite__titel { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; }
.bh-kartenseite__stand { margin: 0; font-size: 0.8125rem; color: var(--bh-on-surface-variant); font-variant-numeric: tabular-nums; }

.bh-kartenseite__buehne { position: relative; }
/* Fast bildfüllend: Viewport minus Kopfzeile, Titel und Tab-Leiste. Mindestens 22 rem, damit
   Querformat-Handys nicht auf einen Streifen fallen. */
.bh-kartenseite__karte {
	height: max(22rem, calc(100dvh - 20rem)); margin: 0; border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm); box-shadow: none;
}
@media (min-width: 48rem) { .bh-kartenseite__karte { height: max(28rem, calc(100dvh - 21.5rem)); } }

.bh-kartenseite__ebenen {
	/* Über der Karte, nicht darauf – und umbrechend: Der fünfte Chip lag auf dem
	   Handy außerhalb des Sichtbereichs (Rückmeldung Thomas 08.09.). Zwei Zeilen
	   kosten ~45 px Karte, dafür ist jede Ebene ohne Scrollen zu sehen. */
	display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.5rem;
}
.bh-kartenseite__chip {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0.375rem 0.75rem;
	border: 1px solid var(--bh-outline-variant); border-radius: var(--bh-radius-full);
	background: var(--bh-surface-container-lowest); color: var(--bh-on-surface);
	font: inherit; font-size: 0.8125rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.bh-kartenseite__chip[aria-pressed="false"] { color: var(--bh-on-surface-variant); background: transparent; border-style: dashed; }
.bh-kartenseite__chip[aria-pressed="false"] .bh-kartenseite__chip-punkt,
.bh-kartenseite__chip[aria-pressed="false"] .bh-kartenseite__chip-linie { opacity: 0.35; }
/* Kadence: alle vier Zustände explizit, sonst wird der Chip dunkel. */
button.bh-kartenseite__chip:hover, button.bh-kartenseite__chip:focus, button.bh-kartenseite__chip:focus-visible, button.bh-kartenseite__chip:active {
	background: var(--bh-surface-container-low); color: var(--bh-on-surface); box-shadow: none;
}
button.bh-kartenseite__chip:focus-visible { outline: 3px solid var(--bh-primary-container); outline-offset: 2px; }
.bh-kartenseite__chip-punkt { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.bh-kartenseite__chip-linie {
	width: 1rem; height: 0.3125rem; border-radius: 2px;
	background: linear-gradient(to right, #2e7d32 0 34%, #a67c00 34% 67%, #c62828 67%);
}

.bh-kartenseite__sharing { position: absolute; left: 0.625rem; bottom: 2rem; z-index: 500; margin: 0; padding: 0.375rem 0.75rem; border-radius: var(--bh-radius-full);
	background: rgba(252, 248, 255, 0.94); font-size: 0.75rem; color: var(--bh-on-surface-variant); box-shadow: 0 1px 3px rgba(28, 27, 34, 0.12); }

.bh-kartenseite__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0; font-size: 0.75rem; color: var(--bh-on-surface-variant); }
.bh-kartenseite__lg { display: inline-block; width: 1.125rem; height: 0.3125rem; border-radius: 2px; margin-left: 0.375rem; }
.bh-kartenseite__lg:first-child { margin-left: 0; }
.bh-kartenseite__lg-text { color: var(--bh-outline); }
.bh-kartenseite__quelle { margin: 0; font-size: 0.75rem; color: var(--bh-outline); }
.bh-kartenseite__quelle a { color: inherit; }
.bh-karte-sheet__text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--bh-on-surface-variant); }

/* Leaflet-Zoom unten rechts, oberhalb der Attribution, Touch-groß. */
.bh-kartenseite__karte .leaflet-bottom.leaflet-right { margin-bottom: 1.5rem; }
.bh-kartenseite__karte .leaflet-control-zoom a { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1.25rem; }

@media (min-width: 48rem) { .bh-kartenseite__titel { font-size: 1.75rem; } }

/* ---------------------------------------------------------------------
 * Pendler-Modus: Setup-Formular + aktives Dashboard.
 * ------------------------------------------------------------------- */

.bh-pendler__intro {
	margin-bottom: 1.5rem;
}

.bh-pendler__intro-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--bh-primary-container);
	margin: 0 0 0.5rem;
}

.bh-pendler__intro-text {
	color: var(--bh-on-surface-variant);
	margin: 0;
}

.bh-pendler-form {
	margin-bottom: 2rem;
}

.bh-pendler-form__fields {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.bh-pendler-form__field {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--bh-surface-container-low);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	padding: 0.9rem 1.1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* UI-Cleanup 08.07.2026: .bh-pendler-form__input hatte `outline: none` ganz
   ohne Ersatz – Tastatur-Nutzer:innen bekamen beim Tabben in Start-/Ziel-
   Feld keinerlei sichtbares Feedback. Ring jetzt auf den umschließenden
   Pill-Container statt auf den randlosen Input selbst, analog zum
   Fokus-Muster von .bh-input (Zeile ~1035). */
.bh-pendler-form__field:focus-within {
	border-color: var(--bh-accent);
	box-shadow: 0 0 0 2px var(--bh-accent);
}

.bh-pendler-form__field .material-symbols-outlined {
	color: var(--bh-primary-container);
	flex-shrink: 0;
}

.bh-pendler-form__input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	color: var(--bh-on-surface);
	min-width: 0;
}

.bh-pendler-form__input:focus {
	/* Kein eigener Outline auf dem randlosen Input – der sichtbare Fokus-Ring
	   sitzt auf .bh-pendler-form__field (s. :focus-within oben), sonst würde
	   der native Browser-Outline mitten im Pill-Container "schweben". */
	outline: none;
}

.bh-pendler-form__swap {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
	border: 3px solid var(--bh-surface-container-lowest);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: transform 0.15s ease;
}

/* UI-Cleanup 08.07.2026: 44x44px Touch-Target (war 40x40px) + Press-Feedback
   – die bestehende translateY(-50%) für die vertikale Zentrierung muss im
   :active-Transform erhalten bleiben, sonst springt der Button nach oben. */
.bh-pendler-form__swap:active {
	transform: translateY(-50%) scale(0.92);
}

.bh-pendler-privacy-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto 1rem;
	padding: 0;
	background: var(--bh-surface-container-high);
	border: none;
	border-radius: var(--bh-radius-full);
	cursor: pointer;
	transition: transform 0.15s ease;
}

/* UI-Cleanup 08.07.2026: 44x44px Mindest-Touch-Target (war 36x36px) +
   Press-Feedback analog .bh-btn:active. */
.bh-pendler-privacy-icon:active {
	transform: scale(0.92);
}

.bh-pendler-privacy-icon .material-symbols-outlined {
	font-size: 1.15rem;
	color: var(--bh-outline);
}

.bh-pendler-privacy-icon__tooltip {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%) translateY(0.25rem);
	width: max-content;
	max-width: 15rem;
	padding: 0.5rem 0.75rem;
	background: var(--bh-inverse-surface, #2d2b3a);
	color: var(--bh-inverse-on-surface, #fff);
	font-size: 0.75rem;
	line-height: 1.3;
	text-align: center;
	border-radius: 0.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s var(--bh-ease-out), transform 0.15s var(--bh-ease-out);
	z-index: 5;
}

.bh-pendler-privacy-icon[aria-expanded="true"] .bh-pendler-privacy-icon__tooltip {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.bh-pendler-card {
	background: var(--bh-surface-container-lowest);
	border-radius: var(--bh-radius-lg);
	overflow: hidden;
	box-shadow: 0 20px 40px -24px rgba(28, 27, 34, 0.4);
	margin-bottom: 1.25rem;
}

.bh-pendler-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: linear-gradient(to right, var(--bh-primary-container), var(--bh-primary));
	color: var(--bh-on-primary);
	padding: 1.1rem 1.25rem;
}

.bh-pendler-card__route-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--bh-radius-full);
	padding: 0.4rem 0.9rem;
	font-size: 0.8rem;
	font-weight: 600;
	min-width: 0;
}

.bh-pendler-card__route-pill span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bh-pendler-card__route-pill button {
	display: inline-flex;
	flex-shrink: 0;
	background: none;
	border: none;
	color: inherit;
	opacity: 0.75;
	cursor: pointer;
	/* UI-Cleanup 08.07.2026: Touch-Target vergrößert, ohne die Pill optisch
	   größer wirken zu lassen – Padding + negatives Margin heben sich in der
	   Pill-Breite auf, vergrößern aber die tatsächliche Tippfläche. Volle
	   44px sind in dieser kompakten Pill nicht machbar, ohne das Pill-Design
	   selbst zu verändern. */
	padding: 0.5rem;
	margin: -0.5rem;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.bh-pendler-card__route-pill button:active {
	transform: scale(0.9);
}

.bh-pendler-card__live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(255, 255, 255, 0.12);
	padding: 0.35rem 0.7rem;
	border-radius: var(--bh-radius-full);
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	flex-shrink: 0;
}

.bh-pendler-card__live-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--bh-accent);
	animation: bh-pulse-ring 2s infinite;
}

.bh-pendler-card__body {
	padding: 1.5rem;
}

.bh-pendler-stats-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.bh-pendler-card__zeit {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--bh-primary-container);
}

.bh-pendler-card__delta {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-top: 0.5rem;
	background: rgba(255, 107, 107, 0.15);
	color: var(--bh-secondary);
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: var(--bh-radius-full);
	width: fit-content;
}

.bh-pendler-card__delta .material-symbols-outlined {
	font-size: 1rem;
}

.bh-pendler-card__vergleich {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.78rem;
	color: var(--bh-on-surface-variant);
	text-align: right;
}

.bh-pendler-card__vergleich .material-symbols-outlined {
	font-size: 1rem;
}

.bh-pendler-card__frei {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.75rem 0 0;
	font-size: 0.78rem;
	color: var(--bh-on-surface-variant);
}

.bh-pendler-card__frei .material-symbols-outlined {
	font-size: 1.1rem;
	color: var(--bh-primary-container);
}

.bh-pendler-forecast {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	margin: 1.25rem 0;
	scrollbar-width: none;
}

.bh-pendler-forecast::-webkit-scrollbar {
	display: none;
}

.bh-pendler-forecast__chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--bh-surface-container-low);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	padding: 0.6rem 1rem;
}

.bh-pendler-forecast__chip .material-symbols-outlined {
	color: var(--bh-primary-container);
}

.bh-pendler-forecast__chip div {
	display: flex;
	flex-direction: column;
}

.bh-pendler-forecast__label {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bh-on-surface-variant);
}

.bh-pendler-forecast__value {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--bh-on-surface);
}

/* Herkunftshinweis unter den Prognose-Chips (10.08.2026, BH-128).
   Bewusst klein und zurueckgenommen: Er soll die Werte einordnen, nicht mit
   ihnen konkurrieren – aber sichtbar genug bleiben, dass ein Erfahrungswert
   nicht als Live-Prognose durchgeht. */
.bh-pendler-forecast__quelle {
	margin: 0.4rem 0 0;
	font-size: 0.7rem;
	line-height: 1.35;
	color: var(--bh-on-surface-variant);
}

.bh-pendler-empfehlung {
	display: flex;
	gap: 0.75rem;
	background: rgba(255, 107, 107, 0.08);
	border-left: 4px solid var(--bh-accent);
	border-radius: 0 var(--bh-radius-sm) var(--bh-radius-sm) 0;
	padding: 1rem 1.1rem;
	margin-bottom: 1.25rem;
}

.bh-pendler-empfehlung .material-symbols-outlined {
	color: var(--bh-secondary);
	flex-shrink: 0;
}

.bh-pendler-empfehlung p {
	margin: 0;
	font-size: 0.85rem;
	color: #6d0010;
	line-height: 1.5;
}

.bh-pendler-empfehlung strong:first-child {
	display: block;
	margin-bottom: 0.15rem;
}

.bh-pendler-alt-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--bh-surface-container-low);
	border-radius: var(--bh-radius-sm);
	margin-top: 0.6rem;
}

.bh-pendler-alt-row__left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--bh-on-surface);
}

.bh-pendler-alt-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(39, 25, 140, 0.1);
	color: var(--bh-primary-container);
	flex-shrink: 0;
}

.bh-pendler-alt-row__icon--oepnv {
	background: rgba(255, 107, 107, 0.15);
	color: var(--bh-secondary);
}

.bh-pendler-alt-row__icon--rad {
	background: rgba(122, 38, 0, 0.1);
	color: #7a2600;
}

.bh-pendler-alt-row__right {
	text-align: right;
	flex-shrink: 0;
}

.bh-pendler-alt-row__zeit {
	display: block;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--bh-on-surface);
}

.bh-pendler-alt-row__delta {
	font-size: 0.72rem;
	font-weight: 700;
}

.bh-pendler-alt-row__delta--besser {
	color: #2e7d32;
}

.bh-pendler-alt-row__delta--schlechter {
	color: var(--bh-secondary);
}

.bh-pendler-alt-row__hinweis {
	font-size: 0.65rem;
	color: var(--bh-on-surface-variant);
}

.bh-pendler__loeschen {
	display: block;
	width: 100%;
	background: none;
	border: none;
	color: var(--bh-on-surface-variant);
	font-size: 0.8rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.5rem;
}

.bh-pendler-status {
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
	text-align: center;
	padding: 1rem 0;
	margin: 0;
}

.bh-pendler-status--fehler {
	color: var(--bh-error);
}

/* ---------------------------------------------------------------------
 * Interaktive Spotlight-Tour (bh-tour.js, Entscheidung 08.07.2026)
 * ------------------------------------------------------------------- */

.bh-tour-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 27, 34, 0.55);
	z-index: var(--bh-z-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--bh-ease-out);
}

.bh-tour-overlay.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Spotlight-Ausschnitt: eine transparente Box mit riesigem box-shadow, der
   den Rest des Bildschirms abdunkelt – kein SVG-Masking-Markup nötig. */
.bh-tour-spotlight {
	position: fixed;
	border-radius: var(--bh-radius-sm);
	box-shadow: 0 0 0 9999px rgba(28, 27, 34, 0.55);
	z-index: var(--bh-z-overlay);
	opacity: 0;
	pointer-events: none;
	transition: top 0.3s var(--bh-ease-in-out), left 0.3s var(--bh-ease-in-out),
		width 0.3s var(--bh-ease-in-out), height 0.3s var(--bh-ease-in-out),
		opacity 0.2s var(--bh-ease-out);
}

.bh-tour-spotlight.is-active {
	opacity: 1;
}

.bh-tour-callout {
	position: fixed;
	max-width: 20rem;
	background: var(--bh-surface-container-lowest);
	border-radius: var(--bh-radius-sm);
	padding: 1.25rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	z-index: calc(var(--bh-z-overlay) + 1);
	opacity: 0;
	transform: scale(0.95);
	pointer-events: none;
	transition: opacity 0.2s var(--bh-ease-out), transform 0.2s var(--bh-ease-out),
		top 0.3s var(--bh-ease-in-out), left 0.3s var(--bh-ease-in-out);
}

.bh-tour-callout.is-active {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.bh-tour-callout__schritt {
	margin: 0 0 0.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bh-accent-ink);
}

.bh-tour-callout__titel {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	color: var(--bh-primary-container);
}

.bh-tour-callout__text {
	margin: 0 0 1.1rem;
	font-size: 0.9rem;
	color: var(--bh-on-surface-variant);
	line-height: 1.5;
}

.bh-tour-callout__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.bh-tour-callout__nav {
	display: flex;
	gap: 0.5rem;
}

.bh-tour-btn {
	font-family: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.55rem 1rem;
	border-radius: var(--bh-radius-full);
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.bh-tour-btn:active {
	transform: scale(0.95);
}

.bh-tour-btn--ghost {
	background: transparent;
	color: var(--bh-on-surface-variant);
}

.bh-tour-btn--accent {
	background: var(--bh-accent);
	color: var(--bh-on-accent);
}

@media (max-width: 480px) {
	.bh-tour-callout {
		max-width: calc(100vw - 2rem);
	}
}

/* ---------------------------------------------------------------------
 * Sichtbarer Seitentitel für Detailseiten (Redesign 09.07.2026):
 * /nordbruecke/ ist jetzt eigenständige Pillar-Page (nicht mehr die
 * Startseite) und trägt ihren H1 sichtbar statt sr-only.
 * ------------------------------------------------------------------- */

.bh-page-title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--bh-primary-container);
	margin: 0 0 1.25rem;
}

/* ---------------------------------------------------------------------
 * Dashboard-Grid (front-page.php, Redesign 09.07.2026): Mobil eine
 * Spalte (Quellreihenfolge = Priorität), ab 1064px zweispaltig – die
 * schmale 32rem-Mobilspalte verschenkte auf Desktop die gesamte Fläche.
 * Links die tagesaktuellen Module (Status, Reisezeiten, Pendler),
 * rechts Themen-Kacheln + Ticker.
 * ------------------------------------------------------------------- */

.bh-dashboard__haupt,
.bh-dashboard__neben {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.bh-dashboard {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 1064px) {
	/* Nur auf der Startseite (body.home trägt WordPress automatisch) den
	   Content-Canvas aufweiten – alle anderen Seiten behalten bewusst die
	   fokussierte schmale Spalte. */
	body.home .bh-app-main {
		max-width: 66rem;
	}

	body.home .bh-dashboard {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 2rem;
		align-items: start;
	}

	/* Ticker-Karten im rechten Rail untereinander statt als
	   Horizontal-Scroller (der ist ein Mobil-Pattern). */
	body.home .bh-dashboard__neben .bh-ticker-scroll {
		display: flex;
		flex-direction: column;
		overflow-x: visible;
		margin: 0;
		padding: 0;
	}

	body.home .bh-dashboard__neben .bh-ticker-card {
		min-width: 0;
		width: auto;
	}
}

/* ---------------------------------------------------------------------
 * Startseite V2 – gruppierter Aufgaben-Funnel (22.07.2026, Redesign).
 * Status + Kern (Routecheck) volle Breite, darunter das bestehende
 * .bh-dashboard-Grid. „Rund um deine Haltestelle" fasst Abfahrten +
 * Sharing als zwei Panels unter einer Gruppen-H2 zusammen.
 * ------------------------------------------------------------------- */

.bh-startseite {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bh-startseite__status {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Der Kern (Routecheck) sitzt als direktes Kind volle Breite über dem
   Grid – er ist damit nicht mehr in die 7er-Spalte eingeklemmt. */
.bh-startseite__kern {
	margin: 0;
}

/* Gruppe „Rund um deine Haltestelle" */
.bh-haltestelle-gruppe__intro {
	margin: -0.35rem 0 1.1rem;
	color: var(--bh-on-surface-variant);
	font-size: 0.95rem;
}

.bh-haltestelle-gruppe__panels {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.bh-haltestelle-gruppe__panel {
	background: #fff;
	border: 1px solid rgba(39, 25, 140, 0.12);
	border-radius: 16px;
	padding: 1.1rem 1.15rem;
	box-shadow: 0 1px 2px rgba(39, 25, 140, 0.05);
}

/* Einheitlicher Panel-Titel (H3) für Abfahrten + Sharing */
.bh-halt-suche__panel-titel,
.bh-sharing__panel-titel {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.85rem;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--bh-primary);
}

.bh-halt-suche__panel-titel .material-symbols-outlined {
	font-size: 22px;
}

.bh-sharing__panel-ico {
	display: inline-flex;
	color: var(--bh-primary);
}

.bh-sharing__panel-ico svg {
	width: 22px;
	height: 22px;
}

/* Sharing als Panel: kein eigener Außenabstand (sitzt im Panel-Container) */
.bh-sharing--panel {
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Mitfahrbörse-Landingpage (page-mitfahrboerse.php, Redesign 09.07.2026
 * nach Stitch-Mockup "Mitfahrbörse"): Einstiegs-Aktionen + Strecken-Chips.
 * Hero, Inserats-Karten (.bh-mitfahr-karte) und Leer-Zustand
 * (.bh-mitfahr-leer) kommen aus den bestehenden Suchseiten-Styles.
 * ------------------------------------------------------------------- */

.bh-mitfahr-aktionen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1.5rem;
}

@media (max-width: 480px) {
	.bh-mitfahr-aktionen {
		grid-template-columns: 1fr;
	}
}

/* Mit .bh-page-Prefix, weil die generische Regel `.bh-page a` sonst die
   Linkfarbe (Navy) erbt – auf der Navy-Karte wäre der Text unsichtbar. */
.bh-mitfahr-aktion,
.bh-page .bh-mitfahr-aktion {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem;
	border-radius: var(--bh-radius-sm);
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(39, 25, 140, 0.18);
	transition: transform 0.15s var(--bh-ease-out, ease-out);
}

.bh-mitfahr-aktion:active {
	transform: scale(0.97);
}

.bh-mitfahr-aktion--accent,
.bh-page .bh-mitfahr-aktion--accent {
	background: var(--bh-accent);
	color: var(--bh-on-accent);
	box-shadow: 0 4px 14px rgba(255, 107, 107, 0.3);
}

.bh-mitfahr-aktion__icon {
	font-size: 1.9rem;
	color: var(--bh-accent);
}

.bh-mitfahr-aktion--accent .bh-mitfahr-aktion__icon {
	color: var(--bh-on-accent);
}

.bh-mitfahr-aktion__label {
	font-weight: 800;
	font-size: 1rem;
}

.bh-mitfahr-aktion__desc {
	font-size: 0.78rem;
	opacity: 0.85;
}

.bh-strecken-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
}

.bh-strecken-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.9rem;
	border-radius: var(--bh-radius-full);
	background: var(--bh-surface-container);
	border: 1px solid var(--bh-outline-variant);
	color: var(--bh-primary-container);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.bh-strecken-chip:focus-visible {
	background: var(--bh-surface-container-high);
}

@media (hover: hover) {
	.bh-strecken-chip:hover {
		background: var(--bh-surface-container-high);
	}
}

.bh-strecken-chip .material-symbols-outlined {
	font-size: 1rem;
	color: var(--bh-outline);
}

.bh-mitfahr-leer__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--bh-surface-container-highest);
	color: var(--bh-outline);
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
}

/* Geteilte Inserats-Styles (Landingpage + Suchseite) – am 09.07.2026 aus
   dem Inline-<style>-Block von page-inserat-suchen.php hierher gezogen. */

.bh-mitfahr-leer {
	border: 2px dashed var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	padding: 2rem 1.5rem;
	text-align: center;
	background: var(--bh-surface-container-lowest);
}

.bh-mitfahr-leer__cta {
	font-weight: 700;
	color: var(--bh-primary-container);
}

.bh-mitfahr-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
}

.bh-mitfahr-karte {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	border-radius: var(--bh-radius-sm);
	padding: 1.25rem;
	box-shadow: 0 10px 25px -15px rgba(28, 27, 34, 0.3);
}

.bh-mitfahr-karte__kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

.bh-mitfahr-karte__plaetze {
	font-size: 0.8rem;
	color: var(--bh-on-surface-variant);
}

.bh-mitfahr-karte__route {
	margin: 0 0 0.5rem;
	color: var(--bh-primary-container);
	font-size: 1.05rem;
}

.bh-mitfahr-karte__zeiten {
	margin: 0 0 0.5rem;
	padding-left: 1.1rem;
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
}

.bh-mitfahr-karte__freitext {
	margin: 0 0 1rem;
	color: var(--bh-on-surface-variant);
	line-height: 1.5;
}

.bh-mitfahr-karte__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.bh-mitfahr-karte__kontakt-btn {
	flex: 1;
}

.bh-mitfahr-karte__melden-btn {
	padding: 0.6rem 1rem;
	font-weight: 600;
	cursor: pointer;
	background: none;
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-full);
	color: var(--bh-on-surface-variant);
	font-size: 0.78rem;
}

/* ---------------------------------------------------------------------
 * Barrierefreiheit (09.07.2026): Skip-Link, sichtbarer Tastatur-Fokus,
 * Bewegungsreduktion, Fokus-Ring für die unsichtbaren Radio-Inputs der
 * Melden-Kategorie-Kacheln.
 * ------------------------------------------------------------------- */

.bh-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
	font-weight: 700;
	border-radius: 0 0 var(--bh-radius-sm) 0;
	text-decoration: none;
}

.bh-skip-link:focus {
	left: 0;
}

/* Globaler Fokus-Indikator als Fallback für alle interaktiven Elemente,
   die keinen eigenen :focus-visible-Stil definieren (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: 2px;
}

/* Melden-Seite: Die Radio-Inputs in den Kategorie-Kacheln sind visuell
   versteckt (opacity:0) – der Fokus muss deshalb auf der umgebenden
   Kachel sichtbar werden. */
.bh-tile-grid label:focus-within {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: 2px;
}

/* Bewegungsreduktion (WCAG 2.3.3): Puls-Animationen und Transform-
   Übergänge abschalten, wenn das System reduzierte Bewegung wünscht.
   Die Tour respektiert prefers-reduced-motion bereits in JS. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
 * Consent-Banner für Google Analytics (inc/analytics.php, 09.07.2026):
 * schwebt über der Bottom-Nav, eine Ja/Nein-Frage, keine CMP.
 * ------------------------------------------------------------------- */

.bh-consent {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(var(--bh-bottomnav-height) + 1rem);
	z-index: var(--bh-z-overlay);
	width: min(calc(100vw - 2rem), 26rem);
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	box-shadow: 0 12px 40px rgba(28, 27, 34, 0.25);
	padding: 1.1rem 1.25rem;
}

.bh-consent__text {
	margin: 0 0 0.9rem;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--bh-on-surface);
}

.bh-consent__text a {
	color: var(--bh-primary-container);
}

.bh-consent__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

.bh-consent__btn {
	padding: 0.55rem 1.2rem;
	border-radius: var(--bh-radius-full);
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
	border: 1px solid transparent;
}

.bh-consent__btn--nein {
	background: transparent;
	border-color: var(--bh-outline-variant);
	color: var(--bh-on-surface-variant);
}

.bh-consent__btn--ja {
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
}

/* Der Burger-Button klappt nur die mobile Pill-Nav auf/zu (≤640px, s.
   .bh-app-pillnav-Grid-Trick oben). Auf Desktop ist die Nav immer sichtbar
   – dort war der Button funktionslos (Nutzerreport 09.07.2026), daher
   ausblenden. */
@media (min-width: 641px) {
	[data-bh-menu-toggle] {
		display: none;
	}
}

/* Info-Chips im Inserats-Karten-Kopf (09.07.2026, Stitch-Mockup
   "Mitfahrbörse"): Tage/Uhrzeit/Plätze auf einen Blick. */

.bh-mitfahr-karte__kopf {
	align-items: flex-start;
	gap: 0.5rem;
}

.bh-mitfahr-karte__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	justify-content: flex-end;
}

.bh-mitfahr-chip {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 0.4rem;
	background: var(--bh-surface-container);
	color: var(--bh-on-surface-variant);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Swipe-Onboarding (inc/onboarding.php + bh-onboarding.js, 09.07.2026):
 * Screenshot-Karten-Deck als Overlay, Swipen per CSS-Scroll-Snap.
 * Ersetzt die Spotlight-Tour.
 * ------------------------------------------------------------------- */

/* Wiederkehrer (html-Klasse aus dem Head-Script): Onboarding nie zeigen.
   hidden-Attribut übernimmt danach das JS bzw. der Schließen-Button. */
.bh-ob-gesehen .bh-onboarding {
	display: none;
}

.bh-onboarding {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.bh-onboarding__backdrop {
	position: absolute;
	inset: 0;
	/* Kein backdrop-filter mehr (PSI-Befund 10.07.2026): Vollbild-Blur
	   kostet ohne GPU (PSI-Headless, schwache Geräte) Sekunden Renderzeit
	   und war hinter dem dunklen Backdrop optisch kaum wahrnehmbar –
	   stattdessen etwas kräftigere Abdunklung. */
	background: rgba(28, 27, 34, 0.72);
}

.bh-onboarding__deck {
	position: relative;
	width: min(100%, 24rem);
	max-height: calc(100dvh - 2rem);
	display: flex;
	flex-direction: column;
	background: var(--bh-surface-container-lowest);
	border-radius: var(--bh-radius-sm);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
	padding: 1.25rem;
}

.bh-onboarding__close {
	position: absolute;
	top: 0.6rem;
	right: 0.9rem;
	z-index: 2;
	background: none;
	border: none;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--bh-on-surface-variant);
}

.bh-onboarding__slides {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	margin: 0 -1.25rem;
	padding: 0 1.25rem;
}

.bh-onboarding__slides::-webkit-scrollbar {
	display: none;
}

.bh-onboarding__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.5rem 0.25rem 0;
}

.bh-onboarding__bild-wrap {
	width: min(100%, 13rem);
	border-radius: 1.1rem;
	overflow: hidden;
	border: 4px solid var(--bh-surface-container-highest);
	box-shadow: 0 10px 30px rgba(28, 27, 34, 0.18);
	margin-bottom: 1rem;
}

.bh-onboarding__bild {
	display: block;
	width: 100%;
	height: auto;
}

.bh-onboarding__titel {
	margin: 0 0 0.4rem;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--bh-primary-container);
}

.bh-onboarding__text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--bh-on-surface-variant);
}

.bh-onboarding__dots {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 1rem 0;
}

/* Trefferfläche 24x24px (WCAG 2.5.8, Lighthouse-Befund 10.07.2026):
   der Button ist unsichtbar groß, der sichtbare Punkt lebt im ::before. */
.bh-onboarding__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

@media (hover: hover) {
	.bh-onboarding__dot:hover {
		background: transparent;
	}
}

.bh-onboarding__dot::before {
	content: '';
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--bh-outline-variant);
	transition: transform 0.2s var(--bh-ease-out, ease-out), background-color 0.2s ease;
}

.bh-onboarding__dot[aria-current='step']::before {
	background: var(--bh-primary-container);
	transform: scale(1.25);
}

/* Fallback für die alte JS-Klasse (bis Cache-Ablauf) */
.bh-onboarding__dot.is-aktiv::before {
	background: var(--bh-primary-container);
	transform: scale(1.25);
}

.bh-onboarding__aktionen {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	align-items: center;
}

.bh-onboarding__btn {
	padding: 0.65rem 1.4rem;
	border-radius: var(--bh-radius-full);
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	border: none;
}

.bh-onboarding__btn--ghost {
	background: transparent;
	color: var(--bh-on-surface-variant);
}

.bh-onboarding__btn--weiter {
	/* Koralle statt Navy (09.07.2026, Nutzerfeedback) – CTA-Farbe der Seite. */
	background: var(--bh-accent);
	color: var(--bh-on-accent);
	box-shadow: 0 6px 18px rgba(255, 107, 107, 0.35);
	min-width: 7.5rem;
}

/* Kleine Höhen (Landscape-Phones): Screenshot skaliert mit. */
@media (max-height: 640px) {
	.bh-onboarding__bild-wrap {
		width: min(100%, 9rem);
	}
}

/* ---------------------------------------------------------------------
 * Einheitliche Button-Hover (09.07.2026, Nutzerfeedback "hover ist noch
 * inkonsistent"): EIN System für alle Buttons statt verstreuter
 * Einzelwerte. Regeln:
 *   - Gefüllte Buttons (Navy/Koralle): brightness(1.08)
 *   - Ghost-/Outline-Buttons: Flächenwechsel auf surface-container-high
 *   - Karten-Aktionen (Mitfahr-Kacheln): leichtes Anheben + Schatten
 * Alles in @media (hover: hover), damit Touch-Geräte keine klebenden
 * Hover-Zustände bekommen (gleiche Begründung wie bei .bh-tile:hover).
 * ------------------------------------------------------------------- */

.bh-btn,
.bh-consent__btn,
.bh-onboarding__btn,
.bh-mitfahr-karte__melden-btn,
.bh-mitfahr-aktion {
	transition: filter 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s var(--bh-ease-out, ease-out);
}

@media (hover: hover) {
	/* Gefüllte Buttons – background jeweils re-deklariert, sonst greift
	   Kadences globales button:hover-Blau (s. Kommentar bei .bh-btn--accent) */
	.bh-consent__btn--ja:hover {
		background: var(--bh-primary-container);
		filter: brightness(1.08);
	}

	.bh-onboarding__btn--weiter:hover {
		background: var(--bh-accent);
		filter: brightness(1.08);
	}

	/* Ghost-/Outline-Buttons */
	.bh-btn--ghost:hover,
	.bh-consent__btn--nein:hover,
	.bh-onboarding__btn--ghost:hover,
	.bh-mitfahr-karte__melden-btn:hover {
		background: var(--bh-surface-container-high);
	}

	/* Link-artige Text-Buttons: Farbwechsel statt Fläche */
	.bh-pendler__loeschen:hover {
		color: var(--bh-on-surface);
	}

	/* Karten-Aktionen (Mitfahrbörse-Landing) – gleiche Sprache wie
	   .bh-links__karte: Elevation statt Aufhellen (brightness auf der
	   Navy-Karte machte den Zustand unruhig, A11y-/Design-Pass 10.07.2026) */
	.bh-mitfahr-aktion:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(39, 25, 140, 0.28);
	}

	.bh-mitfahr-aktion--accent:hover {
		box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
	}
}

/* Tastatur-Parität (A11y-Audit 10.07.2026): jedes Hover-Feedback hat ein
   :focus-visible-Pendant, damit Tastaturnutzer denselben Zustandswechsel
   sehen – zusätzlich zum globalen Fokus-Ring (WCAG 2.4.7). Bewusst OHNE
   transform: der Fokus-Ring markiert die Position, Bewegung wäre dort
   nur Unruhe. */
.bh-consent__btn--ja:focus-visible {
	background: var(--bh-primary-container);
	filter: brightness(1.08);
}

.bh-onboarding__btn--weiter:focus-visible {
	background: var(--bh-accent);
	filter: brightness(1.08);
}

.bh-btn--ghost:focus-visible,
.bh-consent__btn--nein:focus-visible,
.bh-onboarding__btn--ghost:focus-visible,
.bh-mitfahr-karte__melden-btn:focus-visible {
	background: var(--bh-surface-container-high);
}

.bh-pendler__loeschen:focus-visible {
	color: var(--bh-on-surface);
}

.bh-mitfahr-aktion:focus-visible {
	box-shadow: 0 8px 20px rgba(39, 25, 140, 0.28);
}

.bh-mitfahr-aktion--accent:focus-visible {
	box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
}

/* Logo-Icon in der Topbar (09.07.2026, s. assets/img/bh-logo-icon.svg). */

.bh-app-topbar__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Header-Wortmarke (09.07.2026): komplettes Logo als Bild (Weiß/Koralle,
   für den Navy-Header gestaltet) – ersetzt den früheren Text-Schriftzug
   samt weißem Icon-Chip. */
.bh-app-topbar__brand-logo {
	display: block;
	height: 2.1rem;
	width: auto;
}

@media (max-width: 380px) {
	.bh-app-topbar__brand-logo {
		height: 1.8rem;
	}
}

/* ---------------------------------------------------------------------
 * Link-in-Bio-Seite /links/ (page-links.php, 09.07.2026): selbst
 * gehosteter "Linktree" für Instagram – Logo-Kopf + Link-Deck.
 * ------------------------------------------------------------------- */

.bh-links {
	margin: 0.5rem 0 2rem;
}

.bh-links__kopf {
	text-align: center;
	margin-bottom: 1.75rem;
}

.bh-links__logo {
	/* Neues Logo 09.07.2026: freistehende Marke, kein Kachel-Rahmen mehr.
	   margin auto, weil ein globales img-Reset display:block setzt und
	   text-align:center dann nicht mehr greift. */
	display: block;
	width: 6rem;
	height: auto;
	margin: 0 auto 0.75rem;
}

.bh-links__titel {
	margin: 0 0 0.4rem;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--bh-primary-container);
}

.bh-links__titel-accent {
	color: var(--bh-accent-ink);
}

.bh-links__claim {
	margin: 0 auto;
	max-width: 22rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--bh-on-surface-variant);
}

.bh-links__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.bh-links__karte {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--bh-radius-sm);
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-surface-container-high);
	box-shadow: 0 6px 16px rgba(28, 27, 34, 0.06);
	text-decoration: none;
	transition: transform 0.15s var(--bh-ease-out, ease-out), box-shadow 0.15s ease;
}

@media (hover: hover) {
	.bh-links__karte:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 24px rgba(28, 27, 34, 0.12);
	}
}

.bh-links__karte--kanal { border: 2px solid var(--bh-primary-container); }
.bh-links__karte-icon--svg { display: inline-flex; align-items: center; justify-content: center; }
.bh-links__karte-icon--svg svg { width: 1.5rem; height: 1.5rem; }

.bh-links__karte:focus-visible {
	box-shadow: 0 10px 24px rgba(28, 27, 34, 0.12);
}

.bh-links__karte:active {
	transform: scale(0.98);
}

.bh-links__karte-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 0.8rem;
	background: var(--bh-primary-container);
	color: var(--bh-accent);
	font-size: 1.4rem;
	flex-shrink: 0;
}

.bh-links__karte-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.bh-links__karte-text strong {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--bh-on-surface);
}

.bh-links__karte-text span {
	font-size: 0.78rem;
	color: var(--bh-on-surface-variant);
}

.bh-links__karte-pfeil {
	margin-left: auto;
	color: var(--bh-outline);
	flex-shrink: 0;
}

.bh-links__fuss {
	margin-top: 1.75rem;
	text-align: center;
	font-size: 0.78rem;
	color: var(--bh-on-surface-variant);
}

/* ---------------------------------------------------------------------
 * Stau-Heatmap /beste-zeit/ (10.07.2026, Mehrwert-Paket): reine
 * CSS-Tabellen-Heatmap, Farbskala an die Ampel-Töne angelehnt.
 * ------------------------------------------------------------------- */

.bh-page-intro {
	color: var(--bh-on-surface-variant);
	line-height: 1.6;
	margin: 0 0 1.5rem;
}

.bh-heatmap-basis {
	font-size: 0.8rem;
	color: var(--bh-on-surface-variant);
	background: var(--bh-surface-container);
	border-radius: var(--bh-radius-sm);
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem;
}

.bh-heatmap {
	margin-bottom: 2rem;
}

.bh-heatmap__titel {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--bh-primary-container);
	margin: 0 0 0.6rem;
}

.bh-heatmap__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bh-heatmap__tabelle {
	border-collapse: separate;
	border-spacing: 2px;
	width: 100%;
	min-width: 26rem;
}

.bh-heatmap__tabelle th {
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--bh-on-surface-variant);
	padding: 0.1rem 0.15rem;
	text-align: center;
}

.bh-heatmap__tabelle tbody th {
	text-align: right;
	padding-right: 0.4rem;
}

.bh-heatmap__zelle {
	width: 1.15rem;
	height: 1.05rem;
	border-radius: 0.25rem;
	padding: 0;
}

.bh-heatmap__zelle--leer { background: var(--bh-surface-container); }
.bh-heatmap__zelle--s0 { background: #a5d6a7; }
.bh-heatmap__zelle--s1 { background: #dce775; }
.bh-heatmap__zelle--s2 { background: #ffd54f; }
.bh-heatmap__zelle--s3 { background: #ff8a65; }
.bh-heatmap__zelle--s4 { background: #c62828; }

.bh-heatmap-legende {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.72rem;
	color: var(--bh-on-surface-variant);
}

.bh-heatmap-legende .bh-heatmap__zelle {
	display: inline-block;
}

/* Teaser-Link im Routecheck zur Heatmap. */

.bh-routecheck__heatmap-link {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 1.5rem 1.25rem;
	padding: 0.65rem 0.9rem;
	border-radius: var(--bh-radius-sm);
	background: var(--bh-surface-container);
	color: var(--bh-primary-container);
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bh-routecheck__heatmap-link:focus-visible {
	background: var(--bh-surface-container-high);
}

@media (hover: hover) {
	.bh-routecheck__heatmap-link:hover {
		background: var(--bh-surface-container-high);
	}
}

.bh-routecheck__heatmap-link .material-symbols-outlined {
	font-size: 1.1rem;
}

.bh-routecheck__heatmap-link .material-symbols-outlined:last-child {
	margin-left: auto;
	color: var(--bh-outline);
}

/* ---------------------------------------------------------------------
 * Teilen-Buttons (10.07.2026): rundes Icon im Routecheck-Kopf und am
 * Pendler-Widget, Zustands-Feedback nach Zwischenablage-Fallback.
 * ------------------------------------------------------------------- */

.bh-routecheck__header-aktionen {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.bh-teilen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: var(--bh-radius-full);
	border: 1px solid var(--bh-outline-variant);
	background: var(--bh-surface-container-lowest);
	color: var(--bh-primary-container);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bh-teilen-btn:focus-visible {
	background: var(--bh-surface-container-high);
}

@media (hover: hover) {
	.bh-teilen-btn:hover {
		background: var(--bh-surface-container-high);
	}
}

.bh-teilen-btn .material-symbols-outlined { font-size: 1.05rem; }

.bh-teilen-btn.is-kopiert {
	background: #a5d6a7;
	border-color: #2e7d32;
}

.bh-teilen-btn--pendler {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.12);
	color: var(--bh-on-primary);
}

/* ---------------------------------------------------------------------
 * PWA-Install-Hinweis (10.07.2026): schwebt über der Bottom-Nav, einmal
 * wegklickbar (localStorage, s. bh-pwa.js).
 * ------------------------------------------------------------------- */

.bh-pwa-hinweis {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(var(--bh-bottomnav-height) + 1rem);
	z-index: var(--bh-z-sticky-cta);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: min(calc(100vw - 2rem), 24rem);
	padding: 0.7rem 0.9rem;
	border-radius: var(--bh-radius-sm);
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	box-shadow: 0 10px 30px rgba(28, 27, 34, 0.2);
	font-size: 0.8rem;
	color: var(--bh-on-surface);
}

.bh-pwa-hinweis .material-symbols-outlined {
	color: var(--bh-primary-container);
	flex-shrink: 0;
}

.bh-pwa-hinweis__text { min-width: 0; }

.bh-pwa-hinweis__install {
	margin-left: auto;
	padding: 0.4rem 0.9rem;
	border: none;
	border-radius: var(--bh-radius-full);
	background: var(--bh-accent);
	color: var(--bh-on-accent);
	font-weight: 700;
	font-size: 0.78rem;
	cursor: pointer;
	white-space: nowrap;
}

.bh-pwa-hinweis__zu {
	border: none;
	background: none;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--bh-on-surface-variant);
	cursor: pointer;
	flex-shrink: 0;
}


/* Bewegungsreduktion, Teil 2 (A11y-Audit 10.07.2026): der globale
   transition-duration-Reset oben macht Hover-/Active-Transforms nur
   schneller, nicht weg – hier werden alle Lift-/Scale-Effekte bei
   prefers-reduced-motion vollständig deaktiviert. Farb-/Schatten-
   Feedback bleibt erhalten. */
@media (prefers-reduced-motion: reduce) {
	.bh-app-fab-melden:hover,
	.bh-app-fab-melden:focus-visible,
	.bh-app-fab-melden:active,
	.bh-mitfahr-aktion:hover,
	.bh-links__karte:hover,
	.bh-links__karte:active,
	.bh-tile:active,
	.bh-app-bottomnav__item:active {
		transform: none;
	}
}


/* Seitentitel für Templates ohne eigenen Hero (A11y-Audit 10.07.2026,
   s. inc/seiten-titel.php) – gleiche Typo-Sprache wie .bh-section__title. */
.bh-page__kopf {
	margin: 0 0 1.25rem;
}

.bh-page__titel {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--bh-primary-container);
}

.bh-heatmap__fazit {
	margin: 0.2rem 0 0.6rem;
	font-size: 0.82rem;
	color: var(--bh-on-surface-variant);
}

/* Titellinks in den Hub-Listen (Fähren, Park+Ride) waren nur 21px hoch –
   Trefferfläche auf >= 24px (WCAG 2.5.8), optisch unverändert. */
.bh-parkride-liste h2 a {
	display: inline-block;
	padding: 0.2rem 0;
	margin: -0.2rem 0;
}


/* ---------------------------------------------------------------------
 * „Neues im Portal"-Banner (11.07.2026): neuester portal_news-Eintrag
 * zwischen Statuszeile und Routecheck. Kontrast-/Hover-Regeln nach dem
 * Audit vom 10.07.: Koralle nur als Fläche (Badge, dunkle Schrift drauf),
 * Hover hinter (hover:hover), Fokus-Parität, Schließen-Ziel >= 24px.
 * ------------------------------------------------------------------- */

.bh-portal-news {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding: 0.9rem 1rem;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
}

.bh-portal-news__badge {
	flex-shrink: 0;
	background: var(--bh-accent);
	color: var(--bh-on-accent);
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.55rem;
	border-radius: var(--bh-radius-full);
	margin-top: 0.1rem;
}

.bh-portal-news__inhalt {
	min-width: 0;
}

.bh-portal-news__titel {
	margin: 0 0 0.2rem;
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--bh-primary-container);
}

.bh-portal-news__text {
	margin: 0 0 0.35rem;
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
}

.bh-portal-news__links {
	margin: 0;
	font-size: 0.8rem;
	color: var(--bh-outline);
	display: flex;
	gap: 0.45rem;
	flex-wrap: wrap;
}

.bh-portal-news__link {
	font-weight: 700;
	color: var(--bh-primary-container);
	text-decoration: none;
	/* Klickziel >= 24px ohne Layout-Shift */
	padding: 0.3rem 0;
	margin: -0.3rem 0;
}

.bh-portal-news__link:focus-visible {
	text-decoration: underline;
}

@media (hover: hover) {
	.bh-portal-news__link:hover {
		text-decoration: underline;
	}
}

.bh-portal-news__schliessen {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--bh-on-surface-variant);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.bh-portal-news__schliessen:focus-visible {
	background: var(--bh-surface-container-high);
}

@media (hover: hover) {
	.bh-portal-news__schliessen:hover {
		background: var(--bh-surface-container-high);
	}
}

/* Übersichtsseite /neu-im-portal/ */

/* .bh-page ul (Spezifität 0,1,1) würde der Liste sonst 1.25rem
   Einzugs-Padding aufzwingen – die Karten liefen schmaler als der
   Fließtext darüber (Nutzerreport 11.07.2026). */
.bh-portalnews-liste,
.bh-page .bh-portalnews-liste {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.bh-portalnews-liste__eintrag {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	padding: 1.1rem 1.25rem;
}

.bh-portalnews-liste__datum {
	margin: 0 0 0.2rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bh-outline);
}

.bh-portalnews-liste__titel {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--bh-primary-container);
}

.bh-portalnews-liste__text {
	margin: 0 0 0.4rem;
	font-size: 0.9rem;
	color: var(--bh-on-surface-variant);
}

.bh-portalnews-liste__link {
	margin: 0;
	font-size: 0.85rem;
}

.bh-portalnews-liste__link a {
	font-weight: 700;
	color: var(--bh-primary-container);
}

/* Rhein-Pegel-Box auf /faehren/ (PEGELONLINE, 11.07.2026) */

.bh-pegel {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 1rem 0 0;
	padding: 0.9rem 1rem;
	/* Leichter Lila-Ton (Primary-Tint, 11.07.2026 Nutzerwunsch): hebt die
	   Pegel-Box von den weißen Fähren-Karten ab. Kontrast geprüft:
	   on-surface-variant auf diesem Tint bleibt deutlich über AA. */
	background: rgba(63, 54, 163, 0.08);
	border: 1px solid rgba(63, 54, 163, 0.22);
	border-radius: var(--bh-radius-sm);
	font-size: 0.9rem;
	color: var(--bh-on-surface-variant);
}

.bh-pegel__icon {
	color: var(--bh-primary-container);
	font-size: 1.3rem;
	flex-shrink: 0;
}

.bh-pegel strong {
	color: var(--bh-primary-container);
}

.bh-pegel__meta {
	color: var(--bh-outline);
	font-size: 0.8rem;
}

.bh-pegel__meta a {
	color: inherit;
}


/* ---------------------------------------------------------------------
 * „Deine Ideen" – Vorschläge + Voting (12.07.2026, page-vorschlaege.php).
 * A11y: Vote-Button >= 24px, :focus-visible-Parität, Hover gegatet,
 * Koralle nur als Fläche mit --bh-on-accent.
 * ------------------------------------------------------------------- */

.bh-vorschlag-liste,
.bh-page .bh-vorschlag-liste {
	list-style: none;
	margin: 1.25rem 0 2rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.bh-vorschlag {
	display: flex;
	gap: 1rem;
	align-items: stretch;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	padding: 1.1rem 1.25rem;
}

.bh-vorschlag__inhalt {
	min-width: 0;
	flex: 1;
}

.bh-vorschlag__meta {
	margin: 0 0 0.35rem;
}

.bh-vorschlag__titel {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--bh-primary-container);
}

.bh-vorschlag__text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--bh-on-surface-variant);
}

.bh-vorschlag__voting {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

.bh-vorschlag__stimme-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: none;
	border-radius: var(--bh-radius-full);
	background: var(--bh-accent);
	color: var(--bh-on-accent);
	font-weight: 800;
	font-size: 0.8rem;
	padding: 0.55rem 0.9rem;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease;
}

.bh-vorschlag__stimme-btn .material-symbols-outlined {
	font-size: 1.05rem;
}

.bh-vorschlag__stimme-btn:focus-visible {
	background: var(--bh-accent);
	filter: brightness(1.08);
}

@media (hover: hover) {
	.bh-vorschlag__stimme-btn:hover {
		background: var(--bh-accent); /* gegen Kadences button:hover-Blau */
		filter: brightness(1.08);
	}
}

.bh-vorschlag__stimme-btn.is-gevotet,
.bh-vorschlag__stimme-btn:disabled {
	background: var(--bh-surface-container-high);
	color: var(--bh-on-surface-variant);
	cursor: default;
	filter: none;
}

.bh-vorschlag__stand {
	margin: 0;
	font-size: 0.8rem;
	color: var(--bh-on-surface-variant);
}

.bh-vorschlag__stand strong {
	font-size: 1.05rem;
	color: var(--bh-primary-container);
}

.bh-vorschlag-hinweis {
	min-height: 1.2em;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bh-primary-container);
}

.bh-vorschlag-formular {
	margin-top: 2rem;
	padding: 1.25rem;
	background: rgba(63, 54, 163, 0.08); /* Lila-Tint wie .bh-pegel */
	border: 1px solid rgba(63, 54, 163, 0.22);
	border-radius: var(--bh-radius-sm);
}

.bh-vorschlag-formular h2 {
	margin-top: 0;
}

/* Honeypot: visuell raus, für Bots im DOM */
.bh-hp-wrap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 560px) {
	.bh-vorschlag {
		flex-direction: column;
	}

	.bh-vorschlag__voting {
		flex-direction: row;
		justify-content: flex-start;
	}
}


/* Teilen pro Vorschlag (12.07.2026) */

.bh-vorschlag__teilen {
	position: relative;
}

.bh-vorschlag__teilen-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-full);
	background: var(--bh-surface-container-lowest);
	color: var(--bh-primary-container);
	font-weight: 700;
	font-size: 0.75rem;
	padding: 0.4rem 0.7rem;
	cursor: pointer;
}

.bh-vorschlag__teilen-btn .material-symbols-outlined {
	font-size: 0.95rem;
}

.bh-vorschlag__teilen-btn:focus-visible {
	background: var(--bh-surface-container-high);
}

@media (hover: hover) {
	.bh-vorschlag__teilen-btn:hover {
		background: var(--bh-surface-container-high);
	}
}

.bh-vorschlag__teilen-menue {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	min-width: 10rem;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	box-shadow: 0 10px 24px rgba(28, 27, 34, 0.14);
	overflow: hidden;
}

.bh-vorschlag__teilen-menue a,
.bh-vorschlag__teilen-menue button {
	display: block;
	padding: 0.55rem 0.9rem;
	font-size: 0.82rem;
	font-weight: 600;
	text-align: left;
	color: var(--bh-primary-container);
	background: transparent;
	border: none;
	text-decoration: none;
	cursor: pointer;
}

.bh-vorschlag__teilen-menue a:focus-visible,
.bh-vorschlag__teilen-menue button:focus-visible {
	background: var(--bh-surface-container-high);
}

@media (hover: hover) {
	.bh-vorschlag__teilen-menue a:hover,
	.bh-vorschlag__teilen-menue button:hover {
		background: var(--bh-surface-container-high);
	}
}


/* Sprach-Umschalter in der Pill-Nav (13.07.2026, /en/) */

.bh-app-pillnav__link--sprache {
	opacity: 0.75;
	letter-spacing: 0.08em;
}

/* /en/-Seite: Kompakt-Abstände für Crossing-Liste außerhalb des
   Routecheck-Karten-Kontexts */
.bh-en .bh-crossing-list {
	margin: 1rem 0 1.5rem;
}

.bh-en__intro {
	font-size: 1.02rem;
}

.bh-en__stand {
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
}

.bh-en__hinweis {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bh-outline-variant);
	font-size: 0.9rem;
	color: var(--bh-on-surface-variant);
}


/* Inserats-Selbstverwaltung (13.07.2026, page-inserat-loeschen.php) */

.bh-verwalten-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.25rem 0;
}

.bh-verwalten-titel {
	font-size: 1.05rem;
	margin-bottom: 0.25rem;
}

.bh-verwalten-meldung {
	min-height: 1.4em;
	font-weight: 600;
	color: var(--bh-primary-container);
}


/* Icon-Font-Guard (13.07.2026, Nutzerreport: Icon-NAMEN als Klartext auf
   langsamen Verbindungen): das Head-Script setzt sofort .bh-icons-laden
   (Icons unsichtbar statt Namens-Fallback nach der 3s-block-Periode) und
   entfernt sie, sobald die Font wirklich gerendert werden kann. Kommt die
   Font nie an (Timeout/Fehler), bleiben Icons dauerhaft weg – alle
   funktionalen Icons haben Textlabels bzw. aria-labels daneben. */
.bh-icons-laden .material-symbols-outlined {
	opacity: 0;
}

.bh-icons-fallback .material-symbols-outlined {
	display: none;
}


/* Verkehrslage-Legende + Attributionszeile (13.07.2026, Open Data Bonn) */

.bh-karte-legende-bar__linie {
	display: inline-block;
	width: 1.4rem;
	height: 0.28rem;
	border-radius: 2px;
	vertical-align: middle;
}

.bh-karte-stand {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	color: var(--bh-outline);
}

.bh-karte-legende-bar__gruppe {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bh-on-surface-variant);
	margin-right: 0.2rem;
}

/* ═══ Live-Abfahrten & Haltestellen-Suche (17.07.2026, MOBIDROM/MOTIS) ═══
   Verspätungs-Pills nutzen die Status-Farbsemantik (rot = Verspätung,
   grün = pünktlich) – zulässig, weil echte Status-Anzeige, nie dekorativ.
   Kontraste: #b3261e/#fdecea 5,6:1 · #1e6b24/#e7f2e8 6,1:1 (AA). */

.bh-oepnv-abfahrten__liste li {
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(39, 25, 140, 0.08);
}

.bh-oepnv-abfahrten__liste li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bh-oepnv-abfahrten__zeit {
	font-variant-numeric: tabular-nums;
}

.bh-abfahrt-linie {
	flex: 0 0 auto;
	min-width: 2.4em;
	text-align: center;
	font-weight: 800;
	font-size: 0.78rem;
	color: var(--bh-primary);
	background: rgba(39, 25, 140, 0.08);
	border-radius: 7px;
	padding: 0.15rem 0.4rem;
}

.bh-abfahrt-rt {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
}

.bh-abfahrt-rt--spaet { color: #b3261e; background: #fdecea; }

.bh-abfahrt-rt--puenktlich { color: #1e6b24; background: #e7f2e8; }

.bh-abfahrt-rt--soll { color: var(--bh-on-surface-variant); background: rgba(39, 25, 140, 0.06); font-weight: 600; }

/* Pulsierender Live-Punkt in Stand-/Hinweiszeilen. */
.bh-live-punkt {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #2e7d32;
	margin-right: 0.15rem;
	vertical-align: baseline;
	animation: bh-live-puls 2s ease-in-out infinite;
}

@keyframes bh-live-puls {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.bh-live-punkt { animation: none; }
}

/* ── Haltestellen-Suche ── */

.bh-halt-suche {
	margin: 0 0 1.25rem;
}

.bh-halt-suche__label {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
}

.bh-halt-suche__feld {
	position: relative;
	max-width: 30rem;
}

.bh-halt-suche__lupe {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--bh-on-surface-variant);
	pointer-events: none;
}

.bh-halt-suche__feld .bh-halt-suche__input {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 1rem 0.6rem 2.7rem;
	font: inherit;
	font-size: 0.95rem;
	border: 1.5px solid rgba(39, 25, 140, 0.25);
	border-radius: 999px;
	background: var(--bh-surface, #fff);
	color: inherit;
	box-shadow: 0 1px 4px rgba(39, 25, 140, 0.06);
}

.bh-halt-suche__feld .bh-halt-suche__input::placeholder {
	color: var(--bh-on-surface-variant);
	opacity: 0.75;
}

.bh-halt-suche__feld .bh-halt-suche__input:focus-visible {
	outline: 3px solid var(--bh-primary);
	outline-offset: 1px;
	border-color: var(--bh-primary);
}

.bh-halt-suche__status {
	margin: 0.5rem 0 0 0.4rem;
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
}

.bh-halt-suche__status:empty { margin: 0; }

.bh-halt-suche__ergebnisse {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bh-halt-suche__treffer {
	min-height: 40px;
	padding: 0.45rem 1rem;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--bh-primary);
	background: var(--bh-surface, #fff);
	border: 1.5px solid rgba(39, 25, 140, 0.3);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
	.bh-halt-suche__treffer:hover {
		background: var(--bh-primary);
		border-color: var(--bh-primary);
		color: var(--bh-on-primary, #fff);
	}
}

.bh-halt-suche__treffer:focus-visible {
	outline: 3px solid var(--bh-primary);
	outline-offset: 2px;
	background: var(--bh-primary);
	border-color: var(--bh-primary);
	color: var(--bh-on-primary, #fff);
}

.bh-halt-suche__abfahrten { margin-top: 0.9rem; }

.bh-halt-suche__abfahrten:empty { margin: 0; }

.bh-halt-suche__karte-inner {
	background: var(--bh-surface, #fff);
	border: 1px solid rgba(39, 25, 140, 0.1);
	border-radius: 16px;
	padding: 1.1rem 1.3rem;
	box-shadow: 0 2px 10px rgba(39, 25, 140, 0.05);
}

.bh-halt-suche__karte-inner .bh-oepnv-abfahrten__halt-name {
	margin: 0 0 0.5rem;
}

.bh-halt-suche__stand {
	margin: 0.7rem 0 0;
	font-size: 0.78rem;
	color: var(--bh-on-surface-variant);
}

/* ── Startseiten-Variante: eigenständige Dashboard-Karte ── */

.bh-halt-suche--karte {
	background: #fff;
	border: 1px solid rgba(39, 25, 140, 0.12);
	border-radius: var(--bh-radius, 20px);
	padding: 1.4rem 1.5rem;
	box-shadow: 0 1px 2px rgba(39, 25, 140, 0.05);
	margin: 0;
}

.bh-halt-suche__kopf {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-bottom: 1rem;
}

.bh-halt-suche__kopf > .material-symbols-outlined {
	flex: 0 0 auto;
	font-size: 26px;
	color: var(--bh-primary);
	background: rgba(39, 25, 140, 0.08);
	border-radius: 12px;
	padding: 0.5rem;
}

.bh-halt-suche__titel {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.25;
}

.bh-halt-suche__untertitel {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	color: var(--bh-on-surface-variant);
}

.bh-halt-suche--karte .bh-halt-suche__karte-inner {
	border: none;
	box-shadow: none;
	background: var(--bh-surface-container);
	padding: 1rem 1.2rem;
}

.bh-halt-suche__fuss {
	margin: 0.9rem 0 0;
	font-size: 0.75rem;
	color: var(--bh-on-surface-variant);
}

.bh-halt-suche__fuss a {
	color: var(--bh-primary);
	font-weight: 600;
}


/* Pendler-Modus: ÖPNV-Vergleich (17.07.2026, MOBIDROM/MOTIS). */
.bh-pendler-alt-row__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bh-pendler-alt-row__detail {
	font-size: 0.75rem;
	color: var(--bh-on-surface-variant);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bh-pendler-oepnv-fazit {
	margin: 0.35rem 0 0;
	padding: 0.6rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
	background: rgba(39, 25, 140, 0.06);
	border-radius: 10px;
}


/* Haltestellen-Suche: Vergessen-Button in der Stand-Zeile (17.07.2026). */
.bh-halt-suche__vergessen {
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--bh-primary);
	background: none;
	border: none;
	padding: 0.2rem 0.3rem;
	min-height: 24px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bh-halt-suche__vergessen:focus-visible {
	outline: 3px solid var(--bh-primary);
	outline-offset: 1px;
	border-radius: 4px;
}


/* ÖPNV-Ampel im Routecheck: Verspätungslage der Linien 16/63/66
   (17.07.2026, MOBIDROM/MOTIS). */
.bh-linien-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 1.1rem 1rem 0;
	padding: 0.85rem 1rem;
	background: var(--bh-surface-container);
	border-radius: var(--bh-radius-sm);
	font-size: 0.85rem;
}

.bh-linien-status__label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
}

.bh-linien-status__label .material-symbols-outlined { font-size: 20px; }

.bh-linien-status__pills {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bh-linien-status__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.bh-linien-status__pill .bh-abfahrt-rt { margin-left: 0; }

/* ---------------------------------------------------------------------
 * „Verbindung finden" – multimodale Auskunft A→B (/verbindung/, 24.07.2026)
 * ------------------------------------------------------------------- */
.bh-verbindung { margin: 0; }
.bh-verbindung__kopf { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.6rem; }
.bh-verbindung__kopf-ico { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--bh-primary); background: rgba(39, 25, 140, 0.08); border-radius: 12px; }
.bh-verbindung__kopf-ico svg { width: 24px; height: 24px; }
.bh-verbindung__titel { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--bh-primary); margin: 0; }
.bh-verbindung__intro { margin: 0; color: var(--bh-on-surface-variant); }

.bh-verbindung__form { margin-top: 1.1rem; }
.bh-verbindung__felder { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bh-verbindung__feld { position: relative; flex: 1 1 12rem; min-width: 0; }
.bh-verbindung__feld-dot { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 999px; }
.bh-verbindung__feld-dot--start { background: #4527a0; }
.bh-verbindung__feld-dot--ziel { background: #FE605D; }
.bh-verbindung .bh-verbindung__input { width: 100%; min-height: 50px; padding: 0.6rem 1rem 0.6rem 2.4rem; font: inherit; font-size: 0.95rem; border: 1.5px solid rgba(39, 25, 140, 0.25); border-radius: 999px; background: #fff; color: inherit; box-shadow: 0 1px 2px rgba(39, 25, 140, 0.05); }
.bh-verbindung .bh-verbindung__input:focus-visible { outline: 3px solid var(--bh-primary); outline-offset: 1px; border-color: var(--bh-primary); }
.bh-verbindung .bh-verbindung__swap { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; line-height: 0; border-radius: 999px; border: 1.5px solid rgba(39, 25, 140, 0.2); background: #fff; color: var(--bh-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bh-verbindung .bh-verbindung__swap svg { width: 22px; height: 22px; display: block; }
.bh-verbindung .bh-verbindung__btn { margin-top: 0.85rem; width: 100%; min-height: 52px; padding: 0.6rem 1.5rem; border: none; border-radius: 999px; background: #FE605D; color: #fff; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; box-shadow: 0 10px 30px rgba(254, 96, 93, 0.32); }
@media (hover: hover) { .bh-verbindung__btn:hover { filter: brightness(1.03); } }
.bh-verbindung__btn:focus-visible { outline: 3px solid var(--bh-primary); outline-offset: 2px; }

.bh-verbindung__status { margin: 0.9rem 0 0; color: var(--bh-on-surface-variant); font-size: 0.9rem; }
.bh-verbindung__status:empty { margin: 0; }
.bh-verbindung__ergebnis { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }

.bh-verbindung__karte { background: #fff; border: 1px solid rgba(39, 25, 140, 0.12); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(39, 25, 140, 0.05); }
.bh-verbindung__karte--direkt { border-color: rgba(254, 96, 93, 0.35); }
.bh-verbindung__karte-kopf { display: flex; align-items: baseline; gap: 0.6rem 0.75rem; flex-wrap: wrap; }
.bh-verbindung__dauer { font-size: 1.5rem; font-weight: 800; color: var(--bh-on-surface); line-height: 1; }
.bh-verbindung__dauer span { font-size: 0.85rem; font-weight: 700; color: var(--bh-on-surface-variant); }
.bh-verbindung__badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; }
.bh-verbindung__badge--direkt { background: rgba(254, 96, 93, 0.14); color: #c62f2c; }
.bh-verbindung__badge--oepnv { background: rgba(39, 25, 140, 0.1); color: var(--bh-primary); }
.bh-verbindung__meta { font-size: 0.85rem; color: var(--bh-on-surface-variant); }
.bh-verbindung__segs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.4rem; margin-top: 0.7rem; }
.bh-verbindung__seg { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--bh-surface-container-low, #f6f2fc); border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.85rem; font-weight: 600; color: var(--bh-on-surface); }
.bh-verbindung__seg-ico { display: inline-flex; color: var(--bh-primary); }
.bh-verbindung__seg-ico svg { width: 18px; height: 18px; }
.bh-verbindung__seg-pfeil { color: var(--bh-on-surface-variant); font-size: 1rem; }
.bh-verbindung__quelle { margin: 1rem 0 0; font-size: 0.72rem; color: var(--bh-on-surface-variant); line-height: 1.5; }

/* Kartenansicht der gewählten Verbindung (Phase 2, 27.07.2026).
 * Linienfarben bewusst ohne Ampelfarben – rot/gelb/grün sind projektweit
 * für Status-Anzeigen reserviert. Höhe/Radius wie .bh-sharing__map. */
/* Rad-Tempo-Umschalter (30.07.2026). Segmented Control aus Radios – bewusst
 * echte Radios, damit Tastatur/Screenreader ohne Zusatz-ARIA funktionieren.
 * Spezifität unter .bh-verbindung, um Parent-Theme-Formularstyles zu schlagen
 * (gleiche Falle wie bei den Eingabefeldern am 24.07.). */
.bh-verbindung .bh-verbindung__tempo { border: 0; padding: 0; margin: 0.9rem 0 0; min-width: 0; }
.bh-verbindung .bh-verbindung__tempo-legend { padding: 0; margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--bh-on-surface); }
.bh-verbindung__tempo-optionen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bh-verbindung .bh-verbindung__tempo-option { position: relative; margin: 0; }
.bh-verbindung .bh-verbindung__tempo-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bh-verbindung .bh-verbindung__tempo-option span { display: inline-flex; align-items: baseline; gap: 0.35rem; border: 1px solid var(--bh-outline-variant, #c8c4d5); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; font-weight: 700; color: var(--bh-on-surface); cursor: pointer; background: var(--bh-surface, #fff); }
.bh-verbindung .bh-verbindung__tempo-option small { font-size: 0.72rem; font-weight: 600; color: var(--bh-on-surface-variant); }
.bh-verbindung .bh-verbindung__tempo-option input:checked + span { background: var(--bh-primary); border-color: var(--bh-primary); color: #fff; }
.bh-verbindung .bh-verbindung__tempo-option input:checked + span small { color: rgba(255, 255, 255, 0.82); }
/* Fokus muss sichtbar bleiben, obwohl das Radio visuell versteckt ist. */
.bh-verbindung .bh-verbindung__tempo-option input:focus-visible + span { outline: 3px solid var(--bh-primary); outline-offset: 2px; }
.bh-verbindung__tempo-hinweis { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--bh-on-surface-variant); }

/* Karte sitzt direkt in der Verbindungs-Card (27.07.2026, Wunsch Thomas:
 * direkt zuordnen + direkt zeigen). Bewusst flach gehalten, damit fünf
 * Ergebnisse untereinander nicht zur Endlos-Seite werden. */
.bh-verbindung__map { width: 100%; height: 170px; margin-top: 0.8rem; border-radius: 1rem; overflow: hidden; border: 1px solid var(--bh-outline-variant, #c8c4d5); background: #eef1f6; }
.bh-verbindung__map-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.8rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--bh-on-surface-variant); }
.bh-verbindung__map-legende span { display: inline-flex; align-items: center; gap: 0.4rem; }
.bh-verbindung__legende-linie { display: inline-block; width: 22px; height: 4px; border-radius: 2px; }
.bh-verbindung__legende-linie--fuss { background: repeating-linear-gradient(90deg, #6b6a8f 0 3px, transparent 3px 7px); }
.bh-verbindung__legende-linie--rental { background: #FE605D; }
.bh-verbindung__legende-linie--oepnv { background: #27198c; }
.bh-verbindung__pin span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #27198c; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(39, 25, 140, 0.18); }
@media (min-width: 48rem) {
	.bh-verbindung__map { height: 220px; }
}

/* ---------------------------------------------------------------------
 * Leaflet z-index-Fix (24.07.2026): Der Leaflet-Container hatte z-index:auto,
 * dadurch stanzten seine internen Controls (z-1000) über die Sticky-Kopfzeile
 * (z-50) und Bottom-Nav (z-30). Ein eigener Stacking-Context (z-index:0) kapselt
 * die internen z-indexes → Header/Bottom-Nav liegen wieder darüber.
 * ------------------------------------------------------------------- */
.leaflet-container { z-index: 0; }

/* ---------------------------------------------------------------------------
   Radtempo im Pendler-Widget + Rad-Zubringer auf /verbindung/ (28.08.2026).

   Anlass: Die Radzeit auf der Startseite lief ohne Tempoangabe und zeigte
   MOTIS' Standard (gemessen 15 km/h), ohne die Annahme zu nennen. Jetzt
   sichtbar und umstellbar – Voreinstellung unverändert 15 km/h.
   --------------------------------------------------------------------------- */

.bh-pendler-tempo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.5rem;
	padding: 0.6rem 0.9rem;
	border-radius: 0.75rem;
	background: var(--bh-surface-variant, rgba(63, 55, 163, 0.06));
}

.bh-pendler-tempo__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bh-on-surface-variant, #46464f);
}

.bh-pendler-tempo__select {
	font: inherit;
	font-size: 0.875rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--bh-outline, #c7c5d0);
	border-radius: 0.5rem;
	background: var(--bh-surface, #fff);
	color: inherit;
	/* Auf Mobilgeräten nicht schrumpfen lassen – sonst wird das Menü
	   unbedienbar schmal. */
	min-width: 10.5rem;
	max-width: 60%;
}

.bh-pendler-tempo__select:focus-visible {
	outline: 2px solid var(--bh-primary, #3f37a3);
	outline-offset: 2px;
}

.bh-verbindung__zubringer {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0.9rem 0 0.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--bh-outline-variant, #e3e0ea);
	border-radius: 0.9rem;
	cursor: pointer;
}

.bh-verbindung__zubringer:hover {
	background: var(--bh-surface-variant, rgba(63, 55, 163, 0.05));
}

.bh-verbindung__zubringer input {
	/* Optisch auf die erste Textzeile ausrichten. */
	margin-top: 0.15rem;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--bh-primary, #3f37a3);
}

.bh-verbindung__zubringer strong {
	display: block;
	font-size: 0.95rem;
}

.bh-verbindung__zubringer small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--bh-on-surface-variant, #46464f);
}

/* Zubringer-Zeile im Pendler-Widget (31.08.2026): hebt sich leicht ab, weil
   sie ein Vorschlag ist und keine Messung – erscheint nur, wenn sie spart. */
.bh-pendler-alt-row--tipp {
	border: 1px solid var(--bh-primary, #3f37a3);
	background: var(--bh-surface-variant, rgba(63, 55, 163, 0.06));
}

.bh-pendler-alt-row__hinweis-klein {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--bh-on-surface-variant, #46464f);
}

/* Kleines „Neu"-Abzeichen an frisch dazugekommenen Funktionen (31.08.2026).
   Läuft per BH_NEU_BADGE_BIS automatisch aus – s. functions.php. */
.bh-neu {
	display: inline-block;
	/* Nie selbst umbrechen und nie allein in eine neue Zeile rutschen – das
	   geschützte Leerzeichen im Markup bindet es ans letzte Wort. */
	white-space: nowrap;
	vertical-align: 0.1em;
	padding: 0.1rem 0.4rem;
	background: var(--bh-accent, #ff6b6b);
	color: var(--bh-on-accent, #27198c);
	font-size: 0.6rem;
	font-weight: 800;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	border-radius: var(--bh-radius-full, 999px);
}

/* ---------------------------------------------------------------------------
   Ausklappbare Hintergründe in Hinweiskästen (01.09.2026).

   Anlass: Der ÖPNV-Hinweis war über Wochen auf Bildschirmhöhe angewachsen.
   Sichtbar bleibt jetzt, was zum Handeln reicht; Hintergrund und Quellen
   liegen im <details>. Nativ statt JS-Akkordeon – funktioniert ohne Skript,
   ist tastaturbedienbar, und der Inhalt bleibt für Suchmaschinen im DOM.
   --------------------------------------------------------------------------- */

.bh-warnhinweis__kern {
	margin: 0 0 0.55rem;
}

.bh-warnhinweis__kern:last-of-type {
	margin-bottom: 0.75rem;
}

.bh-ausklapp {
	/* Deutlicher Abstand zum Fließtext darüber: Der Ausklapper ist das einzige
	   bedienbare Element im Kasten und soll sich davon absetzen, nicht als
	   letzter Absatz gelesen werden. */
	margin-top: 1.1rem;
	border-top: 1px solid currentColor;
	/* Der Kasten färbt seinen Text; eine volle Trennlinie in Textfarbe wäre
	   zu laut. */
	border-top-color: color-mix(in srgb, currentColor 22%, transparent);
	padding-top: 0.9rem;
}

.bh-ausklapp__kopf {
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 700;
	list-style: none;
	display: flex;
	/* flex-start statt center: Mit min-height 2,75 rem wurde der Text mittig
	   gesetzt, das Dreieck (align-self: flex-start) aber an den oberen Rand –
	   bei einzeiligen Labels stand es sichtbar zu hoch (08.09.2026). Jetzt
	   starten Text und Dreieck oben, die Trefferfläche kommt aus dem Padding:
	   ~22 px Zeile + 2 × 11 px ≈ 44 px. Bei zwei Zeilen wächst die Zeile mit. */
	align-items: flex-start;
	gap: 0.4rem;
	/* 2,75 rem Trefferfläche (04.09.2026): Gemessen waren die Ausklapp-Zeilen
	   28 px hoch. Das erfüllt WCAG 2.5.8 AA (24 px), ist für einen Finger auf
	   einer Seite, die überwiegend mobil aufgerufen wird, aber knapp – und es
	   sind echte Bedienelemente, keine Textlinks im Satzfluss. */
	padding: 0.6875rem 0;
	/* Unterstrichen, damit die Zeile als bedienbar erkennbar ist. Ein
	   <summary> sieht sonst wie Fließtext aus – der Zeigefinger-Cursor allein
	   hilft auf Touchgeräten gar nicht, weil es dort keinen Hover gibt. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
}

.bh-ausklapp__kopf:hover {
	/* Auf Hover kräftiger statt farbwechselnd: Der Kasten trägt je nach
	   Zustand eine eigene Textfarbe, ein fester Hover-Ton würde darin mal
	   passen und mal nicht. */
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

/* Geräte ohne Hover (Touch) bekommen die Unterstreichung von Anfang an
   deutlicher – dort gibt es keinen Zwischenzustand, der Klickbarkeit zeigt. */
@media (hover: none) {
	.bh-ausklapp__kopf {
		text-decoration-color: currentColor;
	}
}

/* Eigenes Dreieck statt des Browser-Markers – der sieht je nach Engine
   unterschiedlich aus und lässt sich nicht mitfärben. */
.bh-ausklapp__kopf::-webkit-details-marker { display: none; }

.bh-ausklapp__kopf::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 0.4rem solid currentColor;
	border-top: 0.3rem solid transparent;
	border-bottom: 0.3rem solid transparent;
	transition: transform 0.15s ease;
	flex: 0 0 auto;
	/* Bei zweizeiliger Beschriftung sass das Dreieck zwischen den Zeilen
	   (gesehen im Pendler-Dashboard). Es gehört zur ersten Zeile – und dort
	   genau in die Mitte der Zeilenhöhe: (1lh − Dreieckshöhe) / 2. Der feste
	   Wert davor ist der Fallback für Browser ohne lh-Einheit; mit ihm sass
	   das Dreieck bei einzeiligen Labels sichtbar zu hoch (08.09.2026). */
	align-self: flex-start;
	margin-top: 0.35em;
	margin-top: calc((1lh - 0.6rem) / 2);
}

.bh-ausklapp[open] .bh-ausklapp__kopf::before {
	transform: rotate(90deg);
}

.bh-ausklapp__kopf:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.bh-ausklapp__inhalt {
	padding-top: 0.35rem;
}

.bh-ausklapp__inhalt p,
.bh-ausklapp__inhalt ul {
	margin: 0 0 0.6rem;
}

.bh-ausklapp__inhalt ul {
	padding-left: 1.1rem;
}

.bh-ausklapp__inhalt li {
	margin-bottom: 0.35rem;
}

.bh-ausklapp__quelle {
	font-size: 0.8125rem;
	opacity: 0.85;
}


/* ---------------------------------------------------------------------------
   Fokusring für die Topbar-Buttons (04.09.2026, Barrierefreiheits-Audit).

   Diese drei Buttons – Menü, Tour, Melden – hatten als einzige Fokus-Anzeige
   ein Hintergrund-Overlay mit gemessenen 1,48:1 gegen die Bar. WCAG 1.4.11
   fordert 3:1. Der globale Fallback greift bei ihnen nicht, weil sie einen
   EIGENEN :focus-visible-Stil mitbringen.

   Der Ring muss HELL sein: --bh-primary-container ist auf der dunklen Bar
   nahezu unsichtbar. Weiß trägt hier, weil die Bar #3f36a3 ist.

   Zur Einordnung: Kadence blendet Fokusringe per Klasse `hide-focus-outline`
   aus und entfernt sie beim ersten Tastendruck wieder (navigation-lite.js).
   Das FUNKTIONIERT – mit echten Tab-Anschlägen gemessen, alle Elemente
   zeigen solid 3px. Wer mit el.focus() prüft, sieht das nicht: Das löst
   weder keydown noch :focus-visible aus und meldet fälschlich „kein Fokus".
   --------------------------------------------------------------------------- */

.bh-app-topbar__icon-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	border-radius: 0.5rem;
	/* Das bestehende Overlay bleibt als zusätzlicher Hinweis, trägt aber
	   nicht mehr allein die Last. */
	background: rgba(255, 255, 255, 0.22);
}

/* Bottom-Nav: eigener :focus-visible-Stil wechselte nur die Textfarbe
   (#6e6b79 → #474553 = 1,80:1, identisch mit Hover). Ein echter Ring dazu. */
.bh-app-bottomnav__item:focus-visible {
	outline: 3px solid var(--bh-primary, #3f37a3);
	outline-offset: -3px;
	border-radius: 0.75rem;
}

/* ==========================================================================
   JETZT-SCREEN (Startseite V3) – Nutzerführungs-Redesign 04.09.2026
   ==========================================================================

   Gehört zu inc/startseite-v3.php. Ersetzt auf der Startseite die
   Routecheck-Karte (.bh-routecheck), das Kennzahlen-Trio, die vier
   Heatmaps und die sieben Themen-Kacheln. Die alten Klassen bleiben
   definiert – V1/V2 sind über ?struktur= weiter erreichbar und sollen
   nicht mit dem Umbau zerbrechen.

   Zwei Regeln, die hier durchgehalten sind:

   1. EIN Farbsystem. Ampelfarben ausschließlich für Live-Status (Punkt,
      Abweichung). Alles andere ist Marke oder Graustufe. Vorher gab es
      vier konkurrierende Skalen auf einem Screen – Ampel, Heatmap-Stufen,
      Kachel-Dunkelflächen, Badge-Farben.

   2. Höhe wird EINMAL erklärt. Karten tragen eine Kontur, keinen Schatten.
      Einen Schatten hat nur das Sheet, weil es tatsächlich über der Seite
      liegt. Beides zusammen an einem Element ist doppelt gesagt.
   ========================================================================== */

.bh-jetzt {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

/* --- Querungen ----------------------------------------------------------- */

.bh-jetzt__querungen {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
}

.bh-jetzt__titel {
	margin: 0;
	padding: 1rem 1rem 0.125rem;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: var(--bh-on-surface);
	text-wrap: balance;
}

.bh-jetzt__unterzeile {
	margin: 0;
	padding: 0 1rem 0.875rem;
	font-size: 0.875rem;
	color: var(--bh-on-surface-variant);
}

.bh-jetzt__unterzeile strong {
	color: var(--bh-on-surface);
	font-weight: 600;
}

.bh-querungsliste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-querungsliste__zeile + .bh-querungsliste__zeile {
	border-top: 1px solid var(--bh-outline-variant);
}

.bh-querungsliste__zeile:first-child {
	border-top: 1px solid var(--bh-outline-variant);
}

/* Der ganze Zeileninhalt ist die Trefferfläche – auf dem Telefon sind zwei
   Ziele in einer Zeile zwei Fehlklicks. */
.bh-querungsliste__knopf {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.8125rem 1rem;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

/* Nicht zuordenbare Querung: gerendert als <span>, also kein Zeigefinger und
   kein Hover – es gibt nichts zu öffnen. */
span.bh-querungsliste__knopf {
	cursor: default;
}

button.bh-querungsliste__knopf:hover {
	background: var(--bh-surface-container-low);
}

button.bh-querungsliste__knopf:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: -3px;
	border-radius: 0.5rem;
}

.bh-querungsliste__haupt {
	flex: 1 1 auto;
	min-width: 0;
}

.bh-querungsliste__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bh-on-surface);
}

.bh-querungsliste__punkt {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--bh-radius-full);
}

/* Ampelpunkt: dieselben Töne wie in .bh-crossing-item__dot, damit „was
   bedeutet Rot" im ganzen Theme eine Antwort hat. */
.bh-querungsliste__punkt.bh-ampel--rot { background: #c62828; }
.bh-querungsliste__punkt.bh-ampel--gelb { background: #a67c00; }
.bh-querungsliste__punkt.bh-ampel--gruen { background: #2e7d32; }

.bh-querungsliste__weg {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	color: var(--bh-outline);
}

.bh-querungsliste__werte {
	flex: 0 0 auto;
	text-align: right;
}

.bh-querungsliste__zeit {
	display: block;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--bh-on-surface);
	/* Zeiten dürfen beim Live-Refresh nicht springen. */
	font-variant-numeric: tabular-nums;
}

.bh-querungsliste__zeit--leer {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bh-outline);
	letter-spacing: 0;
}

.bh-querungsliste__delta {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Ampel als reine TEXTFARBE – die Flächenvariante .bh-ampel--* würde hier
   einen farbigen Kasten in die Zeile setzen und wäre die zweite Farbskala,
   die dieser Screen gerade loswerden soll. Töne gegen Weiß geprüft:
   rot 6,5:1 · gelb 5,4:1 · grün 5,3:1. */
.bh-ampel-text--rot { color: #b3261e; }
.bh-ampel-text--gelb { color: #8a5a00; }
.bh-ampel-text--gruen { color: #14663c; }

.bh-querungsliste__pfeil {
	flex: 0 0 auto;
	font-size: 1.25rem;
	color: var(--bh-outline);
}

.bh-querungsliste__zeile.is-gesperrt .bh-querungsliste__zeit,
.bh-querungsliste__zeile.is-leer .bh-querungsliste__zeit {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
}

/* --- Fußbereich der Querungskarte --------------------------------------- */

.bh-jetzt__fuss {
	border-top: 1px solid var(--bh-outline-variant);
	padding: 0.75rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.84375rem;
	color: var(--bh-on-surface-variant);
}

.bh-jetzt__fuss .material-symbols-outlined {
	font-size: 1.0625rem;
	vertical-align: -0.1875rem;
	margin-right: 0.25rem;
	color: var(--bh-outline);
}

/* min-height 2.75rem: gemessen waren es 22 px. Die Zeile ist kein Textlink
   im Satzfluss (für die lässt WCAG 2.5.8 kleine Flächen zu), sondern ein
   eigenständiges Bedienelement. */
.bh-jetzt__richtung {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--bh-primary-container);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.bh-jetzt__richtung:hover {
	text-decoration-thickness: 2px;
}

.bh-jetzt__ruhigste,
.bh-jetzt__wetter {
	margin: 0;
}

.bh-jetzt__ruhigste a {
	color: var(--bh-primary-container);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.bh-jetzt__wetter-rad {
	display: block;
	margin-left: 1.3125rem;
	color: var(--bh-outline);
}

/* --- Arbeitsweg: leerer Zustand zusammengeklappt ------------------------ */

/*
 * Das Setup-Formular kostete auf dem Startscreen 509 px für eine Eingabe,
 * die die meisten nie machen – und stand damit genau dort, wo Wiederkehrer
 * ihre Antwort erwarten. Zugeklappt bleibt es erreichbar, ohne den Screen
 * zu besetzen. Sobald eine Route gespeichert ist, setzt bh-pendler-modus.js
 * data-state="aktiv" und das Dashboard rendert unverändert in voller Größe.
 *
 * Bewusst per CSS und nicht per <details>: Das Markup ist eine geteilte
 * Render-Funktion, die auch /en/ und die Pendler-Seite benutzen. Ein
 * Umbau des Markups hätte dort mitgezogen.
 */
.bh-jetzt__weg {
	padding: 0;
	background: none;
	border: 0;
}

.bh-jetzt .bh-pendler[data-state="setup"] {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	padding: 0;
}

.bh-jetzt .bh-pendler[data-state="setup"] .bh-pendler__intro {
	padding: 0.9375rem 1rem;
	margin: 0;
}

.bh-jetzt .bh-pendler[data-state="setup"] .bh-pendler__intro-title {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.bh-jetzt .bh-pendler[data-state="setup"] .bh-pendler__intro-text {
	font-size: 0.84375rem;
	color: var(--bh-on-surface-variant);
	margin: 0.1875rem 0 0;
}

/* Das Formular selbst: sichtbar, aber flach – ohne die eigene Kartenfläche,
   die es zu einem zweiten Block gemacht hat. */
.bh-jetzt .bh-pendler[data-state="setup"] .bh-pendler-form {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0 1rem 1rem;
	margin: 0;
}

/* Das Datenschutz-Abzeichen schwebte über der Karte und überlappte im
   zugeklappten Zustand die Überschrift. */
.bh-jetzt .bh-pendler[data-state="setup"] .bh-pendler-privacy-icon {
	top: 0.75rem;
	right: 0.75rem;
}

/* --- Einzeilige Verweise ------------------------------------------------ */

.bh-jetzt__zeile {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	color: var(--bh-on-surface);
	text-decoration: none;
}

.bh-jetzt__zeile:hover {
	background: var(--bh-surface-container-low);
}

.bh-jetzt__zeile > .material-symbols-outlined:first-child {
	flex: 0 0 auto;
	font-size: 1.375rem;
	color: var(--bh-primary-container);
}

.bh-jetzt__zeile-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9375rem;
}

.bh-jetzt__zeile-text strong {
	display: block;
	font-weight: 600;
}

.bh-jetzt__zeile-text small {
	display: block;
	margin-top: 0.0625rem;
	font-size: 0.8125rem;
	color: var(--bh-outline);
}

.bh-jetzt__zeile-pfeil {
	flex: 0 0 auto;
	color: var(--bh-outline);
}

/* Die Linienstatus-Pills lädt bh-abfahrten-live.js nach. Solange leer,
   darf die Zeile keinen Leerraum reservieren. */
.bh-jetzt__zeile .bh-linien-status__pills:empty {
	display: none;
}

.bh-jetzt__zeile .bh-linien-status__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0.25rem 0;
}

/* --- Ticker ------------------------------------------------------------- */

.bh-jetzt__ticker {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
}

.bh-jetzt__ticker-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1rem 0.625rem;
}

.bh-jetzt__ticker-kopf h2 {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.bh-jetzt__ticker-kopf a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin: -0.75rem 0;
	font-size: 0.84375rem;
	font-weight: 600;
	color: var(--bh-primary-container);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.bh-jetzt__ticker-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-jetzt__ticker-liste li {
	border-top: 1px solid var(--bh-outline-variant);
}

.bh-jetzt__ticker-liste a {
	display: block;
	padding: 0.75rem 1rem;
	color: var(--bh-on-surface);
	text-decoration: none;
}

.bh-jetzt__ticker-liste a:hover {
	background: var(--bh-surface-container-low);
}

.bh-jetzt__ticker-liste time {
	display: block;
	font-size: 0.78125rem;
	color: var(--bh-outline);
}

/*
 * Auf zwei Zeilen begrenzt (04.09.2026, nach dem Live-Blick).
 *
 * Der Plan sagt „zwei Schlagzeilen, einzeilig" – geliefert hat das Feld
 * ticker_kurztext aber ganze Absätze: Ein Eintrag zur Stadtbahn war
 * gerendert rund 700 px hoch und damit der größte Block des Screens, direkt
 * nach dem Umbau, der genau solche Blöcke abschaffen sollte.
 *
 * Gekürzt wird per Zeilenbegrenzung, nicht serverseitig: Ein Textabschnitt
 * mit „…" wäre eine zweite, schlechtere Fassung derselben Meldung, und die
 * Redaktion pflegt den Kurztext bewusst ganz. Der Volltext ist einen Tipp
 * entfernt – die Zeile verlinkt den Eintrag.
 *
 * -webkit-line-clamp ist trotz Präfix der Standardweg und wird von allen
 * aktuellen Engines unterstützt. Wo nicht, steht der Text vollständig da:
 * unschön, aber nichts fehlt.
 */
.bh-jetzt__ticker-liste span {
	font-size: 0.90625rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Weitere Bereiche (Ersatz für die sieben Kacheln) ------------------- */

.bh-jetzt__mehr {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	padding: 0.25rem 0 0.5rem;
}

.bh-jetzt__mehr a {
	padding: 0.5rem 0.875rem;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-full);
	background: var(--bh-surface-container-lowest);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bh-on-surface-variant);
	text-decoration: none;
}

.bh-jetzt__mehr a:hover {
	border-color: var(--bh-outline);
	color: var(--bh-on-surface);
}

/* Kanal-Kachel (10.09.2026): eine Zeile wie die ÖPNV-Zeile, Logo monochrom
   in Projektfarbe (kein Markengrün neben den Ampeln). */
.bh-jetzt__kanal {
	display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; margin: 0.25rem 0 0.5rem;
	background: var(--bh-surface-container-lowest); border: 1px solid var(--bh-outline-variant); border-radius: var(--bh-radius-sm);
	color: var(--bh-on-surface); text-decoration: none;
}
.bh-jetzt__kanal:hover { background: var(--bh-surface-container-low); }
.bh-jetzt__kanal:focus-visible { outline: 3px solid var(--bh-primary-container); outline-offset: 2px; }
.bh-jetzt__kanal-logo {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
	border-radius: 50%; background: var(--bh-primary-container); color: var(--bh-on-primary);
}
.bh-jetzt__kanal-logo svg { width: 1.625rem; height: 1.625rem; }
.bh-jetzt__kanal-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.bh-jetzt__kanal-text strong { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.bh-jetzt__kanal-text small { font-size: 0.8125rem; color: var(--bh-on-surface-variant); line-height: 1.4; }
.bh-jetzt__kanal-pfeil { flex: 0 0 auto; font-size: 1.25rem; color: var(--bh-outline); }

/* ==========================================================================
   DETAIL-SHEET (dritte Ebene) – bh-querung-detail.js
   ========================================================================== */

.bh-sheet-grund {
	position: fixed;
	inset: 0;
	z-index: var(--bh-z-overlay);
	background: rgba(28, 27, 34, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bh-sheet-grund[data-offen] {
	opacity: 1;
	pointer-events: auto;
}

.bh-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: calc(var(--bh-z-overlay) + 1);
	max-width: 34rem;
	margin: 0 auto;
	background: var(--bh-surface-container-lowest);
	border-radius: 1.25rem 1.25rem 0 0;
	/* Der einzige Schatten auf diesem Screen – hier liegt tatsächlich etwas
	   über der Seite. Versatz UND Weichzeichnung, sonst wirkt es wie eine
	   Kontur. */
	box-shadow: 0 -0.75rem 2rem -0.5rem rgba(28, 27, 34, 0.22),
	            0 -0.125rem 0.375rem -0.125rem rgba(28, 27, 34, 0.1);
	padding: 0.5rem 0 1.5rem;
	max-height: 86vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Der eine gestaltete Bewegungsmoment des Screens. */
	transform: translateY(101%);
	transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bh-sheet[data-offen] {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.bh-sheet,
	.bh-sheet-grund {
		transition-duration: 1ms;
	}
}

/*
 * Der Griff ist jetzt eine echte Ziehmarke (bh-querung-detail.js): Wischen
 * nach unten schließt das Sheet. Deshalb etwas kräftiger und breiter – er
 * behauptet eine Geste, die es nun auch gibt.
 */
.bh-sheet__griff {
	width: 2.75rem;
	height: 0.3125rem;
	margin: 0.25rem auto 0.75rem;
	border-radius: var(--bh-radius-full);
	background: var(--bh-outline-variant);
}

/* Während des Ziehens keine Textauswahl und kein Kontextmenü auf dem
   Griff – beides bricht die Geste auf dem Telefon ab. */
.bh-sheet__griff {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.bh-sheet__kopf {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0 1.25rem 0.75rem;
}

.bh-sheet__titel {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.3125rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.bh-sheet__zu {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--bh-radius-full);
	background: var(--bh-surface-container);
	color: var(--bh-primary);
	cursor: pointer;
	/*
	 * padding/font-size/line-height MÜSSEN hier stehen (04.09.2026, Hinweis
	 * Thomas). Kadence setzt auf JEDES button:
	 *   padding: .4em 1em; font-size: 1.125rem; line-height: 1.6;
	 * Das sind bei 18px Basis 7,2px/18px Innenabstand. In einer 44-px-Box
	 * mit border-box bleiben davon 8 px Inhaltsfläche – das 24-px-Icon
	 * beginnt am Anfang dieser Fläche und sass dadurch 8 px zu weit rechts.
	 * Im Kreis wirkte das wie ein abgeschnittenes X am Sheet-Rand.
	 *
	 * Die Box selbst war korrekt: 44x44, 20 px vom Rand, kein Überlauf.
	 * Nur der Inhalt darin war verschoben – deshalb fiel es in den
	 * Messungen nicht auf, die Kanten und Überläufe geprüft haben.
	 */
	padding: 0;
	font-size: 1rem;
	line-height: 1;
}

.bh-sheet__zu:hover {
	background: var(--bh-surface-container-high);
}

.bh-sheet__zu:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: 2px;
}

.bh-sheet__gross {
	margin: 0;
	padding: 0 1.25rem;
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.bh-sheet__gross small {
	display: block;
	margin-top: 0.3125rem;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--bh-on-surface-variant);
}

/* Kein Live-Wert: kleiner gesetzt, weil hier keine Zahl steht, die eine
   40-px-Type verdient. */
.bh-sheet__gross--leer {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--bh-on-surface-variant);
}

.bh-sheet__block {
	padding: 1rem 1.25rem 0;
}

.bh-sheet__block h3 {
	margin: 0 0 0.5rem;
	font-size: 0.78125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bh-outline);
}

/* Tagesverlauf als reine Geometrie – eine Farbskala hätte hier die zweite
   Bedeutungsebene wieder eingeführt, die dieser Umbau abgeschafft hat.
   Jetzt-Stunde durch Deckkraft und nicht durch einen anderen Farbton. */
.bh-sheet__verlauf {
	display: flex;
	align-items: flex-end;
	gap: 0.1875rem;
	height: 4.125rem;
}

.bh-sheet__balken {
	flex: 1 1 0;
	min-width: 0.1875rem;
	background: var(--bh-primary-container);
	border-radius: 0.1875rem 0.1875rem 0 0;
	opacity: 0.28;
}

.bh-sheet__balken.is-jetzt {
	opacity: 1;
}

.bh-sheet__achse {
	display: flex;
	justify-content: space-between;
	margin-top: 0.3125rem;
	font-size: 0.71875rem;
	color: var(--bh-outline);
}

.bh-sheet__paare {
	margin: 0;
}

.bh-sheet__paar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4375rem 0;
	border-bottom: 1px solid var(--bh-outline-variant);
	font-size: 0.9375rem;
}

.bh-sheet__paar:last-child {
	border-bottom: 0;
}

.bh-sheet__paar dt {
	color: var(--bh-on-surface-variant);
}

.bh-sheet__paar dt small {
	display: block;
	font-size: 0.75rem;
	color: var(--bh-outline);
}

.bh-sheet__paar dd {
	margin: 0;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bh-sheet__basis {
	margin: 0;
	font-size: 0.84375rem;
	color: var(--bh-on-surface-variant);
}

.bh-sheet__mehr {
	margin: 1.125rem 0 0;
	padding: 0 1.25rem;
}

.bh-sheet__mehr a {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bh-primary-container);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

/* Ladezustand: drei Platzhalter in der Form dessen, was kommt. */
.bh-sheet__laden {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 0.5rem 1.25rem 0;
}

.bh-sheet__laden span {
	height: 3rem;
	border-radius: 0.625rem;
	background: linear-gradient(90deg,
		var(--bh-surface-container) 25%,
		var(--bh-surface-container-low) 37%,
		var(--bh-surface-container) 63%);
	background-size: 400% 100%;
	animation: bh-sheet-schimmer 1.4s ease-in-out infinite;
}

@keyframes bh-sheet-schimmer {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bh-sheet__laden span {
		animation: none;
	}
}

.bh-sheet__fehler {
	padding: 0.5rem 1.25rem 0;
}

.bh-sheet__fehler p {
	margin: 0 0 0.75rem;
	color: var(--bh-on-surface-variant);
}

.bh-sheet__erneut {
	min-height: 2.75rem;
	padding: 0.5rem 1.125rem;
	border: 1px solid var(--bh-outline);
	border-radius: var(--bh-radius-full);
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--bh-primary-container);
	cursor: pointer;
}

.bh-sheet__erneut:hover {
	background: var(--bh-surface-container);
}

/* --- Desktop ------------------------------------------------------------ */

@media (min-width: 48rem) {
	.bh-jetzt__titel {
		font-size: 1.75rem;
	}

	/* Das Sheet bleibt ein Sheet, wird aber mittig und mit Abstand gesetzt –
	   am unteren Rand eines 1440er Schirms klebend wirkte es wie ein
	   Cookie-Banner. */
	.bh-sheet {
		bottom: 2rem;
		border-radius: 1.25rem;
		max-height: 78vh;
		box-shadow: 0 1.5rem 3rem -1rem rgba(28, 27, 34, 0.28),
		            0 0.25rem 0.75rem -0.25rem rgba(28, 27, 34, 0.12);
	}

	.bh-sheet:not([data-offen]) {
		transform: translateY(calc(100% + 2rem));
	}
}

/* --- Kompakter „keine Live-Daten"-Hinweis (V3) --------------------------- */

/*
 * Die lange Fassung (.bh-warnhinweis) belegte gemessen 380 px und war damit
 * der größte Block des Screens – ausgerechnet dann, wenn es nichts zu
 * zeigen gibt. Gleiche Aussage, zwei Zeilen. Kein farbiger Kasten: Fehlende
 * Daten sind kein Alarm, und Rot ist auf diesem Screen für Live-Status
 * reserviert.
 */
.bh-jetzt__keine-daten {
	margin: 0;
	padding: 0 1rem 0.875rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--bh-on-surface-variant);
}

.bh-jetzt__keine-daten strong {
	color: var(--bh-on-surface);
	font-weight: 600;
}

.bh-jetzt__keine-daten .material-symbols-outlined {
	font-size: 1.0625rem;
	vertical-align: -0.1875rem;
	color: var(--bh-outline);
}

/* --- Arbeitsweg: Ausklapper --------------------------------------------- */

.bh-jetzt__weg-ausklapp {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
}

.bh-jetzt__weg-kopf {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3.5rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	list-style: none;
}

/* Safari/WebKit zeichnet sonst sein eigenes Dreieck zusätzlich. */
.bh-jetzt__weg-kopf::-webkit-details-marker {
	display: none;
}

.bh-jetzt__weg-kopf:hover {
	background: var(--bh-surface-container-low);
}

.bh-jetzt__weg-kopf:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: -3px;
	border-radius: 0.5rem;
}

.bh-jetzt__weg-kopf-text {
	flex: 1 1 auto;
	min-width: 0;
}

.bh-jetzt__weg-kopf-text strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bh-on-surface);
}

.bh-jetzt__weg-kopf-text small {
	display: block;
	margin-top: 0.0625rem;
	font-size: 0.8125rem;
	color: var(--bh-outline);
}

.bh-jetzt__weg-kopf-pfeil {
	flex: 0 0 auto;
	color: var(--bh-outline);
	transition: transform 180ms ease;
}

.bh-jetzt__weg-ausklapp[open] > .bh-jetzt__weg-kopf .bh-jetzt__weg-kopf-pfeil {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.bh-jetzt__weg-kopf-pfeil {
		transition: none;
	}
}

/* Route gespeichert: Die Zusammenfassung sagte dasselbe wie der eigene
   Dashboard-Titel darunter. Eine der beiden Überschriften muss weg. */
.bh-jetzt__weg-ausklapp.is-aktiv > .bh-jetzt__weg-kopf {
	display: none;
}

/*
 * Im aktiven Zustand gibt die Ausklappbox ihre Fläche ab: Das Dashboard
 * bringt mit .bh-pendler-card eine eigene Karte mit Rundung und Schatten
 * mit – zusammen mit dem Rahmen der Box war das eine Karte in einer Karte,
 * also Höhe zweimal erklärt. Aufgefallen erst auf dem Bildschirmfoto für
 * das Onboarding: zwei Rahmen, zwei Radien, ein Schatten dazwischen.
 *
 * Im leeren Zustand bleibt der Rahmen – dort ist die Box selbst die Karte.
 */
.bh-jetzt__weg-ausklapp.is-aktiv {
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.bh-jetzt__weg-ausklapp.is-aktiv .bh-pendler {
	padding: 0;
}

/* Das Widget bringt seine eigene Kartenfläche mit – in der Ausklappbox wäre
   das eine Karte in einer Karte. Höhe wird einmal erklärt. */
.bh-jetzt__weg-ausklapp .bh-pendler {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0 1rem 1rem;
	margin: 0;
}

.bh-jetzt__weg-ausklapp .bh-pendler-form {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* Die Überschrift „Dein Arbeitsweg im Blick" doppelt im aufgeklappten
   Setup-Zustand die Zusammenfassung. Im aktiven Zustand trägt sie das
   Dashboard und bleibt. */
.bh-jetzt__weg-ausklapp:not(.is-aktiv) .bh-pendler__intro {
	display: none;
}

/*
 * Das Datenschutz-Abzeichen bleibt, wie das Widget es vorsieht (zentriert
 * über der Karte). Mein erster Versuch schob es per `position: static` nach
 * rechts oben – auf dem Bildschirmfoto für das Onboarding hing es dann
 * losgelöst über der Karte im Nichts. Die Aussage dahinter („kein Login,
 * bleibt auf deinem Gerät") ist Vertrauensarbeit und darf nicht einfach
 * verschwinden, also lieber an ihrem gestalteten Platz.
 */

/* --- Fokusring der Pendler-Eingabefelder ------------------------------- */

/*
 * Gemessen mit echten Tab-Anschlägen: outline none, 0 px. Die Felder liegen
 * im Hauptpfad des Jetzt-Screens, damit ist das WCAG 2.4.7. Der Ring sitzt
 * auf dem umgebenden Feld-Container, weil das Input selbst randlos in ihm
 * liegt – ein Ring am Input allein sähe wie ein zweiter Rahmen aus.
 */
.bh-pendler-form__field:focus-within {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: 2px;
	border-radius: var(--bh-radius-sm);
}

/* --- Schmale Geräte: Pendler-Dashboard (320 px) ------------------------- */

/*
 * Gemessen am 04.09.2026 bei 320 px: .bh-pendler-tempo__select und
 * .bh-pendler-alt-row__zeit ragten aus dem Viewport. Der Fehler ist älter
 * als das Redesign, fiel aber erst jetzt auf – vorher war das Dashboard
 * hinter einem leeren Formular versteckt und für Wiederkehrer selten im
 * Blick. Jetzt ist es der zweite Block der Startseite.
 *
 * Ursache beim Select: `min-width: 10.5rem` (168 px) und `max-width: 60%`
 * widersprechen sich, sobald die Spalte schmaler als 280 px wird – die
 * Mindestbreite gewinnt und schiebt das Element hinaus.
 */
.bh-pendler-tempo__select {
	min-width: min(10.5rem, 100%);
}

@media (max-width: 22.5rem) {
	.bh-pendler-alt-row {
		flex-wrap: wrap;
		row-gap: 0.375rem;
	}

	.bh-pendler-alt-row__left {
		min-width: 0;
		flex: 1 1 100%;
	}

	.bh-pendler-tempo {
		flex-wrap: wrap;
	}

	.bh-pendler-tempo__select {
		max-width: 100%;
	}
}

/* --- Kadence' Button-Palette abwehren -------------------------------------

   Kadence' global.min.css setzt für JEDEN <button>:

     button:hover, button:focus, button:active, … {
       color: var(--global-palette-btn-hover);
       background: var(--global-palette-btn-bg-hover);
       box-shadow: 0 15px 25px -7px rgba(0,0,0,.1);
     }

   Die neuen Bedienelemente in V3 sind keine Buttons im Sinne dieser Palette,
   sondern Listenzeilen und Sheet-Steuerung. Ohne Gegenwehr wurde die
   fokussierte Querungszeile dunkelblau hinterlegt und ihr Text mit
   umgefärbt – „Bonn → Ramersdorf" stand dann dunkel auf dunkel und das
   „+3 Min" war praktisch weg.

   Aufgefallen ist das NICHT in den Messungen: Die Kontrastprobe misst den
   Ruhezustand, und dort ist alles in Ordnung. Sichtbar wurde es erst auf dem
   Bildschirmfoto, das nach dem Schließen des Sheets entstand – da hatte der
   Fokus gerade auf die Zeile zurückgesprungen.

   Deshalb hier ausdrücklich alle vier Zustände, statt sich auf :hover und
   :focus-visible zu verlassen. Der Schatten muss mit weg: Höhe wird auf
   diesem Screen einmal erklärt, und diese Zeilen liegen nicht über der
   Seite.
   ------------------------------------------------------------------------ */

button.bh-querungsliste__knopf:hover,
button.bh-querungsliste__knopf:focus,
button.bh-querungsliste__knopf:focus-visible,
button.bh-querungsliste__knopf:active {
	color: var(--bh-on-surface);
	background: var(--bh-surface-container-low);
	box-shadow: none;
}

.bh-sheet__zu:hover,
.bh-sheet__zu:focus,
.bh-sheet__zu:focus-visible,
.bh-sheet__zu:active {
	color: var(--bh-primary);
	background: var(--bh-surface-container-high);
	box-shadow: none;
}

.bh-sheet__erneut:hover,
.bh-sheet__erneut:focus,
.bh-sheet__erneut:focus-visible,
.bh-sheet__erneut:active {
	color: var(--bh-primary-container);
	background: var(--bh-surface-container);
	box-shadow: none;
}

/* Der Ring muss NACH den Zustandsregeln kommen, sonst gewinnt die
   Hintergrundregel oben auch über das outline. */
button.bh-querungsliste__knopf:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: -3px;
	border-radius: 0.5rem;
}

/* ==========================================================================
   VERBINDUNG SUCHEN – UI-Überarbeitung 04.09.2026
   ==========================================================================

   Gleiche Prinzipien wie der Jetzt-Screen: Ergebnisse als vergleichbare
   Einzeiler, Tiefe im Sheet, ein Farbsystem, Höhe einmal erklärt.

   Gemessen vorher (390 px, fünf Ergebnisse): 3.256 px. Jede Ergebnis-Card
   war 290–398 px hoch und brachte eine eigene Leaflet-Karte mit – 850 px
   der Seite waren Kartenflächen, und zwischen zwei Optionen lag jeweils
   eine Landkarte. Vergleichen war damit unmöglich.

   Die alten .bh-verbindung__karte-Regeln bleiben stehen: Sie stören nicht,
   und das Markup könnte anderswo noch auftauchen.
   ========================================================================== */

/* --- Kompakter Zustand nach der Suche ---------------------------------- */

.bh-verbindung__anfrage {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
	padding: 0.75rem 1rem;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
}

.bh-verbindung__anfrage-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bh-on-surface);
	/* Lange Adresspaare dürfen umbrechen, aber nicht aus der Zeile laufen. */
	overflow-wrap: break-word;
}

.bh-verbindung__anfrage-btn {
	flex: 0 0 auto;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	border: 1px solid var(--bh-outline);
	border-radius: var(--bh-radius-full);
	background: none;
	color: var(--bh-primary-container);
	cursor: pointer;
}

/* Kadence stylet jedes button bei :hover/:focus/:active mit seiner
   Button-Palette (Hintergrund, Textfarbe, Schatten) – deshalb alle vier
   Zustände hier ausdrücklich. Sonst wird der Fokuszustand dunkel und der
   Text unlesbar; genau das passierte auf der Startseite. */
.bh-verbindung__anfrage-btn:hover,
.bh-verbindung__anfrage-btn:focus,
.bh-verbindung__anfrage-btn:focus-visible,
.bh-verbindung__anfrage-btn:active {
	background: var(--bh-surface-container);
	color: var(--bh-primary-container);
	box-shadow: none;
}

.bh-verbindung__anfrage-btn:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: 2px;
}

/* --- Optionen-Ausklapper ----------------------------------------------- */

.bh-verbindung__optionen {
	margin: 0.25rem 0 0.25rem;
}

.bh-verbindung__optionen-inhalt {
	padding-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Im Ausklapper trägt der Rahmen des <details> die Fläche – die inneren
   Blöcke brauchen keine eigene mehr. */
.bh-verbindung__optionen-inhalt .bh-verbindung__tempo,
.bh-verbindung__optionen-inhalt .bh-verbindung__zubringer {
	margin: 0;
}

/* --- Ergebnisliste ----------------------------------------------------- */

.bh-vb-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
}

.bh-vb-zeile + .bh-vb-zeile {
	border-top: 1px solid var(--bh-outline-variant);
}

.bh-vb-zeile__knopf {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.8125rem 1rem;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.bh-vb-zeile__knopf:hover,
.bh-vb-zeile__knopf:focus,
.bh-vb-zeile__knopf:focus-visible,
.bh-vb-zeile__knopf:active {
	background: var(--bh-surface-container-low);
	color: var(--bh-on-surface);
	box-shadow: none;
}

.bh-vb-zeile__knopf:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: -3px;
	border-radius: 0.5rem;
}

.bh-vb-zeile__haupt {
	flex: 1 1 auto;
	min-width: 0;
}

.bh-vb-zeile__kette {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bh-on-surface);
	/* Zwei Zeilen reichen für „Bus 640 › Tram 66 › Bahn RE8". Danach ist es
	   eine Verbindung, die man im Sheet ansieht. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bh-vb-zeile__meta {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	color: var(--bh-outline);
}

.bh-vb-zeile__werte {
	flex: 0 0 auto;
	text-align: right;
}

.bh-vb-zeile__dauer {
	display: block;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--bh-on-surface);
	/* Damit die Minuten beim Vergleichen untereinander stehen. */
	font-variant-numeric: tabular-nums;
}

/*
 * Die Abweichung zur schnellsten Verbindung. BEWUSST keine Ampelfarbe:
 * Rot/Gelb/Grün ist im ganzen Theme für Live-Status reserviert, und „+8 Min"
 * ist kein Status, sondern ein Vergleich. Die schnellste wird durch Gewicht
 * hervorgehoben, nicht durch Farbe.
 */
.bh-vb-zeile__delta {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bh-outline);
	font-variant-numeric: tabular-nums;
}

.bh-vb-zeile__delta--beste {
	color: var(--bh-primary-container);
}

.bh-vb-zeile__pfeil {
	flex: 0 0 auto;
	font-size: 1.25rem;
	color: var(--bh-outline);
}

/* --- Route merken ------------------------------------------------------ */

.bh-verbindung__merken {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0.875rem;
	padding: 0.875rem 1rem;
	background: var(--bh-surface-container-low);
	border-radius: var(--bh-radius-sm);
	font-size: 0.875rem;
	color: var(--bh-on-surface-variant);
}

.bh-verbindung__merken span {
	flex: 1 1 12rem;
}

.bh-verbindung__merken-btn {
	flex: 0 0 auto;
	min-height: 2.75rem;
	padding: 0.5rem 1.125rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	border: 0;
	border-radius: var(--bh-radius-full);
	background: var(--bh-primary-container);
	color: var(--bh-on-primary);
	cursor: pointer;
}

.bh-verbindung__merken-btn:hover,
.bh-verbindung__merken-btn:focus,
.bh-verbindung__merken-btn:focus-visible,
.bh-verbindung__merken-btn:active {
	background: var(--bh-primary);
	color: var(--bh-on-primary);
	box-shadow: none;
}

.bh-verbindung__merken-btn:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: 2px;
}

.bh-verbindung__merken-btn:disabled {
	background: var(--bh-surface-container-high);
	color: var(--bh-on-surface-variant);
	cursor: default;
}

/* --- Ablauf im Sheet --------------------------------------------------- */

/*
 * Ein Weg ist eine Reihenfolge, also eine senkrechte Liste. Vorher war es
 * eine Kette aus Pillen mit „›"-Trennern, die bei drei Abschnitten ohnehin
 * umbrach und dann keine Reihenfolge mehr zeigte.
 */
.bh-vb-schritte {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-vb-schritt {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.5rem 0;
}

.bh-vb-schritt + .bh-vb-schritt {
	border-top: 1px solid var(--bh-outline-variant);
}

.bh-vb-schritt__ico {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	border-radius: var(--bh-radius-full);
	background: var(--bh-surface-container);
	color: var(--bh-primary);
}

.bh-vb-schritt__ico svg {
	width: 1rem;
	height: 1rem;
}

.bh-vb-schritt__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bh-on-surface);
}

.bh-vb-schritt__text small {
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--bh-outline);
}

.bh-vb-schritt__dauer {
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bh-on-surface-variant);
	font-variant-numeric: tabular-nums;
}

/* --- Karte im Sheet ---------------------------------------------------- */

.bh-verbindung__map--sheet {
	height: 13rem;
	border-radius: var(--bh-radius-klein, 0.625rem);
	overflow: hidden;
	/* Leaflet braucht eine Fläche mit Maßen, bevor fitBounds rechnet – die
	   Höhe steht deshalb hier und nicht erst im JS. */
}

.bh-verbindung__map-legende--sheet {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0.5rem 0 0;
	font-size: 0.78125rem;
	color: var(--bh-outline);
}

.bh-verbindung__map-legende--sheet[hidden] {
	display: none;
}

/* --- Abstand unter dem Suchknopf --------------------------------------- */

/*
 * Gemessen (Hinweis Thomas, 04.09.2026): Zwischen Knopfunterkante und dem
 * Quellenhinweis lagen exakt 0 px. Dazu trägt der Knopf einen korallenroten
 * Schein mit 10 px Versatz und 30 px Weichzeichnung – der lief also direkt
 * in den Text hinein.
 *
 * Der Abstand muss deshalb größer sein als der Schatten reicht, sonst sieht
 * es weiter nach Berührung aus. 2,25 rem = 36 px, der Schein endet bei
 * rund 40 px halbtransparent.
 *
 * Am Knopf und nicht am Quellenhinweis: Nach der Suche ist das Formular
 * ausgeblendet, dann soll der Abstand mit verschwinden.
 */
.bh-verbindung__btn {
	margin-bottom: 2.25rem;
}

/* ==========================================================================
   ÖPNV-SEITE – UI-Überarbeitung 04.09.2026
   ==========================================================================

   Gemessen vorher (390 px): 5.281 px, 6,3 Bildschirmhöhen, 500 Wörter,
   19 verschiedene Hintergrundfarben. Aufteilung:

     2 Warnhinweise      753 px  – VOR der Überschrift der Seite
     Hero mit Kicker     458 px
     4 Abfahrtstafeln  1.777 px  – alle gleichzeitig offen
     2 Gruppen-Karten  1.420 px  – je eigene Farbfläche
     Sharing             313 px

   Gleiche Prinzipien wie Jetzt-Screen und Verbindungssuche: Listen aus
   Einzeilern, Tiefe eine Ebene weiter, ein Farbsystem.
   ========================================================================== */

/* --- Schlanker Hero ---------------------------------------------------- */

/*
 * Titel auf dem Seitengrund statt auf violetter Fläche.
 *
 * `.bh-hero` ist ein Farbverlauf mit Schatten – auf /oepnv/ war das die
 * dritte konkurrierende Kartenfarbe zwischen zwei rosa Warnhinweisen und
 * den Abfahrten. /verbindung/ und der Jetzt-Screen tragen ihren Titel
 * schlicht; das ist die Fassung, in die diese Seite gehört.
 *
 * NUR als Modifier und nicht an `.bh-hero` selbst: Die Klasse trägt sieben
 * weitere Seiten (Karte, FAQ, Mitfahrbörse, Melden, Ticker-Archiv,
 * Inserate), die noch nicht überarbeitet sind. Sie global umzustellen wäre
 * eine Änderung an Seiten, die niemand geprüft hat. Wenn sie an die Reihe
 * kommen, ist das hier die Vorlage.
 */
.bh-hero--schlank {
	background: none;
	color: var(--bh-on-surface);
	box-shadow: none;
	border-radius: 0;
	padding: 0.5rem 0 0;
	margin-bottom: 1.25rem;
}

.bh-hero--schlank .bh-hero__title {
	color: var(--bh-on-surface);
	font-size: 1.5rem;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.bh-hero--schlank .bh-hero__text {
	color: var(--bh-on-surface-variant);
	margin-bottom: 0;
}

@media (min-width: 48rem) {
	.bh-hero--schlank .bh-hero__title {
		font-size: 1.75rem;
	}
}

/* --- Haltestellen-Zeilen ----------------------------------------------- */

.bh-oepnv-halte {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
}

.bh-oepnv-halt + .bh-oepnv-halt {
	border-top: 1px solid var(--bh-outline-variant);
}

.bh-oepnv-halt__knopf {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.8125rem 1rem;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

/* Kadence stylet jedes button bei :hover/:focus/:active mit seiner
   Button-Palette. Ohne alle vier Zustände wird der Fokuszustand dunkel und
   der Text unlesbar – genau das passierte auf der Startseite. */
.bh-oepnv-halt__knopf:hover,
.bh-oepnv-halt__knopf:focus,
.bh-oepnv-halt__knopf:focus-visible,
.bh-oepnv-halt__knopf:active {
	background: var(--bh-surface-container-low);
	color: var(--bh-on-surface);
	box-shadow: none;
}

.bh-oepnv-halt__knopf:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: -3px;
	border-radius: 0.5rem;
}

.bh-oepnv-halt__haupt {
	flex: 1 1 auto;
	min-width: 0;
}

.bh-oepnv-halt__name {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bh-on-surface);
}

.bh-oepnv-halt__naechste {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	color: var(--bh-outline);
	/* Abfahrtszeiten sollen untereinander stehen. */
	font-variant-numeric: tabular-nums;
}

.bh-oepnv-halt__pfeil {
	flex: 0 0 auto;
	font-size: 1.25rem;
	color: var(--bh-outline);
}

/* --- Einschränkungen als Liste ----------------------------------------- */

.bh-oepnv-einschr {
	margin: 1.25rem 0;
}

.bh-oepnv-einschr__titel {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.bh-oepnv-einschr__hinweis {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: var(--bh-on-surface-variant);
}

.bh-oepnv-punkte {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	overflow: hidden;
}

.bh-oepnv-punkt + .bh-oepnv-punkt {
	border-top: 1px solid var(--bh-outline-variant);
}

.bh-oepnv-punkt__link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 3.5rem;
	padding: 0.8125rem 1rem;
	color: var(--bh-on-surface);
	text-decoration: none;
}

.bh-oepnv-punkt__link:hover {
	background: var(--bh-surface-container-low);
}

.bh-oepnv-punkt__link:focus-visible {
	outline: 3px solid var(--bh-primary-container);
	outline-offset: -3px;
	border-radius: 0.5rem;
}

.bh-oepnv-punkt__haupt {
	flex: 1 1 auto;
	min-width: 0;
}

.bh-oepnv-punkt__titel {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
}

.bh-oepnv-punkt__kurz {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	color: var(--bh-outline);
}

/*
 * Die Ursache als kleines Textabzeichen. BEWUSST keine Ampelfarbe und keine
 * zwei Kartenfarben wie vorher: Rot/Gelb/Grün ist im Theme für Live-Status
 * reserviert, und „liegt an der Nordbrücke" ist eine Zuordnung, kein
 * Zustand. Unterschieden wird durch Kontur und Ton, nicht durch Alarm.
 */
.bh-oepnv-punkt__grund {
	flex: 0 0 auto;
	padding: 0.125rem 0.5rem;
	border-radius: var(--bh-radius-full);
	border: 1px solid var(--bh-outline-variant);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--bh-on-surface-variant);
}

.bh-oepnv-punkt__grund--nordbruecke {
	border-color: var(--bh-primary-container);
	color: var(--bh-primary-container);
}

.bh-oepnv-punkt__pfeil {
	flex: 0 0 auto;
	font-size: 1.125rem;
	color: var(--bh-outline);
}

/* Abgeschlossene Einschränkungen: erreichbar, aber sichtbar erledigt. */
.bh-oepnv-einschr__vorbei {
	margin-top: 0.75rem;
}

.bh-oepnv-punkte--vorbei {
	margin-top: 0.5rem;
}

.bh-oepnv-punkte--vorbei .bh-oepnv-punkt__titel {
	font-weight: 500;
}

.bh-oepnv-punkte--vorbei .bh-oepnv-punkt__link {
	min-height: 2.75rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* --- Abfahrtstafel im Sheet -------------------------------------------- */

.bh-oepnv-sheet-tafel {
	padding: 0 1.25rem;
}

.bh-oepnv-sheet-tafel .bh-oepnv-abfahrten__liste {
	margin: 0;
}

/* --- ÖPNV: Suche führt, kuratierte Halte darunter (06.09.2026) ---------- */

/*
 * Die Seiten-Variante der Haltestellensuche nutzt das Karten-Layout, steht
 * aber im Seitenfluss und nicht auf einer Karte über der Landkarte. Deshalb
 * derselbe Rahmen wie die übrigen Blöcke der überarbeiteten Seiten.
 */
.bh-halt-suche--seite {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	padding: 1rem;
	margin-bottom: 1rem;
	box-shadow: none;
}

.bh-halt-suche--seite .bh-halt-suche__titel {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}

.bh-halt-suche--seite .bh-halt-suche__untertitel {
	font-size: 0.875rem;
	color: var(--bh-on-surface-variant);
	margin: 0.125rem 0 0;
}

/* „Häufig gesucht" ist eine Unterüberschrift zur Suche, keine zweite
   Hauptüberschrift – entsprechend leiser gesetzt. */
.bh-oepnv-abfahrten__haeufig {
	margin: 0 0 0.25rem;
	font-size: 0.78125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bh-outline);
}

/* --- P&R: geschlossene Fläche (06.09.2026) ------------------------------ */

/*
 * Eine geschlossene Fläche darf nicht wie eine offene aussehen. Die Zeile
 * steht unter dem Namen und vor allem anderen; das Shuttle-Abzeichen entfällt
 * für die Dauer der Schließung (Template). Farbe: Fließtext-Rot als Text, keine
 * Farbfläche – es ist ein Zustand, aber die Ampel bleibt dem Live-Verkehr
 * vorbehalten; hier reicht das Wort „Geschlossen" mit einem Symbol.
 */
.bh-parkride-item__zu {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	margin: 0.25rem 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bh-on-surface-variant);
}

.bh-parkride-item__zu .material-symbols-outlined {
	flex: 0 0 auto;
	font-size: 1.125rem;
	color: var(--bh-accent-ink);
}

.bh-parkride-item--zu h2 a {
	color: var(--bh-on-surface-variant);
}

.bh-parkride-detail__zu {
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   AUSBLICK – „Was gilt am …?" (06.09.2026, privat bis zur Abnahme)
   ==========================================================================
   Gleiche Sprache wie Jetzt-Screen, /verbindung/, /oepnv/. Ein Farbsystem:
   Ampel nirgends – hier steht nichts Live. */

.bh-ausblick { display: flex; flex-direction: column; gap: 1rem; }

.bh-ausblick__titel {
	margin: 0.5rem 0 0;
	font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.18;
	text-wrap: balance;
}
.bh-ausblick__intro { margin: 0; font-size: 0.9375rem; color: var(--bh-on-surface-variant); }

.bh-ausblick__wahl {
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
	padding: 1rem;
}
.bh-ausblick__label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--bh-outline); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.bh-ausblick__feld { display: flex; gap: 0.5rem; }
.bh-ausblick__input {
	flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.75rem;
	font: inherit; font-size: 0.9375rem;
	border: 1px solid var(--bh-outline-variant); border-radius: var(--bh-radius-klein, 0.625rem);
	background: var(--bh-surface); color: var(--bh-on-surface);
}
.bh-ausblick__input:focus-visible { outline: 3px solid var(--bh-primary-container); outline-offset: 1px; border-color: var(--bh-primary-container); }
.bh-ausblick__btn {
	flex: 0 0 auto; min-height: 2.75rem; padding: 0.5rem 1.125rem;
	font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1;
	border: 0; border-radius: var(--bh-radius-full);
	background: var(--bh-primary-container); color: var(--bh-on-primary); cursor: pointer;
}
.bh-ausblick__btn:hover, .bh-ausblick__btn:focus, .bh-ausblick__btn:focus-visible, .bh-ausblick__btn:active {
	background: var(--bh-primary); color: var(--bh-on-primary); box-shadow: none;
}
.bh-ausblick__btn:focus-visible { outline: 3px solid var(--bh-primary-container); outline-offset: 2px; }
.bh-ausblick__schnell { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.bh-ausblick__schnell a {
	/* 2,75 rem: gemessen waren es 36 px – echte Bedienelemente, keine Textlinks. */
	display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.25rem 0.875rem;
	border: 1px solid var(--bh-outline-variant); border-radius: var(--bh-radius-full);
	font-size: 0.8125rem; font-weight: 600; color: var(--bh-on-surface-variant); text-decoration: none;
}
.bh-ausblick__schnell a:hover { border-color: var(--bh-outline); color: var(--bh-on-surface); }

.bh-ausblick__hinweis { margin: 0; font-size: 0.875rem; color: var(--bh-on-surface-variant); }
.bh-ausblick__hinweis a { color: var(--bh-primary-container); font-weight: 600; }

.bh-ausblick__leer {
	padding: 1.25rem 1rem; border: 1px dashed var(--bh-outline-variant); border-radius: var(--bh-radius-sm);
	font-size: 0.9375rem; color: var(--bh-on-surface-variant);
}
.bh-ausblick__leer p { margin: 0; }
.bh-ausblick__leer p + p { margin-top: 0.375rem; }
.bh-ausblick__leer strong { color: var(--bh-on-surface); }

.bh-ausblick__gruppe-titel {
	display: flex; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0 0.5rem;
	font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em;
}
.bh-ausblick__gruppe-titel .material-symbols-outlined { font-size: 1.25rem; color: var(--bh-primary-container); align-self: center; }
.bh-ausblick__gruppe-titel small { font-size: 0.8125rem; font-weight: 600; color: var(--bh-outline); }

.bh-ausblick__liste {
	margin: 0; padding: 0; list-style: none;
	background: var(--bh-surface-container-lowest);
	border: 1px solid var(--bh-outline-variant); border-radius: var(--bh-radius-sm); overflow: hidden;
}
.bh-ausblick__zeile + .bh-ausblick__zeile { border-top: 1px solid var(--bh-outline-variant); }
.bh-ausblick__knopf {
	display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.5rem;
	padding: 0.8125rem 1rem; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
button.bh-ausblick__knopf:hover, button.bh-ausblick__knopf:focus, button.bh-ausblick__knopf:focus-visible, button.bh-ausblick__knopf:active {
	background: var(--bh-surface-container-low); color: var(--bh-on-surface); box-shadow: none;
}
button.bh-ausblick__knopf:focus-visible { outline: 3px solid var(--bh-primary-container); outline-offset: -3px; border-radius: 0.5rem; }
.bh-ausblick__knopf--still { cursor: default; }
.bh-ausblick__haupt { flex: 1 1 auto; min-width: 0; }
.bh-ausblick__zeile-titel { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--bh-on-surface); }
.bh-ausblick__zeile-kurz {
	display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--bh-outline);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bh-ausblick__rechts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; }
.bh-ausblick__fenster { font-size: 0.8125rem; font-weight: 600; color: var(--bh-on-surface-variant); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-ausblick__spitze { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--bh-on-surface); }
.bh-ausblick__grund {
	padding: 0.125rem 0.5rem; border: 1px solid var(--bh-outline-variant); border-radius: var(--bh-radius-full);
	font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--bh-on-surface-variant); white-space: nowrap;
}
.bh-ausblick__grund--nordbruecke { border-color: var(--bh-primary-container); color: var(--bh-primary-container); }
.bh-ausblick__pfeil { flex: 0 0 auto; font-size: 1.25rem; color: var(--bh-outline); }

.bh-ausblick__erfahrung-hinweis { margin: 0 0 0.5rem; font-size: 0.84375rem; color: var(--bh-on-surface-variant); }
.bh-ausblick__mehr { margin: 0.5rem 0 0; font-size: 0.875rem; }
.bh-ausblick__mehr a { color: var(--bh-primary-container); font-weight: 600; }
.bh-ausblick__stand { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--bh-outline); }

.bh-ausblick-sheet__kurz { margin: 0; font-size: 1rem; font-weight: 600; }
.bh-ausblick-sheet__text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--bh-on-surface-variant); }

@media (min-width: 48rem) { .bh-ausblick__titel { font-size: 1.75rem; } }

/* --- Ausblick: Messungen als Stundenleiste + Karte mit Zeitschieber (06.09. abends) ---
   Ampel HIER erlaubt: Die Zellen sind Messwerte (Erfahrungswert je Stunde),
   dieselbe Schwelle wie die Live-Ampel. Grau/leer heißt „wissen wir nicht". */
.bh-ausblick__querungen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.875rem; }
.bh-ausblick__querung {
	background: var(--bh-surface-container-lowest); border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm); padding: 0.75rem 1rem 0.875rem;
}
.bh-ausblick__querung-kopf { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.bh-ausblick__richtung { font-weight: 500; color: var(--bh-on-surface-variant); }
.bh-ausblick__querung .bh-ausblick__zeile-kurz { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.bh-ausblick__querung .bh-ausblick__zeile-kurz strong { color: var(--bh-on-surface); font-variant-numeric: tabular-nums; }
.bh-ausblick__leiste { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.bh-ausblick__stunde {
	display: block; height: 1.75rem; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0.1875rem;
	background: var(--bh-surface-container); cursor: pointer; font-size: 0; line-height: 0;
	transition: transform 0.12s ease;
}
.bh-ausblick__stunde--gruen { background: #2e7d32; }
.bh-ausblick__stunde--gelb  { background: #a67c00; }
.bh-ausblick__stunde--rot   { background: #c62828; }
.bh-ausblick__stunde--wenig { background: repeating-linear-gradient(135deg, var(--bh-surface-container) 0 3px, var(--bh-outline-variant) 3px 5px); }
.bh-ausblick__stunde--leer  { background: var(--bh-surface-container-low); }
/* Kadence färbt jeden Button bei Hover/Focus/Active um – hier bleibt die Farbe der Messwert. */
button.bh-ausblick__stunde:hover, button.bh-ausblick__stunde:focus, button.bh-ausblick__stunde:active,
button.bh-ausblick__stunde--gruen:hover, button.bh-ausblick__stunde--gruen:focus, button.bh-ausblick__stunde--gruen:active { box-shadow: none; color: transparent; transform: scaleY(1.15); }
button.bh-ausblick__stunde--gruen:hover, button.bh-ausblick__stunde--gruen:focus, button.bh-ausblick__stunde--gruen:active { background: #2e7d32; }
button.bh-ausblick__stunde--gelb:hover,  button.bh-ausblick__stunde--gelb:focus,  button.bh-ausblick__stunde--gelb:active  { background: #a67c00; }
button.bh-ausblick__stunde--rot:hover,   button.bh-ausblick__stunde--rot:focus,   button.bh-ausblick__stunde--rot:active   { background: #c62828; }
button.bh-ausblick__stunde--leer:hover,  button.bh-ausblick__stunde--leer:focus,  button.bh-ausblick__stunde--leer:active  { background: var(--bh-surface-container-low); }
button.bh-ausblick__stunde--wenig:hover, button.bh-ausblick__stunde--wenig:focus, button.bh-ausblick__stunde--wenig:active { background: repeating-linear-gradient(135deg, var(--bh-surface-container) 0 3px, var(--bh-outline-variant) 3px 5px); }
.bh-ausblick__stunde[aria-pressed="true"] { outline: 2px solid var(--bh-on-surface); outline-offset: 1px; }
button.bh-ausblick__stunde:focus-visible { outline: 3px solid var(--bh-primary-container); outline-offset: 1px; }
.bh-ausblick__achse { display: flex; justify-content: space-between; margin: 0.375rem 1rem 0; font-size: 0.71875rem; color: var(--bh-outline); font-variant-numeric: tabular-nums; }
.bh-ausblick__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--bh-on-surface-variant); }
.bh-ausblick__lg { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 0.1875rem; margin-left: 0.5rem; }
.bh-ausblick__lg:first-child { margin-left: 0; }
.bh-ausblick__lg--gruen { background: #2e7d32; } .bh-ausblick__lg--gelb { background: #a67c00; } .bh-ausblick__lg--rot { background: #c62828; }
.bh-ausblick__lg--wenig { background: repeating-linear-gradient(135deg, var(--bh-surface-container) 0 3px, var(--bh-outline-variant) 3px 5px); }
.bh-ausblick__lg--leer { background: var(--bh-surface-container-low); border: 1px solid var(--bh-outline-variant); }
.bh-ausblick__lg--punkt { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* Zeitschieber („Regenradar") */
.bh-ausblick__radar {
	display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem;
	background: var(--bh-surface-container-lowest); border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm);
}
.bh-ausblick__play {
	flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
	background: var(--bh-primary-container); color: var(--bh-on-primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bh-ausblick__play .material-symbols-outlined { font-size: 1.5rem; }
button.bh-ausblick__play:hover, button.bh-ausblick__play:focus, button.bh-ausblick__play:focus-visible, button.bh-ausblick__play:active { background: var(--bh-primary); color: var(--bh-on-primary); box-shadow: none; }
button.bh-ausblick__play:focus-visible { outline: 3px solid var(--bh-primary-container); outline-offset: 2px; }
.bh-ausblick__radar-mitte { flex: 1 1 auto; min-width: 0; }
.bh-ausblick__radar-tag { display: block; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.bh-ausblick__radar-slider { display: block; width: 100%; margin: 0.375rem 0 0; accent-color: var(--bh-primary-container); height: 1.75rem; }
.bh-ausblick__radar-achse { display: flex; justify-content: space-between; font-size: 0.71875rem; color: var(--bh-outline); }
.bh-ausblick__radar-zahl { flex: 0 0 auto; max-width: 10rem; margin: 0; font-size: 0.8125rem; color: var(--bh-on-surface-variant); text-align: right; }
@media (max-width: 30rem) {
	.bh-ausblick__radar { flex-wrap: wrap; }
	.bh-ausblick__radar-zahl { flex-basis: 100%; max-width: none; text-align: left; }
}
.bh-ausblick__karte { height: max(24rem, calc(100dvh - 24rem)); margin: 0; border-radius: var(--bh-radius-sm); border: 1px solid var(--bh-outline-variant); box-shadow: none; }
@media (min-width: 48rem) { .bh-ausblick__karte { height: max(28rem, calc(100dvh - 24rem)); } }
.bh-ausblick__buehne .leaflet-bottom.leaflet-right { margin-bottom: 1.5rem; }
.bh-ausblick__buehne .leaflet-control-zoom a { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1.25rem; }
.bh-ausblick__legende--karte { margin-top: 0.625rem; }
.bh-ausblick__kartenblock .bh-ausblick__hinweis { margin-top: 0.5rem; }
.bh-ausblick__hinweis a { color: var(--bh-primary-container); font-weight: 600; }
/* Neu dazugekommen: Ring; fällt weg: verblasst, einen Schritt lang. */
.bh-ausblick-marker--neu span { box-shadow: 0 0 0 4px rgba(69, 39, 160, 0.35), 0 1px 3px rgba(0,0,0,0.4); animation: bh-ausblick-ring 1.1s ease-out 1; }
.bh-ausblick-marker--weg span { opacity: 0.3; }
@keyframes bh-ausblick-ring { from { box-shadow: 0 0 0 0 rgba(69, 39, 160, 0.6), 0 1px 3px rgba(0,0,0,0.4); } to { box-shadow: 0 0 0 10px rgba(69, 39, 160, 0), 0 1px 3px rgba(0,0,0,0.4); } }
@media (prefers-reduced-motion: reduce) { .bh-ausblick-marker--neu span { animation: none; } .bh-ausblick__stunde { transition: none; } }

/* Dritte Ursache in den ÖPNV-Einschränkungen (06.09.2026): Veranstaltung.
   Gleiche Kontur wie „unabhängig", damit es keine dritte Farbe wird. */
.bh-oepnv-punkt__grund--veranstaltung { border-color: var(--bh-outline); color: var(--bh-on-surface-variant); }

/* --- Pützchens Markt (06.09.2026) ---------------------------------------- */
.bh-markt { display: flex; flex-direction: column; gap: 1rem; }
.bh-markt__titel { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; text-wrap: balance; }
.bh-markt__intro { margin: 0; font-size: 0.9375rem; color: var(--bh-on-surface-variant); }
.bh-markt__vorbei { margin: 0; padding: 0.75rem 1rem; border: 1px dashed var(--bh-outline-variant); border-radius: var(--bh-radius-sm); font-size: 0.875rem; color: var(--bh-on-surface-variant); }
.bh-markt__block {
	background: var(--bh-surface-container-lowest); border: 1px solid var(--bh-outline-variant);
	border-radius: var(--bh-radius-sm); padding: 1rem;
}
.bh-markt__block h2 { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.bh-markt__block p { margin: 0 0 0.5rem; font-size: 0.9375rem; line-height: 1.5; }
.bh-markt__block p:last-child { margin-bottom: 0; }
/* Die Falle: eine Kontur mehr, keine Farbfläche – Rot bleibt dem Live-Verkehr. */
.bh-markt__block--warn { border-width: 2px; border-color: var(--bh-outline); }
.bh-markt__paare { margin: 0; }
.bh-markt__paare > div { display: flex; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid var(--bh-outline-variant); font-size: 0.9375rem; }
.bh-markt__paare > div:last-child { border-bottom: 0; }
.bh-markt__paare dt { flex: 0 0 7.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bh-markt__paare--zeiten dt { flex-basis: 5.5rem; }
.bh-markt__paare dd { margin: 0; flex: 1 1 auto; min-width: 0; color: var(--bh-on-surface-variant); }
.bh-markt__paare dd strong { color: var(--bh-on-surface); }
.bh-markt__liste { margin: 0; padding-left: 1.125rem; font-size: 0.9375rem; line-height: 1.5; }
.bh-markt__liste li + li { margin-top: 0.5rem; }
.bh-markt__quelle, .bh-markt__quelle-inline, .bh-markt__stand { font-size: 0.8125rem; color: var(--bh-outline); }
.bh-markt__quelle { margin: 0.75rem 0 0 !important; }
.bh-markt__stand { margin: 0; }
@media (min-width: 48rem) { .bh-markt__titel { font-size: 1.75rem; } }


/* BH-133 Ereignis-Auswertung (private Seite, Redaktion/IHK).
   Keine Ampelfarben – hier gibt es keinen Status, sondern einen Vergleich. */
.bh-ereignis__intro { font-size: 1.0625rem; line-height: 1.5; color: var(--bh-on-surface-variant); max-width: 44em; }
.bh-ereignis__block { margin-top: 2rem; }
.bh-ereignis__block h2 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.bh-ereignis__tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.bh-ereignis__tabelle th, .bh-ereignis__tabelle td { padding: 0.5rem 0.625rem; text-align: right; border-bottom: 1px solid var(--bh-outline-variant, #E5E1EB); }
.bh-ereignis__tabelle thead th { text-align: right; font-size: 0.8125rem; font-weight: 600; color: var(--bh-on-surface-variant); white-space: normal; }
.bh-ereignis__tabelle tbody th[scope="row"], .bh-ereignis__tabelle thead th:first-child { text-align: left; }
.bh-ereignis__diff { font-weight: 700; }
.bh-ereignis__methode { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--bh-outline-variant, #E5E1EB); font-size: 0.9375rem; color: var(--bh-on-surface-variant); max-width: 44em; }
.bh-ereignis__methode h2 { font-size: 1rem; color: var(--bh-on-surface); }
/* Sechs Zahlenspalten passen auf kein Handy. Statt sie unlesbar zu quetschen,
   darf die Tabelle waagerecht scrollen -- der Container ist fokussierbar, damit
   das auch per Tastatur geht. */
.bh-ereignis__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bh-ereignis__scroll:focus-visible { outline: 2px solid var(--bh-primary, #3F36A3); outline-offset: 2px; }
.bh-ereignis__tabelle { min-width: 34rem; }
@media (max-width: 40rem) {
  .bh-ereignis__tabelle { font-size: 0.8125rem; }
  .bh-ereignis__tabelle th, .bh-ereignis__tabelle td { padding: 0.4375rem 0.375rem; }
}


/* BH-142 Auswertungsseite (privat). Balken sind Einordnung, keine Messung --
   die Zahl steht immer daneben. Keine Ampelfarben, hier gibt es keinen Status. */
.bh-ausw__intro { font-size: 1.0625rem; line-height: 1.5; max-width: 46em; color: var(--bh-on-surface-variant); }
.bh-ausw__block { margin-top: 2.5rem; }
.bh-ausw__block h2 { font-size: 1.1875rem; margin-bottom: 0.375rem; }
.bh-ausw__hinweis { font-size: 0.875rem; line-height: 1.45; color: var(--bh-on-surface-variant); max-width: 46em; margin-bottom: 0.75rem; }
.bh-ausw__leer { font-size: 0.9375rem; color: var(--bh-on-surface-variant); }
.bh-ausw__basis { display: flex; flex-wrap: wrap; gap: 1rem; }
.bh-ausw__karte { flex: 1 1 18rem; border: 1px solid var(--bh-outline-variant, #E5E1EB); border-radius: 0.75rem; padding: 1rem; }
.bh-ausw__karte h3 { font-size: 0.9375rem; margin: 0 0 0.375rem; }
.bh-ausw__gross { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; color: var(--bh-primary, #3F36A3); }
.bh-ausw__klein { font-size: 0.875rem; margin: 0.25rem 0 0; color: var(--bh-on-surface-variant); }
.bh-ausw__quelle { font-size: 0.75rem; margin: 0.5rem 0 0; color: var(--bh-outline, #79747E); }
.bh-ausw__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bh-ausw__scroll:focus-visible { outline: 2px solid var(--bh-primary, #3F36A3); outline-offset: 2px; }
.bh-ausw__tabelle { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.bh-ausw__tabelle th, .bh-ausw__tabelle td { padding: 0.4375rem 0.5rem; border-bottom: 1px solid var(--bh-outline-variant, #E5E1EB); text-align: right; position: relative; }
.bh-ausw__tabelle thead th { font-size: 0.75rem; font-weight: 600; color: var(--bh-on-surface-variant); }
.bh-ausw__tabelle tbody th[scope="row"], .bh-ausw__tabelle thead th:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.bh-ausw__bar { position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.1875rem; height: 0.1875rem; border-radius: 1px; background: var(--bh-outline-variant, #E5E1EB); }
.bh-ausw__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--bh-primary, #3F36A3); border-radius: 1px; opacity: 0.55; }
.bh-ausw__zahl { position: relative; }
.bh-ausw__keine { color: var(--bh-outline, #79747E); }
.bh-ausw__n { color: var(--bh-on-surface-variant); font-size: 0.8125rem; }
.bh-ausw__teil { color: var(--bh-outline, #79747E); font-weight: 700; }
.bh-ausw__gang { list-style: none; margin: 0; padding: 0; max-width: 34em; }
.bh-ausw__gang li { display: grid; grid-template-columns: 2rem 1fr 4rem; align-items: center; gap: 0.5rem; padding: 0.0625rem 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.bh-ausw__gang-h { color: var(--bh-on-surface-variant); }
.bh-ausw__gang-bar { height: 0.625rem; border-radius: 2px; background: var(--bh-outline-variant, #E5E1EB); position: relative; }
.bh-ausw__gang-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--bh-primary, #3F36A3); border-radius: 2px; opacity: 0.65; }
.bh-ausw__gang-z { text-align: right; }
.bh-ausw__methode { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--bh-outline-variant, #E5E1EB); font-size: 0.9375rem; color: var(--bh-on-surface-variant); max-width: 46em; }
.bh-ausw__methode h2 { font-size: 1rem; color: var(--bh-on-surface); }
.bh-ausw__methode li { margin-bottom: 0.375rem; line-height: 1.45; }

/* BH-143: Wetterzeile in der Radtabelle. Abgesetzt, weil sie keine Messung der
   Zählstellen ist, sondern die Erklärung daneben. */
.bh-ausw__wetterzeile { background: var(--bh-surface-variant, #F3EFF7); }
.bh-ausw__wetterzeile th, .bh-ausw__wetterzeile td { font-size: 0.75rem; color: var(--bh-on-surface-variant); border-bottom: 2px solid var(--bh-outline-variant, #E5E1EB); }
.bh-ausw__temp { font-weight: 700; }
.bh-ausw__regen { display: block; }
.bh-ausw__trocken { display: block; opacity: 0.6; }

/* BH-146: Fähren-Betriebsstatus.
   Hier sind Ampelfarben AUSDRUECKLICH richtig – CLAUDE.md reserviert sie für
   Status-Anzeigen, und genau das ist dies. Nicht dekorativ, sondern die
   Aussage selbst. Farbe trägt die Information nie allein: Der Text daneben
   sagt dasselbe, sonst wäre es für Farbfehlsichtige verloren. */
.bh-faehr-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0.375rem 0; }
.bh-faehr-status strong { padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; }
.bh-faehr-status--faehrt strong { background: #E3F3E8; color: #1F7A4D; }
.bh-faehr-status--eingeschraenkt strong { background: #FDF2D9; color: #8A5A00; }
.bh-faehr-status--eingestellt strong { background: #FBE4E4; color: #B32D2E; }
.bh-faehr-status--unbekannt strong { background: var(--bh-surface-variant, #F3EFF7); color: var(--bh-on-surface-variant, #6E6B79); }
.bh-faehr-status__alter { font-size: 0.75rem; color: var(--bh-on-surface-variant, #6E6B79); }
.bh-faehr-status__alter--alt { color: #8A5A00; font-weight: 600; }