.elementor-9577 .elementor-element.elementor-element-1b7ed45b{--display:flex;--position:absolute;--justify-content:space-around;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0% 0%;--row-gap:0%;--column-gap:0%;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#000000;--border-color:#000000;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;top:0px;--z-index:99;}.elementor-9577 .elementor-element.elementor-element-1b7ed45b:not(.elementor-motion-effects-element-type-background), .elementor-9577 .elementor-element.elementor-element-1b7ed45b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-9577 .elementor-element.elementor-element-1b7ed45b.e-con{--align-self:center;}body:not(.rtl) .elementor-9577 .elementor-element.elementor-element-1b7ed45b{left:0px;}body.rtl .elementor-9577 .elementor-element.elementor-element-1b7ed45b{right:0px;}.elementor-9577 .elementor-element.elementor-element-4901a9e3{--display:flex;--min-height:60px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 4px;--row-gap:0px;--column-gap:4px;--flex-wrap:nowrap;--border-radius:15px 15px 15px 15px;box-shadow:-10px 10px 20px 0px rgba(0,0,0,0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}.elementor-9577 .elementor-element.elementor-element-4901a9e3:not(.elementor-motion-effects-element-type-background), .elementor-9577 .elementor-element.elementor-element-4901a9e3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFF2;}.elementor-9577 .elementor-element.elementor-element-4901a9e3.e-con{--align-self:center;}.elementor-9577 .elementor-element.elementor-element-b1c33a{--display:flex;--min-height:15px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 16px;--row-gap:0px;--column-gap:16px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9577 .elementor-element.elementor-element-b1c33a.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-9577 .elementor-element.elementor-element-678795d2{width:var( --container-widget-width, 34px );max-width:34px;--container-widget-width:34px;--container-widget-flex-grow:0;text-align:center;}.elementor-9577 .elementor-element.elementor-element-678795d2 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9577 .elementor-element.elementor-element-678795d2.elementor-element{--align-self:center;}.elementor-9577 .elementor-element.elementor-element-678795d2 img{width:34px;max-width:100%;height:0%;opacity:1;border-radius:0px 0px 0px 0px;}.elementor-9577 .elementor-element.elementor-element-74795599{width:var( --container-widget-width, 76% );max-width:76%;--container-widget-width:76%;--container-widget-flex-grow:0;text-align:start;}.elementor-9577 .elementor-element.elementor-element-74795599 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9577 .elementor-element.elementor-element-74795599 .elementor-heading-title{font-family:"puffin-display";font-size:1em;font-weight:800;line-height:0.7rem;letter-spacing:-0.4px;word-spacing:2px;color:#000000;}.elementor-9577 .elementor-element.elementor-element-6de9c9c3{--display:flex;--flex-direction:row-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:flex-start;--align-items:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9577 .elementor-element.elementor-element-6de9c9c3.e-con{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-9577 .elementor-element.elementor-element-235e4b6d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d.elementor-element{--align-self:center;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-menu-toggle{margin:0 auto;background-color:#FFFFFF00;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu .elementor-item{font-family:"puffin-display";font-size:1em;font-weight:800;line-height:1.6rem;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item{color:#000000;fill:#000000;padding-left:20px;padding-right:20px;padding-top:11px;padding-bottom:11px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item:hover, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item.highlighted, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item:focus{color:#000000;fill:#000000;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-7f67b6f );}.elementor-9577 .elementor-element.elementor-element-235e4b6d{--e-nav-menu-horizontal-menu-item-margin:calc( 0px / 2 );}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:0px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-menu-toggle{color:var( --e-global-color-7f67b6f );fill:var( --e-global-color-7f67b6f );}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown{background-color:#FFFFFFF2;border-radius:20px 20px 20px 20px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a:hover, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a:focus, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a.highlighted, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-menu-toggle:hover, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-menu-toggle:focus{color:var( --e-global-color-7f67b6f );}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a:hover, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a:focus, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-f120c4e );}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a.elementor-item-active{color:var( --e-global-color-7f67b6f );background-color:var( --e-global-color-f120c4e );}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown .elementor-item, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-2480cd2-font-family );font-size:var( --e-global-typography-2480cd2-font-size );font-weight:var( --e-global-typography-2480cd2-font-weight );}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:20px;border-top-right-radius:20px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:20px;border-bottom-left-radius:20px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-nav-menu--dropdown, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu__container.elementor-nav-menu--dropdown{box-shadow:-10px 31px 17px 18px rgba(0, 0, 0, 0.87);}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a{padding-left:10px;padding-right:10px;padding-top:3px;padding-bottom:3px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:15px !important;}.elementor-9577 .elementor-element.elementor-element-235e4b6d div.elementor-menu-toggle{color:#000000;}.elementor-9577 .elementor-element.elementor-element-235e4b6d div.elementor-menu-toggle svg{fill:#000000;}.elementor-9577 .elementor-element.elementor-element-38711fa6{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9577 .elementor-element.elementor-element-38711fa6.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-9577 .elementor-element.elementor-element-6b6f589 .elementor-icon-wrapper{text-align:center;}.elementor-9577 .elementor-element.elementor-element-6b6f589.elementor-view-stacked .elementor-icon{background-color:#000000;}.elementor-9577 .elementor-element.elementor-element-6b6f589.elementor-view-framed .elementor-icon, .elementor-9577 .elementor-element.elementor-element-6b6f589.elementor-view-default .elementor-icon{color:#000000;border-color:#000000;}.elementor-9577 .elementor-element.elementor-element-6b6f589.elementor-view-framed .elementor-icon, .elementor-9577 .elementor-element.elementor-element-6b6f589.elementor-view-default .elementor-icon svg{fill:#000000;}.elementor-9577 .elementor-element.elementor-element-6b6f589 .elementor-icon{font-size:20px;}.elementor-9577 .elementor-element.elementor-element-6b6f589 .elementor-icon svg{height:20px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-9577 .elementor-element.elementor-element-1b7ed45b{--padding-top:0vw;--padding-bottom:0vw;--padding-left:7.5vw;--padding-right:7.5vw;}.elementor-9577 .elementor-element.elementor-element-4901a9e3{--gap:0px 30px;--row-gap:0px;--column-gap:30px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown .elementor-item, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-2480cd2-font-size );}}@media(min-width:768px){.elementor-9577 .elementor-element.elementor-element-1b7ed45b{--content-width:1240px;}.elementor-9577 .elementor-element.elementor-element-4901a9e3{--width:100%;}.elementor-9577 .elementor-element.elementor-element-b1c33a{--width:auto;}.elementor-9577 .elementor-element.elementor-element-6de9c9c3{--width:auto;}.elementor-9577 .elementor-element.elementor-element-38711fa6{--width:auto;}}@media(max-width:1024px) and (min-width:768px){.elementor-9577 .elementor-element.elementor-element-1b7ed45b{--content-width:100%;}.elementor-9577 .elementor-element.elementor-element-b1c33a{--width:220px;}.elementor-9577 .elementor-element.elementor-element-6de9c9c3{--width:60px;}}@media(max-width:767px){.elementor-9577 .elementor-element.elementor-element-1b7ed45b{--content-width:100%;--min-height:0px;--justify-content:space-around;--gap:0% 0%;--row-gap:0%;--column-gap:0%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-9577 .elementor-element.elementor-element-1b7ed45b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-9577 .elementor-element.elementor-element-4901a9e3{--width:100%;--min-height:60px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--border-radius:15px 15px 15px 15px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9577 .elementor-element.elementor-element-b1c33a{--width:61%;--min-height:7vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 12px;--row-gap:0px;--column-gap:12px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9577 .elementor-element.elementor-element-b1c33a.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-9577 .elementor-element.elementor-element-678795d2{width:var( --container-widget-width, 32px );max-width:32px;--container-widget-width:32px;--container-widget-flex-grow:0;text-align:center;}.elementor-9577 .elementor-element.elementor-element-678795d2 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9577 .elementor-element.elementor-element-678795d2.elementor-element{--align-self:center;}.elementor-9577 .elementor-element.elementor-element-678795d2 img{width:100%;max-width:100%;height:0%;}.elementor-9577 .elementor-element.elementor-element-74795599{width:var( --container-widget-width, 136px );max-width:136px;--container-widget-width:136px;--container-widget-flex-grow:0;text-align:center;}.elementor-9577 .elementor-element.elementor-element-74795599 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9577 .elementor-element.elementor-element-74795599 .elementor-heading-title{font-size:0.9rem;line-height:1.6rem;letter-spacing:0px;word-spacing:0em;}.elementor-9577 .elementor-element.elementor-element-6de9c9c3{--width:19%;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9577 .elementor-element.elementor-element-6de9c9c3.e-con{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}.elementor-9577 .elementor-element.elementor-element-235e4b6d{width:100%;max-width:100%;--nav-menu-icon-size:33px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d.elementor-element{--align-self:center;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu .elementor-item{font-size:1rem;line-height:1.6rem;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item{padding-left:22px;padding-right:22px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown .elementor-item, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown .elementor-sub-item{font-size:var( --e-global-typography-2480cd2-font-size );}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown{border-radius:0px 0px 0px 0px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown a{padding-left:4px;padding-right:4px;padding-top:30px;padding-bottom:30px;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:10px !important;}.elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-menu-toggle{border-width:0px;border-radius:5px;}.elementor-9577 .elementor-element.elementor-element-38711fa6{--width:9%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9577{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}/* Start custom CSS for theme-site-logo, class: .elementor-element-678795d2 */.elementor-9577 .elementor-element.elementor-element-678795d2 img { filter: drop-shadow(-5px 5px 5px #00000050); }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-74795599 *//* --- 1. SCHATTEN LOGO-SCHRIFTZUG --- */ .elementor-9577 .elementor-element.elementor-element-74795599 .elementor-heading-title { filter: drop-shadow(-5px 5px 5px #00000050); } /* --- 2. LOGO-SCHRIFTZUG: GESPERRT WIE EIN EIGENES LOGO (28.10.2026) --- */ /* Buchstabenabstand 0.08em (vorher -0.4px aus der Typografie), damit der Schriftzug als eigenständiges Logo wirkt. Zeilenhöhe 1: hält den Schriftzug mittig zum Logo-Zeichen (vorher 0.7, dadurch saß die Schrift optisch zu hoch). nowrap: verhindert den Umbruch durch die größere Breite. Schriftstärke bleibt unverändert. */ .elementor-9577 .elementor-element.elementor-element-74795599 .elementor-heading-title { letter-spacing: 0.08em; line-height: 1; white-space: nowrap; } /* --- 3. LOGO-SCHRIFTZUG AUF MOBIL (28.10.2026) --- */ /* Auf dem kleinen Screen wieder eng gesetzt wie vorher, die Sperrung 0.08em gilt nur für Desktop und Tablet. */ @media (max-width: 767px) { .elementor-9577 .elementor-element.elementor-element-74795599 .elementor-heading-title { letter-spacing: 0; } }/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-235e4b6d *//* --- 0. DESKTOP TARNKAPPE --- */ @media (min-width: 1025px) { .mobile-only { display: none !important; } } /* --- 1. ANIMATION --- */ @keyframes menuFadeIn { 0% { opacity: 0; transform: translateX(-50%); } 100% { opacity: 1; transform: translateX(-50%); } } /* --- 2. LAYOUT & DESIGN --- */ /* Glas-Optik passend zur Header-Pille (27.10.2026): Fläche Ice 62 % mit Glanz oben, Weichzeichner 24px, helle Lichtkante, Schatten Tint 45 %. Breite 85vw = gleiche Breite wie die Pille auf Mobil (Header auf Mobil 85 % breit, Pille darin 100 %). Vorher: width calc(100vw - 40px), background-color #ffffff, border none, box-shadow -10px 10px 20px 0px rgba(0, 0, 0, 0.5) */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown { position: fixed !important; top: 100px !important; width: 85vw !important; left: 50% !important; transform: translateX(-50%) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.10) 22%, rgba(255, 255, 255, 0) 40%), rgba(236, 250, 250, 0.62) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; backdrop-filter: blur(24px) saturate(180%) !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.55) !important; box-shadow: -5px 10px 35px 0 rgba(15, 28, 49, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 22px rgba(255, 255, 255, 0.40), inset 0 -10px 20px -10px rgba(15, 28, 49, 0.18) !important; /* --- STELLSCHRAUBE 1: Container Innenabstand (DIE MITTE) --- */ /* 35px oben/unten (statt 20 oder 50) */ padding: 35px 20px !important; z-index: 9999 !important; animation: menuFadeIn 0.3s ease-out !important; } /* --- 2b. BREITE DROPDOWN AUF MOBIL (28.10.2026) --- */ /* Auf Mobil hat der Header 20px Abstand links und rechts, die Pille ist also 100vw minus 40px breit. Das Dropdown bekommt exakt diese Breite und schließt bündig ab. Tablet bleibt bei 85vw (Header-Abstand dort 7.5vw je Seite). */ @media (max-width: 767px) { .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown { width: calc(100vw - 40px) !important; } } /* --- 3. GHOST-BUSTER --- */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown[aria-hidden="true"] { display: none !important; opacity: 0 !important; pointer-events: none !important; padding: 0 !important; height: 0 !important; animation: none !important; } /* --- 4. SPRACH-LOGIK (Panzer-Strategie) --- */ html[lang*="de"] .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li.tp-item-german { display: none !important; } html[lang*="en"] .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li.tp-item-english { display: none !important; } /* --- 5. OPTIK DER LINKS --- */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown:before, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown:after { display: none !important; } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a { text-align: center !important; display: block !important; width: 100% !important; /* --- STELLSCHRAUBE 2: Abstand zwischen den Wörtern (DIE MITTE) --- */ /* 18px oben/unten (statt 10 oder 25) */ padding-top: 18px !important; padding-bottom: 18px !important; } /* Flaggen im Dropdown rund (29.10.2026): 18px Kreis, mittig beschnitten, vertikal mittig zum Text. Vorher: 18px breit, Höhe automatisch, rechteckig. */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li img.trp-flag-image { display: inline-block !important; vertical-align: middle !important; margin-right: 8px !important; width: 18px !important; height: 18px !important; object-fit: cover !important; object-position: center !important; border-radius: 50% !important; } /* --- 6. HOVER DER LINKS: TINT-PILLE (28.10.2026) --- */ /* Ersetzt die weißen Rechtecke beim Antippen oder Überfahren. Optik wie die dunklen Buttons (Additional CSS, Abschnitt 8): Fläche Tint #0F1C31 mit weichem Glanz in der oberen Hälfte, Lichtkante oben und Schatten innen unten, Schatten außen Tint (-5px 10px 35px), Schrift Weiß mit Textschatten Ice 21 % (-5px 5px 10px). Form: Pille mit voll gerundeten Ecken. */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a { border-radius: 999px !important; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a:hover, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a:focus, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a.highlighted { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%), #0f1c31 !important; color: #ffffff !important; fill: #ffffff !important; outline: none !important; box-shadow: -5px 10px 35px 0 #0f1c31, inset 0 8px 12px -6px rgba(255, 255, 255, 0.35), inset 0 -8px 12px -6px rgba(0, 0, 0, 0.45) !important; text-shadow: -5px 5px 10px rgba(236, 250, 250, 0.21) !important; } /* --- 7. SCHATTEN MENÜPUNKTE & HAMBURGER-ICON (28.10.2026) --- */ /* Gleicher Schatten wie Logo und Icons: drop-shadow -5px 5px 5px, Schwarz 31 %. Überall dieselbe Technik (filter), damit der Schatten überall gleich stark wirkt. Gilt für Pille (Desktop), Hamburger-Icon und Dropdown-Links inkl. Flaggen (Mobil). Beim Hover im Dropdown wird der Filter abgeschaltet, dort gelten Tint-Pille und Ice-Textschatten aus Abschnitt 6. */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-menu-toggle i, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-menu-toggle svg, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a { filter: drop-shadow(-5px 5px 5px #00000050); } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a:hover, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a:focus, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--dropdown li a.highlighted { filter: none !important; } /* --- 8. MENÜPUNKTE DESKTOP: GLAS-KACHELN (28.10.2026) --- */ /* Jeder Menüpunkt in der Header-Pille bekommt eine eigene Glas-Kachel. Form passend zur Header-Pille: Eckenradius 10px (Header 15px), Kachelhöhe 46px (29.10.2026, vorher 40px, mitgewachsen mit der Header-Pille von 60 auf 70px), 8px Abstand zwischen den Kacheln. Die Kachel ist fest 46px hoch und senkrecht mittig, unabhängig von der Höhe des Menüpunkts. Die Kachel liegt als ::before hinter dem Link (am li), damit der Schatten aus Abschnitt 7 weiter nur auf der Schrift wirkt. Normal: Ice 30 % mit Spiegelung in der oberen Hälfte, zarte Lichtkante (Weiß 45 %), Weichzeichner 6px, Innenschatten unten, angedeuteter heller Glow nach unten links (Ice 70 %). Hover und aktive Seite (29.10.2026, angeglichen an die Buttons): Die Kachel bleibt Ice 30 %, keine hellere Fläche mehr. Stattdessen leuchtet Ice auf (Lichtregel: Licht von oben rechts, siehe Additional CSS 0.3): Innenleuchten entlang der rechten Seite, Ice-Schein außen nach unten links, Glacier-Schein rundum (Glacier 75 %), untere linke Ecke dunkler (Tint 28 %), leichter Schlagschatten nach unten links, Lichtkante Weiß 70 %. Weicher Übergang 0,4 Sekunden. Vorher: Fläche Ice 75 % mit stärkerer Spiegelung (Weiß bis 95 %), weißes Leuchten rundum (0 0 14px 2px Weiß 85 %). Glanzwelle: siehe Abschnitt 9. Das Underline beim Hover ist abgeschaltet. Gilt nur für das Desktop-Menü (mobiles Dropdown unverändert). */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li { position: relative; isolation: isolate; margin: 0 4px; } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 46px; margin-top: -23px; z-index: -1; border-radius: 10px; background-image: linear-gradient(65deg, rgba(166, 227, 229, 0) calc(50% - 63.4px), rgba(166, 227, 229, 0.12) calc(50% - 46.7px), rgba(166, 227, 229, 0.30) calc(50% - 32.6px), rgba(255, 255, 255, 0.70) calc(50% - 18.1px), rgba(255, 255, 255, 0.70) calc(50% + 18.1px), rgba(166, 227, 229, 0.30) calc(50% + 32.6px), rgba(166, 227, 229, 0.12) calc(50% + 46.7px), rgba(166, 227, 229, 0) calc(50% + 63.4px)), linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.12) 100%); background-color: rgba(236, 250, 250, 0.30); background-size: 400% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 2px 8px rgba(15, 28, 49, 0.08), -4px 8px 18px rgba(236, 250, 250, 0.70), 0 0 0 0 rgba(166, 227, 229, 0), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -6px 10px -6px rgba(15, 28, 49, 0.16), inset -16px 4px 20px -8px rgba(236, 250, 250, 0), inset 10px -8px 14px -8px rgba(15, 28, 49, 0); animation: ocean-glanz-header 10s ease-in-out 0s infinite; -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%); transition: box-shadow 0.4s ease, border-color 0.4s ease; } /* Hover und aktive Seite: Lichtschein und Schlagschatten unten links */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li:hover::before, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item::before, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor::before { border-color: rgba(255, 255, 255, 0.70); box-shadow: -4px 6px 14px rgba(15, 28, 49, 0.20), -10px 12px 30px 4px rgba(236, 250, 250, 0.95), 0 0 24px 6px rgba(166, 227, 229, 0.75), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -6px 10px -6px rgba(15, 28, 49, 0.14), inset -16px 4px 20px -8px rgba(236, 250, 250, 0.95), inset 10px -8px 14px -8px rgba(15, 28, 49, 0.28); } /* Underline beim Hover und bei der aktiven Seite abschalten */ .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item::after, .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main .elementor-item::before { display: none !important; } /* --- 9. GLANZWELLE ÜBER DEN HEADER (29.10.2026) --- */ /* Gleicher Glanzstreif wie bei den Tint-Buttons in den Loop-Karten (Additional CSS, Abschnitt 8.4): breit, weich, leicht schräg (oben nach links geneigt), Kern Weiß, Ränder Glacier, Durchlauf ca. 1,2 Sekunden von links nach rechts (Tempo wie auf Mobil, angepasst 29.10.2026, vorher 3,6 Sekunden). Der Streif ist eine eigene Hintergrund-Ebene der Kachel (Abschnitt 8) und liegt unter der Schrift. Welle über alle Header-Buttons: Jede Kachel startet 0,5 Sekunden nach der vorherigen, danach folgen WhatsApp-Kreis (2,5 Sekunden) und Flaggen-Kreis (3 Sekunden, jeweils im eigenen Widget-CSS). Takt 10 Sekunden: Die Welle braucht ca. 4,2 Sekunden über den ganzen Header, danach ca. 5,8 Sekunden Pause. Ruhiger als bei den Loop-Karten, weil der Header immer sichtbar ist. Anpassen: Pause über die 10s (in Abschnitt 8 und in beiden Kreis-Widgets gleich ändern) und die 10,5 % in den Keyframes (10s x 10,5 % = ca. 1,05 Sekunden Durchlauf). Angepasst 29.10.2026: etwas breiter und minimal schneller. Kern Weiß 70 % jetzt fest 40px breit (vorher ca. 30px), Unschärfe je Seite 50px, Durchlauf 1,05 statt 1,2 Sekunden. Die Breite ist in px festgelegt, deshalb ist der Streif auf jeder Kachel gleich breit, egal wie lang das Wort ist (vorher je nach Kachel unterschiedlich). Einheitlicher Glanz (29.10.2026): Überall gleicher Verlauf und gleiche Intensität (Kern Weiß 70 %, Ränder Glacier 30 % und 12 %, Unschärfe je Seite 50px). Nur die Breite des weißen Kerns passt sich an die Objektgröße an. Ausnahme kleine runde Objekte (WhatsApp-Kugel, Header-Kreise): Unschärfe 26px, sonst würde der Streif die ganze Fläche aufhellen statt darüber zu wandern. Die Keyframes müssen in WhatsApp-Kreis und Flaggen-Kreis identisch sein (gleicher Name, das letzte Widget im Header gewinnt). Bei "Bewegung reduzieren" am Gerät ausgeschaltet. */ @keyframes ocean-glanz-header { 0% { background-position: 100% 0, 0 0; } 10.5% { background-position: 0% 0, 0 0; } 100% { background-position: 0% 0, 0 0; } } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(2)::before { animation-delay: 0.5s; } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(3)::before { animation-delay: 1s; } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(4)::before { animation-delay: 1.5s; } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(5)::before { animation-delay: 2s; } .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(6)::before { animation-delay: 2.5s; } @media (prefers-reduced-motion: reduce) { .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-nav-menu--main > .elementor-nav-menu > li::before { animation: none; } } /* --- 10. MOBIL: BURGER-MENÜ AN DEN RECHTEN RAND (29.10.2026) --- */ /* Nur Mobil (bis 767px). Das Burger-Icon saß ca. 24px vom rechten Rand der Pille entfernt, das Logo nur 9px vom linken Rand. Ursache: Der Toggle-Button war im Widget mittig ausgerichtet und hat 8px Innenabstand um das Icon. Jetzt: Toggle rechtsbündig, um den Innenabstand (8px) nach rechts versetzt. Das Icon steht dadurch wie das Logo ca. 9px vom Rand. Die Tippfläche bleibt gleich groß. */ @media (max-width: 767px) { .elementor-9577 .elementor-element.elementor-element-235e4b6d .elementor-menu-toggle { margin-left: auto !important; margin-right: -8px !important; } }/* End custom CSS */ /* Start custom CSS for icon, class: .elementor-element-6b6f589 *//* --- 1. WHATSAPP-KREIS IM HEADER (29.10.2026) --- */ /* Runder Glas-Kreis 46 x 46px (29.10.2026, vorher 40px), gleiche Höhe wie die Menü-Kacheln (Menü-Widget, Abschnitt 8), gleicher Look wie der Flaggen-Kreis: Ice 30 % mit Spiegelung, Lichtkante Weiß 45 %, heller Glow nach unten links (Ice 70 %). Icon WhatsApp in Schwarz, 25px (vorher 22px) mit Kontur, Schatten wie Logo und Flagge. Rahmenfarbe mit !important, sonst setzt Elementor ihn auf die Icon-Farbe (Schwarz). Hover (29.10.2026, angeglichen an die Buttons): Kreis bleibt Ice 30 %, Ice leuchtet auf (Innenleuchten rechts, Schein unten links, Glacier-Schein, Ecke unten links dunkler), wie die Menü-Kacheln. Lichtregel: Licht von oben rechts (Additional CSS 0.3). Vorher: Fläche Ice 75 % mit weißem Leuchten rundum. Glanzwelle: gleicher Streif wie die Menü-Kacheln (Menü-Widget, Abschnitt 9), Takt 10 Sekunden, Start nach den Kacheln (Verzögerung 2,5 Sekunden). Link: https://wa.me/4915120409843 (im Widget unter "Content" > "Link"). Nur Desktop, der Language-Container ist auf Tablet und Mobil ausgeblendet. */ .elementor-9577 .elementor-element.elementor-element-6b6f589 .elementor-icon { width: 46px; height: 46px; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; font-size: 20px !important; line-height: 0; color: #000000 !important; fill: #000000 !important; border-radius: 50%; background-image: linear-gradient(65deg, rgba(166, 227, 229, 0) calc(50% - 27.2px), rgba(166, 227, 229, 0.12) calc(50% - 18.5px), rgba(166, 227, 229, 0.30) calc(50% - 11.2px), rgba(255, 255, 255, 0.70) calc(50% - 3.6px), rgba(255, 255, 255, 0.70) calc(50% + 3.6px), rgba(166, 227, 229, 0.30) calc(50% + 11.2px), rgba(166, 227, 229, 0.12) calc(50% + 18.5px), rgba(166, 227, 229, 0) calc(50% + 27.2px)), linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.12) 100%); background-color: rgba(236, 250, 250, 0.30); background-size: 400% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat; border: 1px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 2px 8px rgba(15, 28, 49, 0.08), -4px 8px 18px rgba(236, 250, 250, 0.70), 0 0 0 0 rgba(166, 227, 229, 0), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -6px 10px -6px rgba(15, 28, 49, 0.16), inset -16px 4px 20px -8px rgba(236, 250, 250, 0), inset 10px -8px 14px -8px rgba(15, 28, 49, 0); animation: ocean-glanz-header 10s ease-in-out 2.5s infinite; -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%); transition: box-shadow 0.4s ease, border-color 0.4s ease; } .elementor-9577 .elementor-element.elementor-element-6b6f589 .elementor-icon:hover { border-color: rgba(255, 255, 255, 0.70) !important; box-shadow: -4px 6px 14px rgba(15, 28, 49, 0.20), -10px 12px 30px 4px rgba(236, 250, 250, 0.95), 0 0 24px 6px rgba(166, 227, 229, 0.75), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -6px 10px -6px rgba(15, 28, 49, 0.14), inset -16px 4px 20px -8px rgba(236, 250, 250, 0.95), inset 10px -8px 14px -8px rgba(15, 28, 49, 0.28); } /* Icon selbst: Schwarz, 25px (29.10.2026, vorher 22px), Schatten wie Logo und Flagge. Kräftigere Linien über eine schwarze Kontur von 0.8px (Font-Icon: text-stroke, SVG-Icon: stroke). Vorher: 20px ohne Kontur, wirkte zu dünn. */ .elementor-9577 .elementor-element.elementor-element-6b6f589 .elementor-icon i, .elementor-9577 .elementor-element.elementor-element-6b6f589 .elementor-icon svg { width: 25px; height: 25px; font-size: 25px; color: #000000 !important; fill: #000000 !important; -webkit-text-stroke: 0.8px #000000; stroke: #000000; stroke-width: 12px; filter: drop-shadow(-5px 5px 5px #00000050); } /* --- 2. GLANZWELLE (29.10.2026) --- */ /* Keyframes wie im Menü-Widget (Abschnitt 9), hier zur Sicherheit ebenfalls hinterlegt. Bei "Bewegung reduzieren" ausgeschaltet. Angepasst 29.10.2026: Durchlauf 1,05 statt 1,2 Sekunden (10,5 %), identisch in allen drei Header-Widgets. Einheitlicher Glanz: gleicher Verlauf und gleiche Intensität wie überall (Kern Weiß 70 %, Ränder Glacier). Kleiner Kreis als Ausnahme: Kern 8px, Unschärfe 26px je Seite wie bei der WhatsApp-Kugel, sonst würde der Streif den ganzen Kreis aufhellen. */ @keyframes ocean-glanz-header { 0% { background-position: 100% 0, 0 0; } 10.5% { background-position: 0% 0, 0 0; } 100% { background-position: 0% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .elementor-9577 .elementor-element.elementor-element-6b6f589 .elementor-icon { animation: none; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-4767fd71 *//* --- 1. SCHATTEN FLAGGE (29.10.2026) --- */ /* Sprachflagge: gleicher Schatten wie das Logo (-5px 5px 5px, Schwarz 31 %). Als box-shadow statt drop-shadow, damit der Schatten der runden Flagge folgt (drop-shadow nahm die eckige Bildform). */ .elementor-9577 .elementor-element.elementor-element-4767fd71 img { filter: none !important; border-radius: 50%; box-shadow: -5px 5px 5px #00000050 !important; } /* --- 1b. SCHATTEN NICHT ABSCHNEIDEN (29.10.2026) --- */ /* TranslatePress setzt am Switcher overflow: hidden. Dadurch wurde der helle Glow des Glas-Kreises an der eckigen Box des Switchers abgeschnitten (eckige Kante unten links). */ .elementor-9577 .elementor-element.elementor-element-4767fd71 .trp-language-switcher { overflow: visible !important; } /* --- 2. GLAS-KREIS UM DEN SPRACH-TOGGLE (29.10.2026) --- */ /* Runder Glas-Kreis 46 x 46px (29.10.2026, vorher 40px), gleiche Höhe wie die Menü-Kacheln (Menü-Widget, Abschnitt 8), gleicher Look wie der WhatsApp-Kreis daneben: Ice 30 % mit Spiegelung, Lichtkante Weiß 45 %, heller Glow nach unten links (Ice 70 %). Der Kreis liegt auf dem Link der aktuellen Sprache (TranslatePress Shortcode), nicht auf dem Widget. Hover (29.10.2026, angeglichen an die Buttons): Kreis bleibt Ice 30 %, Ice leuchtet auf (Innenleuchten rechts, Schein unten links, Glacier-Schein, Ecke unten links dunkler), wie die Menü-Kacheln. Lichtregel: Licht von oben rechts (Additional CSS 0.3). Vorher: Fläche Ice 75 % mit weißem Leuchten rundum. Glanzwelle: gleicher Streif wie die Menü-Kacheln (Menü-Widget, Abschnitt 9), Takt 10 Sekunden, Start nach den Kacheln (Verzögerung 3 Sekunden). Vorher (28.10.2026): Pille 40px hoch, Eckenradius 10px, Innenabstand 0 14px. */ .elementor-9577 .elementor-element.elementor-element-4767fd71 .trp-current-language-item__wrapper a.trp-language-item { width: 46px; height: 46px; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; line-height: 0; border-radius: 50%; background-image: linear-gradient(65deg, rgba(166, 227, 229, 0) calc(50% - 27.2px), rgba(166, 227, 229, 0.12) calc(50% - 18.5px), rgba(166, 227, 229, 0.30) calc(50% - 11.2px), rgba(255, 255, 255, 0.70) calc(50% - 3.6px), rgba(255, 255, 255, 0.70) calc(50% + 3.6px), rgba(166, 227, 229, 0.30) calc(50% + 11.2px), rgba(166, 227, 229, 0.12) calc(50% + 18.5px), rgba(166, 227, 229, 0) calc(50% + 27.2px)), linear-gradient(180deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.12) 100%) !important; background-color: rgba(236, 250, 250, 0.30) !important; background-size: 400% 100%, 100% 100% !important; background-position: 100% 0, 0 0; background-repeat: no-repeat !important; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 2px 8px rgba(15, 28, 49, 0.08), -4px 8px 18px rgba(236, 250, 250, 0.70), 0 0 0 0 rgba(166, 227, 229, 0), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -6px 10px -6px rgba(15, 28, 49, 0.16), inset -16px 4px 20px -8px rgba(236, 250, 250, 0), inset 10px -8px 14px -8px rgba(15, 28, 49, 0); animation: ocean-glanz-header 10s ease-in-out 3s infinite; -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%); transition: box-shadow 0.4s ease, border-color 0.4s ease; } .elementor-9577 .elementor-element.elementor-element-4767fd71 .trp-current-language-item__wrapper a.trp-language-item:hover { border-color: rgba(255, 255, 255, 0.70); box-shadow: -4px 6px 14px rgba(15, 28, 49, 0.20), -10px 12px 30px 4px rgba(236, 250, 250, 0.95), 0 0 24px 6px rgba(166, 227, 229, 0.75), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -6px 10px -6px rgba(15, 28, 49, 0.14), inset -16px 4px 20px -8px rgba(236, 250, 250, 0.95), inset 10px -8px 14px -8px rgba(15, 28, 49, 0.28); } /* --- 3. FLAGGE RUND (29.10.2026) --- */ /* Rechteckige Flagge (25 x 19px) als 25px Kreis (29.10.2026, vorher 22px), mittig beschnitten, passend zum größeren Glas-Kreis. Gilt für die aktuelle Sprache und das Hover-Dropdown. Schatten aus Abschnitt 1 bleibt. */ .elementor-9577 .elementor-element.elementor-element-4767fd71 .trp-language-item img { width: 25px !important; height: 25px !important; object-fit: cover; object-position: center; border-radius: 50% !important; } /* --- 4. GLANZWELLE (29.10.2026) --- */ /* Keyframes wie im Menü-Widget (Abschnitt 9), hier zur Sicherheit ebenfalls hinterlegt. Hintergrund-Position bewusst ohne !important, sonst könnte die Animation sie nicht bewegen. Bei "Bewegung reduzieren" ausgeschaltet. Angepasst 29.10.2026: Durchlauf 1,05 statt 1,2 Sekunden (10,5 %), identisch in allen drei Header-Widgets. Einheitlicher Glanz: gleicher Verlauf und gleiche Intensität wie überall (Kern Weiß 70 %, Ränder Glacier). Kleiner Kreis als Ausnahme: Kern 8px, Unschärfe 26px je Seite wie bei der WhatsApp-Kugel, sonst würde der Streif den ganzen Kreis aufhellen. */ @keyframes ocean-glanz-header { 0% { background-position: 100% 0, 0 0; } 10.5% { background-position: 0% 0, 0 0; } 100% { background-position: 0% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .elementor-9577 .elementor-element.elementor-element-4767fd71 .trp-current-language-item__wrapper a.trp-language-item { animation: none; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4901a9e3 *//* ===================================================================== HEADER: GLAS-PILLE Ort: Theme Builder > Header > Container "Pill (white)" > "Advanced" > "Custom CSS" ".elementor-9577 .elementor-element.elementor-element-4901a9e3" steht hier für die Pille selbst, keine Klasse nötig. Aufbau: Die Glasfläche liegt als eigene Ebene (::before) hinter Logo und Menü. Dadurch bleibt das mobile Dropdown-Menü (fest positioniert) korrekt am Bildschirm ausgerichtet. Werte: Fläche Ice #ECFAFA, 45 % Deckkraft, Weichzeichner 18px, Farbverstärkung 180 %, Glanzspiegel in der oberen Hälfte mit harter Kante bei 50 %, helle Lichtkante oben, Schimmer an allen Rändern, Innenschatten unten in Tint, Schatten außen Tint 45 % (-5px 10px 35px). Lesbarkeit: Wird die Schrift im Menü auf dunklen Sektionen zu schwach, die Deckkraft der Fläche in Teil 2 (0.45) auf 0.6 erhöhen. Überstimmt per !important Hintergrund und Schatten aus Elementor. Eckenradius kommt weiter aus Elementor. ===================================================================== */ /* 1. Pille: eigener Stapelbereich, eigener Hintergrund aus */ .elementor-9577 .elementor-element.elementor-element-4901a9e3 { position: relative; isolation: isolate; background-color: transparent !important; background-image: none !important; box-shadow: -5px 10px 35px 0 rgba(15, 28, 49, 0.45) !important; } /* 2. Glasfläche hinter Logo und Menü */ .elementor-9577 .elementor-element.elementor-element-4901a9e3::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; border-radius: inherit !important; box-sizing: border-box !important; pointer-events: none !important; opacity: 1 !important; border: 1px solid rgba(255, 255, 255, 0.55) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.08) 100%), rgba(236, 250, 250, 0.45) !important; -webkit-backdrop-filter: blur(18px) saturate(180%) !important; backdrop-filter: blur(18px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 22px rgba(255, 255, 255, 0.40), inset 0 -10px 20px -10px rgba(15, 28, 49, 0.18) !important; } /* 3. Rückfall für Browser ohne Weichzeichner: fast deckendes Ice */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .elementor-9577 .elementor-element.elementor-element-4901a9e3::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.08) 100%), rgba(236, 250, 250, 0.92) !important; } } /* 4. MOBIL: GLANZWELLE ÜBER DIE GANZE PILLE (29.10.2026) */ /* Nur Mobil (bis 767px). Auf Mobil ist kein Menü sichtbar, deshalb läuft der Glanz einmal über die ganze Pille statt über einzelne Kacheln. Gleicher Streif wie auf Desktop (Menü-Widget, Abschnitt 9) und wie bei den Loop-Buttons: breit, weich, oben nach links geneigt, Kern Weiß 70 %, Ränder Glacier, Durchlauf ca. 3,2 Sekunden von links nach rechts, Takt 5,5 Sekunden, danach ca. 2,3 Sekunden Pause (Frequenz erhöht 29.10.2026, vorher Takt 7 Sekunden, davor 10). 5,5s x 58 % = ca. 3,2 Sekunden Durchlauf. Angepasst 29.10.2026: schmaler und minimal schneller. Kern jetzt fest 70px (vorher ca. 115px), Unschärfe je Seite 50px (vorher ca. 180px), gesamt ca. 170px statt ca. 475px. Durchlauf 3,2 statt 3,6 Sekunden. Einheitlicher Glanz (29.10.2026): Überall gleicher Verlauf und gleiche Intensität (Kern Weiß 70 %, Ränder Glacier 30 % und 12 %, Unschärfe je Seite 50px). Nur die Breite des weißen Kerns passt sich an die Objektgröße an. Ausnahme kleine runde Objekte (WhatsApp-Kugel, Header-Kreise): Unschärfe 26px, sonst würde der Streif die ganze Fläche aufhellen statt darüber zu wandern. Eigene Ebene (::after) über der Glasfläche (::before), unter Logo und Burger-Menü. Klicks gehen hindurch (pointer-events: none). Bei "Bewegung reduzieren" am Gerät ausgeschaltet. */ @keyframes ocean-glanz-pille { 0% { background-position: 100% 0; } 58% { background-position: 0% 0; } 100% { background-position: 0% 0; } } @media (max-width: 767px) { .elementor-9577 .elementor-element.elementor-element-4901a9e3::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient(65deg, rgba(166, 227, 229, 0) calc(50% - 77px), rgba(166, 227, 229, 0.12) calc(50% - 60.2px), rgba(166, 227, 229, 0.30) calc(50% - 46.2px), rgba(255, 255, 255, 0.70) calc(50% - 31.7px), rgba(255, 255, 255, 0.70) calc(50% + 31.7px), rgba(166, 227, 229, 0.30) calc(50% + 46.2px), rgba(166, 227, 229, 0.12) calc(50% + 60.2px), rgba(166, 227, 229, 0) calc(50% + 77px)); background-size: 400% 100%; background-position: 100% 0; background-repeat: no-repeat; animation: ocean-glanz-pille 5.5s ease-in-out infinite; } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .elementor-9577 .elementor-element.elementor-element-4901a9e3::after { animation: none; display: none; } } /* 5. DESKTOP: HÖHE 70px (29.10.2026) */ /* Nur Desktop (ab 1025px): Pille 70px statt 60px hoch, damit der Header als Rahmen über den Buttons steht (Buttons 56px). Die Menü-Kacheln wachsen mit auf 46px (Menü-Widget, Abschnitt 8), WhatsApp- und Flaggen-Kreis ebenfalls auf 46px. Tablet und Mobil bleiben 60px (Buttons dort 56px bzw. 52px). Überstimmt die "Min Height" 60px aus Elementor nur auf Desktop. */ @media (min-width: 1025px) { .elementor-9577 .elementor-element.elementor-element-4901a9e3 { min-height: 70px !important; } }/* End custom CSS */