/* Hoope Park – Kalender
   Jahresübersicht als Balkenplan + Monatsansicht */

.hoope-kal {
	--hk-rot: #fe2e2e;
	--hk-dunkel: #222a35;
	--hk-linie: #e6e9ef;
	--hk-flaeche: #f2f4f8;
	--hk-text: #2b3038;
	--hk-grau: #8b93a1;
	--hk-karte: #ffffff;
	--hk-tagbreite: 34px;
	--hk-labelbreite: 92px;
	--hk-zeilenhoehe: 34px;

	color: var(--hk-text);
	font-size: 15px;
	line-height: 1.5;

	/* Grundschrift des Kalenders: **Outfit**, dieselbe wie im Mega-Menü
	   („Elektromobilität im Motorsport…", „Wir für Euch."). Vorher erbte der
	   Kalender die Fließtextschrift Merriweather — eine Serifenschrift, die
	   neben den Balken und Zahlen altbacken wirkte (Kundenurteil 30.07.2026).
	   Betrifft: Terminbeschriftungen, Monatsnamen links, Legende, Jahreszahl
	   und Tageszahlen in der Kopfzeile, dazu die ganze Monatsansicht.
	   🔴 Nicht betroffen und ausdrücklich so gewollt: „Jahresübersicht"
	   (Montserrat 200), der Titel „Veranstaltungen im Hoope Park"
	   (Montserrat 800) und der Untertitel darunter — die drei tragen ihre
	   eigene Schriftangabe bzw. werden unten wieder festgehalten. */
	font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
}

/* Der Untertitel bleibt bewusst in der Fließtextschrift — Kundenwunsch:
   Vorspann, Titel und Untertitel sollen unverändert bleiben. */
.hoope-kal .hoope-kal__untertitel {
	font-family: var(--awb-typography4-font-family, "Merriweather", Georgia, serif);
	font-weight: var(--awb-typography4-font-weight, 300);
}

.hoope-kal *,
.hoope-kal *::before,
.hoope-kal *::after {
	box-sizing: border-box;
}

/* Lange zusammengesetzte Wörter (Verbrennermotoren, Fahrerlagerbetrieb …)
   sollen umbrechen statt aus der Spalte zu laufen. */
.hoope-kal {
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

/* ---------------------------------------------------------- Kopf + Legende */

.hoope-kal__kopf {
	margin-bottom: 18px;
}

.hoope-kal .hoope-kal__titel {
	margin: 0 0 4px;
	font-family: var(--awb-typography1-font-family, "Montserrat", Arial, sans-serif);
	font-weight: var(--awb-typography1-font-weight, 800);
	letter-spacing: var(--awb-typography1-letter-spacing, 0);
	font-size: clamp(26px, 4vw, 46px);
	line-height: 1.05;
	text-transform: none;
	color: var(--hk-dunkel);
}

.hoope-kal .hoope-kal__grossmonat {
	font-family: var(--awb-typography2-font-family, "Montserrat", Arial, sans-serif);
	font-weight: var(--awb-typography2-font-weight, 200);
}

.hoope-kal .hoope-kal__grossjahr {
	font-family: var(--awb-typography1-font-family, "Montserrat", Arial, sans-serif);
	font-weight: var(--awb-typography1-font-weight, 800);
}

.hoope-kal__untertitel {
	margin: 0;
	color: var(--hk-grau);
	font-size: 16px;
}

.hoope-kal__legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.hoope-kal__legende li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--hk-text);
}

.hoope-kal__punkt {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ Jahresplan */

/*
 * Kartenstapel hinter der Jahresübersicht (Vorlage des Betreibers,
 * 29.08.2026): zwei abgestufte rote Karten schauen seitlich und unten hinter
 * der weißen hervor, die äußere blasser und weiter versetzt als die innere.
 *
 * Sie liegen als Pseudo-Elemente am Stapel, nicht an der Karte selbst — die
 * hat `overflow: hidden` und würde sie abschneiden.
 *
 * 🔴 Der Überstand darf die Seite nicht seitlich scrollen lassen. Der Platz
 * dafür kommt aus dem Seitenrand des Avada-Inhaltsbereichs, deshalb schrumpft
 * der Versatz unter 1100 px und entfällt unter 782 px ganz. Nach jeder
 * Änderung an diesen Werten die Seitenbreite gegen die Fensterbreite messen,
 * nicht schätzen: `document.documentElement.scrollWidth` gegen
 * `window.innerWidth`.
 */
.hoope-kal__kartenstapel {
	position: relative;
	isolation: isolate;
}

.hoope-kal__kartenstapel::before,
.hoope-kal__kartenstapel::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 22px;
	pointer-events: none;
}

/* Innere, kräftigere Stufe. */
.hoope-kal__kartenstapel::before {
	top: 46px;
	bottom: -18px;
	left: -34px;
	right: -34px;
	background: #fb5f5c;
	background: color-mix(in srgb, var(--hk-rot) 78%, #fff);
}

/* Äußere, blasse Stufe: weiter versetzt, heller, liegt hinter der inneren. */
.hoope-kal__kartenstapel::after {
	top: 92px;
	bottom: -36px;
	left: -68px;
	right: -68px;
	z-index: -2;
	border-radius: 26px;
	background: #fdb3b1;
	background: color-mix(in srgb, var(--hk-rot) 34%, #fff);
}

.hoope-kal__karte {
	position: relative;
	z-index: 1;
	background: var(--hk-karte);
	border: 1px solid var(--hk-linie);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(34, 42, 53, 0.08);
	padding: 8px 8px 14px;
	overflow: hidden;
}

/* Unter 1100 px bleibt seitlich zu wenig Luft: der Stapel würde die Seite
   breiter machen, statt zu schmücken. Dann nur noch angedeutet. */
@media (max-width: 1100px) {
	.hoope-kal__kartenstapel::before {
		top: 30px;
		bottom: -12px;
		left: -16px;
		right: -16px;
	}

	.hoope-kal__kartenstapel::after {
		top: 60px;
		bottom: -24px;
		left: -32px;
		right: -32px;
	}
}

@media (max-width: 782px) {
	.hoope-kal__kartenstapel::before,
	.hoope-kal__kartenstapel::after {
		display: none;
	}
}

.hoope-kal__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.hoope-kal__plan {
	min-width: calc(var(--hk-labelbreite) + 31 * var(--hk-tagbreite));
	padding: 10px 12px 4px;
}

.hoope-kal__kopfzeile,
.hoope-kal__monatszeile {
	display: grid;
	grid-template-columns: var(--hk-labelbreite) repeat(31, minmax(var(--hk-tagbreite), 1fr));
}

.hoope-kal__kopfzeile {
	border-bottom: 2px solid var(--hk-dunkel);
	padding-bottom: 8px;
	margin-bottom: 2px;
}

.hoope-kal__ecke {
	font-weight: 800;
	font-size: 15px;
	color: var(--hk-dunkel);
	display: flex;
	align-items: center;
}

.hoope-kal__tagkopf {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--hk-grau);
	line-height: 1.6;
}

.hoope-kal__monatszeile {
	position: relative;
	grid-auto-rows: var(--hk-zeilenhoehe);
	border-bottom: 1px solid var(--hk-linie);
}

.hoope-kal__monatszeile--jahr {
	border-top: 2px solid var(--hk-dunkel);
}

.hoope-kal__monatslabel {
	grid-column: 1;
	grid-row: 1 / -1;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hk-grau);
	text-decoration: none;
	padding-right: 12px;
	transition: color 0.15s ease;
}

.hoope-kal__monatslabel:hover,
.hoope-kal__monatslabel:focus {
	color: var(--hk-rot);
	text-decoration: none;
}

.hoope-kal__monatsjahr {
	font-size: 11px;
	font-weight: 700;
	color: var(--hk-dunkel);
	letter-spacing: 0.04em;
}

.hoope-kal__zelle {
	border-left: 1px solid var(--hk-linie);
	min-height: var(--hk-zeilenhoehe);
}

.hoope-kal__zelle--we {
	background: var(--hk-flaeche);
}

.hoope-kal__zelle--leer {
	background: repeating-linear-gradient(135deg, #f7f8fa, #f7f8fa 4px, #eef0f4 4px, #eef0f4 8px);
}

/* Der heutige Tag steht am Rand, nicht im Raster: die Tageszahl oben und der
   Monatsname links. Das Rechteck in der Zelle selbst ist am 20.09.2026
   entfallen — es lag unter den Terminbalken und stoerte dort mehr, als es
   half. Die Zelle bleibt jetzt unmarkiert; Spalte und Zeile zeigen zusammen
   auf sie. */
.hoope-kal__zelle--heute {
	background: transparent;
}

.hoope-kal__balken {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 8px 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--von), var(--bis));
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(34, 42, 53, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hoope-kal__balken:hover,
.hoope-kal__balken:focus {
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(34, 42, 53, 0.28);
}

/* Die Beschriftung ist ein eigener Verweis neben dem Balken:
   Balken führt zur Veranstaltung, Name führt zum ganzen Monat.
   Ein Eintagestermin ist 34 px breit — darin wäre kein Name lesbar. */

.hoope-kal__label {
	position: relative;
	z-index: 3;
	align-self: center;
	justify-self: start;
	width: max-content;
	max-width: none;
	margin-left: 9px;
	white-space: nowrap;
	overflow: visible;
	color: var(--hk-dunkel);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
	transition: color 0.15s ease;
}

.hoope-kal__label:hover,
.hoope-kal__label:focus {
	color: var(--hk-rot);
	text-decoration: underline;
}

.hoope-kal__label--linksrum {
	justify-self: end;
	margin-left: 0;
	margin-right: 9px;
	text-align: right;
}

.hoope-kal__balken--vor {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	margin-left: 0;
}

.hoope-kal__balken--nach {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	margin-right: 0;
}

.hoope-kal__hinweis {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--hk-grau);
}

.hoope-kal__leer {
	margin: 18px 0 0;
	color: var(--hk-grau);
	font-style: italic;
}

/* --------------------------------------------------------- Monatsansicht */

.hoope-kal--monat {
	display: grid;
	grid-template-columns: minmax(300px, 430px) 1fr;
	gap: 44px;
	align-items: start;
}

.hoope-kal__grossjahr {
	font-size: clamp(52px, 8vw, 92px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--hk-rot);
}

.hoope-kal__grossmonat {
	font-size: clamp(30px, 4.5vw, 48px);
	font-weight: 300;
	line-height: 1.1;
	color: var(--hk-dunkel);
	margin-bottom: 18px;
}

.hoope-kal__blaettern {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--hk-linie);
	font-size: 13.5px;
	font-weight: 600;
}

.hoope-kal__blaettern a {
	color: var(--hk-grau);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hoope-kal__blaettern a:hover,
.hoope-kal__blaettern a:focus {
	color: var(--hk-rot);
}

.hoope-kal__zurueck {
	color: var(--hk-dunkel) !important;
	text-decoration: underline !important;
}

.hoope-kal__termin {
	padding: 0 0 20px 16px;
	margin-bottom: 20px;
	border-left: 4px solid var(--von);
	border-bottom: 1px solid var(--hk-linie);
}

.hoope-kal__termin:last-child {
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

.hoope-kal__termindatum {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hk-grau);
	margin-bottom: 2px;
}

/* Höhere Gewichtung, sonst gewinnt die h3-Regel des Themes. */
.hoope-kal .hoope-kal__terminname {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
	overflow-wrap: break-word;
	hyphens: auto;
}

.hoope-kal .hoope-kal__terminname a {
	color: var(--hk-dunkel);
	text-decoration: none;
}

.hoope-kal__terminname a:hover,
.hoope-kal__terminname a:focus {
	color: var(--hk-rot);
}

.hoope-kal__terminkat {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 3px;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hoope-kal__terminauszug {
	margin: 10px 0 0;
	font-size: 14.5px;
	color: var(--hk-text);
}

/* „Mehr lesen" steht im Fließtext, direkt hinter dem abgeschnittenen Satz.
 * Kein eigener Absatz: Der Verweis gehört an die Stelle, an der der Text
 * aufhört, sonst liest man erst das Ende und sucht ihn dann. */
.hoope-kal__mehr {
	white-space: nowrap;
	font-weight: 700;
	color: var(--von);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hoope-kal__mehr:hover,
.hoope-kal__mehr:focus {
	color: var(--hk-dunkel);
}

.hoope-kal__terminpreis {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--hk-dunkel);
}

/* Aufklappen weiterer Termine — ohne JavaScript */

.hoope-kal__schalter {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.hoope-kal__termin--versteckt {
	display: none;
}

.hoope-kal__schalter:checked ~ .hoope-kal__termin--versteckt {
	display: block;
}

.hoope-kal__mehr {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
	padding: 12px 18px;
	background: var(--hk-flaeche);
	border-radius: 3px;
	color: var(--hk-dunkel);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.hoope-kal__mehr:hover {
	background: var(--hk-rot);
	color: #fff;
}

.hoope-kal__pfeil {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid currentColor;
	transition: transform 0.2s ease;
}

.hoope-kal__mehr-zu {
	display: none;
}

.hoope-kal__schalter:checked ~ .hoope-kal__mehr .hoope-kal__mehr-auf {
	display: none;
}

.hoope-kal__schalter:checked ~ .hoope-kal__mehr .hoope-kal__mehr-zu {
	display: inline;
}

.hoope-kal__schalter:checked ~ .hoope-kal__mehr .hoope-kal__pfeil {
	transform: rotate(180deg);
}

.hoope-kal__schalter:focus-visible ~ .hoope-kal__mehr {
	outline: 2px solid var(--hk-rot);
	outline-offset: 2px;
}

/* Kontaktbereich unter dem Kalender (bis 29.08.2026: „Gut zu wissen") */

/* Ohne roten Balken links (Kundenwunsch 29.08.2026). */
.hoope-kal__kontaktbox {
	margin-top: 34px;
	padding: 26px 30px;
	background: var(--hk-flaeche);
	border-radius: 3px;
}

.hoope-kal .hoope-kal__kontakttitel {
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hk-dunkel);
	text-transform: none;
}

.hoope-kal__kontaktformular p:last-child {
	margin-bottom: 0;
}

/*
 * WPForms bringt seinen eigenen Blauton mit („modern markup", gemessen am
 * 29.08.2026 am Absenden-Knopf). Auf dieser Seite ist jeder Knopf rot, ein
 * blauer faellt sofort aus dem Bild. Die Anpassung laeuft ueber die
 * CSS-Variablen des Plugins, damit sie Updates ueberlebt; der Knopf bekommt
 * zusaetzlich die Form der uebrigen Knoepfe.
 */
.hoope-kal__kontaktformular .wpforms-container {
	--wpforms-button-background-color: var(--hk-rot);
	--wpforms-button-border-color: var(--hk-rot);
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: 3px;
	--wpforms-field-border-radius: 3px;
	--wpforms-label-color: var(--hk-dunkel);
	--wpforms-label-sublabel-color: var(--hk-grau);
	--wpforms-field-border-color: var(--hk-linie);
	margin: 0;
}

/*
 * 🔴 Die Variablen allein genuegen nicht. Gemessen am 29.08.2026 stand
 * `--wpforms-button-background-color` korrekt auf #fe2e2e, der Knopf war
 * trotzdem rgb(34,42,53): Avada faerbt `button[type=submit]` global und
 * gewinnt ueber die Regel des Plugins. Nur der Rand kam durch. Deshalb die
 * Farbe hier zusaetzlich direkt, mit einem Selektor, der Avadas schlaegt.
 */
.hoope-kal .hoope-kal__kontaktformular .wpforms-form button[type="submit"],
.hoope-kal .hoope-kal__kontaktformular .wpforms-form input[type="submit"] {
	background-color: var(--hk-rot);
	border-color: var(--hk-rot);
	color: #fff;
	padding: 13px 26px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hoope-kal .hoope-kal__kontaktformular .wpforms-form button[type="submit"]:hover,
.hoope-kal .hoope-kal__kontaktformular .wpforms-form button[type="submit"]:focus,
.hoope-kal .hoope-kal__kontaktformular .wpforms-form input[type="submit"]:hover,
.hoope-kal .hoope-kal__kontaktformular .wpforms-form input[type="submit"]:focus {
	background-color: var(--hk-dunkel);
	border-color: var(--hk-dunkel);
	color: #fff;
}

/* Das Feld sitzt in einer Flaeche, ein weisser Grund trennt es sichtbar ab. */
.hoope-kal__kontaktformular .wpforms-field input[type="text"],
.hoope-kal__kontaktformular .wpforms-field input[type="email"],
.hoope-kal__kontaktformular .wpforms-field textarea {
	background: #fff;
}

/* Nur für angemeldete Redakteure sichtbar, deshalb bewusst unauffällig. */
.hoope-kal__kontakt-hinweis {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #fff;
	border: 1px dashed var(--hk-linie);
	border-radius: 3px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--hk-grau);
}

.hoope-kal__kontakt-hinweis code {
	font-size: 12px;
	background: var(--hk-flaeche);
	padding: 1px 5px;
	border-radius: 2px;
}

/* Seitenzahlen unter der Terminliste
 *
 * Ohne JavaScript: je Seite ein Radioknopf, der im Markup vor den Kacheln
 * steht. Die Geschwisterregel blendet ein, was zur gewaehlten Seite gehoert.
 * Zwoelf Paare decken 48 Termine im Monat ab; darueber schaltet das PHP auf
 * eine Seite zurueck, statt die Haelfte zu verstecken.
 */

.hoope-kal__seitenwahl {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.hoope-kal__terminliste .hoope-kal__termin[class*="hoope-kal__termin--s"] {
	display: none;
}

.hoope-kal__seitenwahl--s1:checked ~ .hoope-kal__termin--s1,
.hoope-kal__seitenwahl--s2:checked ~ .hoope-kal__termin--s2,
.hoope-kal__seitenwahl--s3:checked ~ .hoope-kal__termin--s3,
.hoope-kal__seitenwahl--s4:checked ~ .hoope-kal__termin--s4,
.hoope-kal__seitenwahl--s5:checked ~ .hoope-kal__termin--s5,
.hoope-kal__seitenwahl--s6:checked ~ .hoope-kal__termin--s6,
.hoope-kal__seitenwahl--s7:checked ~ .hoope-kal__termin--s7,
.hoope-kal__seitenwahl--s8:checked ~ .hoope-kal__termin--s8,
.hoope-kal__seitenwahl--s9:checked ~ .hoope-kal__termin--s9,
.hoope-kal__seitenwahl--s10:checked ~ .hoope-kal__termin--s10,
.hoope-kal__seitenwahl--s11:checked ~ .hoope-kal__termin--s11,
.hoope-kal__seitenwahl--s12:checked ~ .hoope-kal__termin--s12 {
	display: block;
}

.hoope-kal__seitenzahlen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--hk-linie);
}

.hoope-kal__seitenzahl {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid var(--hk-linie);
	border-radius: 3px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hk-grau);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hoope-kal__seitenzahl:hover {
	border-color: var(--hk-rot);
	color: var(--hk-rot);
}

/* Die Zahl der gerade gewählten Seite. */
.hoope-kal__seitenwahl--s1:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s1,
.hoope-kal__seitenwahl--s2:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s2,
.hoope-kal__seitenwahl--s3:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s3,
.hoope-kal__seitenwahl--s4:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s4,
.hoope-kal__seitenwahl--s5:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s5,
.hoope-kal__seitenwahl--s6:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s6,
.hoope-kal__seitenwahl--s7:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s7,
.hoope-kal__seitenwahl--s8:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s8,
.hoope-kal__seitenwahl--s9:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s9,
.hoope-kal__seitenwahl--s10:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s10,
.hoope-kal__seitenwahl--s11:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s11,
.hoope-kal__seitenwahl--s12:checked ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl--s12 {
	background: var(--hk-rot);
	border-color: var(--hk-rot);
	color: #fff;
}

/* Tastaturbedienung sichtbar machen: der Radioknopf selbst ist versteckt. */
.hoope-kal__seitenwahl:focus-visible ~ .hoope-kal__seitenzahlen .hoope-kal__seitenzahl {
	outline: 2px solid var(--hk-dunkel);
	outline-offset: 2px;
}

/* Ticket-Knöpfe in der Terminliste */

.hoope-kal__ticket,
.hoope-kal__buchknopf {
	display: inline-block;
	padding: 11px 22px;
	border: 0;
	border-radius: 3px;
	background: var(--hk-rot);
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.hoope-kal__ticket {
	margin-top: 12px;
	padding: 9px 18px;
	font-size: 12.5px;
}

.hoope-kal__ticket:hover,
.hoope-kal__ticket:focus,
.hoope-kal__buchknopf:hover:not(:disabled),
.hoope-kal__buchknopf:focus:not(:disabled) {
	background: var(--hk-dunkel);
	color: #fff !important;
}

/*
 * Hinweis anstelle des Ticket-Knopfes, wenn der Termin vorbei ist (09.09.2026).
 * Bewusst kein Knopf-Aussehen: Was nicht anklickbar ist, darf nicht aussehen
 * wie etwas zum Anklicken.
 */
.hoope-kal__vorbei {
	margin: 12px 0 0;
	padding: 7px 0 0;
	border-top: 1px solid var(--hk-linie, rgba(0, 0, 0, 0.12));
	color: var(--hk-grau, #6b6b6b);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Der Sammelknopf „Jetzt buchen" unter der Liste ist am 29.08.2026 entfallen:
 * gebucht wird in der jeweiligen Terminkachel, ein zweiter Weg dorthin war
 * ueberfluessig.
 */

/* Buchungsansicht */

.hoope-kal--buchen {
	display: block;
	max-width: 760px;
	margin: 0 auto;
}

.hoope-kal__buchkopf {
	padding-bottom: 22px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--hk-linie);
}

.hoope-kal__buchkopf .hoope-kal__zurueck {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 700;
}

.hoope-kal .hoope-kal__buchtitel {
	margin: 12px 0 6px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--hk-dunkel);
	text-transform: none;
}

.hoope-kal__buchzeitraum {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hk-grau);
}

/* Der ganze Beschreibungstext, seit 30.08.2026 unter dem Zeitraum: Wer bucht,
 * soll vorher lesen können, worum es geht, ohne die Seite zu wechseln. */
.hoope-kal__buchtext {
	margin: 16px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--hk-text);
}

.hoope-kal__buchtext p {
	margin: 0 0 12px;
}

.hoope-kal__buchtext p:last-child {
	margin-bottom: 0;
}

.hoope-kal__buchtext img {
	max-width: 100%;
	height: auto;
}

.hoope-kal__tagewahl {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.hoope-kal__tagewahl legend {
	padding: 0;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--hk-dunkel);
}

.hoope-kal__tagwahl {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	margin-bottom: 8px;
	background: var(--hk-flaeche);
	border-left: 4px solid var(--von);
	border-radius: 3px;
	cursor: pointer;
}

.hoope-kal__tagwahl input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--hk-rot);
}

.hoope-kal__tagwahl-datum {
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--hk-dunkel);
}

.hoope-kal__tagwahl-preis {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--hk-grau);
}

/* Tarifmengen je Tag (Motocross- und Enduro-Staffel)
 *
 * Je Tag steht jeder Tarif mit einer eigenen Menge da. Eine Familie bucht so
 * am Samstag einen Erwachsenen und einen Jugendlichen und am Sonntag noch ein
 * Kind dazu — alles in einer Buchung.
 */

.hoope-kal__tagblock--tarif {
	margin-bottom: 12px;
	background: var(--hk-flaeche);
	border-left: 4px solid var(--hk-linie);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

/* Sobald an einem Tag jemand gebucht ist, bekommt er die Terminfarbe. */
.hoope-kal__tagblock--gebucht {
	border-left-color: var(--von);
}

.hoope-kal__tagkopf2 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 16px 10px;
}

.hoope-kal__tagsumme {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 800;
	color: var(--hk-grau);
}

.hoope-kal__tagblock--gebucht .hoope-kal__tagsumme {
	color: var(--hk-dunkel);
}

.hoope-kal__tarifzeilen {
	padding: 0 16px 14px;
}

.hoope-kal__tarifzeile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid var(--hk-linie);
	cursor: pointer;
}

.hoope-kal__tarifname {
	flex: 1 1 auto;
	font-size: 14.5px;
	color: var(--hk-dunkel);
}

.hoope-kal__tarifzusatz {
	display: block;
	font-size: 12.5px;
	color: var(--hk-grau);
}

.hoope-kal__tarifpreis {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--hk-grau);
	white-space: nowrap;
}

.hoope-kal .hoope-kal__tarifzahl {
	flex: 0 0 auto;
	width: 66px;
	padding: 7px 8px;
	background: #fff;
	border: 1px solid var(--hk-linie);
	border-radius: 3px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--hk-dunkel);
}

/* Eine Menge über null hebt ihre Zeile hervor. */
.hoope-kal .hoope-kal__tarifzahl:not([value="0"]) {
	border-color: var(--von);
}

/* Zusätze: Übernachtung, Strom
 *
 * Seit 30.08.2026 stehen sie **im** Tagesblock statt einmalig darunter. Wer an
 * zwei Tagen übernachtet, trägt das an beiden Tagen ein und muss nichts mehr
 * zusammenrechnen. Der Block hat deshalb keine eigene Fläche mehr — er liegt
 * schon auf der des Tages — sondern nur eine Trennlinie nach oben.
 */

.hoope-kal__tagextras {
	padding: 12px 16px 14px;
	border-top: 1px dashed var(--hk-linie);
}

.hoope-kal__tagextras-titel {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hk-grau);
}

.hoope-kal__tagextras-hinweis {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--hk-grau);
}

.hoope-kal__extra {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid var(--hk-linie);
}

.hoope-kal__extra:first-of-type {
	border-top: 0;
}

/* Ein Tag ohne Fahrer bucht keine Zusätze. Das Feld ist dann gesperrt — sichtbar,
 * damit der Preis lesbar bleibt, aber nicht bedienbar. */
.hoope-kal .hoope-kal__extra-zahl:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.hoope-kal__extra:has(.hoope-kal__extra-zahl:disabled) .hoope-kal__extra-name {
	opacity: 0.6;
}

.hoope-kal__extra-name {
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--hk-dunkel);
}

.hoope-kal__extra-einheit {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--hk-grau);
}

/* Gleiche Breite wie die Tarifmenge darüber — beide stehen jetzt im selben
 * Tagesblock untereinander, unterschiedliche Breiten sähen wie ein Fehler aus. */
.hoope-kal .hoope-kal__extra-zahl {
	flex: 0 0 auto;
	width: 66px;
	padding: 9px 10px;
	background: #fff;
	border: 1px solid var(--hk-linie);
	border-radius: 3px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--hk-dunkel);
}

@media (max-width: 640px) {
	.hoope-kal__tarifwahl {
		flex-wrap: wrap;
		padding-left: 16px;
	}
}

.hoope-kal__tagewahl-hilfe {
	margin: 12px 0 0;
	display: flex;
	gap: 10px;
}

.hoope-kal__alle {
	padding: 7px 14px;
	background: #fff;
	border: 1px solid var(--hk-linie);
	border-radius: 3px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hk-grau);
	cursor: pointer;
}

.hoope-kal__alle:hover,
.hoope-kal__alle:focus {
	border-color: var(--hk-rot);
	color: var(--hk-rot);
}

.hoope-kal__summe {
	margin: 0 0 20px;
	padding-top: 18px;
	border-top: 1px solid var(--hk-linie);
	font-size: 18px;
	color: var(--hk-dunkel);
}

.hoope-kal__summe strong {
	font-size: 24px;
	font-weight: 800;
}

.hoope-kal__summe-hinweis {
	font-size: 13px;
	color: var(--hk-grau);
	margin-left: 6px;
}

.hoope-kal__summe--offen {
	font-size: 15px;
	color: var(--hk-grau);
}

.hoope-kal__buchknopf {
	width: 100%;
	font-size: 15px;
	padding: 16px 22px;
}

.hoope-kal__buchknopf:disabled {
	background: var(--hk-linie);
	color: var(--hk-grau) !important;
	cursor: not-allowed;
}

.hoope-kal__buchoffen {
	margin: 0;
	padding: 18px 20px;
	background: var(--hk-flaeche);
	border-left: 4px solid var(--hk-rot);
	border-radius: 3px;
	font-size: 15px;
	line-height: 1.55;
}

@media (max-width: 640px) {
	.hoope-kal .hoope-kal__buchtitel {
		font-size: 24px;
	}

	.hoope-kal__tagwahl {
		flex-wrap: wrap;
	}

	.hoope-kal__tagewahl-hilfe {
		flex-wrap: wrap;
	}
}

/* Raster */

.hoope-kal__wochentage,
.hoope-kal__tage {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.hoope-kal__wochentage {
	margin-bottom: 6px;
}

.hoope-kal__wochentag {
	background: var(--hk-dunkel);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	padding: 14px 0;
	border-radius: 3px;
}

.hoope-kal__tag {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 76px;
	background: var(--hk-flaeche);
	border-radius: 3px;
	font-size: 22px;
	font-weight: 400;
	color: var(--hk-text);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hoope-kal__tag--leer {
	background: transparent;
}

.hoope-kal__tag--belegt {
	background: var(--von);
	color: #fff;
	font-weight: 700;
}

.hoope-kal__tag--belegt:hover,
.hoope-kal__tag--belegt:focus {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(34, 42, 53, 0.25);
}

.hoope-kal__tag--heute {
	box-shadow: inset 0 0 0 2px var(--hk-rot);
}

.hoope-kal__tagmehr {
	position: absolute;
	top: 6px;
	right: 8px;
	font-size: 11px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.85);
	color: var(--hk-dunkel);
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

/* ------------------------------------------------------------- Schmale Geräte */

@media (max-width: 900px) {
	.hoope-kal--monat {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.hoope-kal__tag {
		min-height: 56px;
		font-size: 17px;
	}

	.hoope-kal__wochentag {
		padding: 10px 0;
		font-size: 11px;
		letter-spacing: 0.04em;
	}
}

@media (max-width: 782px) {
	.hoope-kal {
		--hk-tagbreite: 28px;
		--hk-labelbreite: 66px;
		--hk-zeilenhoehe: 30px;
	}

	.hoope-kal__balken {
		font-size: 11px;
		padding: 0 8px;
	}

	.hoope-kal__karte {
		border-radius: 12px;
		padding: 4px 4px 10px;
	}

	.hoope-kal__plan {
		padding: 8px 8px 2px;
	}
}

@media (max-width: 480px) {
	.hoope-kal__tage,
	.hoope-kal__wochentage {
		gap: 4px;
	}

	.hoope-kal__tag {
		min-height: 46px;
		font-size: 15px;
	}
}

/* =========================================================================
   Veranstaltungsseite — Titelblock in der CI, Bild links, Infos rechts
   Vorbild: /aktivitaeten/tiersport/ (dünne rote Vorzeile, schwarze
   Überschrift, kleiner Balken, dann Text)
   ========================================================================= */

.hoope-ev {
	--hk-rot: #fe2e2e;
	--hk-dunkel: #222222;
	--hk-linie: #e6e9ef;
	--hk-flaeche: #f2f4f8;
	--hk-grau: #8b93a1;

	margin: 0 0 40px;
	overflow-wrap: break-word;
}

.hoope-ev__kopf {
	margin-bottom: 34px;
}

/* Schriften wie auf /aktivitaeten/tiersport/: die rote Vorzeile ist
   Avadas Typografie 2 (Montserrat 200), die Überschrift Typografie 1
   (Montserrat 800). Über die Variablen, damit sie mitziehen, wenn der
   Kunde die Schriften im Theme umstellt. */

.hoope-ev__vorzeile,
.hoope-kal__vorzeile {
	font-family: var(--awb-typography2-font-family, "Montserrat", Arial, sans-serif);
	font-weight: var(--awb-typography2-font-weight, 200);
	font-style: var(--awb-typography2-font-style, normal);
	letter-spacing: var(--awb-typography2-letter-spacing, 0);
	text-transform: var(--awb-typography2-text-transform, capitalize);
	color: var(--hk-rot);
	font-size: clamp(21px, 3vw, 39px);
	line-height: 1.2;
	margin-bottom: 2px;
}

.hoope-ev .hoope-ev__titel {
	margin: 0;
	padding: 0;
	font-family: var(--awb-typography1-font-family, "Montserrat", Arial, sans-serif);
	font-weight: var(--awb-typography1-font-weight, 800);
	letter-spacing: var(--awb-typography1-letter-spacing, 0);
	font-size: clamp(30px, 5vw, 54px);
	line-height: 1.05;
	text-transform: none;
	color: var(--hk-dunkel);
}

.hoope-ev__strich {
	width: 68px;
	height: 4px;
	margin-top: 18px;
	background: var(--von, var(--hk-rot));
}

.hoope-ev__spalten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 46px;
	align-items: start;
}

.hoope-ev__bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.hoope-ev__fakten {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;
	margin: 26px 0 0;
	padding: 0;
	border-top: 1px solid var(--hk-linie);
}

.hoope-ev__fakten dt {
	padding: 12px 20px 12px 0;
	border-bottom: 1px solid var(--hk-linie);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hk-grau);
	white-space: nowrap;
}

.hoope-ev__fakten dd {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--hk-linie);
	font-size: 15px;
	font-weight: 600;
	color: var(--hk-dunkel);
}

/* Der Seiteninhalt liegt zwischen den beiden Haken und landet hier drin. */
.hoope-ev__infospalte > .tribe-events-single-event-description,
.hoope-ev__infospalte > .tribe-events-content {
	margin: 0;
	padding: 0;
}

.hoope-ev__infospalte p:first-child {
	margin-top: 0;
}

.hoope-ev__aktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid var(--hk-linie);
}

.hoope-ev .hoope-ev__buchen {
	display: inline-block;
	padding: 16px 34px;
	background: var(--hk-rot);
	border-radius: 3px;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.hoope-ev .hoope-ev__buchen:hover,
.hoope-ev .hoope-ev__buchen:focus {
	background: var(--hk-dunkel);
	color: #fff;
	transform: translateY(-1px);
}

.hoope-ev .hoope-ev__zweitlink {
	font-size: 14px;
	font-weight: 700;
	color: var(--hk-grau);
	text-decoration: underline;
}

.hoope-ev .hoope-ev__zweitlink:hover {
	color: var(--hk-rot);
}

.hoope-ev__vorbei {
	font-size: 15px;
	font-weight: 700;
	color: var(--hk-grau);
}

@media (max-width: 900px) {
	.hoope-ev__spalten {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.hoope-ev__kopf {
		margin-bottom: 24px;
	}
}

/* Auf Veranstaltungsseiten stand der Titel zweimal: einmal im Avada-Banner
   (Theme-Builder-Bereich) und einmal im CI-Block darunter. Zwei H1 auf einer
   Seite sind auch für Suchmaschinen falsch — das Banner behält sein Bild,
   die Überschrift kommt raus. */
body.single-tribe_events .fusion-tb-page-title-bar .fusion-title-heading,
body.single-tribe_events .fusion-tb-page-title-bar .fusion-page-title-captions {
	display: none;
}

/* =========================================================================
   Startseiten-Slider — Folie 1 ist der bisherige Hero
   ========================================================================= */

.hoope-slider {
	--hs-rot: #fe2e2e;
	--hs-hoehe: 920px;

	position: relative;
	width: 100%;
	height: var(--hs-hoehe);
	overflow: hidden;
	background: #0c3543;
}

.hoope-slider__buehne,
.hoope-slider__folie {
	position: absolute;
	inset: 0;
}

.hoope-slider__folie {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease;
}

.hoope-slider__folie.ist-aktiv {
	opacity: 1;
	visibility: visible;
}

.hoope-slider__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 🔴 Der Slider ist 920 px hoch, die Unterseiten Tiersport und Motorsport stehen
   auf 1080 px. Bei 1920er Fensterbreite fehlen dem Slider dadurch rund 150 px
   Bildhöhe, die `cover` je zur Hälfte oben und unten wegnimmt — bei Tiersport
   genau den Kopf der Reiterin, der im Bild bei y ≈ 0 anfängt. Am oberen Rand
   verankert bleibt er sichtbar wie auf der Unterseite. */
.hoope-slider__bild--oben {
	object-position: center top;
}

/* Ohne Schleier ist weißer Text auf hellen Bildstellen unlesbar.
   Rechts kräftiger, weil dort der Text steht.
   🔴 Zwei Stärken, weil zwei Bildarten im Spiel sind:
   - Folien mit echtem Foto brauchen rechts einen kräftigen Schleier.
   - Die Markencollagen bringen ihre eigene Farbfläche mit. Ein kräftiger
     Schleier macht das Rot dort schmutzig braun — deshalb nur ein Hauch. */
.hoope-slider__schleier {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(12, 53, 67, 0.15) 0%, rgba(12, 53, 67, 0.35) 45%, rgba(12, 53, 67, 0.78) 100%);
}

/* Kundenwunsch 30.07.: Folie 1 ohne Schleier. Die Textschatten bleiben,
   sie tragen den weißen Text auch ohne Abdunklung. */
.hoope-slider__folie--klar .hoope-slider__schleier {
	background: none;
}

.hoope-slider__folie--foto .hoope-slider__schleier {
	background: linear-gradient(100deg, rgba(12, 53, 67, 0.10) 0%, rgba(12, 53, 67, 0.32) 42%, rgba(12, 53, 67, 0.80) 72%, rgba(12, 53, 67, 0.90) 100%);
}


.hoope-slider__folie--grafik .hoope-slider__schleier {
	background: linear-gradient(100deg, rgba(12, 53, 67, 0.10) 0%, rgba(12, 53, 67, 0.12) 50%, rgba(12, 53, 67, 0.30) 100%);
}

.hoope-slider__inhalt {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 5vw;
}

/* 820 px: „im Hoope Park" ist in Montserrat 800 bei 105 px gemessene 790 px
   breit. Im Baukasten der Unterseiten steht genau ein Umbruch im Titel —
   ist der Block schmaler, entsteht ein dritter, ungewollter Umbruch. */
.hoope-slider__box {
	max-width: 820px;
	text-align: left;
	color: #fff;
}

/* Die Folien 2–5 sind die Hero-Bereiche der Aktivitätsseiten: Text links,
   halbe Breite, wie dort im Baukasten eingestellt. Folie 1 behält den Text
   rechts, weil links die rote Grafik im Bild liegt. */
/* 🔴 Text bündig mit dem Seitenlogo (Kundenwunsch 01.08.).

   Gemessen sitzt das Logo bei `max(0, (Fenster − 1394) / 2) + 27 px` — die
   Kopfzeile ist ein 1394 px breiter Rahmen, das Logo beginnt 27 px darin.
   Der Slider stand dagegen in einem 1240er Rahmen mit 5vw Innenabstand und
   begann dadurch 115 px weiter rechts. Mit denselben Werten fluchtet er:
   1904 px → 282 px, 1584 px → 122 px, jeweils genau die Logokante.

   Betrifft die fünf Folien mit Text links (Tiersport, Stark VARG, Laufen,
   Motorsport, Radsport). Folie 1 (Text rechts) und die Gastronomie-Folie
   bleiben ausdrücklich, wie sie sind. */
.hoope-slider__folie--links .hoope-slider__inhalt {
	max-width: 1394px;
	padding-left: 27px;
	padding-right: 27px;
}

/* 🔴 Zusätzlicher Abstand rechts: Unter dem Kalender-Knopf hängen seit dem
   31.07. der Herz-Knopf und seit dem 02.08. der Stern „Fahrschulen aufgepasst"
   in die Folie hinein. Betrifft nur Folie 1, die einzige mit Text rechts.

   🔴 Die frühere Lösung (`5vw + 80px`) hat nicht mehr gereicht und war
   grundsätzlich falsch angesetzt: Sie hing am **Fensterrand**, Herz und Stern
   hängen aber am 1394 px breiten Kopfrahmen. Beide wandern deshalb
   unterschiedlich schnell, und bei 1366 px lag der Stern gemessen 34 px über
   dem Textblock — bei 1584 px blieb 1 px Luft, bei 1904 px 17 px. Ein Wert,
   der bei einer Breite passt, passt bei der nächsten nicht.

   Jetzt hängt der Text am selben Rahmen wie das Herz: 1394 px Rahmenbreite,
   35 px Rand plus 172 px Herzbreite plus 33 px Luft. Damit bleibt der Abstand
   über alle Breiten gleich — gemessen 22/33/33 px bei 1366/1584/1904 px.

   Seit der Stern am 02.08. nach oben links gewandert ist, begrenzt hier nur
   noch das Herz; die 282 px von vorhin sind deshalb wieder auf 240 zurück. */
.hoope-slider__folie--rechts .hoope-slider__inhalt {
	justify-content: flex-end;
	max-width: 1394px;
	padding-right: 240px;
}

.hoope-slider__folie--rechts .hoope-slider__box {
	max-width: 540px;
	text-align: right;
}

.hoope-slider__folie--rechts .hoope-slider__knoepfe {
	justify-content: flex-end;
}

.hoope-slider__vorzeile {
	font-family: var(--awb-typography2-font-family, "Montserrat", Arial, sans-serif);
	font-weight: var(--awb-typography2-font-weight, 200);
	letter-spacing: var(--awb-typography2-letter-spacing, 0);
	font-size: clamp(17px, 2.2vw, 28px);
	line-height: 1.25;
	color: #fff;
	margin-bottom: 4px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Werte 1:1 aus den Aktivitätsseiten: Montserrat 800, 105 px,
   Zeilenabstand 0.9, Laufweite −4 px (hier als em, damit es mitskaliert),
   Abstand nach unten 45 px. */
.hoope-slider .hoope-slider__titel {
	margin: 0 0 45px;
	font-family: var(--awb-typography1-font-family, "Montserrat", Arial, sans-serif);
	font-weight: var(--awb-typography1-font-weight, 800);
	font-size: clamp(42px, 7vw, 105px);
	line-height: 0.9;
	letter-spacing: -0.038em;
	text-transform: none;
	color: #fff;
	text-shadow: 0 3px 18px rgba(0, 0, 0, 0.45);
}

.hoope-slider__text {
	margin: 0 0 26px;
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.55;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hoope-slider__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start;
}

/* Knopffarben wie auf den Aktivitätsseiten: erster Knopf weiß mit dunkler
   Schrift, zweiter Knopf rot. */
/* 🔴 Ohne eigene Angabe erben die Knöpfe die Fließtextschrift des Themes —
   Merriweather, eine Serifenschrift. Zwischen den Montserrat-Titeln sieht das
   nach Versehen aus. Richtig ist **Outfit**, dieselbe Schrift wie im Kalender
   und im Mega-Menü (Kundenhinweis 31.07.). */
.hoope-slider .hoope-slider__knopf {
	display: inline-block;
	font-family: "Outfit", "Helvetica Neue", Arial, sans-serif;
	padding: 15px 30px;
	border: 2px solid #fff;
	border-radius: 3px;
	background: #fff;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.hoope-slider .hoope-slider__knopf:hover,
.hoope-slider .hoope-slider__knopf:focus {
	background: var(--hs-rot);
	border-color: var(--hs-rot);
	color: #fff;
	transform: translateY(-1px);
}

.hoope-slider .hoope-slider__knopf--leer {
	background: var(--hs-rot);
	border-color: var(--hs-rot);
	color: #fff;
}

.hoope-slider .hoope-slider__knopf--leer:hover,
.hoope-slider .hoope-slider__knopf--leer:focus {
	background: #fff;
	border-color: #fff;
	color: #1a1a1a;
}

/* --------------------------------------------------------------------------
   Folienart „rot" — Markenfeld mit Schrägkante (Folie „Gastronomie")

   Vorlage ist das Konzeptblatt „Fazit" (Slide9 aus dem Bildmaterial): rotes
   Feld links, schmale weiße Schrägkante, Foto rechts. Das Rot dort ist
   ausgemessen **#fe2e2e** — genau das --hs-rot, das der Slider ohnehin führt.

   🔴 Eine Abweichung von der Vorlage, mit Absicht: Im Konzeptblatt läuft die
   Kante in 45° und lässt auf halber Höhe nur rund 31 % Breite übrig. Dort
   steht der Text unten links, wo das Feld am breitesten ist. Im Slider sitzt
   der Text mittig — bei 45° läge die halbe Überschrift auf dem Foto. Die
   Kante ist deshalb flacher gelegt.

   🔴 Kundenvorgabe 30.07., zweite Runde: **Die Kante soll weiter nach links,
   bis etwa auf Höhe des Menüpunkts „Hoope Park"** — die Kellnerin mit den
   Tellern soll möglichst groß im Bild stehen. Gemessen sitzt dieser Menüpunkt
   bei 34 bis 41 % der Breite, daher oben 38 %.

   Das kostet Titelgröße, und das ist keine Geschmacksfrage, sondern Arithmetik:
   Der Titel beginnt bei 5 % der Breite und wächst mit der Schriftgröße; die
   Kante wächst mit der Breite. „im Hoope Park" braucht in Montserrat 800 das
   7,524-fache der Schriftgröße. Bei 105 px wie auf den anderen Folien wären
   das 790 px — die Kante liegt auf Titelhöhe aber nur bei 48,4 % der Breite.
   Deshalb hier clamp(36px, 5.3vw, 84px): der Titel endet bei 44,9 % der
   Breite, es bleiben rund 3,5 % Luft, gleichmäßig über alle Fensterbreiten.
   Wer den Titel wieder größer will, muss die Kante nach rechts nehmen.
   -------------------------------------------------------------------------- */

.hoope-slider__folie--rot {
	--hs-keil-oben: 38%;
	--hs-keil-unten: 64%;
	--hs-kante: 1.1%;

	background: var(--hs-rot);
}

.hoope-slider .hoope-slider__folie--rot .hoope-slider__titel {
	font-size: clamp(36px, 5.3vw, 84px);
}

/* Auf der Farbfläche steht der Text am linken Rand, wie im Konzeptblatt — der
   sonst mittige 1240-px-Rahmen würde ihn nach rechts unter die Kante schieben.
   🔴 Der Textblock braucht zusätzlich eine Fessel an die Fensterbreite: mit
   festen 820 px ist der Absatz auf schmalen Bildschirmen breiter als der Titel
   und läuft als Erster über die Kante. 44vw liegt sicher über den 39,9vw, die
   der Titel bei 5.3vw braucht — schmaler, und der Titel bräche in eine dritte
   Zeile um, die es im Baukasten nicht gibt. */
.hoope-slider__folie--rot .hoope-slider__inhalt {
	max-width: 100%;
}

.hoope-slider__folie--rot .hoope-slider__box {
	max-width: min(640px, 44vw);
}

/* Das Foto muss nur die rechte Seite füllen — links liegt ohnehin das rote
   Feld darüber. Das spart Vergrößerung: über die volle Breite müsste die
   1200-px-Vorlage bei 1920 px Fenster auf das 1,6-fache hochgerechnet werden,
   auf 62 % Breite nur noch auf das 1,32-fache. */
.hoope-slider__folie--rot .hoope-slider__bild {
	left: 38%;
	width: 62%;
	object-position: 72% center;
}

.hoope-slider__folie--rot .hoope-slider__schleier {
	background: none;
}

.hoope-slider__folie--rot .hoope-slider__schleier::before,
.hoope-slider__folie--rot .hoope-slider__schleier::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Die weiße Kante ist dasselbe Vieleck, nur um --hs-kante breiter. Sie wird
   zuerst gezeichnet und schaut deshalb als schmaler Streifen rechts unter dem
   roten Feld hervor. */
.hoope-slider__folie--rot .hoope-slider__schleier::before {
	background: #fff;
	clip-path: polygon(
		0 0,
		calc(var(--hs-keil-oben) + var(--hs-kante)) 0,
		calc(var(--hs-keil-unten) + var(--hs-kante)) 100%,
		0 100%
	);
}

.hoope-slider__folie--rot .hoope-slider__schleier::after {
	background: var(--hs-rot);
	clip-path: polygon(0 0, var(--hs-keil-oben) 0, var(--hs-keil-unten) 100%, 0 100%);
}

/* Auf der Farbfläche trägt der Text von allein; der Schatten der Fotofolien
   macht ihn hier nur schmutzig. */
.hoope-slider__folie--rot .hoope-slider__vorzeile,
.hoope-slider__folie--rot .hoope-slider__titel,
.hoope-slider__folie--rot .hoope-slider__text {
	text-shadow: none;
}

/* Der weiße Knopf färbt sich sonst beim Überfahren rot — auf rotem Grund
   verschwindet er dabei. Gilt für beide Arten mit roter Fläche. */
.hoope-slider__folie--rot .hoope-slider__knopf:hover,
.hoope-slider__folie--rot .hoope-slider__knopf:focus,
.hoope-slider__folie--blatt .hoope-slider__knopf:hover,
.hoope-slider__folie--blatt .hoope-slider__knopf:focus {
	background: #0c3543;
	border-color: #0c3543;
	color: #fff;
}

/* Und der zweite Knopf ist rot auf rot, also unsichtbar. */
.hoope-slider__folie--rot .hoope-slider__knopf--leer,
.hoope-slider__folie--blatt .hoope-slider__knopf--leer {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.hoope-slider__folie--rot .hoope-slider__knopf--leer:hover,
.hoope-slider__folie--rot .hoope-slider__knopf--leer:focus,
.hoope-slider__folie--blatt .hoope-slider__knopf--leer:hover,
.hoope-slider__folie--blatt .hoope-slider__knopf--leer:focus {
	background: #fff;
	border-color: #fff;
	color: #1a1a1a;
}

/* --------------------------------------------------------------------------
   Folienart „blatt" — das Bild ist selbst ein Konzeptblatt

   Anders als bei `rot` wird hier **nichts** über das Bild gezeichnet: Das Blatt
   bringt die rote Fläche und die Zackenkante schon mit (Anhang 3157, Text mit
   werkzeuge-Skript herausgerechnet). Zu tun bleibt nur, den Text in die freie
   Fläche zu stellen.

   🔴 Die Fläche ist schmal, und das ist eine feste Größe des Bildes, keine
   Einstellung: Ihre linke Kante liegt im Blatt bei x ≈ 1150 von 1920 px.
   Weil `cover` bei einem 920 px hohen Slider fast immer über die Höhe
   skaliert, landet sie über alle üblichen Fensterbreiten hinweg bei 60 bis
   65 % — gemessen bei 1200, 1600 und 1920 px. Für den Text bleiben also rund
   30 % der Breite. Deshalb ist der Titel hier deutlich kleiner als auf den
   anderen Folien; größer geht nur mit einem anderen Bild.
   -------------------------------------------------------------------------- */

.hoope-slider__folie--blatt .hoope-slider__schleier {
	background: none;
}

/* 🔴 Nicht mittig, sondern oben angesetzt: Der Herz-Knopf hängt bis rund
   300 px in die Folie hinein und lag sonst auf dem Titel. Darunter beginnt
   der Block. Nach unten hin wandert die Zackenkante nach rechts — der Platz
   zwischen Herz und Zacken ist knapp, deshalb sind Titelgröße und Blockbreite
   hier kleiner als auf den anderen Folien. */

/* 🔴 Der Block hängt seit dem 02.08. **am Bild**, nicht mehr am Fensterrand.
   Kundenwunsch: „so weit nach links, dass wir ganz leicht in das Bild
   reingehen". Das geht nur, wenn die linke Blockkante der Zackenkante folgt —
   und die sitzt im Bild, nicht im Fenster. Gemessen wandert sie mit der
   Fensterbreite so:

       Fenster ≤ 1636 px   Kante(unten) = 50vw + 80px   (Bild wird beschnitten)
       Fenster ≥ 1636 px   Kante(unten) = 54.9vw        (Bild füllt die Breite)

   Seit dem 02.08. steht der Block **auf Herzhöhe** statt 330 px tief, und die
   Formel ist dadurch einfacher geworden: Über die Blockzeilen liegt die
   Zackenkante auf einer Geraden `50vw + c` — über alle Breiten von 1025 bis
   1636 px auf ein halbes Pixel genau, gemessen an zehn Stellen. Oberhalb von
   1636 px wird das Bild nicht mehr beschnitten, die Kante bleibt dann hinter
   dieser Geraden zurück; der Block steht dort auf Rot, ohne einzutauchen.
   Ein Ast genügt also.

   🔴 **`c` hängt an der Blockhöhe** — wer den Block höher setzt, muss es
   nachziehen, sonst taucht der Text tiefer ins Bild als gewollt. Gemessen:

       Blockzeilen 220–500   Kante = 50vw −  4px
       Blockzeilen 205–485   Kante = 50vw − 18px
       Blockzeilen 190–470   Kante = 50vw − 29px   ← aktuell
       Blockzeilen 175–455   Kante = 50vw − 37px

   Die Eintauchtiefe ist die Differenz und der eigentliche Stellknopf: größer
   heißt tiefer ins Bild, kleiner heißt weiter rechts.

   🔴 **Seit dem 03.08. ist sie 0** (Kundenwunsch: „damit der Button nicht mehr
   in dem weißen Element des Hintergrundbilds steht"). Der Block hängt jetzt
   auf `50vw − 29`, also genau an der Kante, statt 106 px davor.

   Die 106 px waren nicht knapp daneben, sie waren der Grund: Gemessen lag der
   erste, **weiße** Knopf über alle Breiten hinweg mitten auf dem weißen
   Spritzer — er verlor dort seine Kante. Zahlen, jeweils die rechteste
   überwiegend weiße Spalte in der Knopfzeile gegen die linke Knopfkante:

       Fenster   vorher (50vw−135)   nachher (50vw−29)
       1100      37 px auf Weiß      69 px Luft
       1280      46 px auf Weiß      60 px Luft
       1366      22 px auf Weiß      84 px Luft
       1584      53 px auf Weiß      53 px Luft
       1904      96 px auf Weiß      10 px Luft
       2560      87 px auf Weiß      19 px Luft

   Weniger als 106 reichte nicht: Bei einer Tiefe von 50 px stand der Knopf bei
   1904 px immer noch 20 px auf Weiß. „Ein paar Pixel" war der Wunsch, 106 war
   das Maß.

   🔴 Weiß wird **entsättigt** gesucht, nicht über die Helligkeit: Rot ist
   ebenso hell. Werkzeug dafür ist `probe-gastro.py`.

   🔴 Nach oben begrenzt das **Hauptmenü**, nicht das Bild: Es steht bei
   y 64–136 und liegt waagerecht genau über dem Block (x 498–1195 gegen
   674–1160). Bei 190 px Oberkante bleiben 54 px Luft.

   🔴 Die Zackenkante läuft über die 256 px Blockhöhe um 318 px nach rechts.
   Ein Block mit gerader linker Kante kann deshalb nicht oben **und** unten
   knapp an der Kante stehen — wer ihn oben anlegt, schiebt die Knöpfe rund
   300 px ins Foto. Das ist eine Eigenschaft des Blattes, keine Einstellung.

   🔴 Und die Grenze nach links ist **nicht** das Foto, sondern der weiße
   Spritzer davor. Beim ersten Anlauf mit 140 px stand „Für den" auf blankem
   Weiß — weiße Schrift auf weißem Grund. Eine gemittelte Helligkeitsmessung
   findet das nicht: Über die ganze Zeile gemittelt kam 125 heraus, an der
   entscheidenden Stelle sind es 255. Deshalb ist der Wert an der Zackenkante
   ausgerichtet, nicht am Fotomittel.

   Kontrollwerte bei 1584 px: Blockkante 682, rechteste Zacke im Block 788,
   Blockfuß bei 1173, Herz beginnt bei 1282 — 109 px Luft.

   🔴 Die 220 px oben sind die Herzoberkante plus ein wenig Luft: Das Herz
   steht bei y 156–311. Höher geht nicht, ohne unter die Kopfzeile zu geraten. */
.hoope-slider__folie--blatt .hoope-slider__inhalt {
	max-width: 100%;
	justify-content: flex-start;
	align-items: flex-start;
	padding-top: 190px;
	padding-left: calc(50vw - 29px);
	padding-right: 27px;
}

/* Der Block steht rechts in der roten Fläche, sein Inhalt aber linksbündig:
   Titel, Unterzeile, Zitat und beide Knöpfe beginnen auf derselben Linie
   (Kundenwunsch 31.07. — „alles in einer Flucht"). */
/* 🔴 Die Breite ist am Blatt ausgemessen, nicht geschätzt.

   Die gezackte Kante wandert von oben nach unten nach rechts: Auf Höhe der
   Textmitte liegt sie bei 54 %, an der Unterkante des Blocks schon bei 73 %
   der Bildbreite. Maßgeblich ist die **unterste** Zeile — steht der Block
   weiter links, laufen die Knöpfe in die Zacken. Mit dem alten, dunklen Foto
   fiel das nicht auf; das helle Terrassenbild hat es sichtbar gemacht.

   22vw Block plus 5vw Rand ergeben 73 bis 95 % — genau die Gasse, die das
   Konzeptblatt selbst für seinen Text nutzt. Der Titel ist eine Nummer
   kleiner, sonst passt „Gastronomie" nicht in diese Breite. */
/* Wieder die vollen 496 px: Der Stern ist am 02.08. nach oben links unter das
   Logo gewandert, damit ist die rechte Begrenzung nur noch das Herz. Zwischen
   Zackenkante und Herz bleiben jetzt 106 bis 171 px Luft (gemessen bei 1025 /
   1200 / 1366 / 1584 / 1904 px) — vorher waren es 16 bis 32. */
.hoope-slider__folie--blatt .hoope-slider__box {
	max-width: min(496px, 31vw);
	text-align: left;
}

.hoope-slider__folie--blatt .hoope-slider__knoepfe {
	justify-content: flex-start;
	flex-wrap: nowrap;
}

/* 🔴 Die Knöpfe hatten hier bis zum 03.08. eine eigene, kleinere Größe
   (12 px, Innenabstand 11/17) — damit beide nebeneinander in die schmale Gasse
   zwischen Zackenkante und Herz passten. Der Kunde hat sie am 03.08. daneben
   gehalten und den Unterschied gesehen: Auf allen anderen Folien sind sie
   14 px mit 15/30 Innenabstand.

   Seit der Block an der Kante steht (siehe oben) ist die Gasse breit genug:
   Beide Beschriftungen zusammen brauchen gemessen **447 px** (246 + 189 + 12),
   und zwischen Knopfreihe und Herz bleiben je nach Fensterbreite 55 bis 90 px.
   Die eigene Größe entfällt damit, `nowrap` bleibt — die Reihe darf auch
   künftig nicht umbrechen, sonst rutscht der zweite Knopf in die Zacken. */
.hoope-slider .hoope-slider__folie--blatt .hoope-slider__knopf {
	white-space: nowrap;
}

/* Damit auch das Zitat auf dieser Linie beginnt, hängt das Anführungszeichen
   links daneben statt davor — Platz dafür ist da, die rote Fläche reicht über
   den Textblock hinaus. */
.hoope-slider__folie--blatt .hoope-slider__text--zitat {
	padding-left: 0;
}

.hoope-slider__folie--blatt .hoope-slider__text--zitat::before {
	left: -46px;
}

/* 🔴 Obergrenze 72 statt 80 px. Sie greift erst über rund 1900 px Fensterbreite
   — darunter gilt ohnehin `3.8vw`, dort ändert sich nichts.
   Grund: Seit der Block an der Zackenkante steht, wandert er auf breiten
   Schirmen mit `50vw` weiter nach rechts, das Herz bleibt aber im 1394er
   Kopfrahmen stehen. Gemessen bei 2560 px: „Gastronomie" endete mit 80 px
   Schrift **4 px** vor dem Herz und lief sichtbar hinein. Mit 72 px bleiben
   56 px Luft. Titel und Herz überlappen sich senkrecht (y 177–274 gegen
   156–311), das ist also keine theoretische Enge. */
.hoope-slider .hoope-slider__folie--blatt .hoope-slider__titel {
	margin-bottom: 6px;
	font-size: clamp(30px, 3.8vw, 72px);
	letter-spacing: -0.03em;
	text-shadow: none;
}

.hoope-slider__folie--blatt .hoope-slider__unterzeile {
	margin-bottom: 30px;
	font-family: var(--awb-typography2-font-family, "Montserrat", Arial, sans-serif);
	font-weight: var(--awb-typography2-font-weight, 200);
	font-size: clamp(14px, 1.15vw, 19px);
	line-height: 1.3;
	color: #fff;
}

/* 🔴 Wieder mit Schatten: Seit der Block ins Bild ragt, liegen die letzten
   Zeilen und die Knöpfe nicht mehr nur auf Rot. Gemessene Helligkeit des
   Fotos in diesen Zeilen: 125 (Textmitte), 68 (Knopfzeile), 168 (Blockfuß) —
   ohne Schatten verliert weiße Schrift dort den Rand. Ein Schleier über dem
   Blatt kommt nicht in Frage, der würde die Zackenkante mit eintrüben. */
.hoope-slider__folie--blatt .hoope-slider__text {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45), 0 0 2px rgba(0, 0, 0, 0.35);
	font-size: clamp(14px, 1.05vw, 17px);
	line-height: 1.5;
}

/* Das Anführungszeichen steht wie im Konzeptblatt links neben dem Zitat und
   ist Schmuck, kein Text — deshalb als ::before und nicht im Markup: sonst
   läse ein Screenreader es mit vor. */
.hoope-slider__text--zitat {
	position: relative;
	padding-left: 56px;
	text-align: left;
}

.hoope-slider__text--zitat::before {
	content: "“";
	position: absolute;
	left: 0;
	top: -28px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 82px;
	line-height: 1;
	/* Weiß statt 38 % durchscheinend (Kundenwunsch 02.08.). Es steht jetzt
	   dicht an der Zackenkante, dort ging das blasse Zeichen unter. */
	color: #fff;
}

/* --------------------------------------------------------------------------
   Dunkler Verlauf am oberen Rand — Folienschlüssel 'kopfverlauf'

   Der Header liegt durchsichtig über dem Slider. Auf manchen Motiven geht der
   rote Kalender-Knopf darin unter: auf dem Konzeptblatt liegt er rot auf rot,
   auf hellen Fotos verschwindet die weiße Menüschrift.

   🔴 Die Werte stehen in **Pixeln**, nicht in Prozent: Der Verlauf soll die
   Kopfzeile tragen und danach auslaufen — unabhängig davon, ob die Folie
   gerade 920, 620 oder 520 px hoch ist. Ab 240 px ist er vollständig weg.

   🔴 Muss **nach** der Regel für `--klar` stehen: beide sind gleich
   spezifisch, es entscheidet die Reihenfolge im Blatt. Dasselbe gilt im
   Mobilblock weiter unten, wo `--klar` erneut auf `none` gesetzt wird.

   Gesetzt ist er (Kundenwahl 31.07.) auf Folie 2 (Gastronomie), 4 (Stark
   VARG) und 6 (Motorsport). Die übrigen bleiben ausdrücklich ohne.
   -------------------------------------------------------------------------- */

.hoope-slider__folie--kopfverlauf .hoope-slider__schleier {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.42) 0,
		rgba(0, 0, 0, 0.20) 110px,
		rgba(0, 0, 0, 0) 240px
	);
}

/* 🔴 Der Header liegt durchsichtig über dem Slider. Beim Überfahren färbt
   Avada den Menüpunkt in --awb-active-color, und das ist das Markenrot — auf
   dem roten Feld dieser Folie ist der Punkt damit weg. Der Slider meldet die
   laufende Folienart als Klasse am <body> (slider.js, meldeArt), hier wird
   daran angeknüpft. Dunkelblau statt Rot: gegen das Rot 3,6:1, und die Schrift
   ist fett — das trägt.
   Das !important ist nötig, weil die Avada-Regel selbst eins setzt. */
body.hoope-folie-rot .fusion-tb-header .awb-menu__main-li_regular:hover .awb-menu__main-a_regular,
body.hoope-folie-rot .fusion-tb-header .awb-menu__main-li_regular:focus .awb-menu__main-a_regular,
body.hoope-folie-rot .fusion-tb-header .awb-menu__main-li_regular:focus-within .awb-menu__main-a_regular,
body.hoope-folie-rot .fusion-tb-header .awb-menu__main-li_regular:active .awb-menu__main-a_regular {
	color: #0c3543 !important;
}

/* Pfeile */

.hoope-slider__pfeil {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 52px;
	height: 52px;
	margin-top: -26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(3px);
	cursor: pointer;
	transition: background 0.15s ease;
}

.hoope-slider__pfeil:hover,
.hoope-slider__pfeil:focus {
	background: var(--hs-rot);
}

.hoope-slider__pfeil::before {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	margin: 0 auto;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
}

.hoope-slider__pfeil--vor {
	right: 18px;
}

.hoope-slider__pfeil--vor::before {
	transform: translateX(-3px) rotate(45deg);
}

.hoope-slider__pfeil--zurueck {
	left: 18px;
}

.hoope-slider__pfeil--zurueck::before {
	transform: translateX(3px) rotate(-135deg);
}

/* Punkte */

.hoope-slider__punkte {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 74px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.hoope-slider__punkt {
	width: 34px;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}

.hoope-slider__punkt.ist-aktiv {
	width: 56px;
	background: var(--hs-rot);
}

@media (max-width: 1024px) {
	.hoope-slider {
		--hs-hoehe: 620px;
	}

	/* Auf schmalen Geräten steht alles links, auch Folie 1. */
	.hoope-slider__inhalt,
	.hoope-slider__folie--rechts .hoope-slider__inhalt,
	.hoope-slider__folie--links .hoope-slider__inhalt {
		justify-content: flex-start;
		padding: 0 7vw;
		max-width: 100%;
	}

	.hoope-slider__box,
	.hoope-slider__folie--rechts .hoope-slider__box {
		max-width: 100%;
		text-align: left;
	}

	.hoope-slider__knoepfe,
	.hoope-slider__folie--rechts .hoope-slider__knoepfe {
		justify-content: flex-start;
	}

	.hoope-slider .hoope-slider__titel {
		margin-bottom: 26px;
	}

	/* Text steht hier links, also den Schleier spiegeln. */
	.hoope-slider__schleier,
	.hoope-slider__folie--foto .hoope-slider__schleier {
		background: linear-gradient(80deg, rgba(12, 53, 67, 0.82) 0%, rgba(12, 53, 67, 0.45) 60%, rgba(12, 53, 67, 0.3) 100%);
	}

	.hoope-slider__folie--grafik .hoope-slider__schleier {
		background: linear-gradient(80deg, rgba(12, 53, 67, 0.55) 0%, rgba(12, 53, 67, 0.25) 55%, rgba(12, 53, 67, 0.12) 100%);
	}

	.hoope-slider__folie--klar .hoope-slider__schleier {
		background: none;
	}

	/* Muss hier wiederholt werden — die Regel für `--klar` steht direkt
	   darüber und ist gleich spezifisch. Der Header ist auf dem Handy
	   niedriger, deshalb läuft der Verlauf hier früher aus. */
	.hoope-slider__folie--kopfverlauf .hoope-slider__schleier {
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.42) 0,
			rgba(0, 0, 0, 0.20) 90px,
			rgba(0, 0, 0, 0) 190px
		);
	}

	/* 🔴 Nebeneinander geht auf dem Handy nicht auf: Bliebe das rote Feld
	   links, hätte der Titel bei 390 px keine 180 px Platz. Die Kante liegt
	   deshalb quer — Foto oben, Farbfläche darunter, Text wie gehabt mittig.

	   Die 15 % sind gerechnet, und der enge Fall ist das kleine Gerät, nicht
	   das große: Bei 390 px Breite ist die Folie nur 520 px hoch, der Textblock
	   aber rund 350 px — er beginnt also schon bei 17 % der Höhe. Am linken
	   Rand (x ≈ 7 %) liegt die Kante bei 14,2 %, es bleiben 16 px Luft über der
	   Versalhöhe. Bei 620 px Folienhöhe beginnt der Text erst bei 27 %, dort
	   ist reichlich Platz. Wer die Kante tiefer legt, prüft zuerst 390 px. */
	.hoope-slider__folie--rot .hoope-slider__bild {
		left: 0;
		width: 100%;
	}

	/* 🔴 Muss hier stehen: Die Regel weiter oben bindet den Textblock an 56vw
	   und ist eine Klasse spezifischer als die allgemeine Handy-Regel darüber.
	   Ohne diese Zeile bliebe der Text auf dem Handy 218 px schmal. */
	.hoope-slider__folie--rot .hoope-slider__box {
		max-width: 100%;
	}

	.hoope-slider__folie--rot .hoope-slider__schleier::before {
		clip-path: polygon(0 calc(15% - 1.4%), 100% calc(3% - 1.4%), 100% 100%, 0 100%);
	}

	.hoope-slider__folie--rot .hoope-slider__schleier::after {
		clip-path: polygon(0 15%, 100% 3%, 100% 100%, 0 100%);
	}

	/* 🔴 Folienart „blatt" auf dem Handy: Bei 390 px Breite bleiben von der
	   roten Fläche des Blattes nur rund 100 px am rechten Rand übrig — `cover`
	   schneidet waagerecht 534 px weg. Dort ist kein Text unterzubringen.
	   Deshalb wird der Ausschnitt auf die rote Seite gezogen und ein roter
	   Schleier daruntergelegt; das Foto tritt hier zurück, die Aussage bleibt
	   lesbar. Der Text steht dann wie auf allen anderen Folien links. */
	.hoope-slider__folie--blatt .hoope-slider__bild {
		object-position: right center;
	}

	.hoope-slider__folie--blatt .hoope-slider__schleier {
		background: linear-gradient(180deg,
			rgba(226, 32, 33, 0.30) 0%,
			rgba(208, 22, 24, 0.88) 42%,
			rgba(193, 14, 16, 0.96) 100%);
	}

	/* 🔴 Die Innenabstände der Desktopregel müssen hier ausdrücklich zurück:
	   Der Block oben ist zweistellig spezifischer als `.hoope-slider__inhalt`
	   mit seinen `0 7vw` und würde sonst mitwandern — bei 390 px stünden
	   135 px Innenabstand links und der Text quetschte sich in 255 px. */
	.hoope-slider__folie--blatt .hoope-slider__inhalt {
		justify-content: flex-start;
		padding-left: 7vw;
		padding-right: 7vw;
	}

	.hoope-slider__folie--blatt .hoope-slider__box {
		max-width: 100%;
		text-align: left;
	}

	/* 🔴 `nowrap` gilt nur für die Leseansicht am Rechner, wo die Knopfreihe in
	   die Gasse neben der Zackenkante muss. Auf dem Handy gibt es diese Gasse
	   nicht, und seit die Knöpfe am 03.08. ihre volle Größe haben, braucht die
	   Reihe 447 statt 348 px — bei 390 px Fensterbreite stehen dafür 335 px zur
	   Verfügung. Ohne diese Zeile liefe der zweite Knopf aus dem Bild. */
	.hoope-slider__folie--blatt .hoope-slider__knoepfe {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.hoope-slider__folie--blatt .hoope-slider__unterzeile {
		margin-bottom: 22px;
	}

	/* Auf dem Handy steht der Block am linken Rand — dort ist kein Platz, um
	   das Anführungszeichen daneben zu hängen. Hier also wieder davor. */
	.hoope-slider__text--zitat,
	.hoope-slider__folie--blatt .hoope-slider__text--zitat {
		padding-left: 46px;
	}

	.hoope-slider__text--zitat::before,
	.hoope-slider__folie--blatt .hoope-slider__text--zitat::before {
		left: 0;
		top: -20px;
		font-size: 70px;
	}

	/* Schmalerer Streifen, der Header ist hier niedriger. */
	.hoope-slider__folie--tief {
		--hs-tief: 72px;
	}

	.hoope-slider__folie--tief .hoope-slider__schleier {
		background:
			linear-gradient(180deg, rgba(12, 53, 67, 1) 0%, rgba(12, 53, 67, 0.92) calc(var(--hs-tief, 72px) - 8px), rgba(12, 53, 67, 0) calc(var(--hs-tief, 72px) + 120px)),
			linear-gradient(80deg, rgba(12, 53, 67, 0.55) 0%, rgba(12, 53, 67, 0.25) 55%, rgba(12, 53, 67, 0.12) 100%);
	}
}

/* 🔴 Auf schmalen Geräten liegen die Pfeile mitten im Text (gemessen bei 390 px:
   der Zurück-Pfeil überdeckt die dritte Textzeile). Gewischt wird ohnehin,
   und die Punkte bleiben als Bedienung sichtbar. */
@media (max-width: 782px) {
	.hoope-slider__pfeil {
		display: none;
	}

	/* Mittig zugeschnitten steht auf dem Handy oft nur Hintergrund im Bild —
	   der Blickfang der Fotos sitzt rechts der Mitte. */
	.hoope-slider__bild {
		object-position: 68% center;
	}

	/* Muss hier wiederholt werden: gleiche Spezifität wie die Regel darüber,
	   die später im Blatt steht und sonst gewinnt. Senkrecht wird auf dem Handy
	   ohnehin nichts beschnitten, waagerecht bleibt es beim Blickfang. */
	.hoope-slider__bild--oben {
		object-position: 68% top;
	}
}

@media (max-width: 640px) {
	.hoope-slider {
		--hs-hoehe: 520px;
	}

	.hoope-slider__punkte {
		bottom: 22px;
	}

	.hoope-slider .hoope-slider__knopf {
		padding: 13px 20px;
		font-size: 13px;
	}
}

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

/* ==========================================================================
   Startseite: Aktivitätskacheln

   Die Kacheln unter „Unsere Aktivitäten" gibt Avada als Post-Cards aus
   (Element `fusion_post_cards` mit der Klasse `hoope-kacheln`, Vorlage 369).
   Sie waren unterschiedlich hoch, weil Titel und Kurztext je nach Aktivität
   ein oder zwei Zeilen brauchen: „Tiersport" gegen „Radsport im Hoope Park
   Wulsbüttel", 37 gegen 68 Zeichen Kurztext.

   Erste Maßnahme waren die Texte selbst — alle zwölf liegen jetzt zwischen
   73 und 83 Zeichen und brechen damit auf zwei Zeilen um. Die beiden Regeln
   hier halten die Kacheln zusätzlich gleich hoch, auch wenn später jemand
   einen kürzeren Titel oder Text einträgt.

   Rechnung: Titel 30 px bei Zeilenhöhe 1.2 → zwei Zeilen = 2.4em.
             Kurztext 18 px bei Zeilenhöhe 1.8 → zwei Zeilen = 3.6em.
   ========================================================================== */

.hoope-kacheln .fusion-post-cards-grid-column .fusion-title-heading {
	min-height: 2.4em;
}

.hoope-kacheln .fusion-post-cards-grid-column .fusion-text {
	min-height: 3.6em;
}

@media (max-width: 640px) {
	/* Einspaltig steht jede Kachel für sich — reservierte Zeilen wären dann
	   nur Löcher, weil daneben nichts liegt, wozu sie passen müssten. */
	.hoope-kacheln .fusion-post-cards-grid-column .fusion-title-heading,
	.hoope-kacheln .fusion-post-cards-grid-column .fusion-text {
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Slider auf dem Handy: eine Folie, lesbarer Text (30.08.2026)
 *
 * Auf Ansage laeuft der Slider mobil nicht mehr durch — `slider.js` nimmt die
 * Folien ab der zweiten aus dem Markup. Punkte und Pfeile haben damit keinen
 * Zweck mehr.
 *
 * 🔴 Folie 1 ist bewusst „klar", also ohne Schleier (Kundenwunsch 30.07.).
 * Auf dem Handy ist der Bildausschnitt enger, und der Text landet im hellen
 * Bereich des Motivs — dort ist er kaum zu lesen. Der Schleier gilt deshalb
 * **nur** unter 800px; auf dem Desktop bleibt die Folie klar wie bisher.
 * ------------------------------------------------------------------------ */

@media (max-width: 800px) {
	.hoope-slider__punkte,
	.hoope-slider__pfeil,
	.hoope-slider--einzeln .hoope-slider__punkte,
	.hoope-slider--einzeln .hoope-slider__pfeil {
		display: none;
	}

	.hoope-slider__folie--klar .hoope-slider__schleier {
		background: linear-gradient(
			180deg,
			rgba(12, 53, 67, 0.12) 0%,
			rgba(12, 53, 67, 0.42) 45%,
			rgba(12, 53, 67, 0.72) 100%
		);
	}
}

/* ------------------------------------------------------------------------
 * Jahresübersicht auf schmalen Bildschirmen: Liste statt Balkenplan
 *
 * 🔴 Der Plan stellt 31 Tagesspalten nebeneinander. Unter etwa 900px bleibt
 * je Spalte kaum ein Zentimeterbruchteil — man scrollt waagerecht und sieht
 * Monatsname und Termin nie zusammen. Statt den Plan zu verkleinern, wird
 * dort dieselbe Auskunft als Liste gezeigt: nach Monaten gegliedert, ein
 * Termin je Zeile, Farbpunkt der Kategorie, Zeitraum, Titel. Ein Tippen
 * führt wie im Plan in die Monatsansicht.
 *
 * Beide Fassungen stehen im HTML; umgeschaltet wird nur die Sichtbarkeit.
 * ------------------------------------------------------------------------ */

.hoope-kal__jahrliste {
	display: none;
}

@media (max-width: 900px) {
	.hoope-kal--jahr .hoope-kal__kartenstapel {
		display: none;
	}

	.hoope-kal__jahrliste {
		display: block;
		margin: 0 auto;
		max-width: 620px;
	}

	.hoope-kal__jl-monat + .hoope-kal__jl-monat {
		margin-top: 18px;
	}

	.hoope-kal__jl-kopf {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 11px 16px;
		border-radius: 10px 10px 0 0;
		background: var(--hk-dunkel, #0c3543);
		color: #fff;
		text-decoration: none;
		font-family: var(--hk-schrift-titel, inherit);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-size: 0.92rem;
	}

	.hoope-kal__jl-zahl {
		flex: 0 0 auto;
		min-width: 26px;
		padding: 2px 8px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.16);
		text-align: center;
		font-size: 0.82rem;
	}

	.hoope-kal__jl-liste {
		margin: 0;
		padding: 0;
		list-style: none;
		border: 1px solid rgba(12, 53, 67, 0.14);
		border-top: 0;
		border-radius: 0 0 10px 10px;
		background: #fff;
		overflow: hidden;
	}

	.hoope-kal__jl-liste li + li {
		border-top: 1px solid rgba(12, 53, 67, 0.1);
	}

	.hoope-kal__jl-liste a {
		display: grid;
		grid-template-columns: 10px 5.6em 1fr;
		align-items: center;
		gap: 10px;
		padding: 12px 16px;
		color: inherit;
		text-decoration: none;
	}

	.hoope-kal__jl-punkt {
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.hoope-kal__jl-datum {
		font-variant-numeric: tabular-nums;
		font-size: 0.86rem;
		opacity: 0.7;
		white-space: nowrap;
	}

	/* 🔴 Lange Titel dürfen die Zeile nicht breiter machen als den Bildschirm —
	   sonst wäre das seitliche Scrollen durch die Hintertür wieder da. */
	.hoope-kal__jl-titel {
		min-width: 0;
		overflow-wrap: anywhere;
		font-weight: 600;
		line-height: 1.3;
	}
}

/* --------------------------------------------------------------------------
   Ersatzbild fuer Termine ohne eigenes Beitragsbild (ab 1.45.0)
   Kopfbild der Website, dunkle Flaeche darueber, Datum in Weiss. Es wird
   nichts erzeugt und nichts hochgeladen — die Adressen kommen aus der
   Mediathek und stehen inline als Variablen am Element.
   -------------------------------------------------------------------------- */
.hoope-ev__bild--ersatz {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Dasselbe Verhaeltnis wie das Banner eines Termins MIT Bild, damit beide
	   Faelle gleich hoch sitzen. */
	aspect-ratio: 1024 / 127;
	min-height: 72px;
	overflow: hidden;
	border-radius: 3px;
	/* Die Farbe traegt den Kasten, falls das Bild fehlt oder noch laedt. */
	background-color: #161616;
}

/* Das Foto liegt in einer eigenen Ebene, damit der Filter nur auf das Bild
   wirkt und nicht auf die Schrift darueber. */
.hoope-ev__bild--ersatz::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ev-bg-gross);
	background-position: center 38%;
	background-size: cover;
	background-repeat: no-repeat;
	/* Eine schwarze Flaeche darueber nimmt dem Foto die Farbe. Die Saettigung
	   holt sie zurueck, ohne die Helligkeit zu veraendern — der gemessene
	   Kontrast bleibt dadurch gleich. */
	filter: saturate(1.18) contrast(1.04);
}

@media (max-width: 782px) {
	.hoope-ev__bild--ersatz::before {
		background-image: var(--ev-bg-klein);
	}
}

/* Die Abdunklung liegt als eigene Ebene darueber, nicht als Verlauf im
   Hintergrund: So bleibt sie unabhaengig davon, welches Bild dahinter steht.

   24 % — zweimal zurueckgedreht, von 62 ueber 38 auf 24 (Betreiber am
   20.09.2026: „kann noch heller“, „gib dem Bild mehr Farbe“). Gerechnet ueber
   den sichtbaren Ausschnitt des Kopfbildes: hellste Stelle 3,59:1 gegen Weiss,
   Durchschnitt 12,80:1, null Prozent der Flaeche unter 3:1. Die Schrift ist
   22 px fett und gilt damit als grosser Text, fuer den 3:1 die Schwelle ist.
   🔴 Hier ist der Boden erreicht. Bei 20 % faellt die hellste Stelle auf
   3,27:1, und ein anderes Kopfbild kann heller sein als dieses — wer das
   Bild tauscht, rechnet nach. */
.hoope-ev__bild--ersatz::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .24);
}

.hoope-ev__bilddatum {
	position: relative;
	z-index: 1;
	padding: 0 18px;
	color: #fff;
	font-weight: 700;
	font-size: clamp(14px, 2vw, 22px);
	line-height: 1.2;
	letter-spacing: .03em;
	text-align: center;
	text-transform: uppercase;
	/* Der Schatten haelt den Text auch ueber einer hellen Stelle des Fotos
	   lesbar — die Abdunklung allein reicht bei einem weissen Helm nicht. */
	/* Zwei Schatten: der enge zeichnet die Kante nach, der weite legt eine
	   dunkle Wolke unter die Zeile. Noetig, seit die Flaeche auf 24 % steht —
	   in die WCAG-Rechnung zaehlt ein Schatten nicht, fuer das Auge schon. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------------------
   Heute: Tageszahl oben, Monat links (ab 1.48.0)
   -------------------------------------------------------------------------- */
.hoope-kal__tagkopf--heute {
	background: #fe2e2e;
	color: #fff;
	font-weight: 700;
	border-radius: 3px;
}

/* Der Monatsname ist ein Link; die Farbe muss deshalb auch den Zustand
   :hover und :focus ueberschreiben, sonst springt sie beim Ueberfahren. */
.hoope-kal__monatslabel--heute,
.hoope-kal__monatslabel--heute:hover,
.hoope-kal__monatslabel--heute:focus {
	background: #fe2e2e;
	border-radius: 3px;
}

.hoope-kal__monatslabel--heute .hoope-kal__monatsname,
.hoope-kal__monatslabel--heute .hoope-kal__monatsjahr {
	color: #fff;
	font-weight: 700;
}