/* /musik/ und der Hörprobe-Abschnitt der Startseite.
   Zwei Farbkontexte: /musik/ läuft im hellen Inhaltsbereich des Themes,
   der Startseiten-Abschnitt auf dunklem Grund. Die Karte ist dieselbe,
   nur die Tokens wechseln. Formensprache wie /mixtapes/ und /links/:
   Bebas Neue für Titel, 1px-Radius, dünner Rahmen, Marken-Lila #9777D0. */

.dnmu-liste,
.dnmu-home{
  --dnmu-ink:#0F0F10;
  --dnmu-meta:rgba(15,15,16,.62);
  --dnmu-linie:rgba(15,15,16,.20);
  --dnmu-flaeche:rgba(15,15,16,.03);
  --dnmu-akzent:#9777D0;
  --dnmu-auf-akzent:rgba(255,255,255,.98);
  --dnmu-display:"Bebas Neue","Arial Narrow",Impact,Inter,sans-serif;
}

/* Der Abschnitt auf der Startseite steht auf Fastschwarz. */
.dnmu-home{
  --dnmu-ink:#FFFFFF;
  --dnmu-meta:rgba(255,255,255,.64);
  --dnmu-linie:rgba(255,255,255,.34);
  --dnmu-flaeche:rgba(255,255,255,.04);
  --dnmu-auf-akzent:rgba(15,15,16,.92);
}

.dnmu-liste{display:grid;gap:1rem;margin:0 0 1.5rem}

.dnmu-karte{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:1rem;
  align-items:start;
  border:1px solid var(--dnmu-linie);
  border-radius:1px;
  background:var(--dnmu-flaeche);
  padding:1rem;
  color:var(--dnmu-ink);
}

/* Läuft der Player, braucht er die volle Breite. */
.dnmu-karte.dnmu-karte-an{grid-template-columns:1fr}

.dnmu-fassade{position:relative;min-width:0}

.dnmu-play{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:none;
  cursor:pointer;
  position:relative;
  line-height:0;
}
.dnmu-cover{
  display:block;
  aspect-ratio:1/1;          /* hält die Höhe fest, bevor das Bild da ist */
  overflow:hidden;
  border-radius:1px;
  background:var(--dnmu-flaeche);
}
.dnmu-cover-bild{width:100%;height:100%;object-fit:cover;display:block}
.dnmu-cover-leer{
  display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  font:400 2rem/1 var(--dnmu-display);color:var(--dnmu-akzent);
}

.dnmu-play-kreis{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;
  border-radius:50%;
  background:var(--dnmu-akzent);
  color:var(--dnmu-auf-akzent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 14px rgba(0,0,0,.35);
  transition:transform .18s ease;
}
.dnmu-play:hover .dnmu-play-kreis{transform:translate(-50%,-50%) scale(1.06)}
.dnmu-play:focus-visible{outline:2px solid var(--dnmu-akzent);outline-offset:3px}

.dnmu-datenschutz{
  margin:.6rem 0 0;
  font:400 .78rem/1.45 Inter,sans-serif;
  color:var(--dnmu-meta);
  border:1px solid var(--dnmu-linie);
  border-radius:1px;
  padding:.7rem .8rem;
  background:var(--dnmu-flaeche);
}
.dnmu-ok{
  display:inline-block;
  margin:.55rem 0 0;
  font:400 .82rem/1 Inter,sans-serif;
  color:var(--dnmu-ink);
  background:transparent;
  border:1px solid var(--dnmu-linie);
  border-radius:1px;
  padding:.55rem .8rem;
  cursor:pointer;
}
.dnmu-ok:hover{background:var(--dnmu-akzent);color:var(--dnmu-auf-akzent);border-color:var(--dnmu-akzent)}
.dnmu-ok:focus-visible{outline:2px solid var(--dnmu-akzent);outline-offset:2px}

.dnmu-iframe{display:block;width:100%;height:120px;border:0;margin:0}
.dnmu-fassade.dnmu-an .dnmu-play{display:none}

.dnmu-text{min-width:0}
.dnmu-titel{
  margin:0;
  font:400 clamp(22px,5vw,28px)/1.06 var(--dnmu-display);
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--dnmu-ink);
}
.dnmu-meta{margin:.3rem 0 0;font:400 .8rem/1.4 Inter,sans-serif;color:var(--dnmu-meta)}
.dnmu-beschreibung{margin:.55rem 0 0;font:400 .9rem/1.5 Inter,sans-serif;color:var(--dnmu-ink)}
.dnmu-leer{color:var(--dnmu-meta)}

/* Startseiten-Abschnitt */
.dnmu-home{
  background:#0F0F10;
  padding:clamp(2.5rem,8vw,4.5rem) 0;
}
.dnmu-home-innen{
  max-width:1140px;                 /* Elementor-Rahmen der Startseite */
  margin:0 auto;
  padding:0 20px;
}
.dnmu-home-titel{
  margin:0 0 1.25rem;
  font:400 clamp(32px,8vw,54px)/.98 var(--dnmu-display);
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#FFFFFF;
}
.dnmu-karte-gross{grid-template-columns:1fr;gap:1rem}
.dnmu-karte-gross .dnmu-cover{aspect-ratio:16/10}
.dnmu-karte-gross .dnmu-play-kreis{width:56px;height:56px}
.dnmu-home-mehr{margin:1.1rem 0 0}
.dnmu-link{
  display:inline-block;
  font:400 .92rem/1 Inter,sans-serif;
  letter-spacing:.4px;
  color:#FFFFFF;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.34);
  border-radius:1px;
  padding:.8rem 1.1rem;
}
.dnmu-link:hover,.dnmu-link:focus-visible{background:var(--dnmu-akzent);color:rgba(15,15,16,.92);border-color:var(--dnmu-akzent)}

/* Der Strich vor dem Eyebrow, wörtlich wie auf den Landingpages. */
.dnmu-home .dn-eyebrow{display:flex;align-items:center;gap:.8rem;margin:0 0 14px 0}
.dnmu-home .dn-eyebrow-tick{width:36px;height:1px;background:#FFFFFF;flex-shrink:0;display:block}
.dnmu-home .dn-eyebrow-txt{font-family:Inter,sans-serif;font-size:.6rem;letter-spacing:.35em;text-transform:uppercase;color:#FFFFFF}
@media (max-width:767px){
  .dnmu-home .dn-eyebrow{margin-bottom:10px}
  .dnmu-home .dn-eyebrow-tick{width:24px}
}

@media (min-width:768px){
  .dnmu-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
  .dnmu-karte{grid-template-columns:120px 1fr}
  .dnmu-karte-gross{grid-template-columns:340px 1fr;align-items:center}
  .dnmu-karte-gross .dnmu-cover{aspect-ratio:1/1}
}

@media (prefers-reduced-motion:reduce){
  .dnmu-play-kreis{transition:none}
}

/* Kopfbereich von /musik/ an die übrigen Unterseiten angleichen.
   Wörtlich dieselbe Behandlung, die Eintrag E (27026) für Impressum und
   Datenschutz fährt: das Bild sitzt auf header.top_panel, das Titelband
   selbst bleibt bildlos. E wird auf dieser Route nicht ausgeliefert,
   deshalb steht die Regel hier und nicht dort. */
body.page-id-27037 .sc_layouts_title{
  background-image:none !important;
  min-height:0 !important;
  position:static !important;
}
body.page-id-27037 header.top_panel{
  background-image:url('https://dj-danero.de/wp-content/uploads/2026/05/Aachen-bei-Nacht-2-copy.webp') !important;
  background-size:cover !important;
  background-position:center 45%;
  background-repeat:no-repeat !important;
}
/* Ohne das steht das Logo doppelt: das Theme-Logo und das eigene
   #dn-mobile-logo. Eintrag C blendet auf den Landingpages genau so aus. */
body.page-id-27037 .sc_layouts_logo{display:none !important;}