/* ============================================================
   CLASSY — Sektionen, Track für Track
   ============================================================ */

/* --- 00 Cover ------------------------------------------------ */
.cover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  padding-top: var(--nav-h);
}
.cover__photo { grid-column: 1; grid-row: 1; position: relative; min-height: 0; overflow: hidden; }
.cover__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.cover__text {
  grid-column: 2; grid-row: 1;
  align-self: center;
  padding: 2rem max(var(--gutter), env(safe-area-inset-right)) 2rem clamp(3rem, 11vw, 11rem);
}
.cover__mark { width: 100%; max-width: 38rem; margin: 0 0 .4rem -3.2%; }
.cover__mark img { width: 100%; }
.cover__claim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.cover__lead { color: var(--soft); max-width: 29rem; margin-bottom: 1.8rem; }
.cover__actions, .outro__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.cover__label {
  position: absolute;
  z-index: 2;
  left: 55%;
  bottom: 12%;
  width: clamp(9rem, 16vw, 15rem);
  translate: -50% 0;
}
.cover .trackbar { grid-column: 1 / -1; grid-row: 2; margin-top: 0; padding-top: 1rem; }
.cover .trackbar::before { display: none; }

/* --- 01 Die Idee --------------------------------------------- */
.sides__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  padding-block: 1.5rem 1.7rem;
  border-top: 1px solid var(--rule);
}
.sides__no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  color: var(--accent);
  padding-top: .55rem;
}
.sides__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: .35rem;
}
.sides__row p { color: var(--soft); max-width: 40rem; }

/* --- 02 Release ---------------------------------------------- */
.release { overflow: clip; }
.release__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 5vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}
.release__head .title { margin-bottom: 0; }

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 20fr) minmax(0, 34fr);
  align-items: center;
}
.sleeve { grid-column: 1; }
.backside { grid-column: 3; }

/* Die Platte liegt hinter der Hülle und läuft unter der Rückseite aus */
.stage__vinyl {
  position: absolute;
  z-index: 1;
  left: 2%;
  top: 50%;
  width: 42%;
  translate: 0 -50%;
  transform: translateX(46%);
}
.sleeve, .backside { position: relative; z-index: 2; container-type: inline-size; }

/* Vorderseite: Masse in cqw, damit sie mitskaliert wie ein Druck */
.sleeve {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  padding: 6%;
  background: var(--paper);
  color: var(--ink);
}
.sleeve__top, .backside__top, .sleeve__rows p, .backside__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  letter-spacing: .12em;
}
.sleeve__top { font-size: max(1.5cqw, 9px); margin-bottom: 2.6cqw; }
.sleeve__photo { position: relative; flex: 1; min-height: 0; }
.sleeve__photo > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.sleeve__mark { position: absolute; left: 2.5%; top: 1%; width: 60%; }
.sleeve__label { position: absolute; right: -4cqw; bottom: -1cqw; width: 24cqw; }
.sleeve__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 2.2cqw 1.4cqw;
  border-bottom: 1px solid rgba(15,14,13,.32);
  font-family: var(--font-display);
}
.sleeve__vol { font-style: italic; font-weight: 700; font-size: 9.4cqw; line-height: 1; }
.sleeve__date { font-size: 5.4cqw; line-height: 1; }
.sleeve__rows { padding-top: 1.8cqw; font-size: max(1.75cqw, 9px); white-space: nowrap; }
.sleeve__rows p + p { margin-top: .5em; }
.sleeve__accent { color: var(--rust); }

/* Rückseite */
.backside {
  --fg: var(--paper);
  padding: 7%;
  aspect-ratio: 9 / 15;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2.6cqw;
}
.backside__top { font-size: max(2.2cqw, 9px); margin-bottom: 7cqw; }
.backside__mark { width: 72%; margin-left: -2.5%; }
.backside__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 9cqw;
  color: var(--gold);
  margin-bottom: 4cqw;
}
.tracklist li {
  display: flex;
  justify-content: space-between;
  padding-block: 2.6cqw;
  border-top: 1px solid rgba(244,239,230,.2);
  font-size: max(2.9cqw, 11px);
  letter-spacing: .1em;
}
.tracklist li:last-child { border-bottom: 1px solid rgba(244,239,230,.2); }
.backside__where { font-family: var(--font-display); font-size: 6.6cqw; margin-top: auto; }
.backside__foot { font-size: max(2.2cqw, 9px); color: var(--gold); margin-top: 4cqw; }

/* --- 03 Sound ------------------------------------------------ */
.eras__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 6fr) minmax(0, 4fr) 7rem;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(.9rem, 1.6vw, 1.5rem);
  border-top: 1px solid var(--rule);
}
.eras__row:last-child { border-bottom: 1px solid var(--rule); }
.eras__no { color: var(--accent); }
.eras__note { color: var(--soft); }
.eras__years { text-align: right; }
.eras__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 4.4vw, 6rem);
  font-weight: 400;
  line-height: 1.04;
}
@media (hover: hover) {
  .eras__row:hover .eras__title { font-style: italic; color: var(--accent); }
}
.sound__end {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-top: 1.6rem;
  text-align: right;
}
.sound__end em { color: var(--accent); }

/* --- DJ-Schlagworte (djs.html) ------------------------------ */
.dj__tags { color: var(--soft); }

/* --- 05 Die Single ------------------------------------------- */
.single {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2.4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.single__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.5rem, 1.5vw, 1.5rem); }
.groove__stage { aspect-ratio: 660 / 730; }
.groove__stage img { width: 100%; height: 100%; object-fit: contain; }
.groove__stage svg { display: block; }
.groove figcaption { margin-top: .9rem; }
.groove strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.4rem);
  line-height: 1.15;
}
.groove span {
  display: block;
  letter-spacing: .1em;
}
#single, #sticker, .cover { overflow-x: clip; }
.single__discs { display: grid; gap: 1.2rem; }
.single__discs img { width: 100%; animation: spin 18s linear infinite; }
.single__discs img + img { animation-duration: 24s; margin-left: 12%; width: 88%; }
/* Mit JS dreht motion.js die Platten, abhängig vom Scrollen */
.js-on .single__discs img { animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 06 Sticker ---------------------------------------------- */
.stickers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.4rem);
  align-items: center;
  justify-items: center;
}
.stickers img { width: 100%; }
.is-draggable img { cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.is-draggable img:active { cursor: grabbing; scale: 1.06; }
.sticker-hint { display: none; }
.is-draggable-hint .sticker-hint { display: inline; }

/* --- 07 Der Spot --------------------------------------------- */
.spot {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  margin-block: 1.6rem;
}
.cities li { display: flex; gap: .9rem; padding-block: .55rem; border-top: 1px solid var(--rule); }
.cities span { width: 2.6rem; color: var(--accent); }
.spot .btn { margin-top: 1.4rem; }

.disc { position: relative; width: 100%; max-width: 44rem; margin-left: auto; aspect-ratio: 1; }
.disc svg { width: 100%; height: 100%; }
.disc__base { fill: var(--ink); }
.disc__grooves circle { fill: none; stroke: var(--paper); stroke-width: .08; opacity: .32; }
.disc__shine { fill: none; stroke: var(--paper); stroke-width: .5; stroke-linecap: round; opacity: .3; }
.disc__pins circle { fill: var(--gold); }
.disc__label { position: absolute; left: 50%; top: 50%; width: 26%; margin: -13% 0 0 -13%; }
.disc__city {
  position: absolute;
  left: var(--x);
  top: var(--y);
  padding-left: .7em;
  translate: 0 -50%;
  letter-spacing: .1em;
  color: var(--paper);
}
.disc__city--below { padding: 0; translate: -50% 65%; }
.disc__city--flip { padding: 0 .7em 0 0; translate: -100% -50%; }

/* --- 08 FAQ -------------------------------------------------- */
.section--ruled > .shell { padding-top: var(--section); }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
  align-items: baseline;
  min-height: 3.5rem;
  padding-block: 1rem;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  text-align: right;
  color: var(--accent);
}
.faq__item[open] summary::after { content: '–'; }
.faq__no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  color: var(--accent);
}
.faq__q { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.875rem); line-height: 1.2; }
.faq__item p { max-width: 40rem; padding: 0 1.5rem 1.4rem 3rem; color: var(--soft); }

/* --- 09 Outro ------------------------------------------------ */
.outro { position: relative; padding-top: var(--section); }
.outro__center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.outro__label { width: clamp(13rem, 24vw, 22rem); margin-bottom: 1.8rem; }
.outro__claim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.outro__actions { justify-content: center; margin-top: 1.6rem; }
.outro__todo {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .08em;
  color: var(--gold);
}
.trackbar--flush { margin-top: var(--section); }

/* --- XXL-Footer ---------------------------------------------- */
.xxl { background: var(--bg); color: var(--fg); overflow: clip; }
.xxl__top { padding-top: clamp(3.5rem, 7vw, 7rem); }
.xxl__mail {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, .4rem + 7.4vw, 8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: underline transparent 2px;
  text-underline-offset: .12em;
  transition: text-decoration-color var(--fast);
}
.xxl__mail:hover { text-decoration-color: currentColor; }
.xxl__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  letter-spacing: .1em;
}
.xxl__head { margin-bottom: .4rem; }
.xxl__cols a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.xxl__cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.xxl__legal { text-align: right; line-height: 1.9; }

/* Bühne hochkant: Figuren stehen hinter der Wortmarke, die über die
   Ränder läuft und unten angeschnitten ist. Masse in vw, weil die
   Marke an der Fensterbreite hängt. */
.xxl__stage {
  position: relative;
  overflow: clip;
  margin-top: clamp(1rem, 3vw, 3rem);
  padding-top: 19vw;
}
.xxl__mark {
  position: relative;
  z-index: 2;
  width: 108vw;
  max-width: none;
  margin: 0 0 -3.5vw -4vw;
}
.xxl__fig {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 25vw;
  aspect-ratio: 660 / 730;
}
.xxl__fig img { width: 100%; height: 100%; object-fit: contain; }
.xxl__fig svg { display: block; }
.xxl__fig--miss { left: 17vw; }
.xxl__fig--mister { right: 17vw; }