/* ============================================================
   AUDIONIQUE – gemeinsamer Audio-Player
   Wird von portfolio.html, index.html, hoerprobe.html,
   online-mastering.html und online-mixing.html genutzt.
   Logik: js/player.js
   ============================================================ */

/* Crossfader (Before ↔ After) */
.cf-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:0 2px}
.cf-label{font-family:var(--fm);font-size:9px;letter-spacing:2px;text-transform:uppercase;white-space:nowrap;color:var(--ac);min-width:70px}
.cf-label-r{text-align:right;color:var(--mu)}
.cf-track{flex:1;position:relative;height:4px;background:#1a1a1a;border-radius:2px}
.cf-track-fill{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--ac);border-radius:2px;pointer-events:none;transition:width .05s linear}
.cf-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--ac);border:2px solid #fff;box-shadow:0 0 10px rgba(0,102,255,.5);pointer-events:none;transition:left .05s linear}
.cf-range{position:absolute;left:0;right:0;width:100%;opacity:0;cursor:grab;height:28px;top:-12px;margin:0;pointer-events:all;touch-action:none}
.cf-range:active{cursor:grabbing}
.cf-range:focus-visible+.cf-knob,.cf-track:focus-within .cf-knob{outline:2px solid var(--al);outline-offset:2px}

/* Player-Leiste */
.custom-player{background:var(--bg);border:1px solid var(--bo);padding:16px;display:flex;flex-direction:column;gap:10px}
.cp-top{display:flex;align-items:center;gap:14px}
.cp-play{width:36px;height:36px;background:var(--ac);border:none;color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;pointer-events:all}
.cp-play:hover{background:var(--al)}
.cp-info{flex:1;min-width:0}
.cp-name{font-family:var(--fm);font-size:9px;letter-spacing:1px;color:var(--tx);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-time{font-family:var(--fm);font-size:8px;color:var(--mu);margin-top:2px}
.cp-bar{height:3px;background:#1a1a1a;cursor:pointer;position:relative;pointer-events:all}
.cp-bar::before{content:'';position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.cp-fill{height:100%;background:var(--ac);width:0%;transition:width .1s linear;pointer-events:none}

/* Teaser-Kacheln (Startseite & Landingpages): Player sitzt unten in der Kachel */
.pi{height:auto;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.pi>img{position:absolute;inset:0}
.pi::after{background:linear-gradient(to bottom,rgba(6,6,6,.05) 0%,rgba(6,6,6,.7) 50%,rgba(6,6,6,.95) 100%)}
.pi.pi-more{justify-content:center}
.pi-c{position:relative;z-index:2}
.pi .cf-row{margin:14px 0 10px;gap:8px}
.pi .cf-label{min-width:0;font-size:8px;letter-spacing:1px}
.pi .custom-player{background:rgba(6,6,6,.72);padding:12px;gap:8px;margin-top:14px}
.pi .cf-row+.custom-player{margin-top:0}
.pi .cp-play{width:32px;height:32px;font-size:12px}
.pgrid-more{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px;padding:22px;background:var(--ad);border:1px solid rgba(0,102,255,.2);text-decoration:none;flex-wrap:wrap}
.pgrid-more span:first-child{font-family:var(--fd);font-size:22px;color:var(--ac);letter-spacing:2px}
.pgrid-more span:last-child{font-family:var(--fm);font-size:9px;color:var(--mu);letter-spacing:2px}
.pgrid-more:hover{background:rgba(0,102,255,.16)}
@media(min-width:901px) and (max-width:1200px){.pgrid{grid-template-columns:repeat(2,1fr)}}