/* OMSAG Download · 04 Anfordern
   Die Seite endet, wie sie beginnt: auf dem Verlaufsgrund des Heros. Links
   noch einmal, was man bekommt, rechts das Formular. */

.omsag-lp-dlf {
  --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);
  --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); background: var(--omsag-lp-bg-alt, #f9faf8);
  padding: clamp(80px, 9vw, 136px) 0; -webkit-font-smoothing: antialiased;
}
.omsag-lp-dlf, .omsag-lp-dlf *, .omsag-lp-dlf *::before, .omsag-lp-dlf *::after { box-sizing: border-box; }
.omsag-lp-dlf__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: center; transform: scaleX(-1); }
.omsag-lp-dlf__deco::after {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background-image: linear-gradient(rgba(35,39,48,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(35,39,48,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 40% 50%, #000 20%, transparent 66%);
          mask-image: radial-gradient(ellipse at 40% 50%, #000 20%, transparent 66%);
}
.omsag-lp-dlf__container {
  width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center;
}

.omsag-lp-dlf__visual {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; max-width: 520px; margin: 0 0 clamp(28px, 3vw, 40px);
  border-radius: 24px; background: #eef2ee;
  box-shadow: 0 40px 80px -40px rgba(20,40,30,.5), 0 8px 20px -12px rgba(20,40,30,.25);
}
.omsag-lp-dlf__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.omsag-lp-dlf__badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.5);
}
.omsag-lp-dlf__badge svg { width: 15px; height: 15px; color: var(--b); }

.omsag-lp-dlf__eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--b); }
.omsag-lp-dlf__headline { margin: 0; max-width: 16ch; font-family: inherit; font-size: clamp(32px, 3.8vw, 50px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.omsag-lp-dlf__headline em { font-style: normal; background: linear-gradient(100deg, var(--b), var(--bl)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.omsag-lp-dlf__title { margin: 16px 0 0; font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; color: var(--ts); }
.omsag-lp-dlf__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.omsag-lp-dlf__points { gap: 14px; }
.omsag-lp-dlf__points li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; line-height: 1.45; }
.omsag-lp-dlf__ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--b); background: linear-gradient(150deg, rgba(170,211,55,.18), rgba(80,170,60,.10));
  box-shadow: inset 0 0 0 1px rgba(80,170,60,.16);
}
.omsag-lp-dlf__ico svg { width: 20px; height: 20px; }

.omsag-lp-dlf__card {
  scroll-margin-top: var(--omsag-anchor-offset, 110px);
  padding: clamp(26px, 2.8vw, 40px);
  border: 1px solid rgba(80,170,60,.18); border-radius: var(--omsag-lp-radius-lg, 28px);
  background: radial-gradient(120% 70% at 100% 0%, rgba(170,211,55,.12), transparent 52%), #fff;
  box-shadow: 0 40px 80px -38px rgba(45,100,60,.42);
  transition: box-shadow .6s var(--ez);
}
.omsag-lp-dlf__card.is-target { box-shadow: 0 0 0 4px rgba(80,170,60,.22), 0 40px 80px -38px rgba(45,100,60,.42); }
.omsag-lp-dlf__lead { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--ts); }
.omsag-lp-dlf__note { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--ln); font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.omsag-lp-dlf__note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--b); }

@media (max-width: 920px) {
  .omsag-lp-dlf__container { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .omsag-lp-dlf__card { max-width: 620px; }
}
@media (max-width: 660px) {
  .omsag-lp-dlf { padding: 64px 0; }
  .omsag-lp-dlf__container { padding: 0 20px; }
  .omsag-lp-dlf__card { padding: 22px 20px 24px; border-radius: 22px; }
  .omsag-lp-dlf__visual { border-radius: 18px; }
}