/*
 * THESIS: Die Rollbahn. Tims Figuren rollen im Kreis um ein Rad aus echten Filmszenen;
 *   abgelehnt: Verbandsseite mit Slider, News-Karten, Sponsorenleiste.
 * OWN-WORLD: Hallenboden-Weiß, Tinte #171717, Gold #ffcb05 als Bodenmarkierung auf ganzen
 *   Flächen, Rot nur aus dem Logo, Atkinson Hyperlegible Next 800/400, eckige Knöpfe mit
 *   goldener Kante, randlose Filmbilder, Tims Buntstift-Figuren als einzige Illustration.
 * STORY: Eltern sehen zehn Sportarten auf einen Blick, tippen eine an, finden einen Verein.
 *   Partner sehen Filme und Projekte, Schulen die Schul-Seite.
 * FIRST VIEWPORT: links "Lass rollen." (bis 6rem) und zwei Knöpfe, rechts der Figurenkreis
 *   (etwa 60 % Breite) um das runde Video mit goldenem Radkranz.
 * FORM: vom Briefing festgelegt (weiß, Tims Figuren, Logo-Farben, Coolness wie
 *   letsgogorilla.de), kein Würfel-Seed.
 *
 * Rollsportjugend – Design
 *
 * Farben, Schrift und Grundgrößen stehen in theme.json. Hier steht, was
 * theme.json nicht kann: Raster, Abschnitte, die Figuren-Animation.
 * Klassen beginnen mit "rsj-", Varianten mit "--", Teile mit "__".
 * Bewegung: nur CSS. Bei "Bewegung reduzieren" im System steht alles still.
 */

:root {
	--rsj-text: var(--wp--preset--color--text, #171717);
	--rsj-weiss: var(--wp--preset--color--weiss, #fdfdfc);
	--rsj-grau: var(--wp--preset--color--grau, #f1f1ee);
	--rsj-grau-tief: #e4e4df;
	--rsj-leise: var(--wp--preset--color--text-leise, #55554f);
	--rsj-rot: var(--wp--preset--color--rot, #ec1d25);
	--rsj-gold: var(--wp--preset--color--gold, #ffcb05);
	--rsj-ease: var(--wp--custom--ease, cubic-bezier(0.16, 1, 0.3, 1));
	--rsj-rand: clamp(1rem, 4vw, 3rem);
	--rsj-breit: 80rem;
	--rsj-abstand: clamp(4rem, 9vw, 8rem);
	--rsj-kopf-hoehe: 5.25rem;
}

/* Sportarten-Farben aus Tims Zeichnungen. Gesetzt über Body- und Beitragsklassen. */
.rsj-sport--rollkunstlauf { --sport: var(--wp--custom--sport--rollkunstlauf); }
.rsj-sport--speedskating { --sport: var(--wp--custom--sport--speedskating); }
.rsj-sport--skaterhockey { --sport: var(--wp--custom--sport--skaterhockey); }
.rsj-sport--skateboarding { --sport: var(--wp--custom--sport--skateboarding); }
.rsj-sport--inlinehockey { --sport: var(--wp--custom--sport--inlinehockey); }
.rsj-sport--rollhockey { --sport: var(--wp--custom--sport--rollhockey); }
.rsj-sport--rollerderby { --sport: var(--wp--custom--sport--rollerderby); }
.rsj-sport--alpin { --sport: var(--wp--custom--sport--alpin); }
.rsj-sport--freestyle { --sport: var(--wp--custom--sport--freestyle); }
.rsj-sport--scooter { --sport: var(--wp--custom--sport--scooter); }

/* ---------- Grundlagen ---------- */

html { scroll-padding-top: calc(var(--rsj-kopf-hoehe) + 1rem); }
body {
	font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.25rem);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.wp-site-blocks > * + * { margin-block-start: 0; }
.rsj-main { overflow-x: clip; }
/* Abschnitte stoßen direkt aneinander. WordPress setzt sonst seinen Blockabstand dazwischen. */
.rsj-main > * { margin-block: 0 !important; }
:where(a) { text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
/* Hover: Text bleibt schwarz (Rot auf Weiß wäre zu schwach für Fließtext), nur die Linie wird rot und dick. */
:where(a:not(.wp-element-button)):hover { text-decoration-color: var(--rsj-rot); text-decoration-thickness: 0.15em; }
/* Fokus: schwarzer Rahmen, auf dunklen Flächen weiß. Gold allein wäre auf Weiß kaum zu sehen. */
:focus-visible { outline: 3px solid var(--rsj-text); outline-offset: 3px; }
.rsj-abschnitt--dunkel :focus-visible { outline-color: var(--rsj-weiss); }
img { max-width: 100%; height: auto; }

.rsj-unsichtbar {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* Knöpfe: schwarz mit goldener Kante, die beim Drücken einfedert. */
.wp-block-button__link {
	box-shadow: 0 0.25rem 0 var(--rsj-gold);
	transition: translate 0.12s var(--rsj-ease), box-shadow 0.12s var(--rsj-ease), background-color 0.2s;
}
.wp-block-button__link:active { translate: 0 0.25rem; box-shadow: 0 0 0 var(--rsj-gold); }
.wp-block-button.is-style-zweit .wp-block-button__link {
	background: var(--rsj-grau);
	color: var(--rsj-text);
	box-shadow: 0 0.25rem 0 var(--rsj-grau-tief);
}
.wp-block-button.is-style-zweit .wp-block-button__link:hover,
.wp-block-button.is-style-zweit .wp-block-button__link:focus-visible { background: var(--rsj-grau-tief); }
.rsj-knoepfe { gap: 0.9rem 1rem; }

/* ---------- Kopfzeile ---------- */

/* Sticky sitzt auf dem Rahmen, den WordPress um das Vorlagenteil legt: Der ist genau so hoch
   wie .rsj-kopf, darin könnte der Kopf nicht kleben bleiben. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
/* Unter 600 px scrollt die Admin-Leiste mit weg, dann gehört der Kopf ganz nach oben. */
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.rsj-kopf {
	background: var(--rsj-weiss);
	transition: box-shadow 0.25s;
}
.rsj-kopf.ist-gescrollt { box-shadow: 0 1px 0 var(--rsj-grau-tief); }
.rsj-kopf__innen {
	max-width: var(--rsj-breit);
	margin-inline: auto;
	padding: 0.9rem var(--rsj-rand);
	min-height: var(--rsj-kopf-hoehe);
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
}
.rsj-kopf__innen > * { margin: 0 !important; }
.rsj-logo img { width: clamp(8.5rem, 12vw, 10.5rem) !important; height: auto; display: block; }
.rsj-nav { margin-left: auto !important; }
.rsj-nav .wp-block-navigation__container { gap: clamp(0.75rem, 1.8vw, 1.75rem); }
.rsj-nav .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: 0.4rem;
	background-image: linear-gradient(var(--rsj-gold), var(--rsj-gold));
	background-size: 0 0.25rem;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s var(--rsj-ease);
}
.rsj-nav .wp-block-navigation-item__content:hover,
.rsj-nav .current-menu-item > .wp-block-navigation-item__content { background-size: 100% 0.25rem; color: var(--rsj-text); }
.rsj-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem var(--rsj-rand);
	background: var(--rsj-weiss);
}
.rsj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.75rem;
	font-weight: 800;
	padding-block: 0.5rem;
}
/* Geöffnetes Handy-Menü linksbündig, wie der Rest der Seite. */
.rsj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.rsj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; }
.rsj-kopf__knopf .wp-block-button__link { padding: 0.7em 1.1em; font-size: 1.0625rem; }

/* Sprachumschalter DE/EN (Block rsj/sprache): kleines Kästchen neben dem Knopf. */
.rsj-sprache {
	flex: none;
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.5rem;
	box-sizing: border-box;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--rsj-text);
	text-decoration: none;
	box-shadow: inset 0 0 0 2px var(--rsj-text);
	transition: background-color 0.15s;
}
.rsj-sprache:hover { background: var(--rsj-grau); color: var(--rsj-text); }
.rsj-sprache:active { background: var(--rsj-grau-tief); }
.rsj-sprache:focus-visible { outline: 3px solid var(--rsj-text); outline-offset: 2px; }

@media (max-width: 1080px) {
	.rsj-nav { order: 3; margin-left: 0 !important; }
	.rsj-kopf__knopf { margin-left: auto !important; }
	.rsj-kopf__innen > .rsj-sprache { margin-left: auto !important; }
	.rsj-kopf__innen > .rsj-sprache + .rsj-kopf__knopf { margin-left: 0 !important; }
}
@media (max-width: 480px) {
	.rsj-kopf__knopf .wp-block-button__link { padding: 0.65em 0.8em; font-size: 1rem; }
}

/* ---------- Abschnitte ---------- */

.rsj-abschnitt { padding: var(--rsj-abstand) var(--rsj-rand); }
/* Inhaltsbreite = Seitenbreite minus Rand. So beginnen Kopf, Abschnitte, Seitentitel und Fuß an derselben linken Kante. */
.rsj-abschnitt > * { max-width: calc(var(--rsj-breit) - 2 * var(--rsj-rand)); margin-inline: auto; }
.rsj-abschnitt--grau { background: var(--rsj-grau); }
.rsj-abschnitt--gold { background: var(--rsj-gold); }
.rsj-abschnitt--gold :where(a) { color: var(--rsj-text); }
.rsj-abschnitt--gold :where(a:hover) { color: var(--rsj-text); text-decoration-thickness: 0.2em; }
.rsj-abschnitt--dunkel { background: var(--rsj-text); color: var(--rsj-weiss); }
.rsj-abschnitt--dunkel :where(h1, h2, h3, a) { color: var(--rsj-weiss); }
.rsj-abschnitt--dunkel a:where(:not(.wp-element-button)):is(:hover, :focus) { color: var(--rsj-weiss); }
.rsj-abschnitt--randlos { padding-inline: 0; }
.rsj-abschnitt--randlos > .rsj-abschnitt__kopf,
.rsj-abschnitt--randlos > .rsj-abschnitt__titel { padding-inline: var(--rsj-rand); max-width: var(--rsj-breit); }
.rsj-abschnitt--randlos > .wp-block-query { max-width: none; }
.rsj-abschnitt--oben0 { padding-top: 0; }

.rsj-abschnitt__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.rsj-abschnitt__titel { margin-block: 0 clamp(1.75rem, 3.5vw, 3rem); }
.rsj-abschnitt__kopf .rsj-abschnitt__titel { margin-block: 0; }
.rsj-mehr { margin: 0; font-weight: 700; }
.rsj-mehr a { text-decoration-thickness: 0.15em; }

/* Seitenkopf normaler Seiten und Archive */
.rsj-seitenkopf {
	max-width: var(--rsj-breit);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 6rem) var(--rsj-rand) clamp(2rem, 4vw, 3.5rem);
}
.rsj-seitenkopf > * { margin-block: 0; }
.rsj-seitenkopf h1 { max-width: 18ch; }
.rsj-seitenkopf .rsj-datum { margin-bottom: 0.75rem; }
/* Ein Satz unter dem Titel einer Übersicht: was man hier findet. */
.rsj-seitenkopf .rsj-seitenkopf__text { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 52ch; font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.45; }

/* Fließtext: angenehme Zeilenlänge, linksbündig unter dem Seitentitel (gleiche linke Kante).
   Große Bilder dürfen bis an den Bildschirmrand ausbrechen. */
.rsj-text { max-width: var(--rsj-breit); margin-inline: auto; padding: 0 var(--rsj-rand) var(--rsj-abstand); }
.rsj-text > .wp-block-post-content { max-width: none; }
.rsj-text :is(.is-layout-constrained, .wp-block-post-content) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-left: 0 !important; }
/* Werkzeug-Seiten (Verein finden): kurzer Einleitungstext, das Werkzeug folgt direkt. */
.rsj-text--kurz { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.rsj-text .alignfull { width: 100vw; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }
.rsj-text :where(h2) { font-size: clamp(1.75rem, 3vw, 2.375rem); margin-top: 2.5em; }
/* Zwischenüberschrift im Bericht: sichtbar größer als der Fließtext (20 px), kleiner als h2. */
.rsj-text :where(h3) { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.25; letter-spacing: -0.015em; margin-top: 2em; margin-bottom: 0.5em; }
.rsj-text :where(p, li) { max-width: 68ch; }
/* Platzhalter: Hier fehlt noch Text von der Rollsportjugend. Sichtbar gestaltet statt
   eckiger Klammern, damit Prüfende sofort sehen, was offen ist. `wp rsj pruefen` listet sie. */
.is-style-platzhalter {
	max-width: 68ch;
	padding: 1rem 1.25rem 1.1rem;
	border: 2px dashed #b9b9b0;
	color: var(--rsj-leise);
	font-size: 1.0625rem;
	line-height: 1.5;
}
.is-style-platzhalter::before {
	content: "Text folgt";
	display: block;
	margin-bottom: 0.35rem;
	color: var(--rsj-text);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* Videos im Bericht: Querformat so breit wie der Text, Hochkant-Reels höchstens
   80 % der Bildschirmhöhe, damit Anfang und Ende des Players sichtbar bleiben. */
.rsj-text .wp-block-video video {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(80svh, 46rem);
	background: var(--rsj-text);
}
/* Hochkant-Video (Reel): Auf großen Bildschirmen steht es rechts neben dem Bericht, statt
   schmal links mit einer leeren Fläche daneben. Die Klasse setzt das Plugin anhand der
   Videomaße (inc/darstellung.php). Der Text läuft links in seiner normalen Breite weiter. */
@media (min-width: 62.5em) {
	.rsj-text .wp-block-video.ist-hochkant {
		float: right;
		clear: right;
		width: min(36%, 22rem);
		margin: 0.5rem 0 2rem clamp(2rem, 4vw, 3.5rem) !important;
	}
	.rsj-text .wp-block-video.ist-hochkant video { width: 100%; max-height: none; }
	.rsj-text .wp-block-gallery { clear: both; }
	.rsj-text .wp-block-post-content::after { content: ""; display: block; clear: both; }
}
/* Leere Galerie (Projekt ohne Fotos) nicht als Lücke stehen lassen */
.rsj-text .wp-block-gallery:not(:has(img)),
.rsj-text .wp-block-video:not(:has(video)) { display: none; }

/* Abstand nach unten als Innenabstand: Außenabstände der Hauptabschnitte setzt .rsj-main auf null. */
.rsj-titelbild { max-width: var(--rsj-breit); margin: 0 auto; padding: 0 var(--rsj-rand) clamp(2rem, 4vw, 3.5rem); box-sizing: border-box; }
.rsj-titelbild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Beitrag (meist von Instagram): ganzes Bild zeigen, nie größer als die Datei. Hochkant-Grafiken
   behalten so ihre Schrift, und ein 576 px breites Bild wird nicht auf 1280 px aufgeblasen. */
.rsj-titelbild--beitrag img { width: auto; max-width: 100%; max-height: min(80svh, 50rem); aspect-ratio: auto; object-fit: contain; }
.rsj-titelbild--voll { max-width: none; padding: 0; }
.rsj-titelbild--voll img { aspect-ratio: auto; height: min(70vh, 48rem); }

/* ---------- Startseite: Held mit Figurenkreis ---------- */

/* Erster Bildschirm: Held und goldene Bodenlinie zusammen genau eine Bildschirmhöhe. */
.rsj-start {
	display: flex;
	flex-direction: column;
	min-height: min(calc(100svh - var(--rsj-kopf-hoehe)), 62rem);
}
.rsj-start > * { margin-block: 0 !important; }
.rsj-held {
	flex: 1;
	width: 100%;
	max-width: var(--rsj-breit);
	margin-inline: auto;
	padding: clamp(0.75rem, 2vw, 1.5rem) var(--rsj-rand) clamp(1.25rem, 2.5vw, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
}
.rsj-held > * { margin: 0 !important; }
.rsj-held__text > * { margin-block: 0; }
.rsj-held__titel {
	font-size: clamp(3.5rem, 8vw, 6rem);
	line-height: 0.92;
	letter-spacing: -0.04em;
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem) !important;
}
/* Ein Satz, der sagt, wer hier spricht. "Lass rollen." allein versteht nur, wer uns schon kennt. */
.rsj-held__satz {
	font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
	line-height: 1.45;
	max-width: 30ch;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem) !important;
	text-wrap: pretty;
}

/* Auf dem Desktop wird der Kreis nie höher als der Platz, den Kopf und Bodenlinie übrig lassen.
   So sieht man beim Öffnen beides: die Figuren und die Suche. 1.254 = Seitenverhältnis der Zeichnung. */
@media (min-width: 861px) {
	.rsj-held .rsj-kreis-block {
		width: min(100%, calc((100svh - var(--rsj-kopf-hoehe) - 13.5rem) * 1.254));
		min-width: min(100%, 26rem);
		justify-self: center;
	}
}

/* Goldene Bodenlinie wie die Markierung auf dem Hallenboden. Darauf: die Suche nach dem Verein. */
.rsj-boden { background: var(--rsj-gold); }
/* Unter einem Seitentext (Schule): Abstand nach oben, damit die Leiste nicht am Text klebt. */
.rsj-boden--abstand { margin-top: clamp(2.5rem, 5vw, 4rem) !important; }
.rsj-boden > * {
	box-sizing: border-box;
	max-width: var(--rsj-breit);
	margin-inline: auto !important;
	padding: clamp(1rem, 2vw, 1.5rem) var(--rsj-rand);
}

@media (max-width: 860px) {
	.rsj-start { min-height: 0; }
	.rsj-held { grid-template-columns: 1fr; padding-top: 0.5rem; row-gap: 2rem; }
	.rsj-held .rsj-kreis-block { order: -1; }
	.rsj-held__titel { margin-bottom: 1rem !important; }
}

/* Der Kreis: Seitenverhältnis wie die Zeichnung */
.rsj-kreis {
	position: relative;
	width: 100%;
	aspect-ratio: var(--verhaeltnis, 878 / 700);
	--mitte-x: 50.5%;
	--mitte-y: 49%;
}
.rsj-kreis__ring,
.rsj-kreis__bahn {
	position: absolute;
	inset: 0;
	transform-origin: var(--mitte-x) var(--mitte-y);
}
.rsj-kreis__bahn {
	pointer-events: none;
	animation: rsj-einrollen 1.4s var(--rsj-ease) both;
	animation-delay: calc(var(--i, 0) * 90ms + 250ms);
}
.rsj-kreis__figur {
	position: absolute;
	display: block;
	pointer-events: auto;
	animation: rsj-einrollen-gegen 1.4s var(--rsj-ease) both;
	animation-delay: calc(var(--i, 0) * 90ms + 250ms);
	transition: scale 0.35s var(--rsj-ease);
}
.rsj-kreis__figur img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: rsj-wippen 3.2s ease-in-out infinite alternate;
	animation-delay: calc(var(--i, 0) * -0.6s);
}
.rsj-kreis__figur:hover,
.rsj-kreis__figur:focus-visible { scale: 1.07; z-index: 3; outline-offset: 0; }
.rsj-kreis__name {
	position: absolute;
	left: 50%;
	bottom: 0;
	translate: -50% 70%;
	background: var(--rsj-text);
	color: var(--rsj-weiss);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.35rem 0.6rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, translate 0.3s var(--rsj-ease);
}
.rsj-kreis__figur:hover .rsj-kreis__name,
.rsj-kreis__figur:focus-visible .rsj-kreis__name { opacity: 1; translate: -50% 40%; }

/* Hinweis unter dem Kreis: Auf Touchgeräten gibt es kein Überfahren mit der Maus. */
.rsj-kreis__tipp {
	margin: 0.75rem 0 0;
	text-align: center;
	font-size: 1.0625rem;
	color: var(--rsj-leise);
}

/* Rundes Video in der Mitte: ein Rad aus echten Szenen */
.rsj-kreis__mitte {
	position: absolute;
	left: var(--mitte-x);
	top: var(--mitte-y);
	width: 27%;
	aspect-ratio: 1;
	translate: -50% -50%;
	animation: rsj-mitte 1s var(--rsj-ease) 0.1s both;
}
.rsj-kreis__rund {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: var(--rsj-grau);
	border: 0.3rem solid var(--rsj-weiss);
	outline: 0.3rem solid var(--rsj-gold);
}
.rsj-kreis__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Pause-Knopf: rund, sitzt auf dem goldenen Radkranz unten rechts und verdeckt kaum Video. */
.rsj-kreis__pause {
	position: absolute;
	right: 4%;
	bottom: 4%;
	translate: 35% 35%;
	width: 2.75rem;
	height: 2.75rem;
	border: 0.2rem solid var(--rsj-gold);
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	background: var(--rsj-text);
	color: var(--rsj-weiss);
	display: grid;
	place-items: center;
	z-index: 2;
}
.rsj-kreis__pause::before,
.rsj-kreis__pause::after {
	content: "";
	grid-area: 1 / 1;
	width: 0.25rem;
	height: 0.9rem;
	background: currentColor;
	translate: -0.2rem 0;
}
.rsj-kreis__pause::after { translate: 0.2rem 0; }
.rsj-kreis__pause[aria-pressed="true"]::before {
	width: 0; height: 0; background: none;
	border-left: 0.75rem solid currentColor;
	border-top: 0.45rem solid transparent;
	border-bottom: 0.45rem solid transparent;
	translate: 0.1rem 0;
}
.rsj-kreis__pause[aria-pressed="true"]::after { display: none; }
@media (max-width: 860px) { .rsj-kreis__pause { width: 2.25rem; height: 2.25rem; } }

@keyframes rsj-einrollen {
	from { rotate: -40deg; opacity: 0; }
	35% { opacity: 1; }
	to { rotate: 0deg; opacity: 1; }
}
@keyframes rsj-einrollen-gegen {
	from { rotate: 40deg; }
	to { rotate: 0deg; }
}
@keyframes rsj-wippen {
	from { translate: 0 0; }
	to { translate: 0 -0.35rem; }
}
@keyframes rsj-mitte {
	from { scale: 0.55; opacity: 0; }
	to { scale: 1; opacity: 1; }
}
@keyframes rsj-auftauchen {
	from { opacity: 0; translate: 0 1.25rem; }
	to { opacity: 1; translate: 0 0; }
}

/* Beim Scrollen dreht sich der Kreis wie ein Rad, die Figuren bleiben aufrecht.
   Nur in Browsern, die scroll-gesteuerte Animation können. Sonst steht er still. */
@supports (animation-timeline: scroll()) {
	.rsj-kreis__ring {
		animation: rsj-drehen linear both;
		animation-timeline: scroll(root);
		animation-range: 0 100vh;
	}
	.rsj-kreis__figur img {
		animation: rsj-wippen 3.2s ease-in-out infinite alternate, rsj-gegendrehen linear both;
		animation-delay: calc(var(--i, 0) * -0.6s), 0s;
		animation-timeline: auto, scroll(root);
		animation-range: normal, 0 100vh;
	}
}
@keyframes rsj-drehen { to { rotate: 24deg; } }
@keyframes rsj-gegendrehen { to { rotate: -24deg; } }

/* ---------- Startseite: Film ---------- */

.rsj-film__rahmen { aspect-ratio: 16 / 9; background: #000; }
.rsj-film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Nach dem Film die Stimmen im selben dunklen Block: Die Porträts sind Szenen aus den Filmen. */
.rsj-film .rsj-stimmen { margin-top: var(--rsj-abstand); }

/* ---------- Startseite: Was suchst du? (Handy) ---------- */

.rsj-hub .rsj-abschnitt__titel { text-align: center; }
.rsj-handy { max-width: 72rem; margin-inline: auto; }
.rsj-handy__bild { position: relative; aspect-ratio: var(--verhaeltnis, 1138 / 658); }
/* Lage aus render.php (motive.json): --l/--t/--b/--h, auf dem Handy --lm/--tm/--bm/--hm. */
.rsj-handy__hand,
.rsj-handy__wort { position: absolute; display: block; left: var(--l); top: var(--t); width: var(--b); height: var(--h); }
@media (max-width: 640px) {
	.rsj-handy__bild { aspect-ratio: var(--verhaeltnis-mobil, var(--verhaeltnis, 1138 / 658)); }
	.rsj-handy__hand,
	.rsj-handy__wort { left: var(--lm, var(--l)); top: var(--tm, var(--t)); width: var(--bm, var(--b)); height: var(--hm, var(--h)); }
}
.rsj-handy__hand img,
.rsj-handy__wort img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Bildschirm: weiße Fläche in genau der Form des Displays (Maske aus tools/handy_bildschirm.py).
   Die Finger gehören nicht zur Maske und liegen darum sichtbar davor. Darauf das Website-Logo. */
.rsj-handy__bildschirm {
	position: absolute;
	display: block;
	background: var(--rsj-weiss);
	-webkit-mask: var(--maske) 0 0 / 100% 100% no-repeat;
	mask: var(--maske) 0 0 / 100% 100% no-repeat;
}
/* Doppelte Klasse: schlägt ".rsj-handy__hand img" (Zeichnung füllt ihre Box), das Logo nicht. */
.rsj-handy__bildschirm .rsj-handy__logo {
	position: absolute;
	max-width: none;
	object-fit: contain;
	left: var(--logo-x, 50%);
	top: var(--logo-y, 40%);
	width: var(--logo-breite, 56%);
	height: auto !important;
	translate: -50% -50%;
	rotate: var(--logo-neigung, 0deg);
	transition: scale 0.4s var(--rsj-ease);
}
.rsj-handy__bildschirm:hover .rsj-handy__logo,
.rsj-handy__bildschirm:focus-visible .rsj-handy__logo { scale: 1.08; }
.rsj-handy__wort { transition: rotate 0.3s var(--rsj-ease), scale 0.3s var(--rsj-ease); }
.rsj-handy__wort:hover,
.rsj-handy__wort:focus-visible { rotate: -3deg; scale: 1.06; }

/* Wörter schreiben sich einmal komplett auf, sobald der Abschnitt ins Bild kommt.
   Ohne JavaScript (keine Klasse rsj-js) sind sie einfach sichtbar. Nicht an die
   Scrollposition gekoppelt, sonst bleibt ein Wort halb stehen, wenn man anhält. */
.rsj-js .rsj-handy__wort img { clip-path: inset(0 100% 0 0); }
.rsj-js .rsj-handy.ist-sichtbar .rsj-handy__wort img {
	clip-path: inset(0 0 0 0);
	transition: clip-path 0.9s var(--rsj-ease);
	transition-delay: calc(var(--i, 0) * 160ms);
}
.rsj-js .rsj-handy__hand { opacity: 0; translate: 0 1.5rem; }
.rsj-js .rsj-handy.ist-sichtbar .rsj-handy__hand {
	opacity: 1;
	translate: 0 0;
	transition: opacity 0.8s var(--rsj-ease), translate 0.8s var(--rsj-ease);
}
@media (prefers-reduced-motion: reduce) {
	.rsj-js .rsj-handy__wort img { clip-path: none; }
	.rsj-js .rsj-handy__hand { opacity: 1; translate: none; }
}
@keyframes rsj-schreiben {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

.rsj-handy__liste {
	list-style: none;
	padding: 0;
	margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
.rsj-handy__liste a {
	display: block;
	padding: 0.6rem 1rem;
	background: var(--rsj-grau);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s;
}
.rsj-handy__liste a:hover,
.rsj-handy__liste a:focus-visible { background: var(--rsj-gold); }
/* Auf dem Handy als ordentliches Raster in zwei Spalten statt als Wolke. */
@media (max-width: 640px) {
	.rsj-handy__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
	.rsj-handy__liste a { padding: 0.8rem 0.9rem; }
}

/* ---------- Startseite: Aktuelles als Liste neben dem Titel ---------- */

.rsj-zweispaltig {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
	gap: 1.5rem clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.rsj-zweispaltig > * { margin: 0 !important; }
.rsj-zweispaltig__kopf .rsj-abschnitt__titel { margin-bottom: 0.75rem; }
.rsj-mehr--instagram { margin-top: 0.6rem; font-weight: 600; }
.rsj-mehr--instagram a { text-decoration-thickness: 0.08em; }
@media (min-width: 901px) {
	.rsj-zweispaltig__kopf { position: sticky; top: calc(var(--rsj-kopf-hoehe) + 2rem); }
}
@media (max-width: 900px) {
	.rsj-zweispaltig { grid-template-columns: 1fr; }
}

.rsj-meldungen { list-style: none; padding: 0; margin: 0; }
.rsj-meldungen > li {
	position: relative;
	display: grid;
	grid-template-columns: clamp(6rem, 13vw, 10.5rem) minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: start;
	margin: 0 !important;
	padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
	box-shadow: 0 -1px 0 var(--rsj-grau-tief);
}
.rsj-meldungen > li:first-child { padding-top: 0; box-shadow: none; }
.rsj-meldung__bild { margin: 0 !important; overflow: hidden; }
.rsj-meldung__bild img { width: 100%; object-fit: cover; transition: scale 0.6s var(--rsj-ease); }
.rsj-meldungen > li:hover .rsj-meldung__bild img { scale: 1.05; }
.rsj-meldung__text > * { margin: 0; }
.rsj-meldung__text .rsj-datum { margin: 0 0 0.3rem; }
.rsj-meldung__titel { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.rsj-meldung__titel a { text-decoration: none; }
/* Die ganze Zeile ist klickbar, der Titel bleibt der eine Link für Tastatur und Vorleseprogramm. */
.rsj-meldung__titel a::after { content: ""; position: absolute; inset: 0; }
.rsj-meldungen > li:hover .rsj-meldung__titel a { text-decoration: underline; text-decoration-color: var(--rsj-rot); text-decoration-thickness: 0.12em; }
.rsj-meldung__auszug { margin-top: 0.5rem !important; color: var(--rsj-leise); font-size: 1.0625rem; line-height: 1.5; }
.rsj-meldung__auszug p { margin: 0; }
.rsj-meldung__auszug .wp-block-post-excerpt__more-text { display: none; }
@media (max-width: 600px) {
	.rsj-meldung__auszug p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Beitrag ohne Bild in der Liste: goldenes Kalenderblatt, das Datum daneben fällt weg. */
.rsj-textkarte.rsj-textkarte--klein {
	aspect-ratio: 1;
	display: flex;
	align-items: stretch;
	padding: 0;
}
.rsj-textkarte.rsj-textkarte--klein > :is(a, span) {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1;
	font-size: 1rem;
}
.rsj-textkarte.rsj-textkarte--klein .rsj-textkarte__tag { font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; }
.rsj-textkarte.rsj-textkarte--klein .rsj-textkarte__monat { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 700; margin-top: 0.2rem; }
.rsj-textkarte.rsj-textkarte--klein .rsj-textkarte__jahr { font-size: 0.9375rem; font-weight: 600; margin-top: 0.15rem; }
.rsj-meldungen > li:has(.rsj-textkarte--klein) .rsj-datum { display: none; }

/* ---------- Raster: Aktuelles, Team, Sportarten ---------- */

.rsj-raster--aktuelles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .rsj-raster--aktuelles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .rsj-raster--aktuelles { grid-template-columns: 1fr !important; } }

.rsj-raster {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
.rsj-raster > li { margin: 0 !important; position: relative; }
.rsj-raster .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.rsj-raster .wp-block-post-featured-image img { width: 100%; object-fit: cover; transition: scale 0.6s var(--rsj-ease); }
.rsj-raster > li:hover .wp-block-post-featured-image img { scale: 1.04; }
.rsj-datum { font-size: 1rem; color: var(--rsj-leise); margin: 0.9rem 0 0.2rem; }
.rsj-karte-titel { font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.rsj-karte-titel a { text-decoration: none; }
.rsj-karte-titel a:hover { text-decoration: underline; }

.rsj-seiten { margin-top: 3rem; gap: 1rem; font-weight: 700; justify-content: center; }

/* Projekte: Karten mit Bild 3:2, darunter Titel, Kurztext, Jahr und Ort.
   Bewusst nicht randlos: Viel Material stammt aus Reels und Handyvideos. In Kartengröße
   bleibt es scharf, bildschirmbreit würde es matschig. */
.rsj-projektkarten {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 960px) { .rsj-projektkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rsj-projektkarten { grid-template-columns: 1fr; } }
.rsj-projektkarten > li { margin: 0 !important; position: relative; display: flex; flex-direction: column; }
.rsj-projektkarte__bild { margin: 0 !important; overflow: hidden; background: var(--rsj-grau-tief); }
.rsj-projektkarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 0.7s var(--rsj-ease); }
.rsj-projektkarten > li:hover .rsj-projektkarte__bild img { scale: 1.04; }
.rsj-projektkarte__text { padding-top: 1rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.rsj-projektkarte__text > * { margin: 0 !important; }
.rsj-projektkarte__titel { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.rsj-projektkarte__titel a { text-decoration: none; }
/* Ganze Karte klickbar, der Titel bleibt der eine Link für Tastatur und Vorleseprogramm. */
.rsj-projektkarte__titel a::after { content: ""; position: absolute; inset: 0; }
.rsj-projektkarten > li:hover .rsj-projektkarte__titel a { text-decoration: underline; text-decoration-color: var(--rsj-rot); text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; }
.rsj-projektkarte__auszug { color: var(--rsj-leise); font-size: 1.0625rem; line-height: 1.5; }
.rsj-projektkarte__auszug p { margin: 0; }
.rsj-projektkarte__auszug .wp-block-post-excerpt__more-text { display: none; }
.rsj-projektkarte__fakten { margin-top: auto !important; padding-top: 0.35rem; font-size: 0.9375rem; font-weight: 700; }
.rsj-projektkarte__fakten:empty { display: none; }
/* Kein Bild: ruhige Fläche mit Titel statt Loch (siehe rsj_beitragsbild_ergaenzen im Plugin). */
.rsj-projektkarten .rsj-bild-fehlt { aspect-ratio: 3 / 2; background: var(--rsj-gold); color: var(--rsj-text); font-size: 1.125rem; }

/* Textkarte: Beitrag ohne brauchbares Bild (z. B. Reel mit weißem Startbild) */
.rsj-textkarte {
	margin: 0;
	aspect-ratio: 1;
	background: var(--rsj-gold);
	display: flex;
	align-items: flex-end;
	padding: clamp(1rem, 2.5vw, 1.75rem);
}
.rsj-textkarte a,
.rsj-textkarte span {
	color: var(--rsj-text);
	text-decoration: none;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Unter einer Titelkarte steht der Titel nicht noch einmal. Die Karte selbst ist dann der Link. */
.rsj-raster > li:has(.rsj-textkarte) .rsj-karte-titel { display: none; }
.rsj-raster > li:has(.rsj-textkarte) .rsj-datum { margin-top: 0.9rem; }

/* Platzhalter, solange ein Bild oder eine Zeichnung fehlt */
.rsj-bild-fehlt {
	margin: 0;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--rsj-grau-tief);
	color: var(--rsj-leise);
	font-weight: 700;
	font-size: 1rem;
}
/* Sportart ohne Zeichnung: ihr Zeichen groß an der Stelle der Figur (Datei im Plugin: assets/img/sportarten.svg). */
/* Runde graue Plakette, damit der Platzhalter neben Tims Figuren gewollt aussieht. */
.rsj-sportbild-zeichen { margin: 0; display: grid; place-items: center; color: var(--rsj-text); }
.rsj-sportbild-zeichen a { display: grid; place-items: center; color: inherit; }
.rsj-sportbild-zeichen .rsj-sportzeichen {
	width: min(72%, 11rem);
	height: auto;
	aspect-ratio: 1;
	padding: 1.6rem;
	box-sizing: border-box;
	background: var(--rsj-grau);
	border-radius: 50%;
	transition: rotate 0.4s var(--rsj-ease), scale 0.4s var(--rsj-ease);
}
.rsj-raster--sport > li:hover .rsj-sportbild-zeichen .rsj-sportzeichen { rotate: -6deg; scale: 1.06; }
.rsj-raster--sport .rsj-sportbild-zeichen { height: clamp(11rem, 15vw, 14rem); }
.rsj-sportkopf__figur.rsj-sportbild-zeichen { min-height: 16rem; }
.rsj-sportkopf__figur.rsj-sportbild-zeichen .rsj-sportzeichen { width: min(80%, 20rem); padding: 3rem; }

/* Zeichen vor dem Namen einer Sportart: in Kacheln klein, im Seitenkopf groß über dem Titel. */
.rsj-sportzeichen { display: inline-block; vertical-align: middle; overflow: visible; }
.rsj-sporttitel__zeichen { width: 1.6em; height: 1.6em; margin: -0.3em 0.35em -0.2em 0; }
.rsj-sportkopf h1 .rsj-sporttitel__zeichen { display: block; width: clamp(3.5rem, 6vw, 5rem); height: auto; aspect-ratio: 1; margin: 0 0 1rem; }
/* Ohne Zeichnung steht das Zeichen rechts schon groß, dann nicht noch einmal über dem Titel. */
.rsj-sportkopf:has(.rsj-sportbild-zeichen) h1 .rsj-sporttitel__zeichen { display: none; }

/* Sportart-Seite: "Aus unserem Instagram" folgt auf weißen Text, ein Abstand reicht. */
.rsj-text + .rsj-abschnitt--sportbeitraege { padding-top: 0; }

/* Startseite: Rollsport im Ganztag. Links Tims Wort "Schule", rechts Text und zwei Wege. */
.rsj-ganztag__inhalt {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(1.5rem, 5vw, 5rem);
}
.rsj-ganztag__wort { justify-self: center; width: min(100%, 15rem); } /* Datei 442 px: so bleibt sie auf Retina scharf */
.rsj-ganztag__wort img { display: block; width: 100%; height: auto; rotate: -4deg; }
.rsj-ganztag__text > * { max-width: 36rem; }
.rsj-ganztag__text p { margin-block: 0 1.5rem; }
@media (max-width: 760px) {
	.rsj-ganztag__inhalt { grid-template-columns: 1fr; gap: 1rem; }
	.rsj-ganztag__wort { justify-self: start; width: 11rem; }
}

/* Englische Übersichten: Link zum deutschen Bericht, Kurztext der Sportart, Text "Who we are". */
.rsj-projektkarte__bericht { margin: 0.6rem 0 0; font-weight: 700; font-size: 1rem; }
.rsj-sportkarte__kurz .wp-block-post-excerpt__excerpt { margin: 0.35rem 0 0; font-size: 1.0625rem; line-height: 1.45; color: var(--rsj-leise); }
.rsj-ueber-en { margin: 0; max-width: 40rem; font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.5; }

/* Termine: ohne kommenden Termin ein ehrlicher Satz und zwei Wege weiter */
.rsj-termine__leer { max-width: 34ch; margin: 0 0 1.5rem; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

/* Termine: auf goldener Fläche wird der Datumsblock schwarz */
.rsj-abschnitt--gold .rsj-termin__datum { background: var(--rsj-text); color: var(--rsj-gold); }
.rsj-termin-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.rsj-termin-liste > li { margin: 0 !important; }
.rsj-termin {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: center;
	background: var(--rsj-weiss);
	padding: 1rem;
}
.rsj-termin > * { margin: 0 !important; }
.rsj-termin__datum {
	background: var(--rsj-gold);
	color: var(--rsj-text);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.15;
	text-align: center;
	padding: 0.85rem 0.5rem;
}
.rsj-termin__titel { font-size: 1.375rem; font-weight: 700; margin: 0; }
.rsj-termin__ort { margin: 0.2rem 0 0 !important; color: var(--rsj-leise); font-size: 1.0625rem; }
@media (max-width: 520px) { .rsj-termin { grid-template-columns: 6rem minmax(0, 1fr); } .rsj-termin__datum { font-size: 1.0625rem; } }

/* Partner-Logos */
.rsj-logos {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem 3.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.rsj-logos > li { margin: 0 !important; }
.rsj-logos .wp-block-post-featured-image { margin: 0; }
.rsj-logos .wp-block-post-featured-image img { max-height: 5rem; width: auto; max-width: 16rem; object-fit: contain; mix-blend-mode: multiply; }
.rsj-partner__name { font-size: 1rem; font-weight: 600; margin: 0.6rem 0 0; color: var(--rsj-leise); }

/* Team */
.rsj-raster--team .wp-block-post-featured-image img { aspect-ratio: 1; background: var(--rsj-weiss); }
.rsj-team__name { font-size: 1.375rem; margin: 1rem 0 0.15rem; }
.rsj-team__rolle { margin: 0; color: var(--rsj-leise); }

/* ---------- Stimmen: Menschen, die mit der Rollsportjugend gearbeitet haben ---------- */

.rsj-stimmen:not(:has(.rsj-stimmen__liste > li)) { display: none; }
.rsj-stimmen__liste {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}
.rsj-stimmen__liste > li {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	column-gap: clamp(1.25rem, 3vw, 2.75rem);
	align-items: start;
	margin: 0 !important;
	max-width: 62rem;
}
.rsj-stimmen__liste > li:nth-child(even) { margin-left: auto !important; }
.rsj-stimmen__liste > li > * { grid-column: 2; margin: 0; }
.rsj-stimme__bild { grid-column: 1 !important; grid-row: 1 / span 3; margin: 0 !important; }
.rsj-stimme__bild img { width: 8.5rem; height: 8.5rem; object-fit: cover; border-radius: 50%; outline: 0.3rem solid var(--rsj-gold); outline-offset: 0.3rem; }
.rsj-stimme__zitat {
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}
.rsj-stimme__zitat::before { content: "„"; color: var(--rsj-gold); }
.rsj-stimme__zitat::after { content: "“"; color: var(--rsj-gold); }
.rsj-stimme__name { font-size: 1.1875rem; margin-top: 1.1rem !important; }
.rsj-stimme__rolle { color: #c9c9c2; font-size: 1.0625rem; margin-top: 0.15rem !important; }
@media (max-width: 640px) {
	.rsj-stimmen__liste > li { grid-template-columns: 4.5rem minmax(0, 1fr); }
	.rsj-stimme__bild img { width: 4.5rem; height: 4.5rem; outline-width: 0.2rem; outline-offset: 0.2rem; }
}

/* ---------- Sportarten ---------- */

/* Zehn Sportarten: auf großen Bildschirmen 5 × 2, sonst so viele Spalten wie passen.
   Keine Kartenflächen: Die Figur steht auf einer Bodenlinie in der Farbe ihrer Sportart. */
.rsj-raster--sport { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); row-gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 75rem) {
	.rsj-raster--sport { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
	/* In fünf Spalten ist die Bildbox hochkant. Breite Figuren (Downhill, Kunstlauf) wären darin
	   deutlich kleiner als stehende. Sie dürfen bis in den Spaltenabstand ragen (2rem). */
	.rsj-sportkarte__figur img { width: 114% !important; max-width: none !important; margin-inline: -7%; }
}
/* Handy: zwei Spalten, sonst sind es zehn bildschirmhohe Karten untereinander. */
@media (max-width: 600px) {
	.rsj-raster--sport { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1rem; row-gap: 2rem; }
	.rsj-sportkarte__figur img,
	.rsj-raster--sport .rsj-sportbild-zeichen { height: 8.5rem !important; }
	.rsj-sportkarte__name { font-size: 1.125rem; margin-top: 1rem; }
	.rsj-sportkarte__name .rsj-sporttitel__zeichen { display: block; width: 2rem; height: 2rem; margin: 0 0 0.35rem; }
	.rsj-sportkarte__zahl { font-size: 0.9375rem; }
}
/* Bodenlinie in der Farbe der Sportart. Als eigenes Element, nicht als Schatten:
   Ein versetzter Schatten hinterlässt in Chrome links eine graue Haarlinie. */
.rsj-sportkarte__figur {
	position: relative;
	margin: 0 0 1rem !important;
	padding-bottom: 0.75rem;
}
.rsj-sportkarte__figur::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.5rem;
	background: var(--sport, var(--rsj-gold));
	transform-origin: 50% 100%;
	transition: scale 0.3s var(--rsj-ease);
}
.rsj-raster--sport > li:hover .rsj-sportkarte__figur::after { scale: 1 1.6; }
.rsj-raster--sport .wp-block-post-featured-image { overflow: visible; }
.rsj-sportkarte__figur img { height: clamp(11rem, 15vw, 14rem) !important; width: 100%; object-fit: contain !important; object-position: 50% 100%; transition: rotate 0.4s var(--rsj-ease), scale 0.4s var(--rsj-ease) !important; }
.rsj-raster--sport > li:hover .rsj-sportkarte__figur img { rotate: -4deg; scale: 1.06 !important; }
.rsj-sportkarte__name { font-size: 1.375rem; line-height: 1.2; margin: 1.5rem 0 0; text-wrap: balance; }
.rsj-sportkarte__name a { text-decoration: none; }
.rsj-sportkarte__name a::after { content: ""; position: absolute; inset: 0; }
.rsj-raster--sport > li:hover .rsj-sportkarte__name a { text-decoration: underline; text-decoration-color: var(--sport, var(--rsj-rot)); text-decoration-thickness: 0.12em; }
.rsj-sportkarte__zahl { margin: 0.3rem 0 0; color: var(--rsj-leise); font-size: 1.0625rem; }

.rsj-sportkopf {
	max-width: var(--rsj-breit);
	margin-inline: auto;
	padding: clamp(2rem, 6vw, 5rem) var(--rsj-rand) clamp(2rem, 4vw, 3.5rem);
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
}
.rsj-sportkopf > * { margin: 0 !important; }
.rsj-sportkopf h1::after {
	content: "";
	display: block;
	width: 5rem;
	height: 0.5rem;
	margin-top: 1.25rem;
	background: var(--sport, var(--rsj-gold));
}
.rsj-sportkopf__zahl { font-size: 1.375rem; font-weight: 600; margin: 1.5rem 0 1.75rem !important; }
/* Die Figur füllt ihre Spalte, aber höchstens etwas über ihre echte Größe hinaus: Das Plugin
   setzt max-width aus der Dateibreite (inc/darstellung.php), sonst würden kleine Zeichnungen matschig. */
.rsj-sportkopf__figur { justify-self: center; width: 100%; }
.rsj-sportkopf__figur img { width: 100%; max-height: 30rem; object-fit: contain; }
@media (max-width: 760px) {
	.rsj-sportkopf { grid-template-columns: 1fr; }
	.rsj-sportkopf__figur { order: -1; }
	.rsj-sportkopf__figur img { max-height: 16rem; }
}

/* ---------- Projekt ---------- */

/* Kopf: links Titel, Kurztext, Jahr und Ort, rechts das Titelbild in 3:2.
   Das Bild wird nie breiter als etwa 48rem gezeigt, so bleibt auch ein 1080er-Standbild scharf. */
.rsj-projektkopf {
	max-width: var(--rsj-breit);
	margin-inline: auto;
	/* Abstand nach unten als Innenabstand: Außenabstände der Hauptabschnitte setzt .rsj-main auf null. */
	padding: clamp(2rem, 5vw, 4.5rem) var(--rsj-rand) clamp(2.5rem, 5vw, 4rem);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
}
.rsj-projektkopf > * { margin: 0 !important; }
.rsj-projektkopf__text > * { margin: 0; }
.rsj-projektkopf__text h1 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.rsj-projektkopf__kurz { margin-top: 1.25rem !important; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem); line-height: 1.45; }
.rsj-projektkopf__kurz p { margin: 0; }
.rsj-projektkopf__kurz .wp-block-post-excerpt__more-text { display: none; }
.rsj-fakten { margin: 1rem 0 0 !important; font-weight: 700; display: inline-block; background: var(--rsj-gold); padding: 0.2rem 0.55rem; }
.rsj-fakten:empty { display: none; }
.rsj-projektkopf__bild { background: var(--rsj-grau-tief); }
.rsj-projektkopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
	.rsj-projektkopf { grid-template-columns: 1fr; padding-top: 1rem; }
	.rsj-projektkopf__bild { order: -1; margin-inline: calc(-1 * var(--rsj-rand)) !important; }
}

/* ---------- Fußzeile ---------- */

.rsj-fuss { background: var(--rsj-grau); }
.rsj-fuss__innen {
	max-width: var(--rsj-breit);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 5rem) var(--rsj-rand) 2.5rem;
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
}
.rsj-fuss__innen > * { margin: 0 !important; }
.rsj-fuss h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.75rem; }
.rsj-fuss p { margin: 0.3rem 0 0; font-size: 1.0625rem; }
.rsj-fuss a { text-decoration: none; }
.rsj-fuss a:hover { text-decoration: underline; }
.rsj-logo-voll img { width: 15rem; height: auto; display: block; margin-bottom: 1rem; }
.rsj-fuss__marke p { text-wrap: balance; }
.rsj-foerder {
	/* border-box: sonst rechnet der Kasten den Rand zur Breite dazu und sitzt links neben dem Raster. */
	box-sizing: border-box;
	max-width: var(--rsj-breit);
	margin-inline: auto;
	padding: 1rem var(--rsj-rand) 3rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 3rem;
}
/* Förderlogos: auf ihren Inhalt beschnitten, Ministeriumslogo groß genug für lesbare Schrift,
   dsj-Wortmarke kleiner, weil sie viel kräftiger ist. Beide auf derselben Grundlinie. */
.rsj-foerder { align-items: flex-end; }
.rsj-foerder img { width: auto; max-width: 100%; mix-blend-mode: multiply; }
.rsj-foerder .rsj-foerder__bmbfsfj { height: clamp(5rem, 6vw, 6.25rem); }
.rsj-foerder .rsj-foerder__dsj { height: clamp(2.75rem, 3.5vw, 3.5rem); margin-bottom: 0.4rem; }
@media (max-width: 860px) { .rsj-fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rsj-fuss__marke { grid-column: 1 / -1; } }

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* Im Editor stehen Animationen still, damit man in Ruhe schreiben kann. */
.editor-styles-wrapper .rsj-kreis *,
.editor-styles-wrapper .rsj-handy *,
.editor-styles-wrapper .rsj-held * { animation: none !important; }