/* MODERNE BUTTONS */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  background: #1e293b;
  color: #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.btn-primary {
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  color: #fff;
}
.btn-secondary {
  background: #334155;
  color: #e0e7ef;
}
.btn-danger {
  background: #991b1b;
  color: #fff;
}
.btn-warning {
  background: #a16207;
  color: #fff;
}
.btn:hover, .btn:focus {
  filter: brightness(1.08);
  box-shadow: 0 2px 8px rgba(60,60,100,0.10);
  outline: none;
}
/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body.site-body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#e5e7eb;
  background:#0b1020 url("/assets/images/bilder_hp/background.png") center/cover fixed no-repeat;
  overflow-x:hidden;
}

/* HEADER FULL BLEED */
.site-header{width:100%}
.header-full{
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.header-img{
  width:100%;
  height:auto;
  display:block;
}

/* NAV */
.navbar{
  background:rgba(2,6,23,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  max-width:1400px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.nav-inner a{
  color:#cfe2ff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(30,41,59,.75);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .15s ease, background .2s ease;
}
.nav-inner a:hover{
  background:linear-gradient(135deg, rgba(37,99,235,.85), rgba(139,92,246,.75));
  transform:translateY(-1px);
  color:#fff;
}
.nav-inner .nav-admin{
  background:rgba(234,179,8,.15);
  border-color:rgba(234,179,8,.25);
}

/* LAYOUT */
.page-layout{
  max-width:1400px;
  margin:22px auto 40px;
  padding:0 16px;
  display:grid;
  grid-template-columns:260px 1fr 260px;
  gap:22px;
}

/* SIDEBARS + CENTER */
.sidebar{display:flex;flex-direction:column;gap:18px}
.center{display:flex;flex-direction:column;gap:18px}

/* BOX */
.box{
  background:rgba(15,23,42,.86);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:16px;
  box-shadow:0 14px 40px rgba(2, 69, 255, 0.45);
}
.box.large{padding:18px}
.center .box.large{
  animation:fadeContent .35s ease-in-out;
}
.center .box.large{
  animation:fadeContent .35s ease-in-out;
}

@keyframes fadeContent{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
.box h2,.box h3{margin-bottom:10px;color:#9bd0ff}
.muted{opacity:.75;font-size:13px}

/* PLAYER IFRAME */
.player-iframe{
  width:100%;
  height:300px;
  border:0;
  border-radius:14px;
  background:rgba(0,0,0,.25);
}

/* FOOTER (falls footer.php minimal ist) */
.site-footer{
  max-width:1400px;
  margin:0 auto 25px;
  padding:16px;
  text-align:center;
  color:#a7b0c0;
  font-size:13px;
}
.site-footer a{color:#93c5fd;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* LOGIN & PROFILE */
.login-box,
.login-form,
.profile-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.login-form input{
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:#020617;
  color:#fff;
}

.login-form button,
.profile-actions .btn{
  padding:10px;
  border-radius:10px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  border:none;
  cursor:pointer;
  text-align:center;
}

.profile-mini{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.profile-mini img,
.login-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #6366f1;
}

.profile-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.profile-actions a{
  display:block;
  padding:8px;
  border-radius:8px;
  background:#1e293b;
  text-align:center;
  text-decoration:none;
  color:#e5e7eb;
}

.profile-actions .logout,
.btn-logout{background:#7f1d1d;}

.btn-admin{background:#a16207;}

.danger{background:#991b1b;}

/* RESPONSIVE */
@media (max-width:1100px){
  .page-layout{grid-template-columns:1fr}
  .nav-inner{justify-content:center}
  .player-iframe{height:320px}
}

/* ONAIR BOX IMAGE */
.onair-image{
  width:100px;
  height:100px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #6366f1;
  box-shadow:0 4px 12px rgba(99,102,241,.35);
}

/* CENTER FADE ANIMATION */
.center{
  animation:fadeSwitch .35s ease;
}

@keyframes fadeSwitch{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* ===============================
   User Profil – Chat Badges
================================ */

.profile-badges{
  margin-top:10px;
}

.profile-badges .badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid;
  margin:3px;
  font-size:13px;
  font-weight:600;
}

/* ===============================
   CUSTOM BOXES (Admin Backend)
================================ */

.custom-box {
  display: block;
}

.box-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.box-link:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.box-link:hover .box-image {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

.box-image {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}