/* ==========================================================================
   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; }
}

/* ==========================================================================
   Een pagina per dienst (1 oktober, avond)
   De knoppen gaan naar echte pagina's in plaats van omlaag te scrollen. Hier de
   onderdelen die die pagina's delen: het uitklapmenu, de paginakop met kruimelpad,
   prijskaarten, vragen, de afsluiter en de 3D-viewer.
   ========================================================================== */

/* ---------- Menu: Diensten klapt uit -------------------------------------- */

.kop-nav { align-items: center; }
.kop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.kop-sub { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.kop-sub-knop {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--mist);
}
.kop-sub-knop:hover { background: var(--grond); }
.kop-sub-knop svg { width: 0.7rem; height: 0.7rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.3s var(--boog); }
.kop-submenu {
  position: absolute; left: -1rem; top: calc(100% + 0.9rem); z-index: 60;
  width: 21rem; padding: 0.45rem; display: grid; gap: 0.15rem;
  border-radius: 12px; border: 1px solid var(--lijn-sterk); background: var(--paneel);
  box-shadow: 0 24px 60px -24px rgba(20, 32, 25, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.25s var(--boog), visibility 0s linear 0.25s;
}
/* Een onzichtbare brug, zodat de muis van "Diensten" naar het menu kan zonder dat het sluit */
.kop-submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.kop-sub:hover .kop-submenu, .kop-sub.open .kop-submenu, .kop-sub:focus-within .kop-submenu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.kop-sub.open .kop-sub-knop svg, .kop-sub:hover .kop-sub-knop svg { transform: rotate(180deg); }
.kop-submenu a { display: grid; gap: 0.1rem; padding: 0.7rem 0.85rem; border-radius: 8px; text-decoration: none; }
.kop-submenu a::after { display: none; }
.kop-submenu a:hover, .kop-submenu a:focus-visible { background: rgba(47, 107, 76, 0.08); }
.kop-submenu b { font-weight: 600; font-size: 0.95rem; }
.kop-submenu span { font-size: 0.84rem; color: var(--grijs); }
.kop-submenu-alles { border-top: 1px solid var(--lijn); border-radius: 0 0 8px 8px; margin-top: 0.2rem; }
.kop-submenu-alles b { color: var(--salie); }

.menu { overflow-y: auto; }
.menu nav a { font-size: clamp(1.9rem, 8vw, 3rem); }
.menu nav a[aria-current="page"] { color: var(--salie); }
.menu nav a.menu-sub {
  font-family: var(--f-tekst); font-size: 1.1rem; font-weight: 500; letter-spacing: 0;
  padding: 0.45rem 0 0.45rem 1.2rem; border-bottom: 0; color: var(--grijs);
}
.menu nav a.menu-sub + a:not(.menu-sub) { border-top: 1px solid var(--lijn); }

/* ---------- De kop van een gewone pagina ----------------------------------- */

.paginakop {
  padding-block: clamp(7.5rem, 12vw, 9.5rem) clamp(2.5rem, 5vw, 4.5rem);
  padding-inline: var(--rand);
}
.paginakop-ruimte { padding-top: clamp(7.5rem, 12vw, 9.5rem); }
.kruimels ol {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 0.85rem; color: var(--grijs);
}
.kruimels li + li::before { content: "/"; margin-right: 0.5rem; color: var(--lijn-sterk); }
.kruimels a { color: var(--grijs); text-decoration: none; }
.kruimels a:hover { color: var(--salie); }
.kruimels [aria-current] { color: var(--mist); }

.paginakop-raster {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.paginakop-smal { grid-template-columns: minmax(0, 54rem); }
.paginakop-tekst > .label { margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.paginakop-intro { margin-top: 1.5rem; max-width: 38rem; color: var(--grijs); font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem); }
.paginakop-knoppen { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 2rem; }
.paginakop-beeld { margin: 0; display: grid; gap: 0.7rem; }
.paginakop-beeld video, .paginakop-beeld img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px;
  background: var(--grond); box-shadow: 0 30px 60px -36px rgba(20, 32, 25, 0.6);
}
.paginakop-beeld figcaption { font-size: 0.85rem; color: var(--grijs); }
.paginakop-compact { padding-bottom: 1.5rem; }
.paginakop-rij { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; }
.paginakop-rij .label { margin-bottom: 0.8rem; display: flex; gap: 0.6rem; align-items: center; }
@media (max-width: 900px) { .paginakop-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Koppen en blokken ---------------------------------------------- */

.middel {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  font-weight: 740; font-variation-settings: "opsz" 96;
  line-height: 1.02; letter-spacing: -0.03em;
}
.klein-kop { font-size: 1.3rem; font-weight: 720; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.sectie-grond { background: var(--grond); }
.sectie-strak { padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.sectie-kop .middel { max-width: 46rem; }

.blok-twee {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.blok-twee .label { margin-bottom: 1rem; }
.blok-tekst { margin-top: 1.2rem; max-width: 36rem; color: var(--grijs); }
@media (max-width: 860px) { .blok-twee { grid-template-columns: minmax(0, 1fr); } }

.vinkjes { list-style: none; margin: 0; padding: 0; display: grid; }
.vinkjes li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.8rem; align-items: start;
  padding-block: 0.95rem; border-top: 1px solid var(--lijn);
}
.vinkjes li:last-child { border-bottom: 1px solid var(--lijn); }
.vinkjes li::before {
  content: ""; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; border-radius: 50%;
  background: var(--salie) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M4 8.4l2.6 2.6L12 5.6%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

.tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.tegels li {
  display: grid; gap: 0.5rem; align-content: start; padding: clamp(1.2rem, 2vw, 1.6rem);
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 14px;
}
.tegels b { font-family: var(--f-kop); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.tegels span { color: var(--grijs); font-size: 0.95rem; }
@media (max-width: 1000px) { .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tegels { grid-template-columns: minmax(0, 1fr); } }

.stappen-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .stappen-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stappen-vier { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Prijs ---------------------------------------------------------- */

.prijskaart {
  display: grid; gap: 0.5rem; justify-items: start; padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 18px;
  box-shadow: 0 24px 50px -36px rgba(20, 32, 25, 0.5);
}
.prijskaart-bedrag { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.prijskaart-bedrag span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grijs); }
.prijskaart-bedrag b { font-family: var(--f-kop); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 760; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.prijskaart-klein { font-size: 0.85rem; color: var(--grijs); }
.prijskaart .knop { margin-top: 1rem; }

.tarieven { margin: 0; display: grid; }
.tarieven div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--lijn); }
.tarieven div:last-child { border-bottom: 1px solid var(--lijn); }
.tarieven dt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--salie); }
.tarieven dd { margin: 0; text-align: right; color: var(--grijs); }
.tarieven b { font-family: var(--f-kop); font-size: 1.9rem; font-weight: 740; letter-spacing: -0.03em; color: var(--mist); font-variant-numeric: tabular-nums; }

/* ---------- Veelgestelde vragen -------------------------------------------- */

.vragen { max-width: 54rem; }
.vragen details { border-top: 1px solid var(--lijn); }
.vragen details:last-child { border-bottom: 1px solid var(--lijn); }
.vragen summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 1.25rem 3rem 1.25rem 0;
  font-family: var(--f-kop); font-size: clamp(1.08rem, 1rem + 0.3vw, 1.25rem); font-weight: 650; letter-spacing: -0.01em;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after {
  content: "+"; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--f-tekst); font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--salie);
  transition: transform 0.3s var(--boog);
}
.vragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.vragen summary:hover { color: var(--salie); }
.vragen details p { padding-bottom: 1.4rem; max-width: 46rem; color: var(--grijs); }

/* ---------- Ook interessant ------------------------------------------------ */

.ook { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--lijn); }
.ook > .label { margin-bottom: 1.2rem; }
.ook-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ook-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ook-lijst a {
  display: grid; gap: 0.25rem; padding: 1.2rem 1.3rem; text-decoration: none;
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 12px;
  transition: border-color 0.3s, transform 0.4s var(--boog);
}
.ook-lijst a:hover { border-color: var(--salie); transform: translateY(-2px); }
.ook-lijst b { font-weight: 650; }
.ook-lijst b::after { content: "  \2192"; color: var(--salie); }
.ook-lijst span { color: var(--grijs); font-size: 0.9rem; }
@media (max-width: 1000px) { .ook-lijst, .ook-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ook-lijst, .ook-vier { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Afsluiter ------------------------------------------------------ */

.cta { padding: clamp(4rem, 9vw, 7rem) var(--rand); background: var(--woud); }
.cta-binnen { max-width: 62rem; }
.cta .label { margin-bottom: 1.2rem; }
.cta-tekst { margin-top: 1.5rem; max-width: 34rem; color: rgba(233, 239, 233, 0.82); }
.cta-knoppen { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------- Dienstkaarten op de homepage ----------------------------------- */

.dienstkaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dienstkaart {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 32, 25, 0.05);
  transition: transform 0.6s var(--boog), box-shadow 0.4s, border-color 0.4s;
}
.dienstkaart:hover { transform: translateY(-4px); border-color: rgba(47, 107, 76, 0.35); box-shadow: 0 22px 44px -26px rgba(20, 32, 25, 0.45); }
.dienstkaart-beeld { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grond); }
.dienstkaart-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--boog); }
.dienstkaart:hover .dienstkaart-beeld img { transform: scale(1.05); }
.dienstkaart-tekst { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.3rem 1.3rem; }
.dienstkaart-tekst > b { font-family: var(--f-kop); font-size: 1.35rem; font-weight: 720; letter-spacing: -0.02em; line-height: 1.1; }
.dienstkaart-uitleg { color: var(--grijs); font-size: 0.93rem; }
.dienstkaart-voet {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--lijn);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.85rem; color: var(--grijs);
}
.dienstkaart-voet b { font-family: var(--f-kop); font-size: 1.35rem; font-weight: 740; letter-spacing: -0.02em; color: var(--mist); }
.pijl { color: var(--salie); font-size: 1.2rem; transition: transform 0.4s var(--boog); }
.dienstkaart:hover .pijl { transform: translateX(4px); }
.diensten-voet a { color: var(--salie); text-underline-offset: 3px; margin-left: 0.3rem; }
@media (max-width: 1100px) { .dienstkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dienstkaarten { grid-template-columns: minmax(0, 1fr); } }

.badge {
  position: absolute; left: 0.8rem; top: 0.8rem; z-index: 1;
  font-family: var(--f-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: 4px; background: var(--amber); color: #fff;
}
.badge-in-tekst { position: static; display: inline-block; }

/* ---------- Alle diensten onder elkaar ------------------------------------- */

.dienstrijen { display: grid; gap: 1rem; }
.dienstrij {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) minmax(0, 13rem);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; padding: 1.1rem;
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 18px;
}
.dienstrij-beeld img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.dienstrij-tekst h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.05; margin: 0.4rem 0 0.7rem; }
.dienstrij-tekst h2 a { text-decoration: none; }
.dienstrij-tekst h2 a:hover { color: var(--salie); }
.dienstrij-tekst > p:not(.label) { color: var(--grijs); max-width: 40rem; }
.dienstrij .dienst-punten { margin-top: 1rem; }
.dienstrij-prijs { display: grid; gap: 1rem; justify-items: start; }
.dienstrij-prijs p { display: flex; align-items: baseline; gap: 0.5rem; }
.dienstrij-prijs span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grijs); }
.dienstrij-prijs b { font-family: var(--f-kop); font-size: 2rem; font-weight: 740; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
  .dienstrij { grid-template-columns: minmax(0, 1fr); padding: 1rem 1rem 1.4rem; }
}

/* ---------- 360-tours en modellen ------------------------------------------ */

.twee-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vormkaart {
  display: grid; gap: 0.8rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 18px;
}
.vormkaart h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.08; }
.vormkaart p:not(.label) { color: var(--grijs); }
@media (max-width: 760px) { .twee-kaarten { grid-template-columns: minmax(0, 1fr); } }

.modellen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.modelkaart {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none;
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 16px;
  transition: transform 0.6s var(--boog), box-shadow 0.4s;
}
.modelkaart:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(20, 32, 25, 0.45); }
.modelkaart-beeld { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grond); }
.modelkaart-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--boog); }
.modelkaart:hover .modelkaart-beeld img { transform: scale(1.05); }
.modelkaart-tekst { display: grid; gap: 0.35rem; padding: 1.1rem 1.2rem 1.3rem; }
.modelkaart-tekst b { font-family: var(--f-kop); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.modelkaart-tekst span { color: var(--grijs); font-size: 0.92rem; }
.modelkaart-leeg { background: transparent; border-style: dashed; border-color: var(--lijn-sterk); }
.modelkaart-leeg .modelkaart-beeld { display: grid; place-items: center; background: transparent; }
.modelkaart-plus { font-family: var(--f-kop); font-size: 3.4rem; font-weight: 300; color: var(--salie); }
@media (max-width: 1000px) { .modellen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .modellen { grid-template-columns: minmax(0, 1fr); } }

.modelvak-sectie { padding: 0 var(--rand) clamp(3rem, 6vw, 5rem); }
.modelvak { height: min(76svh, 50rem); min-height: 24rem; border-radius: 18px; overflow: hidden; }
.modelvak-groot .modelvak { height: calc(100svh - 12rem); min-height: 26rem; }
.modelvak-onder { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.2rem; }
.modelvak-onder p { color: var(--grijs); max-width: 44rem; }

/* Het hologram (assets/js/hologram.js): een gebouw als lichtende puntenwolk, met een
   raster als vloer. Je loopt erdoorheen met WASD of de pijltjes. */
.hologram {
  position: relative; isolation: isolate; -webkit-user-select: none; user-select: none;
  background: radial-gradient(ellipse 80% 70% at 50% 62%, #0f2a1e 0%, #07130d 62%, #050c08 100%);
}
.hologram-doek { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.hologram-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9;
  transition: opacity 0.6s var(--boog);
}
.hologram-klaar .hologram-poster { opacity: 0; pointer-events: none; }
.hologram-start {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 2;
  display: grid; gap: 0.35rem; justify-items: center; max-width: min(26rem, calc(100% - 2rem));
  padding: 1.1rem 1.6rem; border-radius: 16px; cursor: pointer; text-align: center;
  font: inherit; color: #eafff4; background: rgba(6, 22, 15, 0.72);
  border: 1px solid rgba(124, 228, 178, 0.55); box-shadow: 0 0 40px rgba(80, 220, 160, 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.hologram-start:hover, .hologram-start:focus-visible {
  border-color: #9df0c8; box-shadow: 0 0 56px rgba(80, 220, 160, 0.32); outline: none;
}
.hologram-start-tekst { font-family: var(--f-kop); font-size: 1.25rem; font-weight: 650; }
.hologram-start-uitleg { font-size: 0.86rem; color: rgba(234, 255, 244, 0.75); }
.hologram-actief .hologram-start { opacity: 0; pointer-events: none; }
/* Alleen draaien: de knop is er alleen als het hologram niet vanzelf laadt (databesparing) */
.hologram-draai .hologram-start { display: none; }
.hologram-draai.hologram-handmatig .hologram-start { display: grid; }
.hologram-status {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0; padding: 0.4rem 0.7rem;
  border-radius: 8px; font-size: 0.82rem; color: #d8f7e8; background: rgba(6, 22, 15, 0.7);
}
.hologram-status:empty { display: none; }
.hologram-hint {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2; margin: 0;
  padding: 0.45rem 0.85rem; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: #cdf5e2;
  background: rgba(6, 22, 15, 0.72); border: 1px solid rgba(124, 228, 178, 0.3);
  opacity: 0; transition: opacity 0.4s;
}
.hologram-actief.hologram-klaar .hologram-hint { opacity: 1; }
.hologram-knop {
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: #eafff4;
  padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid rgba(124, 228, 178, 0.45);
  background: rgba(6, 22, 15, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hologram-knop:hover { border-color: #9df0c8; }
.hologram-scherm { position: absolute; right: 1rem; top: 1rem; z-index: 2; }
.hologram-touch { display: none; }
@media (pointer: coarse) {
  .hologram-hint { display: none; }
  .hologram-actief .hologram-touch {
    position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: grid; gap: 0.35rem;
    grid-template-columns: repeat(3, 3rem); grid-template-areas: ". op ." "li ne re";
  }
  .hologram-touch .hologram-knop { width: 3rem; height: 3rem; padding: 0; font-size: 1rem; touch-action: none; }
  .hologram-touch-vooruit { grid-area: op; }
  .hologram-touch-links { grid-area: li; }
  .hologram-touch-achteruit { grid-area: ne; }
  .hologram-touch-rechts { grid-area: re; }
}
.hologram-geen-webgl .hologram-poster { opacity: 1; }
.hologram-titel {
  position: absolute; left: 1rem; top: 1rem; z-index: 2; margin: 0; max-width: calc(100% - 13rem);
  padding: 0.45rem 0.8rem; border-radius: 10px; font-family: var(--f-kop); font-weight: 650; font-size: 0.95rem;
  color: #eafff4; background: rgba(6, 22, 15, 0.6); pointer-events: none;
}
.hologram-deel-knop { position: absolute; right: 9.6rem; top: 1rem; z-index: 3; }
.hologram-deelvak {
  position: absolute; right: 1rem; top: 3.8rem; z-index: 4; width: min(26rem, calc(100% - 2rem));
  display: grid; gap: 0.5rem; padding: 1rem; border-radius: 14px; color: #eafff4;
  background: rgba(6, 22, 15, 0.92); border: 1px solid rgba(124, 228, 178, 0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hologram-deelvak[hidden] { display: none; }
.hologram-deel-kop { margin: 0; font-family: var(--f-kop); font-weight: 650; }
.hologram-deel-label { margin: 0.3rem 0 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9df0c8; }
.hologram-deel-rij { display: flex; gap: 0.5rem; }
.hologram-deel-veld {
  flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 0.74rem; color: #eafff4; resize: none;
  padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid rgba(124, 228, 178, 0.35); background: rgba(0, 0, 0, 0.35);
}
.hologram-deel-code { width: 100%; }
.hologram-deel-uitleg { margin: 0; font-size: 0.78rem; color: rgba(234, 255, 244, 0.75); }
.hologram-deelvak .hologram-knop { justify-self: start; }

/* De losse pagina /hologram/<naam>/: het hologram over het hele scherm, ook in een iframe */
.hologram-pagina { margin: 0; overflow: hidden; background: #050c08; }
.hologram-vol, .model3d.hologram-vol { position: fixed; inset: 0; border-radius: 0; }
.hologram-merk {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 5; padding: 0.4rem 0.75rem; border-radius: 999px;
  font-size: 0.75rem; color: #cdf5e2; text-decoration: none; background: rgba(6, 22, 15, 0.7);
  border: 1px solid rgba(124, 228, 178, 0.3);
}
.hologram-merk:hover { color: #ffffff; border-color: #9df0c8; }
.hologram-pagina .hologram-status { bottom: 3.6rem; }
@media (max-width: 640px) {
  .hologram-deel-knop { right: 1rem; top: 3.6rem; }
  .hologram-deelvak { top: 6.4rem; }
  .hologram-titel { max-width: calc(100% - 9rem); font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { .hologram-poster, .hologram-start { transition: none; } }

/* De viewer zelf (assets/js/splat.js) */
.model3d { position: relative; isolation: isolate; background: #0d1210; -webkit-user-select: none; user-select: none; }
/* Een model uit een 360-opname heeft vaak geen lucht: daar komt de lucht van de pagina */
.model3d[data-modus="kijk"] { background: linear-gradient(180deg, #7fb0dc 0%, #b9d5ea 40%, #dde9e4 62%, #cfd9cc 100%); }
.model3d-reserve { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.9s; }
.model3d.klaar .model3d-reserve { opacity: 0; pointer-events: none; }
.model3d-doek {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: pan-y; cursor: grab; outline: none;
}
.model3d.bezig .model3d-doek { cursor: grabbing; }
.model3d-doek:focus-visible { box-shadow: inset 0 0 0 3px var(--salie); }
.model3d.volledig .model3d-doek { touch-action: none; }
.model3d:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }

.model3d-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: 0.6rem; justify-items: center; padding: 0.9rem 1.2rem; border-radius: 12px;
  background: rgba(10, 13, 11, 0.72); color: #e9efe9; pointer-events: none;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: opacity 0.5s;
}
.model3d.klaar .model3d-status { left: 1rem; top: 1rem; transform: none; padding: 0.5rem 0.8rem; justify-items: start; }
.model3d.compleet .model3d-status, .model3d.geen-3d .model3d-status { opacity: 0; }
.model3d-balk { display: block; width: 9rem; height: 2px; background: rgba(233, 239, 233, 0.25); overflow: hidden; }
.model3d-balk i { display: block; height: 100%; background: #99baa1; transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }

.model3d-hint {
  position: absolute; left: 1rem; bottom: 1rem; margin: 0; max-width: calc(100% - 2rem);
  padding: 0.45rem 0.85rem; border-radius: 999px; pointer-events: none;
  background: rgba(10, 13, 11, 0.62); color: #e9efe9; font-size: 0.8rem; transition: opacity 0.4s, background 0.3s;
}
.model3d.hint-aan .model3d-hint { background: var(--woud); }
.model3d-knoppen {
  position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: flex-end;
  gap: 0.4rem; flex-wrap: wrap; max-width: calc(100% - 2rem);
}
.model3d-knop {
  font: inherit; font-size: 0.8rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 13, 11, 0.62); color: #f2f5f2;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.model3d-knop:hover { background: #99baa1; border-color: #99baa1; color: #0a0d0b; }
.model3d-schuif { width: 10rem; accent-color: #99baa1; cursor: pointer; }
.model3d:not(.klaar) .model3d-hint, .model3d:not(.klaar) .model3d-knoppen { opacity: 0; pointer-events: none; }
.model3d-geen { display: none; }
.model3d.geen-3d .model3d-geen {
  display: block; position: absolute; left: 1rem; bottom: 1rem; right: 1rem; margin: 0;
  padding: 0.6rem 0.9rem; border-radius: 10px; background: rgba(10, 13, 11, 0.7); color: #e9efe9; font-size: 0.85rem;
}
@media (max-width: 700px) {
  .model3d-hint { top: 1rem; bottom: auto; }
  .model3d.klaar .model3d-status { top: 3.6rem; }
  .model3d-schuif { width: 7rem; }
  .modelvak { height: 70svh; }
}
.model3d-knop:focus-visible { outline: 2px solid #99baa1; outline-offset: 2px; }

/* Een melding in beeld, zoals "Demo: de kwaliteit gaat nog omhoog". Staat in de HTML,
   voor het doek, dus met een z-index erboven. */
.model3d-demo {
  position: absolute; right: 1rem; top: 1rem; z-index: 2; margin: 0; max-width: calc(100% - 2rem);
  display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.85rem 0.3rem 0.3rem; border-radius: 999px;
  background: rgba(10, 13, 11, 0.7); color: #e9efe9; font-size: 0.8rem; line-height: 1.3; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.model3d-demo b {
  flex: none; padding: 0.2rem 0.6rem; border-radius: 999px; background: #99baa1; color: #0a0d0b;
  font-family: var(--f-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

/* Delen: de link en de iframe-code, boven de knoppen */
.model3d-deelvak {
  position: absolute; right: 1rem; bottom: 4.2rem; z-index: 4; width: min(26rem, calc(100% - 2rem));
  display: grid; gap: 0.5rem; padding: 1rem; border-radius: 14px; color: #e9efe9;
  background: rgba(10, 13, 11, 0.92); border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.model3d-deelvak[hidden] { display: none; }
.model3d-deel-kop { margin: 0; font-family: var(--f-kop); font-weight: 650; }
.model3d-deel-label { margin: 0.3rem 0 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #99baa1; }
.model3d-deel-rij { display: flex; gap: 0.5rem; }
.model3d-deel-veld {
  flex: 1; min-width: 0; width: 100%; font-family: var(--f-mono); font-size: 0.74rem; color: #e9efe9; resize: none;
  padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.35);
}
.model3d-deel-uitleg { margin: 0; font-size: 0.78rem; color: rgba(233, 239, 233, 0.75); }
.model3d-deelvak .model3d-knop { justify-self: start; }
@media (max-width: 700px) {
  .model3d-demo { left: 1rem; right: auto; font-size: 0.75rem; }
  .model3d-demo ~ .model3d-hint { top: 3.6rem; }
  .model3d.klaar .model3d-demo ~ .model3d-status { top: 6.2rem; }
  .model3d-deelvak { top: 1rem; bottom: auto; max-height: calc(100% - 5.5rem); overflow: auto; }
}
/* De losse pagina /3d/<naam>/: de merknaam staat linksonder, de uitleg erboven */
@media (min-width: 701px) { .hologram-pagina .model3d-hint { bottom: 3.6rem; } }

/* ---------- Kleine dingen -------------------------------------------------- */

.tours-beeld { display: block; }
.werk-links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.werk-voet .knop { margin-top: 0.4rem; }
.vragen-sectie .sectie-kop { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

/* De voet heeft vier kolommen: merk, diensten, website, contact */
.voet-kolommen { grid-template-columns: 1.3fr 1fr 0.9fr 0.8fr 1fr; }
@media (max-width: 1000px) { .voet-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .voet-kolommen { grid-template-columns: minmax(0, 1fr); } }

/* Zonder animatie toont het 360-blok op de homepage het stilstaande beeld van het 3D-model */
.geen-wolk .tours-reserve { opacity: 1; filter: none; }

/* Leesbaarheid (Lighthouse, toegankelijkheid): genoeg contrast overal */
.badge { background: #93500b; }
.veld em { opacity: 1; }
.tekstpagina p { opacity: 1; color: #2a3a31; }
.tekstpagina a { color: var(--salie-fel); }
/* Alleen voor schermlezers: een kop die de structuur klopt maakt zonder in beeld te staan */
.onzichtbaar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   De prijs naar oppervlak (FPV): staffel en rekenhulp
   ========================================================================== */

.staffel-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.staffel-tabel { overflow-x: auto; background: var(--paneel); border: 1px solid var(--lijn); border-radius: 18px; }
.staffel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.staffel th, .staffel td { padding: 1.05rem 1.25rem; text-align: left; vertical-align: baseline; border-top: 1px solid var(--lijn); transition: background 0.3s, color 0.3s; }
.staffel thead th {
  border-top: 0; padding-block: 0.9rem; font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grijs);
}
.staffel tbody th { font-family: var(--f-kop); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.staffel td { color: var(--grijs); }
.staffel .staffel-prijs { text-align: right; white-space: nowrap; }
.staffel-prijs b { font-family: var(--f-kop); font-size: 1.35rem; font-weight: 740; letter-spacing: -0.02em; color: var(--mist); }
.staffel tbody tr.actief { background: rgba(47, 107, 76, 0.08); }
.staffel tbody tr.actief th { color: var(--salie); box-shadow: inset 3px 0 0 var(--salie); }
.staffel-vinkjes { margin-top: 1.4rem; }
.staffel-vinkjes b { color: var(--mist); }

.rekenhulp {
  position: sticky; top: 6.5rem; display: grid; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 18px;
  box-shadow: 0 24px 50px -36px rgba(20, 32, 25, 0.5);
}
.rekenhulp-velden { display: grid; gap: 1rem; }
.rekenhulp .veld input[type="number"], .rekenhulp .veld select {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--mist);
  padding: 0.7rem 0.9rem; background: var(--nacht); border: 1px solid var(--lijn-sterk); border-radius: 10px;
}
.rekenhulp .veld input[type="number"]:focus, .rekenhulp .veld select:focus { outline: none; border-color: var(--salie); }
.rekenhulp-invoer { position: relative; display: block; }
.rekenhulp-invoer > span { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--grijs); pointer-events: none; }
.rekenhulp-invoer input { padding-right: 2.8rem; }
#rek-schuif { width: 100%; accent-color: var(--salie); margin: -0.3rem 0 0.2rem; cursor: pointer; }
.rekenhulp-uitkomst { display: grid; gap: 0.3rem; padding: 1.15rem 1.25rem; border-radius: 14px; background: var(--woud); color: #e9efe9; }
.rekenhulp-uitkomst .label { color: #b5d0bb; }
.rekenhulp-uitkomst b { font-family: var(--f-kop); font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.9rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rekenhulp-uitkomst > span:last-child { font-size: 0.86rem; color: rgba(233, 239, 233, 0.8); }
.rekenhulp .knop { justify-self: stretch; }
.rekenhulp-klein { font-size: 0.82rem; color: var(--grijs); }
.dienstrij-klein { font-size: 0.85rem; color: var(--grijs); margin-top: -0.6rem; }

/* In het offerteformulier: een keuzelijst die er net zo uitziet als de andere velden */
.veld select {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--mist);
  padding: 0.55rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--lijn-sterk); border-radius: 0;
}
.veld select:focus { outline: none; border-bottom-color: var(--salie); }

@media (max-width: 960px) {
  .staffel-raster { grid-template-columns: minmax(0, 1fr); }
  .rekenhulp { position: static; }
}
@media (max-width: 640px) {
  /* Op een telefoon: per formaat twee regels links en de prijs rechts ernaast */
  .staffel .staffel-voorbeeld { display: none; }
  .staffel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .staffel tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 1rem;
    padding: 0.95rem 1.1rem; border-top: 1px solid var(--lijn);
  }
  .staffel tbody tr:first-child { border-top: 0; }
  .staffel tbody th, .staffel tbody td { padding: 0; border: 0; }
  .staffel tbody th { grid-column: 1; grid-row: 1; }
  .staffel tbody td:nth-of-type(1) { grid-column: 1; grid-row: 2; font-size: 0.9rem; }
  .staffel tbody .staffel-prijs { grid-column: 2; grid-row: 1 / span 2; }
  .staffel tbody tr.actief th { box-shadow: none; }
  .staffel tbody tr.actief { box-shadow: inset 3px 0 0 var(--salie); }
}

/* ==========================================================================
   De 360-tour (assets/js/panorama.js) en de plattegrond (assets/js/kaart.js)
   ========================================================================== */

/* Vijf diensten op de homepage: vijf naast elkaar, of twee per rij met de laatste breed */
.dienstkaarten { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .dienstkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dienstkaarten > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dienstkaarten > :last-child:nth-child(odd) .dienstkaart-beeld { aspect-ratio: 16 / 7; }
}
@media (max-width: 600px) {
  .dienstkaarten { grid-template-columns: minmax(0, 1fr); }
  .dienstkaarten > :last-child:nth-child(odd) .dienstkaart-beeld { aspect-ratio: 16 / 10; }
}
.ook-lijst, .ook-vier { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ---------- De 360-tour ---------------------------------------------------- */

.tour { position: relative; isolation: isolate; background: #9cc3e2; -webkit-user-select: none; user-select: none; }
.tour-reserve { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s; }
.tour.klaar .tour-reserve { opacity: 0; pointer-events: none; }
.tour-doek { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; outline: none; }
.tour.bezig .tour-doek { cursor: grabbing; }
.tour-doek:focus-visible { box-shadow: inset 0 0 0 3px var(--salie); }
.tour.volledig .tour-doek { touch-action: none; }
.tour:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.tour.wisselt .tour-doek { opacity: 0.55; transition: opacity 0.3s; }
.tour-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  padding: 0.6rem 1rem; border-radius: 999px; background: rgba(10, 13, 11, 0.7); color: #e9efe9;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none;
}
.tour-status:empty { display: none; }
.tour-hint {
  position: absolute; left: 1rem; top: 1rem; margin: 0; max-width: calc(100% - 2rem);
  padding: 0.45rem 0.85rem; border-radius: 999px; pointer-events: none;
  background: rgba(10, 13, 11, 0.62); color: #e9efe9; font-size: 0.8rem; transition: background 0.3s;
}
.tour.hint-aan .tour-hint { background: var(--woud); }
.tour-knoppen {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap;
}
.tour-punten { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tour-punt, .tour-knop {
  font: inherit; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(10, 13, 11, 0.62); color: #f2f5f2;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tour-knop { margin-left: auto; }
.tour-punt[aria-pressed="true"] { background: #99baa1; border-color: #99baa1; color: #0a0d0b; }
.tour-punt:hover, .tour-knop:hover { border-color: #99baa1; }
.tour:not(.klaar) .tour-hint, .tour:not(.klaar) .tour-knoppen { opacity: 0; pointer-events: none; }
.tour-geen { display: none; }
.tour.geen-3d .tour-geen {
  display: block; position: absolute; left: 1rem; right: 1rem; bottom: 1rem; margin: 0;
  padding: 0.6rem 0.9rem; border-radius: 10px; background: rgba(10, 13, 11, 0.7); color: #e9efe9; font-size: 0.85rem;
}

/* ---------- De plattegrond ------------------------------------------------- */

.kaartvak-sectie { padding: 0 var(--rand) clamp(3rem, 6vw, 5rem); }
.kaart {
  position: relative; height: min(80svh, 54rem); min-height: 26rem; border-radius: 18px; overflow: hidden;
  background: #1c2620; isolation: isolate; -webkit-user-select: none; user-select: none;
}
.kaart-reserve { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.kaart.klaar .kaart-reserve { display: none; }
.kaart-vlak { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: grab; outline: none; }
.kaart.bezig .kaart-vlak { cursor: grabbing; }
.kaart.meet .kaart-vlak { cursor: crosshair; }
.kaart-vlak:focus-visible { box-shadow: inset 0 0 0 3px #99baa1; }
.kaart.volledig .kaart-vlak { touch-action: none; }
.kaart:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.kaart-inhoud { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.kaart-laag { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; image-rendering: auto; transition: opacity 0.35s; }
.kaart-laag.uit { opacity: 0; }
.kaart-meting-lijn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kaart-meting-lijn polyline { fill: none; stroke: #f2a93b; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kaart-meting-lijn polyline.halo { stroke: rgba(10, 13, 11, 0.75); stroke-width: 7; }
.kaart-meting-lijn polyline.gesloten { fill: rgba(242, 169, 59, 0.22); }
.kaart-meting-lijn circle { fill: #fff; stroke: #f2a93b; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.kaart-meting-lijn circle.eerste { fill: #f2a93b; }

.kaart-balk {
  position: absolute; left: 1rem; right: 1rem; top: 1rem;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; pointer-events: none;
}
.kaart-balk > * { pointer-events: auto; }
.kaart-lagen, .kaart-zoom { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.kaart-zoom { margin-left: auto; }
.kaart-knop {
  font: inherit; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 13, 11, 0.66); color: #f2f5f2;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kaart-knop:hover { border-color: #99baa1; }
.kaart-knop[aria-pressed="true"] { background: #99baa1; border-color: #99baa1; color: #0a0d0b; }
.kaart-meten[aria-pressed="true"] { background: #f2a93b; border-color: #f2a93b; color: #1c1206; }
.kaart-rond { width: 2.2rem; padding: 0.5rem 0; font-size: 1rem; line-height: 1; }

.kaart-schaal {
  position: absolute; left: 1rem; bottom: 1rem; display: grid; gap: 0.25rem;
  padding: 0.45rem 0.7rem; border-radius: 8px; background: rgba(10, 13, 11, 0.66); color: #f2f5f2;
  font-family: var(--f-mono); font-size: 0.72rem; pointer-events: none;
}
.kaart-schaal-streep { display: block; height: 6px; border: 2px solid #f2f5f2; border-top: 0; }
.kaart-meting {
  position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 0.7rem;
  max-width: min(30rem, calc(100% - 2rem)); padding: 0.5rem 0.5rem 0.5rem 0.9rem; border-radius: 12px;
  background: rgba(10, 13, 11, 0.78); color: #f2f5f2; font-size: 0.88rem;
}
.kaart-meting p { margin: 0; font-variant-numeric: tabular-nums; }
.kaart-legenda {
  position: absolute; left: 1rem; bottom: 4.2rem; display: grid; gap: 0.3rem; width: 13rem;
  padding: 0.55rem 0.7rem; border-radius: 8px; background: rgba(10, 13, 11, 0.66); color: #f2f5f2; font-size: 0.75rem;
}
.kaart-legenda-balk { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #d7191c, #fdae61, #ffffbf, #a6d96a, #1a9641); }
.kaart-legenda-tekst { display: flex; justify-content: space-between; }
.kaart-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  padding: 0.6rem 1rem; border-radius: 999px; background: var(--woud); color: #f2f5f2; font-size: 0.85rem;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.kaart.hint-aan .kaart-hint { opacity: 1; }
.kaart.geen-kaart .kaart-reserve { display: block; }
@media (max-width: 700px) {
  .kaart { height: 72svh; }
  .kaart-zoom .kaart-knop:not(.kaart-rond) { display: none; }
  .kaart-meting { left: 1rem; right: 1rem; bottom: 3.6rem; max-width: none; }
  .kaart-legenda { bottom: 7.4rem; }
}

/* Een label voor iets dat nog niet af is: rustiger dan Nieuw */
.badge-stil { background: rgba(10, 13, 11, 0.72); color: #f2f5f2; }

/* De ondergrond van de kaart (PDOK) en de schuif voor de orthofoto */
.kaart-tegels { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; }
.kaart-tegel { position: absolute; max-width: none; pointer-events: none; }
.kaart-ortho { position: absolute; inset: 0; z-index: 1; transition: opacity 0.15s; }
.kaart-meting-lijn { z-index: 2; }
.kaart-groep { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.kaart-onder {
  position: absolute; left: 1rem; bottom: 4rem; display: grid; gap: 0.45rem; justify-items: start;
  max-width: calc(100% - 2rem); pointer-events: none;
}
.kaart-onder > * { pointer-events: auto; }
.kaart-klein { font-size: 0.76rem; padding: 0.4rem 0.75rem; }
.kaart-doorzicht {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.75rem; border-radius: 999px;
  background: rgba(10, 13, 11, 0.66); color: #f2f5f2; font-size: 0.76rem; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kaart-doorzicht input { width: 8rem; accent-color: #99baa1; cursor: pointer; }
.kaart-bron { margin: 0; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(10, 13, 11, 0.55); color: #e9efe9; font-size: 0.66rem; }
.kaart-bron:empty { display: none; }
.kaart.met-ondergrond .kaart-legenda { bottom: 11rem; }
@media (max-width: 700px) {
  .kaart-onder { bottom: 6.6rem; }
  .kaart-doorzicht input { width: 6rem; }
  .kaart.met-ondergrond .kaart-legenda { display: none; }
}

/* De 360-video staat onzichtbaar in de pagina; de viewer tekent hem op het doek */
.tour-video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.tour-knoppen .tour-speel { margin-left: auto; }
.tour-knoppen .tour-speel + .tour-knop { margin-left: 0; }

/* Kaart eronder: een schuifschakelaar. Het bolletje schuift naar rechts en de baan
   wordt groen als de kaart eronder ligt. */
.kaart-onder-knop { position: relative; display: inline-flex; align-items: center; padding-left: 3.35rem; }
.kaart-onder-knop::before {
  content: ""; position: absolute; left: 0.55rem; top: 50%; width: 2.35rem; height: 1.3rem; margin-top: -0.65rem;
  border-radius: 999px; background: rgba(255, 255, 255, 0.24); transition: background 0.25s;
}
.kaart-onder-knop::after {
  content: ""; position: absolute; left: 0.72rem; top: 50%; width: 0.96rem; height: 0.96rem; margin-top: -0.48rem;
  border-radius: 50%; background: #f2f5f2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.kaart-onder-knop[aria-checked="true"] { border-color: #99baa1; }
.kaart-onder-knop[aria-checked="true"]::before { background: #99baa1; }
.kaart-onder-knop[aria-checked="true"]::after { transform: translateX(1.05rem); background: #0f1a13; }
@media (prefers-reduced-motion: reduce) {
  .kaart-onder-knop::before, .kaart-onder-knop::after { transition: none; }
}

/* ==========================================================================
   Teamportaal (/team/): de werkplek van de ploeg, in tabbladen.
   Rustig en zakelijk: hier komt iemand om iets te doen, niet om te kijken.
   ========================================================================== */

.tp-pagina { max-width: 82rem; }
.tp-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem 2rem; flex-wrap: wrap; }
.tp-kop .label { margin-bottom: 0.5rem; }
.tp-welkom { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); font-weight: 760; letter-spacing: -0.035em; line-height: 0.98; }
.tp-vandaag { margin-top: 0.5rem; color: var(--grijs); font-size: 0.95rem; }

.tp-mededeling {
  margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 12px;
  background: rgba(184, 106, 18, 0.08); border: 1px solid rgba(184, 106, 18, 0.32);
}
.tp-mededeling .label { color: #93500b; margin-bottom: 0.35rem; }
.tp-mededeling-tekst { font-size: 1.05rem; white-space: pre-line; }
.tp-mededeling-door { margin-top: 0.35rem; color: var(--grijs); font-size: 0.82rem; }

.tp-tabs {
  display: flex; gap: 0.3rem; margin-top: 1.6rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--lijn); overflow-x: auto; scrollbar-width: thin;
}
.tp-tab {
  flex: none; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--grijs); transition: background 0.2s, color 0.2s;
}
.tp-tab:hover { color: var(--mist); background: var(--grond); }
.tp-tab[aria-selected="true"] { background: var(--woud); color: #f2f5f2; }
.tp-tab:focus-visible, .tp-link:focus-visible, .tp-kaart:focus-visible, .tp-blokje:focus-visible,
.tp-dienst:focus-visible, .tp-cijfer:focus-visible, .tp-rond:focus-visible, .tp-sluit:focus-visible,
.tp-weekdag-plus:focus-visible { outline: 2px solid var(--salie); outline-offset: 2px; }
.tp-tab-beheer { margin-left: auto; }

.tp-paneel { margin-top: 1.4rem; }
.tp-paneel:focus { outline: none; }
.tp-intro { color: var(--grijs); max-width: 46rem; margin-bottom: 1.2rem; }
.tp-voetnoot { margin-top: 1rem; color: var(--grijs); font-size: 0.85rem; max-width: 60rem; }
.tp-uitleg { color: var(--grijs); font-size: 0.92rem; margin-top: -0.4rem; }

.tp-link {
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--salie); cursor: pointer;
  background: none; border: 0; padding: 0.2rem 0; text-decoration: underline; text-underline-offset: 3px;
}
.tp-link:hover { color: var(--salie-fel); }
.tp-link:disabled { opacity: 0.5; cursor: default; }

.tp-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; flex: none;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid var(--lijn-sterk); color: var(--grijs);
}
.tp-chip-goed { border-color: rgba(47, 107, 76, 0.45); color: var(--salie); background: rgba(47, 107, 76, 0.07); }
.tp-chip-let { border-color: rgba(184, 106, 18, 0.45); color: #93500b; background: rgba(184, 106, 18, 0.07); }

/* Overzicht */
.tp-start { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; }
.tp-volgende {
  position: relative; overflow: hidden; border-radius: 16px; padding: clamp(1.3rem, 3vw, 2rem);
  background: radial-gradient(120% 140% at 100% 0%, #2a4a39 0%, var(--woud) 55%, #14261c 100%);
  color: #f2f5f2; display: grid; align-content: start; gap: 0.2rem; min-height: 15rem;
}
.tp-volgende .label { color: #99baa1; margin-bottom: 0.6rem; }
.tp-volgende-wanneer { color: rgba(233, 239, 233, 0.8); font-size: 0.95rem; }
.tp-volgende-tijd { font-family: var(--f-mono); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 0.3rem; }
.tp-volgende-titel { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 720; letter-spacing: -0.02em; line-height: 1.1; }
.tp-volgende-bij { color: rgba(233, 239, 233, 0.84); margin-top: 0.3rem; }
.tp-volgende-notitie { color: rgba(233, 239, 233, 0.76); font-size: 0.9rem; margin-top: 0.4rem; white-space: pre-line; }
.tp-volgende-leeg { color: rgba(233, 239, 233, 0.84); font-size: 1.05rem; }
.tp-volgende-knoppen { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.tp-volgende .knop-vol { background: #99baa1; color: #0a0d0b; }
.tp-volgende .knop-vol:hover { background: #bcd8c2; }
.tp-volgende .knop-lijn { border-color: rgba(233, 239, 233, 0.35); color: #f2f5f2; }
.tp-volgende .knop-lijn:hover { border-color: #99baa1; color: #bcd8c2; }

.tp-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; align-content: start; }
.tp-cijfer {
  display: grid; gap: 0.25rem; align-content: start; text-align: left; font: inherit; color: inherit;
  padding: 1.1rem 1.2rem; border-radius: 12px; border: 1px solid var(--lijn); background: var(--paneel);
}
button.tp-cijfer { cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
button.tp-cijfer:hover { border-color: rgba(47, 107, 76, 0.45); transform: translateY(-1px); }
.tp-cijfer b { font-family: var(--f-kop); font-size: 2.3rem; font-weight: 760; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tp-cijfer span { color: var(--grijs); font-size: 0.86rem; }
.tp-cijfer-knop { align-content: center; justify-items: start; }
.tp-cijfers-beheer { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; }

.tp-rijen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; align-items: start; }
.tp-paneel > .tp-rijen:first-child { margin-top: 0; }
.tp-blok {
  border: 1px solid var(--lijn); border-radius: 14px; background: var(--paneel);
  padding: clamp(1.1rem, 2.4vw, 1.5rem); min-width: 0; box-shadow: 0 1px 2px rgba(20, 32, 25, 0.04);
}
.tp-blok-breed { grid-column: 1 / -1; }
.tp-blok h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.9rem; }
.tp-blok-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.tp-blok-beheer { border-color: rgba(47, 107, 76, 0.3); background: linear-gradient(rgba(47, 107, 76, 0.05), rgba(47, 107, 76, 0.05)), var(--paneel); }

.tp-dienst {
  display: grid; grid-template-columns: 0.55rem 7.2rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 0.5rem 0.6rem; margin-inline: -0.6rem; width: calc(100% + 1.2rem);
  border: 0; border-radius: 8px; background: none; transition: background 0.2s;
}
.tp-dienst:hover { background: var(--grond); }
.tp-dienst::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--persoon, var(--salie)); transform: translateY(-0.05rem); }
.tp-dienst-stil { cursor: default; }
.tp-dienst-stil:hover { background: none; }
.tp-tijd { font-family: var(--f-mono); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.tp-wat { display: grid; gap: 0.1rem; min-width: 0; }
.tp-wat span { color: var(--grijs); font-size: 0.88rem; overflow-wrap: anywhere; }

.tp-weer-status {
  display: grid; gap: 0.15rem; padding: 0.9rem 1rem; border-radius: 12px; border: 1px solid var(--lijn-sterk);
}
.tp-weer-status b { font-family: var(--f-kop); font-size: 1.35rem; font-weight: 740; letter-spacing: -0.02em; }
.tp-weer-status span { color: var(--grijs); font-size: 0.88rem; }
.tp-weer-status.is-groot { padding: 1.2rem 1.4rem; min-width: min(100%, 22rem); }
.tp-weer-status.is-groot b { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.tp-weer-status.is-goed { background: rgba(47, 107, 76, 0.08); border-color: rgba(47, 107, 76, 0.4); }
.tp-weer-status.is-goed b { color: var(--salie); }
.tp-weer-status.is-let { background: rgba(184, 106, 18, 0.08); border-color: rgba(184, 106, 18, 0.4); }
.tp-weer-status.is-let b { color: #93500b; }
.tp-weer-status.is-stop { background: rgba(179, 38, 30, 0.07); border-color: rgba(179, 38, 30, 0.4); }
.tp-weer-status.is-stop b { color: #a3241c; }
.tp-weer-regel { margin-top: 0.7rem; color: var(--grijs); font-size: 0.9rem; }
.tp-weer-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.tp-weer-reden { margin-top: 1rem; max-width: 46rem; }
.tp-weer-cijfers { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.7rem; margin: 1.3rem 0 0; }
.tp-weer-cijfers div { padding: 0.8rem 0.9rem; border-radius: 10px; background: var(--paneel); border: 1px solid var(--lijn); }
.tp-weer-cijfers dt { color: var(--grijs); font-size: 0.8rem; }
.tp-weer-cijfers dd { margin: 0.2rem 0 0; font-family: var(--f-kop); font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-uren { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.35rem; }
.tp-uren li { display: grid; gap: 0.1rem; padding: 0.55rem 0.6rem; border-radius: 8px; border: 1px solid var(--lijn); background: var(--paneel); font-size: 0.8rem; }
.tp-uren b { font-family: var(--f-mono); font-size: 0.82rem; }
.tp-uren span { color: var(--grijs); }
.tp-uren .tp-uren-label { font-weight: 600; color: var(--mist); font-size: 0.74rem; }
.tp-uren li.is-goed { background: rgba(47, 107, 76, 0.09); border-color: rgba(47, 107, 76, 0.3); }
.tp-uren li.is-let { background: rgba(184, 106, 18, 0.09); border-color: rgba(184, 106, 18, 0.3); }
.tp-uren li.is-stop { background: rgba(179, 38, 30, 0.08); border-color: rgba(179, 38, 30, 0.3); }
.tp-weer-luchtruim { margin-top: 1.2rem; max-width: 52rem; }

/* Planning */
.tp-balk { display: flex; align-items: center; gap: 0.8rem 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tp-weeknav { display: flex; align-items: center; gap: 0.6rem; }
.tp-weektitel { display: grid; min-width: 9.5rem; text-align: center; }
.tp-weektitel b { font-family: var(--f-kop); font-size: 1.15rem; font-weight: 720; }
.tp-weektitel span { color: var(--grijs); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.tp-rond {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--lijn-sterk); background: var(--paneel);
  color: var(--mist); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.tp-rond:hover { border-color: var(--salie); color: var(--salie); }
.tp-schakel { display: inline-flex; padding: 0.2rem; border-radius: 999px; border: 1px solid var(--lijn-sterk); background: var(--paneel); }
.tp-schakel button, .tp-schakel label span {
  display: block; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  padding: 0.42rem 0.9rem; border-radius: 999px; border: 0; background: none; color: var(--grijs);
}
.tp-schakel button[aria-pressed="true"], .tp-schakel input:checked + span { background: var(--woud); color: #f2f5f2; }
.tp-schakel label { position: relative; }
.tp-schakel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tp-schakel input:focus-visible + span, .tp-schakel button:focus-visible { outline: 2px solid var(--salie); outline-offset: 2px; }
.tp-schakel-breed { justify-self: start; }
.tp-plan-knop { margin-left: auto; }

.tp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.55rem; align-items: start; }
.tp-week[aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s; }
.tp-weekdag {
  display: grid; gap: 0.5rem; align-content: start; min-height: 11rem; min-width: 0;
  padding: 0.7rem; border-radius: 12px; border: 1px solid var(--lijn); background: var(--paneel);
}
.tp-weekdag.is-vandaag { border-color: rgba(47, 107, 76, 0.55); box-shadow: 0 0 0 1px rgba(47, 107, 76, 0.25); }
.tp-weekdag.is-voorbij { background: transparent; }
.tp-weekdag.is-voorbij .tp-weekdag-lijst { opacity: 0.6; }
.tp-weekdag-kop { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.tp-weekdag-kop b { font-family: var(--f-kop); font-size: 1.4rem; font-weight: 740; line-height: 1; font-variant-numeric: tabular-nums; }
.tp-weekdag-naam, .tp-weekdag-maand { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grijs); }
.tp-weekdag.is-vandaag .tp-weekdag-naam { color: var(--salie); }
.tp-weekdag-lijst { display: grid; gap: 0.4rem; }
.tp-weekdag-leeg { color: var(--grijs); font-size: 0.8rem; }
.tp-blokje {
  display: grid; gap: 0.1rem; text-align: left; font: inherit; color: var(--mist); cursor: pointer; min-width: 0;
  padding: 0.5rem 0.55rem; border-radius: 8px;
  border: 1px solid var(--lijn-sterk); background: var(--grond);
  border-color: color-mix(in srgb, var(--persoon, #2f6b4c) 40%, transparent);
  background: color-mix(in srgb, var(--persoon, #2f6b4c) 11%, #ffffff);
  transition: transform 0.15s, box-shadow 0.15s;
}
.tp-blokje:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(20, 32, 25, 0.08); }
.tp-blokje b { font-size: 0.86rem; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.tp-blokje-tijd { font-family: var(--f-mono); font-size: 0.72rem; color: var(--grijs); font-variant-numeric: tabular-nums; }
.tp-blokje-bij { font-size: 0.74rem; color: var(--grijs); overflow-wrap: anywhere; }
.tp-blokje.is-algemeen { background: transparent; border-style: dashed; border-color: var(--lijn-sterk); }
.tp-weekdag-plus {
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--salie); cursor: pointer;
  padding: 0.4rem; border-radius: 8px; border: 1px dashed rgba(47, 107, 76, 0.4); background: none;
}
.tp-weekdag-plus:hover { background: rgba(47, 107, 76, 0.06); }

/* Kaarten: opdrachten en checklists */
.tp-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.9rem; }
.tp-kaarten-breed { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.tp-kaart {
  display: grid; gap: 0.35rem; align-content: start; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 1.15rem 1.2rem; border-radius: 14px; border: 1px solid var(--lijn); background: var(--paneel);
  transition: border-color 0.2s, transform 0.2s;
}
.tp-kaart:hover { border-color: rgba(47, 107, 76, 0.45); transform: translateY(-2px); }
.tp-kaart-boven { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tp-kaart-boven .label { margin: 0; }
.tp-kaart-titel { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.tp-kaart-bij { color: var(--grijs); font-size: 0.88rem; }

.tp-checklist { display: grid; gap: 0.5rem; padding: 1.2rem; border-radius: 14px; border: 1px solid var(--lijn); background: var(--paneel); }
.tp-checklist.is-af { background: linear-gradient(rgba(47, 107, 76, 0.04), rgba(47, 107, 76, 0.04)), var(--paneel); }
.tp-checklist h2 { margin: 0; }
.tp-voortgang { height: 6px; border-radius: 999px; background: var(--grond); overflow: hidden; margin-block: 0.3rem 0.5rem; }
.tp-voortgang i { display: block; height: 100%; background: var(--salie); border-radius: inherit; transition: width 0.3s var(--boog); }
.tp-punten { list-style: none; margin: 0; padding: 0; display: grid; }
.tp-punten li + li { border-top: 1px solid var(--lijn); }
.tp-punt { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0.1rem; cursor: pointer; flex-wrap: wrap; }
.tp-punt input { accent-color: var(--salie); width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; flex: none; cursor: pointer; }
.tp-punt-tekst { flex: 1 1 12rem; min-width: 0; }
.tp-punt input:checked ~ .tp-punt-tekst { color: var(--grijs); text-decoration: line-through; text-decoration-color: var(--lijn-sterk); }
.tp-punt-verplicht { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #93500b; padding-top: 0.25rem; }
.tp-punt-door { font-size: 0.78rem; color: var(--grijs); padding-top: 0.15rem; }

/* Formulieren in het portaal */
.tp-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.tp-formulier { display: grid; gap: 1rem; align-content: start; }
.tp-formulier h2 { margin-bottom: 0.2rem; }
.tp-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.tp-veld { display: grid; gap: 0.35rem; min-width: 0; }
.tp-veld-breed { grid-column: 1 / -1; }
.tp-veld > span { font-size: 0.84rem; color: var(--grijs); }
.tp-veld em { font-style: normal; }
.tp-veld input, .tp-veld select, .tp-veld textarea, .tp-kopieer input {
  width: 100%; min-width: 0; font: inherit; font-size: 1rem; color: var(--mist);
  padding: 0.62rem 0.8rem; border-radius: 8px; border: 1px solid var(--lijn-sterk); background: var(--paneel);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tp-veld textarea { resize: vertical; min-height: 5rem; }
.tp-veld input:focus, .tp-veld select:focus, .tp-veld textarea:focus, .tp-kopieer input:focus {
  outline: none; border-color: var(--salie); box-shadow: 0 0 0 3px rgba(47, 107, 76, 0.15);
}
.tp-veld input[readonly] { background: var(--grond); color: var(--grijs); }
.tp-kopieer { display: flex; gap: 0.5rem; }
.tp-kopieer input { font-family: var(--f-mono); font-size: 0.8rem; }
.tp-uitklap { font-size: 0.92rem; }
.tp-uitklap summary { cursor: pointer; font-weight: 600; color: var(--salie); }
.tp-uitklap ul { margin: 0.7rem 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.tp-gevaar { color: #a3241c; border-color: rgba(179, 38, 30, 0.4); }
.tp-gevaar:hover { color: #a3241c; border-color: #a3241c; background: rgba(179, 38, 30, 0.06); }

.tp-bdag { padding-block: 0.8rem; border-top: 1px solid var(--lijn); display: grid; gap: 0.35rem; }
.tp-bdag:first-child { border-top: 0; padding-top: 0; }
.tp-bdag-kop { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tp-bregel { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; color: var(--grijs); font-size: 0.9rem; }

/* Ploeg */
.tp-ploeg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.9rem; }
.tp-persoon { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem; border-radius: 14px; border: 1px solid var(--lijn); background: var(--paneel); }
.tp-avatar {
  flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--persoon, var(--salie)); color: #ffffff; font-family: var(--f-kop); font-weight: 720; font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tp-persoon-tekst { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; }
.tp-persoon-tekst b { font-size: 1.02rem; }
.tp-persoon-rol { flex-basis: 100%; color: var(--grijs); font-size: 0.88rem; }
.tp-persoon-contact { flex-basis: 100%; display: grid; gap: 0.15rem; margin-top: 0.3rem; font-size: 0.9rem; }
.tp-persoon-contact a { color: var(--salie); overflow-wrap: anywhere; }

.tp-toegang li.is-uit b { color: var(--grijs); }

/* Het venster */
.tp-venster {
  width: min(42rem, calc(100vw - 2rem)); max-height: min(88vh, 52rem); padding: 0; border: 0; border-radius: 18px;
  background: var(--paneel); color: var(--mist); box-shadow: 0 24px 70px rgba(10, 13, 11, 0.28);
}
.tp-venster::backdrop { background: rgba(10, 13, 11, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.tp-venster-binnen { padding: clamp(1.2rem, 3vw, 1.8rem); display: grid; gap: 1rem; }
.tp-venster-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tp-venster-kop .label { margin-bottom: 0.35rem; }
.tp-venster-kop h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 720; letter-spacing: -0.02em; line-height: 1.15; }
.tp-sluit {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--lijn-sterk);
  background: var(--paneel); color: var(--mist); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.tp-sluit:hover { border-color: var(--salie); color: var(--salie); }
.tp-venster-sub { font-size: 0.98rem; font-weight: 700; margin-top: 0.4rem; }
.tp-venster-lijst { display: grid; }
.tp-feiten { display: grid; gap: 0.55rem; margin: 0; }
.tp-feiten div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.8rem; }
.tp-feiten dt { color: var(--grijs); font-size: 0.88rem; }
.tp-feiten dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.tp-feiten a { color: var(--salie); }
.tp-bericht {
  margin: 0; padding: 0.8rem 0.95rem; border-radius: 10px; background: var(--grond);
  white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55;
}
.tp-aanvraag {
  position: relative; display: grid; gap: 0.15rem; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 0.4rem 2rem 0.4rem 0.6rem; margin-inline: -0.6rem; width: calc(100% + 1.2rem);
  border: 0; border-radius: 8px; background: none; transition: background 0.2s;
}
.tp-aanvraag::after {
  content: "›"; position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
  color: var(--grijs); font-size: 1.3rem; line-height: 1;
}
.tp-aanvraag:hover { background: var(--grond); }
.tp-aanvraag:focus-visible { outline: 2px solid var(--salie); outline-offset: 2px; }
.pp-lijst li:has(> .tp-aanvraag) { padding-block: 0.35rem; }

.tp-toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 300; max-width: calc(100vw - 2rem);
  padding: 0.75rem 1.2rem; border-radius: 999px; background: var(--woud); color: #f2f5f2; font-size: 0.92rem;
  box-shadow: 0 10px 30px rgba(10, 13, 11, 0.25);
}

@media (max-width: 1100px) {
  .tp-week { grid-template-columns: 1fr; gap: 0.45rem; }
  .tp-weekdag { grid-template-columns: 4.6rem minmax(0, 1fr); min-height: 0; align-items: start; }
  .tp-weekdag-kop { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .tp-weekdag-lijst { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
  .tp-weekdag-plus { grid-column: 1; justify-self: start; }
  .tp-cijfers-beheer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tp-start, .tp-rijen, .tp-twee { grid-template-columns: 1fr; }
  .tp-plan-knop { margin-left: 0; }
}
@media (max-width: 560px) {
  .tp-velden { grid-template-columns: 1fr; }
  .tp-dienst { grid-template-columns: 0.55rem minmax(0, 1fr); gap: 0.15rem 0.7rem; }
  .tp-dienst .tp-wat { grid-column: 2; }
  .tp-weekdag { grid-template-columns: 1fr; }
  .tp-weekdag-kop { flex-direction: row; align-items: baseline; }
  .tp-weekdag-lijst { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
  .tp-weekdag-plus { grid-column: 1; }
  .tp-feiten div { grid-template-columns: 1fr; gap: 0.1rem; }
  .tp-kopieer { flex-direction: column; }
  .tp-tab-beheer { margin-left: 0; }
  .tp-cijfer b { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-kaart, .tp-blokje, button.tp-cijfer, .tp-voortgang i { transition: none; }
  .tp-kaart:hover, .tp-blokje:hover, button.tp-cijfer:hover { transform: none; }
}

/* ==========================================================================
   Werkgebied en kennisbank: een pagina per provincie, artikelen om te lezen
   ========================================================================== */

.plaatsen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 62rem; }
.plaatsen li {
  padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--lijn-sterk);
  background: var(--paneel); font-size: 0.95rem; font-weight: 500;
}
.plaatsen-voet { margin-top: 1.4rem; color: var(--grijs); max-width: 40rem; }
.tegel-link { color: inherit; text-decoration: none; }
.tegel-link:hover { color: var(--salie); }
.tegel-link::after { content: "  \2192"; color: var(--salie); }
.vinkjes a { color: var(--mist); text-decoration-color: rgba(47, 107, 76, 0.45); text-underline-offset: 3px; }
.vinkjes a:hover { color: var(--salie); }
.regio-lijst a { padding-block: 1.4rem; }
.regio-lijst b { font-family: var(--f-kop); font-size: 1.3rem; font-weight: 720; letter-spacing: -0.015em; }

.kennis-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kennis-kaart {
  display: grid; gap: 0.6rem; align-content: start; text-decoration: none; color: var(--mist);
  padding: 1.6rem; border-radius: 16px; border: 1px solid var(--lijn); background: var(--paneel);
  transition: border-color 0.25s, transform 0.25s var(--boog);
}
.kennis-kaart:hover { border-color: var(--salie); transform: translateY(-3px); }
.kennis-kaart .label { margin: 0; }
.kennis-kaart b { font-family: var(--f-kop); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 720; letter-spacing: -0.02em; line-height: 1.1; }
.kennis-kaart span:last-child { color: var(--grijs); }
@media (max-width: 1000px) { .kennis-lijst { grid-template-columns: minmax(0, 1fr); } }

.artikel-meta { margin-top: 1.2rem; color: var(--grijs); font-size: 0.88rem; font-family: var(--f-mono); letter-spacing: 0.02em; }
.artikel { padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.artikel-tekst { max-width: 46rem; }
.artikel-tekst > * + * { margin-top: 1.1rem; }
.artikel-tekst h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); font-weight: 720; letter-spacing: -0.025em; line-height: 1.12; margin-top: 3rem; text-wrap: balance; }
.artikel-tekst h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 1.8rem; }
.artikel-tekst h2 + *, .artikel-tekst h3 + * { margin-top: 0.7rem; }
.artikel-tekst p, .artikel-tekst li { line-height: 1.7; }
.artikel-tekst ul { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.artikel-tekst li::marker { color: var(--salie); }
.artikel-tekst a { color: var(--salie); text-underline-offset: 3px; }
.artikel-kort { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); padding: 1.3rem 1.5rem; border-radius: 14px; background: var(--paneel); border: 1px solid var(--lijn); }
.artikel-kort b { display: block; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--salie); margin-bottom: 0.5rem; }
.artikel-kader { padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid rgba(184, 106, 18, 0.3); background: rgba(184, 106, 18, 0.06); font-size: 0.95rem; }
.artikel-tabel { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 14px; background: var(--paneel); }
.artikel-tabel table { width: 100%; min-width: 34rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.artikel-tabel th, .artikel-tabel td { padding: 0.85rem 1.1rem; text-align: left; vertical-align: baseline; border-top: 1px solid var(--lijn); }
.artikel-tabel thead th { border-top: 0; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grijs); }
.artikel-tabel tbody th { font-weight: 650; }
.artikel-tabel td { color: var(--grijs); }
.artikel-tabel .getal { text-align: right; white-space: nowrap; color: var(--mist); font-weight: 650; }
.artikel-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.artikel-twee > div { padding: 1.2rem 1.3rem; border-radius: 14px; border: 1px solid var(--lijn); background: var(--paneel); }
.artikel-twee h3 { margin-top: 0; margin-bottom: 0.6rem; }
@media (max-width: 640px) { .artikel-twee { grid-template-columns: minmax(0, 1fr); } }

/* Teamportaal: de weg naar het websitebeheer, alleen voor een beheerder */
.tp-website { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tp-website h2 { margin-bottom: 0.5rem; }
.tp-website .tp-uitleg { margin-top: 0; max-width: 40rem; }

/* De taalswitch EN | NL in de kop: de taal waarin je kijkt is wit, de andere gaat
   naar dezelfde pagina in die taal */
.taalwissel {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; flex: none;
  border-radius: 999px; background: var(--grond); border: 1px solid var(--lijn);
}
.taalwissel-deel {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 1.85rem;
  padding: 0 0.5rem; border-radius: 999px; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; color: var(--grijs); text-decoration: none; transition: color 0.2s, background 0.2s;
}
.taalwissel-deel[aria-current] {
  background: var(--paneel); color: var(--mist); box-shadow: 0 1px 3px rgba(20, 32, 25, 0.16);
}
a.taalwissel-deel:hover { color: var(--salie); }
a.taalwissel-deel:focus-visible { outline: 2px solid var(--salie); outline-offset: 1px; color: var(--salie); }
.menu-taal { align-self: flex-start; }
.menu-taal .taalwissel-deel { min-width: 3rem; height: 2.4rem; font-size: 0.8rem; }
@media (max-width: 380px) { .taalwissel-deel { min-width: 1.95rem; padding: 0 0.35rem; } }