/* ── Homepagina van De Container Butler ──
   De indeling is rustig: een eerste scherm met de voor/na-foto en de vraag,
   daaronder korte uitleg. De huisstijl zit in kleur en beweging: het blauwe
   vlak uit de designs, de gele balk, en een butler die leeft. Hij ademt, springt
   af en toe, noteert uw keuze en juicht als u verstuurt.

   Alle beweging valt weg bij "beperk beweging" (zie main.css). Elk effect start
   daarom onzichtbaar en wordt pas zichtbaar door zijn animatie, zodat er zonder
   animatie geen halve stanklijn of bevroren druppel blijft hangen. */

/* ── Eerste scherm ── */

/* minmax(0, 1fr) en niet het standaard auto-spoor: anders mag de inhoud (het
   e-mailveld plus de knop) de kolom breder maken dan een smalle gsm. */
.start {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    /* ── Altijd een volledig scherm ──
       lvh is de hoogte met ingeklapte adresbalk, svh die met uitgeklapte. De hero
       vult de grootste, zodat er nooit wit onder verschijnt als de balk wegschuift.
       Het verschil tussen beide komt er onderaan bij als opvulling: zo staat de
       inhoud gecentreerd in wat je echt ziet en valt de peiling nooit achter de
       werkbalk. Op een computer zijn beide gelijk en telt die opvulling niet. */
    min-height: 100vh;
    min-height: 100lvh;
    padding: calc(4.1rem + clamp(.75rem, 3vh, 2.25rem)) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 4vh, 3rem);
    padding-bottom: calc(clamp(1.5rem, 4vh, 3rem) + (100lvh - 100svh));
    background: #1a12c8;
    background: var(--verloop);
    color: #fff;
}

.start__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* ── Zeepbellen ──
   Stijgen langzaam op in de blauwe vlakken: het "proper"-gevoel, zonder dat
   het de aandacht van de vraag wegtrekt. */
.bellen { position: absolute; inset: 0; pointer-events: none; }

.bellen span {
    position: absolute;
    bottom: -80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .26);
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .04) 60%);
    opacity: 0;
    animation: bel 16s linear infinite;
}

.bellen span:nth-child(1) { left: 4%;  width: 28px; height: 28px; animation-delay: -1s; }
.bellen span:nth-child(2) { left: 17%; width: 14px; height: 14px; animation-duration: 12s; animation-delay: -7s; }
.bellen span:nth-child(3) { left: 46%; width: 38px; height: 38px; animation-duration: 19s; animation-delay: -4s; }
.bellen span:nth-child(4) { left: 58%; width: 16px; height: 16px; animation-duration: 13s; animation-delay: -10s; }
.bellen span:nth-child(5) { left: 71%; width: 30px; height: 30px; animation-duration: 17s; animation-delay: -2s; }
.bellen span:nth-child(6) { left: 86%; width: 12px; height: 12px; animation-duration: 11s; animation-delay: -5s; }
.bellen span:nth-child(7) { left: 95%; width: 22px; height: 22px; animation-duration: 15s; animation-delay: -12s; }

@keyframes bel {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(18px, -45vh); }
    90%  { opacity: .9; }
    100% { transform: translate(-6px, -100vh); opacity: 0; }
}

/* ── Voor en na ──
   De foto is het argument. Het zijn twee aparte helften in plaats van een breed
   beeld: zo kan de foto op een gsm hoger worden zonder de buitenkant van de
   containers weg te snijden, want elke helft snijdt rond haar eigen container.
   Op een computer staan ze op hun natuurlijke verhouding; op een lage laptop
   worden ze bovenaan en onderaan bijgesneden in plaats van het formulier onder
   de rand te duwen. */
.start__beeld { position: relative; }

.voor-na {
    position: relative;
    display: flex;
    gap: 3px;
    overflow: hidden;
    border-radius: clamp(18px, 2.4vw, 28px);
    background: #fff;
    box-shadow: 0 30px 70px rgba(5, 2, 60, .45);
}

.voor-na__foto {
    flex: 1 1 0;
    min-width: 0;
    width: 50%;
    aspect-ratio: 794 / 1064;
    max-height: calc(100svh - 12rem);
    object-fit: cover;
    object-position: center 60%;
}

.voor-na__label {
    position: absolute;
    z-index: 2;
    top: clamp(.75rem, 1.6vw, 1.1rem);
    padding: .35em .9em;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: clamp(.85rem, 1.3vw, 1.05rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink, #0f0c45);
    background: #fff;
}

.voor-na__label--voor { left: clamp(.75rem, 1.6vw, 1.1rem); }

.voor-na__label--na {
    left: calc(50% + clamp(.75rem, 1.6vw, 1.1rem));
    color: var(--brand, #2d17e8);
    background: var(--accent, #ffc700);
}

/* Stanklijnen die uit de vuile bak opkringelen. */
.stank {
    position: absolute;
    left: 13%;
    bottom: 24%;
    width: 24%;
    height: 44%;
    pointer-events: none;
}

.stank__lijn {
    position: absolute;
    bottom: 0;
    width: 18%;
    height: 72%;
    fill: none;
    stroke: #cfe25e;
    stroke-width: 3.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(207, 226, 94, .55));
    opacity: 0;
    animation: stank 3.6s ease-in infinite;
}

.stank__lijn:nth-child(1) { left: 6%; }
.stank__lijn:nth-child(2) { left: 41%; height: 88%; animation-delay: 1.2s; }
.stank__lijn:nth-child(3) { left: 76%; animation-delay: 2.4s; }

@keyframes stank {
    0%   { transform: translateY(20%) scaleY(.5); opacity: 0; }
    25%  { opacity: .95; }
    100% { transform: translate(8%, -60%) scaleY(1.1); opacity: 0; }
}

/* Een vlieg die rondjes zoemt boven de vuile bak. */
.vlieg {
    position: absolute;
    left: 25%;
    top: 38%;
    width: clamp(14px, 1.5vw, 20px);
    height: auto;
    opacity: 0;
    animation: zoem 7s ease-in-out infinite;
}

.vlieg__lijf { fill: #16141f; }

.vlieg__vleugel {
    fill: rgba(235, 245, 255, .85);
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: flap .09s ease-in-out infinite alternate;
}

.vlieg__vleugel--rechts { animation-delay: .045s; }

@keyframes flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(.35); }
}

@keyframes zoem {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    14%  { transform: translate(260%, -220%) rotate(24deg); }
    30%  { transform: translate(520%, 40%) rotate(-12deg); }
    46%  { transform: translate(300%, 330%) rotate(18deg); }
    62%  { transform: translate(-120%, 200%) rotate(-28deg); }
    78%  { transform: translate(-220%, -80%) rotate(12deg); }
    90%  { transform: translate(80%, -260%) rotate(-6deg); }
    100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

/* Glinsters in de propere bak. */
.glinsters {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    pointer-events: none;
}

.glinster {
    position: absolute;
    width: clamp(14px, 2vw, 26px);
    height: auto;
    fill: #fff;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
    opacity: 0;
    animation: glinster 3.4s ease-in-out infinite;
}

.glinster:nth-child(1) { left: 24%; top: 30%; }
.glinster:nth-child(2) { left: 66%; top: 20%; width: clamp(10px, 1.4vw, 18px); animation-delay: .9s; }
.glinster:nth-child(3) { left: 38%; top: 64%; animation-delay: 1.7s; }
.glinster:nth-child(4) { left: 14%; top: 50%; width: clamp(10px, 1.4vw, 18px); animation-delay: 2.5s; }

@keyframes glinster {
    0%, 60%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
    75%           { transform: scale(1) rotate(45deg); opacity: 1; }
    90%           { transform: scale(.4) rotate(90deg); opacity: .6; }
}

/* ── De butler ──
   Vier lagen, elk met een eigen taak, zodat de bewegingen elkaar niet
   overschrijven: .butler__houding kantelt naar de peiling, .butler__adem ademt,
   .butler__hop springt (en reageert), en daarin wisselen de twee poses. */
.butler {
    position: absolute;
    z-index: 3;
    right: clamp(-2rem, -2.5vw, -.75rem);
    bottom: 0;
    height: min(64%, 340px);
    aspect-ratio: 565 / 1370;
}

.butler__houding,
.butler__adem,
.butler__hop {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
}

.butler__houding { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }

.butler--kijkt .butler__houding { transform: rotate(4deg) translateX(6%); }

.butler__adem { animation: ademen 3.2s ease-in-out infinite; }

.butler__hop { animation: huppel 7s ease-in-out infinite; }

.butler__pose {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: auto;
    max-width: none;
    height: 100%;
    transform: translateX(-50%);
    filter: drop-shadow(0 14px 18px rgba(5, 2, 60, .4));
    /* Kort: bij een trage wissel zie je twee butlers door elkaar. */
    transition: opacity .12s ease;
}

.butler__pose--tablet { height: 103%; opacity: 0; }

.butler--noteert .butler__pose--tablet { opacity: 1; }
.butler--noteert .butler__pose--duim { opacity: 0; }

.butler--noteert .butler__hop { animation: reageer .6s cubic-bezier(.34, 1.56, .64, 1); }
.butler--viert .butler__hop { animation: juich .8s ease-out 3; }

/* z-index: de lagen van de butler staan later in de HTML en tekenden anders
   over de ballon heen, waardoor de tekst half achter zijn hoofd verdween. */
.butler__ballon {
    position: absolute;
    z-index: 2;
    right: 66%;
    bottom: 90%;
    padding: .45rem .85rem;
    border-radius: 16px 16px 4px 16px;
    background: #fff;
    color: var(--brand, #2d17e8);
    font-family: var(--font-head);
    font-size: clamp(.9rem, 1.3vw, 1.1rem);
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(5, 2, 60, .3);
    opacity: 0;
    transform: translateY(10px) scale(.4);
    transform-origin: 100% 100%;
    transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}

.butler--noteert .butler__ballon,
.butler--viert .butler__ballon { opacity: 1; transform: none; }

/* Wijst de weg naar de volgende stap: de ballon blijft staan en wiebelt zacht,
   zodat hij opvalt zonder te schreeuwen. */
.butler--wijst .butler__ballon {
    opacity: 1;
    transform: none;
    animation: wiebel 2.6s ease-in-out .3s infinite;
}

@keyframes wiebel {
    0%, 100% { transform: none; }
    50%      { transform: translateY(-4px) rotate(-1.5deg); }
}

/* Confetti van de juich: home.js maakt de stukjes en geeft elk een eigen richting. */
.butler__feest {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 0;
    height: 0;
}

.feest__stuk {
    position: absolute;
    width: var(--grootte, 8px);
    height: var(--grootte, 8px);
    border-radius: 50%;
    background: var(--kleur, #ffc700);
    animation: feest 1.1s cubic-bezier(.1, .8, .3, 1) forwards;
}

@keyframes ademen {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.018); }
}

@keyframes huppel {
    0%, 84%, 100% { transform: none; }
    88%           { transform: translateY(-6%) scale(.98, 1.03); }
    92%           { transform: translateY(0) scale(1.04, .96); }
    95%           { transform: translateY(-2%); }
    97%           { transform: none; }
}

@keyframes reageer {
    0%   { transform: none; }
    35%  { transform: translateY(-5%) scale(.96, 1.05) rotate(-3deg); }
    70%  { transform: scale(1.03, .97); }
    100% { transform: none; }
}

@keyframes juich {
    0%, 100% { transform: none; }
    30%      { transform: translateY(-14%) scale(.97, 1.04); }
    55%      { transform: translateY(0) scale(1.05, .95); }
    75%      { transform: translateY(-4%); }
}

@keyframes feest {
    from { transform: translate(0, 0) scale(.3); opacity: 1; }
    to   { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); opacity: 0; }
}

@keyframes puls {
    0%   { box-shadow: 0 0 0 0 rgba(255, 199, 0, .6); }
    100% { box-shadow: 0 0 0 10px rgba(255, 199, 0, 0); }
}

/* ── De vraag ── */
.start__peiling { max-width: 32rem; }

.start__peiling .balk { margin-bottom: 1rem; }

.start__vraag {
    font-size: clamp(2.1rem, 3.5vw, 3.1rem);
    line-height: .98;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 4px 0 rgba(10, 5, 80, .22);
    margin-bottom: .8rem;
    text-wrap: balance;
}

.start__uitleg {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    font-weight: 600;
    margin-bottom: clamp(1.1rem, 2.6vh, 1.6rem);
}

.peiling__keuzes { border: 0; min-width: 0; }

.peiling__opties {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.optie {
    position: relative;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* De echte radioknop blijft bestaan (toetsenbord, schermlezer, validatie),
   maar onzichtbaar. De kaart ernaast is wat je ziet en aanklikt. */
.optie__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.optie__kaart {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: clamp(1rem, 2.4vh, 1.35rem) .35rem;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    transition: border-color .15s, background-color .15s, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.optie:hover .optie__kaart {
    border-color: #fff;
    background: rgba(255, 255, 255, .16);
    transform: translateY(-3px);
}

.optie__bedrag {
    font-family: var(--font-head);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.1;
    color: #fff;
}

.optie__input:checked + .optie__kaart {
    background: var(--accent, #ffc700);
    border-color: var(--accent, #ffc700);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(5, 2, 60, .35);
}

.optie__input:checked + .optie__kaart .optie__bedrag { color: var(--brand, #2d17e8); }

.optie__input:checked + .optie__kaart::after {
    content: '\2713';
    position: absolute;
    top: -.6rem;
    right: -.45rem;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--brand, #2d17e8);
    font-family: var(--font-head);
    font-size: .9rem;
    animation: plop .3s ease-out;
}

.optie__input:focus-visible + .optie__kaart {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@keyframes plop {
    0%   { transform: scale(.3); opacity: 0; }
    70%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

/* "Niets" is een volwaardig antwoord, maar geen prijs: daarom geen vierde
   kaart tussen de bedragen, wel apart aanklikbaar en apart geteld. */
.optie-niets {
    display: inline-flex;
    margin-top: .55rem;
    cursor: pointer;
}

.optie-niets__tekst {
    padding: .25rem 0;
    font-size: .95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .78);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .35);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.optie-niets:hover .optie-niets__tekst { color: #fff; }

.optie-niets .optie__input:checked + .optie-niets__tekst {
    color: var(--accent, #ffc700);
    text-decoration-color: var(--accent, #ffc700);
}

.optie-niets .optie__input:checked + .optie-niets__tekst::before { content: '\2713\00a0'; }

.optie-niets .optie__input:focus-visible + .optie-niets__tekst {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.peiling__email { margin-top: clamp(.9rem, 2.2vh, 1.3rem); }

.peiling__rij { display: flex; gap: .5rem; }

.peiling__input {
    flex: 1;
    min-width: 0;
    height: 3.25rem;
    padding: 0 1.2rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
}

.peiling__input:focus {
    border-color: var(--accent, #ffc700);
    box-shadow: 0 0 0 4px rgba(255, 199, 0, .35);
}

.peiling__input[aria-invalid="true"] { border-color: #ff6b5e; }

.peiling__knop {
    height: 3.25rem;
    padding-inline: 1.5rem;
    white-space: nowrap;
}

.peiling__privacy {
    margin-top: .55rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .72);
}

.peiling__privacy a { color: #fff; font-weight: 700; }

/* Vakje voor Meta: klein en niet aangevinkt, want het is een vraag en geen stap
   in de peiling. De accentkleur houdt het vinkje zichtbaar op blauw. */
.peiling__meta {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-top: .7rem;
    font-size: .85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
}

.peiling__vakje {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: .1rem 0 0;
    accent-color: var(--accent, #ffc700);
    cursor: pointer;
}

.peiling__vakje:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Foutmeldingen als witte pil: rode tekst op blauw is niet leesbaar. */
.peiling__fout,
.peiling__status {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: fit-content;
    margin-top: .5rem;
    padding: .3rem .75rem .3rem .35rem;
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
    font-weight: 800;
    color: #b42318;
}

.peiling__fout::before,
.peiling__status::before {
    content: '!';
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #d92d20;
    color: #fff;
    font-size: .75rem;
}

.peiling__status:empty { display: none; }

/* Onzichtbaar voor mensen, zichtbaar voor bots die elk veld invullen. */
.peiling__honing {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.start .btn-accent,
.afsluiter .btn-accent { box-shadow: 0 5px 0 var(--accent-dark, #e0a800), 0 12px 24px rgba(5, 2, 60, .3); }

/* ── Na het versturen ── */
.bedankt { animation: verschijn .4s ease-out; }

.bedankt__titel {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .6rem;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 4px 0 rgba(10, 5, 80, .22);
}

.bedankt__titel::before {
    content: '\2713';
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent, #ffc700);
    color: var(--brand, #2d17e8);
    font-size: 1.35rem;
    text-shadow: none;
    animation: plop .45s ease-out;
}

.bedankt__titel:focus { outline: none; }

.bedankt__keuze { font-size: 1.05rem; color: rgba(255, 255, 255, .88); }

.bedankt__keuze strong {
    font-family: var(--font-head);
    font-weight: 400;
    color: var(--accent, #ffc700);
}

.bedankt__mail { color: rgba(255, 255, 255, .72); }

.gemeente { margin-top: 1.6rem; }

.gemeente__vraag {
    font-family: var(--font-head);
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: .6rem;
}

.gemeente__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.chip {
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 800;
    padding: .5rem .9rem;
    border: 2px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

.chip:hover { border-color: #fff; }

.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover {
    background: var(--accent, #ffc700);
    border-color: var(--accent, #ffc700);
    color: var(--brand, #2d17e8);
}

.chip:disabled { cursor: progress; opacity: .6; }

.gemeente__melding {
    margin-top: .55rem;
    font-weight: 800;
    color: var(--accent, #ffc700);
}

.gemeente__melding--fout {
    width: fit-content;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: #fff;
    color: #b42318;
}

.delen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: 1.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.delen__tekst { flex: 1 1 12rem; color: rgba(255, 255, 255, .8); }

.delen__knop svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes verschijn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── Inschuiven bij het scrollen ──
   Alleen als home.js de klasse js-reveal op <html> zette. Zonder JavaScript
   blijft alles gewoon zichtbaar. */
.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.js-reveal [data-reveal].is-zichtbaar { opacity: 1; transform: none; }

.js-reveal .stap[data-reveal]:nth-child(2) { transition-delay: .12s; }
.js-reveal .stap[data-reveal]:nth-child(3) { transition-delay: .24s; }
.js-reveal .nu__gemeenten[data-reveal] { transition-delay: .15s; }

/* ── Zo werkt het ── */
.sectie__kop {
    max-width: 40rem;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.sectie__intro {
    font-size: 1.1rem;
    color: var(--muted, #5b5980);
}

.stappen {
    list-style: none;
    counter-reset: stap;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    max-width: 960px;
    margin: 0 auto;
}

.stap {
    counter-increment: stap;
    text-align: center;
}

/* Het nummer komt uit een CSS-teller en niet uit de HTML: het is vorm, geen
   tekst die de klant moet kunnen aanpassen. */
.stap::before {
    content: counter(stap);
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--accent, #ffc700);
    color: var(--brand, #2d17e8);
    font-family: var(--font-head);
    font-size: 1.5rem;
    box-shadow: 0 4px 0 var(--accent-dark, #e0a800);
}

.js-reveal .stap.is-zichtbaar::before { animation: plop .5s ease-out both; }
.js-reveal .stap.is-zichtbaar:nth-child(2)::before { animation-delay: .12s; }
.js-reveal .stap.is-zichtbaar:nth-child(3)::before { animation-delay: .24s; }

.stap__titel {
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--brand, #2d17e8);
    margin-bottom: .3rem;
}

.stap p { color: var(--muted, #5b5980); }

/* ── Waarom nu ── */
.nu {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    max-width: 1040px;
}

.nu__tekst p { max-width: 34rem; font-size: 1.1rem; }

.nu__tekst .nu__bron {
    margin-top: 1rem;
    font-size: .88rem;
    color: var(--muted, #5b5980);
}

.nu__bron a { color: var(--muted, #5b5980); font-weight: 700; }

.nu__gemeenten {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: 24px;
    background: #1a12c8;
    background: var(--verloop);
    box-shadow: 0 18px 50px rgba(20, 10, 120, .22);
}

.nu__kop {
    font-size: 1.35rem;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: .9rem;
}

.pillen {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.pillen li {
    padding: .4rem .85rem;
    border-radius: 999px;
    background: var(--accent, #ffc700);
    color: var(--brand, #2d17e8);
    font-family: var(--font-head);
    font-size: 1rem;
}

.nu__noot {
    margin-top: .9rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .8);
}

/* ── Veelgestelde vragen ──
   Hergebruikt de .faq__-klassen uit components.css, in de huisstijl. */
.faq-sectie .sectie__titel { text-align: center; }

.faq-sectie .faq__list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 2rem;
}

.faq-sectie .faq__item {
    margin: 0;
    padding: 0;
    border: 2px solid var(--line, #e4e2f7);
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s;
}

.faq-sectie .faq__item[open] { border-color: var(--brand, #2d17e8); }

.faq-sectie .faq__question {
    position: relative;
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 1rem 3.5rem 1rem 1.25rem;
    font-family: var(--font-head);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 400;
    color: var(--ink, #0f0c45);
}

.faq-sectie .faq__question::-webkit-details-marker { display: none; }

.faq-sectie .faq__question::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent, #ffc700);
    color: var(--brand, #2d17e8);
    font-size: 1.25rem;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform .2s;
}

.faq-sectie .faq__item[open] .faq__question::after { transform: translateY(-50%) rotate(45deg); }

.faq-sectie .faq__answer {
    padding: 0 1.25rem 1.2rem;
    color: var(--body, #34325a);
}

/* ── Afsluiter ── */
.afsluiter {
    position: relative;
    overflow: hidden;
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    background: #1a12c8;
    background: var(--verloop);
    color: #fff;
}

.afsluiter__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 4rem);
}

/* container-type laat de druppels meeschalen met de butler (cqw-eenheden). */
.afsluiter__butler {
    position: relative;
    flex: none;
    width: clamp(170px, 21vw, 270px);
    container-type: inline-size;
}

.afsluiter__mascotte {
    display: block;
    width: 100%;
    transform-origin: 30% 100%;
    animation: ademen 3.2s ease-in-out infinite;
}

/* Waterdruppels uit de spuitmond (ongeveer halverwege de butler) naar de bak. */
.spray {
    position: absolute;
    left: 47%;
    top: 48%;
    width: 0;
    height: 0;
}

.spray span {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(215, 238, 255, .95);
    box-shadow: 0 0 6px rgba(255, 255, 255, .8);
    opacity: 0;
    animation: druppel 1s linear infinite;
}

.spray span:nth-child(1) { --dx: 24cqw; --dy: 12cqw; }
.spray span:nth-child(2) { --dx: 28cqw; --dy: 17cqw; animation-delay: .11s; }
.spray span:nth-child(3) { --dx: 20cqw; --dy: 9cqw;  animation-delay: .22s; width: 4px; height: 4px; }
.spray span:nth-child(4) { --dx: 31cqw; --dy: 14cqw; animation-delay: .33s; }
.spray span:nth-child(5) { --dx: 26cqw; --dy: 20cqw; animation-delay: .44s; width: 5px; height: 5px; }
.spray span:nth-child(6) { --dx: 22cqw; --dy: 15cqw; animation-delay: .55s; }
.spray span:nth-child(7) { --dx: 33cqw; --dy: 19cqw; animation-delay: .66s; width: 4px; height: 4px; }
.spray span:nth-child(8) { --dx: 25cqw; --dy: 10cqw; animation-delay: .77s; }
.spray span:nth-child(9) { --dx: 29cqw; --dy: 22cqw; animation-delay: .88s; width: 5px; height: 5px; }

@keyframes druppel {
    0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translate(var(--dx, 24cqw), var(--dy, 12cqw)) scale(1.1); opacity: 0; }
}

.afsluiter__tekst { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

.afsluiter__titel {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 4px 0 rgba(10, 5, 80, .22);
    margin-bottom: 1.2rem;
}

/* ── Tablet en gsm ── */
@media (max-width: 860px) {
    /* Ook op een gsm een volledig scherm; de inhoud staat er gecentreerd in. */
    .start {
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        padding-top: calc(4rem + .75rem);
        padding-bottom: 1.5rem;
        padding-bottom: calc(1.5rem + (100lvh - 100svh));
    }

    /* Kolom onder elkaar: de peiling neemt wat ze nodig heeft, de foto groeit in
       alle ruimte die overblijft tot het scherm vol is. */
    /* stretch expliciet: de basisregel centreert (align-items: center), en in een
       kolom kromp de foto daardoor tot 0 px breed en werd de peiling breder dan
       het scherm. */
    .start__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(1.1rem, 2.6vh, 1.8rem);
    }

    .start__beeld {
        flex: 1 1 auto;
        min-height: 11rem;
    }

    .voor-na {
        position: absolute;
        inset: 0;
    }

    .voor-na__foto {
        height: 100%;
        aspect-ratio: auto;
        max-height: none;
    }

    .start__peiling { flex: none; }

    .start__peiling { max-width: none; }

    .butler {
        right: -.35rem;
        height: 60%;
    }

    .butler__ballon { font-size: .85rem; padding: .35rem .65rem; }

    /* ── Rustiger op een gsm ──
       Op een klein scherm staat alles op elkaar. Wat op een groot scherm sfeer
       geeft, is hier alleen drukte: de bellen, de vlieg, de gele balk en het label
       in de header. Foto, butler, vraag en bedragen blijven, met
       meer lucht ertussen. */
    .start .bellen,
    .vlieg,
    .start__peiling .balk,
    .site-header__label { display: none; }

    .glinster:nth-child(n+3) { display: none; }

    .start__vraag { font-size: clamp(1.75rem, 7.2vw, 2.3rem); margin-bottom: .7rem; }

    .start__uitleg { font-size: .98rem; margin-bottom: 1.35rem; }

    .optie__kaart { padding-block: 1rem; }

    .optie-niets { margin-top: .8rem; }

    .peiling__email { margin-top: 1.35rem; }

    .stappen {
        grid-template-columns: 1fr;
        max-width: 22rem;
    }

    .nu { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .optie__kaart { padding: 1rem .25rem; }
    .peiling__knop { padding-inline: 1.1rem; }

    .afsluiter__inner { gap: 1rem; }
    .afsluiter__butler { width: 150px; }
}