/* ==========================================================================
   RS plus Blöcke: Tokens und Blockgestaltung
   Kein globaler Reset. Alle Regeln sind auf .rsp- Klassen begrenzt.

   SPEZIFITÄT (wie in scl-blocks). Astra greift Blockinhalte über
   .entry-content ul/p (0,1,1) und Links über (0,2,1) an. Deshalb:
     Wurzel des Blocks  ->  .rsp-block.rsp-<name>             (0,2,0)
     Teile im Block     ->  .rsp-block .rsp-<name>__<teil>    (0,2,0)
     Elemente im Block  ->  .rsp-block .rsp-<name>__liste li  (0,2,1)
     Links im Block     ->  .rsp-block.rsp-<name> … a         (0,3,1)
   Farbe kodiert nur die Schule, nie Dekoration.
   ========================================================================== */

:root {
	--rsp-rs: #158acb;
	--rsp-rs-deep: #116492;
	--rsp-rs-wash: #eaf4fa;
	--rsp-fos: #ef8018;
	--rsp-fos-deep: #a85b0c;
	--rsp-fos-wash: #fdf1e4;
	--rsp-ink: #10222e;
	--rsp-ink-2: #4a5c68;
	--rsp-ink-3: #64737e;
	--rsp-paper: #fbfaf7;
	--rsp-surface: #fff;
	--rsp-rule: #e4e0d8;
	--rsp-rule-soft: #efece5;
	--rsp-font-display: "Archivo", "Open Sans", system-ui, sans-serif;
	--rsp-font-body: "Open Sans", system-ui, -apple-system, sans-serif;
	--rsp-t-xs: 0.8125rem;
	--rsp-t-sm: 0.9375rem;
	--rsp-t-md: 1.125rem;
	--rsp-t-lg: 1.375rem;
	--rsp-t-2xl: clamp(2rem, 4vw, 2.75rem);
	--rsp-r-md: 6px;
	--rsp-r-lg: 10px;
	--rsp-r-full: 999px;
	--rsp-fast: 140ms;
}

/*
 * Rahmen und Innenabstand zählen zur Breite. Im Editor-iframe fehlt Astras
 * border-box, ohne diese Regel ragen gerahmte Blöcke über ihre Spalte.
 */
.rsp-block,
.rsp-block *,
.rsp-block *::before,
.rsp-block *::after {
	box-sizing: border-box;
}

.rsp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Schulmarke: kleines Quadrat in der Schulfarbe vor dem Namen */
.rsp-block .rsp-schulmarke {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--rsp-ink-2);
}

.rsp-block .rsp-schulmarke::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--rsp-ink-3);
}

.rsp-block .rsp-schulmarke--rs {
	color: var(--rsp-rs-deep);
}

.rsp-block .rsp-schulmarke--rs::before {
	background: var(--rsp-rs);
}

.rsp-block .rsp-schulmarke--fos {
	color: var(--rsp-fos-deep);
}

.rsp-block .rsp-schulmarke--fos::before {
	background: var(--rsp-fos);
}

/* --------------------------------------------------------------------------
   Aktuelles
   -------------------------------------------------------------------------- */
.rsp-block.rsp-aktuelles {
	container-type: inline-size;
}

.rsp-block .rsp-aktuelles__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.rsp-block .rsp-aktuelles__titel {
	font-size: var(--rsp-t-2xl);
	margin: 0;
}

.rsp-block .rsp-aktuelles__filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.rsp-block .rsp-aktuelles__filter[hidden],
.rsp-block .rsp-aktuelles__eintrag[hidden] {
	display: none;
}

.rsp-block .rsp-aktuelles__knopf {
	min-height: 40px;
	padding: 6px 16px;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-full);
	font-family: var(--rsp-font-body);
	font-size: var(--rsp-t-xs);
	font-weight: 600;
	color: var(--rsp-ink-2);
	background: var(--rsp-surface);
	cursor: pointer;
	transition: border-color var(--rsp-fast), color var(--rsp-fast), background var(--rsp-fast);
}

/* Astra färbt button:hover/:focus ein; Hintergrund und Farbe deshalb selbst setzen. */
.rsp-block .rsp-aktuelles__knopf:hover,
.rsp-block .rsp-aktuelles__knopf:focus {
	border-color: var(--rsp-ink-3);
	background: var(--rsp-surface);
	color: var(--rsp-ink-2);
}

.rsp-block .rsp-aktuelles__knopf:focus-visible {
	outline: 2px solid var(--rsp-rs-deep);
	outline-offset: 2px;
}

.rsp-block .rsp-aktuelles__knopf[aria-pressed="true"] {
	background: var(--rsp-ink);
	border-color: var(--rsp-ink);
	color: #fff;
}

.rsp-block .rsp-aktuelles__knopf[data-filter="rs-plus"][aria-pressed="true"] {
	background: var(--rsp-rs-deep);
	border-color: var(--rsp-rs-deep);
}

.rsp-block .rsp-aktuelles__knopf[data-filter="fos"][aria-pressed="true"] {
	background: var(--rsp-fos);
	border-color: var(--rsp-fos);
	color: var(--rsp-ink);
}

.rsp-block .rsp-aktuelles__liste {
	display: grid;
	gap: 24px;
}

.rsp-block .rsp-aktuelles__eintrag {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--rsp-rule-soft);
}

.rsp-block .rsp-aktuelles__eintrag--ohne-bild {
	grid-template-columns: minmax(0, 1fr);
}

.rsp-block .rsp-aktuelles__eintrag:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.rsp-block .rsp-aktuelles__bild {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--rsp-rule-soft);
	border-radius: var(--rsp-r-md);
	background: var(--rsp-rule-soft);
}

.rsp-block .rsp-aktuelles__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Aushänge und Logos werden eingepasst, nicht beschnitten */
.rsp-block .rsp-aktuelles__bild--dokument {
	padding: 12px;
	background: #fff;
}

.rsp-block .rsp-aktuelles__bild--dokument img {
	object-fit: contain;
}

.rsp-block .rsp-aktuelles__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 8px;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-aktuelles__eintragstitel {
	margin: 0 0 8px;
	font-size: var(--rsp-t-md);
}

.rsp-block .rsp-aktuelles__eintrag:first-child .rsp-aktuelles__eintragstitel {
	font-size: var(--rsp-t-lg);
}

.rsp-block.rsp-aktuelles .rsp-aktuelles__eintragstitel a {
	color: inherit;
	text-decoration: none;
}

.rsp-block.rsp-aktuelles .rsp-aktuelles__eintragstitel a:hover,
.rsp-block.rsp-aktuelles .rsp-aktuelles__eintragstitel a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rsp-block .rsp-aktuelles__auszug,
.rsp-block .rsp-aktuelles__leer {
	max-width: 62ch;
	margin: 0;
	font-size: var(--rsp-t-sm);
	color: var(--rsp-ink-2);
}

.rsp-block .rsp-aktuelles__datei {
	margin: 8px 0 0;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
}

@container (max-width: 640px) {

	.rsp-block .rsp-aktuelles__eintrag:not(.rsp-aktuelles__eintrag--ohne-bild) {
		grid-template-columns: 130px minmax(0, 1fr);
		gap: 16px;
	}
}

@container (max-width: 420px) {

	.rsp-block .rsp-aktuelles__eintrag:not(.rsp-aktuelles__eintrag--ohne-bild) {
		grid-template-columns: minmax(0, 1fr);
	}

	.rsp-block .rsp-aktuelles__bild {
		aspect-ratio: 16 / 9;
	}
}

/* --------------------------------------------------------------------------
   Termine
   -------------------------------------------------------------------------- */
.rsp-block.rsp-termine {
	padding: 24px;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-lg);
	background: var(--rsp-surface);
}

.rsp-block.rsp-termine--hinweis {
	border-style: dashed;
	color: var(--rsp-ink-2);
}

.rsp-block .rsp-termine__titel {
	margin: 0 0 8px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--rsp-ink);
	font-size: var(--rsp-t-md);
}

.rsp-block .rsp-termine__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rsp-block .rsp-termine__liste li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--rsp-rule-soft);
}

.rsp-block .rsp-termine__chip {
	display: block;
	padding-top: 2px;
	text-align: center;
	font-family: var(--rsp-font-display);
	font-variant-numeric: tabular-nums;
}

.rsp-block .rsp-termine__monat {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--rsp-fos-deep);
}

.rsp-block .rsp-termine__tag {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--rsp-ink);
}

.rsp-block .rsp-termine__wann,
.rsp-block .rsp-termine__leer {
	margin: 0;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-termine__leer {
	padding: 16px 0 0;
}

.rsp-block .rsp-termine__was {
	margin: 0;
	font-family: var(--rsp-font-body);
	font-size: var(--rsp-t-sm);
	font-weight: 600;
	line-height: 1.4;
}

.rsp-block.rsp-termine .rsp-termine__was a {
	color: var(--rsp-ink);
	text-decoration: none;
}

.rsp-block.rsp-termine .rsp-termine__was a:hover,
.rsp-block.rsp-termine .rsp-termine__was a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rsp-block.rsp-termine .rsp-termine__mehr {
	display: inline-block;
	margin-top: 20px;
	padding-bottom: 1px;
	border-bottom: 2px solid currentcolor;
	font-size: var(--rsp-t-sm);
	font-weight: 600;
	color: var(--rsp-rs-deep);
	text-decoration: none;
	transition: opacity var(--rsp-fast);
}

.rsp-block.rsp-termine .rsp-termine__mehr:hover {
	opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Schnellzugriff
   -------------------------------------------------------------------------- */
.rsp-block.rsp-schnellzugriff {
	container-type: inline-size;
}

.rsp-block .rsp-schnellzugriff__raster {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rsp-block .rsp-schnellzugriff__raster li {
	margin: 0;
}

.rsp-block.rsp-schnellzugriff .rsp-schnellzugriff__eintrag {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	min-height: 72px;
	padding: 16px 20px;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-lg);
	background: var(--rsp-surface);
	color: var(--rsp-ink);
	text-decoration: none;
	transition: border-color var(--rsp-fast);
}

.rsp-block.rsp-schnellzugriff .rsp-schnellzugriff__eintrag:hover,
.rsp-block.rsp-schnellzugriff .rsp-schnellzugriff__eintrag:focus-visible {
	border-color: var(--rsp-ink);
	color: var(--rsp-ink);
}

.rsp-block .rsp-schnellzugriff__symbol {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--rsp-r-md);
	background: var(--rsp-rs-wash);
	color: var(--rsp-rs-deep);
}

.rsp-block .rsp-schnellzugriff__eintrag--fos .rsp-schnellzugriff__symbol {
	background: var(--rsp-fos-wash);
	color: var(--rsp-fos-deep);
}

.rsp-block .rsp-schnellzugriff__symbol svg {
	width: 19px;
	height: 19px;
}

.rsp-block .rsp-schnellzugriff__text {
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-sm);
	font-weight: 600;
	line-height: 1.25;
}

.rsp-block .rsp-schnellzugriff__zusatz {
	display: block;
	font-family: var(--rsp-font-body);
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--rsp-ink-3);
}

@container (max-width: 1000px) {

	.rsp-block .rsp-schnellzugriff__raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (max-width: 560px) {

	.rsp-block .rsp-schnellzugriff__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rsp-block.rsp-schnellzugriff .rsp-schnellzugriff__eintrag {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   Bildungsweg: das eine mutige Element. Spaltenbreite = Anzahl der Jahrgänge.
   -------------------------------------------------------------------------- */
.rsp-block.rsp-bildungsweg {
	display: grid;
	grid-template-columns: var(--rsp-spalten, 1fr);
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-lg);
	background: var(--rsp-surface);
	box-shadow: 0 2px 4px rgb(16 34 46 / 6%), 0 18px 40px -18px rgb(16 34 46 / 28%);
}

.rsp-block.rsp-bildungsweg .rsp-bildungsweg__abschnitt {
	display: block;
	padding: 24px 32px;
	color: var(--rsp-ink);
	text-decoration: none;
	transition: background var(--rsp-fast);
}

.rsp-block.rsp-bildungsweg a.rsp-bildungsweg__abschnitt:hover,
.rsp-block.rsp-bildungsweg a.rsp-bildungsweg__abschnitt:focus-visible {
	background: var(--rsp-rs-wash);
	color: var(--rsp-ink);
}

.rsp-block.rsp-bildungsweg a.rsp-bildungsweg__abschnitt--fos:hover,
.rsp-block.rsp-bildungsweg a.rsp-bildungsweg__abschnitt--fos:focus-visible {
	background: var(--rsp-fos-wash);
}

.rsp-block .rsp-bildungsweg__jahre {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 12px;
	font-family: var(--rsp-font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.rsp-block .rsp-bildungsweg__schiene {
	display: block;
	height: 5px;
	margin-bottom: 12px;
	border-radius: 3px;
	background: var(--rsp-rs);
}

.rsp-block .rsp-bildungsweg__abschnitt--fos .rsp-bildungsweg__schiene {
	background: var(--rsp-fos);
}

.rsp-block .rsp-bildungsweg__schule {
	display: block;
	font-family: var(--rsp-font-display);
	font-size: 1rem;
	font-weight: 700;
}

.rsp-block .rsp-bildungsweg__ziel {
	display: block;
	margin-top: 2px;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-2);
}

.rsp-block .rsp-bildungsweg__gelenk {
	display: grid;
	place-items: center;
	padding: 0 16px;
	border-inline: 1px solid var(--rsp-rule-soft);
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-bildungsweg__gelenk svg {
	width: 20px;
	height: 20px;
}

/* Das Band kippt in die Senkrechte, die Reihenfolge bleibt der Weg */
@media (max-width: 820px) {

	.rsp-block.rsp-bildungsweg {
		grid-template-columns: minmax(0, 1fr);
	}

	.rsp-block .rsp-bildungsweg__gelenk {
		padding: 8px;
		border-inline: 0;
		border-block: 1px solid var(--rsp-rule-soft);
	}

	.rsp-block .rsp-bildungsweg__gelenk svg {
		transform: rotate(90deg);
	}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rsp-block.rsp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(78vh, 720px);
	overflow: hidden;
	background: var(--rsp-ink);
	color: #fff;
}

@supports (height: 100dvh) {

	.rsp-block.rsp-hero {
		min-height: min(78dvh, 720px);
	}
}

.rsp-block .rsp-hero__bilder {
	position: absolute;
	inset: 0;
}

.rsp-block .rsp-hero__bild {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	opacity: 0;
	transition: opacity 900ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.rsp-block .rsp-hero__bild.is-active {
	opacity: 1;
}

/* Verlauf nur so stark wie nötig, links kräftiger für den Text */
.rsp-block.rsp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgb(16 34 46 / 86%) 0%, rgb(16 34 46 / 62%) 42%, rgb(16 34 46 / 18%) 78%),
		linear-gradient(to top, rgb(16 34 46 / 55%) 0%, transparent 45%);
}

.rsp-block.rsp-hero--ohne-bild::after {
	display: none;
}

/* Astra setzt auf Seiten in Vollbreite max-width: none für die Enkel des
   Inhalts (0,4,0). Der Hero ist ein solches Kind, sein Rahmen ein Enkel. */
.wp-block-rsp-hero.rsp-block.rsp-hero .rsp-hero__rahmen {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1228px;
	margin-inline: auto;
	padding: 96px 24px 128px;
}

.rsp-block .rsp-hero__inhalt {
	max-width: 46rem;
}

.rsp-block .rsp-hero__ort {
	display: inline-block;
	margin: 0 0 20px;
	padding-left: 12px;
	border-left: 3px solid var(--rsp-fos);
	font-size: var(--rsp-t-sm);
	font-weight: 600;
	color: rgb(255 255 255 / 78%);
}

.rsp-block .rsp-hero__titel {
	margin: 0 0 20px;
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.03;
	color: #fff;
}

.rsp-block .rsp-hero__text {
	max-width: 44ch;
	margin: 0 0 32px;
	font-size: var(--rsp-t-md);
	color: rgb(255 255 255 / 88%);
}

.rsp-block .rsp-hero__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.rsp-block.rsp-hero .rsp-hero__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--rsp-r-md);
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--rsp-fast), border-color var(--rsp-fast);
}

.rsp-block.rsp-hero .rsp-hero__knopf--auf-foto {
	background: rgb(255 255 255 / 94%);
	color: var(--rsp-ink);
}

.rsp-block.rsp-hero .rsp-hero__knopf--auf-foto:hover,
.rsp-block.rsp-hero .rsp-hero__knopf--auf-foto:focus-visible {
	background: #fff;
	color: var(--rsp-ink);
}

.rsp-block.rsp-hero .rsp-hero__knopf--zurueckhaltend {
	border-color: rgb(255 255 255 / 50%);
	background: transparent;
	color: #fff;
}

.rsp-block.rsp-hero .rsp-hero__knopf--zurueckhaltend:hover,
.rsp-block.rsp-hero .rsp-hero__knopf--zurueckhaltend:focus-visible {
	border-color: #fff;
	background: rgb(255 255 255 / 14%);
	color: #fff;
}

/* Bedienung: sichtbar, tastaturbedienbar, mit Pausenschalter */
.rsp-block .rsp-hero__steuerung {
	position: absolute;
	right: 24px;
	bottom: 96px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px 6px;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--rsp-r-full);
	background: rgb(16 34 46 / 42%);
	backdrop-filter: blur(8px);
}

.rsp-block .rsp-hero__steuerung[hidden] {
	display: none;
}

.rsp-block.rsp-hero .rsp-hero__schalter {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.rsp-block.rsp-hero .rsp-hero__schalter:hover,
.rsp-block.rsp-hero .rsp-hero__schalter:focus {
	background: rgb(255 255 255 / 18%);
	color: #fff;
}

.rsp-block .rsp-hero__punkte {
	display: flex;
	gap: 2px;
	padding: 0 4px;
}

.rsp-block.rsp-hero .rsp-hero__punkt {
	display: grid;
	place-items: center;
	width: 30px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.rsp-block.rsp-hero .rsp-hero__punkt:hover,
.rsp-block.rsp-hero .rsp-hero__punkt:focus {
	background: transparent;
}

.rsp-block .rsp-hero__punkt::before {
	content: "";
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: rgb(255 255 255 / 40%);
	transition: background var(--rsp-fast);
}

.rsp-block .rsp-hero__punkt[aria-current="true"]::before {
	background: #fff;
}

@media (max-width: 820px) {

	.wp-block-rsp-hero.rsp-block.rsp-hero .rsp-hero__rahmen {
		padding: 80px 20px 96px;
	}

	.rsp-block .rsp-hero__steuerung {
		top: 20px;
		right: 20px;
		bottom: auto;
	}
}

@media (prefers-reduced-motion: reduce) {

	.rsp-block .rsp-hero__bild {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Schulkarte
   -------------------------------------------------------------------------- */
.rsp-block.rsp-schulkarte {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: 24px;
	border-top: 5px solid var(--rsp-rs);
}

.rsp-block.rsp-schulkarte--fos {
	border-top-color: var(--rsp-fos);
}

.rsp-block .rsp-schulkarte__bild {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	margin: 0 0 24px;
	padding: 32px;
	overflow: hidden;
	border: 1px solid var(--rsp-rule-soft);
	border-radius: var(--rsp-r-md);
	background: #fff;
}

.rsp-block .rsp-schulkarte__bild img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

.rsp-block .rsp-schulkarte__jahre {
	margin: 0 0 8px;
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-xs);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--rsp-rs-deep);
}

.rsp-block.rsp-schulkarte--fos .rsp-schulkarte__jahre {
	color: var(--rsp-fos-deep);
}

.rsp-block .rsp-schulkarte__name {
	margin: 0 0 16px;
	font-size: 1.875rem;
}

.rsp-block .rsp-schulkarte__text {
	max-width: 46ch;
	margin: 0 0 24px;
	font-size: var(--rsp-t-sm);
	color: var(--rsp-ink-2);
}

.rsp-block .rsp-schulkarte__fakten {
	margin: 0 0 32px;
}

.rsp-block .rsp-schulkarte__fakten div {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--rsp-rule-soft);
	font-size: var(--rsp-t-sm);
}

.rsp-block .rsp-schulkarte__fakten dt {
	margin: 0;
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-schulkarte__fakten dd {
	margin: 0;
	font-weight: 600;
}

.rsp-block.rsp-schulkarte .rsp-schulkarte__knopf {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 48px;
	margin-top: auto;
	padding: 12px 24px;
	border-radius: var(--rsp-r-md);
	background: var(--rsp-rs-deep);
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-sm);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: background var(--rsp-fast);
}

.rsp-block.rsp-schulkarte .rsp-schulkarte__knopf:hover,
.rsp-block.rsp-schulkarte .rsp-schulkarte__knopf:focus-visible {
	background: #0d5077;
	color: #fff;
}

.rsp-block.rsp-schulkarte--fos .rsp-schulkarte__knopf {
	background: var(--rsp-fos);
	color: var(--rsp-ink);
}

.rsp-block.rsp-schulkarte--fos .rsp-schulkarte__knopf:hover,
.rsp-block.rsp-schulkarte--fos .rsp-schulkarte__knopf:focus-visible {
	background: #dc7311;
	color: var(--rsp-ink);
}

@media (max-width: 560px) {

	.rsp-block .rsp-schulkarte__fakten div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

/* --------------------------------------------------------------------------
   Angebote: Liste statt Kartenraster
   -------------------------------------------------------------------------- */
.rsp-block .rsp-angebote__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 64px;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rsp-rule);
	list-style: none;
}

.rsp-block .rsp-angebote__liste li {
	margin: 0;
	border-bottom: 1px solid var(--rsp-rule-soft);
}

.rsp-block.rsp-angebote .rsp-angebote__eintrag {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 16px;
	padding: 20px 0;
	color: var(--rsp-ink);
	text-decoration: none;
	transition: padding-left var(--rsp-fast);
}

.rsp-block.rsp-angebote a.rsp-angebote__eintrag:hover,
.rsp-block.rsp-angebote a.rsp-angebote__eintrag:focus-visible {
	padding-left: 8px;
	color: var(--rsp-ink);
}

.rsp-block .rsp-angebote__name {
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-md);
	font-weight: 600;
}

.rsp-block .rsp-angebote__beschreibung {
	display: block;
	margin-top: 2px;
	font-family: var(--rsp-font-body);
	font-size: var(--rsp-t-sm);
	font-weight: 400;
	color: var(--rsp-ink-2);
}

.rsp-block .rsp-angebote__ort {
	padding: 3px 9px;
	border-radius: var(--rsp-r-full);
	background: var(--rsp-rs-wash);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--rsp-rs-deep);
	white-space: nowrap;
}

.rsp-block .rsp-angebote__ort--fos {
	background: var(--rsp-fos-wash);
	color: var(--rsp-fos-deep);
}

.rsp-block .rsp-angebote__ort--beide {
	background: rgb(16 34 46 / 6%);
	color: var(--rsp-ink-2);
}

@media (max-width: 820px) {

	.rsp-block .rsp-angebote__liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {

	.rsp-block.rsp-angebote .rsp-angebote__eintrag {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Seitenkopf: ruhiger Kopf der Unterseite, Linie in der Schulfarbe
   -------------------------------------------------------------------------- */
.rsp-block.rsp-seitenkopf {
	position: relative;
	padding: 48px 0 40px;
	border-bottom: 1px solid var(--rsp-rule);
	background: var(--rsp-surface);
}

.rsp-block.rsp-seitenkopf::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 5px;
	background: var(--rsp-rs);
}

.rsp-block.rsp-seitenkopf--fos::after {
	background: var(--rsp-fos);
}

.rsp-block .rsp-seitenkopf__rahmen {
	max-width: 1228px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* Astra setzt Kindern direkter, voller Blöcke max-width: none (0,4,0). */
header.rsp-block.rsp-seitenkopf.wp-block-rsp-seitenkopf > .rsp-seitenkopf__rahmen {
	max-width: 1228px;
}

.rsp-block .rsp-seitenkopf__pfad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
	list-style: none;
}

.rsp-block .rsp-seitenkopf__pfad li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.rsp-block .rsp-seitenkopf__pfad li + li::before {
	content: "";
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentcolor;
	border-right: 1.5px solid currentcolor;
	transform: rotate(45deg);
}

.rsp-block.rsp-seitenkopf .rsp-seitenkopf__pfad a {
	border-bottom: 1px solid transparent;
	color: var(--rsp-ink-3);
	text-decoration: none;
}

.rsp-block.rsp-seitenkopf .rsp-seitenkopf__pfad a:hover,
.rsp-block.rsp-seitenkopf .rsp-seitenkopf__pfad a:focus-visible {
	border-bottom-color: currentcolor;
	color: var(--rsp-ink);
}

.rsp-block .rsp-seitenkopf__pfad [aria-current="page"] {
	font-weight: 600;
	color: var(--rsp-ink);
}

.rsp-block .rsp-seitenkopf__titel {
	max-width: 20ch;
	margin: 0;
	font-size: var(--rsp-t-2xl);
}

.rsp-block .rsp-seitenkopf__motto {
	max-width: 30ch;
	margin: 16px 0 0;
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-lg);
	font-weight: 600;
	color: var(--rsp-fos-deep);
}

.rsp-block.rsp-seitenkopf--rs .rsp-seitenkopf__motto {
	color: var(--rsp-rs-deep);
}

.rsp-block .rsp-seitenkopf__einleitung {
	max-width: 60ch;
	margin: 16px 0 0;
	font-size: var(--rsp-t-md);
	color: var(--rsp-ink-2);
}

@media (max-width: 820px) {

	.rsp-block.rsp-seitenkopf {
		padding: 40px 0 32px;
	}

	.rsp-block .rsp-seitenkopf__rahmen {
		padding-inline: 20px;
	}
}

/* --------------------------------------------------------------------------
   Inhaltsverzeichnis (Kasten in der Seitenleiste)
   -------------------------------------------------------------------------- */
.rsp-block.rsp-verzeichnis {
	padding: 20px 24px;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-lg);
	background: var(--rsp-surface);
}

.rsp-block .rsp-verzeichnis__titel {
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--rsp-ink);
	font-size: var(--rsp-t-xs);
	font-weight: 700;
}

.rsp-block .rsp-verzeichnis__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rsp-block .rsp-verzeichnis__liste li {
	margin: 0;
}

.rsp-block.rsp-verzeichnis .rsp-verzeichnis__link {
	display: block;
	padding: 7px 0 7px 12px;
	border-left: 2px solid var(--rsp-rule);
	font-size: var(--rsp-t-sm);
	color: var(--rsp-ink-2);
	text-decoration: none;
	transition: color var(--rsp-fast), border-color var(--rsp-fast);
}

.rsp-block.rsp-verzeichnis .rsp-verzeichnis__link:hover,
.rsp-block.rsp-verzeichnis .rsp-verzeichnis__link:focus-visible {
	border-left-color: var(--rsp-ink);
	color: var(--rsp-ink);
}

.rsp-block .rsp-verzeichnis__hinweis {
	margin: 0;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
}

/* --------------------------------------------------------------------------
   Differenzierungsgrafik
   -------------------------------------------------------------------------- */
.rsp-block.rsp-differenzierung {
	margin: 24px 0 0;
	padding: 24px;
	overflow-x: auto;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-lg);
	background: var(--rsp-surface);
}

.rsp-block .rsp-differenzierung__innen {
	min-width: 460px;
}

.rsp-block .rsp-differenzierung__wisch {
	display: none;
	margin: 0 0 12px;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-differenzierung__skala,
.rsp-block .rsp-differenzierung__balken {
	display: grid;
	grid-template-columns: repeat(var(--rsp-stufen, 6), minmax(0, 1fr));
	gap: 4px;
}

.rsp-block .rsp-differenzierung__skala {
	margin-bottom: 16px;
}

.rsp-block .rsp-differenzierung__stufe {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rsp-rule);
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-xs);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: center;
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-differenzierung__zeile + .rsp-differenzierung__zeile {
	margin-top: 16px;
}

.rsp-block .rsp-differenzierung__fach {
	margin: 0 0 5px;
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-sm);
	font-weight: 600;
	color: var(--rsp-ink);
}

.rsp-block .rsp-differenzierung__hinweis {
	font-family: var(--rsp-font-body);
	font-size: var(--rsp-t-xs);
	font-weight: 400;
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-differenzierung__balken {
	align-items: center;
}

.rsp-block .rsp-differenzierung__band {
	display: flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	overflow: hidden;
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
}

.rsp-block .rsp-differenzierung__band--gemeinsam {
	background: var(--rsp-rs-wash);
	color: var(--rsp-rs-deep);
}

.rsp-block .rsp-differenzierung__teilung {
	display: grid;
	gap: 3px;
}

.rsp-block .rsp-differenzierung__band--grund {
	height: 22px;
	background: #7fc0e4;
	color: #0b3e5c;
}

.rsp-block .rsp-differenzierung__band--erweitert {
	height: 22px;
	background: var(--rsp-rs-deep);
	color: #fff;
}

.rsp-block .rsp-differenzierung__notiz {
	margin-top: 20px;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
}

@media (max-width: 560px) {

	.rsp-block .rsp-differenzierung__wisch {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   Wochenplan: Schule orange (die FOS), Praktikum Tinte
   -------------------------------------------------------------------------- */
.rsp-block.rsp-wochenplan {
	margin-top: 24px;
	padding: 24px;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-lg);
	background: var(--rsp-surface);
}

.rsp-block .rsp-wochenplan__zeile + .rsp-wochenplan__zeile {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--rsp-rule-soft);
}

.rsp-block .rsp-wochenplan__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 12px;
}

.rsp-block .rsp-wochenplan__klasse {
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-md);
	font-weight: 700;
	color: var(--rsp-ink);
}

.rsp-block .rsp-wochenplan__hinweis {
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-wochenplan__tage,
.rsp-block .rsp-wochenplan__bloecke {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
}

.rsp-block .rsp-wochenplan__tage span {
	margin-bottom: 5px;
	font-size: var(--rsp-t-xs);
	font-weight: 600;
	text-align: center;
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-wochenplan__bloecke {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rsp-block .rsp-wochenplan__block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 62px;
	margin: 0;
	padding: 8px 12px;
	border-radius: 3px;
	font-size: var(--rsp-t-xs);
	font-weight: 600;
}

.rsp-block .rsp-wochenplan__block--schule {
	background: var(--rsp-fos);
	color: var(--rsp-ink);
}

.rsp-block .rsp-wochenplan__block--praktikum {
	background: var(--rsp-ink);
	color: #fff;
}

.rsp-block .rsp-wochenplan__block small {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	opacity: 0.75;
}

@media (max-width: 560px) {

	.rsp-block .rsp-wochenplan__tage,
	.rsp-block .rsp-wochenplan__bloecke {
		gap: 2px;
	}

	.rsp-block .rsp-wochenplan__block {
		min-height: 74px;

		/* „Praktikum“ ist bei 375 px knapp 50 px breit und bräche mit 6px
		   Innenabstand mitten im Wort um. Mittig wie die Tageskürzel darüber. */
		padding: 8px 2px;
		font-size: 0.68rem;
		text-align: center;
	}

	.rsp-block .rsp-wochenplan__block small {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Wege nach dem Abschluss
   -------------------------------------------------------------------------- */
.rsp-block .rsp-wege__liste {
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid var(--rsp-rule);
	list-style: none;
}

.rsp-block .rsp-wege__eintrag {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	align-items: baseline;
	gap: 24px;
	margin: 0;
	padding: 20px 0;
	border-bottom: 1px solid var(--rsp-rule-soft);
}

.rsp-block .rsp-wege__eintrag:last-child {
	border-bottom: 0;
}

.rsp-block .rsp-wege__name {
	margin: 0;
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-md);
	font-weight: 600;
	color: var(--rsp-ink);
}

.rsp-block .rsp-wege__text {
	margin: 0;
	font-size: var(--rsp-t-sm);
	color: var(--rsp-ink-2);
}

@media (max-width: 820px) {

	.rsp-block .rsp-wege__eintrag {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   Kennzahlen: Aufzählung im Kasten, kein Zahlen-Trio
   -------------------------------------------------------------------------- */
.rsp-block.rsp-kennzahlen {
	padding: 20px 24px;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-lg);
	background: var(--rsp-surface);
}

.rsp-block .rsp-kennzahlen__titel {
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--rsp-ink);
	font-size: var(--rsp-t-xs);
	font-weight: 700;
}

.rsp-block .rsp-kennzahlen__liste {
	margin: 0;
}

.rsp-block .rsp-kennzahlen__liste div {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--rsp-rule-soft);
}

.rsp-block .rsp-kennzahlen__liste div:first-child {
	padding-top: 0;
	border-top: 0;
}

.rsp-block .rsp-kennzahlen__liste dt {
	margin: 0;
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-lg);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--rsp-rs-deep);
}

.rsp-block.rsp-kennzahlen--fos .rsp-kennzahlen__liste dt {
	color: var(--rsp-fos-deep);
}

.rsp-block .rsp-kennzahlen__liste dd {
	margin: 0;
	font-size: var(--rsp-t-xs);
	line-height: 1.4;
	color: var(--rsp-ink-2);
}

/* --------------------------------------------------------------------------
   Weiter-Navigation am Seitenende
   -------------------------------------------------------------------------- */
.rsp-block.rsp-weiter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	border-top: 1px solid var(--rsp-rule);
}

.rsp-block.rsp-weiter .rsp-weiter__link {
	display: block;
	padding: 40px 32px;
	background: var(--rsp-surface);
	color: var(--rsp-ink);
	text-decoration: none;
	transition: background var(--rsp-fast);
}

/* Astra zentriert Kinder direkter, voller Blöcke per margin auto (0,4,0);
   die Flächen sollen ihre Spalte ganz füllen. */
nav.rsp-block.rsp-weiter.wp-block-rsp-weiter > .rsp-weiter__link {
	margin-inline: 0;
}

.rsp-block.rsp-weiter .rsp-weiter__link + .rsp-weiter__link {
	border-left: 1px solid var(--rsp-rule);
}

.rsp-block.rsp-weiter .rsp-weiter__link:hover,
.rsp-block.rsp-weiter .rsp-weiter__link:focus-visible {
	background: var(--rsp-rs-wash);
	color: var(--rsp-ink);
}

.rsp-block.rsp-weiter .rsp-weiter__link--fos:hover,
.rsp-block.rsp-weiter .rsp-weiter__link--fos:focus-visible {
	background: var(--rsp-fos-wash);
}

.rsp-block .rsp-weiter__vorzeile {
	display: block;
	margin-bottom: 8px;
	font-size: var(--rsp-t-xs);
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-weiter__titel {
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-md);
	font-weight: 700;
}

@media (max-width: 820px) {

	.rsp-block.rsp-weiter .rsp-weiter__link + .rsp-weiter__link {
		border-top: 1px solid var(--rsp-rule);
		border-left: 0;
	}
}

/* --------------------------------------------------------------------------
   Downloads
   -------------------------------------------------------------------------- */
.rsp-block .rsp-downloads__liste {
	display: grid;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.rsp-block .rsp-downloads__liste li {
	margin: 0;
}

.rsp-block.rsp-downloads .rsp-downloads__eintrag {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid var(--rsp-rule);
	border-radius: var(--rsp-r-md);
	background: var(--rsp-surface);
	color: var(--rsp-ink);
	text-decoration: none;
	transition: border-color var(--rsp-fast);
}

.rsp-block.rsp-downloads .rsp-downloads__eintrag:hover,
.rsp-block.rsp-downloads .rsp-downloads__eintrag:focus-visible {
	border-color: var(--rsp-ink);
	color: var(--rsp-ink);
}

.rsp-block .rsp-downloads__symbol {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	background: var(--rsp-rs-wash);
	color: var(--rsp-rs-deep);
}

.rsp-block.rsp-downloads--fos .rsp-downloads__symbol {
	background: var(--rsp-fos-wash);
	color: var(--rsp-fos-deep);
}

.rsp-block .rsp-downloads__name {
	font-family: var(--rsp-font-display);
	font-size: var(--rsp-t-sm);
	font-weight: 600;
}

.rsp-block .rsp-downloads__meta {
	display: block;
	font-family: var(--rsp-font-body);
	font-size: var(--rsp-t-xs);
	font-weight: 400;
	color: var(--rsp-ink-3);
}

.rsp-block .rsp-downloads__pfeil {
	color: var(--rsp-ink-3);
}

@media (max-width: 560px) {

	.rsp-block.rsp-downloads .rsp-downloads__eintrag {
		grid-template-columns: 32px minmax(0, 1fr) auto;
		gap: 12px;
	}

	.rsp-block .rsp-downloads__symbol {
		width: 32px;
		height: 32px;
	}
}