/* OMSAG LP · AIO · 03 Probleme — Light (Friction-Meter + dunkle Solution-Bridge). JS: .aop-anim -> .is-in */
.omsag-lp-aop{
  --b:var(--omsag-lp-brand,#50aa3c);--bl:var(--omsag-lp-lime,#aad337);--sky:#6fb4dd;--warn:#d6aa45;
  --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);
  position:relative;isolation:isolate;overflow:hidden;font-family:var(--font);color:var(--ink);
  -webkit-font-smoothing:antialiased;padding:clamp(72px,8vw,112px) 0;
  background:radial-gradient(circle at 12% 72%,rgba(80,170,60,.07),transparent 44%),var(--omsag-lp-bg-alt,#f9faf8);
}
.omsag-lp-aop,.omsag-lp-aop *,.omsag-lp-aop *::before,.omsag-lp-aop *::after{box-sizing:border-box}
.omsag-lp-aop__container{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,2.5vw,28px)}

/* Zweispaltig: links Intro + Meter, rechts Zeilen (ohne Sticky/Pin) */
.omsag-lp-aop__grid{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:clamp(40px,7vw,120px);align-items:start}
.omsag-lp-aop__head{margin:0}
.omsag-lp-aop__overline{margin:0 0 16px;color:var(--b);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.omsag-lp-aop__headline{margin:0 0 16px;font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.026em;line-height:1.07;color:var(--ink)}
.omsag-lp-aop__body{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--ts);max-width:60ch}
.omsag-lp-aop__fric{display:grid;max-width:430px;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:28px;color:var(--mut);font-size:13px;font-weight:600}
.omsag-lp-aop__fric i{height:5px;overflow:hidden;border-radius:5px;background:#dce1dc}
/* Fuellung waechst stueckweise (JS setzt --fill/--fillN). Farbe erscheint erst rot, je voller der Balken. */
.omsag-lp-aop__fric b{display:block;width:var(--fill,0%);height:100%;border-radius:5px;
  background:linear-gradient(90deg,#5bb63f 0%,#e0b53a 50%,#e5484d 100%);
  background-repeat:no-repeat;background-position:left center;background-size:calc(10000% / var(--fillN,88)) 100%;
  transition:width .55s var(--ez),background-size .55s var(--ez)}
.omsag-lp-aop__fric em{color:#7c8a84;font-style:normal;font-weight:700;transition:color .45s var(--ez)}
.omsag-lp-aop__fric.is-hot em{color:#e5484d}

.omsag-lp-aop__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.omsag-lp-aop__row{display:grid;grid-template-columns:32px 44px minmax(0,1fr);gap:18px;align-items:center;min-height:96px;padding:18px 22px;border-radius:15px;
  background:rgba(255,255,255,.85);border:1px solid rgba(28,49,57,.1);box-shadow:0 16px 40px -30px rgba(35,39,48,.5);
  transition:transform .35s var(--ez),box-shadow .35s var(--ez),border-color .3s}
.omsag-lp-aop__row:hover{transform:translateX(4px);border-color:rgba(28,49,57,.16);box-shadow:0 22px 46px -28px rgba(35,39,48,.5)}
.omsag-lp-aop__num{color:var(--mut);font-size:13px;font-weight:600}
.omsag-lp-aop__x{position:relative;width:42px;height:42px;border:1px solid #c5cdc7;border-radius:50%}
.omsag-lp-aop__x::before,.omsag-lp-aop__x::after{content:"";position:absolute;top:20px;left:11px;width:19px;height:1.5px;border-radius:2px;background:#6d7771}
.omsag-lp-aop__x::before{transform:rotate(45deg)}
.omsag-lp-aop__x::after{transform:rotate(-45deg)}
.omsag-lp-aop__row-txt{font-size:clamp(15.5px,1.25vw,18px);line-height:1.45;color:var(--ink);font-weight:500}

/* Solution bridge (dark) */
.omsag-lp-aop__solution{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;min-height:126px;
  margin-top:clamp(28px,3.5vw,48px);padding:24px 30px;overflow:hidden;border-radius:18px;color:#f3f7f2;background:linear-gradient(135deg,#172528,#20343a)}
.omsag-lp-aop__solution::after{content:"";position:absolute;right:-60px;bottom:-70px;width:220px;height:180px;border-radius:50%;background:var(--b);filter:blur(60px);opacity:.3;pointer-events:none}
.omsag-lp-aop__check{position:relative;z-index:1;width:56px;height:56px;flex:0 0 56px;border:1px solid rgba(170,211,55,.5);border-radius:50%}
.omsag-lp-aop__check::after{content:"";position:absolute;top:20px;left:17px;width:21px;height:11px;border-bottom:2px solid var(--bl);border-left:2px solid var(--bl);transform:rotate(-45deg)}
.omsag-lp-aop__solution-txt{position:relative;z-index:1;margin:0;font-size:clamp(17px,1.55vw,22px);font-weight:600;line-height:1.42;letter-spacing:-.01em}
.omsag-lp-aop__flow{position:relative;z-index:1;display:flex;gap:5px}
.omsag-lp-aop__flow i{width:30px;height:4px;border-radius:4px;background:rgba(170,211,55,.22)}
.omsag-lp-aop__flow i{animation:aop-flow 1.8s var(--ez) infinite}
.omsag-lp-aop__flow i:nth-child(2){animation-delay:.2s}
.omsag-lp-aop__flow i:nth-child(3){animation-delay:.4s}
@keyframes aop-flow{0%,100%{background:rgba(170,211,55,.22)}45%{background:var(--bl)}}

/* Reveal */
.omsag-lp-aop.aop-anim .omsag-lp-aop__overline,.omsag-lp-aop.aop-anim .omsag-lp-aop__headline,
.omsag-lp-aop.aop-anim .omsag-lp-aop__body,.omsag-lp-aop.aop-anim .omsag-lp-aop__fric,
.omsag-lp-aop.aop-anim .omsag-lp-aop__row,.omsag-lp-aop.aop-anim .omsag-lp-aop__solution{opacity:0;transform:translateY(16px)}
.omsag-lp-aop.aop-anim.is-in .omsag-lp-aop__overline{animation:aop-up .6s var(--ez) .02s forwards}
.omsag-lp-aop.aop-anim.is-in .omsag-lp-aop__headline{animation:aop-up .7s var(--ez) .1s forwards}
.omsag-lp-aop.aop-anim.is-in .omsag-lp-aop__body{animation:aop-up .7s var(--ez) .18s forwards}
.omsag-lp-aop.aop-anim.is-in .omsag-lp-aop__fric{animation:aop-up .6s var(--ez) .24s forwards}
.omsag-lp-aop.aop-anim.is-in .omsag-lp-aop__solution{animation:aop-up .7s var(--ez) .85s forwards}
@keyframes aop-up{to{opacity:1;transform:none}}

/* Zeilen bauen sich beim Scrollen einzeln auf (JS: .is-row) + kurzer Fehler-Blitz (rotes X, shaky). */
.omsag-lp-aop.aop-anim .omsag-lp-aop__row.is-row{animation:aop-up .5s var(--ez) forwards,aop-row-err .75s var(--ez) .06s}
.omsag-lp-aop__row.is-row .omsag-lp-aop__x{animation:aop-x-err .62s var(--ez) .06s}
.omsag-lp-aop__row.is-row .omsag-lp-aop__x::before,
.omsag-lp-aop__row.is-row .omsag-lp-aop__x::after{animation:aop-x-line .72s var(--ez) .06s}
@keyframes aop-x-err{
  0%{transform:translateX(0);border-color:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.16)}
  15%{transform:translateX(-3px)}
  30%{transform:translateX(3px)}
  45%{transform:translateX(-2px)}
  60%{transform:translateX(2px)}
  75%{transform:translateX(-1px);border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.12)}
  100%{transform:translateX(0);border-color:#c5cdc7;box-shadow:0 0 0 0 rgba(229,72,77,0)}
}
@keyframes aop-x-line{0%,72%{background:#e5484d}100%{background:#6d7771}}
@keyframes aop-row-err{
  0%{border-color:rgba(229,72,77,.6);box-shadow:0 0 0 3px rgba(229,72,77,.1),0 16px 40px -30px rgba(35,39,48,.5)}
  100%{border-color:rgba(28,49,57,.1);box-shadow:0 0 0 0 rgba(229,72,77,0),0 16px 40px -30px rgba(35,39,48,.5)}
}

@media(max-width:900px){
  .omsag-lp-aop__grid{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
}
@media(max-width:600px){
  .omsag-lp-aop__row{grid-template-columns:26px 40px minmax(0,1fr);gap:12px;padding:16px 18px}
  .omsag-lp-aop__solution{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .omsag-lp-aop__flow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .omsag-lp-aop.aop-anim [class*="omsag-lp-aop__"]{opacity:1!important;transform:none!important}
  .omsag-lp-aop__fric b{transition:none;width:var(--v,88%)!important}
  .omsag-lp-aop *{animation:none!important}
}