.wti-il{ --card:#ffffff; --muted:#64748b; --ring:#e2e8f0; --chip:#eef2ff; --shadow:0 10px 30px rgba(2,6,23,.07); }
.wti-il__heading{ font-size:clamp(1.6rem,1.2rem + 1.2vw,2.4rem); margin:0 0 .5rem; color:#0f172a; }
.wti-il__intro{ color:var(--muted); margin:0 0 1.1rem; max-width:72ch; }
.wti-il__wrap{ display:grid; grid-template-columns: 1fr minmax(320px,420px); gap:18px; }

.wti-il__main{ background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.wti-il__player{ position:relative; aspect-ratio:16/9; background:#000; }
.wti-il__iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Meta Bereich als 75/25 Grid */
.wti-il__meta{ display:grid; grid-template-columns: 75% 25%; gap:16px; align-items:center; padding:16px 18px; }
.wti-il__metaL{ min-width:0; }
.wti-il__logo{ display:flex; align-items:center; justify-content:center; }
.wti-il__logo img{ width:100%; max-width:100%; height:auto; }

.wti-il__title{ font-weight:800; font-size:clamp(1.1rem,1rem + .4vw,1.5rem); margin-bottom:.2rem; }
.wti-il__subtitle{ color:var(--muted); line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.wti-il__badges{ display:flex; gap:8px; margin-top:.5rem; }
.wti-il__badge{ background:color-mix(in oklab, var(--tag, #c7d2fe) 18%, white); color:#0f172a; border:1px solid var(--tag,#c7d2fe); border-radius:999px; padding:.25rem .6rem; font-size:.82rem; }
.wti-il__date{ background:#f8fafc; color:#0f172a; border:1px solid var(--ring); border-radius:999px; padding:.25rem .6rem; font-size:.82rem; }

/* Rechte Liste */
.wti-il__aside{ position:relative; }
.wti-il__list{ background:var(--card); padding:8px; border-radius:14px; box-shadow:var(--shadow); }
.wti-il__item{ width:100%; display:flex; gap:12px; align-items:flex-start; border-radius:12px; padding:10px; border:1px solid transparent; background:transparent; transition:box-shadow .2s ease, transform .12s ease, border-color .2s ease, background .2s ease; }
.wti-il__item:hover{ background:#f8fafc; border-color:var(--ring); transform:translateY(-1px); }
.wti-il__item.is-active{ outline:2px solid color-mix(in oklab, var(--wti-playlist-title, #0f172a) 25%, transparent); background:#f8fafc; }

.wti-il__thumb{ position:relative; flex:0 0 116px; width:116px; height:66px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#cbd5e1,#94a3b8); }
.wti-il__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Play-Icon entfernt */
.wti-il__play{ display:none !important; }

.wti-il__texts{ min-width:0; flex:1; }
.wti-il__t1{ color:var(--wti-playlist-title, #0f172a); font-weight:800; line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.wti-il__item:hover .wti-il__t1{ color:var(--wti-playlist-title-hover, #0ea5e9); }
.wti-il__t2{ color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wti-il__chips{ display:flex; gap:8px; margin-top:.35rem; }
.wti-il__chip{ background:color-mix(in oklab, var(--tag, #c7d2fe) 18%, white); color:#0f172a; border:1px solid var(--tag,#c7d2fe); border-radius:999px; padding:.2rem .55rem; font-size:.8rem; }
.wti-il__chip--date{ background:#f8fafc; border-color:var(--ring); }

/* Scroll hint rechts zentriert unten */
.wti-il__scrollhint{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; width:64px; height:64px; display:none; opacity:.9; pointer-events:none; z-index:5; }

/* Desktop Height Lock */
@media (min-width:1025px){
  .wti-il__wrap{ align-items:flex-start; }
  .wti-il__aside{ align-self:flex-start; height:100%; display:flex; flex-direction:column; min-height:0; }
  .wti-il__list{ flex:1 1 auto; min-height:0; height:auto; overflow:auto; }
}

/* Mobile: Logo unter Titel */
@media (max-width: 768px){
  .wti-il__wrap{ display:flex; flex-direction:column; gap:12px; }
  .wti-il__meta{ grid-template-columns: 1fr; }
  .wti-il__logo{ justify-content:flex-start; }
  .wti-il__logo img{ width:40%; max-width:40%; }
  .wti-il__thumb{ width:88px; height:50px; }
  .wti-il__item{ padding:8px; gap:10px; }
}

/* Scroll hint ausblenden auf Mobile */
@media (max-width:1024px){ .wti-il__scrollhint{ display:none !important; } }