/* ============================================================
   EVENT MANAGEMENT — pagina-eigen composities
   De gedeelde EMS-composities (kruimelpad, hero-frame, cijferbalk,
   split-rijen, card-stack, donkere banden, features, demo, FAQ,
   oplossingen-switcher) staan in pages/ems-gedeeld.css en worden
   dáárvóór geladen. Hier staat alleen wat uniek is aan deze pagina:
   de sterretjes bij de hero-kop, het winstgevende-offerte-blok en
   de marge-knop.
   ============================================================ */

/* ---- Hero: 3 sterretjes rechtsboven de kop (bron visuals/kleine-sterren.png) ---- */
.em-hero-kop { position: relative; display: inline-block; }
.em-hero-sterren { position: absolute; top: -0.35em; right: -2.6rem; width: 2rem; height: auto; pointer-events: none; }
@media (max-width: 620px) { .em-hero-sterren { width: 1.4rem; right: -1.4rem; top: -0.2em; } }

/* ---- Winstgevende offerte ---- */
.em-winst-beeld { display: grid; place-items: center; }
.em-winst-beeld img { width: 100%; max-width: 34rem; height: auto; }

/* ---- De offerte die het meest oplevert ---- */
.em-oplevert { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
@media (max-width: 920px) { .em-oplevert { grid-template-columns: 1fr; } }
.em-oplevert-visual { background: var(--c-surface-soft); border-radius: var(--r-media); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-tile); text-align: center; }
.em-oplevert-visual .marge { margin: 0 auto var(--sp-5); }
.em-oplevert-visual .em-visual-cap { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; max-width: 26rem; margin-inline: auto; }
.em-oplevert-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.em-oplevert-lijst li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.em-oplevert-lijst .em-o-num { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--c-orange); width: 2.2rem; }
.em-oplevert-lijst h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lead); margin: 0 0 var(--sp-1); }
.em-oplevert-lijst p { font-size: var(--fs-body); color: var(--c-ink-soft); margin: 0; }

/* De marge-knop stond hier; hij staat nu in pages/ems-gedeeld.css omdat
   /event-management-software hem ook gebruikt (BOUWGIDS §2 wet 5). */