/* Homepage hero carousel, rebuilt from Revolution Slider "Startseite Slider".
   Grid sizes and breakpoints are the slider's own: 800x500 above 1024px,
   640x450 to 1024px, 450x450 to 778px and below. Layers sit on that grid
   and scale with the slide through container units. */

.bc-hero {
  --gw: 800;
  --gh: 500;
  --ease: cubic-bezier(.645, .045, .355, 1);
  position: relative;
  overflow: hidden;
  background: #000;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  outline: 0;
}

.bc-hero__frame {
  position: relative;
  width: min(calc(var(--gw) * 1px), 100%);
  aspect-ratio: var(--gw) / var(--gh);
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s ease;
}

.bc-hero.is-ready .bc-hero__frame { opacity: 1; }

.bc-hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
  transform: translateX(calc(var(--o, 0) * 100%));
  opacity: .5;
  cursor: pointer;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.bc-hero__slide.is-active { opacity: 1; cursor: grab; }
.bc-hero__slide.is-jump { transition: none; }

.bc-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}

/* Layers: grid pixel values per level come from inline --x0..--x3 etc.
   Text is masked top and bottom only, the bar on all sides. */

.bc-hero__layer {
  --u: calc(100cqw / var(--gw));
  --x: var(--x0);
  --y: var(--y0);
  --w: var(--w0);
  --fw: var(--fw0);
  --c: var(--c0, #fff);
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  clip-path: inset(0 -100vw);
  color: var(--c);
  font-family: "Roboto Slab", Georgia, serif;
}

.bc-hero__slide:not(.is-active) .bc-hero__layer { visibility: hidden; }

.bc-hero__in {
  display: block;
  transform: var(--from);
}

.bc-hero__slide.is-in .bc-hero__in {
  transform: none;
  transition: transform 1.5s var(--ease) .5s;
}

.bc-hero__slide.is-in.is-out .bc-hero__in {
  transform: var(--to);
  transition: transform 1s var(--ease);
}

.bc-hero__title {
  --from: translateY(100%);
  --to: translateY(100%);
  width: calc(var(--w) * var(--u));
  font-size: calc(70 * var(--u));
  font-weight: 300; /* today's Roboto Slab 400 is heavier than the 2017 cut */
  line-height: calc(60 * var(--u));
}

.bc-hero__bar {
  --from: translateX(-100%);
  --to: translateX(100%);
  width: calc(var(--w) * var(--u));
  height: calc(10 * var(--u));
  clip-path: inset(0);
}

.bc-hero__bar .bc-hero__in {
  height: 100%;
  background: #fff;
}

.bc-hero__sub {
  --from: translateY(-100%);
  --to: translateY(100%);
  font-size: calc(15 * var(--u));
  font-weight: var(--fw);
  line-height: calc(24 * var(--u));
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.bc-hero__sub:hover { color: color-mix(in srgb, var(--c) 65%, transparent); }

/* Notebook */
@media (max-width: 1024px) {
  .bc-hero { --gw: 640; --gh: 450; }
  .bc-hero__layer {
    --x: var(--x1);
    --y: var(--y1);
    --w: var(--w1);
    --fw: var(--fw1);
    --c: var(--c1, #fff);
  }
}

/* Tablet and mobile: the title is anchored above the bar, so three-line
   titles no longer run into it, and subtitles wrap inside the slide. */
@media (max-width: 778px) {
  .bc-hero { --gw: 450; --gh: 450; }
  .bc-hero__layer {
    --x: var(--x2);
    --y: var(--y2);
    --w: var(--w2);
    --fw: var(--fw2);
    --c: var(--c2, #fff);
  }
  .bc-hero__title { top: auto; bottom: calc(73 * var(--u)); }
  .bc-hero__bar { height: calc(4 * var(--u)); }
  .bc-hero__sub {
    width: calc((var(--gw) - var(--x) - 30) * var(--u));
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .bc-hero__layer {
    --x: var(--x3);
    --y: var(--y3);
    --w: var(--w3);
    --fw: var(--fw3);
    --c: var(--c3, #fff);
  }
  .bc-hero__title { bottom: calc(173 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .bc-hero__slide,
  .bc-hero__frame,
  .bc-hero__slide.is-in .bc-hero__in { transition: none; }
}