/*
Theme Name:   Sarré Child
Description:  Sarré-specific child theme. Presentation only — global header/footer, visual templates and styling of dynamic data via Divi 5 Dynamic Content bindings. Domain data lives in the `sarre-core` plugin, never in this theme. See docs/architecture.md.
Author:       Sarré Musikprojekte
Template:     Divi
Version:      0.1.1
Text Domain:  sarre-child

Milestone 1 note: this is a skeleton only. Divi 5 (the "Template" parent
above) is not installed in this environment yet — see MILESTONE_1_PLAN.md,
task 6. WordPress will report this theme as broken/inactive until the
Divi parent theme is present in wp-content/themes/divi. No functionality
depends on this theme being active yet.

Milestone 2, M2.4 Schritt 2 (2026-08-24): component CSS added below for
the M2.3 Produktion-single shortcode output (docs/m2-divi-reference.md,
"CSS class hooks"). This is the part of M2.4's styling that this session
CAN reliably prepare in code without Divi Builder/browser access, per the
owner's explicit request to minimize her manual effort — the shortcodes
render plain HTML with these classes into a Divi Code module, and Divi's
own module-level design settings cannot reach inside that raw HTML, so
this stylesheet (not the Divi Builder) is the correct place for it.
*/

/* ==========================================================================
   Sarré design tokens (CSS custom properties)

   Mirrors docs/design-system.md -> "Design Variables (Divi 5)" 1:1.
   Colors are FINAL, confirmed by the owner 2026-08-24 (M2.4 mockup
   handoff) - update here AND the matching Divi 5 Design Variables
   together if they ever change. Fonts remain PROVISIONAL (unchanged from
   Schritt 1) - no final typeface supplied yet. Every rule below reads
   from a variable, never a hardcoded hex/font, so a swap here needs no
   rule-by-rule rework.
   ========================================================================== */
:root {
	--sarre-color-primary: #00B6C8;    /* Color / Primary / Sarré-Türkis - final */
	--sarre-color-accent: #E91E63;     /* Color / Accent / Pink - final */
	--sarre-color-anthracite: #242424; /* Color / Base / Anthrazit (headings) - final */
	--sarre-color-body-text: #555555;  /* Color / Base / Fließtext (body copy) - final, new 2026-08-24 */
	--sarre-color-light: #F5F5F3;      /* Color / Base / Hellgrau - final */
	--sarre-color-white: #FFFFFF;      /* Color / Base / Weiß - final */
	--sarre-color-link: #00B6C8;       /* Color / Link / Sarré-Türkis - final, new 2026-08-24 (same value as Primary, own token) */

	--sarre-font-heading: 'Poppins', sans-serif; /* Font / Heading - provisional */
	--sarre-font-body: 'Inter', sans-serif;      /* Font / Body - provisional */

	--sarre-space-xs: 0.5rem;
	--sarre-space-sm: 1rem;
	--sarre-space-md: 1.5rem;
	--sarre-space-lg: 2.5rem;

	--sarre-radius: 8px;

	--sarre-content-max-width: 1200px; /* M2.4 Abschnitt B-I wrapper, added 2026-08-28 */

	/* Visueller Feinschliff Erwachsenenworkshop-Landingpage (2026-09-30):
	   eigener, etwas schmalerer Inhaltsbreiten-Wert für die 8 Content-
	   Abschnitte dieser Seite (Worum es geht, Kernbotschaften, Vier
	   Bereiche, Malte-Highlight, Unser Team, Aktueller Workshop, Auf einen
	   Blick, Anmeldung) - owner-Vorgabe "ca. 900-1000px, wie /workshops/ und
	   /ferien-musical-workshops/". Bewusst NICHT --sarre-content-max-width
	   (1200px) wiederverwendet, da diese Variable sitewide an vielen
	   anderen Stellen bereits verwendet wird - ein eigener, klar benannter
	   Wert vermeidet jede Rückwirkung auf andere Seiten/Komponenten. */
	--sarre-erwachsenenworkshop-content-width: 960px;
}

/* ==========================================================================
   Shared list/card layout
   One card grid pattern reused by every M2.3 shortcode list, per
   docs/design-system.md's "reusable card system" / "controlled color
   blocks" principles and the Responsive rule (one component, no
   duplicated mobile markup - the grid itself reflows).
   ========================================================================== */
.sarre-credits-list,
.sarre-event-list,
.sarre-press-list,
.sarre-testimonial-list,
.sarre-news-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--sarre-space-md);
	margin: 0 0 var(--sarre-space-lg);
	padding: 0;
	list-style: none;
	font-family: var(--sarre-font-body);
}

/* Empty-state message shared by Credits/Events/Press.
   Revised 2026-08-28: a filled gray box read as an error/warning state:
   a quiet dashed-border placeholder communicates "nothing here yet" more
   intentionally on a premium arts-org site. */
.sarre-empty-state {
	font-family: var(--sarre-font-body);
	font-style: italic;
	color: var(--sarre-color-body-text);
	background: transparent;
	border: 1px dashed rgba(36, 36, 36, 0.2);
	border-radius: var(--sarre-radius);
	padding: var(--sarre-space-md);
	margin: 0 0 var(--sarre-space-lg);
	text-align: center;
}

/* Shared focus-visible treatment (2026-08-28) — every interactive element
   below relies on this one rule rather than repeating outline styles. */
a:focus-visible {
	outline: 2px solid var(--sarre-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Shared card hover lift (2026-08-28) — applied to every card type below
   via this one class, so "hover state" is one visual language project-wide
   rather than a per-component reinvention. */
.sarre-person-card,
.sarre-press-card,
.sarre-news-item,
.sarre-production-card,
.sarre-gallery-grid__item {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sarre-person-card:hover,
.sarre-press-card:hover,
.sarre-news-item:hover,
.sarre-production-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(36, 36, 36, 0.14);
}

/* --------------------------------------------------------------------------
   Team Card (Künstlerisches Team), redesigned 2026-09-01 (owner
   finalization pass): rectangular portrait image instead of a round photo,
   no white card surface/shadow/padding — a quiet grid instead of a
   "Mitarbeiterverzeichnis" card look, matching the design reference's more
   theatrical/editorial treatment. Same markup as before
   (sarre_shortcode_production_credits() unchanged) — role above name is
   done via flexbox `order` on the existing spans, not a markup change.
   -------------------------------------------------------------------------- */
.sarre-person-card {
	background: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.sarre-person-card:hover {
	transform: none;
	box-shadow: none;
}
.sarre-person-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
/* Photo / initials placeholder (2026-08-28, shape revised 2026-09-01) —
   reads the Person's existing native Featured Image; falls back to a
   colored initials placeholder so the layout stays consistent even without
   a photo. Rectangular portrait ratio (not circular) per the design
   reference; `order: 1` keeps it first regardless of the role/name reorder
   below. */
.sarre-person-card__photo {
	order: 1;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 2px;
	overflow: hidden;
	margin: 0 0 var(--sarre-space-sm);
}
.sarre-person-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-person-card__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sarre-color-primary);
}
.sarre-person-card__initials {
	font-family: var(--sarre-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--sarre-color-white);
}
/* Role/function above the name, small and pink (owner's explicit layout
   request). Still shows every person_rolle term assigned, unfiltered,
   exactly as before (e.g. "Gründerin, Musikalische Leitung") — data/logic
   unchanged, only position (above, not below) and color (Pink, not
   Türkis) moved. */
.sarre-person-card__roles {
	order: 2;
	display: block;
	margin: 0 0 0.2rem;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--sarre-color-accent);
}
.sarre-person-card__name {
	order: 3;
	display: block;
	font-family: var(--sarre-font-heading);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--sarre-color-anthracite);
	transition: color 0.2s ease;
}
.sarre-person-card__link:hover .sarre-person-card__name {
	color: var(--sarre-color-primary);
}
/* `.sarre-credits-list` column count, scoped to just this one list (a
   plain single-class selector placed after the shared list rule above so
   it wins by source order at equal specificity — same technique already
   used for `.sarre-event-list`). Deliberately `auto-fill` (not
   `auto-fit`): with fewer people than the column cap, the real cards keep
   their normal width and sit left-aligned — empty tracks simply stay
   blank rather than stretching to fill the row, per the owner's explicit
   "nicht künstlich über volle Breite verteilen" requirement (e.g. exactly
   2 team members). */
.sarre-credits-list {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--sarre-space-md) var(--sarre-space-sm);
}
@media (min-width: 560px) {
	.sarre-credits-list {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}
@media (min-width: 900px) {
	.sarre-credits-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Event Card (Termine) — quiet, editorial list treatment (revised
   2026-08-31, owner design pass: the earlier card/badge treatment below
   read as too "shop/dashboard"-like and visually competed with the Hero).

   .sarre-event-list is deliberately repeated here with a plain single-class
   selector so it wins over the shared card-grid rule above by source order
   (both are specificity 0,0,1,0) for THIS list only — Credits/Press/
   Testimonials/News keep the untouched shared card-grid treatment. No card
   surface, no shadow, no large radius, no colored date badge, no hover
   movement — a calm list of fine hairline-divided rows instead, per the
   owner's explicit design brief. Same markup/data as before (M2.3's
   sarre_shortcode_production_events()) — CSS-only change.
   -------------------------------------------------------------------------- */
.sarre-event-list {
	display: block;
	margin: 0 0 var(--sarre-space-lg);
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-event-card {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sarre-space-sm) var(--sarre-space-md);
	padding: var(--sarre-space-sm) 0;
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-event-card__date {
	display: flex;
	align-items: baseline;
	gap: var(--sarre-space-xs);
	flex-shrink: 0;
	min-width: 9rem;
}
.sarre-event-card__date-badge {
	display: flex;
	align-items: baseline;
	gap: 0.3em;
}
.sarre-event-card__day {
	font-family: var(--sarre-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sarre-color-primary); /* small, purely typographic Türkis accent - no filled badge box */
	line-height: 1;
}
.sarre-event-card__month {
	font-family: var(--sarre-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sarre-color-anthracite);
}
.sarre-event-card__date-text {
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	color: var(--sarre-color-body-text);
}
.sarre-event-card__body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sarre-space-sm) var(--sarre-space-md);
	flex-grow: 1;
	min-width: 0;
}
.sarre-event-card__venue {
	font-family: var(--sarre-font-body);
	font-weight: 500;
	color: var(--sarre-color-anthracite);
}
.sarre-event-card__ticket-link {
	display: inline-block;
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--sarre-color-accent);
	color: var(--sarre-color-accent);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.8125rem;
	text-decoration: none;
	border-radius: 3px;
	padding: 0.3rem 0.75rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sarre-event-card__ticket-link:hover {
	background-color: var(--sarre-color-accent);
	color: var(--sarre-color-white);
}

/* --------------------------------------------------------------------------
   General ticket-overview CTA + layout row (Abschnitt B, "Nächste
   Vorstellungen") — added 2026-08-31, iterated through three owner design
   passes the same day: (1) inline text link, (2) compact turquoise bar,
   (3) THIS version — a full-height turquoise info panel as the row's
   second column, matching the design reference's two-column layout.
   This is the approved final version.

   `.sarre-production-events-row` is a NEW, layout-only flex wrapper (see
   shortcodes.php) placed around the UNCHANGED `.sarre-event-list` output
   (list left/main, ~62.5%) and this panel (right, ~37.5%). It does not
   redeclare or touch any `.sarre-event-card*` rule — the one nested
   override just below only resets the list's own bottom margin and sets
   its share of the row's width; the rows/date/venue/ticket-button styling
   itself is untouched.

   `align-items: stretch` is deliberate here (unlike the compact-bar
   iteration before it): the panel is meant to be a full second column
   reaching the list's height, per the owner's explicit request, not a
   small floating element. Its OWN content (icon/heading/text/button)
   stays a compact, vertically centered group via `justify-content:
   center` on the panel itself, rather than stretched across the full
   height — per the owner's explicit "nicht künstlich auseinandergezogen"
   requirement.

   Markup produced by sarre_core_render_production_ticket_cta()
   (shortcodes.php): icon (inline SVG, decorative/aria-hidden) + heading +
   short description + a light button, all fixed UI text/markup — no ACF
   field, no new ticket logic, same `allgemeiner_ticketlink` data source.

   Below 700px (existing breakpoint, kept as-is per owner instruction) the
   row stacks; both columns take full width automatically via the row's
   own `align-items: stretch` (cross-axis becomes width once the row's
   main axis turns vertical) — no extra width rule needed.
   -------------------------------------------------------------------------- */
.sarre-production-events-row {
	display: flex;
	align-items: stretch;
	gap: var(--sarre-space-md);
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-production-events-row > .sarre-event-list,
.sarre-production-events-row > .sarre-empty-state {
	flex: 5 1 0;
	min-width: 0;
	margin-bottom: 0;
}
.sarre-production-ticket-cta {
	flex: 3 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--sarre-space-xs);
	background: var(--sarre-color-primary);
	border-radius: 4px;
	padding: var(--sarre-space-lg) var(--sarre-space-md);
	position: relative;
	overflow: hidden;
}
/* Very subtle decorative accent (owner-approved, optional) - a large,
   low-opacity soft circle bleeding off the top-right corner. CSS only, no
   new image asset, kept faint enough not to compete with the content. */
.sarre-production-ticket-cta::before {
	content: '';
	position: absolute;
	top: -3rem;
	right: -3rem;
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}
.sarre-production-ticket-cta__icon {
	position: relative;
	color: var(--sarre-color-white);
	margin-bottom: var(--sarre-space-xs);
}
.sarre-production-ticket-cta__heading {
	position: relative;
	margin: 0;
	font-family: var(--sarre-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--sarre-color-white);
}
.sarre-production-ticket-cta__text {
	position: relative;
	margin: 0 0 var(--sarre-space-sm);
	max-width: 32ch;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}
.sarre-production-ticket-cta__button {
	position: relative;
	display: inline-block;
	background: var(--sarre-color-white);
	color: var(--sarre-color-accent);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 4px;
	padding: 0.65rem 1.25rem;
	transition: background-color 0.2s ease;
}
.sarre-production-ticket-cta__button:hover {
	background: var(--sarre-color-light);
}
@media (max-width: 700px) {
	.sarre-production-events-row {
		flex-direction: column;
	}
}
.sarre-production-ticket-cta__link:hover {
	filter: brightness(0.92); /* color-only feedback, deliberately no movement/shadow */
}
@media (max-width: 700px) {
	.sarre-production-events-row {
		flex-direction: column;
	}
	.sarre-production-ticket-cta {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Press Card (Presse, M2.3)
   -------------------------------------------------------------------------- */
.sarre-press-card {
	background: var(--sarre-color-white);
	border-radius: var(--sarre-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(43, 46, 51, 0.12);
	display: flex;
	flex-direction: column;
}
.sarre-press-card__image {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}
/* Neutral placeholder background for Press items with no image at all
   (M2.3's documented third fallback tier - see docs/m2-divi-reference.md). */
.sarre-press-card--no-image {
	background: var(--sarre-color-light);
}
.sarre-press-card--no-image::before {
	content: '';
	display: block;
	width: 100%;
	height: 140px;
	background: var(--sarre-color-light);
}
.sarre-press-card__title {
	display: block;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	color: var(--sarre-color-anthracite);
	padding: var(--sarre-space-sm) var(--sarre-space-sm) 0;
}
.sarre-press-card__medium {
	display: block;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sarre-color-primary);
	padding: 0.25rem var(--sarre-space-sm) 0;
}
.sarre-press-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: var(--sarre-space-xs) var(--sarre-space-sm) var(--sarre-space-sm);
	color: var(--sarre-color-accent);
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.2s ease;
}
.sarre-press-card__link::after {
	content: '\2192'; /* → */
	transition: transform 0.2s ease;
}
.sarre-press-card__link:hover {
	gap: 0.55em;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Testimonial (M2.3)
   -------------------------------------------------------------------------- */
.sarre-testimonial {
	position: relative;
	background: var(--sarre-color-light);
	border-radius: var(--sarre-radius);
	padding: var(--sarre-space-lg) var(--sarre-space-md) var(--sarre-space-md);
}
/* Large decorative quotation mark (2026-08-28) - CSS-only accent, no markup
   change, gives Pressestimmen a more editorial/premium feel. */
.sarre-testimonial::before {
	content: '\201C'; /* " */
	position: absolute;
	top: 0.25rem;
	left: var(--sarre-space-md);
	font-family: var(--sarre-font-heading);
	font-size: 3rem;
	line-height: 1;
	color: var(--sarre-color-primary);
	opacity: 0.35;
}
.sarre-testimonial__quote {
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-heading);
	font-size: 1.0625rem;
	font-style: italic;
	color: var(--sarre-color-anthracite);
}
.sarre-testimonial__author {
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	font-style: normal;
	color: var(--sarre-color-primary);
}

/* --------------------------------------------------------------------------
   News item (Aktuelles, M2.3)
   -------------------------------------------------------------------------- */
.sarre-news-item {
	background: var(--sarre-color-white);
	border-radius: var(--sarre-radius);
	padding: var(--sarre-space-sm);
	box-shadow: 0 1px 3px rgba(43, 46, 51, 0.12);
}
.sarre-news-item__link {
	text-decoration: none;
	color: inherit;
	display: block;
}
.sarre-news-item__title {
	display: block;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	color: var(--sarre-color-anthracite);
	transition: color 0.2s ease;
}
.sarre-news-item__link:hover .sarre-news-item__title {
	color: var(--sarre-color-primary);
}
.sarre-news-item__date {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--sarre-color-primary);
}

/* --------------------------------------------------------------------------
   Production-Single-scoped redesign of Pressestimmen / Presse & Aktuelles
   (2026-09-02, owner "Zukunfts-Check" for the still-empty optional
   sections). Hänsel & Gretel has no Press/Testimonial/News content yet, so
   these sections don't render there today - but the owner asked for them
   to already match the finalized editorial Production-Single look before
   any content is assigned. The base `.sarre-press-card` / `.sarre-testimonial`
   / `.sarre-news-item` rules directly above are left completely UNCHANGED
   (still M2.3's original generic "reusable card system" look) - this block
   only OVERRIDES them, scoped with the `.sarre-production-body` ancestor
   selector (same technique already used elsewhere in this file), so it
   applies exclusively inside [sarre_production_body]'s own output and
   never affects any future general Presse/Aktuelles archive or homepage
   Testimonials listing that might reuse these same base classes/shortcodes
   outside the Production Single (see docs/content-model.md - "own
   dedicated Presse listing area", not yet built). Selection/sort/data
   logic of all three underlying shortcodes is completely untouched - this
   is a CSS-only visual pass, no markup change.
   -------------------------------------------------------------------------- */

/* Pressestimmen - quiet, editorial theatre look instead of a plain grey
   box: a subtle turquoise-tinted flat surface (no shadow, minimal radius),
   a bigger serif pull-quote (the same Georgia token already used for this
   page's own big headings) clearly in the foreground, and a smaller, more
   restrained author/source line. */
.sarre-production-body .sarre-testimonial {
	background: rgba(0, 182, 200, 0.07);
	border-radius: 2px;
	box-shadow: none;
}
.sarre-production-body .sarre-testimonial::before {
	opacity: 0.45;
}
.sarre-production-body .sarre-testimonial__quote {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.3125rem;
	line-height: 1.5;
	color: var(--sarre-color-anthracite);
}
.sarre-production-body .sarre-testimonial__author {
	font-size: 0.8125rem;
	color: var(--sarre-color-body-text);
}

/* Pressestimmen grid fix (2026-10-07). Ursache: die geteilte Basisregel
   `.sarre-testimonial-list { grid-template-columns: repeat(auto-fill,
   minmax(220px, 1fr)) }` legt im 1200px-Wrapper ~4 Spuren à ~270px an;
   `auto-fill` behält leere Spuren, daher belegen 2 Stimmen nur die ersten
   zwei schmalen Spalten links. Zusätzlich streckt das Grid-Default
   `align-items: stretch` kurze Karten auf die Höhe der längsten.
   Nur für Production Singles überschrieben - die Basisregel (auch von
   [sarre_homepage_testimonials] genutzt) bleibt unverändert. */
.sarre-production-body .sarre-testimonial-list {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--sarre-space-md);
}
.sarre-production-body .sarre-testimonial__quote {
	overflow-wrap: break-word;
}
@media (min-width: 900px) {
	.sarre-production-body .sarre-testimonial-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--sarre-space-lg);
	}
	/* Einzelne Stimme: volle Zeile statt halber Spalte, Zeilenlänge begrenzt. */
	.sarre-production-body .sarre-testimonial:only-child {
		grid-column: 1 / -1;
		max-width: 52rem;
	}
}

/* Presse - editorial teaser instead of a shadowed dashboard card: flat
   surface, no rounding on the card itself, a slightly taller image and
   quieter internal spacing (no more card-interior padding, since there is
   no card box left to pad). Medium/category and link keep their existing
   Pink/Türkis accent-only colors and markup completely unchanged - only
   the surrounding "box" look is removed. */
.sarre-production-body .sarre-press-card {
	background: none;
	border-radius: 0;
	box-shadow: none;
}
.sarre-production-body .sarre-press-card__image {
	height: 160px;
	border-radius: 2px;
}
.sarre-production-body .sarre-press-card--no-image::before {
	height: 160px;
	border-radius: 2px;
}
.sarre-production-body .sarre-press-card__title {
	padding: var(--sarre-space-sm) 0 0;
}
.sarre-production-body .sarre-press-card__medium {
	padding: 0.25rem 0 0;
}
.sarre-production-body .sarre-press-card__link {
	margin: var(--sarre-space-xs) 0 0;
}

/* Aktuelles (News) - same flat, editorial treatment as Presse above, so
   the combined "Presse & Aktuelles" section reads as one consistent
   style even when both card types appear together. */
.sarre-production-body .sarre-news-item {
	background: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.sarre-production-body .sarre-news-item__date {
	margin-top: 0.35rem;
}

/* ==========================================================================
   Produktion-Single wrapper ([sarre_production_body], M2.4 Abschnitt B-I,
   added 2026-08-28)

   Owner decision: everything below the Divi-built Hero is one dynamic,
   code-styled component so only one Code module is needed in Divi. One
   fluid layout across breakpoints throughout, per docs/design-system.md's
   Responsive rule - no separate mobile markup anywhere below.
   ========================================================================== */
.sarre-production-body {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: var(--sarre-space-lg) var(--sarre-space-sm);
}

.sarre-production-body__section {
	margin-bottom: var(--sarre-space-lg);
}
.sarre-production-body__section:last-child {
	margin-bottom: 0;
}
/* Alternating light-panel background RETIRED 2026-09-01 (owner
   finalization pass) — it read as "Dashboard/Card" rather than editorial,
   and was specifically what wrapped "Über die Produktion" in a large
   rounded gray box. Replaced by one consistent hairline divider between
   ALL sections below (not just alternating ones), for a calmer, more open
   editorial rhythm. The PHP-side alternating `--alt` class
   (sarre_core_production_body_section()'s $index parameter) is left
   completely unchanged — it simply has no strong visual effect of its own
   any more, which keeps this a CSS-only fix. The adjacent-sibling selector
   means the very first section (Nächste Vorstellungen) never gets a
   divider/extra spacing, so its own approved look is untouched. */
.sarre-production-body__section--alt .sarre-production-body__section-inner {
	/* Intentionally empty — see note above. */
}
.sarre-production-body__section + .sarre-production-body__section {
	padding-top: var(--sarre-space-lg);
	border-top: 1px solid rgba(36, 36, 36, 0.1);
}

/* Section headings switched to serif 2026-09-01 (owner finalization pass,
   Typografie point 7: "große redaktionelle H2 -> Georgia, serif"),
   matching the treatment already used for the About section's own content
   heading. Türkis underline accent kept — it's a brand accent, not a
   "card" element. Production-Single-scoped selector only; no global/Divi
   typography touched. */
.sarre-production-body__heading {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.875rem;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
	margin: 0 0 var(--sarre-space-md);
	padding-bottom: var(--sarre-space-xs);
	border-bottom: 3px solid var(--sarre-color-primary);
	display: inline-block;
}

/* Second-level heading (2026-08-28) - used only inside "Presse & Aktuelles"
   when both Presse and Aktuelles have content simultaneously, to tell the
   two card types apart under one combined section heading. */
.sarre-production-body__subsection {
	margin-bottom: var(--sarre-space-md);
}
.sarre-production-body__subsection:last-child {
	margin-bottom: 0;
}
.sarre-production-body__subheading {
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sarre-color-primary);
	margin: 0 0 var(--sarre-space-sm);
}

/* --------------------------------------------------------------------------
   Abschnitt C - "Veranstaltungsort & Anreise" (owner-requested, 2026-09-02;
   redesigned same day - the first pass read as "one long turquoise info
   box", this replaces it), filling the position deliberately left open
   since 2026-08-28 (see shortcodes.php's file-level doc comment and
   docs/M2_4_SCHRITT_2_PRODUKTION_SINGLE.md). No new data source - reads
   only the existing Spielstätte fields (Titel/address/maps_link/
   public_transport/parking/accessibility/website), resolved from the
   Production's own upcoming Events via sarre_get_venues_for_production()
   (relationships.php).

   Redesign goal: compact and editorial, not a long filled box. Per Venue:
   name + address stay always visible; public_transport/parking/
   accessibility/website move into a closed-by-default native
   `<details>`/`<summary>` accordion ("Anreise & weitere Infos") built in
   shortcodes.php - no JS anywhere here, disclosure state/keyboard/
   screen-reader behaviour is entirely the browser's native handling of
   `<details>`. The "static map" (`.sarre-venue-block__map`) is a CSS/
   inline-SVG-only decorative grid + pin, NOT a real map - no iframe, no
   Maps JS API, no external request - whose whole area is a link to the
   existing `maps_link`, exactly like the explicit "Route planen" button
   next to it.

   Layout (`.sarre-venue-block`, one per distinct Venue): mobile is plain
   source order with no grid at all - name, address, map, actions, which
   already IS the requested mobile order ("Standortdarstellung unter Name/
   Adresse, danach Buttons/Accordion"), so no separate mobile markup is
   needed. At `min-width: 701px` (this project's established stacking
   breakpoint, same one About/Events-row already use) the block becomes a
   CSS Grid with named areas remapping the same four elements into a
   ~40/60 two-column layout - text/actions left, map spanning the full
   right column - without touching source order. A Venue with no
   `maps_link` (`--no-map` modifier) falls back to a single text column
   even on desktop, rather than leaving an empty 60% blank area.

   Multiple Venues (owner's explicit "keine Beschränkung nur auf den
   nächsten Veranstaltungsort") sit inside the SAME section, each a
   `.sarre-venue-block`, separated only by a quiet hairline
   (`.sarre-venue-block + .sarre-venue-block`) - never repeated full-width
   Sections. No card surface/shadow/heavy radius anywhere in this block by
   design ("editorial, kein Dashboard/Card-Look, viel Weißraum") - Türkis/
   Pink appear only as small accents (eyebrow, map grid tint, pin, accent
   underline on the primary button), matching the rest of this stylesheet's
   restrained accent use. */
.sarre-production-venue-info__eyebrow {
	display: block;
	margin: 0 0 var(--sarre-space-md);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sarre-color-accent);
}
.sarre-venue-block {
	padding: var(--sarre-space-md) 0;
}
.sarre-venue-block:first-child {
	padding-top: 0;
}
.sarre-venue-block + .sarre-venue-block {
	border-top: 1px solid rgba(36, 36, 36, 0.1);
}
.sarre-venue-block__name {
	margin: 0 0 0.35rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--sarre-color-anthracite);
}
.sarre-venue-block__address {
	margin: 0 0 var(--sarre-space-md);
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}

/* Static "map": abstract turquoise grid motif (CSS background, no image
   asset) + a centered filled pink pin (inline SVG, see shortcodes.php) in
   a soft radial glow, and the Venue name repeated small in a corner chip
   for orientation when more than one block is on the page. The whole
   anchor is the click target - deliberately no separate visible "open
   map" label, since the pin + grid motif itself is meant to read
   immediately as "this is the venue / click for directions" without
   needing a real embedded map. */
.sarre-venue-block__map {
	position: relative;
	display: block;
	min-height: 200px;
	margin: 0 0 var(--sarre-space-md);
	border-radius: 2px;
	overflow: hidden;
	text-decoration: none;
	background-color: var(--sarre-color-light);
	background-image:
		repeating-linear-gradient(0deg, rgba(0, 182, 200, 0.16) 0, rgba(0, 182, 200, 0.16) 1px, transparent 1px, transparent 34px),
		repeating-linear-gradient(90deg, rgba(0, 182, 200, 0.16) 0, rgba(0, 182, 200, 0.16) 1px, transparent 1px, transparent 34px);
	transition: box-shadow 0.2s ease;
}
.sarre-venue-block__map:hover,
.sarre-venue-block__map:focus-visible {
	box-shadow: inset 0 0 0 1px rgba(0, 182, 200, 0.4);
}
.sarre-venue-block__map-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -58%);
	display: block;
	width: 30px;
	height: 30px;
	color: var(--sarre-color-accent);
	transition: transform 0.2s ease;
}
.sarre-venue-block__map-pin::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58px;
	height: 58px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(233, 30, 99, 0.16) 0%, rgba(233, 30, 99, 0) 72%);
	z-index: -1;
}
.sarre-venue-block__map:hover .sarre-venue-block__map-pin,
.sarre-venue-block__map:focus-visible .sarre-venue-block__map-pin {
	transform: translate(-50%, -62%);
}
.sarre-venue-block__map-pin-icon {
	display: block;
	width: 100%;
	height: 100%;
}
.sarre-venue-block__map-name {
	position: absolute;
	left: var(--sarre-space-sm);
	bottom: var(--sarre-space-sm);
	padding: 0.25rem 0.6rem;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 2px;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sarre-color-anthracite);
}

.sarre-venue-block__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sarre-space-sm) var(--sarre-space-md);
}
/* "Route planen" - the section's one primary action, now a small solid
   Pink button (distinct from the outlined Pink ticket-link style used in
   Termine above it) so it clearly reads as the primary action next to the
   accordion's plainer text-link trigger. Same brightness-on-hover
   technique already used for `.sarre-production-ticket-cta__link` above,
   not a new hover language. */
.sarre-venue-block__route-button {
	display: inline-block;
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.8125rem;
	text-decoration: none;
	border-radius: 3px;
	padding: 0.55rem 1rem;
	transition: filter 0.2s ease;
}
.sarre-venue-block__route-button:hover {
	filter: brightness(0.92);
}

/* "Anreise & weitere Infos" - native disclosure widget, closed by
   default. Default marker/triangle removed and replaced by a small CSS
   chevron (`::after`) that rotates on `[open]`, so no icon font/extra SVG
   is needed for it either. Deliberately styled as a quiet text trigger
   (Türkis, no button surface) - the visually "secondary" action next to
   the solid Pink primary button. */
.sarre-venue-block__accordion {
	flex-basis: 100%;
}
.sarre-venue-block__accordion-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	list-style: none;
	cursor: pointer;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--sarre-color-primary);
}
.sarre-venue-block__accordion-summary::-webkit-details-marker {
	display: none;
}
.sarre-venue-block__accordion-summary:hover {
	text-decoration: underline;
}
.sarre-venue-block__accordion-summary::after {
	content: '';
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.sarre-venue-block__accordion[open] > .sarre-venue-block__accordion-summary::after {
	transform: rotate(-135deg);
}
.sarre-venue-block__accordion-content {
	margin-top: var(--sarre-space-sm);
	max-width: 44ch;
}
.sarre-venue-block__accordion-row {
	margin: 0 0 var(--sarre-space-sm);
}
.sarre-venue-block__accordion-row:last-child {
	margin-bottom: 0;
}
.sarre-venue-block__accordion-label {
	display: block;
	margin: 0 0 0.2rem;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sarre-color-body-text);
}
.sarre-venue-block__accordion-text {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}
.sarre-venue-block__accordion-link {
	color: var(--sarre-color-accent);
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}
.sarre-venue-block__accordion-link:hover {
	text-decoration: underline;
}

/* Desktop 40/60 two-column layout - same `min-width: 701px` breakpoint
   already used by the About section below. Mobile needs no rules here at
   all (see the block comment above): plain source order already matches
   the requested mobile order. */
@media (min-width: 701px) {
	.sarre-venue-block {
		display: grid;
		grid-template-columns: 2fr 3fr;
		grid-template-areas:
			"name    map"
			"address map"
			"actions map";
		column-gap: var(--sarre-space-lg);
		row-gap: var(--sarre-space-sm);
		align-items: start;
	}
	.sarre-venue-block__name {
		grid-area: name;
		margin-bottom: 0;
	}
	.sarre-venue-block__address {
		grid-area: address;
		margin-bottom: 0;
	}
	.sarre-venue-block__map {
		grid-area: map;
		height: 100%;
		min-height: 240px;
		margin-bottom: 0;
	}
	.sarre-venue-block__actions {
		grid-area: actions;
		align-self: start;
	}
	.sarre-venue-block--no-map {
		grid-template-columns: 1fr;
		grid-template-areas:
			"name"
			"address"
			"actions";
	}
}

/* Abschnitt D - Über die Produktion (native post content) */
.sarre-production-body__content {
	font-family: var(--sarre-font-body);
	color: var(--sarre-color-body-text);
	line-height: 1.7;
	max-width: 70ch;
}
.sarre-production-body__content p {
	margin: 0 0 var(--sarre-space-sm);
}

/* --------------------------------------------------------------------------
   Abschnitt D - "Über die Produktion" two-column About layout, redesigned
   2026-08-31 (owner design pass, matching the design reference): image
   left, eyebrow + content right, ~50/50 on desktop. Stacks below 700px
   (image first, via source order - no extra rule needed) using the same
   breakpoint already established for Abschnitt B, in the shared media
   query further below. `.sarre-production-body__content` above (the
   post-content prose itself - font, color, line-height, paragraph spacing)
   is untouched; this block only adds the surrounding two-column shell and
   the eyebrow/content-heading treatment.
   -------------------------------------------------------------------------- */
.sarre-production-about {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0 0 var(--sarre-space-lg);
	background: var(--sarre-color-white);
	overflow: hidden;
}
.sarre-production-about__media {
	position: relative; /* KI-Kennzeichnung (2026-09-29): Ankerpunkt für .sarre-ai-label, keine visuelle Änderung. */
	flex: 1 1 0;
	min-width: 0;
}
.sarre-production-about__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}
.sarre-production-about__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--sarre-space-lg);
}
.sarre-production-about__eyebrow {
	display: block;
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sarre-color-accent);
}
/* Content heading - typed by the owner as the first line of the Produktion's
   own post content (e.g. "Ein Märchen voller Musik, Mut und Zusammenhalt"),
   not a separate field. Serif typography test (2026-08-31), deliberately
   scoped to ONLY this heading, inside the About content column - no other
   heading anywhere on the site is affected. Body text, the eyebrow above,
   and any links inside this content stay on the existing Sans tokens
   (inherited from `.sarre-production-body__content` / `__eyebrow` above),
   unchanged. */
.sarre-production-about__content h2 {
	margin: 0 0 var(--sarre-space-sm);
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.875rem;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
}
/* Stacks below 700px, image first via source order - own dedicated media
   query so the existing Abschnitt-B breakpoint blocks above are not
   touched. */
@media (max-width: 700px) {
	.sarre-production-about {
		flex-direction: column;
	}
	.sarre-production-about__image {
		min-height: 220px;
	}
}
/* Fixed image aspect-ratio, two-column layout only (2026-09-02, owner
   sharpness fix): `.sarre-production-about__media` previously had no own
   height at all - `align-items: stretch` on the row above (untouched)
   simply stretched it to match `.sarre-production-about__content`'s own,
   text-length-driven height, so a longer paragraph silently forced a
   taller `.sarre-production-about__image` box (still `height:100%;
   object-fit:cover`) than the `large` source could sharply cover. A hard
   `aspect-ratio` alone would not have fixed this under `align-items:
   stretch` - browsers still stretch a flex item to the line's cross size
   even when it has an aspect-ratio, unless that one item opts out via its
   own `align-self`. `align-self: flex-start` here does exactly that, for
   the image column only - `.sarre-production-about__content` keeps its
   existing stretch/centering behaviour completely unchanged. Scoped to
   `min-width: 701px` (the exact inverse of the 700px stacking breakpoint
   above) so the stacked mobile/tablet layout keeps its prior full-width,
   min-height-only behaviour completely untouched.
   Ratio corrected 2026-09-02 (owner live-check follow-up): the initial
   3:4 (same ratio as Künstlerisches Team's photos) made the image
   noticeably taller than the eyebrow+heading+prose text column next to
   it, so the two columns no longer read as one balanced block. 4:5 is one
   deliberate step less tall - at the current ~584px desktop column width
   that is roughly 730px vs. 3:4's ~779px - bringing the image close to a
   typical "Über die Produktion" text column's own height while still
   reading as a clearly portrait/editorial image, not a near-square one.
   `align-self: flex-start` (so it still cannot be stretched by the actual
   text length) and the fixed, planned height (still `object-fit: cover`,
   still the unchanged `large` source) are unchanged from the previous
   round.
   Vertical alignment fix 2026-09-02 (owner live-check follow-up): the
   image still looked visually detached from the text column. Root cause
   was `.sarre-production-about__content`'s `justify-content: center`
   (see rule above) - the row's `align-items: stretch` (untouched) makes
   `.content` match the row's height, which is now dictated by the fixed
   `aspect-ratio` image column; centering then vertically floats the
   actual eyebrow/heading/text block inside that taller box, well below
   the row's top edge, while the image (pinned via `align-self:
   flex-start`) starts right at the top - the gap between those two start
   points is what read as "freely hung next to the text". Changed
   `.content`'s `justify-content` to `flex-start` above so the text starts
   at its own box-top instead. That still leaves `.content`'s own
   `padding: var(--sarre-space-lg)` offsetting the eyebrow by that amount
   below `.content`'s box-top, with no equivalent offset on the image -
   fixed here with a matching `margin-top: var(--sarre-space-lg)` on
   `.media` (the same token `.content` already uses for its padding, not
   an arbitrary value), so both columns start their visible content at the
   same height. `margin` (not `padding`) is used here deliberately: adding
   padding to `.media` would be included inside its `aspect-ratio` box
   under default `content-box` sizing and distort the intended 4:5 ratio,
   while `margin` sits outside that box and only repositions it. */
@media (min-width: 701px) {
	.sarre-production-about__media {
		aspect-ratio: 4 / 5;
		align-self: flex-start;
		margin-top: var(--sarre-space-lg);
	}
}

/* Abschnitt F - Impressionen (Galerie), visually revised 2026-09-01 (owner
   finalization pass): a quieter, more filmic gallery — larger uniform
   image height, minimal rounding, no hover shadow (a subtle zoom is the
   only hover feedback now). Same `gallery` field data source, unchanged
   (sarre_core_render_production_gallery() untouched). */
.sarre-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--sarre-space-md);
}
.sarre-gallery-grid__item {
	position: relative; /* KI-Kennzeichnung (2026-09-29): Ankerpunkt für .sarre-ai-label, keine visuelle Änderung. */
	border-radius: 2px;
	overflow: hidden;
}
.sarre-gallery-grid__image {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.sarre-gallery-grid__item:hover .sarre-gallery-grid__image {
	transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Abschnitt F - Impressionen: Lightbox trigger + caption (2026-09-02,
   owner-requested follow-up). The `.sarre-gallery-grid`/`__item`/`__image`
   rules directly above are UNCHANGED - the approved grid/thumbnail look
   stays exactly as it was. Everything below is purely additive: a CSS
   reset for the new `<button class="sarre-gallery-grid__trigger">` wrapper
   (shortcodes.php) so it looks identical to the plain image it wraps, the
   small caption line, and the shared full-screen lightbox overlay itself
   (built once by sarre-child/js/sarre-lightbox.js and appended to <body>
   on first use - no dependency, no external library).
   -------------------------------------------------------------------------- */
.sarre-gallery-grid__trigger {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: zoom-in;
	appearance: none;
}
.sarre-gallery-grid__trigger:focus-visible {
	outline: 2px solid var(--sarre-color-primary);
	outline-offset: 2px;
}
.sarre-gallery-grid__caption {
	margin: 0.4rem 0 0;
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--sarre-color-body-text);
}

.sarre-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sarre-lightbox[hidden] {
	display: none;
}
.sarre-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.92);
}
.sarre-lightbox__figure {
	position: relative;
	z-index: 1;
	max-width: 90vw;
	max-height: 90vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sarre-space-xs);
	padding: 0 3.5rem;
}
.sarre-lightbox__image {
	display: block;
	max-width: 90vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
}
.sarre-lightbox__caption {
	margin: 0;
	max-width: 70ch;
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	color: var(--sarre-color-white);
	text-align: center;
}
.sarre-lightbox__caption[hidden] {
	display: none;
}
.sarre-lightbox__close,
.sarre-lightbox__prev,
.sarre-lightbox__next {
	position: absolute;
	z-index: 2;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--sarre-color-white);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.sarre-lightbox__close:hover,
.sarre-lightbox__prev:hover,
.sarre-lightbox__next:hover {
	background: rgba(255, 255, 255, 0.24);
}
.sarre-lightbox__close {
	top: var(--sarre-space-sm);
	right: var(--sarre-space-sm);
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
}
.sarre-lightbox__prev,
.sarre-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
}
.sarre-lightbox__prev {
	left: var(--sarre-space-sm);
}
.sarre-lightbox__next {
	right: var(--sarre-space-sm);
}
.sarre-lightbox__prev[hidden],
.sarre-lightbox__next[hidden] {
	display: none;
}
body.sarre-lightbox-open {
	overflow: hidden;
}

/* Abschnitt I - Weitere Produktionen, redesigned 2026-09-01 (owner
   finalization pass) into wide horizontal image teasers with a dark
   overlay, matching the design reference, instead of small standard
   cards. Same markup as before
   (sarre_core_render_other_productions()/shortcodes.php unchanged: link >
   image + title + optional meta) — the overlay/bottom-aligned text below
   is CSS-only (a gradient `::before` plus flexbox `justify-content:
   flex-end`), no new element. Data logic (current Production excluded,
   existing sort) is untouched.

   Compact re-tune 2026-09-02 (owner follow-up): the teasers above had grown
   too large after the first pass; the selection limit itself was raised
   3 -> 5 (shortcodes.php call site only, see there), and this block now
   targets a noticeably smaller ~200-230px card height plus an explicit
   mobile-1 / tablet-2 / desktop-up-to-5 column scheme instead of the
   previous two-tier auto-fit sizing.

   Mobile (below 640px): a single explicit `1fr` column - strictly one
   teaser per row.

   Tablet (640-899px): a fixed `repeat(2, 1fr)` - strictly two side by side;
   with an odd number of items the last one simply leaves its second cell
   empty, same as any ordinary 2-column grid.

   Desktop (900px+): `auto-fit` with a small minmax so up to 5 tracks fit
   the content width. `auto-fit` collapses any UNUSED tracks and lets the
   `1fr` unit redistribute their space across only the occupied ones - so
   exactly 3 items stretch evenly across the full row (never a 2+1 wrap),
   4 items stretch evenly across 4, and 5 fill all 5 tracks at their
   natural minmax width. The one addition versus the pre-existing auto-fit
   technique (already used here, and for `.sarre-credits-list` above with
   `auto-fill` for the opposite effect): `.sarre-production-card`'s new
   max-width cap below, scoped to this same desktop breakpoint only, so
   that when just 1-2 Produktionen are shown, auto-fit's even stretch
   doesn't blow a single teaser up to the full row width - it grows only
   up to a sensible cap instead. Mobile/tablet cards are NOT capped - a
   1-column or a (possibly partially filled) 2-column row is never "huge"
   the way a lone full-width desktop row would be. */
.sarre-production-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sarre-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.sarre-production-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 900px) {
	.sarre-production-cards {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
	.sarre-production-card {
		max-width: 420px;
	}
}
.sarre-production-card {
	background: none;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: none;
}
.sarre-production-card:hover {
	transform: none;
	box-shadow: none;
}
.sarre-production-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 200px;
	text-decoration: none;
	color: var(--sarre-color-white);
}
@media (min-width: 640px) {
	.sarre-production-card__link {
		height: 215px;
	}
}
@media (min-width: 900px) {
	.sarre-production-card__link {
		height: 230px;
	}
}
.sarre-production-card__link::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Stacking fix 2026-09-02 (owner-reported: the 2026-09-02 gradient
	   strengthening was "kaum wahrnehmbar" live): this pseudo-element and
	   `.sarre-production-card__image` right below were BOTH `position:
	   absolute` with no `z-index` (auto). Per CSS painting order, same-level
	   positioned elements paint in DOM order - and the <img> comes after
	   this ::before in the markup (shortcodes.php), so the image was
	   actually painting ON TOP of the gradient, hiding almost all of it.
	   Explicit z-index below (1, then 2 on the title/meta further down)
	   fixes the real stacking order: image, then gradient, then text -
	   instead of just raising the gradient's own opacity further, which
	   would not have fixed the underlying cause.
	   Gradient itself strengthened again per the owner's explicit target
	   values: top stays fully transparent/bright, then a soft transition
	   into a markedly darker lower ~40% of the card, directly behind the
	   title/meta text. */
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}
.sarre-production-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.sarre-production-card:hover .sarre-production-card__image {
	transform: scale(1.04);
}
.sarre-production-card__title {
	position: relative;
	z-index: 2;
	display: block;
	font-family: var(--sarre-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--sarre-color-white);
	/* Very subtle readability aid (2026-09-02, owner-requested) - not meant
	   to read as a visible effect on its own, only to firm up the edge of
	   the white text against the gradient/photo behind it. */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
	padding: 0 var(--sarre-space-md);
}
/* Small turquoise arrow accent (owner-requested visual CTA), appended
   after the title text — same `::after` arrow pattern already used by
   `.sarre-press-card__link` elsewhere in this file. */
.sarre-production-card__title::after {
	content: '\2192'; /* → */
	display: inline-block;
	margin-left: 0.4em;
	color: var(--sarre-color-primary);
	transition: transform 0.2s ease;
}
.sarre-production-card:hover .sarre-production-card__title::after {
	transform: translateX(0.2em);
}
.sarre-production-card__meta {
	position: relative;
	z-index: 2;
	display: block;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sarre-color-accent);
	padding: 0.3rem var(--sarre-space-md) var(--sarre-space-md);
}

/* ==========================================================================
   Responsive polish (2026-08-28)

   The grids above already reflow fluidly via auto-fill/minmax - this is
   only a small breakpoint for spacing/type scale on narrow screens, per
   docs/design-system.md's Responsive rule (one component/data source,
   no duplicated mobile markup). Nothing here changes structure, only
   sizing.
   ========================================================================== */
@media (max-width: 600px) {
	.sarre-production-body {
		padding: var(--sarre-space-md) var(--sarre-space-sm);
	}
	.sarre-production-body__section + .sarre-production-body__section {
		padding-top: var(--sarre-space-md);
	}
	.sarre-production-body__heading {
		font-size: 1.375rem;
	}
	.sarre-event-card__date {
		min-width: 0;
	}
	.sarre-event-card__ticket-link {
		margin-left: 0;
	}
	.sarre-testimonial::before {
		font-size: 2.25rem;
	}
}

/* ==========================================================================
   Homepage Hero (Milestone 6, dynamic "Aktuell bei Sarré" slider, added
   2026-09-02) — [sarre_homepage_hero] in sarre-core/includes/shortcodes.php.

   Visual reference (owner-confirmed, verbindlich): large photographic
   surface, dark overlay, small pink eyebrow, very large white Georgia/
   serif H1, short white/subtle info line, solid pink primary CTA, an
   optional quiet secondary CTA, restrained dot/arrow navigation — same
   editorial language already used throughout this stylesheet (serif
   headings, Türkis/Pink as accents only, no heavy shadows/rounding), not
   a generic banner-slider look.

   `.sarre-homepage-hero` renders at 100% of its containing block with no
   `--sarre-content-max-width` cap, so it bleeds full-bleed edge-to-edge
   PROVIDED the owner places the [sarre_homepage_hero] Code module inside
   a full-width ("Regular", not boxed) Divi Section/Row — the same manual
   placement pattern already used for every other homepage/production
   shortcode in this project. That one manual Divi step is not part of
   this implementation pass (explicitly deferred to the later homepage
   assembly), only documented here for whoever does it.

   Progressive enhancement: by default only `.sarre-homepage-hero__slide:
   first-child` is visible (pure CSS, no JS required) so a page with
   JavaScript disabled still shows one complete, correct Hero. The moment
   js/sarre-hero-slider.js runs, it adds `.sarre-homepage-hero--js` to the
   root, which hands visibility over entirely to the `.is-active` class it
   then manages — see that file's own doc comment for the full rationale.
   ========================================================================== */
.sarre-homepage-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: 520px;
	color: var(--sarre-color-white);
}
.sarre-homepage-hero__slides {
	position: relative;
	height: 100%;
	min-height: 520px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-homepage-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	opacity: 0;
	pointer-events: none;
	background-size: cover;
	background-position: center;
	background-color: var(--sarre-color-anthracite); /* shows while a large background-image is still loading */
	transition: opacity 1.1s ease;
}
.sarre-homepage-hero:not(.sarre-homepage-hero--js) .sarre-homepage-hero__slide:first-child,
.sarre-homepage-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
	.sarre-homepage-hero__slide {
		transition: none;
	}
}

/* No Featured Image (real slide) / no fallback-image filter result
   (brand slide) — a brand-colored placeholder so the Hero never shows a
   visibly broken/empty box. Deliberately reuses only Anthrazit/Türkis
   (never Pink, which stays an accent-only color per design-system.md). */
.sarre-homepage-hero__slide--no-image {
	background-image: linear-gradient(135deg, var(--sarre-color-anthracite) 0%, #101a1c 55%, var(--sarre-color-primary) 145%);
}

/* Overlay redesign (2026-09-29, owner request): the previous full-bleed
   top-to-bottom 35–72% gradient darkened the ENTIRE image, including the
   right/middle area with no text over it — too dark overall. Replaced
   with two independent, much softer gradients, same Anthrazit base color
   `rgba(36, 36, 36, …)` as before (and as the Produktions-Hero's own
   Divi-side overlay, `Color / Base / Anthrazit` #242424, see
   docs/design-system.md):
     1) a left-to-right band, concentrated behind the left-aligned white
        text (.sarre-homepage-hero__content, max-width 640px) and faded
        out completely well before the image's right/middle area, which
        stays fully bright/full-color and untouched.
     2) a very subtle, independent bottom band — just enough for the
        slider controls (.sarre-homepage-hero__controls) to stay legible
        over a bright photo, without darkening the image broadly.
   This base rule is the default (mobile-appropriate: no fixed text-box
   width to anchor to below the 701px breakpoint, since
   `.sarre-homepage-hero__content` drops its max-width there — so the dark
   band is deliberately wider here, per the owner's explicit "auf
   kleineren Geräten darf die Abdunklung etwas breiter reichen" allowance)
   and is narrowed again at the existing `@media (min-width: 701px)`
   breakpoint below, where the text column IS a fixed width and the
   gradient can track it precisely with px stops instead of %. */
.sarre-homepage-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(36, 36, 36, 0.62) 0%, rgba(36, 36, 36, 0.6) 55%, rgba(36, 36, 36, 0.18) 82%, rgba(36, 36, 36, 0) 98%),
		linear-gradient(0deg, rgba(36, 36, 36, 0.28) 0%, rgba(36, 36, 36, 0) 16%);
}

.sarre-homepage-hero__content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	padding: var(--sarre-space-lg) var(--sarre-space-md) 5.5rem;
}

.sarre-homepage-hero__eyebrow {
	display: block;
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--sarre-color-accent);
}

.sarre-homepage-hero__heading {
	margin: 0 0 var(--sarre-space-sm);
	/* !important (2026-09-02 fix): this raw shortcode <h2> sits inside a
	   Divi Code module, and Divi's own global heading typography (Font /
	   Heading Design Variable = Poppins, see design-system.md) is applied
	   to bare h1-h6 elements with a selector/specificity that otherwise
	   wins over this single class rule - the owner confirmed the Hero H1
	   was still rendering Sans Serif live despite this declaration.
	   Scoped to ONLY this one heading, font-family/font-weight only - no
	   other Hero rule (size/line-height/color/margin) or any other
	   heading sitewide is touched. */
	font-family: Georgia, 'Times New Roman', serif !important;
	font-weight: 400 !important;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.08;
	color: var(--sarre-color-white);
}

.sarre-homepage-hero__subtitle {
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-body);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

.sarre-homepage-hero__meta {
	margin: 0 0 var(--sarre-space-md);
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.75);
}

/* Primary CTA - same solid-Pink button language already established by
   `.sarre-venue-block__route-button`, sized up slightly for the Hero. */
.sarre-homepage-hero__cta {
	display: inline-block;
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 3px;
	padding: 0.8rem 1.75rem;
	transition: filter 0.2s ease;
}
.sarre-homepage-hero__cta:hover {
	filter: brightness(0.92);
}

/* Secondary CTA - fallback-slide only, quiet outline treatment next to
   the solid Pink primary button, per the owner's "ggf. dezenter
   Secondary CTA" instruction. */
.sarre-homepage-hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sarre-space-sm);
	align-items: center;
}
.sarre-homepage-hero__cta--secondary {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: var(--sarre-color-white);
}
.sarre-homepage-hero__cta--secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	filter: none;
}

/* --------------------------------------------------------------------------
   Slider chrome — only rendered/present in the markup when there is more
   than one slide (see sarre_shortcode_homepage_hero()). Deliberately
   restrained per the owner's "kein hektischer Slider, zurückhaltende
   Slider-Punkte/Pfeile" instruction: small, semi-transparent circular
   controls, no heavy card/shadow surface.
   -------------------------------------------------------------------------- */
.sarre-homepage-hero__controls {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: var(--sarre-space-md);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--sarre-space-sm);
}
.sarre-homepage-hero__arrow,
.sarre-homepage-hero__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(36, 36, 36, 0.35);
	color: var(--sarre-color-white);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sarre-homepage-hero__arrow:hover,
.sarre-homepage-hero__pause:hover {
	background: rgba(36, 36, 36, 0.6);
	border-color: var(--sarre-color-white);
}
.sarre-homepage-hero__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.sarre-homepage-hero__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.sarre-homepage-hero__dot.is-active {
	background: var(--sarre-color-accent);
	border-color: var(--sarre-color-accent);
	transform: scale(1.2);
}

/* Pause/play glyph, unicode-only (no icon font/SVG) - state driven by the
   button's own `aria-pressed`, toggled in js/sarre-hero-slider.js. */
.sarre-homepage-hero__pause {
	position: absolute;
	right: var(--sarre-space-md);
	bottom: var(--sarre-space-md);
	left: auto;
	font-size: 0.9rem;
}
.sarre-homepage-hero__pause[aria-pressed="false"]::before {
	content: '\23F8'; /* ⏸ */
}
.sarre-homepage-hero__pause[aria-pressed="true"]::before {
	content: '\25B6'; /* ▶ */
}

/* Screen-reader-only utility (no existing sitewide equivalent in this
   theme to reuse) - used by the Hero's live-region status line. */
.sarre-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (min-width: 701px) {
	.sarre-homepage-hero {
		min-height: 640px;
	}
	.sarre-homepage-hero__slides {
		min-height: 640px;
	}
	.sarre-homepage-hero__content {
		padding: var(--sarre-space-lg) var(--sarre-space-lg) 6.5rem;
	}
	/* Narrower overlay (2026-09-29): from 701px up, `.sarre-homepage-hero__content`
	   has a fixed 640px max-width plus its var(--sarre-space-lg) = 40px left
	   padding above, i.e. a ~680px-wide text column from the Hero's left
	   edge - so the dark band can track that fixed width with px stops
	   (stable across different Hero widths) instead of the base rule's %
	   stops, and fade out well short of the right/middle image area. */
	.sarre-homepage-hero__overlay {
		background:
			linear-gradient(90deg, rgba(36, 36, 36, 0.6) 0px, rgba(36, 36, 36, 0.58) 680px, rgba(36, 36, 36, 0.18) 860px, rgba(36, 36, 36, 0) 1040px),
			linear-gradient(0deg, rgba(36, 36, 36, 0.25) 0%, rgba(36, 36, 36, 0) 14%);
	}
}

/* Typography hierarchy pass (2026-09-29, owner request): the Hero's H1 felt
   too small relative to its large full-bleed size on real desktop windows -
   the previous `clamp(2.25rem, 5vw, 3.75rem)` only reached its 60px ceiling
   above ~1200px viewport width, so most common desktop windows (701-1199px)
   rendered noticeably smaller. Split into two new, purely typographic
   breakpoints (Tablet 701-1023px / Desktop 1024px+), layered on top of the
   existing shared 701px+ block above (min-height/padding/overlay there are
   UNCHANGED and still apply across both). Mobile (`@media (max-width:
   700px)` below) is untouched, per the owner's explicit instruction. Only
   `.sarre-homepage-hero__heading/__subtitle/__meta` are touched here -
   eyebrow, button, overlay, height, spacing, slider all stay exactly as
   they were. */
@media (min-width: 701px) and (max-width: 1023px) {
	/* Tablet: a moderate fluid step between Mobile's 30-40px and Desktop's
	   56-64px below - ~44px at 701px up to ~52px at 1023px. Description/
	   Terminzeile intentionally NOT overridden here - the unqualified base
	   rules (17px / 15px) already give the owner's requested Tablet
	   values, so Tablet only needs its own heading size. */
	.sarre-homepage-hero__heading {
		font-size: clamp(2.75rem, 1.75rem + 2.4vw, 3.25rem);
	}
}

@media (min-width: 1024px) {
	/* Desktop, revised 2026-09-29 (owner follow-up): confirmed via Divi's
	   own generated CSS caches that nothing overrides this rule - the
	   previous 56-64px clamp really was reaching its 64px ceiling already,
	   but still read as less prominent than the Produktions-Hero's H1
	   (built directly in Divi, not in this codebase - exact live values
	   not readable from files). Owner-requested trial: a taller size range
	   plus a tighter line-height, font-weight/max-width left exactly as
	   they were. clamp(4.25rem, 3.5rem + 1.35vw, 4.75rem) = 68px at the
	   low end (~1024-1050px viewport), reaching the 76px ceiling by
	   ~1480px viewport width. */
	.sarre-homepage-hero__heading {
		font-size: clamp(4.25rem, 3.5rem + 1.35vw, 4.75rem);
		line-height: 1.02;
	}
	.sarre-homepage-hero__subtitle {
		font-size: 1.125rem; /* 18px */
	}
	.sarre-homepage-hero__meta {
		font-size: 1rem; /* 16px */
	}
	/* Horizontal position (2026-09-29, owner follow-up): on Desktop the
	   Content block's left edge sat at the shared 701px+ block's
	   var(--sarre-space-lg) = 40px left padding - noticeably left of the
	   Produktions-Hero's text column. Only `padding-left` is overridden
	   here (top/right/bottom padding, set in the existing 701px+ block
	   above, are untouched - so vertical position stays exactly as it
	   was); max-width (640px, base rule) is also untouched, so the text
	   column keeps its width and only shifts right as a whole. */
	.sarre-homepage-hero__content {
		padding-left: 8.125rem; /* 130px */
	}
}

@media (max-width: 700px) {
	.sarre-homepage-hero__heading {
		font-size: clamp(1.875rem, 8vw, 2.5rem);
	}
	.sarre-homepage-hero__content {
		max-width: none;
		padding-bottom: 5rem;
	}
	.sarre-homepage-hero__controls {
		bottom: var(--sarre-space-sm);
	}
	.sarre-homepage-hero__pause {
		bottom: var(--sarre-space-sm);
		right: var(--sarre-space-sm);
	}
}

/* ==========================================================================
   Homepage — Milestone 6 Phase 2 (2026-09-02): CSS for the existing
   dynamic Homepage shortcodes ([sarre_homepage_events],
   [sarre_homepage_featured_production], [sarre_homepage_workshops],
   [sarre_homepage_testimonials], all from Phase 1 — no PHP/markup change
   here), plus a small set of reusable utility classes for the STATIC,
   Divi-built Homepage sections (Drei Einstiege, Akademie, Newsletter).
   Production Single CSS above is completely untouched; every rule below
   is scoped to a `sarre-homepage-*`/`sarre-editorial-*`/`sarre-entry-*`/
   `sarre-eyebrow`/`sarre-heading-serif`/`sarre-newsletter*` class that
   does not exist anywhere on the Production Single.
   ========================================================================== */

/* --------------------------------------------------------------------------
   "Termine & Veranstaltungen" ([sarre_homepage_events]) — reuses the exact
   same quiet, editorial `.sarre-event-list`/`.sarre-event-card` treatment
   already established for the Production Single's own Termine section
   (unscoped rules above this block), per the owner's "visuell verwandt"
   instruction — no separate card style needed here. Only a content-width/
   whitespace wrapper, plus styling for the one addition that has no
   Production-Single equivalent: the Produktion/Workshop name link
   (`__offering`) on each card, needed here because — unlike the
   Production Single, which never needs to say which Production a Termin
   belongs to — a sitewide list has no implicit "current production"
   context (see sarre_core_render_homepage_event_card() in shortcodes.php).

   Outer `.sarre-homepage-events` wrapper plus `__intro`/`__cta` added
   2026-09-21 alongside the "one Termin per Angebot, max 4" selection
   change — same eyebrow/serif-heading intro pattern already used for the
   Imagefilm section (`.sarre-homepage-imagefilm__intro`), for visual
   consistency between the two Homepage sections.
   -------------------------------------------------------------------------- */
.sarre-homepage-events {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto var(--sarre-space-lg);
}
.sarre-homepage-events__intro {
	max-width: 640px;
	margin: 0 auto var(--sarre-space-lg);
	text-align: center;
}
.sarre-homepage-events__heading {
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.15;
	color: var(--sarre-color-anthracite);
}
.sarre-homepage-events-list {
	margin: 0 0 var(--sarre-space-md);
}
.sarre-homepage-events__cta {
	margin: 0;
	text-align: center;
}
/* "Alle Termine ansehen" itself uses the shared `.sarre-link-editorial`
   button-system class (Milestone 6B, 2026-09-23; Türkis text + arrow) —
   see the Button system block above. No section-specific link style here
   anymore. */

/* Ticket-CTA on the Homepage Termine list only: solid-Pink fill instead of
   the Production-Single/Workshops' outline treatment (Milestone 6B,
   2026-09-23). Scoped strictly to `.sarre-homepage-events-list` so the
   shared, frozen `.sarre-event-card__ticket-link` base rule — still used
   as-is on the Produktion Single and in [sarre_homepage_workshops] — is
   never touched; only background/border/text colour are overridden here,
   padding/radius/font stay inherited from the base rule. */
.sarre-homepage-events-list .sarre-event-card__ticket-link {
	background: var(--sarre-color-accent);
	border-color: var(--sarre-color-accent);
	color: var(--sarre-color-white);
}
.sarre-homepage-events-list .sarre-event-card__ticket-link:hover {
	background: var(--sarre-color-accent);
	filter: brightness(0.92);
}
.sarre-homepage-event-card__offering {
	display: block;
	flex-basis: 100%;
	order: -1;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sarre-color-accent);
	text-decoration: none;
}
.sarre-homepage-event-card__offering:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   "Aktuelle Produktion" ([sarre_homepage_featured_production]) — a large
   image/text "mini hero": bigger and bolder than the plain
   `.sarre-production-card` grid used for "Weitere Produktionen", but
   deliberately NOT the Hero's full-bleed dark-overlay/slider treatment,
   so the two stay clearly distinguishable at a glance — light Hellgrau
   panel, an inline `<img>` (not a CSS background-image), no slider
   chrome. Same two-column/aspect-ratio technique already established for
   "Über die Produktion" (`.sarre-production-about`, Production Single).
   -------------------------------------------------------------------------- */
.sarre-homepage-featured-production {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	/* Milestone 6B (2026-09-23): very light Türkis tint instead of neutral
	   Hellgrau, plus one small strong-Türkis accent edge — a touch more
	   brand contrast per the owner's request, same reusable tint value
	   already established for the Testimonials panel (no new hex), image/
	   text composition and data logic otherwise untouched. */
	background: rgba(0, 182, 200, 0.07);
	border-top: 3px solid var(--sarre-color-primary);
}
.sarre-homepage-featured-production__link {
	display: flex;
	align-items: stretch;
	text-decoration: none;
	color: inherit;
}
/* KI-Kennzeichnung (2026-09-29): neuer `__media`-Wrapper übernimmt exakt
   die bisherige Flex-/Größen-Deklaration von `__image` (unverändertes
   Ergebnis), damit `__image` selbst per `position:absolute; inset:0;`
   passgenau ausgefüllt wird und `__media` als Ankerpunkt für
   .sarre-ai-label dienen kann - reine Strukturänderung, kein visueller
   Unterschied. */
.sarre-homepage-featured-production__media {
	position: relative;
	display: block;
	flex: 1.2 1 0;
	min-width: 0;
}
.sarre-homepage-featured-production__image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-homepage-featured-production__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sarre-space-lg);
}
.sarre-homepage-featured-production__meta {
	display: block;
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sarre-color-accent);
}
.sarre-homepage-featured-production__title {
	margin: 0 0 var(--sarre-space-sm);
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.15;
	color: var(--sarre-color-anthracite);
}
/* Same "arrow after title" CTA cue already established for
   `.sarre-production-card__title` (Weitere Produktionen) — CSS-only, no
   markup change needed here either, so this stays a pure-CSS addition. */
.sarre-homepage-featured-production__title::after {
	content: '\2192'; /* → */
	display: inline-block;
	margin-left: 0.4em;
	color: var(--sarre-color-primary);
	transition: transform 0.2s ease;
}
.sarre-homepage-featured-production__link:hover .sarre-homepage-featured-production__title::after {
	transform: translateX(0.25em);
}
.sarre-homepage-featured-production__excerpt {
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}
@media (min-width: 701px) {
	.sarre-homepage-featured-production__media {
		min-height: 420px;
	}
}
@media (max-width: 700px) {
	.sarre-homepage-featured-production__link {
		flex-direction: column;
	}
	.sarre-homepage-featured-production__media {
		min-height: 260px;
	}
}

/* --------------------------------------------------------------------------
   "Aktuelles / Presse / Auszeichnungen" ([sarre_homepage_aktuelles]).
   Milestone 6B, 2026-09-23 — reworked a further time on the owner's
   explicit, binding instruction: the previous pass's `::before` on
   `.item--main` (`left: -30vw; right: 90%`) still read as three
   side-by-side blocks (Türkis | Hauptmeldung | Nebenmeldungen) rather than
   a decorative background layer the Hauptmeldung visibly overlaps. That
   mechanism is REMOVED completely — no `left`/`right`/`vw` tuning of it
   remains anywhere in this file.

   NEW markup this pass (explicitly authorised by the owner): a single,
   empty, `aria-hidden` decorative element —
   `<div class="sarre-homepage-aktuelles__accent" aria-hidden="true">` —
   added in sarre_shortcode_homepage_aktuelles() (shortcodes.php) as a
   direct child of `.sarre-homepage-aktuelles`, a sibling of `__intro` and
   `__grid`. This is the ONLY markup change; `sarre_core_render_
   homepage_aktuelles_item()` (the CTA/href-generating function) and all
   data/query logic are untouched.

   Three independent layers, matching the owner's reference exactly:
     Ebene 1 — `.sarre-homepage-aktuelles__accent`: the decorative Türkis
       block. Absolutely positioned against `.sarre-homepage-aktuelles`
       itself (already `position: relative` — this component's own
       "eigener positionierter Wrapper"), `z-index: -1` so it always
       paints behind the normal-flow `__intro`/`__grid` content next to
       it. Its horizontal extent is NOT derived from the Hauptmeldung's
       width in any way: `width: 30vw` (a fixed viewport-relative value,
       the midpoint of the owner's given 28-32% range) and `left: calc(50%
       - 50vw)` — the standard, deterministic "full-bleed" CSS formula
       that reaches the true viewport edge from any element whose
       containing block is itself horizontally centred on the page (true
       here: `.sarre-homepage-aktuelles` is `max-width` + `margin: 0
       auto`). This is a fixed mathematical identity, not a tuned/guessed
       offset. `top`/`height` are estimates (still no live browser/DOM
       measurement possible from this environment) — see the dated note on
       the `__accent` rule below for how they're currently derived.
     Ebene 2 — `.sarre-homepage-aktuelles__grid`: the content grid,
       Hauptmeldung / rechte Spalte, normal in-flow (static) content, which
       is why it automatically paints above the negative-z-index accent
       layer without any extra z-index rules of its own. See the dated
       note on the `__grid` rule below for the current column split and
       why an exact viewport-% match to the owner's 18-22/36-42% figures
       isn't achievable through this value alone.
     Ebene 3 — Bild/Textpanel/Buttons inside der Hauptmeldung/Neben-
       meldungen — unchanged content styling.
   The right column (two smaller Meldungen) stays plain white, no colour
   fill, separated only by a thin hairline. No card look anywhere: no
   shadow, no rounding, no border on any surface in this component.
   (Per-value change history now lives on the individual rules below,
   dated, rather than being re-summarised here every pass — this top
   comment describes the current architecture, not its history.) */
.sarre-homepage-aktuelles {
	position: relative;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto var(--sarre-space-lg);
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
/* Ebene 1 — the decorative Türkis layer. See the component-level comment
   above for the full reasoning behind `left`/`width` (unchanged again this
   pass). `top`/`height` ONLY — 2026-09-24 "Layering"-Korrektur:
   positioning logic recap: `.accent` is `position: absolute` against
   `.sarre-homepage-aktuelles` (the `position: relative` container just
   above — untouched, still the right containing block, no change needed
   there), so `top` is measured from THAT element's own padding-box top,
   i.e. it already sits INSIDE that container's own
   `padding: var(--sarre-space-lg) var(--sarre-space-md)` (2.5rem top
   padding). Root cause of the previous "ends exactly with the
   Hauptmeldung" complaint: `top: 4rem` put the visible start only
   4rem − 2.5rem = 1.5rem below where the intro heading itself already
   begins (barely any visible gap above it), and `height: 42rem` had been
   tuned in an earlier pass to roughly MATCH the Hauptmeldung's rendered
   height rather than deliberately exceed it — so the two edges lined up
   almost exactly by construction, not by coincidence of content length.
   Fix (only these two values changed): `top` reduced to 3rem, so the
   layer starts noticeably higher, clearly above the intro heading rather
   than almost flush with it; `height` increased to 48rem, so the bottom
   edge now overshoots the previous (too-short) bottom edge by a full 6rem
   (96px) — comfortably covering the requested ~30-50px overhang below the
   Hauptmeldung's light-Türkis panel even allowing for real content being
   somewhat longer than the current placeholder text. Both values remain
   fixed rem estimates, not a live-measured/coupled-to-content value (no
   browser access from this environment to verify pixel-exact overshoot on
   the real page) — still disclosed as an estimate, but now deliberately
   biased toward overshooting on both ends rather than matching. */
.sarre-homepage-aktuelles__accent {
	position: absolute;
	left: calc(50% - 50vw);
	top: 3rem;
	width: 30vw;
	height: 48rem;
	background: var(--sarre-color-primary);
	z-index: -1;
}
.sarre-homepage-aktuelles__intro {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto var(--sarre-space-lg);
	text-align: center;
}
.sarre-homepage-aktuelles__heading {
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.15;
	color: var(--sarre-color-anthracite);
}
/* Ebene 2 — the content grid. 2026-09-24 "Ergänzung" ROOT-CAUSE FIX: the
   previous pass's three tracks (`14fr 39fr 47fr` — an empty "inset
   spacer" track, then Hauptmeldung, then die rechte Spalte) is what made
   the owner's regression screenshot look wrong, and is REMOVED here. That
   empty first track did two things at once, both bad: (1) it ate 14% of
   the distributable fr space away from the Hauptmeldung, shrinking it
   from the previously-fine `3fr 2fr` (~60%) down to `39fr` of 100
   (~39%) — directly causing the "Hauptmeldung viel zu schmal" complaint;
   (2) it pushed the Hauptmeldung's own start position further right,
   AWAY from the viewport-left-anchored Türkis accent layer (Ebene 1),
   which is exactly backwards — it reduced the Hauptmeldung/Türkis overlap
   the reference image shows, instead of preserving it. Back to two
   tracks, `3fr 2fr` — the same ratio already in place before that pass
   (never itself the subject of a "too narrow" complaint) — so the
   Hauptmeldung is wide again AND starts right after this component's own
   left padding (`.sarre-homepage-aktuelles`'s existing
   `padding: var(--sarre-space-lg) var(--sarre-space-md)`, unchanged, still
   the only "inset from the edge" this component needs), close enough to
   the true viewport edge for the Türkis layer's `30vw` reach to overlap a
   meaningful part of it again, without a dedicated empty grid track. The
   Türkis accent layer is still sized/positioned completely independently
   of this grid either way — its own `left`/`width` never reference these
   fr values. */
.sarre-homepage-aktuelles__grid {
	position: relative;
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: var(--sarre-space-sm);
	align-items: start;
}
.sarre-homepage-aktuelles__label {
	display: block;
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sarre-color-accent);
}
.sarre-homepage-aktuelles__date {
	display: block;
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	color: var(--sarre-color-body-text);
}
.sarre-homepage-aktuelles__title {
	text-decoration: none;
	color: var(--sarre-color-anthracite);
}
.sarre-homepage-aktuelles__cta {
	margin-top: var(--sarre-space-sm);
}

/* Hauptmeldung — explicitly track [1] of the 2-column grid above (the
   empty "inset spacer" track a previous pass added as track [1] is
   removed — see the dated root-cause note on `__grid` above), its full
   share of that track, no internal padding/narrowing, no pseudo-element
   of its own any more (the Türkis layer lives entirely in `__accent` now,
   a sibling of `__grid`, not a child of this item — see Ebene 1 above). */
.sarre-homepage-aktuelles__item--main {
	grid-column: 1;
	display: flex;
	flex-direction: column;
}
/* KI-Kennzeichnung (2026-09-29): gemeinsamer Ankerpunkt für .sarre-ai-label
   auf beiden Varianten unten (--main und --secondary) - reine Positions-
   Eigenschaft, keine visuelle Änderung. */
.sarre-homepage-aktuelles__image {
	position: relative;
}
.sarre-homepage-aktuelles__item--main .sarre-homepage-aktuelles__image {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	background-size: cover;
	background-position: center;
	background-color: var(--sarre-color-light);
}
/* Very-light-Türkis-tinted panel — same tint already established for the
   Testimonials panel (`rgba(0, 182, 200, 0.07)`, no new hex), composited
   here over an opaque white base so it reads as a genuinely pale surface
   even where the bold, opaque Türkis accent layer sits behind part of the
   Hauptmeldung (still the same two pre-existing values only — no new
   colour introduced). No gap and no radius between image and panel —
   together they read as one seamless editorial unit, no card look. No
   image -> the panel starts the item directly (no empty placeholder) and
   gets more generous padding. */
.sarre-homepage-aktuelles__item--main .sarre-homepage-aktuelles__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	padding: var(--sarre-space-lg);
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
}
.sarre-homepage-aktuelles__item--main.sarre-homepage-aktuelles__item--no-image .sarre-homepage-aktuelles__body {
	padding: calc(var(--sarre-space-lg) * 1.6) var(--sarre-space-lg);
}
.sarre-homepage-aktuelles__item--main .sarre-homepage-aktuelles__title {
	display: block;
	margin: 0 0 var(--sarre-space-xs);
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
}
.sarre-homepage-aktuelles__item--main .sarre-homepage-aktuelles__title:hover {
	text-decoration: underline;
}
.sarre-homepage-aktuelles__excerpt {
	display: block;
	margin: var(--sarre-space-xs) 0 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}

/* Die zwei kleineren Meldungen — explicitly track [2] of the 2-column grid
   above (see the dated root-cause note on `__grid` above), plain white
   column, no colour fill behind it at all. Each item
   lays its own small thumbnail to the LEFT of its text (when an image
   exists) as a flex row, reusing the existing sibling image-anchor +
   body-div markup already emitted by
   sarre_core_render_homepage_aktuelles_item() — no markup change needed
   here, only the CSS direction changed (row instead of column). A thin
   hairline separates the two items; when a Meldung has no image, the
   image anchor simply isn't rendered (existing PHP `if ( $image_url )`
   fallback, unchanged) and the text uses the full row width on its own —
   no placeholder image, no fixed height. No pink button here (Primary CTA
   is reserved for the Hauptmeldung); CTA stays `.sarre-link-editorial`. */
.sarre-homepage-aktuelles__secondary-list {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: var(--sarre-color-white);
	list-style: none;
}
.sarre-homepage-aktuelles__item--secondary {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sarre-space-sm);
	padding: var(--sarre-space-md) 0;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-homepage-aktuelles__item--secondary:first-child {
	padding-top: 0;
	border-top: none;
}
.sarre-homepage-aktuelles__item--secondary .sarre-homepage-aktuelles__image {
	display: block;
	flex: 0 0 104px;
	width: 104px;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: var(--sarre-color-light);
}
.sarre-homepage-aktuelles__item--secondary .sarre-homepage-aktuelles__body {
	flex: 1 1 auto;
	min-width: 0;
}
.sarre-homepage-aktuelles__item--secondary .sarre-homepage-aktuelles__title {
	display: block;
	margin: 0 0 0.2rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.3;
}
.sarre-homepage-aktuelles__item--secondary .sarre-homepage-aktuelles__title:hover {
	text-decoration: underline;
}
.sarre-homepage-aktuelles__item--secondary .sarre-homepage-aktuelles__excerpt {
	font-size: 0.9375rem;
}
.sarre-homepage-aktuelles__item--secondary .sarre-homepage-aktuelles__cta {
	margin-top: var(--sarre-space-xs);
}

/* Below 900px: the decorative Türkis layer is switched off entirely
   (explicit owner permission — "darf mobil vereinfacht oder deaktiviert
   werden") rather than left in a half-applied state, and the grid
   collapses to a single stacked column: Hauptmeldung, then the
   Nebenmeldungen. Explicit `grid-column: 1` resets on both items prevent
   them from keeping a stale 3-track placement once `grid-template-
   columns` collapses to a single `1fr` track. */
@media (max-width: 900px) {
	.sarre-homepage-aktuelles__accent {
		display: none;
	}
	.sarre-homepage-aktuelles__grid {
		grid-template-columns: 1fr;
	}
	.sarre-homepage-aktuelles__item--main {
		grid-column: 1;
	}
	.sarre-homepage-aktuelles__secondary-list {
		grid-column: 1;
	}
}
@media (max-width: 560px) {
	.sarre-homepage-aktuelles {
		padding: var(--sarre-space-md) 0;
	}
	.sarre-homepage-aktuelles__item--secondary .sarre-homepage-aktuelles__image {
		flex-basis: 84px;
		width: 84px;
	}
}

/* --------------------------------------------------------------------------
   "Workshops" ([sarre_homepage_workshops]) — deliberately a compact CARD
   grid (not the plain hairline list used for Termine above), so the two
   dynamic sections read as visually distinct despite sharing the same
   underlying `.sarre-event-card` markup — matches the owner's "kompakt,
   hochwertig, klarer Angebotscharakter" instruction. Hairline border and
   the project's standard minimal radius only, no shadow, no color fill —
   consistent with "keine starken Schatten / minimale Rundungen" sitewide.
   -------------------------------------------------------------------------- */
.sarre-homepage-workshops-list {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto var(--sarre-space-lg);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--sarre-space-md);
	border-top: none;
}
.sarre-homepage-workshops-list .sarre-event-card {
	flex-direction: column;
	align-items: flex-start;
	border: 1px solid rgba(36, 36, 36, 0.12);
	border-radius: var(--sarre-radius);
	padding: var(--sarre-space-md);
}
.sarre-homepage-workshops-list .sarre-event-card__date {
	min-width: 0;
}
.sarre-homepage-workshops-list .sarre-event-card__ticket-link {
	margin-left: 0;
	margin-top: var(--sarre-space-xs);
}

/* --------------------------------------------------------------------------
   Testimonials ([sarre_homepage_testimonials]) — the same turquoise-
   tinted, serif-pull-quote treatment already established for the
   Production Single (`.sarre-production-body .sarre-testimonial`),
   reapplied here under the homepage's own wrapper class so both pages
   share one consistent "helle/türkise" editorial testimonial language,
   per the owner's explicit instruction, without duplicating or touching
   that Production-Single-scoped rule itself.
   -------------------------------------------------------------------------- */
.sarre-homepage-testimonials-list {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-homepage-testimonials-list .sarre-testimonial {
	background: rgba(0, 182, 200, 0.07);
	border-radius: 2px;
	box-shadow: none;
}
.sarre-homepage-testimonials-list .sarre-testimonial::before {
	opacity: 0.45;
}
.sarre-homepage-testimonials-list .sarre-testimonial__quote {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.3125rem;
	line-height: 1.5;
	color: var(--sarre-color-anthracite);
}
.sarre-homepage-testimonials-list .sarre-testimonial__author {
	font-size: 0.8125rem;
	color: var(--sarre-color-body-text);
}

/* ==========================================================================
   Homepage "Stimmen" slider ([sarre_homepage_stimmen], 2026-09-24) — a
   deliberately separate, new component from the `.sarre-testimonial*` /
   `.sarre-homepage-testimonials-list` rules directly above (those stay
   completely untouched and unused by this addition, per the owner's
   explicit instruction). Own namespace throughout: `.sarre-homepage-
   stimmen*`, never `.sarre-testimonial`.

   Progressive enhancement, same convention as the Hero
   (`.sarre-homepage-hero--js`): the horizontal track works via plain CSS
   `scroll-snap` alone (native swipe/trackpad/scrollbar), no JavaScript
   required to reach any card. Only the long-quote clamp and its toggle
   button are gated behind `.sarre-homepage-stimmen--js`
   (js/sarre-homepage-stimmen.js adds that class on init) — without it,
   every quote simply shows in full, unclamped, and no toggle button is
   rendered/visible at all.
   ========================================================================== */
.sarre-homepage-stimmen {
	position: relative;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: calc(var(--sarre-space-lg) * 1.6) var(--sarre-space-md);
}
/* Full-bleed light-grey/off-white section background (2026-09-24, visual
   pass only, no functional change). Same deterministic full-bleed formula
   already used for `.sarre-homepage-aktuelles__accent`
   (`left: calc(50% - 50vw); width: 100vw;`, on a `position: relative`
   ancestor that is itself horizontally centred via max-width + margin
   auto), and the existing `--sarre-color-light` token — no new colour.
   Negative z-index so it always paints behind the normal-flow content
   next to it, same technique as that existing layer. */
.sarre-homepage-stimmen::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background: var(--sarre-color-light);
	z-index: -1;
}
.sarre-homepage-stimmen__intro {
	max-width: 640px;
	margin: 0 auto var(--sarre-space-lg);
	text-align: center;
}
.sarre-homepage-stimmen__intro .sarre-eyebrow {
	text-align: center;
}
.sarre-homepage-stimmen__heading {
	margin: 0 0 var(--sarre-space-sm);
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	color: var(--sarre-color-anthracite);
}
.sarre-homepage-stimmen__subheading {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
}

.sarre-homepage-stimmen__viewport {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sarre-space-sm);
}

/* The track itself is the scroll container - scroll-snap alone already
   makes it fully swipeable/scrollable with zero JavaScript. */
.sarre-homepage-stimmen__track {
	display: flex;
	align-items: flex-start;
	gap: var(--sarre-space-md);
	margin: 0;
	padding: 0.25rem 0.125rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; /* the arrows/dots are the intended controls; still fully swipe/drag-scrollable */
}
.sarre-homepage-stimmen__track::-webkit-scrollbar {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.sarre-homepage-stimmen__track {
		scroll-behavior: auto;
	}
}

.sarre-homepage-stimmen__card {
	position: relative;
	flex: 0 0 calc((100% - 2 * var(--sarre-space-md)) / 3);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--sarre-color-white);
	border: 1px solid rgba(36, 36, 36, 0.08);
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(43, 46, 51, 0.12);
	padding: var(--sarre-space-lg) var(--sarre-space-lg) var(--sarre-space-md);
	transition: border-color 0.2s ease;
}
/* Open card gets a fine Türkis border as the only "currently expanded"
   signal (owner, 2026-09-24: "kein starkes Hintergrund, nur dezentes
   visuelles Feedback") - background stays plain white, `.is-expanded` is
   the existing class the (untouched) JS already toggles. */
.sarre-homepage-stimmen__card.is-expanded {
	border-color: var(--sarre-color-primary);
}
.sarre-homepage-stimmen__card::before {
	content: '\201C'; /* " */
	display: block;
	margin: 0 0 var(--sarre-space-sm);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 8rem; /* ~128px desktop (2026-09-24 revision, owner-tested range 7-8rem) */
	line-height: 0.7; /* compact line-height shrinks the mostly-empty font box around the glyph itself (quotation-mark glyphs only fill roughly a quarter of their font-size box) instead of relying on large negative margins - proportional, so it stays correct at every breakpoint below */
	color: var(--sarre-color-primary);
}
.sarre-homepage-stimmen__quote {
	margin: 0 0 var(--sarre-space-sm);
	/* Divi's global `blockquote { border-left: 5px solid; padding-left: 20px; }`
	   (theme base CSS) plus the site's Divi Customizer border-color setting
	   (coincidentally also Sarré-Türkis) apply to every <blockquote> on the
	   site. Overridden here, scoped strictly to this component's own quote
	   element - the global Divi rule/setting itself is left untouched, so
	   every other blockquote on the site (incl. the older, unused
	   [sarre_homepage_testimonials]/.sarre-testimonial component, which also
	   uses a real <blockquote>) keeps its current appearance. */
	border-left: none;
	padding-left: 0;
}
.sarre-homepage-stimmen__quote p {
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--sarre-color-anthracite);
}
/* Clamp + toggle button both stay inactive/hidden until JS confirms the
   toggle is actually functional (see file doc comment above). */
.sarre-homepage-stimmen--js .sarre-homepage-stimmen__card--long:not(.is-expanded) .sarre-homepage-stimmen__quote p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}
.sarre-homepage-stimmen__toggle {
	display: none;
	align-items: center;
	gap: 0.35em;
	margin: 0.25rem 0 var(--sarre-space-sm);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--sarre-color-primary);
	cursor: pointer;
}
.sarre-homepage-stimmen--js .sarre-homepage-stimmen__card--long .sarre-homepage-stimmen__toggle {
	display: inline-flex;
}
.sarre-homepage-stimmen__toggle:hover {
	text-decoration: underline;
}
.sarre-homepage-stimmen__toggle-less {
	display: none;
}
.is-expanded .sarre-homepage-stimmen__toggle-more {
	display: none;
}
.is-expanded .sarre-homepage-stimmen__toggle-less {
	display: inline;
}

.sarre-homepage-stimmen__source {
	margin-top: auto;
	padding-top: var(--sarre-space-md);
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
/* Short pink accent stripe (2026-09-24, visual pass) - replaces the old
   full-width pink top border. Rendered as `::before` on the source block
   so it always sits right after the quote (and after the toggle button,
   when present) and right before the author/meta text - matching the
   owner's requested visual order with no markup change, since `::before`
   generated content becomes the first flex item inside this existing
   `display: flex` element. Absent on the rare card with neither author
   nor meta - there is no `.sarre-homepage-stimmen__source` element at all
   in that case (existing, untouched PHP condition). */
.sarre-homepage-stimmen__source::before {
	content: '';
	display: block;
	width: 44px;
	height: 2px;
	background: var(--sarre-color-accent);
	margin-bottom: var(--sarre-space-sm);
}
.sarre-homepage-stimmen__author {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-style: normal;
	color: var(--sarre-color-anthracite);
}
.sarre-homepage-stimmen__meta {
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	color: var(--sarre-color-body-text);
}

/* Arrows - small, restrained circular controls, same size/shape language
   as the Hero's (`.sarre-homepage-hero__arrow`), recoloured for this
   section's light background instead of the Hero's dark overlay. */
.sarre-homepage-stimmen__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(36, 36, 36, 0.12);
	border-radius: 50%;
	background: var(--sarre-color-white);
	box-shadow: 0 1px 3px rgba(43, 46, 51, 0.12);
	color: var(--sarre-color-primary);
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sarre-homepage-stimmen__arrow:hover,
.sarre-homepage-stimmen__arrow:focus-visible {
	background: var(--sarre-color-primary);
	border-color: var(--sarre-color-primary);
	color: var(--sarre-color-white);
}

.sarre-homepage-stimmen__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--sarre-space-md);
}
.sarre-homepage-stimmen__dot {
	width: 0.5625rem;
	height: 0.5625rem;
	padding: 0;
	border: 1px solid rgba(36, 36, 36, 0.15);
	border-radius: 50%;
	background: rgba(36, 36, 36, 0.1);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sarre-homepage-stimmen__dot.is-active {
	background: var(--sarre-color-accent);
	border-color: var(--sarre-color-accent);
	transform: scale(1.35);
}

@media (max-width: 900px) {
	.sarre-homepage-stimmen__card {
		flex-basis: calc((100% - var(--sarre-space-md)) / 2);
	}
	.sarre-homepage-stimmen__card::before {
		font-size: 6.5rem; /* same proportion to the 8rem desktop base as before this revision */
	}
}
@media (max-width: 600px) {
	.sarre-homepage-stimmen__card {
		flex-basis: 100%;
	}
	.sarre-homepage-stimmen__card::before {
		font-size: 5.5rem; /* same proportion to the 8rem desktop base as before this revision */
	}
	.sarre-homepage-stimmen__arrow {
		display: none;
	}
}

/* ==========================================================================
   Homepage editorial utility classes — for the STATIC/manually-built
   Homepage sections (Drei Einstiege, Akademie, Mission & Wirkung,
   Unterstützen) that stay directly editable in Divi's own Builder, per
   the owner's explicit hybrid-architecture instruction ("Divi = Seiten-
   komposition/redaktionelle Inhalte" — not the whole Homepage as one PHP
   shortcode). Apply these as a module's own "CSS Class" (Divi's Advanced
   tab) directly in the Divi Builder — no shortcode/PHP involved. See
   docs/M6_HOMEPAGE_DIVI_ANLEITUNG.md for exactly where to use each one.

   `!important` on a few rules here is deliberate, not sloppy: these
   classes are specifically meant to override Divi's own default styling
   on NATIVE Divi Row/Text/Heading modules (Divi's Font/Heading Design
   Variable, Divi's own Row display mode) — the same class of issue fixed
   above for the Hero H1, where Divi's own dynamic CSS otherwise wins over
   a plain class selector for these exact properties.
   ========================================================================== */
.sarre-eyebrow {
	display: block;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sarre-color-accent);
	margin: 0 0 var(--sarre-space-xs);
}
.sarre-heading-serif {
	font-family: Georgia, 'Times New Roman', serif !important;
	font-weight: 400 !important;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Button system (Milestone 6B, 2026-09-23) — one shared set of classes for
   every Homepage primary/secondary/editorial call-to-action, so the still-
   to-come sections (Akademie, Workshops, Unterstützen, ...) reuse these
   instead of each inventing a one-off button rule. Built entirely from the
   existing brand Design Variables (`--sarre-color-accent` Pink,
   `--sarre-color-primary` Türkis, `--sarre-color-white`) — no new hex value
   anywhere in this block. Hover uses `filter: brightness(0.92)`, the same
   technique already established for the Produktion-Single "Tickets & Infos"
   panel button (`.sarre-production-ticket-cta__button`, frozen/untouched)
   — deliberately not a new near-duplicate darker pink.

   .sarre-btn.sarre-btn--primary   → solid Pink, white text (Tickets
     sichern, Artikel lesen, Anmelden, Unterstützen, ...).
   .sarre-btn.sarre-btn--secondary → Pink outline, fills solid Pink on hover.
   .sarre-link-editorial (+ --pink modifier; default colour Türkis) → text
     + arrow, for lower-emphasis actions (Alle Termine ansehen, the smaller
     Aktuelles items' "Mehr erfahren"/"Artikel lesen").

   Already-approved buttons elsewhere (Produktion-Single Ticket-panel,
   Homepage Event-Card ticket-link, Imagefilm Play-button) are left exactly
   as they are — this system is additive for NEW/updated CTAs, not a forced
   global replacement of already-frozen components. Apply directly as a
   module's "CSS Class" in Divi, or from a shortcode's own markup. */
.sarre-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.75rem 1.5rem;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 2px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.sarre-btn--primary {
	background: var(--sarre-color-accent);
	border-color: var(--sarre-color-accent);
	color: var(--sarre-color-white);
}
.sarre-btn--primary:hover,
.sarre-btn--primary:focus-visible {
	filter: brightness(0.92);
}
.sarre-btn--secondary {
	background: transparent;
	border-color: var(--sarre-color-accent);
	color: var(--sarre-color-accent);
}
.sarre-btn--secondary:hover,
.sarre-btn--secondary:focus-visible {
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
}
.sarre-link-editorial {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sarre-color-primary);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
}
.sarre-link-editorial::after {
	content: '\2192';
	transition: transform 0.2s ease;
}
.sarre-link-editorial:hover::after,
.sarre-link-editorial:focus-visible::after {
	transform: translateX(0.25em);
}
.sarre-link-editorial--pink {
	color: var(--sarre-color-accent);
}

/* Editorial image/text split (2 columns, stacks under 700px) — apply
   `.sarre-editorial-split` to a Divi Row, `.sarre-editorial-split__media`
   to the image Column/module, `.sarre-editorial-split__content` to the
   text Column/module. Intended for "Akademie" (Homepage structure point
   5, "redaktioneller Bild/Text-Split, verwandt mit Über die Produktion"). */
.sarre-editorial-split {
	display: flex !important;
	align-items: stretch;
	gap: 0;
}
.sarre-editorial-split__media {
	flex: 1 1 0;
	min-width: 0;
}
.sarre-editorial-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-editorial-split__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sarre-space-lg);
}
@media (min-width: 701px) {
	.sarre-editorial-split__media {
		aspect-ratio: 4 / 5;
	}
}
@media (max-width: 700px) {
	.sarre-editorial-split {
		flex-direction: column !important;
	}
}

/* Large image "entrance" tiles (Drei Einstiege: Erleben / Mitmachen /
   Ausprobieren) — a row of large, full-bleed image links with a dark
   gradient overlay, explicitly not a white card/dashboard tile.
   Architecture (owner's explicit hybrid-architecture instruction,
   unchanged this pass): static, manually-built Divi content — no
   shortcode/PHP involved. Apply `.sarre-entry-tiles` to the Row,
   `.sarre-entry-tiles__tile` to each Image/Link module's own single `<a>`
   (set as that module's background image via Divi, or wrap a full-size
   <img> inside it) — this `<a>` is the ONLY clickable element per tile,
   so there is never a nested `<a>` to worry about.
   2026-09-24 "Drei Kacheln informativer" pass: previously each tile only
   carried one absolutely-positioned word (`.sarre-entry-tiles__label`,
   removed this pass). Replaced with three stacked plain (non-anchor)
   children inside the same `<a class="sarre-entry-tiles__tile">` —
   `.sarre-entry-tiles__eyebrow` (small pink category label, reusing the
   same `--sarre-color-accent` already used by the sitewide `.sarre-eyebrow`
   utility), `.sarre-entry-tiles__heading` (large white serif headline,
   same Georgia/400 pairing as `.sarre-heading-serif`), and
   `.sarre-entry-tiles__link` (white text+arrow affordance — visual only,
   NOT its own `<a>`, since the whole tile is already the link; styled
   like the sitewide `.sarre-link-editorial` component but as a `<span>`
   so its hover state is driven by the parent tile's `:hover`/
   `:focus-visible`, not its own). All three are flex items of `.tile`
   (which is now `display: flex; flex-direction: column;
   justify-content: flex-end`), so they always sit pinned to the bottom
   and the tile simply grows via `min-height` (never a fixed `height`) if
   real content needs more room — no risk of clipped/cut-off text at any
   viewport. `z-index: 1` on the three text children (flex items respect
   z-index without needing their own `position`) keeps them above the
   `::before` gradient overlay, which was strengthened (covers more of the
   tile, darker at the bottom — same reused `rgba(36, 36, 36, …)` = the
   existing Anthracite value, only the gradient stops/opacity changed, no
   new colour) since there is now a 3-line text block to keep legible
   instead of one short word. Proportions: `min-height` reduced from
   420px to 340px on desktop per the owner's "weniger hoch" request, so
   the row reads wider/more horizontal, with room for the heading+link.
   `max-width`/`margin: 0 auto` added directly to `.sarre-entry-tiles`
   itself (belt-and-suspenders, same technique already used by
   `.sarre-homepage-aktuelles`) so the group is reliably aligned to the
   Homepage's own content width regardless of the Divi Row's own width
   setting, which this stylesheet cannot see/verify. */
.sarre-entry-tiles {
	display: flex !important;
	gap: var(--sarre-space-sm);
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-entry-tiles__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1 1 0;
	min-height: 340px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-decoration: none;
	padding: var(--sarre-space-md);
}
.sarre-entry-tiles__tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(36, 36, 36, 0) 25%, rgba(36, 36, 36, 0.85) 100%);
}
/* Türkiser Hover-Overlay (2026-09-24, neu umgesetzt nachdem der
   Drei-Einstiege/Termine-Darstellungsfehler [fehlendes `</a>` in den
   Divi-Code-Modulen von Kachel 2/3] behoben war). Reine `::after`-Ebene,
   bislang ungenutzt auf `.tile` — keine HTML-/Divi-Änderung nötig.
   Schichtung: `::before` (Verlauf, unverändert, `z-index: auto`) liegt
   unten; dieses `::after` bekommt bewusst `z-index: 0`, wodurch es in
   derselben Stacking-Gruppe wie `::before` landet, dort aber als später
   im Quellcode erzeugtes Pseudo-Element automatisch darüber gemalt wird;
   Eyebrow/Heading/Link (unverändert `z-index: 1`) bilden eine eigene,
   höhere Stacking-Ebene und bleiben dadurch garantiert über dem Overlay
   sichtbar — ohne dass deren bestehende z-index-Werte angefasst wurden.
   Farbe: `rgba(0, 182, 200, …)` = exakt `--sarre-color-primary`
   (Sarré-Türkis #00B6C8) mit reduzierter Deckkraft, kein neuer Hex-Wert.
   `opacity: 0` im Ruhezustand, Einblendung nur über `:hover`/
   `:focus-visible` auf der Kachel selbst (Tastaturbedienung
   berücksichtigt), 0,35s weiche Ein-/Ausblendung. Kein pinkes Overlay
   mehr (Owner-Entscheidung 2026-09-24) — die pinke Eyebrow-Farbe
   (`--sarre-color-accent`) bleibt davon unberührt. */
.sarre-entry-tiles__tile::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0, 182, 200, 0.35); /* = var(--sarre-color-primary), Sarré-Türkis #00B6C8, transparent */
	opacity: 0;
	transition: opacity 0.35s ease;
}
.sarre-entry-tiles__tile:hover::after,
.sarre-entry-tiles__tile:focus-visible::after {
	opacity: 1;
}
.sarre-entry-tiles__eyebrow {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sarre-color-accent);
}
.sarre-entry-tiles__heading {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0 0 var(--sarre-space-sm);
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	line-height: 1.2;
	color: var(--sarre-color-white);
}
.sarre-entry-tiles__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sarre-color-white);
}
.sarre-entry-tiles__link::after {
	content: '\2192';
	transition: transform 0.2s ease;
}
.sarre-entry-tiles__tile:hover .sarre-entry-tiles__link::after,
.sarre-entry-tiles__tile:focus-visible .sarre-entry-tiles__link::after {
	transform: translateX(0.25em);
}
@media (max-width: 900px) {
	.sarre-entry-tiles {
		flex-wrap: wrap;
	}
	.sarre-entry-tiles__tile {
		flex: 1 1 45%;
		min-height: 300px;
	}
}
@media (max-width: 600px) {
	.sarre-entry-tiles {
		flex-direction: column !important;
	}
	.sarre-entry-tiles__tile {
		flex: 1 1 auto;
		min-height: 300px;
	}
}

/* ==========================================================================
   Newsletter section scaffold (Homepage structure point 11) — CSS ONLY,
   no form/submission logic here: Brevo remains fully responsible for
   signup and double-opt-in, per the owner's explicit instruction ("noch
   keine eigene Formular-/Newsletterlogik programmieren"). Wrap Brevo's
   own embed markup (a Divi Code module) in a container with class
   `sarre-newsletter` and this block styles it to match the rest of the
   site. Brevo's generated embed typically renders a plain <form> with an
   email <input> and a submit <button>/<input type="submit">, so the
   generic element selectors below target those defensively — the result
   looks correct even without editing Brevo's own markup/classes. If
   Brevo's actual embed needs more specific overrides once it is in
   place, add them here rather than rebuilding this section.
   ========================================================================== */
.sarre-newsletter {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.sarre-newsletter__eyebrow {
	display: block;
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sarre-color-accent);
}
.sarre-newsletter__heading {
	margin: 0 0 var(--sarre-space-sm);
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
}
.sarre-newsletter__text {
	margin: 0 0 var(--sarre-space-md);
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.6;
}
.sarre-newsletter__form,
.sarre-newsletter form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sarre-space-sm);
	justify-content: center;
}
.sarre-newsletter__field,
.sarre-newsletter input[type="email"],
.sarre-newsletter input[type="text"] {
	flex: 1 1 240px;
	min-width: 0;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(36, 36, 36, 0.2);
	border-radius: 3px;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	background: var(--sarre-color-white);
	color: var(--sarre-color-anthracite);
}
.sarre-newsletter__submit,
.sarre-newsletter button,
.sarre-newsletter input[type="submit"] {
	flex: 0 0 auto;
	display: inline-block;
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border: none;
	border-radius: 3px;
	padding: 0.8rem 1.75rem;
	cursor: pointer;
	transition: filter 0.2s ease;
}
.sarre-newsletter__submit:hover,
.sarre-newsletter button:hover,
.sarre-newsletter input[type="submit"]:hover {
	filter: brightness(0.92);
}
@media (max-width: 480px) {
	.sarre-newsletter__form,
	.sarre-newsletter form {
		flex-direction: column;
	}
	.sarre-newsletter__submit,
	.sarre-newsletter button,
	.sarre-newsletter input[type="submit"] {
		width: 100%;
	}
}

/* ==========================================================================
   Brevo Newsletter-Formular (2026-09-25)

   The owner supplied Brevo's real signup-form embed. Per her explicit
   instruction, the Code-Module HTML keeps 100% of Brevo's own markup,
   ids, classes, field names/values, required-ness and both <script>
   blocks byte-for-byte unchanged (action URL, EMAIL, the OPT_IN
   double-opt-in checkbox, the "email_address_check" honeypot, the hidden
   "locale" field). Only Brevo's OWN <style> block and its external
   sib-styles.css <link> were dropped from the Code Module (pure
   presentation, no logic), and every inline style="" attribute Brevo
   generated was stripped so this stylesheet — not Brevo's — controls the
   look. Two small, purely cosmetic text edits were made directly in the
   Code Module (kept, not reverted here): the EMAIL placeholder and the
   button label were reworded; a few accessibility attributes were added
   to the honeypot. None of that touches field names, the action URL,
   required-ness or the opt-in logic.

   Selectors are anchored on Brevo's own ids (#sib-form, #sib-container,
   #sib-form-container) so they win over the generic
   `.sarre-newsletter form` / `input[type="text"]` fallback rules above
   without !important, and so nothing here can style an unrelated form
   elsewhere on the site.

   Two rules below are FUNCTIONALLY required, not just cosmetic — they
   replace behaviour Brevo's own (now removed) stylesheet used to
   provide, per this session's own reading of Brevo's main.js:
   - .sib-form-message-panel / --active: main.js toggles the --active
     class to show the success/error panel after submit; without a
     matching display:none default here, both panels would stay visible
     (empty) at all times.
   - .sib-hide-loader-icon: main.js removes this class while the request
     is in flight to reveal the button's spinner; without a matching
     display:none default here, the spinner would show permanently.

   Colors: #B3261E / #FDEDEC (error) and #1E7B4D / #E9F7EF (success) are
   NEW, non-brand literals — the project's confirmed color tokens above
   (design-token contract, mirrors docs/design-system.md 1:1, owner-
   approved) don't yet include a semantic error/success color, so nothing
   was added there; these two stay local to this block. Flagging this to
   the owner rather than deciding it silently — happy to swap for
   approved tokens on request.
   ========================================================================== */
.sarre-newsletter #sib-form-container {
	width: 100%;
}

/* Success/error message panels — hidden by default, shown by main.js via
   the --active class it toggles on submit/response. */
.sarre-newsletter .sib-form-message-panel {
	display: none;
	margin: 0 0 var(--sarre-space-sm);
	padding: var(--sarre-space-sm);
	border: 1px solid transparent;
	border-radius: var(--sarre-radius);
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: left;
}
.sarre-newsletter .sib-form-message-panel.sib-form-message-panel--active {
	display: block;
}
.sarre-newsletter #error-message.sib-form-message-panel {
	color: #B3261E;
	background: #FDEDEC;
	border-color: #F3B4AD;
}
.sarre-newsletter #success-message.sib-form-message-panel {
	color: #1E7B4D;
	background: #E9F7EF;
	border-color: #A9E0C1;
}
.sarre-newsletter .sib-form-message-panel__text {
	display: flex;
	align-items: flex-start;
	gap: var(--sarre-space-xs);
}
.sarre-newsletter .sib-form-message-panel .sib-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.15em;
	fill: currentColor;
}

/* Form layout: Brevo's markup is a vertical stack of field "blocks", not
   the simple email+button row the generic .sarre-newsletter form rule
   above assumes — override via the higher-specificity #sib-form id. */
.sarre-newsletter #sib-form {
	display: flex;
	flex-direction: column;
	gap: var(--sarre-space-sm);
	text-align: left;
}
.sarre-newsletter #sib-form .form__entry,
.sarre-newsletter #sib-form .form__label-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Field/opt-in labels ("Gib deine E-Mail-Adresse ein…", "Opt-in") stay in
   the DOM for accessibility (announced by screen readers, satisfies
   proper <label for> association) but are visually hidden, matching the
   owner's spec of exactly 3 visible elements (E-Mail-Feld,
   Datenschutz-/Einwilligungsbereich, Anmeldebutton) and the site's
   existing minimal placeholder-only newsletter design. Reuses the
   project's existing .sarre-visually-hidden utility class, added directly
   on these two <label> elements in the Code Module alongside Brevo's own
   "entry__label" class. */
.sarre-newsletter #sib-form input[type="text"]#EMAIL {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(36, 36, 36, 0.2);
	border-radius: 3px;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	background: var(--sarre-color-white);
	color: var(--sarre-color-anthracite);
}
.sarre-newsletter #sib-form input[type="text"]#EMAIL:focus {
	outline: 2px solid var(--sarre-color-primary);
	outline-offset: 1px;
}

/* Extra Brevo helper captions ("z. B. abc@xyz.com", the unsubscribe note)
   are not among the 3 requested visible elements — hidden by default.
   Left in the DOM/Code-Module untouched, so showing them again later is a
   one-line CSS change, not a markup change. */
.sarre-newsletter #sib-form .entry__specification {
	display: none;
}

/* Per-field validation error text — main.js sets this element's
   style.display directly (an inline style always wins over this rule),
   so this is only the empty/no-error default state. */
.sarre-newsletter #sib-form .entry__error--primary {
	display: none;
	margin: 0.25rem 0 0;
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	color: #B3261E;
}

/* Consent / opt-in area — the required "Datenschutz-/Einwilligungsbereich". */
.sarre-newsletter #sib-form .sib-optin .entry__choice label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}
.sarre-newsletter #sib-form .sib-optin input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.15em;
	accent-color: var(--sarre-color-primary);
}
.sarre-newsletter #sib-form .sib-optin .checkbox {
	display: none; /* Brevo's own custom-checkbox replacement graphic; the native checkbox above (styled via accent-color) replaces it visually. */
}
.sarre-newsletter #sib-form .sib-optin p {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
	text-align: left;
}
/* "Datenschutzerklärung" inside the consent text (2026-09-25 follow-up,
   [sarre_privacy_policy_link]) — no bare/unstyled link, same color
   treatment already used for the equivalent [sarre_privacy_note] link
   elsewhere on this Homepage section (.sarre-privacy-note a below).
   Nothing else in this Brevo block was touched for this follow-up. */
.sarre-newsletter #sib-form .sib-optin p a {
	color: var(--sarre-color-body-text);
	text-decoration: underline;
}
.sarre-newsletter #sib-form .sib-optin p a:hover,
.sarre-newsletter #sib-form .sib-optin p a:focus-visible {
	color: var(--sarre-color-primary);
}

/* Submit button — match the site's existing newsletter button look. */
.sarre-newsletter #sib-form .sib-form-block__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	align-self: flex-start;
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border: none;
	border-radius: 3px;
	padding: 0.8rem 1.75rem;
	cursor: pointer;
	transition: filter 0.2s ease;
}
.sarre-newsletter #sib-form .sib-form-block__button:hover {
	filter: brightness(0.92);
}
.sarre-newsletter #sib-form .sib-form-block__button svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
/* Loading spinner inside the button — hidden by default; main.js removes
   this class while the request is in flight to reveal it. */
.sarre-newsletter #sib-form .sib-hide-loader-icon {
	display: none;
}

/* Honeypot spam-protection field ("email_address_check") — must stay in
   the DOM, functional and empty, but never visible or reachable by
   keyboard/screen reader for a real visitor. Off-screen rather than
   display:none, mirroring how Brevo's own (removed) stylesheet hid it. */
.sarre-newsletter #sib-form input[name="email_address_check"] {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

@media (max-width: 480px) {
	.sarre-newsletter #sib-form .sib-form-block__button {
		align-self: stretch;
	}
}

/* ==========================================================================
   Homepage Imagefilm ([sarre_homepage_imagefilm], added 2026-09-21) — a
   click-to-play video teaser directly after "Drei Einstiege", NOT part of
   the Hero slider. This block only styles the poster/play-button/iframe
   states already present in the DOM — the decision of WHEN the iframe
   exists is entirely js/sarre-homepage-imagefilm.js's job (click-to-load,
   never on page load), not this stylesheet's. Same editorial language as
   the rest of this file: Georgia/serif heading via the shared
   `.sarre-heading-serif` utility (2026-09-02), Pink accent on the play
   button, no card shadow, minimal radius.
   ========================================================================== */
.sarre-homepage-imagefilm {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-homepage-imagefilm__intro {
	max-width: 640px;
	margin: 0 auto var(--sarre-space-lg);
	text-align: center;
}
/* `.sarre-heading-serif` (utility, 2026-09-02) supplies font-family/
   weight only, deliberately size-agnostic for reuse at different scales
   — this rule adds this section's own size/spacing on top of it. */
.sarre-homepage-imagefilm__heading {
	margin: 0 0 var(--sarre-space-sm);
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.15;
	color: var(--sarre-color-anthracite);
}
.sarre-homepage-imagefilm__text {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}

.sarre-homepage-imagefilm__player {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--sarre-color-anthracite); /* shows while the poster image is still loading, or if it 404s */
	background-size: cover;
	background-position: center;
	border-radius: 2px;
	overflow: hidden;
}
/* Subtle vignette so the poster reads as a graded teaser frame rather
   than a raw thumbnail, and so the Pink play button keeps contrast
   against any bright poster image. Removed once playing (the `is-playing`
   state), since the iframe itself needs no such treatment. */
.sarre-homepage-imagefilm__player:not(.is-playing)::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(36, 36, 36, 0.05) 0%, rgba(36, 36, 36, 0.35) 100%);
}
.sarre-homepage-imagefilm__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border: 2px solid var(--sarre-color-white);
	border-radius: 50%;
	background: rgba(233, 30, 99, 0.85); /* Color / Accent / Pink */
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.sarre-homepage-imagefilm__player:hover .sarre-homepage-imagefilm__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--sarre-color-accent);
}
/* Pure-CSS play triangle - no icon font/SVG needed, consistent with the
   pause/play glyph already used for the Hero (unicode there; a CSS
   border-triangle here reads crisper at this larger size). */
.sarre-homepage-imagefilm__play-icon {
	width: 0;
	height: 0;
	margin-left: 0.3rem; /* optical centering - a triangle's visual center sits left of its bounding box center */
	border-top: 0.7rem solid transparent;
	border-bottom: 0.7rem solid transparent;
	border-left: 1.1rem solid var(--sarre-color-white);
}
@media (prefers-reduced-motion: reduce) {
	.sarre-homepage-imagefilm__play {
		transition: none;
	}
}

.sarre-homepage-imagefilm__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 700px) {
	.sarre-homepage-imagefilm__play {
		width: 3.75rem;
		height: 3.75rem;
	}
}

/* ==========================================================================
   Homepage "Mit Sarré verbunden bleiben" (Milestone 6, 2026-09-24) — the
   closing two-column homepage section: manually-curated Social-Media
   collage ([sarre_homepage_social], left) + the existing Brevo Newsletter
   scaffold in a new visual card (right). Deliberately more compact/
   restrained than the Stimmen section above: smaller headings, less
   padding, no heavy shadow. Built entirely from existing Design Variables
   and the established light-turquoise "panel" tint (already used for the
   Aktuelles Hauptmeldung/Produktion panels) — no new hex colour anywhere
   in this block. No JS is required for this section.

   `.sarre-homepage-connect` → apply to the outer Divi Row (2 columns:
   Social left, Newsletter right). Same flex/stack pattern already
   established by `.sarre-editorial-split` above.

   Adds the section-level header above this row (`.sarre-connect-header*`,
   same eyebrow+serif-heading pattern already used by `.sarre-homepage-
   stimmen__intro`/`__heading` above — a plain Divi Code module, see
   docs/M6_HOMEPAGE_DIVI_ANLEITUNG.md §13a for the exact markup). The
   Social column (`.sarre-homepage-social`) is a single stacked column at
   every width — intro (eyebrow/heading/text) → collage → icons → cta, no
   inner grid/multi-column split (an earlier round briefly tried a ≥900px
   inner grid split here; it made both the text and the collage too
   narrow and was fully removed again — see git history if ever needed).
   ========================================================================== */
.sarre-connect-header {
	max-width: 640px;
	margin: 0 auto var(--sarre-space-lg);
	text-align: center;
}
.sarre-connect-header .sarre-eyebrow {
	text-align: center;
}
.sarre-connect-header__heading {
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	color: var(--sarre-color-anthracite);
}
/* Fourth follow-up (2026-09-25): the owner reported the H2 wrapping before
   "dir." on normal desktop widths. Widen the container (font-size/weight
   untouched) only from a "real desktop" width upward — below that the
   owner explicitly still wants the heading free to wrap, so the base
   640px max-width above stays the mobile/tablet default. 960px comfortably
   fits this exact heading in a single line at the clamp's ~44px maximum
   size, with margin to spare. */
@media (min-width: 900px) {
	.sarre-connect-header {
		max-width: 960px;
	}
}

/* FINAL, CLOSED (2026-09-25) — header→content spacing. Do not "clean up",
   compensate for, or re-derive this from CSS alone; it is a deliberate,
   owner-tested decision, not a leftover bug.

   Short history: the owner originally reported the gap between the header
   and the Social/Newsletter row as much too large (target ~50–70px). A
   series of CSS-only attempts here — zeroing the two Rows' own padding,
   reaching their ancestor via `:has()`, and (correctly, but for a
   different problem — Social/Newsletter not starting at the same height)
   a `justify-content` fix on `.sarre-homepage-social` — never fully
   closed the gap and were all removed again as dead code once disproven
   live. The owner then confirmed directly in Divi that the header Row and
   the `.sarre-homepage-connect` Row already sit in the SAME Divi Section
   (not two separate ones, as suspected), and closed the remaining gap
   herself with a Divi-native `margin-bottom: -80px` on the header ROW
   itself (Divi's own "Außenabstand unten" field — not anything in this
   stylesheet). She verified the result on desktop, tablet and phone.

   The 60px `margin-bottom` below stays as-is — it's still a real,
   necessary contributor to the final, approved spacing (combined with
   that -80px Divi Row setting), same "space-lg x multiplier" rhythm as
   the Stimmen section's own padding. Do not remove it and do not adjust
   the -80px Divi value without a new explicit request — this whole
   section (`.sarre-homepage-connect` and everything under it) is closed;
   see docs/M6_HOMEPAGE_DIVI_ANLEITUNG.md §13a. */
.sarre-connect-header {
	margin-bottom: calc(var(--sarre-space-lg) * 1.5);
}

.sarre-homepage-connect {
	display: flex !important;
	align-items: stretch;
	gap: var(--sarre-space-lg);
	/* Follow-up (2026-09-25, second layout pass): the owner asked for the
	   whole row (text/collage/newsletter) to use more of the available
	   desktop width so the collage can grow without just stretching
	   images inside a small box — same belt-and-suspenders max-width+auto-
	   margin technique already used for e.g. .sarre-entry-tiles, so it
	   works regardless of the Divi Row's own Max Width setting. */
	max-width: 1440px;
	margin: 0 auto;
}
@media (min-width: 961px) {
	/* Third follow-up (2026-09-25): the owner asked to drop the inner
	   text|collage two-column split inside the Social half (see below —
	   that @media(min-width:900px) grid rule from the previous round is
	   removed entirely) and instead give the Social column a content-
	   driven width so the collage itself can run nearly edge-to-edge
	   inside it (~450–500px). Setting an explicit flex-basis (rather than
	   leaving Divi's own 50/50 column width in effect) always wins over a
	   plain `width` for flex sizing purposes, so this works without
	   needing to touch Divi's own Row/column settings. The Newsletter
	   column (flex: 1 1 0, no basis) simply takes whatever space is left —
	   its own CSS (.sarre-newsletter-card etc.) is completely untouched,
	   it just ends up a bit wider on a big screen as a side effect of the
	   Social column no longer needing half the row. Structural (:first-
	   child/:last-child), not tied to Divi's own column class name. */
	.sarre-homepage-connect > *:first-child {
		flex: 0 1 560px;
	}
	.sarre-homepage-connect > *:last-child {
		flex: 1 1 0;
		min-width: 0;
	}
}
@media (max-width: 960px) {
	.sarre-homepage-connect {
		flex-direction: column !important;
	}
}

/* -- Left column: Social Media collage ([sarre_homepage_social]) -------- */
.sarre-homepage-social {
	display: flex;
	flex-direction: column;
	/* Sixth follow-up (2026-09-25): found the ACTUAL remaining source of the
	   large header→content gap the owner kept flagging — it was never a
	   margin/padding value at all. `.sarre-homepage-connect` (the outer
	   Row) uses `align-items: stretch`, so this column is stretched to
	   match the taller Newsletter card's height; with `height: 100%` here
	   and `justify-content: center` (as it was), this block's own content
	   (intro/collage/icons/cta — a fixed, shorter height) gets vertically
	   CENTERED inside that taller stretched box, pushing "Auf Social
	   Media" down from the column's actual top edge by roughly half the
	   leftover space — independent of any margin/padding, and exactly
	   reproducing the symptom (content starts well below where the row
	   itself begins). Changing this one value to `flex-start` makes the
	   content sit flush at the top of the stretched column instead, so the
	   only remaining gap above it is the header's own explicit 60px
	   margin-bottom (`.sarre-connect-header` above) — nothing inside this
	   block's own spacing (intro/collage/icons/cta gaps) changes, and the
	   Newsletter column/card is untouched (still stretches to full height
	   as before). */
	justify-content: flex-start;
	height: 100%;
}
.sarre-homepage-social__intro {
	margin: 0 0 var(--sarre-space-md);
}
.sarre-homepage-social__heading {
	margin: 0 0 var(--sarre-space-xs);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--sarre-color-anthracite);
}
.sarre-homepage-social__text {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}

/* Collage: one larger image (left/main) + two smaller stacked images
   (right/side). `align-items: stretch` (flex default) makes the side
   column match the main image's height, which itself is fixed via
   `aspect-ratio` — no JS measurement needed. */
.sarre-homepage-social__collage {
	display: flex;
	gap: var(--sarre-space-sm);
	margin: 0 0 var(--sarre-space-md);
}
.sarre-homepage-social__collage-main {
	position: relative;
	flex: 2 1 0; /* main:side ≈ 2:1 (2026-09-25 follow-up, was 1.2:1) — the large tile takes roughly 2/3 of the collage width, per the owner's reference mockup */
	min-width: 0;
	aspect-ratio: 4 / 5;
	border-radius: var(--sarre-radius);
	overflow: hidden;
	background: var(--sarre-color-light); /* shows briefly while the image loads */
}
.sarre-homepage-social__collage-side {
	display: flex;
	flex-direction: column;
	gap: var(--sarre-space-sm);
	flex: 1 1 0;
	min-width: 0;
}
.sarre-homepage-social__image {
	position: relative; /* Containing block for .sarre-homepage-social__reel-icon on a --side tile; harmless on --main, which overrides to position: absolute below. */
	display: block;
	background: var(--sarre-color-light);
	border-radius: var(--sarre-radius);
	overflow: hidden;
}
.sarre-homepage-social__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-homepage-social__image--main {
	position: absolute;
	inset: 0;
	border-radius: 0; /* the rounding already lives on the ::collage-main container */
}
.sarre-homepage-social__image--side {
	flex: 1 1 0;
	min-height: 0;
}
/* Small circular Instagram badge, overlaid on the main collage image. Only
   rendered when at least the main image is present (see shortcode PHP). */
.sarre-homepage-social__badge {
	position: absolute;
	left: var(--sarre-space-sm);
	bottom: var(--sarre-space-sm);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--sarre-color-white);
	color: var(--sarre-color-anthracite);
	box-shadow: 0 1px 3px rgba(43, 46, 51, 0.12);
}
a.sarre-homepage-social__badge:hover,
a.sarre-homepage-social__badge:focus-visible {
	color: var(--sarre-color-primary);
}

/* Small reel/play badge, overlaid on any collage tile whose content is a
   Reel (Instagram-Anbindung, 2026-09-25) — same circular/shadow language
   as .sarre-homepage-social__badge above (top-right instead of
   bottom-left, so the two never collide on the main tile), purely
   decorative (aria-hidden, no click target of its own — the whole tile
   is already the link to that Reel on Instagram). */
.sarre-homepage-social__reel-icon {
	position: absolute;
	top: var(--sarre-space-xs);
	right: var(--sarre-space-xs);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: rgba(36, 36, 36, 0.55);
	color: var(--sarre-color-white);
	box-shadow: 0 1px 3px rgba(43, 46, 51, 0.12);
}

/* Channel icon row (fallback / complement when no images are curated yet,
   or shown alongside the collage). */
.sarre-homepage-social__icons {
	display: flex;
	gap: var(--sarre-space-sm);
	margin: 0 0 var(--sarre-space-sm);
}
.sarre-homepage-social__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid rgba(36, 36, 36, 0.12);
	color: var(--sarre-color-anthracite);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sarre-homepage-social__icon:hover,
.sarre-homepage-social__icon:focus-visible {
	background: var(--sarre-color-primary);
	border-color: var(--sarre-color-primary);
	color: var(--sarre-color-white);
}
.sarre-homepage-social__cta {
	margin-top: var(--sarre-space-xs);
}

/* Third follow-up (2026-09-25): the owner asked to dissolve the inner
   text|collage two-column grid split that used to live here (see git
   history / earlier comments in this file for the removed
   `@media (min-width: 900px) { .sarre-homepage-social { display: grid; ... } }`
   block) — it made both the text and the collage too narrow. The Social
   column is now simply stacked at every width (intro → collage → icons →
   cta), using only the base flex-column rule above. The collage itself
   gets significantly more room instead via the OUTER row split above
   (`.sarre-homepage-connect > *:first-child { flex: 0 1 560px; }`), which
   gives this whole Social column a wider, content-driven share of the row.
   This rule just caps the collage's own width so it lands in the owner's
   requested ~450–500px range within that 560px column (560px minus the
   column's internal left/right padding, if any, from Divi's own Row/Column
   settings — please flag if it still isn't in range once you see it live). */
@media (min-width: 961px) {
	.sarre-homepage-social__collage {
		max-width: 500px;
	}
}

/* -- Right column: Newsletter card --------------------------------------
   `.sarre-newsletter-card` is a NEW, purely additive wrapper — the
   existing `.sarre-newsletter*` rules above are completely untouched, so
   any other future use of `.sarre-newsletter` elsewhere is unaffected.
   Apply `sarre-newsletter-card` as the CSS Class of the Newsletter Column
   (or an outer wrapping element), and keep the existing
   `<div class="sarre-newsletter">...</div>` markup/Brevo embed inside it
   exactly as already documented. Reuses the same light-turquoise tint
   already established for the Aktuelles/Produktion panels. */
.sarre-newsletter-card {
	position: relative; /* containing block for the decorative accent below */
	/* 2026-10-05: Tönung 0.07 → 0.14 (bereits verwendeter Wert, vgl.
	   .sarre-aktuelles-card__media--fallback), damit sich die Karte vom neuen
	   hellgrauen Sektionshintergrund (--sarre-color-light) abhebt. */
	background: linear-gradient(rgba(0, 182, 200, 0.14), rgba(0, 182, 200, 0.14)), var(--sarre-color-white);
	border-radius: var(--sarre-radius);
	padding: var(--sarre-space-lg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.sarre-newsletter-card .sarre-newsletter {
	margin: 0 auto;
}

/* Follow-up (2026-09-25, reference-mockup layout pass): the card reads
   noticeably larger/wider in the reference than the base rule above gives
   it on a normal desktop viewport — more padding, and the inner
   `.sarre-newsletter` (max-width: 640px in its own base rule, so it also
   works as a smaller standalone block elsewhere) is let to fill the full
   card width here instead of capping out early. Only the CARD's own
   layout is touched — nothing inside the Brevo form itself (input/button/
   message-panel rules above, all added and confirmed working in the
   previous round) was changed. */
@media (min-width: 900px) {
	.sarre-newsletter-card {
		padding: 3rem;
	}
	.sarre-newsletter-card .sarre-newsletter {
		max-width: none;
		width: 100%;
	}
}

/* Small decorative accent (top-right), matching the owner's reference
   mockup. 2026-09-25 follow-up: the owner asked for the original 3-stroke
   placeholder graphic to be replaced with the site's own, already-existing
   Sarré icon/signet — found in the Media Library (not redrawn/invented):
   "Sarre_Logo_Figuren-quadrat" (the square "running figures" icon also
   used as the site icon/favicon), reusing its existing 150×150 WordPress
   thumbnail size (small enough for a ~60px decorative use, no extra
   full-size download). Referenced by its real uploads path directly, since
   a plain CSS background-image can't call wp_get_attachment_image_url();
   the filename/path only changes if this exact media item is replaced —
   flag it if you ever do that. Purely ornamental (a background image on a
   ::before, so it is invisible to/skipped by screen readers with no aria
   attribute needed). The icon's own colours are used as-is (not
   recoloured via CSS). */
.sarre-newsletter-card::before {
	content: '';
	position: absolute;
	top: var(--sarre-space-md);
	right: var(--sarre-space-md);
	width: 3.75rem;
	height: 3.75rem;
	background-image: url("/wp-content/uploads/2026/09/Sarre_Logo_Figuren-quadrat-150x150.png");
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}
@media (max-width: 480px) {
	.sarre-newsletter-card::before {
		display: none; /* keeps the small mobile card uncluttered */
	}
}

/* Small, muted privacy note ([sarre_privacy_note]) — placed directly under
   the Newsletter form/Brevo embed. Deliberately understated: this is a
   compliance line, not a call-to-action. */
.sarre-privacy-note {
	margin: var(--sarre-space-sm) 0 0;
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
	text-align: center;
}
.sarre-privacy-note a {
	color: var(--sarre-color-body-text);
	text-decoration: underline;
}
.sarre-privacy-note a:hover,
.sarre-privacy-note a:focus-visible {
	color: var(--sarre-color-primary);
}

@media (max-width: 700px) {
	.sarre-homepage-social__collage-main {
		aspect-ratio: 3 / 4;
	}
}
@media (max-width: 480px) {
	.sarre-homepage-social__collage {
		flex-direction: column;
	}
	.sarre-homepage-social__collage-main {
		aspect-ratio: 16 / 10;
	}
	.sarre-homepage-social__collage-side {
		flex-direction: row;
	}
}

/* --------------------------------------------------------------------------
   KI-Kennzeichnung (2026-09-29) — zentrales, dezentes Badge für Bilder mit
   gesetztem `ki_kennzeichnung`-Attachment-Feld (siehe includes/media-
   helpers.php, sarre_core_get_ai_label_badge_html()). Ein einziges Markup/
   CSS-Paar für alle Einsatzstellen: kleine, gut lesbare Schrift, halb-
   transparenter Anthrazit-Hintergrund, helle Schrift, geringer Innenabstand,
   keine Signalfarbe, kein Icon. `pointer-events: none`, damit das Badge nie
   Klicks/Lightbox-Trigger/Links des darunterliegenden Bildes blockiert.
   Positionierung: unten rechts im Bild (Standard). Die einzige Ausnahme ist
   der Homepage-Hero (`--hero`-Modifier): dort sitzt das Badge oben rechts,
   um jede Kollision mit der weiterhin unten positionierten Slider-
   Navigation/dem Pause-Button zu vermeiden — an keiner der beiden Stellen
   wird ein Icon oder eine zusätzliche Fläche ergänzt, die das Bild optisch
   beeinträchtigt. Erscheint nur, wenn der Helper tatsächlich HTML liefert
   (Zustand "Keine KI-Kennzeichnung" liefert '' zurück) — daher an keiner
   Aufrufstelle ein Layoutunterschied, wenn keine Kennzeichnung gesetzt ist.
   -------------------------------------------------------------------------- */
.sarre-ai-label {
	position: absolute;
	right: var(--sarre-space-xs);
	bottom: var(--sarre-space-xs);
	z-index: 2;
	max-width: calc(100% - (2 * var(--sarre-space-xs)));
	padding: 0.2em 0.55em;
	background: rgba(36, 36, 36, 0.72);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	border-radius: 2px;
	pointer-events: none;
	white-space: normal;
}
.sarre-ai-label--hero {
	top: var(--sarre-space-sm);
	right: var(--sarre-space-sm);
	bottom: auto;
}
@media (min-width: 701px) {
	.sarre-ai-label--hero {
		top: var(--sarre-space-lg);
		right: var(--sarre-space-lg);
	}
}
@media (max-width: 480px) {
	.sarre-ai-label {
		font-size: 0.625rem;
		padding: 0.2em 0.5em;
		right: 0.375rem;
		bottom: 0.375rem;
	}
	.sarre-ai-label--hero {
		top: 0.375rem;
		right: 0.375rem;
	}
}

/* Produktions-Hero — VORBEREITET, 2026-09-29, noch INAKTIV. Diese Klasse
   existiert im aktuellen Markup nirgends (die Hero-Section wird
   ausschließlich von Divi selbst gerendert, siehe docs/M2_4_SCHRITT_2_
   PRODUKTION_SINGLE.md) - die Regel greift also erst, sobald der Owner sie
   einmalig manuell im CSS-Class-Feld der bestehenden Hero-Section in Divi
   einträgt (siehe Bericht). Ankerpunkt für das per wp_footer nachträglich
   angehängte .sarre-ai-label-Badge, siehe includes/media-helpers.php,
   sarre_core_render_production_hero_ai_label(). Die bestehende, fertige
   Hero-Section selbst wird durch diese Regel nicht verändert. */
.sarre-production-hero {
	position: relative;
}

/* ==========================================================================
   Globaler Footer (Footer-Milestone, 2026-09-29)

   Hintergrund bewusst Türkis (--sarre-color-primary) - ausdrückliche
   Design-Entscheidung der Website-Inhaberin, nicht Anthrazit. Text
   durchgehend Weiß/sehr helles Grau, Pink nur als sehr sparsamer
   Hover-Akzent, keine weiteren kräftigen Farben. Das HTML dieser Klassen
   liefern die Footer-Shortcodes ([sarre_footer_brand|nav|contact|social|
   bottom], sarre-core/includes/footer-shortcodes.php) innerhalb eines
   global Divi-Theme-Builder-Footers - diese Klassen sind die Übergabe an
   Divi (Section/Row/Modul-CSS-Klasse), siehe die Divi-Anleitung im
   Abschlussbericht. Bestehende Rules oberhalb dieses Blocks werden nicht
   verändert.

   Breakpoints wie im übrigen Projekt: Mobile <=700px, Tablet 701-1023px,
   Desktop >=1024px (vgl. z. B. die Regeln bei Zeile ~1858/1869).

   Nachbesserung (nach dem manuellen Divi-Aufbau des Footers): im Frontend
   kamen die vier Spalten viel zu schmal an (Adresse/Telefon brachen fast
   wortweise um, die Schlusszeile hing mit riesigem Leerraum darunter).
   Ursache: Divi legt eigene Breiten-/Flex-/Padding-Werte per Inline-Style
   auf seine Row-/Column-Elemente - ein externer, NICHT als !important
   markierter Wert verliert dagegen immer, unabhängig von der
   Selektor-Spezifität. Die layout-kritischen Eigenschaften unten
   (display/grid-template-columns/width/max-width/margin/padding) sind
   deshalb gezielt mit !important versehen - ausschließlich innerhalb von
   .sarre-footer, kein anderer Bereich der Website ist betroffen. An
   Divi selbst (Template/Section/Row/Module) wurde nichts geändert. */
.sarre-footer,
.sarre-footer *,
.sarre-footer *::before,
.sarre-footer *::after {
	box-sizing: border-box;
}
.sarre-footer {
	background-color: var(--sarre-color-primary);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-body);
	/* Falls Divi zwischen den beiden Rows (Hauptreihe/Schlusszeile) einen
	   eigenen Row-Abstand auf der Section selbst setzt (z. B. per
	   flex/grid "gap" der Section) - hier zusätzlich zum Padding-Reset
	   auf den Rows selbst neutralisiert, ausschließlich innerhalb des
	   Footers. */
	row-gap: 0 !important;
	gap: 0 !important;
	/* Absicherung für den "Breakout" unten (100vw-Trick): falls die
	   Seite eine vertikale Scrollbar hat, ist 100vw minimal breiter als
	   der sichtbare Viewport - ohne diese Zeile könnte das theoretisch
	   eine horizontale Mini-Scrollbar erzeugen. Wirkt nur innerhalb des
	   Footers, nichts anderes auf der Seite ist betroffen. */
	overflow-x: hidden;
}
.sarre-footer a {
	color: var(--sarre-color-white);
}
.sarre-footer a:hover,
.sarre-footer a:focus-visible {
	color: var(--sarre-color-accent);
}
/* Auf Seiten mit aktivem Divi-Theme-Builder-BODY-Template (zusaetzlich
   zum Footer-Template - erkennbar an der Body-Klasse et-tb-has-body,
   z. B. /termine/, /workshops/, /produktionen/) liefert Divi eine
   gecachte globale Customizer-CSS-Datei
   (et-cache/global/et-divi-customizer-tb-<body-id>-tb-<footer-id>.min.css)
   aus, die die Link-Farbe absichtlich verschaerft auf
   "a, .et-db #et-boc .et-l a" setzt. Durch den ID-Selektor #et-boc ist
   das spezifischer als die Regel oben und gewinnt unabhaengig von der
   Ladereihenfolge - Footer-Linktext wird dadurch tuerkis auf tuerkisem
   Hintergrund, also unsichtbar. Auf Seiten ohne TB-Body-Template (z. B.
   Startseite, Datenschutz, Impressum) liefert Divi dieselbe Regel nur als
   einfaches "a" inline aus, das schwaecher ist als unsere obige Regel -
   dort tritt der Fehler deshalb nicht auf. Diese Zeile adressiert gezielt
   denselben Theme-Builder-DOM-Kontext, den Divis eigene Regel nutzt
   (#et-boc .et-l), statt einzelner Post-Type-Sonderregeln, und ist damit
   unabhaengig davon gueltig, ob/welche weiteren CPT-Archivseiten
   zukuenftig ebenfalls ein TB-Body-Template erhalten. */
.et-db #et-boc .et-l .sarre-footer a {
	color: var(--sarre-color-white);
}

/* Breite: der ursprüngliche Ansatz (max-width + margin:auto auf
   .sarre-footer__main selbst) griff nicht wie gewünscht, weil ein Divi-
   eigener Eltern-Wrapper der Row (Row-/Row-Inner-Container) offenbar
   selbst schon eine engere Breite/einen Flex-Basis-Wert vorgibt - unsere
   Breite wurde dadurch relativ zu diesem bereits geschrumpften
   Elternelement berechnet, nicht relativ zur tatsächlichen Seitenbreite.
   Da der genaue Divi-Klassenname dieses Wrappers ohne Live-Zugriff auf
   das DOM nicht zuverlässig bestimmbar ist (siehe Abschlussbericht),
   umgeht der folgende, etablierte "Full-Bleed"-CSS-Trick das Problem
   grundsätzlich: die Row wird unabhängig von jedem Eltern-Wrapper auf
   100vw (echte Viewport-Breite) verbreitert (funktioniert zuverlässig,
   solange der Eltern-Container auf der Seite zentriert ist - Standardfall
   bei Divi), und die eigentliche, lesbare Inhaltsbreite entsteht danach
   ausschließlich über das Padding: min(1280px, calc(100% - 80px)),
   exakt wie vorgegeben. */
.sarre-footer__main {
	display: grid !important;
	grid-template-columns: 1fr !important;
	align-items: start;
	gap: var(--sarre-space-lg);
	width: 100vw !important;
	max-width: 100vw !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	/* Vertikales Padding reduziert (Owner-Feinschliff, 2026-09-30): der
	   Footer sollte insgesamt kompakter wirken. Reine Abstandswerte -
	   Breite/Ausrichtung/Spaltenlogik bleiben unangetastet. */
	padding-top: var(--sarre-space-sm) !important;
	padding-right: max(40px, calc((100vw - 1280px) / 2)) !important;
	padding-bottom: var(--sarre-space-xs) !important;
	padding-left: max(40px, calc((100vw - 1280px) / 2)) !important;
}
@media (min-width: 701px) and (max-width: 1023px) {
	.sarre-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
/* Spaltenbreite Desktop - per Live-DevTools bestätigte DOM-Struktur
   (2026-09-30), ersetzt den vorherigen, auf Vermutungen gestützten
   Ansatz vollständig:

     .et_pb_column (echte Divi-Spalte, direktes Kind dieser Row)
       > .et_pb_code.et_pb_module.sarre-footer__col (Code-Modul - UNSERE
         Klasse sitzt HIER, nicht auf der Spalte selbst)
         > .et_pb_code_inner
           > .sarre-footer__brand|nav|contact|social (Shortcode-Root)

   Entfernt wurden dadurch zwei nachweislich falsche/überflüssige
   Workarounds: (1) `grid-template-columns` mit `fr`-Anteilen auf
   `.sarre-footer__main` - ging implizit davon aus, dass die vier
   direkten Kinder der Row bereits die richtige Breite bräuchten, ohne
   dass irgendwo ein Gegenwert für die Spalte selbst gesetzt wurde; (2)
   `flex`-Verhältnisse per `nth-child` auf `.sarre-footer__col` - das
   adressierte nie die Spalte, sondern das Code-Modul zwei Ebenen zu
   tief, siehe DOM oben. Divi setzt auf der echten `.et_pb_column`
   offenbar eine eigene, nicht in den lokal verfügbaren CSS-Dateien
   auffindbare Breite (Klassen wie `et_pb_c_6_24`) - dagegen hilft nur
   ein direkter, ausschließlich auf diese Footer-Row beschränkter
   Override auf `.et_pb_column` selbst. Die Row wird dafür auf Desktop
   explizit zur Flexbox erklärt (deckt sich mit dem in der Divi-CSS
   bestätigten `.et_flex_row`-System) - `flex-basis` in Prozent bezieht
   sich dabei zuverlässig auf die GESAMTE Zeile, nicht auf die einzelne
   Spalte, und kann sich daher (anders als eine Breiten-Prozentangabe
   auf einem CSS-Grid-Element) nicht mit einer weiteren Prozentangabe
   auf der Spalte selbst "aufschaukeln". Basis-/Tablet-Verhalten
   (Grid, 1 bzw. 2 Spalten) bleibt unverändert - dort wurde kein Problem
   gemeldet, dieselbe Divi-eigene responsive Spaltenbreite
   (`et_flex_column_12_24_tablet`/`_24_24_phone`) greift dort weiterhin. */
@media (min-width: 1024px) {
	.sarre-footer__main {
		display: flex !important;
		flex-wrap: nowrap;
		/* Feinschliff (Owner, 2026-09-30): Spaltenabstand von lg auf sm
		   reduziert, damit die vier Spalten als eine optisch
		   zusammengehörige Gruppe wirken statt einzeln "auseinandergezogen"
		   - betrifft ausschließlich den gap-Wert zwischen den Spalten, NICHT
		   die darunter festgelegten, jetzt funktionierenden Breiten
		   (flex-basis/max-width je nth-child bleiben unverändert). */
		gap: var(--sarre-space-sm);
	}
	.sarre-footer__main > .et_pb_column:nth-child(1) {
		flex: 0 0 24% !important;
		max-width: 24% !important;
	}
	.sarre-footer__main > .et_pb_column:nth-child(2) {
		flex: 0 0 20% !important;
		max-width: 20% !important;
	}
	.sarre-footer__main > .et_pb_column:nth-child(3) {
		flex: 0 0 36% !important;
		max-width: 36% !important;
	}
	.sarre-footer__main > .et_pb_column:nth-child(4) {
		flex: 0 0 20% !important;
		max-width: 20% !important;
	}
}
/* Innerhalb der jetzt korrekt breiten Spalte dürfen das Code-Modul
   (`.sarre-footer__col`), sein Divi-eigener Inner-Wrapper
   (`.et_pb_code_inner`, = `.sarre-footer__col > *`) und die vom
   Footer-Shortcode selbst gerenderte Wurzel (`.sarre-footer__col > * >
   *`) keine eigene Breite mehr verlieren - `max-width: none` statt nur
   `100%`, damit dort wirklich keine Obergrenze mehr existiert. Betrifft
   nur diese drei Ebenen, nicht das vom Shortcode selbst gerenderte
   Markup darunter (das bleibt unverändert unangetastet). */
.sarre-footer__col {
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
}
.sarre-footer__col > *,
.sarre-footer__col > * > * {
	width: 100% !important;
	max-width: none !important;
}

/* Spalte 1: Marke */
.sarre-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--sarre-space-xs);
}
.sarre-footer__brand-logo {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
	/* Das Site-Icon-Bild selbst ist türkis/mehrfarbig und auf türkisem
	   Footer-Hintergrund kaum sichtbar. Das globale Site Icon bleibt
	   unangetastet (nur diese eine <img>-Instanz im Footer wird beim
	   Rendern per CSS-Filter umgefärbt): brightness(0) macht jedes
	   sichtbare Pixel schwarz (Transparenz bleibt erhalten), invert(1)
	   dreht das anschließend zu Weiß - ein sauberes weißes Signet statt
	   eines Versuchs, den Originalton nur "aufzuhellen" (der bliebe bei
	   einem türkisfarbenen Icon auf türkisem Grund ohnehin kontrastarm). */
	filter: brightness(0) invert(1);
	opacity: 0.92;
}
.sarre-footer__brand-name {
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
}
.sarre-footer__brand-claim {
	margin: 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
}

/* Spalte 2: Navigation */
.sarre-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--sarre-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-footer__nav-list a {
	text-decoration: none;
	font-size: 0.9375rem;
}
.sarre-footer__nav-list a:hover,
.sarre-footer__nav-list a:focus-visible {
	text-decoration: underline;
}

/* Spalte 3: Kontakt - Telefon/E-Mail bewusst ohne Zeilenumbruch (nowrap);
   die Adresse (mehrzeilig via nl2br) bricht ganz normal an Wortgrenzen. */
.sarre-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--sarre-space-xs);
}
.sarre-footer__contact-line {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.sarre-footer__contact-line a {
	text-decoration: none;
	white-space: nowrap;
}
.sarre-footer__contact-line a:hover,
.sarre-footer__contact-line a:focus-visible {
	text-decoration: underline;
}

/* Spalte 4: Social Media */
.sarre-footer__social {
	display: flex;
	gap: var(--sarre-space-sm);
}
.sarre-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
}
.sarre-footer__social-icon:hover,
.sarre-footer__social-icon:focus-visible {
	border-color: var(--sarre-color-white);
}

/* Schlusszeile - vollständig neu aufgesetzt nach Owner-Live-DOM-Prüfung
   (2026-09-30). Bisheriger Ansatz ging von `.sarre-footer > .sarre-
   footer__bottom` aus (Annahme: die Klasse sarre-footer__bottom sitzt
   auf der Divi-ROW, direktem Kind der Section). Per DevTools jetzt
   widerlegt - bestätigter DOM:

     .et_pb_row_1_tb_footer                              (Row)
       > .et_pb_column_4_tb_footer                        (Spalte)
         > .et_pb_code_4_tb_footer.sarre-footer__bottom    (Code-MODUL)
           > .et_pb_code_inner
             > div.sarre-footer__bottom                    (Shortcode-Div)
               > span.sarre-footer__copyright
               > nav.sarre-footer__legal

   Die Klasse sarre-footer__bottom sitzt auf ZWEI Elementen (Modul UND
   Shortcode-Div) - NICHT auf Row oder Spalte. `.sarre-footer > .sarre-
   footer__bottom` hat dadurch in der realen Seite nie ein Element
   getroffen (kein direktes Kind der Section trägt diese Klasse) - alle
   bisherigen Full-Bleed-Korrekturen dieser Zeile liefen faktisch ins
   Leere, was den anhaltenden Versatz erklärt. Neu: jede Ebene einzeln,
   über die vom Owner bestätigten, stabilen Divi-Klassennamen dieser
   Schlusszeile direkt verschachtelt angesprochen - die doppelt vergebene
   Klasse sarre-footer__bottom wird für Modul und Shortcode-Div ab jetzt
   NICHT mehr gemeinsam behandelt. Keine Full-Bleed-/100vw-Technik mehr
   nötig: die Row wird nicht auf Viewportbreite ausgebrochen, sondern nur
   von Divis eigenem Default befreit (in et-cache gefunden:
   `.et_pb_row:not([class*=et_flex_column])` begrenzt u. a. auf
   max-width:1080px, margin:auto) und auf 100 % ihres eigenen, bereits
   randlosen Eltern-Elements (der Section `.sarre-footer`) gesetzt -
   dieselbe Innenabstandsformel wie bei der Hauptreihe. */
.sarre-footer .et_pb_row_1_tb_footer {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-top: var(--sarre-space-xs) !important;
	padding-right: max(40px, calc((100vw - 1280px) / 2)) !important;
	padding-bottom: var(--sarre-space-sm) !important;
	padding-left: max(40px, calc((100vw - 1280px) / 2)) !important;
}
/* Spalte: liegt bereits innerhalb des Row-Innenabstands oben - füllt
   dadurch automatisch exakt dieselbe Contentbreite wie Spalte 1 der
   Hauptreihe. Trennlinie bewusst HIER gesetzt (nicht auf der Row, die
   bis an den Section-Rand reicht), damit sie exakt über die
   Contentbreite läuft statt über die volle Row-/Section-Breite. */
.sarre-footer .et_pb_row_1_tb_footer > .et_pb_column_4_tb_footer {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
/* Modul: nur Breite/Rand befreit, bewusst OHNE die Flex-/Text-
   Eigenschaften des eigentlichen Inhalts - die gehören ausschließlich
   dem inneren, vom Shortcode gerenderten Div weiter unten. Genau diese
   Vermischung beider gleichnamiger Elemente war der Punkt, den der Owner
   ausdrücklich angemahnt hat. */
.sarre-footer .et_pb_column_4_tb_footer > .et_pb_code_4_tb_footer {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.sarre-footer .et_pb_code_4_tb_footer > .et_pb_code_inner {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Inneres Shortcode-Div: einzige Stelle, die noch die Layout-/Text-
   Eigenschaften des eigentlichen Inhalts (Copyright + Rechtliches)
   trägt - eindeutig über den direkten Eltern-Selektor .et_pb_code_inner >
   adressiert, dadurch garantiert NICHT mehr gleichzeitig auf dem
   gleichnamigen Code-Modul wirksam. */
.sarre-footer .et_pb_code_inner > .sarre-footer__bottom {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: var(--sarre-space-xs);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
}
.sarre-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.sarre-footer__legal a {
	text-decoration: none;
	white-space: nowrap;
}
.sarre-footer__legal a:hover,
.sarre-footer__legal a:focus-visible {
	text-decoration: underline;
}
.sarre-footer__legal-sep {
	margin: 0 var(--sarre-space-xs);
	opacity: 0.6;
}
@media (min-width: 701px) {
	.sarre-footer .et_pb_code_inner > .sarre-footer__bottom {
		flex-direction: row;
		/* Owner-Anforderung (2026-09-30): Copyright und Datenschutz sollen
		   links nebeneinander stehen, statt wie zuvor per space-between an
		   die beiden Enden der Zeile auseinandergezogen zu werden. Der
		   horizontale Abstand zwischen beiden kommt vom bereits oben
		   gesetzten gap (--sarre-space-xs), hier nicht erneut nötig. */
		justify-content: flex-start;
		align-items: center;
		text-align: left;
	}
	.sarre-footer__legal {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Produktionsübersicht (/produktionen/, 2026-09-30) — [sarre_productions_page]
   on the new "Archiv: Produktion" Theme Builder template. Entirely new,
   namespaced `.sarre-productions-page-*` (plus the new shared, generic
   `.sarre-productions-grid`), so this page can never bleed into or be
   affected by the Produktion-Single, Homepage, or any other existing area.
   Reuses only already-existing tokens/breakpoints/utilities established
   elsewhere in this file (--sarre-space-*, --sarre-content-max-width,
   .sarre-eyebrow, .sarre-heading-serif, .sarre-link-editorial--pink,
   .sarre-newsletter) — no new colour, no new font, no new breakpoint value.
   ========================================================================== */

/* -- Hero ------------------------------------------------------------------
   Rebuilt 2026-09-30 (owner-approved) to reuse the Produktion-Single Hero's
   own visual system as close to 1:1 as an archive-page context allows,
   instead of a separately-designed Hero: same 700px desktop min-height,
   same right-positioned background image with the same Primärfarbe ->
   transparent 90° gradient wash over it, same left-aligned ~40%-wide text
   column with the same 130px top offset / 7% left inset, same Kicker/H1/
   Intro typography, same colors. Every value below (130px, 7%/5%, 700px,
   76/46/36px, the two font stacks, the exact gradient stops) was read
   directly from the live Produktion-Single Hero's own Divi module settings
   and Divi's Primary/Secondary/"Weiss" global colors (confirmed via direct
   DB read to be the exact same hex values as --sarre-color-primary /
   --sarre-color-accent / --sarre-color-white below — not guessed). Only
   the production-specific elements (Termine, Icons, Ticketbutton, Status)
   are intentionally not carried over, as instructed — this section has no
   single Produktion to bind them to. Background image is pflegbar via the
   "Produktionsübersicht – Hero" ACF Options group (productions_hero_image);
   with no image set, the same gradient sits over a dark Anthrazit/Türkis
   panel instead, so the section never looks empty/broken.
   The section is deliberately broken out to full viewport width (it can
   sit nested inside a Divi Column here, unlike the native Divi Section on
   Produktion-Single) so its background still spans edge-to-edge like the
   original; the text content itself stays inside the same
   --sarre-content-max-width wrapper used sitewide. */
.sarre-productions-page-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 700px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--sarre-color-anthracite);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
}
.sarre-productions-page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-productions-page-hero__row {
	width: 40%;
	margin-top: 130px;
	padding-left: 7%;
	padding-right: var(--sarre-space-md);
	box-sizing: border-box;
}
.sarre-productions-page-hero__eyebrow {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2em;
	margin: 0 0 var(--sarre-space-xs);
}
.sarre-productions-page-hero__heading {
	margin: 0 0 var(--sarre-space-sm);
	color: var(--sarre-color-white);
	font-size: 76px;
	font-weight: 500 !important;
	line-height: 1.05em !important;
	letter-spacing: -1px !important;
	text-transform: uppercase;
}
.sarre-productions-page-hero__intro {
	max-width: 480px;
	margin: 0;
	color: var(--sarre-color-white);
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	line-height: 1.4em;
}
@media (max-width: 900px) {
	.sarre-productions-page-hero__row {
		width: 80%;
		padding-left: 5%;
		padding-right: 5%;
	}
	.sarre-productions-page-hero__heading {
		font-size: 46px;
	}
}
@media (max-width: 700px) {
	.sarre-productions-page-hero__row {
		width: 100%;
		padding-left: 7%;
		padding-right: 7%;
	}
	.sarre-productions-page-hero__heading {
		font-size: 36px;
	}
}

/* -- Section header (Aktuell / Archiv) ------------------------------------ */
.sarre-productions-page-section {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-productions-page-section__header {
	text-align: center;
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-productions-page-section__heading {
	margin: 0;
	color: var(--sarre-color-anthracite);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* -- Grid ------------------------------------------------------------------
   Deliberately NOT `grid-template-columns: 1fr 1fr` (which would force an
   empty second cell with only 1 Produktion) and NOT a fixed 3-column grid
   (owner explicitly ruled a 3-up grid out, 2026-09-30). `auto-fit` with a
   `minmax()` floor produces exactly the two large side-by-side cards for
   the current normal case (2 Produktionen, within the site's existing
   1200px content width), collapses cleanly to 1 column on narrower
   tablet/mobile widths with no manual breakpoint needed, wraps to a further
   row automatically for 3+, and never renders an empty placeholder card —
   grid-auto-flow only ever places real items. `min(440px, 100%)` keeps the
   column floor from ever overflowing a narrow phone viewport. */
.sarre-productions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
	gap: var(--sarre-space-lg);
	align-items: stretch;
}

/* -- Card -------------------------------------------------------------- */
.sarre-productions-page-card {
	display: flex;
}
.sarre-productions-page-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--sarre-color-white);
	border-radius: var(--sarre-radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(36, 36, 36, 0.12);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sarre-productions-page-card__link:hover,
.sarre-productions-page-card__link:focus-visible {
	box-shadow: 0 8px 20px rgba(36, 36, 36, 0.16);
	transform: translateY(-2px);
}
.sarre-productions-page-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--sarre-color-light);
}
.sarre-productions-page-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-productions-page-card__badge {
	position: absolute;
	top: var(--sarre-space-sm);
	left: var(--sarre-space-sm);
	z-index: 2;
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.35em 0.85em;
	border-radius: 999px;
}
.sarre-productions-page-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: var(--sarre-space-md) var(--sarre-space-md) var(--sarre-space-lg);
}
.sarre-productions-page-card__kicker {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sarre-color-primary);
}
.sarre-productions-page-card__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
	overflow-wrap: break-word;
	hyphens: auto;
}
.sarre-productions-page-card__subtitle {
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	color: var(--sarre-color-body-text);
}
.sarre-productions-page-card__teaser {
	margin-top: 0.15rem;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}
.sarre-productions-page-card__cta {
	margin-top: var(--sarre-space-xs);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
@media (max-width: 480px) {
	.sarre-productions-page-card__title {
		font-size: 1.25rem;
	}
}

/* -- Newsletter row --------------------------------------------------------
   Wide, standalone band directly above the (unchanged) Footer — NOT the
   Homepage's two-column Social+Newsletter layout, and NOT
   `.sarre-newsletter-card` (Homepage-only, left completely untouched).
   Reuses the exact same light-turquoise tint formula already established
   there, and the shared, unmodified `.sarre-newsletter` component/typog-
   raphy/Brevo-form CSS above — only this new outer wrapper and the `--row`
   two-column arrangement (desktop) are new. */
.sarre-productions-page-newsletter {
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-productions-page-newsletter__inner {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
@media (min-width: 900px) {
	.sarre-productions-page-newsletter {
		padding: calc(var(--sarre-space-lg) * 1.2) var(--sarre-space-lg);
	}
}

/* Row layout: only inside .sarre-productions-page-newsletter — the base
   `.sarre-newsletter` rule (centered, stacked, max-width 640px) stays
   completely untouched for every other/existing use. */
.sarre-productions-page-newsletter .sarre-newsletter {
	max-width: none;
	margin: 0;
	text-align: left;
}
.sarre-productions-page-newsletter .sarre-newsletter__copy {
	margin: 0 0 var(--sarre-space-md);
}
.sarre-productions-page-newsletter .sarre-newsletter__text {
	margin: 0;
}
@media (min-width: 900px) {
	.sarre-productions-page-newsletter .sarre-newsletter {
		display: flex;
		align-items: center;
		gap: var(--sarre-space-lg);
	}
	.sarre-productions-page-newsletter .sarre-newsletter__copy {
		flex: 1 1 380px;
		margin: 0;
	}
	.sarre-productions-page-newsletter .sarre-newsletter__form-col {
		flex: 1 1 380px;
	}
	.sarre-productions-page-newsletter .sarre-newsletter #sib-form {
		max-width: none;
	}
}

/* ==========================================================================
   Workshopübersicht (/workshops/, 2026-09-30) — [sarre_workshops_page] on a
   future Theme Builder template. Entirely new, namespaced
   `.sarre-workshops-page-*` (plus the new shared, generic
   `.sarre-workshops-grid`), so this page can never bleed into or be
   affected by the Produktionsübersicht, Produktion-Single, Homepage, or any
   other existing area. Hero structure/spacing intentionally identical to
   `.sarre-productions-page-hero` (owner instruction 2026-09-30: reuse its
   already-corrected structure, not rebuild independently) — only the
   selector prefix differs. Card/Section/Newsletter-row structure mirrors
   `.sarre-productions-page-*` with two Workshop-specific additions
   (`__card__teachers`, `__card__date`) and one Ferien-specific addition
   (`__card__link--static`, for the not-yet-linked Ferien cards).
   ========================================================================== */

/* -- Hero -- identical structure to .sarre-productions-page-hero, see that
   block's own doc comment for the full rationale/measurements. */
.sarre-workshops-page-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 700px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--sarre-color-anthracite);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
}
.sarre-workshops-page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-workshops-page-hero__row {
	width: 40%;
	margin-top: 130px;
	padding-left: 7%;
	padding-right: var(--sarre-space-md);
	box-sizing: border-box;
}
.sarre-workshops-page-hero__eyebrow {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2em;
	margin: 0 0 var(--sarre-space-xs);
}
.sarre-workshops-page-hero__heading {
	margin: 0 0 var(--sarre-space-sm);
	color: var(--sarre-color-white);
	font-size: 76px;
	font-weight: 500 !important;
	line-height: 1.05em !important;
	letter-spacing: -1px !important;
	text-transform: uppercase;
}
.sarre-workshops-page-hero__intro {
	max-width: 480px;
	margin: 0;
	color: var(--sarre-color-white);
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	line-height: 1.4em;
}
@media (max-width: 900px) {
	.sarre-workshops-page-hero__row {
		width: 80%;
		padding-left: 5%;
		padding-right: 5%;
	}
	.sarre-workshops-page-hero__heading {
		font-size: 46px;
	}
}
@media (max-width: 700px) {
	.sarre-workshops-page-hero__row {
		width: 100%;
		padding-left: 7%;
		padding-right: 7%;
	}
	.sarre-workshops-page-hero__heading {
		font-size: 36px;
	}
}

/* -- Section header (Erwachsene / Ferien) --------------------------------- */
.sarre-workshops-page-section {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-workshops-page-section__header {
	text-align: center;
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-workshops-page-section__heading {
	margin: 0;
	color: var(--sarre-color-anthracite);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* -- Grid ------------------------------------------------------------------
   Same auto-fit/minmax technique as .sarre-productions-grid — see that
   rule's own doc comment for the full rationale. */
.sarre-workshops-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: var(--sarre-space-lg);
	align-items: stretch;
}

/* -- Card -------------------------------------------------------------- */
.sarre-workshops-page-card {
	display: flex;
}
.sarre-workshops-page-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--sarre-color-white);
	border-radius: var(--sarre-radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(36, 36, 36, 0.12);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sarre-workshops-page-card__link:hover,
.sarre-workshops-page-card__link:focus-visible {
	box-shadow: 0 8px 20px rgba(36, 36, 36, 0.16);
	transform: translateY(-2px);
}
/* Ferien-Workshops have no target page yet (owner decision 2026-09-30) and
   render as a plain, non-clickable info card instead of a link — same
   visual card, but no hover lift/pointer affordance. */
.sarre-workshops-page-card__link--static {
	cursor: default;
}
.sarre-workshops-page-card__link--static:hover,
.sarre-workshops-page-card__link--static:focus-visible {
	box-shadow: 0 1px 3px rgba(36, 36, 36, 0.12);
	transform: none;
}
.sarre-workshops-page-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--sarre-color-light);
}
.sarre-workshops-page-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-workshops-page-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: var(--sarre-space-md) var(--sarre-space-md) var(--sarre-space-lg);
}
.sarre-workshops-page-card__kicker {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sarre-color-primary);
}
.sarre-workshops-page-card__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
	overflow-wrap: break-word;
	hyphens: auto;
}
.sarre-workshops-page-card__subtitle {
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	color: var(--sarre-color-body-text);
}
.sarre-workshops-page-card__teachers,
.sarre-workshops-page-card__date {
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
}
.sarre-workshops-page-card__date {
	font-weight: 600;
	color: var(--sarre-color-primary);
}
.sarre-workshops-page-card__cta {
	margin-top: var(--sarre-space-xs);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
@media (max-width: 480px) {
	.sarre-workshops-page-card__title {
		font-size: 1.25rem;
	}
}

/* -- Erwachsenen-Workshop "Highlight"-Karte (horizontal, 2026-09-30) ------
   Owner decision 2026-09-30: the Erwachsenen-Musical-Workshops card should
   be a horizontal highlight layout (image left ~55-60%, content right
   ~40-45%, noticeably lower overall height) instead of the standard
   vertical Ferien card. Implemented as a pure additive modifier,
   `.sarre-workshops-page-card--highlight` (added only for the erwachsene
   bucket in sarre_core_render_workshops_page_card()), plus a grid-column
   override scoped to `.sarre-workshops-page-section--erwachsene` only.
   Every rule below is nested under one of those two scopes, so the three
   Ferien-Workshop cards, their grid and their CSS are completely
   unaffected. On smartphone it falls back to the same stacked
   image-on-top layout as the Ferien cards. */
.sarre-workshops-page-section--erwachsene .sarre-workshops-grid {
	grid-template-columns: 1fr;
}
.sarre-workshops-page-card--highlight .sarre-workshops-page-card__link {
	flex-direction: row;
	align-items: stretch;
}
.sarre-workshops-page-card--highlight .sarre-workshops-page-card__media {
	flex: 0 0 58%;
	aspect-ratio: auto;
	min-height: 260px;
}
.sarre-workshops-page-card--highlight .sarre-workshops-page-card__body {
	flex: 1 1 42%;
	justify-content: center;
	padding: var(--sarre-space-lg);
}
@media (max-width: 700px) {
	.sarre-workshops-page-card--highlight .sarre-workshops-page-card__link {
		flex-direction: column;
	}
	.sarre-workshops-page-card--highlight .sarre-workshops-page-card__media {
		flex: 1 1 auto;
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
	.sarre-workshops-page-card--highlight .sarre-workshops-page-card__body {
		padding: var(--sarre-space-md) var(--sarre-space-md) var(--sarre-space-lg);
	}
}

/* -- Newsletter row -- identical structure to
   .sarre-productions-page-newsletter, see that block's own doc comment. */
.sarre-workshops-page-newsletter {
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-workshops-page-newsletter__inner {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
@media (min-width: 900px) {
	.sarre-workshops-page-newsletter {
		padding: calc(var(--sarre-space-lg) * 1.2) var(--sarre-space-lg);
	}
}
.sarre-workshops-page-newsletter .sarre-newsletter {
	max-width: none;
	margin: 0;
	text-align: left;
}
.sarre-workshops-page-newsletter .sarre-newsletter__copy {
	margin: 0 0 var(--sarre-space-md);
}
.sarre-workshops-page-newsletter .sarre-newsletter__text {
	margin: 0;
}
@media (min-width: 900px) {
	.sarre-workshops-page-newsletter .sarre-newsletter {
		display: flex;
		align-items: center;
		gap: var(--sarre-space-lg);
	}
	.sarre-workshops-page-newsletter .sarre-newsletter__copy {
		flex: 1 1 380px;
		margin: 0;
	}
	.sarre-workshops-page-newsletter .sarre-newsletter__form-col {
		flex: 1 1 380px;
	}
	.sarre-workshops-page-newsletter .sarre-newsletter #sib-form {
		max-width: none;
	}
}
/* ==========================================================================
   Terminübersicht (/termine/, 2026-10-01) — [sarre_termine_page] on a
   future Theme Builder template for the existing sarre_event CPT archive
   (has_archive => 'termine', no new Page/URL/CPT). Hero structure/spacing
   intentionally identical to `.sarre-productions-page-hero` /
   `.sarre-workshops-page-hero` (same reused pattern, only the selector
   prefix differs and there is no eyebrow element — the owner's spec for
   this page asked only for the H1 "Termine" plus a short intro, not an
   eyebrow+heading pair). The event list itself extends the existing,
   unmodified `.sarre-event-list` / `.sarre-event-card` base (see that
   block's own doc comment above) rather than reinventing a card — only
   the new `.sarre-termine-card__*` additions (image, type label) and the
   new `.sarre-termine-tabs` filter row are genuinely new CSS.
   ========================================================================== */

/* -- Hero -- identical structure to .sarre-productions-page-hero, see that
   block's own doc comment for the full rationale/measurements. No eyebrow
   row — H1 sits directly at the top of `__row`. */
.sarre-termine-page-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 700px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--sarre-color-anthracite);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
}
.sarre-termine-page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-termine-page-hero__row {
	width: 40%;
	margin-top: 130px;
	padding-left: 7%;
	padding-right: var(--sarre-space-md);
	box-sizing: border-box;
}
.sarre-termine-page-hero__heading {
	margin: 0 0 var(--sarre-space-sm);
	color: var(--sarre-color-white);
	font-size: 76px;
	font-weight: 500 !important;
	line-height: 1.05em !important;
	letter-spacing: -1px !important;
	text-transform: uppercase;
}
.sarre-termine-page-hero__intro {
	max-width: 480px;
	margin: 0;
	color: var(--sarre-color-white);
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	line-height: 1.4em;
}
@media (max-width: 900px) {
	.sarre-termine-page-hero__row {
		width: 80%;
		padding-left: 5%;
		padding-right: 5%;
	}
	.sarre-termine-page-hero__heading {
		font-size: 46px;
	}
}
@media (max-width: 700px) {
	.sarre-termine-page-hero__row {
		width: 100%;
		padding-left: 7%;
		padding-right: 7%;
	}
	.sarre-termine-page-hero__heading {
		font-size: 36px;
	}
}

/* -- Terminübersicht wrapper + dynamische Reiter ---------------------------
   Restrained pill-style filter row directly under the Hero, built only
   from existing tokens (Türkis primary, existing spacing/radius) — no new
   colour. Inactive tabs are a quiet outline; the active tab fills solid
   Türkis. Without js/sarre-termine-tabs.js the buttons are inert no-ops
   and every card in the list below stays visible (progressive
   enhancement) — see sarre_core_render_termine_page_list(). */
.sarre-termine-page-list {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-termine-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sarre-space-sm);
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-termine-tabs__tab {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid rgba(36, 36, 36, 0.2);
	color: var(--sarre-color-anthracite);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sarre-termine-tabs__tab:hover,
.sarre-termine-tabs__tab:focus-visible {
	border-color: var(--sarre-color-primary);
	color: var(--sarre-color-primary);
}
.sarre-termine-tabs__tab.is-active {
	background: var(--sarre-color-primary);
	border-color: var(--sarre-color-primary);
	color: var(--sarre-color-white);
}

/* -- Terminkarte -- extends the shared, unmodified `.sarre-event-card`
   (see that block's own doc comment above) with a media thumbnail (image
   resolved from the related Produktion's/Workshop's own Featured Image —
   sarre_event has no Featured Image of its own by design) and a small
   Aufführung/Workshop type label. `--no-image` mirrors the existing
   `.sarre-press-card--no-image` convention (plain light-grey fill, no new
   fallback visual invented). */
.sarre-termine-card {
	align-items: flex-start;
}
.sarre-termine-card__media {
	position: relative; /* KI-Kennzeichnung (2026-10-01): Ankerpunkt für .sarre-ai-label, keine visuelle Änderung — fehlte hier im Gegensatz zu jeder anderen Verwendungsstelle. */
	display: block;
	flex-shrink: 0;
	width: 96px;
	aspect-ratio: 4 / 3;
	border-radius: 2px;
	overflow: hidden;
	background: var(--sarre-color-light);
}
.sarre-termine-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-termine-card--no-image .sarre-termine-card__media {
	background: var(--sarre-color-light);
}
.sarre-termine-card__type {
	display: block;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sarre-color-primary);
	flex-basis: 100%;
}
.sarre-termine-card__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--sarre-color-anthracite);
	text-decoration: none;
	overflow-wrap: break-word;
}
.sarre-termine-card__title:hover,
.sarre-termine-card__title:focus-visible {
	color: var(--sarre-color-primary);
}
/* CTA-Buttons (2026-10-02, owner-approved correction) — "Tickets sichern",
   "Zum Workshop" and "Zur Produktion" all use the shared `.sarre-btn.sarre-
   btn--primary` system unchanged (see that block's own doc comment far
   above) plus this one extra, Termine-page-only class. Two narrow additions
   only, nothing redesigned:
   1) Alignment: `margin-left: auto` puts the CTA in the same right-hand
      spot of the shared `.sarre-event-card__body` flex row for all three
      variants — the exact technique the frozen `.sarre-event-card__ticket-
      link` already uses, reproduced here as a new class so that frozen rule
      itself stays untouched.
   2) Colour: on this page the button rendered with the brand's Türkis text
      instead of white, even though `.sarre-btn--primary` itself already
      sets `color: var(--sarre-color-white)` and the identical class works
      correctly on the Homepage. The Divi wrapper built for this page
      appears to apply its own default link colour on top of it. `!important`
      is scoped to this one class only (same documented pattern already used
      above for `.ff-btn-submit`, "never !important except where Divi/
      plugin default styles would otherwise win") — it does not touch the
      shared `.sarre-btn--primary` rule or any other page using it. */
.sarre-termine-card__cta {
	margin-left: auto;
}
.sarre-termine-card__cta.sarre-btn--primary,
.sarre-termine-card__cta.sarre-btn--primary:hover,
.sarre-termine-card__cta.sarre-btn--primary:focus-visible {
	color: var(--sarre-color-white) !important;
}
/* Jahreszahl im Date-Badge (2026-10-02, owner-approved) — neue, Termine-
   Seite-eigene Klasse, nur in sarre_core_render_termine_page_card()
   verwendet (nicht auf der Homepage). Gleiche Typografie wie
   `.sarre-event-card__month` (ohne dessen Großschreibung/Letter-Spacing,
   da eine Jahreszahl das nicht braucht) — kein neues optisches Gewicht,
   fügt sich in den bestehenden Date-Badge (flex, gap: 0.3em) ein. */
.sarre-event-card__year {
	font-family: var(--sarre-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
@media (max-width: 560px) {
	.sarre-termine-card__media {
		width: 72px;
	}
}

/* -- Newsletter row -- identical structure to
   .sarre-productions-page-newsletter, see that block's own doc comment. */
.sarre-termine-page-newsletter {
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-termine-page-newsletter__inner {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
@media (min-width: 900px) {
	.sarre-termine-page-newsletter {
		padding: calc(var(--sarre-space-lg) * 1.2) var(--sarre-space-lg);
	}
}
.sarre-termine-page-newsletter .sarre-newsletter {
	max-width: none;
	margin: 0;
	text-align: left;
}
.sarre-termine-page-newsletter .sarre-newsletter__copy {
	margin: 0 0 var(--sarre-space-md);
}
.sarre-termine-page-newsletter .sarre-newsletter__text {
	margin: 0;
}
@media (min-width: 900px) {
	.sarre-termine-page-newsletter .sarre-newsletter {
		display: flex;
		align-items: center;
		gap: var(--sarre-space-lg);
	}
	.sarre-termine-page-newsletter .sarre-newsletter__copy {
		flex: 1 1 380px;
		margin: 0;
	}
	.sarre-termine-page-newsletter .sarre-newsletter__form-col {
		flex: 1 1 380px;
	}
	.sarre-termine-page-newsletter .sarre-newsletter #sib-form {
		max-width: none;
	}
}

/* ==========================================================================
   Ferien-Musical-Workshops für Kinder & Jugendliche (/ferien-musical-
   workshops/, 2026-09-30) — [sarre_ferien_workshops_page]. Entirely new,
   namespaced `.sarre-ferien-page-*` (plus the shared generic utilities
   `.sarre-eyebrow`, `.sarre-heading-serif`, `.sarre-link-editorial`,
   `.sarre-workshops-grid`), so this page can never bleed into or be
   affected by the Produktionsübersicht, Workshopübersicht, Produktion-
   Single, Homepage, Header or Footer. Hero structure/spacing intentionally
   identical to `.sarre-workshops-page-hero` (same proven, already-
   corrected pattern) — only the selector prefix differs. No Newsletter
   block/CSS on this page (owner instruction 2026-09-30).
   ========================================================================== */

/* -- Hero -- identical structure to .sarre-workshops-page-hero. */
.sarre-ferien-page-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 700px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--sarre-color-anthracite);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
}
.sarre-ferien-page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-ferien-page-hero__row {
	width: 40%;
	margin-top: 130px;
	padding-left: 7%;
	padding-right: var(--sarre-space-md);
	box-sizing: border-box;
}
.sarre-ferien-page-hero__eyebrow {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2em;
	margin: 0 0 var(--sarre-space-xs);
}
.sarre-ferien-page-hero__heading {
	margin: 0 0 var(--sarre-space-sm);
	color: var(--sarre-color-white);
	font-size: 64px;
	font-weight: 500 !important;
	line-height: 1.08em !important;
	letter-spacing: -1px !important;
	text-transform: none;
}
.sarre-ferien-page-hero__intro {
	max-width: 480px;
	margin: 0;
	color: var(--sarre-color-white);
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	line-height: 1.4em;
}
@media (max-width: 900px) {
	.sarre-ferien-page-hero__row {
		width: 80%;
		padding-left: 5%;
		padding-right: 5%;
	}
	.sarre-ferien-page-hero__heading {
		font-size: 40px;
	}
}
@media (max-width: 700px) {
	.sarre-ferien-page-hero__row {
		width: 100%;
		padding-left: 7%;
		padding-right: 7%;
	}
	.sarre-ferien-page-hero__heading {
		font-size: 32px;
	}
}

/* -- Shared section header (reused by every section below) -------------- */
.sarre-ferien-page-section {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-ferien-page-section__header {
	text-align: center;
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-ferien-page-section__header--left {
	text-align: left;
}
.sarre-ferien-page-section__heading {
	margin: 0;
	color: var(--sarre-color-anthracite);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* -- Aktuelle Ferienworkshops: card (not a link itself — contains its own
   CTA anchor to the registration section further down this same page) -- */
.sarre-ferien-page-workshop-card {
	display: flex;
	flex-direction: column;
	background: var(--sarre-color-white);
	border-radius: var(--sarre-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(36, 36, 36, 0.12);
}
.sarre-ferien-page-workshop-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--sarre-color-light);
}
.sarre-ferien-page-workshop-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-ferien-page-workshop-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: var(--sarre-space-md) var(--sarre-space-md) var(--sarre-space-lg);
}
.sarre-ferien-page-workshop-card__kicker {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sarre-color-primary);
}
.sarre-ferien-page-workshop-card__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0;
	color: var(--sarre-color-anthracite);
	overflow-wrap: break-word;
	hyphens: auto;
}
.sarre-ferien-page-workshop-card__subtitle {
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	color: var(--sarre-color-body-text);
}
.sarre-ferien-page-workshop-card__date {
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sarre-color-primary);
}
.sarre-ferien-page-workshop-card__date--tba {
	color: var(--sarre-color-body-text);
	font-weight: 400;
	font-style: italic;
}
.sarre-ferien-page-workshop-card__cta {
	margin-top: var(--sarre-space-xs);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
@media (max-width: 480px) {
	.sarre-ferien-page-workshop-card__title {
		font-size: 1.25rem;
	}
}

/* -- Aktuelle Ferienworkshops: Grid-Spaltenbreiten (owner-Korrektur
   2026-09-30, Punkt 3) — wir haben regulär drei Ferienworkshop-Angebote
   pro Jahr, daher hier ein eigener, nur auf `.sarre-ferien-page-
   workshops-grid` skalierter Override statt das geteilte
   `.sarre-workshops-grid` (auto-fit/minmax, gemeinsam mit der
   Workshopübersicht genutzt, bewusst NICHT verändert) zu berühren.
   Gleiche Spezifität wie `.sarre-workshops-grid`, gewinnt aber durch
   spätere Position in dieser Datei. Kartengestaltung selbst unverändert -
   nur die Spaltenzahl/-breite ändert sich. */
.sarre-ferien-page-workshops-grid {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
	.sarre-ferien-page-workshops-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.sarre-ferien-page-workshops-grid {
		grid-template-columns: 1fr;
	}
}

/* -- Eine Woche Musical: 4 editorial sub-areas, 2x2 on tablet, 1 column on
   mobile, 4 across on wide desktop. Placeholder copy gets a visibly
   distinct (italic, slightly muted) treatment so it reads as "pending
   real content", not as finished editorial text. */
.sarre-ferien-page-week-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-ferien-page-week-item {
	background: var(--sarre-color-light);
	border-radius: var(--sarre-radius);
	padding: var(--sarre-space-md);
}
.sarre-ferien-page-week-item__heading {
	margin: 0 0 var(--sarre-space-xs);
	font-family: var(--sarre-font-heading);
	font-size: 1.125rem;
	color: var(--sarre-color-anthracite);
}
.sarre-ferien-page-week-item__text {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sarre-color-body-text);
}
.sarre-ferien-page-week-item__text--placeholder {
	font-style: italic;
	opacity: 0.75;
}
@media (max-width: 900px) {
	.sarre-ferien-page-week-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.sarre-ferien-page-week-grid {
		grid-template-columns: 1fr;
	}
}

/* -- Dozent:innen -------------------------------------------------------- */
.sarre-ferien-page-teachers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--sarre-space-lg);
}
.sarre-ferien-page-teacher-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
}
.sarre-ferien-page-teacher-card__photo {
	display: block;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sarre-color-light);
	margin-bottom: var(--sarre-space-xs);
}
.sarre-ferien-page-teacher-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-ferien-page-teacher-card__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.sarre-ferien-page-teacher-card__initials {
	font-family: var(--sarre-font-heading);
	font-size: 1.75rem;
	color: var(--sarre-color-primary);
}
.sarre-ferien-page-teacher-card__name {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.125rem;
	color: var(--sarre-color-anthracite);
}
.sarre-ferien-page-teacher-card__areas {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sarre-color-primary);
}
.sarre-ferien-page-teacher-card__bio {
	margin: 0.25rem 0 0;
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
}

/* -- Alles Wichtige auf einen Blick --------------------------------------- */
.sarre-ferien-page-section--info {
	background: var(--sarre-color-light);
	border-radius: var(--sarre-radius);
}
.sarre-ferien-page-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-ferien-page-info-item__label {
	margin: 0 0 0.35rem;
	font-family: var(--sarre-font-heading);
	font-size: 1rem;
	color: var(--sarre-color-anthracite);
}
.sarre-ferien-page-info-item__text {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sarre-color-body-text);
}

/* -- Unverbindliche Anmeldung (Fluent Forms) -----------------------------
   Light-touch skin over Fluent Forms' own generic classes (never a
   structural override, never !important except where Divi/plugin default
   styles would otherwise win) so the embedded form reads as a native
   Sarré component instead of a generic plugin widget. Fluent Forms' own
   CSS/JS keeps handling layout, validation and submission entirely
   unchanged. */
.sarre-ferien-page-section--registration {
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
}
.sarre-ferien-page-registration__inner {
	max-width: 760px;
	margin: 0 auto;
}
.sarre-ferien-page-registration__intro {
	margin: var(--sarre-space-sm) 0 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}
.sarre-ferien-page-registration__notice {
	font-family: var(--sarre-font-body);
	color: var(--sarre-color-body-text);
}
.sarre-ferien-page-registration__form {
	margin-top: var(--sarre-space-lg);
}
.sarre-ferien-page-registration__form .ff-el-form-control {
	font-family: var(--sarre-font-body);
	border-radius: var(--sarre-radius);
}
.sarre-ferien-page-registration__form .ff-el-input--label label {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
.sarre-ferien-page-registration__form .ff-btn-submit {
	background-color: var(--sarre-color-accent) !important;
	border-color: var(--sarre-color-accent) !important;
	color: var(--sarre-color-white) !important;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	border-radius: 2px !important;
}
.sarre-ferien-page-registration__form .ff-btn-submit:hover,
.sarre-ferien-page-registration__form .ff-btn-submit:focus-visible {
	filter: brightness(0.92);
}
@media (max-width: 700px) {
	.sarre-ferien-page-registration__form .ff_has_multi_select,
	.sarre-ferien-page-registration__form .ff-el-group {
		max-width: 100%;
	}
}

/* ==========================================================================
   Erwachsenen-Musical-Workshop — Single-Seite (2026-09-30)
   Eigener Namespace `sarre-erwachsenenworkshop-*` (owner-Anforderung),
   wirkt ausschließlich innerhalb des [sarre_erwachsenenworkshop_page]-
   Shortcodes. Nichts hier verändert eine bestehende Klasse; die
   Shared-Utilities .sarre-eyebrow/.sarre-heading-serif/.sarre-btn/
   .sarre-link-editorial werden unverändert wiederverwendet (siehe oben).
   ========================================================================== */

/* -- Hero ------------------------------------------------------------------
   Gleiches Grundgerüst wie .sarre-ferien-page-hero (einzige tatsächlich
   funktionierende Hero-Vorlage im Projekt, siehe Untersuchungsbericht
   2026-09-30 - die Produktions-Hero ist ein eingefrorenes Divi-Element ohne
   PHP-Zugriffspunkt), hier mit eigenem Namespace und einer zusätzlichen
   Meta-Zeile für Termin/Uhrzeiten/Ort/Alter. */
.sarre-erwachsenenworkshop-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 640px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--sarre-color-anthracite);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.sarre-erwachsenenworkshop-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-erwachsenenworkshop-hero__row {
	width: 60%;
	padding: var(--sarre-space-lg) var(--sarre-space-md) var(--sarre-space-lg) 7%;
	box-sizing: border-box;
}
.sarre-erwachsenenworkshop-hero__eyebrow {
	color: var(--sarre-color-white);
	opacity: 0.85;
}
.sarre-erwachsenenworkshop-hero__heading {
	margin: 0 0 var(--sarre-space-sm);
	color: var(--sarre-color-white);
	font-size: 56px;
	font-weight: 400 !important;
	line-height: 1.1 !important;
}
.sarre-erwachsenenworkshop-hero__intro {
	max-width: 520px;
	margin: 0 0 var(--sarre-space-md);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-body);
	font-size: 1.125rem;
	line-height: 1.5;
	opacity: 0.95;
}
.sarre-erwachsenenworkshop-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0 0 var(--sarre-space-md);
	padding: 0;
	list-style: none;
}
.sarre-erwachsenenworkshop-hero__meta-item {
	position: relative;
	padding-left: 1.1rem;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sarre-color-white);
}
.sarre-erwachsenenworkshop-hero__meta-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sarre-color-primary);
}
.sarre-erwachsenenworkshop-hero__cta {
	margin-top: var(--sarre-space-xs);
}
@media (max-width: 900px) {
	.sarre-erwachsenenworkshop-hero__row {
		width: 85%;
		padding-left: 5%;
		padding-right: 5%;
	}
	.sarre-erwachsenenworkshop-hero__heading {
		font-size: 40px;
	}
}
@media (max-width: 700px) {
	.sarre-erwachsenenworkshop-hero {
		min-height: 560px;
	}
	.sarre-erwachsenenworkshop-hero__row {
		width: 100%;
		padding-left: 7%;
		padding-right: 7%;
	}
	.sarre-erwachsenenworkshop-hero__heading {
		font-size: 32px;
	}
}

/* -- Shared section header (reused by every section below) -------------- */
.sarre-erwachsenenworkshop-section {
	max-width: var(--sarre-erwachsenenworkshop-content-width);
	margin: 0 auto;
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-erwachsenenworkshop-section__header {
	text-align: center;
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-erwachsenenworkshop-section__header--left {
	text-align: left;
}
.sarre-erwachsenenworkshop-section__heading {
	margin: 0;
	color: var(--sarre-color-anthracite);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
.sarre-erwachsenenworkshop-section__intro {
	max-width: 640px;
	margin: var(--sarre-space-sm) auto 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}

/* -- 2. Zentrale Botschaft ------------------------------------------------
   Zweispaltig (Text links, typografischer Störer rechts), stapelt unter
   900px. Der Störer ist bewusst reine Typografie (Georgia-Serif-Kursiv,
   dieselbe Schriftfamilie wie .sarre-heading-serif) statt eines Sticker-
   /Pinselstrich-Looks - bewusste Entscheidung gegen einen "offensichtlich
   KI-generierten" Effekt (owner-Anforderung 2026-09-30). */
.sarre-erwachsenenworkshop-section--message {
	background: var(--sarre-color-light);
}
.sarre-erwachsenenworkshop-message__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--sarre-space-lg) calc(var(--sarre-space-lg) * 1.5);
	align-items: center;
}
.sarre-erwachsenenworkshop-message__heading {
	margin: var(--sarre-space-xs) 0 var(--sarre-space-md);
	color: var(--sarre-color-anthracite);
	font-size: clamp(1.75rem, 3vw, 2.375rem);
}
.sarre-erwachsenenworkshop-message__paragraph {
	margin: 0 0 var(--sarre-space-sm);
	font-family: var(--sarre-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--sarre-color-body-text);
}
.sarre-erwachsenenworkshop-message__accent {
	position: relative;
	padding: var(--sarre-space-lg) var(--sarre-space-md) var(--sarre-space-lg) var(--sarre-space-lg);
	border-left: 3px solid var(--sarre-color-accent);
	background: rgba(0, 0, 0, 0.02);
}
.sarre-erwachsenenworkshop-message__accent-text {
	margin: 0;
	max-width: 32ch;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.625rem, 2.6vw, 2rem);
	line-height: 1.35;
	color: var(--sarre-color-anthracite);
}
@media (max-width: 900px) {
	.sarre-erwachsenenworkshop-message__grid {
		grid-template-columns: 1fr;
	}
	.sarre-erwachsenenworkshop-message__accent {
		border-left: none;
		border-top: 3px solid var(--sarre-color-accent);
		padding: var(--sarre-space-lg) 0 0;
		background: none;
	}
	.sarre-erwachsenenworkshop-message__accent-text {
		max-width: none;
	}
}

/* -- 3. Vier Kernbotschaften ----------------------------------------------
   Owner-Vorgabe: KEINE Icons - rein typografisch, feine Trennlinien
   zwischen den Spalten (Desktop) bzw. oben (mobil gestapelt), viel
   Weißraum. */
.sarre-erwachsenenworkshop-pillars-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sarre-space-lg);
}
.sarre-erwachsenenworkshop-pillar {
	padding: 0 var(--sarre-space-sm) 0 var(--sarre-space-md);
	border-left: 1px solid rgba(36, 36, 36, 0.14);
}
.sarre-erwachsenenworkshop-pillar:first-child {
	border-left: none;
	padding-left: 0;
}
.sarre-erwachsenenworkshop-pillar__heading {
	margin: 0 0 0.625rem;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sarre-color-anthracite);
}
.sarre-erwachsenenworkshop-pillar__text {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}
@media (max-width: 900px) {
	.sarre-erwachsenenworkshop-pillars-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sarre-erwachsenenworkshop-pillar:nth-child(2) {
		border-left: none;
		padding-left: 0;
	}
	.sarre-erwachsenenworkshop-pillar:nth-child(odd) {
		border-left: none;
		padding-left: 0;
	}
}
@media (max-width: 560px) {
	.sarre-erwachsenenworkshop-pillars-grid {
		grid-template-columns: 1fr;
	}
	.sarre-erwachsenenworkshop-pillar {
		border-left: none;
		border-top: 1px solid rgba(36, 36, 36, 0.14);
		padding-left: 0;
		padding-top: var(--sarre-space-md);
	}
	.sarre-erwachsenenworkshop-pillar:first-child {
		border-top: none;
		padding-top: 0;
	}
}

/* -- 4. Vier Bereiche -------------------------------------------------------
   Visueller Feinschliff (2026-10-01, owner-Vorgabe): soll sich als
   Eyecatcher deutlich vom direkt darüberliegenden, bewusst schlichten
   Kernbotschaften-Bereich (.sarre-erwachsenenworkshop-pillar, unverändert)
   abheben - je eine dezente, helle Hintergrundfarbe pro Karte statt der
   dünnen Trennlinien, angelehnt an die bestehenden Türkis-/Pink-
   Akzentfarben plus zwei zusätzliche sehr helle, ruhige Töne (Mint/Warm).
   Owner-Vorgabe: KEINE Icons, KEINE Bilder, KEINE starken Schatten - nach
   wie vor editorial statt App-/Dashboard-Optik. */
.sarre-erwachsenenworkshop-areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sarre-space-md);
}
.sarre-erwachsenenworkshop-area {
	padding: var(--sarre-space-md);
	border-radius: var(--sarre-radius);
}
.sarre-erwachsenenworkshop-area:nth-child(1) {
	background: rgba(0, 182, 200, 0.07); /* sehr helles Türkis, von --sarre-color-primary */
}
.sarre-erwachsenenworkshop-area:nth-child(2) {
	background: rgba(233, 30, 99, 0.06); /* sehr helles Rosa, von --sarre-color-accent */
}
.sarre-erwachsenenworkshop-area:nth-child(3) {
	background: #EEF6F2; /* dezentes Mint */
}
.sarre-erwachsenenworkshop-area:nth-child(4) {
	background: #FBF4EA; /* warmer, sehr heller Ton */
}
.sarre-erwachsenenworkshop-area__heading {
	margin: 0 0 0.5rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.375rem;
	color: var(--sarre-color-anthracite);
}
.sarre-erwachsenenworkshop-area__text {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}
@media (max-width: 900px) {
	.sarre-erwachsenenworkshop-areas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.sarre-erwachsenenworkshop-areas-grid {
		grid-template-columns: 1fr;
	}
}

/* -- 5. Aktueller Workshop / aktuelles Thema (NEU, Architektur-Korrektur
   2026-09-30) ----------------------------------------------------------
   Heller Abschnitt, Beitragsbild links, Titel/Termin-Details rechts -
   bewusst vom dunklen Gastdozent:innen-Block optisch unterschieden.
   Stapelt unter 900px, gleiches Muster wie der Gastdozent:innen-Block. */
.sarre-erwachsenenworkshop-section--current {
	max-width: none;
	/* Visueller Feinschliff (2026-10-01, owner-Vorgabe): dieser Block sitzt
	   jetzt direkt unter dem Hero. Vertikales Padding auf Höhe des
	   übrigen Seitenrhythmus (var(--sarre-space-lg), gleicher Wert wie
	   die vertikale Basis-Section-Polsterung) sorgt für einen bewussten
	   Abstand zum Hero oben und zum folgenden Abschnitt unten, statt
	   direkt anzustoßen. Horizontal bewusst weiterhin 0 (voller
	   Hintergrund-Bleed) - die eigentliche Inhaltsbreite kommt
	   unverändert von .sarre-erwachsenenworkshop-current__inner. */
	padding: var(--sarre-space-lg) 0;
	background: var(--sarre-color-light);
}
.sarre-erwachsenenworkshop-current__inner {
	max-width: var(--sarre-erwachsenenworkshop-content-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 45% 55%;
	align-items: stretch;
	gap: 0;
}
.sarre-erwachsenenworkshop-current__media {
	position: relative;
	min-height: 280px;
	background: rgba(36, 36, 36, 0.06);
}
.sarre-erwachsenenworkshop-current__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-erwachsenenworkshop-current__content {
	padding: var(--sarre-space-lg) var(--sarre-space-md);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sarre-erwachsenenworkshop-current__heading {
	margin: var(--sarre-space-xs) 0 var(--sarre-space-sm);
	font-size: 2rem;
	font-weight: 400 !important;
}
/* Eckdaten untereinander statt in einer Zeile (owner-Vorgabe 2026-10-01,
   Runde 5: "wirkten bislang teils doppelte pinke Trennpunkte") - jede Zeile
   trägt jetzt eines der bestehenden Auf-einen-Blick-Icons statt eines
   CSS-::before-Trennpunkts, siehe sarre_core_get_erwachsenenworkshop_
   overview_icon_svg() in erwachsenenworkshop-shortcodes.php. Dadurch
   entfällt der frühere Pseudo-Element-Trenner vollständig, statt einen
   zweiten hinzuzufügen. */
.sarre-erwachsenenworkshop-current__meta {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-erwachsenenworkshop-current__meta-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--sarre-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
.sarre-erwachsenenworkshop-current__meta-icon {
	display: inline-flex;
	flex: none;
	color: var(--sarre-color-accent);
}
.sarre-erwachsenenworkshop-current__meta-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}
@media (max-width: 900px) {
	.sarre-erwachsenenworkshop-current__inner {
		grid-template-columns: 1fr;
	}
	.sarre-erwachsenenworkshop-current__media {
		min-height: 220px;
	}
}

/* -- 6. Gastdozent:innen-Highlight ------------------------------------------
   Dunkler, hochwertiger Hintergrund (owner-Vorgabe: "passend zum
   Tanz-der-Vampire-Hero"), großes Portrait links, Text rechts, stapelt
   unter 900px. */
.sarre-erwachsenenworkshop-section--featured-teacher {
	max-width: none;
	padding: 0;
	background: var(--sarre-color-anthracite);
}
.sarre-erwachsenenworkshop-featured-teacher__inner {
	max-width: var(--sarre-erwachsenenworkshop-content-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 45% 55%;
	align-items: stretch;
	gap: 0;
}
.sarre-erwachsenenworkshop-featured-teacher__media {
	position: relative;
	min-height: 480px;
	background: rgba(255, 255, 255, 0.04);
}
.sarre-erwachsenenworkshop-featured-teacher__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.sarre-erwachsenenworkshop-featured-teacher__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 480px;
}
.sarre-erwachsenenworkshop-featured-teacher__initials {
	font-family: var(--sarre-font-heading);
	font-size: 3rem;
	color: var(--sarre-color-white);
	opacity: 0.6;
}
.sarre-erwachsenenworkshop-featured-teacher__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sarre-space-lg) var(--sarre-space-lg) var(--sarre-space-lg) calc(var(--sarre-space-lg) * 1.25);
}
.sarre-erwachsenenworkshop-featured-teacher__eyebrow {
	color: var(--sarre-color-primary);
}
.sarre-erwachsenenworkshop-featured-teacher__name {
	margin: 0 0 var(--sarre-space-xs);
	color: var(--sarre-color-white);
	font-size: clamp(1.75rem, 3vw, 2.375rem);
}
.sarre-erwachsenenworkshop-featured-teacher__subheading {
	max-width: 46ch;
	margin: 0 0 var(--sarre-space-md);
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.85);
}
.sarre-erwachsenenworkshop-featured-teacher__text {
	max-width: 46ch;
	margin: 0 0 var(--sarre-space-sm);
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
}
.sarre-erwachsenenworkshop-featured-teacher__link {
	margin-top: var(--sarre-space-xs);
	color: var(--sarre-color-white);
}
.sarre-erwachsenenworkshop-featured-teacher__link::after {
	color: var(--sarre-color-primary);
}
@media (max-width: 900px) {
	.sarre-erwachsenenworkshop-featured-teacher__inner {
		grid-template-columns: 1fr;
	}
	.sarre-erwachsenenworkshop-featured-teacher__media,
	.sarre-erwachsenenworkshop-featured-teacher__image-placeholder {
		min-height: 320px;
	}
	.sarre-erwachsenenworkshop-featured-teacher__content {
		padding: var(--sarre-space-lg) var(--sarre-space-md);
	}
}

/* -- 7. Unser Team ----------------------------------------------------------
   Gleiches Grundmuster wie .sarre-ferien-page-teachers-grid, eigener
   Namespace. Visueller Feinschliff 2026-09-30: 3 grosszügigere Spalten
   Desktop (owner-Vorgabe, vorher 4 - bei der neuen, schmaleren
   Seitenbreite wirkten 4 Spalten zu eng), 2 Tablet / 1 Mobil unverändert. */
.sarre-erwachsenenworkshop-team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sarre-space-lg);
}
.sarre-erwachsenenworkshop-team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
}
.sarre-erwachsenenworkshop-team-card__photo {
	display: block;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sarre-color-light);
	margin-bottom: var(--sarre-space-xs);
}
.sarre-erwachsenenworkshop-team-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-erwachsenenworkshop-team-card__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.sarre-erwachsenenworkshop-team-card__initials {
	font-family: var(--sarre-font-heading);
	font-size: 1.75rem;
	color: var(--sarre-color-primary);
}
.sarre-erwachsenenworkshop-team-card__name {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.125rem;
	color: var(--sarre-color-anthracite);
}
.sarre-erwachsenenworkshop-team-card__areas {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sarre-color-primary);
}
.sarre-erwachsenenworkshop-team-card__bio {
	margin: 0.25rem 0 0;
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
}
@media (max-width: 900px) {
	.sarre-erwachsenenworkshop-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.sarre-erwachsenenworkshop-team-grid {
		grid-template-columns: 1fr;
	}
}

/* -- 8. Auf einen Blick ------------------------------------------------- */
.sarre-erwachsenenworkshop-section--overview {
	background: var(--sarre-color-light);
	border-radius: var(--sarre-radius);
}
/* Visueller Feinschliff (2026-10-01, owner-Vorgabe): feste, gleichwertige
   3-Spalten-Aufteilung statt repeat(auto-fit, ...) - bei genau den drei
   Standardangaben (Termin/Ort/Alter) wirkte das Grid dadurch optisch zu
   weit links mit ungenutzter Fläche rechts statt gleichmäßig über die
   Boxbreite verteilt. Kommen künftig weitere Angaben hinzu (Uhrzeiten/
   Kosten/Voraussetzungen/Mitzubringen), brechen sie einfach in eine
   weitere, ebenso gleichmäßige 3er-Reihe um.
   Runde 5 (2026-10-01, owner-Vorgabe): die vorherige Lösung (max-width:
   700px + margin:0 auto) zentrierte die drei Blöcke zwar als Gruppe, zog
   Ort und Alter dabei aber zu eng zusammen ("stehen noch zu weit links").
   Termins linker Abstand sollte dabei ungefähr erhalten bleiben. Gelöst
   über ein einzelnes, gemeinsames padding-left auf dem Grid-Container
   (keine Einzel-Margins pro Spalte) statt der symmetrischen Zentrierung:
   ca. der bisherige linke Abstand von Termin bleibt so erhalten, die drei
   gleich breiten 1fr-Spalten verteilen sich aber über die volle restliche
   Breite nach rechts, wodurch Ort und Alter sichtbar weiter auseinander-
   rücken. Tablet/Mobil bewusst unverändert (volle Breite, kein
   padding-left), da das "zu eng"-Problem dort nicht auftrat. */
.sarre-erwachsenenworkshop-overview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sarre-space-lg);
	max-width: none;
	padding-left: 6.5rem;
}
@media (max-width: 900px) {
	.sarre-erwachsenenworkshop-overview-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: none;
		padding-left: 0;
	}
}
@media (max-width: 560px) {
	.sarre-erwachsenenworkshop-overview-grid {
		grid-template-columns: 1fr;
		max-width: none;
		padding-left: 0;
	}
}
.sarre-erwachsenenworkshop-overview-item__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.35rem;
	font-family: var(--sarre-font-heading);
	font-size: 1rem;
	color: var(--sarre-color-anthracite);
}
/* Dezente, einheitliche Icons für Termin/Ort/Alter (owner-Vorgabe
   2026-10-01) - keine Emojis, keine externe Icon-Bibliothek, Farbe =
   bestehende Akzent-/Pinkfarbe über currentColor. Siehe
   sarre_core_get_erwachsenenworkshop_overview_icon_svg() in
   erwachsenenworkshop-shortcodes.php für das SVG-Markup selbst. */
.sarre-erwachsenenworkshop-overview-item__icon {
	display: inline-flex;
	flex: none;
	color: var(--sarre-color-accent);
}
.sarre-erwachsenenworkshop-overview-item__icon svg {
	display: block;
	width: 18px;
	height: 18px;
}
.sarre-erwachsenenworkshop-overview-item__text {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sarre-color-body-text);
}
/* Termin/Ort/Alter (owner-Vorgabe 2026-10-01: "damit alle drei Bereiche
   wie echte Eckdaten wirken und nicht wie kleiner Fließtext") - etwas
   größer/kräftiger als die optionalen Zusatzangaben (Kosten/Uhrzeiten/
   Voraussetzungen/Mitzubringen), die bewusst beim ruhigeren Fließtext-Stil
   bleiben. Die --highlight-Modifier-Klasse wird in PHP exakt für die drei
   Items mit Icon gesetzt, siehe sarre_core_render_erwachsenenworkshop_
   overview_section(). */
.sarre-erwachsenenworkshop-overview-item--highlight .sarre-erwachsenenworkshop-overview-item__text {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sarre-color-anthracite);
}
/* Adresse -> Google Maps (owner-Vorgabe 2026-10-01): bewusst kein
   Standard-Browser-Blau, sondern Textfarbe + pinke Akzent-Unterstreichung,
   die beim Hover/Fokus zur Akzentfarbe wechselt - passend zur übrigen
   Gestaltung. Ziel-URL kommt aus sarre_core_get_venue_maps_url()
   (relationships.php). */
.sarre-erwachsenenworkshop-overview-item__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--sarre-color-accent);
	text-underline-offset: 2px;
}
.sarre-erwachsenenworkshop-overview-item__link:hover,
.sarre-erwachsenenworkshop-overview-item__link:focus-visible {
	color: var(--sarre-color-accent);
}

/* -- 9. Unverbindliche Anmeldung (Fluent Forms) ---------------------------
   Gleiches Light-Touch-Skin-Prinzip wie
   .sarre-ferien-page-section--registration - eigener Namespace, kein
   Fluent-Forms-Core-Eingriff. */
.sarre-erwachsenenworkshop-section--registration {
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
}
.sarre-erwachsenenworkshop-registration__inner {
	/* Visueller Feinschliff 2026-09-30: dieselbe Breite wie "Auf einen
	   Blick" (owner-Vorgabe, vorher fest 760px) - Formularfelder bleiben
	   unverändert einspaltig, nur der Container wird breiter. */
	max-width: var(--sarre-erwachsenenworkshop-content-width);
	margin: 0 auto;
}
.sarre-erwachsenenworkshop-registration__intro {
	margin: var(--sarre-space-sm) 0 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sarre-color-body-text);
}
.sarre-erwachsenenworkshop-registration__notice {
	font-family: var(--sarre-font-body);
	color: var(--sarre-color-body-text);
}
.sarre-erwachsenenworkshop-registration__form {
	margin-top: var(--sarre-space-lg);
}
.sarre-erwachsenenworkshop-registration__form .ff-el-form-control {
	font-family: var(--sarre-font-body);
	border-radius: var(--sarre-radius);
}
.sarre-erwachsenenworkshop-registration__form .ff-el-input--label label {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
.sarre-erwachsenenworkshop-registration__form .ff-btn-submit {
	background-color: var(--sarre-color-accent) !important;
	border-color: var(--sarre-color-accent) !important;
	color: var(--sarre-color-white) !important;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	border-radius: 2px !important;
}
.sarre-erwachsenenworkshop-registration__form .ff-btn-submit:hover,
.sarre-erwachsenenworkshop-registration__form .ff-btn-submit:focus-visible {
	filter: brightness(0.92);
}
@media (max-width: 700px) {
	.sarre-erwachsenenworkshop-registration__form .ff_has_multi_select,
	.sarre-erwachsenenworkshop-registration__form .ff-el-group {
		max-width: 100%;
	}
}

/* ==========================================================================
   Teamseite (/team/, 2026-10-02) — [sarre_team_page] in the post_content of
   one ordinary new WordPress Page (slug "team"), same pattern as the
   Ferienworkshop-Seite/Erwachsenenworkshop-Single — no Theme Builder
   template, no CPT-archive rewrite change (sarre_person keeps its own
   unrelated /personen/ structure, untouched). Hero structure identical to
   .sarre-termine-page-hero (see that block's own doc comment far above) —
   only the selector prefix differs. Cards reuse the existing
   `.sarre-person-card__photo`/`--placeholder`/`__initials`/`__name`
   (Abschnitt E, Produktion-Single Credits) unmodified; only the new
   `.sarre-team-page-card*`/`__areas` classes below are genuinely new.
   ========================================================================== */

.sarre-team-page-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 700px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	background-color: var(--sarre-color-anthracite);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
}
.sarre-team-page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-team-page-hero__row {
	width: 40%;
	margin-top: 130px;
	padding-left: 7%;
	padding-right: var(--sarre-space-md);
	box-sizing: border-box;
}
.sarre-team-page-hero__heading {
	margin: 0 0 var(--sarre-space-sm);
	color: var(--sarre-color-white);
	font-size: 76px;
	font-weight: 500 !important;
	line-height: 1.05em !important;
	letter-spacing: -1px !important;
	text-transform: uppercase;
}
.sarre-team-page-hero__intro {
	max-width: 480px;
	margin: 0;
	color: var(--sarre-color-white);
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	line-height: 1.4em;
}
@media (max-width: 900px) {
	.sarre-team-page-hero__row {
		width: 80%;
		padding-left: 5%;
		padding-right: 5%;
	}
	.sarre-team-page-hero__heading {
		font-size: 46px;
	}
}
@media (max-width: 700px) {
	.sarre-team-page-hero__row {
		width: 100%;
		padding-left: 7%;
		padding-right: 7%;
	}
	.sarre-team-page-hero__heading {
		font-size: 36px;
	}
}

/* -- Bereiche (Geschäftsleitung & Organisation / Künstlerisches Team /
   Dozent:innen) -- Bereich 2 ("Künstlerisches Team") gets the owner-
   requested dezent/pastel background via `--pastel`, using the same
   existing `--sarre-color-light` token already used as a section
   background elsewhere in this project — no new colour. */
.sarre-team-page-section {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-team-page-section--pastel {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	max-width: 100vw;
	background: var(--sarre-color-light);
}
.sarre-team-page-section--pastel > .sarre-team-page-section__header,
.sarre-team-page-section--pastel > .sarre-team-grid {
	max-width: var(--sarre-content-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: calc(var(--sarre-space-md) + 64px);
	padding-right: var(--sarre-space-md);
}
.sarre-team-page-section__header {
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-team-page-section__heading {
	margin: 0.3rem 0 0;
	color: var(--sarre-color-anthracite);
}

/* -- Teamraster -- same auto-fill/minmax technique as `.sarre-credits-list`
   (see that block's own doc comment above): real cards keep their normal
   width and sit left-aligned when there are fewer people than the column
   cap, rather than stretching empty tracks to fill the row. */
.sarre-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--sarre-space-md) var(--sarre-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 560px) {
	.sarre-team-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}
@media (min-width: 900px) {
	.sarre-team-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Button reset so `.sarre-team-page-card` lays out exactly like the
   existing `.sarre-person-card__link` (<a>) it sits alongside in markup —
   same flex-column/photo-order/name-order behaviour, just on a <button>
   so it opens the Team-Modal instead of navigating. */
.sarre-team-page-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.sarre-team-page-card:focus-visible {
	outline: 2px solid var(--sarre-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}
/* Fachbereich(e) — deliberately separate from `.sarre-person-card__roles`
   (that class is reserved for the Credits list's `person_rolle` terms,
   styled ABOVE the name). Fachbereich sits BELOW the name here, per the
   owner's explicit card order, in the calmer body-text colour rather than
   the Credits list's pink role accent. `order: 4` guarantees it renders
   after `__photo` (order: 1) and `__name` (order: 3) in the shared flex
   column regardless of source order. */
.sarre-team-page-card__areas {
	order: 4;
	display: block;
	margin: 0.2rem 0 0;
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	color: var(--sarre-color-body-text);
}

/* -- Newsletter row -- identical structure to .sarre-termine-page-
   newsletter, see that block's own doc comment far above. */
.sarre-team-page-newsletter {
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-team-page-newsletter__inner {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
@media (min-width: 900px) {
	.sarre-team-page-newsletter {
		padding: calc(var(--sarre-space-lg) * 1.2) var(--sarre-space-lg);
	}
}
.sarre-team-page-newsletter .sarre-newsletter {
	max-width: none;
	margin: 0;
	text-align: left;
}
.sarre-team-page-newsletter .sarre-newsletter__copy {
	margin: 0 0 var(--sarre-space-md);
}
.sarre-team-page-newsletter .sarre-newsletter__text {
	margin: 0;
}
@media (min-width: 900px) {
	.sarre-team-page-newsletter .sarre-newsletter {
		display: flex;
		align-items: center;
		gap: var(--sarre-space-lg);
	}
	.sarre-team-page-newsletter .sarre-newsletter__copy {
		flex: 1 1 380px;
		margin: 0;
	}
	.sarre-team-page-newsletter .sarre-newsletter__form-col {
		flex: 1 1 380px;
	}
	.sarre-team-page-newsletter .sarre-newsletter #sib-form {
		max-width: none;
	}
}

/* -- Team-Modal (js/sarre-team-modal.js) -- own, project-specific classes
   throughout (never the generic `.modal`/`.card`/`.overlay`, per explicit
   instruction, to avoid any collision with Divi/plugin CSS). Structure/
   behaviour mirrors the existing `.sarre-lightbox-*` component (see that
   block's own doc comment above) — same dialog/backdrop/close-button
   layering and the same `body.*-open` scroll-lock technique — but is its
   own independent component, not a second use of the lightbox. */
.sarre-team-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sarre-space-md);
}
.sarre-team-modal[hidden] {
	display: none;
}
.sarre-team-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.72);
}
.sarre-team-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 32rem;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--sarre-color-white);
	border-radius: var(--sarre-radius);
	padding: var(--sarre-space-lg);
	box-shadow: 0 12px 32px rgba(36, 36, 36, 0.28);
}
.sarre-team-modal__close {
	position: absolute;
	top: var(--sarre-space-sm);
	right: var(--sarre-space-sm);
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: var(--sarre-color-light);
	color: var(--sarre-color-anthracite);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.sarre-team-modal__close:hover,
.sarre-team-modal__close:focus-visible {
	background: var(--sarre-color-primary);
	color: var(--sarre-color-white);
}
.sarre-team-modal__photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-width: 14rem;
	margin: 0 auto var(--sarre-space-md);
	border-radius: 2px;
	overflow: hidden;
}
.sarre-team-modal__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-team-modal__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sarre-color-primary);
}
.sarre-team-modal__initials {
	font-family: var(--sarre-font-heading);
	font-weight: 700;
	font-size: 2rem;
	color: var(--sarre-color-white);
}
.sarre-team-modal__name {
	margin: 0 0 0.2rem;
	font-family: var(--sarre-font-heading);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--sarre-color-anthracite);
	text-align: center;
}
.sarre-team-modal__areas {
	margin: 0 0 var(--sarre-space-md);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--sarre-color-accent);
	text-align: center;
}
.sarre-team-modal__areas[hidden],
.sarre-team-modal__bio[hidden],
.sarre-team-modal__links[hidden] {
	display: none;
}
.sarre-team-modal__bio {
	margin: 0 0 var(--sarre-space-md);
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
}
.sarre-team-modal__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sarre-space-sm);
	margin: 0;
	padding: var(--sarre-space-sm) 0 0;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-team-modal__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--sarre-color-primary);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
}
.sarre-team-modal__link:hover,
.sarre-team-modal__link:focus-visible {
	color: var(--sarre-color-accent);
}
.sarre-team-modal__link svg {
	width: 20px;
	height: 20px;
}
body.sarre-team-modal-open {
	overflow: hidden;
}


/* =========================================================================
   M5b.8 Interner Bereich (2026-10-03) — Dashboard, Ordneransicht,
   Probenplan, Passwortseite.
   Markup: sarre-core/includes/intern-frontend.php ([sarre_intern_start],
   [sarre_intern_probenplan], gestaltetes Passwortformular).
   Abgeschlossener Block: ausschließlich Klassen mit Präfix `sarre-intern-`
   bzw. die Body-Klasse `sarre-intern-page` (nur Seiten des internen
   Bereichs). Öffentliche Seiten sind nicht betroffen. Bewusst ohne
   Bilder: Ruhiger Arbeitsbereich in Weiß/Hellgrau, Türkis + Pink als Akzent.
   Listen bewusst als div[role=list] (Divi formatiert #left-area ul).
   ========================================================================= */

.sarre-intern {
	--sarre-intern-bg: #F3F8F9;
	--sarre-intern-surface: #FFFFFF;
	--sarre-intern-border: rgba(36, 36, 36, 0.08);
	--sarre-intern-border-strong: rgba(0, 182, 200, 0.35);
	--sarre-intern-teal-soft: rgba(0, 182, 200, 0.1);
	--sarre-intern-pink-soft: rgba(233, 30, 99, 0.08);
	--sarre-intern-muted: #7A7A7A;
	--sarre-intern-shadow: 0 1px 2px rgba(36, 36, 36, 0.04), 0 4px 14px rgba(36, 36, 36, 0.05);
	--sarre-intern-shadow-hover: 0 2px 4px rgba(36, 36, 36, 0.05), 0 10px 24px rgba(0, 120, 135, 0.12);
	--sarre-intern-radius: 14px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 0 var(--sarre-space-lg);
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
}
.sarre-intern *,
.sarre-intern *::before,
.sarre-intern *::after {
	box-sizing: border-box;
}

/* Seitenrahmen (nur Seiten des internen Bereichs) */
body.sarre-intern-page #main-content {
	background-color: #F3F8F9;
}
body.sarre-intern-page #main-content .container {
	padding-top: 40px;
}
body.sarre-intern-page .entry-title.main_title {
	display: none;
}

/* Icons */
.sarre-intern .sarre-intern-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* Kopfbereich */
.sarre-intern .sarre-intern-head {
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-intern .sarre-intern-head--folder {
	display: flex;
	align-items: center;
	gap: var(--sarre-space-sm);
}
.sarre-intern .sarre-intern-head__icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	padding: 13px;
	border-radius: 12px;
	background: var(--sarre-intern-teal-soft);
	color: var(--sarre-color-primary);
}
.sarre-intern .sarre-intern-head__title {
	margin: 0;
	padding: 0;
	font-family: var(--sarre-font-heading);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
}
.sarre-intern .sarre-intern-head__intro {
	margin: 0.4rem 0 0;
	padding: 0;
	font-size: 1.0625rem;
	color: var(--sarre-color-body-text);
}
.sarre-intern .sarre-intern-head--folder .sarre-intern-head__intro {
	font-size: 0.9375rem;
	color: var(--sarre-intern-muted);
}

/* Breadcrumb */
.sarre-intern .sarre-intern-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin: 0 0 var(--sarre-space-md);
	font-size: 0.875rem;
	line-height: 1.4;
}
.sarre-intern .sarre-intern-crumbs__link {
	color: var(--sarre-color-primary);
	font-weight: 600;
	text-decoration: none;
}
.sarre-intern .sarre-intern-crumbs__link:hover,
.sarre-intern .sarre-intern-crumbs__link:focus-visible {
	color: var(--sarre-color-accent);
	text-decoration: underline;
}
.sarre-intern .sarre-intern-crumbs__sep {
	color: var(--sarre-intern-muted);
}
.sarre-intern .sarre-intern-crumbs__current {
	color: var(--sarre-color-anthracite);
	font-weight: 600;
}

/* Abschnitte */
.sarre-intern .sarre-intern-section {
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-intern .sarre-intern-section__title {
	margin: 0 0 var(--sarre-space-sm);
	padding: 0;
	font-family: var(--sarre-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sarre-intern-muted);
}

/* Badge „Aktuell" */
.sarre-intern .sarre-intern-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Buttons */
.sarre-intern .sarre-intern-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	margin: 0;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	font-family: var(--sarre-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.sarre-intern .sarre-intern-btn .sarre-intern-icon {
	width: 18px;
	height: 18px;
}
.sarre-intern .sarre-intern-btn--accent {
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
}
.sarre-intern .sarre-intern-btn--accent:hover,
.sarre-intern .sarre-intern-btn--accent:focus-visible {
	background: #C2185B;
	color: var(--sarre-color-white);
}
.sarre-intern .sarre-intern-btn--block {
	display: flex;
	width: 100%;
}
.sarre-intern .sarre-intern-btn:focus-visible,
.sarre-intern .sarre-intern-card:focus-visible,
.sarre-intern .sarre-intern-file:focus-visible {
	outline: 3px solid rgba(0, 182, 200, 0.45);
	outline-offset: 2px;
}

/* Probenplan-Karte (Dashboard) */
.sarre-intern .sarre-intern-plan-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sarre-space-md);
	margin: 0 0 var(--sarre-space-lg);
	padding: var(--sarre-space-md) var(--sarre-space-lg) var(--sarre-space-md) var(--sarre-space-md);
	border: 1px solid rgba(233, 30, 99, 0.18);
	border-radius: var(--sarre-intern-radius);
	background: linear-gradient(120deg, var(--sarre-intern-pink-soft) 0%, var(--sarre-intern-surface) 55%, var(--sarre-intern-teal-soft) 100%);
	box-shadow: var(--sarre-intern-shadow);
	overflow: hidden;
}
.sarre-intern .sarre-intern-plan-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	background: linear-gradient(180deg, var(--sarre-color-accent), var(--sarre-color-primary));
}
.sarre-intern .sarre-intern-plan-card__icon {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 16px;
	border-radius: 16px;
	background: var(--sarre-color-white);
	color: var(--sarre-color-accent);
	box-shadow: var(--sarre-intern-shadow);
}
.sarre-intern .sarre-intern-plan-card__body {
	flex: 1 1 auto;
	min-width: 0;
}
.sarre-intern .sarre-intern-plan-card__title {
	margin: 0.4rem 0 0.2rem;
	padding: 0;
	font-family: var(--sarre-font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
}
.sarre-intern .sarre-intern-plan-card__text {
	margin: 0;
	padding: 0;
}
.sarre-intern .sarre-intern-plan-card__meta {
	margin: 0.35rem 0 0;
	padding: 0;
	font-size: 0.875rem;
	color: var(--sarre-intern-muted);
	overflow-wrap: anywhere;
}
.sarre-intern .sarre-intern-plan-card .sarre-intern-btn {
	flex: 0 0 auto;
}

/* Karten-Raster (Kategorien / Ordner) */
.sarre-intern .sarre-intern-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sarre-space-sm);
}
.sarre-intern .sarre-intern-card {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 84px;
	padding: 1rem 1.1rem;
	border: 1px solid var(--sarre-intern-border);
	border-radius: var(--sarre-intern-radius);
	background: var(--sarre-intern-surface);
	box-shadow: var(--sarre-intern-shadow);
	color: var(--sarre-color-anthracite);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.sarre-intern .sarre-intern-card:hover {
	border-color: var(--sarre-intern-border-strong);
	box-shadow: var(--sarre-intern-shadow-hover);
	transform: translateY(-1px);
}
.sarre-intern .sarre-intern-card__icon {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 11px;
	border-radius: 12px;
	background: var(--sarre-intern-teal-soft);
	color: var(--sarre-color-primary);
}
.sarre-intern .sarre-intern-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}
.sarre-intern .sarre-intern-card__title {
	font-family: var(--sarre-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sarre-color-anthracite);
	overflow-wrap: anywhere;
}
.sarre-intern .sarre-intern-card__meta {
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	color: var(--sarre-intern-muted);
}
.sarre-intern .sarre-intern-card__arrow {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: rgba(36, 36, 36, 0.3);
	transition: color 0.15s ease, transform 0.15s ease;
}
.sarre-intern .sarre-intern-card:hover .sarre-intern-card__arrow {
	color: var(--sarre-color-accent);
	transform: translateX(2px);
}

/* Dateiliste */
.sarre-intern .sarre-intern-files {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--sarre-intern-border);
	border-radius: var(--sarre-intern-radius);
	background: var(--sarre-intern-surface);
	box-shadow: var(--sarre-intern-shadow);
	overflow: hidden;
}
.sarre-intern .sarre-intern-file {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1.1rem;
	border-top: 1px solid var(--sarre-intern-border);
	color: var(--sarre-color-anthracite);
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.sarre-intern .sarre-intern-file:first-child {
	border-top: 0;
}
.sarre-intern .sarre-intern-file:hover {
	background: #F7FBFC;
}
.sarre-intern .sarre-intern-file__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 9px;
	border-radius: 10px;
	background: var(--sarre-intern-teal-soft);
	color: var(--sarre-color-primary);
}
.sarre-intern .sarre-intern-file--pdf .sarre-intern-file__icon {
	background: var(--sarre-intern-pink-soft);
	color: var(--sarre-color-accent);
}
.sarre-intern .sarre-intern-file__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}
.sarre-intern .sarre-intern-file__name {
	font-weight: 600;
	line-height: 1.35;
	color: var(--sarre-color-anthracite);
	overflow-wrap: anywhere;
}
.sarre-intern .sarre-intern-file__meta {
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	color: var(--sarre-intern-muted);
}
.sarre-intern .sarre-intern-file__action {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--sarre-intern-border-strong);
	border-radius: 999px;
	color: var(--sarre-color-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sarre-intern .sarre-intern-file__action .sarre-intern-icon {
	width: 16px;
	height: 16px;
}
.sarre-intern .sarre-intern-file:hover .sarre-intern-file__action {
	border-color: var(--sarre-color-primary);
	background: var(--sarre-color-primary);
	color: var(--sarre-color-white);
}

/* Probenplan-Seite */
.sarre-intern .sarre-intern-plan-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--sarre-space-lg);
	align-items: start;
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-intern .sarre-intern-current__card {
	position: relative;
	padding: var(--sarre-space-md);
	border: 1px solid rgba(233, 30, 99, 0.18);
	border-radius: var(--sarre-intern-radius);
	background: linear-gradient(160deg, var(--sarre-intern-pink-soft) 0%, var(--sarre-intern-surface) 60%);
	box-shadow: var(--sarre-intern-shadow);
}
.sarre-intern .sarre-intern-current__icon {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 0 var(--sarre-space-sm);
	padding: 14px;
	border-radius: 14px;
	background: var(--sarre-color-white);
	color: var(--sarre-color-accent);
	box-shadow: var(--sarre-intern-shadow);
}
.sarre-intern .sarre-intern-current__name {
	margin: 0.6rem 0 0.2rem;
	padding: 0;
	font-family: var(--sarre-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sarre-color-anthracite);
	overflow-wrap: anywhere;
}
.sarre-intern .sarre-intern-current__date {
	margin: 0 0 var(--sarre-space-md);
	padding: 0;
	font-size: 0.875rem;
	color: var(--sarre-intern-muted);
}
.sarre-intern .sarre-intern-more {
	margin: var(--sarre-space-sm) 0 0;
}
.sarre-intern .sarre-intern-more__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--sarre-space-sm);
	padding: 0.5rem 1rem;
	border: 1px solid var(--sarre-intern-border-strong);
	border-radius: 999px;
	background: var(--sarre-intern-surface);
	color: var(--sarre-color-primary);
	font-size: 0.875rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.sarre-intern .sarre-intern-more__toggle::-webkit-details-marker {
	display: none;
}
.sarre-intern .sarre-intern-more__toggle::after {
	content: "▾";
	font-size: 0.75rem;
}
.sarre-intern .sarre-intern-more[open] .sarre-intern-more__toggle::after {
	content: "▴";
}

/* Hinweise */
.sarre-intern .sarre-intern-notice {
	margin: 0 0 var(--sarre-space-md);
	padding: 1rem 1.2rem;
	border: 1px dashed var(--sarre-intern-border-strong);
	border-radius: var(--sarre-intern-radius);
	background: var(--sarre-intern-surface);
	color: var(--sarre-color-body-text);
}

/* Fußzeile */
.sarre-intern .sarre-intern-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: var(--sarre-space-lg) 0 0;
	padding: var(--sarre-space-md) 0 0;
	border-top: 1px solid var(--sarre-intern-border);
	font-size: 0.875rem;
}
.sarre-intern .sarre-intern-foot .sarre-intern-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.sarre-intern .sarre-intern-foot__back,
.sarre-intern .sarre-intern-foot__leave,
.sarre-intern .sarre-intern-foot__stand {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.sarre-intern .sarre-intern-foot__back {
	color: var(--sarre-color-primary);
	font-weight: 600;
	text-decoration: none;
}
.sarre-intern .sarre-intern-foot__stand {
	color: var(--sarre-intern-muted);
}
.sarre-intern .sarre-intern-foot__leave {
	margin-left: auto;
	color: var(--sarre-color-accent);
	font-weight: 600;
	text-decoration: none;
}
.sarre-intern .sarre-intern-foot__back:hover,
.sarre-intern .sarre-intern-foot__back:focus-visible,
.sarre-intern .sarre-intern-foot__leave:hover,
.sarre-intern .sarre-intern-foot__leave:focus-visible {
	text-decoration: underline;
}

/* Passwortseite */
.sarre-intern.sarre-intern-login {
	display: flex;
	justify-content: center;
	padding: var(--sarre-space-md) 0 var(--sarre-space-lg);
}
.sarre-intern .sarre-intern-login__card {
	width: 100%;
	max-width: 420px;
	padding: 2.25rem 2rem 2rem;
	border: 1px solid var(--sarre-intern-border);
	border-top: 4px solid var(--sarre-color-primary);
	border-radius: var(--sarre-intern-radius);
	background: var(--sarre-intern-surface);
	box-shadow: var(--sarre-intern-shadow-hover);
	text-align: center;
}
.sarre-intern .sarre-intern-login__logo {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--sarre-space-sm);
	border-radius: 12px;
	object-fit: contain;
}
.sarre-intern .sarre-intern-login__lock {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 0.75rem;
	padding: 12px;
	border-radius: 50%;
	background: var(--sarre-intern-pink-soft);
	color: var(--sarre-color-accent);
}
.sarre-intern .sarre-intern-login__title {
	margin: 0 0 0.5rem;
	padding: 0;
	font-family: var(--sarre-font-heading);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
}
.sarre-intern .sarre-intern-login__text {
	margin: 0 0 var(--sarre-space-md);
	padding: 0;
	font-size: 0.9375rem;
}
.sarre-intern .sarre-intern-login__error {
	margin: 0 0 var(--sarre-space-sm);
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	background: var(--sarre-intern-pink-soft);
	color: #AD1457;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
}
.sarre-intern .sarre-intern-login__form {
	margin: 0;
	text-align: left;
}
.sarre-intern .sarre-intern-login__label {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--sarre-color-anthracite);
	font-size: 0.875rem;
	font-weight: 600;
}
.sarre-intern input.sarre-intern-login__input {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0 0 var(--sarre-space-sm);
	padding: 0 1rem;
	border: 1px solid rgba(36, 36, 36, 0.18);
	border-radius: 10px;
	background: var(--sarre-color-white);
	color: var(--sarre-color-anthracite);
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	box-shadow: none;
}
.sarre-intern input.sarre-intern-login__input:focus {
	border-color: var(--sarre-color-primary);
	outline: 3px solid rgba(0, 182, 200, 0.25);
	outline-offset: 0;
}

/* Responsiv */
@media (max-width: 980px) {
	body.sarre-intern-page #main-content .container {
		padding-top: 28px;
	}
	.sarre-intern .sarre-intern-plan-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sarre-space-md);
	}
}
@media (max-width: 640px) {
	.sarre-intern .sarre-intern-plan-card {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--sarre-space-md);
	}
	.sarre-intern .sarre-intern-plan-card__icon {
		width: 52px;
		height: 52px;
		padding: 13px;
	}
	.sarre-intern .sarre-intern-plan-card .sarre-intern-btn {
		width: 100%;
	}
	.sarre-intern .sarre-intern-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-intern .sarre-intern-file {
		flex-wrap: wrap;
		padding: 0.85rem 1rem;
	}
	.sarre-intern .sarre-intern-file__action {
		margin-left: calc(40px + 0.9rem);
	}
	.sarre-intern .sarre-intern-foot__leave {
		margin-left: 0;
	}
	.sarre-intern .sarre-intern-login__card {
		padding: 1.75rem 1.25rem 1.5rem;
	}
}

/* M7a (2026-10-05) — Startseite „Aktuelles": einziger freigegebener Zusatz
   im gesperrten Bereich. Nur Abstand/Ausrichtung des Abschluss-Links
   „Alle Meldungen" (Linkstil selbst: bestehendes `.sarre-link-editorial`).
   `position: relative; z-index: 1` wie `.sarre-homepage-aktuelles__intro`,
   damit der Link sicher über der dekorativen Türkis-Ebene liegt. Keine
   bestehende Regel verändert. */
.sarre-homepage-aktuelles__all {
	position: relative;
	z-index: 1;
	margin: var(--sarre-space-md) 0 0;
	text-align: center;
}

/* ==========================================================================
   M7a „Aktuelles" (2026-10-05) — Design für [sarre_aktuelles_page]
   (/aktuelles/) und [sarre_aktuelles_single] (News-/Presse-Einzelseiten).
   Ausschließlich `.sarre-aktuelles-*` plus bewusst wiederverwendete
   Utilities (.sarre-eyebrow, .sarre-heading-serif, .sarre-btn,
   .sarre-link-editorial, .sarre-ai-label, .sarre-empty-state). Nur
   bestehende Farb-/Abstands-Tokens, keine neue Hex-Farbe, keine Webfonts.
   Redaktionell/magazinartig: kompaktes typografisches Intro, eine
   hervorgehobene Meldung (Bild links / Text rechts), ruhiges Kartenraster
   3/2/1. Bilder immer in fester Fläche (object-fit), Presse-Logos
   unbeschnitten (contain) auf heller Fläche, ohne Bild ruhige Fläche in
   Sarré-Farben. Newsletter-Zeile: gleiche Wrapper-Struktur wie
   .sarre-termine-page-newsletter (projektweites Muster je Übersichtsseite),
   Komponente selbst unverändert.
   ========================================================================== */

/* Basis nur für die eigenen Bereiche — bewusst NICHT für die
   wiederverwendete Newsletter-Komponente (die bleibt unverändert). */
.sarre-aktuelles-intro,
.sarre-aktuelles-list,
.sarre-aktuelles-single,
.sarre-aktuelles-back,
.sarre-aktuelles-more {
	font-family: var(--sarre-font-body);
	color: var(--sarre-color-body-text);
	overflow-wrap: break-word;
}
.sarre-aktuelles-intro,
.sarre-aktuelles-intro *,
.sarre-aktuelles-list,
.sarre-aktuelles-list *,
.sarre-aktuelles-single,
.sarre-aktuelles-single *,
.sarre-aktuelles-back,
.sarre-aktuelles-more,
.sarre-aktuelles-more * {
	box-sizing: border-box;
}

/* -- Intro (kompakt, rein typografisch; Bild nur wenn gepflegt) -- */
.sarre-aktuelles-intro {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: calc(var(--sarre-space-lg) * 1.4) var(--sarre-space-md) var(--sarre-space-lg);
}
.sarre-aktuelles-intro__text {
	max-width: 680px;
}
.sarre-aktuelles-intro__heading {
	margin: 0 0 var(--sarre-space-sm);
	padding: 0;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	line-height: 1.05;
	color: var(--sarre-color-anthracite);
}
.sarre-aktuelles-intro__heading::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	margin-top: var(--sarre-space-sm);
	background: var(--sarre-color-primary);
}
.sarre-aktuelles-intro__lead {
	margin: 0;
	padding: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--sarre-color-body-text);
}
.sarre-aktuelles-intro__media {
	position: relative;
	margin: var(--sarre-space-md) 0 0;
	border-radius: var(--sarre-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	max-width: 420px;
	background: var(--sarre-color-light);
}
.sarre-aktuelles-intro__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 900px) {
	.sarre-aktuelles-intro--has-image {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: calc(var(--sarre-space-lg) * 1.5);
		align-items: end;
	}
	.sarre-aktuelles-intro--has-image .sarre-aktuelles-intro__media {
		margin: 0;
	}
}

/* -- Liste / Container -- */
.sarre-aktuelles-list {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: 0 var(--sarre-space-md) calc(var(--sarre-space-lg) * 1.5);
}
.sarre-aktuelles-empty {
	margin: 0;
}

/* -- Karte: gemeinsame Basis -- */
.sarre-aktuelles-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--sarre-color-white);
	border-radius: var(--sarre-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(36, 36, 36, 0.12);
	transition: box-shadow 0.2s ease;
}
.sarre-aktuelles-card:hover,
.sarre-aktuelles-card:focus-within {
	box-shadow: 0 6px 18px rgba(36, 36, 36, 0.12);
}
.sarre-aktuelles-card__media {
	position: relative;
	display: block;
	flex: 0 0 auto;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--sarre-color-light);
	text-decoration: none;
}
.sarre-aktuelles-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.sarre-aktuelles-card:hover .sarre-aktuelles-card__media--photo .sarre-aktuelles-card__image {
	transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
	.sarre-aktuelles-card__image,
	.sarre-aktuelles-card {
		transition: none;
	}
	.sarre-aktuelles-card:hover .sarre-aktuelles-card__media--photo .sarre-aktuelles-card__image {
		transform: none;
	}
}

/* Presse-Logo: vollständig, unbeschnitten, auf heller Fläche. */
.sarre-aktuelles-card__media--logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12% 18%;
	background: var(--sarre-color-light);
}
.sarre-aktuelles-card__media--logo .sarre-aktuelles-card__image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Ohne Bild: ruhige Fläche in Sarré-Farben mit dezenter Typ-Markierung. */
.sarre-aktuelles-card__media--fallback {
	display: flex;
	align-items: flex-end;
	padding: var(--sarre-space-md);
	background:
		linear-gradient(135deg, rgba(0, 182, 200, 0.14) 0%, rgba(0, 182, 200, 0.04) 100%),
		var(--sarre-color-white);
	border-bottom: 3px solid var(--sarre-color-primary);
}
.sarre-aktuelles-card--presse .sarre-aktuelles-card__media--fallback {
	background:
		linear-gradient(135deg, rgba(233, 30, 99, 0.10) 0%, rgba(233, 30, 99, 0.03) 100%),
		var(--sarre-color-white);
	border-bottom-color: var(--sarre-color-accent);
}
.sarre-aktuelles-card__fallback-type {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1;
	color: var(--sarre-color-primary);
	opacity: 0.55;
}
.sarre-aktuelles-card--presse .sarre-aktuelles-card__fallback-type {
	color: var(--sarre-color-accent);
}

/* Inhalt */
.sarre-aktuelles-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--sarre-space-md);
}
.sarre-aktuelles-card__meta,
.sarre-aktuelles-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1.3;
}
/* Label: kompakt. News Türkis, Presse Pink, Auszeichnung Pink-Kontur. */
.sarre-aktuelles-card__label,
.sarre-aktuelles-single__label {
	display: inline-block;
	padding: 0.25em 0.6em;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--sarre-color-white);
	background: var(--sarre-color-primary);
	border: 1px solid var(--sarre-color-primary);
	border-radius: 2px;
}
.sarre-aktuelles-card--presse .sarre-aktuelles-card__label,
.sarre-aktuelles-single--presse .sarre-aktuelles-single__label {
	background: var(--sarre-color-accent);
	border-color: var(--sarre-color-accent);
}
.sarre-aktuelles-card[data-term^="auszeichnung"] .sarre-aktuelles-card__label,
.sarre-aktuelles-single__label[data-term^="auszeichnung"] {
	background: var(--sarre-color-white);
	border-color: var(--sarre-color-accent);
	color: var(--sarre-color-accent);
}
.sarre-aktuelles-card__date,
.sarre-aktuelles-single__date {
	color: var(--sarre-color-body-text);
	opacity: 0.85;
}

.sarre-aktuelles-card__title {
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
	hyphens: auto;
}
.sarre-aktuelles-card__title a {
	color: inherit;
	text-decoration: none;
}
.sarre-aktuelles-card__title a:hover,
.sarre-aktuelles-card__title a:focus-visible {
	color: var(--sarre-color-primary);
}
/* Ganze Karte klickbar über den Titel-Link (ein Fokus-Ziel). */
.sarre-aktuelles-card__title a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sarre-aktuelles-card__excerpt {
	margin: 0 0 var(--sarre-space-sm);
	padding: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sarre-aktuelles-card__cta {
	position: relative;
	z-index: 2;
	margin-top: auto;
	align-self: flex-start;
}

/* -- Hervorgehobene Meldung (nur Seite 1) -- */
.sarre-aktuelles-featured {
	margin: 0 0 calc(var(--sarre-space-lg) * 1.2);
}
.sarre-aktuelles-card--featured .sarre-aktuelles-card__body {
	padding: var(--sarre-space-lg) var(--sarre-space-md);
	background: linear-gradient(rgba(0, 182, 200, 0.06), rgba(0, 182, 200, 0.06)), var(--sarre-color-white);
}
.sarre-aktuelles-card--featured .sarre-aktuelles-card__title {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.12;
	margin-bottom: var(--sarre-space-sm);
}
.sarre-aktuelles-card--featured .sarre-aktuelles-card__excerpt {
	font-size: 1rem;
	line-height: 1.65;
	-webkit-line-clamp: 4;
	margin-bottom: var(--sarre-space-md);
}
.sarre-aktuelles-card--featured .sarre-aktuelles-card__cta::after {
	content: '\2192';
}
/* Abnahme-Korrektur (2026-10-05): Text + Pfeil des pinken CTA-Buttons der
   hervorgehobenen Meldung immer weiß — in allen Zuständen. Nötig, weil
   eine globale Link-Farbregel (Divi/Theme, Türkis) sonst gewinnt; daher
   bewusst eng gescoped + !important, ausschließlich für diesen Button.
   Globale .sarre-btn-Regeln bleiben unverändert. */
.sarre-aktuelles-card--featured a.sarre-btn.sarre-btn--primary.sarre-aktuelles-card__cta,
.sarre-aktuelles-card--featured a.sarre-btn.sarre-btn--primary.sarre-aktuelles-card__cta:link,
.sarre-aktuelles-card--featured a.sarre-btn.sarre-btn--primary.sarre-aktuelles-card__cta:visited,
.sarre-aktuelles-card--featured a.sarre-btn.sarre-btn--primary.sarre-aktuelles-card__cta:hover,
.sarre-aktuelles-card--featured a.sarre-btn.sarre-btn--primary.sarre-aktuelles-card__cta:focus,
.sarre-aktuelles-card--featured a.sarre-btn.sarre-btn--primary.sarre-aktuelles-card__cta:focus-visible,
.sarre-aktuelles-card--featured a.sarre-btn.sarre-btn--primary.sarre-aktuelles-card__cta:active,
.sarre-aktuelles-card--featured a.sarre-btn.sarre-btn--primary.sarre-aktuelles-card__cta::after {
	color: var(--sarre-color-white) !important;
}
@media (min-width: 900px) {
	.sarre-aktuelles-card--featured {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		min-height: 380px;
	}
	/* Bild bestimmt nie die Kartenhöhe: es füllt die linke Spalte. */
	.sarre-aktuelles-card--featured .sarre-aktuelles-card__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 380px;
	}
	.sarre-aktuelles-card--featured .sarre-aktuelles-card__media--photo .sarre-aktuelles-card__image {
		position: absolute;
		inset: 0;
	}
	.sarre-aktuelles-card--featured .sarre-aktuelles-card__body {
		justify-content: center;
		padding: calc(var(--sarre-space-lg) * 1.2) var(--sarre-space-lg);
	}
	.sarre-aktuelles-card--featured .sarre-aktuelles-card__media--fallback {
		border-bottom: 0;
		border-right: 3px solid var(--sarre-color-primary);
		padding: var(--sarre-space-lg);
	}
	.sarre-aktuelles-card--featured.sarre-aktuelles-card--presse .sarre-aktuelles-card__media--fallback {
		border-right-color: var(--sarre-color-accent);
	}
}

/* -- Kartenraster 3 / 2 / 1 -- */
.sarre-aktuelles-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sarre-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-aktuelles-grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-aktuelles-grid > li::before,
.sarre-aktuelles-grid > li::marker {
	content: none;
}
@media (min-width: 701px) {
	.sarre-aktuelles-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1025px) {
	.sarre-aktuelles-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: calc(var(--sarre-space-md) * 1.25);
	}
}

/* -- Pagination -- */
.sarre-aktuelles-pagination {
	margin: calc(var(--sarre-space-lg) * 1.2) 0 0;
}
.sarre-aktuelles-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-aktuelles-pagination li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-aktuelles-pagination .page-numbers:not(ul) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sarre-color-anthracite);
	text-decoration: none;
	border-radius: 2px;
}
.sarre-aktuelles-pagination a.page-numbers:hover,
.sarre-aktuelles-pagination a.page-numbers:focus-visible {
	color: var(--sarre-color-primary);
}
.sarre-aktuelles-pagination .page-numbers.current {
	background: var(--sarre-color-primary);
	color: var(--sarre-color-white);
}
.sarre-aktuelles-pagination .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
	font-weight: 400;
}
.sarre-aktuelles-pagination .prev {
	margin-right: var(--sarre-space-sm);
}
.sarre-aktuelles-pagination .next {
	margin-left: var(--sarre-space-sm);
}
@media (max-width: 480px) {
	.sarre-aktuelles-pagination .prev,
	.sarre-aktuelles-pagination .next {
		margin: 0;
		flex-basis: 100%;
		justify-content: center;
	}
	.sarre-aktuelles-pagination .next {
		order: 2;
	}
}

/* -- Newsletter-Zeile: gleiche Struktur wie .sarre-termine-page-newsletter -- */
.sarre-aktuelles-newsletter {
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
	padding: var(--sarre-space-lg) var(--sarre-space-md);
}
.sarre-aktuelles-newsletter__inner {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-aktuelles-newsletter .sarre-newsletter {
	max-width: none;
	margin: 0;
	text-align: left;
}
.sarre-aktuelles-newsletter .sarre-newsletter__copy {
	margin: 0 0 var(--sarre-space-md);
}
.sarre-aktuelles-newsletter .sarre-newsletter__text {
	margin: 0;
}
@media (min-width: 900px) {
	.sarre-aktuelles-newsletter {
		padding: calc(var(--sarre-space-lg) * 1.2) var(--sarre-space-lg);
	}
	.sarre-aktuelles-newsletter .sarre-newsletter {
		display: flex;
		align-items: center;
		gap: var(--sarre-space-lg);
	}
	.sarre-aktuelles-newsletter .sarre-newsletter__copy {
		flex: 1 1 380px;
		margin: 0;
	}
	.sarre-aktuelles-newsletter .sarre-newsletter__form-col {
		flex: 1 1 380px;
	}
	.sarre-aktuelles-newsletter .sarre-newsletter #sib-form {
		max-width: none;
	}
}

/* -- Einzelseiten (News + Presse) -- */
.sarre-aktuelles-single,
.sarre-aktuelles-back {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--sarre-space-md);
}
.sarre-aktuelles-single {
	padding-top: calc(var(--sarre-space-lg) * 1.4);
}
.sarre-aktuelles-single__header {
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-aktuelles-single__title {
	margin: 0;
	padding: 0;
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.1;
	color: var(--sarre-color-anthracite);
	hyphens: auto;
}
.sarre-aktuelles-single__lead {
	margin: var(--sarre-space-md) 0 0;
	padding: 0;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--sarre-color-anthracite);
}
.sarre-aktuelles-single__media {
	margin: 0 0 var(--sarre-space-lg);
}
.sarre-aktuelles-single__image-wrap {
	position: relative;
	border-radius: var(--sarre-radius);
	overflow: hidden;
	background: var(--sarre-color-light);
}
.sarre-aktuelles-single__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
}
.sarre-aktuelles-single__caption {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--sarre-color-body-text);
}
/* Presse-Vorschau: Screenshot begrenzt, Logo unbeschnitten auf heller Fläche. */
.sarre-aktuelles-single__media--photo .sarre-aktuelles-single__image {
	border-radius: var(--sarre-radius);
	box-shadow: 0 1px 3px rgba(36, 36, 36, 0.12);
}
.sarre-aktuelles-single__media--logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sarre-space-lg);
	background: var(--sarre-color-light);
	border-radius: var(--sarre-radius);
}
.sarre-aktuelles-single__media--logo .sarre-aktuelles-single__image {
	width: auto;
	max-width: min(320px, 100%);
	max-height: 140px;
	object-fit: contain;
}
.sarre-aktuelles-single__content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--sarre-color-body-text);
}
.sarre-aktuelles-single__content > *:first-child {
	margin-top: 0;
}
.sarre-aktuelles-single__content h2,
.sarre-aktuelles-single__content h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	color: var(--sarre-color-anthracite);
	line-height: 1.2;
	margin: var(--sarre-space-lg) 0 var(--sarre-space-sm);
	padding: 0;
}
.sarre-aktuelles-single__content h2 {
	font-size: 1.75rem;
}
.sarre-aktuelles-single__content h3 {
	font-size: 1.375rem;
}
.sarre-aktuelles-single__content a {
	color: var(--sarre-color-link);
}
.sarre-aktuelles-single__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sarre-radius);
}
.sarre-aktuelles-single__quote {
	margin: 0 0 var(--sarre-space-lg);
	padding: 0 0 0 var(--sarre-space-md);
	border-left: 3px solid var(--sarre-color-accent);
}
.sarre-aktuelles-single__quote p {
	margin: 0;
	padding: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.45;
	color: var(--sarre-color-anthracite);
}
.sarre-aktuelles-single__quote-source {
	display: block;
	margin-top: 0.6rem;
	font-style: normal;
	font-size: 0.875rem;
	color: var(--sarre-color-body-text);
}
.sarre-aktuelles-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sarre-space-sm);
	margin: var(--sarre-space-lg) 0 0;
	padding: 0;
}
.sarre-aktuelles-single__production {
	margin: var(--sarre-space-lg) 0 0;
	padding: var(--sarre-space-md);
	background: linear-gradient(rgba(0, 182, 200, 0.07), rgba(0, 182, 200, 0.07)), var(--sarre-color-white);
	border-left: 3px solid var(--sarre-color-primary);
	border-radius: 2px;
}
.sarre-aktuelles-single__production-label {
	margin-bottom: 0.35rem;
}
.sarre-aktuelles-single__production-link {
	font-size: 1.0625rem;
}

/* Zurück-Link */
.sarre-aktuelles-back {
	margin-top: var(--sarre-space-lg);
	margin-bottom: calc(var(--sarre-space-lg) * 1.4);
}
.sarre-aktuelles-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sarre-color-primary);
	text-decoration: none;
}
.sarre-aktuelles-back__link:hover,
.sarre-aktuelles-back__link:focus-visible {
	color: var(--sarre-color-accent);
}

/* „Weitere Meldungen" */
.sarre-aktuelles-more {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: var(--sarre-space-lg) var(--sarre-space-md) calc(var(--sarre-space-lg) * 1.5);
	border-top: 1px solid rgba(36, 36, 36, 0.1);
}
.sarre-aktuelles-more__heading {
	margin: 0 0 var(--sarre-space-md);
	padding: 0;
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	color: var(--sarre-color-anthracite);
}
.sarre-aktuelles-more .sarre-aktuelles-card__title {
	font-size: 1.25rem;
}


/* ==========================================================================
   Paket 1 – Akademie + Sarré Alumni (2026-10-05)
   [sarre_akademie_page] (/akademie/), [sarre_alumni_page] (/alumni/),
   [sarre_alumni_portrait] (/alumni/<name>/, Theme-Builder „Alle Personen“).
   Abgegrenzter Block: ausschließlich `sarre-akademie-*` / `sarre-alumni-*`
   plus wiederverwendete Utilities (.sarre-eyebrow, .sarre-heading-serif,
   .sarre-btn, .sarre-link-editorial, .sarre-team-grid/-page-card,
   .sarre-gallery-grid, .sarre-ai-label). Keine neue Hex-Farbe, keine
   Webfonts. Volle Breite über denselben 100vw-Breakout wie die Teamseite.
   Farbdramaturgie laut freigegebenem Mockup: Weiß → Hellgrau → Anthrazit
   (Alumni) → Weiß → Türkis (Für wen?) → Weiß → Hellgrau (Aufnahme).
   ========================================================================== */

.sarre-akademie-page,
.sarre-alumni-page,
.sarre-alumni-portrait {
	color: var(--sarre-color-body-text);
}

/* Pinke Buttons: Text immer weiß (globale Linkfarbe würde sonst greifen,
   gleiche eng gescopte Lösung wie bei M7a). */
.sarre-akademie-page .sarre-btn--primary,
.sarre-akademie-page .sarre-btn--primary:hover,
.sarre-akademie-page .sarre-btn--primary:focus-visible {
	color: var(--sarre-color-white) !important;
}

/* Divi-Seitentitel + Container-Abstände nur auf Seiten mit
   [sarre_akademie_page] / [sarre_alumni_page] (Body-Klasse aus akademie.php),
   damit der Akademie-Hero bzw. das Alumni-Intro direkt nach dem Header
   beginnt. Keine andere Seite trägt diese Klasse. */
body.sarre-shortcode-page .entry-title.main_title {
	display: none;
}
body.sarre-shortcode-page #main-content .container {
	padding-top: 0;
}
body.sarre-shortcode-page #left-area {
	padding-bottom: 0;
}

/* -- Abschnitts-Rahmen (volle Breite) -- */
.sarre-akademie-section {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(4rem, 8vw, 6.5rem) 0;
	box-sizing: border-box;
	background: var(--sarre-color-white);
}
.sarre-akademie-section__inner {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: 0 var(--sarre-space-lg);
	box-sizing: border-box;
}
.sarre-akademie-section--buehne,
.sarre-akademie-section--aufnahme {
	background: var(--sarre-color-light);
}
.sarre-akademie-section--alumni {
	background: var(--sarre-color-anthracite);
}
.sarre-akademie-section--fuerwen {
	background: var(--sarre-color-primary);
}
.sarre-akademie-heading {
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-lead {
	max-width: 62ch;
	margin: var(--sarre-space-sm) 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
}
.sarre-akademie-lead p {
	margin: 0 0 0.75em;
}
.sarre-akademie-lead p:last-child {
	margin-bottom: 0;
}

/* -- 1 · Hero -- */
.sarre-akademie-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: clamp(560px, 52vw, 720px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var(--sarre-color-white);
	background: linear-gradient(135deg, var(--sarre-color-anthracite) 0%, #0d3a40 100%);
}
.sarre-akademie-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}
.sarre-akademie-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(36, 36, 36, 0.66) 0%, rgba(36, 36, 36, 0.58) 45%, rgba(36, 36, 36, 0.12) 78%, rgba(36, 36, 36, 0) 100%),
		linear-gradient(0deg, rgba(36, 36, 36, 0.35) 0%, rgba(36, 36, 36, 0) 30%);
}
.sarre-akademie-hero--fallback .sarre-akademie-hero__overlay {
	display: none;
}
.sarre-akademie-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: 0 var(--sarre-space-lg);
	box-sizing: border-box;
}
.sarre-akademie-hero__content {
	max-width: 640px;
	padding: var(--sarre-space-lg) 0 5.5rem;
}
.sarre-akademie-hero__heading {
	margin: 0 0 var(--sarre-space-md);
	color: var(--sarre-color-white);
	font-size: clamp(2.35rem, 5vw, 3.9rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
}
.sarre-akademie-hero__text {
	max-width: 54ch;
	margin: 0 0 var(--sarre-space-lg);
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}
.sarre-akademie-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.sarre-akademie-hero__ghost {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	color: var(--sarre-color-white) !important;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 2px;
	transition: background-color 0.2s ease;
}
.sarre-akademie-hero__ghost:hover,
.sarre-akademie-hero__ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

/* -- 2 · Mehr als Unterricht -- */
.sarre-akademie-formel__head {
	max-width: 720px;
	margin: 0 auto 4rem;
	text-align: center;
}
.sarre-akademie-formel__head .sarre-akademie-lead {
	margin-left: auto;
	margin-right: auto;
}
.sarre-akademie-formel {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 0 clamp(1rem, 2.5vw, 2.5rem);
	align-items: start;
}
.sarre-akademie-formel__item {
	padding-top: var(--sarre-space-md);
	border-top: 1px solid rgba(36, 36, 36, 0.14);
}
.sarre-akademie-formel__num {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	color: var(--sarre-color-primary);
}
.sarre-akademie-formel__title {
	margin: 0.35rem 0 0.75rem;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-formel__text {
	margin: 0;
}
.sarre-akademie-formel__plus {
	padding-top: 2.6rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 3rem;
	line-height: 1;
	text-align: center;
	color: var(--sarre-color-accent);
}

/* -- 3 · Vom Probenraum auf die Bühne -- Bildpaar dominiert, Produktionen kompakt -- */
.sarre-akademie-split-head {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
	margin-bottom: 3rem;
}
.sarre-akademie-split-head .sarre-akademie-lead {
	margin: 0;
}
.sarre-akademie-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.sarre-akademie-pair--1 {
	grid-template-columns: 1fr;
}
.sarre-akademie-pair__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.sarre-akademie-pair--1 .sarre-akademie-pair__figure {
	aspect-ratio: 16 / 9;
}
.sarre-akademie-pair__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-akademie-pair__caption {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.55rem 0.9rem;
	background: rgba(36, 36, 36, 0.78);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sarre-akademie-pair__figure .sarre-ai-label {
	bottom: auto;
	top: var(--sarre-space-xs);
}
.sarre-akademie-prods {
	margin-top: 2.5rem;
}
.sarre-akademie-prods__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: var(--sarre-space-sm);
}
.sarre-akademie-prods__label {
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-prods__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sarre-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-akademie-prod__link {
	display: flex;
	align-items: center;
	gap: var(--sarre-space-sm);
	height: 100%;
	padding: 0.6rem;
	background: var(--sarre-color-white);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease;
}
.sarre-akademie-prod__link:hover,
.sarre-akademie-prod__link:focus-visible {
	box-shadow: inset 0 -2px 0 var(--sarre-color-accent);
}
.sarre-akademie-prod__media {
	flex: 0 0 96px;
	width: 96px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sarre-color-light);
}
.sarre-akademie-prod__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-akademie-prod__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.sarre-akademie-prod__kicker {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sarre-color-accent);
}
.sarre-akademie-prod__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.1875rem;
	line-height: 1.25;
	color: var(--sarre-color-anthracite);
}

/* -- 4 · Sarré Alumni (Anthrazit) -- */
.sarre-akademie-section--alumni {
	color: rgba(255, 255, 255, 0.78);
}
.sarre-akademie-alumni__head {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
	margin-bottom: 3.5rem;
}
.sarre-akademie-alumni__heading {
	margin: 0;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	color: var(--sarre-color-white);
}
.sarre-akademie-alumni__sub {
	margin: var(--sarre-space-md) 0 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.4;
	color: var(--sarre-color-white);
}
.sarre-akademie-alumni__text {
	margin: 0;
}
.sarre-akademie-alumni__more {
	margin-top: 3rem;
	padding-top: var(--sarre-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* -- Alumni-Karten (Akademie, Übersicht, „Weitere Alumni“) -- */
.sarre-alumni-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-alumni-grid--featured {
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
}
.sarre-alumni-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.sarre-alumni-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: linear-gradient(160deg, #3a3a3a, #2c2c2c);
}
.sarre-alumni-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.sarre-alumni-card__link:hover .sarre-alumni-card__image,
.sarre-alumni-card__link:focus-visible .sarre-alumni-card__image {
	transform: scale(1.03);
}
.sarre-alumni-card__initials {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 3rem;
	color: rgba(255, 255, 255, 0.4);
}
.sarre-alumni-card__name {
	display: block;
	margin: 1rem 0 0.3rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
}
.sarre-alumni-card__job {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.45;
}
.sarre-alumni-card__period {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sarre-color-primary);
}
.sarre-akademie-section--alumni .sarre-alumni-card__name {
	color: var(--sarre-color-white);
}
.sarre-akademie-section--alumni .sarre-alumni-card__job {
	color: rgba(255, 255, 255, 0.78);
}

/* -- 5 · So läuft die Akademie -- */
.sarre-akademie-how {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.sarre-akademie-how--single {
	grid-template-columns: 1fr;
}
.sarre-akademie-disc {
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}
.sarre-akademie-disc li {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 1.25rem;
	margin: 0;
	padding: 1.1rem 0;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-akademie-disc li:last-child {
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-akademie-disc__title {
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-disc__text {
	font-size: 0.9375rem;
}
.sarre-akademie-facts {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--sarre-color-light);
	border-top: 3px solid var(--sarre-color-primary);
}
.sarre-akademie-facts__heading {
	margin: 0 0 1rem;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-facts__list {
	margin: 0;
}
.sarre-akademie-facts__row {
	padding: 0.85rem 0;
	border-top: 1px solid rgba(36, 36, 36, 0.1);
}
.sarre-akademie-facts__row dt {
	margin: 0 0 0.3rem;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sarre-color-accent);
}
.sarre-akademie-facts__row dd {
	margin: 0;
	font-weight: 500;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-facts__venue,
.sarre-akademie-facts__address,
.sarre-akademie-facts__link {
	display: block;
}
.sarre-akademie-facts__address {
	font-weight: 400;
	color: var(--sarre-color-body-text);
}
.sarre-akademie-facts__link {
	margin-top: 0.35rem;
	font-size: 0.875rem;
}

/* -- 6 · Für wen? (Türkis) -- */
.sarre-akademie-fuerwen {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
	color: var(--sarre-color-white);
}
.sarre-akademie-fuerwen--single {
	grid-template-columns: minmax(0, 760px);
}
.sarre-akademie-fuerwen__eyebrow {
	color: var(--sarre-color-white);
	opacity: 0.9;
}
.sarre-akademie-fuerwen__heading {
	color: var(--sarre-color-white);
}
.sarre-akademie-fuerwen__text {
	margin: var(--sarre-space-md) 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.95);
}
.sarre-akademie-fuerwen__text p {
	margin: 0 0 0.75em;
}
.sarre-akademie-groups {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-akademie-group {
	margin: 0;
	padding: 1.5rem 1.75rem;
	background: var(--sarre-color-white);
}
.sarre-akademie-group__label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.625rem;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-group__text {
	display: block;
	font-size: 0.9375rem;
	color: var(--sarre-color-body-text);
}

/* -- 7 · Dozent:innen (Karten + Modal der Teamseite wiederverwendet) -- */
.sarre-akademie-team__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

/* -- 8 · Aufnahme & Schnuppern (Hellgrau) -- */
.sarre-akademie-aufnahme {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.sarre-akademie-aufnahme--single {
	grid-template-columns: minmax(0, 760px);
}
.sarre-akademie-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sarre-akademie-step;
}
.sarre-akademie-steps__item {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: 1rem;
	margin: 0;
	padding: 1.4rem 0;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-akademie-steps__item:last-child {
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-akademie-steps__item::before {
	counter-increment: sarre-akademie-step;
	content: counter(sarre-akademie-step);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--sarre-color-primary);
}
.sarre-akademie-steps__title {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-steps__text {
	display: block;
}
.sarre-akademie-aufnahme__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 2rem;
}
.sarre-akademie-aufnahme__note {
	font-size: 0.9375rem;
}

/* -- Alumni-Übersicht /alumni/ -- */
.sarre-alumni-page,
.sarre-alumni-portrait {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: 0 var(--sarre-space-lg);
	box-sizing: border-box;
}
.sarre-alumni-page__intro {
	max-width: 760px;
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.sarre-alumni-page__heading {
	margin: 0;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	color: var(--sarre-color-anthracite);
}
.sarre-alumni-page__sub {
	margin: var(--sarre-space-md) 0 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.4;
	color: var(--sarre-color-anthracite);
}
.sarre-alumni-page__text {
	margin: var(--sarre-space-sm) 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
}
.sarre-alumni-back {
	display: inline-flex;
	margin-top: var(--sarre-space-md);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sarre-color-primary);
	text-decoration: none;
}
.sarre-alumni-back:hover,
.sarre-alumni-back:focus-visible {
	color: var(--sarre-color-accent);
}
.sarre-alumni-closing {
	margin: clamp(3rem, 6vw, 5rem) 0;
	padding-top: var(--sarre-space-lg);
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-alumni-closing__text {
	margin: 0 0 var(--sarre-space-sm);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--sarre-color-anthracite);
}

/* -- Alumni-Portrait /alumni/<name>/ -- */
.sarre-alumni-portrait__top {
	padding-top: var(--sarre-space-lg);
}
.sarre-alumni-portrait__top .sarre-alumni-back {
	margin-top: 0;
}
.sarre-alumni-portrait__intro {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding: var(--sarre-space-lg) 0 clamp(3rem, 6vw, 4.5rem);
}
.sarre-alumni-portrait__intro--single {
	grid-template-columns: minmax(0, 760px);
}
.sarre-alumni-portrait__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--sarre-color-light);
}
.sarre-alumni-portrait__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-alumni-portrait__name {
	margin: 0;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	color: var(--sarre-color-anthracite);
}
.sarre-alumni-portrait__job {
	margin: var(--sarre-space-sm) 0 0;
	font-family: var(--sarre-font-heading);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.45;
	color: var(--sarre-color-anthracite);
}
.sarre-alumni-portrait__lead {
	margin-top: var(--sarre-space-md);
	font-size: 1.0625rem;
	line-height: 1.65;
}
.sarre-alumni-portrait__lead p {
	margin: 0 0 0.75em;
}
.sarre-alumni-portrait__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: var(--sarre-space-md) 0 0;
	padding: 0;
	list-style: none;
}
.sarre-alumni-portrait__social {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--sarre-color-primary);
	text-decoration: none;
}
.sarre-alumni-portrait__social svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.sarre-alumni-portrait__social:hover,
.sarre-alumni-portrait__social:focus-visible {
	color: var(--sarre-color-accent);
}
.sarre-alumni-teamnote {
	margin: var(--sarre-space-md) 0 0;
}
.sarre-alumni-quote {
	position: relative;
	max-width: 860px;
	margin: 0 auto clamp(3rem, 6vw, 4.5rem);
	padding: var(--sarre-space-lg) 0 0;
	border: 0;
	text-align: center;
}
.sarre-alumni-quote::before {
	content: '\201C';
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 5rem;
	line-height: 0.6;
	color: var(--sarre-color-primary);
}
.sarre-alumni-quote p {
	margin: var(--sarre-space-sm) 0 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	line-height: 1.35;
	color: var(--sarre-color-anthracite);
}
.sarre-alumni-portrait__body {
	max-width: 860px;
	margin: 0 auto;
}
.sarre-alumni-block {
	padding: var(--sarre-space-lg) 0;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-alumni-block__heading {
	margin: 0 0 var(--sarre-space-md);
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	color: var(--sarre-color-anthracite);
}
/* Stationen (Überarbeitung 2026-10-05): Titel prominent, Rolle darunter,
   manuelles Jahr als eigene Akzentinformation rechts (mobil darüber).
   Listen-Reset mit höherer Spezifität gegen Divis Listenstyles. */
.sarre-alumni-portrait ol.sarre-alumni-stations__list {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: inherit;
}
.sarre-alumni-portrait .sarre-alumni-stations__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sarre-space-sm) var(--sarre-space-lg);
	margin: 0;
	padding: 1.1rem 0;
	list-style: none;
	border-bottom: 1px solid rgba(36, 36, 36, 0.1);
}
.sarre-alumni-portrait .sarre-alumni-stations__item:first-child {
	border-top: 1px solid rgba(36, 36, 36, 0.1);
}
.sarre-alumni-stations__body {
	min-width: 0;
}
.sarre-alumni-portrait .sarre-alumni-stations__title {
	margin: 0;
	padding: 0;
	/* !important nur für die Schrift: Divis globale Heading-Typografie
	   greift sonst auf das <h3> (gleiche Lösung wie beim Startseiten-Hero). */
	font-family: var(--sarre-font-heading) !important;
	font-weight: 600 !important;
	font-size: 1.125rem !important;
	line-height: 1.35 !important;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sarre-color-anthracite);
}
.sarre-alumni-stations__link {
	color: inherit !important;
	text-decoration: none;
}
.sarre-alumni-stations__link:hover,
.sarre-alumni-stations__link:focus-visible {
	color: var(--sarre-color-accent) !important;
}
.sarre-alumni-portrait .sarre-alumni-stations__role {
	margin: 0.2rem 0 0;
	padding: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
}
.sarre-alumni-portrait .sarre-alumni-stations__year {
	flex: 0 1 auto;
	max-width: 45%;
	margin: 0;
	padding: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.125rem;
	line-height: 1.35;
	text-align: right;
	color: var(--sarre-color-primary);
}

.sarre-alumni-gallery {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.sarre-alumni-interview__section {
	margin: var(--sarre-space-lg) 0 var(--sarre-space-sm);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sarre-color-accent);
}
.sarre-alumni-interview__section:first-of-type {
	margin-top: 0;
}
.sarre-alumni-interview__qa {
	margin: 0 0 var(--sarre-space-md);
}
.sarre-alumni-interview__question {
	margin: 0 0 0.4rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.3125rem;
	line-height: 1.35;
	color: var(--sarre-color-anthracite);
}
.sarre-alumni-interview__answer {
	font-size: 1.0625rem;
	line-height: 1.7;
}
.sarre-alumni-interview__answer p {
	margin: 0 0 0.75em;
}
/* Keine zusätzliche Trennlinie direkt nach den Stationen: die letzte
   Station schließt bereits mit einer Linie ab. */
.sarre-alumni-portrait .sarre-alumni-stations + .sarre-alumni-block {
	border-top: 0;
}

/* Gemeinsamer biografischer Abschnitt „Damals“ + Interview (2026-10-05):
   Desktop ca. 35/65 auf ca. 1080 px geöffnet, Bilder links vertikal im
   natürlichen Format mit Mediathek-Caption; mobil einspaltig, Bilder vor
   dem Interview. Lightbox über die bestehenden Klassen. */
.sarre-alumni-bio {
	position: relative;
	left: 50%;
	width: min(1080px, calc(100vw - 2 * var(--sarre-space-lg)));
	max-width: none;
	transform: translateX(-50%);
	box-sizing: border-box;
}
.sarre-alumni-bio__grid {
	display: grid;
	grid-template-columns: 35fr 65fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
.sarre-alumni-portrait .sarre-alumni-bio__media.sarre-gallery-grid {
	display: flex;
	flex-direction: column;
	gap: var(--sarre-space-lg);
}
.sarre-alumni-bio__label {
	margin: 0;
}
.sarre-alumni-bio__figure {
	margin: 0;
}
.sarre-alumni-bio__frame {
	position: relative;
	overflow: hidden;
	background: var(--sarre-color-light);
}
.sarre-alumni-bio__image {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}
.sarre-alumni-bio__trigger:hover .sarre-alumni-bio__image {
	transform: scale(1.02);
}
.sarre-alumni-bio__caption {
	margin: 0.5rem 0 0;
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--sarre-color-body-text);
}
.sarre-alumni-bio__interview .sarre-alumni-interview__section:first-child {
	margin-top: 0;
}

.sarre-alumni-more {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: var(--sarre-space-lg);
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}

/* -- Tablet -- */
@media (max-width: 1023px) {
	.sarre-alumni-grid--featured {
		grid-template-columns: repeat(2, 1fr);
	}
	.sarre-akademie-prods__list {
		grid-template-columns: 1fr;
	}
}

/* -- Mobil -- */
@media (max-width: 700px) {
	.sarre-akademie-section__inner,
	.sarre-akademie-hero__inner,
	.sarre-alumni-page,
	.sarre-alumni-portrait {
		padding-left: var(--sarre-space-md);
		padding-right: var(--sarre-space-md);
	}
	.sarre-akademie-hero {
		display: block;
		min-height: 0;
		background: var(--sarre-color-anthracite);
	}
	/* 2026-11-05 Mobile-Audit: Hero kompakter (Bild 300 -> 240px,
	   Abstände über/unter Titel und Text reduziert; Texte vollständig). */
	.sarre-akademie-hero--has-image .sarre-akademie-hero__image {
		position: relative;
		height: 240px;
	}
	.sarre-akademie-hero__overlay {
		display: none;
	}
	.sarre-akademie-hero__content {
		padding: 1.5rem 0 2rem;
	}
	.sarre-akademie-hero__heading {
		margin-bottom: 1rem;
	}
	.sarre-akademie-hero__text {
		font-size: 1.0625rem;
		margin-bottom: 1.25rem;
	}
	.sarre-akademie-hero__ctas .sarre-btn,
	.sarre-akademie-hero__ghost,
	.sarre-akademie-aufnahme__cta .sarre-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
	.sarre-akademie-formel__head {
		margin-bottom: 2.5rem;
		text-align: left;
	}
	.sarre-akademie-formel {
		grid-template-columns: 1fr;
	}
	.sarre-akademie-formel__plus {
		padding: 0.75rem 0;
		font-size: 2.25rem;
		text-align: left;
	}
	.sarre-akademie-split-head,
	.sarre-akademie-alumni__head,
	.sarre-akademie-how,
	.sarre-akademie-fuerwen,
	.sarre-akademie-aufnahme,
	.sarre-alumni-portrait__intro {
		grid-template-columns: 1fr;
	}
	.sarre-akademie-split-head,
	.sarre-akademie-alumni__head {
		gap: 1rem;
		margin-bottom: 2rem;
	}
	.sarre-akademie-pair {
		grid-template-columns: 1fr;
	}
	.sarre-akademie-prods__row {
		flex-direction: column;
		gap: 0.25rem;
	}
	.sarre-alumni-grid,
	.sarre-alumni-grid--three {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem 1rem;
	}
	.sarre-alumni-grid--featured {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		margin: 0 calc(-1 * var(--sarre-space-md));
		padding: 0 var(--sarre-space-md) 6px;
	}
	.sarre-alumni-grid--featured .sarre-alumni-card {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}
	.sarre-alumni-card__name {
		font-size: 1.125rem;
	}
	.sarre-akademie-disc li {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
	.sarre-akademie-team__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.sarre-alumni-portrait .sarre-alumni-stations__item {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 0.25rem;
	}
	.sarre-alumni-portrait .sarre-alumni-stations__year {
		max-width: none;
		font-size: 1rem;
		text-align: left;
	}
	.sarre-alumni-bio {
		left: auto;
		width: auto;
		transform: none;
	}
	.sarre-alumni-bio__grid {
		grid-template-columns: 1fr;
		gap: var(--sarre-space-lg);
	}
}

/* ==========================================================================
   Paket „Sarré unterstützen“ (2026-10-05) – sarre-core/includes/support.php
   [sarre_homepage_support] · [sarre_footer_support] · [sarre_spenden_page]

   Rein additiv: keine bestehende Regel verändert. Nur bestehende Design-
   Variablen und Utilities (.sarre-eyebrow, .sarre-heading-serif, .sarre-btn,
   .sarre-link-editorial); einzige getönte Fläche = das bereits etablierte
   helle Türkis-Panel rgba(0, 182, 200, 0.07). Keine Schatten, Ecken 2px.
   Breakpoints wie im Projekt: 900px (Split → einspaltig), 700px.
   ========================================================================== */

/* -- Gemeinsam: Bild mit versetzter Türkis-Fläche ------------------------- */
/* Die Türkis-Fläche sitzt als ::before auf genau der <figure>, deren Kanten
   sie abbilden soll (Farbblock-Regel M6B) – Bleed relativ zur eigenen
   Breite, nie 100vw. */
.sarre-support-media {
	position: relative;
	margin: 0;
	min-width: 0;
}
.sarre-support-media::before {
	content: '';
	position: absolute;
	z-index: 0;
	top: 12%;
	bottom: -8%;
	left: -6%;
	width: 38%;
	background: var(--sarre-color-primary);
}
.sarre-support-media .sarre-support-media__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

/* Pinke Buttons: Text immer weiß (globale Divi-Linkfarbe würde sonst
   greifen – gleiche eng gescopte Lösung wie Paket 1/M7a). */
.sarre-homepage-support .sarre-btn--primary,
.sarre-homepage-support .sarre-btn--primary:hover,
.sarre-homepage-support .sarre-btn--primary:focus-visible,
.sarre-spenden-page .sarre-btn--primary,
.sarre-spenden-page .sarre-btn--primary:hover,
.sarre-spenden-page .sarre-btn--primary:focus-visible {
	color: var(--sarre-color-white) !important;
}
.sarre-spenden-page .sarre-btn--secondary {
	color: var(--sarre-color-accent) !important;
}
.sarre-spenden-page .sarre-btn--secondary:hover,
.sarre-spenden-page .sarre-btn--secondary:focus-visible {
	color: var(--sarre-color-white) !important;
}

/* -- Startseite: [sarre_homepage_support] -------------------------------- */
.sarre-homepage-support {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: calc(var(--sarre-space-lg) * 1.8) var(--sarre-space-md);
	box-sizing: border-box;
	color: var(--sarre-color-body-text);
	overflow-x: clip;
}
.sarre-homepage-support__inner {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
.sarre-homepage-support--no-image .sarre-homepage-support__inner {
	grid-template-columns: 1fr;
	max-width: 760px;
}
.sarre-homepage-support__heading {
	margin: 0 0 var(--sarre-space-sm);
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	color: var(--sarre-color-anthracite);
}
.sarre-homepage-support__text {
	max-width: 34em;
	margin: 0 0 var(--sarre-space-md);
	font-size: 1.0625rem;
	line-height: 1.7;
}
.sarre-homepage-support__text p {
	margin: 0 0 0.75em;
	padding: 0;
}
.sarre-homepage-support__text p:last-child {
	margin-bottom: 0;
}
@media (max-width: 900px) {
	.sarre-homepage-support {
		padding: calc(var(--sarre-space-lg) * 1.2) var(--sarre-space-md);
	}
	.sarre-homepage-support__inner {
		grid-template-columns: 1fr;
		gap: var(--sarre-space-lg);
	}
	.sarre-homepage-support .sarre-support-media::before {
		left: calc(var(--sarre-space-md) * -0.75);
		width: 30%;
	}
}

/* -- Footer: [sarre_footer_support] (Spalte 4, unter den Social-Icons) --- */
/* Nur dieser neue Baustein; Spaltenbreiten/-struktur unverändert. Linkfarbe
   (Weiß, Hover Pink) kommt aus den bestehenden .sarre-footer a-Regeln. */
.sarre-footer__support {
	margin-top: var(--sarre-space-md);
	padding-top: var(--sarre-space-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.sarre-footer__support-title {
	display: block;
	margin: 0 0 0.35rem;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
}
.sarre-footer__support-text {
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.9;
}
.sarre-footer__support-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
}
.sarre-footer__support-link::after {
	content: '\2192';
	transition: transform 0.2s ease;
}
.sarre-footer__support-link:hover::after,
.sarre-footer__support-link:focus-visible::after {
	transform: translateX(0.25em);
}

/* -- Spendenseite: [sarre_spenden_page] ---------------------------------- */
.sarre-spenden-page {
	color: var(--sarre-color-body-text);
}
.sarre-spenden-section {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(3.5rem, 7vw, 5.5rem) 0;
	box-sizing: border-box;
	background: var(--sarre-color-white);
}
/* Abwechselnd Weiß/Hellgrau aus der tatsächlichen Abschnittsfolge –
   ausgeblendete Abschnitte erzeugen so nie zwei gleiche Flächen. */
.sarre-spenden-page > .sarre-spenden-section:nth-of-type(even) {
	background: var(--sarre-color-light);
}
.sarre-spenden-section__inner {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: 0 var(--sarre-space-lg);
	box-sizing: border-box;
}
.sarre-spenden-heading {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	color: var(--sarre-color-anthracite);
}
.sarre-spenden-lead {
	margin: var(--sarre-space-sm) 0 0;
	font-size: 1.0625rem;
	line-height: 1.7;
}
.sarre-spenden-lead p {
	margin: 0 0 0.75em;
	padding: 0;
}
.sarre-spenden-lead p:last-child {
	margin-bottom: 0;
}
.sarre-spenden-head {
	max-width: 680px;
	margin: 0 auto var(--sarre-space-lg);
	text-align: center;
}
.sarre-spenden-head .sarre-eyebrow {
	text-align: center;
}

/* 1 · Einstieg */
.sarre-spenden-hero {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
.sarre-spenden-hero--no-image {
	grid-template-columns: 1fr;
	max-width: 760px;
}
.sarre-spenden-hero__heading {
	margin: 0;
	font-size: clamp(2.25rem, 4.4vw, 3.25rem);
	color: var(--sarre-color-anthracite);
}
.sarre-spenden-hero .sarre-spenden-lead {
	max-width: 32em;
	font-size: 1.125rem;
}
.sarre-spenden-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sarre-space-sm) var(--sarre-space-md);
	margin-top: var(--sarre-space-md);
}
.sarre-spenden-hero .sarre-support-media::before {
	left: auto;
	right: -6%;
}

/* 2 · Wirkung / 5 · Weitere Wege – Punkte */
.sarre-spenden-points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sarre-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-spenden-point {
	margin: 0;
	padding: var(--sarre-space-sm) 0 0;
	border-top: 2px solid var(--sarre-color-primary);
	list-style: none;
}
.sarre-spenden-point::before,
.sarre-spenden-point::marker {
	content: none;
}
.sarre-spenden-point__num {
	display: block;
	margin-bottom: 0.6rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--sarre-color-primary);
}
.sarre-spenden-point__title {
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: 1.25rem;
	color: var(--sarre-color-anthracite);
}
.sarre-spenden-point__text {
	margin: 0;
	padding: 0;
	font-size: 0.975rem;
	line-height: 1.6;
}
.sarre-spenden-more__cta {
	margin: var(--sarre-space-lg) 0 0;
	padding: 0;
	text-align: center;
}

/* 3 · So können Sie spenden */
.sarre-spenden-ways {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: var(--sarre-space-md);
	align-items: stretch;
}
.sarre-spenden-ways--single {
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}
.sarre-spenden-way {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 2px;
	background: rgba(0, 182, 200, 0.07);
	min-width: 0;
}
.sarre-spenden-way--paypal {
	background: var(--sarre-color-light);
}
.sarre-spenden-page > .sarre-spenden-section:nth-of-type(even) .sarre-spenden-way--paypal {
	background: var(--sarre-color-white);
}
.sarre-spenden-way__title {
	margin: 0 0 var(--sarre-space-md);
	padding: 0;
	font-size: 1.5rem;
	color: var(--sarre-color-anthracite);
}
.sarre-spenden-bank {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.55rem 1.5rem;
	margin: 0;
	font-size: 1rem;
}
.sarre-spenden-bank dt {
	padding-top: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sarre-color-body-text);
	opacity: 0.8;
}
.sarre-spenden-bank dd {
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--sarre-color-anthracite);
	overflow-wrap: anywhere;
}
.sarre-spenden-bank__iban {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.sarre-spenden-copy {
	margin-left: 0.6rem;
	padding: 0.15rem 0.55rem;
	font-family: var(--sarre-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sarre-color-primary);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 2px;
	cursor: pointer;
	vertical-align: middle;
}
.sarre-spenden-copy:hover,
.sarre-spenden-copy:focus-visible,
.sarre-spenden-copy.is-copied {
	color: var(--sarre-color-white);
	background: var(--sarre-color-primary);
	border-color: var(--sarre-color-primary);
}
.sarre-spenden-copy__status,
.sarre-support-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.sarre-spenden-way__note {
	margin-top: var(--sarre-space-md);
	padding-top: var(--sarre-space-sm);
	border-top: 1px solid rgba(36, 36, 36, 0.08);
	font-size: 0.9rem;
}
.sarre-spenden-way__note p,
.sarre-spenden-way__text p {
	margin: 0 0 0.75em;
	padding: 0;
}
.sarre-spenden-way__note p:last-child,
.sarre-spenden-way__text p:last-child {
	margin-bottom: 0;
}
.sarre-spenden-way__action {
	margin: var(--sarre-space-md) 0 0;
	padding: 0;
}
.sarre-spenden-way__small {
	margin: auto 0 0;
	padding: var(--sarre-space-md) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.8;
}

/* 4 · Spendenbescheinigung */
.sarre-spenden-certificate {
	max-width: 760px;
	margin: 0 auto;
	padding: 0.25rem 0 0.25rem var(--sarre-space-md);
	border-left: 3px solid var(--sarre-color-primary);
}
.sarre-spenden-certificate__heading {
	margin-bottom: var(--sarre-space-sm);
	font-size: clamp(1.5rem, 2.6vw, 1.875rem);
}
.sarre-spenden-certificate__text p {
	margin: 0 0 0.9em;
	padding: 0;
}
.sarre-spenden-certificate__mail {
	margin: 0;
	padding: 0;
	font-weight: 600;
}
.sarre-spenden-certificate__mail a {
	color: var(--sarre-color-primary);
	text-decoration: none;
}
.sarre-spenden-certificate__mail a:hover,
.sarre-spenden-certificate__mail a:focus-visible {
	text-decoration: underline;
}

/* 6 · Dank */
.sarre-spenden-thanks {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.sarre-spenden-thanks__heading {
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: var(--sarre-color-anthracite);
}
.sarre-spenden-thanks__text {
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.sarre-spenden-hero,
	.sarre-spenden-ways,
	.sarre-spenden-points {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-spenden-hero .sarre-support-media {
		order: -1;
	}
	.sarre-spenden-hero .sarre-support-media::before {
		right: calc(var(--sarre-space-md) * -0.75);
		width: 30%;
	}
}
@media (max-width: 700px) {
	.sarre-spenden-section__inner {
		padding: 0 var(--sarre-space-md);
	}
	.sarre-spenden-bank {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.1rem;
	}
	.sarre-spenden-bank dd {
		margin-bottom: 0.6rem;
	}
	.sarre-spenden-bank__iban {
		display: block;
		white-space: normal;
	}
	.sarre-spenden-copy {
		margin: 0.35rem 0 0;
	}
	.sarre-spenden-certificate {
		padding-left: var(--sarre-space-sm);
	}
}

/* --------------------------------------------------------------------------
   Startseite: „Mit Sarré verbunden bleiben“ auf Hellgrau (2026-10-05)
   Abgrenzung zum weißen Spendenblock [sarre_homepage_support] darüber.
   Reine Hintergrundfarbe der Divi-SECTION, die die Row
   `.sarre-homepage-connect` enthält (Header-Row + Social/Newsletter-Row
   liegen laut Owner in derselben Section) – volle Browserbreite, Inhalt,
   Breiten, Abstände (inkl. -80px-Lösung) bleiben unverändert. Das
   `:not(:has(.sarre-homepage-support))` verhindert, dass der Spendenblock
   mitgefärbt würde, falls er je in dieselbe Section rutscht. Bestehender
   Token --sarre-color-light (#F5F5F3), dieselbe Fläche wie „Stimmen“ und
   die alternierenden Abschnitte auf /spenden/. Die Newsletter-Karte hat
   einen eigenen deckenden Hintergrund (Türkis-Tönung über Weiß) und bleibt
   dadurch unverändert. Ohne :has()-Unterstützung (sehr alte Browser)
   bleibt die Section einfach weiß wie bisher. */
.et_pb_section:has(.sarre-homepage-connect):not(:has(.sarre-homepage-support)) {
	background-color: var(--sarre-color-light);
}


/* ==========================================================================
   Paket Vermietung (2026-10-06)
   [sarre_vermietung_page] (/vermietung/), sarre-core/includes/vermietung.php.
   Abgegrenzter Block: ausschließlich `sarre-vermietung-*` plus Scoping
   wiederverwendeter Klassen innerhalb von `.sarre-vermietung-page`
   (Akademie: hero, section, heading, lead, facts; .sarre-gallery-grid;
   .sarre-venue-block; .sarre-eyebrow; .sarre-heading-serif; .sarre-btn).
   Keine neue Hex-Farbe, keine Webfonts, bestehende Regeln unverändert.
   Seitentitel/Container-Abstand über die bestehende Body-Klasse
   .sarre-shortcode-page (gesetzt in vermietung.php).
   ========================================================================== */

.sarre-vermietung-page {
	color: var(--sarre-color-body-text);
}

/* Pinke Buttons: Text immer weiß (gleiche eng gescopte Lösung wie Akademie). */
.sarre-vermietung-page .sarre-btn--primary,
.sarre-vermietung-page .sarre-btn--primary:hover,
.sarre-vermietung-page .sarre-btn--primary:focus-visible {
	color: var(--sarre-color-white) !important;
}

/* -- Abschnitts-Töne (Rahmen = .sarre-akademie-section) -- */
.sarre-vermietung-section--light {
	background: var(--sarre-color-light);
}
.sarre-vermietung-section--turquoise {
	background: var(--sarre-color-primary);
}
.sarre-vermietung-section {
	scroll-margin-top: 80px;
}
.sarre-vermietung-head {
	max-width: 720px;
	margin: 0 auto 3.5rem;
	text-align: center;
}
.sarre-vermietung-head .sarre-akademie-lead {
	margin-left: auto;
	margin-right: auto;
}

/* -- 1 · Hero: Platz für die überlappende „Auf einen Blick“-Leiste -- */
.sarre-vermietung-hero .sarre-akademie-hero__content {
	padding-bottom: 7rem;
}
.sarre-vermietung-hero .sarre-akademie-hero__image {
	object-position: center 55%;
}

/* -- 2 · Auf einen Blick -- */
.sarre-vermietung-glance {
	position: relative;
	z-index: 3;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 var(--sarre-space-lg);
	box-sizing: border-box;
}
.sarre-vermietung-glance__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: var(--sarre-content-max-width);
	margin: -3.5rem auto 0;
	background: var(--sarre-color-white);
	box-shadow: 0 0 0 1px rgba(36, 36, 36, 0.06);
}
.sarre-vermietung-glance__list--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sarre-vermietung-glance__list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sarre-vermietung-glance__list--1 {
	grid-template-columns: minmax(0, 1fr);
}
.sarre-vermietung-glance__item {
	padding: 1.6rem 1.6rem 1.5rem;
	border-top: 3px solid var(--sarre-color-primary);
}
.sarre-vermietung-glance__item + .sarre-vermietung-glance__item {
	border-left: 1px solid rgba(36, 36, 36, 0.08);
}
.sarre-vermietung-glance__item dt {
	margin: 0 0 0.35rem;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sarre-color-accent);
}
.sarre-vermietung-glance__item dd {
	margin: 0;
}
.sarre-vermietung-glance__value {
	display: block;
	margin-bottom: 0.15rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.75rem;
	line-height: 1.1;
	color: var(--sarre-color-anthracite);
}
.sarre-vermietung-glance__text {
	display: block;
	font-weight: 500;
	line-height: 1.45;
	color: var(--sarre-color-anthracite);
}
.sarre-vermietung-glance__note {
	display: block;
	font-size: 0.875rem;
	line-height: 1.45;
}

/* -- 3 · Unsere Räume: große, abwechselnde Raumdarstellungen -- */
.sarre-vermietung-section--raeume {
	padding-top: clamp(4.5rem, 8vw, 6.5rem);
}
.sarre-vermietung-rooms {
	display: grid;
	gap: clamp(4rem, 8vw, 6.5rem);
}
.sarre-vermietung-room {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.sarre-vermietung-room--reverse .sarre-vermietung-room__media {
	order: 2;
}
.sarre-vermietung-room--no-media {
	grid-template-columns: minmax(0, 760px);
}
/* Bildbereich = eigener .sarre-gallery-grid-Container (Lightbox-Gruppe je
   Raum); Raster der Standardgalerie hier bewusst aufgehoben. */
.sarre-vermietung-page .sarre-vermietung-room__media.sarre-gallery-grid {
	display: block;
}
.sarre-vermietung-room__main {
	position: relative;
}
.sarre-vermietung-room__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.sarre-vermietung-room__main:hover .sarre-vermietung-room__image {
	transform: scale(1.03);
}
.sarre-vermietung-room__size {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	padding: 0.35rem 0.75rem;
	background: var(--sarre-color-white);
	border-radius: 2px;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--sarre-color-anthracite);
	pointer-events: none;
}
.sarre-vermietung-room__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}
.sarre-vermietung-room__thumb-item[hidden] {
	display: none;
}
.sarre-vermietung-room__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.sarre-vermietung-room__thumb-item:hover .sarre-vermietung-room__thumb {
	transform: scale(1.05);
}
.sarre-vermietung-room__thumb-item .sarre-gallery-grid__trigger {
	position: relative;
}
.sarre-vermietung-room__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(36, 36, 36, 0.55);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sarre-color-white);
}
.sarre-vermietung-room__thumb-item .sarre-ai-label {
	display: none;
}
.sarre-vermietung-room__num {
	display: block;
	margin-bottom: 0.6rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	color: var(--sarre-color-primary);
}
.sarre-vermietung-room__name {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	color: var(--sarre-color-anthracite);
}
.sarre-vermietung-room__sub {
	margin: 0.4rem 0 0;
	font-size: 0.9375rem;
	color: var(--sarre-color-body-text);
	opacity: 0.85;
}
.sarre-vermietung-room__text {
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
}
.sarre-vermietung-room__text p {
	margin: 0 0 0.75em;
}
.sarre-vermietung-room__text p:last-child {
	margin-bottom: 0;
}
.sarre-vermietung-room__meta {
	margin: 1.5rem 0 0;
	padding: 0;
}
.sarre-vermietung-room__row {
	padding: 0.85rem 0;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-vermietung-room__row dt {
	margin: 0 0 0.3rem;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sarre-color-accent);
}
.sarre-vermietung-room__row dd {
	margin: 0;
	color: var(--sarre-color-anthracite);
}
.sarre-vermietung-page .sarre-vermietung-room__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-vermietung-page .sarre-vermietung-room__list li {
	position: relative;
	margin: 0;
	padding: 0 0 0 1rem;
	list-style: none;
}
.sarre-vermietung-page .sarre-vermietung-room__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sarre-color-primary);
}

/* -- 4 · Nutzungen (Türkis): Kopf zentriert, Nutzungen als ruhige Reihe -- */
.sarre-vermietung-uses__head {
	max-width: 720px;
	margin: 0 auto 3.5rem;
	text-align: center;
	color: var(--sarre-color-white);
}
.sarre-vermietung-uses__eyebrow {
	color: var(--sarre-color-white);
	opacity: 0.9;
}
.sarre-vermietung-uses__heading {
	color: var(--sarre-color-white);
}
.sarre-vermietung-uses__text {
	margin: var(--sarre-space-sm) 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.95);
}
.sarre-vermietung-uses__text p {
	margin: 0 0 0.75em;
}
.sarre-vermietung-uses__text p:last-child {
	margin-bottom: 0;
}
.sarre-vermietung-page .sarre-vermietung-uses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-vermietung-page .sarre-vermietung-uses__item {
	margin: 0;
	padding: 1.25rem 0 0;
	list-style: none;
	border-top: 2px solid rgba(255, 255, 255, 0.85);
	color: var(--sarre-color-white);
}
.sarre-vermietung-uses__title {
	display: block;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--sarre-color-white);
}
.sarre-vermietung-uses__desc {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

/* -- 5 · Allgemeine Informationen -- */
.sarre-vermietung-info {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.sarre-vermietung-info--text {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.sarre-vermietung-info--text .sarre-akademie-lead {
	margin-left: auto;
	margin-right: auto;
}
.sarre-vermietung-info--facts {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
}
.sarre-vermietung-info--plan {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
.sarre-vermietung-info__col .sarre-vermietung-info__facts {
	margin-top: 2rem;
}
.sarre-vermietung-info__facts .sarre-akademie-facts__row:first-child {
	padding-top: 0;
	border-top: 0;
}
.sarre-vermietung-section--light .sarre-vermietung-info__facts {
	background: var(--sarre-color-white);
}
.sarre-vermietung-page .sarre-vermietung-plan.sarre-gallery-grid {
	display: block;
	margin: 0;
	padding: 1.25rem;
	background: var(--sarre-color-white);
}
.sarre-vermietung-section--white .sarre-vermietung-plan.sarre-gallery-grid {
	background: var(--sarre-color-light);
}
.sarre-vermietung-plan__image {
	display: block;
	width: 100%;
	height: auto;
}
.sarre-vermietung-plan__caption {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	font-style: italic;
}

/* -- 6 · Rund um die Räume (Raster/Lightbox = .sarre-gallery-grid) -- */
.sarre-vermietung-gallery {
	margin: 0;
}

/* -- 7 · Anfrage & Ort -- */
.sarre-vermietung-request {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.sarre-vermietung-request--single {
	grid-template-columns: minmax(0, 760px);
}
.sarre-vermietung-request__label {
	margin: 1.75rem 0 0.75rem;
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
.sarre-vermietung-page .sarre-vermietung-request__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem 1.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
.sarre-vermietung-page .sarre-vermietung-request__list li {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.4rem;
	list-style: none;
	color: var(--sarre-color-anthracite);
}
.sarre-vermietung-page .sarre-vermietung-request__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--sarre-color-primary);
}
.sarre-vermietung-request__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}
.sarre-vermietung-request__mail {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
}
.sarre-vermietung-request__mail a {
	font-weight: 600;
	color: var(--sarre-color-link);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sarre-vermietung-request__mail a:hover {
	text-decoration: underline;
}
.sarre-vermietung-venue {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--sarre-color-white);
}
.sarre-vermietung-section--white .sarre-vermietung-venue {
	background: var(--sarre-color-light);
}
.sarre-vermietung-venue .sarre-eyebrow {
	margin-bottom: 0.75rem;
}
/* Ortsblock in der schmalen Spalte immer gestapelt (die Produktions-Regel
   ab 701 px legt Name/Karte nebeneinander – hier nur innerhalb dieser Seite
   aufgehoben, die Produktionsseiten bleiben unverändert). */
.sarre-vermietung-venue .sarre-venue-block {
	display: block;
	padding: 0;
}
.sarre-vermietung-venue .sarre-venue-block__name {
	margin-bottom: 0.35rem;
}
.sarre-vermietung-venue .sarre-venue-block__address {
	margin-bottom: var(--sarre-space-md);
}
.sarre-vermietung-venue .sarre-venue-block__map {
	height: auto;
	min-height: 200px;
	margin-bottom: var(--sarre-space-md);
}
.sarre-vermietung-venue .sarre-venue-block__route-button {
	color: var(--sarre-color-white);
}

/* -- Responsive -- */
@media (max-width: 1023px) {
	.sarre-vermietung-glance__list,
	.sarre-vermietung-glance__list--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sarre-vermietung-glance__item:nth-child(odd) {
		border-left: 0;
	}
	.sarre-vermietung-glance__item:nth-child(n+3) {
		border-top-width: 1px;
		border-top-color: rgba(36, 36, 36, 0.08);
	}
}
@media (max-width: 900px) {
	.sarre-vermietung-room,
	.sarre-vermietung-info--facts,
	.sarre-vermietung-info--plan,
	.sarre-vermietung-request {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-vermietung-room--reverse .sarre-vermietung-room__media {
		order: 0;
	}
	.sarre-vermietung-room {
		gap: 1.5rem;
	}
}
@media (max-width: 700px) {
	.sarre-vermietung-glance {
		padding: 0 var(--sarre-space-sm);
	}
	.sarre-vermietung-glance__list {
		margin-top: -2.5rem;
	}
	.sarre-vermietung-glance__item {
		padding: 1rem 0.9rem;
	}
	.sarre-vermietung-glance__value {
		font-size: 1.375rem;
	}
	.sarre-vermietung-hero .sarre-akademie-hero__content {
		padding-bottom: 5rem;
	}
	.sarre-vermietung-head,
	.sarre-vermietung-uses__head {
		margin-bottom: 2.25rem;
	}
	.sarre-vermietung-room__thumbs {
		gap: 6px;
		margin-top: 6px;
	}
	.sarre-vermietung-page .sarre-vermietung-request__list {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-vermietung-page .sarre-vermietung-uses {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
}

/* ==========================================================================
   Paket Kontakt (2026-10-06)
   [sarre_kontakt_page] (/kontakt/), sarre-core/includes/kontakt.php.
   Abgegrenzter Block: ausschließlich `sarre-kontakt-*` plus Scoping
   wiederverwendeter Klassen innerhalb von `.sarre-kontakt-page`
   (.sarre-akademie-section/-heading/-lead, .sarre-support-media,
   .sarre-vermietung-venue/.sarre-venue-block, .sarre-btn) sowie des
   eingebetteten Fluent-Forms-Formulars innerhalb von `.sarre-kontakt-form`.
   Keine neue Hex-Farbe, keine Webfonts, bestehende Regeln unverändert.
   ========================================================================== */

.sarre-kontakt-page {
	color: var(--sarre-color-body-text);
}

/* Pinke Buttons: Text immer weiß (gleiche eng gescopte Lösung wie Akademie/Vermietung). */
.sarre-kontakt-page .sarre-btn--primary,
.sarre-kontakt-page .sarre-btn--primary:hover,
.sarre-kontakt-page .sarre-btn--primary:focus-visible {
	color: var(--sarre-color-white) !important;
}

/* -- Abschnitts-Töne (Rahmen = .sarre-akademie-section) -- */
.sarre-kontakt-section {
	scroll-margin-top: 80px;
}
.sarre-kontakt-section--light {
	background: var(--sarre-color-light);
}

/* -- 1 · Einstieg (Muster Spenden-Einstieg) -- */
.sarre-kontakt-intro {
	display: grid;
	grid-template-columns: 6fr 5fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
.sarre-kontakt-intro--no-image {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}
.sarre-kontakt-intro__content {
	min-width: 0;
}
.sarre-kontakt-intro__heading {
	margin: 0;
	font-size: clamp(2.25rem, 4.4vw, 3.25rem);
	color: var(--sarre-color-anthracite);
}
.sarre-kontakt-intro .sarre-kontakt-lead {
	max-width: 34em;
	font-size: 1.125rem;
}
.sarre-kontakt-intro .sarre-support-media::before {
	left: auto;
	right: -6%;
}
.sarre-kontakt-quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sarre-space-sm) var(--sarre-space-lg);
	margin: var(--sarre-space-md) 0 var(--sarre-space-md);
	padding: var(--sarre-space-md) 0 0;
	border-top: 1px solid rgba(36, 36, 36, 0.1);
	list-style: none;
}
.sarre-kontakt-quick li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-kontakt-quick__link {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--sarre-color-anthracite);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sarre-kontakt-quick__link:hover,
.sarre-kontakt-quick__link:focus-visible {
	color: var(--sarre-color-primary);
}
.sarre-kontakt-quick__icon {
	flex: none;
	color: var(--sarre-color-primary);
}
.sarre-kontakt-quick__label {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sarre-color-body-text);
}

/* Abstand Trennlinie → E-Mail/Telefon: Divis Listenregel (#left-area ul,
   .entry-content ul { padding: 0 0 23px 1em }) überschreibt sonst das
   padding-top der Liste. Nur dieser eine Wert. */
.sarre-kontakt-page .sarre-kontakt-quick {
	padding-top: 22px !important;
}

/* -- 2 · Anliegen + Formular -- */
.sarre-kontakt-msg {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.sarre-kontakt-topics {
	margin: var(--sarre-space-lg) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-kontakt-topics li {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-kontakt-topics__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sarre-space-sm);
	padding: 0.8rem 0;
	color: var(--sarre-color-anthracite);
	text-decoration: none;
}
.sarre-kontakt-topics__link::after {
	content: '\2192';
	flex: none;
	color: var(--sarre-color-primary);
	transition: transform 0.2s ease;
}
.sarre-kontakt-topics__link:hover::after,
.sarre-kontakt-topics__link:focus-visible::after {
	transform: translateX(0.25em);
}
.sarre-kontakt-topics__title {
	display: block;
	font-weight: 500;
	font-size: 0.98rem;
	line-height: 1.4;
}
.sarre-kontakt-topics__hint {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--sarre-color-body-text);
}
.sarre-kontakt-topics__link.is-active .sarre-kontakt-topics__title {
	color: var(--sarre-color-accent);
	font-weight: 600;
}
.sarre-kontakt-topics__link.is-active::after {
	content: '\2713';
	color: var(--sarre-color-accent);
	transform: none;
}
.sarre-kontakt-msg__note {
	margin: var(--sarre-space-lg) 0 0;
	padding-left: var(--sarre-space-sm);
	border-left: 3px solid var(--sarre-color-primary);
	font-size: 0.9rem;
	line-height: 1.55;
}
.sarre-kontakt-msg__note .sarre-link-editorial {
	font-size: 0.9rem;
}

.sarre-kontakt-form {
	min-width: 0;
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	background: var(--sarre-color-white);
	scroll-margin-top: 100px;
}
.sarre-kontakt-form__heading {
	margin: 0 0 var(--sarre-space-md);
	font-size: 1.5rem;
	color: var(--sarre-color-anthracite);
}
.sarre-kontakt-form__notice {
	margin: 0;
}
.sarre-kontakt-form__notice a {
	font-weight: 600;
	color: var(--sarre-color-link);
	overflow-wrap: anywhere;
}

/* Fluent Forms – nur innerhalb des Kontaktformulars */
.sarre-kontakt-form .ff-el-input--label label {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
.sarre-kontakt-form .ff-el-form-control {
	font-family: var(--sarre-font-body);
	border-radius: 2px;
}
.sarre-kontakt-form .ff-el-form-control:focus {
	border-color: var(--sarre-color-primary);
	box-shadow: 0 0 0 3px rgba(0, 182, 200, 0.18);
}
.sarre-kontakt-form select[name="anliegen"] {
	border: 2px solid var(--sarre-color-primary);
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
.sarre-kontakt-form .ff-btn-submit {
	background-color: var(--sarre-color-accent) !important;
	border-color: var(--sarre-color-accent) !important;
	color: var(--sarre-color-white) !important;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	border-radius: 2px !important;
}
.sarre-kontakt-form .ff-btn-submit:hover,
.sarre-kontakt-form .ff-btn-submit:focus-visible {
	filter: brightness(0.92);
}
.sarre-kontakt-form .ff-message-success {
	border: 0;
	border-left: 3px solid var(--sarre-color-primary);
	background: rgba(0, 182, 200, 0.14);
	box-shadow: none;
	color: var(--sarre-color-anthracite);
}
/* Raumvermietung: zusammenhängende Türkis-Fläche über alle Zusatzfelder */
.sarre-kontakt-form .ff-el-group.sarre-kontakt-miet {
	margin: 0;
	padding: 0.6rem 1.25rem;
	background: rgba(0, 182, 200, 0.14);
	border-left: 3px solid var(--sarre-color-primary);
}
.sarre-kontakt-form .ff-el-group.sarre-kontakt-miet--first {
	margin-top: 0.25rem;
	padding-top: 1.25rem;
}
.sarre-kontakt-form .ff-el-group.sarre-kontakt-miet--last {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
}
.sarre-kontakt-form .sarre-kontakt-miet__title {
	margin: 0;
	color: var(--sarre-color-anthracite);
}
.sarre-kontakt-form .ff-el-group.sarre-kontakt-miet .ff-el-form-control {
	background-color: var(--sarre-color-white);
}
.sarre-kontakt-form .sarre-kontakt-privacy p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--sarre-color-body-text);
}
.sarre-kontakt-form .sarre-kontakt-privacy a {
	font-weight: 600;
	color: var(--sarre-color-link);
	text-decoration: none;
}
.sarre-kontakt-form .sarre-kontakt-privacy a:hover {
	text-decoration: underline;
}

/* -- 3 · So erreichen Sie uns -- */
.sarre-kontakt-reach {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.sarre-kontakt-reach--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
}
.sarre-kontakt-reach__list {
	display: grid;
	gap: var(--sarre-space-md);
	margin: var(--sarre-space-lg) 0 0;
}
.sarre-kontakt-reach__row {
	padding-top: 1.1rem;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-kontakt-reach__row dt {
	margin: 0 0 0.35rem;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sarre-color-accent);
}
.sarre-kontakt-reach__row dd {
	margin: 0;
	line-height: 1.55;
	color: var(--sarre-color-anthracite);
}
.sarre-kontakt-reach__row dd a {
	color: var(--sarre-color-anthracite);
	font-weight: 500;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sarre-kontakt-reach__row dd a:hover,
.sarre-kontakt-reach__row dd a:focus-visible {
	color: var(--sarre-color-primary);
}
.sarre-kontakt-social {
	display: flex;
	gap: 10px;
	margin-top: 0.25rem;
}
.sarre-kontakt-reach__row dd .sarre-kontakt-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(36, 36, 36, 0.18);
	border-radius: 50%;
	color: var(--sarre-color-anthracite);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sarre-kontakt-reach__row dd .sarre-kontakt-social__icon:hover,
.sarre-kontakt-reach__row dd .sarre-kontakt-social__icon:focus-visible {
	background: var(--sarre-color-primary);
	border-color: var(--sarre-color-primary);
	color: var(--sarre-color-white);
}
/* Ortsblock (aus vermietung.php) steht hier in einem weißen Abschnitt. */
.sarre-kontakt-page .sarre-vermietung-venue {
	background: var(--sarre-color-light);
}

/* -- Responsive -- */
@media (max-width: 900px) {
	.sarre-kontakt-intro,
	.sarre-kontakt-msg,
	.sarre-kontakt-reach {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-kontakt-intro .sarre-support-media {
		order: -1;
	}
	.sarre-kontakt-intro .sarre-support-media::before {
		right: calc(var(--sarre-space-md) * -0.75);
		width: 30%;
	}
}
@media (max-width: 700px) {
	.sarre-kontakt-section .sarre-akademie-section__inner {
		padding: 0 var(--sarre-space-md);
	}
	.sarre-kontakt-quick {
		flex-direction: column;
	}
	.sarre-kontakt-form {
		margin: 0 calc(var(--sarre-space-md) * -1);
		padding: 1.5rem var(--sarre-space-md);
	}
	.sarre-kontakt-form .ff-el-group.sarre-kontakt-miet {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}


/* ==========================================================================
   Paket Förderverein + Patenschaften (2026-10-06)
   [sarre_foerderverein_page] (/foerderverein/), sarre-core/includes/foerderverein.php.
   Grundlage: freigegebenes Mockup `Claude outputs/foerderverein-mockup.html`.
   Abgegrenzter Block: ausschließlich `sarre-fv-*` plus Scoping
   wiederverwendeter Klassen innerhalb von `.sarre-fv-page`
   (.sarre-akademie-hero/-section/-heading/-lead, .sarre-spenden-bank,
   .sarre-spenden-copy, .sarre-btn, .sarre-eyebrow) sowie des eingebetteten
   Fluent-Forms-Formulars innerhalb von `.sarre-fv-form`.
   Keine neue Hex-Farbe, keine Webfonts, keine Schatten, Ecken 2 px,
   bestehende Regeln unverändert. Seitentitel/Container-Abstand über die
   bestehende Body-Klasse .sarre-shortcode-page (gesetzt in foerderverein.php).
   ========================================================================== */

.sarre-fv-page {
	color: var(--sarre-color-body-text);
}
.sarre-fv-page p,
.sarre-fv-page h2,
.sarre-fv-page h3 {
	padding-bottom: 0;
}

/* Divis Listenregel (#left-area ul, .entry-content ul { padding … }) und
   Aufzählungszeichen für alle eigenen Listen neutralisieren. */
.sarre-fv-page .sarre-fv-ways__list,
.sarre-fv-page .sarre-fv-points,
.sarre-fv-page .sarre-fv-board__list,
.sarre-fv-page .sarre-fv-fee__list,
.sarre-fv-page .sarre-fv-steps,
.sarre-fv-page .sarre-fv-aside__docs,
.sarre-fv-page .sarre-fv-pate-info__list,
.sarre-fv-page .sarre-fv-pate-info__steps,
.sarre-fv-page .sarre-fv-docs {
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
}
.sarre-fv-page .sarre-fv-ways__list > li,
.sarre-fv-page .sarre-fv-points > li,
.sarre-fv-page .sarre-fv-board__list > li,
.sarre-fv-page .sarre-fv-fee__list > li,
.sarre-fv-page .sarre-fv-steps > li,
.sarre-fv-page .sarre-fv-aside__docs > li,
.sarre-fv-page .sarre-fv-pate-info__list > li,
.sarre-fv-page .sarre-fv-pate-info__steps > li,
.sarre-fv-page .sarre-fv-docs > li {
	margin: 0;
	list-style: none;
}

/* Pinke Buttons: Text immer weiß (gleiche eng gescopte Lösung wie Akademie/Vermietung/Kontakt). */
.sarre-fv-page .sarre-btn--primary,
.sarre-fv-page .sarre-btn--primary:hover,
.sarre-fv-page .sarre-btn--primary:focus-visible {
	color: var(--sarre-color-white) !important;
}

/* -- Abschnitts-Töne (Rahmen = .sarre-akademie-section) -- */
.sarre-fv-section,
.sarre-fv-pate {
	scroll-margin-top: 80px;
}
.sarre-fv-section--light {
	background: var(--sarre-color-light);
}
.sarre-fv-head {
	max-width: 760px;
	margin: 0 0 3rem;
}

/* -- 1 · Hero (Akademie-Hero) mit Platz für die überlappende Leiste -- */
.sarre-fv-hero .sarre-akademie-hero__content {
	padding-bottom: 8.5rem;
}
.sarre-fv-hero .sarre-akademie-hero__image {
	object-position: center 40%;
}

/* -- 2 · Drei Wege (überlappend, Muster „Auf einen Blick“ der Vermietung) -- */
.sarre-fv-ways {
	position: relative;
	z-index: 3;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 var(--sarre-space-lg);
	box-sizing: border-box;
}
.sarre-fv-page .sarre-fv-ways__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: var(--sarre-content-max-width);
	margin: -5.5rem auto 0;
	background: var(--sarre-color-white);
	border-top: 3px solid var(--sarre-color-primary);
	box-shadow: 0 0 0 1px rgba(36, 36, 36, 0.06);
}
.sarre-fv-page .sarre-fv-ways__list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sarre-fv-ways__item {
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.75rem 1.6rem;
}
.sarre-fv-ways__item + .sarre-fv-ways__item {
	border-left: 1px solid rgba(36, 36, 36, 0.1);
}
.sarre-fv-ways__org {
	display: block;
	margin: 0 0 0.6rem;
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sarre-color-body-text);
	opacity: 0.85;
}
.sarre-fv-ways__title {
	margin: 0 0 0.5rem;
	font-size: 1.45rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-ways__text {
	flex: 1;
	margin: 0 0 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* -- 3 · Der Förderverein -- */
.sarre-fv-verein {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.sarre-fv-page .sarre-fv-points {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
}
.sarre-fv-page .sarre-fv-points__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-fv-points__n {
	min-width: 2.2rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--sarre-color-primary);
}
.sarre-fv-points__title {
	margin: 0 0 0.3rem;
	font-size: 1.2rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-points__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
}
.sarre-fv-facts {
	padding: 2rem;
	background: var(--sarre-color-light);
}
.sarre-fv-facts__title {
	margin: 0 0 1.25rem;
	font-size: 1.35rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-dl {
	display: grid;
	gap: 1.1rem;
	margin: 0;
}
.sarre-fv-dl__row {
	padding-top: 0.9rem;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-fv-dl__row dt {
	margin: 0 0 0.25rem;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sarre-color-accent);
}
.sarre-fv-dl__row dd {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--sarre-color-anthracite);
	overflow-wrap: anywhere;
}
.sarre-fv-dl__row dd a {
	color: var(--sarre-color-anthracite);
	font-weight: 500;
	text-decoration: none;
}
.sarre-fv-dl__row dd a:hover,
.sarre-fv-dl__row dd a:focus-visible {
	color: var(--sarre-color-primary);
}

/* Vorstand – funktioniert mit und ohne Fotos */
.sarre-fv-board {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}
.sarre-fv-board__title {
	margin: 0 0 1.25rem;
	font-size: 1.35rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-page .sarre-fv-board__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.sarre-fv-page .sarre-fv-board__person {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-top: 1rem;
	border-top: 3px solid var(--sarre-color-primary);
}
.sarre-fv-board__media {
	position: relative;
	margin: 0 0 0.75rem;
}
.sarre-fv-board__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 2px;
}
.sarre-fv-board__name {
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-board__role {
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--sarre-color-body-text);
}

/* Gruppenfoto Vorstand (optional, nur mit Bild ausgegeben) */
.sarre-fv-board-photo {
	position: relative;
	margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}
.sarre-fv-board-photo__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 2px;
}
.sarre-fv-board-photo__caption {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sarre-color-body-text);
}
.sarre-fv-board-photo + .sarre-fv-board {
	margin-top: 2.5rem;
}

/* -- 4 · Mitglied werden -- */
.sarre-fv-member {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}
.sarre-fv-fee {
	padding: 2.25rem;
	background: var(--sarre-color-white);
	border-top: 3px solid var(--sarre-color-accent);
}
.sarre-fv-fee__amount {
	margin: 0.25rem 0 0.35rem;
	font-size: clamp(3rem, 6vw, 4.25rem);
	line-height: 1;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-fee__unit {
	margin-left: 0.4rem;
	font-family: var(--sarre-font-body);
	font-size: 1.1rem;
	color: var(--sarre-color-body-text);
}
.sarre-fv-fee__sub {
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
}
.sarre-fv-page .sarre-fv-fee__list {
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-fv-page .sarre-fv-fee__list > li {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-page .sarre-fv-fee__list > li::before {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 0.55rem;
	background: var(--sarre-color-primary);
}
.sarre-fv-page .sarre-fv-steps {
	margin: 2rem 0 2.25rem;
	counter-reset: sarre-fv-step;
}
.sarre-fv-page .sarre-fv-steps__item {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 0.25rem 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
	counter-increment: sarre-fv-step;
}
.sarre-fv-page .sarre-fv-steps__item::before {
	content: counter(sarre-fv-step);
	grid-row: span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 2px solid var(--sarre-color-primary);
	border-radius: 50%;
	font-weight: 600;
	color: var(--sarre-color-primary);
}
.sarre-fv-steps__title {
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-steps__text {
	font-size: 0.92rem;
	line-height: 1.55;
}
.sarre-fv-hint {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	background: rgba(0, 182, 200, 0.14);
	border-left: 3px solid var(--sarre-color-primary);
	color: var(--sarre-color-anthracite);
	font-size: 0.95rem;
	line-height: 1.55;
}
.sarre-fv-hint__title {
	margin: 0 0 0.2rem;
	font-weight: 600;
}
.sarre-fv-hint p {
	margin: 0;
}

/* -- 5 · Mitgliedsantrag -- */
.sarre-fv-apply {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
.sarre-fv-form {
	min-width: 0;
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	background: var(--sarre-color-white);
	border: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-fv-aside {
	position: sticky;
	top: 100px;
}
.sarre-fv-aside__box {
	padding: 1.75rem;
	background: var(--sarre-color-anthracite);
	color: var(--sarre-color-white);
}
.sarre-fv-aside__box .sarre-eyebrow {
	color: var(--sarre-color-white);
	opacity: 0.7;
}
.sarre-fv-aside__title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
	color: var(--sarre-color-white);
}
.sarre-fv-page .sarre-fv-aside__docs {
	margin-bottom: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.sarre-fv-page .sarre-fv-aside__docs > li {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.sarre-fv-aside__docs a {
	display: block;
	font-weight: 600;
	color: var(--sarre-color-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sarre-fv-aside__docs span {
	display: block;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.7);
}
.sarre-fv-aside__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}
.sarre-fv-aside__note {
	margin: 1rem 0 0;
	padding: 1rem 1.1rem;
	border: 1px solid rgba(36, 36, 36, 0.12);
	font-size: 0.875rem;
	line-height: 1.55;
}
.sarre-fv-aside__note a,
.sarre-fv-offline a:not(.sarre-btn),
.sarre-fv-diff a,
.sarre-fv-doc__missing a {
	font-weight: 600;
	color: var(--sarre-color-link);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sarre-fv-offline {
	max-width: 760px;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--sarre-color-light);
	border-top: 3px solid var(--sarre-color-primary);
}
.sarre-fv-offline__title {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-offline > p {
	margin: 0 0 1.25rem;
}
.sarre-fv-offline__meta {
	margin-left: 1rem;
	font-size: 0.8125rem;
	color: var(--sarre-color-body-text);
}
.sarre-fv-offline__contact {
	margin-top: 1.5rem;
}
.sarre-fv-offline__admin {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--sarre-color-accent);
	background: var(--sarre-color-white);
	font-size: 0.8125rem;
}

/* Fluent Forms – nur innerhalb des Mitgliedsantrags */
.sarre-fv-form .ff-el-input--label label {
	font-family: var(--sarre-font-body);
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-form .ff-el-form-control {
	font-family: var(--sarre-font-body);
	border-radius: 2px;
}
.sarre-fv-form .ff-el-form-control:focus {
	border-color: var(--sarre-color-primary);
	box-shadow: 0 0 0 3px rgba(0, 182, 200, 0.18);
}
.sarre-fv-form input[name="iban"],
.sarre-fv-form input[name="bic"] {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sarre-fv-form .sarre-fv-legend-wrap {
	margin: 1.5rem 0 1.25rem;
}
.sarre-fv-form .sarre-fv-legend-wrap:first-child {
	margin-top: 0;
}
.sarre-fv-form .sarre-fv-legend {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0 0 0.75rem;
	border-bottom: 2px solid var(--sarre-color-anthracite);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.3rem;
	line-height: 1.25;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-form .sarre-fv-legend__num {
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--sarre-color-primary);
	color: var(--sarre-color-white);
	font-family: var(--sarre-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.9rem;
	text-align: center;
}
.sarre-fv-form .sarre-fv-beitrag p,
.sarre-fv-form .sarre-fv-satzung p,
.sarre-fv-form .sarre-fv-datenschutz p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--sarre-color-body-text);
}
.sarre-fv-form .sarre-fv-beitrag a,
.sarre-fv-form .sarre-fv-satzung a,
.sarre-fv-form .sarre-fv-datenschutz a,
.sarre-fv-form .sarre-fv-andere a {
	font-weight: 600;
	color: var(--sarre-color-link);
	text-decoration: none;
}
.sarre-fv-form .sarre-fv-beitrag a:hover,
.sarre-fv-form .sarre-fv-satzung a:hover,
.sarre-fv-form .sarre-fv-datenschutz a:hover,
.sarre-fv-form .sarre-fv-andere a:hover {
	text-decoration: underline;
}
.sarre-fv-form .sarre-fv-mandate {
	padding: 1.25rem 1.35rem;
	background: var(--sarre-color-light);
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-form .sarre-fv-mandate p {
	margin: 0.6rem 0 0;
}
.sarre-fv-form .sarre-fv-mandate__meta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.2rem 1rem;
	margin: 0 0 0.4rem;
}
.sarre-fv-form .sarre-fv-mandate__meta dt {
	font-weight: 600;
}
.sarre-fv-form .sarre-fv-mandate__meta dd {
	margin: 0;
	overflow-wrap: anywhere;
}
.sarre-fv-form .sarre-fv-andere {
	padding: 1rem 1.25rem;
	background: rgba(233, 30, 99, 0.06);
	border-left: 3px solid var(--sarre-color-accent);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-form .sarre-fv-andere p {
	margin: 0;
}
.sarre-fv-form .sarre-fv-choice .ff-el-form-check {
	margin-bottom: 0.5rem;
}
.sarre-fv-form .sarre-fv-check .ff-el-form-check-label {
	color: var(--sarre-color-anthracite);
	line-height: 1.5;
}
.sarre-fv-form .ff-el-form-check-input {
	accent-color: var(--sarre-color-accent);
}
.sarre-fv-form .ff-btn-submit {
	background-color: var(--sarre-color-accent) !important;
	border-color: var(--sarre-color-accent) !important;
	color: var(--sarre-color-white) !important;
	font-family: var(--sarre-font-body);
	font-weight: 600;
	border-radius: 2px !important;
}
.sarre-fv-form .ff-btn-submit:hover,
.sarre-fv-form .ff-btn-submit:focus-visible {
	filter: brightness(0.92);
}
.sarre-fv-form .ff-message-success {
	border: 0;
	border-left: 3px solid var(--sarre-color-primary);
	background: rgba(0, 182, 200, 0.14);
	box-shadow: none;
	color: var(--sarre-color-anthracite);
}

/* -- 6 · Patenschaften: Bild/Türkis-Split (volle Breite) -- */
.sarre-fv-pate-wrap {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--sarre-color-primary);
}
.sarre-fv-pate {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 560px;
}
.sarre-fv-pate--no-image {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
}
.sarre-fv-pate__media {
	position: relative;
	margin: 0;
	min-height: 320px;
}
.sarre-fv-pate__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sarre-fv-pate__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.75rem, 5vw, 5rem);
	color: var(--sarre-color-white);
}
.sarre-fv-pate__text .sarre-eyebrow {
	color: var(--sarre-color-white);
	opacity: 0.9;
}
.sarre-fv-pate__heading {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.08;
	color: var(--sarre-color-white);
}
.sarre-fv-pate__lead {
	max-width: 52ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.95);
}
.sarre-fv-pate__lead p {
	margin: 0 0 0.75em;
}
.sarre-fv-pate__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.5rem;
}
.sarre-fv-page .sarre-fv-btn--white {
	background: var(--sarre-color-white);
	border-color: var(--sarre-color-white);
	color: var(--sarre-color-anthracite) !important;
}
.sarre-fv-page .sarre-fv-btn--white:hover,
.sarre-fv-page .sarre-fv-btn--white:focus-visible {
	filter: brightness(0.94);
}
.sarre-fv-page .sarre-fv-btn--outline {
	background: transparent;
	border-color: var(--sarre-color-white);
	color: var(--sarre-color-white) !important;
}
.sarre-fv-page .sarre-fv-btn--outline:hover,
.sarre-fv-page .sarre-fv-btn--outline:focus-visible {
	background: var(--sarre-color-white);
	color: var(--sarre-color-anthracite) !important;
}
.sarre-fv-pate-info {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}
.sarre-fv-pate-info__title {
	margin: 0 0 1rem;
	padding-top: 1rem;
	border-top: 3px solid var(--sarre-color-primary);
	font-size: 1.4rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-page .sarre-fv-pate-info__list > li {
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(36, 36, 36, 0.1);
	font-size: 0.95rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-page .sarre-fv-pate-info__steps {
	counter-reset: sarre-fv-pate;
}
.sarre-fv-page .sarre-fv-pate-info__steps > li {
	display: flex;
	gap: 0.75rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(36, 36, 36, 0.1);
	font-size: 0.95rem;
	color: var(--sarre-color-anthracite);
	counter-increment: sarre-fv-pate;
}
.sarre-fv-page .sarre-fv-pate-info__steps > li::before {
	content: counter(sarre-fv-pate);
	min-width: 1rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--sarre-color-accent);
}
.sarre-fv-pate-info__note {
	margin: 0.9rem 0 0;
	font-size: 0.92rem;
	line-height: 1.55;
}
.sarre-fv-pate-info__cta {
	margin: 1.25rem 0 0;
}
.sarre-fv-org-note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem 1.25rem;
	align-items: start;
	margin: 3rem 0 0;
	padding: 1.35rem 1.5rem;
	background: var(--sarre-color-light);
	color: var(--sarre-color-anthracite);
	font-size: 0.93rem;
	line-height: 1.55;
}
.sarre-fv-org-note p {
	margin: 0;
}
.sarre-fv-org-note__icon {
	color: var(--sarre-color-primary);
}

/* -- 7 · Spenden an den Förderverein + Fragen -- */
.sarre-fv-give {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.sarre-fv-bank {
	margin-top: 2rem;
	padding: 2rem;
	background: var(--sarre-color-white);
	border-top: 3px solid var(--sarre-color-primary);
}
.sarre-fv-bank__title {
	margin: 0 0 1.1rem;
	font-size: 1.35rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-diff {
	margin: 1.5rem 0 0;
	padding: 1rem 1.2rem;
	background: var(--sarre-color-white);
	border-left: 3px solid var(--sarre-color-accent);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-ask .sarre-fv-ask__title {
	margin: 0 0 0.75rem;
	font-size: 1.45rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-ask > p {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
}
.sarre-fv-ask .sarre-fv-ask__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 0;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
	color: var(--sarre-color-primary);
}
.sarre-fv-ask__mail {
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--sarre-color-anthracite);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sarre-fv-ask__mail:hover,
.sarre-fv-ask__mail:focus-visible {
	color: var(--sarre-color-primary);
}
.sarre-fv-ask .sarre-fv-ask__address {
	font-size: 0.92rem;
	color: var(--sarre-color-anthracite);
}

/* -- 8 · Dokumente -- */
.sarre-fv-page .sarre-fv-docs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.sarre-fv-page .sarre-fv-doc {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.5rem 1.35rem;
	border: 1px solid rgba(36, 36, 36, 0.12);
	border-top: 3px solid var(--sarre-color-primary);
	border-radius: 2px;
}
.sarre-fv-doc__icon {
	margin-bottom: 0.9rem;
	color: var(--sarre-color-primary);
}
.sarre-fv-doc__title {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--sarre-color-anthracite);
}
.sarre-fv-doc__meta {
	flex: 1;
	margin: 0 0 1.1rem;
	font-size: 0.875rem;
}
.sarre-fv-doc__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	padding: 0.6rem 1rem;
	border: 2px solid var(--sarre-color-accent);
	border-radius: 2px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--sarre-color-accent);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.sarre-fv-doc__link::after {
	content: '\2193';
}
.sarre-fv-doc__link:hover,
.sarre-fv-doc__link:focus-visible {
	background: var(--sarre-color-accent);
	color: var(--sarre-color-white);
}
.sarre-fv-doc__size {
	font-weight: 400;
	font-size: 0.8125rem;
	opacity: 0.85;
}
.sarre-fv-doc__missing {
	margin: 0;
	font-size: 0.875rem;
}

/* -- Responsive -- */
@media (max-width: 1000px) {
	.sarre-fv-apply {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-fv-aside {
		position: static;
	}
}
@media (max-width: 900px) {
	.sarre-fv-verein,
	.sarre-fv-member,
	.sarre-fv-give {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-fv-page .sarre-fv-ways__list,
	.sarre-fv-page .sarre-fv-ways__list--2 {
		grid-template-columns: minmax(0, 1fr);
		margin-top: -3rem;
	}
	.sarre-fv-ways__item + .sarre-fv-ways__item {
		border-left: 0;
		border-top: 1px solid rgba(36, 36, 36, 0.1);
	}
	.sarre-fv-pate,
	.sarre-fv-pate-info,
	.sarre-fv-page .sarre-fv-docs {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-fv-pate {
		min-height: 0;
	}
	.sarre-fv-pate__media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
	.sarre-fv-pate-info {
		gap: 2.25rem;
	}
}
@media (max-width: 700px) {
	.sarre-fv-ways {
		padding: 0 var(--sarre-space-md);
	}
	.sarre-fv-hero .sarre-akademie-hero__content {
		padding-bottom: 5rem;
	}
	.sarre-fv-ways__item {
		padding: 1.25rem 1.1rem;
	}
	.sarre-fv-section .sarre-akademie-section__inner {
		padding: 0 var(--sarre-space-md);
	}
	.sarre-fv-head {
		margin-bottom: 2rem;
	}
	.sarre-fv-facts,
	.sarre-fv-fee,
	.sarre-fv-bank {
		padding: 1.4rem;
	}
	.sarre-fv-page .sarre-fv-board__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}
	.sarre-fv-page .sarre-fv-board__person--image {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		column-gap: 1rem;
		align-content: start;
	}
	.sarre-fv-board__person--image .sarre-fv-board__media {
		grid-row: span 2;
		margin: 0;
	}
	.sarre-fv-form {
		margin: 0 calc(var(--sarre-space-md) * -1);
		padding: 1.5rem var(--sarre-space-md);
		border-left: 0;
		border-right: 0;
	}
	.sarre-fv-form .sarre-fv-mandate__meta {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.sarre-fv-form .sarre-fv-mandate__meta dd {
		margin-bottom: 0.4rem;
	}
	.sarre-fv-offline__meta {
		display: block;
		margin: 0.5rem 0 0;
	}
	.sarre-fv-pate__ctas .sarre-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
	.sarre-fv-org-note {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-fv-board-photo__image {
		aspect-ratio: 3 / 2;
	}
	.sarre-fv-board-photo + .sarre-fv-board {
		margin-top: 2rem;
	}
}

/* ==========================================================================
   Paket Förderer & Partner (2026-10-06)
   [sarre_foerderer_partner_page] (/foerderer-partner/), sarre-core/includes/foerderer-partner.php.
   Grundlage: freigegebenes Mockup `Claude outputs/partner-foerderer-mockup.html`.
   Abgegrenzter Block: ausschließlich `sarre-fp-*` plus Scoping
   wiederverwendeter Klassen innerhalb von `.sarre-fp-page`
   (.sarre-akademie-section/-heading/-lead, .sarre-btn, .sarre-eyebrow,
   .sarre-link-editorial). Keine neue Hex-Farbe, keine Webfonts, keine
   Schatten, Ecken 2 px, bestehende Regeln unverändert. Seitentitel/
   Container-Abstand über die bestehende Body-Klasse .sarre-shortcode-page
   (gesetzt in foerderer-partner.php).
   ========================================================================== */

.sarre-fp-page {
	color: var(--sarre-color-body-text);
	line-height: 1.6;
}
.sarre-fp-page p,
.sarre-fp-page h1,
.sarre-fp-page h2,
.sarre-fp-page h3,
.sarre-fp-page h4 {
	padding-bottom: 0;
}
.sarre-fp-page .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Divis Listenregel (#left-area ul, .entry-content ul { padding … }) neutralisieren. */
.sarre-fp-page .sarre-fp-why__list,
.sarre-fp-page .sarre-fp-grid {
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
}
.sarre-fp-page .sarre-fp-why__list > li,
.sarre-fp-page .sarre-fp-grid > li {
	margin: 0;
	list-style: none;
}

/* Pinke Buttons: Text immer weiß (gleiche eng gescopte Lösung wie Akademie/Vermietung/Kontakt/Förderverein). */
.sarre-fp-page .sarre-btn--primary,
.sarre-fp-page .sarre-btn--primary:hover,
.sarre-fp-page .sarre-btn--primary:focus-visible {
	color: var(--sarre-color-white) !important;
}

.sarre-fp-section,
.sarre-fp-cta {
	scroll-margin-top: 80px;
}
.sarre-fp-section--light {
	background: var(--sarre-color-light);
}

/* -- 1 · Kompakter Hero (Text links, Bild rechts, volle Breite) -- */
.sarre-fp-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: clamp(420px, 38vw, 540px);
	background: var(--sarre-color-white);
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
	box-sizing: border-box;
}
.sarre-fp-hero--no-image {
	grid-template-columns: 1fr;
	min-height: 0;
}
.sarre-fp-hero__txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem) max(var(--sarre-space-lg), calc((100vw - var(--sarre-content-max-width)) / 2 + var(--sarre-space-lg)));
	box-sizing: border-box;
}
.sarre-fp-hero--no-image .sarre-fp-hero__txt {
	padding-right: var(--sarre-space-lg);
}
.sarre-fp-hero__heading {
	margin: 0 0 var(--sarre-space-md);
	font-size: clamp(2.35rem, 5vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--sarre-color-anthracite);
}
.sarre-fp-hero__text {
	max-width: 46ch;
	margin: 0;
	font-size: 1.09rem;
	line-height: 1.6;
}
.sarre-fp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: 2rem;
}
.sarre-fp-hero__fig {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--sarre-color-anthracite);
}
.sarre-fp-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center 35%;
}
.sarre-fp-hero__fig::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--sarre-color-primary);
}

/* -- 2 · Warum Förderung zählt -- */
.sarre-fp-why {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: start;
}
.sarre-fp-why--no-image {
	grid-template-columns: 1fr;
}
.sarre-fp-why--no-image .sarre-fp-why__txt {
	max-width: 860px;
}
.sarre-fp-page .sarre-fp-why__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
	margin-top: 2.5rem;
}
.sarre-fp-why__list > li {
	padding: 1.1rem 0 1.15rem;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-fp-why__title {
	margin: 0 0 0.25rem;
	font-size: 1.2rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fp-why__list p {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.55;
}
.sarre-fp-why__fig {
	position: relative;
	margin: 0;
}
.sarre-fp-why__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.sarre-fp-why__fig figcaption {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	color: rgba(36, 36, 36, 0.55);
}

/* -- 3 · Unsere Förderer -- */
.sarre-fp-head {
	max-width: 760px;
	margin: 0 0 3rem;
}
.sarre-fp-group + .sarre-fp-group {
	margin-top: 3.25rem;
}
.sarre-fp-group__label {
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--sarre-color-anthracite);
}
.sarre-fp-group__label h3 {
	margin: 0;
	font-size: 1.45rem;
	color: var(--sarre-color-anthracite);
}

/* Logo-System: einheitliche weiße Flächen, Haarlinie, Originalfarben,
   optische Größenangleichung über drei Stufen, nie hochskaliert. */
.sarre-fp-logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 1.25rem;
	background: var(--sarre-color-white);
	border: 1px solid rgba(36, 36, 36, 0.12);
	border-radius: 2px;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
	--sarre-fp-lw: 70%;
	--sarre-fp-lh: 52%;
}
.sarre-fp-logo--s {
	--sarre-fp-lw: 54%;
	--sarre-fp-lh: 44%;
}
.sarre-fp-logo--l {
	--sarre-fp-lw: 80%;
	--sarre-fp-lh: 60%;
}
.sarre-fp-page .sarre-fp-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--sarre-fp-lw);
	max-height: var(--sarre-fp-lh);
	object-fit: contain;
	filter: none;
	box-shadow: none;
}
.sarre-fp-logo__name {
	display: block;
	max-width: 90%;
	font-size: 1.15rem;
	line-height: 1.3;
	text-align: center;
	color: var(--sarre-color-anthracite);
	overflow-wrap: anywhere;
	hyphens: auto;
}
.sarre-fp-logo--feature {
	aspect-ratio: 16 / 9;
}
.sarre-fp-page a.sarre-fp-org__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.sarre-fp-page a.sarre-fp-org__link:hover .sarre-fp-logo,
.sarre-fp-page a.sarre-fp-org__link:focus-visible .sarre-fp-logo {
	border-color: var(--sarre-color-primary);
}
.sarre-fp-page a.sarre-fp-org__link:hover .sarre-fp-org__name,
.sarre-fp-page a.sarre-fp-org__link:focus-visible .sarre-fp-org__name {
	color: var(--sarre-color-primary);
}
.sarre-fp-org__name {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.7rem;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sarre-color-anthracite);
	transition: color 0.2s ease;
}
.sarre-fp-org__ext {
	flex: none;
	font-size: 0.8rem;
	color: rgba(36, 36, 36, 0.45);
}

/* 3a · Öffentliche Förderung (hervorgehoben) */
.sarre-fp-feature {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.sarre-fp-feature + .sarre-fp-feature {
	margin-top: 2rem;
}
.sarre-fp-feature--no-logo {
	grid-template-columns: 1fr;
}
.sarre-fp-feature__name {
	margin: 0 0 0.75rem;
	font-size: 1.6rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fp-feature__txt p {
	max-width: 56ch;
	margin: 0 0 1rem;
	font-size: 1rem;
}

/* 3b · Stiftungen / Partner-Raster (Spaltenbreite fix, wenige Einträge bleiben stabil) */
.sarre-fp-page .sarre-fp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 1.75rem);
}

/* -- 4 · Partner + Förderverein -- */
.sarre-fp-duo {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.sarre-fp-duo--single {
	grid-template-columns: 1fr;
}
.sarre-fp-duo--single .sarre-fp-verein {
	max-width: 860px;
}
.sarre-fp-partner__heading {
	margin: 0 0 1.75rem;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	color: var(--sarre-color-anthracite);
}
.sarre-fp-page .sarre-fp-grid--partner {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sarre-fp-duo--single .sarre-fp-grid--partner {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sarre-fp-verein {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--sarre-color-light);
	border-top: 3px solid var(--sarre-color-primary);
}
.sarre-fp-verein__heading {
	margin: 0 0 0.75rem;
	font-size: 1.6rem;
	color: var(--sarre-color-anthracite);
}
.sarre-fp-verein p {
	max-width: 58ch;
	margin: 0 0 1.25rem;
	font-size: 0.98rem;
}

/* -- 5 · Abschluss „Partner werden“ (Anthrazit, volle Breite) -- */
.sarre-fp-cta {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(3.5rem, 7vw, 6rem) 0;
	background: var(--sarre-color-anthracite);
	color: var(--sarre-color-white);
	box-sizing: border-box;
}
.sarre-fp-cta__inner {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: 0 var(--sarre-space-lg);
	box-sizing: border-box;
}
.sarre-fp-cta__heading {
	max-width: 18ch;
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 1.08;
	color: var(--sarre-color-white);
}
.sarre-fp-cta__text p {
	max-width: 56ch;
	margin: 0 0 0.75em;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.88);
}
.sarre-fp-cta__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2rem;
}
.sarre-fp-page .sarre-fp-btn--wline {
	background: transparent;
	border-color: var(--sarre-color-white);
	color: var(--sarre-color-white) !important;
}
.sarre-fp-page .sarre-fp-btn--wline:hover,
.sarre-fp-page .sarre-fp-btn--wline:focus-visible {
	background: var(--sarre-color-white);
	color: var(--sarre-color-anthracite) !important;
}

/* -- Responsive -- */
@media (max-width: 1000px) {
	.sarre-fp-page .sarre-fp-grid,
	.sarre-fp-duo--single .sarre-fp-grid--partner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.sarre-fp-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.sarre-fp-hero__fig {
		order: -1;
		aspect-ratio: 16 / 10;
	}
	.sarre-fp-hero__fig::after {
		top: auto;
		right: 0;
		width: auto;
		height: 5px;
	}
	.sarre-fp-hero__txt,
	.sarre-fp-hero--no-image .sarre-fp-hero__txt {
		padding: 2.25rem var(--sarre-space-lg) 2.75rem;
	}
	.sarre-fp-why,
	.sarre-fp-feature,
	.sarre-fp-duo {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
	.sarre-fp-why__img {
		aspect-ratio: 3 / 2;
	}
}
@media (max-width: 700px) {
	.sarre-fp-hero__txt,
	.sarre-fp-hero--no-image .sarre-fp-hero__txt {
		padding-left: var(--sarre-space-md);
		padding-right: var(--sarre-space-md);
	}
	.sarre-fp-cta__inner {
		padding: 0 var(--sarre-space-md);
	}
}
@media (max-width: 600px) {
	.sarre-fp-hero__heading {
		font-size: 2.3rem;
	}
	.sarre-fp-page .sarre-fp-why__list {
		grid-template-columns: 1fr;
	}
	.sarre-fp-page .sarre-fp-grid {
		gap: 1rem;
	}
	.sarre-fp-logo {
		padding: 0.9rem;
	}
	.sarre-fp-logo__name {
		font-size: 1rem;
	}
	.sarre-fp-org__name {
		font-size: 0.84rem;
	}
	.sarre-fp-head {
		margin-bottom: 2rem;
	}
}


/* ==========================================================================
   Paket Über Sarré (2026-10-06)
   [sarre_ueber_sarre_page] (/ueber-sarre/), sarre-core/includes/ueber-sarre.php.
   Grundlage: freigegebenes Mockup `Claude outputs/ueber-sarre-mockup.html`.
   Abgegrenzter Block: ausschließlich `sarre-ueber-*` plus Scoping
   wiederverwendeter Klassen innerhalb von `.sarre-ueber-page`
   (.sarre-akademie-section/-heading/-lead, .sarre-btn, .sarre-eyebrow,
   .sarre-link-editorial). Keine neue Hex-Farbe, keine Webfonts, keine
   Schatten, Ecken 2 px, bestehende Regeln unverändert. Seitentitel/
   Container-Abstand über die bestehende Body-Klasse .sarre-shortcode-page
   (gesetzt in ueber-sarre.php).
   ========================================================================== */

.sarre-ueber-page {
	color: var(--sarre-color-body-text);
	line-height: 1.6;
}
.sarre-ueber-page p,
.sarre-ueber-page h1,
.sarre-ueber-page h2,
.sarre-ueber-page h3 {
	padding-bottom: 0;
}
.sarre-ueber-page figure {
	margin: 0;
}
.sarre-ueber-page img {
	display: block;
	max-width: 100%;
	height: auto;
}
.sarre-ueber-page .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Divis Listenregel (#left-area ul/ol, .entry-content ul/ol { padding … }) neutralisieren. */
.sarre-ueber-page .sarre-ueber-principles,
.sarre-ueber-page .sarre-ueber-tl,
.sarre-ueber-page .sarre-ueber-awards,
.sarre-ueber-page .sarre-ueber-docs,
.sarre-ueber-page .sarre-ueber-next {
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
}
.sarre-ueber-page .sarre-ueber-principles > li,
.sarre-ueber-page .sarre-ueber-tl > li,
.sarre-ueber-page .sarre-ueber-awards > li,
.sarre-ueber-page .sarre-ueber-docs > li,
.sarre-ueber-page .sarre-ueber-next > li {
	margin: 0;
	list-style: none;
}

/* Pinke Buttons: Text immer weiß (gleiche eng gescopte Lösung wie Akademie/Förderer). */
.sarre-ueber-page .sarre-btn--primary,
.sarre-ueber-page .sarre-btn--primary:hover,
.sarre-ueber-page .sarre-btn--primary:focus-visible {
	color: var(--sarre-color-white) !important;
}

.sarre-ueber-section {
	scroll-margin-top: 80px;
}
.sarre-ueber-section--light {
	background: var(--sarre-color-light);
}
.sarre-ueber-section--white {
	background: var(--sarre-color-white);
}
.sarre-ueber-head {
	max-width: 760px;
	margin: 0 0 3rem;
}
.sarre-ueber-more {
	margin: 1.75rem 0 0;
}
.sarre-ueber-caption {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(36, 36, 36, 0.55);
}
.sarre-ueber-kicker {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(36, 36, 36, 0.55);
}
.sarre-ueber-page [class$="__media"] {
	position: relative;
}

/* -- 1 · Hero (Text links, Foto rechts mit versetzter Türkis-Fläche) -- */
.sarre-ueber-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
	background: var(--sarre-color-white);
	box-sizing: border-box;
	overflow: hidden;
}
.sarre-ueber-hero__grid {
	max-width: var(--sarre-content-max-width);
	margin: 0 auto;
	padding: 0 var(--sarre-space-lg);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}
.sarre-ueber-hero--no-image .sarre-ueber-hero__grid {
	grid-template-columns: minmax(0, 760px);
}
.sarre-ueber-hero__heading {
	margin: 0 0 1.5rem;
	font-size: clamp(2.6rem, 5.6vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--sarre-color-anthracite);
}
.sarre-ueber-hero__heading em {
	font-style: italic;
	color: var(--sarre-color-primary);
}
.sarre-ueber-hero__text {
	max-width: 44ch;
	font-size: 1.125rem;
	line-height: 1.7;
}
.sarre-ueber-hero__text p {
	margin: 0 0 0.75em;
}
.sarre-ueber-hero__text p:last-child {
	margin-bottom: 0;
}
.sarre-ueber-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 2.1rem;
}
.sarre-ueber-hero__fig {
	position: relative;
	margin-right: calc(-1 * var(--sarre-space-lg));
}
.sarre-ueber-hero__fig__media::before {
	content: '';
	position: absolute;
	right: -24px;
	bottom: -24px;
	width: 62%;
	height: 70%;
	background: var(--sarre-color-primary);
}
.sarre-ueber-hero__fig__img {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 30%;
}
.sarre-ueber-hero__fig .sarre-ueber-caption {
	position: relative;
	margin-top: 1.9rem;
}

/* -- 2 · Wofür wir stehen -- */
.sarre-ueber-stand {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.sarre-ueber-principles {
	counter-reset: sarre-ueber-pr;
}
.sarre-ueber-principle {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0 1.25rem;
	padding: 1.6rem 0 1.7rem;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-ueber-principle:last-child {
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-ueber-principle::before {
	counter-increment: sarre-ueber-pr;
	content: counter(sarre-ueber-pr, decimal-leading-zero);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.65rem;
	line-height: 1.1;
	color: var(--sarre-color-accent);
}
.sarre-ueber-principle__title {
	margin: 0 0 0.4rem;
	font-size: 1.4rem;
	color: var(--sarre-color-anthracite);
}
.sarre-ueber-principle p {
	margin: 0;
	font-size: 0.98rem;
	max-width: 56ch;
}

/* -- 3 · Wie alles begann -- */
.sarre-ueber-origin {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}
.sarre-ueber-origin--no-image {
	grid-template-columns: minmax(0, 760px);
}
.sarre-ueber-origin__fig__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.sarre-ueber-quote {
	margin: 2rem 0 0;
	padding: 0 0 0 1.4rem;
	border-left: 3px solid var(--sarre-color-accent);
	background: none;
}
.sarre-ueber-quote p {
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	line-height: 1.45;
	font-style: normal;
	color: var(--sarre-color-anthracite);
}
.sarre-ueber-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-style: normal;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(36, 36, 36, 0.55);
}

/* -- 4 · Stationen (Timeline) -- */
.sarre-ueber-tl {
	border-top: 2px solid var(--sarre-color-anthracite);
}
.sarre-ueber-tl__item {
	display: grid;
	grid-template-columns: 8.5rem 15rem minmax(0, 1fr);
	gap: 0 2rem;
	align-items: baseline;
	padding: 1.2rem 0 1.25rem;
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-ueber-tl__year {
	font-size: 1.9rem;
	line-height: 1;
	color: var(--sarre-color-anthracite);
	overflow-wrap: anywhere;
}
.sarre-ueber-tl__item--hi .sarre-ueber-tl__year {
	color: var(--sarre-color-primary);
}
.sarre-ueber-tl__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--sarre-color-anthracite);
}
.sarre-ueber-tl__text p {
	margin: 0;
	font-size: 0.95rem;
	max-width: 62ch;
}
.sarre-ueber-tl__text .sarre-link-editorial {
	margin-top: 0.4rem;
	font-size: 0.875rem;
}

/* -- 5 · Bildband (volle Breite) -- */
.sarre-ueber-band {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin: 0 0 0 calc(50% - 50vw) !important;
	background: var(--sarre-color-anthracite);
}
.sarre-ueber-band__img {
	width: 100%;
	height: clamp(300px, 42vw, 560px) !important;
	object-fit: cover;
	object-position: center 40%;
}
.sarre-ueber-band__caption {
	position: absolute;
	left: var(--sarre-space-lg);
	right: var(--sarre-space-lg);
	bottom: 18px;
	font-size: 0.8125rem;
	color: var(--sarre-color-white);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* -- 6 · So arbeiten wir (Türkis) -- */
.sarre-ueber-section--turquoise {
	background: var(--sarre-color-primary);
	color: var(--sarre-color-white);
}
.sarre-ueber-section--turquoise .sarre-eyebrow {
	color: var(--sarre-color-white);
	opacity: 0.9;
}
.sarre-ueber-section--turquoise .sarre-akademie-heading {
	color: var(--sarre-color-white);
}
.sarre-ueber-work {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}
.sarre-ueber-work--no-image {
	grid-template-columns: minmax(0, 760px);
}
.sarre-ueber-work__text {
	margin-top: 1.1rem;
	max-width: 54ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.95);
}
.sarre-ueber-work__text p {
	margin: 0 0 0.9em;
}
.sarre-ueber-work__text p:last-child {
	margin-bottom: 0;
}
.sarre-ueber-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1.25rem;
	margin: 2.25rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.45);
}
.sarre-ueber-facts dt {
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--sarre-color-white);
}
.sarre-ueber-facts dd {
	margin: 0.3rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.88);
}
.sarre-ueber-work__fig__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.sarre-ueber-work__fig .sarre-ueber-caption {
	color: rgba(255, 255, 255, 0.88);
}
.sarre-ueber-page .sarre-ueber-link--white {
	color: var(--sarre-color-white);
}

/* -- 7 · Verantwortung -- */
.sarre-ueber-resp {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 4vw, 3.25rem);
}
.sarre-ueber-resp__item {
	padding-top: 1.4rem;
	border-top: 3px solid var(--sarre-color-anthracite);
}
.sarre-ueber-resp__item--accent {
	border-top-color: var(--sarre-color-accent);
}
.sarre-ueber-resp__title {
	margin: 0 0 0.75rem;
	font-size: 1.45rem;
	color: var(--sarre-color-anthracite);
}
.sarre-ueber-resp__item p {
	margin: 0 0 0.75em;
	font-size: 0.97rem;
}
.sarre-ueber-resp__item .sarre-link-editorial {
	margin-top: 0.25rem;
}

/* -- 8 · Auszeichnungen -- */
.sarre-ueber-awards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem clamp(2rem, 5vw, 4.5rem);
}
.sarre-ueber-award {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-ueber-award--no-year {
	grid-template-columns: minmax(0, 1fr);
}
.sarre-ueber-award__year {
	font-size: 3rem;
	line-height: 0.9;
	color: var(--sarre-color-primary);
}
.sarre-ueber-award__title {
	margin: 0 0 0.5rem;
	font-size: 1.45rem;
	color: var(--sarre-color-anthracite);
}
.sarre-ueber-award p {
	margin: 0;
	font-size: 0.96rem;
}
.sarre-ueber-award__img {
	width: 84px;
	margin-top: 1rem;
	padding: 4px;
	border: 1px solid rgba(36, 36, 36, 0.12);
	background: var(--sarre-color-white);
	box-sizing: border-box;
}
.sarre-ueber-award .sarre-link-editorial {
	margin-top: 0.75rem;
}

/* -- 9 · Dokumente & Nachweise -- */
.sarre-ueber-docs {
	border-top: 2px solid var(--sarre-color-anthracite);
}
.sarre-ueber-doc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 15rem 6rem 11rem;
	gap: 0 1.75rem;
	align-items: center;
	padding: 1.35rem 0;
	border-bottom: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-ueber-doc__title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--sarre-color-anthracite);
}
.sarre-ueber-doc__sub {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: rgba(36, 36, 36, 0.6);
	max-width: 58ch;
}
.sarre-ueber-doc__org,
.sarre-ueber-doc__year {
	margin: 0;
	font-size: 0.875rem;
	color: var(--sarre-color-anthracite);
}
.sarre-ueber-doc__year {
	font-variant-numeric: tabular-nums;
}
.sarre-ueber-doc__act {
	justify-self: end;
}
.sarre-ueber-doc__act .sarre-link-editorial {
	white-space: nowrap;
}
.sarre-ueber-docs__legal {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	color: rgba(36, 36, 36, 0.55);
}
.sarre-ueber-docs__legal a {
	color: var(--sarre-color-primary);
}

/* -- 10 · Weiterführend -- */
.sarre-ueber-next {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
}
.sarre-ueber-next__link {
	display: block;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sarre-color-anthracite);
	color: inherit;
	text-decoration: none;
}
.sarre-ueber-next__kicker {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sarre-color-accent);
}
.sarre-ueber-next__title {
	display: block;
	margin: 0.4rem 0 0.5rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: var(--sarre-color-anthracite);
	transition: color 0.2s ease;
}
.sarre-ueber-next__link:hover .sarre-ueber-next__title,
.sarre-ueber-next__link:focus-visible .sarre-ueber-next__title {
	color: var(--sarre-color-primary);
}
.sarre-ueber-next__text {
	display: block;
	font-size: 0.95rem;
}
.sarre-ueber-next__arrow {
	display: inline-block;
	margin-top: 0.9rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sarre-color-primary);
}
.sarre-ueber-smalllinks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin-top: 2.5rem;
}

/* -- Responsive -- */
@media (max-width: 1100px) {
	.sarre-ueber-tl__item {
		grid-template-columns: 6.5rem 12rem minmax(0, 1fr);
		gap: 0 1.5rem;
	}
	.sarre-ueber-doc {
		grid-template-columns: minmax(0, 1fr) 12rem 5rem 10rem;
		gap: 0 1.25rem;
	}
}
@media (max-width: 900px) {
	.sarre-ueber-hero__grid,
	.sarre-ueber-stand,
	.sarre-ueber-origin,
	.sarre-ueber-work,
	.sarre-ueber-awards {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
	}
	.sarre-ueber-hero__fig,
	.sarre-ueber-origin__fig,
	.sarre-ueber-work__fig {
		order: -1;
	}
	.sarre-ueber-hero__fig {
		margin-right: 0;
	}
	.sarre-ueber-hero__fig__media::before {
		right: -20px;
		bottom: -14px;
		width: 55%;
		height: 60%;
	}
	.sarre-ueber-hero__fig .sarre-ueber-caption {
		margin-top: 1.4rem;
	}
	.sarre-ueber-resp,
	.sarre-ueber-next {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
	.sarre-ueber-tl__item {
		grid-template-columns: 4.75rem minmax(0, 1fr);
		gap: 0.2rem 1rem;
	}
	.sarre-ueber-tl__year {
		grid-row: span 2;
		font-size: 1.55rem;
	}
	.sarre-ueber-tl__item--no-year {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-ueber-tl__item--no-year .sarre-ueber-tl__year {
		display: none;
	}
	.sarre-ueber-doc {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
	}
	.sarre-ueber-doc__org:empty,
	.sarre-ueber-doc__year:empty,
	.sarre-ueber-doc__act:empty {
		display: none;
	}
	.sarre-ueber-doc__act {
		justify-self: start;
		margin-top: 0.4rem;
	}
	.sarre-ueber-head {
		margin-bottom: 2rem;
	}
}
@media (max-width: 700px) {
	.sarre-ueber-hero__grid {
		padding-left: var(--sarre-space-md);
		padding-right: var(--sarre-space-md);
	}
	.sarre-ueber-band__caption {
		left: var(--sarre-space-md);
		right: var(--sarre-space-md);
	}
}
@media (max-width: 600px) {
	.sarre-ueber-hero__heading {
		font-size: 2.45rem;
	}
	.sarre-ueber-principle {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: 0 0.75rem;
	}
	.sarre-ueber-principle::before {
		font-size: 1.35rem;
	}
	.sarre-ueber-award {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}
	.sarre-ueber-award__year {
		font-size: 2.3rem;
	}
	.sarre-ueber-quote p {
		font-size: 1.15rem;
	}
}

/* ==========================================================================
   News-Bildergalerie (2026-10-06)
   Optionale ACF-Galerie `news_gallery` auf der News-Einzelseite, gerendert
   von sarre_core_render_news_gallery() (sarre-core/includes/aktuelles.php)
   nach dem Artikeltext. Markup = Produktions-Galerie (.sarre-gallery-grid +
   __trigger), Lightbox = bestehende sarre-lightbox.js (unverändert).
   Abgegrenzter Block: ausschließlich .sarre-aktuelles-single__gallery und
   .sarre-news-gallery*; die Produktions-Galerie und alle übrigen
   .sarre-gallery-grid-Regeln bleiben unverändert. Keine neue Farbe/Schrift.
   ========================================================================== */
.sarre-aktuelles-single__gallery {
	margin: var(--sarre-space-lg) 0 0;
}
.sarre-news-gallery.sarre-gallery-grid {
	gap: var(--sarre-space-sm);
}
.sarre-news-gallery .sarre-gallery-grid__caption {
	padding: 0;
}
/* 1 Bild: natürliches Seitenverhältnis, volle Spaltenbreite, nicht gestreckt. */
.sarre-news-gallery--one.sarre-gallery-grid {
	grid-template-columns: minmax(0, 1fr);
}
.sarre-news-gallery--one .sarre-gallery-grid__image {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 560px;
	margin: 0 auto;
}
/* 2 Bilder: harmonische Zweierspalte, einheitlicher Ausschnitt. */
.sarre-news-gallery--two.sarre-gallery-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 3+ Bilder: ruhiges Dreier-Raster, einheitlicher Ausschnitt. */
.sarre-news-gallery--many.sarre-gallery-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sarre-news-gallery--two .sarre-gallery-grid__image,
.sarre-news-gallery--many .sarre-gallery-grid__image {
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
@media (max-width: 700px) {
	.sarre-news-gallery--many.sarre-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.sarre-news-gallery--two.sarre-gallery-grid,
	.sarre-news-gallery--many.sarre-gallery-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-news-gallery--one .sarre-gallery-grid__image {
		max-height: 70vh;
	}
}

/* ==========================================================================
   Akademie – Verantwortung & Kinderschutz (2026-10-06)
   Abschnitt #kinderschutz in [sarre_akademie_page] zwischen „Dozent:innen“ und
   „Aufnahme & Schnuppern“ (sarre_core_render_akademie_kinderschutz(),
   akademie.php). Abgegrenzter Block: ausschließlich
   .sarre-akademie-section--kinderschutz / .sarre-akademie-kinderschutz*.
   Ruhige Hellgrau-Fläche mit feiner pinker Oberkante innerhalb des weißen
   Abschnitts; keine neue Farbe, keine Icons, keine Schatten, Ecken 2 px.
   Übrige Akademie-Abschnitte unverändert.
   ========================================================================== */
.sarre-akademie-section--kinderschutz {
	scroll-margin-top: 80px;
}
.sarre-akademie-kinderschutz {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	padding: clamp(2rem, 4.5vw, 3.75rem);
	background: var(--sarre-color-light);
	border-top: 3px solid var(--sarre-color-accent);
	border-radius: 2px;
}
.sarre-akademie-kinderschutz .sarre-akademie-lead {
	max-width: 46ch;
}
.sarre-akademie-kinderschutz__text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-kinderschutz__text p,
.sarre-akademie-kinderschutz__doc-note {
	margin: 0 0 0.75em;
	padding: 0;
}
.sarre-akademie-kinderschutz__text p:last-child {
	margin-bottom: 0;
}
.sarre-akademie-kinderschutz__doc {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(36, 36, 36, 0.12);
}
.sarre-akademie-kinderschutz__doc-note {
	font-size: 0.95rem;
	line-height: 1.6;
}
.sarre-akademie-kinderschutz__doc-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}
.sarre-akademie-kinderschutz .sarre-akademie-kinderschutz__btn {
	color: var(--sarre-color-accent) !important;
}
.sarre-akademie-kinderschutz .sarre-akademie-kinderschutz__btn:hover,
.sarre-akademie-kinderschutz .sarre-akademie-kinderschutz__btn:focus-visible {
	color: var(--sarre-color-white) !important;
}
.sarre-akademie-kinderschutz__stand {
	font-size: 0.8125rem;
	color: rgba(36, 36, 36, 0.55);
}
.sarre-akademie-kinderschutz .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (max-width: 900px) {
	.sarre-akademie-kinderschutz {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}
@media (max-width: 700px) {
	.sarre-akademie-kinderschutz {
		padding: 1.75rem 1.25rem;
	}
}

/* ==========================================================================
   Paket Navigation + Footer + zentrale Kontaktdaten (2026-10-06)
   --------------------------------------------------------------------------
   1. Hauptnavigation (Divi-Standard-Header, Menü „Hauptnavigation“):
      - Header-Breite ab 981 px: min(1360px, 100% - 80px) – nur der Header,
        Inhaltsbreiten unverändert.
      - 981–1479 px: Burger-Menü (wie Divi unter 981 px); ab 1480 px die
        Desktop-Leiste. Korrektur 2026-10-06 nach Owner-Browsertest: Logo
        (~272 px) + 9 Hauptpunkte inkl. CTA (~978 px) + Suchlupe (40 px)
        brauchen ~1.320 px – in 1280 px fiel die Lupe (float) in eine zweite
        Zeile. Breakpoint so gewählt, dass die ganze Zeile inkl. Lupe mit
        Reserve passt (auch mit Scrollbar); Schrift/Abstände unverändert.
      - CTA „Termine & Tickets“ (Klasse sarre-nav-cta, gesetzt in
        sarre-core/includes/navigation.php): pinke Fläche hinter dem Text –
        die Divi-Abstände (Header-Höhe, Fixed-Header) bleiben unverändert.
   2. Footer-Kontaktspalte (zentrale Kontaktdaten, Akademie separat).
   3. Kontaktseite „So erreichen Sie uns“: Telefon/Mobil/Fax-Zeilen.
   Keine neue Farbe – nur bestehende Variablen/rgba-Töne.
   ========================================================================== */

/* -- 1. Hauptnavigation --------------------------------------------------- */
@media (min-width: 981px) {
	#main-header .container.et_menu_container {
		width: calc(100% - 80px);
		max-width: 1360px;
	}
}

/* Hauptpunkte und Suchlupe brechen nie in sich um. */
#top-menu > li > a,
#et_top_search {
	white-space: nowrap;
}

/* Burger-Menü auch zwischen 981 und 1479 px (Regeln wie Divi ≤ 980 px). */
@media (min-width: 981px) and (max-width: 1479px) {
	#top-menu-nav,
	#top-menu {
		display: none;
	}
	#et_mobile_nav_menu {
		display: block;
	}
	.et_header_style_left #et-top-navigation,
	.et_header_style_left .et-fixed-header #et-top-navigation {
		display: block;
		padding-top: 24px;
	}
	#et_top_search {
		float: left;
		margin: 0 35px 0 0;
	}
	#et_search_icon:before {
		top: 7px;
	}
	/* Der Header bleibt in diesem Bereich fixiert – das aufgeklappte Menü
	   muss deshalb selbst scrollbar sein. */
	#main-header .et_mobile_menu {
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* CTA „Termine & Tickets“ (Desktop) */
#top-menu li.sarre-nav-cta > a {
	z-index: 0;
	padding-right: 16px;
	padding-left: 16px;
	color: var(--sarre-color-white) !important;
}
#top-menu li.sarre-nav-cta > a::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -11px;
	right: 0;
	left: 0;
	height: calc(1em + 22px);
	border-radius: 2px;
	background-color: var(--sarre-color-accent);
}
#top-menu-nav > ul > li.sarre-nav-cta > a:hover,
#top-menu-nav > ul > li.sarre-nav-cta > a:focus-visible {
	opacity: 0.85;
}

/* CTA im mobilen Menü (Divi klont das Hauptmenü samt Klassen). */
.et_mobile_menu li.sarre-nav-cta > a {
	margin-top: 10px;
	border-bottom: 0;
	border-radius: 2px;
	background-color: var(--sarre-color-accent);
	color: var(--sarre-color-white) !important;
	font-weight: 600;
	text-align: center;
}
.et_mobile_menu li.sarre-nav-cta > a:hover,
.et_mobile_menu li.sarre-nav-cta > a:focus-visible {
	opacity: 0.85;
}

/* -- 2. Footer: Kontaktspalte -------------------------------------------- */
.sarre-footer__contact-org {
	font-weight: 600;
}
.sarre-footer__contact-phone {
	display: block;
}
.sarre-footer__contact-label {
	display: inline-block;
	min-width: 3.75em;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.8);
}
.sarre-footer__contact-value {
	white-space: nowrap;
}
.sarre-footer__contact-line--venue {
	margin-top: var(--sarre-space-xs);
	padding-top: var(--sarre-space-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.sarre-footer__contact-heading {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* -- 3. Kontaktseite: Telefon / Mobil / Fax ------------------------------- */
.sarre-kontakt-reach__phone {
	display: block;
}
.sarre-kontakt-reach__label {
	display: inline-block;
	min-width: 4.5em;
	font-size: 0.875rem;
	color: rgba(36, 36, 36, 0.6);
}
.sarre-kontakt-reach__value {
	font-weight: 500;
	color: var(--sarre-color-anthracite);
}

/* ==========================================================================
   Mini-Fix Hero-H1 Übersichtsseiten (2026-10-06)
   /produktionen/, /workshops/ und /termine/ sind CPT-Archive mit Divi-
   Theme-Builder-Body-Template (et-tb-has-body). Divi liefert dort die
   Überschriftenfarbe als „.et-db #et-boc .et-l h1“ (ID-Selektor) aus – das
   schlägt die bestehende Regel color: weiß der drei Hero-H1. Gleicher
   Kontext wie beim Footer-Link-Fix; nur diese drei Hero-H1, keine globale
   H1-Farbe, Überzeile/Fließtext unverändert.
   ========================================================================== */
.et-db #et-boc .et-l .sarre-productions-page-hero__heading,
.et-db #et-boc .et-l .sarre-workshops-page-hero__heading,
.et-db #et-boc .et-l .sarre-termine-page-hero__heading {
	color: var(--sarre-color-white);
}

/* ==========================================================================
   Responsive-Paket 1+2 (2026-10-07): Overflow-Sofortmaßnahmen und
   CSS-Robustheit.

   BREAKPOINT-STANDARD für alle NEUEN responsiven Regeln (an Divi angelehnt):
     Mobil   bis 767px   -> @media (max-width: 767px)
     Tablet  768-980px   -> @media (min-width: 768px) and (max-width: 980px)
     Desktop ab 981px    -> keine Media Query nötig (Basisregeln)
   Bestehende Breakpoints weiter oben bleiben bewusst unverändert und werden
   nur angepasst, wenn der jeweilige Bereich ohnehin bearbeitet wird.

   Keine Regel in diesem Block greift ab 981px – die freigegebene
   Desktop-Darstellung bleibt unverändert. Ausnahme: Abschnitt 3 (min-width:0
   für Grid-Kinder) und 5 (overflow-x: clip) gelten auf allen Breiten. Beide
   wirken nur, wenn Inhalt sonst ÜBER seinen Bereich hinausragen würde.
   ========================================================================== */

/* -- 1. Divi-5-Spalten mobil stapeln ---------------------------------------
   Ursache: Divi-5-Flex-Rows (.et_flex_row) behalten ihre Desktop-
   Spaltenbreite (z. B. .et_flex_column_8_24 = 1/3) auch auf dem Smartphone,
   solange in der Row keine eigene Phone-/Tablet-Spaltenstruktur gesetzt ist –
   anders als Divi 4. Zusammen mit „flex-wrap: nowrap“ wird die Seite dann
   breiter als der Viewport.
   Defensiv:
   - nur Spalten OHNE explizite Divi-Responsive-Struktur (keine *_phone-/
     *_tablet-Klasse – Divi vererbt Tablet auf Phone, beides wird
     respektiert)
   - Theme-Builder-Header/-Footer ausgenommen (eigene, freigegebene Layouts)
   - explizite Spaltenbreiten aus Divi mit ID-Selektor (Theme-Builder-Body,
     „.et-db #et-boc …“) gewinnen weiterhin
   - Ausnahmeklasse: „sarre-keep-columns“ im CSS-Klassen-Feld einer Row
     -> diese Row bleibt mobil bewusst mehrspaltig. */
@media (max-width: 767px) {
	.et_flex_row:not(.sarre-keep-columns):not([class*="_tb_header"]):not([class*="_tb_footer"]):has(> [class*="et_flex_column_"]:not([class*="_phone"]):not([class*="_tablet"])) {
		flex-wrap: wrap;
	}
	.et_flex_row:not(.sarre-keep-columns):not([class*="_tb_header"]):not([class*="_tb_footer"]) > [class*="et_flex_column_"]:not([class*="_phone"]):not([class*="_tablet"]) {
		width: 100%;
		max-width: 100%;
	}
}

/* -- 2. Startseite „Drei Einstiege“ ----------------------------------------
   Ursache (siehe Analyse 2026-10-07): Die bisherigen Regeln in
   „.sarre-entry-tiles__tile { flex: … }“ setzen am Kachel-<a> an. Das ist
   aber kein Flex-Element der Row (es steckt in Spalte > Code-Modul), daher
   wirkungslos. Zusätzlich ist im Divi-Builder die Klasse „sarre-entry-tiles“
   in ein CSS-Feld statt ins CSS-Klassen-Feld der Row geraten. Die dort
   geplante Media Query wird dadurch vom Browser verworfen.
   Diese Regeln setzen an den echten Divi-Spalten an und finden die Row
   über ihren Inhalt (:has) – unabhängig davon, ob die Row-Klasse gesetzt
   ist. Desktop (ab 981px) unverändert. */
@media (min-width: 768px) and (max-width: 980px) {
	/* Tablet: zwei Kacheln nebeneinander, die dritte über die volle Breite. */
	.et_flex_row:has(> .et_pb_column .sarre-entry-tiles__tile) {
		flex-wrap: wrap;
		column-gap: var(--sarre-space-sm);
		row-gap: var(--sarre-space-sm);
	}
	.et_flex_row:has(> .et_pb_column .sarre-entry-tiles__tile) > .et_pb_column {
		width: calc((100% - var(--sarre-space-sm)) / 2);
		max-width: none;
	}
	.et_flex_row:has(> .et_pb_column .sarre-entry-tiles__tile) > .et_pb_column:last-child:nth-child(odd) {
		width: 100%;
	}
}
@media (max-width: 767px) {
	/* Mobil: alle Kacheln untereinander. */
	.et_flex_row:has(> .et_pb_column .sarre-entry-tiles__tile) {
		flex-wrap: wrap;
		row-gap: var(--sarre-space-sm);
	}
	.et_flex_row:has(> .et_pb_column .sarre-entry-tiles__tile) > .et_pb_column {
		width: 100%;
		max-width: 100%;
	}
}

/* -- 3. Grids: Inhalte dürfen Spalten nicht sprengen -----------------------
   Diese Grids nutzen „1fr“ (= minmax(auto, 1fr)). Lange Wörter, URLs oder
   Bilder können eine Spalte dann über ihre Breite hinausdrücken. „min-width:
   0“ an den Grid-Kindern wirkt wie „minmax(0, 1fr)“ an den Spuren, lässt aber
   alle bestehenden Spaltendefinitionen und Breakpoints unangetastet.
   :where() = Spezifität 0, damit gezielt gesetzte min-width-Werte einzelner
   Elemente weiterhin gewinnen. Footer bewusst ausgenommen (abgeschlossen). */
:where(
	.sarre-credits-list,
	.sarre-venue-block,
	.sarre-production-cards,
	.sarre-productions-grid,
	.sarre-workshops-grid,
	.sarre-team-grid,
	.sarre-homepage-aktuelles__grid,
	.sarre-homepage-support__inner,
	.sarre-ferien-page-workshops-grid,
	.sarre-ferien-page-week-grid,
	.sarre-ferien-page-info-grid,
	.sarre-ferien-page-teachers-grid,
	.sarre-erwachsenenworkshop-message__grid,
	.sarre-erwachsenenworkshop-pillars-grid,
	.sarre-erwachsenenworkshop-areas-grid,
	.sarre-erwachsenenworkshop-team-grid,
	.sarre-erwachsenenworkshop-overview-grid,
	.sarre-erwachsenenworkshop-current__inner,
	.sarre-erwachsenenworkshop-featured-teacher__inner,
	.sarre-akademie-split-head,
	.sarre-akademie-pair,
	.sarre-akademie-prods__list,
	.sarre-akademie-alumni__head,
	.sarre-akademie-how,
	.sarre-akademie-fuerwen,
	.sarre-akademie-aufnahme,
	.sarre-akademie-formel,
	.sarre-alumni-grid,
	.sarre-alumni-portrait__intro,
	.sarre-alumni-bio__grid,
	.sarre-spenden-hero,
	.sarre-spenden-ways,
	.sarre-kontakt-intro,
	.sarre-fp-hero,
	.sarre-fp-why,
	.sarre-fp-why__list,
	.sarre-fp-feature,
	.sarre-fp-duo,
	.sarre-ueber-hero__grid,
	.sarre-ueber-stand,
	.sarre-ueber-origin,
	.sarre-ueber-work
) > * {
	min-width: 0;
}

/* -- 4. Lange E-Mail-Adressen / IBAN dürfen mobil umbrechen ----------------
   Telefonnummern bleiben bewusst ungebrochen. */
@media (max-width: 767px) {
	a[href^="mailto:"] {
		overflow-wrap: anywhere;
	}
	/* Footer-E-Mail: bisher „white-space: nowrap“ (Desktop unverändert). */
	.sarre-footer__contact-line a[href^="mailto:"] {
		white-space: normal;
	}
	/* IBAN: bricht ab 700px bereits um; jetzt bis 767px an den Leerzeichen
	   der Vierergruppen. */
	.sarre-spenden-bank__iban {
		white-space: normal;
	}
}

/* -- 5. Sicherheitsnetz Full-Bleed (100vw) ---------------------------------
   22 Bereiche nutzen die Breakout-Technik „width: 100vw; margin-left:
   calc(50% - 50vw)“. Auf Geräten mit klassischer Scrollbar (Windows-Desktop)
   ist 100vw um die Scrollbar-Breite größer als der sichtbare Bereich. Diese
   ~15-17px liegen UNTER der Scrollbar und sind ohnehin unsichtbar – sie
   erzeugen aber einen horizontalen Mini-Scroll. Ohne JS lässt sich die
   Scrollbar-Breite nicht in CSS ermitteln. Deshalb wird genau dieser
   unsichtbare Rest hier abgeschnitten. Mobil (keine Scrollbar) ist 100vw
   bereits exakt der Viewport.
   „clip“ statt „hidden“: erzeugt keinen Scroll-Container, Sticky-Elemente
   und fixierte Overlays (Lightbox, Team-Modal) funktionieren unverändert.
   Nur Sicherheitsnetz – echte Layout-Ursachen werden oben behoben. */
#page-container {
	overflow-x: clip;
}

/* ==========================================================================
   Homepage-Hero mobil (2026-10-19, Owner-Vorgabe vor der Präsentation)
   Nur bis 767px (Breakpoint-Standard), Desktop/Tablet ab 768px unverändert.
   Statt das Querformat-Bild auf Hochkant-Bildschirmen per „cover“ seitlich
   zu beschneiden (Figuren angeschnitten, Text über dem Motiv), zeigt der
   Slide das Bild mobil in VOLLER BREITE oben (nichts seitlich beschnitten,
   keine Bildposition pro Slide nötig). Darunter läuft es über einen
   dezenten Anthrazit-Verlauf in eine ruhige Textfläche aus; Text, Button
   und Slider-Navigation stehen darunter.
   Die Slides liegen mobil per CSS-Grid übereinander (statt absolut), damit
   die Hero-Höhe automatisch dem längsten Slide-Text folgt – lange Titel
   werden nie abgeschnitten. Überblendung/JS (opacity, .is-active)
   unverändert. Keine Markup-, Bild- oder Datenänderung.
   ========================================================================== */
/* KI-Kennzeichnung bei Slides mit eigenem Smartphone-Bild (2026-10-21):
   Desktop zeigt die Kennzeichnung des regulären Hero-Bildes, mobil die des
   Vorschaubildes (siehe Mobil-Block). Wrapper ohne eigene Box. */
.sarre-homepage-hero__ai--desktop {
	display: contents;
}
.sarre-homepage-hero__ai--mobile {
	display: none;
}
@media (max-width: 767px) {
	/* Runde 3 (2026-10-21, Owner): Bild mobil deutlich höher (ca. 42 % der
	   sichtbaren Bildschirmhöhe, per „cover“ ohne Verzerrung), kompaktere
	   türkise Textfläche, Hero bündig mit dem Bildschirmrand.
	   Ursache des weißen Streifens links: Divis Basis-CSS
	   `.entry-content ul { padding: 0 0 23px 1em }` ist spezifischer als
	   `.sarre-homepage-hero__slides { padding: 0 }`. Auf dem Desktop liegen
	   die Slides absolut über diesem Innenabstand (unsichtbar); mobil liegen
	   sie im Fluss, daher 16px Streifen links + 23px Leerraum unten. Hier
	   gezielt mit höherer Spezifität zurückgesetzt (nur mobil, Desktop
	   bewusst unverändert). */
	.sarre-homepage-hero {
		--sarre-hero-m-img: clamp(220px, 42svh, 420px);
	}
	@supports not (height: 1svh) {
		.sarre-homepage-hero {
			--sarre-hero-m-img: clamp(220px, 42vh, 420px);
		}
	}
	.sarre-homepage-hero,
	.sarre-homepage-hero .sarre-homepage-hero__slides {
		min-height: 0;
	}
	.sarre-homepage-hero .sarre-homepage-hero__slides {
		display: grid;
		height: auto;
		margin: 0;
		padding: 0;
		list-style: none;
		line-height: inherit;
	}
	.sarre-homepage-hero__slide {
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
		align-items: flex-start;
	}
	/* Bildfläche: eigene Ebene (::before) übernimmt das Slide-Bild per
	   `background-image: inherit` und füllt sie mit „cover“ (CSS-Pendant zu
	   object-fit: cover für Hintergrundbilder) - volle Breite, feste Höhe,
	   keine Verzerrung. Position leicht oberhalb der Mitte, weil Gesichter
	   und Schriftzüge in den Bühnenfotos meist im oberen Drittel liegen.
	   Das Bild auf dem Slide selbst wird mobil ausgeblendet (Größe 0). */
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) {
		background-size: 0 0;
		background-repeat: no-repeat;
		/* Abgedunkeltes Sarré-Türkis #007A86 (Basis #00B6C8): weißer Text
		   erreicht damit 5,1:1 (WCAG AA). */
		background-color: #007A86;
	}
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image)::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: var(--sarre-hero-m-img);
		background-image: inherit;
		background-size: cover;
		background-position: center 35%;
		background-repeat: no-repeat;
		z-index: 0;
	}
	/* Eigenes Smartphone-Bild (Produktions-Vorschaubild `card_image`, als
	   CSS-Variable im Slide hinterlegt): das reguläre Hero-Bild wird mobil
	   gar nicht erst geladen (`none` überschreibt den Inline-Stil), die
	   Bildfläche zeigt stattdessen das Vorschaubild. */
	.sarre-homepage-hero__slide.sarre-homepage-hero__slide--has-mobile-image {
		background-image: none !important;
	}
	.sarre-homepage-hero__slide.sarre-homepage-hero__slide--has-mobile-image::before {
		background-image: var(--sarre-hero-mobile-img);
	}
	.sarre-homepage-hero__ai--desktop {
		display: none;
	}
	.sarre-homepage-hero__ai--mobile {
		display: contents;
	}
	/* Verlauf nur am unteren Bildrand in die türkise Textfläche. */
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-homepage-hero__overlay {
		background: linear-gradient(180deg,
			rgba(0, 122, 134, 0) 0,
			rgba(0, 122, 134, 0) calc(var(--sarre-hero-m-img) - 72px),
			rgba(0, 122, 134, 0.75) calc(var(--sarre-hero-m-img) - 16px),
			#007A86 var(--sarre-hero-m-img));
	}
	/* Pink auf Türkis wäre zu kontrastarm - Überzeile mobil in Weiß,
	   Button mit leichtem Schatten zur Abgrenzung von der Fläche. */
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-homepage-hero__eyebrow {
		color: rgba(255, 255, 255, 0.92);
	}
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-homepage-hero__meta {
		color: rgba(255, 255, 255, 0.92);
	}
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-homepage-hero__cta {
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	}
	.sarre-homepage-hero__slide--no-image .sarre-homepage-hero__overlay {
		background: linear-gradient(0deg, rgba(36, 36, 36, 0.35) 0%, rgba(36, 36, 36, 0) 40%);
	}
	/* Kompakte Textfläche: wenig Abstand zum Bild, wenig Leerraum unter dem
	   Button, Platz für die Slider-Navigation am unteren Rand. */
	.sarre-homepage-hero__content {
		max-width: none;
		width: 100%;
		padding: var(--sarre-space-lg) var(--sarre-space-md) 3.75rem;
	}
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-homepage-hero__content {
		padding-top: calc(var(--sarre-hero-m-img) + 0.875rem);
	}
	.sarre-homepage-hero__eyebrow {
		font-size: 0.75rem;
		margin-bottom: 0.25rem;
	}
	.sarre-homepage-hero__heading {
		font-size: clamp(1.75rem, 7.5vw, 2.25rem);
		line-height: 1.1;
		margin-bottom: 0.5rem;
	}
	.sarre-homepage-hero__subtitle {
		font-size: 0.875rem;
		line-height: 1.45;
		margin-bottom: 0.25rem;
	}
	.sarre-homepage-hero__meta {
		font-size: 0.8125rem;
		line-height: 1.4;
		margin-bottom: 0.875rem;
	}
	.sarre-homepage-hero__cta {
		padding: 0.7rem 1.4rem;
	}
	.sarre-homepage-hero__controls {
		bottom: 0.75rem;
	}
	.sarre-homepage-hero__pause {
		right: var(--sarre-space-sm);
		bottom: 0.75rem;
	}
	/* KI-Kennzeichnung: dezent am unteren rechten Bildrand (im Verlauf)
	   statt oben auf dem Motiv. Nur im Homepage-Hero. */
	.sarre-homepage-hero .sarre-ai-label--hero {
		top: calc(var(--sarre-hero-m-img) - 1.6rem);
		right: 0.5rem;
		bottom: auto;
		padding: 0.15em 0.45em;
		font-size: 0.625rem;
		background: rgba(0, 60, 66, 0.45);
		color: rgba(255, 255, 255, 0.9);
	}
}

/* ==========================================================================
   Korrekturpaket Produktionen/Workshops (2026-10-20)
   Neue Regeln nach Breakpoint-Standard (Mobil bis 767px, Tablet bis 980px).
   ========================================================================== */

/* -- Produktionsseite: Pressestimmen im Startseiten-Karussell -------------
   Wiederverwendet die komplette .sarre-homepage-stimmen-Komponente (Karten,
   Pfeile, Punkte, Aufklappen; JS initialisiert jede Instanz). Hier nur die
   Einbettung in den Produktions-Abschnitt: kein eigener Sektionsrahmen,
   keine vollflächige Hintergrundfläche, kein Intro (Abschnittstitel kommt
   aus der Produktionsseite). */
.sarre-homepage-stimmen--embedded {
	max-width: none;
	margin: 0;
	padding: 0;
}
.sarre-homepage-stimmen--embedded::before {
	content: none;
}

/* -- /workshops/: Ferien-Teaser im Layout der Highlight-Karte ------------- */
.sarre-workshops-page-section--ferien .sarre-workshops-grid {
	grid-template-columns: 1fr;
}
.sarre-workshops-page-card__offers {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-top: var(--sarre-space-xs);
	padding-top: var(--sarre-space-xs);
	border-top: 1px solid rgba(36, 36, 36, 0.1);
}
.sarre-workshops-page-card__offer {
	font-family: var(--sarre-font-body);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--sarre-color-body-text);
}

/* -- Erwachsenen-Workshop: Workshopzeiten je Tag (Auf einen Blick) ------- */
.sarre-erwachsenenworkshop-overview-item--wide {
	grid-column: 1 / -1;
}
.sarre-erwachsenenworkshop-times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 0.5rem var(--sarre-space-md);
	margin: 0.25rem 0 0;
}
.sarre-erwachsenenworkshop-times__row {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0.75rem;
	background: var(--sarre-color-white);
	border-radius: var(--sarre-radius);
}
.sarre-erwachsenenworkshop-times__day {
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sarre-color-primary);
}
.sarre-erwachsenenworkshop-times__time {
	margin: 0;
	font-family: var(--sarre-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--sarre-color-anthracite);
}

/* Faktenblock „Auf einen Blick“ (Runde 2): nur noch drei kurze Fakten -
   auf Tablet (768-900px) daher ebenfalls nebeneinander statt 2+1. */
@media (min-width: 768px) and (max-width: 900px) {
	.sarre-erwachsenenworkshop-overview-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -- Erwachsenen-Workshop: „Gut zu wissen“ (2026-10-20, Runde 2) ---------
   Eigener Bereich unter „Auf einen Blick“: zwei gleich breite, ruhige
   Karten (weiß, türkiser Akzent oben, wie die übrigen Sarré-Infokarten),
   gut lesbarer Fließtext. Eine einzelne Karte nutzt die volle Breite mit
   begrenzter Zeilenlänge. Ab Mobil (bis 767px) untereinander. */
.sarre-erwachsenenworkshop-gtk__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sarre-space-lg);
	align-items: start;
}
.sarre-erwachsenenworkshop-gtk__grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
	margin: 0 auto;
}
.sarre-erwachsenenworkshop-gtk__card {
	height: 100%;
	padding: var(--sarre-space-lg);
	background: var(--sarre-color-white);
	border: 1px solid rgba(36, 36, 36, 0.08);
	border-top: 3px solid var(--sarre-color-primary);
	border-radius: var(--sarre-radius);
	box-shadow: 0 1px 3px rgba(43, 46, 51, 0.08);
	box-sizing: border-box;
}
.sarre-erwachsenenworkshop-gtk__heading {
	margin: 0 0 var(--sarre-space-sm);
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--sarre-color-anthracite);
}
.sarre-erwachsenenworkshop-gtk__text {
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--sarre-color-body-text);
	overflow-wrap: break-word;
}
.sarre-erwachsenenworkshop-gtk__text p {
	margin: 0 0 0.85em;
	padding: 0;
}
.sarre-erwachsenenworkshop-gtk__text > :last-child {
	margin-bottom: 0;
}
.sarre-erwachsenenworkshop-gtk__text ul,
.sarre-erwachsenenworkshop-gtk__text ol {
	margin: 0 0 0.85em;
	padding-left: 1.25rem;
}
@media (max-width: 767px) {
	.sarre-erwachsenenworkshop-gtk__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sarre-space-md);
	}
	.sarre-erwachsenenworkshop-gtk__card {
		padding: var(--sarre-space-md);
	}
}

/* -- Ferienworkshops: kompakte Angebotskarten ---------------------------- */
.sarre-ferien-page-workshop-card--compact {
	border-top: 4px solid var(--sarre-color-primary);
}
.sarre-ferien-page-workshop-card--compact .sarre-ferien-page-workshop-card__body {
	gap: 0.5rem;
	padding: var(--sarre-space-md);
	height: 100%;
}
.sarre-ferien-page-workshop-card__facts {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: 100%;
	margin: 0.25rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(36, 36, 36, 0.08);
}
.sarre-ferien-page-workshop-card__fact {
	display: flex;
	gap: 0.75rem;
	font-family: var(--sarre-font-body);
	font-size: 0.9375rem;
	line-height: 1.45;
}
.sarre-ferien-page-workshop-card__fact dt {
	flex: 0 0 4.25rem;
	color: var(--sarre-color-body-text);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-top: 0.1rem;
}
.sarre-ferien-page-workshop-card__fact dd {
	margin: 0;
	min-width: 0;
	color: var(--sarre-color-anthracite);
}

/* -- Ferienworkshops: Anmeldung & Informationen (Runde 2, 2026-10-20) ---
   Zwei gleich breite weiße Karten (Teilnahme & Anmeldung / Kosten &
   Zahlung) mit dezentem türkisen Akzent, darunter ein gemeinsamer
   aufklappbarer Bereich (<details>/<summary>, nativ tastaturbedienbar,
   kein JS). Mobil (bis 767px) untereinander. */
.sarre-ferien-page-info__intro {
	max-width: 640px;
	margin: var(--sarre-space-sm) auto 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--sarre-color-body-text);
}
.sarre-ferien-page-info-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sarre-space-lg);
	max-width: 960px;
	margin: 0 auto;
}
.sarre-ferien-page-info-cards--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 720px;
}
.sarre-ferien-page-info-card {
	display: flex;
	flex-direction: column;
	gap: var(--sarre-space-md);
	padding: var(--sarre-space-lg);
	background: var(--sarre-color-white);
	border: 1px solid rgba(36, 36, 36, 0.06);
	border-top: 3px solid var(--sarre-color-primary);
	border-radius: var(--sarre-radius);
	box-shadow: 0 1px 3px rgba(43, 46, 51, 0.08);
}
.sarre-ferien-page-info-card__heading {
	margin: 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--sarre-color-anthracite);
}
.sarre-ferien-page-info-card .sarre-ferien-page-info-item + .sarre-ferien-page-info-item,
.sarre-ferien-page-info-more__content .sarre-ferien-page-info-item + .sarre-ferien-page-info-item {
	padding-top: var(--sarre-space-md);
	border-top: 1px solid rgba(36, 36, 36, 0.08);
}
.sarre-ferien-page-section--info .sarre-ferien-page-info-item__label {
	margin: 0 0 0.4rem;
	font-family: var(--sarre-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sarre-color-primary);
}
.sarre-ferien-page-section--info .sarre-ferien-page-info-item__text {
	font-size: 1rem;
	line-height: 1.65;
	overflow-wrap: break-word;
}
.sarre-ferien-page-info-item--bank .sarre-ferien-page-info-item__text {
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Aufklappbarer Bereich */
.sarre-ferien-page-info-more {
	max-width: 960px;
	margin: var(--sarre-space-lg) auto 0;
	background: var(--sarre-color-white);
	border: 1px solid rgba(36, 36, 36, 0.08);
	border-radius: var(--sarre-radius);
}
.sarre-ferien-page-info-more__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sarre-space-sm);
	padding: var(--sarre-space-md) var(--sarre-space-lg);
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--sarre-color-anthracite);
	cursor: pointer;
	list-style: none;
}
.sarre-ferien-page-info-more__summary::-webkit-details-marker {
	display: none;
}
.sarre-ferien-page-info-more__summary::after {
	content: '';
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--sarre-color-primary);
	border-bottom: 2px solid var(--sarre-color-primary);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}
.sarre-ferien-page-info-more[open] > .sarre-ferien-page-info-more__summary::after {
	transform: rotate(-135deg) translateY(-2px);
}
.sarre-ferien-page-info-more__summary:hover {
	color: var(--sarre-color-primary);
}
.sarre-ferien-page-info-more__summary:focus-visible {
	outline: 2px solid var(--sarre-color-primary);
	outline-offset: 2px;
}
.sarre-ferien-page-info-more__label-open,
.sarre-ferien-page-info-more[open] .sarre-ferien-page-info-more__label-closed {
	display: none;
}
.sarre-ferien-page-info-more[open] .sarre-ferien-page-info-more__label-open {
	display: inline;
}
.sarre-ferien-page-info-more__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sarre-space-md);
	padding: 0 var(--sarre-space-lg) var(--sarre-space-lg);
	border-top: 1px solid rgba(36, 36, 36, 0.08);
	padding-top: var(--sarre-space-md);
}
@media (prefers-reduced-motion: reduce) {
	.sarre-ferien-page-info-more__summary::after {
		transition: none;
	}
}
@media (max-width: 767px) {
	.sarre-ferien-page-info-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sarre-space-md);
	}
	.sarre-ferien-page-info-card {
		padding: var(--sarre-space-md);
	}
	.sarre-ferien-page-info-more__summary {
		padding: var(--sarre-space-sm) var(--sarre-space-md);
	}
	.sarre-ferien-page-info-more__content {
		padding: var(--sarre-space-sm) var(--sarre-space-md) var(--sarre-space-md);
	}
}

/* ==========================================================================
   Terminkarten /termine/ ohne Vorschaubild (2026-10-21, Owner)
   Nur .sarre-termine-card (ausschließlich in sarre_core_render_termine_page_
   card() verwendet). Desktop/Tablet: Datum links | Typ, Titel, Ort |
   Button rechts. Mobil (bis 767px): Datum links, Inhalt rechts, Button
   darunter. Die geteilten .sarre-event-card-Regeln (Produktionsseiten,
   Startseite) bleiben unverändert.
   ========================================================================== */
.sarre-termine-list .sarre-termine-card {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	align-items: center;
	gap: 0 var(--sarre-space-md);
	padding: var(--sarre-space-md) 0;
}
.sarre-termine-list .sarre-termine-card .sarre-event-card__date {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	min-width: 0;
	padding-left: 0.75rem;
	border-left: 3px solid var(--sarre-color-primary);
}
.sarre-termine-list .sarre-termine-card .sarre-event-card__date-badge {
	align-items: baseline;
	gap: 0.35em;
}
.sarre-termine-list .sarre-termine-card .sarre-event-card__day {
	font-size: 1.5rem;
}
.sarre-termine-list .sarre-termine-card .sarre-event-card__date-text {
	line-height: 1.35;
}
.sarre-termine-list .sarre-termine-card .sarre-event-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.2rem var(--sarre-space-md);
}
.sarre-termine-list .sarre-termine-card .sarre-termine-card__type,
.sarre-termine-list .sarre-termine-card .sarre-termine-card__title,
.sarre-termine-list .sarre-termine-card .sarre-event-card__venue {
	grid-column: 1;
}
.sarre-termine-list .sarre-termine-card .sarre-termine-card__title {
	font-size: 1.25rem;
}
.sarre-termine-list .sarre-termine-card .sarre-event-card__venue {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--sarre-color-body-text);
}
.sarre-termine-list .sarre-termine-card .sarre-termine-card__cta {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	margin-left: 0;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.sarre-termine-list .sarre-termine-card {
		grid-template-columns: 5.25rem minmax(0, 1fr);
		align-items: start;
		gap: 0 var(--sarre-space-sm);
		padding: var(--sarre-space-sm) 0;
	}
	.sarre-termine-list .sarre-termine-card .sarre-event-card__date {
		padding-left: 0.5rem;
	}
	.sarre-termine-list .sarre-termine-card .sarre-event-card__date-badge {
		flex-wrap: wrap;
		column-gap: 0.3em;
		row-gap: 0;
	}
	.sarre-termine-list .sarre-termine-card .sarre-event-card__day {
		font-size: 1.25rem;
	}
	.sarre-termine-list .sarre-termine-card .sarre-event-card__body {
		grid-template-columns: minmax(0, 1fr);
	}
	.sarre-termine-list .sarre-termine-card .sarre-termine-card__title {
		font-size: 1.125rem;
	}
	.sarre-termine-list .sarre-termine-card .sarre-termine-card__cta {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-top: 0.5rem;
		white-space: normal;
	}
}

/* ==========================================================================
   Kompakte mobile Heros (2026-10-21, Owner) - nur bis 767px.
   Betrifft: Produktionsübersicht, Workshopübersicht, Termine, Team,
   Ferienworkshops, Erwachsenen-Workshop (gemeinsames Shortcode-Hero-Muster)
   sowie den Divi-Hero der Produktionsdetailseiten (nur body.single-sarre_
   production). Startseiten-Hero und alle anderen Heros unverändert;
   Desktop/Tablet ab 768px unverändert.
   Statt 560-700px Mindesthöhe mit 130px Abstand oben: Höhe ca. halbe
   Bildschirmhöhe (am Inhalt orientiert, wächst bei langen Texten mit),
   Text unten über einem dezenten türkisen Verlauf (Lesbarkeit), oberer
   Bildteil bleibt frei sichtbar; Bildausschnitt mittig.
   ========================================================================== */

/* Teamübersicht: Divis `.entry-content ul { list-style-type: disc }` ist
   spezifischer als `.sarre-team-grid { list-style: none }` und erzeugte
   Aufzählungspunkte neben den Teamkarten. Direkt an den Listeneinträgen
   zurückgesetzt - Kartenlayout unverändert. */
.sarre-team-grid > li {
	list-style: none;
}

@media (max-width: 767px) {
	.sarre-productions-page-hero,
	.sarre-workshops-page-hero,
	.sarre-termine-page-hero,
	.sarre-team-page-hero,
	.sarre-ferien-page-hero,
	.sarre-erwachsenenworkshop-hero {
		min-height: clamp(300px, 52vh, 440px);
		align-items: flex-end;
		background-position: center center;
	}
	.sarre-productions-page-hero::before,
	.sarre-workshops-page-hero::before,
	.sarre-termine-page-hero::before,
	.sarre-team-page-hero::before,
	.sarre-ferien-page-hero::before,
	.sarre-erwachsenenworkshop-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(180deg,
			rgba(0, 122, 134, 0) 0%,
			rgba(0, 122, 134, 0.35) 40%,
			rgba(0, 105, 116, 0.88) 100%);
	}
	.sarre-productions-page-hero__row,
	.sarre-workshops-page-hero__row,
	.sarre-termine-page-hero__row,
	.sarre-team-page-hero__row,
	.sarre-ferien-page-hero__row,
	.sarre-erwachsenenworkshop-hero__row {
		width: 100%;
		margin-top: 0;
		padding: var(--sarre-space-lg) var(--sarre-space-md) var(--sarre-space-lg);
	}
	.sarre-productions-page-hero__eyebrow,
	.sarre-workshops-page-hero__eyebrow,
	.sarre-termine-page-hero__eyebrow,
	.sarre-team-page-hero__eyebrow,
	.sarre-ferien-page-hero__eyebrow,
	.sarre-erwachsenenworkshop-hero__eyebrow {
		font-size: 0.8125rem;
		margin-bottom: 0.375rem;
	}
	.sarre-productions-page-hero__heading,
	.sarre-workshops-page-hero__heading,
	.sarre-termine-page-hero__heading,
	.sarre-team-page-hero__heading,
	.sarre-ferien-page-hero__heading,
	.sarre-erwachsenenworkshop-hero__heading {
		font-size: 32px;
		margin-bottom: 0.5rem;
	}
	.sarre-productions-page-hero__intro,
	.sarre-workshops-page-hero__intro,
	.sarre-termine-page-hero__intro,
	.sarre-team-page-hero__intro,
	.sarre-ferien-page-hero__intro,
	.sarre-erwachsenenworkshop-hero__intro {
		font-size: 1rem;
		line-height: 1.5;
		margin-bottom: 0;
	}
	.sarre-erwachsenenworkshop-hero__intro {
		margin-bottom: var(--sarre-space-sm);
	}
	/* Überzeile mobil in Weiß (Pink auf dem türkisen Verlauf zu kontrastarm),
	   wie beim Startseiten-Hero. */
	.sarre-productions-page-hero__eyebrow,
	.sarre-workshops-page-hero__eyebrow,
	.sarre-ferien-page-hero__eyebrow,
	.sarre-erwachsenenworkshop-hero__eyebrow {
		color: rgba(255, 255, 255, 0.92);
		opacity: 1;
	}
	.sarre-erwachsenenworkshop-hero__meta {
		gap: 0.35rem 1rem;
		margin-bottom: var(--sarre-space-sm);
	}
	.sarre-erwachsenenworkshop-hero__meta-item {
		font-size: 0.875rem;
	}

	/* Produktionsdetailseite (Divi-Theme-Builder-Abschnitt). Divi schreibt
	   seine Werte mit `.et-db #et-boc .et-l …` (teils !important) - hier mit
	   höherer Spezifität und nur auf Produktionsseiten überschrieben.
	   2026-11-05 (Owner, Runde 2 „kompakter Hero“): Divis Flex-Abstände
	   (Abschnitt 60px, Spalte 30px, Infozeile 40px) mobil stark verkleinert,
	   Infozeile nebeneinander statt drei Zeilen, doppelte Kategorie (gleiche
	   Quelle wie die Überzeile) in der Infozeile ausgeblendet, horizontaler
	   Türkis-Verlauf der Divi-Vorlage mobil ausgeblendet (nur der dezente
	   Verlauf unten bleibt). Bildposition weiter mittig bzw. per ACF-Feld
	   „Hero-Bildausschnitt – Smartphone“ (media-helpers.php, höhere
	   Spezifität). Tablet/Desktop unverändert. */
	.single-sarre_production.et-db #et-boc .et-l .et_pb_section_0_tb_body {
		min-height: clamp(300px, 50vh, 420px);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 0.875rem;
		padding-top: var(--sarre-space-md);
		padding-bottom: var(--sarre-space-md);
		background-position: center center !important;
		background-size: 0 0, cover !important;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_section_0_tb_body::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(180deg,
			rgba(0, 105, 116, 0) 0%,
			rgba(0, 105, 116, 0) 12%,
			rgba(0, 105, 116, 0.5) 42%,
			rgba(0, 96, 106, 0.82) 100%);
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_row_0_tb_body.et_pb_row {
		margin-top: 0 !important;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_column_0_tb_body {
		gap: 0.5rem;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_row_1_tb_body.et_pb_row {
		margin-top: 0 !important;
		gap: 0.35rem 1.25rem;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_row_1_tb_body > .et_pb_column {
		width: auto;
		flex: 0 0 auto;
		gap: 0.4rem;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_row_1_tb_body > .et_pb_column_1_tb_body {
		display: none;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_row_1_tb_body .et_pb_text_inner {
		font-size: 13px;
		line-height: 1.4;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_text_0_tb_body .et_pb_text_inner {
		color: rgba(255, 255, 255, 0.92) !important;
		font-size: 13px;
		line-height: 1.3;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_text_1_tb_body .et_pb_text_inner {
		font-size: clamp(26px, 7.6vw, 32px);
		line-height: 1.1;
	}
	.single-sarre_production.et-db #et-boc .et-l .et_pb_text_2_tb_body .et_pb_text_inner {
		font-size: 15px;
		line-height: 1.45;
	}
	body.single-sarre_production.et-db #page-container #et-boc .et-l .et_pb_button_0_tb_body {
		font-size: 16px !important;
	}
	/* Einheitlicher Seitenabstand 18px im Hero (Divi-Zeilen: 7 %). */
	.single-sarre_production.et-db #et-boc .et-l .et_pb_section_0_tb_body > .et_pb_row {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	/* Inhalt unter dem Hero ([sarre_production_body], 2026-11-05): Divis
	   Theme-Builder-Zeile ist mobil nur 80 % breit, darin 16px Innenabstand
	   und bei Listen-Komponenten Divis `.et-l--body ul`-Einzug (1em) → nur
	   ~254–268px. Zeile nur hier auf volle Breite, 18px Seitenabstand,
	   Komponenten-Listen (Klassen „sarre-…“) ohne Divi-Einzug/-Punkte;
	   Listen im redaktionellen Text behalten ihren Einzug. */
	.single-sarre_production.et-db #et-boc .et-l .et_pb_row:has(> .et_pb_column .sarre-production-body) {
		width: 100% !important;
		max-width: 100% !important;
	}
	.single-sarre_production .sarre-production-body {
		padding-left: 18px;
		padding-right: 18px;
	}
	.single-sarre_production .sarre-production-body ul[class^="sarre-"] {
		padding-left: 0;
		list-style: none;
	}
}
@media (max-width: 700px) {
	/* „Über die Produktion“ ist hier gestapelt (Bild oben) - Text ohne den
	   seitlichen 40px-Innenabstand der Zweispalten-Ansicht, bündig mit dem Bild. */
	.single-sarre_production .sarre-production-about__content {
		padding: var(--sarre-space-md) 0 0;
	}
}

/* ==========================================================================
   Große Monitore / Ultrawide — nur Startseite + Navigation (2026-10-21, Owner)
   Greift AUSSCHLIESSLICH ab 2000px Bildschirmbreite; bis einschließlich
   1920px ändert sich nichts (im Test pixelgenau verglichen). Die globale
   Variable --sarre-content-max-width bleibt bewusst unverändert.
   1. Navigation: Maximalbreite 1440px (vorher 1360px).
   2. Hero als „Bühne“: Das Hero-Bild steht scharf und mittig in seiner
      Originalbreite (--sarre-hero-img-w aus shortcodes.php, höchstens
      2000px) – nie vergrößert, Schriftzüge und Motive vollständig.
      Links und rechts setzt sich DASSELBE Bild gespiegelt, unscharf und
      leicht abgedunkelt fort. Durch die Spiegelung stimmen Farben und
      Helligkeit an der Bildkante überein; die Kante selbst läuft über
      eine schmale Maske weich aus – keine sichtbaren Seitenflächen.
      Hero-Text steht an der 1440px-Inhaltskante, der Textverlauf wandert mit.
   3. Drei Einstiegskacheln: bis 1440px breit und etwas höher.
   Ebenen im Slide (unten → oben):
     Slide::before / ::after  = gespiegelte, unscharfe Fortsetzung links/rechts
     Overlay::before          = scharfes Bild (Bühne)
     Overlay::after           = dunkler Textverlauf
     Inhalt / KI-Kennzeichnung
   ========================================================================== */
@media (min-width: 2000px) {
	/* -- 1. Navigation -- */
	#main-header .container.et_menu_container {
		max-width: 1440px;
	}

	/* -- 2. Hero-Bühne -- */
	.sarre-homepage-hero,
	.sarre-homepage-hero__slides {
		min-height: 740px;
	}
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) {
		--sarre-hero-stage-w: min(100vw, var(--sarre-hero-img-w, 1983px), 2000px);
		background-size: 0 0; /* eigenes Bild ausblenden – die Ebenen unten übernehmen es */
	}

	/* Gespiegelte, unscharfe Fortsetzung: nur der äußere Bildrand wird
	   gespiegelt und in die Breite gezogen (3×), damit kein Motiv oder
	   Schriftzug als „Geisterbild“ in der Seitenfläche erscheint. Jede Seite
	   reicht 160px unter das scharfe Bild, dessen Kante dort weich ausläuft. */
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image)::before,
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image)::after {
		content: '';
		position: absolute;
		top: -60px;
		bottom: -60px;
		z-index: 0;
		width: calc((100% - var(--sarre-hero-stage-w)) / 2 + 220px);
		pointer-events: none;
		background-image: inherit;
		background-repeat: no-repeat;
		background-size: calc(var(--sarre-hero-stage-w) * 3) 100%;
		transform: scaleX(-1);
		filter: blur(28px) brightness(0.8);
	}
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image)::before {
		left: -60px;
		background-position: left center;
	}
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image)::after {
		right: -60px;
		background-position: right center;
	}

	/* Scharfes Bild in Originalgröße, mittig, Kanten weich ausgeblendet. */
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-homepage-hero__overlay {
		background: none;
		background-image: inherit;
		background-size: 0 0;
	}
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-homepage-hero__overlay::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		z-index: -1;
		width: var(--sarre-hero-stage-w);
		transform: translateX(-50%);
		background-image: inherit;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
	}
	/* Dunkler Textverlauf: dieselben Werte wie ab 701px, nur um den
	   Versatz des Textes nach rechts verschoben. */
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-homepage-hero__overlay::after {
		content: '';
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, rgba(36, 36, 36, 0.6) 0px, rgba(36, 36, 36, 0.58) calc(50% - 130px), rgba(36, 36, 36, 0.18) calc(50% + 50px), rgba(36, 36, 36, 0) calc(50% + 230px)),
			linear-gradient(0deg, rgba(36, 36, 36, 0.25) 0%, rgba(36, 36, 36, 0) 14%);
	}
	.sarre-homepage-hero__slide--no-image .sarre-homepage-hero__overlay {
		background:
			linear-gradient(90deg, rgba(36, 36, 36, 0.6) 0px, rgba(36, 36, 36, 0.58) calc(50% - 130px), rgba(36, 36, 36, 0.18) calc(50% + 50px), rgba(36, 36, 36, 0) calc(50% + 230px)),
			linear-gradient(0deg, rgba(36, 36, 36, 0.25) 0%, rgba(36, 36, 36, 0) 14%);
	}

	/* Text an der 1440px-Inhaltskante: zusätzlicher Außenabstand, das
	   bestehende padding-left (130px) bleibt → Textkante = (Breite − 1440) / 2 + 40px. */
	.sarre-homepage-hero__content {
		margin-left: calc(50% - 810px);
	}
	/* KI-Kennzeichnung an der rechten Bildkante, Pause-Taste an der
	   Inhaltskante – statt am äußersten Bildschirmrand. */
	.sarre-homepage-hero__slide:not(.sarre-homepage-hero__slide--no-image) .sarre-ai-label--hero {
		right: calc((100% - var(--sarre-hero-stage-w)) / 2 + var(--sarre-space-lg));
	}
	.sarre-homepage-hero__pause {
		right: calc(50% - 720px + var(--sarre-space-md));
	}

	/* -- 3. Drei Einstiegskacheln -- */
	.et-l .et_pb_row.sarre-entry-tiles {
		max-width: 1440px;
		gap: var(--sarre-space-md);
	}
	.sarre-entry-tiles__tile {
		min-height: clamp(330px, 6vw + 210px, 400px); /* + 2×40px Innenabstand = ca. 410–480px */
		padding: var(--sarre-space-lg);
	}
	.sarre-entry-tiles__heading {
		font-size: 2rem;
	}
}

/* ==========================================================================
   Produktions-Single — Abschnitt „Werk & Urheber“ (2026-11-04, Owner)
   Inhalt aus dem ACF-WYSIWYG-Feld `werk_urheber`. Typografie, Breite und
   Abstände kommen unverändert von .sarre-production-body__content und der
   gemeinsamen Abschnittsstruktur; hier nur: lange Links/Angaben brechen
   mobil sauber um, kein Zusatzabstand unter dem letzten Absatz.
   ========================================================================== */
.sarre-production-work-credits {
	overflow-wrap: break-word;
}
.sarre-production-work-credits > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Produktionsübersicht — Karten nur mit Untertitel (2026-11-04, Owner)
   Der Textauszug aus der Beschreibung entfällt (PHP). Damit die Karten bei
   unterschiedlich langen Untertiteln ausgewogen bleiben: Textbereich füllt
   die Kartenhöhe, „Mehr erfahren“ sitzt in jeder Reihe auf gleicher Höhe
   am unteren Rand; Untertitel mit ruhigem Zeilenabstand, mobil umbrechend.
   Bild, Badge, Kategorie und Titel unverändert.
   ========================================================================== */
.sarre-productions-page-card__body {
	flex: 1 1 auto;
}
.sarre-productions-page-card__subtitle {
	line-height: 1.6;
	overflow-wrap: break-word;
}
.sarre-productions-page-card__cta {
	margin-top: auto;
	padding-top: var(--sarre-space-xs);
}

/* ==========================================================================
   Startseite — Videobereich im Teaser-Modus (2026-11-04, Owner)
   Nur mit `.sarre-homepage-imagefilm__player--teaser` (Website-
   Einstellungen → „Startseite – Imagefilm / Teaser“ → Modus „Teaser“).
   Der Imagefilm-Modus (YouTube) bleibt exakt wie bisher.
   - Bereich weiterhin 16:9 (Smartphone bis 767px: 4:5, damit der
     Hochkant-Teaser groß genug bleibt).
   - Video mittig in voller Höhe, 9:16, `contain` → vollständig, ohne
     Verzerrung oder Beschnitt.
   - Seitenflächen: unscharfe, leicht abgedunkelte Vergrößerung desselben
     Bildes (vor dem Start Vorschaubild, beim Abspielen live per Canvas).
   ========================================================================== */
.sarre-homepage-imagefilm__player--teaser::before {
	display: none;
}
.sarre-homepage-imagefilm__ambient {
	position: absolute;
	inset: -48px;
	z-index: 0;
	background-color: var(--sarre-color-anthracite);
	background-image: var(--sarre-imagefilm-poster, none);
	background-size: cover;
	background-position: center;
	filter: blur(32px) brightness(0.62) saturate(1.1);
	transform: translateZ(0);
	pointer-events: none;
}
.sarre-homepage-imagefilm__ambient-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
}
.sarre-homepage-imagefilm__player--teaser.has-ambient-frame .sarre-homepage-imagefilm__ambient-canvas {
	opacity: 1;
}
.sarre-homepage-imagefilm__video {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	height: 100%;
	width: auto;
	max-width: 100%;
	aspect-ratio: 9 / 16;
	transform: translateX(-50%);
	object-fit: contain;
	background: transparent;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
}
.sarre-homepage-imagefilm__player--teaser .sarre-homepage-imagefilm__play {
	z-index: 2;
}
.sarre-homepage-imagefilm__player--teaser.is-playing .sarre-homepage-imagefilm__play {
	display: none;
}
@media (max-width: 767px) {
	.sarre-homepage-imagefilm__player--teaser {
		aspect-ratio: 4 / 5;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sarre-homepage-imagefilm__ambient-canvas {
		transition: none;
	}
}

/* ==========================================================================
   Akademie-Seite — Abschnitt „Wirken. Wachsen. Werden.“ (2026-11-05, Owner)
   Zwischen „Für wen?“ (Türkis) und „Unser Team“ (Weiß). Heller Hintergrund
   wie die übrigen hellgrauen Akademie-Abschnitte; Kopf links mit Lead,
   darunter vier redaktionelle Blöcke im 2 × 2-Raster – keine Karten,
   sondern dieselbe ruhige Sprache wie „Mehr als Unterricht“ (Haarlinie,
   Serif-Nummer in Türkis, Titel in Poppins). Mobil (≤ 700px) einspaltig.
   Bestehende Abschnitte unverändert. Liste/Blöcke mit .sarre-akademie-page
   gescopet, damit Divis .entry-content-ol-Stil (Ziffern, Einzug) nicht greift.
   ========================================================================== */
.sarre-akademie-section--wirkung {
	background: var(--sarre-color-light);
}
.sarre-akademie-wirkung__head {
	max-width: 760px;
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.sarre-akademie-wirkung__head .sarre-akademie-lead {
	max-width: 62ch;
}
.sarre-akademie-page .sarre-akademie-wirkung {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 6vw, 5.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sarre-akademie-page .sarre-akademie-wirkung__item {
	margin: 0;
	padding: var(--sarre-space-md) 0 0;
	border-top: 1px solid rgba(36, 36, 36, 0.14);
	list-style: none;
}
.sarre-akademie-wirkung__num {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	color: var(--sarre-color-primary);
}
.sarre-akademie-wirkung__title {
	margin: 0.35rem 0 0.75rem;
	padding: 0;
	font-family: var(--sarre-font-heading);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--sarre-color-anthracite);
}
.sarre-akademie-wirkung__text {
	margin: 0;
	padding: 0;
	line-height: 1.65;
}
@media (max-width: 700px) {
	.sarre-akademie-page .sarre-akademie-wirkung {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.sarre-akademie-wirkung__title {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   Mobil (bis 767px): Alumni-Übersicht und Produktionsübersicht breiter
   (2026-11-05, Owner)
   Ursache der nur ~252px breiten Inhalte bei 390px: Der Divi-Container
   (Alumni: #main-content .container; Produktionen: Theme-Builder-Zeile)
   ist mobil nur 80 % breit, darin kommen noch 24px Innenabstand je Seite
   hinzu; bei Alumni zusätzlich Divis Listen-Einzug (.entry-content ul) und
   ein zweispaltiges Raster. Korrektur NUR für Container, die genau diese
   beiden Übersichten enthalten (:has), nur bis 767px – andere Seiten,
   Tablet und Desktop bleiben unverändert. Seitenabstand 18px.
   ========================================================================== */
/* Alumni-Übersicht, alle Breiten (2026-11-05, Owner): Divis Listen-Einzug
   und -Punkte (#left-area ul, ID-Spezifität) an den Karten entfernen.
   Raster/Spalten unverändert. */
#left-area .sarre-alumni-page .sarre-alumni-grid {
	padding-left: 0;
	list-style: none;
}
@media (max-width: 767px) {
	/* -- Alumni-Übersicht /alumni/ -- */
	body.sarre-shortcode-page #main-content .container:has(.sarre-alumni-page) {
		width: 100%;
		max-width: 100%;
	}
	.sarre-alumni-page {
		padding-left: 18px;
		padding-right: 18px;
	}
	#left-area .sarre-alumni-page .sarre-alumni-grid {
		gap: 2rem;
	}

	/* -- Produktionsübersicht /produktionen/ -- */
	.et-l .et_pb_row:has(.sarre-productions-page-section) {
		width: 100%;
		max-width: 100%;
	}
	.sarre-productions-page-section {
		padding-left: 18px;
		padding-right: 18px;
	}
}
@media (max-width: 560px) {
	.sarre-alumni-page .sarre-alumni-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Mobile Inhaltsbreiten & Abstände (Mobile-Audit, 2026-11-05)
   Ursache: Divi-Zeilen sind mobil nur 80 % breit (`.et_pb_row` width
   var(--content-width)), dazu kamen 24px Innenabstand der Sarré-Komponenten
   und Divis Listen-Einzug (`.entry-content ul` / `.et-l--body ul`:
   padding-left 1em). Ergebnis bei 390px: Textspalten 190-252px.
   Lösung (nur bis 767px, Desktop/Tablet unverändert, kein globaler
   Divi-Container-Eingriff): nur die Zeilen, die eine der unten genannten
   Sarré-Komponenten enthalten, werden per :has() auf volle Breite gesetzt;
   die Komponenten bekommen einheitlich 18px Seitenabstand.
   Bewusst NICHT betroffen: Startseiten-Hero, Einstiegskacheln, Produktions-
   Teaser der Startseite, Alumni-Übersicht, Produktionsübersicht,
   Produktionsdetailseiten (eigene Regeln weiter oben).
   ========================================================================== */
@media (max-width: 767px) {
	/* -- Startseite: Zeilen volle Breite, 18px Rand an der Zeile -- */
	.home .et-l .et_pb_row:has(> .et_pb_column :is(.sarre-homepage-imagefilm, .sarre-homepage-events, .sarre-homepage-aktuelles, .sarre-homepage-stimmen, .sarre-homepage-support, .sarre-connect-header, .sarre-homepage-connect)),
	.home .et-l .et_pb_row.sarre-homepage-connect {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
		box-sizing: border-box;
	}
	.home .sarre-homepage-aktuelles,
	.home .sarre-homepage-stimmen,
	.home .sarre-homepage-support {
		padding-left: 0;
		padding-right: 0;
	}
	.sarre-homepage-stimmen__card {
		padding: 24px 20px 18px;
	}
	.sarre-newsletter-card {
		padding: 24px 20px;
	}

	/* -- Unterseiten: Zeilen mit Sarré-Inhaltsbereichen volle Breite -- */
	.et-l .et_pb_row:has(> .et_pb_column :is(.sarre-team-page-section, .sarre-workshops-page-section, .sarre-ferien-page-section, .sarre-erwachsenenworkshop-section, .sarre-aktuelles-intro, .sarre-aktuelles-list, .sarre-aktuelles-single, .sarre-aktuelles-more, .sarre-alumni-portrait, .sarre-team-page-newsletter, .sarre-workshops-page-newsletter, .sarre-termine-page-newsletter, .sarre-aktuelles-newsletter)),
	body.page .et-l .et_pb_row:has(> .et_pb_column .sarre-production-body) {
		width: 100% !important;
		max-width: 100% !important;
	}
	.sarre-team-page-section,
	.sarre-workshops-page-section,
	.sarre-ferien-page-section,
	.sarre-erwachsenenworkshop-section,
	.sarre-aktuelles-intro,
	.sarre-aktuelles-list,
	.sarre-aktuelles-single,
	.sarre-aktuelles-more,
	.sarre-team-page-newsletter,
	.sarre-workshops-page-newsletter,
	.sarre-termine-page-newsletter,
	.sarre-aktuelles-newsletter,
	body.page .sarre-production-body,
	.sarre-akademie-section__inner.sarre-alumni-portrait,
	.sarre-alumni-portrait {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Team: Pastell-Abschnitt (volle Breite) links/rechts gleich, statt
	   88px links / 24px rechts. */
	.sarre-team-page-section.sarre-team-page-section--pastel {
		padding-left: 0;
		padding-right: 0;
	}
	.sarre-team-page-section.sarre-team-page-section--pastel > .sarre-team-page-section__header,
	.sarre-team-page-section.sarre-team-page-section--pastel > .sarre-team-grid {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Team-Karten bleiben zweispaltig; lange Wörter (z. B.
	   „Öffentlichkeitsarbeit") werden getrennt statt über den Kartenrand
	   zu laufen. */
	.sarre-team-grid .sarre-team-page-card__areas,
	.sarre-team-grid .sarre-person-card__name {
		hyphens: auto;
		overflow-wrap: break-word;
	}

	/* -- Karten-Innenabstände -- */
	.sarre-ferien-page-week-item,
	.sarre-aktuelles-card__body {
		padding: 18px;
	}
	.sarre-ferien-page-info-card,
	.sarre-erwachsenenworkshop-gtk__card {
		padding: 20px;
	}

	/* -- Sarré-Kartenraster/-listen: Divi-Listenpunkte und -Einzug weg.
	   Nur Listen MIT Sarré-Klasse; Fließtext-Listen (ohne Klasse) im
	   Redaktionstext bleiben unverändert. -- */
	:is(.sarre-homepage-events, .sarre-homepage-aktuelles, .sarre-homepage-stimmen, .sarre-team-page-section, .sarre-workshops-page-section, .sarre-ferien-page-section, .sarre-erwachsenenworkshop-section, .sarre-aktuelles-list, .sarre-aktuelles-single, .sarre-aktuelles-more, .sarre-akademie-page, .sarre-alumni-portrait) ul[class*="sarre-"],
	#left-area :is(.sarre-alumni-portrait, .sarre-akademie-page) ul[class*="sarre-"] {
		padding-left: 0;
		list-style: none;
	}

	/* -- Interner Bereich: Container volle Breite mit 18px Rand -- */
	body #main-content .container:has(.sarre-intern) {
		width: 100%;
		max-width: 100%;
		padding-left: 18px;
		padding-right: 18px;
		box-sizing: border-box;
	}

	/* -- Abschnittsabstände: 64px/56px -> 48px oben und unten -- */
	.sarre-akademie-section,
	.sarre-spenden-section {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}
@media (max-width: 700px) {
	/* Ausnahme: Akademie-Alumni-Karussell behält seinen vorgesehenen
	   Innenabstand (Gegenstück zum negativen Rand). scroll-padding sorgt
	   dafür, dass das Einrasten (scroll-snap) die erste Karte nicht an den
	   Bildschirmrand schiebt (vorher Text bei 0px). */
	#left-area .sarre-akademie-page ul.sarre-alumni-grid--featured,
	.sarre-akademie-page ul.sarre-alumni-grid.sarre-alumni-grid--featured {
		padding-left: var(--sarre-space-md);
		scroll-padding-inline: var(--sarre-space-md);
	}
}
@media (max-width: 560px) {
	/* Alumni-Porträt „Weitere Alumni": einspaltig statt 2 x 111px */
	#left-area .sarre-alumni-more .sarre-alumni-grid,
	.sarre-alumni-more .sarre-alumni-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Workshops – Motto/Thema als Subheadline unter dem Titel (2026-11-06)
   Quelle: bestehendes ACF-Feld `workshop_theme`. Nur ausgegeben, wenn
   gefüllt (sonst kein Element, kein Leerraum). Ferien-Workshop-Karten und
   „Aktueller Workshop“ der Erwachsenen-Seite; übrige Layouts unverändert.
   ========================================================================== */
.sarre-ferien-page-workshop-card__subheadline,
.sarre-erwachsenenworkshop-current__subheadline {
	margin: 0;
	padding: 0;
	font-family: var(--sarre-font-body);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--sarre-color-body-text);
	overflow-wrap: break-word;
}
.sarre-ferien-page-workshop-card__subheadline {
	margin-bottom: 0.35rem;
}
.sarre-erwachsenenworkshop-current__subheadline {
	margin: calc(-1 * var(--sarre-space-xs)) 0 var(--sarre-space-sm);
	font-size: 1.0625rem;
}
@media (max-width: 480px) {
	.sarre-ferien-page-workshop-card__subheadline {
		font-size: 0.9375rem;
	}
}