/* ============================================================
   CLASSY — Breakpoints. Muss ZULETZT geladen werden.
   ============================================================ */

/* --- Enge Navigation: Tracklist als Vollbild ------------------ */
@media (max-width: 1100px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__now { display: block; text-align: center; overflow: hidden; }
  .nav__burger {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
  }
  .js-on .nav__links {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: calc(var(--nav-h) + env(safe-area-inset-top)) var(--gutter) 2rem;
    background: var(--nav-bg);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--fast), visibility var(--fast);
  }
  .js-on .nav.is-open .nav__links { visibility: visible; opacity: 1; }
  .js-on .nav__link {
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: baseline;
    min-height: 3.75rem;
    padding-block: .4rem;
    border-top: 1px solid currentColor;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 8vw, 2.75rem);
    letter-spacing: 0;
    text-transform: none;
  }
  .js-on .nav__link::after { display: none; }
  .js-on .nav__num { display: block; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); }
  /* Ohne JS: Links einfach sichtbar lassen */
  html:not(.js-on) .nav { position: static; height: auto; grid-template-columns: 1fr; padding-block: .5rem; }
  html:not(.js-on) .nav__burger, html:not(.js-on) .nav__now { display: none; }
  html:not(.js-on) .nav__links { grid-column: 1; flex-wrap: wrap; justify-content: flex-start; }
}

/* --- Tablet --------------------------------------------------- */
@media (max-width: 960px) {
  .split, .spot { grid-template-columns: minmax(0, 1fr); }
  .release__head { grid-template-columns: minmax(0, 1fr); }
  .disc { margin-inline: auto; }

  .single { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .single > div:first-child { grid-column: 1 / -1; }

  .stickers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eras__row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .eras__note { grid-column: 2 / -1; grid-row: 2; }
  .eras__years { grid-column: 3; grid-row: 1; }
}

/* --- Handy ---------------------------------------------------- */
@media (max-width: 720px) {
  .cover {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
  }
  .cover__photo { aspect-ratio: 1; }
  .cover__text { grid-column: 1; grid-row: 2; padding: 2rem var(--gutter) 2.5rem; }
  .cover__label { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--nav-h) + 100vw - 5.5rem); width: 8.5rem; translate: none; }
  .cover__mark { max-width: 78%; }
  .cover .trackbar { grid-row: 3; }
  .cover__actions .btn { flex: 1 1 auto; }

  /* Hülle und Rückseite untereinander, die Platte schaut rechts raus */
  .stage { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .sleeve { grid-column: 1; width: 86%; }
  .backside { grid-column: 1; grid-row: 2; aspect-ratio: auto; min-height: 30rem; }
  .backside__where { margin-top: 2rem; }
  .stage__vinyl { top: 0; left: 0; width: 76vw; translate: 0 0; transform: translateX(34%); }

  .nav__now { font-size: 11px; letter-spacing: .04em; text-overflow: ellipsis; }
  .sleeve__top, .sleeve__rows p { letter-spacing: .02em; gap: .5rem; }

  .eras__title { grid-column: 2 / -1; }
  .eras__years { grid-column: 2 / -1; grid-row: 2; text-align: left; color: var(--accent); }
  .eras__note { grid-row: 3; }



  .single { grid-template-columns: minmax(0, 1fr); }
  .groove span { letter-spacing: .04em; }
  .single__discs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single__discs img + img { margin: 0; width: 100%; }

  .stickers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cities { grid-template-columns: minmax(0, 1fr); }
  .disc__city { font-size: 11px; letter-spacing: .04em; padding-left: .5em; }
  .disc__city--flip { padding: 0 .5em 0 0; }

  .faq__item summary { grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; }
  .faq__item p { padding-left: 2.25rem; padding-right: 0; }

  .xxl__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xxl__legal { grid-column: 1 / -1; text-align: left; }
  .xxl__stage { padding-top: 30vw; }
  .xxl__fig { width: 38vw; }
  .xxl__fig--miss { left: 8vw; }
  .xxl__fig--mister { right: 8vw; }

  .trackbar { grid-template-columns: 1fr 1fr; }
  .trackbar span:nth-of-type(2) { display: none; }
}

/* --- Querformat: Cover darf nicht höher als der Bildschirm sein */
@media (max-height: 560px) and (min-width: 721px) {
  .cover { min-height: 0; }
  .cover__photo { min-height: 26rem; }
  .cover__mark { max-width: 15rem; }
  .cover__label { width: 8rem; bottom: 16%; }
}

/* --- Querformat: Die Marke ist fast so hoch wie der Schirm.
   Hinter ihr wären die Gesichter am Seitenende unter dem Kopf,
   darum stehen die Figuren hier vor ihr, unten am Rand. */
@media (min-aspect-ratio: 1/1) {
  .xxl__stage { padding-top: 0; }
  .xxl__fig {
    top: auto;
    bottom: -1px;
    z-index: 3;
    width: min(27vw, 50vh);
  }
  .xxl__fig--miss { left: 7vw; }
  .xxl__fig--mister { right: 5vw; }
}