/* Kommende Termine: map plus cards with a coloured date header. */
.eu-upcoming.alignfull { padding-inline: var(--eu-pad); }
.eu-upcoming .eu-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
.eu-upcoming__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.eu-upcoming__grid.has-map { align-items: center; }
@media (min-width: 900px) {
	.eu-upcoming__grid.has-map { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
	.eu-upcoming__map { width: 100%; max-width: 42rem; justify-self: center; }
}

.eu-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.eu-map .eu-map__districts path {
	fill: #ebe7ea;
	stroke: #fff;
	stroke-width: 1px;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill .3s var(--eu-ease);
}
.eu-map .eu-map__states { fill: none; stroke: #b9b3b8; stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.eu-map .is-event-1 { fill: var(--eu-violet) !important; }
.eu-map .is-event-2 { fill: var(--eu-red-text) !important; }
.eu-map .is-event-3 { fill: var(--eu-darkgreen) !important; }
/* Termine further down the calendar than the cards reach. */
.eu-map .is-event-more { fill: color-mix(in srgb, var(--eu-violet) 45%, #ebe7ea) !important; }

/* Districts with Termine: hover shows a label, click highlights the card (or opens the Termine page). */
.eu-map .is-event { cursor: pointer; transition: fill .3s var(--eu-ease), opacity .3s var(--eu-ease); }
.eu-map .eu-map__districts path.is-event { stroke-width: 1.5px; }
.eu-upcoming:has(.is-event.is-active) .eu-map .is-event:not(.is-active) { opacity: .45; }
.eu-map .is-event.is-active { stroke: var(--eu-black); stroke-width: 2px; }
.eu-upcoming__map { position: relative; }
.eu-map__tip {
	position: absolute;
	z-index: 3;
	max-width: 17rem;
	padding: .55rem .75rem;
	background: var(--eu-black);
	color: #fff;
	font-size: .8125rem;
	line-height: 1.4;
	white-space: pre-line;
	pointer-events: none;
	box-shadow: var(--eu-shadow-lift);
	transform: translate(-50%, calc(-100% - .75rem));
}
.eu-map__tip::first-line { font-weight: 800; }
.eu-map__tip[hidden] { display: none; }

/* The card that belongs to the hovered or clicked district. */
.eu-event { transition: box-shadow .3s var(--eu-ease), transform .3s var(--eu-ease), opacity .3s var(--eu-ease); }
.eu-upcoming__list:has(.is-highlighted) .eu-event:not(.is-highlighted) { opacity: .55; }
.eu-event.is-highlighted { box-shadow: var(--eu-shadow-lift), 0 0 0 3px var(--eu-event); transform: translateY(-4px); }
.eu-event.is-pulse { animation: eu-event-pulse .9s var(--eu-ease) 2; }
@keyframes eu-event-pulse {
	50% { box-shadow: var(--eu-shadow-lift), 0 0 0 8px color-mix(in srgb, var(--eu-event) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
	.eu-event.is-highlighted { transform: none; }
	.eu-event.is-pulse { animation: none; }
}
/* Phones: the cards first, then a smaller map. */
@media (max-width: 899px) {
	.eu-upcoming__map { order: 2; width: min(100%, 26rem); margin-inline: auto; }
}

.eu-upcoming__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.eu-event {
	--eu-event: var(--eu-violet);
	position: relative;
	display: flex;
	flex: 1 1 15rem;
	flex-direction: column;
	margin: 0;
	background: #fff;
	box-shadow: var(--eu-shadow);
}
.eu-event--2 { --eu-event: var(--eu-red-text); }
.eu-event--3 { --eu-event: var(--eu-darkgreen); }

.eu-event__head {
	position: relative;
	overflow: hidden;
	padding: 1.1rem 1.4rem 1.2rem;
	background: var(--eu-event);
	color: #fff;
}
.eu-event__when { position: relative; z-index: 1; display: grid; margin: 0; }
.eu-event__day { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.eu-event__date { font: 900 clamp(1.9rem, 3vw, 2.5rem)/1.05 var(--eu-display); letter-spacing: -.02em; }
/* Over the end of a month ("28. Feb. – 2. März") the date is longer, so a little smaller. */
.eu-event__date.is-long { font-size: clamp(1.5rem, 2.3vw, 1.9rem); }
/* Mirrored and tilted like the icons on die-linke.de. */
.eu-event__icon {
	position: absolute;
	top: 50%;
	right: 1rem;
	width: auto;
	height: 5.25rem;
	opacity: .22;
	transform: translateY(-50%) scaleX(-1) rotate(-20deg);
}

.eu-event__body { display: flex; flex: 1; flex-direction: column; gap: .7rem; padding: 1.2rem 1.4rem 1.4rem; }
.eu-event__title { margin: 0; font: 900 1.3rem/1.15 var(--eu-display); letter-spacing: -.01em; hyphens: auto; }
.eu-event__title a { color: inherit; text-decoration: none; }
/* The whole card is clickable through the title link. */
.eu-event__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.eu-event:hover .eu-event__title a { color: var(--eu-event); }
.eu-event__title a:focus-visible { outline: none; }
.eu-event:has(.eu-event__title a:focus-visible) { outline: 3px solid var(--eu-event); outline-offset: 3px; }
.eu-event__facts { display: grid; gap: .3rem; margin: 0; padding: 0; color: #222; font-size: .9rem; list-style: none; }
.eu-event__facts li { display: flex; gap: .45rem; align-items: flex-start; }
.eu-event__facts .eu-icon { flex: none; width: 1rem; height: 1rem; margin-top: .2em; color: var(--eu-event); }
.eu-event__note { margin: 0; color: var(--eu-grey); font-size: .875rem; line-height: 1.5; }
.eu-event__foot { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .4rem; }
.eu-event__more { display: inline-flex; gap: .25em; align-items: center; padding-left: .5rem; border-left: 2px solid currentColor; color: var(--eu-event); font-size: .85rem; font-weight: 700; }

.eu-upcoming__empty {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background: var(--eu-light);
	border-top: 6px solid var(--eu-violet);
}
.eu-upcoming__empty p { position: relative; max-width: 34rem; margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.3rem); line-height: 1.5; }
.eu-upcoming__empty .eu-button { position: relative; }
.eu-upcoming__empty-icon {
	position: absolute;
	right: -1.5rem;
	bottom: -2rem;
	width: auto;
	height: 11rem;
	color: var(--eu-violet);
	opacity: .12;
	transform: scaleX(-1) rotate(-20deg);
}

/* All Termine (the Termine page): equal columns, so a lone last card doesn't stretch, and the map stays in view beside a long list. */
.eu-upcoming.is-all .eu-upcoming__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
@media (min-width: 900px) {
	.eu-upcoming.is-all .eu-upcoming__grid.has-map { align-items: start; }
	.eu-upcoming.is-all .eu-upcoming__map { position: sticky; top: calc(var(--eu-header-h, 4.5rem) + 2rem); }
}
.eu-upcoming__foot:not(:empty) { display: flex; justify-content: flex-end; margin-top: clamp(1.5rem, 3vw, 2.5rem); }