/* ========= DESIGN-TOKENS ========= */
.c-yt-playlist{
  --yt-accent:#32bee2; --yt-radius:10px; --yt-border:1px; --yt-gap:.5rem;
  --yt-thumb-w:120px; --yt-sidebar-maxh:560px; /* yt-thumb-w:120px; --> yt-thumb-w:140px; */
  --yt-tag-bg:transparent; --yt-tag-border:#1f81a4;
  --yt-tag-active-bg:#32bee2; --yt-tag-active-fg:#000;
}

/* Layout */
.c-yt-playlist{ display:grid; gap:1rem; grid-template-columns:2fr 1fr; align-items:start; }
.c-yt-embed{ position:relative; width:100%; aspect-ratio:16/9; }
.c-yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; }
.c-yt-title{ margin:.6rem 0 0; font-size:clamp(1rem,2.2vw,1.25rem); }

/* Sidebar */
.c-yt-sidebar{ display:flex; flex-direction:column; gap:var(--yt-gap); max-height:var(--yt-sidebar-maxh); }

/* Tags */
.c-yt-tags{ display:flex; flex-wrap:wrap; gap:.4rem; position:sticky; top:0; padding-top:.4rem .3rem; background:#fff; z-index:5; border-bottom:1px solid rgba(0,0,0,.08);}
.c-yt-tag{ padding:.28rem .65rem; border:var(--yt-border) solid var(--yt-tag-border); border-radius:999px; background:var(--yt-tag-bg); cursor:pointer; font-size:.86rem; line-height:1; }
.c-yt-tag:hover{ border-color:#e0f4e2; }
.c-yt-tag.is-active{ background:var(--yt-tag-active-bg); color:var(--yt-tag-active-fg); border-color:var(--yt-tag-active-bg); }

/* Scrollbare Liste */
.c-yt-list{ overflow-y:auto; padding:0; display:flex; flex-direction:column; gap:var(--yt-gap); }

/* Item-Karten */
.c-yt-item{
  display:grid; grid-template-columns:var(--yt-thumb-w) 1fr; gap:.6rem; align-items:center; text-align:left;
  background:#fff; border:var(--yt-border) solid rgba(0,0,0,.08);
  padding:.55rem; border-radius:var(--yt-radius); cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, border-color .2s ease;
}
.c-yt-item:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.c-yt-item.is-active{ border-color: color-mix(in srgb, var(--yt-accent) 22%, #0000); box-shadow:0 0 0 2px color-mix(in srgb, var(--yt-accent) 12%, #0000) inset; }

.c-yt-item img{ width:100%; height:100%; object-fit: cover; aspect-ratio: 16/9; border-radius:calc(var(--yt-radius) - 10px); display:block; }  

.c-yt-item span{ font-size:.95rem; line-height:1.25; }
.c-yt-item[hidden]{ display:none !important; }

/* Scrollbar */
.c-yt-list::-webkit-scrollbar{ width:8px; }
.c-yt-list::-webkit-scrollbar-thumb{ background:#353127; border-radius:6px; }

@media (max-width:960px){
  .c-yt-playlist{ grid-template-columns:1fr; }
  .c-yt-sidebar{ max-height:none; }

/* Mobile: beschränkte Höhe und Scrollen */
@media (max-width: 768px) {
  .c-yt-list {
    max-height: 60vh;       /* Höhe auf 60% der Viewport-Höhe begrenzen */
    overflow-y: auto;        /* vertikales Scrollen erlauben */
    -webkit-overflow-scrolling: touch; /* sanftes Scrollen auf iOS */
  }
}