/* pagina/assortiment.css — ronde 2, r4 (na de tweede jury). Eigenaar: pagina-bouwer van kozijnen/assortiment/ (prefix .as-).
   Twaalf platen in plaats van één catalogusrol: omslag (huis doemt op uit de mist en draait mee) · register met medaillons +
   slanke balk · zes hoofdstukken met elk een eigen compositie (volle plaat, duo, midden, entree, panorama, duo gespiegeld) en elk
   titelblok in een eigen gouden kader dat zich tekent · techniek · afspraken · bewijsband · slot (schip op een inktzee, colofon).
   Fundament-componenten: ronde2/FUNDAMENT.md. Geen eigen varianten van .s-*: alleen plaatsing/maat binnen .as-. */

/* ---------------------------------------------------------------- paginatokens (contrast AA op rijstpapier) */
.as-pagina{--as-goud-tekst:#7C5E19;--as-grijs-tekst:#6E675E;--as-noot:#5C554C;--grijs2:var(--as-grijs-tekst);--as-balk-h:0px}
@media (min-width:1024px){.as-pagina{--as-balk-h:44px}}
html{background-color:var(--rijst);scroll-padding-top:calc(var(--s-kop-h) + 20px)}
@media (min-width:1024px){html{scroll-padding-top:calc(var(--s-kop-h) - 12px + 44px + 20px)}}

.as-pagina .s-kicker,.as-pagina .s-zegel-nr,.as-pagina .s-folio,.as-pagina .s-totaal__label,
.as-pagina .s-afsprakentabel dt,.as-pagina .s-afspraken ol > li::before,.as-pagina .s-pijllink,.as-pagina .s-subnav__titel,
.as-pagina .s-h1 em,.as-pagina .s-h2 em,.as-pagina .s-voet h2{color:var(--as-goud-tekst)}
.as-pagina .s-folio{font-size:.8125rem}
.as-pagina .s-folio__nr{color:var(--inkt)}
@media (max-width:767px){.as-pagina .s-folio{font-size:.875rem;letter-spacing:.18em}}

/* focus: overal dezelfde, duidelijke ring */
.as-pagina a:focus-visible,.as-pagina button:focus-visible,.as-pagina [tabindex]:focus-visible{outline:2px solid var(--as-goud-tekst);outline-offset:3px;border-radius:2px;box-shadow:none}
.as-pagina .s-knop:focus-visible{outline:2px solid var(--as-goud-tekst);outline-offset:3px;box-shadow:none}
.as-pagina .s-pin:focus-visible{outline-offset:4px;border-radius:999px}

/* chroom (lokaal, zie wensen) */
@media (min-width:1024px){
  .as-pagina .s-merk__tag{display:block;max-height:1.4em;overflow:hidden;transition:opacity .2s var(--ease),max-height .24s var(--ease),margin .24s var(--ease)}
  html.s-ingeklapt .as-pagina .s-merk__tag{max-height:0;margin-top:0}
  .as-pagina .s-lijstknop .s-teller{position:absolute;top:-5px;right:-10px;box-shadow:0 0 0 2px var(--rijst)}
  /* slanke balk aan: de subnav wijkt achter de kop (stapel 56 + 44 = 100 px in plaats van 190) */
  html.as-balk-aan .as-pagina .s-subnav{transform:translateY(calc(-100% - 14px));visibility:hidden;transition:transform .28s var(--ease),visibility 0s linear .28s}
  .as-pagina .s-subnav{transition:transform .28s var(--ease)}
}
@media (max-width:1023px){
  .as-pagina .s-subnav__lijst{-webkit-mask-image:linear-gradient(90deg,var(--fl),#000 28px,#000 calc(100% - 72px),var(--fr));mask-image:linear-gradient(90deg,var(--fl),#000 28px,#000 calc(100% - 72px),var(--fr))}
}
.as-pagina .s-voet{background:var(--rijst) url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat}

/* bewijsregel met ruiten: desktop hoort de ruit bij het volgende item (nooit aan een regelbegin); mobiel staat er vóór elk item een ruit */
.as-ruitregel{overflow:hidden;font-variant-numeric:tabular-nums}
.as-ruitregel__in{display:flex;flex-wrap:wrap;row-gap:2px;margin-left:-1.7em}
.as-ruitregel__in > span{position:relative;padding-left:1.7em;white-space:nowrap}
.as-ruitregel__in > span::before{content:"";position:absolute;left:.6em;top:calc(.725em - 2.5px);width:5px;height:5px;rotate:45deg;background:var(--goud)}
@media (max-width:767px){.as-ruitregel__in{margin-left:0;column-gap:.75em}.as-ruitregel__in > span{padding-left:1.25em}.as-ruitregel__in > span::before{left:.15em}}
.s-nw{white-space:nowrap}
.as-delen{display:block;overflow:hidden}
.as-delen__in{display:flex;flex-wrap:wrap;margin-left:-1.15em}
.as-delen__in > span{position:relative;padding-left:1.15em;white-space:nowrap}
.as-delen__in > span::before{content:"·";position:absolute;left:0;width:1.15em;text-align:center}
.as-pagina .s-ruitlijst > li::before{top:calc(.5lh - 3.5px)}
@supports not (top:1lh){.as-pagina .s-ruitlijst > li::before{top:.52em}}
.as-pagina .s-h2{text-wrap:balance}

/* ================================================================ OMSLAG — het vel (offerte p1) */
.as-kop{position:relative;padding:12px 0 0;overflow-x:clip}
.as-kop__houder{position:relative}
.as-kop__vel{position:relative;display:flex;flex-direction:column;padding:10px 18px 30px;overflow:clip;isolation:isolate}
.as-kop__vel > *{position:relative}
.as-kop__kruimel{display:none}
.as-kop__kruimel .s-kruimel{margin:0}
.as-kop__terug{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0 0 2px -2px;color:var(--grijs1);text-decoration:none;font-size:.9375rem;z-index:4}
.as-kop__terug .s-ico{width:18px;height:18px;rotate:180deg;color:var(--dgoud)}
.as-kop__terug:hover span{color:var(--inkt);text-decoration:underline;text-decoration-color:var(--goud)}
.as-kop__merk{display:none}
.as-kop__kicker{margin:2px 0 0;z-index:4}

/* pruimentak: binnen het vel (onder het hoekornament, binnen de binnenlijn); mobiel rechtsboven, desktop gespiegeld linksboven */
.as-kop__vel > .as-kop__tak{position:absolute;z-index:6;top:36px;right:9px;width:128px;aspect-ratio:700/530;pointer-events:none;overflow:hidden}
.as-kop__takbeeld{position:absolute;inset:0;background:url('../../kit/afgeleid/tak-web.webp?v=e852fe12') right top/contain no-repeat;transform-origin:96% 4%;animation:as-tak 11s ease-in-out infinite alternate}
@keyframes as-tak{from{rotate:-.8deg}to{rotate:1.1deg}}
.as-kop__blaadjes{z-index:5}

/* beeld: verre bergen · zon · bergen · huis (draait) · mist · nevel */
.as-kop__beeld{margin:8px 0 0;isolation:isolate;position:relative}
.as-kop__lucht{position:absolute;inset:-6% 0 0;z-index:-1;pointer-events:none}
.as-kop__zon{position:absolute;left:62%;top:0;width:min(70vw,440px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 44% 40%,rgba(250,236,196,1) 0,rgba(244,222,166,.92) 34%,rgba(var(--goud-rgb),.40) 56%,rgba(var(--goud-rgb),.12) 64%,rgba(var(--goud-rgb),0) 71%);
  animation:as-zon 2.4s var(--s-ease-inkt) both}
@keyframes as-zon{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
.as-kop__bergen{position:absolute;left:-2%;right:-2%;bottom:18%;height:44%;opacity:.42;
  background:url('../../kit/afgeleid/bergen-web.webp?v=b7ecbbad') right bottom/70% auto no-repeat;
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 30%,#000 72%,transparent),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(0deg,transparent,#000 30%,#000 72%,transparent),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.as-kop__bergen--ver{bottom:26%;height:40%;opacity:.26;background:url('../../kit/afgeleid/bergen-ver-web.webp?v=5988c592') left bottom/64% auto no-repeat}
.as-kop__den{position:absolute;bottom:20%;width:clamp(36px,5vw,76px);aspect-ratio:1;background:url('../../kit/svg/land/den.svg?v=bb26820b') center bottom/contain no-repeat;opacity:.42}
.as-kop__den--l{left:4%}
.as-kop__den--r{right:5%;width:clamp(28px,3.6vw,54px);opacity:.32}
.as-kop__huis{position:relative;margin-inline:auto;width:100%}
.as-kop__draai{position:absolute;inset:0}
.as-kop__draai picture,.as-kop__draai img,.as-kop__draai canvas{display:block;width:100%;height:100%}
.as-kop__draai canvas{position:absolute;inset:0;opacity:0}
.as-kop__huis.is-actief .as-kop__draai canvas{opacity:1}
.as-kop__huis.is-actief .as-kop__draai picture{visibility:hidden}
.as-kop__huis .s-pin{transition:scale var(--duur-kort) var(--ease)}
/* opdoemen uit de mist (1,2 s): het beeld staat er meteen (LCP), de mist trekt op en de scherpte komt terug */
.as-kop__mist{position:absolute;inset:-6% -8% -2%;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(60% 55% at 50% 62%,rgba(var(--rijst-rgb),.96),rgba(var(--rijst-rgb),.78) 55%,rgba(var(--rijst-rgb),0) 100%)}
@media (prefers-reduced-motion:no-preference){
  .as-kop__mist{animation:as-mist 1.2s cubic-bezier(.3,.1,.2,1) both}
  .as-kop__draai{animation:as-opdoemen 1.2s cubic-bezier(.3,.1,.2,1) both}
}
@keyframes as-mist{0%{opacity:1;transform:translateY(0)}60%{opacity:.5}100%{opacity:0;transform:translateY(-4%)}}
@keyframes as-opdoemen{from{filter:blur(6px) saturate(.5);opacity:.5;scale:1.02}to{filter:none;opacity:1;scale:1}}
.as-kop__nevel{left:0;right:0;bottom:6%;height:30%;opacity:.85;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  animation:as-drift 22s ease-in-out infinite alternate}
@keyframes as-drift{from{transform:translateX(-1.6%)}to{transform:translateX(1.6%)}}
.as-kop__bijschrift{position:relative;margin:4px 0 0;padding-bottom:12px;text-align:center;font:italic 400 1.0625rem/1.35 var(--f-serif);color:var(--as-noot)}
.as-tik{display:none}
@media (hover:none){.as-klik{display:none}.as-tik{display:inline}}

.as-kop__titel{display:grid;justify-items:start}
.as-kop .as-kop__h1{margin:0;font-size:clamp(40px,11.2vw,46px);line-height:1.02;letter-spacing:.12em}
.as-kop .as-kop__h1 em{display:block;margin-top:6px;font-size:.66em;letter-spacing:0;line-height:1.1}
.as-kop__lead{margin:14px 0 0;max-width:34ch;font:italic 400 1.1875rem/1.42 var(--f-serif);color:var(--inkt2);text-wrap:pretty}
.as-kop__lijn{margin:18px 0 6px}
.as-kop__info{display:grid;gap:18px;margin-top:10px}
.as-kop__gegevens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0}
.as-kop__gegevens dt{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--as-goud-tekst)}
.as-kop__gegevens dd{margin:6px 0 0;display:grid;font:500 .9375rem/1.4 var(--f-body,inherit);color:var(--inkt)}
.as-kop__gegevens dd span{font:italic 400 1rem/1.35 var(--f-serif);color:var(--as-noot)}
.as-kop__totaal{max-width:none;margin-top:14px}
.as-kop__totaal > .s-zegel-svg{right:10px;top:-24px}
.as-kop__totaalwaarde{margin:6px 0 2px!important;font-size:1.75rem!important;text-transform:uppercase;letter-spacing:.06em!important}
.as-kop__totaalsub{display:block;font:italic 400 1rem/1.35 var(--f-serif);color:var(--as-noot)}
.as-kop__knoppen{margin-top:4px}
.as-kop__knoppen .s-pijllink{margin-left:4px}

/* pins: pil-vorm voor codes, tikvlak ≥ 44 px (::after); --hoog = lange steel (om en om bij dicht op elkaar staande pins) */
.as-pagina .s-pin{width:32px;height:32px;font-size:.875rem}
.as-pagina .s-pin::after{inset:-7px -7px -25px}
.as-pagina .as-pin--code{width:auto;min-width:32px;padding:0 9px;border-radius:999px}
.as-pagina .as-pin--code > span:first-child{font:500 .8125rem/1 var(--f-mono);letter-spacing:.02em;translate:0 .5px}
.as-pagina .s-pin > span:first-child{translate:0 .5px}
.as-pagina .as-pin--onder{translate:-50% 18px}
.as-pagina .as-pin--onder::before{top:auto;bottom:100%}
.as-pagina .as-pin--onder::after{inset:-25px -7px -7px}
.as-pagina .as-pin--onder .s-pin__tip{bottom:auto;top:calc(100% + 10px)}
.as-pagina .as-pin--hoofd{box-shadow:inset 0 0 0 4px rgba(var(--rijst-rgb),.6),0 0 0 3px rgba(var(--rijst-rgb),.9),0 0 0 4px var(--dgoud),0 3px 8px rgba(var(--inkt-rgb),.25)}
.as-pagina .s-pin__tip{font-size:.875rem}
@media (max-width:767px){
  .as-pagina .s-pin{width:34px;height:34px}
  .as-pagina .as-pin--code{width:auto;min-width:36px;padding:0 9px}
  .as-pagina .as-pin--code > span:first-child{font-size:.875rem}
  .as-pagina .s-pin::after{inset:-5px -5px -24px}
  .as-pagina .as-pin--onder::after{inset:-24px -5px -5px}
  .as-pagina .as-pin--hoog{translate:-50% calc(-100% - 60px)}
  .as-pagina .as-pin--hoog::before{height:60px}
  .as-pagina .as-pin--hoog::after{inset:-5px -5px -66px}
  .as-pagina .as-pin--onder.as-pin--hoog{translate:-50% 60px}
  .as-pagina .as-pin--onder.as-pin--hoog::before{height:60px}
  .as-pagina .as-pin--onder.as-pin--hoog::after{inset:-66px -5px -5px}
  .as-pagina .s-pin__tip{display:none}
  .as-pins--desktop{display:none}
}

@media (max-width:1023px){
  .as-kop__beeld{margin-inline:-6px}
  .as-kop__huis{max-height:46vh;max-width:calc(46vh * 1.65);width:100%}
}
@media (min-width:600px) and (max-width:1023px){
  .as-kop__vel{padding:16px 36px 36px}
  .as-kop__info{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .as-kop__knoppen{grid-column:1 / -1}
  .as-kop__vel > .as-kop__tak{width:200px}
}
@media (min-width:1024px){
  .as-kop{padding-top:16px}
  .as-kop__vel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:12px 56px 40px}
  .as-kop__terug{display:none}
  .as-kop__kruimel{display:block;grid-column:1 / 9;grid-row:1;position:relative;z-index:7;justify-self:start}
  /* 门窗 verticaal en groot rechtsboven tegen het kader, zegel onder de laatste streek (offerte p3: 全貌) */
  .as-kop__merk{position:absolute;right:62px;top:58px;display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;z-index:2}
  .as-kop__merk .s-kalli{writing-mode:vertical-rl;font-size:136px;line-height:.96;letter-spacing:0;opacity:.94}
  .as-kop__merk .s-zegel-svg{rotate:-4deg;width:40px;height:40px}
  .as-kop__kicker{display:none}
  .as-kop__vel > .as-kop__tak{right:204px;top:6px;width:clamp(200px,16vw,226px)}
  .as-kop__beeld{grid-column:1 / 12;grid-row:2;margin:-26px 0 0}
  .as-kop__huis{width:min(100%,690px);translate:-40px 0}
  .as-kop__zon{left:58%;top:-1%;width:430px}
  .as-kop__nevel{bottom:8%;height:30%}
  .as-kop__titel{grid-column:1 / -1;grid-row:3;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:24px;align-items:end;margin-top:-10px}
  .as-kop__titel > .as-kop__h1{grid-column:1;grid-row:1}
  .as-kop__titel > .as-kop__lead{grid-column:2;grid-row:1;align-self:end;margin:0 0 10px;padding-left:22px;border-left:2px solid var(--goud)}
  .as-kop__titel > .as-kop__lijn{grid-column:1 / -1;grid-row:2}
  .as-kop .as-kop__h1{font-size:clamp(72px,6.6vw,96px);letter-spacing:.2em;line-height:.98;margin-left:-.02em}
  .as-kop .as-kop__h1 em{font-size:.44em;margin-top:8px;letter-spacing:0}
  .as-kop__lead{font-size:1.3125rem;max-width:30ch}
  .as-kop__lijn{margin:20px 0 6px}
  .as-kop__info{grid-column:1 / -1;grid-row:4;grid-template-columns:minmax(0,5fr) minmax(0,4fr);column-gap:24px;align-items:end;margin-top:10px}
  .as-kop__gegevens{grid-column:1;grid-row:1;column-gap:32px}
  .as-kop__gegevens dt{font-size:.8125rem;letter-spacing:.3em}
  .as-kop__knoppen{grid-column:1;grid-row:2;margin-top:18px}
  .as-kop__totaal{grid-column:2;grid-row:1 / span 2;align-self:end;justify-self:end;width:min(100%,400px);margin:0}
}

/* ================================================================ REGISTER — zes medaillons (offerte p3, 'ook vervangen') */
.as-register{position:relative;margin-top:clamp(28px,3.4vw,48px)}
.as-register__lijst{list-style:none;display:flex;gap:6px;margin:0 -16px;padding:4px 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent)}
.as-register__lijst::-webkit-scrollbar{display:none}
.as-register__lijst > li{flex:0 0 auto;scroll-snap-align:start}
.as-register__tegel{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;min-width:118px;padding:6px 6px 10px;color:var(--inkt);text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent}
.as-register__ring{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;padding:4px;background:var(--rijst);
  box-shadow:0 0 0 1px var(--lijn-goud-sterk,rgba(var(--dgoud-rgb),.7)),0 0 0 4px var(--rijst),0 0 0 5px var(--lijn-goud-zacht),0 8px 18px rgba(var(--inkt-rgb),.12);transition:box-shadow .3s var(--ease),scale .3s var(--ease)}
.as-register__beeld{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 40% 36%,rgba(246,231,189,.95),rgba(var(--goud-rgb),.22) 62%,rgba(var(--goud-rgb),.08) 72%)}
.as-register__beeld picture{width:74%;height:74%}
.as-register__beeld img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.as-register__nr{position:absolute;left:-4px;top:-2px;width:24px;height:24px;rotate:-6deg}
.as-register__naam{font:500 .875rem/1.15 var(--f-kop);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.as-register__codes{font:400 .875rem/1 var(--f-mono);color:var(--grijs1);white-space:nowrap}
.as-register__tegel:hover .as-register__ring,.as-register__tegel[aria-current] .as-register__ring{box-shadow:0 0 0 1.5px var(--dgoud),0 0 0 4px var(--rijst),0 0 0 5px var(--goud),0 10px 22px rgba(var(--inkt-rgb),.16)}
.as-register__tegel:hover .as-register__ring{scale:1.04}
.as-voorbehoud{display:flex;gap:12px;align-items:flex-start;max-width:72ch;margin:14px 0 0;font:italic 400 1.0625rem/1.45 var(--f-serif);color:var(--as-noot)}
.as-voorbehoud .s-ico{flex:none;width:18px;height:18px;margin-top:3px;color:var(--dgoud)}
@media (min-width:768px){
  .as-register__lijst{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .as-register__tegel{min-width:0}
}
@media (min-width:1024px){
  .as-register__ring{width:88px;height:88px}
  .as-register__naam{font-size:.875rem;letter-spacing:.14em}
  .as-voorbehoud{margin:22px auto 0;justify-content:center;text-align:center;max-width:none}
}
/* slanke balk (desktop): verschijnt als het register uit beeld is; zegel + naam, 44 px, 100 % dekkend */
.as-balk{display:none}
@media (min-width:1024px){
  .as-balk{display:block;position:fixed;left:0;right:0;top:calc(var(--s-kop-h) - 12px);z-index:calc(var(--z-kop) - 2);height:44px;
    background:var(--rijst) url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat;border-bottom:1px solid var(--lijn-goud-zacht);
    box-shadow:0 6px 14px -10px rgba(var(--inkt-rgb),.25);transform:translateY(-110%);visibility:hidden;transition:transform .28s var(--ease),visibility 0s linear .28s}
  html:not(.s-ingeklapt) .as-balk{top:var(--s-kop-h)}
  html.as-balk-aan .as-balk{transform:none;visibility:visible;transition:transform .28s var(--ease),visibility 0s}
  .as-balk__lijst{list-style:none;display:flex;justify-content:space-between;margin:0;padding:0;height:44px}
  .as-balk a{position:relative;display:flex;align-items:center;gap:9px;height:44px;padding:0 6px;color:var(--grijs1);text-decoration:none;font:500 .8125rem/1 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
  .as-balk a img{width:18px;height:18px;rotate:-4deg}
  .as-balk a::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;background:var(--goud);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .as-balk a:hover{color:var(--inkt)}
  .as-balk a[aria-current]{color:var(--inkt)}
  .as-balk a[aria-current]::after{transform:scaleX(1)}
}

/* ================================================================ OVERGANG tussen hoofdstukken — dubbele goudlijn */
.as-overgang{display:grid;place-items:center;padding:clamp(36px,4.4vw,64px) 0 clamp(14px,1.8vw,24px)}
.as-overgang__lijn{margin:0 auto}

/* ================================================================ HOOFDSTUK — gemeenschappelijk */
.as-groep{position:relative;isolation:isolate;padding-top:clamp(8px,1.4vw,20px);overflow-x:clip;scroll-margin-top:calc(var(--s-kop-h) + var(--as-balk-h) + 8px)}
.as-hoofdstukken > .as-groep:first-of-type,.as-hoofdstukken > .as-balk + .as-groep{padding-top:clamp(36px,4vw,56px)}
.as-type,.as-hoofd,.as-kaart,#techniek,#afspraken{scroll-margin-top:calc(var(--s-kop-h) + var(--as-balk-h) + 20px)}

/* titelkader: elk titelblok een eigen plaat (dubbele goudlijn + 回-hoeken); tekent zich bij binnenkomen vanuit de hoek */
.as-titelkader{position:relative;background:rgba(var(--rijst-rgb),.78);padding:26px 20px 24px}
.as-titelkader > .s-titelblok{margin:0}
html.as-js-kader .as-titelkader::before,html.as-js-kader .as-titelkader::after{clip-path:inset(0 100% 100% 0);transition:clip-path .65s cubic-bezier(.45,.05,.2,1)}
html.as-js-kader .as-titelkader::after{transition-delay:.14s}
html.as-js-kader .as-titelkader.is-getekend::before,html.as-js-kader .as-titelkader.is-getekend::after{clip-path:inset(0 0 0 0)}
.as-pagina .s-titelblok__teken.as-teken{position:absolute;right:-4px;top:-6px;mix-blend-mode:multiply;opacity:.9;width:60px;height:60px;min-height:0;display:grid;place-items:center;font-size:60px}
.as-teken .s-kalli{display:block;font-size:inherit;line-height:1;color:var(--inkt)}
.as-teken__yi{width:100%;height:100%;fill:var(--inkt);overflow:visible}
.as-pagina .as-titelblok{grid-template-columns:minmax(0,1fr);row-gap:14px}
.as-pagina .as-titelblok .s-titelblok__kop > .s-h2{padding-right:58px}
.as-pagina .as-titelblok .s-titelblok__rubriek{flex-wrap:wrap;row-gap:6px}
.as-titelblok__bewijs{margin-top:2px}
.as-titelblok__maat{margin:-4px 0 0;font:500 .875rem/1.45 var(--f-mono);color:var(--grijs1);font-variant-numeric:tabular-nums}
.as-titelblok__maat > span:first-child{font:italic 400 1rem/1 var(--f-serif)}
.as-titelblok .s-titelblok__lead{text-wrap:pretty}
.as-titelkader--midden .s-titelblok__lead{text-wrap:balance}
@media (min-width:1024px){
  .as-titelkader{padding:40px 44px 38px}
  .as-pagina .s-titelblok__teken.as-teken{position:static;width:104px;height:104px;font-size:104px;margin-top:-6px}
  .as-pagina .as-titelblok{grid-template-columns:104px minmax(0,1fr);column-gap:24px}
  .as-pagina .as-titelblok .s-titelblok__kop > .s-h2{padding-right:0}
  .as-pagina .as-titelblok .s-titelblok__lead{grid-column:2;padding:0 0 0 20px}
  .as-titelkader--breed .as-titelblok{grid-template-columns:120px minmax(0,1fr) minmax(300px,.78fr)}
  .as-titelkader--breed .s-titelblok__teken.as-teken{width:120px;height:120px;font-size:118px}
  .as-titelkader--breed .as-titelblok .s-titelblok__lead{grid-column:auto}
}

/* scène: huis in zijn landschap (zon, inktbergen, mist); dag -> avond bij het doorscrollen */
.as-scene{position:relative;margin:0;isolation:isolate}
.as-scene__lucht{position:absolute;inset:0;z-index:-1;pointer-events:none}
.as-scene__zon{position:absolute;left:var(--zon-x,64%);top:var(--zon-y,0%);width:var(--zon-d,min(52%,340px));aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 42% 38%,rgba(248,233,190,.95) 0,rgba(244,222,166,.75) 36%,rgba(var(--goud-rgb),.30) 54%,rgba(var(--goud-rgb),.08) 64%,rgba(var(--goud-rgb),0) 71%)}
.as-scene__bergen{position:absolute;left:0;right:0;bottom:16%;height:46%;opacity:.34;background:url('../../kit/afgeleid/bergen-web.webp?v=b7ecbbad') right bottom/64% auto no-repeat;
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 35%,#000 75%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(0deg,transparent,#000 35%,#000 75%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.as-scene__bergen--ver{bottom:24%;height:44%;opacity:.22;background:url('../../kit/afgeleid/bergen-ver-web.webp?v=5988c592') left bottom/58% auto no-repeat}
.as-scene__huis{position:relative;margin:0 auto;width:100%}
.as-scene__huis picture,.as-scene__huis img{display:block;width:100%;height:100%}
.as-scene__avond{position:absolute!important;inset:0;opacity:var(--as-avond,0);will-change:opacity}
.as-scene__nevel{left:2%;right:2%;bottom:-6px;height:22%;opacity:.6;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
/* pruimentak boven de scène (elk tweede hoofdstuk), binnen de eigen kolom */
.as-scene__tak{position:absolute;top:-6%;right:0;width:clamp(120px,22%,220px);aspect-ratio:700/530;pointer-events:none;z-index:3}
.as-scene__tak i{position:absolute;inset:0;background:url('../../kit/afgeleid/tak-web.webp?v=e852fe12') right top/contain no-repeat;transform-origin:96% 4%;animation:as-tak 13s ease-in-out infinite alternate}

/* ---------------------------------------------------------------- 1 · VOLLE PLAAT (vaste ramen) */
.as-plaat{position:relative;margin-bottom:clamp(40px,5vw,72px)}
.as-scene--plaat{--zon-x:74%;--zon-y:2%;--zon-d:min(60vw,420px)}
.as-scene--plaat .as-scene__huis{width:calc(100% + 12px);margin-inline:-6px}
.as-plaat__kop{position:relative;margin-top:-30px;z-index:4}
@media (min-width:1024px){
  .as-plaat{min-height:clamp(480px,40vw,580px)}
  .as-scene--plaat{position:absolute;inset:0;--zon-x:66%;--zon-y:4%;--zon-d:min(34vw,470px)}
  .as-scene--plaat .as-scene__lucht{inset:0}
  .as-scene--plaat .as-scene__bergen{bottom:14%;height:56%;background-size:52% auto;opacity:.38}
  .as-scene--plaat .as-scene__bergen--ver{bottom:22%;background-position:28% bottom;background-size:46% auto;opacity:.24}
  .as-scene--plaat .as-scene__huis{position:absolute;right:max(20px,calc((100vw - 1116px) / 2 - 64px));bottom:7%;width:min(54vw,800px);margin:0}
  .as-scene--plaat .as-scene__nevel{left:22%;right:0;bottom:2%;height:30%}
  .as-plaat__kop{position:absolute;inset:0;display:flex;align-items:center;margin:0 auto;pointer-events:none}
  .as-titelkader--plaat{width:min(440px,38vw);pointer-events:auto;background:rgba(var(--rijst-rgb),.9);padding:36px 34px 32px}
  .as-titelkader--plaat .as-titelblok{grid-template-columns:minmax(0,1fr)}
  .as-titelkader--plaat .s-titelblok__teken.as-teken{position:absolute;right:24px;top:24px;width:76px;height:76px;font-size:76px;margin:0}
  .as-titelkader--plaat .as-titelblok .s-titelblok__kop > .s-h2{padding-right:76px;font-size:clamp(32px,2.9vw,40px)}
  .as-titelkader--plaat .as-titelblok .s-titelblok__lead{grid-column:1;padding:16px 0 0}
  .as-titelkader--plaat .s-titelblok__lead::before{width:40px;height:2px;top:0}
}

/* ---------------------------------------------------------------- 2/6 · DUO (titelkader naast het huis, om en om gespiegeld) */
.as-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:clamp(44px,5vw,72px)}
.as-scene--duo{--zon-x:62%;--zon-d:min(56%,320px)}
.as-duo--spiegel .as-scene--duo{--zon-x:38%}
@media (max-width:1023px){.as-duo .as-scene{order:-1}.as-duo .as-titelkader{margin-top:-26px;z-index:2}}
@media (min-width:1024px){
  .as-duo{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  .as-duo > .as-titelkader{grid-column:1 / 6;grid-row:1}
  .as-duo > .as-scene{grid-column:6 / 13;grid-row:1;padding:28px 0 18px}
  .as-duo--spiegel > .as-titelkader{grid-column:8 / 13}
  .as-duo--spiegel > .as-scene{grid-column:1 / 8}
  .as-duo--spiegel .as-scene__tak{right:auto;left:-2%;scale:-1 1}
  .as-duo .as-titelblok{grid-template-columns:minmax(0,1fr)}
  .as-duo .s-titelblok__teken.as-teken{position:absolute;right:-6px;top:-8px;width:84px;height:84px;font-size:84px;margin:0}
  .as-duo .as-titelblok .s-titelblok__kop > .s-h2{padding-right:84px}
  .as-duo .as-titelblok .s-titelblok__lead{grid-column:1;padding:16px 0 0}
  .as-duo .s-titelblok__lead::before{width:40px;height:2px;top:0}
}

/* ---------------------------------------------------------------- 3 · MIDDEN (titelkader gecentreerd, huis eronder, tweeling) */
.as-titelkader--midden{max-width:820px;margin:0 auto}
.as-titelkader--midden .as-titelblok{justify-items:center;text-align:center}
.as-titelkader--midden .as-titelblok .s-titelblok__rubriek,.as-titelkader--midden .as-ruitregel__in{justify-content:center}
.as-titelkader--midden .as-ruitregel__in{margin-left:-1.7em}
@media (min-width:768px){
  .as-pagina .as-titelkader--midden .as-titelblok{grid-template-columns:minmax(0,1fr)}
  .as-pagina .as-titelkader--midden .s-titelblok__teken.as-teken{position:static;width:96px;height:96px;font-size:96px;margin:0 auto -4px}
  .as-pagina .as-titelkader--midden .as-titelblok .s-titelblok__kop > .s-h2{padding-right:0}
  .as-pagina .as-titelkader--midden .as-titelblok .s-titelblok__lead{grid-column:1;max-width:52ch;padding:18px 0 0}
  .as-titelkader--midden .s-titelblok__lead::before{left:50%;width:40px;height:2px;top:0;translate:-50% 0}
}
.as-scene--midden{--zon-x:50%;--zon-d:min(60%,380px);margin:clamp(-8px,-1vw,0px) auto clamp(40px,5vw,64px);max-width:900px;padding-top:24px}
.as-tweeling{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:768px){.as-tweeling{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start}}

/* ---------------------------------------------------------------- 4 · ENTREE (begane grond, deuren groot) */
.as-scene--entree{margin:clamp(20px,3vw,40px) 0 clamp(36px,4vw,56px)}
.as-scene--entree .as-scene__tak{top:-34%;right:0}
.as-scene--entree .as-scene__nevel{height:30%}

/* ---------------------------------------------------------------- 5 · PANORAMA (achterzijde met aanbouw, volle breedte) */
.as-groep--panorama > .s-container:first-child{margin-bottom:0}
.as-scene--panorama{--zon-x:30%;--zon-d:min(40vw,520px);margin:clamp(12px,2vw,28px) 0 clamp(40px,5vw,72px);padding-top:clamp(20px,3vw,40px)}
.as-scene--panorama .as-scene__huis{width:calc(100% - 8px)}
@media (min-width:768px){.as-scene--panorama .as-scene__huis{width:min(74vw,980px)}}
.as-scene--panorama .as-scene__bergen{background-size:46% auto;background-position:92% bottom}
.as-scene--panorama .as-scene__bergen--ver{background-size:40% auto;background-position:4% bottom}
.as-scene--panorama .as-scene__nevel{left:0;right:0;height:26%}

/* ---------------------------------------------------------------- uitgelicht type (offerte p5): beeld ≤ 640 px, maat en knoppen eronder */
.as-hoofd{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.as-hoofd__beeld{position:relative;margin:0 0 28px;width:100%}
.as-hoofd__beeld picture{display:block;height:100%}
.as-hoofd__beeld img{display:block;width:100%;height:100%;object-fit:contain}
.as-hoofd__code{position:absolute;left:5%;top:6%;z-index:2;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35)}
.as-hoofd__uitgelicht{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:500 .875rem/1 var(--f-kop);letter-spacing:.28em;text-transform:uppercase;color:var(--as-goud-tekst)}
.as-hoofd__uitgelicht::before{content:"";width:7px;height:7px;rotate:45deg;background:var(--goud)}
.as-hoofd__titel{margin:0;text-wrap:balance}
.as-hoofd__omschrijving{max-width:52ch;text-wrap:pretty}
.as-hoofd__spec{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;margin-top:4px}
.as-hoofd__schema{width:72px;height:54px}
.as-ruitlijst{gap:6px;font-size:.9375rem;line-height:1.45;color:var(--grijs1)}
.as-hoofd__lijn{display:block;margin:22px 0 12px}
.as-maat{margin:0;display:grid;gap:6px}
.as-maat dt{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--as-goud-tekst)}
.as-maat dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.as-maat__getal{font:500 1.0625rem/1.3 var(--f-mono);color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
.as-maat__noot{font:italic 400 1.0625rem/1.3 var(--f-serif);color:var(--as-noot)}
.as-hoofd__acties{margin-top:20px}
/* medaillon: altijd rechtsonder op een vaste inzet; het label hangt als zegel gecentreerd onder de ring */
.as-inzet{--d:112px;position:absolute;right:14px;bottom:-18px;z-index:2}
button.as-inzet{border:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:scale .5s var(--s-ease-inkt)}
button.as-inzet:hover{scale:1.05}
.as-inzet > picture{position:absolute;inset:5px;display:block;border-radius:50%;overflow:hidden;transition:opacity .7s var(--s-ease-inkt)}
.as-inzet > picture img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.as-inzet--wissel .as-inzet__open{opacity:1}
.as-inzet--wissel[aria-pressed="false"] .as-inzet__open{opacity:0}
.as-inzet__label{position:absolute;left:50%;bottom:-13px;translate:-50% 0;display:inline-grid;place-items:center;height:26px;padding:0 10px;background:var(--rood);color:var(--zegeltekst);
  font:500 .8125rem/1 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(248,233,223,.35),0 0 0 2px var(--rijst);border-radius:1px;z-index:1}
.as-inzet__w-dicht{display:none}
.as-inzet--wissel[aria-pressed="false"] .as-inzet__w-open{display:none}
.as-inzet--wissel[aria-pressed="false"] .as-inzet__w-dicht{display:inline}
@media (max-width:767px){.as-inzet{--d:92px;right:8px;bottom:-10px}.as-inzet__label{font-size:.875rem;height:28px}.as-hoofd__beeld{margin-bottom:34px}}
@media (min-width:768px){.as-maat dt{font-size:.8125rem;letter-spacing:.28em}}
@media (max-width:767px){.as-hoofd__acties > .s-knop{flex:1 1 calc(50% - 6px);min-height:48px}}
@media (min-width:1024px){
  .as-hoofd{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  .as-hoofd__beeld{grid-column:1 / 8;margin:0;max-width:600px}
  .as-hoofd__tekst{grid-column:8 / 13;padding-left:8px}
  .as-hoofd__tekst .s-element__meta{margin-bottom:14px}
  .as-hoofd--spiegel .as-hoofd__beeld{grid-column:6 / 13;grid-row:1;justify-self:end}
  .as-hoofd--spiegel .as-hoofd__tekst{grid-column:1 / 6;grid-row:1;padding:0 8px 0 0}
  .as-hoofd--staand .as-hoofd__beeld{grid-column:2 / 7}
  .as-hoofd--staand .as-hoofd__tekst{grid-column:7 / 12}
}
/* tweeling (combinaties): twee platen naast elkaar, beeld boven, tekst eronder (offerte p7) */
.as-hoofd--kolom{grid-template-columns:minmax(0,1fr)!important;align-items:start}
.as-hoofd--kolom .as-hoofd__beeld{grid-column:1!important;max-width:none;margin:0 0 30px}
.as-hoofd--kolom .as-hoofd__tekst{grid-column:1!important;padding:0!important}
@media (min-width:768px){
  .as-tweeling{grid-template-rows:auto auto}
  .as-tweeling > .as-hoofd--kolom{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .as-tweeling .as-hoofd__beeld{aspect-ratio:16 / 11!important;align-self:end}
}

/* ---------------------------------------------------------------- kaarten ('ook in deze groep', deuren): subgrid = titels op één lijn */
.as-ook{margin-top:clamp(48px,5vw,72px)}
.as-ook__kop{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;padding-bottom:12px;border-bottom:1.5px solid var(--inkt);
  font:500 .9375rem/1.2 var(--f-kop);letter-spacing:.26em;text-transform:uppercase;color:var(--inkt)}
.as-ook__aantal{font:500 .9375rem/1 var(--f-mono);letter-spacing:0;color:var(--grijs1)}
.as-ook__veeg{margin-left:auto;font:italic 400 1rem/1 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--as-noot)}
.as-kaarten{list-style:none;margin:0;padding:0}
.as-kaart{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto auto;align-content:start;min-width:0}
.as-kaart__beeld{position:relative;display:block;margin:0 0 16px;width:100%}
.as-kaart__beeld picture{display:block;height:100%}
.as-kaart__beeld img{display:block;width:100%;height:100%;object-fit:contain}
.as-kaart__code{position:absolute;left:6%;top:6%;z-index:2;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35)}
.as-kaart__titel{margin:0;font:500 1.0625rem/1.25 var(--f-kop);letter-spacing:.08em;text-transform:uppercase;color:var(--inkt);text-wrap:balance}
.as-kaart__meta{margin:6px 0 0;font:400 .875rem/1.3 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--grijs2)}
.as-kaart__tekst{margin:10px 0 0;font-size:.9375rem;line-height:1.55;color:var(--grijs1);text-wrap:pretty;max-width:46ch}
.as-kaart__maat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(var(--dgoud-rgb),.28)}
.as-kaart__label{font:500 .8125rem/1.2 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--as-goud-tekst)}
.as-kaart__getal{font:500 .9375rem/1.3 var(--f-mono);color:var(--inkt);white-space:nowrap;font-variant-numeric:tabular-nums}
.as-kaart__acties{display:flex;gap:10px;margin-top:14px}
.as-kaart__acties .s-knop{flex:1 1 0;justify-content:center;min-height:44px;padding-inline:10px}
/* deuren: staand, zonder baksteen; hover/tik = open */
.as-kaart__beeld--deur{border:0;padding:0;background:radial-gradient(70% 58% at 50% 46%,rgba(246,231,189,.55),rgba(var(--goud-rgb),.10) 62%,transparent 74%);cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.as-kaart__beeld--deur picture{position:absolute;inset:0;transition:opacity .6s var(--s-ease-inkt)}
.as-kaart__beeld--deur img{object-fit:contain}
.as-kaart__open{opacity:0}
.as-kaart__beeld--deur[aria-pressed="true"] .as-kaart__open{opacity:1}
.as-kaart__beeld--deur[aria-pressed="true"] .as-kaart__dicht{opacity:0}
.as-kaart__wissel{position:absolute;right:6%;bottom:5%;display:inline-grid;place-items:center;height:28px;padding:0 10px;background:var(--rood);color:var(--zegeltekst);
  font:500 .8125rem/1 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(248,233,223,.35),0 0 0 2px var(--rijst)}
.as-w-open{display:none}
.as-kaart__beeld--deur[aria-pressed="true"] .as-w-open{display:inline}
.as-kaart__beeld--deur[aria-pressed="true"] .as-w-dicht{display:none}
@media (max-width:767px){
  /* mobiel: horizontale snap-carrousel met één knoppenpaar per kaart */
  .as-kaarten{display:flex;gap:16px;margin:0 -16px;padding:2px 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .as-kaarten::-webkit-scrollbar{display:none}
  .as-kaart{flex:0 0 min(80%,320px);scroll-snap-align:start}
  .as-ook--n1 .as-kaart{flex-basis:100%}
  .as-ook--n1 .as-ook__veeg{display:none}
  .as-kaart--deur{flex-basis:min(70%,280px)}
  .as-kaart__beeld{border-radius:1px}
  .as-kaart__tekst{font-size:.9375rem}
}
@media (min-width:768px){
  .as-ook__veeg{display:none}
  .as-kaarten{display:grid;grid-template-columns:repeat(var(--k,3),minmax(0,1fr));column-gap:24px;row-gap:0}
  .as-kaart{grid-row:span 6;grid-template-rows:subgrid;row-gap:0;padding-bottom:44px}
  .as-kaart--hoofd,.as-ook--alleen-mobiel{display:none!important}
  .as-ook--n2 .as-kaarten{--k:2}
  .as-ook--n1 .as-kaarten{--k:1}
  /* rij (twee kaarten): beeld links, tekst rechts; titels, tekst, maat en knoppen lijnen via subgrid uit */
  .as-ook--rij .as-kaart,.as-ook--breed .as-kaart{grid-row:span 5;grid-template-columns:clamp(160px,38%,240px) minmax(0,1fr);column-gap:22px}
  .as-ook--rij .as-kaart__beeld,.as-ook--breed .as-kaart__beeld{grid-column:1;grid-row:1 / span 5;margin:0;align-self:start}
  .as-ook--rij .as-kaart > :not(.as-kaart__beeld),.as-ook--breed .as-kaart > :not(.as-kaart__beeld){grid-column:2}
  .as-ook--breed .as-kaarten{max-width:820px}
  .as-ook--breed .as-kaart{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:28px}
}
.as-lijstknop.is-toegevoegd{border-color:var(--dgoud);background:rgba(var(--goud-rgb),.14)}
.as-lijstknop.is-in-lijst::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;rotate:45deg;background:var(--goud)}
.as-lijstknop.is-toegevoegd .s-ico{display:none}

/* schema's (vakverdeling, inkt + goud) */
.as-schema{display:block;width:100%;height:100%;overflow:visible}
.as-schema__kader{fill:none;stroke:var(--inkt);stroke-width:1.8}
.as-schema__glas{fill:rgba(159,179,180,.16);stroke:var(--inkt);stroke-width:.8}
.as-schema__paneel{fill:rgba(var(--inkt-rgb),.82);stroke:var(--inkt);stroke-width:.8}
.as-schema__groef{fill:none;stroke:rgba(var(--rijst-rgb),.5);stroke-width:.6}
.as-schema__v{fill:none;stroke:var(--grijs2);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.as-schema__draai{fill:none;stroke:var(--dgoud);stroke-width:.9;stroke-dasharray:2 1.6}
.as-schema__greep{fill:none;stroke:var(--goudlicht);stroke-width:1.4;stroke-linecap:round}
.as-schema__pijl{fill:none;stroke:var(--dgoud);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.as-schema__paneel ~ .as-schema__pijl{stroke:var(--goud)}

/* ---------------------------------------------------------------- groepsbalk: onderlijn per regel (text-decoration), pijl inline */
.as-groepsbalk{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px 16px;margin-top:clamp(44px,4.4vw,60px);padding:16px 18px;background:rgba(var(--rijst-rgb),.5)}
.as-groepsbalk__schema{width:56px;height:42px}
.as-groepsbalk__label{margin:0;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.as-groepsbalk__link{grid-column:1 / -1;display:flex;align-items:center;min-height:44px;color:var(--inkt);text-decoration:none;font:500 .875rem/1.5 var(--f-kop);letter-spacing:.2em;text-transform:uppercase}
.as-groepsbalk__tekst{white-space:nowrap;text-decoration:underline;text-decoration-color:var(--dgoud);text-decoration-thickness:1px;text-underline-offset:6px}
.as-groepsbalk__pijl{width:16px;height:16px;color:var(--dgoud);vertical-align:-2px;transition:translate var(--duur-kort) var(--ease)}
.as-groepsbalk__link:hover .as-groepsbalk__pijl{translate:4px 0}
.as-kort{display:none}
@media (max-width:420px){.as-lang{display:none}.as-kort{display:inline}}
@media (min-width:768px){
  .as-groepsbalk{display:flex;flex-wrap:nowrap;min-height:84px;padding:12px 30px;gap:22px}
  .as-groepsbalk__schema{flex:none;width:64px;height:48px}
  .as-groepsbalk__label{flex:1 1 0;min-width:0;font-size:.8125rem;letter-spacing:.3em}
  .as-groepsbalk__link{flex:none}
}
.as-folio{margin-top:24px}

/* ================================================================ AANVRAAGBOX — desktop een compacte pil rechtsonder, mobiel in de stroom */
.as-status{position:relative;z-index:calc(var(--z-kop) - 3);padding:28px var(--s-goot) 0;display:flex;justify-content:center}
.as-status__pil{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"zegel tekst" "knop knop";gap:12px 14px;align-items:center;width:100%;max-width:420px;
  padding:16px 18px;border:1px solid var(--lijn-goud);border-radius:var(--straal-s);background:linear-gradient(160deg,var(--goudlicht),var(--goudtint));color:var(--inkt);text-decoration:none;
  box-shadow:inset 0 0 0 4px rgba(var(--rijst-rgb),.35),0 10px 24px rgba(var(--inkt-rgb),.10)}
.as-status__zegel{grid-area:zegel;display:grid;place-items:center;width:44px;height:44px}
.as-status__zegel .s-zegel-svg{width:40px;height:40px;rotate:-4deg}
.as-status__tekst{grid-area:tekst;display:grid;gap:4px;min-width:0}
.as-status__label{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--as-goud-tekst)}
.as-status__waarde{font:500 1.0625rem/1.2 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.as-status__knop{grid-area:knop;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border:1.5px solid var(--inkt);border-radius:var(--straal-s);
  font:500 .875rem/1 var(--f-kop);letter-spacing:.18em;text-transform:uppercase;background:rgba(var(--rijst-rgb),.6)}
.as-status__knop .s-ico{width:18px;height:18px}
.as-status__pil:hover .as-status__knop{background:var(--rijst)}
.as-status.is-stempel .as-status__waarde{animation:as-stempel .34s var(--s-ease-stempel)}
@keyframes as-stempel{from{scale:1.18;opacity:.4}to{scale:1;opacity:1}}
@media (min-width:1024px){
  .as-status{position:fixed;right:16px;bottom:24px;padding:0;display:block;transition:opacity .3s var(--ease),translate .3s var(--ease)}
  .as-status__pil{grid-template-columns:34px auto 36px;grid-template-areas:"zegel tekst knop";width:auto;max-width:none;padding:6px 6px 6px 10px;gap:0 10px;border-radius:999px;
    box-shadow:inset 0 0 0 3px rgba(var(--rijst-rgb),.35),0 14px 34px rgba(var(--inkt-rgb),.18)}
  .as-status__zegel{width:34px;height:34px}
  .as-status__zegel .s-zegel-svg{width:30px;height:30px}
  .as-status__label,.as-status__pos,.as-status__knop > span{display:none}
  .as-status__waarde{font-size:.875rem;letter-spacing:.04em}
  .as-status__knop{width:36px;min-height:36px;padding:0;border-radius:50%;border-width:1px}
  .as-status.is-weg{opacity:0;translate:0 16px;pointer-events:none}
}
.as-opslag-uit{margin-top:16px}
.as-pagina .s-toast{bottom:calc(24px + env(safe-area-inset-bottom))}
@media (max-width:767px){.as-pagina .s-toast{bottom:calc(var(--s-actiebalk-h) + 14px + env(safe-area-inset-bottom))}}
@media (min-width:1024px){.as-pagina .s-toast{left:auto;right:24px;translate:0 20px;bottom:24px}.as-pagina .s-toast.is-zichtbaar{translate:0 0}
  .as-pagina:has(.as-status:not([hidden]):not(.is-weg)) .s-toast{bottom:84px}}

/* ================================================================ TECHNIEK (p14) */
.as-techniek{position:relative;overflow:clip;padding:clamp(8px,1.4vw,20px) 0 clamp(20px,2.4vw,32px);scroll-margin-top:calc(var(--s-kop-h) + var(--as-balk-h) + 8px)}
.as-techniek__draak{right:-40px;left:auto;top:6%;width:min(56vw,520px);opacity:.04}
.as-raster3{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;list-style:none;margin:0;padding:0}
@media (min-width:768px){.as-raster3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}}
.as-werking{margin-top:clamp(36px,4vw,56px)}
.as-werking__kolom{position:relative;display:grid;align-content:start}
.as-werking__woord{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:500 .9375rem/1.2 var(--f-kop);letter-spacing:.28em;text-transform:uppercase;color:var(--as-goud-tekst);white-space:nowrap}
.as-werking__woord img{width:22px;height:22px;rotate:-4deg}
.as-werking__beeld{position:relative;margin:0 auto;width:min(100%,300px);aspect-ratio:1;display:grid;place-items:center;isolation:isolate}
@media (min-width:768px){.as-werking__beeld{width:100%}}
.as-werking__beeld::before{content:"";position:absolute;inset:8% 10% 16%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,rgba(246,231,189,.85),rgba(var(--goud-rgb),.22) 48%,rgba(var(--goud-rgb),0) 71%)}
.as-werking__beeld::after{content:"";position:absolute;left:12%;right:12%;bottom:7%;height:9%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--inkt-rgb),.16),transparent)}
.as-werking__beeld picture,.as-werking__beeld img,.as-werking__beeld canvas{width:86%;height:86%;object-fit:contain}
.as-werking__beeld canvas{position:absolute;inset:7%;opacity:0;transition:opacity .2s linear}
.as-werking__beeld.is-actief canvas{opacity:1}
.as-werking__beeld.is-actief picture{visibility:hidden}
.as-werking__titel{margin-top:6px;padding-top:16px;border-top:1.5px solid var(--inkt)}
.as-werking__sub{margin:4px 0 10px;font:italic 400 1.125rem/1.35 var(--f-serif);color:var(--as-goud-tekst)}
.as-werking__tekst{margin:0;font-size:.9375rem;line-height:1.6;color:var(--grijs1)}
@media (max-width:767px){
  .as-werking{display:flex;gap:18px;margin-inline:-16px;padding:0 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .as-werking::-webkit-scrollbar{display:none}
  .as-werking__kolom{flex:0 0 min(80%,320px);scroll-snap-align:start}
  .as-werking__beeld{width:min(100%,250px)}
}
.as-tech{margin-top:clamp(48px,5vw,72px)}
.as-tech__blok{border-top:1.5px solid var(--inkt);padding-top:16px;min-width:0}
.as-tech__blok p{font-size:.9375rem;line-height:1.6;color:var(--grijs1);max-width:44ch}
.as-tech__kop{margin:0 0 16px;font:500 .9375rem/1.2 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--inkt)}
.as-glas{display:flex;align-items:center;gap:20px;margin:0 0 14px;padding-left:6px}
.as-glas__beeld{flex:none;display:block;width:120px;aspect-ratio:1;border-radius:50%;padding:5px;background:var(--rijst);
  box-shadow:0 0 0 1px var(--lijn-goud-sterk),0 0 0 5px var(--rijst),0 0 0 6px var(--lijn-goud-zacht),0 10px 24px rgba(var(--inkt-rgb),.16)}
.as-glas__beeld img{display:block;width:100%;height:100%;border-radius:50%}
.as-glas__bijschrift{font:italic 400 1.0625rem/1.35 var(--f-serif);color:var(--as-noot)}
@media (min-width:1024px){.as-glas__beeld{width:144px}}
.as-kleur{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.as-kleur__staal{position:relative;flex:none;width:132px;height:96px;border-radius:2px;
  background:linear-gradient(155deg,#41474A 0%,#2E3234 46%,#24282A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px rgba(var(--inkt-rgb),.22)}
.as-kleur__staal::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 42%,transparent 54%)}
.as-kleur__staal > span{position:absolute;left:10px;bottom:9px;font:500 .875rem/1 var(--f-mono);letter-spacing:.04em;color:rgba(var(--rijst-rgb),.92)}
@media (min-width:768px) and (max-width:1023px){.as-kleur{flex-direction:column;align-items:flex-start}}
.as-kleur__tekst{display:grid;gap:2px}
.as-kleur__nr{font:300 2.75rem/1 var(--f-kop);letter-spacing:.04em;color:var(--inkt)}
.as-kleur__naam{font:italic 400 1.125rem/1.3 var(--f-serif);color:var(--grijs1)}
.as-stalen{list-style:none;display:grid;grid-template-columns:repeat(2,max-content);gap:10px 24px;margin:6px 0 0;padding:0}
@media (max-width:399px){.as-stalen{grid-template-columns:minmax(0,1fr)}}
@media (min-width:768px){.as-stalen{grid-template-columns:minmax(0,1fr);gap:8px}}
.as-stalen li{display:flex;align-items:center;gap:12px;min-height:30px;font-size:.875rem;color:var(--grijs1);white-space:nowrap}
.as-staal{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(var(--inkt-rgb),.25),0 0 0 3px var(--rijst),0 0 0 4px var(--lijn-goud-zacht)}
.as-staal--7021{background:radial-gradient(circle at 35% 30%,#4A5053,#2E3234 60%)}
.as-staal--7016{background:radial-gradient(circle at 35% 30%,#5A6268,#383E42 60%)}
.as-staal--9005{background:radial-gradient(circle at 35% 30%,#3A3A3A,#0E0E10 60%)}
.as-staal--9010{background:radial-gradient(circle at 35% 30%,#FFFFFF,#F1EDE1 60%)}
.as-qc{display:grid;gap:10px;justify-items:start;margin-top:14px}

/* ================================================================ AFSPRAKEN · BEWIJS */
.as-weten{padding:clamp(8px,1.4vw,20px) 0 clamp(20px,2.4vw,32px)}
.as-weten__niet{margin:4px 0 0}
.as-weten .s-afspraken{margin-top:clamp(36px,4vw,56px)}
.as-weten .s-afsprakentabel{margin-top:clamp(28px,3.4vw,44px)}
.as-bewijs{padding:clamp(28px,3vw,44px) 0 0}
.as-bewijs__band{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:24px 0;border-top:1px solid var(--lijn-goud-zacht);border-bottom:1px solid var(--lijn-goud-zacht)}
.as-bewijs__item{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto 1fr auto auto;column-gap:16px;row-gap:8px;align-content:start}
.as-bewijs__item > :not(.as-bewijs__zegel){grid-column:2}
.as-bewijs__zegel{grid-row:1 / span 4;width:40px;height:40px;display:grid;place-items:center}
.as-bewijs__zegel img{width:40px;height:40px;max-width:40px;max-height:40px;object-fit:contain;rotate:-3deg}
.as-bewijs__titel{font:500 .9375rem/1.25 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt);min-height:40px;display:flex;align-items:center}
.as-bewijs__tekst{margin:0;font-size:.9375rem;line-height:1.6;color:var(--grijs1)}
.as-bewijs__tel{display:inline-flex;align-items:center;gap:10px;justify-self:start;min-height:44px;color:var(--inkt);font:500 1rem/1 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none}
.as-bewijs__tel .s-ico{width:18px;height:18px;color:var(--dgoud)}
.as-bewijs__tel span{text-decoration:underline;text-decoration-color:var(--goud);text-underline-offset:4px}
.as-bewijs__link{justify-self:start;margin-top:4px}
@media (min-width:768px){
  .as-bewijs__band{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto;column-gap:32px;row-gap:0}
  .as-bewijs__item{grid-row:1 / span 4;grid-template-rows:subgrid}
  .as-bewijs__item + .as-bewijs__item{padding-left:32px;border-left:1px solid rgba(var(--dgoud-rgb),.22)}
  .as-bewijs__titel{grid-row:1}
  .as-bewijs__tekst{grid-row:2}
  .as-bewijs__tel{grid-row:3}
  .as-bewijs__link{grid-row:4;align-self:end}
}

/* ================================================================ SLOT — vraag · het schip in avondlicht op een inktzee · colofon (谢谢 als laatste) */
.as-slot{padding-top:clamp(56px,6vw,96px);overflow-x:clip;text-align:center}
.as-slot__vraag{display:grid;justify-items:center;gap:18px}
.as-slot__citaat{margin:0;max-width:40ch;font:italic 400 1.25rem/1.45 var(--f-serif);color:var(--inkt2);text-wrap:balance}
.as-slot__vraag .s-h2{margin:0}
.as-slot__knoppen{justify-content:center}
.as-slot__contact{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;font:500 .9375rem/1 var(--f-mono)}
.as-slot__contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--inkt);text-decoration:none}
.as-slot__contact a:hover{text-decoration:underline;text-decoration-color:var(--goud);text-underline-offset:4px}
.as-zee{position:relative;margin-top:clamp(36px,5vw,72px)}
.as-zee__scene{position:relative;height:clamp(260px,30vw,440px);overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--rijst-rgb),0) 0%,rgba(236,214,186,.55) 38%,rgba(214,186,160,.55) 56%,rgba(98,104,112,.30) 72%,rgba(60,66,74,.38) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.as-zee__maan{position:absolute;left:58%;top:12%;width:clamp(120px,13vw,190px);aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle at 46% 42%,rgba(252,236,200,1) 0,rgba(246,214,160,.92) 40%,rgba(var(--goud-rgb),.30) 58%,rgba(var(--goud-rgb),0) 71%)}
.as-zee__bergen{position:absolute;left:0;right:0;bottom:36%;height:46%;opacity:.42;-webkit-mask-image:linear-gradient(90deg,transparent 18%,#000 34%,#000 70%,transparent 86%);mask-image:linear-gradient(90deg,transparent 18%,#000 34%,#000 70%,transparent 86%);background:url('../../kit/afgeleid/bergen-web.webp?v=b7ecbbad') 72% bottom/min(1000px,150vw) auto no-repeat;filter:brightness(.7)}
.as-zee__bergen--ver{-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 22%,#000 58%,transparent 74%);mask-image:linear-gradient(90deg,transparent 4%,#000 22%,#000 58%,transparent 74%);bottom:40%;height:44%;opacity:.26;background:url('../../kit/afgeleid/bergen-ver-web.webp?v=5988c592') 22% bottom/min(1100px,160vw) auto no-repeat}
.as-zee__glans{position:absolute;left:58%;bottom:6%;width:clamp(90px,10vw,150px);height:30%;translate:-50% 0;
  background:repeating-linear-gradient(180deg,rgba(252,226,170,.55) 0 2px,transparent 2px 9px);-webkit-mask-image:radial-gradient(50% 100% at 50% 0,#000,transparent);mask-image:radial-gradient(50% 100% at 50% 0,#000,transparent);opacity:.8}
.as-zee__golven{position:absolute;left:-96px;right:-96px;height:24px;background:url('../../kit/svg/orn/golf.svg?v=87b72a75') 0 50%/96px 22px repeat-x}
.as-zee__golven--achter{bottom:30%;opacity:.4;animation:as-golf 14s linear infinite}
.as-zee__golven--voor{bottom:12%;opacity:.6;background-size:120px 26px;height:26px;animation:as-golf 10s linear infinite reverse}
@keyframes as-golf{from{transform:translateX(0)}to{transform:translateX(96px)}}
.as-zee__nevel{left:0;right:0;bottom:0;height:40%;opacity:.75}
.as-zee__schip{position:absolute;left:0;bottom:17%;width:clamp(200px,21vw,320px);translate:var(--as-schip-x,calc(50vw - 50%)) 0;will-change:translate}
.as-zee__schip picture{display:block;animation:as-dein 5.6s ease-in-out infinite}
.as-zee__schip img{display:block;width:100%;height:auto}
@keyframes as-dein{0%,100%{rotate:-.7deg;translate:0 0}50%{rotate:.8deg;translate:0 -3px}}
.as-zee__tekst{display:grid;justify-items:center;gap:8px;margin:18px auto 0;padding:0 var(--s-goot)}
.as-zee__tekst .s-kicker{margin:0}
.as-zee__zin{max-width:34ch;font:italic 400 1.1875rem/1.4 var(--f-serif);color:var(--inkt2);text-wrap:balance}
@media (min-width:768px){.as-zee__zin{font-size:1.375rem}}
.as-colofon{display:grid;justify-items:center;gap:12px;padding:clamp(48px,5vw,80px) var(--s-goot) clamp(56px,6vw,96px)}
.as-colofon__logo img{display:block;width:72px;height:72px;border-radius:50%}
.as-colofon__xiexie{width:112px;height:auto;opacity:.92}
.as-colofon__regel{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;margin:0;font:500 .875rem/1.4 var(--f-kop);letter-spacing:.26em;text-transform:uppercase;color:var(--as-goud-tekst)}
.as-colofon__regel > span{white-space:nowrap}

/* ================================================================ r4 · schakelaars, uitgelicht in de carrousel, mobiel compact */
.as-mob{display:none}
.as-kaart__uitgelicht{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:500 .875rem/1 var(--f-kop);letter-spacing:.26em;text-transform:uppercase;color:var(--as-goud-tekst)}
.as-kaart__uitgelicht::before{content:"";width:6px;height:6px;rotate:45deg;background:var(--goud)}
.as-kaart .as-inzet{--d:78px;right:4px;bottom:-6px}
.as-kaart .as-inzet__label{font-size:.875rem;height:26px}
.as-kaart__beeld--deur{width:84%;justify-self:center}
@media (min-width:768px){.as-kaart__beeld--deur{width:62%}}
.as-ook{position:relative}
.as-ook__tak{position:absolute;right:-6px;top:-92px;width:200px;aspect-ratio:700/530;pointer-events:none;z-index:1}
.as-ook__tak i{position:absolute;inset:0;background:url('../../kit/afgeleid/tak-web.webp?v=e852fe12') right top/contain no-repeat;transform-origin:96% 4%;animation:as-tak 12s ease-in-out infinite alternate}
@media (max-width:767px){
  .as-desk{display:none}
  .as-kop__knoppen .s-pijllink{display:none}
  .as-mob{display:inline}
  /* het uitgelichte type staat op mobiel als eerste kaart in de carrousel (één knoppenpaar per kaart) */
  .as-groep .as-hoofd,.as-tweeling{display:none}
  .as-ook{margin-top:22px}
  .as-ook__kop{margin-bottom:12px;padding-bottom:9px}
  .as-ook__tak{display:none}
  .as-kaart__beeld:not(.as-kaart__beeld--deur){aspect-ratio:16 / 11!important}
  .as-kaart__tekst{margin-top:8px}
  .as-kaart__label{font-size:.875rem;letter-spacing:.2em}
  .as-kaart__maat{margin-top:12px;padding-top:10px}
  .as-overgang{padding:16px 0 2px}
  .as-titelblok__maat{display:none}
  .as-scene--panorama,.as-scene--duo,.as-scene--midden,.as-scene--plaat{padding-bottom:0}
  .as-scene:has(.as-pin--onder){margin-bottom:58px}
  .as-scene:has(.as-pin--onder.as-pin--hoog){margin-bottom:96px}
  .as-voorbehoud{font-size:1rem;margin-top:10px}
  .as-titelblok .s-titelblok__lead{margin-top:0}
  .as-titelkader{padding:20px 18px 18px}
  .as-titelblok .s-titelblok__lead{font-size:1.0625rem;line-height:1.5}
  .as-plaat{margin-bottom:0}
  .as-scene--midden{margin-bottom:0}
  .as-scene--entree{margin-bottom:6px}
  .as-scene--panorama{margin-bottom:0}
  /* groepsbalk: één regel (de folio eronder noemt de groep al) */
  .as-groepsbalk{grid-template-columns:44px minmax(0,1fr);margin-top:22px;padding:8px 14px 8px 16px}
  .as-groepsbalk__schema{width:44px;height:34px}
  .as-groepsbalk__label{display:none}
  .as-groepsbalk__link{grid-column:auto}
  .as-folio{margin-top:12px}
  /* techniek en bewijs: veegstroken */
  .as-tech{display:flex;gap:18px;margin-inline:-16px;padding:0 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .as-tech::-webkit-scrollbar,.as-bewijs__band::-webkit-scrollbar{display:none}
  .as-tech > .as-tech__blok{flex:0 0 min(84%,330px);scroll-snap-align:start}
  .as-bewijs__band{display:flex;gap:22px;margin-inline:-16px;padding:22px 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain;border-left:0;border-right:0}
  .as-bewijs__item{flex:0 0 min(84%,320px);scroll-snap-align:start}
  .as-register__ring{width:66px;height:66px}
  .as-register__tegel{min-width:108px;gap:6px}
  .as-slot{padding-top:40px}
  .as-zee{margin-top:24px}
  .as-zee__scene{height:184px}
  .as-colofon{padding:28px var(--s-goot) 20px;gap:10px}
  .as-slot + .s-voet{margin-top:-64px}
  .as-colofon__logo img{width:60px;height:60px}
  .as-colofon__xiexie{width:92px}
  .as-weten .s-afspraken{margin-top:26px}
}
@media (max-width:420px){.as-groepsbalk__link{font-size:.875rem;letter-spacing:.16em}}

/* ================================================================ BEWEGING — reduced motion / zonder JS = eindstand */
@media (prefers-reduced-motion:reduce){
  .as-register__ring,.as-inzet > picture,.as-status,.as-kaart__beeld--deur picture{transition:none}
  .as-kop__takbeeld,.as-scene__tak i,.as-ook__tak i,.as-zee__schip picture,.as-zee__golven,.as-kop__nevel,.as-kop__zon{animation:none}
  .as-zee__schip{translate:calc(50vw - 50%) 0}
  .as-scene__avond{opacity:0!important}
}
@media (max-width:400px){.as-weten__niet .s-niet{letter-spacing:.1em;white-space:nowrap}}

/* ================================================================ EINDKEURING
   kaders staan altijd gesloten (de PDF heeft nooit een half kader); alleen een zachte opkomst in dekking */
html.as-js-kader .as-titelkader::before,html.as-js-kader .as-titelkader::after{clip-path:none!important;transition:opacity .5s var(--ease)}
html.as-js-kader .as-titelkader:not(.is-getekend)::before,html.as-js-kader .as-titelkader:not(.is-getekend)::after{opacity:.55}
/* GLAS krijgt een eigen beeld: doorsnede van het isolatieglas (zonder maten), in hetzelfde medaillon */
.as-glas__beeld--svg{overflow:hidden}
.as-glas__beeld--svg svg{display:block;width:100%;height:100%;border-radius:50%}
/* open/dicht is een knop, geen zegel: overal dezelfde tekst ("Open ↔ dicht") in goud; rood blijft voor zegels */
.as-inzet__label,.as-kaart__wissel{background:var(--rijst);color:var(--as-goud-tekst,#7E6224);box-shadow:inset 0 0 0 1px var(--dgoud),0 0 0 2px var(--rijst);letter-spacing:.1em;white-space:nowrap}
.as-kaart__wissel{opacity:0;transition:opacity .25s var(--ease)}
.as-kaart__beeld--deur:hover .as-kaart__wissel,.as-kaart__beeld--deur:focus-visible .as-kaart__wissel,.as-kaart__beeld--deur[aria-pressed="true"] .as-kaart__wissel{opacity:1}
@media (hover:none){.as-kaart__wissel{opacity:1}}
/* mobiel: elk hoofdstuk opent met zijn titelkaart, dan pas het beeld (zoals het vaste titelblok in de PDF) */
@media (max-width:1023px){.as-duo .as-scene{order:2;margin-top:18px}.as-duo .as-titelkader{order:1;margin-top:0}}
/* held desktop: het kader krijgt lucht onder de subnav, de zon staat volledig binnen het kader, de tak eindigt binnen de lijn */
@media (min-width:1024px){
  .as-kop{padding-top:40px}
  .as-kop__zon{top:7%;width:400px}
  .as-kop__vel > .as-kop__tak{top:30px}
}
@media (max-width:1023px){.as-plaat{display:flex;flex-direction:column}.as-plaat__kop{order:-1;margin-top:0;margin-bottom:10px}}

/* ================================================================ EEN DOCUMENT (eenheid.css) — elke groep is één vel met de standaard hoofdstukbalk;
   de scène is het brede beeld eronder (geen titelkaart meer over of naast het beeld) */
.as-pagina .as-groep .as-duo{display:block;margin-bottom:clamp(28px,4vw,56px)}
.as-pagina .as-groep .as-duo > .as-scene{padding:0}
.as-pagina .as-groep .as-plaat{min-height:0;margin-bottom:clamp(28px,4vw,56px)}
.as-pagina .as-groep .as-scene--plaat{position:relative;inset:auto}
.as-pagina .as-groep .as-scene--plaat .as-scene__huis{position:relative;right:auto;bottom:auto;width:min(100%,860px);margin:0 auto}
.as-pagina .as-groep .as-scene--midden{margin-top:0}
.as-pagina .as-groep .as-scene--entree,.as-pagina .as-groep .as-scene--panorama{margin-top:0}
.as-pagina .as-binnen > .as-titelkader{display:none}