/* Eigene CSS-Anpassungen */

/* Kontaktformular: Beschriftungen und Meldungen gut lesbar auf dunklem Hintergrund */
.wpcf7 label,
.wpcf7 .wpcf7-form p,
.wpcf7 .wpcf7-response-output,
.wpcf7 .wpcf7-list-item-label {
	color: #ffffff !important;
	font-weight: 600;
}

.wpcf7 label {
	display: block;
	margin-bottom: 12px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	margin-top: 6px;
}

/* Fehlermeldung unter den Feldern in hellem Rot */
.wpcf7 .wpcf7-not-valid-tip {
	color: #ff8a80 !important;
}

/* Kontaktformular: weißen Rand um den schwarzen Kasten entfernen,
   dort scheint der rote Hintergrund durch */
.contact-section-formsection .contact-formcol {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Bereiche im Wechsel: hellgrau / rot
   "Wer sind wir" rot, die bisher weißen Bereiche hellgrau */
#overlapable-2,
#latest-posts1,
#fahrzeuge {
	background-color: #f6f6f6 !important;
}

/* Trennlinie unter dem Header passend zum ersten Bereich */
body.home .header-homepage + .header-separator path.svg-white-bg,
body.home.page .header path.svg-white-bg {
	fill: #f6f6f6 !important;
}

#wer-sind-wir {
	background-color: #790f0f !important;
}

#wer-sind-wir,
#wer-sind-wir h2,
#wer-sind-wir h4,
#wer-sind-wir p,
#wer-sind-wir a,
#wer-sind-wir .fa {
	color: #ffffff !important;
}

/* Hauptleiste: beim Scrollen dunkelgrau statt weiß, Menütexte weiß */
body .header-top.homepage.coloured-nav,
body .header-top.homepage.fixto-fixed,
body .header-top.coloured-nav:not(.homepage),
body .header-top.fixto-fixed:not(.homepage),
body .header-top.alternate:not(.homepage) {
	background-color: #222222 !important;
}

body .header-top.homepage.coloured-nav #drop_mainmenu > li > a,
body .header-top.homepage.fixto-fixed #drop_mainmenu > li > a,
body .header-top.homepage.coloured-nav a#fm2_drop_mainmenu_mobile_button .caption,
body .header-top.homepage.fixto-fixed a#fm2_drop_mainmenu_mobile_button .caption,
body .header-top.fixto-fixed:not(.homepage) #drop_mainmenu > li > a,
body .header-top.alternate:not(.homepage) #drop_mainmenu > li > a,
body .header-top.fixto-fixed:not(.homepage) a#fm2_drop_mainmenu_mobile_button .caption,
body .header-top.alternate:not(.homepage) a#fm2_drop_mainmenu_mobile_button .caption {
	color: #ffffff;
}

/* Buttons: dunkelrot (#790f0f), Hover fast schwarz */
body .button.blue,
body .button.dark-blue,
body .button.color1,
body .features-coloured-button.button:not(.transparent) {
	background-color: #790f0f !important;
	border-color: #790f0f !important;
	color: #ffffff !important;
}

body .button.blue:hover,
body .button.dark-blue:hover,
body .button.color1:hover,
body .features-coloured-button.button:not(.transparent):hover {
	background-color: #111111 !important;
	border-color: #111111 !important;
	color: #ffffff !important;
}

/* Beiträge: Autor (Admin) und Kommentar-Symbol/-Zähler ausblenden, Datum bleibt */
.post-header .fa-user,
.post-header a[rel="author"],
.post-header .fa-comment-o,
.post-header .fa-comment-o + span {
	display: none !important;
}

/* Restliche blaue Elemente in Rot (Beitragskarten, Symbole, Links, Menü-Hover) */
body .post-content {
	border-bottom-color: #790f0f !important;
}

body .fa.font-icon-post,
body .post-header a,
body .blog-title a:hover,
body .post-list .prev-navigation a,
body .post-list .next-navigation a,
body .next-posts a,
body .prev-posts a,
body .sidebar a:hover,
body .comments-form a {
	color: #790f0f !important;
}

body .post-list span.current {
	background-color: #790f0f !important;
	border-color: #790f0f !important;
}

body .header-top #drop_mainmenu ul li a:hover,
body .header-top #drop_mainmenu ul li a.hover,
body .header-top #drop_mainmenu ul li:hover > a {
	background-color: #790f0f !important;
}

body .header-top #drop_mainmenu > li ul {
	border-bottom-color: #790f0f !important;
}

body #searchsubmit,
body .widget_search button.wp-block-search__button {
	background-color: #790f0f !important;
	border-color: #790f0f !important;
}

/* Handy: Bild immer unter dem Text (links- und rechtsbündige Bildabschnitte) */
@media only screen and (max-width: 767px) {
	.content-full-left-image-innerrow,
	.content-full-right-image-innerrow {
		display: flex !important;
		flex-direction: column;
	}

	.content-full-left-image-textcol,
	.content-full-right-image-textcol {
		order: 1;
	}

	.content-full-left-image-imgcol,
	.content-full-right-image-imgcol {
		order: 2;
		width: 100% !important;
		min-height: 260px;
		background-size: cover;
		background-position: center;
	}
}

/* Footer (alle Seiten): blaues Feld und blauer Rand in Grau wie der übrige Footer */
body .footer-column-colored-1 {
	background-color: #222222 !important;
}

body .footer {
	background-color: #222222;
	border-color: #3d3d3d !important;
}

/* Footer: Trennstrich links vom grauen Feld, wie zwischen Adresse, Mail und Telefon */
body .footer-column-colored-1 {
	border-left: 1px solid #3d3d3d;
	border-right: 1px solid #3d3d3d;
}

/* Rechtstexte (Impressum, Datenschutz): Inhaltsverzeichnis links, Text rechts */
html { scroll-behavior: smooth; }

.sa-legal {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.sa-toc {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	background: #f6f6f6;
	border-left: 5px solid #790f0f;
	font-size: .9rem;
}

.sa-toc strong {
	margin-bottom: 6px;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.sa-toc a {
	padding: 5px 0;
	color: #333;
	text-decoration: none;
	line-height: 1.3;
}

.sa-toc a:hover,
.sa-toc a.on {
	color: #790f0f;
}

.sa-toc a.on {
	font-weight: 600;
}

.sa-legal-text {
	max-width: 72ch;
}

.sa-legal-text h2,
.sa-legal-text h4 {
	scroll-margin-top: 110px;
}

.sa-legal-text h2 {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sa-legal-text h2::before {
	content: "";
	flex: none;
	width: 6px;
	height: 1.1em;
	background: #790f0f;
}

@media (max-width: 800px) {
	.sa-legal {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.sa-toc {
		position: static;
	}
}

/* Das Theme setzt auf div und nav ein Clearfix (::before/::after mit display:table).
   Im Grid würden diese Elemente als eigene Zellen zählen und Verzeichnis und Text verschieben. */
.sa-legal::before,
.sa-legal::after,
.sa-toc::before,
.sa-toc::after {
	display: none !important;
	content: none !important;
}

.sa-legal {
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
}

.sa-legal-text {
	max-width: none;
	min-width: 0;
}

.sa-toc {
	grid-column: 1;
}

.sa-legal-text {
	grid-column: 2;
}

@media (max-width: 800px) {
	.sa-toc,
	.sa-legal-text {
		grid-column: auto;
	}
}

/* Inhaltsverzeichnis als details-Element: Desktop immer offen, Handy aufklappbar */
.sa-toc {
	display: block;
}

.sa-toc > nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px;
}

.sa-toc > nav::before,
.sa-toc > nav::after {
	display: none !important;
	content: none !important;
}

.sa-toc summary {
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	list-style: none;
	cursor: default;
}

.sa-toc summary::-webkit-details-marker {
	display: none;
}

/* Smartphone und kleine Tablets */
@media (max-width: 800px) {
	.page-id-77 .page-content,
	.page-id-145 .page-content {
		padding-top: 24px;
		padding-bottom: 32px;
	}

	.page-id-77 .gridContainer,
	.page-id-145 .gridContainer {
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Verzeichnis: eine Leiste, die per Tipp aufklappt, klebt beim Scrollen oben */
	.sa-toc {
		position: sticky;
		top: 0;
		z-index: 5;
		margin: 0 -16px;
		padding: 0 16px;
		border-left: 0;
		border-bottom: 3px solid #790f0f;
		background: #f6f6f6;
		box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
	}

	.sa-toc summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		cursor: pointer;
	}

	.sa-toc summary::after {
		content: "";
		width: 10px;
		height: 10px;
		border-right: 2px solid #790f0f;
		border-bottom: 2px solid #790f0f;
		transform: rotate(45deg);
		transition: transform .2s;
	}

	.sa-toc[open] summary::after {
		transform: rotate(-135deg);
	}

	.sa-toc > nav {
		max-height: 60vh;
		overflow-y: auto;
		padding-bottom: 10px;
	}

	.sa-toc a {
		display: block;
		padding: 12px 4px;
		font-size: 1rem;
		border-top: 1px solid #e3e3e3;
	}

	.sa-legal {
		gap: 20px;
	}

	.sa-legal-text {
		font-size: 1rem;
		line-height: 1.6;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.sa-legal-text h2 {
		font-size: 1.6rem;
		line-height: 1.15;
		margin-top: 1.6em;
	}

	.sa-legal-text h3 {
		font-size: 1.25rem;
		line-height: 1.2;
	}

	.sa-legal-text h4 {
		font-size: 1.1rem;
	}

	.sa-legal-text h2,
	.sa-legal-text h4 {
		scroll-margin-top: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sa-toc summary::after { transition: none; }
}

/* Handy, final: Verzeichnis oben, Text darunter in voller Breite.
   Steht am Dateiende, damit es die Desktop-Regeln (260px-Spalte) sicher überschreibt. */
@media (max-width: 800px) {
	body .sa-legal {
		display: block;
		grid-template-columns: none;
	}

	body .sa-toc,
	body .sa-legal-text {
		grid-column: auto;
		width: 100%;
		max-width: 100%;
		float: none;
	}

	body .sa-toc {
		margin-bottom: 20px;
	}

	body .sa-legal-text {
		text-align: left;
		color: #333;
	}

	body .sa-legal-text p,
	body .sa-legal-text li,
	body .sa-legal-text h3,
	body .sa-legal-text h4,
	body .sa-legal-text h5 {
		text-align: left;
		color: #222;
		letter-spacing: normal;
		hyphens: auto;
	}

	body .sa-legal-text a {
		color: #790f0f;
		overflow-wrap: anywhere;
	}
}

/* Handy: Verzeichnis klebt nicht mehr oben, sonst liegt es über der fixierten Kopfleiste */
@media (max-width: 800px) {
	body .sa-toc {
		position: static;
		z-index: auto;
		box-shadow: none;
	}
}

/* Handy, final: Verzeichnis bleibt oben, aber unter der fixierten Kopfleiste.
   Die Höhe der Kopfleiste setzt ein kleines Script als --sa-top. */
@media (max-width: 800px) {
	body .sa-toc {
		position: sticky;
		top: var(--sa-top, 0px);
		z-index: 4;
		box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
	}
}

/* Startseite, Auswahlbereich: Vorschlag C "Rote Leiste"
   Drei Felder (Symbol, Titel, Link) in einer roten Leiste, die unten ins Header-Bild ragt. */
body.home #overlapable-2 {
	padding-top: 0 !important;
	padding-bottom: 36px !important;
	min-height: 0 !important;
}

body.home #overlapable-2 > .gridContainer {
	position: relative;
	z-index: 3;
	margin-top: -52px !important;
	background: transparent !important;
}

body.home #overlapable-2 .features-coloured-icon-boxes-innerrow {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0 !important;
	width: 100% !important;
	background: #790f0f;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

body.home #overlapable-2 .features-coloured-icon-boxes-innerrow::before,
body.home #overlapable-2 .features-coloured-icon-boxes-innerrow::after,
body.home #overlapable-2 .features-coloured-icon-boxes-featurecol::before,
body.home #overlapable-2 .features-coloured-icon-boxes-featurecol::after {
	display: none !important;
	content: none !important;
}

body.home #overlapable-2 .features-coloured-icon-boxes-featurecol {
	position: relative;
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 22px 20px !important;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	grid-template-areas: "icon title" "icon link";
	column-gap: 16px;
	row-gap: 2px;
	align-items: center;
	text-align: left;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.home #overlapable-2 .features-coloured-icon-boxes-featurecol + .features-coloured-icon-boxes-featurecol {
	border-left: 1px solid rgba(255, 255, 255, .25) !important;
}

/* Graue Strichsymbole werden weiß */
body.home #overlapable-2 .features-coloured-icon-boxes-featurecol img.custom-image {
	grid-area: icon;
	width: 64px;
	height: 44px;
	margin: 0;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

body.home #overlapable-2 .features-coloured-icon-boxes-featurecol h4 {
	grid-area: title;
	margin: 0 !important;
	color: #ffffff !important;
	font-size: 1.35rem;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* Der Button wird zu einem unauffälligen Text-Link, der das ganze Feld anklickbar macht */
body.home #overlapable-2 .features-coloured-button,
body.home #overlapable-2 .features-coloured-button:hover {
	grid-area: link;
	justify-self: start;
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	line-height: 1.3 !important;
	min-width: 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-size: .8rem !important;
	font-weight: 400 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	opacity: .9;
}

body.home #overlapable-2 .features-coloured-button::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	inset: 0;
}

body.home #overlapable-2 .features-coloured-icon-boxes-featurecol:hover {
	background: rgba(0, 0, 0, .18) !important;
}

@media (max-width: 800px) {
	body.home #overlapable-2 > .gridContainer {
		margin-top: -36px !important;
	}

	body.home #overlapable-2 .features-coloured-icon-boxes-innerrow {
		grid-template-columns: 1fr;
	}

	body.home #overlapable-2 .features-coloured-icon-boxes-featurecol + .features-coloured-icon-boxes-featurecol {
		border-left: 0 !important;
		border-top: 1px solid rgba(255, 255, 255, .25) !important;
	}

	body.home #overlapable-2 .features-coloured-icon-boxes-featurecol {
		padding: 16px !important;
	}
}

/* Rote Leiste: Felder füllen ihre Spalte (das Theme begrenzt cp3cols auf 25 Prozent) */
body.home #overlapable-2 .features-coloured-icon-boxes-featurecol {
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	justify-self: stretch;
}

/* Die Symbol-Bilder haben viel Rand, deshalb etwas größer darstellen */
body.home #overlapable-2 .features-coloured-icon-boxes-featurecol img.custom-image {
	transform: scale(1.7);
	transform-origin: center;
}

/* Rote Leiste: höher ins Header-Bild und im gleichen Rot wie der Zahlenbereich darunter (#790f0f) */
body.home #overlapable-2 > .gridContainer {
	margin-top: -110px !important;
}

body.home #overlapable-2 .features-coloured-icon-boxes-innerrow {
	background: #790f0f;
}

@media (max-width: 800px) {
	body.home #overlapable-2 > .gridContainer {
		margin-top: -70px !important;
	}
}

/* Kontakt: Bereich und Senden-Button im gleichen Dunkelrot wie überall */
#contact-4 {
	background-color: #790f0f !important;
	background-image: none !important;
}

#contact-4::before {
	display: none !important;
}

body .wpcf7 input[type="submit"] {
	background-color: #790f0f !important;
	color: #ffffff !important;
	border: 0 !important;
}

body .wpcf7 input[type="submit"]:hover {
	background-color: #111111 !important;
}

/* Zahlenbereich: festes Dunkelrot. Vorher entstand der Ton aus rotem Seitenhintergrund plus dunkler Schicht. */
#numbers {
	background-color: #790f0f !important;
	background-image: none !important;
}

#numbers::before {
	display: none !important;
}

/* Rote Leiste: erstes Feld zeigt ein Personen-Symbol statt des Wappens */
body.home #overlapable-2 .features-coloured-icon-boxes-featurecol:first-child img.custom-image {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6M15 14.4c.6-.3 1.3-.4 2-.4 2.2 0 4 1.8 4 4'/%3E%3C/svg%3E");
	transform: none;
	width: 44px;
	height: 44px;
	margin-inline: auto;
	/* Das Symbol ist schon weiß. Der Weiß-Filter von oben bleibt weg, sonst färbt der Dunkelmodus am Handy es dunkel (Feld 2 und 3 haben ihn auch nicht). */
	filter: none;
}

/* Rote Leiste: Fahrzeug und Handschlag als gezeichnete Strichsymbole, gleiche Stärke wie das Personen-Symbol */
body.home #overlapable-2 .features-coloured-icon-boxes-featurecol:nth-child(2) img.custom-image,
body.home #overlapable-2 .features-coloured-icon-boxes-featurecol:nth-child(3) img.custom-image {
	transform: none;
	width: 44px;
	height: 44px;
	margin-inline: auto;
	filter: none;
}

body.home #overlapable-2 .features-coloured-icon-boxes-featurecol:nth-child(2) img.custom-image {
	/* Das ursprüngliche Fahrzeug-Symbol, weiß und mit kräftigerem Strich (Datei in der Mediathek-Ablage) */
	content: url("/wp-content/uploads/2026/08/fahrzeuge-icon-weiss-v2.png");
	width: 64px;
	height: 44px;
	object-fit: contain;
}

body.home #overlapable-2 .features-coloured-icon-boxes-featurecol:nth-child(3) img.custom-image {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
}
/* Jugendfeuerwehr: Foto über dem Text, rechts dunkle Infokarte "Auf einen Blick" */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .page-content {
	background: #f6f6f6;
	padding-top: 40px;
	padding-bottom: 50px;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout::before,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout::after,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main::before,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main::after,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side::before,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side::after {
	display: none !important;
	content: none !important;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main {
	min-width: 0;
}

/* Foto-Platzhalter. Ein echtes Foto kommt per background-image hierher. */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-photo {
	position: relative;
	min-height: 300px;
	margin-bottom: 24px;
	background: linear-gradient(135deg, #5a5a5a, #2b2b2b) center / cover no-repeat;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-photo::after {
	content: "Foto folgt";
	position: absolute;
	right: 14px;
	bottom: 10px;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .65);
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main p {
	margin: 0 0 14px;
	color: #333;
	font-size: 1rem;
	line-height: 1.65;
	text-align: left;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main p.jf-lead {
	color: #222;
	font-size: 1.25rem;
	line-height: 1.5;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main a {
	color: #790f0f;
	overflow-wrap: anywhere;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) a.jf-btn {
	display: inline-block;
	margin-top: 6px;
	padding: 12px 22px;
	background: #790f0f;
	color: #ffffff;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) a.jf-btn:hover {
	background: #111111;
	color: #ffffff;
}

/* Infokarte */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	background: #222222;
	border-top: 5px solid #790f0f;
	color: #ffffff;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side h5 {
	margin: 0;
	color: #ffffff;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side p.jf-fact {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid #3d3d3d;
	color: #dddddd;
	text-align: left;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side small {
	color: #9a9a9a;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side strong {
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 600;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side a {
	color: #ffffff;
	font-size: .85rem;
	overflow-wrap: anywhere;
}

@media (max-width: 800px) {
	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .page-content {
		padding-top: 24px;
	}

	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout {
		grid-template-columns: 1fr;
		width: 100%;
		padding-inline: 16px;
		gap: 24px;
	}

	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-photo {
		min-height: 200px;
	}
}

/* Der Gruppen-Block von WordPress setzt einen inneren Container dazwischen.
   Das Raster und die Karte müssen deshalb auf diesen Container wirken. */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout {
	display: block;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout > .wp-block-group__inner-container::before,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout > .wp-block-group__inner-container::after {
	display: none !important;
	content: none !important;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side {
	display: block;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

@media (max-width: 800px) {
	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Jugendfeuerwehr: Kante unter dem Header im Hellgrau des Seitenbereichs, kein Farbbruch */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .header path.svg-white-bg {
	fill: #f6f6f6 !important;
}

/* Jugendfeuerwehr: Überschriften und Liste im Textbereich */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main h4 {
	margin: 26px 0 10px;
	font-size: 1.5rem;
	color: #222222;
	text-transform: uppercase;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main ul {
	margin: 0 0 14px;
	padding-left: 20px;
	color: #333333;
	text-align: left;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main li {
	margin-bottom: 10px;
	line-height: 1.6;
	text-align: left;
}

body.page:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .header .header-separator path.svg-white-bg {
	fill: #f6f6f6 !important;
}

/* Jugendfeuerwehr: Text in weißer Karte unter dem Foto, kräftigere Schrift, Aufruf-Band am Ende */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .page-content {
	padding-bottom: 0;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout {
	margin-bottom: 48px;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-photo {
	margin-bottom: 0;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text {
	padding: 30px 34px 24px;
	background: #ffffff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	border-bottom: 5px solid #790f0f;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text::before,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text::after,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text > .wp-block-group__inner-container::before,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text > .wp-block-group__inner-container::after {
	display: none !important;
	content: none !important;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main .jf-text p,
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main .jf-text li {
	color: #222222;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.7;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main .jf-text p.jf-lead {
	color: #111111;
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.5;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 30px 0 12px;
	font-size: 1.5rem;
	font-weight: 600;
	color: #111111;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text h4::before {
	content: "";
	flex: none;
	width: 6px;
	height: 1.1em;
	background: #790f0f;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text ul li::marker {
	color: #790f0f;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text li strong {
	color: #111111;
}

/* Die Infokarte bleibt beim Lesen im Blick */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side {
	position: sticky;
	top: 110px;
}

/* Aufruf-Band über die ganze Breite */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 32px;
	padding: 34px 20px;
	background: #790f0f;
	color: #ffffff;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-cta b {
	font-size: 1.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) a.jf-btn-light {
	display: inline-block;
	padding: 12px 24px;
	background: #ffffff;
	color: #790f0f;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) a.jf-btn-light:hover {
	background: #111111;
	color: #ffffff;
}

@media (max-width: 800px) {
	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text {
		padding: 22px 18px 16px;
	}

	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-side {
		position: static;
	}

	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-layout {
		margin-bottom: 32px;
	}

	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-cta b {
		font-size: 1.35rem;
		text-align: center;
	}
}

/* Jugendfeuerwehr: Einleitung und Termin hervorgehoben */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main .jf-text p.jf-lead {
	padding-left: 18px;
	border-left: 5px solid #790f0f;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main .jf-text p.jf-lead strong {
	color: #790f0f;
	font-weight: 700;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-callout {
	margin: 22px 0 8px;
	padding: 16px 20px;
	background: #f6ecec;
	border-left: 5px solid #790f0f;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main .jf-text .jf-callout p {
	margin: 0;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main .jf-text p.jf-callout-time {
	color: #790f0f;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .02em;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-main .jf-text p.jf-callout-text {
	margin-top: 6px;
	color: #333333;
	font-size: 1rem;
	line-height: 1.6;
}

/* Jahrbuch-Seite: Titelbild oben in der Infokarte */
body.page-id-484 .jb-cover {
	margin: 0 0 6px;
}

body.page-id-484 .jb-cover img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}

/* Jahrbuch-Seite: Liste der früheren Jahrbücher rechts */
body.page-id-484 .jb-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page-id-484 .jb-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid #3d3d3d;
	list-style: none;
}

body.page-id-484 .jb-list a {
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

body.page-id-484 .jb-list a:hover {
	text-decoration: underline;
}

body.page-id-484 .jb-list span {
	flex: none;
	color: #9a9a9a;
	font-size: .8rem;
}

/* Jahrbuch-Liste kompakter */
body.page-id-484 .jf-side {
	padding: 16px 18px;
	gap: 8px;
}

body.page-id-484 .jf-side h5 {
	font-size: 1.15rem;
}

body.page-id-484 .jb-list li {
	padding: 5px 0;
}

body.page-id-484 .jb-list a {
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.3;
}

body.page-id-484 .jb-list span {
	font-size: .7rem;
}

/* Linkleiste ganz unten (Jahrbuch, Impressum, Datenschutz) */
.sa-footer-nav {
	padding: 12px 16px;
	background: #1a1a1a;
	text-align: center;
	border-top: 1px solid #3d3d3d;
}

.sa-footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-footer-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-footer-menu a {
	color: #b5b5b5;
	font-size: .8rem;
	letter-spacing: .06em;
	text-decoration: none;
}

.sa-footer-menu a:hover,
.sa-footer-menu .current-menu-item > a {
	color: #ffffff;
	text-decoration: underline;
}

/* Linkleiste als erste Footer-Spalte links neben der Adresse */
.footer .sa-footer-col {
	min-height: 100px;
	padding: 27px 15px 0;
	background: transparent;
	border-top: 0;
	text-align: center;
	vertical-align: top;
	color: #ffffff;
}

.footer .sa-footer-col .sa-footer-menu {
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.footer .sa-footer-col .sa-footer-menu a {
	color: #ffffff;
	font-size: 1rem;
	letter-spacing: 0;
}

.footer .sa-footer-col::before,
.footer .sa-footer-col::after {
	display: none !important;
	content: none !important;
}

@media (min-width: 1025px) {
	.footer .row_202.sa-has-col > * {
		width: 20% !important;
	}

	.footer .sa-footer-col {
		display: table-cell;
		padding-top: 40px;
	}
}

/* Footer-Linkspalte: ohne Symbol, linksbündig, normale Schrift */
.footer .sa-footer-col {
	text-align: left;
}

.footer .sa-footer-col .sa-footer-menu {
	align-items: flex-start;
}

.footer .sa-footer-col .sa-footer-menu a,
.footer .sa-footer-col .sa-footer-menu .current-menu-item > a {
	font-weight: 400;
}

/* Links beginnen auf Höhe der Texte der anderen Spalten */
@media (min-width: 1025px) {
	.footer .sa-footer-col {
		padding-top: 105px;
	}
}

/* Footer-Linkspalte unauffällig: dünne kleine graue Schrift, Trennstrich links, weiter oben */
.footer .sa-footer-col {
	border-left: 1px solid #3d3d3d;
}

.footer .sa-footer-col .sa-footer-menu {
	gap: 4px;
}

.footer .sa-footer-col .sa-footer-menu a,
.footer .sa-footer-col .sa-footer-menu .current-menu-item > a {
	color: #a3a3a3;
	font-size: .85rem !important;
	font-weight: 300 !important;
	text-decoration: none;
}

.footer .sa-footer-col .sa-footer-menu a:hover {
	color: #ffffff;
	text-decoration: underline;
}

@media (min-width: 1025px) {
	.footer .sa-footer-col {
		padding-top: 42px;
	}
}

/* Footer-Links: neutrales Grau ohne Farbsaum (Graustufen-Glättung statt Subpixel-Glättung) */
.footer .sa-footer-col {
	opacity: .99;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.footer .sa-footer-col .sa-footer-menu a,
.footer .sa-footer-col .sa-footer-menu .current-menu-item > a {
	color: #b0b0b0;
}

/* Seitenfoto: bei vorhandenem Bild kein Platzhaltertext */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-photo.has-img {
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 340px;
}

body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-photo.has-img::after {
	display: none;
}

/* Platzhalter-Grafik statt Foto: Logo auf hellgrauem Grund */
body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-photo.jf-placeholder {
	background-color: #ececec;
	background-size: auto 62%;
	background-position: center;
	background-repeat: no-repeat;
}

/* Startseite, Bereich "Wer sind wir": drei aufklappende Bildstreifen */
.sa-wsw {
	padding: 56px 0 60px;
	background: #f6f6f6;
	text-align: center;
}

.sa-wsw h2 {
	margin: 0 0 10px;
}

.sa-wsw .sa-wsw-lead {
	max-width: 56ch;
	margin: 0 auto 28px;
	color: #444;
}

.sa-strips {
	display: flex;
	gap: 6px;
	height: 400px;
	text-align: left;
}

.sa-strip {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: #2b2b2b;
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
	text-decoration: none;
	transition: flex .45s ease;
}

.sa-strip.open {
	flex: 3.2;
}

.sa-strip .sa-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 8, 8, .9), rgba(20, 8, 8, .05) 70%);
}

.sa-strip .sa-t {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	padding: 20px;
	min-width: 0;
}

.sa-strip .sa-name {
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.sa-strip .sa-text {
	max-width: 40ch;
	font-size: .95rem;
	line-height: 1.5;
	color: #f0e6e6;
}

.sa-strip .sa-btn {
	margin-top: 4px;
	padding: 10px 18px;
	background: #790f0f;
	color: #ffffff;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sa-strip:hover .sa-btn,
.sa-strip:focus-visible .sa-btn {
	background: #111111;
}

.sa-strip:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -3px;
}

/* Zugeklappte Streifen zeigen nur den senkrechten Titel */
@media (min-width: 801px) {
	.sa-strip:not(.open) .sa-name {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-size: 1.5rem;
	}

	.sa-strip:not(.open) .sa-t {
		padding: 20px 14px;
	}

	.sa-strip:not(.open) .sa-text,
	.sa-strip:not(.open) .sa-btn {
		display: none;
	}
}

/* Handy: Streifen untereinander, alles sichtbar */
@media (max-width: 800px) {
	.sa-strips {
		flex-direction: column;
		height: auto;
	}

	.sa-strip,
	.sa-strip.open {
		flex: none;
		min-height: 190px;
	}

	.sa-strip .sa-name {
		font-size: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sa-strip {
		transition: none;
	}
}

.sa-strip,
.sa-strip:hover,
.sa-strip:focus,
.sa-strip * {
	text-decoration: none !important;
}

/* Startseite: einheitliche Abschnittsköpfe (Kopfzeile, Titel in Großbuchstaben, Strich, Unterzeile) */
body.home #overlapable-2 {
	padding-bottom: 0 !important;
}

body.home #latest-posts1 {
	padding-top: 28px !important;
}

body.home .sa-eyebrow {
	margin: 0 0 6px;
	color: #790f0f;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}

body.home #latest-posts1 .blog-textcol h2,
body.home #wer-sind-wir h2,
body.home #fahrzeuge h2.about-images-right-bigtitle,
body.home #contact-4 .contact-textcol h2 {
	margin: 0;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: .02em;
}

body.home #latest-posts1 .blog-textcol h2 {
	color: #1d1d1d;
}

body.home #fahrzeuge h2.about-images-right-bigtitle {
	color: #1d1d1d;
	font-size: 2.6rem;
}

body.home #latest-posts1 .blog-textcol h2::after,
body.home #wer-sind-wir h2::after,
body.home #fahrzeuge h2.about-images-right-bigtitle::after,
body.home #contact-4 .contact-textcol h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 5px;
	margin: 14px auto 0;
	background: #790f0f;
}

body.home #fahrzeuge h2.about-images-right-bigtitle::after {
	margin-left: 0;
}

/* Auf rotem Grund: helle Kopfzeile und weißer Strich */
body.home #wer-sind-wir .sa-eyebrow,
body.home #contact-4 .sa-eyebrow {
	color: #ffd4d0;
}

body.home #wer-sind-wir h2::after,
body.home #contact-4 .contact-textcol h2::after {
	background: #ffffff;
}

body.home #latest-posts1 .blog-textcol,
body.home #contact-4 .contact-textcol {
	text-align: center;
}

body.home #latest-posts1 .sa-sub {
	margin: 14px auto 0;
	max-width: 80ch;
	color: #444;
	font-size: 1.1rem;
}

body.home #wer-sind-wir .sa-wsw-lead {
	margin-top: 14px;
}

@media (max-width: 800px) {
	body.home #latest-posts1 .blog-textcol h2,
	body.home #wer-sind-wir h2,
	body.home #contact-4 .contact-textcol h2 {
		font-size: 2.2rem;
	}

	body.home #fahrzeuge h2.about-images-right-bigtitle {
		font-size: 2rem;
	}
}
/* Keine Striche unter den Abschnittsüberschriften der Startseite */
body.home #latest-posts1 .blog-textcol h2::after,
body.home #wer-sind-wir h2::after,
body.home #fahrzeuge h2.about-images-right-bigtitle::after,
body.home #contact-4 .contact-textcol h2::after {
	display: none !important;
	content: none !important;
}

/* Fahrzeuge: Button etwas weiter weg von der Überschrift */
body.home #fahrzeuge .about-images-right-textcol .button {
	margin-top: 32px;
}

/* Pfeil "Nach oben" */
.sa-totop {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #790f0f;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	text-decoration: none;
	transition: background .2s, transform .2s;
}

.sa-totop[hidden] {
	display: none;
}

.sa-totop:hover,
.sa-totop:focus-visible {
	background: #111111;
	color: #ffffff;
	transform: translateY(-2px);
}

.sa-totop:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

@media (max-width: 800px) {
	.sa-totop {
		right: 14px;
		bottom: 14px;
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sa-totop {
		transition: none;
	}
}

/* Feinschliff Startseite: Unterzeilen lesbarer, Kontakt-Zeile mit Abstand zur Überschrift */
body.home #contact-4 .contact-textcol p {
	margin-top: 14px;
	font-size: 1.1rem;
}

body.home #wer-sind-wir .sa-wsw-lead {
	font-size: 1.1rem;
	max-width: 80ch;
}

body.home #latest-posts1 .sa-sub {
	font-weight: 400;
}

/* Pfeil "Nach oben": in jedem Zustand rot bzw. weiß, nie blau (Theme-Linkfarben überstimmen) */
body a.sa-totop,
body a.sa-totop:link,
body a.sa-totop:visited,
body a.sa-totop:active,
body a.sa-totop:focus {
	background: #790f0f !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
	outline-color: #ffffff;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none !important;
}

body a.sa-totop:hover,
body a.sa-totop:focus-visible {
	background: #111111 !important;
	color: #ffffff !important;
}

body a.sa-totop svg,
body a.sa-totop svg path {
	color: #ffffff !important;
	stroke: #ffffff !important;
	fill: none !important;
}

/* Einheitliche Abstände unter den Abschnittsüberschriften: Titel, Unterzeile, Inhalt */
body.home #latest-posts1 .sa-sub,
body.home #wer-sind-wir .sa-wsw-lead,
body.home #contact-4 .contact-textcol p:not(.sa-eyebrow) {
	margin-top: 18px;
	margin-bottom: 30px;
}

body.home #contact-4 .contact-textrow,
body.home #contact-4 .row_224 {
	margin-bottom: 0;
}

/* Fahrzeuge-Seite: kein weißer Streifen zwischen Header-Kante und erstem Abschnitt, durchgehend das Grau des ersten Abschnitts */
body.page-id-150 .header .header-separator path.svg-white-bg,
body.page-id-150 .header path.svg-white-bg {
	fill: #f6f6f6 !important;
}

body.page-id-150 .page-content {
	background: #f6f6f6;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Footer-Linkspalte: nur in der Desktop-Ansicht linksbündig, sonst zentriert */
@media (max-width: 1024px) {
	.footer .sa-footer-col {
		text-align: center !important;
		border-left: 0;
		padding-top: 27px;
	}

	.footer .sa-footer-col .sa-footer-menu {
		align-items: center !important;
	}
}

/* Fahrzeugseite: Datenzeilen und Absätze (Zeilenumbrüche überstehen das Speichern nicht, deshalb Block-Elemente) */
.fz-l {
	display: block;
}

.fz-data,
.fz-p {
	margin: 0 0 12px;
}

.fz-p:last-child {
	margin-bottom: 0;
}

/* Fahrzeuge: Platzhalter-Grafik (Logo) im Abschnitt Einsatzhilfsfahrzeug, solange es kein Foto gibt */
body.page-id-150 #heimstetten-ehf .content-full-right-image-imgcol {
	background-color: #ececec !important;
	background-image: url("/wp-content/uploads/2025/10/Logo-transparent1-1024x648.png") !important;
	background-size: auto 55% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

body.page-id-150 #heimstetten-ehf .content-full-right-image-imgcol {
	min-height: 360px;
}

@media (max-width: 800px) {
	body.page-id-150 #heimstetten-ehf .content-full-right-image-imgcol {
		min-height: 220px;
	}
}

/* Handy: Überschrift im Header passt sich der Breite an, Wörter werden nicht mehr mitten im Wort umgebrochen */
@media (max-width: 767px) {
	body h1.heading8 {
		font-size: clamp(1.45rem, 7.6vw, 2.6rem) !important;
		line-height: 1.15 !important;
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	body .header-subtitle {
		font-size: clamp(1rem, 4.4vw, 1.3rem);
	}

	/* Startseite, Fahrzeuge: die Bildergruppe liegt mittig statt am rechten Rand */
	body.home #fahrzeuge .about-images-right-imgcol {
		transform: translateX(-9.1%);
	}
}

/* Handy, Unterseiten: Header etwas höher, damit der Seitentitel nicht von der weißen Schräge verdeckt wird */
@media (max-width: 767px) {
	body .header.color-overlay {
		padding-bottom: 64px !important;
	}
}

/* Handy, Fahrzeugseite: Fahrzeugnamen passen in die Breite und werden bei Bedarf sauber getrennt */
@media (max-width: 767px) {
	body .content-full-left-image-textcol h2,
	body .content-full-right-image-textcol h2 {
		font-size: clamp(1.35rem, 6.4vw, 2rem) !important;
		line-height: 1.2 !important;
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	body .content-full-left-image-textcol h2 span,
	body .content-full-right-image-textcol h2 span {
		font-size: inherit !important;
	}
}

/* Handy, Impressum und Datenschutz: Inhaltsleiste über die volle Breite, lange Seitentitel etwas kleiner */
@media (max-width: 800px) {
	body .sa-toc {
		width: calc(100% + 32px) !important;
		max-width: none !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		box-sizing: border-box;
	}

	body.page-id-145 h1.heading8,
	body.page-id-77 h1.heading8 {
		font-size: clamp(1.3rem, 6.3vw, 2.4rem) !important;
	}
}

/* Hauptmenü am Desktop: ausklappbare Karte oben rechts (am Handy bleibt das Vollbild-Menü des Themes) */
@media (min-width: 768px) {
	body .fm2_drop_mainmenu_mobile-overlay {
		background: rgba(0, 0, 0, .45);
	}

	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu {
		width: 340px !important;
		max-width: calc(100vw - 32px);
		height: auto !important;
		min-height: 0 !important;
		margin: 76px 28px 0 auto !important;
		padding-bottom: 8px;
		background: #222222 !important;
		border-top: 4px solid #790f0f;
		border-radius: 0 0 4px 4px;
		box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
	}

	body .fm2_drop_mainmenu_mobile-overlay .main-menu-header {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}

	body .fm2_drop_mainmenu_mobile-overlay .menu-container {
		position: static !important;
		width: auto !important;
		height: auto !important;
		padding-top: 8px;
	}

	body .fm2_drop_mainmenu_mobile-overlay .main-menu ul,
	body .fm2_drop_mainmenu_mobile-overlay .main-menu li {
		width: auto !important;
		margin: 0 !important;
	}

	body .fm2_drop_mainmenu_mobile-overlay .main-menu li a {
		display: block;
		padding: 14px 26px;
		border-bottom: 1px solid #3d3d3d;
		color: #ffffff !important;
		font-size: 1rem !important;
		font-weight: 600;
		letter-spacing: .12em;
		text-transform: uppercase;
		text-decoration: none;
	}

	body .fm2_drop_mainmenu_mobile-overlay .main-menu li:last-child a {
		border-bottom: 0;
	}

	body .fm2_drop_mainmenu_mobile-overlay .main-menu li a:hover {
		background: #790f0f;
	}
}

@media (min-width: 768px) {
	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li a {
		display: block !important;
		padding: 15px 26px !important;
		border-bottom: 1px solid #3d3d3d !important;
		font-size: 1.05rem !important;
		line-height: 1.3 !important;
	}

	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li:last-child a {
		border-bottom: 0 !important;
	}

	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li a:hover {
		background: #790f0f !important;
	}

	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li {
		list-style: none !important;
		height: auto !important;
	}

	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li::before,
	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li a::before {
		display: none !important;
		content: none !important;
	}
}

@media (min-width: 768px) {
	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		background: none !important;
	}

	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li a {
		width: 100% !important;
		box-sizing: border-box;
		background-image: none !important;
	}

	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul {
		padding: 0 !important;
		list-style: none !important;
	}

	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li > a > span,
	body .fm2_drop_mainmenu_mobile-overlay .fm2_mobile_jq_menu .main-menu ul li > span {
		display: none !important;
	}
}

/* Handy, Fahrzeugseite: deutlich weniger Abstand zwischen den Fahrzeugen */
@media (max-width: 767px) {
	body.page-id-150 .content-full-left-image-section,
	body.page-id-150 .content-full-right-image-section {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	body.page-id-150 .content-full-left-image-textcol,
	body.page-id-150 .content-full-right-image-textcol {
		padding-top: 28px !important;
		padding-bottom: 32px !important;
	}

	body.page-id-150 .content-full-left-image-imgcol,
	body.page-id-150 .content-full-right-image-imgcol {
		min-height: 220px !important;
	}

	body.page-id-150 .fz-data {
		margin-bottom: 14px;
	}

	/* Foto steht über dem Text des jeweiligen Fahrzeugs */
	body.page-id-150 .content-full-left-image-imgcol,
	body.page-id-150 .content-full-right-image-imgcol {
		order: 1;
	}

	body.page-id-150 .content-full-left-image-textcol,
	body.page-id-150 .content-full-right-image-textcol {
		order: 2;
	}
}

/* Chronik (Seite 572): Zeitleiste */
body.page-id-572 .ch-era { font-size: 1.5rem; margin: 2.2rem 0 1rem; color: #222; }
body.page-id-572 .ch-era:first-child { margin-top: 0.5rem; }
body.page-id-572 .ch-timeline { position: relative; margin-left: 0.4rem; padding-left: 1.6rem; border-left: 3px solid #790f0f; }
body.page-id-572 .ch-item { position: relative; padding: 0 0 1.6rem; }
body.page-id-572 .ch-item::before { content: ""; position: absolute; left: calc(-1.6rem - 8px); top: 0.45rem; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid #790f0f; }
body.page-id-572 .ch-year { font-size: 1.35rem; font-weight: 700; color: #790f0f; line-height: 1.3; }
body.page-id-572 .ch-body p { margin: 0.35rem 0 0; }
body.page-id-572 .ch-fig { margin: 0.8rem 0 0; display: block; max-width: 100%; }
body.page-id-572 .ch-fig img { display: block; width: auto; max-width: 100%; height: auto; border: 1px solid #ddd; }
body.page-id-572 .ch-fig figcaption { font-size: 0.85rem; color: #666; margin-top: 0.3rem; }
body.page-id-572 .jf-side .jb-list li { display: flex; gap: 0.6rem; }
body.page-id-572 .jf-side .jb-list .ch-y { color: #790f0f; font-weight: 700; min-width: 4.2rem; font-size: 0.85rem; }
body.page-id-572 .jf-side h5 + ul + h5 { margin-top: 1.6rem; }body.page-id-572 .jf-main .jf-text h2.ch-era { color: #222 !important; font-weight: 700 !important; font-size: 1.5rem !important; }
body.page-id-572 .jf-side .jb-list .ch-y { color: #ff9a9a !important; }
body.page-id-572 .ch-fig:has(img[src*="portrait"]) { display: inline-block; margin-right: 0.8rem; vertical-align: top; }
body.page-id-572 .ch-fig img[src*="portrait"] { width: 150px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
body.page-id-572 .ch-fig { display: inline-block; vertical-align: top; margin-right: 0.8rem; max-width: 100%; }
body.page-id-572 .ch-fig img[src*="fahrzeug"] { width: 320px; max-width: 100%; }

/* Beiträge (Einzelansicht): linksbündig und gut lesbar, auch am Handy */
body.single-post .post-content-single,
body.single-post .post-content-inner,
body.single-post .single-post-header { text-align: left; }
body.single-post h2.heading109 { text-align: left; font-size: clamp(1.55rem, 5.2vw, 2.1rem); line-height: 1.2; font-weight: 700; color: #222; margin: 0 0 0.6rem; }
body.single-post .single-post-header { margin: 0 0 1.2rem; font-size: 0.95rem; }
body.single-post .post-content-inner p,
body.single-post .post-content-inner li { font-size: 1.05rem; line-height: 1.7; font-weight: 400; color: #333; text-align: left; margin: 0 0 1em; }
body.single-post .post-content-inner img { display: block; width: 100%; height: auto; margin: 0 0 1.2rem; }
body.single-post .post-content-inner h2,
body.single-post .post-content-inner h3,
body.single-post .post-content-inner h4 { text-align: left; font-weight: 700; color: #222; }
@media (max-width: 767px) {
	body.single-post .gridContainer:not(.footer .gridContainer) { padding-left: 10px; padding-right: 10px; }
	body.single-post .post-item-large { padding: 18px 16px; }
}

/* Beiträge: Lesebreite, Bildgröße, Abstand zwischen Bild und Text */
body.single-post .post-content-single { max-width: 46rem; margin-left: auto; margin-right: auto; }
body.single-post .post-content-inner img.wp-post-image { width: 100%; height: auto; max-height: 30rem; object-fit: cover; object-position: center 40%; margin: 0 0 2rem; }
body.single-post .post-content-inner p,
body.single-post .post-content-inner li { font-size: 1.15rem; line-height: 1.75; color: #222; }
body.single-post .post-content-inner p:first-of-type { font-size: 1.3rem; font-weight: 600; line-height: 1.5; padding-bottom: 0.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid #e3e3e3; }
body.single-post h2.heading109 { font-size: clamp(1.6rem, 5vw, 2.3rem); }
@media (max-width: 767px) {
	body.single-post .post-content-inner img.wp-post-image { max-height: 20rem; margin-bottom: 1.4rem; }
	body.single-post .post-content-inner p,
	body.single-post .post-content-inner li { font-size: 1.08rem; }
	body.single-post .post-content-inner p:first-of-type { font-size: 1.18rem; }
}

/* Beitragskopf: Art des Beitrags und Datum statt Titel */
body.single-post .header .heading8 .sa-hdr-date { display: block; margin-top: 0.7em; font-size: 0.42em; font-weight: 400; letter-spacing: 0.14em; text-transform: none; opacity: 0.85; }
body.single-post .single-post-header .fa-calendar,
body.single-post .single-post-header .span12 { display: none; }

/* Beitrag mittig, Navigation darunter gleich breit und ohne Versatz */
body.single-post .post-content-single { float: none; margin-left: auto; margin-right: auto; }
body.single-post nav.post-navigation { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* Jahrbuch-Seiten: aktuelles Jahr in der Liste hervorheben */
body.page-id-484 .jb-list li.current { background: rgba(255, 255, 255, 0.1); }
body.page-id-484 .jb-list li.current a { font-weight: 700; }
body.page-id-484 .jb-cover { max-width: 190px; margin-left: auto; margin-right: auto; margin-bottom: 1.2rem; }

/* Jahrbuch-Seiten: Jahrgänge als Raster statt langer Liste */
body.page-id-484 .jb-years { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.page-id-484 .jb-years::before,
body.page-id-484 .jb-years::after { display: none; }
body.page-id-484 .jb-years a { display: block; text-align: center; padding: 0.5rem 0; font-size: 0.95rem; color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); text-decoration: none; transition: background-color 0.15s, border-color 0.15s; }
body.page-id-484 .jb-years a:hover,
body.page-id-484 .jb-years a:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
body.page-id-484 .jb-years a.current { background: #790f0f; border-color: #790f0f; font-weight: 700; }
@media (max-width: 767px) {
	body.page-id-484 .jb-years { grid-template-columns: repeat(4, 1fr); }
}

/* Chronik am Handy: linksbündig statt zentriert, lange Wörter trennen */
body.page-id-572 .jf-text,
body.page-id-572 .ch-era,
body.page-id-572 .ch-timeline,
body.page-id-572 .ch-item,
body.page-id-572 .ch-year,
body.page-id-572 .ch-body,
body.page-id-572 .ch-body p { text-align: left; }
body.page-id-572 .jf-lead,
body.page-id-572 .ch-body p { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

/* Chronik: Listen in der Seitenleiste linksbündig, bündig mit der Überschrift */
body.page-id-572 .jf-side,
body.page-id-572 .jf-side h5,
body.page-id-572 .jf-side .jb-list,
body.page-id-572 .jf-side .jb-list li { text-align: left; }
body.page-id-572 .jf-side .jb-list { padding-left: 0; margin-left: 0; list-style: none; }
body.page-id-572 .jf-side .jb-list li { justify-content: flex-start; }
@media (max-width: 767px) {
	body.page-id-572 .jf-side .jb-list li { font-size: 1rem; padding: 0.32rem 0; }
	body.page-id-572 .jf-side .jb-list .ch-y { min-width: 4.6rem; }
}

/* Chronik: Fahrzeugfotos immer zu zweit nebeneinander */
body.page-id-572 .ch-fig:has(img[src*="fahrzeug"]) { width: calc(50% - 0.5rem); margin-right: 0.5rem; }
body.page-id-572 .ch-fig img[src*="fahrzeug"] { width: 100%; }

/* Chronik: alle Fotos (außer Porträts) einheitlich groß und im gleichen Format, zwei nebeneinander */
body.page-id-572 .ch-fig:not(:has(img[src*="portrait"])) { width: calc(50% - 0.5rem); margin-right: 0.5rem; }
body.page-id-572 .ch-fig img:not([src*="portrait"]) { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }

/* Chronik am Handy: Fotos (außer Porträts) in voller Breite, untereinander */
@media (max-width: 767px) {
	body.page-id-572 .ch-fig:not(:has(img[src*="portrait"])) { display: block; width: 100%; margin-right: 0; }
	/* Porträts am Handy: alle gleich groß (die Originale sind 150 px breit, größer wird es unscharf) */
	body.page-id-572 .ch-fig img[src*="portrait"] { width: 150px; max-width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
}

/* Startseite, Bereich "Fahrzeuge": helle Fläche, Text links, wechselnde Fotos rechts mit schräger Kante */
.sa-fz { position: relative; background: #f6f6f6; overflow: hidden; min-height: 540px; display: flex; }
.sa-fz-text { position: relative; z-index: 2; flex: 0 0 55%; display: flex; flex-direction: column; justify-content: center; padding: 3.6rem 5rem 3.6rem max(1.5rem, calc((100vw - 1400px) / 2)); text-align: left; }
.sa-fz-text h2 { margin: 0 0 0.8rem; font-size: clamp(1.8rem, 3vw, 2.9rem); line-height: 1.1; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #222; text-align: left; }
.sa-fz-lead { margin: 0 0 1.6rem; font-size: 1.2rem; line-height: 1.55; color: #444; text-align: left; }
.sa-fz-zahlen { display: flex; gap: 2.2rem; margin: 0 0 1.6rem; }
.sa-fz-zahlen b { display: block; font-size: 2.1rem; line-height: 1; font-weight: 800; color: #790f0f; }
.sa-fz-zahlen span { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #555; }
.sa-fz-btn { display: inline-block; padding: 0.85rem 1.5rem; background: #790f0f; color: #fff !important; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; text-decoration: none; transition: background-color 0.15s; }
.sa-fz-btn:hover { background: #5c0b0b; }
.sa-fz-bild { position: absolute; top: 0; right: 0; bottom: 0; width: max(45%, calc(50vw - 70px)); background: #ccc; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.sa-fz-folie { position: absolute; inset: 0; background-size: cover; background-position: center 60%; opacity: 0; transition: opacity 1.1s ease; }
.sa-fz-folie.an { opacity: 1; }
/* Fahrzeuge, die im Foto links stehen: Ausschnitt nach links, rechts wird abgeschnitten */
.sa-fz-folie[data-ruf$="10/1"],
.sa-fz-folie[data-ruf$="14/1"],
.sa-fz-folie[data-ruf$="40/2"] { background-position: 0% 60%; transform: scale(1.18); transform-origin: 0% 75%; }
.sa-fz-folie[data-ruf$="14/1"] { transform: scale(1.18); }
.sa-fz-folie[data-ruf$="40/2"] { transform: scale(1.14); }
.sa-fz-marke { position: absolute; z-index: 4; right: 0; bottom: 3.2rem; background: #790f0f; color: #fff; padding: 0.5rem 1rem; display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.sa-fz-marke b { font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; }
.sa-fz-marke span { font-size: 0.75rem; opacity: 0.85; }
.sa-fz-punkte { position: absolute; z-index: 4; right: 1.6rem; bottom: 1.4rem; display: flex; gap: 8px; }
.sa-fz-punkte button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; opacity: 0.85; }
.sa-fz-punkte button.an { background: #fff; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sa-fz-folie { transition: none; } }
@media (max-width: 800px) {
	.sa-fz { flex-direction: column; min-height: 0; }
	.sa-fz-text { flex: none; order: 2; padding: 1.8rem 1.2rem 2.4rem; }
	.sa-fz-bild { position: relative; order: 1; width: 100%; height: 250px; clip-path: none; }
	.sa-fz-marke { right: auto; left: 0; bottom: 1rem; }
	.sa-fz-punkte { bottom: 1.3rem; }
	.sa-fz-zahlen { gap: 1.4rem; }
}
.sa-fz-text > div { margin-left: 0 !important; margin-right: 0 !important; }
.sa-fz-text > div.sa-fz-zahlen { margin-bottom: 1.6rem !important; }
html body .sa-fz .sa-fz-text > div { margin-left: 0 !important; margin-right: 0 !important; align-self: flex-start; }
.sa-fz-zahlen > div { text-align: left; }
.sa-fz-zahlen b,
.sa-fz-zahlen span { display: block; text-align: left !important; }
.sa-fz-zahlen::before, .sa-fz-zahlen::after, .sa-fz::before, .sa-fz::after, .sa-fz-text::before, .sa-fz-text::after { display: none !important; content: none !important; }
@media (min-width: 801px) { .sa-fz-text h2 .sa-fz-zeile { display: block; } }
/* Fahrzeug-Bereich am Computer genauso hoch wie der Bereich "Wer sind wir" */
@media (min-width: 801px) { .sa-fz { min-height: 694px; } }

/* Versionsnummer im Footer: kaum sichtbar */
.sa-ver { margin-left: 0.9em; font-size: 0.7rem; letter-spacing: 0.04em; opacity: 0.3; }
.sa-ver { display: block; margin: 0.35rem 0 0; }

/* Fahrzeugseite (150): Karten. Das Foto hat immer die Form 3:2, deshalb wird nichts angeschnitten und die Seite sieht bei jeder Bildschirmbreite gleich aus.
   Zugeklappt sind alle Karten gleich hoch (feste Höhen für Foto, Name und Kennzahlen). Beim Aufklappen wächst nur die eine Karte. */
.fz-seite { padding: 50px 5vw 70px; max-width: 1640px; margin: 0 auto; }
.fz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 26px; align-items: start; }
.fz-raster::before, .fz-raster::after, .fz-karte::before, .fz-karte::after, .fz-kb::before, .fz-kb::after { display: none !important; content: none !important; }
.fz-karte { background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12); text-align: left; }
.fz-karte .fz-foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; }
.fz-karte .fz-platzhalter { background: #ececec url("/wp-content/uploads/2025/10/Logo-transparent1-1024x648.png") center / auto 55% no-repeat; }
.fz-kb { padding: 18px 20px 20px; }
.fz-kb h2.fz-name { box-sizing: content-box; min-height: 3.75em; margin: 0 0 14px; padding: 0; font-size: 1.3rem; line-height: 1.25; font-weight: 600; color: #333; text-align: left; text-transform: none; }
.fz-name .fz-n1, .fz-name .fz-n2 { display: block; }
.fz-name .fz-n1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.fz-chips { display: flex; gap: 8px; margin: 0 0 14px; }
.fz-chip { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; min-height: 4.8rem; padding: 8px 6px; background: #f3f3f3; text-align: center; font-size: 0.75rem; line-height: 1.3; color: #666; overflow-wrap: normal; }
.fz-chip b { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.2; color: #222; }
.fz-chip-klein b { font-size: 0.8rem; }
.fz-mehr summary { padding: 4px 0; font-size: 0.9rem; font-weight: 600; color: #790f0f; cursor: pointer; }
.fz-inhalt { margin-top: 8px; padding-top: 10px; border-top: 1px solid #eee; font-size: 0.92rem; line-height: 1.55; color: #444; text-align: left; }
.fz-inhalt .fz-l { display: block; margin: 0 0 4px; font-weight: 400; }
.fz-inhalt .fz-data { margin: 0 0 10px; }
.fz-inhalt .fz-p { margin: 10px 0 0; }
@media (max-width: 600px) {
	.fz-seite { padding: 26px 16px 40px; }
}

/* Beitragsformular für Feuerwehr-Autoren (Seite "Beitrag einreichen") */
.ff-form, .ff-box, .ff-meine, .ff-ok, .ff-fehler { max-width: 720px; margin: 0 auto 1.6rem; text-align: left; }
.ff-form label, .ff-form .ff-check label { display: block; margin: 0 0 0.3rem; font-weight: 600; font-size: 1rem; color: #333; }
.ff-form input[type="text"], .ff-form input[type="datetime-local"], .ff-form select, .ff-form textarea, .ff-form input[type="file"] { display: block; width: 100%; padding: 0.7rem 0.8rem; font: inherit; font-size: 1rem; color: #222; background: #fff; border: 1px solid #bbb; border-radius: 3px; }
.ff-form textarea { min-height: 14rem; line-height: 1.55; resize: vertical; }
.ff-form input:focus, .ff-form select:focus, .ff-form textarea:focus { outline: 2px solid #790f0f; outline-offset: 1px; border-color: #790f0f; }
.ff-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.ff-zeile::before, .ff-zeile::after, .ff-form::before, .ff-form::after, .ff-meine::before, .ff-meine::after { display: none !important; content: none !important; }
.ff-hinweis { display: block; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 400; color: #666; }
.ff-check label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.ff-check input { margin-top: 0.3rem; flex: none; width: 1.1rem; height: 1.1rem; }
.ff-web { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ff-knopf, .ff-form button.ff-knopf { display: inline-block; padding: 0.9rem 1.8rem; font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: #fff !important; background: #790f0f; border: 0; border-radius: 2px; cursor: pointer; text-decoration: none; }
.ff-knopf:hover, .ff-form button.ff-knopf:hover { background: #5c0b0b; }
.ff-form button.ff-knopf:disabled { opacity: 0.6; cursor: wait; }
.ff-ok { padding: 1rem 1.2rem; background: #e8f5e9; border-left: 4px solid #2e7d32; }
.ff-fehler { padding: 1rem 1.2rem; background: #fdecea; border-left: 4px solid #b3261e; }
.ff-ok p, .ff-fehler p, .ff-fehler ul { margin: 0 0 0.4rem; }
.ff-fehler ul { padding-left: 1.2rem; }
.ff-meine { padding-top: 1.2rem; border-top: 1px solid #ddd; }
.ff-meine h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.ff-meine ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.ff-meine li span { color: #777; font-size: 0.85rem; margin-left: 0.4rem; }
@media (max-width: 600px) { .ff-zeile { grid-template-columns: 1fr; } }
/* Titelbild (Flammen) auf allen Seiten außer der Fahrzeugseite: Das Bild hängt mit seiner Unterkante an der Unterkante der Kopfzeile,
   abgeschnitten wird nur oben. Dazu entfällt der feste Hintergrund (Parallax), der den Ausschnitt sonst von der Fensterhöhe abhängig macht. */
.header-homepage.color-overlay,
.header.color-overlay {
	background-attachment: scroll !important;
	background-position: center 90% !important;
}
/* Kopfzeile am Handy: schmaler (weniger Abstand oben, kleinere Schräge) und das Flammenbild unten bündig (Breite und Größe des Bildes bleiben unverändert).
   Startseite: nur weniger Abstand oben, weil dort die drei Knöpfe in die Kopfzeile ragen. */
@media (max-width: 800px) {
	.header.color-overlay,
	.header-homepage.color-overlay {
		padding-top: 85px !important;
		background-position: center bottom !important;
	}
	.header.color-overlay {
		padding-bottom: 35px !important;
	}
	.header.color-overlay .header-separator {
		height: 55px !important;
	}
}

/* Seitenfotos (Aktive, Verein …) am Handy: ganzes Foto im Seitenverhältnis 3:2, nichts seitlich abschneiden. */
@media (max-width: 800px) {
	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-photo.has-img {
		min-height: 0 !important;
		height: auto !important;
		aspect-ratio: 3 / 2;
		background-size: cover;
		background-position: center !important;
	}
}

/* Überschriften mit rotem Balken am Handy: Balken läuft über alle umgebrochenen Zeilen. */
@media (max-width: 800px) {
	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text h4 {
		align-items: stretch;
	}

	body:is(.page-id-267, .page-id-250, .page-id-248, .page-id-484, .page-id-572) .jf-text h4::before {
		height: auto;
		min-height: 1.1em;
	}
}
/* Titelbild aller Unterseiten wie auf der Fahrzeugseite: das ungeschnittene Flammenbild statt des zugeschnittenen. */
.header.color-overlay {
	background-image: url("/wp-content/uploads/2025/09/Feuerhintergrund.webp") !important;
}

/* Cookie-Hinweis (nur technisch notwendige Cookies) */
.sa-cookiehinweis {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 9998;
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	background: #ffffff;
	color: #222222;
	border-left: 5px solid #790f0f;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
	font-size: 0.95rem;
	line-height: 1.5;
}

.sa-cookiehinweis[hidden] {
	display: none;
}

.sa-cookiehinweis p {
	margin: 0;
	flex: 1;
	color: #222222;
	text-align: left;
}

.sa-cookiehinweis a {
	color: #790f0f;
	text-decoration: underline;
	white-space: nowrap;
}

.sa-cookiehinweis button {
	flex: none;
	padding: 9px 20px;
	border: 0;
	background: #790f0f;
	color: #ffffff;
	font-size: 0.95rem;
	cursor: pointer;
}

.sa-cookiehinweis button:hover {
	background: #5a0b0b;
}

@media (max-width: 600px) {
	.sa-cookiehinweis {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
	}

	.sa-cookiehinweis a {
		white-space: normal;
	}
}

/* Startseite, nur Computer: Titel und Untertitel etwas tiefer, damit sie in der sichtbaren Fläche (unter dem Menü, über der Schräge) mittig wirken.
   Wert "top" ändern, um den Titel weiter nach unten (größer) oder oben (kleiner) zu schieben. */
@media (min-width: 801px) {
	.header-homepage .header-description-row {
		position: relative;
		top: 50px;
	}
}

/* Einsatzberichte (FF Agent), selbst dargestellt */
.sa-ffa {
	max-width: 900px;
	margin: 0 auto;
	color: #222222;
	text-align: left;
	transition: opacity .15s;
}

.sa-ffa.laedt {
	opacity: .5;
	pointer-events: none;
}

.sa-ffa-jahre {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.sa-ffa-jahre a {
	min-width: 64px;
	padding: 9px 18px;
	background: #ffffff;
	color: #790f0f;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.sa-ffa-jahre a:hover {
	background: #f6ecec;
}

.sa-ffa-jahre a.aktiv {
	background: #790f0f;
	color: #ffffff;
}

/* Kreisdiagramm mit Legende */
.sa-ffa-diagramm {
	display: flex;
	align-items: center;
	gap: 36px;
	margin: 0 0 26px;
	padding: 20px 26px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.sa-ffa-torte {
	flex: none;
	width: 190px;
	height: 190px;
}

.sa-ffa-torte-zahl {
	font-size: 22px;
	font-weight: 700;
	fill: #111111;
}

.sa-ffa-torte-klein {
	font-size: 8px;
	fill: #666666;
}

.sa-ffa-legende {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-ffa-legende li {
	display: grid;
	grid-template-columns: 16px 1fr auto 52px;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px solid #eeeeee;
}

.sa-ffa-legende li:last-child {
	border-bottom: 0;
}

.sa-ffa-legende i {
	width: 16px;
	height: 16px;
	border-radius: 3px;
}

.sa-ffa-legende em {
	color: #777777;
	font-style: normal;
	text-align: right;
}

.sa-ffa-titel {
	margin: 0 0 18px;
	font-size: 1.6rem;
	color: #111111;
}

.sa-ffa-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-ffa-eintrag {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 16px;
	align-items: start;
	margin: 0 0 10px;
	padding: 14px 18px;
	background: #ffffff;
	border-left: 5px solid #790f0f;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.sa-ffa-kopf {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.sa-ffa-kopf time {
	font-weight: 600;
	color: #111111;
}

.sa-ffa-chip {
	font-size: 0.9rem;
	font-weight: 600;
}

.sa-ffa-text strong,
.sa-ffa-text span {
	display: block;
}

.sa-ffa-ort,
.sa-ffa-extra {
	margin-top: 4px;
	color: #555555;
	font-size: 0.95rem;
}

/* Seitenschalter: erste Seite, zurück, Seite x von y, weiter, letzte Seite */
.sa-ffa-seiten {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 24px 0 0;
}

.sa-ffa-knopf {
	display: inline-block;
	min-width: 46px;
	padding: 8px 14px;
	background: #790f0f;
	color: #ffffff;
	font-size: 1.2rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.sa-ffa-knopf:hover {
	background: #5a0b0b;
	color: #ffffff;
}

.sa-ffa-knopf.aus {
	background: #dddddd;
	color: #ffffff;
}

.sa-ffa-stand {
	min-width: 130px;
	text-align: center;
	font-weight: 600;
	color: #111111;
}

.sa-ffa-leer {
	padding: 18px 20px;
	background: #ffffff;
	border-left: 5px solid #790f0f;
}

/* Das Theme setzt Clearfix-Elemente vor/nach Containern; in Grid-/Flex-Zeilen würden sie eine Spalte belegen. */
.sa-ffa-legende li::before,
.sa-ffa-legende li::after,
.sa-ffa-eintrag::before,
.sa-ffa-eintrag::after,
.sa-ffa-kopf::before,
.sa-ffa-kopf::after,
.sa-ffa-seiten::before,
.sa-ffa-seiten::after,
.sa-ffa-jahre::before,
.sa-ffa-jahre::after,
.sa-ffa-diagramm::before,
.sa-ffa-diagramm::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 700px) {
	.sa-ffa-diagramm {
		flex-direction: column;
		gap: 14px;
		padding: 16px;
	}

	.sa-ffa-legende {
		width: 100%;
	}

	.sa-ffa-eintrag {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.sa-ffa-kopf {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
	}

	.sa-ffa-stand {
		min-width: 0;
	}
}
/* Kopfleiste auf sehr breiten Bildschirmen: Logo und Menüknopf wandern nicht weiter nach außen als auf einem 27-Zoll-Monitor (2560 px).
   Das Theme gibt der Leiste links und rechts 5 % Abstand. Bis 2560 px bleibt alles wie bisher, darüber bleibt der Inhalt 2304 px breit und mittig. */
@media (min-width: 2561px) {
	body .header-top:not(.boxed) {
		padding-left: calc((100% - 2304px) / 2);
		padding-right: calc((100% - 2304px) / 2);
	}
}

/* Footer am Handy: keine grauen Trennlinien links und rechts neben dem Copyright-Bereich (die Linien gehören nur zur Spaltenansicht am Computer)
   und kein grauer Balken zwischen Kontaktbereich und Footer (obere Randlinie des Footers, 5 px) */
@media (max-width: 800px) {
	body .footer-column-colored-1 {
		border-left: 0;
		border-right: 0;
	}

	body .footer {
		border-top-width: 0;
	}
}
/* Kontaktformular: Nachrichtenfeld ohne roten Rahmen, gleich wie Name und Betreff (das Theme färbt nur dieses Feld rot) */
body .wpcf7-form textarea,
body .wpcf7-form textarea:focus {
	background-color: #fafafa;
	border: 1px solid #dddddd;
}
/* Startseite am Handy: Titel in drei Zeilen (Freiwillige / Feuerwehr / Heimstetten) und näher an den roten Feldern.
   Die Breite des Titels schrumpft auf das längste Wort, dadurch steht jedes Wort allein in einer Zeile.
   padding-top schiebt Titel und Untertitel nach unten, padding-bottom bestimmt den Abstand zu den roten Feldern (kleiner = näher). */
@media (max-width: 800px) {
	body.home .header-homepage.color-overlay {
		padding-top: 110px !important;
		padding-bottom: 90px !important;
		/* Die Kopfzeile ist durch den kleineren Abstand 115 px niedriger geworden. Das Flammenbild wird um genau diese 115 px höher gezogen (unten bündig, oben abgeschnitten), damit die Flammen so groß und so hoch stehen wie vorher.
		   Mehr Flammen sichtbar / weniger dunkler Bereich oben: 115px erhöhen. Kleiner: 115px verringern. */
		background-size: auto calc(100% + 115px) !important;
	}

	body.home .header-homepage .header-description-row h1 {
		width: min-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		/* Das Theme trennt Wörter automatisch, das würde hier jedes Wort zerhacken. */
		hyphens: none;
		-webkit-hyphens: none;
		overflow-wrap: normal;
		word-break: normal;
	}
}
/* Kontaktformular: unsichtbares Spamschutz-Feld (Honeypot) und Datenschutzhinweis */
.sa-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.wpcf7-form .sa-form-hinweis {
	margin: 4px 0 14px;
	font-size: 0.8rem;
	line-height: 1.45;
	text-align: center;
	color: rgba(255, 255, 255, 0.72);
}

.wpcf7-form .sa-form-hinweis a {
	color: #ffffff;
	text-decoration: underline;
}