/* =====================================================================
   CinemaLux · shared site styles            /assets/site.css
   Owner: site. Used by every page: home, content pages, legal pages,
   /reserveren/ and /beheer/. Page-specific styles live next to the page.
   Paths are absolute (/fonts, /img) so the file works from any folder.

   CLASS INDEX (read this before building a page)
   ---------------------------------------------------------------------
   Tokens     --pleister --kalk --steen --zand --zaal --diep --goud --goud-licht
              --brons --inkt2 --nevel --papier (card paper) --rood (errors)
              --serif (Cinzel) --sans (Commissioner) --g (side gutter)
              --nav (header height) --ease --lvh --bar
   Base       .sr (visually hidden) · .disp (Cinzel caps display type)
              .lead (intro text) · .body (muted body copy) · .kick (gold-line
              label above a title) · .num (Cinzel numeral) · .ln > span (line
              mask for rising text)
   Layout     .wrap (max 1240 + gutters) · .wrap--smal (max 760) ·
              .blok (vertical section padding) · .blok--kalk / --navy
   Header     .nav (fixed bar) · .nav__logo (.lg-navy + .lg-goud imgs) ·
              .nav__links (desktop) · .nav__waar (page name, phone) ·
              .nav__cta (Reserveer) · .nav__menu (phone toggle) · .nav__bar (progress)
              .nav--donker (solid dark bar over the navy chapters) · + .nav--film
              (the fade over a full-bleed home film)
              .menu-gsm (phone menu overlay, toggled by /assets/site.js)
   Buttons    .btn + .btn--navy | .btn--gold | .btn--ghost (on navy) | .btn--line
              (text link with underline) · .btn--blok (full width) ·
              .btn .ar (arrow that nudges) · .btn.is-bezig (loading spinner) ·
              .btn[disabled]
   Screen     .doek (navy "screen" panel with the gold masking frame) ·
              .doek-kop (page header built on .doek) · .seam (opens from the
              middle: in .doek-kop at once on load, elsewhere in view; js adds .is-open)
   Forms      .veld (one field: label + control + hint + error) ·
              .veld__label · .veld__hint · .veld__fout (role=alert text) ·
              .invoer (input, select, textarea) · .veld.is-fout (error state) ·
              .keuzes (group of tiles) + .keuze (radio/checkbox tile: label >
              input + .keuze__t title + .keuze__s sub) · .vink (checkbox row
              with text, e.g. terms) · .rij (fields side by side) ·
              .stappen (step indicator: ol > li.is-nu / li.is-klaar)
   Messages   .melding (+ --fout | --ok | --info) for inline status boxes ·
              .concept (gold "draft" stamp for legal texts; Studio preview or ?review=1 only)
   Footer     .voet (navy credits footer) · .voet__credits (dl: dt role, dd name)
   Motion     [data-reveal] fades/rises in when visible (site.js); everything
              is static under prefers-reduced-motion or without JS.
   Utility    [hidden] always hides (beats any display rule) · .skip (skip link)

   HOW A PAGE USES IT
   - <head>: <link rel="stylesheet" href="/assets/site.css"> and
     <script src="/assets/site.js"></script> (no defer: it sets html.js-motion
     before the first paint). Content pages also load /assets/pagina.css.
   - Header + phone menu + footer: copy the blocks between
     <!-- shared:header ... --> / <!-- /shared:header --> and
     <!-- shared:footer --> / <!-- /shared:footer --> from any content page
     (e.g. /faq/index.html). Put aria-current="page" on the current link and
     the page name in .nav__waar. <main id="inhoud"> is the skip-link target.
   - Live facts (site.js, from GET /api/config): <b data-prijs="zaal-2">€ 99</b>
     shows the room's normal price; <span data-config="annulering_uren">48</span>
     shows any number from the config. Keep the current value in the HTML.
   ===================================================================== */

@font-face{font-family:"Cinzel";src:url(/fonts/cinzel-wght-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Commissioner";src:url(/fonts/commissioner-wght-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --pleister:#EEE7DE; --kalk:#F5F0EA; --steen:#DCD1C8; --zand:#CDBFB1;
  --zaal:#0B1B32; --diep:#041631; --goud:#DCB67B; --goud-licht:#F4CE94; --brons:#6E5830; --inkt2:#4A5466; --nevel:#8E97A6;
  --papier:#F8F4EF; --rood:#9A3324; --rood-zacht:#F3E1DA;
  --serif:"Cinzel",Georgia,"Times New Roman",serif;
  --sans:"Commissioner",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --g:clamp(16px,4vw,64px); --nav:72px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --lvh:100vh; --bar:0px;
}
@supports (height:100lvh){ :root{ --lvh:100lvh; --bar:calc(100lvh - 100svh); } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--pleister);overflow-anchor:none}
body{margin:0;background:var(--pleister);color:var(--zaal);font-family:var(--sans);font-weight:380;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--zaal);color:var(--goud-licht)}
:focus-visible{outline:2px solid var(--zaal);outline-offset:4px;border-radius:2px}
.nav--donker :focus-visible,.menu-gsm :focus-visible,.doek :focus-visible,.voet :focus-visible,.blok--navy :focus-visible{outline-color:var(--goud-licht)}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:var(--zaal);color:var(--goud-licht);padding:12px 18px;font-weight:500;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- type ---------- */
.disp{font-family:var(--serif);font-weight:500;letter-spacing:.012em;line-height:.94;text-transform:uppercase;overflow-wrap:break-word}
.lead{font-size:clamp(18px,1.4vw,21px);line-height:1.55;font-weight:360;max-width:34ch}
.body{max-width:52ch;color:var(--inkt2)}
.kick{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;letter-spacing:.01em;color:var(--brons)}
.kick::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.num{font-family:var(--serif);font-weight:500;color:var(--brons);font-size:15px;letter-spacing:.06em}
.ln{display:block;overflow:hidden;padding:.05em 0 .03em}
.ln>span{display:block}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(1240px + 2 * var(--g));margin:0 auto;padding:0 var(--g)}
.wrap--smal{max-width:calc(760px + 2 * var(--g))}
.blok{padding:clamp(64px,11vh,130px) 0}
.blok--kalk{background:var(--kalk)}
.blok--navy{background:var(--zaal);color:var(--pleister)}
.blok--navy .kick{color:var(--goud)}
.blok--navy .body{color:#C9CED7}
.blok--navy .disp{color:var(--goud)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;border:0;border-radius:999px;font:500 16px/1 var(--sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),opacity .3s}
.btn--navy{background:var(--zaal);color:var(--goud-licht)}
.btn--navy:hover{background:var(--diep)}
.btn--gold{background:var(--goud);color:var(--zaal)}
.btn--gold:hover{background:var(--goud-licht)}
.btn--ghost{background:transparent;border:1px solid rgba(220,182,123,.62);color:var(--goud-licht)}
.btn--ghost:hover{border-color:var(--goud-licht);background:rgba(220,182,123,.08)}
.btn--licht{background:transparent;border:1px solid var(--zand);color:var(--zaal)}
.btn--licht:hover{border-color:var(--zaal)}
.btn--line{background:transparent;color:inherit;padding:0 6px;min-height:48px}
.btn--line span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease)}
.btn--line:hover span{background-size:0 1px;background-position:100% 100%}
.btn--blok{width:100%}
.btn .ar{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn.is-bezig{color:transparent!important;pointer-events:none}
.btn.is-bezig::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid var(--goud-licht);border-right-color:transparent;animation:draai .8s linear infinite}
.btn--gold.is-bezig::after,.btn--licht.is-bezig::after{border-color:var(--zaal);border-right-color:transparent}
@keyframes draai{to{transform:rotate(360deg)}}
.kort{display:none}
.mag{will-change:transform}

/* =====================================================================
   HEADER
   ===================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--g);color:var(--zaal);background:rgba(238,231,222,.9);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);transition:background .5s,color .5s,box-shadow .4s}
.nav.is-line{box-shadow:0 1px 0 rgba(11,27,50,.08)}
/* dark bar: solid navy with blur, so text scrolling under it never shows through.
   + .nav--film (home JS, while a full-bleed film is under the bar): the old fade, no blur, no line.
   --nav-film (0 bar, 1 fade) moves the colour and the gradient on crossing curves, so no switch dips to see-through. */
@property --nav-film{syntax:"<number>";inherits:false;initial-value:0}
.nav--film{--nav-film:1}
.nav--donker{background:linear-gradient(rgba(4,22,49,calc(.8 * var(--nav-film) * (2 - var(--nav-film)))),rgba(4,22,49,calc(.35 * var(--nav-film) * (2 - var(--nav-film)))) 70%,rgba(4,22,49,0)) rgba(4,22,49,calc(.92 - .92 * var(--nav-film) * var(--nav-film)));text-shadow:0 1px 10px rgba(4,22,49,.5);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);color:var(--pleister);transition:background 0s,color .5s,box-shadow .4s,--nav-film .4s var(--ease)}
.nav--donker,.nav--donker.is-line{box-shadow:0 1px 0 rgba(220,182,123,.16)}
.nav--donker.nav--film{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.nav__logo{position:relative;display:flex;align-items:center;min-height:48px;min-width:48px;flex:none}
.nav__logo img{height:44px;width:auto;transition:opacity .5s}
.nav__logo .lg-goud{position:absolute;left:0;top:50%;margin-top:-22px;opacity:0}
.nav--donker .lg-goud,.nav.is-menu .lg-goud{opacity:1}
.nav--donker .lg-navy,.nav.is-menu .lg-navy{opacity:0}
.nav__links{display:flex;gap:clamp(18px,2.4vw,40px);font-size:15.5px;font-weight:450}
.nav__links a{text-decoration:none;padding:12px 0;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-actief::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav .btn{min-height:46px;padding:0 22px;font-size:15px}
.nav__cta{background:var(--zaal);color:var(--goud-licht)}
.nav__cta:hover{background:var(--diep)}
.nav--donker .nav__cta,.nav.is-menu .nav__cta{background:var(--goud);color:var(--zaal)}
.nav__rechts{display:flex;align-items:center;gap:10px;flex:none}
.nav__waar{display:none;flex:1;min-width:0;margin:0;font-size:13.5px;font-weight:500;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.nav__waar b{font-family:var(--serif);font-weight:500;color:var(--brons);margin-right:8px;letter-spacing:.06em}
.nav--donker .nav__waar b,.nav.is-menu .nav__waar b{color:var(--goud)}
.nav__bar{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;overflow:hidden}
.nav__bar i{position:absolute;inset:0;background:var(--goud);transform-origin:0 50%;transform:scaleX(var(--pv,0))}
.nav.is-menu .nav__bar{opacity:0}
/* phone menu toggle: two gold-ended lines that fold into a cross */
.nav__menu{display:none;align-items:center;justify-content:center;gap:10px;min-width:48px;min-height:48px;margin-right:-10px;padding:0 10px;border:0;background:transparent;color:inherit;cursor:pointer;font:500 14px/1 var(--sans);letter-spacing:.04em}
.nav__menu-lijnen{position:relative;display:block;width:22px;height:12px}
.nav__menu-lijnen i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:1px;transition:transform .45s var(--ease),top .45s var(--ease)}
.nav__menu-lijnen i:first-child{top:2px}
.nav__menu-lijnen i:last-child{top:9px;right:6px}
.nav.is-menu{background:transparent;color:var(--pleister);text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.nav.is-menu .nav__menu-lijnen i:first-child{top:5.5px;transform:rotate(45deg)}
.nav.is-menu .nav__menu-lijnen i:last-child{top:5.5px;right:0;transform:rotate(-45deg)}

/* ---------- phone menu overlay ---------- */
.menu-gsm{position:fixed;inset:0;z-index:59;background:var(--diep);color:var(--pleister);display:flex;flex-direction:column;padding:calc(var(--nav) + 18px) 28px calc(26px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
.menu-gsm[hidden]{display:none}
.menu-gsm::before{content:"";position:fixed;inset:10px;border:1px solid rgba(220,182,123,.26);pointer-events:none}
.menu-gsm__lijst{display:flex;flex-direction:column;gap:2px;counter-reset:mg}
.menu-gsm__lijst a{display:flex;align-items:baseline;gap:14px;min-height:52px;padding:6px 0;text-decoration:none;font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(26px,8vw,34px);line-height:1.1;overflow:hidden}
.menu-gsm__lijst a>span{display:inline-block}
.menu-gsm__lijst a::before{counter-increment:mg;content:counter(mg,decimal-leading-zero);font-size:13px;letter-spacing:.08em;color:var(--goud);transform:translateY(-.9em);flex:none;width:22px}
.menu-gsm__lijst a[aria-current="page"]{color:var(--goud)}
.menu-gsm__klein{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(220,182,123,.22)}
.menu-gsm__klein a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:16px;color:var(--steen)}
.menu-gsm__klein a[aria-current="page"]{color:var(--goud-licht)}
.menu-gsm__voet{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:14px}
.menu-gsm__contact{display:flex;flex-wrap:wrap;gap:2px 20px;font-size:15px;color:#AEB5C1}
.menu-gsm__contact a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
html.menu-open{overflow:hidden}
html.menu-open .gsmbar{visibility:hidden}

/* =====================================================================
   SCREEN PANELS (the masking frame)
   ===================================================================== */
.doek{position:relative;background:var(--zaal);color:var(--pleister);box-shadow:0 50px 90px -50px rgba(11,27,50,.55)}
.doek::after{content:"";position:absolute;inset:14px;border:1px solid rgba(220,182,123,.28);pointer-events:none}
.doek h1,.doek h2{color:var(--goud)}
.doek .kick{color:var(--goud)}
.doek .lead{color:var(--pleister)}
.doek .body{color:#C9CED7}
/* page header: plaster page, the navy screen opens from its middle seam */
.doek-kop{padding:calc(var(--nav) + clamp(14px,3vw,36px)) var(--g) 0}
.doek-kop .doek{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(48px,7vw,104px) clamp(26px,5.4vw,96px);min-height:min(62vh,640px)}
.doek-kop--tekst .doek{grid-template-columns:1fr;min-height:0;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(44px,5.4vw,80px)}
.doek-kop__txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(16px,2.4vh,24px)}
.doek-kop h1{font-size:clamp(40px,5.2vw,86px);line-height:.98}
.doek-kop--tekst h1{font-size:clamp(36px,4.4vw,68px)}
.doek-kop__fig{position:relative;z-index:1;margin:0;align-self:stretch;min-height:280px;overflow:hidden;background:var(--diep)}
.doek-kop__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.doek-kop__fig figcaption,.fig-label{position:absolute;left:14px;bottom:12px;z-index:2;font-size:12.5px;color:var(--pleister);background:rgba(4,22,49,.62);padding:4px 10px;border-radius:999px}
.doek-kop .knoppen{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:6px}
/* seam reveal: closed to a vertical line, opens on .is-open (site.js) */
.js-motion .seam{clip-path:inset(0% 50% 0% 50%)}
.js-motion .seam.is-open{clip-path:inset(0% 0% 0% 0%);transition:clip-path 1.3s cubic-bezier(.65,0,.25,1)}
.js-motion .seam .seam__in{opacity:0;transform:translateY(18px)}
.js-motion .seam.is-open .seam__in{opacity:1;transform:none;transition:opacity .9s var(--ease) .55s,transform 1s var(--ease) .55s}
/* the page header is the first screen: its seam opens at once, from the first frame (no observer) */
.js-motion .doek-kop .seam{animation:seamOpen .7s var(--ease) both}
.js-motion .doek-kop .seam .seam__in{animation:seamIn .6s var(--ease) .12s both}
@keyframes seamOpen{from{clip-path:inset(0% 50% 0% 50%)}to{clip-path:inset(0% 0% 0% 0%)}}
@keyframes seamOpenGsm{from{clip-path:inset(0% 35% 0% 35%)}to{clip-path:inset(0% 0% 0% 0%)}}
@keyframes seamIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js-motion [data-reveal]{opacity:0;transform:translateY(28px)}
.js-motion [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}

/* =====================================================================
   FORMS
   ===================================================================== */
.veld{display:flex;flex-direction:column;gap:8px;min-width:0}
.veld__label{font-size:15.5px;font-weight:500;color:var(--zaal)}
.veld__label small{font-weight:380;color:var(--inkt2);font-size:14px}
.veld__hint{font-size:14px;color:var(--inkt2);line-height:1.45}
.veld__fout{display:none;font-size:14.5px;font-weight:500;color:var(--rood);line-height:1.4}
.veld.is-fout .veld__fout{display:block}
.invoer{width:100%;min-height:56px;padding:14px 16px;border:1px solid var(--zand);border-radius:3px;background:#FBF8F4;color:var(--zaal);font:400 17px/1.4 var(--sans);transition:border-color .25s,box-shadow .25s,background .25s;-webkit-appearance:none;appearance:none}
.invoer::placeholder{color:#9AA0AB}
.invoer:hover{border-color:#B8A897}
.invoer:focus{outline:0;border-color:var(--zaal);box-shadow:0 0 0 3px rgba(220,182,123,.55);background:#fff}
textarea.invoer{min-height:120px;resize:vertical}
select.invoer{padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--zaal) 50%),linear-gradient(135deg,var(--zaal) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.veld.is-fout .invoer{border-color:var(--rood);background:#FFF9F7}
.veld.is-fout .invoer:focus{box-shadow:0 0 0 3px rgba(154,51,36,.22)}
.rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px}
/* choice tiles: the chosen one becomes a small navy screen with the gold frame */
.keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px;border:0;margin:0;padding:0;min-width:0}
.keuzes legend{float:left;width:100%;padding:0;margin:0 0 12px;font-size:15.5px;font-weight:500}
.keuzes legend+*{clear:left}
.keuze{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:64px;padding:14px 18px 14px 50px;border:1px solid var(--zand);border-radius:3px;background:#FBF8F4;cursor:pointer;transition:background .3s var(--ease),border-color .3s,color .3s}
.keuze:hover{border-color:#B8A897}
.keuze input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.keuze::before{content:"";position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;border:1px solid var(--zand);border-radius:50%;background:#fff;transition:background .3s,border-color .3s,box-shadow .3s}
.keuze--vink::before{border-radius:3px}
.keuze__t{font-weight:500;font-size:16.5px;line-height:1.3}
.keuze__s{font-size:14px;color:var(--inkt2);line-height:1.35}
.keuze::after{content:"";position:absolute;inset:5px;border:1px solid rgba(220,182,123,.5);pointer-events:none;opacity:0;transition:opacity .3s}
.keuze:has(input:checked){background:var(--zaal);border-color:var(--zaal);color:var(--pleister)}
.keuze:has(input:checked)::after{opacity:1}
.keuze:has(input:checked)::before{border-color:var(--goud);background:var(--goud);box-shadow:inset 0 0 0 4px var(--zaal)}
.keuze--vink:has(input:checked)::before{box-shadow:none;background:var(--goud) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.3l3 3 6-6.6' fill='none' stroke='%230B1B32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.keuze:has(input:checked) .keuze__s{color:#C9CED7}
.keuze:has(input:focus-visible){outline:2px solid var(--zaal);outline-offset:3px}
.keuze:has(input:disabled){opacity:.45;cursor:not-allowed}
.vink{position:relative;display:flex;gap:14px;align-items:flex-start;min-height:44px;padding:4px 0;font-size:15.5px;line-height:1.5;cursor:pointer}
.vink input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--zaal);cursor:pointer}
.vink a{text-underline-offset:3px}
.veld.is-fout .vink{color:var(--rood)}
/* step indicator */
.stappen{display:flex;gap:6px;counter-reset:st}
.stappen li{flex:1;display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:500;color:var(--nevel);min-width:0}
.stappen li::before{content:"";height:2px;background:var(--steen);transition:background .4s var(--ease)}
.stappen li.is-klaar::before{background:var(--brons)}
.stappen li.is-nu::before{background:var(--goud)}
.stappen li.is-nu{color:var(--zaal)}
.stappen li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- messages ---------- */
.melding{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-left:3px solid var(--goud);background:var(--papier);font-size:15.5px;line-height:1.5}
.melding--fout{border-left-color:var(--rood);background:var(--rood-zacht);color:#4A1A12}
.melding--ok{border-left-color:var(--brons)}
.melding--info{border-left-color:var(--zaal)}
.melding strong{font-weight:600}
/* draft stamp for legal texts and undecided rules */
.concept{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border:1px solid var(--brons);color:var(--brons);font-size:13.5px;font-weight:600;letter-spacing:.04em;background:rgba(220,182,123,.12)}
.concept::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--goud);box-shadow:0 0 0 3px rgba(220,182,123,.3)}
.doek .concept{color:var(--goud-licht);border-color:rgba(220,182,123,.6);background:rgba(220,182,123,.08)}
/* guests never see it: only the Studio preview (html.studio / .studio-voorbeeld, overlay.js) or ?review=1 (html.review, site.js) */
html:not(.studio):not(.studio-voorbeeld):not(.review) .concept{display:none}

/* =====================================================================
   FOOTER: the closing credits
   ===================================================================== */
.voet{position:relative;z-index:1;background:var(--diep);color:var(--pleister);padding:clamp(64px,10vh,110px) var(--g) calc(28px + env(safe-area-inset-bottom));text-align:center}
.voet::before{content:"";position:absolute;left:var(--g);right:var(--g);top:0;height:1px;background:linear-gradient(90deg,rgba(220,182,123,0),rgba(220,182,123,.55),rgba(220,182,123,0))}
.voet__in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(30px,5vh,46px)}
.voet__logo{width:clamp(120px,11vw,150px)}
.voet__credits{display:flex;flex-direction:column;gap:12px;width:100%;max-width:640px}
.voet__credits div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px;align-items:baseline}
.voet__credits dt{text-align:right;font-size:14px;letter-spacing:.06em;color:var(--goud)}
.voet__credits dd{text-align:left;font-size:17px}
.voet__credits a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease);padding:6px 0}
.voet__credits a:hover{background-size:100% 1px}
.voet__nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 30px}
.voet__nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--goud-licht)}
.voet__nav a:hover{color:#fff}
.voet__onder{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-top:22px;border-top:1px solid rgba(220,182,123,.18);font-size:13.5px;color:#9AA3B2;text-align:left}
.voet__onder ul{display:flex;flex-wrap:wrap;gap:0 20px}
.voet__onder a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.voet__onder a:hover{color:var(--pleister)}

/* =====================================================================
   PHONE
   ===================================================================== */
@media (max-width:899px){
  :root{--nav:62px}
  body{font-size:17px}
  .nav{gap:12px}
  .nav__links{display:none}
  .nav__waar{display:block}
  .nav__menu{display:inline-flex}
  .nav__logo img{height:38px}
  .nav__logo .lg-goud{margin-top:-19px}
  .nav .btn{min-height:44px;padding:0 18px}
  .doek-kop{padding-left:0;padding-right:0;padding-top:var(--nav)}
  .doek-kop .doek{grid-template-columns:1fr;padding:48px 22px 34px;min-height:0;box-shadow:none}
  .doek-kop .doek::after{inset:8px}
  .js-motion .doek-kop .seam{animation-name:seamOpenGsm}
  .doek-kop__fig{min-height:0;aspect-ratio:4/3;margin:4px -6px 0}
  .doek-kop .knoppen .btn{flex:1 1 auto}
  .doek-kop h1{font-size:clamp(34px,10vw,46px)}
  .doek-kop--tekst h1{font-size:clamp(30px,8.8vw,40px)}
  .voet__credits div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px}
  .voet__credits dt{font-size:13px}
  .voet__credits dd{font-size:15.5px}
  .voet__nav ul{gap:0 22px}
  .voet__onder{flex-direction:column;align-items:center;text-align:center}
  .voet__onder ul{justify-content:center}
  .keuze{min-height:60px}
}
@media (max-width:409px){ .stappen li span{display:none} .nav__menu-txt{display:none} .nav__menu{margin-right:-8px;padding:0 8px} .nav .btn{padding:0 16px} }
@media (min-width:900px){ .menu-gsm{display:none!important} }
@media (pointer:coarse),(max-width:819px){
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--pleister)}
  .nav--donker{background:linear-gradient(rgba(4,22,49,calc(.8 * var(--nav-film) * (2 - var(--nav-film)))),rgba(4,22,49,calc(.35 * var(--nav-film) * (2 - var(--nav-film)))) 70%,rgba(4,22,49,0)) rgba(4,22,49,calc(.92 - .92 * var(--nav-film) * var(--nav-film)));-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px)}
  .nav.is-menu{background:transparent}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .nav,.menu-gsm,.voet__nav,.gsmbar{display:none!important}
  body{background:#fff;font-size:12pt}
  .doek{background:#fff;color:#000;box-shadow:none}
  .doek::after{display:none}
  .doek h1,.doek h2,.doek .kick,.doek .lead{color:#000}
}