:root{--cyan:#00c8ff;--fire:#ff5a12;--ink:#02070d;--panel:#06121c;--text:#fff;--muted:#9fb2c0}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
button,a,input,textarea{font:inherit}
.page-stage{width:100%;display:flex;justify-content:center;background:#000}
.artboard{position:relative;width:min(100vw,1024px);aspect-ratio:2/3;flex:0 0 auto;overflow:hidden;background:#02070d}
.reference{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;user-select:none;pointer-events:none}
.hotspot{position:absolute;z-index:4;background:transparent;border:0;color:transparent;text-decoration:none;cursor:pointer;padding:0;margin:0;outline:none;border-radius:8px}
.hotspot:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--cyan);background:rgba(0,200,255,.10)}
.anchor{position:absolute;pointer-events:none}
.anchor-onair{left:0;top:36.5%;width:1px;height:1px}
/* 1024x1536 coordinates converted to percentages */
.brand{left:3.8%;top:1.0%;width:15.8%;height:4.7%}
.top-nav{position:absolute;z-index:6;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}
.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}
.top-nav-item.active{color:#00d8ff}
.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)}
.listen{left:39.0%;top:31.9%;width:22.3%;height:4.3%}
.player-mute{left:40.4%;top:38.2%;width:4.0%;height:4.2%}.player-play{left:45.4%;top:37.7%;width:7.7%;height:5.5%}.volume-control{position:absolute;z-index:5;left:59.4%;top:40.0%;width:14.3%;height:1.8%;opacity:.001;cursor:pointer}.volume-control:focus{opacity:.08}
.card-live{left:5.1%;top:46.1%;width:21.5%;height:17.7%}.card-sendung{left:27.8%;top:46.1%;width:21.0%;height:17.7%}.card-playlist{left:50.2%;top:46.1%;width:21.0%;height:17.7%}.card-events{left:72.4%;top:46.1%;width:21.7%;height:17.7%}
.about-more{left:7.1%;top:80.7%;width:16.2%;height:3.4%}
.foot-home{left:35.1%;top:90.5%;width:5.8%;height:2.0%}.foot-onair{left:35.1%;top:92.0%;width:5.8%;height:1.9%}.foot-sendung{left:35.1%;top:93.5%;width:7.5%;height:1.9%}.foot-playlist{left:35.1%;top:95.0%;width:7.5%;height:1.9%}.foot-events{left:48.5%;top:90.5%;width:6.2%;height:1.9%}.foot-team{left:48.5%;top:92.0%;width:5.2%;height:1.9%}.foot-about{left:48.5%;top:93.5%;width:7.0%;height:1.9%}.foot-contact{left:48.5%;top:95.0%;width:7.0%;height:1.9%}.foot-privacy{left:48.5%;top:96.5%;width:8.1%;height:1.7%}.foot-imprint{left:48.5%;top:98.0%;width:7.5%;height:1.5%}
/* Intro */
.intro{position:fixed;inset:0;z-index:1000;background:#01050a;display:grid;place-items:center;overflow:hidden;transition:opacity .7s ease,visibility .7s ease}
.intro.hide{opacity:0;visibility:hidden;pointer-events:none}
.intro-bg{position:absolute;inset:-12%;background:radial-gradient(circle at 36% 50%,rgba(0,122,255,.17),transparent 28%),radial-gradient(circle at 67% 47%,rgba(255,79,10,.14),transparent 31%),#01050a;animation:bgPulse 3s ease-in-out infinite alternate}
.intro-glow{position:absolute;width:34vw;height:34vw;border-radius:50%;filter:blur(70px);opacity:.16}.intro-glow.blue{background:#00aaff;left:19%;top:34%}.intro-glow.fire{background:#ff4d00;right:18%;top:33%}
.intro-center{position:relative;width:min(70vw,720px);text-align:center;animation:introIn 1.1s cubic-bezier(.2,.8,.2,1) both}
.intro-logo{display:block;width:100%;max-height:58vh;object-fit:contain;filter:drop-shadow(-12px 0 28px rgba(0,174,255,.22)) drop-shadow(12px 0 28px rgba(255,76,0,.20));animation:logoFloat 3s ease-in-out infinite}
.intro-line{width:52%;height:2px;background:rgba(255,255,255,.08);margin:-4% auto 18px;overflow:hidden;position:relative}.intro-line span{display:block;height:100%;width:34%;background:linear-gradient(90deg,#009dff,#fff,#ff5a12);box-shadow:0 0 18px #00bfff;animation:scan 1.55s ease-in-out infinite}
.intro-center p{font-size:clamp(10px,1.2vw,15px);letter-spacing:.34em;color:#dbe6ee;margin:0;text-transform:uppercase}
.intro-skip{position:absolute;right:24px;bottom:22px;border:1px solid rgba(0,200,255,.45);border-radius:999px;background:rgba(2,11,18,.55);color:#dff8ff;padding:10px 16px;letter-spacing:.08em;cursor:pointer}.intro-skip span{color:var(--fire);font-size:20px;margin-left:7px}
.particles::before,.particles::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#00c8ff 0 1px,transparent 1.5px),radial-gradient(circle,#ff6a1a 0 1px,transparent 1.6px);background-size:90px 110px,130px 100px;background-position:0 0,30px 20px;opacity:.18;animation:drift 9s linear infinite}
.particles::after{transform:scale(1.25);opacity:.09;animation-duration:14s}
@keyframes introIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@keyframes logoFloat{50%{transform:translateY(-7px) scale(1.01)}}@keyframes scan{0%{transform:translateX(-110%)}50%,100%{transform:translateX(300%)}}@keyframes drift{to{transform:translate3d(28px,-38px,0)}}@keyframes bgPulse{to{transform:scale(1.04)}}
/* Toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:1200;transform:translate(-50%,24px);padding:12px 18px;border:1px solid rgba(0,200,255,.5);background:rgba(3,13,21,.94);box-shadow:0 0 30px rgba(0,200,255,.16);border-radius:999px;color:#fff;opacity:0;pointer-events:none;transition:.25s ease;max-width:min(90vw,680px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Modals */
.modal{width:min(92vw,760px);border:1px solid rgba(0,200,255,.45);border-radius:22px;padding:32px;background:linear-gradient(145deg,rgba(4,17,27,.98),rgba(3,9,16,.98));color:#fff;box-shadow:-18px 0 70px rgba(0,155,255,.16),18px 0 70px rgba(255,76,0,.12)}
.modal::backdrop{background:rgba(0,3,8,.78);backdrop-filter:blur(9px)}.modal[open]{animation:modalIn .25s ease both}.modal-close{position:absolute;right:18px;top:14px;border:0;background:transparent;color:#fff;font-size:32px;cursor:pointer}.eyebrow{color:var(--cyan);font-weight:700;font-size:12px;letter-spacing:.16em}.modal h2{font-size:clamp(28px,4vw,44px);margin:9px 0 22px}.modal h2 em{font-style:normal;color:var(--cyan)}.modal p{color:#c9d5dc;line-height:1.7}.modal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.modal-grid article,.song-list span{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid rgba(0,200,255,.16);background:#07131d;border-radius:14px}.modal-grid span,.song-list span{color:#b9c7d0}.song-list{display:grid;gap:10px}.team-grid .avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--cyan);color:var(--cyan);margin-bottom:6px}.modal form{display:grid;gap:14px}.modal label{display:grid;gap:7px;color:#cbd8df}.modal input,.modal textarea{width:100%;padding:12px 13px;border-radius:10px;border:1px solid #18384a;background:#04101a;color:#fff;outline:none}.modal input:focus,.modal textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,200,255,.10)}.submit-btn{justify-self:start;border:1px solid var(--cyan);border-radius:999px;background:linear-gradient(90deg,#008ed1,#00c8ff);color:#fff;padding:12px 20px;font-weight:700;cursor:pointer}.hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important}.song-list span{display:block}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:700px){.modal-grid{grid-template-columns:1fr}.intro-center{width:88vw}.intro-skip{right:12px;bottom:12px;font-size:11px}.toast{bottom:14px}.artboard{width:100vw}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.intro-logo,.particles::before,.particles::after,.intro-line span,.intro-bg{animation:none!important}.intro{transition:none}}

/* Fullscreen cinematic intro */
.intro{width:100vw;height:100dvh;min-height:100vh;background:#000;display:block}
.intro-bg{inset:0;background:#000;animation:none}
.intro-center{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 5vw 8vh;text-align:center;animation:introFullscreenIn 1.15s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.intro-logo{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;filter:brightness(.92) drop-shadow(-16px 0 34px rgba(0,174,255,.18)) drop-shadow(16px 0 34px rgba(255,76,0,.16));animation:fullscreenLogo 4s ease-out both}
.intro-center::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.04) 48%,rgba(0,0,0,.62) 100%);pointer-events:none}
.intro-line,.intro-center p{position:relative;z-index:2}
.intro-line{width:min(420px,48vw);margin:0 auto 18px}
.intro-center p{text-shadow:0 2px 18px #000}
.intro-glow{z-index:1;opacity:.13;filter:blur(90px)}
.particles{z-index:2}
.intro-skip{z-index:4;right:max(24px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));backdrop-filter:blur(10px)}
@keyframes introFullscreenIn{from{opacity:0}to{opacity:1}}
@keyframes fullscreenLogo{0%{opacity:0;transform:scale(1.075)}22%{opacity:1}100%{opacity:1;transform:scale(1.015)}}
@media(max-width:700px){.intro-center{width:100%;height:100%;padding:0 5vw 10vh}.intro-logo{object-fit:cover}.intro-line{width:58vw}.intro-center p{font-size:9px;letter-spacing:.22em}}
@media(prefers-reduced-motion:reduce){.intro-logo{animation:none!important}}

/* Intro adjustment: original fullscreen animation, slightly smaller artwork without visible borders */
.intro-center::before{
  content:"";
  position:absolute;
  inset:-5%;
  background:url("assets/moonfire-logo.png") center/cover no-repeat;
  filter:blur(20px) brightness(.56) saturate(.92);
  transform:scale(1.08);
  opacity:.72;
  z-index:0;
}
.intro-logo{
  inset:3.5%;
  width:93%;
  height:93%;
  margin:auto;
  object-fit:contain;
  object-position:center;
  z-index:1;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at center,#000 64%,rgba(0,0,0,.96) 76%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 70% at center,#000 64%,rgba(0,0,0,.96) 76%,transparent 100%);
}
.intro-center::after{z-index:2}
.intro-line,.intro-center p{z-index:3}
@keyframes fullscreenLogo{0%{opacity:0;transform:scale(1.045)}22%{opacity:1}100%{opacity:1;transform:scale(1)}}
@media(max-width:700px){
  .intro-logo{inset:2%;width:96%;height:96%;object-fit:contain}
  .intro-center::before{filter:blur(16px) brightness(.52)}
}

/* Final MoonFire intro artwork: flame at the end of N */
.intro-center::before{
  background:url("assets/moonfire-intro-fire-n.png") center/cover no-repeat;
  filter:blur(20px) brightness(.52) saturate(.96);
}
.intro-logo{
  content:url("assets/moonfire-intro-fire-n.png");
  inset:2.5%;
  width:95%;
  height:95%;
  object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 76% 73% at center,#000 66%,rgba(0,0,0,.97) 79%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 73% at center,#000 66%,rgba(0,0,0,.97) 79%,transparent 100%);
}
@media(max-width:700px){.intro-logo{inset:1%;width:98%;height:98%}}


/* New fullscreen intro – uses only the supplied MoonFire artwork */
.intro.intro-new{position:fixed;inset:0;width:100vw;height:100dvh;min-height:100vh;z-index:1000;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .8s ease,visibility .8s ease}
.intro.intro-new.hide{opacity:0;visibility:hidden;pointer-events:none}
.intro-new-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:newIntroReveal 5s ease-out both}
@keyframes newIntroReveal{0%{opacity:0;transform:scale(1.035)}15%{opacity:1}85%{opacity:1}100%{opacity:1;transform:scale(1)}}
@media(max-width:700px){.intro-new-image{object-fit:cover;object-position:center}}
@media(prefers-reduced-motion:reduce){.intro-new-image{animation:none!important}}


/* Feature-Kategorien inklusive Twitch */
.feature-grid{position:absolute;z-index:6;left:5.1%;right:5.1%;top:46.1%;height:17.7%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.15%;padding:0;background:#02070d}
.feature-card{min-width:0;border:1px solid rgba(0,200,255,.08);border-radius:16px;background:linear-gradient(180deg,#071722 0%,#06131d 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:14px 10px 10px;cursor:pointer;box-shadow:inset 0 0 26px rgba(0,200,255,.025)}
.feature-card:hover,.feature-card:focus-visible{border-color:rgba(0,200,255,.5);box-shadow:0 0 22px rgba(0,200,255,.12),inset 0 0 24px rgba(0,200,255,.05);outline:none}
.feature-card .feature-icon{font-size:34px;line-height:1;color:var(--cyan);height:43px;display:grid;place-items:center;font-weight:700}
.feature-card strong{font-size:13px;line-height:1.15;margin:4px 0 12px;white-space:nowrap}
.feature-card>span:not(.feature-icon){font-size:10.5px;line-height:1.45;color:#fff;min-height:48px;display:flex;align-items:flex-start;justify-content:center}
.feature-card em{margin-top:auto;width:100%;border-top:1px solid rgba(255,255,255,.035);padding-top:12px;color:var(--cyan);font-size:9.5px;font-style:normal;font-weight:700;white-space:nowrap}
.feature-twitch .feature-icon{font-size:31px}
@media(max-width:700px){.feature-grid{gap:.7%;}.feature-card{padding:8px 4px 6px;border-radius:10px}.feature-card .feature-icon{font-size:21px;height:28px}.feature-card strong{font-size:8.5px;margin:2px 0 6px}.feature-card>span:not(.feature-icon){font-size:6.8px;line-height:1.25;min-height:34px}.feature-card em{font-size:6px;padding-top:6px}}

/* Dynamischer Radioplayer */
.player-live-status,.player-track,.player-artist,.player-bitrate{position:absolute;z-index:6;pointer-events:none;font-family:Arial,Helvetica,sans-serif}
.player-live-status{left:21.45%;top:38.10%;width:17%;height:1.8%;display:flex;align-items:center;gap:.55em;color:#00c8ff;font-size:clamp(9px,1vw,13px);font-weight:700;background:#03101a}
.status-dot{width:.65em;height:.65em;border-radius:50%;background:#64717b;box-shadow:0 0 8px rgba(100,113,123,.5)}
.player-live-status.live .status-dot{background:#00c8ff;box-shadow:0 0 10px rgba(0,200,255,.9)}
.player-live-status.error{color:#ff704d}.player-live-status.error .status-dot{background:#ff704d;box-shadow:0 0 10px rgba(255,112,77,.8)}
.player-track{left:21.45%;top:39.65%;width:18.2%;height:2.0%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:clamp(11px,1.32vw,17px);font-weight:700;background:#03101a}
.player-artist{left:21.45%;top:41.55%;width:18.2%;height:1.75%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#d7dde1;font-size:clamp(9px,1.12vw,15px);background:#03101a}
.player-bitrate{left:80.2%;top:39.45%;width:7.0%;height:3.7%;display:flex;flex-direction:column;justify-content:center;color:#fff;font-size:clamp(12px,1.4vw,18px);font-weight:700;background:#03101a}
.player-bitrate small{font-size:.65em;font-weight:400;margin-top:.22em}
.player-control-visible{display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(18px,2vw,28px);background:transparent!important;opacity:1!important}
.player-play .playIcon{transform:translateX(2%)}
.player-mute{font-size:clamp(13px,1.45vw,20px)}
.volume-control{opacity:1!important;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,#00c8ff 0%,#00c8ff 60%,#24313b 60%,#24313b 100%);height:4px!important;border-radius:99px;outline:none}
.volume-control::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.volume-control::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.volume-control:focus{opacity:1!important;box-shadow:0 0 0 3px rgba(0,200,255,.15)}
@media(max-width:700px){.player-live-status,.player-track,.player-artist,.player-bitrate{font-family:Arial,Helvetica,sans-serif}.volume-control::-webkit-slider-thumb{width:10px;height:10px}.volume-control::-moz-range-thumb{width:10px;height:10px}}


/* Events: Flyer nur nach Klick auf Events anzeigen */
.event-flyer-modal{
  width:min(92vw,820px);
  max-width:820px;
  max-height:92vh;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(0,200,255,.65);
  border-radius:18px;
  background:#02070d;
  box-shadow:0 0 45px rgba(0,200,255,.22),0 0 45px rgba(255,80,0,.12);
}
.event-flyer-modal::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}
.event-modal-flyer{display:block;width:100%;height:auto;max-height:92vh;object-fit:contain;background:#02070d}
.event-flyer-modal .modal-close{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,7,13,.84);border:1px solid rgba(0,200,255,.6);box-shadow:0 0 12px rgba(0,200,255,.2)}
@media(max-width:700px){.event-flyer-modal{width:96vw;max-height:94vh;border-radius:12px}.event-modal-flyer{max-height:94vh}.event-flyer-modal .modal-close{top:7px;right:7px}}