.elementor-334 .elementor-element.elementor-element-50dc30a.elementor-element{--align-self:stretch;}body:not(.rtl) .elementor-334 .elementor-element.elementor-element-50dc30a{left:0px;}body.rtl .elementor-334 .elementor-element.elementor-element-50dc30a{right:0px;}.elementor-334 .elementor-element.elementor-element-50dc30a{top:0px;z-index:0;}.elementor-334 .elementor-element.elementor-element-50dc30a .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );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-334 .elementor-element.elementor-element-bba2833{color:var( --e-global-color-b72ef5c );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-334 .elementor-element.elementor-element-eb51d7e .elementor-button{background-color:var( --e-global-color-8800c75 );border-style:solid;border-color:var( --e-global-color-8800c75 );}.elementor-334 .elementor-element.elementor-element-e14f0f9 .elementor-button{background-color:#61CE7000;border-style:solid;border-radius:30px 30px 30px 30px;}.elementor-334 .elementor-element.elementor-element-64f6db6{text-align:center;color:var( --e-global-color-text );}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-334 .elementor-element.elementor-element-8ebcfcd.elementor-element{--align-self:center;}.elementor-334 .elementor-element.elementor-element-8ebcfcd .elementor-icon-wrapper{text-align:center;}.elementor-334 .elementor-element.elementor-element-8ebcfcd.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-b72ef5c );}.elementor-334 .elementor-element.elementor-element-8ebcfcd.elementor-view-framed .elementor-icon, .elementor-334 .elementor-element.elementor-element-8ebcfcd.elementor-view-default .elementor-icon{color:var( --e-global-color-b72ef5c );border-color:var( --e-global-color-b72ef5c );}.elementor-334 .elementor-element.elementor-element-8ebcfcd.elementor-view-framed .elementor-icon, .elementor-334 .elementor-element.elementor-element-8ebcfcd.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-b72ef5c );}.elementor-334 .elementor-element.elementor-element-8ebcfcd .elementor-icon{font-size:120px;}.elementor-334 .elementor-element.elementor-element-8ebcfcd .elementor-icon svg{height:120px;}.elementor-334 .elementor-element.elementor-element-c8a903d{--e-transform-flipX:-1;z-index:1;}.elementor-334 .elementor-element.elementor-element-c8a903d.elementor-element{--align-self:center;}.elementor-334 .elementor-element.elementor-element-c8a903d .elementor-icon-wrapper{text-align:center;}.elementor-334 .elementor-element.elementor-element-c8a903d.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-b72ef5c );}.elementor-334 .elementor-element.elementor-element-c8a903d.elementor-view-framed .elementor-icon, .elementor-334 .elementor-element.elementor-element-c8a903d.elementor-view-default .elementor-icon{color:var( --e-global-color-b72ef5c );border-color:var( --e-global-color-b72ef5c );}.elementor-334 .elementor-element.elementor-element-c8a903d.elementor-view-framed .elementor-icon, .elementor-334 .elementor-element.elementor-element-c8a903d.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-b72ef5c );}.elementor-334 .elementor-element.elementor-element-c8a903d .elementor-icon{font-size:120px;}.elementor-334 .elementor-element.elementor-element-c8a903d .elementor-icon svg{height:120px;}.elementor-334 .elementor-element.elementor-element-48a386c{text-align:center;}.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-weight:var( --e-global-typography-secondary-font-weight );}.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-334 .elementor-element.elementor-element-1ff283a{--divider-border-style:solid;--divider-color:var( --e-global-color-8800c75 );--divider-border-width:5px;--e-transform-origin-x:center;--e-transform-origin-y:center;--divider-icon-size:50px;--divider-element-spacing:30px;}.elementor-334 .elementor-element.elementor-element-1ff283a .elementor-divider{text-align:center;padding-block-start:30px;padding-block-end:30px;}.elementor-334 .elementor-element.elementor-element-1ff283a .elementor-divider-separator{margin:0 auto;margin-center:0;}.elementor-334 .elementor-element.elementor-element-1ff283a .elementor-icon{padding:10px;border-radius:100px;}.elementor-334 .elementor-element.elementor-element-1ff283a.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-b72ef5c );}.elementor-334 .elementor-element.elementor-element-1ff283a.elementor-view-framed .elementor-icon, .elementor-334 .elementor-element.elementor-element-1ff283a.elementor-view-default .elementor-icon{color:var( --e-global-color-b72ef5c );border-color:var( --e-global-color-b72ef5c );}.elementor-334 .elementor-element.elementor-element-1ff283a.elementor-view-framed .elementor-icon, .elementor-334 .elementor-element.elementor-element-1ff283a.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-b72ef5c );}:root{--page-title-display:none;}@media(max-width:767px){.elementor-334 .elementor-element.elementor-element-50dc30a.elementor-element{--align-self:stretch;}.elementor-334 .elementor-element.elementor-element-50dc30a{z-index:0;}.elementor-334 .elementor-element.elementor-element-bba2833{text-align:center;}.elementor-334 .elementor-element.elementor-element-10a9f25{text-align:center;}}/* Start custom CSS for video, class: .elementor-element-50dc30a *//* ========================================================= NIPPON FITNESS HERO VIDEO – CLEAN MASTER CSS ZUSTÄNDIGKEITEN: ELEMENTOR VIDEO WIDGET: - Videoquelle - Autoplay - Loop - Mute - sonstige Video-Einstellungen DIESER CSS-CODE: - 100% Hero-Höhe - Responsive Cover - Desktop / Tablet / Mobile Crop - dunkles Overlay - Content über dem Video Klassen: Hero Flexbox: nf-video-hero Video Widget: nf-video-bg Content Flexbox: nf-hero-content ========================================================= */ /* ========================================================= 01 / HERO FLEXBOX Volle Bildschirmhöhe auf allen Geräten ========================================================= */ .nf-video-hero { position: relative !important; width: 100%; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow: hidden !important; isolation: isolate; } /* ========================================================= 02 / VIDEO WIDGET Wir positionieren lediglich DAS WIDGET vollflächig im Hero. Playback-Einstellungen des Elementor Widgets werden ausdrücklich NICHT verändert. ========================================================= */ .nf-video-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; z-index: 0 !important; pointer-events: none; } /* ========================================================= 03 / ELEMENTOR WIDGET CONTAINER Nur die tatsächlich benötigten äußeren Wrapper. KEIN: .nf-video-bg > div Dadurch greifen wir nicht mehr pauschal in Elementors interne Video-Struktur ein. ========================================================= */ .nf-video-bg > .elementor-widget-container, .nf-video-bg .elementor-widget-container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* ========================================================= 04 / KLASSISCHER ELEMENTOR VIDEO WRAPPER Falls das normale Elementor Video Widget verwendet wird. ========================================================= */ .nf-video-bg .elementor-wrapper, .nf-video-bg .elementor-video, .nf-video-bg .e-hosted-video, .nf-video-bg .e-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* ========================================================= 05 / VIDEO SELBST Hier wird ausschließlich die Darstellung geregelt. KEINE Playback-Eigenschaften. KEIN Loop. KEIN Autoplay. KEIN Mute. Das übernimmt Elementor. ========================================================= */ .nf-video-bg video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: block !important; object-fit: cover !important; /* * DESKTOP CROP */ object-position: center center !important; } /* ========================================================= 06 / PREMIUM DARK OVERLAY Links: starke Abdunklung für Text Rechts: deutlich mehr Video sichtbar ========================================================= */ .nf-video-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.78) 24%, rgba(0, 0, 0, 0.67) 44%, rgba(0, 0, 0, 0.47) 68%, rgba(0, 0, 0, 0.30) 100% ); } /* ========================================================= 07 / HERO CONTENT Über Video + Overlay ========================================================= */ .nf-hero-content { position: relative !important; z-index: 2 !important; } /* ========================================================= 08 / TABLET ========================================================= */ @media (max-width: 1024px) { .nf-video-hero { min-height: 100vh; min-height: 100svh; min-height: 100dvh; } /* Tablet Bildausschnitt */ .nf-video-bg video { object-position: 58% center !important; } /* Tablet Overlay */ .nf-video-hero::before { background: linear-gradient( 90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.78) 35%, rgba(0, 0, 0, 0.60) 68%, rgba(0, 0, 0, 0.40) 100% ); } } /* ========================================================= 09 / MOBILE Wichtig: Kein 16:9-Kästchen. Video bleibt komplette Hero-Höhe und wird wie ein Background Image gecroppt. ========================================================= */ @media (max-width: 767px) { .nf-video-hero { width: 100%; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow: hidden !important; } .nf-video-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } .nf-video-bg > .elementor-widget-container, .nf-video-bg .elementor-widget-container, .nf-video-bg .elementor-wrapper, .nf-video-bg .elementor-video, .nf-video-bg .e-hosted-video, .nf-video-bg .e-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .nf-video-bg video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100%; min-height: 100%; object-fit: cover !important; /* * MOBILE CROP * * Motiv etwas weiter rechts halten. */ object-position: 65% center !important; } /* ----------------------------------------------------- MOBILE OVERLAY Gleichmäßiger als Desktop, da Content einen größeren Anteil des Videos überlagert. ----------------------------------------------------- */ .nf-video-hero::before { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.68) 38%, rgba(0, 0, 0, 0.66) 62%, rgba(0, 0, 0, 0.80) 100% ); } } /* ========================================================= 10 / SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .nf-video-bg video { object-position: 67% center !important; } /* * Kleines Display: * minimal stärkere Abdunklung */ .nf-video-hero::before { background: linear-gradient( 180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.71) 38%, rgba(0, 0, 0, 0.69) 62%, rgba(0, 0, 0, 0.84) 100% ); } }/* End custom CSS */