*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#05050d;color:#f7f4ff;font-family:Arial,Helvetica,sans-serif;line-height:1.5}.header{background:#05050d;text-align:center;overflow:hidden}.header-main,.header-top{display:block;width:100%;height:auto;margin:0 auto}.nav{position:sticky;top:0;z-index:20;background:rgba(5,5,13,.96);border-top:1px solid #9a3cff;border-bottom:1px solid #9a3cff;backdrop-filter:blur(8px)}.nav-inner{max-width:1200px;margin:auto;display:flex;justify-content:center;align-items:stretch}.nav a{flex:1;text-align:center;color:#fff;text-decoration:none;padding:15px 10px;font-size:16px;font-weight:700;letter-spacing:.04em;border-right:1px solid rgba(180,80,255,.18);transition:.2s}.nav a:first-child{border-left:1px solid rgba(180,80,255,.18)}.nav a:hover,.nav a.active{background:linear-gradient(90deg,#411080,#a238ff);box-shadow:inset 0 -3px #e8a6ff}.container{width:min(1200px,94%);margin:auto;padding:28px 0 50px}.welcome{text-align:center;padding:18px 10px 30px}.eyebrow{letter-spacing:.28em;color:#d89cff;font-weight:700;margin:0}.welcome h1{font-size:clamp(38px,6vw,70px);margin:4px 0;color:#fff;text-transform:uppercase;letter-spacing:.03em;text-shadow:0 0 18px rgba(180,80,255,.35)}.subtitle{font-size:clamp(16px,2vw,24px);letter-spacing:.2em;color:#d59aff;font-weight:700}.player-row{border:1px solid #a83cff;border-radius:12px;padding:18px;display:grid;grid-template-columns:1.1fr 1.6fr auto;gap:18px;align-items:center;background:linear-gradient(120deg,rgba(27,13,55,.8),rgba(3,9,25,.95));box-shadow:0 0 25px rgba(125,35,255,.12)}.player-title{font-size:15px;color:#ddd}.player-title strong{font-size:21px;color:#cf73ff}.player-title span{color:#aaa}audio{width:100%;min-width:0}.button{display:inline-block;border:1px solid #c04cff;color:#fff;background:#130c25;padding:11px 16px;border-radius:8px;text-decoration:none;font-weight:700;white-space:nowrap}.button:hover{background:#6b1cc2}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.center-boxes{max-width:1120px;margin:18px auto 0;align-items:stretch;gap:24px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.card{border:1px solid #a13dff;border-radius:12px;background:radial-gradient(circle at top,rgba(82,25,120,.32),transparent 55%),linear-gradient(145deg,rgba(12,8,24,.98),rgba(3,8,18,.99));padding:18px;box-shadow:0 0 22px rgba(108,24,190,.14)}.card h2{margin:0;color:#db8cff;font-size:20px;letter-spacing:.04em}.card>p{margin:3px 0 12px;color:#bba7c8}.section{margin-top:18px}.frame-wrap{width:100%;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,#090516,#120827);border:1px solid rgba(204,120,255,.45);box-shadow:inset 0 0 30px rgba(130,45,210,.12)}iframe{display:block;width:100%;border:0;background:#02040b;color:#fff}.grid3 iframe{height:200px}.center-boxes iframe{height:220px;min-height:200px}.schedule iframe{height:600px}.history iframe{height:500px}.team iframe,.application iframe{height:600px}.footer{position:relative;text-align:center;padding:28px 18px 45px;border-top:1px solid #a13dff;background:#05050d}.footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.footer a,.footer button{color:#eee;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer}.footer a:hover,.footer button:hover{color:#d38cff}.top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid #bd57ff;background:#24103d;color:#fff;font-size:24px;cursor:pointer}.footer p{color:#8f849b;font-size:13px;margin-top:20px}code{color:#e19aff}@media(max-width:850px){.nav-inner{overflow-x:auto;justify-content:flex-start}.nav a{min-width:145px;font-size:14px}.player-row{grid-template-columns:1fr}.grid3,.grid2{grid-template-columns:1fr}.container{width:min(96%,650px)}.schedule iframe{height:520px}.grid3 iframe{height:210px}}@media(max-width:480px){.nav a{min-width:125px;padding:12px 7px}.welcome{padding-top:10px}.card{padding:14px}.footer-links{gap:14px}.top{right:12px;bottom:12px}}

.frame-link{display:inline-block;margin-top:10px;padding:8px 14px;border:1px solid #a85cff;border-radius:8px;color:#fff;text-decoration:none}.frame-link:hover{background:#6d22b5}

/* Embedded radio widgets: keep the surrounding design dark without covering iframe content. */
.embed-note{color:#c9b7d6;font-size:13px;margin:8px 0 0;text-align:center}

/* Current/next show boxes: dark background; only links/buttons use a light treatment. */
.center-boxes .card{background:radial-gradient(circle at top,rgba(82,25,120,.34),transparent 55%),linear-gradient(145deg,rgba(12,8,24,.99),rgba(3,8,18,.99));color:#f7f4ff;min-height:360px;padding:22px;box-shadow:0 0 28px rgba(160,70,255,.20)}
.center-boxes .card h2{color:#db8cff;font-size:clamp(21px,2.2vw,28px);text-align:center}
.center-boxes .card>p{color:#c9b7d6;text-align:center;font-weight:600}
.center-boxes .frame-wrap{background:linear-gradient(135deg,#090516,#120827);border:1px solid rgba(204,120,255,.45);min-height:240px}
.center-boxes iframe{height:250px;background:#02040b}
.center-boxes .frame-link{background:#fff;color:#24102f;border-color:#fff;font-weight:800}
.center-boxes .frame-link:hover{background:#e7d4f5;color:#24102f}
@media(max-width:850px){.center-boxes{max-width:100%;gap:18px}.center-boxes .card{min-height:0}.center-boxes iframe{height:240px}}

/* Final iframe visibility/layout fix */
.center-boxes{display:grid;grid-template-columns:1fr 1fr;max-width:1120px;margin:24px auto;gap:24px}
.center-boxes .card{min-width:0;display:flex;flex-direction:column}
.center-boxes .frame-wrap{width:100%;min-height:280px;overflow:auto}
.center-boxes iframe{width:100%;height:280px;min-height:280px;display:block;border:0;background:#fff}
.schedule .frame-wrap{overflow:auto}
.schedule iframe{display:block;width:100%;min-height:650px;height:650px;border:0;background:#fff}
.history iframe{display:block;width:100%;min-height:520px;height:520px;border:0;background:#fff}
@media(max-width:850px){.center-boxes{grid-template-columns:1fr;max-width:100%}.center-boxes iframe{height:280px}.schedule iframe{height:600px}.history iframe{height:520px}}

/* Sichtbare Moderator-Texte: bleiben auch dann sichtbar, wenn der externe MegaSoundMix-Inhalt nur das Profilbild rendert. */
.show-info{margin-top:10px;padding:12px 14px;border:1px solid rgba(204,120,255,.45);border-radius:9px;background:linear-gradient(135deg,rgba(18,8,35,.98),rgba(3,8,18,.98));display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:58px}
.show-info strong{font-size:20px;color:#e6a1ff;text-shadow:0 0 10px rgba(180,80,255,.25)}
.show-info small{width:100%;color:#d4c7df;font-size:13px;margin-top:-5px}
.status-badge{display:inline-block;padding:4px 9px;border-radius:999px;background:#d93434;color:#fff;font-size:12px;font-weight:800;letter-spacing:.05em}

/* Moderator ON AIR: weißer Inhaltsbereich */
#onair .frame-wrap.show-frame{background:#fff !important;border-color:#cfcfcf;box-shadow:none;}
#onair .frame-wrap.show-frame iframe{background:#fff !important;color:#111;}
#onair .show-info{background:#fff;border-color:#cfcfcf;color:#111;}
#onair .show-info strong{color:#7a28b8;text-shadow:none;}
#onair .show-info small{color:#333;}

/* Nächste Sendung: weißer Inhaltsbereich wie ON AIR */
#next .frame-wrap.show-frame{background:#fff !important;border-color:#cfcfcf;box-shadow:none;}
#next .frame-wrap.show-frame iframe{background:#fff !important;color:#111;}
#next .show-info{background:#fff;border-color:#cfcfcf;color:#111;}
#next .show-info strong{color:#7a28b8;text-shadow:none;}
#next .show-info small{color:#333;}

/* Song-Historie: weißer Hintergrund */
.history, .history .frame-wrap { background:#fff !important; }
.history iframe { background:#fff !important; }

/* =========================================================
   FINAL RESPONSIVE FIX – vorhandenes Design beibehalten
   ========================================================= */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body { min-width:0; }
.header { width:100%; max-width:100vw; overflow:hidden; line-height:0; }
.header img,
.header-main,
.header-top { display:block; width:100% !important; max-width:100vw !important; height:auto !important; min-width:0 !important; object-fit:contain; }
.nav { width:100%; max-width:100vw; overflow:hidden; }
.nav-inner { width:100%; max-width:1200px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.nav-inner::-webkit-scrollbar { display:none; }
.nav a { flex:0 0 auto; white-space:nowrap; }
.container { width:94%; max-width:1200px; min-width:0; }
.player-row, .grid2, .center-boxes, .section, .card, .frame-wrap { min-width:0; max-width:100%; }
.frame-wrap { overflow:hidden; }
iframe { max-width:100% !important; }

@media (max-width: 850px) {
  .container { width:calc(100% - 24px); padding-top:18px; }
  .welcome { padding:12px 0 20px; }
  .eyebrow { font-size:12px; letter-spacing:.16em; }
  .welcome h1 { font-size:clamp(28px,9vw,44px); line-height:1.1; }
  .subtitle { font-size:13px; letter-spacing:.08em; line-height:1.35; }
  .player-row { grid-template-columns:1fr; gap:10px; padding:14px; }
  .player-title { font-size:14px; }
  .player-title strong { font-size:19px; }
  audio { width:100%; min-width:0; }
  .button { width:100%; text-align:center; }

  .center-boxes { grid-template-columns:1fr !important; gap:16px; margin:16px 0 0; }
  .center-boxes .card { width:100%; padding:16px; min-height:0; }
  .center-boxes .card h2 { font-size:clamp(20px,6vw,28px); line-height:1.2; }
  .center-boxes .card > p { font-size:16px; }
  .center-boxes .frame-wrap { width:100%; height:220px; min-height:220px; }
  .center-boxes iframe { width:100% !important; height:220px !important; min-height:220px !important; }
  .show-info { margin-top:8px; padding:10px 12px; gap:7px; }
  .show-info strong { font-size:18px; }
  .show-info small { font-size:13px; line-height:1.35; }

  .section { margin-top:16px; padding:16px; }
  .section h2 { font-size:20px; line-height:1.25; }
  .section > p { font-size:14px; }
  .schedule, .history, .application { width:100%; max-width:100%; overflow:hidden; }
  .schedule iframe { width:100% !important; height:520px !important; min-height:520px !important; }
  .history iframe { width:100% !important; height:480px !important; min-height:480px !important; }
  .application iframe { width:100% !important; height:520px !important; min-height:520px !important; }

  .footer { padding:22px 12px 42px; }
  .footer-links { gap:10px 16px; }
  .footer-links a, .footer-links button { font-size:14px; }
  .top { right:12px; bottom:12px; width:42px; height:42px; }
}

@media (max-width: 480px) {
  .nav a { min-width:auto; padding:11px 15px; font-size:14px; }
  .container { width:calc(100% - 16px); }
  .card { border-radius:12px; }
  .center-boxes .card h2 { font-size:22px; }
  .center-boxes .frame-wrap { height:205px; min-height:205px; }
  .center-boxes iframe { height:205px !important; min-height:205px !important; }
  .schedule iframe { height:460px !important; min-height:460px !important; }
  .history iframe { height:430px !important; min-height:430px !important; }
  .application iframe { height:460px !important; min-height:460px !important; }
}

/* FINAL MOBILE WIDTH REPAIR - no redesign, only fixes the narrow-column bug */
@media (max-width: 850px) {
  html, body { width:100% !important; max-width:100% !important; min-width:0 !important; overflow-x:hidden !important; }
  .header, .nav, main.container, .footer { width:100% !important; max-width:100% !important; min-width:0 !important; }
  main.container {
    display:block !important;
    width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    padding:16px 10px 40px !important;
  }
  main.container > section,
  main.container > .welcome,
  main.container > .center-boxes,
  main.container > .section,
  main.container > .card {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .welcome { box-sizing:border-box !important; }
  .center-boxes { display:grid !important; grid-template-columns:1fr !important; width:100% !important; }
  .center-boxes .card { width:100% !important; }
  .player-row { width:100% !important; }
  .section.card { width:100% !important; }
  .frame-wrap, .frame-wrap iframe { width:100% !important; max-width:100% !important; min-width:0 !important; }
  .nav-inner { width:100% !important; max-width:100% !important; }
}

@media (max-width:480px) {
  main.container { padding-left:8px !important; padding-right:8px !important; }
  .center-boxes .card,
  .section.card { padding:14px !important; }
}