/* ==========================================================================
   RedSea Tours – Komponenten
   Baut auf den Tokens aus critical.css auf. Enthält keine eigenen Farbwerte.
   Reihenfolge: Hero → Karten → Datenchips → Preise → Abschnitte → Formulare →
   Navigation (Breadcrumb/Pagination) → Footer → Utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero – die Abbruchkante als Bildaufbau
   Oben Licht (Flachwasser), unten die dunkle Kante, auf der der Text sitzt.
   -------------------------------------------------------------------------- */

.rst-hero {
	position: relative;
	display: grid;
	align-items: center;
	/*
   * Hoehe des Hero.
   *
   * Deutlich hoeher als zuvor: Mit einem Bilderslider ist das Bild selbst
   * ein Argument, und auf 420 px wird ein Querformat auf einen Streifen
   * zusammengedrueckt. Die Obergrenze liegt bewusst unter der vollen
   * Bildschirmhoehe, damit die erste Ausflugsreihe noch angeschnitten
   * sichtbar bleibt - der Gast soll sehen, dass es weitergeht.
   */
	min-height: clamp(28rem, 22rem + 22vw, 42rem);
	overflow: hidden;
	background-color: var(--rst-deep-900);
	isolation: isolate;
	text-align: center;
}

.rst-hero__media,
.rst-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Der Verlauf endet nicht weich: unten sitzt eine harte Kante aus Tiefwasser. */
/* Gleichmäßige Abdunklung von 32 % – hell genug, dass das Bild wirkt,
   dunkel genug für sicheren Kontrast des weißen Textes. */
.rst-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(4, 38, 46, 0.34);
}

.rst-hero__inner {
	padding-block: var(--rst-space-7);
	color: #fff;
}

.rst-hero__content {
	max-width: 46rem;
	margin-inline: auto;
}

.rst-hero__eyebrow {
	color: var(--rst-lagoon-400);
}

.rst-hero__title {
	margin-top: var(--rst-space-3);
	color: #fff;
	font-size: var(--rst-fs-4xl);
	font-weight: 800;
}

.rst-hero__subtitle {
	margin-top: var(--rst-space-4);
	max-width: 40rem;
	margin-inline: auto;
	font-size: var(--rst-fs-lg);
	color: rgba(255, 255, 255, 0.9);
}

.rst-hero__actions {
	margin-top: var(--rst-space-5);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rst-space-3);
}

/* Suchfeld im Hero – der erste Handlungspfad, nicht erst der zweite. */
.rst-hero__search {
	max-width: 640px;
	margin: var(--rst-space-5) auto 0;
}

.rst-hero__search .rst-searchform {
	max-width: none;
	gap: 0;
	background: var(--rst-surface);
	border-radius: var(--rst-radius-xl);
	padding: 6px;
	box-shadow: var(--rst-shadow-lg);
}

.rst-hero__search .rst-input {
	height: 52px;
	border: 0;
	background: transparent;
	font-size: var(--rst-fs-md);
}

.rst-hero__search .rst-input:focus {
	box-shadow: none;
}

.rst-hero__search .rst-btn {
	min-height: 52px;
	border-radius: var(--rst-radius-lg);
	flex: none;
}

@media (max-width: 599px) {
	.rst-hero__search .rst-btn span {
		display: none;
	}

	.rst-hero__search .rst-btn {
		padding-inline: 1rem;
	}
}

/* Vertrauensleiste direkt unter dem Hero, auf der Kante sitzend. */
.rst-trustbar {
	background: var(--rst-deep-800);
	color: rgba(255, 255, 255, 0.92);
	border-top: 3px solid var(--rst-lagoon-500);
}

.rst-trustbar__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: var(--rst-space-4);
	list-style: none;
	margin: 0;
	padding-block: var(--rst-space-5);
}

.rst-trustbar__item {
	display: flex;
	align-items: center;
	gap: var(--rst-space-3);
	font-size: var(--rst-fs-sm);
	font-weight: 500;
}

.rst-trustbar__item .rst-icon {
	flex: none;
	color: var(--rst-lagoon-400);
}

/* Slider-Steuerung (Hero und Galerie teilen sich diese Klassen). */
.rst-slider__controls {
	position: absolute;
	right: var(--rst-gutter);
	bottom: var(--rst-space-6);
	display: flex;
	gap: var(--rst-space-2);
	z-index: 2;
}

.rst-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--rst-radius-sm);
	background: rgba(4, 38, 46, 0.35);
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background-color var(--rst-duration) var(--rst-ease);
}

.rst-slider__btn:hover {
	background: var(--rst-deep-800);
	border-color: #fff;
}

.rst-slider__dots {
	display: flex;
	gap: var(--rst-space-2);
	align-items: center;
}

.rst-slider__dot {
	width: 28px;
	height: 3px;
	background: rgba(255, 255, 255, 0.4);
	transition: background-color var(--rst-duration) var(--rst-ease);
}

.rst-slider__dot[aria-current="true"] {
	background: var(--rst-amber-500);
}

/* --------------------------------------------------------------------------
   2. Ausflugskarte
   -------------------------------------------------------------------------- */

.rst-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-lg);
	box-shadow: var(--rst-shadow-md);
	overflow: hidden;
	transition:
		box-shadow var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease),
		transform var(--rst-duration) var(--rst-ease);
}

.rst-card:hover,
.rst-card:focus-within {
	border-color: var(--rst-lagoon-400);
	box-shadow: var(--rst-shadow-lg);
	transform: translateY(-4px);
}

.rst-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--rst-lagoon-100);
	overflow: hidden;
}

.rst-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--rst-ease);
}

.rst-card:hover .rst-card__media img {
	transform: scale(1.04);
}

.rst-card__badges {
	position: absolute;
	left: var(--rst-space-3);
	bottom: var(--rst-space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-2);
	/* Positionierte Elemente ohne z-index liegen im Quelltext NACH dem
	   Kartenlink und damit ueber ihm. Die Chips (Dauer, Gruppengroesse)
	   sind reine Anzeige und duerfen den Klick nicht abfangen. */
	pointer-events: none;
}

.rst-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--rst-space-3);
	padding: var(--rst-space-5);
}

.rst-card__kicker {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xs);
	font-weight: 500;
	letter-spacing: var(--rst-tracking-wide);
	text-transform: uppercase;
	color: var(--rst-lagoon-700);
}

.rst-card__title {
	font-size: var(--rst-fs-lg);
	line-height: var(--rst-lh-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rst-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Ganze Karte klickbar, ohne verschachtelte Links und ohne JavaScript. */
.rst-card__title a::after,
.rst-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.rst-card__excerpt {
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rst-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--rst-space-3);
	margin-top: auto;
	padding-top: var(--rst-space-4);
	border-top: 1px solid var(--rst-line);
}

/*
 * KEIN z-index hier.
 *
 * Zuvor stand an dieser Stelle `position: relative; z-index: 2`. Damit lag
 * die Schaltflaeche „Entdecken" UEBER dem flaechendeckenden Link der Karte
 * (z-index: 1) und fing jeden Klick ab - ausgerechnet das Element, das am
 * deutlichsten nach einem Klick aussieht, war das einzige tote.
 *
 * Der Knopf ist reine Anzeige; der Klick gehoert dem Link darunter. Deshalb
 * wird er hier ausdruecklich aus der Stapelreihenfolge herausgehalten und
 * fuer Zeigergeraete durchlaessig gemacht.
 */
.rst-card__cta {
	position: static;
	pointer-events: none;
}

/* Breite Variante für Listen und „Ähnliche Ausflüge" auf Desktop. */
@media (min-width: 720px) {
	.rst-card--wide {
		flex-direction: row;
	}

	.rst-card--wide .rst-card__media {
		flex: 0 0 38%;
		aspect-ratio: auto;
	}
}

/* Kategorie-Kachel: Hochformat, Text auf dem Bild. */
.rst-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	border-radius: var(--rst-radius);
	overflow: hidden;
	background: var(--rst-deep-800);
	isolation: isolate;
}

.rst-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 420ms var(--rst-ease);
}

.rst-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(4, 38, 46, 0) 30%,
		rgba(4, 38, 46, 0.82) 100%
	);
}

.rst-tile:hover img {
	transform: scale(1.05);
}

.rst-tile__body {
	padding: var(--rst-space-5);
	color: #fff;
}

.rst-tile__title {
	color: #fff;
	font-size: var(--rst-fs-xl);
}

.rst-tile__title a {
	color: inherit;
	text-decoration: none;
}

.rst-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rst-tile__count {
	display: block;
	margin-top: var(--rst-space-1);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	color: var(--rst-lagoon-400);
}

/* --------------------------------------------------------------------------
   3. Datenchips – Tauchcomputer-Ästhetik
   Dauer, Gruppengröße, Abholung: kurze, prüfbare Fakten in Monospace.
   -------------------------------------------------------------------------- */

.rst-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	padding: 0.3125rem 0.625rem;
	background: var(--rst-lagoon-50);
	border: 1px solid var(--rst-lagoon-100);
	border-radius: var(--rst-radius-sm);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	font-variant-numeric: tabular-nums;
	color: var(--rst-deep-800);
	white-space: nowrap;
}

.rst-chip .rst-icon {
	color: var(--rst-lagoon-600);
}

.rst-chip--on-image {
	background: rgba(4, 38, 46, 0.72);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
	backdrop-filter: blur(3px);
}

.rst-chip--on-image .rst-icon {
	color: var(--rst-lagoon-400);
}

.rst-chip--accent {
	background: var(--rst-amber-100);
	border-color: var(--rst-amber-200);
	color: var(--rst-amber-700);
}

.rst-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-3) var(--rst-space-5);
	padding-block: var(--rst-space-4);
	border-block: 1px solid var(--rst-line);
	list-style: none;
	margin: 0;
}

.rst-meta-bar__item {
	display: flex;
	align-items: center;
	gap: var(--rst-space-2);
	font-size: var(--rst-fs-sm);
}

.rst-meta-bar__item .rst-icon {
	color: var(--rst-lagoon-600);
	flex: none;
}

.rst-meta-bar__label {
	color: var(--rst-ink-soft);
}

.rst-meta-bar__value {
	font-family: var(--rst-font-data);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: var(--rst-deep-800);
}

/* Bewertung */
.rst-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	font-size: var(--rst-fs-sm);
}

.rst-rating__stars {
	display: inline-flex;
	color: var(--rst-amber-500);
}

.rst-rating__stars .rst-icon {
	fill: currentColor;
	stroke: none;
}

.rst-rating__stars .rst-icon--empty {
	fill: none;
	stroke: currentColor;
	color: var(--rst-line-strong);
}

.rst-rating__value {
	font-family: var(--rst-font-data);
	font-weight: 500;
}

.rst-rating__count {
	color: var(--rst-ink-soft);
}

/* --------------------------------------------------------------------------
   4. Preise
   -------------------------------------------------------------------------- */

.rst-price {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	line-height: 1;
}

.rst-price__prefix {
	font-family: var(--rst-font-body);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-soft);
}

.rst-price__value {
	font-size: var(--rst-fs-xl);
	font-weight: 700;
	color: var(--rst-deep-900);
}

.rst-price__unit {
	font-family: var(--rst-font-body);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-soft);
}

.rst-price--lg .rst-price__value {
	font-size: var(--rst-fs-3xl);
}

/* Preistabelle */
.rst-pricing {
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius);
	overflow: hidden;
	background: var(--rst-surface);
}

.rst-pricing__table {
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.rst-pricing__table caption {
	padding: var(--rst-space-4) var(--rst-space-5);
	background: var(--rst-lagoon-50);
	border-bottom: 1px solid var(--rst-line);
	font-weight: 600;
	text-align: left;
	color: var(--rst-deep-800);
}

.rst-pricing__table th,
.rst-pricing__table td {
	padding: var(--rst-space-4) var(--rst-space-5);
	text-align: left;
	border-bottom: 1px solid var(--rst-line);
}

.rst-pricing__table thead th {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rst-ink-soft);
	background: var(--rst-shell);
}

.rst-pricing__table tbody tr:last-child th,
.rst-pricing__table tbody tr:last-child td {
	border-bottom: 0;
}

.rst-pricing__table tbody tr:hover {
	background: var(--rst-lagoon-50);
}

.rst-pricing__amount {
	font-family: var(--rst-font-data);
	font-weight: 500;
	font-size: var(--rst-fs-lg);
	color: var(--rst-deep-900);
	white-space: nowrap;
}

.rst-pricing__note {
	padding: var(--rst-space-4) var(--rst-space-5);
	background: var(--rst-shell);
	border-top: 1px solid var(--rst-line);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

/* Auf kleinen Displays wird die Tabelle zu gestapelten Zeilen. */
@media (max-width: 599px) {
	.rst-pricing__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.rst-pricing__table tbody tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--rst-space-4);
		border-bottom: 1px solid var(--rst-line);
	}

	.rst-pricing__table tbody tr:last-child {
		border-bottom: 0;
	}

	.rst-pricing__table th,
	.rst-pricing__table td {
		border-bottom: 0;
		padding-inline: var(--rst-space-4);
	}
}

/* Buchungsbox */
.rst-booking {
	padding: var(--rst-space-5);
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-top: 3px solid var(--rst-lagoon-500);
	border-radius: var(--rst-radius);
	box-shadow: var(--rst-shadow-sm);
}

.rst-booking__price {
	padding-bottom: var(--rst-space-4);
	border-bottom: 1px solid var(--rst-line);
}

.rst-booking__actions {
	display: grid;
	gap: var(--rst-space-3);
	margin-top: var(--rst-space-4);
}

.rst-booking__note {
	margin-top: var(--rst-space-4);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

@media (min-width: 1024px) {
	.rst-booking--sticky {
		position: sticky;
		top: calc(var(--rst-header-h) + var(--rst-space-4));
	}
}

/* Mobile Buchungsleiste am unteren Rand. */
.rst-booking-bar {
	position: sticky;
	bottom: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rst-space-4);
	padding: var(--rst-space-3) var(--rst-gutter);
	background: var(--rst-surface);
	border-top: 1px solid var(--rst-line);
	box-shadow: 0 -4px 16px rgba(4, 38, 46, 0.08);
}

@media (min-width: 1024px) {
	.rst-booking-bar {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   5. Filterleiste (Ausflugsarten)
   -------------------------------------------------------------------------- */

.rst-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-2);
	margin-block: var(--rst-space-5);
	list-style: none;
	padding: 0;
}

.rst-filters__link {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	padding: 0.5rem 1rem;
	min-height: 40px;
	background: var(--rst-surface);
	border: 1.5px solid var(--rst-line);
	border-radius: var(--rst-radius-pill);
	color: var(--rst-ink);
	font-size: var(--rst-fs-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease),
		color var(--rst-duration) var(--rst-ease);
}

.rst-filters__link:hover {
	border-color: var(--rst-lagoon-500);
	background: var(--rst-lagoon-50);
	color: var(--rst-deep-800);
}

.rst-filters__link[aria-current="true"] {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
}

.rst-filters__count {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xs);
	color: var(--rst-ink-soft);
}

.rst-filters__link[aria-current="true"] .rst-filters__count {
	color: var(--rst-lagoon-400);
}

/* --------------------------------------------------------------------------
   6. Abschnittsbausteine
   -------------------------------------------------------------------------- */

/* Warum wir – Icon, Titel, Text */
.rst-usp {
	display: flex;
	flex-direction: column;
	gap: var(--rst-space-3);
}

.rst-usp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--rst-radius);
	background: var(--rst-lagoon-50);
	border: 1px solid var(--rst-lagoon-100);
	color: var(--rst-deep-700);
}

.rst-usp__title {
	font-size: var(--rst-fs-lg);
}

.rst-usp__text {
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

/* Erfahrungsberichte */
.rst-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--rst-space-4);
	height: 100%;
	padding: var(--rst-space-5);
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius);
}

.rst-testimonial__text {
	flex: 1;
	font-size: var(--rst-fs-md);
	color: var(--rst-ink);
}

.rst-testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--rst-space-3);
	padding-top: var(--rst-space-4);
	border-top: 1px solid var(--rst-line);
}

.rst-testimonial__avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--rst-radius-pill);
	object-fit: cover;
	flex: none;
}

.rst-testimonial__name {
	font-weight: 600;
	line-height: 1.3;
}

.rst-testimonial__origin {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	color: var(--rst-ink-soft);
}

/* Häufige Fragen – funktioniert ohne JavaScript. */
.rst-faq {
	border-top: 1px solid var(--rst-line);
}

.rst-faq__item {
	border-bottom: 1px solid var(--rst-line);
}

.rst-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rst-space-4);
	padding: var(--rst-space-5) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--rst-font-display);
	font-size: var(--rst-fs-lg);
	font-weight: 600;
	color: var(--rst-deep-900);
}

.rst-faq__question::-webkit-details-marker {
	display: none;
}

.rst-faq__question .rst-icon {
	flex: none;
	margin-top: 0.2em;
	color: var(--rst-lagoon-600);
	transition: transform var(--rst-duration) var(--rst-ease);
}

.rst-faq__item[open] .rst-faq__question .rst-icon {
	transform: rotate(90deg);
}

.rst-faq__answer {
	padding-bottom: var(--rst-space-5);
	max-width: 52rem;
	color: var(--rst-ink-muted);
}

/* Programmablauf */
.rst-itinerary {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rst-itinerary__item {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--rst-space-4);
	padding-bottom: var(--rst-space-6);
}

.rst-itinerary__item::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	left: calc(5.5rem - var(--rst-space-4) / 2 - 0.5px);
	width: 1px;
	height: 100%;
	background: var(--rst-line-strong);
}

.rst-itinerary__item:last-child {
	padding-bottom: 0;
}

.rst-itinerary__item:last-child::before {
	display: none;
}

.rst-itinerary__time {
	position: relative;
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-sm);
	font-variant-numeric: tabular-nums;
	color: var(--rst-lagoon-700);
	text-align: right;
}

.rst-itinerary__time::after {
	content: "";
	position: absolute;
	top: 0.4rem;
	right: calc(-1 * var(--rst-space-4) / 2 - 4px);
	width: 9px;
	height: 9px;
	border-radius: var(--rst-radius-pill);
	background: var(--rst-lagoon-500);
	border: 2px solid var(--rst-surface);
}

.rst-itinerary__title {
	font-size: var(--rst-fs-md);
	font-weight: 600;
}

.rst-itinerary__text {
	margin-top: var(--rst-space-2);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

@media (max-width: 599px) {
	.rst-itinerary__item {
		grid-template-columns: 1fr;
		gap: var(--rst-space-2);
	}

	.rst-itinerary__item::before,
	.rst-itinerary__time::after {
		display: none;
	}

	.rst-itinerary__time {
		text-align: left;
	}
}

/* Leistungslisten */
.rst-list-check {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rst-space-3);
}

.rst-list-check li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: var(--rst-space-3);
	align-items: start;
}

.rst-list-check .rst-icon {
	margin-top: 0.22em;
	color: var(--rst-success);
}

.rst-list-check--excluded .rst-icon {
	color: var(--rst-ink-soft);
}

.rst-list-check--excluded li {
	color: var(--rst-ink-muted);
}

/* Handlungsaufforderung vor dem Footer */
.rst-cta {
	background: var(--rst-deep-800);
	color: #fff;
	border-top: 3px solid var(--rst-lagoon-500);
}

.rst-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rst-space-6);
	padding-block: var(--rst-space-8);
}

.rst-cta__title {
	color: #fff;
	font-size: var(--rst-fs-2xl);
	max-width: 34rem;
}

.rst-cta__text {
	margin-top: var(--rst-space-3);
	max-width: 34rem;
	color: rgba(255, 255, 255, 0.84);
}

.rst-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-3);
}

/* Hinweisbox */
.rst-notice {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: var(--rst-space-3);
	padding: var(--rst-space-4) var(--rst-space-5);
	background: var(--rst-amber-100);
	border-left: 3px solid var(--rst-amber-500);
	border-radius: 0 var(--rst-radius-sm) var(--rst-radius-sm) 0;
	font-size: var(--rst-fs-sm);
	color: var(--rst-deep-900);
}

.rst-notice .rst-icon {
	margin-top: 0.15em;
	color: var(--rst-amber-700);
}

.rst-notice--error {
	background: #fdeceb;
	border-left-color: var(--rst-error);
}

.rst-notice--success {
	background: #e8f5ee;
	border-left-color: var(--rst-success);
}

/* --------------------------------------------------------------------------
   7. Formulare
   -------------------------------------------------------------------------- */

.rst-form {
	display: grid;
	gap: var(--rst-space-5);
}

.rst-form__row {
	display: grid;
	gap: var(--rst-space-5);
}

@media (min-width: 600px) {
	.rst-form__row--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.rst-field {
	display: grid;
	gap: var(--rst-space-2);
}

.rst-field__label {
	font-size: var(--rst-fs-sm);
	font-weight: 600;
	color: var(--rst-deep-900);
}

.rst-field__required {
	color: var(--rst-error);
}

.rst-field__hint {
	font-size: var(--rst-fs-xs);
	color: var(--rst-ink-soft);
}

.rst-field__error {
	font-size: var(--rst-fs-xs);
	font-weight: 500;
	color: var(--rst-error);
}

.rst-input,
.rst-textarea,
.rst-select {
	width: 100%;
	padding: 0.75rem 0.875rem;
	min-height: 48px;
	background: var(--rst-surface);
	border: 1.5px solid var(--rst-line-strong);
	border-radius: var(--rst-radius);
	font-size: var(--rst-fs-md);
	color: var(--rst-ink);
	transition:
		border-color var(--rst-duration) var(--rst-ease),
		box-shadow var(--rst-duration) var(--rst-ease);
}

.rst-input::placeholder,
.rst-textarea::placeholder {
	color: var(--rst-ink-soft);
}

.rst-input:focus,
.rst-textarea:focus,
.rst-select:focus {
	/* Kein `outline: none`: Im Kontrastmodus von Windows werden Rahmen und
     Schatten ignoriert – der durchsichtige Umriss bleibt dort sichtbar und
     ist damit die einzige verlässliche Fokusanzeige. */
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-color: var(--rst-lagoon-600);
	box-shadow: 0 0 0 3px var(--rst-lagoon-100);
}

.rst-input[aria-invalid="true"],
.rst-textarea[aria-invalid="true"] {
	border-color: var(--rst-error);
}

.rst-textarea {
	min-height: 160px;
	resize: vertical;
}

.rst-checkbox {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: var(--rst-space-3);
	align-items: start;
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

.rst-checkbox input {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	accent-color: var(--rst-lagoon-600);
}

/* Honeypot – für Menschen und Screenreader unsichtbar, für Bots ausfüllbar. */
.rst-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Breadcrumb & Pagination
   -------------------------------------------------------------------------- */

.rst-breadcrumb {
	padding-block: var(--rst-space-4);
	font-size: var(--rst-fs-sm);
}

.rst-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rst-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rst-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	color: var(--rst-ink-soft);
}

.rst-breadcrumb li:not(:last-child)::after {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.5px solid var(--rst-line-strong);
	border-right: 1.5px solid var(--rst-line-strong);
	transform: rotate(45deg);
}

.rst-breadcrumb a {
	color: var(--rst-ink-muted);
	text-decoration: none;
}

.rst-breadcrumb a:hover {
	color: var(--rst-deep-700);
	text-decoration: underline;
}

.rst-breadcrumb [aria-current="page"] {
	color: var(--rst-deep-900);
	font-weight: 500;
}

.rst-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rst-space-2);
	margin-top: var(--rst-space-8);
}

.rst-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--rst-space-3);
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-sm);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink);
	text-decoration: none;
}

.rst-pagination .page-numbers:hover {
	border-color: var(--rst-lagoon-500);
	background: var(--rst-lagoon-50);
}

.rst-pagination .page-numbers.current {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
}

.rst-pagination .dots {
	border-color: transparent;
	background: transparent;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.rst-footer {
	background: var(--rst-deep-900);
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--rst-fs-sm);
}

.rst-footer a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.rst-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.rst-footer__main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--rst-space-7);
	padding-block: var(--rst-space-9) var(--rst-space-8);
}

.rst-footer__brand {
	grid-column: span 1;
	max-width: 28rem;
}

.rst-footer__about {
	margin-top: var(--rst-space-4);
	color: rgba(255, 255, 255, 0.66);
}

.rst-footer .rst-widget__title,
.rst-footer__heading {
	margin-bottom: var(--rst-space-4);
	color: #fff;
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	font-weight: 500;
	letter-spacing: var(--rst-tracking-wide);
	text-transform: uppercase;
}

.rst-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rst-space-3);
}

.rst-footer__contact li {
	display: flex;
	align-items: center;
	gap: var(--rst-space-3);
}

.rst-footer__contact .rst-icon {
	color: var(--rst-lagoon-400);
	flex: none;
}

.rst-social {
	display: flex;
	gap: var(--rst-space-2);
	margin-top: var(--rst-space-5);
}

.rst-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--rst-radius-sm);
	transition: background-color var(--rst-duration) var(--rst-ease);
}

.rst-social a:hover {
	background: var(--rst-lagoon-600);
	border-color: var(--rst-lagoon-600);
	color: #fff;
}

.rst-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rst-space-4);
	padding-block: var(--rst-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--rst-fs-xs);
}

.rst-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-4);
}

/* --------------------------------------------------------------------------
   10. Galerie & Lightbox
   -------------------------------------------------------------------------- */

.rst-gallery {
	display: grid;
	gap: var(--rst-space-3);
}

.rst-gallery__main {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--rst-radius);
	overflow: hidden;
	background: var(--rst-lagoon-100);
}

.rst-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rst-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(84px, 1fr);
	gap: var(--rst-space-2);
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: var(--rst-space-2);
}

.rst-gallery__thumb {
	aspect-ratio: 4 / 3;
	border: 2px solid transparent;
	border-radius: var(--rst-radius-sm);
	overflow: hidden;
	padding: 0;
}

.rst-gallery__thumb[aria-current="true"] {
	border-color: var(--rst-lagoon-500);
}

.rst-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rst-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var(--rst-gutter);
	background: rgba(4, 38, 46, 0.94);
}

.rst-lightbox[hidden] {
	display: none;
}

.rst-lightbox img {
	max-width: min(100%, 1400px);
	max-height: 86vh;
	object-fit: contain;
}

.rst-lightbox__close {
	position: absolute;
	top: var(--rst-space-4);
	right: var(--rst-space-4);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--rst-radius-sm);
	color: #fff;
}

.rst-lightbox__counter {
	position: absolute;
	bottom: var(--rst-space-5);
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-sm);
	color: rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
   11. Leere Zustände & Utilities
   -------------------------------------------------------------------------- */

.rst-empty {
	padding: var(--rst-space-9) var(--rst-space-5);
	text-align: center;
	border: 1px dashed var(--rst-line-strong);
	border-radius: var(--rst-radius);
	background: var(--rst-surface);
}

.rst-empty__title {
	font-size: var(--rst-fs-xl);
}

.rst-empty__text {
	margin-top: var(--rst-space-3);
	color: var(--rst-ink-muted);
}

.rst-empty__actions {
	margin-top: var(--rst-space-5);
}

.rst-layout-sidebar {
	display: grid;
	gap: var(--rst-space-7);
}

@media (min-width: 1024px) {
	.rst-layout-sidebar {
		grid-template-columns: minmax(0, 1fr) 22rem;
		gap: var(--rst-space-8);
		align-items: start;
	}
}

.rst-text-muted {
	color: var(--rst-ink-muted);
}

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

.rst-mt-6 {
	margin-top: var(--rst-space-6);
}

.rst-mt-8 {
	margin-top: var(--rst-space-8);
}

.rst-flow > * + * {
	margin-top: var(--rst-space-6);
}

/* --------------------------------------------------------------------------
   12. Ausflugsseite
   -------------------------------------------------------------------------- */

.rst-excursion__header {
	padding-block: var(--rst-space-4) var(--rst-space-6);
}

.rst-excursion__subtitle {
	margin-top: var(--rst-space-3);
	max-width: 46rem;
	font-size: var(--rst-fs-lg);
	color: var(--rst-ink-muted);
}

.rst-excursion__summary {
	font-size: var(--rst-fs-lg);
	line-height: var(--rst-lh-relaxed);
	color: var(--rst-ink);
}

.rst-excursion__block {
	scroll-margin-top: calc(var(--rst-header-h) + 1rem);
}

.rst-excursion__block + .rst-excursion__block {
	margin-top: var(--rst-space-8);
	padding-top: var(--rst-space-8);
	border-top: 1px solid var(--rst-line);
}

.rst-excursion__block .rst-edge {
	margin-top: var(--rst-space-3);
}

.rst-excursion__taxonomies {
	display: grid;
	gap: var(--rst-space-4);
}

.rst-booking__trust {
	margin-top: var(--rst-space-4);
	padding-top: var(--rst-space-4);
	border-top: 1px solid var(--rst-line);
	list-style: none;
	display: grid;
	gap: var(--rst-space-2);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

.rst-booking__trust li {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: var(--rst-space-2);
	align-items: start;
}

.rst-booking__trust .rst-icon {
	margin-top: 0.2em;
	color: var(--rst-success);
}

.rst-gallery__zoom {
	position: absolute;
	right: var(--rst-space-4);
	bottom: var(--rst-space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	padding: 0.5rem 0.875rem;
	background: rgba(4, 38, 46, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--rst-radius-sm);
	color: #fff;
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	backdrop-filter: blur(4px);
}

.rst-gallery__zoom:hover {
	background: var(--rst-deep-800);
	border-color: #fff;
}

.rst-lightbox__prev,
.rst-lightbox__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.75rem;
	line-height: 1;
}

.rst-lightbox__prev {
	left: var(--rst-space-4);
}

.rst-lightbox__next {
	right: var(--rst-space-4);
}

/* --------------------------------------------------------------------------
   13. Archiv-Werkzeugleiste
   -------------------------------------------------------------------------- */

.rst-archive__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rst-space-4);
	margin-bottom: var(--rst-space-5);
	padding-bottom: var(--rst-space-4);
	border-bottom: 1px solid var(--rst-line);
}

.rst-archive__count {
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-soft);
}

.rst-sort {
	display: flex;
	align-items: center;
	gap: var(--rst-space-3);
}

.rst-sort__label {
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

.rst-sort__select {
	width: auto;
	min-height: 40px;
	padding-block: 0.375rem;
	font-size: var(--rst-fs-sm);
}

/* --------------------------------------------------------------------------
   14. Blog & Seiten
   -------------------------------------------------------------------------- */

.rst-post__meta {
	margin-top: var(--rst-space-4);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-soft);
}

.rst-post__figure {
	margin-block: var(--rst-space-5);
}

.rst-post__figure img,
.rst-page__image {
	width: 100%;
	border-radius: var(--rst-radius);
}

/* --------------------------------------------------------------------------
   15. Suchformular
   -------------------------------------------------------------------------- */

.rst-searchform {
	display: flex;
	gap: var(--rst-space-2);
	max-width: 32rem;
	margin-inline: auto;
}

.rst-searchform .rst-input {
	flex: 1;
}

.rst-icon--flip {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   16. Block- und Builder-Ausgabe
   -------------------------------------------------------------------------- */

/* Blöcke bringen ihren eigenen Abschnittsabstand mit; ein zusätzlicher
   Gutenberg-Abstand würde die Rhythmik doppeln. */
.wp-block-redsea-excursions,
.wp-block-redsea-categories,
.wp-block-redsea-usp,
.wp-block-redsea-testimonials,
.wp-block-redsea-faq,
.wp-block-redsea-cta,
.wp-block-redsea-hero {
	margin-block: 0;
}

/* Volle Breite auch dann, wenn der Block in einem eingeschränkten
   Layout-Container steckt (Elementor, Divi, Bricks). */
.rst-hero,
.rst-cta,
.rst-trustbar {
	max-width: none;
}

/*
 * Die Varianten waren vertauscht: „compact" war hoeher als die Grundhoehe.
 * Wer die kompakte Fassung waehlte, bekam einen groesseren Hero - genau das
 * Gegenteil der Beschriftung.
 */
.rst-hero--compact {
	min-height: clamp(20rem, 16rem + 12vw, 26rem);
}

.rst-hero--tall {
	min-height: clamp(34rem, 26rem + 28vw, 50rem);
}

/* Volle Bildschirmhoehe abzueglich der Kopfleiste - fuer Startseiten, die
   ganz auf das Bild setzen. Mit dvh, damit die Adressleiste mobiler
   Browser die Hoehe nicht springen laesst. */
.rst-hero--full {
	min-height: calc(100vh - var(--rst-header-h));
	min-height: calc(100dvh - var(--rst-header-h));
}

/* Verlinkte Preisangabe im Fließtext */
.rst-price-inline {
	display: inline-flex;
	align-items: baseline;
	gap: var(--rst-space-2);
	padding: 0.25rem 0.625rem;
	background: var(--rst-lagoon-50);
	border: 1px solid var(--rst-lagoon-100);
	border-radius: var(--rst-radius-sm);
	text-decoration: none;
	color: var(--rst-deep-800);
}

.rst-price-inline:hover {
	background: var(--rst-lagoon-100);
	border-color: var(--rst-lagoon-400);
	color: var(--rst-deep-900);
}

.rst-price-inline__title {
	font-weight: 600;
}

.rst-price-inline__value {
	font-weight: 500;
	color: var(--rst-amber-700);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   17. Pill-Navigation
   Vorbild ist die Filterleiste der Referenz: eine Reihe abgerundeter Chips.
   Auf dem Handy wischbar mit Fangpunkten, auf dem Desktop mit Pfeilen statt
   einer sichtbaren Bildlaufleiste.
   -------------------------------------------------------------------------- */

.rst-pillnav {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--rst-space-2);
	margin-block: var(--rst-space-5);
}

.rst-pillnav__list {
	display: flex;
	gap: var(--rst-space-2);
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

/* Bildlaufleiste ausblenden – navigiert wird per Wischen oder Pfeil. */
.rst-pillnav__list::-webkit-scrollbar {
	display: none;
}

.rst-pillnav__item {
	flex: none;
	scroll-snap-align: start;
}

/* --- Ausflugsart-Pills (Vorbild: weiche graue Chips der Referenz) -----
   Keine sichtbare Umrandung, sondern eine ruhige Füllfläche. Dadurch wirkt
   eine lange Reihe nicht wie ein Gitter aus Kästchen, und der aktive Zustand
   sticht deutlich heraus. */

.rst-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	padding: 0.5625rem 1.125rem;
	min-height: 42px;
	background: #eef1f3;
	border: 1.5px solid transparent;
	border-radius: var(--rst-radius-pill);
	color: var(--rst-deep-900);
	font-size: var(--rst-fs-sm);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease),
		color var(--rst-duration) var(--rst-ease);
}

.rst-pill:hover {
	background: var(--rst-lagoon-100);
	border-color: var(--rst-lagoon-400);
	color: var(--rst-deep-900);
}

.rst-pill[aria-current="true"] {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
}

.rst-pill .rst-icon {
	color: var(--rst-deep-700);
}

.rst-pill[aria-current="true"] .rst-icon {
	color: var(--rst-lagoon-400);
}

.rst-pill__count {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xs);
	font-variant-numeric: tabular-nums;
	color: var(--rst-ink-soft);
}

.rst-pill[aria-current="true"] .rst-pill__count {
	color: var(--rst-lagoon-400);
}

/* Auf hellen Abschnitten braucht die Füllfläche etwas mehr Kontrast. */
.rst-section--surface .rst-pill,
.rst-pillnav--on-surface .rst-pill {
	background: var(--rst-shell);
}

/* Pfeile: nur auf dem Desktop, und nur wenn wirklich etwas verborgen ist. */
.rst-pillnav__arrow {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--rst-surface);
	border: 1.5px solid var(--rst-line);
	border-radius: var(--rst-radius-pill);
	color: var(--rst-deep-800);
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease);
}

.rst-pillnav__arrow:hover {
	background: var(--rst-lagoon-50);
	border-color: var(--rst-lagoon-500);
}

@media (min-width: 768px) {
	.rst-pillnav__arrow:not([hidden]) {
		display: inline-flex;
	}
}

/* Weiche Kante als Hinweis, dass rechts noch etwas folgt. */
.rst-pillnav[data-overflow="true"]::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 3rem;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(to right, transparent, var(--rst-bg));
}

@media (min-width: 768px) {
	.rst-pillnav[data-overflow="true"]::after {
		right: 44px;
	}
}

.rst-section--surface .rst-pillnav[data-overflow="true"]::after {
	background: linear-gradient(to right, transparent, var(--rst-surface));
}

/* --------------------------------------------------------------------------
   18. Top-Attraktionen
   Nummer in eigenem Feld links, Name daneben – wie in der Referenz.
   -------------------------------------------------------------------------- */

.rst-attractions {
	margin-block: var(--rst-space-6);
}

.rst-attractions__title {
	font-size: var(--rst-fs-xl);
}

.rst-attractions .rst-edge {
	margin-block: var(--rst-space-3) var(--rst-space-5);
}

.rst-attractions__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rst-attraction {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-sm);
	background: var(--rst-surface);
	color: var(--rst-ink);
	font-size: var(--rst-fs-sm);
	text-decoration: none;
	overflow: hidden;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease),
		color var(--rst-duration) var(--rst-ease);
}

.rst-attraction__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding-inline: 0.5rem;
	background: var(--rst-shell);
	border-right: 1px solid var(--rst-line);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	font-variant-numeric: tabular-nums;
	color: var(--rst-ink-soft);
}

.rst-attraction__name {
	padding: 0.5rem 0.875rem;
	font-weight: 500;
}

a.rst-attraction:hover {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
}

a.rst-attraction:hover .rst-attraction__number {
	background: var(--rst-deep-900);
	border-right-color: rgba(255, 255, 255, 0.2);
	color: var(--rst-lagoon-400);
}

/* --------------------------------------------------------------------------
   19. Schlagwörter am Seitenende
   -------------------------------------------------------------------------- */

.rst-tags {
	margin-top: var(--rst-space-8);
	padding-top: var(--rst-space-6);
	border-top: 1px solid var(--rst-line);
}

.rst-tags__title {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	font-weight: 500;
	letter-spacing: var(--rst-tracking-wide);
	text-transform: uppercase;
	color: var(--rst-ink-soft);
}

.rst-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-2);
	margin-top: var(--rst-space-4);
	padding: 0;
	list-style: none;
}

/* Schlagwort-Chips.
   Vorbild ist die zweite Referenz: ein abgesetztes Feld links, der Name
   rechts, alles in einem leicht abgerundeten Rechteck. Statt einer laufenden
   Nummer steht links die Anzahl der Beiträge – die ist für den Gast nützlich,
   eine Rangfolge wäre bei Schlagwörtern dagegen willkürlich. */

.rst-tag {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-sm);
	background: var(--rst-surface);
	color: var(--rst-ink);
	font-size: var(--rst-fs-sm);
	text-decoration: none;
	overflow: hidden;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease),
		color var(--rst-duration) var(--rst-ease);
}

.rst-tag__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding-inline: 0.5rem;
	background: #eef1f3;
	border-right: 1px solid var(--rst-line);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	font-variant-numeric: tabular-nums;
	color: var(--rst-ink-soft);
}

.rst-tag__name {
	padding: 0.5rem 0.875rem;
	font-weight: 500;
}

.rst-tag:hover {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
}

.rst-tag:hover .rst-tag__count {
	background: var(--rst-deep-900);
	border-right-color: rgba(255, 255, 255, 0.2);
	color: var(--rst-lagoon-400);
}

.rst-tag[aria-current="true"] {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
}

.rst-tag[aria-current="true"] .rst-tag__count {
	background: var(--rst-deep-900);
	border-right-color: rgba(255, 255, 255, 0.2);
	color: var(--rst-lagoon-400);
}

/* --------------------------------------------------------------------------
   20. Feinschliff der Chips
   -------------------------------------------------------------------------- */

/* Die Filterleiste steht direkt unter der Überschrift und bekommt darunter
   eine ruhige Trennlinie – wie in der Referenz. */
.rst-pillnav {
	margin-block: var(--rst-space-5) var(--rst-space-6);
	padding-bottom: var(--rst-space-5);
	border-bottom: 1px solid var(--rst-line);
}

/* Schlagwort-Wolke unterhalb der Ausflüge etwas stärker absetzen. */
.rst-tags--cloud {
	margin-top: var(--rst-space-9);
}

/* Chips brechen auf schmalen Bildschirmen um, statt zu überlaufen. */
.rst-tags__list {
	row-gap: var(--rst-space-2);
}

.rst-attractions__list {
	row-gap: var(--rst-space-2);
}

/* Sehr lange Namen dürfen die Zeile nicht sprengen. */
.rst-tag__name,
.rst-attraction__name {
	overflow-wrap: break-word;
	hyphens: none;
}

@media (max-width: 599px) {
	.rst-tag__name,
	.rst-attraction__name {
		padding: 0.5rem 0.75rem;
	}

	.rst-tag__count,
	.rst-attraction__number {
		min-width: 2rem;
	}

	/* Auf dem Handy ist die Filterleiste wischbar – die Trennlinie würde
     dann abgeschnitten wirken. */
	.rst-pillnav {
		padding-bottom: var(--rst-space-4);
	}

	.rst-pill {
		padding: 0.5rem 0.9375rem;
		min-height: 40px;
	}
}

/* --------------------------------------------------------------------------
   21. Weiterführende Verweise
   Zwei Formen: ohne Bild schlanke Chips, mit Bild kleine Kacheln. Gemischt
   würde die Reihe unruhig wirken, deshalb entscheidet der Abschnitt als
   Ganzes anhand des ersten vorhandenen Bildes.
   -------------------------------------------------------------------------- */

.rst-links {
	margin-top: var(--rst-space-8);
	padding-top: var(--rst-space-6);
	border-top: 1px solid var(--rst-line);
}

.rst-links__title {
	margin-bottom: var(--rst-space-4);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xs);
	font-weight: 500;
	letter-spacing: var(--rst-tracking-wide);
	text-transform: uppercase;
	color: var(--rst-ink-soft);
}

.rst-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Variante ohne Bild ---------------------------------------------- */

.rst-linkcard {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	padding: 0.5rem 0.875rem;
	background: #eef1f3;
	border: 1px solid transparent;
	border-radius: var(--rst-radius-sm);
	color: var(--rst-ink);
	font-size: var(--rst-fs-sm);
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease),
		color var(--rst-duration) var(--rst-ease);
}

.rst-linkcard:hover {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
}

.rst-linkcard__arrow {
	flex: none;
	color: var(--rst-lagoon-600);
	transition: transform var(--rst-duration) var(--rst-ease);
}

.rst-linkcard:hover .rst-linkcard__arrow {
	color: var(--rst-lagoon-400);
	transform: translateX(3px);
}

/* --- Variante mit Bild ------------------------------------------------ */

.rst-links--visual .rst-links__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: var(--rst-space-4);
}

.rst-links--visual .rst-linkcard {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
}

.rst-linkcard__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--rst-lagoon-100);
	overflow: hidden;
}

.rst-linkcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var(--rst-ease);
}

.rst-linkcard:hover .rst-linkcard__media img {
	transform: scale(1.04);
}

.rst-links--visual .rst-linkcard__label {
	padding: var(--rst-space-4) var(--rst-space-4) var(--rst-space-2);
	font-size: var(--rst-fs-md);
	line-height: var(--rst-lh-snug);
}

.rst-links--visual .rst-linkcard__arrow {
	margin: 0 var(--rst-space-4) var(--rst-space-4);
	align-self: flex-start;
}

/* ==========================================================================
   22. Runde Bildschaltflächen
   Vorbild: kreisrunde Bilder mit farbigem Ring in einer wischbaren Reihe.
   Der Ring nimmt die Abbruchkante auf – Lagune außen, Tiefwasser innen.
   ========================================================================== */

.rst-circles {
	margin-block: var(--rst-space-5);
}

.rst-circles__head {
	margin-bottom: var(--rst-space-5);
}

.rst-circles__head h2 {
	font-size: var(--rst-fs-2xl);
	font-weight: 700;
}

.rst-circles__nav {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--rst-space-2);
}

.rst-circles__list {
	display: flex;
	gap: var(--rst-space-4);
	margin: 0;
	padding: 0.25rem 0 var(--rst-space-2);
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.rst-circles__list::-webkit-scrollbar {
	display: none;
}

.rst-circles__item {
	flex: none;
	scroll-snap-align: start;
	width: 140px;
}

.rst-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rst-space-2);
	text-decoration: none;
	color: var(--rst-ink);
}

/* Der Ring läuft von warmem Sonnenlicht über Korallrot zu Tiefwasser –
   die Farbfolge der Vorlage, aber mit den Endpunkten dieses Themes, damit
   die Kreise nicht wie ein Fremdkörper neben den übrigen Abschnitten wirken.
   Über eine eigene Variable änderbar. */
:root {
	--rst-ring: linear-gradient(
		135deg,
		#f0a03c 0%,
		#e2617f 38%,
		#a34fa8 68%,
		#12697d 100%
	);
}

.rst-circle__ring {
	display: block;
	width: 124px;
	height: 124px;
	/* Vorlage: deutlich sichtbarer Farbring, dann ein weißer Spalt, dann das
     Bild. Der weiße Innenrand sitzt auf .rst-circle__media. */
	padding: 4px;
	border-radius: var(--rst-radius-pill);
	background: var(--rst-ring);
	transition: transform var(--rst-duration) var(--rst-ease);
}

.rst-circle:hover .rst-circle__ring,
.rst-circle:focus-visible .rst-circle__ring {
	transform: scale(1.04);
}

.rst-circle__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 4px solid var(--rst-surface);
	border-radius: var(--rst-radius-pill);
	background: var(--rst-lagoon-50);
	color: var(--rst-deep-700);
	overflow: hidden;
}

.rst-circle__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--rst-radius-pill);
}

.rst-circle__label {
	margin-top: var(--rst-space-1);
	font-size: var(--rst-fs-md);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: var(--rst-deep-900);
	/* Deutsche Komposita dürfen umbrechen statt abgeschnitten zu werden –
     ein halbes Wort ist unlesbar. */
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Die Vorlage zeigt unter dem Kreis nur den Namen. Die Anzahl bleibt für
   Screenreader erhalten, ist aber optisch ausgeblendet – sie würde die
   ruhige Reihe zerreißen. */
.rst-circle__count {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (max-width: 599px) {
	.rst-circles__item {
		width: 104px;
	}

	.rst-circle__ring {
		width: 92px;
		height: 92px;
		padding: 3px;
	}

	.rst-circle__media {
		border-width: 3px;
	}

	.rst-circle__label {
		font-size: var(--rst-fs-sm);
	}
}

/* ==========================================================================
   23. Themenblöcke am Seitenende
   Vorbild: dunkle Schaltflächen mit heller Zähler-Plakette.
   ========================================================================== */

.rst-taggroup__title {
	margin-bottom: var(--rst-space-5);
	font-size: var(--rst-fs-xl);
	font-weight: 700;
}

.rst-taggroup__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rst-tagchip {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	padding: 0.5625rem 0.875rem;
	background: var(--rst-deep-800);
	border: 1px solid var(--rst-deep-800);
	border-radius: var(--rst-radius);
	color: #fff;
	font-size: var(--rst-fs-sm);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease),
		transform var(--rst-duration) var(--rst-ease);
}

.rst-tagchip:hover {
	background: var(--rst-deep-700);
	border-color: var(--rst-lagoon-500);
	color: #fff;
	transform: translateY(-1px);
}

.rst-tagchip__count {
	padding: 0.125rem 0.4375rem;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--rst-radius-sm);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xs);
	font-variant-numeric: tabular-nums;
}

.rst-tagchip .rst-icon,
.rst-tagchip .rst-linkcard__arrow {
	color: var(--rst-lagoon-400);
}

/* ==========================================================================
   24. Attraktionen als Bildraster
   ========================================================================== */

.rst-attractions--visual .rst-attractions__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: var(--rst-space-4);
}

.rst-attractions--visual .rst-attraction {
	display: flex;
	flex-direction: column;
	gap: var(--rst-space-2);
	border: 0;
	background: none;
	overflow: visible;
}

.rst-attraction__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--rst-radius-lg);
	background: var(--rst-lagoon-100);
	overflow: hidden;
}

.rst-attraction__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms var(--rst-ease);
}

a.rst-attraction:hover .rst-attraction__media img {
	transform: scale(1.05);
}

.rst-attraction__badge {
	position: absolute;
	top: var(--rst-space-2);
	left: var(--rst-space-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding-inline: 0.375rem;
	background: rgba(4, 38, 46, 0.82);
	border-radius: var(--rst-radius-sm);
	color: #fff;
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xs);
	font-variant-numeric: tabular-nums;
	backdrop-filter: blur(3px);
}

.rst-attractions--visual .rst-attraction__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.rst-attractions--visual .rst-attraction__name {
	padding: 0;
	font-size: var(--rst-fs-sm);
	font-weight: 600;
	color: var(--rst-deep-900);
}

.rst-attraction__note {
	font-size: var(--rst-fs-xs);
	color: var(--rst-ink-soft);
}

a.rst-attraction:hover .rst-attraction__name {
	color: var(--rst-deep-700);
}

/* Die kompakte Form darf beim Überfahren nicht die Farbe der Bildform erben. */
.rst-attractions--visual a.rst-attraction:hover {
	background: none;
	color: inherit;
}

/* ==========================================================================
   25. Schwebende Handlungsaufforderung
   56 × 56 px rund, unten rechts. Auf breiten Bildschirmen klappt der Text
   beim Überfahren aus – auf dem Handy bleibt es beim Symbol, damit der Knopf
   keine Inhalte verdeckt.
   ========================================================================== */

.rst-fab {
	position: fixed;
	right: var(--rst-space-4);
	bottom: var(--rst-space-4);
	z-index: 70;
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	height: 56px;
	min-width: 56px;
	padding: 0 15px;
	background: var(--rst-lagoon-600);
	border-radius: var(--rst-radius-pill);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--rst-shadow-lg);
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		transform var(--rst-duration) var(--rst-ease);
}

.rst-fab:hover {
	background: var(--rst-lagoon-700);
	color: #fff;
	transform: translateY(-2px);
}

.rst-fab .rst-icon {
	flex: none;
}

.rst-fab__text {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: var(--rst-fs-sm);
	font-weight: 600;
	opacity: 0;
	transition:
		max-width 240ms var(--rst-ease),
		opacity 180ms var(--rst-ease);
}

@media (min-width: 1024px) {
	.rst-fab:hover .rst-fab__text,
	.rst-fab:focus-visible .rst-fab__text {
		max-width: 12rem;
		opacity: 1;
	}
}

/* Auf Ausflugsseiten liegt unten bereits die Buchungsleiste. */
.single-excursion .rst-fab {
	display: none;
}

/* ==========================================================================
   26. Vertrauenshinweise und Plaketten
   ========================================================================== */

.rst-badge {
	position: absolute;
	top: var(--rst-space-3);
	left: var(--rst-space-3);
	z-index: 2;
	/* Die Plakette liegt ueber dem flaechendeckenden Kartenlink und wuerde
	   in ihrer Ecke jeden Klick schlucken. Sie ist reine Auszeichnung, also
	   wird sie fuer den Zeiger durchlaessig gemacht. */
	pointer-events: none;
	padding: 4px 8px;
	background: var(--rst-amber-500);
	border-radius: var(--rst-radius-sm);
	color: var(--rst-deep-900);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rst-badge--hot {
	background: var(--rst-error);
	color: #fff;
}

/* Beruhigender Hinweis direkt unter der Schaltfläche. */
.rst-reassure {
	display: flex;
	align-items: flex-start;
	gap: var(--rst-space-2);
	margin-top: var(--rst-space-3);
	font-size: var(--rst-fs-xs);
	color: var(--rst-ink-muted);
}

.rst-reassure .rst-icon {
	flex: none;
	margin-top: 0.15em;
	color: var(--rst-success);
}

/* --------------------------------------------------------------------------
   27. Kreise als Filterleiste
   Auf Archivseiten markiert die aktive Auswahl den Kreis, statt ihn nur
   farblich zu tönen – bei runden Bildern wäre eine Tönung kaum zu erkennen.
   -------------------------------------------------------------------------- */

.rst-circles--filter {
	margin-bottom: var(--rst-space-6);
	padding-bottom: var(--rst-space-5);
	border-bottom: 1px solid var(--rst-line);
}

.rst-circles--filter .rst-circles__head h2 {
	font-size: var(--rst-fs-xl);
}

.rst-circle[aria-current="true"] .rst-circle__ring {
	background: var(--rst-deep-800);
}

.rst-circle[aria-current="true"] .rst-circle__media {
	border-color: var(--rst-lagoon-400);
}

.rst-circle[aria-current="true"] .rst-circle__label {
	color: var(--rst-lagoon-700);
}

/* Der aktive Kreis bekommt zusätzlich einen Haken, damit die Auswahl nicht
   allein über Farbe erkennbar ist. */
.rst-circle[aria-current="true"] .rst-circle__ring::after {
	content: "";
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 26px;
	height: 26px;
	border-radius: var(--rst-radius-pill);
	background: var(--rst-deep-800)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345BDBA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E")
		center / 14px no-repeat;
	border: 2px solid var(--rst-surface);
}

.rst-circle {
	position: relative;
}

.rst-circle__ring {
	position: relative;
}

/* Auf Archivseiten steht die Kreisreihe direkt unter dem Kopfbereich.
   Dort braucht sie weniger Luft nach oben als auf der Startseite. */
.rst-circles--filter {
	margin-top: var(--rst-space-5);
}

.rst-circles--filter .rst-circles__head {
	margin-bottom: var(--rst-space-4);
}

/* ==========================================================================
   28. Bewertungen
   ========================================================================== */

.rst-reviews {
	margin-top: var(--rst-space-7);
	padding-top: var(--rst-space-6);
	border-top: 1px solid var(--rst-line);
}

.rst-reviews__head h2 {
	font-size: var(--rst-fs-2xl);
}

.rst-reviews__summary {
	display: flex;
	align-items: center;
	gap: var(--rst-space-3);
	margin-top: var(--rst-space-2);
}

.rst-reviews__score {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

.rst-stars {
	display: inline-flex;
	gap: 2px;
	letter-spacing: 1px;
}

.rst-star {
	color: var(--rst-line-strong);
	font-size: 1.05rem;
	line-height: 1;
}

.rst-star.is-on {
	color: var(--rst-amber-500);
}

.rst-reviews__head .rst-edge {
	margin-top: var(--rst-space-4);
}

.rst-reviews__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rst-space-4);
	margin: var(--rst-space-5) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.rst-reviews__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.rst-review {
	padding: var(--rst-space-5);
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-lg);
	box-shadow: var(--rst-shadow-sm);
}

.rst-review__stars {
	margin-bottom: var(--rst-space-3);
}

.rst-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--rst-fs-md);
	line-height: var(--rst-lh-normal);
	color: var(--rst-ink);
}

.rst-review__text p:last-child {
	margin-bottom: 0;
}

.rst-review__author {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-2);
	align-items: baseline;
	margin-top: var(--rst-space-4);
	padding-top: var(--rst-space-3);
	border-top: 1px solid var(--rst-line);
	font-size: var(--rst-fs-sm);
}

.rst-review__author span {
	color: var(--rst-ink-soft);
}

/* ==========================================================================
   29. Anfrageformular
   ========================================================================== */

.rst-bookingform {
	margin-top: var(--rst-space-7);
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-xl);
	box-shadow: var(--rst-shadow-md);
	overflow: hidden;
	scroll-margin-top: calc(var(--rst-header-h) + 1rem);
}

.rst-bookingform__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rst-space-4);
	padding: var(--rst-space-6);
	background: var(--rst-deep-800);
	color: #fff;
}

.rst-bookingform__head h2 {
	margin: var(--rst-space-1) 0 0;
	font-size: var(--rst-fs-2xl);
	color: #fff;
}

.rst-bookingform__head .rst-eyebrow {
	color: var(--rst-lagoon-400);
}

.rst-bookingform__lead {
	margin-top: var(--rst-space-2);
	max-width: 34em;
	font-size: var(--rst-fs-sm);
	color: rgba(255, 255, 255, 0.82);
}

.rst-bookingform__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding: var(--rst-space-3) var(--rst-space-4);
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--rst-radius-lg);
	font-size: var(--rst-fs-2xs);
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
}

.rst-bookingform__price strong {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xl);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--rst-amber-500);
}

.rst-bookingform__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rst-space-6);
	padding: var(--rst-space-6);
}

@media (min-width: 900px) {
	.rst-bookingform__body {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* Auf dem Handy steht der Sofort-Kontakt VOR dem Formular. Wer schnell
   schreiben will, soll nicht erst an zehn Feldern vorbeiscrollen - die
   Reihenfolge im Quelltext bleibt die sinnvolle fuer Screenreader. */
@media (max-width: 899px) {
	.rst-bookingform__aside {
		order: -1;
	}
}

.rst-formgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rst-space-4);
}

@media (max-width: 599px) {
	.rst-formgrid > .rst-field:not(.rst-field--third) {
		grid-column: 1 / -1;
	}

	.rst-bookingform__head,
	.rst-bookingform__body {
		padding: var(--rst-space-5) var(--rst-space-4);
	}

	.rst-bookingform__price {
		align-items: flex-start;
	}
}

.rst-field--full {
	grid-column: 1 / -1;
}

.rst-field label {
	display: block;
	margin-bottom: var(--rst-space-2);
	font-size: var(--rst-fs-sm);
	font-weight: 600;
}

.rst-field label span[aria-hidden] {
	color: var(--rst-error);
}

/* Mindestens 50 px hoch und 16 px Schrift: kleinere Ziele trifft man auf dem
   Handy nicht zuverlaessig, und iOS zoomt bei kleinerer Schrift beim
   Antippen automatisch hinein. */
.rst-bookingform .rst-input,
.rst-bookingform .rst-textarea {
	min-height: 50px;
	font-size: 16px;
}

.rst-bookingform .rst-textarea {
	min-height: 7rem;
}

.rst-field--consent {
	margin-top: var(--rst-space-5);
	padding: var(--rst-space-4);
	background: var(--rst-shell);
	border-radius: var(--rst-radius);
}

.rst-field--consent label {
	display: flex;
	gap: var(--rst-space-3);
	align-items: flex-start;
	margin: 0;
	font-weight: 400;
	font-size: var(--rst-fs-sm);
	line-height: var(--rst-lh-snug);
	cursor: pointer;
}

.rst-field--consent input {
	margin-top: 0.15em;
	flex: none;
	width: 20px;
	height: 20px;
	accent-color: var(--rst-lagoon-600);
}

.rst-input[aria-invalid="true"],
.rst-textarea[aria-invalid="true"] {
	border-color: var(--rst-error);
	background: #fff7f7;
}

/* Der Honigtopf muss fuer Menschen unerreichbar sein, fuer Skripte aber wie
   ein normales Feld aussehen - deshalb kein display:none. */
.rst-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rst-bookingform__submit {
	margin-top: var(--rst-space-5);
	margin-bottom: 0;
}

.rst-bookingform__submit .rst-btn {
	width: 100%;
}

@media (min-width: 600px) {
	.rst-bookingform__submit .rst-btn {
		width: auto;
		min-width: 18rem;
	}
}

.rst-bookingform__aside {
	display: flex;
	flex-direction: column;
	gap: var(--rst-space-4);
}

@media (min-width: 900px) {
	.rst-bookingform__aside {
		position: sticky;
		top: calc(var(--rst-header-h) + 1rem);
	}
}

.rst-bookingform__direct {
	padding: var(--rst-space-5);
	background: var(--rst-shell);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-lg);
}

.rst-bookingform__direct h3 {
	margin: 0;
	font-size: var(--rst-fs-lg);
}

.rst-bookingform__direct p {
	margin: var(--rst-space-2) 0 var(--rst-space-4);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

.rst-bookingform__direct .rst-btn {
	width: 100%;
}

.rst-bookingform__call {
	margin-top: var(--rst-space-3);
	font-family: var(--rst-font-data);
	font-variant-numeric: tabular-nums;
}

.rst-bookingform__trust {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--rst-space-3);
}

.rst-bookingform__trust li {
	display: flex;
	gap: var(--rst-space-3);
	align-items: flex-start;
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

.rst-bookingform__trust .rst-icon {
	flex: none;
	margin-top: 0.15em;
	color: var(--rst-success);
}

.rst-btn--whatsapp {
	--_bg: #25d366;
	--_fg: #05341a;
	--_border: #25d366;
}

.rst-btn--whatsapp:hover {
	--_bg: #1fb857;
	--_border: #1fb857;
}

.rst-alert {
	display: flex;
	gap: var(--rst-space-3);
	align-items: flex-start;
	margin: var(--rst-space-5) var(--rst-space-6) 0;
	padding: var(--rst-space-4);
	border-radius: var(--rst-radius);
	font-size: var(--rst-fs-sm);
}

@media (max-width: 599px) {
	.rst-alert {
		margin-inline: var(--rst-space-4);
	}
}

.rst-alert p {
	margin: var(--rst-space-1) 0 0;
}

.rst-alert--success {
	background: var(--rst-lagoon-50);
	border: 1px solid var(--rst-lagoon-400);
	color: var(--rst-deep-900);
}

.rst-alert--success .rst-icon {
	color: var(--rst-success);
	flex: none;
}

.rst-alert--warn {
	background: #fff5f5;
	border: 1px solid var(--rst-error);
	color: #7a1f21;
}

/* ==========================================================================
   30. Mobile Buchungsleiste
   ========================================================================== */

.rst-booking-bar__price {
	min-width: 0;
}

.rst-booking-bar__actions {
	display: flex;
	gap: var(--rst-space-2);
	flex: none;
}

/* Der WhatsApp-Knopf bleibt quadratisch und zeigt nur das Symbol - auf einem
   360-px-Bildschirm ist fuer zwei beschriftete Knoepfe kein Platz. */
.rst-booking-bar__icon {
	width: 50px;
	min-width: 50px;
	padding: 0;
	justify-content: center;
}

.rst-booking-bar__main {
	min-width: 8.5rem;
}

/* ==========================================================================
   31. Verweisleiste unter Beiträgen
   Vorbild: Gruppenbezeichnung in Versalien, danach helle Schaltflächen mit
   weichem Rand.
   ========================================================================== */

.rst-taxlinks {
	margin-top: var(--rst-space-7);
	padding-top: var(--rst-space-6);
	border-top: 1px solid var(--rst-line);
	display: grid;
	gap: var(--rst-space-4);
}

.rst-taxlinks__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--rst-space-2) var(--rst-space-3);
}

.rst-taxlinks__label {
	flex: none;
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xs);
	font-weight: 500;
	letter-spacing: var(--rst-tracking-wide);
	text-transform: uppercase;
	color: var(--rst-lagoon-600);
}

.rst-taxlinks__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rst-taxchip {
	display: inline-flex;
	align-items: center;
	padding: 0.5625rem 1.125rem;
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-pill);
	color: var(--rst-deep-900);
	font-size: var(--rst-fs-sm);
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	box-shadow: var(--rst-shadow-sm);
	transition:
		border-color var(--rst-duration) var(--rst-ease),
		color var(--rst-duration) var(--rst-ease),
		transform var(--rst-duration) var(--rst-ease);
}

.rst-taxchip:hover {
	border-color: var(--rst-lagoon-500);
	color: var(--rst-lagoon-700);
	transform: translateY(-1px);
}

@media (max-width: 599px) {
	/* Auf schmalen Bildschirmen steht die Bezeichnung über den Schaltflaechen -
     nebeneinander bliebe fuer die Namen sonst kaum Platz. */
	.rst-taxlinks__row {
		display: block;
	}

	.rst-taxlinks__label {
		display: block;
		margin-bottom: var(--rst-space-2);
	}
}

/* --- Kreise auf der Blogseite ---------------------------------------- */

.rst-circles--blog {
	margin-bottom: var(--rst-space-6);
	padding-bottom: var(--rst-space-5);
	border-bottom: 1px solid var(--rst-line);
}

.rst-circles--blog .rst-circles__head h2 {
	font-size: var(--rst-fs-xl);
}

/* ==========================================================================
   32. Themenseiten
   Nur Feinschliff: Karten, Raster, Farben und Abstaende stammen unveraendert
   aus dem bestehenden System. Keine neuen Tokens, keine schweren Animationen.
   ========================================================================== */

/* --- Kopfbereich ------------------------------------------------------- */

.rst-money__head {
	max-width: 52rem;
}

.rst-money__head h1 {
	/* Etwas groesser als die Standardueberschrift: Die Themenseite ist ein
     Einstiegspunkt aus der Suche, der Titel ist ihr staerkstes Argument. */
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	line-height: var(--rst-lh-tight);
}

.rst-money__head .rst-section-head__lead {
	max-width: 42rem;
	font-size: var(--rst-fs-lg);
}

/* Belege unter dem Titel: eine ruhige Reihe, kein buntes Kaestchen. */
.rst-money__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rst-space-3) var(--rst-space-5);
	margin: var(--rst-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.rst-money__facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	font-size: var(--rst-fs-sm);
	font-weight: 500;
	color: var(--rst-ink-muted);
}

.rst-money__facts .rst-icon {
	flex: none;
	color: var(--rst-lagoon-600);
}

/* --- Galerie ----------------------------------------------------------- */

.rst-gallery--money {
	position: relative;
	margin-top: var(--rst-space-6);
}

.rst-gallery--money .rst-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rst-space-2);
	margin: var(--rst-space-2) 0 0;
	padding: 0;
	overflow: visible;
}

.rst-gallery--money .rst-gallery__main {
	margin: 0;
	min-width: 0;
	min-height: 0;
	border-radius: var(--rst-radius-lg);
	overflow: hidden;
	background: var(--rst-lagoon-100);
}

/* Das grosse Bild ist ein direktes Kind der figure - es gibt keinen
   Link-Wrapper mehr, weil die Lightbox auf das Bild selbst hoert. */
.rst-gallery--money .rst-gallery__main img,
.rst-gallery--money .rst-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms var(--rst-ease);
}

.rst-gallery--money .rst-gallery__main img {
	cursor: zoom-in;
}

.rst-gallery--money .rst-gallery__thumb {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--rst-radius-lg);
	overflow: hidden;
	background: var(--rst-lagoon-100);
	cursor: zoom-in;
}

/*
 * Die versteckten Eintraege dienen ausschliesslich der Lightbox.
 *
 * Diese Regel MUSS nach der vorherigen stehen: Beide haben dieselbe
 * Spezifitaet, also gewinnt die spaetere. Stand sie davor, setzte
 * `display: block` sie ausser Kraft - und die leeren Schaltflaechen
 * erschienen als tuerkise Kaesten im Raster.
 */
.rst-gallery--money .rst-gallery__thumb--hidden {
	display: none;
}

@media (max-width: 767px) {
	.rst-gallery--money .rst-gallery__main {
		aspect-ratio: 3 / 2;
	}

	.rst-gallery--money .rst-gallery__thumb {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 768px) {
	/*
   * Ein Raster fuer alles: das grosse Bild belegt beide Zeilen der ersten
   * Spalte, die vier kleinen fuellen die uebrigen Felder. Dadurch sind alle
   * Kacheln zwangslaeufig gleich hoch.
   */
	.rst-gallery--money {
		display: grid;
		grid-template-columns: 1.9fr 1fr 1fr;
		grid-template-rows: repeat(2, 1fr);
		gap: var(--rst-space-2);
		aspect-ratio: 2 / 1;
	}

	.rst-gallery--money .rst-gallery__main {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	/* display:contents loest den Container auf, damit die Schaltflaechen
     direkte Rasterfelder werden. */
	.rst-gallery--money .rst-gallery__thumbs {
		display: contents;
	}
}

.rst-gallery--money.is-solo {
	display: block;
	aspect-ratio: auto;
}

.rst-gallery--money .rst-gallery__main img:hover,
.rst-gallery--money .rst-gallery__thumb:hover img {
	transform: scale(1.04);
}

/* Ein zurueckhaltender Schleier beim Ueberfahren zeigt, dass die Kachel
   anklickbar ist - ohne das Bild zu verfaelschen. */
.rst-gallery--money .rst-gallery__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(4, 38, 46, 0);
	transition: background-color var(--rst-duration) var(--rst-ease);
	pointer-events: none;
}

.rst-gallery--money .rst-gallery__thumb:hover::after {
	background: rgba(4, 38, 46, 0.12);
}

/* Schwebende Schaltflaeche unten rechts. */
.rst-gallery__viewall {
	position: absolute;
	right: var(--rst-space-4);
	bottom: var(--rst-space-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	min-height: 44px;
	padding: 0 var(--rst-space-4);
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius-pill);
	color: var(--rst-deep-900);
	font-size: var(--rst-fs-sm);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--rst-shadow-md);
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		transform var(--rst-duration) var(--rst-ease),
		box-shadow var(--rst-duration) var(--rst-ease);
}

.rst-gallery__viewall:hover {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--rst-shadow-lg);
}

.rst-gallery__viewall .rst-icon {
	flex: none;
	color: var(--rst-lagoon-600);
}

.rst-gallery__viewall:hover .rst-icon {
	color: var(--rst-lagoon-400);
}

@media (max-width: 767px) {
	.rst-gallery__viewall {
		right: var(--rst-space-3);
		bottom: var(--rst-space-3);
		min-height: 40px;
		padding: 0 var(--rst-space-3);
		font-size: var(--rst-fs-xs);
	}
}

/* --- Einleitungstext --------------------------------------------------- */

.rst-money__intro {
	max-width: 44rem;
	margin-top: var(--rst-space-6);
	font-size: var(--rst-fs-lg);
}

/* --- Rangnummer -------------------------------------------------------- */

.rst-money__rank {
	position: relative;
}

/* Die Zahl kommt aus einer CSS-Variablen, die PHP setzt. Dadurch bleibt das
   Markup eine gewoehnliche Karte und Screenreader lesen die Nummer nicht als
   eigenen Inhalt vor dem Titel. */
.rst-money__rank::before {
	content: var(--rst-rank);
	position: absolute;
	top: calc(var(--rst-space-3) * -1);
	left: calc(var(--rst-space-3) * -1);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.5rem;
	background: var(--rst-deep-800);
	border: 3px solid var(--rst-surface);
	border-radius: var(--rst-radius-pill);
	color: var(--rst-amber-500);
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-md);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	line-height: 1;
	box-shadow: var(--rst-shadow-sm);
	transition: transform var(--rst-duration) var(--rst-ease);
}

.rst-money__rank:hover::before {
	transform: scale(1.06);
}

.rst-money__ranked {
	padding-top: var(--rst-space-3);
	padding-left: var(--rst-space-3);
}

@media (max-width: 599px) {
	.rst-money__rank::before {
		top: calc(var(--rst-space-2) * -1);
		left: calc(var(--rst-space-2) * -1);
		min-width: 34px;
		height: 34px;
		font-size: var(--rst-fs-sm);
	}
}

/* --- Handlungsaufruf unter der Auswahl --------------------------------- */

.rst-money__cta {
	display: flex;
	flex-direction: column;
	gap: var(--rst-space-4);
	margin-top: var(--rst-space-7);
	padding: var(--rst-space-6);
	background: var(--rst-deep-800);
	border-radius: var(--rst-radius-xl);
	color: #fff;
}

.rst-money__cta h2 {
	margin: 0;
	font-size: var(--rst-fs-xl);
	color: #fff;
}

.rst-money__cta p {
	margin: var(--rst-space-2) 0 0;
	max-width: 44ch;
	font-size: var(--rst-fs-sm);
	color: rgba(255, 255, 255, 0.82);
}

.rst-money__cta .rst-btn {
	flex: none;
	align-self: flex-start;
}

@media (min-width: 768px) {
	.rst-money__cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--rst-space-6);
	}

	.rst-money__cta .rst-btn {
		align-self: auto;
	}
}

@media (max-width: 599px) {
	.rst-money__cta {
		padding: var(--rst-space-5) var(--rst-space-4);
	}

	.rst-money__cta .rst-btn {
		width: 100%;
		align-self: stretch;
	}
}

/* --- Kachel einer Themenseite ------------------------------------------ */

.rst-card--money .rst-card__footer {
	gap: var(--rst-space-2);
	color: var(--rst-lagoon-700);
}

.rst-card--money .rst-card__footer .rst-icon {
	color: var(--rst-amber-500);
}

.rst-money__price {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	margin: var(--rst-space-3) 0 0;
	padding-top: var(--rst-space-3);
	border-top: 1px solid var(--rst-line);
	font-size: var(--rst-fs-2xs);
	color: var(--rst-ink-soft);
}

.rst-money__price strong {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-xl);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--rst-deep-900);
}

/* ==========================================================================
   33. Hero-Slider
   Ueberblendung statt Verschieben: kein Ruckeln, kein Layout-Sprung, und
   die Textebene bleibt waehrend des Wechsels vollkommen ruhig.
   ========================================================================== */

.rst-hero__media--slider {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.rst-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* Nur opacity animieren - das laeuft auf der Grafikkarte und kostet den
     Hauptprozess nichts. */
	transition: opacity 900ms var(--rst-ease);
	will-change: opacity;
}

.rst-hero__slide.is-active {
	opacity: 1;
}

.rst-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.rst-hero__slide {
		transition: none;
	}
}

/* --- Punkte ------------------------------------------------------------ */

.rst-hero__dots {
	position: absolute;
	left: 50%;
	bottom: var(--rst-space-5);
	z-index: 3;
	display: flex;
	gap: var(--rst-space-2);
	transform: translateX(-50%);
}

.rst-hero__dot {
	width: 34px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: var(--rst-radius-pill);
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		width var(--rst-duration) var(--rst-ease);
}

.rst-hero__dot:hover {
	background: rgba(255, 255, 255, 0.7);
}

.rst-hero__dot.is-active {
	width: 48px;
	background: var(--rst-amber-500);
}

/* Der Tastaturfokus muss auf dem dunklen Bild sichtbar bleiben. */
.rst-hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Auf dem Handy sind die Punkte kleiner, aber die Trefferflaeche bleibt
   gross genug - deshalb ein unsichtbarer Rand statt weniger Hoehe. */
@media (max-width: 599px) {
	.rst-hero__dots {
		bottom: var(--rst-space-4);
	}

	.rst-hero__dot {
		width: 26px;
		border-block: 10px solid transparent;
		background-clip: padding-box;
		height: 24px;
	}

	.rst-hero__dot.is-active {
		width: 36px;
	}
}

/* ==========================================================================
   34. Lange Textbloecke einklappen
   Die Klasse setzt erst JavaScript. Ohne JavaScript steht der Text
   vollstaendig da - so geht kein Inhalt verloren.
   ========================================================================== */

.rst-collapse {
	position: relative;
	overflow: hidden;
	transition: max-height 320ms var(--rst-ease);
}

/*
 * Weicher Auslauf ueber den letzten Zeilen.
 *
 * Eine harte Kante liest sich wie ein Fehler; der Verlauf zeigt, dass der
 * Text weitergeht. Er endet in der Hintergrundfarbe des Abschnitts, deshalb
 * die Variable statt eines festen Weiss.
 */
.rst-collapse::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 4.5rem;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		var(--rst-surface) 92%
	);
	pointer-events: none;
	transition: opacity 240ms var(--rst-ease);
}

/* Auf getoenten Abschnitten muss der Verlauf deren Farbe treffen. */
.rst-section--surface .rst-collapse::after,
.rst-shell .rst-collapse::after {
	background: linear-gradient(
		to bottom,
		rgba(244, 247, 246, 0) 0%,
		var(--rst-shell) 92%
	);
}

/* Aufgeklappt verschwindet der Verlauf. */
.rst-collapse[style*="none"]::after,
.rst-collapse.is-open::after {
	opacity: 0;
}

.rst-collapse__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--rst-space-2);
	margin-top: var(--rst-space-3);
	padding: 0.625rem 0;
	min-height: 44px;
	background: none;
	border: 0;
	color: var(--rst-lagoon-700);
	font-family: inherit;
	font-size: var(--rst-fs-sm);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: color var(--rst-duration) var(--rst-ease);
}

.rst-collapse__toggle:hover {
	color: var(--rst-deep-800);
}

.rst-collapse__toggle:focus-visible {
	outline: 2px solid var(--rst-lagoon-600);
	outline-offset: 3px;
	border-radius: var(--rst-radius-sm);
}

/* Pfeil aus reinem CSS - ein zusaetzliches Symbol waere hier Ballast. */
.rst-collapse__toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--rst-duration) var(--rst-ease);
}

.rst-collapse__toggle[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.rst-collapse,
	.rst-collapse::after,
	.rst-collapse__toggle::after {
		transition: none;
	}
}

/* Stichpunktlisten brauchen einen kürzeren Verlauf: Bei vier Zeilen Text
   verdeckt ein 4,5rem hoher Schleier fast die Hälfte, bei einer Liste mit
   Abständen wären es zwei ganze Punkte. */
ul.rst-collapse::after {
	height: 3rem;
}

/* Der Knopf steht bei Listen etwas näher am Inhalt. */
ul.rst-collapse + .rst-collapse__toggle {
	margin-top: var(--rst-space-2);
}

/* ==========================================================================
   35. Preiszeilen
   Vorbild: Name links, Preis rechts. Kein Tabellen-Layout - das bricht auf
   schmalen Schirmen nicht sauber um.
   ========================================================================== */

.rst-prices {
	margin-top: var(--rst-space-7);
}

.rst-prices__heading {
	margin-bottom: var(--rst-space-4);
	font-size: var(--rst-fs-xl);
}

.rst-prices__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rst-line);
}

.rst-prices__item {
	border-bottom: 1px solid var(--rst-line);
}

/*
 * Die ganze Zeile ist der Link - auch der Preis.
 *
 * Ein Preis, der wie eine Angabe aussieht, sich aber anklicken laesst, muss
 * ueberall klickbar sein. Waere nur der Name verlinkt, traefe jeder Griff
 * nach dem Preis ins Leere.
 */
.rst-prices__link {
	display: flex;
	/* center statt baseline: Bei zweizeiligen Titeln rutschte der Preis mit
	   der ersten Textzeile nach oben und stand nicht mehr neben dem Namen. */
	align-items: center;
	gap: var(--rst-space-3);
	min-height: 72px;
	padding: var(--rst-space-3) var(--rst-space-2);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--rst-duration) var(--rst-ease);
}

.rst-prices__link:hover {
	background: var(--rst-shell);
}

.rst-prices__link:focus-visible {
	outline: 2px solid var(--rst-lagoon-600);
	outline-offset: -2px;
}

.rst-prices__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: var(--rst-radius);
	overflow: hidden;
	background: var(--rst-lagoon-100);
}

.rst-prices__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms var(--rst-ease);
}

.rst-prices__link:hover .rst-prices__thumb img {
	transform: scale(1.06);
}

/*
 * flex: 1 1 auto MIT min-width: 0.
 *
 * Ohne min-width verweigert ein Flex-Element das Schrumpfen unter seine
 * Inhaltsbreite. Ein langer Ausflugsname schob den Preis dadurch aus der
 * Zeile heraus - auf dem Handy war von "ab 120 €" nur noch "11 €" zu sehen.
 * Genau dieser Fehler war auf dem Screenshot zu sehen.
 */
.rst-prices__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rst-prices__name {
	font-weight: 600;
	font-size: var(--rst-fs-md);
	line-height: var(--rst-lh-snug);
	color: var(--rst-deep-900);
}

.rst-prices__link:hover .rst-prices__name {
	color: var(--rst-lagoon-700);
}

.rst-prices__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--rst-fs-2xs);
	color: var(--rst-ink-muted);
}

/* Die Punktlinie entfaellt: Sie fuehrte das Auge, kostete aber genau den
   Platz, den der Preis braucht. Der Preisblock rechts genuegt als Anker. */
.rst-prices__dots {
	display: none;
}

/*
 * Der Preis als eigener Block - nicht als Textfragment.
 *
 * Er ist die Zahl, wegen der die Seite aufgerufen wird. Ein heller Kasten
 * mit klarem Rand macht ihn auf einen Blick auffindbar, auch wenn zwanzig
 * Zeilen untereinander stehen.
 */
.rst-prices__value {
	flex: none;
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	padding: 0.4rem 0.75rem;
	background: var(--rst-surface);
	border: 1px solid var(--rst-line);
	border-radius: var(--rst-radius);
	white-space: nowrap;
	transition:
		border-color var(--rst-duration) var(--rst-ease),
		background-color var(--rst-duration) var(--rst-ease);
}

.rst-prices__link:hover .rst-prices__value {
	background: var(--rst-lagoon-50);
	border-color: var(--rst-lagoon-400);
}

.rst-prices__prefix {
	font-size: var(--rst-fs-2xs);
	color: var(--rst-ink-muted);
}

.rst-prices__value strong {
	font-family: var(--rst-font-data);
	/* Deutlich groesser als zuvor (war fs-lg): Der Preis ist das
	   Entscheidungskriterium und darf die Zeile dominieren. */
	font-size: var(--rst-fs-2xl);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	color: var(--rst-deep-900);
}

.rst-prices__unit {
	font-size: var(--rst-fs-2xs);
	color: var(--rst-ink-muted);
}

.rst-prices__ask {
	font-size: var(--rst-fs-xs);
	color: var(--rst-ink-muted);
}

.rst-prices__go {
	display: inline-flex;
	align-items: center;
	margin-left: var(--rst-space-2);
	color: var(--rst-lagoon-600);
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity var(--rst-duration) var(--rst-ease),
		transform var(--rst-duration) var(--rst-ease);
}

.rst-prices__link:hover .rst-prices__go,
.rst-prices__link:focus-visible .rst-prices__go {
	opacity: 1;
	transform: translateX(0);
}

.rst-prices__note {
	margin-top: var(--rst-space-3);
	font-size: var(--rst-fs-sm);
	color: var(--rst-ink-muted);
}

@media (max-width: 599px) {
	.rst-prices__link {
		gap: var(--rst-space-3);
		min-height: 76px;
	}

	.rst-prices__thumb {
		width: 56px;
		height: 56px;
	}

	.rst-prices__name {
		font-size: var(--rst-fs-sm);
	}

	/* Der Preiskasten bleibt, wird aber kompakter - der Betrag selbst
	   behaelt seine Groesse, denn genau er soll auffallen. */
	.rst-prices__value {
		padding: 0.3rem 0.5rem;
		gap: 0.2rem;
	}

	.rst-prices__value strong {
		font-size: var(--rst-fs-xl);
	}

	.rst-prices__unit,
	.rst-prices__go {
		display: none;
	}
}

/* ==========================================================================
   36. Verweis auf Preislisten
   ========================================================================== */

.rst-pricepromo {
	display: grid;
	gap: var(--rst-space-5);
	margin-top: var(--rst-space-7);
	padding: var(--rst-space-6);
	background: var(--rst-deep-800);
	border-radius: var(--rst-radius-xl);
	color: #fff;
}

@media (min-width: 900px) {
	.rst-pricepromo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
		gap: var(--rst-space-6);
	}
}

.rst-pricepromo .rst-eyebrow {
	color: var(--rst-lagoon-400);
}

.rst-pricepromo__heading {
	margin: var(--rst-space-1) 0 0;
	font-size: var(--rst-fs-xl);
	color: #fff;
}

.rst-pricepromo__text p {
	margin: var(--rst-space-2) 0 0;
	font-size: var(--rst-fs-sm);
	color: rgba(255, 255, 255, 0.82);
}

.rst-pricepromo__list {
	display: grid;
	gap: var(--rst-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rst-pricepromo__link {
	display: flex;
	align-items: center;
	gap: var(--rst-space-3);
	min-height: 56px;
	padding: var(--rst-space-3) var(--rst-space-4);
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--rst-radius-lg);
	color: #fff;
	text-decoration: none;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		transform var(--rst-duration) var(--rst-ease);
}

.rst-pricepromo__link:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: translateX(3px);
}

.rst-pricepromo__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.rst-pricepromo__title {
	flex: 1;
	font-weight: 600;
	font-size: var(--rst-fs-sm);
}

.rst-pricepromo__count {
	flex: none;
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xs);
	color: var(--rst-lagoon-400);
	white-space: nowrap;
}

.rst-pricepromo__link .rst-icon {
	flex: none;
	color: var(--rst-amber-500);
}

@media (max-width: 599px) {
	.rst-pricepromo {
		padding: var(--rst-space-5) var(--rst-space-4);
	}

	.rst-pricepromo__count {
		display: none;
	}
}

/* ==========================================================================
   37. Ausflugskarte: ganze Flaeche klickbar, Preis deutlicher
   ========================================================================== */

/*
 * Der Titel-Link wird ueber die ganze Karte gezogen.
 *
 * Das ist die etablierte Loesung fuer klickbare Karten: EIN Link im
 * Quelltext, aber die volle Flaeche als Trefferbereich. Ein zusaetzliches
 * <a> um die Karte wuerde denselben Verweis doppelt vorlesen lassen.
 */
.rst-card {
	position: relative;
}

.rst-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Der Fokusrahmen gehoert an die Karte, nicht an den Titeltext - sonst
   umrandet er bei Tastaturbedienung nur zwei Woerter. */
.rst-card:focus-within {
	outline: 2px solid var(--rst-lagoon-600);
	outline-offset: 3px;
}

.rst-card__link:focus-visible {
	outline: none;
}

/*
 * Nur die Ausflugskarte.
 *
 * .rst-card__footer nutzen auch die Beitrags- und die Themenseiten-Karte.
 * Eine allgemeine Regel haette deren Fusszeilen mit veraendert - dort steht
 * aber ein Datum bzw. eine Anzahl, kein Preis.
 */
.rst-card--excursion .rst-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rst-space-3);
	flex-wrap: wrap;
}

/* --- Preis auf der Karte --------------------------------------------- */

.rst-card__footer .rst-price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0;
}

.rst-card__footer .rst-price__prefix,
.rst-card__footer .rst-price__unit {
	font-size: var(--rst-fs-2xs);
	color: var(--rst-ink-muted);
}

/* Groesser und dunkler als zuvor: Auf einer Uebersicht entscheidet der
   Preis, welche Karte ueberhaupt geoeffnet wird. */
.rst-card__footer .rst-price__value {
	font-family: var(--rst-font-data);
	font-size: var(--rst-fs-2xl);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	color: var(--rst-deep-900);
}

/* --- Entdecken ------------------------------------------------------- */

/*
 * Als Knopf gestaltet, nicht als Textzeile.
 *
 * Er bleibt ein <span>: Der Klick faellt ohnehin auf den flaechendeckenden
 * Link. Ein echter zweiter Link waere eine Dublette, ein <button> ohne
 * Funktion waere eine Luege gegenueber Screenreadern.
 */
.rst-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	background: var(--rst-lagoon-50);
	border: 1px solid var(--rst-lagoon-400);
	border-radius: var(--rst-radius-pill);
	color: var(--rst-lagoon-700);
	font-size: var(--rst-fs-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color var(--rst-duration) var(--rst-ease),
		border-color var(--rst-duration) var(--rst-ease),
		color var(--rst-duration) var(--rst-ease),
		transform var(--rst-duration) var(--rst-ease);
}

.rst-card:hover .rst-card__cta,
.rst-card:focus-within .rst-card__cta {
	background: var(--rst-deep-800);
	border-color: var(--rst-deep-800);
	color: #fff;
	transform: translateX(2px);
}

.rst-card__cta .rst-icon {
	flex: none;
}

@media (max-width: 599px) {
	.rst-card__footer {
		gap: var(--rst-space-2);
	}

	.rst-card__footer .rst-price__value {
		font-size: var(--rst-fs-xl);
	}

	.rst-card__cta {
		padding: 0.45rem 0.75rem;
		font-size: var(--rst-fs-xs);
	}
}