/* ==========================================================================
   /termine/ — Volle Seminartermin-Liste (Salesforce) im neuen Design
   Template: termine.php · Shortcode: [all_events_sf type="allseminars"]
   Bühne = cdmm-hero (wie /seminare). Alle Regeln auf .termine-uebersicht
   gescoped, damit ausschliesslich diese Seite betroffen ist.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bühne / Full-Bleed
   Der Ausbruch auf volle Breite MUSS relativ zum .innerwrap rechnen
   (calc(50% - 50vw) landet dann sauber bei x=0). Dafür den Article erst auf
   volle innerwrap-Breite zwingen, dann die Bühne ausbrechen lassen — sonst
   ist der containing block zu schmal und der Hintergrund verrutscht.
   -------------------------------------------------------------------------- */
/* Ausbruch auf volle Breite liegt — wie bei /seminare (.themengebiet) — auf
   dem ARTICLE, dessen containing block die .innerwrap ist. So landet
   calc(50% - 50vw) sauber bei x=0. Padding 0, damit die Bühne randlos füllt;
   die Liste wird über .termine-content wieder eingerückt. overflow-x:clip
   kappt jegliches Sub-Pixel-Überstehen (kein horizontales Verrutschen). */
.termine-uebersicht {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	padding: 0;
	overflow-x: clip;
}

/* Bühne füllt den full-bleed Article (cdmm-hero bringt margin:0 selbst mit). */
.termine-hero.cdmm-hero {
	padding: 64px 0;
}

/* Nur eine Spalte (kein Hero-Aside wie auf /seminare) — alles zentriert. */
.termine-hero .cdmm-hero__inner {
	display: block;
}
.termine-hero .cdmm-hero__main {
	max-width: 760px;
	margin: 0 auto;
	align-items: center;
	text-align: center;
}
.termine-hero .cdmm-hero__title,
.termine-hero .cdmm-hero__intro {
	text-align: center;
}
/* Eyebrow-Pill (eigenes Flex-Element) explizit zentrieren. */
.termine-hero .cdmm-hero__eyebrow {
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Such-/Filterzeile IN der Bühne
   -------------------------------------------------------------------------- */
.termine-hero__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	/* volle Spaltenbreite, damit Suchfeld + Standort nebeneinander passen
	   (sonst schrumpft die Zeile durch align-items:center der Bühne und bricht um). */
	align-self: stretch;
	width: 100%;
}

.termine-hero__search {
	position: relative;
	flex: 1 1 320px;
	max-width: 480px;
}
.termine-hero__search svg {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: #9ca3af;
	pointer-events: none;
}
.termine-hero__search input[type="search"] {
	width: 100%;
	height: 56px;
	padding: 0 16px 0 48px;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--color-foreground, #1f242e);
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
}
.termine-hero__search input[type="search"]::placeholder {
	color: #9ca3af;
}
.termine-hero__search input[type="search"]:focus {
	outline: none;
	border-color: var(--color-primary, #ec6608);
	box-shadow: 0 0 0 2px var(--color-primary-light, rgba(236, 102, 8, 0.15));
}

/* Standort-Select (per JS aus der Plugin-Ausgabe in die Bühne verschoben). */
.termine-hero__filter #sf_city_selector.sf-input {
	float: none !important;
	flex: 0 1 220px;
	width: auto;
	height: 56px;
	padding: 0 40px 0 16px;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-foreground, #1f242e);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	box-sizing: border-box;
}
.termine-hero__filter #sf_city_selector.sf-input:focus {
	outline: none;
	border-color: var(--color-primary, #ec6608);
	box-shadow: 0 0 0 2px var(--color-primary-light, rgba(236, 102, 8, 0.15));
}

/* Plugin-eigene Kopfzeile ausblenden: <h3> (Bühne ersetzt den Titel) und die
   Filter-<div> (Suche kommt aus der Bühne; #sf_search_key bleibt als
   versteckter Werte-Carrier im DOM, #sf_city_selector wird per JS entnommen). */
.termine-uebersicht .events_information_block > h3 {
	display: none;
}
.termine-uebersicht .events_information_block > div {
	display: none;
}

/* --------------------------------------------------------------------------
   Inhalts-Wrapper (Liste)
   -------------------------------------------------------------------------- */
.termine-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px 80px;
	box-sizing: border-box;
}
.termine-content .events_container {
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   Pagination ("page-bar") — Pills im neuen Design
   -------------------------------------------------------------------------- */
.termine-uebersicht .sf-event-additionalblock {
	margin-top: 32px;
}
.termine-uebersicht .sf-page-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0;
	margin: 0;
	font-size: 1rem;
}
.termine-uebersicht .sf-page-nav li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	margin: 0;
	padding: 8px 14px;
	color: var(--color-primary, #ec6608);
	background-color: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	list-style-type: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.termine-uebersicht .sf-page-nav li:hover,
.termine-uebersicht .sf-page-nav li.active {
	background-color: var(--color-primary, #ec6608);
	border-color: var(--color-primary, #ec6608);
	color: #fff;
}
.termine-uebersicht .sf-page-nav li.active {
	cursor: default;
}
.termine-uebersicht .sf-page-nav li.disabled {
	color: #bbb;
	background-color: #fff;
	border-color: #eee;
	cursor: default;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Legende
   -------------------------------------------------------------------------- */
.termine-uebersicht ul.legende.sf-legende {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 32px 0 0;
	padding: 0;
	font-size: 0.85em;
	color: var(--color-muted-foreground, #6b7280);
}
.termine-uebersicht .sf-legende li {
	float: none;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.termine-hero.cdmm-hero {
		padding: 40px 0;
	}
	.termine-hero__filter {
		flex-direction: column;
		align-items: stretch;
	}
	.termine-hero__search,
	.termine-hero__filter #sf_city_selector.sf-input {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
	}
}