/* OMSAG LP · Messe · 01 Hero V2 (Video)
   Aufbau wie der Heroshot der Startseite: heller Verlauf als Hintergrund,
   links die Ansage, rechts das Video. Das Weiss im Video wird nicht
   ausgestanzt, sondern weggerechnet — "darken" laesst nur durch, was dunkler
   ist als der Untergrund. Deshalb gibt es keine Kante und keinen Kasten. */

.omsag-lp-mherob {
  --b:    var(--omsag-lp-brand, #50aa3c);
  --bl:   var(--omsag-lp-lime, #aad337);
  --ink:  var(--omsag-lp-ink, #232730);
  --ts:   var(--omsag-lp-text-soft, #5a6270);
  --mut:  var(--omsag-lp-muted, #8a93a3);
  --ln:   var(--omsag-lp-line, #e6e8ec);
  --ez:   var(--omsag-lp-ease, cubic-bezier(.2,.7,.2,1));
  --font: var(--omsag-lp-font, 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  --grid: 1450px;     /* Rasterbreite, gleiche wie bei der Ansage */
  --gpad: 28px;       /* seitlicher Innenabstand des Rasters */
  --ipad: 28px;       /* Innenabstand der Ansage — folgt dem Sondermenue */
  --po: clamp(26px, 3vw, 40px);   /* Ueberstand des Schleiers ueber den Text */
  --pgap:  68px;      /* Abstand der Partnerzeichen zum Kasten darueber */
  --pgapt: 44px;
  --pgapm: 34px;
  --vw: 58%;          /* Breite der Videoflaeche im Raster */
  --blend: darken;    /* Weiss wegrechnen */
  --vpos: 100%;       /* waagerechte Lage im Rahmen */
  --vposy: 50%;       /* senkrechte Lage im Rahmen */
  --vscale: 1;        /* Feinjustierung der Groesse */
  --vlift: 1.08;      /* hebt ein leicht graues Weiss auf reines Weiss */
  --bx: 1;            /* Lage der Standkarte: 0 = links/oben, 1 = rechts/unten */
  --by: .68;
  --mratio: 4 / 5;    /* Hoehe des Videobands auf dem Handy */
  --mposy: 20%;

  /* isolation haelt die Mischung in dieser Sektion — sie soll sich am
     Verlauf hier orientieren, nicht an dem, was darunter liegt. */
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(92svh, 900px);
  padding: clamp(52px, 6vw, 88px) 0;
  font-family: var(--font); color: var(--ink);
  background-color: #fff;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
.omsag-lp-mherob, .omsag-lp-mherob *, .omsag-lp-mherob *::before, .omsag-lp-mherob *::after { box-sizing: border-box; }
.omsag-lp-mherob :is(h1,h2,p,li,span,strong,em,b) { overflow-wrap: break-word; }

/* ── Videoflaeche ───────────────────────────────────────────────────────── */
/* Kein z-index: sonst entstuende hier ein eigener Stapel und die Mischung
   fiele auf den leeren Rahmen statt auf den Verlauf der Sektion. */
/* Das Video steht nicht am Bildschirmrand, sondern in der rechten Haelfte des
   Rasters — dieselbe Spur, in der auch die Ansage sitzt. */
.omsag-lp-mherob__stagewrap {
  position: absolute; top: 0; bottom: 0;
  left: var(--gpad); right: var(--gpad);
  max-width: calc(var(--grid) - var(--gpad) * 2);
  margin-inline: auto;
  pointer-events: none;
}
.omsag-lp-mherob__stage {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--vw);
}
.omsag-lp-mherob__media {
  display: block; border: 0;
  mix-blend-mode: var(--blend);
  /* Das Weiss im Video ist nach der Komprimierung selten reines Weiss. Unter
     "Abdunkeln" bliebe es als grauer Kasten stehen — die Aufhellung schiebt es
     ueber die Schwelle, danach verschwindet es restlos. */
  filter: brightness(var(--vlift)) contrast(1.04);
  /* Links laeuft das Bild zur Ansage hin aus, rechts nimmt es die Kante mit —
     sonst steht dort eine sichtbare senkrechte Linie. */
  -webkit-mask-image: var(--vmask);
          mask-image: var(--vmask);
}

/* Volle Hoehe (Voreinstellung): das Video wird ueber die Hoehe skaliert und
   darf dabei seitlich ueber das Raster hinauslaufen. Nichts wird beschnitten,
   und oben wie unten bleibt kein Streifen frei. */
.omsag-lp-mherob--fit-height { --vmask: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 6%, #000 18%, #000 84%, rgba(0,0,0,.5) 95%, transparent 100%); }
.omsag-lp-mherob--fit-height .omsag-lp-mherob__stage { overflow: visible; }
.omsag-lp-mherob--fit-height .omsag-lp-mherob__media {
  position: absolute; top: 0; bottom: 0; left: var(--vpos);
  height: 100%; width: auto; min-width: 100%; max-width: none;
  object-fit: cover; object-position: center var(--vposy);
  transform: translateX(calc(-1 * var(--vpos))) scale(var(--vscale));
  transform-origin: center var(--vposy);
}

/* Flaeche fuellen bzw. ganz zeigen — beide bleiben im Rahmen. */
.omsag-lp-mherob--fit-cover,
.omsag-lp-mherob--fit-contain { --vmask: linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 5%, rgba(0,0,0,.88) 12%, #000 20%); }
.omsag-lp-mherob--fit-cover .omsag-lp-mherob__stage,
.omsag-lp-mherob--fit-contain .omsag-lp-mherob__stage { overflow: hidden; }
.omsag-lp-mherob--fit-cover .omsag-lp-mherob__media,
.omsag-lp-mherob--fit-contain .omsag-lp-mherob__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-position: var(--vpos) var(--vposy);
  transform: scale(var(--vscale)); transform-origin: var(--vpos) var(--vposy);
}
.omsag-lp-mherob--fit-cover .omsag-lp-mherob__media { object-fit: cover; }
.omsag-lp-mherob--fit-contain .omsag-lp-mherob__media { object-fit: contain; }
.omsag-lp-mherob__video { opacity: 0; transition: opacity .5s var(--ez); }
.omsag-lp-mherob__video.is-ready { opacity: 1; }
.omsag-lp-mherob__poster { transition: opacity .4s var(--ez); }
.omsag-lp-mherob__poster.is-hidden { opacity: 0; }

/* ── Standkarte ─────────────────────────────────────────────────────────── */
/* Liegt in derselben Flaeche wie das Video, mischt sich aber ausdruecklich
   nicht mit — sonst wuerde der dunkle Kasten den Verlauf schlucken. */
/* Die Karte sitzt frei in der Videoflaeche: bei 0 % buendig links bzw. oben,
   bei 100 % buendig rechts bzw. unten — dazwischen stufenlos. Der Versatz
   ueber translate sorgt dafuer, dass sie nie aus der Flaeche laeuft. */
.omsag-lp-mherob__badge {
  position: absolute; z-index: 2; pointer-events: auto; mix-blend-mode: normal;
  --pad: clamp(20px, 2.6vw, 44px);
  left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--bx));
  top:  calc(var(--pad) + (100% - 2 * var(--pad)) * var(--by));
  transform: translate(calc(100% * -1 * var(--bx)), calc(100% * -1 * var(--by)));
  margin: 0;
  /* Ohne feste Breite wuerde die Karte auf den Rest zusammenschrumpfen, der
     rechts von ihrer Setzmarke noch frei ist. max-content misst am Inhalt. */
  width: max-content;
  max-width: min(330px, calc(100% - 2 * var(--pad)));
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 18px;
  color: #fff; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(140deg, rgba(24,30,38,.9), rgba(14,18,25,.84));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 26px 60px -30px rgba(15,17,21,.7);
}
.omsag-lp-mherob__badge-logo { flex: none; width: auto; height: 30px; display: block; }
.omsag-lp-mherob__badge-body { display: block; min-width: 0; }
.omsag-lp-mherob__badge-kicker {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bl); margin-bottom: 4px;
}
.omsag-lp-mherob__badge-title { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.018em; line-height: 1.2; }
.omsag-lp-mherob__badge-title i { font-style: normal; margin: 0 .5em; opacity: .55; font-weight: 400; }
.omsag-lp-mherob__badge-sub { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72); }

/* Helle Fassung — falls die dunkle Karte auf dem Verlauf zu schwer wirkt. */
.omsag-lp-mherob__badge--light {
  color: var(--ink); border-color: rgba(35,39,48,.08);
  background: rgba(255,255,255,.82);
  box-shadow: 0 26px 60px -34px rgba(15,17,21,.45);
}
.omsag-lp-mherob__badge--light .omsag-lp-mherob__badge-kicker { color: var(--b); }
.omsag-lp-mherob__badge--light .omsag-lp-mherob__badge-sub { color: var(--ts); }

/* ── Ansage ─────────────────────────────────────────────────────────────── */
.omsag-lp-mherob__inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 1450px; margin: 0 auto; padding: 0 var(--ipad);
}
/* Dieselben Stufen wie im Sondermenue darueber — nur so bleibt die linke
   Kante des Kastens ueber die ganze Desktopbreite in einer Flucht mit dem
   Logo. Weicht das Menue ab, weicht auch der Kasten ab. */
@media (max-width: 1180px) { .omsag-lp-mherob { --ipad: 22px; } }
@media (max-width: 1080px) { .omsag-lp-mherob { --ipad: 20px; } }
/* Der Schleier steht links ueber den Text hinaus. Damit er nicht irgendwo
   im freien Rand landet, ruecken wir den Text um genau diesen Ueberstand
   nach innen — dann faellt die linke Kante des Kastens immer mit der
   Rasterkante zusammen, also mit dem Logo im Menue darueber. Das gilt in
   jeder Breite: fuellt das Raster den Bildschirm, sind es 28 px zum Rand;
   ist der Bildschirm breiter, wandert beides gemeinsam nach innen.
   Nur wo es ueberhaupt einen Schleier gibt — auf dem Handy nicht. */
@media (min-width: 1024px) {
  .omsag-lp-mherob--panel .omsag-lp-mherob__inner { padding-left: calc( var(--ipad) + var(--po) ); }
}
.omsag-lp-mherob__copy { position: relative; width: 100%; max-width: min(650px, calc(48% - 24px)); }
/* Ein sehr leiser heller Schleier hinter der Ansage: auf dem Blau des
   Verlaufs liest sich der Text sonst muehsam. Er liegt als Pseudo-Element
   hinter dem Text, damit die Ausrichtung im Raster unveraendert bleibt.

   Zwei Lagen statt einer, und zwar aus einem konkreten Grund: der weiche
   Rand des Schleiers war frueher zugleich der Rand des Weichzeichners.
   Sein Mittelpunkt sitzt bei 26 % — rechts, wo das Video hereinragt, lief
   die Maske also gerade aus, und genau dort blieb das Bild scharf. Waehrend
   der Einblendung, wenn der Text noch nicht da ist, faellt das auf.
   Deshalb: unten eine Lage, die nur weichzeichnet und dabei weiter nach
   aussen reicht — darueber die helle Lage, die wie bisher sanft ausblendet. */
.omsag-lp-mherob--panel .omsag-lp-mherob__copy::before,
.omsag-lp-mherob--panel .omsag-lp-mherob__copy::after {
  content: ""; position: absolute; z-index: -1;
  inset: clamp(-34px, -2.6vw, -22px) calc(-1 * var(--po));
  border-radius: clamp(22px, 2.2vw, 30px);
  pointer-events: none;
}
/* Die Weichzeichner-Lage: kein eigener Ton, nur Unschaerfe. Ihre Maske haelt
   bis weit nach aussen voll und faellt erst ganz am Rand ab — so ist auch
   die rechte Haelfte, wo das Video liegt, sicher erfasst. */
.omsag-lp-mherob--panel .omsag-lp-mherob__copy::before {
  -webkit-backdrop-filter: blur(20px) saturate(1.06) brightness(1.04);
          backdrop-filter: blur(20px) saturate(1.06) brightness(1.04);
  -webkit-mask-image: radial-gradient(132% 148% at 32% 48%, #000 66%, rgba(0,0,0,.7) 85%, transparent 100%);
          mask-image: radial-gradient(132% 148% at 32% 48%, #000 66%, rgba(0,0,0,.7) 85%, transparent 100%);
}
/* Die helle Lage: Ton und Kante, wie gehabt. */
.omsag-lp-mherob--panel .omsag-lp-mherob__copy::after {
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(255,255,255,.42);
  -webkit-mask-image: radial-gradient(118% 132% at 26% 46%, #000 48%, rgba(0,0,0,.5) 76%, transparent 100%);
          mask-image: radial-gradient(118% 132% at 26% 46%, #000 48%, rgba(0,0,0,.5) 76%, transparent 100%);
}

/* ── Partnerzeichen ─────────────────────────────────────────────────────── */
/* Sie stehen unter dem Kasten, nicht darin — deshalb sitzen sie als eigene
   Reihe im Raster und nicht in der Ansage. Jedes Zeichen traegt seine eigene
   Hoehe (--h / --ht / --hm), weil die Seitenverhaeltnisse weit auseinander
   gehen: ein quadratisches Siegel und ein breites Wortzeichen wiegen bei
   gleicher Hoehe voellig verschieden. Genauso ist es auf der Startseite
   geloest. Die Breite ergibt sich jeweils aus dem Bild. */
.omsag-lp-mherob__partners {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px;
  margin: var(--pgap) 0 0; padding: 0; list-style: none;
  max-width: min(650px, calc(48% - 24px));
}
.omsag-lp-mherob__partner { margin: 0; display: block; }
.omsag-lp-mherob__partner img {
  display: block; height: var(--h, 70px); width: auto; max-width: 100%;
  object-fit: contain;
  opacity: .85; transition: opacity .3s var(--ez);
}
.omsag-lp-mherob__partner img:hover { opacity: 1; }
/* Zwischen 1024 und 1240 px schrumpft die Textspalte schneller als die Reihe:
   gemessen blieben bei 1100 px nur noch 4 px Luft, ein etwas breiteres Zeichen
   haette die Reihe umbrechen lassen. Eine Zwischenstufe nimmt alle vier
   gemeinsam zurueck — das Groessenverhaeltnis untereinander bleibt. */
@media (min-width: 1024px) and (max-width: 1240px) {
  .omsag-lp-mherob__partner img { height: calc(var(--h, 70px) * .82); }
}

.omsag-lp-mherob__overline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 22px; }
.omsag-lp-mherob__overline-txt {
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--b);
}
/* ── Messe-Logo im Kopf ─────────────────────────────────────────────────── */
.omsag-lp-mherob__evlogo { display: block; width: auto; max-width: min(320px, 68%); }

/* ── Countdown ──────────────────────────────────────────────────────────── */
/* Kein flaches Farbfeld mehr, sondern eine helle Kapsel mit ruhig pulsendem
   Punkt — das liest sich als laufende Angabe, nicht als Etikett. */
.omsag-lp-mherob__count {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--omsag-lp-pill, 999px);
  background: rgba(255,255,255,.76); border: 1px solid var(--ln);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px -18px rgba(15,17,21,.65);
  font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; color: var(--ts);
  white-space: nowrap;
}
.omsag-lp-mherob__count[hidden] { display: none; }
.omsag-lp-mherob__count strong { font-weight: 700; color: var(--ink); }
.omsag-lp-mherob__count-dot {
  position: relative; flex: none; width: 7px; height: 7px;
  border-radius: 50%; background: var(--b);
}
.omsag-lp-mherob__count-dot::after {
  content: ""; position: absolute; inset: -5px;
  border-radius: 50%; border: 1.5px solid var(--b); opacity: 0;
  animation: mherob-ping 2.6s var(--ez) infinite;
}
@keyframes mherob-ping {
  0%   { transform: scale(.45); opacity: .7; }
  70%  { transform: scale(1);   opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .omsag-lp-mherob__count-dot::after { animation: none; }
}

.omsag-lp-mherob__headline {
  margin: 0 0 20px; font-size: clamp(30px, 3.2vw, 46px); font-weight: 700;
  line-height: 1.06; letter-spacing: -.03em; color: var(--ink);
}
.omsag-lp-mherob__headline em {
  font-style: normal;
  background: linear-gradient(100deg, var(--b), var(--bl));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.omsag-lp-mherob__subline {
  margin: 0 0 26px; max-width: 51ch;
  font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6; color: var(--ts);
}

.omsag-lp-mherob__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px;
  margin: 0 0 32px; padding: 0; list-style: none;
}
.omsag-lp-mherob__meta-item {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: -.008em; color: var(--ink);
}
/* Kein Trennstrich mehr — der Abstand trennt schon deutlich genug. */
/* Weisser Traeger statt gruener Tuenche: auf dem Verlauf war der Kreis kaum
   vom Hintergrund zu unterscheiden. */
.omsag-lp-mherob__meta-ico {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: #fff; color: var(--b);
  border: 1px solid rgba(35,39,48,.07);
  box-shadow: 0 8px 20px -12px rgba(15,17,21,.45);
}
.omsag-lp-mherob__meta-ico svg { width: 21px; height: 21px; display: block; }

/* ── Buttons (Hausstandard: dunkel auf hellem Grund) ────────────────────── */
.omsag-lp-mherob__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.omsag-lp-mherob__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px;
  border: 0; border-radius: var(--omsag-lp-pill, 999px);
  background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; box-shadow: none;
  transition: transform .25s var(--ez), box-shadow .25s var(--ez), color .2s var(--ez), border-color .2s var(--ez), background .2s var(--ez);
}
.omsag-lp-mherob__btn svg { width: 18px; height: 18px; transition: transform .25s var(--ez); }
.omsag-lp-mherob__btn:hover, .omsag-lp-mherob__btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(35,39,48,.45); }
.omsag-lp-mherob__btn:hover svg { transform: translateX(4px); }
.omsag-lp-mherob__btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(35,39,48,.22); padding: 15px 29px;
}
.omsag-lp-mherob__btn--ghost:hover, .omsag-lp-mherob__btn--ghost:focus-visible {
  color: var(--ink); border-color: rgba(35,39,48,.5); background: rgba(255,255,255,.5); box-shadow: none;
}

/* ── Auftritt ───────────────────────────────────────────────────────────── */
.omsag-lp-mherob.mherob-anim :is(.omsag-lp-mherob__overline, .omsag-lp-mherob__headline,
  .omsag-lp-mherob__subline, .omsag-lp-mherob__meta, .omsag-lp-mherob__cta,
  .omsag-lp-mherob__partners) { opacity: 0; transform: translateY(26px); }
/* Der Auftritt darf die Lage nicht ueberschreiben — deshalb bewegt sich
   beim Einblenden ein innerer Rahmen, nicht die Karte selbst. */
.omsag-lp-mherob.mherob-anim .omsag-lp-mherob__badge { opacity: 0; }
.omsag-lp-mherob.mherob-anim .omsag-lp-mherob__badge > * { transform: translateY(14px); }
.omsag-lp-mherob.is-in .omsag-lp-mherob__overline { animation: mherob-rise .7s var(--ez) .1s forwards; }
.omsag-lp-mherob.is-in .omsag-lp-mherob__headline { animation: mherob-rise .8s var(--ez) .18s forwards; }
.omsag-lp-mherob.is-in .omsag-lp-mherob__subline  { animation: mherob-rise .8s var(--ez) .26s forwards; }
.omsag-lp-mherob.is-in .omsag-lp-mherob__meta     { animation: mherob-rise .8s var(--ez) .34s forwards; }
.omsag-lp-mherob.is-in .omsag-lp-mherob__cta      { animation: mherob-rise .8s var(--ez) .42s forwards; }
.omsag-lp-mherob.is-in .omsag-lp-mherob__partners { animation: mherob-rise .8s var(--ez) .5s forwards; }
.omsag-lp-mherob.is-in .omsag-lp-mherob__badge    { animation: mherob-fade .8s var(--ez) .6s forwards; }
.omsag-lp-mherob.is-in .omsag-lp-mherob__badge > * { animation: mherob-rise .8s var(--ez) .6s forwards; }
@keyframes mherob-fade { to { opacity: 1; } }
@keyframes mherob-rise { to { opacity: 1; transform: none; } }

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .omsag-lp-mherob { --gpad: 24px; }
  .omsag-lp-mherob__copy { max-width: calc(46% - 22px); }
}

@media (max-width: 1023px) {
  .omsag-lp-mherob__partners { max-width: none; gap: 16px; margin-top: var(--pgapt); }
  .omsag-lp-mherob__partner img { height: var(--ht, 55px); }
  /* Gestapelt: erst das Video als Band, darunter die Ansage — wie in
     Variante A, damit beide Fassungen sich mobil gleich anfuehlen. */
  .omsag-lp-mherob {
    display: block; min-height: 0;
    padding: 0 0 clamp(34px, 5vw, 48px);
  }
  .omsag-lp-mherob__stagewrap {
    position: relative; top: auto; bottom: auto; left: 0; right: 0;
    max-width: none; margin: 0;
  }
  .omsag-lp-mherob__stage {
    position: relative; width: 100%; height: auto; aspect-ratio: var(--mratio);
    overflow: hidden;
  }
  /* Gestapelt fuellt das Motiv die Breite und wird oben beschnitten: im Video
     steht dort nur Weissraum, und jede Zeile davon kostet auf dem Handy einen
     halben Bildschirm. Wie stark beschnitten wird, steuert die Bildlage —
     "Ganz zeigen" bleibt als Ausweg fuer Motive, die nichts abgeben koennen. */
  .omsag-lp-mherob--fit-height .omsag-lp-mherob__media,
  .omsag-lp-mherob--fit-cover .omsag-lp-mherob__media,
  .omsag-lp-mherob--fit-contain .omsag-lp-mherob__media {
    position: absolute; inset: 0; left: 0; width: 100%; height: 100%;
    min-width: 0; max-width: none;
    object-fit: var(--mfit, cover);
    transform: translateX(var(--mshiftx, 0)) scale(var(--vscale));
  }
  /* Unten und rechts laeuft das Motiv weich aus. Die rechte Kante ist der
     Punkt: dort schneidet der Ausschnitt mitten durch das Bild, und das
     Video-Weiss steht als grauer Strich gegen den Verlauf. Ein weicher
     Auslauf loest das, ohne dass man vom Motiv etwas verliert. */
  .omsag-lp-mherob__media {
    /* Der Auslauf nach unten setzt tiefer an: vorher begann er bei 92 % der
       Bandhoehe und nahm damit die unteren 27 px des Motivs mit. Jetzt sind
       es die letzten 10 px — gerade genug, damit keine harte Kante steht.
       Die Maske liegt nur auf dem Video, an der Lage der Ansage aendert sich
       dadurch nichts. */
    -webkit-mask-image:
      linear-gradient(to bottom, #000 97%, rgba(0,0,0,.55) 99%, transparent 100%),
      linear-gradient(to right, #000 calc(100% - 58px), rgba(0,0,0,.4) calc(100% - 18px), transparent 100%) !important;
            mask-image:
      linear-gradient(to bottom, #000 97%, rgba(0,0,0,.55) 99%, transparent 100%),
      linear-gradient(to right, #000 calc(100% - 58px), rgba(0,0,0,.4) calc(100% - 18px), transparent 100%) !important;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    object-position: center var(--mposy); transform-origin: center var(--mposy);
  }
  /* Die Ansage rueckt dicht an das Video — der Abstand dazwischen war Luft,
     die auf dem Handy niemand braucht. */
  .omsag-lp-mherob__inner { padding: 6px 24px 0; }
  .omsag-lp-mherob__copy { max-width: 640px; }
  .omsag-lp-mherob--panel .omsag-lp-mherob__copy::before,
  .omsag-lp-mherob--panel .omsag-lp-mherob__copy::after { display: none; }
  /* Die Karte steht rechts neben dem Motiv, nicht darauf: schmal und hoch,
     damit sie neben den Stiel passt statt ueber der Schuessel zu liegen. */
  .omsag-lp-mherob__badge {
    --pad: 14px; --bx: 1; --by: var(--mby, .58);
    max-width: min(158px, calc(100% - 28px));
  }
  /* Aus "Halle 8.1 · Stand D028" werden zwei Zeilen — der Punkt dazwischen
     entfaellt, sonst steht er allein am Zeilenende. */
  .omsag-lp-mherob__badge-title { display: flex; flex-direction: column; }
  .omsag-lp-mherob__badge-title i { display: none; }
}

@media (max-width: 640px) {
  /* Auf dem Handy stehen sie unter den Schaltflaechen — dieselbe Stelle im
     Aufbau, nur eine Stufe kleiner und dichter. */
  .omsag-lp-mherob__partners { gap: 10px 12px; margin-top: var(--pgapm); }
  .omsag-lp-mherob__partner img { height: var(--hm, 45px); }
}
/* Dasselbe ganz unten: bei 320 px blieben sonst 4 px uebrig. */
@media (max-width: 360px) {
  .omsag-lp-mherob__partner img { height: calc(var(--hm, 45px) * .84); }
  .omsag-lp-mherob__inner { padding: 18px 20px 0; }
  .omsag-lp-mherob__headline { font-size: clamp(30px, 8.4vw, 38px); }
  .omsag-lp-mherob__subline { font-size: 16px; margin-bottom: 22px; }
  .omsag-lp-mherob__meta { gap: 10px 18px; margin-bottom: 26px; }
  .omsag-lp-mherob__meta-item { font-size: 14.5px; }
  .omsag-lp-mherob__meta-ico { width: 30px; height: 30px; }
  .omsag-lp-mherob__meta-ico svg { width: 16px; height: 16px; }
  /* Die Karte soll neben dem Motiv stehen, nicht mit ihm konkurrieren —
     deshalb hier durchgehend eine Stufe kleiner. */
  .omsag-lp-mherob__badge {
    --pad: 12px; max-width: min(150px, calc(100% - 24px));
    padding: 9px 11px; gap: 7px; border-radius: 13px;
  }
  .omsag-lp-mherob__badge-kicker { font-size: 10.5px; letter-spacing: .06em; }
  .omsag-lp-mherob__badge-title { font-size: 13.5px; line-height: 1.18; }
  .omsag-lp-mherob__badge-sub { font-size: 11px; margin-top: 2px; }
  .omsag-lp-mherob__badge-logo { height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .omsag-lp-mherob * { animation: none !important; transition: none !important; }
  .omsag-lp-mherob.mherob-anim :is(.omsag-lp-mherob__overline, .omsag-lp-mherob__headline,
    .omsag-lp-mherob__subline, .omsag-lp-mherob__meta, .omsag-lp-mherob__cta,
    .omsag-lp-mherob__badge) { opacity: 1 !important; transform: none !important; }
  .omsag-lp-mherob__video { opacity: 1 !important; }
}