/* zaalzeven.nl v2 /mogelijkheden/feesten-en-recepties/. Gegenereerd uit de blokkenkiezer (zaalzeven-feesten-blokkenkiezer), keuze 1e-2c-3b-4c-5e-6c-7a-8c-9d.
   Laadt NA /v2/home.css (kop, voet, knoppen, chips, variabelen, productieregels komen daaruit).
   Deel 1 = wat de feesten-paginastijl.css gebruikt en home.css nog niet heeft (opzet gelijk aan bruiloften.css); deel 2 = blok-CSS letterlijk uit de kiezer
   (blok 9d = bruidsmap-blok b8d van bruiloften, hernoemd); deel 3 (productie) = handwerk: echte knoppen, carrousels met scroll-snap, details-FAQ, tablet.
   Mobiel: @media (max-width:700px) i.p.v. @container pv uit de kiezer. */

/* ===== 1. aanvulling op home.css (uit paginastijl.css van de kiezer) ===== */
.pv{--zz-schaduw-rgb:23,0,36;--zz-ivoor-70:rgba(255,255,255,.7);--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 .klein{font-size:13.5px;line-height:1.7}
.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 .chip--aan .icon{color:var(--zz-ivoor)}
.pv .dots{display:flex;gap:7px;align-items:center}
.pv .dots>*{height:9px;width:25px;border-radius:22px;background:rgba(215,25,33,.25);transition:width .2s,background-color .2s}
.pv .dots>.actief{width:39px;background: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: in deze kiezer staat het check-icoon 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 li b{font-weight:600;color:var(--zz-paars)}
.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 .spec b{display:block;font-weight:600;color:var(--zz-paars);font-size:12.5px;letter-spacing:0}
.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 .pijlen{display:flex;gap:10px}
.pv .pijl{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--zz-ivoor);color:var(--zz-rood);box-shadow:var(--zz-schaduw)}
.pv .pijl--aan{background:var(--zz-rood);color:var(--zz-ivoor)}
.pv .pijl .icon{width:18px;height:18px}
.pv .faq-item{background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:var(--zz-schaduw);margin-bottom:14px;overflow:hidden}
.pv .faq-item .vraag{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-size:15px;color:var(--zz-paars);font-weight:500;line-height:1.5}
.pv .faq-item .vraag .icon{color:var(--zz-paars)}
.pv .faq-item .antwoord{padding:0 22px 20px;font-size:14.5px;line-height:1.75}
/* aanbod-carrousel (.ak) */
.pv .aanbod-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.pv .aanbod-strip{display:flex;gap:24px;overflow:hidden;padding-bottom:10px}
.pv .ak{flex:0 0 min(820px,92%);display:grid;grid-template-columns:1fr 1.45fr;align-items:center;background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:var(--zz-schaduw);overflow:hidden}
.pv .ak-vlak{padding:34px 30px;display:flex;flex-direction:column;justify-content:center}
.pv .ak-naam{font-family:var(--display);font-weight:700;font-size:34px;color:var(--zz-rood);line-height:1.1;margin:0}
.pv .ak-body{font-size:13px;line-height:1.7;margin-top:12px}
.pv .ak-regels{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.pv .ak-knoppen{display:flex;gap:10px;padding-top:20px;flex-wrap:wrap}
.pv .ak-knoppen .btn{padding:10px 18px;font-size:13.5px}
.pv .ak-foto{padding:14px 14px 14px 0;position:relative}
.pv .ak-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
/* kaarten met foto (.kaart__foto/.kaart__body), slider (vaste staat) + navigatie */
.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)}
.pv .icon-chip--groot{width:56px;height:56px}
.pv .icon-chip--groot .icon{width:24px;height:24px}
.pv .slider{display:flex;gap:24px;overflow:hidden}
.pv .slider-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px}
@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%}
  .pv .aanbod-kop{flex-direction:column;align-items:flex-start}
  .pv .aanbod-strip{align-items:flex-start;gap:14px}
  .pv .ak{flex-basis:92%;grid-template-columns:1fr;align-content:start}
  .pv .ak-foto{padding:0;order:-1}
  .pv .ak-foto img{border-radius:0}
  .pv .ak-vlak{padding:24px 24px 28px}
  .pv .ak-naam{font-size:28px}
  .pv .slider{gap:14px}
}

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

/* ===== blok 2: uitklaptegels gelegenheden ===== */
/* Hergebruikt home-v2 blok 2g (.b2g/.as-tegels/.as-tegel/.b2g-extra in home.css, dots in home.js).
   Modifier .b2g--vijf: vijf tegels in plaats van vier. Eigen kop + sectie-padding (home 2g hangt onder de hero),
   uitgeklapte tegel 2.2 i.p.v. 2.6, titels mogen afbreken, knop alleen op de uitgeklapte tegel (ingeklapt te smal),
   veegstrook al vanaf 1100 px (vijf tegels passen daaronder niet). */
.pv .b2g.b2g--vijf{padding:96px 0}
.pv .b2g-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:38px}
.pv .b2g-kop h2{margin-bottom:0;flex:none}
.pv .b2g-kop .sub{max-width:520px;margin-bottom:6px}
.pv .b2g-zak{margin:30px 0 0;font-size:15px}
.pv .b2g--vijf .as-tegel.is-default,.pv .b2g--vijf .as-tegels:hover .as-tegel:hover,.pv .b2g--vijf .as-tegels:focus-within .as-tegel:focus-within{flex-grow:2.2}
.pv .b2g--vijf .as-tegels:hover .as-tegel.is-default:not(:hover),.pv .b2g--vijf .as-tegels:focus-within .as-tegel.is-default:not(:focus-within){flex-grow:1}
.pv .b2g--vijf .as-tegel__tekst{padding:28px 20px}
.pv .b2g--vijf .as-tegel h3,.pv .b2g--vijf .as-tegel:first-child h3{font-size:26px;white-space:normal}
.pv .b2g--vijf .as-tegel .btn{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.pv .b2g--vijf .as-tegel.is-default .btn,
.pv .b2g--vijf .as-tegels:hover .as-tegel:hover .btn,
.pv .b2g--vijf .as-tegels:focus-within .as-tegel:focus-within .btn{opacity:1;visibility:visible}
.pv .b2g--vijf .as-tegels:hover .as-tegel.is-default:not(:hover) .btn,
.pv .b2g--vijf .as-tegels:focus-within .as-tegel.is-default:not(:focus-within) .btn{opacity:0;visibility:hidden}
@container pv (max-width:1100px){
  .pv .b2g--vijf .as-tegels{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pv .b2g--vijf .as-tegels::-webkit-scrollbar{display:none}
  .pv .b2g--vijf .as-tegel,.pv .b2g--vijf .as-tegel.is-default,.pv .b2g--vijf .as-tegels:hover .as-tegel,.pv .b2g--vijf .as-tegels:hover .as-tegel:hover,
  .pv .b2g--vijf .as-tegels:focus-within .as-tegel,.pv .b2g--vijf .as-tegels:focus-within .as-tegel:focus-within{flex:0 0 46%;height:420px;scroll-snap-align:start}
  .pv .b2g--vijf .b2g-extra,.pv .b2g--vijf .as-tegels .as-tegel .b2g-extra{max-height:none!important;opacity:1!important;transform:none!important}
  .pv .b2g--vijf .b2g-extra p{width:auto;max-width:360px}
  .pv .b2g--vijf .as-tegels .as-tegel .btn{opacity:1;visibility:visible}
  .pv .b2g--vijf .b2g-dots{display:flex}
  .pv .b2g-kop{flex-direction:column;align-items:flex-start;gap:8px}
}
@container pv (max-width:900px){
  .pv .b2g--vijf .as-tegel,.pv .b2g--vijf .as-tegel.is-default,.pv .b2g--vijf .as-tegels:hover .as-tegel,.pv .b2g--vijf .as-tegels:hover .as-tegel:hover,
  .pv .b2g--vijf .as-tegels:focus-within .as-tegel,.pv .b2g--vijf .as-tegels:focus-within .as-tegel:focus-within{flex:0 0 80%}
}
@media (max-width:700px){
  .pv .b2g.b2g--vijf{padding:64px 0}
  .pv .b2g-kop{gap:0;margin-bottom:26px}
  .pv .b2g-zak{margin-top:24px}
}
  

/* ===== blok 3b ===== */
.pv .b3b{padding:96px 0}
.pv .b3b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pv .b3b-tegel{padding:34px 30px 32px}
.pv .b3b-tegel .icon-chip{margin-bottom:20px}
.pv .b3b-tegel h3{font-size:24px;line-height:1.15;margin-bottom:8px}
.pv .b3b-tegel p{font-size:14.5px;line-height:1.7}
.pv .b3b-voet{justify-content:center;margin-top:44px}
@media (max-width:700px){
  .pv .b3b{padding:64px 0}
  .pv .b3b-grid{grid-template-columns:1fr;gap:12px}
  .pv .b3b-tegel{display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding:20px 20px 20px 18px;align-items:start}
  .pv .b3b-tegel .icon-chip{width:48px;height:48px;margin:0;grid-row:1 / 3}
  .pv .b3b-tegel h3{font-size:20px;margin:2px 0 4px}
  .pv .b3b-tegel p{font-size:14px;line-height:1.6}
  .pv .b3b-voet{margin-top:28px}
}
  

/* ===== blok 4c ===== */
.pv .b4c-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:36px}
.pv .b4c-kop h2{margin-bottom:10px}
.pv .b4c .slider{padding:4px 2px 12px}
.pv .b4c-kaart{flex:0 0 calc((100% - 72px) / 3.3);display:flex;flex-direction:column}
.pv .b4c-kaart .kaart__body{display:flex;flex-direction:column;gap:8px}
.pv .b4c-kaart h3{font-size:30px}
.pv .b4c-nr{font-size:12px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--zz-paars-2);opacity:.8}
.pv .b4c-regel{font-size:14px;line-height:1.7}
.pv .b4c .slider-nav{margin-top:22px}
.pv .b4c-voet{margin-top:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.pv .b4c-voet p{font-size:14.5px;max-width:600px}
@media (max-width:700px){
  .pv .b4c-kop{flex-direction:column;align-items:flex-start;gap:0;margin-bottom:24px}
  .pv .b4c-kop .pijlen{display:none}
  .pv .b4c-kaart{flex-basis:82%}
  .pv .b4c-kaart h3{font-size:26px}
  .pv .b4c .slider-nav{flex-direction:column;align-items:flex-start;gap:18px}
  .pv .b4c-voet{margin-top:32px}
  .pv .b4c-voet .knoppen{width:100%}
}
  

/* ===== blok 5e ===== */
.pv .b5e .aanbod-kop h2{margin-bottom:10px}
.pv .b5e-nav{display:flex;align-items:center;gap:18px;flex:none}
.pv .b5e .ak-foto{align-self:stretch;display:flex}
.pv .b5e .ak-foto img{height:100%;min-height:320px}
.pv .b5e .ak-regels .spec{align-items:flex-start}
.pv .b5e .ak-regels .spec .icon{margin-top:1px}
.pv .b5e .ak-body{color:var(--zz-grijs)}
@media (max-width:700px){
  .pv .b5e .ak{flex-basis:88%}
  .pv .b5e .ak-foto img{min-height:0;height:200px}
  .pv .b5e .ak-knoppen .btn{flex:1 1 100%}
  .pv .b5e-nav .pijlen{display:none}
}
  

/* ===== blok 6c ===== */
.pv .b6c{padding:88px 0}
.pv .b6c h2{margin-bottom:36px}
.pv .b6c-baan{display:flex;justify-content:center;gap:14px;overflow:hidden}
.pv .b6c-dia{flex:0 0 780px;height:500px;margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--zz-schaduw)}
.pv .b6c-dia img{width:100%;height:100%;object-fit:cover}
.pv .b6c-dia--uit{opacity:.55}
.pv .b6c .slider-nav{margin-top:24px}
@media (max-width:700px){
  .pv .b6c{padding:56px 0}
  .pv .b6c h2{margin-bottom:24px}
  .pv .b6c-baan{justify-content:flex-start;gap:10px;padding-left:20px}
  .pv .b6c-dia{flex:0 0 84%;height:300px}
  .pv .b6c-dia--vorige{display:none}
}
  

/* ===== blok 7a ===== */
.pv .b7a{padding:96px 0}
.pv .b7a h2{text-align:center;margin-bottom:48px}
.pv .b7a-rij{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.pv .b7a-kaart{background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:var(--zz-schaduw);padding:40px 44px 36px;display:flex;flex-direction:column;gap:20px}
.pv .b7a-sterren{display:flex;gap:4px;color:var(--zz-oranje)}
.pv .b7a-sterren .icon{width:18px;height:18px}
.pv .b7a-tekst{font-size:15.5px;line-height:1.8;color:var(--zz-paars-2);flex:1;margin:0}
.pv .b7a-naam{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(var(--zz-schaduw-rgb),.14);font-size:14px;font-weight:500;color:var(--zz-paars);line-height:1.4}
@media (max-width:700px){
  .pv .b7a{padding:64px 0}
  .pv .b7a h2{font-size:34px;margin-bottom:28px}
  .pv .b7a-rij{grid-template-columns:1fr;gap:16px}
  .pv .b7a-kaart{padding:26px 22px 24px;gap:14px}
  .pv .b7a-tekst{font-size:14.5px}
}
  

/* ===== blok 8c ===== */
.pv .b8-vt{font-size:12.5px;opacity:.85}
.pv .b8 .antwoord p+p{margin-top:8px}
.pv .b8c-rij{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start}
.pv .b8c h2{margin-bottom:32px}
.pv .b8c-kaart{position:sticky;top:24px;margin-top:84px;padding:36px 34px;border-top:3px solid var(--zz-rood)}
.pv .b8c-kaart h3{font-size:30px;margin-bottom:12px}
.pv .b8c-kaart > p{font-size:14.5px;line-height:1.75}
.pv .b8c-lijn{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(var(--zz-schaduw-rgb),.14);color:var(--zz-paars);font-weight:500;font-size:16px}
.pv .b8c-lijn:first-of-type{border-top:1px solid rgba(var(--zz-schaduw-rgb),.14);margin-top:22px}
.pv .b8c-lijn div span{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--zz-grijs);font-weight:500;line-height:1.3}
.pv .b8c-kaart .btn{margin-top:24px;width:100%}
@media (max-width:700px){
  .pv .b8c-rij{grid-template-columns:1fr;gap:20px}
  .pv .b8c h2{margin-bottom:22px}
  .pv .b8c .faq-item .vraag{padding:16px 18px;font-size:14.5px}
  .pv .b8c .faq-item .antwoord{padding:0 18px 18px}
  .pv .b8c-kaart{position:static;margin-top:0;padding:26px 22px}
  .pv .b8c-kaart h3{font-size:26px}
}
  

/* ===== blok 9d (= bruiloften b8d, hernoemd) ===== */
.pv .b9d-kaart{display:grid;grid-template-columns:420px 1fr;align-items:center;gap:56px;padding:56px 64px 56px 56px;background:var(--zz-schelp);box-shadow:none}
.pv .b9d-boek{position:relative;width:280px;margin:0 auto;transform:rotate(-4deg)}
.pv .b9d-boek::before{content:"";position:absolute;inset:0;background:var(--zz-ivoor);border-radius:var(--radius);transform:rotate(7deg) translate(14px,6px);box-shadow:0 10px 26px rgba(var(--zz-schaduw-rgb),.16)}
.pv .b9d-omslag{position:relative;background:var(--zz-ivoor);border-radius:var(--radius);padding:14px 14px 22px;box-shadow:0 18px 40px rgba(var(--zz-schaduw-rgb),.22),0 2px 6px rgba(var(--zz-schaduw-rgb),.1)}
.pv .b9d-omslag img{width:100%;height:250px;object-fit:cover;border-radius:2px}
.pv .b9d-titel{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.2;color:var(--zz-paars);margin-top:16px;text-align:center}
.pv .b9d-tekst h2{font-size:48px;margin-bottom:16px}
.pv .b9d-tekst p{font-size:15.5px;line-height:1.8}
.pv .b9d-tekst .knoppen{margin-top:28px}
.pv .b9d-rond{margin-top:22px;font-size:15px}
@media (max-width:700px){
  .pv .b9d-kaart{grid-template-columns:1fr;gap:36px;padding:40px 22px 30px}
  .pv .b9d-boek{width:220px}
  .pv .b9d-omslag img{height:190px}
  .pv .b9d-titel{font-size:17px}
  .pv .b9d-tekst h2{font-size:34px}
  .pv .b9d-tekst .btn{white-space:normal;text-align:center}
}

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

/* pijlen en dots zijn echte knoppen */
.pv .pijl{transition:background-color .2s,color .2s,opacity .2s}
.pv .pijl:not(:disabled):hover{background:var(--zz-rood);color:var(--zz-ivoor)}
.pv .pijl--aan:not(:disabled):hover{background:var(--zz-rood-hover)}
.pv .pijl:disabled{opacity:.4;cursor:default}
.pv .dots>button{cursor:pointer}
.pv .dots>button:not(.actief):hover{background:rgba(215,25,33,.5)}

/* carrousels (data-carrousel): de strook scrollt horizontaal met scroll-snap, swipe werkt native, feesten.js stuurt pijlen en dots */
.pv [data-strip]{scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.pv [data-strip]::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.pv [data-strip]{scroll-behavior:auto}}
/* 4c momenten + 5e prijzen: start-uitgelijnd, ruimte voor de schaduw */
.pv .b4c .slider,.pv .b5e .aanbod-strip{overflow-x:auto;scroll-snap-type:x mandatory;margin:-12px -12px 0;padding:12px 12px 22px;scroll-padding-inline:12px}
.pv .b4c-kaart,.pv .b5e .ak{scroll-snap-align:start}
/* 6c fotoslider: gecentreerd met peek links en rechts; niet-actieve foto's gedimd */
.pv .b6c-baan{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(24px,calc((100% - 780px) / 2)) 14px}
.pv .b6c-dia{scroll-snap-align:center;opacity:.55;transition:opacity .3s}
.pv .b6c-dia.is-actief{opacity:1}
.pv .b6c .slider-nav{margin-top:10px}
@media (max-width:700px){
  .pv .b6c-baan{padding:4px 8% 12px;gap:10px}
}

/* blok 8c: FAQ als <details> */
.pv .faq-item summary{list-style:none;cursor:pointer}
.pv .faq-item summary::-webkit-details-marker{display:none}
.pv .faq-item summary .icon{transition:transform .2s}
.pv .faq-item[open] summary .icon{transform:rotate(180deg)}
.pv .faq-item summary:hover{color:var(--zz-rood)}
.pv .faq-item summary:focus-visible{outline-offset:-2px}
.pv .b8c-lijn:hover{color:var(--zz-rood)}

/* blok 9d: boekje is een link naar de PDF */
.pv .b9d-boek{display:block;transition:transform .25s}
.pv .b9d-boek:hover{transform:rotate(-2deg) translateY(-4px)}

/* tablet */
@media (min-width:701px) and (max-width:1100px){
  .pv .b3b-grid{grid-template-columns:repeat(2,1fr)}
  .pv .b4c-kaart{flex-basis:calc((100% - 24px) / 2.2)}
  .pv .b6c-dia{flex-basis:76%;height:420px}
  .pv .b9d-kaart{grid-template-columns:300px 1fr;gap:40px;padding:48px 40px}
  .pv .b9d-boek{width:240px}
  .pv .b9d-tekst h2{font-size:40px}
}
@media (min-width:701px) and (max-width:900px){
  .pv .b8c-rij{grid-template-columns:1fr;gap:24px}
  .pv .b8c-kaart{position:static;margin-top:0}
  .pv .b9d-kaart{grid-template-columns:1fr;gap:40px}
}