:root{
  --green:#33FF99;--red:#DD4444;--yellow:#DEE369;--muted:#A3A3A3;
  --eo:cubic-bezier(0.23,1,0.32,1);--eio:cubic-bezier(0.77,0,0.175,1);
  --pad:clamp(24px,5vw,64px);--padL:clamp(24px,6vw,96px);
  --hh:100vh;--th:min(400px,70vh);--copy:17px;
  --font:"Roboto Condensed",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (max-width:767px){:root{--th:min(280px,60vh)}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000}
body{background:#000;color:#fff;font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
body.instant *{transition:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pixel{image-rendering:crisp-edges;image-rendering:pixelated}
.gray-layer{filter:grayscale(1);transition:opacity 400ms var(--eo)}
.gridov{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.5;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px)}
body.has-gitter .gridov{background-image:var(--gitter);background-position:center center;background-repeat:repeat;background-size:auto}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.75) 100%)}
.corners{position:absolute;inset:0;pointer-events:none;z-index:4}
.corners i{position:absolute;width:16px;height:16px;border:0 solid #6b6b6b}
.corners .tl{top:24px;left:24px;border-top-width:1px;border-left-width:1px}
.corners .tr{top:24px;right:24px;border-top-width:1px;border-right-width:1px}
.corners .bl{bottom:24px;left:24px;border-bottom-width:1px;border-left-width:1px}
.corners .br{bottom:24px;right:24px;border-bottom-width:1px;border-right-width:1px}

.head{position:relative;height:var(--hh);overflow:hidden}
#tunnelWrap{position:absolute;inset:0;overflow:hidden;z-index:1}
#tunnelVideo{opacity:0;transition:opacity 400ms var(--eo)}
.has-video #tunnelVideo{opacity:1}
.has-video #tunnelCanvas{visibility:hidden}

#loginStack{position:absolute;z-index:5;left:var(--padL);top:50%;transform:translateY(-50%);animation:revealL 600ms var(--eio) 100ms both}
@keyframes revealL{from{clip-path:inset(0% 100% 0% 0%)}to{clip-path:inset(0% 0% 0% 0%)}}
body.entered #loginStack{display:none}
#homeBrandSlot{position:absolute;z-index:5;left:var(--padL);bottom:96px}
body:not(.entered) #homeBrandSlot{display:none}
.brand{background:#000;width:min(460px,calc(100vw - 48px));padding:32px 40px 0}
.kicker{color:var(--green);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;min-height:22px}
.kicker.warn{color:var(--yellow)}
.rule{width:56px;height:2px;background:#fff;margin:16px 0}
.brand-title{display:flex;align-items:center;gap:16px;font-size:clamp(30px,3.6vw,46px);letter-spacing:4px;line-height:1.05;text-transform:uppercase}
.bar-mark{width:.24em;height:.9em;background:#fff;flex-shrink:0}
.brand-bar{height:8px;background:#fff;margin:32px -40px 0}
#login{background:#000;width:min(460px,calc(100vw - 48px));padding:40px}
.pw-row{display:flex}
#pw{flex:1;min-width:0;height:48px;background:#2a2a2a;border:0;color:#fff;padding:0 16px;font:400 var(--copy) var(--font);letter-spacing:2px}
#pw::placeholder{color:#a3a3a3}
.pw-go{width:48px;height:48px;background:var(--green);color:#000;display:grid;place-items:center;transition:transform 160ms var(--eo)}
.pw-go:active{transform:scale(.97)}
.shake{animation:shake 300ms}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
#logoLogin{position:absolute;z-index:5;right:clamp(48px,16vw,260px);top:50%;transform:translateY(-50%);width:140px}
#logoHome{position:absolute;z-index:5;top:40px;right:clamp(32px,6vw,96px);width:52px}
body:not(.entered) #logoHome{display:none}
body.entered #logoLogin{display:none}
@media (max-width:767px){#logoLogin{display:none}}
#logo svg,#logo img{display:block;width:100%;height:auto}

.diamond{position:absolute;z-index:6;width:48px;height:48px;display:grid;place-items:center;color:var(--green)}
.diamond::before{content:"";position:absolute;inset:0;background:#000;transform:rotate(45deg);transition:transform 200ms var(--eo)}
.diamond>svg{position:relative}
.diamond.green{color:#000}
.diamond.green::before{background:var(--green)}
.diamond.small{width:36px;height:36px}
.diamond.center{left:50%;top:50%;margin:-24px 0 0 -24px}
.diamond.inline{position:relative}
.diamond.scrollhint{left:50%;bottom:32px;margin-left:-18px}
.diamond:active::before{transform:rotate(45deg) scale(.97)}
.diamond.case-back{position:fixed;left:28px;top:28px;z-index:30;opacity:0;pointer-events:none;transition:opacity 300ms var(--eo)}
#case.ready .case-back{opacity:1;pointer-events:auto}
#case.leaving .case-back{opacity:0;pointer-events:none}
#reelBtn,#scrollBtn{display:none}
body.entered #reelBtn{display:grid;animation:pop 300ms var(--eo) 900ms both}
body.entered #scrollBtn{display:grid;animation:pop 300ms var(--eo) 1100ms both}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* Footer-Button (Back to top / Back to overview) */
.foot-btn{display:inline-flex;flex-direction:column;align-items:center;gap:20px;padding:8px}
.foot-btn .diamond{position:relative}
.foot-btn .link{pointer-events:none}

body:not(.entered) #homeContent{display:none}
.teaser{position:relative;display:block;width:100%;height:var(--th);overflow:hidden;border-bottom:1px solid #151515}
.teaser:focus-visible{outline-offset:-6px}
.teaser .img{position:absolute;left:0;right:0;height:var(--hh);top:calc((var(--th) - var(--hh)) / 2)}
.teaser .gray-layer{transition-duration:200ms}
.teaser .shade,.fly-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 60%)}
.teaser .label{position:absolute;z-index:4;left:var(--pad);bottom:32px}
.reveal{clip-path:inset(0% 0% 100% 0%);transition:clip-path 600ms var(--eio)}
.reveal.in{clip-path:inset(0% 0% 0% 0%)}
.lb-kicker{display:inline-block;background:#000;padding:6px 14px;color:var(--green);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.lb-title{display:flex;align-items:center;gap:12px;background:#000;padding:8px 18px;font-size:clamp(20px,2.2vw,30px);line-height:1.15;letter-spacing:4px;text-transform:uppercase;white-space:nowrap}
.lb-title .mk{width:.22em;height:.85em;background:#fff;flex-shrink:0}
.lb-bar{height:4px;background:#fff;transform:scaleX(.35);transform-origin:left;transition:transform 200ms var(--eo)}
.teaser:focus-visible .lb-bar{transform:scaleX(1)}
@keyframes flash{from{background:var(--green)}}

.wrap{max-width:1152px;margin:0 auto;padding:0 24px}
.sec{padding:96px 24px}
.two{display:grid;gap:48px;align-items:center}
@media (min-width:768px){.two{grid-template-columns:1fr 1fr}}
/* Headline: Balken nur vor der ersten Zeile */
.hl{display:flex;align-items:flex-start;gap:16px;font-weight:400;font-size:clamp(26px,3.2vw,42px);letter-spacing:4px;line-height:1.1;text-transform:uppercase}
.hl.end{justify-content:flex-end;text-align:right}
.hl.center{justify-content:center;text-align:center}
.hl .mk{width:.24em;height:.85em;margin-top:.125em;background:#fff;flex-shrink:0;transform:scaleY(0);transform-origin:bottom;transition:transform 200ms var(--eo)}
.hl .tx{clip-path:inset(0% 100% 0% 0%);transition:clip-path 600ms var(--eio) 100ms}
.hl.in .mk{transform:scaleY(1)}
.hl.in .tx{clip-path:inset(0% 0% 0% 0%)}
.hl.in .cur{animation:blink 1s steps(1) 700ms 3}
@keyframes blink{50%{opacity:0}}
.copy{color:#d4d4d4;font-size:var(--copy);line-height:1.65;max-width:62ch}
.copy+.copy{margin-top:16px}
.fu{opacity:0;transform:translateY(16px);transition:opacity 400ms var(--eo),transform 400ms var(--eo)}
.fu.in{opacity:1;transform:none}
.portrait{position:relative;width:100%;max-width:420px;aspect-ratio:1/1;overflow:hidden}
.social{display:flex;flex-wrap:wrap;gap:8px 32px;list-style:none;margin-top:32px}
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#1a1a1a;list-style:none}
.logos li{background:#000;height:88px;display:grid;place-items:center;opacity:0;transition:opacity 300ms var(--eo)}
.logos.in li{opacity:1}
.logos span{font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.5;transition:opacity 160ms ease;text-align:center}
.foot{display:flex;justify-content:center;padding:48px 0 128px}
.link{color:var(--green);font-weight:700;font-size:var(--copy);line-height:1.65;letter-spacing:1px;text-transform:uppercase;min-height:28px;transition:color 160ms ease}

#case{display:none}
.case-head{position:relative;height:var(--hh);overflow:hidden;background:#000}
#caseMedia{position:absolute;inset:0}
.case-head.awake #caseMedia{animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1) translateX(0%)}to{transform:scale(1.06) translateX(-1%)}}
.loopv{opacity:0;transition:opacity 400ms var(--eo)}
.loopv.on{opacity:1}
.scan{position:absolute;left:0;right:0;top:0;height:15%;z-index:3;pointer-events:none;background:linear-gradient(transparent,rgba(51,255,153,.07),transparent);display:none}
.case-head.awake .scan{display:block;animation:scan 5s linear infinite}
@keyframes scan{from{transform:translateY(-120%)}to{transform:translateY(700%)}}
body.player-open .case-head #caseMedia,body.player-open .scan{animation-play-state:paused}
.chrome{opacity:0;transition:opacity 300ms var(--eo)}
.case-head.ready .chrome{opacity:1}
.case-label{position:absolute;z-index:5;left:var(--pad);bottom:96px;opacity:0;transition:opacity 200ms var(--eo)}
.case-label.shown{opacity:1}
.case-kicker{display:inline-block;background:#000;padding:8px 18px;color:var(--green);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.case-kicker.mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:0;text-transform:none}
.case-title{display:flex;align-items:center;gap:16px;background:#000;padding:12px 24px;font-size:clamp(28px,3.4vw,48px);letter-spacing:4px;line-height:1.1;text-transform:uppercase;white-space:nowrap}
.case-title .mk{width:.2em;height:.85em;background:#fff;flex-shrink:0}
.case-title h1{font:inherit;letter-spacing:inherit;text-transform:uppercase}
.case-bar{height:8px;width:60%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--eo) 400ms}
.case-label.shown .case-bar{transform:scaleX(1)}
.case-label.now,.case-label.now .case-bar{transition:none}
.flash .case-title{animation:flash 160ms}
#playBtn{animation:pop 250ms var(--eo) both}
#caseScroll{animation:pop 250ms var(--eo) 600ms both}
.intro{display:grid;gap:48px;padding:64px 0}
@media (min-width:768px){.intro{grid-template-columns:2fr 1fr}}
/* Anker-Navigation: Overview = Überschrift, darunter einfache Links */
.subnav{list-style:none;display:grid;gap:8px;align-content:start}
.subnav .ov{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--copy);line-height:1.65;letter-spacing:1px;text-transform:uppercase;color:#fff}
.subnav .ov::before{content:"";width:5px;height:1em;background:#fff}

.m6{padding:64px 0}
.cols{display:grid;gap:32px;margin-top:32px}
@media (min-width:768px){.cols{grid-template-columns:1fr 1fr}}
.m16{padding:64px 0;max-width:760px;margin:0 auto}
.m16 .copy{max-width:65ch;margin-left:auto;margin-right:auto}
.m16 .m16-tx{margin-top:32px}
.m10{display:grid;gap:32px;align-items:center;padding:64px 0}
.m10-img{position:relative;aspect-ratio:4/3;overflow:hidden;clip-path:inset(0% 100% 0% 0%);transition:clip-path 600ms var(--eio)}
.m10.right .m10-img{clip-path:inset(0% 0% 0% 100%)}
.m10.in .m10-img{clip-path:inset(0% 0% 0% 0%)}
.m10-line{height:1px;width:96px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--eo) 400ms}
.m10.in .m10-line{transform:scaleX(1)}
@media (min-width:768px){
  .m10{grid-template-columns:1fr 1fr}
  .m10.right .m10-img{order:2}
  .m10.right .m10-txt{order:1;text-align:right}
  .m10.right .m10-line{transform-origin:right;margin-left:auto}
  .m10.right .copy{margin-left:auto}
}

.gal{position:relative}
.gal:focus-visible{outline-offset:-4px}
.gal-view{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab;background:#0a0a0a;user-select:none;-webkit-user-select:none}
.gal-view.dragging{cursor:grabbing}
.gal-top{padding:0 0 32px}
.gal-top .gal-view{height:min(85vh,56.25vw)}
.gal-strip{display:flex;height:100%;will-change:transform}
.gal-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.gal-vid{opacity:0;transition:opacity 400ms var(--eo)}
.gal-vid.on{opacity:1}
.gal-arrow{position:absolute;top:50%;margin-top:-22px;z-index:5;width:44px;height:44px;display:grid;place-items:center;background:rgba(0,0,0,.75);color:#fff;transition:color 160ms ease,transform 160ms var(--eo)}
.gal-arrow.prev{left:16px}
.gal-arrow.next{right:16px}
.gal-arrow:active{transform:scale(.97)}
.gal-nav{position:absolute;left:50%;bottom:28px;z-index:5;height:20px;transform:translateX(-50%)}
.gal-line{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.6)}
.gal-dot{position:absolute;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center}
.gal-dot::before{content:"";width:7px;height:7px;background:#fff;transform:rotate(45deg)}
.gal-mark{position:absolute;top:50%;left:0;width:18px;height:9px;margin:-4.5px 0 0 -9px;background:#fff;pointer-events:none;transition:transform 500ms cubic-bezier(0.32,0.72,0,1)}
.m11{display:grid;gap:32px;align-items:center;padding:64px 0}
@media (min-width:768px){.m11{grid-template-columns:2fr 3fr}}
.m11-gal .gal-view{aspect-ratio:4/3}

.m9{padding:96px 0 32px}
.m9-grid{display:grid;gap:24px;margin-top:40px}
@media (min-width:768px){.m9-grid{grid-template-columns:repeat(3,1fr)}}
.card{display:block;text-align:left}
.card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.card-img .gray-layer{transition-duration:200ms}
.card-k{display:block;margin-top:16px;color:#fff;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.card-t{display:block;margin-top:4px}
#catList{border-top:1px solid #151515}
.back-wrap{padding:96px 0 128px;text-align:center}

.flight{position:fixed;left:0;top:0;z-index:40;overflow:hidden;pointer-events:none;will-change:transform,clip-path;transform-origin:0 0;background:#000}
.fly-wrap{position:fixed;left:0;top:0;width:100%;z-index:41;pointer-events:none}
.fly-wrap .case-label{will-change:transform}

#player{position:fixed;inset:0;z-index:50;background:#000;display:none}
#player.open{display:block}
#pBg{position:absolute;inset:0;overflow:hidden}
#pBg .drift{position:absolute;inset:0;animation:drift 9s ease-in-out infinite alternate}
#player.halt #pBg .drift{animation-play-state:paused}
#pBg video.layer{object-fit:contain;background:#000;opacity:0;transition:opacity 400ms var(--eo)}
#pBg video.layer.on{opacity:1}
.p-note{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);text-align:center;color:#a3a3a3;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;pointer-events:none;background:rgba(0,0,0,.6);padding:8px 16px;max-width:calc(100vw - 48px)}
.p-note[hidden]{display:none}
.p-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;padding:24px}
.p-bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:16px;padding:24px}
@media (min-width:768px){.p-top,.p-bottom{padding:40px}}
.ui{transition:opacity 200ms var(--eo),transform 200ms var(--eo)}
#player.idle .ui{opacity:0}
#player.idle .p-bottom{transform:translateY(8px)}
#player.idle{cursor:none}
.track{position:relative;flex:1;height:44px;cursor:pointer}
.track .rail{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.35)}
.track .fill{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-.5px;background:#fff;transform-origin:left;transform:scaleX(0)}
.track .mark{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;transform:rotate(45deg)}
.track .knob{position:absolute;top:50%;width:14px;height:8px;margin:-4px 0 0 -7px;background:#fff}
.ptime{font-weight:700;font-size:14px;letter-spacing:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctrl{height:44px;padding:0 12px;background:rgba(0,0,0,.8);border:1px solid #2a2a2a;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#fff;transition:color 160ms ease,transform 160ms var(--eo)}
.ctrl.sq{width:44px;padding:0;display:grid;place-items:center}
.ctrl:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .ctrl:hover,.link:hover,.gal-arrow:hover,.card:hover .card-t,.foot-btn:hover .link{color:var(--red)}
  .teaser:hover .lb-bar{transform:scaleX(1)}
  .logos li:hover span{opacity:1}
  .diamond:hover::before,.foot-btn:hover .diamond::before{transform:rotate(45deg) scale(1.06)}
}