:root{
  --navy:#1B2A41;
  --navy-dark:#0F1826;
  --amber:#E2792C;
  --amber-dark:#B85F1E;
  --amber-tint:#F3D6B2;
  --bg:#DDBE86;
  --surface:#FFFFFF;
  --line:#C7A461;
  --text:#1B2A41;
  --text-muted:#5A4A2E;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Public Sans', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
h1,h2,h3{
  font-family:'Big Shoulders', system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  color:var(--navy);
  margin:0;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Public Sans',sans-serif;font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:6px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-dark);}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}
.icon{width:26px;height:26px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* header */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(221,190,134,0.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(4px);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:24px;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Big Shoulders',sans-serif;font-weight:800;font-size:22px;line-height:1.15;min-width:0;text-transform:uppercase;color:var(--navy);}
.logo .mark{width:36px;height:36px;border-radius:6px;background:var(--navy);display:flex;align-items:center;justify-content:center;}
.logo .mark svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;}
nav.links{display:flex;flex-shrink:0;gap:22px;font-weight:600;font-size:15px;}
nav.links a{padding:6px 2px;border-bottom:2px solid transparent;white-space:nowrap;}
nav.links a:hover{border-color:var(--amber);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.phone-pill{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap;}
.phone-pill svg{width:18px;height:18px;stroke:var(--amber-dark);fill:none;stroke-width:2;}

/* Tussen de brede desktop-maat en de hamburger-drempel hieronder is er te weinig
   ruimte voor het volledige menu plus logo, telefoonnummer en reserveerknop naast
   elkaar. In plaats van het menu daar te laten afbreken of overlappen, maakt dit
   blok logo en telefoonpil compacter zodat het menu zelf zijn volle, leesbare
   breedte houdt. */
@media (max-width:1600px){
  nav.links{gap:14px;}
  .logo{font-size:18px;}
  .phone-pill .phone-text{display:none;}
  .phone-pill{padding:8px 6px;}
}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:34px;height:34px;background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;}

/* hero */
.hero{padding:80px 0 68px;background:var(--navy);color:#fff;}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:var(--navy);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:20px;}
.hero h1{font-size:52px;line-height:1.05;margin-bottom:20px;color:#fff;}
.hero .lead{font-size:18px;color:#C9D2DE;max-width:480px;margin-bottom:30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
.hero .btn-outline{border-color:rgba(255,255,255,0.55);color:#fff;}
.hero .btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff;}
.trust-line{display:flex;align-items:center;gap:10px;font-size:14px;color:#C9D2DE;font-weight:600;}
.trust-line-link{border-bottom:1px solid transparent;transition:border-color .15s ease,color .15s ease;}
.trust-line-link:hover{color:#fff;border-bottom-color:var(--amber);}
.stars{color:var(--amber);font-size:16px;letter-spacing:2px;}

/* slider (used for hero + gallery) */
.slider{position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.22);}
.slider-viewport{overflow:hidden;height:100%;}
.slider-track{display:flex;transition:transform .45s ease;height:100%;}
.slider-slide{flex:0 0 100%;width:100%;height:100%;position:relative;}
.slider-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.slider-empty{
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:#C9D2DE;font-weight:600;font-size:14px;text-align:center;padding:24px;
}
.slider-empty svg{width:56px;height:56px;stroke:var(--amber);fill:none;stroke-width:1.4;opacity:.85;}
.hero-media.slider{aspect-ratio:4/3;}
.hero-media-wrap{position:relative;filter:drop-shadow(0 18px 34px rgba(15,24,38,0.35));}
.hero-media-wrap::before{
  content:"";
  position:absolute;
  inset:12px -12px -12px 12px;
  background:var(--amber);
  clip-path:polygon(3% 0, 100% 0, 97% 100%, 0% 100%);
  border-radius:16px;
  z-index:0;
}
.hero-media-wrap .slider{
  position:relative;
  z-index:1;
  clip-path:polygon(3% 0, 100% 0, 97% 100%, 0% 100%);
  outline:1px solid rgba(255,255,255,0.5);
  outline-offset:-1px;
}
@media (max-width:900px){
  .hero-media-wrap::before{inset:8px -8px -8px 8px;}
}
.slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(15,24,38,0.55);border:1px solid rgba(255,255,255,0.4);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;
}
.slider-nav:hover{background:rgba(15,24,38,0.8);}
.slider-nav.prev{left:12px;}
.slider-nav.next{right:12px;}
.slider-nav svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;}
.slider-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:2;}
.slider-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,0.5);cursor:pointer;padding:0;}
.slider-dots button.active{background:var(--amber);}

.stat-strip{border-top:1px solid var(--amber-dark);border-bottom:1px solid var(--amber-dark);background:var(--amber);}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.stat-item{display:flex;align-items:center;gap:12px;padding:20px 24px;font-weight:700;font-size:14.5px;color:var(--navy);border-right:1px solid rgba(27,42,65,0.18);min-width:0;}
.stat-item:last-child{border-right:none;}
.stat-item svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:2;flex-shrink:0;}

section{padding:80px 0;}
.section-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.section-head .kicker{display:block;color:var(--amber-dark);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.section-head h2{font-size:36px;margin-bottom:12px;}
.section-head p, .section-head .rich-text{color:var(--text-muted);font-size:16px;}

/* aanbod cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--amber);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 6px 14px rgba(90,58,15,0.12);}
.card .icon-wrap{width:52px;height:52px;border-radius:10px;background:var(--amber-tint);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.card h3{font-size:19px;text-transform:none;}
.card p, .card .rich-text{font-size:14.5px;color:var(--text-muted);margin:0;flex-grow:1;}
.card .price{font-family:'Big Shoulders',sans-serif;font-size:22px;color:var(--navy);}
.card .price span{font-family:'Public Sans',sans-serif;font-size:13px;color:var(--text-muted);font-weight:600;}
.card a.more{font-weight:700;font-size:14px;color:var(--navy);display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid var(--amber);align-self:flex-start;}

/* gallery */
.gallery-slider{aspect-ratio:16/7;}
.gallery-slider .slider-slide img{object-fit:cover;}

/* waarom */
.why{background:var(--navy);color:#fff;}
.why .section-head h2, .why .section-head .kicker{color:#fff;}
.why .section-head p, .why .section-head .rich-text{color:#C9D2DE;}
.why .kicker{color:var(--amber);}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.why-item{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:12px;}
.why-item svg{width:28px;height:28px;stroke:var(--amber);fill:none;stroke-width:1.8;}
.why-item h3{color:#fff;font-size:17px;text-transform:none;}
.why-item p, .why-item .rich-text{margin:0;font-size:14px;color:#C9D2DE;}

/* tarieven */
.table-scroll{overflow-x:auto;border-radius:12px;-webkit-overflow-scrolling:touch;}
table{width:100%;min-width:560px;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
thead tr{background:var(--navy);}
th{color:#fff;text-align:left;padding:16px 20px;font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;}
td{padding:16px 20px;border-bottom:1px solid var(--line);font-size:14.5px;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:nth-child(even){background:var(--amber-tint);}
td.type{font-weight:700;color:var(--navy);}
.tarief-note{margin-top:16px;font-size:13.5px;color:var(--text-muted);}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}
.contact-grid > *{min-width:0;}
.form-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--amber);border-radius:12px;padding:36px;box-shadow:0 6px 14px rgba(90,58,15,0.12);}
.form-card h3{font-size:22px;margin-bottom:6px;text-transform:none;}
.form-card p.sub{color:var(--text-muted);font-size:14.5px;margin:0 0 24px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-weight:700;font-size:13.5px;color:var(--navy);}
.field input, .field select, .field textarea{
  font-family:'Public Sans',sans-serif;font-size:15px;padding:11px 13px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text);
}
.field textarea{resize:vertical;min-height:90px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--amber);outline-offset:1px;}

.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;}

.form-notice{padding:13px 16px;border-radius:8px;font-size:14px;font-weight:600;margin-bottom:20px;}
.form-notice.success{background:#E4F1E4;color:#256B33;border:1px solid #B9DEC0;}
.form-notice.error{background:#F8E2DE;color:#8C2E1C;border:1px solid #E9B9AC;}

.info-card{background:var(--navy);color:#fff;border-radius:12px;padding:32px;}
.info-card h3{color:#fff;font-size:20px;text-transform:none;margin-bottom:18px;}
.info-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;font-size:14.5px;}
.info-row svg{width:20px;height:20px;stroke:var(--amber);fill:none;stroke-width:1.8;flex-shrink:0;margin-top:2px;}
.info-row .lines{color:#D7DEE8;overflow-wrap:anywhere;min-width:0;}
.info-row{min-width:0;}
.info-row .lines strong{color:#fff;display:block;margin-bottom:2px;}
.map-box{margin-top:22px;border-radius:10px;background:rgba(255,255,255,0.08);border:1px dashed rgba(255,255,255,0.3);height:180px;display:flex;align-items:center;justify-content:center;color:#B9C3D1;font-size:13px;font-weight:600;overflow:hidden;}
.map-box iframe{width:100%;height:100%;border:0;display:block;}
.map-directions{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;font-size:14px;color:#fff;border-bottom:2px solid var(--amber);}
.map-directions svg{width:16px;height:16px;stroke:var(--amber);fill:none;stroke-width:2;}

/* faq */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px 22px;}
.faq-item summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:15.5px;color:var(--navy);list-style:none;position:relative;padding-right:28px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:0;top:14px;font-size:20px;color:var(--amber-dark);font-weight:700;}
.faq-item[open] summary::after{content:"\2212";}
.faq-answer{padding:0 0 18px;color:var(--text-muted);font-size:14.5px;line-height:1.6;}

/* rich-text: opmaak uit de tekst-editor in het beheerpaneel (koppen, lijstjes, links, uitlijning) */
.rich-text{text-align:left;}
.rich-text > *:first-child{margin-top:0;}
.rich-text > *:last-child{margin-bottom:0;}
.rich-text p{margin:0 0 0.8em;}
.rich-text h2, .rich-text h3, .rich-text h4{font-family:'Big Shoulders',sans-serif;text-transform:none;margin:0.9em 0 0.4em;line-height:1.2;color:inherit;}
.rich-text h2{font-size:1.5em;}
.rich-text h3{font-size:1.25em;}
.rich-text h4{font-size:1.1em;}
.rich-text ul, .rich-text ol{margin:0 0 0.8em;padding-left:1.3em;}
.rich-text li{margin-bottom:0.3em;}
.rich-text blockquote{margin:0 0 0.8em;padding-left:1em;border-left:3px solid var(--amber);color:inherit;}
.rich-text a{color:inherit;text-decoration:underline;text-decoration-color:var(--amber);}
.rich-text strong, .rich-text b{font-weight:700;}
.rich-text .ql-align-center{text-align:center;}
.rich-text .ql-align-right{text-align:right;}
.rich-text .ql-align-justify{text-align:justify;}
.why-item .rich-text a, .footer-grid .rich-text a{text-decoration-color:currentColor;}
.faq-terms-link{text-align:center;margin-top:26px;}
.faq-terms-link a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--navy);border-bottom:2px solid var(--amber);}
.faq-terms-link svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:1.8;}

/* beschikbaarheid */
.avail-cal{max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 28px 30px;box-shadow:0 8px 20px rgba(90,58,15,0.1);}
.avail-controls{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;}
.avail-controls label{font-weight:700;font-size:13px;color:var(--navy);}
.avail-controls select{font-family:'Public Sans',sans-serif;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;}
.avail-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.avail-cal-header span{font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);}
.avail-cal-header button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.avail-cal-header button:hover{background:var(--amber-tint);}
.avail-cal-header button svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:2;}
.avail-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px;}
.avail-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.avail-day{aspect-ratio:1;border-radius:8px;border:1px solid transparent;font-family:'Public Sans',sans-serif;font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center;background:none;cursor:default;color:var(--text);}
.avail-day.is-empty{visibility:hidden;}
.avail-day.is-past{color:#C7BFA8;}
.avail-day.is-available{background:#E4F1E4;color:#256B33;border-color:#B9DEC0;cursor:pointer;font-weight:700;}
.avail-day.is-available:hover{background:#256B33;color:#fff;}
.avail-day.is-blocked{background:#F8E2DE;color:#8C2E1C;border-color:#E9B9AC;}
.avail-day.is-today{box-shadow:0 0 0 2px var(--amber) inset;}
.avail-legend{display:flex;gap:18px;justify-content:center;margin-top:18px;font-size:13px;color:var(--text-muted);}
.avail-legend-item{display:flex;align-items:center;gap:6px;}
.avail-dot{width:11px;height:11px;border-radius:50%;display:inline-block;}
.avail-dot.is-available{background:#3E8E4F;}
.avail-dot.is-blocked{background:#C0492E;}
.avail-note{text-align:center;font-size:13px;color:var(--text-muted);margin-top:14px;}
@media (max-width:480px){
  .avail-cal{padding:20px 16px 24px;}
  .avail-day{font-size:12.5px;}
}

.social-links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.social-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--navy);transition:background .15s ease,transform .15s ease;}
.social-icon:hover{background:var(--amber);transform:translateY(-2px);}
.social-icon svg{width:17px;height:17px;fill:#fff;}
.social-links-light .social-icon{background:rgba(255,255,255,0.12);}
.social-links-light .social-icon:hover{background:var(--amber);}

footer{background:var(--navy-dark);color:#C9D2DE;padding:56px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px;}
.footer-grid .logo{color:#fff;margin-bottom:12px;}
.footer-grid .logo .mark{background:var(--amber);}
.footer-grid p, .footer-grid .rich-text{font-size:14px;color:#9AA7B8;max-width:280px;}
.footer-col h4{color:#fff;font-family:'Public Sans',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:22px;font-size:13px;color:#8794A6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

.admin-bar{background:var(--navy-dark);color:#fff;font-size:13px;padding:8px 24px;display:flex;justify-content:space-between;align-items:center;}
.admin-bar a{color:var(--amber);font-weight:700;}

/* Het menu (Aanbod/Foto's/.../Beschikbaarheid/Contact) heeft, met de logo- en
   contactknoppen ernaast, ruim 1150px nodig om zonder afbreken op één regel te
   passen. Bij smallere breedtes — ook op grotere tablets/kleine laptopvensters
   nog ruim boven de 900px-breakpoint hieronder — schakelt daarom hier al over op
   het hamburgermenu, in plaats van het menu krap te laten passen of laten afbreken. */
@media (max-width:1200px){
  nav.links{display:none;}
  .nav-toggle{display:flex;}
  .mobile-menu{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--navy-dark);
    border-top:1px solid rgba(255,255,255,0.12);
    box-shadow:0 14px 26px rgba(0,0,0,0.28);
    max-height:0;overflow:hidden;
    transition:max-height .25s ease;
  }
  .mobile-menu.open{max-height:420px;}
  .mobile-menu a{color:#fff;font-weight:700;font-size:15px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .mobile-menu a:hover,.mobile-menu a:active{background:rgba(255,255,255,0.06);color:var(--amber);}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-item{border-right:none;border-bottom:1px solid var(--line);}
  .cards{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:38px;}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;}
}
@media (max-width:600px){
  .nav{padding:14px 16px;gap:8px;}
  .logo{font-size:15px;gap:6px;}
  .logo .mark{width:28px;height:28px;}
  .logo .mark svg{width:15px;height:15px;}
  .nav-cta{gap:6px;}
  .phone-pill{padding:8px;border-radius:50%;}
  .phone-pill .phone-text{display:none;}
  .phone-pill svg{width:20px;height:20px;}
  .nav-cta .btn-primary{padding:9px 14px;font-size:13px;}
}