/* OMSAG LP · Messe · 02 Warum wir auf der Messe sind
   Ruhiger Kopf, darunter vier gleich hohe Karten. Im Hintergrund zwei weiche
   Farbflaechen — sie geben der weissen Flaeche Tiefe, ohne sich vorzudraengen. */

.omsag-lp-mwarum {
  --b:    var(--omsag-lp-brand, #50aa3c);
  /* Kicker und Zaehler tragen den Markenton. Auf Weiss sind das 2,9:1 —
     unter der Schwelle fuer kleine Schrift, aber es ist die Hausfarbe. */
  --bt:   var(--omsag-lp-brand, #50aa3c);
  --bl:   var(--omsag-lp-lime, #aad337);
  --blue: #93c0dc;
  --ink:  var(--omsag-lp-ink, #232730);
  --ts:   var(--omsag-lp-text-soft, #5a6270);
  --ln:   var(--omsag-lp-line, #e6e8ec);
  --bga:  var(--omsag-lp-bg-alt, #f9faf8);
  --grad: var(--omsag-lp-brand-grad, linear-gradient(135deg, #50aa3c 0%, #aad337 100%));
  --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: clip;
  font-family: var(--font); color: var(--ink); background: #fff;
  padding: clamp(44px, 4.6vw, 68px) 0 clamp(72px, 8vw, 118px); -webkit-font-smoothing: antialiased;
}
.omsag-lp-mwarum, .omsag-lp-mwarum *, .omsag-lp-mwarum *::before, .omsag-lp-mwarum *::after { box-sizing: border-box; }
.omsag-lp-mwarum :is(h2,h3,p,li,span,strong,em,b) { overflow-wrap: break-word; }

/* Weiche Farbflaechen im Hintergrund. */
.omsag-lp-mwarum__blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.omsag-lp-mwarum__blob--a { top: -16%; left: -12%; width: 42vw; max-width: 560px; aspect-ratio: 1; background: rgba(147,192,220,.26); }
.omsag-lp-mwarum__blob--b { bottom: -20%; right: -12%; width: 40vw; max-width: 520px; aspect-ratio: 1; background: rgba(80,170,60,.16); }

.omsag-lp-mwarum__container { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px; }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.omsag-lp-mwarum__head { max-width: 860px; margin: 0 auto clamp(40px, 4.6vw, 62px); text-align: center; }
.omsag-lp-mwarum__overline {
  display: block; margin: 0 0 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bt);
}
.omsag-lp-mwarum__headline {
  margin: 0; font-size: clamp(28px, 3.7vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
}
.omsag-lp-mwarum__headline em {
  font-style: normal; background: linear-gradient(100deg, var(--b), var(--bl));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.omsag-lp-mwarum__lead {
  margin: 18px auto 0; max-width: 66ch;
  font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; color: var(--ts);
}

/* Schlusssatz unter den Kacheln — mittig wie der Kopf, eine Spur kraeftiger
   als der Lead, damit er die vier Befunde sichtbar wieder zusammenfasst. */
.omsag-lp-mwarum__outro {
  margin: clamp(28px, 3.2vw, 40px) auto 0; max-width: 60ch; text-align: center;
  font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; line-height: 1.6; color: var(--ink);
}

/* ── Karten ─────────────────────────────────────────────────────────────── */
.omsag-lp-mwarum__cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.omsag-lp-mwarum__card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 0; height: 100%;
  padding: clamp(28px, 2.8vw, 36px) clamp(20px, 2vw, 26px);
  border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius-lg, 24px);
  background: #fff;
  box-shadow: 0 24px 50px -42px rgba(15,17,21,.55);
  transition: transform .3s var(--ez), border-color .3s var(--ez), box-shadow .3s var(--ez);
}
.omsag-lp-mwarum__card:hover {
  transform: translateY(-4px); border-color: rgba(80,170,60,.35);
  box-shadow: 0 30px 60px -34px rgba(15,17,21,.45);
}
.omsag-lp-mwarum__ico {
  display: grid; place-items: center; flex: none;
  width: 64px; height: 64px; margin-bottom: 20px;
  border-radius: 50%; background: rgba(80,170,60,.10); color: var(--b);
  transition: background .3s var(--ez), transform .3s var(--ez);
}
.omsag-lp-mwarum__ico svg { width: 28px; height: 28px; display: block; }
.omsag-lp-mwarum__card:hover .omsag-lp-mwarum__ico { background: rgba(80,170,60,.16); transform: translateY(-1px); }
/* Zwei Zeilen Platz, auch wenn der Titel nur eine braucht — sonst sitzen die
   gruenen Trenner der Nachbarkarten auf verschiedenen Hoehen. */
.omsag-lp-mwarum__title {
  margin: 0; min-height: 2.5em;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(17px, 1.4vw, 19.5px); font-weight: 700;
  line-height: 1.25; letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.omsag-lp-mwarum__rule { display: block; width: 34px; height: 3px; margin: 14px 0 14px; border-radius: 3px; background: var(--grad); }
.omsag-lp-mwarum__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ts); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.omsag-lp-mwarum__cta-row { display: flex; justify-content: center; margin-top: clamp(32px, 3.6vw, 46px); }
.omsag-lp-mwarum__cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px;
  border: 0; 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; box-shadow: none;
  transition: transform .25s var(--ez), box-shadow .25s var(--ez), color .2s var(--ez);
}
.omsag-lp-mwarum__cta svg { width: 18px; height: 18px; transition: transform .25s var(--ez); }
.omsag-lp-mwarum__cta:hover, .omsag-lp-mwarum__cta:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(35,39,48,.45); }
.omsag-lp-mwarum__cta:hover svg { transform: translateX(4px); }

/* ── Auftritt ───────────────────────────────────────────────────────────── */
/* Der Kopf bleibt bewusst ohne Auftritt: er soll schon zu lesen sein, wenn
   vom Heroshot aus nur der obere Rand der Sektion ins Bild ragt. Sonst stuende
   dort eine leere Flaeche, bis der Beobachter ausloest. */
.omsag-lp-mwarum.mwarum-anim :is(.omsag-lp-mwarum__card,
  .omsag-lp-mwarum__outro, .omsag-lp-mwarum__cta-row) { opacity: 0; transform: translateY(18px); }
.omsag-lp-mwarum.is-in .omsag-lp-mwarum__card     { animation: mwarum-rise .7s var(--ez) forwards; animation-delay: calc(.28s + var(--k) * .09s); }
.omsag-lp-mwarum.is-in .omsag-lp-mwarum__outro    { animation: mwarum-rise .7s var(--ez) .68s forwards; }
.omsag-lp-mwarum.is-in .omsag-lp-mwarum__cta-row  { animation: mwarum-rise .7s var(--ez) .8s forwards; }
@keyframes mwarum-rise { to { opacity: 1; transform: none; } }

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .omsag-lp-mwarum__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Auf dem Handy wird aus der mittigen Karte eine Zeile: Symbol links, Text
   rechts. Der grosse Kreis ueber der Ueberschrift kostet je Karte rund
   120 px Hoehe — bei vier Karten ein halber Bildschirm, nur fuer Luft.
   Der Trenner faellt weg, weil er ohne mittige Achse nichts mehr ordnet. */
@media (max-width: 600px) {
  .omsag-lp-mwarum { padding: 48px 0; }
  .omsag-lp-mwarum__container { padding: 0 20px; }
  .omsag-lp-mwarum__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .omsag-lp-mwarum__card {
    display: grid; grid-template-columns: 44px minmax(0, 1fr);
    align-items: start; column-gap: 14px; row-gap: 4px; text-align: left;
    padding: 18px 18px 20px; border-radius: 18px;
  }
  .omsag-lp-mwarum__ico {
    grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0;
  }
  .omsag-lp-mwarum__ico svg { width: 22px; height: 22px; }
  .omsag-lp-mwarum__title {
    grid-column: 2; min-height: 0; justify-content: flex-start;
    font-size: 16.5px; line-height: 1.3;
  }
  .omsag-lp-mwarum__rule { display: none; }
  .omsag-lp-mwarum__text { grid-column: 2; font-size: 14px; line-height: 1.55; }
  .omsag-lp-mwarum__lead { font-size: 16px; }
  .omsag-lp-mwarum__outro { font-size: 16px; margin-top: 26px; }
  .omsag-lp-mwarum__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .omsag-lp-mwarum * { animation: none !important; transition: none !important; }
    .omsag-lp-mwarum.mwarum-anim :is(.omsag-lp-mwarum__card,
    .omsag-lp-mwarum__outro, .omsag-lp-mwarum__cta-row) { opacity: 1 !important; transform: none !important; }
}