/* OMSAG LP · Data & CRM · 07 Zusammenarbeit — Light. Sechs Phasen im Raster, Rollen farbcodiert. Kein Scroll-Pin mehr.
   JS setzt nur .daz-anim -> .is-in. */
.omsag-lp-daz{
  --b:var(--omsag-lp-brand,#50aa3c);--bl:var(--omsag-lp-lime,#aad337);--sky:#6fb4dd;
  --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));
  --step:clamp(280px,44vh,420px);
  position:relative;isolation:isolate;font-family:var(--omsag-lp-font,'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
  color:var(--ink);-webkit-font-smoothing:antialiased;padding:clamp(72px,8vw,112px) 0 clamp(64px,7vw,96px);
  background:var(--omsag-lp-bg,#fff);
}
.omsag-lp-daz,.omsag-lp-daz *,.omsag-lp-daz *::before,.omsag-lp-daz *::after{box-sizing:border-box}
.omsag-lp-daz a:focus,.omsag-lp-daz a:focus-visible{outline:none;box-shadow:none}
.omsag-lp-daz__container{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,2.5vw,28px)}

.omsag-lp-daz__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(18px,3vw,48px);
  align-items:end;margin-bottom:clamp(26px,3.2vw,40px)}
.omsag-lp-daz__head-main{min-width:0}
.omsag-lp-daz__overline{margin:0 0 16px;color:var(--b);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.omsag-lp-daz__headline{margin:0;max-width:26ch;font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.026em;line-height:1.08;color:var(--ink)}
.omsag-lp-daz__body{margin:0;max-width:60ch;font-size:clamp(15px,1.2vw,17px);line-height:1.62;color:var(--ts)}

/* ── Legende: wer führt in welcher Phase ──────────────────────────────── */
.omsag-lp-daz__legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  margin-bottom:clamp(16px,2vw,22px);padding-bottom:clamp(14px,1.6vw,18px);border-bottom:1px solid var(--ln)}
.omsag-lp-daz__legend-title{margin:0;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.018em;color:var(--ink)}
.omsag-lp-daz__legend-keys{display:flex;flex-wrap:wrap;gap:8px 20px}
.omsag-lp-daz__key{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ts)}
.omsag-lp-daz__key i{width:9px;height:9px;border-radius:50%}
.omsag-lp-daz__key[data-lane="you"] i{background:#6fb4dd}
.omsag-lp-daz__key[data-lane="both"] i{background:linear-gradient(90deg,#6fb4dd 0 50%,#50aa3c 50% 100%)}
.omsag-lp-daz__key[data-lane="oms"] i{background:var(--b)}

/* ── Phasen: alle sechs auf einen Blick, kein Scroll-Hijack ───────────── */
.omsag-lp-daz__phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);
  margin-bottom:clamp(30px,4vw,48px)}
.omsag-lp-daz__phase{position:relative;display:flex;flex-direction:column;padding:clamp(20px,2.2vw,26px);
  border-radius:20px;border:1px solid var(--ln);background:var(--omsag-lp-bg-alt,#f9faf8);
  transition:border-color .3s var(--ez),background .3s var(--ez),box-shadow .3s var(--ez)}
.omsag-lp-daz__phase:hover{background:#fff;border-color:rgba(80,170,60,.26);box-shadow:0 24px 52px -40px rgba(35,39,48,.4)}

.omsag-lp-daz__phase-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.omsag-lp-daz__phase-num{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--ink)}
.omsag-lp-daz__phase-lane{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--ln);background:#fff;color:var(--ts)}
.omsag-lp-daz__phase-lane i{width:8px;height:8px;border-radius:50%;background:var(--mut)}
.omsag-lp-daz__phase[data-lane="you"] .omsag-lp-daz__phase-lane{border-color:rgba(111,180,221,.4);color:#2f7196}
.omsag-lp-daz__phase[data-lane="you"] .omsag-lp-daz__phase-lane i{background:#6fb4dd}
.omsag-lp-daz__phase[data-lane="you"] .omsag-lp-daz__phase-num{background:#3d7ea6}
.omsag-lp-daz__phase[data-lane="both"] .omsag-lp-daz__phase-lane{border-color:rgba(80,170,60,.4);color:var(--ink)}
.omsag-lp-daz__phase[data-lane="both"] .omsag-lp-daz__phase-lane i{background:linear-gradient(90deg,#6fb4dd 0 50%,#50aa3c 50% 100%)}
.omsag-lp-daz__phase[data-lane="both"] .omsag-lp-daz__phase-num{background:linear-gradient(120deg,#3d7ea6,#50aa3c)}
.omsag-lp-daz__phase[data-lane="oms"] .omsag-lp-daz__phase-lane{border-color:rgba(80,170,60,.34);color:#3e7d33}
.omsag-lp-daz__phase[data-lane="oms"] .omsag-lp-daz__phase-lane i{background:var(--b)}
.omsag-lp-daz__phase[data-lane="oms"] .omsag-lp-daz__phase-num{background:var(--b)}

.omsag-lp-daz__phase-title{margin:0 0 16px;font-size:clamp(17px,1.45vw,20px);font-weight:700;letter-spacing:-.022em;line-height:1.2;color:var(--ink)}

.omsag-lp-daz__rows{margin:0 0 18px;display:flex;flex-direction:column;gap:12px}
.omsag-lp-daz__row dt{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.omsag-lp-daz__row dt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mut)}
.omsag-lp-daz__row--you dt::before{background:#6fb4dd}
.omsag-lp-daz__row--you dt{color:#3d7ea6}
.omsag-lp-daz__row--us dt::before{background:var(--b)}
.omsag-lp-daz__row--us dt{color:#3e7d33}
.omsag-lp-daz__row dd{margin:0;font-size:14px;line-height:1.5;color:var(--ts)}

.omsag-lp-daz__out{margin-top:auto;padding:13px 15px;border-radius:13px;background:#fff;border:1px solid var(--ln)}
.omsag-lp-daz__phase:hover .omsag-lp-daz__out{background:var(--omsag-lp-bg-alt,#f9faf8)}
.omsag-lp-daz__out span{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.omsag-lp-daz__out span svg{width:14px;height:14px;flex:0 0 14px;color:var(--b)}
.omsag-lp-daz__out strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.012em;line-height:1.4;color:var(--ink)}

/* ── Rollen ────────────────────────────────────────────────────────────── */
.omsag-lp-daz__roles{padding:clamp(22px,2.6vw,32px);border-radius:24px;border:1px solid var(--ln);background:var(--omsag-lp-bg-alt,#f9faf8)}
.omsag-lp-daz__roles-title{margin:0 0 clamp(16px,2vw,22px);font-size:clamp(17px,1.5vw,21px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.omsag-lp-daz__roles-grid{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;gap:clamp(12px,1.6vw,20px)}
.omsag-lp-daz__party{padding:clamp(18px,2vw,24px);border-radius:18px;background:#fff;border:1px solid var(--ln);height:100%}
.omsag-lp-daz__party--oms{border-color:rgba(80,170,60,.28)}
.omsag-lp-daz__party--client{border-color:rgba(111,180,221,.28)}
.omsag-lp-daz__party-head{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.omsag-lp-daz__party-head svg{width:18px;height:18px}
.omsag-lp-daz__party--oms .omsag-lp-daz__party-head svg{color:var(--b)}
.omsag-lp-daz__party--client .omsag-lp-daz__party-head svg{color:#3d7ea6}
.omsag-lp-daz__party ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.omsag-lp-daz__party li{padding:0}
.omsag-lp-daz__party li strong{display:block;margin-bottom:3px;font-size:14.5px;font-weight:700;letter-spacing:-.014em;color:var(--ink)}
.omsag-lp-daz__party li small{display:block;font-size:13px;line-height:1.45;color:var(--ts)}
.omsag-lp-daz__party-link{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--b);background:#fff;border:1px solid var(--ln)}
.omsag-lp-daz__party-link svg{width:20px;height:20px;animation:daz-nudge 2.8s var(--ez) infinite}

.omsag-lp-daz__cta{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(24px,3vw,34px);padding:16px 28px;border-radius:999px;
  background:linear-gradient(135deg,#232730,#3a4150);color:#fff;text-decoration:none;font-size:15px;font-weight:600;
  transition:transform .25s var(--ez),box-shadow .25s var(--ez)}
.omsag-lp-daz__cta svg{width:18px;height:18px;transition:transform .25s var(--ez)}
.omsag-lp-daz__cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(35,39,48,.5)}
.omsag-lp-daz__cta:hover svg{transform:translateX(4px)}

@keyframes daz-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

/* Reveal */
.omsag-lp-daz.daz-anim .omsag-lp-daz__overline,.omsag-lp-daz.daz-anim .omsag-lp-daz__headline,
.omsag-lp-daz.daz-anim .omsag-lp-daz__body,.omsag-lp-daz.daz-anim .omsag-lp-daz__legend,
.omsag-lp-daz.daz-anim .omsag-lp-daz__phase,.omsag-lp-daz.daz-anim .omsag-lp-daz__roles,
.omsag-lp-daz.daz-anim .omsag-lp-daz__cta{opacity:0;transform:translateY(18px)}
.omsag-lp-daz.daz-anim.is-in .omsag-lp-daz__overline{animation:daz-up .6s var(--ez) .02s forwards}
.omsag-lp-daz.daz-anim.is-in .omsag-lp-daz__headline{animation:daz-up .7s var(--ez) .1s forwards}
.omsag-lp-daz.daz-anim.is-in .omsag-lp-daz__body{animation:daz-up .7s var(--ez) .18s forwards}
.omsag-lp-daz.daz-anim.is-in .omsag-lp-daz__legend{animation:daz-up .7s var(--ez) .24s forwards}
.omsag-lp-daz.daz-anim.is-in .omsag-lp-daz__phase{animation:daz-up .62s var(--ez) forwards;animation-delay:calc(.3s + var(--i) * .07s)}
.omsag-lp-daz.daz-anim.is-in .omsag-lp-daz__roles{animation:daz-up .7s var(--ez) .72s forwards}
.omsag-lp-daz.daz-anim.is-in .omsag-lp-daz__cta{animation:daz-up .7s var(--ez) .84s forwards}
@keyframes daz-up{to{opacity:1;transform:none}}

@media(max-width:1080px){
  .omsag-lp-daz__head{grid-template-columns:1fr;gap:16px;align-items:start}
  .omsag-lp-daz__headline{max-width:26ch}
  .omsag-lp-daz__phases{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .omsag-lp-daz__legend{flex-direction:column;align-items:flex-start}
  .omsag-lp-daz__roles-grid{grid-template-columns:1fr}
  .omsag-lp-daz__party-link{transform:rotate(90deg);margin:0 auto}
}
@media(max-width:620px){
  .omsag-lp-daz__phases{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .omsag-lp-daz.daz-anim [class*="omsag-lp-daz__"]{opacity:1!important;transform:none!important}
  .omsag-lp-daz *{animation:none!important}
}

/* Lange Komposita duerfen nie ueberlaufen */
.omsag-lp-daz :is(h1,h2,h3,h4,p,strong,small,em,b,span,dd,li){overflow-wrap:break-word}
