/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved by My WordPress Agent */
/* =============================================================
   MH · Split-Story — CSS  (Section #weg, Klasse .mh-split)
   Desktop: Text scrollt normal links (62%), die Bilder stehen rechts (38%,
   quadratisch, ca. 1/3 der Bildschirmbreite) und schieben sich vertikal
   passend zum Text ein.
   Tablet/Mobil (<=1024px): Bild jeweils unter dem Text, ohne Animation.
   Ersetzt auf Seite 2135 die alte Vollbild-Story (.mh-story, siehe
   Backlog-Seite 12878 und Snippets 2147/2148).
   JS dazu: Snippet "MH · Split-Story — JS"
   ============================================================= */
.mh-split{--display:flex;--flex-direction:row;display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:0!important;padding:0 clamp(24px,5vw,72px)!important;background:var(--mwk-cream);position:relative}
.mh-split__text{flex:0 0 62%!important;width:62%!important;max-width:62%;padding:0!important;gap:0!important}
.mh-split__step{min-height:100vh;min-height:100svh;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:18px!important;max-width:620px;padding:0!important}
.mh-split__step .elementor-widget{margin:0!important}
.mh-split__step .mh-split__eyebrow .elementor-heading-title{font-family:var(--mwk-sans);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mwk-terra)!important;line-height:1.3}
.mh-split__step h2.elementor-heading-title{font-family:var(--mwk-serif);font-size:clamp(34px,4.2vw,58px);font-weight:700;line-height:1.1;color:var(--mwk-ink)!important}
.mh-split__step h2 em{font-style:italic;color:var(--mwk-terra)!important}
.mh-split__step .elementor-widget-text-editor,.mh-split__step .elementor-widget-text-editor p{font-family:var(--mwk-sans);font-size:clamp(17px,1.4vw,20px);line-height:1.7;color:var(--mwk-gray)}
.mh-split__step .elementor-widget-text-editor p{margin:0}
.mh-split__step .elementor-widget-text-editor p+p{margin-top:1em}
.mh-split__step .elementor-widget-text-editor p:first-child{font-size:clamp(18px,1.55vw,22px);color:var(--mwk-ink)}
.mh-split__media{--position:sticky;position:sticky!important;top:0;flex:0 0 38%!important;width:38%!important;max-width:38%;height:100vh;height:100svh;align-self:flex-start;padding:0!important}
/* Quadrat; margin-top in % bezieht sich auf die Breite der Spalte: -50% = halbe Bildhöhe, so sitzt das Bild mittig */
.mh-split__img{--position:absolute;position:absolute!important;left:0;right:0;top:50%;margin-top:-50%!important;aspect-ratio:1/1;height:auto!important;min-height:0!important;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px rgba(38,43,41,.18);opacity:0;transform:translateY(115vh);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
.mh-split__img.is-active{opacity:1;transform:none}
.mh-split__img.is-past{opacity:0;transform:translateY(-115vh)}
@media(max-width:1024px){
/* Spalten auflösen, Text und Bild als Geschwister einer Spalte; Reihenfolge Text 1, Bild 1, Text 2, Bild 2 ... */
.mh-split{flex-direction:column!important;align-items:stretch!important;padding:0 24px 24px!important}
.mh-split__text,.mh-split__media{display:contents!important}
.mh-split__step{min-height:0;max-width:none;padding:48px 0 20px!important;border-top:1px solid var(--mwk-line)!important}
.mh-split__step:nth-child(1){order:1;border-top:0!important}
.mh-split__step:nth-child(2){order:3}
.mh-split__step:nth-child(3){order:5}
.mh-split__step:nth-child(4){order:7}
.mh-split__img{position:relative!important;left:auto;right:auto;top:auto;margin:0 0 8px!important;width:100%;opacity:1;transform:none;transition:none;box-shadow:0 14px 30px rgba(38,43,41,.14)}
.mh-split__img:nth-child(1){order:2}
.mh-split__img:nth-child(2){order:4}
.mh-split__img:nth-child(3){order:6}
.mh-split__img:nth-child(4){order:8}
}
@media(prefers-reduced-motion:reduce){.mh-split__img{transition-duration:.01s}}
