/* === Radio MKW Monitor – REST Compact Centered === 
   Version 2025-11-02J (Farblogik optimiert)
*/
:root{
  --bg:#1a1d21;
  --card:#23262b;
  --muted:#9aa3ad;
  --text:#f2f5f8;
  --accent:#4fc3f7;
  --accent2:#81d4fa;
  --danger:#ff5252;
  --auto:#4caf50;
  --radius:14px;
  --shadow:0 3px 10px rgba(0,0,0,0.25);
  --progress:0%;
  --progress-color:#55ff88;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* HEADER */
.site-header{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;
  padding:18px 20px 10px;
  background:#202327;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)
}
.logo{height:72px;width:auto}
.station-name{color:var(--muted);font-weight:600;letter-spacing:.2px}

/* SERVERBAR (Ansicht-Umschalter + Stream-Monitor-Status) */
.serverbar{display:flex;justify-content:center;width:100%;margin:12px auto 4px;padding:0 10px}
.serverbar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;max-width:1150px;
  background:var(--card);border-radius:12px;box-shadow:var(--shadow);
  padding:10px 12px;border:1px solid rgba(255,255,255,.06)
}
.server-switch{display:flex;gap:10px;flex-wrap:wrap}
.server-btn{
  appearance:none;border:1px solid rgba(255,255,255,.12);background:#2a2d33;color:var(--text);
  border-radius:10px;padding:10px 14px;font-weight:800;letter-spacing:.2px;
  cursor:pointer;transition:transform .08s ease, background .15s ease, border-color .15s ease
}
.server-btn:hover{transform:translateY(-1px)}
.server-btn.active{background:rgba(79,195,247,.18);border-color:rgba(79,195,247,.55)}

.server-status{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.status-chip{
  display:flex;align-items:center;gap:8px;
  background:#2a2d33;border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:10px 12px
}
.status-label{color:var(--muted);font-weight:800;margin-right:6px}
.status-key{color:var(--muted);font-weight:800}
.status-val{font-weight:900}
.status-val.ok{color:var(--auto)}
.status-val.bad{color:var(--danger)}



@keyframes mkwPulse{
  0%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.08);filter:brightness(1.28)}
  100%{transform:scale(1);filter:brightness(1)}
}
.status-val.pulse{animation:mkwPulse 1.15s ease-in-out infinite}

/* WETTER */
.weather-wrap{display:flex;justify-content:center;margin:16px auto 6px;width:100%}
.weather-bar{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  max-width:1150px;padding:0 10px
}
.weather-item{
  flex:1 1 210px;min-width:210px;max-width:225px;height:132px;
  border-radius:12px;color:#fff;text-align:center;
  padding:18px 12px 16px;box-shadow:0 2px 6px rgba(0,0,0,.25);
  display:flex;flex-direction:column;justify-content:center;align-items:center
}
.city-bad-orb{background:#006a6a}
.city-fulda{background:#7e57c2}
.city-hanau{background:#0277bd}
.city-maintal{background:#ef6c00}
.city-schluechtern{background:#cc4c4c}
.weather-city{font-weight:800;font-size:1.25rem;margin-bottom:2px}
.weather-temp{font-size:2.25rem;font-weight:900;line-height:1}
.weather-state{
  margin-top:6px;
  font-size:clamp(.95rem,1.6vw,1.05rem);
  line-height:1.15;max-width:92%;text-align:center;white-space:normal;word-break:keep-all
}
.weather-updated{margin:6px 0 0;text-align:center;color:var(--muted);font-size:.9rem}

/* NOW PLAYING (zentriert, kompakt) */
.now-playing{
  position:relative;overflow:hidden;
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  margin:22px auto;max-width:900px;padding:34px 28px 86px;
}
.now-playing::before{
  content:"";position:absolute;inset:0;
  width:var(--progress);height:100%;
  background:var(--progress-color);
  opacity:.22;transition:width .35s linear, background .3s ease;
  z-index:1;pointer-events:none
}
.now-playing > *{position:relative;z-index:2}

.artist{font-size:1.35rem;color:#e9e9e9;font-weight:600;margin-bottom:6px}
.title{font-size:2.7rem;line-height:1.18;font-weight:800}

/* Ramp unten links, Restzeit unten rechts */
.ramp-time{
  position:absolute;left:18px;bottom:16px;
  color:#ffca28;font-weight:800;font-size:1.15rem;text-shadow:0 2px 6px rgba(0,0,0,.8)
}
.time-remaining{
  position:absolute;right:20px;bottom:16px;
  font-weight:900;font-size:1.85rem;text-shadow:0 2px 6px rgba(0,0,0,.8);
  color:#aaffaa;transition:color .25s ease
}

/* Swap-Animation */
.swap.outgoing #npCurrent{animation:slideOutLeft .45s ease forwards}
.swap.incoming #npIncoming{animation:slideInUp .45s ease forwards}
@keyframes slideOutLeft{to{transform:translateX(-12%);opacity:0}}
@keyframes slideInUp{from{transform:translateY(15%);opacity:0}to{transform:translateY(0);opacity:1}}

/* Zeitstreifen */
.time-strip{
  display:flex;align-items:center;justify-content:center;gap:14px;
  max-width:900px;margin:0 auto 16px;color:#ffca28
}
.time-digital{font-weight:900;letter-spacing:.5px;font-size:1.45rem}
.time-sep{display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.time-spoken{font-weight:800;font-size:1.2rem}

/* KOMMENDE TITEL */
.next-list{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 22px;max-width:900px;margin:0 auto 26px
}
.next-list .label{color:var(--muted);font-weight:700;margin-bottom:10px;letter-spacing:.3px}

.upcoming{list-style:none;display:flex;flex-direction:column;gap:10px}
.upcoming li{
  display:grid;grid-template-columns:110px 1fr 140px;
  gap:12px;align-items:center;background:#2a2d33;border:1px solid rgba(255,255,255,.06);
  padding:12px 16px;border-radius:10px;color:#d7dee6
}
.upcoming li .next-time{font-weight:800;color:var(--accent2);text-align:left}
.upcoming li .mid{
  display:flex;flex-direction:column;line-height:1.2
}
.upcoming li .mid .a{font-weight:700;margin-bottom:2px}
.upcoming li .mid .t{opacity:.95}
.upcoming li .right{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap
}
.right .dur{color:#cfd6de;font-weight:700}
.right .ramp{color:#ffca28;font-weight:800}

/* FOOTER */
.site-footer{padding:14px 18px;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,.08);background:#202327;font-size:.88rem}

/* RESPONSIVE */
@media (max-width:1024px){
  .weather-bar{max-width:900px}
  .weather-item{flex:1 1 46%;max-width:46%}
}
@media (max-width:640px){
  .weather-bar{max-width:100%}
  .weather-item{flex:1 1 100%;max-width:95%;height:auto;min-height:132px}
  .now-playing,.next-list{max-width:95%;padding:22px}
  .title{font-size:2.2rem}
  .time-remaining{font-size:1.55rem;right:12px;bottom:12px}
  .ramp-time{left:12px;bottom:12px}
  .upcoming li{grid-template-columns:90px 1fr 120px}
}

@media (max-width:900px){
  .serverbar-inner{max-width:900px}
}

@media (max-width:640px){
  .serverbar-inner{max-width:95%;flex-direction:column;align-items:stretch}
  .server-status{justify-content:flex-start}
}

/* --- FIX: kleiner Balken entfernen --- */
.progress {
  opacity: 0;
  pointer-events: none;
}



/* ============================================================
   === FARBCODES (NEU, EINHEITLICH, KONFLIKTFREI) ============
   ============================================================ */

/* Fixzeiten (aktiv) */
#nextList li.fix {
  color:#ff8800;
  font-weight:600;
}

/* Jingles / Promo / Trailer / Station ID (aktiv) */
#nextList li.jingle {
  color:#4da6ff;
  font-weight:600;
}

/* Stundenbeginn / -ende */
#nextList li.hourborder {
  color:#b32222;
  font-weight:600;
}

/* INAKTIVE – immer komplett grau, egal welcher Typ */
#nextList li.inactive,
#nextList li.inactive * {
  color:#777 !important;
  opacity:0.6;
  filter:grayscale(70%);
}

/* Ramp gelb nur bei aktiven Titeln */
#nextList li:not(.inactive) .ramp {
  color:#ffca28 !important;
  font-weight:800;
}