/* ============================================================================
 * SBNE page-builder modules (briefing Part 6 + Part 5 feed blocks).
 * Consumes the :root tokens from style.css. Breakpoints per briefing Global Rule 10:
 * Desktop >=1250px · Tablet 768–1250px · Mobile <768px.
 * Home-page section CSS lives in main.css and is untouched by this file.
 * ==========================================================================*/

/* ---- Shared layout ---- */
/* Per-module Figma spacing: each module keeps its own vertical padding, modules
   stack flush (coloured bands touch, no white gaps between them). */
.sbne-modules { display: block; }
/* "Vertikaler Abstand" (white-bg modules): drop the top and/or bottom padding so
   two consecutive white modules keep ONE gap instead of doubled padding. Targets
   the section AND any inner wrapper that carries the padding. */
.sbne-mod--no-top > *,
.sbne-mod--no-top > * > [class*="__inner"] { padding-top: 0 !important; }
.sbne-mod--no-bottom > *,
.sbne-mod--no-bottom > * > [class*="__inner"] { padding-bottom: 0 !important; }
/* Zeroing the padding isn't enough for a WYSIWYG module: the content's leading/trailing
   block margin (e.g. the last <p>'s margin-bottom, ~1em) collapses out past the removed
   padding and reopens the gap. Drop it so the text editor sits truly flush and the gaps
   above/below a "kein Abstand" module stay equal. */
.sbne-mod--no-top .texteditor__body > :first-child { margin-top: 0; }
.sbne-mod--no-bottom .texteditor__body > :last-child { margin-bottom: 0; }
.sbne-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: clamp(20px, 5.8333vw, 112px);
}
.mod { padding-block: var(--pad-section-y); }   /* Figma section pad 112 @1920 (was 100) */
.mod__head { margin-bottom: clamp(28px, 3vw, 56px); max-width: 900px; }
.mod__headline {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	color: var(--color-black);
	overflow-wrap: anywhere;
}
.mod__intro {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	margin-top: 16px;
	overflow-wrap: anywhere;
}
.mod__intro > *:first-child { margin-top: 0; }
.mod__cta { margin-top: 28px; }

/* Rich-text (WYSIWYG) reset — used where an ACF wysiwyg value is dropped into a
   text slot that the design treats as a single paragraph (e.g. .section-intro).
   Keeps the surrounding flex gap correct by zeroing the outer margins. */
.mod-richtext > *:first-child { margin-top: 0; }
.mod-richtext > *:last-child { margin-bottom: 0; }
.mod-richtext > * { margin-block: 0; }
.mod-richtext > * + * { margin-top: 0.75em; }

/* Home-derived teaser modules: feed cards link their title (better UX than the
   static home cards), so neutralise the default link colour/underline to match
   the Figma card design. Aktuelles Teaser optional Blue background variant. */
.news-card__title a,
.project-card__title a,
.event-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover,
.news-card__title a:focus-visible { color: var(--color-orange-red); }

/* ---- Global WCAG focus (9.2.4.7) — visible frame on every interactive el ---- */
.sbne-modules a:focus-visible,
.sbne-modules button:focus-visible,
.sbne-modules input:focus-visible,
.sbne-modules textarea:focus-visible,
.sbne-modules select:focus-visible,
.mod a:focus-visible,
.mod button:focus-visible {
	outline: 3px solid var(--color-orange-red);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- Feed card (shared by teaser + overview grids) ---- */
.sbne-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2vw, 40px);
}
.sbne-card { display: flex; flex-direction: column; background: var(--color-white); min-width: 0; }
.sbne-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 501 / 302;
	background: var(--color-cyan-light);
}
.sbne-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbne-card__body { padding: clamp(16px, 1.2vw, 24px) 0; display: flex; flex-direction: column; gap: 12px; }
.sbne-card__kicker { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--color-purple-mid); }
.sbne-card__title { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.sbne-card__title a { color: inherit; text-decoration: none; }
.sbne-card__title a:hover { color: var(--color-orange-red); }
.sbne-card__excerpt { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.sbne-card__cta { align-self: flex-start; margin-top: 4px; }

/* ---- Ken Burns (Global Rule 8) — desktop hover / tap on touch ---- */
.sbne-kenburns .sbne-card__img,
.sbne-kenburns img { transition: transform .6s ease; will-change: transform; }
@media (hover: hover) and (min-width: 1250px) {
	.sbne-kenburns:hover img { transform: scale(1.06); }
}
.sbne-kenburns.is-tapped img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
	.sbne-kenburns img { transition: none; }
	.sbne-kenburns:hover img, .sbne-kenburns.is-tapped img { transform: none; }
}

/* ---- Load-more / filter controls ---- */
.sbne-loadmore-wrap { display: flex; justify-content: center; margin-top: clamp(32px, 3vw, 56px); }
.sbne-filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(24px, 2.5vw, 44px); }
.sbne-filter__btn {
	font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold);
	padding: 10px 22px; border: 2px solid var(--color-black); background: transparent; color: var(--color-black);
	cursor: pointer; transition: background .2s, color .2s;
}
.sbne-filter__btn.is-active, .sbne-filter__btn:hover { background: var(--color-black); color: var(--color-white); }

/* ============================ Standard modules ============================ */

/* Hero V1 reuses the global home `.hero` system (main.css); only the frame
   colour is overridden inline per module. Hero V2 (framed) is ported below
   from the pixel-verified Förderung `.fp-hero` (Figma 288:3522).
   The title is a WYSIWYG (ACF wraps it in <p>), so the H1 type must be applied
   to the wrapper AND its children — otherwise the global p{} font-size shrinks
   it and the fit-content card collapses. Min box per briefing M-HERO1. */
.mod-hero-v1 .hero__title,
.mod-hero-v1 .hero__title > * {
	margin: 0;
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	color: var(--color-black);
}
.mod-hero-v1 .hero__card-inner {
	box-sizing: border-box;
	min-width: min(734px, 100%);
	min-height: 252px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (max-width: 1249.98px) {
	.mod-hero-v1 .hero__card-inner { min-width: 0; min-height: 0; }
}

.hero-mod--v2 {
	background: var(--color-white);
	padding: clamp(16px, 1.6667vw, 32px) clamp(16px, 1.6667vw, 32px) 0;
}
.hero-mod--v2 .hero-mod__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1856 / 716;
	overflow: hidden;
	background: var(--color-grey-placeholder, #c4c4c4);
}
.hero-mod--v2 .hero-mod__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-mod--v2 .hero-mod__frame {
	position: absolute;
	left: clamp(24px, 5.8333vw, 112px);
	bottom: clamp(24px, 5.8333vw, 112px);
	/* Grow to fit the title (like Hero V1's .hero__card) instead of a fixed width that
	   squeezes long headlines; capped so it never overruns the image's right edge. */
	width: fit-content;
	max-width: calc(100% - clamp(24px, 5.8333vw, 112px) - clamp(16px, 1.6667vw, 32px));
	box-sizing: border-box;
	padding: clamp(16px, 1.875vw, 36px);
	box-shadow: inset 0 0 0 5px var(--hero-frame, var(--color-purple-light));
}
.hero-mod--v2 .hero-mod__box {
	box-sizing: border-box; width: 100%; background: var(--color-white);
	padding: clamp(24px, 3.3333vw, 64px);
	min-width: min(734px, 100%);   /* default box size (matches V1); reset to 0 ≤1250px so it fits content */
}
.hero-mod--v2 .hero-mod__text,
.hero-mod--v2 .hero-mod__text > * {
	margin: 0;
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	color: var(--color-black);
	/* Long German compounds (e.g. "Bildungsangebote") can't wrap on their own, so
	   they overflowed the box. Hyphenate at valid points (page is lang="de-DE") and
	   allow a hard break as a fallback, so the word wraps and the box grows to fit. */
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}
@media (max-width: 1249.98px) {
	.hero-mod--v2 .hero-mod__media { aspect-ratio: auto; min-height: clamp(400px, 40vw, 470px); }
}
@media (max-width: 767.98px) {
	.hero-mod--v2 { padding: 16px 16px 0; }
	.hero-mod--v2 .hero-mod__media { aspect-ratio: auto; min-height: clamp(440px, 120vw, 560px); }
	.hero-mod--v2 .hero-mod__frame { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 12px; }
	.hero-mod--v2 .hero-mod__box { padding: 24px; }
	/* Fluid so an ordinary long word (e.g. "Bildungsangebote") shrinks just enough to
	   sit whole on its own row instead of hyphenating — hyphens: auto then only fires
	   for a single word too long for the screen even here (e.g. "Partnerschaftsprojekt"). */
	.hero-mod--v2 .hero-mod__text,
	.hero-mod--v2 .hero-mod__text > * { font-size: clamp(22px, 7.2vw, 30px); line-height: 1.2; }
}

/* Title & Text (ported from Förderung .fp-titletext, Figma 476:1692) —
   heading flush-left, intro indented 64px, in a 976px column. */
.titletext-mod { background: var(--color-white); padding: var(--pad-section-y) var(--gutter-inner); }
.titletext-mod__inner {
	display: flex; flex-direction: column; gap: 24px;
	width: clamp(320px, 50.8333vw, 976px); max-width: 100%;
}
.titletext-mod__heading-wrap { padding-right: clamp(24px, 3.3333vw, 64px); }
.titletext-mod__intro-wrap { padding-left: clamp(24px, 3.3333vw, 64px); }
@media (max-width: 767.98px) { .titletext-mod__intro-wrap { padding-left: 0; } }

/* Bild / Text (ported from Förderung .fp-bildtext, Figma 288:3532 lila +
   387:664 white) — full-bleed row, image + text column. Selectable bg / column
   order / image orientation. */
.bildtext-mod {
	display: flex; flex-direction: row; align-items: center;
	padding: var(--pad-section-y) var(--gutter-inner);
	gap: clamp(32px, 3.3333vw, 64px);
}
.bildtext-mod__media { flex: 0 0 auto; overflow: hidden; background: var(--color-grey-placeholder, #c4c4c4); }
.bildtext-mod__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bildtext-mod__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.bildtext-mod__heading-wrap { padding-right: clamp(24px, 3.3333vw, 64px); }
.bildtext-mod__body {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: clamp(28px, 2.5vw, 48px); padding-left: clamp(24px, 3.3333vw, 64px);
}
/* Image orientation → size + section gap (lila portrait/112, white landscape/64) */
.bildtext-mod--horizontal .bildtext-mod__media { flex-basis: clamp(320px, 43.3333vw, 832px); aspect-ratio: 832 / 624; }
.bildtext-mod--vertical .bildtext-mod__media { flex-basis: clamp(280px, 35.8333vw, 688px); aspect-ratio: 688 / 917; }
.bildtext-mod--vertical { gap: clamp(40px, 5.8333vw, 112px); }
/* Column order */
.bildtext-mod--text-left .bildtext-mod__media { order: 2; }
.bildtext-mod--text-left .bildtext-mod__text { order: 1; }
/* Background variants (btn-cta notch = section bg) */
.bildtext-mod--bg-white { background: var(--color-white); }
.bildtext-mod--bg-white .btn-cta { --btn-notch: var(--color-white); }
.bildtext-mod--bg-lila { background: var(--color-purple); }
.bildtext-mod--bg-lila .btn-cta { --btn-notch: var(--color-purple); }
.bildtext-mod--bg-blue { background: var(--color-cyan); }
.bildtext-mod--bg-blue .btn-cta { --btn-notch: var(--color-cyan); }
.bildtext-mod--bg-red { background: var(--color-orange); }
.bildtext-mod--bg-red .btn-cta { --btn-notch: var(--color-orange); }
@media (max-width: 1249.98px) {
	.bildtext-mod { flex-direction: column; align-items: stretch; gap: clamp(24px, 3vw, 40px); }
	.bildtext-mod--text-left .bildtext-mod__media,
	.bildtext-mod--text-left .bildtext-mod__text { order: 0; }
	.bildtext-mod__media { flex-basis: auto; width: 100%; }
	.bildtext-mod__heading-wrap { padding-right: 0; }
	.bildtext-mod__body { padding-left: 0; }
	/* Vertical variant: show the whole uploaded image at its own ratio, uncropped
	   (the fixed portrait frame would otherwise cover-crop it). */
	.bildtext-mod--vertical .bildtext-mod__media { aspect-ratio: auto; }
	.bildtext-mod--vertical .bildtext-mod__img { height: auto; }
}
/* Tablet — vertical Bild/Text: keep the desktop arrangement instead of stacking to
   one column. The UPRIGHT portrait image sits beside a single text column that stacks
   title -> text -> button (exactly as on desktop); only the image is sized down to a
   tablet-friendly portrait width. */
@media (min-width: 768px) and (max-width: 1249.98px) {
	.bildtext-mod--vertical {
		flex-direction: row;
		align-items: flex-start;
		gap: clamp(24px, 3.3333vw, 56px);
	}
	.bildtext-mod--vertical .bildtext-mod__media {
		flex: 0 0 clamp(240px, 33vw, 400px);   /* portrait column, doesn't grow/shrink */
		width: auto;
		aspect-ratio: 688 / 917;               /* hold the portrait (vertical) frame */
	}
	.bildtext-mod--vertical .bildtext-mod__img { height: 100%; }
	/* Preserve column order for the text-left variant (image right, text left). */
	.bildtext-mod--vertical.bildtext-mod--text-left .bildtext-mod__media { order: 2; }
	.bildtext-mod--vertical.bildtext-mod--text-left .bildtext-mod__text { order: 1; }
}

/* Team (ported from Über uns .uu-team, Figma 406:4650) — centred header + 3-col
   grid; each card = photo with a colored-frame white profile box overlapping the
   image bottom. Frame colour from member_frame_color (Red/Lila/Blue/Green). */
.team-mod { background: var(--color-white); padding: var(--pad-section-y) var(--gutter-inner); }
.team-mod__inner {
	width: 100%; max-width: var(--site-max); margin-inline: auto;
	display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 3.3333vw, 64px);
}
.team-mod__header {
	display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 1.25vw, 24px);
	width: clamp(300px, 46.6667vw, 896px); max-width: 100%; text-align: center;
}
.team-mod__title { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); }
.team-mod__subtitle { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); }
.team-mod__cards {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 1.875vw, 36px);
	width: 100%; max-width: calc(var(--site-max) - 2 * clamp(24px, 5.8333vw, 112px));
}
.team-mod__card { display: flex; flex-direction: column; }
.team-mod__photo { aspect-ratio: 541 / 366; overflow: hidden; background: var(--color-grey-placeholder); }
.team-mod__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Frame (Figma "Profile container" 493×214): colored 4px stroke + 24px padding
   creating the OFFSET gap to the white box. Transparent so the image/section
   shows through the gap. Centred under the 541px image (margin-inline auto). */
.team-mod__profile {
	position: relative; z-index: 1; box-sizing: border-box;
	width: clamp(300px, 25.6771vw, 493px); max-width: 100%;
	margin: clamp(-84px, -4.375vw, -46px) auto 0;
	padding: clamp(16px, 1.25vw, 24px);
	box-shadow: inset 0 0 0 4px var(--team-frame, var(--color-cyan));
}
/* White text box (Figma "Text container" 445×166) — offset inside the frame. */
.team-mod__box {
	box-sizing: border-box;
	min-height: clamp(102px, 8.6458vw, 166px);
	padding: clamp(16px, 1.25vw, 24px);
	background: var(--color-white);
}
.team-mod__name { margin: 0 0 clamp(6px, 0.4167vw, 8px); font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); }
.team-mod__role { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); white-space: pre-line; }
@media (max-width: 1249.98px) { .team-mod__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .team-mod__cards { grid-template-columns: 1fr; } .team-mod__profile { width: 100%; } }

/* Kontakt Contact Cards (ported from Kontakt .kn-contact, Figma 406:4597) —
   header (heading flush + indented details + CTA) then a bordered ≤3-col card
   table with collapsing 1px black lines. Stacks to 1-col on tablet. */
.kontakt-mod { background: var(--color-white); padding: var(--pad-section-y) var(--gutter-inner); }
.kontakt-mod__inner { display: flex; flex-direction: column; gap: clamp(40px, 3.3333vw, 64px); }
.kontakt-mod__header { display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 24px); width: clamp(320px, 46.6667vw, 896px); max-width: 100%; }
.kontakt-mod__heading-wrap { padding-right: clamp(24px, 3.3333vw, 64px); }
.kontakt-mod__details { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 1.875vw, 36px); padding-left: clamp(24px, 3.3333vw, 64px); }
.kontakt-mod .btn-cta { --btn-notch: var(--color-white); }
.kontakt-mod__cards { padding-left: clamp(24px, 3.3333vw, 64px); }
/* Table-collapse borders: black grid background shows through 1px gaps as the
   internal gridlines; an OUTSET 1px shadow draws the full outer frame (an inset
   shadow would be hidden behind the white cards → the missing top/left lines). */
.kontakt-mod__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; background: var(--color-black); box-shadow: 0 0 0 1px var(--color-black); }
.kontakt-card { min-width: 0; display: flex; flex-direction: column; background: var(--color-white); }
.kontakt-card__title { min-height: 90px; box-sizing: border-box; display: flex; align-items: center; padding: clamp(16px, 1.25vw, 24px); box-shadow: inset 0 -1px 0 0 var(--color-black); font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); }
.kontakt-card__body { min-height: 147px; box-sizing: border-box; padding: clamp(16px, 1.25vw, 24px); box-shadow: inset 0 -1px 0 0 var(--color-black); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); white-space: pre-line; overflow-wrap: anywhere; }
.kontakt-card__link { min-height: 79px; box-sizing: border-box; display: flex; align-items: center; padding: clamp(16px, 1.25vw, 24px); }
.kontakt-card__link a { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-purple-mid); text-decoration: none; overflow-wrap: anywhere; }
.kontakt-card__link--underline a { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 1249.98px) {
	.kontakt-mod__grid { grid-auto-flow: row; grid-auto-columns: 1fr; }
	.kontakt-mod__cards, .kontakt-mod__details { padding-left: 0; }
	.kontakt-mod__heading-wrap { padding-right: 0; }
}

/* ---- Feed overview grids (Aktuelles / Events / Projekte / Publikationen
   Übersicht). Reuse the shared Figma cards (news-card / project-card /
   termine-card) in a 3-col grid; the card renderer is sbne_render_feed_card. ---- */
.mod-overview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 1.6667vw, 32px); }
/* Overview feed sections span the Figma 1632 content (112 left / 176 right; nodes
   aktuelles 288:2816, events 1077:8499, projekte 288:2911, publikationen 319:1383),
   not the standard 1696 / symmetric-112 .sbne-container. */
.aktuelles-overview > .sbne-container,
.events-overview > .sbne-container,
.projekte-overview > .sbne-container,
.publikationen-overview > .sbne-container,
.presse-overview__head > .sbne-container {   /* presse header only; its year boxes (.pm-year__inner) are already 176/176 */
	max-width: var(--site-max);                                       /* 1920 */
	padding-inline: var(--gutter-inner) var(--gutter-wide); /* 112 left / 176 right @1920 (symmetric ≤1366) */
}
.mod-overview__grid--cards { gap: 24px; }                       /* projekte / publikationen */
/* aktuelles — white module background; each card carries its own 3px cyan frame,
   and the -3px right/bottom margin collapses touching frames into single lines
   between cards (empty cells / partial rows stay white, not cyan). */
.mod-overview__grid--news { gap: 0; }
.mod-overview__grid--news .news-card {
	min-width: 0;
	box-shadow: inset 0 0 0 3px var(--color-cyan);
	margin: 0 -3px -3px 0;
}
.mod-overview__grid--events { gap: 0; }                        /* events — shared cyan cell borders */

/* Events termine-card (ported from page-termine.css). */
.termine-card {
	background: var(--color-white); min-width: 0;
	box-shadow: inset 0 0 0 3px var(--color-cyan);
	margin: 0 -3px -3px 0;
	display: flex; flex-direction: column; gap: 24px;
	padding: clamp(20px, 1.6667vw, 32px);
}
.termine-card__body { display: flex; flex-direction: column; gap: 10px; }
.termine-card__title { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); overflow-wrap: break-word; }
.termine-card__meta { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); overflow-wrap: break-word; }
.termine-card__cta { align-self: flex-start; margin-top: auto; font-size: var(--fs-h4); }  /* pin CTA to bottom -> uniform gap to the frame regardless of title/meta length */

@media (max-width: 1249.98px) { .mod-overview__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .mod-overview__grid { grid-template-columns: 1fr; } }

/* Weitere Events (Figma 454:7261) — full-bleed CYAN section, header + a light-cyan
   track of up to 3 cells split by 1px cyan dividers (NOT the white events-übersicht
   grid). Ports the pixel-verified termin-detail .td-weitere. */
.weitere-events { background: var(--color-cyan); }              /* #00caff */
.weitere-events__inner {
	width: 100%; max-width: var(--site-max); margin-inline: auto;
	display: flex; flex-direction: column;
	gap: clamp(40px, 3.3333vw, 64px);                            /* 64 head -> track @1920 */
	padding: var(--pad-section-y) var(--gutter-wide) var(--pad-section-y) var(--gutter-inner);  /* 112 / 176 / 112 / 112 */
}
.weitere-events__head { display: flex; flex-direction: column; gap: 24px; }
.weitere-events__title {
	font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-bold);
	color: var(--color-black); max-width: 832px; overflow-wrap: break-word;
}
.weitere-events__desc {
	margin-left: clamp(24px, 3.3333vw, 64px);                    /* Figma intro indent +64 */
	max-width: 832px; font-size: var(--fs-body); line-height: var(--lh-body);
	color: var(--color-black); overflow-wrap: break-word;
}
.weitere-events__desc p { margin: 0; }
.weitere-events__desc p + p { margin-top: 1em; }
/* One module background (#00CAFF); cards are #D1F5FF tiles. The 3px grid gap + 3px
   padding let the cyan module bg show between/around the cards as the divider/frame. */
.weitere-events__track {
	position: relative;
	padding: 3px;
	background: var(--color-cyan);                               /* #00CAFF module background */
}
.weitere-events__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.wev-card {
	position: relative; min-width: 0;
	display: flex; flex-direction: column; gap: 24px;
	padding: clamp(20px, 1.6667vw, 32px);                        /* 32 @1920 */
	background: var(--color-cyan-light);                         /* #D1F5FF card background */
}
.wev-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: clamp(280px, 22.3611vw, 430px); }
.wev-card__title { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); overflow-wrap: break-word; }
.wev-card__meta { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); overflow-wrap: break-word; }
.wev-card__cta { align-self: flex-start; margin-top: auto; font-size: var(--fs-h4); }   /* pin CTA to bottom -> uniform gap to frame */
/* Tablet + landscape mobile: max 2 cards per row (3rd wraps). Gaps show the cyan
   module bg between the cards, so no divider rules needed. */
@media (min-width: 768px) and (max-width: 1024px) {
	.weitere-events__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	.weitere-events__cards { grid-template-columns: 1fr; }
}

/* Weiteres Aktuelles (Figma 548:4363, Master Detail) — full-bleed CYAN section,
   header + a light-cyan panel of up to 3 news cards (image + kicker + title +
   excerpt + "Mehr erfahren"), split by 3px cyan dividers. Ports verified .md-akt. */
.waktuelles { background: var(--color-cyan); }
.waktuelles__inner {
	width: 100%; max-width: var(--site-max); margin-inline: auto;
	display: flex; flex-direction: column;
	gap: clamp(40px, 3.3333vw, 64px);
	padding: var(--pad-section-y) var(--gutter-wide) var(--pad-section-y) var(--gutter-inner);
}
.waktuelles__head { display: flex; flex-direction: column; gap: 24px; width: clamp(320px, 46.6667vw, 896px); max-width: 100%; }
.waktuelles__title { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); overflow-wrap: break-word; }
.waktuelles__desc { padding-left: clamp(24px, 3.3333vw, 64px); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); overflow-wrap: break-word; }
.waktuelles__desc p { margin: 0; }
.waktuelles__desc p + p { margin-top: 1em; }
.waktuelles__cta { align-self: flex-start; }
/* One module background (#00CAFF cyan). The cards sit on it as #D1F5FF light-cyan
   tiles; the 3px gap + 3px padding let the cyan module bg show between and around
   the cards — that IS the divider/frame, not a separately drawn line. */
.waktuelles__panel {
	position: relative; display: flex; width: 100%; max-width: 1632px;
	gap: 3px;
	padding: 3px;
	background: var(--color-cyan);                                /* #00CAFF module background */
	box-sizing: border-box;
}
.wakt-card {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column;
	gap: clamp(20px, 1.6667vw, 32px);                            /* 32 img -> body */
	padding: clamp(20px, 1.6667vw, 32px);                       /* 32 */
	background: var(--color-cyan-light);                        /* #D1F5FF card background */
	box-sizing: border-box;
}
.wakt-card__media { display: block; width: 100%; aspect-ratio: 459 / 437; overflow: hidden; background: var(--color-grey-placeholder, #c4c4c4); }
.wakt-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s linear; }
.wakt-card:hover .wakt-card__img { transform: scale(1.05); }
.wakt-card__body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.wakt-card__kicker { font-size: var(--fs-label); line-height: 1.5; color: var(--color-black); max-width: 100%; overflow-wrap: break-word; }
.wakt-card__group { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
.wakt-card__title { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); overflow-wrap: break-word; }
.wakt-card__title a { color: inherit; text-decoration: none; }
.wakt-card__title a:hover, .wakt-card__title a:focus-visible { color: var(--color-orange-red); }
.wakt-card__excerpt { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); overflow-wrap: break-word; }
.wakt-card__cta { margin-top: auto; font-size: var(--fs-h4); }   /* pin CTA to bottom -> uniform gap to frame */
/* Tablet + landscape mobile: 2 cards per row (3 makes each card too narrow — the
   text-spaced CTA button overflowed into the next card, failing WCAG 1.4.12). The
   3rd card wraps to a new row; dividers become grid-aware (vertical between the two
   columns, horizontal above the wrapped card). */
/* Tablet + landscape mobile: max 2 cards per row (3rd wraps). Gaps still show the
   cyan module bg between/around the cards, so no divider rules are needed. */
@media (min-width: 768px) and (max-width: 1024px) {
	.waktuelles__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	.waktuelles__panel { flex-direction: column; }
	.wakt-card { flex: none; width: 100%; }
}

/* Angebote Teaser */
.angebote { background: #ac61ff; }
.angebote__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2vw, 40px); }
.angebote-card { position: relative; }
.angebote-card__media { overflow: hidden; aspect-ratio: 4 / 3; }
.angebote-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.angebote-card__box {
	position: relative; background: var(--color-white); margin: -64px clamp(12px, 2vw, 40px) 0; padding: clamp(20px, 1.8vw, 36px);
	min-height: fit-content;
}
.angebote-card__box::before { content: ""; position: absolute; inset: 10px; border: 2px solid var(--color-cyan); pointer-events: none; }
.angebote-card__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.angebote-card__text { font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 12px; overflow-wrap: anywhere; }
.angebote-card__cta { margin-top: 18px; }
.angebote .mod__headline, .angebote .mod__intro { color: var(--color-white); }

/* Title & Text (indented paragraph) */
.titletext__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.titletext__headline { grid-column: 1 / 5; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.titletext__content { grid-column: 5 / 12; font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }

/* Contact Form (ported from Förderung .fp-contactform, Figma 288:3542) —
   full-bleed bg image, centred white CF7 form box inside a 5px cyan offset
   frame. The form internals are styled by the shared .sbne-cf rules below. */
.contactform-mod {
	box-sizing: border-box;
	display: flex; justify-content: center; align-items: center;
	padding: var(--pad-section-y) var(--gutter-inner);
	background-color: var(--color-grey-placeholder, #c4c4c4);
	background-position: center center; background-size: cover; background-repeat: no-repeat;
}
/* When a background IMAGE is set, reserve height sized to the error state so the
   section doesn't grow when validation errors appear (which would rescale the
   static cover image — the "bg gets bigger" bug). Without an image there is
   nothing to rescale, so the section stays tight to the form. Static, no parallax. */
.contactform-mod--has-bg { min-height: clamp(560px, 73vw, 1290px); }
.contactform-mod__frame {
	box-sizing: border-box; width: min(833px, 100%);
	padding: clamp(20px, 1.875vw, 36px);
	box-shadow: inset 0 0 0 5px var(--color-cyan);
	background: transparent;
}
/* Hide the empty CF7 response box + the idle AJAX spinner so they don't add
   whitespace under SENDEN (design ends at the button). The response box
   reappears (styled) only when there is an actual message. */
/* Hide the response box only while it's EMPTY (idle). Once CF7 fills it with a
   status message — success OR error — it must show (do NOT key off aria-hidden,
   which CF7 may keep on the element while the message is present). */
.sbne-cf-box .wpcf7-response-output:empty { display: none; margin: 0; padding: 0; border: 0; }
/* Spinner: hidden when idle, shown while the form is submitting (so the user gets
   immediate feedback that the form was sent). */
.sbne-cf-box .wpcf7-spinner { display: none; }
.sbne-cf-box .wpcf7-form.submitting .wpcf7-spinner { display: inline-block; }

/* Team */
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.4vw, 48px); align-items: flex-start; }
.team-card { position: relative; }
.team-card__media { overflow: hidden; aspect-ratio: 3 / 4; }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__box {
	position: relative; background: var(--color-white); margin: -72px clamp(10px, 1.4vw, 28px) 0; padding: clamp(16px, 1.4vw, 28px); height: auto;
}
.team-card__box::before { content: ""; position: absolute; inset: 8px; border: 2px solid var(--team-frame, var(--color-cyan)); pointer-events: none; }
.team-card__name { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.team-card__role { font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 8px; white-space: pre-line; overflow-wrap: anywhere; }

/* Text Editor (WYSIWYG) */
.texteditor > .texteditor__inner {
	width: 100%;
	max-width: var(--site-max);                    /* 1920 — match Figma 801:2003 */
	margin-inline: auto;
	padding-inline: clamp(20px, 13.3333vw, 256px); /* 256 @1920, EQUAL both sides */
}
@media (max-width: 768px) {
	.texteditor > .texteditor__inner { padding-inline: 20px; }
}
.texteditor__body { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.texteditor__body h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); margin: 1.4em 0 .5em; }
.texteditor__body h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); margin: 1.2em 0 .5em; }
.texteditor__body p { margin: 0 0 1em; }
.texteditor__body ul,
.titletext-mod .section-intro ul { list-style: none; padding-left: 0; margin: 0 0 1em; }
.texteditor__body ul li,
.titletext-mod .section-intro ul li { position: relative; padding-left: 28px; margin-bottom: .5em; }
.texteditor__body ul li::before,
.titletext-mod .section-intro ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; background: var(--color-purple-mid); }
/* Text links inside prose/content are ALWAYS underlined (link identification, WCAG 1.4.1)
   — across every WYSIWYG/intro wrapper site-wide. Buttons, nav, CTAs and card-title links
   are excluded (distinguishable by context; they keep the global no-underline default). */
.texteditor__body a,
.mod-richtext a,
.mod__intro a,
.section-intro a,
.weitere-events__desc a,
.waktuelles__desc a,
.partner-grid-mod__intro a { color: inherit; text-decoration: underline; }

/* Large Image */
/* Large Image + Link Box use the Text Editor's side padding (256 @1920, equal
   both sides) instead of the default .sbne-container gutter (112). */
.largeimage > .sbne-container,
.linkbox-mod > .sbne-container {
	max-width: var(--site-max);
	padding-inline: clamp(20px, 13.3333vw, 256px);
}
@media (max-width: 768px) {
	.largeimage > .sbne-container,
	.linkbox-mod > .sbne-container { padding-inline: 20px; }
}
.largeimage__img { display: block; width: 100%; height: auto; max-width: 100%; }

/* Gallery slider */
/* Gallery Slider (Figma 801:2023) — full-bleed white, mixed landscape
   (832x624) / portrait (468x624) centred scroll-snap track (8px gaps).
   A static 904x697 bracket group is centred over the middle image: cyan
   #00caff top-left, purple #9627ff bottom-right. Black 57px arrow boxes
   with a #bf82ff glyph sit centred below. Reuses modules.js [data-slider]. */
.gallery-mod { padding: var(--pad-section-y) 0; overflow: hidden; }  /* uniform section pad top+bottom (was 39 top per Figma; user wants all modules equal) */
.gallery { position: relative; }
.gallery__viewport { position: relative; }
.gallery__track {
	display: flex;
	gap: 8px;
	align-items: center;
	overflow-x: auto;
	scroll-snap-type: x proximity;               /* proximity (not mandatory) so first/last stay reachable */
	scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item {
	flex: 0 0 auto;
	height: clamp(280px, 32.5vw, 624px);         /* 624 @1920 */
	overflow: hidden;
	scroll-snap-align: center;
	background: var(--color-grey-placeholder, #c4c4c4);
}
.gallery__item--landscape { aspect-ratio: 832 / 624; }
.gallery__item--portrait  { aspect-ratio: 468 / 624; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Static decorative corner brackets over the centre image. */
.gallery__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);            /* Figma Group 49: 904x697 group centred on the middle image (extends ~37 above / 36 below) */
	width: clamp(360px, 47.0833vw, 904px);       /* 904 group @1920 */
	height: clamp(280px, 36.3021vw, 697px);      /* 697 group @1920 */
	pointer-events: none;
}
.gallery__frame::before,
.gallery__frame::after { content: ""; position: absolute; }
.gallery__frame::before {                        /* cyan top-left — Figma Vector 20: 362x178 */
	top: 0; left: 0;
	width: clamp(150px, 18.8542vw, 362px);
	height: clamp(80px, 9.2708vw, 178px);
	border-top: 5px solid var(--color-cyan);
	border-left: 5px solid var(--color-cyan);
}
.gallery__frame::after {                         /* purple #9627ff bottom-right — Figma Vector 21: 355x177 */
	bottom: 0; right: 0;
	width: clamp(150px, 18.4896vw, 355px);
	height: clamp(80px, 9.2188vw, 177px);
	border-bottom: 5px solid var(--color-purple-mid);
	border-right: 5px solid var(--color-purple-mid);
}
.gallery__nav { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.slider-arrow {
	width: 57px;
	height: 57px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-black);
	border: 0;
	cursor: pointer;
	color: var(--color-purple-light);            /* #bf82ff filled glyph (via currentColor) */
}
.slider-arrow svg { display: block; width: 34px; height: 30px; }   /* Figma glyph 34x30 */
.slider-arrow[data-slider-prev] svg { transform: scaleX(-1); }     /* same vector, mirrored for prev */
/* Tablet (incl. landscape up to 1366) / mobile: the decorative corner frame is taller
   than the shrunken images, so its bottom brackets reach below the track and crowd the
   arrows. Push the arrows down to keep clear breathing room between them and the frame. */
@media (max-width: 1366px) {
	.gallery__nav { margin-top: clamp(28px, 4.5vw, 48px); }
}

/* Link Box */
.linkbox { display: inline-block; width: max-content; max-width: 100%; background: var(--color-purple-pale); padding: clamp(24px, 2vw, 40px); }
.linkbox__headline { font-size: var(--fs-h3); font-weight: var(--fw-bold); margin-bottom: 18px; }
.linkbox__list { list-style: none; padding: 0; margin: 0; }
.linkbox__list li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.linkbox__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; background: var(--color-purple-mid); }
.linkbox__list a { color: var(--color-black); text-decoration: underline; font-size: var(--fs-body); overflow-wrap: anywhere; }
/* Optional per-link sub-heading — groups links inside ONE box. Styled like the module
   headline; top margin separates it from the preceding links, bottom margin from its own. */
.linkbox__group-headline { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-bold); margin: clamp(20px, 1.6667vw, 28px) 0 18px; }
.linkbox__group-headline:first-child { margin-top: 0; }

/* Dynamic Sitemap — live nested bullet list (WCAG 1.3.1); no inline styles. */
.sitemap__title { margin: 0 0 clamp(24px, 2.5vw, 44px); font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); overflow-wrap: anywhere; }
.sitemap__list { list-style: disc; padding-left: 24px; margin: 0; }
.sitemap__list ul { list-style: circle; padding-left: 24px; margin: 8px 0 0; }
.sitemap__list li { margin: 8px 0; }
.sitemap__list a { color: var(--color-black); text-decoration: underline; font-size: var(--fs-body); }
.sitemap__list a:hover,
.sitemap__list a:focus-visible { color: var(--color-orange-red); }

/* ============================ Feed modules ============================ */

/* Events Teaser (2 cards | center | 2 cards) */
.events-teaser__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 2vw, 40px); align-items: start; }
.events-teaser__col { display: grid; gap: clamp(20px, 2vw, 40px); }
.events-teaser__center { width: clamp(280px, 26vw, 501px); }
.events-teaser__center img { width: 100%; height: auto; display: block; object-fit: cover; }

/* Weitere / overview grids reuse .sbne-grid */

/* Projekte teaser slider */
.projslider { position: relative; }
.projslider__track { display: flex; gap: clamp(16px, 1.6vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.projslider__track::-webkit-scrollbar { display: none; }
.projslider .sbne-card { flex: 0 0 auto; width: clamp(280px, 27vw, 507px); scroll-snap-align: start; }
.projslider .sbne-card__media { aspect-ratio: 507 / 726; }
.projslider__nav { display: flex; gap: 12px; margin-top: 20px; }

/* Presse Übersicht (ported from Pressemitteilungen .pm-year, Figma 448:5716) —
   full-bleed colored band boxes per year; a tinted header (year) + a bordered
   table of rows (date | title | + Mehr lesen). Filter + per-box load-more (JS). */
.presse-overview__head { padding: clamp(48px, 5.8333vw, 112px) 0 clamp(28px, 3vw, 48px); }
.pm-year { --pm-band: var(--color-cyan); --pm-tint: var(--color-cyan-light); background: var(--pm-band); }
.pm-year--blue { --pm-band: var(--color-cyan);   --pm-tint: var(--color-cyan-light); }
.pm-year--red  { --pm-band: var(--color-orange); --pm-tint: var(--color-red-light, #FFE7E2); }
.pm-year--lila { --pm-band: var(--color-purple); --pm-tint: var(--color-lila-light, #F9F2FF); }
.pm-year__inner { width: 100%; max-width: var(--site-max); margin-inline: auto; padding: clamp(48px, 5.8333vw, 112px) clamp(24px, 9.1667vw, 176px); }
.pm-year__stack { display: flex; flex-direction: column; }
.pm-year__header { background: var(--pm-tint); border: 1px solid var(--color-black); padding: clamp(20px, 1.6667vw, 32px); display: flex; flex-direction: column; gap: clamp(12px, 0.8333vw, 16px); }
.pm-year__year { margin: 0; font-size: clamp(28px, 2.0833vw, 40px); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); }
/* Year category description (native term "Beschreibung"), shown under the year name. */
.pm-year__desc { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--color-black); overflow-wrap: break-word; }
.pm-year__table { background: var(--pm-tint); border: 1px solid var(--color-black); margin-top: -1px; }
.pm-year__row { display: flex; align-items: stretch; min-height: clamp(64px, 4.4792vw, 86px); background: var(--pm-tint); }
.pm-year__row:not(:first-child) { border-top: 1px solid var(--color-black); }
.pm-year__cell { display: flex; align-items: center; padding: clamp(16px, 1.25vw, 24px); }
.pm-year__cell--date { flex: 0 0 clamp(110px, 8.5417vw, 164px); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); }
.pm-year__cell--title { flex: 1 1 auto; min-width: 0; margin: 0; border-left: 1px solid var(--color-black); font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); overflow-wrap: anywhere; }
.pm-year__cell--action { flex: 0 0 clamp(150px, 13.0729vw, 251px); border-left: 1px solid var(--color-black); }
.pm-year__cell--action .link-plus { color: var(--color-black); font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-bold); gap: 10px; }
/* "Alle ansehen" — a full-width tinted bar with the same 1px frame as the
   table (Figma 448:5716 Component 6), not a standard button. Merges into the
   table frame via the -1px top margin so the whole box reads as one coherent grid. */
.pm-year__more {
	width: 100%;
	min-height: clamp(64px, 4.4792vw, 86px);   /* same as a .pm-year__row */
	margin-top: -1px;
	background: var(--pm-tint);
	border: 1px solid var(--color-black);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: var(--fs-h4);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	color: var(--color-black);
	cursor: pointer;
}
.pm-year__more-icon { display: inline-flex; }
.pm-year__more-icon svg { width: 20px; height: 12px; }
.pm-year__more:hover .pm-year__more-icon { transform: translateY(2px); transition: transform 0.2s linear; }
@media (max-width: 767.98px) {
	.pm-year__row { flex-direction: column; align-items: stretch; }
	.pm-year__cell--title, .pm-year__cell--action { border-left: 0; border-top: 1px solid var(--color-black); }
	/* Stacked column: each desktop cell WIDTH (flex-basis) would otherwise become a
	   HEIGHT — forcing the date frame to 110px and Mehr lesen to 150px. Reset to
	   content height, then give date + Mehr lesen one shared min-height so the two
	   frames are exactly the same height. */
	.pm-year__cell { flex: 0 0 auto; }
	.pm-year__cell--date,
	.pm-year__cell--action { min-height: 60px; }
}

/* Partner Grid Accordion (ported from Über uns .uu-partner, Figma 406:4659) —
   orange section, 3-col grid of pink cards joined by 3px orange gridlines; each
   card = white logo box + "+ Name" toggle revealing intro + link. Keeps the
   modules.js hooks (.partner-card / [data-accordion-toggle] / .is-open). */
.partner-grid-mod { background: var(--color-orange); padding: clamp(56px, 5.8333vw, 112px) 0; }
.partner-grid-mod__inner {
	width: 100%; max-width: var(--site-max); margin-inline: auto;
	display: flex; flex-direction: column; gap: clamp(32px, 3.3333vw, 64px);
}
.partner-grid-mod__header {
	box-sizing: border-box; width: clamp(300px, 46.6667vw, 896px); max-width: 100%;
	padding-left: clamp(20px, 5.8333vw, 112px);
	display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 24px);
}
.partner-grid-mod__title { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-bold); color: var(--color-black); overflow-wrap: break-word; hyphens: auto; }
.partner-grid-mod__desc { padding-left: clamp(24px, 3.3333vw, 64px); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); }
.partner-grid-mod__grid {
	box-sizing: border-box; width: 100%; max-width: clamp(300px, 81.6667vw, 1568px); margin-inline: auto;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--color-orange);
}
.partner-grid-mod .partner-card {
	box-sizing: border-box; display: flex; flex-direction: column;
	gap: clamp(20px, 1.6667vw, 32px); padding: clamp(20px, 1.6667vw, 32px);
	background: var(--color-partner-card); border: 0;
}
.partner-grid-mod__logo {
	box-sizing: border-box; aspect-ratio: 459 / 273; min-height: 0; overflow: hidden;
	padding: clamp(20px, 1.6667vw, 32px);
	background: var(--color-white); display: flex; align-items: center; justify-content: center;
}
/* Fixed frame (459x273 @1920): all logo boxes are equal (aspect-ratio above). Every
   logo is normalised to the SAME height (aspect kept, centred) so — despite different
   logo proportions — they read as one consistent size; a very wide logo clamps to the
   box width. (Figma 406:4659.) */
.partner-grid-mod__logo img { width: auto; height: 62%; max-width: 100%; object-fit: contain; object-position: center; display: block; }
.partner-grid-mod__toggle {
	appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0; background: transparent;
	width: 100%; text-align: left; cursor: pointer; color: var(--color-black); font-family: inherit;
	display: flex; flex-direction: column; align-items: flex-start;
}
.partner-grid-mod__label { position: relative; display: inline-flex; align-items: center; gap: clamp(8px, 0.625vw, 12px); font-size: var(--fs-h3); line-height: 1.5; font-weight: var(--fw-bold); }
/* Animated underline (Figma "Rectangle 53"): 3px bar, width 0 at rest, grows to
   the full label width on hover/focus and while the card is open. */
.partner-grid-mod__label::after {
	content: ""; position: absolute; left: 0; bottom: -8px;
	height: 3px; width: 0; background: currentColor; transition: width .3s ease-out;
}
.partner-grid-mod__toggle:hover .partner-grid-mod__label::after,
.partner-grid-mod__toggle:focus-visible .partner-grid-mod__label::after,
.partner-card.is-open .partner-grid-mod__label::after { width: 100%; }
@media (prefers-reduced-motion: reduce) { .partner-grid-mod__label::after { transition: none; } }
.partner-grid-mod__glyph { position: relative; flex: 0 0 auto; width: 19px; height: 19px; align-self: center; }
.partner-grid-mod__glyph::before,
.partner-grid-mod__glyph::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: currentColor; }
.partner-grid-mod__glyph::before { width: 19px; height: 3px; }
.partner-grid-mod__glyph::after { width: 3px; height: 19px; transition: opacity .2s; }
.partner-card.is-open .partner-grid-mod__glyph::after { opacity: 0; }
/* Panel grows to its EXACT content height (grid-rows 0fr→1fr) so the full intro +
   button always fit — no fixed max-height to clip long text. */
.partner-card__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.partner-card.is-open .partner-card__panel { grid-template-rows: 1fr; }
.partner-card__panel-inner { min-height: 0; overflow: hidden; }
.partner-grid-mod__intro { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-black); padding-top: clamp(16px, 1.25vw, 24px); overflow-wrap: anywhere; }
/* Expanded-accordion "Mehr erfahren" — a 3px #9320ff outline button (Figma
   396:4654), NOT a plain underlined link. Ported from Über uns .uu-partner__more. */
.partner-grid-mod__link {
	box-sizing: border-box;
	display: inline-block;
	margin-top: clamp(16px, 1.25vw, 24px);
	padding: clamp(10px, 0.9375vw, 18px) clamp(16px, 1.6667vw, 32px);
	border: 3px solid var(--color-purple-border);   /* #9320ff */
	background: transparent;
	color: var(--color-black);
	font-size: var(--fs-h4);                          /* 24 @1920, lh 36 */
	line-height: 1.5;
	font-weight: var(--fw-semibold);                  /* 600 */
	text-decoration: none;
	transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.partner-grid-mod__link:hover,
.partner-grid-mod__link:focus-visible {
	background: var(--color-purple-border);
	color: var(--color-white);
}
@media (max-width: 1249.98px) { .partner-grid-mod__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .partner-grid-mod__grid { grid-template-columns: 1fr; } .partner-grid-mod__header { padding-left: 20px; } }
@media (prefers-reduced-motion: reduce) { .partner-card__panel { transition: none; } }

/* Partner marquee (module) — the shared .partner-marquee__track (main.css) uses a
   fixed 9s loop calibrated for the home's small logo set. The module renders the
   full partner list (much wider track), so 9s scrolled ~255px/s — far too fast.
   This 45s is the fallback pace; initMarqueeSpeed() (modules.js) then overrides
   animation-duration from the real track width to hold a constant ~51px/s no
   matter how many logos there are. Home page keeps its own 9s. */
.mod-marquee .partner-marquee__track { animation-duration: 45s; }

/* ---- Single Event header (fixed CPT matrix) ---- */
.single-event { padding-top: clamp(32px, 4vw, 72px); }
.single-event__header { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 3vw, 64px); align-items: start; }
.single-event__media { overflow: hidden; }
.single-event__media img { width: 100%; height: auto; display: block; }
.single-event__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-heading); overflow-wrap: anywhere; }
.single-event__meta { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.single-event__meta-item { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.single-event__meta-item + .single-event__meta-item { position: relative; padding-left: 24px; }
.single-event__meta-item + .single-event__meta-item::before { content: "·"; position: absolute; left: 6px; }
.single-event__desc { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.single-event__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
@media (max-width: 1250px) { .single-event__header { grid-template-columns: 1fr; } }

/* ============================ Responsive ============================ */
@media (max-width: 1250px) {
	.bildtext__inner { grid-template-columns: 1fr; }
	.bildtext--text-left .bildtext__media, .bildtext--text-left .bildtext__text { order: 0; }
	.angebote__cards { grid-template-columns: 1fr; }
	.team__grid { grid-template-columns: repeat(2, 1fr); }
	.kontakt__grid { grid-template-columns: 1fr; border-right: 2px solid var(--color-black); }
	.sbne-grid { grid-template-columns: repeat(2, 1fr); }
	.events-teaser__row { grid-template-columns: 1fr; }
	.events-teaser__center { width: 100%; max-width: 501px; margin-inline: auto; }
	.hero-mod__box { min-width: 0; }
	.titletext__headline { grid-column: 1 / 6; }
	.titletext__content { grid-column: 6 / 13; }
}
@media (max-width: 768px) {
	.team__grid { grid-template-columns: 1fr; }
	.sbne-grid { grid-template-columns: 1fr; }
	.titletext__inner { grid-template-columns: 1fr; }
	.titletext__headline, .titletext__content { grid-column: 1 / -1; }
	.presse-row { grid-template-columns: 1fr; gap: 6px; }
	.partner-grid__grid { grid-template-columns: 1fr; }
	.linkbox { width: 100%; }
}

/* =========================================================================
   Global CF7 contact form (.sbne-cf) — one accessible, functional form shared
   by Förderung / Kontakt / Über uns. Sits inside each page's bespoke section
   frame (cyan offset + background image). Design language matches the Figma
   form: white box, black table-collapse borders, black SENDEN with purple text.
   ========================================================================= */
.sbne-cf-box {
  box-sizing: border-box;
  width: 100%;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}
.sbne-cf__title {
  margin: 0;
  padding: clamp(16px, 1.25vw, 24px);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--color-black);
}
.sbne-cf-box .wpcf7 { margin: 0; }
.sbne-cf-box .wpcf7-form { display: flex; flex-direction: column; }
.sbne-cf-box .wpcf7-form > * { margin-top: -1px; }
.sbne-cf__row { display: flex; flex-direction: row; }
.sbne-cf__row .sbne-cf__field { flex: 1 1 0; width: 50%; min-width: 0; }
.sbne-cf__row .sbne-cf__field + .sbne-cf__field { margin-left: -1px; }
/* Floating-label fields (Figma 288:3542): the label rests inside the input and
   floats onto the top border on focus/fill (white notch masks the border).
   Input rows 78px, Nachricht 178px; padding 20/24. */
.sbne-cf__field {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(60px, 4.0625vw, 78px);
  padding: clamp(14px, 1.0417vw, 20px) clamp(18px, 1.25vw, 24px);
  box-shadow: inset 0 0 0 1px var(--color-black);
  background: var(--color-white);
}
.sbne-cf__field--textarea { min-height: clamp(140px, 9.2708vw, 178px); justify-content: flex-start; }
.sbne-cf__field > label {
  position: absolute;
  left: clamp(14px, 1.25vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 4px;
  background: var(--color-white);
  font-size: var(--fs-body);
  line-height: 1.2;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease;
}
.sbne-cf__field--textarea > label { top: clamp(14px, 1.0417vw, 20px); transform: none; }
.sbne-cf__field:focus-within > label,
.sbne-cf__field:has(.sbne-cf__input:not(:placeholder-shown)) > label,
.sbne-cf__field:has(.sbne-cf__textarea:not(:placeholder-shown)) > label,
.sbne-cf__field:has(.wpcf7-not-valid) > label {
  top: 0;
  transform: translateY(-50%);
  font-size: var(--fs-small);
}
.sbne-cf__field .wpcf7-form-control-wrap { display: block; }
/* On validation error the field grows (min-height is a floor): float the label
   up and stack the input + error message from the top so they never overlap. */
.sbne-cf__field:has(.wpcf7-not-valid) { justify-content: flex-start; }
.sbne-cf__input,
.sbne-cf__textarea {
  box-sizing: border-box;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-black);
  appearance: none;
  border-radius: 0;
}
/* Fixed height (overrides CF7's default rows) so the Nachricht field is 178px. */
.sbne-cf__textarea { resize: vertical; height: clamp(100px, 7.1875vw, 138px); min-height: 0; }
.sbne-cf__input:focus, .sbne-cf__textarea:focus { outline: none; }

/* Datenschutz row (Figma 761×75): the checkbox is a full-height 75×75 bordered
   square (part of the collapsing-border table) showing a checkmark on :checked;
   the label sits in the remaining cell. */
.sbne-cf__agb {
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px var(--color-black);
  font-size: var(--fs-small);
  color: var(--color-black);
}
/* CF7 wraps the acceptance in inline <span>s; blockify them so the flex <label>
   spans the full width — otherwise it shrink-wraps and the consent text breaks
   into overlapping columns while the checkbox collapses (mobile). */
.sbne-cf__agb .wpcf7-form-control-wrap,
.sbne-cf__agb .wpcf7-acceptance { display: block; }
.sbne-cf__agb .wpcf7-list-item { display: block; margin: 0; }
/* 2-column grid: fixed checkbox column + text. The grid row is sized by the text,
   giving the checkbox cell a definite height. An <input> is a REPLACED element, so
   it ignores flex align-self:stretch and abs top/bottom (it collapses to its small
   intrinsic size, pinned to the top) — but it DOES honour an explicit height:100%,
   which fills the grid cell in every engine. */
.sbne-cf__agb label {
  display: grid;
  grid-template-columns: clamp(56px, 3.9063vw, 75px) 1fr;
  align-items: stretch;
  min-height: clamp(56px, 3.9063vw, 75px);
}
.sbne-cf__agb input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  align-self: stretch;
  margin: 0;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(24px, 1.6146vw, 31px) auto;
  /* Faint checkmark hint always visible (so the empty box reads as a checkbox),
     going darker on hover and full black when checked — matches Figma. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='24' viewBox='0 0 31 24' fill='none'%3E%3Cpath d='M2 13.5L11 22L29 2' stroke='%23000000' stroke-opacity='0.36' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px var(--color-black);
  cursor: pointer;
  transition: background-image var(--transition-hover);
}
.sbne-cf__agb input[type="checkbox"]:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='24' viewBox='0 0 31 24' fill='none'%3E%3Cpath d='M2 13.5L11 22L29 2' stroke='%23000000' stroke-opacity='0.64' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sbne-cf__agb input[type="checkbox"]:checked {
  /* Tick turns lila (#AC61FF, --color-purple) once consent is checked. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='24' viewBox='0 0 31 24' fill='none'%3E%3Cpath d='M2 13.5L11 22L29 2' stroke='%23AC61FF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sbne-cf__agb .wpcf7-list-item-label {
  display: block;              /* flow the text + inline link normally (flex split it) */
  align-self: center;          /* vertically centre the text in its grid cell */
  min-width: 0;
  padding: clamp(12px, 1.25vw, 24px);
}
/* Datenschutz consent: the link is always underlined (clear affordance), and
   ONLY the checkbox toggles consent — the label text/whitespace is not a click
   target (pointer-events), while the checkbox and link stay interactive. The
   <label> still provides the checkbox's accessible name (screen readers) and
   keyboard toggle (Space) is unaffected. */
.sbne-cf__agb a { text-decoration: underline; }
.sbne-cf__agb label { pointer-events: none; cursor: default; }
.sbne-cf__agb label input[type="checkbox"] { pointer-events: auto; cursor: pointer; }
.sbne-cf__agb label a { pointer-events: auto; cursor: pointer; }
/* Datenschutz error message: line it up under the label text (past the 75px
   checkbox cell) instead of sitting flush against the left edge. */
.sbne-cf__agb .wpcf7-not-valid-tip {
  padding: 0 clamp(12px, 1.25vw, 24px) clamp(10px, 0.9vw, 16px) calc(clamp(56px, 3.9063vw, 75px) + clamp(12px, 1.25vw, 24px));
}
.sbne-cf__submit {
  border: 0;
  cursor: pointer;
  width: 100%;
  padding: clamp(24px, 1.875vw, 36px);
  font-family: inherit;
  font-size: var(--fs-nav);          /* 20px desktop (unchanged), scales to 16px on mobile so it isn't larger than the headings */
  font-weight: var(--fw-medium);
  letter-spacing: 1px;
  background: var(--color-black);
  color: var(--color-purple);
  transition: color var(--transition-hover);
}
.sbne-cf__submit:hover,
.sbne-cf__submit:focus-visible { color: var(--color-orange); }
.sbne-cf-box .wpcf7-response-output {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: var(--fs-small);
  border: 2px solid var(--color-black);
}
/* CF7 6.x sets a status class on the form: invalid / unaccepted / spam / aborted /
   failed = something went wrong (red); sent = delivered (green). */
.sbne-cf-box .wpcf7-form.invalid .wpcf7-response-output,
.sbne-cf-box .wpcf7-form.unaccepted .wpcf7-response-output,
.sbne-cf-box .wpcf7-form.spam .wpcf7-response-output,
.sbne-cf-box .wpcf7-form.aborted .wpcf7-response-output,
.sbne-cf-box .wpcf7-form.failed .wpcf7-response-output {
  border-color: var(--color-orange-red);
  color: var(--color-orange-red);
}
.sbne-cf-box .wpcf7-form.sent .wpcf7-response-output {
  border-color: #2e7d32;
  color: #2e7d32;
}
.sbne-cf-box .wpcf7-not-valid-tip {
  color: var(--color-orange-red);
  font-size: var(--fs-small);
  display: block;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .sbne-cf__row { flex-direction: column; }
  /* flex:1 1 0 (basis 0) froze the field at min-height so error tips spilled out of
     the frame — auto basis lets each field grow to fit its error message. */
  .sbne-cf__row .sbne-cf__field { width: 100%; flex: 0 0 auto; }
  .sbne-cf__row .sbne-cf__field + .sbne-cf__field { margin-left: 0; margin-top: -1px; }
}