/* ==========================================================================
   Vakantievilla "de Brouwersdam" — gedeelde huisstijl
   Eén bestand voor alle pagina's. Wat hier staat is per definitie overal
   gelijk; pagina-eigen opmaak staat inline in de pagina zelf.
   ========================================================================== */

/* ---------- lettertypen: zelf gehost, geen verbinding met Google ----------
   Eczar en Open Sans zijn variabele fonts: één bestand bedient alle
   gewichten. De latin-ext-snede wordt alleen opgehaald als er een teken
   buiten Latin-1 op de pagina staat. */
@font-face{
  font-family:'Eczar';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/eczar-latin.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Eczar';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/eczar-latin-ext.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:300 800;font-display:swap;
  src:url(fonts/opensans-latin.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+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:300 800;font-display:swap;
  src:url(fonts/opensans-latin-ext.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;
}

/* ---------- tokens ---------- */
:root{
  --ink:#333333;
  --body:#6b6b6b;
  --accent:#6666a4;
  --accent-dark:#4a4a80;
  --rule:#e0dede;
  --wash:#f6f6f6;
  --white:#ffffff;
  /* donkere familie: footer, preview-balk en de donkere sectie op de
     homepage delen nu één kleur in plaats van twee verschillende zwarten */
  --nacht:#2c2c3e;
  --nacht-op:#32323f;           /* bovenkant van de donkere band */
  --nacht-diep:#26262f;         /* onderkant van de donkere band */
  --serif:"Eczar",Georgia,serif;
  --sans:"Open Sans",Arial,Helvetica,sans-serif;

  /* ---- typeschaal: tien stappen, verhouding ~1,25 ---- */
  --t-hero: clamp(2.6rem,6.6vw,5.4rem);
  --t-2xl:  clamp(2rem,4.4vw,3.4rem);
  --t-xl:   clamp(1.75rem,3.2vw,2.5rem);
  --t-l:    clamp(1.45rem,2.4vw,1.9rem);
  --t-m:    1.3125rem;
  --t-lead: clamp(1.05rem,1.4vw,1.2rem);
  --t-body: 1.0625rem;
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;
  --t-2xs:  .75rem;
  /* ---- regelhoogtes: drie in plaats van tien ---- */
  --lh-strak: 1.14;
  --lh-half:  1.45;
  --lh-body:  1.72;
  /* ---- leesbreedte ---- */
  --maat: 68ch;

  /* ---- ruimteschaal: raster van 4px ---- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;    --s-5: 1.25rem;
  --s-6: 1.5rem;  --s-7: 2rem;    --s-8: 2.5rem;  --s-9: 3rem;    --s-10: 4rem;

  /* ---- vloeiende ruimte: negen stappen, meeschalend met de breedte ---- */
  --f-1: clamp(.5rem,1.2vw,.85rem);
  --f-2: clamp(1rem,2.2vw,1.5rem);
  --f-3: clamp(1.5rem,3vw,2.25rem);
  --f-4: clamp(2rem,4vw,3rem);
  --f-5: clamp(2.5rem,5vw,4rem);
  --f-6: clamp(3rem,6vw,4.5rem);
  --sec:      clamp(3.5rem,7vw,6rem);      /* standaard sectieritme */
  --sec-ruim: clamp(4.5rem,9vw,7.5rem);    /* royaler, voor de homepage */
  --sec-hoog: clamp(2.5rem,6vh,3.5rem);    /* verticaal, hero-binnenmarge */
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --maxw:1220px;

  /* ---- per pagina in te stellen, zodat de hero niet vier keer los leeft ---- */
  --sec-pagina: var(--sec);                /* sectieritme van deze pagina */
  --hero-h: min(58vh,520px);               /* hoogte van de hero */
  --hero-h1: var(--t-2xl);                 /* koptrap in de hero */
  --hero-h1-maat: 20ch;
  --hero-scrim: linear-gradient(to right,rgba(16,16,24,.60) 0%,rgba(16,16,24,.34) 46%,rgba(16,16,24,.10) 100%),
                linear-gradient(to top,rgba(16,16,24,.62) 0%,rgba(16,16,24,.12) 42%,rgba(16,16,24,0) 70%);
}
/* de homepage is de enige pagina met een hele-schermhero */
body.pagina-home{
  --sec-pagina: var(--sec-ruim);
  --hero-h: min(92vh,900px);
  --hero-h1: var(--t-hero);
  --hero-h1-maat: 16ch;
  --hero-scrim: linear-gradient(to top,rgba(20,20,28,.82) 0%,rgba(20,20,28,.62) 24%,rgba(20,20,28,.18) 54%,rgba(20,20,28,.44) 100%);
}

/* ---------- grondslag ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--sans);font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;line-height:var(--lh-strak)}
h2{font-size:var(--t-xl);letter-spacing:-.01em}

/* ---------- preview-balk ---------- */
.preview-bar{
  background:var(--nacht);color:#cfcfe0;font-size:var(--t-2xs);letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:var(--s-2) var(--s-4);font-weight:600;
}

/* ---------- kop / navigatie ---------- */
.masthead{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-7);padding:var(--s-7) var(--gutter) 0;
}
.brand{font-family:var(--serif);color:#fff;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.5);
  text-decoration:none;display:block;transition:opacity .25s ease}
.brand:hover{opacity:.82}
.brand .b1{display:block;font-size:var(--t-lead);font-weight:400;font-style:italic;opacity:.95}
.brand .b2{display:block;font-size:var(--t-l);font-weight:600;letter-spacing:.01em;margin-top:.1em}
.nav{display:flex;gap:var(--f-3);flex-wrap:wrap;justify-content:flex-end;padding-top:var(--s-2)}
.nav a{
  color:#fff;text-decoration:none;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;text-shadow:0 1px 10px rgba(0,0,0,.55);
  /* dezelfde verticale padding als de knop, anders staat die tekst 9px lager
     dan de rest en lijnt de onderstreping niet uit met de onderrand ervan */
  padding:.55rem 0;
  border-bottom:1px solid transparent;transition:border-color .25s ease;
}
.nav a:hover,.nav a[aria-current]{border-bottom-color:rgba(255,255,255,.85)}
.nav .nav__cta{
  /* de eigen rand van 1px duwt de tekst een pixel omlaag ten opzichte van de
     gewone links; die haal ik van de padding af */
  border:1px solid rgba(255,255,255,.6);padding:calc(.55rem - 1px) 1.15rem;
  border-bottom-color:rgba(255,255,255,.6);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.nav .nav__cta:hover,.nav .nav__cta:focus-visible{background:#fff;color:var(--ink);border-color:#fff}
.nav-toggle{display:none;background:none;border:0;padding:var(--s-2) var(--s-1);cursor:pointer;z-index:40;position:relative}
.nav-toggle span{
  display:block;width:26px;height:2px;background:#fff;margin:5px 0;border-radius:2px;
  transition:transform .3s ease,opacity .2s ease;box-shadow:0 1px 6px rgba(0,0,0,.4);
}
.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)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:var(--hero-h);display:flex;align-items:flex-end;overflow:hidden;background:#20202c}
.hero__media{position:absolute;inset:0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}
/* eindbeeld: de intro vloeit hierin over en blijft dan staan */
.hero__still{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease-in-out;pointer-events:none}
.hero__still[data-zichtbaar="true"]{opacity:1}
.hero__scrim{position:absolute;inset:0;background:var(--hero-scrim)}
.hero__inner{position:relative;z-index:5;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--sec-hoog)}
.hero__eyebrow{
  color:rgba(255,255,255,.9);font-size:var(--t-2xs);letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;margin:0 0 var(--s-4);
}
.hero h1{
  color:#fff;font-size:var(--hero-h1);font-weight:400;letter-spacing:-.005em;
  max-width:var(--hero-h1-maat);text-shadow:0 3px 30px rgba(0,0,0,.42);
}
.hero h1 em{font-style:italic;font-weight:400}
.hero__lead{
  color:rgba(255,255,255,.92);font-size:var(--t-lead);line-height:var(--lh-body);
  max-width:44ch;margin:var(--s-6) 0 0;font-weight:300;text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.hero__cue{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:6;
  width:1px;height:52px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.85));
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25;transform:translateX(-50%) scaleY(.6)}50%{opacity:1;transform:translateX(-50%) scaleY(1)}}
/* de hero komt in volgorde op */
.js .hero__inner > *{opacity:0;transform:translateY(20px);animation:hero-op 1s cubic-bezier(.22,.61,.36,1) forwards}
.js .hero__eyebrow{animation-delay:.35s}
.js .hero h1{animation-delay:.5s}
.js .hero__lead{animation-delay:.75s}
.js .hero__cue{opacity:0;animation:hero-op 1s ease forwards;animation-delay:1.3s}
@keyframes hero-op{to{opacity:1;transform:none}}

/* ---------- sectie-grondvorm ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--sec-pagina) 0}
.lede{font-size:var(--t-lead);line-height:var(--lh-body);color:#5e5e5e;font-weight:300}

/* ---------- het motief: een merkteken dat op een horizon staat ----------
   De hele site is opgebouwd uit haarlijnen van 1px. Dit maakt daar één
   vorm van: een korte horizontale lijn met een verticaal streepje erop.
   Hij staat boven elk sectielabel, op elke pagina, en keert terug als
   scheiding tussen de grote delen van een pagina. */
.eyebrow{
  position:relative;color:var(--accent);font-size:var(--t-2xs);letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;margin:0 0 var(--s-6);
  padding-top:calc(var(--s-4) + .5rem);
}
.eyebrow::before{                       /* de horizon */
  content:"";position:absolute;top:calc(var(--s-4) + .5rem - .75rem);left:0;
  width:2.75rem;height:1px;background:currentColor;opacity:.45;
}
.eyebrow::after{                        /* wat erop staat */
  content:"";position:absolute;top:calc(var(--s-4) + .5rem - 1.25rem);left:.95rem;
  width:1px;height:.5rem;background:currentColor;opacity:.85;
}
.hero__eyebrow{position:relative;padding-top:calc(var(--s-4) + .5rem)}
.hero__eyebrow::before{
  content:"";position:absolute;top:calc(var(--s-4) + .5rem - .75rem);left:0;
  width:2.75rem;height:1px;background:currentColor;opacity:.6;
}
.hero__eyebrow::after{
  content:"";position:absolute;top:calc(var(--s-4) + .5rem - 1.25rem);left:.95rem;
  width:1px;height:.5rem;background:currentColor;opacity:.95;
}
/* Hetzelfde teken, maar dan op een haarlijn die er toch al was. Geen nieuwe
   streepjes toevoegen — de bestaande scheidingen krijgen het merkteken. */
.merkteken{position:relative}
.merkteken::after{
  content:"";position:absolute;left:2.5rem;top:-.62rem;
  width:1px;height:.62rem;background:var(--accent);opacity:.7;
}
/* voor een element dat de volle breedte pakt: uitlijnen op de tekstkolom,
   anders staat het teken in de marge en hoort het nergens bij */
.merkteken--vol::after{
  left:calc((100% - min(100%,var(--maxw)))/2 + var(--gutter) + 2.5rem);
}

/* ---------- lijsten ---------- */
.kenmerken{columns:2;column-gap:var(--f-5);margin:0;padding:0;list-style:none}
.kenmerken li{
  break-inside:avoid;padding:var(--s-2) 0 var(--s-2) var(--s-6);position:relative;
  border-bottom:1px solid var(--rule);font-size:var(--t-body);
}
.kenmerken li::before{
  content:"";position:absolute;left:0;top:1.55em;width:14px;height:1px;
  background:var(--accent);opacity:.5;
}
.afstanden{list-style:none;margin:var(--s-7) 0 0;padding:0}
.afstanden li{
  display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-3) 0;
  border-bottom:1px solid var(--rule);transition:padding-left .25s ease;
}
.afstanden li:hover{padding-left:var(--s-2)}
.afstanden .plek{color:var(--ink)}
.afstanden .leader{flex:1;border-bottom:1px dotted #c9c9c9;transform:translateY(-.25em)}
.afstanden .km{font-family:var(--serif);color:var(--accent);font-size:var(--t-lead);white-space:nowrap}

/* ---------- knoppen ---------- */
.knop{
  display:inline-block;margin-top:var(--s-7);background:var(--accent);color:#fff;text-decoration:none;
  font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:var(--s-4) var(--s-8);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.knop:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 18px rgba(102,102,164,.24)}
.knop:active{transform:translateY(0)}
.knop--licht{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.knop--licht:hover{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(102,102,164,.16)}

/* ---------- kaart ---------- */
.kaart{margin-top:var(--f-4)}
.kaart__vlak{position:relative;border:1px solid var(--rule);background:var(--wash);
  aspect-ratio:16/7;overflow:hidden}
.kaart__vlak iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.kaart__onder{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-3) var(--s-6);flex-wrap:wrap;margin-top:var(--s-4)}
.kaart__onder p{margin:0;font-size:var(--t-xs);color:var(--body)}
.kaart__route{display:inline-flex;align-items:center;gap:var(--s-2);text-decoration:none;
  border:1px solid var(--accent);color:var(--accent);padding:var(--s-2) var(--s-4);
  font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease}
.kaart__route:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
.kaart__route svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
@media (max-width:700px){.kaart__vlak{aspect-ratio:4/3}}

/* ---------- voettekst: op alle pagina's dezelfde ---------- */
.slot{background:var(--nacht);color:#c9c9d6}
.slot .wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:var(--s-8);padding-top:var(--f-6);padding-bottom:var(--f-6);
}
.slot h3{
  color:#fff;font-family:var(--sans);font-size:var(--t-2xs);letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;margin-bottom:var(--s-5);
  padding-bottom:var(--s-3);border-bottom:1px solid rgba(255,255,255,.18);
}
.slot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.slot a:hover{border-bottom-color:#fff}
.slot p{margin:0 0 var(--s-2);font-size:var(--t-body)}
.slot__nu{color:#9d9dc4;font-size:var(--t-xs);margin-top:var(--s-4)}

/* ---------- leesbreedte: geen regels van 160 tekens ---------- */
.notitie,.weer__bron,.ervaringen-bron,.kaart__onder p,.melding{max-width:var(--maat)}
.lede,.intro p,.welkom__body p,.indeling p,.ervaring blockquote{max-width:var(--maat)}

/* ---------- detailafwerking ---------- */
/* 1. rustig opkomen bij het scrollen — alleen als JS draait, zodat de
      inhoud zonder JS gewoon zichtbaar blijft */
.js [data-op]{opacity:0;transform:translateY(14px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.js [data-op].zichtbaar{opacity:1;transform:none}
/* 2. cijfers in tabelvorm: gelijke breedte, dus nette kolommen */
.dag,.dagnaam,.bedrag,.km,.getal,.weer__graden,.weer__dag .temp,.feiten dd,
.score__cijfer b,.prijzen .bedrag,.afstanden .km,.weer__meter dd{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* 3. ankers landen met lucht erboven */
[id]{scroll-margin-top:var(--f-4)}
/* 4. toetsenbordfocus overal zichtbaar */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.masthead a:focus-visible,.nav-toggle:focus-visible,.hero a:focus-visible,
.slot a:focus-visible,.slot-beeld a:focus-visible{outline-color:#fff;outline-offset:4px}
/* 5. onderstreping die intekent in plaats van aanfloept */
.direct .groot{
  font-family:var(--serif);font-size:var(--t-l);color:var(--accent);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  border-bottom:0;transition:background-size .3s ease}
.direct .groot:hover{background-size:100% 1px}
.springen a{transition:border-color .2s ease,color .2s ease,transform .2s ease}
.springen a:hover{transform:translateY(-1px)}

/* ---------- kleinere schermen ---------- */
@media (max-width:860px){
  :root{--hero-h:min(50vh,420px)}
  body.pagina-home{--hero-h:min(88vh,760px)}
  .kenmerken{columns:1}
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:0;background:rgba(26,26,38,.97);
    flex-direction:column;align-items:center;justify-content:center;gap:var(--s-7);padding:0;
    opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;z-index:30;
  }
  .nav[data-open="true"]{opacity:1;visibility:visible}
  .nav a{font-size:var(--t-sm);letter-spacing:.22em;text-shadow:none}
  .nav .nav__cta{border-color:rgba(255,255,255,.55);padding:.7rem 1.6rem}
}

@media (prefers-reduced-motion:reduce){
  .hero__still{transition:none}
  .hero__cue{animation:none}
  .js [data-op]{opacity:1;transform:none;transition:none}
  .js .hero__inner > *,.js .hero__cue{opacity:1;transform:none;animation:none}
  .knop:hover,.springen a:hover,.kaart__route:hover,.afstanden li:hover{transform:none}
  *{scroll-behavior:auto!important}
}

/* ---------- de agenda van WP Booking System ----------
   De agenda zelf blijft precies zoals hij is: dezelfde kalender, dezelfde
   werking, hetzelfde beheer in wp-admin. Alleen de verzendknop trek ik gelijk
   met de andere knoppen op de site - die stond op wit-op-#aaa (contrast 2,32)
   en dat is te weinig voor de belangrijkste knop van de hele site.
   De plugin zet !important op al zijn knopregels en laadt na dit bestand,
   dus alleen !important is niet genoeg: het moet ook specifieker. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field button[type=submit],
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=submit]{
  background-color:var(--accent)!important;
  color:#fff!important;
  border:0!important;
  font-family:var(--sans)!important;
  font-size:13px!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  font-weight:600!important;
  padding:15px 30px!important;
  transition:background-color .25s ease!important;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field button[type=submit]:hover,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=submit]:hover{
  background-color:var(--accent-dark)!important;
}
/* de agenda krijgt lucht binnen het sectieritme */
.agenda__echt{margin-top:var(--f-3)}

/* ---------- het boekingsformulier compacter ----------
   WP Booking System zet het formulier op max-width:500px en stapelt alle 19
   velden onder elkaar: 1701px scrollen om acht gegevens in te vullen. Hier
   krijgt het de volle kolombreedte en een raster van 12, zodat wat bij elkaar
   hoort ook naast elkaar staat. Alleen opmaak - aan de velden zelf, de
   validatie en het versturen verandert niets.
   De plugin gebruikt overal !important, dus dat moet hier ook, én een niveau
   specifieker omdat zijn stylesheet ná deze laadt. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container{
  max-width:none!important;
  padding:var(--f-3) 0 0 0!important;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-fields{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--s-6);
  row-gap:var(--s-4);
  align-items:start;
}
/* wat bij elkaar hoort, naast elkaar */
/* WPBS zet padding:0 0 20px op elk veld; samen met de rastergoot van het
   grid gaf dat 40px tussen elke rij. De goot doet het werk nu alleen. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field{
  grid-column:span 12;margin:0!important}
/* De plugin zet de padding via ...wpbs-form-field:not(.wpbs-form-field-hidden),
   en dat :not() telt mee voor de specificiteit. Zonder dezelfde vorm blijft het
   gelijkspel en wint de plugin, want die laadt later. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field:not(.wpbs-form-field-hidden){
  padding:0!important}
/* Aankomst en Vertrek zitten in een eigen wrapper met gefloate kinderen; díé
   is het grid-item, niet de velden zelf. Zonder dit klapt hij in tot 68px en
   vallen de labels over elkaar. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-selected-dates{
  grid-column:span 6;width:100%!important;
  display:flex!important;gap:var(--f-2)!important;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-selected-date{
  float:none!important;flex:1 1 0!important;width:auto!important;min-width:0!important;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-total{grid-column:span 6}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-dropdown{grid-column:span 3}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-text,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-email{grid-column:span 6}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-payment_method{grid-column:span 5}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-textarea{grid-column:span 7}

/* labels: 16px vet is fors voor een formulier van deze lengte */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field label,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field .wpbs-form-field-label span{
  font-family:var(--sans)!important;
  font-size:12px!important;
  line-height:16px!important;
  letter-spacing:.06em!important;
  font-weight:600!important;
  color:var(--ink)!important;
  padding:0 0 4px 0!important;
}
/* invoervelden iets lager en rustiger */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=text],
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=email],
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=number],
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field select{
  height:38px!important;
  font-family:var(--sans)!important;
  font-size:15px!important;
  border-radius:0!important;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field textarea{
  font-family:var(--sans)!important;font-size:15px!important;
  height:104px!important;border-radius:0!important;
}
/* keuzerondjes naast elkaar in plaats van onder elkaar */
.agenda__echt .wpbs-form-field-product_radio .wpbs-form-field-input,
.agenda__echt .wpbs-form-field-payment_method .wpbs-form-field-input,
.agenda__echt .wpbs-form-field-radio .wpbs-form-field-input{
  display:flex!important;flex-wrap:wrap!important;
  gap:var(--s-2) var(--s-6)!important;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.wpbs-form-field-product_radio .wpbs-form-field-input label,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.wpbs-form-field-payment_method .wpbs-form-field-input label,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field.wpbs-form-field-radio .wpbs-form-field-input label{
  font-size:14px!important;font-weight:400!important;
  line-height:21px!important;margin:0!important;
  /* het keuzerondje staat absoluut op left:0 en is 21px breed - die ruimte
     moet blijven staan, anders schuift het label eroverheen */
  padding:0 0 0 29px!important;
  width:auto!important;
}
/* de knop staat los onder het raster */
.agenda__echt .wpbs-form-submit-button{margin-top:var(--f-3)!important}

@media (max-width:860px){
  /* op mobiel weer onder elkaar, behalve wat echt kort is */
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field{grid-column:span 12}
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-start-date,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-end-date{grid-column:span 6}
}

/* Aankomst, Vertrek en Prijs zijn geen invoervelden maar samenvattingsregels.
   WPBS geeft ze een eigen breedte van 34px, waardoor de labels over elkaar
   vielen zodra ze naast elkaar kwamen te staan. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-start-date,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-end-date,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-total{
  width:100%!important;min-width:0!important;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-start-date .wpbs-form-field-input,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-end-date .wpbs-form-field-input{
  font-family:var(--serif)!important;font-size:var(--t-lead)!important;color:var(--ink)!important;
}

/* Bij het prijsveld staat zowel het label als de omschrijving op "Prijs", dus
   het woord verschijnt twee keer onder elkaar. Dat is geen plugin-fout maar
   een dubbele invoer in de formulierinstellingen; hier alleen weggenomen in
   beeld. De echte oplossing is het omschrijvingsveld in wp-admin leegmaken,
   dan is het ook op de huidige site opgelost. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-total .wpbs-form-field-description{
  display:none!important;
}

/* ---------- het formulier als herkenbaar invulblok ----------
   Het formulier viel weg: witte velden met haarlijntjes op een witte pagina,
   zonder kop die aankondigt dat je hier iets moet invullen. Een witte kaart
   helpt niet op een witte pagina - die is alleen zichtbaar met een schaduw en
   dat vecht met de haarlijnen van de rest. Daarom het omgekeerde: het blok op
   de wash-kleur die de site al gebruikt, zodat de witte invoervelden juist de
   lichte elementen worden. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container{
  background:var(--wash)!important;
  padding:var(--f-4)!important;
  margin-top:var(--f-4)!important;
}
/* kop erboven, met hetzelfde merkteken als elk ander sectielabel */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container::before{
  content:"Stap 2 \2014 uw gegevens";
  display:block;
  font-family:var(--sans);font-size:var(--t-2xs);letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;color:var(--accent);
  padding-top:1.55rem;margin-bottom:var(--f-2);
  background-image:
    linear-gradient(rgba(102,102,164,.45),rgba(102,102,164,.45)),
    linear-gradient(rgba(102,102,164,.85),rgba(102,102,164,.85));
  background-repeat:no-repeat;
  background-size:2.75rem 1px, 1px .5rem;
  background-position:0 .8rem, .95rem .3rem;
}
/* invoervelden wit, zodat ze op de wash juist oplichten */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=text],
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=email],
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=number],
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field select,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field textarea{
  background-color:#fff!important;
  border:1px solid #dcdadf!important;
}
/* het grijze kadertje bij de betaalwijze was het enige gevulde vlak en trok
   daardoor de meeste aandacht; op de wash mag het gewoon meelopen */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-description{
  background:transparent!important;border:0!important;
  padding:var(--s-2) 0 0 0!important;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-description small{
  font-size:var(--t-xs)!important;color:var(--body)!important;line-height:var(--lh-half)!important;
}
/* de knop mag zichtbaar het einde van het blok markeren */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field button[type=submit],
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type=submit]{
  min-width:16rem!important;
}

/* Keuzevelden met maar één optie (schoonmaakkosten, borgsom) zijn eigenlijk
   bevestigingen, geen keuzes - die mogen naast elkaar in plaats van elk een
   hele regel. Velden met meerdere opties houden de volle breedte nodig.
   :has() wordt door alle huidige browsers ondersteund; waar niet, blijft de
   regel gewoon op span 12 staan. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container
  .wpbs-form-field-product_radio:has(> .wpbs-form-field-input > label:only-child){
  grid-column:span 4;
}
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-dropdown{
  grid-column:span 4;
}

@media (max-width:860px){
  /* De :has()-regel hierboven is specifieker dan de algemene mobiele regel,
     dus die moet hier letterlijk herhaald worden - anders blijven deze velden
     op een telefoon 79px breed staan. */
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container
    .wpbs-form-field-product_radio:has(> .wpbs-form-field-input > label:only-child),
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-dropdown,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-payment_method,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-textarea,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-text,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-email,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-selected-dates{
    grid-column:span 12;
  }
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container{padding:var(--f-3) var(--f-2)!important}
}

/* ---------- credit onderaan ---------- */
.slot__credit{
  border-top:1px solid rgba(255,255,255,.14);
  max-width:var(--maxw);margin:0 auto;padding:var(--s-6) var(--gutter) var(--f-4);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);
  justify-content:space-between;align-items:baseline;
  font-size:var(--t-xs);color:#9d9dc4;
}
.slot__credit a{color:#cfcfe0;border-bottom:1px solid rgba(255,255,255,.3)}
.slot__credit a:hover{color:#fff;border-bottom-color:#fff}

/* De persoonsgegevens pasten in twee kolommen; drie scheelt nog een rij en
   houdt bij elkaar wat samen wordt ingevuld. De veld-id's komen uit het
   formulier zelf (wpbs-form-field-1-XX), dus dit blijft kloppen zolang de
   velden niet opnieuw worden aangemaakt. */
/* Alle zes even breed: het raster plaatst op DOM-volgorde, en met ongelijke
   breedtes viel er een gat na Achternaam omdat het volgende veld niet meer
   paste. Drie per rij, netjes vol. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-1,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-2,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-35,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-36,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-4,
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-6{grid-column:span 4}

@media (max-width:860px){
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-1,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-2,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-4,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-35,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-36,
  .agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-1-6{grid-column:span 12}
}

/* Het toelichtingsvlak bij de betaalwijze had een eigen grijze achtergrond en
   was daarmee het enige gevulde vlak in het formulier. */
.agenda__echt .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field-payment_method p.wpbs-payment-method-description{
  background:transparent!important;border:0!important;
  padding:var(--s-2) 0 0 0!important;margin:0!important;
  font-size:var(--t-xs)!important;color:var(--body)!important;line-height:var(--lh-half)!important;
}

/* ---------- uitklappers ----------
   Native <details>/<summary>: geen plugin, geen JavaScript nodig, en een
   schermlezer en het toetsenbord kunnen er meteen mee overweg. Alleen
   haarlijnen, zoals de rest van de site - geen grijze balken. */
.uitklap{border-top:1px solid var(--rule);margin-top:var(--f-4)}
.uitklap details{border-bottom:1px solid var(--rule)}
.uitklap summary{
  display:flex;align-items:baseline;gap:var(--s-5);
  padding:var(--s-6) 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:var(--t-m);color:var(--ink);
  transition:color .2s ease;
}
.uitklap summary::-webkit-details-marker{display:none}
.uitklap summary::marker{content:""}
.uitklap summary::before{
  content:"+";font-family:var(--sans);font-weight:400;font-size:var(--t-lead);
  color:var(--accent);line-height:1.1;width:1rem;flex:0 0 1rem;text-align:center;
}
.uitklap details[open] summary::before{content:"\2013"}
.uitklap summary:hover{color:var(--accent)}
.uitklap summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.uitklap__inhoud{padding:0 0 var(--s-7) calc(1rem + var(--s-5));max-width:var(--maat)}
.uitklap__inhoud > :first-child{margin-top:0}
.uitklap__inhoud p{margin:0 0 var(--s-4);font-size:var(--t-sm);color:var(--body);
  line-height:var(--lh-body)}
.uitklap__inhoud ul{list-style:none;margin:0;padding:0}
.uitklap__inhoud li{position:relative;padding:var(--s-2) 0 var(--s-2) var(--s-6);
  font-size:var(--t-sm);color:var(--body);line-height:var(--lh-half)}
.uitklap__inhoud li::before{content:"";position:absolute;left:0;top:1.05em;
  width:14px;height:1px;background:var(--accent);opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .uitklap details[open] .uitklap__inhoud{animation:uitklap-op .3s ease}
}
@keyframes uitklap-op{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- agenda: kalender en formulier als één stap-voor-stap geheel ----------
   Het probleem was de afstand tussen oorzaak en gevolg: je tikt een datum in
   de kalender en ziet pas 1700px lager wát je gekozen hebt. Op een telefoon is
   dat anderhalf scherm. Daarom een balk die meeloopt zolang je in de kalender
   bezig bent, en die weer verdwijnt zodra de samenvatting in het formulier
   zelf in beeld komt. De balk spiegelt alleen wat WP Booking System al weet -
   hij grijpt nergens in op de boeking. */
.agenda__stap{
  font-size:var(--t-2xs);letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--accent);margin:var(--f-3) 0 var(--s-5);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--rule);
}
.agenda__stap b{font-family:var(--serif);font-weight:400;letter-spacing:0;
  text-transform:none;font-size:var(--t-body);color:var(--ink);margin-right:var(--s-3)}

/* extra maanden inklappen op een telefoon: vier maanden onder elkaar is 1600px */
@media (max-width:860px){
  .agenda__echt .wpbs-calendars > .wpbs-calendar:nth-child(n+3){display:none}
  .agenda__echt.toon-alles .wpbs-calendars > .wpbs-calendar:nth-child(n+3){display:block}
}
.agenda__meer{
  display:none;width:100%;background:none;border:1px solid var(--rule);color:var(--accent);
  font-family:var(--sans);font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;padding:var(--s-4);cursor:pointer;margin-top:var(--s-5);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.agenda__meer:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:860px){.agenda__meer{display:block}}
/* korte bevestiging dat je bent aangekomen bij het formulier */
.agenda__echt .wpbs-form-container.is-aangekomen{
  animation:aangekomen 1.6s ease-out;
}
@keyframes aangekomen{
  0%   {box-shadow:0 0 0 0 rgba(102,102,164,.55)}
  35%  {box-shadow:0 0 0 4px rgba(102,102,164,.30)}
  100% {box-shadow:0 0 0 0 rgba(102,102,164,0)}
}
@media (prefers-reduced-motion:reduce){
  .agenda__echt .wpbs-form-container.is-aangekomen{animation:none}
}

/* ---------- de agenda als boekingskalender ----------
   Geen beschikbaarheidsraster met alarmerende vlakken, maar een kalender waarin
   je per nacht ziet wat het kost. WP Booking System nest de prijs bínnen het
   dagnummer, in één regel met line-height 47px — vandaar dat die twee over
   elkaar vielen. Hier worden het twee regels onder elkaar.
   Bezette dagen worden doorgestreept in plaats van rood: dat leest sneller en
   is rustiger. Een hoekje markeert een wisseldag. */

.agenda__echt .wpbs-date{
  position:relative;border:1px solid transparent!important;
  transition:background .15s ease,border-color .15s ease;
}
.agenda__echt .wpbs-date-inner{
  height:56px!important;line-height:1!important;padding:0!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;z-index:2;
}
.agenda__echt .wpbs-date-number{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--sans);font-size:var(--t-sm);line-height:1.05;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.agenda__echt .wpbs-daily-price{
  font-size:10.5px;line-height:1;color:var(--body);font-weight:400;white-space:nowrap;
}

/* de gekleurde vlakken van de plugin uit */
.agenda__echt .wpbs-date .wpbs-legend-item-icon{opacity:0!important}

/* boekbaar */
.agenda__echt .wpbs-date.wpbs-is-bookable{
  cursor:pointer;background:#fff;border-color:var(--rule)!important;
}
.agenda__echt .wpbs-date.wpbs-is-bookable:hover{
  background:#f2f1f6;border-color:var(--accent)!important;
}

/* bezet: doorgestreept en gedempt, zonder prijs */
.agenda__echt .wpbs-date:not(.wpbs-is-bookable) .wpbs-daily-price{display:none}
.agenda__echt .wpbs-date.wpbs-legend-item-2:not(.wpbs-is-bookable) .wpbs-date-number{
  color:#b3b1ba;text-decoration:line-through;text-decoration-thickness:1px;
}

/* wisseldag: alleen aankomen of vertrekken */
.agenda__echt .wpbs-date.wpbs-legend-item-3.wpbs-is-bookable::before,
.agenda__echt .wpbs-date.wpbs-legend-item-4.wpbs-is-bookable::before{
  content:"";position:absolute;top:0;left:0;z-index:3;
  border-width:.5rem .5rem 0 0;border-style:solid;
  border-color:var(--accent) transparent transparent transparent;opacity:.5;
}

/* vandaag en de dagen die de plugin tijdens het kiezen markeert */
.agenda__echt .wpbs-date.wpbs-date-today{box-shadow:inset 0 0 0 1px var(--accent)}
.agenda__echt .wpbs-date.wpbs-date-hover,
.agenda__echt .wpbs-date.wpbs-selected,
.agenda__echt .wpbs-date.wpbs-selected-first,
.agenda__echt .wpbs-date.wpbs-selected-last{
  background:var(--accent)!important;border-color:var(--accent)!important;
}
.agenda__echt .wpbs-date.wpbs-date-hover .wpbs-date-number,
.agenda__echt .wpbs-date.wpbs-selected .wpbs-date-number,
.agenda__echt .wpbs-date.wpbs-selected-first .wpbs-date-number,
.agenda__echt .wpbs-date.wpbs-selected-last .wpbs-date-number{color:#fff}
.agenda__echt .wpbs-date.wpbs-date-hover .wpbs-daily-price,
.agenda__echt .wpbs-date.wpbs-selected .wpbs-daily-price,
.agenda__echt .wpbs-date.wpbs-selected-first .wpbs-daily-price,
.agenda__echt .wpbs-date.wpbs-selected-last .wpbs-daily-price{color:rgba(255,255,255,.85)}

/* weekdagkoppen in de huisstijl */
.agenda__echt .wpbs-day-name,.agenda__echt .wpbs-calendar th{
  font-family:var(--sans)!important;font-size:var(--t-2xs)!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--body)!important;font-weight:600!important;
}

/* kleurenlegenda vervalt: doorgestreept en een hoekje leggen zichzelf uit */
.agenda__echt .wpbs-legend{display:none!important}
.agenda__uitleg{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--f-3);
  font-size:var(--t-xs);color:var(--body);margin:0 0 var(--f-2);
}
.agenda__uitleg span{display:inline-flex;align-items:center;gap:var(--s-3)}
.agenda__uitleg i{font-style:normal;color:#b3b1ba;text-decoration:line-through}
.agenda__uitleg b{
  font-weight:400;position:relative;width:1.15rem;height:1.15rem;
  border:1px solid var(--rule);display:inline-block}
.agenda__uitleg b::before{
  content:"";position:absolute;top:0;left:0;border-width:.45rem .45rem 0 0;
  border-style:solid;border-color:var(--accent) transparent transparent transparent;opacity:.5}

/* twee maanden per rij: met de prijzen erbij passen er geen vier meer naast
   elkaar, en 3+1 leest als een fout in plaats van als een keuze */
.agenda__echt .wpbs-calendars{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--f-3)!important;
}
@media (max-width:760px){
  .agenda__echt .wpbs-calendars{grid-template-columns:1fr}
}
.agenda__echt .wpbs-calendar{width:auto!important;margin:0!important;float:none!important}

/* dagen buiten de maand zijn geen dagen */
.agenda__echt .wpbs-date.wpbs-gap{
  background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.agenda__echt .wpbs-date.wpbs-gap .wpbs-date-inner{visibility:hidden}

/* De plugin zet een grijze balk en een vaste breedte om elke maand. Die chrome
   gaat eraf; de maandnaam krijgt de typografie van de site. Let op: de breedte
   staat inline (max-width:380px), dus die moet expliciet overschreven worden. */
.agenda__echt .wpbs-calendar,
.agenda__echt .wpbs-calendar-header,
.agenda__echt .wpbs-calendar-wrapper,
.agenda__echt .wpbs-calendar-header-navigation{
  background:transparent!important;border:0!important;box-shadow:none!important;
}
.agenda__echt .wpbs-calendar{max-width:none!important;min-width:0!important}
.agenda__echt .wpbs-calendar-header{
  border-bottom:1px solid var(--rule)!important;
  padding:0 0 var(--s-4)!important;margin-bottom:var(--s-5)!important;
}
.agenda__echt .wpbs-calendar-header-navigation{
  display:flex!important;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.agenda__echt .wpbs-calendar-header-navigation-month-name{
  font-family:var(--serif)!important;font-size:var(--t-l)!important;
  color:var(--ink)!important;font-weight:400!important;letter-spacing:0!important;
  text-transform:none!important;
}
.agenda__echt select{
  font-family:var(--serif)!important;font-size:var(--t-l)!important;color:var(--ink)!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  padding:0 1.6rem 0 0!important;height:auto!important;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%)!important;
  background-size:6px 6px,6px 6px!important;
  background-position:calc(100% - 12px) center,calc(100% - 6px) center!important;
  background-repeat:no-repeat!important;
}
.agenda__echt .wpbs-calendar-nav,
.agenda__echt .wpbs-previous,.agenda__echt .wpbs-next{
  background:transparent!important;border:1px solid var(--rule)!important;
  color:var(--accent)!important;border-radius:0!important;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.agenda__echt .wpbs-previous:hover,.agenda__echt .wpbs-next:hover{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}