/* ==========================================================================
   XtraBus Strecke (Variante 2b): Tokens und Komponenten der Variante

   Wird nach base.css geladen. Hauptfarbe Navy, Seitenhintergrund #F2F2F2,
   Wechselsektionen und Karten in Weiß. LED-Schrift DotGothic16 nur für die
   Zielanzeige und LED-Preise.
   ========================================================================== */

:root {
	--xb-page-bg: var(--xb-grau);
	--xb-alt-bg: #fff;
	--xb-card-bg: #fff;
	--xb-band: var(--xb-navy);
	--xb-h2: var(--xb-navy);
	--xb-hero-sub: var(--xb-on-dark);
	--xb-eyebrow: var(--xb-on-dark-2);
	--xb-ekomi-bg: var(--xb-dark-pill);
	--xb-chip-bg: var(--xb-dark-pill);
	--xb-accent: var(--xb-navy);

	/* Einzelwerte der Variante */
	--xb-pause-on-dark: #8FB0B6;
	--xb-line-draft: #2C5A70;
	--xb-glow: 0 0 14px rgba(43, 213, 196, .55);
}

/* --- Seite, Sektionen und Raster: Modifier ----------------------------------- */
.xb-page--booking {
	padding-bottom: 88px;
	background: var(--xb-grau);
}

.xb-sec--pt-0 { padding-top: 0; }
.xb-sec--pt-96 { padding-top: 96px; }
.xb-sec--pb-0 { padding-bottom: 0; }
.xb-sec--pb-96 { padding-bottom: 96px; }
.xb-sec--pb-104 { padding-bottom: 104px; }

.xb-head--mb24 { margin-bottom: 24px; }
.xb-head--mb28 { margin-bottom: 28px; }
.xb-head--mb32 { margin-bottom: 32px; }
.xb-head--mb40 { margin-bottom: 40px; }

.xb-grid--g16 { gap: 16px; }
.xb-grid--g20 { gap: 20px; }
.xb-grid--g32 { gap: 32px; }

/* Text links, Überschrift rechts (Anlässe) */
.xb-split {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 64px;
}

.xb-split__text {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--xb-text-muted);
}

/* --- LED-Zielanzeige ------------------------------------------------------------- */
.xb-led {
	display: flex;
	align-items: stretch;
	gap: 12px;
	width: max-content;
	max-width: 100%;
	padding: 10px;
	border: 1px solid var(--xb-dark-line);
	border-radius: var(--xb-r-led);
	background: var(--xb-led-bg);
}

.xb-led__tag {
	display: grid;
	place-items: center;
	padding: 0 14px;
	border-radius: var(--xb-r-led-tag);
	background: var(--xb-tuerkis);
	color: var(--xb-navy);
	font-size: var(--led-xb, 20px);
	font-weight: 700;
}

.xb-led__text {
	padding: 8px 12px;
	font-family: var(--xb-font-led);
	font-size: var(--led-size, 34px);
	line-height: 1;
	letter-spacing: .08em;
	color: var(--xb-tuerkis);
	text-shadow: var(--xb-glow);
}

/* --- Hero (2b) -------------------------------------------------------------------- */
.xb-hero {
	padding: 32px 0 56px;
}

.xb-hero--crumbs {
	padding-top: 20px;
}

.xb-hero--home {
	padding-bottom: 64px;
}

.xb-hero__led {
	margin-bottom: 32px;
}

.xb-hero--home .xb-hero__led {
	margin-bottom: 36px;
}

.xb-hero__title--sm {
	font-size: 48px;
}

.xb-hero--home .xb-hero__title {
	max-width: 1040px;
	font-size: 68px;
	line-height: 1.02;
	text-wrap: wrap;
}

.xb-hero--home .xb-hero__sub {
	max-width: 660px;
}

.xb-hero__actions {
	display: flex;
	gap: 12px;
	margin-top: 36px;
}

/* --- Routenleiste und Ergebnisleiste ----------------------------------------------- */
.xb-routebar {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.2fr 1fr .6fr auto;
	gap: 10px;
	margin-top: 36px;
	padding: 12px;
	border-radius: var(--xb-r-tile);
	background: #fff;
	color: var(--xb-navy);
}

.xb-routebar__btn {
	display: flex;
	padding: 0 26px;
}

/* Filterleiste der Kombi-Termine: vier Felder statt fünf */
.xb-routebar--filter {
	grid-template-columns: 1fr 1fr 1fr .6fr auto;
}

.xb-result {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 12px;
	padding: 22px 28px;
	border: 1px solid var(--xb-dark-line);
	border-radius: var(--xb-r-tile);
	background: var(--xb-dark-panel);
}

.xb-result__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.xb-result__stats {
	display: flex;
	gap: 36px;
}

.xb-result__right {
	display: flex;
	align-items: center;
	gap: 24px;
}

.xb-result__price {
	text-align: right;
}

.xb-result__total {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.xb-result__pp {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 300;
	color: var(--xb-on-dark);
}

.xb-stat__value {
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
}

.xb-stat--lg .xb-stat__value {
	font-size: 30px;
}

.xb-stat__label {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 300;
	color: var(--xb-on-dark-2);
}

/* --- Zeitachse auf dunklem Grund (Ergebnisleiste, Buchung, Konto) ------------------- */
.xb-taxis {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 500;
}

.xb-taxis__label {
	white-space: nowrap;
}

.xb-taxis__line {
	display: flex;
	flex: 1;
	align-items: center;
}

.xb-taxis__start {
	flex: none;
	width: 14px;
	height: 14px;
	border: 3px solid var(--xb-tuerkis);
	border-radius: 50%;
}

.xb-taxis__seg {
	flex: var(--f) 1 0%;
	height: 4px;
	background: var(--xb-tuerkis);
	box-shadow: 0 0 10px rgba(43, 213, 196, .4);
}

.xb-taxis__seg--pause {
	background: repeating-linear-gradient(90deg, var(--xb-pause-dark) 0 6px, transparent 6px 10px);
	box-shadow: none;
}

.xb-taxis__end {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--xb-tuerkis);
}

/* --- Fahrplan-Vorschau im Hero der Startseite ---------------------------------------- */
.xb-preview {
	margin-top: 16px;
	padding: 32px 40px;
	border: 1px solid var(--xb-dark-line);
	border-radius: var(--xb-r-card);
	background: var(--xb-dark-panel);
}

.xb-preview__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.xb-preview__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--xb-on-dark-2);
}

.xb-preview__when {
	margin-top: 8px;
	font-size: 20px;
	font-weight: 500;
}

.xb-preview__stats {
	display: flex;
	gap: 40px;
}

.xb-pv {
	position: relative;
	height: 132px;
	margin-top: 44px;
}

.xb-pv__time {
	position: absolute;
	top: 0;
	font-size: 20px;
	font-weight: 600;
}

.xb-pv__time--start { left: 0; }
.xb-pv__time--mid { left: var(--at); transform: translateX(-50%); }
.xb-pv__time--end { right: 0; }

.xb-pv__note {
	position: absolute;
	top: 4px;
	left: var(--at);
	transform: translateX(-50%);
	font-size: 14px;
	font-weight: 300;
	color: var(--xb-on-dark-2);
}

.xb-pv__bar {
	position: absolute;
	top: 49px;
	left: var(--from);
	width: var(--w);
	height: 6px;
	border-radius: 3px;
	background: var(--xb-tuerkis);
	box-shadow: 0 0 12px rgba(43, 213, 196, .45);
}

.xb-pv__bar--pause {
	border-radius: 0;
	background: repeating-linear-gradient(90deg, var(--xb-pause-dark) 0 8px, transparent 8px 14px);
	box-shadow: none;
}

.xb-pv__dot {
	position: absolute;
	border-radius: 50%;
}

.xb-pv__dot--start {
	top: 41px;
	left: 0;
	width: 22px;
	height: 22px;
	border: 5px solid var(--xb-tuerkis);
	background: var(--xb-dark-panel);
}

.xb-pv__dot--pause {
	top: 43px;
	left: var(--at);
	width: 18px;
	height: 18px;
	border: 4px solid var(--xb-pause-on-dark);
	background: var(--xb-dark-panel);
	transform: translateX(-50%);
}

.xb-pv__dot--rest {
	top: 45px;
	left: var(--at);
	width: 14px;
	height: 14px;
	background: var(--xb-pause-on-dark);
	transform: translateX(-50%);
}

.xb-pv__dot--end {
	top: 41px;
	right: 0;
	width: 22px;
	height: 22px;
	background: var(--xb-tuerkis);
}

.xb-pv__label {
	position: absolute;
	top: 80px;
}

.xb-pv__label--start { left: 0; }
.xb-pv__label--pause { left: var(--at); transform: translateX(-50%); text-align: center; white-space: nowrap; }
.xb-pv__label--end { right: 0; text-align: right; }

.xb-pv__name {
	font-size: 18px;
	font-weight: 500;
}

.xb-pv__sub {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 300;
	color: var(--xb-on-dark-2);
}

.xb-pv__pause-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--xb-tuerkis);
}

.xb-preview__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--xb-dark-line);
}

.xb-preview__note {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--xb-on-dark);
}

.xb-preview__note strong {
	font-weight: 500;
	color: #fff;
}

.xb-preview__buy {
	display: flex;
	align-items: center;
	gap: 28px;
}

.xb-preview__price {
	text-align: right;
}

.xb-preview__total {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}

.xb-preview__pp {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 300;
	color: var(--xb-on-dark);
}

/* --- Routenkarten ---------------------------------------------------------------------- */
.xb-rcard,
.xb-rcard:hover,
.xb-ltile,
.xb-ltile:hover,
.xb-bcard,
.xb-bcard:hover,
.xb-stop,
.xb-stop:hover {
	text-decoration: none;
}

.xb-rcard {
	display: block;
	padding: 24px 24px 20px;
	border-radius: var(--xb-r-tile);
	background: #fff;
}

.xb-rcard__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
}

.xb-rcard__arrow {
	color: var(--xb-petrol);
}

.xb-rline {
	display: flex;
	align-items: center;
	margin: 22px 0 16px;
}

.xb-rline__start {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--xb-navy);
}

.xb-rline__seg {
	flex: var(--f) 1 0%;
	height: 4px;
	background: var(--xb-navy);
}

.xb-rline__seg--pause {
	background: repeating-linear-gradient(90deg, var(--xb-navy) 0 6px, transparent 6px 10px);
}

.xb-rline__end {
	flex: none;
	width: 16px;
	height: 16px;
	border: 3px solid var(--xb-navy);
	border-radius: 50%;
	background: var(--xb-tuerkis);
}

.xb-rcard__meta {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-rcard__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--xb-line);
}

.xb-rcard__total {
	font-size: 24px;
	font-weight: 700;
}

.xb-rcard__pp {
	font-size: 14px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

/* --- Produktkarten XtraClass ------------------------------------------------------------ */
.xb-products {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.xb-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 36px;
	border-radius: var(--xb-r-card);
	color: var(--xb-navy);
}

.xb-pcard--kombi {
	background: var(--xb-gelb);
}

.xb-pcard--individuell {
	background: var(--xb-tuerkis);
}

.xb-pcard__badge {
	position: absolute;
	top: -20px;
	right: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: var(--xb-rot);
	color: #fff;
	line-height: 1.05;
	transform: rotate(-8deg);
}

.xb-pcard__badge span {
	font-size: 12px;
	font-weight: 300;
}

.xb-pcard__badge .xb-pcard__pct {
	font-size: 30px;
	font-weight: 700;
}

.xb-pcard__brand {
	font-size: 14px;
	font-weight: 700;
}

.xb-pcard__title {
	font-size: 36px;
	font-weight: 300;
	letter-spacing: .04em;
	line-height: 1.1;
}

.xb-pcard__title span {
	font-weight: 700;
}

.xb-pcard__text {
	font-size: 17px;
	line-height: 1.55;
	font-weight: 300;
}

.xb-pcard__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
}

.xb-pcard__list li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.xb-pcard__list li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--xb-navy);
}

.xb-pcard__cta {
	align-self: flex-start;
	margin-top: auto;
}

.xb-strip {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	padding: 18px 24px;
	border-radius: var(--xb-r-sm);
	background: var(--xb-navy);
	color: #fff;
	font-size: 15px;
}

.xb-strip strong {
	font-weight: 600;
	color: var(--xb-tuerkis);
}

.xb-strip span {
	font-weight: 300;
}

/* --- Pausen und Ruhezeiten (Startseite) ------------------------------------------------- */
.xb-rest {
	padding: 0 0 96px;
}

.xb-rest__box {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 56px;
	padding: 56px;
	border-radius: var(--xb-r-card);
	background: var(--xb-navy);
	color: #fff;
}

.xb-rest__title {
	font-size: 38px;
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -.02em;
}

.xb-rest__text {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--xb-on-dark);
}

.xb-rest__rules {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.xb-rest__rule {
	padding-top: 24px;
	border-top: 2px solid var(--xb-tuerkis);
}

.xb-rest__num {
	font-family: var(--xb-font-led);
	font-size: 52px;
	line-height: 1;
	color: var(--xb-tuerkis);
	text-shadow: 0 0 14px rgba(43, 213, 196, .45);
}

.xb-rest__desc {
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.55;
	font-weight: 300;
	color: var(--xb-on-dark);
}

/* --- Haltestellen-Zeitstrahl (Anlässe) --------------------------------------------------- */
.xb-stops {
	position: relative;
}

.xb-stops::before {
	content: "";
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 10px;
	width: 4px;
	border-radius: 2px;
	background: var(--xb-navy);
}

.xb-stop {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 16px 0;
}

.xb-stop__dot {
	width: 24px;
	height: 24px;
	border: 4px solid var(--xb-navy);
	border-radius: 50%;
	background: var(--xb-grau);
}

.xb-stop--last .xb-stop__dot {
	background: var(--xb-tuerkis);
}

.xb-stop__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
}

.xb-stop__text {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-stop__arrow {
	font-size: 22px;
	color: var(--xb-petrol);
}

/* --- Buskarten ------------------------------------------------------------------------------ */
.xb-bcard {
	display: flex;
	flex-direction: column;
	padding: 28px 24px 22px;
	border-radius: var(--xb-r-tile);
	background: #fff;
}

.xb-bcard--gray {
	background: var(--xb-grau);
}

.xb-bcard__seats {
	font-size: 80px;
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.04em;
}

.xb-bcard__range {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--xb-text-muted);
}

.xb-bcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--xb-line);
}

.xb-bcard__name {
	font-size: 19px;
	font-weight: 600;
}

.xb-bcard__arrow {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--xb-tuerkis);
	color: var(--xb-navy);
}

/* --- Ablauf in Schritten: Linie mit Haltepunkten --------------------------------------------- */
.xb-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 1fr));
	gap: 32px;
}

.xb-steps::before {
	content: "";
	position: absolute;
	top: 11px;
	right: calc((100% - (var(--n) - 1) * 32px) / var(--n) - 13px);
	left: 13px;
	height: 4px;
	background: var(--xb-navy);
}

.xb-steps__item {
	position: relative;
}

.xb-steps__dot {
	display: block;
	width: 26px;
	height: 26px;
	border: 4px solid var(--xb-navy);
	border-radius: 50%;
	background: var(--xb-grau);
}

.xb-steps--alt .xb-steps__dot {
	background: #fff;
}

.xb-steps__item:first-child .xb-steps__dot {
	background: var(--xb-tuerkis);
}

.xb-steps__item:last-child .xb-steps__dot {
	background: var(--xb-navy);
}

.xb-steps__title {
	margin-top: 24px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 600;
}

.xb-steps__text {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-steps--home .xb-steps__title {
	line-height: normal;
}

/* --- Buttons: weitere Größen und Verhalten -------------------------------------------------- */
/* Große Buttons: In der Referenz kommt die Höhe zum Innenabstand dazu (content-box). Aus „56 px“ werden dort 80 px
   und aus „58 px“ 82 px; das README nennt 56 bis 58 px. Hier wie in der Referenz. */
.xb-btn--tall {
	box-sizing: content-box;
	height: 56px;
	font-size: 16px;
}

.xb-btn--xl {
	box-sizing: content-box;
	height: 58px;
	font-size: 17px;
}

.xb-btn--grow {
	flex: 1;
}

.xb-hero__tagrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
}

/* --- Buchungsstrecke: Kopf ------------------------------------------------------------------ */
.xb-bhdr {
	border-bottom: 1px solid var(--xb-dark-line);
	background: var(--xb-band);
	color: #fff;
}

.xb-bhdr__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--xb-max);
	height: 84px;
	margin: 0 auto;
	padding: 0 var(--xb-gutter);
}

.xb-bhdr--inset {
	background: none;
}

.xb-bhdr--inset .xb-bhdr__in {
	max-width: none;
	padding: 0;
}

.xb-bhdr__steps {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 500;
}

.xb-bhdr__line {
	width: 40px;
	height: 2px;
	background: rgba(255, 255, 255, .3);
}

.xb-bhdr__line.is-reached {
	background: var(--xb-tuerkis);
}

.xb-bhdr__step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--xb-eyebrow);
}

.xb-bhdr__step.is-current {
	color: #fff;
}

.xb-bhdr__num {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 13px;
}

.is-done .xb-bhdr__num {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

.is-current .xb-bhdr__num {
	background: var(--xb-tuerkis);
	color: var(--xb-navy);
	font-weight: 600;
}

.is-open .xb-bhdr__num {
	border: 2px solid rgba(255, 255, 255, .35);
}

.xb-bhdr__cancel {
	font-size: 15px;
	color: var(--xb-eyebrow);
}

/* Seite „Fahrplan und Preis“: etwas andere Farbdetails */
.xb-bhdr--draft .xb-bhdr__line {
	background: var(--xb-line-draft);
}

.xb-bhdr--draft .xb-bhdr__line.is-reached {
	background: var(--xb-tuerkis);
}

.xb-bhdr--draft .is-done .xb-bhdr__num {
	background: var(--xb-dark-line);
}

.xb-bhdr--draft .is-open .xb-bhdr__num {
	border-color: var(--xb-line-draft);
}

.xb-bhdr--draft .xb-bhdr__cancel {
	color: var(--xb-on-dark);
}

/* Navy-Bereich mit Zielanzeige und Kennzahlen (Schritt 2 und 3) */
.xb-bblock {
	padding-bottom: 32px;
	background: var(--xb-navy);
	color: #fff;
}

.xb-bblock--draft {
	padding-bottom: 36px;
}

.xb-bblock__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 32px;
}

.xb-bblock__stats {
	display: flex;
	gap: 36px;
}

/* --- Buchungsstrecke: Raster, Karten, Überschriften -------------------------------------------- */
.xb-bgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 40px;
	align-items: start;
	padding-top: 48px;
}

.xb-bgrid--g48 {
	gap: 48px;
}

.xb-bgrid__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.xb-bgrid__main .xb-dcard {
	margin-bottom: 16px;
}

.xb-bh1 {
	font-size: 48px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -.035em;
}

.xb-bh1--52 {
	font-size: 52px;
	line-height: 1;
}

.xb-bh1--44 {
	font-size: 44px;
}

.xb-bh1--after-link {
	margin-top: 16px;
}

.xb-blead {
	max-width: 640px;
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--xb-text-body);
}

.xb-backlink {
	font-size: 15px;
	font-weight: 500;
	color: var(--xb-petrol);
}

.xb-hasaccount {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 24px;
	font-size: 15px;
	font-weight: 300;
}

.xb-offer-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 24px;
}

.xb-box {
	padding: 28px 32px;
	border-radius: var(--xb-r-card);
	background: #fff;
}

.xb-box--p32 {
	padding: 32px;
}

.xb-box__title {
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 600;
}

.xb-box__stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.xb-box__narrow {
	max-width: 320px;
}

.xb-bstack {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 32px;
}

.xb-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.xb-stack--g20 {
	gap: 20px;
}

.xb-twocol {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 40px;
	align-items: start;
}

.xb-actions {
	display: flex;
	gap: 12px;
}

/* Streckeneingabe als Zeitstrahl */
.xb-leg {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: 18px;
}

.xb-leg__rail {
	position: relative;
	display: flex;
	justify-content: center;
}

.xb-leg__line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--xb-navy);
}

.xb-leg--first .xb-leg__line {
	top: 28px;
}

.xb-leg--last .xb-leg__line {
	bottom: auto;
	height: 28px;
}

.xb-leg__dot {
	position: relative;
	width: 18px;
	height: 18px;
	margin-top: 19px;
	border: 3px solid var(--xb-navy);
	border-radius: 50%;
	background: var(--xb-tuerkis);
}

.xb-leg__dot--end {
	background: var(--xb-navy);
}

.xb-leg__dot--add {
	border: 3px dashed var(--xb-pause);
	background: #fff;
}

.xb-leg__body {
	padding-bottom: 14px;
}

.xb-leg__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 10px;
}

.xb-leg__add {
	display: flex;
	align-items: center;
	height: 60px; /* 56 px Höhe plus 2 × 2 px Rand wie in der Referenz */
	padding: 0 18px;
	border: 2px dashed var(--xb-dashed);
	border-radius: var(--xb-r-nav);
	font-size: 15px;
	font-weight: 500;
	color: var(--xb-text-muted);
}

/* Navy-Panel „Fahrplan-Vorschau“ (Buchung 1) */
.xb-fpanel {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-navy);
	color: #fff;
}

.xb-fpanel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.xb-fpanel__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--xb-on-dark-2);
}

.xb-fpanel__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.xb-fpanel__times {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 0;
	border-top: 1px solid var(--xb-dark-line);
	border-bottom: 1px solid var(--xb-dark-line);
}

.xb-fpanel__day {
	font-size: 13px;
	color: var(--xb-on-dark-2);
}

.xb-fpanel__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.xb-fpanel__label {
	font-size: 15px;
	font-weight: 600;
}

.xb-fpanel__led {
	font-family: var(--xb-font-led);
	font-size: 44px;
	line-height: 1;
	color: var(--xb-tuerkis);
	text-shadow: 0 0 16px rgba(43, 213, 196, .45);
}

.xb-fpanel__pp {
	margin-top: -14px;
	font-size: 15px;
	font-weight: 300;
	text-align: right;
	color: var(--xb-on-dark);
}

/* Navy-Preiskarte „Fahrplan und Preis“ (Buchung 2) */
.xb-offer {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-navy);
	color: #fff;
}

.xb-offer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.xb-offer__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--xb-on-dark-2);
}

.xb-offer__total {
	margin-top: -6px;
}

.xb-offer__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	color: var(--xb-tuerkis);
	text-shadow: 0 0 16px rgba(43, 213, 196, .45);
}

.xb-offer__led {
	font-family: var(--xb-font-led);
	font-size: 64px;
	line-height: 1;
}

.xb-offer__eur {
	font-size: 40px;
	font-weight: 600;
}

.xb-offer__pp {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 300;
	color: var(--xb-on-dark);
}

.xb-offer__pp strong {
	font-weight: 600;
	color: #fff;
}

.xb-offer__note {
	font-size: 14px;
	line-height: 1.55;
	font-weight: 300;
	color: var(--xb-on-dark-2);
}

.xb-addtrip {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px; /* 52 px Höhe plus 2 × 2 px Rand wie in der Referenz */
	margin: 6px 0 24px;
	border: 2px dashed var(--xb-dashed);
	border-radius: var(--xb-r-pill);
	font-size: 15px;
	font-weight: 500;
	color: var(--xb-text-muted);
}

/* Datenliste auf dunklem Grund */
.xb-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px 16px;
	padding: 20px 0;
	border-top: 1px solid var(--xb-dark-line);
	border-bottom: 1px solid var(--xb-dark-line);
	font-size: 15px;
}

.xb-dl dt {
	font-weight: 300;
	color: var(--xb-on-dark-2);
}

.xb-dl dd {
	font-weight: 500;
	text-align: right;
}

/* Zusammenfassung (Navy-Karte mit LED-Preis) */
.xb-sum {
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-navy);
	color: #fff;
}

.xb-sum__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.xb-sum__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--xb-on-dark-2);
}

.xb-sum__title {
	margin-top: 14px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
}

.xb-sum__sub {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 300;
	color: var(--xb-on-dark-2);
}

.xb-sum .xb-dl {
	margin-top: 20px;
}

.xb-sum__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 20px;
}

.xb-sum__label {
	font-size: 15px;
	font-weight: 600;
}

.xb-sum__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--xb-tuerkis);
	text-shadow: 0 0 16px rgba(43, 213, 196, .45);
}

.xb-sum__led {
	font-family: var(--xb-font-led);
	font-size: 48px;
	line-height: 1;
}

.xb-sum__eur {
	font-size: 30px;
	font-weight: 600;
}

.xb-sum__pp {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 300;
	text-align: right;
	color: var(--xb-on-dark);
}

/* Box „So geht es weiter“ */
.xb-next {
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-dark-panel);
	color: #fff;
}

.xb-next__title {
	margin-bottom: 22px;
	font-size: 22px;
	font-weight: 600;
}

.xb-next__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.xb-next__item {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 14px;
	align-items: start;
}

.xb-next__num {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--xb-ring);
	border-radius: 50%;
	font-size: 14px;
}

.xb-next__num.is-hl {
	border: 0;
	background: var(--xb-tuerkis);
	color: var(--xb-navy);
	font-weight: 600;
}

.xb-next__text {
	padding-top: 3px;
	font-size: 15px;
	line-height: 1.55;
	font-weight: 300;
}

/* Formular (Buchung 3) */
.xb-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.xb-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.xb-form__grid--zip {
	grid-template-columns: 1fr 2fr;
}

.xb-form__sub {
	padding-top: 6px;
	font-size: 17px;
	font-weight: 600;
}

.xb-check a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Fahrplan: Tageskarte mit Zeitstrahl ------------------------------------------------------ */
.xb-dcard {
	padding: 28px 32px 8px;
	border-radius: var(--xb-r-card);
	background: #fff;
}

.xb-dcard--gray {
	background: var(--xb-grau);
}

.xb-dcard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.xb-dcard__title {
	font-size: 22px;
	line-height: 1.25;
	font-weight: 600;
}

.xb-dcard__meta {
	font-size: 14px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-tl {
	display: grid;
	grid-template-columns: 64px 22px minmax(0, 1fr);
	column-gap: 18px;
}

.xb-tl__time {
	font-size: 19px;
	line-height: 1.35;
	font-weight: 600;
}

/* Seite „Fahrplan und Preis“ (früherer Entwurf): Uhrzeit 20 px, Titel mit normaler Zeilenhöhe */
.xb-dcard--lg .xb-tl__time {
	font-size: 20px;
	line-height: 1.3;
}

.xb-dcard--lg .xb-dcard__title {
	line-height: normal;
}

.xb-tl--pause .xb-tl__time {
	color: var(--xb-text-muted);
}

.xb-tl__rail {
	position: relative;
	display: flex;
	justify-content: center;
}

.xb-tl__line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--xb-navy);
}

.xb-tl--first .xb-tl__line {
	top: 12px;
}

.xb-tl--last .xb-tl__line {
	bottom: auto;
	height: 12px;
}

.xb-tl__dot {
	position: relative;
	width: 18px;
	height: 18px;
	margin-top: 5px;
	border: 3px solid var(--xb-navy);
	border-radius: 50%;
	background: var(--xb-tuerkis);
}

.xb-tl--pause .xb-tl__dot {
	border-color: var(--xb-pause);
	background: #fff;
}

.xb-tl--end .xb-tl__dot {
	background: var(--xb-navy);
}

.xb-tl__body {
	padding-bottom: 22px;
}

.xb-tl__title {
	font-size: 17px;
	font-weight: 600;
}

.xb-tl__sub {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-tl__badge {
	margin-left: 6px;
	padding: 4px 8px;
	border-radius: var(--xb-r-pill);
	background: var(--xb-tint);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 2px;
	color: var(--xb-petrol);
}

/* --- USP mit Routenmotiv ------------------------------------------------------------------------- */
.xb-usp__route {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.xb-usp__dot {
	flex: none;
	width: 14px;
	height: 14px;
	border: 3px solid var(--xb-navy);
	border-radius: 50%;
	background: var(--xb-tuerkis);
}

.xb-usp__line {
	flex: 1;
	height: 3px;
	background: var(--xb-navy);
}

.xb-usp__title {
	font-size: 18px;
	font-weight: 600;
}

.xb-usp__text {
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--xb-text-muted);
}

/* --- FAQ: Zeilen ohne Karte --------------------------------------------------------------------------- */
.xb-faq {
	display: flex;
	flex-direction: column;
}

.xb-faq__item {
	padding: 22px 0;
	border-top: 1px solid var(--xb-line-b);
}

.xb-faq__item:first-child {
	border-top: 2px solid var(--xb-navy);
}

.xb-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	text-align: left;
}

.xb-faq__qtext {
	font-size: 18px;
	font-weight: 600;
}

.xb-faq__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--xb-navy);
	border-radius: 50%;
	font-size: 16px;
}

.xb-faq__item.is-open .xb-faq__icon {
	background: var(--xb-navy);
	color: var(--xb-tuerkis);
}

.xb-faq__a p {
	max-width: 760px;
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--xb-text-body);
}

/* --- Vergleich „XtraBus statt Bahn.“ --------------------------------------------------------------------- */
.xb-bahn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.xb-bahn__card {
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-card-bg);
}

.xb-bahn--alt .xb-bahn__card {
	background: var(--xb-grau);
}

.xb-bahn .xb-bahn__card--yes {
	background: var(--xb-band);
	color: #fff;
}

.xb-bahn__title {
	margin-bottom: 20px;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
}

.xb-bahn__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.xb-bahn__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.45;
}

.xb-bahn__item--no {
	font-weight: 300;
}

.xb-bahn__item--yes {
	font-weight: 500;
}

.xb-bahn__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-weight: 700;
}

.xb-bahn__item--no .xb-bahn__icon {
	background: var(--xb-x-bg);
	font-size: 11px;
	color: var(--xb-rot);
}

.xb-bahn__item--yes .xb-bahn__icon {
	background: var(--xb-tuerkis);
	font-size: 12px;
	color: var(--xb-navy);
}

.xb-bahn__note {
	grid-column: 1 / -1;
	padding: 18px 24px;
	border-radius: var(--xb-r-sm);
	background: var(--xb-card-bg);
	font-size: 15px;
	line-height: 1.5;
}

.xb-bahn--alt .xb-bahn__note {
	background: var(--xb-grau);
}

.xb-bahn__note strong {
	font-weight: 600;
}

.xb-bahn__note span {
	font-weight: 300;
}

/* --- LED-Kacheln (Städte) ---------------------------------------------------------------------------------- */
.xb-ltile {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 22px 18px;
	border-radius: var(--xb-r-tile);
	background: var(--xb-navy);
	color: #fff;
}

.xb-ltile__led {
	padding: 14px 16px;
	border: 1px solid var(--xb-dark-line);
	border-radius: var(--xb-r-field);
	background: var(--xb-led-bg);
	font-family: var(--xb-font-led);
	font-size: 28px;
	line-height: 1;
	letter-spacing: .08em;
	color: var(--xb-tuerkis);
	text-shadow: 0 0 12px rgba(43, 213, 196, .5);
}

.xb-ltile__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.xb-ltile__text {
	font-weight: 300;
	color: var(--xb-on-dark-2);
}

.xb-ltile__arrow {
	color: var(--xb-tuerkis);
}

/* --- Bewertungen --------------------------------------------------------------------------------------------- */
.xb-review {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 28px;
	border-radius: var(--xb-r-card);
	background: #fff;
	color: var(--xb-navy);
}

.xb-review--gray {
	background: var(--xb-grau);
}

.xb-review__stars {
	letter-spacing: 2px;
	color: var(--xb-star);
}

.xb-review__quote {
	margin-top: 14px;
	font-size: 18px;
	line-height: 1.55;
}

.xb-review__cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--xb-line);
	font-size: 14px;
	line-height: 1.45;
}

.xb-review__name {
	font-weight: 600;
}

.xb-review__role {
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-review__tag {
	padding: 6px 12px;
	border-radius: var(--xb-r-pill);
	background: var(--xb-tint);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--xb-petrol);
}

/* --- CTA-Band -------------------------------------------------------------------------------------------------- */
.xb-cta {
	padding: 0 0 96px;
}

.xb-cta--spaced {
	padding-top: 88px;
}

.xb-cta__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 44px 48px;
	border-radius: var(--xb-r-card);
	background: var(--xb-navy);
	color: #fff;
}

.xb-cta__title {
	font-size: 32px;
	line-height: 1.15;
	font-weight: 600;
}

.xb-cta__text {
	max-width: 640px;
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--xb-on-dark);
}

/* --- Chip-Links, Seitennavigation, Foto ------------------------------------------------------------------------ */
.xb-chiplinks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.xb-chiplinks a {
	padding: 10px 20px;
	border: 1px solid var(--xb-tuerkis);
	border-radius: var(--xb-r-pill);
	background: #fff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.xb-sidenav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.xb-sidenav a {
	padding: 12px 16px;
	border-radius: var(--xb-r-nav);
	font-size: 15px;
	font-weight: 400;
}

.xb-sidenav a.is-active {
	background: #fff;
	box-shadow: inset 3px 0 0 var(--xb-tuerkis);
	font-weight: 600;
	color: var(--xb-navy);
}

.xb-photo {
	position: relative;
	height: var(--h, 260px);
}

.xb-photo__img,
.xb-photo__ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--r, 24px);
}

.xb-photo__img {
	display: block;
	object-fit: cover;
}

.xb-photo__ph {
	display: grid;
	place-items: center;
	background: var(--xb-line);
	font: 500 14px system-ui, sans-serif;
	color: var(--xb-text-muted);
}

/* --- Weitere Raster- und Button-Modifier ------------------------------------------------------------------- */
.xb-stack--g12 {
	gap: 12px;
}

.xb-grid--g40 {
	gap: 40px;
}

.xb-grid--center {
	align-items: center;
}

.xb-btn--wide {
	padding: 16px 24px;
}

.xb-btn--send {
	align-self: flex-start;
	height: 56px;
	padding: 0 32px;
}

.xb-h2--36 {
	font-size: 36px;
}

.xb-review-hint {
	margin-top: 12px;
}

.xb-split__text--lead {
	margin-top: 0;
	font-size: 17px;
}

.xb-narrow {
	max-width: 760px;
}

.xb-sec__note {
	margin-top: 16px;
}

.xb-hero__hint {
	margin-top: 20px;
}

.xb-facts {
	display: flex;
	gap: 40px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--xb-dark-line);
}

.xb-facts__hint {
	align-self: center;
}

/* --- Kombi-Termine ------------------------------------------------------------------------------------------- */
.xb-krow {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 150px 120px auto;
	gap: 24px;
	align-items: center;
	padding: 18px 24px 18px 18px;
	border-radius: var(--xb-r-tile);
	background: #fff;
}

.xb-krow__led {
	padding: 12px 14px;
	border: 1px solid var(--xb-dark-line);
	border-radius: var(--xb-r-field);
	background: var(--xb-led-bg);
	font-family: var(--xb-font-led);
	font-size: 24px;
	line-height: 1;
	letter-spacing: .08em;
	color: var(--xb-tuerkis);
	text-shadow: 0 0 12px rgba(43, 213, 196, .5);
}

.xb-krow__period {
	font-size: 15px;
	font-weight: 500;
}

.xb-krow__from {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-krow__seats {
	font-size: 15px;
}

.xb-krow__seats strong {
	font-weight: 600;
}

.xb-krow__price {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.xb-krow__pp {
	font-size: 13px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

/* --- Städtereisen: Abfahrtsstädte ------------------------------------------------------------------------------ */
.xb-deplist {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 28px;
}

.xb-deplist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--xb-line-b);
	font-size: 17px;
	font-weight: 500;
}

.xb-deplist span {
	color: var(--xb-petrol);
}

/* --- Klimafreundlich reisen: CO₂-Balken --------------------------------------------------------------------------- */
.xb-co2 {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 900px;
}

.xb-co2__row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) 90px;
	gap: 20px;
	align-items: center;
}

.xb-co2__name,
.xb-co2__value {
	font-size: 17px;
	font-weight: 600;
}

.xb-co2__value {
	text-align: right;
}

.xb-co2__track {
	display: block;
	height: 28px;
	border-radius: var(--xb-r-pill);
	background: var(--xb-card-bg);
}

.xb-co2__bar {
	display: block;
	width: var(--w);
	height: 100%;
	border-radius: var(--xb-r-pill);
	background: var(--xb-pause);
}

.xb-co2__bar--bus {
	background: var(--xb-tuerkis);
}

/* --- Busgrößen ------------------------------------------------------------------------------------------------------ */
.xb-busrow,
.xb-busrow:hover {
	text-decoration: none;
}

.xb-busrow {
	display: grid;
	grid-template-columns: 150px 260px minmax(0, 1fr) 240px auto;
	gap: 28px;
	align-items: center;
	padding: 20px 28px;
	border-radius: var(--xb-r-tile);
	background: #fff;
}

.xb-busrow__seats {
	font-size: 72px;
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.04em;
}

.xb-busrow__name {
	display: block;
	font-size: 24px;
	font-weight: 600;
}

.xb-busrow__range {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-busrow__use {
	font-size: 15px;
	font-weight: 300;
	color: var(--xb-text-body);
}

.xb-busrow__cap {
	display: flex;
	gap: 3px;
	height: 10px;
}

.xb-busrow__cap span {
	flex: 1;
	border-radius: 3px;
	background: var(--xb-line-b2);
}

.xb-busrow__cap .is-on {
	background: var(--xb-navy);
}

.xb-busrow__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--xb-tuerkis);
	color: var(--xb-navy);
}

.xb-equip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.xb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.xb-tags li {
	padding: 12px 20px;
	border-radius: var(--xb-r-pill);
	background: var(--xb-grau);
	font-size: 16px;
	font-weight: 500;
}

/* --- Städte-Seite: Kombi-Hinweis -------------------------------------------------------------------------------------- */
.xb-kombibox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 32px 36px;
	border-radius: var(--xb-r-card);
	background: var(--xb-gelb);
}

.xb-kombibox__brand {
	font-size: 14px;
	font-weight: 700;
}

.xb-kombibox__title {
	margin-top: 4px;
	font-size: 26px;
	font-weight: 600;
}

.xb-kombibox__text {
	margin-top: 6px;
	font-size: 16px;
	font-weight: 300;
}

/* --- Anlass-Seite: Fahrplan neben Zusammenfassung ------------------------------------------------------------------------ */
.xb-sidecol {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 24px;
	align-items: start;
}

/* --- Für Veranstalter: Anfrage-Formular ------------------------------------------------------------------------------------ */
.xb-bform {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: var(--xb-r-card);
	background: #fff;
	color: var(--xb-navy);
}

.xb-bform__title {
	font-size: 20px;
	font-weight: 600;
}

.xb-bform__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* --- Über XtraBus ------------------------------------------------------------------------------------------------------------ */
.xb-ekomi-seal {
	display: block;
	width: 72px;
	height: 72px;
}

.xb-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.xb-contact__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 28px;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 300;
}

.xb-contact__cols strong {
	font-weight: 600;
}

.xb-member {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	padding: 20px 24px;
	border-radius: var(--xb-r-tile);
	background: var(--xb-navy);
	color: #fff;
}

.xb-member span {
	font-size: 13px;
	font-weight: 300;
}

.xb-member img {
	width: auto;
	height: 44px;
}

/* --- Hilfe und Kontakt ---------------------------------------------------------------------------------------------------------- */
.xb-helpgrid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.xb-helpgrid__groups {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.xb-helpgrid__title {
	margin-bottom: 16px;
}

.xb-message {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 760px;
}

/* --- Anmelden ------------------------------------------------------------------------------------------------------------------------ */
.xb-login {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	max-width: 1040px;
}

.xb-form--g18 {
	gap: 18px;
}

.xb-forgot {
	font-size: 14px;
	font-weight: 500;
	color: var(--xb-petrol);
}

.xb-signup {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-band);
	color: #fff;
}

.xb-signup__title {
	font-size: 24px;
	font-weight: 600;
}

.xb-signup__text {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--xb-on-dark);
}

.xb-signup__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xb-signup__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
}

.xb-signup__tick {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--xb-tuerkis);
	font-size: 12px;
	font-weight: 700;
	color: var(--xb-navy);
}

.xb-signup__cta {
	align-self: flex-start;
	margin-top: 8px;
}

/* --- Mein Konto ------------------------------------------------------------------------------------------------------------------------ */
.xb-account {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.xb-account__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.xb-account__title {
	margin-bottom: 12px;
}

.xb-trip {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-navy);
	color: #fff;
}

.xb-trip__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.xb-trip__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--xb-on-dark-2);
}

.xb-trip__stats {
	display: flex;
	gap: 40px;
}

.xb-trow {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) 1fr .8fr auto;
	gap: 20px;
	align-items: center;
	padding: 18px 0;
	border-top: 1px solid var(--xb-line-b);
}

.xb-trow__route,
.xb-trow__price {
	font-size: 17px;
	font-weight: 600;
}

.xb-trow__meta {
	font-size: 15px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

/* --- Rechtliches --------------------------------------------------------------------------------------------------------------------------- */
.xb-legalgrid {
	display: grid;
	grid-template-columns: 240px minmax(0, 760px);
	gap: 48px;
	align-items: start;
}

.xb-legal h2,
.xb-legal h3 {
	margin: 0 0 10px;
	padding-top: 24px;
	border-top: 1px solid var(--xb-line-b);
	font-size: 18px;
	font-weight: 600;
}

.xb-legal p {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
}

/* --- Generische Seiten (page.php, index.php): Fließtext aus dem Editor ------------------------------------------------------- */
.xb-prose {
	max-width: 760px;
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
}

.xb-prose > * + * {
	margin-top: 16px;
}

.xb-prose h2,
.xb-prose h3 {
	font-weight: 600;
	line-height: 1.25;
}

.xb-prose h2 {
	margin-top: 32px;
	font-size: 28px;
}

.xb-prose h3 {
	margin-top: 24px;
	font-size: 20px;
}

.xb-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--xb-petrol);
}

.xb-prose ul,
.xb-prose ol {
	padding-left: 24px;
	list-style: revert;
}

/* --- Responsive: unter 1100 px zweispaltig, unter 760 px einspaltig (keine eigenen Mobile-Layouts) ------------------------ */
@media (max-width: 1100px) {
	.xb-routebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.xb-routebar__btn {
		grid-column: 1 / -1;
		padding: 16px 26px;
	}

	.xb-bgrid,
	.xb-twocol,
	.xb-sidecol,
	.xb-helpgrid,
	.xb-account,
	.xb-legalgrid,
	.xb-split,
	.xb-rest__box {
		grid-template-columns: minmax(0, 1fr);
	}

	.xb-rest__box {
		padding: 40px;
	}

	.xb-krow,
	.xb-busrow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.xb-result__row,
	.xb-preview__top,
	.xb-preview__bottom,
	.xb-bblock__summary,
	.xb-cta__box,
	.xb-kombibox,
	.xb-trip__head {
		flex-wrap: wrap;
	}

	.xb-leg__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.xb-hero--home .xb-hero__title {
		font-size: 52px;
	}

	.xb-hero__title {
		font-size: 44px;
	}

	.xb-pv__label--pause {
		display: none;
	}
}

@media (max-width: 759px) {
	.xb-routebar,
	.xb-products,
	.xb-bahn,
	.xb-rest__rules,
	.xb-form__grid,
	.xb-form__grid--zip,
	.xb-bform__grid,
	.xb-login,
	.xb-contact,
	.xb-contact__cols,
	.xb-equip,
	.xb-deplist,
	.xb-fpanel__stats,
	.xb-krow,
	.xb-busrow,
	.xb-trow,
	.xb-co2__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.xb-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.xb-steps::before {
		display: none;
	}

	.xb-hero--home .xb-hero__title,
	.xb-hero__title {
		font-size: 34px;
	}

	.xb-led__text {
		font-size: min(var(--led-size, 34px), 6.5vw);
		overflow-wrap: anywhere;
	}

	.xb-led__tag {
		font-size: 14px;
	}

	.xb-result__right,
	.xb-preview__buy,
	.xb-result__stats,
	.xb-preview__stats,
	.xb-bblock__stats,
	.xb-trip__stats,
	.xb-facts,
	.xb-actions,
	.xb-hero__actions {
		flex-wrap: wrap;
		gap: 20px;
	}

	.xb-bhdr__in {
		flex-wrap: wrap;
		gap: 12px;
		height: auto;
		padding-block: 12px;
	}

	.xb-bhdr__steps {
		order: 3;
		flex-wrap: wrap;
		width: 100%;
	}

	.xb-pv {
		display: none;
	}

	.xb-cta__box,
	.xb-preview,
	.xb-rest__box,
	.xb-fpanel,
	.xb-offer,
	.xb-sum,
	.xb-next,
	.xb-box,
	.xb-bform,
	.xb-signup,
	.xb-trip {
		padding: 24px;
	}

	.xb-rest__title {
		font-size: 30px;
	}

	.xb-bh1,
	.xb-bh1--52,
	.xb-bh1--44 {
		font-size: 34px;
	}

	.xb-bcard__seats {
		font-size: 60px;
	}

	.xb-busrow__seats {
		font-size: 56px;
	}

	.xb-stop__title,
	.xb-rcard__title {
		font-size: 20px;
	}

	.xb-leg__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.xb-preview__total,
	.xb-offer__led {
		font-size: 36px;
	}
}