/* ------------------------------------------------------------------
   Opgefrist ontwerp (oktober 2026). Wordt ná style.css geladen en
   overschrijft alleen wat nodig is: de opbouw (foto per sectie met een
   kaart erop) blijft dezelfde. Wie terug wil, haalt de link naar dit
   bestand uit index.php.

   Kleuren: dezelfde drie als in style.css (inkt, teal, salie), aangevuld
   met een donkerdere salie voor tekst en een zandtint als achtergrond.
   Letters: Manrope voor titels, knoppen en cijfers; Open Sans blijft
   voor de lopende tekst.
   ------------------------------------------------------------------ */
:root {
  --inkt: #0B2027;
  --teal: #40798C;
  --teal-donker: #2F5E6D;
  --salie: #70A9A1;
  --salie-tekst: #3D7A71;   /* #70A9A1 haalt op wit maar 2,7:1, deze 5:1 */
  --salie-licht: #E9F2F0;
  --zand: #F5F2EC;
  --lijn: #DDE5E3;
  --grijs: #5B7178;
  --rood: #A83E33;
  --rood-licht: #F9E6E3;
  --radius: 20px;
  --radius-klein: 12px;
  /* een zachte rand rondom plus diepte onderaan */
  --schaduw: 0 2px 10px rgba(11, 32, 39, .10), 0 26px 64px -14px rgba(11, 32, 39, .40);
  --nav-h: 84px;            /* hoogte van het zwevende menu, inclusief marge */
  /* de band van het menu: kaarten, galerij en voettekst lijnen hierop uit */
  --band: 1320px;
  --rand: max(1rem, calc((100% - var(--band)) / 2));
  --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kop: 'Manrope', var(--font);
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); scrollbar-color: #A9C6C1 transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* style.css verbergt de scrollbalk volledig; hier komt hij dun en rustig terug */
::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #A9C6C1; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

* { font-family: var(--font); color: inherit; }
body { font-size: 1.0625rem; line-height: 1.7; color: var(--inkt); background: #fff; -webkit-font-smoothing: antialiased; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ---------- Typografie ---------- */
h1 {
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--teal-donker);
  margin: 0 0 1.25rem;
}
#home h1 { font-size: clamp(2.6rem, 1.6rem + 3vw, 4rem); }
h2 { font-weight: 400; font-size: 1.125rem; line-height: 1.45; color: var(--grijs); margin: -.5rem 0 1.5rem; }
h3 {
  font-family: var(--kop);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--salie-tekst) !important;
  margin: 1.9rem 0 .75rem;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .9rem;
  font-family: var(--kop);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--salie-tekst);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--salie); }

.basil-cont a:not(.btn-basil),
.basil-footer a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(64, 121, 140, .35);
  text-underline-offset: 3px;
}
.basil-cont a:not(.btn-basil):hover { color: var(--teal-donker); text-decoration-color: currentColor; }
.basil-cont img { max-width: 100%; height: auto; border-radius: var(--radius-klein); }

/* ---------- Zwevend menu ---------- */
header { height: auto; }
.navbar.nav-basil {
  top: .75rem;
  left: 0; right: 0;
  width: calc(100% - 2rem);
  max-width: var(--band);
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.25rem;
  padding: .45rem .45rem .45rem 1.25rem;
  line-height: 1.4;
  text-align: left;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 10px 30px -10px rgba(11, 32, 39, .25), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.nav-basil .navbar-brand { display: flex; align-items: center; gap: .55rem; margin: 0; padding: 0; font-family: var(--kop); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: var(--teal-donker) !important; }
.nav-basil .navbar-brand img { height: 28px; width: auto; }
.nav-basil .navbar-nav { flex-direction: row; align-items: center; margin: 0; padding: 0; }
.nav-basil .nav-item { margin: 0; flex: none; }
.nav-basil .nav-link {
  padding: .45rem .8rem !important;
  border-radius: 999px;
  font-family: var(--kop);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--grijs) !important;
  transition: background-color .2s, color .2s;
}
.nav-basil .nav-link:hover { color: var(--inkt) !important; }
.nav-secties { margin-left: auto; gap: .1rem; }
.nav-secties .nav-link.active { color: var(--teal-donker) !important; background: var(--salie-licht); font-weight: 600; }
.nav-talen { gap: 0; padding-left: .75rem; border-left: 1px solid var(--lijn); }
.nav-talen .nav-link { padding: .4rem .45rem !important; font-size: .78rem; letter-spacing: .06em; }
.nav-talen .nav-link.active { color: var(--inkt) !important; font-weight: 700; }
.nav-cta { display: none; }

/* Tot 1200px: menu op twee rijen, secties als schuifbare rij */
@media (max-width: 1199px) {
  :root { --nav-h: 92px; --rand: .5rem; }
  .navbar.nav-basil {
    top: .5rem;
    width: calc(100% - 1rem);
    flex-wrap: wrap;
    gap: 0 1rem;
    padding: .5rem 1rem 0;
    border-radius: 18px;
  }
  .nav-basil .nav-cta-los { display: none; }
  .nav-cta { display: block; margin-right: .35rem !important; }
  .nav-talen { order: 2; margin-left: auto; padding-left: 0; border-left: 0; }
  .nav-secties {
    order: 3;
    flex: 0 0 calc(100% + 2rem);
    margin: .15rem -1rem 0;
    padding: 0 2.5rem .55rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
  }
  .nav-secties::-webkit-scrollbar { display: none; }
}

/* ---------- Knoppen ---------- */
.btn-basil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff !important;
  font-family: var(--kop);
  font-size: .975rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(64, 121, 140, .6);
  transition: background-color .2s, box-shadow .2s, transform .2s;
}
.btn-basil:hover,
.btn-basil:focus-visible { background: var(--teal-donker); box-shadow: 0 14px 28px -8px rgba(47, 94, 109, .6); transform: translateY(-1px); }
.btn-basil.disabled { opacity: .6; pointer-events: none; }
.btn-basil .pijl { transition: transform .2s; }
.btn-basil:hover .pijl { transform: translateX(3px); }
.btn-basil-klein { padding: .6rem 1.15rem; font-size: .875rem; box-shadow: none; }
.btn-basil-klein:hover { box-shadow: none; }
.btn-basil-licht { background: transparent; color: var(--teal-donker) !important; box-shadow: inset 0 0 0 1.5px rgba(64, 121, 140, .35); }
.btn-basil-licht:hover,
.btn-basil-licht:focus-visible { background: var(--salie-licht); box-shadow: inset 0 0 0 1.5px rgba(64, 121, 140, .5); }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }

/* ---------- Kaarten op de foto's ---------- */
.photo-page .title { overflow: visible; display: flow-root; }

@media (min-width: 999px) {
  .photo-page { display: flex; align-items: center; scroll-margin-top: calc(var(--nav-h) * -1); }
  .photo-page .title { width: 100%; }
  .photo-page .basil-cont {
    width: 44%;
    max-width: 580px;
    margin: calc(var(--nav-h) + 3rem) var(--rand) 4rem;
    padding: clamp(2.25rem, 3.2vw, 3.25rem);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: var(--schaduw);
    /* matglas: de foto schemert er licht doorheen */
    background-color: rgba(255, 255, 255, .62) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
  }
  .photo-page .basil-cont-lg { width: 50%; max-width: 680px; }
}

/* ---------- Mobiel en tablet: foto als afgeronde kaart, tekst schuift erover ---------- */
@media (max-width: 998px) {
  header { height: var(--nav-h); }
  body { background: var(--zand); }
  .photo-page { padding-bottom: 2.5rem; }
  .photo-page .background {
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 65vh;
    margin: 0 .5rem;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
  }
  .basil-cont {
    position: relative;
    width: auto;
    max-width: none;
    margin: -3rem max(1rem, calc((100% - 640px) / 2)) 0;
    padding: 1.9rem 1.35rem 1.6rem;
    border-radius: var(--radius);
    box-shadow: 0 16px 40px -16px rgba(11, 32, 39, .25);
  }
}

/* ---------- Lijsten met basilicumblaadje ---------- */
.basil-cont ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.basil-cont > :last-child { margin-bottom: 0; }
.basil-cont li { list-style: none; position: relative; padding-left: 1.8rem; margin-bottom: .45rem; }
.basil-cont li::before {
  content: "";
  position: absolute;
  left: 0; top: .32em;
  width: 1.1rem; height: 1.1rem;
  background: url('../photos/basil.png') center / contain no-repeat;
}
/* Icoontjes per opsomming: langdb.php zet een klasse i-... op elke <li>.
   Een regel zonder klasse krijgt gewoon het basilicumblaadje. */
.basil-cont li[class^="i-"]::before {
  top: .25em;
  width: 1.2rem; height: 1.2rem;
  background: var(--teal);
  -webkit-mask: var(--icoon) center / contain no-repeat;
  mask: var(--icoon) center / contain no-repeat;
}
.i-airco { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9M9.5 4.5 12 6l2.5-1.5M9.5 19.5 12 18l2.5 1.5'/%3E%3C/svg%3E"); }
.i-barbecue { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16a8 7 0 0 1-16 0z'/%3E%3Cpath d='M8 16.5 6 21M16 16.5l2 4.5M10 3c0 1.5 1 1.5 1 3M14 3c0 1.5 1 1.5 1 3'/%3E%3C/svg%3E"); }
.i-bed { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19V7M3 15h18v4'/%3E%3Cpath d='M21 15v-3a3 3 0 0 0-3-3h-7v6'/%3E%3Ccircle cx='7' cy='11.5' r='2'/%3E%3C/svg%3E"); }
.i-bedden { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19v-5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v5M2 16.5h9M13 19v-5a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v5M13 16.5h9'/%3E%3Cpath d='M4 12V9.5h5V12M15 12V9.5h5V12'/%3E%3C/svg%3E"); }
.i-bestek { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v5a2 2 0 0 0 4 0V3M7 10v11M17 21V3c2 1.5 2.7 5 2 9h-2'/%3E%3C/svg%3E"); }
.i-document { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.i-eettafel { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18M6 9v11M18 9v11M6 14h12'/%3E%3Cpath d='M9 6V4M12 6V4M15 6V4'/%3E%3C/svg%3E"); }
.i-gasten { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M17 14.5c2.4.2 4 1.8 4.5 4.5'/%3E%3C/svg%3E"); }
.i-huis { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 4l9 6.5V20H3z'/%3E%3Cpath d='M8 20v-5h8v5M8 17.5h8'/%3E%3C/svg%3E"); }
.i-kast { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='2.5' width='15' height='17' rx='1.5'/%3E%3Cpath d='M12 2.5v17M10 10v2M14 10v2M6.5 19.5v2M17.5 19.5v2'/%3E%3C/svg%3E"); }
.i-koelkast { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2'/%3E%3Cpath d='M6 10h12M9 5.5v2M9 13v3'/%3E%3C/svg%3E"); }
.i-koffie { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16 10h1.5a2.5 2.5 0 0 1 0 5H16M8 3c0 1.5 1 1.5 1 3M12 3c0 1.5 1 1.5 1 3'/%3E%3C/svg%3E"); }
.i-kookplaat { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8' cy='9.5' r='2'/%3E%3Ccircle cx='16' cy='9.5' r='2'/%3E%3Ccircle cx='8' cy='15.5' r='1.5'/%3E%3Ccircle cx='16' cy='15.5' r='1.5'/%3E%3C/svg%3E"); }
.i-ligbed { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='6.5' r='2'/%3E%3Cpath d='M3 15h11l5-6M5 15v4M13 15v4'/%3E%3C/svg%3E"); }
.i-linnen { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='4.5' rx='1.5'/%3E%3Crect x='4' y='10' width='16' height='4.5' rx='1.5'/%3E%3Crect x='4' y='16' width='16' height='4.5' rx='1.5'/%3E%3C/svg%3E"); }
.i-niveaus { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h5v-5h5v-5h5V5h3'/%3E%3C/svg%3E"); }
.i-nuts { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 4 12h4l-1 7 6-9H9z'/%3E%3Cpath d='M17.5 10c1.8 2.3 2.7 3.8 2.7 5.1a2.7 2.7 0 0 1-5.4 0c0-1.3.9-2.8 2.7-5.1z'/%3E%3C/svg%3E"); }
.i-oven { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Crect x='5.5' y='8' width='9' height='8' rx='1'/%3E%3Cpath d='M18 9h.01M18 12h.01M18 15h.01'/%3E%3C/svg%3E"); }
.i-parasol { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 18 0z'/%3E%3Cpath d='M12 12v8M8.5 20h7M12 3v0'/%3E%3C/svg%3E"); }
.i-rookverbod { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8M6.5 12.5h7M16 12.5h1.5'/%3E%3C/svg%3E"); }
.i-schoonmaak { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.8 4.7 4.7 1.8-4.7 1.8L11 16l-1.8-4.7L4.5 9.5l4.7-1.8z'/%3E%3Cpath d='M18.5 14.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E"); }
.i-schuifraam { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1.5'/%3E%3Cpath d='M12 3v18M9.5 11v2M14.5 11v2'/%3E%3C/svg%3E"); }
.i-thermometer { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.8V5a2 2 0 0 0-4 0v9.8a4 4 0 1 0 4 0z'/%3E%3Cpath d='M12 16.5V9'/%3E%3C/svg%3E"); }
.i-toaster { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M7.5 8V6a1.5 1.5 0 0 1 3 0v2M13.5 8V6a1.5 1.5 0 0 1 3 0v2M7.5 14h4'/%3E%3C/svg%3E"); }
.i-tuinhuis { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 5l9 5M3 10h18M5 10v10M19 10v10M3 20h18'/%3E%3Cpath d='M9 20v-5h6v5'/%3E%3C/svg%3E"); }
.i-tv { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.i-vaatwas { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='2'/%3E%3Cpath d='M4 7h16M7.5 4.75h.01M10.5 4.75h.01'/%3E%3Cpath d='M12 10.5c1.6 2.1 2.4 3.4 2.4 4.6a2.4 2.4 0 0 1-4.8 0c0-1.2.8-2.5 2.4-4.6z'/%3E%3C/svg%3E"); }
.i-waarborg { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.i-wasmachine { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='2'/%3E%3Cpath d='M4 7h16M7.5 4.75h.01M10.5 4.75h.01'/%3E%3Ccircle cx='12' cy='14' r='4.5'/%3E%3Cpath d='M9.5 14.5c.8-.7 1.7-.7 2.5 0s1.7.7 2.5 0'/%3E%3C/svg%3E"); }
.i-wifi { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.8a15 15 0 0 1 20 0M5 12.3a10 10 0 0 1 14 0M8.5 15.8a5 5 0 0 1 7 0M12 19.5h.01'/%3E%3C/svg%3E"); }
.i-zetel { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M3 13a2 2 0 0 1 4 0v1h10v-1a2 2 0 0 1 4 0v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M6 18v2M18 18v2'/%3E%3C/svg%3E"); }
.i-zwembad { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16.5' cy='6.5' r='2.5'/%3E%3Cpath d='M2 14.5c1.7 0 1.7-1.5 3.3-1.5s1.7 1.5 3.4 1.5 1.7-1.5 3.3-1.5 1.7 1.5 3.3 1.5 1.7-1.5 3.4-1.5 1.6 1.5 3.3 1.5'/%3E%3Cpath d='M2 19c1.7 0 1.7-1.5 3.3-1.5s1.7 1.5 3.4 1.5 1.7-1.5 3.3-1.5 1.7 1.5 3.3 1.5 1.7-1.5 3.4-1.5 1.6 1.5 3.3 1.5'/%3E%3C/svg%3E"); }

/* korte opsommingen in twee kolommen */
@media (min-width: 576px) {
  #keuken .basil-cont ul,
  #woonkamer .basil-cont ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}

/* Kerngegevens met icoontjes onder de titel */
.basil-cont .kenmerken { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; }
.basil-cont .kenmerken li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .45rem .9rem .45rem .7rem;
  border-radius: 999px;
  background: var(--salie-licht);
  color: var(--teal-donker);
  font-family: var(--kop);
  font-size: .875rem;
  font-weight: 600;
}
.basil-cont .kenmerken li::before { content: none; }
.kenmerken svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Prijzen als tegels ---------- */
.prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.5rem 0 1.75rem; }
.prijs-tegel {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1rem;
  border-radius: 14px;
  background: var(--salie-licht);
}
.prijs-tegel .seizoen { font-family: var(--kop); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--salie-tekst); }
.prijs-tegel .bedrag { margin-top: .35rem; font-family: var(--kop); font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--teal-donker); }
.prijs-tegel .per { font-size: .8125rem; color: var(--grijs); }
.prijs-tegel .maanden { margin-top: .65rem; font-size: .8125rem; line-height: 1.45; color: var(--grijs); }
.prijs-tegel.hoog { background: var(--teal); }
.prijs-tegel.hoog .seizoen,
.prijs-tegel.hoog .bedrag,
.prijs-tegel.hoog .per,
.prijs-tegel.hoog .maanden { color: #fff; }
.prijs-tegel.hoog .per,
.prijs-tegel.hoog .maanden { opacity: .85; }
@media (max-width: 575px) {
  .prijzen { grid-template-columns: 1fr; }
  .prijs-tegel {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "seizoen bedrag" "maanden per";
    column-gap: 1rem;
    align-items: baseline;
  }
  .prijs-tegel .seizoen { grid-area: seizoen; }
  .prijs-tegel .bedrag { grid-area: bedrag; margin: 0; font-size: 1.5rem; }
  .prijs-tegel .per { grid-area: per; text-align: right; }
  .prijs-tegel .maanden { grid-area: maanden; margin-top: .2rem; }
}

/* ---------- Formulier en kalender ---------- */
.melding {
  padding: .85rem 1.1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-klein);
  background: var(--salie-licht);
  font-size: .9375rem;
  line-height: 1.5;
}
#process .alert { border-radius: var(--radius-klein); }
#formulier .form-group { margin-bottom: 1.1rem; }
#formulier .col-form-label { font-family: var(--kop); font-weight: 700; font-size: .9rem; }
#formulier .form-control {
  height: auto;
  padding: .7rem .95rem;
  font-size: 1rem;
  color: var(--inkt);
  background: rgba(255, 255, 255, .9);
  border: 1px solid #CFDAD8;
  border-radius: var(--radius-klein);
  transition: border-color .15s, box-shadow .15s;
}
#formulier .form-control:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(64, 121, 140, .15); }
#formulier .form-text { font-size: .8125rem; color: var(--grijs) !important; }
#formulier textarea { min-height: 7.5rem; }
/* foutmeldingen van jquery.validate */
#formulier em.help-block { display: block; margin-top: .3rem; font-style: normal; font-size: .8125rem; color: var(--rood); }
#formulier .has-error .form-control { border-color: var(--rood); }

.flatpickr-calendar.inline {
  width: 100%;
  max-width: 320px;
  margin-top: .6rem;
  padding-bottom: .25rem;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--lijn);
}
.flatpickr-calendar.inline .flatpickr-days,
.flatpickr-calendar.inline .dayContainer { width: 100%; min-width: 0; max-width: none; }
.flatpickr-current-month { font-family: var(--kop); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--teal); }
.flatpickr-day.today { border-color: var(--salie); }
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  background: var(--salie-licht) !important;
  border-color: var(--salie-licht) !important;
  box-shadow: -5px 0 0 var(--salie-licht), 5px 0 0 var(--salie-licht) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover { background: var(--teal) !important; border-color: var(--teal) !important; color: #fff !important; }
.flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--teal) !important; }
/* voorbije dagen grijs, enkel echt bezette dagen rood (klasse 'bezet' komt uit form.php) */
.flatpickr-day.flatpickr-disabled { color: rgba(57, 57, 57, .28) !important; }
.flatpickr-day.bezet,
.flatpickr-day.bezet:hover {
  color: var(--rood) !important;
  background: var(--rood-licht);
  border-color: transparent;
  border-radius: 0;
  text-decoration: line-through;
}
.kalender-legende { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .7rem 0 0; font-size: .8125rem; color: var(--grijs); }
.legende-item { display: inline-flex; align-items: center; gap: .4rem; }
.stip { display: inline-block; width: .85rem; height: .85rem; border-radius: 4px; }
.stip-bezet { background: var(--rood-licht); box-shadow: inset 0 0 0 1px rgba(168, 62, 51, .4); }
.stip-keuze { background: var(--teal); }
@media (max-width: 575px) {
  #formulier .btn-basil { width: 100%; }
}

/* ---------- Fotogalerij als mozaïek ---------- */
#fotos { background: var(--zand); padding: clamp(4rem, 7vw, 7rem) 0; }
@media (min-width: 768px) {
  #fotos .container,
  .basil-footer .container { width: auto; max-width: none; margin: 0 var(--rand); padding: 0; }
}
#fotos h1 { margin-bottom: 2rem; }
#fotos h3 { margin: 3rem 0 1rem; }
#fotos h3:first-of-type { margin-top: 0; }
#fotos .demo-gallery > ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 12px;
  margin: 0;
  padding: 0;
}
#fotos .demo-gallery > ul > li { float: none; width: auto; margin: 0; }
#fotos .demo-gallery > ul > li.groot { grid-column: span 2; grid-row: span 2; }
#fotos .demo-gallery > ul > li.hoog { grid-row: span 2; }
#fotos .demo-gallery > ul > li a {
  float: none;
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #E6E1D8;
}
#fotos .demo-gallery > ul > li.groot a,
#fotos .demo-gallery > ul > li.hoog a { aspect-ratio: auto; height: 100%; }
#fotos .demo-gallery > ul > li a > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
#fotos .demo-gallery > ul > li a:hover > img { transform: scale(1.05); }
.onderschrift {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem .9rem .7rem;
  font-family: var(--kop);
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(transparent, rgba(11, 32, 39, .6));
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
#fotos a:hover .onderschrift,
#fotos a:focus-visible .onderschrift { opacity: 1; }
@media (hover: none) { .onderschrift { opacity: 1; } }
@media (max-width: 767px) {
  #fotos .demo-gallery > ul { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #fotos .demo-gallery > ul > li a { border-radius: 10px; }
  /* op twee kolommen staat de grote foto alleen op zijn rij en bepaalt hij zelf de hoogte */
  #fotos .demo-gallery > ul > li.groot a { aspect-ratio: 4 / 3; height: auto; }
}

/* ---------- Voettekst ---------- */
.basil-footer { background: var(--inkt); color: #C9DAD7; padding: 3.5rem 0 3rem; font-size: .9375rem; }
.basil-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.basil-footer .merk { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--kop); font-weight: 700; font-size: 1.2rem; }
.basil-footer .merk img { height: 28px; width: auto; }
.basil-footer p { margin: 0; }
.basil-footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }

/* ---------- Rustig inschuiven bij het scrollen (zie js/nieuw.js) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}