/* ═══════════════════════════════════════════════════════════════════════
   SEKTIONSGRUPPE „MUSIK" — [tp_bands] + [tp_alben]
   Kontrast-Rhythmus · Stand 2026-08-07

   Material-Rhythmus der Seite (kein Kapitel wie sein Nachbar):
     Hero  --photo (dunkel)
     Bands --light  Papier + Rasterlinien, helle Karten
     DJ    --sand   tieferes Papier, kurzes Kapitel (--tight), weiße Akzentkarte
     Alben --dark   Maschinenblau, dunkle Karten
     Push  --ink    (Footer-CTA, gehört dem Fundament)

   Tonwerte:
   · tp_bands  = HELL  (Papier-Kapitel, helle Band-Karten im .nb-day-Muster,
                        Foto oben, Hairline, 12 px Radius; DJ-Karten = weiße
                        Akzentkarten mit roter Topline)
   · tp_alben  = DUNKEL (Akzentkapitel Nacht/Sound, Karten im .nb-card-Muster,
                        Studio-Easter-Egg + Studio-Modal dunkel im System)

   Kapitelköpfe (.tp-bands__head/__h/__count) kommen aus neuaufbau.css —
   hier stehen nur die Ergänzungen (EQ-Bars, DJ-Abstand).
   Ersetzt die drei Inline-<style>-Blöcke in treckerparty-design.php
   (tp_bands_shortcode + tp_alben_shortcode). <script>-Blöcke bleiben.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ KAPITEL BANDS (HELL) ═══════════ */

/* ── EQ-Bars im Kapitelkopf — Animation bleibt, Farben ins System ──
   Der Fundament-Kopf ist eine zentrierte Spalte (count order:1, h order:2);
   die Bars rücken als dritte Zeile mittig darunter. */
.tp-bands .tp-eqbars{
  order: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 34px;
  margin-top: 22px;
}
.tp-eqbars span{
  display: block;
  width: 5px;
  height: var(--h, 60%);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--nb-red-lift) 0%, var(--nb-red) 55%, var(--nb-red-dark) 100%);
  transform: scaleY(.12);
  transform-origin: bottom;
  box-shadow: none;
}
html.tp-anim .tp-eq-sec.is-live .tp-eqbars span{
  animation: tpEqPulse 1.05s var(--nb-ease) infinite alternate;
  animation-delay: var(--d, 0s);
}
html:not(.tp-anim) .tp-eqbars span,
html.tp-anim .tp-eq-sec:not(.is-live) .tp-eqbars span{ transform: scaleY(1); }
@keyframes tpEqPulse{ from{ transform: scaleY(.28); } to{ transform: scaleY(1); } }
@media (max-width: 640px){
  .tp-bands .tp-eqbars{ height: 26px; gap: 3px; }
  .tp-eqbars span{ width: 4px; }
}

/* DJ-Kapitel ist seit dem Neuaufbau eine EIGENE Sektion (--sand, --tight).
   Der alte Abstand nach oben ist damit hinfällig. */
.tp-bands__head--dj{ margin-top: 0; }

/* ── Band-Grid — 6 Spuren, jede Karte über 2 ──
   Warum 6 statt 3: nur so lässt sich eine angebrochene letzte Reihe MITTIG
   setzen (eine Karte startet in Spur 3, zwei Karten starten in Spur 2).
   Damit gibt es keine Waisen-Reihe, die links am Rand klebt — egal, wie viele
   Acts im internen Bereich gepflegt sind. Die Kartenbreite ist rechnerisch
   identisch mit einem 3-Spalten-Raster (2/6 + ein Steg). */
/* Doppelklasse: das Kadence-Theme setzt `.single-content ul { margin: 0 0 X }`
   mit (0,1,1) und hängt sonst einen Fremd-Abstand unter jedes Grid. */
.tp-bands .tp-bands__grid,
.tp-bands__grid{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--tp-gap-lg) var(--nb-gap);
  align-items: stretch;
}
.tp-bands__grid > *{ grid-column: span 2; }
/* letzte Reihe = 1 Karte  → mittig  (Spur 3–4) */
.tp-bands__grid > :last-child:nth-child(3n + 1){ grid-column: 3 / span 2; }
/* letzte Reihe = 2 Karten → mittig  (Spur 2–3 und 4–5) */
.tp-bands__grid > :nth-last-child(2):nth-child(3n + 1){ grid-column: 2 / span 2; }

/* Ein einzelner DJ steht auf der Mittelachse (Spur 2–5), zwei stehen paarig. */
/* Doppelklasse: sonst schlägt `.single-content ul{margin:0 0 X}` des Themes
   (0,2,0) das margin-inline:auto hier (0,1,0) — das DJ-Raster hing dann links
   an der Containerkante, 276 px Loch rechts unter zentrierter Überschrift. */
.tp-bands .tp-bands__grid--dj,
.tp-bands__grid--dj{ max-width: 960px; margin-inline: auto; }
/* Doppelklasse nötig: Die Waisen-Regeln des BAND-Rasters weiter oben sind mit
   (0,2,0) spezifischer als ein einfaches `.tp-bands__grid--dj > *` und haben
   im DJ-Raster zugeschlagen — die erste DJ-Kachel wurde dadurch auf span 2
   gestaucht (gemessen 304px neben 468px), obwohl beide gleich breit sein
   sollen. Mit der Doppelklasse gewinnt hier das DJ-Raster. */
.tp-bands .tp-bands__grid--dj > *,
.tp-bands__grid--dj > *{ grid-column: span 3; }
.tp-bands .tp-bands__grid--dj > :last-child:nth-child(2n + 1),
.tp-bands__grid--dj > :last-child:nth-child(2n + 1){ grid-column: 2 / span 4; }
/* Eine EINZELNE DJ-Kachel (z. B. wenn nur ein DJ auflegt oder zwei Auftritte
   desselben DJs zusammengefasst wurden) füllte die volle Mittelspur und war
   mit 632px breiter als jede Bandkachel. Sie bekommt deshalb dieselbe Breite
   wie eine gepaarte DJ-Kachel und steht mittig darin. */
.tp-bands .tp-bands__grid--dj > :only-child,
.tp-bands__grid--dj > :only-child{
  grid-column: 2 / span 4;
  /* width:100% ist nötig: Die Karte ist ein Flex-Container und richtet sich
     sonst nach ihrem Inhalt (gemessen 301px statt 468px). justify-self
     zentriert sie in der zugewiesenen Spur. */
  width: 100%;
  max-width: 468px;
  justify-self: center;
}

/* ── Tablet: 2 Karten pro Reihe (4 Spuren), Waise mittig ── */
@media (max-width: 1000px){
  .tp-bands__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tp-bands__grid > *,
  .tp-bands__grid > :nth-last-child(2):nth-child(3n + 1){ grid-column: span 2; }
  .tp-bands__grid > :last-child:nth-child(3n + 1),
  .tp-bands__grid > :last-child:nth-child(2n + 1){ grid-column: 2 / span 2; }
  .tp-bands__grid--dj > *,
  .tp-bands__grid--dj > :last-child:nth-child(2n + 1){ grid-column: 1 / -1; }
}
/* ── Mobil: eine Karte pro Reihe, alle Sonderregeln zurücknehmen ── */
@media (max-width: 640px){
  .tp-bands__grid{ grid-template-columns: minmax(0, 1fr); }
  .tp-bands__grid > *,
  .tp-bands__grid > :last-child:nth-child(2n + 1),
  .tp-bands__grid > :last-child:nth-child(3n + 1),
  .tp-bands__grid > :nth-last-child(2):nth-child(3n + 1){ grid-column: 1 / -1; }
}

/* ── Band-Karte: helles .nb-day-Muster mit Foto oben ── */
.tp-band-card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--nb-surface);
  color: var(--nb-ink);
  border: 1px solid var(--nb-hair-l);
  border-radius: var(--nb-r-fl);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(22,24,28,.03);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tp-band-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--nb-hair-l);
  z-index: 2;
}
.tp-band-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -22px rgba(22,24,28,.45);
}

/* DJ-Karte = helle Akzentkarte (wie .nb-day--accent): weiß + rote Topline */
.tp-band-card--dj{ background: #fff; border-color: rgba(22,24,28,.22); }
.tp-band-card--dj::before{ background: var(--nb-red); }

/* Foto oben — gedämpfte Sättigung, Veil unten für das Tages-Etikett */
.tp-band-card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--nb-paper-deep);
  background-size: cover;
  background-position: center;
  filter: saturate(.82) contrast(1.03);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 14px;
}
.tp-band-card__media::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15,17,21,.14) 68%, rgba(15,17,21,.62) 100%);
  pointer-events: none;
}
.tp-band-card__media--dj{ aspect-ratio: 16 / 9; }

/* ── Platzhalter, wenn (noch) kein Bandfoto gepflegt ist ──
   Kein blasser Geist auf Papier mehr (das sah nach Fehler aus), sondern eine
   bewusst gestaltete dunkle Monogramm-Platte im Maschinenton: Korn, Licht von
   oben, Initialen in Anton, rote Signalraute. Sie trägt das helle Tages-
   Etikett mit vollem Kontrast und liest sich als Absicht, nicht als Lücke. */
.tp-band-card__placeholder{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d1); line-height: 1;
  letter-spacing: .06em;
  text-indent: .06em;                 /* Tracking optisch ausgleichen */
  text-transform: uppercase;
  color: rgba(243,239,232,.30);
  background-color: var(--tp-d1);
  /* Bühnenlicht von oben + Maschinenton — die Platte ist ein Motiv, keine Lücke */
  background-image:
    radial-gradient(72% 58% at 50% 30%, rgba(227,6,19,.20) 0%, rgba(227,6,19,0) 70%),
    var(--tp-mat-dark);
}
.tp-band-card__placeholder::before{
  content: ""; position: absolute; inset: 0;
  background-image: var(--tp-grain);
  background-size: 180px 180px;
  opacity: .09;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Signalraute oben links — gesetzter Akzent, stört das Tages-Etikett nicht */
.tp-band-card__placeholder::after{
  content: ""; position: absolute;
  left: 18px; top: 18px;
  width: 9px; height: 9px;
  background: var(--tp-red);
  transform: rotate(45deg);
}
/* Auf der Platte darf der Foto-Verlauf nicht doppelt abdunkeln */
.tp-band-card__media:has(.tp-band-card__placeholder)::before{ opacity: .3; }

/* Tages-Etikett auf dem Foto: Mono-Chip, Radius 6 px (keine Pille).
   Grund .78 statt .6 — bei hellen Bandfotos war 4.8:1 rechnerisch zwar knapp
   über AA, praktisch aber zu weich. Jetzt 9.6:1 gegen --tp-ondark. */
.tp-band-card__day{
  position: relative; z-index: 1;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nb-ondark);
  background: rgba(15,17,21,.78);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-ui);
  padding: 8px 12px;
  box-shadow: none;
  margin-left: auto;
}

/* Karten-Körper — linksbündig, EINE Achse (Etikett, Titel, Text, Buttons) */
.tp-band-card__body{
  flex: 1;
  display: flex; flex-direction: column;
  gap: var(--tp-s2);
  padding: var(--tp-s4) var(--tp-s4) var(--tp-s4);
  text-align: left;
}
/* Genre als rotes Mono-Etikett ÜBER dem Namen (nb-idx-Muster) */
.tp-band-card__genre{
  order: -1;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-red-ink);
}
/* Kartentitel = Stufe d3 der Skala (34 px), wie im Fundament vorgesehen */
.tp-band-card__name{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.06;
  letter-spacing: var(--tp-ls-display);
  text-transform: uppercase;
  color: var(--nb-ink);
  margin: 0;
}
.tp-band-card__kurz{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: var(--tp-lh-body);
  color: var(--nb-ink-2);
  margin: 0;
}

/* Links: kleine System-Buttons — Spotify rot (Signal), Webseite Ghost */
.tp-band-card__links{
  display: flex; gap: var(--tp-s2); flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--tp-s3);
}
/* Ohne gepflegte Links darf die Zeile keinen Leerraum reservieren.
   :empty greift nicht — der Container enthält aus PHP Zeilenumbrüche. */
.tp-band-card__links:not(:has(a)){ padding-top: 0; }
.tp-band-card__link{
  display: inline-flex; align-items: center; gap: .45em;
  padding: 11px 18px;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-mono); font-weight: 600;
  letter-spacing: .012em; line-height: 1;
  text-transform: none;
  text-decoration: none;
  color: var(--nb-ink);
  background: transparent;
  border: 1px solid rgba(22,24,28,.28);
  border-radius: var(--nb-r-ui);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-band-card__link:hover{
  background: rgba(22,24,28,.05);
  border-color: var(--nb-ink);
  color: var(--nb-ink);
  transform: translateY(-2px);
}
.tp-band-card__link--spotify{
  background: var(--nb-red);
  border-color: var(--nb-red);
  color: #fff;
}
.tp-band-card__link--spotify:hover{
  background: var(--nb-red-dark);
  border-color: var(--nb-red-dark);
  color: #fff;
}

/* ═══════════ KAPITEL ALBEN (DUNKEL) ═══════════ */
/* Sektionston, Grain und Kopf-Farben liefert .tp-sec--dark (Fundament). */

/* ── Kopfbereich: EINE Achse, immer die Mitte ──
   Vorher stand der Intro-Text links und die Studio-Signatur rechts daneben —
   zwei Achsen in einem Block. Jetzt steht beides gestapelt auf der Mittelachse
   des Kapitelkopfs: Lead, darunter die Signatur als eigenständiges Objekt. */
.tp-alben__top{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-s5);
  margin-bottom: var(--tp-head-gap);
}
/* Doppelklasse: `.tp-sec p` im Fundament ist (0,1,1) und zwingt sonst
   Fließtextgröße + 68ch auf den Lead. */
.tp-alben .tp-alben__intro,
.tp-alben__intro{
  font-family: var(--nb-font-text);
  font-size: var(--nb-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--nb-ondark-2);
  max-width: var(--tp-measure-lead);
  margin-inline: auto;
  margin-block: 0;
  text-align: center;
}

/* ── Album-Grid — 4 Spuren, jede Karte über 2 (= zwei pro Reihe) ──
   Wie beim Band-Grid: nur mit doppelter Spurzahl lässt sich ein einzelnes
   Album als letzte Reihe MITTIG setzen (Spur 2–3) statt links anzudocken. */
.tp-alben .tp-alben__grid,
.tp-alben__grid{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tp-gap-lg) var(--nb-gap);
}
.tp-alben__grid > *{ grid-column: span 2; }
.tp-alben__grid > :last-child:nth-child(2n + 1){ grid-column: 2 / span 2; }
@media (max-width: 900px){
  .tp-alben__grid{ grid-template-columns: minmax(0, 1fr); }
  .tp-alben__grid > *,
  .tp-alben__grid > :last-child:nth-child(2n + 1){ grid-column: 1 / -1; }
}

/* ── Album-Karte: dunkles .nb-card-Muster, rote Topline bei Hover ── */
.tp-album-card{
  position: relative;
  display: flex; flex-direction: column;
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2) 0%, #1C2028 100%);
  color: var(--nb-ondark);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tp-album-card::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--nb-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s ease;
  z-index: 2;
}
.tp-album-card--link{ cursor: pointer; }
.tp-album-card--link:hover{
  transform: translateY(-4px);
  border-color: rgba(243,239,232,.3);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.6);
}
.tp-album-card--link:hover::before{ transform: scaleX(1); }

/* Cover: quadratisch, gedämpft, dunkler Grund als Fallback */
.tp-album-card__cover{
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--nb-d3);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-size: cover;
  background-position: center;
  filter: saturate(.82) contrast(1.03);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tp-album-card__cover::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15,17,21,.5) 100%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.tp-album-card--link:hover .tp-album-card__cover::after{ opacity: 1; }
.tp-album-card__cover-num{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: clamp(72px, 9vw, 128px);
  line-height: 1;
  letter-spacing: .01em;
  color: rgba(243,239,232,.07);
}
/* Hover-Overlay mit Spotify-Zeichen — im System-Ton, kein Fremd-Grün */
.tp-album-card__hover-icon{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,17,21,.6);
  color: var(--nb-ondark);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 2;
}
.tp-album-card--link:hover .tp-album-card__hover-icon{ opacity: 1; }
.tp-album-card__hover-icon svg{
  transform: scale(.85);
  transition: transform .25s var(--nb-ease);
  filter: none;
}
.tp-album-card--link:hover .tp-album-card__hover-icon svg{ transform: scale(1); }

/* Karten-Körper — linksbündig, EINE Achse */
.tp-album-card__body{
  flex: 1;
  display: flex; flex-direction: column;
  gap: var(--tp-s2);
  padding: var(--tp-s5) var(--tp-s4) var(--tp-s4);
  text-align: left;
}
.tp-album-card__meta{
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-red-lift);
}
.tp-album-card__title{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.06;
  letter-spacing: var(--tp-ls-display);
  text-transform: uppercase;
  color: var(--nb-ondark);
  margin: 0;
}
.tp-album-card__kurz{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: var(--tp-lh-body);
  color: var(--nb-ondark-2);
  margin: 0;
  max-width: var(--tp-measure);
}

/* CTA: kleiner Ghost-Button, hebt beim Karten-Hover */
.tp-album-card__cta{
  display: inline-flex; align-items: center; gap: .5em;
  align-self: flex-start;
  margin-top: 10px;
  padding: 12px 20px;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-mono); font-weight: 600;
  letter-spacing: .012em; line-height: 1;
  text-transform: none;
  color: var(--nb-ondark);
  background: transparent;
  border: 1px solid rgba(243,239,232,.32);
  border-radius: var(--nb-r-ui);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.tp-album-card--link:hover .tp-album-card__cta{
  background: rgba(243,239,232,.07);
  border-color: var(--nb-ondark);
  color: var(--nb-ondark);
}
.tp-album-card__cta svg{ flex-shrink: 0; }
.tp-album-card__arrow{
  display: inline-block;
  transition: transform .2s var(--nb-ease);
}
.tp-album-card--link:hover .tp-album-card__arrow{ transform: translateX(4px); }
.tp-album-card__cta--disabled{
  color: var(--nb-ondark-2);
  border-color: var(--nb-hair-d);
  cursor: default;
}

/* ── KI-Transparenzhinweis (AI Act Art. 50) — dauerhaft, deutlich lesbar ──
   RECHTLICH: bleibt ohne Interaktion sichtbar, 17 px Fließtext, nicht gekürzt.
   Gestalterisch nur zentriert (Blockachse = Kapitelachse) und auf die
   Lesebreite des Fundaments gebracht. */
.tp-alben__ki-hinweis{
  display: flex; align-items: flex-start; gap: var(--tp-s2);
  margin: var(--tp-s6) auto 0;
  padding: var(--tp-s3) var(--tp-s4);
  background: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  border: 1px solid var(--nb-hair-d);
  border-left: 3px solid var(--nb-red);
  border-radius: 0 var(--nb-r-ui) var(--nb-r-ui) 0;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: var(--tp-lh-body);
  color: var(--nb-ondark-2);
  max-width: var(--tp-measure);
  text-align: left;
}
.tp-alben__ki-hinweis strong{ color: var(--nb-ondark); font-weight: 600; }
.tp-alben__ki-txt{ flex: 1; min-width: 0; }
.tp-alben__ki-badge{
  flex: none;
  margin-top: 2px;
  padding: 4px 9px;
  border-radius: var(--nb-r-ui);
  background: var(--nb-red);
  color: #fff;
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono); font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ═══════════ STUDIO-SIGNATUR (Easter-Egg, kompakt) ═══════════
   Dunkle Systemkarte im .nb-card-Muster; rote Topline bei Hover/Playing.
   Beide Markup-Klassen (.tp-studio-sig + --compact) zeigen auf dieselbe
   kompakte Ausprägung. */
.tp-studio-sig,
.tp-studio-sig--compact{
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--tp-s4);
  align-items: center;
  width: min(100%, 620px);
  max-width: 100%;
  margin: 0 auto;
  /* oben Platz für den absolut gesetzten Sound-Chip — sonst lag er auf dem EQ */
  padding: var(--tp-s6) var(--tp-s4) var(--tp-s4);
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2) 0%, #1C2028 100%);
  color: var(--nb-ondark);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tp-studio-sig::before{
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: auto;
  width: auto; height: 2px;
  background: var(--nb-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s ease;
  z-index: 2;
}
.tp-studio-sig::after{ content: none; }
.tp-studio-sig:hover,
.tp-studio-sig:focus-visible,
.tp-studio-sig.is-playing{
  transform: translateY(-4px);
  border-color: rgba(243,239,232,.3);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.6);
}
.tp-studio-sig:hover::before,
.tp-studio-sig:focus-visible::before,
.tp-studio-sig.is-playing::before{ transform: scaleX(1); }

/* Sound-Hint-Chip oben rechts */
.tp-studio-sig__sound-badge{
  position: absolute; top: var(--tp-s3); right: var(--tp-s4);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: rgba(15,17,21,.6);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-ui);
  font-family: var(--nb-font-mono);
  font-size: var(--tp-fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nb-ondark-2);
  pointer-events: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  z-index: 3;
}
.tp-studio-sig__sound-icon{ flex-shrink: 0; opacity: .8; }
.tp-studio-sig:hover .tp-studio-sig__sound-badge{
  border-color: rgba(243,239,232,.32);
  color: var(--nb-ondark);
}
.tp-studio-sig.is-playing .tp-studio-sig__sound-badge{
  background: var(--nb-red);
  border-color: var(--nb-red);
  color: #fff;
  animation: none;
  box-shadow: none;
}
.tp-studio-sig.is-playing .tp-studio-sig__sound-icon{ opacity: 1; }

/* Vinyl — Systemtöne, kein Glow */
.tp-studio-sig__vinyl{ position: relative; width: 96px; height: 96px; justify-self: center; }
.tp-studio-sig__vinyl-glow{ display: none; }
.tp-studio-sig__vinyl-disc{
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--nb-d3) 0%, var(--nb-d0) 72%);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  border: 1px solid var(--nb-hair-d);
  box-shadow: none;
  animation: tpVinylSpin 6s linear infinite;
}
.tp-studio-sig:hover .tp-studio-sig__vinyl-disc{ animation-duration: 2.4s; }
.tp-studio-sig.is-playing .tp-studio-sig__vinyl-disc{ animation-duration: 1.5s; box-shadow: none; }
@keyframes tpVinylSpin{ to{ transform: rotate(360deg); } }
.tp-studio-sig__vinyl-groove{
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(243,239,232,.07);
  pointer-events: none;
}
.tp-studio-sig__vinyl-groove:nth-child(1){ inset: 8px; }
.tp-studio-sig__vinyl-groove:nth-child(2){ inset: 15px; }
.tp-studio-sig__vinyl-groove:nth-child(3){ inset: 22px; }
.tp-studio-sig__vinyl-label{
  position: absolute; inset: 31%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--nb-red-lift) 0%, var(--nb-red) 45%, var(--nb-red-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.tp-studio-sig__vinyl-label::after{
  content: ""; position: absolute;
  width: 5px; height: 5px;
  background: var(--nb-d0);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  border-radius: 50%;
  box-shadow: none;
}
.tp-studio-sig__vinyl-label-txt{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-mono);
  color: #fff;
  text-align: center;
  letter-spacing: .02em;
  line-height: .95;
  text-transform: uppercase;
  text-shadow: none;
  padding-top: 8px;
}
.tp-studio-sig__vinyl-arm{
  position: absolute; z-index: 2;
  top: -4px; right: 2px;
  width: 4px; height: 68px;
  background: linear-gradient(180deg, var(--nb-ondark-3), var(--nb-d4));
  border-radius: 2px;
  transform-origin: top center;
  /* Drehrichtung korrigiert: bei rotate(-35deg) schwang der Tonarm nach RECHTS
     aus dem Plattenteller heraus und lag auf der Headline „Produced by".
     Positiver Winkel = Nadel schwenkt über die Platte, wie bei einem echten
     Plattenspieler. Ruhe 18°, beim Abspielen 38°. */
  transform: rotate(18deg);
  transition: transform .5s var(--nb-ease);
  box-shadow: none;
}
.tp-studio-sig__vinyl-arm::before{
  content: ""; position: absolute; top: -6px; left: -4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--nb-ondark-3);
  box-shadow: none;
}
.tp-studio-sig__vinyl-arm::after{
  content: ""; position: absolute; bottom: -3px; left: -5px;
  width: 14px; height: 8px;
  border-radius: 2px;
  background: var(--nb-d4);
  box-shadow: none;
}
.tp-studio-sig:hover .tp-studio-sig__vinyl-arm,
.tp-studio-sig.is-playing .tp-studio-sig__vinyl-arm{ transform: rotate(38deg); }

/* Signatur-Körper: Text links, EQ rechts */
.tp-studio-sig__body{
  position: relative; z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  text-align: left;
}
.tp-studio-sig__body > *:not(.tp-studio-sig__eq){ grid-column: 1; }
.tp-studio-sig__eye{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tp-red-lift);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.tp-studio-sig__rec{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nb-red);
  box-shadow: none;
  animation: tpRecBlink 1.6s ease-in-out infinite; /* Keyframes aus neuaufbau.css */
}
.tp-studio-sig__title{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-s);
  line-height: 1.1;
  letter-spacing: .014em;
  text-transform: uppercase;
  color: var(--nb-ondark);
  margin: 0;
}
.tp-studio-sig__title span{ color: var(--tp-red-lift); text-shadow: none; }

/* Mini-Equalizer */
.tp-studio-sig__eq{
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px;
  width: 96px;
  height: auto;
  min-height: 64px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(15,17,21,.5);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-ui);
  box-shadow: none;
  transition: border-color .2s ease;
}
.tp-studio-sig:hover .tp-studio-sig__eq,
.tp-studio-sig.is-playing .tp-studio-sig__eq{
  border-color: rgba(243,239,232,.32);
  background: rgba(15,17,21,.5);
}
.tp-studio-sig__eq span{
  display: block;
  width: 3px;
  height: var(--h, 50%);
  background: linear-gradient(180deg, var(--nb-red-lift) 0%, var(--nb-red) 60%, var(--nb-red-dark) 100%);
  border-radius: 1.5px;
  transform-origin: bottom;
  opacity: .65;
  animation: tpEqDance 1.2s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  transition: opacity .2s ease;
  filter: none;
}
.tp-studio-sig:hover .tp-studio-sig__eq span{ animation-duration: .45s; opacity: 1; filter: none; }
.tp-studio-sig.is-playing .tp-studio-sig__eq span{ animation-duration: .22s; opacity: 1; filter: none; }
@keyframes tpEqDance{ 0%{ transform: scaleY(.2); } 100%{ transform: scaleY(1); } }

/* Kompakt-CTA-Zeile */
.tp-studio-sig__cta-compact{
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-mono); font-weight: 600;
  letter-spacing: .012em;
  text-transform: none;
  color: var(--tp-red-lift);
  transition: color .2s ease, gap .2s ease;
}
.tp-studio-sig:hover .tp-studio-sig__cta-compact,
.tp-studio-sig.is-playing .tp-studio-sig__cta-compact{
  color: var(--nb-ondark);
  gap: .7em;
}
.tp-studio-sig__arrow{
  display: inline-block;
  transition: transform .2s var(--nb-ease);
}
.tp-studio-sig:hover .tp-studio-sig__arrow{ transform: translateX(4px); }

/* Signatur responsive */
@media (max-width: 900px){
  .tp-studio-sig,
  .tp-studio-sig--compact{ grid-template-columns: 88px 1fr; gap: 16px; padding: 18px; }
  .tp-studio-sig__vinyl{ width: 88px; height: 88px; }
  .tp-studio-sig__vinyl-arm{ height: 62px; }
  .tp-studio-sig__body{ grid-template-columns: 1fr; }
  .tp-studio-sig__eq{
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-height: 30px;
    height: 30px;
    align-self: auto;
  }
}
@media (max-width: 640px){
  .tp-studio-sig__sound-txt{ display: none; }
}

/* ═══════════ STUDIO-TOUR MODAL (dunkel, System-Panel) ═══════════ */
.tp-studio-modal{
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.tp-studio-modal[hidden]{ display: none; }
.tp-studio-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(15,17,21,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  animation: tpStudioFadeIn .25s ease-out;
}
@keyframes tpStudioFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
.tp-studio-modal__panel{
  position: relative; z-index: 2;
  width: min(880px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--nb-d2);
  --tp-red-ink: var(--tp-red-lift);   /* dunkle Flaeche: rote Schrift hebt sich */
  background-image: linear-gradient(180deg, var(--nb-d2), var(--nb-d1));
  color: var(--nb-ondark);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  padding: clamp(28px, 5vw, 48px);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: tpStudioSlideIn .35s var(--nb-ease);
}
@keyframes tpStudioSlideIn{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}
.tp-studio-modal__close{
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(33,37,44,.85);
  color: var(--nb-ondark);
  border: 1px solid var(--nb-hair-d);
  border-radius: 50%;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  z-index: 3;
}
.tp-studio-modal__close:hover,
.tp-studio-modal__close:focus-visible{
  background: var(--nb-red);
  border-color: var(--nb-red);
  color: #fff;
  transform: none;
}

/* Modal-Kopf auf dieselbe Achse wie der Abschluss-CTA darunter: Mitte */
.tp-studio-modal__head{
  margin-bottom: var(--tp-s6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.tp-studio-modal__eye{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tp-red-lift);
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.tp-studio-modal__head h2{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--nb-fs-m);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--nb-ondark);
  margin: 0;
  max-width: var(--tp-measure-head);
}
/* rote Linie wie in jedem anderen Kopf des Systems */
.tp-studio-modal__head h2::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--nb-red);
  margin: var(--tp-s3) auto var(--tp-s3);
}

.tp-studio-modal__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nb-gap);
  margin-bottom: 36px;
}
@media (max-width: 900px){ .tp-studio-modal__grid{ grid-template-columns: 1fr; } }
.tp-studio-modal__col{
  padding: 24px 22px;
  background: rgba(15,17,21,.35);
  border: 1px solid var(--nb-hair-d);
  border-radius: var(--nb-r-fl);
  text-align: left;
  transition: border-color .2s ease;
}
.tp-studio-modal__col:hover{
  border-color: rgba(243,239,232,.3);
  background: rgba(15,17,21,.35);
}
/* Nummer als rotes Mono-Etikett (nb-idx-Muster) */
.tp-studio-modal__num{
  display: block;
  font-family: var(--nb-font-mono);
  font-size: var(--nb-fs-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tp-red-lift);
  opacity: 1;
  margin-bottom: 14px;
}
.tp-studio-modal__col h4{
  font-family: var(--nb-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-lead);
  line-height: 1.14;
  letter-spacing: .014em;
  text-transform: uppercase;
  color: var(--nb-ondark);
  margin: 0 0 10px;
}
.tp-studio-modal__col p{
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: 1.6;
  color: var(--nb-ondark-2);
  margin: 0;
}

.tp-studio-modal__cta-wrap{ text-align: center; }
.tp-studio-modal__cta{
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: 17px 30px;
  background: var(--nb-red);
  color: #fff !important;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); font-weight: 600;
  letter-spacing: .012em; line-height: 1;
  text-transform: none;
  text-decoration: none;
  border-radius: var(--nb-r-ui);
  box-shadow: none;
  transition: background-color .18s ease, transform .18s ease;
}
.tp-studio-modal__cta:hover{
  background: var(--nb-red-dark);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: none;
}
.tp-studio-modal__hint{
  margin: 16px 0 0;
  font-family: var(--nb-font-text);
  font-size: var(--tp-fs-body); line-height: 1.6;
  color: var(--nb-ondark-2);
}
.tp-studio-modal__hint a{
  color: var(--tp-red-lift);
  text-decoration: none;
  border-bottom: 1px solid rgba(227,6,19,.5);
  transition: color .2s ease, border-color .2s ease;
}
.tp-studio-modal__hint a:hover{
  color: var(--nb-ondark);
  border-bottom-color: var(--nb-ondark);
}

/* ═══════════ REDUCED MOTION — alles aus ═══════════ */
@media (prefers-reduced-motion: reduce){
  html.tp-anim .tp-eq-sec.is-live .tp-eqbars span{ animation: none; transform: scaleY(1); }
  .tp-studio-sig__vinyl-disc,
  .tp-studio-sig__eq span,
  .tp-studio-sig__rec,
  .tp-studio-modal__backdrop,
  .tp-studio-modal__panel{ animation: none; }
  .tp-studio-sig__vinyl-arm{ transition: none; }
  .tp-band-card, .tp-album-card, .tp-studio-sig{ transition: none; }
}