/*
Theme Name: TOLF Berlin
Theme URI: https://www.tolf.de/
Author: TOLF Berlin e.V.
Description: Block-Theme für TOLF Berlin e.V., nachgebaut nach dem bisherigen Jimdo-Design (TOLF-Blau, Poppins/Roboto, Karten, Akkordeons, Aufruf-Balken). Schriften sind lokal eingebunden, es werden keine externen Dienste geladen.
Version: 1.10.7
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tolf
*/

/* ---------- Größen wie bei Jimdo ----------
   Bis 1280 px Fensterbreite gelten die Werte aus theme.json (Text 16, H3 18, H2 24, H1 36 px,
   breite Seiten 860 px). Darüber schaltet Jimdo auf größere Schrift und breitere Seiten um. */

@media (min-width: 1281px) {
	:root:root,
	:root body {
		--wp--preset--font-size--medium: 18px;
		--wp--preset--font-size--large: 24px;
		--wp--preset--font-size--x-large: 36px;
		--wp--preset--font-size--xx-large: 48px;
		--wp--style--global--wide-size: 1160px;
	}
}

@media (min-width: 1441px) {
	:root:root,
	:root body {
		--wp--style--global--wide-size: 1320px;
	}
}

/* Vorlage „Breite Seite“: Inhalt so breit wie die Jimdo-Abschnitte */
.wp-block-post-content.tolf-breit > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--wide-size);
}

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

.tolf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
}

.admin-bar .tolf-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .tolf-header {
		top: 46px;
	}
}

.tolf-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 6px 0;
}

/* Menüpunkte mit 20 px Innenabstand wie bei Jimdo; der Button folgt direkt nach dem Menü */
@media (min-width: 600px) {
	.tolf-header .wp-block-navigation__container > .wp-block-navigation-item {
		padding: 0 20px;
	}
}

.tolf-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
	margin-left: 8px;
}

.tolf-header > .tolf-header-cta {
	margin-right: auto;
	margin-left: 25px;
	gap: 40px;
}

/* Breite Bildschirme: „Der Verein“ und „Kinderschutz“ direkt im Menü, sonst unter „Mehr“.
   Im aufgeklappten Handy-Menü immer direkt. */
.tolf-header .tolf-nav-gross {
	display: none !important;
}

@media (min-width: 1340px) {
	.tolf-header .tolf-nav-gross {
		display: flex !important;
	}

	.tolf-header .tolf-nav-mehr {
		display: none !important;
	}
}

/* Schmalere Bildschirme: auch „BBM“ und „Sportarten“ wandern unter „Mehr“ */
.tolf-header .tolf-nav-schmal {
	display: none !important;
}

@media (min-width: 600px) and (max-width: 1149px) {
	.tolf-header .tolf-nav-mittel {
		display: none !important;
	}

	.tolf-header .tolf-nav-schmal {
		display: flex !important;
	}
}

.tolf-header .is-menu-open :is(.tolf-nav-gross, .tolf-nav-mittel) {
	display: flex !important;
}

.tolf-header .is-menu-open :is(.tolf-nav-mehr, .tolf-nav-schmal) {
	display: none !important;
}

.tolf-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.tolf-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.tolf-header .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-radius: 5px;
	box-shadow: 0 6px 24px rgba(40, 64, 105, 0.15);
	padding: 8px 0;
	min-width: 230px !important;
}

.tolf-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 18px !important;
}

.tolf-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

/* Aufgeklapptes Handy-Menü: Untermenüs als eingerückte Liste, ohne Kästen und Schatten */
.tolf-header .is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	min-width: 0 !important;
	padding: 2px 0 6px 20px !important;
}

.tolf-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 5px 0 !important;
}

.tolf-header .is-menu-open .wp-block-navigation__container {
	gap: 4px !important;
}

.tolf-header .wp-block-button__link {
	padding: 8px 29px;
	font-size: 16px;
}

.tolf-header .tolf-logo {
	margin: 0;
}

.tolf-header .tolf-logo img {
	width: 36px;
	height: auto;
	display: block;
}

@media (max-width: 899px) {
	.tolf-header-cta {
		display: none !important;
	}
}

/* ---------- Hero (blaue Fläche) ---------- */

.is-style-tolf-hero {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-align: center;
	padding: var(--wp--preset--spacing--60) 16px !important;
}

.is-style-tolf-hero :where(h1, h2, h3, p, a) {
	color: var(--wp--preset--color--base);
}

.is-style-tolf-hero p {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	max-width: 730px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Karten-Raster ---------- */

.is-style-tolf-karten {
	gap: 30px !important;
}

.is-style-tolf-karten > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

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

.is-style-tolf-karten .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
}

.is-style-tolf-karten .wp-block-image.is-style-tolf-ganz img {
	object-fit: contain;
	background: var(--wp--preset--color--base);
	/* Kinderschutzsiegel hat viel weißen Rand: vergrößern, damit es die Bildhöhe füllt */
	transform: translateY(6.6%) scale(1.3);
}

.is-style-tolf-karten .wp-block-image.is-style-tolf-ganz {
	overflow: hidden;
}

.is-style-tolf-karten .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 8px;
}

@media (min-width: 782px) and (max-width: 1099px) {
	.is-style-tolf-karten {
		flex-wrap: wrap !important;
	}

	.is-style-tolf-karten > .wp-block-column {
		flex-basis: calc(50% - 16px) !important;
		flex-grow: 0 !important;
	}

	.is-style-tolf-karten:has(> .wp-block-column:nth-child(3):last-child) > .wp-block-column {
		flex-basis: calc(33.33% - 22px) !important;
	}
}

/* ---------- Blaue Kacheln (BBM, Ergebnisse, Trainingsübersicht) ---------- */

.is-style-tolf-kachel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 183px;
	box-sizing: border-box;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: 30px !important;
}

.is-style-tolf-kachel > * {
	margin-block: 0 !important;
}

.is-style-tolf-kachel :where(h2, h3, h4, p, li, a:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--base);
}

.is-style-tolf-kachel .wp-block-buttons {
	margin-top: auto !important;
}

.is-style-tolf-kachel .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.is-style-tolf-kachel .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-light);
	color: var(--wp--preset--color--secondary);
}

/* Foto oben in der Kachel, randlos */
.is-style-tolf-kachel > .wp-block-image:first-child {
	margin: -30px -30px 10px !important;
}

.is-style-tolf-kachel > .wp-block-image:first-child img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.is-style-tolf-kachel ul {
	padding-left: 1.2em;
}

/* ---------- Aufruf-Balken ---------- */

.is-style-tolf-cta {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50) 16px !important;
}

.is-style-tolf-cta :where(h2, h3, p) {
	color: var(--wp--preset--color--base);
	margin: 0;
}

/* Breite der Zeile im Balken wie bei Jimdo */
.is-style-tolf-cta > .wp-block-group {
	max-width: 654px !important;
}

@media (min-width: 1281px) {
	.is-style-tolf-cta > .wp-block-group {
		max-width: calc(var(--wp--style--global--wide-size) - 126px) !important;
	}
}

/* ---------- Spalten, die wie bei Jimdo erst über 1280 px nebeneinander stehen ---------- */

@media (max-width: 1280px) {
	.wp-block-columns.tolf-spalten {
		flex-wrap: wrap !important;
		row-gap: 40px !important;
	}

	.wp-block-columns.tolf-spalten > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.is-style-tolf-cta .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.is-style-tolf-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-light);
	color: var(--wp--preset--color--secondary);
}

/* ---------- Infobox (z. B. Karte, WhatsApp) ---------- */

.is-style-tolf-box {
	background: var(--wp--preset--color--surface);
	border-radius: 5px;
	padding: var(--wp--preset--spacing--40) !important;
}

.is-style-tolf-box-blau {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: 5px;
	padding: 18px 24px !important;
}

.is-style-tolf-box-blau :where(h2, h3, h4, p) {
	color: var(--wp--preset--color--base);
	margin: 0;
}

.is-style-tolf-box-blau .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: 8px 22px;
	font-size: 16px;
}

/* WhatsApp-Symbol vor dem Titel, sobald der blaue Kasten einen WhatsApp-Link enthält */
.is-style-tolf-box-blau:has(a[href*="wa.me"]) > p:first-child {
	display: flex;
	align-items: center;
	gap: 12px;
}

.is-style-tolf-box-blau:has(a[href*="wa.me"]) > p:first-child::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.23 8.23 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 4.54 0 8.24 3.7 8.24 8.24 0 4.55-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.23 8.23 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 4.54 0 8.24 3.7 8.24 8.24 0 4.55-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Akkordeon (Block „Details“) ---------- */

.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0;
	margin-block: 0 !important;
}

.wp-block-details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-details + .wp-block-details {
	margin-top: 0 !important;
}

.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 22px 48px 22px 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large); /* wie h3 */
}

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

.wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.wp-block-details[open] > summary::after {
	content: "−";
}

.wp-block-details > :not(summary) {
	margin-bottom: 1rem;
}

.wp-block-details[open] {
	padding-bottom: 12px;
}

/* ---------- Tabellen ---------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 8px 12px;
	text-align: left;
}

.wp-block-table thead {
	border-bottom: 2px solid var(--wp--preset--color--primary);
}

.wp-block-table th {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.wp-block-table tbody tr:nth-child(odd) {
	background: var(--wp--preset--color--surface);
}

/* Ausschreibung wie bei Jimdo: Bezeichnung als Zwischenüberschrift, Linie zwischen den Punkten;
   über 1280 px Bezeichnung links und Text rechts, darunter untereinander */
.tolf-ausschreibung table {
	font-size: var(--wp--preset--font-size--medium);
}

.tolf-ausschreibung tbody tr:nth-child(odd) {
	background: none;
}

.tolf-ausschreibung th,
.tolf-ausschreibung td {
	border: 0;
	vertical-align: top;
	padding: 31px 0 30px;
}

.tolf-ausschreibung th {
	width: 50%;
	padding-right: 30px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
}

.tolf-ausschreibung tr + tr {
	border-top: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 1280px) {
	.tolf-ausschreibung th,
	.tolf-ausschreibung td {
		display: block;
		width: auto;
	}

	.tolf-ausschreibung th {
		padding: 31px 0 0;
	}

	.tolf-ausschreibung td {
		padding: 40px 0 30px;
	}
}

/* ---------- Trennlinie zwischen Abschnitten (wie bei Jimdo) ---------- */

.is-style-tolf-trenner {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 31px !important;
	padding-bottom: 30px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

:not(.is-style-tolf-trenner) + .is-style-tolf-trenner {
	margin-top: 40px !important;
}

.is-style-tolf-trenner > .wp-block-column > :first-child {
	margin-top: 0;
}

/* ---------- Downloads ---------- */

/* wie bei Jimdo: über 1280 px Titel links und Button rechts, darunter untereinander;
   Linie zwischen den Zeilen */
.is-style-tolf-download {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 40px;
	padding: 35px 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.is-style-tolf-download + .is-style-tolf-download {
	border-top: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 1280px) {
	.is-style-tolf-download {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

.is-style-tolf-download h3 {
	margin: 0;
}

/* ---------- Blaue Titelfläche oben auf der Seite (Ausschreibung, Bahndaten …) ---------- */

.is-style-tolf-titel {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding: 80px 16px !important;
	margin-bottom: 80px !important;
}

.is-style-tolf-titel :where(h1, h2, h3, p, li, a:not(.wp-block-button__link)) {
	color: var(--wp--preset--color--base);
}

.is-style-tolf-titel > :is(h2, h1.tolf-wie-h2).has-text-align-center {
	text-align: center;
}

/* direkt unter der Kopfzeile, ohne den Seitenabstand oben */
.wp-block-post-content > .is-style-tolf-titel:first-child {
	margin-top: -80px !important;
}

.is-style-tolf-titel + * {
	margin-top: 0 !important;
}

.is-style-tolf-titel > :is(h2, h1.tolf-wie-h2) + * {
	margin-top: 40px !important;
}

/* Formular auf blauer Fläche */
.is-style-tolf-titel .wpcf7 :where(label, legend, .tolf-hinweis, .tolf-hinweis a) {
	color: var(--wp--preset--color--base);
}

/* der Hinweis hat unten eine eigene graue Farbe, deshalb hier gezielt überschreiben */
.is-style-tolf-titel .wpcf7 .tolf-hinweis,
.is-style-tolf-titel .wpcf7 .tolf-hinweis a {
	color: var(--wp--preset--color--base);
}

.is-style-tolf-titel .wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

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

.tolf-footer > * {
	max-width: var(--wp--style--global--wide-size) !important;
}

.tolf-footer a {
	font-size: 16px;
	color: var(--wp--preset--color--contrast);
}

.tolf-footer a + a {
	margin-left: 20px;
}

/* ---------- Schwebender WhatsApp-Button ---------- */

.tolf-wa-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.tolf-wa-float:hover,
.tolf-wa-float:focus-visible {
	transform: scale(1.08);
	color: var(--wp--preset--color--primary);
}

.tolf-wa-float svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* ---------- Formulare (Contact Form 7) ---------- */

.wpcf7 form p {
	margin: 0 0 16px;
}

.wpcf7 label {
	display: block;
	font-size: 16px;
	font-weight: 700;
}

.wpcf7 :where(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid #c9ccd3;
	border-radius: 5px;
	font: inherit;
	font-size: 16px;
	background: var(--wp--preset--color--base);
}

.wpcf7 :where(input, textarea):focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}

.wpcf7 textarea {
	min-height: 140px;
}

.wpcf7 fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}

.wpcf7 legend {
	font-size: 16px;
	font-weight: 700;
	padding: 0;
	margin-bottom: 4px;
}

.wpcf7 .wpcf7-list-item {
	display: block;
	margin: 6px 0;
}

.wpcf7 .wpcf7-list-item label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
}

.wpcf7 .wpcf7-list-item input[type="checkbox"] {
	margin-top: 5px;
	accent-color: var(--wp--preset--color--primary);
}

.wpcf7 input[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 5px;
	padding: 12px 28px;
	font: inherit;
	font-size: 16px;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--secondary);
}

.wpcf7 .tolf-hinweis {
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* ---------- Karte, die erst nach Klick geladen wird ([tolf_karte]) ---------- */

.tolf-karte {
	aspect-ratio: 4 / 3;
	border-radius: 3px;
	overflow: hidden;
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	background-image:
		linear-gradient(color-mix(in srgb, currentColor 10%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent) 1px, transparent 1px);
	background-size: 32px 32px;
}

.tolf-karte-laden {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: center;
}

.tolf-karte-laden svg {
	width: 36px;
	height: 36px;
	fill: currentColor;
}

.tolf-karte-text {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tolf-karte-hinweis {
	font-size: 14px;
	opacity: 0.85;
}

.tolf-karte-laden:hover .tolf-karte-text,
.tolf-karte-laden:focus-visible .tolf-karte-text {
	text-decoration-thickness: 2px;
}

.tolf-karte iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.tolf-karte-link {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	font-size: 14px;
	margin-top: 8px !important;
}

.is-style-tolf-kachel .tolf-karte-link a {
	color: var(--wp--preset--color--base);
}

/* in den blauen Karten: Karte unten bündig, damit beide Karten auf gleicher Höhe stehen */
.is-style-tolf-kachel > .tolf-karte {
	margin-top: auto !important;
}

/* flache Karte über die ganze Seitenbreite (Kontakt), wie die Jimdo-Karte */
.tolf-karte.tolf-karte-breit {
	aspect-ratio: 5 / 2;
}

@media (max-width: 781px) {
	.tolf-karte.tolf-karte-breit {
		aspect-ratio: 4 / 3;
	}
}

/* Erste Überschrift einer Seite: technisch h1 (für Suchmaschinen), Aussehen wie h2 */
h1.tolf-wie-h2:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--x-large);
}

h1.tolf-wie-h3:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--large);
}

/* Seitentitel: auf jeder Seite links und mit gleichem Abstand zum Inhalt */
.wp-block-post-content > h1.tolf-h1:first-child {
	text-align: left;
}

.wp-block-post-content > h1.tolf-h1:first-child + * {
	margin-top: 28px !important;
}

/* ---------- Neueste News: Karte auf der Startseite ---------- */

.tolf-news-karte {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin-top: -16px !important; /* blaue Fläche hat unten 36px Innenabstand: bleiben 20px Luft zur Schrift */
	margin-bottom: -44px !important;
	padding: 16px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 6px solid var(--wp--preset--color--accent);
	box-shadow: 0 6px 20px rgba(40, 64, 105, 0.12);
}

.tolf-news-karte--ohne-bild {
	grid-template-columns: minmax(0, 1fr);
}

.tolf-news-karte__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

.tolf-news-karte__text > * {
	margin: 0;
}

.tolf-news-karte__text > * + * {
	margin-top: 6px;
}

.tolf-news-karte__marke {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #c4532a;
}

.tolf-news-karte__titel {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--primary);
}

.tolf-news-karte__text .wp-block-buttons {
	margin-top: 10px;
}

@media (max-width: 640px) {
	.tolf-news-karte {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding: 14px;
		margin-bottom: -32px !important;
	}
}

/* ---------- Neueste News: Hinweisleiste über der Kopfzeile ---------- */

.tolf-news-leiste {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px 8px 40px;
	background: var(--wp--preset--color--accent);
	color: #3a1a0c;
	font-size: var(--wp--preset--font-size--small);
}

.tolf-news-leiste__marke {
	flex: none;
	padding: 1px 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: #993c1d;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
}

.tolf-news-leiste__link {
	flex: 1;
	color: inherit !important;
	font-weight: 700;
	text-decoration: none;
}

.tolf-news-leiste__link:hover,
.tolf-news-leiste__link:focus {
	text-decoration: underline;
}

.tolf-news-leiste__zu {
	flex: none;
	padding: 0 6px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 640px) {
	.tolf-news-leiste {
		padding-left: 16px;
	}
}