/* =====================================================================
   voorstel-over.css — over-ons.html en contact.html (ronde 4, gesloten preview).
   Bouwt op voorstel-home.css (vh-band, vh-medaillon, vh-persoon, vh-legenda, vh-slot, vh-scharnier, vh-teken) en eenheid.css
   (hoofdstukbalk, vel, folio, zegelfamilie). Hier alleen wat deze twee pagina's eigen hebben:
   paginakop (vo-kop) · held (vo-held) · visitekaartje (vo-visite) · brief + zijkolom (vo-verhaal) · vier medaillons (vo-vier) ·
   adreskaders (vo-adres) · aanvraaglijst (vo-stappen, vo-kozijnen) · band-waarden met links (vo-band).
   Regels: één goudknop per viewport, kalligrafie alleen kit-tekens, teken in kolom 12 (desktop) / naast de kicker (mobiel).
   ===================================================================== */

/* ---------------------------------------------------------------- paginakop */
.vo-kop{position:relative;padding-top:clamp(12px,2vw,28px)}
.vo-kop__vel{position:relative;padding:calc(var(--in) + 18px) calc(var(--in) + 14px) calc(var(--in) + 26px);overflow:clip}
.vo-kop__watermerk{left:-8%;bottom:-8%;width:min(64vw,560px);opacity:.04}
.vo-kop__bergen{left:0;right:0;bottom:0;height:42%;opacity:.22;pointer-events:none;
  background:url('../../beeld/voorstel-home/bergen-band.webp?v=0db3d674') 50% 100%/auto 100% repeat-x;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
.vo-kop__raster{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.vo-kop__tekst{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.vo-kop__tekst > nav{margin:0 0 10px}
.vo-kop__kicker{margin:0;padding-right:96px}
.vo-kop__h1{margin:12px 0 0}
.vo-kop__h1 em{display:block;margin-top:.08em}
.vo-kop__orn{margin:20px 0 0;width:220px}
.vo-kop__lead{max-width:34ch;margin:18px 0 0}
.vo-kop__knoppen{margin-top:22px}
.vo-kop__meta{display:grid;margin:26px 0 0;border-top:1px solid var(--lijn-goud-zacht)}
.vo-kop__meta > div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--lijn-goud-zacht)}
.vo-kop__meta dt{font-size:.875rem;letter-spacing:.22em}
.vo-kop__meta dd{margin:0;font:400 .9375rem/1.45 var(--f-tekst);color:var(--inkt2)}
/* teken: mobiel horizontaal rechts naast de kicker; desktop verticaal in kolom 12 */
.vo-kop__teken{position:absolute;z-index:3;right:calc(var(--in) + 14px);top:calc(var(--in) + 66px);display:flex;align-items:center;gap:8px;pointer-events:none}
.vo-kop__teken .vo-kalli{font-size:30px;letter-spacing:.06em;opacity:.9;mix-blend-mode:multiply}
.vo-kop__teken .s-zegel-svg{width:22px;height:22px;rotate:-4deg}
.vo-kop__kalli-svg{display:block;width:40px;height:40px;opacity:.9;mix-blend-mode:multiply}

/* held: warehouse voor de zon */
.vo-held{position:relative;margin:26px -6px 0;display:grid;justify-items:center}
.vo-held__zon{position:absolute;left:54%;top:46%;width:min(70%,380px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:var(--s-maan);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 90%);mask-image:linear-gradient(180deg,#000 55%,transparent 90%)}
.vo-held__beeld{position:relative;display:block;width:100%}
@media (min-width:1024px){.vo-held__beeld{width:122%;margin-inline:-11%}}
.vo-held__beeld img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 64% 72% at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 64% 72% at 50% 46%,#000 62%,transparent 100%)}
.vo-held__nevel{position:absolute;left:0;right:0;bottom:30px;height:34%;pointer-events:none}
.vo-held__onderschrift{position:relative;display:flex;align-items:center;gap:12px;margin-top:6px;max-width:44ch;font:italic 400 1rem/1.4 var(--f-serif);color:var(--grijs1);text-align:center}
.vo-held__onderschrift i{flex:1 1 24px;height:1px;background:linear-gradient(90deg,transparent,var(--lijn-goud))}
.vo-held__onderschrift i:last-child{background:linear-gradient(90deg,var(--lijn-goud),transparent)}

@media (max-width:767px){
  .vo-kop .s-container--vel{padding-inline:8px}
  .vo-kop__knoppen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .vo-kop__knoppen .s-knop{width:100%;padding-inline:10px}
  .vo-kop__lead{max-width:none}
}
@media (max-width:389px){.vo-kop__knoppen{grid-template-columns:minmax(0,1fr)}.vo-kop__teken .vo-kalli{font-size:26px}}
@media (min-width:1024px){
  .vo-kop__vel{padding:calc(var(--in) + 26px) calc(var(--in) + 40px) calc(var(--in) + 34px)}
  .vo-kop__raster{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  .vo-kop__tekst{grid-column:1 / 7}
  .vo-kop__kicker{padding-right:0}
  .vo-kop__teken{right:calc(var(--h) - 40px + 24px);top:calc(var(--in) + 40px);flex-direction:column;gap:12px}
  .vo-kop__teken .vo-kalli{writing-mode:vertical-rl;font-size:64px;letter-spacing:.04em}
  .vo-kop__teken .s-zegel-svg{width:28px;height:28px}
  .vo-kop__kalli-svg{width:72px;height:72px}
  .vo-held{grid-column:7 / 12;margin:0}
  .vo-kop__orn{margin-top:24px;width:300px}
}

/* ---------------------------------------------------------------- band (contact: waarden zijn links) */
.vo-band__waarde{margin:2px 0 0;font:300 1.375rem/1.15 var(--f-kop);letter-spacing:.02em;color:var(--inkt)}
.vo-band__waarde a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.vo-band__waarde a:hover{text-decoration:underline;text-decoration-color:var(--goud);text-underline-offset:.2em}
.vo-band__waarde--tijd{padding-block:9px}
.vh-band__ico .s-ico{color:var(--dgoud)}
@media (min-width:1024px){
  .vo-band{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .vo-band--contact .vo-band__waarde{font-size:1.25rem}
}
@media (max-width:1023px){.vo-band--contact .vo-band__waarde{font-size:1.1875rem}}
@media (max-width:767px){
  .vo-band--contact{display:grid !important;grid-template-columns:minmax(0,1fr) !important;overflow:visible !important;margin-inline:0 !important;padding-inline:0 !important}
  .vo-band--contact .vh-band__item{display:grid !important;grid-template-columns:minmax(0,1fr) 40px !important;flex:none !important;padding:14px 0 !important;border-top:1px solid rgba(var(--dgoud-rgb),.22)}
  .vo-band--contact .vh-band__item > :not(.vh-band__ico){grid-column:1 !important}
  .vo-band--contact .vh-band__item .vh-band__ico{order:0 !important;grid-column:2 !important;grid-row:1 / span 3 !important;margin:0 !important;align-self:center}
  .vo-band--contact .vh-band__item::after{display:none !important}
}

/* ---------------------------------------------------------------- 一 ons verhaal */
.vo-verhaal__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.vo-brief{max-width:640px}
.vo-verhaal__zij{display:grid;justify-items:center;gap:26px;align-content:start}
.vo-verhaal__medaillon{width:min(66vw,240px)}
.vo-verhaal__citaat{max-width:26ch}
.vo-zuster{width:100%;max-width:380px}
.vo-zuster__titel{margin:0 0 8px;font:500 .9375rem/1.3 var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--inkt)}
.vo-zuster p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--grijs1)}
@media (min-width:1024px){
  .vo-verhaal__raster{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:56px;align-items:start}
  .vo-verhaal__zij{justify-items:start;padding-top:8px}
  .vo-verhaal__medaillon{width:240px;justify-self:center}
}

/* ---------------------------------------------------------------- verder-link onder een hoofdstuk */
.vo-verder{margin:clamp(20px,3vw,32px) 0 0}

/* ---------------------------------------------------------------- 三 werkwijze: vier medaillons */
.vo-vier{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;border-top:1px solid var(--lijn-goud-zacht)}
.vo-vier__item{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:18px;row-gap:6px;align-items:start;padding:22px 0;border-bottom:1px solid rgba(var(--dgoud-rgb),.2)}
.vo-vier__beeld{grid-row:1 / span 2;width:96px}
.vo-vier__nr{position:absolute;left:68px;top:14px;display:block;width:30px;height:30px;padding:3px;border-radius:50%;background:var(--rijst);box-shadow:0 0 0 1px var(--lijn-goud)}
.vo-vier__nr img{display:block;width:100%;height:100%}
.vo-vier__titel{margin:4px 0 0;font:500 1.0625rem/1.25 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.vo-vier__tekst{margin:0;font-size:.9375rem;line-height:1.55;color:var(--grijs1)}
@media (min-width:900px){
  .vo-vier{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid rgba(var(--dgoud-rgb),.2)}
  .vo-vier__item{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;justify-items:center;text-align:center;padding:30px 20px 28px;border-bottom:0}
  .vo-vier__item + .vo-vier__item{border-left:1px solid rgba(var(--dgoud-rgb),.25)}
  .vo-vier__beeld{grid-row:auto;width:min(100%,150px);margin-bottom:14px}
  .vo-vier__nr{left:50%;top:22px;margin-left:44px}
  .vo-vier__titel{margin-top:0}
}

/* ---------------------------------------------------------------- 四 team: twee personen op contact */
@media (min-width:768px){.vo-mensen--twee .vh-mensen__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- contact: visitekaartje in de kop */
.vo-visite{margin-top:28px}
.vo-visite__kaart{position:relative;display:grid;justify-items:center;text-align:center;gap:4px;padding:30px 22px 24px;background:rgba(var(--rijst-rgb),.72)}
.vo-visite__zegel{position:absolute;right:12px;top:12px;width:48px;height:48px}
.vo-visite__zegel .s-zegel-svg{display:block;width:48px;height:48px;rotate:4deg}
.vo-visite__foto{width:116px;margin-bottom:14px}
.vo-visite__naam{justify-self:center;white-space:normal}
.vo-visite__lijn{display:block;width:40px;height:2px;margin:14px 0 6px;background:var(--goud)}
.vo-visite__regels{list-style:none;display:grid;justify-items:center;gap:0;margin:0;padding:0}
.vo-visite__regels a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 .9375rem/1.2 var(--f-mono);color:var(--inkt);text-decoration:none;white-space:nowrap}
.vo-visite__regels a .s-ico{width:16px;height:16px;color:var(--dgoud)}
.vo-visite__regels a:hover{text-decoration:underline;text-decoration-color:var(--goud);text-underline-offset:.22em}
.vo-visite__spoed{margin:6px 0 0;font:italic 400 1.0625rem/1.4 var(--f-serif);color:var(--grijs1)}
@media (min-width:1024px){
  .vo-kop--contact .vo-kop__raster{align-items:start}
  .vo-visite{grid-column:7 / 11;margin:56px 0 0}
}

/* ---------------------------------------------------------------- contact 一: adressen */
.vo-adressen__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.vo-adres{display:grid;align-content:start;gap:10px}
.vo-adres__nr{display:block;width:40px;height:40px}
.vo-adres__nr img{display:block;width:100%;height:100%}
.vo-adres__titel{margin:4px 0 0;font:400 1.5rem/1.15 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.vo-adres__adres{font-style:normal;font-size:1.0625rem;line-height:1.6;color:var(--inkt2)}
.vo-adres__tekst{margin:0;font-size:.9375rem;line-height:1.55;color:var(--grijs1)}
.vo-adres__gegevens{display:grid;margin:6px 0 0;border-top:1px solid rgba(var(--dgoud-rgb),.25)}
.vo-adres__gegevens > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(var(--dgoud-rgb),.18)}
.vo-adres__gegevens dt{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--vh-goudtekst,#866720)}
.vo-adres__gegevens dd{margin:0;font-size:.9375rem;color:var(--inkt2)}
.vo-adres__route{justify-self:start;margin-top:6px}
.vo-adres__route .s-ico:first-child{width:18px;height:18px;color:var(--dgoud)}
@media (min-width:768px){.vo-adressen__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}

/* ---------------------------------------------------------------- contact 三: aanvraag */
.vo-aanvraag__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.vo-stappen{gap:0;margin:0;padding:0;border-top:1px solid var(--lijn-goud-zacht)}
.vo-stappen > li::before{top:calc(14px + .62em)}
.vo-stappen > li{padding-block:14px;border-bottom:1px solid rgba(var(--dgoud-rgb),.2);font-size:1rem;line-height:1.5;color:var(--inkt2)}
.vo-aanvraag__knoppen{margin-top:24px}
.vo-kozijnen{display:grid;justify-items:start;gap:10px;align-content:start}
.vo-kozijnen__beeld{width:96px}
.vo-kozijnen__titel{margin:4px 0 0;font:500 1.0625rem/1.25 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.vo-kozijnen p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--grijs1)}
.vo-gegevens{margin-top:clamp(28px,4vw,44px)}
@media (min-width:1024px){
  .vo-aanvraag__raster{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:56px;align-items:start}
  .vo-gegevens > div{grid-template-columns:180px minmax(0,1fr);gap:24px}
}

/* ---------------------------------------------------------------- slot op contact: zonder knop-goud (de goudknop staat al in de kop) */
.vo--contact .vh-slot__inhoud .s-knoppen{justify-content:center}
.vo--contact .vh-slot__inhoud .s-knop{text-transform:none;letter-spacing:.02em}

/* bewijsregel: op smalle schermen mag een onderdeel afbreken (anders loopt hij buiten de balk) */
@media (max-width:767px){.vo .vh-bewijs > span{white-space:normal}}