/* OMSAG Download · 01 Hero & Formular
   Gleicher Grund wie der Hero der Leistungsseiten: Verlaufsbild plus feines
   Raster. Links die Ansage, rechts die Formularkarte. */

.omsag-lp-dlh {
  --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);
  --bga: 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; isolation: isolate; overflow: hidden;
  font-family: var(--font); color: var(--ink); background: var(--bga);
  padding: 120px 0 clamp(72px, 7vw, 104px);
  -webkit-font-smoothing: antialiased;
}
.omsag-lp-dlh, .omsag-lp-dlh *, .omsag-lp-dlh *::before, .omsag-lp-dlh *::after { box-sizing: border-box; }
.omsag-lp-dlh :is(h1,p,li,span,strong,a) { overflow-wrap: break-word; }

.omsag-lp-dlh__deco {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.omsag-lp-dlh__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 64% 22%, #000 24%, transparent 66%);
          mask-image: radial-gradient(ellipse at 64% 22%, #000 24%, transparent 66%);
}

.omsag-lp-dlh__container {
  position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  grid-template-areas: ". side" "copy side" "person side" ". side";
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: clamp(40px, 5.6vw, 88px); align-items: start;
}
.omsag-lp-dlh__copy { grid-area: copy; }
.omsag-lp-dlh__side { grid-area: side; align-self: center; }
.omsag-lp-dlh__person { grid-area: person; align-self: start; justify-self: start; }

/* ── Links ──────────────────────────────────────────────────────────────── */
.omsag-lp-dlh__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 26px;
  font-size: 13.5px; font-weight: 500; color: var(--mut);
}
.omsag-lp-dlh__crumbs a { color: var(--ts); text-decoration: none; border-bottom: 1px solid rgba(35,39,48,.18); padding-bottom: 1px; transition: color .2s var(--ez), border-color .2s var(--ez); }
.omsag-lp-dlh__crumbs a:hover { color: var(--b); border-color: var(--b); }
.omsag-lp-dlh__crumbs [aria-current] { color: var(--ink); }

.omsag-lp-dlh__eyebrow {
  margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--b);
}
.omsag-lp-dlh__headline {
  margin: 0 0 22px; max-width: 20ch;
  font-family: inherit; font-size: clamp(32px, 3.7vw, 50px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--ink);
  hyphens: manual;
}
.omsag-lp-dlh__headline em { font-style: normal; background: linear-gradient(100deg, var(--b), var(--bl)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.omsag-lp-dlh__lead { margin: 0 0 30px; max-width: 50ch; font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6; color: var(--ts); }

.omsag-lp-dlh__points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 13px; }
.omsag-lp-dlh__points li { display: flex; align-items: flex-start; gap: 13px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.omsag-lp-dlh__check {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 0;
  border-radius: 50%; color: #fff; background: var(--b);
  box-shadow: 0 6px 14px -6px rgba(80,170,60,.75);
}
.omsag-lp-dlh__check svg { width: 15px; height: 15px; display: block; }

.omsag-lp-dlh__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.omsag-lp-dlh__chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid rgba(35,39,48,.1); border-radius: var(--omsag-lp-pill, 999px);
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 600; line-height: 1; color: var(--ts);
}
.omsag-lp-dlh__chip svg { width: 15px; height: 15px; color: var(--b); }

/* Ansprechpartner */
.omsag-lp-dlh__person {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; padding: 10px 12px 10px 10px; max-width: 100%;
  border: 1px solid rgba(35,39,48,.08); border-radius: 20px;
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px -32px rgba(20,40,30,.5);
}
.omsag-lp-dlh__avatar {
  flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; background: #eef3ee; color: var(--b); font-weight: 700; font-size: 20px;
}
.omsag-lp-dlh__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.omsag-lp-dlh__person-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 6px; }
.omsag-lp-dlh__person-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mut); }
.omsag-lp-dlh__person-meta strong { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.omsag-lp-dlh__person-role { font-size: 13px; color: var(--ts); line-height: 1.35; }
.omsag-lp-dlh__person-links { display: flex; gap: 6px; padding-left: 12px; border-left: 1px solid var(--ln); }
.omsag-lp-dlh__person-links a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--ln); background: #fff; color: var(--ink); text-decoration: none;
  transition: border-color .2s var(--ez), color .2s var(--ez), transform .2s var(--ez);
}
.omsag-lp-dlh__person-links a:hover { border-color: var(--b); color: var(--b); transform: translateY(-1px); }
.omsag-lp-dlh__person-links svg { width: 17px; height: 17px; }

/* ── Rechts: Formularkarte ──────────────────────────────────────────────── */
.omsag-lp-dlh__side { min-width: 0; width: 100%; }
.omsag-lp-dlh__card {
  position: relative; scroll-margin-top: var(--omsag-anchor-offset, 110px);
  padding: clamp(24px, 2.6vw, 36px);
  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), 0 2px 0 rgba(255,255,255,.8) inset;
  transition: box-shadow .6s var(--omsag-lp-ease, cubic-bezier(.2,.7,.2,1));
}
.omsag-lp-dlh__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-dlh__card-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.omsag-lp-dlh__thumb {
  position: relative; flex: none; display: block; width: 66px;
}
.omsag-lp-dlh__thumb .omsag-dlc { filter: drop-shadow(0 12px 16px rgba(20,40,30,.18)); }
.omsag-lp-dlh__thumb .omsag-dlc__doc { transform: rotate(-4deg); }
.omsag-lp-dlh__thumb--img { width: 96px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 26px -14px rgba(20,40,30,.45); }
.omsag-lp-dlh__thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.omsag-lp-dlh__card-titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.omsag-lp-dlh__card-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--b);
}
.omsag-lp-dlh__card-kicker svg { width: 15px; height: 15px; }
.omsag-lp-dlh__card-title { font-size: clamp(21px, 1.9vw, 25px); font-weight: 700; line-height: 1.18; letter-spacing: -.025em; color: var(--ink); }
.omsag-lp-dlh__card-lead { margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--ts); }
.omsag-lp-dlh__card-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-dlh__card-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--b); }

/* ── Auftritt ───────────────────────────────────────────────────────────── */
.omsag-lp-dlh.dlh-anim :is(.omsag-lp-dlh__crumbs, .omsag-lp-dlh__eyebrow, .omsag-lp-dlh__headline, .omsag-lp-dlh__lead, .omsag-lp-dlh__points li, .omsag-lp-dlh__meta, .omsag-lp-dlh__person, .omsag-lp-dlh__card) {
  opacity: 0; transform: translateY(16px);
}
.omsag-lp-dlh.is-in .omsag-lp-dlh__crumbs   { animation: dlh-rise .6s var(--ez) .02s forwards; }
.omsag-lp-dlh.is-in .omsag-lp-dlh__eyebrow  { animation: dlh-rise .6s var(--ez) .06s forwards; }
.omsag-lp-dlh.is-in .omsag-lp-dlh__headline { animation: dlh-rise .75s var(--ez) .12s forwards; }
.omsag-lp-dlh.is-in .omsag-lp-dlh__lead     { animation: dlh-rise .75s var(--ez) .2s forwards; }
.omsag-lp-dlh.is-in .omsag-lp-dlh__points li { animation: dlh-rise .6s var(--ez) forwards; animation-delay: calc(.28s + var(--i) * .07s); }
.omsag-lp-dlh.is-in .omsag-lp-dlh__meta     { animation: dlh-rise .6s var(--ez) .5s forwards; }
.omsag-lp-dlh.is-in .omsag-lp-dlh__person   { animation: dlh-rise .6s var(--ez) .56s forwards; }
.omsag-lp-dlh.is-in .omsag-lp-dlh__card     { animation: dlh-card .9s cubic-bezier(.16,.84,.24,1) .16s forwards; }
@keyframes dlh-rise { to { opacity: 1; transform: none; } }
@keyframes dlh-card { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }


/* ── Variante Video: Vorstellung rechts, Formular weiter unten ─────────────── */
.omsag-lp-dlh__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 30px 0 0; }
.omsag-lp-dlh__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px;
  border-radius: var(--omsag-lp-pill, 999px); background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: transform .25s var(--ez), box-shadow .25s var(--ez);
}
.omsag-lp-dlh__btn svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .25s var(--ez); }
.omsag-lp-dlh__btn:hover, .omsag-lp-dlh__btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(35,39,48,.45); }
.omsag-lp-dlh__btn:hover svg { transform: rotate(90deg) translateX(3px); }
.omsag-lp-dlh__link {
  display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
}
.omsag-lp-dlh__link > span:last-child { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.omsag-lp-dlh__link-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: 0 8px 20px -10px rgba(20,40,30,.45);
  transition: transform .25s var(--ez), color .25s var(--ez);
}
.omsag-lp-dlh__link-ico svg { width: 15px; height: 15px; margin-left: 2px; }
.omsag-lp-dlh__link:hover { color: var(--b); }
.omsag-lp-dlh__link:hover .omsag-lp-dlh__link-ico { transform: scale(1.08); color: var(--b); }
.omsag-lp-dlh--video .omsag-lp-dlh__meta { margin-top: 0; }

/* Variante Video: Video, Bildunterschrift und Ansprechpartner in einer weissen Karte,
   gebaut wie die Formularkarte der anderen Seiten. */
.omsag-lp-dlh__video {
  margin: 0; padding: 10px; border-radius: var(--omsag-lp-radius-lg, 28px);
  border: 1px solid rgba(80,170,60,.16);
  background: radial-gradient(120% 60% at 100% 100%, rgba(170,211,55,.10), transparent 55%), #fff;
  box-shadow: 0 50px 90px -40px rgba(45,100,60,.45), 0 2px 0 rgba(255,255,255,.8) inset;
}
.omsag-lp-dlh__video-frame {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: var(--dlh-ratio, 16 / 10); border-radius: calc(var(--omsag-lp-radius-lg, 28px) - 9px);
  background: #0e1216;
  transition: transform .6s cubic-bezier(.16,.84,.24,1);
}
.omsag-lp-dlh__video-poster, .omsag-lp-dlh__video-el {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
}
.omsag-lp-dlh__video-el { object-fit: contain; background: #000; }
.omsag-lp-dlh__video-el[hidden] { display: none; }
.omsag-lp-dlh__video-poster { transition: transform 1.2s cubic-bezier(.16,.84,.24,1), opacity .4s var(--ez); }
.omsag-lp-dlh__video-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,14,20,0) 45%, rgba(10,14,20,.35) 100%);
  transition: opacity .4s var(--ez);
}
.omsag-lp-dlh__video:hover .omsag-lp-dlh__video-poster { transform: scale(1.03); }
.omsag-lp-dlh__play {
  position: absolute; z-index: 2; inset: 0; display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.omsag-lp-dlh__play-ring {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  color: var(--ink); background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 0 0 10px rgba(255,255,255,.22), 0 24px 50px -18px rgba(0,0,0,.6);
  transition: transform .45s cubic-bezier(.16,.84,.24,1), box-shadow .45s var(--ez);
}
.omsag-lp-dlh__play-ring svg { width: 32px; height: 32px; margin-left: 5px; }
.omsag-lp-dlh__play:hover .omsag-lp-dlh__play-ring { transform: scale(1.07); box-shadow: 0 0 0 16px rgba(255,255,255,.18), 0 28px 60px -18px rgba(0,0,0,.65); }
.omsag-lp-dlh__play:focus-visible { outline: none; }
.omsag-lp-dlh__play:focus-visible .omsag-lp-dlh__play-ring { outline: 2px solid var(--b); outline-offset: 6px; }
.omsag-lp-dlh__video.is-playing .omsag-lp-dlh__play,
.omsag-lp-dlh__video.is-playing .omsag-lp-dlh__video-poster,
.omsag-lp-dlh__video.is-playing .omsag-lp-dlh__video-frame::after { opacity: 0; pointer-events: none; }
.omsag-lp-dlh__video.is-playing .omsag-lp-dlh__play { visibility: hidden; }
.omsag-lp-dlh__video-cap {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 14px 16px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.omsag-lp-dlh__person--inset {
  display: flex; width: 100%; margin: 0; padding: 16px 14px 8px;
  border: 0; border-top: 1px solid var(--ln); border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.omsag-lp-dlh__person--inset .omsag-lp-dlh__avatar { width: 48px; height: 48px; border-radius: 50%; }
.omsag-lp-dlh__person--inset .omsag-lp-dlh__person-links { margin-left: auto; padding-left: 0; border-left: 0; }
.omsag-lp-dlh--video .omsag-lp-dlh__container { grid-template-areas: ". side" "copy side" ". side"; grid-template-rows: 1fr auto 1fr; }
.omsag-lp-dlh__video-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--b); box-shadow: 0 0 0 4px rgba(80,170,60,.16); flex: none; }
.omsag-lp-dlh.dlh-anim .omsag-lp-dlh__cta, .omsag-lp-dlh.dlh-anim .omsag-lp-dlh__video { opacity: 0; transform: translateY(16px); }
.omsag-lp-dlh.is-in .omsag-lp-dlh__cta { animation: dlh-rise .6s var(--ez) .5s forwards; }
.omsag-lp-dlh.is-in .omsag-lp-dlh__video { animation: dlh-card .9s cubic-bezier(.16,.84,.24,1) .16s forwards; }
@media (max-width: 660px) {
  .omsag-lp-dlh__play-ring { width: 72px; height: 72px; }
  .omsag-lp-dlh__play-ring svg { width: 26px; height: 26px; }
  .omsag-lp-dlh__video { padding: 8px; border-radius: 24px; }
  .omsag-lp-dlh__video-frame { border-radius: 17px; }
  .omsag-lp-dlh__video-cap { padding: 16px 10px 14px; font-size: 14px; }
  .omsag-lp-dlh__person--inset { padding: 14px 10px 6px; }
  .omsag-lp-dlh__btn { width: 100%; justify-content: center; }
}

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .omsag-lp-dlh { padding-top: 104px; }
  .omsag-lp-dlh__container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .omsag-lp-dlh__person { flex-wrap: wrap; }
}
@media (max-width: 920px) {
  .omsag-lp-dlh__container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "side" "person"; grid-template-rows: auto; row-gap: 40px; }
  .omsag-lp-dlh__person { margin-top: 0; }
  .omsag-lp-dlh--video .omsag-lp-dlh__container { grid-template-areas: "copy" "side"; grid-template-rows: auto; }
  .omsag-lp-dlh__headline { max-width: 20ch; }
  .omsag-lp-dlh__side { max-width: 620px; }
}
@media (max-width: 660px) {
  .omsag-lp-dlh { padding: 92px 0 56px; }
  .omsag-lp-dlh__container { padding: 0 20px; gap: 36px; }
  .omsag-lp-dlh__crumbs { margin-bottom: 20px; }
  .omsag-lp-dlh__lead { margin-bottom: 24px; }
  .omsag-lp-dlh__points li { font-size: 15.5px; }
  .omsag-lp-dlh__card { padding: 22px 20px 24px; border-radius: 22px; }
  .omsag-lp-dlh__card-head { gap: 14px; }
  .omsag-lp-dlh__thumb { width: 54px; }
  .omsag-lp-dlh__thumb--img { width: 80px; }
  .omsag-lp-dlh__person { display: flex; width: 100%; }
  .omsag-lp-dlh__person-links { margin-left: auto; }
}
@media (max-width: 420px) {
  .omsag-lp-dlh__person-links { width: 100%; margin-left: 0; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--ln); }
}

@media (prefers-reduced-motion: reduce) {
  .omsag-lp-dlh * { animation: none !important; transition: none !important; }
  .omsag-lp-dlh.dlh-anim * { opacity: 1 !important; transform: none !important; }
}