/* Airco-sites · ontwerpstelsel. Bron: Figma van Chris (benoemde stijlen), spec hoofdstuk 4 en 8. Op de site één bestand,
   ah-site.css: de deploy voegt de delen uit deze map op volgorde samen (scripts/deploy.py, maak_pakket). */

@font-face{font-family:"Archivo";src:url(letters/archivo-var.woff2) format("woff2");font-weight:300 700;font-stretch:100% 112%;font-display:swap}
@font-face{font-family:"Archivo-terugval";src:local("Arial");size-adjust:98.6%;ascent-override:89.1%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Big Shoulders";src:url(letters/bigshoulders-300.woff2) format("woff2");font-weight:300;font-display:swap}

:root{
  --brons:#1f1b13;--papier:#f4f2ed;--perkament:#d5d1c6;--blauw:#5198cb;
  --knopblauw:#2e6e9c;--knopblauw-diep:#245a80;--mosterd:#e2b424;--mosterd-licht:#ecc74e;--mosterdtekst:#6b540e;
  --wit:#fff;--lijn:rgba(31,27,19,.22);--lijn-donker:rgba(244,242,237,.22);
  --letter:"Archivo","Archivo-terugval",Arial,sans-serif;
  --citaatletter:"Big Shoulders","Archivo-terugval",Arial,sans-serif;
  --marge:clamp(20px,8.33vw,120px);--breed:1200px;
  --r1:clamp(10px,.83vw,12px);--r2:clamp(14px,1.25vw,18px);--r3:clamp(20px,1.94vw,28px);
  --r4:clamp(28px,2.78vw,40px);--r5:clamp(44px,4.44vw,64px);--r6:clamp(64px,7.5vw,108px);
  --titel:clamp(32px,3.125vw,56px);--tekst:17px;--balk:64px;
}
@media (min-width:1024px){:root{--tekst:18px;--balk:104px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--balk) + 16px)}
body{margin:0;background:var(--papier);color:var(--brons);font:400 var(--tekst)/1.55 var(--letter);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,picture{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
h1,h2,h3{margin:0;font-weight:300;font-stretch:110%;line-height:1.08;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--brons);outline-offset:3px}
.ah-donker :focus-visible,.ah-opening :focus-visible,.ah-balk :focus-visible{outline-color:var(--mosterd)}
.ah-skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--mosterd);color:var(--brons);padding:12px 18px;font-weight:600;text-decoration:none}
.ah-skip:focus{left:12px}
.ah-vh,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Raster en ritme */
.ah-binnen{width:min(100% - 2*var(--marge),var(--breed));margin-inline:auto}
.ah-sectie{padding-block:var(--r6)}
.ah-sectie--perkament{background:var(--perkament)}
.ah-titel{font-size:var(--titel);margin-bottom:var(--r3);max-width:20ch}
.ah-inleiding{max-width:60ch;margin-bottom:var(--r4)}
/* Chris' label: Archivo Bold 13, breedte 100, geen extra spatiëring. Dezelfde letter voor onze andere kleine kopjes. */
.ah-label,.ah-stap__nr,.ah-prijsmoment__vanaf,.ah-staffel caption,.ah-voet__kop,.ah-feiten dt,.ah-niet-gevonden__kop,.ah-pakket__situatie,.ah-contact__lijst dt{font-size:13px;font-weight:700;font-stretch:100%;letter-spacing:0;line-height:1.15;text-transform:uppercase}
.ah-label{display:flex;align-items:center;gap:14px;margin:0 0 var(--r3);color:var(--mosterdtekst);word-spacing:.12em;text-wrap:balance}
.ah-donker .ah-label{color:var(--mosterd)}
.ah-opening .ah-label{color:var(--papier)}
.ah-opening .ah-label .ah-lijnen{color:var(--mosterd)}
.ah-lijnen{flex:none;width:42px;height:12px;color:inherit;background:
  linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
  linear-gradient(currentColor,currentColor) 0 5px/70% 2px no-repeat,
  linear-gradient(currentColor,currentColor) 0 10px/36% 2px no-repeat}

/* Knoppen: tekst zegt wat er gebeurt; minstens 44 px hoog, standaard 52 (Chris) */
.ah-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.ah-knop{text-align:center;text-wrap:balance;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font:500 12px/1.2 var(--letter);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.ah-knop--bel{text-transform:none}
.ah-knop--groot{min-height:56px;padding:0 30px;font-size:14px}
@media (max-width:699px){.ah-knop--groot{flex:1 1 100%}}
.ah-knop--blauw{background:var(--knopblauw);border-color:var(--knopblauw);color:var(--wit)}
.ah-knop--blauw:hover{background:var(--knopblauw-diep);border-color:var(--knopblauw-diep)}
.ah-knop--licht{background:transparent;border-color:var(--brons);color:var(--brons)}
.ah-knop--licht:hover{background:var(--brons);color:var(--papier)}
.ah-opening .ah-knop--licht,.ah-donker .ah-knop--licht,.ah-gesprek .ah-knop--licht{border-color:rgba(244,242,237,.7);color:var(--papier)}
.ah-opening .ah-knop--licht:hover,.ah-donker .ah-knop--licht:hover,.ah-gesprek .ah-knop--licht:hover{background:var(--papier);color:var(--brons)}
.ah-opening .ah-knop{min-height:56px}
.ah-knop--mosterd{background:var(--mosterd);border-color:var(--brons);color:var(--brons)}
.ah-knop--mosterd:hover{background:var(--mosterd-licht)}
.ah-knop--goud{background:var(--mosterd);border-color:var(--brons);color:var(--brons)}
.ah-knop--goud:hover{background:var(--mosterd-licht)}

/* Kopbalk: over de opening doorzichtig met verloop, daarna vast in brons */
.ah-balk{position:fixed;inset:0 0 auto;z-index:50;height:var(--balk);color:var(--papier);background:var(--brons);transition:background-color .3s,height .3s}
.ah-met-opening .ah-balk:not(.is-vast){background:linear-gradient(180deg,rgba(31,27,19,.85) 0%,rgba(31,27,19,.5) 60%,rgba(31,27,19,0) 100%)}
.ah:not(.ah-met-opening) .ah-main{padding-top:var(--balk)}
body.admin-bar .ah-balk{top:32px}
@media (max-width:782px){body.admin-bar .ah-balk{top:46px}}
.ah-balk__binnen{display:flex;align-items:center;gap:clamp(12px,2.2vw,32px);width:min(100% - 2*var(--marge),var(--breed));height:100%;margin-inline:auto}
.ah-balk__logo{display:block;width:clamp(104px,11.9vw,171px);margin-right:auto;color:inherit}
.ah-balk__logo svg{width:100%;height:auto}
.ah-balk__nav{display:none;gap:32px;font-size:14px;font-weight:600;font-stretch:112%}
.ah-balk__nav a{display:inline-block;padding:12px 0;text-decoration:none}
.ah-balk__nav a:hover,.ah-balk__nav a[aria-current="page"]{color:var(--mosterd)}
.ah-balk__taal{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-decoration:none}
.ah-balk__bel{min-height:44px;padding:0 16px}
.ah-balk__bel-lang{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ah-balk__menu{min-height:44px;min-width:44px;padding:0 14px;background:transparent;border:1px solid transparent;color:inherit;font:600 12px/1 var(--letter);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
@media (min-width:700px){.ah-balk__bel-lang{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ah-balk__bel-kort{display:none}}
@media (min-width:1100px){.ah-balk__nav{display:flex}.ah-balk__menu{display:none}}

/* Menu als dialoog */
.ah-menu{position:fixed;inset:0;z-index:60;overflow:auto;padding:calc(var(--balk) + 8px) var(--marge) 40px;background:var(--brons);color:var(--papier)}
.ah-menu[hidden]{display:none}
.ah-menu__sluit{position:absolute;top:10px;right:var(--marge);min-height:44px;padding:0 14px;background:transparent;border:1px solid transparent;color:inherit;font:600 12px/1 var(--letter);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ah-menu__lijst{list-style:none;margin:0 0 var(--r5);padding:0;display:grid;gap:2px}
.ah-menu__lijst a{display:block;padding:10px 0;font-size:clamp(24px,4.4vw,36px);font-weight:300;font-stretch:110%;line-height:1.15;text-decoration:none}
.ah-menu__lijst a:hover,.ah-menu__lijst a[aria-current="page"]{color:var(--mosterd)}
.ah-menu__onder{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.ah-menu__taal{display:inline-flex;align-items:center;min-height:44px}
html.ah-menu-open{overflow:hidden}

/* Opening (Chris): foto over het hele scherm, gedimd per foto met --dim (achter de kop minstens .45) */
.ah-opening{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:100svh;color:var(--papier);background:var(--brons)}
.ah-opening__beeld,.ah-opening__beeld picture,.ah-opening__beeld img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.ah-opening__beeld{overflow:hidden}
.ah-opening__beeld img{object-fit:cover;object-position:var(--positie,50% 50%)}
.ah-opening::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(31,27,19,var(--dim,.55)) 0%,rgba(31,27,19,calc(var(--dim,.55)*.72)) 42%,rgba(31,27,19,.06) 78%)}
.ah-opening__inhoud{width:min(100% - 2*var(--marge),var(--breed));margin-inline:auto;padding:calc(var(--balk) + var(--r5)) 0 clamp(40px,8vh,96px)}
.ah-opening__kop{font-size:clamp(32px,2.78vw,44px);line-height:1.1;max-width:17ch;margin-bottom:var(--r3)}
.ah-regel{display:block}
.ah-opening__tekst{max-width:44ch;margin-bottom:var(--r4);font-size:16px;font-weight:300;line-height:25px}
.ah-score{margin:var(--r4) 0 0;font-size:13px;font-weight:500;color:var(--papier)}
.ah-score b{font-weight:inherit}
.ah-sterren{color:var(--mosterd);letter-spacing:2px;margin-right:4px}
/* Gesplitste opening (zoals de 50/50-pagina's van Reinder): op desktop de foto naast de tekst op brons */
@media (min-width:900px){
  .ah-opening--gesplitst{display:grid;grid-template-columns:1fr 1fr;align-items:end}
  .ah-opening--gesplitst::before{content:none}
  .ah-opening--gesplitst .ah-opening__beeld{position:relative;grid-column:1;grid-row:1;align-self:stretch;z-index:0}
  .ah-opening--gesplitst .ah-opening__beeld picture,.ah-opening--gesplitst .ah-opening__beeld img{z-index:0}
  .ah-opening--gesplitst .ah-opening__beeld img{object-position:50% 30%}
  .ah-opening--gesplitst .ah-opening__beeld::after{content:"";position:absolute;inset:0 0 auto;height:35%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(31,27,19,.72) 0%,rgba(31,27,19,0) 100%)}
  .ah-opening--gesplitst .ah-opening__inhoud{grid-column:2;grid-row:1;width:auto;margin:0;padding:calc(var(--balk) + var(--r5)) var(--marge) clamp(40px,8vh,96px) var(--r6)}
  .ah-opening--beeld-rechts .ah-opening__beeld{grid-column:2}
  .ah-opening--beeld-rechts .ah-opening__inhoud{grid-column:1;padding:calc(var(--balk) + var(--r5)) var(--r6) clamp(40px,8vh,96px) var(--marge)}
}
@media (max-width:699px){
  .ah-opening::before{background:linear-gradient(0deg,rgba(31,27,19,.9) 0%,rgba(31,27,19,calc(var(--dim,.55) + .12)) 60%,rgba(31,27,19,.12) 88%)}
  /* Staat het onderwerp onderin de foto (abonnement, reiniging), dan de tekst bovenaan met de laag van boven. */
  .ah-opening--boven-mobiel{align-items:flex-start}
  .ah-opening--boven-mobiel::before{background:linear-gradient(180deg,rgba(31,27,19,.92) 0%,rgba(31,27,19,calc(var(--dim,.55) + .15)) 58%,rgba(31,27,19,.08) 86%)}
  .ah-opening--boven-mobiel .ah-opening__inhoud{padding-top:calc(var(--balk) + 20px)}
  .ah-opening__inhoud{padding-bottom:32px}
  .ah-knoppen .ah-knop{flex:1 1 100%;padding-inline:18px}
}

/* Tekst met een foto ernaast (Chris, sjabloon 1) */
.ah-inhoud--beeld .ah-binnen{display:grid;gap:var(--r5);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}
.ah-inhoud__tekst{max-width:34em}
.ah-inhoud__onder{margin-top:calc(-1 * var(--r2));margin-bottom:var(--r3);font-size:20px;font-weight:300;line-height:1.4}
.ah-inhoud__lijst{margin:0 0 1em;padding:0;list-style:none}
.ah-inhoud__lijst li{position:relative;margin-bottom:6px;padding-left:22px}
.ah-inhoud__lijst li::before,.ah-pakket__werk li::before,.ah-vergelijking__kaart li::before{content:"";position:absolute;left:0;top:.74em;width:10px;height:2px;background:var(--mosterdtekst)}
.ah-inhoud .ah-knoppen{margin-top:var(--r4)}
.ah-inhoud__beeld{margin:0}
.ah-inhoud__beeld picture,.ah-voorna picture,.ah-persoon picture{overflow:hidden}
.ah-inhoud__beeld img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* Waarom je hier goed zit */
.ah-punten{display:grid;gap:var(--r4) var(--r5);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.ah-punt{padding-top:var(--r3);border-top:1px solid var(--brons)}
.ah-punt h3{font-size:clamp(21px,1.7vw,24px);font-weight:400;font-stretch:100%;line-height:1.25;margin-bottom:10px}

/* Hoe het werkt: genummerd, gescheiden door dunne lijnen, geen kaders */
.ah-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));counter-reset:stap}
.ah-stappen li{padding:var(--r3) var(--r4) var(--r3) 0;border-top:1px solid var(--lijn)}
.ah-stap__nr{display:block;margin-bottom:var(--r2);color:var(--mosterdtekst);font-variant-numeric:tabular-nums}
.ah-stappen__na{max-width:66ch;margin:var(--r4) 0 0;font-weight:500}
.ah-werkwijze .ah-inleiding{margin-bottom:var(--r4)}
.ah-stappen h3{font-size:clamp(21px,1.7vw,24px);font-weight:400;font-stretch:100%;line-height:1.25;margin-bottom:10px}

/* Het prijsmoment: groot bedrag, dunne lijn eromheen, nooit alleen "vraag een offerte aan" */
.ah-prijs__raster{display:grid;gap:var(--r5);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}
.ah-prijsmoment{padding:var(--r4);border:1px solid var(--brons)}
.ah-prijsmoment__vanaf{margin:0 0 6px}
.ah-bedrag{display:block;font-size:clamp(56px,6vw,96px);font-weight:300;font-stretch:100%;line-height:1;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.ah-bedrag__bij{display:block;margin-top:10px;font-size:15px}
.ah-staffel{width:100%;margin:var(--r4) 0 var(--r3);border-collapse:collapse;font-variant-numeric:tabular-nums}
.ah-staffel caption{text-align:left;padding-bottom:8px}
.ah-staffel th,.ah-staffel td{padding:11px 0;border-top:1px solid var(--lijn);font-weight:400;text-align:left}
.ah-staffel td,.ah-staffel thead th{padding-left:16px;text-align:right}
.ah-staffel tbody th{white-space:nowrap}
.ah-staffel thead th{border-top:0;padding-top:0;font-size:14px;font-weight:500;line-height:1.3;vertical-align:bottom}
.ah-anker{margin-bottom:var(--r3);font-size:15px}

/* Drie behandelingen (Reins briefing): kolommen met een haarlijn ertussen, zonder kaders of vlakken (briefing 24-09:
   "geen kaartjes met vinkjes en grijze vlakken"). Bovenaan de situatie, niet goed-beter-best; de abonnementsprijs als
   groot licht cijfer. Op een telefoon onder elkaar met een lijn erboven. */
.ah-pakketten__lijst{list-style:none;margin:0 0 var(--r5);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.ah-pakket{display:flex;flex-direction:column;padding:var(--r3) 0 var(--r4);border-top:1px solid var(--brons)}
@media (min-width:900px){
  .ah-pakket{padding:var(--r2) var(--r4) 0;border-top:0;border-left:1px solid var(--lijn)}
  .ah-pakket:first-child{padding-left:0;border-left:0}
  .ah-pakket:last-child{padding-right:0}
}
.ah-pakket__situatie{margin:0 0 var(--r2);color:var(--mosterdtekst)}
.ah-pakket h3{max-width:18ch;margin-bottom:var(--r3);font-size:clamp(24px,2.2vw,32px);font-weight:300;font-stretch:110%;line-height:1.1}
.ah-pakket__voor{font-weight:500}
.ah-pakket__werk{margin:0 0 var(--r3);padding:0;list-style:none}
.ah-pakket__werk li{position:relative;margin-bottom:4px;padding-left:22px}
.ah-pakket__prijs{margin-top:auto;padding-top:var(--r3)}
.ah-pakket__bedrag{margin:0 0 var(--r2);font-size:clamp(40px,3.4vw,52px);font-weight:300;line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.ah-pakket__bedrag span{display:block;margin-top:10px;font-size:15px;letter-spacing:0}
.ah-feiten{margin:0;font-variant-numeric:tabular-nums}
.ah-feiten div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--lijn)}
.ah-feiten dt{line-height:inherit}
.ah-feiten dd{margin:0;text-align:right}

/* Reins tabel: breed de drie behandelingen naast elkaar met stippen in plaats van vinkjes, en een kop die blijft
   staan als je door de regels scrolt; op een telefoon per behandeling een uitklapbare lijst */
.ah-vergelijking table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.ah-vergelijking th,.ah-vergelijking td{padding:11px 12px;border-top:1px solid var(--lijn);text-align:left;vertical-align:middle;font-weight:400}
.ah-vergelijking th:first-child{padding-left:0}
.ah-vergelijking thead th{position:sticky;top:var(--balk);z-index:1;padding-top:16px;padding-bottom:14px;border-top:0;border-bottom:1px solid var(--brons);background:var(--papier);font-size:18px;font-weight:300;font-stretch:110%;line-height:1.2;vertical-align:bottom}
.ah-vergelijking td,.ah-vergelijking thead th+th{width:19%;text-align:center}
.ah-vergelijking tbody tr:hover{background:rgba(31,27,19,.035)}
.ah-ja::before,.ah-nee::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.ah-ja::before{background:currentColor}
.ah-nee::before{box-shadow:inset 0 0 0 1px currentColor;opacity:.3}
.ah-vergelijking__kaarten{display:none;list-style:none;margin:0;padding:0}
@media (max-width:759px){.ah-vergelijking__tabel{display:none}.ah-vergelijking__kaarten{display:block}}
.ah-vergelijking__kaart{padding:var(--r3) 0;border-top:1px solid var(--brons)}
.ah-vergelijking__kaart h3{margin-bottom:6px;font-size:24px;font-weight:300;font-stretch:110%}
.ah-vergelijking__kaart summary{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-weight:500;list-style:none}
.ah-vergelijking__kaart summary::-webkit-details-marker{display:none}
.ah-vergelijking__kaart summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ah-vergelijking__kaart details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.ah-vergelijking__kaart ul{margin:8px 0 0;padding:0;list-style:none}
.ah-vergelijking__kaart li{position:relative;margin-bottom:4px;padding-left:22px}

/* Voor en na (tot de fotoshoot: twee beelden naast elkaar, geen veeg) */
.ah-voorna__raster{display:grid;gap:var(--r3);grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.ah-voorna figure,.ah-persoon{margin:0}
.ah-voorna img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ah-voorna figcaption{margin-top:12px;font-size:15px;max-width:48ch}

/* Eén beoordeling over de volle breedte op een foto */
.ah-beoordeling{position:relative;isolation:isolate;padding-block:var(--r6);color:var(--papier);background:var(--brons)}
.ah-beoordeling__beeld,.ah-beoordeling__beeld picture,.ah-beoordeling__beeld img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.ah-beoordeling__beeld img{object-fit:cover}
.ah-beoordeling::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(31,27,19,.66)}
.ah-citaat{margin:0 auto;max-width:22ch;font:300 clamp(36px,3.8vw,55px)/1.08 var(--citaatletter);text-align:center;text-wrap:balance}
.ah-citaat__wie{display:block;margin-top:var(--r3);font:400 15px/1.4 var(--letter);letter-spacing:.04em;text-align:center;color:var(--papier)}

/* Mensen met naam en gezicht */
.ah-mensen__raster{display:grid;gap:var(--r5);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:center}
.ah-personen{display:grid;grid-template-columns:1fr 1fr;gap:var(--r2)}
.ah-persoon img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ah-persoon figcaption{margin-top:10px;font-size:15px;line-height:1.4}
.ah-persoon b{display:block}

/* Vragen als gewone tekst */
.ah-vragen{display:grid;gap:var(--r4) var(--r5);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.ah-vraag h3{margin-bottom:8px;font-size:20px;font-weight:500;font-stretch:100%;line-height:1.3}

/* Niet gevonden: wat er is, de homepage, bellen, en de pagina's die al bestaan */
.ah-niet-gevonden{min-height:calc(100svh - var(--balk) - 200px)}
.ah-niet-gevonden .ah-titel{max-width:22ch}
.ah-niet-gevonden__verder{margin-top:var(--r5)}
.ah-niet-gevonden__kop{margin:0 0 6px}
.ah-niet-gevonden__verder ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 28px}
.ah-niet-gevonden__verder a{display:inline-block;padding:10px 0}

/* Paginakop zonder foto (tekstpagina's en kennisartikelen): label, de h1, een inleiding in lichte letter, een datumregel */
.ah-paginakop{padding-block:var(--r6) var(--r4)}
.ah-paginakop__kop{max-width:20ch;margin-bottom:var(--r3);font-size:var(--titel)}
.ah-paginakop__tekst{max-width:56ch;margin:0 0 var(--r3);font-size:clamp(19px,1.5vw,22px);font-weight:300;line-height:1.45}
.ah-paginakop__meta{margin:0;font-size:14px;color:rgba(31,27,19,.74)}

/* Leestekst in één kolom (hooguit 66 tekens). Opsomming met een kort streepje in plaats van een bolletje en links
   met een haarlijn die bij aanwijzen aankleurt, zoals de artikelen van Reinder. */
.ah-tekst{padding-block:var(--r4) var(--r6)}
.ah-paginakop+.ah-tekst{padding-top:0}
.ah-tekst__kolom{max-width:66ch}
.ah-tekst__kolom h2:not(.ah-titel){margin:var(--r5) 0 var(--r2);font-size:clamp(24px,2.2vw,32px);font-weight:300;font-stretch:110%;line-height:1.15}
.ah-tekst__kolom h3{margin:var(--r4) 0 8px;font-size:19px;font-weight:600;font-stretch:100%;line-height:1.3}
.ah-tekst__kolom>:first-child,.ah-tekst__kolom .ah-titel+h2{margin-top:0}
.ah-tekst__kolom>:is(p,ul,ol,h2,h3,.ah-tekst__sterk){max-width:34em}
.ah-sectie--perkament+.ah-tekst:not(.ah-sectie--perkament){padding-top:var(--r6)}
.ah-sectie--perkament+.ah-sectie--perkament{padding-top:0}
.ah-tekst__kolom a,.ah-paginakop a,.ah-bronnen a{color:var(--knopblauw);text-decoration-color:rgba(46,110,156,.4);transition:text-decoration-color .25s}
.ah-tekst__kolom a:hover,.ah-paginakop a:hover,.ah-bronnen a:hover{text-decoration-color:currentColor}
.ah-tekst__lijst{list-style:none;margin:0 0 1em;padding:0}
.ah-tekst__lijst li{position:relative;margin-bottom:.45em;padding-left:22px}
.ah-tekst__lijst li::before{content:"";position:absolute;left:0;top:.74em;width:10px;height:2px;background:var(--mosterdtekst)}

/* Bronnen onder een artikel: genummerd, klein, met een haarlijn erboven */
.ah-bronnen-sectie{padding-block:0 var(--r6)}
.ah-bronnen-sectie .ah-tekst__kolom{padding-top:var(--r4);border-top:1px solid var(--lijn)}
.ah-bronnen{margin:0;padding-left:1.6em;font-size:15px;line-height:1.5}
.ah-bronnen li{margin-bottom:.6em;padding-left:.2em}
.ah-bronnen li::marker{color:var(--mosterdtekst);font-variant-numeric:tabular-nums}
.ah-bronnen__na{margin-top:var(--r3);font-size:14px}

/* Overzicht van pagina's (zoals de kennisartikelen): regels met een haarlijn, de hele regel klikbaar, een pijl die
   bij aanwijzen een stukje opschuift; geen kaartjes */
.ah-overzicht{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--lijn)}
/* Bij aanwijzen het gebaar van Reinders lijsten: de regel schuift 11 px op, uit de kantlijn groeit een kort streepje
   en de lijn erboven kleurt mee (srv-site.php, "klein gebaar, geen kader"). */
.ah-overzicht__item{position:relative;display:grid;gap:8px;padding:var(--r3) 44px var(--r3) 0;border-top:1px solid var(--lijn);transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .4s}
@media (min-width:900px){
  .ah-overzicht__item{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--r5);align-items:baseline}
  .ah-kennislijst .ah-overzicht__item{grid-template-columns:48px minmax(0,5fr) minmax(0,6fr)}
}
.ah-overzicht__item::before{content:"";position:absolute;left:-18px;top:calc(var(--r3) + .7em);width:0;height:2px;background:var(--mosterdtekst);transition:width .4s cubic-bezier(.22,.61,.36,1)}
.ah-overzicht__item:hover,.ah-overzicht__item:focus-within{transform:translateX(11px);border-top-color:rgba(107,84,14,.55)}
.ah-overzicht__item:hover+.ah-overzicht__item,.ah-overzicht__item:focus-within+.ah-overzicht__item{border-top-color:rgba(107,84,14,.55)}
.ah-overzicht__item:hover::before,.ah-overzicht__item:focus-within::before{width:12px}
.ah-overzicht__nr{font-size:13px;font-weight:700;line-height:1.9;color:var(--mosterdtekst);font-variant-numeric:tabular-nums}
.ah-overzicht__item h3{font-size:clamp(22px,2vw,30px);font-weight:300;font-stretch:110%;line-height:1.15}
.ah-overzicht__item a{text-decoration:none}
.ah-overzicht__item a::after{content:"";position:absolute;inset:0}
.ah-overzicht__item::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:translateY(-50%) rotate(45deg)}
.ah-overzicht__item:hover h3,.ah-overzicht__item:focus-within h3{color:var(--knopblauw)}
.ah-overzicht__item p{margin:0;max-width:60ch}
@media (max-width:699px){.ah-overzicht__item p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
@media (prefers-reduced-motion:reduce){.ah-overzicht__item:hover,.ah-overzicht__item:focus-within{transform:none}}

/* Kennisartikel: de kop met Rein en de datums, en onder het artikel wie het antwoord geeft */
.ah-paginakop .ah-label a{display:inline-block;padding-block:14px;margin-block:-14px;color:inherit;text-decoration:none}
.ah-paginakop .ah-label a:hover{text-decoration:underline}
.ah-artikelkop__wie{display:flex;align-items:center;gap:14px;max-width:56ch;margin-top:var(--r4);padding-top:var(--r3);border-top:1px solid var(--lijn)}
.ah-artikelkop__portret{flex:none;width:56px;height:56px;overflow:hidden}
.ah-artikelkop__portret img{width:56px;height:56px;object-fit:cover}
.ah-artikelkop__wie p{margin:0;line-height:1.5}
.ah-artikelkop__wie a{font-weight:600;color:inherit;text-decoration:none}
.ah-artikelkop__wie a:hover{text-decoration:underline}
.ah-auteur{padding-block:0 var(--r6)}
.ah-auteur__raster{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--r3);max-width:66ch;padding-top:var(--r4);border-top:1px solid var(--lijn)}
@media (max-width:599px){.ah-auteur__raster{grid-template-columns:1fr}.ah-auteur__portret,.ah-auteur__portret img{width:72px;height:72px}}
.ah-auteur__portret{width:96px;height:96px;overflow:hidden}
.ah-auteur__portret img{width:96px;height:96px;object-fit:cover}
.ah-auteur .ah-label{margin-bottom:var(--r2)}
.ah-auteur__naam{margin-bottom:4px;font-size:clamp(22px,1.9vw,26px)}
.ah-auteur__rol{margin:0 0 10px;font-size:13px;font-weight:700;text-transform:uppercase;color:var(--mosterdtekst)}
.ah-auteur__link{display:inline-flex;align-items:center;min-height:44px;color:var(--knopblauw)}
.ah-vraag__meer{margin-top:8px;font-size:15px}
.ah-vraag__meer a{color:var(--knopblauw)}

/* Contact (Chris, sjabloon 3): bellen groot bovenaan, dan mailen en je vraag; de vestigingsgegevens klein eronder */
.ah-contact .ah-binnen{display:grid;gap:var(--r5);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}
.ah-contact__lijst{margin:0}
.ah-contact__lijst div{padding:var(--r3) 0;border-top:1px solid var(--lijn)}
.ah-contact__lijst dt{margin-bottom:10px;color:var(--mosterdtekst)}
.ah-contact__lijst dd{margin:0}
.ah-contact__bel{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(36px,4.2vw,64px);font-weight:300;line-height:1.05;letter-spacing:-.01em;text-decoration:none;font-variant-numeric:lining-nums tabular-nums;transition:color .25s}
.ah-contact__bel:hover{color:var(--knopblauw)}
.ah-contact__mail{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(20px,1.8vw,26px);font-weight:300;text-decoration-color:var(--lijn)}
.ah-contact__mail:hover{text-decoration-color:currentColor}
.ah-contact__bij{margin:8px 0 0;font-size:15px}
.ah-contact__vestiging{margin:var(--r4) 0 0;font-size:14px;line-height:1.7}
.ah-contact__beeld{margin:0}
.ah-contact__beeld picture{overflow:hidden}
.ah-contact__beeld img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* De kaart van het werkgebied: zonder kader of vlak op het papier, de randen lopen zacht weg in de pagina. Kleuren en
   letters komen hier vandaan, niet uit de SVG (scripts/kaart/maak_kaart.py). */
.ah-kaart{margin:0}
.ah-kaart__svg{display:block;width:100%;height:auto;overflow:visible;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect}
.ah-kaart__land{fill:var(--papier)}
.ah-kaart__water{fill:rgba(81,152,203,.2)}
.ah-kaart__gebied{fill:var(--perkament);stroke:rgba(31,27,19,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.ah-kaart__stip{fill:var(--brons);transform-box:fill-box;transform-origin:center;transition:fill .25s,transform .25s}
.ah-kaart__stip.is-aan{fill:var(--mosterd);stroke:var(--brons);stroke-width:1;vector-effect:non-scaling-stroke;transform:scale(1.9)}
.ah-kaart__thuis{fill:var(--mosterd);stroke:var(--brons);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ah-kaart__naam,.ah-kaart__zee,.ah-kaart__schaal text{font-family:var(--letter);fill:var(--brons);paint-order:stroke;stroke:var(--papier);stroke-linejoin:round}
/* Lettermaten in eenheden van de kaart (viewBox 1200 breed): in een kolom van 660 px ongeveer 12 px. Op een telefoon
   worden de namen te klein: daar alleen Hoofddorp, groter. De zeenaam in het diepe blauw voor contrast op het water. */
.ah-kaart__naam{font-size:22px;stroke-width:3px}
.ah-kaart__naam--thuis{font-weight:700;text-transform:uppercase}
.ah-kaart__zee{font-size:24px;fill:var(--knopblauw-diep);font-style:italic;stroke:none}
.ah-kaart__schaal text{font-size:18px;stroke-width:3px}
@media (max-width:699px){
  .ah-kaart__naam:not(.ah-kaart__naam--thuis),.ah-kaart__zee{display:none}
  .ah-kaart__naam--thuis{font-size:40px;stroke-width:5px}
  .ah-kaart__schaal text{font-size:34px}
}
.ah-kaart__schaal line,.ah-kaart__schaal path,.ah-kaart__schaal rect{stroke:var(--brons);fill:var(--brons)}
.ah-kaart__bron{margin-top:10px;font-size:13px;color:rgba(31,27,19,.74)}
.ah-kaart__knop{margin-top:var(--r3)}
.ah-kaart__bron a{color:inherit}

/* Het werkgebied: de plaatsen per gemeente, met de kaart ernaast die blijft staan terwijl je door de lijst scrolt */
.ah-plaatsen__raster{display:grid;gap:var(--r5)}
@media (min-width:1024px){
  .ah-plaatsen--kaart .ah-plaatsen__raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .ah-plaatsen--kaart .ah-plaatsen__kaart{order:2;position:sticky;top:calc(var(--balk) + var(--r3))}
}
.ah-plaatsen:not(.ah-plaatsen--kaart) .ah-plaatsen__lijst{columns:3 260px;column-gap:var(--r5)}
.ah-plaatsen__groep{padding:14px 0;border-top:1px solid var(--lijn);break-inside:avoid}
.ah-plaatsen__gemeente{margin:0 0 4px;font-size:13px;font-weight:700;font-stretch:100%;letter-spacing:0;line-height:1.3;text-transform:uppercase;color:var(--mosterdtekst)}
.ah-plaatsen__groep p{margin:0}
.ah-plaatsen__groep:hover .ah-plaatsen__gemeente{color:var(--brons)}

/* Een tabel in een tekst of als sectie (cookies, verwerkers, termijnen, de wijzer): haarlijnen, geen vulling, geen
   kaartjes. Op een telefoon stapelt elke rij, met de kolomnaam klein boven elke cel, zodat er nooit opzij gescrold hoeft
   te worden. */
.ah-tabel{margin:var(--r3) 0 var(--r4)}
.ah-tabel table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.ah-tabel th,.ah-tabel td{padding:12px 16px 12px 0;border-top:1px solid var(--lijn);text-align:left;vertical-align:top;font-weight:400}
.ah-tabel thead th{padding-top:0;border-top:0;font-size:13px;font-weight:700;line-height:1.3;text-transform:uppercase;color:var(--mosterdtekst);vertical-align:bottom}
.ah-tabel tbody th{font-weight:600}
.ah-tabel tbody tr:last-child>*{border-bottom:1px solid var(--lijn)}
.ah-tabel a{color:var(--knopblauw)}
.ah-tabel__na{max-width:66ch;margin-top:var(--r3)}
.ah-wijzer tbody th{font-size:clamp(20px,1.8vw,24px);font-weight:300;font-stretch:110%;line-height:1.2}
.ah-wijzer tr.is-belangrijk td:last-child{padding-left:22px;font-weight:600;background:linear-gradient(var(--mosterdtekst),var(--mosterdtekst)) 0 calc(12px + .7em)/10px 2px no-repeat}
@media (max-width:759px){
  .ah-tabel table,.ah-tabel tbody,.ah-tabel tr,.ah-tabel th,.ah-tabel td{display:block;width:auto}
  .ah-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ah-tabel tr{padding:12px 0;border-top:1px solid var(--lijn)}
  .ah-tabel tbody tr:last-child{border-bottom:1px solid var(--lijn)}
  .ah-tabel tbody th,.ah-tabel td,.ah-tabel tbody tr:last-child>*{padding:4px 0;border:0}
  .ah-tabel td::before{content:attr(data-kolom);display:block;margin-top:6px;font-size:13px;font-weight:700;line-height:1.3;text-transform:uppercase;color:var(--mosterdtekst)}
  .ah-wijzer tr.is-belangrijk td:last-child{padding-left:0;background:none}
}

/* De rekensom (kennis): de uitkomst groot zoals het prijsmoment, de som klein erboven, en een dunne lijn voor de grens met
   een gouden stuk tot de uitkomst. Alleen lijnen, geen balkgrafiek of vlak. */
.ah-rekensom{margin:var(--r4) 0}
.ah-rekensom__som{margin:0 0 6px;font-size:15px;font-variant-numeric:tabular-nums}
.ah-rekensom__uitkomst{margin:0;font-size:15px}
.ah-rekensom__uitkomst .ah-bedrag{display:inline;margin-right:8px}
.ah-rekensom__lijn{position:relative;height:1px;margin:var(--r3) 0 10px;background:var(--brons)}
.ah-rekensom__lijn span{position:absolute;left:0;top:-1px;width:var(--deel);height:3px;background:var(--mosterd)}
.ah-rekensom__grens{margin:0;font-size:15px;text-align:right}
.ah-rekensom__regels{list-style:none;margin:var(--r3) 0;padding:0}
.ah-rekensom__regels li{padding:10px 0;border-top:1px solid var(--lijn)}
.ah-rekensom__regels li:last-child{border-bottom:1px solid var(--lijn)}

/* De citatenband (Chris, sjabloon 1): twee mensen naast elkaar op perkament, de uitspraak in de citaatletter */
.ah-citaten__raster{display:grid;gap:var(--r5);grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start}
.ah-citaten__persoon{text-align:center}
.ah-citaten__beeld{margin:0 0 var(--r4)}
.ah-citaten__beeld picture{overflow:hidden}
.ah-citaten__beeld img{width:100%;aspect-ratio:6/5;object-fit:cover}
@media (max-width:699px){.ah-citaten__beeld img{aspect-ratio:4/5}}
.ah-citaten .ah-citaat{margin:0 auto var(--r3)}
.ah-citaten__wie{margin:0 0 10px;font-size:15px}
.ah-citaten__tekst{max-width:40ch;margin:0 auto;font-size:16px;line-height:20px}

/* Juridische pagina's: een inhoudsopgave bovenaan en de vestigingsgegevens als adres */
.ah-tekst__inhoud{margin:0 0 var(--r5);padding-bottom:var(--r3);border-bottom:1px solid var(--lijn)}
.ah-tekst__inhoud .ah-label{margin-bottom:10px}
.ah-tekst__inhoud ol{margin:0;padding:0;list-style:none;counter-reset:inhoud;columns:2 240px;column-gap:var(--r4)}
.ah-tekst__inhoud li{display:grid;grid-template-columns:2.2em minmax(0,1fr);margin-bottom:6px;break-inside:avoid;counter-increment:inhoud}
.ah-tekst__inhoud li::before{content:counter(inhoud);color:var(--mosterdtekst);font-variant-numeric:tabular-nums}
.ah-tekst__inhoud a{color:inherit;text-decoration-color:var(--lijn)}
.ah-tekst__inhoud a:hover{text-decoration-color:currentColor}
.ah-tekst__adres{margin:0 0 1em;font-style:normal;line-height:1.7}
.ah-stappen__meer{margin:var(--r3) 0 0}
.ah-stappen__meer a{color:var(--knopblauw)}
/* Op het beige vlak haalt het knopblauw als tekst maar 3,5 : 1: daar het diepere blauw (4,8 : 1). */
.ah-sectie--perkament :is(.ah-stappen__meer,.ah-vraag__meer,.ah-tekst__kolom,.ah-tabel,.ah-paginakop) a,
.ah-sectie--perkament .ah-auteur__link{color:var(--knopblauw-diep)}

/* Beeldcontrole 05-10: lopende tekst zonder losse woorden op de laatste regel, liggende foto's in hun eigen verhouding
   (niet opgeblazen in een staand vak), en kleine verbeteringen per bouwsteen. */
p,li,dd,figcaption{text-wrap:pretty}
.ah-beeld--liggend img{aspect-ratio:auto!important}
.ah-wijzer tbody th{text-wrap:balance}
@media (min-width:760px){.ah-wijzer tbody th{width:30%}}
.ah-datum{white-space:nowrap}
@media (max-width:599px){.ah-artikelkop__wie .ah-datum{display:block}.ah-artikelkop__wie .ah-scheiding{display:none}}
.ah-bronnen__uitgever{display:block;font-size:14px;color:rgba(31,27,19,.74)}
@media (min-width:760px){.ah-tekst__kolom thead th,.ah-tekst__kolom td:nth-child(n+4){white-space:nowrap}}
@media (max-width:759px){.ah-tabel table:not(:has(thead th:nth-child(3))) td::before{display:none}}
@media (max-width:899px){.ah-rekensom-sectie .ah-inhoud__beeld{order:-1}}
@media (min-width:900px){.ah-contact:not(:has(.ah-contact__beeld)) .ah-contact__lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:var(--r5)}}
@media (min-width:1024px){
  .ah-kaart-sectie .ah-binnen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--r5);align-items:start}
  .ah-kaart-sectie .ah-binnen>*{grid-column:1}
  .ah-kaart-sectie .ah-kaart{grid-column:2;grid-row:1/span 6}
}
.ah-plaatsen__zoek{display:grid;gap:6px;margin:0 0 var(--r3)}
.ah-plaatsen__zoek label{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--mosterdtekst)}
.ah-plaatsen__zoek input{min-height:48px;padding:0 14px;border:0;border-bottom:1px solid var(--brons);border-radius:0;background:transparent;font:400 18px/1.2 var(--letter);color:var(--brons)}
.ah-plaatsen__zoek input:focus-visible{outline:2px solid var(--brons);outline-offset:2px}
.ah-plaatsen__geen{margin:0 0 var(--r3)}
.ah-plaatsen__geen a{color:var(--knopblauw-diep)}
.ah-citaten__wie b{display:block}
.ah-citaten__tekst{line-height:1.5}
@media (max-width:699px){.ah-citaten__raster{grid-template-columns:1fr 1fr;gap:var(--r2)}.ah-citaten .ah-citaat{font-size:28px}.ah-citaten__tekst{font-size:15px}}

/* Afsluiting */
.ah-afsluiting .ah-titel{max-width:22ch}
.ah-afsluiting .ah-inleiding{margin-bottom:var(--r4)}

/* Voet (Chris: Footer Nav 14 op 30) */
.ah-voet{padding-block:var(--r5) var(--r3);background:var(--brons);color:var(--papier);font-size:14px;line-height:30px}
.ah-voet__raster{display:grid;gap:var(--r4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.ah-voet__logo{display:block;width:98px;margin-bottom:14px}
.ah-voet__kop{margin:0 0 6px;color:var(--mosterd)}
.ah-voet__lijst{list-style:none;margin:0;padding:0}
.ah-voet a{text-decoration:none}
.ah-voet a:hover,.ah-voet a[aria-current="page"]{color:var(--mosterd)}
.ah-voet__bel{font-weight:700}
.ah-voet .ah-score{margin-top:6px;line-height:1.5}
.ah-voet p{line-height:1.5}
.ah-heel{white-space:nowrap}
.ah-voet__klein{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:var(--r4);padding-top:var(--r2);border-top:1px solid var(--lijn-donker);font-size:13px}

/* De assistent (zoals bij Reinder): rechtsonder alleen het pictogram, zonder kader. Licht met een donkere schaduw op
   een foto of donker vlak, donker met een lichte schaduw op een licht vlak (het script zet ah-hulp--donker). */
.ah-hulp{position:fixed;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;background:none;color:rgba(244,242,237,.95);cursor:pointer;filter:drop-shadow(0 1px 2px rgba(20,18,14,.9)) drop-shadow(0 2px 12px rgba(20,18,14,.5));animation:ah-hulp-in .5s cubic-bezier(.22,.61,.36,1) .9s backwards;transition:color .3s,filter .3s,opacity .25s,translate .25s}
.ah-hulp[hidden],.ah-hulp[aria-expanded="true"]{display:none}
.ah-hulp:hover,.ah-hulp:focus-visible{color:var(--mosterd)}
.ah-hulp--donker{color:rgba(31,27,19,.86);filter:drop-shadow(0 1px 2px rgba(255,255,252,.9)) drop-shadow(0 2px 10px rgba(255,255,252,.55))}
.ah-hulp--donker:hover,.ah-hulp--donker:focus-visible{color:var(--mosterdtekst)}
.ah-hulp:active{translate:0 2px}
@keyframes ah-hulp-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
html.ah-menu-open .ah-hulp{display:none}

/* Het gesprek: over het hele scherm, op de foto van de pagina met een scrim, één kolom links zoals de opening */
.ah-gesprek{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;overflow:auto;color:var(--papier);background:var(--brons);isolation:isolate}
.ah-gesprek[hidden]{display:none}
.ah-gesprek__beeld,.ah-gesprek__beeld picture,.ah-gesprek__beeld img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.ah-gesprek__beeld img{object-fit:cover}
.ah-gesprek::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(31,27,19,.82) 0%,rgba(31,27,19,.62) 45%,rgba(31,27,19,.2) 85%)}
.ah-gesprek__logo{position:absolute;top:calc(var(--balk) / 2);left:var(--marge);width:clamp(104px,11.9vw,171px);transform:translateY(-50%)}
.ah-gesprek__logo svg{width:100%;height:auto}
.ah-gesprek__sluit{position:absolute;top:calc(var(--balk) / 2 - 22px);right:var(--marge);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;font:600 12px/1 var(--letter);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ah-gesprek__sluit:hover{color:var(--mosterd)}
.ah-gesprek__kolom{width:min(100% - 2*var(--marge),var(--breed));margin-inline:auto;padding:calc(var(--balk) + var(--r4)) 0 clamp(40px,8vh,96px)}
.ah-gesprek .ah-label{color:var(--mosterd)}
.ah-gesprek__kop{max-width:17ch;margin-bottom:var(--r3);font-size:clamp(32px,2.78vw,44px);line-height:1.1}
.ah-gesprek__tekst{max-width:44ch;font-size:16px;font-weight:300;line-height:25px}
.ah-gesprek .ah-knoppen{margin-top:var(--r4)}
.ah-gesprek :focus-visible{outline-color:var(--mosterd)}
html.ah-hulp-open{overflow:hidden}
@media (max-width:699px){
  .ah-hulp{right:calc(2px + env(safe-area-inset-right,0px));width:44px;height:44px}
  .ah-hulp svg{width:26px;height:26px}
  .ah-voet{padding-bottom:calc(var(--r3) + 64px)}
  /* Raakvlakken van 44 px voor de duim (spec), zonder dat de lijsten er veel hoger van worden. */
  .ah-voet__lijst a,.ah-voet__klein a{display:inline-flex;align-items:center;min-height:44px}
  .ah-voet__lijst{line-height:1.3}
  .ah-balk__taal{min-width:44px;justify-content:center}
  .ah-balk__logo{min-height:44px;display:flex;align-items:center}
  .ah-met-opening:not(.ah-voorbij-opening) .ah-hulp{opacity:0;translate:0 12px;pointer-events:none;visibility:hidden}
  .ah-gesprek::before{background:linear-gradient(0deg,rgba(31,27,19,.9) 0%,rgba(31,27,19,.7) 55%,rgba(31,27,19,.3) 100%)}
  .ah-gesprek .ah-knop{flex:1 1 100%}
}

/* Beweging (Wesley 05-10, naar Reinder): de openingsfoto zet zich rustig neer en de tekst komt regel voor regel op;
   verderop komt elk blok zacht binnen zodra het in beeld komt; tussen pagina's vloeit de ene in de andere over.
   Een sinus en geen expo (Wesley over Reinder, 4 sept: "die lopen erg snel"), dezelfde maten als daar. Alleen transform
   en opacity, dus niets verschuift. De openingsfoto is het grootste beeld (LCP): die krijgt alleen een schaal en nooit
   opacity, zodat de browser hem meteen tekent. ah-wacht zet het script alleen op blokken onder de vouw; zonder script,
   bij afdrukken of bij minder beweging staat alles er gewoon. */
:root{--sinus:cubic-bezier(.37,0,.63,1)}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.22s var(--sinus) both ah-uit}
  ::view-transition-new(root){animation:.45s var(--sinus) both ah-in}
  .ah-balk{view-transition-name:ah-balk}
  .ah-opening__beeld img{animation:ah-zet 1.8s var(--sinus) both}
  .ah-opening__inhoud>:not(.ah-opening__kop),.ah-opening__kop .ah-regel{animation:ah-op 1.05s var(--sinus) both}
  .ah-opening__inhoud>.ah-label{animation-delay:.1s}
  .ah-opening__kop .ah-regel:nth-child(1){animation-delay:.21s}
  .ah-opening__kop .ah-regel:nth-child(2){animation-delay:.32s}
  .ah-opening__kop .ah-regel:nth-child(3){animation-delay:.43s}
  .ah-opening__inhoud>.ah-opening__tekst{animation-delay:.54s}
  .ah-opening__inhoud>.ah-knoppen{animation-delay:.65s}
  .ah-opening__inhoud>.ah-score{animation-delay:.76s}
  .ah-paginakop .ah-binnen>*{animation:ah-op 1.05s var(--sinus) both}
  .ah-paginakop .ah-binnen>:nth-child(1){animation-delay:.1s}
  .ah-paginakop .ah-binnen>:nth-child(2){animation-delay:.21s}
  .ah-paginakop .ah-binnen>:nth-child(3){animation-delay:.32s}
  .ah-paginakop .ah-binnen>:nth-child(4){animation-delay:.43s}
  .ah-wacht{opacity:0;transform:translateY(12px)}
  .ah-wacht picture img{transform:scale(1.035)}
  .ah-beweeg{transition:opacity 1.05s var(--sinus),transform 1.05s var(--sinus)}
  .ah-beweeg picture img{transition:transform 1.8s var(--sinus)}
  .ah-wacht .ah-rekensom__lijn span{width:0}
  .ah-beweeg .ah-rekensom__lijn span{transition:width .6s var(--sinus) .45s}
}
@keyframes ah-zet{from{transform:scale(1.035)}}
@keyframes ah-op{from{opacity:0;transform:translateY(12px)}}
@keyframes ah-uit{to{opacity:0}}
@keyframes ah-in{from{opacity:0}}
@media print{.ah-wacht{opacity:1!important;transform:none!important}.ah-wacht img{transform:none!important}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}