/* OMSAG LP · AI Content Creative · 04 Creative-System
   Default = visible. JS adds `.acs-anim` then `.is-in`. */

.omsag-lp-acs {
  --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);
  --ln2: #d7d9df;
  --bg-alt: var(--omsag-lp-bg-alt, #f9faf8);
  --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-acs, .omsag-lp-acs *, .omsag-lp-acs *::before, .omsag-lp-acs *::after { box-sizing: border-box; }
.omsag-lp-acs__container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px; }

/* Head */
.omsag-lp-acs__head { max-width: 720px; margin-bottom: 34px; }
.omsag-lp-acs__overline { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--b); margin: 0 0 16px; }
.omsag-lp-acs__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: 20ch; }
.omsag-lp-acs__body { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--ts); margin: 0; max-width: 62ch; }
/* Loop (durchrotierende Karten wie Leadqualität) */
.omsag-lp-acs__loop { position: relative; margin-bottom: 22px; }
.omsag-lp-acs__loop-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.omsag-lp-acs__syslabel { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.omsag-lp-acs__status { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 700; color: #768172; text-transform: uppercase; letter-spacing: .1em; }
.omsag-lp-acs__status span { width: 7px; height: 7px; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 6px rgba(80,170,60,.1); animation: acs-blink 2s infinite; }

.omsag-lp-acs__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: stretch; }
.omsag-lp-acs__card { position: relative; min-width: 0; padding: 22px 20px 20px; margin: 0; border: 1px solid var(--ln); border-radius: 18px;
  background: rgba(255,255,255,.72); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  text-align: left; cursor: pointer; font-family: inherit; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ez), border-color .35s var(--ez), background .35s var(--ez), box-shadow .35s var(--ez); }
.omsag-lp-acs__card:hover { transform: translateY(-6px); border-color: rgba(80,170,60,.55); background: #fff; box-shadow: 0 18px 45px rgba(25,38,21,.09); }
.omsag-lp-acs__card:focus-visible { outline:none; }
.omsag-lp-acs__card.is-active { transform: translateY(-6px); border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 20px 48px rgba(25,29,36,.2); }
.omsag-lp-acs__card.is-active .omsag-lp-acs__card-ico { background: rgba(255,255,255,.12); color: var(--bl); }
.omsag-lp-acs__card.is-active .omsag-lp-acs__card-title { color: #fff; }
.omsag-lp-acs__card.is-active .omsag-lp-acs__card-index { color: rgba(255,255,255,.4); }
.omsag-lp-acs__card.is-active .omsag-lp-acs__card-list li { color: rgba(255,255,255,.72); }
.omsag-lp-acs__card.is-active .omsag-lp-acs__card-list li::before { background: var(--bl); }
.omsag-lp-acs__card-index { position: absolute; right: 13px; top: 12px; color: #cbd1cb; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.omsag-lp-acs__card-ico { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: #f0f7ed; color: var(--b); transition: background .35s var(--ez), color .35s var(--ez); }
.omsag-lp-acs__card-ico svg { width: 26px; height: 26px; }
.omsag-lp-acs__card-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.omsag-lp-acs__card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.omsag-lp-acs__card-list li { position: relative; padding-left: 15px; font-size: 12.5px; line-height: 1.4; color: var(--ts); transition: color .35s var(--ez); }
.omsag-lp-acs__card-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--b); transition: background .35s var(--ez); }

/* Rückführung (Desktop) */
.omsag-lp-acs__return { position: relative; height: 78px; margin: 22px 12px 0; }
.omsag-lp-acs__return svg { width: 100%; height: 62px; overflow: visible; fill: none; stroke: var(--ln2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.omsag-lp-acs__return-pulse { opacity: 0; stroke: var(--b); stroke-width: 2.5; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.omsag-lp-acs__loop.is-returning .omsag-lp-acs__return-pulse { opacity: 1; animation: acs-return 1.7s cubic-bezier(.55,.05,.25,1) forwards; }
.omsag-lp-acs__return-tip { fill: var(--ln2); stroke: none; transition: fill .3s; }
.omsag-lp-acs__loop.is-returning .omsag-lp-acs__return-tip { fill: var(--b); }
.omsag-lp-acs__return span { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: #fff; padding: 0 12px; color: #8b948b; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; white-space: nowrap; transition: color .3s; }
.omsag-lp-acs__loop.is-returning .omsag-lp-acs__return span { color: var(--b); }
.omsag-lp-acs__return-mobile { display: none; }
@keyframes acs-blink { 50% { opacity: .35; } }
@keyframes acs-return { 0% { stroke-dashoffset: 1200; } 100% { stroke-dashoffset: 0; } }
@keyframes acs-return-m { 0% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }

/* Strategiegrundlagen box (static, centred, not full width) */
.omsag-lp-acs__faq { display: flex; align-items: flex-start; gap: 16px; max-width: 495px; margin: 4px auto 0; background: var(--omsag-lp-panel, #f1f2f5); border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius, 18px); padding: 22px 26px; }
.omsag-lp-acs__faq-mark { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: var(--b); background: #fff; border: 1px solid var(--ln); }
.omsag-lp-acs__faq-body { min-width: 0; }
.omsag-lp-acs__faq-qt { display: block; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 7px; }
.omsag-lp-acs__faq-a { font-size: 14.5px; line-height: 1.55; color: var(--ts); }

/* Reveal */
.omsag-lp-acs.acs-anim .omsag-lp-acs__overline,
.omsag-lp-acs.acs-anim .omsag-lp-acs__headline,
.omsag-lp-acs.acs-anim .omsag-lp-acs__body,
.omsag-lp-acs.acs-anim .omsag-lp-acs__loop,
.omsag-lp-acs.acs-anim .omsag-lp-acs__faq { opacity: 0; transform: translateY(16px); }
.omsag-lp-acs.acs-anim.is-in .omsag-lp-acs__overline { animation: acs-up .6s var(--ez) .02s forwards; }
.omsag-lp-acs.acs-anim.is-in .omsag-lp-acs__headline { animation: acs-up .7s var(--ez) .08s forwards; }
.omsag-lp-acs.acs-anim.is-in .omsag-lp-acs__body     { animation: acs-up .7s var(--ez) .16s forwards; }
.omsag-lp-acs.acs-anim.is-in .omsag-lp-acs__loop     { animation: acs-up .7s var(--ez) .26s forwards; }
.omsag-lp-acs.acs-anim.is-in .omsag-lp-acs__faq      { animation: acs-up .7s var(--ez) .42s forwards; }
@keyframes acs-up { to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 1040px) {
  .omsag-lp-acs { padding: 80px 0; }
  .omsag-lp-acs__track { grid-template-columns: 1fr 1fr; }
  .omsag-lp-acs__return { display: none; }
}
@media (max-width: 640px) {
  .omsag-lp-acs { padding: 60px 0; }
  .omsag-lp-acs__container { padding: 0 20px; }
  .omsag-lp-acs__loop-top { flex-wrap: wrap; gap: 8px; }
  .omsag-lp-acs__track { grid-template-columns: 1fr; gap: 10px; margin-left: 48px; }
  .omsag-lp-acs__return-mobile { display: block; position: absolute; left: 0; top: 58px; bottom: 8px; width: 48px; }
  .omsag-lp-acs__return-mobile svg { width: 48px; height: 100%; overflow: visible; fill: none; stroke: var(--ln2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .omsag-lp-acs__return-arrow { fill: var(--ln2); stroke: none; transition: fill .3s; }
  .omsag-lp-acs__return-mobile .omsag-lp-acs__return-pulse { opacity: 0; stroke: var(--b); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .omsag-lp-acs__loop.is-returning .omsag-lp-acs__return-mobile .omsag-lp-acs__return-pulse { opacity: 1; animation: acs-return-m 1.7s cubic-bezier(.55,.05,.25,1) forwards; }
  .omsag-lp-acs__loop.is-returning .omsag-lp-acs__return-arrow { fill: var(--b); }
  .omsag-lp-acs__return-mobile span { position: absolute; left: 20px; top: 50%; padding: 8px 0; background: #fff; color: #8b948b; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); transition: color .3s; }
  .omsag-lp-acs__loop.is-returning .omsag-lp-acs__return-mobile span { color: var(--b); }
  .omsag-lp-acs__faq-a { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .omsag-lp-acs.acs-anim .omsag-lp-acs__overline,
  .omsag-lp-acs.acs-anim .omsag-lp-acs__headline,
  .omsag-lp-acs.acs-anim .omsag-lp-acs__body,
  .omsag-lp-acs.acs-anim .omsag-lp-acs__loop,
  .omsag-lp-acs.acs-anim .omsag-lp-acs__faq { opacity: 1; transform: none; }
  .omsag-lp-acs__status span, .omsag-lp-acs__return-pulse { animation: none; }
  .omsag-lp-acs * { animation: none !important; }
}