/* =========================================================================
   Seiten-Bausteine (zuerst für „Häufige Fragen“, Post 124, dann der
   Kopfbereich der Startseite, Post 201, dann „Ablauf“, Post 213,
   „Ihr Gutachter“, Post 214, „Leistungen“, Post 347–353,
   „Kontakt“, Post 443, „Einsatzgebiete“, Post 497, sowie
   Impressum und Datenschutzerklärung, Post 549 und 550)
   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");
	/* Ablauf und Ihr Gutachter (Lucide wie Vercel). „-d“ = dünner Strich 1,75 wie dort bei
	   den großen Symbolen (Schritte, Marken, Merkmale), sonst Strich 2 */
	--bi-dreieck: 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='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
	--bi-telefon-ruf: 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%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94'/%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10'/%3E%3C/svg%3E");
	--bi-telefon-ruf-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' 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%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94'/%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10'/%3E%3C/svg%3E");
	--bi-kalender-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
	--bi-scan-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m16 16-1.9-1.9'/%3E%3C/svg%3E");
	--bi-datei-haken-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' 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='m9 15 2 2 4-4'/%3E%3C/svg%3E");
	--bi-hand-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
	--bi-haus: 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 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
	--bi-pin: 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 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--bi-pin-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--bi-werkzeug: 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='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
	--bi-haken-box: 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='M21 10.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.5'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
	--bi-uhr-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	--bi-druck: 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%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E");
	--bi-kamera-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
	--bi-extern: 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 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
	--bi-schild-haken-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' 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");
	/* Leistungsseiten (Lucide wie Vercel) */
	--bi-klemmbrett-haken-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
	--bi-sprechblase-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
	--bi-rechner-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E");
	--bi-datei-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' 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-personen-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--bi-waage-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");
	--bi-hagel-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='M16 14v2'/%3E%3Cpath d='M8 14v2'/%3E%3Cpath d='M16 20h.01'/%3E%3Cpath d='M8 20h.01'/%3E%3Cpath d='M12 16v2'/%3E%3Cpath d='M12 22h.01'/%3E%3C/svg%3E");
	--bi-auto-front-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8'/%3E%3Cpath d='M7 14h.01'/%3E%3Cpath d='M17 14h.01'/%3E%3Crect width='18' height='8' x='3' y='10' rx='2'/%3E%3Cpath d='M5 18v2'/%3E%3Cpath d='M19 18v2'/%3E%3C/svg%3E");
	--bi-auto-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
	--bi-tacho-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E");
	--bi-info: 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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
	--bi-haken-dick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	/* Kontakt (Lucide wie Vercel) */
	--bi-telefon-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' 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-mail: 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%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	--bi-mail-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	--bi-uhr: 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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	--bi-kamera: 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='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
	--bi-upload: 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='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' x2='12' y1='3' y2='15'/%3E%3C/svg%3E");
	--bi-upload-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' x2='12' y1='3' y2='15'/%3E%3C/svg%3E");
	--bi-wolke-hoch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='m8 17 4-4 4 4'/%3E%3Cpath d='M20.88 18.09A5 5 0 0 0 19 8.5h-1.26A8 8 0 1 0 4 15.25'/%3E%3C/svg%3E");
	--bi-pfeil-hoch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='m6 11 6-6 6 6'/%3E%3C/svg%3E");
	/* Einsatzgebiete: Route (Lucide) */
	--bi-route: 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%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E");
	/* Häkchen im Kreis: zweifarbig, deshalb als Bild statt als Maske */
	--bi-haken-weiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--bi-haken-blau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230349ae' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Schrift Kaushan Script (Handschrift der ganzen Website): seit 13.10.2026 im Reiter „Schriften“ des
   Plugins. Es erzeugt die @font-face-Regeln in wp-content/pixel-kreativ-code/schriften/schriften.css
   (selbst gehostet, ohne Google-Server, font-display: swap). */

@media (max-width: 959px) {
	:root { --b-kopfhoehe: 64px; }
}
/* Angemeldet (WordPress-Leiste oben, 21.10.2026): kopfbereich.css rückt den Kopf um die Leiste nach unten,
   32 px, bis 782 px Breite 46 px, unter 601 px scrollt die Leiste mit (dann 0). Alles, was unter dem Kopf
   klebt oder dorthin springt, rechnet mit --b-kopfhoehe; hier also Kopf plus Leiste. Vorher rutschte z. B.
   die Schrittleiste auf „Ablauf“ 32 px unter den Kopf (Bild des Auftraggebers). Besucher ohne Anmeldung
   betrifft das nicht. */
.admin-bar { --b-leiste: 32px; --b-kopfhoehe: 120px; }
@media (max-width: 959px) { .admin-bar { --b-kopfhoehe: 96px; } }
@media (max-width: 782px) { .admin-bar { --b-leiste: 46px; --b-kopfhoehe: 110px; } }
@media (max-width: 600px) { .admin-bar { --b-leiste: 0px; --b-kopfhoehe: 64px; } }
.admin-bar .elementor .seite .info-karte { scroll-margin-top: calc(110px + var(--b-leiste)); }
.admin-bar .elementor .seite .formular-karte { scroll-margin-top: calc(100px + var(--b-leiste)); }


/* ------------------------------------------------------------ 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,
.elementor .seite .ico-telefon-ruf::before,
.elementor .seite .ico-telefon-ruf-d::before,
.elementor .seite .ico-kalender-d::before,
.elementor .seite .ico-scan-d::before,
.elementor .seite .ico-datei-haken-d::before,
.elementor .seite .ico-hand-d::before,
.elementor .seite .ico-haus::before,
.elementor .seite .ico-pin::before,
.elementor .seite .ico-pin-d::before,
.elementor .seite .ico-werkzeug::before,
.elementor .seite .ico-uhr-d::before,
.elementor .seite .ico-druck::before,
.elementor .seite .ico-kamera-d::before,
.elementor .seite .ico-extern::before,
.elementor .seite .ico-schild-haken-d::before,
.elementor .seite .ico-klemmbrett-haken-d::before,
.elementor .seite .ico-sprechblase-d::before,
.elementor .seite .ico-rechner-d::before,
.elementor .seite .ico-datei-d::before,
.elementor .seite .ico-personen-d::before,
.elementor .seite .ico-waage-d::before,
.elementor .seite .ico-hagel-d::before,
.elementor .seite .ico-auto-front-d::before,
.elementor .seite .ico-auto-d::before,
.elementor .seite .ico-tacho-d::before,
.elementor .seite .hinweis-box::before,
.elementor .seite .karte-kompakt::after,
.elementor .seite .leistung-text::after,
.elementor .seite .wahl-fuss::after,
.elementor .seite .checkliste-punkt::before,
.elementor .seite .hinweis-pill::before,
.elementor .seite .hinweis-pill::after,
.elementor .seite .ico-telefon-d::before,
.elementor .seite .ico-mail::before,
.elementor .seite .ico-mail-d::before,
.elementor .seite .ico-uhr::before,
.elementor .seite .ico-kamera::before,
.elementor .seite .ico-upload::before,
.elementor .seite .ico-upload-d::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 .ico-telefon-ruf { --bi: var(--bi-telefon-ruf); }
.elementor .seite .ico-telefon-ruf-d { --bi: var(--bi-telefon-ruf-d); }
.elementor .seite .ico-kalender-d { --bi: var(--bi-kalender-d); }
.elementor .seite .ico-scan-d { --bi: var(--bi-scan-d); }
.elementor .seite .ico-datei-haken-d { --bi: var(--bi-datei-haken-d); }
.elementor .seite .ico-hand-d { --bi: var(--bi-hand-d); }
.elementor .seite .ico-haus { --bi: var(--bi-haus); }
.elementor .seite .ico-pin { --bi: var(--bi-pin); }
.elementor .seite .ico-pin-d { --bi: var(--bi-pin-d); }
.elementor .seite .ico-werkzeug { --bi: var(--bi-werkzeug); }
.elementor .seite .ico-uhr-d { --bi: var(--bi-uhr-d); }
.elementor .seite .ico-druck { --bi: var(--bi-druck); }
.elementor .seite .ico-kamera-d { --bi: var(--bi-kamera-d); }
.elementor .seite .ico-extern { --bi: var(--bi-extern); }
.elementor .seite .ico-schild-haken-d { --bi: var(--bi-schild-haken-d); }
.elementor .seite .ico-klemmbrett-haken-d { --bi: var(--bi-klemmbrett-haken-d); }
.elementor .seite .ico-sprechblase-d { --bi: var(--bi-sprechblase-d); }
.elementor .seite .ico-rechner-d { --bi: var(--bi-rechner-d); }
.elementor .seite .ico-datei-d { --bi: var(--bi-datei-d); }
.elementor .seite .ico-personen-d { --bi: var(--bi-personen-d); }
.elementor .seite .ico-waage-d { --bi: var(--bi-waage-d); }
.elementor .seite .ico-hagel-d { --bi: var(--bi-hagel-d); }
.elementor .seite .ico-auto-front-d { --bi: var(--bi-auto-front-d); }
.elementor .seite .ico-auto-d { --bi: var(--bi-auto-d); }
.elementor .seite .ico-tacho-d { --bi: var(--bi-tacho-d); }
.elementor .seite .ico-telefon-d { --bi: var(--bi-telefon-d); }
.elementor .seite .ico-mail { --bi: var(--bi-mail); }
.elementor .seite .ico-mail-d { --bi: var(--bi-mail-d); }
.elementor .seite .ico-uhr { --bi: var(--bi-uhr); }
.elementor .seite .ico-kamera { --bi: var(--bi-kamera); }
.elementor .seite .ico-upload { --bi: var(--bi-upload); }
.elementor .seite .ico-upload-d { --bi: var(--bi-upload-d); }
.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:not(.knopf-ghost) {
		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), Handschrift Kaushan Script,
     Farben, Vertrauenspunkte, der weiße Schleier mit seiner Schräge und das Klemmbrett.
     Die Werte stammen aus new.s Startseite. Überschrift und Text seit 13.10.2026 in
     Archivo wie die übrige Website, statt Sora und Inter (Auftraggeber: Inter „sieht
     nach KI-Baukasten aus“, Sora ebenso ersetzt).
   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: var(--b-schrift);
	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: var(--b-schrift-titel);
	font-size: clamp(34px, 3.85vw, 60px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.03em; /* wie die Überschriften der Unterseiten (Archivo) */
	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: var(--b-schrift);
	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: var(--b-schrift);
	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: var(--b-schrift-titel);
	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: var(--b-schrift);
	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: var(--b-schrift);
}
.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);
}
/* Textlinks wie Vercel (auch in den Karten von Impressum und Datenschutz) */
.elementor .seite .faq-liste details a,
.elementor .seite .recht-karte 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,
.elementor .seite .recht-karte 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; }
}

/* =========================================================================
   Ablauf (Post 213) und Ihr Gutachter (Post 214), 13.10.2026
   Nach kfz-biesterfeldt.vercel.app/ablauf und /ihr-gutachter, Werte dort
   ausgelesen. Die Kopfbereiche folgen wie die FAQ-Seite dem Startseiten-Hero
   (volle Breite, Text weit links, weißer Schleier). Alles Weitere wie Vercel.
   Die Bauteile sind allgemein gehalten und für weitere Seiten gedacht.
   ========================================================================= */

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

.elementor .seite .abschnitt {
	position: relative;
	display: block;
	padding-block: var(--b-section-y);
	padding-inline: var(--rand-grid);
	scroll-margin-top: calc(var(--b-kopfhoehe) + 12px);
}
.elementor .seite .abschnitt-tint { background: var(--blue-50, #eef4fd); }
/* Blaues Band mit Blaupausen-Raster (Vercels bf-section--brand) */
.elementor .seite .band-blau {
	background-color: var(--blue-700, #0349ae);
	background-image: var(--pattern-blueprint), var(--gradient-band);
	background-size: var(--pattern-blueprint-size), 100% 100%;
	color: #fff;
}
/* Abschnittskopf auf blauem Grund */
.elementor .seite .sh-inverse :is(.sh-h1, .sh-h2) { color: #fff; }
.elementor .seite .sh-inverse .sh-eyebrow,
.elementor .seite .sh-inverse :is(.sh-h1, .sh-h2) span,
.elementor .seite .sh-inverse .sh-lead { color: var(--blue-100, #dce7f9); }
/* Zweiter Teil der Überschrift in derselben Zeile („In fünf Schritten zum Gutachten.“) */
.elementor .seite .akzent-inline span { display: inline; }
/* Zwei Spalten, die unter der Mindestbreite untereinander rutschen */
.elementor .seite .raster-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(36px, 5vw, 80px);
	align-items: center;
	padding: 0;
}
.elementor .seite .raster-440 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(36px, 5vw, 72px);
}
.elementor .seite .raster-460 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.elementor .seite .raster-2.raster-gap-80 { gap: clamp(36px, 5vw, 80px); }
.elementor .seite .spalte {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
	padding: 0;
}
.elementor .seite .spalte-eng { gap: 12px; }
.elementor .seite .spalte-weit { gap: 2.5rem; }
/* Ein Knopf allein in der Spalte bleibt so breit wie sein Text */
.elementor .seite .spalte > .knopf { align-self: flex-start; }

/* ------------------------------------------------------- Handnotiz */
/* Blau, leicht gekippt wie bei Vercel. Schreibt sich beim Hineinscrollen
   (bausteine.js), im Kopfbereich beim Laden. Dreh-Klassen für andere Winkel.
   Seit 13.10.2026 in Kaushan Script wie das Klemmbrett der Startseite (eine Handschrift
   für die ganze Website, Auftraggeber). Kaushan läuft breiter als das frühere Caveat
   (gemessen über alle 26 Notizen: Faktor 0,82–0,89), deshalb 86 % von Vercels Größe:
   so bleiben die Notizen gleich lang. Kaushan gibt es nur in Stärke 400. */
.elementor .seite .notiz {
	display: inline-block;
	width: auto;
	margin: 0;
	font-family: "Kaushan Script", "Segoe Print", "Bradley Hand", cursive;
	font-size: calc(.86 * clamp(1.5rem, 1.241rem + 1.105vw, 2.125rem));
	font-weight: 400;
	font-synthesis: none;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--blue-600, #0a5ac4);
	text-wrap: balance;
	transform: rotate(var(--notiz-dreh, -4deg));
	transform-origin: 0 50%;
}
.elementor .seite .notiz-klein { font-size: calc(.86 * clamp(1.25rem, 1.146rem + .442vw, 1.5rem)); }
.elementor .seite .notiz-weiss {
	color: #fff;
	text-shadow: 0 1px 3px rgba(3, 24, 61, .45);
}
.elementor .seite .dreh-3 { --notiz-dreh: -3deg; }
.elementor .seite .dreh-6 { --notiz-dreh: -6deg; }
.elementor .seite .dreh-7 { --notiz-dreh: -7deg; }
/* Unterstrichen: Der Strich zieht sich auf. Wie bei Vercel endet er ungekippt, weil
   die Animation die Drehung überschreibt */
.elementor .seite .notiz-strich {
	position: relative;
	padding-bottom: .14em;
}
.elementor .seite .notiz-strich::after {
	content: "";
	position: absolute;
	inset: auto -6% 0 4%;
	height: .075em;
	min-height: 2px;
	border-radius: 999px;
	background: currentColor;
	transform: rotate(-2deg);
	transform-origin: 0 50%;
}

/* ------------------------- Kopfbereich mit Bild rechts (Ablauf, Leistungen) */
/* Bild rechts verankert und 64 % breit (mindestens 640 px), links weich
   ausgeblendet. Der Rand liegt immer unter dem Schleier, der Hero wirkt also
   durchgehend. Bei voller Breite wären Personen und Motive auf breiten Schirmen
   zu stark angeschnitten. Der Bildausschnitt steht je Seite darunter. */
.elementor .seite .hero-rechts .hero-img {
	width: max(64%, 640px);
	margin-left: auto;
	transform-origin: 70% 30%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
	mask-image: linear-gradient(90deg, transparent 0, #000 18%);
}
/* Bildausschnitte wie Vercel (Computer; gestapelt siehe unten) */
.elementor .seite .hero-ablauf .hero-img { object-position: 50% 6%; }
.elementor .seite .hero-mitte .hero-img { object-position: 50% 50%; }
.elementor .seite .hero-unfall .hero-img { object-position: 60% 55%; }
.elementor .seite .hero-wert .hero-img { object-position: 45% 55%; }
.elementor .seite .hero-oldtimer .hero-img { object-position: 50% 55%; }
.elementor .seite .hero-leistungen .hero-img { object-position: 35% 55%; }
/* Leistungsseiten wie Vercel: Knöpfe in einer Reihe, auch wenn sie breiter sind
   als die Textspalte; vier Vertrauenspunkte nebeneinander */
.elementor .seite .knopf-reihe.knopf-reihe-breit {
	width: max-content;
	max-width: calc(100vw - 2 * var(--gutter, 20px));
}
.elementor .seite .knopf-reihe-breit > .knopf { max-width: 100%; }
.elementor .seite .merkmale-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
	gap: 20px 14px;
	width: 100%;
	max-width: 640px;
	margin-top: 8px;
	padding: 0;
}
.elementor .seite .merkmal.merkmal-mitte {
	align-items: center;
	text-align: center;
}
@media (min-width: 1100px) {
	/* Die vier Punkte bleiben auf dem Computer immer in einer Reihe */
	.elementor .seite .hero .merkmale-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* Leistungsseiten: Textspalte so breit wie bei Vercel (sonst wird der Hero mit
	   den längeren Texten deutlich höher als dort); der Schleier folgt der Spalte,
	   oben 90 px, unten 10 px rechts davon */
	.elementor .seite .hero-breit .hero-text { max-width: clamp(560px, 40vw, 680px); }
	.elementor .seite .hero-breit .hero-schleier-1 {
		clip-path: polygon(0 0, calc(var(--b-start-l) + clamp(560px, 40vw, 680px) + 90px) 0, calc(var(--b-start-l) + clamp(560px, 40vw, 680px) + 10px) 100%, 0 100%);
	}
}
/* „Gerade einen Unfall gehabt?“: Sprung zum Abschnitt „Nach dem Unfall“ */
.elementor .seite .hinweis-pill {
	display: inline-flex;
	flex: 0 0 auto;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	width: auto;
	min-height: 44px;
	padding: 6px 16px 6px 12px;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px #03183d0f;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--navy-950, #03183d);
	text-decoration: none;
	transition: border-color .16s, color .16s;
}
.elementor .seite .hinweis-pill::before {
	--bi: var(--bi-dreieck);
	width: 18px;
	height: 18px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .hinweis-pill::after {
	--bi: var(--bi-pfeil);
	width: 16px;
	height: 16px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .hinweis-pill .e-paragraph-base {
	margin: 0;
	font: inherit;
	color: inherit;
}
.elementor .seite .hinweis-pill:hover {
	border-color: var(--blue-700, #0349ae);
	color: var(--blue-700, #0349ae);
}

@media (max-width: 1099.98px) {
	.elementor .seite .hero-rechts .hero-img {
		width: 100%;
		margin: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.elementor .seite .hero-ablauf .hero-img { object-position: 62% 22%; }
	.elementor .seite .hero-unfall .hero-img { object-position: 50% 55%; }
	.elementor .seite .hero-leistungen .hero-img { object-position: 30% 55%; }
}
/* Leistungsseiten (Übersicht und sechs Leistungen): Bild über die volle Breite wie auf
   „Häufige Fragen“ (Auftraggeber 14.10.2026). Das Motiv bleibt rechts im abgestimmten
   Ausschnitt; dahinter liegt über die ganze Fläche dieselbe Aufnahme stark
   weichgezeichnet. Unter dem Schleier steht so eine ruhige Fläche in den Farben des Bildes
   statt Weiß. Gespiegelt wie auf „Einsatzgebiete“ ging es hier nicht: Personen, Hände und
   Autos standen doppelt da. Die Bildadresse reicht bausteine.js (Nr. 9) als --hero-url
   durch, ein in Elementor getauschtes Bild kommt also von selbst mit.
   Seit 14.10.2026 genauso auf Impressum (549) und Datenschutzerklärung (550). */
@media (min-width: 1100px) {
	body:is(.page-id-347, .parent-pageid-347, .page-id-549, .page-id-550) .elementor .seite .hero-rechts .hero-img { position: relative; }
	body:is(.page-id-347, .parent-pageid-347, .page-id-549, .page-id-550) .elementor .seite .hero-rechts .hero-bild::before {
		content: "";
		position: absolute;
		inset: -60px;
		width: auto;
		height: auto;
		background: var(--hero-url, none) 50% 55% / cover no-repeat;
		filter: blur(32px);
		opacity: 0;
		mix-blend-mode: normal;
		border-radius: 0;
		transition: opacity .6s;
		pointer-events: none;
	}
	body:is(.page-id-347, .parent-pageid-347, .page-id-549, .page-id-550) .elementor .seite .hero-rechts .hero-bild.mit-hintergrund::before { opacity: 1; }
}

/* ------------------------------- Kopfbereich mit Porträt: Ihr Gutachter */
/* Volle Breite, Text weit links wie die anderen Heros. Rechts das freigestellte
   Porträt vor einem hellblauen Kreis, darüber die Handnotiz (wie Vercel).
   Spalten wie Vercel 1,3 : 1, der Text höchstens 760 px breit. */
.elementor .seite .hero-portraet {
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0 40px;
	min-height: 0;
	padding-block: 0;
	background: var(--slate-25, #f9fafd);
}
.elementor .seite .hero-portraet .hero-text {
	flex: 1.3 1 520px;
	justify-content: center;
	gap: 22px;
	max-width: 760px;
	padding-block: clamp(40px, 5vw, 72px);
}
.elementor .seite .portraet {
	position: relative;
	order: 2;
	display: block;
	flex: 1 1 360px;
	min-height: clamp(380px, 38vw, 560px);
	padding: 0;
}
.elementor .seite .portraet-medien {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
	transition: transform .5s cubic-bezier(.25, .46, .45, .94);
}
.elementor .seite .portraet-medien::before {
	content: "";
	position: absolute;
	inset: auto auto -18% 50%;
	width: min(560px, 112%);
	aspect-ratio: 1;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 50%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, var(--blue-100, #dce7f9) 0%, var(--blue-100, #dce7f9) 70%, rgba(220, 231, 249, 0) 100%);
	transition: none;
}
.elementor .seite .portraet-img {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: auto;
	height: calc(100% - 24px);
	max-height: 540px;
	max-width: none;
	transform: translateX(-50%);
}
.elementor .seite .portraet-notiz {
	position: absolute;
	left: 0;
	top: max(0px, calc(max(100% - 540px, 24px) - 45px));
	z-index: 1;
	display: block;
	width: 160px;
	padding: 0;
}
/* Name unter der Überschrift: groß und fett, daneben der Beruf */
.elementor .seite .name-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0;
	font-family: var(--b-schrift);
	line-height: 1.62;
}
.elementor .seite .name-zeile span:first-child {
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--navy-950, #03183d);
}
.elementor .seite .name-zeile span:last-child {
	font-size: 1rem;
	color: var(--slate-500, #5a6272);
}
.elementor .seite .sh-lead.lead-schmal {
	max-width: 56ch;
	margin: 0;
}
/* Etwas größere Überschrift als die anderen Heros (Vercel, Ihr Gutachter) */
.elementor .seite .sh-h1.h1-gross {
	font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.375rem);
	line-height: 1.04;
}
.elementor .seite .knopf-reihe.knopf-reihe-luft { margin-top: 4px; }

@media (max-width: 1099.98px) {
	/* Gestapelt wie die anderen Heros: oben das Porträt, darunter der Text */
	.elementor .seite .hero-portraet {
		flex-direction: column;
		gap: 0;
		padding: 0 0 48px;
	}
	.elementor .seite .portraet {
		order: 0;
		flex: 0 0 auto;
		width: 100%;
	}
	/* Handnotiz mit Rand wie der Text und etwas tiefer, sonst schneidet der obere
	   Rand des Heros sie an (das Porträt steht hier ganz oben) */
	.elementor .seite .portraet-notiz {
		left: var(--rand-grid, 20px);
		top: 24px;
	}
	.elementor .seite .hero-portraet .hero-text {
		flex: 0 0 auto;
		max-width: none;
		padding: clamp(28px, 4vw, 40px) var(--rand-grid, 20px) 0;
	}
}

/* ----------------------------------------------------- Knöpfe (Ergänzung) */

/* Textknopf (Vercels bf-btn--ghost): blau, ohne Fläche, beim Überfahren hellblau */
.elementor .seite .knopf-ghost {
	color: var(--blue-700, #0349ae);
	background-color: transparent;
	background-image: none;
	border-color: transparent;
	border-radius: 6px;
	padding-inline: 10px;
	box-shadow: none;
}
.elementor .seite .knopf-ghost:hover {
	color: var(--blue-800, #053b8c);
	background-color: var(--blue-50, #eef4fd);
}
.elementor .seite .knopf-ghost:active { background-color: var(--blue-100, #dce7f9); }
/* Klein: 44 px hoch, 15 px Schrift, Symbole 18 px */
.elementor .seite .knopf-klein {
	min-height: 44px;
	gap: 8px;
	padding-inline: 20px;
	font-size: .9375rem;
}
.elementor .seite .knopf-klein.knopf-ghost { padding-inline: 10px; }
.elementor .seite .knopf-klein::before,
.elementor .seite .knopf-klein::after { width: 18px; height: 18px; }
/* WhatsApp als Textknopf: grünes WhatsApp-Zeichen wie im Footer (Wunsch des Kunden) */
.elementor .seite .knopf-ghost.ico-whatsapp::before { color: #25d366; }
/* Telefonnummern mit Unterzeile auf blauem Grund (112, 110) */
.elementor .seite .knopf-inverse-sekundaer .knopf-sub { color: var(--blue-100, #dce7f9); }
/* Textlinks nebeneinander („Zum Anfrageformular“, „Rückruf anfordern“) */
.elementor .seite .textlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	padding: 0;
}
/* „Rückruf anfordern“: Symbol vorn statt Pfeil hinten. position/inset gegen Elementors
   Container-::before (absolut oben links, saß sonst über dem „R“; 14.10.2026) */
.elementor .seite .link-rueckruf::after { display: none; }
.elementor .seite .link-rueckruf::before {
	content: "";
	position: static;
	inset: auto;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--bi-telefon-ruf) center / contain no-repeat;
	mask: var(--bi-telefon-ruf) center / contain no-repeat;
}

/* ------------------------------------------- Fünf Schritte (Übersicht) */
/* Vercels bf-steps: fünf Spalten mit Pfeilen. Ist die Fläche schmaler als 828 px,
   drei Spalten ohne Pfeile (wie Vercels Skript), unter 720 px eine senkrechte
   Liste mit Verbindungslinie. */
.elementor .seite .uebersicht {
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.elementor .seite .uebersicht-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	padding: 0;
}
.elementor .seite .uebersicht-kopf > .sh {
	flex: 0 1 auto;
	width: auto;
}
.elementor .seite .uebersicht-karte {
	display: block;
	padding: clamp(24px, 3.5vw, 44px);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}
.elementor .seite .schritte {
	display: block;
	width: 100%;
	padding: 0;
	container: schritte / inline-size;
}
.elementor .seite .schritte-liste {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
}
.elementor .seite .schritt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 0;
	text-align: center;
}
.elementor .seite .schritt-symbol {
	position: relative;
	display: grid;
	place-items: center;
	place-content: center;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	padding: 0;
	border-radius: 50%;
	background: var(--blue-50, #eef4fd);
	color: var(--blue-700, #0349ae);
}
.elementor .seite .schritt-symbol::before { width: 28px; height: 28px; }
.elementor .seite .schritt-nr {
	position: absolute;
	top: -4px;
	right: -6px;
	display: grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	margin: 0;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--blue-600, #0a5ac4);
	box-shadow: 0 0 0 3px #fff;
	font-family: var(--b-schrift);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.62;
	color: #fff;
}
.elementor .seite .schritt-titel {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: clamp(1.125rem, 1.073rem + .221vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal; /* das Kit gibt h3 sonst −0,2 px, dann bricht der Titel anders um als bei Vercel */
	color: var(--navy-950, #03183d);
	text-wrap: balance;
}
/* Titel springt zum Schritt; Trefferfläche oben und unten 12 px größer */
.elementor .seite .schritt-titel a {
	position: relative;
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px;
	color: inherit;
	text-decoration: none;
}
.elementor .seite .schritt-titel a:hover {
	color: var(--blue-700, #0349ae);
	text-decoration: underline;
}
.elementor .seite .schritt-text {
	max-width: 28ch;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--slate-500, #5a6272);
}
/* Pfeil zum nächsten Schritt, mittig auf Höhe der Kreise */
.elementor .seite .schritt:not(:last-child)::after {
	content: "";
	position: absolute;
	inset: 20px -28px auto auto;
	width: 24px;
	height: 24px;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 0;
	background: var(--blue-300, #88aee8);
	-webkit-mask: var(--bi-pfeil) center / contain no-repeat;
	mask: var(--bi-pfeil) center / contain no-repeat;
}
@container schritte (max-width: 827.98px) {
	.elementor .seite .schritte-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.elementor .seite .schritt::after { display: none; }
}
@container schritte (max-width: 719.98px) {
	/* Abstand 32 px bleibt wie bei Vercel (dort hebt der Inline-Abstand die 0 der
	   Container-Regel auf); die Linie setzt deshalb zwischen den Schritten aus */
	.elementor .seite .schritte-liste { grid-template-columns: minmax(0, 1fr); }
	.elementor .seite .schritt {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 2px;
		align-items: start;
		padding-bottom: 24px;
		text-align: left;
	}
	.elementor .seite .schritt-symbol {
		grid-row: span 2;
		width: 56px;
		height: 56px;
		margin: 0;
	}
	.elementor .seite .schritt-titel { padding-top: 6px; }
	.elementor .seite .schritt-text { max-width: none; }
	.elementor .seite .schritt:not(:last-child)::before {
		content: "";
		position: absolute;
		inset: 64px auto 8px 27px;
		width: 2px;
		opacity: 1;
		mix-blend-mode: normal;
		border-radius: 2px;
		background: var(--blue-100, #dce7f9);
	}
}

/* ---------------------------------------------- Fortschrittsleiste */
/* Vercels ProgressNav: klebt unter dem Kopfbereich über den fünf Schritten. Der
   aktuelle Schritt ist blau, erledigte hellblau, die Linie zeigt den Fortschritt.
   Zustände und Zähler setzt bausteine.js. */
.elementor .seite .schritte-abschnitt {
	display: block;
	padding: 0 0 var(--b-section-y);
	overflow-x: clip;
	scroll-margin-top: var(--b-kopfhoehe);
}
.elementor .seite .fortschritt {
	position: sticky;
	top: var(--b-kopfhoehe);
	z-index: 30;
	display: block;
	padding: 0;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: var(--blur-header);
	backdrop-filter: var(--blur-header);
	border-bottom: 1px solid var(--slate-200, #d9e0ea);
}
.elementor .seite .fortschritt-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 60px;
	padding: 0 var(--rand-grid);
}
.elementor .seite .fortschritt-zahl {
	flex: none;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.62;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .fortschritt-kurz { display: none; }
.elementor .seite .fortschritt-liste {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.elementor .seite .fortschritt-punkt {
	display: block;
	width: auto; /* Elementor gibt Containern sonst 100 %, dann verteilen sich die Punkte über die Leiste */
	min-width: 0;
	padding: 0;
}
.elementor .seite .fortschritt-link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 4px 10px 4px 6px;
	border-radius: 999px;
	color: var(--slate-500, #5a6272);
	text-decoration: none;
	transition: color .24s;
}
.elementor .seite .fortschritt-link:hover {
	color: var(--slate-500, #5a6272);
	background: var(--slate-50, #f3f6fa);
}
.elementor .seite .fortschritt-link.ist-aktiv,
.elementor .seite .fortschritt-link.ist-aktiv:hover { color: var(--navy-950, #03183d); }
.elementor .seite .fortschritt-nr {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 50%;
	background: var(--slate-100, #e8edf4);
	font-family: var(--b-schrift);
	font-size: .875rem;
	font-weight: 800;
	line-height: 1.62;
	color: var(--slate-500, #5a6272);
	transition: background-color .24s, color .24s;
}
.elementor .seite .fortschritt-link.ist-erledigt .fortschritt-nr {
	background: var(--blue-100, #dce7f9);
	color: var(--blue-700, #0349ae);
}
.elementor .seite .fortschritt-link.ist-aktiv .fortschritt-nr {
	background: var(--blue-700, #0349ae);
	color: #fff;
}
/* Namen nur ab 901 px (Vercel: „max-width: clamp(0, (100vw − 900) × 1000, 160px)“) */
.elementor .seite .fortschritt-name {
	display: block;
	max-width: clamp(0px, calc((100vw - 900px) * 1000), 160px);
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--b-schrift);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.62;
	color: inherit;
}
.elementor .seite .fortschritt-linie {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 2px;
	padding: 0;
	background: var(--blue-700, #0349ae);
	transition: width .16s linear;
}
@media (max-width: 900px) {
	.elementor .seite .fortschritt-link {
		gap: 0;
		padding: 4px 7px;
	}
}
@media (max-width: 429.98px) {
	.elementor .seite .fortschritt-zahl { line-height: 1.3; }
	.elementor .seite .fortschritt-zahl span { display: block; }
}
@media (max-width: 399.98px) {
	.elementor .seite .fortschritt-nav { gap: 8px; }
	.elementor .seite .fortschritt-liste { gap: 0; }
}
@media (max-width: 359.98px) {
	.elementor .seite .fortschritt-zahl:not(.fortschritt-kurz) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.elementor .seite .fortschritt-kurz { display: inline; }
}

/* ------------------------------------------------ Schritte im Detail */

.elementor .seite .schritte-artikel-liste {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 6vw, 80px);
	padding: clamp(48px, 6vw, 80px) var(--rand-grid) 0;
}
.elementor .seite .schritt-artikel {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 36px clamp(36px, 5vw, 80px);
	padding: 0;
	/* unter Kopfbereich und Fortschrittsleiste (60 px) mit 12 px Luft */
	scroll-margin-top: calc(var(--b-kopfhoehe) + 72px);
}
.elementor .seite .schritt-artikel-gedreht { flex-direction: row-reverse; }
/* Knopf und Textlink in einer Reihe: 20 px Abstand nebeneinander (Schritt 5) */
.elementor .seite .schritt-inhalt .knopf-reihe:has(> .mehr-link) { column-gap: 20px; }
.elementor .seite .schritt-inhalt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 420px;
	gap: 20px;
	min-width: 0;
	padding: 0;
}
.elementor .seite .schritt-medien {
	position: relative;
	display: block;
	flex: .85 1 360px;
	min-width: 0;
	max-width: 560px;
	padding: 0;
}
/* Nummer im Kreis und Symbol in der Kachel */
.elementor .seite .schritt-marke {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0;
}
.elementor .seite .marke-nr {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 50%;
	background: var(--blue-600, #0a5ac4);
	box-shadow: var(--shadow-action, 0 8px 20px -8px #0a5ac499);
	font-family: var(--b-schrift);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.62;
	color: #fff;
}
.elementor .seite .marke-symbol,
.elementor .seite .infobox-symbol {
	display: grid;
	place-items: center;
	place-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 14px;
	background: var(--blue-50, #eef4fd);
	color: var(--blue-700, #0349ae);
}
.elementor .seite :is(.marke-symbol, .infobox-symbol)::before { width: 26px; height: 26px; }
/* Besichtigungsorte als Chips */
.elementor .seite .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.elementor .seite .chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	width: auto;
	min-height: 44px;
	padding: 0 16px 0 12px;
	border-radius: 999px;
	background: var(--blue-50, #eef4fd);
	font-family: var(--b-schrift);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.62;
	color: var(--navy-950, #03183d);
}
.elementor .seite .chip::before { color: var(--blue-700, #0349ae); }
.elementor .seite .chip .e-paragraph-base {
	margin: 0;
	font: inherit;
	color: inherit;
}
/* „In der Regel 24–48 Stunden“ */
.elementor .seite .infobox {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	width: 100%;
	max-width: 460px;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--blue-50, #eef4fd);
}
.elementor .seite .infobox-symbol { background: #fff; }
.elementor .seite .infobox-text {
	display: block;
	min-width: 0;
	padding: 0;
}
.elementor .seite .infobox-titel {
	display: block;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--navy-950, #03183d);
}
.elementor .seite .infobox-zeile {
	display: block;
	margin: 2px 0 0;
	font-family: var(--b-schrift);
	font-size: .875rem;
	line-height: 1.4;
	color: var(--slate-500, #5a6272);
}

/* ------------------------------------------------------- Fotorahmen */
/* Vercels bf-photo: 3:2 (oder 4:3), 8 px Rundung, schräg angeschnitten
   oder 14 px rund. Zweites Bild klein mit weißem Rahmen davor. */
.elementor .seite .foto {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	padding: 0;
	border-radius: 8px;
	background: var(--slate-100, #e8edf4);
}
.elementor .seite .foto-4x3 { aspect-ratio: 4 / 3; }
.elementor .seite .foto-rund { border-radius: 14px; }
.elementor .seite .foto-schnitt {
	border-radius: 0;
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
.elementor .seite .foto-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .64s cubic-bezier(.16, 1, .3, 1);
}
.elementor .seite .foto-paar {
	position: relative;
	display: block;
	padding: 0 0 40px;
}
.elementor .seite .foto-paar-notiz { padding-top: 48px; }
.elementor .seite .foto-haupt { width: 86%; }
.elementor .seite .foto-einsatz {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 40%;
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--shadow-lg, 0 4px 8px #03183d0d, 0 24px 56px -16px #03183d4d);
}
/* Bildausschnitt je Einbau als lokaler Stil (Elementor: Stil › Objektposition) */
.elementor .seite .foto-1x1 { aspect-ratio: 1 / 1; }
.elementor .seite .notiz-ort {
	position: absolute;
	left: 8%;
	top: 0;
	z-index: 1;
	display: block;
	width: auto;
	padding: 0;
}

/* ------------------------------------------------------- Checkliste */
/* Vercels bf-checklist: Häkchen-Kästchen, Titel fett, Unterzeile grau.
   Als Karte weiß mit Rand und Schatten, klein in den Schritten. */
.elementor .seite .checkliste {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0;
}
.elementor .seite .checkliste-karte {
	padding: 32px 32px 24px;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 4px #03183d0d, 0 12px 28px -10px #03183d38;
	scroll-margin-top: calc(var(--b-kopfhoehe) + 12px);
}
.elementor .seite .checkliste-liste {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
}
.elementor .seite .checkliste-punkt {
	--bi: var(--bi-haken-box);
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 0;
	align-items: start;
	padding: 0;
}
.elementor .seite .checkliste-punkt::before {
	grid-row: 1 / span 2;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	color: var(--blue-600, #0a5ac4);
}
.elementor .seite .checkliste-titel,
.elementor .seite .checkliste-text {
	grid-column: 2;
	display: block;
	margin: 0;
	font-family: var(--b-schrift);
}
.elementor .seite .checkliste-titel {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--navy-950, #03183d);
}
.elementor .seite .checkliste-text {
	margin-top: 2px;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--slate-500, #5a6272);
}
.elementor .seite .checkliste-klein { width: 100%; }
.elementor .seite .checkliste-klein .checkliste-liste { gap: 12px; }
.elementor .seite .checkliste-klein .checkliste-punkt {
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 10px;
}
.elementor .seite .checkliste-klein .checkliste-punkt::before { width: 22px; height: 22px; }
.elementor .seite .checkliste-klein .checkliste-titel { font-size: .9375rem; }
.elementor .seite .checkliste-klein .checkliste-text { font-size: .8125rem; }
.elementor .seite .druck-reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 16px;
	padding: 0;
}

/* ------------------------------------------------- Nach dem Unfall */
/* Blaues Band: links die nummerierten Schritte, rechts das Bild bis zum Rand,
   ab 1010 px schräg angeschnitten */
.elementor .seite .unfall {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 0;
	scroll-margin-top: calc(var(--b-kopfhoehe) + 12px);
}
.elementor .seite .unfall-reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding: 0;
}
.elementor .seite .unfall-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 560px;
	gap: 26px;
	min-width: 0;
	padding-block: clamp(3rem, 2.378rem + 2.652vw, 4.5rem);
	padding-right: clamp(20px, 4vw, 56px);
	padding-left: max(var(--gutter, 20px), calc((100% - 1240px) / 2));
}
.elementor .seite .unfall-liste {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 620px;
	margin: 0;
	padding: 0;
}
.elementor .seite .unfall-punkt {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 0;
}
.elementor .seite .unfall-nr {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 50%;
	background: #fff;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	font-weight: 800;
	line-height: 1.62;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .unfall-satz {
	margin: 0;
	padding-top: 6px;
	font-family: var(--b-schrift);
	font-size: 1rem;
	line-height: 1.5;
	color: #fff;
}
.elementor .seite .unfall-satz a,
.elementor .seite .unfall-satz a:hover {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.elementor .seite .unfall-hinweis {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--blue-100, #dce7f9);
}
.elementor .seite .unfall-bild {
	position: relative;
	display: block;
	flex: 1 1 420px;
	min-height: 380px;
	padding: 0;
	clip-path: polygon(clamp(0px, calc((100vw - 1010px) * 1000), 14%) 0, 100% 0, 100% 100%, 0 100%);
}
/* Ausschnitt je Bild als lokaler Stil am Bild (Ablauf 60/55, Kontakt 50/60) */
.elementor .seite .unfall-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
/* Blauer Verlauf vom linken Bildrand, unter der Handnotiz */
.elementor .seite .unfall-bild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 0;
	background: linear-gradient(90deg, rgba(5, 59, 140, .5), rgba(5, 59, 140, 0) 45%);
	pointer-events: none;
	transition: none;
}
.elementor .seite .unfall-notiz-ort {
	position: absolute;
	right: 6%;
	bottom: 8%;
	z-index: 2;
	display: block;
	width: auto;
	padding: 0;
}
/* „112 Rettungsdienst“ und „110 Polizei“ gleich breit (Auftraggeber 24.10.2026): Die Reihe ist höchstens
   360 px breit, beide Knöpfe teilen sie sich (je 174 px, „112 Rettungsdienst“ braucht 169 px). Erst unter
   154 px je Knopf (Fenster unter 360 px) stehen sie untereinander, dann beide über die volle Breite. */
.elementor .seite .unfall .knopf-reihe:has(> .ico-telefon) { max-width: 360px; }
.elementor .seite .unfall .knopf-reihe > .knopf.ico-telefon { flex: 1 1 154px; min-width: 0; }

/* ------------------------------------------- Merkmale (Ihr Gutachter) */
/* Vercels bf-trust gestapelt: großes Symbol, darunter Titel und Text */
.elementor .seite .merkmale {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(210px, calc((100% - 24px) / 2))), 1fr));
	gap: 28px 24px;
	padding: 0;
}
.elementor .seite .merkmal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	padding: 0;
	text-align: left;
}
.elementor .seite .merkmal::before {
	width: 38px;
	height: 38px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .merkmal-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 0;
}
.elementor .seite .merkmal-titel {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--navy-950, #03183d);
}
.elementor .seite .merkmal-zeile {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .875rem;
	line-height: 1.45;
	color: var(--slate-500, #5a6272);
}

/* ------------------------------------------- Bewertungen (Ihr Gutachter) */
.elementor .seite .bewertung-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 48px;
	padding: clamp(28px, 4vw, 48px);
	border-radius: 16px;
	background: var(--blue-50, #eef4fd);
}
.elementor .seite .bewertung-box > .sh {
	flex: 1 1 420px;
	width: auto;
	min-width: 0;
}
.elementor .seite .bewertung-box .knopf {
	max-width: 100%;
	white-space: normal;
}

/* ------------------------------ Ihr Gutachter: Ergänzungen vom 14.10.2026 */
/* Nach dem Entwurf in Claude Design („Ihr-Gutachter.dc.html“, Auftraggeber):
   „In eigenen Worten“ und die Bewertungskarte. Dazu „Partner & Netzwerk“
   (nicht im Entwurf, Wunsch des Auftraggebers, Logos von ihm). */
.elementor .seite .sh-mitte {
	align-items: center;
	text-align: center;
}
/* Zitat: weiße Karte mit rundem Porträt, Text und Unterschrift in Handschrift */
.elementor .seite .zitat-karte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	max-width: 840px;
	margin: clamp(28px, 3vw, 40px) auto 0;
	padding: clamp(32px, 4vw, 48px) clamp(24px, 5vw, 64px);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 4px #03183d0d, 0 12px 28px -10px #03183d38;
	text-align: center;
}
.elementor .seite .zitat-bild {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--blue-100, #dce7f9);
	object-fit: cover;
	object-position: 50% 6%;
}
.elementor .seite .zitat-text {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
	line-height: 1.7;
	color: var(--slate-600, #434b5b);
	text-wrap: pretty;
}
.elementor .seite .zitat-name { --notiz-dreh: 0deg; margin-top: 6px; }
.elementor .seite .zitat-zeile {
	margin: -12px 0 0;
	font-family: var(--b-schrift);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--slate-500, #5a6272);
}
/* Bewertungen: links Text, rechts die Karte mit Sternen (Zahlen von Google) */
.elementor .seite .bewertung-hinweis {
	margin: 0;
	max-width: 560px;
	font-family: var(--b-schrift);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--slate-500, #5a6272);
}
.elementor .seite .bewertung-karte {
	display: flex;
	flex: 0 1 380px;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 28px 32px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 4px #03183d0d, 0 12px 28px -10px #03183d38;
}
.elementor .seite .bewertung-wert {
	margin: 0;
	font-family: var(--b-schrift-titel);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--navy-950, #03183d);
}
/* Sterne nur als Schmuck (Vorlesen übernimmt „von 5 Sternen“ darunter). Gefüllt bis
   --sterne (4,8 von 5 = 96 %), das setzt die Erweiterung „Pixel Kreativ Bewertungen“. */
.elementor .seite .bewertung-wert::after {
	content: "★★★★★";
	content: "★★★★★" / "";
	margin-left: 10px;
	font-size: 1.125rem;
	letter-spacing: .12em;
	vertical-align: .55em;
}
.elementor .seite .bewertung-wert::after,
.elementor .seite .bewertung-sterne {
	background: linear-gradient(90deg, var(--blue-700, #0349ae) var(--sterne, 100%), var(--slate-300, #c3cad6) var(--sterne, 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.elementor .seite .bewertung-zeile {
	margin: 8px 0 0;
	font-family: var(--b-schrift);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--navy-950, #03183d);
}
.elementor .seite .bewertung-stand {
	margin: 0 0 12px;
	font-family: var(--b-schrift);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--slate-500, #5a6272);
}
/* Video „Kurz vorgestellt“ (Clip vom Auftraggeber): 16:9 mit runden Ecken, lädt erst
   beim Abspielen (preload="none"), Vorschau = Standbild der Begrüßung. Danach folgt die
   Arbeitsweise, ebenfalls weiß: kein doppelter Abstand. */
.elementor .seite #video { padding-bottom: 0; }
.elementor .seite .video-rahmen {
	display: block;
	width: 100%;
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--navy-950, #03183d);
	box-shadow: 0 2px 4px #03183d0d, 0 18px 40px -16px #03183d59;
}
.elementor .seite .video-rahmen video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* Abspielknopf genau auf dem weißen Logokreis des Vorschaubilds. Per Flutfüllung gemessen:
   Kreis 172 px im 1280 x 720-Bild, Mitte 50 % / 54,24 %, also 13,4 % der Breite. Der Knopf
   ist 14,4 % breit und deckt so ringsum mit Rand (bei 390 px Breite noch 1,3 px).
   Das Skript (bausteine.js Nr. 8) blendet ihn ein und nach dem Start wieder aus. */
.elementor .seite .video-spieler { position: relative; }
.elementor .seite .video-play {
	display: none;
	position: absolute;
	left: 50%;
	top: 54.24%;
	width: 14.4%;
	aspect-ratio: 1;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--blue-700, #0349ae);
	box-shadow: 0 6px 20px -6px rgba(3, 24, 61, .5);
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .2s;
}
.elementor .seite .video-spieler.bereit .video-play { display: grid; }
.elementor .seite .video-spieler.laeuft .video-play { display: none; }
.elementor .seite .video-play::before {
	content: "";
	width: 34%;
	aspect-ratio: 1;
	margin-left: 9%;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.elementor .seite .video-play:hover,
.elementor .seite .video-play:focus-visible {
	background: var(--blue-700, #0349ae);
	color: #fff;
	transform: translate(-50%, -50%) scale(1.06);
}
.elementor .seite .video-play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
/* Partner: Logos auf weißen Kacheln – seit 23.10.2026 vier Partner: ab 1100 px vier nebeneinander,
   darunter 2 × 2, auf dem Handy untereinander (nie eine einzelne Kachel allein in der Reihe).
   Die Bewertungen folgen direkt: kein doppelter Abstand. */
.elementor .seite #partner { padding-bottom: 0; }
.elementor .seite .partner-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--b-grid-gap, 24px);
	margin-top: clamp(28px, 3vw, 40px);
	padding: 0;
}
.elementor .seite .partner-kachel {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	padding: 28px 32px;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 12px;
	background: #fff;
}
.elementor .seite .partner-logo {
	width: auto;
	max-width: 100%;
	max-height: 116px;
	object-fit: contain;
}
@media (max-width: 1099.98px) {
	.elementor .seite .partner-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
	.elementor .seite .partner-raster { grid-template-columns: minmax(0, 1fr); }
	.elementor .seite .partner-kachel { height: 132px; }
	.elementor .seite .partner-logo { max-height: 84px; }
}

/* Google-Bewertungen live (Erweiterung „Pixel Kreativ Bewertungen“, 14.10.2026).
   Karte und Rezensionen kommen als Shortcode-Widgets in die blaue Box: die Karte rechts
   neben dem Text, die Rezensionen darunter über die ganze Breite. Bis die Werte von Google
   da sind, zeigt die Karte die Ersatzanzeige; die Rezensionen erscheinen erst dann. */
.elementor .seite .bewertung-box > .bewertung-platz { flex: 0 1 380px; min-width: 0; margin: 0; }
.elementor .seite .bewertung-box > .bewertungen-platz { flex: 1 1 100%; min-width: 0; margin: 0; }
.elementor .seite .bewertung-box > .bewertungen-platz:not(:has(.bewertung)) { display: none; }
/* Quelle, wie Google sie verlangt: „Google Maps“, Roboto (wird nicht geladen, sonst
   Archivo), normale Stärke, Grau #5E5E5E. In der Karte statt „Stand“. */
.elementor .seite .bewertungen-quelle {
	font-family: Roboto, var(--b-schrift);
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: 0;
	color: #5e5e5e;
}
.elementor .seite .bewertungen { container: bewertungen / inline-size; }
.elementor .seite .bewertungen-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--b-grid-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Mittlere Breite zwei Karten (nie zwei plus eine einzelne), breit drei */
@container bewertungen (min-width: 640px) {
	.elementor .seite .bewertungen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elementor .seite .bewertungen-raster > .bewertung:nth-child(n+3) { display: none; }
}
@container bewertungen (min-width: 920px) {
	.elementor .seite .bewertungen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.elementor .seite .bewertungen-raster > .bewertung:nth-child(n+3) { display: flex; }
	.elementor .seite .bewertungen-raster:is([data-anzahl="2"], [data-anzahl="4"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.elementor .seite .bewertung {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 24px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 4px #03183d0d, 0 12px 28px -10px #03183d38;
}
.elementor .seite .bewertung-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.elementor .seite .bewertung-bild {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--blue-100, #dce7f9);
	color: var(--blue-700, #0349ae);
	font-family: var(--b-schrift-titel);
	font-size: 1.0625rem;
	font-weight: 700;
	object-fit: cover;
}
.elementor .seite .bewertung-autor {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	margin: 0;
	font-family: var(--b-schrift);
	line-height: 1.3;
}
.elementor .seite .bewertung-name {
	overflow-wrap: anywhere;
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy-950, #03183d);
	text-decoration: none;
}
.elementor .seite a.bewertung-name:hover { color: var(--blue-700, #0349ae); text-decoration: underline; }
.elementor .seite .bewertung-datum { font-size: .8125rem; color: var(--slate-500, #5a6272); }
/* Nur so breit wie die Sterne, sonst bezöge sich die Füllung auf die ganze Karte */
.elementor .seite .bewertung-sterne { align-self: flex-start; font-size: 1.125rem; line-height: 1; letter-spacing: .12em; }
/* Lange Rezensionen auf sechs Zeilen gekürzt, „Weiterlesen“ setzt das Skript nur dort */
.elementor .seite .bewertung-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.6;
	white-space: pre-line;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .bewertung-text.ist-offen { display: block; -webkit-line-clamp: unset; }
.elementor .seite .bewertung-weiter,
.elementor .seite .bewertung-weiter:hover,
.elementor .seite .bewertung-weiter:focus {
	align-self: flex-start;
	margin-top: -4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue-700, #0349ae);
	font-family: var(--b-schrift);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.elementor .seite .bewertung-weiter:hover { color: var(--navy-950, #03183d); }
.elementor .seite .bewertung-weiter:focus-visible { outline: 3px solid var(--focus-ring, #1c6ad0); outline-offset: 3px; }
.elementor .seite .bewertungen-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	margin-top: 16px;
}
.elementor .seite .bewertungen-fuss > p { margin: 0; }
.elementor .seite .bewertungen-auswahl {
	max-width: 640px;
	font-family: var(--b-schrift);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--slate-500, #5a6272);
}
@container bewertungen (max-width: 639.98px) {
	.elementor .seite .bewertung { padding: 20px; }
}

/* =========================================================================
   Leistungen (Übersicht Post 347, sechs Leistungsseiten 348–353), 13.10.2026
   Nach kfz-biesterfeldt.vercel.app/leistungen und den sechs Leistungsseiten.
   ========================================================================= */

:root {
	--b-grid-gap: clamp(1rem, .689rem + 1.326vw, 1.75rem);
	--b-section-y-sm: clamp(3rem, 2.378rem + 2.652vw, 4.5rem);
	--b-shadow-xs: 0 1px 2px #03183d0f;
	--b-shadow-sm: 0 1px 2px #03183d0f, 0 3px 10px -3px #03183d1a;
}

/* Kleinerer Abschnitt (Weitere Leistungen) */
.elementor .seite .abschnitt-klein { padding-block: var(--b-section-y-sm); }
.elementor .seite .stapel-28 {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
/* Zwei Spalten gleich hoch (Bild links, Checkliste rechts) */
.elementor .seite .raster-strecken { align-items: stretch; }
.elementor .seite .raster-oben { align-items: start; }
.elementor .seite .spalte-24 { gap: 24px; }
.elementor .seite .spalte-32 { gap: 32px; }
/* Kleingedrucktes (Vercels bf-small) */
.elementor .seite .text-klein {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--slate-500, #5a6272);
}
/* Fließtext in Karten (Vercels bf-body) */
.elementor .seite .text-body {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	line-height: 1.62;
	color: var(--slate-600, #434b5b);
}
/* Unterüberschrift (Vercels bf-h3) */
.elementor .seite .sh-h3 {
	margin: 8px 0 0;
	font-family: var(--b-schrift-titel);
	font-size: clamp(1.375rem, 1.22rem + .663vw, 1.75rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--navy-950, #03183d);
	text-wrap: balance;
}
.elementor .seite .dreh-5 { --notiz-dreh: -5deg; }

/* Foto mit Handnotiz rechts oben (Abschnitt 1 der Leistungsseiten) */
.elementor .seite .foto-notiz-rahmen {
	position: relative;
	display: block;
	min-width: 0;
	padding: 44px 0 0;
}
.elementor .seite .notiz-rechts {
	position: absolute;
	right: 2%;
	top: 0;
	z-index: 1;
	display: block;
	width: auto;
	padding: 0;
}

/* Hinweis-Kasten mit Info-Symbol (Unfallgutachten) */
.elementor .seite .hinweis-box {
	--bi: var(--bi-info);
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 12px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--blue-50, #eef4fd);
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .hinweis-box::before {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .hinweis-box .e-paragraph-base {
	margin: 0;
	font: inherit;
	color: inherit;
}

/* Checkliste als Karte über die volle Höhe, Punkte gleichmäßig verteilt */
.elementor .seite .checkliste-voll {
	height: 100%;
	box-sizing: border-box;
}
.elementor .seite .checkliste-voll .checkliste-liste {
	flex: 1;
	justify-content: space-evenly;
	align-content: space-evenly;
}
.elementor .seite .checkliste > .mehr-link { align-self: flex-start; }

/* Zwei Karten nebeneinander (Abgrenzung / Kosten) */
.elementor .seite .raster-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: var(--b-grid-gap);
	align-items: stretch;
	padding: 0;
}
.elementor .seite .info-karte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--b-shadow-sm);
	scroll-margin-top: 110px;
}
.elementor .seite .info-karte-tint {
	border: 0;
	background: var(--blue-50, #eef4fd);
	box-shadow: none;
}
.elementor .seite .info-karte-tint .marke-symbol { background: #fff; }
.elementor .seite .karte-kopf {
	display: block;
	padding: 0;
}
.elementor .seite .karte-aktion {
	display: block;
	max-width: 100%;
	margin-top: auto;
	padding: 4px 0 0;
}
.elementor .seite .karte-aktion > .knopf { max-width: 100%; }
/* Handy wie Vercel: Kartenknöpfe 15 px, große Hero-Knöpfe der Leistungsseiten 16 px */
@media (max-width: 479.98px) {
	.elementor .seite .karte-aktion > .knopf { font-size: .9375rem; }
	.elementor .seite .knopf-reihe-breit > .knopf-gross { font-size: 1rem; }
}
@media (max-width: 359.98px) {
	.elementor .seite .hero-leistungen .knopf-gross { padding-inline: 20px; }
}

/* Ablauf auf blauem Grund: Kopf mit breiterer Überschrift, Knopf darunter */
.elementor .seite .uebersicht-kopf-breit { gap: 36px 40px; }
.elementor .seite .uebersicht-kopf-breit > .sh { flex: 1 1 460px; }
.elementor .seite .uebersicht > .knopf { align-self: flex-start; }
/* Vier Schritte wie Vercel: vier Spalten mit Pfeilen, unter 720 px Containerbreite untereinander
   (Vercel: @container bf-steps (max-width: 719px)). Bis 22.10.2026 galt die Regel bei jeder Breite,
   dann liefen Haftpflicht, Kostenvoranschlag, Wert- und Oldtimer-Gutachten am Tablet und Handy seitlich über. */
@container schritte (min-width: 720px) {
	.elementor .seite .schritte-4 .schritte-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.elementor .seite .schritte-4 .schritt:not(:last-child)::after { display: block; }
}

/* Weitere Leistungen: kompakte Karten mit Symbol, Titel, Text und Pfeil */
.elementor .seite .karten-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--b-grid-gap);
	padding: 0;
}
.elementor .seite .karte-kompakt {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	column-gap: 12px;
	row-gap: 6px;
	min-width: 0;
	padding: 18px 18px 14px;
	overflow: hidden;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--b-shadow-sm);
	color: inherit;
	text-decoration: none;
	transition: transform .24s var(--b-ease-expo), box-shadow .24s var(--b-ease-expo), border-color .24s var(--ease-standard, ease);
}
.elementor .seite .karte-kompakt::before {
	grid-row: span 2;
	align-self: start;
	width: 30px;
	height: 30px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .karte-kompakt::after {
	--bi: var(--bi-pfeil);
	grid-column: 2;
	justify-self: end;
	align-self: end;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	color: var(--blue-700, #0349ae);
	transition: transform .16s var(--b-ease-expo);
}
.elementor .seite .karte-kompakt:hover {
	color: inherit;
	border-color: var(--blue-200, #b9cff3);
	box-shadow: var(--shadow-lg, 0 4px 8px #03183d0d, 0 24px 56px -16px #03183d4d);
	transform: translateY(-4px);
}
.elementor .seite .karte-kompakt:hover::after { transform: translateX(3px); }
.elementor .seite .karte-kompakt:active {
	transform: translateY(-1px);
	transition-duration: 90ms;
}
.elementor .seite .karte-kompakt:focus-visible {
	outline: 3px solid var(--focus-ring, #1c6ad0);
	outline-offset: 3px;
}
.elementor .seite .karte-kompakt-titel {
	align-self: center;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--navy-950, #03183d);
	text-wrap: balance;
	transition: color .16s var(--ease-standard, ease);
}
.elementor .seite .karte-kompakt:hover .karte-kompakt-titel { color: var(--blue-700, #0349ae); }
.elementor .seite .karte-kompakt-text {
	grid-column: 2;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--slate-500, #5a6272);
}

/* Tabellen (Kostenvoranschlag: Vergleich; Übersicht: Kosten). HTML-Baustein in
   Elementor, Gestaltung hier. Häkchen und Striche als Masken. */
.elementor .seite .sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.elementor .seite .vergleich-rahmen {
	min-width: 0;
	overflow-x: auto;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--b-shadow-sm);
}
.elementor .seite .vergleich {
	width: 100%;
	min-width: 0;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .vergleich :is(th, td) {
	border: 0;
	background: none;
}
.elementor .seite .vergleich thead tr { background: var(--blue-50, #eef4fd); }
.elementor .seite .vergleich tbody tr { border-top: 1px solid var(--slate-200, #d9e0ea); }
.elementor .seite .vergleich .ecke {
	padding: 16px 20px;
	text-align: left;
}
.elementor .seite .vergleich .spalten-kopf {
	padding: 16px 14px;
	font-weight: 800;
	text-align: center;
	color: var(--navy-950, #03183d);
}
.elementor .seite .vergleich .zeilen-kopf {
	padding: 16px 20px;
	font-weight: 600;
	text-align: left;
	vertical-align: middle;
	color: var(--navy-950, #03183d);
}
.elementor .seite .vergleich .zelle {
	padding: 14px;
	font-size: .875rem;
	text-align: center;
	vertical-align: middle;
}
.elementor .seite .vergleich .ja {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--blue-700, #0349ae);
	color: #fff;
}
.elementor .seite .vergleich .ja::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--bi-haken-dick) center / contain no-repeat;
	mask: var(--bi-haken-dick) center / contain no-repeat;
}
.elementor .seite .vergleich .nein {
	display: inline-block;
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--slate-400, #8b93a3);
}
@media (max-width: 559.98px) {
	.elementor .seite .vergleich { font-size: .875rem; }
	.elementor .seite .vergleich .ecke,
	.elementor .seite .vergleich .zeilen-kopf { padding: 14px 6px 14px 14px; }
	.elementor .seite .vergleich .spalten-kopf { padding: 14px 6px; }
	.elementor .seite .vergleich .zelle {
		padding: 12px 6px;
		font-size: .8125rem;
	}
}
@media (max-width: 359.98px) {
	.elementor .seite .vergleich .ecke,
	.elementor .seite .vergleich .zeilen-kopf {
		padding-left: 10px;
		padding-right: 4px;
	}
	.elementor .seite .vergleich .spalten-kopf {
		padding-inline: 4px;
		font-size: .8125rem;
	}
	.elementor .seite .vergleich .zelle { padding-inline: 4px; }
}

/* ------------------------------------------- Leistungen: Übersicht */
/* Entscheidungshilfe: sechs Karten, fünf davon ganz verlinkt */
.elementor .seite .stapel-36 {
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.elementor .seite .wahl-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
	padding: 0;
}
.elementor .seite .wahl-karte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 22px 24px;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--b-shadow-xs);
	color: inherit;
	text-decoration: none;
	transition: border-color .16s, box-shadow .24s, transform .24s var(--b-ease-expo);
}
.elementor .seite a.wahl-karte:hover {
	color: inherit;
	border-color: var(--blue-200, #b9cff3);
	box-shadow: var(--b-shadow-sm);
	transform: translateY(-3px);
}
.elementor .seite .wahl-text {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--navy-950, #03183d);
}
.elementor .seite .wahl-fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding: 14px 0 0;
	border-top: 1px solid var(--slate-200, #d9e0ea);
	font-family: var(--b-schrift);
	font-weight: 700;
	line-height: 1.62;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .wahl-fuss::after {
	--bi: var(--bi-pfeil);
	width: 18px;
	height: 18px;
	transition: transform .16s var(--b-ease-expo);
}
.elementor .seite a.wahl-karte:hover .wahl-fuss::after { transform: translateX(3px); }
.elementor .seite .wahl-fuss .e-paragraph-base {
	margin: 0;
	font: inherit;
	color: inherit;
}
/* Erste Karte: zwei Links untereinander */
.elementor .seite .wahl-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: auto;
	padding: 6px 0 0;
	border-top: 1px solid var(--slate-200, #d9e0ea);
}
.elementor .seite .wahl-links .mehr-link { font-weight: 700; }
.elementor .seite .wahl-links .mehr-link:hover::after { transform: translateX(3px); }
.elementor .seite .wahl-links .mehr-link::after { transition: transform .16s var(--b-ease-expo); }
/* Letzte Karte: dunkel, mit Anruf-Knopf */
.elementor .seite .wahl-karte-dunkel {
	border: 0;
	background: var(--navy-950, #03183d);
	box-shadow: none;
	color: #fff;
}
.elementor .seite .wahl-karte-dunkel .marke-symbol {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}
.elementor .seite .wahl-karte-dunkel .wahl-text { color: #fff; }
.elementor .seite .wahl-karte-dunkel .wahl-links {
	gap: 12px;
	padding-top: 14px;
	border-top-color: rgba(255, 255, 255, .2);
}
.elementor .seite .wahl-zeile {
	margin: 0;
	font-family: var(--b-schrift);
	font-weight: 700;
	line-height: 1.62;
	color: #fff;
}

/* Leistungskarten mit Bild auf blauem Grund */
.elementor .seite .leistung-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: var(--b-grid-gap);
	padding: 0;
}
.elementor .seite .leistung-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
	color: inherit;
	text-decoration: none;
	transition: transform .24s var(--b-ease-expo), box-shadow .24s var(--b-ease-expo), border-color .24s var(--ease-standard, ease);
}
.elementor .seite .leistung-karte:hover {
	color: inherit;
	border-color: var(--blue-200, #b9cff3);
	box-shadow: var(--shadow-lg, 0 4px 8px #03183d0d, 0 24px 56px -16px #03183d4d);
	transform: translateY(-4px);
}
.elementor .seite .leistung-karte:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.elementor .seite .leistung-bild {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	padding: 0;
	background: var(--slate-100, #e8edf4);
}
.elementor .seite .leistung-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .64s var(--b-ease-expo);
}
.elementor .seite .leistung-karte:hover .leistung-img { transform: scale(1.04); }
.elementor .seite .leistung-text {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	column-gap: 12px;
	row-gap: 8px;
	flex: 1 1 0%;
	padding: 18px 20px 16px;
}
.elementor .seite .leistung-text::before {
	grid-row: span 2;
	align-self: start;
	width: 38px;
	height: 38px;
	margin-top: 1px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .leistung-text::after {
	--bi: var(--bi-pfeil);
	grid-column: 2;
	justify-self: end;
	align-self: end;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	color: var(--blue-700, #0349ae);
	transition: transform .16s var(--b-ease-expo);
}
.elementor .seite .leistung-karte:hover .leistung-text::after { transform: translateX(3px); }
.elementor .seite .leistung-titel {
	align-self: center;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--navy-950, #03183d);
	text-wrap: balance;
	transition: color .16s var(--ease-standard, ease);
}
.elementor .seite .leistung-karte:hover .leistung-titel { color: var(--blue-700, #0349ae); }
.elementor .seite .leistung-beschreibung {
	grid-column: 2;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--slate-500, #5a6272);
}
.elementor .seite .uebersicht-kopf-eng { gap: 16px 40px; }
.elementor .seite .stapel-40 {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Kosten: links Kopf und Anruf-Knopf, rechts die Tabelle */
.elementor .seite .kosten-reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px clamp(32px, 5vw, 72px);
	padding: 0;
}
.elementor .seite .kosten-kopf {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 300px;
	gap: 22px;
	max-width: 400px;
	min-width: auto;
	padding: 0;
}
.elementor .seite .kosten-tabelle {
	flex: 2 1 560px;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--b-shadow-sm);
}
.elementor .seite .kosten-tabelle .tabelle-scroll { overflow-x: auto; }
.elementor .seite .kosten {
	width: 100%;
	min-width: 520px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .kosten :is(th, td) {
	border: 0;
	background: none;
}
.elementor .seite .kosten thead tr { background: var(--blue-50, #eef4fd); }
.elementor .seite .kosten thead th {
	padding: 16px 22px;
	font-weight: 700;
	text-align: left;
	color: var(--navy-950, #03183d);
}
.elementor .seite .kosten thead th:first-child { width: 40%; }
.elementor .seite .kosten tbody tr { border-top: 1px solid var(--slate-200, #d9e0ea); }
.elementor .seite .kosten tbody :is(th, td) {
	padding: 18px 22px;
	text-align: left;
	vertical-align: top;
}
.elementor .seite .kosten .fall {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 12px;
	font-weight: 700;
	color: var(--navy-950, #03183d);
}
.elementor .seite .kosten .fall::before {
	content: "";
	width: 22px;
	height: 22px;
	background: var(--blue-700, #0349ae);
	-webkit-mask: var(--bi) center / contain no-repeat;
	mask: var(--bi) center / contain no-repeat;
}
.elementor .seite .kosten .fall-auto { --bi: var(--bi-auto-front-d); }
.elementor .seite .kosten .fall-hagel { --bi: var(--bi-hagel-d); }
.elementor .seite .kosten .fall-tacho { --bi: var(--bi-tacho-d); }
.elementor .seite .kosten .fall small {
	display: block;
	font-size: inherit;
	font-weight: 500;
	color: var(--slate-500, #5a6272);
}
@media (max-width: 639.98px) {
	.elementor .seite .kosten {
		display: block;
		min-width: 0;
	}
	.elementor .seite .kosten :is(tbody, tr, th, td) { display: block; }
	.elementor .seite .kosten thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.elementor .seite .kosten tbody tr:first-child { border-top: 0; }
	.elementor .seite .kosten tbody th { padding: 18px 20px 8px; }
	.elementor .seite .kosten tbody td { padding: 0 20px 18px 56px; }
}

/* =========================================================================
   Kontakt (Post 443), 13.10.2026
   Nach kfz-biesterfeldt.vercel.app/kontakt, Werte dort ausgelesen. Kopfbereich
   wie die Leistungsseiten (Vorlage Startseite, Textspalte so breit wie Vercel).
   Die Formulare (Schadenmeldung, Bilder nachreichen, Rückruf) folgen später;
   bis dahin steht an der Stelle der Schadenmeldung ein Platzhalter.
   ========================================================================= */

/* ------------------------------------------------------ Kopfbereich */
.elementor .seite .hero-kontakt .hero-img { object-position: 70% 50%; }
.elementor .seite .hero-kontakt .merkmale-hero { max-width: 660px; }
/* Die vier Kontaktwege sind Links: beim Überfahren weiß hinterlegt mit Schatten */
.elementor .seite .merkmal.merkmal-link {
	width: auto; /* Elementor setzt 100 %; so reicht die Fläche wie bei Vercel 10 px über das Rasterfeld */
	margin: -10px;
	padding: 10px;
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	transition: background-color .16s, box-shadow .24s;
}
.elementor .seite .merkmal.merkmal-link:hover {
	color: inherit;
	background-color: #fff;
	box-shadow: 0 1px 2px #03183d0f, 0 3px 10px -3px #03183d1a;
}
.elementor .seite .merkmal.merkmal-link:focus-visible {
	outline: 3px solid var(--focus-ring, #1c6ad0);
	outline-offset: 2px;
}
/* WhatsApp überall mit dem grünen WhatsApp-Zeichen (Wunsch des Kunden) */
.elementor .seite .merkmal.ico-whatsapp::before,
.elementor .seite .kontakt-zeile.ico-whatsapp::before,
.elementor .seite .recht-kontakt-zeile.ico-whatsapp::before,
.elementor .seite .knopf-inverse-sekundaer.ico-whatsapp::before { color: #25d366; }

/* ------------------------------------------- Schadenmeldung und Kontakt */
.elementor .seite .kontakt-reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px;
	padding: 0;
}
/* Weiße Karte: Schadenmeldung (Formular folgt), Foto-Tipps, Nachreichen */
.elementor .seite .formular-karte {
	display: flex;
	flex-direction: column;
	gap: 28px;
	flex: 1.75 1 560px;
	min-width: 0;
	padding: clamp(20px, 3.5vw, 44px);
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 4px #03183d0d, 0 12px 28px -10px #03183d38;
	scroll-margin-top: 100px;
}
/* Überschrift in Karten etwas kleiner (Vercel: 28–40 px statt 28–44 px) */
.elementor .seite .sh-h2.sh-h2-klein { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); }
/* Platzhalter, bis das Formular gebaut ist (so hoch wie Vercels Formular) */
.elementor .seite .formular-platzhalter {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 590px;
	padding: 32px 24px;
	border: 2px dashed var(--slate-300, #bcc5d2);
	border-radius: 16px;
	background: var(--slate-25, #f9fafd);
	text-align: center;
	scroll-margin-top: calc(var(--b-kopfhoehe) + 22px);
}
.elementor .seite .formular-platzhalter::before {
	width: 40px;
	height: 40px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .platzhalter-titel {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	font-weight: 700;
	line-height: 1.35;
	color: var(--navy-950, #03183d);
}
.elementor .seite .platzhalter-text {
	max-width: 420px;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--slate-500, #5a6272);
}
@media (max-width: 639.98px) {
	.elementor .seite .formular-platzhalter { min-height: 420px; }
}

/* Foto-Tipps in der Karte: hellblau, Häkchen weiß im blauen Kreis */
.elementor .seite .tipps-box {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--blue-50, #eef4fd);
}
.elementor .seite .tipps-kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	font-weight: 700;
	line-height: 1.35;
	color: var(--navy-950, #03183d);
}
.elementor .seite .tipps-kopf::before { color: var(--blue-700, #0349ae); }
.elementor .seite .tipps-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 10px 20px;
	margin: 0;
	padding: 0;
}
.elementor .seite .tipps-punkt,
.elementor .seite .fototipp {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 0;
}
.elementor .seite .tipps-punkt::before,
.elementor .seite .fototipp::before {
	content: "";
	position: static;
	inset: auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 50%;
	background: var(--bi-haken-weiss) center / 13px 13px no-repeat, var(--blue-700, #0349ae);
	transition: none;
}
.elementor .seite .tipp-zeilen {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	padding: 0;
}
.elementor .seite .tipp-titel,
.elementor .seite .tipp-text {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .875rem;
	line-height: 1.45;
}
.elementor .seite .tipp-titel {
	font-weight: 600;
	color: var(--navy-950, #03183d);
}
.elementor .seite .tipp-text { color: var(--slate-600, #434b5b); }

/* „Bereits eine Schadenmeldung gesendet?“ – seit 20.10.2026 wie new. (.nachreichen-block):
   eine Zeile mit Wolken-Symbol, kleinem Text und schmalem Knopf, der bei wenig Platz
   umbricht. Schrift und Farben wie final. */
.elementor .seite .nachreichen-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 18px;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 10px;
	background: var(--slate-25, #f9fafd);
}
.elementor .seite .nachreichen-text {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 14px;
	width: auto;                    /* Elementor setzt 100 %, dann bricht der Knopf immer um */
	min-width: 0;
	padding: 0;
}
/* Elementor legt ::before von Containern absolut (Hintergrund-Ebene) – hier zurück in den Fluss */
.elementor .seite .nachreichen-text::before,
.elementor .seite .nachreichen-knopf::before {
	position: static;
	inset: auto;
	opacity: 1;
	border-radius: 0;
	mix-blend-mode: normal;
}
.elementor .seite .nachreichen-text::before {
	content: "";
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	color: var(--navy-950, #03183d);
	background: currentColor;
	-webkit-mask: var(--bi-wolke-hoch) center / contain no-repeat;
	mask: var(--bi-wolke-hoch) center / contain no-repeat;
}
.elementor .seite .nachreichen-zeilen {
	display: flex;
	flex: 1 1 210px;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 0;
}
.elementor .seite .nachreichen-titel {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--navy-950, #03183d);
}
.elementor .seite .nachreichen-sub {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 13px;
	line-height: 18px;
	color: var(--slate-500, #5a6272);
}
/* Knopf wie new. (Umriss, beim Überfahren gefüllt), aber rund wie alle Knöpfe auf final.
   (Auftraggeber 20.10.2026: „Die anderen Buttons sind alle so ein bisschen rund“) */
.elementor .seite .nachreichen-knopf {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-width: auto;
	min-height: 46px;
	padding: 9px 20px;              /* wie knopf-klein */
	border: 1px solid var(--blue-600, #0a5ac4);
	border-radius: 999px;
	background: #fff;
	font-family: var(--b-schrift);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--blue-600, #0a5ac4);
	text-decoration: none;
	max-width: 100%; /* reicht der Platz auch allein in der Zeile nicht (Handy 320 px), bricht der Text um */
	white-space: normal;
	text-align: center;
	transition: color .2s, background-color .2s;
}
.elementor .seite .nachreichen-knopf::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--bi-pfeil-hoch) center / contain no-repeat;
	mask: var(--bi-pfeil-hoch) center / contain no-repeat;
}
.elementor .seite .nachreichen-knopf .e-paragraph-base {
	margin: 0;
	font: inherit;
	color: inherit;
}
.elementor .seite .nachreichen-knopf:hover,
.elementor .seite .nachreichen-knopf:focus-visible {
	background-color: var(--blue-600, #0a5ac4);
	color: #fff;
}
.elementor .seite .nachreichen-knopf:focus-visible {
	outline: 3px solid rgba(10, 90, 196, .22);
	outline-offset: 2px;
}
@media (max-width: 767px) {
	.elementor .seite .nachreichen-text { gap: 11px; }
	.elementor .seite .nachreichen-text::before { flex-basis: 26px; width: 26px; height: 26px; }
}
/* Knopf über die ganze Breite */
.elementor .seite .knopf.knopf-block {
	display: flex;
	width: 100%;
}

/* Seitenspalte „Direkter Kontakt“: zwei Karten nebeneinander, ab 1100 px rechts
   neben dem Formular untereinander und (bei genug Höhe) mitlaufend */
.elementor .seite .kontakt-seite {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 20px;
	flex: 1 1 100%;
	min-width: 0;
	max-width: none;
	padding: 0;
}
@media (max-width: 640px) {
	.elementor .seite .kontakt-seite { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
	.elementor .seite .kontakt-seite {
		flex: 1 1 340px;
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}
}
/* „top“ nur hier: Elementor stellt Container auf position: relative, sonst rückte die
   Spalte auch ohne Mitlaufen um diesen Wert nach unten */
@media (min-width: 1100px) and (min-height: 900px) {
	.elementor .seite .kontakt-seite {
		position: sticky;
		top: calc(var(--b-kopfhoehe) + 22px);
	}
}
.elementor .seite .kontakt-karte,
.elementor .seite .weiter-karte {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px #03183d0f, 0 3px 10px -3px #03183d1a;
}
.elementor .seite .kontakt-karte {
	gap: 0;
	overflow: hidden;
	padding: 0;
}
/* Bildfeld: Blaupause wie die blauen Bänder, Frau Biesterfeldt freigestellt */
.elementor .seite .kontakt-medien {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	padding: 0;
	background-color: var(--blue-700, #0349ae);
	background-image: var(--pattern-blueprint), var(--gradient-band);
	background-size: var(--pattern-blueprint-size), 100% 100%;
}
.elementor .seite .kontakt-frau {
	position: absolute;
	left: 66%;
	bottom: 0;
	width: auto;
	height: 102%;
	max-width: none;
	transform: translateX(-50%);
}
.elementor .seite .kontakt-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px #03183d0f, 0 3px 10px -3px #03183d1a;
	font-family: var(--b-schrift);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.62;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .kontakt-badge::before {
	width: 14px;
	height: 14px;
}
.elementor .seite .kontakt-notiz-ort {
	position: absolute;
	left: 16px;
	bottom: 18px;
	z-index: 1;
	display: block;
	width: 120px;
	padding: 0;
}
.elementor .seite .kontakt-inhalt {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 24px 24px;
}
.elementor .seite .kontakt-kopf {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
}
.elementor .seite .kontakt-name {
	margin: 0;
	font-family: var(--b-schrift-titel);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--navy-950, #03183d);
}
.elementor .seite .kontakt-liste {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}
.elementor .seite .kontakt-zeile {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	min-height: 48px;
	padding: 0;
	border-top: 1px solid var(--slate-200, #d9e0ea);
}
.elementor .seite .kontakt-zeile::before { color: var(--blue-700, #0349ae); }
.elementor .seite .kontakt-wert {
	min-width: 0;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--navy-950, #03183d);
}
.elementor .seite .kontakt-wert a {
	display: inline-block;
	margin-block: -12px;
	padding-block: 12px;
	font-weight: 700;
	color: var(--navy-950, #03183d);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.elementor .seite .kontakt-wert a:hover {
	color: var(--blue-700, #0349ae);
	text-decoration: underline;
}
.elementor .seite .kontakt-wert span {
	font-size: .875rem;
	color: var(--slate-500, #5a6272);
}

/* „So geht es nach Ihrer Meldung weiter“ */
.elementor .seite .weiter-karte {
	gap: 14px;
	padding: 22px 24px 16px;
}
.elementor .seite .weiter-titel {
	margin: 0;
	font-family: var(--b-schrift-titel);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--navy-950, #03183d);
}
.elementor .seite .weiter-liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}
.elementor .seite .weiter-schritt {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 0;
}
.elementor .seite .weiter-nr {
	position: relative;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 50%;
	background: var(--blue-600, #0a5ac4);
	font-family: var(--b-schrift);
	font-size: .875rem;
	font-weight: 800;
	line-height: 1.62;
	color: #fff;
}
/* „Schritt “ vor der Zahl nur für Vorleseprogramme (Elementor entfernt Klassen im Text) */
.elementor .seite .weiter-nr > span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.elementor .seite .weiter-text {
	margin: 0;
	padding-top: 4px;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .weiter-karte > .mehr-link { align-self: flex-start; }

/* ----------------------------------------- Foto-Checkliste (blaues Band) */
/* Aufbau wie „Nach dem Unfall“ (Ablauf); hier wie Vercel etwas mehr Abstand,
   das Bild mindestens 420 px hoch und die Häkchen blau im weißen Kreis */
.elementor .seite .foto-band .unfall-text { gap: 28px; }
.elementor .seite .foto-band .unfall-bild { min-height: 420px; }
.elementor .seite .fototipps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px 24px;
	max-width: 640px;
	margin: 0;
	padding: 0;
}
.elementor .seite .fototipp {
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 12px;
}
.elementor .seite .fototipp::before {
	width: 28px;
	height: 28px;
	margin-top: 0;
	background: var(--bi-haken-blau) center / 15px 15px no-repeat, #fff;
}
.elementor .seite .fototipp .tipp-zeilen { gap: 2px; }
.elementor .seite .fototipp .tipp-titel {
	font-size: var(--b-fs-body);
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
}
.elementor .seite .fototipp .tipp-text { color: var(--blue-100, #dce7f9); }

/* „Alle Einsatzgebiete“ am Ende einer FAQ-Antwort halbfett (wie Vercel) */
.elementor .seite .faq-liste details a[href*="einsatzgebiete"] { font-weight: 600; }

/* =========================================================================
   Einsatzgebiete, 13.10.2026
   Nach kfz-biesterfeldt.vercel.app/einsatzgebiete. Kopfbereich, Abschnittsköpfe,
   Knöpfe, Platzhalter und Abschlussband sind die vorhandenen Bausteine; neu sind nur
   die vier Regionskarten und der Kasten „Ihr Ort ist nicht dabei?“. Die Karte selbst
   folgt später (bis dahin der Platzhalter aus der Kontaktseite).
   ========================================================================= */

.elementor .seite .hero-einsatz .hero-img { object-position: 72% 68%; }
@media (max-width: 1099.98px) {
	.elementor .seite .hero-einsatz .hero-img { object-position: 70% 60%; }
}
/* Bild über die volle Breite wie auf „Häufige Fragen“ (Auftraggeber 14.10.2026). Das Auto
   bleibt im bisherigen Ausschnitt rechts; links davon setzen zwei Streifen (die linken 37 %
   des Ausschnitts, erst gespiegelt, dann wieder richtig herum) die Landschaft nahtlos fort.
   Die Nähte liegen immer unter dem Schleier, deshalb ab 2222 px breiter als 64 %.
   Achtung: Wird das Bild getauscht, muss diese Adresse mit (Anhang 343). */
@media (min-width: 1100px) {
	.elementor .seite .hero-einsatz .hero-img {
		width: max(64%, 640px, 100% - 800px);
		-webkit-mask-image: none;
		mask-image: none;
	}
	.elementor .seite .hero-einsatz .hero-bild::before,
	.elementor .seite .hero-einsatz .hero-bild::after {
		content: "";
		position: absolute;
		inset: 0 0 0 auto;
		width: max(64%, 640px, 100% - 800px);
		height: 100%;
		background: url("/wp-content/uploads/2026/10/pkw-parkbucht-landstrasse.webp") 72% 68% / cover no-repeat;
		clip-path: inset(0 63% 0 0);
		opacity: 1;
		mix-blend-mode: normal;
		border-radius: 0;
		transition: none;
		pointer-events: none;
	}
	.elementor .seite .hero-einsatz .hero-bild::before {
		transform: scaleX(-1);
		transform-origin: 0 50%;
	}
	.elementor .seite .hero-einsatz .hero-bild::after { transform: translateX(-74%); }
}
/* „Ihr Ort auf der Karte“: Hinweis-Knopf wie auf „Ablauf“, mit Ortsnadel */
.elementor .seite .hinweis-pill.pill-ort::before {
	--bi: var(--bi-pin);
	width: 20px;
	height: 20px;
}
.elementor .seite .hinweis-pill.pill-ort::after { width: 18px; height: 18px; }

/* Regionskarten: farbiges Band mit Symbol-Plättchen, Text, Zahl, Fußzeile */
.elementor .seite .regionen-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	align-items: stretch;
	gap: 20px;
	padding: 0;
}
.elementor .seite .region-karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px #03183d0f, 0 3px 10px -3px #03183d1a;
	transition: transform .24s cubic-bezier(.16, 1, .3, 1), box-shadow .24s;
	scroll-margin-top: calc(var(--b-kopfhoehe) + 12px);
}
.elementor .seite .region-karte:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px #03183d0d, 0 12px 28px -10px #03183d38;
}
.elementor .seite .region-band {
	position: relative;
	flex: none;
	height: 76px;
	padding: 0;
	overflow: visible;
}
/* Plättchen (weiß) und Symbol (blau) ragen 22 px in den Text hinein */
.elementor .seite .region-band::before,
.elementor .seite .region-band::after {
	content: "";
	position: absolute;
	inset: auto;
	opacity: 1;
	mix-blend-mode: normal;
	transition: none;
}
.elementor .seite .region-band::before {
	left: 20px;
	bottom: -22px;
	z-index: 1;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px #03183d0f, 0 3px 10px -3px #03183d1a;
}
.elementor .seite .region-band::after {
	left: 32px;
	bottom: -10px;
	z-index: 2;
	width: 24px;
	height: 24px;
	border-radius: 0;
	background: var(--blue-700, #0349ae);
	-webkit-mask: var(--bi) center / contain no-repeat;
	mask: var(--bi) center / contain no-repeat;
}
/* Die Bänder zeigen die Gebiete genau wie die Karte darüber (Auftraggeber 14.10.2026):
   Hamburg und Stade mit denselben Streifen in denselben Farben wie Fläche und Legende,
   Kreis Pinneberg und Schleswig-Holstein ohne Fläche, also weißes Land mit der Grenzlinie
   der Karte. Das Haus ist rot wie die Firmensitz-Nadel in Uetersen. */
.elementor .seite .band-pinneberg { --bi: var(--bi-haus); }
.elementor .seite .band-land { --bi: var(--bi-route); }
.elementor .seite .band-pinneberg,
.elementor .seite .band-land {
	background: #fbfdff;
	box-shadow: inset 0 -1px 0 #d8e6f4;
}
.elementor .seite .band-pinneberg::after { background: var(--red-600, #dc1416); }
.elementor .seite .band-hamburg {
	--bi: var(--bi-pin);
	background: repeating-linear-gradient(45deg, #8bb3e7 0 9px, #b3ccef 9px 12px);
}
.elementor .seite .band-stade {
	--bi: var(--bi-route);
	background: repeating-linear-gradient(-45deg, #eef4fd 0 8px, #84a7d9 8px 10px);
}
.elementor .seite .region-inhalt {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 36px 22px 20px;
}
.elementor .seite .region-titel,
.elementor .seite .orte-titel {
	margin: 0;
	font-family: var(--b-schrift-titel);
	font-size: clamp(1.125rem, 1.073rem + .221vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--navy-950, #03183d);
}
.elementor .seite .region-text {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .region-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	width: 100%;
	margin-top: auto;
	padding: 12px 0 0;
	border-top: 1px solid var(--slate-200, #d9e0ea);
}
.elementor .seite .region-fuss .mehr-link { font-size: .9375rem; font-weight: 700; }
.elementor .seite .region-kartenlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	min-height: 44px;
	padding: 0;
	font-family: var(--b-schrift);
	font-size: .875rem;
	font-weight: 600;
	color: var(--slate-500, #5a6272);
	text-decoration: none;
}
.elementor .seite .region-kartenlink::before { width: 16px; height: 16px; }
.elementor .seite .region-kartenlink .e-paragraph-base { margin: 0; font: inherit; color: inherit; }
.elementor .seite .region-kartenlink:hover { color: var(--blue-700, #0349ae); }

/* „Beliebte Einsatzorte“ unter der Karte, Maße wie Vercel (14.10.2026). Die Werte kommen
   beim Bauen aus eg-orte.json, also aus denselben Daten wie die Kartensuche. Der Abschnitt
   hat keinen Seitenrand (wegen der breiten Karte), deshalb trägt der Block ihn selbst. */
.elementor .seite .abschnitt:has(> .egkartewrap) > .orte-beliebt { padding-inline: var(--rand-grid, 20px); }
/* padding-block 0: Elementor gibt dem Container sonst 10 px oben und unten mit */
.elementor .seite .orte-beliebt { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding-block: 0; }
/* Unter den Kästen weniger Luft bis zum blauen Abschnitt (Auftraggeber 14.10.2026: „etwas zu
   viel Abstand nach unten“): 70 % des üblichen Abschnittsabstands, bei 1440 px 78 statt 112 px */
.elementor .seite .abschnitt:has(> .orte-beliebt) { padding-bottom: calc(var(--b-section-y) * .7); }
.elementor .seite .orte-kopf {
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 24px;
	padding: 0;
}
.elementor .seite .orte-hinweis { margin: 0; font: 400 13px/18.2px var(--b-schrift); color: var(--slate-500, #5a6272); }
.elementor .seite .orte-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
	gap: 12px;
	padding: 0;
}
.elementor .seite .ort-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 40px 18px 16px; /* oben 16 + Symbolzeile 18 + Abstand 6 */
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px #03183d0f;
	color: inherit;
	text-decoration: none;
	transition: border-color .16s, box-shadow .24s, transform .24s cubic-bezier(.16, 1, .3, 1);
}
/* Nadel links, Pfeil rechts. Elementor legt ::before/::after von Containern sonst flächig darüber */
.elementor .seite .ort-kachel::before,
.elementor .seite .ort-kachel::after {
	content: "";
	position: absolute;
	inset: auto;
	opacity: 1;
	mix-blend-mode: normal;
	transition: none;
	border-radius: 0;
	background: var(--blue-700, #0349ae);
}
.elementor .seite .ort-kachel::before {
	top: 16px;
	left: 18px;
	width: 18px;
	height: 18px;
	-webkit-mask: var(--bi-pin) center / contain no-repeat;
	mask: var(--bi-pin) center / contain no-repeat;
}
.elementor .seite .ort-kachel::after {
	top: 17px;
	right: 18px;
	width: 16px;
	height: 16px;
	-webkit-mask: var(--bi-pfeil) center / contain no-repeat;
	mask: var(--bi-pfeil) center / contain no-repeat;
}
.elementor .seite .ort-kachel:hover {
	border-color: var(--blue-200, #b9cff3);
	box-shadow: 0 1px 2px #03183d0f, 0 3px 10px -3px #03183d1a;
	color: inherit;
	transform: translateY(-3px);
}
.elementor .seite .ort-name { margin: 0; font: 800 17px/21.25px var(--b-schrift); color: var(--navy-950, #03183d); }
.elementor .seite .ort-wert { margin: 0; font: 400 14px/19.6px var(--b-schrift); color: var(--slate-500, #5a6272); }

/* „Ihr Ort ist nicht dabei?“: weißer Kasten mit Symbol, Text und zwei Knöpfen */
.elementor .seite .ort-fehlt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px #03183d0f, 0 3px 10px -3px #03183d1a;
}
.elementor .seite .ort-fehlt-text {
	display: flex;
	flex: 1 1 360px;
	align-items: center;
	gap: 16px;
	min-width: 0;
	padding: 0;
}
.elementor .seite .ort-fehlt-text::before {
	content: "";
	position: static; /* Elementor legt ::before von Containern sonst absolut über den Inhalt */
	inset: auto;
	flex: none;
	width: 52px;
	height: 52px;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230349ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E") center / 26px 26px no-repeat, var(--blue-50, #eef4fd);
}
.elementor .seite .ort-fehlt-zeilen { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0; }
.elementor .seite .ort-fehlt-titel {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.62;
	color: var(--navy-950, #03183d);
}
.elementor .seite .ort-fehlt-sub {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .ort-fehlt .knopf-reihe { width: auto; gap: 10px; }

/* =========================================================================
   Impressum (Post 549) und Datenschutzerklärung (Post 550), 14.10.2026
   Nach kfz-biesterfeldt.vercel.app/impressum und /datenschutz, Werte dort
   ausgelesen. Kopfbereich, Knöpfe, Fließtext (text-body, text-klein) und der
   Platzhalter (hinweis-box) sind die vorhandenen Bausteine. Neu sind die weißen
   Karten, die Kontaktzeilen und der Bildnachweis (Impressum) sowie das
   Inhaltsverzeichnis und die Liste „Ihre Rechte“ (Datenschutz).
   ========================================================================= */

.elementor .seite .hero-impressum .hero-img { object-position: 55% 60%; }

/* Abschnitt mit weniger Luft als sonst (Vercel: 36–56 px) */
.elementor .seite .recht-abschnitt {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: clamp(36px, 4.5vw, 56px);
}
/* „Stand: Oktober 2026“ dunkel wie Vercel */
.elementor .seite .recht-abschnitt > .text-klein { color: var(--navy-950, #03183d); }

/* Impressum: Spalte wie Vercel 1080 px abzüglich Seitenrand (bei 1440 px: 1000),
   die ersten beiden Karten nebeneinander */
.elementor .seite .recht-spalte {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: calc(1080px - 2 * var(--gutter, 40px));
	margin-inline: auto;
	padding: 0;
}
.elementor .seite .recht-paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 20px;
	padding: 0;
}

/* Weiße Karte mit Überschrift (in der Datenschutzerklärung mit Nummer) */
.elementor .seite .recht-karte {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--b-shadow-xs);
	scroll-margin-top: calc(var(--b-kopfhoehe) + 12px);
}
.elementor .seite .recht-titel {
	margin: 0;
	font-family: var(--b-schrift-titel);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--navy-950, #03183d);
	hyphens: auto;
}
.elementor .seite .recht-titel span {
	margin-right: 10px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .recht-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
}

/* Impressum, Kontakt: Symbol und Zeile, Nummern fett */
.elementor .seite .recht-kontakt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
}
.elementor .seite .recht-kontakt-zeile {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 0;
}
.elementor .seite .recht-kontakt-zeile::before {
	width: 22px;
	height: 22px;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .recht-kontakt-zeile .e-paragraph-base {
	min-width: 0;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: 1rem;
	line-height: 1.45;
	color: var(--slate-600, #434b5b);
}
.elementor .seite .recht-kontakt-zeile a {
	display: inline-block;
	margin-block: -12px;
	padding-block: 12px;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.elementor .seite .recht-kontakt-zeile .e-paragraph-base span { color: var(--slate-500, #5a6272); }

/* Impressum, Bildnachweise: Zeilen mit Trennlinie, links Art und Einsatzort */
.elementor .seite .nachweis-liste {
	display: flex;
	flex-direction: column;
	margin-top: 6px;
	padding: 0;
}
.elementor .seite .nachweis-zeile {
	display: flex;
	flex-flow: row wrap;
	gap: 4px 24px;
	padding: 14px 0;
	border-top: 1px solid var(--slate-200, #d9e0ea);
}
.elementor .seite .nachweis-kopf {
	display: block;
	flex: 1 1 220px;
	min-width: 0;
	padding: 0;
}
.elementor .seite .nachweis-titel {
	margin: 0;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	font-weight: 700;
	line-height: 1.4;
	color: var(--navy-950, #03183d);
}
.elementor .seite .nachweis-sub {
	margin: 2px 0 0;
	font-family: var(--b-schrift);
	font-size: .875rem;
	line-height: 1.45;
	color: var(--slate-500, #5a6272);
}
.elementor .seite .nachweis-text {
	display: flex;
	flex-direction: column;
	flex: 2 1 340px;
	gap: 8px;
	min-width: 0;
	padding: 0;
}

/* Datenschutz: Inhaltsverzeichnis links (ab 1100 px läuft es mit), Karten rechts */
.elementor .seite .recht-raster {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px clamp(24px, 3vw, 40px);
	padding: 0;
}
.elementor .seite .recht-inhalt {
	display: block;
	flex: 1 1 100%;
	min-width: 0;
	padding: 22px 20px;
	border: 1px solid var(--slate-200, #d9e0ea);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--b-shadow-xs);
}
.elementor .seite .recht-inhalt-titel {
	margin: 0 0 8px;
	font-family: var(--b-schrift-titel);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.62;
	color: var(--navy-950, #03183d);
}
.elementor .seite .recht-inhalt-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 0 24px;
	padding: 0;
}
.elementor .seite .recht-inhalt-punkt {
	display: block;
	padding: 0;
}
.elementor .seite .recht-inhalt-link {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 16px;
	align-items: center;
	gap: 6px;
	width: auto; /* Elementor setzt 100 %; so reicht die Fläche wie bei Vercel 8 px über den Rand */
	min-height: 44px;
	margin-inline: -8px;
	padding: 6px 8px;
	border-radius: 8px;
	font-family: var(--b-schrift);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--navy-950, #03183d);
	text-decoration: none;
	transition: background-color .16s, color .16s;
}
/* Pfeil rechts (Lucide „chevron-right“) */
.elementor .seite .recht-inhalt-link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--blue-700, #0349ae);
	-webkit-mask: 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='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor .seite .recht-inhalt-link .e-paragraph-base {
	margin: 0;
	font: inherit;
	color: inherit;
}
.elementor .seite .recht-inhalt-link .e-paragraph-base:first-child {
	font-weight: 700;
	color: var(--blue-700, #0349ae);
}
.elementor .seite .recht-inhalt-link:hover {
	background: var(--blue-50, #eef4fd);
	color: var(--blue-700, #0349ae);
}
.elementor .seite .recht-inhalt-link:focus-visible {
	outline: 3px solid var(--focus-ring, #1c6ad0);
	outline-offset: 2px;
}
.elementor .seite .recht-karten {
	display: flex;
	flex-direction: column;
	flex: 1 1 560px;
	gap: 16px;
	min-width: 0;
	padding: 0;
}
@media (min-width: 1100px) {
	.elementor .seite .recht-inhalt {
		position: sticky;
		top: calc(var(--b-kopfhoehe) + 22px);
		flex: 0 1 300px;
		max-height: calc(100vh - var(--b-kopfhoehe) - 42px);
		overflow-y: auto;
	}
	.elementor .seite .recht-inhalt-liste { grid-template-columns: minmax(0, 1fr); }
	.elementor .seite .recht-inhalt-link { min-height: 40px; }
}

/* „Ihre Rechte im Überblick“: Häkchen im Kreis */
.elementor .seite .recht-rechte {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 10px 20px;
	margin-top: 4px;
	padding: 0;
}
.elementor .seite .recht-recht {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--b-schrift);
	font-size: var(--b-fs-body);
	font-weight: 600;
	line-height: 1.62;
	color: var(--navy-950, #03183d);
}
.elementor .seite .recht-recht::before {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 2px solid var(--blue-700, #0349ae);
	border-radius: 50%;
	background: var(--bi-haken-blau) center / 12px 12px no-repeat;
}

/* Schmale Handys: lange Wörter in Überschriften und Fragen trennen (wie Vercel) */
@media (max-width: 400px) {
	.elementor .seite :is(h1, h2, h3),
	.elementor .seite .checkliste-titel,
	.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. Dieselbe Bewegung nutzt
   der Unterstrich der Handnotiz (Vercels bf-draw) */
@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, .portraet-medien) { animation: kb-hero-zoom 1.8s cubic-bezier(.33, 1, .68, 1) both; }
	/* Handnotiz im Kopfbereich (Ihr Gutachter) schreibt sich beim Laden */
	.elementor .seite .hero .notiz { animation: kb-schreiben .9s var(--b-ease-in-out) .45s both; }
	/* Unterstrich der Handnotiz zieht sich auf (weiter unten erst, wenn sie sich schreibt) */
	.elementor .seite .notiz-strich::after { animation: kb-strich .64s var(--b-ease-expo) .25s 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; }
.kb-motion .elementor .seite .einblenden-3.wartet.ist-sichtbar { transition-delay: 160ms; }
/* Handnotizen weiter unten: verdeckt, bis sie zu 92 % im Bild sind, dann schreiben
   sie sich (0,9 s, Verzögerung 0,15 s wie Vercels GSAP-Regel). Liegt eine schon
   oberhalb des Fensters, erscheint sie ohne Bewegung. */
.kb-motion .elementor .seite .notiz.wartet { clip-path: inset(-30% 100% -30% -10%); }
.kb-motion .elementor .seite .notiz-strich.wartet::after {
	animation: none;
	transform: rotate(-2deg) scaleX(0);
}
.kb-motion .elementor .seite .notiz.wartet.ist-geschrieben {
	clip-path: none;
	animation: kb-schreiben .9s cubic-bezier(.45, 0, .55, 1) .15s both;
}
.kb-motion .elementor .seite .notiz-strich.wartet.ist-geschrieben::after {
	transform: rotate(-2deg);
	animation: kb-strich .64s var(--b-ease-expo) .25s both;
}
.kb-motion .elementor .seite .notiz.wartet.ist-geschrieben.sofort,
.kb-motion .elementor .seite .notiz-strich.wartet.ist-geschrieben.sofort::after { animation: none; }

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

/* ------------------------------------------------------ Fehlerseite 404 */
/* Elementor-Vorlage „Fehler 404“ (Theme Builder, 22.10.2026) wie Vercels not-found: heller Grund,
   Kopf und Knöpfe 20 px auseinander, Abstand oben und unten wie dort. Seitenrand von .abschnitt. */
.elementor .seite .abschnitt.fehler-404 {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: clamp(48px, 7vw, 96px);
	background: var(--slate-25, #f9fafd);
}

/* ------------------------------------------------------------- Drucken */
/* „Checkliste drucken“ (Ablauf), seit 21.10.2026: bausteine.js hängt ein eigenes A4-Blatt (#druck-blatt,
   Gestaltung im Shadow DOM) an <body> und setzt beim Drucken die Klasse druck-blatt-an. Gedruckt wird
   dann nur das Blatt, alles andere ist display:none – deshalb ist die Druckvorschau sofort da.
   Vorher wurde die Bildschirm-Karte gedruckt (langsam, schlichtes Layout). Den Seitenrand (@page, Rand 0)
   setzt bausteine.js nur für diesen Druck – dann setzt der Browser keine Kopf- und Fußzeile dazu. */
#druck-blatt { display: none; }
@media print {
	body.druck-blatt-an { margin: 0 !important; padding: 0 !important; background: #fff !important; }
	body.druck-blatt-an > :not(#druck-blatt) { display: none !important; }
	body.druck-blatt-an > #druck-blatt { display: block !important; }
}