/**
 * EventHub — Entdecken-Seite (/veranstaltungen/entdecken/)
 *
 * Feed aus Sektionen: Teaser, Bedienleiste, Tagesauswahl, Rails, Reihen.
 * Die Karten selbst kommen aus eventhub-card-parts.css; hier nur Hülle,
 * Rails und die Bausteine des Feeds.
 *
 * Aussehen von Chips, Überschriften und Buttons kommt NICHT von hier,
 * sondern von den vorhandenen Komponenten, die ein Theme ohnehin gestaltet:
 *   - Chips         -> .eventhub-timeframe-nav__item (+ --active)
 *   - Überschriften -> .eventhub-section-title
 *   - Buttons       -> .eventhub-btn--secondary
 * Hier stehen nur Layout und die wenigen Eigenheiten des Feeds.
 *
 * Mobil zuerst: Rails laufen bis an den Bildschirmrand, die nächste Karte
 * schaut herein. Am Desktop bleiben es Rails, mit Pfeilen am Rand.
 */

.eventhub-discover {
	/* Seitenrand: kommt vom Container des Themes; mobil läuft der Feed
	   darüber hinaus bis an den Bildschirmrand (siehe unten). */
	--eh-d-pad: 0px;
	--eh-d-gap: 2rem;
	--eh-d-card-gap: 0.75rem;
	/* Mindestens 16 rem: darunter wird das Foto (16:9) niedriger als 140 px, und
	   Kategorie-Etikett, Highlight-Band und Datumsblock überdecken sich. Mobil
	   ragt die nächste Karte trotzdem sichtbar herein (Wisch-Hinweis). */
	--eh-d-rail-card: clamp(16rem, 72%, 21rem);
	--eh-d-radius: var(--ehc-radius, 12px);
	/* Platz rund um scrollende Flächen, damit Schatten nicht an deren Rand
	   abgeschnitten werden: Ruheschatten und der größere Schatten beim
	   Überfahren (--ehc-shadow-hover, im Child 0 20px 40px). */
	--eh-d-shadow-room: 2.5rem;
	--eh-d-accent: var(--eventhub-color-primary, #0073aa);
	/* Farbe der Rail-Pfeile; das Theme setzt hier seine Navigationsfarbe. */
	--eh-d-nav-color: var(--eh-d-accent);
	--eh-d-accent-soft: color-mix(in srgb, var(--eh-d-accent) 9%, #fff);
	--eh-d-line: var(--eventhub-color-border, #ddd);
	--eh-d-muted: var(--eventhub-color-text-muted, #666);
	--eh-d-text: var(--eventhub-color-text-dark, #1a1a1a);
	--eh-d-surface: #fff;

	padding-block-end: 2rem;
}

.eventhub-discover > * + * {
	margin-block-start: var(--eh-d-gap);
}

/* Zwischen den Sektionen des Feeds mehr Luft als zwischen Leiste und erster
   Sektion: über einer Überschrift soll die Trennung klar sein, mehr als der
   Abstand von der Überschrift zu ihren Karten (35 px). */
.eventhub-discover__feed > * + * {
	margin-block-start: calc(var(--eh-d-gap) + 0.875rem);
}

/* Während die Sektionen nach einer Filteränderung neu kommen. */
.eventhub-discover__feed {
	transition: opacity 0.15s ease;
}

.eventhub-discover__feed.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

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

/* Teaser und Bedienleiste gehören zusammen: enger. */
.eventhub-discover > .eventhub-discover-teaser + .eventhub-discover-toolbar {
	margin-block-start: 1rem;
}

/* ------------------------------------------------------------------ */
/* Köpfe der Sektionen                                                 */
/* ------------------------------------------------------------------ */

/* „Deine Merkliste“ ist bis zum Füllen versteckt. Das Theme setzt für alle section-Elemente
   display: block und würde das hidden-Attribut sonst überstimmen (leere Rail mit Titel). */
.eventhub-discover-rail--watchlist[hidden] {
	display: none;
}

.eventhub-discover-section__head {
	/* Über der Rail: deren Schattenraum ragt nach oben in den Kopf hinein. */
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* Luft zu den Karten darunter (die Rail zieht sich um den Schattenraum nach oben).
	   Gemessen von der Schrift bis zur Karte soll es so viel sein wie von der
	   vorigen Karte bis zur Schrift der nächsten Überschrift (~40 px); der Button
	   macht die Kopfzeile höher als die Schrift. */
	margin-block-end: 1.625rem;
}

/* Schrift, Größe, Versalien, Farbe: .eventhub-section-title (Theme). */
.eventhub-discover-section__title {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 0.75rem;
}

/* In der Kopfzeile bestimmt die Zeile den Abstand nach unten; ein Eigenabstand
   schöbe die Schrift über die Mitte des Buttons. */
body .eventhub-wrapper .eventhub-discover-section__head .eventhub-discover-section__title {
	margin: 0;
}

/* Icons vor den Überschriften: einfarbig in der Farbe der Überschrift
   (Pink bleibt für Aktives und Anklickbares). */
.eventhub-discover-section__icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: inherit;
}

/* Icon vor „Aktuell laufend“ (Banner aus der Übersicht): wie die übrigen Überschrift-Icons. */
.eventhub-discover .eventhub-running-events__icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-inline-end: 0.5rem;
	vertical-align: -0.2em;
}

/* Kategorie-Icon (Maske aus der Mediathek, Baustein der Karten) in derselben
   Größe und Farbe wie die übrigen Überschrift-Icons. */
.eventhub-category-icon.eventhub-discover-section__icon {
	margin: 0;
	background-color: currentColor;
}

/* „Alle ansehen“/„Anpassen“: derselbe blaue Pill-Button wie „Alle Veranstaltungen“
   unten (.eventhub-back-button), mit dessen Maßen aus dem Theme (mobil flacher).
   Nur die Zeilenhöhe setzen: „Anpassen“ ist ein <button>, und das Unicon-Theme
   setzt `button { line-height: 1 !important }` (shortcodes.css) — sonst 6 px flacher. */
body .eventhub-wrapper .eventhub-discover-section__more {
	flex: none;
	margin: 0;
	line-height: 1.5 !important;
	white-space: nowrap;
}

.eventhub-discover-section__intro {
	margin: -0.25rem 0 0.75rem;
	color: var(--eh-d-muted);
}

.eventhub-discover-section__action {
	flex: none;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--eh-d-accent);
	text-decoration: none;
	cursor: pointer;
}

.eventhub-discover-section__action:hover,
.eventhub-discover-section__action:focus-visible {
	background: none;
	color: var(--eh-d-accent);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Teaser                                                              */
/* ------------------------------------------------------------------ */

.eventhub-discover-teaser {
	--eh-d-teaser-bg: #14142b;
	--eh-d-teaser-fg: #fff;
	--eh-d-teaser-accent: color-mix(in srgb, var(--eh-d-accent) 55%, #fff);

	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--eh-d-radius);
	background: var(--eh-d-teaser-bg);
	color: var(--eh-d-teaser-fg);
	text-decoration: none;
}

.eventhub-discover-teaser:hover,
.eventhub-discover-teaser:focus-visible {
	color: var(--eh-d-teaser-fg);
	background: color-mix(in srgb, var(--eh-d-teaser-bg) 88%, #fff);
}

.eventhub-discover-teaser__image {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
}

.eventhub-discover-teaser__body {
	display: grid;
	gap: 0.2rem;
	flex: 1;
	min-width: 0;
}

.eventhub-discover-teaser__kicker {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eh-d-teaser-accent);
}

.eventhub-discover-teaser__title {
	font-size: 1.25rem;
	line-height: 1.2;
}

.eventhub-discover-teaser__text {
	opacity: 0.9;
}

.eventhub-discover-teaser__meta {
	font-size: 0.875rem;
	opacity: 0.75;
}

.eventhub-discover-teaser__arrow {
	flex: none;
	color: var(--eh-d-teaser-accent);
}

/* ------------------------------------------------------------------ */
/* Bedienleiste                                                        */
/* ------------------------------------------------------------------ */

/* Aussehen: die Filterleiste der Übersicht (.eventhub-filter, grauer Kasten des
   Themes). Alles darin ist derselbe Chip (.eventhub-quick-chip): die Tage,
   „Kostenlos“ (Checkbox im Chip) und der Stadtteil (das Theme gestaltet sein
   Auswahlfeld als Chip, überall gleich). Hier nur die Anordnung:
   - Desktop: eine Zeile — Tage, rechts Stadtteil und Kostenlos.
   - Tablet: Stadtteil und Kostenlos unter den Tagen.
   - Mobil: Kasten randlos wie in der Übersicht, Tage als Wischreihe, darunter
     Stadtteil und Kostenlos. */
.eventhub-discover-toolbar {
	--eh-d-toolbar-pad: 1rem;
	display: grid;
	gap: 1.25rem;
}

.eventhub-discover-toolbar__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.eventhub-discover-toolbar__days {
	flex: 1;
	min-width: 0;
	margin-inline-end: 0.5rem;
}

.eventhub-discover-toolbar__district,
.eventhub-discover-toolbar__actions {
	flex: none;
	min-width: 0;
}

/* Tages-Chips: dieselbe Reihe wie Kategorie-Chips in der Übersicht. */
.eventhub-discover-days {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

/* Ohne Icon wären die Chips niedriger als die Kategorie-Chips der Übersicht;
   etwas höher (36 statt 32 px) wirkt die Schrift darin mittiger. Gleiche Höhe
   für die Tage (der Stadtteil-Chip hat sie vom Theme). „Kostenlos“ ist der
   Schiebeschalter (.eventhub-toggle) der Übersicht und braucht hier nichts. */
body .eventhub-wrapper .eventhub-filter--discover .eventhub-discover-day {
	box-sizing: border-box;
	min-height: 2.25rem;
	padding-inline: 0.75rem;
}

/* Tablet: Tage und Auswahl passen nicht nebeneinander — Auswahl darunter. */
@media (min-width: 768px) and (max-width: 992px) {
	.eventhub-discover-toolbar__row--days {
		flex-wrap: wrap;
	}

	.eventhub-discover-toolbar__days {
		flex-basis: 100%;
		margin-inline-end: 0;
	}

	/* Zweite Zeile: Stadtteil links, „Kostenlos“ rechts. */
	.eventhub-discover-toolbar__actions {
		margin-inline-start: auto;
	}
}

@media (max-width: 767px) {
	/* Kasten genau wie die Filterleiste der Übersicht mobil: randlos über die
	   Bildschirmbreite, unten gerundet (Rand, Innenabstand, Rundung vom Theme). */
	body .eventhub-wrapper .eventhub-filter.eventhub-filter--discover {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		grid-template-areas:
			"days days"
			"district actions";
		align-items: center;
		gap: 0.75rem 0.5rem;
	}

	/* Die Verlaufs-Kanten des Themes (Scroll-Hinweis, ::before/::after von
	   .eventhub-filter) bleiben wie in der Übersicht stehen: Sie blenden die
	   Tage-Wischreihe an den Kastenrändern aus. Die Reihe reicht dafür bis an
	   die Kastenkante (negativer Rand + gleicher Innenabstand). */

	.eventhub-discover-toolbar__row {
		display: contents;
	}

	.eventhub-discover-toolbar__days {
		grid-area: days;
		margin: 0;
	}

	.eventhub-discover-toolbar__district {
		grid-area: district;
	}

	.eventhub-discover-toolbar__actions {
		grid-area: actions;
		justify-self: end; /* „Kostenlos“ rechts, Stadtteil links. */
	}

	/* Tage als Wischreihe bis an die Kastenkante; oben/unten Platz für den
	   Schatten aktiver Chips. */
	.eventhub-discover-days {
		flex-wrap: nowrap;
		margin: -0.25rem calc(-1 * var(--eh-d-toolbar-pad));
		padding: 0.25rem var(--eh-d-toolbar-pad);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.eventhub-discover-days::-webkit-scrollbar {
		display: none;
	}

	.eventhub-discover-days > * {
		flex: none;
	}
}


/* „Weitere Kategorien“: Chips der Übersicht als Links. Der Rahmen .eventhub-filter
   liefert dem Theme den Selektor für die Chip-Gestaltung, soll hier aber keinen
   Kasten zeigen. */
body .eventhub-wrapper .eventhub-discover-catlinks__box.eventhub-filter {
	margin-inline: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Verlaufs-Kanten des Themes (Scroll-Hinweis im Kasten) gibt es hier nicht. */
body .eventhub-wrapper .eventhub-discover-catlinks__box.eventhub-filter::before,
body .eventhub-wrapper .eventhub-discover-catlinks__box.eventhub-filter::after {
	display: none;
}

/* Umbrechen statt wischen: alle Kategorien auf einen Blick. */
body .eventhub-wrapper .eventhub-discover-catlinks__box .eventhub-filter__chips {
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	overflow: visible;
}

.eventhub-discover-catlinks a.eventhub-quick-chip {
	text-decoration: none;
}

/* Keine Rail darunter, die sich um den Schattenraum nach oben zieht: kleinerer Abstand. */
.eventhub-discover-catlinks .eventhub-discover-section__head {
	margin-block-end: 0.5rem;
}
/* ------------------------------------------------------------------ */
/* Interessen                                                          */
/* ------------------------------------------------------------------ */

/* Gespeicherte Interessen: den allgemeinen Feed nicht zeigen, bis die persönliche
   Fassung da ist. Fällt das Script aus, erscheint er nach 4 s trotzdem. */
.eventhub-discover__feed.is-personalizing {
	opacity: 0;
	animation: eh-feed-reveal 0s linear 4s forwards;
}

@keyframes eh-feed-reveal {
	to {
		opacity: 1;
	}
}

/* Fenster: am Handy ein Blatt vom unteren Rand, ab Tablet mittig. */
.eventhub-interests {
	box-sizing: border-box;
	width: min(40rem, 100vw);
	max-width: 100vw;
	/* Feste Höhe: das Fenster springt beim Wechsel der Tabs nicht. */
	height: min(40rem, 85vh);
	height: min(40rem, 85dvh);
	max-height: 85vh;
	max-height: 85dvh;
	margin: auto auto 0;
	padding: 0;
	border: 0;
	border-radius: var(--eh-d-radius, 12px) var(--eh-d-radius, 12px) 0 0;
	background: var(--eh-d-surface, #fff);
	color: var(--eh-d-text, #1a1a1a);
	box-shadow: 0 -12px 40px rgb(0 0 0 / 0.25);
}

/* Hintergrund wie beim Kategorien-Flyout der Übersicht: abgedunkelt und weichgezeichnet. */
.eventhub-interests::backdrop {
	background: rgb(0 0 0 / 0.4);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Auf- und Zuklappen: Handy gleitet das Blatt von unten ein und wieder hinaus, ab Tablet
   blendet das Fenster ein. Gleiche Dauer wie der Flyout der Übersicht (0,25 s). Das
   Schließen läuft über die Klasse is-closing (eventhub-discover.js, closeDialog). */
@keyframes eh-sheet-in {
	from {
		opacity: 0;
		transform: translateY(100%);
	}
}

@keyframes eh-sheet-out {
	to {
		opacity: 0;
		transform: translateY(100%);
	}
}

@keyframes eh-dialog-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.98);
	}
}

@keyframes eh-dialog-out {
	to {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.98);
	}
}

@keyframes eh-scrim-in {
	from {
		opacity: 0;
	}
}

@keyframes eh-scrim-out {
	to {
		opacity: 0;
	}
}

.eventhub-interests[open] {
	animation: eh-sheet-in 0.25s ease-out;
}

.eventhub-interests[open]::backdrop {
	animation: eh-scrim-in 0.25s ease-out;
}

.eventhub-interests.is-closing {
	animation: eh-sheet-out 0.2s ease-in forwards;
}

.eventhub-interests.is-closing::backdrop {
	animation: eh-scrim-out 0.2s ease-in forwards;
}

@media (min-width: 768px) {
	.eventhub-interests[open] {
		animation-name: eh-dialog-in;
	}

	.eventhub-interests.is-closing {
		animation-name: eh-dialog-out;
	}
}

/* Wer weniger Bewegung wünscht, bekommt nur das Ein- und Ausblenden. */
@media (prefers-reduced-motion: reduce) {
	.eventhub-interests[open],
	.eventhub-interests.is-closing {
		animation-name: eh-scrim-in;
	}
}

@media (min-width: 768px) {
	.eventhub-interests {
		margin: auto;
		border-radius: var(--eh-d-radius, 12px);
		box-shadow: 0 20px 60px rgb(0 0 0 / 0.3);
	}
}

/* Suchen am Handy: Hat ein Suchfeld Fokus, füllt das Fenster den sichtbaren Bereich über der
   Tastatur (Höhe und Abstand oben setzt eventhub-discover.js aus dem Visual Viewport), und
   „Deine Auswahl“ samt Einleitung weichen, damit die Treffer Platz haben. Die Zeilen des
   Rasters verschieben sich mit, weil der Auswahl-Block wegfällt. */
@media (max-width: 767.98px) {
	.eventhub-interests.is-searching {
		height: var(--eh-vv-height, 100dvh);
		max-height: var(--eh-vv-height, 100dvh);
		margin: var(--eh-vv-top, 0px) auto auto;
	}

	.eventhub-interests.is-searching .eventhub-interests__inner {
		grid-template-rows: auto auto minmax(0, 1fr) auto;
	}

	.eventhub-interests.is-searching .eventhub-interests__picked,
	.eventhub-interests.is-searching .eventhub-interests__intro {
		display: none;
	}
}

.eventhub-interests__inner {
	box-sizing: border-box;
	display: grid;
	/* minmax(0, 1fr): breite Inhalte (größere Schrift, lange Übersetzungen) brechen um,
	   statt das Fenster über den Bildschirmrand zu schieben. */
	grid-template-columns: minmax(0, 1fr);
	/* Kopf, Tabs, Auswahl, Inhalt (scrollt), Knöpfe. */
	grid-template-rows: auto auto auto minmax(0, 1fr) auto;
	gap: 0.75rem;
	height: 100%;
	max-height: inherit;
	padding: 1.25rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
}

.eventhub-interests__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

body .eventhub-interests__title {
	margin: 0;
}

.eventhub-interests__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--eventhub-color-bg-light, #f2f2f2);
	color: inherit;
	cursor: pointer;
}

body .eventhub-interests .eventhub-interests__intro {
	margin: 0 0 0.5rem;
	color: var(--eh-d-muted, #666);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* Theme-Gestaltung von Knöpfen (Außenabstand, Großschrift, Zeilenhöhe) gilt im Fenster nicht;
   „Auswahl aufheben“ behält die Großschrift von „Filter löschen“. */
body .eventhub-interests button:not(.eventhub-interests__reset):not(.eventhub-active-filter__remove),
body .eventhub-interests input {
	margin: 0 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal;
}

/* Rahmen .eventhub-filter nur für die Theme-Gestaltung der Tabs, ohne Kasten
   (ein Theme kann den Tabs gezielt wieder eine Kapsel geben). */
body .eventhub-wrapper .eventhub-interests__tabs.eventhub-filter {
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body .eventhub-wrapper .eventhub-interests__tabs.eventhub-filter::before,
body .eventhub-wrapper .eventhub-interests__tabs.eventhub-filter::after {
	display: none;
}

.eventhub-interests__tabs-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.eventhub-interests__tabs .eventhub-filter__buttons,
.eventhub-interests__tabs .eventhub-pill-buttons {
	max-width: 100%;
}

/* Zähler im Tab (stärker als die Span-Regeln der Zeitraum-Knöpfe). */
body .eventhub-interests .eventhub-interests__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 1.3rem;
	height: 1.3rem;
	margin: 0 0 0 0.15rem;
	padding: 0 0.3rem;
	border: 0;
	border-radius: 99px;
	background: rgb(0 0 0 / 0.14);
	box-shadow: none;
	color: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: 0.05em;
}

body .eventhub-interests .eventhub-interests__count[hidden] {
	display: none;
}

body .eventhub-interests input:checked + * .eventhub-interests__count {
	background: rgb(255 255 255 / 0.3);
}

/* „Deine Auswahl“: Chips der aktiven Filter. Am Handy eine Zeile zum Wischen, ab Tablet
   umbrechend (höchstens zwei Zeilen, dann scrollt sie). */
.eventhub-interests__picked {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.eventhub-interests__picked-label {
	margin: 0;
	color: var(--eh-d-muted, #666);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body .eventhub-wrapper .eventhub-interests .eventhub-interests__picked-box {
	display: block !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

body .eventhub-wrapper .eventhub-interests .eventhub-interests__picked-box::before,
body .eventhub-wrapper .eventhub-interests .eventhub-interests__picked-box::after {
	display: none !important;
}

/* Das Theme setzt die Liste mobil auf display: contents (Kinder im Scroll-Rahmen der
   Übersicht) — hier ist sie selbst der Rahmen. */
body .eventhub-wrapper .eventhub-interests .eventhub-interests__picked-list {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 0.4rem !important;
	min-width: 0;
	margin: -2px;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

body .eventhub-wrapper .eventhub-interests .eventhub-interests__picked-list[hidden] {
	display: none !important;
}

.eventhub-interests__picked-list::-webkit-scrollbar {
	display: none;
}

.eventhub-interests__picked-list .eventhub-active-filter {
	flex: none;
	margin: 0;
}

@media (min-width: 768px) {
	body .eventhub-wrapper .eventhub-interests .eventhub-interests__picked-list {
		flex-wrap: wrap;
		max-height: 5.4rem;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

.eventhub-interests__empty {
	margin: 0;
	color: var(--eh-d-muted, #666);
	font-size: 0.9375rem;
}

.eventhub-interests__empty[hidden] {
	display: none;
}

/* Inhalt: je Tab eine Fläche, die für sich scrollt. */
.eventhub-interests__body {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.eventhub-interests__panel {
	flex: 1;
	min-height: 0;
	/* Platz für Schatten und Fokusrahmen am Rand der Scrollfläche. */
	margin: -0.25rem;
	padding: 0.25rem;
	overflow-y: auto;
}

.eventhub-interests__panel[hidden] {
	display: none;
}

/* Suche (bleibt beim Scrollen oben) */
.eventhub-interests__search {
	position: sticky;
	top: -0.25rem;
	z-index: 2;
	margin: -0.25rem 0 0.25rem;
	padding: 0.25rem 0 0.5rem;
	background: var(--eh-d-surface, #fff);
}

.eventhub-interests__sort {
	margin: 0.35rem 0 0 0.25rem;
	color: var(--eh-d-muted, #666);
	font-size: 0.8125rem;
}

/* Zeilen und Suchfeld: eventhub-pick-list.css (gemeinsam mit dem Kategorien-Flyout). Hier nur die
   Zwischenüberschrift „Aktuell ohne Termine“, die es nur in den Listen dieses Fensters gibt. */
.eventhub-interests__list > .eventhub-interests__divider {
	padding: 1rem 0.25rem 0.35rem;
	border-bottom: 0;
	color: var(--eh-d-muted, #666);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.eventhub-interests__none {
	margin: 1rem 0.25rem;
	color: var(--eh-d-muted, #666);
}

.eventhub-interests__none[hidden] {
	display: none;
}

.eventhub-interests__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--eh-d-line, #ddd);
}

/* Aussehen: „Filter löschen“ der Übersicht (.eventhub-active-filters__clear-all).
   Hintergrund und Verlaufskante, die das Theme ihm mobil in der Filterleiste gibt,
   gehören nicht ins Fenster. */
.eventhub-interests__reset {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 2.75rem;
	cursor: pointer;
}

body .eventhub-wrapper .eventhub-interests .eventhub-interests__reset {
	padding-right: 0 !important;
	background: none !important;
}

body .eventhub-wrapper .eventhub-interests .eventhub-interests__reset::before {
	display: none;
}

/* Leerzustand */
.eventhub-discover-empty {
	display: grid;
	gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Tages-Sektion: Hero und Zeilen                                      */
/* ------------------------------------------------------------------ */

.eventhub-discover-day__rows {
	display: grid;
	gap: var(--eh-d-card-gap);
	margin: var(--eh-d-card-gap) 0 0;
	padding: 0;
	list-style: none;
}

.eventhub-discover-day__rows > li {
	min-width: 0;
	margin: 0;
}

/* Ab Tablet zwei Spalten. Bleibt bei ungerader Zahl (auch bei genau einer)
   eine Zeile allein, nimmt sie die ganze Breite — nie ein halbes Loch. */
@media (min-width: 48em) {
	.eventhub-discover-day__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eventhub-discover-day__rows > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* "Alle N ansehen" und Schlusszeilen: der blaue Pill-Button des Themes
   (.eventhub-back-button). Mobil über die ganze Breite, ab Tablet so breit
   wie sein Inhalt. */
.eventhub-discover-more,
.eventhub-discover-linkrow {
	position: relative; /* über dem Schattenraum der Rail davor */
	z-index: 1;
	width: 100%;
}

@media (min-width: 48em) {
	.eventhub-discover-more,
	.eventhub-discover-linkrow {
		width: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Rails                                                               */
/* ------------------------------------------------------------------ */

.eventhub-rail {
	position: relative;
}

.eventhub-rail__track {
	display: flex;
	align-items: stretch;
	gap: var(--eh-d-card-gap);
	/* Rundum Platz für den Kartenschatten; der negative Rand gleicht ihn
	   aus, die erste Karte bleibt bündig mit dem Titel. */
	margin: calc(-1 * var(--eh-d-shadow-room));
	padding: var(--eh-d-shadow-room);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--eh-d-shadow-room);
	scrollbar-width: none;
}

.eventhub-rail__track::-webkit-scrollbar {
	display: none;
}

.eventhub-rail__track:focus-visible {
	outline: 2px solid var(--eh-d-accent);
	outline-offset: -2px;
}

.eventhub-rail__item {
	flex: 0 0 var(--eh-d-rail-card);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

.eventhub-rail__item > .eventhub-card {
	height: 100%;
}

/* Pfeile: senkrecht mittig über den Karten (die Rail ist so hoch wie die
   Karten; der Schattenraum der Spur hebt sich per Rand auf). Weiße Fläche
   mit kräftigem Schatten, damit sie auch auf bunten Fotos auffallen; der
   Pfeil trägt die Navigationsfarbe. */
.eventhub-rail__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	color: var(--eh-d-nav-color);
	transform: translateY(-50%);
	cursor: pointer;
	transition:
		background-color var(--eventhub-transition, 0.2s ease),
		color var(--eventhub-transition, 0.2s ease);
}

.eventhub-rail__nav--prev {
	left: -1.5rem;
}

.eventhub-rail__nav--next {
	right: -1.5rem;
}

.eventhub-rail__nav:hover,
.eventhub-rail__nav:focus-visible {
	background: var(--eh-d-nav-color);
	color: #fff;
}

.eventhub-rail__nav:focus-visible {
	outline: 2px solid var(--eh-d-nav-color);
	outline-offset: 3px;
}

/* Pfeile nur mit Maus; [hidden] steuert das Script an den Enden. */
@media (hover: hover) and (pointer: fine) {
	.eventhub-rail__nav:not([hidden]) {
		display: grid;
	}
}

/* ------------------------------------------------------------------ */
/* "Für dich": Einladungs-Karte (gleiche Hülle wie die Karten)          */
/* ------------------------------------------------------------------ */

.eventhub-rail__item--note {
	display: flex;
}

.eventhub-discover .eventhub-discover-note {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	min-width: 0;
	/* Das Theme gibt Buttons einen Außenabstand; die Karte soll so groß
	   sein wie ihre Nachbarn. */
	margin: 0;
	padding: 1.25rem;
	border: 0;
	border-radius: var(--eh-d-radius);
	background: var(--eh-d-surface);
	box-shadow: var(--ehc-shadow, var(--eventhub-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.1)));
	font: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var(--eh-d-text);
	cursor: pointer;
	transition: box-shadow var(--eventhub-transition, 0.2s ease);
}

/* Hover wie die Karten (gleicher Schatten); die Fläche bleibt weiß — das
   Theme färbt Buttons beim Überfahren sonst dunkel. */
.eventhub-discover .eventhub-discover-note:hover,
.eventhub-discover .eventhub-discover-note:focus-visible,
.eventhub-discover .eventhub-discover-note:active {
	background: var(--eh-d-surface);
	color: var(--eh-d-text);
	box-shadow: var(--ehc-shadow-hover, var(--eventhub-card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.15)));
}

.eventhub-discover .eventhub-discover-note:focus-visible {
	outline: 2px solid var(--eh-d-accent);
	outline-offset: 2px;
}

.eventhub-discover-note__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--eh-d-accent-soft);
	color: var(--eh-d-accent);
}

.eventhub-discover-note__title {
	font-size: 1.0625rem;
	line-height: 1.25;
}

.eventhub-discover-note__text {
	color: var(--eh-d-muted);
	line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* Schlusszeilen                                                       */
/* ------------------------------------------------------------------ */

.eventhub-discover-links {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
}

.eventhub-discover-linkrow {
	margin: 0;
}

@media (max-width: 47.99em) {
	.eventhub-discover-links {
		justify-items: stretch;
	}
}

/* ------------------------------------------------------------------ */
/* Mobil: Feed bis an den Bildschirmrand                               */
/* ------------------------------------------------------------------ */

/* Der negative Rand hebt das Padding des Theme-Containers auf, der Feed
   setzt den Seitenrand selbst. Rails und Chip-Reihen bluten um genau diesen
   Rand nach außen, ihr erster Eintrag bleibt bündig mit den Titeln. */
@media (max-width: 47.99em) {
	.eventhub-discover {
		--eh-d-pad: 1rem;
		margin-inline: calc(50% - 50vw);
		padding-inline: var(--eh-d-pad);
	}

	.eventhub-rail__track {
		margin-inline: calc(-1 * var(--eh-d-pad));
		padding-inline: var(--eh-d-pad);
		scroll-padding-inline: var(--eh-d-pad);
	}
}