/* Nur in der privaten Vinyl-Vorschau geladen. Die Platte hat eine eigene
   feste Randfläche; Breite und Scrollstrecke der Seiten bleiben unverändert. */
html[data-bb-track-preview="ready"] .panel::after,
html[data-bb-track-preview="ready"] .site-footer::after,
html[data-bb-track-preview="ready"] .page-footer::after,
html[data-bb-track-preview="ready"] .legal-section::after,
html[data-bb-track-preview="ready"] .tour-section::after,
html[data-bb-track-preview="ready"] .band-return::after,
html[data-bb-track-preview="ready"] .kat::after {
  content: none !important;
}

.bb-track-preview {
  --track-disc-radius: 112px;
  --track-disc-orbit: calc(var(--track-disc-radius) * .76);
  --track-disc-label-box: 48px;
  --track-disc-label-size: 48px;
  /* 3R breite Fläche, Mitte bei 1.5R und Skalierung .68: Ruhe = halbe Platte. */
  --track-disc-edge-offset: calc(var(--track-disc-radius) * -1.02);
  position: fixed;
  right: calc(var(--track-disc-edge-offset) + var(--track-disc-slide, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  width: calc(var(--track-disc-radius) * 3);
  height: calc(var(--track-disc-radius) * 2.6);
  transform: scale(.68);
  transform-origin: right bottom;
  overflow: hidden;
  clip-path: inset(0);
  isolation: isolate;
  z-index: 65;
  opacity: .645;
  pointer-events: none;
  user-select: none;
  perspective: calc(var(--track-disc-radius) * 5.2);
  perspective-origin: 50% 61.53846%;
}

.bb-track-preview__rotor {
  position: absolute;
  left: calc(var(--track-disc-radius) * .5);
  top: calc(var(--track-disc-radius) * .6);
  width: calc(var(--track-disc-radius) * 2);
  height: calc(var(--track-disc-radius) * 2);
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .18)),
    url("vinyl-satin.webp?v=30.7") center / 103% 103% no-repeat,
    repeating-radial-gradient(circle, #111 0 1px, #090909 1px 2px);
  box-shadow: inset 0 0 0 1px #343434;
  transform: rotate(var(--track-disc-angle, 0deg));
  transform-origin: 50% 50%;
  will-change: transform;
}

.bb-track-preview__number {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--track-disc-label-box);
  height: var(--track-disc-label-box);
  margin: calc(var(--track-disc-label-box) * -.5);
  display: grid;
  place-items: center;
  color: rgba(241, 238, 228, .74);
  opacity: var(--track-number-opacity, .72);
  font-family: var(--display-font);
  font-size: var(--track-disc-label-size);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}

.bb-track-preview__number--first,
.bb-track-preview__number--second {
  transform: rotate(var(--track-disc-counter-angle, 0deg)) translateX(calc(var(--track-disc-orbit) * -1));
}

.bb-track-preview__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--track-disc-radius) * .62);
  height: calc(var(--track-disc-radius) * .62);
  margin: calc(var(--track-disc-radius) * -.31);
  border: 1px solid rgba(241,238,228,.4);
  border-radius: 50%;
  background: #0b0b0b;
  box-shadow: 0 0 0 2px #101010;
}
.bb-track-preview__center img {
  position: absolute;
  left: 32%;
  top: 12%;
  height: 76%;
  width: auto;
  transform: translateX(-50%);
  opacity: .85;
}
.bb-track-preview__spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--track-disc-radius) * .072);
  height: calc(var(--track-disc-radius) * .072);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f4f1e8, #aaa79e 24%, #444 62%, #111);
  box-shadow: 0 0 0 1px #000;
  transform: translate(-50%,-50%);
}
.bb-track-preview__spindle::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: #080808;
}

.bb-track-preview__canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--track-disc-radius) * 3);
  height: calc(var(--track-disc-radius) * 2.6);
  display: none;
}
.bb-track-preview__turn {
  position: absolute;
  left: calc(var(--track-disc-radius) * .5);
  top: calc(var(--track-disc-radius) * .6);
  width: calc(var(--track-disc-radius) * 2);
  height: calc(var(--track-disc-radius) * 2);
  display: none;
  transform-style: preserve-3d;
  transform: translate3d(var(--track-turn-x, 0px), var(--track-turn-y, 0px), var(--track-turn-z, 0px))
    rotateZ(var(--track-turn-roll, 0deg)) rotateX(var(--track-turn-tilt, 0deg)) rotateY(var(--track-turn-yaw, 0deg));
}
.bb-track-preview__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bb-track-preview__face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(#0003, #0003), url("vinyl-satin.webp?v=30.7") center / 103% 103%;
  box-shadow: inset 0 0 0 1px #343434;
  transform: rotate(var(--track-face-angle, 0deg));
}
.bb-track-preview__face--front { transform: translateZ(1px); }
.bb-track-preview__face--back { transform: rotateY(180deg) translateZ(1px); }
.bb-track-preview__face .bb-track-preview__number { transform: translateX(calc(var(--track-disc-orbit) * -1)); }
.bb-track-preview__rotor .bb-track-preview__center { transform: rotate(var(--track-disc-counter-angle, 0deg)); }
.bb-track-preview__edge {
  position: absolute;
  top: 0;
  left: calc(50% - 1.5px);
  height: 100%;
  width: 3px;
  background: linear-gradient(90deg, #161616, #757575, #161616);
  transform: rotateY(90deg);
}
.bb-track-preview--turning .bb-track-preview__rotor { visibility: hidden; }
.bb-track-preview--turning .bb-track-preview__turn { display: block; }
.bb-track-preview--turning[data-turn-renderer="webgl"] .bb-track-preview__canvas { display: block; }
.bb-track-preview--turning[data-turn-renderer="webgl"] .bb-track-preview__turn { visibility: hidden; }

/* Die Trackplatte bleibt auch bei ausgefahrener Hauptplatte sichtbar und
   fängt keine Gesten ab. Bild- und Kalenderdialoge bleiben unverändert. */
html.media-lightbox-open .bb-track-preview,
html.tour-calendar-open .bb-track-preview {
  visibility: hidden;
}

@media (max-width: 980px) {
  .bb-track-preview {
    --track-disc-radius: 56px;
    --track-disc-label-box: 24px;
    --track-disc-label-size: 25px;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 981px) and (max-height: 500px) {
  .bb-track-preview {
    --track-disc-radius: 96px;
    --track-disc-label-box: 40px;
    --track-disc-label-size: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-track-preview__rotor { will-change: auto; }
}

@media print {
  .bb-track-preview { display: none; }
}