:root{--cyan:#00c8ff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}
.twitch-stage{width:100%;display:flex;justify-content:center;background:#000}
.twitch-artboard{position:relative;width:min(100vw,1024px);aspect-ratio:2/3;flex:0 0 auto;overflow:hidden;background:#02070d}
.twitch-reference{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;user-select:none;pointer-events:none}

/* Real Twitch embeds replace only the fake player/chat interiors from the design image. */
.embed-slot{position:absolute;z-index:3;overflow:hidden;background:#0e0e10;border-radius:.55%;box-shadow:0 0 0 1px rgba(0,200,255,.34)}
.embed-slot iframe{display:block;width:100%;height:100%;border:0;background:#0e0e10}
.player-slot{left:5.47%;top:30.47%;width:50.59%;height:22.00%}
.chat-slot{left:60.74%;top:30.47%;width:34.08%;height:24.28%}

.hotspot{position:absolute;z-index:5;display:block;background:transparent;border:0;text-decoration:none;border-radius:6px;outline:0}
.hotspot:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--cyan);background:rgba(0,200,255,.08)}

/* Header positions matched to the 1024 × 1536 reference artwork. */
.brand{left:3.4%;top:1.0%;width:15.2%;height:4.0%}
.nav-home{left:22.7%;top:1.1%;width:5.8%;height:3.8%}
.nav-onair{left:28.6%;top:1.1%;width:6.5%;height:3.8%}
.nav-sendung{left:35.0%;top:1.1%;width:7.3%;height:3.8%}
.nav-playlist{left:42.4%;top:1.1%;width:7.1%;height:3.8%}
.nav-events{left:49.4%;top:1.1%;width:6.0%;height:3.8%}
.nav-team{left:55.2%;top:1.1%;width:5.3%;height:3.8%}
.nav-about{left:60.6%;top:1.1%;width:7.2%;height:3.8%}
.nav-contact{left:67.8%;top:1.1%;width:7.2%;height:3.8%}
.top-chat{left:81.1%;top:1.0%;width:15.1%;height:3.5%}

.open-twitch{left:15.9%;top:53.45%;width:29.8%;height:2.75%}
.follow-twitch{left:4.4%;top:80.85%;width:28.0%;height:2.95%}

/* Footer quick-link hit areas */
.foot-home{left:31.5%;top:90.2%;width:7.2%;height:1.55%}
.foot-onair{left:31.5%;top:91.65%;width:7.2%;height:1.55%}
.foot-sendung{left:31.5%;top:93.05%;width:8.2%;height:1.55%}
.foot-playlist{left:31.5%;top:94.45%;width:7.8%;height:1.55%}
.foot-events{left:31.5%;top:95.85%;width:7.0%;height:1.55%}
.foot-team{left:48.4%;top:90.2%;width:6.4%;height:1.55%}
.foot-about{left:48.4%;top:91.65%;width:8.3%;height:1.55%}
.foot-contact{left:48.4%;top:93.05%;width:7.6%;height:1.55%}
.foot-privacy{left:48.4%;top:94.45%;width:9.5%;height:1.55%}
.foot-imprint{left:48.4%;top:95.85%;width:8.4%;height:1.55%}

@media(max-width:700px){
  .twitch-artboard{width:100vw}
  .embed-slot{border-radius:2px;box-shadow:none}
}
/* Einheitliche MoonFire-Hauptnavigation – wie auf der Startseite */
.mf-top-nav{position:absolute;z-index:50;left:20.5%;top:0;width:78.0%;height:5.54%;display:flex;align-items:center;justify-content:space-between;gap:.2%;padding:0 .65%;background:#02070d;border-bottom:1px solid rgba(0,200,255,.28);white-space:nowrap;overflow:hidden;line-height:1;font-family:Arial,Helvetica,sans-serif}
.mf-top-nav-item{position:relative;display:flex;align-items:center;justify-content:center;height:100%;padding:0 .18%;color:#fff;font-size:clamp(6px,.92vw,10px);font-weight:700;line-height:1;text-transform:none;text-shadow:0 1px 3px #000;text-decoration:none;cursor:pointer}
.mf-top-nav-item:visited{color:#fff}.mf-top-nav-item:hover{color:#dff8ff}.mf-top-nav-item:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:4px}
.mf-top-nav-item.active,.mf-top-nav-item.active:visited{color:#00d8ff}
.mf-top-nav-item.active::after{content:"";position:absolute;left:8%;right:8%;bottom:25%;height:2px;background:#00d8ff;border-radius:2px;box-shadow:0 0 8px rgba(0,216,255,.55)}