/* OMSAG LP · AI Content Creative · 07 Qualität & Freigabe
   Default = visible. JS adds `.acq-anim` then `.is-in`. */

.omsag-lp-acq {
  --b:   var(--omsag-lp-brand, #50aa3c);
  --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);
  --bg-alt: var(--omsag-lp-bg-alt, #f9faf8);
  --panel: var(--omsag-lp-panel, #f1f2f5);
  --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(--ink); background: #fff;
  padding: 104px 0; -webkit-font-smoothing: antialiased;
}
.omsag-lp-acq, .omsag-lp-acq *, .omsag-lp-acq *::before, .omsag-lp-acq *::after { box-sizing: border-box; }
.omsag-lp-acq__container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.omsag-lp-acq :is(h1,h2,h3,h4,p,li,span,strong,b,em) { overflow-wrap: break-word; hyphens: manual; }

/* Head */
.omsag-lp-acq__head { max-width: 760px; margin-bottom: 40px; }
.omsag-lp-acq__overline { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--b); margin: 0 0 16px; }
.omsag-lp-acq__headline { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.07; color: var(--ink); margin: 0 0 18px; max-width: 22ch; }
.omsag-lp-acq__body { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--ts); margin: 0; max-width: 66ch; }

/* 5-step flow */
.omsag-lp-acq__flow { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 44px; }
.omsag-lp-acq__step { flex: 1; min-width: 0; }
.omsag-lp-acq__step-card { position: relative; background: var(--panel); border: 1px solid transparent; border-radius: 16px; padding: 22px 18px 20px; min-height: 168px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .3s var(--ez), border-color .3s var(--ez), background .3s var(--ez); }
.omsag-lp-acq__step:hover .omsag-lp-acq__step-card { transform: translateY(-3px); border-color: rgba(80,170,60,.35); background: #edeff3; }
.omsag-lp-acq__step-num { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; background: #fff; border: 1px solid var(--ln); border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink); }
.omsag-lp-acq__step-ico { width: 44px; height: 44px; color: var(--b); display: grid; place-items: center; margin: 8px 0 16px; }
.omsag-lp-acq__step-ico svg { width: 34px; height: 34px; }
.omsag-lp-acq__step-title { font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.omsag-lp-acq__step-desc { font-size: 12.5px; line-height: 1.5; color: var(--ts); margin: 14px 4px 0; }
.omsag-lp-acq__step-arrow { flex-shrink: 0; color: var(--mut); display: grid; place-items: center; padding-top: 74px; }
.omsag-lp-acq__step-arrow svg { width: 18px; height: 18px; }

/* Bottom: OMS Rolle + Quality Gates */
.omsag-lp-acq__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; padding-top: 36px; border-top: 1px solid var(--ln); margin-bottom: 40px; }
.omsag-lp-acq__blabel { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 20px; }
.omsag-lp-acq__roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.omsag-lp-acq__role { min-width: 0; background: #fff; border: 1px solid var(--ln); border-radius: 16px; padding: 22px 18px; text-align: center; }
.omsag-lp-acq__role-ico { width: 44px; height: 44px; color: var(--ink); display: grid; place-items: center; margin: 0 auto 14px; }
.omsag-lp-acq__role-ico svg { width: 34px; height: 34px; }
.omsag-lp-acq__role-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.omsag-lp-acq__role-desc { font-size: 12px; line-height: 1.5; color: var(--ts); margin: 0; }
/* In den schmalen Rollen-Karten lieber ein Wort minimal in die Innenabstaende
   laufen lassen als es mitten im Wort zu trennen. */
.omsag-lp-acq__role :is(strong, p) { overflow-wrap: normal; }

.omsag-lp-acq__gates { min-width: 0; }
.omsag-lp-acq__gates-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.omsag-lp-acq__gatelist { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; gap: 12px; }
.omsag-lp-acq__gatelist li { flex: 1; min-height: 56px; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ln); border-radius: 12px; padding: 13px 17px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.omsag-lp-acq__gate-box { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--mut); border-radius: 5px; }
.omsag-lp-acq__note { position: relative; overflow: hidden; min-width: 0; display: flex; flex-direction: column; background: #1b1f27; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; }
.omsag-lp-acq__note-viz { position: relative; padding: 26px 26px 0; }
.omsag-lp-acq__note-viz svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.omsag-lp-acq__note-glow { position: absolute; left: 39%; top: 82%; z-index: 0; width: 240px; height: 240px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(80,170,60,.20), rgba(80,170,60,0) 70%); pointer-events: none; }
.omsag-lp-acq__note-body { position: relative; z-index: 1; padding: 20px 26px 24px; }
.omsag-lp-acq__note-body p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0 0 12px; }
.omsag-lp-acq__note-body p:last-child { margin-bottom: 0; }

/* Ohne Quality Gates: rechte Spalte breiter. Der dunkle Kasten beginnt auf
   Kartenhoehe — nicht schon neben dem Label. Deshalb loest sich .__rolle im
   Zweispalter auf (display:contents) und Label/Karten sitzen direkt im Grid. */
@media (min-width: 1041px) {
  .omsag-lp-acq__bottom--nogates { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__rolle  { display: contents; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__blabel { grid-column: 1; grid-row: 1; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__roles  { grid-column: 1; grid-row: 2; min-width: 0; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__gates  { grid-column: 2; grid-row: 2; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__role { display: flex; flex-direction: column; justify-content: center; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__gates-inner { grid-template-columns: minmax(0, 1fr); height: 100%; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__note { height: 100%; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__note-body { margin-top: auto; }
}

/* Foot CTA (ghost) */
.omsag-lp-acq__foot { display: flex; justify-content: center; }
.omsag-lp-acq__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(--ink); border: 0; padding: 17px 34px; border-radius: var(--omsag-lp-pill, 999px); box-shadow: none; transition: transform .25s var(--ez), box-shadow .25s var(--ez); }
.omsag-lp-acq__btn, .omsag-lp-acq__btn:hover, .omsag-lp-acq__btn:focus, .omsag-lp-acq__btn:focus-visible { color: #fff; }
.omsag-lp-acq__btn svg { width: 18px; height: 18px; transition: transform .25s var(--ez); }
.omsag-lp-acq__btn:hover, .omsag-lp-acq__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(35,39,48,.5); }
.omsag-lp-acq__btn:hover svg { transform: translateX(4px); }

/* Reveal */
.omsag-lp-acq.acq-anim .omsag-lp-acq__overline,
.omsag-lp-acq.acq-anim .omsag-lp-acq__headline,
.omsag-lp-acq.acq-anim .omsag-lp-acq__body,
.omsag-lp-acq.acq-anim .omsag-lp-acq__step,
.omsag-lp-acq.acq-anim .omsag-lp-acq__rolle,
.omsag-lp-acq.acq-anim .omsag-lp-acq__gates,
.omsag-lp-acq.acq-anim .omsag-lp-acq__foot { opacity: 0; transform: translateY(16px); }
.omsag-lp-acq.acq-anim .omsag-lp-acq__step-arrow { opacity: 0; }
.omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__overline { animation: acq-up .6s var(--ez) .02s forwards; }
.omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__headline { animation: acq-up .7s var(--ez) .08s forwards; }
.omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__body     { animation: acq-up .7s var(--ez) .16s forwards; }
.omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__step     { animation: acq-up .55s var(--ez) forwards; animation-delay: calc(.26s + var(--i) * .08s); }
.omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__step-arrow { animation: acq-fade .5s var(--ez) .7s forwards; }
.omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__rolle    { animation: acq-up .7s var(--ez) .7s forwards; }
.omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__gates    { animation: acq-up .7s var(--ez) .78s forwards; }
.omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__foot     { animation: acq-up .7s var(--ez) .9s forwards; }
@keyframes acq-up { to { opacity: 1; transform: none; } }
@keyframes acq-fade { to { opacity: 1; } }
/* Im Zweispalter ist .__rolle display:contents — dort uebernehmen Label und
   Kartenraster das Einblenden. */
@media (min-width: 1041px) {
  .omsag-lp-acq.acq-anim .omsag-lp-acq__bottom--nogates .omsag-lp-acq__blabel,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__bottom--nogates .omsag-lp-acq__roles { opacity: 0; transform: translateY(16px); }
  .omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__bottom--nogates .omsag-lp-acq__blabel,
  .omsag-lp-acq.acq-anim.is-in .omsag-lp-acq__bottom--nogates .omsag-lp-acq__roles { animation: acq-up .7s var(--ez) .7s forwards; }
}

/* Responsive */
@media (min-width: 1041px) and (max-width: 1240px) {
  .omsag-lp-acq__role { padding: 22px 13px; }
}
@media (max-width: 1040px) {
  .omsag-lp-acq { padding: 80px 0; }
  .omsag-lp-acq__flow { flex-wrap: wrap; }
  .omsag-lp-acq__step { flex: 1 1 calc(50% - 26px); }
  .omsag-lp-acq__step-arrow { display: none; }
  .omsag-lp-acq__bottom,
  .omsag-lp-acq__bottom--nogates { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__note-viz { padding: 22px 22px 0; }
  /* einspaltig waere die Grafik sonst zu gross — Hoehe deckeln, Seitenverhaeltnis bleibt */
  .omsag-lp-acq__bottom--nogates .omsag-lp-acq__note-viz svg { max-height: 168px; }
}
@media (max-width: 640px) {
  .omsag-lp-acq { padding: 60px 0; }
  .omsag-lp-acq__container { padding: 0 20px; }
  .omsag-lp-acq__step { flex: 1 1 100%; }
  .omsag-lp-acq__roles { grid-template-columns: 1fr; }
  .omsag-lp-acq__gates-inner { grid-template-columns: 1fr; }
  .omsag-lp-acq__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .omsag-lp-acq.acq-anim .omsag-lp-acq__overline,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__headline,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__body,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__step,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__rolle,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__gates,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__bottom--nogates .omsag-lp-acq__blabel,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__bottom--nogates .omsag-lp-acq__roles,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__foot,
  .omsag-lp-acq.acq-anim .omsag-lp-acq__step-arrow { opacity: 1 !important; transform: none !important; }
  .omsag-lp-acq * { animation: none !important; }
}