#exv-store-energy-lab{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#030407;color:#fff} #exv-store-energy-lab *{box-sizing:border-box} #exv-store-energy-lab a{color:inherit;text-decoration:none} #exv-store-energy-lab button{font:inherit} #exv-store-energy-lab button:focus-visible,#exv-store-energy-lab a:focus-visible{outline:2px solid #ffdf57;outline-offset:5px} #exv-store-energy-lab{position:relative;isolation:isolate;height:100svh;min-height:480px;overflow:hidden} #exv-store-energy-lab .stage{position:absolute;z-index:0;width:var(--stage-width,100vw);height:1080px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--stage-scale,1));overflow:hidden;background:radial-gradient(ellipse 34% 42% at 51% 42%,#382439 0%,#15121c 46%,transparent 100%),radial-gradient(ellipse 26% 40% at 59% 69%,#322509bb,transparent 100%),#030407;isolation:isolate;pointer-events:none} #exv-store-energy-lab .stage::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 89px,#b7b1cb0a 90px),repeating-linear-gradient(90deg,transparent 0 89px,#b7b1cb0a 90px);opacity:.43} #exv-store-energy-lab .glow{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:1150px;height:900px;background:radial-gradient(ellipse,#f0259b23 0%,#f0259b0c 31%,transparent 66%);pointer-events:none} #exv-store-energy-lab .wordmark{position:absolute;bottom:-65px;left:50%;transform:translateX(-50%);font-size:clamp(170px,24vw,450px);font-weight:900;letter-spacing:-.095em;line-height:1;white-space:nowrap;color:#ffffff0b;user-select:none} #exv-store-energy-lab .bottom-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,#030407e8 0%,#0304076e 11%,transparent 30%,transparent 83%,#0304079a 100%)} #exv-store-energy-lab #exv-store-lab-app{position:absolute;inset:0;z-index:4;touch-action:none} #exv-store-energy-lab .conveyor{display:block;width:100%;height:100%;filter:drop-shadow(18px 28px 24px #000b)} #exv-store-energy-lab .project-links{position:absolute;inset:0;pointer-events:none} #exv-store-energy-lab .project-link{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:auto} #exv-store-energy-lab .project-link:focus-visible{clip-path:none;width:auto;height:auto;left:50%;bottom:24px;transform:translateX(-50%);padding:12px 18px;background:#141414;white-space:nowrap} #exv-store-energy-lab .project-link:focus-visible img{display:none} #exv-store-energy-lab #exv-store-lab-app.is-fallback{overflow:auto;touch-action:pan-y;padding:110px 24px 265px;z-index:8} #exv-store-energy-lab .is-fallback .conveyor{display:none} #exv-store-energy-lab .is-fallback .project-links{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px} #exv-store-energy-lab .is-fallback .project-link{position:static;width:auto;height:auto;clip-path:none;background:#181921;border:1px solid #ffffff25;border-radius:14px;padding:10px} #exv-store-energy-lab .is-fallback .project-link:focus-visible{transform:none;white-space:normal} #exv-store-energy-lab .is-fallback .project-link img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:9px} #exv-store-energy-lab .is-fallback .project-link span{display:block;padding:9px 4px 3px;font-size:14px} #exv-store-energy-lab .site-header{position:absolute;z-index:12;left:clamp(20px,4vw,65px);right:clamp(20px,4vw,65px);top:30px;display:flex;align-items:center;gap:30px;justify-content:space-between;pointer-events:none} #exv-store-energy-lab .site-header>*{pointer-events:auto} #exv-store-energy-lab .brand{display:flex;align-items:center;gap:12px;font-weight:850;letter-spacing:-.04em;font-size:25px} #exv-store-energy-lab .brand-mark{display:grid;place-items:center;width:35px;height:35px;background:#f030a0;clip-path:polygon(49% 0,12% 55%,48% 54%,34% 100%,90% 40%,56% 40%,72% 0);filter:drop-shadow(0 0 16px #fa2c9a55)} #exv-store-energy-lab .brand-mark::after{content:"";width:7px;height:20px;background:#fff;transform:rotate(23deg)} #exv-store-energy-lab .head-note{font-size:10px;color:#d3c6d3aa;text-transform:uppercase;letter-spacing:.27em} #exv-store-energy-lab .header-link{border:1px solid #ffffff5a;padding:13px 19px;border-radius:50px;font-size:12px;font-weight:700;letter-spacing:.045em;transition:background .2s} #exv-store-energy-lab .header-link:hover{background:#ffffff23} #exv-store-energy-lab .hero-copy{position:absolute;z-index:10;left:clamp(20px,5vw,78px);top:21%;width:min(40vw,470px);pointer-events:none} #exv-store-energy-lab .kicker{font-size:10px;font-weight:750;letter-spacing:.24em;color:#ffd957;text-transform:uppercase} #exv-store-energy-lab h2{font-size:clamp(42px,5.3vw,87px);line-height:.96;letter-spacing:-.075em;margin:20px 0 18px;font-weight:850} #exv-store-energy-lab h2 span{color:#ef3b9d} #exv-store-energy-lab .hero-copy p{color:#d5d5e0b8;font-size:clamp(13px,1.2vw,17px);line-height:1.62;max-width:340px;margin:0} #exv-store-energy-lab .details{position:absolute;right:clamp(22px,4vw,65px);bottom:150px;z-index:10;display:flex;flex-direction:column;gap:7px;width:min(28vw,345px);pointer-events:none;text-shadow:0 2px 12px #000} #exv-store-energy-lab .details>*{pointer-events:auto} #exv-store-energy-lab .detail-count{font-size:11px;letter-spacing:.16em;color:#f7d855;font-weight:700} #exv-store-energy-lab .detail-eyebrow{font-size:10px;letter-spacing:.2em;color:#d7d6e0aa;text-transform:uppercase} #exv-store-energy-lab .details h3{font-size:clamp(22px,2.1vw,32px);letter-spacing:-.055em;line-height:1.05;margin:6px 0} #exv-store-energy-lab .details p{font-size:13px;line-height:1.6;color:#d7d6e0c9;margin:0} #exv-store-energy-lab .navigation{position:absolute;z-index:13;bottom:52px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:7px;border:1px solid #ffffff24;background:#0e1017cf;backdrop-filter:blur(20px);border-radius:50px;max-width:calc(100vw - 32px)} #exv-store-energy-lab .navigation button{border:0;border-radius:50px;background:transparent;color:#c7c9d4;font-size:12px;font-weight:650;white-space:nowrap;padding:12px 16px;cursor:pointer;transition:background .2s,color .2s} #exv-store-energy-lab .navigation button:hover{color:#fff;background:#ffffff17} #exv-store-energy-lab .navigation button.active{background:#e93098;color:#fff;box-shadow:0 0 20px #e9309847} #exv-store-energy-lab .footer-meta{position:absolute;bottom:23px;left:clamp(20px,4vw,65px);right:clamp(20px,4vw,65px);z-index:12;display:flex;justify-content:space-between;align-items:center;gap:16px;pointer-events:none;color:#e1dfeb78;font-size:10px;letter-spacing:.13em} #exv-store-energy-lab .footer-meta a{pointer-events:auto;color:#eee} #exv-store-energy-lab .status{position:absolute;bottom:10px;left:16px;z-index:30;font-size:12px;padding:7px 12px;border-radius:5px;background:#3e182f;color:#fff;max-width:90vw} #exv-store-energy-lab .status[hidden]{display:none} @media (max-width:900px){#exv-store-energy-lab .head-note{display:none} #exv-store-energy-lab .hero-copy{top:17%;width:51vw} #exv-store-energy-lab .details{bottom:140px;width:37vw}} @media (max-width:640px){#exv-store-energy-lab{min-height:500px} #exv-store-energy-lab .site-header{top:18px;left:18px;right:18px} #exv-store-energy-lab .brand{font-size:20px} #exv-store-energy-lab .brand-mark{width:27px;height:27px} #exv-store-energy-lab .header-link{font-size:10px;padding:10px 12px} #exv-store-energy-lab .hero-copy{top:84px;left:22px;width:calc(100vw - 44px)} #exv-store-energy-lab h2{font-size:clamp(43px,11vw,65px);margin:10px 0 6px} #exv-store-energy-lab .hero-copy p{font-size:12px;max-width:300px;line-height:1.4} #exv-store-energy-lab .kicker{font-size:9px} #exv-store-energy-lab .details{left:23px;right:23px;bottom:117px;width:auto;gap:4px;z-index:11} #exv-store-energy-lab .details h3{font-size:24px;margin:1px 0} #exv-store-energy-lab .details p{max-width:330px;font-size:12px;line-height:1.4} #exv-store-energy-lab .navigation{bottom:43px;width:calc(100% - 20px);gap:2px;justify-content:space-between;padding:5px;overflow:auto;border-radius:22px} #exv-store-energy-lab .navigation button{flex:1;min-width:0;font-size:10px;padding:11px 5px;white-space:normal;line-height:1.15} #exv-store-energy-lab .footer-meta{bottom:11px;left:18px;right:18px;font-size:8px} #exv-store-energy-lab .wordmark{bottom:110px;font-size:180px} #exv-store-energy-lab .conveyor{filter:drop-shadow(8px 14px 12px #0009)} #exv-store-energy-lab #exv-store-lab-app.is-fallback{padding-top:210px;padding-bottom:260px} #exv-store-energy-lab .is-fallback .project-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} #exv-store-energy-lab .is-fallback .project-link{padding:5px} #exv-store-energy-lab .is-fallback .project-link span{font-size:11px}} #exv-store-energy-lab.fallback-mode .hero-copy{top:86px;left:clamp(20px,4vw,65px);width:calc(100% - 45px)} #exv-store-energy-lab.fallback-mode .hero-copy h2{font-size:35px;line-height:1.05;letter-spacing:-.045em;margin:9px 0} #exv-store-energy-lab.fallback-mode .hero-copy p{max-width:900px;font-size:13px;line-height:1.5} #exv-store-energy-lab.fallback-mode .details,#exv-store-energy-lab.fallback-mode .navigation{display:none} #exv-store-energy-lab.fallback-mode #exv-store-lab-app.is-fallback{padding-top:235px;padding-bottom:72px} #exv-store-energy-lab.fallback-mode .footer-meta{z-index:15;background:#030407bf;padding:7px 0;bottom:0} #exv-store-energy-lab.fallback-mode .status{display:none} @media (max-width:640px){#exv-store-energy-lab.fallback-mode .hero-copy{top:76px;left:18px} #exv-store-energy-lab.fallback-mode .hero-copy h2{font-size:29px;line-height:1.0} #exv-store-energy-lab.fallback-mode .hero-copy p{font-size:11px;max-width:320px} #exv-store-energy-lab.fallback-mode #exv-store-lab-app.is-fallback{padding-top:213px;padding-bottom:70px}} @media (prefers-reduced-motion:reduce){#exv-store-energy-lab *{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* Scoped integration overrides: no document/global scroll manipulation. */ .exv-store #exv-store-energy-lab{position:relative;display:block;box-sizing:border-box;width:100%;height:740px;min-height:690px;max-width:none;clear:both;overflow:hidden;margin:0!important;padding:0!important;isolation:isolate;background:#030407;color:#fff;font-family:Inter,Arial,sans-serif;text-align:left;contain:layout paint} .exv-store #exv-store-energy-lab *{box-sizing:border-box} .exv-store #exv-store-energy-lab .stage{pointer-events:none} .exv-store #exv-store-energy-lab .wordmark{line-height:1} .exv-store #exv-store-energy-lab .site-header,.exv-store #exv-store-energy-lab .hero-copy,.exv-store #exv-store-energy-lab .details,.exv-store #exv-store-energy-lab .navigation,.exv-store #exv-store-energy-lab .footer-meta{box-sizing:border-box} .exv-store #exv-store-energy-lab .hero-copy h2{font-size:clamp(42px,5.3vw,82px);color:#fff;line-height:.96;letter-spacing:-.075em;margin:20px 0 18px;font-weight:850;text-transform:none} .exv-store #exv-store-energy-lab .hero-copy h2 span{color:#ef3b9d} .exv-store #exv-store-energy-lab .details h3{font-size:clamp(21px,2.1vw,32px);color:#fff;letter-spacing:-.055em;line-height:1.1;margin:5px 0;font-weight:800} .exv-store #exv-store-energy-lab .detail-link{display:inline-flex;width:max-content;margin-top:8px;border-bottom:1px solid #f2b847;color:#ffe084;font-size:12px;font-weight:750;line-height:1.7;text-shadow:0 1px 4px #000} .exv-store #exv-store-energy-lab .navigation button{font-family:inherit;text-transform:none;letter-spacing:0;line-height:1.3;min-height:42px} .exv-store #exv-store-energy-lab #exv-store-lab-app{touch-action:pan-y;outline:none} .exv-store #exv-store-energy-lab #exv-store-lab-app.is-fallback{overflow-y:auto;touch-action:pan-y} .exv-store #exv-store-energy-lab .status[hidden]{display:none!important} .exv-store #exv-store-energy-lab .site-header .brand{color:#fff;text-decoration:none} .exv-store #exv-store-energy-lab .footer-meta a{color:#fff;text-decoration:none} .exv-store #exv-store-energy-lab a:focus-visible,.exv-store #exv-store-energy-lab button:focus-visible,#exv-store-energy-lab:focus-visible{outline:2px solid #ffe084;outline-offset:4px} @media(max-width:900px){.exv-store #exv-store-energy-lab{height:700px;min-height:660px}} @media(max-width:640px){.exv-store #exv-store-energy-lab{height:680px;min-height:680px}.exv-store #exv-store-energy-lab .hero-copy h2{font-size:clamp(42px,11vw,60px);margin:8px 0 8px}.exv-store #exv-store-energy-lab .details h3{font-size:23px}.exv-store #exv-store-energy-lab .details{bottom:125px}.exv-store #exv-store-energy-lab .detail-link{font-size:11px;margin-top:3px}.exv-store #exv-store-energy-lab .navigation{bottom:47px}.exv-store #exv-store-energy-lab .footer-meta{bottom:14px}} /* ExoVolt V1.1.14 – Scroll-Pinning ohne Scroll-Hijacking. * Sticky bleibt in der normalen Dokumentbewegung, keine fixed-Overlays oder Wheel-Blocks. */ .exv-store .exv-store__three-track { --exo26-scroll-turn: 1800px; position: relative; display: block; height: calc(100svh + var(--exo26-scroll-turn)); width: 100%; margin: 0; padding: 0; overflow: visible !important; isolation: isolate; } .exv-store .exv-store__three-track > #exv-store-energy-lab, .exv-store #exv-store-energy-lab { position: sticky; top: 0; height: 100svh; min-height: 0; max-height: 100svh; margin: 0 !important; } .exv-store .exv-store__three-track.is-static {height: auto} .exv-store .exv-store__three-track.is-static > #exv-store-energy-lab { position: relative; top: auto; height: 740px; min-height: 690px; max-height: none; } @media (max-width: 900px) { .exv-store .exv-store__three-track {--exo26-scroll-turn: 1400px} } @media (max-width: 640px) { .exv-store .exv-store__three-track {--exo26-scroll-turn: 1200px} .exv-store .exv-store__three-track > #exv-store-energy-lab, .exv-store #exv-store-energy-lab {height: 100svh;min-height: 0;max-height: 100svh} .exv-store .exv-store__three-track.is-static > #exv-store-energy-lab {height: 680px;min-height: 680px;max-height: none} } @media (prefers-reduced-motion: reduce) { .exv-store .exv-store__three-track {height: auto} .exv-store .exv-store__three-track > #exv-store-energy-lab {position: relative;top: auto;height: 740px;min-height: 690px;max-height: none} } /* V1.1.16: Im 3D-Segment bleiben Logo und Beratungsbutton entfernt; mittlerer Hinweis bleibt zentriert. */ #exv-store-energy-lab .site-header{justify-content:center} /* Standalone Store 3D: sichtbar vor den Produktbereichen, nicht hinter deckenden Karten. */ .exv-store .exv-store__three-track {position:relative;z-index:1;background:#030407} .exv-store #exv-store-energy-lab {display:block;width:100%;clear:both;background:#030407;overflow:hidden} .exv-store #exv-store-energy-lab .hero-copy{pointer-events:none} .exv-store #exv-store-energy-lab .details{pointer-events:none} .exv-store #exv-store-energy-lab .details .detail-link{pointer-events:auto} .exv-store #exv-store-energy-lab #exv-store-lab-app{touch-action:pan-y} .exv-store #exv-store-energy-lab .footer-meta a{pointer-events:auto} .exv-store #exv-store-energy-lab .detail-link{margin-top:8px;color:#ffe084} .exv-store #exv-store-energy-lab .navigation{z-index:15} @media(max-width:640px){ .exv-store #exv-store-energy-lab .hero-copy{z-index:12} } /* Wenn Browser/GPU WebGL sperren: Galerie unter dem Text statt uebereinander. */ .exv-store #exv-store-energy-lab.fallback-mode .hero-copy{top:78px;max-width:680px;width:calc(100% - 44px)} .exv-store #exv-store-energy-lab.fallback-mode .hero-copy h2{font-size:clamp(32px,3.5vw,50px);line-height:1;margin:10px 0 8px} .exv-store #exv-store-energy-lab.fallback-mode .hero-copy p{max-width:680px;line-height:1.45;font-size:13px} .exv-store #exv-store-energy-lab.fallback-mode #exv-store-lab-app.is-fallback{padding-top:310px;padding-bottom:64px} .exv-store #exv-store-energy-lab.fallback-mode .project-links{grid-template-columns:repeat(4,minmax(0,1fr))} .exv-store #exv-store-energy-lab.fallback-mode .project-link{min-width:0} .exv-store #exv-store-energy-lab.fallback-mode .project-link img{display:block;width:100%;object-fit:contain;aspect-ratio:4/3} @media(max-width:800px){ .exv-store #exv-store-energy-lab.fallback-mode .project-links{grid-template-columns:repeat(2,minmax(0,1fr))} .exv-store #exv-store-energy-lab.fallback-mode #exv-store-lab-app.is-fallback{padding-top:255px} } @media(max-width:640px){ .exv-store #exv-store-energy-lab.fallback-mode .hero-copy{top:69px;left:18px;width:calc(100% - 36px)} .exv-store #exv-store-energy-lab.fallback-mode .hero-copy h2{font-size:31px} .exv-store #exv-store-energy-lab.fallback-mode .hero-copy p{font-size:11px;line-height:1.35} .exv-store #exv-store-energy-lab.fallback-mode #exv-store-lab-app.is-fallback{padding-top:238px;padding-left:18px;padding-right:18px} } /* V1.0.2: Integrierte CSS-3D-Ersatzbuehne bleibt auch ohne WebGL sichtbar. */ .exv-store #exv-store-energy-lab.css-belt-mode .details, .exv-store #exv-store-energy-lab.css-belt-mode .navigation {display:flex} .exv-store #exv-store-energy-lab.css-belt-mode .status {display:none} .exv-store #exv-store-energy-lab.css-belt-mode #exv-store-lab-app{pointer-events:none} /* V1.0.10 — linker Introblock entfernt, Bühne stärker zentriert */ .exv-store #exv-store-energy-lab .hero-copy{display:none !important} .exv-store #exv-store-energy-lab .site-header{justify-content:flex-start} .exv-store #exv-store-energy-lab .details{right:clamp(26px,4vw,64px)} @media (max-width:640px){ .exv-store #exv-store-energy-lab .details{left:18px;right:18px;bottom:124px;width:auto} } .exv-store #exv-store-energy-lab.fallback-mode .hero-copy{display:none !important} /* V1.0.11 — helle Tech-Bühne: weißer Hintergrund, Raster + EXOVOLT bleiben, Förderband bleibt dunkel */ .exv-store .exv-store__three-track{background:#f7f8fb} .exv-store #exv-store-energy-lab{ background:#f7f8fb !important; color:#131723; } .exv-store #exv-store-energy-lab .stage{ background: radial-gradient(ellipse 34% 42% at 51% 42%, rgba(186,44,115,.11) 0%, rgba(186,44,115,.03) 42%, transparent 72%), radial-gradient(ellipse 26% 40% at 59% 69%, rgba(255,206,74,.10) 0%, rgba(255,206,74,.025) 34%, transparent 72%), #f7f8fb !important; } .exv-store #exv-store-energy-lab .stage::after{ background: repeating-linear-gradient(0deg, transparent 0 89px, rgba(20,26,34,.055) 90px), repeating-linear-gradient(90deg, transparent 0 89px, rgba(20,26,34,.055) 90px); opacity:.9; } .exv-store #exv-store-energy-lab .glow{ background:radial-gradient(ellipse, rgba(240,37,155,.16) 0%, rgba(240,37,155,.07) 28%, rgba(255,206,74,.08) 52%, transparent 74%); opacity:.95; } .exv-store #exv-store-energy-lab .wordmark{color:rgba(15,23,42,.085)} .exv-store #exv-store-energy-lab .bottom-shade{ background:linear-gradient(0deg, rgba(247,248,251,.96) 0%, rgba(247,248,251,.54) 12%, transparent 34%, transparent 82%, rgba(247,248,251,.70) 100%); } .exv-store #exv-store-energy-lab .head-note{color:rgba(30,41,59,.72)} .exv-store #exv-store-energy-lab .details{ text-shadow:none; } .exv-store #exv-store-energy-lab .detail-count{color:#b48700} .exv-store #exv-store-energy-lab .detail-eyebrow{color:rgba(59,72,89,.8)} .exv-store #exv-store-energy-lab .details h3{color:#101828 !important} .exv-store #exv-store-energy-lab .details p{color:#475467} .exv-store #exv-store-energy-lab .detail-link{ color:#9d205f; border-bottom-color:#d98cb2; text-shadow:none; } .exv-store #exv-store-energy-lab .footer-meta{color:rgba(71,84,103,.78)} .exv-store #exv-store-energy-lab .footer-meta a{color:#111827} .exv-store #exv-store-energy-lab .status{background:#ffffff;color:#101828;border:1px solid rgba(16,24,40,.12);box-shadow:0 12px 30px rgba(16,24,40,.08)} .exv-store #exv-store-energy-lab button:focus-visible, .exv-store #exv-store-energy-lab a:focus-visible, #exv-store-energy-lab:focus-visible{outline:2px solid #ba2c73;outline-offset:4px} /* Fallback ebenfalls auf hell anpassen */ .exv-store #exv-store-energy-lab.fallback-mode .footer-meta{background:rgba(247,248,251,.92)} .exv-store #exv-store-energy-lab .is-fallback .project-link{ background:#ffffff; border:1px solid rgba(16,24,40,.10); box-shadow:0 10px 24px rgba(16,24,40,.05); } .exv-store #exv-store-energy-lab .is-fallback .project-link span{color:#111827} /* V1.0.12 — sichtbare Seitenüberschrift oberhalb des 3D-Förderbands */ .exv-store .exv-store__page-head{ background:#f7f8fb; padding:clamp(28px,4vw,54px) clamp(18px,5vw,54px) clamp(18px,2.5vw,26px); border-bottom:1px solid rgba(15,23,42,.06); } .exv-store .exv-store__page-head-inner{ width:min(100%,1380px); margin:0 auto; } .exv-store .exv-store__page-eyebrow{ display:block; margin:0 0 10px; color:#ba2c73; font-size:11px; line-height:1.1; letter-spacing:.22em; text-transform:uppercase; font-weight:750; } .exv-store .exv-store__page-head h1{ margin:0 0 10px; color:#101828; font-size:clamp(34px,4.2vw,64px); line-height:.98; letter-spacing:-.06em; font-weight:800; } .exv-store .exv-store__page-head p{ margin:0; max-width:760px; color:#475467; font-size:clamp(14px,1.1vw,17px); line-height:1.6; } @media (max-width:640px){ .exv-store .exv-store__page-head{padding:26px 18px 16px} .exv-store .exv-store__page-head h1{font-size:clamp(30px,9vw,42px)} .exv-store .exv-store__page-head p{font-size:14px;max-width:none} } /* V1.0.15 — ExoVolt-Charakter im Seitenkopf links */ .exv-store .exv-store__page-head-inner--with-character{ display:grid; grid-template-columns:minmax(120px, 230px) minmax(0, 1fr); align-items:end; gap:clamp(14px,2.4vw,34px); } .exv-store .exv-store__page-character{ margin:0; align-self:end; display:flex; align-items:flex-end; justify-content:center; } .exv-store .exv-store__page-character img{ display:block; width:min(100%, 220px); height:auto; object-fit:contain; filter:drop-shadow(0 10px 24px rgba(17,24,39,.08)); } .exv-store .exv-store__page-copy{ min-width:0; } @media (max-width:860px){ .exv-store .exv-store__page-head-inner--with-character{ grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:center; } .exv-store .exv-store__page-character img{width:min(100%, 140px)} } @media (max-width:640px){ .exv-store .exv-store__page-head-inner--with-character{ grid-template-columns:1fr; justify-items:start; align-items:start; } .exv-store .exv-store__page-character{ order:2; margin-top:8px; } .exv-store .exv-store__page-copy{order:1} .exv-store .exv-store__page-character img{width:132px} } /* V1.0.16 — Seitenkopf repariert: Charakter links sichtbar ohne Textverschiebung */ .exv-store .exv-store__page-head{ overflow:hidden; } .exv-store .exv-store__page-head-inner--with-character{ position:relative; display:block; min-height:170px; } .exv-store .exv-store__page-character{ position:absolute; left:0; bottom:0; width:clamp(88px, 11vw, 155px); margin:0; display:block; z-index:1; pointer-events:none; } .exv-store .exv-store__page-character img{ display:block; width:100%; max-width:none; height:auto; object-fit:contain; } .exv-store .exv-store__page-copy{ position:relative; z-index:2; padding-left:clamp(72px, 10vw, 170px); min-width:0; } @media (max-width:860px){ .exv-store .exv-store__page-head-inner--with-character{ min-height:150px; } .exv-store .exv-store__page-character{ width:clamp(76px, 13vw, 120px); } .exv-store .exv-store__page-copy{ padding-left:clamp(62px, 10vw, 128px); } } @media (max-width:640px){ .exv-store .exv-store__page-head-inner--with-character{ min-height:0; display:flex; align-items:flex-start; gap:12px; } .exv-store .exv-store__page-character{ position:relative; left:auto; bottom:auto; width:74px; flex:0 0 74px; order:0; } .exv-store .exv-store__page-copy{ padding-left:0; order:1; } }