/* zaalzeven.nl v2 /mogelijkheden/bruiloften/. Gegenereerd uit de blokkenkiezer (zaalzeven-bruiloften-blokkenkiezer), keuze 1e-2a-3e-4e-5f-6a-7c-8d.
   Laadt NA /v2/home.css (kop, voet, knoppen, chips, variabelen, productieregels komen daaruit).
   Deel 1 = wat de bruiloften-paginastijl.css gebruikt en home.css nog niet heeft; deel 2 = blok-CSS letterlijk uit de kiezer;
   deel 3 (productie) = handwerk: echte knoppen, tabs, carrousel met scroll-snap, details-FAQ, tablet. */

/* ===== 1. aanvulling op home.css (uit paginastijl.css van de bruiloften-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 40%}
@container pv (max-width:700px){
  .pv .b1a-foto{object-position:62% 40%}
}
/* 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:#fff}
.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:#fff}
.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-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)}
@container pv (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}
}

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

/* ===== blok 2a ===== */
.pv .b2a{padding:88px 0}
.pv .b2a-rij{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center}
.pv .b2a-kop h2{margin-bottom:16px}
.pv .b2a-paneel{padding:40px 44px}
.pv .b2a .checks{grid-template-columns:1fr 1fr;gap:22px 40px}
.pv .b2a .checks li{font-size:15.5px}
@container pv (max-width:700px){
  .pv .b2a{padding:56px 0}
  .pv .b2a-rij{grid-template-columns:1fr;gap:20px}
  .pv .b2a-kop h2{margin-bottom:8px}
  .pv .b2a-paneel{padding:26px 22px}
  .pv .b2a .checks{grid-template-columns:1fr;gap:16px}
  .pv .b2a .checks li{font-size:15px}
}

/* ===== blok 3e ===== */
.pv .b3e .sec-kop{margin-bottom:30px}
.pv .b3e-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.pv .b3e-podium{position:relative;padding-bottom:70px}
.pv .b3e-foto{width:100%;height:540px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--zz-schaduw)}
.pv .b3e-kaart{position:absolute;right:48px;bottom:0;width:440px;padding:30px 32px 30px}
.pv .b3e-kaart h3{font-size:34px;margin-bottom:12px}
.pv .b3e-specs{display:flex;gap:26px;margin-bottom:14px}
.pv .b3e-kaart p{font-size:14.5px;line-height:1.7}
.pv .b3e-kaart .hairline{margin:18px 0}
.pv .b3e-teller{display:flex;justify-content:space-between;align-items:center}
.pv .b3e-teller span{font-size:13px;font-weight:500;color:var(--zz-paars-2)}
@container pv (max-width:700px){
  .pv .b3e-chips{justify-content:flex-start;gap:8px;margin-bottom:22px}
  .pv .b3e-chips .chip{padding:8px 13px;font-size:13.5px}
  .pv .b3e-podium{padding-bottom:0}
  .pv .b3e-foto{height:280px}
  .pv .b3e-kaart{position:relative;right:auto;bottom:auto;width:auto;margin:-50px 14px 0;padding:24px 22px}
  .pv .b3e-kaart h3{font-size:28px}
  .pv .b3e-specs{flex-direction:column;gap:10px}
}

/* ===== blok 4e ===== */
.pv .b4e .aanbod-kop h2{margin-bottom:10px}
.pv .b4e-nav{display:flex;align-items:center;gap:18px;flex:none}
.pv .b4e .ak-foto img{height:100%;min-height:300px}
.pv .b4e .ak-foto{align-self:stretch;display:flex}
.pv .b4e .ak-regels .spec{align-items:flex-start}
.pv .b4e .ak-regels .spec .icon{margin-top:1px}
.pv .b4e-extra{margin-top:30px;display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.6}
.pv .b4e-extra .icon{color:var(--zz-rood)}
.pv .b4e-extra b{font-weight:600;color:var(--zz-paars)}
.pv .b4e-extra .klein{opacity:.85}
@container pv (max-width:700px){
  .pv .b4e .aanbod-strip{padding-left:0}
  .pv .b4e .ak{flex-basis:88%}
  .pv .b4e .ak-foto img{min-height:0;height:200px}
  .pv .b4e .ak-knoppen .btn{flex:1 1 100%}
  .pv .b4e-nav .pijlen{display:none}
  .pv .b4e-extra{align-items:flex-start;margin-top:22px}
  .pv .b4e-extra .icon{margin-top:3px}
}

/* ===== blok 5f ===== */
.pv .b5f{padding:64px 0;background:var(--zz-zand)}
.pv .b5f-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 .b5f-kol{display:flex;flex-direction:column;gap:20px;grid-row:1 / 3}
.pv .b5f-kol--mid{grid-row:1}
.pv .b5f-kol--laag{margin-top:50px}
.pv .b5f-wolk img{display:block;width:100%;height:auto;object-fit:cover;border-radius:12px;box-shadow:0 6px 16px rgba(23,0,36,.08);background:var(--zz-schelp)}
.pv .b5f-hoog{aspect-ratio:152/189}
.pv .b5f-vierkant{aspect-ratio:1/1}
.pv .b5f-lang{aspect-ratio:152/303}
.pv .b5f-tekst{grid-column:3 / 7;grid-row:2;text-align:center;padding-top:46px}
.pv .b5f-tekst h2{font-size:48px;margin:0 0 14px}
.pv .b5f-tekst p{font-size:18px;font-weight:400;color:var(--zz-paars-2);margin:0 0 44px}
.pv .b5f-balk{display:flex;align-items:center;gap:20px;background:var(--zz-ivoor);border-radius:var(--radius-zoekbalk);box-shadow:var(--zz-schaduw);padding:14px 14px 14px 26px;text-align:left}
.pv .b5f-veld{display:flex;align-items:center;gap:12px;text-decoration:none;line-height:1.35;color:var(--zz-paars)}
.pv .b5f-veld .icon{color:var(--zz-rood)}
.pv .b5f-mini{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--zz-paars-2);font-weight:500}
.pv .b5f-waarde{display:block;font-size:16px;font-weight:500;color:var(--zz-paars)}
.pv .b5f-balk .btn{margin-left:auto;padding-top:17px;padding-bottom:17px}
@container pv (max-width:700px){
  .pv .b5f{padding:56px 0}
  .pv .b5f-wolk{grid-template-columns:repeat(3,98px);justify-content:center;column-gap:8px;width:auto;margin-left:0}
  .pv .b5f-kol{grid-row:1;gap:0}
  .pv .b5f-kol--laag{margin-top:0}
  .pv .b5f-kol--rand,.pv .b5f-kol--m4{display:none}
  .pv .b5f-wolk img{width:98px;height:131px;aspect-ratio:auto}
  .pv .b5f-tekst{grid-column:1 / -1;margin-inline:calc((310px - (100cqw - 32px)) / 2);padding-top:30px}
  .pv .b5f-tekst h2{font-size:30px;margin-bottom:12px}
  .pv .b5f-tekst p{font-size:16px;margin-bottom:28px}
  .pv .b5f-balk{flex-direction:column;align-items:stretch;gap:12px;padding:12px}
  .pv .b5f-veld{background:var(--zz-schelp);border-radius:var(--radius-chip);padding:12px 16px}
  .pv .b5f-balk .btn{margin-left:0;width:100%}
}

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

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

/* ===== blok 8d ===== */
.pv .b8d-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 .b8d-boek{position:relative;width:280px;margin:0 auto;transform:rotate(-4deg)}
.pv .b8d-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 .b8d-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 .b8d-omslag img{width:100%;height:250px;object-fit:cover;border-radius:2px}
.pv .b8d-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 .b8d-tekst h2{font-size:48px;margin-bottom:16px}
.pv .b8d-tekst p{font-size:15.5px;line-height:1.8}
.pv .b8d-tekst .knoppen{margin-top:28px}
.pv .b8d-rond{margin-top:22px;font-size:15px}
@container pv (max-width:700px){
  .pv .b8d-kaart{grid-template-columns:1fr;gap:36px;padding:40px 22px 30px}
  .pv .b8d-boek{width:220px}
  .pv .b8d-omslag img{height:190px}
  .pv .b8d-titel{font-size:17px}
  .pv .b8d-tekst h2{font-size:34px}
  .pv .b8d-tekst .btn{white-space:normal;text-align:center}
}

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

/* blok 3e: chips zijn echte tabs, panelen wisselen (foto + kaart) */
.pv .b3e-chips .chip{cursor:pointer;transition:background-color .2s,color .2s}
.pv .b3e-chips .chip:not(.chip--aan):hover{color:var(--zz-rood)}
.pv .b3e-chips .chip:focus-visible{outline:2px solid var(--zz-rood);outline-offset:3px}
.pv .pijl{transition:background-color .2s,color .2s,opacity .2s}
.pv .pijl:not(:disabled):hover{background:var(--zz-rood);color:#fff}
.pv .pijl--aan:not(:disabled):hover{background:var(--zz-rood-hover)}
.pv .pijl:disabled{opacity:.4;cursor:default}

/* blok 4e: strook scrollt horizontaal (scroll-snap, swipe op telefoon), pijlen en dots sturen hem aan */
.pv .b4e .aanbod-strip{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;
    margin:-12px -12px 0;padding:12px 12px 22px;scroll-padding-inline:12px}
.pv .b4e .aanbod-strip::-webkit-scrollbar{display:none}
.pv .b4e .ak{scroll-snap-align:start}
.pv .b4e .dots>button{cursor:pointer}
.pv .b4e .dots>button:not(.actief):hover{background:rgba(215,25,33,.5)}
@media (prefers-reduced-motion:reduce){.pv .b4e .aanbod-strip{scroll-behavior:auto}}

/* blok 6a: link naar alle reviews */
.pv .b6a-meer{text-align:center;margin-top:32px}

/* blok 7c: 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 .b7c-lijn:hover{color:var(--zz-rood)}

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

/* tablet */
@container pv (min-width:701px) and (max-width:1100px){
  .pv .b2a-rij{grid-template-columns:280px 1fr;gap:40px}
  .pv .b2a .checks{gap:18px 28px}
  .pv .b5f-tekst h2{font-size:40px}
  .pv .b8d-kaart{grid-template-columns:300px 1fr;gap:40px;padding:48px 40px}
  .pv .b8d-boek{width:240px}
  .pv .b8d-tekst h2{font-size:40px}
}
@container pv (min-width:701px) and (max-width:900px){
  .pv .b2a-rij{grid-template-columns:1fr;gap:24px}
  .pv .b5f-tekst{grid-column:2 / 8}
  .pv .b7c-rij{grid-template-columns:1fr;gap:24px}
  .pv .b7c-kaart{position:static;margin-top:0}
  .pv .b8d-kaart{grid-template-columns:1fr;gap:40px}
}