/* BS Startseite „Wand“ */
html.bsl-on, html.bsl-on body { overflow: hidden !important; background: #0d0d0d !important; }
html.bsl-on #grid, html.bsl-on .lay-content, html.bsl-on #footer-region, html.bsl-on .lay-footer { visibility: hidden !important; }

.bsl-wall {
  position: fixed;
  inset: 0;
  z-index: 10; /* unter Lays Menü (20+) */
  overflow: hidden;
  background: #0d0d0d;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.bsl-stage { position: absolute; inset: 0; }

.bsl-img {
  position: absolute;
  display: block;
  transform: rotate(var(--rot, 0deg)) scale(.92);
  opacity: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  transition: opacity .9s ease var(--delay, 0ms), transform .9s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms);
  will-change: translate;
  backface-visibility: hidden;
  cursor: pointer;
}
.bsl-wall.is-in .bsl-img { opacity: var(--op, 1); transform: rotate(var(--rot, 0deg)) scale(1); }
.bsl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bsl-img.is-gray img { filter: grayscale(1); }

.bsl-cap {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.bsl-cap b { color: #e30613; font-weight: 600; margin-right: 6px; }

@media (hover: hover) {
  .bsl-wall .bsl-img:hover {
    z-index: 500 !important;
    opacity: 1 !important;
    transform: rotate(0deg) scale(1.06) !important;
    transition-delay: 0ms !important;
  }
  .bsl-wall .bsl-img:hover img { filter: none; }
  .bsl-img:hover .bsl-cap { opacity: 1; transform: none; }
}
.bsl-wall.has-focus .bsl-img { opacity: .12 !important; transition-delay: 0ms !important; }
.bsl-wall.has-focus .bsl-img.is-focus { opacity: 1 !important; z-index: 500 !important; transform: rotate(0deg) scale(1.06) !important; }
.bsl-wall.has-focus .bsl-img.is-focus img { filter: none; }

.bsl-red {
  position: absolute;
  z-index: 300;
  width: 22vw;
  height: 40vh;
  background: rgba(227, 6, 19, .62); /* ohne Mischmodus: deutlich weniger Rechenarbeit beim Bewegen */
  pointer-events: none;
  will-change: translate;
  opacity: 0;
  transition: opacity 1.2s ease .6s;
}
.bsl-wall.is-in .bsl-red { opacity: 1; }

.bsl-name {
  position: absolute;
  z-index: 600;
  left: 3vw;
  top: 50%;
  transform: translateY(-40%);
  font-weight: 800;
  font-size: 12vw;
  line-height: .82;
  letter-spacing: -.06em;
  pointer-events: none;
}

.bsl-list {
  position: absolute;
  z-index: 600;
  right: 2.5vw;
  top: 50%;
  transform: translateY(-46%);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 34px);
  line-height: 1.1;
  letter-spacing: -.04em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
}
.bsl-list a { color: #fff !important; text-decoration: none !important; transition: color .15s; }
.bsl-list a:hover, .bsl-list a:focus-visible { color: #e30613 !important; }
.bsl-list sup { color: #e30613; font-size: .32em; font-weight: 500; margin-right: .25em; letter-spacing: 0; vertical-align: top; position: relative; top: .5em; }

/* Logo auf Schwarz: weiß */
html.bsl-on nav.desktop-nav::before,
html.bsl-on .bs-mobile-logo { filter: invert(1); }

/* Phone: kein Parallax, sanftes Treiben; Name unten über dem Menü */
@media (max-width: 699px) {
  .bsl-name { top: auto; bottom: 96px; transform: none; font-size: 19vw; left: 5vw; }
  .bsl-wall.is-in .bsl-img { animation: bsl-drift var(--drift, 8s) ease-in-out infinite alternate; }
  .bsl-red { width: 46vw; height: 30vh; }
}
@keyframes bsl-drift {
  from { translate: 0 0; }
  to { translate: 6px -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bsl-img, .bsl-red { transition: opacity .3s !important; }
  .bsl-wall.is-in .bsl-img { animation: none; }
}