html,body{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip}html{overscroll-behavior-x:none}
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#161313;--fg:#fff9ee;--muted:#b6ada4;--line:#504540;--orange:#ff6c3a;--pink:#ff91b8;--yellow:#e8f877;--card:#27211e;--ink:#161313}
html[data-theme=light]{--bg:#f8f3eb;--fg:#211b18;--muted:#70645c;--line:#d8c9bb;--orange:#cf3f12;--pink:#db4e7e;--yellow:#c1db32;--card:#e4d8c7;--ink:#211b18}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;transition:background .3s,color .3s}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}.shell{max-width:1460px;padding:0 25px;margin:auto}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:block;line-height:0}.brand img{width:126px}.toplinks{display:flex;align-items:center;gap:22px;color:var(--muted);font-size:12px}.toplinks a:hover,.footlinks a:hover{color:var(--fg)}.toolbar{display:flex;align-items:center;gap:9px}.lang{appearance:none;border:1px solid var(--line);background:var(--card);padding:9px 25px 9px 11px;font:10px 'DM Mono',monospace}.theme{border:1px solid var(--line);background:transparent;padding:9px 11px;font:10px 'DM Mono',monospace;cursor:pointer}.contact-link{padding:13px 14px;background:var(--yellow);color:var(--ink);font:10px 'DM Mono',monospace;text-transform:uppercase}.mobile-dock,.menu-shade{display:none}.eyebrow{font:10px 'DM Mono',monospace;color:var(--orange);text-transform:uppercase;letter-spacing:.15em}.hero{min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;position:relative}.hero-copy{padding:70px 0;position:relative;z-index:2}.badge{display:inline-flex;padding:9px 12px;border:1px solid var(--line);background:var(--card);color:var(--yellow);font:10px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.hero h1{font-size:clamp(68px,9.3vw,136px);line-height:.82;letter-spacing:-.095em;margin:26px 0 25px;max-width:800px}.hero h1 .accent{color:var(--orange)}.hero h1 .outline{color:transparent;-webkit-text-stroke:1px var(--fg)}.hero-lead{max-width:540px;color:var(--muted);font-size:17px;line-height:1.65}.action-row{display:flex;align-items:center;gap:14px;margin-top:29px;flex-wrap:wrap}.action{padding:15px 18px;background:var(--orange);color:white;font:10px 'DM Mono',monospace;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}.action.secondary{background:transparent;color:var(--fg);border:1px solid var(--line);clip-path:none}.art{height:485px;position:relative;transform:translate3d(0,var(--px,0),0)}.orb{position:absolute;width:min(35vw,390px);height:min(35vw,390px);right:9%;top:9%;border:1px solid var(--pink);border-radius:48% 52% 39% 61%/51% 40% 60% 49%;background:linear-gradient(145deg,#ff91b855,#ff6c3a18);box-shadow:inset 0 0 50px #ff91b822,0 30px 80px #0003;animation:orb 10s ease-in-out infinite alternate}.orb:before,.orb:after{content:'';position:absolute;inset:13% -11%;border:1px solid var(--orange);transform:rotate(36deg);opacity:.7}.orb:after{inset:25% -21%;border-color:var(--yellow);transform:rotate(-42deg)}.art-card{position:absolute;left:2%;top:24%;width:245px;min-height:190px;padding:20px;background:var(--card);border:1px solid var(--line);box-shadow:15px 25px 55px #0005;transform:rotate(-7deg);animation:float 6s ease-in-out infinite}.art-card small{font:9px 'DM Mono',monospace;color:var(--orange);letter-spacing:.14em}.art-card strong{display:block;margin-top:42px;max-width:190px;font-size:24px;line-height:1;letter-spacing:-.06em}.art-card i{position:absolute;right:16px;bottom:14px;color:var(--yellow);font-style:normal;font-size:24px}.art-mark{position:absolute;right:2%;bottom:12%;font-size:50px;color:var(--yellow);animation:turn 25s linear infinite}.ribbon{position:relative;left:50%;margin:0 0 0 -50vw;width:100vw;overflow:hidden;background:var(--yellow);color:var(--ink);padding:14px 0;transform:rotate(-1deg);font:10px 'DM Mono',monospace;letter-spacing:.13em}.ribbon span{display:block;white-space:nowrap;animation:marquee 28s linear infinite}.ribbon b{color:var(--orange);padding:0 22px}.section{padding:105px 0}.section-head{display:grid;grid-template-columns:1fr .58fr;align-items:end;gap:30px;margin-bottom:43px}.section-head h2{font-size:clamp(43px,6.5vw,88px);line-height:.9;letter-spacing:-.085em;margin:14px 0 0;max-width:850px}.section-head p{max-width:420px;color:var(--muted);line-height:1.65;margin:0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.feature{min-height:285px;background:var(--card);border:1px solid var(--line);padding:22px;position:relative;overflow:hidden;transition:transform .35s,border-color .35s}.feature:nth-child(2){transform:translateY(24px)}.feature:hover{transform:translateY(-7px);border-color:var(--orange)}.feature:nth-child(2):hover{transform:translateY(15px)}.feature .idx{font:10px 'DM Mono',monospace;color:var(--orange)}.feature .shape{position:absolute;right:16px;top:12px;color:var(--yellow);font-size:48px;opacity:.85}.feature h3{font-size:27px;letter-spacing:-.065em;margin:91px 0 10px;max-width:300px}.feature p{font-size:14px;color:var(--muted);line-height:1.65;margin:0;max-width:360px}.manifesto{padding:72px 7%;background:var(--orange);color:#fff;position:relative;overflow:hidden}.manifesto:after{content:'+';position:absolute;right:3%;top:-45px;font-size:230px;opacity:.15;animation:turn 32s linear infinite}.manifesto blockquote{position:relative;z-index:1;font-size:clamp(36px,6.5vw,82px);line-height:.95;letter-spacing:-.075em;margin:0;max-width:1000px}.manifesto small{display:block;margin-top:25px;font:10px 'DM Mono',monospace;letter-spacing:.1em}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.step{border-top:1px solid var(--line);padding:17px 4px}.step span{font:10px 'DM Mono',monospace;color:var(--pink)}.step h3{font-size:21px;margin:37px 0 8px}.step p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}.endcap{padding:72px 0;display:flex;justify-content:space-between;align-items:end;gap:24px;border-top:1px solid var(--line)}.endcap h2{max-width:800px;font-size:clamp(44px,7vw,94px);line-height:.88;letter-spacing:-.09em;margin:15px 0 0}.footer{border-top:1px solid var(--line);padding:20px 0 25px;display:flex;justify-content:space-between;align-items:center;gap:14px;font:9px 'DM Mono',monospace;color:var(--muted)}.footlinks{display:flex;gap:15px;flex-wrap:wrap}.reveal{opacity:0;transform:translateY(26px) rotate(.3deg);transition:opacity .75s,transform .75s}.reveal.in{opacity:1;transform:none}@keyframes orb{to{border-radius:62% 38% 56% 44%/39% 58% 42% 61%;transform:rotate(-12deg) scale(1.04)}}@keyframes float{50%{transform:rotate(-3deg) translateY(-12px)}}@keyframes turn{to{transform:rotate(360deg)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:760px){.shell{padding:0 17px}body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}.topbar{height:68px;justify-content:center}.brand img{width:145px}.toplinks,.toolbar{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding:22px 0 48px;gap:5px}.hero-copy{padding:26px 0 12px}.hero h1{font-size:clamp(66px,16vw,105px);margin:21px 0}.hero-lead{font-size:15px}.art{height:330px;grid-row:1}.orb{width:min(72vw,300px);height:min(72vw,300px);right:8%;top:3%}.art-card{width:200px;min-height:160px;top:24%;left:1%;padding:15px}.art-card strong{font-size:20px;margin-top:31px}.art-mark{font-size:38px;bottom:6%}.ribbon{margin-left:-17px;width:calc(100% + 34px);padding:12px 0}.section{padding:72px 0}.section-head{grid-template-columns:1fr;gap:13px}.section-head h2{font-size:clamp(44px,11vw,70px)}.feature-grid{grid-template-columns:1fr;gap:10px}.feature{min-height:225px;padding:19px}.feature:nth-child(2){transform:none}.feature h3{margin:63px 0 8px}.manifesto{padding:48px 23px}.manifesto:after{font-size:150px;right:-20px;top:5px}.steps{grid-template-columns:1fr 1fr;gap:18px 10px}.step h3{margin:24px 0 7px}.endcap{align-items:flex-start;flex-direction:column;padding:60px 0}.footer{align-items:flex-start;flex-direction:column}.mobile-dock{display:flex;position:fixed;z-index:30;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));min-height:66px;align-items:center;justify-content:space-around;padding:7px 8px;border:1px solid #ffffff55;border-radius:5px;background:linear-gradient(112deg,color-mix(in srgb,var(--card) 97%,transparent),color-mix(in srgb,var(--bg) 94%,transparent) 58%,color-mix(in srgb,var(--card) 98%,transparent));clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,17px 100%,0 calc(100% - 17px));box-shadow:0 15px 48px #0009,inset 0 1px #ffffff33;backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%)}html[data-theme=light] .mobile-dock{background:linear-gradient(118deg,#ffffff40 0%,#ffffff12 22%,transparent 43%),linear-gradient(112deg,#25201db0,#17141299 58%,#29221db2);border-color:#ffffff80;box-shadow:0 16px 50px #0006,inset 0 1px #ffffff65,inset 0 -1px #0005;backdrop-filter:blur(44px) saturate(200%);-webkit-backdrop-filter:blur(44px) saturate(200%)}.dock-item{border:0;background:transparent;color:var(--fg);min-width:50px;display:grid;justify-items:center;gap:3px;padding:6px 7px;font:9px 'DM Mono',monospace}.dock-item b{font:20px/1 'Space Grotesk',sans-serif;color:var(--orange)}html[data-theme=light] .dock-item{color:#fff9ee}html[data-theme=light] .dock-item b{color:#ff8b61}.menu-shade{display:block;position:fixed;inset:0;z-index:25;background:#08060680;backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.menu-shade.open{opacity:1;visibility:visible}.menu-panel{position:absolute;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));padding:21px;border:1px solid #ffffff55;border-radius:5px;background:linear-gradient(120deg,#ffffff30 0%,#ffffff0a 22%,transparent 44%),linear-gradient(135deg,#292320d0,#181513c2);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);backdrop-filter:blur(38px) saturate(185%);-webkit-backdrop-filter:blur(38px) saturate(185%);box-shadow:0 24px 60px #0009;transform:translateY(18px) scale(.98);transition:transform .28s}.menu-shade.open .menu-panel{transform:none}html[data-theme=light] .menu-panel{background:linear-gradient(120deg,#ffffff30 0%,#ffffff0a 22%,transparent 44%),linear-gradient(135deg,#292320b8,#181513ad);border-color:#ffffff80;backdrop-filter:blur(46px) saturate(195%);-webkit-backdrop-filter:blur(46px) saturate(195%)}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;color:#d1c7bd;font:10px 'DM Mono',monospace;letter-spacing:.1em}.panel-close{border:1px solid #ffffff55;border-radius:2px;background:transparent;color:#fff9ee;width:34px;height:34px}.panel-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}.panel-links a{padding:13px 11px;border:1px solid #ffffff36;background:#100e0dcc;color:#fff9ee;font-size:13px}.panel-controls{display:flex;gap:8px;margin-top:12px}.panel-controls select,.panel-controls button{flex:1;padding:12px 9px;background:#171412;color:#fff9ee;border:1px solid #ffffff45;border-radius:2px;font:10px 'DM Mono',monospace}.panel-contact{display:block;margin-top:9px;padding:13px;text-align:center;background:var(--orange);color:#fff;font:10px 'DM Mono',monospace;text-transform:uppercase}}
@media(min-width:761px) and (max-width:1050px){.toplinks{gap:12px;font-size:11px}.hero h1{font-size:clamp(68px,9vw,105px)}.art{transform:scale(.9)}.section{padding:85px 0}}
/* Each subpage gets its own abstract hero composition and motion language. */
body[data-page="shopsysteme"] .orb{border-radius:50%;background:radial-gradient(circle at 48% 48%,transparent 37%,#ff91b830 38%,transparent 39%),radial-gradient(circle at 48% 48%,transparent 61%,#e8f87755 62%,transparent 63%),linear-gradient(145deg,#ff91b820,#ff6c3a08);animation:systemOrbit 18s linear infinite}
body[data-page="shopsysteme"] .orb:before{inset:8% -16%;border-color:var(--orange);transform:rotate(52deg)}body[data-page="shopsysteme"] .orb:after{inset:22% -25%;border-color:var(--yellow);transform:rotate(-38deg)}body[data-page="shopsysteme"] .art-card{transform:rotate(-8deg);animation:systemCard 6s ease-in-out infinite}body[data-page="shopsysteme"] .art-mark{color:var(--orange);font-size:42px}
body[data-page="leistungen"] .orb{width:min(31vw,350px);height:min(31vw,350px);right:13%;top:14%;border-radius:6px;background:linear-gradient(135deg,#ff6c3a88,#ff91b855);transform:rotate(45deg);box-shadow:18px 18px 0 #e8f87770,36px 36px 0 #176bff35;animation:serviceBlocks 8s cubic-bezier(.45,0,.55,1) infinite alternate}
body[data-page="leistungen"] .orb:before{inset:17%;border:1px solid #fff9eeaa;transform:rotate(0);border-radius:2px}body[data-page="leistungen"] .orb:after{inset:36% -9%;border:1px solid var(--yellow);transform:rotate(90deg);border-radius:2px}body[data-page="leistungen"] .art-card{left:0;top:31%;width:220px;min-height:155px;transform:rotate(-2deg);animation:serviceCard 5s ease-in-out infinite}body[data-page="leistungen"] .art-mark{color:var(--pink);font-size:63px}
body[data-page="karriere"] .orb{width:min(34vw,370px);height:min(34vw,370px);right:10%;top:12%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e8f87777,transparent 12%),radial-gradient(circle at 67% 65%,#ff91b855,transparent 24%),transparent;border:1px dashed #e8f877aa;box-shadow:0 0 0 32px #ff91b812,0 0 0 68px #e8f8770c;animation:careerOrbit 26s linear infinite}
body[data-page="karriere"] .orb:before{inset:13% -22%;border:1px solid var(--pink);transform:rotate(61deg);border-radius:50%}body[data-page="karriere"] .orb:after{inset:25% -9%;border:1px dotted var(--yellow);transform:rotate(-43deg);border-radius:50%}body[data-page="karriere"] .art-card{left:9%;top:23%;width:225px;min-height:210px;transform:rotate(5deg);animation:careerCard 7s ease-in-out infinite}body[data-page="karriere"] .art-card strong{max-width:160px;font-size:28px}body[data-page="karriere"] .art-mark{color:var(--pink);font-size:58px}
body[data-page="social-media"] .orb{width:min(31vw,350px);height:min(31vw,350px);right:13%;top:13%;border-radius:42% 42% 42% 8%;background:linear-gradient(145deg,#ff91b8dd,#cf3f12bb);box-shadow:15px 20px 0 #e8f87799;animation:socialBubble 6s ease-in-out infinite alternate}
body[data-page="social-media"] .orb:before{inset:20% -13%;border:1px solid var(--yellow);border-radius:50%;transform:rotate(-26deg)}body[data-page="social-media"] .orb:after{inset:35% -23%;border:1px solid #fff9eeaa;border-radius:50%;transform:rotate(31deg)}body[data-page="social-media"] .art-card{left:4%;top:29%;width:255px;min-height:172px;transform:rotate(-6deg);animation:socialCard 5s ease-in-out infinite}body[data-page="social-media"] .art-mark{color:var(--yellow);font-size:58px}
body[data-page="advertising"] .orb{width:min(34vw,370px);height:min(34vw,370px);right:9%;top:9%;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 28px,#ff91b866 29px 30px,transparent 31px 52px),radial-gradient(circle,#ff6c3a99 0 8%,transparent 9%);box-shadow:0 0 0 1px #e8f87766;animation:adTarget 8s ease-in-out infinite}
body[data-page="advertising"] .orb:before{inset:-12%;border:1px solid var(--yellow);border-radius:50%;transform:rotate(0)}body[data-page="advertising"] .orb:after{inset:12% -21%;border:1px dashed var(--orange);border-radius:50%;transform:rotate(48deg)}body[data-page="advertising"] .art-card{left:0;top:30%;width:230px;min-height:178px;transform:rotate(4deg);animation:adCard 5.5s ease-in-out infinite}body[data-page="advertising"] .art-card:after{content:'↗︎ +24%';position:absolute;right:15px;top:43px;color:var(--yellow);font:11px 'DM Mono',monospace}body[data-page="advertising"] .art-mark{color:var(--orange);font-size:48px}
@keyframes systemOrbit{to{transform:rotate(360deg)}}@keyframes systemCard{50%{transform:translateY(-12px) rotate(-4deg)}}@keyframes serviceBlocks{to{transform:rotate(53deg) translate(12px,-8px);box-shadow:28px 25px 0 #e8f87770,52px 50px 0 #176bff35}}@keyframes serviceCard{50%{transform:translate(14px,-10px) rotate(2deg)}}@keyframes careerOrbit{to{transform:rotate(360deg)}}@keyframes careerCard{50%{transform:translateY(-16px) rotate(1deg)}}@keyframes socialBubble{to{border-radius:50% 46% 8% 48%;transform:rotate(8deg) scale(1.04)}}@keyframes socialCard{50%{transform:translate(10px,-13px) rotate(-3deg)}}@keyframes adTarget{50%{transform:scale(.9) rotate(14deg);filter:hue-rotate(18deg)}}@keyframes adCard{50%{transform:translateY(-9px) rotate(-1deg)}}
/* Consistent upper-right cut across all subpage controls and panels. */
.contact-link,.theme,.lang,.action,.feature,.art-card,.manifesto,.panel-links a,.panel-controls select,.panel-controls button,.panel-contact,.dock-item{clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}
.feature,.art-card,.manifesto{border-radius:0}
/* Warm, non-white surfaces with no colored outline borders. */
.feature,.art-card{background:var(--card);border:0;box-shadow:14px 20px 45px #20130c22}
.contact-link,.theme,.lang,.action,.panel-links a,.panel-controls select,.panel-controls button,.panel-contact,.dock-item,.menu-panel,.mobile-dock{border:0}
html[data-theme=light] .mobile-dock{border:0}
html[data-theme=light] .menu-panel{border:0}
html[data-theme=light] .panel-links a{border:0}
html[data-theme=light] .feature .shape,html[data-theme=light] .art-mark{color:#566719;opacity:1}
html[data-theme=light] .badge{color:#566719;border:0}html[data-theme=light] .art-card i,html[data-theme=light] .feature .shape,html[data-theme=light] .art-mark{color:#566719;opacity:1}
/* Use drawn line icons so mobile never falls back to color emoji glyphs. */
.icon-grid svg,.icon-arrow svg,.icon-menu svg,.icon-social svg,.icon-spark svg,.shape svg,.art-mark svg,.spark svg,.scribble svg,.dock-item b svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature .shape{width:46px;height:46px;display:block;font-size:0}
.art-mark{width:50px;height:50px;display:block;font-size:0}
.spark{width:30px;height:30px;display:block;font-size:0}
.scribble{width:67px;height:67px;display:block;font-size:0}
.dock-item b{width:20px;height:20px;display:block;font-size:0}
html,body{touch-action:pan-y;overscroll-behavior-x:none}
@media(max-width:760px){.shell,main{max-width:100%}.ribbon{width:100vw;margin-left:-50vw;transform:none}.hero,.section,.hero-copy,.art,.feature,.step{min-width:0}}
.art-card i svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* High-energy, page-specific hero motion system. */
.hero-copy{perspective:900px}
.hero h1{animation:heroTitleEnter .95s cubic-bezier(.16,1,.3,1) both;transform-origin:left center}
.hero h1 .accent,.hero h1 .outline{display:inline-block;animation:heroWordEnter .85s cubic-bezier(.16,1,.3,1) both}
.hero h1 .accent{animation-delay:.12s}
.hero h1 .outline{animation-delay:.22s}
.hero-lead,.action-row{animation:heroDetailsIn .8s .24s both cubic-bezier(.16,1,.3,1)}
.art{isolation:isolate}
.art:before,.art:after{content:"";position:absolute;pointer-events:none;z-index:-1}
.art:before{inset:7% 0 5% 5%;background:radial-gradient(ellipse at 60% 45%,color-mix(in srgb,var(--pink) 17%,transparent),transparent 62%);animation:heroAtmosphere 7s ease-in-out infinite alternate}
.art:after{width:9px;height:9px;left:12%;top:12%;background:var(--orange);box-shadow:0 0 0 7px color-mix(in srgb,var(--orange) 16%,transparent),0 0 30px var(--orange);animation:heroNode 4.4s ease-in-out infinite}
body[data-page="shopsysteme"] .art:before{background:repeating-radial-gradient(ellipse at 62% 50%,transparent 0 33px,color-mix(in srgb,var(--yellow) 20%,transparent) 34px 35px,transparent 36px 66px);animation:systemsScan 11s linear infinite}
body[data-page="shopsysteme"] .art:after{left:65%;top:16%;background:var(--yellow);box-shadow:0 0 0 9px #c1db3233,0 0 34px var(--yellow);animation:systemsNode 5s ease-in-out infinite}
body[data-page="leistungen"] .art:before{inset:13% 5% 13% 2%;background:linear-gradient(135deg,transparent 42%,#cf3f1230 42.2% 42.6%,transparent 42.8%),linear-gradient(45deg,transparent 53%,#c1db3240 53.2% 53.6%,transparent 53.8%);animation:serviceGrid 5s steps(5,end) infinite}
body[data-page="leistungen"] .art:after{width:18px;height:18px;left:76%;top:19%;background:var(--pink);transform:rotate(45deg);animation:serviceDiamond 3.6s ease-in-out infinite}
body[data-page="karriere"] .art:before{inset:5% 8%;border:1px dashed color-mix(in srgb,var(--yellow) 45%,transparent);border-radius:50%;animation:careerTrack 18s linear infinite}
body[data-page="karriere"] .art:after{width:11px;height:11px;left:25%;top:28%;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 #db4e7e80;animation:careerPulse 2s ease-out infinite}
body[data-page="social-media"] .art:before{inset:10% 0 12%;background:repeating-linear-gradient(90deg,transparent 0 18px,color-mix(in srgb,var(--pink) 40%,transparent) 19px 20px,transparent 21px 36px);clip-path:polygon(0 46%,8% 40%,16% 57%,24% 26%,32% 66%,40% 38%,48% 54%,56% 18%,64% 68%,72% 35%,80% 58%,88% 26%,100% 50%,100% 54%,88% 31%,80% 63%,72% 40%,64% 73%,56% 23%,48% 59%,40% 43%,32% 71%,24% 31%,16% 62%,8% 45%,0 51%);animation:socialWave 2.8s ease-in-out infinite alternate}
body[data-page="social-media"] .art:after{width:12px;height:12px;left:19%;top:22%;border-radius:50%;background:var(--yellow);box-shadow:0 0 18px var(--yellow);animation:socialDot 5s ease-in-out infinite}
body[data-page="advertising"] .art:before{width:64%;height:64%;left:18%;top:14%;border:1px solid color-mix(in srgb,var(--orange) 54%,transparent);border-radius:50%;background:linear-gradient(90deg,transparent 49.8%,#cf3f1244 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#cf3f1244 50%,transparent 50.2%);animation:adRadar 7s linear infinite}
body[data-page="advertising"] .art:after{width:7px;height:7px;left:50%;top:45%;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 8px #c1db3240,0 0 22px var(--yellow);animation:adSignal 1.8s ease-out infinite}
body[data-page="shopsysteme"] .hero h1 .accent{color:transparent;background:linear-gradient(100deg,var(--orange) 10%,var(--yellow) 45%,var(--orange) 80%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;animation:heroWordEnter .85s .12s both cubic-bezier(.16,1,.3,1),colorTravel 4s 1s linear infinite}
body[data-page="leistungen"] .hero h1 .accent{filter:drop-shadow(7px 7px 0 color-mix(in srgb,var(--yellow) 45%,transparent));animation:heroWordEnter .85s .12s both cubic-bezier(.16,1,.3,1),serviceType 3.8s 1s ease-in-out infinite}
body[data-page="karriere"] .hero h1 .accent{position:relative}
body[data-page="karriere"] .hero h1 .accent:after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.07em;background:var(--yellow);transform:scaleX(.1);transform-origin:left;animation:careerUnderline 2.6s .8s ease-in-out infinite alternate}
body[data-page="social-media"] .hero h1 .accent{animation:heroWordEnter .85s .12s both cubic-bezier(.16,1,.3,1),socialType 2.7s 1s ease-in-out infinite}
body[data-page="advertising"] .hero h1 .outline{-webkit-text-stroke:1px var(--orange);animation:heroWordEnter .85s .22s both cubic-bezier(.16,1,.3,1),adType 2.4s 1s ease-in-out infinite alternate}
@keyframes heroTitleEnter{from{opacity:0;transform:translateY(48px) rotateX(-9deg);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroWordEnter{from{opacity:0;transform:translateY(28px) skewY(3deg)}to{opacity:1;transform:none}}
@keyframes heroDetailsIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroAtmosphere{to{transform:scale(1.12) translate(3%,-2%);filter:hue-rotate(24deg)}}
@keyframes heroNode{50%{transform:translate(34px,45px) scale(.7);opacity:.45}}
@keyframes systemsScan{to{background-position:0 170px;transform:rotate(12deg) scale(1.08)}}
@keyframes systemsNode{50%{transform:translate(-95px,115px);box-shadow:0 0 0 17px #c1db3222,0 0 42px var(--yellow)}}
@keyframes serviceGrid{50%{transform:translate(12px,-8px) skew(-4deg);filter:hue-rotate(22deg)}}
@keyframes serviceDiamond{50%{transform:translate(-32px,36px) rotate(225deg) scale(.7)}}
@keyframes careerTrack{to{transform:rotate(360deg)}}
@keyframes careerPulse{to{box-shadow:0 0 0 26px #db4e7e00;transform:scale(.7)}}
@keyframes socialWave{to{transform:scaleY(1.35) translateX(-12px);filter:hue-rotate(40deg)}}
@keyframes socialDot{50%{transform:translate(155px,92px) scale(1.5)}}
@keyframes adRadar{to{transform:rotate(360deg)}}
@keyframes adSignal{to{box-shadow:0 0 0 28px #c1db3200,0 0 26px var(--yellow)}}
@keyframes colorTravel{to{background-position:220% 0}}
@keyframes serviceType{50%{filter:drop-shadow(-5px 6px 0 color-mix(in srgb,var(--pink) 50%,transparent))}}
@keyframes careerUnderline{to{transform:scaleX(1)}}
@keyframes socialType{50%{text-shadow:0 0 24px color-mix(in srgb,var(--pink) 60%,transparent)}}
@keyframes adType{to{color:var(--yellow);-webkit-text-stroke-color:var(--yellow);transform:translateY(-3px)}}
@media(max-width:760px){.hero h1{animation-duration:.8s}.art:before{inset:5% 0}.art:after{left:7%;top:5%}body[data-page="social-media"] .art:before{inset:14% 0 15%}body[data-page="advertising"] .art:before{width:76%;height:76%;left:12%;top:8%}}
/* New editorial illustration direction: layered, diagrammatic SVG scenes. */
.art{overflow:visible}
.art>.orb,.art>.art-card,.art>.art-mark,.art:before,.art:after{display:none!important}
.art>.hero-graphic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;overflow:visible;filter:drop-shadow(0 22px 34px #211b181c);animation:graphicArrive .9s cubic-bezier(.16,1,.3,1) both}
.hero-copy{animation:copyArrive .75s cubic-bezier(.16,1,.3,1) both}
.hero h1{animation:none}
.hero h1 .accent,.hero h1 .outline{animation:none}
.hero-lead,.action-row{animation:none}
@keyframes graphicArrive{from{opacity:0;transform:translateY(20px) scale(.94);filter:blur(7px)}to{opacity:1;transform:none;filter:drop-shadow(0 22px 34px #211b181c)}}
@keyframes copyArrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){.art{height:300px;grid-row:1;margin:0 -8px}.art>.hero-graphic{inset:0;width:100%;height:100%}.hero-copy{padding-top:18px}.hero h1{font-size:clamp(62px,15vw,96px)}}
/* Mobile hero: keep the copy in front and let the illustration sit behind it. */
@media(max-width:760px){
.hero{display:block;position:relative;isolation:isolate;padding:22px 0 38px}
.hero-copy{position:relative;z-index:2;padding:18px 0 72px}
.art{position:absolute;z-index:1;top:185px;right:-24px;width:min(92vw,430px);height:clamp(250px,76vw,340px);margin:0;grid-row:auto;opacity:.34;pointer-events:none}
.art>.hero-graphic{inset:0;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(180deg,transparent 0%,#000 17%,#000 88%,transparent 100%)}
}
/* Tighten the mobile hero-to-ticker and ticker-to-content rhythm. */
@media(max-width:760px){
.hero{padding-bottom:18px}
.hero-copy{padding-bottom:36px}
.section{padding-top:48px}
}
/* iOS Safari: force illustrations into a lower, isolated paint layer. */
@media(max-width:760px){
.hero{isolation:isolate!important}
.hero-copy{position:relative!important;z-index:5!important}
.art{z-index:0!important;top:225px!important;opacity:.18!important;transform:none!important}
.art>.hero-graphic{z-index:0!important}
}
/* Keep translated hero lines inside the mobile text column on iOS Safari. */
@media(max-width:760px){
.hero-copy{min-width:0;width:100%}
.hero h1{width:100%;max-width:100%;min-width:0;font-size:clamp(48px,12vw,82px);line-height:.88;letter-spacing:-.085em;overflow-wrap:anywhere}
.hero h1 .accent,.hero h1 .outline{max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal}
}