.elementor-kit-5{--e-global-color-primary:#2F7EBD;--e-global-color-secondary:#26659A;--e-global-color-text:#475569;--e-global-color-accent:#25D366;--e-global-color-ffheading:#111827;--e-global-color-ffmuted:#4B5563;--e-global-color-fftextdark:#374151;--e-global-color-ffwhite:#FFFFFF;--e-global-color-ffborder:#E2E8F0;--e-global-color-ffborderlight:#F3F4F6;--e-global-color-ffsurface:#F1F5F9;--e-global-color-ffsurfacelight:#F9FAFB;--e-global-color-fficonbg:#E0EFF9;--e-global-color-fffooter:#5A9FD4;--e-global-color-ffstar:#FACC15;--e-global-color-ffsvcgreen:#16A34A;--e-global-color-ffsvcblue:#2563EB;--e-global-color-ffsvcpurple:#9333EA;--e-global-color-ffsvcred:#DC2626;--e-global-color-ffsvcteal:#0D9488;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-size:16px;font-weight:400;line-height:24px;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-primary );font-size:16px;font-weight:600;line-height:24px;color:var( --e-global-color-ffwhite );border-radius:8px 8px 8px 8px;padding:12px 24px 12px 24px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-primary );}.elementor-kit-5 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-5 h1{color:var( --e-global-color-text );font-size:48px;font-weight:700;line-height:48px;}.elementor-kit-5 h2{color:var( --e-global-color-ffheading );font-size:36px;font-weight:700;line-height:40px;}.elementor-kit-5 h3{color:var( --e-global-color-ffheading );font-size:20px;font-weight:600;line-height:28px;}.elementor-kit-5 h4{color:var( --e-global-color-ffheading );font-size:18px;font-weight:600;line-height:28px;}.elementor-kit-5 h5{color:var( --e-global-color-ffheading );font-size:16px;font-weight:600;line-height:24px;}.elementor-kit-5 h6{color:var( --e-global-color-ffheading );font-size:14px;font-weight:600;line-height:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1023px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5 h1{font-size:36px;line-height:40px;}.elementor-kit-5 h2{font-size:30px;line-height:36px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ════ SCHRIFT ════ Das Original nutzt den System-Stack (kein Webfont). */
body,button,input,select,textarea,optgroup,.elementor-widget-heading .elementor-heading-title,.elementor-widget-text-editor,.elementor-button,.elementor-nav-menu,.elementor-nav-menu a,.elementor-field-group label,.elementor-field-textual,.elementor-field-option label,.elementor-icon-list-item{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;}

/* ════ ICONS ════
   Die Icons sind Lucide: stroke-basiert mit fill="none". Elementor färbt SVGs per
   fill — ohne diese Korrektur werden sie zu massiven Klumpen.
   DIE FARBE kommt aus dem NATIVEN Feld des Icon-Widgets (Stil → Primärfarbe) und
   hängt am globalen Farbtoken — hier NICHT per Klasse setzen, Elementors eigene
   Regel auf .elementor-icon würde gewinnen.
   Klassen steuern nur Größe, Kreis und Füllung: "ff-icon ff-icon--24" */
.ff-icon .elementor-icon-wrapper{line-height:0;}
.ff-icon .elementor-icon{display:flex;line-height:0;}
.ff-icon svg{display:block;}
.ff-icon svg,.ff-icon svg *{fill:none !important;stroke:currentColor !important;}
/* Größen */
.ff-icon--16 svg{width:16px;height:16px;}
.ff-icon--20 svg{width:20px;height:20px;}
.ff-icon--24 svg{width:24px;height:24px;}
.ff-icon--32 svg{width:32px;height:32px;}
.ff-icon--80 svg{width:80px;height:80px;}
/* Gefüllte Icons (Bewertungssterne) — muss NACH der Basis stehen */
.ff-icon--filled svg,.ff-icon--filled svg *{fill:currentColor !important;stroke:currentColor !important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Kreis-Hintergrund */
.ff-icon--circle .elementor-icon{align-items:center;justify-content:center;border-radius:9999px;padding:0;}
.ff-icon--c48 .elementor-icon{width:48px;height:48px;}
.ff-icon--c64 .elementor-icon{width:64px;height:64px;margin:0 auto;}
.ff-icon--bg-soft .elementor-icon{background:var(--e-global-color-fficonbg);}
.ff-icon--bg-brand10 .elementor-icon{background:rgba(47,126,189,.1);}
.ff-icon--bg-wa10 .elementor-icon{background:rgba(37,211,102,.1);}
.ff-icon--bg-none .elementor-icon{background:transparent;}
.ff-icon--pad8 .elementor-icon{padding:8px;}
.ff-icon--w48{width:48px;flex:0 0 48px;}

/* ════ TEXT ════ Elementors Text-Editor erbt die <p>-Margin des Themes (14,4px). */
.ff-prose p{margin:0;}

/* ════ SCHATTEN ════ */
.ff-shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
.ff-shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05);}

/* ════ LAYOUT-HELFER ════ */
.ff-w-auto{width:auto;flex:0 0 auto;}
.ff-wrap{max-width:1280px;width:100%;margin-inline:auto;}

/* ════ LISTEN ════
   icon-list ist der Sonderfall: Elementor gibt für SVG NUR fill: aus — color: bekommt
   allein das <i>. currentColor greift hier also nicht, und ohne diese Regel füllt
   Elementor die Strich-Icons zu Klecksen (derselbe Fehler wie beim Icon-Widget).
   Größe, Abstand, Einzug, Typografie und Textfarbe bleiben NATIVE Widget-Felder.
   Icon-Farbe: Vorgabe ist die Primärfarbe; sonst Klasse ff-ls--footer/--white/--accent.
   Beispiel: "ff-ls" oder "ff-ls ff-ls--footer" */
.ff-ls .elementor-icon-list-icon{color:var(--ff-ls,var(--e-global-color-primary));line-height:0;}
.ff-ls .elementor-icon-list-icon svg{fill:none !important;stroke:currentColor !important;flex-shrink:0;}
.ff-ls .elementor-icon-list-icon svg *{fill:none !important;stroke:currentColor !important;}
/* Elementor legt 5px vor den Text; damit meint das Feld "Text-Einzug" wirklich den Abstand. */
.ff-ls .elementor-icon-list-text{padding-inline-start:0;}
.ff-ls--footer{--ff-ls:var(--e-global-color-fffooter);}
.ff-ls--white{--ff-ls:var(--e-global-color-ffwhite);}
.ff-ls--accent{--ff-ls:var(--e-global-color-accent);}

/* ════ BEWERTUNGSSTERNE ════
   Gefüllt, nicht Strich — daher NICHT .ff-ls verwenden.
   Elementor setzt für SVG nur fill:; der Lucide-Stern bringt stroke="currentColor" mit
   und bekäme ohne color: hier einen grauen Rand.
   Der Text-Span jedes Listeneintrags ist bei Sternen leer, belegt aber Platz und zieht
   die Reihe von 100px auf 140px — daher display:none.
   Farbe: globales Token "Stern". Klasse: "ff-stars" */
.ff-stars .elementor-icon-list-icon{color:var(--e-global-color-ffstar);line-height:0;width:auto;}
.ff-stars .elementor-icon-list-icon svg,.ff-stars .elementor-icon-list-icon svg *{stroke:currentColor !important;}
.ff-stars .elementor-icon-list-text{display:none;}
/* ff-sticky-cta - mobiler Anruf/WhatsApp-Balken (nur <=767px), Google-Ads-LPs. Doku: DESIGN.md Par.5 */
.ff-sticky-cta{display:none;}
@media(max-width:767px){
.ff-sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:49;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--e-global-color-ffwhite);box-shadow:0 -4px 12px rgba(0,0,0,.08);}
.ff-sticky-cta > .elementor-element{flex:1 1 0;width:auto;}
.ff-sticky-cta .elementor-button{width:100%;}
}/* End custom CSS */