/* OMSAG LP · Performance Marketing · 04 Einstieg
   Default = visible. JS adds `.pme-anim` then `.is-in`. */

.omsag-lp-pme {
  --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);
  --bg-alt: 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; font-family: var(--font); color: var(--ink); background: #fff;
  padding: 104px 0; -webkit-font-smoothing: antialiased;
}
.omsag-lp-pme, .omsag-lp-pme *, .omsag-lp-pme *::before, .omsag-lp-pme *::after { box-sizing: border-box; }
.omsag-lp-pme__container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* Head */
.omsag-lp-pme__head { margin-bottom: 40px; max-width: 780px; }
.omsag-lp-pme__overline { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--b); margin: 0 0 16px; }
.omsag-lp-pme__headline { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.07; color: var(--ink); margin: 0 0 18px; max-width: 18ch; }
.omsag-lp-pme__subline { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--ts); margin: 0; }

/* Cards */
.omsag-lp-pme__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
.omsag-lp-pme__card { background: #fff; border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius-lg, 28px); padding: 30px 30px 28px; transition: transform .3s var(--ez), box-shadow .3s var(--ez), border-color .3s var(--ez); }
.omsag-lp-pme__card:hover { transform: translateY(-3px); border-color: var(--mut); box-shadow: 0 26px 54px -36px rgba(35,39,48,.4); }
.omsag-lp-pme__card-head { display: flex; align-items: center; gap: 16px; }
.omsag-lp-pme__card-ico { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--b); background: var(--bg-alt); border: 1px solid var(--ln); }
.omsag-lp-pme__card-ico svg { width: 25px; height: 25px; }
.omsag-lp-pme__card-title { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.omsag-lp-pme__card-divider { height: 1px; background: var(--ln); margin: 22px 0; }
.omsag-lp-pme__card-body { font-size: 14.5px; line-height: 1.55; color: var(--ts); margin: 0; }

/* Lower — beide Kaesten sind Karten und wachsen auf dieselbe Hoehe,
   der Handlungsaufruf steht darunter und gilt fuer beide. */
.omsag-lp-pme__lower { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.omsag-lp-pme__side { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius-lg, 28px); padding: 26px 28px; }
.omsag-lp-pme__side-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); margin: 0 0 18px; }
.omsag-lp-pme__roles { flex: 1; display: flex; align-items: stretch; gap: 10px; }
.omsag-lp-pme__role {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  background: var(--bg-alt); border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius-sm, 14px); padding: 20px 14px;
}
.omsag-lp-pme__role-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--b); background: #fff; border: 1px solid var(--ln); }
.omsag-lp-pme__role-ico svg { width: 21px; height: 21px; }
.omsag-lp-pme__role-title { font-size: 14.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); -webkit-text-fill-color: currentColor; }
.omsag-lp-pme__role-desc { font-size: 12.5px; line-height: 1.45; color: var(--ts); -webkit-text-fill-color: currentColor; }
.omsag-lp-pme__roles-arrow { flex: 0 0 auto; align-self: center; display: grid; place-items: center; width: 20px; height: 20px; color: var(--mut); }
.omsag-lp-pme__roles-arrow svg { width: 20px; height: 20px; }
.omsag-lp-pme__cta { margin-top: 26px; }
.omsag-lp-pme__btn {
  display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; color: #fff;
  background: var(--ink); padding: 16px 30px; border-radius: var(--omsag-lp-pill, 999px);
  box-shadow: none; transition: transform .25s var(--ez), box-shadow .25s var(--ez), color .2s var(--ez);
}
.omsag-lp-pme__btn svg { width: 18px; height: 18px; transition: transform .25s var(--ez); }
.omsag-lp-pme__btn:hover, .omsag-lp-pme__btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(35,39,48,.45); }
.omsag-lp-pme__btn:hover svg { transform: translateX(4px); }

.omsag-lp-pme__intl { background: #fff; border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius-lg, 28px); padding: 26px 28px; }
.omsag-lp-pme__intl-head { display: flex; align-items: center; gap: 14px; }
.omsag-lp-pme__intl-ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--b); background: var(--bg-alt); border: 1px solid var(--ln); }
.omsag-lp-pme__intl-ico svg { width: 23px; height: 23px; }
.omsag-lp-pme__intl-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.omsag-lp-pme__intl-body { font-size: 14px; line-height: 1.55; color: var(--ts); margin: 0; }

/* Reveal */
.omsag-lp-pme.pme-anim .omsag-lp-pme__overline,
.omsag-lp-pme.pme-anim .omsag-lp-pme__headline,
.omsag-lp-pme.pme-anim .omsag-lp-pme__subline,
.omsag-lp-pme.pme-anim .omsag-lp-pme__side,
.omsag-lp-pme.pme-anim .omsag-lp-pme__cta,
.omsag-lp-pme.pme-anim .omsag-lp-pme__case,
.omsag-lp-pme.pme-anim .omsag-lp-pme__intl { opacity: 0; transform: translateY(16px); }
.omsag-lp-pme.pme-anim .omsag-lp-pme__card { opacity: 0; transform: translateY(16px); }
.omsag-lp-pme.pme-anim.is-in .omsag-lp-pme__overline  { animation: pme-up .6s var(--ez) .02s forwards; }
.omsag-lp-pme.pme-anim.is-in .omsag-lp-pme__headline  { animation: pme-up .7s var(--ez) .08s forwards; }
.omsag-lp-pme.pme-anim.is-in .omsag-lp-pme__subline   { animation: pme-up .7s var(--ez) .16s forwards; }
.omsag-lp-pme.pme-anim.is-in .omsag-lp-pme__card      { animation: pme-up .6s var(--ez) forwards; animation-delay: calc(.24s + var(--c) * .1s); }
.omsag-lp-pme.pme-anim.is-in .omsag-lp-pme__side      { animation: pme-up .7s var(--ez) .5s forwards; }
.omsag-lp-pme.pme-anim.is-in .omsag-lp-pme__intl      { animation: pme-up .7s var(--ez) .58s forwards; }
.omsag-lp-pme.pme-anim.is-in .omsag-lp-pme__case      { animation: pme-up .7s var(--ez) .66s forwards; }
.omsag-lp-pme.pme-anim.is-in .omsag-lp-pme__cta       { animation: pme-up .7s var(--ez) .74s forwards; }
@keyframes pme-up { to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 980px) {
  .omsag-lp-pme { padding: 80px 0; }
  .omsag-lp-pme__grid { grid-template-columns: 1fr; gap: 18px; }
  .omsag-lp-pme__lower { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Nebeneinander wird untereinander — der Pfeil dreht mit. */
  .omsag-lp-pme__roles { flex-direction: column; }
  .omsag-lp-pme__roles-arrow { transform: rotate(90deg); }
}
@media (max-width: 600px) {
  .omsag-lp-pme { padding: 60px 0; }
  .omsag-lp-pme__container { padding: 0 20px; }
  .omsag-lp-pme__card { padding: 24px 22px; }
  .omsag-lp-pme__side { padding: 22px 20px; }
  .omsag-lp-pme__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .omsag-lp-pme.pme-anim .omsag-lp-pme__overline,
  .omsag-lp-pme.pme-anim .omsag-lp-pme__headline,
  .omsag-lp-pme.pme-anim .omsag-lp-pme__subline,
  .omsag-lp-pme.pme-anim .omsag-lp-pme__card,
  .omsag-lp-pme.pme-anim .omsag-lp-pme__side,
  .omsag-lp-pme.pme-anim .omsag-lp-pme__cta,
  .omsag-lp-pme.pme-anim .omsag-lp-pme__case,
  .omsag-lp-pme.pme-anim .omsag-lp-pme__intl { opacity: 1; transform: none; }
  .omsag-lp-pme * { animation: none !important; }
}

/* ── Case-Teaser ────────────────────────────────────────────────────────────
   Steht zwischen Wirkung und Handlungsaufruf: Marke, Kernaussage und die
   beiden wichtigsten Kennzahlen. Alles Weitere zeigt das Fenster. */
.omsag-lp-pme__case{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,2.6vw,36px);
  margin-top:30px;padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--ln);border-radius:var(--omsag-lp-radius,24px);background:#fff;
  box-shadow:0 26px 62px -46px rgba(35,39,48,.55);
}
.pmec__main{flex:1 1 340px;min-width:0}
.pmec__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pmec__eyebrow{
  flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--b);
  background:rgba(80,170,60,.1);border-radius:var(--omsag-lp-pill,999px);padding:5px 11px;
}
.pmec__logo{display:block;width:auto;max-width:132px;max-height:30px;object-fit:contain;object-position:left center}
.pmec__client{font-size:14px;font-weight:700;color:var(--ink)}
.pmec__claim{margin:0;font-size:clamp(18px,1.7vw,22px);font-weight:700;line-height:1.28;letter-spacing:-.018em;color:var(--ink);max-width:30ch}
.pmec__teaser{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--ts);max-width:52ch}
.pmec__kpis{flex:0 0 auto;display:flex;gap:12px;margin:0;padding:0;list-style:none}
.pmec__kpis li{
  min-width:132px;padding:13px 18px;border:1px solid rgba(80,170,60,.24);border-radius:16px;
  background:linear-gradient(150deg,rgba(80,170,60,.09),rgba(170,211,55,.05));
}
.pmec__kpis b{display:block;font-size:clamp(21px,2vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--b)}
.pmec__kpis span{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--ts)}
.pmec__open{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:15px 26px;
  border:1px solid var(--ln);border-radius:var(--omsag-lp-pill,999px);background:#fff;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
  transition:transform .25s var(--ez),border-color .25s var(--ez),box-shadow .25s var(--ez);
}
.pmec__open svg{width:17px;height:17px;color:var(--b);transition:transform .25s var(--ez)}
.pmec__open:hover,.pmec__open:focus-visible{transform:translateY(-2px);border-color:rgba(80,170,60,.45);box-shadow:0 18px 36px -24px rgba(35,39,48,.5)}
.pmec__open:hover svg{transform:translateX(3px)}

/* ── Case-Fenster ──────────────────────────────────────────────────────── */
body.omsag-pme-modal-open{overflow:hidden}
.omsag-lp-pme .pmec-dialog{
  width:min(920px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);
  padding:0;border:0;border-radius:24px;overflow:hidden;background:#fff;color:var(--ink);
  box-shadow:0 60px 120px -40px rgba(8,14,12,.6);
}
.omsag-lp-pme .pmec-dialog[open]{animation:pmec-in .4s var(--ez) both}
.omsag-lp-pme .pmec-dialog::backdrop{background:rgba(14,22,19,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.omsag-lp-pme .pmec-dialog__shell{position:relative;display:flex;flex-direction:column;height:min(860px,calc(100vh - 34px))}
.omsag-lp-pme .pmec-dialog__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.omsag-lp-pme .pmec-dialog__close{
  position:absolute;z-index:6;top:16px;right:16px;display:grid;width:42px;height:42px;place-items:center;
  border:0;border-radius:50%;background:rgba(16,26,22,.5);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s var(--ez),transform .25s var(--ez);
}
.omsag-lp-pme .pmec-dialog__close svg{width:20px;height:20px}
.omsag-lp-pme .pmec-dialog__close:hover{background:rgba(16,26,22,.78);transform:rotate(4deg)}

.omsag-lp-pme .pmec-dlg__hero{
  position:relative;display:flex;align-items:flex-end;background:#0d181d;width:100%;
  /* Das Bildformat gibt die Hoehe vor, damit vom Visual moeglichst wenig wegfaellt. */
  aspect-ratio:850/486;min-height:240px;max-height:min(430px,48vh);
}
.omsag-lp-pme .pmec-dlg__hero.is-plain{aspect-ratio:auto;min-height:0;max-height:none;background:var(--bg-alt,#f9faf8)}
.omsag-lp-pme .pmec-dlg__hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.omsag-lp-pme .pmec-dlg__hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,12,.15),rgba(8,14,12,.82))}
.omsag-lp-pme .pmec-dlg__hero-copy{position:relative;z-index:2;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.omsag-lp-pme .pmec-dlg__hero-logo{display:block;width:auto;max-width:150px;max-height:34px;object-fit:contain;background:#fff;border-radius:10px;padding:7px 11px}
.omsag-lp-pme .pmec-dlg__hero.is-plain .pmec-dlg__hero-logo{background:transparent;padding:0}
.omsag-lp-pme .pmec-dlg__hero-copy h2{margin:0;max-width:22ch;font-size:clamp(23px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:#fff}
.omsag-lp-pme .pmec-dlg__hero.is-plain .pmec-dlg__hero-copy h2{color:var(--ink)}

.omsag-lp-pme .pmec-dlg__facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;
  padding:clamp(20px,2.4vw,26px) clamp(22px,3vw,34px);border-bottom:1px solid var(--ln);
}
.omsag-lp-pme .pmec-dlg__facts>div{padding:0 clamp(12px,1.8vw,22px);border-left:1px solid var(--ln)}
.omsag-lp-pme .pmec-dlg__facts>div:first-child{padding-left:0;border-left:0}
.omsag-lp-pme .pmec-dlg__facts dt{margin:0 0 5px;font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--mut)}
.omsag-lp-pme .pmec-dlg__facts dd{margin:0;font-size:14.5px;font-weight:600;line-height:1.35;letter-spacing:-.012em;color:var(--ink)}

.omsag-lp-pme .pmec-dlg__body{padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:clamp(22px,2.6vw,30px)}
.omsag-lp-pme .pmec-dlg__kpis{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.omsag-lp-pme .pmec-dlg__kpis li{
  flex:1 1 160px;padding:16px 20px;border:1px solid rgba(80,170,60,.24);border-radius:16px;
  background:linear-gradient(150deg,rgba(80,170,60,.09),rgba(170,211,55,.05));
}
.omsag-lp-pme .pmec-dlg__kpis b{display:block;font-size:clamp(24px,2.4vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--b)}
.omsag-lp-pme .pmec-dlg__kpis span{display:block;margin-top:5px;font-size:12.5px;line-height:1.3;color:var(--ts)}
.omsag-lp-pme .pmec-dlg__part h3{
  margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--b);
}
.omsag-lp-pme .pmec-dlg__part p{margin:0;max-width:70ch;font-size:15px;line-height:1.65;color:var(--ts)}
.omsag-lp-pme .pmec-dlg__quote{
  margin:0;padding:clamp(20px,2.4vw,26px);border-radius:18px;border:1px solid var(--ln);background:var(--bg-alt,#f9faf8);
}
.omsag-lp-pme .pmec-dlg__quote blockquote{margin:0;font-size:clamp(16px,1.5vw,19px);font-weight:600;line-height:1.5;letter-spacing:-.015em;color:var(--ink)}
.omsag-lp-pme .pmec-dlg__quote figcaption{
  display:flex;align-items:center;gap:14px;margin-top:18px;font-size:13px;color:var(--mut);
}
.omsag-lp-pme .pmec-dlg__quote-img{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  background:#fff;box-shadow:0 0 0 1px var(--ln);display:block;
}
.omsag-lp-pme .pmec-dlg__quote-by{display:flex;flex-direction:column;gap:2px;min-width:0}
.omsag-lp-pme .pmec-dlg__quote-by strong{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.omsag-lp-pme .pmec-dlg__quote-by span{font-size:12.5px;line-height:1.4;color:var(--mut)}
.omsag-lp-pme .pmec-dlg__stack-label{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.omsag-lp-pme .pmec-dlg__stack ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.omsag-lp-pme .pmec-dlg__stack li{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--ln);
  border-radius:var(--omsag-lp-pill,999px);font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;
}
.omsag-lp-pme .pmec-dlg__stack svg{width:15px;height:15px;color:var(--b)}
@keyframes pmec-in{from{opacity:0;transform:translateY(18px) scale(.985)}}

@media(max-width:900px){
  .omsag-lp-pme__case{gap:20px}
  .pmec__kpis{flex:1 1 100%}
  .pmec__kpis li{flex:1 1 0;min-width:0}
  .pmec__open{flex:1 1 100%;justify-content:center}
  .omsag-lp-pme .pmec-dlg__facts{grid-template-columns:1fr;gap:16px}
  .omsag-lp-pme .pmec-dlg__facts>div{padding:0;border-left:0}
}
@media(max-width:640px){
  .omsag-lp-pme .pmec-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:16px}
  .omsag-lp-pme .pmec-dialog__shell{height:calc(100dvh - 14px)}
  .omsag-lp-pme .pmec-dlg__hero{min-height:200px;max-height:none}
  /* Mobil bleibt der Teaser schlank: die Kennzahlen zeigt das Fenster. */
  .pmec__kpis{display:none}
}
@media(prefers-reduced-motion:reduce){
  .omsag-lp-pme .pmec-dialog[open]{animation:none}
  .pmec__open,.pmec__open svg{transition:none}
}