/* --- BUTTONS (Algemeen) --- */
.btn-primary { display: inline-block; background: var(--color-gold); color: var(--color-dark); padding: 15px 40px; border-radius: 5px; text-decoration: none; font-weight: 800; font-size: 1.1rem; transition: all 0.3s ease; border: 1px solid var(--color-gold); }
.btn-primary:hover { background: var(--color-dark); color: var(--color-gold); border-color: var(--color-dark); transform: translateY(-2px); }

/* --- OVER MIJ (Split Card) --- */
/* Geen kaart om 'over mij' heen: het is een verhaal, geen voorwerp. De foto
   houdt zijn gouden schaduw - dat is de ene plek waar goud een vlak mag zijn. */
.about-container { display: flex; align-items: stretch; margin-top: 30px; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; border: 0; }
.about-image { flex: 1; min-height: 400px; }
.about-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text { flex: 1.5; font-size: 1.25rem; font-weight: 600; padding: 50px; }
.about-text p { margin-bottom: 20px; }

/* --- CONTACT (GRID LAYOUT - ZONDER WIT VLAK) --- */
.contact-grid {
    display: flex;
    gap: 40px; /* Ruimte tussen map en knoppen */
    align-items: stretch;
}

/* Map Wrapper (Links) */
.map-wrapper {
    flex: 2; /* Map krijgt 2 delen van de ruimte */
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(59, 35, 19, 0.1);
    border: 1px solid rgba(210, 166, 121, 0.2);
}
.map-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* Buttons Wrapper (Rechts) */
.buttons-wrapper {
    flex: 1; /* Knoppen krijgen 1 deel */
    display: flex;
    flex-direction: column; /* Onder elkaar */
    justify-content: space-between; /* Verdeel ze netjes over de hoogte */
    gap: 20px;
}

/* De Knoppen Zelf */
.contact-card {
    background: var(--color-white);
    border: 1px solid rgba(59, 35, 19, 0.1);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-dark);
    box-shadow: 0 5px 15px rgba(59, 35, 19, 0.05);
    transition: transform 0.3s ease, border-color 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Vul de ruimte in de wrapper */
}

.contact-card:hover { transform: translateY(-5px); border-color: var(--color-gold); }

.contact-card i { font-size: 28px; margin-bottom: 10px; color: var(--color-gold); }
.contact-card .fa-whatsapp { color: var(--color-gold); }
.contact-card h3 { margin-bottom: 5px; font-size: 1.2rem; font-weight: 800; }
.contact-card span { font-size: 1rem; font-weight: 600; }

/* --- PRIJS TABS & TABELLEN --- */
.price-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
.tab-btn { background: transparent; color: var(--color-dark); border: 2px solid var(--color-dark); padding: 12px 30px; font-family: var(--font-primary); font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; border-radius: 30px; text-transform: uppercase; letter-spacing: 1px; }
.tab-btn:hover { background: var(--color-gold); border-color: var(--color-gold); transform: translateY(-2px); }
.tab-btn.active { background: var(--color-dark); color: var(--color-gold); border-color: var(--color-dark); }

.price-table { width: 100%; max-width: 100%; margin: 0 auto; background: var(--color-white); padding: 40px; border-radius: 12px; box-shadow: 0 15px 40px rgba(59, 35, 19, 0.1); border: 1px solid rgba(210, 166, 121, 0.2); overflow: visible; display: none; opacity: 0; transform: translateY(20px); }
.price-table.active-tab { display: block; animation: fadeIn 0.6s ease-out forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

.category-title { background: transparent; color: var(--color-dark); padding: 0 0 15px 0; font-size: 2rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; font-weight: 800; text-align: center; border-bottom: 2px solid var(--color-gold); display: inline-block; width: 100%; opacity: 1 !important; transform: none !important; }
.price-row-header { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; padding: 10px 0; border-bottom: 2px solid var(--color-dark); align-items: center; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.price-row { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; padding: 18px 0; border-bottom: 1px solid rgba(59, 35, 19, 0.1); align-items: center; }
.price-row:last-child { border-bottom: none; }
.treatment-name { font-weight: 700; font-size: 1.25rem; }
.age-tag { font-weight: 400; font-size: 0.85em; color: var(--color-gold); margin-left: 8px; font-style: italic; display: inline-block; }
.price-col { font-weight: 600; font-size: 1.15rem; }

/* --- ANIMATIES --- */
.hidden-section { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.show-section { opacity: 1; transform: translateY(0); }
.price-table .price-row-header, .price-table .price-row { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.price-table.active-tab .price-row-header, .price-table.active-tab .price-row { opacity: 1; transform: translateX(0); }
.price-table.active-tab .price-row-header { transition-delay: 0.2s; }
.price-table.active-tab > .price-row:nth-of-type(1) { transition-delay: 0.3s; }
.price-table.active-tab > .price-row:nth-of-type(2) { transition-delay: 0.4s; }
.price-table.active-tab > .price-row:nth-of-type(3) { transition-delay: 0.5s; }
.price-table.active-tab > .price-row:nth-of-type(4) { transition-delay: 0.6s; }
.price-table.active-tab > .price-row:nth-of-type(5) { transition-delay: 0.7s; }
.price-table.active-tab > .price-row:nth-of-type(6) { transition-delay: 0.8s; }
.price-table.active-tab > .price-row:nth-of-type(7) { transition-delay: 0.9s; }
.price-table.active-tab > .price-row:nth-of-type(8) { transition-delay: 1.0s; }
.price-table.active-tab > .price-row:nth-of-type(9) { transition-delay: 1.1s; }
.price-table.active-tab > .price-row:nth-of-type(10) { transition-delay: 1.2s; }
.price-table.active-tab > .price-row:nth-of-type(11) { transition-delay: 1.3s; }

/* --- SPECIALE ACTIE SECTIE --- */
.action-section {
    background: #fff;
    margin: 40px auto;
    padding: 0;
    max-width: 1000px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(59, 35, 19, 0.1);
    overflow: hidden;
    display: none; /* Standaard verborgen */
    border: 2px solid var(--color-gold);
}

.action-content {
    display: flex;
    align-items: center;
}

.action-image {
    flex: 1;
    max-width: 50%;
}

.action-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.action-text {
    flex: 1;
    padding: 40px;
    text-align: center;
}

.action-text h3 {
    font-size: 2rem;
    color: var(--color-gold);
    margin-bottom: 20px;
    font-family: var(--font-logo); /* Speels lettertype voor acties */
}

.action-text p {
    font-size: 1.2rem;
    color: var(--color-dark);
    margin-bottom: 25px;
    font-weight: 600;
}

/* Mobiel: Onder elkaar */
@media (max-width: 768px) {
    .action-content {
        flex-direction: column;
    }
    .action-image {
        max-width: 100%;
        width: 100%;
    }
    .action-text {
        padding: 30px 20px;
    }
}
/* ===================================================================
   Fase 2 — blokken die door PHP gevuld worden (2026-08-24)
   Nieuwe klassenamen, dus ze botsen niet met de oude .price-*-regels.
   =================================================================== */

.ico { display: inline-block; vertical-align: -0.15em; flex: 0 0 auto; }

/* Hamburger: drie streepjes die een kruis worden. Was een Font Awesome-icoon. */
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px;
               background: none; border: 0; cursor: pointer; }
.menu-toggle .balk { display: block; width: 100%; height: 2px; margin: 4px 0;
                     background: var(--color-dark); border-radius: 2px;
                     transition: transform .25s ease, opacity .2s ease; }
.menu-toggle.open .balk:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.open .balk:nth-child(2) { opacity: 0; }
.menu-toggle.open .balk:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Prijzen: één regel per behandeling, twee groepen naast elkaar ------ */
.prijsblok { display: grid; gap: 24px; margin-top: 30px; }
/* stretch, niet start: zo zijn Dames en Kleuren even hoog, en Heren en
   Kinderen ook. Met align-items:start kreeg de kortere kaart een gat. */
@media (min-width: 860px) { .prijsblok { grid-template-columns: 1fr 1fr; align-items: stretch; } }

/* Een prijslijst IS papier, dus die mag een vlak blijven - maar dan papier dat op
   tafel ligt, niet een kaartje dat zweeft. Slagschaduw eruit, hoeken bijna recht. */
.prijsgroep { background: rgba(255, 255, 255, .58); border: 1px solid rgba(210, 166, 121, .5);
              border-radius: 2px; padding: 24px 26px;
              box-shadow: none;
              opacity: 0; transform: translateY(14px);
              transition: opacity .5s ease, transform .5s ease; }
.prijsgroep.active-table { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .prijsgroep { opacity: 1; transform: none; transition: none; }
}
.prijsgroep .category-title { margin: 0 0 14px; padding-bottom: 10px; font-size: 1.5rem;
                              border-bottom: 2px solid var(--color-gold); }

.prijslijst-site { list-style: none; margin: 0; padding: 0; }
/* Elke groep is een eigen lijst; de ruimte ertussen doet het groeperen. */
.prijslijst-site + .prijslijst-site { margin-top: 18px; padding-top: 4px;
                                      border-top: 1px solid rgba(210, 166, 121, .3); }
.prijsrij { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
            padding: 9px 0; border-bottom: 1px dashed rgba(59, 35, 19, .14); }
.prijsrij:last-child { border-bottom: 0; }
.prijsrij .naam { font-weight: 600; }
.prijsrij .leeftijd { display: inline-block; margin-left: 6px; font-size: .8em;
                      font-weight: 500; font-style: italic; opacity: .7; }
.prijsrij .bedragen { flex: 0 0 auto; text-align: right; }
.prijsrij .bedrag { display: block; font-weight: 700; white-space: nowrap; color: var(--color-dark); }
.prijsrij .toelichting { display: block; font-size: .85em; font-weight: 500; opacity: .8;
                         white-space: nowrap; }

.brug { margin: 16px 0 0; padding: 10px 12px; font-size: .86em;
        background: rgba(210, 166, 121, .16); border-left: 3px solid var(--color-gold);
        border-radius: 0 8px 8px 0; }
.brug a { color: inherit; font-weight: 700; }

/* --- Veelgestelde vragen: <details>, dus werkt zonder JavaScript -------- */
/* Niets staat standaard open: zo is meteen duidelijk dat je moet klikken. */
:root {
    interpolate-size: allow-keywords;
    --balk: 90px;

    /* Papier, en niet een raster.
       Twee streeppatronen onder een hoek geven altijd een zichtbaar raster —
       precies waarom het er machinaal uitzag. Echt perkament heeft korrel en
       wolken, dus dat is wat hier staat: ruis die de browser zelf berekent met
       feTurbulence. Twee lagen, een fijne en een hele grove:

         korrel  hoge frequentie, tegel van 200 px  -> de vezel van het papier
         wolken  lage frequentie, tegel van 800 px  -> de ongelijke tint

       stitchTiles='stitch' laat de ruis netjes op zijn tegelranden aansluiten,
       zodat er geen ruitjes ontstaan. Geen bestand nodig, dus ook geen extra
       verzoek naar de server. */
    --vezel:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)' opacity='0.055'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='800' height='800' filter='url(%23w)' opacity='0.05'/%3E%3C/svg%3E");
    --vezel-maat: 200px 200px, 800px 800px;

    /* De hoogte van de golvende rand, en de golf zelf. Zes zachte welvingen
       over 1200 eenheden. Het masker rekt mee met de schermbreedte. */
    --rand: 46px;
    --golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,21 C 96,9 186,27 276,19 C 366,11 436,29 526,23 C 616,17 706,7 796,17 C 886,27 966,13 1056,21 C 1122,27 1170,15 1200,19 L1200,46 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Op een telefoon wordt een viewBox van 1200 naar ~390 px geperst: dezelfde
   amplitude, drie keer zoveel golven per centimeter. Dan is het geen papierrand
   meer maar een heuvellandschap. Daar dus een eigen, vlakkere golf met drie
   welvingen, en een lagere rand. */
@media (max-width: 700px) {
    :root {
        --rand: 22px;
        --golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 22' preserveAspectRatio='none'%3E%3Cpath d='M0,22 L0,12 C 200,6 340,15 520,11 C 700,7 840,16 1020,11 C 1110,8.5 1160,13 1200,10 L1200,22 Z' fill='%23000'/%3E%3C/svg%3E");
    }
}

.vragen { max-width: 780px; margin: 30px auto 0; }
/* Acht kaarten onder elkaar leest als een stapel; een lijst met haarlijnen leest
   als een lijst. Alleen de open vraag krijgt een lichte ondergrond. */
.vragen details { background: transparent; border: 0;
                  border-bottom: 1px solid rgba(59, 35, 19, .15); border-radius: 0; }
.vragen details:first-of-type { border-top: 1px solid rgba(59, 35, 19, .15); }
.vragen details[open] { background: rgba(255, 255, 255, .45); }
.vragen summary { padding: 17px 16px; font-weight: 600; cursor: pointer; list-style: none;
                  display: flex; align-items: center; justify-content: space-between; gap: 12px;
                  border-radius: 0; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary:hover { background: rgba(210, 166, 121, .1); }
.vragen summary:focus-visible { outline: 3px solid var(--color-dark); outline-offset: -3px; }

/* Het plusje draait naar een kruis; dat maakt zichtbaar dat het een knop is. */
.vragen summary::after { content: "+"; flex: 0 0 auto; font-size: 1.6rem; line-height: 1;
                         color: var(--color-gold); transition: transform .28s ease; }
.vragen details[open] summary::after { transform: rotate(135deg); }

/* Open- en dichtklappen met een beweging. Chrome en Edge animeren dit; Firefox
   klapt hem (nog) in één keer open — dat is geen fout, alleen minder vloeiend. */
.vragen details::details-content { block-size: 0; overflow: hidden;
                                   transition: block-size .3s ease, content-visibility .3s allow-discrete; }
.vragen details[open]::details-content { block-size: auto; }

/* Terugval voor browsers zonder ::details-content: een binnenvak dat schuift. */
.vragen .antwoord-vak { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.vragen details[open] .antwoord-vak { grid-template-rows: 1fr; }
.vragen .antwoord { overflow: hidden; padding: 0 20px 18px; }

@media (prefers-reduced-motion: reduce) {
    .vragen details::details-content,
    .vragen .antwoord-vak,
    .vragen summary::after { transition: none; }
}

/* --- Contact: één hoofdactie, praktische info, dan de kaart ------------- */
/* Breed genoeg om op één regel te passen zolang het scherm dat toelaat: de zin
   is 736 px op één regel en de container biedt er 1060. Op 46ch brak hij middenin
   af, en dan lijkt de kop groter dan wat eronder staat. Wordt het venster smaller,
   dan breekt hij vanzelf. */
.contact-intro { max-width: 760px; margin: 0 auto 28px; text-align: center; }

.acties { display: grid; gap: 10px; margin: 0 0 40px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) {
    .acties { grid-template-columns: repeat(4, 1fr); gap: 0; padding-top: 6px; }
    .actie-knop { position: relative; }
    /* haarlijntjes tussen de vier, zoals de naad tussen twee planken */
    .actie-knop + .actie-knop::before {
        content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
        border-left: 1px solid rgba(59, 35, 19, .13); }
}
/* Vier naast elkaar op een breed scherm. De tekst blijft op volle grootte;
   past de e-mail niet op één regel, dan breekt hij af — dat is beter dan hem
   kleiner maken. Leesbaarheid boven uitlijning. */
@media (min-width: 1000px) { .acties { grid-template-columns: 1.25fr 1fr 1fr 1fr; } }

/* Alles onder elkaar en gecentreerd. Met het icoon links stond het label
   ingesprongen en de waarde eronder tegen de rand: twee verschillende
   uitlijningen in één knop. Gecentreerd is er maar één lijn, en de waarde
   heeft de volle breedte, dus het e-mailadres past zonder af te breken. */
/* Vier gelijke witte kaarten lieten de bezoeker raden wat het handigst is, en de
   klasse 'primair' deed niets. Nu is er één hoofdactie met gewicht en staan de
   andere drie er rustig naast, zonder kader, op de achtergrond zelf. */
.actie-knop { display: flex; flex-direction: column; align-items: center; gap: 6px;
              padding: 14px 10px; text-align: center;
              background: transparent; border: 0; border-radius: 14px;
              text-decoration: none; color: var(--color-dark); cursor: pointer;
              transition: color .18s ease, background .18s ease, transform .12s ease; }
/* Zonder kader zagen de vier acties eruit als tekst: rustig, maar niets liet
   zien dat je erop kon klikken. Een streepje onder het label was te veel van het
   goede; het vlak zelf doet het werk. Het licht op zodra je er met de muis
   overheen gaat, het icoontje komt 2 px omhoog en indrukken geeft een duwtje
   terug. Het kader komt dus pas als je het nodig hebt, in plaats van de hele dag
   te staan wachten. */
.actie-knop:hover { color: #14100c; background: rgba(210, 166, 121, .17); }
.actie-knop:hover .knop-ico { background: rgba(210, 166, 121, .42); transform: translateY(-2px); }
.actie-knop:active { transform: translateY(1px); }
.actie-knop .knop-ico { transition: background .18s ease, transform .18s ease; }

/* Appen staat gewoon in de rij, niet erboven: vier gelijkwaardige opties waarvan
   er een net iets zwaarder weegt. Het verschil zit in de kleur, niet in de maat. */
.actie-knop.primair { color: #241407; }
.actie-knop.primair .knop-ico { background: var(--color-dark); color: var(--color-bg); }
.actie-knop.primair:hover .knop-ico { background: #24150a; }
.actie-knop.primair strong { font-weight: 800; }
.actie-knop.primair .waarde { color: #3b2313; }
.actie-knop:focus-visible { outline: 3px solid var(--color-dark); outline-offset: 3px; }
.actie-knop .knop-ico { display: grid; place-items: center; flex: 0 0 auto;
                        width: 46px; height: 46px; border-radius: 50%;
                        background: rgba(210, 166, 121, .22); color: var(--color-dark); }
.actie-knop strong { font-size: 1.12rem; font-weight: 700; line-height: 1.2; }
.actie-knop .waarde { font-size: .97rem; font-weight: 600; color: #14100c;
                      white-space: nowrap; line-height: 1.25; }
@media (min-width: 1000px) {
    /* Vier naast elkaar: de waarde schaalt iets mee zodat een e-mailadres nooit
       hoeft af te breken. Nooit kleiner dan 15 px. */
    .actie-knop .waarde { font-size: clamp(.79rem, 1.55vw, .97rem); }
}

.contactblok { display: grid; gap: 20px; }
@media (min-width: 980px) { .contactblok { grid-template-columns: 1fr 1.15fr; align-items: stretch; } }

/* Geen kaart: de afspraak en het adres zijn tekst, geen los voorwerp. De kaart
   ernaast blijft wél omlijst, want dat is echt een venster naar buiten. */
.praktisch { display: flex; flex-direction: column; gap: 26px; padding: 4px 2px 0; }
.praktisch-deel + .praktisch-deel { padding-top: 24px; border-top: 1px solid rgba(59, 35, 19, .13); }
.praktisch-deel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
                     font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; }
.praktisch .adres { margin: 0; font-size: 1.1rem; font-weight: 600; }
.praktisch .opmerking { margin: 10px 0 0; font-size: .98rem; opacity: .9; }
.praktisch .afspraak { margin: 0; font-size: 1.05rem; }

.kaartblok { position: relative; min-height: 320px; overflow: hidden;
             border: 1px solid rgba(210, 166, 121, .45); border-radius: 16px; }
.kaartblok iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 980px) { .kaartblok { min-height: 100%; } }

.insta-link { display: inline-flex; align-items: center; gap: 6px; color: inherit;
              text-decoration: none; font-weight: 500; }
.back-to-top .ico { vertical-align: middle; }

/* ===================================================================
   Scrollytelling: de hero blijft staan, de rest schuift eroverheen
   =================================================================== */
/* De hero plakt aan de bovenkant en blijft daar; alles wat erna komt schuift
   er als een blad over. Puur CSS, geen scroll-luisteraar die het scrollen
   zwaarder maakt.
   Let op: de achtergrond van body wordt onder alles geschilderd, ook onder de
   hero. Alles wat na de hero komt heeft dus een eigen ondoorzichtige laag
   nodig — zie .na-hero hieronder. */
/* De hero plakt onder de balk, niet aan de bovenkant van het venster.
   Met top: 0 stond hij bij scrollpositie 0 op y=90 (want de balk staat in de
   flow) en plakte hij daarna op y=0 — dat verschil van 90 px legde één
   muiswiel-klik in één keer af en zag eruit als een sprong. Met top gelijk aan
   de hoogte van de balk begint hij al op zijn plakpositie en beweegt hij dus
   nooit. Staat er een mededelingenbalk boven, dan schuift de hero eerst rustig
   omhoog tot hij die 90 px raakt en blijft daarna staan: ook geen sprong. */
.hero {
    position: sticky;
    top: var(--balk);
    z-index: 0;
    /* Precies de ruimte onder de balk: zo valt er niets buiten het venster. */
    height: calc(100vh - var(--balk));
    /* De padding was er om de oude, overlappende balk te ontwijken. De hero
       begint nu onder de balk, dus zou die padding de tekst scheef duwen. */
    padding-top: 0;
}

/* Eén blad over de hero, niet per sectie een achtergrond. De secties vliegen in
   met opacity 0 -> 1, en tijdens die overgang is hun eigen achtergrond ook half
   doorzichtig — dan schijnt de hero er dwars door de prijzen heen. Met een blad
   eronder kan dat niet, en zijn kieren tussen secties ook geen probleem meer. */
.na-hero {
    position: relative;
    z-index: 1;
    background-color: var(--color-bg);
    background-image: var(--vezel);
    background-size: var(--vezel-maat);

    /* Het blad schuift met zijn golvende bovenkant over de onderste centimeters
       van de foto. De padding zet de inhoud weer op zijn plek, dus onderaan de
       streep verandert er niets aan de opmaak. */
    margin-top: calc(-1 * var(--rand));
    padding-top: var(--rand);

    /* De golf zit op het blad ZELF, in twee maskerlagen: bovenaan de golf, en
       daaronder een dekkende rechthoek voor de rest van de pagina. Dat is de
       hele reden dat er geen naad meer kan zijn — er is maar één element, dus
       één achtergrond en één patroon. Een tweede strookje met eigen textuur
       liep onvermijdelijk uit fase, en zijn onderrand wierp een schaduw. */
    -webkit-mask-image: var(--golf), linear-gradient(#000, #000);
            mask-image: var(--golf), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--rand), 100% calc(100% - var(--rand) + 1px);
            mask-size: 100% var(--rand), 100% calc(100% - var(--rand) + 1px);
    -webkit-mask-position: top, bottom;
            mask-position: top, bottom;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
}

/* De schaduw die het blad op de foto werpt.

   Waarom een aparte laag en geen drop-shadow op het blad: een drop-shadow werkt
   op het HELE silhouet, dus ook op de rechte onderkant van het element. Was de
   vervaging groter dan de verschuiving omhoog, dan kwam die schaduw onder het
   element uit en lag er een kaarsrechte streep over het perkament. Deze laag
   heeft geen zichtbare onderkant: het blad ligt er precies over. */
.bladschaduw {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rand);
    background: rgba(59, 35, 19, .38);
    -webkit-mask-image: var(--golf);
            mask-image: var(--golf);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    filter: blur(9px);
    transform: translateY(-4px);
    pointer-events: none;
}

/* Het enige bewegingsidee: het blad legt zich de laatste centimeters neer — de
   schaduw wordt dieper en zakt op zijn plek. Eén beweging op één element, aan
   het scrollen gekoppeld in plaats van aan een tijdklok, zodat het volgt wat
   jij doet en niet zelf een show opvoert. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .bladschaduw {
            animation: blad-legt-zich-neer linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
        @keyframes blad-legt-zich-neer {
            from { opacity: .35; filter: blur(4px); transform: translateY(-9px); }
            to   { opacity: 1;   filter: blur(9px); transform: translateY(-4px); }
        }
    }
}

/* De links in de voettekst stonden op het standaard blauw van de browser: dat
   valt weg op donkerbruin en hoort niet bij deze site. Goud, met een dunne
   onderstreping zodat je ziet dat het een link is. */
footer a { color: var(--color-gold); text-decoration: underline;
           text-decoration-thickness: 1px; text-underline-offset: 3px; }
footer a:hover, footer a:focus-visible { color: var(--color-white); }
footer .developer-credit a { color: rgba(210, 166, 121, .85); }
footer .developer-credit a:hover { color: var(--color-white); }

/* Het logo werkt als Home. De zachte-scroll-code pikt elke a[href^="#"] op, dus
   dit hoeft geen eigen JavaScript. */
a.logo { text-decoration: none; color: inherit; cursor: pointer; }
a.logo:focus-visible { outline: 3px solid var(--color-dark); outline-offset: 4px; border-radius: 6px; }

/* --- Reviewstrook ---------------------------------------------------------
   GEEN kaart. Boven deze strook staan al zeven witte vlakken (vier knoppen, het
   praktische blok en de kaart); nog een kader erbij maakt de pagina onrustig.
   Open ruimte op de creme is hier het rustpunt, de donkere knop het ankertje. */
/* Los onder de kaart zweefde dit blok en dan voelt het aangeplakt. Een haarlijn
   erboven, zoals de naad tussen de afspraak en het adres, maakt er het
   naschrift van het contactblok van in plaats van een losse sectie. */
.reviewstrook { padding: 0 0 56px; }
.reviewblok { max-width: 720px; margin: 0 auto; text-align: center;
              padding-top: 46px; border-top: 1px solid rgba(59, 35, 19, .13); }
.review-sterren { display: flex; justify-content: center; gap: 7px;
                  margin: 0 0 12px; color: var(--color-gold); line-height: 0; }

/* De sterren staan open, met alleen een lijntje, en vullen zich een voor een:
   ster 1 wordt groot en vol, zakt terug terwijl ster 2 opkomt, enzovoort. Na de
   vijfde een paar tellen stilte, anders wordt het een knipperlicht. Vandaar dat
   de hele beweging binnen de eerste vijfde van de cyclus gebeurt. */
@keyframes stergolf {
    0%   { transform: scale(1);    fill-opacity: .14; }
    7%   { transform: scale(1.32); fill-opacity: 1; }
    19%  { transform: scale(1);    fill-opacity: .14; }
    100% { transform: scale(1);    fill-opacity: .14; }
}
.review-sterren .ico {
    fill: currentColor; fill-opacity: .14;
    stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round;
    /* zonder fill-box schaalt een SVG vanaf de oorsprong van het viewport,
       niet vanaf zijn eigen midden, en schiet de ster weg */
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: stergolf 3.8s ease-in-out infinite;
}
.review-sterren .ico:nth-child(2) { animation-delay: .17s; }
.review-sterren .ico:nth-child(3) { animation-delay: .34s; }
.review-sterren .ico:nth-child(4) { animation-delay: .51s; }
.review-sterren .ico:nth-child(5) { animation-delay: .68s; }
@media (prefers-reduced-motion: reduce) {
    .review-sterren .ico { animation: none; fill-opacity: 1; }
}
.reviewblok h2 { margin: 0 0 10px; font-size: 1.7rem; }
.review-tekst { margin: 0 auto 24px; max-width: 52ch; font-size: 1.05rem; opacity: .85; }
.review-knop { display: inline-block; padding: 14px 28px; border-radius: 999px;
               background: var(--color-dark); color: var(--color-bg);
               font-weight: 700; font-size: 1.05rem; text-decoration: none;
               transition: transform .18s ease, box-shadow .18s ease; }
.review-knop:hover { transform: translateY(-2px);
                     box-shadow: 0 10px 22px rgba(59, 35, 19, .22); }
.review-knop:focus-visible { outline: 3px solid var(--color-dark); outline-offset: 3px; }
@media (max-width: 520px) {
    .reviewstrook { padding: 0 0 44px; }
    .reviewblok h2 { font-size: 1.45rem; }
    .review-knop { display: block; }
}

/* --- Hero: het regeltje boven de kop -------------------------------------
   Draagt de naam en de plaats, zodat de kop zelf iets kan zeggen in plaats van
   zich voor te stellen. Geen sierlijst: zonder dit regeltje weet een bezoeker
   die via Google binnenkomt niet meteen wáár hij is. */
.hero-plaats { margin: 0 0 14px; font-size: .95rem; letter-spacing: .22em;
               text-transform: uppercase; opacity: .78; }
@media (max-width: 640px) { .hero-plaats { font-size: .8rem; letter-spacing: .16em; } }