/* === ra-b.css: globaler Suffix (Header, Footer, ra-custom) === */ /* --- /wp-content/uploads/elementor/css/post-51.css --- */ .elementor-51 .elementor-element.elementor-element-363aa66e{--display:flex;--min-height:74px;--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:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-344d62a0{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-344d62a0.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-51 .elementor-element.elementor-element-367d5521{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-51 .elementor-element.elementor-element-367d5521 img{width:100%;border-radius:0px 0px 0px 0px;}.elementor-51 .elementor-element.elementor-element-24f32489{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-eb030d0{--display:flex;}.elementor-51 .elementor-element.elementor-element-01cc72e{--display:flex;}.elementor-51 .elementor-element.elementor-element-efc832c{--display:flex;}.elementor-51 .elementor-element.elementor-element-ebfc967{--display:flex;}.elementor-51 .elementor-element.elementor-element-36d97d4{--display:flex;}.elementor-51 .elementor-element.elementor-element-52a880a{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:0px;--n-menu-title-transition:700ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-51 .elementor-element.elementor-element-52a880a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current ){border-style:solid;border-width:0px 0px 4px 0px;border-color:var( --e-global-color-primary );}.elementor-51 .elementor-element.elementor-element-52a880a {--n-menu-title-color-active:var( --e-global-color-secondary );}.elementor-51 .elementor-element.elementor-element-52a880a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current{border-style:solid;border-width:0px 0px 4px 0px;border-color:var( --e-global-color-primary );}.elementor-51 .elementor-element.elementor-element-52a880a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title{border-radius:0px 0px 4px 0px;}.elementor-51 .elementor-element.elementor-element-69e6be22{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-fe76bba .elementor-button{background-color:var( --e-global-color-primary );font-family:"RA", Sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;line-height:1em;letter-spacing:0em;border-radius:5px 5px 5px 5px;}.elementor-51 .elementor-element.elementor-element-fe76bba .elementor-button:hover, .elementor-51 .elementor-element.elementor-element-fe76bba .elementor-button:focus{background-color:var( --e-global-color-primary );}.elementor-51 .elementor-element.elementor-element-fe76bba{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-51 .elementor-element.elementor-element-fe76bba.elementor-element{--align-self:center;}.elementor-51 .elementor-element.elementor-element-fe76bba .elementor-button-content-wrapper{flex-direction:row;}.elementor-51 .elementor-element.elementor-element-fe76bba .elementor-button .elementor-button-content-wrapper{gap:14px;}.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-51 .elementor-element.elementor-element-363aa66e{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-51 .elementor-element.elementor-element-344d62a0{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-367d5521 img{width:55%;}.elementor-51 .elementor-element.elementor-element-24f32489{--justify-content:center;}.elementor-51 .elementor-element.elementor-element-69e6be22{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-fe76bba .elementor-button{font-size:17px;}}@media(max-width:767px){.elementor-51 .elementor-element.elementor-element-363aa66e{--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:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:20px;--padding-right:20px;}.elementor-51 .elementor-element.elementor-element-344d62a0{--width:50%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-367d5521 img{width:50%;}.elementor-51 .elementor-element.elementor-element-24f32489{--width:50%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-69e6be22{--width:100%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-51 .elementor-element.elementor-element-fe76bba .elementor-button{font-size:16px;}}@media(min-width:768px){.elementor-51 .elementor-element.elementor-element-344d62a0{--width:12.671%;}.elementor-51 .elementor-element.elementor-element-24f32489{--width:69.333%;}.elementor-51 .elementor-element.elementor-element-69e6be22{--width:15%;}}@media(max-width:1024px) and (min-width:768px){.elementor-51 .elementor-element.elementor-element-344d62a0{--width:20%;}.elementor-51 .elementor-element.elementor-element-24f32489{--width:55%;}.elementor-51 .elementor-element.elementor-element-69e6be22{--width:25%;}} /* --- /wp-content/uploads/elementor/css/post-55.css --- */ .elementor-55 .elementor-element.elementor-element-4b14f4d1{--display:flex;--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:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:120px;--padding-bottom:300px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-4b14f4d1:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-4b14f4d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}.elementor-55 .elementor-element.elementor-element-ad5d7af{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-3a159801{--display:flex;--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:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-6c51b38{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:80px;}.elementor-55 .elementor-element.elementor-element-3341e997{text-align:start;}.elementor-55 .elementor-element.elementor-element-3341e997 img{width:100%;border-radius:0px 0px 0px 0px;}.elementor-55 .elementor-element.elementor-element-a8d0edf .elementor-heading-title{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-repeater-item-dd13b7a.elementor-social-icon{background-color:#FFFFFF00;}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-repeater-item-dd13b7a.elementor-social-icon i{color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-repeater-item-dd13b7a.elementor-social-icon svg{fill:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-repeater-item-fdae43c.elementor-social-icon{background-color:#02010100;}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-repeater-item-52671ef.elementor-social-icon{background-color:#02010100;}.elementor-55 .elementor-element.elementor-element-3b0b758c{--grid-template-columns:repeat(0, auto);text-align:left;--icon-size:29px;--grid-column-gap:20px;--grid-row-gap:0px;}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-social-icon i{color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-social-icon svg{fill:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-social-icon{--icon-padding:0em;}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-social-icon:hover i{color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-3b0b758c .elementor-social-icon:hover svg{fill:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-d5b03fe{--spacer-size:50px;}.elementor-55 .elementor-element.elementor-element-320b1dc{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:100px;}.elementor-55 .elementor-element.elementor-element-41cd6143 .elementor-heading-title{font-family:var( --e-global-typography-49ea2e1-font-family ), Sans-serif;font-size:var( --e-global-typography-49ea2e1-font-size );font-weight:var( --e-global-typography-49ea2e1-font-weight );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-74ecfb3f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:24px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:flex-start;--icon-vertical-offset:3px;}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-icon i{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );transition:fill 0.3s;}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-icon{padding-inline-end:10px;}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-item > .elementor-icon-list-text, .elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-item > a{font-size:24px;}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-text{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-74ecfb3f .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-4846903b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:80px;}.elementor-55 .elementor-element.elementor-element-69311d69 .elementor-heading-title{font-family:var( --e-global-typography-49ea2e1-font-family ), Sans-serif;font-size:var( --e-global-typography-49ea2e1-font-size );font-weight:var( --e-global-typography-49ea2e1-font-weight );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(4px/2);}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(4px/2);}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(4px/2);}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-4px/2);}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-4px/2);}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-55 .elementor-element.elementor-element-239c7589{--icon-vertical-offset:0px;}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-item > a{font-family:"RA", Sans-serif;font-size:24px;font-weight:400;line-height:1.65em;letter-spacing:0.01em;}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-text{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-239c7589 .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-6f694b4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:80px;}.elementor-55 .elementor-element.elementor-element-1aa860e .elementor-heading-title{font-family:var( --e-global-typography-49ea2e1-font-family ), Sans-serif;font-size:var( --e-global-typography-49ea2e1-font-size );font-weight:var( --e-global-typography-49ea2e1-font-weight );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-26b5cbb{background-color:var( --e-global-color-primary );padding:5px 20px 5px 20px;border-radius:5px 5px 5px 5px;}.elementor-55 .elementor-element.elementor-element-26b5cbb .elementor-heading-title{font-family:var( --e-global-typography-49ea2e1-font-family ), Sans-serif;font-size:var( --e-global-typography-49ea2e1-font-size );font-weight:var( --e-global-typography-49ea2e1-font-weight );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );color:var( --e-global-color-secondary );}.elementor-55 .elementor-element.elementor-element-f906a36{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:24px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:flex-start;--icon-vertical-offset:6px;}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-icon i{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );transition:fill 0.3s;}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-icon{padding-inline-end:10px;}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-item > a{font-size:24px;}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-text{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-f906a36 .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-1e3bdb1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:24px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:flex-start;--icon-vertical-offset:6px;}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-icon i{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );transition:fill 0.3s;}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-icon{padding-inline-end:10px;}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-item > a{font-size:24px;}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-text{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-1e3bdb1 .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-20c6ff2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:24px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:flex-start;--icon-vertical-offset:6px;}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-icon i{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );transition:fill 0.3s;}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-icon{padding-inline-end:10px;}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-item > a{font-size:24px;}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-text{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-20c6ff2 .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-primary );}.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-55 .elementor-element.elementor-element-4b14f4d1{--padding-top:60px;--padding-bottom:120px;--padding-left:20px;--padding-right:20px;}.elementor-55 .elementor-element.elementor-element-6c51b38{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:30px;}.elementor-55 .elementor-element.elementor-element-3341e997 img{width:40%;}.elementor-55 .elementor-element.elementor-element-a8d0edf .elementor-heading-title{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-55 .elementor-element.elementor-element-320b1dc{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:30px;}.elementor-55 .elementor-element.elementor-element-41cd6143 .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-4846903b{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:30px;}.elementor-55 .elementor-element.elementor-element-69311d69 .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-6f694b4{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:30px;}.elementor-55 .elementor-element.elementor-element-1aa860e .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-26b5cbb .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}}@media(max-width:767px){.elementor-55 .elementor-element.elementor-element-4b14f4d1{--padding-top:40px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-55 .elementor-element.elementor-element-6c51b38{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-3341e997 img{width:30%;}.elementor-55 .elementor-element.elementor-element-a8d0edf .elementor-heading-title{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-55 .elementor-element.elementor-element-320b1dc{--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-55 .elementor-element.elementor-element-41cd6143 .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-4846903b{--width:50%;--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:20px;}.elementor-55 .elementor-element.elementor-element-69311d69 .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-239c7589{width:100%;max-width:100%;}.elementor-55 .elementor-element.elementor-element-6f694b4{--width:50%;--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:20px;}.elementor-55 .elementor-element.elementor-element-1aa860e .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-26b5cbb .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}}@media(min-width:768px){.elementor-55 .elementor-element.elementor-element-6c51b38{--width:25%;}.elementor-55 .elementor-element.elementor-element-320b1dc{--width:25%;}.elementor-55 .elementor-element.elementor-element-4846903b{--width:25%;}.elementor-55 .elementor-element.elementor-element-6f694b4{--width:25%;}}@media(min-width:1760px){.elementor-55 .elementor-element.elementor-element-a8d0edf .elementor-heading-title{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-55 .elementor-element.elementor-element-41cd6143 .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-69311d69 .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-1aa860e .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}.elementor-55 .elementor-element.elementor-element-26b5cbb .elementor-heading-title{font-size:var( --e-global-typography-49ea2e1-font-size );line-height:var( --e-global-typography-49ea2e1-line-height );letter-spacing:var( --e-global-typography-49ea2e1-letter-spacing );}} /* --- /assets/css/ra-custom.css --- */ /* ============================================================ Racket Arena — Custom Mobile/Tablet-Menü (≤1024px) - Burger weiter rechts + größer, Basisfarbe unverändert - Klick: animiertes X in Grün (#A5E244) - Fullscreen-Menü: slidet von unten mit Overshoot hoch - Menüeinträge zentriert, H1-Font ('RA' = Degular, lokal) - „Jetzt Buchen" als Menüpunkt (Header-Button ≤1024px aus) ============================================================ */ /* ============================================================ Content-Breite Desktop: wieder 1280px = Parität zum Original. Der 1152px-Override (26.07.2026, -10%) ist am 26.07.2026 wieder entfernt worden: das Kit liefert 1280px von sich aus, es braucht also keine Regel. Der optische Eindruck, die neue Seite laufe breiter als racketarena.de, kam ausschliesslich vom Browser-Zoom (125% -> 1152 CSS-px erscheinen als 1440 Bildschirmpunkte, das Original bei 100% als 1280). ============================================================ */ @media (min-width: 1025px) { /* Folge des schmaleren Headers: die Buchungs-Spalte steht im Kit auf --width:15% (@media min-width:768px). Bei 1280px waren das 192px und reichten, bei 1152px nur noch 173px -> Button-Text brach um. Prozentbreite raus, Spalte nimmt jetzt Inhaltsbreite und schrumpft nicht mehr; die Menue-Spalte gibt den Platz ab (hat Reserve). */ /* Spezifitaet muss die Kit-Regel schlagen: .elementor-51 .elementor-element.elementor-element-69e6be22 = 0,3,0 */ .elementor-51 .elementor-element.elementor-element-69e6be22 { --width: auto; flex-shrink: 0; } .elementor-element-69e6be22 .elementor-button, .elementor-element-69e6be22 .elementor-button-content-wrapper, .elementor-element-69e6be22 .elementor-button-text { white-space: nowrap; } } /* ============================================================ Aktiver Menuepunkt: kein gruener Unterstrich mehr. Kit setzt auf .e-n-menu-title.e-current border-bottom:4px. Selektor muss dessen Spezifitaet treffen, ra-custom.css laedt im ra-b-Bundle nach dem Header-Template 51 -> gewinnt. Hover-Unterstrich bleibt absichtlich erhalten. ============================================================ */ .elementor-51 .elementor-element.elementor-element-52a880a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.e-current { border-bottom-width: 0; } /* ============================================================ Hero Startseite: feste Hoehe 560px (Desktop >1024px). Ohne Override ist die Hoehe rein inhaltsgetrieben: Padding 80+80 + Kinder 288+162 + Gap 20 = 630px. Padding auf 40+40 zurueck, damit der Text bei fester Hoehe nicht anstoesst; Inhalt bleibt vertikal zentriert. Spezifitaet muss die Kit-Regel .elementor-14 .elementor-element .elementor-element-5461b502 (0,3,0) schlagen. ============================================================ */ @media (min-width: 1025px) { .elementor-14 .elementor-element.elementor-element-5461b502 { height: 560px; min-height: 560px; overflow: hidden; } .elementor-14 .elementor-element.elementor-element-5461b502 > .e-con-inner { height: 100%; justify-content: center; padding-top: 40px; padding-bottom: 40px; } } /* ============================================================ Menue-Fuss (Telefon/Oeffnungszeiten/Social) gehoert ausschliesslich ins mobile Overlay. Das Markup steckt in header.php und wird auf JEDER Breite ausgeliefert — ohne diese Basisregel rendert es auf Desktop ungestylt, und die SVGs ohne width/height blaehen sich auf die volle Containerbreite auf. Sichtbar wird er erst im ≤1024px-Block. ============================================================ */ .ra-menu-foot { display: none; } @media (max-width: 1024px) { /* ---------- 1. Header-Layout: Burger an den rechten Rand ---------- */ /* .e-n-menu ist eine Flex-COLUMN → justify-content wirkt vertikal. Der Toggle trägt align-self: center (Elementor-Variable) und muss deshalb per align-self: flex-end nach rechts (Cross-Axis). */ .elementor-element-52a880a, .elementor-element-52a880a .e-n-menu { width: 100% !important; } /* Die Menue-SPALTE darf nicht 100% der Zeile belegen: das Kit gibt der Logo-Spalte ≤767px --width:50%, zusammen >100% -> Flex-Wrap, und der Burger landete unter dem Logo (Header 113px statt 74px). Spalte fuellt jetzt nur den Rest der Zeile. Spezifitaet muss die Kit-Regel schlagen, und flex-grow laeuft bei Elementor ueber --flex-grow, sonst schrumpft die Spalte auf Inhaltsbreite und der Burger steht mittig statt rechts. */ .elementor-51 .elementor-element.elementor-element-24f32489 { width: auto !important; --flex-grow: 1; flex-grow: 1; flex-shrink: 1; flex-basis: auto; } .elementor-element-52a880a .e-n-menu-toggle, .e-n-menu-toggle { align-self: flex-end !important; margin-right: 0 !important; /* Elementor-JS startet lokal gelegentlich eine hängende Init-Animation, die den Toggle unsichtbar hält — der Burger muss im geschlossenen Zustand immer sichtbar sein */ visibility: visible !important; } /* Header-Button „Hier Buchen" auch auf Tablet ausblenden (auf Mobile bereits via elementor-hidden-mobile versteckt) */ .elementor-element-69e6be22 { display: none !important; } /* Header bleibt über dem Overlay, damit Logo + X erreichbar bleiben */ .elementor-location-header { position: relative; z-index: 10000; background: #ffffff; } .elementor-element-344d62a0 { /* Logo-Container */ position: relative; z-index: 10001; } /* ---------- 2. Burger: größer, eigene animierte Bars ---------- */ .e-n-menu-toggle { position: relative; z-index: 10002 !important; /* über dem Overlay (9999) */ width: 48px; height: 48px; padding: 0; background: transparent; border: 0; cursor: pointer; } /* Original-SVG-Icons ausblenden, eigene Bars zeichnen */ .e-n-menu-toggle .e-n-menu-toggle-icon svg { display: none; } .e-n-menu-toggle .e-n-menu-toggle-icon.e-close { display: none; } /* Mittlerer Bar = span.e-open, oberer/unterer = ::before/::after */ .e-n-menu-toggle::before, .e-n-menu-toggle::after, .e-n-menu-toggle .e-n-menu-toggle-icon.e-open { content: ""; position: absolute; left: 50%; width: 28px; height: 4px; border-radius: 3px; background: currentColor; /* Basisfarbe wie bisher */ transform: translateX(-50%); transition: transform 0.35s cubic-bezier(0.68, -0.4, 0.27, 1.4), opacity 0.2s ease, background-color 0.3s ease; } /* Mitte bei 48px Hoehe und 4px Bar = (48-4)/2 = 22, Abstand 9 */ .e-n-menu-toggle::before { top: 13px; } .e-n-menu-toggle .e-n-menu-toggle-icon.e-open { top: 22px; } .e-n-menu-toggle::after { top: 31px; } /* ---------- 3. Offen: X in Grün, animiert ---------- */ .e-n-menu-toggle[aria-expanded="true"]::before { top: 22px; transform: translateX(-50%) rotate(45deg); background: #A5E244; } .e-n-menu-toggle[aria-expanded="true"]::after { top: 22px; transform: translateX(-50%) rotate(-45deg); background: #A5E244; } .e-n-menu-toggle[aria-expanded="true"] .e-n-menu-toggle-icon.e-open { opacity: 0; transform: translateX(-50%) scaleX(0.2); } /* ---------- 4. Fullscreen-Overlay: Bottom-Slide + Overshoot ---------- */ .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; z-index: 9999 !important; /* Weicher Uebergang statt harter Kante: der Header liegt mit weissem Grund darueber (z-index 10000 vs 9999), das Overlay lief bisher direkt darunter in Brand-Blau — dazwischen ein sichtbarer Schnitt. Jetzt bleibt das Overlay bis zur Header-Unterkante (74px) weiss und geht bis 230px ins Blau ueber, das Logo scheint also weich in die Flaeche zu laufen. Ab 230px durchgehend Brand-Blau, die Menuepunkte stehen weit darunter (Liste ist vertikal zentriert). */ background: linear-gradient(180deg, #ffffff 0, #ffffff 74px, #4d9cbd 152px, #006C9B 230px, #006C9B 100%) !important; display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; overflow-y: auto; visibility: hidden; transform: translateY(104%); transition: transform 0.6s cubic-bezier(0.22, 1.45, 0.36, 1), /* Overshoot */ visibility 0s linear 0.6s; } .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper { visibility: visible; transform: translateY(0); transition: transform 0.6s cubic-bezier(0.22, 1.45, 0.36, 1), visibility 0s; } /* ---------- 4b. Tennisball ueber den Menuepunkten ---------- Bewusst CSS statt Lottie: das Overlay ist eigener Code, ein Elementor-Widget muesste dort erst initialisiert werden, und die Lottie-Library wuerde auf ALLEN Seiten mitladen — auch auf denen ohne Lottie. Der Ball haengt als ::before an der Menueliste, damit am Elementor-Markup nichts geaendert werden muss. Ablauf: faellt von oben herein, federt zweimal auf, dreht sich dabei. */ .e-n-menu-wrapper .e-n-menu-heading::before { content: ""; display: block; width: 60px; height: 60px; margin: 0 auto 8px; border-radius: 50%; background: /* Naehte: zwei gegenlaeufige Boegen, wie beim Filzball */ radial-gradient(circle 34px at -16px 50%, transparent 0 30px, rgba(255,255,255,.92) 30px 33px, transparent 33px), radial-gradient(circle 34px at 76px 50%, transparent 0 30px, rgba(255,255,255,.92) 30px 33px, transparent 33px), radial-gradient(circle at 32% 28%, #d6f58a 0%, #A5E244 42%, #7cb52c 100%); box-shadow: inset -6px -8px 14px rgba(0,0,0,.22), 0 10px 18px rgba(0,0,0,.28); opacity: 0; transform: translateY(-140px) scale(.7); } /* Erst wenn das Menue offen ist, faellt der Ball herein */ .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-heading::before { animation: ra-ball-drop 1.15s cubic-bezier(0.28, 0.84, 0.42, 1) 0.12s forwards, ra-ball-spin 3.4s linear 1.3s infinite; } @keyframes ra-ball-drop { 0% { opacity: 0; transform: translateY(-140px) scale(.7) rotate(-40deg); } 8% { opacity: 1; } 38% { transform: translateY(0) scale(1.06, .94) rotate(0deg); } /* Aufprall, leicht gestaucht */ 54% { transform: translateY(-26px) scale(.97, 1.03) rotate(12deg); } /* erster Absprung */ 72% { transform: translateY(0) scale(1.04, .96) rotate(20deg); } 86% { transform: translateY(-9px) scale(1) rotate(25deg); } /* zweiter, kleiner */ 100% { opacity: 1; transform: translateY(0) scale(1) rotate(30deg); } } /* Danach dreht er sich ruhig weiter — Rotation setzt bei 30deg an, damit der Uebergang aus dem Drop nahtlos ist */ @keyframes ra-ball-spin { from { transform: translateY(0) rotate(30deg); } to { transform: translateY(0) rotate(390deg); } } @media (prefers-reduced-motion: reduce) { .e-n-menu-wrapper .e-n-menu-heading::before { opacity: 1; transform: none; } .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-heading::before { animation: none; } } /* ---------- 4c. Court-Linien im Overlay-Hintergrund ---------- Sehr dezentes Spielfeld von oben: Aussenlinie, Mittellinie, Aufschlaglinie. Reines CSS ueber Gradients, liegt hinter dem Inhalt (::after mit z-index 0, Liste steht darueber). */ .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper::after { content: ""; position: absolute; inset: 96px 26px 26px; pointer-events: none; z-index: 0; opacity: .12; border: 2px solid rgba(255, 255, 255, .85); border-radius: 2px; /* Nur die beiden Aufschlaglinien plus ein kurzes Mittelstueck. Eine durchgehende Mittellinie schnitt quer durch Ball und Menuetext und machte die Flaeche unruhig. */ background: linear-gradient(180deg, transparent calc(26% - 1px), rgba(255,255,255,.85) calc(26% - 1px) calc(26% + 1px), transparent calc(26% + 1px)), linear-gradient(180deg, transparent calc(74% - 1px), rgba(255,255,255,.85) calc(74% - 1px) calc(74% + 1px), transparent calc(74% + 1px)), linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.85) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); background-repeat: no-repeat; background-size: 100% 100%, 100% 100%, 100% 48%; background-position: 0 0, 0 0, 0 26%; } /* Inhalt ueber die Linien heben */ .e-n-menu-wrapper .e-n-menu-heading, .ra-menu-foot { position: relative; z-index: 1; } /* ---------- 4d. Fuss: Telefon, Oeffnungszeiten, Social ---------- Werte kommen aus config.php (header.php), nicht mehr hardcodiert. */ .ra-menu-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 24px 36px; opacity: 0; transform: translateY(20px); transition: opacity .4s ease .72s, transform .5s cubic-bezier(0.22, 1.3, 0.36, 1) .72s; } .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .ra-menu-foot { opacity: 1; transform: none; } .ra-menu-foot__tel { display: inline-flex; align-items: center; gap: 9px; font-family: 'RA', sans-serif; font-size: 22px; font-weight: 700; color: #ffffff; text-decoration: none; } .ra-menu-foot__tel svg { width: 20px; height: 20px; } .ra-menu-foot__tel:hover, .ra-menu-foot__tel:focus-visible { color: #A5E244; } .ra-menu-foot__hours { font-size: 15px; color: rgba(255, 255, 255, .72); } .ra-menu-foot__social { display: inline-flex; gap: 18px; margin-top: 4px; } .ra-menu-foot__social a { display: inline-flex; color: rgba(255, 255, 255, .8); transition: color .25s ease, transform .25s ease; } .ra-menu-foot__social svg { width: 26px; height: 26px; } .ra-menu-foot__social a:hover, .ra-menu-foot__social a:focus-visible { color: #A5E244; transform: translateY(-2px); } /* ---------- 4e. Aktiver Menuepunkt: kleiner Ball als Marker ---------- */ /* Der Text bleibt exakt mittig: der Marker wird absolut davor gesetzt, statt als inline-block die Zeile zu verbreitern. */ .e-n-menu-wrapper .e-n-menu-title.e-current .e-n-menu-title-text { position: relative; } .e-n-menu-wrapper .e-n-menu-title.e-current .e-n-menu-title-text::before { content: ""; position: absolute; left: -26px; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle 8px at -4px 50%, transparent 0 7px, rgba(255,255,255,.9) 7px 8px, transparent 8px), radial-gradient(circle at 32% 28%, #d6f58a 0%, #A5E244 45%, #7cb52c 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, .3); } /* ---------- 5. Menüeinträge: zentriert, H1-Font, Stagger-Animation ---------- */ .e-n-menu-wrapper .e-n-menu-heading { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: clamp(18px, 4vh, 34px); width: 100% !important; margin: 0 !important; padding: 64px 24px 48px !important; /* 96 -> 64: der Ball bringt eigene Hoehe mit */ list-style: none; text-align: center; } .e-n-menu-wrapper .e-n-menu-item, .e-n-menu-wrapper .e-n-menu-item:not(:last-child) { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; margin: 0 !important; opacity: 0; transform: translateY(36px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1.3, 0.36, 1); } .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-item { opacity: 1; transform: translateY(0); } /* gestaffelter Einstieg */ .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-item:nth-child(1) { transition-delay: 0.18s; } .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-item:nth-child(2) { transition-delay: 0.26s; } .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-item:nth-child(3) { transition-delay: 0.34s; } .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-item:nth-child(4) { transition-delay: 0.42s; } .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-item:nth-child(5) { transition-delay: 0.50s; } .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper .e-n-menu-item:nth-child(6) { transition-delay: 0.60s; } /* Elementor-Dropdown-Item-Styles neutralisieren */ .e-n-menu-wrapper .e-n-menu-title, .e-n-menu-wrapper .e-n-menu-title-container, .e-n-menu-wrapper .e-n-menu-title-container.e-link, .e-n-menu-wrapper .e-n-menu-title a { background: transparent !important; border: 0 !important; box-shadow: none !important; display: block !important; width: 100% !important; text-align: center !important; padding: 0 !important; margin: 0 !important; } .e-n-menu-wrapper .e-n-menu-title-text, .e-n-menu-wrapper .e-n-menu-title:not(.e-current) .e-n-menu-title-container .e-n-menu-title-text, .e-n-menu-wrapper .e-n-menu-title.e-current .e-n-menu-title-text { display: inline !important; /* sonst flex → keine Zentrierung */ font-family: 'RA', sans-serif !important; /* H1-Font (Degular, lokal) */ font-weight: 900; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.15; letter-spacing: 0.01em; color: #ffffff !important; text-transform: uppercase; transition: color 0.25s ease; } .e-n-menu-wrapper .e-n-menu-title:hover .e-n-menu-title-text, .e-n-menu-wrapper .e-n-menu-title.e-current .e-n-menu-title-text, .e-n-menu-wrapper .e-n-menu-title.e-current a .e-n-menu-title-text { color: #A5E244 !important; /* Brand-Grün */ } /* ---------- 6. „Jetzt Buchen" als CTA im Menü ---------- */ .e-n-menu-wrapper .ra-menu-booking { margin-top: clamp(8px, 2vh, 20px); } .e-n-menu-wrapper .ra-menu-booking .e-n-menu-title, .e-n-menu-wrapper .ra-menu-booking .ra-booking-link { display: inline-block !important; width: auto !important; } .e-n-menu-wrapper .ra-menu-booking .ra-booking-link { background: #A5E244 !important; border-radius: 999px !important; padding: 16px 42px !important; transition: transform 0.25s ease, background 0.25s ease !important; } .e-n-menu-wrapper .ra-menu-booking .ra-booking-link:hover { transform: scale(1.05); background: #b8f25e !important; } .e-n-menu-wrapper .ra-menu-booking .e-n-menu-title-text, .e-n-menu-wrapper .ra-menu-booking .e-n-menu-title:not(.e-current) .e-n-menu-title-container .e-n-menu-title-text { color: #006C9B !important; font-size: clamp(1.4rem, 4.5vw, 2rem); } } /* Buchungs-Menüpunkt auf Desktop ausblenden (dort bleibt der Header-Button) */ @media (min-width: 1025px) { .e-n-menu-wrapper .ra-menu-booking { display: none; } } /* Scroll-Lock, solange das Menü offen ist (Klasse via JS gesetzt) */ body.ra-menu-open { overflow: hidden; } /* ============================================================ ra-chat — simulierter WhatsApp-Chat (Startseite, Abschnitt "Whatsapp Gruppen"). Ersetzt das frühere Handy-Mockup whatsapphandy_dunkelgruen.svg: Sprechblasen liegen direkt auf dem Seitenhintergrund, ohne Geräte-Rahmen. Farben sind exakt die des Mockup-SVG, damit der Abschnitt aussieht wie vorher — nur ohne Handy: ausgehend #a5e244 (Brand-Grün) auf Text #506823 eingehend #e5e7eb auf Text #474b54 Meta #676d77 / Tipp-Punkte #aaafba Flach, ohne Schatten — wie im Mockup. Fail-safe: ohne JS (und bei prefers-reduced-motion) steht der komplette Chat sofort sichtbar da. Erst ra-chat.js setzt .is-staged und blendet die Blasen der Reihe nach ein. ============================================================ */ .ra-chat { --ra-chat-out: #a5e244; --ra-chat-out-text: #506823; --ra-chat-in: #e5e7eb; --ra-chat-in-text: #474b54; --ra-chat-meta: #676d77; --ra-chat-dot: #aaafba; width: 100%; max-width: 400px; /* Der Chat ist kürzer als das frühere Handy-Bild: in der Flex-Spalte vertikal mittig setzen, damit er auf Höhe des Textblocks sitzt. */ margin: auto; align-self: center; } .ra-chat__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .ra-chat__row { display: flex; flex-direction: column; max-width: 100%; } .ra-chat__row--out { align-items: flex-end; } .ra-chat__row--in { align-items: flex-start; } /* ---------- Sprechblase ---------- */ .ra-chat__bubble { position: relative; max-width: 88%; padding: 9px 12px 8px; border-radius: 14px; background: var(--ra-chat-in); color: var(--ra-chat-in-text); text-align: left; } .ra-chat__row--out .ra-chat__bubble { background: var(--ra-chat-out); color: var(--ra-chat-out-text); border-bottom-right-radius: 4px; } .ra-chat__row--in .ra-chat__bubble { border-bottom-left-radius: 4px; } .ra-chat__text { margin: 0; font-family: inherit; font-size: 15px; line-height: 1.4; color: inherit; /* Platz für Uhrzeit + Haken in der letzten Zeile freihalten */ padding-right: 52px; } .ra-chat__row--in .ra-chat__text { padding-right: 40px; } .ra-chat__emoji { font-size: 17px; line-height: 1; } .ra-chat__meta { position: absolute; right: 11px; bottom: 7px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1; color: var(--ra-chat-meta); white-space: nowrap; } .ra-chat__row--out .ra-chat__meta { color: var(--ra-chat-out-text); opacity: 0.7; } .ra-chat__ticks { width: 15px; height: 10px; color: currentColor; } /* ---------- "schreibt gerade" ---------- */ .ra-chat__typing { display: none; align-items: center; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--ra-chat-in); } .ra-chat__row--out .ra-chat__typing { background: var(--ra-chat-out); } .ra-chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ra-chat-dot); animation: ra-chat-dot 1.2s infinite ease-in-out; } .ra-chat__row--out .ra-chat__typing span { background: var(--ra-chat-out-text); opacity: 0.55; } .ra-chat__typing span:nth-child(2) { animation-delay: 0.18s; } .ra-chat__typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes ra-chat-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* ---------- Ablauf-Zustände (nur wenn ra-chat.js läuft) ---------- */ .ra-chat.is-staged .ra-chat__row .ra-chat__bubble { display: none; } .ra-chat.is-staged .ra-chat__row.is-typing .ra-chat__typing { display: flex; } .ra-chat.is-staged .ra-chat__row.is-shown .ra-chat__typing { display: none; } .ra-chat.is-staged .ra-chat__row.is-shown .ra-chat__bubble { display: block; animation: ra-chat-pop 0.28s cubic-bezier(0.22, 1.35, 0.36, 1) both; } @keyframes ra-chat-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { /* Kein Nacheinander, kein Wackeln: alles sofort sichtbar */ .ra-chat.is-staged .ra-chat__row .ra-chat__bubble { display: block; animation: none; } .ra-chat.is-staged .ra-chat__row .ra-chat__typing { display: none; } .ra-chat__typing span { animation: none; } } @media (max-width: 767px) { .ra-chat { max-width: none; } .ra-chat__text { font-size: 14.5px; } } /* ============================================================ ra-partner — Partner-Logos als Endlos-Durchlauf (Startseite). Betrifft alle 8 Logos in den 3 Reihen af1da2f, 1e192cf, fd03165. Bewegungsprofil je Logo, ueber eigene Timing-Funktion pro Keyframe-Segment (CSS erlaubt animation-timing-function innerhalb eines Keyframes; sie gilt fuer das Segment, das dort BEGINNT): 0 → 14 % schnell von rechts herein, stark abbremsend 14 → 22 % Overshoot: schiesst ueber die Mitte hinaus und schwingt zurueck 22 → 68 % Mitte: linear und langsam (hier ist das Logo lesbar) 68 → 100 % schnell nach links heraus, beschleunigend Motion Blur: blur() ist richtungslos, deshalb zusaetzlich scaleX-Streckung in den schnellen Phasen - das liest sich als horizontaler Schmier. Echte gerichtete Unschaerfe braeuchte einen SVG-Filter (feGaussianBlur stdDeviation="12 0"); der laesst sich aber nicht weich interpolieren, es gaebe harte Schnitte. Versatz: 1s je Logo (8s / 8), negativ gesetzt. Dadurch sind ab dem ersten Frame alle Phasen besetzt - die Sektion steht nie still, und die Logos kommen trotzdem nacheinander. Fail-safe: ohne Animationsunterstuetzung und bei prefers-reduced-motion stehen die Logos einfach ruhig da. ============================================================ */ .elementor-element-af1da2f, .elementor-element-1e192cf, .elementor-element-fd03165 { --ra-partner-cycle: 8s; } /* Geclippt wird die REIHE, nicht die Spalte: HUFERMANN ist 395 px breit in einer 413 px-Spalte - eine Spaltenkante wuerde es beim ersten Pixel Bewegung anschneiden. Auf Reihen-Ebene laeuft ein Logo stattdessen an seinem Nachbarn vorbei und wird erst am Sektionsrand beschnitten, wo es ohnehin schon ausgeblendet ist. */ .elementor-element-af1da2f, .elementor-element-1e192cf, .elementor-element-fd03165 { overflow: hidden; } .elementor-element-ff97b3c .elementor-widget-image, .elementor-element-d9be9a3 .elementor-widget-image, .elementor-element-2ce9168 .elementor-widget-image, .elementor-element-0c8713e .elementor-widget-image, .elementor-element-3c8016e .elementor-widget-image, .elementor-element-64663d2 .elementor-widget-image, .elementor-element-d798be5 .elementor-widget-image, .elementor-element-23ba7f6 .elementor-widget-image { animation: ra-partner-pass var(--ra-partner-cycle, 8s) infinite both; /* Kein will-change: die laufende Animation promoviert die Ebene ohnehin selbst. Ein dauerhaftes will-change laesst die Compositing-Ebene auch im Ruhezustand bestehen und veraendert dort messbar die Rasterung der Logos (22.595 abweichende Pixel im Screenshot-Gate, unsichtbar fuer das Auge, aber unnoetig). */ } .elementor-element-ff97b3c .elementor-widget-image { animation-delay: 0s; } /* zeit-und-wert */ .elementor-element-d9be9a3 .elementor-widget-image { animation-delay: -1s; } /* axa-decker */ .elementor-element-2ce9168 .elementor-widget-image { animation-delay: -2s; } /* vitex */ .elementor-element-0c8713e .elementor-widget-image { animation-delay: -3s; } /* indutec */ .elementor-element-3c8016e .elementor-widget-image { animation-delay: -4s; } /* hufermann */ .elementor-element-64663d2 .elementor-widget-image { animation-delay: -5s; } /* genrich */ .elementor-element-d798be5 .elementor-widget-image { animation-delay: -6s; } /* the-court-company */ .elementor-element-23ba7f6 .elementor-widget-image { animation-delay: -7s; } /* duppke-touristik */ @keyframes ra-partner-pass { /* Wichtig: bevor ein Logo die Spaltenkante erreicht, muss es ausgeblendet und unscharf sein - sonst wird es dort sichtbar hart abgeschnitten und das sieht nach Fehler aus, nicht nach Bewegung. Deshalb faellt die Opacity deutlich vor dem Rand. */ 0% { transform: translateX(85%) scaleX(1.18); filter: blur(10px); opacity: 0; /* schnell rein, stark abbremsend */ animation-timing-function: cubic-bezier(0.12, 0.86, 0.28, 1); } 10% { transform: translateX(-8%) scaleX(1.04); filter: blur(1.5px); opacity: 1; /* Overshoot zurueckschwingen */ animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1); } 18% { transform: translateX(0) scaleX(1); filter: blur(0); opacity: 1; /* Mitte: gleichmaessig langsam, hier ist das Logo lesbar */ animation-timing-function: linear; } 70% { transform: translateX(-5%) scaleX(1); filter: blur(0); opacity: 1; /* schnell raus, beschleunigend */ animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.25); } 84% { transform: translateX(-30%) scaleX(1.1); filter: blur(6px); opacity: 0.22; } 100% { transform: translateX(-85%) scaleX(1.2); filter: blur(12px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .elementor-element-ff97b3c .elementor-widget-image, .elementor-element-d9be9a3 .elementor-widget-image, .elementor-element-2ce9168 .elementor-widget-image, .elementor-element-0c8713e .elementor-widget-image, .elementor-element-3c8016e .elementor-widget-image, .elementor-element-64663d2 .elementor-widget-image, .elementor-element-d798be5 .elementor-widget-image, .elementor-element-23ba7f6 .elementor-widget-image { animation: none; } } /* ============================================================ ra-nav-chip — Desktop-Navigation: Chip statt Unterkante Vorher (post-51.css, Header-Template 51): bei :hover und beim aktiven Punkt eine 4px-Unterkante in #A5E244. Die wurde nur im Hover-Zustand gesetzt und hat den Punkt dadurch um 4px hoeher gemacht - ein kleiner Layout-Sprung bei jedem Ueberfahren. Jetzt: eine gruene Pille hinter dem Text. Sie liegt als ::before-Pseudoelement absolut im Punkt, kostet also keinen Platz und kann nichts verschieben. Einblenden mit leichtem Overshoot, passend zur uebrigen Bewegungssprache der Seite. Nur Desktop (>=1025px). Darunter ist das Menue das blaue Fullscreen-Overlay mit eigener Gestaltung - und Hover gibt es auf Touch ohnehin nicht. ============================================================ */ @media (min-width: 1025px) { /* Alte Unterkante nur beim HOVER abschalten. Der aktive Punkt behaelt seine gruene Unterkante - das ist die Seitenmarkierung, nicht der Hover-Effekt. Die Original-Regel lautet :hover:not(.e-current), deshalb hier dieselbe Einschraenkung. */ .elementor-51 .elementor-element.elementor-element-52a880a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover:not(.e-current) { border-width: 0 !important; } .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title { /* position: relative kommt schon aus dem Elementor-CSS */ border-radius: 999px; } /* Elementors Hover-Zoom abschalten. Die Menuepunkte tragen die Klasse .elementor-animation-grow, und die setzt bei :hover/:focus/:active transform: scale(1.1). Das war der zweite Teil des alten Effekts (neben der Unterkante) und hat den Punkt von 40 auf 44 px wachsen lassen - ausserdem wuerde es den Chip mitskalieren, der seine eigene Overshoot-Bewegung hat. */ .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.elementor-animation-grow:hover, .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.elementor-animation-grow:focus, .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title.elementor-animation-grow:active { transform: none; } /* Der Chip selbst */ .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title::before { content: ""; position: absolute; inset: 2px 0; z-index: 0; border-radius: 999px; background: #A5E244; opacity: 0; transform: scale(0.82); transition: opacity 0.16s ease, transform 0.3s cubic-bezier(0.34, 1.5, 0.64, 1); pointer-events: none; } /* Text ueber den Chip legen */ .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title .e-n-menu-title-text { position: relative; z-index: 1; } /* Auslösen: Maus und Tastatur (focus-visible, damit Tab-Navigation denselben Hinweis bekommt) */ .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover::before, .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:focus-visible::before, .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:has(:focus-visible)::before { opacity: 1; transform: scale(1); } /* Auf dem gruenen Chip muss der Text dunkel sein. Der aktive Punkt ist sonst blau (#006C9B) - blau auf gruen liest sich schlecht. */ .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover .e-n-menu-title-text, .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:focus-visible .e-n-menu-title-text, .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:has(:focus-visible) .e-n-menu-title-text { color: #1F2124 !important; transition: color 0.16s ease; } @media (prefers-reduced-motion: reduce) { .elementor-element-52a880a .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title::before { transition: none; transform: none; } } } /* ============================================================ ra-reveal — Intro-Absatz auf der Startseite ("6 Sportarten unter einem Dach", Text-Editor-Widget 115d8a6). Ablauf, gestartet von assets/js/ra-reveal.js beim Eintritt in den Viewport: 1. Eine Linie zeichnet den Panel-Rahmen von rechts unten nach links oben. Zwei Haelften laufen gleichzeitig los - eine ueber die Unterkante nach links, eine ueber die rechte Kante nach oben - und treffen sich oben links. 2. Das Panel fuellt sich mit dem leichten Grau. 3. Der Text wird von oben nach unten freigelegt. Die Schriftgroesse bleibt unangetastet: der Text steckt weiterhin in seinem

im Text-Editor-Widget (24px/31px). Fail-safe: ohne die Klasse .is-armed (also ohne JS) sind Panel und Text sofort vollstaendig sichtbar. Erst das Skript setzt .is-armed und blendet zurueck - und ein Watchdog deckt alles wieder auf, falls die Sequenz haengt. ============================================================ */ .ra-reveal { --ra-reveal-bg: #F1F3F5; /* leichtes Grau */ --ra-reveal-line: #C9CED6; /* Rahmenlinie, etwas dunkler */ --ra-reveal-radius: 28px; position: relative; isolation: isolate; border-radius: var(--ra-reveal-radius); padding: clamp(22px, 2.6vw, 40px) clamp(22px, 3vw, 46px); } /* Fuellung als eigene Ebene, damit sie getrennt von der Linie eingeblendet werden kann */ .ra-reveal::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--ra-reveal-bg); } .ra-reveal__frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .ra-reveal__line { fill: none; stroke: var(--ra-reveal-line); stroke-width: 2; stroke-linecap: round; /* d, stroke-dasharray und -dashoffset setzt ra-reveal.js, weil der Pfad die echte Elementgroesse braucht (sonst verzerren die runden Ecken) */ } .ra-reveal__body { position: relative; z-index: 2; } /* Der Absatz bringt margin-bottom: 18px mit; im Panel wuerde der Innenabstand unten dadurch groesser als oben wirken. */ .ra-reveal__body > :last-child { margin-bottom: 0; } /* ---------- Zustaende (nur mit JS) ---------- */ /* Startzustand: Fuellung weg, Text verdeckt, Linien ungezeichnet */ .ra-reveal.is-armed::before { opacity: 0; } .ra-reveal.is-armed .ra-reveal__body { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px); } /* 1. Linie zeichnen */ .ra-reveal.is-drawing .ra-reveal__line { transition: stroke-dashoffset 0.95s cubic-bezier(0.33, 0.02, 0.24, 1); } /* 2. Fuellung */ .ra-reveal.is-filled::before { opacity: 1; transition: opacity 0.55s ease; } /* 3. Text freilegen */ .ra-reveal.is-revealed .ra-reveal__body { opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition: opacity 0.5s ease, clip-path 0.75s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.75s cubic-bezier(0.22, 0.8, 0.3, 1); } /* Ist die Linie fertig und alles sichtbar, blendet sie sich zurueck - der graue Panel-Hintergrund traegt danach die Form */ .ra-reveal.is-revealed .ra-reveal__line { opacity: 0; transition: opacity 0.6s ease 0.25s; } @media (prefers-reduced-motion: reduce) { /* Kein Zeichnen, kein Wischen: Panel und Text sofort */ .ra-reveal.is-armed::before { opacity: 1; } .ra-reveal.is-armed .ra-reveal__body { opacity: 1; clip-path: none; transform: none; } .ra-reveal__line { display: none; } } @media (max-width: 767px) { .ra-reveal { --ra-reveal-radius: 20px; } } /* ============================================================ "Deine Vorteile" (Startseite, Container f142057) Redesign 26.07.2026: aus der losen Icon-Liste werden Karten mit Icon-Badge; Einfahrt gestaffelt via ra-benefits.js. Fail-safe: ohne JS ist alles sichtbar — erst .ra-benefits-armed blendet aus, .ra-benefits-in deckt gestaffelt wieder auf. ============================================================ */ /* --- Panel im Court-Look (wie die Padel-Court-Grafik): dunkles Navy, gruener Rand, grosse Rundung. Volle Kit-Kette, weil .elementor-14 .elementor-element.elementor-element-f142057 sonst den Hintergrund zuruecksetzt (Spezifitaet 0,3,0). --- */ .elementor-14 .elementor-element.elementor-element-f142057[data-ra-benefits] { background-color: #0f2033; border: 2px solid #A5E244; border-radius: 24px; padding: 36px; } /* --- Spalten: gleichmaessiger Kartenstapel --- */ [data-ra-benefits] .elementor-icon-list-items { display: flex; flex-direction: column; gap: 16px; } /* Elementors eigenen Item-Abstand neutralisieren. NUR margin — ein padding:0 hier hatte (wegen des li-Elementselektors, 0,2,1) die Karten-Padding-Regel (0,2,0) geschlagen: die Badges klebten am Kartenrand, waehrend die Link-Karte ihr Padding am behielt. */ [data-ra-benefits] .elementor-icon-list-item, [data-ra-benefits] .elementor-icon-list-items li { margin: 0; } /* --- Karte: aufgehellte Flaeche auf dem Navy-Panel --- */ [data-ra-benefits] .elementor-icon-list-item { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.055); border: 1px solid rgba(165, 226, 68, 0.22); border-radius: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; } /* Innenaufbau: li direkt ODER der Link im li traegt das Layout. Selektor bewusst mit ul-Kette (0,3,0), damit kein Elementor-Reset mit li-Elementselektor dazwischenfunkt. */ [data-ra-benefits] .elementor-icon-list-items .elementor-icon-list-item, [data-ra-benefits] .elementor-icon-list-items .elementor-icon-list-item > a { gap: 16px; padding: 16px 20px; } [data-ra-benefits] .elementor-icon-list-item > a { display: flex; align-items: center; width: 100%; color: inherit; } /* Doppeltes Padding vermeiden, wenn ein Link im li steckt */ [data-ra-benefits] .elementor-icon-list-items .elementor-icon-list-item:has(> a) { padding: 0; } [data-ra-benefits] .elementor-icon-list-item:hover { transform: translateY(-3px); background-color: rgba(255, 255, 255, 0.10); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35); border-color: #A5E244; } /* --- Icon-Badge: gruen umrandet auf Navy, Hover hebt es weiss hervor --- */ [data-ra-benefits] .elementor-icon-list-icon { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background-color: rgba(165, 226, 68, 0.12); border: 1px solid rgba(165, 226, 68, 0.35); transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Elementor gibt dem SVG einen margin-right (Abstand zum Listentext) — im Badge zieht der das Icon 4px aus der Mitte. Volle Widget-Ketten, weil die Kit-Regel je Widget-ID (0,4,1) kommt. */ [data-ra-benefits] .elementor-icon-list-icon svg, .elementor-14 .elementor-element.elementor-element-433e78f .elementor-icon-list-icon svg, .elementor-14 .elementor-element.elementor-element-52176da .elementor-icon-list-icon svg { width: 26px; height: 26px; margin: 0; } [data-ra-benefits] .elementor-icon-list-item:hover .elementor-icon-list-icon { background-color: #ffffff; border-color: #ffffff; transform: rotate(-5deg) scale(1.08); } /* Text weiss auf Navy. Kit setzt die Farbe je Widget mit .elementor-14 .elementor-element.elementor-element- ... (0,4,0) — deshalb hier dieselbe Kette fuer beide Icon-List-Widgets. */ .elementor-14 .elementor-element.elementor-element-433e78f .elementor-icon-list-text, .elementor-14 .elementor-element.elementor-element-52176da .elementor-icon-list-text, .elementor-14 .elementor-element.elementor-element-52176da a .elementor-icon-list-text { color: #ffffff; line-height: 1.4; } /* --- Einfahrt (nur wenn ra-benefits.js scharf geschaltet hat) --- */ [data-ra-benefits].ra-benefits-armed .elementor-icon-list-item { opacity: 0; transform: translateY(28px) scale(0.96); } [data-ra-benefits].ra-benefits-armed .elementor-icon-list-icon { transform: scale(0.4) rotate(-10deg); } [data-ra-benefits].ra-benefits-armed.ra-benefits-in .elementor-icon-list-item { opacity: 1; transform: none; transition: transform 0.65s cubic-bezier(0.22, 1.4, 0.36, 1) var(--ra-d, 0s), opacity 0.4s ease var(--ra-d, 0s); } [data-ra-benefits].ra-benefits-armed.ra-benefits-in .elementor-icon-list-icon { transform: none; transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--ra-d, 0s) + 0.18s), background-color 0.3s ease; } @media (prefers-reduced-motion: reduce) { /* Sicherheitsnetz zusaetzlich zum JS-Check: nie ausblenden */ [data-ra-benefits].ra-benefits-armed .elementor-icon-list-item, [data-ra-benefits].ra-benefits-armed .elementor-icon-list-icon { opacity: 1; transform: none; transition: none; } } /* ============================================================ WhatsApp-Gruppen (Startseite): drei Karten mit rundem WhatsApp-Button. Eigene Sektion .ra-wa in home.md, ersetzt die frueheren drei Elementor-Buttons in der Textspalte. Einfahrt: gleiche armed/in-Mechanik wie "Deine Vorteile" (ra-benefits.js bedient beide Marker). ============================================================ */ /* Ohne Kit-ID erbt die Sektion Teile der e-con-Kette nicht zuverlaessig: der Inner lief trotz computed max-width auf voller Viewportbreite und linksbuendig. Deckel + Zentrierung deshalb explizit — Content darf nie breiter sein als der 1280er-Rahmen (Hero). */ .ra-wa { display: flex; width: 100%; } .ra-wa > .e-con-inner { width: 100%; max-width: min(100%, var(--container-max-width, 1280px)); min-width: 0; margin-left: auto; margin-right: auto; } .ra-wa__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; min-width: 0; } .ra-wa__card { display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #ffffff; border: 1px solid rgba(0, 108, 155, 0.12); border-radius: 20px; padding: 28px 24px 20px; box-shadow: 0 2px 10px rgba(10, 40, 60, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .ra-wa__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(10, 40, 60, 0.12); border-color: rgba(165, 226, 68, 0.65); } /* Kit setzt h3 auf 48px/#404040 (.elementor-kit-36 h3, 0,1,1) — zwei Klassen (0,2,0) gewinnen. */ .ra-wa__card .ra-wa__title { margin: 0 0 10px; font-size: 26px; line-height: 1.1; color: #006C9B; } .ra-wa__text { flex: 1; margin: 0 0 20px; font-size: 17px; line-height: 1.5; color: #404040; } /* Runder WhatsApp-Button in Brand-Gruen, Icon dunkel wie das Panel */ .ra-wa__btn { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background-color: #A5E244; box-shadow: 0 6px 16px rgba(165, 226, 68, 0.45); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .ra-wa__btn svg { width: 32px; height: 32px; fill: #0f2033; } .ra-wa__btn:hover, .ra-wa__btn:focus-visible { transform: scale(1.12) rotate(-6deg); box-shadow: 0 10px 24px rgba(165, 226, 68, 0.6); } .ra-wa__hint { margin: 14px 0 0; font-size: 14px; line-height: 1.4; color: #6b7a85; } /* Einfahrt: gleiche Klassen wie "Deine Vorteile" (setzt ra-benefits.js) */ [data-ra-wagroups].ra-benefits-armed .ra-wa__card { opacity: 0; transform: translateY(28px) scale(0.96); } [data-ra-wagroups].ra-benefits-armed.ra-benefits-in .ra-wa__card { opacity: 1; transform: none; transition: transform 0.65s cubic-bezier(0.22, 1.4, 0.36, 1) var(--ra-d, 0s), opacity 0.4s ease var(--ra-d, 0s); } @media (prefers-reduced-motion: reduce) { [data-ra-wagroups].ra-benefits-armed .ra-wa__card { opacity: 1; transform: none; transition: none; } } @media (max-width: 1024px) { .ra-wa__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .ra-wa__card { padding: 22px 16px 18px; } /* Sektion hat keine Kit-ID und erbt daher kein Seitenpadding — 20px wie die uebrigen Sektionen (z.B. Header 363aa66e) */ .ra-wa > .e-con-inner { padding-left: 20px; padding-right: 20px; } } @media (max-width: 767px) { .ra-wa__grid { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 767px) { .elementor-14 .elementor-element.elementor-element-f142057[data-ra-benefits] { padding: 20px; border-radius: 20px; } [data-ra-benefits] .elementor-icon-list-items { gap: 12px; } [data-ra-benefits] .elementor-icon-list-items .elementor-icon-list-item, [data-ra-benefits] .elementor-icon-list-items .elementor-icon-list-item > a { gap: 12px; padding: 14px 16px; } [data-ra-benefits] .elementor-icon-list-items .elementor-icon-list-item:has(> a) { padding: 0; } [data-ra-benefits] .elementor-icon-list-icon { width: 44px; height: 44px; border-radius: 12px; } [data-ra-benefits] .elementor-icon-list-icon svg { width: 22px; height: 22px; } } /* ============================================================ Semantik-Fix 30.07.2026: Seitenueberschriften sind jetzt H1. Vier Seiten hatten gar kein H1 (Impressum, Hallenordnung, Pickleball-Download als H2, Accessibility-Statement als H3) — uebernommen aus dem WordPress-Original, dort genauso. Screenreader hatten damit keine Hauptueberschrift, Google keine klare Seitenueberschrift. Die Groesse kam allein vom Kit-TAG-Selektor (h2 64px / h3 48px, h1 waere 78px) — es gibt keine widgetspezifische font-size. Ein blosser Tag-Wechsel haette die Seiten also sichtbar veraendert. Deshalb hier die Kit-VARIABLEN des alten Tags setzen: die schreibt das Kit pro Breakpoint selbst um (h2: 64/45/38, h3: 48/35/32), damit bleibt die Darstellung auf allen Viewports exakt wie vorher. Spezifitaet: Kit-Regel ist `.elementor-kit-36 h1` (0,1,1); zwei Klassen (0,2,0) schlagen das sicher. ============================================================ */ .elementor-heading-title.ra-h1-as-h2 { font-size: var(--e-global-typography-4353ebc-font-size); line-height: var(--e-global-typography-4353ebc-line-height); letter-spacing: var(--e-global-typography-4353ebc-letter-spacing); } .wp-block-heading.ra-h1-as-h3 { font-size: var(--e-global-typography-d4f69a8-font-size); line-height: var(--e-global-typography-d4f69a8-line-height); letter-spacing: var(--e-global-typography-d4f69a8-letter-spacing); } /* ============================================================ Barrierefreiheit-Widget gegen das Elementor-Kit immunisieren (31.07.2026) Das Widget (assets/js/a11y-widget.js) bringt sein CSS inline mit und stylt seine Kacheln ueber `.a11yw-tile` (0,1,0). Das Kit stylt aber JEDEN Button der Seite ueber `.elementor-kit-36 button` (0,1,1) — und gewinnt damit. Konkret kam ein Innenabstand von 10px 20px statt der vorgesehenen 10px 6px an: Die Kacheln wurden dadurch rund 190 px breit, obwohl das Panel nur 340 px hat. Ergebnis: die rechte Spalte ragte 66 px ueber den Bildschirmrand hinaus, die Beschriftungen waren abgeschnitten. Dieselbe Falle wie beim Preloader-Logo (dort `img { border-radius }`): Das Kit stylt nackte Tags, und jedes selbstgebaute Element faengt sich das ein. Hier ueber die ID des Grids zurueckgeholt — `#a11yw-grid` ergibt (1,1,0) und schlaegt die Kit-Kette sicher. Die Werte sind die Originalwerte aus dem Widget-Snippet. Wird das Snippet aktualisiert, hier gegenpruefen. ============================================================ */ /* Der schwebende Button traf dieselbe Kit-Regel: 20 px seitliches Padding auf 56 px Breite lassen innen 16 px uebrig, und das 30-px-Icon wurde als Flex-Item auf 12 px zusammengequetscht — sichtbar zu klein UND verzerrt (12 breit bei 30 hoch). Padding zuruecknehmen, Icon vor dem Schrumpfen schuetzen und beides etwas grosszuegiger: 64er Kreis, 36er Symbol. `body #a11yw-btn` statt `#a11yw-btn`: Das Widget haengt sein eigenes style-Element zur Laufzeit ein, also NACH unserem Bundle. Bei gleicher Spezifitaet (1,0,0) gewinnt die spaetere Regel — die Groesse bliebe sonst wirkungslos, was beim ersten Versuch auch passiert ist. */ body #a11yw-btn { width: 64px; height: 64px; padding: 0; flex: 0 0 auto; } body #a11yw-btn svg { width: 36px; height: 36px; flex: 0 0 auto; } #a11yw-grid .a11yw-tile, #a11yw-panel .a11yw-tile { padding: 10px 6px; min-height: 76px; border: 2px solid #d7d7d7; border-radius: 10px; background: #fafafa; color: #111; font-family: inherit; font-weight: 700; line-height: 1.25; letter-spacing: normal; text-transform: none; box-shadow: none; } /* `1fr` waechst notfalls ueber die Spaltenbreite hinaus, wenn der Inhalt breiter ist — genau das ist oben passiert. `minmax(0, 1fr)` deckelt die Spalte hart, damit ein zu breites Wort das Panel nie wieder auseinanderdrueckt. */ #a11yw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* ============================================================ Preloader Startseite (31.07.2026) Deckt die Seite ab, bis die Hero-Medien im Browser-Cache liegen — sonst laedt die Slideshow ihre Motive erst beim Weiterschalten nach und man sieht ihr beim Aufbauen zu. Aufbau: Logo faellt mit Overshoot von oben ein, darunter ein Ladebalken, auf dem ein Lottie-Tennisball mit dem Fortschritt nach rechts wandert, darunter die Prozentanzeige. Der Balken zeigt echten Ladefortschritt (siehe assets/js/ra-preloader.js), keine Attrappe. Er wird nach spaetestens 8 Sekunden zwangsweise geschlossen — ein Besucher soll nie vor einer verdeckten Seite haengen, nur weil ein einzelnes Video langsam kommt. Das Overlay liegt ueber allem (z-index 100000, ueber dem Elementor-Header). Ohne JS bliebe es stehen, deshalb entfernt das Skript es aus dem DOM und setzt zusaetzlich eine Watchdog-Zeit. ============================================================ */ .ra-preloader { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: #fff; transition: opacity .45s ease, visibility .45s ease; } .ra-preloader.is-out { opacity: 0; visibility: hidden; } body.ra-preloading { overflow: hidden; } .ra-preloader__inner { display: flex; flex-direction: column; align-items: center; /* Der Ball ragt ueber die Oberkante des Balkens hinaus — bei kleinerem Abstand sitzt er auf dem Logo-Schriftzug. */ gap: 76px; padding: 24px; width: 100%; } /* Logo faellt von oben ein und schwingt einmal ueber das Ziel hinaus — dieselbe Handschrift wie das mobile Menue, das mit cubic-bezier(0.22, 1.45, 0.36, 1) hochfaehrt. */ /* Das Kit gibt JEDEM Bild `border-radius: 24px` (`.elementor-kit-36 img`). Beim Logo schnitt das die untere rechte Ecke ab — genau dort steht das „t" von „Rhein-Erft", es fehlte sichtbar. Header- und Footer-Logo haben dafuer eigene Kit-Regeln mit 0, unser Preloader-Logo erbt die globale. Die Kit-Regel ist (0,1,1), zwei Klassen (0,2,0) schlagen sie sicher. */ .ra-preloader .ra-preloader__logo { width: 640px; max-width: 78vw; height: auto; border-radius: 0; animation: ra-pre-logo .95s cubic-bezier(0.22, 1.45, 0.36, 1) both; } @keyframes ra-pre-logo { 0% { transform: translateY(-160%); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .ra-preloader__track { position: relative; width: 440px; max-width: 82vw; animation: ra-pre-fade .5s ease .45s both; } @keyframes ra-pre-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .ra-preloader__bar { height: 12px; border-radius: 999px; background: #e3edf2; overflow: hidden; } .ra-preloader__fill { width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #006C9B 0%, #A5E244 100%); } /* Der Ball sitzt auf dem Balken und wandert mit dem Fortschritt. Bis das Lottie geladen ist (oder wenn es ausfaellt), steht hier ein gruener Kreis — der Preloader darf nie leer aussehen. */ .ra-preloader__ball { position: absolute; left: 0; bottom: 14px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: #A5E244; will-change: left; } .ra-preloader__ball svg { display: block; width: 100%; height: 100%; } .ra-preloader__ball.has-lottie { background: none; } .ra-preloader__pct { margin: 0; font-family: 'RA', sans-serif; font-weight: 900; font-size: 20px; letter-spacing: .02em; color: #006C9B; font-variant-numeric: tabular-nums; text-align: center; } @media (max-width: 767px) { .ra-preloader__inner { gap: 32px; } .ra-preloader__ball { width: 34px; height: 34px; margin-left: -17px; bottom: 12px; } } @media (prefers-reduced-motion: reduce) { .ra-preloader__logo, .ra-preloader__track { animation: none; } } /* ============================================================ Hero-Video Startseite (31.07.2026, EXPERIMENT) Die Elementor-Background-Slideshow ist raus. An ihrer Stelle laufen zehn Slow-Motion-Clips, je vier Sekunden, mit Ueberblendung — gesteuert von assets/js/ra-hero-stage.js. Herkunft der Clips: die Motive der alten Slideshow wurden per Higgsfield Kling 3.0 animiert und lokal auf 50 fps zeitgedehnt. Laenger als vier Sekunden traegt die generierte Bewegung nicht, danach werden die Fehler sichtbar; deshalb sind alle Dateien auf 4 s geschnitten. In content/home.md wurde dafuer das data-settings-Attribut des Hero-Containers entfernt. Ohne "background_background":"slideshow" baut Elementor keinen Swiper mehr auf und laedt die zehn Motive nicht mehr nach — genau das war vorher der Grund fuer das sichtbare Nachladen beim Weiterschalten. Fail-safe wie alle eigenen Animationen: die Clips liegen uebereinander, der erste ist ohne JS sichtbar und zeigt sein Poster. Zusaetzlich liegt ein Poster als background-image auf dem Container. Der Hero ist nie leer. ============================================================ */ .elementor-14 .elementor-element.elementor-element-5461b502 { background-image: url(/assets/video/hero-padel-slomo-poster.jpg); background-size: cover; background-position: center; /* Dunkles Overlay 20 % zurueckgenommen: Kit-Wert 0.39 -> 0.31. Auf dem hellen Eingangsclip war die Abdunklung unauffaellig, auf den dunkleren Motiven (Teamfoto, Produktaufnahmen) sackten die Bilder dahinter weg. Weiter runter geht es nicht ohne Not — der gruene H1 steht direkt auf dem Bild und braucht die Abdunklung als Kontrastgrundlage. */ --overlay-opacity: 0.31; } /* `border-radius: inherit` ist hier Pflicht, nicht Kosmetik: der Hero-Container ist nur auf Desktop `overflow: hidden` — unter 1024 px steht er auf `visible` und clippt seine Kinder nicht mehr. Ohne diese Zeile lief das Video mobil rechteckig ueber die gerundeten Ecken hinaus, waehrend Hintergrund und Overlay gerundet blieben: eine sichtbare Doppelkante. `inherit` uebernimmt dabei automatisch den Kit-Wert des jeweiligen Breakpoints (36 px Desktop, 24 px mobil) — ein fester Wert wuerde beim naechsten Kit-Update auseinanderlaufen. */ .ra-hero-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; } .ra-hero-stage__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; opacity: 0; transition: opacity .6s ease; } .ra-hero-stage__clip.is-active { opacity: 1; } /* Stapelreihenfolge. Das dunkle Overlay des Kits sitzt auf dem ::before des Hero-Containers und hat z-index: auto — es wird also VOR den Kindern gemalt und lag damit unter dem Video. Ohne Overlay steht der gruene H1 auf hellem Hallenboden, der Kontrast bricht weg. Deshalb hier: Video 0, Overlay 1, Inhalt 2. Der Inhalt braucht dafuer position: relative — er ist im Kit statisch positioniert und wuerde sonst nicht am z-index teilnehmen. */ .elementor-14 .elementor-element.elementor-element-5461b502::before { z-index: 1; } .elementor-14 .elementor-element.elementor-element-5461b502 > .e-con-inner { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .ra-hero-video { display: none; } } /* ============================================================ /tennis-events/ — Event-Karten (31.07.2026) Zwei Baustellen, beide bewusst beauftragt: (a) ABSTAND. Der Eltern-Container 095b28d hat auf Desktop --gap: 60px, auf Tablet UND Mobile aber --gap: 0px — so kommt es aus Elementor, die Live-Site hat den Fehler genauso. Die Karten klebten deshalb <=1024px direkt aneinander (gemessen: Karte A endet bei y=1189, Karte B beginnt bei y=1189). Der einzige Abstand war das --margin-top: 20px von Karte A, und das sass oben. Zusaetzlich hat Karte A ein --min-height: 871px, das auf Desktop die Hoehen angleicht, mobil aber ~280px Leerraum unter dem letzten Button erzeugt. Beides hier korrigiert. (b) OPTIK. Grauer Kasten (#f7f7f7) mit rundum diffusem Schatten (0 0 4px rgba(0,0,0,.5)) — ein Halo, der nach 2015 aussieht. Ersetzt durch weisse Karte, feine Brand-Kontur, gerichteten weichen Schatten und einen Akzentstreifen Blau -> Gruen an der Oberkante. Spezifitaet: Kit-Regeln kommen als `.elementor-920 .elementor-element.elementor-element-` (0,3,0). Die volle Kette wird deshalb nachgebaut — ein schlichtes `.elementor-element-` (0,1,0) verliert lautlos. ============================================================ */ .elementor-920 .elementor-element.elementor-element-32daafa, .elementor-920 .elementor-element.elementor-element-5936f58 { --padding-top: 32px; --padding-bottom: 32px; --padding-left: 32px; --padding-right: 32px; --border-radius: 24px 24px 24px 24px; --overflow: hidden; position: relative; border: 1px solid rgba(0, 108, 155, 0.12); box-shadow: 0 20px 45px -25px rgba(16, 25, 53, 0.45), 0 2px 6px rgba(16, 25, 53, 0.05); transition: transform .25s ease, box-shadow .25s ease; } .elementor-920 .elementor-element.elementor-element-32daafa:not(.elementor-motion-effects-element-type-background), .elementor-920 .elementor-element.elementor-element-5936f58:not(.elementor-motion-effects-element-type-background) { background-color: #fff; } /* Akzentstreifen an der Oberkante — Brand-Blau in Brand-Gruen. */ .elementor-920 .elementor-element.elementor-element-32daafa::after, .elementor-920 .elementor-element.elementor-element-5936f58::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #006C9B 0%, #A5E244 100%); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .elementor-920 .elementor-element.elementor-element-32daafa:hover, .elementor-920 .elementor-element.elementor-element-5936f58:hover { transform: translateY(-3px); box-shadow: 0 28px 55px -25px rgba(16, 25, 53, 0.5), 0 3px 10px rgba(16, 25, 53, 0.07); } } /* Buttons: Pill statt 5px-Ecke, dunkles Brand-Blau auf Gruen. Weiss auf #A5E244 liegt bei rund 1,7:1 und ist damit weit unter jedem Lesbarkeitsminimum — auf der Flaeche einer ganzen Button-Liste faellt das sofort auf. Der Header-CTA hat dasselbe Problem, bleibt hier aber absichtlich unangetastet: das waere eine Entscheidung fuers ganze Design, nicht fuer diese Seite. */ .elementor-920 .elementor-element.elementor-element-32daafa .elementor-button, .elementor-920 .elementor-element.elementor-element-5936f58 .elementor-button { border-radius: 999px; color: #00405A; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .elementor-920 .elementor-element.elementor-element-32daafa .elementor-button svg, .elementor-920 .elementor-element.elementor-element-5936f58 .elementor-button svg, .elementor-920 .elementor-element.elementor-element-32daafa .elementor-button i, .elementor-920 .elementor-element.elementor-element-5936f58 .elementor-button i { fill: #00405A; color: #00405A; } @media (hover: hover) and (pointer: fine) { .elementor-920 .elementor-element.elementor-element-32daafa .elementor-button:hover, .elementor-920 .elementor-element.elementor-element-5936f58 .elementor-button:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 8px 18px -8px rgba(16, 25, 53, 0.45); } } /* <=1024px: Gap nachruesten, den Desktop-Hoehenausgleich abschalten (sonst klafft Leerraum unter Karte A) und das jetzt ueberfluessige margin-top von Karte A entfernen. */ @media (max-width: 1024px) { .elementor-920 .elementor-element.elementor-element-095b28d { --gap: 32px 32px; --row-gap: 32px; --column-gap: 32px; } .elementor-920 .elementor-element.elementor-element-32daafa { --min-height: auto; --margin-top: 0px; } .elementor-920 .elementor-element.elementor-element-32daafa, .elementor-920 .elementor-element.elementor-element-5936f58 { --padding-top: 24px; --padding-bottom: 24px; --padding-left: 24px; --padding-right: 24px; } }