/* =========================================================================
   TravelLife – Theme-Styles
   Aufbau: 1 Tokens · 2 Basis · 3 Utilities · 4 Header · 5 Hero · 6 Suche
           7 Sektionen/Karten · 8 Zusatzleistungen · 9 CTA · 10 Footer
           11 Innenseiten · 12 Responsive
   Referenz-Layout: Desktop 1440px (Designvorlage template.png, 1024px breit,
   Faktor 1,40625).
   ========================================================================= */

/* --- 1 Tokens ----------------------------------------------------------- */
:root {
	--navy-900: #0b1f4e;
	--navy-800: #10295f;
	--navy-700: #143578;
	--blue-700: #0b4c97;
	--blue-600: #1668b8;
	--blue-500: #2f86d6;
	--pink-600: #d1003f;
	--pink-500: #ed0c4c;
	--pink-400: #fa3f70;
	--yellow-400: #fbb822;
	--ink: #0c1a3a;
	--muted: #5b6f94;
	--muted-soft: #9ba0a7;
	--line: #e3e9f2;
	--line-soft: #eef2f7;
	--panel: #ecf3f8;
	--tabstrip: #f8f9fb;
	--page: #fdfdfd;
	--white: #fff;

	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 26px;
	--radius-pill: 999px;

	--shadow-card: 0 10px 26px rgba(11, 31, 78, .07), 0 2px 6px rgba(11, 31, 78, .04);
	--shadow-card-hover: 0 20px 44px rgba(11, 31, 78, .14);
	--shadow-search: 0 28px 64px rgba(9, 30, 66, .17), 0 4px 14px rgba(9, 30, 66, .06);
	--shadow-btn: 0 8px 18px rgba(237, 12, 76, .22);

	--container: 1340px;
	--container-narrow: 1272px;
	--gutter: 24px;

	--font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-script: "Kaushan Script", "Brush Script MT", cursive;
	--font-hand: "Caveat", "Segoe Script", cursive;

	--header-h: 104px;
	--logo-h: 58px;
	--hero-h: 745px;
	--search-overlap: 127px;
}

/* --- 2 Basis ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; }

img {
	height: auto;
	display: block;
}

a {
	color: var(--blue-600);
	text-decoration: none;
}

a:hover { color: var(--navy-800); }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 800;
	line-height: 1.15;
	color: var(--navy-900);
	letter-spacing: -.015em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

:where(a, button, input, [tabindex]):focus-visible {
	outline: 3px solid var(--blue-500);
	outline-offset: 3px;
	border-radius: 6px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 999;
	background: var(--white);
	color: var(--navy-900);
	padding: 12px 20px;
	border-radius: var(--radius-sm);
	transition: top .2s;
}
.skip-link:focus { top: 16px; width: auto; height: auto; clip: auto; clip-path: none; }

/* --- 3 Utilities -------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--text { max-width: 820px; }

.kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .48em;
	text-transform: uppercase;
	color: var(--muted-soft);
}

.kicker--light {
	color: rgba(255, 255, 255, .94);
	font-size: 14px;
	letter-spacing: .34em;
	text-shadow: 0 1px 10px rgba(4, 30, 60, .35);
}

.script {
	font-family: var(--font-script);
	font-weight: 400;
	letter-spacing: 0;
}

.script--accent {
	color: var(--yellow-400);
	position: relative;
	display: inline-block;
	padding-inline: .06em;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: 0;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	padding: 0 30px;
	height: 65px;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
	white-space: nowrap;
}

.btn--primary {
	background: var(--pink-500);
	color: var(--white);
	box-shadow: var(--shadow-btn);
}
.btn--primary:hover {
	background: var(--pink-600);
	color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(237, 12, 76, .4);
}

.btn--white {
	background: var(--white);
	color: var(--navy-900);
	box-shadow: 0 14px 34px rgba(10, 24, 50, .26);
}
.btn--white:hover { color: var(--navy-900); transform: translateY(-2px); }

.btn--ghost {
	background: transparent;
	color: var(--white);
	border: 1.5px solid rgba(255, 255, 255, .72);
	height: 46px;
	font-size: 15px;
	font-weight: 600;
	padding: 0 22px;
	gap: 9px;
}
.btn--ghost:hover {
	background: rgba(255, 255, 255, .16);
	color: var(--white);
	border-color: var(--white);
}

.circle-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--blue-700);
	color: var(--white);
	transition: background-color .18s ease, transform .18s ease;
}

/* --- 4 Header ----------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 30;
	background: var(--navy-800);
}

.site-header--overlay {
	position: absolute;
	inset: 0 0 auto;
	background: transparent;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: var(--header-h);
}

.brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.brand__link {
	display: inline-flex;
	align-items: center;
	color: var(--white);
	line-height: 0;          /* kein zusätzlicher Zeilenraum unter dem Bild */
	border-radius: 8px;
}

.brand__picture { display: inline-flex; }

/* Logos immer proportional – nie gestaucht oder verzerrt. */
.brand__logo {
	display: block;
	width: auto;
	height: var(--logo-h);
	max-width: 100%;
	object-fit: contain;
	/* Die PNGs sind transparent: kein Hintergrund, keine Kante. */
	background: none;
}

.brand__link:hover .brand__logo { opacity: .92; }
.brand__link:focus-visible { outline-offset: 5px; }

.brand__logo--full {
	height: auto;
	width: 100%;
	max-width: 260px;
}

.brand__link--full { display: inline-block; line-height: 0; }

.nav { margin-inline-start: 18px; }

.nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav__list > li > a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-size: 15.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .96);
	text-shadow: 0 1px 8px rgba(4, 30, 60, .28);
}

.nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.nav__list > li > a:hover { color: var(--white); }
.nav__list > li > a:hover::after { transform: scaleX(1); }

.nav__list .sub-menu {
	position: absolute;
	min-width: 220px;
	margin-top: 8px;
	padding: 10px;
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-hover);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: .18s ease;
	z-index: 5;
}
.nav__list > li { position: relative; }
.nav__list > li:hover .sub-menu,
.nav__list > li:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav__list .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 15px;
	color: var(--navy-800);
}
.nav__list .sub-menu a:hover { background: var(--line-soft); }

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-inline-start: auto;
}

.header-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--white);
	min-height: 44px;
	padding: 0 2px;
}
.header-action:hover { color: rgba(255, 255, 255, .8); }
.header-action__count { font-size: 15px; font-weight: 600; }
.header-action--account .icon { stroke-width: 1.9; }

.header-cta .icon { opacity: .95; }

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, .14);
	color: var(--white);
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.mobile-nav {
	display: none;
	padding: 8px var(--gutter) 26px;
	background: var(--navy-800);
}
.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list a {
	display: block;
	padding: 15px 4px;
	font-size: 18px;
	font-weight: 600;
	color: var(--white);
	border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.mobile-nav__cta { margin-top: 20px; width: 100%; }
.mobile-nav .sub-menu a { font-size: 16px; font-weight: 500; padding-left: 18px; opacity: .85; }

/* --- 5 Hero ------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: var(--hero-h);
	overflow: hidden;
	background: var(--navy-800);
	border-radius: 0 0 50% 50% / 0 0 34px 34px;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media img {
	/* Bildausschnitt wie in der Vorlage: Meer links, Ort rechts.
	   Das überbreite Bild wird vom Hero rechts beschnitten. */
	width: 158%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	filter: saturate(1.12) contrast(1.02);
}

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(98deg,
			rgba(3, 56, 108, .93) 0%,
			rgba(4, 68, 126, .90) 18%,
			rgba(7, 86, 152, .78) 32%,
			rgba(10, 100, 170, .56) 44%,
			rgba(13, 110, 182, .34) 56%,
			rgba(16, 116, 190, .16) 68%,
			rgba(16, 116, 190, .06) 80%),
		linear-gradient(180deg, rgba(2, 38, 80, .62) 0%, rgba(2, 38, 80, .26) 18%, rgba(2, 38, 80, .04) 34%, rgba(2, 38, 80, 0) 46%),
		linear-gradient(0deg, rgba(3, 50, 100, .34) 0%, rgba(3, 50, 100, 0) 26%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 168px;
	padding-bottom: 188px;
	min-height: var(--hero-h);
}

.hero__content { max-width: 900px; }

.hero__title {
	margin: 10px 0 0;
	color: var(--white);
	font-size: 110px;
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.028em;
	text-shadow: 0 3px 24px rgba(3, 30, 62, .34);
}

.hero__title-line { display: block; }

.hero__title-line--mixed {
	display: flex;
	align-items: baseline;
	gap: .18em;
	flex-wrap: wrap;
}

.hero__title .script--accent {
	font-size: 1.14em;
	line-height: .79;
	letter-spacing: -.005em;
	margin-inline-start: .04em;
	text-shadow: 0 3px 20px rgba(3, 30, 62, .3);
}

.hero__text {
	margin: 28px 0 0;
	/* Breite so gewählt, dass der Umbruch der Vorlage entsteht:
	   Zeile 1 endet nach „Flughafen-“. */
	max-width: 800px;
	font-size: 26px;
	line-height: 1.32;
	font-weight: 400;
	color: rgba(255, 255, 255, .96);
	text-shadow: 0 1px 14px rgba(3, 30, 62, .38);
}

.trust {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	margin-top: 34px;
	flex-wrap: wrap;
}

.trust__item {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--white);
}

.trust__icon {
	flex: 0 0 auto;
	stroke-width: 1.5;
	filter: drop-shadow(0 1px 8px rgba(3, 30, 62, .35));
}

.trust__text {
	display: flex;
	flex-direction: column;
	font-size: 15.5px;
	line-height: 1.32;
	font-weight: 500;
	text-shadow: 0 1px 10px rgba(3, 30, 62, .35);
}

/* Handschrift-Notiz im Hero */
.hero__note {
	position: absolute;
	top: 140px;
	right: 268px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--font-hand);
	font-size: 33px;
	line-height: 1.12;
	font-weight: 500;
	color: var(--white);
	transform: rotate(-7deg);
	text-shadow: 0 2px 14px rgba(3, 30, 62, .35);
	pointer-events: none;
}

.hero__note-line { display: block; white-space: nowrap; }
.hero__note-line:nth-child(2) { margin-inline-start: 22px; }
.hero__note-line:nth-child(3) { margin-inline-start: 44px; }

.hero__note-line--underline { position: relative; }
.hero__note-line--underline::after {
	content: "";
	position: absolute;
	left: 8%; right: 6%;
	bottom: .12em;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: rotate(-1deg);
}

.hero__note-heart {
	position: absolute;
	right: -46px;
	bottom: 16px;
	font-size: 30px;
	line-height: 1;
	transform: rotate(6deg);
}

/* Runder Störer oben rechts */
.hero__badge {
	position: absolute;
	top: 118px;
	right: -34px;
	width: 178px;
	height: 178px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--pink-500);
	color: var(--white);
	border-radius: 49% 51% 48% 52% / 52% 48% 52% 48%;
	font-family: var(--font-hand);
	font-size: 27px;
	font-weight: 700;
	line-height: 1.04;
	text-transform: uppercase;
	text-align: center;
	transform: rotate(-9deg);
	box-shadow: 0 14px 34px rgba(190, 6, 58, .34);
}

.hero__badge::before {
	content: "";
	position: absolute;
	inset: -9px;
	border: 5px solid var(--pink-500);
	border-radius: 52% 48% 53% 47% / 47% 53% 47% 53%;
	opacity: .5;
	transform: rotate(9deg);
}

.hero__badge span { position: relative; }
.hero__badge span:nth-child(3) { font-size: 1.12em; }

.hero__badge-smile {
	display: block;
	margin-top: 7px;
	color: var(--white);
}
.hero__badge-smile svg { width: 38px; height: 22px; }

/* --- 6 Reisesuche ------------------------------------------------------- */
.searchbox-wrap {
	position: relative;
	z-index: 20;
	margin-top: calc(var(--search-overlap) * -1);
}

.searchbox {
	background: var(--white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-search);
	overflow: hidden;
}

.searchbox__tabs {
	display: flex;
	background: var(--tabstrip);
	border-bottom: 1px solid var(--line-soft);
}

.searchtab {
	position: relative;
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 69px;
	padding: 0 24px;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .16s ease, color .16s ease;
}

.searchtab + .searchtab::before {
	content: "";
	position: absolute;
	left: 0; top: 18px; bottom: 18px;
	width: 1px;
	background: var(--line);
}

.searchtab__icon { flex: 0 0 auto; stroke-width: 1.85; }

.searchtab:hover { background: rgba(255, 255, 255, .6); }

.searchtab.is-active {
	background: var(--white);
	color: var(--blue-700);
	font-weight: 700;
}
.searchtab.is-active::after {
	content: "";
	position: absolute;
	left: 22px; right: 22px; bottom: 0;
	height: 4px;
	border-radius: 4px 4px 0 0;
	background: var(--blue-700);
}
.searchtab.is-active + .searchtab::before,
.searchtab.is-active::before { opacity: 0; }

.searchpanel { padding: 20px 28px 17px 20px; }
.searchpanel[hidden] { display: none; }

.searchpanel__fields {
	display: grid;
	grid-template-columns: 328fr 357fr 240fr auto;
	align-items: stretch;
	gap: 0;
}

.field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 80px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-inline-end: 0;
	background: var(--white);
}

.field:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }

.searchpanel__fields .field:nth-last-child(2) {
	border-inline-end: 1px solid var(--line);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.searchpanel__fields .field:first-child:nth-last-child(2) {
	border-radius: var(--radius-md);
}

.field__icon {
	flex: 0 0 auto;
	color: var(--ink);
	stroke-width: 1.85;
}

.field__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}

.field__label {
	font-size: 16px;
	line-height: 1.2;
	color: #4f6074;
	cursor: pointer;
}

.field__input {
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	font-family: inherit;
	font-size: 17.5px;
	color: var(--ink);
	line-height: 1.35;
}
.field__input::placeholder { color: #66768c; opacity: 1; }
.field__input:focus { outline: none; }
.field:focus-within { border-color: var(--blue-500); z-index: 2; }

.field__input--value {
	font-size: 17px;
	font-weight: 600;
}
.field__input--value::placeholder { color: var(--ink); font-weight: 600; }

.searchpanel__submit {
	margin-inline-start: 8px;
	align-self: center;
	min-width: 285px;
	height: 65px;
	font-size: 18px;
}
.searchpanel__submit .icon { stroke-width: 2; }

/* --- 7 Sektionen und Karten -------------------------------------------- */
.section { position: relative; }

.section--destinations { padding: 54px 0 0; }

.section__head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 24px;
	margin-bottom: 26px;
}

.section__head-main {
	grid-column: 2;
	text-align: center;
}

.section__head .section__link {
	grid-column: 3;
	justify-self: end;
	margin-bottom: 6px;
}

.section__head--stacked {
	display: block;
	text-align: left;
	margin-bottom: 34px;
}

.section__title {
	margin: 9px 0 0;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.022em;
	color: var(--navy-900);
}

.section__title .script--accent {
	font-size: 1.2em;
	line-height: .9;
	margin-inline-start: .08em;
	transform: translateY(-.04em);
}

.section__title--center { text-align: center; }

.section__lead {
	margin-top: 14px;
	font-size: 18px;
	color: var(--muted);
}

.section__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 600;
	color: var(--blue-600);
	white-space: nowrap;
}
.section__link:hover { color: var(--navy-800); }
.section__link .icon { transition: transform .18s ease; }
.section__link:hover .icon { transform: translateX(4px); }

.card-grid {
	display: grid;
	gap: 11px;
}

.card-grid--destinations { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card-grid--services { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card-grid--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.card {
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}

.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

.card__media {
	display: block;
	overflow: hidden;
	background: var(--line-soft);
}

.card__img,
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.card:hover .card__img { transform: scale(1.045); }

.card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 14px;
}

.card__text { display: block; }

.card__title {
	display: block;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.018em;
	color: var(--navy-900);
}

.card__subtitle {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.35;
	color: var(--muted);
}

.card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.card--destination .card__media { aspect-ratio: 259 / 252; }
.card--destination .card__body { padding: 9px 16px 17px; gap: 12px; }

.price {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
}

.price__prefix {
	font-size: 15px;
	font-weight: 400;
	color: var(--muted);
}

.price__value {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--navy-900);
}

.price--large .price__value { font-size: 32px; }

.card:hover .circle-btn { background: var(--blue-600); transform: scale(1.06); }

/* --- 8 Zusatzleistungen ------------------------------------------------- */
.section--services { padding: 51px 0 0; }

.panel {
	background: var(--panel);
	border-radius: 28px;
	padding: 34px 17px 30px;
}

.panel__head {
	text-align: center;
	margin-bottom: 30px;
}

.card--service .card__media { aspect-ratio: 325 / 166; }

.card--service .card__body {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 16px 15px;
}

.card--service .card__title { font-size: 19px; }
.card--service .card__subtitle { font-size: 14.5px; margin-top: 3px; }

/* --- 9 Abschluss-CTA ---------------------------------------------------- */
.cta {
	position: relative;
	margin-top: 28px;
	min-height: 380px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #2b3d55;
}

.cta__media { position: absolute; inset: 0; z-index: 0; }

.cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
	filter: brightness(1.62) contrast(.92) saturate(1.5);
}

.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(26, 40, 62, .40) 0%, rgba(26, 40, 62, .12) 30%, rgba(26, 40, 62, 0) 48%),
		linear-gradient(92deg, rgba(255, 150, 60, 0) 28%, rgba(255, 168, 78, .16) 58%, rgba(255, 190, 110, .26) 100%);
}

.cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 380px;
	padding-block: 36px;
}

.cta__claim {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	font-family: var(--font-hand);
	font-size: 60px;
	font-weight: 500;
	line-height: 1.16;
	color: var(--white);
	text-shadow: 0 3px 22px rgba(14, 24, 40, .45);
	transform: rotate(-4deg);
	padding-inline-start: 74px;
}

.cta__claim-line:nth-child(2) { margin-inline-start: 18px; }
.cta__claim-line:nth-child(3) { margin-inline-start: 36px; }

.cta__claim-line--underline { position: relative; display: inline-block; }
.cta__claim-line--underline::after {
	content: "";
	position: absolute;
	left: 42%; right: 4%;
	bottom: .18em;
	height: 3px;
	border-radius: 3px;
	background: currentColor;
	transform: rotate(-1.5deg);
}

.cta__heart {
	position: absolute;
	right: -44px;
	bottom: 34px;
	font-size: 40px;
	line-height: 1;
	transform: rotate(4deg);
}

.cta__offer {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
	margin-inline-end: 10px;
}

.cta__badge {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 356px;
	min-height: 236px;
	padding: 30px 34px;
	color: var(--white);
	text-align: center;
	background: var(--pink-500);
	/* Grob gerissene Kontur – bildet den Pinselstrich der Vorlage nach. */
	clip-path: polygon(
		1% 26%, 9% 11%, 21% 17%, 33% 6%, 46% 14%, 59% 5%, 72% 13%, 85% 6%,
		96% 14%, 99% 30%, 97% 46%, 100% 62%, 96% 78%, 98% 93%, 86% 87%,
		73% 96%, 60% 88%, 47% 97%, 34% 89%, 21% 96%, 10% 88%, 2% 92%,
		4% 74%, 0% 58%, 3% 42%
	);
	transform: rotate(-4deg);
}

.cta__badge > span { display: block; transform: rotate(1deg); }

.cta__badge-top {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.cta__badge-sub {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-top: 2px;
}

.cta__badge-value {
	font-family: var(--font-hand);
	font-size: 100px;
	font-weight: 700;
	line-height: .96;
	margin-top: 2px;
}

.cta__badge-bottom {
	font-family: var(--font-hand);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	margin-top: -4px;
}

.cta__button { min-width: 262px; }

/* --- 10 Footer ---------------------------------------------------------- */
.site-footer {
	background: var(--navy-900);
	color: rgba(255, 255, 255, .8);
	padding: 54px 0 26px;
	margin-top: 0;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-bottom: 28px;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 320px;
}

.site-footer__claim {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.site-footer__nav,
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.site-footer a { color: rgba(255, 255, 255, .84); font-size: 15.5px; }
.site-footer a:hover { color: var(--white); }

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.site-footer__copy { margin: 0; font-size: 14.5px; }

/* --- 11 Innenseiten ----------------------------------------------------- */
.section--page,
.section--archive,
.section--page-content { padding: 72px 0; }

.is-front .section--page-content { padding: 64px 0 0; }

.page-head { margin-bottom: 26px; }
.page-hero { margin: 0 0 28px; }
.page-hero img { border-radius: var(--radius-lg); width: 100%; }

.entry-content { font-size: 17.5px; line-height: 1.75; color: #24324d; }
.entry-content h2 { margin: 34px 0 12px; font-size: 30px; }
.entry-content h3 { margin: 26px 0 10px; font-size: 22px; }
.entry-content ul { margin: 0 0 18px; padding-left: 22px; }
.entry-content ul li { list-style: disc; margin-bottom: 6px; }
.entry-content a { text-decoration: underline; }

.simple-search {
	display: flex;
	gap: 12px;
	margin: 22px 0 28px;
	flex-wrap: wrap;
}
.simple-search .field {
	flex: 1 1 320px;
	min-height: 60px;
	border-radius: var(--radius-md);
	border-inline-end: 1px solid var(--line);
}
.simple-search .btn { height: 60px; }

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: var(--radius-sm);
	background: var(--white);
	box-shadow: var(--shadow-card);
	font-weight: 600;
	color: var(--navy-800);
}
.pagination .page-numbers.current { background: var(--blue-700); color: var(--white); }

.widget { margin-bottom: 30px; }
.widget__title { font-size: 20px; margin-bottom: 10px; }

/* --- 11b Portfolio-Komponenten ------------------------------------------ */

/* Schnell-Einstiege unter der Suchbox */
.quicklinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 18px;
	padding-inline: 4px;
}
.quicklinks__label {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--muted);
}
.quicklinks__item {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: 0 2px 8px rgba(11, 31, 78, .05);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--navy-800);
}
.quicklinks__item:hover { border-color: var(--blue-500); color: var(--blue-700); }

/* Reisearten-Kacheln */
.section--types { padding: 54px 0 0; }

.type-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 12px;
}
.type-tile > a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	height: 100%;
	padding: 22px 20px 20px;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-card);
	color: var(--navy-900);
	transition: transform .18s ease, box-shadow .18s ease;
}
.type-tile > a:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-hover);
	color: var(--navy-900);
}
.type-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--panel);
	color: var(--blue-700);
}
.type-tile__name { font-size: 19px; font-weight: 800; letter-spacing: -.018em; }
.type-tile__text { font-size: 14.5px; line-height: 1.4; color: var(--muted); }

/* Badges auf Karten */
.badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;
}
.badge--type {
	top: 12px; left: 12px;
	background: rgba(255, 255, 255, .94);
	color: var(--navy-800);
	box-shadow: 0 2px 10px rgba(6, 20, 48, .18);
}
.badge--parking {
	bottom: 12px; left: 12px;
	background: var(--pink-500);
	color: var(--white);
	box-shadow: 0 4px 14px rgba(190, 6, 58, .3);
}
.badge--code {
	top: 12px; left: 12px;
	background: var(--navy-800);
	color: var(--white);
	letter-spacing: .08em;
}

/* Angebotskarten */
.card--offer .card__media { position: relative; aspect-ratio: 16 / 11; }
.card--offer .card__body { padding: 14px 16px 16px; gap: 12px; }
.card__eyebrow {
	display: block;
	margin-bottom: 4px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--blue-600);
}
.card--offer .card__title { font-size: 18.5px; line-height: 1.28; }
.card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.fact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--muted);
}
.fact .icon { flex: 0 0 auto; color: var(--blue-600); }
.price__unit { font-size: 13px; color: var(--muted); }

.card-grid--offers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card-grid--hubs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card-grid--parking { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Parkplatz- und Hub-Karten */
.card--parking .card__body { padding: 20px; gap: 14px; }
.card--hub .card__media { position: relative; aspect-ratio: 16 / 9; }
.card--hub .card__body { padding: 14px 16px 16px; gap: 12px; }
.card__features { display: flex; flex-direction: column; gap: 7px; }
.card__features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14.5px;
	color: var(--muted);
}
.card__features .icon { flex: 0 0 auto; margin-top: 2px; color: var(--blue-600); }

.btn--small {
	height: 42px;
	padding: 0 18px;
	font-size: 15px;
	background: var(--panel);
	color: var(--navy-800);
}
.btn--small:hover { background: var(--line); color: var(--navy-900); }
.btn--ghost-dark {
	border-color: var(--line);
	color: var(--navy-800);
}
.btn--ghost-dark:hover { background: var(--panel); color: var(--navy-900); border-color: var(--line); }

/* USP-Band „Reise + Parken“ */
.section--parking { padding: 54px 0 0; }

.parking {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	padding: 44px 44px 40px;
	background:
		radial-gradient(120% 140% at 12% 0%, rgba(22, 104, 184, .55) 0%, rgba(11, 31, 78, 0) 60%),
		linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 55%, #0d3a7a 100%);
	color: rgba(255, 255, 255, .88);
}
.parking__head { max-width: 780px; }
.section__title--light { color: var(--white); }
.parking__lead {
	margin-top: 14px;
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

.parking__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 32px 0 34px;
}
.parking-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 18px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
}
.parking-step__num {
	position: absolute;
	top: 14px; right: 16px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, .16);
}
.parking-step__icon { color: var(--yellow-400); }
.parking-step__title { font-size: 17px; font-weight: 700; color: var(--white); }
.parking-step__text { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .76); }

.parking__hubs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.hub-group__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 17px;
	color: var(--white);
}
.hub-group__title .icon { color: var(--yellow-400); }
.hub-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 14px;
}
.hub-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	color: var(--white);
	font-size: 14.5px;
	font-weight: 600;
	transition: background-color .16s ease;
}
.hub-chip:hover { background: rgba(255, 255, 255, .2); color: var(--white); }
.hub-chip__code {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--yellow-400);
	text-transform: uppercase;
}
.section__link--light { color: rgba(255, 255, 255, .92); }
.section__link--light:hover { color: var(--white); }

/* Reisethemen */
.section--themes { padding: 54px 0 0; }
.theme-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.theme-chip > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 20px;
	border-radius: var(--radius-pill);
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-card);
	color: var(--navy-900);
	font-weight: 600;
	transition: transform .16s ease, border-color .16s ease;
}
.theme-chip > a:hover { transform: translateY(-2px); border-color: var(--blue-500); color: var(--blue-700); }
.theme-chip .icon { color: var(--blue-600); }
.theme-grid--countries { margin-bottom: 40px; }

/* Landingpage-Hero */
.page-hero {
	position: relative;
	overflow: hidden;
	background: var(--navy-800);
	border-radius: 0 0 50% 50% / 0 0 26px 26px;
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}
.page-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(3, 50, 100, .93) 0%, rgba(5, 66, 122, .86) 32%, rgba(8, 84, 150, .66) 62%, rgba(12, 100, 172, .46) 100%),
		linear-gradient(180deg, rgba(2, 34, 74, .6) 0%, rgba(2, 34, 74, .1) 40%, rgba(2, 34, 74, .28) 100%);
}
.page-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 146px;
	padding-bottom: 54px;
	max-width: 1100px;
}
.page-hero__title {
	margin: 12px 0 0;
	color: var(--white);
	font-size: 54px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-shadow: 0 3px 20px rgba(3, 30, 62, .35);
}
.page-hero__title .script--accent { font-size: 1.1em; line-height: .9; margin-inline-start: .08em; }
.page-hero__text {
	margin: 16px 0 0;
	max-width: 760px;
	font-size: 19px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .94);
	text-shadow: 0 1px 12px rgba(3, 30, 62, .4);
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}
.breadcrumb li + li::before {
	content: "\203A";
	margin-inline-end: 6px;
	opacity: .7;
}
.breadcrumb a { color: rgba(255, 255, 255, .86); }
.breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--white); font-weight: 600; }

/* Filterleiste */
.offer-filters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 12px;
	align-items: end;
	margin-bottom: 26px;
	padding: 18px;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-card);
}
.offer-filters__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.offer-filters__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.offer-filters select,
.offer-filters input {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--white);
	font: inherit;
	font-size: 15px;
	color: var(--ink);
}
.offer-filters__submit { height: 46px; font-size: 16px; padding: 0 22px; }

.result-count {
	margin-bottom: 18px;
	font-size: 15px;
	color: var(--muted);
}

.empty-state {
	padding: 48px 24px;
	text-align: center;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.empty-state h2 { font-size: 26px; margin-bottom: 10px; }
.empty-state p { color: var(--muted); max-width: 620px; margin-inline: auto; }
.empty-state .btn { margin: 18px 6px 0; }
.empty-state--inline { padding: 30px 22px; text-align: left; }
.empty-state--inline .btn { margin: 14px 0 0; }

/* Angebots-Detailseite */
.section--offer { padding: 54px 0 0; }
.offer-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 36px;
	align-items: start;
}
.offer-highlights {
	display: grid;
	gap: 10px;
	margin-bottom: 26px;
	padding: 20px 22px;
	border-radius: var(--radius-lg);
	background: var(--panel);
}
.offer-highlights li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--navy-800);
}
.offer-highlights .icon { flex: 0 0 auto; margin-top: 2px; color: var(--blue-700); }

.offer-tabs {
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.offer-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	background: var(--tabstrip);
	border-bottom: 1px solid var(--line-soft);
}
.offer-tab {
	position: relative;
	min-height: 56px;
	padding: 0 22px;
	border: 0;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
}
.offer-tab.is-active {
	background: var(--white);
	color: var(--blue-700);
	font-weight: 700;
}
.offer-tab.is-active::after {
	content: "";
	position: absolute;
	left: 18px; right: 18px; bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--blue-700);
}
.offer-panel { padding: 26px 26px 28px; }
.offer-panel[hidden] { display: none; }

.check-list { display: grid; gap: 10px; }
.check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16.5px;
	line-height: 1.5;
	color: #24324d;
}
.check-list .icon { flex: 0 0 auto; margin-top: 3px; color: var(--blue-600); }
.check-list--lead { margin-bottom: 24px; }

.step-list { display: grid; gap: 12px; }
.step-list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 16.5px;
	line-height: 1.5;
	color: #24324d;
}
.step-list__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--navy-800);
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
}

.fact-list { display: grid; grid-template-columns: 200px 1fr; gap: 10px 20px; }
.fact-list dt { font-weight: 700; color: var(--navy-800); }
.fact-list dd { margin: 0; color: #24324d; }

.fact-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 26px;
	padding: 0;
}
.fact-strip > div {
	flex: 1 1 180px;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: var(--panel);
}
.fact-strip dt {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.fact-strip dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--navy-900); }

.booking-box {
	position: sticky;
	top: 24px;
	padding: 24px;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-card-hover);
}
.booking-box__price { margin: 0 0 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.booking-box__price .price__value { font-size: 34px; }
.booking-box__facts { display: grid; gap: 10px; margin: 0 0 16px; }
.booking-box__facts > div { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; }
.booking-box__facts dt { color: var(--muted); }
.booking-box__facts dd { margin: 0; font-weight: 600; color: var(--navy-900); text-align: right; }
.booking-box__note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: var(--panel);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--navy-800);
}
.booking-box__note .icon { flex: 0 0 auto; color: var(--blue-700); }
.booking-box__cta { width: 100%; margin-bottom: 10px; }
.booking-box__hint { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.aside-box {
	margin-top: 20px;
	padding: 20px 22px;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-card);
}
.aside-box h3 { font-size: 17px; margin-bottom: 12px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: var(--panel);
	font-size: 14px;
	font-weight: 600;
	color: var(--navy-800);
}
.tag-list a:hover { background: var(--line); }

/* Cross-Selling-Block */
.section--crosssell { padding: 54px 0 0; }
.crosssell {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding: 30px;
	border-radius: 24px;
	background: var(--panel);
}
.crosssell__intro .section__title { font-size: 32px; }
.crosssell__intro .section__lead { font-size: 16.5px; }
.crosssell__intro .section__link { margin-top: 14px; }
.crosssell .card--parking { background: var(--white); }

/* Reiseberatung */
.section--advice { padding: 54px 0 72px; }
.advice-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 44px;
}
.advice-step {
	padding: 24px 22px;
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-card);
}
.advice-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--blue-700);
	color: var(--white);
	font-weight: 800;
}
.advice-step__title { font-size: 18px; margin-bottom: 6px; }
.advice-step__text { font-size: 15px; line-height: 1.5; color: var(--muted); }

.advice-form {
	margin-top: 10px;
	padding: 30px;
	border-radius: 24px;
	background: var(--panel);
}
.advice-form h2 { font-size: 28px; }
.advice-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.advice-form__fields label { display: flex; flex-direction: column; gap: 6px; }
.advice-form__fields span { font-size: 14px; font-weight: 600; color: var(--navy-800); }
.advice-form__fields input {
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--white);
	font: inherit;
	font-size: 16px;
}
.advice-form__wide { grid-column: 1 / -1; }
.advice-form .btn { grid-column: 1 / -1; justify-self: start; }

.continent-block { margin-bottom: 44px; }
.continent-block .section__title a { color: inherit; }
.continent-block .section__title a:hover { color: var(--blue-700); }

.entry-content--wide { max-width: 860px; }
.panel__foot { margin-top: 22px; text-align: center; }

/* Mega-Menü in der Hauptnavigation */
/* Dropdown-Pfeil auf ein eigenes ::before legen, damit er nicht mit dem
   Hover-Unterstrich (::after) kollidiert. Per Flex-order sitzt er hinter dem Text. */
.nav__list > .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.nav__list > .menu-item-has-children > a::before {
	content: "";
	order: 1;
	width: 6px; height: 6px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .75;
	transition: transform .2s ease;
}
.nav__list > .menu-item-has-children:hover > a::before,
.nav__list > .menu-item-has-children:focus-within > a::before {
	transform: translateY(1px) rotate(45deg);
}
.nav__list > .menu-item-has-children > .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(190px, 1fr));
	gap: 2px 10px;
	min-width: 430px;
	padding: 14px;
	left: 50%;
	transform: translate(-50%, 6px);
}
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu { transform: translate(-50%, 0); }
.nav__list .sub-menu a { font-weight: 600; }
.nav__list .sub-menu .sub-menu {
	position: static;
	display: block;
	min-width: 0;
	padding: 0 0 0 10px;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: transparent;
}
.nav__list .sub-menu .sub-menu a { font-weight: 400; font-size: 14.5px; color: var(--muted); }

/* --- 12 Responsive ------------------------------------------------------ */

/* Laptop */
@media (max-width: 1380px) {
	:root {
		--hero-h: 690px;
		--search-overlap: 108px;
		--logo-h: 52px;
	}
	.hero__title { font-size: 92px; }
	.hero__inner { padding-top: 140px; padding-bottom: 190px; }
	.hero__note { right: 190px; top: 124px; font-size: 30px; }
	.hero__badge { width: 152px; height: 152px; font-size: 24px; top: 84px; right: -10px; }
	.section__title { font-size: 37px; }
	.searchtab { padding: 0 18px; font-size: 15px; }
	.searchpanel__submit { min-width: 230px; }
	.cta__claim { font-size: 52px; }
	.page-hero__title { font-size: 46px; }
	.card-grid--offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.card-grid--hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.parking { padding: 36px 32px 34px; }
	.cta__badge { width: 300px; min-height: 206px; padding: 28px 30px; }
	.cta__badge-value { font-size: 80px; }
}

/* Kleines Laptop / großes Tablet */
@media (max-width: 1180px) {
	:root {
		--hero-h: 640px;
		--search-overlap: 96px;
		--gutter: 20px;
	}
	:root { --logo-h: 46px; }
	.site-header__inner { gap: 20px; }
	.nav__list { gap: 20px; }
	.nav__list > li > a { font-size: 14.5px; }
	.hero__title { font-size: 76px; }
	.hero__text { font-size: 21px; max-width: 640px; }
	.hero__scrim {
		background:
			linear-gradient(100deg,
				rgba(3, 52, 102, .94) 0%,
				rgba(4, 66, 122, .90) 26%,
				rgba(7, 84, 148, .80) 48%,
				rgba(10, 98, 166, .66) 68%,
				rgba(13, 108, 178, .54) 100%),
			linear-gradient(180deg, rgba(2, 36, 78, .55) 0%, rgba(2, 36, 78, .12) 30%, rgba(2, 36, 78, .3) 100%);
	}
	.hero__note { display: none; }
	.hero__badge { width: 130px; height: 130px; font-size: 20px; top: 92px; right: 0; }
	.hero__badge-smile svg { width: 30px; height: 18px; }
	.card-grid--destinations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.card-grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card--destination .card__media { aspect-ratio: 16 / 11; }
	.searchpanel__fields { grid-template-columns: 1fr 1fr; row-gap: 12px; }
	.searchpanel__fields .field { border: 1px solid var(--line); border-radius: var(--radius-md); }
	.searchpanel__fields .field:first-child { grid-column: 1 / -1; }
	.searchpanel__submit { grid-column: 1 / -1; margin-inline-start: 0; width: 100%; }
	.searchbox__tabs { overflow-x: auto; scrollbar-width: none; }
	.searchbox__tabs::-webkit-scrollbar { display: none; }
	.searchtab { flex: 0 0 auto; }
	.cta__inner { min-height: 340px; }
	.cta__claim { font-size: 44px; padding-inline-start: 0; }
	.page-hero__inner { padding-top: 128px; padding-bottom: 44px; }
	.page-hero__title { font-size: 40px; }
	.card-grid--offers,
	.card-grid--hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid--parking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.parking__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.offer-layout { grid-template-columns: minmax(0, 1fr); }
	.booking-box { position: static; }
	.crosssell { grid-template-columns: minmax(0, 1fr); }
	.offer-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.offer-filters__submit { grid-column: 1 / -1; }
	.advice-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet */
@media (max-width: 960px) {
	:root {
		--logo-h: 42px;
		--header-h: 78px;
		--hero-h: 580px;
		--search-overlap: 72px;
	}
	.nav { display: none; }
	.header-cta { display: none; }
	.nav-toggle { display: inline-flex; }
	.mobile-nav { display: none; }
	.mobile-nav.is-open { display: block; }
	.site-header--overlay .mobile-nav.is-open {
		box-shadow: 0 24px 40px rgba(6, 22, 48, .3);
	}
	.hero__inner { padding-top: 116px; padding-bottom: 150px; }
	.hero__title { font-size: 60px; }
	.hero__text { font-size: 18px; max-width: 620px; }
	.trust { gap: 30px; margin-top: 26px; }
	.trust__text { font-size: 14.5px; }
	.section__head {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 14px;
	}
	.section__head-main { grid-column: 1; }
	.section__head .section__link { grid-column: 1; justify-self: center; }
	.section__title { font-size: 31px; }
	.section--destinations { padding-top: 54px; }
	.panel { padding: 28px 14px 24px; border-radius: 22px; }
	.cta { min-height: 320px; }
	.cta__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
	.cta__offer { align-self: center; margin-inline-end: 0; }
	.cta__badge { width: 262px; min-height: 186px; padding: 26px 28px; }
	.page-hero { border-radius: 0 0 50% 50% / 0 0 18px 18px; }
	.page-hero__inner { padding-top: 104px; padding-bottom: 36px; }
	.page-hero__title { font-size: 33px; }
	.page-hero__text { font-size: 17px; }
	.parking { padding: 28px 20px 26px; border-radius: 22px; }
	.parking__hubs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.fact-list { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
	.fact-list dd { margin-bottom: 10px; }
	.cta__badge-value { font-size: 68px; }
	.cta__badge-bottom { font-size: 32px; }
}

/* Smartphone */
@media (max-width: 720px) {
	:root {
		--hero-h: 520px;
		--search-overlap: 48px;
		--gutter: 16px;
	}
	body { font-size: 16px; }
	:root { --logo-h: 36px; }
	.brand__logo--full { max-width: 220px; }
	.header-action--wishlist { display: none; }
	.hero { border-radius: 0 0 50% 50% / 0 0 20px 20px; }
	.hero__media img { object-position: 74% 45%; }
	.hero__inner { padding-top: 104px; padding-bottom: 96px; }
	.kicker--light { font-size: 12px; letter-spacing: .26em; }
	.hero__title { font-size: 42px; margin-top: 14px; }
	.hero__title-line--mixed { gap: .12em; }
	.hero__text { font-size: 16.5px; margin-top: 18px; }
	.hero__badge { width: 104px; height: 104px; font-size: 15px; top: 74px; right: -6px; }
	.hero__badge::before { inset: -6px; border-width: 3px; }
	.hero__badge-smile { margin-top: 4px; }
	.hero__badge-smile svg { width: 24px; height: 14px; }
	.trust {
		gap: 18px;
		margin-top: 22px;
		flex-direction: column;
	}
	.trust__icon { width: 26px; height: 26px; }

	.searchbox { border-radius: 20px; }
	.searchtab { min-height: 58px; font-size: 14.5px; padding: 0 15px; gap: 8px; }
	.searchtab.is-active::after { left: 14px; right: 14px; height: 3px; }
	.searchpanel { padding: 14px 14px 16px; }
	.searchpanel__fields { grid-template-columns: 1fr; row-gap: 10px; }
	.field { min-height: 62px; padding: 0 14px; }
	.searchpanel__submit { height: 58px; min-width: 0; }

	.section--destinations { padding-top: 40px; }
	.section__title { font-size: 26px; }
	.kicker { font-size: 11px; letter-spacing: .22em; }

	/* Karten horizontal scrollbar – volle Kartenbreite bleibt lesbar. */
	.card-grid--destinations {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.card-grid--destinations::-webkit-scrollbar { display: none; }
	.card-grid--destinations .card {
		flex: 0 0 74%;
		scroll-snap-align: start;
	}
	.card--destination .card__media { aspect-ratio: 5 / 4; }
	.card-grid--services { grid-template-columns: 1fr; gap: 12px; }
	.card-grid--offers,
	.card-grid--hubs,
	.card-grid--parking { grid-template-columns: 1fr; gap: 14px; }
	.type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.type-tile > a { padding: 16px 14px; }
	.type-tile__icon { width: 44px; height: 44px; border-radius: 13px; }
	.type-tile__name { font-size: 16.5px; }
	.type-tile__text { display: none; }
	.parking__steps { grid-template-columns: 1fr; gap: 10px; margin: 24px 0 26px; }
	.parking__lead { font-size: 16.5px; }
	.offer-filters { grid-template-columns: 1fr; padding: 14px; }
	.advice-steps { grid-template-columns: 1fr; }
	.advice-form { padding: 22px 18px; }
	.advice-form__fields { grid-template-columns: 1fr; }
	.offer-panel { padding: 20px 18px 22px; }
	.offer-tab { padding: 0 16px; font-size: 15px; }
	.quicklinks { gap: 8px 10px; }
	.quicklinks__label { width: 100%; }
	.crosssell { padding: 22px 18px; }
	.crosssell__intro .section__title { font-size: 26px; }
	.card--service .card__media { aspect-ratio: 2 / 1; }

	.section--services { padding-top: 38px; }
	.panel { padding: 24px 12px 20px; }

	.cta { margin-top: 36px; min-height: 0; }
	.cta__inner { min-height: 0; padding-block: 34px; gap: 22px; }
	.cta__claim { font-size: 34px; transform: rotate(-3deg); }
	.cta__heart { right: -30px; bottom: 20px; font-size: 28px; }
	.cta__offer { align-self: stretch; align-items: center; }
	.cta__badge { width: 226px; min-height: 168px; padding: 26px 24px; }
	.cta__badge-top { font-size: 13px; }
	.cta__badge-sub { font-size: 12px; }
	.cta__badge-value { font-size: 56px; }
	.cta__badge-bottom { font-size: 26px; }
	.cta__button { width: 100%; max-width: 320px; min-width: 0; }

	.btn { height: 56px; font-size: 16.5px; padding: 0 22px; }
	.section--page, .section--archive, .section--page-content { padding: 44px 0; }
	.card-grid--posts { grid-template-columns: 1fr; }
	.site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}


.price--request { font-size: 15px; font-weight: 700; color: var(--blue-700); }
.booking-box__price--request { font-size: 22px; font-weight: 800; color: var(--navy-900); }

/* Feinabstimmung der Landingpage-Abstände */
.page-hero .breadcrumb { margin-bottom: 16px; }
.section--hub,
.section--destination { padding: 50px 0 0; }
.section--parkinglist { padding: 46px 0 0; }
.section--hub .entry-content--wide,
.section--destination .entry-content--wide { margin-bottom: 4px; }
/* Die Angebots-Sektion der Landingpages hatte bisher gar kein Padding und
   klebte dadurch an der vorherigen Sektion bzw. direkt am Footer. */
.section--offers { padding: 50px 0 0; }
.section--advice .entry-content--wide { margin-bottom: 36px; }

/* Letzte Sektion vor dem Footer.
   Die Landingpage-Sektionen tragen bewusst nur padding-top – der Abstand
   entsteht jeweils durch die nachfolgende Sektion. Die jeweils letzte hat
   deshalb keinen und der Inhalt stößt an den Footer. Das setzt ihn generisch
   nach, statt ihn in jedem Template einzeln pflegen zu müssen. */
.site-main > .section:last-child { padding-bottom: 72px; }

/* --- Branding-Feinheiten -------------------------------------------------- */
.error-brand { margin: 0 0 22px; }
.brand__logo--error { max-width: 300px; }

/* Sticky/aufgescrollter Header: deckende Fläche, Logo bleibt gleich groß. */
.site-header--overlay.is-scrolled {
	position: fixed;
	background: rgba(11, 31, 78, .96);
	backdrop-filter: saturate(140%) blur(8px);
	box-shadow: 0 10px 30px rgba(6, 20, 48, .25);
	animation: travellife-header-in .24s ease-out;
}

@keyframes travellife-header-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@media (max-width: 960px) {
	.site-footer__brand { max-width: 260px; }
}

@media (max-width: 720px) {
	.brand__logo--error { max-width: 240px; }
	.site-footer__brand { max-width: 100%; }
}

/* --- Angebots-Detail: Clickbait-Bausteine ------------------------------- */

/* Hook-Leiste direkt unter dem Seiten-Hero: Teaser + Benefit-Badges + Dringlichkeit */
.offer-hook {
	background: linear-gradient(180deg, var(--panel) 0%, var(--white) 100%);
	border-bottom: 1px solid var(--line-soft);
}
.offer-hook .container { padding-block: 20px; }
.offer-hook__teaser {
	margin: 0 0 12px;
	font-family: var(--font-script);
	font-size: 30px;
	line-height: 1.1;
	color: var(--blue-700);
}
.offer-hook__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
}
.hook-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	background: var(--white);
	border: 1px solid var(--line);
	box-shadow: 0 2px 8px rgba(11, 31, 78, .05);
	font-size: 14px;
	font-weight: 700;
	color: var(--navy-800);
}
.hook-badge .icon { color: var(--blue-600); }
.offer-hook__urgency {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--pink-500);
	color: var(--white);
	font-size: 14.5px;
	font-weight: 700;
	box-shadow: var(--shadow-btn);
}

/* Bildergalerie */
.offer-gallery { background: var(--white); }
.offer-gallery .container { padding-top: 24px; }
.offer-gallery__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: 150px;
	gap: 10px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.offer-gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius-md); }
.offer-gallery__item:first-child { grid-row: span 2; grid-column: 1; }
.offer-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.offer-gallery__item:hover img { transform: scale(1.05); }
.offer-gallery__grid[data-count="1"] { grid-template-columns: 1fr; }
.offer-gallery__grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.offer-gallery__grid[data-count="2"] .offer-gallery__item:first-child { grid-row: span 1; }

/* „Das erwartet dich“ */
.offer-expect { margin-bottom: 26px; }
.offer-expect__title { font-size: 22px; margin-bottom: 14px; }
.offer-expect__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 20px;
}
.offer-expect__grid li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--navy-800);
}
.offer-expect__grid .icon { flex: 0 0 auto; margin-top: 2px; color: var(--pink-500); }

/* Reiseverlauf-Timeline */
.timeline { position: relative; margin: 0; padding-left: 8px; }
.timeline::before {
	content: "";
	position: absolute;
	left: 22px; top: 6px; bottom: 6px;
	width: 2px;
	background: var(--line);
}
.timeline__item {
	position: relative;
	display: flex;
	gap: 18px;
	padding: 0 0 22px 0;
}
.timeline__marker {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--navy-800);
	color: var(--white);
	font-size: 15px;
	font-weight: 800;
	box-shadow: 0 0 0 4px var(--white);
}
.timeline__title { font-size: 16.5px; margin: 8px 0 4px; }
.timeline__text { font-size: 15px; line-height: 1.55; color: #24324d; margin: 0; }

/* Hotelliste */
.hotel-list { display: grid; gap: 10px; }
.hotel-list__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: var(--panel);
}
.hotel-list__name { font-size: 16px; font-weight: 700; color: var(--navy-900); }
.hotel-list__stars { color: var(--yellow-400); letter-spacing: 1px; }
.hotel-list__loc { font-size: 14px; color: var(--muted); }

/* Booking-Box: Dringlichkeit */
.booking-box__urgency {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
	padding: 11px 14px;
	border-radius: var(--radius-sm);
	background: rgba(237, 12, 76, .08);
	color: var(--pink-600);
	font-size: 14px;
	font-weight: 700;
}
.booking-box__urgency .icon { flex: 0 0 auto; margin-top: 1px; }

/* Karten-Badge: Frühbucher */
.badge--urgency {
	top: 12px; right: 12px; left: auto;
	background: var(--pink-500);
	color: var(--white);
	box-shadow: 0 4px 14px rgba(190, 6, 58, .3);
}

@media (max-width: 720px) {
	.offer-hook__teaser { font-size: 25px; }
	.offer-gallery__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
	.offer-gallery__item:first-child { grid-row: span 2; }
	.offer-expect__grid { grid-template-columns: 1fr; }
	.timeline__marker { width: 38px; height: 38px; font-size: 13px; }
}

/* --- 13 Reisekonfigurator (Live-Preise) -------------------------------- */
.offer-configurator {
	background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--blue-700) 140%);
	color: var(--white);
	padding: 56px 0;
}
.offer-configurator__head { max-width: 760px; margin-bottom: 30px; }
.offer-configurator__head .kicker { color: var(--yellow-400); }
.offer-configurator__head .section__title { color: var(--white); margin: 6px 0 12px; }
.offer-configurator__head .section__lead { color: rgba(255, 255, 255, .82); }

.ap-configurator__loading {
	display: flex; align-items: center; gap: 12px;
	color: rgba(255, 255, 255, .85); font-weight: 600; padding: 20px 0;
}
.ap-spinner {
	width: 22px; height: 22px; border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--yellow-400);
	animation: ap-spin .8s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }
.ap-configurator__noscript { color: rgba(255, 255, 255, .85); }

.ap-configurator__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px; margin-bottom: 20px;
}
.ap-field { display: flex; flex-direction: column; gap: 8px; }
.ap-field__label { font-weight: 700; font-size: 14px; color: rgba(255, 255, 255, .9); }
.ap-field__static { margin: 0; font-weight: 700; color: var(--white); padding: 12px 0; }

.ap-select {
	width: 100%; appearance: none;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b1f4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 2px solid transparent; border-radius: var(--radius-md);
	padding: 13px 40px 13px 15px; font: inherit; font-weight: 600; color: var(--ink);
	cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.ap-select:focus-visible { outline: none; border-color: var(--yellow-400); box-shadow: 0 0 0 4px rgba(251, 184, 34, .3); }
.ap-select:disabled { opacity: .6; cursor: default; }

.ap-stepper { display: flex; flex-direction: column; gap: 8px; }
.ap-stepper__label { font-weight: 700; font-size: 14px; color: rgba(255, 255, 255, .9); }
.ap-stepper__ctrl {
	display: inline-flex; align-items: center; justify-content: space-between;
	gap: 6px; background: var(--white); border-radius: var(--radius-md); padding: 6px;
}
.ap-stepper__btn {
	width: 40px; height: 40px; flex: 0 0 40px; border: none; border-radius: 10px;
	background: var(--panel); color: var(--navy-900); font-size: 22px; line-height: 1;
	font-weight: 700; cursor: pointer; transition: background .15s, color .15s;
}
.ap-stepper__btn:hover:not(:disabled) { background: var(--yellow-400); }
.ap-stepper__btn:disabled { opacity: .4; cursor: default; }
.ap-stepper__value { flex: 1 1 auto; text-align: center; font-weight: 800; font-size: 18px; color: var(--ink); }

.ap-configurator__meta { color: rgba(255, 255, 255, .78); font-weight: 600; margin: 0 0 20px; }
.ap-configurator__actions { margin-bottom: 8px; }
.ap-configurator__submit { font-size: 17px; }
.ap-configurator__submit:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* Ergebnisse */
.ap-results { margin-top: 28px; }
.ap-results__head { color: var(--yellow-400); font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 16px; }
.ap-results__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.ap-results__hint { margin: 18px 0 0; color: rgba(255, 255, 255, .7); font-size: 14px; }

.ap-card {
	position: relative; display: flex; flex-direction: column; gap: 10px;
	background: var(--white); color: var(--ink);
	border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card);
	transition: transform .15s, box-shadow .15s;
}
.ap-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.ap-card__status {
	align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .03em;
	text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill);
}
.ap-card__status.is-bookable { background: #e7f7ed; color: #0a7d3c; }
.ap-card__status.is-request { background: #fff4dc; color: #9a6b00; }
.ap-card__route { margin: 0; font-weight: 700; font-size: 13px; color: var(--blue-600); letter-spacing: .02em; }
.ap-card__title { margin: 0; font-size: 19px; line-height: 1.25; color: var(--navy-900); }
.ap-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ap-card__facts li { position: relative; padding-left: 20px; color: var(--muted); font-size: 14px; font-weight: 600; }
.ap-card__facts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow-400); }
.ap-card__price { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.ap-card__pp { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ap-card__pp-value { font-size: 28px; font-weight: 800; color: var(--navy-900); }
.ap-card__pp-unit { font-size: 14px; font-weight: 600; color: var(--muted); }
.ap-card__total { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.ap-card__total--note { font-weight: 600; color: var(--muted); }
.ap-card__cta { margin-top: 14px; width: 100%; justify-content: center; }

/* Skeletons */
.ap-card--skeleton { pointer-events: none; }
.ap-skel { border-radius: 8px; background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%); background-size: 400% 100%; animation: ap-shimmer 1.3s ease infinite; }
.ap-skel--line { height: 16px; }
.ap-skel--short { width: 60%; }
.ap-skel--price { height: 34px; width: 45%; margin-top: 14px; }
@keyframes ap-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Hinweis-/Fehlerboxen */
.ap-note { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-md); padding: 20px 22px; color: var(--white); }
.ap-note p { margin: 0 0 12px; }
.ap-note p:last-child { margin-bottom: 0; }
.ap-note--error { background: rgba(209, 0, 63, .16); border-color: rgba(250, 63, 112, .45); }

@media (max-width: 720px) {
	.offer-configurator { padding: 40px 0; }
	.ap-configurator__grid { grid-template-columns: 1fr; gap: 14px; }
	.ap-results__list { grid-template-columns: 1fr; }
	.ap-configurator__submit { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
	.site-main > .section:last-child { padding-bottom: 44px; }
}