/* ao-scrub-uhr.css — gescrubbte Bildsequenz („die Vacamio-Uhr"), 12.09.2026.
 *
 * Übernommen aus dem Vacamio-Hero (apps/web/src/components/landing/hero/hero-scrub.tsx, Betreiber-Entscheid
 * 06.08.): eine hohe Pin-Strecke, darin eine klebende Bühne, darin eine Leinwand. Der Scrollstand in der
 * Pin-Strecke wählt das Einzelbild. Maße und Vignette sind vom Original übernommen, die Farben hängen an
 * Variablen, damit die Bühne sich in die jeweilige Sektion einfügt.
 *
 * Geometrie: Rahmenhöhe = Bühnenhöhe + Scrub-Weg. Bei 600 px Bühne und 220vh Weg scrollt man gut zwei
 * Bildschirmhöhen, um die Sequenz einmal durchzuziehen.
 */

.ao-uhr {
  --ao-uhr-grund: #0E0E0D;
  --ao-uhr-hoehe: 600px;
  --ao-uhr-weg: 220vh;
  --ao-uhr-breite: 1600px;
  --ao-uhr-rand: 48px;
}

.ao-uhr__rahmen {
  position: relative;
  height: calc(var(--ao-uhr-hoehe) + var(--ao-uhr-weg));
  background: var(--ao-uhr-grund);
}

/* Über die volle Fensterbreite ausbrechen. Im Original ist die Bühne ein eigener Abschnitt; hier steht sie
 * im Inhaltsstrom einer Elementor-Spalte und wäre sonst links abgeschnitten. Die Leinwand bleibt bei
 * --ao-uhr-breite gedeckelt, nur der dunkle Grund und die Vignette laufen bis an den Rand.
 * body hat overflow-x: clip, ein Querbalken entsteht dadurch nicht. */
.ao-uhr--voll .ao-uhr__rahmen {
  margin-inline: calc(50% - 50vw);
}

.ao-uhr__buehne {
  position: sticky;
  top: max(88px, calc((100vh - var(--ao-uhr-hoehe)) / 2));
  height: var(--ao-uhr-hoehe);
  overflow: hidden;
}

.ao-uhr__kasten {
  position: relative;
  height: var(--ao-uhr-hoehe);
  max-width: var(--ao-uhr-breite);
  margin: 0 auto;
  padding-inline: var(--ao-uhr-rand);
}

.ao-uhr__innen { position: relative; height: 100%; overflow: hidden; }
.ao-uhr__innen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Weich ins Dunkle auslaufen statt hart abschneiden — die Uhr schwebt, statt in einer Kiste zu stecken. */
.ao-uhr__vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 42px var(--ao-uhr-grund); }
.ao-uhr__vignette::before,
.ao-uhr__vignette::after { content: ''; position: absolute; left: 0; right: 0; height: 110px; }
.ao-uhr__vignette::before { top: 0; background: linear-gradient(to bottom, var(--ao-uhr-grund), transparent); }
.ao-uhr__vignette::after { bottom: 0; background: linear-gradient(to top, var(--ao-uhr-grund), transparent); }

.ao-uhr__sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 820px) {
  .ao-uhr { --ao-uhr-hoehe: 380px; --ao-uhr-rand: 20px; }
}

/* Reduzierte Bewegung: kein Scrub, ein Standbild in derselben Bühne. */
@media (prefers-reduced-motion: reduce) {
  .ao-uhr__rahmen { height: var(--ao-uhr-hoehe); }
}

.ao-uhr--kompakt { margin: 16px 0 24px; }
.ao-uhr--kompakt .ao-uhr__rahmen { height: auto; background: transparent; }
.ao-uhr--kompakt .ao-uhr__buehne { position: relative; top: auto; height: auto; aspect-ratio: 1920 / 1068; }
.ao-uhr--kompakt .ao-uhr__kasten { position: absolute; inset: 0; height: auto; width: 100%; max-width: none; padding: 0; }
.ao-uhr--kompakt .ao-uhr__vignette { box-shadow: inset 0 0 24px 10px var(--ao-uhr-grund); }
.ao-uhr--kompakt .ao-uhr__vignette::before,
.ao-uhr--kompakt .ao-uhr__vignette::after { height: 36px; }

body.postid-19095 .blg-article__body>aside { position: sticky; top: calc(var(--ao-uhr-header, 157px) + 16px); z-index: 5; }
body.postid-19095 .blg-article__body>aside .blg-toc { max-height: calc(100svh - var(--ao-uhr-header, 157px) - 48px); background: rgb(12,14,17); box-shadow: 0 4px 16px rgba(0,0,0,.25); opacity: 1; pointer-events: auto; }
body.postid-19095 .blg-prose h2 { scroll-margin-top: calc(var(--ao-uhr-header, 157px) + 24px); }
body.postid-19095 header.elementor-location-header .ao-header-surface.elementor-sticky--active:not(.elementor-sticky__spacer)::before { background: rgba(8,10,12,.9); opacity: 1; box-shadow: 0 8px 24px rgba(0,0,0,.38); }
body.postid-19095 header.elementor-location-header .ao-header-surface a { text-shadow: 0 1px 4px rgba(0,0,0,.65); }
body.postid-19095 header.elementor-location-header .ao-header-surface img { filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
@media (max-width: 1023px) {
  body.postid-19095 .blg-article__body>aside { top: calc(var(--ao-uhr-header, 80px) + 8px); }
  body.postid-19095 .blg-article__body>aside .blg-toc { margin: 0 0 16px; padding: 12px 14px; max-height: min(42svh, 300px); overflow: auto; }
  body.postid-19095 .blg-prose h2 { scroll-margin-top: calc(var(--ao-uhr-header, 80px) + 88px); }
}
@media (prefers-reduced-motion: reduce) { .ao-uhr--kompakt .ao-uhr__rahmen { height: auto; } }

/* Breite aus dem bestehenden Website-Raster, mit dessen mobilen Seitenrändern. */
.ao-uhr--kompakt.ao-uhr--seitenbreit .ao-uhr__rahmen { width: min(var(--w-max, 1290px), calc(100vw - 2 * var(--gutter, 30px))); }