/* ==========================================================================
   AM Taxes — actiebanner "Eerste maand gratis boekhouding"
   Tijdelijk (t/m 31-12-2026). Instellingen: assets/actie-config.js.
   Na de actie kan dit hele bestand weg (zie LEESMIJ.md).

   Schaal: één eenheid --u per layout, afgeleid van de ontwerpcanvassen.
     desktop + tablet (≥768px)  --u = breedte / 1600, maximaal 1px  (Main.dc.html)
     mobiel           (<768px)  --u = breedte / 1080                (Mobiel.dc.html)
   Tablet gebruikt de desktopopbouw: de mobiele opbouw werd op 768–1023px
   meer dan een schermhoogte hoog, met de knop pas onderaan.
   Elke maat uit de mockup is "N * var(--u)", zodat alles samen meeschaalt.
   Kleine tekst en de knop hebben een ondergrens (max()) voor leesbaarheid.
   --u gebruikt cqw (breedte van de banner zelf), dus een schuifbalk kan
   nooit horizontaal scrollen veroorzaken.
   ========================================================================== */

:root {
  --actie-navy: #0f2742;
  --actie-navy-dark: #0a1c30;
  --actie-gold: #d9bb78;
  --actie-gold-button: linear-gradient(180deg, #dcbf7e 0%, #c9a356 100%);
  --actie-gold-block: linear-gradient(135deg, #e3c684 0%, #c9a356 55%, #b8923f 100%);
  --actie-white-92: rgba(255, 255, 255, 0.92);
  --actie-white-86: rgba(255, 255, 255, 0.86);
  --actie-white-80: rgba(255, 255, 255, 0.8);
  --actie-white-78: rgba(255, 255, 255, 0.78);
  --actie-white-70: rgba(255, 255, 255, 0.7);
  --actie-white-60: rgba(255, 255, 255, 0.6);
  --actie-shadow-text: rgba(3, 10, 20, 0.45);
}

/* ---------- Banner ---------- */
.actie {
  container-type: inline-size;
  --u: calc(min(100cqw, 1600px) / 1600);
  /* Left edge of the 1600-wide stage (0 up to 1600px, then centred) */
  --stage-x: calc(50% - 800 * var(--u));
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--actie-navy-dark);
  font-family: var(--sans);
}

/* Background layers: radial light, shade band and "floor", anchored to the
   bottom of the banner so the podium always stands on the floor. */
.actie-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* floor: dark on the left */
    linear-gradient(90deg, #071525 0, #071525 calc(var(--stage-x) + 704 * var(--u)), rgba(7, 21, 37, 0) calc(var(--stage-x) + 1152 * var(--u)))
      0 100% / 100% calc(173 * var(--u)) no-repeat,
    /* floor: thin highlight on the top edge */
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 2px)
      0 100% / 100% calc(173 * var(--u)) no-repeat,
    /* floor: surface */
    linear-gradient(180deg, #1a3b5e 0%, #0c2138 70%, #081828 100%)
      0 100% / 100% calc(173 * var(--u)) no-repeat,
    /* shade band above the floor */
    linear-gradient(180deg, rgba(5, 15, 28, 0) 0%, rgba(5, 15, 28, 0.55) 100%)
      0 calc(100% - 173 * var(--u)) / 100% calc(257 * var(--u)) no-repeat,
    /* radial light behind the book */
    radial-gradient(calc(820 * var(--u)) calc(640 * var(--u)) at calc(var(--stage-x) + 1264 * var(--u)) calc(100% - 378 * var(--u)),
      #24486f 0%, #153353 38%, #0f2742 62%, #0a1c30 100%);
}

.actie-inner {
  position: relative;
  max-width: calc(1600 * var(--u));
  min-height: calc(814 * var(--u));
  margin-inline: auto;
  padding: calc(48 * var(--u)) calc(72 * var(--u)) calc(40 * var(--u));
  display: flex;
  flex-direction: column;
}

/* Gold glow behind the book and gold blur bottom right */
.actie-inner::before,
.actie-inner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.actie-inner::before {
  left: calc(950 * var(--u));
  bottom: calc(50 * var(--u));
  width: calc(620 * var(--u));
  height: calc(620 * var(--u));
  background: radial-gradient(closest-side, rgba(217, 187, 120, 0.3) 0%, rgba(217, 187, 120, 0.1) 55%, rgba(217, 187, 120, 0) 100%);
}
.actie-inner::after {
  left: calc(1400 * var(--u));
  bottom: calc(-130 * var(--u));
  width: calc(260 * var(--u));
  height: calc(260 * var(--u));
  background: rgba(201, 163, 86, 0.34);
  filter: blur(calc(46 * var(--u)));
  z-index: 1;
}

/* Book on the podium */
.actie-visual {
  position: absolute;
  left: calc(979 * var(--u));
  bottom: calc(55 * var(--u));
  width: calc(563 * var(--u));
  aspect-ratio: 750 / 860;
  pointer-events: none;
}
.actie-visual svg { display: block; width: 100%; height: 100%; max-width: none; }

/* Badge, top right */
.actie-badge {
  position: absolute;
  top: calc(48 * var(--u));
  right: calc(72 * var(--u));
  z-index: 2;
  display: flex;
  align-items: center;
  height: max(30px, calc(42 * var(--u)));
  padding: 0 calc(22 * var(--u));
  border-radius: 999px;
  background: var(--actie-gold-button);
  color: var(--actie-navy);
  font-size: max(13px, calc(15 * var(--u)));
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(3, 10, 20, 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
}
.actie-badge-mob { display: none; }

/* Copy column */
.actie-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(22 * var(--u));
}
.actie-copy p { margin: 0; }
.actie-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--u));
}

.actie-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
}
.actie-title > span { display: block; white-space: nowrap; }
.actie-line {
  font-size: calc(108 * var(--u));
  text-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) var(--actie-shadow-text);
}
.actie-free {
  font-size: calc(146 * var(--u));
  color: var(--actie-navy);
  background: var(--actie-gold-block);
  padding: 0 calc(26 * var(--u)) calc(15 * var(--u)) calc(22 * var(--u));
  border-radius: calc(24 * var(--u));
  box-shadow: 0 calc(22 * var(--u)) calc(44 * var(--u)) var(--actie-shadow-text), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.actie-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  line-height: 1;
  font-weight: 500;
}
.actie-sub-1 {
  font-size: max(15px, calc(26 * var(--u)));
  letter-spacing: -0.01em;
  color: var(--actie-white-70);
}
.actie-sub-2 {
  font-size: max(13px, calc(18 * var(--u)));
  color: var(--actie-white-60);
}

.actie-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 * var(--u));
}
.actie-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(14 * var(--u));
  row-gap: 4px;
  line-height: 1;
  font-size: max(15px, calc(30 * var(--u)));
  font-weight: 500;
  color: var(--actie-white-86);
}
.actie-price strong {
  font-size: max(28px, calc(62 * var(--u)));
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--actie-gold);
  white-space: nowrap;
}

.actie-urgency {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--u));
}
.actie-deadline {
  --icon: max(17px, calc(24 * var(--u)));
  --icon-gap: calc(10 * var(--u));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--icon-gap);
  row-gap: 8px;
  font-size: max(14px, calc(21 * var(--u)));
  font-weight: 600;
  line-height: 1;
  color: var(--actie-white-92);
}
.actie-deadline > svg { width: var(--icon); height: var(--icon); flex: none; }
.actie-deadline strong { font-weight: 800; color: var(--actie-gold); }
.actie-cancel {
  padding-left: calc(var(--icon, 24px) + 10 * var(--u));
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 500;
  line-height: 1;
  color: var(--actie-white-60);
}
.actie-urgency { --icon: max(17px, calc(24 * var(--u))); }

/* Countdown (and the spots counter, when switched on): small, calm, no blinking.
   Shown only when JavaScript runs; until then the space stays reserved. */
.actie-chips {
  display: none;
  gap: calc(8 * var(--u));
  margin-left: calc(8 * var(--u));
}
.actie-js .actie-chips { display: inline-flex; }
.actie-chip {
  display: inline-flex;
  align-items: center;
  min-width: 7.2em;
  justify-content: center;
  /* as high as the clock icon, so the line doesn't grow */
  height: max(22px, calc(26 * var(--u)));
  margin-block: calc(-1 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 1px solid rgba(217, 187, 120, 0.55);
  border-radius: 999px;
  background: rgba(217, 187, 120, 0.08);
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--actie-gold);
  white-space: nowrap;
}
.actie-chip[hidden] { display: none; }

.actie-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 * var(--u));
}

/* "Claim je gratis maand" (banner, pop-up and /actie) */
.actie-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--actie-gold-button);
  color: var(--actie-navy);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 16px 34px rgba(3, 10, 20, 0.5), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.actie-btn:hover { color: var(--actie-navy); transform: translateY(-2px); filter: brightness(1.04); }
.actie-btn-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--actie-navy);
}
.actie-btn-icon svg { display: block; }
.actie-btn:focus-visible,
.actie-more:focus-visible,
.actie-modal-close:focus-visible {
  outline: 3px solid var(--actie-gold);
  outline-offset: 4px;
}
.actie-more:focus-visible { border-radius: 4px; }

.actie .actie-btn {
  gap: calc(16 * var(--u));
  height: max(48px, calc(68 * var(--u)));
  padding: 0 calc(14 * var(--u)) 0 calc(36 * var(--u));
  font-size: max(16px, calc(25 * var(--u)));
  box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(3, 10, 20, 0.5), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
}
.actie .actie-btn-icon {
  width: max(34px, calc(44 * var(--u)));
  height: max(34px, calc(44 * var(--u)));
}
.actie .actie-btn-icon svg {
  width: max(17px, calc(22 * var(--u)));
  height: max(17px, calc(22 * var(--u)));
}

.actie-more {
  font-size: max(13px, calc(15 * var(--u)));
  font-weight: 500;
  line-height: 1;
  color: var(--actie-white-80);
  text-decoration: underline;
  text-underline-offset: max(3px, calc(3 * var(--u)));
}
.actie-more:hover { color: #fff; }

/* ---------- Mobile: Mobiel.dc.html (1080 × 1350) ---------- */
@media (max-width: 767px) {
  .actie {
    --u: calc(100cqw / 1080);
    --stage-x: calc(50% - 540 * var(--u));
  }
  .actie-bg {
    background:
      linear-gradient(90deg, #071525 0, #071525 calc(var(--stage-x) + 346 * var(--u)), rgba(7, 21, 37, 0) calc(var(--stage-x) + 713 * var(--u)))
        0 100% / 100% calc(118 * var(--u)) no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 2px)
        0 100% / 100% calc(118 * var(--u)) no-repeat,
      linear-gradient(180deg, #1a3b5e 0%, #0c2138 70%, #081828 100%)
        0 100% / 100% calc(118 * var(--u)) no-repeat,
      linear-gradient(180deg, rgba(5, 15, 28, 0) 0%, rgba(5, 15, 28, 0.55) 100%)
        0 calc(100% - 118 * var(--u)) / 100% calc(248 * var(--u)) no-repeat,
      radial-gradient(calc(760 * var(--u)) calc(640 * var(--u)) at calc(var(--stage-x) + 886 * var(--u)) calc(100% - 189 * var(--u)),
        #24486f 0%, #153353 38%, #0f2742 62%, #0a1c30 100%);
  }
  .actie-inner {
    max-width: calc(1080 * var(--u));
    min-height: 0;
    padding: calc(64 * var(--u)) calc(72 * var(--u)) calc(12 * var(--u));
  }
  .actie-inner::before {
    left: auto;
    right: calc(-23 * var(--u));
    bottom: calc(-28 * var(--u));
    width: calc(440 * var(--u));
    height: calc(440 * var(--u));
  }
  .actie-inner::after {
    left: auto;
    right: calc(-70 * var(--u));
    bottom: calc(-120 * var(--u));
    width: calc(220 * var(--u));
    height: calc(220 * var(--u));
    filter: blur(calc(44 * var(--u)));
  }

  /* Badge gets its own row (the logo row of the mockup, without the logo) */
  .actie-badge {
    position: static;
    align-self: flex-end;
    height: max(30px, calc(50 * var(--u)));
    padding: 0 max(14px, calc(24 * var(--u)));
    font-size: max(13px, calc(18 * var(--u)));
    margin-bottom: calc(72 * var(--u));
    box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(3, 10, 20, 0.4), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
  }
  .actie-badge-desk { display: none; }
  .actie-badge-mob { display: inline; }

  .actie-copy { gap: calc(48 * var(--u)); }
  .actie-head { gap: calc(24 * var(--u)); }
  .actie-title { gap: calc(8 * var(--u)); }
  .actie-line { font-size: calc(136 * var(--u)); }
  .actie-free {
    font-size: calc(190 * var(--u));
    padding: 0 calc(34 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
    border-radius: calc(30 * var(--u));
  }
  .actie-sub { gap: max(6px, calc(12 * var(--u))); }
  .actie-sub-1 { font-size: max(15px, calc(36 * var(--u))); }
  .actie-sub-2 { font-size: max(13px, calc(24 * var(--u))); }

  .actie-offer { gap: max(10px, calc(20 * var(--u))); }
  .actie-price { column-gap: calc(16 * var(--u)); font-size: max(15px, calc(38 * var(--u))); }
  .actie-price strong { font-size: max(30px, calc(84 * var(--u))); }

  .actie-urgency { --icon: max(17px, calc(32 * var(--u))); gap: max(8px, calc(12 * var(--u))); }
  .actie-deadline {
    --icon: max(17px, calc(32 * var(--u)));
    --icon-gap: max(7px, calc(12 * var(--u)));
    font-size: max(14px, calc(28 * var(--u)));
  }
  .actie-cancel {
    padding-left: calc(var(--icon) + max(7px, calc(12 * var(--u))));
    font-size: max(13px, calc(22 * var(--u)));
  }
  /* Countdown on its own line, indented like "Maandelijks opzegbaar" */
  .actie-js .actie-chips {
    display: flex;
    flex-basis: 100%;
    margin-left: 0;
    padding-left: calc(var(--icon) + var(--icon-gap));
    gap: 8px;
  }
  .actie-chip {
    height: max(26px, calc(40 * var(--u)));
    padding: 0 max(10px, calc(16 * var(--u)));
    font-size: max(13px, calc(22 * var(--u)));
  }

  .actie-cta { gap: max(14px, calc(22 * var(--u))); }
  .actie .actie-btn {
    gap: max(10px, calc(20 * var(--u)));
    height: max(52px, calc(96 * var(--u)));
    padding: 0 max(7px, calc(18 * var(--u))) 0 max(22px, calc(48 * var(--u)));
    font-size: max(17px, calc(36 * var(--u)));
  }
  .actie .actie-btn-icon { width: max(38px, calc(60 * var(--u))); height: max(38px, calc(60 * var(--u))); }
  .actie .actie-btn-icon svg { width: max(18px, calc(30 * var(--u))); height: max(18px, calc(30 * var(--u))); }
  .actie-more {
    font-size: max(13px, calc(22 * var(--u)));
    text-underline-offset: max(3px, calc(4 * var(--u)));
  }

  /* Book bottom right, in the flow below the button: it rises next to the
     short link line but never next to the button, so it can't cover text */
  .actie-visual {
    position: relative;
    left: auto;
    bottom: auto;
    align-self: flex-end;
    width: calc(345 * var(--u));
    margin-top: calc(-110 * var(--u));
    margin-right: calc(-48 * var(--u));
    z-index: 1;
  }
}

/* Small phones: the book gets smaller */
@media (max-width: 379px) {
  .actie-visual { width: calc(280 * var(--u)); margin-top: calc(-80 * var(--u)); }
}

/* ---------- Pop-up "Wat is inbegrepen?" ---------- */
.actie-modal {
  width: min(780px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: #fff;
  background: radial-gradient(120% 70% at 85% 0%, #1c3f63 0%, #0f2742 55%, #0a1c30 100%);
  box-shadow: 0 30px 80px rgba(3, 10, 20, 0.55);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.actie-modal::backdrop { background: rgba(5, 15, 28, 0.72); }
html.actie-modal-open { overflow: hidden; }

.actie-modal-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 0;
  display: flex;
  justify-content: flex-end;
}
.actie-modal-close {
  width: 44px;
  height: 44px;
  margin: 14px 14px 0 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(10, 28, 48, 0.85);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.actie-modal-close:hover { background: var(--actie-gold); color: var(--actie-navy); }

/* Shared content (pop-up and /actie page) */
.actie-info {
  padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 48px) clamp(28px, 5vw, 44px);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--actie-white-86);
}
.actie-info-title {
  margin: 0 56px 0.9rem 0;
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--actie-gold);
}
.actie-info-intro { margin: 0; font-size: 1.05rem; color: var(--actie-white-92); }
.actie-info h3,
.actie-info h2.actie-info-h {
  margin: 2rem 0 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #fff;
}
.actie-info p { margin: 0 0 0.75rem; }
.actie-info ul.actie-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.actie-list li { position: relative; padding-left: 1.3rem; }
.actie-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--actie-gold);
}
@media (min-width: 640px) {
  .actie-list-cols { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .actie-list-cols li:last-child { grid-column: 1 / -1; }
}

.actie-packs {
  list-style: none;
  margin: 1rem 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .actie-packs { grid-template-columns: repeat(3, 1fr); }
}
.actie-pack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid rgba(217, 187, 120, 0.3);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}
.actie-pack-name { font-weight: 800; font-size: 1.1rem; color: #fff; line-height: 1.3; }
.actie-pack-range { font-size: 0.95rem; color: var(--actie-white-80); }
.actie-pack-price {
  margin-top: 0.35rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--actie-gold);
  white-space: nowrap;
}
/* The colons of "Start: tot 25 boekingen: €49,99" are kept for screen readers
   and copy-paste, but not drawn: in a card the layout already separates them */
.actie-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.actie-pack-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.actie-pack-wide .actie-pack-price { margin: 0; font-size: 1.15rem; white-space: normal; }
.actie-free-note {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(217, 187, 120, 0.12);
  color: #fff;
  font-weight: 600;
}
.actie-info-cta { margin-top: 2rem; }
.actie-info .actie-btn {
  gap: 14px;
  height: 58px;
  padding: 0 10px 0 28px;
  font-size: 1.15rem;
}
.actie-info .actie-btn-icon { width: 40px; height: 40px; }
.actie-info .actie-btn-icon svg { width: 20px; height: 20px; }

@media (max-width: 520px) {
  .actie-modal { width: calc(100% - 16px); max-height: calc(100% - 16px); border-radius: 20px; }
  .actie-info .actie-btn { width: 100%; justify-content: space-between; }
}

/* ---------- /actie page ---------- */
.actie-page {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 5rem);
}
.actie-page-card {
  max-width: 820px;
  margin-inline: auto;
  border-radius: var(--radius-card, 32px);
  color: #fff;
  background: radial-gradient(120% 70% at 85% 0%, #1c3f63 0%, #0f2742 55%, #0a1c30 100%);
  overflow: hidden;
}
.actie-page .actie-info-title { margin-right: 0; }
.actie-page-ended { display: none; }
.actie-page-ended .actie-info-intro a { color: var(--actie-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- After the end date (class set by assets/actie-config.js) ---------- */
.actie-voorbij .actie,
.actie-voorbij .actie-modal,
.actie-voorbij .actie-page-active { display: none !important; }
.actie-voorbij .actie-page-ended { display: block; }

@media (prefers-reduced-motion: reduce) {
  .actie-btn, .actie-btn:hover { transition: none; transform: none; }
}

.actie-nowrap { white-space: nowrap; }