/* =========================================================================
   Seiten-Bausteine (zuerst für „Häufige Fragen“, Post 124, dann der
   Kopfbereich der Startseite, Post 201)
   Nachbau von kfz-biesterfeldt.vercel.app. Werte, Übergänge und
   Bewegungen am 13.10.2026 bei Vercel ausgelesen und 1:1 übertragen.
   Vercels Klassen bf-* heißen hier deutsch: sh-*, knopf-*, faq-*, …

   Die Elementor-Klassen dieser Bausteine sind nur Haken (Grundvariante
   „Deckkraft 100 %“). Die Gestaltung steht hier, damit sie für alle Seiten
   an einer Stelle gepflegt wird. Das Verhalten (FAQ weich auf- und zuklappen,
   Einblenden beim Scrollen, Parallaxe im Kopfbild) steht in bausteine.js.

   Alles hängt unter .seite (äußerster Container jeder Seite). Das Präfix
   „.elementor .seite“ hebt die Regeln über Elementors Grundregeln
   (.elementor .e-flexbox-base u. a.), die erst nach dieser Datei laden.

   Bewusste Abweichung von Vercel: Auf hellblauem Grund steht das Symbol
   einer aufgeklappten Frage bei Vercel weiß auf weiß und verschwindet.
   Hier ist es dort wie überall blau mit weißem Kreuz.
   ========================================================================= */

:root {
	--b-section-y: clamp(4rem, 2.756rem + 5.304vw, 7rem);
	--b-fs-body: clamp(1.0625rem, 1.037rem + .11vw, 1.125rem);
	/* Textanfang der Heros wie new.: 10 px + 5,6 vw (höchstens 150) */
	--b-start-l: calc(10px + clamp(22px, 5.6vw, 150px));
	--b-dur-slow: .36s;
	--b-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--b-ease-expo: cubic-bezier(.16, 1, .3, 1);
	--b-schrift: var(--font-sans, "Archivo", "Helvetica Neue", Arial, sans-serif);
	--b-schrift-titel: var(--font-display, "Archivo", "Helvetica Neue", Arial, sans-serif);
	--b-kopfhoehe: 88px;

	/* Symbole (Lucide) als Masken, Farbe über currentColor */
	--bi-datei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
	--bi-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--bi-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--bi-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
	--bi-schild-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	/* WhatsApp-Zeichen: Font Awesome Free 5.15.3 „whatsapp“ (CC BY 4.0, fontawesome.com),
	   aus Elementors mitgelieferter Sammlung. Rand im viewBox, damit es optisch so groß
	   wirkt wie die Lucide-Symbole der anderen Knöpfe (etwa 85 % der Fläche). */
	--bi-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -8 528 528'%3E%3Cpath fill='%23000' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
	/* Startseite (Gestaltung von new.): Vertrauenspunkte, Kästchen und Schwung auf dem Klemmbrett.
	   Pfade 1:1 aus new.s Startseite, gefüllte Teile (Punkte, Waagschalen) bleiben gefüllt. */
	--bi-v-schild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.3 4.7 5v5.9c0 4.4 3 8.2 7.3 9.8 4.3-1.6 7.3-5.4 7.3-9.8V5L12 2.3Z'/%3E%3Cpath d='m8.7 11.9 2.3 2.3 4.3-4.8'/%3E%3C/svg%3E");
	--bi-v-kalender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4.8' width='18' height='16.2' rx='2.6'/%3E%3Cpath d='M3 9.8h18'/%3E%3Cpath d='M8 2.6v3.5M16 2.6v3.5' stroke-linecap='round'/%3E%3Cg fill='%23000' stroke='none'%3E%3Ccircle cx='8' cy='13.4' r='1.1'/%3E%3Ccircle cx='12' cy='13.4' r='1.1'/%3E%3Ccircle cx='16' cy='13.4' r='1.1'/%3E%3Ccircle cx='8' cy='17.4' r='1.1'/%3E%3Ccircle cx='12' cy='17.4' r='1.1'/%3E%3Ccircle cx='16' cy='17.4' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
	--bi-v-waage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.2v14.6' stroke-width='1.7'/%3E%3Cpath d='M4.8 7.4 12 5.6l7.2 1.8' stroke-width='1.7'/%3E%3Cpath d='M4.8 8.2 1.7 13.6h6.2L4.8 8.2Z' stroke-width='1.5'/%3E%3Cpath d='M19.2 8.2 16.1 13.6h6.2l-3.1-5.4Z' stroke-width='1.5'/%3E%3Cg fill='%23000' stroke='none'%3E%3Cpath d='M1.7 13.9h6.2c0 1.7-1.4 3-3.1 3s-3.1-1.3-3.1-3Z'/%3E%3Cpath d='M16.1 13.9h6.2c0 1.7-1.4 3-3.1 3s-3.1-1.3-3.1-3Z'/%3E%3Ccircle cx='12' cy='4.6' r='1.3'/%3E%3C/g%3E%3Cpath d='M7.6 20.4h8.8' stroke-width='1.8'/%3E%3C/svg%3E");
	--bi-v-ort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21.4s7-6 7-11.3a7 7 0 1 0-14 0c0 5.3 7 11.3 7 11.3Z'/%3E%3Ccircle cx='12' cy='9.9' r='2.7' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	--bi-kaestchen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none' stroke='%23000'%3E%3Crect x='.9' y='.9' width='15.2' height='15.2' rx='3.4' stroke-width='1.5'/%3E%3Cpath d='m4.9 8.6 2.3 2.3 4.9-5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bi-schwung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9.6C30 5.4 82 2.6 138 3.4' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Schriften der Startseite wie new.: Sora (Überschriften), Inter (Text), Kaushan Script
   (Handschrift). Alle SIL Open Font License, auf final. selbst abgelegt, also ohne
   Google-Server (Datenschutz). Sora und Inter sind variable Schriften (alle Stärken in
   einer Datei). Dateien in uploads/fonts/. */
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/sora-latin-ext.woff2") format("woff2");
	unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/sora-latin.woff2") format("woff2");
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Kaushan Script";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/kaushan-script-latin-ext.woff2") format("woff2");
	unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Kaushan Script";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/kaushan-script-latin.woff2") format("woff2");
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Handschrift wie bei Vercel: Caveat (SIL Open Font License), auf final. selbst
   abgelegt, also ohne Google-Server. Dateien in uploads/fonts/. Derzeit ungenutzt,
   seit die Startseite die Handschrift von new. (Kaushan Script) bekommen hat. Eine
   unbenutzte Schrift lädt der Browser nicht. */
@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/caveat-normal-latin-ext.woff2") format("woff2");
	unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/wp-content/uploads/fonts/caveat-normal-latin.woff2") format("woff2");
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@media (max-width: 959px) {
	:root { --b-kopfhoehe: 64px; }
}

/* ------------------------------------------------------------ Grundgerüst */

body .elementor .seite {
	display: block;
	padding: 0;
}
/* Gemeinsame Form aller Masken-Symbole */
.elementor .seite .ico-datei::before,
.elementor .seite .ico-telefon::before,
.elementor .seite .ico-schild-haken::before,
.elementor .seite .ico-whatsapp::before,
.elementor .seite .vertrauen-punkt::before,
.elementor .seite .klemmbrett-punkt::before,
.elementor .seite .mit-pfeil::after,
.elementor .seite .mehr-link::after,
.elementor .seite .faq-liste summary > [aria-hidden="true"]::before {
	content: "";
	position: static;
	inset: auto;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	opacity: 1;
	border-radius: 0;
	mix-blend-mode: normal;
	background: currentColor;
	-webkit-mask: var(--bi) center / contain no-repeat;
	mask: var(--bi) center / contain no-repeat;
}
.elementor .seite .ico-datei { --bi: var(--bi-datei); }
.elementor .seite .ico-telefon { --bi: var(--bi-telefon); }
.elementor .seite .ico-schild-haken { --bi: var(--bi-schild-haken); }
.elementor .seite .ico-whatsapp { --bi: var(--bi-whatsapp); }
.elementor .seite .mit-pfeil::after,
.elementor .seite .mehr-link::after { -webkit-mask-image: var(--bi-pfeil); mask-image: var(--bi-pfeil); }

/* ------------------------------------------------------- Abschnittskopf */

.elementor .seite .sh {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 0;
}
.elementor .seite .sh-kopf {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding: 0;
}
.elementor .seite .sh-eyebrow {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .sh-h1,
.elementor .seite .sh-h2 {
	margin: 0;
	font-family: var(--b-schrift-titel);
	font-weight: 800;
	color: var(--navy-950, #03183d);
	text-wrap: balance;
}
.elementor .seite .sh-h1 {
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	line-height: 1.05;
	letter-spacing: -.03em;
}
.elementor .seite .sh-h2 {
	font-size: clamp(1.75rem, 1.336rem + 1.768vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -.02em;
}
/* Zweiter Teil der Überschrift (span im Titel): eigene Zeile, blau */
.elementor .seite .sh-h1 span,
.elementor .seite .sh-h2 span {
	display: block;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .sh-lead {
	margin: 8px 0 0;
	max-width: 720px;
	font-family: var(--b-schrift);
	font-size: clamp(1.125rem, 1.047rem + .331vw, 1.3125rem);
	line-height: 1.55;
	font-weight: 400;
	color: var(--slate-600, #434b5b);
}
/* „Mehr zum …“: Text mit Pfeil, beim Überfahren unterstrichen */
.elementor .seite .mehr-link {
	display: inline-flex;
	flex: 0 0 auto;
	width: auto;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	line-height: 1.62;
	font-weight: 600;
	color: var(--blue-700, #0349ae);
	text-decoration: none;
}
.elementor .seite .mehr-link::after { width: 18px; height: 18px; }
.elementor .seite .mehr-link .e-paragraph-base {
	margin: 0;
	font: inherit;
	color: inherit;
	text-underline-offset: .2em;
}
.elementor .seite .mehr-link:hover { color: var(--blue-700, #0349ae); }
.elementor .seite .mehr-link:hover .e-paragraph-base { text-decoration: underline; }

/* ------------------------------------------ Kopfbereich der Unterseiten */
/* Zuerst „Häufige Fragen“. Seit 13.10.2026 nach dem Vorbild des Startseiten-Heros
   (Auftraggeber): Bild über die volle Breite, Text weit links wie new., weißer Schleier
   mit Schräge. Niedriger als die Startseite: 480 px wie Vercels Unterseiten.
   Texte, Knöpfe und Schrift der Seite bleiben, wie sie sind.
   Hinweise „KI-Symbolbild“ gibt es nicht mehr (Auftraggeber: bei allen Bildern raus). */

.elementor .seite .hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	min-height: clamp(0px, calc((100vw - 1099px) * 1000), 480px);
	padding-block: clamp(32px, 4vw, 48px);
	padding-inline: var(--b-start-l);
	background: #fff;
}
/* Bild ab 1100 px über die volle Fläche. 120 % breit und links verankert, damit die
   Mappe mit den Fotos rechts neben dem Text liegt. Ausschnitt in der Höhe bei 63 %. */
.elementor .seite .hero-bild {
	position: absolute;
	inset: 0;
	width: auto;
	padding: 0;
	transition: transform .5s cubic-bezier(.25, .46, .45, .94);
}
.elementor .seite .hero-img {
	display: block;
	flex: 0 0 auto; /* der Bildrahmen ist ein Flex-Container; ohne das schrumpft es auf 100 % */
	width: 120%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 0 63%;
	transform-origin: 65% 45%;
}
/* Weißer Schleier wie auf der Startseite: 88 %, Kante oben bei 52 %, unten bei 44 % */
.elementor .seite .hero-schleier-1,
.elementor .seite .hero-schleier-2 {
	position: absolute;
	inset: 0;
	padding: 0;
	pointer-events: none;
}
.elementor .seite .hero-schleier-1 {
	background: rgba(255, 255, 255, .88);
	clip-path: polygon(0 0, 52% 0, 44% 100%, 0 100%);
}
.elementor .seite .hero-schleier-2 { display: none; }
.elementor .seite .hero-text {
	position: relative;
	z-index: 1;
	order: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: min(760px, 42%);
	padding: 0;
}

@media (max-width: 1099.98px) {
	/* Gestapelt wie die Startseite: oben das Bild über die volle Breite, darunter der Text */
	.elementor .seite .hero { padding: 0 0 48px; }
	.elementor .seite .hero-bild {
		position: relative;
		inset: auto;
		order: 0;
		width: 100%;
		aspect-ratio: 16 / 7;
		overflow: hidden;
		background: var(--slate-100, #e8edf4);
		transform: none !important;
		transition: none;
	}
	.elementor .seite .hero-img {
		position: absolute;
		inset: 0;
		width: 100%;
		object-position: 50% 63%;
	}
	.elementor .seite .hero-schleier-1 { display: none; }
	.elementor .seite .hero-text {
		order: 1;
		max-width: none;
		padding: clamp(28px, 4vw, 40px) var(--rand-grid, 20px) 0;
	}
}

/* ---------------------------------------------------------------- Knöpfe */

.elementor .seite .knopf-reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
}
.elementor .seite .knopf {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	width: auto;
	min-width: auto; /* Elementor setzt 0; so schrumpft ein Knopf nicht unter seinen Text */
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	padding: 6px 28px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--b-schrift);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: .005em;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-position var(--dur-base, .24s) var(--ease-standard, ease), background-color var(--dur-fast, .16s) var(--ease-standard, ease), border-color var(--dur-fast, .16s) var(--ease-standard, ease), color var(--dur-fast, .16s) var(--ease-standard, ease), box-shadow var(--dur-base, .24s) var(--ease-standard, ease), transform .1s var(--ease-standard, ease);
}
.elementor .seite .knopf .e-paragraph-base {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}
.elementor .seite .knopf:active { transform: translateY(1px); }
.elementor .seite .knopf:focus-visible {
	outline: 3px solid var(--focus-ring, #1c6ad0);
	outline-offset: 3px;
}
.elementor .seite .mit-pfeil::after { transition: transform var(--dur-fast, .16s) var(--ease-out, ease-out); }
.elementor .seite .mit-pfeil:hover::after { transform: translateX(3px); }

/* Groß (Kopfbereich): 60 px hoch, 18 px Schrift, Symbole 22 px */
.elementor .seite .knopf-gross {
	min-height: 60px;
	padding-inline: 32px;
	font-size: 1.125rem;
}
.elementor .seite .knopf-gross::before,
.elementor .seite .knopf-gross::after { width: 22px; height: 22px; }

/* Mit Unterzeile (Telefon im Kopfbereich): Symbol 24 px, Nummer fett */
.elementor .seite .knopf:has(.knopf-beschriftung) { padding: 7px 24px; }
.elementor .seite .knopf:has(.knopf-beschriftung)::before { width: 24px; height: 24px; }
.elementor .seite .knopf-beschriftung {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	width: auto;
	padding: 0;
}
.elementor .seite .knopf-beschriftung > .e-paragraph-base:first-child {
	font-size: 1.125rem;
	font-weight: 700;
}
.elementor .seite .knopf .knopf-sub {
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.25;
	color: var(--slate-500, #5a6272);
}
.elementor .seite .knopf-primaer .knopf-sub { color: var(--blue-100, #dce7f9); }

/* Blau mit Verlauf: beim Überfahren wandert der Verlauf, der Schatten wächst */
.elementor .seite .knopf-primaer {
	color: #fff;
	background-color: var(--blue-600, #0a5ac4);
	background-image: linear-gradient(90deg, #1c6ad0 0%, #0349ae 50%, #053b8c 100%);
	background-size: 200% 100%;
	background-position: 0 0;
	background-origin: border-box;
	box-shadow: 0 8px 20px -8px #0a5ac499;
}
.elementor .seite .knopf-primaer:hover {
	color: #fff;
	background-position: 100% 0;
	box-shadow: 0 12px 26px -8px #053b8c99;
}

/* Weiß mit blauem Rand */
.elementor .seite .knopf-sekundaer {
	color: var(--navy-950, #03183d);
	background-color: #fff;
	border-color: var(--blue-700, #0349ae);
}
.elementor .seite .knopf-sekundaer::before { color: var(--blue-700, #0349ae); }
.elementor .seite .knopf-sekundaer:hover {
	color: var(--navy-950, #03183d);
	background-color: var(--blue-50, #eef4fd);
	border-color: var(--blue-800, #053b8c);
}
.elementor .seite .knopf-sekundaer:active { background-color: var(--blue-100, #dce7f9); }

/* WhatsApp (Wunsch des Kunden, 13.10.2026): grünes Gegenstück zum blauen Hauptknopf.
   Verlauf von WhatsApp-Grün #25D366 zu WhatsApps dunklerem Grün #128C7E, weiße Schrift.
   Beim Überfahren wandert der Verlauf ins Dunklere, der Schatten wächst. Schwarz beim
   Überfahren (wie auf whatsapp.com) hat der Auftraggeber abgelehnt. */
.elementor .seite .knopf-whatsapp {
	color: #fff;
	background-color: #1ebe5d;
	background-image: linear-gradient(90deg, #25d366 0%, #1aa34f 50%, #128c7e 100%);
	background-size: 200% 100%;
	background-position: 0 0;
	background-origin: border-box;
	border-color: transparent;
	box-shadow: 0 8px 20px -8px rgba(18, 140, 126, .6);
	text-shadow: 0 1px 2px rgba(7, 94, 84, .35);
}
.elementor .seite .knopf-whatsapp .knopf-sub { color: rgba(255, 255, 255, .92); }
.elementor .seite .knopf-whatsapp:hover {
	color: #fff;
	background-position: 100% 0;
	box-shadow: 0 12px 26px -8px rgba(7, 94, 84, .6);
}
.elementor .seite .knopf-whatsapp:hover .knopf-sub { color: rgba(255, 255, 255, .92); }

/* Auf blauem Grund: weiß gefüllt bzw. mit weißem Rand */
.elementor .seite .knopf-inverse-primaer {
	color: var(--blue-800, #053b8c);
	background-color: #fff;
	background-image: none;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
}
.elementor .seite .knopf-inverse-primaer:hover {
	color: var(--navy-950, #03183d);
	background-color: var(--blue-50, #eef4fd);
}
.elementor .seite .knopf-inverse-sekundaer {
	color: #fff;
	background-color: transparent;
	border-color: rgba(255, 255, 255, .78);
}
.elementor .seite .knopf-inverse-sekundaer::before { color: var(--blue-100, #dce7f9); }
.elementor .seite .knopf-inverse-sekundaer:hover {
	color: #fff;
	border-color: #fff;
	background-color: rgba(255, 255, 255, .12);
}
.elementor .seite :is(.knopf-inverse-primaer, .knopf-inverse-sekundaer):focus-visible { outline-color: #fff; }

/* Bewegung wie Vercels GSAP-Regeln (Keyframes in kopfbereich.css):
   bei Telefon-Links wackelt das Symbol, sonst wächst es kurz */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.elementor .seite .knopf:hover::before { animation: kb-hupfen .36s; }
	.elementor .seite .knopf[href^="tel:"]:hover::before {
		transform-origin: 50% 50%;
		animation: kb-klingeln .6s linear;
	}
}
@media (max-width: 479.98px) {
	.elementor .seite .knopf.knopf {
		gap: 10px;
		padding-inline: 18px;
		white-space: normal;
		max-width: 100%;
	}
	.elementor .seite .knopf .e-paragraph-base { text-wrap: balance; }
}

/* ------------------------------------------- Startseite: Kopfbereich */
/* Auf Wunsch des Auftraggebers (13.10.2026) eine Mischung:
   - von Vercel: das Bild, die Höhe (600–780 px) und die drei Knöpfe,
   - von new.: alles andere. Textlage (10 px + 5,6 vw), Schriften (Sora, Inter,
     Kaushan Script), Farben, Vertrauenspunkte, der weiße Schleier mit seiner Schräge
     und das Klemmbrett. Die Werte stammen aus new.s Startseite.
   Die Häkchenliste bleibt bei jeder Breite auf dem Klemmbrett im Bild.
   Unter 1280 px gestapelt wie new. (dort ab 1200 px; Vercels drei Knöpfe brauchen mehr Platz,
   sonst stehen sie untereinander und der Text rückt an den Mann): oben das Bild mit dem
   Klemmbrett, darunter der Text.
   bausteine.js setzt die Schräge des Schleiers (oben 14 px vor dem Mann) und erkennt,
   wenn die Liste nicht aufs Blatt passt (dann ohne Unterzeilen, wie new.). */

.elementor .seite .start-hero {
	--start-l: var(--b-start-l);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0;
	/* Höhe genau wie Vercel, auch auf sehr breiten Schirmen (Auftraggeber). Die volle
	   Breite deckt dort die gespiegelte Fortsetzung des Bildes (.start-bildbox::before) */
	min-height: clamp(600px, calc(50vw - 60px), 780px);
	padding: 0;
	background: #fff;
}
/* Weißer Trenner direkt unter dem Hero wie auf new.: 6 px über die volle Breite
   (Auftraggeber 13.10.2026). Auf new. ist es die Oberkante des blauen Leistungen-Bands.
   Kommt hier später ein Abschnitt mit eigenem Strich, einen davon weglassen. */
.elementor .seite .start-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 6px;
	background: #fff;
	z-index: 3;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 0;
	transition: none;
	pointer-events: none;
}
/* Bildebene: zoomt beim Laden heran und läuft beim Scrollen leicht mit (bausteine.js) */
.elementor .seite .start-medien {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
	transform-origin: 65% 45%;
	transition: transform .5s cubic-bezier(.25, .46, .45, .94);
}
/* Bildfläche im Bildverhältnis, rechts verankert, so hoch wie der Abschnitt. Ist sie
   breiter als das Fenster, rückt sie bis 5 % nach rechts (wie Vercel). Sie ist zugleich
   Bezugsgröße (cqw) für das Klemmbrett, damit die Liste auf dem Blatt bleibt. */
.elementor .seite .start-bildbox {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: auto;
	height: 100%;
	aspect-ratio: 2137 / 736;
	padding: 0;
	container-type: inline-size;
	transform: translateX(clamp(0px, calc(100% - 100vw), 5%));
}
.elementor .seite .start-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
/* Volle Breite auch über ~2265 px: Bei 780 px Höhe ist das Bild dort schmaler als das
   Fenster. Links schließt deshalb die linke Bildhälfte gespiegelt an. An der Naht stoßen
   gleiche Bildpunkte aneinander, die Fläche liegt unter dem weißen Schleier. Bei
   normalen Breiten liegt sie links außerhalb des Fensters.
   Achtung: Wird das Bild getauscht, muss diese Adresse mit (Anhang 168). */
.elementor .seite .start-bildbox::before {
	content: "";
	position: absolute;
	inset: 0 100% 0 auto; /* Elementors ::before-Regel für Container überschreiben */
	width: 50%;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 0;
	transition: none;
	background: url("/wp-content/uploads/2026/10/kfz-gutachter-klemmbrett-unfallwagen.webp") 0 0 / 200% 100% no-repeat;
	transform: scaleX(-1);
	pointer-events: none;
}
/* Weißer Schleier wie new. (88 % Deckkraft). Die Kante läuft oben 14 px vor dem Mann
   und unten 8 % der Breite weiter links; die genaue Lage rechnet bausteine.js aus.
   Hier steht der Wert für 1920 px als Vorgabe. */
.elementor .seite .start-schleier {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
	background: rgba(255, 255, 255, .88);
	clip-path: polygon(0 0, 62.5% 0, 54.5% 100%, 0 100%);
	pointer-events: none;
}

/* Text wie new.: weit links, höchstens 760 px bzw. 42 % breit, senkrecht mittig.
   Abstand oben/unten wie Vercel (Auftraggeber: „Höhe genau wie bei Vercel“). Mit new.s
   größeren Abständen wurde der Hero auf Laptops vom Text bestimmt und bis zu 20 px höher
   als Vercel (1366 px: 644 statt 623). */
.elementor .seite .start-hero-inhalt {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 0 auto;
	width: 100%;
	min-width: 0;
	padding: clamp(24px, 2.4vw, 32px) var(--start-l) 28px;
}
.elementor .seite .start-hero-text {
	display: block;
	width: 100%;
	max-width: min(760px, 42%);
	padding: 0;
}
.elementor .seite .start-aug {
	margin: 0 0 16px;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 2.2;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #0d63f3;
}
.elementor .seite .start-h1 {
	margin: 0 0 .34em;
	font-family: "Sora", sans-serif;
	font-size: clamp(34px, 3.85vw, 60px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
	color: #071a36;
}
.elementor .seite .start-h1 span {
	display: block;
	color: #0d63f3;
}
.elementor .seite .start-lead {
	margin: 0 0 clamp(20px, 1.7vw, 28px);
	font-family: "Inter", sans-serif;
	font-size: clamp(16px, 1.08vw, 20px);
	font-weight: 400;
	line-height: 1.55;
	color: #576273;
	text-wrap: pretty;
}

/* Vier Vertrauenspunkte wie new.: in einer Reihe, zentriert, Symbole #0E47B0 */
.elementor .seite .vertrauen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 26px);
	width: 100%;
	max-width: none;
	margin: clamp(28px, 2.6vw, 46px) 0 0;
	padding: 0;
}
.elementor .seite .vertrauen-punkt {
	display: block;
	min-width: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: clamp(12px, .78vw, 14.5px);
	line-height: 1.4;
	text-align: center;
}
.elementor .seite .vertrauen-punkt::before {
	display: block;
	width: clamp(28px, 2.1vw, 44px);
	height: clamp(28px, 2.1vw, 44px);
	margin: 0 auto 10px;
	color: #0e47b0;
}
.elementor .seite .ico-v-schild { --bi: var(--bi-v-schild); }
.elementor .seite .ico-v-kalender { --bi: var(--bi-v-kalender); }
.elementor .seite .ico-v-waage { --bi: var(--bi-v-waage); }
.elementor .seite .ico-v-ort { --bi: var(--bi-v-ort); }
/* Feste Titelhöhe, damit die Erläuterungen auf einer Linie beginnen (wie new.) */
.elementor .seite .vertrauen-titel {
	display: block;
	min-height: 2.5em;
	margin: 0 0 5px;
	font-family: "Sora", sans-serif;
	font-size: clamp(12.5px, .86vw, 16px);
	font-weight: 600;
	line-height: 1.25;
	color: #071a36;
}
.elementor .seite .vertrauen-text {
	margin: 0;
	font: inherit;
	color: #576273;
}

/* Klemmbrett: Lage auf dem Blatt in Prozent der Bildfläche (Blatt im Bild gemessen,
   Ränder wie new.), gekippt wie das Blatt im Bild (−2,6°). Innen alles in em; die
   Grundgröße ist 6 % der Kastenbreite wie new. (16,5 px auf 275 Bildpunkte). */
.elementor .seite .klemmbrett {
	position: absolute;
	left: 80.63%;
	top: 49.18%;
	width: 13.76%;
	height: 48.91%;
	display: block;
	padding: 0;
	container-type: inline-size;
	transform: rotate(-2.6deg);
	transform-origin: 50% 40%;
}
.elementor .seite .klemmbrett-inhalt {
	--hschrift: 1.112em;
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-size: 6cqw;
	line-height: 1.22;
}
/* Handschrift oben und unten, jeweils stärker gekippt als das Blatt */
.elementor .seite .klemmbrett-kopf {
	display: block;
	flex: 0 0 auto;
	padding: .45em 0 0;
	transform: rotate(-5.5deg);
	transform-origin: 0 100%;
}
.elementor .seite .klemmbrett-fuss {
	display: block;
	flex: 0 0 auto;
	align-self: flex-end;
	width: auto;
	margin: .85em 0 .18em;
	padding: 0;
	transform: rotate(-8.3deg);
	transform-origin: 0 100%;
}
.elementor .seite .handnotiz {
	display: block;
	margin: 0;
	font-family: "Kaushan Script", Georgia, serif;
	font-size: var(--hschrift);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: normal;
	color: #071a36;
}
.elementor .seite .handnotiz span {
	display: inline-block;
	padding-inline-start: 1.6em;
}
.elementor .seite .klemmbrett-fuss .handnotiz {
	text-align: right;
	white-space: nowrap;
}
/* Blauer Schwung unter der Handschrift (new.s Pfad, in der Breite gestreckt) */
.elementor .seite .klemmbrett-kopf::after,
.elementor .seite .klemmbrett-fuss::after {
	content: "";
	display: block;
	height: .34em;
	background: #0d63f3;
	-webkit-mask: var(--bi-schwung) 0 0 / 100% 100% no-repeat;
	mask: var(--bi-schwung) 0 0 / 100% 100% no-repeat;
	transform-origin: 0 50%;
}
.elementor .seite .klemmbrett-kopf::after {
	width: 50%;
	margin: .16em 0 .7em 24%;
}
.elementor .seite .klemmbrett-fuss::after {
	width: 100%;
	margin: .38em 0 0;
}
/* Häkchenliste: verteilt sich über die Höhe des Blatts */
.elementor .seite .klemmbrett-liste {
	display: grid;
	gap: .8em;
	flex: 1 1 auto;
	align-content: space-between;
	padding: 0;
}
.elementor .seite .klemmbrett-punkt {
	--bi: var(--bi-kaestchen);
	display: grid;
	grid-template-columns: 1.08em minmax(0, 1fr);
	column-gap: .8em;
	row-gap: 0;
	align-items: start;
	padding: 0;
	line-height: 1.22;
}
.elementor .seite .klemmbrett-punkt::before {
	grid-row: 1 / span 2;
	width: 1.08em;
	height: 1.08em;
	margin-top: .06em;
	color: #0d63f3;
}
.elementor .seite .klemmbrett-titel,
.elementor .seite .klemmbrett-zeile {
	grid-column: 2;
	display: block;
	margin: 0;
	font-family: "Inter", sans-serif;
}
.elementor .seite .klemmbrett-titel {
	font-size: .82em;
	font-weight: 600;
	line-height: 1.22;
	color: #071a36;
}
.elementor .seite .klemmbrett-zeile {
	font-size: max(11px, .68em);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: #576273;
}
/* Passt die Liste nicht aufs Blatt (bausteine.js), entfallen die Unterzeilen */
.elementor .seite .klemmbrett-inhalt.ist-knapp .klemmbrett-zeile { display: none; }
.elementor .seite .klemmbrett-inhalt.ist-knapp .klemmbrett-punkt { align-items: center; }
.elementor .seite .klemmbrett-inhalt.ist-knapp .klemmbrett-fuss { margin-top: 2.3em; }

/* Gestapelt wie new.: oben das Bild über die volle Breite, Ausschnitt mit dem Mann und
   dem ganzen Blatt (Bildpunkte 1359–2082 von 2137, entspricht new.s 1272–1943 von 2000),
   höchstens 600 px hoch; darunter der Text */
@media (max-width: 1279.98px) {
	.elementor .seite .start-hero { min-height: 0; }
	.elementor .seite .start-medien {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 723 / 736;
		max-height: 600px;
		overflow: hidden;
		transform: none !important;
		transition: none;
	}
	.elementor .seite .start-bildbox {
		transform: translateX(2.574%);
		transform-origin: 83% 45%;
	}
	.elementor .seite .start-schleier { display: none; }
	.elementor .seite .start-hero-inhalt {
		display: block;
		padding: 30px 24px 40px;
	}
	.elementor .seite .start-hero-text { max-width: none; }
	.elementor .seite .start-lead { max-width: 60ch; }
	.elementor .seite .vertrauen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
	.elementor .seite .vertrauen-punkt {
		font-size: 13px;
		text-align: left;
	}
	.elementor .seite .vertrauen-punkt::before { margin: 0 0 10px; }
	.elementor .seite .vertrauen-titel { min-height: 0; }
}
@media (max-width: 585px) {
	/* Kleines Blatt: größere Schrift, nur die Überschriften (wie new.) */
	.elementor .seite .klemmbrett-inhalt {
		--hschrift: .95em;
		font-size: 8cqw;
	}
	.elementor .seite .klemmbrett-zeile { display: none; }
	.elementor .seite .klemmbrett-punkt { align-items: center; }
	.elementor .seite .klemmbrett-fuss { margin-top: .6em; }
}
@media (max-width: 560px) {
	.elementor .seite .vertrauen { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- FAQ-Abschnitte */

.elementor .seite .faq-sektion {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px clamp(32px, 5vw, 80px);
	padding-block: var(--b-section-y);
	padding-inline: var(--rand-grid);
	scroll-margin-top: var(--b-kopfhoehe);
}
.elementor .seite .faq-tint { background: var(--blue-50, #eef4fd); }
/* Mindestbreite wie bei Vercel nach Inhalt (Elementor setzt sonst 0): Ist ein Wort
   der Überschrift breiter als die Spalte („Haftpflichtgutachten.“), rückt die
   Liste unter den Kopf statt daneben */
.elementor .seite .faq-kopfspalte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	flex: 1 1 300px;
	min-width: auto;
	max-width: 420px;
	padding: 0;
}

/* Liste: Elementors Akkordeon (details/summary) in Vercels Gestalt */
.elementor .seite .faq-liste {
	display: block;
	flex: 1.7 1 520px;
	min-width: 0;
	padding: 0;
	border-top: 1px solid var(--slate-200, #d9e0ea);
}
.elementor .seite .faq-liste > details {
	display: block;
	padding: 0;
	border-bottom: 1px solid var(--slate-200, #d9e0ea);
}
.elementor .seite .faq-tint .faq-liste,
.elementor .seite .faq-tint .faq-liste > details { border-color: var(--blue-200, #b9cff3); }

.elementor .seite .faq-liste summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	width: 100%;
	min-height: 68px;
	padding: 18px 4px;
	list-style: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--b-schrift);
	font-size: clamp(1.125rem, 1.073rem + .221vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.35;
	color: var(--navy-950, #03183d);
	transition: color var(--dur-fast, .16s) var(--ease-standard, ease);
}
.elementor .seite .faq-liste summary::-webkit-details-marker { display: none; }
.elementor .seite .faq-liste summary::marker { content: ""; }
.elementor .seite .faq-liste summary > :first-child {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}
.elementor .seite .faq-liste summary .e-paragraph-base {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}
.elementor .seite .faq-liste summary:hover { color: var(--blue-700, #0349ae); }
.elementor .seite .faq-liste summary:focus-visible {
	outline: 3px solid var(--focus-ring, #1c6ad0);
	outline-offset: 2px;
	border-radius: 6px;
}
/* Plus-Symbol im Kreis; offen: blau, um 45° gedreht (= Kreuz) */
.elementor .seite .faq-liste summary > [aria-hidden="true"] {
	--bi: var(--bi-plus);
	display: grid;
	place-items: center;
	place-content: center; /* Elementors Grundregel setzt justify-content: flex-end, das schob das Plus nach rechts */
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: var(--blue-50, #eef4fd);
	color: var(--blue-700, #0349ae);
	transition: transform var(--b-dur-slow) var(--b-ease-in-out), background-color var(--dur-fast, .16s), color var(--dur-fast, .16s);
}
.elementor .seite .faq-liste summary:hover > [aria-hidden="true"] { background: var(--blue-100, #dce7f9); }
.elementor .seite .faq-tint .faq-liste summary > [aria-hidden="true"] { background: #fff; }

.elementor .seite .faq-liste > details.ist-offen > summary,
html:not(.kb-js) .elementor .seite .faq-liste > details[open] > summary { color: var(--blue-700, #0349ae); }
.elementor .seite .faq-liste > details.ist-offen > summary > [aria-hidden="true"],
html:not(.kb-js) .elementor .seite .faq-liste > details[open] > summary > [aria-hidden="true"] {
	background: var(--blue-600, #0a5ac4);
	color: #fff;
	transform: rotate(45deg);
}

/* Antwort */
.elementor .seite .faq-liste > details > :not(summary) {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 68ch;
	padding: 0 64px 24px 4px;
	font-size: var(--b-fs-body);
	color: var(--slate-600, #434b5b);
}
.elementor .seite .faq-liste > details > :not(summary) .e-paragraph-base {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	font-weight: 400;
	line-height: 1.62;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .faq-liste details a {
	color: var(--blue-700, #0349ae);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color var(--dur-fast, .16s) var(--ease-standard, ease), text-decoration-thickness var(--dur-fast, .16s) var(--ease-standard, ease);
}
.elementor .seite .faq-liste details a:hover {
	color: var(--blue-800, #053b8c);
	text-decoration-thickness: 2px;
}
.elementor .seite .faq-liste .faq-mehr a { font-weight: 600; }
.elementor .seite .faq-liste details a[href^="tel:"] { white-space: nowrap; }
/* Mit Skript: Antwort blendet beim Öffnen ein (Höhe animiert bausteine.js) */
.kb-js .elementor .seite .faq-liste > details > :not(summary) {
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--dur-base, .24s) var(--ease-standard, ease), transform var(--dur-base, .24s) var(--ease-standard, ease);
}
.kb-js .elementor .seite .faq-liste > details.ist-offen > :not(summary) {
	opacity: 1;
	transform: none;
	transition-delay: 60ms;
}
@media (max-width: 599px) {
	.elementor .seite .faq-liste > details > :not(summary) { padding-right: 20px; }
}

/* ------------------------------------------- Abschluss „Gutachten anfragen“ */

.elementor .seite .abschluss {
	position: relative;
	display: block;
	padding: 0;
	container: abschluss / inline-size;
}
.elementor .seite .abschluss-band {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, .75fr);
	align-items: center;
	gap: 40px;
	min-height: 220px;
	padding: 0 var(--rand-grid);
	background-color: var(--blue-700, #0349ae);
	background-image: var(--pattern-blueprint), var(--gradient-band);
	background-size: var(--pattern-blueprint-size), 100% 100%;
	color: #fff;
}
.elementor .seite .abschluss-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 48px 0;
}
.elementor .seite .abschluss-titel {
	margin: 0;
	font-family: var(--b-schrift-titel);
	font-size: clamp(1.5rem, 1.241rem + 1.105vw, 2.125rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	font-weight: 800;
	color: #fff;
}
.elementor .seite .abschluss-titel span {
	display: block;
	font-weight: 600;
	color: var(--blue-100, #dce7f9);
}
.elementor .seite .abschluss-unterzeile {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	line-height: 1.62;
	color: var(--blue-100, #dce7f9);
}
.elementor .seite .abschluss-knoepfe {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 0;
}
/* Bild läuft bis an den rechten Fensterrand (Formel wie Vercel; 100vw statt
   --rand-grid, weil Prozent im Rasterfeld sonst auf dessen Breite bezogen würden) */
.elementor .seite .abschluss-bild {
	position: relative;
	align-self: stretch;
	width: auto;
	padding: 0;
	margin-right: calc(-1 * max(var(--gutter, 40px), (100vw - 1240px) / 2));
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.elementor .seite .abschluss-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.elementor .seite .abschluss-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(5, 59, 140, .55), rgba(5, 59, 140, 0) 55%);
}

@container abschluss (min-width: 880px) and (max-width: 1199px) {
	.elementor .seite .abschluss-knoepfe {
		flex-direction: column;
		align-items: stretch;
	}
}
@container abschluss (max-width: 879px) {
	.elementor .seite .abschluss-band {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding-bottom: 48px;
	}
	.elementor .seite .abschluss-text { padding-bottom: 0; }
	.elementor .seite .abschluss-bild { display: none; }
	/* Wie bei Vercel: Die Knopfgruppe ist so breit wie beide Knöpfe nebeneinander.
	   Weil der Telefon-Knopf aber mindestens 240 px will, rutscht er darunter, und
	   beide werden gleich breit */
	.elementor .seite .abschluss-knoepfe {
		width: max-content;
		max-width: 100%;
	}
	.elementor .seite .abschluss-knoepfe .knopf { flex: 1 1 240px; }
}

/* Schmale Handys: lange Wörter in Überschriften und Fragen trennen (wie Vercel) */
@media (max-width: 400px) {
	.elementor .seite :is(h1, h2, h3),
	.elementor .seite .faq-liste summary {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* ------------------------------------------------------------ Bewegung */

@keyframes kb-einblenden-hoch {
	0% { opacity: .01; transform: translateY(16px); }
	100% { opacity: 1; transform: none; }
}
@keyframes kb-hero-zoom {
	0% { scale: 1.045; }
	100% { scale: 1; }
}
/* Handschrift „schreibt sich“ von links nach rechts (Vercels bf-write-in) */
@keyframes kb-schreiben {
	0% { clip-path: inset(-30% 100% -30% -10%); }
	100% { clip-path: inset(-30% -10%); }
}
/* Schwung unter der Handschrift zieht sich von links auf */
@keyframes kb-strich {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}
/* Kopfbereich: beim Laden einblenden und Bild sanft heranzoomen (ohne Skript) */
@media (prefers-reduced-motion: no-preference) {
	.elementor .seite :is(.hero, .start-hero) .einblenden { animation: kb-einblenden-hoch .64s var(--b-ease-expo) both; }
	.elementor .seite :is(.hero, .start-hero) .einblenden-2 { animation-delay: 80ms; }
	.elementor .seite :is(.hero, .start-hero) .einblenden-3 { animation-delay: 160ms; }
	.elementor .seite :is(.hero-img, .start-medien) { animation: kb-hero-zoom 1.8s cubic-bezier(.33, 1, .68, 1) both; }
	/* Startseite: Handschrift „schreibt sich“, danach ziehen sich die Schwünge auf */
	.elementor .seite .start-hero .handnotiz { animation: kb-schreiben .9s var(--b-ease-in-out) .45s backwards; }
	.elementor .seite .start-hero :is(.klemmbrett-kopf, .klemmbrett-fuss)::after { animation: kb-strich .64s var(--b-ease-expo) 1.1s both; }
	.elementor .seite .start-hero .klemmbrett-fuss::after { animation-delay: 1.25s; }
}
/* Gestapelt zoomt nur das Bild im Ausschnitt, nicht der Ausschnitt selbst */
@media (prefers-reduced-motion: no-preference) and (max-width: 1279.98px) {
	.elementor .seite .start-medien { animation: none; }
	.elementor .seite .start-bildbox { animation: kb-hero-zoom 1.8s cubic-bezier(.33, 1, .68, 1) both; }
}
/* Weiter unten: erst beim Hineinscrollen (bausteine.js setzt die Klassen) */
.kb-motion .elementor .seite .einblenden.wartet {
	opacity: 0;
	transform: translateY(16px);
}
.kb-motion .elementor .seite .einblenden.wartet.ist-sichtbar {
	opacity: 1;
	transform: none;
	transition: opacity .64s var(--b-ease-expo), transform .64s var(--b-ease-expo);
}
.kb-motion .elementor .seite .einblenden-2.wartet.ist-sichtbar { transition-delay: 80ms; }

@media (prefers-reduced-motion: reduce) {
	.elementor .seite *,
	.elementor .seite *::before,
	.elementor .seite *::after {
		animation: none !important;
		transition: none !important;
	}
}