/* ============================================================
   OMSAG Rollenmodell — kompakte 3-Karten-Sektion
   ============================================================ */

.omsag-rm {
  --b:    var(--omsag-lp-brand, #50aa3c);
  --bl:   var(--omsag-lp-lime, #aad337);
  --bs:   var(--omsag-lp-brand-soft, rgba(80,170,60,.12));
  --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);
  --r:    var(--omsag-lp-radius, 20px);
  --ez:   var(--omsag-lp-ease, cubic-bezier(.2,.7,.2,1));
  --grad: var(--omsag-lp-brand-grad, linear-gradient(135deg,#50aa3c 0%,#aad337 100%));
  --font: var(--omsag-lp-font, 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  font-family: var(--font);
  position: relative;
  padding: 96px 0 92px;
  overflow: hidden;
}
.omsag-rm,
.omsag-rm *,
.omsag-rm *::before,
.omsag-rm *::after { box-sizing: border-box; }

/* ====== LIGHT (Standard) ====== */
.omsag-rm--light {
  background: var(--omsag-rm-bg, #f1f2f5);
  color: var(--ink);
}

/* ====== DARK ====== */
.omsag-rm--dark {
  background:
    radial-gradient(circle at 0% 0%, rgba(80,170,60,.18), transparent 52%),
    radial-gradient(circle at 100% 100%, rgba(170,211,55,.12), transparent 52%),
    var(--ink);
  color: #fff;
}
.omsag-rm--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 35%, #000 40%, transparent 80%);
}

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

/* ====== Kopf ====== */
.omsag-rm__head { max-width: 760px; margin-bottom: 52px; }
.omsag-rm__head[data-align-d="left"]   { text-align: left;   margin-left: 0;    margin-right: auto; }
.omsag-rm__head[data-align-d="center"] { text-align: center; margin-left: auto; margin-right: auto; }
.omsag-rm__head[data-align-d="right"]  { text-align: right;  margin-left: auto; margin-right: 0; }

.omsag-rm__eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.omsag-rm--light .omsag-rm__eyebrow { color: var(--b); }
.omsag-rm--dark  .omsag-rm__eyebrow { color: rgba(255,255,255,.6); }

.omsag-rm__h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.8vw, 42px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.01em;
}
.omsag-rm--light .omsag-rm__h2 { color: var(--ink); }
.omsag-rm--dark  .omsag-rm__h2 { color: #fff; }

.omsag-rm__hl { position: relative; display: inline-block; z-index: 0; }
.omsag-rm__hl::after {
  content: ""; position: absolute;
  left: -2%; right: -2%; bottom: 4%;
  height: .38em; border-radius: 4px;
  background: var(--bs); z-index: -1;
}
.omsag-rm--dark .omsag-rm__hl { color: var(--bl); }
.omsag-rm--dark .omsag-rm__hl::after { background: rgba(170,211,55,.16); }

.omsag-rm__lead { margin: 0; font-size: 17px; line-height: 1.65; }
.omsag-rm--light .omsag-rm__lead { color: var(--ts); }
.omsag-rm--dark  .omsag-rm__lead { color: rgba(255,255,255,.75); }

/* ====== Grid ====== */
.omsag-rm__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* ====== Karte ====== */
.omsag-rm__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 34px 30px 32px;
  border-radius: var(--r);
  text-align: left;
  opacity: 0; transform: translateY(28px);
  transition:
    opacity .6s var(--ez),
    transform .6s var(--ez),
    box-shadow .3s var(--ez),
    border-color .3s var(--ez);
}
.omsag-rm__card:nth-child(1) { transition-delay: 0ms; }
.omsag-rm__card:nth-child(2) { transition-delay: 110ms; }
.omsag-rm__card:nth-child(3) { transition-delay: 220ms; }

.omsag-rm__grid.is-inview .omsag-rm__card { opacity: 1; transform: translateY(0); }

.omsag-rm--light .omsag-rm__card {
  background: #fff;
  border: 1px solid var(--ln);
  box-shadow: 0 1px 0 rgba(15,17,21,.02), 0 10px 30px -20px rgba(15,17,21,.12);
}
.omsag-rm--dark .omsag-rm__card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.omsag-rm__card:hover { transform: translateY(-4px); }
.omsag-rm--light .omsag-rm__card:hover {
  border-color: rgba(80,170,60,.4);
  box-shadow: 0 1px 0 rgba(15,17,21,.02), 0 22px 44px -24px rgba(15,17,21,.24);
}
.omsag-rm--dark .omsag-rm__card:hover {
  border-color: rgba(170,211,55,.42);
  box-shadow: 0 22px 44px -24px rgba(0,0,0,.6);
}

/* Nummer */
.omsag-rm__num {
  position: absolute; top: 26px; right: 28px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
}
.omsag-rm--light .omsag-rm__num { color: var(--mut); }
.omsag-rm--dark  .omsag-rm__num { color: rgba(255,255,255,.38); }

/* Icon */
.omsag-rm__icon {
  width: 44px; height: 44px; margin-bottom: 20px;
  transition: transform .35s var(--ez);
}
.omsag-rm__icon svg { width: 100%; height: 100%; display: block; }
.omsag-rm--light .omsag-rm__icon { color: var(--b); }
.omsag-rm--dark  .omsag-rm__icon { color: var(--bl); }
.omsag-rm__card:hover .omsag-rm__icon { transform: translateY(-2px) scale(1.06); }

/* Kicker-Pill */
.omsag-rm__kicker {
  display: inline-block; align-self: flex-start;
  padding: 5px 11px; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--omsag-lp-pill, 999px);
}
.omsag-rm--light .omsag-rm__kicker { color: var(--b);  background: var(--bs); }
.omsag-rm--dark  .omsag-rm__kicker { color: var(--bl); background: rgba(170,211,55,.14); }

.omsag-rm__title {
  margin: 0 0 10px;
  font-size: 20px; font-weight: 700; line-height: 1.25;
}
.omsag-rm--light .omsag-rm__title { color: var(--ink); }
.omsag-rm--dark  .omsag-rm__title { color: #fff; }

.omsag-rm__text { margin: 0; font-size: 15px; line-height: 1.62; }
.omsag-rm--light .omsag-rm__text { color: var(--ts); }
.omsag-rm--dark  .omsag-rm__text { color: rgba(255,255,255,.72); }

/* ====== Fuss: Hinweis + optionaler CTA ====== */
.omsag-rm__foot {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 18px 28px; margin-top: 32px;
}
.omsag-rm__foot--solo { justify-content: center; }
.omsag-rm__note {
  display: inline-flex; align-items: flex-start; gap: 9px;
  margin: 0; font-size: 14.5px; line-height: 1.5; text-align: left;
}
.omsag-rm__note::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px; margin-top: .52em;
  border-radius: 50%; background: var(--b);
}
.omsag-rm--light .omsag-rm__note { color: var(--mut); }
.omsag-rm--dark  .omsag-rm__note { color: rgba(255,255,255,.58); }
.omsag-rm--dark  .omsag-rm__note::before { background: var(--bl); }

.omsag-rm__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; margin-left: auto;
  font-size: 15px; font-weight: 600;
  border-radius: var(--omsag-lp-pill, 999px);
  text-decoration: none;
  transition: transform .25s var(--ez), box-shadow .25s var(--ez);
}
.omsag-rm--light .omsag-rm__cta { background: var(--ink); }
.omsag-rm--dark  .omsag-rm__cta { background: var(--grad); }
.omsag-rm__cta,
.omsag-rm__cta:link,
.omsag-rm__cta:visited,
.omsag-rm__cta:hover,
.omsag-rm__cta:focus,
.omsag-rm__cta:active { color: #fff; }
.omsag-rm--light .omsag-rm__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(15,17,21,.55); }
.omsag-rm--dark  .omsag-rm__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(80,170,60,.6); }
.omsag-rm__cta svg { width: 20px; height: 20px; transition: transform .35s var(--ez); }
.omsag-rm__cta:hover svg { transform: translateX(3px) rotate(45deg); }

/* ====== Responsive ====== */
@media (max-width: 1100px) {
  .omsag-rm { padding: 76px 0 72px; }
  .omsag-rm__grid { grid-template-columns: 1fr; gap: 18px; }
  .omsag-rm__head { margin-bottom: 40px; }
  .omsag-rm__head[data-align-t="left"]   { text-align: left;   margin-left: 0;    margin-right: auto; }
  .omsag-rm__head[data-align-t="center"] { text-align: center; margin-left: auto; margin-right: auto; }
  .omsag-rm__head[data-align-t="right"]  { text-align: right;  margin-left: auto; margin-right: 0; }
}

@media (max-width: 760px) {
  .omsag-rm { padding: 60px 0 56px; }
  .omsag-rm__container { padding: 0 20px; }
  .omsag-rm__head { margin-bottom: 32px; }
  .omsag-rm__head[data-align-m="left"]   { text-align: left;   margin-left: 0;    margin-right: auto; }
  .omsag-rm__head[data-align-m="center"] { text-align: center; margin-left: auto; margin-right: auto; }
  .omsag-rm__head[data-align-m="right"]  { text-align: right;  margin-left: auto; margin-right: 0; }
  .omsag-rm__lead { font-size: 16px; }
  .omsag-rm__card { padding: 28px 24px 26px; }
  .omsag-rm__icon { width: 38px; height: 38px; margin-bottom: 16px; }
  .omsag-rm__title { font-size: 18px; }
  .omsag-rm__foot { flex-direction: column; align-items: flex-start; }
  .omsag-rm__foot--solo { align-items: center; }
  .omsag-rm__cta { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .omsag-rm__card,
  .omsag-rm__icon { opacity: 1 !important; transform: none !important; transition: none !important; }
}