/* Gelbe Vinylnummer links, danach der gut lesbare Bereichsname. */
.track .title { color: var(--muted); }
.track .side { color: var(--acid); opacity: 1; }
.track .leader i {
  box-shadow: 0 0 0 1.5px rgba(3,3,3,.9), 0 0 0 3px rgba(241,238,228,.1);
}
.track.active .leader i,
.track[aria-current="location"] .leader i {
  box-shadow: 0 0 0 1.5px rgba(3,3,3,.9), 0 0 0 3px rgba(215,174,53,.18);
}
.vinyl-fallback__links a { display: flex; align-items: baseline; gap: .55rem; }
.vinyl-fallback__links strong { color: var(--muted); }
.vinyl-fallback__links span { color: var(--acid); }

/* Die Startpunkte liegen auf den Rillen; nur der Text bewegt sich beim Hover. */
.vinyl-menu .track,
.record-nav .track {
  left: var(--bb-track-x, 288px);
  top: var(--bb-track-y, var(--y));
  width: var(--bb-track-width, 260px);
  transform: none !important;
}
.track .track-copy { transition: transform .2s ease; }
.track:hover .track-copy,
.track:focus-visible .track-copy,
.track.active .track-copy,
.track[aria-current="location"] .track-copy { transform: translateX(6px); }

/* Eine feste kreisrunde Außenkante maskiert den leicht unruhigen Bildrand. */
.vinyl-menu .record-rotor {
  overflow: hidden;
  background-size: auto, 103% 103%, auto;
  clip-path: circle(50% at 50% 50%);
}
.record-nav .disc {
  overflow: hidden;
  background-size: auto, auto, auto, 103% 103%, auto;
  clip-path: circle(50% at 50% 50%);
}

/* Der Footer-Schriftzug gehört zur Grafik und lässt sich nicht markieren. */
.footer-brand,
.footer-brand * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.footer-brand { position: relative; }
.footer-brand__access {
  position: absolute;
  left: 77%;
  top: 0;
  width: 8%;
  height: 62%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.footer-brand__access:hover,
.footer-brand__access:active { background: transparent; color: transparent; }
.footer-brand__access:focus-visible { outline: 1px solid var(--acid); outline-offset: 2px; }

/* v18: continuous leader, rounded join; same original endpoints and dot. */
.track .leader::before,.track.active .leader::before,.track[aria-current="location"] .leader::before{left:0;right:0;bottom:0;width:auto;height:22px;transform:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='22'%3E%3Cpath d='M0 17 L29 1 H2000' fill='none' stroke='%23f1eee4' stroke-opacity='.62' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 22px no-repeat}
.track .leader::after{display:none}
.track.active .leader::before,.track[aria-current="location"] .leader::before{height:22px;background-color:transparent}
@media(min-width:701px) and (max-width:980px) and (orientation:landscape){
 .track .leader::before,.track.active .leader::before,.track[aria-current="location"] .leader::before{bottom:0;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='18'%3E%3Cpath d='M0 14 L22 1 H2000' fill='none' stroke='%23f1eee4' stroke-opacity='.62' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");background-size:100% 18px}
}
