/* ==========================================================================
   OCulus AVIS - stijlblad
   Licht als basis, zodat de site open en zakelijk leest. Donker alleen waar beeld
   de hoofdrol speelt (de opening, de orbit, de filmspeler, de voet): daar zet de
   klasse .donker dezelfde variabelen terug op het donkere palet.
   De twee groenen komen uit het logo: salie (#99baa1) en woud (#1d3629).
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  /* Licht. De namen bleven van het donkere ontwerp: nacht is de ondergrond,
     mist de tekst, salie de accentkleur. */
  --nacht: #f5f7f4;
  --grond: #ecf0ec;
  --paneel: #ffffff;
  --lijn: rgba(20, 32, 25, 0.11);
  --lijn-sterk: rgba(20, 32, 25, 0.22);
  --mist: #142019;
  --grijs: #5b6860;
  --salie: #2f6b4c;
  --salie-fel: #245a3d;
  --woud: #1d3629;
  --amber: #b86a12;

  --f-kop: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-tekst: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --rand: clamp(1rem, 4vw, 3.5rem);
  --sectie: clamp(4.5rem, 9vw, 7.5rem);
  --boog: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

.donker {
  --nacht: #0a0d0b;
  --grond: #101512;
  --paneel: #151c18;
  --lijn: rgba(233, 239, 233, 0.12);
  --lijn-sterk: rgba(233, 239, 233, 0.26);
  --mist: #e9efe9;
  --grijs: #95a298;
  --salie: #99baa1;
  --salie-fel: #bcd8c2;
  --amber: #f2a93b;
  color-scheme: dark;
  color: var(--mist);
}

*, *::before, *::after { box-sizing: border-box; }
/* Verborgen is verborgen, wat de opmaak verder ook zegt */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--mist);
  font-family: var(--f-tekst);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-kop); text-wrap: balance; }
p { margin: 0; }
p + p { margin-top: 1em; }

:focus-visible { outline: 2px solid var(--salie); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--salie); color: var(--nacht); }

.overslaan {
  position: absolute; left: var(--rand); top: -4rem; z-index: 100;
  background: var(--salie); color: var(--nacht); padding: 0.6rem 1rem; border-radius: 6px;
}
.overslaan:focus { top: 1rem; }

/* ---------- Typografie ---------------------------------------------------- */

.label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--salie);
}

.groot {
  font-size: clamp(2.4rem, 1.2rem + 5.2vw, 5.8rem);
  font-weight: 760;
  font-variation-settings: "opsz" 96;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.klein { font-size: 0.875rem; color: var(--grijs); }

/* ---------- Korrel en cursor ---------------------------------------------- */

.korrel {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  animation: korrel 0.9s steps(3) infinite;
}
@keyframes korrel {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-3%, 2%); }
  66% { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}


/* ---------- Knoppen ------------------------------------------------------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 2.9rem; padding: 0 1.35rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-tekst); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.knop svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
.knop-vol { background: var(--salie); color: var(--nacht); }
.knop-vol:hover { background: var(--salie-fel); }
.knop-lijn { background: transparent; border-color: var(--lijn-sterk); color: var(--mist); }
.knop-lijn:hover { border-color: var(--salie); color: var(--salie); }
.knop-spook { background: transparent; color: var(--mist); border-color: transparent; }
.knop-spook:hover { color: var(--salie); }
.linkknop { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Kop ----------------------------------------------------------- */

.kop {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1rem;
  padding-inline: var(--rand);
  transition: background 0.4s, padding 0.4s, transform 0.5s var(--boog);
}
.kop.vast {
  background: rgba(10, 13, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--lijn);
}
.kop.weg { transform: translateY(-110%); }
.kop-logo img { width: clamp(6.8rem, 10vw, 9rem); height: auto; }
.kop-nav { display: flex; gap: 2rem; }
.kop-nav a {
  position: relative; text-decoration: none; font-size: 0.93rem; font-weight: 500; color: var(--mist);
}
.kop-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.3rem; height: 1px;
  background: var(--salie); transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--boog);
}
.kop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.kop-acties { display: flex; align-items: center; gap: 0.4rem; }

.menuknop { display: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--lijn-sterk); background: transparent; cursor: pointer; position: relative; }
.menuknop span { position: absolute; left: 0.85rem; right: 0.85rem; height: 1.5px; background: var(--mist); transition: transform 0.35s var(--boog); }
.menuknop span:first-child { top: 1.15rem; }
.menuknop span:last-child { top: 1.65rem; }
.menuknop[aria-expanded="true"] span:first-child { transform: translateY(0.25rem) rotate(45deg); }
.menuknop[aria-expanded="true"] span:last-child { transform: translateY(-0.25rem) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--nacht);
  padding: 7rem var(--rand) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* Het hidden-attribuut verliest van display:flex hierboven; dit zet het recht. */
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--f-kop); font-size: clamp(2.4rem, 11vw, 4rem); font-weight: 720; letter-spacing: -0.03em;
  text-decoration: none; padding-block: 0.35rem; border-bottom: 1px solid var(--lijn);
}
.menu-nr { font-family: var(--f-mono); font-size: 0.75rem; color: var(--salie); letter-spacing: 0.1em; }
.menu .knop { align-self: flex-start; border-color: var(--lijn-sterk); }

@media (max-width: 860px) {
  .kop-nav, .kop-acties > .knop-spook { display: none; }
  .menuknop { display: block; }
}
@media (max-width: 420px) {
  .kop-acties > .knop-vol { display: none; }
}

/* ---------- Held ---------------------------------------------------------- */

.held {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 8rem clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: var(--rand);
  overflow: hidden;
  isolation: isolate;
}
.held-beeld { position: absolute; inset: 0; z-index: -1; background: var(--grond); }
.held-video {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 40%;
}
.held-waas {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 11, 0.55) 0%, rgba(10, 13, 11, 0) 22%),
    linear-gradient(0deg, rgba(10, 13, 11, 0.94) 4%, rgba(10, 13, 11, 0.35) 45%, rgba(10, 13, 11, 0) 70%);
}

.held-inhoud { position: relative; max-width: 88rem; }
.held-label { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.2rem; color: var(--mist); }
.held-label .punt { flex: none; margin-top: 0.28em; }
.punt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--salie); box-shadow: 0 0 0 0 rgba(153, 186, 161, 0.6); animation: puls 2.2s infinite; }
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(153, 186, 161, 0.55); }
  70% { box-shadow: 0 0 0 0.7rem rgba(153, 186, 161, 0); }
  100% { box-shadow: 0 0 0 0 rgba(153, 186, 161, 0); }
}

.held-titel {
  font-size: clamp(3.4rem, 1rem + 12.5vw, 12.5rem);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  line-height: 0.86;
  letter-spacing: -0.045em;
}
.held-titel .regel { display: block; overflow: hidden; padding-bottom: 0.06em; }
.held-titel .woord { display: inline-block; will-change: transform; }
.held-titel .accent { color: var(--salie); }

.held-voet {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
}
.held-tekst { max-width: 34rem; color: rgba(233, 239, 233, 0.84); font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem); }
.held-knoppen { display: flex; gap: 0.7rem; flex-wrap: wrap; }


/* ---------- OSD van de FPV-bril ------------------------------------------- */

.osd {
  position: absolute; inset: clamp(5rem, 9vw, 6.2rem) var(--rand) 0.9rem var(--rand);
  pointer-events: none;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: rgba(233, 239, 233, 0.86);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 0;
}
.osd b { font-weight: 500; color: var(--mist); font-variant-numeric: tabular-nums; }
.osd-hoek { position: absolute; width: 1.4rem; height: 1.4rem; border-color: rgba(233, 239, 233, 0.5); border-style: solid; border-width: 0; }
.osd-hoek.lb { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.osd-hoek.rb { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.osd-hoek.lo { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.osd-hoek.ro { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.osd-rij { position: absolute; left: 2.2rem; right: 2.2rem; display: flex; justify-content: space-between; gap: 1rem; }
.osd-boven { top: 0.35rem; }
.osd-onder { bottom: 0.35rem; }
.osd-rec { display: inline-flex; align-items: center; gap: 0.45rem; }
.osd-rec i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--amber); animation: knipper 1.1s steps(2) infinite; }
@keyframes knipper { 50% { opacity: 0.15; } }
.osd-vizier { position: absolute; left: 50%; top: 34%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; }
.osd-vizier::before, .osd-vizier::after { content: ""; position: absolute; background: rgba(233, 239, 233, 0.6); }
.osd-vizier::before { left: 0; right: 0; top: 50%; height: 1px; }
.osd-vizier::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.osd-vizier span { position: absolute; inset: 0.75rem; border: 1px solid rgba(233, 239, 233, 0.6); border-radius: 50%; }

@media (max-width: 700px) {
  .osd { font-size: 0.62rem; }
  .osd-rij { left: 1.8rem; right: 1.8rem; }
  .osd-boven span:nth-child(2), .osd-weg, .osd-vizier { display: none; }
}

/* ---------- Band ---------------------------------------------------------- */

.band {
  border-block: 1px solid var(--lijn);
  overflow: hidden;
  padding-block: 1.1rem;
  background: var(--nacht);
}
.band-spoor {
  display: flex; width: max-content; align-items: center; gap: 2rem;
  font-family: var(--f-kop); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); font-weight: 650; letter-spacing: -0.02em;
  white-space: nowrap; will-change: transform;
}
.band-spoor i { font-style: normal; font-size: 0.5em; color: var(--salie); }
.band-spoor span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px rgba(233, 239, 233, 0.55); }

/* ---------- De orbit ------------------------------------------------------ */

.vlucht { position: relative; background: var(--nacht); }
.vlucht-plak { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; }
.vlucht-doek { will-change: transform; }
.vlucht-doek, .vlucht-reserve { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vlucht-reserve { display: none; }
.geen-canvas .vlucht-reserve { display: block; }
.vlucht-waas {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 13, 11, 0.78) 0%, rgba(10, 13, 11, 0.2) 55%, rgba(10, 13, 11, 0) 100%),
    linear-gradient(0deg, rgba(10, 13, 11, 0.6), rgba(10, 13, 11, 0) 40%);
}
.vlucht-osd {
  position: absolute; right: var(--rand); top: 50%; transform: translateY(-50%);
  display: grid; gap: 0.5rem; justify-items: end;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: rgba(233, 239, 233, 0.8);
}
.vlucht-osd b { color: var(--mist); font-weight: 500; font-variant-numeric: tabular-nums; }
.vlucht-meter { width: 9rem; height: 2px; background: var(--lijn-sterk); margin-top: 0.3rem; }
.vlucht-meter i { display: block; height: 100%; width: 100%; background: var(--salie); transform: scaleX(0); transform-origin: left; }

.vlucht-teksten {
  position: absolute; left: var(--rand); bottom: clamp(3rem, 12vh, 7rem);
  width: min(44rem, calc(100% - 2 * var(--rand)));
  display: grid;
}
.vlucht-tekst { grid-area: 1 / 1; align-self: end; }
.vlucht-tekst .label { margin-bottom: 1rem; }
.vlucht-sub { margin-top: 1.2rem; max-width: 30rem; color: rgba(233, 239, 233, 0.82); }

@media (max-width: 700px) {
  .vlucht-osd { top: auto; bottom: auto; top: 6rem; right: var(--rand); transform: none; }
  .vlucht-waas { background: linear-gradient(0deg, rgba(10, 13, 11, 0.88) 10%, rgba(10, 13, 11, 0) 65%); }
}

/* ---------- Portaal ------------------------------------------------------- */

.portaal { position: relative; background: var(--nacht); }
.portaal-plak { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.portaal-beeld { position: absolute; inset: 0; clip-path: circle(0% at 50% 50%); }
.portaal-beeld video { width: 100%; height: 100%; object-fit: cover; }
.portaal-beeld::after { content: ""; position: absolute; inset: 0; background: rgba(10, 13, 11, 0.35); }
.portaal-tekst { position: relative; text-align: center; padding-inline: var(--rand); }
.portaal-tekst .label { margin-bottom: 1rem; }
.portaal-tekst { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5); }
.portaal-zin {
  font-family: var(--f-kop); font-weight: 760; font-variation-settings: "opsz" 96;
  font-size: clamp(2.2rem, 1rem + 5vw, 5.4rem); line-height: 0.95; letter-spacing: -0.035em;
  max-width: 16ch; margin-inline: auto; text-wrap: balance;
}
.portaal-zin em { font-style: normal; color: var(--salie); }

/* ---------- Secties ------------------------------------------------------- */

.sectie {
  padding-block: var(--sectie);
  padding-inline: var(--rand);
  position: relative;
}
.sectie-kop { max-width: 60rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sectie-kop .label { margin-bottom: 1.2rem; }
.sectie-intro { margin-top: 1.4rem; max-width: 36rem; color: var(--grijs); }
.onthul .regel { display: block; overflow: hidden; padding-bottom: 0.08em; }
.onthul .regel > span { display: inline-block; }

/* ---------- Werk ---------------------------------------------------------- */

.werk-raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.project { grid-column: span 6; position: relative; }
.project.breed { grid-column: span 12; }
.project-beeld {
  position: relative; overflow: hidden; border-radius: 10px;
  aspect-ratio: 16 / 9; background: var(--grond); max-width: 100%;
}
.project.breed .project-beeld { aspect-ratio: 21 / 9; }
.project-beeld img, .project-beeld video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--boog), opacity 0.5s;
}
.project-beeld video { opacity: 0; }
.project.speelt .project-beeld video { opacity: 1; }
.project:hover .project-beeld img, .project:hover .project-beeld video { transform: scale(1.04); }
.project-beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 13, 11, 0.55), rgba(10, 13, 11, 0) 45%);
}
.project-duur {
  position: absolute; right: 0.9rem; bottom: 0.8rem; z-index: 1;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  padding: 0.25rem 0.55rem; border-radius: 4px; background: rgba(10, 13, 11, 0.6);
  font-variant-numeric: tabular-nums;
}
.project-info {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-top: 1rem; border-bottom: 1px solid var(--lijn); padding-bottom: 1rem;
}
.project-info h3 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.9rem); font-weight: 680; letter-spacing: -0.02em; line-height: 1.1; }
.project-info .label { white-space: nowrap; }
.project-knop { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; z-index: 2; border: 0; background: transparent; cursor: pointer; border-radius: 10px; }
.project.breed .project-knop { aspect-ratio: 21 / 9; }
.project-tekst { margin-top: 0.8rem; color: var(--grijs); max-width: 44rem; font-size: 0.95rem; }

.project-speel {
  position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 1;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  background: rgba(10, 13, 11, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.3s, color 0.3s, transform 0.4s var(--boog);
}
.project:hover .project-speel, .project-knop:focus-visible ~ .project-beeld .project-speel {
  background: var(--salie); color: var(--nacht); transform: translateY(-2px);
}
.werk-voet { margin-top: clamp(2rem, 4vw, 3rem); color: var(--grijs); max-width: 44rem; }
.werk-voet a { color: var(--mist); text-underline-offset: 3px; }
.werk-voet a:hover { color: var(--salie); }
@media (max-width: 760px) {
  .project, .project.breed { grid-column: span 12; }
  .project.breed .project-beeld, .project.breed .project-knop { aspect-ratio: 16 / 9; }
  .project-info { flex-direction: column; gap: 0.4rem; }
}

/* ---------- Werkwijze ----------------------------------------------------- */

.stappen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stap { position: relative; padding-top: 1.6rem; display: grid; gap: 0.8rem; align-content: start; }
.stap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--lijn); }
.stap-lijn { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--salie); transform-origin: left; }
.stap-nr { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--salie); }
.stap h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.05; }
.stap p { color: var(--grijs); max-width: 26rem; }
@media (max-width: 860px) { .stappen { grid-template-columns: 1fr; } }

/* ---------- Diensten ------------------------------------------------------ */

.diensten { background: var(--grond); }
.diensten-lijst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dienst {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  border: 1px solid var(--lijn); border-radius: 12px;
  background: var(--nacht);
  transition: border-color 0.4s, transform 0.6s var(--boog);
  overflow: hidden;
}
.dienst:hover { border-color: rgba(153, 186, 161, 0.5); transform: translateY(-4px); }
.dienst-kop { display: grid; gap: 0.8rem; }
.dienst-nr { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--salie); }
.dienst h3 { font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.05; }
.dienst > p { color: var(--grijs); }
.dienst-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.93rem; }
.dienst-punten li { display: flex; gap: 0.6rem; }
.dienst-punten li::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; margin-top: 0.55rem; border-radius: 50%; background: var(--salie); }
.dienst-prijs {
  margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--lijn);
  display: flex; align-items: baseline; gap: 0.5rem;
}
.dienst-prijs span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grijs); }
.dienst-prijs b { font-family: var(--f-kop); font-size: 2rem; font-weight: 740; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* De bergtop uit het logo, die zichzelf tekent als je over een dienst beweegt */
.dienst-lijn { position: absolute; right: 0; bottom: 0; width: 60%; height: 2.4rem; }
.dienst-lijn path { fill: none; stroke: var(--salie); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.1s var(--boog); }
.dienst:hover .dienst-lijn path { stroke-dashoffset: 0; }
.diensten-voet { margin-top: 2rem; color: var(--grijs); }
.diensten-voet b { color: var(--mist); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) { .diensten-lijst { grid-template-columns: 1fr; } }

/* ---------- Verticaal ----------------------------------------------------- */

.verticaal {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
  perspective: 1400px;
}
.verticaal-tekst { max-width: 34rem; }
.verticaal-tekst .label { margin-bottom: 1.2rem; }
.verticaal-tekst .groot { margin-bottom: 1.6rem; }
.verticaal-tekst > p:not(.label) { color: var(--grijs); }

.telefoon {
  justify-self: center; position: relative;
  width: min(19rem, 72vw); aspect-ratio: 9 / 19.2; max-width: 100%;
  padding: 0.7rem; border-radius: 2.6rem;
  background: linear-gradient(145deg, #2a322d, #121714);
  box-shadow: 0 0 0 1px rgba(233, 239, 233, 0.1), 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(153, 186, 161, 0.35);
  transform-style: preserve-3d;
}
.telefoon-scherm { position: relative; width: 100%; height: 100%; border-radius: 2rem; overflow: hidden; background: #000; }
.telefoon-scherm video { width: 100%; height: 100%; object-fit: cover; }
.telefoon-scherm::before {
  content: ""; position: absolute; top: 0.6rem; left: 50%; z-index: 1;
  width: 5.2rem; height: 1.45rem; margin-left: -2.6rem; border-radius: 1rem; background: #000;
}
.telefoon-geluid {
  position: absolute; left: 50%; bottom: -3.4rem; transform: translateX(-50%);
  background: transparent; border: 1px solid var(--lijn-sterk); border-radius: 999px;
  padding: 0.45rem 1rem; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.telefoon-geluid[aria-pressed="true"] { border-color: var(--salie); color: var(--salie); }

@media (max-width: 860px) {
  .verticaal { grid-template-columns: 1fr; }
  .telefoon { margin-bottom: 3rem; }
}

/* ---------- 360-tours ----------------------------------------------------- */

.tours {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
  background: var(--grond);
}
.tours-beeld {
  position: relative; aspect-ratio: 16 / 10; max-width: 100%;
  border-radius: 12px; overflow: hidden; background: var(--nacht);
  border: 1px solid var(--lijn);
}
.tours-doek, .tours-reserve { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tours-reserve { display: none; opacity: 0.6; filter: grayscale(0.6); }
.geen-wolk .tours-reserve { display: block; }
.tours-badge {
  position: absolute; left: 1rem; top: 1rem;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: 4px; background: var(--amber); color: var(--nacht); font-weight: 500;
}
.tours-tekst .label { margin-bottom: 1.2rem; }
.tours-tekst .groot { margin-bottom: 1.6rem; }
.tours-tekst > p:not(.label) { color: var(--grijs); max-width: 34rem; }
.tours-tekst .knop { margin-top: 2rem; }

@media (max-width: 860px) { .tours { grid-template-columns: 1fr; } }

/* ---------- Over ---------------------------------------------------------- */

.over { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.over-tekst .label { margin-bottom: 1.2rem; }
.over-tekst .groot { margin-bottom: 1.8rem; }
.over-tekst > p:not(.label) { color: var(--mist); opacity: 0.86; max-width: 38rem; }
.over-feiten { margin: 0; display: grid; }
.over-feiten div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--lijn); }
.over-feiten div:last-child { border-bottom: 1px solid var(--lijn); }
.over-feiten dt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--salie); padding-top: 0.2rem; }
.over-feiten dd { margin: 0; }

@media (max-width: 860px) { .over { grid-template-columns: 1fr; } }

/* ---------- Offerte ------------------------------------------------------- */

.offerte { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); border-top: 1px solid var(--lijn); }
.offerte-kop .label { margin-bottom: 1.2rem; }
.offerte-kop .groot { margin-bottom: 1.6rem; }
.offerte-kop > p:not(.label) { color: var(--grijs); max-width: 28rem; }
.offerte-contact { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: 0.4rem; }
.offerte-contact a { text-decoration: none; font-family: var(--f-kop); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem); font-weight: 620; letter-spacing: -0.02em; }
.offerte-contact a:hover { color: var(--salie); }

.formulier { display: grid; gap: 2rem; }
.keuzes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.keuzes legend { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grijs); margin-bottom: 0.9rem; padding: 0; }
.keuzes label { position: relative; cursor: pointer; }
.keuzes input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuzes span {
  display: inline-block; padding: 0.6rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--lijn-sterk); font-size: 0.92rem; transition: all 0.25s;
}
.keuzes input:checked + span { background: var(--salie); border-color: var(--salie); color: var(--nacht); font-weight: 600; }
.keuzes input:focus-visible + span { outline: 2px solid var(--salie); outline-offset: 3px; }

.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.veld { display: grid; gap: 0.4rem; }
.veld-breed { grid-column: 1 / -1; }
.veld > span { font-size: 0.85rem; color: var(--grijs); }
.veld em { font-style: normal; opacity: 0.7; }
.veld input, .veld textarea {
  width: 100%; background: transparent; color: var(--mist);
  border: 0; border-bottom: 1px solid var(--lijn-sterk); border-radius: 0;
  padding: 0.55rem 0; font: inherit; font-size: 1.05rem;
  transition: border-color 0.3s;
}
.veld textarea { resize: vertical; min-height: 6rem; }
.veld input:focus, .veld textarea:focus { outline: none; border-bottom-color: var(--salie); }
.veld input::placeholder { color: rgba(149, 162, 152, 0.6); }
.veld.fout input, .veld.fout textarea { border-bottom-color: var(--amber); }
.honingpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulier-voet { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.formulier-melding { color: var(--grijs); font-size: 0.93rem; max-width: 32rem; }
.formulier-melding.goed { color: var(--salie); }
.formulier-melding a { color: var(--salie); }
.formulier-privacy { font-size: 0.82rem; color: var(--grijs); margin-top: -1rem; }
.formulier-privacy a { color: var(--mist); text-underline-offset: 3px; }

@media (max-width: 980px) { .offerte { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .velden { grid-template-columns: 1fr; } }

/* ---------- Voet ---------------------------------------------------------- */

.voet { padding-block: 2rem 2.5rem; padding-inline: var(--rand); border-top: 1px solid var(--lijn); overflow: hidden; }
.voet-logo { width: 100%; height: auto; opacity: 0.1; margin-bottom: 1.5rem; }
.voet-rij { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--grijs); }
.voet-rij a { text-decoration: none; }
.voet-rij a:hover, .voet-rij .linkknop:hover { color: var(--salie); }

/* ---------- Vensters ------------------------------------------------------ */

dialog { color: var(--mist); }
dialog::backdrop { background: rgba(5, 7, 6, 0.92); backdrop-filter: blur(6px); }

.bioscoop {
  width: min(96vw, 110rem); max-width: none; max-height: 96vh; padding: 0; border: 0;
  background: transparent; overflow: visible;
}
.bioscoop-kader { display: grid; gap: 1rem; }
.bioscoop-video { width: 100%; max-height: 80vh; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; }
.bioscoop-info { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; align-items: flex-end; }
.bioscoop-info h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); font-weight: 720; letter-spacing: -0.025em; margin-top: 0.4rem; }
.bioscoop-info > p { max-width: 38rem; color: var(--grijs); }
.bioscoop-sluit {
  position: fixed; right: 1rem; top: 1rem;
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--lijn-sterk);
  background: rgba(10, 13, 11, 0.7); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.bioscoop-sluit:hover { border-color: var(--salie); color: var(--salie); }

.loginvenster {
  width: min(92vw, 30rem); padding: 2rem; border-radius: 14px;
  border: 1px solid var(--lijn-sterk); background: var(--paneel);
}
.loginvenster h3 { font-size: 1.8rem; font-weight: 720; letter-spacing: -0.025em; margin: 0.8rem 0 1rem; }
.loginvenster p:not(.label) { color: var(--grijs); }
.loginvenster form { margin-top: 1.6rem; }

/* ---------- Minder beweging ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .korrel { display: none; }
  .js .vlucht-tekst { opacity: 1; position: relative; }
  .vlucht-teksten { display: grid; gap: 3rem; }
}

/* ==========================================================================
   Klantportaal en teamportaal (/klant/ en /team/)
   Rustiger dan de voorpagina: hier komt iemand om iets te doen.
   ========================================================================== */

.subpagina { min-height: 100svh; background: var(--nacht); }
.portaalpagina {
  max-width: 76rem; margin-inline: auto;
  padding-block: clamp(7rem, 12vw, 9rem) 5rem;
  padding-inline: var(--rand);
}
.portaalpagina .label { margin-bottom: 1rem; }
.pp-inlog { max-width: 36rem; }
.pp-inlog .groot { margin-bottom: 1.4rem; }
.pp-uitleg { color: var(--grijs); max-width: 40rem; }
.pp-formulier { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
.pp-onthoud { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--grijs); cursor: pointer; }
.pp-onthoud input { accent-color: var(--salie); width: 1rem; height: 1rem; }
.pp-knoppenrij { margin-top: 2rem; }
.pp-hulp { margin-top: 2.4rem; font-size: 0.9rem; color: var(--grijs); }
.pp-hulp a { color: var(--mist); text-underline-offset: 3px; }

.pp-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.pp-knoppen { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pp-leeg { color: var(--grijs); font-size: 0.93rem; }

.pp-projecten { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.pp-project {
  display: grid; gap: 0.5rem; padding: 1.3rem 1.4rem;
  border: 1px solid var(--lijn); border-radius: 12px; background: var(--paneel);
  text-decoration: none; transition: border-color 0.3s, transform 0.4s var(--boog);
}
.pp-project:hover { border-color: rgba(153, 186, 161, 0.55); transform: translateY(-2px); }
.pp-project .label { margin: 0; }
.pp-project h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.pp-project-boven { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.pp-project-onder { color: var(--grijs); font-size: 0.9rem; }
.pp-status {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: 4px; border: 1px solid var(--lijn-sterk); color: var(--mist);
}
.pp-status-goedgekeurd { border-color: var(--salie); color: var(--salie); }
.pp-status-wijzigingen { border-color: var(--amber); color: var(--amber); }

.pp-rijen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.pp-blok { border: 1px solid var(--lijn); border-radius: 12px; background: var(--paneel); padding: 1.4rem; min-width: 0; box-shadow: 0 1px 2px rgba(20, 32, 25, 0.04); }
.pp-blok-breed { grid-column: 1 / -1; }
.pp-blok h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1rem; }
.pp-lijst { list-style: none; margin: 0; padding: 0; display: grid; }
.pp-lijst li { display: grid; gap: 0.15rem; padding-block: 0.7rem; border-top: 1px solid var(--lijn); }
.pp-lijst li:first-child { border-top: 0; padding-top: 0; }
.pp-lijst b { font-weight: 600; }
.pp-lijst span { color: var(--grijs); font-size: 0.9rem; overflow-wrap: anywhere; }
.pp-lijst a { color: var(--salie); }

.pp-dag + .pp-dag { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--lijn); }
.pp-dagkop { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--salie); margin-bottom: 0.6rem; }
.pp-dienst { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-block: 0.35rem; }
.pp-tijd { font-family: var(--f-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.pp-wat { display: grid; gap: 0.1rem; }
.pp-wat span { color: var(--grijs); font-size: 0.9rem; }

.pp-beheer { margin-top: 1.4rem; padding: 1.2rem; border-radius: 14px; border: 1px solid rgba(47, 107, 76, 0.28); background: rgba(47, 107, 76, 0.07); }
.pp-beheer .pp-rijen { margin-top: 1rem; }
.pp-beheer .pp-blok { background: var(--paneel); }
.pp-tellers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pp-teller { display: grid; gap: 0.2rem; }
.pp-teller b { font-family: var(--f-kop); font-size: 2.4rem; font-weight: 760; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pp-teller span { color: var(--grijs); font-size: 0.88rem; }
.pp-teller-knop { align-content: center; justify-items: end; }

@media (max-width: 760px) {
  .pp-rijen, .pp-tellers { grid-template-columns: 1fr; }
  .pp-teller-knop { justify-items: start; }
  .pp-dienst { grid-template-columns: 1fr; gap: 0.1rem; }
}
.subpagina .kop-acties > .knop-spook { display: inline-flex; }

/* Een pagina met lopende tekst, zoals de privacyverklaring */
.tekstpagina { max-width: 46rem; }
.tekstpagina .groot { margin-bottom: 2.4rem; }
.tekstpagina h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; margin: 2.2rem 0 0.6rem; }
.tekstpagina p { color: var(--mist); opacity: 0.86; }
.tekstpagina a { color: var(--salie); text-underline-offset: 3px; }
.tekstpagina .klein { margin-top: 3rem; }


/* ==========================================================================
   Rustiger (1 oktober): de kop staat altijd, met een eigen ondergrond, een
   groter logo en Inloggen. Minder lagen beweging in de opening.
   ========================================================================== */

.kop {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lijn);
  box-shadow: 0 1px 12px rgba(20, 32, 25, 0.05);
  padding-block: 0.8rem;
}
.kop.vast { padding-block: 0.6rem; }
.kop.weg { transform: none; }
.kop-logo img { width: clamp(8.5rem, 11vw, 11rem); }

.held-titel { font-size: clamp(3rem, 0.8rem + 9.5vw, 9.5rem); }

.inlog { position: relative; }
.inlog-knop svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.3s var(--boog); }
.inlog-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.inlog-menu {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 60;
  width: 19rem; max-width: calc(100vw - 2rem); padding: 0.45rem;
  display: grid; gap: 0.2rem;
  border-radius: 12px; border: 1px solid var(--lijn-sterk);
  background: var(--paneel); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}
.inlog-menu[hidden] { display: none; }
.inlog-menu a { display: grid; gap: 0.15rem; padding: 0.75rem 0.9rem; border-radius: 8px; text-decoration: none; }
.inlog-menu a:hover, .inlog-menu a:focus-visible { background: rgba(153, 186, 161, 0.1); }
.inlog-menu b { font-weight: 600; }
.inlog-menu span { font-size: 0.85rem; color: var(--grijs); line-height: 1.4; }

.menu-inlog { display: flex; gap: 0.6rem; flex-wrap: wrap; }

@media (max-width: 560px) {
  .kop-acties > .knop-vol { display: none; }
  .inlog-menu { position: fixed; left: 1rem; right: 1rem; top: 4.4rem; width: auto; max-width: none; }
}


/* ==========================================================================
   Licht ontwerp (1 oktober, middag)
   ========================================================================== */

body { background: var(--nacht); color: var(--mist); }

/* De diensten als witte kaarten op de grijsgroene band */
.dienst { background: var(--paneel); box-shadow: 0 1px 2px rgba(20, 32, 25, 0.05); }
.dienst:hover { box-shadow: 0 18px 40px -24px rgba(20, 32, 25, 0.35); }

/* Het portfolio: een zachte schaduw onder het beeld in plaats van een zwart vlak */
.project-beeld { box-shadow: 0 18px 40px -28px rgba(20, 32, 25, 0.55); }

/* De voet: donkergroen, het merk */
.voet.donker { background: #13241b; border-top: 0; }
.voet.donker .voet-rij { color: var(--grijs); }

/* Inlogpagina's: formulier links, beeld met uitleg rechts */
.pp-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pp-paneel {
  position: relative; overflow: hidden; border-radius: 16px; min-height: 30rem;
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--grond);
}
.pp-paneel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-paneel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10, 13, 11, 0.92) 8%, rgba(10, 13, 11, 0.45) 55%, rgba(10, 13, 11, 0.1) 100%);
}
.pp-paneel > *:not(img) { position: relative; z-index: 1; }
.pp-paneel h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 1rem; }
.pp-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; counter-reset: stap; }
.pp-stappen li { display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.6rem; color: rgba(233, 239, 233, 0.86); font-size: 0.95rem; counter-increment: stap; }
.pp-stappen li::before {
  content: counter(stap); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid var(--salie); color: var(--salie); font-family: var(--f-mono); font-size: 0.75rem;
}
.pp-formulier .veld input { background: var(--paneel); border: 1px solid var(--lijn-sterk); border-radius: 8px; padding: 0.75rem 0.9rem; }
.pp-formulier .veld input:focus { border-color: var(--salie); }
@media (max-width: 900px) {
  .pp-twee { grid-template-columns: 1fr; }
  .pp-paneel { min-height: 20rem; }
}
.pp-inlog.pp-twee { max-width: none; }
.pp-twee .pp-uitleg { max-width: 34rem; }

/* De vaste kop blijft wit, ook na scrollen en op de subpagina's */
.kop.vast { background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid var(--lijn); }
/* Labels die op beeld liggen houden lichte tekst */
.project-speel, .project-duur { color: #f2f5f2; }

/* De voet: drie kolommen in plaats van een groot logo */
.voet { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.voet-kolommen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--lijn); }
.voet-merk img { width: 11rem; height: auto; margin-bottom: 1.2rem; }
.voet-merk p { color: var(--grijs); max-width: 24rem; font-size: 0.95rem; }
.voet-kolommen .label { margin-bottom: 1rem; }
.voet-kolommen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.voet-kolommen a { text-decoration: none; color: var(--mist); }
.voet-kolommen a:hover { color: var(--salie); }
.voet .voet-rij { padding-top: 1.5rem; }
@media (max-width: 760px) { .voet-kolommen { grid-template-columns: 1fr; gap: 2rem; } }

/* ==========================================================================
   Websitebeheer (/beheer/)
   ========================================================================== */

.beheerpagina .portaalpagina { max-width: 40rem; }
.bh { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; max-width: 84rem; margin-inline: auto; padding: 6.5rem var(--rand) 7rem; }
.bh-zijbalk { position: sticky; top: 6rem; align-self: start; display: grid; gap: 0.4rem; }
.bh-zijbalk .label { margin-bottom: 0.4rem; }
.bh-zijbalk-kop { margin-top: 1.4rem; }
.bh-paginas, .bh-groepen { display: grid; gap: 0.15rem; }
.bh-pagina {
  text-align: left; padding: 0.6rem 0.8rem; border-radius: 8px; border: 0; background: transparent;
  font-weight: 500; cursor: pointer; color: var(--mist);
}
.bh-pagina:hover { background: var(--grond); }
.bh-pagina.aan { background: var(--woud); color: #fff; }
.bh-groepen a { padding: 0.35rem 0.8rem; font-size: 0.9rem; color: var(--grijs); text-decoration: none; border-radius: 6px; }
.bh-groepen a:hover { color: var(--mist); background: var(--grond); }

.bh-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.bh-kop h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 760; letter-spacing: -0.03em; }
.bh-kop .label { margin-bottom: 0.4rem; }
.bh-uitleg { margin: 1rem 0 1.4rem; color: var(--grijs); max-width: 46rem; }
.bh-melding { padding: 0.8rem 1rem; border-radius: 10px; background: rgba(47, 107, 76, 0.1); color: var(--woud); margin-bottom: 1.2rem; }
.bh-melding.fout { background: rgba(184, 106, 18, 0.12); color: #7a4307; }

.bh-groep { background: var(--paneel); border: 1px solid var(--lijn); border-radius: 14px; padding: 1.4rem; margin-bottom: 1.2rem; scroll-margin-top: 6rem; box-shadow: 0 1px 2px rgba(20, 32, 25, 0.04); }
.bh-groep h2 { font-size: 1.25rem; font-weight: 720; letter-spacing: -0.015em; margin-bottom: 1rem; }
.bh-veld { padding-block: 0.9rem; border-top: 1px solid var(--lijn); display: grid; gap: 0.45rem; }
.bh-veld:first-of-type { border-top: 0; padding-top: 0.2rem; }
.bh-veld.gewijzigd { box-shadow: inset 3px 0 0 var(--salie); padding-left: 0.8rem; }
.bh-veld-kop { display: flex; align-items: center; gap: 0.6rem; }
.bh-veld-kop label { font-weight: 600; font-size: 0.93rem; }
.bh-status { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 4px; }
.bh-status:empty { display: none; }
.bh-status.aangepast { background: rgba(47, 107, 76, 0.12); color: var(--salie); }
.bh-status.nieuw { background: rgba(184, 106, 18, 0.14); color: #8a4f0b; }
.bh-herstel { margin-left: auto; border: 0; background: transparent; color: var(--grijs); font-size: 0.85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bh-herstel:hover { color: var(--mist); }
.bh-veld input[type="text"], .bh-veld textarea {
  width: 100%; font: inherit; color: var(--mist); background: var(--nacht);
  border: 1px solid var(--lijn-sterk); border-radius: 8px; padding: 0.65rem 0.8rem; resize: vertical;
}
.bh-veld input[type="text"]:focus, .bh-veld textarea:focus { outline: none; border-color: var(--salie); background: #fff; }
.bh-origineel { font-size: 0.8rem; color: var(--grijs); }

.bh-beeld { width: min(100%, 26rem); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--grond); display: grid; place-items: center; color: var(--grijs); font-size: 0.9rem; }
.bh-beeld img, .bh-beeld video { width: 100%; height: 100%; object-fit: cover; }
.bh-beeld-acties { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; position: relative; }
.bh-beeld-acties input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bh-kies { cursor: pointer; }
.bh-kies.bezig { opacity: 0.6; pointer-events: none; }
.bh-beeld-acties input[type="file"]:focus-visible + .bh-kies { outline: 2px solid var(--salie); outline-offset: 3px; }
.bh-voortgang { width: 10rem; height: 6px; border-radius: 3px; background: var(--grond); overflow: hidden; }
.bh-voortgang i { display: block; height: 100%; width: 0; background: var(--salie); transition: width 0.2s; }
.bh-tip { font-size: 0.8rem; color: var(--grijs); }

.bh-balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.8rem var(--rand); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--lijn);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.bh-balk p { color: var(--grijs); font-size: 0.93rem; }
.bh-balk.vol { background: #eef6f1; border-top-color: rgba(47, 107, 76, 0.4); }
.bh-balk.vol p { color: var(--woud); font-weight: 600; }
.bh-balk-knoppen { display: flex; gap: 0.6rem; }
.knop:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 860px) {
  .bh { grid-template-columns: 1fr; padding-top: 6rem; }
  .bh-zijbalk { position: static; }
  .bh-groepen, .bh-zijbalk-kop { display: none; }
  .bh-paginas { display: flex; flex-wrap: wrap; gap: 0.3rem; }
}