/* =====================================================================
   123Boekingen — website
   ---------------------------------------------------------------------
   De kleuren en lettertypen komen uit het CMS via huisstijl_css():
   --merk, --donker, --tekst, --achtergrond, --font-kop, --font-tekst
   en --radius-kaart. Dit blad bouwt daarop voort.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Een eigen stylesheet wint van de standaardregel van de browser. Zonder
   deze regel blijft een element met het attribuut hidden gewoon zichtbaar
   zodra er ergens display staat. */
[hidden]{ display: none !important; }

:root{
  --lijn:    #e4e6ea;
  --grijs:   #6b7280;
  --papier:  #f6f7f9;
  --schaduw: 0 1px 2px rgba(24,28,38,.06), 0 8px 24px rgba(24,28,38,.05);

  /* -------------------------------------------------------------------
     De kleuren die met de donkere modus meedraaien.

     Hieronder staan de lichte waarden; de donkere staan bij elkaar in
     site/stijl.php, zodat er maar op één plek geteld hoeft te worden.
     Staat er in een regel hieronder een vaste kleur in plaats van zo'n
     variabele, dan blijft die in het donker gewoon licht — precies wat
     er misging bij de contactpagina.
     ---------------------------------------------------------------- */
  --vlak:       #fff;      /* een kaart, een paneel, een invulveld     */
  --vlak-zacht: #f7f8fa;   /* een subtiele vulling, iets van de kaart af */
  --beeldvlak:  #eceef2;   /* waar een foto hoort te staan             */
  --beeldvlak-diep: #e6e9ee;  /* de onderkant van dat vlak             */
  --beeldtekst: #aab1bb;   /* de naam die je ziet als de foto mist     */
  --hart-vlak:  rgba(255,255,255,.92);  /* het hartje op een foto      */
  --diep:       var(--donker);  /* balken die juist donker moeten blijven */
  --lees:       #414855;   /* lopende tekst, iets zachter dan de kop   */

  /* Meldingen: goed, fout en let op. */
  --goed-vlak: #f2fbf6;  --goed-lijn: #bfe3cd;  --goed-tekst: #1d6b40;
  --fout-vlak: #fdf2f0;  --fout-lijn: #e8c4bd;  --fout-tekst: #8d2f1c;
  --let-vlak:  #fdf9ef;  --let-lijn:  #e6d9bb;  --let-tekst:  #7a5c1e;
  /* Blauw, voor een optie op een datum — 1ste t/m 4de optie. */
  --optie-vlak: #eaf0fb;  --optie-lijn: #c6d5ee;  --optie-tekst: #274b8a;
}

body{
  margin:0; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-family:var(--font-tekst, 'Montserrat', system-ui, -apple-system, sans-serif);
  color:var(--tekst, #222631);
  background:var(--achtergrond, #fff);
}
h1, h2, h3, h4, h5, h6{
  font-family:var(--font-kop, 'Roboto Slab', Georgia, serif);
}
input, select, textarea, button{ font-family:inherit; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

.omhulsel{ max-width:var(--max-breedte,1620px); margin:0 auto; padding:0 24px; }
.verborgen{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.overslaan{
  position:absolute; top:-60px; left:12px; z-index:200;
  background:var(--diep); color:#fff; padding:10px 18px; border-radius:0 0 6px 6px;
}
.overslaan:focus{ top:0; }

/* ---------------- knoppen en labels uit het CMS ----------------
   De kleuren per knop komen uit stijl.php; de vorm staat hier.        */
.cms-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-kop); font-weight:600; line-height:1.2;
  border-style:solid; border-width:1px; cursor:pointer; text-decoration:none;
  border-radius:8px;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.cms-knop:hover{ text-decoration:none; }
.cms-knop svg{ width:1.15em; height:1.15em; flex:0 0 auto; }
.cms-knop--klein{ font-size:.85rem; padding:.62em 1.1em; }
.cms-knop--normaal{ font-size:.97rem; padding:.85em 1.45em; }
.cms-knop--groot{ font-size:1.05rem; padding:1em 1.9em; }
.cms-knop--vol{ width:100%; }
.cms-knop__pijl{ transition:transform .18s ease; }
.cms-knop--pijl:hover .cms-knop__pijl{ transform:translateX(3px); }
.cms-knop--omhoog:hover{ transform:translateY(-2px); }
.cms-knop--puls:hover{ animation:cms-puls .9s ease infinite; }
@keyframes cms-puls{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
.cms-knop--glans{ position:relative; overflow:hidden; }
.cms-knop--glans::after{
  content:''; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:left .5s ease;
}
.cms-knop--glans:hover::after{ left:120%; }

.cms-label{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:.3em .7em; border-radius:3px;
}

/* ---------------- navigatiebalk ---------------- */
.balk{
  background:var(--vlak); border-bottom:1px solid var(--lijn);
  position:sticky; top:0; z-index:100;
}
/* min-width:0 op allebei: zonder dat weigert een flex-kind kleiner te
   worden dan zijn inhoud en duwt het de balk over de rand in plaats van
   mee te krimpen. */
.balk__binnen{
  display:flex; align-items:center; gap:34px; min-height:88px; min-width:0;
}

/* logo */
.logo{ text-decoration:none; display:block; flex:0 0 auto; }
.logo__naam{ display:block; line-height:1; white-space:nowrap; }
.logo__cijfer{
  font-family:var(--font-kop); font-weight:700; font-size:31px;
  color:var(--merk); letter-spacing:-.045em;
}
.logo__woord{
  font-family:var(--font-kop); font-weight:700; font-size:31px;
  color:var(--donker); letter-spacing:-.035em;
}
.logo__regel{
  display:block; margin-top:5px; padding-top:5px;
  border-top:1px solid rgba(240,78,35,.35);
  font-size:9px; font-weight:600; letter-spacing:.235em;
  color:var(--merk); text-transform:uppercase; white-space:nowrap;
}

/* Een geüpload logo, als er bij Instellingen → Vormgeving een bestand
   staat. De hoogte is leidend en de breedte volgt, zodat een breed en
   een vierkant logo allebei in de balk passen. */
.logo--beeld{ display:flex; align-items:center; }
.logo__beeld{
  display:block; width:auto; height:46px; max-width:280px;
  object-fit:contain; object-position:left center;
}
.logo--voet .logo__beeld{ height:44px; max-width:300px; }

/* De lichte versie staat in de HTML vóór de gewone, zodat de donkere
   modus de gewone met + kan verbergen. */
.logo__beeld--licht{ display:none; }
[data-thema="donker"] .logo__beeld--licht{ display:block; }
[data-thema="donker"] .logo__beeld--licht + .logo__beeld{ display:none; }

.menuknop{
  display:none; background:none; border:0; padding:0; cursor:pointer;
  color:var(--donker); width:42px; height:42px; place-items:center;
  border-radius:10px;
}
.menuknop svg{ width:26px; height:26px; stroke-width:2.1; }
.menuknop[aria-expanded="true"]{ background:var(--vlak-zacht); color:var(--merk); }

/* De knoppen in het uitgeklapte menu — alleen op een klein scherm. */
.menuextra{ display:none; }
.menuextra__knoppen{ display:none; gap:10px; margin:2px 0 12px; }
.menuextra__knoppen .cms-knop{ width:100%; justify-content:center; padding:.95em 1.2em; }
.menuextra__regel{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 4px; background:none; border:0; border-top:1px solid var(--lijn);
  font-family:var(--font-kop); font-weight:700; font-size:15.5px;
  color:var(--donker); text-decoration:none; text-align:left; cursor:pointer;
}
.menuextra__regel svg{ width:20px; height:20px; color:var(--merk); flex:0 0 20px; }

/* menu */
.hoofdmenu{ flex:1 1 auto; min-width:0; }
.cms-nav{ list-style:none; display:flex; align-items:center; gap:6px; margin:0; padding:0; }
.cms-nav__item{ position:relative; }
.cms-nav__item > a{
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 14px; border-radius:8px; text-decoration:none;
  font-family:var(--font-kop); font-weight:700; font-size:15.5px;
  color:var(--donker); white-space:nowrap;
}
.cms-nav__item > a:hover{ color:var(--merk); }
.cms-nav__item.is-hier > a{ color:var(--merk); }
.cms-nav__item.heeft-submenu > a::after{
  content:''; width:8px; height:8px; margin-left:1px;
  border-right:2.2px solid currentColor; border-bottom:2.2px solid currentColor;
  border-radius:1px; transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease;
}
.cms-nav__item.heeft-submenu:hover > a::after{ transform:rotate(225deg) translate(-3px,-3px); }

.cms-nav__sub{
  list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 4px); left:0;
  min-width:230px; background:var(--vlak); border:1px solid var(--lijn);
  border-radius:12px; box-shadow:0 10px 34px rgba(24,28,38,.12); display:none; z-index:20;
}
.cms-nav__item:hover > .cms-nav__sub,
.cms-nav__item:focus-within > .cms-nav__sub{ display:block; }
.cms-nav__sub a{ display:block; padding:9px 12px; border-radius:7px; text-decoration:none; font-size:14.5px; }
.cms-nav__sub a:hover{ background:var(--papier); color:var(--merk); }

/* =====================================================================
   Het brede menupaneel
   =====================================================================
   Het paneel hangt aan het menu-onderdeel maar is breder dan dat, dus
   het wordt gecentreerd met transform in plaats van links uitgelijnd —
   anders loopt het bij Entertainment over de rechterrand. */
.mega{
  position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%);
  display:none; z-index:20;
  background:var(--vlak); border:1px solid var(--lijn);
  border-radius:14px; box-shadow:0 16px 44px rgba(24,28,38,.16);
  padding:18px 20px;
}
.cms-nav__item:hover > .mega,
.cms-nav__item:focus-within > .mega{ display:block; }

/* De onzichtbare brug tussen het menu-item en het paneel: zonder die
   ruimte valt het weg zodra je muis door het gat van 4 pixels gaat. */
.cms-nav__item.heeft-submenu::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:8px;
}

.mega__binnen{ display:flex; gap:26px; align-items:flex-start; }

.mega__lijst{ list-style:none; margin:0; padding:0; min-width:186px; }
.mega__lijst a{
  display:block; padding:8px 12px; border-radius:7px;
  text-decoration:none; font-size:14.5px; white-space:nowrap;
}
.mega__lijst a:hover{ background:var(--papier); color:var(--merk); }

.mega__uitgelicht{
  min-width:250px; padding-left:26px; border-left:1px solid var(--lijn);
}
.mega__kop{
  display:block; margin:0 0 10px 4px;
  font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--grijs);
}
.mega__uitgelicht ul{ list-style:none; margin:0 0 10px; padding:0; }
.mega__uitgelicht a{
  display:flex; align-items:center; gap:11px;
  padding:6px 8px; border-radius:9px; text-decoration:none; color:var(--tekst);
}
.mega__uitgelicht a:hover{ background:var(--papier); }
.mega__uitgelicht img,
.mega__geen{
  width:40px; height:40px; flex:0 0 40px; border-radius:9px;
  object-fit:cover; background:var(--beeldvlak);
}
.mega__geen{
  display:grid; place-items:center;
  font-family:var(--font-kop); font-size:17px; color:var(--beeldtekst);
}
.mega__uitgelicht strong{ display:block; font-size:14px; font-weight:600; }
.mega__uitgelicht em{ display:block; font-style:normal; font-size:12px; color:var(--grijs); }
.mega__alle{
  display:inline-block; margin-left:8px;
  font-size:13.5px; font-weight:600; color:var(--merk); text-decoration:none;
}
.mega__alle:hover{ text-decoration:underline; }

/* De uitklapknop is er alleen op een telefoon; op een breed scherm werkt
   hover en zou een tweede pijltje alleen verwarren. */
.subknop{ display:none; }

/* Op een smal scherm zit het menu in de hamburger; dan is het paneel een
   gewone lijst en heeft de derde kolom geen zin. */
@media (max-width:1100px){
  /* Het paneel wordt een gewone lijst, maar staat dicht tot je hem
     openklapt. Alles openzetten leverde een menu van veertig regels op
     waarin je je eigen categorie niet meer vond. */
  .mega{
    position:static; transform:none; display:none;
    border:0; border-radius:0; box-shadow:none; padding:0;
  }
  .mega__binnen{ display:block; }
  .mega__lijst{ min-width:0; }
  .mega__uitgelicht{ display:none; }
  .cms-nav__item.heeft-submenu::after{ display:none; }

  /* Hover mag hier niets doen: op een aanraakscherm blijft een "hover"
     na het tikken hangen, en dan klapt hij open zonder dat je erop
     drukte. */
  .cms-nav__item:hover > .mega,
  .cms-nav__item:focus-within > .mega,
  .cms-nav__item:hover > .cms-nav__sub,
  .cms-nav__item:focus-within > .cms-nav__sub{ display:none; }

  .cms-nav__item.is-open > .mega,
  .cms-nav__item.is-open > .cms-nav__sub{ display:block; }

  /* De regel met de naam en het knopje ernaast. */
  .cms-nav__item.heeft-submenu{
    display:flex; flex-wrap:wrap; align-items:center;
  }
  .cms-nav__item.heeft-submenu > a{ flex:1 1 auto; }
  .cms-nav__item.heeft-submenu > .mega,
  .cms-nav__item.heeft-submenu > .cms-nav__sub{ flex:1 1 100%; }

  /* Het pijltje van het menu-item zelf gaat uit; het knopje neemt het
     over, en dat is een echt aanraakvlak van 44 pixels. */
  .cms-nav__item.heeft-submenu > a::after{ display:none; }

  .subknop{
    display:grid; place-items:center;
    width:44px; height:44px; flex:0 0 44px;
    border:0; background:transparent; cursor:pointer;
    color:var(--grijs);
  }
  .subknop::before{
    content:''; width:9px; height:9px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .18s ease;
  }
  .cms-nav__item.is-open > .subknop{ color:var(--merk); }
  .cms-nav__item.is-open > .subknop::before{
    transform:rotate(225deg) translate(-2px,-2px);
  }
}

/* rechterkant */
.balk__rechts{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }

.telefoon{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:700; font-size:15.5px; color:var(--donker); white-space:nowrap;
}
.telefoon svg{ width:19px; height:19px; color:#aeb4bf; stroke-width:1.9; }
.telefoon:hover{ color:var(--merk); }
.telefoon:hover svg{ color:var(--merk); }

.balk__knoppen{ display:flex; align-items:stretch; gap:12px; }
.balk__knoppen .cms-knop{
  white-space:nowrap; height:52px; padding:0 22px;
  font-size:15.5px; font-weight:700; border-radius:8px;
}
.balk__knoppen .cms-knop svg{ width:18px; height:18px; }

.wishlist{
  position:relative;
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:10px; color:var(--donker);
}
.wishlist svg{ width:22px; height:22px; stroke-width:1.9; }
.wishlist:hover{ background:var(--papier); color:var(--merk); }
.wishlist--gevuld{ color:var(--merk); }
.wishlist--gevuld svg{ fill:var(--merk); }
.wishlist__aantal{
  position:absolute; top:2px; right:0;
  min-width:18px; height:18px; padding:0 4px; box-sizing:border-box;
  display:grid; place-items:center;
  border-radius:20px; border:2px solid var(--achtergrond,#fff);
  background:var(--merk); color:#fff;
  font-family:var(--font-tekst); font-size:10.5px; font-weight:700; line-height:1;
}

/* ---------------- indeling ---------------- */
/* De `1fr`-kolom groeit standaard mee met zijn inhoud: een gridkolom
   heeft `min-width:auto`. Staat er iets breeds in — een carrousel die
   horizontaal scrolt — dan duwt dat de hele pagina uit elkaar en kun je
   de site zijwaarts slepen. Met `minmax(0,1fr)` blijft de kolom binnen
   het raam en scrolt de carrousel zelf. */
.raam{
  display:grid; grid-template-columns:266px minmax(0, 1fr); gap:28px;
  padding-top:26px; padding-bottom:56px; align-items:start;
}

/* ---------------- filters ---------------- */
/* De zijbalk blijft meelopen, maar is vaak langer dan het scherm. Zonder
   een eigen schuifbalk kun je de onderste filters en de wisknop alleen
   bereiken door de hele pagina naar beneden te scrollen. */
.zijkant{
  position:sticky; top:104px; display:flex; flex-direction:column; gap:18px;
  max-height:calc(100vh - 124px); overflow-y:auto; overscroll-behavior:contain;
  padding-right:6px; margin-right:-6px;
  scrollbar-width:thin; scrollbar-color:#d7dbe2 transparent;
}
/* Niet laten krimpen: anders persen de kaarten zich in de beschikbare
   hoogte in plaats van te schuiven, en valt de onderkant alsnog weg. */
.zijkant > *{ flex:0 0 auto; }
.zijkant::-webkit-scrollbar{ width:8px; }
.zijkant::-webkit-scrollbar-thumb{ background:#d7dbe2; border-radius:8px; }
.zijkant::-webkit-scrollbar-track{ background:transparent; }

.filters{ background:var(--vlak); border:1px solid var(--lijn); border-radius:12px; overflow:hidden; }
.filters__kop{
  display:flex; align-items:center; gap:10px;
  background:var(--diep); color:#fff; padding:16px 20px;
  font-family:var(--font-kop); font-weight:700; font-size:15px;
  letter-spacing:.08em; text-transform:uppercase;
}
.filters__kop svg{ width:18px; height:18px; color:var(--merk); }

.filterblok{ border-bottom:1px solid var(--lijn); }
.filterblok:last-of-type{ border-bottom:0; }
.filterblok > summary{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:14px 20px; font-weight:500; font-size:14.5px; list-style:none;
}
.filterblok > summary::-webkit-details-marker{ display:none; }
.filterblok > summary:hover{ color:var(--merk); }
.filterblok > summary > svg:first-child{ width:17px; height:17px; color:var(--merk); flex:0 0 17px; }
.filterblok > summary > span{ flex:1; }
.filterblok__pijl{ width:16px; height:16px; color:var(--grijs); transition:transform .2s ease; }
.filterblok[open] .filterblok__pijl{ transform:rotate(180deg); }
.filterblok__lijf{ padding:0 20px 16px; }
.filterblok__hint{ font-size:12px; color:var(--grijs); margin:8px 0 0; }

.keuzelijst{ list-style:none; margin:0; padding:0; max-height:250px; overflow-y:auto; }
.keuzelijst label{
  display:flex; align-items:center; gap:9px; padding:6px 0;
  font-size:14px; cursor:pointer;
}
.keuzelijst input{ accent-color:var(--merk); width:16px; height:16px; flex:0 0 16px; }
.keuzelijst span{ flex:1; }
.keuzelijst em{ font-style:normal; font-size:12px; color:var(--grijs); }
.keuzelijst label:hover span{ color:var(--merk); }

/* Een keuze die met de huidige filters niets meer oplevert. Hij blijft
   staan en blijft aan te klikken — anders springt de lijst alle kanten
   op terwijl je nog aan het kiezen bent. */
.keuzelijst li.is-leeg label{ opacity:.45; }

/* Terwijl de nieuwe lijst wordt opgehaald. Kort en rustig; de zijbalk
   zelf blijft gewoon bruikbaar, dus daar verandert niets aan. */
/* Zelfde reden: zonder min-width:0 weigert een flex- of gridkind smaller
   te worden dan zijn inhoud. */
.werkvlak{ transition:opacity .15s ease; min-width:0; }
.werkvlak.is-laden{ opacity:.45; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .werkvlak{ transition:none; } }

.filters__pas, .filters__voet{ padding:14px 20px; border-top:1px solid var(--lijn); }
.filters__voet .cms-knop{ width:100%; justify-content:center; }

.hulpkaart{
  position:relative; overflow:hidden;
  background:var(--diep); color:#fff; border-radius:12px; padding:24px 22px 26px;
}
.hulpkaart__kop{
  font-family:var(--font-kop); font-weight:700; font-size:19px; line-height:1.25;
  margin:0 0 8px; text-transform:uppercase;
}
.hulpkaart__kop span{ color:var(--merk); }
.hulpkaart__tekst{ font-size:13.5px; color:#c8cdd6; margin:0 0 18px; }
.hulpkaart__beeld{
  position:absolute; right:-14px; bottom:-14px;
  width:96px; height:96px; color:rgba(255,255,255,.09);
}

/* ---------------- werkbalk ---------------- */
.paginakop{ font-family:var(--font-kop); font-size:30px; margin:0 0 6px; }
.paginasub{ color:var(--grijs); margin:0 0 12px; }
.telling{ font-size:14px; color:var(--grijs); margin:0 0 16px; }
.telling strong{ color:var(--donker); }

.werkbalk{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:22px; }

.zoekvak{
  flex:1 1 340px; display:flex; align-items:center;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:10px; padding:0 6px 0 18px;
}
.zoekvak input{ flex:1; border:0; outline:0; padding:15px 0; font:inherit; font-size:14.5px; background:none; }
.zoekvak button{
  border:0; background:none; cursor:pointer; padding:10px; color:var(--donker);
  display:grid; place-items:center;
}
.zoekvak button:hover{ color:var(--merk); }
.zoekvak:focus-within{ border-color:var(--merk); box-shadow:0 0 0 3px rgba(240,78,35,.14); }

.sorteervak{
  display:flex; align-items:center; gap:8px;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:10px; padding:0 14px;
  font-size:14.5px; color:var(--grijs);
}
.sorteervak select{
  border:0; outline:0; background:none; font:inherit; font-weight:600;
  color:var(--donker); padding:15px 4px; cursor:pointer;
}

.weergavekiezer{ display:flex; background:var(--vlak); border:1px solid var(--lijn); border-radius:10px; overflow:hidden; }
.weergavekiezer a{
  display:grid; place-items:center; width:52px; height:52px;
  text-decoration:none; color:var(--grijs);
  border-right:1px solid var(--lijn);
}
.weergavekiezer a:last-child{ border-right:0; }
.weergavekiezer a:hover{ color:var(--donker); }
.weergavekiezer a.is-aan{ color:var(--merk); background:rgba(240,78,35,.06); box-shadow:inset 0 0 0 1px var(--merk); }
.weergavekiezer svg{ width:19px; height:19px; }

/* ---------------- raster ---------------- */
.raster{ display:grid; gap:20px; }
.raster--rijen{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.raster--lijst{ grid-template-columns:1fr; gap:14px; }

.kaart{
  position:relative; background:var(--vlak); border:1px solid var(--lijn);
  border-radius:var(--radius-kaart,10px); overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease;
}
.kaart:hover{ box-shadow:var(--schaduw); transform:translateY(-2px); }

.kaart__beeld{
  position:relative; display:block; flex:0 0 auto; overflow:hidden;
  aspect-ratio:var(--kaart-verhouding,4/3); background:var(--beeldvlak);
}
.kaart__beeld img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1;
}

/* Vakje voor als er geen foto is. Staat er altijd onder; zodra er wel
   een foto is, dekt die het af. Zo blijft de kaart precies even hoog. */
.geenbeeld{
  position:absolute; inset:0; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:
    radial-gradient(circle at 30% 20%, rgba(240,78,35,.10), transparent 55%),
    linear-gradient(160deg, var(--beeldvlak) 0%, var(--beeldvlak-diep) 100%);
  color:var(--beeldtekst); text-align:center; padding:14px;
}
.geenbeeld__letters{
  font-family:var(--font-kop); font-weight:700; font-size:clamp(28px,14%,46px);
  line-height:1; letter-spacing:-.02em; color:var(--beeldtekst); opacity:.72;
}
.geenbeeld__naam{
  font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--beeldtekst); max-width:90%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kaart__beeld--leeg::after,
.kaart__beeld.is-leeg::after{
  content:''; position:absolute; inset:0; z-index:2;
  box-shadow:inset 0 0 0 1px rgba(34,38,49,.06);
  pointer-events:none;
}
.kaart__labels{ position:absolute; top:12px; left:12px; z-index:3; display:flex; gap:5px; flex-wrap:wrap; }

.kaart__hart{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--hart-vlak); color:var(--donker);
  display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.kaart__hart:hover{ color:var(--merk); }
.kaart__hart.is-aan{ background:var(--merk); color:#fff; }
.kaart__hart svg{ width:17px; height:17px; }

.kaart__lijf{ padding:14px 16px 10px; flex:1; }
.kaart__naam{ font-family:var(--font-kop); font-size:17px; margin:0 0 2px; line-height:1.25; }
.kaart__naam a{ text-decoration:none; }
.kaart__naam a:hover{ color:var(--merk); }
.kaart__onder{ color:var(--merk); font-size:13px; font-weight:600; margin:0 0 10px; }
.kaart__feiten{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; }
.kaart__feiten li{ display:flex; align-items:center; gap:6px; font-size:13.5px; color:#4b5261; }
.kaart__feiten svg{ width:15px; height:15px; color:var(--grijs); flex:0 0 15px; }
.kaart__tekst{ font-size:14px; color:var(--grijs); margin:12px 0 0; }

.kaart__voet{ padding:12px 16px; border-top:1px solid var(--lijn); display:flex; justify-content:flex-end; }

/* weergave: lijst */
.raster--lijst .kaart{ flex-direction:row; align-items:stretch; }
.raster--lijst .kaart__beeld{ width:210px; flex:0 0 210px; aspect-ratio:auto; align-self:stretch; }
.raster--lijst .kaart__lijf{ padding:16px 20px; }
.raster--lijst .kaart__voet{
  border-top:0; border-left:1px solid var(--lijn);
  align-items:center; flex:0 0 auto; padding:16px 20px;
}
.raster--lijst .kaart__hart{ top:12px; right:auto; left:170px; }

/* ---------------- weergave: regels (prijslijst) ---------------- */
.prijslijst{
  background:var(--vlak); border:1px solid var(--lijn);
  border-radius:var(--radius-kaart,10px); overflow:hidden;
}
.prijslijst__tabel{ width:100%; border-collapse:collapse; font-size:14px; }

.prijslijst__tabel thead th{
  text-align:left; padding:14px 16px;
  background:var(--diep); color:#fff;
  font-family:var(--font-kop); font-weight:600;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap;
}
.prijslijst__tabel td,
.prijslijst__tabel tbody th{
  padding:11px 16px; vertical-align:top; text-align:left;
  border-top:1px solid #f0f2f5;
}
.prijslijst__tabel tr.prijslijst__start > *{ border-top:1px solid var(--lijn); }
.prijslijst__tabel tbody tr:first-child > *{ border-top:0; }
.prijslijst__tabel tbody tr:hover > td{ background:var(--vlak-zacht); }

/* artiestkolom */
.prijslijst .kol-artiest{
  font-weight:400; vertical-align:top; min-width:190px;
  background:var(--vlak-zacht); border-right:1px solid var(--lijn);
}
.prijslijst .kol-artiest a{
  font-family:var(--font-kop); font-weight:700; font-size:15.5px;
  color:var(--donker); text-decoration:none;
}
.prijslijst .kol-artiest a:hover{ color:var(--merk); }
.prijslijst__genre{
  display:block; margin-top:2px;
  font-size:11.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--merk);
}
.prijslijst__labels{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }

/* overige kolommen */
.prijslijst .kol-vorm strong{ display:block; font-weight:700; color:var(--donker); }
.prijslijst__vorm{ display:block; color:#4b5261; }
.prijslijst__personen{ display:block; font-size:12px; color:var(--grijs); }
.prijslijst .kol-uitvoering{ color:#4b5261; white-space:nowrap; }
.prijslijst .kol-techniek{ color:#4b5261; max-width:260px; }
.prijslijst__extra{
  display:block; font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--grijs);
}
.prijslijst .kol-duur{ color:#4b5261; white-space:nowrap; }
.prijslijst__leeg{ color:var(--grijs); font-style:italic; }

.prijslijst .kol-tarief{
  text-align:right; white-space:nowrap; width:1%;
  font-variant-numeric:tabular-nums; font-weight:700; color:var(--donker);
}
.prijslijst__vanaf{ font-weight:400; font-size:12px; color:var(--grijs); }
.prijslijst__aanvraag{ font-weight:400; font-style:italic; color:var(--grijs); }

.prijslijst .kol-knop{ width:1%; white-space:nowrap; vertical-align:top; text-align:right; }
.prijslijst .kol-knop .cms-knop{ font-size:.82rem; padding:.55em 1em; }

@media (max-width:1100px){
  .prijslijst .kol-techniek, .prijslijst thead th:nth-child(4){ display:none; }
}

@media (max-width:820px){
  /* De tabel wordt een reeks blokjes, zodat er niets afvalt. */
  .prijslijst__tabel, .prijslijst__tabel tbody, .prijslijst__tabel tr,
  .prijslijst__tabel td, .prijslijst__tabel th{ display:block; width:auto; }
  .prijslijst__tabel thead{ display:none; }
  .prijslijst__tabel tr{ padding:0; }
  .prijslijst__tabel tr.prijslijst__start > *{ border-top:0; }
  .prijslijst .kol-artiest{
    border-right:0; border-top:1px solid var(--lijn) !important;
    padding-bottom:4px;
  }
  .prijslijst__tabel tbody tr:first-child .kol-artiest{ border-top:0 !important; }
  .prijslijst__tabel td{ border-top:0; padding:3px 16px; }
  .prijslijst .kol-vorm{ padding-top:8px; }
  .prijslijst .kol-uitvoering::before{ content:'Uitvoering: '; color:var(--grijs); }
  .prijslijst .kol-duur::before{ content:'Speelduur: '; color:var(--grijs); }
  .prijslijst .kol-techniek{ display:block; max-width:none; }
  .prijslijst .kol-techniek::before{ content:'Techniek: '; color:var(--grijs); }
  .prijslijst .kol-tarief{ text-align:left; font-size:16px; padding-top:6px; }
  .prijslijst .kol-knop{ text-align:left; padding-bottom:14px; }
}

/* ---------------- meer laden ---------------- */
.meer{ display:flex; justify-content:center; margin:34px 0 0; }
.meer__einde{ color:var(--grijs); font-size:14px; }
.meerknop{
  background:var(--vlak); color:var(--donker); border:1px solid var(--lijn);
  border-radius:8px; text-transform:uppercase; letter-spacing:.06em;
  font-size:13.5px; padding:15px 34px;
}
.meerknop:hover{ border-color:var(--merk); color:var(--merk); }
.meerknop svg{ color:var(--merk); }
.meerknop.is-bezig{ opacity:.55; pointer-events:none; }

.niets{ text-align:center; padding:70px 20px; color:var(--grijs); }
.niets svg{ width:40px; height:40px; color:#c2c7d0; margin-bottom:12px; }
.niets h2{ font-family:var(--font-kop); font-size:19px; color:var(--donker); margin:0 0 6px; }
.niets p{ margin:0 0 20px; }

.paginatekst{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
  padding:28px 32px; margin-top:34px; max-width:900px;
}
.paginatekst h2{ font-family:var(--font-kop); font-size:21px; margin:0 0 12px; }
.paginatekst h3{ font-family:var(--font-kop); font-size:18px; margin:24px 0 10px; }
.paginatekst p{ margin:0 0 14px; }
.paginatekst p:last-child{ margin-bottom:0; }

/* ---------------- usp-balk ---------------- */
.usp{ background:var(--diep); color:#fff; }
.usp__binnen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px; padding-top:34px; padding-bottom:34px;
}
.usp__blok{ display:flex; align-items:center; gap:16px; }
.usp__ring{
  width:52px; height:52px; flex:0 0 52px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.28); display:grid; place-items:center;
}
.usp__ring svg{ width:24px; height:24px; }
.usp__kop{ font-family:var(--font-kop); font-size:14px; margin:0 0 3px; text-transform:uppercase; letter-spacing:.05em; }
.usp__tekst{ margin:0; font-size:13.5px; color:#c1c7d1; line-height:1.45; }

/* Op een telefoon staan de vier onder elkaar. Zonder eigen regels blijft
   de tussenruimte van 26px staan, wat op een smal scherm veel te ruim is,
   en botsen de teksten tegen de rand. */
@media (max-width:900px){
  .usp__binnen{
    grid-template-columns:1fr; gap:0;
    padding-top:8px; padding-bottom:8px;
  }
  .usp__blok{
    gap:14px; padding:16px 0;
    border-top:1px solid rgba(255,255,255,.10);
  }
  .usp__blok:first-child{ border-top:0; }
  .usp__ring{ width:44px; height:44px; flex:0 0 44px; }
  .usp__ring svg{ width:20px; height:20px; }
  .usp__kop{ font-size:13px; }
  .usp__tekst{ font-size:13px; }
}

/* ---------------- footer ---------------- */
.voet{
  position:relative; overflow:hidden;
  background:#1b1f29; color:#9aa1ae;
}
.voet::before{
  content:''; position:absolute; top:-70px; left:-90px;
  width:280px; height:210px; background:var(--merk);
  border-radius:0 0 60% 0; opacity:.9; pointer-events:none;
}
.voet::after{
  content:''; position:absolute; right:-110px; bottom:-120px;
  width:300px; height:300px; border-radius:50%;
  background:var(--merk); opacity:.9; pointer-events:none;
}
.voet > *{ position:relative; z-index:1; }

/* contactblok */
.voet__kaartrand{ padding-top:36px; }
.contactkaart{
  background:var(--vlak); border-radius:16px; padding:24px 30px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.contactkaart__ring{
  width:92px; height:92px; flex:0 0 92px; border-radius:50%;
  background:rgba(240,78,35,.12); color:var(--merk);
  display:grid; place-items:center;
}
.contactkaart__ring svg{ width:40px; height:40px; stroke-width:1.6; }
.contactkaart__tekst{ flex:1 1 260px; }
.contactkaart__kop{
  font-family:var(--font-kop); font-weight:700; font-size:25px;
  color:var(--donker); margin:0 0 6px; line-height:1.2;
}
.contactkaart__sub{ margin:0; font-size:17px; color:var(--lees); }

.contactkaart__bellen{ flex:0 0 auto; }
.contactkaart__nummer{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  font-family:var(--font-kop); font-weight:700; font-size:26px; color:var(--donker);
  white-space:nowrap;
}
.contactkaart__nummer svg{ width:26px; height:26px; color:var(--merk); stroke-width:2; }
.contactkaart__nummer:hover{ color:var(--merk); }
.contactkaart__uren{ margin:4px 0 0 38px; font-size:14px; color:#6b7280; white-space:nowrap; }

.contactkaart__knop{ flex:0 0 auto; }
.contactkaart__knop .cms-knop{ font-size:1.05rem; padding:1.1em 2em; border-radius:10px; }

/* kolommen */
.voet__kolommen{
  display:grid; gap:40px;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  padding-top:58px; padding-bottom:52px;
}
.voet__kop{
  font-family:var(--font-kop); font-weight:700; font-size:13.5px;
  color:var(--merk); text-transform:uppercase; letter-spacing:.09em;
  margin:0 0 20px;
}
.voet__kop--socials{ margin-top:32px; }

.logo--voet .logo__cijfer,
.logo--voet .logo__woord{ font-size:29px; }
.logo--voet .logo__woord{ color:#fff; }
.logo--voet{ display:inline-block; margin-bottom:22px; }

.voet__intro{ margin:0 0 26px; font-size:15px; line-height:1.85; color:#9aa1ae; max-width:420px; }

.voetusp{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.voetusp li{ display:flex; align-items:center; gap:14px; }
.voetusp__ring{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  border:1.5px solid rgba(240,78,35,.55); color:var(--merk);
  display:grid; place-items:center;
}
.voetusp__ring svg{ width:20px; height:20px; }
.voetusp__tekst{ color:#e6e8ec; font-size:15px; }

.voetlijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.voetlijst a{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:#c7cbd3; font-size:15px;
}
.voetlijst svg{ width:15px; height:15px; color:var(--merk); flex:0 0 15px; transition:transform .16s ease; }
.voetlijst a:hover{ color:#fff; }
.voetlijst a:hover svg{ transform:translateX(2px); }

.voetcontact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px; }
.voetcontact li{ display:flex; gap:13px; font-size:15px; line-height:1.5; }
.voetcontact svg{ width:19px; height:19px; color:#8d94a1; flex:0 0 19px; margin-top:2px; stroke-width:1.8; }
.voetcontact strong{ color:#fff; font-weight:600; }
.voetcontact span{ color:#c7cbd3; }
.voetcontact a{ color:#c7cbd3; text-decoration:none; }
.voetcontact a:hover{ color:var(--merk); }

.voetsocials{ list-style:none; margin:0; padding:0; display:flex; gap:11px; flex-wrap:wrap; }
.voetsocials a{
  width:46px; height:46px; border-radius:50%;
  background:#2a2f3b; color:#d5d9e0;
  display:grid; place-items:center; text-decoration:none;
  transition:background-color .16s ease, color .16s ease;
}
.voetsocials a:hover{ background:var(--merk); color:#fff; }
.voetsocials svg{ width:20px; height:20px; }

/* onderbalk */
.voet__onder{ border-top:1px solid rgba(255,255,255,.08); }
.voet__onderbinnen{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:22px;
}
.voetssl{ display:flex; align-items:center; gap:13px; flex:1 1 260px; }
.voetssl > svg{ width:32px; height:32px; color:#8d94a1; stroke-width:1.5; flex:0 0 32px; }
.voetssl__kop{ display:block; color:#e6e8ec; font-size:14.5px; font-weight:600; }
.voetssl__tekst{ display:block; color:#7d8492; font-size:13.5px; }
.voet__rechten{ margin:0; font-size:14px; color:#8d94a1; text-align:center; flex:0 1 auto; }
.voet__vulling{ flex:1 1 260px; }

/* ---------------- kleiner scherm ---------------- */
@media (max-width:1100px){
  .raam{ grid-template-columns:1fr; }
  /* Boven de lijst in plaats van ernaast; dan is een eigen schuifbalk
     in de zijbalk juist lastig. */
  .zijkant{
    position:static; max-height:none; overflow:visible;
    padding-right:0; margin-right:0;
  }
  .keuzelijst{ max-height:none; }
}

/* Tussen dit punt en de volle breedte past alles nog wel op één regel,
   maar niet meer ruim. Het telefoonnummer wordt een icoontje en de rest
   schuift wat dichter op elkaar. */
/* Twee stappen in plaats van één.

   Sinds de meting van 30 juli is er een menu-item bijgekomen (Updates)
   en een knop rechts (zoeken). Samen zo'n 160 pixels, en daarmee liep de
   balk tussen 1100 en 1400 weer over de rand. Bij één breekpunt gebeurt
   dat elke keer als er iets bij komt; met twee stappen is er ruimte om
   te schuiven.

   De maten kloppen op deze indeling: logo ± 200, menu ± 630, telefoon,
   de offerteknop ± 180 en vier icoonknoppen. Zet je er nóg een menu-item
   bij, meet het dan opnieuw. */
@media (max-width:1500px){
  .balk__binnen{ gap:18px; }
  .telefoon span{ display:none; }
  .cms-nav__item > a{ padding:11px 9px; font-size:15px; }
  .balk__rechts{ gap:10px; }
  .balk__knoppen .cms-knop{ height:46px; padding:0 18px; font-size:14.5px; }
}

@media (max-width:1480px){
  .balk__binnen{ gap:12px; }
  .cms-nav{ gap:2px; }
  .cms-nav__item > a{ padding:10px 6px; font-size:14.5px; gap:4px; }
  .balk__rechts{ gap:4px; }
  .balk__knoppen .cms-knop{ height:42px; padding:0 13px; font-size:14px; }
  .zoekknop,
  .wishlist,
  .accountknop,
  .themaknop{ width:36px; height:36px; }
  .logo__cijfer,
  .logo__woord{ font-size:26px; }
}

/* De laatste stap vóór de hamburger. Hier vervalt de tekst op de
   offerteknop; het pijltje blijft, en de knop houdt zijn kleur en zijn
   plek. Dat scheelt zo'n 150 pixels — genoeg om het menu heel te houden
   tot 1100, waar hij toch inklapt.

   Het alternatief was een menu-item verbergen, en dat is erger: dan
   verdwijnt een hele pagina uit het zicht zonder dat iemand het merkt. */
@media (max-width:1300px){
  .balk__knoppen .cms-knop{ padding:0 12px; width:42px; }
  .balk__knoppen .cms-knop span{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .balk__knoppen .cms-knop{ position:relative; justify-content:center; }
  .cms-nav__item > a{ padding:10px 5px; font-size:14px; }
}

/* Vanaf hier past de hele balk niet meer op één regel: logo, menu,
   telefoonnummer, de knop, het hartje, het poppetje en de zon. Dan gaat
   hij over op streepjes + logo + twee iconen, en verhuist de rest naar
   het menu. Hetzelfde punt waarop de filters een scherm worden, zodat er
   maar één moment is waarop de pagina van vorm verandert. */
@media (max-width:1100px){
  /* Streepjes links, logo in het midden, iconen rechts. Eén regel, verder
     niets — de rest zit in het menu. */
  .balk__binnen{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    gap:10px; min-height:0; padding-top:11px; padding-bottom:11px;
  }
  .menuknop{ display:grid; justify-self:start; }
  .logo{ justify-self:center; }
  .logo__cijfer, .logo__woord{ font-size:25px; }
  .logo__regel{ display:none; }

  .hoofdmenu{
    grid-column:1 / -1; grid-row:2; display:none;
    max-height:calc(100vh - 130px); overflow-y:auto; overscroll-behavior:contain;
    margin-top:6px; padding:6px 0 12px; border-top:1px solid var(--lijn);
  }
  .hoofdmenu.open{ display:block; }
  .cms-nav{ flex-direction:column; align-items:stretch; gap:0; }
  .cms-nav__item > a{ padding:12px 4px; }
  .cms-nav__item.heeft-submenu > a::after{ margin-left:auto; }
  .cms-nav__sub{ position:static; display:block; border:0; box-shadow:none; padding:0 0 8px 16px; }
  .menuextra{ display:block; }
  .menuextra__knoppen{ display:grid; }

  /* In de balk zelf blijven alleen het telefoontje en het hartje staan.
     Vast op de eerste regel, anders zakken ze onder het menu zodra dat
     opengaat. */
  .balk__rechts{ grid-column:3; grid-row:1; justify-self:end; gap:2px; }
  .balk__knoppen,
  .balk__rechts .accountknopje{ display:none; }
  /* De themaknop bleef eerder alleen onderin het uitklapmenu staan, en
     daar zoekt niemand hem. Hij staat nu weer gewoon in de balk; alleen
     op de allersmalste telefoons gaat hij eruit, want dan past de rij
     iconen niet meer naast het logo. */
  .balk__rechts .themaknop{ display:grid; width:42px; height:42px; }
  .balk__rechts .themaknop__uitleg{ display:none; }
  .telefoon{
    display:grid; place-items:center; width:42px; height:42px; border-radius:10px;
  }
  .telefoon svg{ width:21px; height:21px; }
  .wishlist{ width:42px; height:42px; }
}

@media (max-width:900px){
  .raster--lijst .kaart{ flex-direction:column; }
  .raster--lijst .kaart__beeld{ width:100%; flex:none; aspect-ratio:16/9; }
  .raster--lijst .kaart__voet{ border-left:0; border-top:1px solid var(--lijn); justify-content:flex-end; }
  .raster--lijst .kaart__hart{ left:auto; right:10px; }
}

@media (max-width:1150px){
  .voet__kolommen{ grid-template-columns:1fr 1fr; gap:34px; }
  .voet__kolom--merk{ grid-column:1 / -1; }
}

@media (max-width:760px){
  .contactkaart{ padding:22px; gap:18px; }
  .contactkaart__ring{ width:64px; height:64px; flex:0 0 64px; }
  .contactkaart__ring svg{ width:28px; height:28px; }
  .contactkaart__kop{ font-size:20px; }
  .contactkaart__sub{ font-size:15px; }
  .contactkaart__nummer{ font-size:21px; }
  .contactkaart__knop{ flex:1 1 100%; }
  .contactkaart__knop .cms-knop{ width:100%; justify-content:center; }

  /* De kaart steekt in de voet. Op een telefoon is die overlap te krap:
     het logo eronder plakt er dan tegenaan. */
  .voet__kaartrand{ padding-top:28px; }
  .contactkaart{ margin-bottom:8px; }

  .voet__kolommen{
    grid-template-columns:1fr; gap:0;
    padding-top:40px; padding-bottom:36px;
  }

  /* Eén kolom onder elkaar met een streepje ertussen; anders lopen vier
     lijstjes in elkaar over. */
  .voet__kolom{ padding:22px 0; border-top:1px solid rgba(255,255,255,.10); }
  .voet__kolom:first-child{ border-top:0; padding-top:0; }
  .voet__kop{ margin-bottom:12px; }
  .voet__kop--socials{ margin-top:24px; }
  .voet__intro{ margin-bottom:20px; }
  .voetusp{ gap:12px; }

  .voet__onderbinnen{ justify-content:center; text-align:center; }
  .voet__vulling{ display:none; }
  .voet::before, .voet::after{ display:none; }
}

@media (max-width:560px){
  .omhulsel{ padding:0 16px; }
  .paginakop{ font-size:24px; }
  .werkbalk > *{ flex:1 1 100%; }
  .raster--rijen{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
}

/* Op een smalle telefoon moeten de streepjes, het logo en twee iconen
   samen op één regel passen. Het logo krijgt dan wat minder ruimte. */
@media (max-width:420px){
  .logo__cijfer, .logo__woord{ font-size:21px; }
  .logo__beeld{ height:34px; max-width:165px; }
  .menuknop, .telefoon, .wishlist{ width:38px; height:38px; }
  .balk__binnen{ gap:6px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* toon-alles-knop naast laad meer */
.meer{ gap:12px; flex-wrap:wrap; }
.allesknop{
  background:transparent; color:var(--donker); border:1px solid var(--lijn);
  border-radius:8px; text-transform:uppercase; letter-spacing:.06em;
  font-size:13.5px; padding:15px 28px;
}
.allesknop:hover{ border-color:var(--merk); color:var(--merk); }
.allesknop svg{ color:var(--merk); }

.prijslijst__meer{
  display:block; margin-top:6px;
  font-size:11.5px; color:var(--grijs); font-style:italic;
}

/* =====================================================================
   Profielpagina van een artiest
   ===================================================================== */

/* De hele bovenkant staat op een zachte tint van de huisstijlkleur.
   Die tint komt uit stijl.php, dus verander je het oranje in het CMS,
   dan verandert dit vanzelf mee. */
/* Let op: hier staat bewust geen overflow. Een voorouder met
   overflow:hidden zet position:sticky buitenspel, en de boekingskaart
   moet juist blijven staan. De sierlijnen worden daarom afgesneden in
   een eigen laag, waar de kaart niet in zit. */
.profielpagina{
  background:var(--merk-vleug,#fef9f7);
  position:relative;
}
.profielpagina__sier{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.profielpagina__sier::before,
.profielpagina__sier::after{
  content:''; position:absolute; border-radius:50%;
  border:1px solid var(--merk-lijn,#fcd8cf);
}
.profielpagina__sier::before{ width:560px; height:560px; top:-300px; right:-160px; }
.profielpagina__sier::after{ width:420px; height:420px; top:180px; left:-160px; }
.profielpagina > .omhulsel{ position:relative; z-index:1; }

.kruimels{ padding:20px 0 4px; }
.kruimels ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:13px; }
.kruimels li{ display:flex; align-items:center; gap:6px; color:var(--grijs); }
.kruimels li + li::before{
  content:''; width:6px; height:6px; flex:0 0 6px;
  border-right:1.6px solid #c3c8d1; border-bottom:1.6px solid #c3c8d1;
  transform:rotate(-45deg);
}
.kruimels a{ color:var(--grijs); text-decoration:none; }
.kruimels a:hover{ color:var(--merk); }
.kruimels li[aria-current]{ color:var(--merk); font-weight:600; }

/* ---------------- hero ---------------- */
/* Twee kolommen over de hele pagina. De boekingskaart zit in de
   rechterkolom en blijft daardoor meescrollen langs de biografie,
   de prijzen en de rest. */
.profiel{
  display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:40px; align-items:start; padding-bottom:60px;
}
.profiel__links{ min-width:0; }

.hero{
  display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:40px; align-items:start; padding:14px 0 46px;
}

.hero__beeld{
  position:relative; aspect-ratio:3 / 4; border-radius:14px;
  background:var(--beeldvlak); box-shadow:0 14px 40px rgba(24,28,38,.13);
}
.hero__beeld img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  border-radius:14px; z-index:1;
}
.hero__beeld .geenbeeld{ display:none; border-radius:14px; }
.hero__beeld--leeg .geenbeeld,
.hero__beeld.is-leeg .geenbeeld{ display:flex; }
.hero__beeld .geenbeeld__letters{ font-size:clamp(34px,13%,58px); }

/* Het oranje blokje dat over de onderrand van de foto valt. */
/* Was een decoratief vlakje; nu de bewaarknop. Zelfde plek en kleur, maar
   met een hart erin — dan doet die opvallende vorm ook iets. */
.hero__hart{
  position:absolute; left:18px; bottom:-16px; z-index:2;
  width:96px; height:46px; border:0; border-radius:9px; cursor:pointer;
  display:grid; place-items:center;
  background:var(--merk); color:#fff;
  box-shadow:0 6px 18px rgba(240,78,35,.34);
  transition:transform .16s ease, box-shadow .16s ease;
}
.hero__hart svg{ width:22px; height:22px; }
.hero__hart:hover{ transform:translateY(-2px); box-shadow:0 9px 22px rgba(240,78,35,.4); }

/* Bewaard: omgekeerd, met een gevuld hart. Zo zie je in één blik of hij
   er al in staat — anders klik je hem per ongeluk weer weg. */
.hero__hart.is-aan{ background:var(--vlak); color:var(--merk); }
.hero__hart.is-aan svg{ fill:currentColor; }

.hero__soort{
  margin:6px 0 8px; font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--merk);
}
.hero__naam{
  font-size:clamp(38px,5.4vw,60px); line-height:1.02;
  letter-spacing:-.02em; margin:0 0 10px; color:var(--donker);
}
.hero__slogan{
  font-family:var(--font-accent,cursive); font-weight:600;
  font-size:clamp(24px,2.6vw,30px); line-height:1.2;
  color:var(--merk); margin:0 0 18px;
}
.hero__labels{ margin:0 0 16px; display:flex; gap:6px; flex-wrap:wrap; }
.hero__intro{
  font-size:16px; line-height:1.7; color:#4b5261;
  margin:0 0 28px; max-width:52ch;
}

.hero__knoppen{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__knoppen .cms-knop{
  text-transform:uppercase; letter-spacing:.07em;
  font-size:13.5px; padding:1.15em 1.9em; border-radius:8px;
}
.belknop{ background:var(--vlak); color:var(--donker); border-color:var(--lijn); }
.belknop:hover{ border-color:var(--donker); background:var(--vlak); color:var(--donker); }

/* ---------------- boekingskaart ---------------- */
.boekkaart{
  background:var(--vlak); border-radius:14px; overflow:hidden;
  box-shadow:0 14px 40px rgba(24,28,38,.11);
  position:sticky; top:104px;
  align-self:start;
  max-height:calc(100vh - 124px);
  overflow-y:auto;
}
.boekkaart__kop{
  margin:0; padding:15px 20px; text-align:center;
  background:var(--diep);
  color:#fff !important;
  font-family:var(--font-kop);
  font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.boekkaart__lijf{ padding:18px; }

.boekkaart__prijsregel{
  display:flex; align-items:baseline; gap:10px; margin:0 0 6px;
}
.boekkaart__label{ font-size:13.5px; color:var(--grijs); }
.boekkaart__prijs{
  font-family:var(--font-kop); font-weight:700;
  font-size:clamp(26px,2.4vw,32px); line-height:1.1; color:var(--merk);
}
.boekkaart__noot{ margin:0 0 14px; font-size:11.5px; line-height:1.45; color:var(--grijs); }

.boekkaart__lijst{ margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; }
.boekkaart__lijst > div{ display:flex; align-items:baseline; gap:12px; }
.boekkaart__lijst dt{
  display:flex; align-items:center; gap:8px;
  flex:0 0 108px; font-size:13.5px; color:#4b5261;
}
.boekkaart__lijst dt svg{ width:17px; height:17px; color:var(--grijs); flex:0 0 17px; }
.boekkaart__lijst dd{ margin:0; font-size:13.5px; color:var(--donker); font-weight:600; }

.boekkaart .cms-knop--vol{
  text-transform:uppercase; letter-spacing:.07em;
  font-size:13.5px; padding:1.1em 1.2em;
}

/* ---------------- persoonlijk contact ---------------- */
.contactblok{
  margin-top:16px; padding:15px; border-radius:10px;
  background:var(--merk-zacht,#feede9);
}
.contactblok__kop{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.contactblok__foto{
  width:64px; height:64px; flex:0 0 64px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:3px solid var(--vlak); box-shadow:0 2px 8px rgba(24,28,38,.12);
}
.contactblok__foto--leeg{
  display:grid; place-items:center; background:var(--vlak); color:var(--merk);
  font-family:var(--font-kop); font-weight:700; font-size:22px;
}
.contactblok__titel{
  margin:0 0 1px; font-family:var(--font-accent,cursive);
  font-size:20px; font-weight:600; color:var(--merk); line-height:1.1;
}
.contactblok__naam{ margin:0; font-weight:700; font-size:15.5px; color:var(--donker); }
.contactblok__functie{ margin:0; font-size:13px; color:#6b7280; }

.contactblok__lijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.contactblok__lijst a{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-size:13.5px; color:#3c434f; overflow-wrap:anywhere;
}
.contactblok__lijst svg{ width:17px; height:17px; color:var(--merk); flex:0 0 17px; }
.contactblok__lijst a:hover{ color:var(--merk); }

/* ---------------- de rest van de pagina ---------------- */
.profiel__inhoud{
  background:var(--vlak); border-radius:14px;
  padding:34px 34px 40px;
  box-shadow:0 10px 34px rgba(24,28,38,.07);
}
/* Het eerste blok heeft geen streep en geen extra ruimte erboven nodig. */
.profiel__inhoud > .profielblok:first-child{ margin-top:0; padding-top:0; border-top:0; }

/* ---------------- blokken ---------------- */
.profielblok{ margin-top:42px; padding-top:32px; border-top:1px solid var(--lijn); }
.profielblok__kop{
  font-size:14px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin:0 0 18px; color:var(--donker);
}
.profielblok__bij{ color:var(--grijs); font-weight:500; letter-spacing:.06em; }
.profielblok__meer{ margin:20px 0 0; }

/* Kop met icoon: "Over Billy Dans" */
.overkop{
  display:flex; align-items:center; gap:11px;
  font-size:21px; font-weight:700; color:var(--donker);
  margin:0 0 16px; line-height:1.2;
}
.overkop svg{ width:23px; height:23px; color:var(--merk); flex:0 0 23px; }
.overkop--tweede{ margin-top:34px; }

/* ---------------- agenda ---------------- */
/* Komende optredens: datum in een blokje links, de rest ernaast. */
.agenda{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.agenda__regel{
  display:flex; align-items:center; gap:16px;
  padding:12px 14px; border:1px solid var(--lijn); border-radius:11px;
  background:var(--vlak);
}
.agenda__datum{
  flex:0 0 62px; width:62px; text-align:center; line-height:1.05;
  padding:8px 4px; border-radius:9px;
  background:var(--merk-zacht,#feede9); color:var(--merk);
}
.agenda__dag{ display:block; font-family:var(--font-kop); font-weight:700; font-size:22px; }
.agenda__maand{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.agenda__jaar{ display:block; font-size:10.5px; color:#a8705f; margin-top:2px; }

.agenda__wat{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.agenda__wat strong{ font-size:15.5px; color:var(--donker); }
.agenda__plek,
.agenda__tijd{
  display:flex; align-items:center; gap:6px;
  font-size:13.5px; color:var(--grijs);
}
.agenda__plek svg,
.agenda__tijd svg{ width:15px; height:15px; color:var(--merk); flex:0 0 15px; }

/* Speelde eerder op: compacter, het is een opsomming. */
.eerder{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.eerder li{
  display:flex; align-items:baseline; gap:7px;
  padding:7px 13px; border:1px solid var(--lijn); border-radius:99px;
  background:var(--vlak-zacht); font-size:13.5px;
}
.eerder__naam{ font-weight:600; color:var(--donker); }
.eerder__plek{ color:var(--grijs); font-size:12.5px; }

@media (max-width:520px){
  .agenda__regel{ gap:12px; padding:10px 12px; }
  .agenda__datum{ flex:0 0 54px; width:54px; }
  .agenda__dag{ font-size:19px; }
}

.biografie{
  font-size:15.5px; line-height:1.75; color:var(--lees);
  --bio-regelhoogte:1.75em;
}
.biografie p{ margin:0 0 1em; }
.biografie p:last-child{ margin-bottom:0; }

/* Ingeklapt stopt de tekst na een vast aantal regels. Geen vervaging:
   de hoogte is precies een veelvoud van de regelhoogte, dus de tekst
   wordt tussen twee regels afgekapt en niet middendoor. Het aantal
   regels stel je in bij Instellingen > Profiel. */
.biografie.is-ingeklapt{
  max-height:calc(var(--bio-regels, 8) * var(--bio-regelhoogte));
  overflow:hidden;
}
.leesmeer{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--merk); font:inherit; font-size:14.5px; font-weight:600;
}
.leesmeer svg{ width:16px; height:16px; transition:transform .18s ease; }
.leesmeer:hover svg{ transform:translateY(2px); }
.leesmeer--knop{ margin-top:18px; }
.leesmeer--knop svg{ transform:none; }
.leesmeer--knop:hover svg{ transform:translateX(3px); }

/* ---------------- spotify ---------------- */
.spotify{ border-radius:12px; overflow:hidden; background:#191414; }
.spotify iframe{ width:100%; height:152px; border:0; display:block; }

/* ---------------- carrousel ---------------- */
.carrousel{ position:relative; }
.carrousel__spoor{
  list-style:none; margin:0; padding:2px; display:flex; gap:16px;
  overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.carrousel__spoor::-webkit-scrollbar{ display:none; }
.carrousel__spoor > *{ scroll-snap-align:start; flex:0 0 auto; }

.carrousel__pijl{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--lijn);
  background:var(--vlak); color:var(--donker); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 3px 12px rgba(24,28,38,.12);
}
.carrousel__pijl:hover{ border-color:var(--merk); color:var(--merk); }
.carrousel__pijl--links{ left:-18px; }
.carrousel__pijl--rechts{ right:-18px; }
.carrousel__pijl[hidden]{ display:none; }
.carrousel__pijl svg{ width:20px; height:20px; }

/* Artiestkaartjes in een carrousel. Het raster laat ze meegroeien met de
   kolom; in een carrousel moeten ze een vaste breedte hebben, anders
   krimpen ze tot niets omdat het spoor een flexbox is. */
.carrousel--kaarten .carrousel__spoor{ gap:20px; padding:2px 2px 6px; }
.carrousel--kaarten .kaart{ width:288px; }

@media (max-width:900px){
  .carrousel--kaarten .kaart{ width:250px; }
}

@media (max-width:560px){
  /* Op een telefoon net iets minder dan de volle breedte, zodat je aan
     het randje van het volgende kaartje ziet dat er meer is. */
  .carrousel--kaarten .kaart{ width:min(78vw, 280px); }
  .carrousel--kaarten .carrousel__pijl{ display:none; }

  /* De carrousel mag over de rand van het omhulsel heen lopen, anders
     stopt het vegen halverwege in de marge van 24px die .omhulsel zet.
     Dezelfde 24px komt er als padding weer bij, zodat het eerste kaartje
     netjes uitlijnt met de kop erboven. */
  .uitgelicht .carrousel--kaarten{ margin-inline:-24px; }
  .carrousel--kaarten .carrousel__spoor{
    padding-inline:24px;
    scroll-padding-inline:24px;
  }
}

/* Een ingeklapt tekstblok onder een categorie. Met een verloop aan de
   onderkant: zo zie je dat er meer staat, en dat is een duidelijker
   signaal dan de knop alleen. */
.paginatekst--inklap{ padding-bottom:6px; }
.paginatekst__tekst.is-ingeklapt{
  max-height:8.4em; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 62%, transparent);
          mask-image:linear-gradient(#000 62%, transparent);
}

/* De vragen onderaan een categorie- of losse pagina.

   Bewust géén kaart eromheen: de vragen hebben zelf al een randje, en
   een kader om een rij kaders levert twee lijnen op waar er één hoort.
   Alleen de kop en de ruimte eromheen worden hier gezet; de rest komt
   uit de .vraag-opmaak van de artiestpagina. */
.categorievragen,
.paginavragen{ max-width:900px; margin:34px 0 0; }
.categorievragen h2,
.paginavragen h2{
  font-family:var(--font-kop); font-size:21px; margin:0 0 14px;
}
.categorievragen .vragen,
.paginavragen .vragen{ margin:0; }

/* De videoband onderaan een categoriepagina. */
.videoband{ margin:44px 0 0; }
.videoband__kop{ margin:0 0 18px; }
.videoband__kop h2{ margin:0 0 6px; }
.videoband__kop p{ margin:0; font-size:14.5px; color:var(--grijs); }

.carrousel--videos .carrousel__spoor{ gap:18px; padding:2px 2px 6px; }
/* 320 in plaats van 280: dan passen er op een gewoon scherm vier en
   schuift de vijfde eruit — anders staat alles stil en lijkt het geen
   carrousel. */
.carrousel--videos .videokaart{ width:320px; }
.videokaart__wie{
  display:block; margin-top:9px; font-size:14.5px; font-weight:600;
  color:var(--donker); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.videokaart__wie:hover{ color:var(--merk); }

@media (max-width:560px){
  /* Net als bij de artiestkaartjes: iets minder dan de volle breedte,
     zodat het randje van het volgende kaartje verraadt dat er meer is. */
  .carrousel--videos .videokaart{ width:min(78vw, 280px); }
  .carrousel--videos .carrousel__pijl{ display:none; }
  .videoband .carrousel--videos{ margin-inline:-24px; }
  .carrousel--videos .carrousel__spoor{
    padding-inline:24px; scroll-padding-inline:24px;
  }
}

/* De tabel met eerdere optredens. Zelfde opmaak als de nummertabel van
   het repertoire, zodat de twee blokken onder elkaar één geheel zijn. */
.agendavak{ overflow-x:auto; }
.agendatabel{
  width:100%; border-collapse:collapse; font-size:15px;
  min-width:420px;
}
.agendatabel caption{ text-align:left; }
.agendatabel th,
.agendatabel td{
  padding:11px 14px 11px 0; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--lijn);
}
.agendatabel thead th{
  padding-top:0; font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--grijs); font-weight:600;
}
.agendatabel tbody th{ font-weight:600; color:var(--donker); }
.agendatabel tbody tr:last-child th,
.agendatabel tbody tr:last-child td{ border-bottom:0; }
.agendatabel__datum{
  width:118px; white-space:nowrap; font-variant-numeric:tabular-nums;
  color:var(--lees,var(--tekst));
}

.videokaart{ width:220px; }
.videokaart__beeld{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  border-radius:10px; overflow:hidden; background:var(--beeldvlak); aspect-ratio:16/9;
}
.videokaart__beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.videokaart__speel{
  position:absolute; inset:0; margin:auto; width:46px; height:46px;
  border-radius:50%; background:rgba(255,255,255,.92); color:var(--donker);
  display:grid; place-items:center; transition:transform .18s ease, background-color .18s ease;
}
.videokaart__speel svg{ width:20px; height:20px; fill:currentColor; }
.videokaart__beeld:hover .videokaart__speel{ transform:scale(1.1); background:var(--merk); color:#fff; }
.videokaart__titel{ margin:10px 0 0; font-size:13.5px; line-height:1.45; color:var(--lees); }

/* Staande kaartjes met de foto boven en de naam eronder, net als in
   het overzicht. Verder niets: dit is een tip, geen prijslijst. */
.tipkaart{ width:200px; }
.tipkaart a{
  display:block; text-decoration:none; height:100%;
  background:var(--vlak); border:1px solid var(--lijn);
  border-radius:var(--radius-kaart,10px); overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tipkaart a:hover{
  border-color:#c9cfd8; box-shadow:var(--schaduw); transform:translateY(-2px);
}
.tipkaart__beeld{
  position:relative; display:block; width:100%;
  aspect-ratio:var(--kaart-verhouding, 4 / 3);
  background:var(--beeldvlak); overflow:hidden;
}
.tipkaart__beeld img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; z-index:1;
}
.tipkaart__beeld .geenbeeld__naam{ display:none; }
.tipkaart__beeld .geenbeeld__letters{ font-size:clamp(22px,16%,34px); }
.tipkaart__naam{
  display:block; padding:13px 14px 15px;
  font-family:var(--font-kop); font-weight:700; font-size:15px;
  line-height:1.3; color:var(--donker);
}
.tipkaart a:hover .tipkaart__naam{ color:var(--merk); }

/* ---------------- prijzen ---------------- */
.opties{ border:1px solid var(--lijn); border-radius:10px; overflow:hidden; }
.optietabel{ width:100%; border-collapse:collapse; font-size:14.5px; }
.optietabel thead th{
  text-align:left; padding:13px 18px; background:var(--vlak-zacht);
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grijs); border-bottom:1px solid var(--lijn);
}
.optietabel tbody th{ text-align:left; font-weight:700; color:var(--donker); }
.optietabel td, .optietabel tbody th{ padding:13px 18px; border-top:1px solid #f0f2f5; }
.optietabel tbody tr:first-child td, .optietabel tbody tr:first-child th{ border-top:0; }
.optietabel tbody tr:hover{ background:var(--vlak-zacht); }
.optietabel__tarief{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; }
.optietabel__aanvraag{ font-weight:400; font-style:italic; color:var(--grijs); }

/* Wat er bij die uitvoering nog bij de prijs hoort: een toelichting, de
   reiskosten, een toeslag voor geluid en licht. Onder de naam van de
   optie, kleiner en grijzer, zodat de tabel leesbaar blijft. */
.optietabel__noten{
  display:block; margin-top:4px; font-weight:400; font-size:12.5px;
  line-height:1.5; color:var(--grijs); max-width:44ch;
}
.optietabel__noten span{ display:block; }
.optietabel__noten span::before{ content:'* '; }
.opties__noot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin:12px 0 0; font-size:12.5px; color:var(--grijs);
}
.opties__link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--merk); font-weight:600; text-decoration:none;
}
.opties__link svg{ width:15px; height:15px; }
.opties__link:hover{ text-decoration:underline; }

/* ---------------- repertoire ---------------- */
.repertoire{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 30px;
}
.repertoire li{ display:flex; align-items:center; gap:11px; font-size:15px; color:var(--lees); }
.repertoire svg{ width:16px; height:16px; color:var(--merk); flex:0 0 16px; }
.repertoire.is-ingeklapt{ display:none; }
/* De maker en het jaar achter een repertoiretitel. Mag wegvallen als het
   krap wordt: de titel is waar iemand op zoekt, de rest is context. */
.repertoire__bij{
  font-style:normal; font-size:13px; color:var(--grijs);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}

/* De nummertabel op de artiestpagina. Een echte <table> met koppen, want
   dat is wat zoekmachines en taalmodellen als lijst met velden lezen —
   een rij <li>'s met streepjes ertussen moeten ze raden. */
.nummertabel{ width:100%; border-collapse:collapse; font-size:15px; }
.nummertabel th,
.nummertabel td{
  text-align:left; padding:11px 14px 11px 0;
  border-bottom:1px solid var(--lijn); vertical-align:top;
}
.nummertabel thead th{
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--grijs); padding-bottom:8px;
}
.nummertabel tbody th{ font-weight:600; color:var(--tekst); }
.nummertabel tbody td{ color:var(--lees); }
.nummertabel__jaar{ width:88px; white-space:nowrap; }
.nummertabel__leeg{ color:var(--grijs); }
.nummertabel tbody.is-ingeklapt{ display:none; }
.nummertabel tbody:last-child tr:last-child th,
.nummertabel tbody:last-child tr:last-child td{ border-bottom:0; }
.profielblok__intro{ margin:0 0 14px; color:var(--lees); }

@media (max-width:520px){
  /* Op een telefoon is de kolom "origineel van" het eerste dat mag
     inschikken; de titel en het jaar blijven. */
  .nummertabel{ font-size:14px; }
  .nummertabel th, .nummertabel td{ padding:9px 10px 9px 0; }
  .nummertabel__jaar{ width:62px; }
}

/* ---------------- vragen ---------------- */
.vragen{ display:flex; flex-direction:column; gap:8px; }
.vraag{ border:1px solid var(--lijn); border-radius:8px; background:var(--vlak); }
.vraag summary{
  display:flex; align-items:center; gap:14px; cursor:pointer; list-style:none;
  padding:14px 18px; font-size:15px; font-weight:500; color:var(--donker);
}
.vraag summary::-webkit-details-marker{ display:none; }
.vraag summary span{ flex:1; }
.vraag summary:hover{ color:var(--merk); }
.vraag svg{ width:17px; height:17px; color:var(--grijs); flex:0 0 17px; }
.vraag__min{ display:none; }
.vraag[open] .vraag__plus{ display:none; }
.vraag[open] .vraag__min{ display:block; color:var(--merk); }
.vraag__antwoord{ padding:0 18px 16px; font-size:14.5px; line-height:1.7; color:#4b5261; }

/* ---------------- boekingsblok ---------------- */
/* Zelfde opzet als het filterpaneel: een kaart met overflow:hidden en
   een donkere kop die van rand tot rand loopt. De kaart zelf heeft
   daarom géén padding — die zit op .boekkaart__lijf, anders komt de
   binnenruimte er twee keer bij en blijft er van de inhoud weinig over. */
.boekkaart{
  background:var(--vlak); border:1px solid var(--lijn);
  border-radius:14px; padding:0; overflow:hidden;
  box-shadow:var(--schaduw);
}
.boekkaart__kop{
  margin:0; padding:15px 20px; text-align:center;
  background:var(--diep); color:#fff !important;
  font-family:var(--font-kop);
  font-size:14px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.boekkaart__lijf{ padding:20px; }

/* Op een breed scherm scrollt de kaart binnenin mee als hij hoger is dan
   het scherm. De kop blijft dan staan, net als in het filterpaneel.
   Onder de 1180 pixels staat de kaart gewoon in de pagina; sticky zou
   de zwarte balk dan onder de menubalk laten plakken. */
@media (min-width:1181px){
  .boekkaart__kop{ position:sticky; top:0; z-index:2; }
}
.boekkaart__label{ margin:0; font-size:13.5px; color:var(--grijs); }
.boekkaart__prijs{
  margin:2px 0 2px; font-family:var(--font-kop); font-weight:700;
  font-size:30px; line-height:1.1; color:var(--merk);
}
.boekkaart__noot{ margin:0 0 10px; font-size:12px; color:var(--grijs); }

/* Het sterretje achter het bedrag verwijst naar de regels eronder. Het
   is een link, zodat je er met de toetsenbord ook bij komt. */
.boekkaart__ster{
  font-size:.6em; vertical-align:super; line-height:0;
  color:var(--merk); text-decoration:none; margin-left:1px;
}
.boekkaart__ster:hover{ text-decoration:underline; }

/* Wat er nog bij de prijs hoort: toelichting, reiskosten, een toeslag. */
.boekkaart__noten{
  list-style:none; margin:0 0 20px; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.boekkaart__noten li{
  display:flex; gap:6px; align-items:flex-start;
  font-size:12.5px; line-height:1.5; color:var(--lees,#414855);
}
.boekkaart__noten li > span:first-child{ color:var(--merk); flex:0 0 auto; }

.boekkaart__lijst{ margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; }
.boekkaart__lijst > div{ display:flex; align-items:baseline; gap:12px; }
.boekkaart__lijst dt{
  display:flex; align-items:center; gap:9px;
  flex:0 0 146px; font-size:14.5px; color:#4b5261;
}
.boekkaart__lijst dt svg{ width:17px; height:17px; color:var(--grijs); flex:0 0 17px; }
.boekkaart__lijst dd{ margin:0; font-size:14.5px; color:var(--donker); font-weight:500; }
.boekkaart__check{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--merk); font-weight:600; text-decoration:none;
}
.boekkaart__check svg{ width:15px; height:15px; }
.boekkaart__check:hover{ text-decoration:underline; }

.boekkaart__knoppen{ display:flex; flex-direction:column; gap:10px; }
.boekkaart__knoppen .cms-knop{ text-transform:uppercase; letter-spacing:.06em; font-size:14px; padding:1em 1.2em; }
.belknop{ background:var(--vlak); color:var(--donker); border-color:var(--lijn); }
.belknop:hover{ border-color:var(--donker); }


/* ---------------- videovenster ---------------- */
.videovenster{
  position:fixed; inset:0; z-index:200; background:rgba(12,14,19,.9);
  display:grid; place-items:center; padding:24px;
}
.videovenster__kader{ width:min(100%,960px); aspect-ratio:16/9; }
.videovenster iframe{ width:100%; height:100%; border:0; border-radius:10px; }
.videovenster__sluit{
  position:absolute; top:20px; right:20px; width:44px; height:44px;
  border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff;
  cursor:pointer; display:grid; place-items:center;
}
.videovenster__sluit:hover{ background:rgba(255,255,255,.26); }
.videovenster__sluit svg{ width:22px; height:22px; }

/* ---------------- kleiner scherm ---------------- */
/* Eén kolom, en de boekingskaart schuift mee in de leesvolgorde:
   eerst de foto en de naam met de knoppen, dán de boekingsinformatie,
   dán pas de biografie. De kaart is in de HTML een zusje van
   .profiel__links, dus met alleen order kom je er niet. display:contents
   laat die omhullende div wegvallen, waardoor de hero en de inhoud
   zelfstandige blokken worden die we kunnen ordenen. */
@media (max-width:1180px){
  .profiel{
    display:flex; flex-direction:column;
    grid-template-columns:none; gap:28px;
    /* De basisregel zet align-items op start; in een kolom betekent dat
       "zo breed als de inhoud". De boekingskaart bleef daardoor smal. */
    align-items:stretch;
  }
  .profiel__links{ display:contents; }
  .hero{ order:1; grid-template-columns:260px minmax(0,1fr); gap:32px; }
  .boekkaart{
    order:2; position:static; max-height:none; overflow:visible;
    align-self:stretch;   /* de basisregel zet hem op start: blijft dan smal */
  }
  .profiel__inhoud{ order:3; }
  .carrousel__pijl--links{ left:-6px; }
  .carrousel__pijl--rechts{ right:-6px; }
}

/* ---------------- telefoon ---------------- */
/* De foto stond ook op een telefoon nog in een kolom van 260 pixels
   naast de tekst. Daardoor bleef er een strookje van nog geen honderd
   pixels over voor de naam. Hier gaat hij over de volle breedte, met de
   tekst eronder. */
@media (max-width:760px){
  .profiel{ gap:22px; padding-bottom:36px; }

  /* De ruimte onder de foto moet het oranje blokje kwijt kunnen, dat er
     14 pixels onderuit steekt. */
  .hero{ grid-template-columns:minmax(0,1fr); gap:34px; padding:10px 0 22px; }
  .hero__beeld{ aspect-ratio:4 / 3; }
  .hero__beeld img{ object-position:center 22%; }
  .hero__hart{ left:14px; bottom:-14px; width:76px; height:38px; }
  .hero__hart svg{ width:19px; height:19px; }

  .hero__soort{ margin-top:0; }
  .hero__naam{ font-size:clamp(32px,9vw,44px); }
  .hero__slogan{ font-size:clamp(21px,6.2vw,27px); margin-bottom:14px; }
  .hero__intro{ font-size:15.5px; margin-bottom:22px; }

  /* Twee knoppen naast elkaar worden op deze breedte twee halve
     knoppen met afgebroken tekst. Onder elkaar, over de volle breedte. */
  .hero__knoppen{ gap:10px; }
  .hero__knoppen .cms-knop{
    flex:1 1 100%; justify-content:center; padding:1.05em 1.2em;
  }

  .boekkaart__lijf{ padding:18px 16px 20px; }
  .boekkaart__knoppen .cms-knop{ width:100%; justify-content:center; }
}

@media (max-width:640px){
      .optietabel thead{ display:none; }
  .optietabel tbody th, .optietabel td{ display:block; padding:4px 16px; border-top:0; }
  .optietabel tbody tr{ display:block; padding:12px 0; border-top:1px solid var(--lijn); }
  .optietabel tbody tr:first-child{ border-top:0; }
  .optietabel td::before{ color:var(--grijs); }
  .optietabel td:nth-of-type(1)::before{ content:'Speelduur: '; }
  .optietabel td:nth-of-type(2)::before{ content:'Bezetting: '; }
  .optietabel__tarief{ text-align:left; font-size:17px; padding-top:6px; }
}

.optietabel__vanaf{ font-weight:400; font-size:12px; color:var(--grijs); }


/* =====================================================================
   Offerte aanvragen
   ===================================================================== */
.offertepagina{ background:var(--merk-vleug,#fef9f7); position:relative; }
.offertepagina > .omhulsel{ position:relative; z-index:1; }

.offerte{
  display:grid; grid-template-columns:minmax(0,1fr) 330px;
  gap:38px; align-items:start; padding:10px 0 64px;
}

.offerte__hoofd{
  background:var(--vlak); border-radius:14px; padding:32px 34px 36px;
  box-shadow:0 10px 34px rgba(24,28,38,.07);
}
.offerte__kop{ margin-bottom:26px; }
.offerte__soort{
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--merk);
}
.offerte__soort svg{ width:17px; height:17px; }
.offerte__kop h1{ font-size:clamp(26px,3.4vw,36px); line-height:1.15; margin:0 0 12px; }
.offerte__intro{ margin:0; font-size:16px; line-height:1.65; color:#4b5261; max-width:60ch; }

/* de gekozen artiest */
.gekozen{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px; margin-bottom:26px; border-radius:11px;
  background:var(--merk-zacht,#feede9);
}
.gekozen__beeld{
  position:relative; width:64px; height:64px; flex:0 0 64px;
  border-radius:9px; overflow:hidden; background:var(--beeldvlak);
}
.gekozen__beeld img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.gekozen__beeld .geenbeeld__naam{ display:none; }
.gekozen__beeld .geenbeeld__letters{ font-size:20px; }
.gekozen__tekst{ flex:1 1 160px; min-width:0; }
.gekozen__label{ margin:0; font-size:12px; color:#8a6558; }
.gekozen__naam{ margin:1px 0 0; font-family:var(--font-kop); font-weight:700; font-size:19px; color:var(--donker); }
.gekozen__genre{ margin:0; font-size:13px; color:#8a6558; }
.gekozen__wissel{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:13.5px; font-weight:600; color:var(--merk);
}
.gekozen__wissel svg{ width:15px; height:15px; }
.gekozen__wissel:hover{ text-decoration:underline; }

/* het formulier */
.formfout{
  display:flex; align-items:center; gap:10px; margin:0 0 20px;
  padding:12px 15px; border-radius:9px;
  background:var(--fout-vlak); color:var(--fout-tekst); font-size:14.5px;
}
.formfout svg{ width:19px; height:19px; flex:0 0 19px; }

.formgroep{ border:0; margin:0 0 26px; padding:0; }
.formgroep legend{
  padding:0; margin:0 0 14px; font-family:var(--font-kop);
  font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--donker);
}
.formrij{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.formveld{ margin:0 0 16px; }
.formveld label{
  display:block; margin-bottom:6px;
  font-size:14px; font-weight:600; color:#3c434f;
}
.formveld label span{ color:var(--merk); }
.formveld input,
.formveld select,
.formveld textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:15px;
  color:var(--tekst); background:var(--vlak);
  border:1px solid var(--lijn); border-radius:9px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.formveld input:focus,
.formveld select:focus,
.formveld textarea:focus{
  outline:0; border-color:var(--merk);
  box-shadow:0 0 0 3px var(--merk-zacht,#feede9);
}
.formveld textarea{ resize:vertical; min-height:110px; line-height:1.6; }
.formhint{ display:block; margin-top:5px; font-size:12.5px; color:var(--grijs); }

/* het valstrikveld voor robots */
.formveld--val{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.offerteform__voet{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding-top:8px; border-top:1px solid var(--lijn);
}
.offerteform__voet .cms-knop{
  text-transform:uppercase; letter-spacing:.06em;
  font-size:14px; padding:1.1em 2em; margin-top:20px;
}
.offerteform__noot{ margin:20px 0 0; font-size:12.5px; color:var(--grijs); }
.offerteform__noot span{ color:var(--merk); }

/* de zijkant */
.offerte__zij{ position:sticky; top:104px; }
.offertekaart{
  background:var(--vlak); border:1px solid var(--lijn);
  border-radius:14px; padding:22px; box-shadow:var(--schaduw);
}
.offertekaart__belofte{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  padding-bottom:16px; border-bottom:1px solid var(--lijn);
  font-family:var(--font-kop); font-weight:700; font-size:15px; color:var(--donker);
}
.offertekaart__belofte svg{ width:19px; height:19px; color:var(--merk); flex:0 0 19px; }

.stappen{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.stappen li{ display:flex; align-items:flex-start; gap:12px; }
.stappen__nr{
  width:26px; height:26px; flex:0 0 26px; border-radius:50%;
  background:var(--merk); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-kop); font-weight:700; font-size:13px;
}
.stappen__tekst{ font-size:14.5px; line-height:1.5; color:#4b5261; padding-top:3px; }

/* bedankt */
.bedankt{
  max-width:620px; margin:40px auto 80px; text-align:center;
  background:var(--vlak); border-radius:14px; padding:44px 34px;
  box-shadow:0 10px 34px rgba(24,28,38,.07);
}
.bedankt__vink{
  display:grid; place-items:center; width:68px; height:68px; margin:0 auto 22px;
  border-radius:50%; background:var(--merk-zacht,#feede9); color:var(--merk);
}
.bedankt__vink svg{ width:32px; height:32px; stroke-width:2.6; }
.bedankt h1{ font-size:clamp(24px,3vw,32px); margin:0 0 14px; }
.bedankt__tekst{ margin:0 0 18px; font-size:16px; line-height:1.7; color:#4b5261; }
.bedankt__over{ margin:0 0 26px; font-size:15px; color:#4b5261; }
.bedankt__knoppen{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width:1050px){
  .offerte{ grid-template-columns:1fr; gap:26px; }
  .offerte__zij{ position:static; }
}
@media (max-width:640px){
  .offerte__hoofd{ padding:24px 18px 28px; }
  .formrij{ grid-template-columns:1fr; gap:0; }
  .offerteform__voet .cms-knop{ width:100%; justify-content:center; }
  .bedankt{ padding:34px 20px; }
}

/* =====================================================================
   Artiesten, de ingangspagina
   ===================================================================== */
.artiestenpagina{ background:var(--vlak); }

/* ---------------- kop ---------------- */
.artiestenkop{ background:var(--vlak); overflow:hidden; }
.artiestenkop__binnen{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:50px; align-items:center; padding:6px 0 54px;
}
.artiestenkop__tekst{ min-width:0; }
.artiestenkop__label{
  margin:14px 0 12px; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--merk);
}
.artiestenkop__kop{
  font-size:clamp(32px,4.6vw,50px); line-height:1.08;
  letter-spacing:-.02em; margin:0 0 18px; color:var(--donker);
}
.artiestenkop__kop span{ color:var(--merk); }
.artiestenkop__intro{
  font-size:16.5px; line-height:1.7; color:#4b5261;
  margin:0 0 26px; max-width:52ch;
}

/* het zoekveld */
.grootzoek{ position:relative; max-width:520px; margin-bottom:26px; }
.grootzoek input{
  width:100%; padding:18px 60px 18px 22px; font:inherit; font-size:15.5px;
  color:var(--tekst); background:var(--vlak);
  border:1px solid var(--lijn); border-radius:11px;
  box-shadow:0 4px 18px rgba(24,28,38,.06);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.grootzoek input:focus{
  outline:0; border-color:var(--merk);
  box-shadow:0 0 0 3px var(--merk-zacht,#feede9);
}
.grootzoek button{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:9px;
  background:none; color:var(--donker); cursor:pointer;
  display:grid; place-items:center;
}
.grootzoek button:hover{ color:var(--merk); }
.grootzoek svg{ width:22px; height:22px; }

.kopusp{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px 30px;
}
.kopusp li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:#3c434f; }
.kopusp__ring{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  border:1.5px solid var(--merk-lijn,#fcd8cf); color:var(--merk);
  display:grid; place-items:center;
}
.kopusp__ring svg{ width:17px; height:17px; }

/* het schuine beeld */
.artiestenkop__beeld{
  position:relative; aspect-ratio:4 / 3; min-width:0;
  border-radius:20px; overflow:hidden;
  transform:rotate(-3deg);
  box-shadow:0 20px 60px rgba(24,28,38,.20);
}
.artiestenkop__beeld img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:rotate(3deg) scale(1.12);
}

/* ---------------- categorieën ---------------- */
.categorieen{ background:var(--merk-vleug,#fef9f7); padding:52px 0 58px; }
.categorieen__kop{ font-size:clamp(22px,2.6vw,28px); margin:0 0 24px; }
.categorielijst{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;
}

/* Als carrousel: één rij die opzij schuift in plaats van een raster met
   een half lege laatste rij. Het raster hierboven blijft staan voor het
   geval dit blok ergens anders zonder carrousel wordt gebruikt. */
.carrousel--categorieen{ min-width:0; max-width:100%; }
.carrousel--categorieen .categorielijst{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:2px 2px 6px; min-width:0;
}
.carrousel--categorieen .categorielijst::-webkit-scrollbar{ display:none; }
/* 300 en niet 238: bij 238 blijft er maar 66 pixels over voor de naam en
   breekt bijna alles over twee regels. Bij 300 passen elf van de dertien
   op één regel, en de twee langste breken netjes af — zoals "Kids &
   Tieneracts" nu ook al doet. */
.carrousel--categorieen .categorielijst > li{
  flex:0 0 auto; width:300px; scroll-snap-align:start;
}
.carrousel--categorieen .categorielijst a{ height:100%; }

@media (max-width:560px){
  /* Net als bij de andere carrousels: iets minder dan de volle breedte,
     zodat het randje van de volgende kaart verraadt dat er meer is. */
  .carrousel--categorieen .categorielijst > li{ width:min(74vw, 240px); }
  .carrousel--categorieen .carrousel__pijl{ display:none; }
  .categorieen .carrousel--categorieen{ margin-inline:-16px; }
  .carrousel--categorieen .categorielijst{
    padding-inline:16px; scroll-padding-inline:16px;
  }
}
.categorielijst a{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; text-decoration:none;
  background:var(--vlak); border:1px solid var(--lijn);
  border-radius:var(--radius-kaart,10px);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.categorielijst a:hover{
  border-color:var(--merk-lijn,#fcd8cf);
  box-shadow:0 8px 24px rgba(24,28,38,.08);
  transform:translateY(-2px);
}
.categorie__ring{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  background:var(--merk-zacht,#feede9); color:var(--merk);
  display:grid; place-items:center;
}
.categorie__ring svg{ width:21px; height:21px; }
.categorie__naam{
  /* min-width:0 erbij: zonder dat weigert een flexkind smaller te worden
     dan zijn tekst. "Instrumentalisten" duwde daardoor het pijltje het
     kaartje uit. Met overflow-wrap breekt een lange naam netjes af in
     plaats van door te lopen. */
  flex:1 1 auto; min-width:0; overflow-wrap:anywhere;
  font-family:var(--font-kop); font-weight:700;
  font-size:15.5px; color:var(--donker); line-height:1.3;
}
.categorie__aantal{
  flex:0 0 auto;
  font-size:12.5px; color:var(--grijs); font-variant-numeric:tabular-nums;
}
.categorie__pijl{ width:18px; height:18px; color:var(--merk); flex:0 0 18px; transition:transform .16s ease; }
.categorielijst a:hover .categorie__pijl{ transform:translateX(3px); }

/* ---------------- uitgelicht ---------------- */
.uitgelicht{ padding:54px 0 60px; }
.uitgelicht__kop{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap; margin-bottom:24px;
}
.uitgelicht__kop h2{ font-size:clamp(22px,2.6vw,28px); margin:0; }
.uitgelicht__sorteer select{
  padding:12px 16px; font:inherit; font-size:14.5px;
  border:1px solid var(--lijn); border-radius:9px; background:var(--vlak); color:var(--tekst);
}
.uitgelicht__sorteer select:focus{ outline:0; border-color:var(--merk); }
.uitgelicht__meer{ margin:32px 0 0; text-align:center; }
.uitgelicht__meer .cms-knop{ padding:1.05em 2.2em; }

.artiestentekst{ padding:0 0 60px; }
.paginatekst{ max-width:74ch; font-size:16px; line-height:1.8; color:var(--lees); }
.paginatekst h2{ font-size:24px; margin:1.6em 0 .6em; }
.paginatekst h3{ font-size:19px; margin:1.4em 0 .5em; }
.paginatekst p{ margin:0 0 1.1em; }
.paginatekst ul, .paginatekst ol{ margin:0 0 1.1em; padding-left:22px; }
.paginatekst li{ margin-bottom:.4em; }

@media (max-width:980px){
  .artiestenkop__binnen{ grid-template-columns:1fr; gap:30px; padding-bottom:40px; }
  .artiestenkop__beeld{ transform:none; max-width:520px; }
  .artiestenkop__beeld img{ transform:none; }
}
@media (max-width:560px){
  .categorielijst{ grid-template-columns:1fr; }
  .grootzoek input{ padding:15px 54px 15px 18px; }
  .uitgelicht__kop{ flex-direction:column; align-items:stretch; }
  .uitgelicht__sorteer select{ width:100%; }
}

/* Kruimelpad boven een overzichtspagina */
.kruimels--overzicht{ margin:0 0 14px; }

/* =====================================================================
   Donkere modus
   =====================================================================
   De site gebruikt overal variabelen, dus hier hoeven alleen de plekken
   bijgesteld waar nog een vaste kleur stond. --vlak is nieuw: dat is de
   achtergrond van kaarten, in de lichte uitvoering gewoon wit. */
:root{ --vlak:#fff; --grijs:#69707e; }

body{ background:var(--achtergrond); color:var(--tekst); }

[data-thema="donker"] .kaart,
[data-thema="donker"] .boekkaart,
[data-thema="donker"] .offerte__hoofd,
[data-thema="donker"] .offertekaart,
[data-thema="donker"] .categorielijst a,
[data-thema="donker"] .tipkaart a,
[data-thema="donker"] .bedankt,
[data-thema="donker"] .balk,
[data-thema="donker"] .zijbalk,
[data-thema="donker"] .grootzoek input,
[data-thema="donker"] .formveld input,
[data-thema="donker"] .formveld select,
[data-thema="donker"] .formveld textarea,
[data-thema="donker"] .uitgelicht__sorteer select{
  background:var(--vlak); color:var(--tekst); border-color:var(--lijn);
}

[data-thema="donker"] .categorieen,
[data-thema="donker"] .profielpagina,
[data-thema="donker"] .offertepagina{ background:var(--achtergrond); }

[data-thema="donker"] .aiveld__huidig,
[data-thema="donker"] .aibronnen,
[data-thema="donker"] .paginatekst,
[data-thema="donker"] .kaart__tekst{ color:#b9bfca; }

[data-thema="donker"] .kaart__beeld,
[data-thema="donker"] .tipkaart__beeld,
[data-thema="donker"] .gekozen__beeld{ background:#252932; }

/* Foto's zijn vaak op wit geschoten; een tikje dimmen oogt rustiger. */
[data-thema="donker"] .kaart__beeld img,
[data-thema="donker"] .tipkaart__beeld img,
[data-thema="donker"] .hero__beeld img{ filter:brightness(.92); }

/* Het knopje in de balk */
.themaknop{
  display:inline-grid; place-items:center;
  width:42px; height:42px; padding:0;
  border:1px solid var(--lijn); border-radius:50%;
  background:var(--vlak); color:var(--tekst); cursor:pointer;
  transition:border-color .16s ease, color .16s ease;
}
.themaknop:hover{ border-color:var(--merk); color:var(--merk); }
.themaknop svg{ width:19px; height:19px; }
.themaknop__uitleg{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}

/* Dezelfde knop staat op een telefoon nog een keer onderin het menu, maar
   dan als gewone regel in plaats van als rond knopje. */
.themaknop--menu{
  display:flex; width:100%; height:auto; border-radius:0;
  border-width:1px 0 0; border-color:var(--lijn); background:none;
}
.themaknop--menu:hover{ background:none; border-color:var(--lijn); color:var(--merk); }
.themaknop--menu svg{ width:20px; height:20px; }

/* =====================================================================
   Playlist
   ===================================================================== */
.playlist{ margin:38px 0 8px; }
.playlist__kop{ font-size:clamp(20px,2.4vw,26px); margin:0 0 16px; }
.playlist__venster{
  border-radius:var(--radius-kaart,12px); overflow:hidden;
  background:var(--vlak); border:1px solid var(--lijn);
}
.playlist__venster iframe{ display:block; width:100%; border:0; }
/* Spotify heeft een vaste hoogte nodig, YouTube een verhouding. */
.playlist--spotify .playlist__venster iframe{ height:400px; }
.playlist--youtube .playlist__venster iframe{ aspect-ratio:16 / 9; height:auto; }

@media (max-width:640px){
  .playlist--spotify .playlist__venster iframe{ height:352px; }
}

/* =====================================================================
   Homepagina
   ===================================================================== */
.home{ background:var(--achtergrond); }

/* ---------------- hero ---------------- */
.hero-home{
  position:relative; background:var(--diep); color:#fff;
  padding:76px 0 96px; overflow:hidden;
}
.hero-home__foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55; z-index:0;
}
.hero-home--beeld::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(20,22,28,.95) 0%, rgba(20,22,28,.72) 42%, rgba(20,22,28,.15) 100%);
}
.hero-home__binnen{ position:relative; z-index:2; max-width:min(var(--max-breedte,1240px), 92vw); }
.hero-home__kop{
  font-size:clamp(32px,4.8vw,52px); line-height:1.08; letter-spacing:-.02em;
  margin:0 0 18px; max-width:16ch; color:#fff;
}
.hero-home__kop span{ color:var(--merk); display:block; }
.hero-home__intro{
  font-size:16.5px; line-height:1.7; margin:0 0 28px;
  max-width:46ch; color:rgba(255,255,255,.86);
}
.hero-home__knoppen{ display:flex; gap:12px; flex-wrap:wrap; }

.homeknop{
  display:inline-flex; align-items:center; gap:9px;
  padding:1em 1.9em; border-radius:9px; text-decoration:none;
  font-family:var(--font-kop); font-weight:700; font-size:15px;
  border:1px solid transparent; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.knop--merk{ background:var(--merk); color:#fff; }
.knop--merk:hover{ background:var(--merk-donker,#d43f18); color:#fff; }
.knop--wit{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.knop--wit:hover{ background:#fff; color:var(--diep); border-color:#fff; }

/* ---------------- zoekbalk ---------------- */
.zoekbalk{ position:relative; z-index:3; margin-top:-34px; }
.zoekbalk__form{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:10px;
  padding:14px; background:var(--vlak); border:1px solid var(--lijn);
  border-radius:12px; box-shadow:0 12px 36px rgba(24,28,38,.13);
}
.zoekbalk__form input,
.zoekbalk__form select{
  width:100%; padding:13px 15px; font:inherit; font-size:15px;
  color:var(--tekst); background:var(--vlak);
  border:1px solid var(--lijn); border-radius:8px;
}
.zoekbalk__form input:focus,
.zoekbalk__form select:focus{ outline:0; border-color:var(--merk); }
.zoekbalk__form button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border:0; border-radius:8px; cursor:pointer;
  background:var(--merk); color:#fff;
  font-family:var(--font-kop); font-weight:700; font-size:15px;
}
.zoekbalk__form button:hover{ background:var(--merk-donker,#d43f18); }
.zoekbalk__form svg{ width:18px; height:18px; }

/* ---------------- pluspunten ---------------- */
.uspbalk{ padding:26px 0 8px; }
.uspbalk__binnen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px 26px;
}
.uspbalk__punt{ display:flex; align-items:flex-start; gap:11px; }
.uspbalk__punt svg{ width:20px; height:20px; color:var(--merk); flex:0 0 20px; margin-top:2px; }
.uspbalk__punt strong{ display:block; font-family:var(--font-kop); font-size:14.5px; color:var(--donker); }
.uspbalk__punt em{ display:block; font-style:normal; font-size:13px; color:var(--grijs); }

/* ---------------- algemene blokken ---------------- */
.blok{ padding:52px 0; }
.blok--zacht{ background:var(--merk-vleug,#fef9f7); }
.blok--midden{ text-align:center; }
.blok__kop{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:18px; flex-wrap:wrap; margin-bottom:22px;
}
.blok__kop h2{ font-size:clamp(22px,2.6vw,30px); margin:0; }
.blok__label{
  margin:0 0 4px; font-size:12.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--merk);
}
.blok__meer,
.blok__midmeer a,
.groep__meer{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:14px; font-weight:600; color:var(--merk);
}
.blok__meer:hover,
.groep__meer:hover{ text-decoration:underline; }
.blok__meer svg,
.blok__midmeer svg,
.groep__meer svg{ width:16px; height:16px; }
.blok__midkop{ font-size:clamp(22px,2.8vw,30px); margin:0 0 32px; }
.blok__midkop span{ color:var(--merk); }
.blok__midmeer{ margin:26px 0 0; }

/* ---------------- carrousel ---------------- */
.carrousel{ position:relative; min-width:0; max-width:100%; }
.carrousel__spoor{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:4px 2px 12px;
  scrollbar-width:none; min-width:0;
}
.carrousel__spoor::-webkit-scrollbar{ display:none; }
.carrousel__spoor > *{ scroll-snap-align:start; flex:0 0 auto; }
.carrousel__pijl{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid var(--lijn); background:var(--vlak); color:var(--donker);
  display:grid; place-items:center; box-shadow:var(--schaduw);
}
.carrousel__pijl:hover{ border-color:var(--merk); color:var(--merk); }
.carrousel__pijl svg{ width:18px; height:18px; }
.carrousel__pijl--links{ left:-14px; }
.carrousel__pijl--rechts{ right:-14px; }
.carrousel__pijl[hidden]{ display:none; }

/* uitgelichte artiesten */
.spot{
  position:relative; width:214px; aspect-ratio:3 / 4;
  border-radius:12px; overflow:hidden; text-decoration:none;
  background:var(--diep); display:block;
}
.spot img{ width:100%; height:100%; object-fit:cover; display:block; }
.spot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,18,23,.94) 24%, rgba(16,18,23,0) 66%);
}
.spot__tekst{ position:absolute; left:14px; right:14px; bottom:13px; z-index:1; }
.spot__naam{
  display:block; font-family:var(--font-kop); font-weight:700;
  font-size:16px; line-height:1.2; color:#fff; text-transform:uppercase;
}
.spot__genre{ display:block; font-size:12.5px; color:rgba(255,255,255,.7); margin-top:3px; }
.spot__prijs{ display:block; font-size:13px; color:#fff; margin-top:5px; }

/* ---------------- stappen ---------------- */
.stapreeks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px;
  position:relative;
}
.stapreeks li{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.stapreeks__ring{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--merk-zacht,#feede9); color:var(--merk); margin-bottom:12px;
}
.stapreeks__ring svg{ width:24px; height:24px; }
.stapreeks__nr{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--merk); color:#fff; margin:-32px 0 16px 44px;
  font-family:var(--font-kop); font-weight:700; font-size:13px;
}
.stapreeks__kop{ font-family:var(--font-kop); font-weight:700; font-size:17px; color:var(--donker); }
.stapreeks__tekst{ font-size:14px; line-height:1.6; color:var(--grijs); margin-top:6px; max-width:32ch; }

/* ---------------- hoofdcategorieblokken ---------------- */
.groep{ padding:46px 0; }
.groep--gestreept{ background:var(--merk-vleug,#fef9f7); }
.groep__binnen{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:34px; align-items:center; }
.groep__ring{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--merk-zacht,#feede9); color:var(--merk); margin-bottom:14px;
}
.groep__ring svg{ width:21px; height:21px; }
.groep__label{
  margin:0 0 6px; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--merk);
}
.groep__tekst h2{ font-size:clamp(20px,2.2vw,26px); margin:0 0 12px; line-height:1.2; }
.groep__intro{ font-size:14.5px; line-height:1.65; color:var(--grijs); margin:0 0 14px; }

.carrousel--klein .carrousel__spoor{ gap:14px; }
.catblok{
  position:relative; width:176px; aspect-ratio:1 / 1;
  border-radius:11px; overflow:hidden; text-decoration:none;
  background:var(--diep); display:block;
}
.catblok img{ width:100%; height:100%; object-fit:cover; display:block; }
.catblok::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,18,23,.9) 26%, rgba(16,18,23,0) 68%);
}
.catblok__tekst{ position:absolute; left:13px; right:13px; bottom:11px; z-index:1; }
.catblok__naam{
  display:block; font-family:var(--font-kop); font-weight:700; font-size:15px; color:#fff;
}
.catblok__aantal{ display:block; font-size:12px; color:rgba(255,255,255,.72); margin-top:2px; }

/* ---------------- soorten evenementen ---------------- */
.eventlijst{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:12px;
}
.eventlijst a{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:18px 8px; text-decoration:none;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:11px;
  font-size:13px; color:var(--donker);
  transition:border-color .16s ease, transform .16s ease;
}
.eventlijst a:hover{ border-color:var(--merk); transform:translateY(-2px); }
.eventlijst svg{ width:24px; height:24px; color:var(--merk); }

/* ---------------- populaire artiesten ---------------- */
.popreeks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.pop{
  position:relative; aspect-ratio:4 / 3; border-radius:11px; overflow:hidden;
  text-decoration:none; background:var(--diep); display:block;
}
.pop img{ width:100%; height:100%; object-fit:cover; display:block; }
.pop::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,18,23,.92) 26%, rgba(16,18,23,0) 70%);
}
.pop__tekst{ position:absolute; left:13px; right:13px; bottom:11px; z-index:1; }
.pop__naam{ display:block; font-family:var(--font-kop); font-weight:700; font-size:15px; color:#fff; }
.pop__prijs{ display:block; font-size:12.5px; color:rgba(255,255,255,.8); margin-top:2px; }

/* ---------------- playlistband ---------------- */
.playlistband{ position:relative; background:var(--diep); color:#fff; padding:52px 0; overflow:hidden; }
.playlistband__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.playlistband--beeld::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,18,23,.95) 0%, rgba(16,18,23,.7) 60%, rgba(16,18,23,.35) 100%);
}
.playlistband__binnen{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:38px; align-items:center;
}
.playlistband__label{
  margin:0 0 8px; font-size:12.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--merk);
}
.playlistband__tekst h2{ font-size:clamp(24px,3vw,34px); margin:0 0 14px; color:#fff; line-height:1.15; }
.playlistband__tekst h2 span{ color:var(--merk); }
.playlistband__intro{ font-size:15px; line-height:1.7; color:rgba(255,255,255,.82); margin:0 0 22px; max-width:44ch; }
.playlistband__speler iframe{
  display:block; width:100%; height:352px; border:0; border-radius:12px;
}

/* ---------------- waarom ---------------- */
.waarom{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:34px; align-items:center; text-align:left; }
.waarom__punten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:22px; }
.waarom__punt{ display:flex; flex-direction:column; gap:5px; }
.waarom__punt svg{ width:24px; height:24px; color:var(--merk); }
.waarom__punt strong{ font-family:var(--font-kop); font-size:14.5px; color:var(--donker); }
.waarom__punt span{ font-size:13px; line-height:1.55; color:var(--grijs); }

.ervaring{
  position:relative; padding:26px 40px; text-align:center;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
}
.ervaring__sterren{ margin:0 0 12px; color:#f0a623; display:flex; gap:3px; justify-content:center; }
.ervaring__sterren svg{ width:17px; height:17px; fill:currentColor; }
.ervaring blockquote{ margin:0 0 12px; font-size:14.5px; line-height:1.7; color:var(--lees); }
.ervaring figcaption{ font-size:13px; color:var(--grijs); }
.ervaring__pijl{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid var(--lijn); background:var(--vlak); color:var(--donker);
  display:grid; place-items:center;
}
.ervaring__pijl:hover{ border-color:var(--merk); color:var(--merk); }
.ervaring__pijl svg{ width:15px; height:15px; }
.ervaring__pijl--links{ left:8px; }
.ervaring__pijl--rechts{ right:8px; }

/* ---------------- vragen ---------------- */
.homevragen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.homevragen .vraag{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:10px; padding:0;
}
.homevragen summary{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 18px; cursor:pointer; list-style:none;
  font-family:var(--font-kop); font-weight:700; font-size:15px; color:var(--donker);
}
.homevragen summary::-webkit-details-marker{ display:none; }
.homevragen summary svg{ width:18px; height:18px; color:var(--merk); flex:0 0 18px; transition:transform .18s ease; }
.homevragen .vraag[open] summary svg{ transform:rotate(180deg); }
.homevragen .vraag p{ margin:0; padding:0 18px 16px; font-size:14px; line-height:1.7; color:#4b5261; }

/* ---------------- slotbalk ---------------- */
.ctaband{ position:relative; background:var(--diep); color:#fff; padding:52px 0; overflow:hidden; }
.ctaband__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
.ctaband--beeld::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,18,23,.95) 0%, rgba(16,18,23,.66) 100%);
}
.ctaband__binnen{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center; gap:26px; flex-wrap:wrap;
}
.ctaband h2{ font-size:clamp(22px,2.8vw,32px); margin:0 0 8px; color:#fff; line-height:1.2; max-width:20ch; }
.ctaband h2 span{ color:var(--merk); }
.ctaband p{ margin:0; color:rgba(255,255,255,.82); font-size:15px; }
.ctaband__knoppen{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------------- smaller scherm ---------------- */
@media (max-width:980px){
  .zoekbalk__form{ grid-template-columns:1fr 1fr; }
  .zoekbalk__form input{ grid-column:1 / -1; }
  .zoekbalk__form button{ grid-column:1 / -1; }
  .groep__binnen{ grid-template-columns:1fr; gap:22px; }
  .playlistband__binnen{ grid-template-columns:1fr; }
  .waarom{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hero-home{ padding:52px 0 74px; }
  .zoekbalk__form{ grid-template-columns:1fr; }
  .carrousel__pijl--links{ left:-6px; }
  .carrousel__pijl--rechts{ right:-6px; }
  .spot{ width:170px; }
  .catblok{ width:148px; }
  .ctaband__binnen{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------------------
   Donkere modus, aanvulling
   ---------------------------------------------------------------------
   Op de meeste plekken staan variabelen, dus die passen zich vanzelf
   aan. Hieronder de plekken waar nog een vaste kleur stond: witte
   vlakken en donkergrijze tekst zijn op een donkere achtergrond
   onleesbaar. */
[data-thema="donker"] .balk,
[data-thema="donker"] .menu__paneel,
[data-thema="donker"] .filters,
[data-thema="donker"] .zoekvak,
[data-thema="donker"] .sorteervak,
[data-thema="donker"] .weergavekiezer,
[data-thema="donker"] .prijslijst,
[data-thema="donker"] .hulpkaart,
[data-thema="donker"] .vraag,
[data-thema="donker"] .ervaring,
[data-thema="donker"] .eventlijst a,
[data-thema="donker"] .zoekbalk__form,
[data-thema="donker"] .zoekbalk__form input,
[data-thema="donker"] .zoekbalk__form select,
[data-thema="donker"] .homevragen .vraag{
  background:var(--vlak); color:var(--tekst); border-color:var(--lijn);
}

[data-thema="donker"] .kaart__feiten li,
[data-thema="donker"] .prijslijst__vorm,
[data-thema="donker"] .prijslijst .kol-uitvoering,
[data-thema="donker"] .prijslijst .kol-techniek,
[data-thema="donker"] .homevragen .vraag p,
[data-thema="donker"] .ervaring blockquote,
[data-thema="donker"] .waarom__punt span,
[data-thema="donker"] .stapreeks__tekst,
[data-thema="donker"] .groep__intro,
[data-thema="donker"] .formveld label,
[data-thema="donker"] .contactblok__lijst a{
  color:#b9bfca;
}

/* De blokken met een zachte merkachtergrond worden op donker gewoon
   een tint donkerder dan de rest, anders lopen ze in elkaar over. */
[data-thema="donker"] .blok--zacht,
[data-thema="donker"] .groep--gestreept,
[data-thema="donker"] .categorieen{ background:#191c23; }

/* De hero en de slotbalk waren al donker; daar hoeft niets te veranderen.
   Alleen de scheidingslijn eronder mag wat rustiger. */
[data-thema="donker"] .zoekbalk__form{ box-shadow:0 12px 36px rgba(0,0,0,.5); }

/* Tabellen */
[data-thema="donker"] .prijslijst th,
[data-thema="donker"] .prijslijst td{ border-color:var(--lijn); }
[data-thema="donker"] .prijslijst tbody tr:hover{ background:rgba(255,255,255,.04); }

/* Links naar andere plekken waar een artiest staat */
.linklijst{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.linklijst a{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 15px; text-decoration:none;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:9px;
  font-size:14px; font-weight:600; color:var(--donker);
  transition:border-color .16s ease, color .16s ease;
}
.linklijst a:hover{ border-color:var(--merk); color:var(--merk); }
.linklijst svg{ width:17px; height:17px; }
.linklijst__pijl{ width:14px; height:14px; opacity:.5; }

/* ---------------------------------------------------------------------
   Advies: andere artiesten die je misschien ook interesseren
   ---------------------------------------------------------------------
   Staat bewust in een eigen kaart, los van de artiest zelf. In dezelfde
   kaart als zijn biografie en tarieven lijkt het alsof deze artiesten
   iets met hem te maken hebben, en dat is niet zo: het is een tip. */
.adviesblok{
  background:var(--vlak); border-radius:14px;
  padding:28px 30px 30px; margin:0 0 44px;
  box-shadow:0 10px 34px rgba(24,28,38,.07);
}
.adviesblok__kop{
  font-family:var(--font-kop); font-size:14px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--donker);
  margin:0 0 20px;
}
.adviesblok__bij{ color:var(--grijs); }

[data-thema="donker"] .adviesblok{ background:var(--vlak); box-shadow:0 10px 34px rgba(0,0,0,.4); }

@media (max-width:640px){
  .adviesblok{ padding:22px 18px 24px; margin-bottom:32px; }
}

.adviesband{ background:var(--merk-vleug,#fef9f7); padding:1px 0; }

/* Een leeg vakje in de optietabel */
.optietabel__leeg{ color:var(--grijs); }

/* =====================================================================
   De programmaplanner
   ===================================================================== */
.planner{ padding:8px 0 60px; background:var(--merk-vleug,#fef9f7); }
.plannerkop{ max-width:60ch; margin:0 0 26px; }
.plannerkop h1{ font-size:clamp(26px,3.4vw,38px); margin:0 0 10px; }
.plannerkop p{ font-size:15.5px; line-height:1.7; color:var(--grijs); margin:0; }

.plannerraster{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:22px; align-items:start; }
.plannerzijkant{ position:sticky; top:16px; display:flex; flex-direction:column; gap:16px; }

.plannerkaart{
  background:var(--vlak); border:1px solid var(--lijn);
  border-radius:14px; padding:20px 22px;
}
.plannerkaart--breed{ margin-bottom:16px; padding:0; }
.plannerkaart--breed > .plannerkaart__kop,
.plannerkaart--breed > .plannerhint,
.plannerkaart--breed > .plannerslot{ padding-left:22px; padding-right:22px; }
.plannerkaart h2{ font-size:17px; margin:0 0 14px; }
.plannerkaart__kop{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:20px 22px 14px; border-bottom:1px solid var(--lijn);
}
.plannerkaart__kop h2{ margin:0; }
.plannertelling{ font-size:13px; color:var(--grijs); }
.plannerhint{ font-size:13px; line-height:1.6; color:var(--grijs); margin:12px 0 0; }

.plannerveld{ margin-bottom:12px; }
.plannerveld label{
  display:block; font-size:13px; font-weight:600; color:var(--donker); margin-bottom:5px;
}
.plannerveld input{
  width:100%; padding:11px 13px; font:inherit; font-size:15px;
  color:var(--tekst); background:var(--vlak);
  border:1px solid var(--lijn); border-radius:9px;
}
.plannerveld input[type="number"]{ width:96px; display:inline-block; }
.plannerveld input:focus{ outline:0; border-color:var(--merk); }

.plannerknop{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 18px; margin-top:4px;
  border:1px solid transparent; border-radius:9px; cursor:pointer;
  font-family:var(--font-kop); font-weight:700; font-size:14.5px;
  text-decoration:none; text-align:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.plannerknop--merk{ background:var(--merk); color:#fff; }
.plannerknop--merk:hover{ background:var(--merk-donker,#d43f18); color:#fff; }
.plannerknop--rand{ background:transparent; color:var(--donker); border-color:var(--lijn); }
.plannerknop--rand:hover{ border-color:var(--merk); color:var(--merk); }
.plannerknop--stil{
  background:transparent; color:var(--grijs); border-color:transparent;
  font-weight:600; font-size:13.5px;
}
.plannerknop--stil:hover{ color:var(--merk); }

/* zoeken */
.plannerzoek{ margin-top:10px; }
.plannerzoek__rij{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 11px; cursor:pointer; text-align:left;
  background:var(--vlak); border:1px solid var(--lijn); border-top:0;
}
.plannerzoek__rij:first-child{ border-top:1px solid var(--lijn); border-radius:9px 9px 0 0; }
.plannerzoek__rij:last-child{ border-radius:0 0 9px 9px; }
.plannerzoek__rij:only-child{ border-radius:9px; }
.plannerzoek__rij:hover{ border-color:var(--merk); background:var(--merk-zacht,#feede9); }
.plannerzoek__rij img,
.plannerzoek__leeg{
  width:38px; height:38px; flex:0 0 38px; border-radius:8px;
  object-fit:cover; background:var(--beeldvlak);
}
.plannerzoek__rij strong{ display:block; font-size:14px; color:var(--donker); }
.plannerzoek__rij em{ display:block; font-style:normal; font-size:12px; color:var(--grijs); }

/* wat gaan ze spelen */
.plannerkeuze{ margin-top:16px; padding-top:16px; border-top:1px solid var(--lijn); }
.plannerkeuze h3{ font-size:15px; margin:0 0 4px; }
.planneroptie{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; margin-bottom:8px;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:10px;
  transition:border-color .15s ease, background .15s ease;
}
.planneroptie:hover{ border-color:var(--merk); background:var(--merk-zacht,#feede9); }
.planneroptie strong{ display:block; font-family:var(--font-kop); font-size:15px; color:var(--donker); }
.planneroptie span{ display:block; font-size:12.5px; color:var(--grijs); margin-top:3px; }

/* het programma */
.planregels{ padding:12px; }
.planregel{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; margin-bottom:7px;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:11px;
}
.planregel--sleept{ opacity:.4; }
.planregel--doel{ border-color:var(--merk); box-shadow:0 0 0 2px var(--merk-zacht,#feede9); }
.planregel--pauze{ border-style:dashed; background:transparent; }
.planregel__greep{ color:#c3c9d3; cursor:grab; flex:0 0 auto; }
.planregel__greep svg{ width:16px; height:16px; }
.planregel__tijd{
  flex:0 0 128px; text-align:center;
  font-family:var(--font-kop); font-weight:700; font-size:13.5px; color:var(--donker);
  background:var(--merk-vleug,#fef4f1); border-radius:8px; padding:6px 10px;
}
.planregel--pauze .planregel__tijd{ background:transparent; color:var(--grijs); font-weight:400; }
.planregel__wat{ flex:1 1 auto; min-width:0; }
.planregel__titel{ display:block; font-size:15px; color:var(--donker); }
.planregel__bij{ display:block; font-size:12px; color:var(--grijs); margin-top:2px; }
.planregel__duur{ flex:0 0 auto; display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--grijs); }
.planregel__duur input{
  width:70px; padding:7px 9px; font-size:13.5px; text-align:right;
  border:1px solid var(--lijn); border-radius:7px;
  background:var(--vlak); color:var(--tekst);
}
.planregel__prijs{
  flex:0 0 auto; display:flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--grijs);
}
.planregel__prijs input{
  width:82px; padding:6px 8px; font:inherit; font-size:13.5px; text-align:right;
  color:var(--tekst); background:var(--vlak);
  border:1px solid var(--lijn); border-radius:7px;
}
.planregel__prijs input:focus{ outline:0; border-color:var(--merk); }
.plannereuro{ margin-right:5px; font-size:13.5px; color:var(--grijs); }
.plannerveld .plannereuro + input{ width:120px; display:inline-block; text-align:right; }

.planregel__weg{
  flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--lijn); border-radius:8px; background:var(--vlak);
  color:var(--grijs); cursor:pointer;
}
.planregel__weg:hover{ border-color:var(--fout-tekst); color:var(--fout-tekst); }
.planregel__weg svg{ width:15px; height:15px; }

.plannerleeg{ text-align:center; padding:44px 20px 52px; color:var(--grijs); }
.plannerleeg svg{ width:34px; height:34px; color:#c3c9d3; margin-bottom:12px; }
.plannerleeg p{ margin:0; font-size:14.5px; line-height:1.7; }

/* meldingen */
.plannermeldingen:not(:empty){ margin-bottom:16px; }
.plannermelding{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; margin-bottom:8px; border-radius:11px;
  font-size:14px; line-height:1.6;
}
.plannermelding svg{ width:19px; height:19px; flex:0 0 19px; margin-top:1px; }
.plannermelding p{ margin:0; }
.plannermelding--fout{ background:var(--fout-vlak); border:1px solid var(--fout-lijn); color:var(--fout-tekst); }
.plannermelding--let{ background:var(--let-vlak); border:1px solid var(--let-lijn); color:var(--let-tekst); }

/* kosten */
.plannerkosten{ width:100%; border-collapse:collapse; }
.plannerkosten th,
.plannerkosten td{ padding:12px 22px; text-align:left; font-size:14.5px; }
.plannerkosten thead th{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grijs); border-bottom:1px solid var(--lijn);
}
.plannerkosten tbody td{ border-bottom:1px solid var(--lijn); }
.plannerkosten tbody tr:last-child td{ border-bottom:0; }
.plannerkosten tbody a{ color:var(--donker); text-decoration:none; font-weight:600; }
.plannerkosten tbody a:hover{ color:var(--merk); text-decoration:underline; }
.plannerkosten__geld{ text-align:right; white-space:nowrap; }
.plannerkosten tfoot th,
.plannerkosten tfoot td{ font-family:var(--font-kop); font-weight:700; color:var(--donker); }
.plannerkosten em{ font-style:normal; color:var(--grijs); font-weight:400; font-size:13px; }

.plannerslot{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:4px 22px 22px; }
.plannerslot .plannerknop{ width:auto; }

/* De boekingen zitten in de kostenkaart, direct onder de kop. */
.plannerboekingen .plannerkosten thead th{ border-top:0; }

/* Die kaart staat los onder het programma, met wat lucht ertussen. */
.plannerkaart--totaal{ margin-top:26px; }
.plannertotaal{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
  padding:16px 22px; border-top:1px solid var(--lijn);
}
.plannertotaal__wat{
  font-family:var(--font-kop); font-weight:700; font-size:17px; color:var(--donker);
}
.plannertotaal__wat em,
.bekijkregel__wat em,
.bekijkbtw{
  font-family:var(--font-tekst); font-style:normal; font-weight:400;
  font-size:12.5px; color:var(--grijs); margin-left:4px;
}

/* BUMA: een vinkje en twee regels, bewust rustig — het is een extra,
   geen onderdeel van de opzet. */
.plannerbuma{ padding:0 22px 4px; }
.plannerbuma__keuzes{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.plannerbuma__keuze{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13.5px; color:var(--donker);
}
.plannerbuma__uit{ margin-bottom:12px; padding-bottom:10px; border-bottom:1px dashed var(--lijn); }
.plannerbuma__rij,
.bekijkbuma__rij{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:5px 0; font-size:14px; color:var(--lees,var(--tekst));
}
.plannerbuma__rij--som,
.bekijkbuma__rij--som{
  font-family:var(--font-kop); font-weight:700; font-size:15.5px; color:var(--donker);
}
.plannerbuma__rij--som em,
.bekijkbuma__rij--som em{
  font-family:var(--font-tekst); font-style:normal; font-weight:400;
  font-size:12.5px; color:var(--grijs); margin-left:4px;
}
.plannertotaal__geld{
  font-family:var(--font-kop); font-weight:700; font-size:26px;
  color:var(--merk); white-space:nowrap;
}
.plannertotaal__geld em{ font-style:normal; font-size:13px; color:var(--grijs); font-weight:400; }

@media (max-width:1000px){
  .plannerraster{ grid-template-columns:1fr; }
  .plannerzijkant{ position:static; }
}
@media (max-width:620px){
  .planregel{ flex-wrap:wrap; gap:10px; }
  .planregel__tijd{ flex:0 0 auto; }
  .planregel__wat{ flex:1 1 100%; order:3; }
  .plannerkosten th,
  .plannerkosten td{ padding:11px 14px; font-size:13.5px; }
}

/* Kaarten en knopjes die de planner zelf aan- en uitzet. Een eigen
   display-regel wint anders van het hidden-attribuut. */
.plannerkaart[hidden],
.plannerklein[hidden],
.plannerbewaard[hidden]{ display:none; }

/* De planner: account, projecten en programma's */
.plannerkaart--account{ border-color:var(--merk-lijn,#f7c7b8); }
.plannerknoppen{ display:flex; gap:8px; }
.plannerknoppen .plannerknop{ margin-top:8px; }

.plannerwie{ display:flex; align-items:center; gap:11px; }
.plannerwie__bol{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:grid; place-items:center; background:var(--merk); color:#fff;
  font-family:var(--font-kop); font-weight:700; font-size:15px;
}
.plannerwie strong{ display:block; font-size:14.5px; color:var(--donker); }
.plannerwie em{ display:block; font-style:normal; font-size:12.5px; color:var(--grijs); }
.plannerwie__uit{
  margin-left:auto; width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--lijn); border-radius:8px; background:var(--vlak);
  color:var(--grijs); cursor:pointer;
}
.plannerwie__uit:hover{ border-color:var(--merk); color:var(--merk); }
.plannerwie__uit svg{ width:16px; height:16px; }

.plannerform{ margin-top:14px; padding-top:14px; border-top:1px solid var(--lijn); }
.plannerform h3{ font-size:15px; margin:0 0 12px; }
.plannerrij{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.plannerfout{
  margin:0 0 10px; padding:9px 12px; border-radius:8px;
  background:var(--fout-vlak); border:1px solid var(--fout-lijn); color:var(--fout-tekst); font-size:13px;
}

.plannerkaart__balk{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.plannerkaart__balk h2{ margin:0; }
.plannerkaart__knopjes{ display:flex; gap:6px; flex:0 0 auto; }
.plannerklein{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; font-size:12.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--lijn); border-radius:7px; background:var(--vlak); color:var(--grijs);
}
.plannerklein:hover{ border-color:var(--merk); color:var(--merk); }
.plannerklein svg{ width:13px; height:13px; }

#pl_project{
  width:100%; padding:11px 13px; font:inherit; font-size:14.5px;
  color:var(--tekst); background:var(--vlak);
  border:1px solid var(--lijn); border-radius:9px;
}

.plannerprogrammas{ margin:12px 0; }
.plannerprogramma{
  position:relative; display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; margin-bottom:6px; text-align:left; cursor:pointer;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:9px;
}
.plannerprogramma:hover{ border-color:var(--merk); }
.plannerprogramma--nu{ border-color:var(--merk); background:var(--merk-zacht,#feede9); }
.plannerprogramma__wat{ flex:1 1 auto; min-width:0; }
.plannerprogramma__wat strong{ display:block; font-size:14px; color:var(--donker); }
.plannerprogramma__wat em{ display:block; font-style:normal; font-size:12px; color:var(--grijs); }
.plannerprogramma__aantal{
  flex:0 0 auto; min-width:24px; padding:2px 7px; border-radius:20px;
  background:var(--vlak-zacht); color:var(--grijs); font-size:11.5px; text-align:center;
}
.plannerprogramma__weg{
  flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center;
  border:0; border-radius:7px; background:transparent; color:#c3c9d3; cursor:pointer;
}
.plannerprogramma__weg:hover{ background:var(--fout-vlak); color:var(--fout-tekst); }
.plannerprogramma__weg svg{ width:14px; height:14px; }

.plannerdelen{ margin-top:14px; padding-top:14px; border-top:1px solid var(--lijn); font-size:13.5px; }
.plannerdelen label{ display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--donker); }
.plannerdelen #pl_deellink{ display:flex; gap:7px; margin-top:10px; }
.plannerdelen input[type="text"]{
  flex:1 1 auto; min-width:0; padding:8px 10px; font-size:12.5px;
  border:1px solid var(--lijn); border-radius:7px;
  background:var(--vlak-zacht); color:var(--grijs);
}

/* Een gedeeld project bekijken */
.plannerdeelbron{ font-size:13px; color:var(--grijs); margin:0 0 6px; }
.plannerdeeldag{
  display:block; font-family:var(--font-tekst); font-weight:400;
  font-size:13px; color:var(--grijs); margin-top:3px; text-transform:none; letter-spacing:0;
}
.planregel--lezen{ cursor:default; }
.planregel--lezen .planregel__duur{ flex:0 0 66px; text-align:right; }
.planregel--lezen a{ color:var(--donker); text-decoration:none; font-weight:600; }
.planregel--lezen a:hover{ color:var(--merk); text-decoration:underline; }
.plannerdeeltotaal{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin:0; padding:14px 22px 20px; font-size:14.5px; color:var(--grijs);
}
.plannerdeeltotaal strong{ font-family:var(--font-kop); font-size:17px; color:var(--donker); }

/* Mijn programma's */
.mijnraster{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:22px; align-items:start; }
.mijnleeg{ text-align:center; padding:44px 24px; }
.mijnleeg svg{ width:38px; height:38px; color:#c3c9d3; margin-bottom:14px; }
.mijnleeg h1, .mijnleeg h2{ font-size:21px; margin:0 0 8px; }
.mijnleeg .plannerknop{ max-width:260px; margin:16px auto 0; }

.mijngegevens{ margin-top:16px; padding-top:14px; border-top:1px solid var(--lijn); }
.mijngegevens summary{
  cursor:pointer; font-size:13.5px; font-weight:600; color:var(--merk); list-style:none;
}
.mijngegevens summary::-webkit-details-marker{ display:none; }
.mijngegevens summary::before{ content:'\\2699\\FE0F  '; }
.mijngegevens .plannerform{ border-top:0; padding-top:10px; }

.mijnproject{ margin-bottom:18px; }
.mijnlijst{ list-style:none; margin:0; padding:0; }
.mijnlijst li{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 22px; border-bottom:1px solid var(--lijn);
}
.mijnlijst li:last-child{ border-bottom:0; }
.mijnlijst__wat{ flex:1 1 240px; min-width:0; }
.mijnlijst__wat strong{ display:block; font-size:15px; color:var(--donker); }
.mijnlijst__wat em{ display:block; font-style:normal; font-size:12.5px; color:var(--grijs); margin-top:2px; }
.mijnlijst__acties{ display:flex; gap:6px; flex:0 0 auto; }

.mijnicoon{
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--lijn); border-radius:8px;
  background:var(--vlak); color:var(--grijs); text-decoration:none;
  transition:border-color .14s ease, color .14s ease;
}
.mijnicoon:hover{ border-color:var(--merk); color:var(--merk); }
.mijnicoon svg{ width:16px; height:16px; }
.mijnicoon--weg:hover{ border-color:var(--fout-tekst); color:var(--fout-tekst); }

.mijnproject__voet{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 22px 18px; border-top:1px solid var(--lijn);
}
.mijnproject__voet .plannerknop{ width:auto; margin:0; }
.mijndelen{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--donker); }
.mijndelen svg{ width:15px; height:15px; color:var(--merk); }
.mijndelen--uit{ color:var(--grijs); }
.mijndelen--uit svg{ color:var(--grijs); }
.mijndelen a{ color:var(--merk); }

.mijnbalk{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.mijnbalk .plannerknop{ width:auto; margin:0; }

.plannermelding--goed{ background:var(--goed-vlak); border:1px solid var(--goed-lijn); color:var(--goed-tekst); }

@media (max-width:900px){
  .mijnraster{ grid-template-columns:1fr; }
}

/* Afdrukken en opslaan als PDF */
@media print{
  .balk, .voet, .kruimels, .geenprint, .plannerhint{ display:none !important; }
  .planner{ background:#fff; padding:0; }
  .plannerkaart{ border:0; padding:0; }
  .plannerkaart__kop{ border-bottom:2px solid #222; padding-left:0; padding-right:0; }
  .planregels{ padding:0; }
  .planregel{ border:0; border-bottom:1px solid #ddd; border-radius:0; padding:8px 0; }
  .planregel__tijd{ background:transparent; }
  .plannerdeeltotaal{ padding-left:0; padding-right:0; border-top:2px solid #222; }
  .plannerkop h1{ font-size:22pt; }
  a{ text-decoration:none; color:#000; }
}

/* =====================================================================
   Mijn account
   ===================================================================== */
.accountknopje{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--lijn); background:var(--vlak); color:var(--tekst);
  text-decoration:none; transition:border-color .16s ease, color .16s ease;
}
.accountknopje:hover{ border-color:var(--merk); color:var(--merk); }
.accountknopje svg{ width:19px; height:19px; }
.accountknopje--aan{ border-color:var(--merk); background:var(--merk); color:#fff; }
.accountknopje--aan:hover{ background:var(--merk-donker,#d43f18); color:#fff; }
.accountknopje__letters{ font-family:var(--font-kop); font-weight:700; font-size:13px; }

.account{ padding:8px 0 60px; background:var(--merk-vleug,#fef9f7); }
.accountkop{ max-width:56ch; margin:0 0 26px; }
.accountkop h1{ font-size:clamp(28px,3.6vw,40px); margin:0 0 10px; }
.accountkop p{ font-size:15.5px; line-height:1.7; color:var(--grijs); margin:0; }

.accountmelding{
  padding:13px 17px; border-radius:10px; margin:0 0 20px; font-size:14.5px;
}
.accountmelding--goed{ background:var(--goed-vlak); border:1px solid var(--goed-lijn); color:var(--goed-tekst); }
.accountmelding--fout{ background:var(--fout-vlak); border:1px solid var(--fout-lijn); color:var(--fout-tekst); }

.accountraster{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:22px; align-items:start; }
.accountzij{ position:sticky; top:16px; display:flex; flex-direction:column; gap:16px; }

.accountmenu,
.accounthulp{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:14px; padding:20px 18px;
}
.accountmenu h2,
.accounthulp h2{ font-size:16px; margin:0 0 14px; padding:0 6px; }
.accountmenu ul{ list-style:none; margin:0; padding:0; }
.accountmenu a{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:9px; text-decoration:none;
  font-size:14.5px; color:var(--tekst);
  transition:background .14s ease, color .14s ease;
}
.accountmenu a:hover{ background:var(--merk-vleug,#fef4f1); color:var(--merk); }
.accountmenu a svg{ width:17px; height:17px; color:var(--grijs); }
.accountmenu a:hover svg{ color:var(--merk); }
.accountmenu--nu{ background:var(--merk-zacht,#feede9); color:var(--merk); font-weight:600; }
.accountmenu--nu svg{ color:var(--merk); }
.accountmenu--uit{ color:var(--grijs); }

.accounthulp p{ font-size:13.5px; color:var(--grijs); margin:0 0 10px; padding:0 6px; }
.accounthulp a{
  display:block; padding:0 6px 5px; font-size:14px;
  color:var(--merk); text-decoration:none; font-weight:600;
}
.accounthulp a:hover{ text-decoration:underline; }

.accountwerkvlak{ display:flex; flex-direction:column; gap:16px; }
.accountkaart{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:14px; overflow:hidden;
}
.accountkaart > h2,
.accountkaart > p,
.accountkaart > form{ padding:0 22px; }
.accountkaart > h2{ padding-top:20px; }
.accountkaart > form{ padding-bottom:22px; }
.accountkaart__kop{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:18px 22px; border-bottom:1px solid var(--lijn);
}
.accountkaart__kop h2{ font-size:18px; margin:0; }
.accountperiode{
  display:block; font-family:var(--font-tekst); font-weight:400;
  font-size:13px; color:var(--grijs); margin-top:3px;
}
.accountlink{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--merk); text-decoration:none;
}
.accountlink:hover{ text-decoration:underline; }
.accountlink svg{ width:15px; height:15px; }
.accountknop{
  display:inline-flex; align-items:center; padding:9px 16px; border-radius:8px;
  background:var(--merk); color:#fff; text-decoration:none;
  font-family:var(--font-kop); font-weight:700; font-size:13.5px; white-space:nowrap;
}
.accountknop:hover{ background:var(--merk-donker,#d43f18); color:#fff; }

.accountgegevens{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:20px; margin:0; padding:20px 22px;
}
.accountgegevens dt{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--grijs); margin-bottom:5px;
}
.accountgegevens dt svg{ width:14px; height:14px; }
.accountgegevens dd{ margin:0; font-size:15px; color:var(--donker); }
.accountleeg{ color:var(--grijs); font-style:italic; font-size:14px; }

.accountform{ padding:20px 22px 22px; }
.accountform .plannerknop{ margin-top:8px; }

.accounttabelvak{ overflow-x:auto; }
.accounttabel{ width:100%; border-collapse:collapse; }
.accounttabel th,
.accounttabel td{ padding:13px 22px; text-align:left; font-size:14px; white-space:nowrap; }
.accounttabel thead th{
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--grijs); border-bottom:1px solid var(--lijn);
}
.accounttabel tbody td{ border-bottom:1px solid var(--lijn); }
.accounttabel tbody tr:last-child td{ border-bottom:0; }
.accounttabel td:first-child{ display:flex; align-items:center; gap:11px; }
.accountdag{
  width:34px; height:34px; flex:0 0 34px; border-radius:9px;
  display:grid; place-items:center;
  background:var(--merk-zacht,#feede9); color:var(--merk);
}
.accountdag svg{ width:16px; height:16px; }
.accountnaam{ font-weight:600; color:var(--donker); }
.accountklein{ font-size:12px; color:var(--grijs); }
.accounttabel__geld{ text-align:right; }
.accounttabel__acties{ text-align:right; }
.accounttabel__acties a{
  display:inline-grid; place-items:center; width:32px; height:32px; margin-left:5px;
  border:1px solid var(--lijn); border-radius:8px;
  color:var(--grijs); text-decoration:none;
}
.accounttabel__acties a:hover{ border-color:var(--merk); color:var(--merk); }
.accounttabel__acties svg{ width:15px; height:15px; }

.accountleegtekst{ padding:22px; margin:0; color:var(--grijs); font-size:14.5px; }
.accountdeel{
  display:flex; align-items:center; gap:9px;
  margin:0; padding:14px 22px; border-top:1px solid var(--lijn);
  font-size:13.5px; color:var(--grijs);
}
.accountdeel svg{ width:15px; height:15px; color:var(--merk); }

.accountkaart--leeg{ text-align:center; padding:48px 24px 52px; }
.accountkaart--leeg svg{ width:36px; height:36px; color:#c3c9d3; margin-bottom:14px; }
.accountkaart--leeg h2{ font-size:20px; margin:0 0 8px; padding:0; }
.accountkaart--leeg p{ max-width:46ch; margin:0 auto 20px; color:var(--grijs); line-height:1.7; }
.accountkaart--leeg .plannerknop{ margin:0 auto; }

@media (max-width:1000px){
  .accountraster{ grid-template-columns:1fr; }
  .accountzij{ position:static; }
}

/* =====================================================================
   Mijn account — de programmatabel, offertes, favorieten
   ===================================================================== */

/* Het aantal achter een menu-item. */
.accountmenu a{ position:relative; }
.accountmenu__aantal{
  margin-left:auto; font-style:normal; font-size:11.5px; font-weight:600;
  min-width:20px; padding:1px 6px; border-radius:20px; text-align:center;
  background:var(--merk-vleug,#fef4f1); color:var(--grijs);
}
.accountmenu--nu .accountmenu__aantal{ background:#fff; color:var(--merk); }

/* De naam met het type eronder, zoals in de programmatabel. */
.accountnaam{ display:block; }
.accountnaam a{ color:var(--donker); text-decoration:none; }
.accountnaam a:hover{ color:var(--merk); }
.accountnaam em{
  display:block; font-style:normal; font-weight:400;
  font-size:12.5px; color:var(--grijs); margin-top:2px;
}

.accounttabel--programmas td{ vertical-align:middle; }

/* ---------- project met zijn programma's eronder ----------
   Elk project is een eigen <tbody>. De programma's staan ingesprongen,
   met een lijntje ervoor, zodat je in één oogopslag ziet wat bij wat
   hoort. */
.accountgroep + .accountgroep{ border-top:2px solid var(--lijn); }
.accountrij--project > td{ border-bottom:0; padding-bottom:9px; }
.accountrij--project .accountnaam a{ font-size:15px; }

.accountrij--programma > td{ border-bottom:0; padding-top:4px; padding-bottom:4px; }
.accountrij--programma > td:first-child{ padding-left:22px; }
.accountrij--programma .accountnaam a{ font-weight:500; font-size:14px; }
.accountrij--programma .accountklein{ opacity:.6; }

/* Het haakje voor een programma: ├ of └ bij de laatste. */
.accounttak{
  position:relative; width:34px; height:26px; flex:0 0 34px; margin-left:6px;
}
.accounttak::before{
  content:''; position:absolute; left:9px; top:-8px; bottom:50%;
  border-left:1px solid var(--lijn);
}
.accounttak::after{
  content:''; position:absolute; left:9px; top:50%; width:13px;
  border-top:1px solid var(--lijn);
}
/* Bij de laatste stopt het lijntje; anders loopt het door naar beneden. */
.accountrij--programma:not(.is-laatste) .accounttak::before{ bottom:-8px; }

/* Zes knopjes op twee niveaus vraagt om ruimte. Deze tabel krijgt dus
   krappere cellen en iets kleinere knopjes dan de andere; anders valt de
   laatste knop buiten beeld en moet je zijwaarts scrollen. */
.accounttabel--programmas th,
.accounttabel--programmas td{ padding-left:14px; padding-right:14px; }
.accounttabel--programmas .accountacties{ gap:4px; }
.accounttabel--programmas .accountacties a,
.accounttabel--programmas .accountacties button{ width:29px; height:29px; margin-left:0; }
.accounttabel--programmas .accountacties svg{ width:14px; height:14px; }

.accountrij--erbij > td{ padding-top:6px; padding-bottom:14px; }
.accounterbij{
  display:inline-flex; align-items:center; gap:7px; margin-left:62px;
  font-size:13px; font-weight:600; color:var(--merk); text-decoration:none;
}
.accounterbij:hover{ text-decoration:underline; }
.accounterbij svg{ width:15px; height:15px; }

/* De rij knopjes achter een programma. */
.accountacties{ display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.accountacties__form{ display:inline-flex; margin:0; padding:0; }
.accountacties a,
.accountacties button{
  display:inline-grid; place-items:center; width:32px; height:32px;
  border:1px solid var(--lijn); border-radius:8px; background:var(--vlak);
  color:var(--grijs); text-decoration:none; cursor:pointer; padding:0;
}
.accountacties a:hover,
.accountacties button:hover{ border-color:var(--merk); color:var(--merk); }
.accountacties__form button:hover{ border-color:var(--fout-tekst); color:var(--fout-tekst); }
.accountacties svg{ width:15px; height:15px; }

/* Meer programma's laden. */
.accountmeer{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 22px; border:0; border-top:1px solid var(--lijn);
  background:transparent; cursor:pointer;
  font-family:var(--font-tekst); font-size:14px; font-weight:600; color:var(--merk);
}
.accountmeer:hover{ background:var(--merk-vleug,#fef4f1); }
.accountmeer svg{ width:16px; height:16px; }

/* Een leeg vak met een uitnodiging. */
.accountleegvak{ text-align:center; padding:44px 24px 48px; }
.accountleegvak svg{ width:36px; height:36px; color:#c3c9d3; margin-bottom:14px; }
.accountleegvak h3{ font-size:19px; margin:0 0 8px; }
.accountleegvak p{ max-width:46ch; margin:0 auto 20px; color:var(--grijs); line-height:1.7; }
.accountleegvak .plannerknop{ margin:0 auto; }

/* De status van een offerte. */
.accountstatus{
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:12px; font-weight:600; text-transform:capitalize;
  background:var(--vlak-zacht); color:var(--grijs);
}
.accountstatus--nieuw{ background:var(--merk-zacht,#feede9); color:var(--merk); }
.accountstatus--bezig{ background:var(--let-vlak); color:var(--let-tekst); }
.accountstatus--klaar{ background:var(--goed-vlak); color:var(--goed-tekst); }

/* Favorieten. */
.accountfavorieten{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px; padding:20px 22px 24px;
}
.accountfavoriet{
  position:relative; display:flex; align-items:center;
  border:1px solid var(--lijn); border-radius:10px; background:var(--vlak);
}
.accountfavoriet:hover{ border-color:var(--merk); }
.accountfavoriet > a{
  display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0;
  padding:10px 12px; text-decoration:none;
}
.accountfavoriet img,
.accountfavoriet__leeg{
  width:46px; height:46px; border-radius:8px; object-fit:cover;
  background:var(--merk-vleug,#fef4f1); flex:0 0 auto;
}
.accountfavoriet strong{ display:block; font-size:14.5px; color:var(--donker); }
.accountfavoriet em{ display:block; font-style:normal; font-size:12px; color:var(--grijs); }
.accountfavoriet form{ margin:0; padding:0 10px 0 0; }
.accountfavoriet__weg{
  display:grid; place-items:center; width:30px; height:30px;
  border:0; border-radius:8px; background:transparent; color:#c3c9d3; cursor:pointer;
}
.accountfavoriet__weg:hover{ background:var(--fout-vlak); color:var(--fout-tekst); }
.accountfavoriet__weg svg{ width:16px; height:16px; }

/* Een tekstvak in de accountformulieren. */
.accountform textarea{
  width:100%; padding:10px 12px; border:1px solid var(--lijn); border-radius:9px;
  font-family:var(--font-tekst); font-size:14.5px; color:var(--donker); background:var(--vlak);
  resize:vertical;
}
.accountform textarea:focus{ outline:0; border-color:var(--merk); }

/* =====================================================================
   Een programma bekijken
   ===================================================================== */
.bekijkkop{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; margin:0 0 22px;
}
.bekijkkop h1{ font-size:clamp(24px,3.2vw,34px); margin:0 0 6px; }
.bekijkbij{ margin:0; font-size:14.5px; color:var(--grijs); }
/* De naam van het project boven de naam van het programma, als je er
   maar één bekijkt. */
.bekijkboven{
  margin:0 0 4px; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--merk);
}
.bekijkknoppen{ display:flex; flex-wrap:wrap; gap:8px; }
.bekijkknoppen .plannerknop{ width:auto; max-width:none; padding-left:16px; padding-right:16px; }

/* Lucht tussen de kaarten; zonder deze regel plakken ze aan elkaar. */
.bekijk .accountkaart{ margin-bottom:16px; }
.bekijkdeel{ margin-bottom:16px; }
.bekijktabel td,
.bekijkkosten td{ white-space:normal; }
.bekijktijd{ white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600; }
.bekijkrij--pauze td{ color:var(--grijs); }
.bekijkrij--pauze .bekijktijd{ font-weight:400; }
/* De boekingen staan nu in hun eigen kaart, direct onder de kop; die
   had een tweede lijn erboven gekregen. */
.bekijkkosten thead th{ border-top:0; }
.bekijkgeld .accounttabel tbody tr:last-child td{ border-bottom:0; }

/* De totaalregel onderaan de kostenkaart. */
.bekijkregel{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
  padding:16px 22px; border-top:1px solid var(--lijn);
}
.bekijkregel__wat{ font-family:var(--font-kop); font-weight:700; font-size:17px; color:var(--donker); }
.bekijkkleine{ padding:0 22px 4px; }
.bekijkkleine p{ margin:0 0 10px; }
.bekijkkleine p:last-child{ margin-bottom:0; }
.plannerhint p{ margin:0 0 10px; }
.plannerhint p:last-child{ margin-bottom:0; }
.plannerhint a,
.bekijkkleine a{ color:var(--merk); }

.bekijkbuma{ padding:4px 22px 0; }
/* Meekijken: de keuze open/genodigd en het lijstje genodigden. */
.plannerdelen__wijze{ display:flex; flex-direction:column; gap:6px; margin:10px 0 12px; }
.plannerdelen__wijze label{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13.5px; color:var(--donker);
}
.plannergasten{ list-style:none; margin:12px 0 0; padding:0; }
.plannergasten li{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-top:1px solid var(--lijn);
}
.plannergasten__wie{ flex:1 1 auto; min-width:0; font-size:13px; color:var(--donker); }
.plannergasten__wie em{
  display:block; font-style:normal; font-size:11.5px; color:var(--grijs);
}
.plannergasten__weg{ flex:0 0 auto; }
.plannergasten__leeg{
  border-top:1px solid var(--lijn); font-size:12.5px; color:var(--grijs);
}

/* Het scherm waar een genodigde zijn code invult. */
.kijkpoort{
  max-width:420px; margin:40px auto; padding:28px 30px;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:14px;
}
.kijkpoort h1{ font-size:22px; margin:0 0 8px; }
.kijkpoort__uitleg{ margin:0 0 20px; font-size:14px; color:var(--grijs); line-height:1.6; }
.kijkpoort input[type="text"]{ text-transform:uppercase; letter-spacing:4px; font-size:18px; }

/* Tabbladen: wat je ziet, print en mailt. */
.bekijktabs{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 16px; padding:5px; border-radius:12px;
  background:var(--vlak-zacht); border:1px solid var(--lijn);
}
.bekijktab{
  padding:8px 14px; border-radius:8px; text-decoration:none;
  font-size:13.5px; font-weight:600; color:var(--grijs); white-space:nowrap;
}
.bekijktab:hover{ color:var(--merk); }
.bekijktab--nu{ background:var(--vlak); color:var(--donker); box-shadow:0 1px 2px rgba(0,0,0,.06); }

/* Het smoelenboek. */
.smoelen{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px; padding:20px 22px;
}
.smoel{ display:flex; gap:14px; align-items:flex-start; }
.smoel__beeld{
  width:88px; height:88px; flex:0 0 88px; border-radius:11px;
  object-fit:cover; background:var(--beeldvlak);
}
.smoel__geen{
  display:grid; place-items:center;
  font-family:var(--font-kop); font-size:30px; color:var(--beeldtekst);
}
.smoel__wat{ min-width:0; }
.smoel__wat h3{ font-size:16px; margin:0 0 2px; }
.smoel__soort{ margin:0 0 6px; font-size:12.5px; color:var(--grijs); }
.smoel__tekst{ margin:0; font-size:13.5px; line-height:1.55; color:var(--lees,var(--tekst)); }
.smoel__link{ margin:6px 0 0; font-size:13px; }
.smoel__link a{ color:var(--merk); text-decoration:none; font-weight:600; }
.smoel__link a:hover{ text-decoration:underline; }

/* =====================================================================
   De tijdbalk op /programma
   ===================================================================== */
.tijdbalk{ min-width:640px; padding:6px 22px 16px; }
.tijdbalk__uren{
  position:relative; height:20px; margin-left:214px;
  border-bottom:1px solid var(--lijn);
}
.tijdbalk__uur{
  position:absolute; top:0; transform:translateX(-50%);
  font-size:11.5px; color:var(--grijs); font-variant-numeric:tabular-nums;
}
/* Het eerste streepje valt op de aanvang; gecentreerd zou het half
   buiten de balk hangen. */
.tijdbalk__uur--begin{ transform:none; }
.tijdbalk__regel{ display:flex; align-items:center; gap:14px; padding:5px 0; }
.tijdbalk__wie{ flex:0 0 200px; display:flex; align-items:center; gap:10px; min-width:0; }
.tijdbalk__wie img,
.tijdbalk__geenbeeld{
  width:34px; height:34px; flex:0 0 34px; border-radius:8px;
  object-fit:cover; background:var(--beeldvlak);
}
.tijdbalk__wie strong{
  display:block; font-size:13.5px; color:var(--donker);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tijdbalk__wie em{
  display:block; font-style:normal; font-size:11.5px; color:var(--grijs);
  font-variant-numeric:tabular-nums;
}
.tijdbalk__notitie{
  font-variant-numeric:normal;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tijdbalk__spoor{ position:relative; flex:1 1 auto; height:34px; }
.tijdbalk__streep{
  position:absolute; top:0; bottom:0; width:1px; background:var(--lijn);
}
.tijdbalk__blok{
  position:absolute; top:0; bottom:0; min-width:6px;
  display:flex; align-items:center; padding:0 8px;
  border-radius:8px; overflow:hidden;
  font-size:11.5px; font-weight:600; color:var(--donker);
  font-variant-numeric:tabular-nums;
}
.tijdbalk__blok span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tijdbalk__blok--a{ background:#cfe4f7; }
.tijdbalk__blok--b{ background:#fbe0cd; }
.tijdbalk__blok--c{ background:#f8d3dd; }
.tijdbalk__blok--d{ background:#d5e8d6; }
.tijdbalk__blok--e{ background:#e0d9f3; }
.tijdbalk__blok--f{ background:#faeec3; }
.tijdbalk__blok--pauze{
  background:transparent; border:1px dashed var(--lijn); color:var(--grijs); font-weight:400;
}

/* De kleurvlakken in het donker: dezelfde tinten, maar gedempt. */
[data-thema="donker"] .tijdbalk__blok{ color:#f2f4f7; }
[data-thema="donker"] .tijdbalk__blok--a{ background:#2b4a66; }
[data-thema="donker"] .tijdbalk__blok--b{ background:#68432a; }
[data-thema="donker"] .tijdbalk__blok--c{ background:#6a3040; }
[data-thema="donker"] .tijdbalk__blok--d{ background:#31503a; }
[data-thema="donker"] .tijdbalk__blok--e{ background:#403a63; }
[data-thema="donker"] .tijdbalk__blok--f{ background:#5f5124; }

@media (max-width:640px){
  .tijdbalk{ min-width:560px; padding-left:14px; padding-right:14px; }
  .tijdbalk__uren{ margin-left:170px; }
  .tijdbalk__wie{ flex-basis:156px; }
}

.bekijkkeuzes{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  margin:12px 0 4px; padding:12px 22px 0; border-top:1px dashed var(--lijn);
}
.bekijkkeuzes a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--donker); text-decoration:none;
}
.bekijkkeuzes a:hover{ color:var(--merk); }
.bekijkvink{
  width:17px; height:17px; flex:0 0 17px; display:grid; place-items:center;
  border:1px solid var(--lijn); border-radius:4px; background:var(--vlak);
  font-size:12px; line-height:1;
}
.bekijkvink--aan{ background:var(--merk); border-color:var(--merk); color:#fff; }

.bekijktotaal .accountkaart__kop{ border-bottom:0; }
.bekijkbedrag{ font-family:var(--font-kop); font-size:22px; font-weight:700; color:var(--merk); }
.bekijkbedrag em{ font-family:var(--font-tekst); font-style:normal; font-size:13px; color:var(--grijs); }
.bekijkslot{ padding:0 22px 22px; }
.bekijkslot .plannerknop{ max-width:340px; }
.bekijkvoet{ margin:18px 0 0; font-size:12.5px; color:var(--grijs); }

/* =====================================================================
   Opslaan in de planner
   ===================================================================== */
.plannerbewaard{
  margin:0 0 16px; padding:16px 18px;
  border:1px solid var(--merk); border-radius:11px;
  background:var(--merk-vleug,#fef4f1);
}
.plannerbewaard p{ margin:0 0 12px; font-size:14.5px; line-height:1.65; color:var(--donker); }
.plannerbewaard p:only-child{ margin-bottom:0; }
.plannerbewaard .plannerknoppen{ display:flex; flex-wrap:wrap; gap:8px; }
.plannerbewaard .plannerknop{
  width:auto; max-width:none; padding-left:16px; padding-right:16px;
  text-decoration:none; text-align:center;
}

/* =====================================================================
   Printen
   ===================================================================== */
@media print{
  .account{ background:#fff; padding:0; }
  .bekijkknoppen,
  .accountzij,
  .accountmeer,
  .accountacties,
  .accounttabel__acties,
  .bekijkslot,
  .bekijkkeuzes,
  .bekijktabs,
  .smoel__link,
  .plannerbewaard{ display:none !important; }
  .accountraster{ display:block; }
  .accountkaart{ border:0; border-radius:0; box-shadow:none; page-break-inside:avoid; }
  .accountkaart__kop{ border-bottom:1.5pt solid #222; padding-left:0; padding-right:0; }
  .accounttabelvak{ overflow:visible; }
  .accounttabel th,
  .accounttabel td{ padding-left:0; padding-right:0; }
  .bekijkkop h1{ font-size:20pt; }
  .tijdbalk{ min-width:0; padding-left:0; padding-right:0; }
  .smoelen{ padding-left:0; padding-right:0; grid-template-columns:1fr 1fr; }
  .smoel{ page-break-inside:avoid; }
  .smoel__beeld{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .tijdbalk__blok{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .bekijktotaal{ border-top:1.5pt solid #222; }
  a{ text-decoration:none; color:#000; }
}

@media (max-width:640px){
  .bekijkkop{ align-items:flex-start; }
  .accountacties{ justify-content:flex-start; }
  .accountfavorieten{ grid-template-columns:1fr; }
}

/* =====================================================================
   Mijn favorieten
   ===================================================================== */
.wens{ padding:8px 0 60px; background:var(--merk-vleug,#fef9f7); }
.wenskop{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; margin:0 0 24px;
}
.wenskop h1{ font-size:clamp(26px,3.4vw,38px); margin:0 0 8px; }
.wenskop p{ margin:0; font-size:15.5px; color:var(--grijs); }
.wensknoppen{ display:flex; flex-wrap:wrap; gap:8px; }
.wensknoppen .plannerknop{ width:auto; max-width:none; padding-left:18px; padding-right:18px; }

.wenslaadt{ padding:60px 0; text-align:center; color:var(--grijs); font-size:15px; }

.wenstip{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 20px; padding:13px 16px;
  border:1px solid var(--lijn); border-radius:11px; background:var(--vlak);
  font-size:14px; color:var(--grijs);
}
.wenstip svg{ width:17px; height:17px; color:var(--merk); flex:0 0 auto; }
.wenstip a{ color:var(--merk); font-weight:600; }

.wensleeg{
  text-align:center; padding:56px 24px 60px;
  border:1px solid var(--lijn); border-radius:12px; background:var(--vlak);
}
.wensleeg svg{ width:38px; height:38px; color:#d9dee6; margin-bottom:14px; }
.wensleeg h2{ font-size:21px; margin:0 0 8px; }
.wensleeg p{ max-width:48ch; margin:0 auto 22px; color:var(--grijs); line-height:1.7; }
.wensleeg .plannerknop{ margin:0 auto; }

@media (max-width:640px){
  .wenskop{ align-items:flex-start; }
}

/* =====================================================================
   Inloggen en account maken
   ===================================================================== */
.inlog{ padding:8px 0 70px; background:var(--merk-vleug,#fef9f7); }
.inlogvak{ max-width:560px; margin:0 auto; }

.inlogtabs{
  display:flex; gap:4px; padding:4px; margin:0 0 16px;
  border:1px solid var(--lijn); border-radius:12px; background:var(--vlak);
}
.inlogtabs a{
  flex:1 1 0; text-align:center; padding:10px 12px; border-radius:9px;
  font-size:14.5px; font-weight:600; color:var(--grijs); text-decoration:none;
}
.inlogtabs a:hover{ color:var(--merk); }
.inlogtabs a.is-aan{ background:var(--merk); color:#fff; }

.inlogtip{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 16px; padding:13px 16px;
  border:1px solid var(--merk); border-radius:11px; background:var(--vlak);
  font-size:13.5px; line-height:1.6; color:var(--donker);
}
.inlogtip svg{ width:17px; height:17px; color:var(--merk); flex:0 0 auto; margin-top:2px; }

.inlogkaart{
  border:1px solid var(--lijn); border-radius:12px; background:var(--vlak);
  padding:28px 28px 26px;
}
.inlogkaart h1{ font-size:clamp(22px,2.6vw,28px); margin:0 0 8px; }
.inloglead{ margin:0 0 22px; font-size:14.5px; line-height:1.65; color:var(--grijs); }

.inlogform .plannerknop{ margin-top:6px; }
.inlogform .plannerveld:last-of-type{ margin-bottom:16px; }

.inlogwissel{
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--lijn);
  font-size:14px; color:var(--grijs); text-align:center;
}
.inlogwissel a{ color:var(--merk); font-weight:600; }

.inloghulp{ margin:18px 0 0; text-align:center; font-size:13px; color:var(--grijs); }
.inloghulp a{ color:var(--merk); }

@media (max-width:520px){
  .inlogkaart{ padding:22px 18px 20px; }
  .inlogform .plannerrij{ grid-template-columns:1fr; }
}

/* Het linkje onder het wachtwoordveld. */
.inlogvergeten{
  display:block; margin-top:7px; font-size:12.5px; color:var(--grijs); text-align:right;
}
.inlogvergeten:hover{ color:var(--merk); text-decoration:underline; }

/* Een kaart met alleen een mededeling: mail onderweg, link verlopen. */
.inlogkaart--klaar{ text-align:center; padding-top:34px; }
.inlogkaart--klaar svg{ width:38px; height:38px; color:var(--merk); margin-bottom:14px; }
.inlogkaart--klaar .inloglead{ max-width:44ch; margin-left:auto; margin-right:auto; }

/* =====================================================================
   Inlogpagina met uitleg — links het formulier, rechts waarom
   ===================================================================== */
.inlogpagina{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch; border-top:1px solid var(--lijn);
}

.inlogkant{ background:var(--achtergrond,#fff); padding:52px 40px 60px; }
.inlogkant__binnen{ max-width:520px; margin:0 0 0 auto; }
.inlogkant h1{ font-size:clamp(26px,3vw,34px); margin:0 0 10px; }
.inlogkant .inloglead{ margin:0 0 26px; font-size:14.5px; line-height:1.65; color:var(--grijs); }

/* Een veld met een icoontje ervoor. */
.inlogveld{ position:relative; display:block; }
.inlogveld > [data-lucide]{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:#a7aeba; pointer-events:none;
}
.inlogveld input{ padding-left:42px; }
.inlogveld:has(.inlogoog) input{ padding-right:44px; }
.inlogoog{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:32px; height:32px;
  border:0; border-radius:8px; background:transparent; color:#a7aeba; cursor:pointer;
}
.inlogoog:hover{ color:var(--merk); }
.inlogoog svg{ width:17px; height:17px; }

.inlogregel{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:2px 0 18px; flex-wrap:wrap;
}
.inlogonthoud{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--donker); cursor:pointer;
}
.inlogonthoud input{ width:16px; height:16px; margin:0; accent-color:var(--merk); }
.inlogregel .inlogvergeten{ margin:0; font-size:13.5px; color:var(--merk); font-weight:600; }
.inlogregel .inlogvergeten:hover{ text-decoration:underline; }

.inlogkant .inlogform .plannerknop{ padding:14px 18px; font-size:15px; }
.inlogkant .inlogform > .inlogonthoud{ margin:6px 0 16px; }

/* Het scheidingsregeltje met "of". */
.inlogof{
  position:relative; margin:26px 0; text-align:center;
  font-size:13px; color:var(--grijs);
}
.inlogof::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:1px solid var(--lijn);
}
.inlogof span{ position:relative; padding:0 14px; background:var(--achtergrond,#fff); }

.inloganders h2{ font-size:16px; margin:0 0 6px; }
.inloganders p{ margin:0 0 14px; font-size:14px; line-height:1.6; color:var(--grijs); }
.inloganders .plannerknop{ padding:13px 18px; color:var(--merk); border-color:var(--merk); }
.inloganders .plannerknop:hover{ background:var(--merk-zacht,#feede9); }

.inlogklein{ margin:26px 0 0; font-size:12.5px; color:var(--grijs); }
.inlogklein a{ color:var(--grijs); text-decoration:underline; }
.inlogklein a:hover{ color:var(--merk); }

/* De kolom rechts. */
.inloguitleg{ background:var(--merk-vleug,#fef6f3); padding:52px 40px 60px; }
.inloguitleg__binnen{ max-width:620px; margin:0 auto 0 0; }

.inlogpunt{ display:flex; gap:18px; margin-bottom:26px; }
.inlogpunt:last-child{ margin-bottom:0; }
.inlogpunt__ring{
  flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px;
  border-radius:14px; background:var(--merk-zacht,#feede9); color:var(--merk);
  box-shadow:0 1px 3px rgba(34,38,49,.07);
}
.inlogpunt__ring svg{ width:21px; height:21px; }
.inlogpunt h2{ font-size:19px; margin:4px 0 6px; }
.inlogpunt h3{ font-size:15.5px; margin:6px 0 5px; }
.inlogpunt p{ margin:0; font-size:14px; line-height:1.65; color:var(--grijs); }
.inlogpunt--kop{ margin-bottom:32px; }

.inlogcta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:34px; padding:18px 20px;
  border:1px solid var(--merk-zacht,#fadfd7); border-radius:14px; background:var(--vlak);
}
.inlogcta__ring{
  flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px;
  border-radius:50%; background:var(--merk); color:#fff;
}
.inlogcta__ring svg{ width:19px; height:19px; }
.inlogcta__tekst{ flex:1 1 220px; }
.inlogcta__tekst strong{ display:block; font-family:var(--font-kop); font-size:16px; }
.inlogcta__tekst span{ display:block; font-size:13.5px; color:var(--grijs); margin-top:3px; }
.inlogcta .plannerknop{ width:auto; margin:0; padding:12px 20px; }

.inlogpagina .inlogtip{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 22px; padding:13px 16px;
  border:1px solid var(--merk); border-radius:11px; background:var(--merk-vleug,#fef6f3);
  font-size:13.5px; line-height:1.6; color:var(--donker);
}
.inlogpagina .inlogtip svg{ width:17px; height:17px; color:var(--merk); flex:0 0 auto; margin-top:2px; }

@media (max-width:980px){
  .inlogpagina{ grid-template-columns:1fr; }
  .inlogkant, .inloguitleg{ padding:40px 22px 44px; }
  .inlogkant__binnen, .inloguitleg__binnen{ max-width:560px; margin:0 auto; }
}

/* =====================================================================
   Waarop je nu filtert — boven de resultaten
   ===================================================================== */
.filterchips{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 16px; padding:12px 14px;
  border:1px solid var(--lijn); border-radius:11px;
  background:var(--merk-vleug,#fef6f3);
}
.filterchips__kop{ font-size:13px; color:var(--grijs); margin-right:2px; }

.filterchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px 6px 13px; border-radius:20px;
  border:1px solid var(--merk); background:var(--vlak);
  color:var(--merk-donker,#a8351a); font-size:13.5px; font-weight:600;
  text-decoration:none; line-height:1.2;
}
.filterchip:hover{ background:var(--merk); color:#fff; }
.filterchip svg{ width:14px; height:14px; opacity:.7; }
.filterchip:hover svg{ opacity:1; }

.filterchips__wis{
  margin-left:4px; font-size:13px; font-weight:600; color:var(--grijs);
  text-decoration:underline; text-underline-offset:3px;
}
.filterchips__wis:hover{ color:var(--merk); }

/* =====================================================================
   Losse pagina's uit het CMS: /contact, /veelgestelde-vragen, /privacy
   ===================================================================== */
.losse{ padding:10px 0 60px; }
.lossekop{ max-width:760px; margin:0 0 30px; }
.lossekop h1{ font-size:clamp(26px,3.6vw,38px); margin:0 0 10px; }
.losse__sub{ margin:0 0 8px; font-size:17px; color:var(--merk); font-weight:600; }
.losse__intro{ margin:0; font-size:16.5px; line-height:1.7; color:var(--grijs); }

/* ---------- adres, telefoon en e-mail naast elkaar ---------- */
.contactkaarten{
  display:grid; gap:14px; margin:26px 0 34px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.contactkaartje{
  display:flex; flex-direction:column; gap:3px;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px; padding:20px;
}
.contactkaartje__ring{
  width:42px; height:42px; border-radius:11px; margin-bottom:8px;
  display:grid; place-items:center;
  background:var(--merk-zacht,#feede9); color:var(--merk);
}
.contactkaartje__ring svg{ width:19px; height:19px; }
.contactkaartje__kop{
  font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--grijs);
}
.contactkaartje__tekst{ font-size:15.5px; color:var(--donker); line-height:1.5; }
.contactkaartje__tekst a{ color:var(--donker); text-decoration:none; }
.contactkaartje__tekst a:hover{ color:var(--merk); }

/* ---------- het formulier ---------- */
.contactform{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
  padding:26px; margin:26px 0; max-width:760px;
}
.contactrij{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .contactrij{ grid-template-columns:1fr; } }
.contactveld{ margin-bottom:16px; }
.contactveld label{
  display:block; font-size:13px; font-weight:600; color:var(--donker); margin-bottom:6px;
}
.contactveld input,
.contactveld textarea{
  width:100%; padding:11px 13px; box-sizing:border-box;
  border:1px solid var(--lijn); border-radius:8px;
  font-family:inherit; font-size:15px; color:var(--donker); background:var(--vlak);
}
.contactveld input:focus,
.contactveld textarea:focus{
  outline:none; border-color:var(--merk); box-shadow:0 0 0 3px rgba(240,78,35,.15);
}
.contactveld textarea{ resize:vertical; min-height:130px; }
.contactknop{ width:auto; min-width:190px; margin-top:6px; padding:13px 26px; }

/* Het lokvakje voor robots: onzichtbaar, maar niet display:none —
   sommige robots slaan verborgen velden juist over. */
.contactlok{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.contactfout{
  display:flex; align-items:center; gap:9px; margin:0 0 18px;
  background:var(--fout-vlak); border:1px solid var(--fout-lijn); color:var(--fout-tekst);
  padding:12px 14px; border-radius:8px; font-size:14.5px;
}
.contactfout svg{ width:18px; height:18px; flex:0 0 18px; }

.contactgelukt{
  background:var(--vlak); border:1px solid var(--goed-lijn); border-radius:12px;
  padding:30px; margin:26px 0; max-width:760px; text-align:center;
}
.contactgelukt svg{ width:44px; height:44px; color:var(--goed-tekst); margin-bottom:10px; }
.contactgelukt h3{ margin:0 0 6px; font-size:20px; }
.contactgelukt p{ margin:0; color:var(--grijs); }

/* =====================================================================
   Filteren op een telefoon: één knop, en dan een scherm
   ---------------------------------------------------------------------
   Naast de lijst is er op een telefoon geen ruimte voor een zijbalk. De
   filters zitten daar dus achter één knop; een tik erop schuift ze van
   onderen omhoog over de pagina, met onderin een vaste knop waarmee je
   terug bent bij de lijst.

   Alles hieronder hangt aan .js op de <html>. Staat javascript uit, dan
   opent zo'n knop namelijk niets, en blijven de filters gewoon onder de
   lijst staan waar je ze kunt gebruiken.
   ================================================================== */
.filterbalk{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 16px; }
.filterbalk .filterchips{ margin:0; flex:1 1 240px; }
.filterknop{ display:none; }
.filters__sluit{ display:none; }
.filters__toon{ display:none; }

.filterdek{
  position:fixed; inset:0; z-index:205;
  background:rgba(8,10,14,.55);
}
body.geenscroll{ overflow:hidden; }

@media (min-width:1101px){
  .filterdek{ display:none !important; }
}

@media (max-width:1100px){

  /* De hulpkaart hoort onder de lijst, niet erboven. */
  .werkvlak{ order:2; }
  .zijkant{ order:3; }

  .filterknop{
    display:inline-flex; align-items:center; gap:9px;
    padding:11px 16px; cursor:pointer;
    border:1px solid var(--lijn); border-radius:10px;
    background:var(--vlak); color:var(--donker);
    font-family:var(--font-kop); font-weight:700; font-size:15px;
  }
  .filterknop:hover{ border-color:var(--merk); color:var(--merk); }
  .filterknop svg{ width:18px; height:18px; color:var(--merk); }
  .filterknop em{
    font-style:normal; min-width:21px; height:21px; padding:0 6px;
    display:grid; place-items:center; border-radius:20px;
    background:var(--merk); color:#fff; font-size:12px; font-weight:700;
  }

  /* ---------- het scherm zelf ---------- */
  .js .zijkant{ display:block; }
  .js .zijkant .filters{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:210;
    display:flex; flex-direction:column;
    max-height:min(86vh, 760px); overflow-y:auto; overscroll-behavior:contain;
    border-radius:16px 16px 0 0; border-width:1px 0 0;
    box-shadow:0 -18px 50px rgba(8,10,14,.28);
    transform:translateY(101%); visibility:hidden;
    transition:transform .28s ease, visibility 0s linear .28s;
  }
  .js .zijkant .filters.open{
    transform:none; visibility:visible;
    transition:transform .28s ease, visibility 0s linear 0s;
  }

  .js .filters__kop{ position:sticky; top:0; z-index:3; }
  .js .filters__sluit{
    display:grid; place-items:center; margin-left:auto;
    width:34px; height:34px; padding:0; cursor:pointer;
    background:rgba(255,255,255,.12); border:0; border-radius:9px; color:#fff;
  }
  .js .filters__sluit:hover{ background:rgba(255,255,255,.22); }
  .js .filters__sluit svg{ width:19px; height:19px; }

  .js .filters__voet{
    position:sticky; bottom:0; z-index:3; background:var(--vlak);
    display:flex; align-items:center; gap:10px;
  }
  /* Wissen is hier het zijspoor; de grote knop is de knop terug naar de
     lijst. Twee even felle knoppen naast elkaar helpt niemand kiezen. */
  .js .filters__voet .cms-knop{
    width:auto; flex:0 0 auto;
    background:transparent; color:var(--donker); border-color:var(--lijn);
  }
  .js .filters__voet .cms-knop:hover{
    background:transparent; color:var(--merk); border-color:var(--merk);
  }
  .js .filters__voet .cms-knop svg{ display:none; }

  .js .filters__toon{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    flex:1 1 auto; padding:13px 18px; cursor:pointer;
    border:1px solid var(--merk); border-radius:9px;
    background:var(--merk); color:#fff;
    font-family:var(--font-kop); font-weight:700; font-size:15px;
  }
  .js .filters__toon:hover{ background:var(--merk-donker,#d43f18); }
}

/* =====================================================================
   Shortlist — het voorstel dat de klant via een deellink bekijkt
   ===================================================================== */
.shortlist{ padding:28px 0 60px; }

.shortlistkop{ margin-bottom:22px; }
.shortlistkop__label{
  margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--merk);
}
.shortlistkop h1{ margin:0 0 6px; }
.shortlistkop__bij{ margin:0; color:var(--lees); }
.shortlistkop__voor{ margin:2px 0 0; font-size:14px; color:var(--grijs); }

.shortlistintro{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
  padding:18px 22px; margin-bottom:22px; box-shadow:var(--schaduw);
}
.shortlistintro p{ margin:0; color:var(--lees); line-height:1.65; }

.shortlijst{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }

.shortregel{
  display:flex; align-items:center; gap:16px;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
  padding:14px 18px; box-shadow:var(--schaduw);
}
.shortregel__beeld{ flex:0 0 auto; }
.shortregel__beeld img{
  width:64px; height:64px; border-radius:10px; object-fit:cover; display:block;
}
.shortregel__letters{
  width:64px; height:64px; border-radius:10px; display:grid; place-items:center;
  background:var(--beeldvlak); color:var(--beeldtekst);
  font-size:16px; font-weight:700;
}
.shortregel__wat{ flex:1 1 auto; min-width:0; }
.shortregel__wat h2{ margin:0; font-size:19px; }
.shortregel__optie{ margin:3px 0 0; font-size:13.5px; color:var(--grijs); }
.shortregel__notitie{ margin:6px 0 0; font-size:13.5px; color:var(--lees); }
.shortregel__uit{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:7px;
}
.shortregel__prijs{ font-size:19px; font-weight:700; white-space:nowrap; }

/* Het pilletje met de beschikbaarheid. Dezelfde kleuren als in het CMS
   en in de PDF, maar hier via de variabelen, zodat het in de donkere
   modus meedraait. */
.slstand{
  display:inline-block; padding:3px 11px; border-radius:20px;
  font-size:12px; font-weight:700; white-space:nowrap;
  background:var(--vlak-zacht); color:var(--grijs);
  border:1px solid var(--lijn);
}
.slstand--goed { background:var(--goed-vlak); color:var(--goed-tekst); border-color:var(--goed-lijn); }
.slstand--let  { background:var(--let-vlak);  color:var(--let-tekst);  border-color:var(--let-lijn); }
.slstand--optie{ background:var(--optie-vlak);color:var(--optie-tekst);border-color:var(--optie-lijn); }
.slstand--fout { background:var(--fout-vlak); color:var(--fout-tekst); border-color:var(--fout-lijn); }

.shortlistcta{
  background:var(--vlak-zacht); border:1px solid var(--lijn); border-radius:12px;
  padding:22px; text-align:center; margin-top:26px;
}
.shortlistcta p{ margin:0 0 14px; color:var(--lees); }
.shortlistcta .plannerknop{ max-width:280px; margin:0 auto; }

@media (max-width:640px){
  .shortregel{ flex-wrap:wrap; }
  .shortregel__wat{ flex:1 1 calc(100% - 80px); }
  .shortregel__uit{
    flex:1 1 100%; flex-direction:row; align-items:center;
    justify-content:space-between; border-top:1px solid var(--lijn); padding-top:10px;
  }
}

/* De voorwaarde bij de vorm in de boekingskaart: besloten/openbaar en de
   bezoekersdrempel. Kleiner en zachter, want het is een bijzin. */
.boekkaart__bij{ display:block; font-size:12.5px; color:var(--grijs); }

/* =====================================================================
   Niet gevonden — met suggesties, een zoekveld en een meldknop
   ===================================================================== */
.nietsgevonden{ max-width:640px; margin:0 auto; padding:56px 0 72px; text-align:center; }
.nietsgevonden__teken{ width:44px; height:44px; color:var(--grijs); }
.nietsgevonden h1{ margin:16px 0 8px; }
.nietsgevonden__uitleg{ margin:0 0 26px; color:var(--lees); }

.nietsgevonden__tips{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
  padding:18px 20px; margin-bottom:26px; text-align:left; box-shadow:var(--schaduw);
}
.nietsgevonden__tipskop{ margin:0 0 10px; font-weight:700; }
.nietsgevonden__tips ul{ list-style:none; margin:0; padding:0;
                         display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.nietsgevonden__tips a{ display:flex; align-items:center; gap:10px;
                        padding:7px 9px; border-radius:9px; text-decoration:none; }
.nietsgevonden__tips a:hover{ background:var(--vlak-zacht); }
.nietsgevonden__tips img{ width:38px; height:38px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.nietsgevonden__letters{
  width:38px; height:38px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--beeldvlak); color:var(--beeldtekst); font-size:12px; font-weight:700;
}
.nietsgevonden__tips strong{ display:block; font-size:14.5px; }
.nietsgevonden__tips em{ font-style:normal; font-size:12.5px; color:var(--grijs); }

.nietsgevonden__zoek label{ display:block; margin-bottom:7px; font-weight:600; }
.nietsgevonden__zoek > div{ display:flex; gap:8px; }
.nietsgevonden__zoek input{
  flex:1 1 auto; padding:12px 14px; border:1px solid var(--lijn);
  border-radius:9px; background:var(--vlak); color:var(--tekst); font-size:15px;
}
.nietsgevonden__zoek input:focus{ outline:2px solid var(--merk); outline-offset:1px; }
.nietsgevonden__zoek button{
  flex:0 0 auto; padding:12px 22px; border:0; border-radius:9px;
  background:var(--merk); color:#fff; font-weight:700; font-size:15px; cursor:pointer;
}
.nietsgevonden__zoek button:hover{ filter:brightness(.94); }

.nietsgevonden__melden{ margin:22px 0 0; color:var(--lees); font-size:14.5px; }
.nietsgevonden__terug{ margin:8px 0 0; font-size:13.5px; color:var(--grijs); }

@media (max-width:560px){
  .nietsgevonden__tips ul{ grid-template-columns:1fr; }
}

/* =====================================================================
   Openbare prijslijsten — /prijzen en /prijzen/<categorie>
   ===================================================================== */
.prijspagina{ padding:26px 0 64px; }

.prijskop{ max-width:760px; margin-bottom:26px; }
.prijskop h1{ margin:0 0 12px; }
.prijskop__intro{ margin:0 0 12px; color:var(--lees); line-height:1.65; }
.prijskop__hulp{ margin:0; font-size:14.5px; color:var(--grijs); }

/* De ingang met de categorieblokken */
.prijsblokken{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.prijsblok{
  display:block; text-decoration:none; color:inherit;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
  overflow:hidden; box-shadow:var(--schaduw); transition:border-color .12s, transform .12s;
}
.prijsblok:hover{ border-color:var(--merk); transform:translateY(-2px); }
.prijsblok img, .prijsblok__leeg{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--beeldvlak);
}
.prijsblok__naam{ display:block; padding:12px 14px 0; font-weight:700; }
.prijsblok__aantal{ display:block; padding:2px 14px 14px; font-size:13px; color:var(--grijs); }

/* De deelknoppen */
.prijsknoppen{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.prijsknop{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:8px; border:0;
  font-size:14.5px; font-weight:700; color:#fff; text-decoration:none; cursor:pointer;
}
.prijsknop i{ width:18px; height:18px; }
.prijsknop--print{ background:#7b2d52; }
.prijsknop--app  { background:#25a35a; }
.prijsknop--mail { background:var(--diep); }
.prijsknop--pdf  { background:var(--merk); }
.prijsknop:hover{ filter:brightness(.92); color:#fff; }

/* De tabel */
.prijstabelvak{ overflow-x:auto; border:1px solid var(--lijn); border-radius:12px;
                background:var(--vlak); box-shadow:var(--schaduw); }
.prijstabel{ width:100%; border-collapse:collapse; font-size:14.5px; }
.prijstabel thead th{
  background:var(--diep); color:#fff; text-align:left; font-size:12.5px;
  letter-spacing:.04em; text-transform:uppercase; padding:12px 14px; white-space:nowrap;
}
.prijstabel td, .prijstabel > tbody > tr > th{
  padding:10px 14px; text-align:left; font-weight:400; vertical-align:top;
}
.prijstabel > tbody > tr > th{ font-weight:700; width:210px; }
.prijstabel__start > *{ border-top:1px solid var(--lijn); }
.prijstabel__start:first-child > *{ border-top:0; }
.prijstabel tbody tr:nth-child(even){ background:var(--vlak-zacht); }
.prijstabel__tarief{ text-align:right !important; white-space:nowrap; font-weight:700; }
.prijstabel__vaag{ color:var(--grijs); font-weight:400; }

.prijsstand{ margin:12px 0 0; font-size:13.5px; color:var(--grijs); }
.prijsleeg{ color:var(--lees); }

.prijsuitleg, .prijsvragen{ margin-top:34px; max-width:820px; }
.prijsuitleg h2, .prijsvragen h2{ margin:0 0 12px; }
.prijsuitleg p{ color:var(--lees); line-height:1.7; }
.prijsvragen details{
  border:1px solid var(--lijn); border-radius:10px; background:var(--vlak);
  padding:12px 16px; margin-bottom:8px;
}
.prijsvragen summary{ cursor:pointer; font-weight:700; }
.prijsvragen details p{ margin:10px 0 0; color:var(--lees); line-height:1.65; }

.prijscta{
  margin-top:34px; padding:24px; text-align:center;
  background:var(--vlak-zacht); border:1px solid var(--lijn); border-radius:12px;
}
.prijscta p{ margin:0 0 14px; color:var(--lees); }
.prijscta .plannerknop{ max-width:280px; margin:0 auto; }
.prijscta__terug{ margin:14px 0 0 !important; font-size:13.5px; }

/* Afdrukken: alleen de lijst, geen menu, geen knoppen. Een uitgeprinte
   prijslijst gaat mee naar een vergadering; daar hoort geen navigatie op. */
@media print{
  .balk, .voet, .kruimels, .prijsknoppen, .prijscta, .prijskop__hulp{ display:none !important; }
  .prijspagina{ padding:0; }
  .prijstabelvak{ border:0; box-shadow:none; overflow:visible; }
  .prijstabel thead th{ background:#eee !important; color:#000 !important;
                        -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .prijstabel{ font-size:11px; }
  .prijsvragen details{ break-inside:avoid; }
  .prijsvragen details[open] p, .prijsvragen p{ display:block; }
}

/* De prijslijst in twee kolommen: de tabel links, hulp rechts */
.prijsvlak{ display:grid; gap:26px; grid-template-columns:minmax(0,3fr) minmax(0,1fr); align-items:start; }
.prijsvlak__hoofd{ min-width:0; }

.prijszij{ display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; }
.prijszij__blok{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
  padding:18px 20px; box-shadow:var(--schaduw);
}
.prijszij__blok h2{ margin:0 0 8px; font-size:17px; }
.prijszij__blok p{ margin:0 0 12px; font-size:14px; color:var(--lees); line-height:1.6; }
.prijszij__blok--merk{ background:var(--merk-zacht); border-color:var(--merk-zacht); }
.prijszij .plannerknop{ width:100%; }

.prijsstappen{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.prijsstappen li{ font-size:14px; }
.prijsstappen strong{ display:block; }
.prijsstappen span{ color:var(--grijs); }

.prijszij__tel{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:17px; text-decoration:none;
}
.prijszij__tel svg{ width:18px; height:18px; }
.prijszij__uren{ margin:6px 0 0 !important; font-size:13px; color:var(--grijs); }

.prijszij__lijst{ list-style:none; margin:0 0 10px; padding:0; display:flex;
                  flex-direction:column; gap:5px; font-size:14px; }
.prijszij__meer{ font-size:13.5px; font-weight:700; }

/* De kop van de tabel blijft staan bij het scrollen. Bij een lijst van
   280 artiesten weet je anders halverwege niet meer welke kolom wat is. */
.prijstabelvak{ max-height:none; }
.prijstabel thead th{ position:sticky; top:0; z-index:3; }
.prijstabel__geldt{ white-space:nowrap; }
.prijstabel__bij{ display:block; font-size:12px; color:var(--grijs); }

@media (max-width:1000px){
  .prijsvlak{ grid-template-columns:minmax(0,1fr); }
  .prijszij{ position:static; }
}

@media print{
  .prijszij{ display:none !important; }
  .prijsvlak{ display:block; }
  .prijstabel thead th{ position:static; }
}

/* Onder 400px past logo + drie iconen niet meer naast elkaar; de
   themaknop staat dan nog steeds onderin het uitklapmenu. */
@media (max-width:400px){
  .balk__rechts .themaknop{ display:none; }
}

/* Offerteformulier: zachte waarschuwing en de uitleg bij besloten/openbaar */
.offertelet{
  background:var(--let-vlak); border:1px solid var(--let-lijn); border-radius:10px;
  padding:14px 16px; margin:0 0 18px;
}
.offertelet strong{ display:block; color:var(--let-tekst); margin-bottom:4px; }
.offertelet p{ margin:0 0 6px; font-size:14.5px; color:var(--lees); }
.offertelet__slot{ margin:8px 0 0 !important; font-size:13.5px; color:var(--grijs); }

.formuitleg{
  display:inline-grid; place-items:center; width:18px; height:18px; margin-left:6px;
  border:1px solid var(--lijn); border-radius:50%; background:var(--vlak);
  color:var(--grijs); font-size:11px; font-weight:700; font-style:italic; cursor:pointer;
  vertical-align:middle;
}
.formuitleg:hover{ border-color:var(--merk); color:var(--merk); }

.uitlegblok{
  background:var(--vlak-zacht); border:1px solid var(--lijn); border-radius:10px;
  padding:16px 20px; margin:0 0 18px;
}
.uitlegblok[hidden]{ display:none; }
.uitlegblok h3{ margin:0 0 4px; font-size:16px; }
.uitlegblok h3 + p{ margin:0 0 12px; }
.uitlegblok p{ font-size:14.5px; color:var(--lees); line-height:1.6; }
.uitlegblok__waarom{ margin-bottom:0 !important; font-size:13.5px; color:var(--grijs); }

/* Datum, tijd en de datumtoelichting naast elkaar. Een datumkiezer en een
   tijdkiezer hebben geen halve regel nodig; de toelichting wel. */
/* .formrij is een grid van twee gelijke kolommen. Voor rijen met drie
   velden waarvan er twee smal zijn, zetten we de kolommen apart. Een
   datumkiezer en een tijdkiezer hebben geen halve schermbreedte nodig;
   het tekstveld ertussen wel, want daar typ je "12 of 19 september". */
.formrij--datum{ grid-template-columns:200px minmax(0,1fr) 170px; }
.formrij--drie { grid-template-columns:repeat(3, minmax(0,1fr)); }

@media (max-width:820px){
  .formrij--datum, .formrij--drie{ grid-template-columns:1fr; }
}

/* De uitleg bij (i) verschijnt vlak onder het veld in plaats van
   verderop in het formulier. */
.uitlegblok{ margin-top:10px; }

/* =====================================================================
   Zoeken over de hele site
   ===================================================================== */

/* De knop in de balk. Zelfde maat en vorm als het hartje ernaast. */
.zoekknop{
  display:grid; place-items:center; width:42px; height:42px;
  border:0; border-radius:50%; background:transparent;
  color:var(--donker); cursor:pointer;
}
.zoekknop:hover{ background:var(--vlak-zacht); color:var(--merk); }
.zoekknop svg{ width:20px; height:20px; }

.zoekpaneel{
  position:relative; z-index:220;
  background:var(--vlak); border-bottom:1px solid var(--lijn);
  box-shadow:0 12px 30px rgba(24,28,38,.10);
}
.zoekpaneel[hidden]{ display:none; }

.zoekpaneel__form{
  display:flex; align-items:center; gap:10px; padding:16px 0;
}
.zoekpaneel__form > svg{ width:20px; height:20px; color:var(--grijs); flex:0 0 20px; }
.zoekpaneel__form input{
  flex:1 1 auto; min-width:0; padding:12px 4px;
  font:inherit; font-size:17px; color:var(--tekst);
  background:transparent; border:0; outline:0;
}
.zoekpaneel__form .plannerknop{ width:auto; flex:0 0 auto; }
.zoekpaneel__sluit{
  flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px;
  border:0; border-radius:50%; background:transparent; color:var(--grijs); cursor:pointer;
}
.zoekpaneel__sluit:hover{ background:var(--vlak-zacht); color:var(--donker); }

/* Het scherm achter het paneel; klikken sluit. */
.zoekdek{
  position:fixed; inset:0; z-index:200;
  background:rgba(16,18,23,.35);
}
.zoekdek[hidden]{ display:none; }
body.zoekt{ overflow:hidden; }

/* De suggesties tijdens het typen. */
.zoekhints{ padding:0 0 18px; max-height:min(60vh,520px); overflow-y:auto; }
.zoekhints h2{
  margin:14px 0 6px; font-size:12px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--grijs);
}
.zoekhints ul{ list-style:none; margin:0; padding:0; }
.zoekhints__leeg{ margin:14px 0; color:var(--grijs); }

.zoekhints a,
.zoeklijst a{
  display:flex; align-items:center; gap:12px;
  padding:9px 10px; margin:0 -10px; border-radius:10px;
  text-decoration:none; color:var(--tekst);
}
.zoekhints a:hover,
.zoeklijst a:hover{ background:var(--vlak-zacht); }
.zoekhints img,
.zoeklijst img{
  width:38px; height:38px; flex:0 0 38px; border-radius:8px;
  object-fit:cover; background:var(--beeldvlak);
}
.zoekhints strong,
.zoeklijst strong{ display:block; font-size:15px; font-weight:600; }
.zoekhints em,
.zoeklijst em{ display:block; font-style:normal; font-size:12.5px; color:var(--grijs); }

.zoekhints__alles{
  display:inline-block; margin-top:14px; font-size:14px; font-weight:600;
  color:var(--merk); text-decoration:none;
}
.zoekhints__alles:hover{ text-decoration:underline; }

/* ---- de resultatenpagina ---- */
.zoekpagina{ padding:26px 0 60px; }
.zoekkop{ max-width:760px; margin:0 0 30px; }
.zoekkop h1{ margin:0 0 16px; }

.zoekgroot{
  display:flex; align-items:center; gap:10px;
  padding:6px 14px; margin-bottom:14px;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:12px;
}
.zoekgroot:focus-within{ border-color:var(--merk); }
.zoekgroot > svg{ width:20px; height:20px; color:var(--grijs); flex:0 0 20px; }
.zoekgroot input{
  flex:1 1 auto; min-width:0; padding:11px 2px;
  font:inherit; font-size:16px; color:var(--tekst);
  background:transparent; border:0; outline:0;
}
.zoekgroot .plannerknop{ width:auto; flex:0 0 auto; }

.zoekgroep{ max-width:760px; margin:0 0 32px; }
.zoekgroep h2{ margin:0 0 8px; font-size:18px; }
.zoeklijst{ list-style:none; margin:0; padding:0; }
.zoeklijst li + li{ border-top:1px solid var(--lijn); }
.zoeklijst__geen{
  width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center;
  border-radius:8px; background:var(--vlak-zacht); color:var(--grijs);
}
.zoeklijst__geen svg{ width:17px; height:17px; }
.zoeklijst span{ flex:1 1 auto; min-width:0; }
.zoeklijst__pijl{ width:16px; height:16px; flex:0 0 16px; color:var(--grijs); }
.zoekgroep__meer{ margin:10px 0 0; font-size:14px; }
.zoekgroep__meer a{ color:var(--merk); text-decoration:none; font-weight:600; }

.zoekleeg{ max-width:620px; padding:20px 0 60px; font-size:16px; }
.zoekleeg__tip{ color:var(--grijs); font-size:14.5px; line-height:1.7; }

@media (max-width:560px){
  .zoekpaneel__form input{ font-size:16px; }
  .zoekpaneel__form .plannerknop{ display:none; }
  .zoekgroot .plannerknop{ display:none; }
}

/* =====================================================================
   De chat rechtsonder
   ===================================================================== */
.chatknop{
  position:fixed; right:20px; bottom:20px; z-index:240;
  width:58px; height:58px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--merk); color:#fff;
  box-shadow:0 10px 28px rgba(24,28,38,.28);
}
.chatknop:hover{ background:var(--merk-donker,#d8421c); }
.chatknop svg{ width:24px; height:24px; }

/* Een stip als er antwoord is terwijl het paneel dicht staat. */
.chatknop__stip{
  position:absolute; top:4px; right:4px; width:13px; height:13px;
  border-radius:50%; background:#e11d48; border:2px solid var(--vlak);
}
.chatknop__stip[hidden]{ display:none; }

.chatpaneel{
  position:fixed; right:20px; bottom:88px; z-index:240;
  width:min(360px, calc(100vw - 40px));
  max-height:min(70vh, 560px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:16px;
  box-shadow:0 18px 50px rgba(24,28,38,.22);
}
.chatpaneel[hidden]{ display:none; }

.chatpaneel__kop{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 18px; background:var(--merk); color:#fff;
}
.chatpaneel__kop strong{ display:block; font-size:16px; }
.chatpaneel__kop p{ margin:4px 0 0; font-size:13.5px; opacity:.92; line-height:1.5; }
.chatpaneel__sluit{
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
}

.chatpaneel__stroom{
  flex:1 1 auto; min-height:80px; overflow-y:auto;
  padding:16px; display:flex; flex-direction:column; gap:8px;
}
.chatregel{
  max-width:82%; padding:9px 13px; border-radius:14px;
  font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.chatregel--bezoeker{
  align-self:flex-end; background:var(--merk); color:#fff; border-bottom-right-radius:5px;
}
.chatregel--team{
  align-self:flex-start; background:var(--vlak-zacht); color:var(--tekst);
  border-bottom-left-radius:5px;
}

.chatpaneel__gegevens{
  padding:14px 16px; border-top:1px solid var(--lijn); background:var(--vlak-zacht);
  display:grid; gap:8px;
}
.chatpaneel__gegevens[hidden]{ display:none; }
.chatpaneel__gegevens p{ margin:0; font-size:13px; color:var(--grijs); }
.chatpaneel__gegevens input{
  padding:9px 11px; font:inherit; font-size:14px;
  border:1px solid var(--lijn); border-radius:8px; background:var(--vlak);
}

.chatpaneel__invoer{
  display:flex; align-items:flex-end; gap:8px;
  padding:12px 14px; border-top:1px solid var(--lijn);
}
.chatpaneel__invoer textarea{
  flex:1 1 auto; min-width:0; resize:none; max-height:120px;
  padding:10px 12px; font:inherit; font-size:14.5px; line-height:1.5;
  border:1px solid var(--lijn); border-radius:10px; background:var(--vlak);
  color:var(--tekst);
}
.chatpaneel__invoer textarea:focus{ outline:0; border-color:var(--merk); }
.chatpaneel__invoer button{
  flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center;
  border:0; border-radius:50%; background:var(--merk); color:#fff; cursor:pointer;
}
.chatpaneel__invoer svg{ width:18px; height:18px; }

@media (max-width:560px){
  /* Op een telefoon over de volle breedte; een luikje van 360px naast
     de rand leest niet. */
  .chatpaneel{
    right:10px; left:10px; bottom:82px; width:auto;
    max-height:calc(100vh - 140px);
  }
  .chatknop{ right:14px; bottom:14px; }
}

/* =====================================================================
   Cookiebalk
   ===================================================================== */
.cookiebalk{
  position:fixed; left:0; right:0; bottom:0; z-index:260;
  background:var(--vlak); border-top:1px solid var(--lijn);
  box-shadow:0 -10px 34px rgba(24,28,38,.14);
}
.cookiebalk[hidden]{ display:none; }

.cookiebalk__binnen{
  max-width:var(--max-breedte,1620px); margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.cookiebalk__tekst{ flex:1 1 420px; min-width:0; }
.cookiebalk__tekst h2{ margin:0 0 6px; font-size:17px; }
.cookiebalk__tekst p{ margin:0 0 6px; font-size:14px; line-height:1.6; color:var(--lees); }
.cookiebalk__tekst p:last-child{ margin-bottom:0; }
.cookiebalk__tekst a{ color:var(--merk); }

.cookiebalk__knoppen{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* Weigeren en accepteren zijn even zwaar. Een weigerknop die minder
   opvalt telt niet als vrije keuze. */
.cookieknop{
  padding:11px 20px; font:inherit; font-size:14.5px; font-weight:600;
  border:1px solid var(--donker); border-radius:10px;
  background:var(--vlak); color:var(--donker); cursor:pointer;
}
.cookieknop:hover{ background:var(--vlak-zacht); }
.cookieknop--ja{ background:var(--merk); border-color:var(--merk); color:#fff; }
.cookieknop--ja:hover{ background:var(--merk-donker,#d8421c); }

.cookiebalk__meer{
  border:0; background:none; padding:6px 4px; cursor:pointer;
  font:inherit; font-size:14px; color:var(--grijs); text-decoration:underline;
}
.cookiebalk__meer:hover{ color:var(--donker); }

.cookiekeuze{
  max-width:var(--max-breedte,1620px); margin:0 auto;
  padding:0 24px 22px; display:grid; gap:12px;
}
.cookiekeuze[hidden]{ display:none; }
.cookieregel{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.cookieregel input{ margin-top:3px; flex:0 0 auto; width:17px; height:17px; }
.cookieregel strong{ display:block; font-size:14.5px; color:var(--donker); }
.cookieregel span{ font-size:13.5px; line-height:1.6; color:var(--grijs); }
.cookiekeuze .cookieknop{ justify-self:start; }

/* De knop in de voettekst ziet eruit als de links ernaast. Een knop en
   geen link, want hij gaat nergens heen — hij opent de balk. */
.voet__cookieknop{
  border:0; background:none; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline;
}
.voet__cookieknop:hover{ color:var(--merk); }

/* Het vlak dat een speler vervangt zolang er geen toestemming is. */
.mediavlak{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:26px 20px; text-align:center;
  background:var(--vlak-zacht); border:1px dashed var(--lijn); border-radius:12px;
  min-height:152px;
}
.mediavlak svg{ width:28px; height:28px; color:var(--grijs); }
.mediavlak p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--grijs); max-width:34ch; }
.mediavlak strong{ display:block; font-size:14.5px; color:var(--donker); margin-bottom:2px; }
.mediavlak__knop{
  padding:9px 18px; font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  border:0; border-radius:9px; background:var(--merk); color:#fff;
}
.mediavlak__knop:hover{ background:var(--merk-donker,#d8421c); }
.mediavlak__extern{ font-size:13px; color:var(--grijs); }

@media (max-width:760px){
  .cookiebalk__binnen{ padding:18px 16px; gap:16px; }
  .cookiebalk__knoppen{ width:100%; }
  .cookiebalk__knoppen .cookieknop{ flex:1 1 auto; text-align:center; }
  .cookiekeuze{ padding:0 16px 18px; }
}

/* =====================================================================
   Landingspagina
   ===================================================================== */
.landing{ padding:8px 0 60px; }

.landingkop{ max-width:760px; margin:0 0 32px; }
.landingkop h1{ margin:0 0 10px; }
.landingkop__sub{
  margin:0 0 14px; font-size:18px; line-height:1.5; color:var(--merk);
  font-family:var(--font-kop);
}
.landingkop__intro{ font-size:16px; line-height:1.8; color:var(--lees); }

.landinguitgelicht{ margin:0 0 44px; }
.landinguitgelicht h2{ margin:0 0 18px; }

.landinglijst__kop{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin:0 0 20px;
}
.landinglijst__kop h2{ margin:0; }
.landingsorteer select{
  padding:9px 14px; font:inherit; font-size:14.5px;
  border:1px solid var(--lijn); border-radius:9px; background:var(--vlak);
  color:var(--tekst);
}
.landinglijst__leeg{
  padding:30px; text-align:center; color:var(--grijs);
  background:var(--vlak-zacht); border-radius:12px;
}

/* De bladzijdenummers zijn vervangen door "Laad meer"; die opmaak komt
   uit .meer en .meerknop, dezelfde als op het artiestenoverzicht. */

/* De tekst en de vragen staan onder de lijst; die hergebruiken de
   opmaak van de categoriepagina, dus daar is hier niets voor nodig. */
.landing .paginatekst{ margin-top:44px; }

/* "Aan het typen": drie bolletjes die op en neer gaan. */
.chattypt{
  display:flex; align-items:center; gap:5px;
  padding:8px 16px 10px;
}
.chattypt[hidden]{ display:none; }
.chattypt__bol{
  width:6px; height:6px; border-radius:50%; background:var(--grijs);
  animation:chattypt 1.2s infinite ease-in-out;
}
.chattypt__bol:nth-child(2){ animation-delay:.16s; }
.chattypt__bol:nth-child(3){ animation-delay:.32s; }
.chattypt__tekst{ margin-left:5px; font-size:12.5px; color:var(--grijs); }

@keyframes chattypt{
  0%, 60%, 100% { transform:none; opacity:.45; }
  30%            { transform:translateY(-4px); opacity:1; }
}

/* Wie beweging liever niet ziet, krijgt alleen de tekst. */
@media (prefers-reduced-motion:reduce){
  .chattypt__bol{ animation:none; }
}

/* =====================================================================
   Tekstblok op de homepagina, met de hulpkaart ernaast
   ===================================================================== */
.hometekst{ padding:56px 0 12px; }

.hometekst__binnen{ display:grid; gap:26px; }

/* minmax(0,1fr) en niet 1fr: een gridkolom groeit anders mee met zijn
   inhoud, en dan duwt een lange regel of een tabel de pagina uit elkaar.
   Dezelfde val als bij de videocarrousel. */
/* Ongeveer 62/38, zoals op het ontwerp — niet 1fr plus een vaste 300px,
   want dan wordt de donkere kaart op een breed scherm een smalle strook
   naast een heel breed tekstvlak.

   minmax(0,…) op allebei: een gridkolom groeit anders mee met zijn
   inhoud en duwt de pagina uit elkaar. Dezelfde val als bij de
   videocarrousel. */
.hometekst__binnen--kaart{
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
  gap:26px;
}

/* De twee kaarten. `align-items:stretch` (de standaard) laat ze even
   hoog worden — met `start` zou de donkere kaart maar half zo hoog zijn
   als de tekst ernaast, en dat is precies wat er niet klopte. */
.hometekst__binnen--kaart{ align-items:stretch; }

/* --- de lichte kaart met de tekst --- */
.tekstkaart{
  min-width:0;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:18px;
  padding:34px 38px 32px;
  box-shadow:0 2px 10px rgba(24,28,38,.04);
}
.tekstkaart__kop{
  margin:0 0 14px; font-size:26px; line-height:1.25;
}
/* Het streepje onder de kop; korter dan de kop zelf, in de merkkleur.

   Ook op de eerste h2 uit de tekst zelf: vul je geen aparte kop in maar
   begint je HTML met een <h2>, dan hoort die er net zo uit te zien. */
.tekstkaart__kop::after,
.tekstkaart .paginatekst > *:first-child > h2:first-child::after,
.tekstkaart .paginatekst h2:first-child::after{
  content:''; display:block; width:34px; height:3px; border-radius:2px;
  background:var(--merk); margin-top:14px;
}

.tekstkaart .paginatekst h2:first-child{
  margin-top:0; font-size:26px; line-height:1.25;
}
/* .paginatekst brengt zijn eigen achtergrond, rand en padding mee —
   want op een losse pagina ís hij de kaart. Binnen deze kaart levert dat
   een kaart in een kaart op. Hier dus alleen de typografie. */
.tekstkaart .paginatekst{
  margin:0; max-width:none; padding:0;
  background:none; border:0; border-radius:0;
}

/* --- de donkere kaart ernaast --- */
.hulpkaart-home{
  /* `align-items:flex-start` liet de tekst krimpen tot zijn eigen
     breedte in plaats van de kaart te vullen. Nu `stretch` (de
     standaard), met de knop apart teruggezet zodat die niet over de
     volle breedte uitrekt. */
  display:flex; flex-direction:column;
  min-width:0;
  background:var(--diep); color:#fff; border-radius:18px;
  padding:34px 32px 32px;
}
.hulpkaart-home__kop{
  margin:0 0 14px; font-size:26px; line-height:1.25; color:#fff;
}
.hulpkaart-home__kop span{ display:block; color:var(--merk); }
.hulpkaart-home__kop::after{
  content:''; display:block; width:34px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.22); margin-top:14px;
}

.hulpkaart-home__tekst{
  margin:0 0 26px; font-size:15.5px; line-height:1.7; color:#c8cdd6;
}

/* De knop onderaan, ook als de tekst korter is dan die ernaast — en
   niet over de volle breedte. */
.hulpkaart-home .cms-knop{ margin-top:auto; align-self:flex-start; }

@media (max-width:1000px){
  .hometekst__binnen--kaart{ grid-template-columns:minmax(0, 1fr); }
  .tekstkaart, .hulpkaart-home{ padding:28px 26px; }
}

@media (max-width:560px){
  .hometekst{ padding-top:38px; }
  .tekstkaart, .hulpkaart-home{ padding:24px 20px; border-radius:14px; }
  .tekstkaart__kop, .hulpkaart-home__kop{ font-size:22px; }
}

/* =====================================================================
   Presskit op de artiestpagina
   ===================================================================== */
.presskit{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:22px 24px;
  background:var(--vlak-zacht); border:1px solid var(--lijn); border-radius:14px;
}
.presskit__ring{
  flex:0 0 48px; width:48px; height:48px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--vlak); border:1px solid var(--lijn); color:var(--merk);
}
.presskit__ring svg{ width:21px; height:21px; }

.presskit__tekst{ flex:1 1 240px; min-width:0; }
.presskit__tekst h2{ margin:0 0 3px; font-size:17px; }
.presskit__tekst p{ margin:0; font-size:14px; line-height:1.55; color:var(--grijs); }

.presskit__knop{ flex:0 0 auto; }
.presskit__knop svg{ width:17px; height:17px; }

@media (max-width:620px){
  .presskit{ gap:14px; padding:18px; }
  /* De knop over de volle breedte: naast een lange naam past hij anders
     net niet, en dan valt hij half buiten de kaart. */
  .presskit__knop{ flex:1 1 100%; justify-content:center; }
}