/* =====================================================================
   JB Reitsport · „Noir“ – Über mich (ueber-mich.html)
   Nur seitenspezifisch, alle Klassen mit Präfix ubm-. Basis/Komponenten: css/site.css (nicht ändern).
   Dramaturgie: Hero D Porträt (Bebas) · Geschichte mit Zeitlinie 5. → fast 25 → heute 29 (Serif, Ziffern per
   Masken-Reveal statt Zähler) + Text-Bild-Wechsel · „Aus dem Reitsport“ (Serif, neutral – die Turnierfotos zeigen nicht
   bestätigt Jennifer) · Warum Pferdephysiotherapie? (Serif, Titel | Text) · Signatur Sticky-Fotofilm „der Rappe
   entspannt sich“ (Bebas, Zuhause der Werte) · Ziel als heller Moment auf Elfenbein (.lumen, Serif) · JB Reitsport
   (Bebas) · Abschluss 150408 (Serif). Champagner-Kursiv nur zweimal: Hero „Jennifer Berndt.“ und „wo es gerade steht,“.
   ===================================================================== */

/* ---------------------------------------------------------------- Hero D · Porträt 150403 */
/* Review 3: Der Name steht nur noch einmal – der Riesenname ist die H1 („Mein Name ist“ in Serif-Kursiv darüber,
   Jennys eigener Einstieg). Die Champagner-Kontur davor bleibt Dekor (gleiche Zeilen, aria-hidden). */
.ubm-hero .hero__name--line { -webkit-text-stroke-width: 1.2px; }
.ubm-name { margin-block: 0; }
.ubm-name__pre {
  display: block; margin: 0 0 .14em .03em; white-space: nowrap;
  font: italic 400 clamp(25px, 7vw, 36px)/1.1 var(--f-serif); letter-spacing: -.005em; text-transform: none;
  color: var(--accent);
}
.hero__name--line .ubm-name__pre { visibility: hidden; }
.js .ubm-name .ubm-name__pre { animation: hero-rise 1.2s var(--ease-out) both; animation-delay: calc(var(--hd) + .02s); }
.ubm-hero .hero__sub { max-width: 40ch; margin-top: 0; }

/* Mobil/Tablet (Zusatzrunde, Juror: vorher kleines Porträt im Kasten, Kontur-Buchstaben über Jennys Kopf): Porträt
   randlos über die volle Breite unter dem Header, Gesicht und Pferdekopf im oberen Teil frei. Der Name beginnt auf der
   unteren Bildkante: „Mein Name ist“ und „JENNIFER“ liegen als Kontur über dem dunklen Bildende (die volle Schrift
   liegt dahinter), „BERNDT“ steht voll auf Schwarz – der Name läuft aus dem Bild. Aktion im ersten Bild (375×667). */
@media (max-width: 1023.98px) {
  .ubm-hero { padding-top: 0; }
  .ubm-hero .hero__name { grid-row: 2; font-size: clamp(60px, 20vw, 120px); margin-top: calc(-1 * (clamp(25px, 7vw, 36px) * 1.24 + clamp(60px, 20vw, 120px) * .86)); }
  .ubm-hero .hero__portrait {
    grid-row: 1; align-self: start; justify-self: stretch;
    width: 100%; aspect-ratio: auto; height: clamp(320px, 56svh, 640px); margin: 0; border-radius: 0;
  }
  .ubm-hero .hero__portrait::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(var(--night-rgb), .7) 0%, rgba(var(--night-rgb), 0) 20%),
      linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .88) 16%, rgba(var(--night-rgb), .4) 34%, rgba(var(--night-rgb), 0) 50%);
  }
  .ubm-hero .hero__portrait .hero__media img { object-position: var(--pos-m, 40% 10%); }
  .ubm-hero .hero__content { grid-row: 3; grid-column: 1; margin-top: 20px; }
  .ubm-hero .hero__ctas { margin-top: 18px; }
  /* Endnote 8,4: Schalter rechts am Ende der Aktionszeile statt oben rechts unter dem runden Menüknopf */
  .ubm-hero .hero__bar {
    position: relative; z-index: 5; grid-row: 3; grid-column: 1; align-self: end; justify-self: end;   /* Spalte 1: sonst legte das Raster eine zweite Spalte an und das Porträt war nur 326 statt 390 px breit (letzte Runde) */
    left: auto; right: auto; top: auto; bottom: auto; margin: 0 var(--gutter) 7px 0; padding: 0;
  }
  .ubm-hero .scroll-hint { display: none; }
  /* Letzte Runde: wie am Desktop steht der volle Name als Ganzes VOR dem Bild – vorher war „JENNIFER“ mobil goldene
     Kontur (über dem Foto) und „BERNDT“ gefüllt (auf Schwarz), ein Wechsel pro Wort. Die Kontur-Kopie entfällt auch
     mobil; ein weicher Schatten und der Verlauf der Bildunterkante tragen die Schrift. */
  .ubm-hero .hero__name--line { display: none; }
  .ubm-hero .ubm-name { z-index: 5; text-shadow: 0 2px 28px rgba(var(--night-rgb), .7), 0 0 2px rgba(var(--night-rgb), .35); }
  .ubm-hero .ubm-name .ubm-name__pre { text-shadow: 0 1px 14px rgba(var(--night-rgb), .85); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ubm-hero .hero__portrait { height: clamp(420px, 58svh, 720px); }
}
@media (min-width: 1024px) {
  .ubm-hero { --name-fs: clamp(120px, min(16vw, 25svh), 300px); }
  .ubm-hero .hero__name--line { -webkit-text-stroke-width: 1.5px; }
  .ubm-name__pre { font-size: clamp(30px, calc(var(--name-fs) * .17), 50px); }
  /* Foto randabfallend: von 75 % der Breite von „JENNIFER“ bis zur rechten Fensterkante, volle Höhe unter dem
     Header (vorher schwebende Box mit 320–568 px leerem Schwarz rechts) */
  .ubm-hero .hero__portrait {
    top: var(--header-h); bottom: 0; right: 0; left: calc(var(--gutter) + 2.12 * var(--name-fs));
    width: auto; height: auto; max-width: none; aspect-ratio: auto; border-radius: 0;
    justify-self: stretch; align-self: stretch;   /* abs. im Grid: sonst schrumpft die Box auf 0 px Breite */
  }
  .ubm-hero .hero__portrait .hero__media img { object-position: var(--pos, 40% 6%); }
  /* weiche Ränder: links in die Namensbahn, oben unter den Header, unten in die nächste Sektion */
  .ubm-hero .hero__portrait::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(var(--night-rgb), .9) 0%, rgba(var(--night-rgb), .42) 7%, rgba(var(--night-rgb), 0) 17%),
      linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 9%),
      linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .4) 9%, rgba(var(--night-rgb), 0) 22%);
  }
  .ubm-hero .hero__content { margin-top: 36px; }
  /* Endnote 8,4: der Name wechselte genau an der Fotokante von voll zu Kontur („JENNIF|ER“) und las sich wie halb
     geladene Schrift. Jetzt steht der volle Name als Ganzes VOR dem Porträt (weicher Schatten auf dem dunklen
     Bildrand); die Kontur-Kopie entfällt am Desktop. */
  .ubm-hero .hero__name--line { display: none; }
  .ubm-hero .ubm-name { z-index: 3; text-shadow: 0 2px 40px rgba(var(--night-rgb), .55); }
}
@media (min-width: 1024px) and (max-height: 720px) {
  .ubm-hero .hero__sub { display: none; }       /* flache Laptop-Fenster: Name + Aktion + Schalter im ersten Bildschirm */
}
@media (prefers-reduced-motion: reduce) {
  .js .ubm-name .ubm-name__pre, .js .ubm-hero .hero__name--line .ubm-name__pre { animation-name: hero-fade; animation-timing-function: ease; }
}

/* ---------------------------------------------------------------- Geschichte · Zeitlinie */
.ubm-story-of { overflow: clip; }
.ubm-intro { display: grid; }
.ubm-intro__eyebrow { margin-bottom: 26px; }
.ubm-intro__title { font-size: var(--fs-serif-l); }

/* Zeitlinie: mobil senkrecht (Achse links, Punkte auf der Achse), ab 768 px waagerecht */
.ubm-time { position: relative; margin-top: clamp(52px, 7vw, 112px); }
.ubm-time__list { display: grid; gap: 46px; padding-left: 40px; }
.ubm-time__axis { position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.ubm-time__axis::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  transform-origin: 50% 0;
}
.js .ubm-time__axis::after { transform: scaleY(0); transition: transform 2.2s var(--ease-inout) .2s; }
.js .ubm-time.is-in .ubm-time__axis::after { transform: none; }
.ubm-time__item { position: relative; }
.ubm-time__item::before {
  content: ""; position: absolute; left: -40px; top: 10px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--night); border: 1px solid var(--accent);
  box-shadow: 0 0 0 5px var(--night);
}
.js .ubm-time__item::before { transform: scale(0); transition: transform .9s var(--ease-out); transition-delay: calc(var(--d, 0s) + .35s); }
.js .ubm-time__item.is-in::before { transform: none; }
.ubm-stat { margin: 0; }
.ubm-stat .stat__num { font-size: clamp(104px, 30vw, 150px); }
.ubm-stat .stat__label { margin-top: 16px; max-width: 24ch; }
.ubm-stat .stat__pre { font-size: clamp(28px, 7vw, 36px); }

.ubm-intro__after {
  margin: clamp(52px, 6vw, 80px) 0 0; max-width: 24ch;
  font: 400 clamp(30px, 3.5vw, 54px)/1.12 var(--f-serif); letter-spacing: -.012em; color: var(--bone);
  hyphens: manual; -webkit-hyphens: manual; text-wrap: balance;
}

@media (min-width: 768px) {
  .ubm-time__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding: 48px 0 0; }
  .ubm-time__axis { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .ubm-time__axis::after { background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo)); transform-origin: 0 50%; }
  .js .ubm-time__axis::after { transform: scaleX(0); }
  .ubm-time__item::before { left: 0; top: -52.5px; }
  .ubm-stat .stat__num { font-size: clamp(110px, 13vw, 210px); }
  .ubm-stat .stat__pre { font-size: clamp(28px, 2.6vw, 40px); }
}
@media (min-width: 1024px) {
  .ubm-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
  .ubm-intro__eyebrow, .ubm-intro__title, .ubm-time { grid-column: 1 / -1; }
  /* setzt an der zweiten Spalte der Zeitlinie an („fast 25“ → „In dieser Zeit …“) */
  .ubm-intro__after { grid-column: 1 / -1; margin-left: calc((100% + 32px) / 3); max-width: 24ch; font-size: clamp(34px, 2.9vw, 50px); }
}

/* Text-Bild-Wechsel 145656 (Gesicht im Fokus, Anschnitt bis zum linken Fensterrand) */
.ubm-alt { margin-top: clamp(80px, 9vw, 136px); }
.ubm-alt .alt__text em { font-family: var(--f-serif); font-size: 1.16em; line-height: 1; color: var(--bone); }
.ubm-alt .alt__title { font-size: clamp(40px, 4.4vw, 72px); }
@media (max-width: 1023.98px) {
  .ubm-alt .alt__frame { aspect-ratio: 4 / 3.4; }
}

/* ---------------------------------------------------------------- Reitsport-Strecke (Archivlook, neutral beschriftet) */
.ubm-reel { position: relative; padding-top: var(--sec-s); }
.ubm-reel__head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 76px); }
.ubm-reel__title { font-size: var(--fs-serif-xl); line-height: .98; }   /* Zusatzrunde: Serif aufrecht, neutral „Aus dem Reitsport“ */
.ubm-reel__text { margin: 0; color: var(--grey); max-width: 46ch; }
/* fast monochrom: die Turnierfotos treten als Erinnerung zurück, rote Banden verlieren ihre Farbe (Regel 6) */
.ubm-reel__strip .reel__item img {
  object-position: var(--pos-m, var(--pos, 50% 40%));
  filter: grayscale(.88) contrast(1.08) brightness(.9);
}
.ubm-reel__strip .reel__item::after { background: linear-gradient(180deg, rgba(var(--night-rgb), .35) 0%, rgba(var(--night-rgb), 0) 22%, rgba(var(--night-rgb), 0) 60%, rgba(var(--night-rgb), .78) 100%); }
/* Untertitel sichtbar im Bild (Review 3: Turnierfotos nie als „Jennifer“ lesbar) */
.ubm-reel__strip .reel__cap { bottom: 22px; font-size: clamp(20px, 1.6vw, 24px); }
/* 151820: Ausschnitt ohne Sponsorbande und roten Hindernis-Streifen – Reiterin, Hals und Kopf des Pferdes */
.ubm-reel__strip .ubm-reel__zoom img { transform: scale(1.5); transform-origin: 35% 12%; }
.js .ubm-reel__strip .ubm-reel__zoom[data-reveal="clip"] img { transform: scale(1.68); }          /* vor dem Auftritt (1,12 × 1,5) */
.js .ubm-reel__strip .ubm-reel__zoom[data-reveal="clip"].is-in img { transform: scale(1.5); }
.js .ubm-reel__strip .ubm-reel__zoom[data-reveal="clip"].is-in:hover img { transform: scale(1.53); }
.no-anim .ubm-reel__strip .ubm-reel__zoom[data-reveal="clip"] img { transform: scale(1.5) !important; }
/* mobil: Wisch-Leiste statt vier Bilder untereinander (vorher gut 1 770 px am Stück) */
@media (max-width: 767.98px) {
  .ubm-reel__strip.swipe__track { --swipe-w: 78%; --swipe-gap: 10px; gap: var(--swipe-gap); }
  .ubm-reel__strip .reel__item, .ubm-reel__strip .reel__item:nth-child(even) { width: auto; justify-self: stretch; aspect-ratio: 4 / 5; }
  .ubm-reel__strip .reel__cap { bottom: 16px; font-size: 19px; }
}
@media (min-width: 768px) {
  .ubm-reel__strip .reel__item img { object-position: var(--pos, 50% 40%); }
  /* ab Tablet wieder die randlose Reihe gleicher Höhe – keine Wisch-Leiste */
  .ubm-reel__strip.swipe__track { display: flex; overflow: visible; padding: 0; scroll-snap-type: none; gap: 6px; }
  .ubm-reel__swipe .swipe__ui { display: none; }
}
@media (min-width: 1024px) {
  .ubm-reel__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; }
  .ubm-reel__text { padding-bottom: .5em; font-size: 19px; }
}

/* ---------------------------------------------------------------- Warum Pferdephysiotherapie? (Titel | Text)
   Endnote 8,4: ohne Bogen-Figur – die Kette „Bewegung – Verhalten – Training – Alltag“ steht groß nur noch auf
   leistungen.html (Akt III) */
.ubm-why__grid { display: grid; gap: clamp(26px, 3vw, 40px); }
.ubm-why__title { font-size: clamp(42px, 5.4vw, 82px); margin: 0; }   /* „Pferdephysiotherapie?“ passt bis 1920 in eine Zeile (Review 3) */
.ubm-why__lead {
  margin: 0 0 22px; max-width: 30ch;
  font: 400 clamp(25px, 2.2vw, 34px)/1.24 var(--f-serif); letter-spacing: -.006em; color: var(--bone);
  hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty;
}
.ubm-why__copy { color: var(--grey); max-width: 56ch; }
.ubm-why__text .link { margin-top: 6px; }
/* kurze Spalten mobil ohne automatische Trennung (wirkt dort zerhackt) */
@media (max-width: 767.98px) { .ubm-why__copy, .ubm-reel__text, .ubm-brand__text, .ubm-story__lead, .ubm-alt .alt__text p { hyphens: manual; -webkit-hyphens: manual; } }
@media (min-width: 1024px) {
  .ubm-why__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
  .ubm-why__text { padding-top: .6em; }
}

/* ---------------------------------------------------------------- Signatur · Sticky-Fotofilm (.story) */
.ubm-story__head { display: grid; gap: 24px; margin-bottom: clamp(48px, 7vw, 104px); }
.ubm-story__title { font-size: var(--fs-d-l); }
.ubm-story__lead { margin: 0; color: var(--grey); max-width: 46ch; }
.ubm-story .story__text p + p { margin-top: -.2em; }
.ubm-story__link { margin-top: 8px; }
.ubm-story__cap, .ubm-story__ticks { display: none; }
/* Mobil/Tablet (Endnote 8,4): ein Fotofilm statt drei fast gleicher Standbilder untereinander (≈ 1 300 px kürzer) */
.ubm-story__film { margin: 0 calc(-1 * var(--gutter)) clamp(40px, 9vw, 64px); }
.ubm-story__film .fotofilm__frames { border-radius: 0; aspect-ratio: 4 / 4.6; }
.ubm-story__film .figure__cap { margin-inline: var(--gutter); }
.ubm-story .story__still { display: none; }
.ubm-story .story__no { font-size: clamp(64px, 17vw, 88px); }
.ubm-story .story__steps { gap: clamp(44px, 10vw, 72px); }
@media (min-width: 1024px) { .ubm-story__film { display: none; } }
@media (min-width: 1024px) {
  .ubm-story__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; }
  .ubm-story__lead { padding-bottom: .4em; }
  .ubm-story .story__frames::after { z-index: 2; background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 58%, rgba(var(--night-rgb), .72) 100%); }
  /* Untertitel und Fortschritt wie beim Fotofilm – zeigen, was im Bild passiert */
  .ubm-story__cap {
    display: block; position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 46px; margin: 0;
    font: italic 400 clamp(21px, 1.7vw, 27px)/1.2 var(--f-serif); color: var(--bone);
  }
  .ubm-story__cap span { display: inline-block; transition: opacity .26s var(--ease-std), transform .5s var(--ease-out); }
  .ubm-story__cap span.is-swap { opacity: 0; transform: translate3d(0, 8px, 0); }
  .ubm-story__ticks { display: flex; position: absolute; z-index: 3; left: 26px; right: 26px; bottom: 26px; gap: 6px; }
  .ubm-story__ticks span { position: relative; flex: 1; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(var(--bone-rgb), .26); }
  .ubm-story__ticks span::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .ubm-story__ticks span:first-child { --p: 1; }
  /* scroll-gekoppelt (js/ueber-mich.js): Deckkraft und Zoom kommen vom Scrollen, nicht aus der Übergangs-Zeit */
  .ubm-story.is-scrub .story__frame { transition: none; will-change: opacity, transform; }
  .ubm-story .story__step { min-height: 78svh; }
  /* nicht aktive Schritte: Führung über Farbe statt Deckkraft (WCAG 1.4.3) steht jetzt global in site.css (.story) */
}
/* Tablet: Bild je Schritt etwas flacher, damit Text und Bild gemeinsam in den Bildschirm passen */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ubm-story .story__still { aspect-ratio: 4 / 4.2; }
}

/* ---------------------------------------------------------------- Mein Ziel · heller Moment (.lumen, Endnote 8,4)
   Desktop asymmetrisch (Label links, Zitat rechts linksbündig) – die anderen hellen Momente stehen zentriert */
.ubm-goal .quote p { max-width: 19ch; font-size: clamp(34px, 5vw, 86px); line-height: 1.05; }
@media (min-width: 1024px) {
  .ubm-goal { text-align: left; }
  .ubm-goal .quote-stage__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 48px; justify-items: start; align-items: start; }
  .ubm-goal .quote-stage__label { grid-column: 1; grid-row: 1 / span 3; margin: 0; padding: .9em 0 0; }
  .ubm-goal .quote, .ubm-goal .quote-stage__rule, .ubm-goal .quote-stage__sig { grid-column: 2; }
  .ubm-goal .quote p { margin-inline: 0; max-width: 18ch; font-size: clamp(44px, 4.4vw, 74px); }
  .ubm-goal .quote-stage__rule { margin-inline: 0; }
  .js .ubm-goal .quote-stage__rule[data-draw] { transform-origin: 0 50%; }
  .ubm-goal .quote-stage__sig { padding-left: 0; }
  .ubm-goal .quote-stage__light { left: 64%; }
}

/* ---------------------------------------------------------------- JB Reitsport · Anspruch zeichnet sich unter */
.ubm-brand__grid { display: grid; gap: 44px; }
.ubm-brand__title { font-size: clamp(76px, 21vw, 124px); line-height: .88; }
.ubm-brand__sub {
  margin: 14px 0 0; max-width: 17ch;
  font: italic 400 clamp(27px, 7vw, 40px)/1.12 var(--f-serif); color: var(--grey); hyphens: manual; text-wrap: balance;
}
.ubm-brand__text { color: var(--grey); max-width: 50ch; margin: 0; }
.ubm-claim {
  margin: 34px 0 38px; max-width: 22ch;
  font: 400 clamp(30px, 3.4vw, 54px)/1.24 var(--f-serif); letter-spacing: -.01em; color: var(--bone);
  hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty;
}
/* Die vier Ansprüche hellen sich nacheinander auf (Licht statt Unterstreichung – sie sollen nicht wie Links wirken) */
.ubm-claim { color: var(--grey); }
.ubm-claim__u { color: var(--bone); }
.js .ubm-claim__u { color: rgba(var(--bone-rgb), .42); transition: color 1.4s var(--ease-std); transition-delay: calc(.55s + var(--u, 0) * .42s); }
.js .ubm-claim.is-in .ubm-claim__u { color: var(--bone); }
.ubm-brand__links { display: flex; flex-wrap: wrap; gap: 4px 30px; }
@media (min-width: 1024px) {
  .ubm-brand__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 128px); align-items: start; }
  .ubm-brand__head { position: sticky; top: calc(var(--header-h) + 48px); }
  .ubm-brand__title { font-size: clamp(88px, 7.2vw, 136px); }
  .ubm-brand__sub { font-size: clamp(30px, 2.6vw, 42px); }
  .ubm-brand__body { padding-top: clamp(8px, 2vw, 40px); }
  .ubm-brand__text { font-size: 19px; }
}
.ubm-brand { overflow: clip; }

/* ---------------------------------------------------------------- Abschluss 150408 (Cinemagraph) */
.ubm-finale .cta-band__media img { object-position: 30% 16%; }
/* Letzte Runde (mobil): das goldene Label lag mit 24svh Überlappung auf Jennys hellem Shirt (kontrastschwach). Der
   Text setzt jetzt erst im dunklen unteren Bildende an (9svh Überlappung), das Foto steht darüber frei. */
@media (max-width: 1023.98px) {
  .ubm-finale .cta-band__content { margin-top: -9svh; }
  .ubm-finale .cta-band__fade {
    background:
      linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 15%),
      linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .9) 12%, rgba(var(--night-rgb), 0) 34%);
  }
}
@media (min-width: 1024px) { .ubm-finale .cta-band__media img { object-position: 50% 8%; } }

/* ---------------------------------------------------------------- ohne Skript-Bibliothek: alles fertig zeigen */
.no-anim .ubm-time__axis::after, .no-anim .ubm-time__item::before { transform: none !important; }
.no-anim .ubm-claim__u { color: var(--bone) !important; }

/* ---------------------------------------------------------------- ruhige Fassung („Bewegung reduzieren“): Überblenden statt Zeichnen */
@media (prefers-reduced-motion: reduce) {
  .js .ubm-time__axis::after { transform: none; opacity: 0; transition: opacity 1.2s ease .2s; }
  .js .ubm-time.is-in .ubm-time__axis::after { opacity: 1; }
  .js .ubm-time__item::before { transform: none; opacity: 0; transition: opacity .9s ease; transition-delay: calc(var(--d, 0s) + .3s); }
  .js .ubm-time__item.is-in::before { opacity: 1; }
  .js .ubm-claim__u { transition: color 1.2s ease; transition-delay: calc(.4s + var(--u, 0) * .35s); }
  .ubm-story__cap span { transition: opacity .4s ease; }
  .ubm-story__cap span.is-swap { transform: none; }
  .ubm-reel__strip .reel__item:hover img { transform: none; }
  .ubm-reel__strip .ubm-reel__zoom img, .ubm-reel__strip .ubm-reel__zoom:hover img,
  .js .ubm-reel__strip .ubm-reel__zoom[data-reveal="clip"] img, .js .ubm-reel__strip .ubm-reel__zoom[data-reveal="clip"].is-in:hover img { transform: scale(1.5); transition: none; }
}