/* OMSAG LP · Messe · 05 Unsere Rolle
   Bauweise wie die Sektion „Wir verstaerken, was bereits stark ist.“ —
   grosse Strichzeichnung, Nummer oben rechts, Versalien-Label, ein Satz.
   Neu ist die Farbfuehrung: jede Rolle bekommt eine eigene Hausfarbe. */

.omsag-lp-mrolle {
  --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);
  --mut:  var(--omsag-lp-muted, #8a93a3);
  --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);

  --pad: 28px;   /* seitlicher Innenabstand — die Spur rechnet damit */

  position: relative; isolation: isolate; overflow: clip;
  font-family: var(--font); color: var(--ink);
  /* Die Farbe liegt ganz hinten, darueber das Bild, darueber der Schleier. */
  background: var(--sec-bg, #fff);
  padding: clamp(76px, 8.4vw, 128px) 0; -webkit-font-smoothing: antialiased;
}
.omsag-lp-mrolle, .omsag-lp-mrolle *, .omsag-lp-mrolle *::before, .omsag-lp-mrolle *::after { box-sizing: border-box; }
.omsag-lp-mrolle :is(h2,p,span,strong,em,b) { overflow-wrap: break-word; }

/* Hintergrundbild: liegt zwischen Farbe und Schleier und traegt die
   eingestellte Deckkraft. Ohne Bild steht das Element gar nicht erst da. */
.omsag-lp-mrolle__photo {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--bg-img, none);
  background-size: var(--bg-size, cover);
  background-position: var(--bg-pos, center);
  background-repeat: var(--bg-rep, no-repeat);
  opacity: var(--bg-op, .8);
}

/* Hintergrund: ein sehr ruhiger Farbschleier statt einer harten Flaeche. */
.omsag-lp-mrolle__wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.omsag-lp-mrolle--bg-white .omsag-lp-mrolle__wash { display: none; }
.omsag-lp-mrolle--bg-alt { background: var(--sec-bg, var(--bga)); }
.omsag-lp-mrolle--bg-alt .omsag-lp-mrolle__wash { display: none; }
/* Liegt ein Bild dahinter, ist der Schleier einer zu viel — dann wird aus
   beidem Matsch statt Hintergrund. */
.omsag-lp-mrolle--has-photo .omsag-lp-mrolle__wash { display: none; }
.omsag-lp-mrolle--bg-soft .omsag-lp-mrolle__wash {
  background:
    radial-gradient(58% 62% at 6% 4%, rgba(147,192,220,.26), transparent 68%),
    radial-gradient(52% 58% at 96% 96%, rgba(170,211,55,.22), transparent 70%),
    radial-gradient(46% 52% at 78% 6%, rgba(80,170,60,.12), transparent 72%);
}

.omsag-lp-mrolle__container { position: relative; z-index: 1; width: 100%; /* Dieselbe Spur wie die Whitepaper-Sektion darueber (1320 px, 28 px
     Rand) — bei gleichem Abstand zwischen den Karten werden die drei damit
     exakt so breit wie die drei Whitepaper. */
  max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.omsag-lp-mrolle__head { max-width: 860px; margin: 0 auto clamp(40px, 4.6vw, 62px); text-align: center; }
.omsag-lp-mrolle__overline {
  display: block; margin: 0 0 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bt);
}
.omsag-lp-mrolle__headline {
  margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.028em;
  text-wrap: balance;
}
.omsag-lp-mrolle__headline em {
  font-style: normal; background: linear-gradient(100deg, var(--b), var(--bl));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.omsag-lp-mrolle__lead {
  margin: 16px auto 0; max-width: 52ch;
  font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.6; color: var(--ts);
}

/* ── Karten ─────────────────────────────────────────────────────────────── */
.omsag-lp-mrolle__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

/* Label und Strich tragen die Hausfarbe der Rolle — Gruen, Hellblau, Lime.
   Zur Einordnung, damit es niemanden spaeter ueberrascht: auf Weiss kommt
   Hellblau auf 1,9:1 und Lime auf 1,7:1. Das liegt unter dem, was fuer Text
   ueblich ist. Es ist eine bewusste Markenentscheidung, keine Nachlaessigkeit.
   Die Schrift steht deshalb gross und fett, und die Beschreibung darunter
   traegt die eigentliche Aussage in dunkler Schrift. */
.omsag-lp-mrolle__card--1 { --acc: var(--b);    --acc-t: var(--b);    --acc-rgb: 80,170,60; }
.omsag-lp-mrolle__card--2 { --acc: var(--blue); --acc-t: var(--blue); --acc-rgb: 147,192,220; }
.omsag-lp-mrolle__card--3 { --acc: var(--bl);   --acc-t: var(--bl);   --acc-rgb: 170,211,55; }

.omsag-lp-mrolle__card {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(30px, 3vw, 40px) clamp(24px, 2.4vw, 32px) clamp(30px, 3vw, 38px);
  border: 1px solid var(--ln); border-radius: var(--omsag-lp-radius-lg, 24px);
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,17,21,.02), 0 24px 50px -40px rgba(15,17,21,.4);
  transition: transform .32s var(--ez), border-color .32s var(--ez), box-shadow .32s var(--ez);
}
/* Ein Hauch der Rollenfarbe laeuft unten aus der Karte heraus. */
.omsag-lp-mrolle__card::after {
  content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; bottom: -58%;
  aspect-ratio: 1.6 / 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--acc-rgb), .5), transparent 66%);
  opacity: .55; pointer-events: none;
  transition: opacity .32s var(--ez);
}
.omsag-lp-mrolle__card:hover {
  transform: translateY(-4px); border-color: rgba(var(--acc-rgb), .55);
  box-shadow: 0 32px 62px -34px rgba(15,17,21,.34);
}
.omsag-lp-mrolle__card:hover::after { opacity: .85; }

.omsag-lp-mrolle__num {
  position: absolute; top: clamp(22px, 2.2vw, 30px); right: clamp(22px, 2.2vw, 30px);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ts);
}

.omsag-lp-mrolle__icon {
  display: grid; place-items: center; flex: none;
  width: 74px; height: 74px; margin-bottom: 22px;
  border-radius: 50%;
  background: rgba(var(--acc-rgb), .16);
  color: var(--acc-t);
}
.omsag-lp-mrolle__icon svg { width: 39px; height: 39px; display: block; }

.omsag-lp-mrolle__label {
  display: block; margin: 0;
  /* Nicht unter 19 px: ab dort zaehlt fette Versalschrift als grosse
     Schrift, fuer die 3:1 Kontrast genuegen — darunter waeren 4,5:1 noetig,
     die das Lime nicht erreicht, ohne seine Herkunft zu verlieren. */
  font-size: clamp(19px, 1.6vw, 21px); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--acc-t);
}
.omsag-lp-mrolle__rule {
  display: block; width: 38px; height: 3px; margin: 16px 0 16px;
  border-radius: 3px; background: var(--acc-t);
}
.omsag-lp-mrolle__text {
  margin: 0; font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.65; color: var(--ts);
}
.omsag-lp-mrolle__text strong { display: block; margin-bottom: 4px; font-weight: 700; color: var(--ink); }

/* ── Bedienleiste der Spur ──────────────────────────────────────────────── */
/* Steht nur auf schmalen Schirmen. Aufbau und Bedienung wie im
   Leistungs-Slide: Zaehler, Fortschritt, zwei runde Knoepfe. */
.omsag-lp-mrolle__controls { display: none; }
.omsag-lp-mrolle__status {
  display: grid; grid-template-columns: auto minmax(70px, 1fr) auto;
  align-items: center; gap: 11px; margin: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--ts);
  font-variant-numeric: tabular-nums;
}
.omsag-lp-mrolle__track { display: block; height: 3px; overflow: hidden; background: rgba(35,39,48,.14); }
.omsag-lp-mrolle__track > span {
  display: block; width: 33%; height: 100%; background: var(--b);
  transition: width .25s var(--ez);
}
.omsag-lp-mrolle__arrows { display: flex; gap: 8px; }
.omsag-lp-mrolle__round {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0;
  border: 1px solid rgba(35,39,48,.2); border-radius: 50%;
  background: rgba(255,255,255,.86); color: var(--ink); cursor: pointer;
  transition: border-color .25s var(--ez), background .25s var(--ez), color .25s var(--ez);
}
.omsag-lp-mrolle__round svg {
  display: block; width: 18px; height: 18px; overflow: visible;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7;
}
.omsag-lp-mrolle__round:hover, .omsag-lp-mrolle__round:focus-visible {
  border-color: var(--b); background: var(--b); color: #fff;
}

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

/* ── Auftritt ───────────────────────────────────────────────────────────── */
.omsag-lp-mrolle.mrolle-anim :is(.omsag-lp-mrolle__overline, .omsag-lp-mrolle__headline,
  .omsag-lp-mrolle__lead, .omsag-lp-mrolle__card, .omsag-lp-mrolle__cta-row) { opacity: 0; transform: translateY(22px); }
.omsag-lp-mrolle.is-in .omsag-lp-mrolle__overline { animation: mrolle-rise .6s var(--ez) .02s forwards; }
.omsag-lp-mrolle.is-in .omsag-lp-mrolle__headline { animation: mrolle-rise .7s var(--ez) .1s forwards; }
.omsag-lp-mrolle.is-in .omsag-lp-mrolle__lead     { animation: mrolle-rise .7s var(--ez) .18s forwards; }
.omsag-lp-mrolle.is-in .omsag-lp-mrolle__card     { animation: mrolle-rise .75s var(--ez) forwards; animation-delay: calc(.26s + var(--k) * .12s); }
.omsag-lp-mrolle.is-in .omsag-lp-mrolle__cta-row  { animation: mrolle-rise .7s var(--ez) .68s forwards; }
@keyframes mrolle-rise { to { opacity: 1; transform: none; } }

/* ── Breakpoints ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .omsag-lp-mrolle__grid { grid-template-columns: minmax(0, 1fr); }
  .omsag-lp-mrolle__card { padding: 30px 26px 32px; }
  .omsag-lp-mrolle__card::after { bottom: -78%; }
}

/* ── Spur statt Stapel ──────────────────────────────────────────────────── */
/* Untereinander kosten die drei Karten auf dem Handy rund 1.300 px. Als
   Spur zum Wischen ist es eine Kartenhoehe plus Leiste. Gebaut wie der
   Leistungs-Slide: waagerechtes Scrollen mit Einrasten. */
@media (max-width: 820px) {
  .omsag-lp-mrolle__grid {
    display: grid; grid-auto-flow: column;
    /* Bewusst in vw statt in Prozent: in einer waagerecht scrollenden Spur
       hat der Kasten keine feste Bezugsbreite mehr, und Prozentwerte fallen
       dort auf die Inhaltsbreite zurueck — gemessen 166 statt 273 px, zu
       schmal fuer "ORCHESTRATOR". Der Rest der naechsten Karte bleibt
       absichtlich sichtbar: das lädt zum Wischen ein. */
    grid-auto-columns: min(80vw, 330px);
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none; cursor: grab;

    /* Die Spur bricht nach rechts aus dem Raster aus und laeuft bis an den
       Bildschirmrand — genau wie der Leistungs-Slider. Sonst endet die
       angeschnittene Karte 20 px vor der Kante und sieht aus, als waere sie
       zu Ende. Rechts steht dieselbe Luft wieder als Innenabstand, damit die
       letzte Karte beim Einrasten nicht am Rand klebt.
       Waagerechtes Scrollen beschneidet auch senkrecht: ohne den Innenabstand
       oben und unten schnitte die Spur den Schatten der Karten ab. Der
       negative Aussenabstand nimmt den Zuwachs wieder heraus. */
    /* Statt einer vw-Rechnung einfach der Innenabstand der Sektion, negativ:
       so endet die Spur genau am Bildschirmrand, egal wie breit der ist.
       Rechts steht derselbe Wert wieder als Innenabstand, damit die letzte
       Karte beim Einrasten nicht an der Kante klebt. */
    margin: -14px calc(-1 * var(--pad)) -18px -14px;
    padding: 14px var(--pad) 26px 14px;
    scroll-padding-left: 14px;
  }
  .omsag-lp-mrolle__grid::-webkit-scrollbar { display: none; }
  .omsag-lp-mrolle__grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .omsag-lp-mrolle__grid:focus-visible { outline: 2px solid var(--b); outline-offset: 4px; }
  .omsag-lp-mrolle__card { scroll-snap-align: start; height: 100%; }
  /* Beim Wischen stoert ein Anheben der Karte mehr, als es hilft. */
  .omsag-lp-mrolle__card:hover { transform: none; }

  .omsag-lp-mrolle__controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 20px;
  }
  .omsag-lp-mrolle__status { width: min(240px, 52vw); }
}
@media (max-width: 600px) {
  /* Enger als auf dem Desktop: 60 px Luft ueber und unter jeder Sektion
     summieren sich auf dem Handy ueber sieben Sektionen zu 840 px. */
  .omsag-lp-mrolle { padding: 46px 0; }
  .omsag-lp-mrolle { --pad: 20px; }
  .omsag-lp-mrolle__card { padding: 26px 22px 28px; }
  .omsag-lp-mrolle__icon { width: 64px; height: 64px; margin-bottom: 18px; }
  .omsag-lp-mrolle__icon svg { width: 31px; height: 31px; }
  .omsag-lp-mrolle__lead { font-size: 16px; }
  .omsag-lp-mrolle__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .omsag-lp-mrolle * { animation: none !important; transition: none !important; }
  .omsag-lp-mrolle.mrolle-anim :is(.omsag-lp-mrolle__overline, .omsag-lp-mrolle__headline,
    .omsag-lp-mrolle__lead, .omsag-lp-mrolle__card, .omsag-lp-mrolle__cta-row) { opacity: 1 !important; transform: none !important; }
}