/* Bereichsleiste am Handy (23.10.2026)
   Eine schmale Leiste direkt unter dem Kopf, sobald der Startfilm vorbei ist.
   Sie zeigt, wo man auf der Seite ist, weicht beim Weiterlesen nach oben aus
   und kommt beim Zurückscrollen wieder. Desktop bleibt unverändert.
   Farben kommen pro Website über --bl-* aus der Seite. */
.bl{display:none}
@media (max-width:900px){
 html{scroll-padding-top:var(--bl-pad,150px)}
 .bl{display:block;position:fixed;left:0;right:0;top:0;z-index:var(--bl-z,48);
  transform:translate3d(0,var(--bl-top,76px),0);
  opacity:0;visibility:hidden;pointer-events:none;
  background:var(--bl-bg,rgba(11,28,36,.86));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--bl-line,rgba(244,241,234,.12));
  transition:opacity .4s cubic-bezier(.22,.7,.16,1),visibility 0s linear .4s}
 .bl.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s cubic-bezier(.22,.7,.16,1)}
 .bl-track{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--bl-gutter,20px);
  padding:7px var(--bl-gutter,20px) 8px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent)}
 .bl-track::-webkit-scrollbar{display:none}
 .bl-track a{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;box-sizing:border-box;
  border:1px solid var(--bl-chip-line,rgba(244,241,234,.28));border-radius:999px;
  color:var(--bl-fg,#f4f1ea);background:transparent;
  font:500 14px/1 var(--bl-font,inherit);letter-spacing:.01em;text-transform:none;text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}
 .bl-track a[aria-current]{background:var(--bl-active-bg,#d9bb87);border-color:var(--bl-active-bg,#d9bb87);color:var(--bl-active-fg,#0b1c24)}
 .bl-track a:focus-visible{outline:2px solid var(--bl-active-bg,#d9bb87);outline-offset:2px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
 .bl,.bl.is-on,.bl-track a{transition:none}
}