/*
Theme Name: World of Music – Balanced Viewport Radio
Author: World of Music
Version: 5.17.0
Description: Full-viewport World of Music radio interface with a clean central radio and a warm, non-repeating side background. No page scrolling; pop-ups appear only on click.
*/
:root{--gold:#ffd06a}
*{box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#100a06;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif
}
body{min-height:100svh}

.wom-screen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(102,64,30,.24) 0%, rgba(40,23,12,.22) 38%, rgba(8,5,3,.96) 78%),
    repeating-linear-gradient(
      90deg,
      #1b1009 0px,
      #24150b 55px,
      #160c06 110px,
      #2a180c 165px,
      #130a05 220px
    );
}

/* Subtle warm studio-style light on the empty side areas. */
.wom-screen:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,176,70,.12), transparent 25%),
    radial-gradient(circle at 92% 50%, rgba(255,176,70,.12), transparent 25%),
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%, transparent 82%, rgba(0,0,0,.28));
}
.wom-screen:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 110px rgba(0,0,0,.62);
}

.wom-frame{
  position:absolute;
  left:50%;
  top:50%;
  width:min(94vw,150svh);
  aspect-ratio:3/2;
  transform:translate(-50%,-50%);
  z-index:2;
  filter:drop-shadow(0 28px 48px rgba(0,0,0,.65));
}
.wom-frame>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.hotspot{
  position:absolute;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:20;
  border-radius:8px;
  pointer-events:auto
}
.hotspot:focus-visible{
  outline:2px solid var(--gold);
  box-shadow:0 0 25px rgba(255,190,70,.7)
}

/* Coordinates are relative to the 3:2 artwork. */
.hs-start{left:24.8%;top:32.0%;width:7.0%;height:8.5%}
.hs-schedule{left:32.0%;top:32.0%;width:7.0%;height:8.5%}
.hs-news{left:39.0%;top:32.0%;width:7.0%;height:8.5%}
.hs-special{left:45.7%;top:32.0%;width:8.0%;height:8.5%}
.hs-request{left:53.5%;top:32.0%;width:7.5%;height:8.5%}
.hs-guest{left:60.8%;top:32.0%;width:7.2%;height:8.5%}
.hs-contact{left:67.4%;top:31.6%;width:8.2%;height:9.5%}
.hs-player{left:29.0%;top:43.0%;width:42.0%;height:30.0%}
.hs-voice{left:82.0%;top:88.0%;width:14%;height:8%}

.modal-bg{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(7px);
  line-height:1.45
}
.modal-bg.open{display:flex}
.modal{
  position:relative;
  width:min(760px,95vw);
  max-height:90vh;
  overflow:auto;
  padding:25px;
  background:linear-gradient(145deg,#18130e,#070908);
  border:1px solid #8b602a;
  border-radius:12px;
  box-shadow:0 30px 100px #000;
  color:#eee
}
.modal h2{margin:0 35px 14px 0;color:var(--gold)}
.close{
  position:absolute;
  right:12px;
  top:5px;
  border:0;
  background:none;
  color:#fff;
  font-size:30px;
  cursor:pointer
}
.gold{
  border:1px solid #a96b1d;
  background:linear-gradient(#ffd46d,#db941f);
  color:#1d1208;
  font-weight:800;
  border-radius:6px;
  padding:11px 17px;
  cursor:pointer
}
.field{display:grid;gap:5px;margin:10px 0}
.field input,.field textarea{
  background:#070a0a;
  color:#fff;
  border:1px solid #584426;
  border-radius:6px;
  padding:11px;
  width:100%
}
.field textarea{min-height:100px}
table{width:100%;border-collapse:collapse}
td{padding:9px;border-bottom:1px solid #3d3020}
td:first-child{color:#f0bb55;width:145px}
.notice{
  padding:11px;
  background:#21150b;
  border:1px solid #69451f;
  border-radius:7px;
  color:#e8d09d
}
.status{color:var(--gold);margin-top:10px}

@media(max-aspect-ratio:3/2){
  /*
   * Tall/portrait windows: keep the radio fully visible and use the warm
   * background above and below instead of stretching/cropping the artwork.
   */
  .wom-frame{
    width:94vw;
    height:auto;
  }
}

@media(max-width:700px){
  html,body{width:100%;height:100%;overflow:hidden}
  .wom-screen{
    align-items:center;
    justify-content:center;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background:
      radial-gradient(ellipse at 50% 50%, rgba(102,64,30,.24) 0%, rgba(35,20,10,.28) 46%, rgba(8,5,3,.98) 100%),
      #100a06;
  }
  .wom-screen:before{
    background:
      radial-gradient(circle at 50% 10%, rgba(255,176,70,.10), transparent 30%),
      radial-gradient(circle at 50% 90%, rgba(255,176,70,.08), transparent 30%),
      linear-gradient(90deg,rgba(0,0,0,.22),transparent 25%,transparent 75%,rgba(0,0,0,.22));
  }
  .wom-frame{
    width:min(96vw, 150svh);
    max-width:96vw;
    top:50%;
  }

  /* Slightly larger touch targets on phones, while keeping the visible artwork unchanged. */
  .hs-start,.hs-schedule,.hs-news,.hs-special,.hs-request,.hs-guest,.hs-contact{
    top:30.8%;
    height:11%;
  }
  .hs-start{left:23.7%;width:8.2%}
  .hs-schedule{left:31.2%;width:8.2%}
  .hs-news{left:38.3%;width:8.2%}
  .hs-special{left:45.0%;width:9.2%}
  .hs-request{left:52.9%;width:8.6%}
  .hs-guest{left:60.0%;width:8.4%}
  .hs-contact{left:67.0%;width:9.0%}

  .modal-bg{padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))}
  .modal{
    width:min(94vw,560px);
    max-height:88svh;
    padding:18px 16px;
    border-radius:10px;
  }
  .modal h2{font-size:21px}
  .field input,.field textarea{font-size:16px} /* prevents iOS zoom */
  .gold{min-height:44px}
}

@media(max-width:390px){
  .wom-frame{width:98vw;max-width:98vw}
  .modal{width:96vw;padding:16px 13px}
  .modal h2{font-size:19px}
}

/* --- Real live player: the example player inside the artwork is covered
   by this responsive HTML layer. The audio controls are therefore real,
   while the radio frame itself remains part of the artwork. --- */
.player-ui{
  position:absolute;
  left:30.2%;
  top:43.15%;
  width:39.75%;
  height:29.25%;
  z-index:8;
  border-radius:1.8%;
  overflow:hidden;
  padding:2.0% 3.3% 1.0%;
  color:#fff;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 35%,rgba(16,29,35,.99),rgba(3,9,11,.995) 76%),
    #050a0c;
  box-shadow:inset 0 0 0 1px rgba(219,164,68,.24),inset 0 0 25px rgba(0,0,0,.5);
}
.player-top{
  height:16%;
  display:flex;
  align-items:center;
  gap:1.8%;
  border-bottom:1px solid rgba(190,200,205,.16);
  white-space:nowrap;
}
.player-live{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:clamp(7px,.78vw,15px);
  font-weight:800;
  color:#ff493e;
}
.live-dot{
  width:clamp(5px,.48vw,9px);
  height:clamp(5px,.48vw,9px);
  border-radius:50%;
  background:#ff3d35;
  box-shadow:0 0 8px rgba(255,55,45,.9);
}
.eq-bars{
  height:70%;
  display:flex;
  align-items:flex-end;
  gap:2px;
}
.eq-bars i{
  width:2px;
  background:#ffd263;
  box-shadow:0 0 5px rgba(255,196,75,.5);
}
.eq-bars i:nth-child(1){height:35%}.eq-bars i:nth-child(2){height:75%}.eq-bars i:nth-child(3){height:100%}.eq-bars i:nth-child(4){height:58%}.eq-bars i:nth-child(5){height:82%}
.station-name{
  font-size:clamp(8px,.9vw,17px);
  font-weight:600;
}
.player-clock{
  margin-left:auto;
  color:#d7dbde;
  font-size:clamp(7px,.72vw,14px);
}
.player-main{
  height:57%;
  display:flex;
  align-items:center;
  gap:4%;
  padding-top:1.5%;
}
.cover-box{
  height:87%;
  aspect-ratio:1;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid rgba(255,210,105,.28);
  border-radius:2px;
  background:linear-gradient(135deg,#263b48,#0d1419);
}
#live-cover{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.live-copy{min-width:0;flex:1;text-shadow:0 1px 3px #000}
.live-title{
  font-size:clamp(9px,1.08vw,20px);
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-artist{
  margin-top:3px;
  font-size:clamp(8px,.86vw,16px);
  color:#e2e6e8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-subtitle{
  margin-top:3px;
  font-size:clamp(7px,.66vw,13px);
  color:#c2c7ca;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-progress{
  height:4px;
  margin-top:8%;
  border-radius:99px;
  background:#243036;
}
.live-progress span{display:block;width:0;height:100%;background:#f6c75d}
.live-times{
  display:flex;
  justify-content:space-between;
  margin-top:3px;
  font-size:clamp(6px,.58vw,11px);
  color:#c6cbce;
}
.player-controls{
  height:20%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5.5%;
}
.visual-control{
  color:#e9edee;
  font-size:clamp(11px,1.18vw,24px);
  line-height:1;
  user-select:none;
  pointer-events:none;
}
.real-play{
  width:clamp(19px,2.15vw,39px);
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid #f6d064;
  background:radial-gradient(circle at 50% 42%,#27343a,#070b0c 72%);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:clamp(8px,.86vw,16px);
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 0 10px rgba(247,201,89,.28);
}
.real-play:hover{box-shadow:0 0 18px rgba(247,201,89,.55)}
.real-play:focus-visible{outline:2px solid #fff;outline-offset:2px}
.real-volume{
  display:flex;
  align-items:center;
  gap:5px;
  color:#e8ecee;
  font-size:clamp(9px,.9vw,18px);
  pointer-events:auto;
}
#player-volume{
  width:clamp(48px,5.8vw,110px);
  margin:0;
  accent-color:#f5c75e;
  cursor:pointer;
  pointer-events:auto;
}
.player-motto{
  height:7%;
  transform:translateY(4px);
  text-align:center;
  color:#f0bb55;
  font-size:clamp(5px,.5vw,10px);
  letter-spacing:.30em;
  white-space:nowrap;
}
.player-ui.is-playing .player-live{color:#ff5045}
.player-ui.is-playing .live-dot{animation:wom-pulse 1.25s infinite}
@keyframes wom-pulse{50%{opacity:.35;box-shadow:0 0 2px rgba(255,50,40,.35)}}

@media(max-width:700px){
  .player-ui{left:30.2%;top:43.1%;width:39.8%;height:29.4%}
}

@media(max-width:700px){
  .player-ui{font-size:clamp(6px,1.7vw,12px)}
  .station-name{font-size:clamp(6px,1.9vw,13px)}
  .player-live{font-size:clamp(5px,1.7vw,11px)}
  .player-clock{font-size:clamp(5px,1.6vw,10px)}
  .live-title{font-size:clamp(7px,2.5vw,14px)}
  .live-artist{font-size:clamp(6px,2vw,11px)}
  .live-subtitle{font-size:clamp(5px,1.55vw,9px)}
  .visual-control{font-size:clamp(8px,2.6vw,16px)}
  .real-play{width:clamp(19px,5.7vw,32px);font-size:clamp(7px,2vw,12px)}
  #player-volume{width:clamp(28px,10vw,55px)}
  .real-volume{font-size:clamp(6px,1.9vw,11px)}
  .player-motto{font-size:clamp(4px,1.2vw,7px);letter-spacing:.22em}
}

/* ===== ADMIN-EDITABLE MARQUEE ===== */
.wom-marquee{
  position:absolute;
  left:15.7%;
  top:80.8%;
  width:69.0%;
  height:5.0%;
  z-index:9;
  overflow:hidden;
  display:flex;
  align-items:center;
  pointer-events:none;
  color:#ffe4a3;
  font-weight:800;
  font-size:clamp(8px,1.0vw,19px);
  letter-spacing:.035em;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 1px rgba(0,0,0,.85);
  white-space:nowrap;
}
.wom-marquee-track{
  display:flex;
  width:max-content;
  min-width:200%;
  animation:wom-marquee-scroll 24s linear infinite;
}
.wom-marquee-track span{
  display:block;
  padding-right:8vw;
}
@keyframes wom-marquee-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .wom-marquee-track{animation:none;min-width:100%}
  .wom-marquee-track span:nth-child(2){display:none}
}
@media(max-width:700px){
  .wom-marquee{
    left:15.0%;
    top:80.6%;
    width:70.0%;
    height:5.3%;
    font-size:clamp(6px,1.8vw,11px);
  }
}

/* v5.10.1: separate voice recorder hotspot removed */
.hotspot.hs-voice,[data-modal="voice"]{display:none !important;pointer-events:none !important;}

/* v5.13: Kontakt-Symbol im World-of-Music-Stil */
.wom-contact-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.35em;
  height:1.35em;
  margin-right:.28em;
  color:#ffe4a3;
  font-size:1.05em;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  vertical-align:-.08em;
}
.wom-contact-label{color:inherit}
[data-modal="contact"]{cursor:pointer}

/* v5.16: Contact hotspot sits directly over the baked Kontakt tile. */
.hotspot.hs-contact{cursor:pointer;pointer-events:auto;z-index:20}


/* v5.25: Dezentes Impressum unter den Kopfhörern, relativ zur Radio-Grafik */
.wom-footer{
  position:absolute;
  right:3.2%;
  bottom:2.2%;
  z-index:30;
  display:block;
  pointer-events:none;
}
.wom-imprint-link{
  pointer-events:auto;
  border:0;
  background:transparent;
  color:#fff;
  font-size:12px;
  font-weight:500;
  letter-spacing:.03em;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  padding:3px 5px;
  opacity:.72;
  cursor:pointer;
}
.wom-imprint-link:hover,.wom-imprint-link:focus-visible{
  color:#fff;
  opacity:.95;
  text-decoration:underline;
}
.imprint-content h3{color:var(--gold);margin:20px 0 8px}
.imprint-content p{margin:8px 0}
.imprint-content a{color:#ffe4a3;text-decoration:underline}
@media(max-width:700px){.wom-footer{right:3%;bottom:2%}.wom-imprint-link{font-size:10px;padding:2px 4px}}