/* =========================================================
   ELITE CHAOS V50 – CLEAN STARTPAGE
   Eine einzige neue CSS-Datei für die Startseite.
   ========================================================= */

:root{
  --v50-red:#ed1717;
  --v50-dark:#050505;
  --v50-panel:rgba(12,7,7,.94);
  --v50-line:#641919;
  --v50-max:1480px;
  --v50-side:210px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#020202;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}

body > main{
  position:relative;
  z-index:2;
}

/* Hintergrund */
.v50-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.80)),
    url("/assets/img/radio-studio-v30.png") center top/cover no-repeat;
  filter:grayscale(.82) contrast(1.10) saturate(.70) brightness(.62);
}

.v50-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 20%,rgba(190,0,0,.16),transparent 32%),
    linear-gradient(90deg,rgba(0,0,0,.88),transparent 22%,transparent 78%,rgba(0,0,0,.88));
}

.v50-red-haze{
  position:fixed;
  z-index:1;
  width:38vw;
  height:70vh;
  top:18vh;
  pointer-events:none;
  filter:blur(70px);
  opacity:.18;
  background:radial-gradient(circle,rgba(220,0,0,.65),transparent 68%);
}

.v50-red-haze-left{left:-15vw}
.v50-red-haze-right{right:-15vw}

/* Seitliche Banner */
.v50-side-poster{
  position:fixed;
  z-index:2;
  top:50%;
  width:clamp(145px,11vw,205px);
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.76;
  animation-duration:8s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

.v50-side-left{
  left:clamp(8px,1.3vw,24px);
  animation-name:v50FloatLeft;
}

.v50-side-right{
  right:clamp(8px,1.3vw,24px);
  animation-name:v50FloatRight;
}

.v50-side-poster img{
  display:block;
  width:100%;
  height:calc(100vh - 220px);
  object-fit:cover;
  border:1px solid rgba(120,20,20,.75);
  border-radius:14px;
  filter:grayscale(.12) contrast(1.08) saturate(.82);
  box-shadow:0 18px 48px rgba(0,0,0,.62),0 0 24px rgba(220,0,0,.11);
}

/* Hauptcontainer */
.v50-shell{
  position:relative;
  z-index:4;
  width:min(var(--v50-max),calc(100% - 2rem));
  margin:0 auto;
  padding:.8rem 0 1.4rem;
}

/* Header */
.v50-header{
  position:relative;
  overflow:hidden;
  border:1px solid #761919;
  border-radius:16px;
  background:#000;
  box-shadow:0 22px 58px rgba(0,0,0,.55),0 0 26px rgba(180,0,0,.10);
}

.v50-header img{
  display:block;
  width:100%;
  height:calc(100vh - 220px);
  object-fit:cover;
}

.v50-onair{
  position:absolute;
  right:2.5%;
  top:8%;
  padding:.65rem .8rem;
  border:1px solid #ff2929;
  border-radius:9px;
  background:rgba(10,0,0,.82);
  text-align:center;
  box-shadow:0 0 18px rgba(255,0,0,.32);
  animation:v50Pulse 2s ease-in-out infinite;
}

.v50-onair strong,
.v50-onair small{display:block}

.v50-onair strong{font-size:1rem}
.v50-onair small{margin-top:.15rem;color:#ff4141;font-size:.62rem;letter-spacing:.12em}

/* Augen */
.v50-eye{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0 5%,#ff4444 18%,#ff1515 42%,transparent 68%);
  box-shadow:0 0 4px #fff,0 0 9px #ff1717,0 0 18px #d00000;
  opacity:.12;
  animation:v50EyeBlink 4.6s infinite;
  pointer-events:none;
}

.v50-header-eye-left{left:11.9%;top:35.7%}
.v50-header-eye-right{left:16.1%;top:35.7%;animation-delay:.05s}

.v50-player-eye-left{left:34.5%;top:42%}
.v50-player-eye-right{left:58.2%;top:42%;animation-delay:.05s}

/* Navigation */
.v50-nav{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin:1rem 0;
}

.v50-nav a{
  min-height:118px;
  padding:1rem 1.15rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid var(--v50-line);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(18,8,8,.96),rgba(5,5,5,.94));
  color:#fff;
  text-decoration:none;
  transition:.18s ease;
}

.v50-nav a:hover{transform:translateY(-2px);border-color:var(--v50-red)}
.v50-nav span{color:#ff2929;font-size:.7rem;font-weight:900;letter-spacing:.12em}
.v50-nav strong{margin:.35rem 0;font-size:1.25rem}
.v50-nav small{color:#9a9a9a}

/* Player */
.v50-player{
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 390px;
  gap:1.6rem;
  align-items:center;
  min-height:330px;
  padding:1.7rem;
  border:1px solid #741919;
  border-radius:16px;
  background:
    radial-gradient(circle at 13% 45%,rgba(160,0,0,.16),transparent 31%),
    linear-gradient(145deg,rgba(20,8,8,.96),rgba(4,4,4,.94));
  box-shadow:0 24px 60px rgba(0,0,0,.52);
}

.v50-skull-wrap{text-align:center}

.v50-skull{
  position:relative;
  width:210px;
  height:210px;
  margin:auto;
  border-radius:50%;
  border:1px solid #821b1b;
  background:#050505;
  box-shadow:0 0 36px rgba(220,0,0,.24),inset 0 0 26px rgba(100,0,0,.18);
}

.v50-skull img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.v50-player-status{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.8rem;
  color:#ff5555;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.1em;
}

.v50-player-status i{
  width:8px;height:8px;border-radius:50%;background:#ff1717;box-shadow:0 0 10px #ff1717
}

.v50-player-info h1{
  margin:0 0 1rem;
  font-size:clamp(2.2rem,4vw,3.8rem);
  line-height:.98;
}

.v50-live-line{
  display:grid;
  gap:.2rem;
  margin:.7rem 0;
}

.v50-live-line span,
.v50-label{
  color:#ff2b2b;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.13em;
}

.v50-live-line strong{font-size:1.18rem}

.v50-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.9rem 0;
}

.v50-meta span{
  padding:.35rem .55rem;
  border:1px solid #5d1a1a;
  border-radius:999px;
  background:#070707;
  color:#ccc;
  font-size:.68rem;
  font-weight:800;
}

.v50-muted{display:block;color:#8e8e8e;font-size:.76rem;margin-top:.25rem}

.v50-equalizer{
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:34px;
  margin-top:1rem;
}

.v50-equalizer i{
  width:4px;
  min-height:5px;
  border-radius:3px;
  background:#ff1717;
  box-shadow:0 0 6px rgba(255,23,23,.5);
  animation:v50Eq calc(.65s + var(--bar)*.025s) ease-in-out infinite alternate;
}

.v50-controls{display:grid;gap:1rem}

.v50-control-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.v50-control-row button{
  width:52px;
  height:52px;
  border:1px solid #6b1919;
  border-radius:50%;
  background:#080808;
  color:#fff;
  cursor:pointer;
}

.v50-volume{
  display:grid;
  gap:.35rem;
  color:#aaa;
  font-size:.72rem;
}

.v50-volume input{width:100%}

.v50-player-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
}

.v50-player-links a,
.v50-button,
.v50-stack a,
.v50-quicklinks a,
.v50-social a,
.v50-cta-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.55rem .7rem;
  border:1px solid #641919;
  border-radius:8px;
  background:#080808;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  transition:.18s ease;
}

.v50-player-links a:hover,
.v50-button:hover,
.v50-stack a:hover,
.v50-quicklinks a:hover,
.v50-social a:hover,
.v50-cta-actions a:hover{
  transform:translateY(-2px);
  border-color:var(--v50-red);
  background:#160707;
}

/* 3 Spalten */
.v50-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 220px;
  gap:1rem;
  margin-top:1rem;
  align-items:start;
}

.v50-left,
.v50-center,
.v50-right{
  display:grid;
  gap:1rem;
}

.v50-card{
  padding:1rem;
  border:1px solid var(--v50-line);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(18,8,8,.93),rgba(5,5,5,.91));
  backdrop-filter:blur(7px);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}

.v50-card h2{
  margin:.35rem 0 .65rem;
  font-size:1.16rem;
}

.v50-card p{color:#9a9a9a;line-height:1.5}

.v50-stack{display:grid;gap:.5rem}

.v50-info-list{display:grid;gap:.5rem;color:#aaa;font-size:.8rem}

/* Uhr */
.v50-clock{
  position:relative;
  width:150px;
  height:150px;
  margin:.8rem auto 0;
  border-radius:50%;
  overflow:hidden;
  border:3px solid #171717;
  box-shadow:0 0 0 2px #690000,0 0 24px rgba(255,23,23,.28);
}

.v50-clock img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.v50-clock-digital{
  position:absolute;
  left:50%;
  bottom:12%;
  transform:translateX(-50%);
  width:112px;
  padding:.35rem;
  border:1px solid #7d1b1b;
  border-radius:7px;
  background:rgba(0,0,0,.80);
  text-align:center;
}

.v50-clock-digital span{display:block;font-weight:900}
.v50-clock-digital small{color:#ff4d4d;font-size:.55rem}

/* Hero */
.v50-hero{
  position:relative;
  min-height:470px;
  overflow:hidden;
  border:1px solid #751919;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}

.v50-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.v50-hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.30) 50%,rgba(0,0,0,.10)),
    linear-gradient(180deg,transparent 56%,rgba(0,0,0,.72));
}

.v50-hero-copy{
  position:absolute;
  left:1.4rem;
  bottom:1.4rem;
  width:min(600px,75%);
}

.v50-hero-copy h2{
  margin:.4rem 0 .55rem;
  font-size:clamp(2rem,4vw,3.7rem);
  line-height:.98;
}

.v50-hero-copy p{color:#ddd}

.v50-hero-onair{
  position:absolute;
  right:1.3rem;
  bottom:1.3rem;
  padding:.7rem .85rem;
  border:1px solid #ff2929;
  border-radius:8px;
  background:#150000;
  font-weight:900;
  letter-spacing:.1em;
  box-shadow:0 0 20px rgba(255,0,0,.3);
  animation:v50Pulse 2s ease-in-out infinite;
}

/* Live Grid */
.v50-live-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.7rem;
}

.v50-live-grid article{
  min-height:110px;
  padding:.85rem;
  border:1px solid var(--v50-line);
  border-radius:12px;
  background:linear-gradient(145deg,#160909,#070707);
}

.v50-live-grid span{color:#ff2b2b;font-size:.66rem;font-weight:900;letter-spacing:.1em}
.v50-live-grid strong{display:block;margin:.45rem 0 .25rem}
.v50-live-grid small{color:#888}

.v50-quicklinks,
.v50-social{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5rem;
  margin-top:.8rem;
}

.v50-social small{grid-column:1/-1;color:#888}

/* Wunschbox */
.v50-wish-form{display:grid;gap:.75rem}
.v50-wish-form label{display:grid;gap:.35rem;font-weight:700}
.v50-wish-form input,
.v50-wish-form textarea{
  width:100%;
  padding:.72rem;
  border:1px solid #5d1a1a;
  border-radius:8px;
  background:#030303;
  color:#fff;
}

.v50-form-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.v50-checkbox{display:flex!important;grid-template-columns:auto 1fr!important;align-items:start;gap:.55rem!important;font-weight:600!important}
.v50-wish-form button{
  min-height:48px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,#9f0000,#f01818);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* CTA + Banner + Footer */
.v50-cta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem;
  align-items:center;
  margin-top:1rem;
  padding:1.1rem 1.2rem;
  border:1px solid var(--v50-line);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(18,8,8,.94),rgba(5,5,5,.92));
}

.v50-cta h2{margin:.3rem 0}
.v50-cta p{margin:0;color:#999}
.v50-cta-actions{display:flex;gap:.55rem}

.v50-bottom-banner{
  display:block;
  margin-top:1rem;
  overflow:hidden;
  border:1px solid #741919;
  border-radius:14px;
  box-shadow:0 18px 46px rgba(0,0,0,.5);
}

.v50-bottom-banner img{
  display:block;
  width:100%;
  height:calc(100vh - 220px);
  object-fit:cover;
}

.v50-footer{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:1rem;
  align-items:center;
  margin-top:1rem;
  padding:1rem 1.1rem;
  border:1px solid var(--v50-line);
  border-radius:14px;
  background:#060606;
}

.v50-footer strong{display:block;margin:.3rem 0}
.v50-footer small{color:#888}

.v50-footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.5rem;
}

.v50-footer nav a{
  color:#fff;
  text-decoration:none;
  font-size:.78rem;
}

/* Effekte */
.ec-effects-toggle{
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:80;
}

@keyframes v50FloatLeft{
  0%,100%{transform:translateY(-50%) translateY(-10px) rotate(-1deg)}
  50%{transform:translateY(-50%) translateY(10px) rotate(1deg)}
}

@keyframes v50FloatRight{
  0%,100%{transform:translateY(-50%) translateY(10px) rotate(1deg)}
  50%{transform:translateY(-50%) translateY(-10px) rotate(-1deg)}
}

@keyframes v50Pulse{
  0%,100%{opacity:.72;filter:brightness(.9)}
  50%{opacity:1;filter:brightness(1.25)}
}

@keyframes v50EyeBlink{
  0%,80%,100%{opacity:.10;transform:scale(.8)}
  84%,88%{opacity:1;transform:scale(1.05)}
}

@keyframes v50Eq{
  from{height:6px}
  to{height:32px}
}

/* Responsive */
@media(max-width:1700px){
  .v50-side-poster{
    width:115px;
    opacity:.48;
  }
}

@media(max-width:1500px){
  .v50-side-poster{display:none}
}

@media(max-width:1150px){
  .v50-player{
    grid-template-columns:190px minmax(0,1fr);
  }

  .v50-controls{grid-column:1/-1}

  .v50-layout{
    grid-template-columns:200px minmax(0,1fr);
  }

  .v50-right{
    grid-column:1/-1;
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:800px){
  .v50-shell{width:calc(100% - .7rem)}

  .v50-nav,
  .v50-player,
  .v50-layout,
  .v50-right,
  .v50-live-grid,
  .v50-form-row,
  .v50-cta,
  .v50-footer{
    grid-template-columns:1fr;
  }

  .v50-nav a{min-height:90px}
  .v50-skull{width:170px;height:170px}
  .v50-controls{text-align:center}
  .v50-control-row{justify-content:center}
  .v50-player-links{grid-template-columns:1fr}
  .v50-hero{min-height:350px}
  .v50-footer nav{justify-content:flex-start}
}

@media(prefers-reduced-motion:reduce){
  .v50-side-poster,
  .v50-onair,
  .v50-hero-onair,
  .v50-eye,
  .v50-equalizer i{
    animation:none!important;
  }
}


/* =========================================================
   ELITE CHAOS V51 – SEITENBANNER FIX
   Beide Seitenmotive vollständig sichtbar.
   ========================================================= */

.v50-side-poster{
  width:clamp(118px,8.2vw,158px) !important;
  max-height:64vh;
  overflow:visible;
  opacity:.92;
}

.v50-side-poster img{
  width:100%;
  height:calc(100vh - 220px);
  object-fit:cover;
  max-height:64vh;
  object-fit:contain;
}

/* Banner etwas weiter nach außen schieben */
.v50-side-left{
  left:clamp(4px,.75vw,14px) !important;
}

.v50-side-right{
  right:clamp(4px,.75vw,14px) !important;
}

/* Mittleren Seitenbereich minimal enger,
   damit sich Mittelbereich und Banner nicht überdecken */
@media(min-width:1501px){
  .v50-shell{
    width:min(1420px,calc(100% - 340px)) !important;
  }
}

/* Auf besonders breiten Monitoren dürfen die Seitenbanner etwas größer sein */
@media(min-width:1900px){
  .v50-side-poster{
    width:165px !important;
  }

  .v50-shell{
    width:min(1480px,calc(100% - 390px)) !important;
  }
}

/* Auf mittleren Desktopbreiten Banner kleiner statt abschneiden */
@media(min-width:1350px) and (max-width:1500px){
  .v50-side-poster{
    display:block !important;
    width:96px !important;
    opacity:.72;
  }

  .v50-shell{
    width:min(1220px,calc(100% - 230px)) !important;
  }
}

/* Erst auf wirklich kleinen Desktop-/Tabletbreiten ausblenden */
@media(max-width:1349px){
  .v50-side-poster{
    display:none !important;
  }
}


/* =========================================================
   ELITE CHAOS V53 – BANNER FIX
   - großer Header vollständig sichtbar
   - Seitenbanner wirklich länger
   - keine leeren Rahmenflächen
   - Animation bleibt erhalten
   ========================================================= */

/* GROSSER OBERER BANNER */
.v50-header{
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
  background:#000 !important;
}

.v50-header img{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}

/* ON AIR bleibt auf dem Banner */
.v50-onair{
  z-index:6 !important;
}

/* SEITENBANNER:
   Grafik selbst wird länger dargestellt, nicht nur der Rahmen. */
.v50-side-poster{
  width:clamp(132px,8.6vw,172px) !important;
  max-height:none !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.v50-side-poster img{
  display:block !important;
  width:100% !important;
  height:520px !important;
  max-height:68vh !important;
  object-fit:fill !important;
  object-position:center !important;
  border:1px solid rgba(120,20,20,.78) !important;
  border-radius:14px !important;
  background:#050505 !important;
  box-shadow:0 18px 48px rgba(0,0,0,.62),0 0 24px rgba(220,0,0,.11) !important;
}

/* etwas weiter nach außen, damit nichts am Hauptbereich klebt */
.v50-side-left{
  left:clamp(8px,.9vw,16px) !important;
}

.v50-side-right{
  right:clamp(8px,.9vw,16px) !important;
}

/* Mittleren Bereich nur so weit einziehen, dass beide Banner komplett sichtbar bleiben */
@media(min-width:1501px){
  .v50-shell{
    width:min(1420px,calc(100% - 360px)) !important;
  }
}

@media(min-width:1900px){
  .v50-side-poster{
    width:178px !important;
  }

  .v50-side-poster img{
    height:560px !important;
  }

  .v50-shell{
    width:min(1480px,calc(100% - 400px)) !important;
  }
}

@media(min-width:1350px) and (max-width:1500px){
  .v50-side-poster{
    display:block !important;
    width:100px !important;
    opacity:.72 !important;
  }

  .v50-side-poster img{
    height:400px !important;
  }

  .v50-shell{
    width:min(1220px,calc(100% - 240px)) !important;
  }
}

@media(max-width:1349px){
  .v50-side-poster{
    display:none !important;
  }
}


/* =========================================================
   ELITE CHAOS V54 – BANNER SAUBER
   Repariert die durch V52/V53 versehentlich auf Bannerbilder
   angewendete Viewport-Höhe.
   ========================================================= */

/* OBERER BANNER: vollständiges Originalbild, keine Beschneidung */
.v50-header{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:#000 !important;
}

.v50-header img{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}

/* UNTERER BEWERBUNGSBANNER:
   exakt wie ein normaler Banner anzeigen, nicht auf Bildschirmhöhe aufblasen */
.v50-bottom-banner{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
  margin:1rem 0 .8rem !important;
  background:#050505 !important;
}

.v50-bottom-banner img{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}

/* SEITENBANNER:
   bewusst etwas länger als vorher, aber nur diese beiden.
   Bewegung/Animation bleibt unverändert. */
.v50-side-poster{
  width:clamp(132px,8.6vw,172px) !important;
  max-height:none !important;
  overflow:visible !important;
}

.v50-side-poster img{
  display:block !important;
  width:100% !important;
  height:580px !important;
  max-height:70vh !important;
  object-fit:fill !important;
  object-position:center !important;
  border-radius:14px !important;
}

/* genug Platz zwischen Seitenbannern und Hauptseite */
@media(min-width:1501px){
  .v50-shell{
    width:min(1420px,calc(100% - 370px)) !important;
  }
}

@media(min-width:1900px){
  .v50-side-poster{
    width:178px !important;
  }

  .v50-side-poster img{
    height:620px !important;
  }

  .v50-shell{
    width:min(1480px,calc(100% - 400px)) !important;
  }
}

@media(min-width:1350px) and (max-width:1500px){
  .v50-side-poster{
    display:block !important;
    width:100px !important;
    opacity:.72 !important;
  }

  .v50-side-poster img{
    height:430px !important;
  }

  .v50-shell{
    width:min(1220px,calc(100% - 240px)) !important;
  }
}

@media(max-width:1349px){
  .v50-side-poster{
    display:none !important;
  }
}


/* =========================================================
   ELITE CHAOS V55 – VARIANTE 3
   Vier frei schwebende Totenköpfe statt Seitenbanner
   ========================================================= */

/* Die alten Seitenbanner aus V50-V54 definitiv deaktivieren */
.v50-side-poster{
  display:none !important;
}

/* Gruppe blockiert keinerlei Klicks */
.v55-skulls{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

/* Grunddesign der frei schwebenden Totenköpfe */
.v55-skull{
  position:absolute;
  width:clamp(105px,8vw,155px);
  aspect-ratio:1/1;
  border-radius:50%;
  opacity:.86;
  transform-origin:center;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.68));
}

.v55-skull::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(225,0,0,.22) 0%,
      rgba(130,0,0,.12) 36%,
      transparent 68%);
  filter:blur(15px);
  animation:v55Glow 4.8s ease-in-out infinite;
}

.v55-skull img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  filter:grayscale(.05) contrast(1.18) saturate(.92) brightness(1.04);
  box-shadow:
    0 0 0 1px rgba(125,20,20,.62),
    0 0 26px rgba(215,0,0,.20);
}

/* leichte unterschiedliche Größen / Positionen */
.v55-skull-left-top{
  left:calc(clamp(12px,2.5vw,52px) - 44px);
  top:24vh;
  width:clamp(112px,8.4vw,162px);
  animation:v55FloatLeftA 7.2s ease-in-out infinite;
}

.v55-skull-left-bottom{
  left:calc(clamp(38px,5vw,100px) - 44px);
  top:63vh;
  width:clamp(90px,6.8vw,132px);
  opacity:.70;
  animation:v55FloatLeftB 8.4s ease-in-out infinite;
}

.v55-skull-right-top{
  right:calc(clamp(15px,2.8vw,58px) - 44px);
  top:29vh;
  width:clamp(108px,8.1vw,158px);
  animation:v55FloatRightA 7.8s ease-in-out infinite;
}

.v55-skull-right-bottom{
  right:calc(clamp(42px,5.2vw,105px) - 44px);
  top:67vh;
  width:clamp(88px,6.6vw,128px);
  opacity:.68;
  animation:v55FloatRightB 9s ease-in-out infinite;
}

/* rote Blinkaugen */
.v55-eye{
  position:absolute;
  top:42%;
  width:8.2%;
  aspect-ratio:1/1;
  border-radius:50%;
  opacity:.08;
  background:
    radial-gradient(circle,
      #fff 0 8%,
      #ff5151 18%,
      #ff1515 42%,
      transparent 68%);
  box-shadow:
    0 0 3px #fff,
    0 0 8px #ff1717,
    0 0 16px rgba(220,0,0,.95);
  animation:v55EyeBlink 4.9s ease-in-out infinite;
}

.v55-eye-left{left:33.7%}
.v55-eye-right{
  right:33.7%;
  animation-delay:.05s;
}

/* leicht versetzte Blinkzeiten */
.v55-skull-left-bottom .v55-eye{animation-delay:1.1s}
.v55-skull-right-top .v55-eye{animation-delay:2.2s}
.v55-skull-right-bottom .v55-eye{animation-delay:3.1s}

/* Animationen */
@keyframes v55FloatLeftA{
  0%,100%{
    transform:translate3d(0,-12px,0) rotate(-2deg) scale(.98);
  }
  50%{
    transform:translate3d(12px,13px,0) rotate(2deg) scale(1.03);
  }
}

@keyframes v55FloatLeftB{
  0%,100%{
    transform:translate3d(5px,10px,0) rotate(2deg) scale(.96);
  }
  50%{
    transform:translate3d(-10px,-12px,0) rotate(-2deg) scale(1.03);
  }
}

@keyframes v55FloatRightA{
  0%,100%{
    transform:translate3d(0,11px,0) rotate(2deg) scale(.99);
  }
  50%{
    transform:translate3d(-12px,-13px,0) rotate(-2deg) scale(1.04);
  }
}

@keyframes v55FloatRightB{
  0%,100%{
    transform:translate3d(-5px,-8px,0) rotate(-1.5deg) scale(.96);
  }
  50%{
    transform:translate3d(10px,12px,0) rotate(2deg) scale(1.03);
  }
}

@keyframes v55Glow{
  0%,100%{opacity:.48;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.08)}
}

@keyframes v55EyeBlink{
  0%,72%,100%{
    opacity:.07;
    transform:scale(.76);
  }
  76%,80%{
    opacity:1;
    transform:scale(1.08);
  }
  84%{
    opacity:.15;
    transform:scale(.84);
  }
}

/* Der Hauptbereich bekommt wieder seine normale Breite.
   Die alten V51-V54-Regeln für Banner-Abstand werden hier überschrieben. */
@media(min-width:1501px){
  .v50-shell{
    width:min(var(--v50-max),calc(100% - 2rem)) !important;
  }
}

/* Auf extrem breiten Monitoren etwas größere Totenköpfe */
@media(min-width:1900px){
  .v55-skull-left-top,
  .v55-skull-right-top{
    width:175px;
  }

  .v55-skull-left-bottom,
  .v55-skull-right-bottom{
    width:140px;
  }

  .v50-shell{
    width:min(var(--v50-max),calc(100% - 2rem)) !important;
  }
}

/* Auf mittleren Desktops dezenter und kleiner */
@media(max-width:1500px){
  .v55-skull{
    opacity:.58;
  }

  .v55-skull-left-top,
  .v55-skull-right-top{
    width:100px;
  }

  .v55-skull-left-bottom,
  .v55-skull-right-bottom{
    width:78px;
  }

  .v50-shell{
    width:min(1320px,calc(100% - 2rem)) !important;
  }
}

/* Tablet/Handy: Hintergrund sauber halten */
@media(max-width:1250px){
  .v55-skulls{
    display:none;
  }

  .v50-shell{
    width:calc(100% - .7rem) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .v55-skull,
  .v55-skull::before,
  .v55-eye{
    animation:none !important;
  }
}


/* =========================================================
   ELITE CHAOS V73 – NUR EIN ZUSÄTZLICHES WETTER-KÄSTCHEN
   Keine Änderung an bestehendem Layout / Mobilansicht.
   ========================================================= */
.v73-weather-card{
  position:relative;
}

.v73-weather-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}

.v73-weather-head h2{
  margin-bottom:.15rem;
}

.v73-weather-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid #5b1b1b;
  border-radius:50%;
  background:#070707;
  font-size:1.8rem;
  line-height:1;
  box-shadow:0 0 18px rgba(170,0,0,.16);
}

.v73-weather-main{
  display:grid;
  gap:.2rem;
  margin-top:.8rem;
}

.v73-weather-main strong{
  font-size:2rem;
  line-height:1;
}

.v73-weather-main span{
  color:#d0d0d0;
}

.v73-weather-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem;
  margin-top:.8rem;
}

.v73-weather-meta span{
  padding:.55rem .6rem;
  border:1px solid #311313;
  border-radius:.45rem;
  background:#070707;
  color:#aaa;
  font-size:.72rem;
}

.v73-weather-meta b{
  color:#fff;
}

.v73-weather-note{
  display:block;
  margin-top:.75rem;
  color:#777;
  line-height:1.45;
}

/* Mobil bleibt die vorhandene Seite wie sie ist.
   Nur die zwei Wetter-Metafelder werden bei sehr schmalen Geräten gestapelt. */
@media(max-width:430px){
  .v73-weather-meta{
    grid-template-columns:1fr;
  }
}


/* ELITE CHAOS V74 – Radio-Erweiterungen, ohne Grundlayout zu verändern */
.v74-live-extra{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.35rem 0 .2rem;color:#aaa;font-size:.72rem}
.v74-live-badge{padding:.2rem .42rem;border:1px solid #a31d1d;border-radius:999px;background:#2a0505;color:#ff4242;font-weight:900;letter-spacing:.08em;box-shadow:0 0 14px rgba(220,0,0,.16)}
.v74-rating{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.55rem 0;color:#888;font-size:.66rem;font-weight:900;letter-spacing:.05em}
.v74-rating button{padding:.32rem .5rem;border:1px solid #4b1b1b;border-radius:.42rem;background:#080808;color:#fff;cursor:pointer}
.v74-rating button:hover{border-color:#c01d1d}
.v74-rating small{width:100%;color:#888;font-weight:400;letter-spacing:0}
.v74-radio-notice{width:100%;margin:.8rem 0 0;padding:.7rem .9rem;border:1px solid #7b1b1b;border-radius:.65rem;background:linear-gradient(90deg,#250707,#0a0707);color:#ddd}
.v74-radio-notice strong{color:#ff3434;margin-right:.55rem}
#ecCurrentHost.v74-clickable{cursor:pointer;text-decoration:underline;text-decoration-color:#671818;text-underline-offset:.2rem}


/* Kompakte Player-Auswahl: kleine, gut antippbare Symbol-Buttons */
.v50-player-links.v50-player-icons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:.48rem;
}

.v50-player-links.v50-player-icons .v50-player-icon{
  position:relative;
  flex:0 0 44px;
  width:44px;
  min-height:44px;
  height:44px;
  padding:9px;
  border-radius:10px;
}

.v50-player-links.v50-player-icons .v50-player-icon svg{
  width:24px;
  height:24px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.v50-player-links.v50-player-icons .v50-player-icon svg path[d*="10 8l6 4"] ,
.v50-player-links.v50-player-icons .v50-player-icon svg path[d*="10 9l6 3"] ,
.v50-player-links.v50-player-icons .v50-player-icon:last-child svg path{
  fill:currentColor;
  stroke:currentColor;
}

.v50-player-links.v50-player-icons .v50-player-icon::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translate(-50%,4px);
  z-index:20;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  white-space:nowrap;
  padding:.32rem .48rem;
  border:1px solid #641919;
  border-radius:6px;
  background:#080808;
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:.15s ease;
}

.v50-player-links.v50-player-icons .v50-player-icon:hover::after,
.v50-player-links.v50-player-icons .v50-player-icon:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

@media(max-width:691px){
  .v50-player-links.v50-player-icons{
    display:flex;
    grid-template-columns:none;
    justify-content:center;
  }
  .v50-player-links.v50-player-icons .v50-player-icon{
    flex-basis:46px;
    width:46px;
    height:46px;
    min-height:46px;
    padding:10px;
  }
}

/* V80: rechte Infoboxen auf Desktop optisch an linke Seitenkarten angleichen */
@media (min-width:1151px){
  .v50-right{
    width:210px;
    justify-self:end;
  }
  .v50-right > .v50-card{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    min-width:0;
  }
  .v50-right .v50-stack,
  .v50-right .v50-info-list,
  .v50-right .v50-player-icons,
  .v50-right .v50-social{
    min-width:0;
    max-width:100%;
  }
}

/* V80: nur die vier Zugangs-Buttons auf Desktop etwas kompakter ausrichten */
@media (min-width:1151px){
  .v50-access-card .v50-stack a{
    width:calc(100% - 12px);
    margin-inline:auto;
    min-height:42px;
    padding:.45rem .55rem;
    font-size:.90rem;
    line-height:1.2;
    text-align:center;
    box-sizing:border-box;
  }
}


/* V80 radio.de: separates, kompaktes Logo direkt unter Social Media */
.v50-radio-de-standalone{
    display:flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-height:38px;
    margin:10px auto 0;
    padding:7px 11px;
    border:1px solid rgba(180,35,35,.7);
    border-radius:10px;
    background:rgba(8,5,6,.78);
    text-decoration:none;
    box-sizing:border-box;
}
.v50-radio-de-logo{
    display:inline-flex;
    align-items:baseline;
    gap:0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1;
    letter-spacing:-.45px;
    white-space:nowrap;
}
.v50-radio-de-logo strong{font-weight:800;color:#fff}
.v50-radio-de-logo b{font-weight:800;color:#e3242b}
.v50-radio-de-dot{
    width:9px;
    height:9px;
    margin-right:5px;
    border-radius:50%;
    background:#e3242b;
    box-shadow:0 0 8px rgba(227,36,43,.45);
    align-self:center;
}

/* V80 radio.de: auf Desktop bis zur Unterkante der Wetterkarte ausrichten */
@media (min-width:1151px){
  .v50-radio-de-standalone{
    width:100%;
    max-width:100%;
    min-height:54px;
    margin:0;
    box-sizing:border-box;
  }
}

/* V80 radio.de: vorhandenen Elite-Chaos-Totenkopf als Hintergrund der Kachel */
.v50-radio-de-standalone{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:
      linear-gradient(rgba(5,2,3,.20),rgba(5,2,3,.48)),
      url('../img/player-skull-v31.png') center 34% / cover no-repeat;
}
.v50-radio-de-standalone::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(to bottom,rgba(0,0,0,.02) 38%,rgba(0,0,0,.72) 100%);
    pointer-events:none;
}
.v50-radio-de-logo{
    position:relative;
    z-index:1;
    margin-top:auto;
    margin-bottom:12px;
    padding:5px 8px;
    border-radius:8px;
    background:rgba(0,0,0,.55);
    text-shadow:0 1px 4px #000;
}
@media (max-width:1150px){
  .v50-radio-de-standalone{
    min-height:150px;
    width:100%;
    background-position:center 28%;
  }
}

/* V81 radio.de: dezentes rotes Augenleuchten nur im radio.de-Totenkopf */
.v50-radio-de-standalone::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 33.5% 43.8%, rgba(255,32,38,.98) 0 1.8px, rgba(255,20,28,.82) 2.8px, rgba(210,0,12,.45) 5px, rgba(160,0,8,.14) 8px, transparent 11px),
      radial-gradient(circle at 63.8% 43.8%, rgba(255,32,38,.98) 0 1.8px, rgba(255,20,28,.82) 2.8px, rgba(210,0,12,.45) 5px, rgba(160,0,8,.14) 8px, transparent 11px);
    filter:drop-shadow(0 0 4px rgba(255,0,18,.72));
    animation:v81RadioDeEyeGlow 2.2s ease-in-out infinite;
}
@keyframes v81RadioDeEyeGlow{
    0%,100%{opacity:.72;filter:drop-shadow(0 0 3px rgba(255,0,18,.58));}
    50%{opacity:1;filter:drop-shadow(0 0 7px rgba(255,0,18,.92));}
}
@media (max-width:1150px){
  .v50-radio-de-standalone::before{
    background:
      radial-gradient(circle at 35.4% 43.8%, rgba(255,32,38,.98) 0 1.8px, rgba(255,20,28,.82) 2.8px, rgba(210,0,12,.45) 5px, rgba(160,0,8,.14) 8px, transparent 11px),
      radial-gradient(circle at 62.2% 43.8%, rgba(255,32,38,.98) 0 1.8px, rgba(255,20,28,.82) 2.8px, rgba(210,0,12,.45) 5px, rgba(160,0,8,.14) 8px, transparent 11px);
  }
}
@media (prefers-reduced-motion:reduce){
  .v50-radio-de-standalone::before{animation:none;opacity:.88;}
}

/* V141 Datenschutz: Wetter wird erst nach bewusster Auswahl geladen. */
.v73-weather-load{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:9px 14px;border:1px solid rgba(255,36,36,.58);border-radius:8px;background:#120606;color:#fff;font-weight:800;cursor:pointer}.v73-weather-load:hover{background:#220808}.v73-weather-load:disabled{opacity:.58;cursor:wait}.v73-weather-note a{color:#ff5b5b}

/* V143: sichtbare ungefähre Standortanzeige in der Wetterkarte */
.v73-weather-location{margin-top:.7rem;padding:.55rem .65rem;border:1px solid #4b1717;border-radius:.48rem;background:rgba(40,5,5,.72);color:#fff;font-size:.78rem;font-weight:800;line-height:1.35;box-shadow:inset 0 0 14px rgba(150,0,0,.08)}