/**
 * 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).
   „Nach einem Nicht-Script“ statt „nach irgendeinem Element“: Beim Laden steht vor der ersten
   Sektion das Inline-Script der Personalisierung; mit `* + *` bekam die erste Sektion dann den
   Sektionsabstand, nach einem Filterwechsel (Feed ohne Script) nicht – der Feed sprang um 14 px. */
.eventhub-discover__feed > :not(script) ~ * {
	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;
	}
}

/* Header mit H1 + H2 (Partial archive-header): mobil nur für Crawler und Screenreader.
   Wie Karte und App beginnt die Seite dort mit Umschalter und Bedienleiste, der Feed
   steht ohne Scrollen im Blick. Das Markup bleibt (kein display: none). */
@media (max-width: 767px) {
	.eventhub-discover > .eventhub-hero-editorial {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* 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: Stadtteil (das Theme gestaltet sein Auswahlfeld als Chip) und der
   Schiebeschalter „Kostenlos“ aus der Filterleiste der Übersicht. Beide gelten für
   den ganzen Feed. Die Tage stehen nicht hier, sondern als Chips in der Tages-Sektion
   (sie wählen nur diese). Anordnung: eine Zeile, Stadtteil links, Kostenlos rechts,
   im grauen Kasten des Themes wie auf den anderen Seiten. */
.eventhub-discover-toolbar {
	--eh-d-toolbar-pad: 1rem;
	display: grid;
	gap: 1.25rem;
}

/* Der graue Kasten des Themes (.eventhub-filter) bleibt wie in Übersicht und Karte;
   hier nur der Abstand nach unten: der Kasten braucht mehr Luft zur ersten Sektion
   („Aktuell laufend“) als die frühere Haarlinie. Die Verlaufs-Kanten des Themes
   (Scroll-Hinweis für Chip-Reihen) hat diese Leiste nicht. */
body .eventhub-wrapper .eventhub-filter.eventhub-filter--discover.eventhub-discover-toolbar {
	margin-block-end: 1.75rem;
}

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

/* Die Leiste liegt über allem, was danach kommt: ihr Stadtteil-Menü klappt in die
   Sektionen darunter hinein. Das Theme gibt .eventhub-filter z-index 1 (eigener
   Stacking Context), die Sektionsköpfe (z-index 1) und Rail-Pfeile (2) stehen
   später im Dokument und würden das Menü sonst überdecken. */
body .eventhub-wrapper .eventhub-filter.eventhub-filter--discover {
	z-index: 5;
}

/* Die Leiste liegt über den Chip-Reihen darunter (Tage, Umschalter), die dieselbe Klasse
   tragen: ihr Stadtteil-Menü klappt sonst unter die Tage-Chips. */
body .eventhub-wrapper .eventhub-filter.eventhub-filter--discover.eventhub-discover-toolbar {
	z-index: 6;
}

body .eventhub-wrapper .eventhub-filter.eventhub-filter--discover.eventhub-discover-switch {
	z-index: 1;
}

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

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

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

/* Stadtteil-Chip: Das Theme reserviert seinen Platz (7,43 rem × 2,25 rem), versteckt aber das
   Auswahlfeld, bis eventhub-filter.js den Chip gebaut hat — die Leiste stünde bis dahin ohne Stadtteil
   da. Ein Platzhalter füllt den Platz und sieht aus wie der fertige Chip: Pin (das Symbol aus dem
   Markup), Beschriftung (Variable aus toolbar.php), Pfeil. Maße wie der Chip des Themes
   (Pin bei 14 px, Text bei 39 px, Pfeil 14 px rechts). Mit dem Chip (.custom-initialized) entfällt er;
   bleibt das Script aus, verschwindet er nach 3 s mit dem Auswahlfeld des Themes (Rückfall). */
body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized)) {
	background: var(--lev-grey-light-medium, #e9e9e9);
	border-radius: 50px;
	color: var(--lev-grey, #555);
}

body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized))::before,
body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized))::after,
body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized)) .eventhub-filter__select-icon {
	position: absolute;
	top: 50%;
	pointer-events: none;
	transform: translateY(-50%);
	animation: eh-district-placeholder-off 0s linear 3s forwards;
}

body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized))::before {
	content: var(--eh-d-district-label, "");
	/* Wie der Text im Chip des Themes per Flex zentriert, nicht per transform: Ein transform rastert die
	   Schrift am Desktop (Maßstab 1) um 1 px höher als der fertige Chip. */
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	transform: none;
	left: 39px;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized))::after {
	content: "";
	right: 14px;
	width: 14px;
	height: 14px;
	background: currentcolor;
	/* Wie der Pfeil des Chips (Polylinie 6 9 12 15 18 9), als Maske in der Schriftfarbe. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized)) .eventhub-filter__select-icon {
	left: 14px;
	display: flex;
}

/* Schon ein Stadtteil gewählt (Adresse mit ?stadtteil=…): der fertige Chip ist rosa mit dem Namen,
   den das CSS nicht kennt — der Platzhalter zeigt nur die Farbe und den Pin. */
body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized) option:checked:not([value=""])) {
	background: var(--lev-pink, #cb0950);
	color: var(--lev-white, #fff);
}

body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized) option:checked:not([value=""]))::before,
body .eventhub-wrapper .eventhub-filter--discover .eventhub-filter__select-wrapper:has(.eventhub-filter__select:not(.custom-initialized) option:checked:not([value=""]))::after {
	content: none;
}

@keyframes eh-district-placeholder-off {
	to {
		opacity: 0;
	}
}

/* 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;
}



@media (max-width: 767px) {
	/* Zwei Spalten: Stadtteil links, Kostenlos rechts. */
	body .eventhub-wrapper .eventhub-filter.eventhub-filter--discover {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		grid-template-areas: "district actions";
		align-items: center;
		gap: 0.75rem 0.5rem;
	}



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



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

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

}


/* „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. „Aktuell laufend“ und „Heute“ sind für alle gleich (ohne Attribut bzw. mit
   data-feed-section="today") und bleiben sichtbar; alles ab „Für dich“ wartet und wird durch
   ein Skeleton ersetzt (discover-page.php), damit beim Scrollen klar ist, dass noch etwas kommt.
   Fällt das Script aus, nimmt ein Timer im Inline-Script die Klasse nach 6 s wieder weg. */
.eventhub-discover__feed.is-personalizing > [data-feed-section]:not([data-feed-section="today"]) {
	display: none;
}

/* Skeleton für das Warten auf die persönliche Fassung: Überschrift, Chip-Reihe, zwei Karten
   (Maße wie „Für dich“). Nur sichtbar, solange der Feed wartet. */
.eventhub-discover-skeleton {
	display: none;
}

.eventhub-discover__feed.is-personalizing > .eventhub-discover-skeleton {
	display: grid;
	gap: 1rem;
}

/* Lichtband wie beim Skeleton der Kartenansicht (eventhub-map.css): gleicher Verlauf, gleiches Tempo. */
.eventhub-discover-skeleton__title,
.eventhub-discover-skeleton__chips > *,
.eventhub-discover-skeleton__cards > * {
	background: linear-gradient(
		90deg,
		var(--eventhub-color-bg-alt, #f4f4f4) 25%,
		var(--eventhub-color-border, #ddd) 50%,
		var(--eventhub-color-bg-alt, #f4f4f4) 75%
	);
	background-size: 40rem 100%;
	animation: eh-skeleton-shimmer 1.5s infinite linear;
}

.eventhub-discover-skeleton__title {
	width: min(11rem, 45%);
	height: 1.5rem;
	border-radius: 4px;
}

.eventhub-discover-skeleton__chips {
	display: flex;
	gap: 0.5rem;
	overflow: hidden;
}

.eventhub-discover-skeleton__chips > * {
	flex: none;
	width: 6.5rem;
	height: 2.25rem;
	border-radius: 99px;
}

.eventhub-discover-skeleton__chips > :nth-child(2) {
	width: 8.5rem;
}

/* Wie die Rails: bis an den Bildschirmrand, die nächste Karte schaut herein. */
.eventhub-discover-skeleton__cards {
	display: flex;
	gap: var(--eh-d-card-gap);
	margin-inline: calc(-1 * var(--eh-d-pad));
	padding-inline: var(--eh-d-pad);
	overflow: hidden;
}

.eventhub-discover-skeleton__cards > * {
	flex: none;
	width: var(--eh-d-rail-card);
	height: 16rem;
	border-radius: var(--eh-d-radius);
}

@keyframes eh-skeleton-shimmer {
	0% {
		background-position: -20rem 0;
	}

	100% {
		background-position: 20rem 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eventhub-discover-skeleton__title,
	.eventhub-discover-skeleton__chips > *,
	.eventhub-discover-skeleton__cards > * {
		animation: none;
		background: var(--eventhub-color-bg-alt, #f4f4f4);
	}
}

/* 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). Als Plakette an der
   oberen rechten Ecke des Tabs, nicht im Textfluss: Sonst wird der Tab beim ersten Treffer
   breiter und schiebt die übrigen (bei verteilten Tabs sogar die in der Mitte) zur Seite. */
.eventhub-interests__tabs label > span {
	position: relative;
}

body .eventhub-interests .eventhub-interests__count {
	position: absolute;
	/* Über der Textzeile und über die Ecke hinaus, damit sie weder Beschriftung noch Nachbar-Tab verdeckt. */
	top: -0.8rem;
	right: -0.65rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	/* Die Schrift sitzt im Zeilenkasten einen halben Pixel zu tief: unten etwas Luft gleicht es aus. */
	padding: 0 0.2rem 1px;
	border: 2px solid var(--eh-d-surface, #fff);
	border-radius: 99px;
	background: var(--eh-d-text, #1a1a1a);
	box-shadow: none;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	pointer-events: none;
}

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

/* Ab 520 px hat jeder der vier gleich breiten Tabs Platz für seinen Text samt zweistelligem Zähler:
   Dann steht die Zahl wieder im Text und die Kapsel wächst nur um ihren Text, kein anderer Tab
   wandert. Darunter (gemessen: bei 450 px wandern Tabs noch um bis zu 10 px, bei 400 px passen
   sie nicht in eine Zeile) bleibt es bei der Plakette. */
@media (min-width: 520px) {
	body .eventhub-wrapper .eventhub-interests .eventhub-interests__tabs .eventhub-pill-radio {
		display: flex;
		flex: 1 1 0;
		justify-content: center;
	}

	body .eventhub-interests .eventhub-interests__count {
		position: static;
		min-width: 1.3rem;
		height: 1.3rem;
		margin: 0 0 0 0.15rem;
		padding: 0 0.3rem;
		border: 0;
		background: rgb(0 0 0 / 0.14);
		color: inherit;
		font-size: 0.75rem;
		vertical-align: 0.05em;
	}

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

/* Schmale Handys: vier Tabs brauchen sonst mehr Platz, als das Fenster hat. */
@media (max-width: 359px) {
	body .eventhub-wrapper .eventhub-interests .eventhub-interests__tabs .eventhub-pill-radio__label {
		padding-right: 0.4rem;
		padding-left: 0.4rem;
	}
}

/* „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;
	/* Das Theme macht den Rahmen mobil 2,5 rem breiter (Randausgleich der Übersicht); hier
	   bestimmt die Wischreihe selbst, wie weit sie nach außen läuft. */
	width: auto !important;
	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;
}

/* Handy: Die Wischreihe läuft bis an den Fensterrand statt am Innenabstand zu enden; der erste
   Chip bleibt bündig mit den Titeln. Wie bei den Chip-Reihen des Feeds blenden die Chips im
   Randstreifen aus (Maske) — das zeigt, dass es seitwärts weitergeht. */
@media (max-width: 767px) {
	body .eventhub-wrapper .eventhub-interests .eventhub-interests__picked-list {
		margin-inline: -1.25rem;
		padding-inline: 1.25rem;
		scroll-padding-inline: 1.25rem;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
	}
}

@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 ein Panel, in dem nur die Liste unter dem Suchfeld scrollt. Die Scroll-Leiste
   steht so neben den Einträgen, nicht neben dem Suchfeld. */
.eventhub-interests__body {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

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

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

.eventhub-interests__scroll {
	flex: 1;
	min-height: 0;
	/* Die Leiste steht im Randstreifen des Panels, nicht über den Auswahlkreisen. */
	margin-inline-end: -0.25rem;
	padding-inline-end: 0.25rem;
	overflow-y: auto;
}

/* Suche (steht über der scrollenden Liste) */
.eventhub-interests__search {
	flex: none;
	margin: -0.25rem 0 0.25rem;
	padding: 0.25rem 0 0.5rem;
	background: var(--eh-d-surface, #fff);
}

.eventhub-interests__intro {
	flex: none;
}

.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;
}

/* Orte und Veranstalter haben je über 300 Zeilen: Beim Tabwechsel stellte der Browser alle auf
   einmal dar (live 270–340 ms bei 4-facher CPU-Drosselung, mit 30 Zeilen 85 ms). Zeilen
   außerhalb des sichtbaren Bereichs überspringt er jetzt; die Platzhalterhöhe ist eine Zeile
   (57 px), `auto` merkt sich danach die echte Höhe. Im Karten-Slider war dasselbe auf iOS
   unbrauchbar (eventhub-map.css); hier am 2026-10-18 auf dem iPhone geprüft, alle Zeilen da. */
.eventhub-interests__list > .eventhub-interests__item {
	content-visibility: auto;
	contain-intrinsic-size: auto 3.5625rem;
}

.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;
}

/* Der <li> streckt sich auf Zeilenhöhe, die Karte darin aber nicht von selbst:
   nebeneinander liegende Karten wären sonst unterschiedlich hoch. */
.eventhub-discover-day__rows > li > .eventhub-card {
	height: 100%;
}

/* 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%;
	/* Padding und Rand zählen mit, sonst ragt der Button mobil rechts heraus. */
	box-sizing: border-box;
}

@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 {
		/* Feste Spalte über die ganze Breite: Das Theme setzt bis 576 px `justify-content: center` auf
		   jedes nav, dann schrumpft die inhaltsbreite Spalte und der Button steht kurz in der Mitte. */
		grid-template-columns: minmax(0, 1fr);
		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);
	}

	/* Pfeile (nur mit Maus, z. B. in einem schmalen Browserfenster) liegen auf den Karten statt
	   über den Rand hinaus — sonst wird die Seite 8 px zu breit und scrollt seitwärts. */
	.eventhub-rail__nav--prev {
		left: 0.5rem;
	}

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

/* ------------------------------------------------------------------ */
/* Umschalter in „Für dich“                                            */
/* ------------------------------------------------------------------ */

/* „Alle N ansehen“ des gewählten Chips neben „Anpassen“. */
.eventhub-discover-section__tools {
	display: flex;
	flex: none;
	/* stretch: „Anpassen“ ohne Text (nur Symbol) ist sonst niedriger als „Alle N ansehen“
	   daneben; der Button zentriert sein Symbol selbst (inline-flex, align-items: center). */
	align-items: stretch;
	gap: 0.5rem;
}

/* Chip-Reihe (Quick-Chips der Übersicht) ohne den grauen Kasten der Filterleiste,
   direkt unter der Überschrift. */
body .eventhub-wrapper .eventhub-discover-switch {
	/* Block statt Flex der Filterleiste: sonst bemisst der Inhalt die Reihe und sie läuft über den Rand. */
	display: block;
	margin: 0 0 0.875rem;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.eventhub-discover-switch__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.eventhub-discover-switch__end {
	flex: none;
	width: 0;
}

/* Der Rail-Schattenraum zieht sich nach oben: die Chips über den Karten halten. */
.eventhub-discover-switch {
	position: relative;
	z-index: 1;
}

body .eventhub-wrapper .eventhub-discover-switch .eventhub-quick-chip.is-active {
	background: var(--eh-d-accent);
	border-color: var(--eh-d-accent);
	color: #fff;
}

[data-feed-section][aria-busy="true"] .eventhub-rail__track {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/* Der Link „Alle N ansehen“ ist bis zur Wahl eines Chips versteckt (das Theme setzt display auf die Buttons). */
body .eventhub-wrapper .eventhub-discover-section__more[hidden] {
	display: none;
}

@media (max-width: 47.99em) {
	/* Wischreihe, am Rand bis zum Bildschirmrand: um den Seitenrand des Feeds nach außen,
	   der erste Chip bleibt bündig mit den Titeln (wie die Rails). */
	.eventhub-discover-switch__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--eh-d-pad));
		padding-inline: var(--eh-d-pad);
		scroll-padding-inline: var(--eh-d-pad);
	}

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

	/* Scroll-Hinweis am Rand: die Chips selbst blenden im Seitenrand-Streifen aus (Maske).
	   Die Verlaufs-Kanten des Themes (.eventhub-filter::before/::after, grau, nur 16 px
	   über der Unterkante gekappt) entfallen — sie dunkelten den weißen Hintergrund ab
	   und lagen auch auf dem leeren Rand links, wo noch kein Chip hinläuft. */
	body .eventhub-wrapper .eventhub-filter.eventhub-discover-switch::before,
	body .eventhub-wrapper .eventhub-filter.eventhub-discover-switch::after {
		display: none;
	}

	.eventhub-discover-switch__row {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--eh-d-pad), #000 calc(100% - var(--eh-d-pad)), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--eh-d-pad), #000 calc(100% - var(--eh-d-pad)), transparent 100%);
	}

	/* Ist „Alle N ansehen“ da, bleibt von „Anpassen“ nur das Symbol — sonst bricht die Überschrift um. */
	.eventhub-discover-section__tools:has([data-feed-chip-more]:not([hidden])) [data-feed-open] > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

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

/* Gewählter Tag ohne passende Termine: Hinweis unter den Tage-Chips. */
.eventhub-discover-day__empty {
	margin: 0.5rem 0 0;
	color: var(--eh-d-muted);
}

/* Zwischenüberschrift „Mehr entdecken“ über den allgemeinen Rails: Schrift und Größe der
   Rail-Titel (.eventhub-section-title), aber ohne Icon und Button und gedämpft, damit sie als
   Gruppenüberschrift über dem ersten Rail-Titel steht. */
body .eventhub-wrapper .eventhub-discover-divider {
	/* Näher an den ersten Rail-Titel darunter (der hat selbst reichlich Abstand nach oben). */
	margin: 3.5rem 0 -1.5rem;
	color: var(--eh-d-muted);
}

/* Kategorie-Icon im Chip: einfarbige Maske in der Schriftfarbe des Chips — grau wie die
   Symbole der anderen Chips, weiß im aktiven. */
.eventhub-discover-switch .eventhub-discover-chip__icon {
	display: block;
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: currentColor;
}