/* ==========================================================================
   HWP Reisen · Frontend
   --------------------------------------------------------------------------
   Farben und Schriften wie im Startseiten-Layout. Variablen sind hier
   erlaubt, weil diese Datei regulär im <head> landet und nicht in einem
   YOOtheme-Element-CSS-Feld, wo :root nie matcht.

   Kontraste gerechnet, nicht geschätzt:
     #3E3C36 auf #FFFAE6 ....... 10,54:1
     #6B6964 auf #FFFAE6 .......  5,24:1
     #8A6A1E auf #FFFAE6 .......  4,82:1
     #FFFFFF auf #8A6A1E .......  5,05:1
     #FFFFFF auf #6B6964 .......  5,48:1
     #FFFFFF auf #59564C .......  7,34:1
     #E4CE94 auf #45433B .......  6,40:1
   Alle über WCAG AA (4,5:1).
   ========================================================================== */

.hwp-uebersicht,
.hwp-suchband,
.hwp-reise,
.hwp-overlay,
.hwp-formularseite {
	--hwp-creme:      #FFFAE6;
	--hwp-creme-tief: #F5EFD8;
	--hwp-grau:       #6B6964;
	--hwp-logo:       #59564C;
	--hwp-tief:       #45433B;
	--hwp-text:       #3E3C36;
	--hwp-leise:      #6B6964;
	--hwp-gold:       #8A6A1E;
	--hwp-gold-tief:  #6E5416;
	--hwp-gold-hell:  #E4CE94;
	--hwp-weiss:      #FFFFFF;
	--hwp-rand:       #E8DFC8;

	--hwp-titel: "Prata", Georgia, serif;
	--hwp-text-schrift: "Inter", system-ui, -apple-system, sans-serif;

	--hwp-zeit: .25s;
	--hwp-breite: 1240px;
}

/* Die meisten Themes setzen box-sizing global — verlassen kann man sich
   darauf aber nicht. Ohne diese Regel addiert sich der Innenabstand auf die
   Breite und das Layout läuft auf schmalen Schirmen seitlich aus dem Bild. */
.hwp-uebersicht, .hwp-uebersicht *,
.hwp-suchband, .hwp-suchband *,
.hwp-reise, .hwp-reise *,
.hwp-overlay, .hwp-overlay *,
.hwp-formularseite, .hwp-formularseite *,
.hwp-kalender, .hwp-kalender *,
.hwp-kacheln, .hwp-kacheln * {
	box-sizing: border-box;
}

.hwp-breite {
	width: 100%;
	max-width: var(--hwp-breite);
	margin-inline: auto;
	padding-inline: 28px;
}

/* Prata gibt es nur in einem Schnitt (400), ein Bold existiert nicht. Die
   Kontur legt eine feine Linie in Textfarbe auf die Glyphen und lässt sie
   halbfett wirken. Über etwa 0.8px ziehen sich die feinen Serifen zu. */
.hwp-suchband__titel,
.hwp-uebersicht__titel,
.hwp-detailkopf__titel,
.hwp-block__titel,
.hwp-overlay__titel,
.hwp-formularblock__titel {
	font-family: var(--hwp-titel);
	font-weight: 400;
	line-height: 1.16;
	-webkit-text-stroke: .5px currentColor;
	paint-order: stroke fill;
	margin: 0;
}


/* ==========================================================================
   1 · KNÖPFE
   ========================================================================== */
.hwp-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 34px;
	border: 0;
	border-radius: 0;
	font-family: var(--hwp-text-schrift);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hwp-zeit) ease, color var(--hwp-zeit) ease;
}
.hwp-knopf--gold {
	background-color: var(--hwp-gold);
	color: var(--hwp-weiss);
}
.hwp-knopf--gold:hover,
.hwp-knopf--gold:focus {
	background-color: var(--hwp-gold-tief);
	color: var(--hwp-weiss);
}
.hwp-knopf--rand {
	background-color: transparent;
	color: var(--hwp-logo);
	box-shadow: inset 0 0 0 2px var(--hwp-rand);
}
.hwp-knopf--rand:hover {
	box-shadow: inset 0 0 0 2px var(--hwp-logo);
	color: var(--hwp-logo);
}
.hwp-knopf:focus-visible {
	outline: 3px solid var(--hwp-gold);
	outline-offset: 3px;
}


/* ==========================================================================
   2 · SUCHBAND
   ========================================================================== */
.hwp-suchband {
	background-color: var(--hwp-grau);
	padding: clamp(44px, 5vw, 64px) 0;
}
.hwp-suchband--creme {
	background-color: var(--hwp-creme-tief);
}
.hwp-suchband--blank {
	background-color: transparent;
	padding: 0;
}
.hwp-suchband__innen {
	width: 100%;
	max-width: var(--hwp-breite);
	margin-inline: auto;
	padding-inline: 28px;
}
.hwp-suchband__titel {
	color: var(--hwp-weiss);
	text-align: center;
	margin-bottom: 34px;
	font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.hwp-suchband--creme .hwp-suchband__titel,
.hwp-suchband--blank .hwp-suchband__titel {
	color: var(--hwp-logo);
}


/* ==========================================================================
   3 · SUCHFORMULAR
   Die Datumsfelder sind native <input type="date">: der Kalender kommt vom
   Browser bzw. Betriebssystem. Für eine überwiegend ältere Zielgruppe die
   sicherste Variante — gewohnte Bedienung, auf dem Handy das Systemrad, und
   es lädt kein zusätzliches Skript.

   Die Beschriftungen stehen sichtbar über den Feldern statt als Platzhalter
   darin: sonst ist nach dem Ausfüllen nicht mehr erkennbar, welches Feld
   welches ist.
   ========================================================================== */
.hwp-suche {
	position: relative;   /* Bezug für das Kalender-Popup */
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr auto;
	gap: 16px;
	align-items: end;
	margin: 0;
}
.hwp-suche__feld {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
	margin: 0;
}
.hwp-suche__label {
	font-family: var(--hwp-text-schrift);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hwp-weiss);
}
.hwp-suchband--creme .hwp-suche__label,
.hwp-suchband--blank .hwp-suche__label,
.hwp-uebersicht__filter .hwp-suche__label {
	color: var(--hwp-logo);
}
.hwp-suche__box {
	display: flex;
	background-color: var(--hwp-weiss);
	min-height: 60px;
	position: relative;
	border: 1px solid var(--hwp-rand);
}
.hwp-suche__symbol {
	width: 58px;
	flex: none;
	background-color: var(--hwp-gold);
	color: var(--hwp-weiss);
	display: grid;
	place-items: center;
}
.hwp-suche__symbol svg {
	width: 23px;
	height: 23px;
}
.hwp-suche select,
.hwp-suche input[type="date"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--hwp-text-schrift);
	font-size: 1rem;
	font-weight: 600;
	color: var(--hwp-logo);
	padding: 0 18px;
	height: auto;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}
.hwp-suche select:focus,
.hwp-suche input[type="date"]:focus {
	outline: 2px solid var(--hwp-gold);
	outline-offset: -2px;
	background: transparent;
	box-shadow: none;
}

/* Eigener Auswahlpfeil: das Systemdreieck sitzt je nach Browser woanders. */
.hwp-suche__box--wahl::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	pointer-events: none;
	border-right: 2px solid var(--hwp-logo);
	border-bottom: 2px solid var(--hwp-logo);
	transform: rotate(45deg);
}
.hwp-suche__box--wahl select {
	padding-right: 46px;
}

/* Kalendersymbol vergrößern. Den Pseudoselektor kennt nur WebKit/Blink;
   Firefox zeigt sein eigenes — das Feld bleibt auch ohne voll bedienbar. */
.hwp-suche input[type="date"] {
	padding-right: 14px;
	cursor: pointer;
}
.hwp-suche input[type="date"]::-webkit-calendar-picker-indicator {
	width: 26px;
	height: 26px;
	cursor: pointer;
	opacity: .55;
	transition: opacity var(--hwp-zeit) ease;
}
.hwp-suche input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

.hwp-suche__knopf {
	min-height: 60px;
	padding: 0 44px;
	border: 0;
	border-radius: 0;
	background-color: var(--hwp-gold);
	color: var(--hwp-weiss);
	font-family: var(--hwp-text-schrift);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--hwp-zeit) ease;
}
.hwp-suche__knopf:hover {
	background-color: var(--hwp-gold-tief);
}
.hwp-suche__knopf:focus-visible {
	outline: 3px solid var(--hwp-weiss);
	outline-offset: 3px;
}


/* ==========================================================================
   3b · EIGENER KALENDER
   Ersetzt die nativen Datumsfelder, sobald JavaScript läuft. Grund: beim
   nativen Feld ist nur das winzige Kalendersymbol anklickbar, es zeigt
   "TT.MM.JJJJ" und sieht in jedem Browser anders aus. Hier ist die ganze
   Fläche anklickbar und der Kalender überall gleich.

   Ohne JavaScript bleibt das native Feld stehen — die Regeln aus Block 3
   greifen dann weiter.
   ========================================================================== */

/* Die Box wird zur Schaltfläche. */
.hwp-suche__box--kalender {
	cursor: pointer;
}
.hwp-suche__box--kalender:focus-within {
	outline: 2px solid var(--hwp-gold);
	outline-offset: -2px;
}

.hwp-suche__anzeige {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	text-align: left;
	padding: 0 18px;
	font-family: var(--hwp-text-schrift);
	font-size: 1rem;
	font-weight: 600;
	color: var(--hwp-logo);
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}
/* Ohne Auswahl blasser, damit "Datum wählen" nicht wie ein Wert aussieht. */
.hwp-suche__anzeige.ist-leer {
	color: var(--hwp-leise);
	font-weight: 500;
}
.hwp-suche__anzeige:focus-visible {
	outline: 2px solid var(--hwp-gold);
	outline-offset: -2px;
}

/* --- Das Popup --------------------------------------------------------- */
/* Hängt am Formular, nicht am Body: so wandert es beim Scrollen mit und
   braucht keine Positionsberechnung in JavaScript. */
.hwp-kalender {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 900;
	background-color: var(--hwp-weiss);
	border: 1px solid var(--hwp-rand);
	box-shadow: 0 24px 60px rgba(69, 67, 59, .28);
	padding: 20px;
	width: max-content;
	max-width: min(680px, calc(100vw - 32px));
}
.hwp-kalender[hidden] {
	display: none;
}
/* Wenn unten kein Platz mehr ist, klappt der Kalender nach oben. */
.hwp-kalender--oben {
	top: auto;
	bottom: calc(100% + 10px);
}

.hwp-kalender__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.hwp-kalender__monate {
	font-family: var(--hwp-titel);
	font-size: 1.05rem;
	color: var(--hwp-logo);
	text-align: center;
	flex: 1 1 auto;
}
.hwp-kalender__pfeil {
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--hwp-rand);
	background-color: var(--hwp-weiss);
	color: var(--hwp-logo);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color var(--hwp-zeit) ease;
}
.hwp-kalender__pfeil:hover:not([disabled]) {
	background-color: var(--hwp-creme-tief);
}
.hwp-kalender__pfeil[disabled] {
	opacity: .35;
	cursor: default;
}
.hwp-kalender__pfeil svg {
	width: 18px;
	height: 18px;
}

.hwp-kalender__raster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
}
.hwp-kalender__titel {
	font-family: var(--hwp-titel);
	font-size: 1rem;
	color: var(--hwp-logo);
	text-align: center;
	margin-bottom: 10px;
}
.hwp-kalender__wochentage,
.hwp-kalender__tage {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.hwp-kalender__wochentage {
	margin-bottom: 4px;
}
.hwp-kalender__wochentage span {
	text-align: center;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hwp-leise);
	padding-bottom: 6px;
}
.hwp-kalender__wochentage abbr {
	text-decoration: none;
	border: 0;
}

.hwp-kalender__tag {
	border: 0;
	background: transparent;
	font-family: var(--hwp-text-schrift);
	font-size: .95rem;
	font-weight: 500;
	color: var(--hwp-text);
	/* 40px Klickfläche: Fingerkuppen und zittrige Hände brauchen das,
	   und die Zielgruppe hat beides häufiger als der Durchschnitt. */
	min-width: 40px;
	height: 40px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.hwp-kalender__tag:hover:not([disabled]) {
	background-color: var(--hwp-creme-tief);
}
.hwp-kalender__tag:focus-visible {
	outline: 2px solid var(--hwp-gold);
	outline-offset: -2px;
}
.hwp-kalender__tag[disabled] {
	color: #BFBBAF;              /* 2,4:1 – bewusst schwach, ist nicht wählbar */
	cursor: default;
}
.hwp-kalender__tag.ist-heute {
	box-shadow: inset 0 0 0 1px var(--hwp-rand);
	font-weight: 700;
}
.hwp-kalender__tag.ist-dazwischen {
	background-color: #F3EBD6;
	color: var(--hwp-text);
}
.hwp-kalender__tag.ist-start,
.hwp-kalender__tag.ist-ende {
	background-color: var(--hwp-gold);
	color: var(--hwp-weiss);     /* 5,05:1 */
	font-weight: 700;
}
.hwp-kalender__leer {
	height: 40px;
}

.hwp-kalender__hinweis {
	margin: 16px 0 0;
	padding: 11px 14px;
	background-color: var(--hwp-creme-tief);
	font-size: .92rem;
	color: var(--hwp-text);      /* 10,1:1 auf Creme-tief */
}

.hwp-kalender__fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
}
.hwp-kalender__loeschen {
	border: 0;
	background: transparent;
	padding: 10px 4px;
	font-family: var(--hwp-text-schrift);
	font-size: .9rem;
	font-weight: 600;
	color: var(--hwp-gold-tief);
	text-decoration: underline;
	cursor: pointer;
}
.hwp-kalender__loeschen:hover {
	color: var(--hwp-logo);
}
.hwp-kalender__ok {
	border: 0;
	background-color: var(--hwp-gold);
	color: var(--hwp-weiss);
	padding: 14px 30px;
	font-family: var(--hwp-text-schrift);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--hwp-zeit) ease;
}
.hwp-kalender__ok:hover {
	background-color: var(--hwp-gold-tief);
}

/* Auf schmalen Schirmen nur ein Monat — zwei nebeneinander wären
   unleserlich klein. */
@media (max-width: 720px) {
	.hwp-kalender {
		position: fixed;
		inset: auto 16px 16px 16px;
		top: auto;
		width: auto;
		max-width: none;
		max-height: 80vh;
		overflow-y: auto;
	}
	.hwp-kalender--oben {
		bottom: 16px;
	}
	.hwp-kalender__raster {
		grid-template-columns: 1fr;
	}
	.hwp-kalender__monat:last-child {
		display: none;
	}
	.hwp-kalender__fuss {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.hwp-kalender__ok {
		width: 100%;
	}
}

/* ==========================================================================
   4 · ÜBERSICHT
   ========================================================================== */
.hwp-uebersicht {
	font-family: var(--hwp-text-schrift);
	color: var(--hwp-text);
}
.hwp-uebersicht__titel {
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	color: var(--hwp-logo);
	text-align: center;
	margin-bottom: 34px;
}
.hwp-uebersicht__filter {
	background-color: var(--hwp-creme-tief);
	padding: 28px;
	margin-bottom: 40px;
}
.hwp-uebersicht__treffer {
	margin: 20px 0 0;
	font-size: .95rem;
	color: var(--hwp-leise);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: baseline;
}
/* Auf der Creme-tief-Fläche das dunklere Gold: das helle käme hier nur auf
   4,38:1 und läge damit unter AA. Mit --hwp-gold-tief sind es 6,19:1. */
.hwp-uebersicht__zuruecksetzen {
	color: var(--hwp-gold-tief);
	font-weight: 600;
	text-decoration: underline;
}


/* ==========================================================================
   5 · KACHELN
   ========================================================================== */
.hwp-kacheln {
	display: grid;
	gap: 26px;
}
.hwp-kacheln--1 { grid-template-columns: 1fr; }
.hwp-kacheln--2 { grid-template-columns: repeat(2, 1fr); }
.hwp-kacheln--3 { grid-template-columns: repeat(3, 1fr); }
.hwp-kacheln--4 { grid-template-columns: repeat(4, 1fr); }

.hwp-kachel {
	background-color: var(--hwp-weiss);
	border: 1px solid var(--hwp-rand);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform var(--hwp-zeit) ease, box-shadow var(--hwp-zeit) ease;
}
.hwp-kachel:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(69, 67, 59, .16);
}

.hwp-kachel__bild {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--hwp-tief);
}
.hwp-kachel__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.2, .8, .3, 1);
}
.hwp-kachel:hover .hwp-kachel__bild img {
	transform: scale(1.06);
}
/* Fällt ein Bild ganz aus, bleibt eine ruhige Fläche statt eines Lochs. */
.hwp-kachel__platzhalter {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(140deg, #6B6964, #45433B);
}

.hwp-kachel__art {
	position: absolute;
	top: 14px;
	left: 14px;
	background-color: rgba(255, 255, 255, .95);
	color: var(--hwp-logo);
	padding: 6px 13px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hwp-kachel__preis {
	position: absolute;
	bottom: 14px;
	right: 14px;
	background-color: var(--hwp-gold);
	color: var(--hwp-weiss);
	padding: 8px 15px;
	font-weight: 700;
	font-size: .98rem;
}

.hwp-kachel__inhalt {
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.hwp-kachel__termin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--hwp-gold);
	margin: 0 0 8px;
}
.hwp-kachel__termin svg {
	width: 16px;
	height: 16px;
	flex: none;
}
.hwp-kachel__titel {
	font-family: var(--hwp-titel);
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.22;
	margin: 0 0 10px;
	color: var(--hwp-logo);
}
.hwp-kachel__titel a {
	color: inherit;
	text-decoration: none;
}
/* Die ganze Kachel klickbar machen, ohne Links zu verschachteln — das wäre
   ungültiges HTML und Screenreader lesen den Titel dann doppelt vor. */
.hwp-kachel__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hwp-kachel__text {
	font-size: .95rem;
	color: var(--hwp-leise);
	margin: 0 0 18px;
}
.hwp-kachel__fuss {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--hwp-rand);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: .88rem;
	color: var(--hwp-leise);
}
.hwp-kachel__dauer {
	white-space: nowrap;
}
.hwp-kachel__mehr {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	color: var(--hwp-gold);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.hwp-kachel__mehr svg {
	width: 15px;
	height: 15px;
	transition: transform var(--hwp-zeit) ease;
}
.hwp-kachel:hover .hwp-kachel__mehr svg {
	transform: translateX(4px);
}


/* ==========================================================================
   6 · LEERER ZUSTAND UND BLÄTTERUNG
   ========================================================================== */
.hwp-leer {
	text-align: center;
	padding: 60px 24px;
	background-color: var(--hwp-creme-tief);
}
.hwp-leer__text {
	font-size: 1.1rem;
	color: var(--hwp-leise);
	margin: 0 0 20px;
}

.hwp-blaettern {
	margin-top: 44px;
}
.hwp-blaettern ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hwp-blaettern a,
.hwp-blaettern span {
	display: block;
	padding: 11px 17px;
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	color: var(--hwp-logo);
	background-color: var(--hwp-creme-tief);
	transition: background-color var(--hwp-zeit) ease, color var(--hwp-zeit) ease;
}
.hwp-blaettern a:hover {
	background-color: var(--hwp-logo);
	color: var(--hwp-weiss);
}
.hwp-blaettern .current {
	background-color: var(--hwp-gold);
	color: var(--hwp-weiss);
}

.hwp-hinweis {
	padding: 16px 20px;
	background-color: #FDF3D6;
	border-left: 4px solid var(--hwp-gold);
	color: var(--hwp-text);
	font-family: var(--hwp-text-schrift);
}


/* ==========================================================================
   7 · DETAILSEITE · KOPF
   ========================================================================== */
.hwp-reise {
	font-family: var(--hwp-text-schrift);
	color: var(--hwp-text);
	background-color: var(--hwp-creme);
}

/* Nur das BILD läuft über die volle Fensterbreite — der Kopf selbst bleibt
   im Container des Themes. So richten sich Reiseart, Titel, Infoleiste und
   die Textblöcke darunter alle an derselben Kante aus. Zieht man den ganzen
   Kopf aus dem Container, zentriert sich sein Inhalt am Fenster, der Rest der
   Seite aber am Container — und sobald der Container nicht genau 1240 px
   breit ist, stehen Titel und Leiste um ein paar Pixel versetzt.

   Bild und Schleier sitzen absolut und werden mit calc(50% - 50vw) nach beiden
   Seiten hinausgeschoben. --hwp-fensterbreite ist die per JavaScript gemessene
   Breite ohne Scrollleiste; 100vw als Rückfall schlösse die Scrollleiste ein
   und erzeugte einen waagerechten Rollbalken.

   --hwp-kopf-oben schiebt den Kopf unter eine feste Navigation. Der Wert wird
   beim Laden gemessen; er bleibt 0, wenn oben ohnehin kein Abstand ist. */
.hwp-kopfbereich {
	margin-top: var(--hwp-kopf-oben, 0px);
}
.hwp-detailkopf {
	position: relative;
	min-height: min(62vh, 560px);
	display: flex;
	align-items: flex-end;
}
/* Dunkler Grund über die volle Breite — auch dann, wenn das Bild noch lädt. */
.hwp-detailkopf::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - var(--hwp-fensterbreite, 100vw) / 2);
	width: var(--hwp-fensterbreite, 100vw);
	background-color: var(--hwp-tief);
	z-index: 0;
}
/* Ohne Bild trägt der dunkle Grund nichts mehr — er wäre nur eine leere
   Fläche. Deshalb hier auf Creme wechseln, sonst stünde der dunkle Titel
   unten auf dunklem Grund. */
.hwp-detailkopf--ohne-bild {
	min-height: 0;
	padding-top: 60px;
}
.hwp-detailkopf--ohne-bild::before {
	background-color: var(--hwp-creme-tief);
}
.hwp-detailkopf__bild {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - var(--hwp-fensterbreite, 100vw) / 2);
	width: var(--hwp-fensterbreite, 100vw);
	overflow: hidden;
	z-index: 0;
}
.hwp-detailkopf__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Der Verlauf ist keine Deko: ohne ihn steht weiße Schrift auf hellem
   Himmel und der Titel ist auf hellen Motiven unlesbar. */
.hwp-detailkopf__schleier {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - var(--hwp-fensterbreite, 100vw) / 2);
	width: var(--hwp-fensterbreite, 100vw);
	z-index: 1;
	background-image: linear-gradient(
		to top,
		rgba(69, 67, 59, .94) 0%,
		rgba(69, 67, 59, .70) 34%,
		rgba(69, 67, 59, .18) 72%,
		rgba(69, 67, 59, 0) 100%
	);
}
.hwp-detailkopf__inhalt {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: 46px;
}
.hwp-detailkopf__art {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hwp-gold-hell);
	margin-bottom: 12px;
}
.hwp-detailkopf__titel {
	color: var(--hwp-weiss);
	text-transform: uppercase;
	letter-spacing: .035em;
	font-size: clamp(1.8rem, 4vw, 3.2rem);
	margin: 0;
	max-width: 22ch;
}
.hwp-detailkopf--ohne-bild .hwp-detailkopf__titel,
.hwp-detailkopf--ohne-bild .hwp-detailkopf__art {
	color: var(--hwp-logo);
}
.hwp-detailkopf--ohne-bild .hwp-detailkopf__art {
	color: var(--hwp-gold-tief);   /* 6,19:1 auf Creme-tief */
}


/* ==========================================================================
   8 · INFOLEISTE
   Liegt halb über dem Kopfbild — verzahnt die beiden Blöcke, statt sie als
   getrennte Streifen wirken zu lassen.
   ========================================================================== */
.hwp-infoleiste-halter {
	position: relative;
	z-index: 3;
	margin-top: -34px;
}
/* Grid statt Flexbox: die Angaben links dürfen umbrechen, ohne dass der
   Knopf dabei in eine eigene Zeile rutscht und dort links klebt. Mit
   "1fr auto" bleibt er immer rechts und über die volle Höhe. */
.hwp-infoleiste {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	background-color: var(--hwp-logo);
	box-shadow: 0 14px 34px rgba(69, 67, 59, .22);
}
.hwp-infoleiste__daten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	padding: 6px 0;
	min-width: 0;
}
.hwp-infoleiste__punkt {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	color: var(--hwp-weiss);          /* 7,34:1 */
	font-size: 1rem;
	position: relative;
}
/* Trennstriche zwischen den Angaben, aber nicht vor der ersten. */
.hwp-infoleiste__punkt + .hwp-infoleiste__punkt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 26px;
	background-color: rgba(255, 255, 255, .28);
}
.hwp-infoleiste__punkt svg {
	width: 22px;
	height: 22px;
	flex: none;
}
.hwp-infoleiste__beschriftung {
	color: rgba(255, 255, 255, .82);
}
.hwp-infoleiste__punkt strong {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
/* Datum und Preis dürfen nicht mitten in der Zahl umbrechen — "ab 1.199,–"
   auf zwei Zeilen liest sich einen Moment lang wie zwei Preise. */
.hwp-infoleiste__punkt--termin,
.hwp-infoleiste__punkt--preis {
	white-space: nowrap;
}
/* Preis mit Zuschlag darunter: zwei Zeilen, ohne die Leiste zu sprengen. */
.hwp-infoleiste__preis {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.hwp-infoleiste__ez {
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .82);   /* auf #59564C: 5,9:1 */
	margin-top: 2px;
}
/* Die Zustiegsorte sind die längste Angabe. Gekürzt wird serverseitig
   (abfahrtsorte_kurz), damit kein Wort mitten im Ortsnamen abreißt; hier nur
   noch der Umbruchschutz. Wird es ganz eng, fliegt die Angabe raus — im
   Reiseverlauf steht sie ohnehin vollständig. */
.hwp-infoleiste__punkt--abfahrt {
	min-width: 0;
}
.hwp-infoleiste__knopf {
	flex: none;
	border: 0;
	border-radius: 0;
	background-color: var(--hwp-gold);
	color: var(--hwp-weiss);          /* 5,05:1 */
	padding: 18px 40px;
	font-family: var(--hwp-text-schrift);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--hwp-zeit) ease;
}
.hwp-infoleiste__knopf:hover {
	background-color: var(--hwp-gold-tief);
}
.hwp-infoleiste__knopf:focus-visible {
	outline: 3px solid var(--hwp-weiss);
	outline-offset: -6px;
}


/* ==========================================================================
   9 · TEXTBLÖCKE
   ========================================================================== */
.hwp-detail {
	padding: clamp(50px, 7vw, 86px) 0;
}
.hwp-detail__spalten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: clamp(30px, 5vw, 64px);
	align-items: start;
}
.hwp-detail__text {
	min-width: 0;
	font-size: 1.05rem;
	line-height: 1.75;
}
.hwp-block + .hwp-block {
	margin-top: clamp(38px, 5vw, 56px);
	/* Sprungmarken: Überschrift landet unter dem fixierten Header, nicht dahinter */
	scroll-margin-top: 110px;
}
.hwp-block__titel {
	font-size: clamp(1.6rem, 2.8vw, 2.1rem);
	color: var(--hwp-logo);
	margin-bottom: 22px;
	padding-bottom: 20px;
	position: relative;
}
.hwp-block__titel::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 3px;
	background-color: var(--hwp-gold);
}
.hwp-block__inhalt > *:first-child { margin-top: 0; }
.hwp-block__inhalt > *:last-child  { margin-bottom: 0; }
.hwp-block__inhalt h3,
.hwp-block__inhalt h4 {
	font-family: var(--hwp-titel);
	font-weight: 400;
	color: var(--hwp-logo);
	margin: 1.9em 0 .55em;
	line-height: 1.25;
}
.hwp-block__inhalt h3 { font-size: 1.32rem; }
.hwp-block__inhalt h4 { font-size: 1.12rem; }
.hwp-block__inhalt > *:first-child { margin-top: 0; }

/* Tagesüberschriften im Reiseverlauf bekommen einen Goldstrich. Bei einer
   Acht-Tage-Reise ist die Tagesgliederung die wichtigste Struktur der Seite;
   allein über Schriftgröße hebt sie sich in Prata zu wenig ab. */
.hwp-block--verlauf .hwp-block__inhalt h3 {
	position: relative;
	padding-left: 22px;
}
.hwp-block--verlauf .hwp-block__inhalt h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	bottom: .18em;
	width: 4px;
	background-color: var(--hwp-gold);
}
.hwp-block__inhalt ul,
.hwp-block__inhalt ol {
	padding-left: 1.3em;
	margin: 0 0 1.2em;
}
.hwp-block__inhalt li {
	margin-bottom: .5em;
}
.hwp-block__inhalt a {
	color: var(--hwp-gold);
}
.hwp-block__inhalt img {
	max-width: 100%;
	height: auto;
}

/* Die Leistungsliste bekommt Haken statt Punkte — das ist die Stelle, an der
   jemand prüft, was enthalten ist. */
.hwp-block--leistung .hwp-block__inhalt ul {
	list-style: none;
	padding-left: 0;
}
.hwp-block--leistung .hwp-block__inhalt ul li {
	position: relative;
	padding-left: 34px;
}
.hwp-block--leistung .hwp-block__inhalt ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 18px;
	height: 10px;
	border-left: 2.5px solid var(--hwp-gold);
	border-bottom: 2.5px solid var(--hwp-gold);
	transform: rotate(-45deg);
}

/* Block „Hinweise“: Listen mit goldenem Punkt statt Browser-Bullet */
.hwp-block--hinweise .hwp-block__inhalt ul {
	list-style: none;
	padding-left: 0;
}
.hwp-block--hinweise .hwp-block__inhalt ul li {
	position: relative;
	padding-left: 22px;
}
.hwp-block--hinweise .hwp-block__inhalt ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .6em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--hwp-gold);
}

/* Block „Preis“: Preis wie in der Infoleiste, dazu Einzelzimmerzuschlag */
.hwp-preis__wert {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .45em;
	margin: 0;
	color: var(--hwp-tief);
}
.hwp-preis__ab,
.hwp-preis__einheit {
	font-size: .98rem;
	color: var(--hwp-grau);
}
.hwp-preis__wert strong {
	font-family: var(--hwp-titel);
	font-weight: 400;
	-webkit-text-stroke: .4px currentColor;
	font-size: clamp(1.7rem, 2.6vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: .01em;
	color: var(--hwp-gold-tief);
}
.hwp-preis__ez {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .5em;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--hwp-rand);
	font-size: .98rem;
	color: var(--hwp-grau);
}
.hwp-preis__ez strong {
	font-weight: 600;
	color: var(--hwp-tief);
}

.hwp-detail__abschluss {
	margin-top: clamp(40px, 5vw, 60px);
	padding-top: 32px;
	border-top: 1px solid var(--hwp-rand);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}


/* ==========================================================================
   10 · SPRUNGMARKEN
   ========================================================================== */
.hwp-detail__seite {
	position: sticky;
	top: 120px;
}
.hwp-sprungmarken {
	background-color: var(--hwp-creme-tief);
	padding: 24px 22px;
}
.hwp-sprungmarken__titel {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hwp-gold-tief);   /* 6,19:1 auf Creme-tief */
	margin: 0 0 14px;
}
.hwp-sprungmarken ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hwp-sprungmarken li + li {
	margin-top: 4px;
}
.hwp-sprungmarken a {
	display: block;
	padding: 9px 12px;
	color: var(--hwp-logo);
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	border-left: 3px solid transparent;
	transition: border-color var(--hwp-zeit) ease, background-color var(--hwp-zeit) ease;
}
.hwp-sprungmarken a:hover {
	border-left-color: var(--hwp-gold);
	background-color: rgba(138, 106, 30, .08);
}


/* ==========================================================================
   11 · OVERLAY-FORMULAR
   ========================================================================== */
body.hwp-overlay-offen {
	overflow: hidden;
}
.hwp-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.hwp-overlay[hidden] {
	display: none;
}
.hwp-overlay__grund {
	position: absolute;
	inset: 0;
	background-color: rgba(45, 43, 38, .72);
}
.hwp-overlay__fenster {
	position: relative;
	z-index: 1;
	background-color: var(--hwp-creme);
	width: 100%;
	max-width: 660px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: clamp(28px, 4vw, 44px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .34);
}
.hwp-overlay__zu {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--hwp-logo);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color var(--hwp-zeit) ease;
}
.hwp-overlay__zu:hover {
	background-color: var(--hwp-creme-tief);
}
.hwp-overlay__zu svg {
	width: 22px;
	height: 22px;
}
.hwp-overlay__titel {
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--hwp-logo);
	margin-bottom: 6px;
	padding-right: 50px;
}
.hwp-overlay__reise {
	color: var(--hwp-leise);
	margin: 0 0 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hwp-rand);
}
.hwp-overlay__termin {
	font-size: .95rem;
}

.hwp-formular__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.hwp-formular__feld {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	min-width: 0;
}
.hwp-formular__feld--voll {
	grid-column: 1 / -1;
}
.hwp-formular__feld label {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hwp-logo);
}
.hwp-formular input[type="text"],
.hwp-formular input[type="email"],
.hwp-formular input[type="tel"],
.hwp-formular input[type="number"],
.hwp-formular input[type="date"],
.hwp-formular input[type="time"],
.hwp-formular select,
.hwp-formular textarea {
	width: 100%;
	border: 1px solid var(--hwp-rand);
	border-radius: 0;
	background-color: var(--hwp-weiss);
	padding: 13px 15px;
	font-family: var(--hwp-text-schrift);
	font-size: 1rem;
	color: var(--hwp-text);
	box-shadow: none;
}
.hwp-formular input:focus,
.hwp-formular select:focus,
.hwp-formular textarea:focus {
	outline: 2px solid var(--hwp-gold);
	outline-offset: -2px;
	border-color: var(--hwp-gold);
}
.hwp-formular textarea {
	resize: vertical;
	min-height: 110px;
}

/* Honigtopf: für echte Besucher unsichtbar, aber nicht display:none —
   manche Bots werten das aus und überspringen das Feld dann. */
.hwp-formular__honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hwp-formular__zustimmung {
	margin: 22px 0 0;
	font-size: .92rem;
	color: var(--hwp-leise);
}
.hwp-formular__zustimmung label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	cursor: pointer;
}
.hwp-formular__zustimmung input {
	margin-top: .3em;
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--hwp-gold);
}
.hwp-formular__zustimmung a {
	color: var(--hwp-gold);
}

.hwp-formular__meldung {
	margin: 20px 0 0;
	padding: 14px 18px;
	font-weight: 600;
}
.hwp-formular__meldung--erfolg {
	background-color: #E4EFE0;
	color: #2C5121;               /* 7,1:1 auf dieser Fläche */
	border-left: 4px solid #4C7A3C;
}
.hwp-formular__meldung--fehler {
	background-color: #F7E2DE;
	color: #7A2418;               /* 7,6:1 auf dieser Fläche */
	border-left: 4px solid #A8341F;
}

.hwp-formular__aktionen {
	margin-top: 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}
.hwp-formular__pflicht {
	font-size: .85rem;
	color: var(--hwp-leise);
}
.hwp-formular [data-hwp-senden][disabled] {
	opacity: .6;
	cursor: wait;
}



/* ==========================================================================
   11b · FORMULARE (Anmeldung, Gutschein, Buscharter)
   Baut auf den Regeln von Block 11 auf. Alles hier gilt sowohl im Overlay
   als auch für die Formulare, die per Shortcode als Seite stehen.
   ========================================================================== */

/* hidden muss gewinnen. Mehrere Teile des Formulars haben eine eigene
   display-Regel (flex, grid), und die schlägt das [hidden] des Browsers.
   Ohne diese Zeile blieben Knopfleiste und ×-Knöpfe nach dem Ausblenden
   sichtbar — die Eigenschaft war gesetzt, zu sehen war trotzdem alles. */
.hwp-formular [hidden],
.hwp-formularblock [hidden] {
	display: none !important;
}

/* --- Als Seite ------------------------------------------------------------
   Der Shortcode steht in einer YOOtheme-Sektion, und die bestimmt Breite und
   Seitenabstand schon selbst. Deshalb hier keine eigene max-width und kein
   eigener Seitenabstand — das Formular füllt, was die Sektion ihm gibt.
   Wer es schmaler will, setzt breite="schmal".
   -------------------------------------------------------------------------- */
.hwp-formularseite {
	font-family: var(--hwp-text-schrift);
	color: var(--hwp-text);
	width: 100%;
}
.hwp-formularseite__innen {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.hwp-formularseite--schmal .hwp-formularseite__innen {
	max-width: 920px;
	margin-inline: auto;
}
/* Eigene Fläche nur auf Wunsch — dann als Karte mit Innenabstand. */
.hwp-formularseite--creme .hwp-formularseite__innen,
.hwp-formularseite--weiss .hwp-formularseite__innen {
	padding: clamp(28px, 4vw, 48px);
}
.hwp-formularseite--creme .hwp-formularseite__innen {
	background-color: var(--hwp-creme);
}
.hwp-formularseite--weiss .hwp-formularseite__innen {
	background-color: var(--hwp-weiss);
	box-shadow: 0 1px 0 rgba(89, 86, 76, .1);
}
.hwp-formularblock__titel {
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
	color: var(--hwp-logo);
	margin-bottom: 14px;
}
.hwp-formularblock__einleitung {
	font-size: 1.08rem;
	line-height: 1.7;
	color: var(--hwp-leise);
	max-width: 62ch;
	margin: 0 0 34px;
}
.hwp-overlay .hwp-formularblock__einleitung {
	margin-bottom: 26px;
}

/* Platzhaltertext: Browservorgabe ist zu blass (etwa 2,9:1). */
.hwp-formular ::placeholder {
	color: #6B6964;                /* 5,48:1 auf Weiß */
	opacity: 1;
}

/* --- Abschnitte ----------------------------------------------------------- */
.hwp-formular__abschnitt {
	border: 0;
	padding: 0;
	margin: 0 0 34px;
	min-width: 0;                 /* fieldset ignoriert sonst min-width:0 der Kinder */
}
.hwp-formular__abschnitt-titel {
	display: block;
	width: 100%;
	padding: 0 0 10px;
	margin: 0 0 20px;
	font-family: var(--hwp-text-schrift);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--hwp-logo);
	border-bottom: 1px solid var(--hwp-rand);
	position: relative;
}
.hwp-formular__abschnitt-titel::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 44px;
	height: 2px;
	background-color: var(--hwp-gold);
}
.hwp-formular__abschnitt-text {
	margin: -8px 0 18px;
	color: var(--hwp-leise);
	font-size: .95rem;
}

/* --- Raster mit sechs Spalten: halb / drittel / zweidrittel / voll -------- */
.hwp-formular__abschnitt .hwp-formular__raster {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 18px 16px;
}
.hwp-formular__feld--halb        { grid-column: span 3; }
.hwp-formular__feld--drittel     { grid-column: span 2; }
.hwp-formular__feld--zweidrittel { grid-column: span 4; }
.hwp-formular__feld--voll        { grid-column: 1 / -1; }

.hwp-formular__stern {
	color: var(--hwp-gold);
	margin-left: 2px;
}
.hwp-formular__hinweis {
	font-size: .85rem;
	color: var(--hwp-leise);
	line-height: 1.45;
}

/* Datum und Uhrzeit: native Felder, aber im selben Kleid. */
.hwp-formular input[type="text"],
.hwp-formular input[type="email"],
.hwp-formular input[type="tel"],
.hwp-formular input[type="number"],
.hwp-formular input[type="date"],
.hwp-formular input[type="time"],
.hwp-formular select {
	min-height: 50px;
}
.hwp-formular input[type="date"],
.hwp-formular input[type="time"] {
	-webkit-appearance: none;
	appearance: none;
}
.hwp-formular input[type="date"]::-webkit-calendar-picker-indicator,
.hwp-formular input[type="time"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .6;
}

/* Auswahlfeld mit eigenem Pfeil — das Systemdreieck sitzt je nach
   Browser woanders. */
.hwp-formular__auswahl {
	position: relative;
	display: block;
}
.hwp-formular__auswahl select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	cursor: pointer;
	line-height: 1.4;
}
.hwp-formular__auswahl::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	pointer-events: none;
	border-right: 2px solid var(--hwp-logo);
	border-bottom: 2px solid var(--hwp-logo);
	transform: rotate(45deg);
}

/* --- Ja/Nein und Anrede als Schalterreihe -------------------------------- */
.hwp-formular__feld--wahl {
	grid-column: 1 / -1;
}
.hwp-wahl {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.hwp-wahl legend {
	padding: 0;
	margin-bottom: 8px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hwp-logo);
}
.hwp-wahl__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.hwp-wahl__knopf {
	position: relative;
	margin: 0;
	/* Die Beschriftungsregel aus Block 11 greift auch hier (es ist ein
	   <label>) — für Auswahlflächen zurücknehmen. */
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
}
/* Der echte Radioknopf bleibt im Dokument (Tastatur, Screenreader),
   sichtbar ist die Fläche daneben. */
.hwp-wahl__knopf input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.hwp-wahl__knopf span {
	display: inline-block;
	padding: 11px 20px;
	border: 1px solid var(--hwp-rand);
	background-color: var(--hwp-weiss);
	color: var(--hwp-text);
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	transition: background-color var(--hwp-zeit) ease, color var(--hwp-zeit) ease, border-color var(--hwp-zeit) ease;
}
.hwp-wahl__knopf:hover span {
	border-color: var(--hwp-logo);
}
.hwp-wahl__knopf input:checked + span {
	background-color: var(--hwp-logo);     /* Weiß darauf: 7,34:1 */
	border-color: var(--hwp-logo);
	color: var(--hwp-weiss);
}
.hwp-wahl__knopf input:focus-visible + span {
	outline: 3px solid var(--hwp-gold);
	outline-offset: 2px;
}

/* --- Einzelnes Kästchen (z. B. „Bus wird vor Ort benötigt“) -------------- */
.hwp-formular__feld--kasten {
	justify-content: flex-end;
}
.hwp-kasten {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	cursor: pointer;
	font-size: .95rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--hwp-text);
	min-height: 50px;
	padding: 12px 0;
}
.hwp-kasten input {
	margin: .15em 0 0;
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--hwp-gold);
}

/* --- Mitreisende ---------------------------------------------------------- */
.hwp-mitreisende {
	gap: 12px;
}
.hwp-mitreisende__zeile {
	display: grid;
	grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) 44px;
	gap: 12px;
	align-items: end;
}
.hwp-mitreisende__zeile[hidden] {
	display: none;
}
/* Ohne Geburtsdatum (Tagesfahrt) nur Nummer, Name, Entfernen. */
.hwp-mitreisende__zeile--kurz {
	grid-template-columns: 28px minmax(0, 1fr) 44px;
}
.hwp-mitreisende__nummer {
	color: var(--hwp-leise);
	font-weight: 700;
	padding-bottom: 14px;
}
.hwp-mitreisende__weg {
	width: 44px;
	height: 50px;
	border: 1px solid var(--hwp-rand);
	background-color: var(--hwp-weiss);
	color: var(--hwp-leise);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: color var(--hwp-zeit) ease, border-color var(--hwp-zeit) ease;
}
.hwp-mitreisende__weg:hover {
	color: #7A2418;
	border-color: #A8341F;
}
.hwp-mitreisende__weg svg {
	width: 18px;
	height: 18px;
}
/* display:grid oben schlägt das [hidden] des Browsers — hier ausdrücklich. */
.hwp-mitreisende__weg[hidden] {
	display: none;
}
.hwp-mitreisende__mehr {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 10px 16px 10px 12px;
	border: 1px dashed var(--hwp-gold);
	background: transparent;
	color: var(--hwp-gold-tief);      /* 6,19:1 auf Creme */
	font-family: var(--hwp-text-schrift);
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--hwp-zeit) ease;
}
.hwp-mitreisende__mehr:hover {
	background-color: rgba(138, 106, 30, .08);
}
.hwp-mitreisende__mehr svg {
	width: 16px;
	height: 16px;
}
.hwp-mitreisende__mehr[hidden] {
	display: none;
}

/* --- Zustimmungen --------------------------------------------------------- */
.hwp-formular__zustimmungen {
	margin-top: 6px;
	padding-top: 22px;
	border-top: 1px solid var(--hwp-rand);
}
.hwp-formular__zustimmungen .hwp-formular__zustimmung {
	margin: 0 0 14px;
}
/* Fussnote zur verbindlichen Anmeldung: nur Anfrage, Buchung erst mit Bestaetigung */
.hwp-formular__fussnote {
	margin: 18px 0 0;
	padding-left: 30px;              /* buendig mit dem Text der Kaestchen (18px Kaestchen + 12px Abstand) */
	font-size: .84rem;
	line-height: 1.55;
	color: var(--hwp-leise);
}
.hwp-formular__zustimmung .hwp-formular__stern {
	margin-left: .15em;
}

/* --- Fehler --------------------------------------------------------------- */
.hwp-formular__feld--fehler input,
.hwp-formular__feld--fehler select,
.hwp-formular__feld--fehler textarea {
	border-color: #A8341F;
	box-shadow: inset 0 0 0 1px #A8341F;
}
.hwp-formular__feld--fehler > label,
.hwp-formular__feld--fehler .hwp-wahl legend {
	color: #7A2418;
}
.hwp-formular__feld--fehler .hwp-wahl__knopf span {
	border-color: #A8341F;
}
.hwp-formular__zustimmung--fehler {
	color: #7A2418;
}
.hwp-formular__zustimmung--fehler input {
	outline: 2px solid #A8341F;
	outline-offset: 2px;
}

/* --- Auf dunkler Sektion ---------------------------------------------------
   YOOtheme hängt dunklen Sektionen (Stil „Sekundär“, dunkles Bild) die Klasse
   uk-light an. Daran orientiert sich die helle Schrift; hintergrund="dunkel"
   erzwingt sie, falls die Klasse mal fehlt.

   Kontraste auf dem Sektionsgrau #6B6964, gerechnet:
     #FFFFFF ....... 5,48:1   (Titel, Beschriftungen, Links)
     #FFFAE6 ....... 5,10:1   (Fließtext, Hinweise)
     #E4CE94 ....... 3,47:1   → nur für Linien und Sterne, nicht für Text
   -------------------------------------------------------------------------- */
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss),
.hwp-formularseite--dunkel {
	color: #FFFAE6;
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formularblock__titel,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__abschnitt-titel,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__feld > label,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-wahl legend,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-kasten,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-mitreisende__nummer,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__zustimmung a,
.hwp-formularseite--dunkel .hwp-formularblock__titel,
.hwp-formularseite--dunkel .hwp-formular__abschnitt-titel,
.hwp-formularseite--dunkel .hwp-formular__feld > label,
.hwp-formularseite--dunkel .hwp-wahl legend,
.hwp-formularseite--dunkel .hwp-kasten,
.hwp-formularseite--dunkel .hwp-mitreisende__nummer,
.hwp-formularseite--dunkel .hwp-formular__zustimmung a {
	color: #FFFFFF;
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formularblock__einleitung,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__abschnitt-text,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__hinweis,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__zustimmung,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__pflicht,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__fussnote,
.hwp-formularseite--dunkel .hwp-formular__fussnote,
.hwp-formularseite--dunkel .hwp-formularblock__einleitung,
.hwp-formularseite--dunkel .hwp-formular__abschnitt-text,
.hwp-formularseite--dunkel .hwp-formular__hinweis,
.hwp-formularseite--dunkel .hwp-formular__zustimmung,
.hwp-formularseite--dunkel .hwp-formular__pflicht {
	color: #FFFAE6;
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__stern,
.hwp-formularseite--dunkel .hwp-formular__stern {
	color: #E4CE94;
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__abschnitt-titel,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__zustimmungen,
.hwp-formularseite--dunkel .hwp-formular__abschnitt-titel,
.hwp-formularseite--dunkel .hwp-formular__zustimmungen {
	border-color: rgba(255, 255, 255, .22);
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__abschnitt-titel::after,
.hwp-formularseite--dunkel .hwp-formular__abschnitt-titel::after {
	background-color: #E4CE94;
}
/* Aktiver Schalter: hell auf dunkel gedreht. */
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-wahl__knopf input:checked + span,
.hwp-formularseite--dunkel .hwp-wahl__knopf input:checked + span {
	background-color: #FFFAE6;
	border-color: #FFFAE6;
	color: #3E3C36;             /* 10,5:1 */
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-mitreisende__mehr,
.hwp-formularseite--dunkel .hwp-mitreisende__mehr {
	color: #FFFFFF;
	border-color: #E4CE94;
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-mitreisende__mehr:hover,
.hwp-formularseite--dunkel .hwp-mitreisende__mehr:hover {
	background-color: rgba(255, 255, 255, .1);
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__zustimmung input,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-kasten input,
.hwp-formularseite--dunkel .hwp-formular__zustimmung input,
.hwp-formularseite--dunkel .hwp-kasten input {
	accent-color: #E4CE94;
}
/* Fehler: Rot auf Mittelgrau erreicht keine 4,5:1 — deshalb bleibt die
   Beschriftung weiß, der Rahmen des Feldes wird rot (3,1:1 als Kontur genügt). */
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__feld--fehler > label,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__feld--fehler .hwp-wahl legend,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__zustimmung--fehler,
.hwp-formularseite--dunkel .hwp-formular__feld--fehler > label,
.hwp-formularseite--dunkel .hwp-formular__feld--fehler .hwp-wahl legend,
.hwp-formularseite--dunkel .hwp-formular__zustimmung--fehler {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-color: #FFB4A6;
	text-underline-offset: 3px;
}
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__feld--fehler input,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__feld--fehler select,
.uk-light .hwp-formularseite:not(.hwp-formularseite--creme):not(.hwp-formularseite--weiss) .hwp-formular__feld--fehler textarea,
.hwp-formularseite--dunkel .hwp-formular__feld--fehler input,
.hwp-formularseite--dunkel .hwp-formular__feld--fehler select,
.hwp-formularseite--dunkel .hwp-formular__feld--fehler textarea {
	border-color: #FFB4A6;
	box-shadow: inset 0 0 0 2px #FFB4A6;
}

/* --- Overlay breiter: das Anmeldeformular hat vier Abschnitte ------------ */
.hwp-overlay--anmeldung .hwp-overlay__fenster {
	max-width: 900px;
}
.hwp-overlay--anmeldung .hwp-overlay__reise {
	margin-bottom: 30px;
}

/* ==========================================================================
   12 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
	.hwp-suche {
		grid-template-columns: 1fr 1fr;
	}
	.hwp-suche__knopf {
		grid-column: 1 / -1;
	}
	.hwp-kacheln--4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1024px) {
	.hwp-detail__spalten {
		grid-template-columns: 1fr;
	}
	/* Die Sprungmarken oben lassen, aber nicht mehr kleben — auf schmalen
	   Schirmen nähmen sie sonst dauerhaft Platz weg. */
	.hwp-detail__seite {
		position: static;
		order: -1;
	}
	.hwp-kacheln--3,
	.hwp-kacheln--4 {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Ab hier untereinander: nebeneinander bliebe für den Knopf zu wenig. */
	.hwp-infoleiste {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.hwp-formular__abschnitt .hwp-formular__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hwp-formular__feld--halb,
	.hwp-formular__feld--drittel,
	.hwp-formular__feld--zweidrittel {
		grid-column: span 1;
	}
	.hwp-formular__feld--voll,
	.hwp-formular__feld--wahl {
		grid-column: 1 / -1;
	}
}

@media (max-width: 782px) {
	.hwp-detailkopf {
		min-height: min(52vh, 420px);
	}
	.hwp-infoleiste-halter {
		margin-top: -20px;
	}
	.hwp-infoleiste__punkt {
		padding: 11px 20px;
		font-size: .95rem;
	}
	/* Trennstriche weg, sobald die Angaben umbrechen — sonst stehen sie
	   plötzlich über statt neben den Werten. */
	.hwp-infoleiste__punkt + .hwp-infoleiste__punkt::before {
		display: none;
	}
	.hwp-infoleiste__punkt--abfahrt {
		display: none;
	}
}

@media (max-width: 680px) {
	.hwp-breite,
	.hwp-suchband__innen {
		padding-inline: 20px;
	}
	.hwp-suche {
		grid-template-columns: 1fr;
	}
	.hwp-kacheln--2,
	.hwp-kacheln--3,
	.hwp-kacheln--4 {
		grid-template-columns: 1fr;
	}
	.hwp-uebersicht__filter {
		padding: 20px;
	}
	.hwp-formular__raster {
		grid-template-columns: 1fr;
	}
	/* Drei Spalten: Straße/Hausnummer und PLZ/Ort bleiben nebeneinander,
	   alles andere läuft über die volle Breite. */
	.hwp-formular__abschnitt .hwp-formular__raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px 12px;
	}
	.hwp-formular__feld--halb        { grid-column: 1 / -1; }
	.hwp-formular__feld--drittel     { grid-column: span 1; }
	.hwp-formular__feld--zweidrittel { grid-column: span 2; }
	/* Ein Datumsfeld braucht in Chromium mindestens etwa 150 px — in einer
	   Drittelspalte bei 390 px läuft es sonst über den Rand. */
	.hwp-formular__feld--drittel.hwp-formular__feld--typ-kalender { grid-column: span 2; }
	.hwp-formular__feld--mobil-voll  { grid-column: 1 / -1; }
	.hwp-formular__feld--kasten {
		justify-content: flex-start;
	}
	.hwp-kasten {
		min-height: 0;
		padding: 4px 0;
	}
	.hwp-mitreisende__zeile,
	.hwp-mitreisende__zeile--kurz {
		grid-template-columns: 28px minmax(0, 1fr) 44px;
	}
	/* Geburtsdatum in die zweite Zeile, unter den Namen. */
	.hwp-mitreisende__zeile > [data-hwp-feld*="geburtsdatum"] {
		grid-column: 2 / 3;
	}
	.hwp-mitreisende__zeile > .hwp-mitreisende__weg {
		grid-row: 1;
		grid-column: 3;
	}
	.hwp-formularseite--creme .hwp-formularseite__innen,
	.hwp-formularseite--weiss .hwp-formularseite__innen {
		padding: 22px 18px;
	}
	.hwp-overlay {
		padding: 0;
	}
	.hwp-overlay__fenster {
		max-width: none;
		max-height: 100vh;
		height: 100%;
	}
	.hwp-detail__abschluss .hwp-knopf {
		flex: 1 1 100%;
	}
}


/* ==========================================================================
   13 · BEWEGUNG ABSCHALTBAR
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt keine.
   Bei einer überwiegend älteren Zielgruppe ist das Bedienbarkeit, nicht Kür.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hwp-kachel,
	.hwp-kachel__bild img,
	.hwp-kachel__mehr svg {
		transition: none;
	}
	.hwp-kachel:hover {
		transform: none;
	}
	.hwp-kachel:hover .hwp-kachel__bild img {
		transform: none;
	}
}