/* =====================================================================
   see red! Düsseldorf · Design-System · sr.css
   Reihenfolge: Fonts → Tokens → Basis → Typografie → Layout →
   Signatur (Schnitt, Tag, Streifen, Stern) → Bausteine → Motion → Utilities
   Prefix: .sr-   ·   Keine Rundungen, keine Verläufe, ein Rot.
   ===================================================================== */

/* ---------- 1. Fonts (lokal, OFL) ---------- */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Jost";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */
:root {
	/* Farben (Styleguide sr! 2026) */
	--sr-rot: #CC0A30;
	--sr-rot-dunkel: #A60826;
	--sr-schwarz: #111111;
	--sr-weiss: #F7F7F7;
	--sr-weiss-rein: #FFFFFF;
	--sr-grau-100: #E9E9E9;
	--sr-grau-300: #CFCFCF;
	--sr-grau-500: #6E6E6E;
	--sr-grau-700: #3A3A3A;

	/* Semantik */
	--sr-bg: var(--sr-weiss);
	--sr-flaeche: var(--sr-weiss-rein);
	--sr-text: var(--sr-schwarz);
	--sr-text-2: var(--sr-grau-500);
	--sr-linie: var(--sr-grau-100);
	--sr-fokus: var(--sr-rot);

	/* Schrift */
	--sr-font-display: "Figtree", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
	--sr-font-body: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;

	/* Skala (fluid) */
	--sr-t-display: clamp(2.75rem, 1.4rem + 5.6vw, 5.75rem);
	--sr-t-h1: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem);
	--sr-t-h2: clamp(1.75rem, 1.1rem + 2.6vw, 2.875rem);
	--sr-t-h3: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
	--sr-t-h4: 1.125rem;
	--sr-t-h2-kachel: clamp(1.75rem, .5rem + 2.75vw, 2.5rem); /* H2 in Kacheln und Über-uns-Block: bei 1440 40px, darunter sanfter, damit nichts in die Streifen läuft */
	--sr-t-lead: clamp(1.125rem, 1rem + .6vw, 1.375rem);
	--sr-t-body: 1.0625rem;
	--sr-t-klein: .9375rem;
	--sr-t-meta: .8125rem;

	/* Geometrie */	--sr-ico-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E");
	--sr-ico-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0-4-4m4 4 4-4M4 19h16'/%3E%3C/svg%3E");
	--sr-winkel: 9deg;              /* Schnitt: aus den sr!-Kacheln gemessen */
	--sr-tan: 0.1584;               /* tan(9deg) */
	--sr-schnitt-flach: 3.5vw;      /* horizontale Kanten flacher (ca. 2deg), wie auf den Flyern */
	--sr-container: 75rem;
	--sr-container-schmal: 42rem;
	--sr-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--sr-raster-g: clamp(1.5rem, 3vw, 2.5rem); /* Spaltenabstand von Deck und Startseiten-Raster: gleiche Spalten, gleiche Kanten */
	--sr-section: clamp(2.5rem, 4.5vw, 4rem);    /* ein Abstand für alle Sektionen, Lücke = 2x */
	--sr-header-h: 4.5rem;

	/* Abstände 4er-Raster */
	--sr-s1: .25rem;
	--sr-s2: .5rem;
	--sr-s3: .75rem;
	--sr-s4: 1rem;
	--sr-s6: 1.5rem;
	--sr-s8: 2rem;
	--sr-s12: 3rem;
	--sr-s16: 4rem;

	/* Motion */
	--sr-ease: cubic-bezier(.2, .7, .2, 1);
	--sr-dauer: .35s;
	--sr-dauer-lang: .7s;

	/* Schatten (nur für schwebende Karten) */
	--sr-schatten: 0 14px 36px -16px rgba(17, 17, 17, .22);
}

/* ---------- 3. Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--sr-header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--sr-bg);
	color: var(--sr-text);
	font-family: var(--sr-font-body);
	font-size: var(--sr-t-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
.sr-icon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .15em; }
button { font: inherit; color: inherit; }
::selection { background: var(--sr-rot); color: #fff; }
:focus-visible { outline: 3px solid var(--sr-fokus); outline-offset: 3px; }
.sr-auf-rot :focus-visible, .sr-auf-schwarz :focus-visible { outline-color: #fff; }
.sr-skip {
	position: absolute; left: var(--sr-s4); top: -100%;
	background: var(--sr-schwarz); color: #fff; padding: var(--sr-s3) var(--sr-s4); z-index: 100;
	font-family: var(--sr-font-display); font-weight: 800; text-transform: uppercase; text-decoration: none;
}
.sr-skip:focus { top: var(--sr-s4); }

/* ---------- 4. Typografie ---------- */
h1, h2, h3, h4, .sr-display, .sr-h1, .sr-h2, .sr-h3, .sr-h4 {
	margin: 0;
	font-family: var(--sr-font-display);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -.028em;
	line-height: .96;
	text-wrap: balance;
	color: inherit;
	hyphens: manual;
}
.sr-display { font-size: var(--sr-t-display); letter-spacing: -.035em; line-height: .94; }
h1, .sr-h1 { font-size: var(--sr-t-h1); }
h2, .sr-h2 { font-size: var(--sr-t-h2); }
h3, .sr-h3 { font-size: var(--sr-t-h3); line-height: 1.05; }
h4, .sr-h4 { font-size: var(--sr-t-h4); line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.sr-lead { font-size: var(--sr-t-lead); font-weight: 300; line-height: 1.45; text-wrap: pretty; }
.sr-klein { font-size: var(--sr-t-klein); }
.sr-meta {
	font-size: var(--sr-t-meta); font-weight: 500; color: var(--sr-text-2);
	letter-spacing: .01em;
}
.sr-meta .sr-icon { color: var(--sr-rot); margin-right: .35em; }
.sr-auf-rot .sr-meta .sr-icon, .sr-auf-schwarz .sr-meta .sr-icon { color: currentColor; }
.sr-auf-rot .sr-meta, .sr-auf-schwarz .sr-meta { color: rgba(255, 255, 255, .92); } /* .92 auf Rot = 5:1 (WCAG AA) */
.sr-label {
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: var(--sr-t-meta); text-transform: uppercase; letter-spacing: .08em; line-height: 1;
}

/* Eyebrow: Stern + Label. Sagt, in welchem Bereich man ist. */
.sr-eyebrow {
	display: inline-flex; align-items: center; gap: .6em;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: var(--sr-t-meta); text-transform: uppercase; letter-spacing: .09em; line-height: 1;
	color: var(--sr-rot); margin: 0 0 var(--sr-s4);
}
.sr-eyebrow::before { content: ""; width: .95em; height: .95em; background: currentColor; -webkit-mask: var(--sr-stern) center / contain no-repeat; mask: var(--sr-stern) center / contain no-repeat; flex: none; }
.sr-auf-rot .sr-eyebrow, .sr-auf-schwarz .sr-eyebrow { color: #fff; }

/* Fließtext in Beiträgen */
.sr-prose { max-width: var(--sr-container-schmal); }
.sr-prose > * + * { margin-top: 1.25em; }
.sr-prose h2 { margin-top: 2em; font-size: var(--sr-t-h2); text-wrap: balance; }
.sr-prose :is(h2, h3, h4) + * { margin-top: .7em; }
.sr-prose h3 { margin-top: 1.75em; }
.sr-prose h4 { margin-top: 1.5em; }
/* Kleine Überschriftsstufen aus Altbeiträgen (h5/h6 als Zwischenüberschrift genutzt): lesbar wie h4 */
.sr-prose :is(h5, h6) { margin: 1.5em 0 0; font-family: var(--sr-font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: var(--sr-t-h4); line-height: 1.15; letter-spacing: -.01em; color: var(--sr-text); }
.sr-prose :is(h5, h6) + * { margin-top: .7em; }
/* Fußnoten: kleiner, mit Haarlinie vom Text getrennt */
.sr-prose .wp-block-footnotes { margin-top: 2.5em; padding-top: 1.25em; border-top: 1px solid var(--sr-linie); }
.sr-prose .wp-block-footnotes li { font-size: var(--sr-t-klein); line-height: 1.55; }
.sr-prose sup a { text-decoration: none; font-weight: 600; }
.sr-prose p { margin-bottom: 0; }
.sr-prose p, .sr-prose li { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.65; }
.sr-prose strong { font-weight: 600; }
.sr-prose a { color: var(--sr-rot); text-decoration-thickness: .09em; }
.sr-prose a:hover { color: var(--sr-rot-dunkel); }
.sr-prose ul, .sr-prose ol { padding-left: 1.25em; }
.sr-prose li + li { margin-top: .35em; }
.sr-prose li::marker { color: var(--sr-rot); font-weight: 600; }
.sr-prose blockquote {
	margin: 2em 0; padding: 0 0 0 1.25em; border-left: 4px solid var(--sr-rot);
	font-weight: 300; font-size: var(--sr-t-lead); line-height: 1.4;
}
.sr-prose blockquote p { font-size: inherit; }
.sr-prose figure { margin: 2em 0; }
.sr-prose figcaption { margin-top: .6em; font-size: var(--sr-t-meta); color: var(--sr-text-2); }
.sr-prose img { width: 100%; }
.sr-prose hr { border: 0; height: auto; margin: 2.5em 0; }
.sr-prose hr, .sr-trenner {
	display: flex; align-items: center; gap: var(--sr-s4);
}
.sr-prose hr::before, .sr-trenner::before {
	content: ""; width: .9rem; height: .9rem; flex: none; background: var(--sr-rot);
	-webkit-mask: var(--sr-stern) center / contain no-repeat; mask: var(--sr-stern) center / contain no-repeat;
}
.sr-prose hr::after, .sr-trenner::after { content: ""; flex: 1; height: 1px; background: var(--sr-text); }
.sr-auf-rot .sr-trenner::before, .sr-auf-rot .sr-trenner::after,
.sr-auf-schwarz .sr-trenner::before, .sr-auf-schwarz .sr-trenner::after { background: #fff; }
.sr-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sr-s4); }
.sr-prose .wp-block-button { margin: 0; }
.sr-prose .wp-block-button__link, .sr-prose a.wp-element-button {
	display: inline-flex; align-items: center; gap: .7em; min-height: 3.125rem; padding: .8em 1.5rem;
	background: var(--sr-rot) !important; color: #fff !important;
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	font-family: var(--sr-font-display) !important; font-style: italic !important; font-weight: 800 !important;
	font-size: .9375rem !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: .05em;
	text-decoration: none !important; transition: background var(--sr-dauer) var(--sr-ease);
}
.sr-prose .wp-block-button__link:hover, .sr-prose a.wp-element-button:hover { background: var(--sr-rot-dunkel) !important; }
/* Content-Buttons tragen wie alle Buttons ein Richtungs-Icon: Pfeil, bei PDF ein Download-Pfeil. */
.sr-prose .wp-block-button__link::after, .sr-prose a.wp-element-button::after { content: ""; width: 1.1em; height: 1.1em; flex: none; background: currentColor; -webkit-mask: var(--sr-ico-pfeil) center / contain no-repeat; mask: var(--sr-ico-pfeil) center / contain no-repeat; transition: transform var(--sr-dauer) var(--sr-ease); }
.sr-prose .wp-block-button__link:hover::after { transform: translateX(.25em); }
.sr-prose .wp-block-button__link[href$=".pdf"]::after, .sr-prose a.wp-element-button[href$=".pdf"]::after { -webkit-mask-image: var(--sr-ico-download); mask-image: var(--sr-ico-download); }
.sr-prose .wp-block-button__link[href$=".pdf"]:hover::after { transform: translateY(.15em); }
.sr-prose :is(.has-small-font-size, .has-medium-font-size, .has-large-font-size, .has-x-large-font-size) { font-size: inherit; }
/* Gutenberg-Dateiblock aus Bestandsinhalten: Name links, Button rechts */
.sr-prose .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-s4); padding: var(--sr-s4) var(--sr-s6); background: var(--sr-flaeche); border-left: 4px solid var(--sr-rot); margin-block: 2em; }
.sr-prose .wp-block-file > a:first-child { flex: 1; font-weight: 500; color: var(--sr-text); text-decoration: none; }
.sr-prose .wp-block-file > a:first-child:hover { color: var(--sr-rot); }
.sr-prose .wp-block-file__button {
	background: var(--sr-rot) !important; color: #fff !important; border-radius: 0 !important;
	padding: .8em 1.4rem !important; font-family: var(--sr-font-display) !important; font-style: italic !important;
	font-weight: 800 !important; font-size: .8125rem !important; text-transform: uppercase; letter-spacing: .05em;
	text-decoration: none !important; opacity: 1 !important;
}
.sr-prose .wp-block-file__button:hover { background: var(--sr-rot-dunkel) !important; }
.sr-prose .has-text-align-center { text-align: left; }
.sr-prose .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }
.sr-prose .wp-block-buttons.is-content-justification-center { justify-content: center; }
/* Core-Block-CSS ist abgeschaltet: Embeds, Ausrichtung, Galerie, Spalten, Tabellen selbst tragen */
.sr-prose .wp-block-embed { margin: 2em 0; }
.sr-prose .wp-block-embed__wrapper { position: relative; }
.sr-prose .wp-block-embed__wrapper iframe, .sr-prose iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.sr-prose .alignleft { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.sr-prose .alignright { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
.sr-prose .aligncenter { margin-inline: auto; }
.sr-prose .alignwide, .sr-prose .alignfull { max-width: 100%; }
.sr-prose .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sr-s3); margin: 2em 0; }
.sr-prose .wp-block-gallery figure { margin: 0; }
.sr-prose .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.sr-prose .wp-block-columns { display: grid; gap: var(--sr-s6); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 2em 0; }
.sr-prose .wp-block-column > :first-child { margin-top: 0; }
.sr-prose table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: var(--sr-t-klein); }
.sr-prose th, .sr-prose td { text-align: left; padding: .6em .8em; border-bottom: 1px solid var(--sr-grau-300); vertical-align: top; }
.sr-prose th { font-family: var(--sr-font-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: var(--sr-t-meta); }
@media (max-width: 40em) { .sr-prose .alignleft, .sr-prose .alignright { float: none; max-width: 100%; margin: 1.5em 0; } }
.sr-prose > figure:first-child, .sr-prose > *:first-child { margin-top: 0; }
.sr-prose .wp-block-image { margin-block: 2em; }
.sr-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--sr-grau-100); padding: .1em .35em; }
/* Bausteine im Fließtext: Download-Karte ([sr_material]), Lead-Absatz, Zitatquelle, Handlungsliste (.sr-kasten) */
/* Download-Karte im Fließtext (Shortcode auf Kampagnenseiten): Fließtext-Regeln für Überschriften und Abstände greifen nicht in die Karte. */
.sr-prose .sr-download { margin-block: 2em; }
.sr-prose .sr-download__titel { margin: 0; font-size: var(--sr-t-h4); color: inherit; text-wrap: initial; }
.sr-prose .sr-download__titel a { color: inherit; text-decoration: none; }
.sr-prose .sr-download__body > * + * { margin-top: 0; }
.sr-prose .sr-download .sr-meta { color: var(--sr-rot); }
.sr-prose p.sr-lead { font-size: var(--sr-t-lead); font-weight: 300; line-height: 1.45; }
.sr-prose blockquote cite { display: block; margin-top: .6em; font-size: var(--sr-t-klein); font-style: normal; font-weight: 400; color: var(--sr-grau-700); }
.sr-prose ul.sr-kasten {
	list-style: none; margin: 1.25em 0 0; padding: var(--sr-s6); background: var(--sr-weiss-rein);
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-s4) var(--sr-s6);
}
.sr-prose ul.sr-kasten li { margin: 0; display: flex; gap: .7em; align-items: flex-start; font-weight: 500; }
.sr-prose ul.sr-kasten li::before {
	content: ""; flex: none; width: .85em; height: .85em; margin-top: .45em; background: var(--sr-rot);
	-webkit-mask: var(--sr-stern) center / contain no-repeat; mask: var(--sr-stern) center / contain no-repeat;
}
@media (max-width: 40em) { .sr-prose ul.sr-kasten { grid-template-columns: 1fr; } }
.sr-prose table { width: 100%; border-collapse: collapse; font-size: var(--sr-t-klein); }
.sr-prose th, .sr-prose td { text-align: left; padding: .6em .75em; border-bottom: 1px solid var(--sr-linie); }
.sr-prose th { font-family: var(--sr-font-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: var(--sr-t-meta); }

/* ---------- 5. Layout ---------- */
.sr-container { width: 100%; max-width: var(--sr-container); margin-inline: auto; padding-inline: var(--sr-gutter); }
.sr-container--schmal { max-width: calc(var(--sr-container-schmal) + 2 * var(--sr-gutter)); }
.sr-section { padding-block: var(--sr-section); }
/* Vor dem (schwarzen) Footer liest sich nur der Off-White-Raum als Lücke: Schluss-Sektion doppelt nach unten. */
.sr-section--schluss { padding-bottom: calc(var(--sr-section) * 2); }
/* Abstand vor dem Footer überall gleich: die letzte Sektion bekommt die volle Lücke (2×), wie zwischen zwei Sektionen.
   Greift auch, wenn sie in einem Wrapper liegt (article, [data-archiv]) oder der letzte Block ein Container ist (Termin ohne weitere Termine).
   Auf der Startseite steht das Claim-Band zuletzt; es hält denselben Abstand zum Footer. */
main > .sr-section:last-child,
main > :not(.sr-section, .sr-claimband):last-child > :is(.sr-section, .sr-container):last-child { padding-bottom: calc(var(--sr-section) * 2); }
main > .sr-claimband:last-child { margin-bottom: calc(var(--sr-section) * 2); }
.sr-aufmacher + .sr-section { padding-top: calc(var(--sr-section) * 2); }
.sr-section__kopf {
	display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sr-s8);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sr-section__kopf .sr-eyebrow { margin-bottom: var(--sr-s3); }
.sr-section__kopf > :last-child { flex: none; padding-bottom: .35em; }
.sr-grid { display: grid; gap: var(--sr-s6); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sr-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.sr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
@media (max-width: 44em) { .sr-grid--2 { grid-template-columns: 1fr; } }
.sr-stack > * + * { margin-top: var(--sr-s6); }
.sr-auf-rot { background: var(--sr-rot); color: #fff; }
.sr-auf-schwarz { background: var(--sr-schwarz); color: #fff; }
.sr-auf-weiss { background: var(--sr-flaeche); color: var(--sr-text); }
@media (max-width: 40em) {
	.sr-section__kopf { flex-direction: column; align-items: flex-start; gap: var(--sr-s4); }
	.sr-section__kopf > :last-child { padding-bottom: 0; }
}

/* ---------- 6. Signatur ---------- */
:root {
	--sr-stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 7.3 7.9.6-6 5.2 1.8 7.7L12 18.3l-6.8 4.1 1.8-7.7-6-5.2 7.9-.6z'/%3E%3C/svg%3E");
}
.sr-stern { display: inline-block; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--sr-stern) center / contain no-repeat; mask: var(--sr-stern) center / contain no-repeat; vertical-align: -.1em; }

/* Tag: schräge schwarze Marke. Das Kästchen kippt nach links, die Schrift bleibt echte Kursive. */
.sr-tag {
	display: inline-block; margin-left: .35em;
	background: var(--sr-schwarz); color: #fff;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: var(--sr-t-meta); line-height: 1; text-transform: uppercase; letter-spacing: .07em;
	padding: .62em .95em .56em; text-decoration: none;
	transform: skewX(calc(-1 * var(--sr-winkel)));
}
.sr-tag > span { display: inline-block; transform: skewX(var(--sr-winkel)); }
.sr-tag--rot { background: var(--sr-rot); }
.sr-tag--weiss { background: var(--sr-weiss-rein); color: var(--sr-rot); }
.sr-tag--gross { font-size: var(--sr-t-klein); padding: .75em 1.2em .68em; }
a.sr-tag:hover { background: var(--sr-rot); color: #fff; }
a.sr-tag--rot:hover { background: var(--sr-rot-dunkel); }
.sr-auf-rot a.sr-tag:hover { background: var(--sr-weiss-rein); color: var(--sr-rot); }

/* Schräge Fläche: Pseudo-Element wird gekippt, der Inhalt nicht. */
.sr-schraeg { position: relative; isolation: isolate; margin-inline: 1.25rem; }
.sr-schraeg.sr-auf-schwarz, .sr-schraeg.sr-auf-rot { background: transparent; }
.sr-schraeg::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sr-schwarz);
	transform: skewX(calc(-1 * var(--sr-winkel)));
}
.sr-schraeg.sr-auf-rot::before { background: var(--sr-rot); }

/* Streifen: Hairlines parallel zum Schnitt. Nur als Akzent, nie hinter Text. */
.sr-streifen {
	position: absolute; pointer-events: none;
	background: repeating-linear-gradient(
		calc(90deg - var(--sr-winkel)),
		transparent 0 7px,
		var(--sr-streifen-farbe, rgba(255, 255, 255, .6)) 7px 8px
	);
}
.sr-streifen--rot { --sr-streifen-farbe: var(--sr-rot); }

/* Horizontale Kanten (Sektionen) */
.sr-schnitt-unten { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sr-schnitt-flach)), 0 100%); padding-bottom: calc(var(--sr-section) + var(--sr-schnitt-flach)); }
.sr-schnitt-oben { clip-path: polygon(0 var(--sr-schnitt-flach), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--sr-section) + var(--sr-schnitt-flach)); }

/* ---------- 7. Bausteine ---------- */

/* Buttons */
.sr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .7em;
	min-height: 3.125rem; padding: 0 1.5rem;
	background: var(--sr-rot); color: #fff; border: 2px solid var(--sr-rot);
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: .9375rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background var(--sr-dauer) var(--sr-ease), border-color var(--sr-dauer) var(--sr-ease), color var(--sr-dauer) var(--sr-ease);
}
.sr-btn:hover { background: var(--sr-rot-dunkel); border-color: var(--sr-rot-dunkel); }
.sr-btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--sr-dauer) var(--sr-ease); }
.sr-btn:hover svg { transform: translateX(.25em); }
.sr-btn--schwarz { background: var(--sr-schwarz); border-color: var(--sr-schwarz); }
.sr-btn--schwarz:hover { background: var(--sr-rot); border-color: var(--sr-rot); }
.sr-btn--weiss { background: var(--sr-weiss-rein); border-color: var(--sr-weiss-rein); color: var(--sr-rot); }
.sr-btn--weiss:hover { background: var(--sr-schwarz); border-color: var(--sr-schwarz); color: #fff; }
.sr-btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.sr-btn--ghost:hover { background: var(--sr-text); border-color: var(--sr-text); color: var(--sr-bg); }
.sr-auf-rot .sr-btn--ghost:hover, .sr-auf-schwarz .sr-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--sr-schwarz); }
.sr-btn--klein { min-height: 2.5rem; padding: 0 1.1rem; font-size: var(--sr-t-meta); }
.sr-btn--gross { min-height: 3.625rem; padding: 0 2rem; font-size: 1.0625rem; }

/* Textlink mit Pfeil */
.sr-link {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: var(--sr-t-meta); text-transform: uppercase; letter-spacing: .07em; line-height: 1;
	color: inherit; text-decoration: none; padding-bottom: .35em; border-bottom: 2px solid var(--sr-rot);
}
.sr-link { position: relative; z-index: 1; }
.sr-teilen__link, .sr-termin__aktion { z-index: 1; }
.sr-link::before { content: ""; position: absolute; inset: -1.1em 0; }
.sr-teilen__link::before, .sr-termin__aktion::before { content: ""; position: absolute; inset: -.7em 0; }
.sr-link svg { width: 1.1em; height: 1.1em; transition: transform var(--sr-dauer) var(--sr-ease); }
.sr-link:hover { color: var(--sr-rot); }
.sr-link:hover svg { transform: translateX(.25em); }
.sr-auf-rot .sr-link, .sr-auf-schwarz .sr-link { border-color: #fff; }
.sr-auf-rot .sr-link:hover, .sr-auf-schwarz .sr-link:hover { color: #fff; opacity: .85; }

/* Header */
.sr-header { position: sticky; top: 0; z-index: 50; }
/* Blur liegt auf dem Pseudo-Element: backdrop-filter auf dem Header selbst würde das fixe Mobilmenü einsperren. */
.sr-header::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: rgba(247, 247, 247, .86);
	-webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--sr-dauer) var(--sr-ease);
}
.sr-header.is-scrolled::before { border-bottom-color: var(--sr-linie); }
.sr-header__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sr-s8); height: var(--sr-header-h); }
.sr-logo, .sr-nav__toggle { position: relative; z-index: 3; }
.sr-logo { display: inline-flex; align-items: center; flex: none; transition: opacity var(--sr-dauer) var(--sr-ease); }
.sr-logo:hover { opacity: .72; }
.sr-logo__weiss { display: none; }
.sr-logo img { height: 3.1rem; width: auto; }
.sr-nav ul { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.sr-nav a {
	position: relative; display: inline-block; padding: .5rem 0;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: .875rem; text-transform: uppercase; letter-spacing: .07em; line-height: 1;
	color: var(--sr-text); text-decoration: none;
}
.sr-nav a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sr-rot);
	transform: scaleX(0); transform-origin: left; transition: transform var(--sr-dauer) var(--sr-ease);
}
.sr-nav a:hover::after, .sr-nav .current-menu-item > a::after, .sr-nav .current-menu-ancestor > a::after, .sr-nav .current-page-ancestor > a::after, .sr-nav .current_page_parent > a::after { transform: scaleX(1); }
.sr-nav__toggle {
	display: none; width: 2.75rem; height: 2.75rem; margin-right: -.5rem; padding: 0; border: 0; background: none; cursor: pointer;
	place-content: center; gap: 5px;
}
.sr-nav__toggle span { display: block; width: 1.5rem; height: 2px; background: var(--sr-text); margin: 0; transition: transform var(--sr-dauer) var(--sr-ease), opacity var(--sr-dauer); }
.sr-nav__meta { display: none; }
/* Untermenü (z. B. Bündnisse unter Über uns): am Desktop schwarzes Panel bündig an der Header-Unterkante,
   öffnet per Hover, Fokus oder Pfeil-Knopf; eine unsichtbare Brücke hält den Hover auf dem Weg nach unten. */
.sr-nav li { position: relative; }
.sr-nav .sub-menu { display: none; margin: 0; padding: 0; list-style: none; }
.sr-nav__sub { display: none; }
.sr-chev { width: .8rem; height: .8rem; transition: transform var(--sr-dauer) var(--sr-ease); }
/* Unterpunkte: Unterstrich genau wortbreit wie bei den Hauptpunkten (Wort im span, nicht die ganze Zeile) */
.sr-nav .sub-menu a::after { content: none; }
.sr-nav__wort { position: relative; }
.sr-nav__wort::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.45rem; height: 2px; background: var(--sr-rot); transform: scaleX(0); transform-origin: left; transition: transform var(--sr-dauer) var(--sr-ease); }
.sr-nav .sub-menu a:hover .sr-nav__wort::after, .sr-nav .sub-menu .current-menu-item > a .sr-nav__wort::after { transform: scaleX(1); }
@media (min-width: 60.01em) {
	.sr-nav a { white-space: nowrap; }
	.sr-nav .menu-item-has-children { display: flex; align-items: center; }
	/* Link und Pfeil liegen über der Hover-Brücke des Panels, sonst schluckt sie Klicks */
	.sr-nav .menu-item-has-children > a, .sr-nav__sub { position: relative; z-index: 1; }
	.sr-nav__sub { display: inline-grid; place-items: center; width: 1.5rem; height: 1.75rem; margin: 0 -.5rem 0 .1rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
	.sr-nav .sub-menu { position: absolute; top: calc(50% + var(--sr-header-h) / 2); left: -1.25rem; min-width: 13rem; background: var(--sr-schwarz); }
	.sr-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--sr-header-h) / 2); }
	/* offen per Hover oder Pfeil; .is-zu hält es nach Escape/Zu-Klick geschlossen, bis die Maus den Punkt verlässt */
	.sr-nav .menu-item-has-children:is(:hover, .is-open):not(.is-zu) > .sub-menu { display: block; }
	.sr-nav .menu-item-has-children:is(:hover, .is-open):not(.is-zu) > .sr-nav__sub .sr-chev { transform: rotate(180deg); }
	.sr-nav .sub-menu a { display: block; padding: 1rem 1.25rem; color: #fff; }
	.sr-nav .sub-menu a:focus-visible { outline-color: #fff; outline-offset: -6px; }
}
@media (max-width: 60em) {
	.sr-nav__toggle { display: grid; }
	.sr-nav {
		position: fixed; inset: var(--sr-header-h) 0 0; z-index: 1; background: var(--sr-rot); color: #fff; /* unter dem Header: gescrollte Punkte laufen nie durchs Logo */
		display: flex; flex-direction: column; justify-content: space-between; gap: var(--sr-s8);
		padding: clamp(1rem, 6vh, 3.5rem) var(--sr-gutter) calc(var(--sr-s8) + env(safe-area-inset-bottom, 0px));
		opacity: 0; visibility: hidden;
		transition: opacity var(--sr-dauer) var(--sr-ease), visibility 0s var(--sr-dauer);
	}
	.sr-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
	.sr-nav ul { flex-direction: column; gap: 0; }
	.sr-nav { overflow-y: auto; overscroll-behavior: contain; }
	/* Unterpunkt: kleiner, bündig unter dem Elternpunkt, Tap-Fläche 44px */
	.sr-nav .sub-menu { display: block; margin: -.5rem 0 0; }
	.sr-nav .sub-menu a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; font-size: 1.125rem; letter-spacing: .06em; opacity: .9; }
	.sr-nav__wort::after { background: #fff; bottom: -.2em; }
	.sr-nav li { opacity: 0; }
	.sr-nav.is-open li { animation: sr-auftauchen .45s var(--sr-ease) both; }
	.sr-nav.is-open li:nth-child(1) { animation-delay: .06s; }
	.sr-nav.is-open li:nth-child(2) { animation-delay: .11s; }
	.sr-nav.is-open li:nth-child(3) { animation-delay: .16s; }
	.sr-nav.is-open li:nth-child(4) { animation-delay: .21s; }
	.sr-nav.is-open li:nth-child(5) { animation-delay: .26s; }
	.sr-nav.is-open li:nth-child(6) { animation-delay: .31s; }
	.sr-nav.is-open li:nth-child(n+7) { animation-delay: .36s; }
	.sr-nav a { color: #fff; font-size: clamp(1.875rem, 7.5vw, 2.5rem); padding: .28em 0; letter-spacing: -.015em; }
	.sr-nav a::after { background: #fff; height: 3px; bottom: .1em; }
	.sr-nav__meta { display: grid; gap: var(--sr-s4); justify-items: start; }
	.sr-nav :focus-visible { outline-color: #fff; } /* rotes Panel: roter Fokusring wäre unsichtbar */
	.sr-nav.is-open .sr-nav__meta { animation: sr-auftauchen .45s var(--sr-ease) .4s both; }
	.sr-nav__meta a { display: inline-flex; align-items: center; gap: .6em; color: #fff; font-size: var(--sr-t-klein); text-decoration: none; opacity: .92; }
	.sr-nav__meta a:hover { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; }
	.sr-nav__meta .sr-icon { font-size: 1.15em; }
	.sr-nav__claim { height: 1.15rem; width: auto; margin-top: var(--sr-s4); opacity: .95; }
	/* Header färbt sich mit: Rotfläche statt Blur, Logo weiß, X weiß */
	.is-menu-open .sr-header::before { background: var(--sr-rot); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
	.is-menu-open .sr-logo__rot { display: none; }
	.is-menu-open .sr-logo__weiss { display: block; }
	.is-menu-open .sr-logo:hover { opacity: 1; }
	.is-menu-open .sr-nav__toggle span { background: #fff; }
	.is-menu-open .sr-header :focus-visible { outline-color: #fff; } /* Logo und Schließen-Knopf liegen auf dem roten Header */
	.is-menu-open .sr-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.is-menu-open .sr-nav__toggle span:nth-child(2) { opacity: 0; }
	.is-menu-open .sr-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.is-menu-open { overflow: hidden; }
}

/* Aufmacher (Startseite): ein Beitrag wie eine Titelseite, rechts das 4:5-Bild in der 5er-Spalte des Rasters darunter.
   Darüber Segmente wie bei Stories; der Balken des aktiven Segments taktet den Wechsel. */
.sr-aufmacher { position: relative; overflow: hidden; isolation: isolate; --sr-aufmacher-takt: 6s; }
.sr-aufmacher .sr-streifen { top: 0; bottom: 0; right: 0; width: max(10rem, calc((100% - var(--sr-container)) / 2 + 2rem)); z-index: -1; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px 8px); transform: skewX(calc(-1 * var(--sr-winkel))); transform-origin: bottom right; }
.sr-aufmacher__inner {
	max-width: var(--sr-container); margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4.5rem) var(--sr-gutter); /* Rot über und unter dem Aufmacher: 72px bei 1440 (Oliver, 06.10.2026) */
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); /* wie .sr-bento__zeile: Bild = Termin-Spalte */
	gap: var(--sr-raster-g); align-items: stretch;
}
.sr-aufmacher__text { display: flex; flex-direction: column; min-width: 0; }

/* Segmente: Balken, Nummer, Kurztitel. Trefferfläche nach oben und unten erweitert (44px), ohne die Optik zu verschieben. */
.sr-aufmacher__segmente { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sr-s4); margin-block: calc(-1 * var(--sr-s3)); }
html:not(.js) .sr-aufmacher__segmente { display: none; }
.sr-aufmacher__seg {
	display: grid; gap: .55rem; align-content: start; min-width: 0; padding: var(--sr-s3) 0; border: 0; background: none;
	color: #fff; text-align: left; cursor: pointer; opacity: .9; transition: opacity var(--sr-dauer) var(--sr-ease); /* .9 auf Rot = 4,8:1; aktiv zeigt der Balken */
	font: inherit;
}
.sr-aufmacher__seg:hover, .sr-aufmacher__seg.is-aktiv { opacity: 1; }
.sr-aufmacher__seg.is-aktiv .sr-aufmacher__kurz { font-weight: 600; }
.sr-aufmacher__seg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
.sr-aufmacher__balken { position: relative; display: block; height: 3px; overflow: hidden; background: rgba(255, 255, 255, .32); }
.sr-aufmacher__balken::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.sr-aufmacher__seg.is-aktiv .sr-aufmacher__balken::after,
.sr-aufmacher.is-auto .sr-aufmacher__seg.is-gesehen .sr-aufmacher__balken::after { transform: scaleX(1); }
.sr-aufmacher.is-auto .sr-aufmacher__seg.is-aktiv .sr-aufmacher__balken::after { animation: sr-aufmacher-lauf var(--sr-aufmacher-takt) linear forwards; animation-play-state: var(--sr-aufmacher-lauf); }
/* Pause beim Lesen (Hover über Text oder Bild, nicht über den Segmenten: nach einem Klick soll der Balken sichtbar laufen),
   bei Tastaturfokus (nicht beim Mausklick-Fokus), solange ein Finger aufliegt (.is-gehalten) und wenn der Aufmacher nicht
   zu sehen ist. Hover nur mit echter Maus: auf dem iPhone bleibt :hover nach einer Berührung hängen und hielte den Balken an.
   Als Variable am Aufmacher: die animation-Kurzform oben setzt play-state sonst mit höherer Spezifität zurück. */
.sr-aufmacher { --sr-aufmacher-lauf: running; }
.sr-aufmacher:has(:focus-visible),
.sr-aufmacher.is-gehalten,
.sr-aufmacher.is-pausiert { --sr-aufmacher-lauf: paused; }
@media (hover: hover) and (pointer: fine) {
	.sr-aufmacher:has(.sr-aufmacher__texte:hover, .sr-aufmacher__bilder:hover) { --sr-aufmacher-lauf: paused; }
}
@keyframes sr-aufmacher-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sr-aufmacher__nr { font-family: var(--sr-font-display); font-style: italic; font-weight: 900; font-size: .75rem; line-height: 1; letter-spacing: .08em; }
.sr-aufmacher__kurz { margin-top: -.2rem; font-size: var(--sr-t-meta); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Beiträge übereinander im selben Feld: Höhe = die des längsten, unten bündig mit dem Bild. */
.sr-aufmacher__texte { display: grid; margin-top: auto; padding-top: var(--sr-s6); color: #fff; }
.sr-aufmacher__beitrag {
	grid-area: 1 / 1; align-self: end; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
	opacity: 0; visibility: hidden; transform: translateY(.5rem);
	transition: opacity .2s var(--sr-ease), transform .2s var(--sr-ease), visibility 0s linear .2s;
}
.sr-aufmacher__beitrag.is-aktiv {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .45s var(--sr-ease) .15s, transform .45s var(--sr-ease) .15s, visibility 0s;
}
.sr-aufmacher__tags { display: flex; flex-wrap: wrap; gap: var(--sr-s2); margin-bottom: var(--sr-s6); }
.sr-aufmacher__titel { font-size: var(--sr-t-h1); max-width: 12ch; padding-top: .08em; }
.sr-aufmacher__titel--mittel { font-size: clamp(2rem, 1rem + 2.8vw, 3.25rem); max-width: 16ch; }
.sr-aufmacher__titel--lang { font-size: var(--sr-t-h2); max-width: 20ch; }
.sr-aufmacher__titel a { color: inherit; text-decoration: none; }
.sr-aufmacher__titel a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .1em; }
.sr-aufmacher__teaser {
	margin: var(--sr-s6) 0 0; max-width: 34rem; font-size: var(--sr-t-lead); font-weight: 300; line-height: 1.45; text-wrap: pretty;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sr-aufmacher__beitrag .sr-meta { display: flex; flex-wrap: wrap; gap: var(--sr-s4); margin: var(--sr-s6) 0 0; }
.sr-aufmacher__beitrag .sr-link { margin-top: var(--sr-s6); }

/* 4:5-Bild. Höhe über ::before mit padding-top statt aspect-ratio: WebKit gibt einem Grid-Element mit aspect-ratio
   und nur absolut positionierten Kindern 0×0 (iPhone zeigte im alten Slider kein Bild). */
.sr-aufmacher__bilder { position: relative; display: grid; align-self: start; overflow: hidden; background: var(--sr-rot-dunkel); box-shadow: 0 26px 56px -24px rgba(0, 0, 0, .55); }
.sr-aufmacher__bilder::before { content: ""; grid-area: 1 / 1; display: block; padding-top: 125%; }
.sr-aufmacher__bild { grid-area: 1 / 1; position: relative; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .45s var(--sr-ease); }
.sr-aufmacher__bild.is-aktiv { opacity: 1; pointer-events: auto; }
.sr-aufmacher__bild img, .sr-aufmacher__bild .sr-platzhalter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--sr-dauer-lang) var(--sr-ease); }
.sr-aufmacher__bild:hover img { transform: scale(1.03); }

/* Unter voller Containerbreite wird das Bild niedriger als Schlagzeile + Teaser: der Teaser entfällt (der Titel trägt),
   damit „Weiterlesen“ weiter mit der Bildunterkante abschließt. */
@media (min-width: 40.01em) and (max-width: 74.99em) {
	.sr-aufmacher__teaser { display: none; }
}
/* Tablet hoch: Text und Bild je halb, Segmente nur mit Nummer. */
@media (min-width: 40.01em) and (max-width: 52em) {
	.sr-aufmacher__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sr-aufmacher .sr-streifen { display: none; }
	.sr-aufmacher__kurz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	/* Halbe Spalte: Schrift an der Spaltenbreite, damit auch ein 13-Zeichen-Wort (ab 14 trennt .sr-brechen) nicht ins Bild ragt. */
	.sr-aufmacher__titel { font-size: clamp(1.75rem, 5.8vw, 2.75rem); max-width: none; }
	.sr-aufmacher__titel--mittel { font-size: clamp(1.5rem, 4.6vw, 2.25rem); }
	.sr-aufmacher__titel--lang { font-size: clamp(1.375rem, 3.8vw, 1.875rem); }
}
/* Handy: Segmente, Bild, Text untereinander. Der Text steht oben bündig unter dem Bild. */
@media (max-width: 40em) {
	.sr-aufmacher .sr-streifen { display: none; }
	.sr-aufmacher__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--sr-s6); }
	.sr-aufmacher__text { display: contents; }
	.sr-aufmacher__segmente { order: -2; }
	.sr-aufmacher__bilder { order: -1; }
	.sr-aufmacher__kurz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sr-aufmacher__texte { padding-top: 0; }
	.sr-aufmacher__beitrag { align-self: start; }
	.sr-aufmacher__titel, .sr-aufmacher__titel--mittel { font-size: clamp(2rem, 8vw, 2.75rem); max-width: none; }
	.sr-aufmacher__titel--lang { font-size: clamp(1.625rem, 6.4vw, 2.125rem); max-width: none; }
	.sr-aufmacher__teaser { -webkit-line-clamp: 4; }
}

/* Platzhalter statt fehlendem Beitragsbild */
.sr-platzhalter { position: relative; width: 100%; height: 100%; min-height: 100%; background: var(--sr-rot); overflow: hidden; isolation: isolate; display: grid; place-items: center; color: #fff; }
.sr-karte__bild .sr-platzhalter { position: absolute; inset: 0; }
.sr-platzhalter .sr-streifen { inset: -10% -10% -10% 55%; z-index: -1; opacity: .6; clip-path: polygon(calc(var(--sr-tan) * 100%) 0, 100% 0, 100% 100%, 0 100%); }
.sr-platzhalter .sr-stern { font-size: 3rem; opacity: .9; }

/* Seitenkopf (innere Seiten): schlicht, viel Luft */
.sr-seitenkopf { position: relative; isolation: isolate; overflow-x: clip; padding: var(--sr-section) 0 0; }
/* Marken-Moment auch im hellen Kopf: rote Hairlines am rechten Seitenrand, hinter dem Inhalt.
   Vertikale Linien in einem um 9° geneigten Rechteck: Kante und Linien exakt parallel,
   antialiased, unten rechts am Rand verankert. Mobil aus. */
.sr-seitenkopf::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	top: 0; bottom: 0; right: 0;
	width: max(10rem, calc((100% - var(--sr-container)) / 2 + 2rem));
	background: repeating-linear-gradient(90deg, var(--sr-rot) 0 1px, transparent 1px 14px);
	transform: skewX(calc(-1 * var(--sr-winkel))); transform-origin: bottom right;
}
@media (max-width: 52em) { .sr-seitenkopf::after { display: none; } }
.sr-seitenkopf .sr-lead { max-width: 40rem; margin-top: var(--sr-s6); color: var(--sr-grau-700); }
.sr-seitenkopf__zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sr-s8); }
.sr-seitenkopf__zeile .sr-suche { flex: 0 1 22rem; margin-bottom: .3rem; }
.sr-seitenkopf .sr-eyebrow { margin-bottom: var(--sr-s3); }
/* Kopf-Regel: Hell = Seite, Rot = ein Stück Inhalt. Eine Seite mit Bild zeigt es als breites Bild UNTER dem hellen Kopf. */
.sr-seitenbild { margin: var(--sr-s12) 0 0; aspect-ratio: 21 / 9; overflow: hidden; position: relative; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .38); }
.sr-seitenbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40em) { .sr-seitenbild { aspect-ratio: 4 / 3; } }
@media (max-width: 48em) { .sr-seitenkopf__zeile { flex-direction: column; align-items: stretch; } .sr-seitenkopf__zeile .sr-suche { flex-basis: auto; } }

/* Filterleiste: Kategorien als Tag-Reihe */
.sr-filter { display: flex; flex-wrap: wrap; gap: var(--sr-s3) var(--sr-s4); margin-top: var(--sr-s8); }
.sr-filter__tag {
	display: inline-block; padding: .6em .95em .54em;
	background: var(--sr-flaeche); color: var(--sr-text); border: 1px solid var(--sr-grau-300);
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: var(--sr-t-meta); line-height: 1; text-transform: uppercase; letter-spacing: .07em;
	text-decoration: none; transform: skewX(calc(-1 * var(--sr-winkel)));
	transition: background var(--sr-dauer) var(--sr-ease), color var(--sr-dauer) var(--sr-ease), border-color var(--sr-dauer) var(--sr-ease);
}
.sr-filter__tag > span { display: inline-block; transform: skewX(var(--sr-winkel)); }
.sr-filter__tag:hover { border-color: var(--sr-schwarz); color: var(--sr-schwarz); }
.sr-filter__tag.is-aktiv { background: var(--sr-schwarz); border-color: var(--sr-schwarz); color: #fff; }
/* Mehrere Filterreihen (Theorie & Praxis: Art, Thema): Label links in fester Spalte, Chips bündig untereinander.
   Das Label ist so hoch wie ein Chip und mittig gesetzt, damit es auf der Schriftlinie der ersten Chip-Zeile steht. */
.sr-filter-gruppe { display: grid; gap: var(--sr-s4); margin-top: var(--sr-s8); }
.sr-filter-zeile { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; gap: var(--sr-s4); margin: 0; }
.sr-filter-zeile .sr-filter { margin-top: 0; }
.sr-filter-zeile__label { display: flex; align-items: center; min-height: calc(2.14em + 2px); color: var(--sr-text-2); }
/* Themen als Auswahlfeld (ab mehr als 8 Themen): gleiche Schrift und Kante wie ein Chip, Pfeil rechts. */
.sr-filter__auswahl {
	appearance: none; -webkit-appearance: none; width: min(100%, 20rem); margin: 0; border-radius: 0; cursor: pointer;
	padding: .6em 2.6em .54em .95em; border: 1px solid var(--sr-grau-300); color: var(--sr-text);
	background: var(--sr-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8em center / 1.1em;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: var(--sr-t-meta); line-height: 1; text-transform: uppercase; letter-spacing: .07em;
	transition: border-color var(--sr-dauer) var(--sr-ease);
}
.sr-filter__auswahl:hover { border-color: var(--sr-schwarz); }
/* Nach Maus/Touch-Filtern kein Fokusring auf dem neu fokussierten Chip; bei Tastaturbedienung bleibt er (JS: .is-zeiger). */
[data-archiv].is-zeiger :focus-visible { outline: none; }
/* Kontrastmodus: aktiver Chip über Systemfarben, Auswahlfeld mit nativem Pfeil. */
@media (forced-colors: active) {
	.sr-filter__tag.is-aktiv { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
	.sr-filter__auswahl { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: .95em; }
}
/* Themen: Chips ab Tablet, Auswahlfeld auf dem Handy (oder überall, wenn es mehr als 8 Themen sind: .is-immer). */
.sr-filter-zeile--auswahl:not(.is-immer) { display: none; }
@media (max-width: 40em) {
	.sr-filter-zeile--chips { display: none; }
	.sr-filter-zeile--auswahl:not(.is-immer) { display: grid; }
	.sr-filter__auswahl { width: 100%; }
}
/* Lange Themennamen („Öffentlichkeitsarbeit“) sprengen die Karte nicht: das Thema rutscht als Ganzes in die nächste Zeile
   und wird nur getrennt, wenn es allein breiter ist als die Spalte. */
.sr-download .sr-eyebrow { align-items: flex-start; line-height: 1.25; overflow-wrap: break-word; }
.sr-download .sr-eyebrow::before { margin-top: .15em; } /* Stern auf der ersten Zeile */
.sr-download__thema { display: inline-block; max-width: 100%; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 6 5; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 5; }
/* Material: zweispaltig erst ab 52em; darunter bliebe neben der Vorschau zu wenig Platz für Titel und Text. */
@media (max-width: 52em) { .sr-material-seite .sr-grid--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40em) {
	.sr-filter-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--sr-s3); }
}
.sr-archiv__anzahl { margin: 0 0 var(--sr-s6); }
[data-archiv] { transition: opacity .2s var(--sr-ease); }
[data-archiv].is-laden { opacity: .5; pointer-events: none; }

/* Einzelbeitrag */
.sr-beitrag__kopf { padding: calc(var(--sr-section) * .9) 0; }
.sr-beitrag__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sr-s12); align-items: center; }
.sr-beitrag__kopf--bild .sr-beitrag__raster { grid-template-columns: minmax(0, 1fr) clamp(15rem, 24vw, 22rem); }
.sr-beitrag__kopfbild { aspect-ratio: 1 / 1; overflow: hidden; position: relative; margin: 0; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .38); }
.sr-beitrag__kopfbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-beitrag__kopfbild--hoch { aspect-ratio: 4 / 5; } /* Beitragsbild 4:5 wie Instagram; Kampagnenfotos bleiben quadratisch */
@media (max-width: 52em) {
	.sr-beitrag__kopf--bild .sr-beitrag__raster { grid-template-columns: 1fr; }
	.sr-beitrag__kopfbild { max-width: 22rem; }
}
@media (max-width: 40em) {
	.sr-beitrag__kopfbild { max-width: none; }
}
.sr-beitrag__kopf .sr-tag { margin: 0 0 var(--sr-s6) .35em; }
.sr-beitrag__kopf h1 { max-width: 18ch; }
.sr-beitrag__kopf .sr-meta { display: flex; flex-wrap: wrap; gap: var(--sr-s4); margin: var(--sr-s6) 0 0; }
.sr-beitrag__kopf .sr-lead { margin: var(--sr-s6) 0 0; max-width: 34rem; }
/* Standardseite: Bild, Unterseiten-Navigation */
.sr-seite__bild { margin: 0 0 var(--sr-s12); }
.sr-seite__bild img { width: 100%; height: auto; }
.sr-unterseiten { display: grid; gap: var(--sr-s3); margin-top: var(--sr-section); }
.sr-unterseite {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sr-s4);
	padding: var(--sr-s4) var(--sr-s6); background: var(--sr-flaeche); text-decoration: none;
	border-left: 4px solid var(--sr-rot);
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	text-transform: uppercase; letter-spacing: .03em; font-size: var(--sr-t-h4);
	transition: transform var(--sr-dauer) var(--sr-ease), color var(--sr-dauer) var(--sr-ease);
}
.sr-unterseite .sr-icon { color: var(--sr-rot); font-size: 1.2em; transition: transform var(--sr-dauer) var(--sr-ease); }
.sr-unterseite:hover { transform: translateX(4px); color: var(--sr-rot); }
.sr-unterseite:hover .sr-icon { transform: translateX(.25em); }

/* Über uns: Weg-Timeline. Linie mit Stern-Stationen, Jahr in Rot. */
.sr-weg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sr-s8); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.sr-weg li { position: relative; padding-top: var(--sr-s6); }
.sr-weg li::before { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * var(--sr-s8)); height: 2px; background: var(--sr-schwarz); }
.sr-weg li:last-child::before { right: 0; }
.sr-weg li::after {
	content: ""; position: absolute; top: -.55rem; left: 0; width: 1.15rem; height: 1.15rem;
	background: var(--sr-rot); -webkit-mask: var(--sr-stern) center / contain no-repeat; mask: var(--sr-stern) center / contain no-repeat;
}
.sr-weg__jahr {
	display: block; font-family: var(--sr-font-display); font-style: italic; font-weight: 900;
	text-transform: uppercase; letter-spacing: -.025em; line-height: .95; color: var(--sr-rot);
	font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.5rem);
}
.sr-weg__text { margin: var(--sr-s3) 0 0; font-size: var(--sr-t-klein); color: var(--sr-grau-700); max-width: 30ch; }
@media (max-width: 46em) {
	.sr-weg { grid-template-columns: 1fr; gap: var(--sr-s8); }
	.sr-weg li { padding-top: 0; padding-left: var(--sr-s8); }
	.sr-weg li::before { top: -.25rem; bottom: calc(-1 * var(--sr-s8)); left: .5rem; right: auto; width: 2px; height: auto; }
	.sr-weg li:last-child::before { bottom: 0; }
	.sr-weg li::after { top: 0; left: 0; }
}

/* Medienblock: Bild und Inhalt nebeneinander auf weißer Fläche */
.sr-medien { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--sr-flaeche); overflow: hidden; }
.sr-medien__bild { position: relative; min-height: 18rem; overflow: hidden; display: block; }
.sr-medien__bild img, .sr-medien__bild .sr-platzhalter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--sr-dauer-lang) var(--sr-ease); }
.sr-medien:hover .sr-medien__bild img { transform: scale(1.04); }
.sr-medien__inhalt { padding: clamp(1.5rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sr-s4); }
.sr-medien__inhalt .sr-eyebrow { margin: 0; }
.sr-medien__inhalt p:not(.sr-eyebrow) { margin: 0; max-width: 52ch; color: var(--sr-grau-700); }
.sr-medien__inhalt .sr-btn { margin-top: var(--sr-s2); }
.sr-medien--rechts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sr-medien--rechts .sr-medien__bild { order: 2; }
.sr-buendnisse__liste { display: grid; gap: var(--sr-section); }

/* Partner-Karte: Logo + Name + Link im Kopf, Foto, Text zweispaltig */
.sr-partner { background: var(--sr-flaeche); padding: clamp(1.5rem, 4vw, 3rem); }
.sr-partner__kopf { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; align-items: center; gap: var(--sr-s6); margin-bottom: var(--sr-s6); }
.sr-partner__kopf:not(:has(.sr-partner__logo)) { grid-template-columns: minmax(0, 1fr) auto; }
.sr-partner__logo { width: 8rem; height: 3.75rem; object-fit: contain; object-position: left center; }
.sr-partner__name { font-size: var(--sr-t-h2); }
.sr-partner__link { justify-self: end; }
.sr-partner__foto { position: relative; margin: 0 0 var(--sr-s8); aspect-ratio: 5 / 2; overflow: hidden; }
.sr-partner__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
/* Fokus-Feintuning der aktuellen Demo-Fotos: Karte 3 hat Personen statt Transparent im Zentrum. */
.sr-partner:nth-child(3) .sr-partner__foto img { object-position: center 32%; }
.sr-partner__text { columns: 2; column-gap: var(--sr-s12); max-width: 100%; }
.sr-partner__text p { margin: 0 0 1.6em; font-size: var(--sr-t-klein); line-height: 1.6; orphans: 2; widows: 2; }
.sr-partner__text p:last-child { margin-bottom: 0; }
.sr-partner__text a { color: var(--sr-rot); }
@media (max-width: 56em) {
	.sr-partner__text { columns: 1; }
}
@media (max-width: 44em) {
	.sr-partner__kopf { grid-template-columns: 1fr; gap: var(--sr-s4); justify-items: start; }
	.sr-partner__logo { height: 3.25rem; }
	.sr-partner__link { justify-self: start; }
	.sr-partner__foto { aspect-ratio: 16 / 10; }
}

@media (max-width: 52em) {
	.sr-medien { grid-template-columns: 1fr; }
	.sr-medien__bild { min-height: 0; aspect-ratio: 16 / 9; order: 0 !important; }
}

.sr-ueber__zitat { margin: 0; }
.sr-ueber__zitat p { margin: 0; font-size: var(--sr-t-h2); max-width: 20ch; text-wrap: balance; }
.sr-ueber__zitat p::before { content: "„"; }
.sr-ueber__zitat p::after { content: "“"; }

/* Termin-Detailkopf: Text links, Wann-und-wo-Karte rechts */
.sr-terminkopf { display: grid; grid-template-columns: minmax(0, 1fr) clamp(19rem, 30vw, 24rem); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sr-terminkopf .sr-meta { display: none; }
.sr-terminkarte { background: var(--sr-flaeche); color: var(--sr-text); padding: var(--sr-s6); display: grid; gap: var(--sr-s6); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .35); }
.sr-terminkarte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sr-s4); }
.sr-terminkarte li { display: flex; gap: var(--sr-s3); align-items: flex-start; font-size: var(--sr-t-klein); line-height: 1.45; }
.sr-terminkarte li .sr-icon { color: var(--sr-rot); font-size: 1.25em; margin-top: .3em; }
.sr-terminkarte__label { display: block; font-family: var(--sr-font-display); font-style: italic; font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sr-text-2); margin-bottom: .15em; }
.sr-terminkarte .sr-btn { width: 100%; }
.sr-terminkarte .sr-btn + .sr-btn { margin-top: calc(-1 * var(--sr-s3)); }
.sr-terminkarte__hinweis { margin: 0; font-size: var(--sr-t-klein); color: var(--sr-text-2); }
@media (max-width: 52em) {
	.sr-terminkopf { grid-template-columns: 1fr; }
	.sr-terminkarte { max-width: none; }
}
.sr-brechen { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; hyphenate-limit-chars: 14 8 6; -webkit-hyphenate-limit-before: 8; -webkit-hyphenate-limit-after: 6; }
.sr-beitrag__text { padding-bottom: var(--sr-s4); }
.sr-beitrag__text:last-child { padding-bottom: 0; } /* Termin ohne weitere Termine: der Footer-Abstand kommt vom Container. */
.sr-beitrag__kopf + .sr-container > .sr-prose:first-child { padding-top: var(--sr-s12); }

/* Teilen-Zeile */
.sr-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-s4) var(--sr-s6); margin-top: var(--sr-s8); padding-top: var(--sr-s6); border-top: 1px solid var(--sr-linie); }
.sr-teilen .sr-label { color: var(--sr-text-2); }
.sr-teilen__link {
	position: relative; display: inline-flex; align-items: center; gap: .5em; padding: 0; border: 0; background: none; cursor: pointer;
	font-family: var(--sr-font-body); font-size: var(--sr-t-klein); font-weight: 500; color: var(--sr-text);
	text-decoration: none; transition: color var(--sr-dauer) var(--sr-ease);
}
.sr-teilen__link .sr-icon { color: var(--sr-rot); font-size: 1.15em; }
.sr-teilen__link:hover { color: var(--sr-rot); }

/* 404 */
.sr-fehler .sr-display { margin: var(--sr-s4) 0 var(--sr-s6); }

/* Beitragskarte */
.sr-karte {
	position: relative; display: flex; flex-direction: column; background: var(--sr-flaeche); container-type: inline-size;
	transition: transform var(--sr-dauer) var(--sr-ease), box-shadow var(--sr-dauer) var(--sr-ease);
}
.sr-karte__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sr-grau-100); } /* 4:5 wie Instagram */
.sr-karte__bild img { position: absolute; inset: 0; }
.sr-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sr-dauer-lang) var(--sr-ease); }
.sr-karte__tag {
	/* Kategorie als rote Zeile über dem Titel (wie in der Deck-Liste) – nichts liegt auf der Grafik */
	position: relative; z-index: 2; align-self: flex-start; padding: var(--sr-s6) var(--sr-s6) 0;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800; font-size: .75rem; line-height: 1.2;
	text-transform: uppercase; letter-spacing: .08em; color: var(--sr-rot); text-decoration: none;
}
.sr-karte__tag:hover { color: var(--sr-rot-dunkel); }
.sr-karte__body { display: flex; flex-direction: column; flex: 1; padding: var(--sr-s2) var(--sr-s6) var(--sr-s6); gap: var(--sr-s3); }
.sr-karte__bild + .sr-karte__body { padding-top: var(--sr-s6); }
.sr-karte__titel { font-size: var(--sr-t-h3); line-height: 1.12; padding-top: .12em; margin-top: -.12em; /* Luft für Umlautpunkte im Clamp-Rahmen */ hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 8 6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sr-karte__titel a { text-decoration: none; }
.sr-karte__titel a::after { content: ""; position: absolute; inset: 0; }
.sr-karte__text { margin: 0; color: var(--sr-grau-700); font-size: var(--sr-t-klein); line-height: 1.55; hyphens: manual; -webkit-hyphens: manual; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sr-karte__meta { display: flex; flex-wrap: wrap; gap: var(--sr-s4); margin-top: auto; padding-top: var(--sr-s4); border-top: 1px solid var(--sr-linie); }
.sr-karte__meta span { display: inline-flex; align-items: center; gap: .4em; }
.sr-karte__meta svg { width: 1em; height: 1em; color: var(--sr-rot); }
@media (hover: hover) {
	.sr-karte:hover { transform: translateY(-4px); box-shadow: var(--sr-schatten); }
	.sr-karte:hover .sr-karte__bild img { transform: scale(1.04); }
	.sr-karte:hover .sr-karte__titel { color: var(--sr-rot); }
}
/* Schmale Bildschirme: Karten zweispaltig und kompakt (Kategorie, Titel ganz, Datum) – 4:5 einspaltig wäre endlos lang */
@media (max-width: 40em) {
	.sr-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-s4); }
	.sr-karte__tag { padding: var(--sr-s4) var(--sr-s4) 0; font-size: .6875rem; letter-spacing: .04em; max-width: 100%; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
	.sr-karte__body { padding: var(--sr-s2) var(--sr-s4) var(--sr-s4); gap: var(--sr-s2); }
	.sr-karte__bild + .sr-karte__body { padding-top: var(--sr-s4); }
	.sr-karte__titel { font-size: 1.0625rem; display: block; -webkit-line-clamp: unset; overflow: visible; padding-top: 0; margin-top: 0; }
	.sr-karte__text { display: none; }
	.sr-karte__meta { padding-top: var(--sr-s3); }
	.sr-karte__meta > :not(:first-child) { display: none; }
}
/* „Weiterlesen“: unter drei Spalten nur zwei Karten, nie eine einzelne in einer zweiten Reihe.
   58.6875em = Umschlagpunkt von .sr-grid--3 (auto-fill, minmax 17rem, Abstand --sr-s6, Innenkante 4vw) – ändert sich einer der Werte, mitziehen. */
@media (max-width: 58.6875em) { .sr-weiterlesen .sr-karte:nth-child(3) { display: none; } }
/* Schmale Karte (< 268px): nur das Datum, sonst bricht die Meta zweizeilig um */
@container (max-width: 16.75rem) { .sr-karte__meta > :not(:first-child) { display: none; } }

/* Termin-Liste */
.sr-termine { list-style: none; margin: 0; padding: 0; }
.sr-termin { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sr-s4) var(--sr-s6); padding: var(--sr-s6) 0; border-top: 1px solid var(--sr-linie); position: relative; }
.sr-termin:last-child { border-bottom: 1px solid var(--sr-linie); }
.sr-termin__datum {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
	background: var(--sr-rot); color: #fff; padding: .55rem 0 .5rem; align-self: start;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 900; line-height: 1;
}
.sr-termin__tag { font-size: 1.75rem; letter-spacing: -.03em; }
.sr-termin__monat { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.sr-termin__titel { font-size: var(--sr-t-h4); }
.sr-termin__titel a { text-decoration: none; }
.sr-termin__titel a::after { content: ""; position: absolute; inset: 0; }
.sr-termin__titel a:hover { color: var(--sr-rot); }
.sr-termin__details { display: flex; flex-wrap: wrap; gap: var(--sr-s2) var(--sr-s4); margin: var(--sr-s3) 0 0; padding: 0; list-style: none; font-size: var(--sr-t-klein); line-height: 1.35; color: var(--sr-grau-700); }
.sr-termin__details li { display: inline-flex; align-items: flex-start; gap: .4em; }
@media (max-width: 40em) { .sr-termin__details { display: grid; gap: var(--sr-s2); } }
@media (max-width: 26em) { .sr-seitenkopf h1 { font-size: 2rem; } }
.sr-termin__details svg { width: 1.05em; height: 1.05em; color: var(--sr-rot); flex: none; margin-top: .22em; }
.sr-termin--vorbei .sr-termin__titel, .sr-termin--vorbei .sr-termin__details { color: var(--sr-grau-700); } /* keine Transparenz: graue Kachel kennzeichnet, Kontrast bleibt AA */
.sr-termin--vorbei .sr-termin__datum { background: var(--sr-grau-500); }
/* Große Termine (Veranstaltungsseite) */
.sr-termin--gross { grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--sr-s4) var(--sr-s8); padding: var(--sr-s8) 0; align-items: start; }
.sr-termin--gross .sr-termin__datum { padding: .8rem 0 .7rem; }
.sr-termin--gross .sr-termin__tag { font-size: 2.125rem; }
.sr-termin--gross .sr-termin__monat { font-size: .8125rem; }
.sr-termin--gross .sr-termin__titel { font-size: var(--sr-t-h3); }
.sr-termin__text { margin: var(--sr-s3) 0 0; color: var(--sr-grau-700); font-size: var(--sr-t-klein); line-height: 1.55; max-width: 68ch; }
.sr-termin__aktionen { align-self: center; display: grid; gap: var(--sr-s3); justify-items: start; } /* mehrere Aktionen (Kalender, Zum Termin) untereinander */
.sr-termin__aktion {
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800;
	font-size: var(--sr-t-meta); text-transform: uppercase; letter-spacing: .07em;
	padding-bottom: .35em; border-bottom: 2px solid var(--sr-rot); white-space: nowrap;
}
.sr-termin__aktion .sr-icon { color: currentColor; transition: transform var(--sr-dauer) var(--sr-ease); }
.sr-termin:hover .sr-termin__aktion { color: var(--sr-rot); }
.sr-termin:hover .sr-termin__aktion .sr-icon { transform: translateX(.25em); }
.sr-termin__aktion { display: inline-flex; align-items: center; gap: .5em; font-size: var(--sr-t-klein); font-weight: 500; color: var(--sr-text); text-decoration: none; transition: color var(--sr-dauer) var(--sr-ease); }
.sr-termin__aktion .sr-icon { color: var(--sr-rot); font-size: 1.1em; }
.sr-termin__aktion:hover { color: var(--sr-rot); }
@media (max-width: 62em) {
	.sr-termin--gross { grid-template-columns: 5.5rem minmax(0, 1fr); }
	.sr-termin__aktionen { grid-column: 2; grid-auto-flow: column; justify-content: start; gap: var(--sr-s6); margin-top: var(--sr-s2); }
}
@media (max-width: 40em) {
	.sr-termin--gross { grid-template-columns: 4.5rem 1fr; gap: var(--sr-s4); }
	.sr-termin__aktionen { grid-auto-flow: row; gap: var(--sr-s3); }
}

/* Vergangene Termine: zugeklappt */
.sr-vergangen { margin-top: 0; }
.sr-vergangen summary {
	display: flex; align-items: center; gap: var(--sr-s3); cursor: pointer; list-style: none;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800; font-size: var(--sr-t-h4);
	text-transform: uppercase; letter-spacing: .04em; padding: var(--sr-s4) 0; min-height: 2.75rem; border-top: 0; border-bottom: 1px solid rgba(17, 17, 17, .14);
	transition: color var(--sr-dauer) var(--sr-ease);
}
.sr-vergangen summary::-webkit-details-marker { display: none; }
.sr-vergangen summary::after { content: ""; margin-left: auto; width: .55em; height: .55em; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform var(--sr-dauer) var(--sr-ease); }
.sr-vergangen[open] summary::after { transform: translateY(.15em) rotate(-135deg); }
.sr-vergangen summary .sr-stern { color: var(--sr-rot); font-size: .9em; transition: transform var(--sr-dauer) var(--sr-ease); }
.sr-vergangen[open] summary .sr-stern { transform: rotate(144deg); }
.sr-vergangen__titel { display: inline-flex; align-items: center; gap: var(--sr-s3); margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.sr-vergangen__anzahl { color: var(--sr-text-2); font-weight: 800; margin-left: .25em; }
.sr-vergangen summary:hover { color: var(--sr-rot); }
.sr-vergangen > .sr-termine { margin-top: var(--sr-s4); }
/* Archiv (Beiträge bis 2024): zurückhaltende Jahresliste im Akkordeon, gleiche Bauform wie „Vergangene Termine“ */
.sr-archiv-alt { margin-top: var(--sr-s12); }
.sr-archiv-alt summary { border-top: 1px solid rgba(17, 17, 17, .14); }
.sr-archiv-alt__jahr { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sr-s6); padding: var(--sr-s6) 0; border-bottom: 1px solid var(--sr-linie); }
.sr-archiv-alt__jahrtitel { margin: 0; align-self: start; position: sticky; top: calc(var(--sr-header-h) + var(--sr-s4)); font-family: var(--sr-font-display); font-style: italic; font-weight: 900; font-size: var(--sr-t-h4); line-height: 1.6; letter-spacing: -.01em; }
.sr-archiv-alt__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sr-archiv-alt__liste li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--sr-s4); align-items: baseline; }
.sr-archiv-alt__liste time { color: var(--sr-text-2); font-size: var(--sr-t-klein); font-variant-numeric: tabular-nums; }
.sr-archiv-alt__liste a { color: var(--sr-text); text-decoration: none; font-weight: 500; line-height: 1.45; text-wrap: pretty; transition: color var(--sr-dauer) var(--sr-ease); }
.sr-archiv-alt__liste a:hover { color: var(--sr-rot); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (max-width: 40em) {
	.sr-archiv-alt__jahr { grid-template-columns: minmax(0, 1fr); gap: var(--sr-s3); }
	.sr-archiv-alt__jahrtitel { position: static; }
	.sr-archiv-alt__liste { gap: var(--sr-s3); }
	.sr-archiv-alt__liste li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* Termin-Widget (Startseite): weiße Fläche mit rotem Kopf */
.sr-widget { background: var(--sr-flaeche); }
.sr-widget__kopf { background: var(--sr-rot); color: #fff; padding: var(--sr-s4) var(--sr-s6); }
.sr-widget__kopf .sr-eyebrow { margin: 0; color: #fff; }
.sr-widget__body { padding: 0 var(--sr-s6); }
.sr-widget .sr-termin { grid-template-columns: 4rem 1fr; gap: var(--sr-s4); padding: var(--sr-s6) 0; }
.sr-widget .sr-termin__titel { font-size: 1.0625rem; line-height: 1.15; }
.sr-widget .sr-termin__details { display: grid; gap: .4rem; margin-top: var(--sr-s3); font-size: var(--sr-t-meta); color: var(--sr-grau-500); }
.sr-widget .sr-termin__datum { padding: .45rem 0 .4rem; }
.sr-widget .sr-termin__tag { font-size: 1.5rem; }
.sr-widget .sr-termin__monat { font-size: .6875rem; }
.sr-widget__body .sr-termin:first-child { border-top: 0; }
.sr-widget__fuss { padding: var(--sr-s6); }
.sr-widget__fuss .sr-btn { width: 100%; }

/* Teaser-Kachel (Theorie & Praxis / Positionen) */
.sr-kachel {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sr-s3);
	min-height: 20rem; padding: clamp(1.5rem, 3vw, 2.5rem); color: #fff; text-decoration: none;
}
.sr-kachel__link { color: inherit; text-decoration: none; }
.sr-kachel__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sr-kachel:has(.sr-kachel__link:focus-visible) { outline: 3px solid var(--sr-schwarz); outline-offset: 3px; }
.sr-kachel--rot { background: var(--sr-rot); }
.sr-kachel--schwarz { background: var(--sr-schwarz); }
.sr-kachel .sr-eyebrow { color: #fff; }
.sr-kachel .sr-h2 { font-size: var(--sr-t-h2-kachel); max-width: min(9em, calc(100% - 3rem - var(--sr-s4))); } /* 9em: beide Kacheln brechen zweizeilig um (UNSERE / POSITIONEN, TEXTE, FLYER, / PLAKATE & MEHR), nie in die Streifen */
.sr-kachel p { margin: 0; max-width: min(30ch, 64%); opacity: .92; }
.sr-kachel .sr-link { margin-top: auto; padding-top: var(--sr-s4); border-color: #fff; align-self: flex-start; }
.sr-kachel .sr-streifen { top: -10%; bottom: -10%; right: -14%; width: 42%; z-index: -1; opacity: .5;
	clip-path: polygon(calc(var(--sr-tan) * 100%) 0, 100% 0, 100% 100%, 0 100%); }
.sr-kachel:hover .sr-link { color: #fff; opacity: 1; }
.sr-kachel:hover .sr-link svg { transform: translateX(.25em); }
.sr-kachel__stern { position: absolute; right: clamp(1.5rem, 3vw, 2.5rem); top: clamp(1.5rem, 3vw, 2.5rem); width: 3rem; height: 3rem; background: #fff; -webkit-mask: var(--sr-stern) center / contain no-repeat; mask: var(--sr-stern) center / contain no-repeat; }

/* Block: weiße Fläche mit Streifen-Akzent rechts. Text bleibt links davon. */
.sr-block { position: relative; overflow: hidden; isolation: isolate; background: var(--sr-flaeche); padding: clamp(1.5rem, 4vw, 3rem); }
.sr-block > * { max-width: min(30rem, 88%); }
.sr-block .sr-streifen { top: -10%; bottom: -10%; right: -6%; width: 22%; z-index: -1; max-width: none; opacity: .9; clip-path: polygon(calc(var(--sr-tan) * 100%) 0, 100% 0, 100% 100%, 0 100%); }
.sr-block .sr-h2 { margin-bottom: var(--sr-s6); }
.sr-block .sr-btn { margin-top: var(--sr-s2); }
@media (max-width: 48em) { .sr-block .sr-streifen { display: none; } }

/* Banner (Mitmachen): schräge schwarze Marke in Rot, wie die Flyer-Bauchbinde */

/* Zitat (groß, Rotfläche) */
.sr-zitat { position: relative; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); overflow: hidden; isolation: isolate; }
.sr-zitat::before {
	content: "\201C"; position: absolute; left: clamp(1rem, 4vw, 3rem); top: -.05em; z-index: -1;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 900; font-size: clamp(8rem, 18vw, 14rem); line-height: 1; opacity: .35;
}
.sr-zitat blockquote { margin: 0; }
.sr-zitat blockquote p { font-family: var(--sr-font-display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.025em; line-height: .98; font-size: var(--sr-t-h2); margin: 0; max-width: 22ch; text-wrap: balance; }
.sr-zitat cite { display: block; margin-top: var(--sr-s6); font-style: normal; font-size: var(--sr-t-klein); opacity: .9; }
.sr-zitat .sr-trenner { margin-top: var(--sr-s8); max-width: 60%; }
.sr-zitat .sr-streifen { top: -10%; bottom: -10%; right: -8%; width: 36%; z-index: -1; clip-path: polygon(calc(var(--sr-tan) * 100%) 0, 100% 0, 100% 100%, 0 100%); }

/* Download-Karte (Material) */
.sr-download { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sr-s6); padding: var(--sr-s6); background: var(--sr-flaeche); position: relative; transition: transform var(--sr-dauer) var(--sr-ease), box-shadow var(--sr-dauer) var(--sr-ease); }
.sr-download .sr-platzhalter .sr-stern { font-size: 2rem; }
@media (max-width: 30em) { .sr-download { grid-template-columns: 5rem 1fr; gap: var(--sr-s4); } }
.sr-download__vorschau { aspect-ratio: 3 / 4; background: var(--sr-grau-100); overflow: hidden; }
.sr-download__vorschau { position: relative; }
.sr-download__vorschau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-download__body { display: flex; flex-direction: column; gap: var(--sr-s2); min-width: 0; }
.sr-download__titel { font-size: var(--sr-t-h4); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 8 6; -webkit-hyphenate-limit-before: 8; -webkit-hyphenate-limit-after: 6; } /* Safari kennt nur die -webkit-Grenzen */
.sr-download__titel a { text-decoration: none; }
.sr-download__titel a::after { content: ""; position: absolute; inset: 0; }
.sr-download p { margin: 0; font-size: var(--sr-t-klein); color: var(--sr-grau-700); }
.sr-download .sr-meta { margin-top: auto; padding-top: var(--sr-s2); }
@media (hover: hover) { .sr-download:hover { transform: translateY(-3px); box-shadow: var(--sr-schatten); } .sr-download:hover .sr-download__titel { color: var(--sr-rot); } }

/* Pagination */
.sr-pagination { display: flex; flex-wrap: wrap; gap: var(--sr-s2); justify-content: center; margin-top: var(--sr-section); }
.sr-pagination a, .sr-pagination span {
	display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800; font-size: var(--sr-t-klein);
	text-decoration: none; border: 2px solid transparent;
}
.sr-pagination a:hover { border-color: var(--sr-schwarz); }
.sr-pagination .current { background: var(--sr-rot); color: #fff; }
.sr-pagination .dots { color: var(--sr-text-2); }

/* Formular */
.sr-feld { display: grid; gap: var(--sr-s2); }
.sr-feld label { font-family: var(--sr-font-display); font-style: italic; font-weight: 800; font-size: var(--sr-t-meta); text-transform: uppercase; letter-spacing: .07em; }
.sr-input, .sr-textarea, .sr-select {
	width: 100%; min-height: 3.125rem; padding: .75rem 1rem; background: var(--sr-flaeche); color: var(--sr-text);
	border: 1px solid var(--sr-grau-300); border-radius: 0; font: inherit; -webkit-appearance: none; appearance: none;
	transition: border-color var(--sr-dauer) var(--sr-ease);
}
.sr-input:hover, .sr-textarea:hover { border-color: var(--sr-grau-500); }
.sr-input:focus, .sr-textarea:focus { outline: none; border-color: var(--sr-rot); box-shadow: 0 0 0 3px rgba(204, 10, 48, .18); }
.sr-textarea { min-height: 9rem; resize: vertical; }
.sr-suche { display: flex; }
.sr-suche .sr-input { border-right: 0; }
.sr-suche .sr-btn { flex: none; padding: 0 1rem; }
.sr-hinweis { padding: var(--sr-s4) var(--sr-s6); border-left: 4px solid var(--sr-rot); background: var(--sr-flaeche); font-size: var(--sr-t-klein); }
.sr-hinweis--fehler { border-color: var(--sr-schwarz); }

/* Footer */
.sr-footer { background: var(--sr-schwarz); color: #fff; padding: var(--sr-section) 0 var(--sr-s8); margin-top: auto; }
.sr-footer a { text-decoration: none; color: inherit; }
.sr-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sr-s12) var(--sr-s8); }
.sr-footer__marke img { height: 4rem; width: auto; }
.sr-footer__marke p { margin: var(--sr-s6) 0 0; max-width: 28ch; font-weight: 300; line-height: 1.5; opacity: .9; }
.sr-footer__titel { font-family: var(--sr-font-display); font-style: italic; font-weight: 800; font-size: var(--sr-t-meta); text-transform: uppercase; letter-spacing: .09em; margin: 0 0 var(--sr-s4); color: #fff; }
.sr-footer__titel.sr-footer__titel--folgt { margin-top: var(--sr-s8); }
.sr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sr-footer li a { display: inline-flex; align-items: center; gap: .6em; padding: .3em 0; font-size: var(--sr-t-klein); opacity: .88; transition: opacity var(--sr-dauer), color var(--sr-dauer); }
.sr-footer li a:hover { opacity: 1; color: #fff; text-decoration: underline; text-decoration-color: var(--sr-rot); text-decoration-thickness: 2px; }
.sr-footer li a svg { width: 1.15em; height: 1.15em; }
.sr-footer address { font-style: normal; font-size: var(--sr-t-klein); line-height: 1.55; }
.sr-footer address ul { display: grid; gap: .55em; }
.sr-footer address li { opacity: .88; }
.sr-footer__unten { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); align-items: center; gap: var(--sr-s4) var(--sr-s8); margin-top: var(--sr-section); padding-top: var(--sr-s6); border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--sr-t-meta); color: rgba(255, 255, 255, .75); }
.sr-footer__unten ul { display: flex; gap: var(--sr-s6); }
/* Der Claim als Marken-Finale: echte Typo, voll deckend, der eine rote Akzent im Footer. */
.sr-footer__claim {
	grid-column: 3 / -1; justify-self: end; white-space: nowrap;
	margin: 0; display: inline-flex; align-items: center; gap: .45em;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 900;
	font-size: min(1.0625rem, calc((100vw - 2 * var(--sr-gutter)) / 21.1)); text-transform: uppercase; letter-spacing: .05em; color: #fff; /* 21.1 = Claimbreite/Schriftgröße: passt bei jeder Breite zwischen die Innenkanten */
}
.sr-footer__claim .sr-stern { font-size: .8em; }
@media (max-width: 56em) {
	.sr-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sr-footer__marke, .sr-footer__grid > div:last-child { grid-column: 1 / -1; }
	.sr-footer__unten { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sr-s4); margin-top: var(--sr-s12); }
	.sr-footer__unten .sr-footer__claim { margin-top: var(--sr-s2); }
}

/* Startseite: ein Raster für alles – Spalten 7fr/5fr wie das Deck, ein Abstand (--sr-raster-g), eine Innenkante (24px). */
.sr-bento { display: grid; gap: calc(var(--sr-section) * 1.25); } /* zwischen den Reihen: 80px bei 1440 (Oliver, 06.10.2026) */
/* Raster-Sektion: oben (zum Deck) und unten (zum Claim-Band) je 1,5× statt 2× Sektionsabstand – 96px bei 1440 */
.sr-home .sr-section.sr-home__raster { padding-block: calc(var(--sr-section) * 1.5); }
.sr-bento__zeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sr-raster-g); }
.sr-bento__zeile--haelften { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Theorie & Praxis / Positionen bleiben 50/50 */
.sr-bento__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-raster-g); }
.sr-bento__mehr { display: none; }
.sr-bento .sr-karte__text { display: none; }
.sr-bento .sr-karte__titel { font-size: var(--sr-t-h4); }
/* Termine: natürliche Höhe, wandert beim Scrollen neben den Karten mit */
.sr-bento__termine { align-self: start; position: sticky; top: calc(var(--sr-header-h) + var(--sr-raster-g)); }
.sr-bento .sr-termin__titel { font-size: var(--sr-t-h4); line-height: 1.12; }
.sr-widget__leer { padding-block: var(--sr-s6); color: var(--sr-grau-700); }
.sr-widget__leer p { margin: 0; }
.sr-widget__leer + .sr-widget__fuss { padding-top: 0; } /* Leersatz mittig zwischen Kopf und Button */
.sr-bento__ueber { display: flex; flex-direction: column; justify-content: center; }
.sr-bento__ueber .sr-btn { align-self: flex-start; }
.sr-bento .sr-block .sr-h2 { font-size: var(--sr-t-h2-kachel); }
.sr-bento .sr-kachel { min-height: 15rem; }
/* Themen im Raster: 2 Spalten, jedes Wort fest zweizeilig, Größe aus der Kachelbreite (längstes Teilwort „nationalismus“) */
.sr-bento .sr-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sr-s4); }
.sr-bento .sr-thema { container-type: inline-size; min-height: 7rem; padding: var(--sr-s4) var(--sr-s6); }
.sr-bento .sr-thema > .sr-stern { position: static; align-self: flex-start; margin-bottom: auto; } /* im Fluss: der Stern kann nie auf dem Wort liegen */
.sr-bento .sr-thema__wort { font-size: min(1.3125rem, calc(100cqi / 8.6)); line-height: 1.05; }
.sr-bento .sr-thema__wort > span[aria-hidden] { display: block; }
@media (min-width: 52.01em) {
	.sr-bento .sr-block, .sr-bento .sr-kachel { padding-inline: var(--sr-s6); }
	.sr-bento .sr-kachel__stern { right: var(--sr-s6); }
}
@media (max-width: 52em) {
	.sr-bento__zeile { grid-template-columns: minmax(0, 1fr); }
	.sr-bento__karten { gap: var(--sr-s4); }
	.sr-bento__mehr { display: inline-flex; grid-column: 1 / -1; justify-self: start; margin-top: var(--sr-s2); }
	.sr-bento__termine { position: static; }
	.sr-bento .sr-widget__kopf, .sr-bento .sr-widget__body, .sr-bento .sr-widget__fuss, .sr-bento .sr-block, .sr-bento .sr-kachel { padding-inline: var(--sr-s4); }
	.sr-bento .sr-kachel__stern { right: var(--sr-s4); }
	.sr-bento .sr-kachel { min-height: 0; }
	.sr-bento .sr-thema { padding: var(--sr-s4); }
	/* kompakte Karten schon ab hier, damit alle Zellen dieselbe Innenkante (16px) haben */
	.sr-bento .sr-karte__tag { padding: var(--sr-s4) var(--sr-s4) 0; font-size: .6875rem; }
	.sr-bento .sr-karte__body { padding: var(--sr-s2) var(--sr-s4) var(--sr-s4); gap: var(--sr-s2); }
	.sr-bento .sr-karte__bild + .sr-karte__body { padding-top: var(--sr-s4); }
	.sr-bento .sr-karte__titel { font-size: 1.0625rem; }
	.sr-bento .sr-karte__meta > :not(:first-child) { display: none; }
}
/* Schmaler Desktop: Über uns und Themen untereinander, Themen dreispaltig (Kacheln bleiben 50/50) – in der 5fr-Spalte würden die Wörter winzig */
@media (min-width: 52.01em) and (max-width: 62em) {
	.sr-bento__zeile:not(:first-child):not(.sr-bento__zeile--haelften) { grid-template-columns: minmax(0, 1fr); }
	.sr-bento .sr-themen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48em) {
	.sr-bento__ueber > * { max-width: 36rem; }
	.sr-bento__ueber .sr-btn { align-self: stretch; }
}

/* Themen-Raster: Kampffelder als typografische Kacheln */
.sr-themen { display: grid; gap: var(--sr-s6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-thema {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sr-s2);
	min-height: clamp(10rem, 16vw, 13rem); padding: var(--sr-s6); text-decoration: none;
	transition: transform var(--sr-dauer) var(--sr-ease), box-shadow var(--sr-dauer) var(--sr-ease);
}
.sr-thema > .sr-stern { position: absolute; top: var(--sr-s6); left: var(--sr-s6); font-size: 1.05rem; }
.sr-thema__wort {
	display: block; font-family: var(--sr-font-display); font-style: italic; font-weight: 900;
	text-transform: uppercase; letter-spacing: -.02em; line-height: .95;
	font-size: clamp(1.375rem, 1rem + 1.3vw, 2rem);
}
.sr-thema--rot { background: var(--sr-rot); color: #fff; }
.sr-thema--schwarz { background: var(--sr-schwarz); color: #fff; }
.sr-thema--weiss { background: var(--sr-flaeche); color: var(--sr-text); }
.sr-thema--weiss > .sr-stern { color: var(--sr-rot); }
.sr-thema--rot .sr-meta, .sr-thema--schwarz .sr-meta { color: rgba(255, 255, 255, .92); }
.sr-thema .sr-streifen {
	top: -10%; bottom: -10%; right: -14%; width: 36%; z-index: -1; opacity: 0; transform: translateX(14%);
	transition: opacity var(--sr-dauer) var(--sr-ease), transform var(--sr-dauer) var(--sr-ease);
	clip-path: polygon(calc(var(--sr-tan) * 100%) 0, 100% 0, 100% 100%, 0 100%);
}
.sr-thema--weiss .sr-streifen { --sr-streifen-farbe: var(--sr-rot); }
@media (hover: hover) {
	.sr-thema:hover { transform: translateY(-4px); box-shadow: var(--sr-schatten); }
	.sr-thema:hover .sr-streifen { opacity: .5; transform: none; }
	.sr-thema--weiss:hover .sr-thema__wort { color: var(--sr-rot); }
}
@media (max-width: 56em) { .sr-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .sr-themen { grid-template-columns: 1fr; gap: var(--sr-s4); } .sr-thema { min-height: 8.5rem; } }

/* Claim-Band: vollbreite Rotfläche mit Schnitt oben und unten, Claim wie auf dem Kampagnen-Asset */
.sr-claimband {
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--sr-rot); color: #fff;
	clip-path: polygon(0 var(--sr-schnitt-flach), 100% 0, 100% calc(100% - var(--sr-schnitt-flach)), 0 100%);
	/* Optisch zentriert: der Schnitt nimmt links oben Fläche weg, wo der Claim beginnt → Inhalt um 0,4 Schnitt nach unten. */
	padding-block: calc(var(--sr-section) * 1.4 + var(--sr-schnitt-flach) * 1.4) calc(var(--sr-section) * 1.4 + var(--sr-schnitt-flach) * .6);
}
.sr-claimband--zitat { padding-block: calc(var(--sr-section) + var(--sr-schnitt-flach)); }
.sr-claimband .sr-streifen { top: -10%; bottom: -10%; right: -8%; width: 34%; z-index: -1; clip-path: polygon(calc(var(--sr-tan) * 100%) 0, 100% 0, 100% 100%, 0 100%); }
.sr-claimband__claim { margin: 0; font-size: clamp(2.5rem, 1.1rem + 5vw, 5.25rem); }
.sr-claimband__z1 { display: block; color: transparent; -webkit-text-stroke: .035em #fff; }
.sr-claimband__z2 { display: block; }
.sr-claimband__z2 .sr-stern { font-size: .45em; vertical-align: .32em; margin-inline: .12em; }
.sr-claimband .sr-link { margin-top: var(--sr-s8); }
/* Farbige Vollflächen brauchen wie der Footer den doppelten Off-White-Abstand davor und danach. */
.sr-section:has(+ .sr-claimband) { padding-bottom: calc(var(--sr-section) * 2); }
.sr-claimband + .sr-section { padding-top: calc(var(--sr-section) * 2); }

/* Positionen: Kernaussagen als große Statements */
.sr-statements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-s8) var(--sr-s12); }
.sr-statements li { border-top: 2px solid var(--sr-schwarz); padding-top: var(--sr-s4); display: grid; grid-template-columns: auto 1fr; gap: var(--sr-s3); align-items: start; }
.sr-statements .sr-stern { color: var(--sr-rot); font-size: 1.1rem; margin-top: .35em; }
.sr-statements p {
	margin: 0; font-family: var(--sr-font-display); font-style: italic; font-weight: 900;
	text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); text-wrap: balance;
}
@media (max-width: 48em) { .sr-statements { grid-template-columns: 1fr; gap: var(--sr-s6); } }

/* Positionen: ein Kapitel je Thema im Raster der Startseite (7fr Text / 5fr Kernsatz), darunter Beiträge zum Thema.
   Der Kernsatz hat die Anatomie der Kernpositionen (.sr-statements: schwarze Linie, roter Stern, kursive Versalien)
   und läuft am Desktop neben dem Text mit. */
.sr-seitenkopf + .sr-position { padding-top: var(--sr-s12); }
.sr-position + .sr-position { padding-top: calc(var(--sr-section) * 2); }
.sr-positionen__intro p { margin: 0; }
.sr-positionen__intro p + p { margin-top: var(--sr-s4); }
.sr-position__raster {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sr-raster-g);
	grid-template-areas: "kopf ." "text satz";
}
.sr-position__kopf { grid-area: kopf; margin-bottom: var(--sr-s8); }
.sr-position__kopf .sr-eyebrow { margin-bottom: var(--sr-s3); }
.sr-position__text { grid-area: text; min-width: 0; }
.sr-position__text .sr-lead { margin: 0; max-width: 40rem; }
.sr-position__text .sr-lead + .sr-prose { margin-top: var(--sr-s6); }
.sr-position__satz { grid-area: satz; align-self: start; position: sticky; top: calc(var(--sr-header-h) + var(--sr-s8)); }
.sr-position__satz > p {
	display: grid; grid-template-columns: auto 1fr; gap: var(--sr-s3); align-items: start; margin: 0;
	border-top: 2px solid var(--sr-schwarz); padding-top: var(--sr-s4);
	font-family: var(--sr-font-display); font-style: italic; font-weight: 900; text-transform: uppercase;
	letter-spacing: -.02em; line-height: 1.05; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); text-wrap: balance;
}
.sr-position__satz .sr-stern { color: var(--sr-rot); font-size: 1.1rem; margin-top: .35em; }
.sr-position__links { display: flex; flex-wrap: wrap; gap: var(--sr-s4) var(--sr-s8); }
/* Untereinander stehende Links: Tippfläche nur bis zur halben Lücke, sonst gehört der Spalt ganz dem unteren Link. */
.sr-position__links .sr-link::before { inset: calc(var(--sr-s4) / -2) 0; }
.sr-position__satz > p + .sr-position__links { margin-top: var(--sr-s8); }
.sr-position__beitraege { margin-top: var(--sr-s12); }
@media (max-width: 52em) {
	.sr-position__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "text" "satz"; }
	.sr-position__satz { position: static; margin-top: var(--sr-s8); }
}

/* Kontaktwege (Kontaktseite): exakt die Zeile der Veranstaltungsseite (.sr-termin--gross), die Kachel zeigt ein Icon statt des Datums.
   Kein eigenes Bauteil, keine eigene Typografie: sieht Veranstaltungen gut aus, sieht Kontakt gut aus. */
.sr-termin--gross .sr-kontaktweg__kachel { aspect-ratio: 1 / 1; padding: 0; }
.sr-kontaktweg__kachel .sr-icon { width: 2rem; height: 2rem; }
.sr-kontaktwege .sr-termin__aktionen { display: grid; gap: var(--sr-s3); justify-items: start; }
.sr-kontaktwege .sr-termin__aktion { position: relative; }
.sr-kontaktwege button.sr-termin__aktion { background: none; border: 0; border-bottom: 2px solid var(--sr-rot); padding: 0 0 .35em; margin: 0; line-height: inherit; cursor: pointer; }
.sr-aktiv__termine a { display: inline; color: inherit; text-decoration: underline; text-decoration-color: var(--sr-rot); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.sr-aktiv__termine a:hover { color: var(--sr-rot); }
.sr-kontaktwege .sr-termin__details li > a { position: relative; z-index: 1; display: inline-flex; align-items: flex-start; gap: .4em; color: inherit; text-decoration: none; transition: color var(--sr-dauer) var(--sr-ease); }
.sr-kontaktwege .sr-termin__details li > a:hover { color: var(--sr-rot); }
/* Titel sind kein Link, die Zeile ist nicht klickbar: jede Aktion reagiert nur auf eigenen Hover. */
.sr-kontaktwege .sr-termin:hover .sr-termin__aktion:not(:hover) { color: var(--sr-text); }
.sr-kontaktwege .sr-termin:hover .sr-termin__aktion:not(:hover) .sr-icon { transform: none; }
/* Kontaktwege mit bis zu vier Aktionen: unter dem Text nebeneinander und umbrechend; am Handy über die volle Zeilenbreite */
@media (max-width: 62em) { .sr-kontaktwege .sr-termin__aktionen { display: flex; flex-wrap: wrap; gap: var(--sr-s3) var(--sr-s6); } }
@media (max-width: 40em) { .sr-kontaktwege .sr-termin__aktionen { grid-column: 1 / -1; } }

/* Terminseite: Rückweg zum Archiv unter der Liste */
.sr-termine__zurueck { margin: var(--sr-s12) 0 0; }

/* Seite als Flex-Spalte, Footer klebt unten */
.sr-seite { min-height: 100vh; display: flex; flex-direction: column; }
.sr-seite > main { flex: 1; }

/* ---------- v0.25.0: Identität, Mitmachen, Formular (neue Startseite, Aktiv werden!) ---------- */

/* Identität: wer wir sind, bevor ein Beitrag kommt. Heller Grund wie die Seitenköpfe (rote Hairlines rechts),
   der Claim im CI-Schriftzug der Kacheln: Zeile 1 Umriss, Zeile 2 voll mit Sternen. Rechts der nächste Termin. */
.sr-identitaet { position: relative; isolation: isolate; overflow-x: clip; padding: calc(var(--sr-section) * 1.25) 0 calc(var(--sr-section) * 1.5); }
.sr-identitaet::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0; right: 0;
	width: max(10rem, calc((100% - var(--sr-container)) / 2 + 2rem));
	background: repeating-linear-gradient(90deg, var(--sr-rot) 0 1px, transparent 1px 14px);
	transform: skewX(calc(-1 * var(--sr-winkel))); transform-origin: bottom right;
}
.sr-identitaet__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sr-raster-g); align-items: end; }
.sr-identitaet--ohne-termin .sr-identitaet__inner { grid-template-columns: minmax(0, 1fr); }
.sr-identitaet .sr-eyebrow { margin-bottom: var(--sr-s4); }
/* Schriftgröße an der Spaltenbreite (Container-Einheit): „★ die Straße ★“ ist mit 7,04 em die breiteste Zeile und bleibt
   so immer einzeilig; Zeile 1 bricht nur, wo die Spalte schmal ist (neben der Terminkarte, mobil). */
.sr-identitaet__text { container-type: inline-size; min-width: 0; }
.sr-identitaet__claim { font-size: min(6.25rem, 13.8cqi); line-height: .92; letter-spacing: -.03em; text-wrap: wrap; }
.sr-identitaet__z1 { display: block; color: transparent; -webkit-text-stroke: .032em var(--sr-schwarz); }
.sr-identitaet__z2 { display: block; color: var(--sr-rot); white-space: nowrap; }
.sr-identitaet__z2 .sr-stern { font-size: .45em; vertical-align: .32em; margin-inline: .12em; }
.sr-identitaet__lead { margin: var(--sr-s8) 0 0; max-width: 36rem; color: var(--sr-grau-700); }
.sr-identitaet__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-s6) var(--sr-s8); margin-top: var(--sr-s8); }
/* Nächster Termin: schwarze Karte mit Etikett wie auf den Termin-Kacheln */
.sr-identitaet__termin { display: grid; gap: var(--sr-s4); align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); }
.sr-identitaet__termin .sr-tag { justify-self: start; margin: 0 0 var(--sr-s2) .35em; }
.sr-identitaet__datum {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sr-s3); margin: 0;
	font-family: var(--sr-font-display); font-style: italic; font-weight: 800; font-size: var(--sr-t-meta);
	text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .72);
}
.sr-identitaet__datum span { font-weight: 900; font-size: clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem); line-height: .9; letter-spacing: -.03em; color: #fff; }
.sr-identitaet__termintitel { font-size: var(--sr-t-h3); line-height: 1.08; }
.sr-identitaet__termintitel a { color: inherit; text-decoration: none; }
.sr-identitaet__termintitel a:hover { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.sr-identitaet__details { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: var(--sr-t-klein); line-height: 1.4; color: rgba(255, 255, 255, .82); }
.sr-identitaet__details li { display: flex; gap: .6em; align-items: flex-start; }
.sr-identitaet__details .sr-icon { flex: none; margin-top: .2em; color: var(--sr-rot); }
.sr-identitaet__terminlinks { display: flex; flex-wrap: wrap; gap: var(--sr-s4) var(--sr-s8); margin-top: var(--sr-s4); }
@media (max-width: 52em) {
	.sr-identitaet::after { display: none; }
	.sr-identitaet__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--sr-s12); }
	/* Terminkarte kompakt: Datum links groß, rechts Etikett (als Zeile statt Marke), Titel mit Pfeil, Uhrzeit · Ort. Links entfallen,
	   der Titel führt zum Beitrag. Das volle Datum bleibt für Screenreader (erstes Detail nur visuell versteckt). */
	.sr-identitaet__termin { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sr-s4); row-gap: .15rem; align-items: center; padding: var(--sr-s4) var(--sr-s6); }
	.sr-identitaet__termin .sr-tag { grid-column: 2; grid-row: 1; margin: 0; padding: 0; background: none; transform: none; color: var(--sr-rot); letter-spacing: .08em; }
	.sr-identitaet__termin .sr-tag > span { transform: none; }
	.sr-identitaet__datum { grid-column: 1; grid-row: 1 / 4; flex-direction: column; align-items: flex-start; gap: 0; }
	.sr-identitaet__datum span { font-size: 2.25rem; }
	.sr-identitaet__termintitel { grid-column: 2; grid-row: 2; font-size: 1.125rem; }
	.sr-identitaet__termintitel a::after { content: " →"; }
	.sr-identitaet__details { grid-column: 2; grid-row: 3; gap: .1rem; margin-top: .2rem; }
	.sr-identitaet__details li:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.sr-identitaet__details .sr-icon { display: none; }
	.sr-identitaet__terminlinks { display: none; }
}
@media (max-width: 40em) {
	.sr-identitaet { padding: var(--sr-s12) 0 var(--sr-s12); }
	.sr-identitaet__lead { margin-top: var(--sr-s6); }
	.sr-identitaet__aktionen { margin-top: var(--sr-s6); gap: var(--sr-s4) var(--sr-s6); }
	.sr-identitaet__inner { row-gap: var(--sr-s8); }
}

/* Neue Startseite: „Aktuell“ als erste Raster-Reihe, volle Breite, drei Spalten (mobil zwei, kompakt, nur vier Karten) */
.sr-home__aktuell .sr-section__kopf { margin-bottom: var(--sr-s8); }
@media (max-width: 52em) { .sr-home__aktuell .sr-grid--3 > :nth-child(n+5) { display: none; } }
/* „Unser Weg“ im Über-uns-Block: der Zeitstrahl der Über-uns-Seite, hier senkrecht (die Spalte ist schmal) */
.sr-bento__weg { grid-template-columns: minmax(0, 1fr); gap: var(--sr-s6); margin: var(--sr-s2) 0 var(--sr-s8); }
.sr-bento__weg li { padding-top: 0; padding-left: var(--sr-s8); }
.sr-bento__weg li::before { top: -.25rem; bottom: calc(-1 * var(--sr-s6)); left: .5rem; right: auto; width: 2px; height: auto; }
.sr-bento__weg li:last-child::before { bottom: 0; }
.sr-bento__weg li::after { top: 0; left: 0; }
.sr-bento__weg .sr-weg__jahr { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); }
.sr-bento__weg .sr-weg__text { margin-top: .25rem; max-width: 34ch; }

/* Mitmach-Band am Ende der Startseite: das Claim-Band, jetzt mit Aufruf statt Claim (der Claim steht oben) */
.sr-claimband--mitmachen { padding-block: calc(var(--sr-section) * 1.25 + var(--sr-schnitt-flach)) calc(var(--sr-section) * 1.25 + var(--sr-schnitt-flach) * .6); }
.sr-mitmachen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sr-raster-g); align-items: end; }
.sr-mitmachen .sr-eyebrow { margin-bottom: var(--sr-s3); }
.sr-claimband--mitmachen .sr-claimband__claim { font-size: clamp(2.75rem, 1rem + 6vw, 6rem); }
/* Streifen nur im Außenrand: rechts steht hier Text, der darf nicht über Linien laufen */
.sr-claimband--mitmachen .sr-streifen { right: -1rem; width: calc(max(0px, (100% - var(--sr-container)) / 2) + var(--sr-gutter)); } /* beginnt immer 1rem rechts der Inhaltskante */
.sr-mitmachen__aktionen .sr-link { margin-top: 0; } /* .sr-claimband .sr-link setzt sonst Abstand nach oben */
.sr-mitmachen__text p { margin: 0; font-size: var(--sr-t-lead); font-weight: 300; line-height: 1.45; text-wrap: pretty; }
.sr-mitmachen__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-s6) var(--sr-s8); margin-top: var(--sr-s8); }
@media (max-width: 52em) { .sr-mitmachen { grid-template-columns: minmax(0, 1fr); gap: var(--sr-s6); } }
@media (max-width: 78em) { .sr-claimband--mitmachen .sr-streifen { display: none; } } /* ohne breiten Außenrand blieben nur 2–3 Linien an der Bildkante */

/* Termin im Beitragskopf (Beiträge mit Termin-Feld) */
.sr-terminkarte--beitrag { margin-top: var(--sr-s8); max-width: 34rem; }
.sr-terminkarte__aktionen { display: flex; flex-wrap: wrap; gap: var(--sr-s3); }
.sr-terminkarte__aktionen .sr-terminkarte__hinweis { margin: 0; }

/* Aktiv werden!: „So geht’s“ – rotes Band mit drei Schritten (Nummer, Titel, Satz) unter dem Seitenkopf. Streifen nur im Außenrand. */
.sr-schritte { position: relative; overflow: hidden; padding: calc(var(--sr-section) * .9) 0; margin-top: var(--sr-s8); }
.sr-schritte .sr-streifen { right: -1rem; width: calc(max(0px, (100% - var(--sr-container)) / 2) + var(--sr-gutter)); }
.sr-schritte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sr-s4) var(--sr-s8); margin-bottom: var(--sr-s12); }
.sr-schritte__kopf .sr-h2 { margin: 0; }
.sr-schritte__hinweis { margin: 0; font-family: var(--sr-font-display); font-style: italic; font-weight: 800; font-size: var(--sr-t-meta); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .92); }
.sr-schritte__hinweis .sr-stern { margin-right: .5em; }
.sr-schritte__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sr-raster-g); }
.sr-schritt { position: relative; padding-top: var(--sr-s6); border-top: 2px solid rgba(255, 255, 255, .35); }
.sr-schritt::before { content: ""; position: absolute; top: -2px; left: 0; width: 3.5rem; height: 2px; background: #fff; }
/* Nummern gefüllt: die Ziffern der Figtree haben überlappende Konturen, als Umriss sähe man das */
.sr-schritt__nr { display: block; font-family: var(--sr-font-display); font-style: italic; font-weight: 900; font-size: clamp(3rem, 2rem + 2.5vw, 4.5rem); line-height: .9; letter-spacing: -.03em; color: #fff; }
.sr-schritt__titel { margin: var(--sr-s4) 0 0; font-size: var(--sr-t-h3); line-height: 1.05; color: #fff; }
.sr-schritt__text { margin: var(--sr-s3) 0 0; max-width: 30ch; color: rgba(255, 255, 255, .92); line-height: 1.5; }
@media (max-width: 78em) { .sr-schritte .sr-streifen { display: none; } }
@media (max-width: 52em) { .sr-schritte__liste { grid-template-columns: minmax(0, 1fr); gap: var(--sr-s8); } }

/* Aktiv werden!: nächste Termine in der Zeile „Komm vorbei“, Formular-Sektion 5fr Kopf / 7fr Formular */
.sr-aktiv__formular { padding-top: var(--sr-s12); } /* Sprungziel #nachricht: den Abstand zum Header gibt html{scroll-padding-top} */
.sr-aktiv__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sr-raster-g); align-items: start; }
.sr-aktiv__kopf .sr-eyebrow { margin-bottom: var(--sr-s3); }
@media (max-width: 52em) { .sr-aktiv__raster { grid-template-columns: minmax(0, 1fr); gap: var(--sr-s8); } }

/* Formular: Felder im Stil der Suche (.sr-input), Labels wie die Filter-Labels, Anliegen als Filter-Chips (Radios) */
.sr-formular__status { margin: 0 0 var(--sr-s6); padding: var(--sr-s4) var(--sr-s6); border-left: 4px solid var(--sr-rot); background: var(--sr-flaeche); font-size: var(--sr-t-klein); }
.sr-formular__status:empty { display: none; }
.sr-formular__status.is-fehler { border-color: var(--sr-schwarz); }
.sr-formular__status:focus { outline: none; }
.sr-formular.is-gesendet .sr-formular__status { padding: var(--sr-s8); border-left-width: 6px; font-size: var(--sr-t-lead); font-weight: 300; text-wrap: pretty; }
.sr-formular__form { display: grid; gap: var(--sr-s6); }
.sr-formular__form[hidden] { display: none; }
.sr-formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-formular__anliegen { border: 0; margin: 0; padding: 0; min-width: 0; }
.sr-formular__anliegen legend { padding: 0; margin-bottom: var(--sr-s3); }
.sr-formular__anliegen .sr-filter { margin-top: 0; }
.sr-wahl { cursor: pointer; }
.sr-wahl:has(input:checked) { background: var(--sr-schwarz); border-color: var(--sr-schwarz); color: #fff; }
.sr-wahl:has(input:focus-visible) { outline: 3px solid var(--sr-rot); outline-offset: 3px; }
.sr-formular__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-s6); }
.sr-feld { margin: 0; display: grid; gap: var(--sr-s2); align-content: start; }
.sr-feld .sr-label { color: var(--sr-text); }
.sr-formular__optional { margin-left: .4em; font-family: var(--sr-font-body); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--sr-text-2); }
.sr-feld__hilfe { font-size: var(--sr-t-meta); color: var(--sr-text-2); }
.sr-feld.is-fehler .sr-input, .sr-feld.is-fehler .sr-textarea, .sr-feld [aria-invalid="true"] { border-color: var(--sr-rot); box-shadow: inset 0 0 0 1px var(--sr-rot); }
.sr-feld__fehler { display: flex; gap: .45em; align-items: baseline; font-size: var(--sr-t-meta); font-weight: 600; line-height: 1.4; color: var(--sr-rot); }
.sr-feld__fehler::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--sr-rot); color: #fff; font-size: .85em; font-weight: 800; }
.sr-feld__fehler[hidden] { display: none; }
@media (forced-colors: active) {
	.sr-feld.is-fehler .sr-input, .sr-feld.is-fehler .sr-textarea { border: 3px solid CanvasText; outline: 2px dashed CanvasText; outline-offset: 2px; }
	.sr-input:focus, .sr-textarea:focus, .sr-feld .sr-input:focus, .sr-feld .sr-textarea:focus { outline: 3px solid Highlight; outline-offset: 2px; } /* der rote Schein fällt im Kontrastmodus weg */
	.sr-wahl:has(input:checked) { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
}
.sr-formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-s4) var(--sr-s8); }
.sr-formular__hinweis { flex: 1 1 16rem; margin: 0; font-size: var(--sr-t-meta); line-height: 1.5; color: var(--sr-text-2); }
.sr-formular__hinweis a { color: inherit; }
.sr-formular button[disabled] { opacity: .65; cursor: progress; }
@media (max-width: 40em) { .sr-formular__reihe { grid-template-columns: minmax(0, 1fr); } .sr-formular__fuss .sr-btn { width: 100%; } }

/* Hauptmenü: „Aktiv werden!“ als einziger Knopf (Menüpunkt-Klasse sr-nav__cta), schräg wie die Etiketten */
.sr-nav .sr-nav__cta > a { isolation: isolate; }
.sr-nav .sr-nav__cta > a::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(calc(-1 * var(--sr-winkel))); transition: background var(--sr-dauer) var(--sr-ease); }
.sr-nav .sr-nav__cta > a::after { content: none; }
@media (min-width: 60.01em) {
	.sr-nav .sr-nav__cta > a { padding: .72rem 1.05rem .68rem; color: #fff; }
	.sr-nav .sr-nav__cta > a::before { background: var(--sr-rot); }
	.sr-nav .sr-nav__cta > a:hover::before, .sr-nav .sr-nav__cta.current-menu-item > a::before { background: var(--sr-schwarz); }
	.sr-nav ul:has(> .sr-nav__cta) { align-items: center; }
}
@media (max-width: 60em) {
	.sr-nav .sr-nav__cta { margin-top: var(--sr-s4); }
	.sr-nav .sr-nav__cta > a { padding: .22em .5em .2em; color: var(--sr-rot); }
	.sr-nav .sr-nav__cta > a::before { background: #fff; }
}

/* ---------- 8. Motion ---------- */
.js .sr-reveal { opacity: 0; }
.js.js-ohne-reveal .sr-reveal, .js.js-ohne-reveal .sr-reveal.is-visible { opacity: 1; animation: none; }
.js .sr-reveal.is-visible { opacity: 1; animation: sr-auftauchen var(--sr-dauer-lang) var(--sr-ease) backwards; }
.js .sr-reveal[data-delay="1"].is-visible { animation-delay: .08s; }
.js .sr-reveal[data-delay="2"].is-visible { animation-delay: .16s; }
.js .sr-reveal[data-delay="3"].is-visible { animation-delay: .24s; }
.js .sr-aufmacher__inner { animation: sr-auftauchen var(--sr-dauer-lang) var(--sr-ease) both; }
@keyframes sr-auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
	.js .sr-reveal { opacity: 1; transform: none; }
	.sr-nav li, .sr-nav__meta { opacity: 1 !important; } /* sonst bleibt das mobile Menü leer: die Punkte werden nur per Animation sichtbar */
}

/* ---------- 9. Utilities ---------- */
.sr-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; }
.sr-mt-0 { margin-top: 0 !important; }
.sr-text-rot { color: var(--sr-rot); }
.sr-text-2 { color: var(--sr-text-2); }
.sr-flex { display: flex; flex-wrap: wrap; gap: var(--sr-s4); align-items: center; }
.sr-max-lesen { max-width: 62ch; }

/* Tap-Ziele auf Touch-Breiten: Chips und Kategorie-Tags auf 44 px, Themen zweispaltig */
@media (max-width: 52em) {
	.sr-filter__tag { min-height: 2.75rem; display: inline-flex; align-items: center; }
	.sr-filter__auswahl { min-height: 2.75rem; }
	.sr-filter-zeile__label { min-height: 2.75rem; }
	a.sr-tag { position: relative; }
	a.sr-tag::before { content: ""; position: absolute; inset: -.5em 0; }
}
/* Sehr schmale Handys (320 px): Kartentitel dürfen schon ab 10 Zeichen trennen, sonst ragt z. B. „Wehrpflicht“ in Chromium über die Karte. */
@media (max-width: 22.5em) { .sr-karte__titel { hyphenate-limit-chars: 10 4 4; } }
/* Handy: Label steht über den Chips und braucht keine Chip-Höhe. */
@media (max-width: 40em) { .sr-filter-zeile__label { min-height: 0; } }