.elementor-kit-13{--e-global-color-secondary:#000000;--e-global-color-primary:#414141;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FFFFFF2B;--e-global-color-14caab8:#FFFFFF99;--e-global-color-6744ea2:#FFFFFFCC;--e-global-color-d49ac81:#0166B1;--e-global-color-332724a:#005391;--e-global-color-4d462f5:#D7DCE2;--e-global-color-cfa1f76:#EFF0F0;--e-global-color-7fbea4f:#F9F9F9;--e-global-color-c94d9ab:#343638;--e-global-color-044b931:#252728;--e-global-color-638d055:#030303;--e-global-color-ec3c7a7:#0166B1;--e-global-color-3ee16e7:#0166B1;--e-global-color-c9f5f51:#349AF4;--e-global-color-8aef744:#3FD53A;--e-global-color-99cd272:#FFC338;--e-global-typography-primary-font-family:"BMW Regualr Next";--e-global-typography-primary-font-size:56px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-1px;--e-global-typography-secondary-font-family:"BMW Regualr Next";--e-global-typography-secondary-font-size:44px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-1px;--e-global-typography-text-font-family:"BMW Regualr Next";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"BMW Regualr Next";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0.5px;--e-global-typography-b2ce6af-font-family:"BMW Regualr Next";--e-global-typography-b2ce6af-font-size:16px;--e-global-typography-b2ce6af-font-weight:400;--e-global-typography-b2ce6af-text-transform:none;--e-global-typography-b2ce6af-font-style:normal;--e-global-typography-b2ce6af-line-height:1.5em;--e-global-typography-69c152f-font-family:"BMW Regualr Next";--e-global-typography-69c152f-font-size:15px;--e-global-typography-69c152f-font-weight:400;--e-global-typography-69c152f-line-height:1.5em;--e-global-typography-112b6c4-font-family:"BMW Regualr Next";--e-global-typography-112b6c4-font-size:13px;--e-global-typography-112b6c4-line-height:1.5em;--e-global-typography-520c191-font-family:"BMW Regualr Next";--e-global-typography-520c191-font-size:13px;--e-global-typography-520c191-font-weight:500;--e-global-typography-520c191-text-transform:uppercase;--e-global-typography-520c191-line-height:1.5em;--e-global-typography-a435f28-font-family:"BMW Regualr Next";--e-global-typography-a435f28-font-size:88px;--e-global-typography-a435f28-font-weight:700;--e-global-typography-a435f28-text-transform:uppercase;--e-global-typography-a435f28-line-height:1em;--e-global-typography-a435f28-letter-spacing:-2px;--e-global-typography-583e54c-font-family:"BMW Regualr Next";--e-global-typography-583e54c-font-size:56px;--e-global-typography-583e54c-font-weight:600;--e-global-typography-583e54c-line-height:1.1em;--e-global-typography-583e54c-letter-spacing:-1px;--e-global-typography-5d167aa-font-family:"BMW Regualr Next";--e-global-typography-5d167aa-font-size:44px;--e-global-typography-5d167aa-font-weight:600;--e-global-typography-5d167aa-line-height:1.2em;--e-global-typography-5d167aa-letter-spacing:-1px;--e-global-typography-d3dae9a-font-family:"BMW Regualr Next";--e-global-typography-d3dae9a-font-size:32px;--e-global-typography-d3dae9a-font-weight:600;--e-global-typography-d3dae9a-font-style:normal;--e-global-typography-d3dae9a-line-height:1.3em;--e-global-typography-83682a1-font-family:"BMW Regualr Next";--e-global-typography-83682a1-font-size:24px;--e-global-typography-83682a1-font-weight:400;--e-global-typography-83682a1-font-style:normal;--e-global-typography-83682a1-line-height:1.4em;--e-global-typography-7044a64-font-family:"BMW Regualr Next";--e-global-typography-7044a64-font-size:20px;--e-global-typography-7044a64-font-weight:500;--e-global-typography-7044a64-line-height:1.4em;--e-global-typography-84ca66e-font-family:"BMW Regualr Next";--e-global-typography-84ca66e-font-size:13px;--e-global-typography-84ca66e-font-weight:500;--e-global-typography-84ca66e-text-transform:uppercase;--e-global-typography-84ca66e-line-height:1.5em;color:var( --e-global-color-primary );font-family:var( --e-global-typography-b2ce6af-font-family ), Sans-serif;font-size:var( --e-global-typography-b2ce6af-font-size );font-weight:var( --e-global-typography-b2ce6af-font-weight );text-transform:var( --e-global-typography-b2ce6af-text-transform );font-style:var( --e-global-typography-b2ce6af-font-style );line-height:var( --e-global-typography-b2ce6af-line-height );}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{background-color:var( --e-global-color-d49ac81 );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-text );border-style:solid;border-width:0px 0px 0px 0px;border-color:var( --e-global-color-d49ac81 );border-radius:4px 4px 4px 4px;padding:15px 15px 15px 15px;}.elementor-kit-13 button:hover,.elementor-kit-13 button:focus,.elementor-kit-13 input[type="button"]:hover,.elementor-kit-13 input[type="button"]:focus,.elementor-kit-13 input[type="submit"]:hover,.elementor-kit-13 input[type="submit"]:focus,.elementor-kit-13 .elementor-button:hover,.elementor-kit-13 .elementor-button:focus{background-color:var( --e-global-color-332724a );color:var( --e-global-color-text );border-style:solid;border-width:0px 0px 0px 0px;border-color:var( --e-global-color-332724a );}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-kit-13 a{color:var( --e-global-color-primary );}.elementor-kit-13 a:hover{color:var( --e-global-color-332724a );}.elementor-kit-13 h1{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-583e54c-font-family ), Sans-serif;font-size:var( --e-global-typography-583e54c-font-size );font-weight:var( --e-global-typography-583e54c-font-weight );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}.elementor-kit-13 h2{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-5d167aa-font-family ), Sans-serif;font-size:var( --e-global-typography-5d167aa-font-size );font-weight:var( --e-global-typography-5d167aa-font-weight );line-height:var( --e-global-typography-5d167aa-line-height );letter-spacing:var( --e-global-typography-5d167aa-letter-spacing );}.elementor-kit-13 h3{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-d3dae9a-font-family ), Sans-serif;font-size:var( --e-global-typography-d3dae9a-font-size );font-weight:var( --e-global-typography-d3dae9a-font-weight );font-style:var( --e-global-typography-d3dae9a-font-style );line-height:var( --e-global-typography-d3dae9a-line-height );}.elementor-kit-13 h4{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-83682a1-font-family ), Sans-serif;font-size:var( --e-global-typography-83682a1-font-size );font-weight:var( --e-global-typography-83682a1-font-weight );font-style:var( --e-global-typography-83682a1-font-style );line-height:var( --e-global-typography-83682a1-line-height );}.elementor-kit-13 h5{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-7044a64-font-family ), Sans-serif;font-size:var( --e-global-typography-7044a64-font-size );font-weight:var( --e-global-typography-7044a64-font-weight );line-height:var( --e-global-typography-7044a64-line-height );}.elementor-kit-13 h6{color:var( --e-global-color-d49ac81 );font-family:var( --e-global-typography-84ca66e-font-family ), Sans-serif;font-size:var( --e-global-typography-84ca66e-font-size );font-weight:var( --e-global-typography-84ca66e-font-weight );text-transform:var( --e-global-typography-84ca66e-text-transform );line-height:var( --e-global-typography-84ca66e-line-height );}.elementor-kit-13 img{border-radius:8px 8px 8px 8px;}.elementor-kit-13 label{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-520c191-font-family ), Sans-serif;font-size:var( --e-global-typography-520c191-font-size );font-weight:var( --e-global-typography-520c191-font-weight );text-transform:var( --e-global-typography-520c191-text-transform );line-height:var( --e-global-typography-520c191-line-height );}.elementor-kit-13 input:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea,.elementor-kit-13 .elementor-field-textual{font-family:var( --e-global-typography-69c152f-font-family ), Sans-serif;font-size:var( --e-global-typography-69c152f-font-size );font-weight:var( --e-global-typography-69c152f-font-weight );line-height:var( --e-global-typography-69c152f-line-height );color:var( --e-global-color-secondary );background-color:var( --e-global-color-cfa1f76 );box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.1) inset;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-4d462f5 );border-radius:4px 4px 4px 4px;}.elementor-kit-13 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea:focus,.elementor-kit-13 .elementor-field-textual:focus{color:var( --e-global-color-primary );background-color:var( --e-global-color-text );box-shadow:0px 0px 0px 0px rgba(14.000000000000007, 179.00000000000009, 227, 0.1);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-332724a );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1350px;}.e-con{--container-max-width:1350px;}.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(min-width:2400px){.elementor-kit-13{font-size:var( --e-global-typography-b2ce6af-font-size );line-height:var( --e-global-typography-b2ce6af-line-height );}.elementor-kit-13 h1{font-size:var( --e-global-typography-583e54c-font-size );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}.elementor-kit-13 h2{font-size:var( --e-global-typography-5d167aa-font-size );line-height:var( --e-global-typography-5d167aa-line-height );letter-spacing:var( --e-global-typography-5d167aa-letter-spacing );}.elementor-kit-13 h3{font-size:var( --e-global-typography-d3dae9a-font-size );line-height:var( --e-global-typography-d3dae9a-line-height );}.elementor-kit-13 h4{font-size:var( --e-global-typography-83682a1-font-size );line-height:var( --e-global-typography-83682a1-line-height );}.elementor-kit-13 h5{font-size:var( --e-global-typography-7044a64-font-size );line-height:var( --e-global-typography-7044a64-line-height );}.elementor-kit-13 h6{font-size:var( --e-global-typography-84ca66e-font-size );line-height:var( --e-global-typography-84ca66e-line-height );}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-13 label{font-size:var( --e-global-typography-520c191-font-size );line-height:var( --e-global-typography-520c191-line-height );}.elementor-kit-13 input:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea,.elementor-kit-13 .elementor-field-textual{font-size:var( --e-global-typography-69c152f-font-size );line-height:var( --e-global-typography-69c152f-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}}@media(max-width:1024px){.elementor-kit-13{--e-global-typography-primary-font-size:42px;--e-global-typography-secondary-font-size:34px;--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:12px;--e-global-typography-b2ce6af-font-size:15px;--e-global-typography-69c152f-font-size:14px;--e-global-typography-112b6c4-font-size:12px;--e-global-typography-520c191-font-size:12px;--e-global-typography-a435f28-font-size:64px;--e-global-typography-583e54c-font-size:42px;--e-global-typography-5d167aa-font-size:34px;--e-global-typography-d3dae9a-font-size:26px;--e-global-typography-83682a1-font-size:20px;--e-global-typography-7044a64-font-size:18px;--e-global-typography-84ca66e-font-size:12px;font-size:var( --e-global-typography-b2ce6af-font-size );line-height:var( --e-global-typography-b2ce6af-line-height );}.elementor-kit-13 h1{font-size:var( --e-global-typography-583e54c-font-size );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}.elementor-kit-13 h2{font-size:var( --e-global-typography-5d167aa-font-size );line-height:var( --e-global-typography-5d167aa-line-height );letter-spacing:var( --e-global-typography-5d167aa-letter-spacing );}.elementor-kit-13 h3{font-size:var( --e-global-typography-d3dae9a-font-size );line-height:var( --e-global-typography-d3dae9a-line-height );}.elementor-kit-13 h4{font-size:var( --e-global-typography-83682a1-font-size );line-height:var( --e-global-typography-83682a1-line-height );}.elementor-kit-13 h5{font-size:var( --e-global-typography-7044a64-font-size );line-height:var( --e-global-typography-7044a64-line-height );}.elementor-kit-13 h6{font-size:var( --e-global-typography-84ca66e-font-size );line-height:var( --e-global-typography-84ca66e-line-height );}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-13 label{font-size:var( --e-global-typography-520c191-font-size );line-height:var( --e-global-typography-520c191-line-height );}.elementor-kit-13 input:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea,.elementor-kit-13 .elementor-field-textual{font-size:var( --e-global-typography-69c152f-font-size );line-height:var( --e-global-typography-69c152f-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}}@media(max-width:767px){.elementor-kit-13{--e-global-typography-primary-font-size:30px;--e-global-typography-secondary-font-size:24px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:11px;--e-global-typography-b2ce6af-font-size:14px;--e-global-typography-69c152f-font-size:13px;--e-global-typography-112b6c4-font-size:11px;--e-global-typography-520c191-font-size:11px;--e-global-typography-a435f28-font-size:40px;--e-global-typography-583e54c-font-size:30px;--e-global-typography-5d167aa-font-size:24px;--e-global-typography-d3dae9a-font-size:22px;--e-global-typography-83682a1-font-size:20px;--e-global-typography-7044a64-font-size:17px;--e-global-typography-84ca66e-font-size:11px;font-size:var( --e-global-typography-b2ce6af-font-size );line-height:var( --e-global-typography-b2ce6af-line-height );}.elementor-kit-13 h1{font-size:var( --e-global-typography-583e54c-font-size );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}.elementor-kit-13 h2{font-size:var( --e-global-typography-5d167aa-font-size );line-height:var( --e-global-typography-5d167aa-line-height );letter-spacing:var( --e-global-typography-5d167aa-letter-spacing );}.elementor-kit-13 h3{font-size:var( --e-global-typography-d3dae9a-font-size );line-height:var( --e-global-typography-d3dae9a-line-height );}.elementor-kit-13 h4{font-size:var( --e-global-typography-83682a1-font-size );line-height:var( --e-global-typography-83682a1-line-height );}.elementor-kit-13 h5{font-size:var( --e-global-typography-7044a64-font-size );line-height:var( --e-global-typography-7044a64-line-height );}.elementor-kit-13 h6{font-size:var( --e-global-typography-84ca66e-font-size );line-height:var( --e-global-typography-84ca66e-line-height );}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-13 label{font-size:var( --e-global-typography-520c191-font-size );line-height:var( --e-global-typography-520c191-line-height );}.elementor-kit-13 input:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea,.elementor-kit-13 .elementor-field-textual{font-size:var( --e-global-typography-69c152f-font-size );line-height:var( --e-global-typography-69c152f-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}} /* Start custom CSS *//* ========================================================================= BERGER – Header wird beim Scrollen weiß · NUR CSS, kein JavaScript Variante für ElementsKit Sticky ========================================================================= EINBAU – 3 Schritte 1) CSS-Klasse am Header setzen Theme Builder → Header → den Container wählen, an dem ElementsKitSticky hängt → Erweitert → CSS-Klassen → eintragen: bgr-hdr 2) ElementsKitSticky einstellen (im selben Panel wie auf deinem Screenshot) Sticky: Top Add "ekit-sticky--effects" Class Offset: 60 Sticky Background Color: leer / transparent lassen Der Offset ist dein Umschaltpunkt in Pixeln. Steht er auf 0, springt der Header schon bei der ersten Scroll-Bewegung um. 3) Dieses CSS einfügen Elementor → Website-Einstellungen → Benutzerdefiniertes CSS (oder Design → Customizer → Zusätzliches CSS) --------------------------------------------------------------------- WIE ES FUNKTIONIERT ElementsKit hängt ab dem eingestellten Offset von selbst die Klasse .ekit-sticky--effects an den Container. Dieses CSS hört nur darauf – deshalb kein eigenes Script nötig, den Scroll-Listener bringt ElementsKit mit. Alle Regeln unten folgen dem gleichen Muster: .bgr-hdr → Ruhezustand, oben .bgr-hdr.ekit-sticky--effects → gescrollt (Falls du irgendwann auf Elementor Pro Sticky wechselst, heißt die Klasse dort .elementor-sticky--effects – dann einmal ersetzen.) ========================================================================= */ /* ------------------------------------------------------------------------- 0) Stellschrauben ------------------------------------------------------------------------- */ :root{ --hdr-bg: #ffffff; /* Hintergrund im gescrollten Zustand */ --hdr-ink: #111111; /* Menü, Symbole, Text */ --hdr-line: rgba(0,0,0,.14); /* Outline der Social-Icons */ --hdr-shadow: 0 1px 0 rgba(0,0,0,.07), 0 10px 30px -18px rgba(0,0,0,.45); --hdr-dur: .32s; --hdr-ease: cubic-bezier(.22,1,.36,1); } /* ------------------------------------------------------------------------- 1) Ruhezustand – Übergänge vorbereiten Steht auf .bgr-hdr (also in BEIDEN Zuständen), damit auch der Rückweg nach oben sanft läuft. transform steht bewusst mit in der Liste: ElementsKit schiebt den Header damit rein und raus. Ohne diesen Eintrag würde unsere transition-Regel die Slide-Animation von ElementsKit abwürgen. ------------------------------------------------------------------------- */ .bgr-hdr{ transition: background-color var(--hdr-dur) var(--hdr-ease), box-shadow var(--hdr-dur) var(--hdr-ease), transform .4s var(--hdr-ease); } .bgr-hdr .e-con-inner, .bgr-hdr .elementor-item, .bgr-hdr .elementor-social-icon, .bgr-hdr .elementor-icon, .bgr-hdr a, .bgr-hdr i, .bgr-hdr svg, .bgr-hdr img{ transition: background-color var(--hdr-dur) var(--hdr-ease), border-color var(--hdr-dur) var(--hdr-ease), box-shadow var(--hdr-dur) var(--hdr-ease), color var(--hdr-dur) var(--hdr-ease), fill var(--hdr-dur) var(--hdr-ease), filter var(--hdr-dur) var(--hdr-ease); } /* ------------------------------------------------------------------------- 2) Gescrollt – Hintergrund weiß ------------------------------------------------------------------------- */ .bgr-hdr.ekit-sticky--effects{ background-color: var(--hdr-bg) !important; box-shadow: var(--hdr-shadow) !important; } /* Elementor legt Hintergründe oft auf den inneren Container – der muss durchsichtig werden, sonst bleibt die alte Farbe als Streifen stehen. */ .bgr-hdr.ekit-sticky--effects > .e-con-inner, .bgr-hdr.ekit-sticky--effects > .elementor-container{ background-color: transparent !important; } /* ------------------------------------------------------------------------- 3) Gescrollt – Menü & Text schwarz Buttons sind ausgenommen → der blaue CTA bleibt blau. ------------------------------------------------------------------------- */ .bgr-hdr.ekit-sticky--effects .elementor-nav-menu .elementor-item, .bgr-hdr.ekit-sticky--effects .elementor-nav-menu a, .bgr-hdr.ekit-sticky--effects .ekit-menu-nav-link, .bgr-hdr.ekit-sticky--effects .elementor-heading-title, .bgr-hdr.ekit-sticky--effects p, .bgr-hdr.ekit-sticky--effects a:not([class*="elementor-button"]){ color: var(--hdr-ink) !important; } .bgr-hdr.ekit-sticky--effects .elementor-nav-menu .elementor-item:hover, .bgr-hdr.ekit-sticky--effects .elementor-nav-menu .elementor-item.elementor-item-active, .bgr-hdr.ekit-sticky--effects .ekit-menu-nav-link:hover{ color: #000 !important; } /* Unterstreichung / Pointer-Effekt des Nav-Menüs */ .bgr-hdr.ekit-sticky--effects .e--pointer-underline .elementor-item:before, .bgr-hdr.ekit-sticky--effects .e--pointer-underline .elementor-item:after, .bgr-hdr.ekit-sticky--effects .e--pointer-overline .elementor-item:before, .bgr-hdr.ekit-sticky--effects .e--pointer-double-line .elementor-item:before, .bgr-hdr.ekit-sticky--effects .e--pointer-double-line .elementor-item:after{ background-color: var(--hdr-ink) !important; } /* ------------------------------------------------------------------------- 4) Gescrollt – Symbole schwarz ------------------------------------------------------------------------- */ /* Dropdown-Pfeil "ÜBER UNS ⌄" – Elementor-Menü und ElementsKit-Menü */ .bgr-hdr.ekit-sticky--effects .elementor-nav-menu .sub-arrow i, .bgr-hdr.ekit-sticky--effects .elementor-nav-menu .sub-arrow svg, .bgr-hdr.ekit-sticky--effects .ekit-submenu-indicator{ color: var(--hdr-ink) !important; fill: var(--hdr-ink) !important; } /* Social-Icons: gefüllter Kreis → schwarze Outline, Glyph schwarz */ .bgr-hdr.ekit-sticky--effects .elementor-social-icon{ background-color: transparent !important; box-shadow: inset 0 0 0 1px var(--hdr-line); } .bgr-hdr.ekit-sticky--effects .elementor-social-icon i, .bgr-hdr.ekit-sticky--effects .elementor-social-icon svg{ color: var(--hdr-ink) !important; fill: var(--hdr-ink) !important; } .bgr-hdr.ekit-sticky--effects .elementor-social-icon:hover{ background-color: var(--hdr-ink) !important; box-shadow: inset 0 0 0 1px var(--hdr-ink); } .bgr-hdr.ekit-sticky--effects .elementor-social-icon:hover i, .bgr-hdr.ekit-sticky--effects .elementor-social-icon:hover svg{ color: #fff !important; fill: #fff !important; } /* Alle übrigen Icons: Icon-Widget, Icon-Box, Icon-Liste, Suche, Warenkorb */ .bgr-hdr.ekit-sticky--effects .elementor-icon, .bgr-hdr.ekit-sticky--effects .elementor-icon i, .bgr-hdr.ekit-sticky--effects .elementor-icon svg, .bgr-hdr.ekit-sticky--effects .elementor-icon-list-icon i, .bgr-hdr.ekit-sticky--effects .elementor-icon-list-icon svg, .bgr-hdr.ekit-sticky--effects .elementor-search-form__icon, .bgr-hdr.ekit-sticky--effects .ekit_menu-icon{ color: var(--hdr-ink) !important; fill: var(--hdr-ink) !important; } /* Mobile: Burger-Menü (Elementor und ElementsKit) */ .bgr-hdr.ekit-sticky--effects .elementor-menu-toggle, .bgr-hdr.ekit-sticky--effects .ekit_menu-close, .bgr-hdr.ekit-sticky--effects .ekit_navsidebar-button{ color: var(--hdr-ink) !important; background-color: transparent !important; } .bgr-hdr.ekit-sticky--effects .elementor-menu-toggle svg, .bgr-hdr.ekit-sticky--effects .ekit_menu-toggler svg{ fill: var(--hdr-ink) !important; } /* ElementsKit-Burger besteht aus drei -Balken */ .bgr-hdr.ekit-sticky--effects .ekit_menu-toggler span, .bgr-hdr.ekit-sticky--effects .ekit-hamburger span{ background-color: var(--hdr-ink) !important; } /* ------------------------------------------------------------------------- 5) Logos schwarz – "BERGER" und "BMW Service | MINI Service" Hier steht bewusst brightness(0) und nicht invert(1): brightness(0) zieht jeden Farbkanal auf null und macht damit JEDES Bild schwarz – egal ob die Datei weiß, schwarz oder bunt ist. Die Transparenz bleibt dabei erhalten. invert(1) dagegen hängt davon ab, welche Farbe die Datei wirklich hat, und trifft nur den einen Fall. Abgedeckt sind alle drei Bauarten, in denen ein Logo vorkommen kann: · (Site-Logo-Widget, Bild-Widget) · Inline-SVG (Elementor kann SVGs direkt einbetten) · background-image (Container mit Logo als Hintergrund) ------------------------------------------------------------------------- */ /* Alle Bilder im Header – deckt "BERGER" und ein Bild-Logo "BMW Service | MINI Service" gemeinsam ab */ .bgr-hdr.ekit-sticky--effects img{ filter: brightness(0) !important; } /* Inline-SVG-Logos */ .bgr-hdr.ekit-sticky--effects .elementor-widget-theme-site-logo svg, .bgr-hdr.ekit-sticky--effects .elementor-widget-image svg{ filter: brightness(0) !important; } .bgr-hdr.ekit-sticky--effects .elementor-widget-theme-site-logo svg *, .bgr-hdr.ekit-sticky--effects .elementor-widget-image svg *{ fill: #000 !important; } /* Logo als Hintergrundbild eines Containers */ .bgr-hdr.ekit-sticky--effects [class*="logo"]{ filter: brightness(0) !important; } /* Falls "BMW Service | MINI Service" TEXT ist und kein Bild: das erledigt schon Abschnitt 3. Der Trennstrich "|" ist meist ein Rahmen und braucht diese Zeile hier. */ .bgr-hdr.ekit-sticky--effects .elementor-divider-separator, .bgr-hdr.ekit-sticky--effects [class*="separator"]{ border-color: var(--hdr-ink) !important; background-color: var(--hdr-ink) !important; } /* AUSNAHME – ein Bild, das seine Farbe behalten soll (z.B. ein farbiges Siegel oder Partner-Logo): im Widget unter Erweitert → CSS-Klassen keep-color eintragen. */ .bgr-hdr.ekit-sticky--effects .keep-color img, .bgr-hdr.ekit-sticky--effects img.keep-color{ filter: none !important; } /* ------------------------------------------------------------------------- 6) Barrierefreiheit ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .bgr-hdr, .bgr-hdr *{ transition: none !important; } } /* ========================================================================= PLAN B – falls ElementsKit die Klasse .ekit-sticky--effects nicht setzt Reines CSS über Scroll-Driven Animations, ebenfalls ohne JavaScript. Läuft in Chrome/Edge ab 115 und Safari 26. Ältere Browser ignorieren den Block – dort bleibt der Header transparent, es geht nichts kaputt. Zum Aktivieren: die Kommentarzeichen um den Block unten entfernen und die Abschnitte 2–5 oben löschen (sonst kämpfen zwei Systeme). ========================================================================= */ /* @supports (animation-timeline: scroll()) { .bgr-hdr, .bgr-hdr .elementor-nav-menu .elementor-item, .bgr-hdr .elementor-nav-menu .sub-arrow i, .bgr-hdr .elementor-nav-menu .sub-arrow svg, .bgr-hdr .elementor-social-icon, .bgr-hdr .elementor-social-icon i, .bgr-hdr .elementor-social-icon svg, .bgr-hdr .elementor-widget-theme-site-logo img{ animation-timeline: scroll(root block); animation-range: 0 90px; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; } .bgr-hdr { animation-name: hdr-white } .bgr-hdr .elementor-nav-menu .elementor-item { animation-name: hdr-ink } .bgr-hdr .elementor-nav-menu .sub-arrow i, .bgr-hdr .elementor-nav-menu .sub-arrow svg { animation-name: hdr-ink } .bgr-hdr .elementor-social-icon { animation-name: hdr-soc } .bgr-hdr .elementor-social-icon i, .bgr-hdr .elementor-social-icon svg { animation-name: hdr-ink } .bgr-hdr .elementor-widget-theme-site-logo img { animation-name: hdr-logo } @keyframes hdr-white{ to{ background-color: var(--hdr-bg); box-shadow: var(--hdr-shadow); } } @keyframes hdr-ink{ to{ color: var(--hdr-ink); fill: var(--hdr-ink); } } @keyframes hdr-soc{ to{ background-color: transparent; box-shadow: inset 0 0 0 1px var(--hdr-line); } } @keyframes hdr-logo{ from{ filter: brightness(1) } to{ filter: brightness(0) } } } *//* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'BMW Regualr Next'; font-style: normal; font-weight: normal; font-display: auto; src: url('http://wie-sauber.de/wp-content/uploads/2026/08/BMWTypeNext-Regular-1.woff2') format('woff2'); } /* End Custom Fonts CSS */