/* Verkooppagina's van de Epodex-planners: de pagina volgt het verloop van de klus. Eindstand is de standaard; animaties alleen onder html.anim. */
html { font-size: clamp(16px, calc(8px + .58vw), 18px); overflow-x: clip; }
body { font-size: 1rem; }
.wrap { max-width: 71.25rem; }
.vk { --dag: #e3e3de; --dag2: #eeeeea; --mid: #c9cbc6; --donker: #0b4a55; --nacht: #06262c; --accent: #f2a33a; --accent-inkt: #2a1a04; --kern: #0b4a55; --inkt: #172326; --zacht: #4e5c5f; --rand: #d9dcd8; color: var(--inkt); font-size: 1rem; line-height: 1.6; }
.vk-pro { --dag: #eef2f6; --dag2: #e3eaf1; --mid: #bccbda; --donker: #12304f; --nacht: #0a1c30; --accent: #f4c430; --accent-inkt: #231b02; --kern: #12304f; --inkt: #0f2238; --zacht: #4a5b6d; --rand: #d6dfe7; }
.vk .binnen { width: min(100% - 2.5rem, 84rem); margin-inline: auto; }
.vk h1, .vk h2, .vk h3 { font-family: Gabarito, system-ui, sans-serif; text-wrap: balance; color: inherit; }
.vk h1 { font-size: clamp(2.5rem, 4.7vw, 5.4rem); line-height: 1.03; letter-spacing: -.015em; margin: .3em 0 .35em; color: var(--kern); }
.vk h2 { font-size: clamp(1.9rem, 3vw, 3.1rem); line-height: 1.1; margin: 0 0 .45em; }
.vk .knop { display: inline-block; background: var(--kern); color: #fff; padding: .9em 1.5em; border-radius: .7rem; font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.vk .terug { font-size: .92rem; color: var(--zacht); }
.vk :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.vk .held { background: linear-gradient(180deg, var(--dag), var(--dag) 85%, var(--dag2)); padding: clamp(2rem, 6vh, 4.5rem) 0 clamp(3rem, 7vh, 6rem); }
.held-rooster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.merkband { display: inline-flex; flex-wrap: wrap; gap: .6em; align-items: baseline; margin: 1rem 0 0; font-size: .9rem; color: var(--zacht); }
.merkband b { background: var(--kern); color: #fff; padding: .15em .6em; border-radius: .3rem; letter-spacing: .03em; }
.vk .lead { font-size: 1.15rem; max-width: 34em; margin: 0 0 1.4em; }
.knoppen { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.prijsje { font-size: .95rem; }
.klein-noot { font-size: .84rem; color: var(--zacht); margin: 1.1rem 0 0; }
.held-toneel { position: relative; min-height: min(30rem, calc(100vh - 8rem)); display: grid; place-items: center; }
.scherm { margin: 0; width: 100%; max-width: 34rem; border: .5rem solid #14191b; border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 1.6rem 3.2rem rgba(10, 30, 35, .3); transform: rotate(-1.2deg); }
.scherm img { display: block; width: 100%; height: auto; }
.plakker { position: absolute; margin: 0; padding: .45em .95em; border-radius: .5rem; background: var(--accent); color: var(--accent-inkt); font-weight: 600; font-size: .95rem; white-space: nowrap; box-shadow: 0 .5rem 1.1rem rgba(10, 30, 35, .25); }
.plakker.a { left: -1%; top: 6%; rotate: -3deg; } .plakker.b { right: -1%; top: 18%; rotate: 2deg; background: var(--kern); color: #fff; } .plakker.c { left: 1%; bottom: 14%; rotate: 2deg; background: var(--kern); color: #fff; } .plakker.d { right: 1%; bottom: 4%; rotate: -2deg; }
.bubbel, .teller { display: none; }
.anim .bubbel { display: block; position: absolute; left: var(--x); top: var(--y); margin: 0; padding: .55em .9em; max-width: 15rem; background: #fff; color: var(--inkt); border-radius: .7rem; box-shadow: 0 .4rem 1rem rgba(10, 30, 35, .16); font-size: .95rem; font-weight: 500; line-height: 1.3; opacity: 0; z-index: 3; animation: vk-pop .34s cubic-bezier(.2, 1.3, .4, 1) forwards paused; animation-delay: calc(var(--i) * .22s + .15s); }
.anim .loopt .bubbel { animation-play-state: running; }
.anim .teller { display: block; position: absolute; top: -1.6rem; left: 0; margin: 0; font-weight: 600; color: var(--kern); }
@keyframes vk-pop { from { opacity: 0; transform: scale(.7) translateY(.6rem); } to { opacity: 1; transform: none; } }
.anim .held-toneel:not(.opgelost) .scherm { opacity: 0; transform: translateY(2rem) rotate(-1.2deg) scale(.94); }
.anim .held-toneel .scherm { transition: opacity .55s ease, transform .75s cubic-bezier(.2, 1.1, .3, 1); }
.anim .held-toneel:not(.opgelost) .plakker { opacity: 0; scale: .6; }
.anim .held-toneel .plakker { transition: opacity .3s ease, scale .35s cubic-bezier(.2, 1.4, .4, 1); }
.anim .opgelost .plakker.a { transition-delay: .45s; } .anim .opgelost .plakker.b { transition-delay: .6s; } .anim .opgelost .plakker.c { transition-delay: .75s; } .anim .opgelost .plakker.d { transition-delay: .9s; }
.anim .opgelost .bubbel { animation: vk-weg .42s ease-in forwards; animation-delay: calc(var(--i) * .03s); opacity: 1; }
.anim .opgelost .teller { opacity: 0; transition: opacity .3s; }
@keyframes vk-weg { to { opacity: 0; left: 42%; top: 45%; transform: scale(.25); } }

.stop { padding: clamp(3.5rem, 9vh, 7rem) 0; }
.stop-rooster { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start; }
.moment { position: sticky; top: 5.5rem; margin: 0; font: 700 clamp(1.5rem, 2.3vw, 2.4rem)/1.08 Gabarito, system-ui, sans-serif; padding-left: 1rem; border-left: .24rem solid var(--accent); color: var(--kern); }
.stukken { display: grid; gap: clamp(4rem, 11vh, 8rem); min-width: 0; }
.stuk { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center; }
.stuk.breed { grid-template-columns: minmax(0, 1fr); }
.uitleg p { margin: 0; font-size: 1.08rem; max-width: 34em; }
.s1 { background: linear-gradient(180deg, var(--dag2), var(--dag2) 80%, var(--mid)); }
.s2 { background: linear-gradient(180deg, var(--mid), var(--mid) 70%, var(--donker)); }
.s3 { background: linear-gradient(180deg, var(--donker), var(--donker) 82%, var(--nacht)); color: #eef4f3; }
.s3 h2 { color: #fff; }
.s3 .moment, .finale .moment { color: var(--accent); }
.s3 .uitleg p { color: #cfdedd; }
.finale { background: var(--nacht); color: #eef4f3; }
.finale .moment { position: static; display: inline-block; margin-bottom: 2rem; }
.finale-rij { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.slot-tekst h2 { font-size: clamp(2.1rem, 3.8vw, 4rem); color: #fff; }
.slot-tekst p { color: #cfdedd; font-size: 1.1rem; margin: 0 0 1.4rem; }
.finale .knop, .prijsvak .knop { background: var(--accent); color: var(--accent-inkt); }

.paneel { background: #fff; color: var(--inkt); border-radius: 1rem; padding: 1.4rem; box-shadow: 0 1.1rem 2.6rem rgba(10, 30, 35, .15); min-width: 0; }
.paneel h3 { margin: 1rem 0 .4rem; font-size: 1.1rem; } .paneel h3:first-child { margin-top: 0; }
.voetnoot { font-size: .84rem; color: var(--zacht); margin: .9rem 0 0; }
.finale .voetnoot { color: #a9bcbb; }
.rekenrijen { margin: 0; }
.rekenrijen > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rand); }
.rekenrijen dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.rekenrijen .vet { font-weight: 700; }
.schuif { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .3rem; font-weight: 600; }
.paneel .schuif:first-child { margin-top: 0; }
.schuif output { font: 700 1.5rem Gabarito, system-ui, sans-serif; color: var(--kern); }
.reken input[type="range"] { width: 100%; height: 2rem; accent-color: var(--kern); cursor: pointer; margin: 0 0 .4rem; }
.schakel { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0; cursor: pointer; font-size: .96rem; }
.schakel input { width: 1.2rem; height: 1.2rem; accent-color: var(--kern); flex: none; margin-top: .15rem; }
.vulling { height: .8rem; background: #e9eceb; border-radius: 999px; overflow: hidden; margin: .9rem 0 .4rem; }
.vulling i { display: block; height: 100%; width: var(--deel); background: var(--accent); border-radius: inherit; transition: width .25s ease; }
.grootprijs { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .4rem 1rem; margin: .7rem 0 0; }
.grootprijs small { font-size: .9rem; color: var(--zacht); }
.grootprijs b { font: 700 clamp(1.9rem, 3vw, 2.6rem) Gabarito, system-ui, sans-serif; color: var(--kern); font-variant-numeric: tabular-nums; }

.keuzelijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.keuzelijst li { background: #fff; color: var(--inkt); padding: .85rem 1rem; border-radius: .7rem; display: flex; gap: .8rem; align-items: center; font-weight: 500; box-shadow: 0 .4rem 1.1rem rgba(10, 30, 35, .08); }
.keuzelijst u { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #e4e8e6; text-decoration: none; font-size: .88rem; flex: none; }
.keuzelijst .aan { outline: .14rem solid var(--kern); }
.keuzelijst .aan u { background: var(--kern); color: #fff; }
.anim [data-toon] > .keuzelijst li, .anim .keuzelijst li { opacity: 0; translate: 2rem 0; transition: opacity .35s ease, translate .45s cubic-bezier(.2, 1.1, .3, 1); transition-delay: calc(var(--i) * .15s); }
.anim .keuzelijst.in li { opacity: 1; translate: 0; }
.afvink { list-style: none; margin: 0; padding: 0; }
.afvink li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--rand); }
.afvink li::before { content: "✓"; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: .3rem; font-size: .8rem; background: var(--kern); color: #fff; }
.afvink b { color: var(--kern); font-weight: 600; font-size: .86rem; }
.anim .lijstje .afvink li::before { background: #fff; color: transparent; box-shadow: inset 0 0 0 .1rem #b5bfbd; transition: background .25s, color .25s; transition-delay: calc(var(--i) * .4s + .4s); }
.anim .lijstje.in .afvink li::before { background: var(--kern); color: #fff; }

.boek { list-style: none; margin: 0; padding: 1.3rem 1.4rem; background: #fff; color: var(--inkt); border-radius: 1rem; box-shadow: 0 1.1rem 2.6rem rgba(10, 30, 35, .18); display: grid; gap: .75rem; }
.boek li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .7rem; }
.boek time { color: var(--kern); font-weight: 700; font-variant-numeric: tabular-nums; }
.boek .pauze { background: #fdf3df; margin-inline: -.6rem; padding: .5rem .6rem; border-radius: .5rem; }
.anim .boek li { opacity: 0; translate: -1rem 0; transition: opacity .35s ease, translate .4s ease; transition-delay: calc(var(--i) * .3s); }
.anim .boek.in li { opacity: 1; translate: 0; }

.balk-tijd { position: relative; display: flex; height: 4.2rem; border-radius: .7rem; overflow: hidden; background: #123c44; margin-top: 2rem; }
.balk-tijd span { display: grid; place-items: center; font-size: .92rem; text-align: center; padding: 0 .3rem; min-width: 0; }
.wacht { width: 40%; background: repeating-linear-gradient(135deg, #2c6470 0 .6rem, #225460 .6rem 1.2rem); }
.open { width: 50%; background: var(--accent); color: var(--accent-inkt); justify-items: end; padding-right: .7rem !important; }
.laat { width: 10%; background: #b5442c; color: #fff; }
.venster { position: relative; }
.prik { position: absolute; left: var(--plek); top: 0; bottom: 0; width: .2rem; background: #fff; font-style: normal; }
.prik b { position: absolute; left: 50%; bottom: 100%; translate: -50% 0; background: #fff; color: var(--inkt); padding: .05em .5em; border-radius: .3rem; font-size: .8rem; white-space: nowrap; }
.venster .balk-tijd { overflow: visible; }
.schaal { position: relative; height: 1.5rem; margin: .4rem 0 0; font-size: .84rem; color: #cfdedd; }
.schaal span { position: absolute; translate: 0 0; white-space: nowrap; }
.schaal span + span { translate: -50% 0; }
.anim .venster .balk-tijd span { clip-path: inset(0 100% 0 0); transition: clip-path .7s ease; }
.anim .venster .open { transition-delay: .6s !important; } .anim .venster .laat { transition-delay: 1.2s !important; }
.anim .venster.in .balk-tijd span { clip-path: inset(0); }
.anim .prik { opacity: 0; transition: opacity .3s ease 1.9s; } .anim .venster.in .prik { opacity: 1; }

.vloer { position: relative; aspect-ratio: 16 / 9; border-radius: .8rem; overflow: hidden; background: repeating-linear-gradient(90deg, #8a8d8a 0 .3rem, #8f928f .3rem .6rem), #8d908d; transform: perspective(50rem) rotateX(38deg); transform-origin: bottom; box-shadow: 0 2rem 3rem rgba(0, 0, 0, .55); }
.laag { position: absolute; inset: 0; }
.laag.een { background: #5f7f83; }
.laag.twee { background: linear-gradient(105deg, #0f6c79, #0a525d 55%, #0f6c79); }
.glans { position: absolute; inset: -20% -40%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%); }
.anim .laag { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.4, 0, .3, 1); }
.anim .laag.twee { transition-delay: 1.1s; }
.anim .finale-rij.in .laag { clip-path: inset(0); }
.anim .glans { translate: -60% 0; transition: translate 1.3s ease 2.2s; } .anim .finale-rij.in .glans { translate: 60% 0; }

.plan { background: repeating-linear-gradient(0deg, rgba(18, 48, 79, .07) 0 1px, transparent 1px 1.4rem), repeating-linear-gradient(90deg, rgba(18, 48, 79, .07) 0 1px, transparent 1px 1.4rem), #fff; border-radius: 1rem; padding: 2.6rem 2.8rem 1.2rem; box-shadow: 0 1.1rem 2.6rem rgba(10, 30, 35, .15); color: var(--inkt); }
.ruimte { position: relative; max-width: 15rem; aspect-ratio: 1; margin: 0 auto; border: .24rem solid var(--kern); display: grid; place-items: center; background: rgba(244, 196, 48, .2); font-size: 1rem; text-align: center; }
.maat { position: absolute; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.m-b { top: -1.6rem; left: 50%; translate: -50% 0; } .m-h { right: -3.3rem; top: 50%; translate: 0 -50%; }
.plansom { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin: 1.3rem 0 0; }
.plansom b { color: var(--kern); }
.anim .ruimte { clip-path: inset(0 100% 100% 0); transition: clip-path 1s ease; overflow: visible; }
.anim .plan.in .ruimte { clip-path: inset(-3rem -5rem -3rem -5rem); }

.gantt { display: grid; gap: .6rem; background: rgba(255, 255, 255, .07); padding: 1.3rem; border-radius: 1rem; }
.gantt > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .7rem; align-items: center; font-size: .95rem; }
.gantt i { display: block; height: 1.05rem; border-radius: .3rem; margin-left: var(--van); width: var(--lang); background: var(--accent); }
.anim .gantt i { scale: 0 1; transform-origin: left; transition: scale .55s cubic-bezier(.2, .9, .3, 1); transition-delay: calc(var(--i) * .28s); }
.anim .gantt.in i { scale: 1 1; }
.afrekening { display: grid; gap: .9rem; }
.afrekening > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.afrekening i { display: block; height: 1.7rem; border-radius: .35rem; width: var(--deel); background: #456684; }
.afrekening .echt i { background: var(--accent); }
.afrekening b { font-variant-numeric: tabular-nums; }
.anim .afrekening i { scale: 0 1; transform-origin: left; transition: scale 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .5s); }
.anim .finale-rij.in .afrekening i { scale: 1 1; }

.rust { background: var(--nacht); color: #dfe9e7; padding: clamp(3rem, 7vh, 5rem) 0 0; }
.rust h2 { color: #fff; }
.rust .tussen { margin-top: 2.6rem; }
.rust:last-child { padding-bottom: clamp(3rem, 7vh, 5rem); }
.vk-functies { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.3rem 2.2rem; }
.vk-functies > div { border-top: 1px solid rgba(255, 255, 255, .17); padding-top: .85rem; }
.vk-functies h3 { font-size: 1.1rem; margin: 0 0 .2rem; color: #fff; }
.vk-functies p { margin: 0; font-size: .96rem; color: #b9cac8; }
.niet-voor { margin: 2rem 0 0; color: #dfe9e7; }
.niet-voor a { color: var(--accent); }
.prijsvak { background: var(--accent); color: var(--accent-inkt); border-radius: 1.1rem; padding: clamp(1.6rem, 4vw, 3rem); }
.prijsvak h2 { color: var(--accent-inkt); }
.prijsvak p { max-width: 42em; margin: 0 0 1.2rem; }
.prijsvak .knop { background: var(--nacht); color: #fff; }

@media (max-width: 62rem) {
  .anim [data-toon] > .keuzelijst:not(.in) li, .anim .keuzelijst:not(.in) li { translate: 0 .8rem; } /* zijwaarts zou de smalle pagina breder maken dan het scherm */
  .held-rooster, .finale-rij, .stuk, .stop-rooster { grid-template-columns: minmax(0, 1fr); }
  .moment { position: static; width: max-content; max-width: 100%; }
  .held-toneel { min-height: 22rem; }
  .plakker { font-size: .82rem; }
  .anim .bubbel { font-size: .84rem; max-width: 11.5rem; }
  .gantt > div { grid-template-columns: 5rem minmax(0, 1fr); font-size: .86rem; }
  .afrekening > div { grid-template-columns: 4.6rem minmax(0, 1fr) auto; font-size: .92rem; }
  .balk-tijd span { font-size: .74rem; }
  .laat b { font-size: .68rem; }
  .plan { padding-inline: 3.4rem; }
}

/* Prijsopties professionals */
.tarieven { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; margin: 0 0 1.2rem; }
.tarieven > div { background: rgba(255, 255, 255, .55); padding: 1rem 1.2rem; border-radius: .8rem; }
.tarieven b { display: block; font: 700 2.2rem Gabarito, system-ui, sans-serif; line-height: 1.1; }
.tarieven .beste { background: var(--nacht); color: #fff; }