/* Lettertypen staan sinds 13-09 in assets/font/ in plaats van op de servers van
   Google: geen derde partij meer in het kritieke pad en geen IP-adres naar Google
   voordat de bezoeker iets gekozen heeft. Geist is een variabel font (100-900),
   JetBrains Mono heeft twee statische gewichten. Paden zijn relatief aan dit
   bestand, dus ze kloppen op elke mapdiepte. */
@font-face { font-family: 'Geist'; src: url(assets/font/geist-variable.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(assets/font/jetbrains-mono-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(assets/font/jetbrains-mono-700.woff2) format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; }

/* Whspr subpagina's: gedeelde schil (nav, knoppen, typografie, footer, formulier).
   Tokens gelijk aan index.html; wijzig ze op beide plekken. */
:root {
  --bg: #FCFFF1; --bg-rgb: 252, 255, 241;
  --ink: #292929; --ink-rgb: 41, 41, 41;
  --fog: #FFFFFF; --fog-rgb: 255, 255, 255;
  --fog2: #FFFFFF; --fog2-rgb: 255, 255, 255;
  --card: #F3F6E4; --card-rgb: 243, 246, 228; --card2: #F3F6E4;
  --tint-a: #F2F5E4; --tint-b: #F2F5E4; --tint-c: #F2F5E4; --tint-d: #F2F5E4; --tint-e: #FCFFF1;
  --deep: #292929; --deep2: #292929; --deep-rgb: 41, 41, 41;
  --scrim-rgb: 41, 41, 41; --scrim2-rgb: 41, 41, 41; --scrim3-rgb: 41, 41, 41; --glass-rgb: 41, 41, 41;
  --green: #586B4B; --green-rgb: 88, 107, 75; --green2-rgb: 88, 107, 75;
  --cta: #B67814; --cta-rgb: 182, 120, 20; --hover: #586B4B; --cta-deep: #292929; --cta-ink: #FFFFFF; --cta-ink-rgb: 255, 255, 255;
  --chip: #586B4B; --chip-ink: #FFFFFF; --warn-bg: #B67814; --warn-ink: #292929;
  --sel-bg: #586B4B; --sel-ink: #FFFFFF;
  /* een type-schaal, gelijk aan index.html; negen stappen, niets ertussen */
  --fs-display: clamp(34px, min(4vw, 7.2vh), 76px);
  --fs-h2: clamp(30px, 3.2vw, 52px);
  --fs-h3: clamp(19px, 1.55vw, 26px);
  --fs-body: clamp(17px, 1.3vw, 21px);
  --fs-small: clamp(14.5px, 1.1vw, 17px);
  --fs-caption: 13.5px;
  --fs-micro: 12px;
  --fs-btn: 15px;
  --fs-num: clamp(44px, 4.2vw, 64px);
}
:root[data-theme="brand"] {
  --bg: #FCFFF1; --bg-rgb: 252, 255, 241;
  --ink: #292929; --ink-rgb: 41, 41, 41;
  --fog: #FFFFFF; --fog-rgb: 255, 255, 255;
  --fog2: #FFFFFF; --fog2-rgb: 255, 255, 255;
  --card: #F3F6E4; --card-rgb: 243, 246, 228; --card2: #F3F6E4;
  --tint-a: #F2F5E4; --tint-b: #F2F5E4; --tint-c: #F2F5E4; --tint-d: #F2F5E4; --tint-e: #FCFFF1;
  --deep: #292929; --deep2: #292929; --deep-rgb: 41, 41, 41;
  --scrim-rgb: 41, 41, 41; --scrim2-rgb: 41, 41, 41; --scrim3-rgb: 41, 41, 41; --glass-rgb: 41, 41, 41;
  --green: #586B4B; --green-rgb: 88, 107, 75; --green2-rgb: 88, 107, 75;
  --cta: #B67814; --cta-rgb: 182, 120, 20; --hover: #586B4B; --cta-deep: #292929; --cta-ink: #FFFFFF; --cta-ink-rgb: 255, 255, 255;
  --chip: #586B4B; --chip-ink: #FFFFFF; --warn-bg: #B67814; --warn-ink: #292929;
  --sel-bg: #586B4B; --sel-ink: #FFFFFF;
}
html { scroll-padding-top: 92px; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body { font-family: "Geist", "Helvetica Neue", Helvetica, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.55; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
::selection { background: var(--sel-bg); color: var(--sel-ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* maat */
.wrap { max-width: 1320px; margin: 0 auto; padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px); }
.sec { padding: clamp(56px, 8vh, 110px) 0; }
.sec-tight { padding: clamp(36px, 5vh, 70px) 0; }
.narrow { max-width: 760px; }
.mid { max-width: 980px; }

/* type */
.h1, .h2, .h3 { margin: 0; font-weight: 600; letter-spacing: -0.04em; line-height: 1.0; text-wrap: balance; }
.h1 { font-size: var(--fs-display); }
article .wrap.narrow > h1.h1 { font-size: var(--fs-display); line-height: 1.06; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: -0.025em; line-height: 1.15; }
.lead { margin: 0; font-size: var(--fs-body); line-height: 1.45; letter-spacing: -0.02em; color: rgba(var(--ink-rgb), 0.64); text-wrap: pretty; }
.p, .prose p, .prose li { margin: 0; font-size: var(--fs-body); line-height: 1.55; letter-spacing: -0.01em; color: rgba(var(--ink-rgb), 0.66); text-wrap: pretty; }
.prose p + p, .prose ul, .prose ol { margin-top: 1em; }
.prose h2 { margin: 2em 0 0.6em; font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); }
.prose h3 { margin: 1.6em 0 0.5em; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ink-rgb), 0.3); transition: text-decoration-color 0.3s ease; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose img { border-radius: 16px; margin: 1.6em 0; }
.prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid rgba(var(--ink-rgb), 0.2); }
/* eyebrow/small op 0.7 en 0.68: onder die waarde zakt 13,5-14px onder 4,5:1 (probe 09-09) */
.eyebrow { display: block; margin-bottom: 14px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: -0.01em; color: rgba(var(--ink-rgb), 0.7); }
.small { font-size: var(--fs-caption); line-height: 1.5; letter-spacing: -0.005em; color: rgba(var(--ink-rgb), 0.68); }

/* knoppen: dezelfde pill als index.html */
.btn { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 13px 13px 13px 26px; border-radius: 100px; border: 1px solid var(--cta); background: var(--cta); color: var(--cta-ink); font: inherit; font-size: var(--fs-btn); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease; }
.btn .circle { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 26px; height: 26px; border: 1px solid rgba(var(--cta-ink-rgb), 0.5); border-radius: 50%; font-size: var(--fs-caption); line-height: 1; transition: transform 0.5s cubic-bezier(.16,1,.3,1), background 0.4s ease; }
.btn .circle span { display: block; transition: transform 0.45s cubic-bezier(.16,1,.3,1); }
.btn:hover { background: var(--hover); border-color: var(--hover); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--scrim-rgb), 0.16); }
.btn:hover .circle span { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: rgba(var(--ink-rgb), 0.25); }
.btn.ghost .circle { border-color: rgba(var(--ink-rgb), 0.35); }
.btn.ghost:hover { background: rgba(var(--ink-rgb), 0.05); border-color: rgba(var(--ink-rgb), 0.45); box-shadow: none; }
.btn.light { background: var(--fog); color: var(--deep); border-color: var(--fog); }
.btn.light .circle { border-color: rgba(var(--deep-rgb), 0.4); }
.btn.light:hover { background: var(--fog2); border-color: var(--fog2); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }
.link { position: relative; display: inline-block; padding-bottom: 2px; font-weight: 600; letter-spacing: -0.01em; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(.16,1,.3,1); }
.link:hover::after { transform: scaleX(1); }

/* nav: vast, glas */
.pnav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: clamp(12px, 1.6vh, 18px) clamp(16px, 3vw, 48px); color: var(--ink); background: rgba(var(--bg-rgb), 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.08); }
.pnav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: 1320px; margin: 0 auto; }
.pnav-l, .pnav-r { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; }
/* op de schaal staan de navlinks op --fs-small; nowrap houdt ze op een regel, zoals index.html */
.pnav-l a, .pnav-r a { white-space: nowrap; }
.pnav-l { justify-self: start; } .pnav-r { justify-self: end; }
.pnav-logo { display: block; width: clamp(42px, 3.7vw, 58px); aspect-ratio: 1.919; background: currentColor; -webkit-mask: url(assets/whspr-logo.png) center / contain no-repeat; mask: url(assets/whspr-logo.png) center / contain no-repeat; opacity: 1; transition: opacity 0.3s ease; }
.pnav-logo:hover { opacity: 0.62; }
.pnav a[aria-current="page"]::after { transform: scaleX(1); }
.pnav .btn { padding: 9px 10px 9px 18px; font-size: var(--fs-btn); }
.pnav .btn .circle { width: 24px; height: 24px; }
.pnav-menu { display: none; }
.pnav-drawer { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-top: 74px; }
  .pnav { padding: 11px 16px; }
  .pnav-in { grid-template-columns: auto 1fr auto; gap: 10px; }
  .pnav-l { display: none; }
  .pnav-logo { justify-self: start; grid-column: 1; }
  .pnav-r { grid-column: 3; gap: 8px; }
  .pnav-r > a:not(.btn) { display: none; }
  .pnav-menu { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(var(--ink-rgb), 0.2); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; }
  .pnav-menu:hover, .pnav[data-open="1"] .pnav-menu { background: rgba(var(--ink-rgb), 0.07); border-color: rgba(var(--ink-rgb), 0.38); }
  .pnav-menu svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }
  .pnav-drawer { display: none; grid-column: 1 / -1; padding: 8px 0 12px; }
  .pnav-drawer a { display: block; padding: 12px 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; border-top: 1px solid rgba(var(--ink-rgb), 0.08); }
  .pnav[data-open="1"] .pnav-drawer { display: block; }
}

/* onthulling bij scrollen */
[data-rise] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
[data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1; transform: none; transition: none; } }

/* kaarten en beeld */
.card { background: var(--card); border-radius: clamp(18px, 1.6vw, 24px); padding: clamp(22px, 2.4vw, 34px); }
.frame { position: relative; overflow: hidden; border-radius: clamp(18px, 1.8vw, 28px); background: var(--tint-b); }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.video16 { position: relative; overflow: hidden; border-radius: clamp(18px, 1.8vw, 28px); background: var(--deep); aspect-ratio: 16 / 9; }
.video16 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------------
   formulier (ronde 13-09): eigen velden in plaats van de browserlook.
   Opzet: .form-row = label + veld + melding. Het veld is een glasvulling met
   een hairline; bij focus komt er een amberen rand met een zachte ring, het
   label licht op en de chevron van de select en het vinkje van de checkbox
   zijn zelf getekend (geen native besturing). Een donker paneel zet met
   [data-form-dark] alleen de kleuren om; verder is er per pagina niets nodig.
   De vlag staat als data-form-dark op het paneel, niet als class: de rest van
   de schil leest zijn opmaakhaakjes ook uit data-attributen.
   --------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form [data-form-fields] { display: grid; gap: 18px; }
.form-row { display: grid; gap: 7px; min-width: 0; }
.form label { display: flex; align-items: baseline; gap: 5px; font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.012em; color: rgba(var(--ink-rgb), 0.74); transition: color 0.3s ease; }
.form-row:focus-within label { color: var(--ink); }
.form .req { font-style: normal; font-weight: 500; color: var(--cta); }
.form input, .form select, .form textarea { width: 100%; min-width: 0; padding: 13px 15px; border: 1px solid rgba(var(--ink-rgb), 0.16); border-radius: 13px; background-color: rgba(var(--ink-rgb), 0.035); color: var(--ink); font: inherit; font-size: var(--fs-small); line-height: 1.4; box-shadow: inset 0 1px 0 rgba(var(--fog-rgb), 0.5); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease; }
.form input::placeholder, .form textarea::placeholder { color: rgba(var(--ink-rgb), 0.4); }
.form input:hover, .form select:hover, .form textarea:hover { background-color: rgba(var(--ink-rgb), 0.055); border-color: rgba(var(--ink-rgb), 0.24); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background-color: rgba(var(--fog-rgb), 0.72); border-color: var(--cta); box-shadow: 0 0 0 3px rgba(var(--cta-rgb), 0.18), inset 0 1px 0 rgba(var(--fog-rgb), 0.6); }
/* de chevron van de select: zelf getekend, want de native pijl verraadt de browser */
.form select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px 16px; }
.form textarea { min-height: 118px; resize: vertical; line-height: 1.5; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* het vinkje: leeg vlak, en bij aanvinken schaalt het vinkje zelf naar binnen */
.form .check { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-small); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; color: rgba(var(--ink-rgb), 0.7); cursor: pointer; transition: color 0.3s ease; }
.form .check:hover { color: rgba(var(--ink-rgb), 0.88); }
.form .check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; padding: 0; border: 1px solid rgba(var(--ink-rgb), 0.3); border-radius: 7px; background-color: rgba(var(--ink-rgb), 0.04); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0 0; box-shadow: none; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease, background-size 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.25s ease; }
.form .check input:checked { background-color: var(--cta); border-color: var(--cta); background-size: 13px 13px; }
.form .check input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--cta-rgb), 0.26); }
.form .check a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ink-rgb), 0.35); transition: color 0.3s ease, text-decoration-color 0.3s ease; }
.form .check a:hover { color: var(--cta); text-decoration-color: var(--cta); }
.form .form-actions { display: grid; gap: 12px; margin-top: 1px; }
.form .form-actions .btn { width: 100%; justify-content: space-between; min-height: 52px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* per veld één regel, in gewone taal; het veld zelf krijgt de amberen rand.
   De regel wordt één keer aangemaakt en daarna met [hidden] aan en uit gezet. */
.form .form-msg { display: block; font-size: var(--fs-caption); line-height: 1.4; letter-spacing: -0.01em; color: var(--warn-ink); }
.form .form-msg[hidden] { display: none; }
.form-row[data-invalid] label { color: var(--warn-ink); }
.form-row[data-invalid] input, .form-row[data-invalid] select, .form-row[data-invalid] textarea { border-color: var(--warn-bg); box-shadow: 0 0 0 3px rgba(var(--cta-rgb), 0.16); }
/* het losse toestemmingsvinkje heeft geen .form-row: daar is het vinkje zelf
   het vak dat rood wordt */
.form .check[data-invalid] { color: var(--warn-ink); }
.form .check[data-invalid] input { border-color: var(--warn-bg); box-shadow: 0 0 0 3px rgba(var(--cta-rgb), 0.16); }
.form [data-form-ok] { display: none; }
.form[data-state="ok"] [data-form-fields] { display: none; }
.form[data-state="ok"] [data-form-ok] { display: block; animation: form-ok-in 0.5s cubic-bezier(.16,1,.3,1) both; }
.form [data-form-ok]:focus { outline: none; }
@keyframes form-ok-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form[data-state="ok"] [data-form-ok] { animation: none; } }
.form [data-form-err] { display: none; margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--warn-ink); }
.form[data-state="err"] [data-form-err] { display: block; }
.form .btn[disabled] { opacity: 0.68; pointer-events: none; }
/* tijdens versturen draait de pijl in de knop rond tot een ring */
.form[data-state="busy"] .btn .circle span { opacity: 0; }
.form[data-state="busy"] .btn .circle::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: form-spin 0.7s linear infinite; }
@keyframes form-spin { to { transform: rotate(360deg); } }
/* de bedankstand: het vinkje in de ring, dezelfde kop als een kaarttitel */
.form-ok { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.form-ok-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(var(--cta-rgb), 0.5); border-radius: 50%; background: rgba(var(--cta-rgb), 0.14); color: var(--cta); }
.form-ok-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-ok strong { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.form-ok p { margin: 0; font-size: var(--fs-small); line-height: 1.5; letter-spacing: -0.01em; color: rgba(var(--ink-rgb), 0.68); }
.form-ok p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ink-rgb), 0.4); }
.form-ok p a:hover { color: var(--cta); }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }

/* dezelfde velden op een donker glaspaneel (contact, installateurs, beurs) */
[data-form-dark] { color-scheme: dark; }
[data-form-dark] label { color: rgba(var(--fog-rgb), 0.8); }
[data-form-dark] .form-row:focus-within label { color: var(--fog); }
[data-form-dark] input, [data-form-dark] select, [data-form-dark] textarea { background-color: rgba(var(--fog-rgb), 0.07); border-color: rgba(var(--fog-rgb), 0.18); color: var(--fog); box-shadow: inset 0 1px 0 rgba(var(--fog-rgb), 0.06); }
[data-form-dark] input::placeholder, [data-form-dark] textarea::placeholder { color: rgba(var(--fog-rgb), 0.42); }
[data-form-dark] input:hover, [data-form-dark] select:hover, [data-form-dark] textarea:hover { background-color: rgba(var(--fog-rgb), 0.11); border-color: rgba(var(--fog-rgb), 0.28); }
[data-form-dark] input:focus, [data-form-dark] select:focus, [data-form-dark] textarea:focus { background-color: rgba(var(--fog-rgb), 0.13); border-color: var(--cta); box-shadow: 0 0 0 3px rgba(var(--cta-rgb), 0.26), inset 0 1px 0 rgba(var(--fog-rgb), 0.08); }
[data-form-dark] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E"); }
[data-form-dark] select option { background: var(--deep); color: var(--fog); }
[data-form-dark] .check { color: rgba(var(--fog-rgb), 0.78); }
[data-form-dark] .check:hover { color: rgba(var(--fog-rgb), 0.94); }
[data-form-dark] .check input { border-color: rgba(var(--fog-rgb), 0.32); background-color: rgba(var(--fog-rgb), 0.08); }
[data-form-dark] .check input:checked { background-color: var(--cta); border-color: var(--cta); }
[data-form-dark] .check a { color: var(--fog); text-decoration-color: rgba(var(--fog-rgb), 0.5); }
[data-form-dark] .check a:hover { color: var(--fog); text-decoration-color: var(--fog); }
[data-form-dark] .form-msg, [data-form-dark] [data-form-err] { color: #F0D9A6; }
[data-form-dark] .form-row[data-invalid] label, [data-form-dark] .check[data-invalid] { color: #F0D9A6; }
[data-form-dark] .form-row[data-invalid] input, [data-form-dark] .form-row[data-invalid] select, [data-form-dark] .form-row[data-invalid] textarea, [data-form-dark] .check[data-invalid] input { border-color: #F0D9A6; box-shadow: 0 0 0 3px rgba(240, 217, 166, 0.18); }
[data-form-dark] .form-ok-mark { border-color: rgba(var(--cta-rgb), 0.6); background: rgba(var(--cta-rgb), 0.2); color: #F0C878; }
[data-form-dark] .form-ok strong { color: var(--fog); }
[data-form-dark] .form-ok p { color: rgba(var(--fog-rgb), 0.82); }
[data-form-dark] .form-ok p a { color: var(--fog); text-decoration-color: rgba(var(--fog-rgb), 0.5); }
[data-form-dark] .form-ok p a:hover { color: var(--fog); }

/* de kop van het paneel: mono label links, statusregel rechts, hairline eronder */
.form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 clamp(18px, 2.4vh, 24px); padding-bottom: clamp(14px, 2vh, 18px); border-bottom: 1px solid rgba(var(--fog-rgb), 0.14); }
.form-head-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--fog-rgb), 0.62); }
.form-head-s { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-caption); letter-spacing: -0.01em; line-height: 1.3; color: rgba(var(--fog-rgb), 0.88); }
.form-head-s i { display: block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 10px 1px rgba(var(--cta-rgb), 0.5); }

/* footer: compact, zelfde tonen als index.html */
.pfoot { position: relative; margin-top: clamp(40px, 6vh, 80px); background: var(--deep); color: var(--fog); border-radius: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) 0 0; padding: clamp(48px, 7vh, 90px) 0 clamp(26px, 3vh, 36px); }
.pfoot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.pfoot-mark { display: block; width: 92px; aspect-ratio: 1.919; background: var(--fog); -webkit-mask: url(assets/whspr-logo.png) center / contain no-repeat; mask: url(assets/whspr-logo.png) center / contain no-repeat; opacity: 0.92; }
.pfoot-note { margin: 18px 0 0; max-width: 40ch; font-size: var(--fs-small); line-height: 1.55; letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.62); }
.pfoot-col { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); letter-spacing: -0.01em; }
.pfoot-cap { margin-bottom: 4px; font-size: var(--fs-caption); font-weight: 600; color: rgba(var(--fog-rgb), 0.5); }
.pfoot-col a { color: rgba(var(--fog-rgb), 0.86); transition: color 0.3s ease; }
.pfoot-col a:hover { color: var(--fog); }
.pfoot-col address { font-style: normal; color: rgba(var(--fog-rgb), 0.86); }
.pfoot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(36px, 5vh, 60px); padding-top: 22px; font-size: var(--fs-caption); color: rgba(var(--fog-rgb), 0.5); }
.pfoot-bottom nav { display: flex; gap: 18px; }
@media (max-width: 860px) { .pfoot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pfoot-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   HOMEPAGE-SCHIL (ronde 11-09): de balk en de footer van index.html, hier als
   klassenloze [data-nav] / #reserveer-schil zodat elke subpagina hetzelfde
   bovenstuk en onderstuk krijgt. De oude .pnav/.pfoot hierboven blijven staan
   tot elke pagina omgezet is. Paden in url() staan relatief aan dit bestand
   (projectwortel), dus ze kloppen op elke mapdiepte.
   ========================================================================= */

@keyframes whspr-rise { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes whspr-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --- de balk ------------------------------------------------------------ */
[data-nav] {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: block;
  padding: clamp(14px, 2vh, 22px) clamp(16px, 3vw, 48px);
  color: var(--ink);
  animation: whspr-fade 1s 0.1s cubic-bezier(.16,1,.3,1) both;
  transition: backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}
[data-nav-in] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: 1320px; margin: 0 auto; }
[data-nav-side] { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; }
[data-nav-side="l"] { justify-self: start; }
[data-nav-side="r"] { justify-self: end; }

[data-navlink] { cursor: pointer; position: relative; display: inline-block; padding-bottom: 3px; white-space: nowrap; }
[data-underline] { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(.16,1,.3,1); }
[data-navlink]:hover [data-underline],
[data-navlink]:focus-visible [data-underline] { transform: scaleX(1); }
[data-navlink][aria-current="page"] [data-underline] { transform: scaleX(1); }

[data-navlogo] { cursor: pointer; display: block; width: clamp(42px, 3.7vw, 58px); aspect-ratio: 1.919; background: currentColor; -webkit-mask: url(assets/whspr-logo.png) center / contain no-repeat; mask: url(assets/whspr-logo.png) center / contain no-repeat; opacity: 1; transition: opacity 0.3s ease; }
[data-navlogo]:hover { opacity: 0.7; }

[data-navcta] { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 9px 10px 9px 18px; border: 1px solid rgba(var(--fog2-rgb), 0.4); border-radius: 100px; background: var(--cta); color: var(--cta-ink); font-size: var(--fs-btn); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease, background 0.35s ease; }
[data-navcta] [data-circle] { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid rgba(var(--cta-ink-rgb), 0.5); border-radius: 50%; font-size: var(--fs-btn); line-height: 1; transition: transform 0.5s cubic-bezier(.16,1,.3,1), background 0.4s ease; }
[data-plus] { position: relative; display: block; width: 9px; height: 9px; transition: transform 0.5s cubic-bezier(.16,1,.3,1); }
[data-plus] > span:first-child { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: currentColor; }
[data-plus] > span:last-child { position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -0.75px; border-radius: 1px; background: currentColor; }
/* zonder anime.js op de subpagina's: dezelfde lift en dezelfde draai in CSS */
[data-btn]:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--scrim-rgb), 0.18); }
[data-btn]:hover [data-circle] { transform: translateX(3px); }
[data-btn]:hover [data-plus] { transform: rotate(90deg); }
[data-btn]:hover [data-arrow] { transform: translateX(3px); }

/* menuknop: alleen mobiel, ghost-variant van de CTA */
[data-navmenu] { display: none; cursor: pointer; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid currentColor; border-radius: 100px; background: transparent; color: inherit; font: inherit; font-size: var(--fs-caption); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; opacity: 0.85; transition: opacity 0.3s ease, background 0.3s ease; }
[data-navmenu]:hover, [data-nav][data-open="1"] [data-navmenu] { opacity: 1; background: rgba(127, 127, 127, 0.14); }
[data-nav-drawer] { display: none; }

@media (max-width: 760px) {
  html { scroll-padding-top: 74px; }
  [data-nav] { padding: 11px 16px; }
  [data-nav-in] { grid-template-columns: auto 1fr auto; gap: 10px; }
  [data-nav-side="l"] { display: none; }
  [data-navlogo] { grid-column: 1; justify-self: start; }
  [data-nav-side="r"] { grid-column: 3; justify-self: end; gap: 8px; }
  [data-nav-side="r"] [data-navlink] { display: none; }
  [data-navmenu] { display: inline-flex; }
  [data-navcta] { padding: 8px 8px 8px 15px; font-size: var(--fs-caption); gap: 8px; }
  [data-navcta] [data-circle] { width: 22px; height: 22px; }
  [data-nav-drawer] { grid-column: 1 / -1; margin: 6px -16px 0; padding: 0 16px 12px; }
  [data-nav-drawer] a { position: relative; display: flex; align-items: center; min-height: 56px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; }
  [data-nav-drawer] a::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: 0.16; }
  [data-nav-drawer] a:first-child::before { display: none; }
  [data-nav][data-open="1"] [data-nav-drawer] { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  [data-nav] { animation: none; }
}

/* --- gordijn: de sectie boven de footer -------------------------------- */
[data-curtain-dim] { position: absolute; inset: 0; z-index: 5; background: var(--deep); opacity: 0; pointer-events: none; border-radius: inherit; }
section:has(> [data-curtain-dim]) { position: relative; }

/* --- de footer --------------------------------------------------------- */
#reserveer { position: relative; z-index: 8; overflow: hidden; background: var(--deep); color: var(--fog); border-radius: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) 0 0; box-shadow: 0 -1px 0 rgba(var(--fog-rgb), 0.08), 0 -30px 70px rgba(var(--scrim-rgb), 0.5); }
#reserveer [data-foot-inner] { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: clamp(58px, 9.5vh, 116px) clamp(16px, 3vw, 48px) 0; }

#reserveer [data-foot-top] { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); padding-bottom: clamp(30px, 5vh, 58px); }
#reserveer [data-foot-title] { margin: 0; max-width: 14ch; font-size: var(--fs-h2); line-height: 1.0; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; color: var(--fog); }
#reserveer [data-foot-cta] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#reserveer [data-foot-cta] > a { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 13px 13px 13px 26px; border-radius: 100px; font-size: var(--fs-btn); font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; transition: background 0.35s ease, border-color 0.35s ease, transform 0.4s cubic-bezier(.16,1,.3,1); }
/* primair = de reserveer-CTA. Die had eerst alleen data-inert (dode anchor);
   sinds de sweep van 13-09 is het een echte link met data-book-cta, dus beide
   selectoren blijven staan zodat de bestaande schil niet verandert. */
#reserveer [data-foot-cta] > a[data-inert],
#reserveer [data-foot-cta] > a[data-book-cta] { background: var(--cta); color: var(--cta-ink); border: 1px solid var(--cta); }
#reserveer [data-foot-cta] > a[data-inert]:hover,
#reserveer [data-foot-cta] > a[data-book-cta]:hover { background: var(--hover); border-color: var(--hover); }
#reserveer [data-foot-cta] > a:not([data-inert]):not([data-book-cta]) { background: transparent; color: var(--fog); border: 1px solid rgba(var(--fog-rgb), 0.28); }
#reserveer [data-foot-cta] > a:not([data-inert]):not([data-book-cta]):hover { background: rgba(var(--fog-rgb), 0.1); }
#reserveer [data-foot-cta] [data-circle] { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-size: var(--fs-caption); opacity: 0.5; transition: transform 0.5s cubic-bezier(.16,1,.3,1), opacity 0.4s ease; }
#reserveer [data-foot-cta] > a:hover [data-circle] { opacity: 0.9; }
#reserveer [data-arrow] { display: block; transition: transform 0.45s cubic-bezier(.16,1,.3,1); }

#reserveer [data-foot-grid] { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(20px, 3vw, 48px); row-gap: 0; border-top: 1px solid rgba(var(--fog-rgb), 0.12); }
#reserveer [data-foot-grid] > * { padding: clamp(24px, 3.6vh, 40px) 0 clamp(28px, 4.4vh, 52px); }
#reserveer [data-foot-grid] > *:first-child { padding-right: clamp(16px, 3vw, 56px); }

#reserveer [data-foot-col] { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
#reserveer [data-foot-cap] { font-size: var(--fs-caption); font-weight: 600; letter-spacing: -0.005em; color: rgba(var(--fog-rgb), 0.5); margin-bottom: 5px; }
#reserveer [data-foot-link] { cursor: pointer; font-size: var(--fs-small); letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.68); transition: color 0.3s ease; }
#reserveer [data-foot-link]:hover { color: var(--fog); }
#reserveer [data-foot-note] { margin: 15px 0 0; max-width: 36ch; font-size: var(--fs-caption); line-height: 1.55; letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.58); text-wrap: pretty; }
#reserveer [data-foot-mark-sm] { display: block; width: clamp(58px, 4.4vw, 72px); aspect-ratio: 1.919; background: var(--fog); -webkit-mask: url(assets/whspr-logo.png) left center / contain no-repeat; mask: url(assets/whspr-logo.png) left center / contain no-repeat; }
#reserveer [data-foot-hours] { font-size: var(--fs-small); letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.68); }
#reserveer address { font-style: normal; font-size: var(--fs-small); line-height: 1.55; letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.68); }

#reserveer [data-foot-bottom] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px clamp(16px, 3vw, 40px); padding: clamp(16px, 2.4vh, 24px) 0 clamp(20px, 3vh, 30px); border-top: 1px solid rgba(var(--fog-rgb), 0.12); font-size: var(--fs-caption); letter-spacing: 0.005em; color: rgba(var(--fog-rgb), 0.5); }
#reserveer [data-foot-links] { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; }
#reserveer [data-foot-bottom] a { color: inherit; transition: color 0.3s ease; }
/* alleen een echte link krijgt een cursor; de Voorwaarden-anchor heeft nog
   geen href (de tekst is nog niet geleverd) en hoort dus geen pointer te tonen */
#reserveer [data-foot-bottom] a[href] { cursor: pointer; }
#reserveer [data-foot-bottom] a:hover { color: var(--fog); }
#reserveer [data-foot-site] { font-size: var(--fs-micro); color: rgba(var(--fog-rgb), 0.5); }

/* slotregel: typografisch, op de warme grond */
#reserveer [data-foot-glow] { position: absolute; left: clamp(-40px, -3vw, -20px); bottom: clamp(20px, 4vh, 50px); width: clamp(320px, 38vw, 620px); aspect-ratio: 1.45; border-radius: 50%; background: radial-gradient(ellipse at 32% 68%, rgba(var(--fog-rgb), 0.07) 0%, rgba(var(--fog-rgb), 0.03) 38%, rgba(var(--fog-rgb), 0) 72%); pointer-events: none; opacity: 0; will-change: opacity; }
#reserveer [data-foot-mark-lg] { position: relative; display: block; width: clamp(58px, 5vw, 76px); aspect-ratio: 1.919; background: var(--fog); -webkit-mask: url(assets/whspr-logo.png) left center / contain no-repeat; mask: url(assets/whspr-logo.png) left center / contain no-repeat; will-change: opacity, transform; }
#reserveer [data-foot-line] { position: relative; margin: 0; max-width: 20ch; font-size: var(--fs-h2); font-weight: 600; line-height: 1.06; letter-spacing: -0.04em; color: var(--fog); text-wrap: balance; }
#reserveer [data-foot-w] { display: inline-block; opacity: 0; will-change: opacity, transform, filter; }

#reserveer [data-foot-band] { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--deep); pointer-events: none; }
#reserveer [data-foot-band] img { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; object-fit: cover; object-position: 50% 55%; opacity: 0; transform: scale(1.06); transform-origin: 50% 100%; will-change: opacity, transform; filter: blur(4px) saturate(0.85) brightness(0.75); }
#reserveer [data-foot-veil] { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--deep-rgb), 0.9) 0%, rgba(var(--deep-rgb), 0.82) 28%, rgba(var(--deep-rgb), 0.76) 60%, rgba(var(--deep-rgb), 0.86) 100%), radial-gradient(70% 60% at 22% 88%, rgba(225, 178, 92, 0.10) 0%, rgba(225, 178, 92, 0) 70%); pointer-events: none; }
#reserveer [data-foot-veil]::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 160px 160px; opacity: 0.05; mix-blend-mode: overlay; }

@media (max-width: 980px) {
  #reserveer [data-foot-grid] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  #reserveer [data-foot-grid] > *:nth-child(4) { grid-column: 1 / -1; padding-top: 0; }
}
@media (max-width: 760px) {
  #reserveer [data-foot-inner] { padding-top: clamp(46px, 7vh, 72px); }
  #reserveer [data-foot-title] { font-size: var(--fs-h2); max-width: none; }
  #reserveer [data-foot-top] { flex-direction: column; align-items: stretch; gap: 22px; padding-bottom: 30px; }
  #reserveer [data-foot-cta] { flex-direction: column; align-items: stretch; gap: 8px; }
  #reserveer [data-foot-cta] > a { justify-content: space-between; padding: 13px 13px 13px 20px; }
  #reserveer [data-foot-grid] { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 0; }
  #reserveer [data-foot-grid] > * { padding: 22px 0 26px; }
  #reserveer [data-foot-grid] > *:first-child { grid-column: 1 / -1; padding: 26px 0 30px; }
  #reserveer [data-foot-grid] > *:nth-child(4) { grid-column: 1 / -1; padding-top: 0; }
  #reserveer [data-foot-bottom] { flex-direction: column; align-items: flex-start; gap: 16px; }
  #reserveer [data-foot-links] { gap: 11px 18px; }
  #reserveer [data-foot-line] { font-size: var(--fs-h2); max-width: 16ch; }
  #reserveer [data-foot-mark-lg] { width: 54px; }
  #reserveer [data-foot-band] img { object-position: 34% 55%; }
  #reserveer [data-foot-glow] { width: 300px; left: -60px; }
}

/* ============================================================================
   SCHIL-EXTRA (sweep 13-09-2026): nieuwsbrief, boekingsnoot en cookiebanner.
   Eenmalig per pagina ingebracht door _work/shell/final-sweep.py; de opmaak
   staat hier zodat alle subpagina's hem delen. Zelfde tokens als de rest van
   de schil, zodat het niet aangezet voelt.
   ========================================================================= */

/* --- nieuwsbrief in de footer -------------------------------------------- */
#reserveer [data-foot-news] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: clamp(18px, 3vw, 48px); padding: clamp(26px, 4vh, 44px) 0 clamp(30px, 4.6vh, 52px); border-top: 1px solid rgba(var(--fog-rgb), 0.12); }
#reserveer [data-foot-news-note] { margin: 10px 0 0; max-width: 42ch; font-size: var(--fs-caption); line-height: 1.55; letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.72); text-wrap: pretty; }
#reserveer [data-news-form] .nb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
#reserveer [data-news-form] .nb-privacy { margin: 0; font-size: var(--fs-caption); line-height: 1.5; letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.72); }
#reserveer [data-news-form] .nb-privacy a { color: var(--fog); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--fog-rgb), 0.5); transition: text-decoration-color 0.3s ease; }
#reserveer [data-news-form] .nb-privacy a:hover { text-decoration-color: var(--fog); }
#reserveer [data-news-form] [data-form-err] { color: #F0D9A6; }
#reserveer [data-news-form] [data-form-ok] { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--fog); }
.nb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Het veld en de knop. Die stonden er eerst niet: .form input uit de basisregels
   dekte dit niet, want de homepage linkt pagina.css niet en het ingebrachte
   schil-blok had alleen de rij en de privacyregel. Gevolg was een invoerveld en
   een knop in browser-standaardstijl midden in de donkere footer. */
#reserveer [data-news-form] input[type="email"] { width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1px solid rgba(var(--fog-rgb), 0.28); border-radius: 14px; background: rgba(var(--fog-rgb), 0.06); color: var(--fog); font: inherit; font-size: var(--fs-body); line-height: 1.3; transition: border-color 0.25s ease, background 0.25s ease; }
#reserveer [data-news-form] input[type="email"]::placeholder { color: rgba(var(--fog-rgb), 0.45); }
#reserveer [data-news-form] input[type="email"]:focus { outline: none; border-color: rgba(var(--fog-rgb), 0.6); background: rgba(var(--fog-rgb), 0.1); }
#reserveer [data-news-form][data-state="err"] input[type="email"] { border-color: #F0D9A6; }
/* De knop. De homepage kent de .btn-class van de subpagina's niet (die staat in
   dit bestand, en de homepage linkt het niet), waardoor de knop in
   browser-standaardstijl stond: grijs met een zwarte rand. Daarom hier de
   volledige opmaak, niet alleen een aanvulling op .btn. */
#reserveer [data-news-form] button[type="submit"] { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 10px 0 22px; border: 0; border-radius: 100px; background: var(--cta); color: var(--cta-ink); font: inherit; font-size: var(--fs-btn); font-weight: 600; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; cursor: pointer; transition: background 0.35s ease, transform 0.4s cubic-bezier(.16,1,.3,1); }
#reserveer [data-news-form] button[type="submit"]:hover { background: var(--hover); }
#reserveer [data-news-form] button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
#reserveer [data-news-form] button[type="submit"] .circle { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border: 1px solid rgba(var(--cta-ink-rgb), 0.45); border-radius: 50%; font-size: var(--fs-caption); }
/* Honeypot onzichtbaar voor mensen, bereikbaar voor bots. De .hp-class bestond
   wel in de markup maar had nergens opmaak, waardoor "Website" gewoon in de
   footer stond. Buiten het beeld plaatsen, niet display:none, want sommige bots
   slaan verborgen velden over en juist dit veld moet verleidelijk zijn. */
#reserveer [data-news-form] .hp { position: absolute !important; left: -9999px !important; top: 0; width: 1px !important; height: 1px !important; overflow: hidden; }
/* Statusberichten alleen tonen als ze aan de beurt zijn; ze stonden allebei
   tegelijk onder het formulier. */
#reserveer [data-news-form] [data-form-ok],
#reserveer [data-news-form] [data-form-err] { display: none; }
#reserveer [data-news-form][data-state="ok"] [data-form-ok] { display: block; }
#reserveer [data-news-form][data-state="err"] [data-form-err] { display: block; }
#reserveer [data-news-form][data-state="err"] [data-form-ok],
#reserveer [data-news-form][data-state="ok"] [data-form-err] { display: none; }
#reserveer [data-news-form][data-state="busy"] button[type="submit"] { opacity: 0.6; cursor: default; }

/* --- de noot die verschijnt zolang reserveren nog niet live is ----------- */
#reserveer [data-book-note] { margin: 0 0 clamp(16px, 2.4vh, 28px); max-width: 62ch; font-size: var(--fs-caption); line-height: 1.5; letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.8); text-wrap: pretty; }
#reserveer [data-book-note] a { color: var(--fog); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--fog-rgb), 0.5); }
#reserveer [data-book-note] a:hover { text-decoration-color: var(--fog); }
#reserveer [data-book-note]:focus { outline: none; }
#reserveer [data-book-note]:focus-visible { outline: 2px solid rgba(var(--fog-rgb), 0.6); outline-offset: 4px; border-radius: 4px; }

/* --- cookiebanner -------------------------------------------------------- */
[data-cookie-banner] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 12px clamp(12px, 2vw, 24px) max(12px, env(safe-area-inset-bottom)); }
/* Zichtbaarheid via een data-attribuut en NIET via [hidden]: de homepage
   laat zijn body door React renderen en React laat het hidden-attribuut
   vallen. Daardoor stond de banner op elke pagina zichtbaar, ook als de
   bezoeker al een keuze had gemaakt. Een data-attribuut overleeft dat wel. */
[data-cookie-banner] { display: none !important; }
[data-cookie-banner][data-cookie-on="1"] { display: block !important; }
[data-cookie-in] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px clamp(16px, 3vw, 32px); max-width: 1320px; margin: 0 auto; padding: 16px 20px; border-radius: 20px; background: var(--deep); color: var(--fog); border: 1px solid rgba(var(--fog-rgb), 0.18); box-shadow: 0 20px 50px rgba(var(--scrim-rgb), 0.5); }
[data-cookie-text] { margin: 0; max-width: 74ch; font-size: var(--fs-small); line-height: 1.5; letter-spacing: -0.01em; color: rgba(var(--fog-rgb), 0.86); text-wrap: pretty; }
[data-cookie-text] strong { color: var(--fog); font-weight: 600; }
[data-cookie-actions] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
[data-cookie-actions] button { cursor: pointer; padding: 11px 20px; border-radius: 100px; border: 1px solid var(--cta); background: var(--cta); color: var(--cta-ink); font: inherit; font-size: var(--fs-btn); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(.16,1,.3,1); }
[data-cookie-actions] button:hover { background: var(--hover); border-color: var(--hover); transform: translateY(-1px); }
[data-cookie-actions] button[data-cookie-essential] { background: transparent; color: var(--fog); border-color: rgba(var(--fog-rgb), 0.34); }
[data-cookie-actions] button[data-cookie-essential]:hover { background: rgba(var(--fog-rgb), 0.12); border-color: rgba(var(--fog-rgb), 0.5); }
[data-cookie-actions] a { color: rgba(var(--fog-rgb), 0.86); font-size: var(--fs-caption); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--fog-rgb), 0.45); }
[data-cookie-actions] a:hover { color: var(--fog); text-decoration-color: var(--fog); }
[data-cookie-banner] :focus-visible { outline: 2px solid var(--fog); outline-offset: 3px; }
/* ruimte reserveren zolang de banner staat, zodat hij niets blijvend dekt; de
   donkere onderrand loopt door in de footer in plaats van een lichte strook */
html.whspr-cookie-open #reserveer { padding-bottom: var(--wc-h, 0px); }

@media (max-width: 760px) {
  #reserveer [data-foot-news] { grid-template-columns: 1fr; gap: 14px; }
  [data-cookie-in] { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; border-radius: 16px; }
  [data-cookie-actions] { justify-content: space-between; }
}
@media (max-width: 560px) {
  #reserveer [data-news-form] .nb-row { grid-template-columns: 1fr; }
  #reserveer [data-news-form] .btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  [data-cookie-actions] button { transition: none; }
  [data-cookie-actions] button:hover { transform: none; }
}