/* [awcf_em_prijscalculator] hero-visual volgens de opzet (hero3__visual + quote-card) */
.emr-calc { --emr-ink: var(--e-global-color-primary, #1A1A18); --emr-blue: var(--e-global-color-emblauw, #0094DA); --emr-blue-dark: var(--e-global-color-secondary, #006C99);
  --emr-tint: var(--e-global-color-emtint, #DCEFF9); --emr-orange: var(--e-global-color-accent, #F98E02); --emr-orange-h: var(--e-global-color-emorhov, #DB7E00);
  --emr-display: var(--e-global-typography-secondary-font-family, "Archivo"), Arial, sans-serif; --emr-text: var(--e-global-typography-text-font-family, "Public Sans"), Arial, sans-serif;
  position: relative; color: var(--emr-ink); font-family: var(--emr-text); }
.emr-calc p { margin: 0; }
.emr-stripes { position: absolute; pointer-events: none; z-index: 0; inset: -40px -40px -40px 10%; }
.emr-stripes span { position: absolute; left: -10%; width: 120%; height: 18%; clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
  opacity: 0; transform: translateX(-16px); transition: opacity .7s cubic-bezier(.2, 0, 0, 1), transform .7s cubic-bezier(.2, 0, 0, 1); }
.emr-stripes span:nth-child(1) { top: 8%; background: var(--emr-orange); }
.emr-stripes span:nth-child(2) { top: 34%; background: var(--emr-blue); transition-delay: .12s; }
.emr-stripes span:nth-child(3) { top: 60%; background: rgba(255, 255, 255, .14); transition-delay: .24s; }
.emr-calc.is-in .emr-stripes span { opacity: 1; transform: none; }
.emr-calc__photo { position: relative; z-index: 2; margin: 0; background: #fff; border-radius: 4px; overflow: hidden; display: none; }
.emr-calc__photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.emr-calc__photo figcaption { position: absolute; right: 16px; bottom: 14px; max-width: 60%; text-align: right; font-size: 13px; font-weight: 700; font-style: normal; line-height: 1.4; color: var(--emr-ink); }
.emr-calc__card { position: relative; z-index: 2; background: #fff; border-radius: 4px; padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.emr-calc__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.emr-calc .emr-calc__head h2 { margin: 0; font-family: var(--emr-display); font-size: 22px; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; color: var(--emr-ink); }
.emr-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 4px; background: var(--emr-tint); color: var(--emr-blue-dark);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.emr-calc__fields { display: grid; gap: 12px; margin-top: 18px; }
.emr-calc label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--emr-ink); }
.emr-calc select, .emr-calc input { width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid var(--emr-blue-dark); border-radius: 4px;
  background: #fff; color: var(--emr-ink); font: 400 16px/1.4 var(--emr-text); }
.emr-calc__unit { position: relative; }
.emr-calc__unit input { padding-right: 52px; }
.emr-calc__unit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; }
.emr-calc__out { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 4px 16px; margin-top: 18px; padding: 16px 18px; border-radius: 4px; background: var(--emr-tint); }
.emr-calc__kg { font-family: var(--emr-display); font-weight: 900; font-size: 34px; line-height: 1; white-space: nowrap; }
.emr-calc__sets { font-size: 14px; font-weight: 700; text-align: right; }
.emr-calc__basis { grid-column: 1 / -1; margin-top: 6px !important; font-size: 12px; line-height: 1.45; }
.emr-calc .emr-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 16px; padding: 14px 28px; border-radius: 4px;
  background: var(--emr-orange); color: var(--emr-ink) !important; font: 800 16px/1.4 var(--emr-text); text-decoration: none; text-align: center;
  box-shadow: 0 2px 0 rgba(26, 26, 24, .25); transition: background-color .2s, transform .2s, box-shadow .2s; }
.emr-calc .emr-btn:hover { background: var(--emr-orange-h); transform: translateY(-2px); box-shadow: 0 6px 0 rgba(26, 26, 24, .25); }
.emr-calc__alt { margin-top: 10px !important; font-size: 14px; text-align: center; }
.emr-calc__alt a { color: var(--emr-blue-dark); font-weight: 700; }
.emr-calc__alt a:hover { color: var(--emr-ink); }

@media (max-width: 999px) { .emr-stripes { display: none; } }
@media (min-width: 1000px) {
  .emr-calc { min-height: 600px; }
  .emr-calc__photo { display: block; position: absolute; right: 0; top: 0; width: 74%; aspect-ratio: 4 / 5; }
  .emr-calc__photo img { padding: 8% 6% 16% 30%; object-position: 70% 50%; }
  .emr-calc__card { position: absolute; left: 0; bottom: 0; width: 360px; }
}
@media (prefers-reduced-motion: reduce) { .emr-stripes span { transition: none; opacity: 1; transform: none; } .emr-calc .emr-btn:hover { transform: none; } }

/* variant="blok" (epoxypagina, materiaalcalculator) */
.emr-calc--blok { display: grid; gap: 32px; padding: 40px; border-radius: 4px; background: #fff; }
@media (min-width: 900px) { .emr-calc--blok { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } }
@media (max-width: 599px) { .emr-calc--blok { padding: 20px; } }
.emr-calc--blok .emr-calc__fields { margin-top: 0; gap: 20px; }
.emr-calc__help { margin-top: 6px !important; font-size: 14px; }
.emr-calc__result { padding: 28px; border-radius: 4px; background: var(--emr-ink); color: #fff; }
.emr-calc__result > * + * { margin-top: 12px !important; }
.emr-calc__result .emr-calc__kg { font-size: clamp(40px, 2vw + 28px, 52px); color: #fff; }
.emr-calc__result .emr-calc__sets { text-align: left; font-size: 18px; color: #fff; }
.emr-calc__result .emr-calc__basis { font-size: 14px; color: #fff; }
.emr-calc__result .emr-btn { width: auto; display: inline-flex; margin-top: 20px !important; }
.emr-tag--dark { background: rgba(255, 255, 255, .12); color: #fff; letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (min-width: 1000px) { .emr-calc.emr-calc--blok { min-height: 0; } }