/* =====================================================================
   LeisureIQ — website
   Opzet: lichte grond waarop de logo's tot hun recht komen, links
   uitgelijnd op één kolom van 1160px. Wat de producten zelf laten zien
   (logboek, schermopnames) staat in donkere inzetten, in de kleuren van
   de producten. Eén lettertype: Archivo, breed gezet voor koppen.
   ===================================================================== */

@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Merktokens ───────────────────────────────────────────────────── */
:root{
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --papier:#F3F7F8;      /* de grond van de pagina */
  --vlak:#FFFFFF;        /* vlakken die erbovenop liggen */
  --vlak-2:#E8EFF2;
  --rand:#D3DEE4;
  --rand-sterk:#AFC1CB;
  --inkt:#05121D;        /* koppen */
  --tekst:#182C3B;
  --zacht:#4F6677;
  --merk-a:#72C1A5;      /* verloop uit het logo: groen */
  --merk-b:#00B1E9;      /* ... naar cyaan */
  --accent:#006C91;      /* links en focus */
  --knop:#05121D;
  --knop-tekst:#FFFFFF;
  --knop-over:#0B3550;

  /* donkere inzet: de kleuren van de producten zelf */
  --scherm:#071624;
  --scherm-vlak:#0E2537;
  --scherm-rand:#1E3D55;
  --scherm-kop:#F5F9FC;
  --scherm-tekst:#E6EDF3;
  --scherm-zacht:#8CA3B8;

  --ok:#08704F;   --ok-vlak:#DCF2E9;
  --let:#8A5A00;  --let-vlak:#FAEDCB;
  --stil:#4F6677; --stil-vlak:#E8EFF2;
  --nee:#B3261E;  --nee-vlak:#FBE4E2;

  --toon-licht:block; --toon-donker:none;
  --breed:1160px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#071624; --vlak:#0E2537; --vlak-2:#143047;
    --rand:#1E3D55; --rand-sterk:#2C536F;
    --inkt:#F5F9FC; --tekst:#E6EDF3; --zacht:#8CA3B8;
    --accent:#5CC8F0;
    --knop:#F5F9FC; --knop-tekst:#071624; --knop-over:#CFE6F2;
    --scherm:#040E18; --scherm-vlak:#0B1E2E; --scherm-rand:#1E3D55;
    --ok:#3FE0AC;  --ok-vlak:#0C3A32;
    --let:#F5B841; --let-vlak:#3A2E10;
    --stil:#8CA3B8; --stil-vlak:#143047;
    --nee:#FF8A84; --nee-vlak:#43201F;
    --toon-licht:none; --toon-donker:block;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papier:#071624; --vlak:#0E2537; --vlak-2:#143047;
  --rand:#1E3D55; --rand-sterk:#2C536F;
  --inkt:#F5F9FC; --tekst:#E6EDF3; --zacht:#8CA3B8;
  --accent:#5CC8F0;
  --knop:#F5F9FC; --knop-tekst:#071624; --knop-over:#CFE6F2;
  --scherm:#040E18; --scherm-vlak:#0B1E2E; --scherm-rand:#1E3D55;
  --ok:#3FE0AC;  --ok-vlak:#0C3A32;
  --let:#F5B841; --let-vlak:#3A2E10;
  --stil:#8CA3B8; --stil-vlak:#143047;
  --nee:#FF8A84; --nee-vlak:#43201F;
  --toon-licht:none; --toon-donker:block;
  color-scheme:dark;
}

/* ── Basis ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:130px}
body{margin:0;background:var(--papier);color:var(--tekst);
  font:400 17px/1.6 var(--font);font-stretch:100%;letter-spacing:-.003em}
img,video{max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--merk-b);color:#05121D}
strong,b{font-weight:600;color:var(--inkt)}
[hidden]{display:none!important}

h1,h2,h3{color:var(--inkt);text-wrap:balance}
h1{font-weight:650;font-stretch:116%;font-size:clamp(2.1rem,1.2rem + 3.6vw,3.6rem);
  line-height:1.04;letter-spacing:-.022em}
h2{font-weight:620;font-stretch:112%;font-size:clamp(1.6rem,1.15rem + 1.7vw,2.3rem);
  line-height:1.12;letter-spacing:-.018em}
h3{font-weight:620;font-stretch:104%;font-size:1.14rem;line-height:1.3;letter-spacing:-.008em}
p{text-wrap:pretty}

.rij{max-width:var(--breed);margin-inline:auto;padding-inline:20px}
.smal{max-width:44rem}
.zacht{color:var(--zacht)}
.klein{font-size:.9rem}
.cijfers{font-variant-numeric:tabular-nums}
.sla-over{position:absolute;left:-999px;top:8px;background:var(--knop);color:var(--knop-tekst);
  padding:8px 14px;border-radius:8px;z-index:50}
.sla-over:focus{left:12px}

/* logo's: lichte en donkere uitvoering, gestuurd door de tokens */
.logo{display:inline-block;line-height:0}
.logo img{height:auto;max-width:100%}
.logo .licht{display:var(--toon-licht)}
.logo .donker{display:var(--toon-donker)}
/* alle woordmerken op dezelfde letterhoogte: breedte = natuurlijke breedte × factor */
.logo-maat img{width:calc(var(--w) * var(--k,.22) * 1px)}

/* ── Knoppen ──────────────────────────────────────────────────────── */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:10px;border:1.5px solid var(--knop);
  background:var(--knop);color:var(--knop-tekst);
  font:inherit;font-weight:560;line-height:1.2;text-decoration:none;cursor:pointer}
.knop:hover{background:var(--knop-over);border-color:var(--knop-over)}
.knop-rand{background:transparent;color:var(--inkt);border-color:var(--rand-sterk)}
.knop-rand:hover{background:var(--vlak-2);border-color:var(--rand-sterk)}
.knop-klein{padding:8px 14px;font-size:.94rem}
.knop[aria-disabled="true"]{opacity:.45;pointer-events:none}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* ── Kopbalk ──────────────────────────────────────────────────────── */
.kop{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:var(--papier);border-bottom:1px solid var(--rand)}
.kop-in{display:flex;align-items:center;flex-wrap:wrap;column-gap:32px;row-gap:0;min-height:66px}
.kop-merk{display:inline-flex;align-items:center;padding-block:14px}
.kop-merk img{width:auto;height:26px}
.kop-nav{display:flex;gap:6px;margin-left:auto}
.kop-nav a{position:relative;padding:8px 11px;border-radius:8px;
  color:var(--tekst);font-weight:520;font-size:.97rem;text-decoration:none;white-space:nowrap}
.kop-nav a:hover{background:var(--vlak-2)}
.kop-nav a[aria-current="page"]{color:var(--inkt);font-weight:640}
.kop-nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:1px;height:3px;
  border-radius:2px;background:linear-gradient(90deg,var(--merk-a),var(--merk-b))}
@media (max-width:860px){
  .kop-in{column-gap:16px}
  .kop-in > .knop{margin-left:auto}
  .kop-nav{order:3;width:calc(100% + 40px);margin-inline:-20px;padding:0 14px 8px;overflow-x:auto;
    scrollbar-width:none}
  .kop-nav::-webkit-scrollbar{display:none}
}

/* ── Opening ──────────────────────────────────────────────────────── */
.held{padding-block:56px 64px}
.held-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:center}
.held-tekst{display:grid;gap:22px;justify-items:start}
.held .inleiding{font-size:1.22rem;line-height:1.5;color:var(--tekst);max-width:34rem}
.held-logo{--k:.36;margin-bottom:6px}
.held-product .held-logo{--k:.34}
.held-product h1{font-size:clamp(2rem,1.15rem + 2.7vw,3.05rem);line-height:1.07}
.held-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
@media (max-width:960px){
  .held{padding-block:36px 48px}
  .held-in{grid-template-columns:minmax(0,1fr);gap:36px}
  .held-logo{--k:.27}
  .held-product .held-logo{--k:.27}
}
@media (max-width:420px){ .held-logo, .held-product .held-logo{--k:.23} }

/* het logboek van één verblijf: donkere inzet, zoals de producten zelf */
.logboek{background:var(--scherm);color:var(--scherm-tekst);border:1px solid var(--scherm-rand);
  border-radius:16px;padding:22px 24px 16px;font-size:.94rem;line-height:1.45}
.logboek-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;
  padding-bottom:14px}
.logboek-kop b{color:var(--scherm-kop);font-weight:620;font-stretch:108%;font-size:1.05rem}
.logboek-kop span{color:var(--scherm-zacht);font-size:.86rem}
.logboek li{display:grid;grid-template-columns:5.2em minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;
  padding-block:11px;border-top:1px solid var(--scherm-rand)}
.logboek time{color:var(--scherm-zacht);font-variant-numeric:tabular-nums;white-space:nowrap}
.logboek .wie{font-weight:620;font-size:.84rem;letter-spacing:-.01em;color:var(--scherm-kop);
  padding:2px 9px;border:1px solid var(--scherm-rand);border-radius:999px;white-space:nowrap}
.logboek .wie i{font-style:normal;background:linear-gradient(120deg,var(--merk-a),var(--merk-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logboek-voet{border-top:1px solid var(--scherm-rand);padding-top:12px;color:var(--scherm-zacht);font-size:.88rem}
@media (max-width:520px){
  .logboek{padding:18px 16px 14px}
  .logboek li{grid-template-columns:auto 1fr}
  .logboek li p{grid-column:1 / -1;grid-row:2}
  .logboek .wie{justify-self:end}
}
.bijschrift{margin-top:10px;color:var(--zacht);font-size:.88rem}

/* ── Secties ──────────────────────────────────────────────────────── */
.sectie{padding-block:64px}
.band{background:var(--vlak);border-block:1px solid var(--rand)}
.sectie-kop{display:grid;gap:12px;max-width:46rem;margin-bottom:36px}
.sectie-kop p{font-size:1.1rem;color:var(--zacht)}
.sectie-kop p + p{font-size:1rem}
@media (max-width:700px){ .sectie{padding-block:44px} .sectie-kop{margin-bottom:26px} }
.deel + .deel{margin-top:56px}
.deel > h3:first-child{font-size:1.32rem;font-stretch:108%;margin-bottom:8px}
.deel > h3:first-child + p{color:var(--zacht);max-width:44rem;margin-bottom:24px}

/* status */
.status{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 9px;border-radius:999px;
  font-size:.84rem;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--stil-vlak);color:var(--stil)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.gebruik{background:var(--ok-vlak);color:var(--ok)}
.status.proef{background:var(--let-vlak);color:var(--let)}

/* de producten als hoofdstukken */
.hoofdstukken{border-bottom:1px solid var(--rand);margin-inline:-16px}
.hoofdstuk{display:grid;grid-template-columns:300px minmax(0,1fr) auto;gap:20px 40px;align-items:center;
  padding:30px 16px;border-top:1px solid var(--rand);
  color:inherit;text-decoration:none}
.hoofdstuk:hover{background:var(--vlak)}
.band .hoofdstuk:hover{background:var(--papier)}
.hoofdstuk .logo{--k:.225}
.hoofdstuk h3{font-size:1.24rem;margin-bottom:6px}
.hoofdstuk p{max-width:36rem}
.hoofdstuk .vervangt{margin-top:8px;font-size:.92rem;color:var(--zacht)}
.hoofdstuk-eind{display:grid;gap:10px;justify-items:end;text-align:right}
.ontwikkeling{position:relative;margin-top:28px;padding-left:24px;font-size:1.08rem;font-weight:540;color:var(--inkt);max-width:44rem}
.ontwikkeling::before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:11px;border-radius:3px;
  background:linear-gradient(140deg,var(--merk-a),var(--merk-b))}
.hoofdstuk-eind .meer{font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:900px){
  .hoofdstuk{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:26px}
  .hoofdstuk-eind{justify-items:start;text-align:left;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
}

/* kenmerken: geen kaarten, een lijn en een kop */
.kenmerken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:30px 44px}
.kenmerken > li{display:grid;gap:6px;align-content:start;padding-top:16px;border-top:1px solid var(--rand-sterk);min-width:0}
.kenmerken p{color:var(--tekst)}
.kenmerken .noot{font-size:.9rem;color:var(--zacht)}
.kenmerken.vier{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr));gap:30px 36px}

/* stappen: alleen waar de volgorde echt telt */
.stappen{counter-reset:stap;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:28px 36px}
.stappen > li{counter-increment:stap;display:grid;gap:6px;align-content:start;min-width:0}
.stappen > li::before{content:counter(stap);font-weight:700;font-stretch:125%;font-size:2.5rem;line-height:1;
  margin-bottom:6px;background:linear-gradient(140deg,var(--merk-a),var(--merk-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.stappen.rij-6{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* tekst naast beeld */
.tweeluik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px 56px;align-items:start}
.tweeluik.om > :first-child{order:2}
.tweeluik-tekst{display:grid;gap:16px;align-content:start}
.tweeluik-tekst h3{margin-top:12px}
.tweeluik-tekst h3:first-child{margin-top:0}
.tweeluik-tekst h3 + *{margin-top:-8px}
@media (max-width:900px){ .tweeluik{grid-template-columns:minmax(0,1fr)} .tweeluik.om > :first-child{order:0} }

.punten{display:grid;gap:10px}
.punten > li{position:relative;padding-left:22px}
.punten > li > b:first-child{display:block}
.punten > li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(140deg,var(--merk-a),var(--merk-b))}

/* schermopname in donkere lijst */
.scherm{display:grid;gap:12px;min-width:0}
.scherm-lijst{background:var(--scherm);border:1px solid var(--scherm-rand);border-radius:14px;padding:8px;line-height:0}
.scherm video{display:block;width:100%;border-radius:8px;background:var(--scherm)}
.scherm figcaption{font-size:.94rem;color:var(--zacht)}
.scherm figcaption b{display:block;color:var(--inkt)}
.telefoons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:860px}
.telefoons .scherm-lijst{border-radius:22px;padding:7px}
.telefoons video{border-radius:16px}
@media (max-width:700px){ .telefoons{grid-template-columns:minmax(0,1fr);max-width:300px} }
.telefoon-rij{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px 56px;align-items:center}
@media (max-width:900px){ .telefoon-rij{grid-template-columns:minmax(0,1fr)} }
.schermen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px 36px}

/* feiten: sleutel en waarde */
.feiten{display:grid;grid-template-columns:minmax(6.5em,auto) minmax(0,1fr);font-size:.97rem}
.feiten > div{display:contents}
.feiten dt,.feiten dd{padding-block:11px;border-top:1px solid var(--rand)}
.feiten > div:first-child dt,.feiten > div:first-child dd{border-top:0;padding-top:0}
.feiten dt{color:var(--zacht);padding-right:20px}
.feiten dd{color:var(--tekst)}
.kort{background:var(--vlak);border:1px solid var(--rand);border-radius:16px;padding:24px 26px}
.band .kort{background:var(--papier)}
.kort h2{font-size:1.02rem;font-stretch:104%;letter-spacing:0;margin-bottom:16px;color:var(--zacht);font-weight:600}
@media (max-width:420px){ .feiten{grid-template-columns:minmax(0,1fr)} .feiten dt{padding-bottom:0} .feiten dd{border-top:0;padding-top:2px} }

/* op deze pagina */
.inhoud{border-block:1px solid var(--rand);background:var(--vlak)}
.inhoud ul{display:flex;gap:4px 6px;padding-block:10px;overflow-x:auto;scrollbar-width:none}
.inhoud ul::-webkit-scrollbar{display:none}
.inhoud a{display:block;padding:6px 12px;border-radius:8px;color:var(--tekst);font-size:.95rem;font-weight:520;
  text-decoration:none;white-space:nowrap}
.inhoud a:hover{background:var(--vlak-2)}

/* uitkomsten: open, dicht, wacht */
.uitkomsten{border:1px solid var(--rand);border-radius:14px;background:var(--vlak);overflow:hidden}
.band .uitkomsten{background:var(--papier)}
.uitkomsten li{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:14px;align-items:baseline;
  padding:13px 18px;border-top:1px solid var(--rand)}
.uitkomsten li:first-child{border-top:0}
.merk-open,.merk-dicht,.merk-wacht{justify-self:start;padding:1px 10px;border-radius:6px;font-size:.84rem;font-weight:640}
.merk-open{background:var(--ok-vlak);color:var(--ok)}
.merk-dicht{background:var(--nee-vlak);color:var(--nee)}
.merk-wacht{background:var(--let-vlak);color:var(--let)}

/* wie werkt ermee */
.rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px}
.rollen > li{display:grid;gap:10px;align-content:start;background:var(--vlak);border:1px solid var(--rand);
  border-radius:14px;padding:22px 24px;min-width:0}
.band .rollen > li{background:var(--papier)}
.rollen ul{display:grid;gap:6px;font-size:.96rem}
.rollen ul li{padding-left:16px;position:relative}
.rollen ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:2px;background:var(--rand-sterk)}

/* tabel */
.tabel-wrap{overflow-x:auto;border:1px solid var(--rand);border-radius:14px;background:var(--vlak)}
.band .tabel-wrap{background:var(--papier)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:12px 18px;border-top:1px solid var(--rand);vertical-align:top}
thead th{border-top:0;color:var(--zacht);font-weight:600;font-size:.88rem;white-space:nowrap}
tbody th{font-weight:600;color:var(--inkt);white-space:nowrap}
td.ja{color:var(--ok);font-weight:600}
td.nee{color:var(--zacht)}

/* hoe het samenhangt: de boeking in het midden */
.samen{display:grid;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);gap:22px 46px;align-items:center}
.samen-kern{grid-column:2;grid-row:1 / span var(--rijen,2);align-self:stretch;display:grid;align-content:center;gap:8px;
  text-align:center;padding:26px 18px;border-radius:18px;background:var(--scherm);color:var(--scherm-tekst);
  border:1px solid var(--scherm-rand)}
.samen-kern b{font-size:1.25rem;font-stretch:112%;font-weight:640;
  background:linear-gradient(120deg,var(--merk-a),var(--merk-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.samen-kern span{font-size:.9rem;color:var(--scherm-zacht)}
.samen-knoop{position:relative;display:grid;gap:6px;background:var(--vlak);border:1px solid var(--rand);
  border-radius:14px;padding:18px 20px;color:inherit;text-decoration:none;min-width:0}
.band .samen-knoop{background:var(--papier)}
.samen-knoop:hover{border-color:var(--rand-sterk)}
.samen-knoop .logo{--k:.135}
.samen-knoop p{font-size:.95rem}
.samen-knoop::after{content:"";position:absolute;top:50%;width:46px;height:2px;
  background:linear-gradient(90deg,var(--merk-a),var(--merk-b))}
.samen-knoop.links{grid-column:1}
.samen-knoop.links::after{left:100%}
.samen-knoop.rechts{grid-column:3}
.samen-knoop.rechts::after{right:100%}
.samen-knoop.los::after{background:repeating-linear-gradient(90deg,var(--rand-sterk) 0 6px,transparent 6px 11px)}
.samen-knoop.onder{grid-column:1 / -1;justify-self:center;width:min(100%,560px);margin-top:24px;text-align:center;justify-items:center}
.samen-knoop.onder::after{top:auto;bottom:100%;left:50%;width:2px;height:46px;
  background:repeating-linear-gradient(180deg,var(--rand-sterk) 0 6px,transparent 6px 11px)}
@media (max-width:900px){
  .samen{grid-template-columns:minmax(0,1fr);gap:14px}
  .samen-kern,.samen-knoop.links,.samen-knoop.rechts{grid-column:1;grid-row:auto}
  .samen-knoop.onder{margin-top:0;width:100%;text-align:left;justify-items:start}
  .samen-kern{order:-1}
  .samen-knoop::after{display:none}
}

/* opzet: park en centrale dienst */
.opzet{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
.opzet-blok{background:var(--scherm);color:var(--scherm-tekst);border:1px solid var(--scherm-rand);
  border-radius:14px;padding:20px 22px;display:grid;gap:8px;align-content:start;font-size:.95rem}
.opzet-blok b{color:var(--scherm-kop);font-size:1.02rem;font-stretch:106%}
.opzet-blok li{color:var(--scherm-zacht);padding-left:14px;position:relative}
.opzet-blok li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:2px;background:var(--scherm-zacht)}
.opzet-lijn{display:grid;align-content:center;justify-items:center;gap:6px;font-size:.84rem;color:var(--zacht);
  text-align:center;min-width:120px}
.opzet-lijn i{display:block;width:100%;height:2px;background:linear-gradient(90deg,var(--merk-a),var(--merk-b))}
@media (max-width:760px){
  .opzet{grid-template-columns:minmax(0,1fr)}
  .opzet-lijn{grid-auto-flow:column;justify-content:start;align-items:center;min-width:0}
  .opzet-lijn i{width:2px;height:28px;background:linear-gradient(180deg,var(--merk-a),var(--merk-b))}
}

/* inloggen */
.inlog{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px}
.inlog > li{display:grid;gap:12px;align-content:start;justify-items:start;background:var(--vlak);
  border:1px solid var(--rand);border-radius:14px;padding:22px 24px;min-width:0}
.band .inlog > li{background:var(--papier)}
.inlog p{font-size:.96rem}
.parkadres{display:grid;gap:10px;justify-items:start;width:100%}
.parkadres label{font-size:.9rem;color:var(--zacht)}
.parkadres-veld{display:flex;align-items:center;width:100%;max-width:340px;border:1.5px solid var(--rand-sterk);
  border-radius:10px;background:var(--papier);overflow:hidden}
.band .parkadres-veld{background:var(--vlak)}
.parkadres-veld:focus-within{border-color:var(--accent)}
.parkadres input{flex:1 1 0;min-width:0;border:0;background:transparent;color:var(--inkt);font:inherit;
  padding:10px 4px 10px 12px;outline:0;text-align:right}
.parkadres-veld span{padding-right:12px;color:var(--zacht);white-space:nowrap}

/* contact */
.contact{display:grid;gap:18px;justify-items:start;max-width:44rem}
.contact p{font-size:1.1rem}
.contact .adres{font-size:1rem;color:var(--zacht);user-select:all}

/* vorige / volgende hoofdstuk */
.verder-wrap{padding-block:0 56px}
.sectie.band + .verder-wrap{padding-top:56px}
.verder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.verder a{display:grid;gap:4px;padding:18px 22px;border:1px solid var(--rand);border-radius:14px;
  background:var(--vlak);color:inherit;text-decoration:none;min-width:0}
.verder a:hover{border-color:var(--rand-sterk)}
.verder span{font-size:.86rem;color:var(--zacht)}
.verder b{font-size:1.08rem}
.verder .volgende{text-align:right}
@media (max-width:520px){ .verder{grid-template-columns:minmax(0,1fr)} .verder .volgende{text-align:left} }

/* voet */
.voet{border-top:1px solid var(--rand);background:var(--vlak);padding-block:40px 48px;font-size:.95rem}
.voet-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 48px;align-items:flex-start}
.voet .logo{--k:.2}
.voet nav{display:flex;flex-wrap:wrap;gap:8px 22px;max-width:30rem}
.voet nav a{color:var(--tekst);font-weight:520;text-decoration:none}
.voet nav a:hover{text-decoration:underline}

/* ── Toegevoegd voor het beheersysteem ────────────────────────────── */
/* onderdelen binnen een sectie staan los van elkaar */
.onderdelen{display:grid;gap:44px}
.onderdelen > *{min-width:0}
.kolom{display:grid;gap:28px;align-content:start;min-width:0}
.tweeluik.links-breed{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.tweeluik.gelijk{grid-template-columns:repeat(2,minmax(0,1fr))}
.tweeluik.midden{align-items:center}
@media (max-width:900px){ .tweeluik.links-breed,.tweeluik.gelijk{grid-template-columns:minmax(0,1fr)} }
.held-alleen .held-in{grid-template-columns:minmax(0,1fr)}
.held-alleen .held-tekst{max-width:46rem}

/* lopende tekst uit het bewerkveld */
.rijk{display:grid;gap:16px;align-content:start;max-width:46rem}
.rijk h3{margin-top:12px}
.rijk h3:first-child{margin-top:0}
.rijk h3 + *{margin-top:-8px}
.rijk ul{display:grid;gap:10px}
.rijk ul > li{position:relative;padding-left:22px}
.rijk ul > li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(140deg,var(--merk-a),var(--merk-b))}
.rijk ul > li > b:first-child,.rijk ul > li > strong:first-child{display:block}
.rijk ol{display:grid;gap:10px;padding-left:1.4em;list-style:decimal}
.feiten-blok{display:grid;gap:14px}
small{font-size:.9rem;color:var(--zacht)}
/* één inlogkaart zonder de rest: geen kaart eromheen */
.inlog.los{grid-template-columns:minmax(0,1fr)}
.inlog.los > li,.band .inlog.los > li{background:transparent;border:0;padding:0;border-radius:0}

/* een gewone afbeelding */
.beeld{display:grid;gap:12px;min-width:0}
.beeld img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--rand)}
.beeld figcaption{font-size:.94rem;color:var(--zacht)}
.beeld figcaption b{display:block;color:var(--inkt)}
.scherm-lijst img{display:block;width:100%;height:auto;border-radius:8px}

/* formulieren */
.formulier{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;max-width:44rem}
.veld{grid-column:1 / -1;display:grid;gap:6px;min-width:0;border:0;padding:0;margin:0}
.veld.half{grid-column:auto}
@media (max-width:560px){ .veld.half{grid-column:1 / -1} }
.veld > label,.veld > legend{font-weight:560;color:var(--inkt);padding:0}
.veld input[type="text"],.veld input[type="email"],.veld input[type="tel"],.veld textarea,.veld select{
  width:100%;font:inherit;color:var(--inkt);background:var(--vlak);border:1.5px solid var(--rand-sterk);
  border-radius:10px;padding:11px 13px}
.band .veld input[type="text"],.band .veld input[type="email"],.band .veld input[type="tel"],.band .veld textarea,.band .veld select{background:var(--papier)}
.veld textarea{resize:vertical;min-height:7.5em}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.veld-vink label,.veld-rondjes label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--tekst)}
.veld-vink input,.veld-rondjes input{margin-top:.32em;width:1.05em;height:1.05em;accent-color:var(--accent);flex:none}
.veld-rondjes{gap:8px}
.veld-hulp{font-size:.9rem;color:var(--zacht)}
.veld-fout{font-size:.9rem;color:var(--nee);font-weight:560}
.veld.fout input,.veld.fout textarea,.veld.fout select{border-color:var(--nee)}
.verplicht{color:var(--nee)}
.veld-extra{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier-voet{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.formulier-melding{color:var(--nee);font-weight:560}
.formulier-bedankt{grid-column:1 / -1;padding:18px 20px;border-radius:14px;background:var(--ok-vlak);color:var(--ok);font-weight:560}
.formulier.bezig .knop{opacity:.6;pointer-events:none}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
@media print{ .kop,.inhoud{position:static} .scherm video{display:none} }

/* ---------- voet: wie er achter de site zit, en privacy, voorwaarden, cookies ---------- */
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;align-items:baseline;margin-top:28px;padding-top:18px;border-top:1px solid var(--rand);font-size:.86rem;color:var(--zacht)}
.voet-onder p{margin:0}
.voet-onder nav{gap:6px 20px;max-width:none}
.voet-onder nav a,.voet-onder .tekst-knop{color:var(--zacht);font-weight:400;font-size:inherit}
.tekst-knop{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.tekst-knop:hover{color:var(--inkt)}
.formulier-privacy{grid-column:1 / -1;margin:0;font-size:.9rem;color:var(--zacht)}
.formulier > [data-alleen-in]:not(.veld){grid-column:1 / -1}

/* ---------- bedrijfsgegevens ---------- */
.bedrijfsgegevens{max-width:44rem}

/* ---------- profiel ---------- */
.profiel{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:28px 44px;align-items:start;max-width:56rem}
.profiel.zonder-foto{grid-template-columns:minmax(0,1fr)}
.profiel-foto{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px;border:1px solid var(--rand)}
.profiel-tekst h3{font-size:1.5rem;margin:0}
.profiel-functie{margin:4px 0 14px;color:var(--zacht);font-weight:520}
.profiel-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0}
.profiel-links a{font-weight:560}
@media (max-width:640px){ .profiel{grid-template-columns:minmax(0,1fr)} .profiel-foto{max-width:200px} }

/* ---------- nieuwsbrief ---------- */
.nieuwsbrief{max-width:36rem}
.nieuwsbrief-tekst{grid-column:1 / -1;margin:0}

/* ---------- een losse melding (inschrijving bevestigen, uitschrijven) ---------- */
.melding-kaart{max-width:38rem;padding:36px;border:1px solid var(--rand);border-radius:18px;background:var(--vlak)}
.melding-kaart h1{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 14px}
.melding-kaart form{margin-top:22px}
.melding-kaart p:last-child{margin-bottom:0}

/* ---------- cookies ---------- */
.cookiebalk{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--vlak);border-top:1px solid var(--rand-sterk);box-shadow:0 -10px 34px rgba(5,18,29,.16);padding-block:18px;max-height:85vh;overflow-y:auto}
.cookiebalk-in{display:flex;flex-wrap:wrap;gap:16px 36px;align-items:center;justify-content:space-between}
.cookiebalk-tekst{flex:1 1 26rem;min-width:0}
.cookiebalk h2{font-size:1.05rem;margin:0 0 4px}
.cookiebalk p{margin:0;font-size:.94rem}
.cookiebalk-knoppen{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.cookie-keuzes{display:grid;gap:8px;margin-top:12px;font-size:.94rem}
.cookie-soort{display:flex;gap:10px;align-items:flex-start}
.cookie-soort input{margin-top:.3em;width:1.05em;height:1.05em;accent-color:var(--accent);flex:none}
@media (max-width:560px){ .cookiebalk-knoppen{width:100%} .cookiebalk-knoppen .knop{flex:1} }

/* ── Productkaarten (sinds 1.4) ─────────────────────────────────────── */
.pk-bron{background:var(--scherm);color:var(--scherm-tekst);border:1px solid var(--scherm-rand);border-radius:16px;
  padding:20px 24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:center}
.pk-bron-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:620;color:var(--merk-a)}
.pk-bron-kop{font-size:1.25rem;font-weight:620;font-stretch:108%;color:var(--scherm-kop);letter-spacing:-.01em;margin-top:2px}
.pk-bron p{font-size:.95rem;line-height:1.5;color:var(--scherm-zacht);border-left:1px solid var(--scherm-rand);padding-left:28px}
.pk-bron p :is(b,strong){color:var(--scherm-tekst);font-weight:560}
.pk-bron p a{color:var(--scherm-kop)}
.pk.zonder-lijnen .pk-bron{margin-bottom:16px}
.pk-lijnen{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:16px;height:22px}
.pk-lijnen span{position:relative}
.pk-lijnen span::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(var(--merk-b),var(--merk-a))}
.pk-lijnen span.stil::after{background:none;border-left:2px dashed var(--rand-sterk)}
.pk-kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:16px}
.pk-kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:16px;padding:20px 18px 16px;display:flex;flex-direction:column;min-width:0}
.band .pk-kaart{background:var(--papier)}
.pk-kaart.achter,.band .pk-kaart.achter{background:var(--vlak-2);border-style:dashed;border-color:var(--rand-sterk)}
.pk-rol{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;min-height:22px}
.pk-rol span{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:620;color:var(--accent)}
.pk svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pk-logo{height:46px;display:flex;align-items:center;margin-bottom:16px}
.pk-logo .logo-maat img{width:auto;height:auto;max-height:46px;max-width:100%}
.pk-kaart h3{font-size:1.05rem;line-height:1.25;margin-bottom:8px}
.pk-kaart p{font-size:.9rem;line-height:1.5}
.pk-kaart p:not(.pk-vervangt){margin-bottom:16px}
.pk-kaart .pk-vervangt{margin-top:auto;padding-top:12px;border-top:1px solid var(--rand);font-size:.8rem;color:var(--zacht)}
.pk-kaart .pk-vervangt.leeg{border-top:0;padding-top:0}
.pk-kaart .pk-vervangt strong{color:var(--tekst);font-weight:600}
.pk-meer{margin-top:10px;font-size:.85rem;font-weight:560;color:var(--accent);text-decoration:none}
.pk-meer:hover{text-decoration:underline}
.pk-beeld{margin:0 -18px 16px;border-block:1px solid var(--rand);background:var(--vlak-2)}
.pk-beeld img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pk-met-midden .pk-kaart h3{margin-bottom:4px}
.pk-midden{position:relative;display:flex;justify-content:center}
.pk-kern{position:relative;width:212px;aspect-ratio:1;border-radius:50%;background:var(--scherm);color:var(--scherm-tekst);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:26px;
  box-shadow:0 14px 32px -12px rgba(5,18,29,.45)}
.pk-kern::before{content:"";position:absolute;inset:-7px;border-radius:50%;padding:2px;pointer-events:none;
  background:linear-gradient(140deg,var(--merk-a),var(--merk-b));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.pk-kern img{width:150px;height:auto}
.pk-kern span{font-size:.95rem;line-height:1.3;font-weight:560;color:var(--scherm-kop)}
.pk-noot{position:absolute;left:calc(50% + 136px);top:22px;max-width:250px;display:flex;align-items:flex-start;gap:8px}
.pk-noot svg{width:40px;height:24px;flex:none;margin-top:6px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pk-noot p{font-size:.95rem;line-height:1.45;color:var(--tekst);font-weight:520}
.pk svg.pk-bogen{display:block;width:100%;height:80px;overflow:visible;stroke:none}
.pk-bogen path{fill:none;stroke:var(--merk-b);stroke-width:2}
.pk-bogen path.stil{stroke:var(--rand-sterk);stroke-dasharray:5 5}
.pk-met-midden .pk-kaarten{position:relative}
.pk-met-midden .pk-waarden{justify-content:center}
.pk-met-midden .pk-kaart{position:relative}
.pk-met-midden .pk-kaart::before{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--merk-b);box-shadow:0 0 0 3px var(--papier)}
.band .pk-met-midden .pk-kaart::before{box-shadow:0 0 0 3px var(--vlak)}
.pk-met-midden .pk-kaart.achter::before{background:var(--rand-sterk)}
/* De hele kaart is een knop: de link onderaan beslaat de hele kaart. Aanwijzen: iets naar voren;
   klikken: de kaart veert in, zoals een drukknop. */
.pk-kaart:has(.pk-meer){position:relative;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pk-meer::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:1}
.pk-kaart:has(.pk-meer) .pk-beeld{overflow:hidden}
.pk-kaart:has(.pk-meer) .pk-beeld img{transition:transform .35s ease}
.pk-kaart:has(.pk-meer):hover{transform:translateY(-4px);border-color:var(--merk-b);
  box-shadow:0 16px 30px -14px rgba(5,18,29,.35)}
.pk-kaart:has(.pk-meer):hover .pk-beeld img{transform:scale(1.05)}
.pk-kaart:has(.pk-meer):hover .pk-meer{text-decoration:underline}
.pk-kaart:has(.pk-meer):active{transform:translateY(1px) scale(.97);box-shadow:0 4px 10px -6px rgba(5,18,29,.35);transition-duration:.06s}
.pk-meer:focus-visible{outline:none}
.pk-kaart:has(.pk-meer:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .pk-kaart:has(.pk-meer),.pk-kaart:has(.pk-meer) .pk-beeld img{transition:none}
  .pk-kaart:has(.pk-meer):hover,.pk-kaart:has(.pk-meer):active,.pk-kaart:has(.pk-meer):hover .pk-beeld img{transform:none}
}
.veld-controle input{max-width:9rem}
.pk-waarden{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.pk-waarden li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--inkt)}
.pk-waarden svg{width:20px;height:20px;stroke-width:1.7}
@media (max-width:1040px){
  .pk-lijnen,.pk svg.pk-bogen,.pk-met-midden .pk-kaart::before{display:none}
  .pk-midden{flex-direction:column;align-items:center;gap:18px;margin-bottom:28px}
  .pk-noot{position:static;max-width:34rem;text-align:center}
  .pk-noot svg{display:none}
  .pk .pk-bron{margin-bottom:16px}
  .pk-kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .pk-bron{grid-template-columns:minmax(0,1fr);padding:18px}
  .pk-bron p{border-left:0;padding-left:0;border-top:1px solid var(--scherm-rand);padding-top:12px;margin-top:6px}
  .pk-kaarten{grid-template-columns:minmax(0,1fr)}
  .pk-met-midden .pk-kaart:has(.pk-beeld){display:grid;grid-template-columns:42% minmax(0,1fr);grid-auto-rows:auto;column-gap:14px;padding:14px;align-content:start}
  .pk-met-midden .pk-kaart:has(.pk-beeld)>*{grid-column:2}
  .pk-met-midden .pk-kaart .pk-beeld{grid-column:1;grid-row:1 / span 6;margin:0;border:0;border-radius:10px;overflow:hidden;align-self:start}
  .pk-met-midden .pk-kaart:has(.pk-beeld) .pk-rol{margin-bottom:6px}
  .pk-met-midden .pk-kaart:has(.pk-beeld) .pk-logo{height:30px;margin-bottom:8px}
  .pk-met-midden .pk-kaart:has(.pk-beeld) .pk-logo .logo-maat img{max-height:30px}
  .pk-met-midden .pk-kaart:has(.pk-beeld) h3{font-size:.95rem}
  .pk-met-midden .pk-kaart:has(.pk-beeld) .pk-vervangt.leeg{display:none}
  .pk-met-midden .pk-kaart:has(.pk-beeld) .pk-meer{margin-top:6px}
}