/*
 * SLZ-Maschinenbau: Bausteine der Startseite als Block-Stile von Kernblöcken und eigene Blöcke (blocks/).
 * Gemessen an der alten Website: analyse/messwerte/startseite/ (Ablauf je Bild, Stufen, Umbrüche), DESIGN-IST.md.
 * Breiten über main.inhalt (Container, 100cqi = Fensterbreite ohne Bildlaufleiste, inhalt.css).
 *
 * Inhalt: Slider, Abschnitte der Startseite (Einleitung, Kacheln, Kontakt-Knopf, Video-Band, dunkle Fläche mit Akkordeon
 * und Zählern, Beitragskarussell), Einblendungen beim Hereinscrollen; Kontakt (Spalten, Liste mit Symbolen, Formular).
 */

/* ======================================================================================================== Slider
 * Gruppe mit Stil „Slider“ (volle Breite), darin je Slide ein Cover-Block: Bild, optional ein großer Titel (erster
 * Absatz) und das dunkle Feld rechts unten (letzter Absatz). Cover-Stil „Slide: Bild versetzt“ = Slides 2 und 3 (Bild
 * nach rechts versetzt, links bleibt ein weißer Streifen), ohne Stil wie Slide 1.
 * Ablauf wie live (analyse/messwerte/startseite/ablauf-1440.json, Kurven angepasst): Wechsel alle 7 s (assets/js/
 * slider.js setzt nur die Klassen). Neuer Slide (weißer Grund) blendet in 0,9 s über den alten, der alte dunkelt ab und
 * zoomt auf 0,8 (Helligkeit gemessen an den Bildfolgen, Stützwerte in den Keyframes). Bild des neuen Slides kommt ab 0,3 s von unten (110 % der eigenen Höhe, 1,18 s), ab 1,45 s Zoom
 * 0,8 → 1 (1,1 s). Titel ab 1,5 s Buchstabe für Buchstabe (je 0,59 s, alle 20 ms der nächste), Feld ab 2,06 s (mit
 * Titel) bzw. 2,31 s von unten (1,01 s). Beim Wechsel blenden Titel und Feld in 0,23 s aus.
 * Größe in sechs Stufen wie live (Slider Revolution): Höhe = Breite × Verhältnis (aufgerundet), Bildebene, Titel und
 * Feld je Stufe (analyse/messwerte/startseite/slider-stufen.json).
 */

.inhaltstext .is-style-slider {
	--quart-out: cubic-bezier(0.25, 1, 0.5, 1);
	--quart-in-out: cubic-bezier(0.76, 0, 0.24, 1);
	--quart-in: cubic-bezier(0.5, 0, 0.75, 0);
	/* Stufe bis 494 px (Raster 480 × 330, darüber nicht größer, Bild mittig) */
	--s: min(1px, 100cqi / 480);
	--mitte: max(0px, (100cqi - 480px) / 2);
	--hoehe: min(330px, round(up, 100cqi * 0.6875, 1px));
	--bild-x: calc(-70 * var(--s) + var(--mitte));
	--bild-y: 0px;
	--bild-b: calc(700 * var(--s));
	--bild-h: calc(392 * var(--s));
	--titel-groesse: round(min(30px, 100cqi * 30 / 480), 1px);
	--titel-schatten: calc(100cqi / 480) calc(100cqi / 480) calc(100cqi / 480);
	--feld-schrift: 24px/28px;
	--feld-abstand: normal;
	--feld-polster: 20px 28px 16px;
	position: relative;
	height: var(--hoehe);
	margin-block: 0;
	overflow: hidden;
	background: #fff;

	& > .wp-block-cover {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: visible;
		background: #fff;
		visibility: hidden;
	}
	& > .wp-block-cover.is-style-slide-versetzt {
		--bild-x: calc(-620 * var(--s) + var(--mitte));
		--bild-y: calc(-100 * var(--s));
		--bild-b: calc(1600 * var(--s));
		--bild-h: calc(764 * var(--s));
	}
	& > .wp-block-cover > .wp-block-cover__background { display: none; }
	& > .wp-block-cover > .wp-block-cover__image-background {
		position: absolute;
		inset: var(--bild-y) auto auto var(--bild-x);
		width: var(--bild-b);
		max-width: none;
		height: var(--bild-h);
		max-height: none;
		margin: 0;
		object-fit: cover;
		object-position: 50% 50%;
	}
	& .wp-block-cover__inner-container { position: static; width: auto; }

	/* Großer Titel (erster Absatz, nur wenn danach noch das Feld kommt): links 10,42 %, senkrecht mittig */
	& .wp-block-cover__inner-container > p:not(:last-child) {
		position: absolute;
		top: 50%;
		left: 10.4167%;
		z-index: 2;
		margin: 0;
		color: #fff;
		font: 400 var(--titel-groesse)/1 var(--schrift-titel);
		letter-spacing: calc(-100cqi / 1920);
		text-align: center;
		text-shadow: rgba(0, 0, 0, 0.75) var(--titel-schatten);
		text-transform: uppercase;
		white-space: nowrap;
		translate: 0 -50%;
	}
	& .slide__zeichen { display: inline-block; }

	/* Feld rechts unten (letzter Absatz) */
	& .wp-block-cover__inner-container > p:last-child {
		position: absolute;
		right: -1px;
		bottom: 0;
		z-index: 2;
		margin: 0;
		padding: var(--feld-polster);
		background: #171A21;
		color: #fff;
		font: 400 var(--feld-schrift) var(--schrift-titel);
		letter-spacing: var(--feld-abstand);
		text-transform: uppercase;
		white-space: nowrap;
	}
	& > .wp-block-cover > .ki-hinweis { top: 12px; right: 12px; }

	/* Ablauf */
	& > .wp-block-cover:is(.ist-aktiv, .ist-vorher) { visibility: visible; }
	& > .ist-aktiv { z-index: 2; animation: slz-slide-wechsel 0.9s linear both; }
	& > .ist-vorher { z-index: 1; }
	& > .ist-aktiv > .wp-block-cover__image-background {
		animation:
			slz-slide-bild-hoch 1.18s var(--quart-out) 0.3s both,
			slz-slide-bild-zoom 1.1s var(--quart-in-out) 1.45s both;
	}
	& > .ist-aktiv .wp-block-cover__inner-container > p:not(:last-child) { animation: slz-slide-ein 2.11s var(--quart-in-out) 1.507s both; }
	& > .ist-aktiv .slide__zeichen { animation: slz-slide-ein 0.59s var(--quart-in-out) calc(1.507s + var(--i) * 20ms) both; }
	& > .ist-aktiv .wp-block-cover__inner-container > p:last-child { animation: slz-slide-feld 1.01s var(--quart-out) 2.307s both; }
	& > .ist-aktiv:has(.wp-block-cover__inner-container > p:nth-child(2)) .wp-block-cover__inner-container > p:last-child { animation-delay: 2.057s; }
	& > .ist-aktiv > .ki-hinweis { animation: slz-slide-ein 0.3s ease 1.2s both; }
	& > .ist-vorher > .wp-block-cover__image-background { animation: slz-slide-bild-weg 0.9s var(--quart-in-out) both; }
	& > .ist-vorher .wp-block-cover__inner-container > p { animation: slz-slide-aus 0.23s var(--quart-in) both; }
	/* Der alte Slide dunkelt ab, während der neue (weißer Grund) darüber einblendet */
	& > .ist-vorher::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 3;
		background: #000;
		animation: slz-slide-dunkel 0.9s linear both;
	}
}

@keyframes slz-slide-ein { from { opacity: 0; } }
/* Überblendung und Abdunklung mit den aus den Live-Bildern gemessenen Stützwerten (nach 0,31 und 0,59 s) */
@keyframes slz-slide-wechsel { 0% { opacity: 0; } 34% { opacity: 0.081; } 66% { opacity: 0.825; } 100% { opacity: 1; } }
@keyframes slz-slide-dunkel { 0% { opacity: 0; } 34% { opacity: 0.19; } 66% { opacity: 0.54; } 100% { opacity: 1; } }
@keyframes slz-slide-aus { to { opacity: 0; } }
@keyframes slz-slide-bild-hoch { from { translate: 0 110%; scale: 0.8; } to { translate: 0 0; scale: 0.8; } }
@keyframes slz-slide-bild-zoom { from { scale: 0.8; } to { scale: 1; } }
@keyframes slz-slide-bild-weg { to { scale: 0.8; } }
@keyframes slz-slide-feld { from { translate: 0 100%; } }

/* Stufe 495–784 px (Raster 778 × 560) */
@container (width >= 495px) {
	.inhaltstext .is-style-slider {
		--s: calc(100cqi / 778);
		--mitte: 0px;
		--hoehe: round(up, 100cqi * 560 / 778, 1px);
		--bild-x: calc(-322 * var(--s));
		--bild-y: calc(-40 * var(--s));
		--bild-b: calc(1500 * var(--s));
		--bild-h: calc(839 * var(--s));
		--titel-groesse: round(100cqi * 45 / 778, 1px);
		--titel-schatten: calc(100cqi * 2 / 778) calc(100cqi * 2 / 778) calc(100cqi * 3 / 778);
		--feld-schrift: 32px/40px;
		--feld-polster: 24px 40px 20px;
		& > .wp-block-cover.is-style-slide-versetzt {
			--bild-x: calc(-422 * var(--s));
			--bild-y: calc(-40 * var(--s));
			--bild-b: calc(1600 * var(--s));
			--bild-h: calc(764 * var(--s));
		}
	}
}
/* Stufe 785–1239 px (Raster 1024 × 427): Bild so breit wie der Slider, Höhe nach Seitenverhältnis, oben bündig */
@container (width >= 785px) {
	.inhaltstext .is-style-slider {
		--hoehe: round(up, 100cqi * 5 / 12, 1px);
		--bild-x: calc(-0.0512 * 100cqi);
		--bild-y: 0px;
		--bild-b: calc(100cqi - 1px);
		--bild-h: auto;
		--titel-groesse: round(100cqi * 43 / 1024, 1px);
		--titel-schatten: calc(100cqi * 7 / 1920) calc(100cqi * 7 / 1920) calc(100cqi * 10 / 1920);
		--feld-schrift: 32px/40px;
		--feld-abstand: -1px;
		--feld-polster: 38px 300px 34px 80px;
		& > .wp-block-cover.is-style-slide-versetzt { --bild-x: 1px; --bild-y: 0px; --bild-b: calc(100cqi - 1px); --bild-h: auto; }
	}
}
@container (width >= 1135px) {
	.inhaltstext .is-style-slider { --feld-schrift: 57px/57px; }
}
/* Stufe 1240–1450 px (Raster 1440 × 560, darüber nicht größer) */
@container (width >= 1240px) {
	.inhaltstext .is-style-slider {
		--s: min(1px, 100cqi / 1440);
		--hoehe: min(560px, round(up, 100cqi * 560 / 1440, 1px));
		--bild-x: calc(-460 * var(--s));
		--bild-y: calc(-400 * var(--s));
		--bild-b: calc(2000 * var(--s));
		--bild-h: calc(1120 * var(--s));
		--titel-groesse: round(min(60px, 100cqi * 60 / 1440), 1px);
		--titel-schatten: calc(5 * var(--s)) calc(5 * var(--s)) calc(7 * var(--s));
		--feld-schrift: 40px/52px;
		--feld-polster: 28px 160px 24px 60px;
		& > .wp-block-cover.is-style-slide-versetzt { --bild-x: calc(140 * var(--s)); --bild-y: 0px; --bild-b: calc(1600 * var(--s)); --bild-h: calc(764 * var(--s)); }
	}
}
@container (width > 1440px) {
	.inhaltstext .is-style-slider {
		--bild-x: 120px;
		& > .wp-block-cover.is-style-slide-versetzt { --bild-x: 120px; }
	}
}
/* ab 1451 px (Raster 1920 × 800): Bild 120 px nach rechts versetzt, so breit wie der Slider, oben bündig */
@container (width >= 1451px) {
	.inhaltstext .is-style-slider {
		--hoehe: round(up, 100cqi * 5 / 12, 1px);
		--bild-x: 120px;
		--bild-y: 0px;
		--bild-b: calc(100cqi - 1px);
		--bild-h: auto;
		--titel-groesse: round(100cqi * 80 / 1920, 1px);
		--titel-schatten: calc(100cqi * 7 / 1920) calc(100cqi * 7 / 1920) calc(100cqi * 10 / 1920);
		--feld-schrift: 57px/57px;
		--feld-polster: 38px 300px 34px 80px;
		& > .wp-block-cover.is-style-slide-versetzt { --bild-x: 120px; --bild-y: 0px; --bild-b: calc(100cqi - 1px); --bild-h: auto; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.inhaltstext .is-style-slider * ,
	.inhaltstext .is-style-slider > *::after { animation: none !important; }
	.inhaltstext .is-style-slider > .ist-vorher { visibility: hidden; }
}

/* ======================================================================================================== Startseite
 * Abschnitte der Startseite (front-page.php, Inhalt .startseite): Abstand „groß“ wie live 120 px (1280–1439: 96,2,
 * 1024–1279: 90, 768–1023: 80, 480–767: 60, bis 479: 54); Inhaltsbreite 1290 px (1280–1439: 1100 wie live, darunter
 * Fensterbreite minus Rand). Werte: analyse/messwerte/inhalt/startseite--start.json, startseite/umbrueche.json. */

/* Abstände und Breite gelten auch im Editor (ohne Bewegung), damit die Redaktion die Abschnitte wie auf der Website sieht */
:is(.startseite, .editor-styles-wrapper) {
	--abstand: 120px;
	--innen: min(1290px, 100cqi - 2 * var(--rand));
}
.startseite {
	&.inhaltstext > * { margin-block: 0; }
	& > .alignfull { margin-inline: 0; }
	& > :not(.alignfull) { width: var(--innen); margin-inline: auto; }
}
@media (max-width: 1439px) { :is(.startseite, .editor-styles-wrapper) { --abstand: 96.2px; --innen: 1100px; } }
@media (max-width: 1279px) { :is(.startseite, .editor-styles-wrapper) { --abstand: 90px; --innen: calc(100cqi - 2 * var(--rand)); } }
@media (max-width: 1023px) { :is(.startseite, .editor-styles-wrapper) { --abstand: 80px; } }
@media (max-width: 767px) { :is(.startseite, .editor-styles-wrapper) { --abstand: 60px; } }
@media (max-width: 479px) { :is(.startseite, .editor-styles-wrapper) { --abstand: 54px; } }

/* ---------- Unterzeile über Überschriften („Wer wir sind“, „Unser Blog“), Name und Funktion ---------- */
:is(.inhaltstext, .editor-styles-wrapper) p.is-style-unterzeile {
	margin: 0 0 24.7px;
	color: var(--farbe-ueberschrift);
	font: 400 19px/21px var(--schrift-titel);
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
:is(.inhaltstext, .editor-styles-wrapper) p.is-style-name {
	margin: 0;
	color: var(--farbe-ueberschrift);
	font: 400 19px/19px var(--schrift-titel);
	letter-spacing: 0.35px;
	text-transform: uppercase;
}
:is(.inhaltstext, .editor-styles-wrapper) p.is-style-funktion {
	margin: 3px 0 0;
	color: #797C7F;
	font: 400 18px/28.9px var(--schrift-titel);
	text-transform: uppercase;
}
@media (max-width: 1279px) {
	:is(.inhaltstext, .editor-styles-wrapper) p.is-style-unterzeile { margin-bottom: 16.2px; font-size: 18px; }
	:is(.inhaltstext, .editor-styles-wrapper) p.is-style-name { font-size: 18px; line-height: 18px; }
}
@media (max-width: 1023px) {
	:is(.inhaltstext, .editor-styles-wrapper) p.is-style-unterzeile { margin-bottom: 10.8px; }
	:is(.inhaltstext, .editor-styles-wrapper) p.is-style-funktion { line-height: 26.9px; }
}
@media (max-width: 767px) {
	:is(.inhaltstext, .editor-styles-wrapper) p.is-style-unterzeile { margin-bottom: 10.2px; font-size: 17px; line-height: 20px; }
	:is(.inhaltstext, .editor-styles-wrapper) p.is-style-name { font-size: 17px; line-height: 17px; }
	:is(.inhaltstext, .editor-styles-wrapper) p.is-style-funktion { font-size: 15px; line-height: 23px; }
}

/* ---------- Abschnitt mit großem Abstand (Einleitung, Aktuelle Nachrichten) ---------- */
:is(.startseite, .editor-styles-wrapper) .is-style-abschnitt {
	padding-block: var(--abstand);
	text-align: center;

	& > * { margin-inline: auto; }
	& :is(h1, h2) { margin-block: 0; font-size: 51px; line-height: 51px; letter-spacing: 0; }
	/* Einleitung: H1 in 45 px auf 54 px Zeilen (live Text-Span in der 51-px-H1), Spalte 810 px */
	& h1 { max-width: 810px; font-size: 45px; line-height: 54px; }
	& h1 + .is-style-name { margin-top: 27px; }
	& h2 + * { margin-top: 45px; }
}
.schreibeffekt { color: #4E93C4; }
@media (max-width: 1279px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-abschnitt {
		& :is(h1, h2) { font-size: 46px; line-height: 46px; }
		& h1 { max-width: 656px; font-size: 35px; line-height: 46px; }
		& h1 + .is-style-name { margin-top: 15px; }
		&:has(h1) { padding-bottom: calc(var(--abstand) - 5px); }
		& h2 + * { margin-top: 35px; }
	}
}
@media (max-width: 1023px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-abschnitt {
		& :is(h1, h2) { font-size: 38px; line-height: 42px; }
		& h1 { max-width: 80cqi; font-size: 35px; line-height: 42px; } /* 80 % der Fensterbreite */
		& h2 + * { margin-top: 30px; }
	}
}
@media (max-width: 767px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-abschnitt {
		& :is(h1, h2) { font-size: 30px; line-height: 34px; }
		& h1 { max-width: 336px; font-size: 25px; line-height: 30px; }
		& h1 + .is-style-name { margin-top: 10px; }
		& h2 + * { margin-top: 20px; }
	}
}
@media (max-width: 479px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-abschnitt {
		& h2 { font-size: 26px; line-height: 30px; }
		& h1 { max-width: 80cqi; }
	}
}

/* ---------- Kacheln (Gruppe „Kacheln“ mit Cover-Blöcken, Stil „Kachel“) ----------
 * 4 nebeneinander (Seitenverhältnis 300 × 453), ab 1279 px 2 (1 : 1,1, bis 767: 1 : 0,95), bis 599 px untereinander.
 * Bild mit 30 % Abdunklung, Titel unten (Bebas 28/32,5), darunter „Leistungsbereich“; beim Überfahren rückt der Text
 * 30 px hoch und die Unterzeile blendet ein (0,3 s). Die ganze Kachel ist der Link des Titels. */
:is(.startseite, .editor-styles-wrapper) .is-style-kacheln {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}
:is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-kachel {
	position: relative;
	aspect-ratio: 300 / 453;
	min-height: 0;
	margin: 0;
	padding: 39.1px;
	align-items: flex-end;
	justify-content: flex-start;
	background: #05080D;
	color: #fff;
	text-align: left;
	overflow: hidden;

	& .wp-block-cover__inner-container { translate: 0 30px; transition: translate 0.3s ease-out; }
	& :is(h2, h3, h4, h5, h6) {
		margin: 0;
		color: #fff;
		font: 400 27.999px/32.4788px var(--schrift-titel);
		letter-spacing: 0.35px;
	}
	& :is(h2, h3, h4, h5, h6) a { color: inherit; }
	/* ganze Kachel klickbar */
	& :is(h2, h3, h4, h5, h6) a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
	& p {
		margin: 4.8px 0 0;
		color: rgba(255, 255, 255, 0.8);
		font: 400 16px/24px var(--schrift-text);
		opacity: 0;
		transition: opacity 0.3s ease-out;
	}
	&:is(:hover, :focus-within) .wp-block-cover__inner-container { translate: 0 0; }
	&:is(:hover, :focus-within) p { opacity: 1; }
}
@media (max-width: 1439px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-kachel :is(h2, h3, h4, h5, h6) { font-size: 25.5px; line-height: 29.58px; }
}
@media (max-width: 1279px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-kacheln { grid-template-columns: repeat(2, 1fr); }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-kachel { aspect-ratio: 1 / 1.1; padding: 34px; }
}
@media (max-width: 767px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-kacheln { gap: 20px; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-kachel { aspect-ratio: 1 / 0.95; padding: 27px; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-kachel :is(h2, h3, h4, h5, h6) { font-size: 24px; line-height: 27.84px; }
}
@media (max-width: 599px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-kacheln { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-kachel {
		& :is(h2, h3, h4, h5, h6) { font-size: 22.5px; line-height: 26.1px; }
		& p { font-size: 15px; line-height: 22.5px; }
	}
}

/* Knopf unter den Kacheln: 50 px darunter (bis 1279: 70, bis 767: 50), danach Abstand „groß“ (inkl. 10 px Rand) */
:is(.startseite, .editor-styles-wrapper) .is-style-kacheln + .wp-block-buttons { justify-content: center; margin-block: 50px var(--abstand); padding-left: 4.9px; } /* live 2,45 px rechts der Mitte */
@media (max-width: 1279px) { :is(.startseite, .editor-styles-wrapper) .is-style-kacheln + .wp-block-buttons { margin-top: 70px; } }
@media (max-width: 767px) { :is(.startseite, .editor-styles-wrapper) .is-style-kacheln + .wp-block-buttons { margin-top: 50px; } }

/* ---------- Knopf-Stil „Dunkel mit Briefumschlag“ (Kontakt) ----------
 * Wie live: #1E2831, Bebas 18/22, 202 × 60 (bis 1279: 188 × 56, bis 767: 166 × 52). Beim Überfahren Fläche #28333D,
 * Inhalt rückt 18,7 px nach links, rechts blendet ein Pfeil ein (0,3 s). */
:is(.inhaltstext, .editor-styles-wrapper) .wp-block-button.is-style-kontakt .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 20px 64px 18px;
	background: var(--farbe-ueberschrift);
	transition: background-color 0.3s ease, padding 0.3s ease;

	&::before {
		content: "";
		width: 15.75px;
		height: 12.26px;
		margin-right: 9.35px;
		background: currentColor;
		mask: url("../icons/eigen-umschlag.svg") center / contain no-repeat;
	}
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 30px;
		width: 14px;
		height: 9.8px;
		background: currentColor;
		mask: url("../icons/eigen-pfeil-rechts.svg") center / contain no-repeat;
		opacity: 0;
		translate: 0 -50%;
		transition: opacity 0.3s ease;
	}
	&:is(:hover, :focus-visible) { padding-inline: 45.3px 82.7px; background: #28333D; }
	&:is(:hover, :focus-visible)::after { opacity: 1; }
}
@media (max-width: 1279px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-button.is-style-kontakt .wp-block-button__link { padding: 18px 57px 16px; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-button.is-style-kontakt .wp-block-button__link:is(:hover, :focus-visible) { padding-inline: 38.3px 75.7px; }
}
@media (max-width: 767px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-button.is-style-kontakt .wp-block-button__link { padding: 16px 46px 14px; font-size: 18px; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-button.is-style-kontakt .wp-block-button__link:is(:hover, :focus-visible) { padding-inline: 27.3px 64.7px; }
}

/* ---------- Video-Band (Cover-Stil „Video-Band“) mit Knopf „Play“ ----------
 * Volle Breite, Bild „cover“ mittig, 581 px hoch (bis 1279: 461, bis 1023: 421, bis 767: 422 + 41 oben), Knopf mittig.
 * „Play“: weißes Quadrat 101 px mit Rahmen 2 px #54595F, Bebas 14, Abstand 1,8 px (bis 767: 81 px). */
:is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-videoband {
	min-height: 581px;
	margin: 0;
	padding: 0;
	& .wp-block-buttons { justify-content: center; margin: 0; }
}
:is(.inhaltstext, .editor-styles-wrapper) .wp-block-button.is-style-play .wp-block-button__link {
	display: block;
	width: 101px;
	height: 101px;
	padding: 0;
	border: 2px solid #54595F;
	background: #fff;
	color: #54595F;
	font: 400 14px/97px var(--schrift-titel);
	letter-spacing: 1.8px;
	&:is(:hover, :focus-visible) { background: #fff; color: #54595F; }
}
@media (max-width: 1279px) { :is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-videoband { min-height: 461px; } }
@media (max-width: 1023px) { :is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-videoband { min-height: 421px; } }
@media (max-width: 767px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-cover.is-style-videoband { min-height: 463px; padding-top: 41px; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-button.is-style-play .wp-block-button__link { width: 81px; height: 81px; line-height: 77px; }
}

/* ---------- Dunkle Fläche („Unsere Experten“) ----------
 * #171A21, Abstand „groß“ oben und unten (bis 767: oben zusätzlich 41 px). Zwei Spalten 45 : 55, links ohne Innenrand
 * (Text beginnt 15 px vor dem Seitenrand, wie live), rechts Bild (520 : 599, rechtsbündig) und die Zahlen, die das Bild
 * links unten überlappen. Akkordeon: Titel Bebas 19/22, Plus/Minus links, Trennlinien #4A4C52, einer offen,
 * Auf- und Zuklappen 0,4 s wie live (Kernblock „Details“ mit gemeinsamem Namen). */
:is(.startseite, .editor-styles-wrapper) .is-style-dunkel {
	padding-block: var(--abstand);
	background: #171A21;
	color: var(--farbe-fuss-text);

	/* Spalten nebeneinander bis 768 px (live; WordPress stellt sie sonst schon unter 782 px untereinander) */
	& > .wp-block-columns {
		flex-direction: row;
		gap: 0;
		width: calc(var(--innen) + 30px);
		margin: 0 auto;
	}
	& .wp-block-column:first-child { flex: none; width: 45%; padding-right: 5.4%; } /* 12 % der Spalte */
	& .wp-block-column:last-child { flex: none; width: 55%; padding-inline: 15px; }
	& h2 { margin: 63px 0 17px; color: var(--farbe-hell); font-size: 51px; line-height: 51px; letter-spacing: 0; }
	& .wp-block-column:first-child > :not(h2) { margin-right: 50px; }
	& .wp-block-image { display: block; width: 74.58%; margin: 0 0 0 auto; }
	& .wp-block-image img { display: block; width: 100%; aspect-ratio: 520 / 599; object-fit: cover; }
	/* Bild und Zahlen in derselben Rasterzelle: die Spalte ist so hoch wie das Bild, die Zahlen liegen unten links darüber
	   (live 228 px über der Bildunterkante beginnend, also 58,9 px darüber endend) */
	& .wp-block-column:last-child { display: grid; align-content: start; }
	& .wp-block-column:last-child > * { grid-area: 1 / 1; }
	& .is-style-zahlen {
		position: relative;
		z-index: 1;
		display: flex;
		align-self: end;
		gap: 20px;
		margin: 0 0 58.9px;
		padding-right: 10%;
	}
	& .is-style-zahlen > * { flex: 1 1 0; margin: 0; }
}
:is(.inhaltstext, .editor-styles-wrapper) .is-style-dunkel .wp-block-details {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #4A4C52;
	color: var(--farbe-fuss-text);
	interpolate-size: allow-keywords;

	&:first-of-type { border-top: 0; }
	& summary {
		position: relative;
		padding: 25px 0 25px 37px;
		color: var(--farbe-hell);
		font: 400 19px/22px var(--schrift-titel);
		letter-spacing: 0.35px;
		text-transform: uppercase;
		list-style: none;
		cursor: pointer;
	}
	& summary::-webkit-details-marker { display: none; }
	& summary::before, & summary::after {
		content: "";
		position: absolute;
		top: 35.05px;
		left: 0;
		width: 13.125px;
		height: 1.9px;
		margin-top: 0;
		background: currentColor;
	}
	& summary::after { transform: rotate(90deg); transition: opacity 0.2s ease; }
	&[open] summary::after { opacity: 0; }
	& > :not(summary) { margin: -14px 0 0; padding-bottom: 20px; }
	&::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 0.4s cubic-bezier(0.37, 0, 0.63, 1), content-visibility 0.4s allow-discrete;
	}
	&[open]::details-content { block-size: auto; }
}
@media (max-width: 1279px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-dunkel {
		& .wp-block-column:first-child { padding-right: 2.7%; } /* 6 % der Spalte */
		& h2 { margin: 35px 0 10px; font-size: 46px; line-height: 46px; }
		& .wp-block-column:first-child > :not(h2) { margin-right: 0; }
		& .wp-block-image { width: 80%; }
		& .is-style-zahlen { margin-bottom: 8.1px; padding-right: 8%; }
	}
	:is(.inhaltstext, .editor-styles-wrapper) .is-style-dunkel .wp-block-details {
		& summary { padding-block: 14px; }
		& summary::before, & summary::after { top: 24.05px; }
		& > :not(summary) { padding: 10px 0 18.2px; }
	}
}
@media (max-width: 1023px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-dunkel h2 { font-size: 38px; line-height: 42px; }
	:is(.startseite, .editor-styles-wrapper) .is-style-dunkel .is-style-zahlen { margin-bottom: -37.3px; } /* live reichen die Zahlen unter das Bild */
}
@media (max-width: 767px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-dunkel {
		padding-top: calc(var(--abstand) + 41px);
		& > .wp-block-columns { flex-direction: column; gap: 0; width: calc(100cqi - 2 * var(--rand) + 20px); }
		& .wp-block-column:first-child { width: auto; padding-right: 6%; }
		& .wp-block-column:last-child { width: auto; margin-top: 20px; padding-inline: 10px; }
		& h2 { margin: 20px 0 10px; font-size: 30px; line-height: 34px; }
		& .wp-block-image { width: 100%; }
		& .is-style-zahlen { margin-bottom: 28px; padding-right: 0; }
	}
}
@media (max-width: 479px) {
	:is(.startseite, .editor-styles-wrapper) .is-style-dunkel h2 { font-size: 26px; line-height: 30px; }
}

/* ---------- Zähler (Block slz/zaehler) ----------
 * Kachel Orange #EC3D08 bzw. Gelb #F4C212, Titel Bebas 19/26,6, Zahl Bebas 61,4 (bis 1279: 56,1, bis 1023: 51,
 * bis 767: 44,8, bis 479: 42), Großbuchstaben. Ziffernwalzen aus blocks/zaehler/view.js. */
:is(.inhaltstext, .editor-styles-wrapper) .zaehler {
	padding: 31.31px 39.14px 41.31px;
	background: var(--farbe-akzent);
	color: var(--farbe-hell);
	text-align: left;

	&.is-style-gelb { background: #F4C212; }
	& .zaehler__titel { margin: 0; font: 400 19px/26.6px var(--schrift-titel); text-transform: uppercase; }
	& .zaehler__zahl { margin: 8.5px 0 0; font: 400 61.387px/1 var(--schrift-titel); letter-spacing: -0.1px; text-transform: uppercase; }
	& .zaehler__anzeige { display: inline-flex; }
	& .zaehler__ziffer { display: inline-block; width: 0.399em; height: 1em; overflow: hidden; text-align: center; }
	& .zaehler__ziffer:first-child { margin-left: -0.08em; }
	& .zaehler__walze { display: flex; flex-direction: column; }
}
@media (max-width: 1279px) {
	:is(.inhaltstext, .editor-styles-wrapper) .zaehler {
		padding: 20px 20px 25.5px;
		& .zaehler__titel { font-size: 18px; line-height: 25.2px; }
		& .zaehler__zahl { margin-top: 5px; font-size: 56.1px; }
	}
}
@media (max-width: 1023px) {
	:is(.inhaltstext, .editor-styles-wrapper) .zaehler { padding-bottom: 25px; & .zaehler__zahl { font-size: 51px; } }
}
@media (max-width: 767px) {
	:is(.inhaltstext, .editor-styles-wrapper) .zaehler { padding-bottom: 26.2px; & .zaehler__titel { font-size: 16px; line-height: 20.8px; } & .zaehler__zahl { margin-top: 3px; font-size: 44.8px; } }
}
@media (max-width: 479px) {
	:is(.inhaltstext, .editor-styles-wrapper) .zaehler .zaehler__zahl { font-size: 42px; }
}

/* ---------- Beitragskarussell (Block slz/beitragskarussell) ----------
 * 3 Karten mit 30 px Abstand (unter 700 px: 2, unter 495 px: 1, unter 768 px Abstand 20), Titel Bebas 28/33,6 (bis
 * 1279: 24/28,8, bis 1023: 20/24), Datum Roboto 13/19,5 #909090; Punkte 8 px, 12 px Abstand, aktiv #EC3D08,
 * 63,4 px unter der höchsten Karte (bis 494 px: 29,5). Bewegung 0,6 s „ease“ (view.js). */
:is(.inhaltstext, .editor-styles-wrapper) .karussell {
	--sichtbar: 3;
	--luecke: 30px;
	text-align: left;

	& .karussell__fenster { overflow: hidden; }
	& .karussell__bahn {
		display: flex;
		gap: var(--luecke);
		translate: calc(var(--stelle, 0) * (100% + var(--luecke)) / var(--sichtbar) * -1) 0;
		transition: translate 0.6s ease;
	}
	& .karussell__karte { flex: 0 0 calc((100% - (var(--sichtbar) - 1) * var(--luecke)) / var(--sichtbar)); min-width: 0; }
	& .karussell__titel {
		margin: 0;
		font: 400 28px/33.6px var(--schrift-titel);
		letter-spacing: 0.58px;
	}
	& .karussell__titel a { color: var(--farbe-ueberschrift); }
	& .karussell__datum { margin: 11.7px 0 0; font: 400 13px/19.5px var(--schrift-text); }
	& .karussell__datum a { color: var(--farbe-meta); }
	& .karussell__punkte { display: flex; justify-content: center; gap: 12px; margin-top: 63.4px; line-height: 0; }
	& .karussell__punkte[hidden] { display: none; }
	& .karussell__punkt {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 2px solid #E2E1E0;
		border-radius: 50%;
		background: #E2E1E0;
		cursor: pointer;
		transition: border-color 0.3s, background-color 0.3s;
	}
	& .karussell__punkt[aria-current="true"] { border-color: var(--farbe-akzent); background: var(--farbe-akzent); }
}
@media (max-width: 1279px) {
	:is(.inhaltstext, .editor-styles-wrapper) .karussell .karussell__titel { font-size: 24px; line-height: 28.8px; }
}
@media (max-width: 1023px) {
	:is(.inhaltstext, .editor-styles-wrapper) .karussell {
		& .karussell__titel { font-size: 20px; line-height: 24px; }
		& .karussell__datum { margin-top: 8px; }
	}
}
@media (max-width: 767px) { :is(.inhaltstext, .editor-styles-wrapper) .karussell { --luecke: 20px; } }
@media (max-width: 699px) { :is(.inhaltstext, .editor-styles-wrapper) .karussell { --sichtbar: 2; } }
@media (max-width: 494px) { :is(.inhaltstext, .editor-styles-wrapper) .karussell { --sichtbar: 1; & .karussell__punkte { margin-top: 29.5px; } } }

/* ---------- Einblendungen beim Hereinscrollen (assets/js/einblenden.js setzt ist-sichtbar) ----------
 * Wie live: Unterzeile und H1 der Einleitung von links (0,75 s „ease“, 0,5 s verzögert), Name und Funktion von rechts,
 * Kacheln und Beitragskarten von unten (60 px, 0,75 s), je Kachel 0,1 s später. Nur mit JavaScript verborgen. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.inhaltstext {
		& .is-style-abschnitt > :is(.is-style-unterzeile, h1, .is-style-name, .is-style-funktion):not(.ist-sichtbar),
		& .is-style-kacheln > :not(.ist-sichtbar),
		& .karussell__karte:not(.ist-sichtbar) { opacity: 0; }
		& .is-style-abschnitt > :is(.is-style-unterzeile, h1).ist-sichtbar { animation: slz-von-links 0.75s ease 0.5s both; }
		& .is-style-abschnitt > :is(.is-style-name, .is-style-funktion).ist-sichtbar { animation: slz-von-rechts 0.75s ease both; }
		& :is(.is-style-kacheln > *, .karussell__karte).ist-sichtbar { animation: slz-von-unten 0.75s ease both; }
		& :is(.is-style-kacheln > *, .karussell__karte):nth-child(2) { animation-delay: 0.1s; }
		& :is(.is-style-kacheln > *, .karussell__karte):nth-child(3) { animation-delay: 0.2s; }
		& :is(.is-style-kacheln > *, .karussell__karte):nth-child(4) { animation-delay: 0.3s; }
	}
}
@keyframes slz-von-links { from { opacity: 0; translate: -100% 0; } }
@keyframes slz-von-rechts { from { opacity: 0; translate: 100% 0; } }
@keyframes slz-von-unten { from { opacity: 0; translate: 0 60px; } }

/* ======================================================================================================== Kontakt
 * Seite „Kontakt“ (Seite 1453): Spalten mit Stil „Kontakt“ (links Text und Liste mit Symbolen, rechts der Block
 * Kontaktformular), oben und unten 50 px (analyse/messwerte/inhalt/kontakt--kontakt.json). */

/* Seite mit Kontakt-Spalten als erstem Block: 50 px Abstand statt des Seitenrahmens */
.seite:has(> .seite__inhalt > .is-style-kontakt:first-child) { padding-block: 50px; }

:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-kontakt {
	flex-direction: row;
	gap: 0;
	margin: 0;

	& > .wp-block-column:first-child { flex: none; width: 50%; padding-right: 14.5%; } /* 29 % der Spalte */
	& > .wp-block-column:last-child { flex: none; width: 50%; padding-left: 15px; }
	& .is-style-unterzeile + :is(h1, h2) { margin: 0; font-size: 51px; line-height: 51px; letter-spacing: 0; }
	& :is(h1, h2) + p { margin: 20.4px 0 0; }
	& :is(h1, h2) + p + ul { margin-top: 30px; }
}
@media (max-width: 1279px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-kontakt {
		& > .wp-block-column:first-child { padding-right: 6%; } /* 12 % der Spalte */
		& .is-style-unterzeile + :is(h1, h2) { font-size: 46px; line-height: 46px; }
		& :is(h1, h2) + p { margin-top: 17px; }
	}
}
@media (max-width: 1023px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-kontakt .is-style-unterzeile + :is(h1, h2) { font-size: 38px; line-height: 42px; }
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-kontakt :is(h1, h2) + p { margin-top: 13.6px; }
}
@media (max-width: 767px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-kontakt {
		flex-direction: column;
		& > .wp-block-column:first-child, & > .wp-block-column:last-child { width: auto; padding: 0; }
		& .is-style-unterzeile + :is(h1, h2) { font-size: 30px; line-height: 34px; }
		& .is-style-unterzeile + :is(h1, h2) br { display: none; } /* live einzeilig fortlaufend */
		& :is(h1, h2) + p { margin-top: 9.8px; }
		& :is(h1, h2) + p + ul { margin-top: 25px; }
		& > .wp-block-column:last-child { margin-top: 16px; }
	}
}
@media (max-width: 479px) {
	:is(.inhaltstext, .editor-styles-wrapper) .wp-block-columns.is-style-kontakt .is-style-unterzeile + :is(h1, h2) { font-size: 26px; line-height: 30px; }
}

/* ---------- Liste „Mit Symbolen“: Symbol nach Inhalt (Telefon-Link, E-Mail-Link, sonst Ortsmarke), orange ---------- */
:is(.inhaltstext, .editor-styles-wrapper) ul.is-style-symbole {
	margin: 0;
	padding: 0;
	list-style: none;

	& li { position: relative; min-height: 27.2px; padding-left: 37.8px; }
	& li + li { margin-top: 18.7px; }
	& li::before {
		content: "";
		position: absolute;
		top: 0;
		left: -3px;
		width: 27.2px;
		height: 27.2px;
		background: var(--farbe-akzent);
		mask: url("../icons/eigen-ort.svg") center / auto 22px no-repeat;
	}
	& li:has(a[href^="tel:"])::before { mask-image: url("../icons/eigen-handy.svg"); }
	& li:has(a[href^="mailto:"])::before { mask-image: url("../icons/eigen-brief-umriss.svg"); mask-size: 22px auto; }
	& a { position: relative; color: inherit; }
	& a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
	& a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
}
@media (max-width: 1279px) {
	:is(.inhaltstext, .editor-styles-wrapper) ul.is-style-symbole {
		font-size: 16px;
		line-height: 24px;
		& li { min-height: 24px; }
		& li + li { margin-top: 14.1px; }
	}
}
@media (max-width: 479px) {
	:is(.inhaltstext, .editor-styles-wrapper) ul.is-style-symbole {
		font-size: 15px;
		line-height: 22.5px;
		& li { min-height: 22.5px; padding-left: 31.5px; }
		& li + li { margin-top: 15px; }
		& li::before { top: -1px; width: 24px; height: 24px; mask-size: auto 19.5px; }
		& li:has(a[href^="mailto:"])::before { mask-size: 19.5px auto; }
	}
}

/* ---------- Kontaktformular (Block slz/kontaktformular) ----------
 * Felder 2 Spalten (Abstand 30 px), 48 px hoch, ohne Rahmen, Linie unten rgba(30,40,49,0,2), beim Fokus dunkel; Symbol
 * links, Text ab 36 px, Roboto 14/21 #909090 (Fokus #1E2831). Nachricht volle Breite, 87 px. Rechenaufgabe mit
 * Beschriftung, Eingabe ohne Linie (wie live). „Senden“ #EC3D08 (Hover #DC3300), Bebas 18, Papierflieger. Zustimmung
 * darunter mit eigenem Kästchen. Meldungen nach dem Absenden wie Contact Form 7 (live nicht messbar, Absenden ist dort
 * nicht erlaubt). */
:is(.inhaltstext, .editor-styles-wrapper) .kontaktformular {
	margin: 38px 0 0;
	color: var(--farbe-text);

	& .kontaktformular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
	& .kontaktformular__felder { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 37px; }
	& .feld { position: relative; margin: 0; }
	& .feld--nachricht { grid-column: 1 / -1; }
	& .feld__eingabe {
		display: block;
		width: 100%;
		height: 48px;
		margin: 0;
		padding: 13px 0 13px 36px;
		border: 0;
		border-radius: 0;
		background: none;
		color: #909090;
		font: 400 14px/21px var(--schrift-text);
		outline: none;
		transition: color 0.3s ease;
	}
	& .feld__eingabe:focus { color: var(--farbe-ueberschrift); }
	& .feld__eingabe::placeholder { color: var(--farbe-ueberschrift); opacity: 1; }
	& textarea.feld__eingabe { height: 86.8px; resize: none; }
	& .feld__symbol { position: absolute; top: 24px; left: 0; width: 22px; height: 22px; color: #1D1D1D; translate: 0 -50%; }
	& .feld--name .feld__symbol { width: 17px; height: 20px; }
	& .feld--email .feld__symbol { width: 21px; height: 15px; }
	& .feld--telefon .feld__symbol { width: 20px; height: 20px; }
	& .feld__linie { position: absolute; left: 0; right: 0; top: 47px; height: 1px; background: rgba(30, 40, 49, 0.2); } /* an der Feldunterkante, auch mit Hinweis darunter */
	& .feld--nachricht .feld__linie { top: 85.8px; }
	& .feld__linie::before { content: ""; position: absolute; inset: 0 100% 0 0; background: var(--farbe-ueberschrift); transition: right 0.3s ease; }
	& .feld__eingabe:focus ~ .feld__linie::before { right: 0; }
	& .feld--quiz { margin: 55px 0 0; }
	& .feld--quiz label { display: block; padding-top: 4px; line-height: 20px; }
	& .feld--quiz .feld__eingabe { margin-top: 4.9px; padding: 13px 0; }
	/* Antwortfeld mit derselben Linie wie die übrigen Felder (Entscheidung Dennis 26.10.2026, offene-fragen.md Q); die Linie
	   folgt direkt auf das Feld, damit sie bei jeder Höhe der Beschriftung an dessen Unterkante sitzt */
	& .feld--quiz .feld__linie { position: relative; top: auto; display: block; margin-top: -1px; }
	& .feld__hinweis { display: block; margin-top: 4px; color: #DC3232; font-size: 14px; line-height: 21px; }
	& .kontaktformular__senden { margin: 0; }
	& .kontaktformular__knopf {
		position: relative;
		display: inline-block;
		margin: 0;
		padding: 18px 35px 16px 64px;
		border: 0;
		border-radius: 0;
		background: var(--farbe-akzent);
		color: #fff;
		font: 400 18px/22px var(--schrift-titel);
		text-transform: uppercase;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	& .kontaktformular__knopf:is(:hover, :focus-visible) { background: var(--farbe-akzent-hover); }
	& .kontaktformular__flieger { position: absolute; top: 50%; left: 35px; width: 16px; height: 14.2px; translate: 0 -50%; }
	& .kontaktformular__zustimmung { min-height: 28.9px; margin: 10px 0 0; font: 400 14px/22px var(--schrift-text); }
	& .kontaktformular__zustimmung label { position: relative; display: block; padding-left: 25.2px; cursor: pointer; }
	& .kontaktformular__zustimmung input { position: absolute; top: 3px; left: 0; width: 16px; height: 16px; margin: 0; opacity: 0; }
	& .kontaktformular__zustimmung label::before {
		content: "";
		position: absolute;
		top: 3px;
		left: 0;
		width: 16px;
		height: 16px;
		border: 1px solid #6E747A;
		border-radius: 3px;
	}
	& .kontaktformular__zustimmung label:has(input:checked)::after {
		content: "";
		position: absolute;
		top: 6px;
		left: 5.5px;
		width: 5px;
		height: 8px;
		border: solid var(--farbe-ueberschrift);
		border-width: 0 1.5px 1.5px 0;
		rotate: 45deg;
	}
	& .kontaktformular__zustimmung label:has(input:focus-visible)::before { outline: 2px solid var(--farbe-ueberschrift); outline-offset: 2px; }
	& .kontaktformular__zustimmung a { color: inherit; border-bottom: 1px solid currentColor; line-height: 14px; }
	& .kontaktformular__meldung { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #00A0D2; }
	& .kontaktformular__meldung--gesendet { border-color: #46B450; }
	& .kontaktformular__meldung--ungueltig { border-color: #FFB900; }
	& .kontaktformular__meldung--fehler { border-color: #DC3232; }
}
@media (max-width: 1279px) {
	:is(.inhaltstext, .editor-styles-wrapper) .kontaktformular {
		margin-top: 27px;
		& .kontaktformular__felder { row-gap: 30px; }
		& .feld--quiz { margin-top: 35px; }
		& .kontaktformular__knopf { padding: 16px 35px 14px 60px; font-size: 17px; }
		& .kontaktformular__flieger { left: 33px; }
	}
}
@media (max-width: 1023px) {
	:is(.inhaltstext, .editor-styles-wrapper) .kontaktformular .kontaktformular__felder { row-gap: 25px; }
	:is(.inhaltstext, .editor-styles-wrapper) .kontaktformular .feld--quiz { margin-top: 25px; }
	:is(.inhaltstext, .editor-styles-wrapper) .kontaktformular .feld--quiz label { padding-top: 3px; }
	:is(.inhaltstext, .editor-styles-wrapper) .kontaktformular .feld--quiz .feld__eingabe { margin-top: 3.9px; }
}
@media (max-width: 767px) {
	:is(.inhaltstext, .editor-styles-wrapper) .kontaktformular {
		margin-top: 0;
		& .kontaktformular__felder { grid-template-columns: 1fr; row-gap: 12px; }
		& .feld--quiz { margin-top: 22px; }
	}
}
@media (max-width: 479px) {
	:is(.inhaltstext, .editor-styles-wrapper) .kontaktformular {
		& .feld__eingabe { height: 45.5px; padding: 11px 0 11px 36px; font-size: 15px; line-height: 22.5px; }
		& textarea.feld__eingabe { height: 93px; }
		& .feld__symbol { top: 22.75px; }
		& .feld__linie { top: 44.5px; }
		& .feld--nachricht .feld__linie { top: 92px; }
		& .feld--quiz label { padding-top: 2px; line-height: 18px; }
		& .feld--quiz .feld__eingabe { margin-top: 2.9px; padding: 11px 0; }
		& .kontaktformular__knopf { padding: 14px 30px 12px 57px; }
		& .kontaktformular__flieger { left: 30px; }
	}
}