/* pool.css — Promo Pool: Zugang, Track-Liste, Player, Upload, Mein Pool.
 * Baut auf den Tokens und Bausteinen aus shared.css auf (cb-btn, cb-input, chip, meldung). */

/* ── Zugang (Landingpage) ─────────────────────────────────────────── */
.pz-box { max-width:480px; margin:28px auto 0; text-align:left; }
#pz-gast { text-align:center; }
#pz-gast .pool-cta-row { justify-content:center; }
.pz-rollen { border:0; padding:0; margin:0 0 6px; display:flex; flex-direction:column; gap:10px; }
.pz-rollen legend { font-weight:600; margin-bottom:10px; }
.pz-check { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--dark); cursor:pointer; line-height:1.4; color:var(--muted); }
.pz-check strong { color:var(--white); }
.pz-check input { margin-top:3px; accent-color:var(--burg); width:18px; height:18px; flex-shrink:0; }
.pz-check[hidden] { display:none; }
.pz-status { color:var(--white); font-size:16px; line-height:1.6; }
.pz-hinweis { color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 4px; }
#pz-wartet .pool-cta-row { margin-top:20px; }

/* ── Pool-Seite ───────────────────────────────────────────────────── */
.pool-app { max-width:1080px; margin:0 auto; padding:110px 20px 140px; }
.pool-app-kopf { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.pool-app-kopf h2 { font-family:var(--f-head); font-weight:800; font-size:clamp(28px,5vw,42px); letter-spacing:-.02em; }
.pool-app-kopf h2 span { color:var(--burg-l); }
.pool-app-links { display:flex; gap:10px; flex-wrap:wrap; }
.pool-app-links .cb-btn, .pool-app-links .cb-btn-sec { padding:10px 18px; font-size:14px; text-decoration:none; }
.pool-app-links [hidden] { display:none; }
.pool-filter { display:grid; grid-template-columns:1fr 200px 220px; gap:10px; margin-bottom:16px; }
.pool-meine { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:-4px 0 14px; font-size:14px; }
.pool-meine .hilfe { color:var(--muted); font-size:13px; }
.pool-meine-wahl { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:16px; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.pool-meine-wahl[hidden] { display:none; }
.pool-liste { display:flex; flex-direction:column; gap:10px; }
.pool-leer { color:var(--muted); padding:28px 0; }

/* Track-Zeile: Farbbalken links zeigt „von dir bewertet“ */
.pt { background:var(--card); border:1px solid var(--border); border-left:4px solid var(--border); border-radius:14px; padding:12px 16px; }
.pt.bewertet { border-left-color:var(--ok); }
.pt-kopf { display:grid; grid-template-columns:132px minmax(0,1fr); gap:16px; align-items:start; }
/* großes Cover, Play-Knopf unten rechts darauf */
.pt-cover { position:relative; width:132px; height:132px; border-radius:10px; background:var(--dark) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-weight:800; color:var(--muted); font-size:36px; }
.pt-cover .pt-play { position:absolute; right:8px; bottom:8px; box-shadow:0 4px 14px rgba(0,0,0,.45); }
.pt-label, .pt-release { color:var(--muted); font-size:13px; margin-top:3px; }
.pt-text { color:var(--white); opacity:.85; font-size:14px; line-height:1.5; margin-top:8px; white-space:pre-line; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Aufgeklappte Karte (Play oder Bewerten): ganzer Text mit Zeilenumbrüchen */
.pt.offen .pt-text { display:block; -webkit-line-clamp:unset; overflow:visible; }
.pt-fuss { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.pt-fuss .pt-meta { margin:0; flex:1 1 180px; }
.pt-neu { padding:3px 9px; border-radius:999px; background:var(--ok); color:var(--black); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.pt-merken { display:inline-flex; gap:6px; align-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--muted); font:600 13px var(--f); cursor:pointer; }
.pt-merken:hover { color:var(--white); border-color:var(--white); }
.pt-merken[aria-pressed="true"] { color:var(--burg-l); border-color:rgba(242,92,36,.5); }
/* Katalog in zwei Spalten; aufgeklappte Karte (Bewerten) über die volle Breite */
@media (min-width:900px) { .pool-liste { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:start; } .pt.offen { grid-column:1 / -1; } }
.pt-info { min-width:0; }
.pt-titel { font-weight:700; font-size:16px; line-height:1.3; overflow-wrap:anywhere; }
.pt-artist { color:var(--white); opacity:.85; font-size:14px; margin-top:2px; overflow-wrap:anywhere; }
.pt-meta { color:var(--muted); font-size:13px; margin-top:4px; overflow-wrap:anywhere; }
.pt-zahlen { color:var(--muted); font-size:13px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pt-aufklappen { padding:9px 16px; font-size:14px; white-space:nowrap; }
.pt-play { width:44px; height:44px; border-radius:50%; border:0; background:var(--burg); color:var(--black); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pt-play:hover { background:var(--burg-l); }
.pt-play.laeuft { background:var(--white); }
.pt-panel { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.pt-panel[hidden] { display:none; }
.pt-beschreibung { color:var(--muted); font-size:14px; line-height:1.6; }
.pt-urteile { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
/* Urteile als große Knöpfe (wie Inflyte): ein Klick, deutlich sichtbar gewählt */
.pt-urteil { padding:14px 10px; border:1px solid var(--border); border-radius:10px; background:var(--dark); color:var(--white);
  font:600 14px var(--f); cursor:pointer; transition:border-color .15s, background .15s; }
.pt-urteil:hover { border-color:var(--burg-l); }
.pt-urteil[aria-pressed="true"] { background:var(--burg); border-color:var(--burg); color:var(--black); }
@media (max-width:600px) { .pt-urteile { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.pt-laden { display:flex; flex-direction:column; gap:8px; }
.pt-laden[hidden], .pt-zusage[hidden] { display:none; }
.pt-zusage { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--white); cursor:pointer; }
.pt-zusage input { margin-top:3px; accent-color:var(--burg); }
.pt-support { border:1px solid rgba(242,92,36,.35); background:var(--burg-g); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.pt-support strong { color:var(--burg-l); font-size:14px; }
.pt-support p { font-size:13px; color:var(--white); line-height:1.5; }
.pt-credit { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pt-credit code { font-family:var(--f); font-size:13px; background:var(--dark); padding:8px 10px; border-radius:8px; overflow-wrap:anywhere; }
.pt-credit .cb-btn-sec { padding:8px 14px; font-size:13px; }
.pt-feedback { resize:vertical; min-height:60px; }
.pt-knoepfe { display:flex; gap:10px; flex-wrap:wrap; }
.pt-knoepfe .cb-btn, .pt-knoepfe .cb-btn-sec { padding:10px 18px; font-size:14px; }
.pt-lossless { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-top:10px; border-top:1px dashed var(--border); }
.pt-lossless .cb-btn-sec { padding:9px 16px; font-size:13px; }
.pt-hilfe { color:var(--muted); font-size:12px; line-height:1.5; }

@media (max-width:760px) {
  .pool-filter { grid-template-columns:1fr; }
  .pt-kopf { grid-template-columns:96px minmax(0,1fr); gap:12px; }
  .pt-cover { width:96px; height:96px; font-size:28px; }
  .pt-zahlen { white-space:normal; text-align:left; }
}

/* ── Player-Leiste ────────────────────────────────────────────────── */
.pp-bar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:48px minmax(0,220px) auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px 16px; background:rgba(15,13,19,.97); border-top:1px solid var(--border); backdrop-filter:blur(10px); }
.pp-bar[hidden] { display:none; }
.pp-cover { width:48px; height:48px; border-radius:6px; background:var(--dark) center/cover no-repeat; }
.pp-info { min-width:0; }
.pp-titel { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-artist { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-steuer { display:flex; gap:6px; align-items:center; }
.pp-knopf { background:transparent; border:0; color:var(--white); cursor:pointer; font-size:13px; padding:8px; border-radius:8px; }
.pp-knopf:hover { background:var(--dim); }
.pp-play { width:40px; height:40px; border-radius:50%; background:var(--burg); color:var(--black); font-size:14px; }
.pp-play:hover { background:var(--burg-l); }
.pp-zeit { display:flex; gap:10px; align-items:center; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pp-leiste { flex:1; accent-color:var(--burg); min-width:0; }
/* Wellenform: Bild unten, die Leiste liegt unsichtbar darüber (Klick, Ziehen, Tastatur, Screenreader) */
.pp-welle { flex:1; min-width:0; position:relative; display:flex; align-items:center; }
.pp-welle canvas { display:none; width:100%; height:44px; }
.pp-bar.mit-welle .pp-welle canvas { display:block; }
.pp-bar.mit-welle .pp-leiste { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
@media (max-width:760px) {
  .pp-bar { grid-template-columns:40px minmax(0,1fr) auto auto; gap:10px; }
  .pp-cover { width:40px; height:40px; }
  .pp-zeit { grid-column:1 / -1; grid-row:2; }
}

/* ── Upload und Mein Pool ─────────────────────────────────────────── */
.pool-seite { flex:1; width:100%; max-width:760px; margin:0 auto; padding:110px 20px 140px; }
.pool-seite h1 { font-family:var(--f-head); font-weight:800; font-size:clamp(28px,5vw,40px); letter-spacing:-.02em; margin-bottom:8px; }
.pool-seite .unter { color:var(--muted); line-height:1.6; margin-bottom:24px; }
.pool-seite h2 { font-family:var(--f-head); font-weight:800; font-size:22px; margin:36px 0 14px; }
.pool-form { display:flex; flex-direction:column; gap:18px; }
.pool-form .zwei { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px) { .pool-form .zwei { grid-template-columns:1fr; } }
.datei-feld { border:2px dashed var(--border); border-radius:14px; padding:24px; text-align:center; background:var(--dark); cursor:pointer; color:var(--muted); line-height:1.5; }
.datei-feld.aktiv, .datei-feld:hover { border-color:var(--burg); }
.datei-feld strong { color:var(--white); display:block; margin-bottom:4px; overflow-wrap:anywhere; }
.datei-feld input { display:none; }
.cover-feld { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.cover-vorschau { width:96px; height:96px; border-radius:10px; background:var(--dark) center/cover no-repeat; border:1px solid var(--border); flex-shrink:0; }
.fortschritt { height:8px; border-radius:999px; background:var(--dim); overflow:hidden; }
.fortschritt div { height:100%; width:0; background:var(--burg); transition:width .2s; }
.fortschritt-text { color:var(--muted); font-size:13px; margin-top:6px; font-variant-numeric:tabular-nums; }
.schalter { display:flex; gap:10px; align-items:center; color:var(--white); cursor:pointer; }
.schalter input { width:18px; height:18px; accent-color:var(--burg); }
.pu-rechte { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--card); font-size:14px; line-height:1.55; cursor:pointer; }
.pu-rechte input { width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--burg); }
.pu-rechte strong { color:var(--white); }
.cover-warnung { margin-top:6px; padding:8px 12px; border-radius:8px; background:rgba(242,196,36,.12); border:1px solid rgba(242,196,36,.45); color:#f2d27a; font-size:13px; line-height:1.5; }
.cover-warnung[hidden] { display:none; }

/* Mein Pool: eigene Tracks mit Status-Balken */
.mt { background:var(--card); border:1px solid var(--border); border-left:4px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.mt.pending { border-left-color:var(--burg); }
.mt.approved { border-left-color:var(--ok); }
.mt.rejected { border-left-color:var(--fehler); }
.mt-kopf { display:grid; grid-template-columns:44px 56px minmax(0,1fr) auto; gap:14px; align-items:center; }
.mt-status { font-size:13px; font-weight:600; white-space:nowrap; }
.mt.pending .mt-status { color:var(--burg-l); }
.mt.approved .mt-status { color:var(--ok); }
.mt.rejected .mt-status { color:var(--fehler); }
.mt.archived .mt-status { color:var(--muted); }
.mt-details { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.mt-zeilen { display:flex; flex-direction:column; gap:6px; }
.mt-zeile { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; font-size:14px; padding:8px 10px; background:var(--dark); border-radius:8px; }
.mt-zeile .name { font-weight:600; overflow-wrap:anywhere; }
.mt-zeile .fb { grid-column:1 / -1; color:var(--muted); font-style:italic; overflow-wrap:anywhere; }
.mt-zeile .rechts { color:var(--muted); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mt-leer { color:var(--muted); font-size:14px; }
.mt-knoepfe { display:flex; gap:10px; }
.mt-knoepfe .cb-btn-sec { padding:8px 14px; font-size:13px; }
@media (max-width:600px) {
  .mt-kopf { grid-template-columns:44px 48px minmax(0,1fr); }
  .mt-status { grid-column:1 / -1; }
  .mt-zeile { grid-template-columns:minmax(0,1fr) auto; }
  .mt-zeile .name { grid-column:1 / -1; }
  .mt-zeile .rechts { text-align:left; }
}

/* Formular-Kästen auf den Pool-Unterseiten linksbündig wie der übrige Inhalt */
.pool-seite .auth-box { margin:0; max-width:none; }