/* MULTIVERSUM Scroll Story V6 Refined */ /* Multiversum Scroll-Story: Punktnavigation auf Home nur unter Desktop ausblenden */ @media (max-width: 1919px) { body[data-world="general"]:has(#mvParallaxHero)[data-current-slide="home"] .experience-rail, body[data-world="general"]:has(#mvParallaxHero):not([data-current-slide]) .experience-rail { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } body[data-world="general"]:has(#mvParallaxHero) .home-hero-experience { height: auto; max-height: none; min-height: 0; overflow: visible; touch-action: auto; user-select: auto; -webkit-user-select: auto; border-bottom: none; background: transparent !important; box-shadow: none; } body[data-world="general"]:has(#mvParallaxHero) .home-hero-experience::before, body[data-world="general"]:has(#mvParallaxHero) .home-hero-experience::after { display: none !important; } body[data-world="general"] #slide-home.slide { overflow-x: clip; overflow-y: auto; -webkit-overflow-scrolling: touch; } body[data-world="general"]:has(#mvParallaxHero) .home-main-block .world-intro, body[data-world="general"]:has(#mvParallaxHero) .home-main-block .home-copy > h1, body[data-world="general"]:has(#mvParallaxHero) .home-main-block .home-copy > .lead:first-of-type { display: none; } /* Intro-Block unter Parallax: während Scroll versteckt, ab Release sichtbar */ body[data-world="general"]:has(#mvParallaxHero.is-boot-painted):not(.is-below-parallax) #slide-home .home-main-block { visibility: hidden; opacity: 0; pointer-events: none; } body[data-world="general"].is-below-parallax #slide-home .home-main-block, body[data-world="general"]:has(#mvParallaxHero.is-content-released) #slide-home .home-main-block { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .mv-scroll-story { position: relative; height: calc(var(--mv-scroll-vh, 1400) * 1vh); color: #f7f4ff; background: #050914; isolation: isolate; --mv-accent: rgba(104, 231, 255, 0.65); --z-bg: 0; --z-glow: 20; --z-copy: 80; --z-world: 160; --z-cards: 220; --z-card-hover: 260; --z-header: 500; } /* Fallback: ohne JS nur MULTIVERSUM-Intro — keine Weltenkugeln / Nexora-Elemente */ .mv-scroll-story:not(.is-js-ready) .mv-scroll-bg[data-bg="multiverse"] { opacity: 1 !important; } .mv-scroll-story:not(.is-js-ready) .mv-scroll-slide[data-slide="0"] { opacity: 1 !important; transform: none !important; pointer-events: auto; } .mv-scroll-story:not(.is-js-ready) .mv-scroll-cue { opacity: 1 !important; } .mv-scroll-story:not(.is-js-ready) .mv-world-stage, .mv-scroll-story:not(.is-js-ready) .mv-scroll-orbs, .mv-scroll-story:not(.is-js-ready) .world-zone, .mv-scroll-story:not(.is-js-ready) .mv-scroll-bg:not([data-bg="multiverse"]), .mv-scroll-story:not(.is-js-ready) [data-deco-theme]:not([data-deco-theme="multiverse"]), .mv-scroll-story:not(.is-js-ready) [data-particle-field]:not([data-particle-field="multiverse"]), .mv-scroll-story:not(.is-js-ready) [data-atmo], .mv-scroll-story:not(.is-js-ready) .mv-transition-trail, .mv-scroll-story:not(.is-js-ready) .mv-world-stage__radial, .mv-scroll-story:not(.is-js-ready) .mv-world-stage__overlay { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .mv-scroll-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; } .mv-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; } .mv-layer--1 { z-index: 1; } .mv-layer--2 { z-index: 3; } .mv-layer--3 { z-index: 5; } .mv-layer--4 { z-index: 14; pointer-events: none; overflow: visible; } .mv-layer--5 { z-index: 10; } .mv-layer--6 { z-index: 11; } .mv-layer--7 { z-index: 18; pointer-events: none; } .mv-scroll-story.is-portfolio-interactive .mv-layer--7 { pointer-events: auto; } .mv-layer--4 .mv-scroll-orbs, .mv-layer--5 .mv-topic-grid, .mv-layer--6 .mv-scroll-slide, .mv-layer--7 .mv-scroll-portfolio, .mv-layer--7 .mv-scroll-slide__ctas { pointer-events: auto; } .mv-scroll-depth { position: absolute; inset: 0; pointer-events: none; } .mv-scroll-depth--back { z-index: 0; } .mv-scroll-depth--mid { z-index: 8; } .mv-scroll-depth--front { z-index: 16; } .mv-scroll-bg { position: absolute; inset: 0; opacity: 0; } .mv-scroll-bg img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; will-change: transform; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .mv-film-grain { position: absolute; inset: 0; z-index: 24; pointer-events: none; opacity: 0.045; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .mv-scroll-stars { position: absolute; inset: 0; z-index: 2; opacity: 0; background: radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.5px), radial-gradient(circle at 74% 32%, rgba(104, 231, 255, 0.7) 0 1px, transparent 1.5px), radial-gradient(circle at 48% 72%, rgba(255, 89, 178, 0.6) 0 1px, transparent 1.5px); background-size: 200px 200px, 240px 240px, 280px 280px; animation: mv2Stars 52s linear infinite; } @keyframes mv2Stars { to { background-position: 100px -160px, -120px 90px, 70px 200px; } } .mv-scroll-vignette { position: absolute; inset: 0; z-index: 3; background: radial-gradient(ellipse 70% 58% at 50% 48%, transparent 40%, rgba(2, 4, 10, 0.75) 100%); pointer-events: none; } .mv-scroll-deco-set { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .mv-scroll-deco-set img { position: absolute; left: 50%; top: 50%; width: min(78vw, 960px); height: auto; object-fit: contain; transform: translate3d(-50%, -50%, 0); pointer-events: none; mix-blend-mode: screen; } .mv-scroll-deco-set img[data-d="orbit"] { width: min(82vw, 1000px); } .mv-scroll-deco-set img[data-d="particles"] { width: min(90vw, 1100px); opacity: 0; } .mv-scroll-deco-set img[data-d="light"] { width: min(70vw, 820px); mix-blend-mode: soft-light; opacity: 0; } .mv-scroll-deco-set img[data-d="line"] { width: min(76vw, 900px); opacity: 0; } .mv-scroll-orbs { position: absolute; inset: 0; pointer-events: none; } .mv-world-stage { position: absolute; left: clamp(20px, 6vw, 96px); top: 52%; width: min(46vw, 540px); height: min(66vh, 700px); transform: translateY(-50%); z-index: 2; pointer-events: none; will-change: transform, opacity; overflow: visible; } .mv-world-stage__glow { position: absolute; left: 50%; top: 38%; width: min(42vw, 480px); height: min(42vw, 480px); transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none; filter: blur(48px); transition: opacity 0.5s ease; } .mv-scroll-story[data-dominant-orb="nexora"] .mv-world-stage__glow { background: radial-gradient(circle, rgba(0, 168, 255, 0.55) 0%, rgba(0, 87, 255, 0.2) 42%, transparent 72%); } .mv-scroll-story[data-dominant-orb="professional"] .mv-world-stage__glow { background: radial-gradient(circle, rgba(207, 213, 223, 0.42) 0%, rgba(201, 162, 39, 0.14) 45%, transparent 72%); } .mv-scroll-story[data-dominant-orb="freiraum"] .mv-world-stage__glow { background: radial-gradient(circle, rgba(255, 75, 163, 0.5) 0%, rgba(255, 138, 61, 0.22) 42%, transparent 72%); } .mv-scroll-story[data-layout="overview"] .mv-world-stage__glow { background: radial-gradient(circle, rgba(104, 231, 255, 0.28) 0%, rgba(155, 107, 255, 0.16) 38%, transparent 70%); } .mv-world-stage__ring { position: absolute; left: 50%; top: 38%; width: min(36vw, 400px); height: min(36vw, 400px); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); opacity: 0; pointer-events: none; box-shadow: 0 0 40px rgba(104, 231, 255, 0.08), inset 0 0 30px rgba(255, 255, 255, 0.04); } .mv-scroll-story[data-dominant-orb="nexora"] .mv-world-stage__ring { border-color: rgba(104, 231, 255, 0.35); box-shadow: 0 0 50px rgba(0, 168, 255, 0.18), inset 0 0 24px rgba(104, 231, 255, 0.08); } .mv-scroll-story[data-dominant-orb="professional"] .mv-world-stage__ring { border-color: rgba(207, 213, 223, 0.28); } .mv-scroll-story[data-dominant-orb="freiraum"] .mv-world-stage__ring { border-color: rgba(255, 75, 163, 0.32); box-shadow: 0 0 50px rgba(255, 75, 163, 0.14), inset 0 0 24px rgba(255, 138, 61, 0.08); } .mv-world-stage__topics { position: absolute; left: 0; right: 0; top: 58%; bottom: 2%; z-index: 3; pointer-events: none; display: flex; align-items: flex-end; } .mv-scroll-story.is-js-ready[data-layout="overview"] .mv-world-stage { left: 50%; top: 56%; width: min(96vw, 1180px); height: min(68vh, 760px); transform: translate(-50%, -50%); } .mv-scroll-story.is-js-ready[data-layout="intro"] .mv-world-stage { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .mv-scroll-story.is-js-ready[data-layout="finale"] .mv-world-stage { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .mv-scroll-story.is-js-ready[data-layout="portfolio"] .mv-world-stage { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .mv-scroll-story.is-post-world .mv-world-stage, .mv-scroll-story.is-post-world .world-zone, .mv-scroll-story.is-post-world .world-collage, .mv-scroll-story.is-post-world .world-core, .mv-scroll-story.is-post-world .world-card { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .mv-scroll-story.is-js-ready[data-layout="finale"] .mv-world-stage, .mv-scroll-story.is-js-ready[data-layout="portfolio"] .mv-world-stage, .mv-scroll-story.is-js-ready[data-layout="finale"] .world-zone, .mv-scroll-story.is-js-ready[data-layout="portfolio"] .world-zone, .mv-scroll-story.is-js-ready[data-layout="finale"] .world-card, .mv-scroll-story.is-js-ready[data-layout="portfolio"] .world-card { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .mv-scroll-story.is-finale-copy-visible .mv-scroll-slide--finale { left: 50%; top: 50%; width: min(560px, 88vw); transform: translate3d(-50%, -50%, 0); z-index: var(--z-copy); pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(155deg, rgba(8, 14, 28, 0.82), rgba(5, 9, 20, 0.62)); backdrop-filter: blur(22px); } .mv-scroll-story.is-finale-copy-visible .mv-scroll-slide--finale .final-copy, .mv-scroll-story.is-finale-copy-visible .mv-scroll-slide--finale .scene-copy { text-align: center; } .mv-scroll-story[data-layout="portfolio"] .mv-scroll-slide--finale { opacity: 0 !important; pointer-events: none !important; } .mv-scroll-story[data-layout="intro"] .mv-scroll-bg[data-bg="overview"] { opacity: 0 !important; } .mv-scroll-story.is-js-ready[data-layout="split-world"] .mv-world-stage { opacity: 1; width: min(54vw, 860px); height: min(76vh, 880px); z-index: var(--z-world); } .mv-scroll-story[data-layout="split-world"] .mv-world-tint { opacity: 0.55; } .mv-scroll-story.is-js-ready[data-layout="split-world"][data-world-side="right"] .mv-world-stage { left: auto; right: clamp(20px, 5vw, 88px); } .mv-scroll-story.is-js-ready[data-layout="split-world"][data-world-side="left"] .mv-world-stage { left: clamp(20px, 5vw, 88px); right: auto; } .mv-scroll-story.is-js-ready .mv-world-stage .mv-scroll-orbs, .mv-scroll-story.is-js-ready .mv-world-stage .mv-world-zones { position: absolute; inset: clamp(52px, 9vh, 96px) clamp(18px, 3.5vw, 52px) 40% clamp(18px, 3.5vw, 52px); pointer-events: none; overflow: visible; } .mv-scroll-story.is-js-ready[data-layout="overview"] .mv-world-stage .mv-world-zones { inset: clamp(52px, 9vh, 96px) clamp(18px, 3.5vw, 52px) clamp(48px, 8vh, 88px) clamp(18px, 3.5vw, 52px); } .mv-scroll-story.is-js-ready[data-layout="overview"] .mv-scroll-orb.world-zone { width: clamp(200px, 20vw, 340px); height: clamp(200px, 20vw, 340px); } .mv-scroll-story.is-js-ready[data-layout="overview"] .world-zone.is-reveal-focus { width: clamp(220px, 22vw, 380px); height: clamp(220px, 22vw, 380px); z-index: 220; } .mv-scroll-story.is-js-ready[data-layout="overview"] .world-zone.is-reveal-active:not(.is-reveal-focus) { width: clamp(190px, 18vw, 300px); height: clamp(190px, 18vw, 300px); } .mv-scroll-story.is-js-ready[data-layout="overview"] .world-zone.is-scene-active .world-collage { opacity: 1; transform: scale(1); } .mv-scroll-story.is-js-ready[data-layout="overview"] .world-core { inset: 30%; } .mv-scroll-story.is-js-ready .mv-world-stage .mv-world-zones .world-zone { pointer-events: auto; } .mv-scroll-orb.world-zone { width: min(44vw, 680px); height: min(44vw, 680px); aspect-ratio: auto; filter: none; overflow: visible; transition: opacity 0.55s ease, filter 0.55s ease, width 0.55s ease, height 0.55s ease; container-type: size; z-index: 80; } .mv-scroll-orb.world-zone.is-focus, .mv-scroll-orb.world-zone.is-visible { z-index: 160; } .mv-scroll-orb.world-zone:hover, .mv-scroll-orb.world-zone.is-active { z-index: 240; } .mv-scroll-orb.world-zone.is-focus { z-index: var(--z-world); } .mv-scroll-orb.world-zone.is-dimmed { opacity: 0.48; filter: saturate(0.62) blur(0.5px); } .world-core { position: absolute; inset: 36%; display: grid; place-items: center; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 50%; cursor: pointer; color: white; text-decoration: none; transform-style: preserve-3d; will-change: transform, opacity; transition: transform 0.55s ease, filter 0.35s ease; z-index: 12; overflow: visible; pointer-events: auto; } .world-core::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.08), 0 0 42px rgba(104, 231, 255, 0.14); pointer-events: none; z-index: 1; } .world-core img.mv-orb-bubble__standalone { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: 50%; clip-path: circle(50% at 50% 50%); image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; filter: drop-shadow(0 34px 90px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 48px rgba(104, 231, 255, 0.12)) contrast(1.04) saturate(1.06); transform-style: preserve-3d; position: relative; z-index: 2; } .world-zone.is-focus .world-core img.mv-orb-bubble__standalone { animation: mvOrbBreath 8s ease-in-out infinite; } .world-zone--professional.is-focus .world-core img.mv-orb-bubble__standalone { animation: mvOrbBreathCalm 10s ease-in-out infinite; } .world-zone--freiraum.is-focus .world-core img.mv-orb-bubble__standalone { animation: mvOrbBreathCreative 7s ease-in-out infinite; } @keyframes mvOrbBreath { 0%, 100% { transform: rotateY(0deg) rotateZ(0deg) scale(1); } 50% { transform: rotateY(2.5deg) rotateZ(1deg) scale(1.01); } } @keyframes mvOrbBreathCalm { 0%, 100% { transform: rotateY(0deg) rotateZ(0deg) scale(1); } 50% { transform: rotateY(1.2deg) rotateZ(0.5deg) scale(1.005); } } @keyframes mvOrbBreathCreative { 0%, 100% { transform: rotateY(0deg) rotateZ(0deg) scale(1); } 50% { transform: rotateY(3deg) rotateZ(1.5deg) scale(1.012); } } @media (prefers-reduced-motion: reduce) { .world-zone.is-focus .world-core img.mv-orb-bubble__standalone { animation: none; } } .world-zone.is-scroll-active.is-dominant .world-core, .world-zone.is-expanded .world-core { transform: none; } .world-zone.is-focus:hover .world-core img.mv-orb-bubble__standalone, .world-core:hover img.mv-orb-bubble__standalone, .world-core:focus-visible img.mv-orb-bubble__standalone, .world-core.is-pressed img.mv-orb-bubble__standalone { transform: scale(1.05); filter: brightness(1.08) saturate(1.08); animation-play-state: paused; } .mv-scroll-orb.world-zone.is-background { opacity: 0.32; filter: saturate(0.58) blur(0.4px); pointer-events: none; } .world-collage { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(0.96); filter: saturate(0.94) brightness(0.94); transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease, visibility 0.55s ease; pointer-events: none; z-index: 20; overflow: visible; --card-orbit: 26cqmin; } .mv-scroll-story.is-js-ready .world-collage { transition: filter 0.35s ease; } .world-zone.is-scene-active .world-collage { opacity: 1; visibility: visible; transform: scale(1); pointer-events: none; filter: saturate(1) brightness(1); } .world-zone.is-scene-active .world-card, .world-zone.is-focus .world-card { pointer-events: auto; } .world-zone.is-focus .world-core { inset: 34%; z-index: 50; pointer-events: auto; } .world-zone.is-visible:not(.is-scene-active):not(.is-focus) .world-collage { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .world-zone:not(.is-visible):not(.is-scene-active) .world-collage { opacity: 0; visibility: hidden; pointer-events: none; } .world-zone.is-background.is-visible .world-collage, .world-zone.is-background.is-scene-active .world-collage { opacity: 0.58; transform: scale(0.94); filter: saturate(0.96) brightness(0.96); } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus:hover .world-collage, .mv-scroll-story[data-layout="overview"] .world-zone.is-merge-active:hover .world-collage, .mv-scroll-story[data-layout="overview"] .world-zone.is-merge-active.is-active .world-collage { opacity: 1; transform: scale(1.02); filter: saturate(1.06) brightness(1.04); pointer-events: none; } .mv-scroll-story[data-layout="overview"] .world-zone .world-card { opacity: 0; pointer-events: none; display: flex; transition: opacity 0.4s ease, transform 0.45s ease; } .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-active .world-card, .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-focus .world-card, .mv-scroll-story[data-collage-focus="all"] .world-zone.is-scene-active .world-card, .mv-scroll-story[data-layout="overview"] .world-zone.is-merge-active:hover .world-card, .mv-scroll-story[data-layout="overview"] .world-zone.is-merge-active.is-active .world-card, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card { opacity: 1; pointer-events: auto; } .mv-scroll-story[data-collage-focus="all"] .world-zone.is-scene-active .world-card { width: clamp(74px, 5.4vw, 108px); } .mv-scroll-story[data-collage-focus="all"] .world-zone.is-scene-active .world-card__image img { max-height: clamp(50px, 4.8vw, 76px); } .mv-scroll-story[data-collage-focus="all"] .world-zone.is-scene-active .world-card__label { font-size: clamp(10px, 0.68vw, 12px); margin-top: 5px; } .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-active .world-card, .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-focus .world-card { width: clamp(82px, 6.2vw, 118px); } .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-active .world-card__image img, .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-focus .world-card__image img { max-height: clamp(58px, 5.6vw, 88px); } .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-active .world-card__label, .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-focus .world-card__label { font-size: clamp(11px, 0.72vw, 13px); margin-top: 6px; } .mv-scroll-story.is-world-focus .scene-copy, body.is-world-focus .mv-scroll-story .world-copy { pointer-events: none; } .mv-scroll-story.is-world-focus .scene-copy a, .mv-scroll-story.is-world-focus .scene-copy button, body.is-world-focus .mv-scroll-story .world-copy a, body.is-world-focus .mv-scroll-story .world-copy button { pointer-events: auto; } .mv-world-accents { display: none !important; } .world-core { background: transparent !important; box-shadow: none; } .world-core img.mv-orb-bubble__standalone { background: transparent; } .mv-scroll-slide--reveal { display: none !important; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card { display: flex; } .world-cards-more { display: none; position: relative; z-index: 8; margin: 12px auto 0; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .world-card { position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; display: flex; flex-direction: column; align-items: center; gap: 0; width: clamp(130px, 8.8vw, 190px); height: auto; overflow: visible; opacity: 0.94; margin: 0; transform: translate(-50%, -50%) rotate(var(--card-angle, 0deg)) translateY(calc(-1 * var(--card-orbit, 26cqmin))) rotate(calc(-1 * var(--card-angle, 0deg))) scale(0.97); background: transparent; border: none; box-shadow: none; backdrop-filter: none; will-change: transform, opacity; cursor: pointer; text-decoration: none; color: #fff; transition: transform 0.38s ease, filter 0.38s ease, opacity 0.38s ease, z-index 0s; z-index: var(--z-cards); } .world-card__image, .world-card-media { display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(88px, 8.5vw, 138px); aspect-ratio: auto; border-radius: 0; overflow: visible; background: transparent; border: none; box-shadow: none; transition: transform 0.32s ease, filter 0.32s ease; transform-origin: center center; } .world-card:hover .world-card__image, .world-card:focus-visible .world-card__image, .world-card.is-pressed .world-card__image { transform: scale(1.04); filter: brightness(1.08) saturate(1.06); } .world-core:hover, .world-core:focus-visible, .world-core.is-pressed { transform: none; filter: none; } .world-core:hover img.mv-orb-bubble__standalone, .world-core:focus-visible img.mv-orb-bubble__standalone, .world-core.is-pressed img.mv-orb-bubble__standalone { animation-play-state: paused; } .world-card__image img, .world-card-media img { width: auto; max-width: 100%; height: auto; max-height: clamp(96px, 9vw, 148px); object-fit: contain; display: block; background: transparent; image-rendering: auto; filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.5)); } .world-card[data-go="home"] .world-card__image img { max-height: clamp(96px, 9vw, 148px); filter: drop-shadow(0 24px 56px rgba(0, 0, 0, 0.55)); } .world-card:not([data-go="home"]) .world-card__image img { mix-blend-mode: normal; } .world-card__label, .world-card-label { margin-top: 10px; position: static; left: auto; bottom: auto; max-width: 100%; padding: 0 4px; border-radius: 0; background: transparent; color: #fff; font-size: clamp(14px, 0.9vw, 17px); line-height: 1.15; font-weight: 800; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75); backdrop-filter: none; white-space: normal; overflow-wrap: anywhere; text-align: center; } /* Kreis-Orbit — kompakter in Übersicht, ausgewogen im Fokus */ .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus { width: min(50vw, 620px); height: min(50vw, 620px); --card-orbit: 34cqmin; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card { width: clamp(118px, 8.4vw, 168px); } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card__image img { max-height: clamp(88px, 8.2vw, 132px); } .world-zone.is-focus { --card-orbit: 0; } .world-zone.is-scene-active .world-card { animation: mvCardFloat 4.2s ease-in-out infinite; } .world-zone.is-scene-active .world-card:nth-child(2) { animation-delay: 0.25s; } .world-zone.is-scene-active .world-card:nth-child(3) { animation-delay: 0.5s; } .world-zone.is-scene-active .world-card:nth-child(4) { animation-delay: 0.75s; } .world-zone.is-scene-active .world-card:nth-child(5) { animation-delay: 1s; } @keyframes mvCardFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } .world-zone--professional .world-card { animation-duration: 5s; } .world-zone--freiraum .world-card__image { filter: saturate(1.05); } .world-zone:hover .world-card, .world-zone.is-active .world-card, .world-zone.is-scene-active .world-card { opacity: 1; } .world-zone.is-scene-active, .world-zone.is-visible { z-index: var(--z-cards); } .world-zone.is-focus { width: min(50vw, 620px); height: min(50vw, 620px); z-index: var(--z-world); } .world-zone:hover .world-card, .world-zone.is-active .world-card, .world-zone.is-scene-active .world-card { filter: brightness(1.06) saturate(1.08); } .world-zone:hover .world-card, .world-zone.is-active .world-card, .world-zone.is-scene-active .world-card, .world-card:hover, .world-card:focus-visible { transform: translate(-50%, -50%) rotate(var(--card-angle, 0deg)) translateY(calc(-1 * var(--card-orbit, 26cqmin))) rotate(calc(-1 * var(--card-angle, 0deg))) scale(1.04); } .world-card:hover, .world-card:focus-visible { z-index: var(--z-card-hover); } .world-card:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .world-zone--nexora .world-card__image, .world-zone--nexora .world-card-media { border: none; } .world-zone--professional .world-card__image, .world-zone--professional .world-card-media { border: none; } .world-zone--freiraum .world-card__image, .world-zone--freiraum .world-card-media { border: none; } .world-zone--nexora .world-card__label, .world-zone--nexora .world-card-label { color: #9ee8ff; } .world-zone--professional .world-card__label, .world-zone--professional .world-card-label { color: #eef1f6; } .world-zone--freiraum .world-card__label, .world-zone--freiraum .world-card-label { color: #ffb8d8; } .mv-scroll-story--v6 .mv-world-stage__topics { display: none; } @media (min-width: 1100px) and (max-width: 1439px) { .world-card { width: clamp(145px, 10vw, 200px); } } @media (min-width: 768px) and (max-width: 1099px) { .world-card { width: clamp(135px, 18vw, 185px); } } @media (max-width: 1439px) { .mv-scroll-orb.world-zone { width: min(46vw, 600px); height: min(46vw, 600px); } .mv-scroll-orb.world-zone.is-focus, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus { width: min(52vw, 580px); height: min(52vw, 580px); } .mv-scroll-story.is-js-ready[data-layout="overview"] .mv-scroll-orb.world-zone { width: clamp(180px, 18vw, 300px); height: clamp(180px, 18vw, 300px); } } @media (max-width: 1099px) { .mv-scroll-orb.world-zone { width: min(54vw, 460px); height: min(54vw, 460px); } .mv-scroll-orb.world-zone.is-focus { width: min(62vw, 560px); height: min(62vw, 560px); } } @media (max-width: 767px) { .mv-scroll-orb.world-zone { width: min(88vw, 360px); height: auto; min-height: 380px; } .world-core { position: relative; inset: auto; width: min(72vw, 300px); height: min(72vw, 300px); margin: 0 auto 16px; } .world-collage { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; opacity: 1; visibility: visible; transform: none; filter: saturate(1) brightness(1); padding: 0 8px 12px; } .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-active .world-card, .mv-scroll-story[data-layout="overview"] .world-zone.is-reveal-focus .world-card, .mv-scroll-story[data-collage-focus="all"] .world-zone.is-scene-active .world-card, .mv-scroll-story[data-layout="overview"] .world-zone.is-merge-active .world-card, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card { display: flex; } .world-card { position: relative; width: 100%; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; opacity: 1; animation: none !important; } .world-card:last-child { grid-column: 1 / -1; max-width: 280px; margin-inline: auto; } .world-card__image, .world-card-media { width: 100%; } .world-cards-more { display: inline-flex; grid-column: 1 / -1; justify-content: center; } .world-card span, .world-card-label { font-size: 14px; padding: 7px 10px; } .world-core span, .world-name { font-size: clamp(14px, 4vw, 16px); letter-spacing: 0.18em; } } .mv-scroll-orb { position: absolute; left: 50%; top: 38%; width: clamp(200px, 26vw, 500px); aspect-ratio: 1; border: 0; padding: 0; background: transparent; cursor: pointer; pointer-events: auto; transform: translate3d(-50%, -50%, 0); filter: drop-shadow(0 28px 60px rgba(0, 0, 0, 0.45)); transition: filter 0.5s ease; } .mv-scroll-orb.is-dominant { filter: drop-shadow(0 40px 90px rgba(0, 0, 0, 0.5)); } .mv-scroll-story[data-dominant-orb="nexora"] .mv-scroll-orb--nexora.is-dominant { filter: drop-shadow(0 0 48px rgba(0, 168, 255, 0.45)) drop-shadow(0 36px 80px rgba(0, 0, 0, 0.42)); } .mv-scroll-story[data-dominant-orb="professional"] .mv-scroll-orb--professional.is-dominant { filter: drop-shadow(0 0 36px rgba(207, 213, 223, 0.35)) drop-shadow(0 36px 80px rgba(0, 0, 0, 0.42)); } .mv-scroll-story[data-dominant-orb="freiraum"] .mv-scroll-orb--freiraum.is-dominant { filter: drop-shadow(0 0 52px rgba(255, 75, 163, 0.42)) drop-shadow(0 36px 80px rgba(0, 0, 0, 0.42)); } .mv-scroll-orb img { width: 100%; height: 100%; object-fit: contain; display: block; } .mv-orb-bubble { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; } .mv-orb-bubble--standalone { overflow: visible; } .mv-orb-bubble__standalone { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; z-index: 2; } .mv-world-stage__radial { position: absolute; left: 50%; top: 36%; width: min(44vw, 500px); height: min(44vw, 500px); transform: translate(-50%, -50%); object-fit: contain; opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 0; } .mv-transition-trail { position: absolute; left: 50%; top: 42%; width: min(72vw, 920px); height: min(36vh, 320px); transform: translate(-50%, -50%); object-fit: contain; opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 2; filter: drop-shadow(0 0 40px rgba(104, 231, 255, 0.2)); } .mv-world-stage__overlay--merge { position: absolute; left: 50%; top: 38%; width: min(56vw, 640px); height: min(56vw, 640px); transform: translate(-50%, -50%); object-fit: contain; opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 1; } .mv-scroll-slide--transition .world-visual__breath { position: absolute; inset: 10% 8%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 68%); opacity: 0.6; pointer-events: none; } .mv-scroll-story--v4.mv-scroll-story--reduced .mv-transition-trail { display: none; } .mv-world-accent__img { position: absolute; object-fit: contain; opacity: 0; pointer-events: none; filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.28)); mix-blend-mode: screen; } .mv-world-accent--nexora .mv-world-accent__img--0 { left: 2%; top: 10%; width: min(30vw, 340px); } .mv-world-accent--nexora .mv-world-accent__img--1 { right: 4%; top: 18%; width: min(26vw, 300px); } .mv-world-accent--nexora .mv-world-accent__img--2 { left: 8%; bottom: 14%; width: min(24vw, 280px); } .mv-world-accent--professional .mv-world-accent__img--0 { right: 6%; top: 12%; width: min(28vw, 320px); } .mv-world-accent--professional .mv-world-accent__img--1 { left: 4%; bottom: 16%; width: min(26vw, 290px); } .mv-world-accent--professional .mv-world-accent__img--2 { right: 14%; bottom: 22%; width: min(22vw, 260px); } .mv-world-accent--freiraum .mv-world-accent__img--0 { left: 6%; top: 14%; width: min(28vw, 310px); } .mv-world-accent--freiraum .mv-world-accent__img--1 { right: 6%; top: 8%; width: min(30vw, 330px); } .mv-world-accent--freiraum .mv-world-accent__img--2 { right: 10%; bottom: 18%; width: min(24vw, 270px); } .world-core span, .world-name, .world-core .mv-orb-bubble__label { position: absolute; left: 50%; right: auto; bottom: 8%; top: auto; transform: translate(-50%, 0); translate: none; font-size: clamp(16px, 1.05vw, 21px); letter-spacing: 0.22em; font-weight: 800; line-height: 1.2; text-transform: uppercase; text-shadow: 0 0 22px rgba(0, 0, 0, 0.72); opacity: 1; z-index: 4; white-space: nowrap; pointer-events: none; transition: border-color 0.35s ease, color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .mv-scroll-story[data-layout="overview"] .world-zone .world-name, .mv-scroll-story[data-layout="overview"] .world-zone .mv-orb-bubble__label { opacity: 1; } @media (max-width: 1439px) { .world-core span, .world-name, .world-core .mv-orb-bubble__label { font-size: clamp(15px, 1.1vw, 18px); } } @media (max-width: 1099px) { .world-core span, .world-name, .world-core .mv-orb-bubble__label { font-size: clamp(14px, 1.4vw, 17px); } } @media (max-width: 767px) { .world-core span, .world-name, .world-core .mv-orb-bubble__label { font-size: clamp(14px, 4vw, 16px); letter-spacing: 0.18em; } } .mv-orb-bubble__label, .mv-scroll-orb span.mv-orb-bubble__label { position: absolute; left: 50%; right: auto; bottom: 8%; top: auto; transform: translate(-50%, 0); translate: none; opacity: 1; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); font-size: clamp(15px, 1vw, 19px); letter-spacing: 0.22em; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); text-shadow: 0 0 18px rgba(0, 0, 0, 0.65); transition: border-color 0.35s ease, color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; z-index: 4; white-space: nowrap; } .world-core .mv-orb-bubble__label, .world-core .world-name, .world-core:hover .mv-orb-bubble__label, .world-core:hover .world-name, .world-core:focus-visible .mv-orb-bubble__label, .world-zone:hover .world-core .mv-orb-bubble__label, .world-zone.is-focus .world-core .mv-orb-bubble__label, .world-zone.is-focus:hover .world-core .mv-orb-bubble__label, .mv-scroll-orb.world-zone:hover .world-core .mv-orb-bubble__label, .mv-scroll-orb.world-zone.is-focus .world-core .mv-orb-bubble__label { left: 50% !important; right: auto !important; bottom: 8% !important; transform: translate(-50%, 0) !important; translate: none !important; } .mv-scroll-orb.is-labeled .mv-orb-bubble__label, .mv-scroll-story[data-layout="overview"] .mv-scroll-orb.is-labeled .mv-orb-bubble__label { opacity: 1; transform: translate(-50%, 0); } .mv-scroll-orb.is-dominant .mv-orb-bubble__label { opacity: 1; transform: translate(-50%, 0); font-weight: 600; } .mv-scroll-orb--nexora.is-labeled .mv-orb-bubble__label { color: #68e7ff; border-color: rgba(104, 231, 255, 0.5); background: rgba(0, 24, 56, 0.72); box-shadow: 0 0 20px rgba(0, 168, 255, 0.25); } .mv-scroll-orb--professional.is-labeled .mv-orb-bubble__label { color: #e8ecf2; border-color: rgba(207, 213, 223, 0.45); background: rgba(18, 22, 30, 0.72); box-shadow: 0 0 18px rgba(201, 162, 39, 0.12); } .mv-scroll-orb--freiraum.is-labeled .mv-orb-bubble__label { color: #ff9bc2; border-color: rgba(255, 75, 163, 0.48); background: rgba(40, 8, 32, 0.72); box-shadow: 0 0 22px rgba(255, 75, 163, 0.22); } .mv-scroll-orb:hover > .mv-orb-bubble__label, .mv-scroll-orb:focus-visible > .mv-orb-bubble__label { opacity: 1; outline: none; } .mv-scroll-orb span:not(.mv-orb-bubble__label) { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; opacity: 0; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; transition: opacity 0.35s ease, transform 0.35s ease; } .mv-scroll-orb:hover span, .mv-scroll-orb:focus-visible span { opacity: 1; transform: translateY(-6px); outline: none; } .mv-scroll-slides { position: absolute; inset: 0; pointer-events: none; } .mv-scroll-slide { position: absolute; z-index: 12; width: min(520px, 86vw); margin: 0; padding: clamp(22px, 3vw, 28px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 26px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)); backdrop-filter: blur(22px); box-shadow: 0 32px 90px rgba(0, 0, 0, 0.34); opacity: 0; will-change: transform, opacity; pointer-events: none; } .mv-scroll-slide__eyebrow { margin: 0 0 10px; color: #ff4ba3; font-size: var(--text-sm); letter-spacing: 0.26em; text-transform: uppercase; } .mv-scroll-slide h2 { margin: 0 0 12px; font-size: var(--title-md); line-height: 1.18; text-transform: uppercase; background: linear-gradient(90deg, #5ec4ff, #9b6bff 22%, #ff59b2 48%, #ff9b37 72%, #ffd86a); -webkit-background-clip: text; background-clip: text; color: transparent; } .mv-scroll-slide__body { margin: 0; color: rgba(247, 244, 255, 0.7); font-size: var(--text-md); line-height: 1.62; } .mv-scroll-slide__enter, .mv-scroll-slide__ctas { margin-top: 18px; } .mv-scroll-slide__ctas { display: flex; flex-wrap: wrap; gap: 10px; } .world-copy.copy--left-bottom, .world-copy.copy--left-mid, .world-copy.copy--right-mid, .world-copy.copy--right-bottom, .world-copy.copy--center-bottom, .world-copy.copy--center-mid, .world-copy.copy--center-top { left: auto; right: auto; top: auto; bottom: auto; transform: none; } .world-copy.copy--center-bottom, .world-copy.copy--center-mid, .world-copy.copy--center-top { text-align: center; } .world-copy.copy--center-top { max-width: min(680px, 78vw); margin-inline: auto; } .mv-scroll-slide[data-slide="0"] { top: 38%; width: min(1180px, 100%); } .mv-scroll-slide[data-slide="0"] .world-step--center { align-content: start; padding-top: clamp(12px, 2vh, 28px); min-height: auto; } .mv-scroll-slide[data-slide="0"] .world-copy h2 { font-size: var(--title-xl); max-width: 18ch; line-height: 1.08; margin-inline: auto; text-transform: uppercase; letter-spacing: 0.1em; } .mv-scroll-story[data-active-world="nexora"] .mv-scroll-slide.is-active { border-color: rgba(0, 168, 255, 0.35); box-shadow: 0 0 60px rgba(0, 168, 255, 0.12); } .mv-scroll-story[data-active-world="professional"] .mv-scroll-slide.is-active { border-color: rgba(207, 213, 223, 0.32); } .mv-scroll-story[data-active-world="freiraum"] .mv-scroll-slide.is-active { border-color: rgba(255, 75, 163, 0.38); box-shadow: 0 0 70px rgba(255, 75, 163, 0.14); } .mv-scroll-portfolio { position: absolute; left: 50%; top: 52%; display: grid; grid-template-columns: repeat(2, minmax(128px, 1fr)); gap: 12px; width: min(480px, 84vw); padding: 0; opacity: 0; transform: translate3d(-50%, -50%, 0); pointer-events: none; z-index: var(--z-final-cta); border: 1px solid transparent; border-radius: 22px; background: transparent; transition: border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease; } .mv-scroll-story.is-portfolio-frame-visible .mv-scroll-portfolio { padding: clamp(18px, 2.4vw, 26px); border-color: rgba(255, 255, 255, calc(0.1 + var(--portfolio-frame-op, 0) * 0.18)); background: linear-gradient( 155deg, rgba(8, 14, 28, calc(var(--portfolio-frame-op, 0) * 0.72)), rgba(5, 9, 20, calc(var(--portfolio-frame-op, 0) * 0.52)) ); backdrop-filter: blur(calc(var(--portfolio-frame-op, 0) * 22px)); box-shadow: 0 24px 64px rgba(0, 0, 0, calc(var(--portfolio-frame-op, 0) * 0.28)); } .mv-scroll-story.is-portfolio-visible .mv-scroll-card { opacity: 1; } .mv-scroll-story:not(.is-portfolio-visible) .mv-scroll-card { opacity: 0; pointer-events: none; } .mv-scroll-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(8, 12, 22, 0.55); backdrop-filter: blur(16px); text-align: center; color: #f7f4ff; text-decoration: none; cursor: pointer; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease; } .mv-scroll-story.is-portfolio-visible .mv-scroll-card { animation: mv-cta-in 0.45s ease backwards; pointer-events: auto; } .mv-scroll-story.is-portfolio-hold .mv-scroll-cue span::after { content: " · weiter scrollen"; opacity: 0.72; font-size: 0.82em; letter-spacing: 0.06em; } .mv-scroll-story.is-portfolio-unlocked .mv-scroll-cue { opacity: 0 !important; } .mv-scroll-story.is-portfolio-visible .mv-scroll-card:nth-child(1) { animation-delay: 0.02s; } .mv-scroll-story.is-portfolio-visible .mv-scroll-card:nth-child(2) { animation-delay: 0.08s; } .mv-scroll-story.is-portfolio-visible .mv-scroll-card:nth-child(3) { animation-delay: 0.14s; } .mv-scroll-story.is-portfolio-visible .mv-scroll-card:nth-child(4) { animation-delay: 0.2s; } @keyframes mv-cta-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .mv-scroll-card:hover, .mv-scroll-card:focus-visible { transform: scale(1.02); border-color: rgba(104, 231, 255, 0.45); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), 0 0 32px rgba(104, 231, 255, 0.22); } .mv-scroll-card__label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; } .mv-scroll-card__sub { color: rgba(247, 244, 255, 0.62); font-size: 0.74rem; line-height: 1.35; max-width: 100%; } .mv-scroll-progress { display: none !important; } .mv-scroll-cue { position: absolute; left: 50%; bottom: 3.5vh; translate: -50% 0; margin: 0; color: rgba(255, 255, 255, 0.45); font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase; z-index: 18; display: grid; justify-items: center; gap: 10px; } .mv-scroll-cue::after { content: ""; width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(104, 231, 255, 0.8), transparent); animation: mvCuePulse 2.2s ease-in-out infinite; } @keyframes mvCuePulse { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(8px); opacity: 1; } } @media (max-width: 680px) { .mv-scroll-story--mobile { height: auto; } .mv-scroll-story--mobile .mv-scroll-sticky { position: relative; height: auto; min-height: 100dvh; padding: 96px 18px 48px; display: grid; gap: 20px; } .mv-scroll-story--mobile .mv-scroll-depth--back { position: fixed; inset: 0; z-index: 0; } .mv-scroll-story--mobile .mv-scroll-depth--mid { position: relative; min-height: 280px; z-index: 2; } .mv-scroll-story--mobile .mv-scroll-deco-set { display: none; } .mv-scroll-story--mobile .mv-scroll-orbs { position: relative; inset: auto; display: grid; gap: 16px; pointer-events: auto; } .mv-scroll-story--mobile .mv-scroll-orb { position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; filter: none !important; width: min(86vw, 360px); margin: 0 auto; } .mv-scroll-story--mobile .mv-orb-bubble__preview { width: 58%; height: 58%; } .mv-scroll-story--mobile .mv-scroll-orb span { opacity: 1; } .mv-scroll-story--mobile .mv-scroll-slides { position: relative; display: grid; gap: 16px; pointer-events: auto; } .mv-scroll-story--mobile .mv-scroll-slide { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto; opacity: 1 !important; transform: none !important; pointer-events: auto; text-align: left; } .mv-scroll-story--mobile .mv-scroll-portfolio { position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; width: auto; pointer-events: auto; } .mv-scroll-story--mobile .mv-scroll-cue { display: none; } } @media (prefers-reduced-motion: reduce) { .mv-scroll-stars { animation: none; } .mv-scroll-story--reduced { height: auto; } .mv-scroll-story--reduced .mv-scroll-sticky { position: relative; height: auto; padding: 96px 18px 40px; } .mv-scroll-story--reduced .mv-scroll-slide { position: relative !important; inset: auto !important; transform: none !important; opacity: 1 !important; margin-bottom: 16px; } .mv-scroll-story--reduced .mv-scroll-slides { position: relative; display: grid; gap: 16px; } .mv-scroll-story--reduced .mv-scroll-cue { display: none; } } /* ── V3: Typografie, Topic-Cards, Atmosphäre, Farbwelten ── */ .mv-particle-field { position: absolute; inset: -6%; opacity: 0; background-size: cover; background-position: center; mix-blend-mode: screen; pointer-events: none; } .mv-topic-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 12px; width: 100%; max-width: 460px; opacity: 0; pointer-events: none; left: auto; right: auto; top: auto; bottom: auto; transform: none; } .mv-topic-grid--nexora, .mv-topic-grid--professional, .mv-topic-grid--freiraum { left: auto; right: auto; top: auto; bottom: auto; transform: none; } .mv-topic-card { padding: 16px 16px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(6, 10, 22, 0.62); backdrop-filter: blur(16px); opacity: 0; will-change: transform, opacity; transition: border-color 0.35s ease, box-shadow 0.35s ease; } .mv-topic-card:hover { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } .mv-topic-card h3 { margin: 0 0 6px; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; } .mv-topic-card p { margin: 0; font-size: 0.72rem; line-height: 1.48; color: rgba(247, 244, 255, 0.68); } .mv-topic-grid--nexora .mv-topic-card { font-family: "Orbitron", ui-monospace, monospace; border-color: rgba(0, 168, 255, 0.35); box-shadow: 0 0 24px rgba(0, 168, 255, 0.12); } .mv-topic-grid--nexora .mv-topic-card h3 { color: #68e7ff; } .mv-topic-grid--professional .mv-topic-card { font-family: "IBM Plex Sans", system-ui, sans-serif; border-color: rgba(207, 213, 223, 0.28); background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); } .mv-topic-grid--professional .mv-topic-card h3 { color: #e8ecf2; letter-spacing: 0.06em; text-transform: none; } .mv-topic-grid--freiraum .mv-topic-card { font-family: "Sora", system-ui, sans-serif; border-color: rgba(255, 75, 163, 0.38); background: linear-gradient(145deg, rgba(255, 75, 163, 0.12), rgba(255, 138, 61, 0.06)); } .mv-topic-grid--freiraum .mv-topic-card h3 { color: #ff8ab8; } .mv-scroll-slide--nexora { font-family: "Orbitron", ui-monospace, monospace; } .mv-scroll-slide--nexora h2 { letter-spacing: 0.08em; font-size: var(--title-md); background: linear-gradient(90deg, #68e7ff, #00a8ff 40%, #0057ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .mv-scroll-slide--nexora .mv-scroll-slide__eyebrow { color: #68e7ff; letter-spacing: 0.32em; } .mv-scroll-slide--professional { font-family: "IBM Plex Sans", system-ui, sans-serif; } .mv-scroll-slide--professional h2 { text-transform: none; letter-spacing: 0.02em; background: linear-gradient(90deg, #f3f6fa, #cfd5df 50%, #c9a227); -webkit-background-clip: text; background-clip: text; color: transparent; } .mv-scroll-slide--professional .mv-scroll-slide__eyebrow { color: #cfd5df; letter-spacing: 0.2em; } .mv-scroll-slide--freiraum { font-family: "Sora", system-ui, sans-serif; } .mv-scroll-slide--freiraum h2 { letter-spacing: 0.04em; background: linear-gradient(120deg, #ff4ba3, #ff8a3d 45%, #b77dff); -webkit-background-clip: text; background-clip: text; color: transparent; } .mv-scroll-slide--freiraum .mv-scroll-slide__eyebrow { color: #ff8ab8; } .mv-scroll-story[data-active-world="multiversum"] { --mv-accent: #a78bfa; --mv-copy-bg: linear-gradient(155deg, rgba(32, 20, 72, 0.78), rgba(14, 24, 58, 0.7)); --mv-copy-border: rgba(167, 139, 250, 0.34); --mv-copy-text: rgba(230, 224, 255, 0.9); --mv-copy-shadow: 0 22px 56px rgba(100, 80, 200, 0.18); } .mv-scroll-story[data-active-world="nexora"] { --mv-accent: #00a8ff; --mv-copy-bg: linear-gradient(155deg, rgba(0, 36, 72, 0.78), rgba(0, 18, 48, 0.68)); --mv-copy-border: rgba(0, 168, 255, 0.34); --mv-copy-text: rgba(186, 228, 255, 0.88); --mv-copy-shadow: 0 22px 56px rgba(0, 80, 160, 0.2); } .mv-scroll-story[data-active-world="professional"] { --mv-accent: #cfd5df; --mv-copy-bg: linear-gradient(155deg, rgba(36, 42, 54, 0.8), rgba(22, 26, 36, 0.66)); --mv-copy-border: rgba(207, 213, 223, 0.28); --mv-copy-text: rgba(232, 236, 242, 0.86); --mv-copy-shadow: 0 22px 56px rgba(0, 0, 0, 0.28); } .mv-scroll-story[data-active-world="freiraum"] { --mv-accent: #ff4ba3; --mv-copy-bg: linear-gradient(155deg, rgba(56, 12, 48, 0.78), rgba(28, 8, 38, 0.66)); --mv-copy-border: rgba(255, 75, 163, 0.36); --mv-copy-text: rgba(255, 200, 224, 0.88); --mv-copy-shadow: 0 22px 56px rgba(255, 75, 163, 0.16); } .mv-world-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; } .mv-scroll-story[data-active-world="nexora"] .mv-world-tint { opacity: 1; background: radial-gradient(ellipse 72% 58% at 24% 46%, rgba(0, 120, 255, 0.16), transparent 68%), radial-gradient(ellipse 40% 35% at 90% 18%, rgba(0, 168, 255, 0.08), transparent 70%); } .mv-scroll-story[data-active-world="professional"] .mv-world-tint { opacity: 1; background: radial-gradient(ellipse 68% 55% at 76% 44%, rgba(207, 213, 223, 0.1), transparent 68%), radial-gradient(ellipse 35% 30% at 12% 72%, rgba(201, 162, 39, 0.06), transparent 70%); } .mv-scroll-story[data-active-world="freiraum"] .mv-world-tint { opacity: 1; background: radial-gradient(ellipse 70% 56% at 28% 48%, rgba(255, 75, 163, 0.14), transparent 68%), radial-gradient(ellipse 42% 38% at 82% 28%, rgba(255, 138, 61, 0.1), transparent 72%); } .mv-world-accents { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .mv-world-accent { position: absolute; inset: 0; opacity: 0; } .mv-scroll-story[data-active-world="nexora"] .mv-scroll-slide--nexora .world-copy, .mv-scroll-story[data-active-world="professional"] .mv-scroll-slide--professional .world-copy, .mv-scroll-story[data-active-world="freiraum"] .mv-scroll-slide--freiraum .world-copy { background: var(--mv-copy-bg); border-color: var(--mv-copy-border); box-shadow: var(--mv-copy-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .mv-scroll-story[data-active-world="nexora"] .mv-scroll-slide--nexora .mv-scroll-slide__body, .mv-scroll-story[data-active-world="professional"] .mv-scroll-slide--professional .mv-scroll-slide__body, .mv-scroll-story[data-active-world="freiraum"] .mv-scroll-slide--freiraum .mv-scroll-slide__body { color: var(--mv-copy-text); } .mv-scroll-story[data-active-world="nexora"] .world-visual__label { color: #68e7ff; text-shadow: 0 0 24px rgba(0, 168, 255, 0.45); } .mv-scroll-story[data-active-world="professional"] .world-visual__label { color: #e8ecf2; text-shadow: 0 0 20px rgba(207, 213, 223, 0.25); } .mv-scroll-story[data-active-world="freiraum"] .world-visual__label { color: #ff9bc2; text-shadow: 0 0 24px rgba(255, 75, 163, 0.35); } /* NEXORA HUD */ .mv-atmo { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s linear; } .mv-hud { position: absolute; inset: 8%; } .mv-hud__corner { position: absolute; width: 42px; height: 42px; border: 1px solid rgba(104, 231, 255, 0.55); } .mv-hud__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; } .mv-hud__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; } .mv-hud__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; } .mv-hud__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; } .mv-hud__scan { position: absolute; left: 10%; right: 10%; top: 22%; height: 1px; background: linear-gradient(90deg, transparent, #68e7ff, transparent); animation: mvHudScan 3.2s ease-in-out infinite; } .mv-hud__label { position: absolute; left: 0; top: 0; font-family: "Orbitron", monospace; font-size: 10px; letter-spacing: 0.28em; color: rgba(104, 231, 255, 0.8); } .mv-data-stream { position: absolute; right: 12%; top: 18%; width: 2px; height: 40%; background: linear-gradient(to bottom, transparent, #00a8ff, transparent); opacity: 0.5; } @keyframes mvHudScan { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(120px); opacity: 1; } } /* PROFESSIONAL Glas */ .mv-glass-panel { position: absolute; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(18px); border-radius: 4px; } .mv-glass-panel--a { left: 8%; top: 16%; width: 22vw; height: 18vh; max-width: 280px; } .mv-glass-panel--b { right: 10%; top: 28%; width: 18vw; height: 22vh; max-width: 220px; } .mv-glass-panel--c { left: 18%; bottom: 18%; width: 26vw; height: 14vh; max-width: 320px; } /* FREIRAUM organisch */ .mv-organic { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.55; } .mv-organic--a { width: 28vw; height: 28vw; max-width: 320px; max-height: 320px; right: 8%; top: 12%; background: radial-gradient(circle, rgba(255, 75, 163, 0.55), transparent 68%); } .mv-organic--b { width: 22vw; height: 22vw; max-width: 260px; max-height: 260px; left: 10%; bottom: 16%; background: radial-gradient(circle, rgba(255, 138, 61, 0.45), transparent 68%); } .mv-organic--c { width: 18vw; height: 18vw; max-width: 200px; max-height: 200px; right: 28%; bottom: 22%; background: radial-gradient(circle, rgba(183, 125, 255, 0.42), transparent 68%); } @media (max-width: 680px) { .mv-scroll-story--mobile .mv-layer { position: relative; transform: none !important; } .mv-scroll-story--mobile .mv-topic-grid { position: relative; inset: auto; transform: none !important; width: auto; opacity: 1 !important; } .mv-scroll-story--mobile .mv-topic-card { opacity: 1 !important; transform: none !important; } .mv-scroll-story--mobile .mv-atmo { display: none; } } :root { --title-xl: clamp(1.85rem, 3.8vw, 3.75rem); --title-lg: clamp(1.5rem, 2.4vw, 2.35rem); --title-md: clamp(1.2rem, 1.75vw, 1.65rem); --text-lg: clamp(0.9rem, 1vw, 1.05rem); --text-md: clamp(0.84rem, 0.9vw, 0.96rem); --text-sm: clamp(0.78rem, 0.82vw, 0.88rem); } @media (max-width: 1440px) { .mv-scroll-story { --title-xl: clamp(1.65rem, 3.2vw, 3rem); --title-lg: clamp(1.35rem, 2.1vw, 2rem); --title-md: clamp(1.1rem, 1.55vw, 1.45rem); --text-lg: clamp(0.86rem, 0.95vw, 0.98rem); --text-md: clamp(0.8rem, 0.85vw, 0.9rem); } } @media (max-width: 1024px) { .mv-scroll-story { --title-xl: clamp(1.5rem, 5vw, 2.5rem); --title-lg: clamp(1.25rem, 3.8vw, 1.85rem); --title-md: clamp(1.05rem, 3vw, 1.35rem); --text-lg: clamp(0.84rem, 1.05vw, 0.94rem); } } .layer-background { z-index: 0; } .layer-atmosphere { z-index: 1; } .layer-world { z-index: 2; } .layer-decor { z-index: 3; } .layer-content { z-index: 4; } .layer-ui { z-index: 10; } .mv-scroll-slides { inset: clamp(32px, 6vh, 72px) clamp(20px, 6vw, 96px); } .mv-scroll-slide { width: min(1280px, 100%); left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); background: transparent; border: 0; box-shadow: none; padding: 0; } .world-step { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: clamp(24px, 4.5vw, 72px); align-items: center; padding: clamp(64px, 10vh, 120px) clamp(20px, 2vw, 24px); } .world-step--center { grid-template-columns: minmax(0, 1fr); justify-items: center; } .world-step--visual-right { grid-template-columns: minmax(320px, 520px) minmax(0, 1fr); } .world-step--visual-right .world-copy { order: 1; justify-self: start; } .world-step--visual-right .world-visual { order: 2; } .world-visual { position: relative; z-index: 1; min-height: 280px; pointer-events: none; } .world-visual__label { margin: 0; font-size: clamp(1rem, 1.6vw, 1.4rem); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(247, 244, 255, 0.72); } .world-visual__hint { margin-top: 10px; color: rgba(247, 244, 255, 0.42); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .scene-copy { z-index: var(--z-copy); } .world-copy { position: relative; z-index: var(--z-copy); max-width: min(440px, 38vw); margin-inline: auto; padding: clamp(18px, 2.2vw, 26px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; background: linear-gradient(155deg, rgba(8, 14, 28, 0.72), rgba(5, 9, 20, 0.48)); backdrop-filter: blur(22px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06); will-change: transform, opacity; } .world-zone { z-index: var(--z-world); } .mv-scroll-portfolio, .final-cta-group { z-index: var(--z-card-hover); } .world-copy::before { content: ""; position: absolute; left: clamp(22px, 3vw, 30px); right: clamp(22px, 3vw, 30px); top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--mv-accent, rgba(104, 231, 255, 0.65)), transparent); opacity: 0.85; } .world-copy h2 { margin-top: 4px; line-height: 1.18; font-size: var(--title-md); letter-spacing: 0.02em; } .mv-scroll-slide[data-slide="0"] .world-copy h2 { font-size: var(--title-xl); max-width: 16ch; line-height: 1.1; } .mv-scroll-slide__eyebrow { margin: 0 0 10px; font-size: var(--text-sm); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(247, 244, 255, 0.55); } .mv-scroll-slide__enter.mv-form-btn { margin-top: 22px; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease, color 0.35s ease; } .mv-scroll-slide--nexora .mv-scroll-slide__enter.mv-form-btn { border-color: rgba(0, 168, 255, 0.5) !important; color: #68e7ff !important; background: rgba(0, 40, 80, 0.35) !important; box-shadow: none !important; } .mv-scroll-slide--nexora .mv-scroll-slide__enter.mv-form-btn:hover, .mv-scroll-slide--nexora .mv-scroll-slide__enter.mv-form-btn:focus-visible { transform: scale(1.02); border-color: rgba(104, 231, 255, 0.82) !important; color: #9ee8ff !important; background: rgba(0, 56, 112, 0.48) !important; box-shadow: 0 10px 32px rgba(0, 168, 255, 0.28) !important; } .mv-scroll-slide--professional .mv-scroll-slide__enter.mv-form-btn { border-color: rgba(207, 213, 223, 0.42) !important; color: #e8ecf2 !important; background: rgba(255, 255, 255, 0.06) !important; box-shadow: none !important; } .mv-scroll-slide--professional .mv-scroll-slide__enter.mv-form-btn:hover, .mv-scroll-slide--professional .mv-scroll-slide__enter.mv-form-btn:focus-visible { transform: scale(1.02); border-color: rgba(232, 236, 242, 0.72) !important; color: #f5f7fa !important; background: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 10px 30px rgba(207, 213, 223, 0.24), 0 0 24px rgba(207, 213, 223, 0.14) !important; } .mv-scroll-slide--freiraum .mv-scroll-slide__enter.mv-form-btn { border-color: rgba(255, 209, 102, 0.52) !important; color: #ffd166 !important; background: rgba(48, 36, 8, 0.34) !important; box-shadow: none !important; } .mv-scroll-slide--freiraum .mv-scroll-slide__enter.mv-form-btn:hover, .mv-scroll-slide--freiraum .mv-scroll-slide__enter.mv-form-btn:focus-visible { transform: scale(1.02); border-color: rgba(255, 216, 106, 0.82) !important; color: #ffe08a !important; background: rgba(56, 42, 10, 0.46) !important; box-shadow: 0 10px 32px rgba(255, 209, 102, 0.26) !important; } body[data-world="general"] .mv-scroll-story .mv-scroll-slide--nexora .mv-scroll-slide__enter.mv-form-btn:hover, body[data-world="general"] .mv-scroll-story .mv-scroll-slide--professional .mv-scroll-slide__enter.mv-form-btn:hover, body[data-world="general"] .mv-scroll-story .mv-scroll-slide--freiraum .mv-scroll-slide__enter.mv-form-btn:hover { text-decoration: none !important; } .mv-scroll-slide--world .world-copy h2, .mv-scroll-slide--world .mv-scroll-slide__eyebrow { display: none; } .scene-copy { display: grid; gap: 12px; } .mv-scroll-slide__lead { margin: 0; font-size: var(--text-md); line-height: 1.5; color: rgba(247, 244, 255, 0.92); } .mv-scroll-slide__lead strong { font-weight: 700; } .mv-scroll-slide--world .mv-scroll-slide__body { margin: 0; color: rgba(247, 244, 255, 0.68); } .world-step--split .world-copy { justify-self: start; max-width: min(400px, 34vw); } .world-step--visual-right .world-copy { justify-self: start; } .world-step--split:not(.world-step--visual-right) .world-copy { justify-self: end; } .world-step--split .world-visual { min-height: 1px; } .world-copy--dormant { visibility: hidden; opacity: 0 !important; pointer-events: none; } .mv-scroll-slide--enter .world-visual__label { font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: 0.32em; } .world-step--center .world-visual { display: none; } .world-copy .mv-scroll-slide__body { font-size: var(--text-md); line-height: 1.62; } .mv-scroll-slide h2 { font-size: var(--title-md); } .mv-topic-wrap { position: relative; inset: auto; opacity: 0; pointer-events: none; display: grid; gap: 12px; } .mv-orb-mini-stack { position: relative; z-index: 2; width: 100%; max-width: 360px; display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px; left: auto; right: auto; top: auto; } .mv-orb-mini-stack--nexora, .mv-orb-mini-stack--professional, .mv-orb-mini-stack--freiraum { left: auto; right: auto; top: auto; } .mv-orb-mini { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 10px 10px 12px; background: rgba(5, 9, 20, 0.42); backdrop-filter: blur(10px); opacity: 0; } .mv-orb-mini h4 { margin: 0; font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; } .mv-orb-mini--nexora h4 { color: #68e7ff; font-family: "Orbitron", ui-monospace, monospace; } .mv-orb-mini--professional h4 { color: #e9edf5; font-family: "IBM Plex Sans", system-ui, sans-serif; } .mv-orb-mini--freiraum h4 { color: #ff9bc2; font-family: "Sora", system-ui, sans-serif; } .mv-topic-card { min-height: 126px; } .mv-topic-card__kicker { display: inline-block; margin-bottom: 8px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(247, 244, 255, 0.52); } @media (max-width: 900px) { .world-step { grid-template-columns: 1fr; } .world-visual { order: 1; min-height: 120px; } .world-copy { order: 2; width: 100%; max-width: none; } .mv-scroll-slide--world .world-copy { width: 100%; max-width: 100%; height: auto; min-height: 0; } .mv-orb-mini-stack { position: relative; inset: auto; width: 100%; max-width: 560px; margin: 14px auto 0; } .mv-world-stage { position: relative; left: auto; right: auto; top: auto; width: 100%; height: auto; transform: none; margin-bottom: 8px; } .mv-scroll-story.is-js-ready .mv-world-stage .mv-scroll-orbs { position: relative; inset: auto; min-height: 240px; } .mv-scroll-story.is-js-ready[data-layout="split-world"][data-world-side="right"] .mv-world-stage, .mv-scroll-story.is-js-ready[data-layout="split-world"][data-world-side="left"] .mv-world-stage { right: auto; } } /* V16 recording audit — desktop parallax hero only */ @media (min-width: 1100px) { .mv-scroll-story { --mv-copy-w: clamp(360px, 34vw, 560px); --mv-orb-size: clamp(280px, 26vw, 470px); --mv-card-w: clamp(128px, 9.2vw, 178px); --mv-card-gap: clamp(22px, 2.2vw, 42px); } .mv-scroll-story.is-js-ready[data-layout="split-world"][data-world-side="right"] .mv-world-stage { left: auto; right: clamp(48px, 8vw, 120px); } .mv-scroll-story.is-js-ready[data-layout="split-world"][data-world-side="left"] .mv-world-stage { left: clamp(48px, 8vw, 120px); right: auto; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus { width: min(54vw, 760px); height: min(62vh, 680px); --card-orbit: 0; overflow: visible; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card[data-card="ueber-mich"] .world-card__image { height: clamp(88px, 6.8vw, 124px); } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card { width: var(--mv-card-w); transform: translate(-50%, -50%) scale(1) !important; rotate: none; z-index: 10; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card[data-card="home"] { display: none; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card__image { height: clamp(76px, 5.8vw, 108px); width: 100%; min-height: 0; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card__image img { max-height: none; height: 100%; width: 100%; object-fit: cover; object-position: center 20%; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card[data-card="projekte"] { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-30cqw, -24cqh) !important; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card[data-card="leistungen"] { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(30cqw, -24cqh) !important; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card[data-card="ueber-mich"] { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(-30cqw, 24cqh) !important; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card[data-card="kontakt"] { left: 50%; top: 50%; transform: translate(-50%, -50%) translate(30cqw, 24cqh) !important; } .mv-scroll-story[data-layout="split-world"] .world-zone--left-focus.is-focus .world-card[data-card="projekte"], .mv-scroll-story[data-layout="split-world"] .world-zone--right-focus.is-focus .world-card[data-card="projekte"] { transform: translate(-50%, -50%) translate(-30cqw, -24cqh) !important; } .mv-scroll-story[data-layout="split-world"] .world-zone--left-focus.is-focus .world-card[data-card="leistungen"], .mv-scroll-story[data-layout="split-world"] .world-zone--right-focus.is-focus .world-card[data-card="leistungen"] { transform: translate(-50%, -50%) translate(30cqw, -24cqh) !important; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-collage { pointer-events: none; z-index: 20; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card { cursor: pointer; pointer-events: auto; z-index: 30; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-core { inset: 28%; z-index: 50; pointer-events: auto; cursor: pointer; text-decoration: none; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-core, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-core * { cursor: pointer; } .mv-scroll-story .world-card__image, .mv-scroll-story .world-card__image img { pointer-events: none; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-core .world-name, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-core .mv-orb-bubble__label { opacity: 1 !important; visibility: visible !important; display: block !important; pointer-events: none; } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card:hover, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card:focus-visible, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card.is-pressed { z-index: calc(var(--z-cards) + 8); } .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card:hover .world-card__image, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card:focus-visible .world-card__image, .mv-scroll-story[data-layout="split-world"] .world-zone.is-focus .world-card.is-pressed .world-card__image { transform: scale(1.04); filter: brightness(1.08) saturate(1.06); } .world-core:focus-visible, .world-card:focus-visible { outline: 2px solid rgba(104, 231, 255, 0.65); outline-offset: 4px; } .mv-scroll-story.is-js-ready[data-layout="split-world"] .mv-world-stage .mv-world-zones { overflow: visible; } .mv-scroll-story .scene-copy { max-width: var(--mv-copy-w); } .mv-scroll-slide--world .world-copy { width: min(var(--mv-copy-w), 40vw); max-width: min(var(--mv-copy-w), 40vw); height: auto; min-height: 0; } .mv-scroll-slide--world .world-step--split .world-copy { max-width: min(var(--mv-copy-w), 40vw); } .mv-scroll-story[data-layout="split-world"] .mv-scroll-slide--world .mv-scroll-slide__body { font-size: clamp(16px, 1.15vw, 21px); line-height: 1.65; color: rgba(255, 255, 255, 0.78); } .mv-scroll-story[data-layout="split-world"] .world-card { display: flex; flex-direction: column; align-items: center; width: var(--mv-card-w); } .mv-scroll-story .world-card__image { overflow: hidden; width: 100%; aspect-ratio: 5 / 4; border-radius: clamp(12px, 1vw, 16px); background: rgba(8, 14, 28, 0.42); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); min-height: 0; } .mv-scroll-story .world-card__image img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 18%; filter: none; } .mv-scroll-story .world-card[data-card="home"] .world-card__image { aspect-ratio: 1 / 1; background: rgba(6, 10, 22, 0.55); } .mv-scroll-story .world-card[data-card="home"] .world-card__image img { object-fit: contain; object-position: center; padding: 12%; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35)); } .mv-scroll-story .world-card[data-card="ueber-mich"] .world-card__image { aspect-ratio: 3 / 4; } .mv-scroll-story .world-card[data-card="ueber-mich"] .world-card__image img { object-fit: cover; object-position: center 8%; } .mv-scroll-story .world-card__label { margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(6, 10, 22, 0.78); border: 1px solid rgba(255, 255, 255, 0.14); font-size: clamp(12px, 0.78vw, 15px); font-weight: 600; letter-spacing: 0.01em; text-shadow: none; line-height: 1.2; } } .mv-scroll-slide--world .scene-copy--world-explainer .mv-scroll-slide__eyebrow { display: block; margin: 0 0 8px; font-size: var(--text-sm); letter-spacing: 0.32em; color: var(--mv-accent, rgba(247, 244, 255, 0.72)); opacity: 0.88; } .mv-scroll-slide--world .scene-copy--world-explainer { gap: 12px; } .mv-scroll-slide--world .mv-scroll-slide__what, .mv-scroll-slide--world .mv-scroll-slide__purpose, .mv-scroll-slide--world .mv-scroll-slide__diff, .mv-scroll-slide--world .scene-copy--world-explainer .mv-scroll-slide__lead { opacity: 0; margin: 0; color: var(--mv-copy-text, rgba(247, 244, 255, 0.86)); line-height: 1.55; } .mv-scroll-slide--world .mv-scroll-slide__purpose, .mv-scroll-slide--world .mv-scroll-slide__diff { font-size: 0.94em; } /* Einheitliche Typo & Boxbreite — Referenz PROFESSIONAL, alle vier Welten gleich */ @media (min-width: 1100px) { .mv-scroll-slide--world .scene-copy--world-explainer { --mv-explainer-title: clamp(1.125rem, 1.75vw, 1.625rem); --mv-explainer-body: clamp(0.9375rem, 1.05vw, 1.0625rem); --mv-explainer-meta: clamp(0.875rem, 0.95vw, 1rem); --mv-explainer-eyebrow: 0.7rem; --mv-explainer-box-w: min(480px, 40vw); } .mv-scroll-slide--world .world-copy, .mv-scroll-slide--world .world-step--split .world-copy { width: var(--mv-explainer-box-w); max-width: var(--mv-explainer-box-w); } .mv-scroll-slide--world .scene-copy--world-explainer .mv-scroll-slide__eyebrow { font-size: var(--mv-explainer-eyebrow); letter-spacing: 0.28em; margin: 0 0 6px; } .mv-scroll-slide--world .scene-copy--world-explainer .mv-scroll-slide__lead, .mv-scroll-slide--world .scene-copy--world-explainer .mv-scroll-slide__lead strong { font-size: var(--mv-explainer-title) !important; line-height: 1.12 !important; letter-spacing: 0.03em !important; text-transform: none !important; margin: 0 !important; font-weight: 700; } .mv-scroll-slide--world .mv-scroll-slide__what { font-size: var(--mv-explainer-body) !important; line-height: 1.5 !important; } .mv-scroll-slide--world .mv-scroll-slide__purpose, .mv-scroll-slide--world .mv-scroll-slide__diff { font-size: var(--mv-explainer-meta) !important; line-height: 1.45 !important; } .mv-scroll-slide--world .mv-scroll-slide__enter.mv-form-btn { font-size: 0.75rem; margin-top: 6px; } } @media (min-width: 1920px) { .mv-scroll-slide--world .scene-copy--world-explainer { --mv-explainer-box-w: min(520px, 42vw); } } .mv-scroll-slide--world .world-copy { width: min(480px, 40vw); max-width: min(480px, 40vw); height: auto; min-height: 0; padding: 0; border: none; background: transparent; box-shadow: none; backdrop-filter: none; } .mv-scroll-slide--world .world-step--split .world-copy { width: min(480px, 40vw); max-width: min(480px, 40vw); } .mv-scroll-slide--world .scene-copy--world-explainer.scene-copy { width: 100%; height: auto; min-height: 0; max-width: none; margin: 0; padding: clamp(18px, 2.2vw, 26px); box-sizing: border-box; display: grid; gap: 12px; overflow: visible; border-radius: 20px; border: 1px solid var(--mv-copy-border) !important; background: var(--mv-copy-bg) !important; box-shadow: var(--mv-copy-shadow); backdrop-filter: blur(12px); } .mv-scroll-slide--world .world-copy::before { left: 0; right: 0; z-index: 1; } .mv-scroll-slide--world .mv-scroll-slide__enter.mv-form-btn { margin-top: 8px; } .mv-scroll-slide--multiversum .scene-copy--world-explainer { --mv-copy-bg: linear-gradient(155deg, rgba(32, 20, 72, 0.78), rgba(14, 24, 58, 0.7)); --mv-copy-border: rgba(167, 139, 250, 0.34); --mv-copy-text: rgba(230, 224, 255, 0.9); --mv-copy-shadow: 0 22px 56px rgba(100, 80, 200, 0.18); --mv-accent: #c4b5fd; } .mv-scroll-slide--nexora .scene-copy--world-explainer { --mv-copy-bg: linear-gradient(155deg, rgba(0, 36, 72, 0.78), rgba(0, 18, 48, 0.68)); --mv-copy-border: rgba(0, 168, 255, 0.34); --mv-copy-text: rgba(186, 228, 255, 0.88); --mv-copy-shadow: 0 22px 56px rgba(0, 80, 160, 0.2); --mv-accent: #38bdf8; } .mv-scroll-slide--professional .scene-copy--world-explainer { --mv-copy-bg: linear-gradient(155deg, rgba(36, 42, 54, 0.8), rgba(22, 26, 36, 0.66)); --mv-copy-border: rgba(207, 213, 223, 0.28); --mv-copy-text: rgba(232, 236, 242, 0.86); --mv-copy-shadow: 0 22px 56px rgba(0, 0, 0, 0.28); --mv-accent: #cfd5df; } .mv-scroll-slide--freiraum .scene-copy--world-explainer { --mv-copy-bg: linear-gradient(155deg, rgba(56, 12, 48, 0.78), rgba(28, 8, 38, 0.66)); --mv-copy-border: rgba(255, 75, 163, 0.36); --mv-copy-text: rgba(255, 200, 224, 0.88); --mv-copy-shadow: 0 22px 56px rgba(255, 75, 163, 0.16); --mv-accent: #ff8ab8; } /* Laptop (~14″): gleiche Typo, etwas kompaktere Box */ @media (min-width: 1100px) and (max-width: 1919px), (min-width: 1100px) and (max-height: 920px) { .mv-scroll-story { --mv-copy-w: clamp(300px, 30vw, 420px); } .world-step { padding: clamp(32px, 5vh, 56px) clamp(16px, 1.8vw, 20px); } .mv-scroll-slide--world .scene-copy--world-explainer { --mv-explainer-title: clamp(1.05rem, 1.55vw, 1.35rem); --mv-explainer-body: clamp(0.875rem, 0.98vw, 0.98rem); --mv-explainer-meta: clamp(0.8125rem, 0.9vw, 0.9375rem); --mv-explainer-eyebrow: 0.66rem; --mv-explainer-box-w: min(390px, 34vw); } .mv-scroll-slide--world .world-copy, .mv-scroll-slide--world .world-step--split .world-copy { width: var(--mv-explainer-box-w); max-width: var(--mv-explainer-box-w); } .mv-scroll-slide--world .scene-copy--world-explainer.scene-copy { padding: clamp(12px, 1.4vw, 16px); gap: 8px; border-radius: 16px; } .mv-scroll-slide--world .scene-copy--world-explainer { gap: 8px; } .mv-scroll-slide--world .scene-copy--world-explainer .mv-scroll-slide__eyebrow { margin: 0 0 4px; letter-spacing: 0.24em; } .mv-scroll-slide--world .mv-scroll-slide__enter.mv-form-btn { margin-top: 4px; font-size: 0.72rem; padding: 0.62em 1.1em; } }