/* ============================================================
   CHA CHI VERSACI — contactpagina

   Zelfde bouwstenen als de rest: witte kaarten, groene accenten,
   één diep paars blok. Kleuren komen uit ccv-tokens.css.
   ============================================================ */

.ccv-contact{font-family:'Nunito',sans-serif;color:var(--text)}
.ccv-contact *{box-sizing:border-box}
.ccv-contact .wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.ccv-contact h2,
.ccv-contact h3,
.ccv-contact h4{font-family:'Fredoka',sans-serif;color:var(--ink);letter-spacing:-.01em;margin:0}
.ccv-contact a{text-decoration:none;color:inherit}

/* ---------- de twee kolommen: formulier + directe gegevens ---------- */
.ccv-contact-grid{
  display:grid;grid-template-columns:1.35fr .95fr;gap:28px;align-items:start;
  padding:64px 0;
}

/* De rechterkolom loopt mee tot het formulier op is.

   Het formulier links is een stuk langer dan de kaartjes rechts. Wie het
   invult, scrolt die kaartjes na een halve seconde uit beeld - en juist
   daar staat het mailadres, de reactietijd en waar je verder terecht kunt.

   position:sticky lost dat op zonder JavaScript: de kolom blijft staan
   zolang er naast hem nog formulier is, en schuift daarna gewoon mee weg.
   Het raster bepaalt vanzelf waar dat is, want de hoogte daarvan wordt
   door de langste kolom bepaald. Vandaar ook align-items:start hierboven:
   zonder dat rekt de kolom zich op tot de volle hoogte en heeft sticky
   niets om in te schuiven.

   De 104px is de plakkende header plus wat lucht. Alleen op breed scherm:
   onder 900px staan de twee onder elkaar en zou meelopen betekenen dat de
   kaartjes over het formulier heen komen te staan. */
@media(min-width:901px){
  .ccv-contact-direct{
    position:sticky;
    top:104px;
    align-self:start;
  }
}
.ccv-contact-kaart{
  background:var(--card);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  padding:34px 34px 30px;
}
.ccv-contact-kaart > .eyebrow{
  display:inline-block;font-family:'Fredoka',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.05em;color:var(--accent-deep);background:var(--pill);
  padding:6px 14px;border-radius:var(--r-pill);margin-bottom:12px;
}
.ccv-contact-kaart h2{font-size:clamp(24px,3vw,32px);font-weight:700;margin-bottom:8px}
.ccv-contact-kaart > p{font-size:15.5px;color:var(--muted);margin:0 0 22px}

/* ---------- de directe gegevens ---------- */
.ccv-contact-direct{display:grid;gap:14px}
.ccv-contact-regel{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:18px 20px;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.35);
}
.ccv-contact-regel:hover{transform:translateX(6px)}
.ccv-contact-regel .si{
  flex:0 0 44px;height:44px;border-radius:15px;
  display:grid;place-items:center;font-size:17px;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 4px 0 var(--accent-deep);
}
.ccv-contact-regel:nth-child(even) .si{background:var(--pop);color:var(--on-pop);box-shadow:0 4px 0 var(--pop-deep)}
.ccv-contact-regel h4{font-size:16px;font-weight:600;margin-bottom:2px}
.ccv-contact-regel p{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
.ccv-contact-regel .waarde{color:var(--accent-deep);font-weight:700}

/* ---------- socials ---------- */
.ccv-contact-socials{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.ccv-contact-socials a{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;font-size:17px;
  background:var(--bg-alt);color:var(--ink);
  transition:transform .26s cubic-bezier(.2,.9,.3,1.5),background .2s ease,color .2s ease;
}
.ccv-contact-socials a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--accent);color:var(--on-accent)}

/* ---------- snelle routes ---------- */
.ccv-routes{padding:10px 0 64px}
.ccv-routes .kop{text-align:center;max-width:620px;margin:0 auto 34px}
.ccv-routes .kop h2{font-size:clamp(26px,4vw,42px);font-weight:700;margin-bottom:10px}
.ccv-routes .kop p{font-size:16px;color:var(--muted);margin:0}
.ccv-routes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.ccv-route{
  display:block;background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:26px 24px;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.35),box-shadow .3s ease;
}
.ccv-route:hover{transform:translateY(-6px) rotate(var(--tilt));box-shadow:0 26px 44px -22px var(--accent)}
.ccv-route .em{font-size:30px;line-height:1;display:block;margin-bottom:12px}
.ccv-route h3{font-size:19px;font-weight:600;margin-bottom:6px}
.ccv-route p{font-size:14.5px;color:var(--muted);margin:0 0 14px}
.ccv-route .meer{
  font-family:'Fredoka',sans-serif;font-size:14.5px;font-weight:500;color:var(--accent-deep);
  display:inline-flex;align-items:center;gap:8px;transition:gap .3s ease;
}
.ccv-route:hover .meer{gap:14px}

/* ---------- het diepe blok onderaan ---------- */
.ccv-contact-deep{background:var(--deep-bg);padding:56px 0}
.ccv-contact-deep .binnen{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.ccv-contact-deep h2{color:var(--deep-text);font-size:clamp(24px,3.4vw,36px);font-weight:700;margin-bottom:8px}
.ccv-contact-deep p{color:var(--deep-muted);font-size:15.5px;margin:0;max-width:520px}
.ccv-contact-deep .knoppen{display:flex;gap:12px;flex-wrap:wrap}
.ccv-contact-deep .btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Fredoka',sans-serif;font-size:15.5px;font-weight:500;
  padding:14px 26px;border-radius:var(--r-pill);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.ccv-contact-deep .btn-groen{background:var(--deep-accent);color:#0f1a05;box-shadow:0 5px 0 rgba(0,0,0,.4)}
.ccv-contact-deep .btn-paars{background:var(--pop);color:var(--on-pop);box-shadow:0 5px 0 var(--pop-deep)}
.ccv-contact-deep .btn:hover{transform:translateY(3px)}
.ccv-contact-deep .btn-groen:hover{box-shadow:0 2px 0 rgba(0,0,0,.4)}
.ccv-contact-deep .btn-paars:hover{box-shadow:0 2px 0 var(--pop-deep)}

/* ---------- het formulier in de kaart ---------- */
.ccv-contact-kaart .gform_wrapper .gform_fields{gap:14px}
.ccv-contact-kaart .gform_wrapper .gform_footer{margin-top:16px}

/* ============================================================
   Het boek — de drie varianten
   ============================================================ */

.ccv-boek{font-family:'Nunito',sans-serif}
.ccv-boek *{box-sizing:border-box}
.ccv-boek .wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.ccv-boek-kop{text-align:center;max-width:660px;margin:0 auto 42px}
.ccv-boek-kop .eyebrow{
  display:inline-block;font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.05em;color:var(--accent-deep);background:var(--pill);
  padding:7px 16px;border-radius:var(--r-pill);margin-bottom:16px;
}
.ccv-boek-kop h2{
  font-family:'Fredoka',sans-serif;font-size:clamp(28px,4.4vw,46px);font-weight:700;
  color:var(--ink);line-height:1.1;margin:0 0 12px;letter-spacing:-.01em;
}
.ccv-boek-kop .squiggle{position:relative;display:inline-block;color:var(--accent-deep)}
.ccv-boek-kop .squiggle::after{
  content:'';position:absolute;left:0;right:0;bottom:-.12em;height:.16em;
  border-radius:var(--r-pill);background:var(--accent);box-shadow:var(--glow-accent);
}
.ccv-boek-kop p{font-size:16.5px;color:var(--muted);margin:0}

.ccv-boek-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.ccv-boek-kaart{
  display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:26px 24px 24px;text-align:center;
  transition:transform .32s cubic-bezier(.2,.9,.3,1.35),box-shadow .32s ease;
}
.ccv-boek-kaart:hover{transform:translateY(-7px) rotate(var(--tilt));box-shadow:0 26px 44px -22px var(--accent)}
.ccv-boek-omslag{
  border-radius:var(--r-md);overflow:hidden;margin-bottom:18px;
  box-shadow:0 14px 28px -16px rgba(20,33,10,.5);
}
.ccv-boek-omslag img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.ccv-boek-soort{
  font-family:'Fredoka',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.ccv-boek-kaart h3{
  font-family:'Fredoka',sans-serif;font-size:21px;font-weight:600;
  color:var(--ink);margin:6px 0 8px;
}
/* De marge onderaan stond eerst op het prijsblok; dat is weg, dus hij hoort
   nu bij de tekst erboven. */
.ccv-boek-kaart p{font-size:14.5px;color:var(--muted);margin:0 0 22px;flex:1}
.ccv-boek-knop{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Fredoka',sans-serif;font-size:15.5px;font-weight:500;
  padding:13px 24px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);text-decoration:none;
  box-shadow:0 5px 0 var(--accent-deep);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.ccv-boek-knop:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-deep)}
.ccv-boek-meer{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Fredoka',sans-serif;font-size:14px;font-weight:500;
  color:var(--accent-deep);text-decoration:none;margin-top:12px;
  transition:gap .3s ease;
}
.ccv-boek-kaart:hover .ccv-boek-meer{gap:14px}

/* ============================================================
   Slotblok van de boekpagina

   Stond eerst als twee platte knoppen boven een los zwevend logo.
   Nu één kaart met de omslag ernaast.
   ============================================================ */

.ccv-boek-slot{font-family:'Nunito',sans-serif}
.ccv-boek-slot .wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.ccv-boek-slot-kaart{
  display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;
  background:var(--card);border-radius:var(--r-xl);
  box-shadow:var(--shadow);padding:44px 46px;
}
.ccv-boek-slot .eyebrow{
  display:inline-block;font-family:'Fredoka',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.05em;color:var(--accent-deep);background:var(--pill);
  padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px;
}
.ccv-boek-slot h2{
  font-family:'Fredoka',sans-serif;font-size:clamp(26px,3.6vw,40px);font-weight:700;
  color:var(--ink);line-height:1.12;margin:0 0 12px;letter-spacing:-.01em;
}
.ccv-boek-slot .squiggle{position:relative;display:inline-block;color:var(--accent-deep)}
.ccv-boek-slot .squiggle::after{
  content:'';position:absolute;left:0;right:0;bottom:-.12em;height:.15em;
  border-radius:var(--r-pill);background:var(--accent);box-shadow:var(--glow-accent);
}
.ccv-boek-slot p{font-size:16px;color:var(--muted);margin:0 0 22px}
.ccv-boek-slot .knoppen{display:flex;gap:12px;flex-wrap:wrap}
.ccv-boek-slot .knoppen a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Fredoka',sans-serif;font-size:15.5px;font-weight:500;
  padding:14px 26px;border-radius:var(--r-pill);text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.ccv-boek-slot .kn-groen{background:var(--accent);color:var(--on-accent);box-shadow:0 5px 0 var(--accent-deep)}
.ccv-boek-slot .kn-groen:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-deep)}
.ccv-boek-slot .kn-paars{background:var(--pop);color:var(--on-pop);box-shadow:0 5px 0 var(--pop-deep)}
.ccv-boek-slot .kn-paars:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--pop-deep)}
.ccv-boek-slot .beeld img{
  width:100%;border-radius:var(--r-lg);display:block;
  box-shadow:0 22px 40px -22px rgba(20,33,10,.55);
  transform:rotate(calc(var(--tilt) * .7));
  transition:transform .4s cubic-bezier(.2,.9,.3,1.3);
}
.ccv-boek-slot .beeld img:hover{transform:rotate(0deg)}

@media(max-width:860px){
  .ccv-boek-slot-kaart{grid-template-columns:1fr;gap:26px;padding:30px 24px}
  .ccv-boek-slot .beeld{max-width:280px;margin:0 auto}
}

@media(max-width:900px){
  .ccv-contact-grid{grid-template-columns:1fr;gap:22px;padding:44px 0}
  .ccv-contact-kaart{padding:26px 22px 24px}
  .ccv-contact-deep .binnen{flex-direction:column;align-items:flex-start}
}

@media(prefers-reduced-motion:reduce){
  .ccv-contact *{transition:none !important}
}

/* ============================================================
   Vakantiewoning Spanje

   De pagina had alleen een voorzieningenraster en een galerij.
   Deze blokken vullen aan: aanvraagformulier, indeling, omgeving
   en veelgestelde vragen.
   ============================================================ */

.ccv-boeken,.ccv-indeling,.ccv-omgeving,.ccv-praktischspanje{font-family:'Nunito',sans-serif}
.ccv-boeken .wrap,.ccv-indeling .wrap,.ccv-omgeving .wrap,.ccv-praktischspanje .wrap{
  max-width:1140px;margin:0 auto;padding:0 26px;
}
.ccv-kop{text-align:center;max-width:680px;margin:0 auto 36px}
.ccv-kop .eyebrow,.ccv-boeken .eyebrow{
  display:inline-block;font-family:'Fredoka',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.05em;color:var(--accent-deep);background:var(--pill);
  padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px;
}
.ccv-kop h2,.ccv-boeken h2{
  font-family:'Fredoka',sans-serif;font-size:clamp(26px,3.6vw,40px);font-weight:700;
  color:var(--ink);line-height:1.14;letter-spacing:-.01em;margin:0 0 12px;
}
.ccv-kop .squiggle,.ccv-boeken .squiggle{position:relative;display:inline-block;color:var(--accent-deep)}
.ccv-kop .squiggle::after,.ccv-boeken .squiggle::after{
  content:'';position:absolute;left:0;right:0;bottom:-.1em;height:.14em;
  border-radius:var(--r-pill);background:var(--accent);box-shadow:var(--glow-accent);
}
.ccv-kop p{font-size:16px;color:var(--muted);margin:0}

/* aanvraagformulier */
.ccv-boeken-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}

/* En de linkerkolom loopt mee, om dezelfde reden als op de contactpagina.

   Het aanvraagformulier rechts is een stuk langer dan de tekst links.
   Wie het invult, scrolt de kortingscode, het aantal personen en het
   mailadres uit beeld - net de dingen waar je tijdens het invullen naar
   terugkijkt. De 104px en de grens van 901px zijn dezelfde als daar:
   plakkende header plus lucht, en onder die breedte staan de twee
   onder elkaar en heeft meelopen geen zin. */
@media(min-width:901px){
  .ccv-boeken-tekst{
    position:sticky;
    top:104px;
    align-self:start;
  }
}
.ccv-boeken-tekst p{font-size:16px;line-height:1.7;color:var(--text);margin:0 0 20px}
.ccv-boeken-punten{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.ccv-boeken-punten li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--text)}
.ccv-boeken-punten i{color:var(--accent-deep);margin-top:3px;width:18px;text-align:center}
.ccv-boeken-punten code{
  background:var(--pill);color:var(--accent-deep);font-family:'Fredoka',sans-serif;
  font-weight:600;padding:2px 9px;border-radius:var(--r-pill);font-size:14px;
}
.ccv-boeken-noot{font-size:13.5px;color:var(--muted)}
.ccv-boeken-noot a{color:var(--accent-deep);font-weight:700}
.ccv-boeken-formulier{
  background:var(--card);border-radius:var(--r-xl);padding:32px 30px;box-shadow:var(--shadow);
}

/* indeling */
.ccv-ruimtes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.ccv-ruimte{
  background:var(--card);border-radius:var(--r-lg);padding:22px 22px 20px;
  box-shadow:var(--shadow);border-left:3px solid var(--accent);
}
.ccv-ruimte i{font-size:20px;color:var(--accent-deep);margin-bottom:11px;display:block}
.ccv-ruimte h4{font-family:'Fredoka',sans-serif;font-size:16.5px;font-weight:600;color:var(--ink);margin:0 0 6px}
.ccv-ruimte p{font-size:13.8px;line-height:1.6;color:var(--muted);margin:0}

/* omgeving */
.ccv-omgeving-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}
.ccv-omgeving-kaart{background:var(--card);border-radius:var(--r-lg);padding:26px 26px;box-shadow:var(--shadow)}
.ccv-omgeving-kaart h4{
  display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;
  font-size:18px;font-weight:600;color:var(--ink);margin:0 0 10px;
}
.ccv-omgeving-kaart h4 i{color:var(--accent-deep);font-size:16px}
.ccv-omgeving-kaart p{font-size:14.5px;line-height:1.68;color:var(--text);margin:0}

/* veelgestelde vragen */
.ccv-vragen{max-width:820px;margin:0 auto;display:grid;gap:11px}
.ccv-vraag{
  background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;
}
.ccv-vraag summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  list-style:none;padding:18px 22px;font-family:'Fredoka',sans-serif;font-size:16.5px;
  font-weight:600;color:var(--ink);
}
.ccv-vraag summary::-webkit-details-marker{display:none}
.ccv-vraag summary i{color:var(--accent-deep);font-size:14px;transition:transform .25s ease}
.ccv-vraag[open] summary i{transform:rotate(180deg)}
.ccv-vraag p{margin:0;padding:0 22px 20px;font-size:15px;line-height:1.7;color:var(--text)}
.ccv-spanje-cta{text-align:center;margin-top:32px}
.ccv-spanje-cta p{font-size:15px;color:var(--muted);margin:0 0 14px}
.ccv-spanje-cta .kn-groen{
  display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--on-accent);
  font-family:'Fredoka',sans-serif;font-size:15.5px;font-weight:500;padding:14px 26px;
  border-radius:var(--r-pill);text-decoration:none;box-shadow:0 5px 0 var(--accent-deep);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s ease;
}
.ccv-spanje-cta .kn-groen:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-deep)}

@media(max-width:900px){
  .ccv-boeken-grid{grid-template-columns:1fr;gap:26px}
  .ccv-boeken-formulier{padding:24px 20px}
}