/* ==========================================================================
   Lettertypen staan op onze eigen server in plaats van bij Google Fonts.
   Zo gaat er van een bezoeker geen IP-adres naar Google, en laadt de site
   ook iets sneller omdat er geen extra domein aangesproken hoeft te worden.
   Bestanden komen uit de officiele @fontsource-pakketten (Google Fonts,
   Open Font License) en staan in assets/fonts/.
   ========================================================================== */
@font-face{
  font-family:"Abel";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/abel-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/open-sans-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/open-sans-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/open-sans-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
/* Voor namen met Oost-Europese tekens, bijvoorbeeld een artiest met een ł of ș. */
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/open-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/open-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/open-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   Feestartiesten.nl - stylesheet
   Kleuren en typografie zijn afgeleid van de bestaande huisstijl:
   paars #4B0C65, goud #D9942E, zwart, Abel + Open Sans.
   ========================================================================== */

:root{
  --paars:#4b0c65;
  --paars-diep:#33063f;
  --paars-licht:#7c2ba0;
  --goud:#d9942e;
  --goud-licht:#f0b95c;
  --zwart:#0b0b0e;
  --merk-paars:#230c29;   /* linkerkant van het logoverloop */
  --merk-zwart:#0b050f;   /* rechterkant van het logoverloop */
  --zwart-zacht:#15151a;
  --grijs:#f4f4f6;
  --grijs-lijn:#e3e3e8;
  --tekst:#1d1d22;
  --tekst-zacht:#5b5b66;
  --wit:#ffffff;
  --radius:16px;
  --radius-l:22px;
  --schaduw:0 1px 2px rgba(11,11,14,.06), 0 8px 24px rgba(11,11,14,.08);
  --schaduw-hoog:0 2px 4px rgba(11,11,14,.08), 0 18px 48px rgba(11,11,14,.16);
  --kop:"Abel", "Oswald", system-ui, sans-serif;
  --body:"Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max:1220px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--grijs);color:var(--tekst);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  overflow-wrap:break-word;
}
body.geen-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

h1,h2,h3,h4{font-family:var(--kop);font-weight:400;letter-spacing:.01em;margin:0;line-height:1.15}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:22px}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.78rem 1.5rem;border-radius:999px;
  font-size:.86rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  white-space:nowrap;
}
.knop svg{width:1em;height:1em;flex:none}
.knop-primair{background:var(--paars);color:#fff;box-shadow:0 6px 18px rgba(75,12,101,.28)}
.knop-primair:hover{background:var(--paars-licht);transform:translateY(-2px);box-shadow:0 10px 26px rgba(75,12,101,.34)}
.knop-goud{background:var(--goud);color:#241300}
.knop-goud:hover{background:var(--goud-licht);transform:translateY(-2px)}
.knop-glas{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.knop-glas:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.knop-klein{padding:.5rem 1.05rem;font-size:.74rem}

/* ---------- header ---------- */
/* De balk krijgt hetzelfde paars-naar-zwart verloop als het logo, zodat het
   logo erin opgaat in plaats van als losse tegel te lezen. */
.kop-balk{
  position:fixed;inset:0 0 auto 0;z-index:80;background:none;
  transition:box-shadow .3s ease, backdrop-filter .3s ease;
}
.kop-balk::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,
    var(--merk-paars) 0%, #1c0822 34%, #120614 64%, var(--merk-zwart) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.74) 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.74) 68%,transparent 100%);
  transition:opacity .3s ease;
}
.kop-balk.vast::before{-webkit-mask-image:none;mask-image:none;opacity:.97}
.kop-balk.vast{backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.35)}
.kop-binnen{position:relative;z-index:1}
.kop-binnen{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;height:96px}
.kop-balk.vast .kop-binnen{height:78px}
.kop-binnen{transition:height .3s ease}
.logo img{height:64px;width:auto;transition:height .3s ease}
.kop-balk.vast .logo img{height:52px}

.menu{display:flex;align-items:center;gap:.15rem}
.menu a{
  white-space:nowrap;position:relative;padding:.55rem .78rem;border-radius:999px;
  font-family:var(--kop);font-size:1.03rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.82);transition:color .18s ease, background .18s ease;
}
.menu a:hover{color:#fff;background:rgba(255,255,255,.09)}
.menu a.actief{color:#fff}
.menu a.actief::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:2px;
  background:var(--goud);border-radius:2px;
}
.menu .knop{margin-left:.6rem}

.hamburger{display:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);align-items:center;justify-content:center}
.hamburger span{display:block;width:19px;height:2px;background:#fff;position:relative;transition:.25s}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:#fff;transition:.25s}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}
.mobiel-open .hamburger span{background:transparent}
.mobiel-open .hamburger span::before{transform:translateY(6px) rotate(45deg)}
.mobiel-open .hamburger span::after{transform:translateY(-6px) rotate(-45deg)}

.mobiel-menu{
  position:fixed;inset:0;z-index:75;backdrop-filter:blur(10px);
  background:linear-gradient(150deg,rgba(35,12,41,.985),rgba(11,5,15,.985));
  display:flex;flex-direction:column;
  padding:7rem 0 2.5rem;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.28s ease;
}
.mobiel-open .mobiel-menu{opacity:1;visibility:visible;transform:none}
/* De links zitten in een .wrap. Die moet zelf de kolom zijn, anders lopen de
   items als gewone tekst achter elkaar door in plaats van onder elkaar. */
.mobiel-menu > .wrap{
  display:flex;flex-direction:column;align-items:stretch;
  width:100%;max-width:440px;margin-inline:auto;margin-block:auto;
}
.mobiel-menu a:not(.knop){
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--kop);font-size:1.35rem;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.85);padding:.95rem .2rem;min-height:52px;
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:color .18s ease, padding-left .18s ease;
}
.mobiel-menu a:not(.knop)::after{
  content:"";width:7px;height:7px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.18);transition:background .18s ease, transform .18s ease;
}
.mobiel-menu a:not(.knop):active{color:#fff;padding-left:.6rem}
.mobiel-menu a.actief{color:var(--goud)}
.mobiel-menu a.actief::after{background:var(--goud);transform:scale(1.25)}
.mobiel-menu .knop{align-self:center;margin-top:1.8rem;padding:.9rem 2.2rem;font-size:.9rem}
/* Op een korte telefoon (of liggend scherm) passen acht regels niet op hun
   volle hoogte, dus maken we ze daar wat compacter. Past het dan nog niet,
   dan scrollt het menu gewoon. */
@media (max-height:700px){
  .mobiel-menu{padding:6rem 0 2rem}
  .mobiel-menu a:not(.knop){font-size:1.15rem;padding:.6rem .2rem;min-height:44px}
  .mobiel-menu .knop{margin-top:1.2rem}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero.compact{min-height:min(56vh,460px)}
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(75,12,101,.62), transparent 62%),
    linear-gradient(180deg, rgba(11,11,14,.86) 0%, rgba(11,11,14,.42) 38%, rgba(11,11,14,.92) 100%);
}
.hero-inhoud{padding:9.6rem 22px 4rem;max-width:calc(820px + 44px);color:#fff}
.hero.compact .hero-inhoud{padding:8.6rem 22px 3rem}
/* Het gouden labelvlakje staat precies in het midden van de pagina, de kop
   eronder blijft links uitgelijnd. width:max-content houdt het vlakje net zo
   breed als de tekst, margin auto zet het in het midden. */
.hero-label{
  display:flex;width:max-content;max-width:100%;margin:0 auto 1.4rem;
  align-items:center;gap:.6rem;
  padding:.42rem .5rem .42rem .42rem;border-radius:999px;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  backdrop-filter:blur(8px);font-size:.82rem;color:rgba(255,255,255,.9);
}
.hero-label b{background:var(--goud);color:#241300;border-radius:999px;padding:.12rem .62rem;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem);text-transform:uppercase;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--goud)}
.hero p.lead{font-size:clamp(1rem,1.6vw,1.2rem);color:rgba(255,255,255,.84);max-width:56ch;margin:1.1rem 0 2rem}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.7rem}

/* zoekbalk */
.zoekbalk{background:linear-gradient(100deg,var(--merk-paars),var(--merk-zwart) 70%);padding:1.5rem 0}
.zoek-binnen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.zoek-binnen h2{color:#fff;font-size:1.35rem;text-transform:uppercase;letter-spacing:.12em;flex:none}
.zoek-veld{position:relative;flex:1 1 320px;min-width:240px}
.zoek-veld input{
  width:100%;padding:.9rem 1rem .9rem 2.9rem;border-radius:999px;border:0;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  color:#fff;font-family:var(--body);font-size:.95rem;outline:none;transition:.2s;
}
.zoek-veld input::placeholder{color:rgba(255,255,255,.45)}
.zoek-veld input:focus{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px var(--goud)}
.zoek-veld svg{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:rgba(255,255,255,.5)}

/* ---------- secties ---------- */
.sectie{padding:4.4rem 0}
.sectie.smal{padding:3rem 0}
.sectie-wit{background:#fff}
.sectie-donker{background:var(--zwart);color:#fff}
.sectie-kop{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;margin-bottom:2rem}
.sectie-kop h2{
  font-size:1.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--paars);flex:none;
}
.sectie-donker .sectie-kop h2{color:var(--goud)}
.sectie-kop .lijn{flex:1 1 40px;min-width:30px;height:2px;background:linear-gradient(90deg,var(--paars),rgba(75,12,101,.08))}
.sectie-donker .sectie-kop .lijn{background:linear-gradient(90deg,var(--goud),rgba(217,148,46,.06))}
.sectie-kop a{flex:none;margin-left:auto;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-zacht)}
.sectie-kop a:hover{color:var(--paars)}

/* Het welkomblok op de homepage: links het logo in een donker paneel, rechts
   de tekst. Het logo heeft witte letters, dus het heeft een donkere
   ondergrond nodig om goed te lezen. */
.welkom-raster{
  display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  max-width:1000px;margin-inline:auto;
}
.merk-paneel{
  display:grid;place-items:center;gap:.5rem;padding:1.7rem 1.2rem 2rem;
  border-radius:var(--radius-l);
  background:linear-gradient(100deg,var(--merk-paars) 0%,#1c0822 45%,var(--merk-zwart) 100%);
  box-shadow:var(--schaduw-hoog),inset 0 0 0 1px rgba(217,148,46,.22);
}
.merk-paneel img{width:100%;height:auto}
.merk-paneel-tekst{
  margin-top:-.7rem;padding-top:.9rem;position:relative;
  font-family:var(--kop);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.58);text-align:center;line-height:1.35;
}
.merk-paneel-tekst::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:40px;height:3px;background:var(--goud);border-radius:3px;
}
.welkom-raster .welkom{text-align:left;margin-inline:0;max-width:none}
.welkom-raster .welkom .streep{margin:1.4rem 0 0}

.welkom{max-width:760px;margin-inline:auto;text-align:center}
.welkom h2{font-size:clamp(2rem,4vw,2.8rem);text-transform:uppercase;letter-spacing:.16em;color:var(--paars);margin-bottom:1.2rem}
.welkom p{color:var(--tekst-zacht);margin:0 0 .9rem}
.welkom .streep{width:60px;height:3px;background:var(--goud);margin:1.4rem auto 0;border-radius:3px}

/* ---------- kaarten ---------- */
.raster{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.raster.drie{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

.kaart{
  position:relative;background:#fff;border-radius:var(--radius-l);overflow:hidden;
  box-shadow:var(--schaduw);text-align:left;width:100%;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
  display:flex;flex-direction:column;
}
.kaart:hover{transform:translateY(-6px);box-shadow:var(--schaduw-hoog)}
.kaart-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--zwart-zacht)}
.kaart-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--uitsnede,50% 50%);
  transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.kaart:hover .kaart-foto img{transform:scale(1.07)}
.kaart-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,11,14,.55));opacity:.9}
.kaart-label{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  padding:.24rem .7rem;border-radius:999px;background:rgba(11,11,14,.62);backdrop-filter:blur(6px);
  color:#fff;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
}
.kaart-prijs{
  position:absolute;bottom:.85rem;right:.85rem;z-index:2;max-width:calc(100% - 1.7rem);
  padding:.24rem .7rem;border-radius:999px;background:var(--goud);color:#241300;
  font-size:.72rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kaart-prijs.onbekend{background:rgba(11,11,14,.72);color:#fff;backdrop-filter:blur(6px);
  font-weight:600;font-size:.66rem;white-space:normal;text-align:center;line-height:1.3;
  text-overflow:clip;border-radius:12px;padding:.28rem .6rem}
.feit.onbekend b{color:var(--tekst-zacht)}
.kaart-body{padding:1.05rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.kaart-body h3{font-family:var(--body);font-size:1.06rem;font-weight:700;color:var(--paars);line-height:1.3}
.kaart:hover .kaart-body h3{color:var(--paars-licht)}
.kaart-meta{font-size:.82rem;color:var(--tekst-zacht);margin-top:-.15rem}
.kaart-tekst{font-size:.88rem;color:var(--tekst-zacht);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kaart-actie{margin-top:auto;padding-top:.5rem;display:flex;align-items:center;gap:.4rem;
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--goud)}
.kaart-actie svg{width:14px;height:14px;transition:transform .25s ease}
.kaart:hover .kaart-actie svg{transform:translateX(4px)}

/* uitgelicht: grotere kaart */
.kaart.groot .kaart-foto{aspect-ratio:3/2}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.chip{
  padding:.5rem 1.1rem;border-radius:999px;background:#fff;color:var(--tekst-zacht);
  font-size:.82rem;font-weight:600;box-shadow:inset 0 0 0 1px var(--grijs-lijn);transition:.18s;
}
.chip:hover{color:var(--paars);box-shadow:inset 0 0 0 1px var(--paars)}
.chip.aan{background:var(--paars);color:#fff;box-shadow:none}
.telling{color:var(--tekst-zacht);font-size:.88rem;margin:0 0 1.4rem}

/* ---------- popup ---------- */
.popup{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:clamp(0px,3vw,40px);opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s;
}
.popup.open{opacity:1;visibility:visible}
.popup-achtergrond{position:absolute;inset:0;background:rgba(8,4,12,.78);backdrop-filter:blur(8px)}
.popup-paneel{
  position:relative;width:min(1040px,100%);max-height:min(92vh,900px);
  background:#fff;border-radius:clamp(0px,2vw,24px);overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  transform:translateY(22px) scale(.985);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.3,1), opacity .32s ease;
}
.popup.open .popup-paneel{transform:none;opacity:1}
.popup-media{position:relative;background:var(--zwart);min-height:260px}
.popup-media img{width:100%;height:100%;object-fit:cover;object-position:var(--uitsnede,50% 50%)}
.popup-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(75,12,101,.35),transparent 55%)}

/* Staat een artiest niet mooi in de smalle linkerkolom, dan kan de foto in de
   sheet op "boven" worden gezet. Het paneel scrollt dan als geheel. */
.popup-paneel.foto-boven{
  display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;max-height:min(92vh,900px);
}
.popup-paneel.foto-boven .popup-media{height:min(46vh,400px);min-height:0}
.popup-paneel.foto-boven .popup-inhoud{max-height:none;overflow:visible}
.popup-paneel.foto-boven .popup-sluit{position:sticky;float:right;top:.9rem;margin-right:.9rem}
.popup-inhoud{padding:2.2rem 2.2rem 2.4rem;overflow-y:auto;max-height:min(92vh,900px)}
.popup-inhoud::-webkit-scrollbar{width:8px}
.popup-inhoud::-webkit-scrollbar-thumb{background:var(--grijs-lijn);border-radius:8px}
.popup-cat{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--goud);font-weight:700}
.popup-inhoud h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--paars);margin:.35rem 0 1rem;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:700;line-height:1.2}
.popup-feiten{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.feit{background:var(--grijs);border-radius:12px;padding:.55rem .9rem;font-size:.82rem;color:var(--tekst-zacht)}
.feit b{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paars);font-weight:700}
.popup-tekst p{margin:0 0 .85rem;color:var(--tekst-zacht);font-size:.95rem}
.popup-tekst h3{font-family:var(--body);font-weight:700;font-size:1rem;color:var(--paars);margin:1.5rem 0 .5rem}
.popup-tekst h3:first-child{margin-top:0}
.popup-tekst p:first-child{color:var(--tekst)}
.popup-video{margin-top:1.4rem;display:grid;gap:.8rem}
.popup-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#000}
.popup-voet{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.popup-sluit{
  position:absolute;top:.9rem;right:.9rem;z-index:5;width:42px;height:42px;border-radius:50%;
  background:rgba(11,11,14,.55);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);
  transition:.2s;
}
.popup-sluit:hover{background:var(--paars);transform:rotate(90deg)}
.popup-sluit svg{width:18px;height:18px}
.popup-nav{position:absolute;bottom:.9rem;left:.9rem;z-index:5;display:flex;gap:.4rem}
.popup-nav button{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:grid;place-items:center;backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:.2s}
.popup-nav button:hover{background:var(--goud);color:#241300}
.popup-nav svg{width:16px;height:16px}

/* ---------- verhuur ---------- */
.verhuur-kaart .kaart-foto{aspect-ratio:16/10}
.tekst-blok{max-width:70ch}
.tekst-blok p{color:var(--tekst-zacht)}

/* ---------- contact ---------- */
.contact-raster{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.contact-kaart{background:#fff;border-radius:var(--radius-l);padding:1.8rem;box-shadow:var(--schaduw)}
.contact-kaart h3{font-family:var(--body);font-weight:700;font-size:1.05rem;color:var(--paars);margin-bottom:.6rem}
.contact-lijst{display:grid;gap:.9rem;margin-top:1.2rem}
.contact-lijst a{display:flex;align-items:center;gap:.85rem;color:var(--tekst);font-size:.95rem}
.contact-lijst a:hover{color:var(--paars)}
.contact-lijst .ico{width:42px;height:42px;border-radius:50%;background:var(--grijs);display:grid;place-items:center;color:var(--paars);flex:none}
.contact-lijst svg{width:18px;height:18px}
.contact-formulier{grid-column:1 / -1;min-width:0}
@media (min-width:900px){.contact-formulier{grid-column:2 / -1}}
.formulier-kader{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--schaduw);background:#fff;min-height:760px;max-width:100%}
.formulier-kader iframe{width:100%;max-width:100%;min-height:760px;border:0;display:block}

/* ---------- cta ---------- */
.cta{position:relative;padding:4.5rem 0;text-align:center;color:#fff;background:linear-gradient(135deg,var(--paars-diep),var(--paars) 55%,var(--paars-licht))}
.cta h2{font-size:clamp(1.9rem,4vw,2.8rem);text-transform:uppercase;letter-spacing:.08em}
.cta p{color:rgba(255,255,255,.8);max-width:52ch;margin:1rem auto 2rem}

/* ---------- footer ---------- */
.voet{background:var(--zwart);color:rgba(255,255,255,.62);padding:3.2rem 0 2rem;font-size:.9rem}
.voet-raster{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr;margin-bottom:2.4rem}
.voet h4{font-family:var(--kop);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--goud);margin-bottom:.9rem}
.voet a:hover{color:#fff}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.voet img.voet-logo{height:42px;width:auto;margin-bottom:1rem}
.voet-onder{border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}

/* ---------- zwevende knoppen ---------- */
.zweef{position:fixed;left:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:.6rem}
.zweef.rechts{left:auto;right:18px}
.zweef a{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .2s}
.zweef a:hover{transform:scale(1.08)}
.zweef .bel{background:#2f6bff}
.zweef .wa{background:#25d366}
.zweef svg{width:26px;height:26px}

/* ---------- animatie ---------- */
.anim{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1)}
.anim.in{opacity:1;transform:none}

/* ---------- laden / leeg ---------- */
.skelet{border-radius:var(--radius-l);background:linear-gradient(100deg,#ececed 20%,#f6f6f7 40%,#ececed 60%);
  background-size:220% 100%;animation:sk 1.3s infinite;aspect-ratio:4/3.35}
@keyframes sk{to{background-position:-220% 0}}
.leeg{padding:3rem 0;text-align:center;color:var(--tekst-zacht)}
.bron-melding{background:#fff6e5;color:#8a5a00;font-size:.82rem;padding:.6rem 0;text-align:center}

/* ---------- eigen boekingsformulier (contact2.html) ---------- */
.fa-form{background:#fff;border-radius:var(--radius-l);padding:1.8rem;box-shadow:var(--schaduw)}
.fa-form h3.form-kop{font-family:var(--body);font-weight:700;font-size:1.05rem;color:var(--paars);margin-bottom:.35rem}
.fa-form .form-intro{color:var(--tekst-zacht);font-size:.92rem;margin:0 0 1.4rem}
.veld-groep{display:grid;gap:1rem;margin-bottom:1rem}
@media (min-width:600px){
  .veld-groep.twee{grid-template-columns:1fr 1fr}
  .veld-groep.aanhef{grid-template-columns:140px 1fr 1fr}
}
.veld{display:grid;gap:.35rem;min-width:0}
.veld > label,.veld .veld-kop{font-size:.82rem;font-weight:600;letter-spacing:.02em}
.veld .ster{color:var(--paars-licht)}
.veld .uitleg{font-size:.78rem;color:var(--tekst-zacht);font-weight:400}
.veld input[type=text],.veld input[type=email],.veld input[type=tel],.veld input[type=date],.veld select,.veld textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--tekst);
  background:var(--grijs);border:1px solid var(--grijs-lijn);border-radius:12px;
  padding:.72rem .9rem;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.veld textarea{min-height:108px;resize:vertical;line-height:1.55}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:0;background:#fff;border-color:var(--paars-licht);box-shadow:0 0 0 3px rgba(124,43,160,.14)}
.veld.fout input,.veld.fout select,.veld.fout textarea{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.veld.fout .keuze{border-color:#e0a49c}
.foutje{font-size:.78rem;color:#c0392b}
.keuzes{display:grid;gap:.5rem}
.keuzes.naast-elkaar{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.keuzes.hokjes{grid-template-columns:repeat(auto-fit,minmax(218px,1fr))}
.keuze{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;line-height:1.4;cursor:pointer;
  background:var(--grijs);border:1px solid var(--grijs-lijn);border-radius:12px;padding:.6rem .8rem;
  transition:border-color .16s ease, background .16s ease}
.keuze:hover{border-color:var(--paars-licht)}
.keuze input{margin:.15rem 0 0;accent-color:var(--paars);width:17px;height:17px;flex:none}
.keuze.aan{background:#faf5fd;border-color:var(--paars-licht)}
.form-voet{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.5rem}
.form-privacy{font-size:.78rem;color:var(--tekst-zacht);flex:1 1 200px;margin:0}
.aanvraag-kaart{display:flex;gap:1rem;align-items:center;
  background:linear-gradient(135deg,var(--paars-diep),var(--paars));color:#fff;
  border-radius:var(--radius);padding:.85rem 1rem;margin-bottom:1.4rem}
.aanvraag-kaart img{width:62px;height:62px;border-radius:12px;object-fit:cover;flex:none}
.aanvraag-kaart .soort{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--goud-licht)}
.aanvraag-kaart strong{display:block;font-family:var(--kop);font-size:1.3rem;font-weight:400;letter-spacing:.02em}
.aanvraag-kaart .wis{margin-left:auto;font-size:.76rem;color:rgba(255,255,255,.75);text-decoration:underline;flex:none}
.aanvraag-kaart .wis:hover{color:#fff}
.form-klaar{text-align:center;padding:1rem .2rem}
.form-klaar .vink{width:62px;height:62px;border-radius:50%;background:#eaf7ee;color:#1e8e4a;
  display:grid;place-items:center;margin:0 auto 1rem}
.form-klaar .vink svg{width:30px;height:30px}
.form-klaar h3{font-family:var(--kop);font-size:1.55rem;text-transform:uppercase;letter-spacing:.06em;color:var(--paars);margin-bottom:.6rem}
.form-klaar p{color:var(--tekst-zacht);font-size:.93rem;max-width:44ch;margin:0 auto .55rem}
.form-klaar .knoppen{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.3rem}
.demo-strip{background:#fff6e5;border:1px solid #f0d9a8;border-radius:var(--radius);
  padding:.9rem 1rem;margin-bottom:1.4rem;font-size:.85rem;color:#8a5a00}
.demo-strip b{display:block;margin-bottom:.5rem}
.demo-strip a{display:inline-block;background:#fff;border:1px solid #e6cfa0;border-radius:999px;
  padding:.28rem .8rem;margin:.2rem .3rem .2rem 0;color:#8a5a00}
.demo-strip a:hover{background:var(--goud);color:#241300;border-color:var(--goud)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .menu{display:none}
  .hamburger{display:flex}

  /* Op smalle schermen scrollt het hele paneel in plaats van alleen de
     tekstkolom. Anders is de popup op een telefoon niet te lezen. */
  .popup{padding:0;align-items:stretch}
  .popup-paneel{
    display:block;grid-template-columns:1fr;
    width:100%;height:100vh;height:100dvh;max-height:none;
    border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .popup-media{height:min(44vh,320px);max-height:none}
  .popup-inhoud{max-height:none;overflow:visible;padding:1.6rem 1.4rem 3.5rem}
  .popup-sluit{position:fixed;top:.8rem;right:.8rem;width:40px;height:40px;
    background:var(--zwart);box-shadow:0 0 0 2px rgba(255,255,255,.85),0 6px 18px rgba(0,0,0,.35)}

  /* Op een telefoon staat de foto sowieso boven de tekst. De keuze "Foto
     weergave" uit de sheet geldt daarom alleen op desktop; op mobiel zien
     alle popups er hetzelfde uit. */
  .popup-paneel.foto-boven{height:100vh;height:100dvh;max-height:none}
  .popup-paneel.foto-boven .popup-media{height:min(44vh,320px);max-height:none}
  .popup-paneel.foto-boven .popup-inhoud{padding:1.6rem 1.4rem 3.5rem}
  .popup-paneel.foto-boven .popup-sluit{position:fixed;float:none;
    top:.8rem;right:.8rem;margin-right:0}
  .voet-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  /* Op een smal scherm staat het paneel boven de tekst in plaats van ernaast. */
  .welkom-raster{grid-template-columns:1fr;gap:1.8rem;max-width:520px}
  .merk-paneel{padding:1.4rem 1.1rem 1.6rem;gap:.4rem;max-width:290px;margin-inline:auto}
  .merk-paneel-tekst{font-size:.68rem;letter-spacing:.1em}
  .welkom-raster .welkom{text-align:center}
  .welkom-raster .welkom .streep{margin:1.4rem auto 0}
}
@media (max-width:640px){
  .sectie{padding:3rem 0}
  .hero-inhoud{padding:8rem 22px 3rem}
  .raster{grid-template-columns:repeat(2,1fr);gap:.9rem}
  .raster.drie{grid-template-columns:repeat(2,1fr)}
  .raster.drie .verhuur-kaart{grid-column:span 2}
  .kaart-body{padding:.85rem .9rem 1rem}
  .kaart-body h3{font-size:.95rem}
  .kaart-tekst{display:none}
  .voet-raster{grid-template-columns:1fr}
  .zoek-binnen h2{font-size:1.1rem;width:100%}
  .sectie-kop h2{font-size:1.3rem}
  /* Bel- en whatsappknop in de onderhoeken, zoals op de oude site, zodat ze
     de tekst niet afdekken. */
  .zweef{left:14px;right:14px;bottom:14px;flex-direction:row;
    justify-content:space-between;pointer-events:none}
  .zweef a{width:52px;height:52px;pointer-events:auto}
  .zweef svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .anim{opacity:1;transform:none}
}