/* ===== Canelobre shared block styles ===== */
.cnl-block{box-sizing:border-box;margin-block:0}
.entry-content > .cnl-block{margin-block:0}
.cnl-block *{box-sizing:border-box}
/* --- Marges terug naar nul: het ontwerp regelt afstand met flex/grid-gap --- */
.cnl-block{font-family:'Lora',Georgia,serif;color:#5A463E;line-height:normal}
.cnl-block h1,.cnl-block h2,.cnl-block h3,.cnl-block h4,
.cnl-block p,.cnl-block ul,.cnl-block ol,.cnl-block figure,.cnl-block blockquote{margin:0}
/* Lopende tekst uit een rich-text-veld houdt wél witruimte tussen alinea's,
gelijk aan de lege regel (
) in het ontwerp: 1.75 x 17px */
.cnl-finca-tekstblok p + p{margin-top:29.75px}
/* Koppen: het ontwerp laat de regelhoogte los (browserstandaard) en zet eigen marges.
Deze regels moeten de reset hierboven overstemmen, vandaar de .cnl-block-prefix. */
.cnl-block .cnl-kamers-titel,.cnl-block .cnl-kaart-titel,.cnl-block .cnl-usp-kop,
.cnl-block .cnl-omgeving-titel,.cnl-block .cnl-omgeving-kop,.cnl-block .cnl-handig-titel,
.cnl-block .cnl-social-titel,.cnl-block .cnl-nieuwsbrief-titel{line-height:normal}
/* Eyebrow / buttons shared */
.cnl-eyebrow{font-family:'Oswald',sans-serif;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.26em;color:#A8935C}
.cnl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Oswald','Arial Narrow',sans-serif;font-weight:500;font-size:13px;line-height:normal;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:13px 26px;border:1px solid transparent;border-radius:6px;transition:background .25s,color .25s,border-color .25s;cursor:pointer}
.cnl-btn-primary{background:#B96A4B;color:#FBF6EA;border-color:transparent}
.cnl-btn-primary:hover{background:#A85C3F;color:#FBF6EA}
.cnl-btn-secondary{background:transparent;color:#392722;border-color:#392722}
.cnl-btn-secondary:hover{color:#A8935C}
.cnl-btn-ondark{background:transparent;color:#F4ECD8;border-color:rgba(244,236,216,.25)}
.cnl-btn-ondark:hover{color:#C6B785;border-color:#C6B785}
.cnl-btn-lg{padding:16px 34px;font-size:14px}
/* Gedeelde onderdelen: gouden ruit, labellink, noot, pijlen, segmenten */
.cnl-ruit{width:5px;height:5px;flex:none;background:#A8935C;transform:rotate(45deg);opacity:.75}
.cnl-link-label{font-family:'Oswald',sans-serif;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.26em;color:#A8935C;text-decoration:none;transition:color .25s}
.cnl-link-label:hover{color:#B96A4B}
.cnl-link-label-tight{letter-spacing:.12em}
.cnl-noot{font-family:'Lora',Georgia,serif;font-style:italic;font-size:13px;color:#A8935C;white-space:nowrap}
.cnl-pijl{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#C6B785;border:none;border-radius:3px;cursor:pointer;font-family:'Lora',Georgia,serif;font-size:18px;color:#2E2620;transition:background .25s}
.cnl-pijl:hover{background:#A8935C}
.cnl-pijlen{display:flex;gap:10px}
.cnl-segmenten{display:flex}
/* Slides: alleen de actieve foto is zichtbaar */
.cnl-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s ease}
.cnl-slide.is-actief{opacity:1}
/* ===== Hero ===== */
.cnl-block.cnl-hero{position:relative;height:calc(84vh + 111px);min-height:791px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:0}
.cnl-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.cnl-hero-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,22,19,.30) 0%,rgba(31,22,19,.18) 45%,rgba(31,22,19,.55) 100%)}
.cnl-hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 62% 55% at 50% 42%,rgba(31,22,19,.85) 0%,rgba(31,22,19,.45) 55%,rgba(31,22,19,0) 100%);opacity:.55}
.cnl-hero-inner{position:relative;text-align:center;max-width:980px;padding:0 40px 190px;display:flex;flex-direction:column;align-items:center;gap:26px}
.cnl-hero-eyebrow{font-family:'Oswald',sans-serif;font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.26em;color:#C6B785}
.cnl-block .cnl-hero-titel{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:72px;line-height:1.05;color:#FBF6EA;text-wrap:balance;text-shadow:0 2px 30px rgba(31,22,19,.45)}
.cnl-block .cnl-hero-tagline{margin:0;font-family:'Lora',Georgia,serif;font-size:24px;line-height:1.6;color:rgba(251,246,234,.92);max-width:560px;text-shadow:0 2px 20px rgba(31,22,19,.4)}
/* Boekingsbalk */
.cnl-hero-boeking{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 48px);z-index:5;background:#FBF6EA;border:1px solid rgba(90,70,62,.18);border-radius:4px;box-shadow:0 18px 40px rgba(31,22,19,.28);display:flex;align-items:flex-end;gap:28px;padding:26px 34px}
.cnl-boek-veld{display:flex;flex-direction:column;gap:10px}
.cnl-boek-veld label{font-family:'Oswald',sans-serif;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.26em;color:#5A463E}
.cnl-boek-veld input{font-family:'Lora',Georgia,serif;font-size:15px;color:#2E2620;background:#fff;border:1px solid rgba(90,70,62,.28);border-radius:3px;padding:11px 14px;width:198px;outline:none}
.cnl-boek-actie{position:relative;display:flex;flex-direction:column;align-items:center}
.cnl-block .cnl-boek-noot{position:absolute;top:100%;margin-top:6px;font-family:'Lora',Georgia,serif;font-style:italic;font-size:13px;color:#A8935C;white-space:nowrap}
/* ===== Recensiebalk ===== */
.cnl-recensies{background:#F4ECD8;border-bottom:1px solid rgba(90,70,62,.14);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:36px;padding:26px 40px}
.cnl-recensie{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.cnl-recensie-platform{font-family:'Oswald',sans-serif;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.26em;color:#A8935C}
.cnl-recensie-score{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:28px;color:#392722}
.cnl-recensie-schaal{font-size:18px;color:#5A463E}
.cnl-recensie-aantal{font-family:'Lora',Georgia,serif;font-size:14px;color:#5A463E}
/* ===== Een huis met een verhaal ===== */
.cnl-finca{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:110px 7vw;background:#FBF6EA}
.cnl-finca-tekst{display:flex;flex-direction:column;gap:24px;max-width:560px}
.cnl-block .cnl-finca-titel{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:48px;line-height:1.1;color:#392722}
.cnl-finca-tekstblok{font-family:'Lora',Georgia,serif;font-size:17px;line-height:1.75;color:#5A463E}
.cnl-finca-tekstblok p{margin:0 0 1.2em}
.cnl-finca-tekstblok p:last-child{margin-bottom:0}
.cnl-block .cnl-finca-knoppen{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.cnl-finca-media{display:flex;flex-direction:column;gap:16px}
.cnl-finca-foto{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 18px 40px rgba(57,39,34,.14);background:#EBDFC4}
.cnl-finca-controls{display:flex;align-items:center;gap:20px}
.cnl-finca-controls .cnl-segmenten{flex:1;gap:0}
.cnl-finca-controls .cnl-segment{flex:1;height:2px;background:rgba(90,70,62,.22);transition:background .25s}
.cnl-finca-controls .cnl-segment.is-actief{background:#392722}
/* ===== Kies uw verblijf ===== */
.cnl-kamers{background:#F4ECD8;padding:100px 7vw}
.cnl-block .cnl-kamers-kop{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:48px}
.cnl-block .cnl-kamers-titel{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:44px;color:#392722}
.cnl-kamers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cnl-kaart{background:#fff;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 26px rgba(57,39,34,.08)}
.cnl-kaart-foto{aspect-ratio:3/2;overflow:hidden;background:#EBDFC4}
.cnl-kaart-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cnl-kaart-body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.cnl-block .cnl-kaart-titel{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:27px;color:#392722}
.cnl-block .cnl-kaart-tekst{margin:0;font-family:'Lora',Georgia,serif;font-size:15px;line-height:1.65;color:#5A463E;flex:1}
.cnl-block .cnl-kaart-link{font-family:'Oswald',sans-serif;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#A8935C;text-decoration:none;margin-top:6px;transition:color .25s}
.cnl-kaart-link:hover{color:#B96A4B}
.cnl-block .cnl-kamers-cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:56px}
/* ===== USP grid (donker) ===== */
.cnl-usp{background:#2E2620;padding:110px 7vw;display:flex;flex-direction:column;gap:64px}
.cnl-block .cnl-usp-titel{margin:0;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:52px;line-height:1.1;color:#F4ECD8;text-wrap:balance}
.cnl-usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.cnl-usp-kolom{display:flex;flex-direction:column;gap:18px;border-top:1px solid #A8935C;padding-top:26px}
.cnl-usp-foto{position:relative;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:#1F1613}
.cnl-block .cnl-usp-kop{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:28px;color:#C6B785}
.cnl-block .cnl-usp-lijst{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.cnl-usp-lijst li{display:flex;gap:12px;font-family:'Lora',Georgia,serif;font-size:15.5px;line-height:1.6;color:rgba(244,236,216,.85)}
.cnl-usp-streep{color:#A8935C;flex:none}
.cnl-block .cnl-usp-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:-24px}
.cnl-usp-controls .cnl-segmenten{gap:8px}
.cnl-usp-controls .cnl-segment{width:28px;height:2px;background:rgba(244,236,216,.25);transition:background .25s}
.cnl-usp-controls .cnl-segment.is-actief{background:#C6B785}
.cnl-usp-cta{display:flex;justify-content:center}
/* ===== Uitvalsbasis ===== */
.cnl-omgeving{background:#FBF6EA;padding:110px 7vw}
.cnl-block .cnl-omgeving-titel{margin:0 0 72px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:44px;color:#392722;text-align:center;text-wrap:balance}
.cnl-block .cnl-omgeving-rijen{display:flex;flex-direction:column;gap:64px;max-width:1080px;margin:0 auto}
.cnl-omgeving-rij{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cnl-omgeving-rij:nth-child(even) .cnl-omgeving-foto{order:2}
.cnl-omgeving-rij:nth-child(even) .cnl-omgeving-tekst{order:1}
.cnl-omgeving-foto{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#EBDFC4}
.cnl-omgeving-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cnl-omgeving-tekst{display:flex;flex-direction:column;gap:16px}
.cnl-block .cnl-omgeving-kop{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:32px;color:#392722}
.cnl-block .cnl-omgeving-body{margin:0;font-family:'Lora',Georgia,serif;font-size:15.5px;line-height:1.75;color:#5A463E}
/* ===== Handig om te weten ===== */
.cnl-handig{position:relative;padding:120px 7vw;overflow:hidden}
.cnl-handig-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.cnl-handig-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,22,19,.85) 0%,rgba(31,22,19,.55) 55%,rgba(31,22,19,.25) 100%)}
.cnl-handig-inner{position:relative;max-width:600px;display:flex;flex-direction:column;gap:28px}
.cnl-block .cnl-handig-titel{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:44px;color:#F4ECD8}
.cnl-block .cnl-handig-lijst{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.cnl-handig-lijst li{display:flex;gap:14px;font-family:'Lora',Georgia,serif;font-size:16.5px;line-height:1.6;color:rgba(244,236,216,.92)}
.cnl-vink{color:#C6B785;flex:none}
.cnl-block .cnl-handig-knop{margin-top:6px;align-self:flex-start}
/* Variant "Highlight" op de binnenpagina's: iets krapper dan op de homepage. */
.cnl-handig.cnl-handig--pagina{padding:118px 7vw}
.cnl-handig--pagina .cnl-handig-inner{max-width:620px;gap:26px}
.cnl-block.cnl-handig--pagina .cnl-handig-titel{font-size:42px}
.cnl-block.cnl-handig--pagina .cnl-handig-lijst{gap:15px}
/* ===== Social gallery ===== */
.cnl-social{background:#FBF6EA;padding:100px 7vw;text-align:center}
.cnl-block .cnl-social-titel{margin:0 0 14px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:40px;color:#392722}
.cnl-social-handle{color:#A8935C;text-decoration:none;font-style:italic}
.cnl-block .cnl-social-kanalen{margin:0 0 44px;font-family:'Oswald',sans-serif;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.26em;color:#5A463E}
.cnl-social-kanalen a{color:#5A463E;text-decoration:none;transition:color .25s}
.cnl-social-kanalen a:hover{color:#A8935C}
.cnl-social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cnl-social-tegel{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;display:block;background:#EBDFC4}
.cnl-social-tegel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms ease}
.cnl-social-tegel:hover img{transform:scale(1.04)}
.cnl-social-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(31,22,19,.35)}
.cnl-social-overlay img{width:55%;height:auto;display:block;transition:none}
.cnl-social-tegel:hover .cnl-social-overlay img{transform:none}
/* ===== Nieuwsbrief ===== */
.cnl-nieuwsbrief{position:relative;padding:110px 7vw;overflow:hidden;display:flex;justify-content:center}
.cnl-nieuwsbrief-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.cnl-nieuwsbrief-waas{position:absolute;inset:0;background:rgba(31,22,19,.62)}
.cnl-nieuwsbrief-kaart{position:relative;background:#FBF6EA;border-radius:10px;padding:56px 60px;max-width:760px;width:100%;display:flex;flex-direction:column;gap:20px;text-align:center;box-shadow:0 24px 60px rgba(31,22,19,.35)}
.cnl-block .cnl-nieuwsbrief-titel{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:38px;color:#392722;text-wrap:balance}
.cnl-block .cnl-nieuwsbrief-tekst{margin:0;font-family:'Lora',Georgia,serif;font-size:16px;line-height:1.7;color:#5A463E}
.cnl-block .cnl-nieuwsbrief-formulier{margin-top:8px;text-align:left}
.cnl-nieuwsbrief-formulier-leeg{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
.cnl-nb-veld input{width:100%;font-family:'Lora',Georgia,serif;font-size:17px;line-height:1.7;padding:12px 14px;border-radius:6px;border:1px solid rgba(90,70,62,.22);background:#fff;color:#392722;outline:none}
.cnl-block .cnl-nieuwsbrief-hint{margin:0;font-family:'Lora',Georgia,serif;font-style:italic;font-size:13px;color:#A8935C}
/* --- WPForms binnen het nieuwsbriefblok: zelfde vorm als het ontwerp ---
WPForms laadt zijn CSS ná deze, dus deze regels hebben bewust extra gewicht. */
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container{margin:0;padding:0}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-form{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-field-container{display:contents}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .cnl-nb-naam{grid-column:1}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .cnl-nb-email{grid-column:2}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-submit-container{grid-column:3;margin:0;padding:0}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-field{margin:0;padding:0}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-field-text{position:absolute;width:1px;height:1px;overflow:hidden;z-index:-1000}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container input.wpforms-field-medium{width:100%;max-width:100%;height:auto;font-family:'Lora',Georgia,serif;font-size:17px;line-height:1.7;padding:12px 14px;border:1px solid rgba(90,70,62,.22);border-radius:6px;background:#fff;color:#392722;box-shadow:none}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container input.wpforms-field-medium:focus{border-color:#6E8CA0}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container button.wpforms-submit{height:auto;font-family:'Oswald','Arial Narrow',sans-serif;font-weight:500;font-size:13px;line-height:normal;letter-spacing:.12em;text-transform:uppercase;padding:13px 26px;border:1px solid transparent;border-radius:6px;background:#B96A4B;color:#FBF6EA}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container button.wpforms-submit:hover{background:#A85C3F;color:#FBF6EA}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-confirmation-container-full{margin:0;padding:0;border:none;background:none;font-family:'Lora',Georgia,serif;font-style:italic;font-size:17px;line-height:1.7;color:#7C7A54;text-align:center}
/* ===== Responsive ===== */
@media (max-width:1100px){
.cnl-finca{grid-template-columns:1fr;gap:48px;padding:80px 6vw}
.cnl-finca-tekst{max-width:none}
.cnl-omgeving-rij{gap:36px}
}
@media (max-width:900px){
.cnl-block .cnl-hero-titel{font-size:48px}
.cnl-block .cnl-hero-tagline{font-size:19px}
.cnl-hero-inner{padding-bottom:150px}
.cnl-hero-boeking{flex-wrap:wrap;gap:16px;padding:20px}
.cnl-boek-veld input{width:100%}
.cnl-recensies{gap:20px;padding:22px 24px}
.cnl-kamers,.cnl-social{padding:72px 6vw}
.cnl-usp,.cnl-omgeving{padding:80px 6vw}
.cnl-block .cnl-usp-titel{font-size:38px}
.cnl-block .cnl-finca-titel,.cnl-block .cnl-kamers-titel,.cnl-block .cnl-omgeving-titel,.cnl-block .cnl-handig-titel{font-size:34px}
.cnl-block .cnl-omgeving-titel{margin-bottom:48px}
.cnl-omgeving-rij{grid-template-columns:1fr;gap:24px}
.cnl-omgeving-rij:nth-child(even) .cnl-omgeving-foto{order:0}
.cnl-omgeving-rij:nth-child(even) .cnl-omgeving-tekst{order:0}
.cnl-handig{padding:80px 6vw}
.cnl-nieuwsbrief{padding:80px 6vw}
.cnl-nieuwsbrief-kaart{padding:40px 28px}
.cnl-nieuwsbrief-formulier-leeg,
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-form{grid-template-columns:1fr}
}
@media (max-width:600px){
.cnl-hero{height:auto;min-height:70vh}
.cnl-block .cnl-hero-titel{font-size:38px}
.cnl-recensies{flex-direction:column;gap:16px}
.cnl-recensies .cnl-ruit{display:none}
.cnl-block .cnl-kamers-kop{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:32px}
.cnl-kamers-grid,.cnl-usp-grid,.cnl-social-grid{grid-template-columns:1fr}
.cnl-usp{gap:44px}
.cnl-block .cnl-usp-controls{margin-top:0}
}
/* ===== Boekingsbalk: datumvelden =====
In plaats van het kale dd-mm-jjjj van de browser staat er "Datum toevoegen"
tot er gekozen is; daarna de datum voluit. De echte datumkiezer ligt er
onzichtbaar overheen, zodat aantikken gewoon de kalender opent. */
.cnl-boek-veld { cursor: pointer; }
.cnl-block .cnl-boek-label {
font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px;
text-transform: uppercase; letter-spacing: .26em; color: #5A463E;
}
.cnl-boek-vak {
position: relative; display: flex; align-items: center; gap: 10px;
width: 198px; height: 47px; padding: 0 14px; box-sizing: border-box;
background: #fff; border: 1px solid rgba(168, 147, 92, .45); border-radius: 3px;
transition: border-color .25s, box-shadow .25s, background .25s;
}
.cnl-boek-veld:hover .cnl-boek-vak { border-color: #A8935C; }
.cnl-boek-vak:focus-within {
border-color: #A8935C; box-shadow: 0 0 0 3px rgba(168, 147, 92, .16);
}
.cnl-boek-icoon { flex: none; color: #A8935C; }
.cnl-boek-waarde {
font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 14.5px;
color: #9A8577; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: color .2s;
}
/* Zodra er een datum staat: rechtop, donker, en met wat meer gewicht. */
.cnl-boek-vak.is-gekozen .cnl-boek-waarde {
font-style: normal; font-size: 15px; color: #2E2620; letter-spacing: .01em;
}
.cnl-boek-vak.is-gekozen { background: #FFFDF7; border-color: rgba(168, 147, 92, .7); }
/* De echte kiezer ligt onzichtbaar over het hele vak. */
.cnl-block .cnl-boek-input {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; padding: 0; border: 0; background: transparent;
color: transparent; font-size: 16px; /* 16px voorkomt inzoomen op iOS */
opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.cnl-block .cnl-boek-input::-webkit-calendar-picker-indicator {
position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
opacity: 0; cursor: pointer;
}
/* ===== Boekingsbalk op telefoon en tablet =====
Aankomst links, vertrek rechts, de knop op volle breedte eronder — dezelfde
indeling die grotere hotelsites gebruiken. Twee kolommen houden de balk
compact zodat er onder de sfeerfoto nog iets te zien blijft. */
@media (max-width: 860px) {
.cnl-hero-boeking {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 14px 12px;
width: calc(100% - 32px);
max-width: 480px;
padding: 20px 18px;
bottom: 28px;
}
.cnl-boek-veld { min-width: 0; gap: 8px; }
.cnl-boek-vak { width: 100%; height: 46px; padding: 0 11px; gap: 8px; }
.cnl-block .cnl-boek-label { font-size: 10px; letter-spacing: .2em; }
.cnl-boek-waarde { font-size: 13.5px; }
.cnl-boek-vak.is-gekozen .cnl-boek-waarde { font-size: 14px; }
/* De knop pakt allebei de kolommen. */
.cnl-boek-actie { grid-column: 1 / -1; align-items: stretch; margin-top: 2px; }
.cnl-boek-actie .cnl-btn { width: 100%; justify-content: center; text-align: center; }
/* De regel eronder mag hier gewoon meelopen in plaats van te zweven. */
.cnl-block .cnl-boek-noot {
position: static; margin-top: 10px; text-align: center; white-space: normal;
}
}
/* Op de smalste telefoons past "Datum toevoegen" niet meer naast het icoontje. */
@media (max-width: 400px) {
.cnl-boek-vak { padding: 0 9px; gap: 6px; }
.cnl-boek-waarde { font-size: 12.5px; }
.cnl-boek-icoon { width: 13px; height: 13px; }
}
/* ===== Datumkiezer =====
Een eigen kalender over het scherm. Op een telefoon vult hij alles, op een
breed scherm staat hij als paneel in het midden. Twaalf maanden onder
elkaar, zodat je gewoon kunt doorscrollen naar het seizoen dat je wilt. */
body.cnl-kalender-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.cnl-kalender {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: rgba(31, 22, 19, .55);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cnl-kalender[hidden] { display: none; }
.cnl-kalender-paneel {
display: flex; flex-direction: column;
width: 100%; max-width: 520px; max-height: 100%;
background: #FBF6EA; color: #392722;
box-shadow: 0 30px 80px rgba(31, 22, 19, .45);
}
/* --- kop --- */
.cnl-kalender-kop {
position: relative; flex: none;
padding: 26px 62px 20px 26px;
border-bottom: 1px solid rgba(168, 147, 92, .3);
}
.cnl-kalender-titel {
margin: 0;
font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
font-size: 27px; line-height: 1.2; color: #392722;
}
.cnl-kalender-sluit {
position: absolute; top: 22px; right: 22px;
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid rgba(90, 70, 62, .3); border-radius: 50%;
color: #5A463E; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.cnl-kalender-sluit:hover { background: #392722; border-color: #392722; color: #FBF6EA; }
/* --- gekozen datums --- */
.cnl-kalender-samenvatting {
flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px;
padding: 14px 26px; background: #F4ECD8;
border-bottom: 1px solid rgba(168, 147, 92, .3);
font-family: 'Lora', Georgia, serif; font-size: 14.5px; color: #392722;
}
.cnl-kalender-samenvatting[hidden] { display: none; }
.cnl-kalender-samenvatting em {
display: block; margin-bottom: 2px;
font-family: 'Oswald', sans-serif; font-style: normal; font-weight: 500;
font-size: 10px; text-transform: uppercase; letter-spacing: .24em; color: #A8935C;
}
.cnl-kalender-nachten {
margin-left: auto; align-self: center;
font-family: 'Oswald', sans-serif; font-size: 11px;
text-transform: uppercase; letter-spacing: .18em; color: #B96A4B;
}
/* --- dagkoppen --- */
.cnl-kalender-weekdagen {
flex: none; display: grid; grid-template-columns: repeat(7, 1fr);
padding: 12px 20px; border-bottom: 1px solid rgba(168, 147, 92, .3);
background: #FBF6EA;
}
.cnl-kalender-weekdagen span {
text-align: center;
font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px;
text-transform: uppercase; letter-spacing: .1em; color: #A8935C;
}
/* --- de maanden --- */
.cnl-kalender-maanden {
flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 4px 20px 30px;
}
.cnl-kalender-maand { padding-top: 22px; }
.cnl-kalender-maandnaam {
margin: 0 0 12px;
font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11.5px;
text-transform: uppercase; letter-spacing: .24em; color: #B96A4B;
}
.cnl-kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cnl-kalender-dag {
position: relative; aspect-ratio: 1 / 1; min-height: 40px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-radius: 50%; cursor: pointer;
font-family: 'Lora', Georgia, serif; font-size: 15.5px; color: #392722;
transition: background .18s, color .18s;
}
.cnl-kalender-dag:hover:not(:disabled) { background: rgba(168, 147, 92, .22); }
.cnl-kalender-dag.is-uit { color: rgba(90, 70, 62, .28); cursor: default; }
.cnl-kalender-dag.is-vandaag:not(.is-aankomst):not(.is-vertrek) {
box-shadow: inset 0 0 0 1px rgba(168, 147, 92, .6);
}
.cnl-kalender-dag.is-tussen { background: rgba(168, 147, 92, .2); border-radius: 0; }
.cnl-kalender-dag.is-aankomst,
.cnl-kalender-dag.is-vertrek {
background: #A8935C; color: #FBF6EA; font-weight: 500;
}
.cnl-kalender-dag.is-aankomst:hover,
.cnl-kalender-dag.is-vertrek:hover { background: #96814B; }
/* --- op een telefoon vult hij het scherm --- */
@media (max-width: 620px) {
.cnl-kalender { align-items: stretch; }
.cnl-kalender-paneel { max-width: none; height: 100%; }
.cnl-kalender-titel { font-size: 23px; }
.cnl-kalender-kop { padding: 22px 58px 16px 20px; }
.cnl-kalender-sluit { top: 18px; right: 18px; }
.cnl-kalender-samenvatting { padding: 12px 20px; font-size: 13.5px; }
.cnl-kalender-weekdagen { padding: 10px 14px; }
.cnl-kalender-maanden { padding: 4px 14px 30px; }
.cnl-kalender-dag { min-height: 42px; font-size: 16px; }
}
/* Op een breed scherm hoort het een paneel te zijn, geen kolom van rand tot
rand: iets lager dan het venster en met dezelfde zachte hoek als de
boekingsbalk zelf. */
@media (min-width: 621px) {
.cnl-kalender { padding: 5vh 20px; }
.cnl-kalender-paneel { max-height: min(86vh, 740px); border-radius: 4px; overflow: hidden; }
}
/* ===== Recensiebalk op telefoon =====
Gecentreerd onder elkaar liep alles rafelig; als tabel met drie kolommen
staan de namen, cijfers en aantallen recht onder elkaar en lees je in één
oogopslag welk cijfer bij welk kanaal hoort. Een haarlijn scheidt de drie.
De rijen zelf verdwijnen als kader (display:contents) zodat hun drie delen
rechtstreeks in de kolommen van de sectie vallen. */
@media (max-width: 999px) {
.cnl-recensies {
display: grid;
grid-template-columns: auto auto 1fr;
justify-content: start;
align-items: stretch;
column-gap: 16px; row-gap: 0;
padding: 8px 24px;
text-align: left;
}
.cnl-recensies .cnl-ruit { display: none; }
.cnl-recensie { display: contents; }
.cnl-recensie > span {
display: flex; align-items: center;
padding: 13px 0;
border-bottom: 1px solid rgba(168, 147, 92, .3);
}
.cnl-recensie:last-child > span { border-bottom: 0; }
.cnl-recensie-platform { font-size: 11px; letter-spacing: .14em; }
.cnl-recensie-score { font-size: 25px; line-height: 1; }
.cnl-recensie-schaal { font-size: 15px; }
.cnl-recensie-aantal { font-size: 13.5px; color: #8A7466; }
}
/* De haarlijn liep in stukjes doordat de kolomruimte er tussenuit viel.
Ruimte als padding binnen de cel houdt de lijn heel. */
@media (max-width: 999px) {
.cnl-recensies { column-gap: 0; }
.cnl-recensie > span { padding-right: 18px; }
.cnl-recensie > span:last-child { padding-right: 0; }
}
/* ===== USP grid: bediening per foto =====
Op een breed scherm blijft de gezamenlijke knop; daar zie je alle drie de
foto's tegelijk wisselen. Op een telefoon staat elke kolom op zichzelf, dus
krijgt elke foto zijn eigen pijltjes — klein en over de foto heen, zodat het
geen extra hoogte kost. */
.cnl-fotonav { display: none; }
@media (max-width: 900px) {
.cnl-usp-foto { position: relative; }
.cnl-fotonav {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 10px 10px 12px; gap: 10px;
background: linear-gradient(180deg, rgba(31, 22, 19, 0) 0%, rgba(31, 22, 19, .5) 100%);
pointer-events: none;
}
.cnl-fotopijl {
pointer-events: auto;
width: 30px; height: 30px; flex: none;
display: flex; align-items: center; justify-content: center;
background: rgba(31, 22, 19, .42); border: 0; border-radius: 50%;
color: #F4ECD8; font-size: 19px; line-height: 1; cursor: pointer;
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
transition: background .2s;
}
.cnl-fotopijl:hover, .cnl-fotopijl:active { background: rgba(31, 22, 19, .68); }
.cnl-fotostippen { display: flex; align-items: center; gap: 6px; }
.cnl-fotostip {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(244, 236, 216, .45); transition: background .2s, width .2s;
}
.cnl-fotostip.is-actief { width: 16px; border-radius: 3px; background: #F4ECD8; }
/* De gezamenlijke bediening heeft hier geen functie meer. */
.cnl-block .cnl-usp-controls { display: none; }
}
/* ===== Nieuwsbrief op telefoon en tablet =====
Het formulier ging op mobiel wel naar één kolom, maar de velden hielden hun
vaste kolomnummer (1, 2 en 3). Daardoor maakte de browser er alsnog drie
kolommen van en werd het naamveld tot nul pixels samengeknepen — het stond
er dus wel, maar was onzichtbaar. De nummers moeten mee terug naar één. */
@media (max-width: 900px) {
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .cnl-nb-naam,
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .cnl-nb-email,
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-submit-container {
grid-column: 1;
}
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container button.wpforms-submit {
width: 100%;
}
/* Hetzelfde geldt voor de opzet zonder WPForms. */
.cnl-nieuwsbrief-formulier-leeg > * { grid-column: 1; }
}
/* --- Formulierlabels ---
Elf pixels leest lastig bij een veld dat je moet invullen; twaalf en een
half is nog steeds ingetogen maar wel te lezen. Geldt voor het contact-
formulier en de nieuwsbrief. */
/* Ook de labels van het nieuwsbriefformulier meenemen. */
.cnl-block.cnl-nieuwsbrief .cnl-nieuwsbrief-kaart div.wpforms-container .wpforms-field-label { font-size: 12.5px; }
/* Dezelfde tussenstap voor de grootste koppen op de homepage. Die hebben geen
eigen regel bij 860, dus loopt de tussenstap hier al vanaf 601 pixels — anders
zou een iPad Mini een grotere kop krijgen dan een iPad Pro. */
@media (min-width: 601px) and (max-width: 1150px) {
.cnl-block .cnl-hero-titel { font-size: 58px; }
.cnl-block .cnl-finca-titel { font-size: 40px; }
}
/* De sfeerfoto op de homepage vult overal ruim negentig procent van het
scherm. Dat werkt, maar op een iPad Pro is negentig procent 1258 pixels:
je scrolt een volledig scherm voordat er iets te lezen is. In dezelfde band
als de paginakop schaalt hij minder mee, met een bovengrens. */
@media (min-width: 861px) and (max-width: 1150px) {
.cnl-block.cnl-hero {
height: calc(64vh + 111px);
min-height: 600px;
max-height: 900px;
}
}
/* Tussen 1000 en 1150 pixels passen de drie beoordelingen nog net op één regel,
mits de tussenruimte iets krapper is. Anders viel Tripadvisor als enige naar
een tweede regel en stond die scheef onder de andere twee. */
@media (min-width: 1000px) and (max-width: 1150px) {
.cnl-recensies { gap: 20px; padding-left: 24px; padding-right: 24px; }
}
/* Een iPad Air is 820 pixels breed — voor de CSS een telefoon — maar 1180
pixels hoog. 84% daarvan is 1102 pixels sfeerfoto. Het probleem zit dus niet
in de breedte maar in de hoogte van het scherm: op elk hoog scherm dat geen
breed bureaublad is, komt er een bovengrens op. De vergelijking met het
ontwerp draait op 1440 breed en blijft daarmee buiten schot. */
@media (min-height: 1000px) and (max-width: 1150px) {
.cnl-block.cnl-hero { max-height: 900px; }
}
/* De rijen van de uitvalsbasis klappen al bij 900 pixels om; dezelfde grens. */
@media (max-width: 900px) {
.cnl-block .cnl-omgeving-rij {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
}
/* De kaartrasters houden drie kolommen aan tot 1000 pixels in plaats van 1100.
Op een iPad Pro (1024 breed) staan de drie kamers daardoor naast elkaar in
plaats van twee met een losse eronder; de kaarten worden dan zo n 275 pixels,
vergelijkbaar met de 294 die het ontwerp bij 1101 al aanhoudt. Daaronder
blijven het twee kolommen, want drie zou de tekst te smal maken. */
@media (min-width: 601px) and (max-width: 1000px) {
.cnl-kamers-grid { grid-template-columns: 1fr 1fr; }
.cnl-usp-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
/* Dezelfde correctie voor de twee koppen op de homepage. */
@media (max-width: 860px) {
.cnl-block .cnl-social-titel { font-size: 32px; }
.cnl-block .cnl-nieuwsbrief-titel { font-size: 31px; }
}