/* Admin shell */
.admin-shell{display:flex;gap:18px;align-items:flex-start}
.admin-side{width:240px;position:sticky;top:18px;border-radius:22px;padding:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);backdrop-filter: blur(10px)}
.admin-side__title{font-size:14px;letter-spacing:.35px;color:rgba(255,255,255,.78);margin-bottom:10px}
.admin-side__nav{display:flex;flex-direction:column;gap:10px}
.admin-side__link{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:16px;text-decoration:none;color:rgba(255,255,255,.88);background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.08)}
.admin-side__link:hover{background:rgba(255,255,255,.08)}
.admin-side__link.is-active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16)}
.admin-badge{min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,120,160,.22);border:1px solid rgba(255,120,160,.35);font-size:12px}
.admin-main{flex:1;min-width:0; overflow-x: hidden;}

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap}
.tab{cursor:pointer;border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.88)}
.tab.is-active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}

/* Range input */
input[type=range].input{padding:0;height:44px}


/* ==========================================================================
   MOBILE OPTIMIZATIONS FÜR DEN ADMIN BEREICH
   ========================================================================== */
@media (max-width: 980px){
  .admin-shell{flex-direction:column; gap: 15px;}
  .admin-side{width:100%;position:relative;top:auto; padding: 12px;}
  .admin-side__nav{flex-direction:row;flex-wrap:wrap; gap: 8px;}
  .admin-side__link{flex:1;min-width:140px; padding: 10px; font-size: 14px;}
  .admin-main { width: 100%; }
  
  /* Tabellen auf kleinen Bildschirmen scrollbar machen, anstatt sie zu quetschen */
  .admin-main table { display: block; overflow-x: auto; white-space: nowrap; width: 100%; }
}

@media (max-width: 640px){
  .tabs{gap:8px}
  .tab{flex:1;text-align:center; font-size: 14px;}
  .actions .btn.primary{width:100%}
}

@media (max-width: 480px){
  /* Menüpunkte im Admin-Bereich untereinander anordnen */
  .admin-side__link{min-width: 100%;} 
}