.elementor-2 .elementor-element.elementor-element-391edab{--display:flex;--min-height:900px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:100px;--padding-left:30px;--padding-right:30px;}.elementor-2 .elementor-element.elementor-element-391edab:not(.elementor-motion-effects-element-type-background), .elementor-2 .elementor-element.elementor-element-391edab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background:url("https://www.floss.de/wp-content/uploads/2026/09/Luftbildpanorama-Floss.jpg") 50% 50%;background-size:cover;}.elementor-2 .elementor-element.elementor-element-6304400{--display:flex;--min-height:0px;--justify-content:flex-end;}.elementor-2 .elementor-element.elementor-element-c0c84b1{--display:flex;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-2 .elementor-element.elementor-element-a4c8bc5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;border-style:solid;--border-style:solid;border-width:2px 2px 3px 5px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:3px;--border-left-width:5px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:30px 30px 30px 30px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-2 .elementor-element.elementor-element-5a5daba{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-2 .elementor-element.elementor-element-79e3117 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor{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-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2 .elementor-element.elementor-element-26438bf{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-b05b365{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2 .elementor-element.elementor-element-d645dc7{--display:flex;--min-height:0px;}.elementor-2 .elementor-element.elementor-element-483cd87{--display:flex;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-2 .elementor-element.elementor-element-3eaeca9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2 .elementor-element.elementor-element-df01302{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:10px 10px;--row-gap:10px;--column-gap:10px;border-style:solid;--border-style:solid;border-width:2px 5px 3px 2px;--border-top-width:2px;--border-right-width:5px;--border-bottom-width:3px;--border-left-width:2px;border-color:var( --e-global-color-secondary );--border-color:var( --e-global-color-secondary );--border-radius:30px 30px 30px 30px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-2 .elementor-element.elementor-element-5b6f9b8{--display:flex;}.elementor-2 .elementor-element.elementor-element-87b837d .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-3472db9{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-a1e5672{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-2 .elementor-element.elementor-element-0fe0d03{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-0fe0d03 .elementor-divider-separator{width:100%;}.elementor-2 .elementor-element.elementor-element-0fe0d03 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-2 .elementor-element.elementor-element-12dc967 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2 .elementor-element.elementor-element-12dc967 .elementor-button{fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-d85aecd{--display:flex;--min-height:0px;--justify-content:flex-end;}.elementor-2 .elementor-element.elementor-element-38d368e{--display:flex;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-2 .elementor-element.elementor-element-cc0faf2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;border-style:solid;--border-style:solid;border-width:2px 2px 3px 5px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:3px;--border-left-width:5px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:30px 30px 30px 30px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-2 .elementor-element.elementor-element-6c8ee7c{--display:flex;}.elementor-2 .elementor-element.elementor-element-c29c97b .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-0fc0cb8{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-831bbb3{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-2 .elementor-element.elementor-element-855cfeb{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-855cfeb .elementor-divider-separator{width:100%;}.elementor-2 .elementor-element.elementor-element-855cfeb .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-2 .elementor-element.elementor-element-cd42707 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2 .elementor-element.elementor-element-cd42707 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-2 .elementor-element.elementor-element-cd42707 .elementor-button{fill:var( --e-global-color-c34ba68 );color:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-7e661f5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2 .elementor-element.elementor-element-5425a22{--display:flex;--min-height:0px;}.elementor-2 .elementor-element.elementor-element-8751f41{--display:flex;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-2 .elementor-element.elementor-element-769c919{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2 .elementor-element.elementor-element-c5e5c8b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:10px 10px;--row-gap:10px;--column-gap:10px;border-style:solid;--border-style:solid;border-width:2px 5px 3px 2px;--border-top-width:2px;--border-right-width:5px;--border-bottom-width:3px;--border-left-width:2px;border-color:var( --e-global-color-secondary );--border-color:var( --e-global-color-secondary );--border-radius:30px 30px 30px 30px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-2 .elementor-element.elementor-element-ca60c73{--display:flex;}.elementor-2 .elementor-element.elementor-element-2efa7ea .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-9eb34dc{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-c1c69cd{--display:flex;--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-end;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--flex-wrap:wrap;}.elementor-2 .elementor-element.elementor-element-9f84bef{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-9f84bef .elementor-divider-separator{width:100%;}.elementor-2 .elementor-element.elementor-element-9f84bef .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-2 .elementor-element.elementor-element-bdfe17b .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2 .elementor-element.elementor-element-bdfe17b .elementor-button{fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-909a872 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2 .elementor-element.elementor-element-909a872 .elementor-button{fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-fd35bb3{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:-40px;--e-n-carousel-arrow-prev-top-align:100%;--e-n-carousel-arrow-prev-translate-y:-100%;--e-n-carousel-arrow-prev-top-position:25px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:-40px;--e-n-carousel-arrow-next-top-align:100%;--e-n-carousel-arrow-next-translate-y:-100%;--e-n-carousel-arrow-next-top-position:25px;--e-n-carousel-swiper-pagination-size:10px;--e-n-carousel-dots-normal-color:var( --e-global-color-c34ba68 );--e-n-carousel-dots-hover-color:var( --e-global-color-secondary );}.elementor-2 .elementor-element.elementor-element-e47004f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-91b1725{--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;--justify-content:space-between;--align-items:center;}.elementor-2 .elementor-element.elementor-element-40d0f47{text-align:start;}.elementor-2 .elementor-element.elementor-element-40d0f47 .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-7deb207 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2 .elementor-element.elementor-element-7deb207 .elementor-button{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );}.elementor-2 .elementor-element.elementor-element-7deb207 .elementor-button:hover, .elementor-2 .elementor-element.elementor-element-7deb207 .elementor-button:focus{color:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-7deb207 .elementor-button:hover svg, .elementor-2 .elementor-element.elementor-element-7deb207 .elementor-button:focus svg{fill:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-abf170a{--display:flex;}.elementor-2 .elementor-element.elementor-element-e58b871{--display:flex;}.elementor-2 .elementor-element.elementor-element-39b65c4{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-2 .elementor-element.elementor-element-39b65c4 .elementor-divider-separator{width:100%;}.elementor-2 .elementor-element.elementor-element-39b65c4 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-2 .elementor-element.elementor-element-ea8e20c{--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;--justify-content:space-between;--align-items:center;}.elementor-2 .elementor-element.elementor-element-f5131e1{text-align:start;}.elementor-2 .elementor-element.elementor-element-f5131e1 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-145661f .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-2 .elementor-element.elementor-element-145661f .elementor-button{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );}.elementor-2 .elementor-element.elementor-element-145661f .elementor-button:hover, .elementor-2 .elementor-element.elementor-element-145661f .elementor-button:focus{color:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-145661f .elementor-button:hover svg, .elementor-2 .elementor-element.elementor-element-145661f .elementor-button:focus svg{fill:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-dd93d5a{--display:flex;}.elementor-2 .elementor-element.elementor-element-d8b36c3{--display:flex;--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;--gap:80px 80px;--row-gap:80px;--column-gap:80px;--overlay-opacity:0.5;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-d8b36c3:not(.elementor-motion-effects-element-type-background), .elementor-2 .elementor-element.elementor-element-d8b36c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F172A;}.elementor-2 .elementor-element.elementor-element-d8b36c3::before, .elementor-2 .elementor-element.elementor-element-d8b36c3 > .elementor-background-video-container::before, .elementor-2 .elementor-element.elementor-element-d8b36c3 > .e-con-inner > .elementor-background-video-container::before, .elementor-2 .elementor-element.elementor-element-d8b36c3 > .elementor-background-slideshow::before, .elementor-2 .elementor-element.elementor-element-d8b36c3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2 .elementor-element.elementor-element-d8b36c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:radial-gradient(at top center, #1E40AF33 0%, var( --e-global-color-text ) 100%);}.elementor-2 .elementor-element.elementor-element-28c02d5{--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:center;--gap:30px 10px;--row-gap:30px;--column-gap:10px;--flex-wrap:wrap;--align-content:center;}.elementor-2 .elementor-element.elementor-element-e3ea64e{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -30px) 0px;text-align:start;}.elementor-2 .elementor-element.elementor-element-e3ea64e .elementor-heading-title{font-family:var( --e-global-typography-1391ab4-font-family ), Sans-serif;font-size:var( --e-global-typography-1391ab4-font-size );font-weight:var( --e-global-typography-1391ab4-font-weight );text-transform:var( --e-global-typography-1391ab4-text-transform );line-height:var( --e-global-typography-1391ab4-line-height );color:var( --e-global-color-secondary );}.elementor-2 .elementor-element.elementor-element-d567bad{width:100%;max-width:100%;text-align:start;}.elementor-2 .elementor-element.elementor-element-d567bad .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:#FFFFFF;}.elementor-2 .elementor-element.elementor-element-f2cb18a{color:#FFFFFF;}.elementor-2 .elementor-element.elementor-element-46ba5ef{--display:flex;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{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-text );}.elementor-2 .elementor-element.elementor-element-fa01167{width:100%;max-width:100%;background-color:#FFFFFFA6;padding:30px 30px 30px 30px;border-style:solid;border-width:1px 2px 1px 5px;border-color:var( --e-global-color-secondary );border-radius:30px 30px 30px 30px;}.elementor-2 .elementor-element.elementor-element-fa01167:hover{background-color:var( --e-global-color-secondary );border-style:solid;border-width:1px 2px 1px 5px;border-color:#FFFFFFA6;}.elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-wrapper{align-items:start;text-align:start;}.elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-title{margin-block-end:15px;color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-framed .elementor-icon, .elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-default .elementor-icon{fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-stacked:has(:hover) .elementor-icon,
					 .elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-default:has(:hover) .elementor-icon,
					 .elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-framed:has(:focus) .elementor-icon,
					 .elementor-2 .elementor-element.elementor-element-fa01167.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-c34ba68 );color:var( --e-global-color-c34ba68 );border-color:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon{font-size:30px;}.elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-title, .elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-title a{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-fa01167:has(:hover) .elementor-icon-box-title,
					 .elementor-2 .elementor-element.elementor-element-fa01167:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-description{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 );}.elementor-2 .elementor-element.elementor-element-777babc{width:var( --container-widget-width, 90% );max-width:90%;background-color:#FFFFFFA6;padding:30px 30px 30px 30px;--container-widget-width:90%;--container-widget-flex-grow:0;border-style:solid;border-width:1px 2px 1px 5px;border-color:var( --e-global-color-primary );border-radius:30px 30px 30px 30px;}.elementor-2 .elementor-element.elementor-element-777babc:hover{background-color:var( --e-global-color-primary );border-style:solid;border-width:1px 2px 1px 5px;border-color:#FFFFFFA6;}.elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-wrapper{align-items:start;text-align:start;}.elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-title{margin-block-end:15px;color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-777babc.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-2 .elementor-element.elementor-element-777babc.elementor-view-framed .elementor-icon, .elementor-2 .elementor-element.elementor-element-777babc.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-2 .elementor-element.elementor-element-777babc.elementor-view-stacked:has(:hover) .elementor-icon,
					 .elementor-2 .elementor-element.elementor-element-777babc.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-777babc.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-2 .elementor-element.elementor-element-777babc.elementor-view-default:has(:hover) .elementor-icon,
					 .elementor-2 .elementor-element.elementor-element-777babc.elementor-view-framed:has(:focus) .elementor-icon,
					 .elementor-2 .elementor-element.elementor-element-777babc.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-c34ba68 );color:var( --e-global-color-c34ba68 );border-color:var( --e-global-color-c34ba68 );}.elementor-2 .elementor-element.elementor-element-777babc .elementor-icon{font-size:30px;}.elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-title, .elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-title a{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-777babc:has(:hover) .elementor-icon-box-title,
					 .elementor-2 .elementor-element.elementor-element-777babc:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-description{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 );}.elementor-2 .elementor-element.elementor-element-9d5beca{--display:flex;--min-height:600px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2 .elementor-element.elementor-element-9d5beca:not(.elementor-motion-effects-element-type-background), .elementor-2 .elementor-element.elementor-element-9d5beca > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.floss.de/wp-content/uploads/2026/09/Luftbildpanorama-Floss.jpg");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}.elementor-2 .elementor-element.elementor-element-206bb1c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-b1ae00b{text-align:center;}.elementor-2 .elementor-element.elementor-element-b1ae00b .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-text );}.elementor-2 .elementor-element.elementor-element-3b01a0d{text-align:center;}.elementor-2 .elementor-element.elementor-element-8fa5f5f{--display:flex;}.elementor-2 .elementor-element.elementor-element-06168e9{width:100%;max-width:100%;}@media(max-width:1024px){.elementor-2 .elementor-element.elementor-element-391edab{--min-height:100px;--justify-content:flex-end;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-2 .elementor-element.elementor-element-6304400{--min-height:0px;}.elementor-2 .elementor-element.elementor-element-c0c84b1{--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;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-79e3117 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{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-2 .elementor-element.elementor-element-26438bf{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-d645dc7{--min-height:0px;}.elementor-2 .elementor-element.elementor-element-87b837d .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-3472db9{width:100%;max-width:100%;}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-2 .elementor-element.elementor-element-d85aecd{--min-height:0px;}.elementor-2 .elementor-element.elementor-element-38d368e{--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;}.elementor-2 .elementor-element.elementor-element-c29c97b .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-0fc0cb8{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-5425a22{--min-height:0px;}.elementor-2 .elementor-element.elementor-element-2efa7ea .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-9eb34dc{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-fd35bb3{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-next-right-position:0px;}.elementor-2 .elementor-element.elementor-element-40d0f47 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-f5131e1 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-e3ea64e .elementor-heading-title{font-size:var( --e-global-typography-1391ab4-font-size );line-height:var( --e-global-typography-1391ab4-line-height );}.elementor-2 .elementor-element.elementor-element-d567bad .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-icon-box .elementor-icon-box-description{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-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-title, .elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-title a{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-description{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-2 .elementor-element.elementor-element-777babc .elementor-icon-box-title, .elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-title a{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-description{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-2 .elementor-element.elementor-element-9d5beca{--min-height:calc(100vw *0.5);}.elementor-2 .elementor-element.elementor-element-b1ae00b .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}}@media(max-width:767px){.elementor-2 .elementor-element.elementor-element-391edab{--min-height:calc(100vh - 68px);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-6304400{--min-height:0px;}.elementor-2 .elementor-element.elementor-element-c0c84b1{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2 .elementor-element.elementor-element-a4c8bc5{--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:30px;--padding-bottom:30px;--padding-left:15px;--padding-right:15px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-79e3117 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{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-2 .elementor-element.elementor-element-b05b365{--min-height:calc(100vw * 0.6);}.elementor-2 .elementor-element.elementor-element-d645dc7{--min-height:0px;}.elementor-2 .elementor-element.elementor-element-483cd87{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2 .elementor-element.elementor-element-df01302{--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:30px;--padding-bottom:30px;--padding-left:15px;--padding-right:15px;}.elementor-2 .elementor-element.elementor-element-87b837d .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-2 .elementor-element.elementor-element-d85aecd{--min-height:0px;}.elementor-2 .elementor-element.elementor-element-38d368e{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2 .elementor-element.elementor-element-cc0faf2{--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:30px;--padding-bottom:30px;--padding-left:15px;--padding-right:15px;}.elementor-2 .elementor-element.elementor-element-c29c97b .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-7e661f5{--min-height:calc(100vw * 0.6);}.elementor-2 .elementor-element.elementor-element-5425a22{--min-height:0px;}.elementor-2 .elementor-element.elementor-element-8751f41{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2 .elementor-element.elementor-element-c5e5c8b{--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:30px;--padding-bottom:30px;--padding-left:15px;--padding-right:15px;}.elementor-2 .elementor-element.elementor-element-2efa7ea .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-bdfe17b{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-909a872{width:100%;max-width:100%;}.elementor-2 .elementor-element.elementor-element-fd35bb3{--e-n-carousel-swiper-slides-to-display:1;margin:-150px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;padding:15px 15px 15px 15px;--e-n-carousel-arrow-prev-left-position:15px;--e-n-carousel-arrow-next-right-position:15px;}.elementor-2 .elementor-element.elementor-element-40d0f47 .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-f5131e1 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-e3ea64e .elementor-heading-title{font-size:var( --e-global-typography-1391ab4-font-size );line-height:var( --e-global-typography-1391ab4-line-height );}.elementor-2 .elementor-element.elementor-element-d567bad .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-icon-box .elementor-icon-box-description{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-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-title, .elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-title a{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-fa01167 .elementor-icon-box-description{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-2 .elementor-element.elementor-element-777babc .elementor-icon-box-title, .elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-title a{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-2 .elementor-element.elementor-element-777babc .elementor-icon-box-description{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-2 .elementor-element.elementor-element-9d5beca{--min-height:calc(100vw *0.6);}.elementor-2 .elementor-element.elementor-element-b1ae00b .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}}@media(min-width:768px){.elementor-2 .elementor-element.elementor-element-391edab{--content-width:1080px;}.elementor-2 .elementor-element.elementor-element-a4c8bc5{--width:50%;}.elementor-2 .elementor-element.elementor-element-b05b365{--width:50%;}.elementor-2 .elementor-element.elementor-element-3eaeca9{--width:50%;}.elementor-2 .elementor-element.elementor-element-df01302{--width:50%;}.elementor-2 .elementor-element.elementor-element-cc0faf2{--width:50%;}.elementor-2 .elementor-element.elementor-element-7e661f5{--width:50%;}.elementor-2 .elementor-element.elementor-element-769c919{--width:50%;}.elementor-2 .elementor-element.elementor-element-c5e5c8b{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2 .elementor-element.elementor-element-a4c8bc5{--width:70%;}.elementor-2 .elementor-element.elementor-element-b05b365{--width:30%;}.elementor-2 .elementor-element.elementor-element-3eaeca9{--width:30%;}.elementor-2 .elementor-element.elementor-element-df01302{--width:70%;}.elementor-2 .elementor-element.elementor-element-cc0faf2{--width:70%;}.elementor-2 .elementor-element.elementor-element-7e661f5{--width:30%;}.elementor-2 .elementor-element.elementor-element-769c919{--width:30%;}.elementor-2 .elementor-element.elementor-element-c5e5c8b{--width:70%;}}/* Start custom CSS for heading, class: .elementor-element-79e3117 */.elementor-2 .elementor-element.elementor-element-79e3117 h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-26438bf */.elementor-2 .elementor-element.elementor-element-26438bf {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a4c8bc5 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-87b837d */.elementor-2 .elementor-element.elementor-element-87b837d h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3472db9 */.elementor-2 .elementor-element.elementor-element-3472db9 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-0fe0d03 */.elementor-2 .elementor-element.elementor-element-0fe0d03 {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-df01302 */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-c29c97b */.elementor-2 .elementor-element.elementor-element-c29c97b h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0fc0cb8 */.elementor-2 .elementor-element.elementor-element-0fc0cb8 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-855cfeb */.elementor-2 .elementor-element.elementor-element-855cfeb {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cc0faf2 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2efa7ea */.elementor-2 .elementor-element.elementor-element-2efa7ea h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9eb34dc */.elementor-2 .elementor-element.elementor-element-9eb34dc {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-9f84bef */.elementor-2 .elementor-element.elementor-element-9f84bef {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c5e5c8b */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-79e3117 */.elementor-2 .elementor-element.elementor-element-79e3117 h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-26438bf */.elementor-2 .elementor-element.elementor-element-26438bf {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a4c8bc5 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-87b837d */.elementor-2 .elementor-element.elementor-element-87b837d h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3472db9 */.elementor-2 .elementor-element.elementor-element-3472db9 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-0fe0d03 */.elementor-2 .elementor-element.elementor-element-0fe0d03 {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-df01302 */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-c29c97b */.elementor-2 .elementor-element.elementor-element-c29c97b h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0fc0cb8 */.elementor-2 .elementor-element.elementor-element-0fc0cb8 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-855cfeb */.elementor-2 .elementor-element.elementor-element-855cfeb {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cc0faf2 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2efa7ea */.elementor-2 .elementor-element.elementor-element-2efa7ea h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9eb34dc */.elementor-2 .elementor-element.elementor-element-9eb34dc {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-9f84bef */.elementor-2 .elementor-element.elementor-element-9f84bef {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c5e5c8b */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-79e3117 */.elementor-2 .elementor-element.elementor-element-79e3117 h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-26438bf */.elementor-2 .elementor-element.elementor-element-26438bf {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a4c8bc5 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-87b837d */.elementor-2 .elementor-element.elementor-element-87b837d h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3472db9 */.elementor-2 .elementor-element.elementor-element-3472db9 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-0fe0d03 */.elementor-2 .elementor-element.elementor-element-0fe0d03 {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-df01302 */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-c29c97b */.elementor-2 .elementor-element.elementor-element-c29c97b h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0fc0cb8 */.elementor-2 .elementor-element.elementor-element-0fc0cb8 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-855cfeb */.elementor-2 .elementor-element.elementor-element-855cfeb {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cc0faf2 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2efa7ea */.elementor-2 .elementor-element.elementor-element-2efa7ea h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9eb34dc */.elementor-2 .elementor-element.elementor-element-9eb34dc {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-9f84bef */.elementor-2 .elementor-element.elementor-element-9f84bef {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c5e5c8b */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-79e3117 */.elementor-2 .elementor-element.elementor-element-79e3117 h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-26438bf */.elementor-2 .elementor-element.elementor-element-26438bf {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a4c8bc5 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-87b837d */.elementor-2 .elementor-element.elementor-element-87b837d h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3472db9 */.elementor-2 .elementor-element.elementor-element-3472db9 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-0fe0d03 */.elementor-2 .elementor-element.elementor-element-0fe0d03 {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-df01302 */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-c29c97b */.elementor-2 .elementor-element.elementor-element-c29c97b h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0fc0cb8 */.elementor-2 .elementor-element.elementor-element-0fc0cb8 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-855cfeb */.elementor-2 .elementor-element.elementor-element-855cfeb {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cc0faf2 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2efa7ea */.elementor-2 .elementor-element.elementor-element-2efa7ea h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9eb34dc */.elementor-2 .elementor-element.elementor-element-9eb34dc {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-9f84bef */.elementor-2 .elementor-element.elementor-element-9f84bef {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c5e5c8b */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-79e3117 */.elementor-2 .elementor-element.elementor-element-79e3117 h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-26438bf */.elementor-2 .elementor-element.elementor-element-26438bf {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a4c8bc5 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-87b837d */.elementor-2 .elementor-element.elementor-element-87b837d h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3472db9 */.elementor-2 .elementor-element.elementor-element-3472db9 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-0fe0d03 */.elementor-2 .elementor-element.elementor-element-0fe0d03 {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-df01302 */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-c29c97b */.elementor-2 .elementor-element.elementor-element-c29c97b h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-0fc0cb8 */.elementor-2 .elementor-element.elementor-element-0fc0cb8 {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-855cfeb */.elementor-2 .elementor-element.elementor-element-855cfeb {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cc0faf2 *//* 1. Hauptklasse: Elementor-Korrekturen (WICHTIG!) */
.page-hero-box-left {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements */
.page-hero-box-left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10; /* Hebt das Dreieck über angrenzende Elemente */
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box-left::after {
        top: 75px;
        
        /* 1. Nach rechts erweitern: Statt -42px schieben wir es nun -44px raus */
        right: -44px; 
        
        /* 2. Nach links in die Box schieben (Lücke schließen): 
           Indem wir das Dreieck 46px breit machen, aber nur 44px nach rechts schieben,
           ragen exakt 2px nach links in die Box hinein und überlappen die Lücke nahtlos. */
        border-width: 0 46px 72px 0; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* Der asymmetrische Rahmen aus dem vorherigen Schritt */
        filter: drop-shadow(3px 2px 0 var(--e-global-color-primary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box-left (Dreieck oben rechts) */
@media (max-width: 767px) {
    
    .page-hero-box-left::after {
        /* 50px vom rechten Rand */
        right: 50px; 
        left: auto; 
        
        /* 40px hoch, aber 38px nach oben geschoben = 2px saubere Überlappung */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck (Höhe 40px, Breite 50px):
           Rechte Kante ist gerade, linke Kante ist schräg */
        border-width: 0 0 40px 50px; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: -2px links, -2px oben (für die Schräge)
           2. Teil: 2px rechts, 0px oben (für die gerade Kante) */
        filter: drop-shadow(-2px -2px 0 var(--e-global-color-primary)) 
                drop-shadow(2px 0 0 var(--e-global-color-primary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box-left.bg-primary-lighten::after {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2efa7ea */.elementor-2 .elementor-element.elementor-element-2efa7ea h2 {
    color: var(--color-gray-800)!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9eb34dc */.elementor-2 .elementor-element.elementor-element-9eb34dc {
    color: var(--color-gray-500)!important;
    font-size: var(--text-sm);
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-9f84bef */.elementor-2 .elementor-element.elementor-element-9f84bef {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c5e5c8b */.page-hero-box {
    position: relative !important;
    overflow: visible !important; 
}

/* 2. Basis-Styling des Pseudoelements (linke Seite) */
.page-hero-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 10;
    border-radius: 0 !important;
}

/* 3. Desktop-Ansicht (ab 992px) */
@media (min-width: 768px) {
    
    .page-hero-box::before {
        top: 75px;
        
        /* 1. Nach links aus der Box schieben (44px statt 42px) */
        left: -44px; 
        
        /* 2. Dreieck verbreitern: 
           Indem wir es 46px breit machen, ragen 2px rechts in die Box hinein 
           und schließen die Kante unsichtbar und nahtlos ab. */
        border-width: 0 0 72px 46px; 
        
        /* Die finale Farbe des Dreiecks */
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;

        /* DER RAHMEN (Schatten): -3px nach links, 2px nach unten */
        filter: drop-shadow(-3px 2px 0 var(--e-global-color-secondary));
    }
    
    /* Optional: Falls die Box zusätzlich noch eine andere Hintergrundklasse hat */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}

/* Mobile Ansicht: page-hero-box (Dreieck oben links) */
@media (max-width: 767px) {
    
    .page-hero-box::before {
        /* 50px vom linken Rand */
        left: 50px; 
        right: auto; 
        
        /* Gleiche Überlappung wie bei der anderen Box */
        top: -38px; 
        bottom: auto;
        
        /* Breiteres asymmetrisches Dreieck gespiegelt (Höhe 40px, Breite 50px):
           Linke Kante ist gerade, rechte Kante ist schräg */
        border-width: 0 50px 40px 0; 
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
        
        /* DOPPELTER RAHMEN (Schatten): 
           1. Teil: 2px rechts, -2px oben (für die Schräge)
           2. Teil: -2px links, 0px oben (für die gerade Kante) */
        filter: drop-shadow(2px -2px 0 var(--e-global-color-secondary)) 
                drop-shadow(-2px 0 0 var(--e-global-color-secondary));
    }
    
    /* Fallback für helle Hintergrundklasse */
    .page-hero-box.bg-primary-lighten::before {
        border-color: transparent transparent var(--color-gray-50, #f8f9fa) transparent;
    }
}/* End custom CSS */
/* Start custom CSS for nested-carousel, class: .elementor-element-fd35bb3 *//* ---- Basis (aus dem funktionierenden Setup) ---- */
.custom-flip-carousel .swiper-slide {
    height: 700px!important;
    display: flex;
}
.custom-flip-carousel .swiper-slide > .e-con {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.custom-flip-carousel .swiper-slide > .e-con > .e-con-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ---- Muster: unten / oben / mittig, wiederholt sich alle 3 Slides ---- */

/* Slide 1, 4, 7, 10 ... -> UNTEN */
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="0"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="3"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="6"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="9"] > .e-con > .e-con-inner {
    justify-content: flex-end;
}

/* Slide 2, 5, 8, 11 ... -> OBEN */
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="1"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="4"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="7"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="10"] > .e-con > .e-con-inner {
    justify-content: flex-start;
}

/* Slide 3, 6, 9, 12 ... -> MITTIG */
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="2"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="5"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="8"] > .e-con > .e-con-inner,
.custom-flip-carousel .swiper-slide[data-swiper-slide-index="11"] > .e-con > .e-con-inner {
    justify-content: center;
}


/* ---- Smartphone: bis 767px immer UNTEN anheften ---- */
@media (max-width: 767px) {
    .custom-flip-carousel .swiper-slide > .e-con > .e-con-inner {
        justify-content: flex-start !important;
        padding-top:40px!important;
    }
    
    .custom-flip-carousel .swiper-slide {
    height: auto!important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-391edab *//* === Nur Smartphones (Elementor Mobile-Breakpoint) === */
@media (max-width: 767px) {

    /* Sektion: feste Mindesthöhe aufheben, Inhalt oben ausrichten */
    .elementor-2 .elementor-element.elementor-element-391edab {
        --min-height: auto;
        min-height: auto;
        --justify-content: flex-start;
        justify-content: flex-start;
        
        /* HIER NEU: Das Hintergrundbild (Poster) auf die Video-Größe beschränken und oben anheften */
        background-size: 100% calc(100vw * 0.7) !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
    }

    /* Inneren Container als Spalte stapeln */
    .elementor-2 .elementor-element.elementor-element-391edab > .e-con-inner {
        display: flex;
        flex-direction: column;
    }

    /* Video aus dem absoluten Hintergrund holen und oben "anheften" */
    .elementor-2 .elementor-element.elementor-element-391edab .elementor-background-video-container {
        position: relative;
        order: -1;                       /* ganz nach oben */
        width: 100%;
        height: calc(100vw * 0.7);
        min-height: calc(100vw * 0.7);
        top: 0;
        left: 0;
        overflow: hidden;
    }

    /* Video sauber in den Banner-Rahmen einpassen */
    .elementor-2 .elementor-element.elementor-element-391edab .elementor-background-video-container video,
    .elementor-element-391edab .elementor-background-video-hosted {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
    }
}/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-39b65c4 */.elementor-2 .elementor-element.elementor-element-39b65c4 {
    --divider-color:var(--color-gray-200)!important;
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-fa01167 */.elementor-2 .elementor-element.elementor-element-fa01167 h3 {
    margin-top:0px!important;
}

.elementor-2 .elementor-element.elementor-element-fa01167 {
    transform: rotate(2deg);
}


.elementor-2 .elementor-element.elementor-element-fa01167:hover {
    transform: rotate(0deg);
}


/* Ändert die Textfarbe von Titel (inklusive Link) und Beschreibung */
.elementor-2 .elementor-element.elementor-element-fa01167:hover .elementor-icon-box-title,
.elementor-2 .elementor-element.elementor-element-fa01167:hover .elementor-icon-box-title a,
.elementor-2 .elementor-element.elementor-element-fa01167:hover .elementor-icon-box-description {
    color: #ffffff;
    transition: color 0.3s ease; /* Sorgt für einen weichen Farbübergang */
}

/* Ändert die Farbe des SVG-Icons */
.elementor-2 .elementor-element.elementor-element-fa01167:hover .elementor-icon-box-icon svg {
    fill: #ffffff;
    transition: fill 0.3s ease;
}/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-777babc */.elementor-2 .elementor-element.elementor-element-777babc h3 {
    margin-top:0px!important;
}

.elementor-2 .elementor-element.elementor-element-777babc {
    transform: rotate(-2deg);
}


.elementor-2 .elementor-element.elementor-element-777babc:hover {
    transform: rotate(0deg);
}


/* Ändert die Textfarbe von Titel (inklusive Link) und Beschreibung */
.elementor-2 .elementor-element.elementor-element-777babc:hover .elementor-icon-box-title,
.elementor-2 .elementor-element.elementor-element-777babc:hover .elementor-icon-box-title a,
.elementor-2 .elementor-element.elementor-element-777babc:hover .elementor-icon-box-description {
    color: #ffffff;
    transition: color 0.3s ease; /* Sorgt für einen weichen Farbübergang */
}

/* Ändert die Farbe des SVG-Icons */
.elementor-2 .elementor-element.elementor-element-777babc:hover .elementor-icon-box-icon svg {
    fill: #ffffff;
    transition: fill 0.3s ease;
}/* End custom CSS */