/*
 * Gestaltung der Terminseiten und der Filterleiste.
 *
 * Die Palette von Kanu zum Frühstück, mit dem jeweils vorgesehenen Einsatz:
 *
 *   Türkis      #6AC3C8   Kategorie-Labels, Icons, Hover bei Verweisen
 *   Dunkelpetrol #1A2F33  Fließtext, große Überschriften, Fußzeilenflächen
 *   Signalorange #FF7043  Schaltflächen, „Neu", Warnhinweise
 *   Helles Grau #F3F4F6   Tabellen und Kästen
 *   Grün        #16A34A   Häkchen
 *   Rot         #DC2626   Kreuze
 *   Seichtes Blau #E0F2FE Flächen
 *
 * Das Orange bleibt Signalfarbe: Es steht an der Handlungsaufforderung und am
 * Warnhinweis, sonst nirgends. Wer es in Flächen und Überschriften streut,
 * hat am Ende keine Signalfarbe mehr.
 */

/*
 * Die Werte des Themes, einmal an einer Stelle.
 *
 * Sie standen vorher an zwei Stellen — einmal für die Kalenderansicht, einmal
 * für das Formular — und sind beim Nachziehen auseinandergelaufen: Radien und
 * Schriftfarben kamen im Formular nicht mehr an, weil dort die Hälfte der
 * Namen fehlte. Ein Block auf `:root` kann das nicht passieren.
 */
:root {
	/*
	 * Alles hier kommt aus dem Theme, wo Kadence eine Variable dafür setzt —
	 * dann gehen spätere Änderungen an der Palette automatisch mit. Die
	 * Ersatzwerte sind die am 31.08.2026 auf der Livesite **gemessenen**,
	 * nicht geschätzte.
	 *
	 * Ausnahme: `--global-heading-font-family` setzt Kadence auf dieser
	 * Installation nicht — die Überschriftenschrift steht dort je Element.
	 * Der Rückfall auf Montserrat trägt hier also die eigentliche Arbeit.
	 */
	--kzf-schrift-titel: var(--global-heading-font-family, 'Montserrat', system-ui, sans-serif);
	--kzf-schrift-text: var(--global-body-font-family, 'Inter', system-ui, sans-serif);

	--kzf-tuerkis: var(--global-palette1, #6ac3c8);
	--kzf-petrol: var(--global-palette3, #1a2f33);
	--kzf-signal: var(--global-palette-btn-bg, #ff7043);
	--kzf-signal-schrift: var(--global-palette-btn, #ffffff);
	--kzf-leise: var(--global-palette5, #4a5568);
	--kzf-grau: var(--global-palette7, #edf2f7);
	--kzf-linie: var(--global-palette7, #edf2f7);

	--kzf-gruen: #16a34a;
	--kzf-rot: #dc2626;
	--kzf-blau: #e0f2fe;

	/* Gemessen am 31.08.2026: „Paddel-Deals" im Seitenkopf rundet mit 10 px,
	 * die Eingabefelder des Newsletter-Formulars mit 8 px und einem Rahmen
	 * in #CBD5E0. */
	--kzf-radius-knopf: 10px;
	--kzf-radius-feld: 8px;
	--kzf-radius-flaeche: 4px;
	--kzf-linie-feld: #cbd5e0;
}

/* ---------- Filterleiste ---------- */

/*
 * **Warum die Leiste jetzt anders aussieht.** Sie war zuerst bewusst
 * zurückhaltend gebaut: schlichte Textlinks auf einer hellblauen Fläche, weil
 * Kadence in der Hauptnavigation genau das tut — Text, kein Rahmen, keine
 * Pille. Für eine Navigation stimmt das. Für eine Filterleiste nicht: Sieben
 * gleich aussehende Wörter nebeneinander sehen nicht nach Bedienelementen aus,
 * sondern nach einer Aufzählung, und man erkennt nicht, was gerade gewählt ist.
 *
 * Chips sind keine Navigation, sondern Schalter. Sie bekommen deshalb eine
 * Form — bleiben aber in der Sprache des Hauses: Türkis für den gewählten
 * Zustand (die Hausfarbe für Kategorien und Auswahl), Petrol für die Schrift,
 * Inter statt Montserrat, keine Versalien. Das Orange bleibt draußen; es ist
 * die Signalfarbe der Handlungsaufforderung, nicht die der Auswahl.
 */
/*
 * **Die Leiste braucht eine eigene Flaeche.** Sie stand zuerst weiss auf
 * weiss mit einer sehr hellen Linie — und die Linie kam nicht einmal an, weil
 * das Theme `border` auf Blockelementen zuruecksetzt und nach unserer Datei
 * laedt. Uebrig blieben Chips, die frei im Raum schwebten.
 *
 * Jetzt traegt sie das helle Grau des Hauses. Darauf stehen die Chips weiss:
 * Die Leiste liest sich als Bedienfeld, die Schalter heben sich davon ab, und
 * beim Kleben genuegt ein Schatten, damit der Inhalt sichtbar darunter
 * durchlaeuft. Der doppelte Klassenname hebt das Gewicht ueber den Reset des
 * Themes, ohne `!important`.
 */
.kzft-filter.kzft-filter {
	/*
	 * The Events Calendar hängt seine Bedienleiste in einen Flex-Container.
	 * Als Flex-Element schrumpft ein Block auf Inhaltsbreite — die Leiste
	 * stand dadurch nur halb so breit da wie der Inhalt.
	 */
	flex: 1 0 100%;
	width: 100%;

	position: sticky;
	top: var(--kzf-filter-abstand, 0px);
	z-index: 20;
	background: var(--kzf-grau);
	border: 1px solid var(--kzf-linie-feld);
	border-radius: 14px;
	margin: 0 0 1.5rem;
	transition: box-shadow 0.18s ease, border-radius 0.18s ease;
}

.admin-bar .kzft-filter {
	top: calc( var(--kzf-filter-abstand, 0px) + 32px );
}

@media screen and (max-width: 782px) {
	.admin-bar .kzft-filter {
		top: calc( var(--kzf-filter-abstand, 0px) + 46px );
	}
}

/* Erst wenn sie tatsächlich klebt, hebt sie sich vom Inhalt ab. */
.kzft-filter.kzft-filter.klebt {
	border-top-color: transparent;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 10px 22px -12px rgba(26, 47, 51, 0.45);
}

.kzft-filter-innen {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem 1rem 0.9rem;
}

/* ---------- Chips ---------- */

/*
 * **Warum überall `.kzft-filter` davorsteht.** Das Theme setzt nach unserer
 * Datei einen Grundstil auf `a` und `button`, der Polster, Rahmen und Fläche
 * zurücknimmt. Eine Regel auf `.kzft-chip` allein verliert dagegen — gemessen
 * am 31.08.2026: `border-radius` kam an, `padding` und `border` nicht, die
 * Chips standen als nackter Text da. Der zusätzliche Vorfahr hebt das Gewicht
 * über den Reset, ohne dass irgendwo `!important` nötig wird.
 */

.kzft-chips {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.kzft-chips-titel {
	flex: none;
	width: 5rem;
	font-family: var(--kzf-schrift-text);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--kzf-leise);
}

/*
 * Die Bahn scrollt waagerecht statt umzubrechen. Auf dem Telefon ist eine
 * Reihe zum Wischen schneller als vier Reihen, die den halben Bildschirm
 * fressen — und schneller als ein Auswahlmenü, das erst aufgehen muss.
 *
 * Der Innenabstand mit dem gleich großen negativen Außenabstand ist kein
 * Zierrat: Ohne ihn schneidet `overflow-x` den Fokusrahmen des ersten und
 * letzten Chips ab.
 */
.kzft-chips-bahn {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 3px;
	margin: -3px;
}

.kzft-chips-bahn::-webkit-scrollbar {
	display: none;
}

.kzft-filter .kzft-chip {
	flex: none;
	scroll-snap-align: start;
	padding: 0.34rem 0.82rem;
	border: 1px solid var(--kzf-linie-feld);
	border-radius: 999px;
	background: #fff;
	color: var(--kzf-leise);
	font-family: var(--kzf-schrift-text);
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.45;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}

.kzft-filter .kzft-chip:hover,
.kzft-filter .kzft-chip:focus-visible {
	border-color: var(--kzf-tuerkis);
	background: var(--kzf-blau);
	color: var(--kzf-petrol);
	text-decoration: none;
}

/*
 * Türkis als Fläche mit Petrol darauf: gemessen ein Kontrast von rund 8:1,
 * also auch für kleine Schrift tragfähig. Weiße Schrift auf Türkis wäre es
 * nicht.
 */
.kzft-filter .kzft-chip.ist-aktiv {
	border-color: var(--kzf-tuerkis);
	background: var(--kzf-tuerkis);
	color: var(--kzf-petrol);
	font-weight: 600;
}

/* ---------- Mehr Filter ---------- */

.kzft-mehr {
	margin-top: 0.2rem;
	border-top: 1px solid var(--kzf-linie-feld);
	padding-top: 0.7rem;
}

.kzft-filter .kzft-mehr > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	list-style: none;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--kzf-linie-feld);
	border-radius: 999px;
	background: #fff;
	font-family: var(--kzf-schrift-text);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--kzf-leise);
	transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}

.kzft-filter .kzft-mehr > summary:hover,
.kzft-filter .kzft-mehr > summary:focus-visible {
	border-color: var(--kzf-tuerkis);
	color: var(--kzf-petrol);
}

.kzft-filter .kzft-mehr > summary::-webkit-details-marker {
	display: none;
}

.kzft-filter .kzft-mehr > summary::before {
	content: "+";
	font-size: 1.05rem;
	line-height: 1;
}

.kzft-filter .kzft-mehr[open] > summary {
	border-color: var(--kzf-tuerkis);
	background: var(--kzf-blau);
	color: var(--kzf-petrol);
}

.kzft-filter .kzft-mehr[open] > summary::before {
	content: "\2013";
}

.kzft-mehr-felder {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: flex-end;
	margin-top: 0.8rem;
}

.kzft-filter-feld {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 9rem;
	min-width: 0;
}

.kzft-feld-weit {
	flex: 1 1 13rem;
}

.kzft-filter-feld label {
	font-family: var(--kzf-schrift-text);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--kzf-leise);
}

.kzft-filter-feld select,
.kzft-filter-feld input[type="search"] {
	font-family: var(--kzf-schrift-text);
	width: 100%;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--kzf-linie-feld);
	border-radius: var(--kzf-radius-feld);
	background: #fff;
	color: var(--kzf-petrol);
	font-size: 0.95rem;
	line-height: 1.3;
}

.kzft-filter-feld select:focus,
.kzft-filter-feld input[type="search"]:focus {
	outline: 2px solid var(--kzf-tuerkis);
	outline-offset: 1px;
	border-color: var(--kzf-tuerkis);
}

/*
 * Die Handlungsaufforderung. Maße und Schrift stammen aus der Messung an
 * „Paddel-Deals": Inter, Gewicht 400, 18 px, 10 px Radius — nicht Montserrat
 * fett mit scharfer Ecke, wie ich es zuerst gebaut hatte.
 */
.kzft-filter .kzft-filter-los {
	font-family: var(--kzf-schrift-text);
	padding: 0.45rem 1.15rem;
	border: 0;
	border-radius: var(--kzf-radius-knopf);
	background: var(--kzf-signal);
	color: var(--kzf-signal-schrift);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.kzft-filter .kzft-filter-los:hover,
.kzft-filter .kzft-filter-los:focus {
	filter: brightness(0.93);
}

.kzft-filter-weg {
	align-self: center;
	font-size: 0.88rem;
	color: var(--kzf-leise);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kzft-filter-weg:hover,
.kzft-filter-weg:focus {
	color: var(--kzf-tuerkis);
}

@media (max-width: 40em) {
	.kzft-filter.kzft-filter {
		border-radius: 12px;
	}

	.kzft-filter-innen {
		padding: 0.75rem 0.85rem 0.8rem;
	}

	.kzft-chips {
		flex-direction: column;
		align-items: stretch;
		gap: 0.3rem;
	}

	.kzft-chips-titel {
		width: auto;
	}

	.kzft-chips-bahn {
		/* Bis an den Rand scrollen, damit der letzte Chip nicht klebt. */
		margin: -3px -0.85rem;
		padding: 3px 0.85rem;
	}

	.kzft-filter-feld {
		flex: 1 1 100%;
	}

	.kzft-filter .kzft-filter-los {
		width: 100%;
	}
}

/* ---------- Zurück nach oben ---------- */

.kzft-nach-oben {
	position: fixed;
	right: 1rem;
	bottom: 1.2rem;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.85rem;
	height: 2.85rem;
	border-radius: 50%;
	background: var(--kzf-tuerkis);
	color: var(--kzf-petrol);
	box-shadow: 0 2px 10px rgba(26, 47, 51, 0.22);
	text-decoration: none;
}

.kzft-nach-oben[hidden] {
	display: none;
}

.kzft-nach-oben:hover,
.kzft-nach-oben:focus-visible {
	filter: brightness(0.94);
	color: var(--kzf-petrol);
}

/* Auf schmalen Anzeigen mit Daumenreichweite etwas höher. */
@media (max-width: 40em) {
	.kzft-nach-oben {
		right: 0.85rem;
		bottom: 1.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kzft-filter,
	.kzft-chip,
	.kzft-filter-los,
	.kzft-nach-oben {
		transition: none;
	}
}

/* ---------- Terminseite ---------- */

.kzft-kategorie {
	font-family: var(--kzf-schrift-text);
	display: inline-block;
	padding: 0.2rem 0.7rem;
	background: var(--kzf-tuerkis);
	color: var(--kzf-petrol);
	border-radius: var(--kzf-radius-feld);
	font-size: 0.9rem;
	font-weight: 500;
}

.kzft-einleitung {
	font-size: 1.12em;
	line-height: 1.6;
	color: var(--kzf-petrol);
}

.kzft-fakten {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 0.97em;
	background: var(--kzf-grau);
	border-radius: 4px;
	overflow: hidden;
}

.kzft-fakten th,
.kzft-fakten td {
	padding: 0.6em 0.9em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #fff;
	color: var(--kzf-petrol);
}

.kzft-fakten tr:last-child th,
.kzft-fakten tr:last-child td {
	border-bottom: 0;
}

.kzft-fakten th {
	font-family: var(--kzf-schrift-text);
	width: 11em;
	font-weight: 600;
	font-size: 0.86em;
	color: var(--kzf-leise);
	white-space: nowrap;
}

/* Auf schmalen Anzeigen bricht die Tabelle in Blöcke um, statt zu scrollen. */
@media (max-width: 40em) {
	.kzft-fakten th,
	.kzft-fakten td {
		display: block;
		width: auto;
		white-space: normal;
	}

	.kzft-fakten th {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

.kzft-cta {
	margin: 1.6em 0;
}

/*
 * Doppelter Klassenname, kein `!important`: Kadence färbt Verweise im
 * Inhaltsbereich türkis (`.entry-content a`), und diese Regel stand mit
 * gleichem Gewicht, aber früher in der Kaskade — die Schaltfläche hatte
 * deshalb türkise statt weißer Schrift auf Orange. Die Wiederholung des
 * Klassennamens hebt das Gewicht um genau eine Stufe an.
 */
.kzft-button.kzft-button {
	font-family: var(--kzf-schrift-text);
	display: inline-block;
	padding: 0.45em 1.1em;
	background: var(--kzf-signal);
	color: var(--kzf-signal-schrift);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.6;
	text-decoration: none;
	border-radius: var(--kzf-radius-knopf);
	transition: filter 0.15s ease;
}

.kzft-button.kzft-button:hover,
.kzft-button.kzft-button:focus {
	filter: brightness(0.93);
	color: var(--kzf-signal-schrift);
	text-decoration: none;
}

.kzft-quelle {
	margin-top: 2em;
	padding-top: 0.9em;
	border-top: 1px solid var(--kzf-linie);
	color: var(--kzf-leise);
	line-height: 1.5;
}

/* ---------- Veranstalterformular ---------- */

.kzft-formular {
	max-width: 42rem;
}

/* Das Fangfeld: für Menschen unsichtbar, für Bots vorhanden.
   Kein display:none — manche Skripte überspringen genau das. */
.kzft-fang {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kzft-schrittanzeige {
	display: flex;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	counter-reset: schritt;
}

.kzft-schrittanzeige li {
	flex: 1;
	padding: 0.4rem 0 0.5rem;
	border-top: 3px solid var(--kzf-linie);
	font-family: var(--kzf-schrift-titel);
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--kzf-leise);
}

.kzft-schrittanzeige li.ist-aktiv {
	border-top-color: var(--kzf-tuerkis);
	color: var(--kzf-petrol);
}

.kzft-schritt {
	border: 0;
	margin: 0;
	padding: 0;
}

.kzft-schritt > legend {
	font-family: var(--kzf-schrift-titel);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--kzf-petrol);
	margin-bottom: 0.9rem;
	padding: 0;
}

/* Ohne Skript stehen alle drei Abschnitte untereinander und sind ausfüllbar.
   Erst das Skript blendet aus, was gerade nicht dran ist. */
.kzft-hat-js .kzft-schritt {
	display: none;
}

.kzft-hat-js .kzft-schritt.ist-aktiv {
	display: block;
}

.kzft-feld {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 1rem;
}

.kzft-feldpaar {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

.kzft-feldpaar > .kzft-feld {
	flex: 1 1 12rem;
}

.kzft-formular label {
	font-family: var(--kzf-schrift-text);
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--kzf-petrol);
}

.kzft-pflicht {
	color: var(--kzf-signal);
}

.kzft-optional {
	font-weight: 400;
	color: var(--kzf-leise);
}

.kzft-formular input[type="text"],
.kzft-formular input[type="email"],
.kzft-formular input[type="url"],
.kzft-formular input[type="date"],
.kzft-formular input[type="time"],
.kzft-formular select,
.kzft-formular textarea {
	font-family: var(--kzf-schrift-text);
	font-size: 1rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--kzf-linie-feld);
	border-radius: var(--kzf-radius-feld);
	background: #fff;
	color: var(--kzf-petrol);
	width: 100%;
}

.kzft-formular input:focus,
.kzft-formular select:focus,
.kzft-formular textarea:focus {
	outline: 2px solid var(--kzf-tuerkis);
	outline-offset: 1px;
	border-color: var(--kzf-tuerkis);
}

.kzft-formular input:user-invalid {
	border-color: var(--kzf-rot);
}

.kzft-hilfe {
	font-size: 0.85rem;
	color: var(--kzf-leise);
	line-height: 1.45;
}

.kzft-hilfe-block {
	background: var(--kzf-grau);
	padding: 0.8rem 1rem;
	border-radius: 4px;
	margin: 0 0 1rem;
}

.kzft-haken label,
.kzft-haken-klein {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	font-family: var(--kzf-schrift-text);
	font-size: 0.97rem;
	cursor: pointer;
}

.kzft-haken {
	margin: 0 0 1rem;
}

.kzft-gruppe {
	border: 1px solid var(--kzf-linie);
	border-radius: 4px;
	padding: 0.8rem 1rem;
	margin: 0 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.2rem;
}

.kzft-gruppe > legend {
	font-family: var(--kzf-schrift-text);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--kzf-leise);
	padding: 0 0.4rem;
}

/* Die Newsletter-Zustimmung steht bewusst abgesetzt und ist nie vorbelegt. */
.kzft-newsletter {
	border-left: 3px solid var(--kzf-tuerkis);
	background: var(--kzf-blau);
	padding: 0.8rem 1rem;
	border-radius: 0 4px 4px 0;
}

.kzft-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.4rem 0 0;
}

.kzft-formular button {
	font-family: var(--kzf-schrift-text);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.6;
	padding: 0.45rem 1.1rem;
	border-radius: var(--kzf-radius-knopf);
	border: 1px solid transparent;
	cursor: pointer;
}

/*
 * Die Abwandlungen tragen denselben Selektorkopf wie die Grundregel
 * (`.kzft-formular button`). Ohne das gewinnt die Grundregel über die
 * Spezifität, und der Rahmen der Zurück-Schaltfläche bliebe durchsichtig.
 */
.kzft-formular .kzft-weiter,
.kzft-formular .kzft-absenden {
	background: var(--kzf-signal);
	color: var(--kzf-signal-schrift);
}

.kzft-formular .kzft-weiter:hover,
.kzft-formular .kzft-absenden:hover {
	filter: brightness(0.93);
}

.kzft-formular .kzft-zurueck {
	background: #fff;
	border-color: var(--kzf-linie-feld);
	color: var(--kzf-petrol);
}

.kzft-formular .kzft-zurueck:hover {
	border-color: var(--kzf-tuerkis);
}

/* ---------- Rückmeldungen ---------- */

.kzft-meldung {
	padding: 0.95rem 1.2rem;
	border-radius: 4px;
	margin: 0 0 1.4rem;
	border-left: 4px solid;
	line-height: 1.55;
	max-width: 42rem;
}

.kzft-erfolg {
	background: #eafaf0;
	border-left-color: #16a34a;
	color: #14532d;
}

.kzft-fehler {
	background: #fdf0ee;
	border-left-color: #dc2626;
	color: #7f1d1d;
}

.kzft-hinweis {
	background: #e0f2fe;
	border-left-color: #6ac3c8;
	color: #1a2f33;
}

@media (max-width: 40em) {
	.kzft-schrittanzeige li {
		font-size: 0.66rem;
	}

	.kzft-navigation button {
		flex: 1 1 100%;
	}
}

/* Der Streckenblock — erscheint nur bei Fahrten mit Verlauf. */

.kzft-strecke {
	border: 1px solid var(--kzf-linie);
	border-left: 3px solid var(--kzf-tuerkis);
	border-radius: 0 4px 4px 0;
	padding: 1rem 1.1rem 0.4rem;
	margin: 0 0 1rem;
	background: #fff;
}

.kzft-strecke[hidden] {
	display: none;
}

.kzft-strecke-titel {
	font-family: var(--kzf-schrift-titel);
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.2rem;
	color: var(--kzf-petrol);
}

.kzft-strecke > .kzft-hilfe {
	display: block;
	margin-bottom: 0.9rem;
}

.kzft-strecke input[type="file"] {
	font-family: var(--kzf-schrift-text);
	font-size: 0.92rem;
	padding: 0.45rem 0;
	width: 100%;
}

/* Der GPX-Verweis auf der Terminseite. */

.kzft-gpx {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.8rem;
	margin: -0.6em 0 1.4em;
}

.kzft-gpx a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 1.1rem;
	border: 0;
	border-radius: var(--kzf-radius-knopf);
	background: var(--kzf-tuerkis);
	color: var(--kzf-petrol);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	text-decoration: none;
}

.kzft-gpx a::before {
	content: "↓";
	font-weight: 600;
}

.kzft-gpx a:hover,
.kzft-gpx a:focus-visible {
	filter: brightness(0.94);
	color: var(--kzf-petrol);
}

.kzft-gpx-info {
	font-size: 0.85rem;
	color: var(--kzf-leise);
}

/* Die Streckenreihe hebt sich leicht ab — sie ist nicht immer da. */

.kzft-chips-strecke {
	padding-top: 0.35rem;
	border-top: 1px solid rgba(26, 47, 51, 0.08);
	margin-top: 0.5rem;
}

/* Das Angebot einer eigenen Terminseite. */

.kzft-angebot {
	background: var(--kzf-blau);
	border-radius: 4px;
	padding: 1rem 1.1rem 0.5rem;
	margin: 0 0 1.2rem;
}

.kzft-angebot[hidden],
.kzft-angebot-felder[hidden] {
	display: none;
}

.kzft-angebot-frage {
	margin: 0 0 0.8rem;
	font-size: 0.95rem;
	line-height: 1.55;
}

.kzft-angebot-felder {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(26, 47, 51, 0.1);
}

/* Die Angaben des Veranstalters auf der Terminseite. */

.kzft-ausschreibung {
	margin: 1.5em 0;
}

.kzft-ausschreibung-quelle {
	margin-top: 1.2em;
	color: var(--kzf-leise);
}

/* ---------- Verweise unter der Terminseite ---------- */

/*
 * Zwei nebeneinanderstehende Karten, auf schmalen Anzeigen untereinander.
 * Sie sind Wegweiser, kein Inhalt — deshalb deutlich abgesetzt, in der
 * Flächenfarbe des Themes und ohne Signalorange. Orange bleibt hier der
 * Ausschreibung des Veranstalters vorbehalten.
 */
.kzft-hinweise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	margin: 2.5em 0 0;
	padding-top: 1.6em;
	border-top: 1px solid var(--kzf-linie);
}

/* Die Karten stehen nebeneinander; die Schaltflächen sollen auf einer Linie
 * liegen, auch wenn der eine Text länger ist als der andere. */
.kzft-hinweis-karte {
	display: flex;
	flex-direction: column;
	background: var(--kzf-grau);
	border-radius: var(--kzf-radius-flaeche);
	padding: 1.1rem 1.3rem 1.3rem;
}

.kzft-hinweis-mehr {
	margin-top: auto;
}

/*
 * Der Name der Sache im Signalorange, der Rest der Überschrift in der
 * Textfarbe. So hält es die Seite auch beim Packlisten-Generator: Orange hebt
 * ein einzelnes Glied hervor und färbt nie die ganze Zeile.
 */
.kzft-akzent {
	color: var(--kzf-signal);
}

.kzft-hinweis-karte h2 {
	font-family: var(--kzf-schrift-titel);
	font-size: 1.08rem;
	text-wrap: balance;
	font-weight: 800;
	line-height: 1.3;
	color: var(--kzf-petrol);
	margin: 0 0 0.4rem;
	padding: 0;
	border: 0;
}

.kzft-hinweis-karte p {
	margin: 0 0 1rem;
	font-size: 0.97rem;
	line-height: 1.55;
	color: var(--kzf-leise);
}

/*
 * Die Schaltflächen im Verweiskasten sind kleiner als die des Themes. Zwei
 * Gründe: Sie sind der zweite Rang hinter der Ausschreibung des
 * Veranstalters, und „Jetzt Schnäppchen entdecken" passt bei Themengröße
 * nicht in eine Zeile. Die Größe ist so gewählt, dass die längere der beiden
 * Beschriftungen auch in der schmalsten Karte einzeilig bleibt.
 */
.kzft-hinweis-mehr .kzft-button {
	padding: 0.38rem 0.85rem;
	font-size: 0.92rem;
	white-space: nowrap;
}

.kzft-hinweis-mehr .kzft-button::after {
	content: " →";
}

/*
 * Auf sehr schmalen Anzeigen — 320 px sind das kleinste, womit zu rechnen ist
 * — reicht der Platz sonst gerade eben nicht. Statt umbrechen zu lassen,
 * schrumpfen Schrift und Innenabstand ein Stück; die Karte gibt gleichzeitig
 * seitlich etwas ab.
 */
@media (max-width: 26em) {
	.kzft-hinweis-karte {
		padding: 1rem 0.9rem 1.1rem;
	}

	.kzft-hinweis-mehr .kzft-button {
		padding: 0.36rem 0.7rem;
		font-size: 0.85rem;
	}
}

/* ---------- Terminübersicht ---------- */

/*
 * The Events Calendar liefert die Liste als nackte Zeilen: Datumsklotz links,
 * Titel und Text rechts, dazwischen eine Trennlinie. Das liest sich wie eine
 * Tabelle und nicht wie ein Kalender — Hannes hat es zu Recht „Windows 95"
 * genannt. Hier wird daraus je Termin eine Karte.
 *
 * Angefasst wird nur die Gestaltung, nicht das Gerüst: Die Klassennamen
 * stammen von The Events Calendar und bleiben, wie sie sind. Ein Update des
 * Kalenders kann sie ändern — dann fällt die Liste auf dessen eigenes Aussehen
 * zurück, aber nichts geht kaputt.
 */

/* Der Rahmen der Bedienleiste doppelt sich mit unserer Filterleiste. */
.tribe-events .tribe-events-c-events-bar--border {
	border: 1px solid var(--kzf-linie);
	border-radius: 14px;
}

.tribe-events .tribe-events-c-search__input-control--keyword input {
	font-family: var(--kzf-schrift-text);
	font-size: 1rem;
	color: var(--kzf-petrol);
}

.tribe-events .tribe-events-c-events-bar__search-button {
	font-family: var(--kzf-schrift-text);
	border-radius: var(--kzf-radius-knopf);
	background-color: var(--kzf-signal);
	font-weight: 400;
}

.tribe-events .tribe-events-c-events-bar__search-button:hover,
.tribe-events .tribe-events-c-events-bar__search-button:focus {
	background-color: var(--kzf-signal);
	filter: brightness(0.93);
}

/* Ansichtswahl: derselbe türkise Strich wie im Hauptmenü. */
.tribe-events .tribe-events-c-view-selector__list-item-link {
	font-family: var(--kzf-schrift-text);
	color: var(--kzf-leise);
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
	color: var(--kzf-petrol);
	box-shadow: inset 0 -2px 0 0 var(--kzf-tuerkis);
}

/* Heute-Knopf und Blätterpfeile */
.tribe-events .tribe-events-c-top-bar__today-button {
	font-family: var(--kzf-schrift-text);
	border: 1px solid var(--kzf-linie-feld);
	border-radius: 999px;
	color: var(--kzf-leise);
	padding: 0.3rem 0.9rem;
}

.tribe-events .tribe-events-c-top-bar__today-button:hover,
.tribe-events .tribe-events-c-top-bar__today-button:focus {
	border-color: var(--kzf-tuerkis);
	color: var(--kzf-petrol);
}

.tribe-events .tribe-events-c-top-bar__datepicker-button {
	font-family: var(--kzf-schrift-titel);
	font-weight: 700;
	color: var(--kzf-petrol);
}

/* ---------- Monatsüberschrift ---------- */

.tribe-events .tribe-events-calendar-list__month-separator {
	margin: 2rem 0 1rem;
	border: 0;
}

.tribe-events .tribe-events-calendar-list__month-separator::after {
	display: none;
}

.tribe-events .tribe-events-calendar-list__month-separator h3 {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
}

.tribe-events .tribe-events-calendar-list__month-separator h3::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--kzf-linie);
}

.tribe-events .tribe-events-calendar-list__month-separator-text {
	font-family: var(--kzf-schrift-titel);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--kzf-petrol);
	text-transform: none;
	background: none;
	padding: 0;
}

/* ---------- Die Karte ---------- */

.tribe-events .tribe-events-calendar-list__event-row {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	margin: 0 0 0.85rem;
	padding: 0.95rem 1.1rem;
	background: #fff;
	border: 1px solid var(--kzf-linie);
	border-radius: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tribe-events .tribe-events-calendar-list__event-row:hover {
	border-color: var(--kzf-tuerkis);
	box-shadow: 0 10px 22px -14px rgba(26, 47, 51, 0.5);
}

.tribe-events .tribe-events-calendar-list__event-row:last-child {
	margin-bottom: 0;
}

/* Die Zeile ist im Gerüst ein Gitter mit Rinnen. Die Rinnen stören hier. */
.tribe-events .tribe-events-calendar-list__event-row > .tribe-common-g-col,
.tribe-events .tribe-events-calendar-list__event-wrapper,
.tribe-events .tribe-events-calendar-list__event-details {
	padding-left: 0;
	padding-right: 0;
}

.tribe-events .tribe-events-calendar-list__event-wrapper {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.tribe-events .tribe-events-calendar-list__event {
	display: block;
	margin: 0;
	width: 100%;
}

.tribe-events .tribe-events-calendar-list__event-details {
	width: 100%;
	max-width: none;
}

/* ---------- Der Datumsklotz ---------- */

.tribe-events .tribe-events-calendar-list__event-date-tag {
	flex: none;
	width: 3.9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
	padding: 0.5rem 0;
	background: var(--kzf-blau);
	border-radius: 10px;
	align-self: flex-start;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05rem;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
	font-family: var(--kzf-schrift-text);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--kzf-leise);
	text-transform: none;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
	font-family: var(--kzf-schrift-titel);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.05;
	color: var(--kzf-petrol);
	background: none;
	padding: 0;
	border-radius: 0;
}

/* ---------- Titel, Zeit, Ort, Text ---------- */

.tribe-events .tribe-events-calendar-list__event-header {
	margin-bottom: 0.4rem;
}

.tribe-events .tribe-events-calendar-list__event-title {
	font-family: var(--kzf-schrift-titel);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 0.28rem;
}

.tribe-events .tribe-events-calendar-list__event-title-link {
	color: var(--kzf-petrol);
	text-decoration: none;
}

.tribe-events .tribe-events-calendar-list__event-title-link:hover,
.tribe-events .tribe-events-calendar-list__event-title-link:focus {
	color: var(--kzf-tuerkis);
	text-decoration: none;
}

.tribe-events .tribe-events-calendar-list__event-datetime-wrapper {
	font-family: var(--kzf-schrift-text);
	font-size: 0.88rem;
	color: var(--kzf-leise);
	margin: 0 0 0.15rem;
}

.tribe-events .tribe-events-calendar-list__event-venue {
	font-family: var(--kzf-schrift-text);
	font-size: 0.88rem;
	font-style: normal;
	color: var(--kzf-leise);
	margin: 0;
}

.tribe-events .tribe-events-calendar-list__event-venue-title {
	color: var(--kzf-petrol);
	font-weight: 600;
}

.tribe-events .tribe-events-calendar-list__event-description {
	font-family: var(--kzf-schrift-text);
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--kzf-leise);
	margin-top: 0.5rem;
}

.tribe-events .tribe-events-calendar-list__event-description p {
	margin: 0;
	/*
	 * Auf drei Zeilen gekürzt, damit die Liste überblickbar bleibt. Der Text
	 * steht vollständig im Quelltext — für Suchmaschinen ändert sich nichts,
	 * nur das Auge bekommt weniger auf einmal.
	 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 40em) {
	.tribe-events .tribe-events-calendar-list__event-row {
		gap: 0.75rem;
		padding: 0.85rem 0.9rem;
		border-radius: 12px;
	}

	.tribe-events .tribe-events-calendar-list__event-date-tag {
		width: 3.2rem;
	}

	.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
		font-size: 1.3rem;
	}

	.tribe-events .tribe-events-calendar-list__event-title {
		font-size: 1.05rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tribe-events .tribe-events-calendar-list__event-row {
		transition: none;
	}
}

/* ---------- Aktionszeile auf der Terminseite ---------- */

/*
 * „Zur Ausschreibung" und „Zum Kalender hinzufügen" wollen dasselbe: den
 * Termin mitnehmen. Sie standen weit auseinander — der eine mitten im Text,
 * der andere unter dem Autorenkasten. Jetzt stehen sie nebeneinander, direkt
 * unter der Faktentabelle.
 *
 * Die Ausschreibung ist die Handlungsaufforderung und trägt deshalb das
 * Signalorange. Der Abo-Knopf ist die stillere Alternative und bleibt hell —
 * zwei orange Schaltflächen nebeneinander hätten keine Rangfolge mehr.
 */
.kzft-aktionen {
	/*
	 * The Events Calendar färbt seine Schaltflächen über eigene Variablen.
	 * Die hier zu setzen ist der vorgesehene Weg und spart den Streit um
	 * Spezifität: `.tribe-common .tribe-common-c-btn-border` setzt
	 * `color: var(--tec-color-button-primary)` und lädt nach unserer Datei —
	 * gegen eine gleich gewichtete eigene Regel gewinnt sie immer. Über die
	 * Variable kommt die Hausfarbe trotzdem an.
	 */
	--tec-color-button-primary: var(--kzf-petrol);
	--tec-color-button-primary-hover: var(--kzf-tuerkis);
	--tec-color-border-default: var(--kzf-linie-feld);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	margin: 1.4rem 0;
}

.kzft-aktionen > .tribe-events,
.kzft-aktionen .tribe-events-c-subscribe-dropdown__container {
	margin: 0;
	padding: 0;
}

.kzft-aktionen .tribe-events-c-subscribe-dropdown__button {
	border: 1px solid var(--kzf-linie-feld);
	border-radius: var(--kzf-radius-knopf);
	background: #fff;
	padding: 0.5rem 0.9rem;
}

.kzft-aktionen .tribe-events-c-subscribe-dropdown__button:hover,
.kzft-aktionen .tribe-events-c-subscribe-dropdown__button:focus-within {
	border-color: var(--kzf-tuerkis);
	background: var(--kzf-blau);
}

/*
 * **Die Schriftfarbe kommt über die Vererbung, nicht über Spezifität.** Der
 * Kalender setzt auf die Beschriftung `color: currentcolor` — und zwar mit
 * `.tribe-events .tribe-events-c-subscribe-dropdown button.tribe-events-c-subscribe-dropdown__button-text`,
 * also drei Klassen plus Element. Dagegen kommt keine Regel an, die nur
 * Klassen stapelt, ohne ins Absurde zu wachsen. Sie muss auch nicht: Wenn die
 * Beschriftung ohnehin die Farbe ihrer Umgebung übernimmt, genügt es, der
 * Umgebung die richtige zu geben. Ohne das erbt sie das Türkis, mit dem
 * Kadence Verweise im Fließtext einfärbt.
 */
.kzft-aktionen .tribe-events-c-subscribe-dropdown__container,
.kzft-aktionen .tribe-events-c-subscribe-dropdown {
	color: var(--kzf-petrol);
}

.kzft-aktionen .tribe-events-c-subscribe-dropdown__button-text {
	font-family: var(--kzf-schrift-text);
	font-size: 1rem;
	font-weight: 400;
}

.kzft-aktionen .tribe-events-c-subscribe-dropdown__button svg {
	color: var(--kzf-leise);
}

/* ---------- Deal-Verweis in der Blätternavigation ---------- */

/*
 * Zwischen „voriger" und „nächster Veranstaltung" war Platz. Der Verweis auf
 * die Dealseite steht dort mittig und ruhig: kein oranger Knopf — das wäre
 * lauter als die eigentliche Navigation und würde Leser aus dem Kalender
 * ziehen —, sondern derselbe Textverweis wie links und rechts, nur mit dem
 * Wort „Deals" im Signalorange und einer Zeile darunter, die sagt, was einen
 * dort erwartet.
 */
.tribe-events-sub-nav {
	align-items: center;
}

.tribe-events-sub-nav .kzft-nav-deal {
	flex: 0 1 auto;
	text-align: center;
	padding: 0 1rem;
}

.tribe-events-sub-nav .kzft-nav-deal a {
	display: inline-flex;
	flex-direction: column;
	gap: 0.1rem;
	font-family: var(--kzf-schrift-titel);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kzf-petrol);
	text-decoration: none;
}

.tribe-events-sub-nav .kzft-nav-deal a:hover,
.tribe-events-sub-nav .kzft-nav-deal a:focus {
	color: var(--kzf-petrol);
	text-decoration: none;
}

.tribe-events-sub-nav .kzft-nav-deal a:hover .kzft-akzent {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tribe-events-sub-nav .kzft-nav-deal small {
	font-family: var(--kzf-schrift-text);
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--kzf-leise);
}

@media (max-width: 40em) {
	.tribe-events-sub-nav .kzft-nav-deal {
		flex: 1 0 100%;
		order: 3;
		padding: 0.9rem 0 0;
		margin-top: 0.8rem;
		border-top: 1px solid var(--kzf-linie-feld);
	}
}