.elementor-kit-4{--e-global-color-primary:#C2185B;--e-global-color-secondary:#E63B83;--e-global-color-text:#FFF7FA;--e-global-color-accent:#F08DB5;--e-global-color-m4ybg:#100A0F;--e-global-color-m4ybg2:#21131D;--e-global-color-m4yink:#0F1114;--e-global-color-m4ymuted:#CDBAC3;--e-global-color-m4ynav:#C25BD4;--e-global-color-m4ysurf:#180F17;--e-global-color-m4ysurf2:#24151F;--e-global-color-m4yline:rgba(255, 247, 250, 0.12);--e-global-color-m4ylinesoft:rgba(255, 247, 250, 0.07);--e-global-color-m4ylinerose:rgba(240, 141, 181, 0.38);--e-global-color-m4ylinehead:rgba(255, 247, 250, 0.06);--e-global-typography-primary-font-family:"Raleway";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.06;--e-global-typography-secondary-font-family:"Great Vibes";--e-global-typography-secondary-font-size:clamp(1.9rem, 3.9vw, 3.6rem);--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.36;--e-global-typography-secondary-letter-spacing:0em;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:clamp(1rem, .955rem + .22vw, 1.19rem);--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.72;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-size:.86rem;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.2;--e-global-typography-accent-letter-spacing:0.16em;--e-global-typography-m4yhero-font-family:"Raleway";--e-global-typography-m4yhero-font-size:clamp(2.75rem, 7.6vw, 8rem);--e-global-typography-m4yhero-font-weight:500;--e-global-typography-m4yhero-line-height:1;--e-global-typography-m4yhero-letter-spacing:0.055em;--e-global-typography-m4yh1-font-family:"Raleway";--e-global-typography-m4yh1-font-size:clamp(2.4rem, 6vw, 5.5rem);--e-global-typography-m4yh1-font-weight:600;--e-global-typography-m4yh1-line-height:1.06;--e-global-typography-m4yh1-letter-spacing:0.035em;--e-global-typography-m4yh2-font-family:"Raleway";--e-global-typography-m4yh2-font-size:clamp(2rem, 4.4vw, 4.6rem);--e-global-typography-m4yh2-font-weight:600;--e-global-typography-m4yh2-line-height:1.06;--e-global-typography-m4yh2-letter-spacing:-0.005em;--e-global-typography-m4yh2brand-font-family:"Raleway";--e-global-typography-m4yh2brand-font-size:clamp(2.1rem, 4.2vw, 4.1rem);--e-global-typography-m4yh2brand-font-weight:600;--e-global-typography-m4yh2brand-line-height:1.06;--e-global-typography-m4yh2brand-letter-spacing:0.07em;--e-global-typography-m4yh3-font-family:"Raleway";--e-global-typography-m4yh3-font-size:clamp(1.3rem, 1.05rem + .95vw, 2rem);--e-global-typography-m4yh3-font-weight:600;--e-global-typography-m4yh3-line-height:1.15;--e-global-typography-m4yh4-font-family:"Raleway";--e-global-typography-m4yh4-font-size:clamp(1.15rem, 1rem + .5vw, 1.5rem);--e-global-typography-m4yh4-font-weight:600;--e-global-typography-m4yh4-line-height:1.2;--e-global-typography-m4yh5-font-family:"Raleway";--e-global-typography-m4yh5-font-size:1.125rem;--e-global-typography-m4yh5-font-weight:600;--e-global-typography-m4yh5-line-height:1.3;--e-global-typography-m4yh6-font-family:"Raleway";--e-global-typography-m4yh6-font-size:1rem;--e-global-typography-m4yh6-font-weight:600;--e-global-typography-m4yh6-line-height:1.4;--e-global-typography-m4ytile-font-family:"Raleway";--e-global-typography-m4ytile-font-size:clamp(1.35rem, 1.1rem + 1vw, 2.1rem);--e-global-typography-m4ytile-font-weight:600;--e-global-typography-m4ytile-line-height:1.1;--e-global-typography-m4ytile-letter-spacing:0.015em;--e-global-typography-m4yscriptsm-font-family:"Great Vibes";--e-global-typography-m4yscriptsm-font-size:clamp(1.55rem, 2.6vw, 2.4rem);--e-global-typography-m4yscriptsm-font-weight:400;--e-global-typography-m4yscriptsm-line-height:1.36;--e-global-typography-m4yscriptsm-letter-spacing:0em;--e-global-typography-m4yeyebrow-font-family:"Roboto";--e-global-typography-m4yeyebrow-font-size:.72rem;--e-global-typography-m4yeyebrow-font-weight:500;--e-global-typography-m4yeyebrow-text-transform:uppercase;--e-global-typography-m4yeyebrow-line-height:1.5;--e-global-typography-m4yeyebrow-letter-spacing:0.28em;--e-global-typography-m4ykicker-font-family:"Roboto";--e-global-typography-m4ykicker-font-size:.72rem;--e-global-typography-m4ykicker-font-weight:500;--e-global-typography-m4ykicker-text-transform:uppercase;--e-global-typography-m4ykicker-line-height:1.5;--e-global-typography-m4ykicker-letter-spacing:0.26em;--e-global-typography-m4ysmall-font-family:"Roboto";--e-global-typography-m4ysmall-font-size:clamp(.875rem, .85rem + .1vw, .95rem);--e-global-typography-m4ysmall-font-weight:400;--e-global-typography-m4ysmall-line-height:1.72;--e-global-typography-m4ylead-font-family:"Roboto";--e-global-typography-m4ylead-font-size:clamp(1.08rem, 1rem + .45vw, 1.34rem);--e-global-typography-m4ylead-font-weight:400;--e-global-typography-m4ylead-line-height:1.66;--e-global-typography-m4ynav-font-family:"Roboto";--e-global-typography-m4ynav-font-size:1.02rem;--e-global-typography-m4ynav-font-weight:400;--e-global-typography-m4ynav-line-height:1.4;--e-global-typography-m4ynavmobile-font-family:"Raleway";--e-global-typography-m4ynavmobile-font-size:clamp(1.45rem, 6vw, 1.95rem);--e-global-typography-m4ynavmobile-font-weight:500;--e-global-typography-m4ynavmobile-line-height:1.2;--e-global-typography-m4ybrand-font-family:"Raleway";--e-global-typography-m4ybrand-font-size:.95rem;--e-global-typography-m4ybrand-font-weight:600;--e-global-typography-m4ybrand-line-height:1.2;--e-global-typography-m4ybrand-letter-spacing:0.2em;--e-global-typography-m4ychip-font-family:"Roboto";--e-global-typography-m4ychip-font-size:.78rem;--e-global-typography-m4ychip-font-weight:500;--e-global-typography-m4ychip-text-transform:uppercase;--e-global-typography-m4ychip-line-height:1.4;--e-global-typography-m4ychip-letter-spacing:0.14em;--e-global-typography-m4yreelword-font-family:"Raleway";--e-global-typography-m4yreelword-font-size:clamp(2.6rem, 6.2vw, 6rem);--e-global-typography-m4yreelword-font-weight:600;--e-global-typography-m4yreelword-text-transform:uppercase;--e-global-typography-m4yreelword-line-height:1.1;--e-global-typography-m4yreelword-letter-spacing:0.04em;--e-global-typography-m4yreelscript-font-family:"Great Vibes";--e-global-typography-m4yreelscript-font-size:clamp(2.6rem, 5.6vw, 5.4rem);--e-global-typography-m4yreelscript-font-weight:400;--e-global-typography-m4yreelscript-line-height:1.25;--e-global-typography-m4yreelscript-letter-spacing:0em;--e-global-typography-m4yreelslash-font-family:"Raleway";--e-global-typography-m4yreelslash-font-size:clamp(2.2rem, 5vw, 5rem);--e-global-typography-m4yreelslash-font-weight:300;--e-global-typography-m4yreelslash-line-height:1.1;--e-global-typography-m4ycard-font-family:"Raleway";--e-global-typography-m4ycard-font-size:clamp(.95rem, .85rem + .55vw, 1.4rem);--e-global-typography-m4ycard-font-weight:600;--e-global-typography-m4ycard-text-transform:uppercase;--e-global-typography-m4ycard-line-height:1.2;--e-global-typography-m4ycard-letter-spacing:0.12em;--e-global-typography-m4yticker-font-family:"Roboto";--e-global-typography-m4yticker-font-size:.98rem;--e-global-typography-m4yticker-font-weight:400;--e-global-typography-m4yticker-line-height:1.2;--e-global-typography-m4yticker-letter-spacing:0.04em;--e-global-typography-m4ycaption-font-family:"Roboto";--e-global-typography-m4ycaption-font-size:.72rem;--e-global-typography-m4ycaption-font-weight:400;--e-global-typography-m4ycaption-text-transform:uppercase;--e-global-typography-m4ycaption-line-height:1.5;--e-global-typography-m4ycaption-letter-spacing:0.18em;--e-global-typography-m4ylogo-font-family:"Great Vibes";--e-global-typography-m4ylogo-font-size:clamp(1.85rem, 1.45rem + 1vw, 2.4rem);--e-global-typography-m4ylogo-font-weight:400;--e-global-typography-m4ylogo-line-height:1.2;--e-global-typography-m4ylogo-letter-spacing:0em;background-color:var( --e-global-color-m4ybg );color:var( --e-global-color-text );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 );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-primary );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 );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-text );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:2px 2px 2px 2px;padding:.78rem 1.85rem .78rem 1.85rem;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-text );}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-accent );}.elementor-kit-4 a:hover{color:var( --e-global-color-text );}.elementor-kit-4 h1{color:var( --e-global-color-text );font-family:var( --e-global-typography-m4yh1-font-family ), Sans-serif;font-size:var( --e-global-typography-m4yh1-font-size );font-weight:var( --e-global-typography-m4yh1-font-weight );line-height:var( --e-global-typography-m4yh1-line-height );letter-spacing:var( --e-global-typography-m4yh1-letter-spacing );}.elementor-kit-4 h2{color:var( --e-global-color-text );font-family:var( --e-global-typography-m4yh2-font-family ), Sans-serif;font-size:var( --e-global-typography-m4yh2-font-size );font-weight:var( --e-global-typography-m4yh2-font-weight );line-height:var( --e-global-typography-m4yh2-line-height );letter-spacing:var( --e-global-typography-m4yh2-letter-spacing );}.elementor-kit-4 h3{color:var( --e-global-color-text );font-family:var( --e-global-typography-m4yh3-font-family ), Sans-serif;font-size:var( --e-global-typography-m4yh3-font-size );font-weight:var( --e-global-typography-m4yh3-font-weight );line-height:var( --e-global-typography-m4yh3-line-height );}.elementor-kit-4 h4{color:var( --e-global-color-text );font-family:var( --e-global-typography-m4yh4-font-family ), Sans-serif;font-size:var( --e-global-typography-m4yh4-font-size );font-weight:var( --e-global-typography-m4yh4-font-weight );line-height:var( --e-global-typography-m4yh4-line-height );}.elementor-kit-4 h5{color:var( --e-global-color-text );font-family:var( --e-global-typography-m4yh5-font-family ), Sans-serif;font-size:var( --e-global-typography-m4yh5-font-size );font-weight:var( --e-global-typography-m4yh5-font-weight );line-height:var( --e-global-typography-m4yh5-line-height );}.elementor-kit-4 h6{color:var( --e-global-color-text );font-family:var( --e-global-typography-m4yh6-font-family ), Sans-serif;font-size:var( --e-global-typography-m4yh6-font-size );font-weight:var( --e-global-typography-m4yh6-font-weight );line-height:var( --e-global-typography-m4yh6-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1560px;}.e-con{--container-max-width:1560px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{background-color:rgba(10, 6, 9, 0.96);--lightbox-ui-color:#FFF7FA;--lightbox-ui-color-hover:#F08DB5;--lightbox-text-color:#CDBAC3;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-4{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-4 h1{font-size:var( --e-global-typography-m4yh1-font-size );line-height:var( --e-global-typography-m4yh1-line-height );letter-spacing:var( --e-global-typography-m4yh1-letter-spacing );}.elementor-kit-4 h2{font-size:var( --e-global-typography-m4yh2-font-size );line-height:var( --e-global-typography-m4yh2-line-height );letter-spacing:var( --e-global-typography-m4yh2-letter-spacing );}.elementor-kit-4 h3{font-size:var( --e-global-typography-m4yh3-font-size );line-height:var( --e-global-typography-m4yh3-line-height );}.elementor-kit-4 h4{font-size:var( --e-global-typography-m4yh4-font-size );line-height:var( --e-global-typography-m4yh4-line-height );}.elementor-kit-4 h5{font-size:var( --e-global-typography-m4yh5-font-size );line-height:var( --e-global-typography-m4yh5-line-height );}.elementor-kit-4 h6{font-size:var( --e-global-typography-m4yh6-font-size );line-height:var( --e-global-typography-m4yh6-line-height );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .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 );}}@media(max-width:1024px){.elementor-kit-4{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-4 h1{font-size:var( --e-global-typography-m4yh1-font-size );line-height:var( --e-global-typography-m4yh1-line-height );letter-spacing:var( --e-global-typography-m4yh1-letter-spacing );}.elementor-kit-4 h2{font-size:var( --e-global-typography-m4yh2-font-size );line-height:var( --e-global-typography-m4yh2-line-height );letter-spacing:var( --e-global-typography-m4yh2-letter-spacing );}.elementor-kit-4 h3{font-size:var( --e-global-typography-m4yh3-font-size );line-height:var( --e-global-typography-m4yh3-line-height );}.elementor-kit-4 h4{font-size:var( --e-global-typography-m4yh4-font-size );line-height:var( --e-global-typography-m4yh4-line-height );}.elementor-kit-4 h5{font-size:var( --e-global-typography-m4yh5-font-size );line-height:var( --e-global-typography-m4yh5-line-height );}.elementor-kit-4 h6{font-size:var( --e-global-typography-m4yh6-font-size );line-height:var( --e-global-typography-m4yh6-line-height );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .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-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{--e-global-typography-m4yhero-letter-spacing:0.035em;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-4 h1{font-size:var( --e-global-typography-m4yh1-font-size );line-height:var( --e-global-typography-m4yh1-line-height );letter-spacing:var( --e-global-typography-m4yh1-letter-spacing );}.elementor-kit-4 h2{font-size:var( --e-global-typography-m4yh2-font-size );line-height:var( --e-global-typography-m4yh2-line-height );letter-spacing:var( --e-global-typography-m4yh2-letter-spacing );}.elementor-kit-4 h3{font-size:var( --e-global-typography-m4yh3-font-size );line-height:var( --e-global-typography-m4yh3-line-height );}.elementor-kit-4 h4{font-size:var( --e-global-typography-m4yh4-font-size );line-height:var( --e-global-typography-m4yh4-line-height );}.elementor-kit-4 h5{font-size:var( --e-global-typography-m4yh5-font-size );line-height:var( --e-global-typography-m4yh5-line-height );}.elementor-kit-4 h6{font-size:var( --e-global-typography-m4yh6-font-size );line-height:var( --e-global-typography-m4yh6-line-height );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .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-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================================= MELLY4YOU · Website-Einstellungen → Custom CSS (Elementor-Kit, ganze Website) ----------------------------------------------------------------------------- Stand 08.10.2026 · klassischer Elementor-Aufbau (V3, Container + Widgets) 08.10.: Galerie-Karten: Hover „Samtvorhang“ statt pinker Fläche, Kategorie nur noch im Hover (Beschriftung + Verlauf ausgeblendet); Bildreihen-Vorhang per transform statt clip-path (flüssiger) 08.10.: Pausentasten der Laufbänder entfernt (Nutzerwunsch) 08.10.: Eckenradius 15 px für eingebundene Fotos (Token --m4y-radius-media) 08.10.: Abschnitt 20 „Unterseiten“ (Seitenkopf, Haarlinie, Textlink …), Abschnitt 21 „Galerie“ (Pro-Widget Galerie: Filter, Einblendung), Abschnitt 22 „Formulare“ (Pro-Widget Formular im Panel), Abschnitt 23 „404“ (Theme-Builder-Vorlage „Seite nicht gefunden“) Quelle: docs/elementor-v3/site-settings-custom-css.css Nur, was native Elementor-Einstellungen nicht leisten: Animationen (Keyframes), Zustände des Verhaltensskripts (.m4y-js / .m4y-motion / .is-…), Ebenen und Verläufe mit mehreren Stopps, Laufbänder, Hover- Vorhänge, Hoch-/Querformat, „Bewegung reduzieren“. Farben ....... Website-Einstellungen → Globale Farben → var(--e-global-color-…) Schriften .... Website-Einstellungen → Globale Schriften → var(--e-global-typography-…) Verhalten .... Elementor → Custom Code „Melly4You – Verhalten“ Breakpoints .. wie in Elementor: Mobil ≤ 767 · Tablet hoch ≤ 1024 · Tablet quer ≤ 1200 · Laptop ≤ 1366 · Desktop darüber. Keine anderen Breitenwerte verwenden. Klassen ...... werden im Editor unter Erweitert → CSS-Klassen gesetzt (Präfix m4y-). Übersicht: docs/ELEMENTOR-MCP-UMSETZUNG.md ========================================================================== */ /* ------------------------------------------------------------ 01 Tokens -- Abstände, Höhen, Kurven. Viele davon stehen auch direkt in Elementor- Feldern (Einheit „Benutzerdefiniert“, z. B. var(--m4y-gutter)). */ :root { --m4y-header-h: 70px; --m4y-ticker-h: 78px; --m4y-hero-h: 100vh; --m4y-hero-min: 520px; --m4y-gutter: clamp(1.25rem, 4vw, 3.5rem); --m4y-section-y: clamp(4.25rem, 7.5vw, 9rem); --m4y-gap-s: .875rem; --m4y-gap-m: 1.5rem; --m4y-gap-l: clamp(1.75rem, 3vw, 3rem); --m4y-gap-xl: clamp(2.5rem, 5vw, 5.5rem); --m4y-reel-gap: clamp(.75rem, 2vw, 2rem); --m4y-reel-shift-max: 120px; --m4y-ease: cubic-bezier(.22, .61, .36, 1); --m4y-ease-out: cubic-bezier(.16, 1, .3, 1); --m4y-ease-curtain: cubic-bezier(.77, 0, .175, 1); --m4y-ease-back: cubic-bezier(.34, 1.56, .64, 1); --m4y-curtain-ms: 800ms; /* = SETTINGS.curtainMs im Verhaltensskript */ --m4y-mask-ms: 1300ms; --m4y-intro: 1; /* Faktor aller Intro-Verzögerungen */ --m4y-radius-media: 15px; /* Eckenradius eingebundener Fotos (nicht Hero/Seitenkopf/Banner) */ } @supports (height: 100svh) { :root { --m4y-hero-h: 100svh; } /* stabile Höhe trotz mobiler Adressleiste */ } @media (max-width: 767px) { :root { --m4y-header-h: 62px; --m4y-ticker-h: 66px; --m4y-hero-min: 480px; } } /* Zweite Seite derselben Sitzung: Intro läuft verkürzt (Skript setzt die Klasse) */ .m4y-intro-short { --m4y-intro: .45; } /* ------------------------------------------------------------- 02 Basis -- */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--m4y-header-h) + 1.5rem); } body { overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--e-global-color-primary); color: var(--e-global-color-text); } :focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; } /* Screenreader-Hinweis „(öffnet in neuem Tab)“ – vom Skript erzeugt */ .m4y-sr-hint { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Texteditor: kein Abstand nach dem letzten Absatz; Überschriften ausgewogen */ .elementor-widget-text-editor p:last-child { margin-bottom: 0; } .elementor-widget-heading :is(h1, h2).elementor-heading-title { text-wrap: balance; } /* --------------------------------------------------------- 03 Textbausteine -- m4y-script ..... Great-Vibes-Zeile (Raum für Ober- und Unterlängen) m4y-eyebrow .... Icon-Liste mit Linien-Icon über Überschriften m4y-chips ...... Icon-Liste ohne Icons als Merkmal-Pillen */ .m4y-script .elementor-heading-title { padding-block: .06em .12em; } .m4y-eyebrow .elementor-icon-list-icon svg { opacity: .85; } .m4y-chips .elementor-icon-list-items { gap: .5rem .55rem; } .m4y-chips .elementor-icon-list-item { padding: .42rem .95rem; border: 1px solid var(--e-global-color-m4yline); border-radius: 999px; } .m4y-chips .elementor-icon-list-icon { display: none; } /* Bildflächen mit festem Seitenverhältnis (Bild-Widget, Klasse am Widget). Ein späteres Originalfoto füllt dieselbe Fläche – kein Umbau nötig. */ .elementor-widget-image.m4y-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--e-global-color-m4ysurf2); border: 1px solid var(--e-global-color-m4ylinesoft); border-radius: var(--m4y-radius-media); } .elementor-widget-image.m4y-media--4-5 img { aspect-ratio: 4 / 5; } /* Wortmarke „MELLY4YOU“ – die „4“ steht im Titel als */ .m4y-brand-name .elementor-heading-title span { color: var(--e-global-color-secondary); } /* ------------------------------------------------------------ 04 Buttons -- Farben, Rahmen, Schrift: Website-Einstellungen → Buttons bzw. im Widget. Hier nur Mindesthöhe (Touch), Icon-Größe und die runde Sonderform. */ body .elementor-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } body .elementor-button .elementor-button-content-wrapper { gap: .6rem; align-items: center; } body .elementor-button .elementor-button-icon svg { width: 1.15em; height: 1.15em; } body .elementor-button:active { transform: translateY(1px); } /* Rundbutton „Galerie“: Pfeil über dem Text */ .m4y-btn-round .elementor-button { flex-direction: column; width: clamp(88px, 8vw, 108px); aspect-ratio: 1; min-height: 0; padding: 0; border: 0; border-radius: 50%; box-shadow: 0 0 0 6px var(--e-global-color-m4ybg); } .m4y-btn-round .elementor-button-content-wrapper { flex-direction: column; gap: .25rem; } .m4y-btn-round .elementor-button-icon svg { width: 22px; height: 22px; } /* ------------------------------------------------------------ 05 Header -- Klebt auf allen Seiten oben. Auf Seiten mit Vollbild-Hero (.m4y-hero) liegt er transparent darüber und wird deckend, sobald der Hero vorbei ist (.is-solid vom Skript). Am Desktop erscheint die Wortmarke erst dann. */ .elementor-location-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; } body:has(.m4y-hero) .elementor-location-header { position: fixed; left: 0; right: 0; } html:not(.m4y-js) body:has(.m4y-hero) .elementor-location-header { position: absolute; top: 0; } .e-con.m4y-header { transition: background-color 500ms var(--m4y-ease), border-color 500ms var(--m4y-ease); } body:has(.m4y-hero) .e-con.m4y-header:not(.is-solid) { background-color: transparent; border-bottom-color: transparent; } /* Navigation mittig (unabhängig von Logo und Menü-Taste); Breite = Inhalt, kein Umbruch in eine zweite Zeile. */ .elementor-widget.m4y-nav { position: absolute; left: 50%; translate: -50% 0; width: max-content; } .m4y-nav .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; } @media (min-width: 1025px) { .m4y-js body:has(.m4y-hero) .m4y-brand { transition: opacity 300ms var(--m4y-ease), transform 300ms var(--m4y-ease), visibility 300ms; } .m4y-js body:has(.m4y-hero) .m4y-header:not(.is-solid) .m4y-brand:not(:focus-visible) { opacity: 0; visibility: hidden; transform: translateY(-4px); } } /* Off-Canvas-Menü: Trennlinien zwischen den Menüpunkten */ .m4y-oc-nav .elementor-nav-menu > li + li { border-top: 1px solid var(--e-global-color-m4ylinesoft); } .m4y-oc-close .elementor-button { min-width: 44px; min-height: 44px; padding: 0; } /* -------------------------------------------------------- 06 Plattform-Links -- Eine Pflegestelle: Template „GLOBAL | Plattform-Links“ (Icon-Liste). Darstellung je Einsatzort über die Klasse am Template-Widget: m4y-pf--ticker (Leiste) · m4y-pf--badges (Menü) · m4y-pf--footer (Footer). Der erste Eintrag ist die Schwerpunkt-Plattform (OnlyFans). */ .m4y-pf .elementor-icon-list-item > a { transition: color 300ms var(--m4y-ease), border-color 300ms var(--m4y-ease); } /* Leiste */ .m4y-pf--ticker .elementor-icon-list-items { flex-wrap: nowrap; } .m4y-pf--ticker .elementor-icon-list-item { margin: 0; } .m4y-pf--ticker .elementor-icon-list-item > a { height: var(--m4y-ticker-h); padding-inline: clamp(1.4rem, 3vw, 2.6rem); gap: .7rem; white-space: nowrap; } .m4y-pf--ticker .elementor-icon-list-icon svg { width: 23px; height: 23px; } .m4y-pf--ticker .elementor-icon-list-item > a:hover { color: var(--e-global-color-accent); } /* Menü-Badges */ .m4y-pf--badges .elementor-icon-list-items { flex-wrap: wrap; gap: .55rem; } .m4y-pf--badges .elementor-icon-list-item { margin: 0; } .m4y-pf--badges .elementor-icon-list-item > a { min-height: 40px; padding: .4rem .8rem; gap: .45rem; border: 1px solid var(--e-global-color-m4yline); border-radius: 2px; font-size: .82rem; } .m4y-pf--badges .m4y-pf-list .elementor-icon-list-item > a .elementor-icon-list-text { color: var(--e-global-color-m4ymuted); } .m4y-pf--badges .elementor-icon-list-icon svg { width: 15px; height: 15px; opacity: .85; } .m4y-pf--badges .elementor-icon-list-item > a:hover { border-color: var(--e-global-color-m4ylinerose); } .m4y-pf--badges .m4y-pf-list .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: var(--e-global-color-text); } .m4y-pf--badges .elementor-icon-list-item:first-child > a { border-color: var(--e-global-color-m4ylinerose); } .m4y-pf--badges .m4y-pf-list .elementor-icon-list-item:first-child > a .elementor-icon-list-text { color: var(--e-global-color-text); } /* Footer-Liste */ .m4y-pf--footer .elementor-icon-list-items { flex-direction: column; align-items: flex-start; gap: .55rem; } .m4y-pf--footer .elementor-icon-list-item { margin: 0; } .m4y-pf--footer .elementor-icon-list-item > a { gap: .6rem; font-size: var(--e-global-typography-m4ysmall-font-size); } .m4y-pf--footer .m4y-pf-list .elementor-icon-list-item > a .elementor-icon-list-text { color: var(--e-global-color-m4ymuted); } .m4y-pf--footer .elementor-icon-list-icon svg { width: 16px; height: 16px; opacity: .72; } .m4y-pf--footer .m4y-pf-list .elementor-icon-list-item > a:hover .elementor-icon-list-text, .m4y-pf--footer .m4y-pf-list .elementor-icon-list-item:first-child > a .elementor-icon-list-text { color: var(--e-global-color-text); } /* -------------------------------------------------------------- 07 Hero -- Ebenen: Bildebene > Zoom (Scroll) > Intro-Ebene > zwei Bild-Widgets (Quer-/Hochformat). Verlauf und Abdunkeln liegen als ::after/::before auf der Bildebene. Das Skript setzt --m4y-hero-p / -zoom / -dim. */ .e-con.m4y-hero { isolation: isolate; } .e-con.m4y-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; padding: 0; } .e-con.m4y-hero-zoom { position: absolute; inset: 0; padding: 0; transform: scale(var(--m4y-hero-zoom, 1)); transform-origin: 50% 35%; /* bewusst ohne will-change – sonst wirkt das Bild weich */ } .e-con.m4y-hero-pic { position: absolute; inset: 0; padding: 0; } .m4y-hero-img { position: absolute; inset: 0; } .elementor-widget-image.m4y-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; } .elementor-widget-image.m4y-hero-img.m4y-show-portrait img { object-position: 50% 40%; } .e-con.m4y-hero-media::after, .e-con.m4y-hero-media::before { content: ''; position: absolute; inset: 0; pointer-events: none; } .e-con.m4y-hero-media::after { /* Lesbarkeit – das Motiv selbst bleibt unverändert */ z-index: 2; background: linear-gradient(to bottom, rgba(16, 10, 15, .66) 0%, rgba(16, 10, 15, .12) 18%, rgba(16, 10, 15, 0) 44%, rgba(16, 10, 15, .34) 70%, rgba(16, 10, 15, .9) 100%); } .e-con.m4y-hero-media::before { /* leichtes Abdunkeln beim Wegscrollen */ z-index: 3; background: var(--e-global-color-m4ybg); opacity: var(--m4y-hero-dim, 0); } .e-con.m4y-hero-content { position: relative; z-index: 2; transform: translate3d(0, calc(var(--m4y-hero-p, 0) * -70px), 0); opacity: calc(1 - var(--m4y-hero-p, 0) * 1.4); } /* Bild nach Ausrichtung des Bildschirms (kein Breiten-Breakpoint) */ @media (orientation: portrait) { .m4y-show-landscape { display: none; } } @media (orientation: landscape) { .m4y-show-portrait { display: none; } } /* ------------------------------------------------------ 08 Vorhang-Reveal -- Hero + Plattformleiste (.m4y-lift-curtain) scrollen weg, die Bühne (.m4y-lift-stage) bleibt darunter stehen. Reines CSS (sticky), kein Scroll-Hijacking. --m4y-curtain-size misst das Skript nach. */ .e-con.m4y-lift-curtain { z-index: 3; } .e-con.m4y-lift-stage { z-index: 1; } @media (prefers-reduced-motion: no-preference) { .m4y-js .e-con.m4y-lift-stage { position: sticky; top: 0; margin-top: calc(var(--m4y-curtain-size, 0px) * -1); padding-top: var(--m4y-header-h); } .m4y-js .e-con.m4y-lift::after { content: ''; display: block; height: var(--m4y-curtain-size, 0px); } } /* ---------------------------------------------------------- 09 Laufbänder -- Plattformleiste, Galerie-Banner (Reihen + Laufschrift). Klone und Dauer (--m4y-marquee-s) erzeugt das Skript. Hover/Fokus pausiert Leiste bzw. Reihe; außerhalb des Sichtbereichs ruhen sie (Skript). Pausentasten seit 08.10.2026 entfernt (Nutzerwunsch) – Hinweis WCAG 2.2.2 in der Doku. */ .e-con.m4y-ticker { position: relative; overflow: hidden; } .e-con.m4y-ticker-viewport { overflow: hidden; } .e-con.m4y-marquee-track { width: max-content; flex-wrap: nowrap; } .e-con.m4y-marquee-group { width: max-content; flex-wrap: nowrap; flex-shrink: 0; } .m4y-motion .e-con.m4y-marquee-track { animation: m4y-marquee var(--m4y-marquee-s, 30s) linear infinite; } .m4y-motion .m4y-marquee-reverse .e-con.m4y-marquee-track { animation-direction: reverse; } .m4y-ticker:is(:hover, :focus-within) .m4y-marquee-track, .m4y-reel-row:is(:hover, :focus-within) .m4y-marquee-track, .is-paused .m4y-marquee-track, .is-auto-paused .m4y-marquee-track { animation-play-state: paused; } @keyframes m4y-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* Ohne Bewegung: ruhende, umbrechende Leiste; seitlich scrollbare Bildreihen */ html:not(.m4y-motion) .m4y-ticker :is(.m4y-marquee-track, .m4y-marquee-group) { width: 100%; } html:not(.m4y-motion) .m4y-ticker .elementor-icon-list-items { flex-wrap: wrap; justify-content: center; } html:not(.m4y-motion) .e-con.m4y-reel-row { overflow-x: auto; } html:not(.m4y-motion) .e-con.m4y-reel-shift { margin-left: 0; transform: none; } /* ------------------------------------------------------ 10 Galerie-Banner -- Laufschrift, zwei gegenläufige Bildreihen, Karten mit Hover-„Samtvorhang“ (seit 08.10.2026 statt der pinken Fläche): ein dunkler, durchscheinender Schleier fällt von oben – mit feiner Rosé-Kante wie beim Seitenwechsel –, das Foto bleibt sichtbar und kommt leicht näher; danach Ring mit Pfeil, Kategorie und „Bild ansehen“ in Schreibschrift (vom Skript als Dekoration ergänzt). Rundbutton mittig auf der Unterkante. */ .e-con.m4y-reel { position: relative; overflow: hidden; } .e-con.m4y-reel-headline { overflow: hidden; white-space: nowrap; } .m4y-reel-word-script .elementor-heading-title { padding-block: .08em .14em; } .e-con.m4y-reel-rows { position: relative; } .e-con.m4y-reel-row { overflow: hidden; } .e-con.m4y-reel-shift { margin-left: calc(var(--m4y-reel-shift-max) * -1); transform: translate3d(var(--m4y-reel-shift, 0px), 0, 0); will-change: transform; } /* Vorhang der Bildreihen (08.10.2026): statt clip-path auf der breiten, beim Scrollen verschobenen Reihe (wird jedes Bild neu gezeichnet – am Handy stockend) eine deckende Ebene in Hintergrundfarbe, die per transform wegfährt (läuft auf der Grafikkarte). Optisch gleich: m4y-mask-up öffnet von unten nach oben, m4y-mask-down von oben nach unten. */ .m4y-motion .m4y-reel .e-con.m4y-reel-shift:is(.m4y-mask-down, .m4y-mask-up) { clip-path: none; transition: none; } .m4y-reel .e-con.m4y-reel-shift::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--e-global-color-m4ybg); transform: scaleY(0); transform-origin: 50% 0; } .m4y-reel .e-con.m4y-reel-shift.m4y-mask-down::after { transform-origin: 50% 100%; } .m4y-motion .m4y-reel .e-con.m4y-reel-shift::after { transition: transform var(--m4y-mask-ms) var(--m4y-ease-curtain); transition-delay: var(--m4y-mask-delay, 0ms); } .m4y-motion .m4y-reel .e-con.m4y-reel-shift:not(.is-open):not(:focus-within)::after { transform: scaleY(1); } /* Karte (Container als Link) */ .e-con.m4y-reel-card { position: relative; flex: 0 0 auto; aspect-ratio: 4 / 5; margin-right: var(--m4y-reel-gap); overflow: hidden; isolation: isolate; border-radius: var(--m4y-radius-media); background: var(--e-global-color-m4ysurf2); text-decoration: none; } .m4y-reel-card-img { position: absolute; inset: 0; } .elementor-widget-image.m4y-reel-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--m4y-ease-out); } /* Beschriftung (Kategorie) seit 08.10.2026 nur noch im Hover sichtbar – auf der Website ausgeblendet, im Editor sichtbar (Pflegestelle: das Skript übernimmt den Text in den Hover). Der frühere Verlauf am unteren Rand entfällt mit ihr. */ body:not(.elementor-editor-active) .m4y-reel-card-label { display: none; } .m4y-reel-card-label { position: absolute; left: clamp(.9rem, 1.6vw, 1.4rem); right: clamp(.9rem, 1.6vw, 1.4rem); bottom: clamp(.9rem, 1.6vw, 1.3rem); z-index: 2; transition: opacity 300ms var(--m4y-ease); } .m4y-reel-hover { /* vom Skript ergänzt, aria-hidden */ position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: .9rem; padding: clamp(1rem, 1.8vw, 1.6rem); color: var(--e-global-color-text); pointer-events: none; } .m4y-reel-hover::before { /* Samtvorhang: dunkler Schleier + Rosé-Kante, fällt von oben */ content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--e-global-color-primary), var(--e-global-color-accent)) bottom / 100% 2px no-repeat, radial-gradient(110% 60% at 12% 100%, rgba(194, 24, 91, .28), transparent 62%), linear-gradient(180deg, rgba(16, 10, 15, .12) 0%, rgba(16, 10, 15, .45) 45%, rgba(16, 10, 15, .9) 100%); transform: translate3d(0, -101%, 0); transition: transform 800ms var(--m4y-ease-curtain) 80ms; } .m4y-reel-hover-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 247, 250, .55); background: rgba(16, 10, 15, .28); color: var(--e-global-color-text); opacity: 0; transform: translateY(-8px); transition: opacity 400ms var(--m4y-ease), transform 600ms var(--m4y-ease-out), border-color 300ms var(--m4y-ease); } .m4y-reel-hover-icon svg { width: 18px; height: 18px; } .m4y-reel-hover-kicker, .m4y-reel-hover-title { display: block; opacity: 0; transform: translateY(-10px); transition: opacity 400ms var(--m4y-ease), transform 600ms var(--m4y-ease-out); } .m4y-reel-hover-kicker { font-family: var(--e-global-typography-m4ykicker-font-family), sans-serif; font-size: var(--e-global-typography-m4ykicker-font-size); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--e-global-color-m4ymuted); } .m4y-reel-hover-title { margin-top: .1rem; padding-block: .06em .12em; font-family: var(--e-global-typography-secondary-font-family), cursive; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.5rem); font-weight: 400; line-height: 1.2; color: var(--e-global-color-accent); text-shadow: 0 2px 16px rgba(8, 4, 7, .6); } @media (hover: hover) { .m4y-reel-card:hover .m4y-reel-card-label { opacity: 0; } .m4y-reel-card:hover .m4y-reel-hover::before { transform: none; transition-delay: 0ms; } .m4y-reel-card:hover .elementor-widget-image.m4y-reel-card-img img { transform: scale(1.06); } .m4y-reel-card:hover :is(.m4y-reel-hover-kicker, .m4y-reel-hover-title) { opacity: 1; transform: none; transition-delay: 380ms; } .m4y-reel-card:hover .m4y-reel-hover-icon { opacity: 1; transform: none; border-color: var(--e-global-color-accent); transition-delay: 480ms; } } .m4y-reel-card:focus-visible { outline-offset: -3px; } .m4y-reel-card:focus-visible .m4y-reel-card-label { opacity: 0; } .m4y-reel-card:focus-visible .m4y-reel-hover::before { transform: none; transition-delay: 0ms; } .m4y-reel-card:focus-visible :is(.m4y-reel-hover-kicker, .m4y-reel-hover-title, .m4y-reel-hover-icon) { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .elementor-widget-image.m4y-reel-card-img img { transition: none; } } /* Rundbutton mittig auf der Unterkante der Reihen */ .e-con.m4y-reel-more { position: absolute; left: 50%; bottom: 0; z-index: 6; width: auto; transform: translate(-50%, 84%); } /* ---------------------------------------------------- 11 Plattform-Kacheln -- Kachel = Container als Link. Bild füllt die Fläche, Schleier und Akzentlinie sind ::before/::after. Schwerpunkt-Kachel (OnlyFans) über 2 × 2 Rasterfelder – Spalten/Zeilen im Editor (Raster-Element). */ .e-con.m4y-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; border: 1px solid var(--e-global-color-m4ylinesoft); border-radius: var(--m4y-radius-media); background: var(--e-global-color-m4ysurf2); text-decoration: none; } .e-con.m4y-tile--featured { aspect-ratio: auto; min-height: 100%; } @media (max-width: 1024px) { .e-con.m4y-tile--featured { aspect-ratio: 16 / 9; } } @media (max-width: 767px) { .e-con.m4y-tile--featured { aspect-ratio: 4 / 5; max-height: 560px; } } .m4y-tile-img { position: absolute; inset: 0; } .elementor-widget-image.m4y-tile-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.005); transition: transform 320ms var(--m4y-ease); } .e-con.m4y-tile::before { /* Schleier für die Lesbarkeit */ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(12, 7, 11, .88) 0%, rgba(12, 7, 11, .5) 34%, rgba(12, 7, 11, .12) 62%, rgba(12, 7, 11, .28) 100%); transition: opacity 320ms var(--m4y-ease); } .e-con.m4y-tile::after { /* Akzentlinie unten */ content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 2px; background: linear-gradient(90deg, var(--e-global-color-primary), var(--e-global-color-secondary)); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--m4y-ease-out); } .e-con.m4y-tile-body { position: absolute; z-index: 2; left: clamp(1.15rem, 2.2vw, 1.85rem); right: clamp(1.15rem, 2.2vw, 1.85rem); bottom: clamp(1.1rem, 2.1vw, 1.7rem); width: auto; } .m4y-tile-kicker .elementor-heading-title { transition: color 320ms var(--m4y-ease); } .m4y-tile-name .elementor-icon-box-icon { display: inline-flex; } .m4y-tile-cta .elementor-heading-title { /* sieht aus wie ein Button, ist Teil des Kachel-Links */ display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .7rem 1.4rem; background: var(--e-global-color-primary); border-radius: 2px; transition: background-color 300ms var(--m4y-ease); } @media (hover: hover) { .m4y-tile:hover .elementor-widget-image.m4y-tile-img img { transform: scale(1.045); } .m4y-tile:hover::before { opacity: .82; } .m4y-tile:hover::after { transform: scaleX(1); } .m4y-tile:hover .m4y-tile-kicker .elementor-heading-title { color: var(--e-global-color-secondary); } .m4y-tile:hover .m4y-tile-cta .elementor-heading-title { background: var(--e-global-color-secondary); } } .m4y-tile:focus-visible { outline-offset: -3px; } .m4y-tile:focus-visible::after { transform: scaleX(1); } /* Social-Links unter den Kacheln */ .m4y-social .elementor-icon-list-items { gap: .55rem; } .m4y-social .elementor-icon-list-item { margin: 0; } .m4y-social .elementor-icon-list-item > a { min-height: 44px; padding: .45rem 1rem; gap: .5rem; border: 1px solid var(--e-global-color-m4yline); border-radius: 2px; transition: border-color 300ms var(--m4y-ease); } .m4y-social .elementor-icon-list-item > a:hover { border-color: var(--e-global-color-m4ylinerose); } /* -------------------------------------------- 12 Banner „Für Creatorinnen“ -- Drei Ebenen mit Hintergrundbild (Foto, Schleier, Ornament) + Verlauf. Parallax ab 1201 px über --m4y-layer-y (Skript). */ .e-con.m4y-banner { position: relative; overflow: hidden; isolation: isolate; } .e-con.m4y-banner-layer { position: absolute; inset: -6% 0; z-index: 0; padding: 0; /* Bildreserve gegen freie Kanten */ transform: translate3d(0, var(--m4y-layer-y, 0px), 0); will-change: transform; } .e-con.m4y-banner-layer--veil { mix-blend-mode: screen; opacity: .9; } .e-con.m4y-banner-layer--deco { opacity: .55; } .e-con.m4y-banner::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(16, 10, 15, .88) 0%, rgba(16, 10, 15, .7) 40%, rgba(16, 10, 15, .3) 70%, rgba(16, 10, 15, .5) 100%); } .e-con.m4y-banner-inner { position: relative; z-index: 2; } @media (max-width: 767px) { .e-con.m4y-banner::after { background: linear-gradient(to bottom, rgba(16, 10, 15, .55) 0%, rgba(16, 10, 15, .78) 45%, rgba(16, 10, 15, .94) 100%); } } /* ---------------------------------------------------------- 13 Abschluss -- Feine Verlaufslinien oben und unten. */ .e-con.m4y-closing { position: relative; } .e-con.m4y-closing::before, .e-con.m4y-closing::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: min(760px, 82%); height: 1px; background: linear-gradient(90deg, transparent, var(--e-global-color-m4ylinerose), transparent); } .e-con.m4y-closing::before { top: 0; } .e-con.m4y-closing::after { bottom: 0; } /* ------------------------------------------------------------ 14 Footer -- */ .m4y-footer-nav .elementor-nav-menu > li + li { margin-top: .55rem; } .m4y-footer-links .elementor-icon-list-item > a { transition: color 300ms var(--m4y-ease); } /* ----------------------------------------------------- 15 Einblendungen -- Nur mit Skript und erlaubter Bewegung (.m4y-motion). Ohne Skript oder bei „Bewegung reduzieren“ ist alles sofort sichtbar. m4y-fade ......... Deckkraft + 20 px Anstieg (mobil 14 px), 600 ms m4y-mask-down/-up Bild-Vorhang: Sichtbarkeitskante wandert, 1,3 s m4y-pop .......... Rundbutton springt auf, 500 ms Auf diese Elemente keine Elementor-Eingangsanimation legen. */ .m4y-motion .m4y-fade { transition: opacity 600ms ease-out, transform 600ms var(--m4y-ease-out); } .m4y-motion .m4y-fade:not(.is-visible) { opacity: 0; transform: translate3d(0, 20px, 0); } @media (max-width: 767px) { .m4y-motion .m4y-fade:not(.is-visible) { transform: translate3d(0, 14px, 0); } } /* Vorhang auf Containern (Kacheln, Bildreihen) bzw. auf dem Bild eines Bild-Widgets */ .m4y-motion :is(.e-con.m4y-mask-down, .m4y-mask-down.elementor-widget-image img) { clip-path: inset(0 0 100% 0); } .m4y-motion :is(.e-con.m4y-mask-up, .m4y-mask-up.elementor-widget-image img) { clip-path: inset(100% 0 0 0); } .m4y-motion :is(.e-con:is(.m4y-mask-down, .m4y-mask-up), :is(.m4y-mask-down, .m4y-mask-up).elementor-widget-image img) { transition: clip-path var(--m4y-mask-ms) var(--m4y-ease-curtain); transition-delay: var(--m4y-mask-delay, 0ms); } .m4y-motion :is(.e-con:is(.m4y-mask-down, .m4y-mask-up), :is(.m4y-mask-down, .m4y-mask-up).elementor-widget-image):is(.is-open, :focus-within), .m4y-motion :is(.m4y-mask-down, .m4y-mask-up).elementor-widget-image.is-open img { clip-path: inset(0 0 0 0); } .m4y-motion .e-con:is(.m4y-mask-down, .m4y-mask-up).is-done, .m4y-motion :is(.m4y-mask-down, .m4y-mask-up).elementor-widget-image.is-done img { clip-path: none; transition: none; } /* Mobil: Bild-Widgets öffnen immer von oben nach unten – wie ein fallender Vorhang (Auslöser bei ~20 % Sichtbarkeit setzt das Skript, Modul 9). Kacheln bleiben. */ @media (max-width: 767px) { .m4y-motion .m4y-mask-up.elementor-widget-image img { clip-path: inset(0 0 100% 0); } } .m4y-motion .m4y-pop .elementor-button { transition: transform 500ms var(--m4y-ease-back), background-color 300ms var(--m4y-ease); } .m4y-motion .m4y-pop:not(.is-visible) .elementor-button { transform: scale(0); } /* ------------------------------------------------------------- 16 Intro -- Hero: erst Melly (unscharf → scharf, 0,7–1,9 s), danach Header und Name (2,3 s), Zusatzzeile (2,5 s), Buttons (2,7 s). Füllmodus „backwards“ beim Bild: nach dem Intro liegt kein Filter und keine Transformation mehr darauf – es ist 100 % scharf. */ @media (prefers-reduced-motion: no-preference) { .e-con.m4y-hero-pic { animation: m4y-blur-in 1.2s linear calc(.7s * var(--m4y-intro)) backwards; } .m4y-hero-title { animation: m4y-rise 700ms var(--m4y-ease-out) calc(2.3s * var(--m4y-intro)) both; } .m4y-hero-script { animation: m4y-rise 700ms var(--m4y-ease-out) calc(2.5s * var(--m4y-intro)) both; } .e-con.m4y-hero-actions { animation: m4y-rise 700ms var(--m4y-ease-out) calc(2.7s * var(--m4y-intro)) both; } body:has(.m4y-hero) .e-con.m4y-header > .e-con-inner { animation: m4y-header-in 700ms var(--m4y-ease-out) calc(2.3s * var(--m4y-intro)) both; } } @keyframes m4y-blur-in { 0% { transform: scale(2.5) translateY(-110px); opacity: .05; filter: blur(10px); } 70% { transform: scale(1.2) translateY(-20px); opacity: .85; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: none; } } @keyframes m4y-rise { from { opacity: 0; transform: perspective(800px) rotateX(-30deg) translateY(40px); } to { opacity: 1; transform: none; } } @keyframes m4y-header-in { from { opacity: 0; transform: perspective(600px) rotateX(-50deg) translateY(30px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------ 17 Seitenwechsel -- Beim Laden fährt der Vorhang nach unten weg (reines CSS – bleibt nie stehen, auch ohne Skript). Beim Klick auf einen Seitenlink fährt er von oben herein (Element .m4y-curtain vom Skript). */ @media (prefers-reduced-motion: no-preference) { body:not(.elementor-editor-active)::before { content: ''; position: fixed; inset: 0; z-index: 10000; pointer-events: none; background: linear-gradient(90deg, var(--e-global-color-primary), var(--e-global-color-secondary)) bottom / 100% 2px no-repeat, var(--e-global-color-m4yink); transform: translate3d(0, 102%, 0); animation: m4y-curtain-out var(--m4y-curtain-ms) var(--m4y-ease-curtain) 100ms both; } } .m4y-curtain { position: fixed; inset: 0; z-index: 10000; background: linear-gradient(90deg, var(--e-global-color-primary), var(--e-global-color-secondary)) bottom / 100% 2px no-repeat, var(--e-global-color-m4yink); animation: m4y-curtain-in var(--m4y-curtain-ms) var(--m4y-ease-curtain) both; } @keyframes m4y-curtain-out { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 102%, 0); } } @keyframes m4y-curtain-in { from { transform: translate3d(0, -102%, 0); } to { transform: translate3d(0, 0, 0); } } /* ------------------------------------------------ 18 Bewegung reduzieren -- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .e-con.m4y-hero-zoom, .e-con.m4y-hero-content, .e-con.m4y-banner-layer { transform: none !important; } .e-con.m4y-hero-content { opacity: 1 !important; } } /* ------------------------------------------------- 19 Elementor-Editor -- Im Editor nichts anheften und nichts verstecken – alle Elemente bleiben normal anwählbar. */ body.elementor-editor-active .e-con.m4y-lift-stage { position: relative; margin-top: 0; padding-top: 0; } body.elementor-editor-active .elementor-location-header { position: relative; } /* Sicherheitsnetz: Einblendungen, Bild-Vorhänge und Intro im Editor immer im Endzustand zeigen – Elementor rendert Elemente dort laufend neu. */ body.elementor-editor-active :is(.m4y-fade, .e-con.m4y-mask-down, .e-con.m4y-mask-up, .m4y-mask-down.elementor-widget-image img, .m4y-mask-up.elementor-widget-image img, .m4y-pop .elementor-button) { opacity: 1 !important; transform: none !important; clip-path: none !important; } body.elementor-editor-active :is(.e-con.m4y-hero-pic, .m4y-hero-title, .m4y-hero-script, .e-con.m4y-hero-actions, .e-con.m4y-header > .e-con-inner, .m4y-pagehead-img, .e-con.m4y-pagehead-crumbs, .m4y-pagehead-title, .m4y-pagehead-script) { animation: none !important; } /* -------------------------------------------------------- 20 Unterseiten -- Seitenkopf (m4y-pagehead): Bild-Widget als Ebene + Verlauf, Brotkrümel (Icon-Liste in einem nav-Container), H1, Script-Zeile. Intro wie der Hero, kürzer: Bild unscharf → scharf ab 0,5 s, Brotkrümel 1,05 s, H1 1,15 s, Zusatzzeile 1,3 s (ab der 2. Seite × 0,45). Bildausschnitt je Seite im Bild-Widget → Erweitert → Custom CSS (object-position). Bausteine: m4y-rule (Haarlinie, Trenner-Widget), m4y-chips--plain (Merkmale ohne Rahmen), m4y-link-arrow (Textlink mit Pfeil, Button- Widget), m4y-sticky (Bildspalte bleibt ab 1025 px stehen), m4y-media--3-2 (Querformat). */ .e-con.m4y-pagehead { position: relative; overflow: hidden; isolation: isolate; } .e-con.m4y-pagehead-media { position: absolute; inset: 0; z-index: 0; padding: 0; } .e-con.m4y-pagehead-media::after { /* Lesbarkeit: unten dunkel, oben leicht */ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(16, 10, 15, .93) 0%, rgba(16, 10, 15, .55) 45%, rgba(16, 10, 15, .3) 100%); } .m4y-pagehead-img { position: absolute; inset: 0; } .elementor-widget-image.m4y-pagehead-img img { width: 100%; height: 100%; object-fit: cover; } .e-con.m4y-pagehead-inner { position: relative; z-index: 1; } .m4y-breadcrumb .elementor-icon-list-items { gap: .5rem; } .m4y-breadcrumb .elementor-icon-list-item { margin: 0; } .m4y-breadcrumb .elementor-icon-list-item + .elementor-icon-list-item::before { content: '/'; margin-right: .5rem; color: var(--e-global-color-primary); } .m4y-breadcrumb .elementor-icon-list-icon { display: none; } @media (prefers-reduced-motion: no-preference) { .m4y-pagehead-img { animation: m4y-blur-in-soft 1.1s linear calc(.5s * var(--m4y-intro)) backwards; } .e-con.m4y-pagehead-crumbs { animation: m4y-rise 600ms var(--m4y-ease-out) calc(1.05s * var(--m4y-intro)) both; } .m4y-pagehead-title { animation: m4y-rise 700ms var(--m4y-ease-out) calc(1.15s * var(--m4y-intro)) both; } .m4y-pagehead-script { animation: m4y-rise 700ms var(--m4y-ease-out) calc(1.3s * var(--m4y-intro)) both; } } @keyframes m4y-blur-in-soft { 0% { transform: scale(1.6) translateY(-50px); opacity: .05; filter: blur(10px); } 70% { transform: scale(1.1) translateY(-10px); opacity: .85; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: none; } } /* Haarlinie: ruhige Hälfte trifft Rose-Hälfte (Linie selbst = Trenner-Widget) */ .m4y-rule .elementor-divider-separator { position: relative; } .m4y-rule .elementor-divider-separator::after { content: ''; position: absolute; left: 50%; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--e-global-color-primary), var(--e-global-color-accent)); } /* Merkmale ohne Rahmen – Schrift und Farbe wie die Pillen */ .m4y-chips--plain .elementor-icon-list-items { gap: .5rem 1.75rem; } .m4y-chips--plain .elementor-icon-list-item { padding: 0; border: 0; border-radius: 0; } /* Textlink mit Pfeil */ .m4y-link-arrow .elementor-button-icon svg { transition: transform 300ms var(--m4y-ease); } @media (hover: hover) { .m4y-link-arrow .elementor-button:hover .elementor-button-icon svg { transform: translateX(5px); } } .elementor-widget-image.m4y-media--3-2 img { aspect-ratio: 3 / 2; } @media (min-width: 1025px) { .e-con.m4y-sticky { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--m4y-header-h) + 2.5rem); } } /* ------------------------------------------------------------ 21 Galerie -- Pro-Widget „Galerie“ (Klasse m4y-gallery): mehrere Galerien = Kategorien, Masonry, Lightbox (Website-Einstellungen → Lightbox). Filter als Pillen, Haarlinie unter der Filterleiste, Zähler „N Bilder“ (vom Skript), feiner Rahmen und Rose-Rand bei Hover (Zoom = Widget-Einstellung „Hover- Animation“). Einblendung nur mit Skript (.m4y-motion): Linie zieht auf, Filter gleiten ein; je Bild Vorhang von links + 70 px Anstieg, 1 s. Die Galerie positioniert Bilder selbst (transform/opacity am Bild-Link) – deshalb liegt die Einblendung auf dem inneren Bildelement. */ .m4y-gallery .elementor-gallery__titles-container { position: relative; display: flex; flex-wrap: wrap; align-items: center; row-gap: .5rem; padding-block: 1.1rem; } .m4y-gallery .elementor-gallery__titles-container::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--e-global-color-m4yline); } .m4y-gallery .elementor-gallery-title { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.15rem; border: 1px solid var(--e-global-color-m4yline); border-radius: 999px; transition: color 300ms var(--m4y-ease), border-color 300ms var(--m4y-ease), background-color 300ms var(--m4y-ease); } .m4y-gallery .elementor-gallery-title:hover { border-color: var(--e-global-color-m4ylinerose); } .m4y-gallery .elementor-gallery-title.elementor-item-active { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); } .m4y-gallery-count { margin: 0 0 0 auto; font-family: var(--e-global-typography-m4ycaption-font-family), sans-serif; font-size: var(--e-global-typography-m4ycaption-font-size); letter-spacing: .18em; text-transform: uppercase; color: var(--e-global-color-m4ymuted); } .m4y-gallery .e-gallery-item { background: var(--e-global-color-m4ysurf2); border-radius: var(--m4y-radius-media); } .m4y-gallery .e-gallery-item::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid var(--e-global-color-m4ylinesoft); border-radius: inherit; transition: border-color 300ms var(--m4y-ease), opacity 600ms var(--m4y-ease); } @media (hover: hover) { .m4y-gallery .e-gallery-item:hover::after { border-color: var(--e-global-color-m4ylinerose); } } .m4y-gallery .e-gallery-item:focus-visible { outline-offset: -3px; } .m4y-motion .m4y-gallery .elementor-gallery__titles-container::after { transition: transform 600ms var(--m4y-ease-out); } .m4y-motion .m4y-gallery .elementor-gallery__titles-container:not(.is-visible)::after { transform: scaleX(0); } .m4y-motion .m4y-gallery .elementor-gallery__titles-container:not(.is-visible) > * { opacity: 0; } .m4y-motion .m4y-gallery .elementor-gallery__titles-container.is-visible > * { animation: m4y-fade-x 400ms var(--m4y-ease-out) calc(150ms + var(--m4y-i, 0) * 90ms) both; } @keyframes m4y-fade-x { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } } .m4y-motion .m4y-gallery .e-gallery-image { transition: filter var(--image-transition-duration, 350ms), transform var(--image-transition-duration, 350ms), clip-path 1s var(--m4y-ease-out) var(--m4y-reveal-delay, 0ms), translate 1s var(--m4y-ease-out) var(--m4y-reveal-delay, 0ms), opacity 1s var(--m4y-ease-out) var(--m4y-reveal-delay, 0ms); } .m4y-motion .m4y-gallery .e-gallery-item:not(.is-shown) .e-gallery-image { clip-path: inset(0 100% 0 0); translate: 0 70px; opacity: 0; } .m4y-motion .m4y-gallery .e-gallery-item:not(.is-shown)::after { opacity: 0; } body.elementor-editor-active .m4y-gallery :is(.e-gallery-image, .elementor-gallery__titles-container > *) { opacity: 1 !important; clip-path: none !important; translate: none !important; animation: none !important; } /* ---------------------------------------------------------- 22 Formulare -- Pro-Widget „Formular“ (Klasse m4y-form) im Panel (Container m4y-form-panel). Farben, Rahmen, Schriften, Button, Meldungen: Widget-Einstellungen. Hier nur, was dort fehlt: Akzentlinie am Panel, Mindesthöhen, Platzhalter, Hover/Fokus (als Ring per box-shadow – Rahmenfarbe gehört dem Widget), Häkchen-Felder (Volljährigkeit, Datenschutz) im Marken-Look, Fehlerzustand. */ /* Panel ist als Container bereits positioniert (relative bzw. sticky über m4y-sticky) */ .e-con.m4y-form-panel::before { content: ''; position: absolute; top: -1px; left: 0; z-index: 1; width: clamp(70px, 24%, 150px); height: 2px; background: linear-gradient(90deg, var(--e-global-color-primary), var(--e-global-color-accent)); } .m4y-form .elementor-field-group .elementor-field-textual { min-height: 50px; padding: .8rem 1rem; line-height: 1.55; transition: box-shadow 300ms var(--m4y-ease); } .m4y-form .elementor-field-group textarea.elementor-field-textual { min-height: 148px; resize: vertical; } .m4y-form .elementor-field-textual::placeholder { color: rgba(205, 186, 195, .5); opacity: 1; } .m4y-form .elementor-field-textual:hover { box-shadow: inset 0 0 0 1px rgba(255, 247, 250, .12); } .m4y-form .elementor-field-textual:focus { outline: none; box-shadow: inset 0 0 0 1px var(--e-global-color-accent), 0 0 0 3px rgba(240, 141, 181, .18); } .m4y-form .elementor-mark-required .elementor-field-label::after { margin-left: .2em; } /* Häkchen-Felder: ganze Zeile klickbar, Kästchen 24 px, Haken in Weiß auf Primär. Das Widget-CSS färbt jedes .elementor-field (auch die Checkbox) mit Spezifität 0,6,0 – deshalb hier bewusst .m4y-form dreifach (0,6,1), ohne !important. */ .m4y-form.m4y-form.m4y-form .elementor-field-subgroup .elementor-field-option { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; min-height: 44px; padding-block: .35rem; } .m4y-form.m4y-form.m4y-form .elementor-field-group input.elementor-acceptance-field.elementor-field { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 1px 0 0; padding: 0; border: 1px solid var(--e-global-color-m4ylinerose); border-radius: 2px; background-color: rgba(255, 247, 250, .04); cursor: pointer; transition: background-color 160ms var(--m4y-ease), border-color 160ms var(--m4y-ease); } .m4y-form.m4y-form.m4y-form .elementor-field-group input.elementor-acceptance-field.elementor-field:checked { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); } .m4y-form input.elementor-acceptance-field::after { content: ''; width: 11px; height: 6px; border-left: 2px solid var(--e-global-color-text); border-bottom: 2px solid var(--e-global-color-text); transform: rotate(-45deg) translate(1px, -2px) scale(0); transition: transform 160ms var(--m4y-ease-out); } .m4y-form input.elementor-acceptance-field:checked::after { transform: rotate(-45deg) translate(1px, -2px) scale(1); } .m4y-form input.elementor-acceptance-field:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; } .m4y-form.m4y-form.m4y-form .elementor-field-subgroup .elementor-field-option label { font-size: .92rem; line-height: 1.6; color: var(--e-global-color-m4ymuted); cursor: pointer; } .m4y-form .elementor-field-option label strong { color: var(--e-global-color-text); font-weight: 500; } .m4y-form .elementor-field-option label a { color: var(--e-global-color-accent); } /* Fehler (Elementor setzt .elementor-error) und Meldungen */ .m4y-form .elementor-error .elementor-field-textual { box-shadow: inset 0 0 0 1px #FF7DA1; background-color: rgba(255, 125, 161, .07); } .m4y-form.m4y-form.m4y-form .elementor-error input.elementor-acceptance-field.elementor-field { border-color: #FF7DA1; } .m4y-form .elementor-message { margin-top: 1rem; } .m4y-form .elementor-message::before { color: inherit; } .m4y-form .elementor-button[type="submit"] { margin-top: .6rem; } /* Lightbox (Galerie): Bild mit derselben Rundung */ .elementor-lightbox .elementor-lightbox-image { border-radius: var(--m4y-radius-media); } /* ---------------------------------------------------------------- 23 404 -- Theme-Builder-Vorlage „GLOBAL | 404 – Seite nicht gefunden“: Bühne (m4y-notfound) mit Schleier + Ornament (Parallax wie Banner), rosé Glühen und Abdunkeln, großer Fehlercode (die „4“ in Rosé), Melly-Porträt mit Bild-Vorhang und „psst …“. Intro wie der Seitenkopf: Ebenen blenden ein, Code wird scharf (0,55 s), danach H1 1,15 s, Zeile 1,3 s, Text 1,45 s, Buttons 1,6 s, Direktlinks 1,85 s, „psst …“ 2,1 s (ab Seite 2 × 0,45). */ .e-con.m4y-notfound { position: relative; overflow: hidden; isolation: isolate; } .e-con.m4y-notfound::before, .e-con.m4y-notfound::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .e-con.m4y-notfound::before { /* rosé Glühen hinter dem Text */ z-index: 0; background: radial-gradient(70% 60% at 35% 42%, rgba(194, 24, 91, .16), transparent 72%); } .e-con.m4y-notfound::after { /* Ebenen zurücknehmen, Ränder abdunkeln */ z-index: 1; background: radial-gradient(60% 65% at 50% 48%, rgba(16, 10, 15, .62) 0%, rgba(16, 10, 15, .28) 62%, rgba(16, 10, 15, .5) 100%); } .e-con.m4y-notfound-inner { position: relative; z-index: 2; } .m4y-notfound-code .elementor-heading-title { font-variant-numeric: lining-nums; } .m4y-notfound-code .elementor-heading-title span { color: var(--e-global-color-accent); } .e-con.m4y-notfound-figure { position: relative; } .m4y-notfound-whisper { position: absolute; left: max(0px, calc(50% - 15rem)); bottom: 0; z-index: 2; translate: -.35em .35em; rotate: -6deg; pointer-events: none; } .m4y-notfound-whisper .elementor-heading-title { text-shadow: 0 2px 18px rgba(8, 4, 7, .7); padding-block: .08em .14em; } @media (max-width: 767px) { .m4y-notfound-whisper { left: max(0px, calc(50% - 11rem)); translate: 0 .35em; } } @media (prefers-reduced-motion: no-preference) { .e-con.m4y-notfound .e-con.m4y-banner-layer { animation: m4y-fade-from 1.6s ease-out calc(.35s * var(--m4y-intro)) backwards; } .m4y-notfound-code { animation: m4y-soft-focus 1.3s var(--m4y-ease-out) calc(.55s * var(--m4y-intro)) backwards; } .m4y-notfound-title { animation: m4y-rise 700ms var(--m4y-ease-out) calc(1.15s * var(--m4y-intro)) both; } .m4y-notfound-script { animation: m4y-rise 700ms var(--m4y-ease-out) calc(1.3s * var(--m4y-intro)) both; } .m4y-notfound-text { animation: m4y-rise 700ms var(--m4y-ease-out) calc(1.45s * var(--m4y-intro)) both; } .e-con.m4y-notfound-actions { animation: m4y-rise 700ms var(--m4y-ease-out) calc(1.6s * var(--m4y-intro)) both; } .e-con.m4y-notfound-more { animation: m4y-fade-from 700ms ease-out calc(1.85s * var(--m4y-intro)) backwards; } .m4y-notfound-whisper { animation: m4y-whisper 900ms var(--m4y-ease-out) calc(2.1s * var(--m4y-intro)) both; } } @keyframes m4y-fade-from { from { opacity: 0; } } @keyframes m4y-soft-focus { from { opacity: 0; filter: blur(12px); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } } @keyframes m4y-whisper { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } body.elementor-editor-active :is(.e-con.m4y-notfound .e-con.m4y-banner-layer, .m4y-notfound-code, .m4y-notfound-title, .m4y-notfound-script, .m4y-notfound-text, .e-con.m4y-notfound-actions, .e-con.m4y-notfound-more, .m4y-notfound-whisper) { animation: none !important; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/raleway-variable-latin.woff2') format('woff2'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/raleway-variable-latin.woff2') format('woff2'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/raleway-variable-latin.woff2') format('woff2'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/raleway-variable-latin.woff2') format('woff2'); } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/raleway-variable-latin.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/greatvibes-400-latin.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/roboto-variable-latin.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/roboto-variable-latin.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 600; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/roboto-variable-latin.woff2') format('woff2'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://melly4you.de/wp-content/uploads/2026/10/roboto-variable-latin.woff2') format('woff2'); } /* End Custom Fonts CSS */