/* OMSAG LP · Performance Marketing · 01 Hero — Dark-Mode Growth-Visual
   Gradient-Background + animiertes Orbit-/Puls-/Stage-Visual.
   Default = visible. JS adds `.pmh-anim` then `.is-in`. */

.omsag-lp-pmh {
  --b:    var(--omsag-lp-brand, #50aa3c);
  --bl:   var(--omsag-lp-lime, #aad337);
  --cyan: #63e8f4;
  --grad: var(--omsag-lp-brand-grad, linear-gradient(135deg, #50aa3c 0%, #aad337 100%));
  --ink:  var(--omsag-lp-ink, #232730);
  --tx:   #f3f6f7;          /* headline / stage title */
  --ts:   #9eabb5;          /* body */
  --mut:  #6f7d87;          /* microcopy */
  --ln:   rgba(150,190,195,.14);
  --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);

  position: relative; font-family: var(--font); color: var(--tx); isolation: isolate;
  padding: 96px 0 0; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 0% 0%, rgba(80,170,60,.22), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(170,211,55,.16), transparent 50%),
    var(--ink);
}
.omsag-lp-pmh, .omsag-lp-pmh *, .omsag-lp-pmh *::before, .omsag-lp-pmh *::after { box-sizing: border-box; }
.omsag-lp-pmh__container {
  width: 100%; max-width: 1450px; margin: 0 auto; padding: 0 28px 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center;
}

/* Left copy */
.omsag-lp-pmh__copy { min-width: 0; }
.omsag-lp-pmh__overline { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--bl); margin: 0 0 20px; }
.omsag-lp-pmh__headline { font-size: clamp(32px, 4.2vw, 50px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.06; color: var(--tx); margin: 0 0 24px; max-width: 16ch; }
.omsag-lp-pmh__subline { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--ts); margin: 0 0 34px; max-width: 50ch; }

.omsag-lp-pmh__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 26px; }
.omsag-lp-pmh__btn {
  display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; color: #fff;
  background: var(--grad); border: 0; padding: 16px 30px; border-radius: var(--omsag-lp-pill, 999px);
  box-shadow: none; transition: transform .25s var(--ez), box-shadow .25s var(--ez), color .2s var(--ez);
}
.omsag-lp-pmh__btn svg { width: 18px; height: 18px; transition: transform .25s var(--ez); }
.omsag-lp-pmh__btn:hover, .omsag-lp-pmh__btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(80,170,60,.55); }
.omsag-lp-pmh__btn:hover svg { transform: translateX(4px); }
.omsag-lp-pmh__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #e6eded; text-decoration: none; transition: color .2s var(--ez); }
.omsag-lp-pmh__link span { border-bottom: 1px solid rgba(230,237,237,.55); padding-bottom: 2px; }
.omsag-lp-pmh__link svg { width: 17px; height: 17px; transition: transform .25s var(--ez); }
.omsag-lp-pmh__link:hover { color: var(--bl); }
.omsag-lp-pmh__link:hover svg { transform: translateX(4px); }
.omsag-lp-pmh__microcopy { font-size: 13.5px; line-height: 1.5; color: var(--mut); margin: 0; max-width: 46ch; }

/* Right visual */
.omsag-lp-pmh__visual { position: relative; display: flex; flex-direction: column; align-items: center; }
.omsag-lp-pmh__visual::before { content: ""; position: absolute; left: -28px; top: 6%; bottom: 6%; width: 1px; background: var(--ln); }
.omsag-lp-pmh__visual-label { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #dce5e5; margin: 0 0 18px; text-align: center; }

.omsag-lp-pmh__loop {
  --vs: min(46vw, 560px);
  position: relative; width: var(--vs); max-width: 100%; aspect-ratio: 1.12 / 1; margin: 0 auto; overflow: visible;
  background:
    radial-gradient(circle at 50% 49%, rgba(55,224,231,.12), transparent 30%),
    radial-gradient(circle at 50% 52%, rgba(80,170,60,.075), transparent 48%);
}
.omsag-lp-pmh__loop::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 3%; height: 18%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(70,226,230,.14), transparent 65%); transform: perspective(180px) rotateX(62deg); }

/* Ambient glows */
.omsag-lp-pmh__ambient { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .22; }
.omsag-lp-pmh__ambient--one { width: 170px; height: 170px; top: -60px; left: 45%; background: var(--cyan); }
.omsag-lp-pmh__ambient--two { width: 130px; height: 130px; bottom: -40px; left: 12%; background: var(--b); }

/* Orbit rings */
.omsag-lp-pmh__orbit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.omsag-lp-pmh__orbit--outer { width: 70%; aspect-ratio: 1; border: 1px solid rgba(102,231,241,.6); box-shadow: 0 0 13px rgba(68,221,235,.13), inset 0 0 12px rgba(68,221,235,.08); }
.omsag-lp-pmh__orbit--inner { width: 43%; aspect-ratio: 1; border: 1px solid rgba(124,240,246,.18); }

/* Rotating signal pulses */
.omsag-lp-pmh__pulse {
  position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 17%, var(--cyan) 18%, transparent 19% 49%, var(--bl) 50%, transparent 51% 82%, var(--cyan) 83%, transparent 84%);
  filter: drop-shadow(0 0 8px rgba(99,232,244,.55)) drop-shadow(0 0 16px rgba(99,232,244,.28));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.omsag-lp-pmh__pulse--b { width: 43%; opacity: .45; }
@keyframes pmh-spin { to { transform: rotate(360deg); } }

/* Stage cards (nodes) */
.omsag-lp-pmh__node {
  position: absolute; z-index: 4; width: 41%; min-height: 90px; padding: 13px 15px;
  display: flex; align-items: center; gap: 12px; color: var(--tx);
  border: 1px solid rgba(139,232,240,.5); border-radius: 16px;
  background: linear-gradient(135deg, rgba(24,52,66,.85), rgba(5,19,29,.8));
  box-shadow: inset 0 0 0 2px rgba(91,223,234,.06), inset 0 1px rgba(255,255,255,.14), 0 0 14px rgba(51,210,222,.16), 0 15px 24px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.omsag-lp-pmh__node--top    { top: 6%;  left: 50%;  translate: -50% 0; }
.omsag-lp-pmh__node--right  { right: 1.5%; top: 50%; translate: 0 -50%; }
.omsag-lp-pmh__node--bottom { bottom: 3%; left: 50%; translate: -50% 0; }
.omsag-lp-pmh__node--left   { left: 1.5%; top: 50%;  translate: 0 -50%; }
.omsag-lp-pmh__node-ico { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; color: var(--bl); border: 1px solid rgba(170,211,55,.45); border-radius: 50%; background: radial-gradient(circle, rgba(80,170,60,.2), rgba(4,20,29,.5)); box-shadow: inset 0 0 10px rgba(80,170,60,.18); }
.omsag-lp-pmh__node-ico svg { width: 22px; height: 22px; filter: drop-shadow(0 0 5px rgba(170,211,55,.35)); }
.omsag-lp-pmh__node-body { min-width: 0; flex: 1; }
.omsag-lp-pmh__node-title { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--tx); letter-spacing: -0.01em; }
.omsag-lp-pmh__node-line { display: block; width: 70%; height: 6px; margin-top: 9px; opacity: .6; background: repeating-linear-gradient(90deg, var(--cyan) 0 2px, transparent 2px 6px); -webkit-mask: linear-gradient(90deg, transparent, #000 15% 80%, transparent); mask: linear-gradient(90deg, transparent, #000 15% 80%, transparent); }

/* Flow arrows */
.omsag-lp-pmh__arrow {
  --angle: 0deg; position: absolute; z-index: 3; left: 50%; top: 50%; width: 0; height: 0;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid var(--bl);
  filter: drop-shadow(0 0 6px rgba(170,211,55,.6));
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(var(--vs) * -.35));
  transform-origin: center;
}
.omsag-lp-pmh__arrow--one   { --angle: -45deg; }
.omsag-lp-pmh__arrow--two   { --angle: 45deg; }
.omsag-lp-pmh__arrow--three { --angle: 135deg; }
.omsag-lp-pmh__arrow--four  { --angle: 225deg; }

/* Trust strip */
.omsag-lp-pmh__trust { border-top: 1px solid rgba(171,211,212,.13); background: rgba(2,8,13,.35); }
.omsag-lp-pmh__trust-inner { width: 100%; max-width: 1450px; margin: 0 auto; padding: 26px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 40px; }
.omsag-lp-pmh__trust-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; }
.omsag-lp-pmh__stat { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: #c9d3d5; }
.omsag-lp-pmh__stat-ico { flex-shrink: 0; display: grid; place-items: center; color: #7f8c95; }
.omsag-lp-pmh__stat-ico svg { width: 20px; height: 20px; }
.omsag-lp-pmh__trust-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 16px clamp(20px, 2.2vw, 34px); }
.omsag-lp-pmh__logo { display: inline-flex; align-items: center; }
.omsag-lp-pmh__logo img { display: block; height: calc(clamp(50px, 4.2vw, 64px) * var(--k, 1)); width: auto; max-width: 210px; object-fit: contain; }

/* Reveal — copy */
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__overline,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__headline,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__subline,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__cta,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__microcopy,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__visual-label,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__stat,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__logo { opacity: 0; transform: translateY(14px); }
/* Reveal — visual */
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__ambient,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__orbit,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__pulse,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__node,
.omsag-lp-pmh.pmh-anim .omsag-lp-pmh__arrow { opacity: 0; }

.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__overline  { animation: pmh-up .6s var(--ez) .02s forwards; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__headline  { animation: pmh-up .7s var(--ez) .08s forwards; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__subline   { animation: pmh-up .7s var(--ez) .16s forwards; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__cta       { animation: pmh-up .7s var(--ez) .24s forwards; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__microcopy { animation: pmh-up .7s var(--ez) .32s forwards; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__visual-label { animation: pmh-up .7s var(--ez) .2s forwards; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__ambient   { animation: pmh-amb 1.1s var(--ez) .1s both; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__orbit--outer { animation: pmh-orbit .9s cubic-bezier(.2,.8,.2,1) .25s both; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__orbit--inner { animation: pmh-orbit .8s cubic-bezier(.2,.8,.2,1) .38s both; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__pulse--a  { animation: pmh-pfa .8s ease-out .5s both, pmh-spin 12s 1.3s linear infinite; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__pulse--b  { animation: pmh-pfb .8s ease-out .62s both, pmh-spin 18s 1.42s linear infinite reverse; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__node      { animation: pmh-stage .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.62s + var(--n) * .14s); }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__arrow     { animation: pmh-fade .5s var(--ez) .7s forwards; }
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__stat,
.omsag-lp-pmh.pmh-anim.is-in .omsag-lp-pmh__logo      { animation: pmh-up .55s var(--ez) forwards; animation-delay: calc(.5s + var(--t) * .07s); }
@keyframes pmh-up    { to { opacity: 1; transform: none; } }
@keyframes pmh-fade  { to { opacity: 1; } }
@keyframes pmh-amb   { from { opacity: 0; transform: scale(.75); } to { opacity: .22; transform: scale(1); } }
@keyframes pmh-orbit { from { opacity: 0; scale: .72; } to { opacity: 1; scale: 1; } }
@keyframes pmh-pfa   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmh-pfb   { from { opacity: 0; } to { opacity: .45; } }
@keyframes pmh-stage { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 1040px) {
  .omsag-lp-pmh { padding-top: 76px; }
  .omsag-lp-pmh__container { grid-template-columns: 1fr; gap: 48px; padding-bottom: 56px; }
  .omsag-lp-pmh__headline { max-width: 20ch; }
  .omsag-lp-pmh__visual::before { display: none; }
  .omsag-lp-pmh__loop { --vs: min(88vw, 620px); }
}
@media (max-width: 600px) {
  .omsag-lp-pmh { padding-top: 56px; }
  .omsag-lp-pmh__container { padding: 0 20px 44px; }
  .omsag-lp-pmh__loop { --vs: calc(100vw - 40px); }
  .omsag-lp-pmh__node { width: 43%; min-height: 64px; padding: 9px 10px; gap: 8px; border-radius: 13px; }
  .omsag-lp-pmh__node-ico { flex-basis: 32px; width: 32px; height: 32px; }
  .omsag-lp-pmh__node-ico svg { width: 17px; height: 17px; }
  .omsag-lp-pmh__node-title { font-size: 11.5px; }
  .omsag-lp-pmh__node-line { margin-top: 5px; height: 4px; }
  .omsag-lp-pmh__node--top { top: 4%; }
  .omsag-lp-pmh__node--bottom { bottom: 2%; }
  .omsag-lp-pmh__ambient--one { width: 120px; height: 120px; }
  .omsag-lp-pmh__trust-inner { padding: 22px 20px; gap: 18px; justify-content: flex-start; }
  .omsag-lp-pmh__trust-stats { gap: 12px 22px; }
  .omsag-lp-pmh__stat { font-size: 12.5px; }
  .omsag-lp-pmh__stat-ico svg { width: 24px; height: 24px; }
  /* Fuenf Siegel in einer Reihe werden auf dem Handy so klein, dass keins
     mehr lesbar ist — das Ranking-Siegel entfaellt hier, die vier anderen
     laufen dafuer groesser und bleiben in einer Zeile.
     Der Teiler 5.5 ist die Summe der Seitenverhaeltnisse der vier Siegel
     inklusive ihrer --k-Ausgleichsfaktoren; wird ein Logo getauscht, ist er
     nachzuziehen. */
  .omsag-lp-pmh__logo[data-logo="ranking"] { display: none; }
  .omsag-lp-pmh__trust-logos {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
  }
  .omsag-lp-pmh__logo { flex: 0 0 auto; }
  .omsag-lp-pmh__logo img {
    height: calc(min(52px, (100vw - 74px) / 5.5) * var(--k, 1));
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__overline,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__headline,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__subline,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__cta,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__microcopy,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__visual-label,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__stat,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__logo,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__ambient,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__orbit,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__pulse,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__node,
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__arrow { opacity: 1; transform: none; }
  .omsag-lp-pmh.pmh-anim .omsag-lp-pmh__pulse--b { opacity: .45; }
  .omsag-lp-pmh * { animation: none !important; }
}