/* ============================================================================================
   GRATIS WEBSITECHECK · lichte proef op de gedeelde basis (ronde 1, 04-10-2026). Voortgangsproef, geen kandidaat.
   Laadt NA nx-basis.css. Alleen wat van deze pagina is: hero "Het stille water", het formulier op glas, de uitleg.
   Teksten staan in websitecheck.html en zijn letterlijk die van preview-cinematic/websitecheck.html.
   HET FORMULIER VERZENDT NIETS (proef). ER IS GEEN LICHT BEELD: de plaat is een getekend schema.
   Plaatfracties (compositievoorstel §9):
     L liggend 16:9   lucht links tot 52 %; rechts (50-100 %) over de volle hoogte stil water = paneelzone;
                      banyan ver x 6-26 %, y 52-66 %; overloop x 30-44 %, y 56-66 %; kanaal y 67-79 %;
                      pyriet x 7-14 %, veer x 17-36 %, jade x 41-47 %, alle y 80-89 %.
     S staand 9:16    lucht 0-30 % (daar staat de tekst voor); band y 31-47 % met banyan, jade, overloop; vanaf 47 % stil water.
   De plaat hangt aan een venster in de tekstkolom (.wc-stage): de lijn tussen lucht en water ligt daardoor altijd direct
   onder de laatste tekstregel, hoe hoog de tekst ook is (grote letters, smal venster). Boven de plaat loopt de luchtkleur
   door, onder de plaat het marmer (links) en het stille water (rechts).
   ============================================================================================ */

/* RONDE 2 (B139): een element dat met Tab de focus krijgt schuift niet tot precies op de schermrand; zijn ring blijft zichtbaar
   (gemeten ronde 1: de kopieerknop stond met zijn onderkant op de vouw, de ring viel eronder) */
html{scroll-padding-bottom:28px}
body[data-page="websitecheck"]{--lijn:max(20px,calc(var(--edge) - 12px))}        /* één linkerlijn: logo, heldtekst, vloer, footer */
body[data-page="websitecheck"] .site-footer{padding-inline:var(--lijn)}
body[data-page="websitecheck"] .site-footer::before{left:var(--lijn);right:var(--lijn)}

.wc{background:#f7f3ec;color:var(--nx-inkt)}
.wc .kw{font:inherit;color:inherit}
.wc [hidden]{display:none!important}                        /* .tekstlink en de knoppen hebben een eigen display; hidden blijft hidden */

/* ---------------------------------------------------------------- hero, gedeeld */
.wc-hero{position:relative;isolation:isolate;overflow:clip;background:#dbe7ee}
.wc-hero-inner{position:relative}
.wc-stage{pointer-events:none}
.wc-stage picture{display:block}
.wc-plaat{position:absolute;left:0;z-index:-1;display:block;width:100%;max-width:none;height:var(--ph)}
.wc-stage::after{content:"";position:absolute;left:0;z-index:-1;width:100%;height:400vh}
.wc-schema{position:absolute;z-index:0;margin:0;padding:3px 9px;border-radius:999px;white-space:nowrap;
  font:400 10px/1.3 var(--sans);letter-spacing:.04em;color:var(--nx-inkt);background:rgba(255,253,248,.92);box-shadow:inset 0 0 0 1px rgba(176,138,69,.4)}
.wc-schema b{margin-right:6px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:599.98px){.wc-schema__lang{display:none}}

.wc-kop .eyebrow{margin:0 0 14px;font-size:.8125rem;letter-spacing:.32em;color:var(--nx-inkt-diep)}
.wc-kop .eyebrow::after{width:48px;background:#b18243}
.wc-kop h1{--km:4rem;font:400 var(--km)/1.05 var(--serif);letter-spacing:-.006em;color:var(--nx-inkt-diep);overflow-wrap:anywhere}
.wc-kop h1 .kw{display:block}
.wc-rule{display:block;width:72px;height:1px;margin-top:18px;background:#b18243}
.wc-lead{max-width:33em;margin-top:16px;font-size:1.125rem;line-height:1.5;color:var(--nx-inkt);text-wrap:pretty}
.wc-zeker{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px}
.wc-zeker li{position:relative;display:flex;align-items:center;min-height:30px;padding-left:28px;font:500 .96875rem/1.35 var(--sans);color:var(--nx-inkt-diep)}
/* vinkje als vorm, geen teken */
.wc-zeker li::before{content:"";position:absolute;left:4px;top:50%;width:11px;height:6px;margin-top:-6px;border-left:2px solid var(--nx-petrol);border-bottom:2px solid var(--nx-petrol);transform:rotate(-45deg)}

/* ---------------------------------------------------------------- het formulier op glas */
.wc-panel{--g-r:26px;padding:26px 28px 24px}
.wc-panel-titel{font:400 1.75rem/1.1 var(--serif);color:var(--nx-inkt-diep)}
.wc-uitleg{margin-top:8px;font-size:.96875rem;line-height:1.45;color:var(--nx-inkt)}
.wc-form{display:grid;gap:12px;margin-top:14px}
.wc-veld{display:grid;gap:6px;min-width:0}
.wc-veld>label,.wc-label-rij>label{font:600 .96875rem/1.3 var(--sans);color:var(--nx-inkt-diep)}
.wc-optioneel{font-weight:400;color:var(--nx-inkt)}
.wc-label-rij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 18px}
.wc-check{display:inline-flex;align-items:center;min-height:44px}
.wc-check input{flex:0 0 auto;width:24px;height:24px;margin:0;accent-color:var(--nx-petrol);cursor:pointer}
.wc-check label{display:inline-flex;align-items:center;min-height:44px;padding-left:10px;font:400 .9375rem/1.3 var(--sans);color:var(--nx-inkt);cursor:pointer}
.wc-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* velden: een licht, bijna dekkend vlak met een duidelijke donkere rand; op glas herkenbaar als invoerveld */
.wc-veld :is(input[type="text"],input[type="email"],textarea){
  display:block;width:100%;min-height:50px;margin:0;padding:12px 14px;border:1px solid rgba(11,44,41,.62);border-radius:12px;
  font:400 1.0625rem/1.4 var(--sans);color:var(--nx-inkt-diep);background:rgba(255,253,248,.92);
  box-shadow:inset 0 1px 2px rgba(11,44,41,.10);transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.wc-veld textarea{min-height:76px;resize:vertical}
.wc-veld ::placeholder{color:#566073;font-style:italic;opacity:1}
.wc-veld :is(input[type="text"],input[type="email"],textarea):focus-visible{outline:2px solid var(--nx-focus);outline-offset:2px;border-radius:12px;border-color:var(--nx-focus);background:#fffdf8;box-shadow:0 0 0 5px rgba(255,253,248,.92)}
.wc-veld :is(input,textarea)[aria-invalid="true"]{border:2px solid #8f1d1d;padding:11px 13px;background:#fff9f6}
.wc-veld input:disabled{border-style:dashed;border-color:rgba(11,44,41,.45);color:rgba(11,44,41,.7);background:rgba(255,253,248,.5);cursor:not-allowed}
.wc-veld textarea[readonly]{background:rgba(255,253,248,.8)}
@media (hover:hover) and (pointer:fine){
  .wc-veld :is(input[type="text"],input[type="email"],textarea):not(:disabled):hover{border-color:#0b2c29;background:#fffdf8}
}
/* foutmelding per veld: donkerrood op een licht vlak, met een teken als vorm; gekoppeld via aria-describedby */
.wc-fout{position:relative;margin:0;padding:6px 10px 6px 34px;border-radius:9px;font:600 .9375rem/1.35 var(--sans);color:#7a1414;background:#fff9f6;box-shadow:inset 0 0 0 1px rgba(143,29,29,.5)}
.wc-fout::before{content:"";position:absolute;left:10px;top:8px;width:16px;height:16px;border-radius:50%;background:
  linear-gradient(#fff9f6,#fff9f6) 50% 3.5px / 2px 6px no-repeat,linear-gradient(#fff9f6,#fff9f6) 50% 11px / 2px 2px no-repeat,#8f1d1d}
/* samenvatting bovenaan het formulier (role="alert"): links naar de velden */
.wc-fouten{scroll-margin-top:calc(var(--header-h) + 40px);padding:12px 16px;border-radius:12px;color:#5e0f0f;background:#fff9f6;box-shadow:inset 0 0 0 2px #8f1d1d;font:400 .96875rem/1.45 var(--sans)}
.wc-fouten p{font-weight:700}
.wc-fouten ul{list-style:none;margin:4px 0 0;padding:0}
.wc-fouten a{display:inline-flex;align-items:center;min-height:44px;color:#5e0f0f;text-decoration:underline;text-underline-offset:4px}
.wc-fouten:focus-visible{outline:2px solid #5e0f0f;outline-offset:3px;border-radius:12px}
/* suggesties: rustige tekstknoppen (geen derde rij pillen), raakvlak 44 px */
.wc-suggesties{display:flex;flex-wrap:wrap;gap:0 14px}
.wc-suggesties button{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0;padding:0 2px;border:0;border-radius:6px;background:none;cursor:pointer;
  font:500 .875rem/1.2 var(--sans);color:var(--nx-inkt-diep);text-align:left;text-decoration:underline;text-decoration-color:rgba(11,44,41,.4);text-underline-offset:5px}
.wc-suggesties button::before{content:"";flex:0 0 auto;width:11px;height:11px;background:
  linear-gradient(var(--nx-petrol),var(--nx-petrol)) 50% 50% / 11px 1.5px no-repeat,linear-gradient(var(--nx-petrol),var(--nx-petrol)) 50% 50% / 1.5px 11px no-repeat}
.wc-suggesties button:active{opacity:.62}
@media (hover:hover) and (pointer:fine){.wc-suggesties button:hover{text-decoration-color:var(--nx-inkt-diep);text-decoration-thickness:2px}}
.wc-acties{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:4px}
.wc-kopieer{color:var(--nx-inkt-diep)}
/* PROEFMARKERING: hoort bij de proef, niet bij de site */
.wc-proef{margin:0;width:fit-content;max-width:100%;padding:4px 10px;border-radius:8px;font:400 .8125rem/1.35 var(--sans);letter-spacing:.02em;color:var(--nx-inkt-diep);background:rgba(255,253,248,.92);box-shadow:inset 0 0 0 1px rgba(176,138,69,.55)}
.wc-proef b{margin-right:6px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.75rem}
.wc-proefchip{margin:6px 0 0;width:fit-content;max-width:100%;padding:3px 9px;border-radius:8px;font:400 .8125rem/1.35 var(--sans);letter-spacing:.02em;color:var(--nx-inkt-diep);background:#fffdf8;box-shadow:inset 0 0 0 1px rgba(176,138,69,.6)}
.wc-proefchip b{margin-right:6px;font-weight:700;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
.wc-voor{display:none}
.wc-proef-status{margin:0;padding:8px 12px;border-radius:10px;font:600 .9375rem/1.4 var(--sans);color:var(--nx-inkt-diep);background:#fffdf8;box-shadow:inset 0 0 0 1px rgba(11,44,41,.4)}
.wc-proef-status:empty,.wc-kopie-status:empty{display:none}
.wc-adres{margin:0;font-size:.9375rem;line-height:1.5;color:var(--nx-inkt)}
.wc-nw{white-space:nowrap}
/* losse link in een zin: raakvlak 44 px hoog zonder de regelafstand te veranderen */
.wc-adres a,.wc-privacy a{display:inline-block;margin:-12px 0;padding:12px 0;color:inherit;text-decoration:underline;text-decoration-color:rgba(176,138,69,.9);text-underline-offset:4px;overflow-wrap:anywhere}
.wc-adres a:active,.wc-privacy a:active,.wc-links a:active{opacity:.62}
@media (hover:hover) and (pointer:fine){
  .wc-adres a:hover,.wc-privacy a:hover,.wc-links a:hover{color:var(--nx-focus);text-decoration-color:rgba(11,44,41,.5);text-decoration-thickness:2px}
}

/* ---------------------------------------------------------------- L · liggend, of breder dan 1100 px */
@media (min-width:1101px),(orientation:landscape){
  .wc-hero{--ph:56.25vw}
  /* ronde 2: rij 1 is precies zo hoog als de tekst; is het formulier hoger dan tekst plus venster, dan groeit alleen rij 2 (voorheen werd de extra hoogte over beide rijen verdeeld en zakte de plaat mee met het formulier) */
  .wc-hero-inner{display:grid;grid-template-columns:calc(46vw - var(--lijn)) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:6vw;align-items:start;
    padding:calc(var(--header-h) + clamp(22px,4.5svh,56px)) max(6vw,var(--lijn)) 56px var(--lijn)}
  .wc-intro{grid-column:1;grid-row:1}
  /* venster: de plaat van 52 % (einde lucht) tot de onderrand; alles daarboven ligt achter de tekst */
  .wc-stage{grid-column:1;grid-row:2;height:calc(var(--ph) * .48);margin-top:14px}
  .wc-plaat{margin-top:calc(var(--ph) * -.52)}
  .wc-stage::after{margin-top:calc(var(--ph) * .48 - 1px);background:linear-gradient(90deg,#f3ecdf 0,#f3ecdf 50%,#a9d9d6 50%)}
  .wc-schema{left:var(--lijn);margin-top:calc(var(--ph) * .42)}
  .wc-panel{grid-column:2;grid-row:1 / span 2}
  .wc-kop h1{font-size:min(var(--km),calc((46vw - var(--lijn)) / 7.9))}
  .wc-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(247,243,236,0) 0,rgba(247,243,236,.5) 37px,#f7f3ec 64px)}
}
@media (min-width:1700px){.wc-lead{font-size:1.25rem}.wc-panel{padding:32px 36px 30px}}
@media (min-width:861px) and (max-width:1699.98px){.wc-kop h1{--km:3.5rem}}
@media (min-width:861px) and (max-width:1400px){.wc-kop h1{--km:3rem}.wc-lead{font-size:1.0625rem}}
@media (min-width:861px) and (max-width:1100px){.wc-kop h1{--km:2.75rem}.wc-panel{padding:22px 22px 20px}}
@media (orientation:landscape) and (max-width:1100px){.wc-rij{grid-template-columns:minmax(0,1fr)}}
/* liggend en smal of laag (telefoon liggend, desktop op zoom 200 %) */
@media (orientation:landscape) and (max-width:860px),(orientation:landscape) and (max-height:520px){
  .wc-hero-inner{padding-top:calc(var(--header-h) + 12px);padding-bottom:32px;column-gap:4vw;padding-right:max(4vw,var(--lijn))}
  .wc-kop .eyebrow{margin-bottom:8px;font-size:.75rem}
  .wc-kop h1{--km:2rem}
  .wc-rule{margin-top:10px}
  .wc-lead{margin-top:10px;font-size:.9375rem;line-height:1.4}
  .wc-zeker{margin-top:10px}
  .wc-zeker li{font-size:.875rem;min-height:26px}
  .wc-panel{padding:16px 16px 16px;--g-r:20px}
  .wc-panel-titel{font-size:1.375rem}
  .wc-uitleg{font-size:.875rem}
}

/* ---------------------------------------------------------------- S · staand tot 1100 px breed */
@media (max-width:1100px) and (orientation:portrait){
  .wc-hero{--ph:calc(100vw * 16 / 9)}
  .wc-hero-inner{padding:calc(var(--header-h) + 22px) 0 40px}
  .wc-intro{padding-inline:var(--lijn)}
  .wc-kop h1{--km:2.5rem;font-size:min(var(--km),calc((100vw - 2 * var(--lijn)) / 7.9))}
  /* venster: de band van 30 % tot 47 % van de plaat (banyan, jade, overloop); daaronder ligt het stille water achter het formulier */
  .wc-stage{position:relative;height:calc(var(--ph) * .17);margin-top:6px}
  .wc-plaat{top:calc(var(--ph) * -.30)}
  .wc-stage::after{top:calc(var(--ph) * .70 - 1px);background:#a9d9d6}
  .wc-schema{right:12px;top:4px}                                   /* rechtsboven in de band, in de lucht boven de overloop */
  .wc-panel{margin-inline:max(12px,calc(var(--lijn) - 8px))}
}
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){
  .wc-hero-inner{padding-top:calc(var(--header-h) + 40px)}
  .wc-kop h1{--km:3.5rem}
  .wc-lead{font-size:1.1875rem}
  .wc-panel{max-width:44rem;margin-inline:auto;width:calc(100% - 2 * var(--lijn))}
}
@media (max-width:599.98px) and (orientation:portrait){
  /* RONDE 2 (B139): het formulier krijgt voorrang. Tussen tekst en formulier alleen nog een smalle verre oever (3,5 % van de
     plaat in plaats van de band van 17 %); pyriet, veer en jade staan op de voorgrondrand ONDER het formulier. */
  .wc-stage{height:calc(var(--ph) * .045);margin-top:10px}
  .wc-plaat{top:calc(var(--ph) * -.435)}
  .wc-stage::after{top:calc(var(--ph) * .565 - 1px)}
  .wc-stage .wc-schema{display:none}                              /* de strook is te smal voor een label; het label staat op de voorgrondrand */
  .wc-hero-inner{padding-bottom:0}
  .wc-voor{display:block;position:relative;margin-top:22px}
  .wc-voor img{display:block;width:100%;height:auto}
  .wc-schema--voor{left:12px;top:8px;right:auto}
  .wc-kop .eyebrow{margin-bottom:10px}
  .wc-rule{margin-top:12px}
  .wc-lead{margin-top:12px;font-size:1rem;line-height:1.45}
  .wc-zeker{margin-top:10px}
  .wc-zeker li{font-size:.9375rem;min-height:28px}
  .wc-panel{padding:20px 16px 18px;--g-r:22px}
  .wc-panel-titel{font-size:1.5rem}
  .wc-rij{grid-template-columns:minmax(0,1fr)}
  .wc-acties .glas-knop{width:100%;justify-content:space-between}
}
@media (max-width:374.98px) and (orientation:portrait){
  .wc-hero-inner{padding-top:calc(var(--header-h) + 14px)}
  .wc-lead{font-size:.9375rem}
  .wc-acties .glas-knop{padding-inline:18px 14px;gap:8px}
}

/* ---------------------------------------------------------------- vloer: één linkerlijn met de held */
.wc .nx-vloer{--nx-rand:var(--lijn)}
.wc .nx-sectie{padding-top:clamp(56px,6.5vw,112px)}
.wc-uitleg-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,112px);align-items:start}
.wc .nx-vloer .wc-verloop-titel{font:400 clamp(28px,2.6vw,40px)/1.08 var(--serif)}
.wc-stappen{list-style:none;margin:26px 0 0;padding:0;border-left:1px solid var(--nx-goud-lijn)}
.wc-stappen li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;padding:0 0 28px 30px}
.wc-stappen li:last-child{padding-bottom:0}
.wc-stappen li::before{content:"";position:absolute;left:-5px;top:11px;width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--nx-goud);background:#f7f3ec}
.wc-stappen .nr{font:400 1.75rem/1 var(--serif);color:var(--nx-goud-tekst);min-width:.9em;padding-top:1px}
.wc-stappen p{max-width:34em;margin-top:6px;text-wrap:pretty;overflow-wrap:anywhere}
.wc-privacy{max-width:38em;margin-top:26px;font-size:.9375rem;color:var(--nx-tekst)}
.wc-privacy a{color:var(--nx-navy)}
.wc-krijg-kop h2{font-size:clamp(30px,3vw,46px)}
.wc .nx-vloer .wc-krijg-kop h2 .kw{display:block}
.wc-body{max-width:34em;margin-top:18px;text-wrap:pretty}
.wc-ruit{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--nx-goud-lijn)}
.wc-ruit li{position:relative;display:flex;align-items:center;min-height:52px;padding:10px 0 10px 26px;border-bottom:1px solid var(--nx-goud-zacht);font:400 clamp(19px,1.5vw,23px)/1.15 var(--serif);color:var(--nx-navy)}
.wc-ruit li::before{content:"";position:absolute;left:4px;top:50%;width:8px;height:8px;margin-top:-4px;transform:rotate(45deg);border:1px solid var(--nx-goud)}
.wc-noot{max-width:34em;margin-top:16px;font-size:.9375rem;color:var(--nx-tekst)}
.wc .wc-verder{display:flex;flex-wrap:wrap;align-items:center;gap:6px 40px;padding-top:clamp(36px,4vw,64px);padding-bottom:clamp(72px,8vw,128px)}
.wc-links{margin:0;line-height:2.75;color:var(--nx-tekst)}                 /* regelafstand 44 px: elke link in de zin heeft een eigen raakvlak, ook als de zin afbreekt */
.wc-links a{display:inline-block;padding:12px 0;line-height:1.25;color:var(--nx-navy);text-decoration:underline;text-decoration-color:var(--nx-goud-lijn);text-underline-offset:5px}
@media (max-width:1100px){
  .wc-uitleg-grid{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media (max-width:860px){
  .wc-stappen li{padding-left:24px;column-gap:14px;padding-bottom:24px}
  .wc-stappen .nr{font-size:1.5rem}
}

/* ---------------------------------------------------------------- terugval en toegankelijkheid */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .wc-veld :is(input[type="text"],input[type="email"],textarea){background:#fffdf8;border-color:#0b2c29}
  .wc-proef,.wc-schema{background:#fffdf8}
}
@media (prefers-contrast:more){
  .wc-veld :is(input[type="text"],input[type="email"],textarea){border-width:2px;padding:11px 13px}
  .wc-suggesties button,.wc-links a,.wc-adres a,.wc-privacy a{text-decoration-color:currentColor}
}
@media (forced-colors:active){
  .wc-zeker li::before{border-color:CanvasText}
  .wc-fout::before,.wc-suggesties button::before{forced-color-adjust:none}
  .wc-fout,.wc-fouten,.wc-proef,.wc-proef-status{border:1px solid CanvasText}
  .wc-stage::after,.wc-hero::after{forced-color-adjust:none}
}