.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;}: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;}}/* Start custom CSS for video, class: .elementor-element-50dc30a *//* ========================================================= NIPPON FITNESS RESPONSIVE HERO VIDEO – MASTER CSS Aufbau: Hero Flexbox = nf-video-hero Video Widget = nf-video-bg Content Flexbox = nf-hero-content CI: Rot: #db0000 ========================================================= */ /* ========================================================= 01 / HERO CONTAINER ========================================================= */ .nf-video-hero { position: relative !important; min-height: 100svh; overflow: hidden !important; isolation: isolate; } /* ========================================================= 02 / VIDEO BACKGROUND LAYER ========================================================= */ .nf-video-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 0 !important; overflow: hidden !important; pointer-events: none; } /* Elementor / Atomic Wrapper */ .nf-video-bg .elementor-widget-container, .nf-video-bg .elementor-wrapper, .nf-video-bg .e-hosted-video, .nf-video-bg .e-video, .nf-video-bg > div { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; } /* ========================================================= 03 / VIDEO ========================================================= */ .nf-video-bg video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; display: block !important; object-fit: cover !important; /* Desktop Bildausschnitt */ object-position: center center !important; } /* ========================================================= 04 / PREMIUM VIDEO OVERLAY Dunkel hinter dem Content, transparenter zum rechten Bildbereich. Ebene: Video = 0 Overlay = 1 Content = 2 ========================================================= */ .nf-video-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* * Hauptverlauf: * links hohe Lesbarkeit, * rechts mehr vom Video sichtbar */ 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% ); } /* ========================================================= 05 / CONTENT ABOVE VIDEO + OVERLAY ========================================================= */ .nf-hero-content { position: relative !important; z-index: 2 !important; } /* ========================================================= 06 / TABLET ========================================================= */ @media (max-width: 1024px) { .nf-video-hero { min-height: 100svh; } .nf-video-bg video { object-position: 58% center !important; } /* * Tablet etwas gleichmäßiger abdunkeln, * da das verfügbare Sichtfeld kleiner wird. */ .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% ); } } /* ========================================================= 07 / MOBILE ========================================================= */ @media (max-width: 767px) { .nf-video-hero { min-height: 100svh; 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-wrapper, .nf-video-bg .e-hosted-video, .nf-video-bg .e-video, .nf-video-bg > div { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto !important; } .nf-video-bg video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; /* * Mobiler Bildausschnitt. * Diesen Wert kannst du später * je nach Motiv anpassen. */ object-position: 65% center !important; } /* * MOBILE OVERLAY * Auf kleinen Displays ist ein horizontaler * Verlauf weniger sinnvoll, weil der Content * einen großen Teil des Bildes überlagert. * Deshalb: * oben kräftig * Mitte etwas transparenter * unten wieder dunkler für Buttons / Text. */ .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% ); } } /* ========================================================= 08 / SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .nf-video-bg video { object-position: 67% center !important; } /* * Auf sehr kleinen Displays minimal stärker, * damit weiße Typografie zuverlässig lesbar bleibt. */ .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 */