/* =========================================================
   Songs mit Cover + Play (Team-Bereich und Referenzen-Seite)
   Effekte nur über Deckkraft und Bewegung (transform)
   ========================================================= */
.tr{min-width:0;list-style:none;margin:0;padding:0}
.tr-cover{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:linear-gradient(150deg,#1c1c24,#121218);box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.06)}
.tr-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tr-ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;font-family:'Archivo Black',sans-serif;font-size:14px;line-height:1.12;text-transform:uppercase;color:rgba(255,255,255,.88);background:linear-gradient(150deg,#2b2150,#15141c 72%);overflow-wrap:anywhere;text-align:left}
.tr-play{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:10px!important;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tr-play:focus{outline:none}
.tr-play:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.tr-ic{position:absolute;right:9px;bottom:9px;width:42px;height:42px;border-radius:50%;background:#6C4CF5;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.45);transition:transform .18s ease}
.tr-ic i{font-size:20px;line-height:1;display:block}
.tr-ic .i-pause{display:none}
.tr-play.is-playing .i-play{display:none}
.tr-play.is-playing .i-pause{display:block}
@media(hover:hover) and (pointer:fine){.tr-play:hover .tr-ic{transform:scale(1.08)}}
.tr.is-current .tr-cover{box-shadow:0 0 0 2px #6C4CF5,0 8px 22px rgba(108,76,245,.38)}
.tr-p{margin-top:9px;font-family:'Archivo',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7C6CF5;line-height:1.3}
.tr-p+.tr-t{margin-top:3px}
.tr-t{margin-top:9px;font-family:'Archivo',sans-serif;font-weight:500;font-size:14px;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tr-a{margin-top:2px;font-family:'Archivo',sans-serif;font-weight:300;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Zum Durchwischen (Team-Bereich) ---------- */
.trs{position:relative;--trw:150px;margin:0 0 12px}
.trs-list{display:grid;grid-auto-flow:column;grid-auto-columns:var(--trw);gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0;padding:2px 2px 6px;list-style:none}
.trs-list::-webkit-scrollbar{display:none}
.trs-list>.tr{scroll-snap-align:start}
.trs-nav{display:none}
@media(hover:hover) and (pointer:fine){
  .trs-nav{-webkit-appearance:none;appearance:none;position:absolute;top:calc(var(--trw) / 2 - 16px);z-index:2;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%!important;border:1px solid rgba(255,255,255,.16);background:rgba(20,20,26,.94);color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.5);transition:opacity .2s,transform .18s}
  .trs-nav.prev{left:-14px}
  .trs-nav.next{right:-14px}
  .trs-nav i{font-size:18px}
  .trs-nav:hover{transform:scale(1.08)}
  .trs-nav:disabled{opacity:0;pointer-events:none}
  .trs-nav:focus-visible{outline:2px solid #6C4CF5;outline-offset:2px}
}
@media(max-width:600px){.trs{--trw:min(40vw,170px)}}

/* ---------- Player-Leiste unten (erscheint erst nach dem ersten Klick auf Play) ---------- */
.tp-bar{position:fixed;left:50%;bottom:16px;z-index:100001;width:min(480px,calc(100% - 24px));transform:translate(-50%,18px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
.tp-bar.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.tp-embed{height:80px;border-radius:12px;overflow:hidden;background:#121212;box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.tp-embed iframe{display:block;width:100%;height:80px;border:0}
.tp-close{-webkit-appearance:none;appearance:none;position:absolute;top:-13px;right:-9px;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%!important;border:1px solid rgba(255,255,255,.22);background:#1f1f24;color:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent}
.tp-close::after{content:'';position:absolute;inset:-8px}
.tp-close i{font-size:16px}
.tp-close:focus-visible{outline:2px solid #6C4CF5;outline-offset:2px}
@media(max-width:600px){.tp-bar{bottom:10px}.tp-close{right:2px}}
@media(max-width:900px){html.tp-open #tdmTop.show{transform:translateY(-96px)}}