/* Deep-scroll: die Scrollleiste des Actor-Dossiers als Tauchprofil.
   Die Leiste ist der Lichtschacht -- oben hell, nach unten dunkler --, die
   Blase steht auf der aktuellen Tiefe und lässt beim Scrollen Luft nach oben
   entweichen. Gebaut wird sie von deepScroll() in static/js/site.js; ohne
   JavaScript bleibt die native Leiste stehen. */

.mb-dossier { position: relative; }
.mb-dossier-body { box-sizing: border-box; }

/* Die native Leiste verschwindet erst, wenn der Ersatz wirklich hängt. */
.mb-deep-on { scrollbar-width: none; -ms-overflow-style: none; }
.mb-deep-on::-webkit-scrollbar { width: 0; height: 0; }

.mb-deep-rail {
  position: absolute; top: 26px; bottom: 26px; right: 13px; width: 16px;
  z-index: 3; touch-action: none;
}
.mb-deep-rail[hidden] { display: none; }

/* Der Schacht. Das Licht nimmt nach unten ab, wie im Wasser. */
.mb-deep-track {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(109, 227, 255, .30) 0%,
    rgba(109, 227, 255, .16) 35%,
    rgba(49, 87, 245, .16) 70%,
    rgba(49, 87, 245, .06) 100%);
}

/* Der zurückgelegte Weg, heller als der Rest. */
.mb-deep-trail {
  position: absolute; left: 50%; top: 0; width: 2px; height: 0;
  transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(180deg, rgba(109, 227, 255, .10), rgba(109, 227, 255, .55));
}

/* Die Blase selbst: Glanzpunkt oben links, Rest durchscheinend. */
.mb-deep-thumb {
  position: absolute; left: 50%; top: 0; width: 16px; height: 16px;
  margin-left: -8px; border-radius: 50%; cursor: grab;
  background: radial-gradient(circle at 34% 30%,
    rgba(255, 255, 255, .95) 0%,
    rgba(198, 244, 255, .72) 18%,
    rgba(109, 227, 255, .42) 44%,
    rgba(49, 87, 245, .30) 74%,
    rgba(109, 227, 255, .16) 100%);
  border: 1px solid rgba(190, 240, 255, .5);
  box-shadow: 0 0 10px rgba(109, 227, 255, .45), inset 0 0 6px rgba(255, 255, 255, .25);
  transition: box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
.mb-deep-thumb::after {                 /* der harte Glanzpunkt */
  content: ''; position: absolute; left: 3.5px; top: 2.5px;
  width: 4px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); filter: blur(.3px);
}
.mb-deep-rail:hover .mb-deep-thumb,
.mb-deep-thumb:focus-visible {
  box-shadow: 0 0 16px rgba(109, 227, 255, .75), inset 0 0 7px rgba(255, 255, 255, .35);
  border-color: rgba(220, 250, 255, .8);
}
.mb-deep-thumb:focus-visible { outline: 2px solid #6DE3FF; outline-offset: 3px; }
.mb-deep-rail.is-dragging .mb-deep-thumb { cursor: grabbing; }

/* Beim Scrollen perlt Luft nach oben weg. Drei Bläschen, versetzt. */
.mb-deep-fizz {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%,
    rgba(255, 255, 255, .85), rgba(109, 227, 255, .35) 60%, rgba(109, 227, 255, 0));
  pointer-events: none;
}
.mb-deep-rail.is-scrolling .mb-deep-fizz {
  animation: mb-deep-rise 1.5s ease-out infinite;
  animation-delay: calc(var(--i) * .38s);
}
@keyframes mb-deep-rise {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.5); }
  15%  { opacity: .85; }
  100% { opacity: 0;   transform: translate(var(--drift, 3px), -42px) scale(1); }
}

/* Die Tiefe in Metern, nur während man zieht oder scrollt. */
/* Sie steht über dem Text, deshalb eine eigene Fläche statt nur Schatten. */
.mb-deep-depth {
  position: absolute; right: 24px; white-space: nowrap; pointer-events: none;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(4, 10, 20, .88); border: 1px solid rgba(109, 227, 255, .22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .08em;
  color: #6DE3FF;
  opacity: 0; transform: translateY(-50%); transition: opacity .25s ease;
}
.mb-deep-rail.is-scrolling .mb-deep-depth,
.mb-deep-rail.is-dragging .mb-deep-depth { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .mb-deep-rail.is-scrolling .mb-deep-fizz { animation: none; }
  .mb-deep-thumb { transition: none; }
}

/* Auf schmalen Schirmen füllt das Dossier die Breite; die Leiste rückt an den
   Rand und wird etwas kleiner, damit sie den Text nicht anschneidet. Ohne die
   Breite hier stünde das 680px-Panel zum Teil außerhalb des Schirms und die
   Leiste mit ihm -- wie vorher die native. Inline-Breite, daher !important. */
@media (max-width: 700px) {
  .mb-dossier { width: 100% !important; }
  .mb-dossier-body { padding-left: 22px !important; padding-right: 30px !important; }
  .mb-deep-rail { right: 6px; width: 12px; }
  .mb-deep-thumb { width: 13px; height: 13px; margin-left: -6.5px; }
  .mb-deep-thumb::after { left: 3px; top: 2px; width: 3px; height: 2.5px; }
  .mb-deep-depth { display: none; }
}