/* ==========================================================================
   XtraBus Sofortpreis (Variante 2a): Tokens und Komponenten der Variante

   Wird nach base.css geladen. Hauptfarbe Petrol, Seitenhintergrund Weiß,
   Wechselsektionen und Karten in #F2F2F2.
   ========================================================================== */

:root {
	--xb-page-bg: #fff;
	--xb-alt-bg: var(--xb-grau);
	--xb-card-bg: var(--xb-grau);
	--xb-band: var(--xb-petrol);
	--xb-h2: var(--xb-petrol);
	--xb-hero-sub: var(--xb-on-petrol);
	--xb-eyebrow: var(--xb-on-petrol-2);
	--xb-ekomi-bg: rgba(0, 38, 58, .35);
	--xb-chip-bg: rgba(0, 38, 58, .28);
	--xb-accent: var(--xb-petrol);
}

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

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

.xb-head--mb-24 { margin-bottom: 24px; }
.xb-head--mb-28 { margin-bottom: 28px; }
.xb-head--mb-32 { margin-bottom: 32px; }

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

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

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

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

.xb-hero__grid--aside {
	grid-template-columns: minmax(0, 1fr) 460px;
}

.xb-hero__main {
	display: flex;
	flex-direction: column;
}

.xb-hero__photo {
	margin-top: 32px;
}

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

/* Startseite: breitere Karte, das Foto füllt den Rest der linken Spalte */
.xb-hero--home .xb-hero__grid {
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: 48px;
	align-items: stretch;
}

.xb-hero--home .xb-hero__main {
	gap: 24px;
}

.xb-hero--home .xb-hero__eyebrow {
	margin: 0;
}

.xb-hero--home .xb-hero__title {
	font-size: 76px;
	line-height: 1;
}

.xb-hero--home .xb-hero__sub {
	max-width: 540px;
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
}

.xb-hero__fill {
	position: relative;
	flex: 1;
	min-height: 260px;
}

.xb-hero__fill .xb-photo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--xb-r-card);
	object-fit: cover;
}

/* --- Foto mit fester Höhe, Platzhalter ------------------------------------------ */
.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);
	color: var(--xb-text-muted);
	font: 500 14px system-ui, sans-serif;
}

/* --- Sofortpreis-Karte und andere schwebende Karten ------------------------------ */
.xb-calc,
.xb-float {
	padding: 28px;
	border-radius: var(--xb-r-card);
	background: #fff;
	box-shadow: var(--xb-shadow-float);
	color: var(--xb-navy);
}

.xb-calc,
.xb-float--col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.xb-float--gap-16 {
	gap: 16px;
}

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

.xb-calc__title,
.xb-float__title {
	font-size: 20px;
	font-weight: 600;
}

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

.xb-calc__price {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 18px 22px;
	border-radius: var(--xb-r-sm);
	background: var(--xb-tint);
}

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

.xb-calc__total {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.05;
}

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

.xb-calc__pp-value {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

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

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

/* Segment-Umschalter: Buttons zentrieren ihren Inhalt senkrecht. Das Design setzt den Text oben,
   auch wenn ein Eintrag umbricht und die anderen in der Höhe mitwachsen. */
.xb-seg__item {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

/* --- Formular-Ergänzungen --------------------------------------------------------- */
.xb-field {
	display: block;
}

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

/* Textfeld mit fester Höhe wie im Design (kein Ziehgriff) */
.xb-textarea {
	resize: none;
}

/* --- Weiße Karte (Buchung, Konto, Anmelden …) ------------------------------------- */
.xb-box {
	padding: 28px 32px;
	border-radius: var(--xb-r-card);
	background: #fff;
}

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

/* --- USP (2a): türkise Linie oben ------------------------------------------------- */
.xb-usp__line {
	height: 3px;
	margin-bottom: 16px;
	background: var(--xb-tuerkis);
}

.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);
}

/* --- Ablauf in drei Schritten (2a): Karten mit großer Ziffer ------------------------- */
.xb-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

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

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

.xb-steps__num {
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: var(--xb-petrol);
}

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

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

/* --- FAQ (2a): Karten mit Rand ---------------------------------------------------- */
.xb-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xb-faq__item {
	padding: 22px 26px;
	border: 1px solid var(--xb-line);
	border-radius: var(--xb-r-tile);
	background: #fff;
}

.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: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--xb-tint);
	color: var(--xb-petrol);
	font-size: 18px;
}

.xb-faq__item.is-open .xb-faq__icon {
	background: var(--xb-petrol);
	color: #fff;
}

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

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

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

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

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

.xb-product__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-product__badge span:nth-child(odd) {
	font-size: 12px;
	font-weight: 300;
}

.xb-product__badge span:nth-child(2) {
	font-size: 30px;
	font-weight: 700;
}

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

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

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

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

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

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

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

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

/* --- 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-grau);
}

.xb-bahn--alt .xb-bahn__card {
	background: #fff;
}

.xb-bahn .xb-bahn__card--band {
	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;
	font-weight: 300;
}

.xb-bahn__item--pro {
	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__icon--no {
	background: var(--xb-x-bg);
	color: var(--xb-rot);
	font-size: 11px;
}

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

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

.xb-bahn--alt .xb-bahn__note {
	background: #fff;
}

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

/* --- Kacheln (Foto, Text), Städtekarten ------------------------------------------------- */
.xb-ptile {
	position: relative;
	display: block;
	height: 300px;
	overflow: hidden;
	border-radius: var(--xb-r-card);
}

.xb-ptile,
.xb-ptile:hover,
.xb-ttile,
.xb-ttile:hover,
.xb-city,
.xb-city:hover,
.xb-chiplink,
.xb-chiplink:hover {
	text-decoration: none;
}

.xb-ptile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.xb-ptile__cap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 64px 24px 22px;
	background: linear-gradient(180deg, rgba(0, 38, 58, 0), rgba(0, 38, 58, .88));
	color: #fff;
	pointer-events: none;
}

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

.xb-ptile__text {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 300;
	color: var(--xb-on-photo);
}

.xb-ttile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 24px;
	border-radius: var(--xb-r-card);
	background: var(--xb-grau);
}

.xb-ttile--white {
	background: #fff;
}

.xb-ttile__title {
	display: block;
	font-size: 22px;
	font-weight: 600;
}

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

.xb-ttile--home .xb-ttile__text {
	line-height: 1.5;
}

.xb-ttile__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 500;
	color: var(--xb-petrol);
}

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

.xb-city {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	border-radius: var(--xb-r-tile);
	background: var(--xb-grau);
}

.xb-city__name {
	display: block;
	font-size: 20px;
	font-weight: 600;
}

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

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

/* --- CTA-Band, Chip-Links, Seitennavigation ----------------------------------------------- */
.xb-cta {
	padding: 88px 0 96px;
}

.xb-cta--home {
	padding-top: 0;
}

.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);
}

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

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

.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: var(--xb-tint);
	color: var(--xb-petrol);
	font-weight: 600;
}

/* --- Bewertungskarte ------------------------------------------------------------------------ */
.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--grey {
	background: var(--xb-grau);
}

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

.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);
	color: var(--xb-petrol);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* --- Busgrößen-Leiste ------------------------------------------------------------------------- */
.xb-slider {
	position: relative;
	padding-top: 48px;
}

.xb-slider--home {
	padding-top: 0;
}

.xb-slider__marker {
	position: absolute;
	top: 0;
	left: var(--pos);
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(-50%);
}

.xb-slider--home .xb-slider__marker {
	top: -46px;
}

.xb-slider__tag {
	padding: 7px 12px;
	border-radius: var(--xb-r-pill);
	background: var(--xb-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.xb-slider__stem {
	width: 2px;
	height: 16px;
	background: var(--xb-navy);
}

.xb-slider__bar {
	display: flex;
	gap: 4px;
	height: 64px;
}

.xb-slider__seg {
	flex: var(--w) 1 0px;
	border-radius: 6px;
	background: var(--xb-tint);
}

.xb-slider__seg:first-child {
	border-radius: 32px 6px 6px 32px;
}

.xb-slider__seg:last-child {
	border-radius: 6px 32px 32px 6px;
}

.xb-slider__seg.is-active {
	background: var(--xb-petrol);
}

.xb-slider__labels {
	display: flex;
	gap: 4px;
	margin-top: 20px;
}

.xb-slider__label {
	flex: var(--w) 1 0px;
	padding-right: 16px;
}

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

.xb-slider__name {
	margin-top: 4px;
	font-size: 20px;
	font-weight: 600;
}

.xb-slider__link {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--xb-petrol);
}

/* --- Zusammenfassung, Datenliste, Box „So geht es weiter“ ---------------------------------------- */
.xb-sum {
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: #fff;
	box-shadow: var(--xb-shadow-card);
}

.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-petrol);
}

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

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

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

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

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

.xb-sum__total-value {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
}

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

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

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

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

.xb-next {
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-petrol);
	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__item.is-highlight .xb-next__num {
	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;
}

/* --- Kopf der Buchungsstrecke (2a) --------------------------------------------------------------- */
.xb-bhdr {
	height: 84px;
	background: var(--xb-band);
	color: #fff;
}

.xb-bhdr__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.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__dot {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 13px;
}

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

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

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

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

/* --- Startseite ------------------------------------------------------------------------------------ */
.xb-uspbar {
	padding: 56px 0 88px;
}

.xb-uspbar__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.xb-uspbar__item {
	padding-top: 16px;
	border-top: 3px solid var(--xb-tuerkis);
}

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

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

.xb-notebar {
	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-notebar strong {
	font-weight: 600;
	color: var(--xb-tuerkis);
}

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

.xb-home-center {
	margin-bottom: 32px;
	text-align: center;
}

.xb-home-center p {
	margin-top: 12px;
	font-size: 17px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-home-lead {
	margin: 14px 0 72px;
	font-size: 17px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-home-steps {
	margin-top: 40px;
}

/* Die Startseite stammt aus einem früheren Entwurf: Überschrift der Karten mit normaler Zeilenhöhe */
.xb-home-steps .xb-steps__title {
	line-height: normal;
}

.xb-home-cities {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 56px;
}

.xb-h2--sm {
	font-size: 38px;
}

.xb-home-cities__text {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.55;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-home-cities__link {
	display: inline-block;
	margin-top: 16px;
	font-size: 16px;
	font-weight: 500;
	color: var(--xb-petrol);
}


.xb-cta__eyebrow {
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--xb-tuerkis);
}

.xb-cta--home .xb-cta__title {
	font-size: 34px;
}

.xb-cta--home .xb-cta__text {
	max-width: 620px;
	margin-top: 12px;
	line-height: normal;
}

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

/* Inhalt aus dem WordPress-Editor (generische Seiten) */
.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;
}

/* --- Buchungsstrecke (02 bis 05) ----------------------------------------------------------------------- */
/* Große Formular-Buttons. Die Referenz rendert sie höher als im README genannt, weil dort die Höhe (56, 58 bzw. 52 px)
   ohne border-box zum Innenabstand von 12 px oben und unten hinzukommt: 80 px, 82 px bzw. 76 px. Maßgeblich ist die Referenz. */
.xb-btn--tall {
	height: var(--h, 80px);
	padding: 0 20px;
	font-size: var(--fs, 16px);
}

.xb-btn--xl {
	height: 82px;
	padding: 0 20px;
	font-size: 17px;
}

.xb-label-up {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--xb-petrol);
}

.xb-booking {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 48px;
	align-items: start;
	padding-top: 48px;
}

.xb-booking--route {
	grid-template-columns: minmax(0, 1fr) 400px;
}

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

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

.xb-bk-title--offer {
	margin: 16px 0 20px;
	font-size: 52px;
	line-height: 1;
}

.xb-bk-title--data {
	margin-top: 16px;
	font-size: 44px;
}

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

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

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

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

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

.xb-bk-fields--gap-20 {
	gap: 20px;
}

.xb-bk-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 12px;
}

.xb-bk-narrow {
	max-width: 320px;
}

.xb-dashed {
	display: flex;
	align-items: center;
	height: 52px; /* 48 px Inhalt + 2 × 2 px Rand wie in der Referenz */
	padding: 0 16px;
	border: 2px dashed var(--xb-dashed);
	border-radius: var(--xb-r-field);
	color: var(--xb-text-muted);
	font-size: 15px;
	font-weight: 500;
	text-align: left;
}

.xb-bk-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

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

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

.xb-kombibox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 24px;
	border-radius: var(--xb-r-tile);
	background: var(--xb-gelb);
}

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

.xb-kombibox__text {
	margin-top: 4px;
	font-size: 15px;
	font-weight: 300;
}

/* Karte „Ihr Sofortpreis“ bzw. Preiskarte rechts */
.xb-aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: #fff;
	box-shadow: var(--xb-shadow-card);
}

.xb-aside--gap-20 {
	gap: 20px;
}

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

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

.xb-aside__price-block {
	margin-top: -12px;
}

.xb-aside__total {
	font-size: 60px;
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
}

.xb-aside__pp {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 300;
}

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

.xb-aside__bus {
	padding: 16px 18px;
	border-radius: var(--xb-r-sm);
	background: var(--xb-tint);
}

.xb-aside__bus-label {
	font-size: 13px;
	color: var(--xb-text-muted);
}

.xb-aside__bus-name {
	margin-top: 2px;
	font-size: 17px;
	font-weight: 600;
}

.xb-aside__bus-bar {
	display: flex;
	gap: 3px;
	height: 10px;
	margin-top: 12px;
}

.xb-aside__bus-bar span {
	flex: var(--w);
	border-radius: 3px;
	background: #fff;
}

.xb-aside__bus-bar span.is-active {
	background: var(--xb-petrol);
}

.xb-aside__bus-note {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

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

.xb-aside__hint {
	font-size: 14px;
	line-height: 1.55;
	font-weight: 300;
	color: var(--xb-text-muted);
}

/* Angebot: Chips, Bus-Auswahl, Extras */
.xb-bk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
}

.xb-bk-chips li {
	padding: 8px 16px;
	border: 1px solid var(--xb-line);
	border-radius: var(--xb-r-pill);
	background: #fff;
}

.xb-bk-h2 {
	margin: 44px 0 16px;
	font-size: 22px;
	font-weight: 600;
}

.xb-busrows,
.xb-extras {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xb-busrow {
	display: block;
}

.xb-busrow__box {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 24px;
	border: 2px solid #fff;
	border-radius: var(--xb-r-sm);
	background: #fff;
}

.xb-busrow input:checked + .xb-busrow__box {
	border-color: var(--xb-petrol);
}

.xb-busrow input:focus-visible + .xb-busrow__box {
	outline: 2px solid var(--xb-tuerkis);
	outline-offset: 2px;
}

.xb-busrow.is-disabled .xb-busrow__box {
	opacity: .5;
}

.xb-busrow__radio {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid var(--xb-switch-off);
	border-radius: 50%;
}

.xb-busrow input:checked + .xb-busrow__box .xb-busrow__radio {
	border-color: var(--xb-petrol);
}

.xb-busrow input:checked + .xb-busrow__box .xb-busrow__radio::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--xb-petrol);
}

.xb-busrow__main {
	flex: 1;
}

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

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

.xb-busrow__badge {
	padding: 4px 10px;
	border-radius: var(--xb-r-pill);
	background: var(--xb-tint);
	color: var(--xb-petrol);
	font-size: 12px;
	font-weight: 600;
}

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

.xb-busrow__none {
	font-size: 22px;
	font-weight: 700;
}

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

.xb-busrow__amount {
	display: block;
	font-size: 22px;
	font-weight: 700;
}

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

.xb-extra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 20px 24px;
	border-radius: var(--xb-r-sm);
	background: #fff;
}

.xb-extra--yellow {
	background: var(--xb-gelb);
}

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

.xb-extra__text {
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 300;
}

.xb-extra:not(.xb-extra--yellow) .xb-extra__text {
	color: var(--xb-text-muted);
}

/* Daten und Buchung: Formular */
.xb-box--form {
	padding: 32px;
}

.xb-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

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

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

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

/* Buchung abgeschlossen */
.xb-tick {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin-bottom: 28px;
	border-radius: 50%;
	background: var(--xb-tuerkis);
	color: var(--xb-navy);
	font-size: 34px;
	font-weight: 700;
}

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

.xb-hero__pill {
	padding: 10px 18px;
	border-radius: var(--xb-r-pill);
	background: var(--xb-chip-bg);
	font-size: 15px;
}

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

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

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

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

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

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

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

.xb-trip__title {
	margin-top: 14px;
	font-size: 30px;
	font-weight: 600;
}

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

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

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

/* --- Weitere Bausteine (Seiten 06 bis 20) --------------------------------------------------------------- */
.xb-float {
	position: relative;
}

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

.xb-float__badge span:nth-child(odd) {
	font-size: 11px;
	font-weight: 300;
}

.xb-float__badge span:nth-child(2) {
	font-size: 28px;
	font-weight: 700;
}

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

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

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

/* Linkliste in Spalten (Startseite, Städtereisen) */
.xb-linklist {
	display: grid;
	column-gap: 28px;
	align-content: start;
}

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

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

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

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

/* Städtereisen: Fotokarten „Beliebt bei Gruppen“ */
.xb-groupcard {
	display: block;
}

.xb-groupcard,
.xb-groupcard:hover,
.xb-example,
.xb-example:hover {
	text-decoration: none;
}

.xb-groupcard__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
}

.xb-groupcard__name {
	font-size: 22px;
	font-weight: 600;
}

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

/* Kombi-Termine */
.xb-kombi-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xb-kombi-row {
	display: grid;
	grid-template-columns: 1.1fr 1.3fr 1.5fr .8fr .8fr auto;
	gap: 16px;
	align-items: center;
	padding: 20px 24px;
	border-radius: var(--xb-r-tile);
	background: var(--xb-grau);
}

.xb-kombi-row__dest {
	font-size: 22px;
	font-weight: 600;
}

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

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

.xb-kombi-row__seats {
	font-size: 15px;
}

.xb-kombi-row__seats strong {
	font-weight: 600;
}

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

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

/* Städte-Seite: Fahrzeiten, Reiseverlauf, Kombi-Hinweis */
.xb-times {
	padding: 8px 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-grau);
}

.xb-times__row {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.2fr auto;
	gap: 16px;
	align-items: center;
	padding: 18px 0;
}

.xb-times__row + .xb-times__row {
	border-top: 1px solid var(--xb-line-b2);
}

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

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

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

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

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

.xb-plan__title {
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 600;
}

.xb-plan__row {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--xb-line);
	font-size: 15px;
}

.xb-plan__time {
	font-weight: 600;
	color: var(--xb-petrol);
}

.xb-plan__text {
	font-weight: 300;
}

.xb-promo {
	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-promo__brand {
	font-size: 14px;
	font-weight: 700;
}

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

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

/* Klimafreundlich reisen */
.xb-co2__sub {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

.xb-co2__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 20px;
}

.xb-co2__cell {
	padding: 18px;
	border-radius: var(--xb-r-sm);
	background: var(--xb-grau);
}

.xb-co2__cell--tint {
	background: var(--xb-tint);
}

.xb-co2__num {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
}

.xb-co2__label {
	margin-top: 6px;
	font-size: 14px;
}

.xb-bars {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 900px;
}

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

.xb-bars__name,
.xb-bars__value {
	font-size: 17px;
	font-weight: 600;
}

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

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

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

.xb-bars__row.is-bus .xb-bars__fill {
	background: var(--xb-tuerkis);
}

/* Busgrößen */
.xb-buscard {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 16px 16px 24px;
	border-radius: var(--xb-r-card);
	background: var(--xb-grau);
}

.xb-buscard__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 8px;
}

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

.xb-buscard__name {
	font-size: 26px;
	font-weight: 600;
}

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

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

.xb-buscard__actions {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

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

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

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

.xb-example {
	display: block;
	padding: 28px;
	border-radius: var(--xb-r-card);
	background: var(--xb-grau);
}

.xb-example__title {
	display: block;
	font-size: 22px;
	font-weight: 600;
}

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

.xb-example__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--xb-line-b2);
}

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

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

/* Anlass-Seite */
.xb-pricetiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

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

.xb-pricetile--petrol {
	background: var(--xb-petrol);
	color: #fff;
}

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

.xb-pricetile--petrol .xb-pricetile__label {
	color: var(--xb-footer-2);
}

.xb-pricetile__value {
	margin-top: 6px;
	font-size: 52px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.05;
}

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

.xb-pricetile--petrol .xb-pricetile__text {
	color: var(--xb-on-petrol);
}

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

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

.xb-twocol__hint {
	margin-top: 12px;
}

/* Veranstalter, Über uns, Hilfe */
.xb-b2b__row,
.xb-msg__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.xb-head__seal {
	width: 72px;
	height: 72px;
}

.xb-reviews-note {
	margin-top: 16px;
}

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

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

.xb-contact__grid 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;
}

.xb-info {
	padding: 14px 16px;
	border-radius: var(--xb-r-nav);
	background: var(--xb-grau);
}

.xb-info__label {
	font-size: 12px;
	color: var(--xb-text-muted);
}

.xb-info__value {
	margin-top: 2px;
	font-size: 16px;
	font-weight: 500;
}

.xb-faqpage {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

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

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

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

.xb-msg__row {
	gap: 16px;
}

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

.xb-login__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-grau);
}

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

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

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

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

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

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

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

.xb-login__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-nexttrip {
	padding: 32px;
	border-radius: var(--xb-r-card);
	background: var(--xb-grau);
}

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

.xb-nexttrip__body {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-top: 16px;
}

.xb-nexttrip__route {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.xb-nexttrip__meta {
	margin-top: 6px;
	font-size: 16px;
	font-weight: 300;
	color: var(--xb-text-muted);
}

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

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

.xb-row {
	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);
}

.xb-row__name,
.xb-row__price {
	font-size: 17px;
	font-weight: 600;
}

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

/* Rechtliches: Inhalt aus dem WordPress-Editor */
.xb-legal-layout {
	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);
	font-size: 18px;
	font-weight: 600;
}

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

/* Angebotsseite (03) stammt aus einem früheren Entwurf: etwas andere Farben im Kopf der Strecke */
.xb-bhdr--offer .xb-bhdr__step,
.xb-bhdr--offer .xb-bhdr__cancel {
	color: var(--xb-footer-2);
}

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

.xb-bhdr--offer .is-done .xb-bhdr__dot {
	background: rgba(255, 255, 255, .2);
}

.xb-bhdr--offer .xb-bhdr__line {
	background: rgba(255, 255, 255, .35);
}

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

/* ==========================================================================
   Responsive (Prototyp): Gestaltet ist nur Desktop mit 1280 px.
   Unter 1100 px werden mehrspaltige Raster zweispaltig, Layouts mit Seitenspalte einspaltig.
   Unter 760 px wird alles einspaltig. Darüber hinaus gibt es keine eigenen Mobile-Layouts.
   ========================================================================== */
@media (max-width: 1100px) {
	.xb-hero__grid--aside,
	.xb-hero--home .xb-hero__grid,
	.xb-booking,
	.xb-booking--route,
	.xb-booked,
	.xb-account,
	.xb-faqpage,
	.xb-legal-layout,
	.xb-home-cities {
		grid-template-columns: minmax(0, 1fr);
	}

	.xb-hero__grid {
		gap: 40px;
	}

	.xb-uspbar__grid,
	.xb-steps,
	.xb-pricetiles,
	.xb-linklist--4,
	.xb-linklist--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

@media (max-width: 759px) {
	.xb-hero--home .xb-hero__title {
		font-size: 44px;
	}

	.xb-hero__actions {
		flex-wrap: wrap;
	}

	.xb-uspbar,
	.xb-cta {
		padding-top: 48px;
		padding-bottom: 56px;
	}

	.xb-cta--home {
		padding-top: 0;
	}

	.xb-products,
	.xb-bahn,
	.xb-steps,
	.xb-uspbar__grid,
	.xb-pricetiles,
	.xb-linklist--4,
	.xb-linklist--5,
	.xb-login,
	.xb-contact,
	.xb-equip,
	.xb-twocol,
	.xb-form__row,
	.xb-form__row--zip,
	.xb-bk-row,
	.xb-calc__dates,
	.xb-b2b__row,
	.xb-msg__row,
	.xb-co2__grid,
	.xb-kombi-row,
	.xb-row {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.xb-bars__row {
		grid-template-columns: 110px minmax(0, 1fr) 72px;
		gap: 12px;
	}

	.xb-cta__box,
	.xb-promo,
	.xb-nexttrip__body,
	.xb-notebar {
		flex-direction: column;
		align-items: flex-start;
	}

	.xb-cta__box,
	.xb-promo,
	.xb-box,
	.xb-box--form,
	.xb-aside,
	.xb-sum,
	.xb-next,
	.xb-trip,
	.xb-nexttrip,
	.xb-login__card,
	.xb-login__aside {
		padding: 24px;
	}

	.xb-product {
		padding: 24px;
	}

	.xb-bk-switch,
	.xb-extra,
	.xb-kombibox {
		flex-wrap: wrap;
	}

	.xb-booked__actions,
	.xb-buscard__actions,
	.xb-nexttrip__actions {
		flex-wrap: wrap;
	}

	.xb-bk-title,
	.xb-bk-title--offer,
	.xb-bk-title--data {
		font-size: 34px;
	}

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

	.xb-head__title {
		flex-wrap: wrap;
	}

	.xb-slider__labels {
		flex-wrap: wrap;
		gap: 16px 4px;
	}

	.xb-slider__label {
		flex: 1 1 45%;
	}

	/* Kopf der Buchungsstrecke: Schritte in eigener Zeile */
	.xb-bhdr {
		height: auto;
		padding: 12px 0;
	}

	.xb-bhdr__in {
		flex-wrap: wrap;
		gap: 12px;
	}

	.xb-bhdr__steps {
		order: 3;
		justify-content: space-between;
		width: 100%;
		gap: 8px;
		font-size: 13px;
	}

	.xb-bhdr__line {
		width: 16px;
	}

	.xb-faqpage .xb-sidenav {
		flex-direction: row;
		flex-wrap: wrap;
	}
}