*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#050505;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{background-image:radial-gradient(circle at 50% 20%,#390000 0,#080808 42%,#020202 100%)}
a{color:#fff;text-decoration:none}
.hero{width:100%;overflow:hidden;background:#050505}
.hero img{display:block;width:100%;height:auto}
.nav{display:flex;flex-wrap:wrap;background:#080808;border-top:2px solid #a00000;border-bottom:2px solid #a00000}
.nav a{flex:1 1 110px;text-align:center;padding:15px 8px;font-weight:bold;border-right:1px solid #252525}
.nav a:hover{background:#c40000}
.top-tools{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;padding:8px 2%;background:#0a0a0a;border-bottom:1px solid #550000}
.top-tools a{padding:7px 10px;border:1px solid #850000;border-radius:6px;font-size:12px}
.top-tools a:hover{background:#b00000}
main{padding:18px 1.5% 25px}
.main-grid{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:14px}
.two-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.card{background:linear-gradient(145deg,#101010,#030303);border:2px solid #b00000;border-radius:10px;padding:14px;box-shadow:0 0 15px rgba(255,0,0,.25)}
.card-title{font-weight:bold;color:#ff2424;font-size:20px;margin-bottom:12px;display:flex;justify-content:space-between}
.badge{background:#d00000;color:#fff;border-radius:20px;padding:4px 10px;font-size:11px}
.player-card audio{width:100%;margin:15px 0}
.now-playing{border-top:1px solid #333;padding:10px 0;display:flex;gap:8px;flex-wrap:wrap}
.now-playing strong{color:#ff3030;word-break:break-word}
.redbtn{display:block;text-align:center;background:#a90000;border:1px solid #f33;border-radius:7px;padding:10px;margin-top:10px;font-weight:bold}
.redbtn:hover{background:#df0000}
.program-frame{width:100%;min-height:210px;height:auto;overflow:hidden;border:1px solid #4a0000;border-radius:7px;background:#000}
.program-frame.tall{min-height:700px;height:auto}
.program-frame iframe{width:100%;height:100%;border:0;background:#000}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.tile{min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#090909;border:2px solid #a00000;border-radius:10px;text-align:center;box-shadow:0 0 12px rgba(255,0,0,.22)}
.tile b{font-size:21px}
.tile span{margin-top:12px;background:#a90000;border-radius:6px;padding:8px 18px}
.tile:hover{background:#170000}
.standalone{margin-top:20px;min-height:300px}
footer{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding:22px 2%;background:#080808;border-top:2px solid #a00000;color:#bbb}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a:hover{color:#ff3030;text-decoration:underline}
@media(max-width:950px){.main-grid,.two-grid{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nav a{flex-basis:50%}.tiles{grid-template-columns:1fr}.program-frame.tall{min-height:900px;height:auto}.top-tools{justify-content:center}footer{justify-content:center;text-align:center}}
.page-view{margin-top:18px}
.embed-card{padding-bottom:12px}
.embedded-content{width:100%;min-height:70vh;overflow:hidden;border:1px solid #4a0000;border-radius:7px;background:#000}
.embedded-content iframe{display:block;width:100%;height:70vh;min-height:520px;border:0;background:#000}
.close-page{margin-left:auto;border:1px solid #a00000;background:#700000;color:#fff;border-radius:5px;font-size:22px;line-height:1;padding:3px 10px;cursor:pointer}
.close-page:hover{background:#c00000}
@media(max-width:560px){.embedded-content iframe{height:80vh;min-height:600px}}


.linkus-page code { color: #ff4a4a; }
.banner-list { display: grid; gap: 20px; margin: 20px 0; }
.banner-item { padding: 16px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,0,0,.35); border-radius: 10px; overflow: hidden; }
.banner-item img { display: block; width: min(100%, 468px); height: auto; margin: 0 auto 10px; }
.banner-meta { text-align: center; opacity: .75; margin-bottom: 10px; }
.banner-item label { display: block; margin-bottom: 6px; font-weight: 700; }
.banner-item textarea { width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; background: #050505; color: #fff; border: 1px solid #555; border-radius: 6px; padding: 10px; font: 13px/1.45 monospace; }

/* Erweiterte Navigation: Streambox und Link us bleiben auch auf kleinen Displays sauber lesbar. */
.nav a{min-width:0;}
@media(max-width:900px){.nav a{flex:1 1 20%;}}
@media(max-width:560px){.nav a{flex:1 1 50%;}}