/* Mike Hillebrand Media v2 — Konzept nach phive.pt, Farben aus dem MHM-Design-System, Schriften wie Phive */
@font-face{font-family:PPFormula;src:url(../fonts/PPFormula.woff2) format("woff2");font-display:swap}
@font-face{font-family:AcidGrotesk;src:url(../fonts/AcidGroteskVF.woff2) format("woff2");font-display:swap}
@font-face{font-family:PureHeart;src:url(../fonts/PureHeart.ttf) format("truetype");font-display:swap}

:root{
  --c-accent:#E50C7E;--c-accent-2:#c80a6c;--c-accent-soft:rgba(229,12,126,.14);
  --c-black:#010101;--c-surface:#0c0c0e;--c-surface-2:#161619;--c-white:#f6f6f7;--c-muted:#9a9aa3;--c-line:rgba(255,255,255,.12);
  --grid-pad:clamp(8px,3.242px + 100vw*.0122,24px);--gutter:clamp(2px,-.964px + 100vw*.0076,12px);--max:106.25rem;
  --inset:calc(var(--grid-pad) + var(--gutter));
  --ease-out:cubic-bezier(.19,1,.22,1);--ease-circ:cubic-bezier(.075,.82,.165,1);
  --bar-h:54px;--bar-gap:16px;--menu-w:326px;
  --ribbon-h:clamp(96px,16.5vh,220px);
  --bar-bg:var(--c-accent);--bar-fg:var(--c-black);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body{background:var(--c-black);color:var(--c-white);font-family:PPFormula,system-ui,sans-serif;overscroll-behavior:none;transition:background-color .1s var(--ease-out);-webkit-font-smoothing:antialiased}
body.theme-light{--bar-bg:var(--c-black);--bar-fg:var(--c-accent)}
body.theme-dark{--bar-bg:var(--c-accent);--bar-fg:var(--c-black)}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--c-accent);color:var(--c-black)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.hide-cursor,body.hide-cursor *{cursor:none!important}

/* ---------- Typo-Skala (Phive) ---------- */
.upper{text-transform:uppercase}
.t1{font-family:PPFormula;font-size:clamp(114px,46.725px + 100vw*.1725,340px);font-variation-settings:"wdth" 0,"wght" 400;line-height:1em;letter-spacing:-.02em;user-select:none}
.t2{font-family:PPFormula;font-size:clamp(120px,66.414px + 100vw*.1374,300px);font-variation-settings:"wdth" 0,"wght" 350;line-height:.87em;letter-spacing:-.02em;user-select:none}
.t3{font-family:PPFormula;font-size:clamp(80px,47.24px + 100vw*.084,190px);font-variation-settings:"wdth" 0,"wght" 500;line-height:1em;letter-spacing:-.02em}
.t4{font-family:PPFormula;font-size:clamp(68px,46.55px + 100vw*.055,140px);font-variation-settings:"wdth" 0,"wght" 350;line-height:1em;letter-spacing:-.02em}
.t5{font-family:PPFormula;font-size:clamp(34px,29.242px + 100vw*.0122,50px);font-variation-settings:"wdth" 0,"wght" 400;line-height:1em}
.t6{font-family:PPFormula;font-size:clamp(20px,17.036px + 100vw*.0076,30px);font-variation-settings:"wdth" 0,"wght" 400;line-height:1em}
.headline{font-family:PPFormula;font-size:clamp(36px,28.863px + 100vw*.0183,60px);font-variation-settings:"wdth" 0,"wght" 350;line-height:1em;letter-spacing:-.01em}
.callout{font-family:PPFormula;font-size:clamp(18px,17.415px + 100vw*.0015,20px);font-variation-settings:"wdth" 0,"wght" 350;line-height:1em;letter-spacing:-.01em}
.manu1{font-family:PureHeart;font-size:clamp(40px,19.174px + 100vw*.0534,110px);line-height:.8em}
.manu2{font-family:PureHeart;font-size:clamp(60px,24.276px + 100vw*.0916,180px);line-height:.8em}
.sub1{font-family:AcidGrotesk;font-size:clamp(30px,25.242px + 100vw*.0122,46px);font-variation-settings:"wght" 130;letter-spacing:-.02em;line-height:1em}
.sub2{font-family:AcidGrotesk;font-size:clamp(16px,14.206px + 100vw*.0046,22px);font-variation-settings:"wght" 130;letter-spacing:.01em;line-height:1.2em}
.sub3{font-family:AcidGrotesk;font-size:clamp(14px,13.415px + 100vw*.0015,16px);font-variation-settings:"wght" 200;letter-spacing:.01em;line-height:1.2em}
.body1{font-family:AcidGrotesk;font-size:clamp(12px,11.415px + 100vw*.0015,14px);font-variation-settings:"wght" 130;line-height:1.2em}
.body2{font-family:AcidGrotesk;font-size:clamp(14px,13.415px + 100vw*.0015,16px);font-variation-settings:"wght" 130;line-height:1.4em}
.cap1{font-family:AcidGrotesk;font-size:clamp(18px,16.791px + 100vw*.0031,22px);font-variation-settings:"wght" 130;line-height:1.2em}
.label1{font-family:PPFormula;font-size:clamp(10px,9.415px + 100vw*.0015,12px);font-variation-settings:"wdth" 40,"wght" 610;letter-spacing:.06em;line-height:1.1em;text-transform:uppercase}
.label2{font-family:PPFormula;font-size:clamp(8px,7.415px + 100vw*.0015,10px);font-variation-settings:"wdth" 40,"wght" 610;letter-spacing:.06em;line-height:.8em;text-transform:uppercase}
@media (min-width:1441px){.t1{font-size:17vw}.t2{font-size:15vw}.t3{font-size:9.5vw}.t4{font-size:7vw}.manu2{font-size:9vw}.headline{font-size:3vw}}
.accent{color:var(--c-accent)}.muted{color:var(--c-muted)}
.manu{font-family:PureHeart;color:var(--c-white);opacity:.9;transform:rotate(-6deg);display:inline-block;line-height:.8em}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2*var(--inset),var(--max));margin-inline:auto}
.section{position:relative;width:100%}
.center{text-align:center}
.row{display:flex;gap:var(--gutter);align-items:center;justify-content:center;flex-wrap:wrap}

/* ---------- Buttons / Pills ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:clamp(38px,36px + 100vw*.004,44px);padding:0 clamp(18px,1.6vw,28px);border-radius:999px;overflow:hidden;color:var(--c-white);isolation:isolate;white-space:nowrap}
.btn .bg{position:absolute;inset:0;border-radius:inherit;border:1px solid currentColor;transition:transform .75s var(--ease-circ),background-color .75s var(--ease-circ);z-index:-1}
.btn.primary{color:var(--c-black)}.btn.primary .bg{background:var(--c-accent);border-color:var(--c-accent)}
.btn.dark{color:var(--c-white)}.btn.dark .bg{background:var(--c-black);border-color:var(--c-black)}
.btn.onlight{color:var(--c-black)}
.btn:hover .bg{transform:scale(1.05)}
.lbl{position:relative;display:grid;line-height:1.1em}
.lbl>span{grid-area:1/1;font-family:PPFormula;font-size:clamp(10px,9.415px + 100vw*.0015,12px);font-variation-settings:"wdth" 40,"wght" 610;letter-spacing:.06em;text-transform:uppercase;transition:transform .75s var(--ease-circ),opacity .75s var(--ease-circ),font-variation-settings .75s var(--ease-circ),letter-spacing .75s var(--ease-circ)}
.lbl>span+span{transform:translateY(110%);opacity:0}
.btn:hover .lbl>span:first-child,.is-hover .lbl>span:first-child{transform:translateY(-110%);opacity:0}
.btn:hover .lbl>span+span,.is-hover .lbl>span+span{transform:none;opacity:1;font-variation-settings:"wdth" 0,"wght" 610;letter-spacing:.02em}
.tag{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:6px 12px;opacity:.6;font-family:PPFormula;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wdth" 40,"wght" 610}

/* ---------- Pixel-Button (Nextjsshop Button01 → MHM-Farben) ---------- */
.pxbtn{--fill:var(--c-accent);--ink:var(--c-black);--h:clamp(38px,36px + 100vw*.004,44px);position:relative;display:inline-flex;align-items:center;height:var(--h);padding:0 calc(clamp(18px,1.6vw,26px) + var(--h)*.35) 0 clamp(18px,1.6vw,26px);color:var(--fill);border:1px solid var(--fill);background:transparent;font-family:PPFormula;font-size:clamp(10px,9.415px + 100vw*.0015,12px);font-variation-settings:"wdth" 40,"wght" 610;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;isolation:isolate;transition:border-color .3s var(--ease-out)}
.pxbtn--onlight{--fill:var(--c-black);--ink:var(--c-accent)}
.pxbtn_bg{position:absolute;inset:-1px;display:flex;pointer-events:none;z-index:0}
.pxbtn_bg-mid{flex:1;background:var(--fill);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out) .05s}
.pxbtn_bg-right{width:var(--h);display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr)}
.pxbtn_bg-overlay{position:absolute;left:100%;top:-10%;height:120%;width:calc(var(--h)*.6);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:1px}
/* Die Pixelflaeche liegt rechts NEBEN dem Button (left:100%, ~0.6*Buttonhoehe breit).
   Steht ein Button nah am rechten Rand, zog sie das Dokument auf (horizontaler Ueberlauf
   auf /galerie/* und /vibecheck, Nachaudit 09/2026, Befund 3). overflow:clip begrenzt die
   Dekoration auf den Button: sie zaehlt nicht mehr zum scrollbaren Bereich der Seite.
   Beschriftung und das 5x5-Pixelraster im Button bleiben unangetastet; der Fokusrahmen ist
   ein outline des Buttons selbst und wird von dessen eigenem overflow nicht beschnitten.
   Hinweis: overflow-clip-margin waere die Variante "Pixel sichtbar lassen" — Chromium
   rechnet den Clip-Rand aber wieder zum Scrollbereich, damit waere der Ueberlauf zurueck. */
.pxbtn{overflow:clip}
.pxbtn_px{display:block;background:var(--fill);opacity:0;transform:scale(.4);outline:.6px solid var(--fill);outline-offset:-.3px;transition:opacity .01s linear 0s,transform .01s linear 0s}
.pxbtn_inner{position:relative;z-index:1;display:block}
.pxbtn_inner::before{content:attr(data-text);position:absolute;left:0;top:0;color:var(--ink);clip-path:inset(-10% 100% -10% 0);transition:clip-path .45s var(--ease-out) .05s;white-space:nowrap}
.pxbtn_text{display:block}
.pxbtn:hover .pxbtn_bg-mid,.pxbtn:focus-visible .pxbtn_bg-mid,.pxbtn.is-hover .pxbtn_bg-mid{transform:scaleX(1)}
.pxbtn:hover .pxbtn_inner::before,.pxbtn:focus-visible .pxbtn_inner::before,.pxbtn.is-hover .pxbtn_inner::before{clip-path:inset(-10% -30% -10% 0)}
.pxbtn:hover .pxbtn_px,.pxbtn:focus-visible .pxbtn_px,.pxbtn.is-hover .pxbtn_px{opacity:1;transform:scale(1);transition-delay:calc(.28s + var(--i)*.045s)}
.pxbtn:hover .pxbtn_bg-overlay .pxbtn_px,.pxbtn.is-hover .pxbtn_bg-overlay .pxbtn_px{transition-delay:calc(.3s + var(--i)*.06s)}
.pxbtn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.pxbtn *{transition:none!important}}

/* ---------- Curtain / Loader ---------- */
.curtain{position:fixed;inset:0;z-index:9000;pointer-events:none}
.curtain .top,.curtain .bottom{position:absolute;left:0;width:100%;height:50%;background:var(--c-accent);transform:scaleY(0)}
.curtain .top{top:0;transform-origin:top}.curtain .bottom{bottom:0;transform-origin:bottom}
.curtain .line{position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:var(--c-accent);transform:scaleX(0);transform-origin:left}
.curtain .mark{position:absolute;left:50%;top:50%;width:clamp(56px,6vw,96px);transform:translate(-50%,-50%);opacity:0;visibility:hidden}
.curtain .mark svg{width:100%;height:auto}
html.curtain-closed .curtain .top,html.curtain-closed .curtain .bottom{transform:scaleY(1)}
html.curtain-closed .curtain .mark{opacity:1;visibility:visible}
html.curtain-closed .curtain{pointer-events:auto}

/* ---------- Bottom Bar ---------- */
.bar{position:fixed;left:50%;bottom:var(--bar-gap);transform:translateX(-50%);z-index:1000;display:flex;align-items:stretch;gap:2px;transform-origin:bottom;perspective:1000px}
.bar-main{display:flex;align-items:center;height:var(--bar-h);background:var(--bar-bg);color:var(--bar-fg);border-radius:2px;transition:background-color .25s var(--ease-out),color .25s var(--ease-out)}
.bar .burger{width:var(--bar-h);height:var(--bar-h);display:grid;place-items:center;position:relative}
.bar .burger i{position:absolute;left:14px;width:26px;height:2px;background:currentColor;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
/* Hover wie Phive: Linien spreizen sich auseinander */
.bar .burger:hover i:nth-child(1){transform:translateY(-6px)}
.bar .burger:hover i:nth-child(2){transform:translateY(6px)}
.bar .burger i:nth-child(1){top:22px}.bar .burger i:nth-child(2){top:30px}
.menu-open .bar .burger i:nth-child(1),.menu-open .bar .burger:hover i:nth-child(1){transform:translateY(4px) rotate(45deg)}.menu-open .bar .burger i:nth-child(2),.menu-open .bar .burger:hover i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.bar .brand{display:flex;align-items:center;gap:10px;padding:0 22px;height:100%;border-left:1px solid rgba(0,0,0,.15);border-right:1px solid rgba(0,0,0,.15)}
.bar .brand svg{width:22px;height:22px}
.bar .brand b{font-family:PPFormula;font-size:19px;font-variation-settings:"wdth" 40,"wght" 610;letter-spacing:.04em;text-transform:uppercase}
.bar .bar-cta{display:flex;align-items:center;gap:8px;padding:0 20px;height:100%}
.bar .bar-cta svg{width:16px;height:16px;transition:transform .5s var(--ease-out)}.bar .bar-cta:hover svg{transform:translateX(4px)}
.bar-anchors{display:none;align-items:center;gap:22px;padding:0 22px;height:var(--bar-h);background:var(--c-white);color:var(--c-black);border-radius:2px}
.has-anchors .bar-anchors{display:flex}
.bar-anchors a{font-family:PPFormula;font-size:19px;font-variation-settings:"wdth" 0,"wght" 400;text-transform:uppercase;transition:font-variation-settings .25s var(--ease-out)}
.bar-anchors a:hover,.bar-anchors a.active{font-variation-settings:"wdth" 0,"wght" 600}
@media (max-width:743px){.bar{left:var(--inset);right:var(--inset);transform:none;width:auto}.bar-main{width:100%}.bar .brand{flex:1;justify-content:center}.bar .bar-cta span{display:none}.bar .bar-wave .eq{display:flex}.bar .bar-wave .wa-ico{display:grid}}

/* ---------- Menü ---------- */
.menu{position:fixed;inset:0;z-index:900;pointer-events:none}
.menu-bg{position:absolute;inset:0;background:rgba(1,1,1,.72);backdrop-filter:grayscale(1) brightness(.6);opacity:0;transition:opacity 1s var(--ease-out)}
.menu-open .menu{pointer-events:auto}.menu-open .menu-bg{opacity:1}
.menu-panel{position:absolute;left:50%;bottom:calc(var(--bar-gap) + var(--bar-h) + 2px);transform:translateX(-50%);width:var(--menu-w);max-width:calc(100vw - 2*var(--inset));background:var(--c-black);color:var(--c-white);border-radius:2px;overflow:hidden;perspective:1000px;opacity:0;visibility:hidden}
.menu-lang{display:flex;justify-content:center;gap:14px;padding:12px 0 8px;position:relative}
.menu-lang a{font-family:PPFormula;font-size:11px;letter-spacing:.08em;font-variation-settings:"wdth" 40,"wght" 610;text-transform:uppercase;opacity:.5;padding-bottom:4px;border-bottom:1px solid transparent}
.menu-lang a.active{opacity:1;border-color:var(--c-accent)}
.menu-list li{border-top:1px solid var(--c-line)}
.menu-list a,.menu-list button{display:flex;align-items:center;justify-content:center;width:100%;height:52px;font-family:PPFormula;font-size:clamp(24px,2vw,30px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400;color:var(--c-accent);position:relative;transition:background-color .5s var(--ease-out),color .5s var(--ease-out)}
.menu-list li.cta a{background:var(--c-accent-soft)}
.menu-list li .more{position:absolute;right:0;top:0;height:100%;width:52px;border-left:1px solid var(--c-line);display:grid;place-items:center}
.menu-list li .more svg{width:18px;height:18px}
.menu-sub{position:absolute;inset:0;background:var(--c-black);opacity:0;visibility:hidden;transform-origin:left}
.menu-sub header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--c-line)}
.menu-sub header b{font-family:PPFormula;font-size:18px;text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 350}
.menu-sub header button{width:32px;height:32px;display:grid;place-items:center;color:var(--c-accent)}
.menu-sub ul{max-height:60vh;overflow:auto}
.menu-sub li a{height:46px;font-size:20px;justify-content:flex-start;padding:0 16px;border-top:1px solid var(--c-line)}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;background:var(--c-black);overflow:hidden;display:grid}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .01s}
.hero .slide.active{opacity:1}
.hero .slide video{width:100%;height:100%;object-fit:cover}
.hero .slide::after{content:"";position:absolute;inset:0;background:rgba(1,1,1,.25)}
.ribbon{position:absolute;left:0;width:100%;height:var(--ribbon-h);background:var(--c-accent);color:var(--c-black);overflow:hidden;z-index:3;will-change:transform}
.ribbon.top{top:0}.ribbon.bottom{bottom:0}
.ribbon-inner{position:absolute;left:0;width:100%;height:calc(var(--ribbon-h)*2)}
.ribbon.top .ribbon-inner{top:0}.ribbon.bottom .ribbon-inner{top:calc(var(--ribbon-h)*-1)}
.ribbon-track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;white-space:nowrap;will-change:transform}
.ribbon-track span{font-family:PPFormula;font-size:calc(var(--ribbon-h)*2*.92);line-height:1;font-variation-settings:"wdth" 0,"wght" 500;text-transform:uppercase;letter-spacing:-.02em;padding-right:.35em}
.ribbon .meta{position:absolute;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.ribbon.top .meta{left:calc(var(--inset) + 3vw);top:42%;transform:translateY(-50%)}
.ribbon.bottom .meta{left:calc(var(--inset) + 3vw);bottom:20%}
.ribbon .meta .callout{font-size:clamp(18px,1.5vw,24px);background:var(--c-accent);box-shadow:0 0 0 8px var(--c-accent)}
.ribbon .pill{display:inline-block;border:1px solid var(--c-black);border-radius:999px;padding:9px 18px;font-family:AcidGrotesk;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260}
.hero-content{position:absolute;inset:var(--ribbon-h) 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vh,22px);text-align:center;z-index:2;color:var(--c-white);visibility:hidden}
.hero-content .callout{opacity:.9}
.hero-content .headline{max-width:14ch}
.bullets{position:absolute;left:50%;bottom:calc(var(--ribbon-h) + 4vh);transform:translateX(-50%);display:flex;gap:14px;z-index:4}
.bullets button{width:72px;height:14px;display:flex;align-items:center}
.bullets button i{display:block;width:100%;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.bullets button i b{position:absolute;inset:0;background:var(--c-white);transform:scaleX(0);transform-origin:left}
@media (max-width:743px){.hero-content .headline{font-size:clamp(30px,9vw,44px)}.ribbon .meta{display:none}}

/* ---------- Leistungen / Foto-Wand ---------- */
.services{background:var(--c-black);color:var(--c-white);padding-top:clamp(60px,10vh,140px);position:relative;z-index:1}
.cta-typo{position:relative;display:grid;place-items:center;text-align:center;padding:6vh 0 8vh;min-height:88vh}
.cta-typo .t2{color:var(--c-accent)}
.cta-typo .manu{position:absolute;top:38%;left:50%;transform:translateX(-50%) rotate(-6deg);z-index:2;white-space:nowrap}
.cta-typo svg.curve{position:absolute;left:0;top:calc(-1 * clamp(60px,10vh,140px));width:100%;height:calc(100% + clamp(60px,10vh,140px));z-index:0;pointer-events:none}
.cta-typo svg.curve path{fill:none;stroke:var(--c-accent);stroke-width:2}
.services .intro{max-width:44ch;margin:0 auto;text-align:center;color:var(--c-accent);text-transform:uppercase}
.wall{height:400svh;position:relative}
.wall-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--inset) var(--inset) calc(var(--bar-h) + 2*var(--bar-gap) + 8px)}
.wall-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,80px);width:min(100%,var(--max));align-items:end}
.cluster .photos img{will-change:transform;position:relative}
.cluster{display:flex;flex-direction:column;gap:18px;align-items:center;width:100%}
.cluster .photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4px,.6vw,10px);width:100%}
.cluster .photos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.cluster h3{color:var(--c-accent);text-align:center;margin-top:6px}
.cluster .cl-btn{opacity:0}
.stats{width:min(100%,560px);margin:8vh auto 0;border:1px solid var(--c-accent);text-align:center;color:var(--c-accent)}
.stats header{padding:18px;border-bottom:1px solid var(--c-accent);text-transform:uppercase}
.stats .cells{display:grid;grid-template-columns:repeat(3,1fr)}
.stats .cells div{padding:16px 8px;border-left:1px solid var(--c-accent)}.stats .cells div:first-child{border-left:0}
.stats .cells small{display:block;font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260;color:var(--c-white);margin-top:4px}
@media (max-width:1023px){.wall{height:250svh}.wall-grid{grid-template-columns:repeat(2,1fr);gap:20px}.cluster .photos{grid-template-columns:repeat(4,1fr)}}

/* ---------- Claim (Bold Typography + Masken-Zoom) ---------- */
.claim{position:relative;height:500vh;background:var(--c-accent);color:var(--c-black);z-index:1}
.claim-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--c-accent)}
.claim-media{position:absolute;inset:0;opacity:0;z-index:1}
.claim-media video{width:100%;height:100%;object-fit:cover}
.claim-words{position:absolute;inset:0;z-index:3;pointer-events:none}
.claim .w1{position:absolute;left:0;right:0;top:0;height:50vh;display:flex;align-items:flex-start;justify-content:center;padding-top:30px;z-index:3}
.claim .w1 .word{font-family:PPFormula;font-size:clamp(110px,2.828px + 100vw*.2748,470px);font-variation-settings:"wdth" 34,"wght" 100;letter-spacing:-.02em;line-height:.81em;text-transform:uppercase;transform-origin:top center;white-space:nowrap;will-change:transform}
.claim .w2{position:absolute;left:0;right:0;top:50vh;height:50vh;display:flex;align-items:flex-end;justify-content:center;z-index:2}
.claim .w2 .word{font-family:PPFormula;font-size:clamp(84px,23vw,620px);transform-origin:top center;will-change:transform;font-variation-settings:"wdth" 30,"wght" 600;letter-spacing:-.02em;line-height:.81em;text-transform:uppercase;white-space:nowrap}
.claim .mask-wrap{position:absolute;inset:0;z-index:2;transform-origin:60.4% 75%;opacity:0;visibility:hidden}
.claim .mask-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.claim .manu{position:absolute;left:50%;top:50%;z-index:5;color:var(--c-white)}
.claim-objs{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.claim-objs img{position:absolute;top:0;left:var(--x,10%);width:var(--w,18vw);height:auto;will-change:transform;filter:drop-shadow(0 30px 40px rgba(1,1,1,.3))}
@media (max-width:1023px){.claim{height:300vh}.claim-objs img{width:calc(var(--w,18vw)*1.6)}}

/* ---------- Sticker-Typografie (Phive-Blob) ---------- */
.stk-wrap{position:static;display:grid;place-items:center;padding:6vh 0;min-height:88vh}
.page.block:has(> .stk-wrap){overflow:hidden}
.stk-wrap svg.curve{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.stk-wrap svg.curve path{fill:none;stroke:var(--c-accent);stroke-width:2}
.page-light .stk-wrap svg.curve path{stroke:var(--c-black)}
.stk{--stk-bg:var(--c-accent);--stk-fg:var(--c-black);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:1}
.stk.onlight{--stk-bg:var(--c-black);--stk-fg:var(--c-accent)}
.stk .line{display:inline-block;background:var(--stk-bg);color:var(--stk-fg);padding:.1em .28em .05em;border-radius:.17em;margin-top:-.11em;font-family:PPFormula;font-size:clamp(64px,10.5vw,220px);line-height:.9;text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 500;letter-spacing:-.015em;position:relative;white-space:nowrap}
.stk .line:first-child{margin-top:0}
.stk .hash{font-family:PureHeart;font-size:1.05em;display:inline-block;transform:rotate(-8deg);margin-right:.06em;text-transform:none}
.stk .manu{position:absolute;left:50%;top:var(--manu-top,62%);transform:translate(-50%,-50%) rotate(-6deg);z-index:3;color:var(--c-white);white-space:nowrap;margin:0}
.stk .line.rolling{display:inline-grid;justify-items:center;line-height:.9}
.cta-typo .stk .manu{--manu-top:58%}

/* ---------- Menü invertiert (Magenta-Panel) ---------- */
.menu-panel{background:var(--c-accent);color:var(--c-black)}
.menu-lang a{opacity:.55}.menu-lang a.active{opacity:1;border-color:var(--c-black)}
.menu-list li{border-top:1px solid rgba(1,1,1,.18)}
.menu-list a,.menu-list button{color:var(--c-black)}
.menu-list li.cta a{background:var(--c-black);color:var(--c-accent)}
.menu-list li .more{border-left:1px solid rgba(1,1,1,.18)}
.menu-sub{background:var(--c-accent)}
.menu-sub header{border-bottom:1px solid rgba(1,1,1,.18)}.menu-sub header button{color:var(--c-black)}
.menu-sub li a{border-top:1px solid rgba(1,1,1,.18)}

/* ---------- Projekte Showcase ---------- */
.showcase{overflow-x:clip;position:relative;height:300vh;background:var(--c-black);color:var(--c-accent);padding:clamp(24px,3vw,48px) 0;z-index:1}
.showcase-title{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:28px;overflow:hidden}
.showcase-title h2{line-height:1em}
.showcase-title p{max-width:52ch;text-transform:uppercase}
.cards{position:absolute;inset:0;pointer-events:none}
.pcard{position:absolute;width:clamp(240px,150px + 100vw*.16,420px);pointer-events:auto;color:var(--c-white);perspective:800px}
.pcard .inner{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--c-surface)}
.pcard .inner::after{content:"";position:absolute;inset:0;border:2px solid var(--c-accent);opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.pcard:hover .inner::after{opacity:1}
.pcard img,.pcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease-out)}
.pcard video{opacity:0;transition:opacity .5s var(--ease-out)}
.pcard:hover img{transform:scale(1.05)}.pcard:hover video{opacity:1}
.pcard .meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:16px;background:linear-gradient(to top,rgba(1,1,1,.7),transparent)}
.pcard .meta h3{font-size:clamp(20px,1.8vw,30px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400}
@media (max-width:1023px){.showcase{height:auto;padding-bottom:10vh}.showcase-title{height:auto;padding:12vh 0 6vh;position:relative}.cards{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:0 var(--inset)}.pcard{position:relative!important;left:auto!important;top:auto!important;width:auto;transform:none!important}}

/* ---------- Studio ---------- */
.studio{position:relative;min-height:100vh;display:grid;align-items:end;background:var(--c-black);color:var(--c-white);overflow:hidden;z-index:1}
.studio .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.55}
.studio .content{position:relative;z-index:2;padding:16vh var(--inset) 20vh;display:grid;gap:22px;max-width:70ch}
.studio .content .manu{color:var(--c-accent)}
.studio .content .t3{text-transform:uppercase}
.studio .content p{text-transform:uppercase;color:var(--c-white)}

/* ---------- Footer ---------- */
.footer{position:relative;background:var(--c-accent);color:var(--c-black);padding:14vh 0 0;overflow:hidden;z-index:1}
.footer .rolling-wrap{text-align:center;padding:0 var(--inset)}
.socials{position:relative;height:clamp(300px,52vh,560px);margin:6vh 0 2vh;--ball:clamp(180px,24vw,400px)}
.ball{position:absolute;bottom:0;width:var(--ball);height:var(--ball);left:calc((100% - var(--ball))*var(--i)/3);will-change:transform;--rot:0}
.ball a{display:block;width:100%;height:100%;position:relative}
.ball .img{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:0 solid var(--c-white);transition:transform .25s var(--ease-out),border .25s var(--ease-out)}
.ball .img img{width:100%;height:100%;object-fit:cover}
.ball .ini{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-white);font-size:clamp(60px,7vw,120px);font-variation-settings:"wdth" 0,"wght" 400;text-transform:uppercase;line-height:1}
.ball a:hover .img{border-width:min(15px,1vw);transform:rotate(calc(var(--rot)*1deg))}
.footer .legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:20px var(--inset) calc(var(--bar-h) + 2*var(--bar-gap));border-top:1px solid rgba(1,1,1,.25);font-family:AcidGrotesk;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260}
/* Footer-Links umbrechen statt die Seite breit zu machen (sonst ~591px Zeile auf 360–390px Viewport) */
.footer .legal nav{display:flex;flex-wrap:wrap;gap:10px 18px;max-width:100%;min-width:0}
@media (max-width:743px){.footer .legal{justify-content:center;text-align:center}.footer .legal nav{justify-content:center}}
.footer .cta-row{display:flex;justify-content:center;padding:4vh 0 calc(var(--bar-h) + 3*var(--bar-gap))}

/* ---------- FlipLinks (Footer-Socials, mittig) ---------- */
.flips{display:grid;justify-items:center;align-content:center;gap:.04em;padding:6vh 0 2vh;color:var(--c-black)}
.flip{position:relative;display:block;overflow:hidden;white-space:nowrap;line-height:.92;font-family:PPFormula;font-size:clamp(56px,10vw,170px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 600;letter-spacing:-.02em}
.flip .a,.flip .b{display:block}
.flip .b{position:absolute;inset:0;color:var(--c-white)}
.flip .ch{display:inline-block;transition:transform .25s ease-in-out;transition-delay:calc(var(--i)*.025s)}
.flip .b .ch{transform:translateY(120%)}
.flip:hover .a .ch,.flip:focus-visible .a .ch{transform:translateY(-120%)}
.flip:hover .b .ch,.flip:focus-visible .b .ch{transform:none}
@media (prefers-reduced-motion:reduce){.flip .ch{transition:none}}

/* ---------- Unterseiten: Common Header ---------- */
.chead{position:relative;height:100svh;min-height:520px;background:var(--c-black);overflow:hidden;display:grid;place-items:center;text-align:center;perspective:1000px}
.chead .media{position:absolute;inset:0}
.chead .media img,.chead .media video{width:100%;height:100%;object-fit:cover}
.chead .media::after{content:"";position:absolute;inset:0;background:rgba(229,12,126,.18);mix-blend-mode:multiply}
.chead .media::before{content:"";position:absolute;inset:0;background:rgba(1,1,1,.35);z-index:1}
.chead .title{position:relative;z-index:2;color:var(--c-accent);font-family:PPFormula;font-size:clamp(84px,.55px + 100vw*.235,400px);font-variation-settings:"wdth" 0,"wght" 460;line-height:1em;text-transform:uppercase;padding:0 var(--inset);word-break:break-word}
.chead .subtitle{position:relative;z-index:3;margin-top:-.9em;color:var(--c-white);max-width:90vw}
.chead .subtitle.manu1{margin-top:-.6em}
.chead .title.long{font-size:clamp(56px,10.5vw,210px)}
.chead.onlight{background:var(--c-accent)}.chead.onlight .title{color:var(--c-black)}.chead.onlight .subtitle{color:var(--c-white)}
.marquee{position:absolute;top:0;left:0;width:100%;z-index:4;overflow:hidden;padding:10px 0;color:var(--c-accent)}
.marquee .track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:loop 14s linear infinite}
.marquee .track span{font-family:AcidGrotesk;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 400}
@keyframes loop{to{transform:translate3d(-50%,0,0)}}

/* ---------- Content-Blöcke Unterseiten ---------- */
.page{position:relative;z-index:1}
.page-light{background:var(--c-accent);color:var(--c-black)}
.page-dark{background:var(--c-black);color:var(--c-white)}
.block{padding:clamp(60px,10vh,140px) 0}
.narrow{max-width:62ch;margin-inline:auto;text-align:center;text-transform:uppercase}
.iconstats{display:flex;justify-content:center;gap:clamp(24px,6vw,120px);flex-wrap:wrap;text-align:center}
.iconstats div{display:grid;gap:10px;justify-items:center}
.iconstats .val{font-family:PPFormula;font-size:clamp(28px,2.6vw,44px);font-variation-settings:"wdth" 0,"wght" 500}
.iconstats small{font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260}
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pills span{border:1px solid currentColor;border-radius:999px;padding:8px 14px;font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260}
.sticker{position:relative;display:inline-grid;justify-items:center;margin:0 auto;padding:clamp(20px,3vw,44px) clamp(28px,4vw,64px);background:var(--c-black);color:var(--c-accent);border-radius:clamp(20px,3vw,44px);text-align:center}
.sticker .manu{position:absolute;left:50%;top:46%;transform:translateX(-50%) rotate(-6deg);color:var(--c-white)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);padding:0 var(--inset)}
.gallery img,.gallery video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.gallery .tall{grid-row:span 2}.gallery .tall img{aspect-ratio:auto;height:100%}
.gallery .vtitle{display:grid;place-items:center;background:var(--c-accent);color:var(--c-black)}
.gallery .vtitle span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:PPFormula;font-size:clamp(60px,7vw,140px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 500;line-height:1}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--gutter);padding:0 var(--inset)}
.scard{position:relative;display:grid;gap:14px;padding:clamp(18px,2vw,30px);border:1px solid var(--c-line);border-radius:2px;background:var(--c-surface);color:var(--c-white);min-height:340px;overflow:hidden;transition:border-color .5s var(--ease-out)}
.scard:hover{border-color:var(--c-accent)}
.scard .num{color:var(--c-accent)}
.scard h3{font-size:clamp(26px,2.2vw,40px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400}
.scard p{color:var(--c-muted);text-transform:none;font-family:AcidGrotesk;font-size:14px;line-height:1.4;font-variation-settings:"wght" 160}
.scard .pills{justify-content:flex-start;margin-top:auto}
.scard .pills span{font-size:10px;opacity:.7}
.filter{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 var(--inset) 6vh}
.filter button{border:1px solid transparent;border-radius:999px;padding:10px 18px;font-family:PPFormula;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wdth" 40,"wght" 610;color:var(--c-accent);transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out)}
.filter button.active,.filter button:hover{background:var(--c-accent);color:var(--c-black)}
.filter .fl{color:var(--c-white);padding:10px 8px;opacity:.7}
.asl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gutter);padding:0 var(--inset)}
.asl div{border-top:1px solid currentColor;padding-top:18px}
.asl h4{font-size:clamp(20px,1.6vw,28px);text-transform:uppercase;margin-bottom:12px;font-variation-settings:"wdth" 0,"wght" 400}
.asl p{font-family:AcidGrotesk;font-size:15px;line-height:1.45;font-variation-settings:"wght" 160}
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);padding:0 var(--inset)}
.proc div{border:1px solid currentColor;padding:24px;border-radius:2px}
.proc h4{font-size:clamp(22px,1.8vw,32px);text-transform:uppercase;margin:10px 0 12px;font-variation-settings:"wdth" 0,"wght" 400}
.proc p{font-family:AcidGrotesk;font-size:14px;line-height:1.45;font-variation-settings:"wght" 160}
.faq{max-width:80ch;margin-inline:auto;padding:0 var(--inset)}
.faq details{border-top:1px solid currentColor;padding:18px 0}
.faq summary{cursor:pointer;list-style:none;font-family:PPFormula;font-size:clamp(20px,1.6vw,28px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400;display:flex;justify-content:space-between}
.faq summary::after{content:"+"}.faq details[open] summary::after{content:"–"}
.faq p{font-family:AcidGrotesk;font-size:15px;line-height:1.5;margin-top:12px;font-variation-settings:"wght" 160}
/* FAQ-Seite: Suche, Sprungnavigation, Gruppen */
.faq-tools{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:80ch;margin:5vh auto 0;padding:0 var(--inset)}
.faq-tools input{flex:1 1 320px;background:var(--c-white);color:var(--c-black);border:1px solid var(--c-black);border-radius:999px;padding:14px 22px;font-family:AcidGrotesk;font-size:15px;font-variation-settings:"wght" 200;outline-offset:2px}
.faq-tools button{border:1px solid currentColor;background:none;color:inherit;border-radius:999px;padding:12px 18px;font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-variation-settings:"wght" 260}
.faq-nav{margin:4vh auto 0}
.faq-group{margin-top:12vh;scroll-margin-top:100px}
.faq-group .faq-intro{margin:10px auto 3vh;max-width:60ch}
/* Galerie: Masonry-Spalten, KI-Badge, Bildunterschrift, Video-Play, Lightbox */
.gal-tabs a.is-active{background:var(--c-black);color:var(--c-accent);border-color:var(--c-black)}
.gal{columns:4 240px;column-gap:14px;padding:0 var(--inset);margin-top:6vh}
.gal-item{display:block;break-inside:avoid;margin:0 0 14px;position:relative;overflow:hidden;border-radius:2px;background:var(--c-black);aspect-ratio:var(--r,1);color:var(--c-white)}
/* Native Versteck-Bedeutung: .gal-item{display:block} wuerde das hidden-Attribut
   aus galerie.php ueberschreiben — dann waeren alle Medien schon vor dem Klick
   auf "Mehr laden" sichtbar. */
.gal-item[hidden]{display:none}
.gal-item img,.gal-item video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease-out)}
.gal-item:hover img,.gal-item:hover video{transform:scale(1.04)}
.gal-item .ai-badge{top:10px;bottom:auto}/* Galerie: oben links, Bildunterschrift bleibt unten frei */
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(to top,rgba(1,1,1,.75),transparent);font-family:AcidGrotesk;font-size:11px;letter-spacing:.04em;opacity:0;transition:opacity .4s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-item:hover .gal-cap{opacity:1}
.gal-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(1,1,1,.6);border:1px solid rgba(255,255,255,.5)}
.gal-play::after{content:"";position:absolute;left:21px;top:16px;border-left:16px solid var(--c-accent);border-top:10px solid transparent;border-bottom:10px solid transparent}
.gal-more{border:1px solid currentColor;background:none;color:inherit;border-radius:999px;padding:14px 22px;font-family:AcidGrotesk;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-variation-settings:"wght" 260}
.lb{position:fixed;inset:0;z-index:1200;background:rgba(1,1,1,.96);display:none;align-items:center;justify-content:center;color:var(--c-white)}
.lb.is-open{display:flex}
.lb-stage{display:contents}
.lb img,.lb video{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-cap{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);max-width:80vw;text-align:center;font-family:AcidGrotesk;font-size:12px;letter-spacing:.04em;font-variation-settings:"wght" 200}
.lb-cap .gal-ai{position:static;display:inline-block;margin-right:8px}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(1,1,1,.5);color:var(--c-white);font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;font-family:AcidGrotesk}
.lb-prev{left:18px}.lb-next{right:18px}.lb-close{top:18px;right:18px;transform:none;font-size:26px}
.lb-btn:hover{color:var(--c-accent);border-color:var(--c-accent)}
@media (max-width:743px){.gal{columns:2 140px;column-gap:8px}.gal-item{margin-bottom:8px}.lb-btn{width:42px;height:42px}}
.faq-more{display:inline-block;margin-top:28px;font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid currentColor;font-variation-settings:"wght" 260}
.form{max-width:780px;margin-inline:auto;padding:0 var(--inset);display:grid;gap:24px}
.form label{display:grid;gap:8px;font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260}
.form input,.form textarea,.form select{width:100%;background:var(--c-white);color:var(--c-black);border:0;border-radius:2px;padding:16px;font-family:AcidGrotesk;font-size:16px;font-variation-settings:"wght" 200}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.form .check{display:flex;gap:10px;align-items:center;text-transform:none;font-size:13px}
.form .check input{width:18px;height:18px}
.cardsel{display:flex;gap:var(--gutter);justify-content:center;flex-wrap:wrap}
/* Label = Positionsbezug, damit die versteckte Checkbox nicht am Viewport klebt (sonst 100% Breite aus `.form input` → horizontaler Ueberlauf) */
.cardsel label{position:relative;display:grid;gap:10px;padding:14px;border:1px solid currentColor;border-radius:2px;width:140px;cursor:pointer;text-align:left}
.cardsel label:has(input:checked){background:var(--c-black);color:var(--c-accent)}
.cardsel label:has(input:focus-visible){outline:2px solid var(--c-accent);outline-offset:3px}
/* visually-hidden: bedienbar per Tastatur/Leertaste, aber ohne Layout-Breite */
.cardsel input{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cardsel b{font-family:PPFormula;font-size:20px;text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400;line-height:1}
.legal-text{max-width:76ch;margin-inline:auto;padding:0 var(--inset);font-family:AcidGrotesk;font-size:15px;line-height:1.55;font-variation-settings:"wght" 160}
.legal-text h2{font-family:PPFormula;text-transform:uppercase;font-size:clamp(28px,2.6vw,44px);margin:36px 0 12px;font-variation-settings:"wdth" 0,"wght" 400}
.legal-text h3{font-family:PPFormula;text-transform:uppercase;font-size:clamp(20px,1.6vw,28px);margin:24px 0 8px;font-variation-settings:"wdth" 0,"wght" 400}
.legal-text p,.legal-text li{margin-bottom:10px}.legal-text ul{padding-left:18px;list-style:disc}
.legal-text a{text-decoration:underline}
@media (max-width:743px){.asl,.proc{grid-template-columns:1fr}.form .two{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- Motion-Helfer ---------- */
.rolling{display:inline-grid;grid-template-columns:1fr;grid-template-rows:1fr;justify-items:start;align-items:start;overflow:hidden;line-height:1;vertical-align:top}
.rolling>span{grid-area:1/1;white-space:nowrap;display:block;line-height:1}
.rolling-wrap{display:grid;place-items:center}
.rolling.center{display:grid;justify-items:center}/* Rolling-Titel mit center: blockbreit + Inhalt mittig (inline-grid + justify-items:start würde links kleben) */
.rolling .word{display:inline-block}/* Zeilenumbruch nur zwischen Woertern, nicht mitten im Wort */
/* Rolling-Ueberschriften duerfen umbrechen. Mit white-space:nowrap ist die Min-Content-
   Breite = ganze Zeile; das inline-grid wird dann breiter als sein Container und zieht
   das Dokument auf (Nachaudit 09/2026, Befund 3: "Bereit fuer dein Projekt?" = 556px bei
   360px Viewport). Kein Breakpoint, weil der Kipppunkt von Textlaenge und Sprache abhaengt
   (DE bis ~750px, EN bis ~745px). Der Roll-Effekt bleibt: er laeuft pro Buchstabe, und
   beide Textlagen liegen in derselben Grid-Zelle, brechen also identisch um.
   Passt genug Platz, bleibt alles einzeilig — auf Desktop aendert sich nichts.
   Sticker-Zeilen (.stk .line) haben ihr eigenes nowrap und bleiben bewusst einzeilig. */
.rolling:not(.line)>span{white-space:normal}
.rolling:not(.line) .word{overflow-wrap:anywhere}/* Notbremse: ein einzelnes zu langes Wort bricht, statt ueberzulaufen */
h2.t4{text-align:center}/* Sektionstitel immer mittig */
.rolling .char{display:inline-block}
.split-char,.split-word{display:inline-block}
/* Die Einblend-Animation startet Woerter mit scale 2 und Drehung. Vor dem ersten
   Sichtkontakt steht dieser Zustand und ragt seitlich ueber den Bildschirm — auf
   schmalen Geraeten wuchs das Dokument dadurch auf bis zu 476 px bei 390 px Breite.
   Die Sektion schneidet den Ueberstand jetzt ab. 'clip' statt 'hidden': es entsteht
   kein Scrollcontainer, position:sticky bleibt heil. Senkrecht wird nichts geschnitten. */
.page{overflow-x:clip}
[data-reveal]{visibility:hidden}
.reveal-ready [data-reveal]{visibility:visible}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* Foto-Wand: CTA in der Mitte (Phive call-to-action) */
.manu3{font-family:PureHeart;font-size:clamp(40px,28.105px + 100vw*.0305,80px);line-height:.8em}
.wall-cta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none;padding-bottom:calc(var(--bar-h) + 2*var(--bar-gap))}
.wall-cta .title-box{display:grid;place-items:center;text-align:center}
.wall-cta .title-box>*{grid-area:1/1}
.wall-cta .t1{font-size:clamp(64px,12vw,260px);color:var(--c-accent)}
.wall-cta .manu{position:relative;z-index:2;white-space:nowrap}
@media (max-width:1023px){.wall-cta .t1{font-size:14vw}}
/* Leistungs-Detail: breites Beispielbild */
.svc-wide{margin-top:8vh;display:grid;gap:14px;justify-items:center}
.svc-wide img{width:100%;height:auto;border-radius:4px;border:1px solid rgba(0,0,0,.35);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.svc-wide figcaption{font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260;text-align:center;max-width:78ch}

/* Bar: Audiowave (Equalizer) statt Kontakt-Label */
.bar .bar-wave{position:relative;width:var(--bar-h);padding:0;justify-content:center;background:none;border:0;color:inherit;cursor:pointer}
.bar .bar-wave .eq,.bar .bar-wave .wa-ico{transition:opacity .3s var(--ease-out),transform .5s cubic-bezier(.34,1.56,.64,1)}
.bar .bar-wave .wa-ico{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.4) rotate(-25deg)}
.bar .bar-wave .wa-ico svg{width:24px;height:24px;fill:currentColor}
.bar .bar-wave:hover .eq,.bar .bar-wave.is-open .eq{opacity:0;transform:scale(.4)}
.bar .bar-wave:hover .wa-ico,.bar .bar-wave.is-open .wa-ico{opacity:1;transform:none}
.bar .eq{display:flex;align-items:center;gap:3px;height:24px}
.bar .eq i{display:block;width:2px;height:calc(100% * var(--h,1));background:currentColor;border-radius:1px;transform-origin:center;animation:eq 1.1s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.bar .bar-wave:hover .eq i{animation-duration:.42s}
@keyframes eq{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.bar .eq i{animation:none}}
/* Footer: Zahnrad (Pulse-Backend) */
.legal .gear{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:6px;opacity:.55;vertical-align:middle;transition:opacity .3s var(--ease-out),transform .6s var(--ease-out)}
.legal .gear:hover{opacity:1;transform:rotate(90deg)}
.legal .gear svg{width:15px;height:15px}
/* Go-Top */
.gotop{position:fixed;right:var(--inset);bottom:calc(var(--bar-gap) + 4px);z-index:999;width:46px;height:46px;border-radius:50%;background:var(--c-accent);color:var(--c-black);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility .4s,background-color .25s var(--ease-out),color .25s var(--ease-out)}
.gotop.show{opacity:1;visibility:visible;transform:none}
.gotop:hover{transform:translateY(-3px)}
.gotop svg{width:18px;height:18px}
body.theme-light .gotop{background:var(--c-black);color:var(--c-accent)}
@media (max-width:1023px){.gotop{right:12px;bottom:calc(var(--bar-gap) + var(--bar-h) + 14px)}.stk-wrap,.cta-typo{min-height:0}}

/* Unterseiten-Inhalte (Live-Struktur): Feature-Blöcke, Tagessätze, Pakete, Details, Rezensionen, Vernetzen */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);padding:0 var(--inset)}
.feat div{border-top:1px solid currentColor;padding-top:18px;display:grid;gap:12px;align-content:start}
.feat h4{font-size:clamp(20px,1.5vw,26px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400}
.feat p{font-family:AcidGrotesk;font-size:14px;line-height:1.45;font-variation-settings:"wght" 160}
.rates{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gutter);margin-top:6vh;padding:0 var(--inset)}
.rates div{min-width:220px;border:1px solid currentColor;border-radius:2px;padding:24px 28px;display:grid;gap:8px;justify-items:center}
.rates b{font-family:PPFormula;font-size:clamp(34px,3.2vw,56px);font-variation-settings:"wdth" 0,"wght" 500;line-height:1}
.rates small{font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260;text-align:center;max-width:26ch}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:var(--gutter);padding:0 var(--inset);margin-top:6vh;align-items:stretch}
.tier{position:relative;border:1px solid currentColor;border-radius:2px;padding:26px 22px 24px;display:flex;flex-direction:column;gap:6px}
.tier.rec{box-shadow:0 0 0 1px currentColor}
.tier .badge{position:absolute;top:-11px;left:22px;background:var(--c-accent);color:var(--c-black);font-family:AcidGrotesk;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;font-variation-settings:"wght" 300}
.page-light .tier .badge{background:var(--c-black);color:var(--c-accent)}
.tier h4{font-size:clamp(22px,1.8vw,30px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400}
.tier .days{opacity:.7}
.tier .price{font-family:PPFormula;font-size:clamp(30px,2.6vw,44px);font-variation-settings:"wdth" 0,"wght" 500;line-height:1;margin-top:8px}
.tier small{font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260;opacity:.75}
.tier ul{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:8px;flex:1;align-content:start}
.tier li{font-family:AcidGrotesk;font-size:14px;line-height:1.4;font-variation-settings:"wght" 160;padding-left:16px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:currentColor}
.tier .pxbtn{align-self:flex-start}
.pills.big{gap:10px}.pills.big span,.pills.big a{border:1px solid currentColor;border-radius:999px;padding:10px 18px;font-family:AcidGrotesk;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260;transition:opacity .25s var(--ease-out)}.pills.big a:hover{opacity:.6}
.pills.center{justify-content:center;padding:0 var(--inset)}
.proc.five{grid-template-columns:repeat(5,1fr)}
.details{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:3vh;padding-top:18px;border-top:1px solid currentColor}
.details div{display:grid;gap:8px;align-content:start}.details small{font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260;opacity:.7}.details span{font-family:AcidGrotesk;font-size:15px;line-height:1.4;font-variation-settings:"wght" 200}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
/* Rezensionen-Strom (Home/Projekte): scrollgekoppelt via marquee(), Karten 2× im Track */
.rev-stream{overflow:hidden;margin-top:6vh;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.rev-stream__track{display:flex;align-items:stretch;gap:18px;width:max-content;will-change:transform;padding:4px 0}
.rev-stream .review{flex:0 0 auto;width:clamp(280px,30vw,420px)}
.page-light .review{background:var(--c-white);border-color:rgba(1,1,1,.15)}.page-light .review p{color:var(--c-black)}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--gutter);padding:0 var(--inset);margin-top:6vh}
.review{border:1px solid var(--c-line);border-radius:2px;padding:24px;background:var(--c-surface);display:grid;gap:12px;align-content:start}
.review .stars{color:var(--c-accent);letter-spacing:2px;font-size:14px}.review .stars small{letter-spacing:.06em;font-family:AcidGrotesk;font-size:10px;text-transform:uppercase;color:var(--c-muted);margin-left:8px}
.review p{font-family:AcidGrotesk;font-size:14px;line-height:1.5;font-variation-settings:"wght" 160;color:var(--c-white)}
.review b{font-family:PPFormula;font-size:18px;text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400;margin-top:auto}
.review small{font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260;color:var(--c-muted)}
.connect{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--gutter)}
.connect a{border-top:1px solid currentColor;padding:16px 0;display:flex;align-items:baseline;gap:12px;font-family:PPFormula;font-size:clamp(20px,1.6vw,28px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400;transition:opacity .25s var(--ease-out)}.connect a:hover{opacity:.6}
.connect a .label1{opacity:.6}
.studio-info{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:6vh}
.studio-info div{border-top:1px solid currentColor;padding-top:18px}.studio-info h4{text-transform:uppercase;font-size:clamp(22px,1.8vw,30px);margin-bottom:10px;font-variation-settings:"wdth" 0,"wght" 400}.studio-info p{font-family:AcidGrotesk;font-size:15px;line-height:1.5;font-variation-settings:"wght" 160}.studio-info a:hover{text-decoration:underline}
@media (max-width:1023px){.feat,.proc.five,.details{grid-template-columns:1fr 1fr}.cols2,.studio-info{grid-template-columns:1fr}}
@media (max-width:743px){.feat,.proc.five,.details{grid-template-columns:1fr}}

/* WhatsApp-Assistent: Panel über der Bar (Wave-Button öffnet, Versand per wa.me) */
.wa-panel{position:fixed;left:50%;bottom:calc(var(--bar-gap) + var(--bar-h) + 14px);transform:translateX(-50%) translateY(18px) scale(.97);width:min(360px,calc(100vw - 24px));background:var(--c-surface);color:var(--c-white);border:1px solid var(--c-line);border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden;opacity:0;visibility:hidden;z-index:1001;transition:opacity .25s var(--ease-out),transform .4s var(--ease-out),visibility .25s;font-family:AcidGrotesk;font-variation-settings:"wght" 200}
.wa-panel.is-open{opacity:1;visibility:visible;transform:translateX(-50%)}
.wa-panel__head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--c-accent);color:var(--c-black)}
.wa-panel__avatar{width:38px;height:38px;flex:none;border-radius:50%;background:var(--c-black);color:var(--c-accent);display:grid;place-items:center;font-family:PPFormula;font-size:14px;font-variation-settings:"wdth" 40,"wght" 610}
.wa-panel__name{font-family:PPFormula;font-size:17px;text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 500;line-height:1.1}
.wa-panel__status{font-size:11px;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-top:3px}
.wa-panel__status::before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399}
.wa-panel__close{margin-left:auto;width:40px;height:40px;flex:none;background:none;border:0;color:inherit;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center}
.wa-panel__body{padding:16px;background:#0b0b0b;min-height:96px;max-height:min(50vh,380px);overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px}
.wa-panel__bubble{background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-white);padding:10px 13px;border-radius:2px 14px 14px 14px;font-size:14px;line-height:1.5;max-width:90%;white-space:pre-wrap}
.wa-panel__bubble--user{align-self:flex-end;background:var(--c-accent);color:var(--c-black);border-color:var(--c-accent);border-radius:14px 2px 14px 14px}
.wa-panel__bubble--typing{display:flex;gap:4px;align-items:center;padding:12px 14px}
.wa-panel__bubble--typing span{width:6px;height:6px;border-radius:50%;background:var(--c-white);opacity:.3;animation:wa-typing 1.1s infinite ease-in-out}
.wa-panel__bubble--typing span:nth-child(2){animation-delay:.15s}
.wa-panel__bubble--typing span:nth-child(3){animation-delay:.3s}
@keyframes wa-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.wa-panel__form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--c-line)}
.wa-panel__input{flex:1;min-width:0;min-height:44px;border:1px solid var(--c-line);border-radius:999px;padding:10px 14px;background:transparent;color:var(--c-white);font:inherit;font-size:14px;outline:none}
.wa-panel__input:focus{border-color:var(--c-accent)}
.wa-panel__send{width:44px;height:44px;flex:none;border-radius:50%;background:var(--c-accent);border:0;display:grid;place-items:center;cursor:pointer}
.wa-panel__send svg{width:17px;height:17px;fill:var(--c-black);margin-left:2px}
@media (prefers-reduced-motion:reduce){.wa-panel,.bar .bar-wave .eq,.bar .bar-wave .wa-ico{transition:none}}

/* Tool-Logo-Banner (AI-Stack Slider) */
.ai-slider{position:relative;width:100%;margin-top:10vh;color:var(--c-white);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);overflow:hidden;--ai-slider-h:clamp(74px,9vw,116px)}
.ai-slider__sprite{position:absolute;width:0;height:0;pointer-events:none}
.ai-slider__viewport{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.ai-slider__track{display:flex;align-items:center;width:max-content;height:var(--ai-slider-h);will-change:transform}
.ai-slider__item{flex:0 0 auto;display:inline-flex;align-items:center;gap:.7em;color:rgba(255,255,255,.8);font-family:AcidGrotesk;font-size:clamp(13px,1.1vw,16px);letter-spacing:.04em;text-transform:uppercase;font-variation-settings:"wght" 260;white-space:nowrap;transition:color .3s var(--ease-out)}
.ai-slider__item::after{content:"/";margin:0 clamp(1.8rem,3.6vw,3.6rem);color:var(--c-accent);opacity:.7}
.ai-slider__item:hover{color:var(--c-accent)}
.ai-slider__logo{flex:0 0 auto;height:clamp(28px,3.6vw,44px);width:auto;fill:currentColor;display:block}
@media (max-width:600px){.ai-slider{--ai-slider-h:70px}.ai-slider__logo{height:clamp(26px,7vw,34px)}}
.ai-slider__logo--mask{background:currentColor;-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat}

/* Kundenlogo-Streifen (Original-Logofarben auf Magenta, Endlos-Loop, Pause bei Hover) */
.clients-strip{position:relative;width:100%;margin-top:10vh;padding:clamp(20px,3vw,36px) 0;overflow:hidden;background:var(--c-black);border-top:1px solid var(--c-line);--cl-h:clamp(28px,3.6vw,48px);--cl-gap:clamp(40px,6vw,96px)}
.clients-strip::before,.clients-strip::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,120px);pointer-events:none;z-index:2}
.clients-strip::before{left:0;background:linear-gradient(to right,var(--c-black),transparent)}
.clients-strip::after{right:0;background:linear-gradient(to left,var(--c-black),transparent)}
.clients-strip__track{display:flex;align-items:center;gap:var(--cl-gap);width:max-content;will-change:transform}
.clients-strip__logo{flex:0 0 auto;height:var(--cl-h);width:auto;max-width:clamp(120px,14vw,180px);object-fit:contain;display:block;opacity:.92}
.clients-strip + .ai-slider{margin-top:0;border-top:0}
@keyframes clientsScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:743px){.clients-strip{--cl-h:clamp(22px,5vw,36px);--cl-gap:clamp(28px,7vw,56px)}}

/* Studio: Skills 5-spaltig, Zahlen 2×2 neben dem Bild, Instagram-Stream (aus der alten Site, /api/instagram.php) */
.asl.five{grid-template-columns:repeat(5,1fr)}
@media (max-width:1023px){.asl.five{grid-template-columns:repeat(2,1fr)}}
@media (max-width:743px){.asl.five{grid-template-columns:1fr}}
.stats.grid2 .cells div:nth-child(3){border-left:0}.stats.grid2 .cells div:nth-child(n+3){border-top:1px solid currentColor}
.ig-stream{margin-top:12vh;text-align:center}
.ig-stream__viewport{overflow:hidden;margin-top:5vh;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.ig-stream__track{display:flex;align-items:center;gap:18px;width:max-content;will-change:transform}/* Antrieb: marquee() in site.js (scrollgekoppelt), kein CSS-Loop mehr */
.ig-card{position:relative;display:block;flex:0 0 auto;width:clamp(170px,15vw,250px);aspect-ratio:9/16;overflow:hidden;border-radius:2px;background:var(--c-black)}/* alle Kacheln gleich gross: feste Breite + festes Verhaeltnis, damit die Bandbreite schon vor dem Bildladen feststeht und der scrollgekoppelte Lauf nicht springt */
.ig-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.5s var(--ease-out)}
.ig-card:hover img{transform:scale(1.06)}
.ig-card .lbl{position:absolute;left:12px;bottom:12px;background:var(--c-black);color:var(--c-accent);font-family:AcidGrotesk;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;font-variation-settings:"wght" 300}
@keyframes igScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ig-stream__track{animation:none}}

/* Vibecheck (eigene Seite, Endpunkt php/vibecheck.php der alten Site) */
.vc-form{position:relative;margin-top:6vh}
.vc-error{color:var(--c-black);background:rgba(1,1,1,.12);padding:12px 16px;border-radius:2px;margin-top:18px;text-align:center}
.vc-loading{max-width:640px;margin:6vh auto 0}
.vc-scan{background:var(--c-black);color:var(--c-white);border-radius:4px;padding:28px 26px;display:grid;gap:14px;text-align:left}
.vc-scan__row{display:flex;align-items:center;gap:14px;opacity:.35;transition:opacity .4s var(--ease-out)}
.vc-scan__row.is-active{opacity:1}.vc-scan__row.is-done{opacity:.8}
.vc-scan__gear{width:22px;height:22px;flex:none;color:var(--c-accent);animation:vcSpin 3s linear infinite;opacity:0}.vc-scan__row.is-active .vc-scan__gear{opacity:1}.vc-scan__gear--rev{animation-direction:reverse;margin-left:-10px}
.vc-scan__row-txt{flex:1;display:grid}.vc-scan__row-txt strong{font-family:PPFormula;text-transform:uppercase;font-size:18px;font-variation-settings:"wdth" 0,"wght" 400}.vc-scan__row-txt span{font-family:AcidGrotesk;font-size:12px;color:var(--c-muted);font-variation-settings:"wght" 160}
.vc-scan__status{font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);font-style:normal}
.vc-scan__note{font-family:AcidGrotesk;font-size:12px;color:var(--c-muted);text-align:center;margin-top:6px}
@keyframes vcSpin{to{transform:rotate(360deg)}}
.vc-result{max-width:980px;margin:6vh auto 0;text-align:left;display:grid;gap:18px}
.vc-scorehead{display:flex;align-items:center;gap:28px;flex-wrap:wrap;background:var(--c-black);color:var(--c-white);padding:28px;border-radius:4px}
.vc-ring{position:relative;width:140px;height:140px;flex:none}.vc-ring svg{display:block;transform:rotate(-90deg)}
.vc-ring-fg{transition:stroke-dashoffset 1.4s var(--ease-out)}
.vc-ring-val{position:absolute;inset:0;display:grid;place-items:center;font-family:PPFormula;font-size:40px;font-variation-settings:"wdth" 0,"wght" 500}
.vc-summary{flex:1;min-width:240px}.vc-summary h3{font-family:PPFormula;font-size:26px;text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400;margin-bottom:8px}.vc-summary p{font-family:AcidGrotesk;font-size:15px;line-height:1.5;font-variation-settings:"wght" 160}
.vc-subscores{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.vc-ss{background:var(--c-black);color:var(--c-white);border-radius:4px;padding:18px 10px;text-align:center;display:grid;justify-items:center;gap:8px}.vc-ss .vc-ring{width:76px;height:76px}.vc-ss .vc-ring-val{font-size:20px}.vc-ss span:last-child{font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260}
.vc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vc-card{background:var(--c-black);color:var(--c-white);border-radius:4px;padding:24px}.vc-card h4{font-family:PPFormula;font-size:20px;text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400;margin-bottom:14px}
.vc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.vc-list li{font-family:AcidGrotesk;font-size:14px;line-height:1.45;font-variation-settings:"wght" 160;padding-left:18px;position:relative}.vc-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%}
.vc-pos li::before{background:#22c55e}.vc-neg li::before{background:#ef4444}
.vc-details details{border-top:1px solid var(--c-line);padding:12px 0}.vc-details details:first-of-type{border-top:0}.vc-details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-family:PPFormula;font-size:17px;text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400}.vc-details summary::-webkit-details-marker{display:none}.vc-details p{margin-top:8px;font-family:AcidGrotesk;font-size:13px;line-height:1.5;color:var(--c-muted)}
.vc-pill{font-family:PPFormula;font-size:18px}
.vc-tech{display:flex;flex-wrap:wrap;gap:8px}.vc-tech span{border:1px solid var(--c-line);border-radius:999px;padding:6px 12px;font-family:AcidGrotesk;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:"wght" 260}
.vc-gate{text-align:center}.vc-gate p{font-family:AcidGrotesk;font-size:14px;line-height:1.5;max-width:46ch;margin:0 auto 18px;font-variation-settings:"wght" 160}
.vc-again{display:block;margin:0 auto;background:none;border:0;color:var(--c-black);font-family:AcidGrotesk;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;cursor:pointer;padding:10px}
@media (max-width:1023px){.vc-subscores{grid-template-columns:repeat(3,1fr)}.vc-cols{grid-template-columns:1fr}}
@media (max-width:743px){.vc-subscores{grid-template-columns:repeat(2,1fr)}}

/* Header-Grafiken (Automation/Consulting): animierte SVGs, weniger abdunkeln */
.chead .media--graphic::before{background:rgba(1,1,1,.15)}.chead .media--graphic::after{opacity:.5}
.chead .media--custom{background:#0a0a0a}.chead .media--custom::after{display:none}.chead .media--custom::before{background:linear-gradient(180deg,rgba(1,1,1,.3),rgba(1,1,1,.55))}
/* Site-Pulse-Header: Live-Dashboard */
.pulse-hero{position:absolute;inset:0;overflow:hidden;color:var(--c-white)}
.pulse-hero__chart{position:absolute;left:0;right:0;top:18%;width:100%;height:70%;opacity:.85}
.pulse-hero__line{stroke-dasharray:2400;stroke-dashoffset:2400;animation:phDraw 6s cubic-bezier(.4,0,.2,1) infinite;filter:drop-shadow(0 0 8px currentColor)}
.pulse-hero__line.l1{color:#E50C7E}.pulse-hero__line.l2{color:#98F160;animation-delay:.8s}.pulse-hero__line.l3{color:#F4B731;animation-delay:1.6s}
@keyframes phDraw{0%{stroke-dashoffset:2400}30%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-2400}}
.pulse-hero__area{animation:phArea 6s ease-in-out infinite}@keyframes phArea{0%,100%{opacity:.55}50%{opacity:.9}}
.pulse-hero__live{position:absolute;top:calc(var(--inset) + 20px);left:var(--inset);display:inline-flex;align-items:center;gap:8px;font-family:AcidGrotesk;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);padding:7px 12px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.pulse-hero__live i{width:7px;height:7px;border-radius:50%;background:#98F160;box-shadow:0 0 0 0 rgba(152,241,96,.6);animation:phDot 1.6s ease-out infinite}
@keyframes phDot{0%{box-shadow:0 0 0 0 rgba(152,241,96,.6)}100%{box-shadow:0 0 0 12px rgba(152,241,96,0)}}
.pulse-hero__kpis{position:absolute;top:calc(var(--inset) + 20px);right:var(--inset);display:flex;gap:8px}
.pulse-hero__kpis div{display:grid;gap:6px;padding:12px 18px;border-left:1px solid rgba(255,255,255,.12);min-width:110px}.pulse-hero__kpis div:first-child{border-left:0}
.pulse-hero__kpis small{font-family:AcidGrotesk;font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.pulse-hero__kpis b{font-family:PPFormula;font-size:30px;line-height:1;font-variation-settings:"wdth" 0,"wght" 500;color:var(--c-accent)}
.pulse-hero__cluster{position:absolute;right:var(--inset);bottom:calc(var(--bar-h) + 2*var(--bar-gap) + 40px);display:flex;align-items:flex-end;gap:22px;opacity:.8}
.pulse-hero__donut{width:110px;height:110px;transform:rotate(-90deg)}
.pulse-hero__bars{display:flex;align-items:flex-end;gap:4px;height:90px}
.pulse-hero__bars span{width:8px;height:var(--h,50%);background:linear-gradient(to top,#E50C7E,#98F160);transform-origin:bottom;animation:phBar 2.5s ease-in-out infinite}
.pulse-hero__bars span:nth-child(2n){animation-delay:.2s}.pulse-hero__bars span:nth-child(3n){animation-delay:.4s}
@keyframes phBar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@media (max-width:1023px){.pulse-hero__kpis,.pulse-hero__cluster{display:none}}
@media (prefers-reduced-motion:reduce){.pulse-hero__line,.pulse-hero__area,.pulse-hero__bars span,.pulse-hero__live i{animation:none}.pulse-hero__line{stroke-dashoffset:0}}

/* Menü-Suche */
.menu-search{display:flex;border-bottom:1px solid var(--c-line)}
.menu-search input{flex:1;min-width:0;background:none;border:0;color:inherit;padding:14px 16px;font-family:AcidGrotesk;font-size:14px;font-variation-settings:"wght" 200;outline:none}
.menu-search input::placeholder{color:inherit;opacity:.55}
.menu-search button{background:none;border:0;border-left:1px solid var(--c-line);color:inherit;width:52px;cursor:pointer;font-size:18px}
/* Suchergebnisse */
.srch-group{max-width:80ch;margin:7vh auto 0;padding:0 var(--inset)}
.srch-group h2 small{font-family:AcidGrotesk;font-size:12px;letter-spacing:.06em;opacity:.6;margin-left:10px;text-transform:none}
.srch-item{display:block;border-top:1px solid currentColor;padding:18px 0}
.srch-item b{font-family:PPFormula;font-size:clamp(20px,1.6vw,28px);text-transform:uppercase;font-variation-settings:"wdth" 0,"wght" 400;display:block}
.srch-item p{font-family:AcidGrotesk;font-size:14px;line-height:1.5;margin-top:8px;opacity:.85;font-variation-settings:"wght" 160}
.srch-item mark{background:var(--c-accent);color:var(--c-white);padding:0 3px;border-radius:2px}
.srch-item:hover b{color:var(--c-accent)}
/* 404 */
.nf{position:relative;min-height:100svh;background:var(--c-black);color:var(--c-white);overflow:hidden;display:grid;place-items:end center;text-align:center}/* Text unten, damit das Gesicht im Video frei bleibt */
.nf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.85}
.nf::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(1,1,1,.1) 35%,rgba(1,1,1,.85) 100%);pointer-events:none}
.nf-inner{position:relative;z-index:2;padding:0 var(--inset) calc(var(--bar-h) + var(--bar-gap) + 6vh)}
.nf .t1{line-height:.9;font-size:clamp(88px,13vw,220px);color:var(--c-accent)}
.nf-manu{display:block;font-size:clamp(28px,5vw,64px);margin-top:-1vh}

/* EU AI Act Art. 50 — offizielles EU-Icon (assets/img/eu-ai/), sitzt am Medium */
.ai-badge{position:absolute;left:10px;bottom:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;background:rgba(1,1,1,.72);color:#fff;border-radius:999px;padding:4px 9px 4px 5px;font-family:AcidGrotesk;font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:1;font-variation-settings:"wght" 300;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;pointer-events:none}
.ai-badge img{width:18px!important;height:18px!important;display:block;flex:none;position:static!important;object-fit:contain!important;transform:none!important;opacity:1!important;border-radius:0!important;aspect-ratio:auto!important}/* Container-Regeln wie .gal-item img / .inner img dürfen das Icon nicht aufblasen */
.ai-badge--wide{padding:4px 6px}.ai-badge--wide img{width:auto!important;height:22px!important}
.ai-badge--inline{position:static;vertical-align:middle;margin-left:8px;padding:3px 6px}.ai-badge--inline img{width:16px;height:16px}
.hero .ai-badge{left:var(--inset);bottom:20vh}/* im Videofeld zwischen den Schriftbahnen */
.claim-media .ai-badge{left:var(--inset);bottom:calc(var(--bar-h) + var(--bar-gap) + 16px)}
.chead .media .ai-badge{left:var(--inset);bottom:var(--inset)}
.nf .ai-badge{left:auto;right:var(--inset);top:var(--inset);bottom:auto}
.lb-cap .ai-badge{position:static;margin-right:8px;pointer-events:auto}
.ai-note-line{font-family:AcidGrotesk;font-size:12px;letter-spacing:.04em;opacity:.8;margin:18px var(--inset) 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.legal .ai-note{display:inline-flex;align-items:center;gap:6px}.legal .ai-note img{width:16px;height:16px}

.gallery .gimg{position:relative;display:block}.gallery .gimg img{display:block}

/* Geräte-Ansichten (Web-Projekte): Desktop/Laptop/Handy mit echten Screenshots; Laptop + Handy scrollen (CSS), Hover pausiert */
.devices{display:grid;grid-template-columns:1.6fr 1.15fr .42fr;gap:clamp(18px,3vw,48px);align-items:end;max-width:var(--max);margin:0 auto;padding:0 var(--inset)}
.dev{position:relative}
.dev-screen{position:relative;overflow:hidden;background:#111;border:2px solid #2a2a2a;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.dev-screen img{width:100%;display:block}
.dev-scroll{will-change:transform;animation:devScroll 22s ease-in-out infinite alternate}
.dev-scroll img{display:block;width:100%}
.dev:hover .dev-scroll{animation-play-state:paused}
.dev--desktop .dev-screen{aspect-ratio:16/9;border-radius:10px;border-width:10px;border-color:#1c1c1c}
.dev--desktop .dev-stand{width:22%;height:22px;margin:0 auto;background:linear-gradient(#2a2a2a,#151515);border-radius:0 0 6px 6px}
.dev--desktop .dev-stand::after{content:"";display:block;width:220%;height:8px;margin:22px 0 0 -60%;background:#1c1c1c;border-radius:4px}
.dev--laptop .dev-screen{aspect-ratio:16/10;border-radius:10px 10px 2px 2px;border-width:10px 10px 6px;border-color:#1c1c1c}
.dev--laptop .dev-base{height:12px;margin:0 -4%;background:linear-gradient(#2c2c2c,#161616);border-radius:0 0 12px 12px}
.dev--laptop .dev-base::before{content:"";display:block;width:14%;height:4px;margin:0 auto;background:#0d0d0d;border-radius:0 0 4px 4px}
.dev--phone .dev-screen{aspect-ratio:390/844;border-radius:32px;border-width:8px;border-color:#1c1c1c}
.dev--phone .dev-screen::before{content:"";position:absolute;left:50%;top:8px;width:34%;height:16px;transform:translateX(-50%);background:#1c1c1c;border-radius:0 0 12px 12px;z-index:2}
.dev--phone .dev-scroll{animation-duration:26s}
@keyframes devScroll{from{transform:translateY(0)}to{transform:translateY(calc(-100% + var(--dev-h,100%)))}}
.dev--laptop .dev-scroll{--dev-h:0px}.dev--phone .dev-scroll{--dev-h:0px}
@media (max-width:1023px){.devices{grid-template-columns:1fr 1fr;align-items:end}.dev--desktop{grid-column:1/-1}}
@media (max-width:743px){.devices{grid-template-columns:1fr}.dev--phone{max-width:60%;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.dev-scroll{animation:none}}