/**
 * Stromfreund Design-System.
 * Farb-Tokens kommen aus der theme.json-Palette (CSS-Custom-Properties).
 * Rollen: brand = Titelbalken/Buttons/Akzent (weiße Schrift; bewusste Marken-Entscheidung, AA-Kontrast nicht erfüllt) · marke-dunkel = Links/Icons
 *         marke-hell = Sektionsflächen · rahmen = Kartenränder · cta = Conversion-Lila
 */

/* ---------- Karten (sf-card: karte, preiskarte, person, eg-kachel) ---------- */
.sf-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rahmen);
	color: var(--wp--preset--color--kontrast);
	text-align: center;
	display: flex;
	flex-direction: column;
}
.sf-card__title {
	background: var(--wp--preset--color--marke);
	color: var(--wp--preset--color--base);
	font-size: 1.08em;
	font-weight: 600;
	margin: 0;
	padding: 9px 14px;
}
/* Karten-Stil „Schlicht“: ohne Rahmen und Balken, für ruhige Funktionslisten */
.sf-card.is-style-schlicht {
	background: transparent;
	border: 0;
	text-align: left;
}
.sf-card.is-style-schlicht .sf-card__title {
	background: none;
	color: var(--wp--preset--color--kontrast);
	font-size: 1.12em;
	line-height: 1.3;
	padding: 0;
}
.sf-card.is-style-schlicht .sf-card__title::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--marke);
	margin-bottom: 0.7rem;
}
.sf-card.is-style-schlicht .sf-card__content { padding: 0.45em 0 0; }
.sf-card.is-style-schlicht .wp-block-buttons { justify-content: flex-start; }

/* Raster für schlichte Einträge: feste Umbrüche statt Auto-Fill, damit keine
   verwaiste Einzelkachel entsteht (4 → 2×2 → 1, 3 → 1). !important, weil WordPress
   die Spalten des Grid-Layouts in generierten Container-Klassen setzt. */
.wp-block-group.sf-grid-4.is-layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.wp-block-group.sf-grid-3.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1080px) {
	.wp-block-group.sf-grid-4.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 781px) {
	.wp-block-group.sf-grid-4.is-layout-grid,
	.wp-block-group.sf-grid-3.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Funktions-Zeilen: Medien und Text mit großem Screenshot, abwechselnd links und rechts */
.wp-block-media-text.sf-feature { margin-top: var(--wp--preset--spacing--x-large); }
.wp-block-media-text.sf-feature + .wp-block-media-text.sf-feature { margin-top: var(--wp--preset--spacing--x-large); }
.sf-feature :is(.wp-block-media-text__media, .wp-block-image) img {
	/* Weißer Innenrand: der Screenshot-Inhalt klebt nicht an der Rahmenkante */
	box-sizing: border-box;
	padding: 16px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rahmen);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(45, 45, 45, 0.08);
	/* Hochformat-Screenshots zeigen den oberen Ausschnitt statt die Zeile zu dominieren */
	max-height: 380px;
	object-fit: cover;
	object-position: top center;
}
/* Karten in Feature-Zeilen ganz zeigen statt oben beschneiden */
.sf-coverage-map :is(.wp-block-media-text__media, .wp-block-image) img {
	object-fit: contain;
	object-position: center;
	height: auto;
	max-height: 460px;
}
/* Im vergrößerten Bild gilt der Zuschnitt der Feature-Zeilen nicht: dort ist das ganze Bild gefragt */
/* WordPress blendet das Bild zugeschnitten ein. Wir zeigen es ganz, sonst fehlen Ränder. */
.wp-lightbox-overlay img { object-fit: contain !important; }
.wp-lightbox-overlay .lightbox-image-container figure { transform-origin: center center; will-change: transform; }
.sf-feature :is(.wp-block-media-text__media, .wp-block-image) .wp-lightbox-overlay img,
.sf-coverage-map :is(.wp-block-media-text__media, .wp-block-image) .wp-lightbox-overlay img {
	object-fit: contain;
	max-height: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
/* Videos in Feature-Zeilen im selben Rahmen wie die Screenshots */
.sf-feature .wp-block-video video {
	display: block;
	box-sizing: border-box;
	padding: 12px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rahmen);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(45, 45, 45, 0.08);
}
.sf-feature .wp-block-video figcaption { font-size: 0.8rem; opacity: 0.75; margin-top: 0.6rem; }
.sf-feature .wp-block-media-text__content h3 { font-size: clamp(1.7rem, 1.35rem + 1vw, 2.15rem); margin-bottom: 0.6rem; }
.sf-feature .wp-block-media-text__content h3::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--marke);
	margin-bottom: 0.9rem;
}

/* ---------- Bild-Karussell: aktives Bild mittig, je zwei weitere seitlich im Hintergrund ---------- */
.sf-carousel { position: relative; }
.sf-carousel__stage {
	position: relative;
	height: clamp(260px, 34vw, 440px);
	overflow: hidden;
	touch-action: pan-y;
}
.sf-carousel__image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72%;
	margin: 0;
	cursor: pointer;
	transition: transform 0.6s ease, opacity 0.6s ease, filter 0.6s ease;
	will-change: transform;
}
.sf-carousel__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(clamp(260px, 34vw, 440px) - 24px);
	object-fit: contain;
	box-sizing: border-box;
	padding: 12px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rahmen);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(45, 45, 45, 0.12);
}
/* Positionen: Versatz relativ zur eigenen Breite, Skalierung um die Mitte */
.sf-carousel__image[data-pos="center"] { z-index: 5; transform: translate(-50%, -50%) scale(1); opacity: 1; cursor: default; }
.sf-carousel__image[data-pos="center"] img { box-shadow: 0 18px 44px rgba(45, 45, 45, 0.22); }
.sf-carousel__image[data-pos="r1"] { z-index: 4; transform: translate(-8.3%, -50%) scale(0.7); opacity: 0.5; filter: saturate(0.6); }
.sf-carousel__image[data-pos="l1"] { z-index: 4; transform: translate(-91.7%, -50%) scale(0.7); opacity: 0.5; filter: saturate(0.6); }
/* Nur je ein Bild seitlich sichtbar; die nächsten warten unsichtbar dahinter und gleiten beim Blättern ein */
.sf-carousel__image[data-pos="r2"] { z-index: 3; transform: translate(-8.3%, -50%) scale(0.55); opacity: 0; pointer-events: none; }
.sf-carousel__image[data-pos="l2"] { z-index: 3; transform: translate(-91.7%, -50%) scale(0.55); opacity: 0; pointer-events: none; }
.sf-carousel__image[data-pos="off"] { z-index: 1; transform: translate(-50%, -50%) scale(0.5); opacity: 0; pointer-events: none; }
.sf-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 6;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rahmen);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--marke-dunkel);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(45, 45, 45, 0.18);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.sf-carousel__arrow:hover,
.sf-carousel__arrow:focus-visible { background: var(--wp--preset--color--marke); color: var(--wp--preset--color--base); outline: none; }
.sf-carousel__arrow--prev { left: 6px; }
.sf-carousel__arrow--next { right: 6px; }
.sf-carousel__caption {
	margin: 0.6rem 0 0;
	min-height: 1.5em;
	text-align: center;
	font-weight: 600;
	color: var(--wp--preset--color--kontrast);
}
.sf-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 0.6rem; }
.sf-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--rahmen);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.sf-carousel__dot[aria-current="true"] { background: var(--wp--preset--color--marke); transform: scale(1.25); }
.sf-carousel__dot:focus-visible { outline: 2px solid var(--wp--preset--color--marke-dunkel); outline-offset: 2px; }
/* Auf kräftigem Grün: Beschriftung in der Schriftfarbe des Bereichs, Punkte weiß */
:is(.has-marke-background-color, .has-marke-dunkel-background-color) .sf-carousel__caption { color: inherit; }
:is(.has-marke-background-color, .has-marke-dunkel-background-color) .sf-carousel__dot { background: rgba(255, 255, 255, 0.45); }
:is(.has-marke-background-color, .has-marke-dunkel-background-color) .sf-carousel__dot[aria-current="true"] { background: var(--wp--preset--color--base); }
:is(.has-marke-background-color, .has-marke-dunkel-background-color) .sf-carousel__dot:focus-visible { outline-color: var(--wp--preset--color--base); }
@media (prefers-reduced-motion: reduce) {
	.sf-carousel__image { transition: none; }
}

/* ---------- Lupe: Bilder per Klick vergrößern (Funktionszeilen, Karussell) ---------- */
.sf-zoom .wp-block-media-text__media img,
.wp-block-video.sf-zoom video,
.sf-carousel[data-lupe="1"] .sf-carousel__image[data-pos="center"] img { cursor: zoom-in; }
.sf-zoom-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(20, 28, 12, 0.86);
	cursor: zoom-out;
	animation: sf-fade-in 0.2s ease;
}
.sf-zoom-stage {
	margin: 0;
	max-width: min(1400px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: default;
}
.sf-zoom-stage :is(img, video) {
	max-width: 100%;
	max-height: calc(92vh - 4rem);
	object-fit: contain;
	box-sizing: border-box;
	padding: 12px;
	background: var(--wp--preset--color--base);
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.sf-zoom-caption {
	margin-top: 0.8rem;
	color: #fff;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.sf-zoom-overlay button {
	position: absolute;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--kontrast);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.sf-zoom-overlay button:hover,
.sf-zoom-overlay button:focus-visible { background: var(--wp--preset--color--marke); color: var(--wp--preset--color--base); outline: none; }
.sf-zoom-close { top: 16px; right: 16px; }
.sf-zoom-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.sf-zoom-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* Funktionszeile mit Karussell (Spalten statt Medien und Text) */
.wp-block-columns.sf-feature { margin-top: var(--wp--preset--spacing--x-large); }
.wp-block-columns.sf-feature h3 { font-size: clamp(1.7rem, 1.35rem + 1vw, 2.15rem); margin-bottom: 0.6rem; }
.wp-block-columns.sf-feature h3::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--marke);
	margin-bottom: 0.9rem;
}
.wp-block-columns.sf-feature ul:is(.sf-checklist, .is-style-checkliste) > li { margin-block: 0; padding-block: 0.25rem; font-size: 1em; }
.wp-block-columns.sf-feature ul:is(.sf-checklist, .is-style-checkliste) > li::before { top: 0.4rem; }

/* Titelbalken-Farben (Auswahl im Stile-Reiter der Karte) */
.sf-card__title--brand-dark { background: var(--wp--preset--color--marke-dunkel); }
.sf-card__title--brand-light { background: var(--wp--preset--color--marke-hell); color: var(--wp--preset--color--marke-dunkel); }
.sf-card__title--cta { background: var(--wp--preset--color--cta); }
/* Auf grünen Sektionen wirkt der hellgrüne Kartenrahmen wie ein weißer Rand: dort ohne Rahmen */
/* Auf Grün ohne Rahmen: ein transparenter Rahmen ließe den weißen Kartengrund als Linie um den Titelbalken durchscheinen */
.has-marke-background-color .sf-card:not(.is-style-schlicht) { border: 0; }
/* Auf grünen Sektionen würde der grüne Standard-Balken verschwimmen: dort dunkelgrün,
   solange im Stile-Reiter keine eigene Farbe gewählt ist */
.has-marke-background-color .sf-card__title:not([class*="sf-card__title--"]) { background: var(--wp--preset--color--marke-dunkel); }
.sf-card__content {
	padding: 14px 18px 18px;
	flex: 1;
}
.sf-card__content > p { margin: 0; }
.sf-card__content > p + p { margin-top: 0.6em; }
/* Buttons haben standardmäßig Luft zum Text darüber; ein im Editor gesetzter Abstand (Inline-Style) hat Vorrang */
.sf-card__content > .wp-block-buttons { margin-top: 1.1rem; }
.sf-card__content > .wp-block-buttons:first-child { margin-top: 0; }
.sf-card__content > .wp-block-buttons:first-child:not(:last-child) { margin-bottom: 1.1rem; }
/* Schließt ein Button die Karte ab, sitzt er unten: in gleich hohen Karten einer Reihe stehen die Buttons auf einer Linie */
.sf-card__content:has(> .wp-block-buttons:last-child:not(:first-child)) { display: flex; flex-direction: column; }
.sf-card__content > .wp-block-buttons:last-child:not(:first-child) { margin-top: auto; padding-top: 1.1rem; }
/* Häkchen-Liste in Karten: als Block mittig, Text linksbündig, damit die Häkchen untereinander stehen */
.sf-card__content > ul:is(.sf-checklist, .is-style-checkliste) { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
.sf-card__content > ul:is(.sf-checklist, .is-style-checkliste) > li { margin-block: 0; padding-block: 0.3rem; }
.sf-card__content > ul:is(.sf-checklist, .is-style-checkliste) > li::before { top: 0.6rem; }
/* Kürzere Liste in einer Reihe gleich hoher Karten: vertikal mittig zwischen Titel und Button */
.sf-card__content:has(> .wp-block-buttons:last-child:not(:first-child)) > ul:is(.sf-checklist, .is-style-checkliste) { margin-block: auto; }
.sf-card__content:has(> ul:is(.sf-checklist, .is-style-checkliste)) > .wp-block-buttons:last-child:not(:first-child) { margin-top: 0; }
/* Große Hervorhebung im Fließtext, z. B. Preise (RichText-Format „Groß“) */
.sf-large { display: block; font-size: 1.5em; font-weight: 700; line-height: 1.25; margin-bottom: 0.25em; }

/* Karten-Bilder: einheitliches 3:2-Fenster, Logos eingepasst */
.sf-card-shot,
.sf-tile-image {
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
	background: var(--wp--preset--color--marke-hell);
}
.sf-card-shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.sf-tile-image img { width: 100%; height: 100%; object-fit: cover; }
/* Logos brauchen ein flacheres Fenster als Fotos, sonst füllen sie die halbe
   Karte. Der Innenabstand wächst mit der Breite, damit das Logo in jeder
   Spaltenzahl gleich viel Luft behält. */
.sf-tile-logo { aspect-ratio: 5 / 2; }
.sf-tile-logo img { object-fit: contain; padding: 6% 8%; background: var(--wp--preset--color--base); }
/* Person: rundes Foto mit hellem Ring, Name in Markengrün, Rolle grau (nach Live-Vorbild) */
/* Team-Block: so viele Spalten wie eingestellt, am Handy weniger. */
.sf-team {
	display: grid;
	gap: var(--wp--preset--spacing--medium, 1.5rem);
	grid-template-columns: repeat(var(--sf-team-columns, 4), minmax(0, 1fr));
}
@media (max-width: 781px) {
	.sf-team { grid-template-columns: repeat(min(var(--sf-team-columns, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.sf-team { grid-template-columns: minmax(0, 1fr); }
}

.sf-person { text-align: center; }
.sf-person__photo {
	width: 220px;
	height: 220px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	border: 7px solid var(--wp--preset--color--rahmen);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--marke) 50%, #fff);
}
.sf-person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-person__name {
	margin: 0.9em 0 0;
	font-size: 1.55em;
	line-height: 1.2;
	font-weight: 500;
	color: var(--wp--preset--color--marke);
}
.sf-person__role { margin: 0.35em 0 0; color: var(--wp--preset--color--kontrast); }

/* Gleiche Kartenhöhen in Spalten-Reihen */
.wp-block-column:has(> .sf-card),
.wp-block-column:has(> .sf-stat),
.wp-block-column:has(> .sf-box) { display: flex; flex-direction: column; }
.wp-block-column > .sf-card,
.wp-block-column > .sf-stat,
.wp-block-column > .sf-box { flex: 1; height: 100%; box-sizing: border-box; }
/* Editor: Portal-Kacheln stecken in der Server-Vorschau in zwei Hüllen, die mitwachsen müssen */
.wp-block-column:has(> .wp-block-stromfreund-stat) { display: flex; flex-direction: column; }
.wp-block-column > .wp-block-stromfreund-stat:not(.sf-stat) { flex: 1; display: flex; flex-direction: column; }
.wp-block-stromfreund-stat:not(.sf-stat) > div { flex: 1; display: flex; flex-direction: column; }
.wp-block-stromfreund-stat:not(.sf-stat) > div > .sf-stat { flex: 1; }

/* ---------- Stat-Kachel ---------- */
.sf-stat {
	background: var(--wp--preset--color--marke);
	color: var(--wp--preset--color--base);
	border-radius: 6px;
	padding: 22px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.sf-stat p { margin: 0; }

/* ---------- Altbestand (nicht konvertierte Titelbalken/Boxen) ---------- */
p.has-marke-background-color.has-base-color {
	font-size: 1.08em;
	font-weight: 600;
}
.sf-box { text-align: center; color: var(--wp--preset--color--kontrast); }

/* ---------- Aufklapper (FAQ, Dokumente) ---------- */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--rahmen);
	border-radius: 6px;
	padding: 0.9rem 1.1rem;
	background: var(--wp--preset--color--base);
}
.wp-block-details summary { font-weight: 600; cursor: pointer; }
.wp-block-details ul { list-style: none; padding-left: 0; margin: 0.4rem 0 0; }
.wp-block-details ul li {
	padding: 0.55rem 0.2rem 0.55rem 1.7rem;
	border-bottom: 1px solid var(--wp--preset--color--rahmen);
	position: relative;
}
.wp-block-details ul li:last-child { border-bottom: none; }
.wp-block-details ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7rem;
	width: 16px;
	height: 16px;
	background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235FA143" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>');
}
.wp-block-details ul li a { text-decoration: none; }
.wp-block-details ul li a:hover { text-decoration: underline; }
.wp-block-post-content > .wp-block-details { max-width: var(--wp--style--global--wide-size, 1240px) !important; }
/* Überschriften direkt über Aufklapp-Elementen stehen auf derselben Breite, sonst wirken sie eingerückt */
.wp-block-post-content > :is(h2, h3):has(+ .wp-block-details) { max-width: var(--wp--style--global--wide-size, 1240px) !important; }

/* ---------- Sektions-Rhythmus ---------- */
.wp-block-separator { margin-top: 0.9rem; margin-bottom: 1.6rem; }
.wp-block-columns { row-gap: 1.5rem; }
.wp-block-post-content > h2.wp-block-heading { margin-top: 3rem; }
.wp-block-post-content > h2.wp-block-heading:first-child { margin-top: 1.5rem; }
.wp-block-post-content > .wp-block-group.alignfull { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.wp-block-post-content > .wp-block-group.alignfull:first-child,
.wp-block-post-content > .wp-block-cover.alignfull:first-child { margin-top: 0; }
.wp-block-post-content > .wp-block-group.alignfull:last-child { margin-bottom: 0; }

/* Überschriften auf farbigen Flächen erben die Flächen-Textfarbe */
.has-base-color .wp-block-heading,
.has-base-color h1, .has-base-color h2, .has-base-color h3 { color: inherit; }

/* ---------- Bildnachweis im Cover ---------- */
.sf-image-credit {
	position: relative;
	z-index: 2;
	margin-top: -2.1rem;
	padding-right: 14px;
	text-align: right;
	font-size: 0.72rem;
	opacity: 0.8;
	color: #ffffff;
}

/* ---------- Gated Video ---------- */
.sf-video {
	max-width: 840px;
	/* Ohne den oberen Abstand klebt das Video an der Überschrift darüber. */
	margin: var(--wp--preset--spacing--medium, 1.5rem) auto 0;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--marke-hell);
	border: 1px solid var(--wp--preset--color--rahmen);
}
.sf-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.sf-video__gate {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--kontrast);
	font: inherit;
}
.sf-video__play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--marke);
	position: relative;
}
.sf-video__play::after {
	content: '';
	position: absolute;
	left: 55%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #ffffff;
}
.sf-video__title { font-weight: 600; font-size: 1.05em; }
.sf-video__note { font-size: 0.8em; opacity: 0.7; max-width: 30rem; }

/* Überschriften auf Markenflächen sind immer weiß */
.has-marke-background-color .wp-block-heading,
.has-marke-background-color h2,
.has-marke-background-color h3,
.has-marke-dunkel-background-color .wp-block-heading,
.has-cta-background-color .wp-block-heading {
	color: var(--wp--preset--color--base);
}

/* ---------- Hero-Störer über dem Ortsfoto ---------- */
.sf-callout {
	/* Deckkraft der weißen Fläche einstellbar (Titelbild-Block, Stile-Reiter) */
	background: rgb(255 255 255 / var(--sf-callout-opacity, 1));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 8px;
	overflow: hidden;
	/* Breite einstellbar (Titelbild-Block, Stile-Reiter) */
	max-width: var(--sf-callout-width, 620px);
	margin: 2.5rem auto;
	text-align: center;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
	color: var(--wp--preset--color--kontrast);
}
h1.sf-callout__title {
	background: var(--wp--preset--color--marke);
	color: var(--wp--preset--color--base);
	font-size: clamp(1.4rem, 2.6vw, 1.8rem);
	margin: 0;
	padding: 14px 20px;
}
.sf-callout__content { padding: 18px 24px 22px; }
.sf-callout__content > p { margin: 0 0 0.8em; }
.sf-callout__logo { max-width: 180px; height: auto; margin: 0 auto 0.6em; }
.sf-callout__logo img { width: 100%; height: auto; }
.sf-callout__benefits { font-weight: 600; }
.sf-callout__region { font-size: 0.82em; opacity: 0.75; margin-top: 0.9em; }

/* ---------- Häkchen-Listen ---------- */
ul:is(.sf-checklist, .is-style-checkliste) { list-style: none; padding-left: 0; }
ul:is(.sf-checklist, .is-style-checkliste) li {
	position: relative;
	padding: 0.35rem 0 0.35rem 2rem;
	font-size: 1.05em;
}
/* In Funktionszeilen kompakter: WordPress setzt dort sonst Block-Abstände zwischen die Einträge */
.sf-feature ul:is(.sf-checklist, .is-style-checkliste) > li { margin-block: 0; padding-block: 0.25rem; font-size: 1em; }
.sf-feature ul:is(.sf-checklist, .is-style-checkliste) > li::before { top: 0.4rem; }
ul:is(.sf-checklist, .is-style-checkliste) li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--marke) no-repeat center / 12px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

/* Legacy-Titelbalken in Karten: volle Breite statt Chip */
.sf-card > p.has-marke-background-color {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	margin: 0;
}

/* Trennlinie unter Überschriften (statt Inline-Breite im Block) */
.wp-block-separator.sf-line { width: 120px; margin-left: auto; margin-right: auto; }
/* Auf grünen Flächen wird die Linie weiß */
.has-marke-background-color .wp-block-separator.sf-line {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

/* Überschrift-Stil „Mit grüner Linie" (Core-Heading statt eigenem Block) */
.is-style-mit-linie::after {
	content: "";
	display: block;
	width: 120px;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--marke);
	margin: 0.85rem auto 0;
}
.has-marke-background-color .is-style-mit-linie::after { background: var(--wp--preset--color--base); }
/* Textlinks auf grünen Flächen: in Textfarbe, unterstrichen (dunkelgrün auf grün ist kaum lesbar) */
.has-marke-background-color > :is(p, ul, ol) a:not(.wp-element-button) { color: inherit; }
.sf-card__icon { margin: 0 0 0.4em; }
.sf-card__button { display: inline-block; text-decoration: none; }

/* Callout-Kasten */
/* Hinweis-Box direkt im Inhalt: Luft nach oben und unten wie ein eigener Abschnitt */
.wp-block-post-content > .wp-block-group.is-style-box-marke {
	margin-top: var(--wp--preset--spacing--large);
	margin-bottom: var(--wp--preset--spacing--large);
}

/* Karten-Bilder: Luft zum Titelbalken und zu den Seiten, ohne farbige Letterbox */
.sf-card .sf-card-shot { margin: 14px 14px 0; aspect-ratio: auto; min-height: 180px; max-height: 240px; background: transparent; }

/* Netzersparnis-Karte: effektiver Bezugspreis mit Aufschlüsselung */
.sf-grid-cost__subtitle { text-align: center; font-weight: 600; }
.sf-grid-cost__calc { text-align: center; margin-top: 0.6em; }
.sf-grid-cost__calc p { margin: 0; }
.sf-grid-cost__price { font-size: 1.5em; font-weight: 700; }
.sf-grid-cost__deduction { color: var(--wp--preset--color--marke-dunkel); font-weight: 600; }
.sf-grid-cost__effective {
	font-size: 1.5em;
	font-weight: 700;
	color: var(--wp--preset--color--marke-dunkel);
	border-top: 1px solid var(--wp--preset--color--rahmen);
	display: inline-block;
	padding-top: 0.15em;
	margin-top: 0.15em;
}
.sf-grid-cost__table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.1em;
	font-size: 0.92em;
}
.sf-grid-cost__table caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	padding-bottom: 0.5em;
}
.sf-grid-cost__table th,
.sf-grid-cost__table td {
	text-align: left;
	padding: 0.35em 0.5em;
	border-bottom: 1px solid var(--wp--preset--color--rahmen);
}
.sf-grid-cost__table thead th { font-weight: 600; color: var(--wp--preset--color--marke-dunkel); text-align: right; }
.sf-grid-cost__table thead th:first-child { text-align: left; }
.sf-grid-cost__table tbody th { font-weight: 400; }
.sf-grid-cost__table td { text-align: right; white-space: nowrap; }
.sf-grid-cost__table .sf-grid-cost__total th,
.sf-grid-cost__table .sf-grid-cost__total td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--wp--preset--color--marke); }
.sf-grid-cost__footnote { font-size: 0.85em; color: var(--wp--preset--color--kontrast); margin-top: 1em; }

/* ---------- Buttons: einheitlicher Hover (Preset-Klassen nutzen !important) ---------- */
.wp-block-button__link.wp-element-button {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Farbige und weiße Buttons werden beim Hover dunkelgrün */
.wp-block-button__link.wp-element-button.has-background:not(.has-cta-background-color, .has-marke-dunkel-background-color):hover,
.wp-block-button__link.wp-element-button.has-background:not(.has-cta-background-color, .has-marke-dunkel-background-color):focus-visible,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--marke-dunkel) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--marke-dunkel) !important;
}
/* Dunkelgrüne Buttons (Standard) invertieren beim Hover: weiß mit dunkelgrüner Schrift und Kontur */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:is(:not(.has-background), .has-marke-dunkel-background-color):hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link.wp-element-button:is(:not(.has-background), .has-marke-dunkel-background-color):focus-visible {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--marke-dunkel) !important;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--marke-dunkel);
}
.wp-block-button__link.has-cta-background-color:hover,
.wp-block-button__link.has-cta-background-color:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--cta) 85%, #000) !important;
}

/* ---------- Header am Handy: Buttons in einer Zeile, Menüsymbol ganz rechts ---------- */
@media (max-width: 600px) {
	header .wp-block-navigation { order: 2; }
	header .wp-block-buttons { order: 1; flex-wrap: nowrap; gap: 8px; }
	/* Buttons behalten ihre Breite, bei Platzmangel gibt das Logo nach */
	header .wp-block-buttons,
	header .wp-block-button { flex-shrink: 0; }
	header .wp-block-site-logo { flex-shrink: 1; min-width: 0; }
	header .sf-portal-button img { width: 18px; height: 18px; max-width: none; }
	header .wp-block-buttons .wp-block-button__link {
		padding: 8px 12px !important;
		font-size: 0.95em;
		white-space: nowrap;
	}
	/* „Portal“ nur als Icon; das Wort bleibt für Screenreader erhalten */
	header .sf-portal-button img { margin-right: 0 !important; vertical-align: -5px !important; }
	header .sf-portal-button__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ---------- Hauptnavigation: animierte Unterstreichung ---------- */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	padding-bottom: 2px;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--marke);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	text-decoration: none;
	color: var(--wp--preset--color--marke-dunkel);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}
/* Aktive Seite: dauerhafte Linie in Dunkelgrün, damit Hover unterscheidbar bleibt */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
	background: var(--wp--preset--color--marke-dunkel);
}
/* Im Überlagerungsmenü stehen die Punkte untereinander und füllen die ganze
   Breite. Eine Linie darunter sähe aus wie ein Trennstrich zum nächsten Punkt,
   deshalb markiert dort ein kurzer Strich links den Abschnitt, in dem man ist. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.sf-current {
	font-weight: 700;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.sf-current::before {
	content: "";
	position: absolute;
	left: -0.75rem;
	top: 0.2em;
	bottom: 0.2em;
	width: 3px;
	border-radius: 2px;
	background: currentColor;
}

/* ---------- Eingabefelder global ----------
   Ollie färbt Felder mit seiner Palettenfarbe „tertiary“, die es bei uns nicht gibt:
   die Deklaration wird ungültig und der Rahmen fällt weg. :root hebt die Spezifität
   knapp über Ollies Selektor. */
:root input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]),
:root select,
:root textarea {
	border: 1px solid var(--wp--preset--color--marke-dunkel);
	border-radius: 6px;
	box-shadow: none;
	background-color: var(--wp--preset--color--base);
}
:root input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):focus,
:root select:focus,
:root textarea:focus {
	border-color: var(--wp--preset--color--marke-dunkel);
	outline: 2px solid var(--wp--preset--color--marke);
	outline-offset: 0;
}

/* ---------- EG-Verzeichnis: automatisches Kachel-Raster mit Suche ---------- */
.sf-eg-directory { margin-top: var(--wp--preset--spacing--large); }
.sf-eg-search { max-width: 480px; margin: 0 auto 1.6rem; }
.sf-eg-search__field {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--marke-dunkel);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	font: inherit;
}
.sf-eg-search__field:focus {
	border-color: var(--wp--preset--color--marke-dunkel);
	outline: 2px solid var(--wp--preset--color--marke);
	outline-offset: 0;
}
.sf-eg-grid {
	display: grid;
	/* 360 px, damit Homepage und E-Mail in Knopfgröße nebeneinander passen.
	   Schmäler geht nicht: bei vier Spalten läuft der Knopftext über den Rand,
	   weil die Knopfzeile bis zum Umbruchpunkt bewusst nicht umbricht. */
	grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
	gap: 1.5rem;
}
.sf-eg-grid__cell { display: flex; }
.sf-eg-grid__cell > .sf-card { flex: 1; }
.sf-eg-grid__cell[hidden] { display: none; }
.sf-eg-empty { text-align: center; margin-top: 1.4rem; }

/* Kartennadel: Leaflet gibt eigenen Symbolen sonst einen weißen Kasten mit
   grauem Rand. Die Regel muss leaflet.css überstimmen, das erst beim Laden
   der Karte dazukommt, daher beide Klassen. */
.leaflet-div-icon.sfc-map-pin { background: none; border: 0; }
/* Klicks soll das Symbol selbst bekommen, nicht die Pfade darin, sonst
   hängt das Aufklappen des Sprechblase am getroffenen Teilstück. */
.sfc-map-pin svg { display: block; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }

/* FAQ-Block: Suchfeld oben (gleiches Feld wie die EG-Suche), Fragen darunter */
.sf-faq__search { max-width: 480px; margin: 1.8rem auto 1.6rem; }
.sf-faq__content > * { margin-block: 0; }
.sf-faq__content > * + * { margin-block-start: var(--wp--style--block-gap, 1.2rem); }
.sf-faq__content > .wp-block-details + :not(.wp-block-details) { margin-block-start: var(--wp--preset--spacing--large); }
.wp-block-post-content > .sf-faq + * { margin-top: var(--wp--preset--spacing--large); }
.sf-faq__field {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--marke-dunkel);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	font: inherit;
}
.sf-faq__field:focus {
	border-color: var(--wp--preset--color--marke-dunkel);
	outline: 2px solid var(--wp--preset--color--marke);
	outline-offset: 0;
}
.sf-faq__empty { text-align: center; margin: 1rem 0 0; }

/* Linkliste als zentrierte Pillen (z. B. externe Quellen unter der FAQ) */
ul.sf-link-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
ul.sf-link-list li { margin: 0; }
/* Link-Pills in der Marken-Optik: dunkelgrün, Jockey One, Hover invertiert wie die Buttons */
ul.sf-link-list a {
	display: inline-block;
	padding: 0.42em 1.1em 0.5em;
	border-radius: 999px;
	background: var(--wp--preset--color--marke-dunkel);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--marke);
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
ul.sf-link-list a[target="_blank"]::after { content: " ↗"; }
ul.sf-link-list a:hover,
ul.sf-link-list a:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--marke-dunkel);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--marke-dunkel);
}
/* Ohne Treffer ist die Suche das letzte sichtbare Element: Luft zum Footer */
.sf-faq__search:has(.sf-faq__empty:not([hidden])) { margin-bottom: var(--wp--preset--spacing--x-large); }
.sf-eg-more-row { text-align: center; margin-top: 1.6rem; }
.sf-eg-more { cursor: pointer; }

/* Staffel-Beispiel auf der Preisseite: gleiche Tabellen-Optik wie die Netzersparnis */
.wp-block-table.sf-tiers { margin-top: 1rem; }
.wp-block-table.sf-tiers table { border-collapse: collapse; font-size: 0.95em; table-layout: auto; }
.wp-block-table.sf-tiers td,
.wp-block-table.sf-tiers th { white-space: nowrap; }
.wp-block-table.sf-tiers th,
.wp-block-table.sf-tiers td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rahmen);
	padding: 0.55em 0.7em;
	text-align: left;
}
.wp-block-table.sf-tiers thead th {
	color: var(--wp--preset--color--marke-dunkel);
	font-weight: 600;
	border-bottom: 2px solid var(--wp--preset--color--marke);
}
.wp-block-table.sf-tiers td:nth-child(4),
.wp-block-table.sf-tiers td:nth-child(5),
.wp-block-table.sf-tiers th:nth-child(4),
.wp-block-table.sf-tiers th:nth-child(5) { text-align: right; white-space: nowrap; }
.wp-block-table.sf-tiers tfoot td {
	font-weight: 700;
	border-top: 2px solid var(--wp--preset--color--marke);
	border-bottom: 0;
}
@media (max-width: 600px) {
	.wp-block-table.sf-tiers { overflow-x: auto; }
	.wp-block-table.sf-tiers table { min-width: 560px; }
}

/* Seiteninhalt endet nicht direkt am Footer (außer vollbreite Bänder) */
/* Footer sitzt bei kurzem Inhalt am Bildschirmende: Seitenrahmen mindestens
   bildschirmhoch, der Hauptbereich nimmt den freien Platz ein */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > main { flex: 1 0 auto; }

/* Abstand am Container statt am letzten Kind: das letzte Element im HTML kann
   ausgeblendet sein (z. B. bei aktiver FAQ-Suche) */
.wp-block-post-content:not(:has(> .alignfull:last-child)) { padding-bottom: 3rem; }

/* Nach einer Folge von Aufklapp-Elementen beginnt ein neuer Abschnitt */
.wp-block-post-content > .wp-block-details + :not(.wp-block-details) { margin-top: var(--wp--preset--spacing--large); }

/* ---------- Fluent-Forms-Eingabefelder deutlich erkennbar ---------- */
/* !important nötig: das Fluent-Forms-Skin „ffs_default“ setzt border:0 mit höherer Spezifität */
.fluentform .ff-el-form-control {
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--marke-dunkel) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	padding: 10px 12px;
	width: 100%;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--marke-dunkel) !important;
	outline: 2px solid var(--wp--preset--color--marke);
	outline-offset: 0;
}
.fluentform .ff-el-input--label label { font-weight: 600; }
.fluentform .ff-btn-submit {
	background: var(--wp--preset--color--marke-dunkel) !important;
	color: var(--wp--preset--color--base) !important;
	border: none !important;
	border-radius: 6px;
	padding: 12px 24px;
	font-weight: 600;
	cursor: pointer;
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--marke-dunkel) !important;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--marke-dunkel);
}
.fluentform .ff-el-form-check-input {
	width: 1.15em;
	height: 1.15em;
	accent-color: var(--wp--preset--color--marke-dunkel);
	margin-right: 0.5em;
	flex: none;
}
/* Auswahl als Chips: Radio-Gruppen mit Container-Klasse „sf-chips“ */
.fluentform .sf-chips .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fluentform .sf-chips .ff-el-form-check { margin: 0; }
.fluentform .sf-chips .ff-el-form-check-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--marke-dunkel);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fluentform .sf-chips .ff-el-form-check-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.fluentform .sf-chips .ff-el-form-check-label:hover {
	background: var(--wp--preset--color--marke-hell);
	border-color: var(--wp--preset--color--marke);
}
.fluentform .sf-chips .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
	background: var(--wp--preset--color--marke);
	border-color: var(--wp--preset--color--marke);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}
.fluentform .sf-chips .ff-el-form-check:has(input:focus-visible) .ff-el-form-check-label {
	outline: 2px solid var(--wp--preset--color--marke-dunkel);
	outline-offset: 2px;
}

/* Live-Hinweis zur gewählten Größe und bedingte Fragen blenden sanft ein */
.fluentform .sf-form-note {
	background: var(--wp--preset--color--marke-hell);
	border-left: 4px solid var(--wp--preset--color--marke);
	border-radius: 6px;
	padding: 0.7rem 1rem;
	margin-bottom: 1.2rem;
	animation: sf-fade-in 0.25s ease;
}
.fluentform .sf-form-note p { margin: 0; }
.fluentform .sf-chips.has-conditions { animation: sf-fade-in 0.25s ease; }
@keyframes sf-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.fluentform .sf-form-note,
	.fluentform .sf-chips.has-conditions { animation: none; }
}

.fluentform .ff-el-tc { display: flex; align-items: flex-start; gap: 0.4em; }
.fluentform .ff-el-tc .ff_tc_checkbox { display: inline-flex; padding-top: 0.15em; }

/* ---------- Vereins-Fußzeile (EG-Kontaktband): Kontakt links, Vereinsdaten als Raster rechts ---------- */
.sf-org-data p { margin: 0; }
/* Die Angaben-Blöcke sollen sich wie die Absätze verhalten, der Abstand kommt aus der Spalte. */
.sf-org-data .wp-block-stromfreund-eg-daten { margin-block: 0; }
.sf-org-data a:not(.wp-element-button) { color: inherit; }
.sf-org-data .wp-block-heading { margin: 0 0 0.6rem; }
.sf-org-data__contact { display: flex; flex-direction: column; gap: 0.35rem; }
.sf-org-data__contact .wp-block-buttons { margin-top: 0.9rem; }
.sf-org-data__fields { gap: 0.9rem 1.6rem; }
/* Der Steckbrief-Block bringt sein Raster selbst mit, die Kern-Gruppe tat das über das Layout. */
.sf-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sf-footer-slim__left { text-align: right; }
@media (max-width: 781px) {
	.sf-footer-slim__left { text-align: left; }
}
.sf-org-data__fields p { font-size: 0.95em; line-height: 1.4; }
.sf-org-data__fields p strong:first-child {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 0.1rem;
}
@media (min-width: 782px) {
	.sf-org-data__fields { border-left: 1px solid rgb(255 255 255 / 0.35); padding-left: 1.6rem; }
}

/* ---------- Marke: Headlines in Jockey One wie im Marketing-Material ---------- */
:root { --sf-brand-dark: var(--wp--preset--color--marke-dunkel); }
:where(.wp-block-post-content, .wp-block-post-title) :is(h1, h2, h3).wp-block-heading,
h1.wp-block-post-title {
	font-family: var(--wp--preset--font-family--marke);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.005em;
}
/* Farbe nur auf hellem Grund; Titelbalken und farbige Flächen behalten ihre eigene Schriftfarbe */
:where(.wp-block-post-content) :is(h1, h2, h3).wp-block-heading:where(:not(.has-text-color, .sf-callout__title)),
h1.wp-block-post-title:where(:not(.has-text-color)) {
	color: var(--sf-brand-dark);
}
/* Auf Hellgrün reicht der Kontrast von #5FA143 nicht (unter 3:1), dort das dunklere Grün */
.has-marke-hell-background-color :is(h1, h2, h3).wp-block-heading:where(:not(.has-text-color, .is-style-pill, .is-style-pill-rund)) { color: var(--wp--preset--color--marke-dunkel); }
:where(.wp-block-post-content) h2.wp-block-heading { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); }
:where(.wp-block-post-content) h3.wp-block-heading { font-size: clamp(1.55rem, 1.25rem + 0.9vw, 2rem); }

/* Label-Pill (Absatzstil „Label“): dunkelgrüner Balken, weiße Versalien */
p.is-style-label {
	width: fit-content;
	max-width: 100%;
	background: var(--sf-brand-dark);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--marke);
	font-size: 1.35rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: 999px;
	padding: 0.35em 1em 0.42em;
}
p.is-style-label.has-text-align-center { margin-inline: auto; }
p.is-style-label.has-text-align-right { margin-left: auto; }
.has-marke-background-color p.is-style-label:not(.has-background) { background: var(--wp--preset--color--marke-dunkel); }

/* Überschrift als Pill wie die Abschnittsbalken im Flyer.
   „Pill (Marke)“: die flache Seite stößt immer an etwas an, frei im Inhalt an den Bildschirmrand, in einer
   Funktionszeile an den Bildrahmen, in einer „Box (Marke)“ an den Boxrand. Zentriert gibt es keinen Anschluss,
   dort ist sie rundum rund. „Pill rund (Marke)“: rundum gerundet, frei an der Inhaltskante. */
.wp-block-heading:is(.is-style-pill, .is-style-pill-rund) {
	width: fit-content;
	background: var(--sf-brand-dark);
	color: var(--wp--preset--color--base);
	font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem);
	line-height: 1.05;
	border-radius: 999px;
	padding: 0.3em 1.1em 0.38em;
}
.has-marke-background-color .wp-block-heading:is(.is-style-pill, .is-style-pill-rund):not(.has-background) { background: var(--wp--preset--color--marke-dunkel); }
.wp-block-heading:is(.is-style-pill, .is-style-pill-rund).has-text-align-center { margin-inline: auto !important; }

/* Rund: frei an der Inhaltskante */
.is-layout-constrained > .wp-block-heading.is-style-pill-rund:not(.has-text-align-center, .has-text-align-right) {
	margin-left: calc((100% - min(var(--wp--style--global--content-size), 100%)) / 2) !important;
	margin-right: auto !important;
}
.is-layout-constrained > .wp-block-heading.is-style-pill-rund.has-text-align-right {
	margin-right: calc((100% - min(var(--wp--style--global--content-size), 100%)) / 2) !important;
	margin-left: auto !important;
}

/* Flach, frei im Inhalt: bis zum Bildschirmrand, der Text bleibt an der Inhaltskante */
.is-layout-constrained > .wp-block-heading.is-style-pill:not(.has-text-align-center, .has-text-align-right) {
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: auto !important;
	padding-left: calc((100vw - min(var(--wp--style--global--content-size), 100%)) / 2);
	border-radius: 0 999px 999px 0;
}
.is-layout-constrained > .wp-block-heading.is-style-pill.has-text-align-right {
	max-width: none !important;
	margin-right: calc(50% - 50vw) !important;
	margin-left: auto !important;
	padding-right: calc((100vw - min(var(--wp--style--global--content-size), 100%)) / 2);
	border-radius: 999px 0 0 999px;
}
.wp-site-blocks { overflow-x: clip; }

/* Flach in einer Spalte oder Gruppe: Dort gibt es keinen Bildschirmrand, wohl aber die Kante
   des Behälters. Der Balken stößt an sie an und ist deshalb auf dieser Seite flach. Ohne
   diese Regel sähe er genauso aus wie der rundum runde. */
:is(.wp-block-column, .wp-block-group:not(.is-style-box-marke)) > .wp-block-heading.is-style-pill:not(.has-text-align-center, .has-text-align-right) {
	border-radius: 0 999px 999px 0;
}
:is(.wp-block-column, .wp-block-group:not(.is-style-box-marke)) > .wp-block-heading.is-style-pill.has-text-align-right {
	border-radius: 999px 0 0 999px;
}

/* Flach in einer „Box (Marke)“: an den Boxrand */
.wp-block-group.is-style-box-marke > .wp-block-heading.is-style-pill:not(.has-text-align-center, .has-text-align-right) {
	max-width: none !important;
	margin-left: -1.8rem !important;
	padding-left: 1.8rem;
	border-radius: 0 999px 999px 0;
}
.wp-block-group.is-style-box-marke > .wp-block-heading.is-style-pill.has-text-align-right {
	max-width: none !important;
	margin-right: -1.8rem !important;
	margin-left: auto !important;
	padding-right: 1.8rem;
	border-radius: 999px 0 0 999px;
}

/* In Funktionszeilen ersetzt die Pill die kurze grüne Zierlinie. Flach stößt sie an den Bildrahmen:
   Bild links = Pill links, Bild rechts = Pill rechtsbündig. Gestapelt am Handy an den Bildschirmrand. */
.sf-feature { --sf-feature-pad: clamp(1.5rem, 3.4vw, 2.8rem); }
.sf-feature .wp-block-media-text__content { padding-inline: var(--sf-feature-pad); }
.sf-feature h3.wp-block-heading:is(.is-style-pill, .is-style-pill-rund) { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem); margin-bottom: 0.9rem; }
.sf-feature h3.wp-block-heading:is(.is-style-pill, .is-style-pill-rund)::before { display: none; }
/* Wer den Stil „Mit Linie“ wählt, will genau eine Linie: die automatische entfällt. */
:is(.wp-block-columns.sf-feature, .sf-feature .wp-block-media-text__content) h3.is-style-mit-linie::before { display: none; }
.wp-block-media-text.sf-feature:not(.has-media-on-the-right) .wp-block-media-text__content > h3.is-style-pill:not(.has-text-align-center) {
	margin-left: calc(-1 * var(--sf-feature-pad));
	padding-left: var(--sf-feature-pad);
	border-radius: 0 999px 999px 0;
}
.wp-block-media-text.sf-feature.has-media-on-the-right .wp-block-media-text__content > h3:is(.is-style-pill, .is-style-pill-rund) { margin-left: auto; }
.wp-block-media-text.sf-feature.has-media-on-the-right .wp-block-media-text__content > h3.is-style-pill:not(.has-text-align-center) {
	margin-right: calc(-1 * var(--sf-feature-pad));
	padding-right: var(--sf-feature-pad);
	border-radius: 999px 0 0 999px;
}
/* Mit Pill beginnt der Text oben am Bild: die Pill dockt an der oberen Bildkante an statt mittig daneben */
.wp-block-media-text.sf-feature:has(> .wp-block-media-text__content > h3.is-style-pill) > .wp-block-media-text__content {
	align-self: start;
	padding-top: 1.6rem;
}
.wp-block-columns.sf-feature > .wp-block-column:has(> h3.is-style-pill) { align-self: flex-start; padding-top: 1.6rem; }
/* Neben dem Karussell gibt es keinen Rahmen zum Andocken: dort ist die Pill rundum rund */
.wp-block-columns.sf-feature:not(:has(.wp-block-image)) h3.wp-block-heading.is-style-pill { border-radius: 999px; }
/* Steht in der Nachbarspalte ein Bild, stößt die Pill an dessen Rahmen an: Bild links = Pill links flach,
   Bild rechts = Pill rechtsbündig und rechts flach. Wie in den Medien-und-Text-Zeilen. */
.wp-block-columns.sf-feature:has(.wp-block-image) > .wp-block-column:not(:has(.wp-block-image)) > h3.is-style-pill:not(.has-text-align-center) {
	border-radius: 0 999px 999px 0;
	margin-left: calc(-1 * var(--wp--style--block-gap, 2rem));
	padding-left: calc(var(--wp--style--block-gap, 2rem) + 1.1em);
}
.wp-block-columns.sf-feature:has(> .wp-block-column:last-child .wp-block-image) > .wp-block-column:first-child > h3.is-style-pill:not(.has-text-align-center) {
	border-radius: 999px 0 0 999px;
	margin-left: auto;
	margin-right: calc(-1 * var(--wp--style--block-gap, 2rem));
	padding-left: 1.1em;
	padding-right: calc(var(--wp--style--block-gap, 2rem) + 1.1em);
}
/* Gestapelt steht immer der Text vorn, auch wenn das Bild am Desktop links ist */
@media (max-width: 781px) {
	.wp-block-columns.sf-feature > .wp-block-column:has(> h3) { order: -1; }
	/* Gestapelt steht kein Bild mehr daneben: die Pill stößt dann an den Bildschirmrand */
	.wp-block-columns.sf-feature:has(.wp-block-image) > .wp-block-column:not(:has(.wp-block-image)) > h3.is-style-pill:not(.has-text-align-center),
	.wp-block-columns.sf-feature:has(> .wp-block-column:last-child .wp-block-image) > .wp-block-column:first-child > h3.is-style-pill:not(.has-text-align-center) {
		border-radius: 0 999px 999px 0;
		margin-left: calc(-1 * var(--wp--style--root--padding-left, 1.5rem));
		margin-right: auto;
		padding-left: calc(var(--wp--style--root--padding-left, 1.5rem) + 1.1em);
		padding-right: 1.1em;
	}
}
@media (max-width: 600px) {
	.wp-block-media-text.sf-feature.is-stacked-on-mobile .wp-block-media-text__content > h3.is-style-pill:not(.has-text-align-center) {
		margin-left: calc(-1 * (var(--sf-feature-pad) + var(--wp--style--root--padding-left, 1rem)));
		margin-right: 0;
		padding-left: calc(var(--sf-feature-pad) + var(--wp--style--root--padding-left, 1rem));
		padding-right: 1.1em;
		border-radius: 0 999px 999px 0;
	}
}

/* Buttons im Inhalt: Marken-Pill mit Doppelrand wie „JETZT MITMACHEN.“ im Flyer, in jeder Button-Farbe.
   Die Innenlinie folgt der Schriftfarbe. Stil „Klassisch“ behält den eckigen Portal-Look. */
:where(.wp-block-post-content, .sf-org-data) .wp-block-button:not(.is-style-outline, .is-style-klassisch) .wp-block-button__link {
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--marke);
	font-weight: 400;
	/* 24 px: ab dieser Größe reicht Weiß auf CI-Dunkelgrün (3,2 : 1) für die Lesbarkeit nach WCAG */
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.56em 1.4em 0.62em;
	outline: 2px solid currentColor;
	outline-offset: -6px;
}

/* Stil „Mit Schatten“: Das Eltern-Theme legt die Regel in seiner Spalten-Datei ab und lädt
   sie nur, wenn ein Spalten-Block auf der Seite ist. Auf einer einzelnen Gruppe blieb der
   Stil deshalb wirkungslos. Hier steht er in unserer Datei und gilt immer. */
.wp-block-group.is-style-column-box-shadow,
.wp-block-column.is-style-column-box-shadow {
	box-shadow: 0 8px 40px -20px rgb(21 14 41 / 12%);
	transition: box-shadow 0.4s ease;
}
.wp-block-group.is-style-column-box-shadow:hover,
.wp-block-column.is-style-column-box-shadow:hover {
	box-shadow: 0 12px 60px -20px rgb(21 14 41 / 16%);
}

/* Stil „Im Rahmen“: Die Regel des Eltern-Themes liegt in seiner Video-Datei und nutzt eine
   Farbe, die es bei uns nicht gibt. Hier gilt sie für Bild und Video, mit unserem Hellgrün. */
.wp-block-image.is-style-media-boxed,
.wp-block-video.is-style-media-boxed {
	background-color: var(--wp--preset--color--marke-hell);
	padding: var(--wp--preset--spacing--large);
	border-radius: 5px;
}
.wp-block-image.is-style-media-boxed img,
.wp-block-video.is-style-media-boxed video {
	display: block;
}

/* Farbstile für Knöpfe. Sie kommen aus dem Eltern-Theme und zeigten dort auf dessen
   Palette; hier bekommen sie unsere Farben. Die Hover-Regeln oben greifen mit. */
.wp-block-button.is-style-button-brand-alt > .wp-block-button__link,
.wp-block-button.wp-block-stromfreund-eg-link.is-style-button-brand-alt .wp-block-button__link {
	background-color: var(--wp--preset--color--cta);
	color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-button-dark > .wp-block-button__link,
.wp-block-button.wp-block-stromfreund-eg-link.is-style-button-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--marke-dunkel);
	color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-button-light > .wp-block-button__link,
.wp-block-button.wp-block-stromfreund-eg-link.is-style-button-light .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--marke-dunkel);
}
.wp-block-button.is-style-secondary-button > .wp-block-button__link,
.wp-block-button.wp-block-stromfreund-eg-link.is-style-secondary-button .wp-block-button__link {
	background-color: var(--wp--preset--color--marke-hell);
	color: var(--wp--preset--color--kontrast);
}
.wp-block-button:is(.is-style-button-light, .is-style-secondary-button) > .wp-block-button__link:hover,
.wp-block-button:is(.is-style-button-light, .is-style-secondary-button) > .wp-block-button__link:focus-visible,
.wp-block-button.wp-block-stromfreund-eg-link:is(.is-style-button-light, .is-style-secondary-button) .wp-block-button__link:hover,
.wp-block-button.wp-block-stromfreund-eg-link:is(.is-style-button-light, .is-style-secondary-button) .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--marke-dunkel);
	color: var(--wp--preset--color--base);
}

/* Box (Stil „Box (Marke)“): runde Fläche mit weißer Innenlinie wie der QR-Kasten im Flyer */
.wp-block-group.is-style-box-marke {
	border-radius: 24px;
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -8px;
	padding: 1.6rem 1.8rem;
}
.wp-block-group.is-style-box-marke:not(.has-background) {
	background: var(--wp--preset--color--marke);
	color: var(--wp--preset--color--base);
}

/* Aufklapp-Bereiche wie „Kurz gefragt“ im Flyer: FAQ-Gruppen und die Download-Bereiche (Formulare, Preisblätter …)
   als hellgrüne Fläche, Titel als Pill, die links oben an der Flächenkante anliegt */
:is(.sf-faq__content > details.wp-block-details:has(details), .wp-block-post-content > details.wp-block-details) {
	background: var(--wp--preset--color--marke-hell);
	border: 0;
	border-radius: 0;
	/* Inhalt bündig mit der Titelschrift: 1,1 rem Pill-Innenabstand + 1,2 rem Pfeil mit fester Breite */
	padding: 0 1.1rem 0 2.3rem;
}
:is(.sf-faq__content > details.wp-block-details:has(details), .wp-block-post-content > details.wp-block-details)[open] { padding-bottom: 1.1rem; }
:is(.sf-faq__content > details.wp-block-details:has(details), .wp-block-post-content > details.wp-block-details) > summary {
	width: fit-content;
	margin-left: -2.3rem;
	background: var(--sf-brand-dark);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--marke);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.05;
	padding: 0.32em 1.1em 0.4em 1.1rem;
	border-radius: 0 999px 999px 0;
}
:is(.sf-faq__content > details.wp-block-details:has(details), .wp-block-post-content > details.wp-block-details) > summary { list-style: none; }
:is(.sf-faq__content > details.wp-block-details:has(details), .wp-block-post-content > details.wp-block-details) > summary::-webkit-details-marker { display: none; }
/* Eigener Pfeil mit fester Breite: der Browser-Pfeil ist je nach Browser und Schrift verschieden breit */
:is(.sf-faq__content > details.wp-block-details:has(details), .wp-block-post-content > details.wp-block-details) > summary::before {
	content: "";
	display: inline-block;
	width: 0.62rem;
	height: 0.72rem;
	margin-right: 0.58rem;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	vertical-align: 0.08em;
	transition: transform 0.15s ease;
}
:is(.sf-faq__content > details.wp-block-details:has(details), .wp-block-post-content > details.wp-block-details)[open] > summary::before { transform: rotate(90deg); }

/* Aufklappen gleitet, die Höhe animiert assets/accordion.js. Der Inhalt blendet
   dabei weich ein, damit es nicht wie ein Sprung wirkt. */
.wp-block-details > *:not(summary) {
	animation: sf-fade-in 260ms ease both;
}
.wp-block-details > summary::before { transition: transform 200ms ease; }
@keyframes sf-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-details > *:not(summary) { animation: none; }
	.wp-block-details > summary::before { transition: none; }
}
}
:is(.sf-faq__content > details.wp-block-details:has(details), .wp-block-post-content > details.wp-block-details)[open] > summary { margin-bottom: 0.9rem; }


/* Absende-Button im Formular wie die Buttons im Inhalt: Marken-Pill mit Doppelrand */
.fluentform .ff-btn-submit {
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--marke) !important;
	font-weight: 400 !important;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.62em 1.5em 0.7em !important;
	outline: 2px solid currentColor;
	outline-offset: -6px;
}

/* Header-Buttons in der Marken-Optik: Pill, Versalien, Doppelrand beim gefüllten Button */
header .wp-block-button .wp-block-button__link {
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--marke);
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
header .wp-block-button:not(.sf-portal-button) .wp-block-button__link {
	outline: 2px solid currentColor;
	outline-offset: -5px;
}

/* EG-Kacheln: Homepage und Anmelden als Buttons, Kontaktadresse klein darunter */
.sf-eg-buttons { gap: 0.5rem; margin-top: 1.1rem; }
.sf-eg-buttons .wp-block-button__link { font-size: 1.05rem; padding: 0.5em 1.2em 0.56em; }
.sf-eg-mail { margin-top: 0.8rem; font-size: 0.9em; }
/* Hinweis auf der EG-Kachel, wenn es keine öffentliche Anmeldung gibt */
.sf-eg-note { margin-top: 0.9rem; margin-bottom: 0; font-family: var(--wp--preset--font-family--marke); font-size: 1.2rem; line-height: 1.2; color: var(--sf-brand-dark); }
/* Erste Knopfreihe der EG-Kacheln: Homepage und E-Mail teilen sich die Breite */
.sf-eg-buttons:not(.sf-eg-buttons--full) { flex-wrap: nowrap; }
.sf-eg-buttons:not(.sf-eg-buttons--full) .wp-block-button { flex: 1 1 0; min-width: 0; }
.sf-eg-buttons .wp-block-button__link { display: block; width: 100%; text-align: center; white-space: nowrap; padding-inline: 0.8em; }
/* Ohne min-width: 0 wächst die Kachel an den Knöpfen über ihre Rasterspalte hinaus */
.sf-eg-grid__cell > .sf-card, .sf-card__content { min-width: 0; }
/* Anmelde-Knopf der EG-Kacheln über die volle Breite, direkt unter Homepage und E-Mail */
.sf-eg-buttons--full { margin-top: 0.5rem; }
.sf-eg-buttons--full .wp-block-button { width: 100%; }
.sf-eg-buttons--full .wp-block-button__link { display: block; width: 100%; text-align: center; }
/* Briefsymbol im Mail-Knopf der EG-Kacheln */
.sf-button-icon { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 0.45em; }
/* Sehr schmale Geräte: Homepage und E-Mail wieder untereinander, sonst wird die Schrift abgeschnitten */
@media (max-width: 380px) {
	.sf-eg-buttons:not(.sf-eg-buttons--full) { flex-wrap: wrap; }
	.sf-eg-buttons:not(.sf-eg-buttons--full) .wp-block-button { flex: 1 1 100%; }
}

/* Breite Portal-Schaubilder: über die volle Inhaltsbreite statt schmal neben dem Text */
.sf-diagram { margin-top: 1.2rem; }
.sf-diagram img {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 16px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rahmen);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(45, 45, 45, 0.08);
}
.sf-diagram + .sf-diagram-text { margin-top: 0.8rem; }

/* Angabe der Gemeinschaft, Stil „In eigener Zeile“: sonst stehen mehrere Angaben nebeneinander. */
span.is-style-eigene-zeile { display: block; }

/* Der Kopf fährt mit, damit Menü und Portal-Knopf jederzeit erreichbar sind. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Angemeldet steht die WordPress-Leiste darüber, sonst verdeckt sie das Menü. */
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

/* Sprungnavigation: sanft gleiten und nicht unter dem Kopf landen.
   Die Kopfhöhe trägt das Skript als --sf-header ein, sie ist je nach Breite anders. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
:where(.wp-site-blocks) [id] { scroll-margin-top: calc(var(--sf-header, 4rem) + 1.25rem); }

/* Sprungziele auf der eigenen Seite sind nicht „die aktuelle Seite“: sonst wären
   alle gleichzeitig unterstrichen. Die Linie bekommt der Abschnitt, in dem man ist. */
.wp-block-navigation .wp-block-navigation-item__content[href*="#"][aria-current="page"]:not(.sf-current)::after {
	transform: scaleX(0);
	background: var(--wp--preset--color--marke);
}
.wp-block-navigation .wp-block-navigation-item__content[href*="#"]:hover::after,
.wp-block-navigation .wp-block-navigation-item__content[href*="#"]:focus-visible::after {
	transform: scaleX(1);
}
.wp-block-navigation .wp-block-navigation-item__content.sf-current::after {
	transform: scaleX(1);
	background: var(--wp--preset--color--marke-dunkel);
}

/* Kopfzeile: Abstände hier statt im Muster, damit der Kopf beim Scrollen
   schmaler werden kann. Die Klasse sf-compact setzt das Skript. */
.sf-header {
	padding: 0.85rem var(--wp--preset--spacing--large);
	transition: padding 0.18s ease;
}
.sf-header .custom-logo { transition: max-height 0.18s ease; }
header.sf-compact .sf-header {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}
header.sf-compact .sf-header .custom-logo {
	max-height: 52px;
	width: auto;
}
@media (prefers-reduced-motion: reduce) {
	.sf-header,
	.sf-header .custom-logo { transition: none; }
}

/* Kontaktknöpfe als Symbol: rund und gleich groß, die Beschriftung steckt im
   Hinweistext. Die Auswahl ist so genau, weil das Eltern-Theme den Knöpfen sonst
   seine eigene Form und Polsterung gibt. */
.wp-block-buttons .wp-block-button > .wp-block-button__link.sf-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
}
.wp-block-button__link.sf-icon-button > svg {
	display: block;
	width: 22px;
	height: 22px;
	flex: none;   /* sonst fällt das Symbol im Flex-Kasten auf null Breite zusammen */
}

/* Portal-Knopf: beim Überfahren wird die Fläche dunkelgrün. Das Symbol ist ein
   grünes Bild und wäre darauf fast unsichtbar, deshalb wird es weiß wie der Text. */
.sf-portal-button .wp-block-button__link img {
	transition: filter 0.15s ease;
}
.sf-portal-button .wp-block-button__link:hover img,
.sf-portal-button .wp-block-button__link:focus-visible img {
	filter: brightness(0) invert(1);
}

/* Link der Gemeinschaft als Textlink: soll aussehen wie jeder andere Link im Text. */
a.sf-eg-link { color: var(--wp--preset--color--marke-dunkel); }

/* Das Portal-Zeichen ist ein Bild, kein Zeichensatz-Symbol. Auf dem dunklen Knopf
   und beim Überfahren wird es weiß, damit es nicht in der Fläche verschwindet. */
.wp-block-button__link.sf-icon-button > img {
	display: block;
	width: 22px;
	height: 22px;
	filter: brightness(0) invert(1);
}
.is-style-button-light .wp-block-button__link.sf-icon-button > img,
.is-style-secondary-button .wp-block-button__link.sf-icon-button > img {
	filter: none;
}

/* Beim Sprung soll die neue Kopfhöhe sofort gelten, nicht erst nach dem Übergang. */
header.sf-instant .sf-header,
header.sf-instant .custom-logo { transition: none; }

/* Menü am Handy: sanft ein- und ausblenden statt springen. Das Ausblenden setzt
   die Klasse sf-closing, die assets/section-nav.js vor dem Schließen vergibt. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: sf-fade-in 220ms ease;
	}
	.wp-block-navigation__responsive-container.is-menu-open.sf-closing {
		opacity: 0;
		pointer-events: none;
		transition: opacity 220ms ease;
		animation: none;
	}
}
@keyframes sf-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Ein Element mit position: sticky macht immer eine eigene Stapelebene auf, auch
   ohne z-index. Die Überlagerung des Menüs bleibt darin gefangen und läge sonst
   unter der WordPress-Leiste, obwohl sie die höhere Ebene trägt. Solange das
   Menü offen ist, hebt der Kopf deshalb die ganze Ebene an. */
.wp-site-blocks > header.wp-block-template-part:has(.is-menu-open) { z-index: 100001; }

/* Netzkosten-Tabelle auf schmalen Geräten: „Netznutzungsentgelt" ist ein langes
   Wort, die Zahlen dürfen nicht umbrechen. Ohne engere Abstände und Silbentrennung
   wird die Tabelle breiter als das Fenster und rechts abgeschnitten. */
@media (max-width: 480px) {
	.sf-grid-cost__table { font-size: 0.8em; }
	.sf-grid-cost__table th,
	.sf-grid-cost__table td { padding: 0.3em 0.2em; }
	.sf-grid-cost__table tbody th {
		hyphens: auto;
		overflow-wrap: anywhere;
	}
}

/* Im Handy-Menü oben das Logo der Gemeinschaft: es sagt, wo man ist, und der
   Name steht ohnehin darin. Auf dem Grün wird es weiß gefiltert; das CI erlaubt
   das Logo ganz in Weiß auf Grün. Die Datei kommt aus den Site-Einstellungen. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 56px;
	background: var(--sf-logo, none) left center / contain no-repeat;
	filter: brightness(0) invert(1);
	pointer-events: none;
}
/* Platz für das Logo darüber. Die Auswahl spiegelt die von WordPress, sonst
   gewinnt deren Regel mit calc(24px + 2rem). */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: 98px;
}