/* Basis */
body{
  background-color:#0d0d0d;
  background-image:url('img/hintergrund1_1.avif');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#fff;font-family:'Segoe UI',sans-serif;
}
.text-neon-green{color:#39ff14!important}
.card{background-color:transparent;border:none}
.card .card-title,.card .card-text{color:#39ff14;white-space:normal;word-wrap:break-word;font-size:1.1em;font-weight:bold}
.card-img-top{mix-blend-mode:screen}

.portrait-container{display:inline-block;overflow:hidden;border-radius:50%;border:4px solid rgba(255,255,255,.2);transition:transform .3s ease,box-shadow .3s ease;width:200px;height:200px}
.portrait-img{width:100%;height:100%;object-fit:cover;display:block}
.portrait-container:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(255,255,255,.4)}

.intro{color:#eef3ee}
.stream-button{margin-top:3rem;display:flex;flex-direction:column;align-items:center}

/* Panels standardmäßig versteckt (wird via JS ein-/ausgeblendet) */
[hidden]{display:none!important}
#radio-info,#more-info,#event-info{
  position:fixed;background:#fff;color:#000;border:1px solid #ccc;border-radius:10px;padding:15px;width:260px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);z-index:1500;left:20px
}
#radio-info{top:70px}
#more-info{top:190px}
#event-info{top:310px}
#radio-info h3,#more-info h3,#event-info h3{margin-top:0;font-size:16px}
#radio-info ul,#more-info ul,#event-info ul{margin:0;padding-left:18px}

/* Linke Button-Leiste: Flex + gap */
.btn-left-container{
  position:fixed;top:10px;left:20px;display:flex;gap:20px;z-index:2000;align-items:center;flex-wrap:nowrap;
}

/* Einheitlicher Pill-Button */
.btn-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;
  color:#fff;background:#222;transition:background-color .2s, transform .05s;
}
.btn-pill:hover{background:#333}
.btn-pill:active{transform:translateY(1px)}

.btn-sec{background:#444}
.btn-sec:hover{background:#555}

.btn-ter{background:#666}
.btn-ter:hover{background:#777}

/* Rechts oben */
.top-right-container{position:absolute;top:10px;right:10px;display:flex;gap:10px;z-index:1600}
.btn-right{padding:8px 12px;border:none;cursor:pointer;border-radius:5px;font-size:14px}
.btn-right-primary{background-color:#007bff;color:#fff}
.btn-right-secondary{background-color:#28a745;color:#fff}

/* Dropdown */
.dropbtn{background-color:#39ff14;color:#000;font-size:1rem;font-weight:bold;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s;padding:6px 12px}
.dropbtn:hover{background-color:#32cc10}
.dropdown-content{
  top:40px;display:none;position:absolute;right:0;background-color:#f9f9f9;min-width:180px;
  box-shadow:0 8px 16px rgba(0,0,0,.2);z-index:1700;flex-direction:column;border-radius:8px;overflow:hidden
}
.dropbtn:focus + .dropdown-content,.dropdown-content:hover{display:flex}
.dropdown-content a{padding:10px;text-decoration:none;color:#000;display:block}
.dropdown-content a:hover{background:#f1f1f1}

/* Rating */
.star{color:rgb(77,218,42);transition:color .2s;cursor:pointer;font-size:1.5rem}
.star:hover,.star:hover ~ .star{color:gold}
.star.selected,.star.selected ~ .star{color:gold}
#rating-panel{
  position:fixed;top:60px;right:20px;background:#fff;color:#000;border:1px solid #ccc;
  border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);z-index:1800;width:220px
}

/* Besucherzähler */
#visitCounter{
  position:fixed;bottom:10px;left:10px;background:#000;color:#39ff14;padding:5px 10px;border-radius:5px;font-weight:bold;z-index:1400
}

/* Collapse-Farbe */
.collapse-yellowgreen{color:yellowgreen;font-size:1.15rem;font-weight:bold}

/* Responsive */
@media (max-width:768px){
  .display-5{margin-top:50px}
  .intro{margin-top:20px}
  .portrait-container{width:150px;height:150px}

  .btn-left-container{left:8px;right:8px;gap:10px;flex-wrap:wrap}
  .btn-pill{font-size:13px;padding:6px 10px}

  #more-info{width:90%;left:5%;top:160px;font-size:.9rem;padding:10px}
  #radio-info,#event-info{width:90%;left:5%;font-size:.9rem;padding:10px}
  #radio-info{top:120px}
  #event-info{top:200px}

  .top-right-container{flex-direction:column;align-items:flex-end;gap:6px}
  .btn-right{font-size:clamp(.7rem,2vw,.9rem);padding:4px 8px;border-radius:6px;width:auto;max-width:100%;white-space:nowrap}
  .dropbtn{padding:4px 8px}
  .dropdown-content{top:32px;min-width:140px;font-size:.85rem}

  #visitCounter{display:none}
}