/* Filterleiste — eingefärbte Section (Screenshot 01-screenshot-listenansicht.png). */
.bgg-seminare-filter-section {
	background-color: var(--bgg-color-filter-bg);
	padding: var(--bgg-space-2xl) var(--bgg-space-md);
}

.bgg-seminare-filter-section__inner {
	max-width: 80rem;
	margin: 0 auto;
}

/* Filter als Grid mit festen Layouts je Breite statt flex-wrap
   (Rückmeldung 20.10.2026: „Umspringen auf Tablet und Mobil gefällt nicht")
   — beim Umbruch per flex-wrap landete je nach Breite mal nur der Button,
   mal die Suche zentriert in einer zweiten Zeile, ohne gemeinsame Kanten.
   Desktop: alles in einer Zeile, die Suche nimmt den Rest. */
.bgg-seminare-filter {
	display: grid;
	grid-template-columns: 11rem 11rem 16rem minmax(12rem, 1fr) auto;
	grid-template-areas: "von bis thema suche button";
	align-items: end;
	gap: var(--bgg-space-md);
}

.bgg-seminare-filter__feld {
	display: flex;
	flex-direction: column;
	gap: var(--bgg-space-3xs);
	min-width: 0;
}

.bgg-seminare-filter__feld:nth-child(1) { grid-area: von; }
.bgg-seminare-filter__feld:nth-child(2) { grid-area: bis; }
.bgg-seminare-filter__feld:nth-child(3) { grid-area: thema; }
.bgg-seminare-filter__feld--suche { grid-area: suche; }
.bgg-seminare-filter__submit { grid-area: button; }

/* Felder füllen ihre Grid-Spalte (base.css begrenzt Formularfelder sonst
   auf 28rem). Drei Klassen, damit die Regel sicher vor der aus base.css
   (".bgg-scope input[type=…]") greift. */
.bgg-scope .bgg-seminare-filter .bgg-seminare-filter__feld :is(input, select) {
	width: 100%;
	max-width: none;
}

/* Tablet: zwei saubere Zeilen auf vier gleichen Spalten —
   Von · Bis · Themengebiet (doppelt) / Suche (dreifach) · Button. */
@media (max-width: 1199px) {
	.bgg-seminare-filter {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"von bis thema thema"
			"suche suche suche button";
	}

	.bgg-scope .bgg-seminare-filter__submit {
		width: 100%;
	}
}

/* Mobile: Von/Bis nebeneinander, Themengebiet und Suche volle Breite,
   Button volle Breite darunter; weniger Innenabstand der Section. */
@media (max-width: 767px) {
	.bgg-seminare-filter-section {
		padding: var(--bgg-space-xl) var(--bgg-space-sm);
	}

	.bgg-seminare-filter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"von bis"
			"thema thema"
			"suche suche"
			"button button";
		gap: var(--bgg-space-sm);
	}
}

/* Eigenes Chevron statt des nativen — dessen Abstand zum Text lässt sich
   browserübergreifend nicht zuverlässig per padding vergrößern. */
#bgg-seminare-topic {
	appearance: none;
	padding-right: var(--bgg-space-xl);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232f3e46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--bgg-space-sm) center;
	background-size: 0.9rem;
}

/* Inhaltsbereich — kein eigener Hintergrund, übernimmt den der Page (Kap. 9.3:
   Farben kommen aus dem Child-Theme/der Seite, nicht aus dem Plugin). */
.bgg-seminare-content-section {
	padding: var(--bgg-space-xl) var(--bgg-space-md);
}

.bgg-seminare-content-section__inner {
	max-width: 80rem;
	margin: 0 auto;
	text-align: center;
}

.bgg-seminare-content-section__eyebrow {
	margin: 0 0 var(--bgg-space-2xs);
	color: var(--bgg-color-primary);
	font-size: var(--bgg-font-size-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bgg-seminare-content-section__headline {
	margin: 0 0 var(--bgg-space-lg);
}

/* Breiter als vorher (Rückmeldung 22.09.2026: „Tabelle etwas breiter") —
   90% statt 80%, zusätzlich nach oben über die 80rem des umgebenden
   ".bgg-seminare-content-section__inner" gedeckelt. */
.bgg-seminare-liste {
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* align-items: center (Rückmeldung 22.09.2026: „Entries sollten vertikal
   zentriert sein"). Datum/Titel bekommen dafür white-space: nowrap +
   text-overflow: ellipsis statt Zeilenumbruch, damit ihre Zeilenhöhe stabil
   bleibt. Das Themengebiet bekommt bewusst KEINE Kürzung (Rückmeldung
   22.09.2026: „Themengebiet muss immer voll ausgeschrieben werden") — wird
   der Text dort zu lang, wächst nur diese Zelle auf zwei Zeilen, „center"
   zentriert die übrigen (einzeiligen) Spalten dann einfach innerhalb der
   dadurch etwas höheren Zeile, ohne dass etwas „springt".

   Schriftgröße/-schnitt einheitlich 18px/500 („medium", Rückmeldung
   22.09.2026) für die ganze Zeile statt einzelner Abweichungen (Titel war
   zuvor 600). Zebra-Streifen (Rückmeldung 22.09.2026: „#EEEDE3 dann keine
   Hintergrundfarbe") über nth-child, horizontales Padding ergänzt, damit der
   Hintergrund nicht direkt an Text/Container-Kante stößt. */
.bgg-seminare-liste__zeile {
	display: flex;
	align-items: center;
	gap: var(--bgg-space-sm);
	padding: var(--bgg-space-xs) var(--bgg-space-sm);
	font-size: var(--fs-text, 18px);
	font-weight: 500;
	border-bottom: var(--bgg-border);
}

.bgg-seminare-liste__zeile:nth-child(odd) {
	background-color: var(--bgg-color-filter-bg);
}

.bgg-seminare-liste__zeile:nth-child(even) {
	background-color: transparent;
}

.bgg-seminare-liste__punkt {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--bgg-punkt-farbe, currentColor);
}

/* Feste Breite + tabular-nums (Rückmeldung 22.09.2026: „Datum unterschiedlich
   breit, Versatz") — ohne feste Breite richtet sich die Spalte nach der
   Ziffernbreite der jeweils schmalsten proportionalen Ziffern des Textes aus,
   „tabular-nums" allein reicht nicht, weil unterschiedlich lange Monatsnamen
   nicht vorkommen, aber die Spaltenbreite sonst weiter am Inhalt der
   einzelnen Zeile statt an der gesamten Liste hängt. */
.bgg-seminare-liste__datum {
	flex: 0 0 11.5rem;
	color: #393939;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Farbe über zwei Klassen statt einer (".bgg-seminare-liste__zeile
   .bgg-seminare-liste__titel" statt nur ".bgg-seminare-liste__titel") — der
   Elementor-Kit lädt global ".elementor-kit-6 a{color:…}" (Klasse+Element,
   siehe base.css), das ist spezifischer als eine einzelne Klasse auf einem
   <a> und hätte die Farbe sonst überschrieben. */
.bgg-seminare-liste__zeile .bgg-seminare-liste__titel {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: #393939;
	text-decoration: none;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bgg-seminare-liste__zeile .bgg-seminare-liste__titel:hover,
.bgg-seminare-liste__zeile .bgg-seminare-liste__titel:focus-visible {
	text-decoration: underline;
}

.bgg-seminare-liste__thema {
	flex: 0 0 12rem;
	color: #2a6136;
	text-align: left;
}

/* Bewusst kein Button — Textfarbe wie Titel/Datum (#393939, Rückmeldung
   22.09.2026), Unterstreichung dauerhaft sichtbar (Rückmeldung 22.09.2026),
   nicht nur bei Hover. Farbe über zwei Klassen statt einer, aus demselben
   Grund wie bei ".bgg-seminare-liste__titel" oben (Elementor-Kit-Link-Farbe
   ist sonst spezifischer).

   Feste Breite (Rückmeldung 22.09.2026: „Wenn ein Seminar ausgebucht ist,
   springt der Text links daneben") — „Ausgebucht" ist deutlich breiter als
   „Anmelden"; ohne feste Breite wuchs die Box nach links in den Titel-Platz
   hinein (der Titel hat flex-grow und füllt jeweils den verbleibenden
   Rest), wodurch der Titel in ausgebuchten Zeilen sichtbar schmaler/anders
   abgeschnitten wurde als in buchbaren Zeilen. */
.bgg-seminare-liste__zeile .bgg-seminare-liste__anmelden {
	flex: 0 0 8rem;
	color: #393939;
	white-space: nowrap;
	text-decoration: underline;
}

/* Gesperrter Zustand, wenn TN_IST >= TN_MAX (analog
   .bgg-seminar-detail__anmelden--ausgebucht in detail.css) — bewusst ein
   <span> statt <a>, damit der Kurs nicht per Tastatur/Klick anwählbar ist.
   Zwei Klassen wie bei der Basisregel oben, sonst wäre diese hier trotz
   gleicher Reihenfolge im Stylesheet weniger spezifisch und "text-decoration:
   underline" der Basisregel würde gewinnen. */
.bgg-seminare-liste__zeile .bgg-seminare-liste__anmelden--ausgebucht {
	opacity: 0.5;
	cursor: not-allowed;
	text-decoration: none;
}

/* Mobile (Elementor-Breakpoint ≤ 767px): Die festen Spaltenbreiten von Datum,
   Themengebiet und Anmelden ergeben zusammen schon über 500px — auf dem Handy
   blieb für den Titel 0px, Themengebiet und „Anmelden" ragten aus dem
   Bildschirm (Responsive-Check 20.10.2026). Stattdessen drei Zeilen:
   Punkt + Datum / Titel (umbrechend, nicht abgeschnitten) / Thema + Anmelden. */
@media (max-width: 767px) {
	.bgg-seminare-liste__zeile {
		flex-wrap: wrap;
		row-gap: var(--bgg-space-2xs);
	}

	.bgg-seminare-liste__datum {
		flex: 1 1 auto;
	}

	.bgg-seminare-liste__zeile .bgg-seminare-liste__titel {
		flex: 1 1 100%;
		white-space: normal;
	}

	.bgg-seminare-liste__thema {
		flex: 1 1 auto;
	}

	.bgg-seminare-liste__zeile .bgg-seminare-liste__anmelden {
		flex: 0 0 auto;
	}
}

.bgg-seminare-liste__leer {
	padding: var(--bgg-space-md) 0;
	text-align: center;
}

/* Paginierung (Rückmeldung 22.09.2026: max. 10 Einträge pro Seite, Vor/Zurück
   statt eines Buttons je Seite — Rückmeldung 22.09.2026: „nicht für jede
   Seite einen Button, zeige Vor/Zurück und die aktuelle Seite"). */
.bgg-seminare-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bgg-space-md);
	margin-top: var(--bgg-space-lg);
}

.bgg-seminare-pagination__schritt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5.5rem;
	height: 2.25rem;
	padding: 0 var(--bgg-space-sm);
	border: var(--bgg-border);
	border-radius: var(--bgg-radius);
	color: inherit;
	font-size: var(--fs-klein, 16px);
	font-weight: 600;
	text-decoration: none;
}

a.bgg-seminare-pagination__schritt:hover,
a.bgg-seminare-pagination__schritt:focus-visible {
	background-color: var(--bgg-color-filter-bg);
}

.bgg-seminare-pagination__schritt--deaktiviert {
	opacity: 0.4;
	cursor: not-allowed;
}

.bgg-seminare-pagination__status {
	font-size: var(--fs-klein, 16px);
}