/* NAME */
#onair_anzeigename {
    text-align: center;
    font-size: 14px;
    color: white;
}

/* BILD */
img#onair_bildIMG {
    width: 200px;
    height: 200px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding-right: 0px;
}

/* SENDUNG */
#onair_sendung {
    text-align: center;
    font-size: 14px;
    color: white;
}

/* SONG */
#onair_currentsong {
    text-align: center;
    font-size: 12px;
    color: white;
}

/* 🔴 ON AIR LED (NEU) */
.onair-led {
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;

    box-shadow: 0 0 6px red, 0 0 12px red;

    animation: onAirBlink 1s infinite;
}

/* 🔴 BLINK EFFEKT */
@keyframes onAirBlink {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.2; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

/* OPTIONAL: ON AIR STATUS ZENTRIERT */
#onair_status {
    text-align: center;
    font-size: 13px;
    color: white;
}
<!-- DASHBOARD WRAPPER -->
<div style="display:flex; justify-content:center; gap:20px; flex-wrap:wrap;"><!-- BOX 1 -->
<div style="text-align:center;"><iframe src="https://sendeplan2.thorsradio.eu/index.php?page=infos&amp;mode=onairbox" style="border:0;width:250px;height:350px;margin-bottom:10px;border-radius:12px;"></iframe>
<div class="box">
<div class="text" id="info1">L&auml;dt...</div>

<div class="text" id="next1">Loading...</div>
<a class="btn" href="https://laut.fm/thorsradio1" target="_blank">H&ouml;ren</a></div>
</div>
<!-- BOX 2 -->

<div style="text-align:center;"><iframe src="https://sendeplan.thorsradio.eu/index.php?page=infos&amp;mode=onairbox" style="border:0;width:250px;height:350px;margin-bottom:10px;border-radius:12px;"></iframe>

<div class="box">
<div class="text" id="info2">L&auml;dt...</div>

<div class="text" id="next2">Loading...</div>
<a class="btn" href="https://laut.fm/thorsradio2" target="_blank">H&ouml;ren</a></div>
</div>
</div>
<!-- STYLE -->
<style type="text/css">.box{
  text-align:center;
  padding:10px;
  width:250px;
  background:#050c1a;
  border-radius:12px;
  box-shadow:0 0 10px #00ccff, 0 0 20px #00ccff;
  color:white;
  font-family:Arial;
}

.text{
  font-size:11px;
  opacity:0.85;
  margin:5px 0;
}

.btn{
  display:inline-block;
  margin-top:8px;
  padding:6px 12px;
  font-size:11px;
  color:#fff;
  text-decoration:none;
  border:1px solid #00ccff;
  border-radius:6px;
  box-shadow:0 0 8px #00ccff;
}

.btn:hover{
  background:#00ccff;
  color:#000;
}
</style>
<!-- LAUTFM SCRIPT --><script src="//api.laut.fm/js_tools/lautfm_js_tools.0.10.0.js.min.js"></script><script>
/* CURRENT PLAYLIST 1 */
laut.fm.station("thorsradio2")
.info({
  container:"info1",
  template:"<%= this.current_playlist.name %>"
}, true);

/* NEXT PLAYLIST 1 */
laut.fm.station("thorsradio2")
.info({
  container:"next1",
  template:"<b>Nächste Sendung:</b> " +
           "<%= this.next_playlist.started_at.humanTimeShort() %> - " +
           "<%= this.next_playlist.ends_at.humanTimeShort() %> Uhr<br>" +
           "<b>Dann hörst du:</b> " +
           "<%= this.next_playlist.name %>"
}, true);

/* CURRENT PLAYLIST 2 */
laut.fm.station("thorsradio2")
.info({
  container:"info2",
  template:"<%= this.current_playlist.name %>"
}, true);

/* NEXT PLAYLIST 2 */
laut.fm.station("thorsradio2")
.info({
  container:"next2",
  template:"<b>Nächste Sendung:</b> " +
           "<%= this.next_playlist.started_at.humanTimeShort() %> - " +
           "<%= this.next_playlist.ends_at.humanTimeShort() %> Uhr<br>" +
           "<b>Dann hörst du:</b> " +
           "<%= this.next_playlist.name %>"
}, true);
</script>
<style type="text/css">.onair-led {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:Arial;
  font-weight:bold;
  color:#ff2b2b;
  text-transform:uppercase;
}

/* roter Punkt */
.onair-led::before {
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff0000;
  box-shadow:0 0 5px #ff0000, 0 0 15px #ff0000;
  animation:pulse 1s infinite;
}

/* Puls Effekt */
@keyframes pulse {
  0% {
    transform:scale(1);
    opacity:1;
    box-shadow:0 0 5px #ff0000, 0 0 10px #ff0000;
  }
  50% {
    transform:scale(1.4);
    opacity:0.6;
    box-shadow:0 0 10px #ff0000, 0 0 25px #ff0000;
  }
  100% {
    transform:scale(1);
    opacity:1;
    box-shadow:0 0 5px #ff0000, 0 0 10px #ff0000;
  }
}
</style>