/* =====================================================================
   musik.css
   Die Musikseite (pages/musik.php).
   Angelegt am 23.09.2026.

   Grundlage ist assets/css/tafel.css: blauer Seitenverlauf bleibt
   sichtbar, der Inhalt sitzt auf einer dunklen Tafel, Poppins als
   Schrift. Dieselbe Sprache wie Community und Spendenseite.

   Der Aufbau der Seite ist unveraendert. Aus dem Regal mit den nackten
   Huellen sind Karten geworden, damit jede Platte fuer sich steht.

   Eine Regel bleibt streng wie vorher: Das Tuerkis gehoert dem
   Verkauf. Es steht am Preis und am Kaufen-Knopf, sonst nur an
   Bedienelementen, die etwas ausloesen.

   Die alte Gestaltung steht in musik.php weiter drin, ist dort aber
   mit if (false) abgeschaltet.
   ===================================================================== */

main.kat-main{
  padding:clamp(10px,2vw,22px) clamp(10px,2vw,20px) clamp(28px,4vw,48px) !important;
  align-items:stretch !important;max-width:100% !important;text-align:left !important;
}

.kat{
  --grund:transparent;
  --text:var(--tf-text,#FFFFFF);
  --leise:var(--tf-leise,#B6C4D4);
  --stumm:var(--tf-stumm,#8195A9);
  --linie:var(--tf-linie,rgba(255,255,255,.12));
  --kasse:var(--tf-kasse,#00FFFF);

  font-family:var(--tf-schrift,'Poppins',Arial,sans-serif);
  color:var(--text);background:transparent;
  font-size:17px;line-height:1.7;text-align:left;letter-spacing:normal;
}
.kat *{letter-spacing:normal;box-sizing:border-box}
.kat h1,.kat h2,.kat h3{
  font-family:inherit !important;text-transform:none !important;text-shadow:none !important;
  animation:none !important;background:none !important;
  -webkit-text-fill-color:currentColor !important;letter-spacing:normal !important;
}
/* Die globale style.css klebt jedes header fest. Im Inhalt gilt das nicht. */
.kat header,
.kat-kopf{position:static !important;z-index:auto !important;top:auto !important}

/* Alles steht auf einer Tafel */
.kat-rand{
  max-width:1280px;margin:0 auto;
  padding:clamp(26px,4vw,48px) clamp(18px,3vw,44px);
  background:linear-gradient(180deg, var(--tf-tafel-1,rgba(10,16,28,.72)) 0%, var(--tf-tafel-2,rgba(6,10,18,.82)) 100%);
  border:1px solid var(--tf-rand,rgba(0,255,255,.16));
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
/* ================== Kopfzeile ================== */
.kat-kopf{
  padding:0 0 clamp(1.4rem,2.5vw,2rem);
  border-bottom:1px solid var(--linie);
}
.kat-marke{
  display:flex;align-items:center;gap:.9rem;margin:0 0 1rem;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--stumm);
}
.kat-marke::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, rgba(0,255,255,.3), rgba(0,255,255,0));
}
.kat-kopf h1{
  margin:0;font-size:clamp(1.9rem,5vw,2.9rem);font-weight:700;line-height:1.08;color:var(--text);
  text-shadow:0 2px 20px rgba(0,255,255,.16);
}
.kat-zeile{
  margin:.7rem 0 0;font-size:.98rem;color:var(--stumm);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
}
.kat-zeile b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.kat-satz{margin:1rem 0 0;font-size:1.02rem;color:var(--leise);line-height:1.75;max-width:62ch}

.kat-band{
  margin:1.2rem 0 0;padding:.9rem 1.1rem;
  border:1px solid rgba(0,255,255,.3);border-radius:12px;
  background:rgba(0,255,255,.06);
  font-size:.98rem;color:var(--leise);
}
.kat-band a{color:var(--kasse);text-decoration:none;border-bottom:1px solid currentColor}
.kat-band .spar{color:var(--kasse);font-weight:600;font-variant-numeric:tabular-nums}

/* ================== Suche und Sortierung ================== */
.kat-leiste{padding:clamp(1.4rem,3vw,2rem) 0 0}
.kat-suchreihe{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:flex-end}
.kat-suchfeld{flex:1 1 320px;min-width:0;display:grid;gap:.4rem;font-size:.85rem;color:var(--stumm)}
.kat-suchfeld input{
  width:100%;background:var(--tf-innen-tief,rgba(0,0,0,.26));
  border:1px solid var(--linie);border-radius:12px;color:var(--text);
  font:inherit;font-size:1rem;padding:.7rem .9rem;
  transition:border-color .2s,box-shadow .25s,background .2s;
}
.kat-suchfeld input::placeholder{color:var(--stumm)}
.kat-suchfeld input:focus{
  outline:none;border-color:rgba(0,255,255,.5);background:rgba(0,0,0,.34);
  box-shadow:0 0 0 3px rgba(0,255,255,.1);
}
.kat-sortfeld{display:grid;gap:.4rem;font-size:.85rem;color:var(--stumm)}
.kat-sortfeld select{
  background:var(--tf-innen-tief,rgba(0,0,0,.26));
  border:1px solid var(--linie);border-radius:12px;color:var(--text);
  font:inherit;font-size:1rem;padding:.7rem 2.2rem .7rem .9rem;cursor:pointer;
  transition:border-color .2s;
}
.kat-sortfeld select:focus{outline:none;border-color:rgba(0,255,255,.5)}
.kat-sortfeld option{background:#131A26;color:var(--text)}

.kat-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin-top:1.2rem}
.kat-reihe-name{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stumm);margin-right:.4rem;
}
.marke{
  font:inherit;font-size:.92rem;background:rgba(255,255,255,.04);
  border:1px solid var(--linie);border-radius:999px;
  padding:.35rem .9rem;cursor:pointer;color:var(--leise);
  transition:border-color .2s,color .2s,background .2s;
}
.marke:hover{color:var(--text);border-color:rgba(0,255,255,.45)}
.marke[aria-pressed="true"]{
  color:#07131A;background:var(--kasse);border-color:var(--kasse);font-weight:600;
}
.marke:focus-visible{outline:2px solid var(--kasse);outline-offset:3px}

.kat-ergebnis{
  margin-top:1.2rem;font-size:.95rem;color:var(--stumm);
  display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;
}
.kat-ergebnis b{color:var(--text);font-weight:600}
.kat-zuruecksetzen{
  font:inherit;font-size:.92rem;background:none;border:0;padding:0;cursor:pointer;
  color:var(--leise);border-bottom:1px solid var(--linie);
  transition:color .2s,border-color .2s;
}
.kat-zuruecksetzen:hover{color:var(--kasse);border-bottom-color:var(--kasse)}

/* ================== Das Regal ================== */
.kat-regal{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1rem;padding:clamp(1.6rem,3vw,2.4rem) 0 0;
}
@media (max-width:1180px){ .kat-regal{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .kat-regal{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .kat-regal{grid-template-columns:1fr} }

/* Jede Platte ist jetzt eine Karte */
.huelle{
  display:flex;flex-direction:column;min-width:0;
  padding:.9rem .9rem 1.1rem;border-radius:16px;
  border:1px solid var(--linie);
  background:rgba(255,255,255,.04);
  transition:border-color .25s,box-shadow .3s,transform .2s;
}
.huelle[hidden]{display:none}
.huelle:hover{
  transform:translateY(-3px);border-color:rgba(0,255,255,.45);
  box-shadow:0 14px 32px rgba(0,0,0,.5), 0 0 24px rgba(0,255,255,.14);
}
.huelle.laeuft{border-color:var(--kasse);box-shadow:0 0 26px rgba(0,255,255,.22)}

.huelle-bild{
  position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;
  background:rgba(0,0,0,.3);border:1px solid var(--linie);
}
.huelle:hover .huelle-bild{border-color:rgba(0,255,255,.35)}
.huelle-bild img{width:100%;height:100%;object-fit:cover;display:block}

.huelle-knopf{
  position:absolute;inset:0;border:0;background:rgba(6,10,18,.15);
  cursor:pointer;display:grid;place-items:center;transition:background .25s;
}
.huelle-knopf span{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:rgba(0,255,255,.92);color:#07131A;font-size:1.4rem;
  opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.huelle-bild:hover .huelle-knopf{background:rgba(6,10,18,.45)}
.huelle-bild:hover .huelle-knopf span,
.huelle-knopf:focus-visible span{opacity:1;transform:scale(1)}
.huelle.laeuft .huelle-knopf{background:rgba(6,10,18,.5)}
.huelle.laeuft .huelle-knopf span{opacity:1;transform:scale(1)}

.huelle-lauf{
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background:rgba(255,255,255,.14);opacity:0;transition:opacity .2s;
}
.huelle.laeuft .huelle-lauf{opacity:1}
.huelle-lauf i{display:block;height:100%;width:0;background:var(--kasse);box-shadow:0 0 12px rgba(0,255,255,.7)}

.huelle-neu{
  position:absolute;top:.6rem;left:.6rem;border-radius:6px;
  background:var(--kasse);color:#07131A;
  font-size:.68rem;font-weight:700;letter-spacing:.14em !important;text-transform:uppercase;
  padding:.24rem .55rem;box-shadow:0 4px 14px rgba(0,0,0,.5);
}

/* ---------- Die Daten unter der Huelle ---------- */
.huelle-nr{
  margin:.9rem 0 .4rem;font-size:.7rem;font-weight:700;
  letter-spacing:.18em !important;text-transform:uppercase;color:var(--stumm);
  font-variant-numeric:tabular-nums;
}
.huelle-titel{margin:0;font-size:1.12rem;font-weight:600;line-height:1.35;min-height:2.7em;color:var(--text)}
.huelle-daten{margin:.45rem 0 0;font-size:.92rem;color:var(--leise);font-variant-numeric:tabular-nums}
/* Die ISRC steht klein darunter, wie die Matrizennummer in der
   Auslaufrille einer Platte. Sie soll da sein, nicht auffallen. */
.huelle-isrc{
  margin:.3rem 0 0;font-size:.74rem;color:var(--stumm);
  letter-spacing:.08em !important;font-variant-numeric:tabular-nums;cursor:help;
}

/* ---------- Kasse ---------- */
.huelle-kasse{margin-top:1rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;min-height:1.9rem}
.preis{
  font-size:1.7rem;font-weight:700;color:var(--kasse);line-height:1;
  font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(0,255,255,.35);
}
.preis-alt{font-size:.95rem;color:var(--stumm);text-decoration:line-through;font-variant-numeric:tabular-nums}
.nur-stream{font-size:.95rem;color:var(--stumm)}

.huelle-tun{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.9rem}
.kaufen{
  font:inherit;font-size:.95rem;font-weight:700;
  background:linear-gradient(135deg,#7DFFF6 0%,#00FFFF 35%,#00A8CC 100%);
  color:#062026;border:none;border-radius:10px;
  padding:.6rem 1.3rem;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.4), 0 0 18px rgba(0,255,255,.2);
  transition:transform .15s,box-shadow .3s,filter .3s;
}
.kaufen:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.45), 0 0 30px rgba(0,255,255,.45);filter:brightness(1.05)}
.kaufen:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.kaufen.fertig{background:rgba(255,255,255,.14);color:var(--text);box-shadow:none}
.probe{
  font:inherit;font-size:.95rem;background:none;border:0;padding:.6rem 0;cursor:pointer;
  color:var(--leise);border-bottom:1px solid var(--linie);
  transition:border-color .2s,color .2s;font-variant-numeric:tabular-nums;
}
.probe:hover{color:var(--text);border-bottom-color:var(--text)}
.probe:focus-visible{outline:2px solid var(--kasse);outline-offset:3px}

/* ---------- Streamdienste, erst beim Abspielen ---------- */
.huelle-stream{
  display:none;margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--linie);
  font-size:.88rem;color:var(--stumm);
}
.huelle.laeuft .huelle-stream{display:block}
.huelle-stream a{color:var(--leise);text-decoration:none;border-bottom:1px solid var(--linie)}
.huelle-stream a:hover{color:var(--text);border-bottom-color:var(--text)}

/* ---------- Schluss ---------- */
.kat-notiz{
  border-top:1px solid var(--linie);
  margin-top:clamp(1.8rem,3vw,2.6rem);
  padding:clamp(1.6rem,3vw,2.2rem) 0 0;
  font-size:.98rem;color:var(--stumm);max-width:62ch;line-height:1.75;
}
.kat-notiz a{color:var(--leise);text-decoration:none;border-bottom:1px solid var(--linie)}
.kat-notiz a:hover{color:var(--text);border-bottom-color:var(--text)}
.kat-leer{padding:3rem 0;color:var(--leise);font-size:1.05rem}

@media (max-width:640px){
  .kat-reihe-name{flex:0 0 100%;margin-bottom:.2rem}
  .kat-rand{padding:22px 16px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .kat *{transition:none !important;animation:none !important}
  .huelle:hover,.kaufen:hover{transform:none}
}