/* ---------------------------------------------------------------
   Sender-Übersichtsseite (Studio- und Messewand)
   Alles skaliert über rem; 1rem hängt am Viewport, damit die Seite
   auf 1080p, 1440p und 4K identisch aussieht (kein Scrollen).
   --------------------------------------------------------------- */
:root{
  font-size: calc(0.50vw + 0.44vh);
  --red:#e30613;
  --red-soft:#ff2233;
  --bg:#08080a;
  --card:rgba(255,255,255,.05);
  --card-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --txt:#f5f3f0;
  --dim:#9d9894;
  --dim-2:#6f6a67;
  --serif:"Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", "Segoe UI", system-ui, sans-serif;
  --r:1.6rem;
}
*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body.idle{cursor:none;}

/* Ambiente: unscharfes Cover + langsam wanderndes Rot */
#ambient{position:fixed; inset:-12%; z-index:0; background-size:cover; background-position:center;
  filter:blur(90px) saturate(150%); opacity:0; transform:scale(1.15);
  transition:opacity 1.4s ease, background-image .6s ease;}
#ambient.on{opacity:.34;}
#glow{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% 8%, rgba(227,6,19,.20), transparent 60%),
    radial-gradient(50rem 40rem at 88% 92%, rgba(227,6,19,.13), transparent 60%);
  animation:drift 90s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translate3d(-1.2%,-1%,0) scale(1.02)} to{transform:translate3d(1.2%,1%,0) scale(1.06)}}
#vignette{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 40%, rgba(0,0,0,.65) 100%);}

.shell{position:relative; z-index:1; height:100%; width:100%; overflow:hidden; display:grid;
  grid-template-rows:auto minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr);
  gap:1.5rem; padding:1.7rem 2rem 1.5rem;}

/* ---------------- Kopf ---------------- */
header{display:flex; align-items:center; gap:1.6rem; min-width:0;}
header > *{flex:none;}
.logo-card{border-radius:1.1rem; padding:.85rem 1.4rem; display:flex; align-items:center;
  box-shadow:0 1.2rem 3rem rgba(0,0,0,.5); max-width:34rem;}
.logo-card.leer{box-shadow:none; padding:0;}
.logo-card img{height:3.9rem; width:auto; max-width:30rem; object-fit:contain; display:block;}
.sendername{font-family:var(--serif); font-size:2.9rem; font-weight:700; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.live{display:flex; align-items:center; gap:.6rem; background:var(--red); color:#fff;
  padding:.5rem 1rem .5rem .85rem; border-radius:999px; font-weight:700; letter-spacing:.16em;
  font-size:.95rem; box-shadow:0 .6rem 2rem rgba(227,6,19,.45);}
.live .dot{width:.62rem; height:.62rem; border-radius:50%; background:#fff; animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.75)}}
.head-right{margin-left:auto; display:flex; align-items:center; gap:1.8rem;}
.weather{display:flex; align-items:center; gap:.9rem;}
.weather svg{width:3.1rem; height:3.1rem; flex:none;}
.weather .t{font-size:2.2rem; font-weight:600; line-height:1;}
.weather .meta{font-size:.95rem; color:var(--dim); line-height:1.35;}
.clock{text-align:right; min-width:9.5rem;}
.clock .time{font-size:3.5rem; font-weight:600; line-height:.95; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.clock .date{font-size:1rem; color:var(--dim); margin-top:.35rem; letter-spacing:.04em;}
.sound{width:3.2rem; height:3.2rem; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--txt); display:grid; place-items:center; cursor:pointer;
  transition:.2s; flex:none;}
.sound:hover{background:var(--card-2); border-color:rgba(255,255,255,.25);}
.sound.on{background:var(--red); border-color:var(--red);}
.sound svg{width:1.5rem; height:1.5rem;}

/* ---------------- Raster ---------------- */
main{display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); gap:1.5rem; min-height:0; min-width:0;}
.col{display:grid; gap:1.5rem; min-height:0; min-width:0;}
.col.left{grid-template-rows:minmax(0,1fr) auto;}
.col.right{grid-template-rows:auto minmax(0,1fr);}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.8rem; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  min-height:0; min-width:0; overflow:hidden; display:flex; flex-direction:column;}
.label{font-size:.92rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim-2);
  font-weight:600; display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; flex:none;}
.label::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--line),transparent);}

/* ---------------- Jetzt läuft ---------------- */
.now{flex:1; display:flex; align-items:stretch; gap:3rem; min-height:0;}
.cover-wrap{position:relative; flex:none; align-self:center; height:100%; max-height:30rem; aspect-ratio:1;
  border-radius:1.2rem; overflow:hidden;
  background:linear-gradient(140deg,#1a1a1e,#0d0d10); box-shadow:0 1.8rem 4.5rem rgba(0,0,0,.65);}
.cover-wrap img#cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:none; z-index:2;}
.cover-wrap img#cover.show{display:block;}
.cover-fallback{position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  background:linear-gradient(145deg,#1c1013,#0b0b0e); transition:background .5s ease;}
.cover-fallback img{grid-area:1/1; height:auto;}
.cover-fallback .signet{width:40%; opacity:.35;}
.cover-fallback .wortmarke{width:80%; max-height:70%; object-fit:contain; display:none;}
/* Moderation, Nachrichten, Jingle …: das Senderlogo im Quadrat.
   Die Fläche färbt sich nach dem Logo (siehe LogoAnalyse im Server). */
.cover-wrap.logo .cover-fallback{background:var(--logo-grund, #fff);}
.cover-wrap.logo .signet{display:none;}
.cover-wrap.logo .wortmarke{display:block;}
/* Die Textspalte füllt die Kartenhöhe: Titel oben, Fortschritt unten, die
   Beschreibung nimmt sich alles dazwischen. */
.now-text{min-width:0; flex:1; display:flex; flex-direction:column; min-height:0;}
.now-text > .badge, .now-text > .artist, .now-text > .title,
.now-text > .bar, .now-text > .times{flex:none;}
/* Ohne langen Beschreibungstext (Moderation, Nachrichten, Jingle) sitzt der
   Block mittig neben dem Logo statt oben zu kleben. */
.now-text.knapp{justify-content:center;}
.now-text.knapp .songinfo{flex:none;}
.badge{display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(227,6,19,.5);
  color:#ff5a63; background:rgba(227,6,19,.12); border-radius:999px; padding:.35rem .9rem;
  font-size:.85rem; letter-spacing:.14em; font-weight:600; text-transform:uppercase; margin-bottom:1.3rem;
  align-self:flex-start;}
.artist{font-size:2.15rem; font-weight:600; color:var(--red-soft); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.title{font-family:var(--serif); font-size:4.9rem; font-weight:700; line-height:1.08; margin-top:.9rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.songinfo{margin-top:1.9rem; font-size:1.16rem; color:var(--dim); line-height:1.68;
  flex:1 1 auto; min-height:0; overflow:hidden;}
/* Nur wenn der Text wirklich nicht ganz passt, läuft er unten weich aus. */
.songinfo.gekuerzt{-webkit-mask-image:linear-gradient(#000 74%, transparent 100%);
  mask-image:linear-gradient(#000 74%, transparent 100%);}
.songinfo p + p{margin-top:1.2rem;}
.songinfo .ueber{display:block; color:var(--red-soft); font-weight:600; font-size:.92rem;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:.25rem;}
.bar{height:.42rem; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:2rem;}
.bar span{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--red),#ff5f4a); transition:width .9s linear;}
.times{display:flex; justify-content:space-between; font-size:.95rem; color:var(--dim-2);
  margin-top:.55rem; font-variant-numeric:tabular-nums;}

/* ---------------- Zuletzt gespielt ---------------- */
.history{display:flex; gap:1.1rem; flex:none;}
.hist-item{flex:1; min-width:0; display:flex; gap:.8rem; align-items:center;}
.hist-item .thumb{width:3.6rem; height:3.6rem; border-radius:.6rem; flex:none; object-fit:cover;
  background:#17171b; border:1px solid var(--line);}
.hist-item .thumb.ph{background:linear-gradient(145deg,#1c1013,#0b0b0e) center/56% no-repeat url("assets/icon.svg");
  opacity:.75;}
.hist-item .tx{min-width:0;}
.hist-item .s{font-size:1.02rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hist-item .a{font-size:.9rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.empty{color:var(--dim-2); font-size:1rem; font-style:italic;}

/* ---------------- Aktuelle Sendung ---------------- */
.show{display:flex; gap:1.3rem; align-items:center;}
.host{width:6.4rem; height:6.4rem; border-radius:50%; flex:none; object-fit:cover;
  border:2px solid rgba(255,255,255,.16); background:#17171b;}
.host.ph{display:grid; place-items:center; font-family:var(--serif); font-size:2.4rem; color:var(--dim);}
.show h2{font-family:var(--serif); font-size:2.6rem; font-weight:700; line-height:1.1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.show .meta{margin-top:.5rem; font-size:1.05rem; color:var(--dim); display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;}
.show .meta b{color:var(--txt); font-weight:600;}
.pill{border:1px solid var(--line); border-radius:999px; padding:.15rem .7rem; font-size:.88rem; color:var(--dim);}

/* ---------------- Sendeplan ---------------- */
.sched{flex:1; min-height:0; overflow:hidden; position:relative;}
.sched-list{display:flex; flex-direction:column;}
.slot{display:flex; align-items:baseline; gap:1.2rem; padding:.82rem 0; border-top:1px solid rgba(255,255,255,.07);}
.slot:first-child{border-top:0;}
.slot .t{font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--red-soft);
  width:5.6rem; flex:none;}
.slot .n{font-family:var(--serif); font-size:1.62rem; font-weight:600; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.slot .h{margin-left:auto; font-size:.95rem; color:var(--dim-2); white-space:nowrap; padding-left:1rem;}
.slot.next{background:linear-gradient(90deg, rgba(227,6,19,.14), transparent 70%);
  margin:0 -.9rem; padding-left:.9rem; padding-right:.9rem; border-radius:.7rem;}
.slot.next .n{color:#fff;}
.slot.next .t::after{content:" ▸"; color:var(--red);}
.slot.trenner{display:block; font-size:.86rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim-2); font-weight:600; padding:1.15rem 0 .5rem;}

/* ---------------- Fuß ---------------- */
footer{display:flex; align-items:center; gap:1.6rem; min-height:0;}
.qr{display:flex; align-items:center; gap:.85rem; background:var(--card); border:1px solid var(--line);
  border-radius:1.1rem; padding:.7rem .95rem; flex:none;}
.qr img{width:4.3rem; height:4.3rem; border-radius:.45rem; background:#fff; padding:.22rem; display:block;}
.qr .tx b{display:block; font-size:1.02rem; font-weight:600; line-height:1.2;}
.qr .tx span{font-size:.86rem; color:var(--dim);}
.ticker-stapel{flex:1; min-width:0; display:flex; flex-direction:column; gap:.55rem;}
.ticker-box{min-width:0; display:flex; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:.9rem; overflow:hidden;}
/* Beide Tags gleich rot und gleich breit – so beginnen die Zeilen bündig. */
.ticker-tag{flex:none; align-self:stretch; display:flex; align-items:center; justify-content:center;
  padding:0 1.1rem; min-width:11rem; max-width:16rem; background:var(--red);
  font-weight:700; letter-spacing:.14em; font-size:.8rem; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ticker-view{flex:1; min-width:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);}
.ticker-track{display:inline-flex; white-space:nowrap; will-change:transform;
  animation:marquee linear infinite;}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.tick{display:inline-flex; align-items:baseline; gap:.7rem; padding:0 2rem; font-size:1.12rem;}
.tick .top{color:var(--red-soft); font-weight:600; font-size:.95rem; letter-spacing:.02em;}
.tick .sep{color:var(--dim-2);}
.ticker-box.leer .ticker-view::after{content:attr(data-leer); color:var(--dim-2);
  font-size:1rem; font-style:italic; padding-left:2rem;}
.status{position:fixed; right:.8rem; bottom:.6rem; z-index:5; display:flex; align-items:center; gap:.45rem;
  font-size:.78rem; color:var(--dim-2); opacity:.55;}
.status .d{width:.5rem; height:.5rem; border-radius:50%; background:#3ecf8e;}
.status .d.stale{background:#e8a33d;}
.status .d.err{background:var(--red);}

/* Bis die Senderdaten da sind */
#laden{position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:var(--bg);
  color:var(--dim-2); font-size:1.2rem; letter-spacing:.1em; text-transform:uppercase;}

/* ==========================================================================
   Ergänzungen für die Hörerseite (RadioPlayer)
   Die Wandanzeige wird hier zur Seite, die jemand am Rechner oder am Telefon
   öffnet: Der Ton-Knopf ist das Wichtigste, und die Seite darf scrollen.
   ========================================================================== */

.hoeren{display:flex; align-items:center; gap:.9rem; flex:none;}
.play{width:4.4rem; height:4.4rem; border-radius:50%; border:0; cursor:pointer;
  background:var(--red); color:#fff; display:grid; place-items:center;
  box-shadow:0 .7rem 2.2rem rgba(227,6,19,.5); transition:transform .15s ease, background .2s;}
.play:hover{transform:scale(1.06);}
.play:active{transform:scale(.97);}
.play.laeuft{background:var(--card-2); box-shadow:none; border:1px solid var(--line);}
.play svg{width:1.9rem; height:1.9rem; margin-left:.15rem;}
.play.laeuft svg{margin-left:0;}
.lautstaerke{width:7rem; accent-color:var(--red); cursor:pointer;}

.status a{color:inherit; text-decoration:none;}
.status a:hover{color:var(--txt); text-decoration:underline;}
.status{gap:.7rem;}

/* ---------------- Handy und schmale Fenster ----------------
   Die Wandanzeige ist auf 16:9 gebaut und darf nicht scrollen. Am Telefon
   gilt das Gegenteil: eine Spalte, Ton-Knopf gross, Scrollen erlaubt. */
@media (max-width: 820px), (orientation: portrait) and (max-width: 1100px){
  :root{font-size: calc(2.6vw + 0.5vh);}
  html,body{height:auto;}
  body{overflow-y:auto;}
  .shell{height:auto; min-height:100%; overflow:visible; gap:1.1rem; padding:1.1rem 1rem 1.6rem;}

  header{flex-wrap:wrap; gap:.9rem;}
  .logo-card img{height:2.8rem;}
  .sendername{font-size:2rem;}
  .head-right{width:100%; margin-left:0; justify-content:space-between; gap:1rem;}
  .clock{min-width:0;}
  .clock .time{font-size:2.4rem;}

  main{grid-template-columns:minmax(0,1fr); gap:1.1rem;}
  .col.left, .col.right{grid-template-rows:auto auto;}
  .card{padding:1.2rem;}

  /* Cover über den Text statt daneben */
  .now{flex-direction:column; align-items:stretch; gap:1.2rem;}
  .cover-wrap{align-self:center; height:auto; width:min(74vw, 22rem); max-height:none;}
  .title{font-size:3.1rem;}
  .artist{font-size:1.6rem; white-space:normal;}
  .songinfo{flex:none; max-height:11rem;}
  .now-text.knapp{justify-content:flex-start;}

  .history{flex-wrap:wrap; gap:.8rem 1rem;}
  .hist-item{flex:1 1 45%;}

  .show h2{font-size:2rem;}
  .host{width:4.6rem; height:4.6rem;}
  .sched{overflow:visible;}
  .slot .n{font-size:1.4rem;}
  .slot .h{display:none;}

  .status{position:static; justify-content:center; opacity:.7; padding-top:.4rem;}
}