/* Schriftgrößen: Skala --fs-* in style.css (ab 1.9.7). */
/* ================================================================
   SEKTIONS-STILE — Phase 1 Grundgerüst
   Vollständige Implementierung der Sektionen folgt in Phase 2.
   Hier: CSS-Variablen angewandt, Basisstruktur und GP-Overrides.
   ================================================================ */

/* ── Seiten-Inhalt ──────────────────────────────────────────────── */

/* GP rendert den Inhalt direkt nach #masthead (Header scrollt normal
   mit, kein Sticky) – daher kein margin-top nötig. */
.site-content {
	background: var(--color-bg);
}

/* Startseite: leeren Standard-Content-Container ausblenden – alle
   Inhalte kommen aus den gehookten Sektionen (Hero, Direktion/Termine,
   Aktivitäten, Auszeichnungen). */
.bgrein-no-loop .site-content {
	display: none;
}

/* Keine waagrechte Scrollleiste: Full-Bleed-Bereiche mit 100vw (z. B.
   Auszeichnungen) sind unter Windows um die Scrollbar-Breite zu breit.
   „clip“ statt „hidden“, damit die sticky Seitenleisten in Beiträgen
   funktionieren. Topbar/Navigation sind bewusst NICHT sticky. */
html,
body {
	overflow-x: clip;
}

/* ── Hero-Slideshow ─────────────────────────────────────────────── */

.bgrein-hero {
	height: var(--hero-height);
	position: relative;
	overflow: hidden;
	background: var(--hero-gradient);
	margin-top: 0;
}

.bgrein-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.bgrein-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.bgrein-hero__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
	padding: var(--spacing-2xl) var(--spacing-4xl) var(--spacing-xl);
	color: white;
}

.bgrein-hero__category {
	display: inline-block;
	padding: 0.625rem 1.375rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09375rem;
	margin-bottom: var(--spacing-md);
}

.bgrein-hero__title {
	font-family: var(--font-display);
	font-size: var(--font-size-hero);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 var(--spacing-md);
	max-width: 900px;
}

.bgrein-hero__excerpt {
	font-size: var(--font-size-lg);
	max-width: 750px;
	line-height: 1.8;
	opacity: 0.95;
}

/* Slider-Dots – klein und dezent am unteren Rand.
   Die Hauptaufforderung ist der „Weiterlesen“-Button. */
.bgrein-hero__dots {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0;
	z-index: 10;
}

.bgrein-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255,255,255,0.45);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all var(--transition-smooth);
}

.bgrein-hero__dot:hover {
	background-color: rgba(255,255,255,0.75);
}

/* background-color statt Kurzform – sonst wird background-clip
   zurückgesetzt und der unsichtbare Klickrand sichtbar. */
.bgrein-hero__dot.is-active {
	background-color: rgba(255,255,255,0.9);
	width: 16px;
}

/* Barrierefreiheit: Klickfläche der Punkte mind. 24 × 24 px
   (6px Punkt + 2 × 9px unsichtbarer Rand; sichtbar bleibt nur der Punkt) */
.bgrein-hero__dot {
	box-sizing: content-box;
	border: 9px solid transparent !important;
	background-clip: padding-box;
}

/* ── „Weiterlesen“ – dezenter Textlink (Variante A) ──────────────
   Linksbündig unter dem Text, Stil wie .bgrein-direktion__all.
   Technisch Teil des Slide-Links (ein Link pro Beitrag). */
.bgrein-hero__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--spacing-sm);
	padding-bottom: 2px;
	color: #fff;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.3;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	transition: border-color var(--transition-base);
}

.bgrein-hero__more svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--transition-base);
}

.bgrein-hero__slide-link:hover .bgrein-hero__more,
.bgrein-hero__slide-link:focus-visible .bgrein-hero__more {
	border-bottom-color: #fff;
}

.bgrein-hero__slide-link:hover .bgrein-hero__more svg,
.bgrein-hero__slide-link:focus-visible .bgrein-hero__more svg {
	transform: translateX(4px);
}

/* Tastaturfokus: Ring am Link-Text statt um die ganze Slide-Fläche */
.bgrein-hero__slide-link:focus-visible {
	outline: none;
}
.bgrein-hero__slide-link:focus-visible .bgrein-hero__more {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 2px;
}

/* ── Bild reagiert auf Maus (Variante E, nur Desktop) ────────────
   Bild liegt zusätzlich auf ::before, damit nur das Bild zoomt –
   Text und Verlauf bleiben ruhig. */
.bgrein-hero__slide::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transition: transform 0.8s ease, filter 0.8s ease;
}

.bgrein-hero__slide.has-no-image::before {
	display: none;
}

/* Bewusst NICHT an prefers-reduced-motion gekoppelt: Windows meldet
   „Bewegung reduzieren“, sobald die Animationseffekte des Systems aus
   sind – dann wäre der Effekt bei vielen Besuchern einfach weg. Der
   Zoom ist klein, langsam und nur bei Mausberührung (wie Auszeichnungen-Band). */
@media (hover: hover) {
	.bgrein-hero__slide:hover::before {
		transform: scale(1.03);
		filter: brightness(1.08);
	}
}

.bgrein-hero__dot:focus-visible { outline: 2px solid white; outline-offset: 0; }

/* Kategorie-Etikett: Fläche abgedunkelt → weiße Schrift gut lesbar */
.bgrein-hero__category {
	color: #fff;
	background: var(--hero-cat, #1E7A45);
}

/* Pause/Fortsetzen */
.bgrein-hero__pause {
	position: absolute;
	right: 20px;
	bottom: 24px;
	z-index: 11;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 50%;
	background: rgba(0,0,0,0.4);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bgrein-hero__pause:hover,
.bgrein-hero__pause:focus-visible { background: rgba(0,0,0,0.65); border-color: #fff; }
.bgrein-hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bgrein-hero__pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bgrein-hero__pause .bgrein-hero__icon-play { fill: currentColor; stroke-width: 1.5; }
.bgrein-hero__icon-play,
.bgrein-hero.is-paused .bgrein-hero__icon-pause { display: none; }
.bgrein-hero.is-paused .bgrein-hero__icon-play { display: block; }
.bgrein-hero__pause[hidden] { display: none; }

/* Pfeil-Buttons links/rechts */
.bgrein-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 50%;
	background: rgba(0,0,0,0.28);
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background var(--transition-smooth), border-color var(--transition-smooth);
}

.bgrein-hero__nav:hover,
.bgrein-hero__nav:focus-visible {
	background: rgba(0,0,0,0.55);
	border-color: white;
}

.bgrein-hero__nav:focus-visible {
	outline: 2px solid white;
	outline-offset: 3px;
}

.bgrein-hero__nav svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bgrein-hero__nav--prev { left: 24px; }
.bgrein-hero__nav--next { right: 24px; }

/* Klickbare Slide-Fläche (umschließt Overlay vollständig) */
.bgrein-hero__slide-link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Slide-Bild über Custom Properties (gesetzt in hero-slider.php):
   Desktop/Tablet 2400×1000, Handy 1200×500 – beide 12:5. */
.bgrein-hero__slide {
	background-image: var(--hero-img, none);
}

@media (max-width: 768px) {
	.bgrein-hero__slide {
		background-image: var(--hero-img-m, var(--hero-img, none));
	}
}

/* Fallback-Hintergrund für Posts ohne Beitragsbild */
.bgrein-hero__slide.has-no-image {
	background: var(--hero-gradient);
}

/* Kategorie-Badge über Overlay-Gradient */
.bgrein-hero__category {
	position: relative;
	z-index: 2;
}

/* Tablet: reduzierte Höhe, Text kompakter (Platz für den Button) */
@media (max-width: 1023px) {
	.bgrein-hero {
		height: 350px;
	}

	.bgrein-hero__overlay {
		padding: var(--spacing-lg) var(--spacing-3xl) var(--spacing-lg);
	}

	.bgrein-hero__category {
		margin-bottom: 0.75rem;
	}

	.bgrein-hero__title {
		font-size: 2.125rem;
		margin-bottom: 0.5rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bgrein-hero__excerpt {
		font-size: var(--font-size-base);
		line-height: 1.6;
		margin-bottom: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bgrein-hero__more {
		margin-top: 0.75rem;
	}
}

/* Mobile: kompakt, Excerpt ausblenden, kleinere Dots */
@media (max-width: 768px) {
	.bgrein-hero {
		height: 250px;
	}

	/* Text kompakt; unten Platz für die Dots lassen */
	.bgrein-hero .bgrein-hero__overlay {
		padding: 1rem 1.25rem 1.75rem;
	}

	.bgrein-hero .bgrein-hero__title {
		font-size: 1.25rem;          /* 20px statt 32px */
		line-height: 1.25;
		margin-bottom: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;       /* max. 2 Zeilen */
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bgrein-hero .bgrein-hero__category {
		font-size: 0.625rem;         /* 10px */
		padding: 0.25rem 0.625rem;
		letter-spacing: 0.05rem;
		margin-bottom: 0.5rem;
	}

	.bgrein-hero__dots {
		bottom: 2px;
	}

	.bgrein-hero__more {
		margin-top: 0.5rem;
		font-size: 0.75rem;
		gap: 0.3rem;
	}

	.bgrein-hero__more svg {
		width: 13px;
		height: 13px;
	}

	.bgrein-hero__nav {
		width: 36px;
		height: 36px;
		top: 40%;
	}

	.bgrein-hero__nav svg {
		width: 18px;
		height: 18px;
	}

	.bgrein-hero__nav--prev { left: 10px; }
	.bgrein-hero__nav--next { right: 10px; }

	.bgrein-hero__excerpt {
		display: none;
	}

	.bgrein-hero__pause { right: 10px; bottom: 6px; width: 34px; height: 34px; }
}

/* ── Seitentitel auf Startseite ausblenden ──────────────────────── */
.home .entry-header,
.home .page-header {
	display: none;
}

/* ================================================================
   HOMEPAGE-INFOZEILE — Wrapper für Direktion (60%) + Termine (40%)
   ================================================================ */

.bgrein-home-info {
	background: var(--color-bg);
	padding: var(--spacing-2xl) var(--content-padding-x);
}

.bgrein-home-info__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	align-items: stretch;
}

/* Direktion ~60 %, Termine ~40 % nebeneinander (ab 768px, s. u.). */
.bgrein-home-info .bgrein-direktion {
	flex: 1 1 58%;
	min-width: 0;
}

.bgrein-home-info .bgrein-termine {
	flex: 1 1 36%;
	min-width: 0;
}

/* Messphase von home-termine.js: natürliche Höhen statt „stretch“. */
.bgrein-home-info--measuring .bgrein-home-info__inner > * {
	align-self: flex-start;
}

/* Reserve-Termine bleiben ohne JS bzw. auf Mobil/Tablet ausgeblendet. */
.bgrein-termine__item--extra[hidden] {
	display: none;
}

/* Letzter SICHTBARER Termin ohne Trennlinie. */
.bgrein-termine__item:has(+ .bgrein-termine__item--extra[hidden]) {
	border-bottom: none;
}

/* Fehlt die Direktionsmeldung → Termine voll breit. */
.bgrein-home-info--single .bgrein-termine {
	flex-basis: 100%;
}

/* Desktop (ab 1025 px): Infozeile nutzt die volle Breite wie der Hero.
   Abstand links/rechts = Abstand oben zur Hero-Grafik (--spacing-2xl).
   Aufteilung Direktion : Termine = 2 : 1. */
@media (min-width: 1025px) {
	.bgrein-home-info {
		padding-left: var(--spacing-2xl);
		padding-right: var(--spacing-2xl);
	}

	.bgrein-home-info__inner {
		max-width: none;
		flex-wrap: nowrap;
	}

	/* Abstand nach unten = oben/links/rechts (70 px): der obere Außenabstand
	   der Aktivitäten (100 px) entfällt, wenn die Infozeile davor steht. */
	.bgrein-home-info {
		padding-bottom: var(--spacing-2xl);
	}

	body:has(.bgrein-home-info) .bgrein-activity-section {
		margin-top: 0;
	}

	.bgrein-home-info .bgrein-direktion {
		flex: 2 1 0;
	}

	.bgrein-home-info .bgrein-termine {
		flex: 1 1 0;
		min-width: 340px;
	}

	/* Bilder/Plakate in der Meldung wachsen nicht mit der Breite mit –
	   sonst würde die Box nur höher statt breiter. */
	.bgrein-home-info .bgrein-direktion__text img {
		max-width: min(100%, 560px);
		height: auto;
	}
}


/* ================================================================
   SEKTION DIREKTION
   ================================================================ */

.bgrein-direktion {
	background: linear-gradient(135deg, var(--color-accent-green) 0%, #00474A 100%);
	color: white;
	padding: var(--spacing-xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	position: relative;
	overflow: hidden;
}

.bgrein-direktion::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(255,255,255,0.12), transparent 60%);
	pointer-events: none;
}

.bgrein-direktion__inner {
	position: relative;
	z-index: 1;
}

.bgrein-direktion__eyebrow {
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09375rem;
	opacity: 0.85;
	margin: 0 0 var(--spacing-xs);
}

.bgrein-direktion__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.03125rem;
	margin: 0 0 var(--spacing-md);
}

.bgrein-direktion__text {
	font-size: var(--fs-text);
	line-height: 1.8;
	opacity: 0.96;
}

.bgrein-direktion__text p {
	margin: 0 0 var(--spacing-sm);
}

.bgrein-direktion__text p:last-child {
	margin-bottom: 0;
}

.bgrein-direktion .bgrein-cta {
	margin-top: var(--spacing-lg);
	margin-right: var(--spacing-md);
}

.bgrein-cta {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	background: white;
	color: var(--color-green-mid);
	text-decoration: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.875rem;
	transition: all var(--transition-base);
}

.bgrein-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.20);
}

.bgrein-direktion__all {
	display: inline-block;
	margin-top: var(--spacing-lg);
	color: white;
	font-family: var(--font-ui);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	transition: border-color var(--transition-base);
}

.bgrein-direktion__all:hover {
	border-bottom-color: white;
}


/* ================================================================
   SEKTION TERMINE
   ================================================================ */

.bgrein-termine {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--spacing-xl);
	border-top: 4px solid var(--color-green-mid);
}

.bgrein-termine__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-lg);
}

.bgrein-termine__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bgrein-termine__item {
	border-bottom: 1px solid var(--color-border);
}

.bgrein-termine__item:last-child {
	border-bottom: none;
}

/* Ganze Zeile ist ein Link in den Online-Schulkalender. */
.bgrein-termine__link {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-sm) 0;
	text-decoration: none;
	color: inherit;
}

a.bgrein-termine__link:hover .bgrein-termine__summary {
	color: var(--color-green-mid);
}

a.bgrein-termine__link:focus-visible {
	outline: 2px solid var(--color-green-mid);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* „Öffnet extern"-Icon rechts. */
.bgrein-termine__ext {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--color-text-meta);
	opacity: 0.55;
	transition: opacity var(--transition-base), color var(--transition-base);
}

a.bgrein-termine__link:hover .bgrein-termine__ext {
	opacity: 1;
	color: var(--color-green-mid);
}

.bgrein-termine__date {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: var(--color-accent-green);
	color: white;
	font-family: var(--font-ui);
	line-height: 1;
}

.bgrein-termine__day {
	font-size: var(--font-size-xl);
	font-weight: 700;
}

.bgrein-termine__month {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	margin-top: 2px;
}

.bgrein-termine__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bgrein-termine__weekday {
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	color: var(--color-text-meta);
	margin-bottom: 2px;
}

.bgrein-termine__summary {
	font-size: var(--fs-small);
	color: var(--color-primary);
	font-weight: 600;
}

.bgrein-termine__empty {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	font-style: italic;
	margin: 0;
}


/* ================================================================
   DIREKTIONSMELDUNGEN — Archiv & Einzelansicht
   ================================================================ */

.bgrein-meldung-archive,
.bgrein-meldung-single {
	padding: var(--spacing-3xl) var(--content-padding-x);
}

.bgrein-meldung-archive__inner,
.bgrein-meldung-single__inner {
	max-width: 820px;
	margin: 0 auto;
}

/* ── Archiv-Liste ──────────────────────────────────────────────── */

.bgrein-meldung-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.bgrein-meldung-card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	border-left: 4px solid var(--color-accent-green);
	padding: var(--spacing-lg);
	transition: all var(--transition-smooth);
}

.bgrein-meldung-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}

.bgrein-meldung-card__date {
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	color: var(--color-text-meta);
	margin: 0 0 var(--spacing-xs);
}

.bgrein-meldung-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 600;
	margin: 0 0 var(--spacing-sm);
	line-height: 1.3;
}

.bgrein-meldung-card__title a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-base);
}

.bgrein-meldung-card__title a:hover {
	color: var(--color-green-mid);
}

.bgrein-meldung-card__excerpt {
	font-size: var(--fs-small);
	color: var(--color-text-light);
	line-height: 1.7;
	margin-bottom: var(--spacing-sm);
}

.bgrein-meldung-card__more {
	font-family: var(--font-ui);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-green-mid);
	text-decoration: none;
}

.bgrein-meldung-card__more:hover {
	text-decoration: underline;
}

.bgrein-meldung-pagination {
	margin-top: var(--spacing-xl);
}

.bgrein-meldung-pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.875rem;
	margin: 0 2px;
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-size: var(--font-size-sm);
	color: var(--color-primary);
	text-decoration: none;
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
}

.bgrein-meldung-pagination .page-numbers.current,
.bgrein-meldung-pagination .page-numbers:hover {
	background: var(--color-accent-green);
	color: white;
}

.bgrein-meldung-empty {
	font-size: var(--font-size-md);
	color: var(--color-text-muted);
	font-style: italic;
}

/* ── Einzelansicht ─────────────────────────────────────────────── */

.bgrein-meldung-single__back {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-green-mid);
	text-decoration: none;
	margin-bottom: var(--spacing-lg);
}

.bgrein-meldung-single__back:hover {
	text-decoration: underline;
}

.bgrein-meldung-single__back--bottom {
	margin-top: var(--spacing-xl);
	margin-bottom: 0;
}

.bgrein-meldung-article__eyebrow {
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09375rem;
	color: var(--color-text-meta);
	margin: 0 0 var(--spacing-xs);
}

.bgrein-meldung-article__title {
	font-family: var(--font-display);
	font-size: var(--font-size-4xl);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-sm);
}

.bgrein-meldung-article__date {
	font-family: var(--font-ui);
	font-size: var(--font-size-sm);
	color: var(--color-text-meta);
	margin: 0 0 var(--spacing-lg);
}

.bgrein-meldung-article__image {
	margin-bottom: var(--spacing-lg);
}

.bgrein-meldung-article__image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.bgrein-meldung-article__content {
	font-size: var(--fs-text);
	line-height: 1.85;
	color: var(--color-text);
}

.bgrein-meldung-article__content p {
	margin: 0 0 var(--spacing-md);
}

/* ── Aktivitäten-Grid ───────────────────────────────────────────── */

.bgrein-activity-section {
	max-width: var(--content-max-width);
	margin: var(--spacing-4xl) auto;
	padding: 0 var(--content-padding-x);
}

.bgrein-activity-section__title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-xl);
}

.bgrein-activity-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.bgrein-activity-card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: all var(--transition-smooth);
	text-decoration: none;
	color: inherit;
	display: block;
}

.bgrein-activity-card:hover {
	transform: translateY(-12px);
	box-shadow: var(--shadow-card-hover);
}

.bgrein-activity-card__image {
	width: 100%;
	height: 260px;
	background-size: cover;
	background-position: center;
	position: relative;
}

.bgrein-activity-card__category {
	position: absolute;
	top: 22px;
	left: 22px;
	padding: 0.4375rem 1.125rem;
	border-radius: var(--radius-pill);
	font-size: var(--font-size-xs);
	font-family: var(--font-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	color: white;
}

.bgrein-activity-card__body {
	padding: 2rem;
}

.bgrein-activity-card__date {
	font-size: 0.875rem;
	color: var(--color-text-meta);
	margin-bottom: 0.75rem;
	font-family: var(--font-ui);
}

.bgrein-activity-card__title {
	font-size: var(--fs-h4);
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
	font-weight: 600;
	font-family: var(--font-display);
}

.bgrein-activity-card__excerpt {
	font-size: var(--fs-small);
	color: var(--color-text-light);
	line-height: 1.7;
}

/* ── Auszeichnungen (Logo-Karussell, full-width) ────────────────── */

.bgrein-awards {
	/* Full-Bleed: aus dem Content-Container ausbrechen. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--color-surface);
	padding: var(--spacing-3xl) 0;
	overflow: hidden;
}

.bgrein-awards__inner {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0 var(--content-padding-x);
}

.bgrein-awards__title {
	font-size: var(--fs-h2);
	text-align: center;
	margin-bottom: var(--spacing-xl);
	color: var(--color-text-muted);
	font-weight: 600;
	letter-spacing: 0.03125rem;
	font-family: var(--font-display);
}

/* Laufband-Viewport mit weichen Kanten links/rechts. */
.bgrein-awards__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.bgrein-awards__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	/* 40s = Fallback-Dauer; assets/js/auszeichnungen.js setzt die
	   tatsächliche Dauer proportional zur Set-Breite (min. 40s). */
	animation: bgrein-marquee 40s linear infinite;
}

/* Pause bei Hover/Fokus (robuster als JS) — im Stillstand sind die
   Logos anklickbar. */
.bgrein-awards__viewport:hover .bgrein-awards__track,
.bgrein-awards__viewport:focus-within .bgrein-awards__track,
.bgrein-awards.is-paused .bgrein-awards__track {
	animation-play-state: paused;
}

/* Ohne JS (nicht dupliziert) kein Lauf – Logos statisch umbrechen. */
.bgrein-awards:not(.is-running) .bgrein-awards__track {
	animation: none;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: var(--spacing-xl);
	width: auto;
}

/* Pause/Fortsetzen-Knopf unter dem Band */
.bgrein-awards__controls {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-lg);
}
.bgrein-awards__pause {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: color var(--transition-base), border-color var(--transition-base);
}
.bgrein-awards__pause:hover,
.bgrein-awards__pause:focus-visible { color: var(--color-primary); border-color: var(--color-primary); }
.bgrein-awards__pause:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.bgrein-awards__pause[hidden] { display: none; }
.bgrein-awards__pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bgrein-awards__icon-play { display: none; fill: currentColor; stroke-width: 1.5; }
.bgrein-awards.is-paused .bgrein-awards__icon-pause { display: none; }
.bgrein-awards.is-paused .bgrein-awards__icon-play { display: block; }

/* Set ist dupliziert → -50% = genau eine Set-Breite (nahtlos). */
@keyframes bgrein-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.bgrein-awards__item {
	flex: 0 0 auto;
	/* Gleichmäßiger Abstand inkl. letztem Element → saubere Schleife
	   (statt flex gap, das am Naht-Punkt zu Versatz führen würde). */
	margin-right: var(--spacing-2xl);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.80;
	text-decoration: none;
	transition: opacity var(--transition-base);
	/* Links müssen klickbar bleiben: kein Overlay davor, eigener
	   Stacking-Kontext über der Viewport-Maske. */
	position: relative;
	z-index: 1;
	pointer-events: auto;
}

.bgrein-awards__item:hover {
	opacity: 1;
}

.bgrein-awards__logo {
	/* Fluide Logo-Höhe: ~80px (mobil) bis ~120px (Desktop). */
	/* Einheitliche Höhe, aber Breitformate (eEducation-Schriftzug)
	   begrenzen, damit sie nicht das ganze Band dominieren. */
	height: clamp(5rem, 3rem + 4vw, 7.5rem);
	width: auto;
	max-width: clamp(9rem, 6rem + 8vw, 14rem);
	object-fit: contain;
	filter: grayscale(20%);
	transition: filter var(--transition-base);
}

.bgrein-awards__item:hover .bgrein-awards__logo {
	filter: grayscale(0%);
}

/* Mobile: engerer Abstand zwischen den Logos. */
@media (max-width: 768px) {
	.bgrein-awards__item { margin-right: var(--spacing-lg); }
}

/* Reduced Motion: Band läuft bewusst weiter (sehr langsam, anhaltbar –
   siehe assets/js/auszeichnungen.js). */

/* ── Footer ─────────────────────────────────────────────────────── */

.site-footer,
footer.site-footer {
	background: white;
	color: white;
	padding: var(--spacing-2xl) var(--content-padding-x) var(--spacing-lg);
}

.bgrein-footer-grid {
	max-width: var(--content-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-2xl);
	margin-bottom: var(--spacing-lg);
}

.bgrein-footer-col h3 {
	font-size: var(--font-size-base);
	margin-bottom: var(--spacing-md);
	font-weight: normal;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: white;
}

.bgrein-footer-col p,
.bgrein-footer-col a {
	color: var(--color-footer-text);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 2;
	display: block;
}

.bgrein-footer-col a:hover {
	color: white;
}

.bgrein-footer-bottom {
	max-width: var(--content-max-width);
	margin: 0 auto;
	text-align: center;
	padding-top: var(--spacing-lg);
	border-top: 1px solid rgba(255,255,255,0.10);
	color: rgba(255,255,255,0.60);
	font-size: var(--font-size-sm);
}

/* ── Responsive: Sektionen ──────────────────────────────────────── */
@media (max-width: 1024px) {
	.bgrein-activity-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Unter 768px: Direktion + Termine untereinander, Termine zuerst. */
@media (max-width: 768px) {
	.bgrein-hero__overlay {
		padding: var(--spacing-lg) var(--spacing-xl);
	}

	.bgrein-hero__title {
		font-size: var(--font-size-3xl);
	}

	.bgrein-activity-grid {
		grid-template-columns: 1fr;
	}

	.bgrein-footer-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.bgrein-home-info {
		padding: var(--spacing-xl) var(--spacing-sm);
	}

	.bgrein-home-info__inner {
		flex-direction: column;
	}

	.bgrein-home-info .bgrein-direktion,
	.bgrein-home-info .bgrein-termine {
		flex-basis: 100%;
	}

	/* Mobile: Direktionsmeldung vor den Terminen (= DOM-Reihenfolge,
	   Desktop unverändert: Direktion 60 % links, Termine 40 % rechts). */

	.bgrein-direktion,
	.bgrein-termine {
		padding: var(--spacing-lg);
	}

	.bgrein-meldung-archive,
	.bgrein-meldung-single {
		padding: var(--spacing-xl) var(--spacing-sm);
	}

	.bgrein-meldung-article__title {
		font-size: var(--font-size-3xl);
	}
}

/* Hauptbereich der Startseite (Barrierefreiheit, ab 1.7.0) */
.bgr-start { display: block; }
.bgr-start:focus { outline: none; }