/* ============================================================
   TANTE ZUS - zus-vier.css
   De zaalverhuur-paginas in de nieuwe stijl (28-10-2026):
     1. vier.html     (zaalverhuur, mockup 13)
     2. offerte.html  (feestplanner/configurator, mockup 17)
     3. optie.html    (accepteerpagina van een optie)
   vier en offerte laden eerst zus.css (de goedgekeurde homepagestijl) en
   daarna dit bestand. optie.html laadt zus.css NIET (de klassen .knop, .dag,
   .voet en .kaart hebben daar een eigen betekenis) en heeft dus eigen
   waarden onder body.optie, onderaan dit bestand.
   ============================================================ */

/* ---------- gedeeld: kleine hulpjes ---------- */
/* de streepjes-hoek: .streepjes in zus.css wint anders van .hoek en maakt hem piepklein */
body .hoek { width: 46px; height: 46px; }
@media (max-width: 600px) { body .hoek { width: 34px; height: 34px; } }
/* iconen uit de sprite: kleur via currentColor, de paden hebben geen eigen fill */
.ikoon { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; }
[hidden] { display: none !important; }

/* ============================================================
   1. VIER.HTML
   ============================================================ */

/* ---------- hero: nachtzwart vlak, de echte zaal in schuine lijsten ---------- */
.vier-hero {
  background: var(--nacht);
  background-image: var(--vlak-bruin);
  color: var(--wit);
  padding: 3rem var(--rand) 4.5rem;
}
.vhero__binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 3.5rem; align-items: center; }
.vhero__tekst .kop-breed { color: var(--wit); font-size: clamp(3.4rem, 13vw, 6.9rem); }
.vhero__tekst .label { color: var(--oranje); }
.vhero__sub { max-width: 46ch; margin: 1.75rem 0 1.75rem; font-size: 1.2rem; font-weight: 500; line-height: 1.5; color: rgba(255, 248, 239, .92); }
.vhero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.vhero__tekst .onderstreept { color: var(--wit); }
.vhero__tekst .feiten { border-top-color: rgba(255, 248, 239, .22); }
.vhero__tekst .feiten li { color: var(--wit); }
.vhero__tekst .feiten svg { color: var(--oranje); }
.feiten .ikoon { width: 42px; height: 42px; }

.vhero__beeld { position: relative; padding-bottom: 18%; }
.vhero__groot { --vorm: polygon(0 3%, 100% 0, 97% 100%, 2% 96%); transform: rotate(-1deg); }
.vhero__groot img { aspect-ratio: 3 / 2.1; }
.vhero__klein { --vorm: polygon(4% 0, 100% 4%, 98% 100%, 0 95%); position: absolute; width: 46%; right: -2%; bottom: 0; transform: rotate(3deg); }
.vhero__klein img { aspect-ratio: 4 / 3; }
.vhero__beeld .sticker { top: -1.25rem; right: auto; left: 4%; font-size: 1rem; }
@media (min-width: 861px) {
  .vhero__binnen { grid-template-columns: 1.02fr 1fr; gap: 4rem; }
  .vier-hero { padding-top: 4.5rem; padding-bottom: 5.5rem; }
  .vhero__beeld .sticker { left: auto; right: 4%; top: -1.6rem; }
}

/* ---------- beschikbaarheid: oranje strook ---------- */
.zaal-status-banner {
  background: var(--oranje);
  background-image: var(--vlak-oranje);
  color: var(--bruin);
  padding: 3.5rem var(--rand);
}
.zsb__binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 2rem; align-items: center; }
.zaal-status-banner .label { color: var(--bruin); }
.zaal-status-banner .kop-smal { color: var(--bruin); font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
.zsb__sub { max-width: 54ch; margin-top: 1.5rem; font-size: 1.1rem; font-weight: 500; }
.zaal-status-banner .knop--bruin { --vul: var(--wit); }
.zaal-status-banner .knop--bruin:hover, .zaal-status-banner .knop--bruin:focus-visible { color: var(--bruin); border-color: var(--wit); }
@media (min-width: 861px) { .zsb__binnen { grid-template-columns: 1fr auto; gap: 4rem; } }

/* ---------- waarom tante zus: foto's links, tekst rechts ---------- */
.vier-intro { padding: 4.5rem var(--rand) 4rem; }
.vintro__binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 3.5rem; align-items: center; }
.vintro__beeld { position: relative; padding-bottom: 16%; }
.vintro__groot { --vorm: polygon(0 4%, 100% 0, 96% 100%, 2% 98%); transform: rotate(-.8deg); }
.vintro__groot img { aspect-ratio: 4 / 3.2; }
.vintro__klein { --vorm: polygon(6% 0, 100% 3%, 100% 94%, 0 100%); position: absolute; width: 44%; right: -3%; bottom: 0; transform: rotate(2.5deg); }
.vintro__klein img { aspect-ratio: 4 / 3; }
.vintro__tekst .label { color: var(--oranje-diep); }
.vintro__tekst .kop-smal { font-size: clamp(2.8rem, 6vw, 4.8rem); margin-bottom: 1.75rem; }
.vintro__tekst > p { max-width: 46ch; margin-top: 1rem; }
.vintro__cijfers { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(23, 18, 14, .18); }
.vintro__cijfers li { display: grid; gap: .15rem; }
.vintro__getal { font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-size: 3.2rem; line-height: 1; letter-spacing: -.02em; color: var(--oranje-diep); }
.vintro__tekstje { font-family: var(--nav); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 861px) {
  .vintro__binnen { grid-template-columns: 1.1fr 1fr; gap: 5rem; }
  .vier-intro { padding: 6rem var(--rand) 5.5rem; }
}

/* ---------- gelegenheden: crème vlak, kaartjes met schuine foto ---------- */
.vier-occasions { background: var(--creme); background-image: var(--vlak-papier); padding: 5rem var(--rand) 5.5rem; }
.vocc__binnen { max-width: var(--breed); margin: 0 auto; }
.vocc__kop { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 3.25rem; }
.vocc__kop .label { color: var(--oranje-diep); }
.vocc__sub { max-width: 44ch; font-size: 1.15rem; }
.occasions-grid { display: grid; gap: 3rem 2rem; }
.occasion-card { position: relative; display: flex; flex-direction: column; }
.occasion-card__foto { --vorm: polygon(2% 2%, 100% 0, 98% 100%, 0 96%); transform: rotate(-1deg); }
.occasion-card:nth-child(even) .occasion-card__foto { --vorm: polygon(0 0, 98% 3%, 100% 97%, 3% 100%); transform: rotate(1deg); }
.occasion-card__img { aspect-ratio: 4 / 3; }
.occasion-card__tag {
  position: absolute; z-index: 2; top: 1rem; left: 1rem;
  background: var(--wit); color: var(--bruin);
  font-family: var(--nav); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 0;
}
.occasion-card__body { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center; padding: 1.4rem .25rem 0; }
.occasion-card__icon { width: 52px; height: 52px; color: var(--oranje-diep); grid-row: 1; }
.occasion-card__name { font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 85%; text-transform: uppercase; font-size: 1.55rem; line-height: 1; letter-spacing: -.01em; }
.occasion-card__desc { grid-column: 1 / -1; margin-top: .75rem; font-size: 1.05rem; color: var(--bruin-zacht); }
@media (min-width: 700px) { .occasions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .occasions-grid { grid-template-columns: repeat(3, 1fr); gap: 3.5rem 2.5rem; }
  .occasion-card:nth-child(3n + 2) { margin-top: 2.5rem; }
  .vocc__kop { grid-template-columns: 1fr auto; }
}

/* ---------- de ruimte: losse foto's in schuine lijsten ---------- */
.vier-ruimte { padding: 5rem var(--rand) 5.5rem; }
.vruimte__binnen { max-width: var(--breed); margin: 0 auto; }
.vruimte__kop { margin-bottom: 3rem; }
.vruimte__kop .label { color: var(--oranje-diep); }
.vier-ruimte__gallery { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; }
.ruimte-img img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ruimte-img:nth-child(1) { --vorm: polygon(0 3%, 100% 0, 97% 100%, 2% 97%); transform: rotate(-.8deg); grid-column: 1 / -1; }
.ruimte-img:nth-child(2) { --vorm: polygon(5% 0, 100% 4%, 98% 100%, 0 96%); transform: rotate(1.2deg); }
.ruimte-img:nth-child(3) { --vorm: polygon(0 5%, 96% 0, 100% 96%, 3% 100%); transform: rotate(-1.5deg); }
.ruimte-img:nth-child(4) { --vorm: polygon(3% 0, 100% 3%, 97% 100%, 0 95%); transform: rotate(.8deg); }
.ruimte-img:nth-child(5) { --vorm: polygon(0 4%, 100% 0, 100% 97%, 4% 100%); transform: rotate(-1deg); }
@media (min-width: 861px) {
  .vier-ruimte__gallery { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 1.75rem; align-items: start; }
  .ruimte-img:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .ruimte-img--tall img { aspect-ratio: 4 / 4.4; }
  .ruimte-img:nth-child(4) { margin-top: -1rem; }
}

/* ---------- prijzen en arrangementen: nachtzwart met schuine bovenrand ---------- */
.vier-includes {
  background: var(--nacht);
  background-image: var(--vlak-bruin);
  color: var(--wit);
  clip-path: polygon(0 0, 100% var(--schuin), 100% 100%, 0 100%);
  padding: calc(var(--schuin) + 4rem) var(--rand) 5rem;
}
.vinc__binnen { max-width: var(--breed); margin: 0 auto; }
.vinc__kop .kop-smal { color: var(--wit); font-size: clamp(2.8rem, 5.6vw, 4.8rem); }
.vinc__kop .label { color: var(--oranje); }
.vinc__sub { max-width: 56ch; margin-top: 1.75rem; font-size: 1.15rem; color: rgba(255, 248, 239, .9); }

.zaal-features { display: grid; gap: 2rem 2.5rem; margin-top: 3.25rem; padding-top: 2.25rem; border-top: 1px solid rgba(255, 248, 239, .2); }
.zaal-feature { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-content: start; }
.zaal-feature__ikoon { width: 52px; height: 52px; color: var(--oranje); grid-row: 1 / span 3; }
.zaal-feature__label { font-family: var(--nav); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oranje); }
.zaal-feature__value { font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 85%; text-transform: uppercase; font-size: 1.9rem; line-height: 1; letter-spacing: -.01em; margin-top: .2rem; }
.zaal-feature__value em { font-style: normal; color: var(--oranje); }
.zaal-feature__sub { margin-top: .6rem; font-size: 1rem; line-height: 1.45; color: rgba(255, 248, 239, .8); }
@media (min-width: 700px) { .zaal-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .zaal-features { grid-template-columns: repeat(3, 1fr); } }

/* prijskaarten: omlijnd op het zwart, de meest gekozen in oranje */
.pricing-row { display: grid; gap: 1.5rem; margin-top: 4rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; border: 2px solid rgba(255, 248, 239, .3); padding: 2.4rem 1.75rem 1.75rem; color: var(--wit); }
.price-card--featured { background: var(--oranje); background-image: var(--vlak-oranje); border-color: var(--oranje); color: var(--bruin); }
.price-card__tag {
  position: absolute; top: -1rem; left: 1.5rem;
  background: var(--wit); color: var(--bruin);
  font-family: var(--nav); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .9rem; transform: rotate(-2deg);
}
.price-card:not(.price-card--featured) .price-card__tag { background: var(--oranje); color: var(--wit); }
.price-card__name { font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 85%; text-transform: uppercase; font-size: 1.7rem; line-height: 1; letter-spacing: -.01em; }
.price-card__price { font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 85%; font-size: 3.6rem; line-height: 1; letter-spacing: -.02em; margin-top: 1rem; }
.price-card__price > span:last-child:not([data-tarief]) { font-family: var(--nav); font-weight: 700; font-size: 1rem; letter-spacing: .08em; }
.price-card__duration { margin-top: .6rem; font-size: 1rem; font-weight: 500; opacity: .9; }
.price-card__divider { border: 0; border-top: 2px dashed currentColor; opacity: .35; margin: 1.5rem 0 1.25rem; }
.price-card__includes { list-style: none; display: grid; gap: .55rem; font-size: 1.05rem; }
.price-card__includes li { position: relative; padding-left: 1.7rem; }
.price-card__includes li::before { content: ""; position: absolute; left: .1rem; top: .38em; width: .8em; height: .4em; border-left: 3px solid var(--oranje); border-bottom: 3px solid var(--oranje); transform: rotate(-45deg); }
.price-card--featured .price-card__includes li::before { border-color: var(--bruin); }
.price-card strong { color: inherit !important; font-weight: 700; }
.price-card__note { margin-top: auto; padding-top: 1.4rem; font-size: .95rem; opacity: .85; }

/* hapjes: de kaart op papier, met stippellijnen zoals op de bon */
.hapjes-block { margin-top: 4.5rem; background: var(--papier); background-image: var(--vlak-papier); color: var(--bruin); padding: 2.5rem clamp(1.25rem, 4vw, 3.25rem) 3rem; }
.hapjes-block__title { font-family: var(--kop); font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: .95; letter-spacing: -.01em; word-spacing: .04em; -webkit-text-stroke: .015em currentColor; }
.hapjes-block__title em { font-style: normal; color: var(--oranje-diep); }
.hapjes-grid { display: grid; column-gap: 3.5rem; margin-top: .5rem; }
.hapje-header { grid-column: 1 / -1; margin-top: 2.25rem; padding-bottom: .5rem; border-bottom: 2px solid var(--bruin); font-family: var(--nav); font-weight: 700; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oranje-diep); }
.hapje-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: .85rem 0; border-bottom: 1px dotted rgba(23, 18, 14, .45); }
.hapje-item__name { font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.hapje-item__sub { display: block; margin-top: .15rem; font-weight: 400; font-size: .95rem; color: var(--bruin-zacht); }
.hapje-item__price { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hapjes-luxe-list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem .6rem; padding: 1rem 0 .5rem; }
.hapjes-luxe-item { border: 2px solid var(--bruin); padding: .25rem .8rem; font-family: var(--nav); font-weight: 700; font-size: .95rem; }
@media (min-width: 861px) { .hapjes-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- configurator-oproep: oranje, met de drie stappen ---------- */
.vier-configurator { background: var(--oranje); background-image: var(--vlak-oranje); color: var(--bruin); padding: 5rem var(--rand) 5.5rem; }
.vconf__binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 3.5rem; align-items: center; }
.vconf__tekst .label { color: var(--bruin); }
.vconf__tekst .kop-breed { color: var(--bruin); font-size: clamp(3rem, 7vw, 6rem); }
.vconf__tekst .streepjes { color: var(--wit); }
.vconf__lead { margin-top: 1.5rem; font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 85%; text-transform: uppercase; font-size: 1.7rem; letter-spacing: -.01em; color: var(--wit); }
.vconf__body { max-width: 46ch; margin: .9rem 0 1.75rem; font-weight: 500; }
.vconf__tekst .knop--bruin { --vul: var(--wit); }
.vconf__tekst .knop--bruin:hover, .vconf__tekst .knop--bruin:focus-visible { color: var(--bruin); border-color: var(--wit); }
.vconf__stappen { list-style: none; border-top: 2px solid var(--bruin); }
.configurator-step { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 2px solid var(--bruin); }
.configurator-step__num { font-family: var(--kop); font-weight: 900; font-size: 3.4rem; line-height: .9; letter-spacing: -.02em; color: var(--wit); -webkit-text-stroke: .015em currentColor; }
.configurator-step__text { font-size: 1.15rem; font-weight: 500; }
@media (min-width: 861px) { .vconf__binnen { grid-template-columns: 1.1fr 1fr; gap: 5rem; } }

/* ---------- veelgestelde vragen ---------- */
.vier-faq { padding: 5rem var(--rand) 5.5rem; }
.vfaq__binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 3rem; align-items: start; }
.vfaq__links .kop-smal { font-size: clamp(2.8rem, 5.6vw, 4.6rem); }
.vfaq__note { max-width: 34ch; margin: 1.5rem 0 1.75rem; }
.faq-list { border-bottom: 2px solid var(--bruin); }
.faq-item { border-top: 2px solid var(--bruin); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  list-style: none; cursor: pointer;
  padding: 1.25rem 0;
  font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.2;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 22px; height: 22px; color: var(--oranje-diep);
  background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--oranje-diep); }
.faq-answer { max-width: 62ch; padding: 0 0 1.5rem; font-size: 1.08rem; color: var(--bruin-zacht); }
.faq-answer a { color: var(--oranje-diep); font-weight: 600; }
@media (min-width: 861px) {
  .vfaq__binnen { grid-template-columns: .8fr 1.3fr; gap: 5rem; }
  .vfaq__links { position: sticky; top: 2rem; }
}

/* ---------- slot: groen (sluit aan op de afscheurrand van de voet) ---------- */
.vier-cta { background: var(--groen); background-image: var(--vlak-groen); color: var(--wit); padding: 5rem var(--rand) 6.5rem; }
.vcta__binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 3.5rem; align-items: center; }
.vcta__tekst .label { color: var(--oranje); }
.vcta__tekst .kop-breed { color: var(--wit); font-size: clamp(2.8rem, 6vw, 5.2rem); }
.vcta__lead { margin-top: 1.5rem; font-family: "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-stretch: 85%; text-transform: uppercase; font-size: 1.7rem; letter-spacing: -.01em; color: var(--oranje); }
.vcta__body { max-width: 46ch; margin: .9rem 0 2rem; }
.vcta__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.vcta__acties .onderstreept { color: var(--wit); }
.vcta__beeld { position: relative; }
.vcta__foto { --vorm: polygon(3% 0, 100% 3%, 97% 100%, 0 96%); transform: rotate(1.5deg); }
.vcta__foto img { aspect-ratio: 4 / 3.4; }
@media (min-width: 861px) { .vcta__binnen { grid-template-columns: 1.1fr 1fr; gap: 5rem; } }

/* ---------- boekbalk: meelopende weg naar de configurator ---------- */
.boekbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--nacht); background-image: var(--vlak-bruin); color: var(--wit);
  padding: .75rem var(--rand) max(.75rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem clamp(1rem, 3vw, 2.5rem);
  box-shadow: 0 -8px 30px rgba(10, 5, 1, .35);
  border-top: 3px solid var(--oranje);
  transform: translateY(115%);
  /* onzichtbaar voor toetsenbord en schermlezer zolang hij weg is */
  visibility: hidden;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s;
}
.boekbalk.is-zichtbaar { transform: translateY(0); visibility: visible; transition: transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.boekbalk__tekst { font-family: var(--nav); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.boekbalk__sub { display: block; font-family: var(--tekst); font-weight: 400; font-size: .9rem; color: rgba(255, 248, 239, .75); }
.boekbalk__cta { flex: none; }
@media (max-width: 680px) {
  .boekbalk { padding-top: .6rem; }
  .boekbalk__tekst { display: none; }
  .boekbalk__cta { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .boekbalk { transition: none; } }

/* de data-in-animatie is niet nodig op dichte tekstvlakken: laat die gewoon staan */
html.anim .pricing-row[data-in], html.anim .zaal-features[data-in], html.anim .hapjes-block[data-in], html.anim .vconf__stappen[data-in], html.anim .vier-ruimte__gallery[data-in], html.anim .occasions-grid[data-in] { translate: 0 0; }
html.anim .vier-ruimte__gallery[data-in] > .lijst { opacity: 0; scale: .85; rotate: -5deg; transition: opacity .45s ease, scale .75s cubic-bezier(.34, 1.56, .64, 1), rotate .75s cubic-bezier(.34, 1.56, .64, 1); }
html.anim .vier-ruimte__gallery[data-in].is-in > .lijst { opacity: 1; scale: 1; rotate: 0deg; }
html.anim .occasions-grid[data-in] > * { opacity: 0; translate: 0 50px; transition: opacity .6s ease, translate .8s cubic-bezier(.2, .8, .2, 1); }
html.anim .occasions-grid[data-in].is-in > * { opacity: 1; translate: 0 0; }
html.anim .occasions-grid[data-in] { opacity: 1; }
html.anim .vhero__beeld[data-in], html.anim .vintro__beeld[data-in], html.anim .vcta__beeld[data-in] { translate: 0 0; opacity: 1; }
html.anim .vhero__beeld[data-in] > .lijst, html.anim .vintro__beeld[data-in] > .lijst, html.anim .vcta__beeld[data-in] > .lijst, html.anim .vhero__beeld[data-in] > .sticker {
  opacity: 0; scale: .82; rotate: -6deg;
  transition: opacity .45s ease, scale .75s cubic-bezier(.34, 1.56, .64, 1), rotate .75s cubic-bezier(.34, 1.56, .64, 1);
}
html.anim .vhero__beeld[data-in].is-in > .lijst, html.anim .vintro__beeld[data-in].is-in > .lijst, html.anim .vcta__beeld[data-in].is-in > .lijst, html.anim .vhero__beeld[data-in].is-in > .sticker { opacity: 1; scale: 1; rotate: 0deg; }

/* ============================================================
   2. OFFERTE.HTML (configurator)
   De inline stijl van de pagina blijft de lay-out dragen (kalender,
   schuifbalken, stappers, samenvatting). Hier staan de oude tokens
   vertaald naar de nieuwe stijl, plus overrides voor wat er zichtbaar
   anders uitziet. Dit bestand wordt NA de inline stijl geladen.
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

body.pagina-offerte {
  /* de oude tokens van style.css, in de kleuren en letters van de nieuwe stijl */
  --orange: var(--oranje);
  --orange-dark: var(--oranje-diep);
  --cream: var(--creme);
  --brown: var(--bruin);
  --off-white: var(--papier);
  --font-serif: "Zus Kop", "Arial Black", sans-serif;
  --font-accent: var(--tekst);
  --font-sans: var(--tekst);
  --radius-sm: 4px; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --space-xs: .5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --space-2xl: 12rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* de kop scrolt gewoon mee (niet meer fixed): de voortgangsbalk plakt tegen de bovenrand */
  --of-nav-h: 0px;
  font-size: 1rem;
}
@media (max-width: 700px) { body.pagina-offerte { --of-nav-h: 0px; } }
.pagina-offerte .of-hero__title em, .pagina-offerte .of-step__title em, .pagina-offerte .of-summary__title em,
.pagina-offerte .of-vooraf__titel em, .pagina-offerte .of-success__title em, .pagina-offerte .of-cta__title em { font-style: normal; text-transform: uppercase; }

/* knoppen die de pagina zelf nog als .btn maakt, in de stijl van .knop */
.btn {
  position: relative; overflow: hidden; isolation: isolate; --vul: var(--bruin);
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  font-family: var(--nav); font-weight: 700; font-size: 1.1rem; line-height: 1; text-decoration: none;
  padding: .9rem 1.6rem; min-height: 48px; border-radius: 0; border: 2px solid currentColor; cursor: pointer;
  background: transparent; color: var(--bruin);
  transition: color .25s .12s, border-color .25s .1s;
}
.btn::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -20%; width: 140%; background: var(--vul); clip-path: polygon(0 0, 100% 0, calc(100% - 1.4em) 100%, 0 100%); transform: translateX(-101%); transition: transform .5s cubic-bezier(.77, 0, .18, 1); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn--primary { background: var(--oranje); border-color: var(--oranje); color: var(--wit); }
.btn--primary:hover { color: var(--wit); border-color: var(--bruin); }
.btn--outline-dark, .btn--dark { color: var(--bruin); --vul: var(--bruin); }
.btn--outline-dark:hover, .btn--dark:hover { color: var(--wit); border-color: var(--bruin); }
.btn--ghost { color: var(--wit); --vul: var(--oranje); }
.btn--ghost:hover { border-color: var(--oranje); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- hero: oranje vlak, kop links, de volle zaal rechts ---------- */
.pagina-offerte .of-hero { height: auto; min-height: 0; display: block; overflow: visible; background: var(--oranje); background-image: var(--vlak-oranje); color: var(--bruin); padding: 3rem var(--rand) 4.5rem; }
.pagina-offerte .of-hero__binnen { max-width: var(--breed); margin: 0 auto; display: grid; gap: 3rem; align-items: center; }
.pagina-offerte .of-hero__content { position: static; max-width: none; margin: 0; padding: 0; gap: 0; display: block; }
.pagina-offerte .of-hero__label { border: 0; padding: 0; border-radius: 0; margin-bottom: .9rem; font-family: var(--nav); font-weight: 700; font-size: .85rem; letter-spacing: .16em; color: var(--bruin); }
.pagina-offerte .of-hero__title { font-family: var(--kop); color: var(--bruin); font-size: clamp(3.2rem, 7.6vw, 6.8rem); line-height: .86; max-width: none; letter-spacing: -.01em; }
.pagina-offerte .of-hero__title .streepjes { color: var(--wit); }
.pagina-offerte .of-hero__sub { color: var(--bruin); font-family: var(--tekst); font-weight: 500; font-size: 1.2rem; max-width: 40ch; margin-top: 1.75rem; }
.pagina-offerte .of-hero__bg { position: relative; inset: auto; }
.pagina-offerte .of-hero__lijst { --vorm: polygon(0 3%, 100% 0, 97% 100%, 2% 96%); transform: rotate(1.2deg); }
.pagina-offerte .of-hero__img { width: 100%; height: auto; aspect-ratio: 3 / 2.2; object-fit: cover; object-position: 50% 40%; transform: none; transition: none; }
@media (min-width: 861px) { .pagina-offerte .of-hero__binnen { grid-template-columns: 1.15fr 1fr; gap: 4rem; } .pagina-offerte .of-hero { padding: 4.5rem var(--rand) 5rem; } }

/* ---------- voortgang: papieren balk met genummerde stappen ---------- */
.pagina-offerte .of-progress { background: var(--papier); background-image: var(--vlak-papier); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 2px solid var(--bruin); }
.pagina-offerte .of-progress__inner { max-width: var(--breed); padding-left: var(--rand); padding-right: var(--rand); }
.pagina-offerte .of-progress__item { font-family: var(--nav); font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--bruin); border-radius: 0; }
.pagina-offerte .of-progress__item:hover { color: var(--oranje-diep); }
.pagina-offerte .of-progress__item.is-active { background: var(--oranje); border-color: var(--oranje); color: var(--wit); }
.pagina-offerte .of-progress__num { font-family: var(--nav); font-size: 1rem; color: var(--oranje-diep); }
.pagina-offerte .of-progress__item.is-active .of-progress__num { color: var(--wit); }
@media (max-width: 700px) {
  .pagina-offerte .of-progress__item.is-active { background: none; border-color: transparent; }
  .pagina-offerte .of-progress__num { border-radius: 0; }
  .pagina-offerte .of-progress__item.is-active .of-progress__num { background: var(--oranje); border-color: var(--oranje); color: var(--wit); }
}

/* ---------- de stappen ---------- */
.pagina-offerte .of-config { background: var(--creme); background-image: var(--vlak-papier); }
.pagina-offerte .of-config__inner { max-width: var(--breed); padding-left: var(--rand); padding-right: var(--rand); }
.pagina-offerte .of-step { background: var(--wit); border: 0; box-shadow: 0 10px 22px rgba(23, 18, 14, .12); }
.pagina-offerte .of-step__num { color: var(--oranje-diep); }
.pagina-offerte .of-step__title { font-stretch: 85%; letter-spacing: -.01em; font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.pagina-offerte .of-step__title em { color: var(--oranje-diep); font-size: 1em; }
.pagina-offerte .of-step__intro { font-size: .98rem; color: var(--bruin-zacht); }
.pagina-offerte .of-opt__box { background: var(--papier); border: 2px solid rgba(23, 18, 14, .15); }
.pagina-offerte .of-opt__name { font-stretch: 85%; letter-spacing: -.005em; font-size: 1.35rem; }
.pagina-offerte .of-opt__desc { font-weight: 400; font-size: .88rem; color: var(--bruin-zacht); }
.pagina-offerte .of-opt__icon { font-size: 0; line-height: 0; }
.pagina-offerte .of-opt__icon .ikoon { width: 54px; height: 54px; color: var(--oranje-diep); }
.pagina-offerte .of-opt:hover .of-opt__box { transform: none; }
.pagina-offerte .of-opt__input:checked + .of-opt__box { border-color: var(--oranje); background: rgba(232, 84, 30, .09); }
.pagina-offerte .of-opt__price { color: var(--oranje-diep); font-weight: 600; }
.pagina-offerte .of-arr__tag { border-radius: 0; }

/* ---------- prijsoverzicht: nachtzwart, zoals "Jouw feest" in de mockup ---------- */
.pagina-offerte .of-summary, .pagina-offerte .of-recap { background: var(--nacht); background-image: var(--vlak-bruin); }
.pagina-offerte .of-summary__title { font-stretch: 85%; font-size: 2rem; color: var(--wit); }
.pagina-offerte .of-summary__title em { color: var(--oranje); font-size: 1em; }
.pagina-offerte .of-summary__eyebrow { font-family: var(--nav); font-size: .75rem; letter-spacing: .16em; }
.pagina-offerte .of-sline__label { font-size: .95rem; }
.pagina-offerte .of-sline__detail { font-size: .78rem; color: rgba(255, 248, 239, .55); }
.pagina-offerte .of-summary__total-label { font-family: var(--nav); font-size: .8rem; }
.pagina-offerte .of-summary__total-value, .pagina-offerte .of-recap__total, .pagina-offerte .of-summary__toggle-total { color: var(--oranje); font-stretch: 85%; }
.pagina-offerte .of-minibtn { border-radius: 0; font-family: var(--nav); font-weight: 700; font-size: .85rem; }
.pagina-offerte .of-summary__toggle-arrow { border-radius: 0; font-family: var(--nav); font-weight: 700; }
.pagina-offerte .of-summary__disclaimer { color: rgba(255, 248, 239, .6); font-size: .78rem; }
@media (max-width: 1100px) { .pagina-offerte .of-summary { border-top: 3px solid var(--oranje); } }

/* ---------- verstuurknop, melding vooraf, succes ---------- */
.pagina-offerte .of-vooraf__paneel, .pagina-offerte .of-success { border-radius: 0; }
.pagina-offerte .of-vooraf__titel, .pagina-offerte .of-success__title { font-stretch: 85%; }
.pagina-offerte .of-vooraf__titel em, .pagina-offerte .of-success__title em { color: var(--oranje-diep); }
.pagina-offerte .of-success__icon { border-radius: 0; }

/* ---------- slot: groen, sluit aan op de afscheurrand van de voet ---------- */
.pagina-offerte .of-cta { background: var(--groen); background-image: var(--vlak-groen); color: var(--wit); padding: 5rem var(--rand) 6.5rem; }
.pagina-offerte .of-cta__inner { max-width: var(--breed); margin: 0 auto; display: grid; gap: 2.5rem; align-items: center; padding: 0; }
.pagina-offerte .of-cta__title { font-family: var(--kop); color: var(--wit); font-size: clamp(2.8rem, 6vw, 5rem); max-width: none; }
.pagina-offerte .of-cta__title .streepjes { color: var(--oranje); }
.pagina-offerte .of-cta__body { color: rgba(255, 248, 239, .9); font-size: 1.15rem; max-width: 46ch; margin-top: 1.5rem; }
.pagina-offerte .of-cta__actions { gap: 1rem 1.25rem; align-items: center; }
@media (min-width: 861px) { .pagina-offerte .of-cta__inner { grid-template-columns: 1.3fr 1fr; gap: 4rem; } }

/* ---------- afdrukken: kop en voet van de site horen niet op het offerteblad ---------- */
@media print {
  .kop, .voet, .skip { display: none !important; }
  body.pagina-offerte { background-image: none !important; }
}

/* ============================================================
   3. OPTIE.HTML (accepteerpagina)
   Staat los van zus.css (zie boven) en heeft dus eigen waarden. Een
   pagina met een taak: geen site-menu, wel het logo-bordje, de letters,
   de kleuren en de pilknop van de rest van de site. Er wordt niets van
   buiten geladen (het adres van deze pagina draagt het token van een gast).
   ============================================================ */
body.optie {
  --orange: #E8541E;
  --orange-dark: #A93B14;
  --cream: #FBF2E6;
  --brown: #17120E;
  --kaart: #FFF8EF;
  --rand: #E3D2BC;
  --zacht: #4B433C;          /* 8,4:1 op papier */
  --accent: #B23F14;         /* oranje als tekst en knop: 5,2:1 met wit, 5,0:1 op de kaart */
  --accent-vlak: #FBEADD;
  --font-display: "Zus Kop", "Arial Black", sans-serif;
  --font-sans: "Zus Tekst", system-ui, -apple-system, "Segoe UI", sans-serif;
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.10'/%3E%3C/svg%3E");
  background: #FBF2E6;
  background-image: var(--korrel);
  font-size: 1.1rem;
  line-height: 1.5;
}
body.optie .wrap { padding-top: 2rem; }

/* het logo als oranje bordje, licht scheef, zoals in de kop van de site */
body.optie .merk {
  position: relative; display: inline-block; min-height: 0;
  margin: .4rem 0 2rem; padding: 14px 18px 16px;
  background: var(--orange); outline: 1.5px solid rgba(255, 248, 239, .7); outline-offset: -6px;
  box-shadow: 0 14px 28px rgba(20, 10, 4, .3);
  transform: rotate(-2.5deg); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
body.optie .merk:hover { transform: rotate(0); }
body.optie .merk__logo { height: 54px; filter: brightness(0) invert(1) sepia(.15); }
body.optie .merk__naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* de kaart: wit briefje met een stuk ducttape, geen afgeronde hoeken */
body.optie .kaart { position: relative; border: 0; border-radius: 0; padding: 2.1rem 1.5rem 1.7rem; box-shadow: 0 14px 28px rgba(23, 18, 14, .14); }
body.optie .kaart::before {
  content: ""; position: absolute; z-index: 2; width: 108px; height: 28px; top: -13px; left: 50%; margin-left: -54px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .08)), #B9B4AC;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transform: rotate(-3deg); opacity: .92;
  clip-path: polygon(0 8%, 4% 0, 7% 12%, 3% 30%, 6% 48%, 2% 66%, 5% 84%, 1% 100%, 99% 100%, 95% 88%, 99% 70%, 96% 52%, 100% 34%, 96% 16%, 99% 0, 100% 6%);
}
body.optie .teken { border-radius: 0; transform: rotate(-3deg); }
body.optie .eyebrow { font-family: "Zus Nav", sans-serif; font-size: .9rem; letter-spacing: .16em; }
body.optie h1 { font-weight: 900; font-stretch: 88%; letter-spacing: -.015em; line-height: .98; font-size: clamp(2.1rem, 9vw, 2.9rem); }
body.optie .inleiding { color: var(--zacht); }

/* de datumkaart: een oranje vlak met korrel, de dag in het groot */
body.optie .dag { border: 0; border-radius: 0; background: var(--orange); background-image: var(--korrel); padding: 1.3rem 1.1rem 1.4rem; transform: rotate(-1deg); box-shadow: 0 10px 22px rgba(23, 18, 14, .18); }
body.optie .dag__weekdag { font-family: "Zus Nav", sans-serif; font-size: .95rem; color: var(--brown); }
body.optie .dag__nummer { font-family: "Tante Zus Display", "Zus Kop", "Arial Black", sans-serif; font-weight: 900; font-size: clamp(4rem, 22vw, 6rem); color: #FFF8EF; -webkit-text-stroke: .015em currentColor; }
body.optie .dag__maand { font-family: "Zus Nav", sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--brown); }
body.optie .dag__tijd { color: var(--brown); font-weight: 500; }

body.optie .spec, body.optie .spec__rij, body.optie .gebeurt { border-color: var(--rand); }
body.optie .spec__rij { font-size: 1.05rem; }
body.optie .spec__detail { font-size: .92rem; }
body.optie .totaal__label, body.optie .gebeurt__kop { font-family: "Zus Nav", sans-serif; font-size: .9rem; letter-spacing: .14em; }
body.optie .totaal__bedrag { font-family: "Zus Kop", "Arial Black", sans-serif; font-stretch: 88%; font-size: 2.3rem; }
body.optie .termijn { border-radius: 0; border: 0; border-left: 5px solid var(--orange); background: var(--accent-vlak); }

/* de knop: dezelfde oranje pil als op de rest van de site, met de schuine veeg */
body.optie .knop {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 0; background: var(--accent); color: #FFF8EF;
  font-family: "Zus Nav", sans-serif; font-size: 1.25rem; letter-spacing: .01em;
}
body.optie .knop::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -20%; width: 140%; background: var(--brown); clip-path: polygon(0 0, 100% 0, calc(100% - 1.4em) 100%, 0 100%); transform: translateX(-101%); transition: transform .5s cubic-bezier(.77, 0, .18, 1); }
body.optie .knop:hover:not(:disabled)::before { transform: translateX(0); }
body.optie .knop:hover:not(:disabled) { background: var(--accent); }
body.optie .gebeurt li::before { border-radius: 0; background: var(--orange); transform: rotate(45deg); }

/* de uitweg onderaan: een kassabon met stippellijn */
body.optie .hulp { border: 0; border-top: 3px dotted var(--brown); border-bottom: 3px dotted var(--brown); border-radius: 0; background: transparent; padding: 1.4rem .5rem 1.3rem; }
body.optie .hulp__kop { font-family: "Zus Kop", "Arial Black", sans-serif; font-stretch: 88%; font-size: 1.35rem; letter-spacing: .01em; }
body.optie .voet { color: var(--zacht); }
body.optie .terug { font-family: "Zus Nav", sans-serif; }
body.optie .laden { color: var(--zacht); }

/* Op de telefoon zweeft de menuknop rechtsboven; de stappenbalk laat daar ruimte. */
@media (max-width: 860px) {
  .pagina-offerte .of-progress { padding-right: calc(var(--rand) + 52px); }
}
.pagina-offerte .of-cal__nav { border-radius: 0; }