/* zaalzeven.nl v2 /locatie/. Gegenereerd uit de blokkenkiezer (zaalzeven-locatie-blokkenkiezer), keuze 1a-2a-3a-4a-5c-6a-7b-8a-9d.
   Laadt NA /v2/home.css (kop, voet, knoppen, chips, variabelen, b1a-hero en productieregels komen daaruit).
   Deel 1 = wat de kiezer-paginastijl.css gebruikt en home.css nog niet heeft (gelijk aan feesten.css); deel 2 = blok-CSS uit de kiezer
   (2a met vijf kaarten + knop Meer info, 4a als placeholder voor de interactieve plattegrond); deel 3 (productie) = pop-ups (<dialog>), tablet.
   Mobiel: @media (max-width:700px) i.p.v. @container pv uit de kiezer; cqw -> vw. */

/* ===== 1. aanvulling op home.css (uit paginastijl.css van de kiezer) ===== */
.pv{--zz-schaduw-rgb:23,0,36;--zz-rood-hover:#b5141b;
    --display:var(--zz-font-kop);--body:var(--zz-font-tekst);--radius:4px;--radius-chip:8px;--radius-zoekbalk:14px}
.pv .b1a-foto{object-position:center 45%}
@media (max-width:700px){
  .pv .b1a-foto{object-position:55% 45%}
}
/* watermerk als doorlopende paginalaag: de 7 in lavendel */
.pv::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:var(--zz-wm-7),var(--zz-wm-7),var(--zz-wm-7);
  background-repeat:no-repeat;background-position:right -260px top 1000px,left -300px top 42%,right -280px top 76%;
  background-size:760px,900px,820px}
.pv>main{position:relative}
.pv main p a:not(.btn),.pv main li a:not(.btn){color:var(--zz-rood);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}
.pv .accent{color:var(--zz-rood)}
.pv .sub{font-size:17px;opacity:.85}
.pv .center{text-align:center}
.pv .sec-kop{margin-bottom:56px}
.pv .sec-kop h2{margin-bottom:18px}
.pv .sec-kop.center p{max-width:640px;margin-inline:auto}
.pv .sec--ivoor{background:rgba(255,255,255,.72)}
.pv .icon{width:20px;height:20px;flex:none}
.pv .btn .icon{width:16px;height:16px}
.pv .btn--outline{background:transparent;color:var(--zz-rood)}
.pv .btn--outline:hover{background:var(--zz-rood);border-color:var(--zz-rood);color:var(--zz-ivoor)}
.pv .knoppen{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pv .tekstlink{color:var(--zz-rood);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:8px}
.pv .tekstlink:hover{text-decoration-thickness:2px}
.pv .chip .icon{width:16px;height:16px;color:var(--zz-rood)}
.pv .panel{background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:var(--zz-schaduw);overflow:hidden;color:var(--zz-paars-2);padding:40px 44px}
.pv .hairline{border:0;border-top:1px solid rgba(23,0,36,.14);margin:16px 0}
/* vinkjes: het check-icoon staat als svg in de li, niet als ::before (home.css) */
.pv .checks{gap:12px}
.pv .checks li::before{content:none}
.pv .checks li{gap:12px;color:var(--zz-paars-2)}
.pv .checks .icon{width:18px;height:18px;color:var(--zz-rood);margin-top:3px}
.pv .spec{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.35;color:var(--zz-paars-2);letter-spacing:.52px}
.pv .spec .icon{color:var(--zz-rood);width:18px;height:18px}
.pv .icon-chip{flex:none;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:var(--zz-schelp);color:var(--zz-rood);border-radius:50%}
.pv .icon-chip .icon{width:17px;height:17px}
.pv .icon-chip--groot{width:56px;height:56px}
.pv .icon-chip--groot .icon{width:24px;height:24px}
.pv .kaart__foto{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.pv .kaart__body{padding:24px 26px 26px}
.pv .kaart__body h3{color:var(--zz-rood)}
@media (max-width:700px){
  .pv{font-size:15px;line-height:1.8}
  .pv::before{background-size:900px,1100px,1000px;background-position:right -300px top 600px,left -380px top 42%,right -340px top 76%}
  .pv h2{font-size:34px}
  .pv .sec{padding:64px 0}
  .pv .sec-kop{margin-bottom:32px}
  .pv .sec-kop h2{margin-bottom:14px}
  .pv .panel{padding:26px 22px}
  .pv .btn{font-size:14.5px;padding:14px 22px}
  .pv .knoppen .btn{flex:1 1 100%}
}

/* ===== 2. gekozen blokken (uit de kiezer) ===== */

/* ===== blok 2a: vijf witte kaarten (4 ruimtes + entree en garderobe), knop Meer info opent een pop-up ===== */
.pv .b2a .sec-kop{margin-bottom:48px}
.pv .b2a-raster{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.pv .b2a-kaart{display:flex;flex-direction:column;flex:0 0 calc((100% - 80px) / 5);min-width:0}
.pv .b2a-kaart .kaart__body{display:flex;flex-direction:column;gap:12px;flex:1;padding:20px 20px 22px}
.pv .b2a-naam{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pv .b2a-naam h3{font-size:25px}
.pv .b2a-naam .chip{padding:6px 12px;font-size:13.5px;background:var(--zz-schelp);box-shadow:none;color:var(--zz-paars)}
.pv .b2a-kaart p{font-size:14px;line-height:1.65;flex:1}
.pv .b2a-meer{align-self:flex-start;margin-top:2px}
.pv .b2a-kaart p{padding-bottom:14px;border-bottom:1px solid rgba(var(--zz-schaduw-rgb),.12)}
.pv .b2a-meer.btn{padding:10px 18px}
.pv .b2a-voet{margin-top:22px;text-align:center;font-size:13px;color:var(--zz-grijs)}
@media (max-width:1100px){
  .pv .b2a-kaart{flex-basis:calc((100% - 20px) / 2)}
}
@media (max-width:700px){
  .pv .b2a .sec-kop{margin-bottom:28px}
  .pv .b2a-raster{gap:12px}
  .pv .b2a-kaart{flex-basis:calc((100% - 12px) / 2)}
  .pv .b2a-kaart .kaart__body{padding:12px 12px 14px;gap:8px}
  .pv .b2a-naam{flex-direction:column;align-items:flex-start;gap:6px}
  .pv .b2a-naam h3{font-size:21px}
  .pv .b2a-naam .chip{padding:4px 9px;font-size:12px}
  .pv .b2a-kaart p{font-size:12.5px;line-height:1.55;padding-bottom:10px}
  .pv .b2a-meer.btn{width:100%;font-size:13px;padding:10px 8px}
  .pv .b2a-voet{text-align:left}
}

/* ===== blok 3a: capaciteitstabel als invulsjabloon ===== */
/* home.css kent .b3a/.b3a-kop al (agenda op home); hier teruggezet naar de kiezermaten */
.pv .sec.b3a{padding:96px 0}
.pv .b3a-kop{display:grid;grid-template-columns:1fr 1fr;gap:20px 64px;align-items:end;margin-bottom:40px;width:auto;margin-left:0}
.pv .b3a-kop h2{margin:0}
.pv .b3a-kop p{font-size:16px}
.pv .b3a-kop .b3a-gast{margin-top:8px;color:var(--zz-grijs);font-size:14.5px}
.pv .b3a-kaart{padding:10px 0 0}
.pv .b3a-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pv .b3a-tabel{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.pv .b3a-tabel th,.pv .b3a-tabel td{padding:17px 18px;text-align:center;border-bottom:1px solid rgba(23,0,36,.1);white-space:nowrap}
.pv .b3a-tabel thead th{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--zz-paars);border-bottom:1.5px solid var(--zz-lavendel)}
.pv .b3a-tabel th:first-child,.pv .b3a-tabel td:first-child{text-align:left;padding-left:32px}
.pv .b3a-tabel th:last-child,.pv .b3a-tabel td:last-child{padding-right:32px}
.pv .b3a-tabel tbody th{font-family:var(--display);font-weight:700;font-size:21px;color:var(--zz-paars);text-transform:none;letter-spacing:0}
.pv .b3a-tabel .b3a-m2{font-weight:500;color:var(--zz-paars)}
.pv .b3a-tabel .b3a-ntb{color:var(--zz-grijs);font-size:13.5px;font-weight:400}
.pv .b3a-tabel .b3a-ntb span{display:inline-block;background:var(--zz-lavendel-licht);border-radius:var(--radius);padding:3px 10px}
.pv .b3a-tabel .b3a-buiten{color:var(--zz-grijs);font-style:italic;font-weight:400}
.pv .b3a-tabel tr.b3a-totaal th,.pv .b3a-tabel tr.b3a-totaal td{background:var(--zz-schelp);border-bottom:0}
.pv .b3a-voet{display:flex;gap:10px;align-items:flex-start;padding:18px 32px 22px;font-size:13.5px;line-height:1.6;color:var(--zz-grijs)}
.pv .b3a-voet .icon{width:16px;height:16px;color:var(--zz-rood);margin-top:3px}
@media (max-width:700px){
  .pv .sec.b3a{padding:64px 0}
  .pv .b3a-kop{grid-template-columns:1fr;gap:6px;margin-bottom:26px}
  .pv .b3a-kop p{font-size:15px}
  .pv .b3a-tabel{font-size:14px}
  .pv .b3a-tabel th,.pv .b3a-tabel td{padding:13px 12px}
  .pv .b3a-tabel th:first-child,.pv .b3a-tabel td:first-child{padding-left:18px;position:sticky;left:0;background:var(--zz-ivoor);z-index:1}
  .pv .b3a-tabel tr.b3a-totaal th:first-child{background:var(--zz-schelp)}
  .pv .b3a-tabel tbody th{font-size:18px}
  .pv .b3a-voet{padding:16px 18px 20px}
}

/* ===== blok 4a: plattegrond, nu een placeholder ===== */
/* Later: <img class="b4a-plattegrond__beeld"> + <button class="hotspot" style="left:..%;top:..%"> (wellness-asteria-patroon)
   absoluut gepositioneerd binnen .b4a-plattegrond; de placeholder (.b4a-leeg) gaat dan weg. */
.pv .b4a .sec-kop{margin-bottom:44px;max-width:720px}
.pv .b4a .sec-kop p{font-size:16.5px;line-height:1.8}
.pv .b4a-plattegrond{position:relative;max-width:1080px;margin-inline:auto;aspect-ratio:16/10;background:var(--zz-schelp);
  border:1.5px dashed var(--zz-lavendel);border-radius:var(--radius);overflow:hidden}
.pv .b4a-plattegrond>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pv .b4a-leeg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
.pv .b4a-leeg .icon{width:36px;height:36px;color:var(--zz-rood)}
.pv .b4a-leeg p{font-size:15px;color:var(--zz-grijs);font-weight:500}
@media (max-width:700px){
  .pv .b4a .sec-kop{margin-bottom:28px}
  .pv .b4a .sec-kop p{font-size:15px}
  .pv .b4a-plattegrond{aspect-ratio:4/3}
  .pv .b4a-leeg .icon{width:28px;height:28px}
}

/* ===== blok 5c: barfoto met faciliteitenkaart ===== */
.pv .b5c-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);align-items:center}
.pv .b5c-foto{border-radius:var(--radius);overflow:hidden;box-shadow:var(--zz-schaduw)}
.pv .b5c-foto img{width:100%;height:560px;object-fit:cover}
.pv .b5c-kaart{position:relative;z-index:1;margin-left:-90px;background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:var(--zz-schaduw);padding:40px 40px 38px}
.pv .b5c-kaart h2{font-size:44px;margin-bottom:24px}
.pv .b5c .checks{grid-template-columns:1fr 1fr;gap:12px 26px}
.pv .b5c .checks li{font-size:14px;line-height:1.5}
.pv .b5c .knoppen{margin-top:30px}
@media (max-width:700px){
  .pv .b5c-grid{grid-template-columns:1fr}
  .pv .b5c-foto img{height:280px}
  .pv .b5c-kaart{margin:-60px 14px 0;padding:26px 22px 28px}
  .pv .b5c-kaart h2{font-size:32px;margin-bottom:18px}
  .pv .b5c .checks{grid-template-columns:1fr;gap:10px}
  .pv .b5c .knoppen{margin-top:24px}
}

/* ===== blok 6a: kaart links, adreskaart rechts ===== */
.pv .b6a .sec-kop{margin-bottom:44px}
.pv .b6a-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center}
.pv .b6a-kaart{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--zz-schaduw);background:var(--zz-ivoor)}
.pv .b6a-kaart img{width:100%;height:500px;object-fit:cover}
.pv .b6a-bron{margin-top:10px;font-size:12px;line-height:1.4;color:var(--zz-grijs)}
.pv .b6a-paneel{position:relative;z-index:1;margin-left:-64px;padding:40px 40px 38px}
.pv .b6a-adres{display:flex;align-items:flex-start;gap:16px}
.pv .b6a-adres h3{font-size:28px;line-height:1.15}
.pv .b6a-adres h3 span{display:block;font-size:22px;color:var(--zz-paars-2)}
.pv .b6a-tekst{margin-top:22px;padding-top:22px;border-top:1px solid rgba(23,0,36,.14);font-size:15px;line-height:1.8}
.pv .b6a-tekst + .b6a-tekst{margin-top:12px;padding-top:0;border-top:0}
.pv .b6a-tekst b{font-weight:600;color:var(--zz-paars)}
.pv .b6a-acties{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.pv .b6a .tekstlink .icon{width:18px;height:18px}
@media (max-width:700px){
  .pv .b6a .sec-kop{margin-bottom:28px}
  .pv .b6a-raster{grid-template-columns:1fr}
  .pv .b6a-kaart img{height:300px}
  .pv .b6a-paneel{margin:16px 0 0;padding:26px 22px 26px}
  .pv .b6a-adres h3{font-size:24px}
  .pv .b6a-adres h3 span{font-size:19px}
  .pv .b6a-tekst{font-size:14.5px}
  .pv .b6a-acties .btn{width:100%}
}

/* ===== blok 7b: zoals blijven slapen op home-v2, gespiegeld ===== */
.pv .b7b-raster{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:72px;align-items:center}
.pv .b7b-beeld{position:relative;height:500px}
.pv .b7b-foto{position:absolute;left:0;top:0;width:330px;height:100%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--zz-schaduw)}
.pv .b7b-foto img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.pv .b7b-lijst{position:absolute;left:250px;right:0;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pv .b7b-lijst li{display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:var(--radius);background:rgba(255,255,255,.55);font-size:15px;font-weight:500;color:var(--zz-paars);line-height:1.3}
.pv .b7b-lijst li .icon{color:var(--zz-rood);width:18px;height:18px}
.pv .b7b-lijst li.b7b-aan{background:var(--zz-ivoor);box-shadow:var(--zz-schaduw);margin-left:-22px}
.pv .b7b-tekst h2{max-width:440px;margin-bottom:0}
.pv .b7b-tekst .lead{margin-top:18px;max-width:460px;line-height:1.75}
.pv .b7b .knoppen{margin-top:30px}
@media (max-width:700px){
  .pv .b7b-raster{grid-template-columns:1fr;gap:32px}
  .pv .b7b-tekst{order:-1}
  .pv .b7b-tekst .lead{font-size:16px}
  .pv .b7b-beeld{height:auto}
  .pv .b7b-foto{position:relative;width:100%;height:280px}
  .pv .b7b-lijst{position:relative;left:auto;right:auto;top:auto;transform:none;margin:-28px 14px 0;gap:8px}
  .pv .b7b-lijst li{background:var(--zz-ivoor);box-shadow:var(--zz-schaduw);padding:13px 16px;font-size:14px}
  .pv .b7b-lijst li.b7b-aan{margin-left:0}
}

/* ===== blok 8a: twee kolommen met fotorij (telefoon: gestapeld) ===== */
.pv .b8a h2{margin-bottom:36px}
.pv .b8a-kolommen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
.pv .b8a-kolommen p{font-size:16px;line-height:1.85}
.pv .b8a-kolommen p + p{margin-top:16px}
.pv .b8a .b8a-gastheer{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(var(--zz-schaduw-rgb),.14);font-weight:500;color:var(--zz-paars);line-height:1.5}
.pv .b8a-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.pv .b8a-fotos img{width:100%;height:300px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--zz-schaduw)}
@media (max-width:700px){
  .pv .b8a h2{margin-bottom:22px}
  .pv .b8a-kolommen{grid-template-columns:1fr;gap:16px}
  .pv .b8a-kolommen p{font-size:15px;line-height:1.8}
  .pv .b8a-fotos{grid-template-columns:1fr;gap:12px;margin-top:36px}
  .pv .b8a-fotos img{height:220px}
}

/* ===== blok 9d: fotowolk zoals het slot op home-v2 (eigen klassen, maten gelijk aan .b9j) ===== */
.pv .sec.b9d{background:var(--zz-schelp);padding:80px 0 88px}
.pv .b9d-wolk{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:auto auto;column-gap:20px;align-items:start;width:min(1356px,100cqw - 48px);margin-left:calc((100% - min(1356px,100cqw - 48px)) / 2)}
.pv .b9d-kol{display:flex;flex-direction:column;gap:20px;min-width:0}
.pv .b9d-kol--buiten{grid-row:1 / 3}
.pv .b9d-kol--laag{padding-top:50px}
.pv .b9d-kol img{display:block;width:100%;height:auto;object-fit:cover;border-radius:12px;box-shadow:0 6px 16px rgba(23,0,36,.08)}
.pv .b9d-h1{aspect-ratio:152/189}
.pv .b9d-h2{aspect-ratio:1/1}
.pv .b9d-h3{aspect-ratio:152/303}
.pv .b9d-midden{grid-column:3 / 7;grid-row:2;text-align:center;padding-top:44px}
.pv .b9d-midden h2{font-size:48px;margin-bottom:0}
.pv .b9d-midden .lead{margin:12px auto 0;max-width:470px;font-size:17px}
.pv .b9d-balk{display:flex;align-items:center;gap:16px;margin:30px auto 0;max-width:640px;background:var(--zz-ivoor);border-radius:var(--radius-zoekbalk);box-shadow:0 18px 36px -16px rgba(23,0,36,.2),var(--zz-schaduw);padding:12px 12px 12px 24px;text-align:left}
.pv .b9d-veld{flex:1;min-width:0;line-height:1.35;display:block}
.pv .b9d-mini{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--zz-paars-2);font-weight:500}
.pv .b9d-waarde{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--zz-paars);white-space:nowrap}
.pv .b9d-waarde .icon{width:14px;height:14px;color:var(--zz-rood)}
.pv .b9d-balk .btn{flex:none;font-size:14px;padding:12px 18px}
.pv .b9d-balk .btn--outline{padding:12px 18px}
.pv .b9d-regel{display:flex;justify-content:center;gap:8px 28px;flex-wrap:wrap;margin-top:18px;font-size:13px;letter-spacing:.3px;line-height:1.5;color:var(--zz-paars)}
.pv .b9d-regel a,.pv .b9d-regel .b9d-adres{display:inline-flex;align-items:center;gap:8px}
.pv .b9d-regel a:hover{color:var(--zz-rood)}
.pv .b9d-regel .icon{width:15px;height:15px;color:var(--zz-rood)}
@media (max-width:700px){
  .pv .sec.b9d{padding:56px 0 64px}
  .pv .b9d-wolk{grid-template-columns:repeat(3,98px);justify-content:center;column-gap:8px;width:auto;margin-left:0}
  .pv .b9d-kol--buiten,.pv .b9d-kol--weg{display:none}
  .pv .b9d-kol--laag{padding-top:0}
  .pv .b9d-kol img{width:98px;height:131px;aspect-ratio:auto}
  .pv .b9d-midden{grid-column:1 / -1;margin-inline:calc((310px - (100cqw - 32px)) / 2);padding-top:28px}
  .pv .b9d-midden h2{font-size:34px}
  .pv .b9d-balk{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .pv .b9d-veld{background:var(--zz-zand);border-radius:var(--radius);padding:10px 14px}
  .pv .b9d-balk .btn,.pv .b9d-balk .btn--outline{width:100%;font-size:15px;padding:14px 22px}
  .pv .b9d-regel{flex-direction:column;align-items:center;gap:8px}
}

/* ===== 3. productie ===== */

/* pop-ups per ruimte: native <dialog> (Esc sluit native, locatie.js regelt openen, sluitknop, klik op de achtergrond, focus terug) */
html.pv-dialog-open{overflow:hidden}
.pv .pv-dialog{padding:0;border:0;background:transparent;width:min(520px,calc(100% - 32px));max-width:520px;max-height:calc(100% - 48px);
  overflow:visible;color:var(--zz-paars-2)}
.pv .pv-dialog::backdrop{background:rgba(23,0,36,.6)}
.pv .pv-dialog__kaart{position:relative;background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:0 24px 60px rgba(23,0,36,.28);
  max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain}
.pv .pv-dialog__foto{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.pv .pv-dialog__body{padding:26px 30px 30px}
.pv .pv-dialog__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pv .pv-dialog__kop h3{font-size:32px;color:var(--zz-paars)}
.pv .pv-dialog__kop .chip{padding:6px 12px;font-size:13.5px;background:var(--zz-schelp);box-shadow:none;color:var(--zz-paars)}
.pv .pv-dialog__body p{font-size:15px;line-height:1.75}
.pv .pv-dialog__body p + p{margin-top:10px}
.pv .pv-dialog__body .pv-dialog__lead{font-weight:500;color:var(--zz-paars)}
.pv .pv-dialog__body .knoppen{margin-top:24px}
.pv .pv-dialog__sluit{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--zz-ivoor);color:var(--zz-paars);
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(23,0,36,.18);transition:background-color .2s,color .2s}
.pv .pv-dialog__sluit:hover{background:var(--zz-rood);color:var(--zz-ivoor)}
.pv .pv-dialog__sluit .icon{width:20px;height:20px}
.pv .pv-dialog[open]{animation:pv-dialog-in .22s ease-out}
.pv .pv-dialog[open]::backdrop{animation:pv-dialog-fade .22s ease-out}
@keyframes pv-dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pv-dialog-fade{from{opacity:0}to{opacity:1}}
/* fallback zonder HTMLDialogElement: open-attribuut, vast in beeld */
.pv .pv-dialog.is-fallback[open]{position:fixed;inset:24px 0 auto;margin:0 auto;z-index:100}
@media (max-width:700px){
  .pv .pv-dialog{width:100%;max-width:none;margin:auto 0 0;max-height:calc(100% - 24px)}
  .pv .pv-dialog__kaart{border-radius:var(--radius) var(--radius) 0 0;max-height:calc(100vh - 24px)}
  .pv .pv-dialog__body{padding:22px 20px 26px}
  .pv .pv-dialog__kop h3{font-size:28px}
  .pv .pv-dialog__body p{font-size:14.5px}
  .pv .pv-dialog.is-fallback[open]{inset:auto 0 0}
}
@media (prefers-reduced-motion:reduce){
  .pv .pv-dialog[open],.pv .pv-dialog[open]::backdrop{animation:none}
}

/* focus: knoppen in de kaarten en de pop-up */
.pv .b2a-meer:focus-visible,.pv .pv-dialog__sluit:focus-visible,.pv .b3a-scroll:focus-visible{outline:2px solid var(--zz-rood);outline-offset:3px}

/* tablet */
@media (min-width:701px) and (max-width:1100px){
  .pv .b3a-kop{grid-template-columns:1fr;gap:12px}
  .pv .b5c-grid{grid-template-columns:1fr}
  .pv .b5c-foto img{height:420px}
  .pv .b5c-kaart{margin:-90px 40px 0}
  .pv .b6a-raster{grid-template-columns:1fr}
  .pv .b6a-kaart img{height:420px}
  .pv .b6a-paneel{margin:-64px 40px 0}
  .pv .b7b-raster{grid-template-columns:1fr;gap:48px}
  .pv .b7b-beeld{max-width:560px}
  .pv .b9d-midden{grid-column:2 / 8}
}