/*
Theme Name: Stadttauben
Description: Child-Theme der Stadttauben Initiative Dresden e. V. auf Basis von Twenty Twenty-Five.
Author: Stadttauben Initiative Dresden e. V.
Template: twentytwentyfive
Version: 0.8.1
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stadttauben
*/

/* Version 0.7.6 (#1228): Ersatzschrift für Montserrat mit angepassten Maßen. Solange Montserrat lädt,
   stehen die Überschriften in Arial mit 118 % Größe; die Startseite springt beim Schriftwechsel nicht mehr. */
@font-face {
	font-family: "Montserrat Fallback";
	src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans");
	font-weight: 700;
	font-style: normal;
	size-adjust: 118%;
	ascent-override: 82.03%;
	descent-override: 21.27%;
	line-gap-override: 0%;
}

/* Bausteine des Vereins (Design-System, Stufe 4): Farben, Schriftgrößen und Abstände kommen aus theme.json.
   Hier stehen nur Werte, die theme.json nicht als Vorgabe kennt. Hex-Werte nur aus tokens.json. */
:root {
	--st-radius-feld: var(--wp--custom--radius--feld, 8px);
	--st-radius-karte: var(--wp--custom--radius--karte, 12px);
	--st-kurve: var(--wp--custom--bewegung--kurve, cubic-bezier(0.2, 0, 0, 1));
	--st-dauer-druck: var(--wp--custom--bewegung--druck, 100ms);
	--st-dauer-uebergang: var(--wp--custom--bewegung--uebergang, 240ms);
	--st-symbol-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--st-symbol-notfall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l5 5v8l-5 5H8l-5-5V8z'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

@media (hover: hover) {
	a:hover {
		text-decoration-thickness: 2px;
	}
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

/* Sichtbarer Fokus überall: 3 px, auf Petrol in Gold */
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: var(--wp--custom--fokus--breite, 3px) solid var(--wp--preset--color--link);
	outline-offset: var(--wp--custom--fokus--abstand, 2px);
}

:where(.has-marke-background-color, .has-brand-petrol-background-color) :where(a, button, summary, .wp-element-button):focus-visible {
	outline-color: var(--wp--preset--color--akzent);
}

/* Bilder im Seiteninhalt: Radius wie Karten */
.wp-block-image img,
.wp-block-media-text__media img {
	border-radius: var(--st-radius-karte);
}

/* Knöpfe: primär (Petrol, Vorgabe), sekundär (Rand Mittelblau, Stil "Umriss"), Akzent (Gold, Stil "Akzent").
   Auf jeder Seite höchstens ein Akzent-Knopf. Links zur Spendenseite sind automatisch Akzent. */
.wp-element-button,
.wp-block-button__link {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	transition: transform var(--st-dauer-druck) var(--st-kurve), background-color var(--st-dauer-uebergang) var(--st-kurve), border-color var(--st-dauer-uebergang) var(--st-kurve);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: scale(0.97);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--color--flaeche);
	color: var(--wp--preset--color--link);
	border-color: var(--wp--preset--color--link);
}

@media (hover: hover) {
	.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
		background: var(--wp--preset--color--info-bg);
		color: var(--wp--preset--color--link-hover);
		border-color: var(--wp--preset--color--link-hover);
	}
}

.wp-block-button.is-style-akzent > .wp-block-button__link:not(.has-background),
.wp-block-button__link:not(.has-background)[href*="spenden"] {
	background: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--akzent);
}

@media (hover: hover) {
	.wp-block-button.is-style-akzent > .wp-block-button__link:not(.has-background):hover,
	.wp-block-button__link:not(.has-background)[href*="spenden"]:hover {
		background: var(--wp--preset--color--akzent-hover);
		color: var(--wp--preset--color--text);
		border-color: var(--wp--preset--color--akzent-hover);
	}
}

/* Kopfzeile: klebt in jeder Breite oben, damit "Taube gefunden?" immer erreichbar ist */
html {
	scroll-padding-top: 96px;
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--flaeche);
	box-shadow: 0 1px 0 var(--wp--preset--color--linie), var(--wp--preset--shadow--karte);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.st-kopf__in {
	max-width: 1168px;
	margin: 0 auto;
	min-height: 64px;
	padding: 0 8px;
	gap: 4px;
	box-sizing: border-box;
}

.st-home {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	text-decoration: none;
	color: var(--wp--preset--color--marke);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
}

.st-home img {
	width: 40px;
	height: 40px;
	flex: none;
	display: block;
}

.st-home__name {
	display: none;
}

.st-kopf-knoepfe {
	display: flex;
	gap: 4px;
	align-items: center;
	flex: none;
}

/* Knöpfe nach rechts neben den Menü-Knopf schieben. Der Selektor mit zwei Klassen ist nötig,
   weil WordPress Kindern von Flex-Gruppen den Außenabstand 0 gibt. */
.st-kopf__in > .st-kopf-knoepfe {
	margin-left: auto;
}

.st-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 44px;
	padding: 8px;
	box-sizing: border-box;
	border: 2px solid transparent;
	border-radius: var(--st-radius-karte);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--st-dauer-druck) var(--st-kurve), background-color var(--st-dauer-uebergang) var(--st-kurve), border-color var(--st-dauer-uebergang) var(--st-kurve);
}

.st-knopf:active {
	transform: scale(0.97);
}

/* Der eine Akzent-Knopf der Kopfzeile: Spenden in Gold */
.st-knopf--spenden {
	background: var(--wp--preset--color--akzent);
	border-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--text);
}

@media (hover: hover) {
	.st-knopf--spenden:hover {
		background: var(--wp--preset--color--akzent-hover);
		border-color: var(--wp--preset--color--akzent-hover);
		color: var(--wp--preset--color--text);
	}
}

/* "Taube gefunden?" ist sekundär: Umriss in Mittelblau, damit nur eine Absicht auffällt */
.st-knopf--sekundaer {
	background: var(--wp--preset--color--flaeche);
	border-color: var(--wp--preset--color--link);
	color: var(--wp--preset--color--link);
}

@media (hover: hover) {
	.st-knopf--sekundaer:hover {
		background: var(--wp--preset--color--info-bg);
		border-color: var(--wp--preset--color--link-hover);
		color: var(--wp--preset--color--link-hover);
	}
}

.st-kopf .wp-block-navigation {
	order: 3;
	flex: none;
}

@media (max-width: 1139px) {
	.st-kopf .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

@media (max-width: 359px) {
	.st-knopf {
		font-size: 0.8125rem;
	}

	.st-home img {
		width: 32px;
		height: 32px;
	}
}

@media (min-width: 600px) {
	.st-kopf__in {
		padding: 8px 24px;
		gap: 16px;
		min-height: 80px;
	}

	.st-home img {
		width: 48px;
		height: 48px;
	}

	.st-kopf-knoepfe {
		gap: 8px;
	}

	.st-knopf {
		font-size: 1rem;
		padding: 8px 16px;
	}
}

/* Zwischen Handy und Desktop (600 bis 1139 px, z. B. Tablet oder Handy quer) passt das Menü nicht in eine Zeile:
   dort gilt das Handy-Menü. WordPress schaltet von sich aus schon ab 600 px auf das breite Menü um;
   diese zwei Regeln verschieben die Grenze. */
@media (min-width: 600px) and (max-width: 1139px) {
	.st-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.st-kopf .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Breites Menü ab 1140 px: Erst hier passen Logo mit Namen, Menü und Knöpfe in eine Zeile.
   Menüpunkte und Untermenü-Pfeile bekommen eine Antippfläche von 44 px Höhe; das Aussehen bleibt gleich. */
@media (min-width: 1140px) {
	.st-kopf__in {
		gap: 12px;
	}

	.st-kopf .wp-block-navigation-item__content {
		white-space: nowrap;
	}

	.st-kopf__in > .st-kopf-knoepfe {
		margin-left: 0;
	}

	.st-kopf .wp-block-navigation {
		order: 0;
		flex: 1 1 auto;
	}

	.st-kopf .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-block: 10px;
		margin-block: -10px;
	}

	.st-kopf .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
		position: relative;
	}

	.st-kopf .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle::after {
		content: "";
		position: absolute;
		inset: -18px -9px -18px -4px;
	}
}

/* Untermenü (Klappmenü am Computer): Karte mit Radius und Schatten, jede Zeile mindestens 44 px hoch */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--st-radius-karte);
	background: var(--wp--preset--color--flaeche);
	box-shadow: var(--wp--preset--shadow--schwebend);
	padding: 8px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	border-radius: var(--st-radius-feld);
}

@media (hover: hover) {
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--info-bg);
	}
}

@media (hover: hover) {
	.wp-block-navigation .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--link-hover);
	}
}

/* Handy-Menü (unter 1140 px): linksbündig, Hauptpunkte fett, Unterpunkte eingerückt, jede Zeile mindestens 44 px */
@media (max-width: 1139px) {
	.st-kopf .is-menu-open .wp-block-navigation__responsive-container-content,
	.st-kopf .is-menu-open .wp-block-navigation__container,
	.st-kopf .is-menu-open .wp-block-navigation-item,
	.st-kopf .is-menu-open .wp-block-navigation__submenu-container {
		align-items: flex-start !important;
	}

	.st-kopf .is-menu-open .wp-block-navigation__container {
		gap: 0;
		width: 100%;
	}

	.st-kopf .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		padding: 4px 0;
		border-top: 1px solid var(--wp--preset--color--linie);
	}

	.st-kopf .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 44px;
		padding: 8px 0;
		font-size: 1.125rem;
	}

	.st-kopf .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 700;
		color: var(--wp--preset--color--marke);
	}

	.st-kopf .wp-block-navigation .is-menu-open .wp-block-navigation__container .wp-block-navigation__submenu-container {
		padding: 0 0 0 16px;
		gap: 0;
		border: 0;
		box-shadow: none;
	}

	.st-kopf .is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/* Fußzeile: drei Spalten (Verein, Mitmachen, Rechtliches), Links mindestens 44 px hoch */
.st-fuss {
	margin-block-start: 0;
	padding: 48px 16px;
	background: var(--wp--preset--color--bg);
	border-top: 1px solid var(--wp--preset--color--linie);
}

@media (min-width: 600px) {
	.st-fuss {
		padding-inline: 24px;
	}
}

.st-fuss__spalten {
	gap: 32px;
	margin: 0;
}

.st-fuss__titel {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.2;
	color: var(--wp--preset--color--marke);
}

.st-fuss__name {
	margin: 0 0 8px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.st-fuss address {
	font-style: normal;
	margin: 0 0 8px;
}

.st-fuss p {
	margin-block: 0 8px;
}

.st-fuss .wp-block-navigation__container {
	gap: 0;
}

footer .wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--text);
}

@media (hover: hover) {
	footer .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--link-hover);
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}
}

.st-fuss a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Aufklappen (Akkordeon): Karte mit Rand, Zeile mindestens 44 px, sichtbares Auf/Zu-Zeichen rechts */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--st-radius-karte);
	background: var(--wp--preset--color--flaeche);
	overflow: hidden;
}

.wp-block-details + .wp-block-details {
	margin-block-start: 8px;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	box-sizing: border-box;
	padding: 8px 16px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--marke);
	transition: background-color var(--st-dauer-uebergang) var(--st-kurve);
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--st-symbol-chevron) center / contain no-repeat;
	mask: var(--st-symbol-chevron) center / contain no-repeat;
	transition: transform var(--st-dauer-uebergang) var(--st-kurve);
}

@media (hover: hover) {
	.wp-block-details > summary:hover {
		background: var(--wp--preset--color--info-bg);
	}
}

.wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

.wp-block-details > :not(summary) {
	margin-inline: 16px;
}

.wp-block-details > :last-child {
	margin-block-end: 16px;
}

/* Hinweiskasten: Notfall-Meldung wie im Design-System (Symbol, dünner Rand rundum in der Notfall-Farbe, heller Grund; ab 0.7.0 ohne dicken Streifen links).
   Gilt für das Muster "Hinweiskasten" und für ältere Kästen mit Rostrot-Rand. */
.st-hinweis,
.is-style-st-hinweis-achtung,
.wp-block-group.has-emergency-border-color,
.wp-block-group.has-notfall-border-color {
	position: relative;
	box-sizing: border-box;
	padding: 16px 16px 16px 56px !important;
	border: 1px solid var(--wp--preset--color--notfall) !important;
	border-radius: var(--st-radius-karte) !important;
	background-color: var(--wp--preset--color--notfall-bg) !important;
	color: var(--wp--preset--color--text);
}

.st-hinweis::before,
.is-style-st-hinweis-achtung::before,
.wp-block-group.has-emergency-border-color::before,
.wp-block-group.has-notfall-border-color::before {
	content: "";
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--notfall);
	-webkit-mask: var(--st-symbol-notfall) center / contain no-repeat;
	mask: var(--st-symbol-notfall) center / contain no-repeat;
}

:where(.st-hinweis, .is-style-st-hinweis-achtung, .wp-block-group.has-emergency-border-color) > :where(h2, h3, h4) {
	color: var(--wp--preset--color--notfall);
	margin-block-start: 0;
}

/* Karte (Gruppe mit Klasse "st-karte" oder Stil "Karte"): Rand, Radius 12, leichter Schatten; hebt sich beim Überfahren um 2 px */
.st-karte,
.wp-block-group.is-style-karte,
.wp-block-columns.is-style-st-karten > .wp-block-column {
	padding: 16px;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--st-radius-karte);
	background: var(--wp--preset--color--flaeche);
	box-shadow: var(--wp--preset--shadow--karte);
	box-sizing: border-box;
	transition: transform var(--st-dauer-uebergang) var(--st-kurve), border-color var(--st-dauer-uebergang) var(--st-kurve);
}

@media (min-width: 600px) {
	.st-karte,
	.wp-block-group.is-style-karte,
	.wp-block-columns.is-style-st-karten > .wp-block-column {
		padding: 24px;
	}
}

.st-karte:focus-within,
.wp-block-columns.is-style-st-karten > .wp-block-column:focus-within {
	border-color: var(--wp--preset--color--marke);
}

.st-karte > :first-child,
.wp-block-columns.is-style-st-karten > .wp-block-column > :first-child {
	margin-block-start: 0;
}

.st-karte > :last-child,
.wp-block-columns.is-style-st-karten > .wp-block-column > :last-child {
	margin-block-end: 0;
}

.st-karte :where(h2, h3, h4),
.wp-block-columns.is-style-st-karten > .wp-block-column :where(h2, h3, h4) {
	margin-block: 0 8px;
}

/* Projekt-Raster: eine große Karte, daneben zwei kleine Karten mit Bild links */
.st-raster-asym {
	gap: 24px;
}

.st-raster-asym .st-karte--gross .wp-block-image {
	margin-block-end: 16px;
}

.st-raster-asym .st-karte--klein + .st-karte--klein {
	margin-block-start: 24px;
}

.st-raster-asym .st-karte--klein .wp-block-media-text__content {
	padding: 0 0 0 16px;
}

/* Zahlenreihe: große Zahlen links ausgerichtet, Quelle und Stand darunter */
.st-zahlen {
	gap: 24px;
}

.st-zahl {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.1;
	color: var(--wp--preset--color--marke);
	font-variant-numeric: tabular-nums;
}

.st-quelle {
	margin-block-start: 16px;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--text-gedaempft);
}

/* Antippflächen: allein stehender Link am Absatzende, PDF-Links, Überschriften, die nur aus einem Link bestehen */
p > br + a:last-child {
	display: inline-block;
	padding-block: 10px;
}

a[href$=".pdf" i] {
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px;
}

:is(h2, h3, h4).wp-block-heading > a:only-child {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
}

/* Lange Wörter (z. B. "Wildvogelauffangstation" oder eine E-Mail-Adresse) brechen um,
   statt die Seite breiter als das Handy zu machen. Unter 360 px Breite trennt der Browser
   Überschriften nach Silben (die Seite hat lang="de"). */
:is(h1, h2, h3, h4, h5, h6, p, li, summary, figcaption) {
	overflow-wrap: break-word;
}

/* Überschriften trennen immer nach Silben (die Seite hat lang="de"); mitten im Wort bricht nur noch, wenn der Browser
   keine Trennung kennt. Am Handy gilt das auch für Absätze, Listen und Aufklapp-Zeilen. */
:is(h1, h2, h3, h4, h5, h6) {
	-webkit-hyphens: auto;
	hyphens: auto;
}

@media (max-width: 599px) {
	:is(p, li, summary, figcaption) {
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	/* H1 am Handy eine Stufe kleiner (20 bis 28 px), damit lange Wörter an Silbengrenzen umbrechen */
	.wp-site-blocks h1 {
		font-size: clamp(1.25rem, 6.2vw, 1.75rem);
	}
}

/* Bewegung: Abschnitte gleiten beim Hereinscrollen 8 px nach oben, ohne Transparenz (seit 0.5.1: nichts steht blass da) (nur mit Browser-Unterstützung
   für animation-timeline; sonst und bei "Bewegung reduzieren" steht alles sofort da).
   Der erste Abschnitt einer Seite blendet nie ein, damit das Titelbild nicht verzögert erscheint. */
@keyframes st-einblenden {
	from {
		transform: translateY(8px);
	}

	to {
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		main .entry-content > :is(.wp-block-group, .wp-block-columns, .wp-block-media-text, .wp-block-details):not(:first-child) {
			animation: st-einblenden linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}
	}
}

/* Karten heben sich beim Überfahren leicht an (nur mit Maus, nur ohne "Bewegung reduzieren") */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.st-karte:hover,
	.wp-block-group.is-style-karte:hover,
	.wp-block-columns.is-style-st-karten > .wp-block-column:hover {
		transform: translateY(-2px);
		border-color: var(--wp--preset--color--marke);
	}
}

@media print {
	main .entry-content > * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Bewegung reduzieren: alles aus, Endzustand sofort */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 600px) {
	.st-raster-asym .st-karte--klein .wp-block-media-text__content {
		padding: 16px 0 0;
	}
}

/* ==========================================================================
   Version 0.7.0: Ergänzungen auf 0.6.0. Alle Farben, Abstände und Schriftgrößen kommen aus theme.json
   (Palette, Abstandsstufen xs bis xxxl, Größen klein bis display). Block-Stile tragen das Präfix st-
   und sind in functions.php angemeldet. Beschreibung mit Block-Code: BAUSTEINE.md.
   Doppelungen vermieden: Einblenden und Karten-Anheben aus 0.6.0 gelten auch hier (siehe oben),
   Hover steht überall in @media (hover: hover), Bewegung nur ohne "Bewegung reduzieren".
   ========================================================================== */

:root {
	--st-zeilenlaenge: 52ch;
	--st-kasten-breite: calc(var(--st-zeilenlaenge) + 7.5rem);
	--st-symbol-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
	--st-symbol-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

/* --- Kopfzeile: Notfall-Knopf (Token notfall, weiße Schrift) und Social-Symbole ------------------- */
.st-knopf--notfall {
	background: var(--wp--preset--color--notfall);
	border-color: var(--wp--preset--color--notfall);
	color: var(--wp--preset--color--text-on-dark);
}

@media (hover: hover) {
	@supports (background: color-mix(in srgb, red 50%, blue)) {
		.st-knopf--notfall:hover,
		.wp-block-button.is-style-st-notfall .wp-block-button__link:hover {
			background: color-mix(in srgb, var(--wp--preset--color--notfall) 82%, var(--wp--preset--color--text));
			border-color: color-mix(in srgb, var(--wp--preset--color--notfall) 82%, var(--wp--preset--color--text));
			color: var(--wp--preset--color--text-on-dark);
		}
	}
}

/* Social-Symbole: ab 1140 px in der Kopfzeile, darunter als feste Leiste unten im geöffneten Handy-Menü */
.st-kopf-social {
	display: none;
}

.st-kopf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--marke);
}

.st-kopf-social svg,
.st-fuss__social svg {
	width: 24px;
	height: 24px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (hover: hover) {
	.st-kopf-social a:hover {
		color: var(--wp--preset--color--link-hover);
	}
}

@media (min-width: 1140px) {
	.st-kopf-social {
		display: flex;
		flex: none;
	}
}

/* Im Handy-Menü stehen die Social-Links als Liste im Menü selbst (functions.php fügt sie ein, per Tastatur erreichbar) */
.st-menue-social {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.is-menu-open .st-menue-social {
	order: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--lg);
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--md);
	padding-block-start: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.st-menue-social a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	min-height: 44px;
	box-sizing: border-box;
	color: var(--wp--preset--color--marke);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--gross);
	text-decoration: none;
}

.st-menue-social svg {
	width: 24px;
	height: 24px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (hover: hover) {
	.st-menue-social a:hover {
		color: var(--wp--preset--color--link-hover);
		text-decoration: underline;
	}
}

/* --- Fußzeile: Silhouette von Dresden als dekorativer Abschluss oben, Spalte "Folgen" ----------------- */
/* Die Silhouette wird nie beschnitten: Das Seitenverhältnis des Bildes (1440 zu 140) bestimmt die Höhe, höchstens 140 px.
   Ist das Fenster breiter als 1440 px, steht das ganze Bild in der Mitte, und links und rechts läuft der Boden in Petrol
   (Token marke) bis zum Rand weiter. Die Bodenhöhe entspricht den Rändern des Bildes: links 28 von 140 Einheiten (20 %),
   rechts 34 von 140 (24,3 %). Bei schmalen Fenstern sind die Streifen 0 px breit. */
.st-fuss__silhouette {
	display: block;
	width: 100%;
	aspect-ratio: 1440 / 140;
	max-height: 140px;
	margin: 0;
	background:
		url("assets/dresden-silhouette.svg") center bottom / contain no-repeat,
		linear-gradient(var(--wp--preset--color--marke), var(--wp--preset--color--marke)) left bottom / max(0px, calc(50% - 720px)) 20% no-repeat,
		linear-gradient(var(--wp--preset--color--marke), var(--wp--preset--color--marke)) right bottom / max(0px, calc(50% - 720px)) 24.3% no-repeat;
}

.st-fuss__silhouette + .st-fuss {
	border-top: 0;
}

.st-fuss__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.st-fuss__liste a,
.st-fuss__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	min-height: 44px;
	box-sizing: border-box;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--text);
}

@media (hover: hover) {
	.st-fuss__liste a:hover,
	.st-fuss__link:hover {
		color: var(--wp--preset--color--link-hover);
		text-decoration-thickness: 2px;
	}
}

/* --- Knöpfe: Notfall (Block-Stil) und Größe "gross" für den Anruf ------------------------------------- */
.wp-block-button.is-style-st-notfall .wp-block-button__link {
	background: var(--wp--preset--color--notfall);
	color: var(--wp--preset--color--text-on-dark);
	border-color: var(--wp--preset--color--notfall);
}

.wp-block-button.st-gross .wp-block-button__link {
	min-height: var(--wp--preset--spacing--xxxl);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
	font-size: var(--wp--preset--font-size--titel);
	line-height: 1.25;
}

/* --- Gemeinsame Basis der Kästen: Kinder untereinander, Abstand dazwischen --------------------------- */
.wp-block-group:is(.is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-zahlenkachel, .is-style-st-schritt, .is-style-st-seitenkopf) {
	display: flow-root;
	box-sizing: border-box;
}

.wp-block-group:is(.is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-zahlenkachel, .is-style-st-schritt, .is-style-st-seitenkopf) > * {
	margin-block: 0;
}

.wp-block-group:is(.is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-zahlenkachel, .is-style-st-schritt, .is-style-st-seitenkopf) > * + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* --- Notfallkasten: Rand notfall-rand, Grund notfall-bg, Überschrift in Notfall-Farbe mit Telefon-Symbol --- */
.wp-block-group.is-style-st-notfallkasten {
	padding: var(--wp--preset--spacing--md);
	border: 2px solid var(--wp--preset--color--notfall-rand);
	border-radius: var(--st-radius-karte);
	background: var(--wp--preset--color--notfall-bg);
	color: var(--wp--preset--color--text);
}

.is-style-st-notfallkasten :where(h2, h3, h4) {
	color: var(--wp--preset--color--notfall);
}

.is-style-st-notfallkasten > :is(h2, h3, h4):first-child {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	align-items: flex-start;
}

.is-style-st-notfallkasten > :is(h2, h3, h4):first-child::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: 0.125rem;
	margin-top: calc((1lh - 1.75rem) / 2);
	background-color: var(--wp--preset--color--notfall);
	-webkit-mask: var(--st-symbol-telefon) center / contain no-repeat;
	mask: var(--st-symbol-telefon) center / contain no-repeat;
}

@media (min-width: 600px) {
	.wp-block-group.is-style-st-notfallkasten {
		padding: var(--wp--preset--spacing--lg);
	}
}

@media (min-width: 900px) {
	.wp-block-group.is-style-st-notfallkasten {
		padding: var(--wp--preset--spacing--xl);
	}
}

/* --- Hinweis Information: dünner Rand und Symbol, ohne Farbstreifen (Achtung teilt das Aussehen von .st-hinweis, siehe oben) -------------------- */
.wp-block-group.is-style-st-hinweis-info {
	position: relative;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) 3.5rem;
	border: 1px solid var(--wp--preset--color--info-rand);
	border-radius: var(--st-radius-karte);
	background-color: var(--wp--preset--color--info-bg);
	color: var(--wp--preset--color--text);
}

.is-style-st-hinweis-info::before {
	content: "";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--md);
	inset-inline-start: var(--wp--preset--spacing--md);
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--marke);
	-webkit-mask: var(--st-symbol-info) center / contain no-repeat;
	mask: var(--st-symbol-info) center / contain no-repeat;
}

:where(.is-style-st-hinweis-info, .is-style-st-hinweis-achtung) > :where(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.4;
}

/* --- Schritte mit Piktogramm: Nummer kommt automatisch vor die erste Überschrift jedes Schritts ----------- */
.wp-block-group.is-style-st-schritte {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	counter-reset: st-schritt;
}

.wp-block-group.is-style-st-notfallkasten > .is-style-st-schritte {
	margin-block-start: var(--wp--preset--spacing--lg);
}

.wp-block-group.is-style-st-schritte > * {
	margin-block: 0;
}

.wp-block-group.is-style-st-schritt {
	counter-increment: st-schritt;
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--st-radius-karte);
	background: var(--wp--preset--color--flaeche);
}

.wp-block-group.is-style-st-schritt[class*="st-picto--"] {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--sm);
	row-gap: var(--wp--preset--spacing--sm);
	align-items: center;
	align-content: start;
}

.is-style-st-schritt[class*="st-picto--"]::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	width: 2.5rem;
	height: 2.5rem;
	background: center / contain no-repeat;
}

.is-style-st-schritt[class*="st-picto--"] > * {
	grid-column: 1 / -1;
}

.is-style-st-schritt[class*="st-picto--"] > :is(h2, h3, h4):first-of-type {
	grid-column: 2;
	grid-row: 1;
}

@media (min-width: 600px) {
	.wp-block-group.is-style-st-schritt[class*="st-picto--"] {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--md);
		row-gap: 0;
		align-items: start;
	}

	.is-style-st-schritt[class*="st-picto--"]::before {
		grid-row: 1 / span 6;
		width: 3.5rem;
		height: 3.5rem;
	}

	.is-style-st-schritt[class*="st-picto--"] > * {
		grid-column: 2;
	}

	.is-style-st-schritt[class*="st-picto--"] > :is(h2, h3, h4):first-of-type {
		grid-row: auto;
	}
}

.is-style-st-schritt > :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--titel);
	line-height: 1.3;
}

.is-style-st-schritt > :is(h2, h3, h4):first-of-type::before {
	content: counter(st-schritt) ". ";
	color: var(--wp--preset--color--link);
}

.is-style-st-schritte.st-notfall > .is-style-st-schritt > :is(h2, h3, h4):first-of-type::before {
	color: var(--wp--preset--color--notfall);
}

.is-style-st-schritt.st-picto--taube::before {
	background-image: url("assets/piktogramm-taube.svg");
}

.is-style-st-schritt.st-picto--karton::before {
	background-image: url("assets/piktogramm-karton.svg");
}

.is-style-st-schritt.st-picto--ruhe::before {
	background-image: url("assets/piktogramm-ruhe.svg");
}

.is-style-st-schritt.st-picto--kein-futter::before {
	background-image: url("assets/piktogramm-kein-futter.svg");
}

.is-style-st-schritt.st-picto--wasser-futter::before {
	background-image: url("assets/piktogramm-wasser-futter.svg");
}

.is-style-st-schritt.st-picto--handy::before {
	background-image: url("assets/piktogramm-handy.svg");
}

.is-style-st-schritt.st-picto--haus::before {
	background-image: url("assets/piktogramm-haus.svg");
}

/* Kurzfassung (Startseite): Piktogramm oben, Stichwort zentriert darunter, keine Nummer und keine Silbentrennung.
   2 Spalten am Handy, 4 ab 768 px. Die Selektoren tragen mehr Gewicht als die für Schritte mit Piktogramm. */
.wp-block-group.is-style-st-schritte.st-schritte-kompakt {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}

.wp-block-group.is-style-st-schritte.st-schritte-kompakt > .wp-block-group.is-style-st-schritt[class*="st-picto--"] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}

.st-schritte-kompakt > .is-style-st-schritt[class*="st-picto--"]::before {
	flex: none;
	align-self: center;
	width: 4.5rem;
	height: 4.5rem;
}

.st-schritte-kompakt > .is-style-st-schritt[class*="st-picto--"] > p {
	grid-column: auto;
	max-width: none;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.3;
	color: var(--wp--preset--color--marke);
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

@media (min-width: 768px) {
	.wp-block-group.is-style-st-schritte.st-schritte-kompakt {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- Zahlen mit Erklärung: erweitert .st-zahlen / .st-zahl / .st-quelle aus 0.6.0 --------------------------
   Je Spalte: .st-zahl (die Zahl), .st-zahl__text (Erklärsatz), optional .st-quelle (Quelle, Stand). */
.wp-block-columns:is(.st-zahlen, .is-style-st-zahlen) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wp--preset--spacing--lg);
	margin-block: 0;
}

.wp-block-columns:is(.st-zahlen, .is-style-st-zahlen) > .wp-block-column,
.wp-block-group.is-style-st-zahlenkachel {
	min-width: 0;
	margin: 0;
	padding-top: var(--wp--preset--spacing--md);
	border-top: 2px solid var(--wp--preset--color--marke);
}

.wp-block-columns:is(.st-zahlen, .is-style-st-zahlen) > .wp-block-column > * {
	margin-block: 0;
}

.st-zahl__text {
	margin-block: var(--wp--preset--spacing--xs) 0;
}

:is(.st-zahlen, .is-style-st-zahlen, .is-style-st-zahlenkachel) .st-quelle {
	margin-block-start: var(--wp--preset--spacing--sm);
}

@media (min-width: 900px) {
	.wp-block-columns:is(.st-zahlen, .is-style-st-zahlen) {
		gap: var(--wp--preset--spacing--xl);
	}
}

/* --- Karten gleicher Höhe: Spalten-Block, jede Spalte eine Karte (Aussehen wie .st-karte, oben erweitert) ---
   Teile (Bild, Überschrift, Text, Knopf) gleicher Art liegen über alle Karten einer Reihe auf einer Linie
   (Unterraster), auch wenn eine Überschrift zwei Zeilen braucht. Ohne Unterraster bleiben die Karten gleich hoch. */
.wp-block-columns.is-style-st-karten {
	--st-karten-innen: var(--wp--preset--spacing--md);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: var(--wp--preset--spacing--lg);
	margin-block: 0;
}

.wp-block-columns.is-style-st-karten > .wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	min-width: 0;
	margin: 0;
	padding: var(--st-karten-innen);
}

.is-style-st-karten > .wp-block-column > * {
	margin-block: 0;
}

.is-style-st-karten > .wp-block-column > :last-child:is(.wp-block-buttons, .wp-block-button) {
	margin-top: auto;
}

.is-style-st-karten > .wp-block-column :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--titel);
	line-height: 1.3;
}

.is-style-st-karten > .wp-block-column :is(h2, h3, h4) a {
	color: var(--wp--preset--color--marke);
	text-decoration: none;
}

/* Ganze Karte anklickbar, wenn die Überschrift ein Link ist */
.is-style-st-karten > .wp-block-column :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--st-radius-karte);
}

@media (hover: hover) {
	.is-style-st-karten > .wp-block-column :is(h2, h3, h4) a:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}
}

.wp-block-columns.is-style-st-karten > .wp-block-column > .wp-block-image {
	margin: calc(-1 * var(--st-karten-innen)) calc(-1 * var(--st-karten-innen)) 0;
}

.wp-block-columns.is-style-st-karten > .wp-block-column > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--st-radius-karte) var(--st-radius-karte) 0 0;
}

@supports (grid-template-rows: subgrid) {
	.wp-block-columns.is-style-st-karten > .wp-block-column {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span var(--st-zeilen, 4);
		row-gap: var(--wp--preset--spacing--sm);
	}

	.is-style-st-karten > .wp-block-column > :last-child:is(.wp-block-buttons, .wp-block-button) {
		margin-top: 0;
		align-self: end;
	}
}

.wp-block-columns.is-style-st-karten.st-zeilen-3 {
	--st-zeilen: 3;
}

.wp-block-columns.is-style-st-karten.st-zeilen-2 {
	--st-zeilen: 2;
}

@media (min-width: 600px) {
	.wp-block-columns.is-style-st-karten {
		--st-karten-innen: var(--wp--preset--spacing--lg);
	}
}

/* 1 Spalte bis 599 px, 2 Spalten von 600 bis 899 px, 3 Spalten ab 900 px (mit st-spalten-2 bleibt es bei 2) */
@media (min-width: 600px) {
	.wp-block-columns.is-style-st-karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.wp-block-columns.is-style-st-karten:not(.st-spalten-2) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Förderleiste: Logos nebeneinander, am Handy umbrechend ------------------------------------------ */
.wp-block-group.is-style-st-foerderleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xxl);
}

.is-style-st-foerderleiste > * {
	margin: 0;
}

.is-style-st-foerderleiste .wp-block-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 6rem;
	border-radius: 0;
}

/* --- Seitenkopf für Unterseiten: H1, Einleitung, optional Bild --------------------------------------- */
.wp-block-group.is-style-st-seitenkopf {
	padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
}

.is-style-st-seitenkopf > h1 + p {
	max-width: 68ch;
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.55;
}

.is-style-st-seitenkopf > .wp-block-image {
	margin-block-start: var(--wp--preset--spacing--lg);
}

.is-style-st-seitenkopf > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (min-width: 900px) {
	.is-style-st-seitenkopf > .wp-block-image img {
		aspect-ratio: 21 / 9;
	}
}

/* --- Spendenzwecke: schlichte Liste mit Haken, nichts zum Anklicken (kein Rand, kein Grund) ----------- */
.wp-block-list.is-style-st-zwecke {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	margin-block: var(--wp--preset--spacing--md);
	padding: 0;
	list-style: none;
}

.is-style-st-zwecke > li {
	position: relative;
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--xl);
}

.is-style-st-zwecke > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.5rem;
	inset-block-start: 0.3em;
	width: 0.375rem;
	height: 0.75rem;
	border: solid var(--wp--preset--color--marke);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* --- Notfall-E-Mail groß: 20 px, ab 700 px 22 px (Fließtext ist 16 px) ----------------------------------- */
:is(.st-notfall-mail, .is-style-st-notfall-mail) {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: calc(var(--wp--preset--font-size--gross) + 2px);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

:is(.st-notfall-mail, .is-style-st-notfall-mail) a {
	color: var(--wp--preset--color--notfall);
}

@media (min-width: 700px) {
	:is(.st-notfall-mail, .is-style-st-notfall-mail) {
		font-size: calc(var(--wp--preset--font-size--gross) + 4px);
	}
}

/* --- Lesbarkeit und Rhythmus im Inhaltsbereich (Befunde line-length, heading-rhythm des Impeccable-Prüflaufs) ----
   Zeilenlänge: Absätze und Listen höchstens 52ch breit. "ch" misst die Ziffer 0, und die ist in Atkinson Hyperlegible breiter
   als ein durchschnittlicher Buchstabe: gemessen sind 52ch rund 540 px und etwa 75 Zeichen je Zeile (65ch wären rund 95).
   Bilder, Karten, Spalten und Kästen bleiben so breit, wie ihr Block es vorgibt: Die Regel betrifft nur Absätze, Listen
   und Definitionslisten, und nur dort, wo sie breiter würden. In schmalen Spalten ändert sich nichts. */
.entry-content :is(p, ul, ol, dl) {
	max-width: var(--st-zeilenlaenge);
}

/* Im zentrierten Inhalt (Layout "constrained") bleibt die linke Kante die der Überschriften:
   WordPress zentriert jedes Kind mit auto-Rändern; ein schmalerer Absatz würde sonst eingerückt wirken. */
:is(.entry-content.is-layout-constrained, .entry-content .is-layout-constrained) > :is(p, ul, ol, dl):not(.alignwide):not(.alignfull):not(.has-text-align-center) {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size, 1120px)) / 2)) !important;
	margin-inline-end: auto !important;
}

.entry-content :is(.wp-block-navigation__container, .wp-block-social-links, .blocks-gallery-grid) {
	max-width: none;
}

/* Überschriften: mehr Abstand davor als danach (Abstandsstufen aus theme.json). Kästen, Karten und Schritte
   regeln ihre Abstände selbst und bleiben ausgenommen; die erste Überschrift einer Gruppe hat oben keinen Abstand. */
.entry-content :is(h2, h3, h4):not(:is(.st-karte, .is-style-karte, .st-hinweis, .is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-schritte, .is-style-st-karten, .is-style-st-zahlenkachel, .is-style-st-foerderleiste, .is-style-st-seitenkopf, .st-raster-asym, .wp-block-details, .wp-block-media-text) *) {
	margin-block-end: 0;
}

.entry-content h2:not(:is(.st-karte, .is-style-karte, .st-hinweis, .is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-schritte, .is-style-st-karten, .is-style-st-zahlenkachel, .is-style-st-foerderleiste, .is-style-st-seitenkopf, .st-raster-asym, .wp-block-details, .wp-block-media-text) *):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--xxl);
}

.entry-content h3:not(:is(.st-karte, .is-style-karte, .st-hinweis, .is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-schritte, .is-style-st-karten, .is-style-st-zahlenkachel, .is-style-st-foerderleiste, .is-style-st-seitenkopf, .st-raster-asym, .wp-block-details, .wp-block-media-text) *):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--xl);
}

.entry-content h4:not(:is(.st-karte, .is-style-karte, .st-hinweis, .is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-schritte, .is-style-st-karten, .is-style-st-zahlenkachel, .is-style-st-foerderleiste, .is-style-st-seitenkopf, .st-raster-asym, .wp-block-details, .wp-block-media-text) *):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--lg);
}

.entry-content :is(h2, h3, h4):first-child {
	margin-block-start: 0;
}

/* Nach einer Überschrift ein kleiner Abstand: Überschrift und Text gehören zusammen */
.entry-content :is(h2, h3, h4):not(:is(.st-karte, .is-style-karte, .st-hinweis, .is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-schritte, .is-style-st-karten, .is-style-st-zahlenkachel, .is-style-st-foerderleiste, .is-style-st-seitenkopf, .st-raster-asym, .wp-block-details, .wp-block-media-text) *) + :not(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--sm);
}

/* Kopfzeile ab 1140 px immer einzeilig (gemessen am echten Menü mit 5 Punkten und Pfeilen):
   Zwischen 1140 und 1359 px engere Abstände und kein Vereinsname (das Logo trägt ihn in kleiner Schrift);
   ab 1360 px wird die Kopfzeile breiter (1320 px) und der Name erscheint. Antippflächen bleiben mindestens 44 px. */
@media (min-width: 1140px) {
	.st-kopf__in {
		gap: var(--wp--preset--spacing--sm);
	}
}

@media (min-width: 1360px) {
	.st-kopf__in {
		max-width: 1320px;
		gap: var(--wp--preset--spacing--md);
	}

	.st-home__name {
		display: inline;
	}
}

/* Hinweiskästen sind oft breiter als 720 px: Der Inhalt steht links im Kasten (neben dem Symbol),
   nicht zentriert wie sonst im Seiteninhalt. */
.entry-content :is(.st-hinweis, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-notfallkasten).is-layout-constrained > :is(p, h2, h3, h4, ul, ol):not(.alignwide):not(.alignfull) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* ==========================================================================
   Version 0.7.3: Korrekturen aus der Sichtprüfung der echten Seiten
   ========================================================================== */

/* Listen im Inhalt: geringer Einzug (20 px statt 40 px), besonders in Karten und Schritten am Handy */
.entry-content :is(ul, ol):not(.is-style-st-zwecke) {
	padding-inline-start: 1.25em;
}

/* Seitentitel der Unterseiten linksbündig auf der Inhaltskante (die Startseite gibt keinen Titel aus: templates/front-page.html) */
.wp-block-post-title {
	text-align: start;
}

.st-hauptteil {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/* --- Notfall-Anruf (Knopf "gross"): Nummer bricht nie um, die Schrift wird am schmalen Handy kleiner ------------------ */
.wp-block-button.st-gross {
	max-width: 100%;
}

.wp-block-button.st-gross .wp-block-button__link {
	max-width: 100%;
	white-space: nowrap;
	font-size: clamp(0.875rem, 4.9vw, var(--wp--preset--font-size--titel));
	padding-inline: clamp(var(--wp--preset--spacing--sm), 3vw, var(--wp--preset--spacing--lg));
}

/* --- Notfall-E-Mail: Adresse bricht nie mitten im Wort; passt sie nicht neben den Text, steht sie in der nächsten Zeile --- */
:is(.st-notfall-mail, .is-style-st-notfall-mail) {
	font-size: clamp(0.875rem, 4.4vw, calc(var(--wp--preset--font-size--gross) + 2px));
	overflow-wrap: break-word;
}

:is(.st-notfall-mail, .is-style-st-notfall-mail) a {
	white-space: nowrap;
}

@media (min-width: 700px) {
	:is(.st-notfall-mail, .is-style-st-notfall-mail) {
		font-size: calc(var(--wp--preset--font-size--gross) + 4px);
	}
}

/* --- Abschnitt: Standardabstand zwischen Abschnitten (Token xxl, ab 900 px xxxl), ohne style-Attribut ------------- */
.wp-block-group.is-style-st-abschnitt {
	margin-block-start: var(--wp--preset--spacing--xxl);
}

.entry-content > .wp-block-group.is-style-st-abschnitt:first-child {
	margin-block-start: 0;
}

@media (min-width: 900px) {
	.wp-block-group.is-style-st-abschnitt {
		margin-block-start: var(--wp--preset--spacing--xxxl);
	}
}

/* --- Text mit Nebenspalte: links der Text, rechts Kasten, Bild oder Kontaktdaten; am Handy untereinander ---------- */
.wp-block-columns.is-style-st-text-neben {
	margin-block: 0;
}

.wp-block-columns.is-style-st-text-neben > .wp-block-column > :first-child {
	margin-block-start: 0;
}

@media (min-width: 782px) {
	.wp-block-columns.is-style-st-text-neben {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--wp--preset--spacing--xl);
		align-items: start !important;
	}

	.wp-block-columns.is-style-st-text-neben > .wp-block-column {
		flex-basis: auto !important;
		margin: 0;
	}
}

@media (min-width: 1140px) {
	.wp-block-columns.is-style-st-text-neben {
		gap: var(--wp--preset--spacing--xxl);
	}
}

/* --- Fußzeile: Inhalt auf derselben Kante wie die Kopfzeile (1120 px, ab 1360 px 1320 px, abzüglich 24 px Innenabstand) --- */
@media (min-width: 600px) {
	.st-fuss__spalten {
		max-width: 1120px;
		margin-inline: auto;
	}
}

@media (min-width: 1360px) {
	.st-fuss__spalten {
		max-width: 1272px;
	}
}

/* ==========================================================================
   Version 0.7.4: gemeinsame linke Kante auf allen Seiten
   theme.json setzt contentSize auf die Breite von wide (1120 px). Dadurch stehen Seitentitel, Überschriften, Absätze, Bilder,
   Spalten, Karten und Kästen auf derselben linken Kante (bei 1280 px x = 80, wie die Kopfzeile). Lesbar schmal bleiben
   Absätze und Listen (52ch, siehe oben) und Kästen ohne Ausrichtung "wide" (höchstens 52ch plus Innenabstand), beide linksbündig.
   ========================================================================== */

/* Kästen ohne wide: nicht breiter als nötig (Hinweise, Notfallkasten, Schritte, Aufklappen) */
.entry-content :is(.st-hinweis, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-notfallkasten, .is-style-st-schritte, .wp-block-details):not(.alignwide):not(.alignfull):not(:is(.st-raster-notfall, .st-notfall-nachspann) *):not(.st-schritte-raster) {
	max-width: var(--st-kasten-breite);
}

/* Im zentrierten Inhalt linksbündig auf der Inhaltskante statt in der Mitte (WordPress zentriert schmalere Kinder) */
:is(.entry-content.is-layout-constrained, .entry-content .is-layout-constrained) > :is(.st-hinweis, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-notfallkasten, .is-style-st-schritte, .wp-block-details):not(.alignwide):not(.alignfull):not(.st-schritte-raster) {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size, 1120px)) / 2)) !important;
	margin-inline-end: auto !important;
}

/* Nach einer Überschrift beginnen Raster, Gruppen, Bilder und Knöpfe mit 16 px Abstand (nicht 8 px wie Fließtext) */
.entry-content :is(h2, h3, h4):not(:is(.st-karte, .is-style-karte, .st-hinweis, .is-style-st-notfallkasten, .is-style-st-hinweis-info, .is-style-st-hinweis-achtung, .is-style-st-schritte, .is-style-st-karten, .is-style-st-zahlenkachel, .is-style-st-foerderleiste, .is-style-st-seitenkopf, .st-raster-asym, .wp-block-details, .wp-block-media-text) *) + :is(.wp-block-columns, .wp-block-group, .wp-block-image, .wp-block-buttons, .wp-block-details) {
	margin-block-start: var(--wp--preset--spacing--md);
}

/* Notfallkasten am Handy: alle Knöpfe volle Breite (Anruf und Umriss gleich breit) */
@media (max-width: 599px) {
	.is-style-st-notfallkasten .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
		width: 100%;
	}

	.is-style-st-notfallkasten .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}

	/* Fußzeile am Handy auf der Kante der Kopfzeile (8 px) */
	.st-fuss {
		padding-inline: 8px;
	}
}

/* Silhouette bei Fenstern bis 1440 px exakt auf die Breite gesetzt (das Seitenverhältnis der Box ist das des Bildes); so bleibt am Rand kein Streifen durch Rundung */
@media (max-width: 1440px) {
	.st-fuss__silhouette {
		background-size: 100% 100%, 0 0, 0 0;
	}
}

/* ==========================================================================
   Version 0.8.0: Notfall am Desktop
   Die Begrenzung auf 52ch (0.7.4) gilt für Absätze, Listen und frei stehende Kästen ohne Ausrichtung "wide". Nicht begrenzt sind
   Kästen mit "wide", Kästen in einem Notfall-Raster (st-raster-notfall) und das Schritte-Raster (st-schritte-raster).
   Absätze und Listen in den Kästen bleiben auch dort bei 52ch. Am Handy (unter 900 px) ändert sich nichts.
   ========================================================================== */

/* --- Notfall-Raster: Kästen nebeneinander (ab 900 px zwei Spalten), am Handy untereinander mit 48 px Abstand wie zwei Abschnitte --- */
.wp-block-group.st-raster-notfall {
	display: grid;
	gap: var(--wp--preset--spacing--xxl);
}

.wp-block-group.st-raster-notfall > * {
	min-width: 0;
	margin-block: 0;
}

@media (min-width: 900px) {
	.wp-block-group.st-raster-notfall {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--lg);
		align-items: stretch;
	}
}

/* --- Notfallkasten breit (Startseite): ab 900 px links Text und Knöpfe, rechts die vier Kurzschritte in 2 x 2 --- */
@media (min-width: 900px) {
	.wp-block-group.is-style-st-notfallkasten.st-notfallkasten--breit {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--xxl);
		align-items: start;
	}

	.wp-block-group.is-style-st-notfallkasten.st-notfallkasten--breit > * {
		grid-column: 1;
		min-width: 0;
	}

	.wp-block-group.is-style-st-notfallkasten.st-notfallkasten--breit > .wp-block-group.is-style-st-schritte {
		grid-column: 2;
		grid-row: 1 / span 8;
		align-self: center;
		margin-block-start: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
		padding: var(--wp--preset--spacing--lg);
		border-radius: var(--st-radius-karte);
		background: var(--wp--preset--color--bg);
	}
}

@media (min-width: 900px) {
	.wp-block-group.is-style-st-notfallkasten.st-notfallkasten--breit > .wp-block-group.is-style-st-schritte > .wp-block-group.is-style-st-schritt[class*="st-picto--"] {
		padding: var(--wp--preset--spacing--xs);
	}
}

/* --- Hinweis in einer Zeile (st-zeile): ab 900 px links die Überschrift, rechts der Text --- */
@media (min-width: 900px) {
	.entry-content :is(.st-hinweis, .is-style-st-hinweis-info).st-zeile {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: var(--wp--preset--spacing--xl);
		align-items: start;
	}

	.entry-content :is(.st-hinweis, .is-style-st-hinweis-info).st-zeile > :is(h2, h3, h4) {
		grid-column: 1;
		grid-row: 1 / span 6;
	}

	.entry-content :is(.st-hinweis, .is-style-st-hinweis-info).st-zeile > :not(h2, h3, h4) {
		grid-column: 2;
		margin-block-start: 0;
	}

	.entry-content :is(.st-hinweis, .is-style-st-hinweis-info).st-zeile > :not(h2, h3, h4) + :not(h2, h3, h4) {
		margin-block-start: var(--wp--preset--spacing--sm);
	}
}

/* --- Schritte als Raster (st-schritte-raster): ab 900 px zwei Spalten, Karten einer Reihe gleich hoch.
   Ein Schritt mit st-schritt--breit geht über beide Spalten (Text links, Liste rechts). --- */
@media (min-width: 900px) {
	.wp-block-group.is-style-st-schritte.st-schritte-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--lg);
		align-items: stretch;
	}

	.wp-block-group.is-style-st-schritte.st-schritte-raster > .wp-block-group.is-style-st-schritt {
		min-width: 0;
	}

	.wp-block-group.is-style-st-schritte.st-schritte-raster > .wp-block-group.is-style-st-schritt.st-schritt--breit[class*="st-picto--"] {
		grid-column: 1 / -1;
		grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--wp--preset--spacing--lg);
	}

	.st-schritte-raster > .st-schritt--breit[class*="st-picto--"] > :is(h2, h3, h4):first-of-type {
		grid-column: 2 / -1;
	}

	.st-schritte-raster > .st-schritt--breit[class*="st-picto--"] > p:nth-of-type(1) {
		grid-column: 2;
		grid-row: 2;
	}

	.st-schritte-raster > .st-schritt--breit[class*="st-picto--"] > :is(ul, ol) {
		grid-column: 3;
		grid-row: 2 / -1;
	}

	.st-schritte-raster > .st-schritt--breit[class*="st-picto--"] > p:nth-of-type(2) {
		grid-column: 2;
		grid-row: 3;
	}
}

/* --- Nachspann der Notfallseite: Hinweis und Aufklapper nebeneinander, die Zeile darunter über die ganze Breite --- */
.wp-block-group.st-notfall-nachspann {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}

.wp-block-group.st-notfall-nachspann > * {
	min-width: 0;
	margin-block: 0;
}

@media (min-width: 900px) {
	.wp-block-group.st-notfall-nachspann {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.wp-block-group.st-notfall-nachspann > .st-zeile {
		grid-column: 1 / -1;
	}
}

/* Überschriften der Hinweise im Nachspann einheitlich (Hinweis und Ringeltauben-Zeile) */
.wp-block-group.st-notfall-nachspann > .is-style-st-hinweis-info > :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--gross);
}