/* OMSAG LP · Audit-Wahl (Einzel vs. Gesamt)
   Default = visible (no-JS safe). JS adds `.ae-anim` (hidden pre-state) and
   `.is-in` on scroll to play the intro animation. */

.omsag-lp-aw {
  --b:   var(--omsag-lp-brand, #50aa3c);
  --bl:  var(--omsag-lp-lime, #aad337);
  --bd:  var(--omsag-lp-brand-deep, #50aa3c);
  --bs:  var(--omsag-lp-brand-soft, rgba(80,170,60,.12));
  --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);
  --line2: #e3e5e9;
  --ez:  var(--omsag-lp-ease, cubic-bezier(.25,.1,.25,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);
  padding: 92px 0;
  background: #f1f2f5;
  -webkit-font-smoothing: antialiased;
}
.omsag-lp-aw, .omsag-lp-aw *, .omsag-lp-aw *::before, .omsag-lp-aw *::after { box-sizing: border-box; }
.omsag-lp-aw__container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* --- header --- */
.omsag-lp-aw__head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.omsag-lp-aw__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--b); margin: 0 0 14px; }
.omsag-lp-aw__headline { font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin: 0; }

/* --- compare grid (card · oder · card) --- */
.omsag-lp-aw__compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 22px; }

.omsag-lp-aw__card {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid var(--line2); border-radius: 22px;
  padding: 32px 34px;
  box-shadow: 0 2px 6px rgba(15,17,21,.04), 0 18px 50px -28px rgba(15,17,21,.18);
  transition: transform .3s var(--ez), box-shadow .3s var(--ez), border-color .3s var(--ez);
}
.omsag-lp-aw__card.is-link { cursor: pointer; }
.omsag-lp-aw__card.is-link:hover { transform: translateY(-4px); border-color: rgba(80,170,60,.35); box-shadow: 0 6px 16px rgba(15,17,21,.06), 0 30px 60px -26px rgba(15,17,21,.24); }
.omsag-lp-aw.ae-anim .omsag-lp-aw__card { opacity: 0; transform: translateY(22px); }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__card { animation: aw-card .65s var(--ez) forwards; animation-delay: calc(var(--d) * .12s); }
@keyframes aw-card { to { opacity: 1; transform: none; } }
.omsag-lp-aw__stretch { position: absolute; inset: 0; z-index: 3; border-radius: inherit; text-indent: -9999px; overflow: hidden; white-space: nowrap; }
.omsag-lp-aw__stretch:focus { outline: none; }

.omsag-lp-aw__main { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.omsag-lp-aw__card-title { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin: 0 0 8px; }
.omsag-lp-aw__card-sub { font-size: 14.5px; color: var(--ts); line-height: 1.55; margin: 0 0 18px; max-width: 30ch; }
.omsag-lp-aw__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.omsag-lp-aw__list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.omsag-lp-aw.ae-anim .omsag-lp-aw__list li { opacity: 0; transform: translateX(-8px); }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__list li { animation: aw-li .5s var(--ez) forwards; animation-delay: calc(.35s + var(--d) * .12s + var(--li) * .09s); }
@keyframes aw-li { to { opacity: 1; transform: none; } }
.omsag-lp-aw__check { flex: 0 0 auto; width: 19px; height: 19px; color: var(--b); }
.omsag-lp-aw__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--b); text-decoration: none; }
.omsag-lp-aw__card.is-link:hover .omsag-lp-aw__link { color: var(--bd); }
.omsag-lp-aw__arrow { display: inline-flex; align-items: center; transition: transform .35s cubic-bezier(.42,0,.58,1); }
.omsag-lp-aw__arrow svg { width: 20px; height: 14px; display: block; }
.omsag-lp-aw__card.is-link:hover .omsag-lp-aw__arrow { transform: translateX(5px); }

/* --- visuals --- */
.omsag-lp-aw__visual { flex: 0 0 auto; width: 180px; height: 180px; position: relative; z-index: 1; }
.omsag-lp-aw__radar, .omsag-lp-aw__rings { width: 100%; height: 100%; display: block; overflow: visible; }

/* radar */
.omsag-lp-aw__radar-grid { fill: none; stroke: var(--line2); stroke-width: 1; }
.omsag-lp-aw__radar-grid polygon { stroke: var(--line2); }
.omsag-lp-aw__radar-grid line { stroke: var(--line2); }
.omsag-lp-aw.ae-anim .omsag-lp-aw__radar-grid { opacity: 0; }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__radar-grid { animation: aw-fade .6s ease .15s forwards; }
.omsag-lp-aw__wedge { transform-origin: 100px 100px; transform-box: view-box; filter: drop-shadow(0 6px 14px rgba(80,170,60,.35)); }
.omsag-lp-aw.ae-anim .omsag-lp-aw__wedge { transform: scale(0); opacity: 0; }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__wedge { animation: aw-wedge .85s cubic-bezier(.34,1.4,.5,1) .55s forwards; }
@keyframes aw-wedge { to { transform: scale(1); opacity: 1; } }
.omsag-lp-aw__sweep { transform-origin: 100px 100px; transform-box: view-box; opacity: 0; }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__sweep { animation: aw-sweep 1.3s cubic-bezier(.4,0,.2,1) .25s forwards; }
@keyframes aw-sweep { 0% { opacity: 0; transform: rotate(-40deg); } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: rotate(320deg); } }
.omsag-lp-aw__radar-core { fill: var(--b); }
.omsag-lp-aw.ae-anim .omsag-lp-aw__radar-core { opacity: 0; }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__radar-core { animation: aw-fade .4s ease 1.1s forwards; }

/* rings */
.omsag-lp-aw__ring-track { stroke: var(--line2); stroke-width: 14; }
.omsag-lp-aw__ring-faint { stroke: rgba(80,170,60,.22); stroke-width: 2; transform-origin: 100px 100px; transform-box: view-box; }
.omsag-lp-aw.ae-anim .omsag-lp-aw__ring-faint { opacity: 0; transform: scale(.72); }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__ring-faint--1 { animation: aw-ring-in .8s var(--ez) .25s forwards; }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__ring-faint--2 { animation: aw-ring-in .8s var(--ez) .4s forwards; }
@keyframes aw-ring-in { to { opacity: 1; transform: scale(1); } }
.omsag-lp-aw__ring-fill { stroke-dasharray: 100; stroke-dashoffset: 100; }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__ring-fill { animation: aw-draw 1.5s cubic-bezier(.25,.1,.25,1) .45s forwards; }
@keyframes aw-draw { to { stroke-dashoffset: 6; } }

@keyframes aw-fade { to { opacity: 1; } }

/* --- oder badge --- */
.omsag-lp-aw__or { position: relative; flex: 0 0 auto; width: 70px; height: 70px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 10px 30px -10px rgba(15,17,21,.2); justify-self: center; }
.omsag-lp-aw__or::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(circle, rgba(80,170,60,.22), transparent 70%); animation: aw-glow 2.8s ease-in-out infinite; }
@keyframes aw-glow { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
.omsag-lp-aw__or-ring { position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, var(--b), var(--bl)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.omsag-lp-aw__or-text { position: relative; font-size: 14px; font-weight: 600; color: var(--ts); }
.omsag-lp-aw.ae-anim .omsag-lp-aw__or { opacity: 0; transform: scale(.5); }
.omsag-lp-aw.ae-anim.is-in .omsag-lp-aw__or { animation: aw-or .6s cubic-bezier(.34,1.5,.5,1) .3s forwards; }
@keyframes aw-or { to { opacity: 1; transform: scale(1); } }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 940px) {
  .omsag-lp-aw { padding: 72px 0; }
  .omsag-lp-aw__compare { grid-template-columns: 1fr; gap: 0; }
  .omsag-lp-aw__or { margin: -22px auto; z-index: 4; }
  .omsag-lp-aw__card { margin: 14px 0; }
}
@media (max-width: 560px) {
  .omsag-lp-aw { padding: 56px 0; }
  .omsag-lp-aw__container { padding: 0 20px; }
  .omsag-lp-aw__card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 24px; }
  .omsag-lp-aw__main { order: 1; width: 100%; }
  .omsag-lp-aw__visual { order: 0; width: 130px; height: 130px; align-self: center; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .omsag-lp-aw.ae-anim .omsag-lp-aw__card,
  .omsag-lp-aw.ae-anim .omsag-lp-aw__list li,
  .omsag-lp-aw.ae-anim .omsag-lp-aw__radar-grid,
  .omsag-lp-aw.ae-anim .omsag-lp-aw__wedge,
  .omsag-lp-aw.ae-anim .omsag-lp-aw__radar-core,
  .omsag-lp-aw.ae-anim .omsag-lp-aw__ring-faint,
  .omsag-lp-aw.ae-anim .omsag-lp-aw__or { opacity: 1; transform: none; }
  .omsag-lp-aw.ae-anim .omsag-lp-aw__ring-fill { stroke-dashoffset: 6; }
  .omsag-lp-aw__or::before { animation: none; }
  .omsag-lp-aw * { animation: none !important; }
}