/*
  Lokaal geserveerde fonts. Gegenereerd door tools/fonts.mjs — niet met de hand
  bijwerken. De bestanden staan in src/fonts/ en worden door build.mjs naar
  dist/fonts/ gekopieerd.

  Alleen de subsets latin en latin-ext. font-display: swap zodat tekst meteen
  leesbaar is in de terugvalletter en niet onzichtbaar blijft tot het font er is.
*/
@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/site-fonts/manrope-400800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-display: swap;
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/site-fonts/manrope-400800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/*
  ChargePod — premium homepage
  ============================

  Donker en rustig. Zwart als ondergrond, wit voor wat telt, grijs voor wat
  ondersteunt, lime (#C8FF2E) alleen voor acties en het ene detail dat moet
  opvallen. Grote typografie, veel lucht, weinig lijnen.

  Beweging alleen onder html.beweging, en die klasse zet site.js pas als de
  bezoeker geen verminderde beweging vraagt. Zonder JavaScript staat alles er
  meteen, in de eindstand.
*/

:root {
  --zwart: #050607;
  --antraciet: #0a0c0f;
  --vlak: #0f1215;
  --vlak-2: #15191d;
  --lijn: rgba(255, 255, 255, 0.075);
  --lijn-2: rgba(255, 255, 255, 0.14);
  --wit: #f4f5f6;
  --grijs: #a6acb4;
  --grijs-2: #7c838c;
  --lime: #c8ff2e;
  --lime-diep: #b2ec12;
  --lime-waas: rgba(200, 255, 46, 0.12);
  --lime-gloed: rgba(200, 255, 46, 0.22);

  --letter: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --breedte: 1240px;
  --rand: clamp(20px, 5vw, 64px);
  --sectie: clamp(96px, 12vw, 184px);
  --hoek: 28px;
  --hoek-groot: 36px;

  --traag: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ basis */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.premium {
  margin: 0;
  background: var(--zwart);
  color: var(--grijs);
  font: 400 1.0625rem/1.6 var(--letter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/*
  Basis zonder gewicht: :where() houdt de specificiteit op die van een kaal
  element, zodat elke componentklasse (.sector__beeld, .kop__dicht …) wint.
*/
:where(.premium) :where(img, svg, video) { display: block; max-width: 100%; }
:where(.premium) img { height: auto; }
:where(.premium) a { color: inherit; }
:where(.premium) :where(h1, h2, h3, h4) { margin: 0; color: var(--wit); font-weight: 700; }
:where(.premium) p { margin: 0; }
:where(.premium) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

.premium :focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.overslaan {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--lime);
  color: #050607 !important;
  font-weight: 700;
  text-decoration: none;
}
.overslaan:focus { top: 16px; }

.binnen {
  width: 100%;
  max-width: calc(var(--breedte) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sectie { position: relative; padding-block: var(--sectie); }

/* ------------------------------------------------------------ typografie */

.boventitel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--grijs);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.boventitel::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 0 4px var(--lime-waas);
}

.sectiekop { display: grid; gap: 18px; max-width: 720px; }
.sectiekop--midden { margin-inline: auto; text-align: center; justify-items: center; }

.sectiekop h2 {
  font-size: clamp(2.25rem, 1.15rem + 3.9vw, 4.5rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Naast een beeld of lijst is de kolom half zo breed: kop een maat kleiner. */
:is(.product, .sector, .locaties, .faq) .sectiekop h2 {
  font-size: clamp(2.25rem, 1.2rem + 3vw, 3.75rem);
}

.sectiekop__lead {
  max-width: 58ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.sectiekop__lead a { color: var(--wit); text-underline-offset: 3px; }

.tussenkop {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ---------------------------------------------------------------- knoppen */

.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--lime);
  color: #050607 !important;
  font: 700 1rem/1 var(--letter);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--traag), background-color 0.3s, box-shadow 0.4s, border-color 0.3s, color 0.3s;
}

.knop:hover { background: #d6ff5c; box-shadow: 0 12px 40px -12px var(--lime-gloed); transform: translateY(-1px); }
.knop:active { transform: translateY(0); }

.knop--rand {
  background: transparent;
  border-color: var(--lijn-2);
  color: var(--wit) !important;
}
.knop--rand:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); box-shadow: none; }

.knop--tekst {
  min-height: 44px;
  padding: 0 4px;
  background: none;
  color: var(--wit) !important;
}
.knop--tekst:hover { background: none; box-shadow: none; color: var(--lime) !important; }
.knop--tekst .ic { transition: transform 0.3s var(--traag); }
.knop--tekst:hover .ic { transform: translateX(3px); }

.knop--klein { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; }
.knop--vol { width: 100%; }

/* -------------------------------------------------------------------- kop */

.kop {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}

.kop[data-vast] {
  background: rgba(5, 6, 7, 0.78);
  border-bottom-color: var(--lijn);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.kop__binnen {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: calc(var(--breedte) + 2 * var(--rand));
  height: 76px;
  margin-inline: auto;
  padding-inline: var(--rand);
}

.kop__merk { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kop__teken { width: 30px; height: auto; }
.kop__woord { width: 124px; height: auto; }

.kop__nav { display: flex; gap: 4px; margin-left: auto; }

.kop__nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--grijs);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s, background-color 0.25s;
}
.kop__nav a:hover { color: var(--wit); background: rgba(255, 255, 255, 0.05); }

.kop__acties { display: flex; align-items: center; gap: 18px; }
.kop__login { color: var(--grijs); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.kop__login:hover { color: var(--wit); }

.kop__menuknop {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid var(--lijn-2);
  border-radius: 999px;
  background: rgba(5, 6, 7, 0.5);
  color: var(--wit);
  cursor: pointer;
}
.kop__dicht { display: none; }
.kop[data-open] .kop__open { display: none; }
.kop[data-open] .kop__dicht { display: block; }

/* Pody wacht even terwijl het menu open is; anders ligt hij over de knoppen. */
.menu-open .cb { visibility: hidden; }

.kop__menu {
  position: fixed;
  inset: 76px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 24px var(--rand) calc(32px + env(safe-area-inset-bottom));
  background: var(--zwart);
  overflow-y: auto;
}
.kop__menu[hidden] { display: none; }

.kop__menu nav { display: grid; }
.kop__menu nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--lijn);
  color: var(--wit);
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.kop__menuacties { display: grid; gap: 12px; }

@media (max-width: 1040px) {
  .kop__nav, .kop__acties { display: none; }
  .kop__menuknop { display: grid; }
  .kop[data-open] { background: var(--zwart); border-bottom-color: var(--lijn); }
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: grid;
  min-height: max(640px, 100svh);
  padding-top: 76px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1200px 700px at 72% 42%, #11161a 0%, transparent 65%),
    var(--zwart);
}

.hero__beeld { position: absolute; inset: 0; z-index: -1; }

.hero__studio { position: absolute; inset: 0; }

.hero__licht {
  position: absolute;
  left: 50%; top: 46%;
  width: min(1100px, 120vw);
  aspect-ratio: 1.2;
  transform: translate(-6%, -50%);
  background:
    radial-gradient(closest-side, rgba(200, 255, 46, 0.2), rgba(200, 255, 46, 0.06) 45%, transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

.hero__vloer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background:
    radial-gradient(60% 55% at 70% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
}

.hero__product {
  position: absolute;
  right: max(var(--rand), calc((100vw - var(--breedte)) / 2 + 20px));
  bottom: max(10vh, 72px);
  width: 520px;
  height: 600px;
  transform: translate3d(0, var(--p, 0px), 0);
  will-change: transform;
}

.hero__station {
  position: absolute;
  right: 40px; bottom: 0;
  width: 329px;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 60px rgba(200, 255, 46, 0.1));
}

.hero__powerbank {
  position: absolute;
  left: 0; bottom: -14px;
  width: 260px;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.75));
}

.hero--video .hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero--video .hero__beeld::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 7, 0.88) 0%, rgba(5, 6, 7, 0.55) 42%, rgba(5, 6, 7, 0.1) 70%),
    linear-gradient(to top, var(--zwart) 0%, transparent 30%);
}

.hero__inhoud {
  align-self: center;
  display: grid;
  gap: 28px;
  width: 100%;
  max-width: calc(var(--breedte) + 2 * var(--rand));
  margin-inline: auto;
  padding: 48px var(--rand) 140px;
}

/* Ook op de hoogte begrensd: op een laag scherm (1366×768) blijft de hele hero boven de vouw. */
.hero__titel {
  max-width: 11ch;
  font-size: clamp(3rem, min(1rem + 7.6vw, 13vh), 7.5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.hero__titel span { display: block; color: var(--grijs-2); }

.hero__lead {
  max-width: 40ch;
  color: var(--grijs);
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  line-height: 1.5;
}

.hero__verder {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: rgba(5, 6, 7, 0.4);
  color: var(--grijs);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__verder span + span::before { content: "·"; margin-right: 18px; color: var(--lime); }
.hero__verder:hover { color: var(--wit); border-color: var(--lijn-2); }

@media (min-width: 1041px) and (max-height: 820px) {
  .hero__product { scale: 0.84; transform-origin: 100% 100%; bottom: 64px; }
  .hero__inhoud { gap: 22px; padding-bottom: 104px; }
}

@media (max-width: 1040px) {
  .hero { min-height: auto; }
  /* Liggende tablet: het beeld mag de kop niet onder de vouw duwen. */
  .hero__beeld { position: relative; z-index: 0; height: min(96vw, 560px, 56svh); min-height: 380px; order: -1; }
  .hero__product { left: 50%; right: auto; bottom: 36px; width: 420px; height: 480px; margin-left: -210px; transform: translate3d(0, var(--p, 0px), 0) scale(0.84); transform-origin: 50% 100%; }
  .hero__station { right: 20px; }
  .hero__powerbank { width: 210px; }
  .hero__licht { transform: translate(-50%, -48%); width: 130vw; }
  .hero__inhoud { padding-top: 8px; padding-bottom: 104px; }
  .hero__titel { max-width: 12ch; }
  .hero--video .hero__beeld::after { background: linear-gradient(to top, var(--zwart) 0%, transparent 45%); }
}

@media (max-width: 1040px) and (orientation: landscape) {
  .hero__product { scale: 0.86; }
}

@media (max-width: 560px) {
  .hero__beeld { height: 118vw; max-height: 520px; }
  .hero__product { transform: translate3d(0, var(--p, 0px), 0) scale(0.7); bottom: 16px; }
  .hero__inhoud { gap: 22px; padding-bottom: 96px; }
  .hero .knoppen { display: grid; grid-template-columns: 1fr; }
  .hero .knop { width: 100%; }
  .hero__verder { bottom: 20px; gap: 12px; padding: 8px 14px; font-size: 0.75rem; }
  .hero__verder span + span::before { margin-right: 12px; }
}

/* --------------------------------------------------------------- podium */

/*
  De terugval voor een mediaslot zonder Higgsfield-beeld: een donker vlak met
  een zachte gloed en de productfoto op ware grootte. Nooit opgeschaald: de
  foto's zijn hooguit 600 pixels, en een wazig product is erger dan een klein.
*/
.podium {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 40%, #161b20 0%, #0b0d10 60%, #07080a 100%);
}

.podium__gloed {
  position: absolute;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 255, 46, 0.18), transparent 70%);
  filter: blur(10px);
}

.podium__foto {
  position: relative;
  width: auto;
  max-width: 62%;
  max-height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
}

.podium--icoon .podium__icoon {
  position: relative;
  width: clamp(72px, 30%, 128px);
  height: auto;
  color: var(--lime);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 24px rgba(200, 255, 46, 0.35));
}

.media { width: 100%; height: 100%; object-fit: cover; }

/* Een Higgsfield-still vult zijn vak; --positie (uit media.mjs) kiest wat er blijft bij een andere verhouding. */
picture.media { display: block; }
picture.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--positie, 50% 50%);
}

/* ------------------------------------------------------------ hoe het werkt */

.hoe { background: var(--zwart); }

/*
  Drie kolommen, elk een klein kaartje met een lijnpictogram en de tekst eronder.
  Het kaartje wijst aan, de tekst legt uit: daarom is de kaart klein en de titel
  duidelijk. align-content: start houdt de teksten op één lijn, ook als de ene
  stap meer tekst heeft dan de andere.
*/
.stappen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(48px, 5.5vw, 76px);
  align-items: start;
}

.stap { display: grid; align-content: start; justify-items: start; gap: clamp(28px, 2.6vw, 36px); }

.stap__kaart {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 12vw, 172px);
  aspect-ratio: 1;
  border: 1px solid var(--lijn);
  border-radius: 22px;
  background: radial-gradient(90% 90% at 50% 30%, #11151a 0%, var(--antraciet) 72%);
  transition: border-color 0.4s;
}

/* Een zweem lime achter het pictogram, geen neon. */
.stap__kaart::before {
  content: "";
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 255, 46, 0.07), transparent 72%);
}

.stap:hover .stap__kaart { border-color: var(--lijn-2); }

.stap__icoon {
  position: relative;
  width: clamp(46px, 3.6vw, 52px);
  height: auto;
  color: var(--lime);
  stroke-width: 1.35;
  filter: drop-shadow(0 0 7px rgba(200, 255, 46, 0.22));
}

.stap__tekst { display: grid; gap: 10px; }
.stap__nr { color: var(--lime); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.stap h3 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.15; }
.stap p { max-width: 34ch; color: var(--grijs); }

@media (max-width: 860px) {
  .stappen { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 44px; }
  .stap { gap: 22px; }
  .stap__kaart { width: 132px; border-radius: 20px; }
  .stap__icoon { width: 46px; }
}

/* ---------------------------------------------------------------- product */

.product { background: var(--antraciet); }

.product__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.product__podium { position: sticky; top: 96px; }

.product__plek {
  position: relative;
  display: grid;
  place-items: center;
  height: min(78vh, 720px);
  min-height: 520px;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-groot);
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% 30%, #1a2025 0%, transparent 70%),
    linear-gradient(to bottom, #0e1114, #07080a);
}

.product__plek::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: 13%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.product__gloed {
  position: absolute;
  width: 80%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 255, 46, 0.16), transparent 70%);
  transition: opacity 0.8s;
}

/* Maat via de hoogte, zodat hij altijd in het vlak past; 530 px is de foto zelf. */
.product__station {
  position: relative;
  width: auto;
  height: min(530px, 58vh);
  transform: translateY(-4%);
  filter: drop-shadow(0 50px 50px rgba(0, 0, 0, 0.7));
  transition: transform 1s var(--traag);
}

.product__verhaal { display: grid; gap: clamp(40px, 5vw, 64px); padding-block: 4vh; }

.kenmerken { display: grid; }

.kenmerk {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding-block: clamp(28px, 6vh, 64px);
  border-top: 1px solid var(--lijn);
  transition: opacity 0.6s;
}

.kenmerk__ic {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--lijn-2);
  border-radius: 14px;
  color: var(--lime);
}

.kenmerk h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 8px; }
.kenmerk p { max-width: 42ch; }

html.beweging .kenmerk { opacity: 0.38; }
html.beweging .kenmerk[data-actief] { opacity: 1; }

.sectiekop--rij {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 40px;
  max-width: none;
  margin-top: clamp(96px, 12vw, 160px);
}
.sectiekop--rij p { max-width: 44ch; }

@media (max-width: 1040px) {
  .product__raster { grid-template-columns: 1fr; }
  .product__podium { position: relative; top: 0; }
  .product__plek { height: 440px; min-height: 0; }
  .product__station { height: 330px; }
  .product__verhaal { padding-block: 0; }
  html.beweging .kenmerk { opacity: 1; }
}

@media (max-width: 640px) {
  .product__plek { height: 380px; }
  .product__station { height: 284px; }
}

/* --------------------------------------------------------------- sectoren
   Bars & cafés, restaurants, hotels: beeld en tekst naast elkaar, om beurten
   links en rechts, op wisselende ondergrond. */

.sector--zwart { background: var(--zwart); }
.sector--antraciet { background: var(--antraciet); }

.sector__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.sector--omgekeerd .sector__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.sector--omgekeerd .sector__beeld { order: 2; }

.sector__beeld {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-groot);
  overflow: hidden;
}

/* Zonder Higgsfield-beeld: de echte productfoto op een warm podium, zoals op een balie. */
.sector__beeld .podium { background: radial-gradient(80% 60% at 50% 38%, #2b2116 0%, #0e0b09 62%, #060606 100%); }
.sector__beeld .podium__gloed { background: radial-gradient(closest-side, rgba(255, 170, 70, 0.2), transparent 72%); }
.sector__beeld .podium__foto { max-width: 44%; }

.sector__tekst { display: grid; gap: 36px; }

.vinklijst { display: grid; gap: 14px; }
.vinklijst li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--wit); font-size: 1.0625rem; }
.vinklijst .ic { margin-top: 3px; color: var(--lime); }
.vinklijst--klein li { font-size: 1rem; color: var(--grijs); }

@media (max-width: 900px) {
  .sector__raster, .sector--omgekeerd .sector__raster { grid-template-columns: 1fr; }
  .sector--omgekeerd .sector__beeld { order: 0; }
  .sector__beeld { aspect-ratio: 5 / 4; }
}

/* ------------------------------------------------------------------ sport
   Extra toepassing: een band met tegels, zonder toestel in beeld. */

.sport { background: var(--zwart); }
.sport__binnen { display: grid; gap: clamp(32px, 4vw, 48px); }
.sport__kop { margin-top: 0; }
.sport__koptekst { display: grid; gap: 18px; }
.sport__beeld { aspect-ratio: 21 / 9; border-radius: var(--hoek-groot); overflow: hidden; border: 1px solid var(--lijn); }
/* Zwaarder dan .feiten, dat verderop staat. */
.feiten.feiten--vier { grid-template-columns: repeat(4, 1fr); }
.sport .feit { background: var(--antraciet); }

.feiten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  overflow: hidden;
  background: var(--lijn);
}

.feit {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(24px, 3vw, 40px);
  background: var(--antraciet);
}
.feit__ic { color: var(--lime); margin-bottom: 12px; }
.feit h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.feit p { font-size: 1rem; }

@media (max-width: 1100px) {
  .feiten, .feiten.feiten--vier { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .feiten, .feiten.feiten--vier { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- locaties */

.locaties { background: var(--zwart); }

.locaties__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.locaties__paneel { display: grid; gap: 24px; align-content: start; }

/* ----- zoeken */
.zoeker { display: grid; gap: 12px; }
.zoeker[hidden] { display: none; }

.zoeker__form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--lijn-2);
  border-radius: 999px;
  background: var(--vlak);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.zoeker__form:focus-within { border-color: rgba(200, 255, 46, 0.55); box-shadow: 0 0 0 4px var(--lime-waas); }
.zoeker__ic { display: grid; color: var(--grijs-2); }
.zoeker__veld {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--wit);
  font: 500 1rem/1.2 var(--letter);
  outline: none;
}
.zoeker__veld::placeholder { color: var(--grijs-2); }
.zoeker__veld::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.zoeker__dichtstbij { justify-self: start; }

.locaties__melding { color: var(--grijs); font-size: 0.9375rem; }

/* ----- resultaten */
.plekken {
  display: grid;
  gap: 1px;
  max-height: 470px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  background: var(--lijn);
  scrollbar-width: thin;
  scrollbar-color: var(--lijn-2) transparent;
}
.plekken[hidden] { display: none; }
.plek { display: grid; gap: 6px; padding: 18px 20px; background: var(--vlak); }
.plek__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plek h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.plek__afstand { color: var(--lime); font-weight: 700; font-size: 0.9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plek__adres, .plek__uren { color: var(--grijs); font-size: 0.9375rem; }
.plek__status { color: #ffcf66; font-size: 0.875rem; font-weight: 600; }
.plek__knoppen { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.plek__knoppen .knop--tekst { min-height: 36px; font-size: 0.9375rem; }

.locaties__binnenkort {
  display: grid;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek);
  background: var(--vlak);
}
.locaties__binnenkort strong { color: var(--wit); font-weight: 600; }
.locaties__binnenkort[hidden] { display: none; }

/* ----- kaart */
.kaart {
  position: relative;
  margin: 0;
  height: min(640px, 76vh);
  min-height: 460px;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-groot);
  overflow: hidden;
  isolation: isolate;
  /* Donker vlak zolang de tegels laden; geen tekening van België. */
  background: #0a0c0f;
}

.kaart__leaflet { position: absolute; inset: 0; z-index: 1; }

/* Leaflet in de huisstijl: donkere tegels, lime pinnen, donkere bediening. */
.kaart .leaflet-container { background: #0a0c0f; font: 500 0.875rem/1.4 var(--letter); }
/* Het filter per tegel, niet op de hele laag: op de laag tekent de browser naden tussen de tegels. */
.kaart img.leaflet-tile { filter: grayscale(1) invert(1) brightness(0.82) contrast(0.92); }
/* Bediening en bronvermelding binnen de ronde hoeken houden. */
.kaart .leaflet-top.leaflet-left { margin: 10px 0 0 10px; }
.kaart .leaflet-bottom.leaflet-right { margin: 0 18px 12px 0; }
.kaart .leaflet-bar { border: 1px solid var(--lijn-2); border-radius: 12px; overflow: hidden; box-shadow: none; }
.kaart .leaflet-bar a { background: #0f1215; color: var(--wit); border-bottom-color: var(--lijn-2); }
.kaart .leaflet-bar a:hover { background: #171b20; color: var(--lime); }
.kaart .leaflet-control-attribution { background: rgba(5, 6, 7, 0.72); color: var(--grijs-2); border-radius: 8px; }
.kaart .leaflet-control-attribution a { color: var(--grijs); }

/* De pin zoals de stip op de kaart van het Control Center: een lime punt met een donkere rand. */
.kaartpin span {
  display: block;
  width: 14px; height: 14px;
  margin: 4px;
  border: 2px solid var(--zwart);
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 255, 46, 0.16), 0 4px 12px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s;
}
.kaartpin:hover span, .kaartpin:focus span { transform: scale(1.2); }

.kaartpopup-schil .leaflet-popup-content-wrapper {
  border: 1px solid var(--lijn-2);
  border-radius: 16px;
  background: #0f1215;
  color: var(--grijs);
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.8);
}
.kaartpopup-schil .leaflet-popup-tip { background: #0f1215; border: 1px solid var(--lijn-2); }
.kaartpopup-schil .leaflet-popup-content { margin: 16px 18px; }
.kaartpopup-schil a.leaflet-popup-close-button { color: var(--grijs-2); }
.kaartpopup { display: grid; gap: 4px; min-width: 170px; font-size: 0.875rem; }
.kaartpopup strong { color: var(--wit); font-size: 1rem; }
.kaartpopup__type { color: var(--lime); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 900px) {
  .locaties__raster { grid-template-columns: 1fr; }
  .plekken { max-height: none; }
  .kaart { height: 400px; min-height: 0; }
}

/* ---------------------------------------------------------------- partner */

.partner { background: var(--zwart); }

.partner__kaart {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  padding: clamp(28px, 6vw, 80px);
  border: 1px solid var(--lijn-2);
  border-radius: calc(var(--hoek-groot) + 8px);
  overflow: hidden;
  background: linear-gradient(145deg, #11151a 0%, #080a0c 60%);
  isolation: isolate;
}

.partner__gloed {
  position: absolute;
  right: -20%; top: -40%;
  z-index: -1;
  width: 80%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 255, 46, 0.14), transparent 70%);
}

.partner__tekst { display: grid; gap: 22px; align-content: start; }
.partner__tekst h2 { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); font-weight: 750; line-height: 1.02; letter-spacing: -0.04em; }

.formulier { display: grid; gap: 18px; align-content: start; }

.formulier__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.veld { display: grid; gap: 7px; }
.veld > span { color: var(--grijs); font-size: 0.875rem; font-weight: 500; }
.veld abbr { color: var(--lime); text-decoration: none; }

.veld input, .veld select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--lijn-2);
  border-radius: 14px;
  background: rgba(5, 6, 7, 0.6);
  color: var(--wit);
  font: 500 1rem var(--letter);
  transition: border-color 0.25s, box-shadow 0.25s;
  appearance: none;
}

.veld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a6acb4' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.veld input::placeholder { color: var(--grijs-2); }
.veld input:focus, .veld select:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 4px var(--lime-waas);
}

.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulier__klein { color: var(--grijs-2); font-size: 0.875rem; }

.formulier__melding { padding: 14px 16px; border-radius: 14px; font-size: 0.9375rem; }
.formulier__melding--goed { background: var(--lime-waas); color: var(--lime); border: 1px solid rgba(200, 255, 46, 0.3); }
.formulier__melding--fout { background: rgba(255, 110, 90, 0.1); color: #ff9e8c; border: 1px solid rgba(255, 110, 90, 0.3); }

@media (max-width: 960px) {
  .partner__kaart { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .formulier__raster { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- faq */

.faq { background: var(--antraciet); }

.faq__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.accordeon { border-top: 1px solid var(--lijn); }

.vraag { border-bottom: 1px solid var(--lijn); }

.vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
  color: var(--wit);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--lime); }

.vraag__ic { flex: 0 0 auto; color: var(--grijs); transition: transform 0.4s var(--traag), color 0.3s; }
.vraag[open] .vraag__ic { transform: rotate(45deg); color: var(--lime); }

.vraag__antwoord { padding: 0 48px 28px 0; }
.vraag__antwoord p { max-width: 62ch; }

@media (max-width: 900px) {
  .faq__raster { grid-template-columns: 1fr; }
  .vraag__antwoord { padding-right: 0; }
}

/* ------------------------------------------------------------ vertrouwen */

.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 64px; opacity: 0.7; }
.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin: 64px 0 0; }
.cijfers dd { margin: 0; color: var(--wit); font-size: 3rem; font-weight: 750; letter-spacing: -0.04em; }
.citaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 64px; }
.citaat { margin: 0; padding: 32px; border: 1px solid var(--lijn); border-radius: var(--hoek); background: var(--vlak); }
.citaat blockquote { margin: 0 0 20px; color: var(--wit); font-size: 1.25rem; line-height: 1.45; }

/* ------------------------------------------------------------------- voet */

.voet { padding-block: clamp(72px, 9vw, 120px) 40px; border-top: 1px solid var(--lijn); background: var(--zwart); }

.voet__top {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--lijn);
}

.voet__merk { display: grid; gap: 16px; }
.voet__merk img { width: 180px; }
.voet__merk p { color: var(--wit); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; }

.voet__kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  padding-block: 48px;
}

.voet__kolom h2 { margin-bottom: 16px; color: var(--grijs-2); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.voet__kolom ul { display: grid; gap: 10px; }
.voet__kolom a { color: var(--grijs); text-decoration: none; overflow-wrap: anywhere; }
.voet__kolom a:hover { color: var(--wit); }

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

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

html.beweging [data-opkomen] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--traag), transform 1s var(--traag);
}

html.beweging [data-opkomen].is-zichtbaar { opacity: 1; transform: none; }

html.beweging .stap:nth-child(2), html.beweging .feit:nth-child(2), html.beweging .type:nth-child(2) { transition-delay: 0.08s; }
html.beweging .stap:nth-child(3), html.beweging .feit:nth-child(3), html.beweging .type:nth-child(3) { transition-delay: 0.16s; }
html.beweging .feit:nth-child(4), html.beweging .type:nth-child(4) { transition-delay: 0.24s; }
html.beweging .feit:nth-child(5) { transition-delay: 0.32s; }
html.beweging .feit:nth-child(6) { transition-delay: 0.4s; }

/* De hero komt meteen, zonder op scrollen te wachten. */
html.beweging .hero [data-opkomen] { animation: opkomen 1.1s var(--traag) both; transition: none; opacity: 1; transform: none; }
html.beweging .hero [data-opkomen]:nth-child(2) { animation-delay: 0.08s; }
html.beweging .hero [data-opkomen]:nth-child(3) { animation-delay: 0.18s; }
html.beweging .hero [data-opkomen]:nth-child(4) { animation-delay: 0.28s; }

@keyframes opkomen {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- mediaslots */

/* Alleen voor wie #slots achter het adres zet: toont welk slot waar staat. */
html.toon-slots [data-media-slot] { outline: 1px dashed rgba(200, 255, 46, 0.6); outline-offset: -1px; }
html.toon-slots [data-media-slot]::after {
  content: "slot: " attr(data-media-slot);
  position: absolute;
  left: 12px; top: 12px;
  z-index: 5;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--lime);
  color: #050607;
  font: 700 12px/1 var(--letter);
}

/* ------------------------------------------------------------------- pody */

/* Pody in de nieuwe accentkleur. De tokens staan in chargebot.css. */
.premium .cb {
  --cb-accent: #c8ff2e;
  --cb-accent-diep: #b2ec12;
  --cb-accent-waas: rgba(200, 255, 46, 0.14);
  --cb-accent-rand: rgba(200, 255, 46, 0.34);
  --cb-letter: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

/*
  Pody — de publieke assistent van ChargePod
  ==========================================

  Voor bezoekers heet hij Pody. In de code blijft het bestand chargebot heten:
  bestandsnamen, klassen en data-attributen hernoemen voegt risico toe zonder
  dat er iets aan het gedrag verandert. Theo is en blijft de interne assistent
  van het Control Center en komt in de publieke kant nergens voor.

  Deze stijl volgt de goedgekeurde Pody-mock-up: een donker, hoog paneel met
  zachte hoeken, lime accenten en de mascotte zelf als herkenningspunt — zowel
  gesloten rechtsonder als klein in de gespreksbubbels.

  Alle waarden staan als eigen custom properties met een cb-voorvoegsel. Zo
  raakt de widget geen enkele bestaande regel van de site, en kan hij ook nooit
  per ongeluk de tokens van de pagina overschrijven.
*/

.cb {
  --cb-bg: #0B0C0E;
  --cb-vlak: #141619;
  --cb-vlak-2: #1C1F24;
  --cb-rand: #24272D;
  --cb-tekst: #FFFFFF;
  --cb-tekst-2: #9EA3AD;
  --cb-tekst-3: #6B7078;

  /* Het primaire ChargePod-groen. Eén groen, overal. */
  --cb-accent: #A8E82F;
  --cb-accent-diep: #86C41B;
  --cb-accent-waas: rgba(168, 232, 47, .14);
  --cb-accent-rand: rgba(168, 232, 47, .34);

  --cb-letter: Manrope, Poppins, ui-sans-serif, system-ui, sans-serif;

  /* De afstand tot de schermrand. Eén waarde, zodat positie, breedte en
     hoogte per schermmaat samen meeschuiven; zie de media queries onderaan. */
  --cb-marge: 22px;

  position: fixed;
  right: calc(var(--cb-marge) + env(safe-area-inset-right, 0px));
  /* --cb-toetsenbord zet het script zolang de chat openstaat: de hoogte die een
     schermtoetsenbord onderaan wegneemt. Het toetsenbord ligt al over de
     veilige zone heen, dus het is het een of het ander, nooit beide. */
  bottom: calc(var(--cb-marge) + max(env(safe-area-inset-bottom, 0px), var(--cb-toetsenbord, 0px)));
  /* Boven de vaste sitekop, die op 90 staat. */
  z-index: 100;
  font-family: var(--cb-letter);
}

/* ================================================ gesloten: één compacte pill

   Hier stonden een mascotte van 136 pixels, een lime gloed, een grondschaduw,
   een tekstballon met begroeting en een losse knop eronder — samen een blok van
   ruim 250 pixels hoog dat op elke pagina om aandacht vroeg.

   Wat overblijft is waar het om ging: één horizontale knop die zegt wat je
   ermee kunt. De mascotte is niet uit Pody verdwenen; hij staat nog in de kop
   van het gesprek en naast elk bericht. Alleen de etalage is opgeruimd.
*/

.cb-dicht {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Past altijd binnen het scherm, ook op 320 px. */
  max-width: calc(100vw - 2 * var(--cb-marge));
  padding: 7px 9px 7px 10px;
  border: 1px solid var(--cb-accent-rand);
  border-radius: 999px;
  background: #0B0C0E;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: border-color .2s ease, transform .2s ease;
}

.cb[data-open="ja"] .cb-dicht { display: none; }

/*
  De officiële Pody in de knop: hoofd en bovenlichaam uit de master, nooit
  uitgerekt (contain) en zonder kader of cirkel. Pody heeft zelf lime licht,
  dus alleen een heel zachte schaduw erachter.
*/
/* <picture> neemt geen plaats in: het beeld erin is het flex-item. */
.cb-pody-beeld { display: contents; }

.cb-dicht-pody {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(168, 232, 47, .12));
}

.cb-dicht-tekst {
  min-width: 0;
  color: var(--cb-tekst);
  font: 700 14px/1 var(--cb-letter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* De ronde groene knop met de zwarte pijl. */
.cb-dicht-pijl {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--cb-accent);
  color: #0B0C0E;
}

.cb-dicht-pijl svg { display: block; }

.cb-dicht-kort { display: none; }

.cb-dicht:hover {
  border-color: var(--cb-accent);
  transform: translateY(-1px);
}

.cb-dicht:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 3px;
}

/* Het cijfer bij ongelezen berichten, nu op de pill zelf. */
.cb-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #E5484D;
  color: #FFFFFF;
  font: 800 11px/20px var(--cb-letter);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.cb-badge[hidden] { display: none; }

/* ============================================================== het paneel */

.cb-paneel {
  /* De site geeft section en p eigen marges en padding mee; die regels zijn
     niet voor deze widget bedoeld maar raken hem wel. Daarom staat hier
     expliciet wat het paneel zelf wil. */
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: calc(100vw - 2 * var(--cb-marge));
  /* Tachtig procent van de hoogte, met een dak erop zodat het paneel op een
     groot scherm geen kolom van anderhalve meter wordt. dvh telt de balken van
     een mobiele browser mee; de vh-regel erboven is de terugval voor browsers
     die dvh niet kennen. */
  height: min(80vh, 700px);
  height: min(80dvh, 700px);
  /* --cb-zicht is de hoogte die werkelijk te zien is, zonder toetsenbord. Het
     script zet hem; zonder script geldt 100dvh. Zo raakt het paneel nooit de
     bovenrand, ook niet als het toetsenbord opkomt. */
  max-height: calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge));
  background: var(--cb-bg);
  border: 1px solid var(--cb-rand);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
}

.cb-paneel[hidden] { display: none; }

/* Alleen de berichtenlijst geeft hoogte af. Zonder dit krimpt alles een
   beetje mee, en valt bij weinig ruimte het invoerveld onderaan weg. */
.cb-paneel > :not(.cb-loop) { flex-shrink: 0; }

/* Het toetsenbord laat bijna niets over (een telefoon in liggende stand, of
   een heel klein scherm): dan wijkt de voettekst tot het toetsenbord weer
   weg is. Het script zet data-krap. */
.cb[data-krap="ja"] .cb-voet { display: none; }

.cb-kop {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--cb-vlak);
  border-bottom: 1px solid var(--cb-rand);
}

/* Geen ronde uitsnede of achtergrondcirkel: die zou antenne of hand van de officiële Pody afsnijden. */
.cb-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(168, 232, 47, .12));
}

.cb-kop-tekst { min-width: 0; flex: 1; }

.cb-titel { display: block; font: 800 16px/1.25 var(--cb-letter); color: var(--cb-tekst); }
.cb-onder { display: block; font: 500 12px/1.35 var(--cb-letter); color: var(--cb-tekst-2); }

.cb-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font: 600 11.5px/1 var(--cb-letter);
  color: var(--cb-accent);
}

.cb-online::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cb-accent);
}

/* Wacht het gesprek op een mens, dan zegt de kop dat ook. */
.cb-online[data-stand="wacht"] { color: var(--cb-tekst-2); }
.cb-online[data-stand="wacht"]::before { background: var(--cb-tekst-2); }

.cb-sluit {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cb-tekst-2);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.cb-sluit:hover { background: var(--cb-vlak-2); color: var(--cb-tekst); }
.cb-sluit:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 2px; }

/* ============================================================= het gesprek */

.cb-loop {
  /* 1 1 auto en niet flex: 1. Op een telefoon heeft het paneel geen vaste
     hoogte maar groeit het met het gesprek mee tot zijn max-height; een
     basis van 0 zou de lijst daar op niets laten beginnen. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* Onderaan de lijst doorvegen schuift de pagina erachter niet mee. Dat
     maakt een scrollblokkade op de pagina overbodig. */
  overscroll-behavior: contain;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-rand) transparent;
}

.cb-loop::-webkit-scrollbar { width: 6px; }
.cb-loop::-webkit-scrollbar-thumb { background: var(--cb-rand); border-radius: 999px; }

/* Eén regel in het gesprek: avatar naast de bubbel, of alleen de bubbel. */
.cb-rij {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  max-width: 100%;
}

.cb-rij.van-mens { flex-direction: row-reverse; }

.cb-rij-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  object-fit: contain;
}

.cb-bel { min-width: 0; max-width: 86%; }

.cb-bericht {
  padding: 11px 14px;
  border-radius: 18px;
  font: 500 14px/1.55 var(--cb-letter);
  overflow-wrap: anywhere;
}

.cb-bericht.van-bot {
  background: var(--cb-vlak-2);
  border: 1px solid var(--cb-rand);
  color: var(--cb-tekst);
  border-bottom-left-radius: 6px;
}

/* De bezoeker zelf: lime, met donkere tekst voor het contrast. */
.cb-bericht.van-mens {
  background: var(--cb-accent);
  color: #0B0C0E;
  font-weight: 600;
  border-bottom-right-radius: 6px;
}

/* Een medewerker. Zelfde kant als Pody, maar duidelijk iemand anders. */
.cb-bericht.van-chargepod {
  background: var(--cb-vlak-2);
  border: 1px solid var(--cb-accent-rand);
  color: var(--cb-tekst);
  border-bottom-left-radius: 6px;
}

.cb-wie {
  display: block;
  margin-bottom: 3px;
  color: var(--cb-accent);
  font: 800 10.5px/1.2 var(--cb-letter);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cb-tijd {
  display: block;
  margin-top: 4px;
  font: 500 10.5px/1 var(--cb-letter);
  color: var(--cb-tekst-3);
}

.cb-rij.van-mens .cb-tijd { text-align: right; }

/* Een rustige systeemregel, bijvoorbeeld bij een overdracht. */
.cb-systeem {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cb-tekst-3);
  font: 600 11px/1.3 var(--cb-letter);
  text-align: center;
}

.cb-systeem::before,
.cb-systeem::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cb-rand);
}

/* ============================================================== de stand

   Eén regel die meebeweegt: "we zoeken een medewerker" wordt "je vraag staat
   klaar" wordt "Christophe is aangesloten". Vroeger waren dat drie bubbels die
   alle drie bleven staan en ongeveer hetzelfde zeiden.

   Dit is nadrukkelijk geen chatbubbel. Het is een systeemregel onder het
   gesprek, rustiger van toon en zonder afzender.
*/

.cb-stand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-top: 1px solid var(--cb-rand);
  background: var(--cb-vlak);
  color: var(--cb-tekst-2);
  font: 600 11.5px/1.45 var(--cb-letter);
  /* Een lange medewerkersnaam breekt af in plaats van het paneel op te rekken. */
  overflow-wrap: anywhere;
}

.cb-stand[hidden] { display: none; }

/* Aangesloten is goed nieuws; dat mag het groen van ChargePod dragen. */
.cb-stand.is-aangesloten { color: var(--cb-accent); }

.cb-puntjes {
  display: inline-flex;
  gap: 3px;
  flex: 0 0 auto;
}

.cb-puntjes i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  animation: cb-puls 1.25s ease-in-out infinite;
}

.cb-puntjes i:nth-child(2) { animation-delay: .18s; }
.cb-puntjes i:nth-child(3) { animation-delay: .36s; }

@keyframes cb-puls {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}

/* ================================================================= invoer */

.cb-invoer {
  display: flex;
  /* Onderaan uitlijnen: groeit het veld naar een tweede regel, dan blijft de
     verzendknop naast de regel waar je typt. */
  align-items: flex-end;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid var(--cb-rand);
  background: var(--cb-vlak);
}

/*
  Een textarea van één regel die meegroeit tot vier regels, en daarna zelf
  schuift. Een lange vraag stond eerder op één regel die horizontaal wegliep;
  op een telefoon zag je daardoor nooit wat je al getypt had.

  De hoogte zet het script; min- en max-height hier zijn de grenzen.
*/
.cb-invoer textarea {
  flex: 1;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  width: auto;
  min-height: 48px;
  max-height: 104px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cb-rand);
  /* De helft van de minimumhoogte: op één regel een pill, op meer regels een
     afgeronde rechthoek. */
  border-radius: 24px;
  background: var(--cb-vlak-2);
  color: var(--cb-tekst);
  font: 500 14px/1.3 var(--cb-letter);
  resize: none;
  overflow-y: hidden;
}

.cb-invoer textarea::placeholder { color: var(--cb-tekst-3); }
.cb-invoer textarea:focus { outline: none; border-color: var(--cb-accent); }

/* Het paneel krijgt de focus op een aanraakscherm (zie het script); een rand
   rond het hele paneel zegt daar niets. */
.cb-paneel:focus { outline: none; }

.cb-stuur {
  flex: 0 0 auto;
  /* Achtenveertig bij achtenveertig: een duim is geen muisaanwijzer. */
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--cb-accent);
  color: #0B0C0E;
  cursor: pointer;
}

.cb-stuur:hover { background: var(--cb-accent-diep); }
.cb-stuur:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 3px; }

.cb-status {
  margin: 0;
  max-width: none;
  padding: 0 16px 8px;
  background: var(--cb-vlak);
  color: var(--cb-tekst-2);
  font: 700 11.5px/1.45 var(--cb-letter);
}

.cb-status[hidden] { display: none; }

.cb-voet {
  margin: 0;
  /* De site zet een leesbreedte op elke p; binnen dit smalle paneel zou die
     alleen maar in de weg zitten. */
  max-width: none;
  padding: 0 16px 12px;
  background: var(--cb-vlak);
  color: var(--cb-tekst-3);
  font: 500 10.5px/1.5 var(--cb-letter);
}

/* =============================================================== schermen

   Op elke maat blijft Pody een venster dat zweeft, nooit een scherm dat de
   pagina vervangt.

   - bureaublad: 420 breed, een vaste hoogte met een dak, rechtsonder;
   - tablet (tot 1023): 400 breed, hoogstens driekwart van het scherm;
   - telefoon (tot 767): hoogstens 360 breed en 70% hoog. De hoogte volgt het
     gesprek: een begroeting is een klein venster, een lang gesprek groeit tot
     het dak en schuift dan;
   - kleine telefoon (tot 379): smallere marge, strakkere binnenmaten;
   - lage schermen (tot 540 hoog, zoals een telefoon in liggende stand): daar
     is 70% te weinig om nog te kunnen typen. Alleen daar mag het paneel de
     volle zichtbare hoogte nemen, en nog steeds met een marge rondom.

   Kop en invoer staan altijd vast; alleen .cb-loop schuift.

   Hier stond eerder een schermvullend paneel voor telefoons, met een
   scrollblokkade op de pagina. Dat voelde als een app die de site overnam
   voor wat meestal één vraag is.
*/

@media (max-width: 1023px) {
  .cb { --cb-marge: 16px; }

  .cb-paneel {
    width: 400px;
    height: min(620px, 74vh);
    height: min(620px, 74dvh);
  }
}

@media (max-width: 767px) {
  .cb { --cb-marge: 12px; }

  .cb-dicht { gap: 10px; padding: 6px 7px 6px 8px; }
  .cb-dicht-pody { width: 36px; height: 36px; }
  .cb-dicht-tekst { font-size: 13.5px; }
  .cb-dicht-pijl { width: 34px; height: 34px; }
}

/*
  Telefoon: dezelfde knop, compacter. Pody blijft even groot als op de tablet, de
  tekst wordt "Vraag Pody" en de pijl iets kleiner, zodat de knop rechtsonder
  blijft en niet half over de inhoud ligt. De volledige zin staat in aria-label.
*/
@media (max-width: 480px) {
  .cb-dicht { gap: 8px; padding: 5px 5px 5px 7px; }
  .cb-dicht-pody { width: 38px; height: 38px; }
  .cb-dicht-lang { display: none; }
  .cb-dicht-kort { display: inline; }
  .cb-dicht-pijl { width: 30px; height: 30px; }
}

/*
  Op een smal scherm staat de cookiemelding over de volle breedte onderaan, precies
  waar de knop staat (en erboven: z-index 150 tegen 100). Zolang die melding open is
  (toestemming.js zet dan html.ts-melding-open), is de knop dus toch niet te zien of
  aan te tikken; nu ligt hij er ook niet meer onder. Na de keuze staat hij er gewoon.
*/
@media (max-width: 767px) {
  html.ts-melding-open .cb[data-open="nee"] .cb-dicht { visibility: hidden; }
}

@media (max-width: 767px) {

  .cb-paneel {
    width: calc(100vw - 2 * var(--cb-marge));
    max-width: 360px;
    height: auto;
    /* Een ondergrens voor het moment dat een hervat gesprek nog laadt en de
       lijst leeg is. Lager dan een paneel met alleen de begroeting, zodat daar
       geen lege strook onder komt. Nooit boven de bovengrens. */
    min-height: min(240px, calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge)));
    max-height: min(70dvh, calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge)));
    border-radius: 22px;
  }

  .cb-bel { max-width: 84%; }
}

@media (max-width: 379px) {
  .cb { --cb-marge: 8px; }

  .cb-dicht { padding-left: 6px; }
  .cb-dicht-tekst { font-size: 13px; }

  .cb-paneel {
    min-height: min(220px, calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge)));
    max-height: min(68dvh, calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge)));
    border-radius: 18px;
  }
}

@media (max-height: 540px) {
  .cb { --cb-marge: 8px; }

  .cb-paneel {
    height: auto;
    min-height: 0;
    max-height: calc(var(--cb-zicht, 100dvh) - 2 * var(--cb-marge));
    border-radius: 18px;
  }
}

/* Zestien pixels is geen smaak: daaronder zoomt Safari op een iPhone of iPad
   de hele pagina in zodra je in het veld tikt, en dan past er niets meer.
   Daarom op elk aanraakscherm, niet alleen op een smal scherm. De kleinere
   padding houdt het veld op één regel even hoog als de verzendknop. */
@media (pointer: coarse) {
  .cb-invoer textarea { padding-block: 12px; font-size: 16px; }
}

/* ------------------------------------------------- compacte binnenmaten

   Op een telefoon, en op elk laag scherm, telt elke verticale pixel. Dezelfde
   inhoud, strakker gezet. */

@media (max-width: 767px), (max-height: 540px) {
  .cb-kop { gap: 9px; padding: 8px 6px 8px 12px; }
  .cb-avatar { width: 34px; height: 34px; }

  /* Twee regels in plaats van drie: de naam bovenaan, ondertitel en stand
     ernaast eronder. Is de stand lang ("Christophe helpt je"), dan breekt hij
     gewoon af naar een eigen regel. */
  .cb-kop-tekst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 1px;
  }

  .cb-titel { flex-basis: 100%; font-size: 15px; line-height: 1.2; }
  .cb-onder { font-size: 11.5px; line-height: 1.3; }
  .cb-online { margin-top: 0; font-size: 11px; }

  /* Een raakvlak van vierenveertig pixels dat de kop niet hoger maakt: de
     negatieve marge geeft de extra ruimte terug aan de rand. */
  .cb-sluit { width: 44px; height: 44px; margin-block: -6px; }

  .cb-loop { padding: 12px 10px; gap: 10px; }
  .cb-rij { gap: 7px; }
  .cb-rij-avatar { width: 26px; height: 26px; }

  .cb-bericht { padding: 9px 12px; border-radius: 16px; line-height: 1.5; }
  .cb-tijd { margin-top: 3px; }

  .cb-stand { padding: 7px 12px; font-size: 11px; }

  .cb-invoer { gap: 8px; padding: 8px 10px; }

  /* Drie regels en dan schuiven: met het toetsenbord open is elke regel van
     het veld een regel minder gesprek. */
  .cb-invoer textarea {
    min-height: 44px;
    max-height: 88px;
    padding: 10px 14px;
    border-radius: 22px;
    font-size: 16px;
    line-height: 1.35;
  }

  .cb-stuur { width: 44px; height: 44px; }

  .cb-status { padding: 0 12px 6px; }
  .cb-voet { padding: 0 12px 9px; font-size: 10px; line-height: 1.4; }
}

@media (max-width: 379px) {
  .cb-kop { gap: 8px; padding: 7px 4px 7px 10px; }
  .cb-avatar { width: 30px; height: 30px; }
  .cb-titel { font-size: 14px; }

  .cb-loop { padding: 10px 8px; gap: 8px; }
  .cb-rij { gap: 6px; }
  .cb-rij-avatar { width: 22px; height: 22px; }

  .cb-bericht { padding: 8px 11px; font-size: 13.5px; line-height: 1.45; }

  .cb-invoer { gap: 6px; padding: 7px 8px; }
  .cb-invoer textarea { padding: 10px 12px; }

  .cb-status { padding: 0 10px 6px; }
  .cb-voet { padding: 0 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb *,
  .cb *::before,
  .cb *::after { transition: none !important; animation: none !important; }
}

/* De privacylink in de voet van het paneel: zelfde kleur als de tekst, onderlijnd. */
.cb-voet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/*
  Cookietoestemming — melding onderaan en het venster "Cookievoorkeuren".

  Eigen tokens met een ts-voorvoegsel, net als de Pody-widget: dit blok komt in
  zowel site.css (homepage) als styles.css (de andere pagina's) en mag van geen
  van beide iets overnemen of overschrijven. Lettertype: dat van de pagina.

  Twee regels uit de opdracht die de vorm bepalen:
  - "Alleen noodzakelijk" is even groot en even goed leesbaar als "Alles
    accepteren". Accepteren is gevuld lime, noodzakelijk een witte rand op
    donker: allebei duidelijk, geen van beide verstopt.
  - Geen layoutsprong: de melding ligt vast over de pagina, schuift niets op.
*/

.ts-melding,
.ts-venster {
  --ts-bg: #0b0c0e;
  --ts-vlak: #141619;
  --ts-rand: rgba(255, 255, 255, 0.14);
  --ts-rand-sterk: rgba(255, 255, 255, 0.72);
  --ts-tekst: #ffffff;
  --ts-tekst-2: #b4b9c1;
  --ts-lime: #c8ff2e;
  --ts-lime-hover: #d6ff5c;
  --ts-lime-waas: rgba(200, 255, 46, 0.16);
  --ts-hoek: 20px;

  box-sizing: border-box;
  color: var(--ts-tekst);
  font-family: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ts-melding *,
.ts-venster * { box-sizing: border-box; }

.ts-titel {
  margin: 0 0 6px;
  color: var(--ts-tekst);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ts-tekst { margin: 0; color: var(--ts-tekst-2); font-size: 0.9rem; }
.ts-tekst a,
.ts-klein a { color: var(--ts-tekst); text-decoration: underline; text-underline-offset: 3px; }
.ts-tekst a:hover,
.ts-klein a:hover { color: var(--ts-lime); }

/* ------------------------------------------------------------------ melding */

.ts-melding {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  /* Boven de sitekop (90–100) en Pody (100), onder de link "Naar de inhoud" (200). */
  z-index: 150;
  width: min(440px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--ts-rand);
  border-radius: var(--ts-hoek);
  background: var(--ts-bg);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  animation: ts-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes ts-in {
  from { transform: translateY(12px); opacity: 0.001; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-melding { animation: none; }
}

.ts-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.ts-knop {
  flex: 1 1 150px;
  min-height: 46px;
  padding: 11px 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ts-knop--hoofd { background: var(--ts-lime); color: #0b0c0e; }
.ts-knop--hoofd:hover { background: var(--ts-lime-hover); }

.ts-knop--rand { border-color: var(--ts-rand-sterk); background: transparent; color: var(--ts-tekst); }
.ts-knop--rand:hover { border-color: var(--ts-tekst); background: rgba(255, 255, 255, 0.06); }

.ts-knop--tekst {
  flex-basis: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: transparent;
  color: var(--ts-tekst);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ts-knop--tekst:hover { color: var(--ts-lime); }

.ts-knop:focus-visible,
.ts-sluit:focus-visible,
.ts-melding a:focus-visible,
.ts-venster a:focus-visible,
.ts-schakel input:focus-visible + .ts-schakel__baan {
  outline: 3px solid var(--ts-lime);
  outline-offset: 3px;
}

/* Telefoon: over de volle breedte onderaan, knoppen onder elkaar. */
@media (max-width: 560px) {
  .ts-melding {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 20px max(16px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: var(--ts-hoek) var(--ts-hoek) 0 0;
  }
  .ts-knop { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ venster */

.ts-venster {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ts-rand);
  border-radius: var(--ts-hoek);
  background: var(--ts-bg);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

.ts-venster[open] { display: block; }
.ts-venster::backdrop { background: rgba(0, 0, 0, 0.62); }

.ts-venster__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.ts-venster__kop .ts-titel { font-size: 1.3rem; margin: 4px 0 6px; }

.ts-sluit {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ts-rand);
  border-radius: 999px;
  background: transparent;
  color: var(--ts-tekst);
  cursor: pointer;
}
.ts-sluit:hover { border-color: var(--ts-rand-sterk); }

.ts-lijst { display: grid; gap: 10px; margin-top: 18px; }

.ts-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--ts-rand);
  border-radius: 14px;
  background: var(--ts-vlak);
}

.ts-cat__naam { display: block; color: var(--ts-tekst); font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.ts-cat__tekst p { margin: 4px 0 0; color: var(--ts-tekst-2); font-size: 0.85rem; }
.ts-cat__stand {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ts-tekst);
  font-size: 0.75rem;
  font-weight: 600;
}

/* De schakelaar: een echte checkbox (role=switch), visueel een baan met bol. */
.ts-schakel { position: relative; flex: 0 0 auto; width: 48px; height: 28px; margin-top: 2px; }
.ts-schakel input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ts-schakel input:disabled { cursor: not-allowed; }
.ts-schakel__baan {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--ts-rand-sterk);
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
.ts-schakel__baan::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ts-tekst);
  transform: translateY(-50%);
  transition: transform 0.15s;
}
.ts-schakel input:checked + .ts-schakel__baan { border-color: var(--ts-lime); background: var(--ts-lime); }
.ts-schakel input:checked + .ts-schakel__baan::after { background: #0b0c0e; transform: translate(19px, -50%); }
.ts-schakel input:disabled + .ts-schakel__baan { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .ts-schakel__baan,
  .ts-schakel__baan::after { transition: none; }
}

.ts-venster__voet { margin-top: 20px; }
/* Drie knoppen naast elkaar zonder dat een label over twee regels breekt; past het niet, dan een rij erbij. */
.ts-venster__voet .ts-knop { flex-basis: 140px; padding-inline: 14px; white-space: nowrap; }
.ts-klein { margin: 14px 0 0; color: var(--ts-tekst-2); font-size: 0.8rem; }

@media (max-width: 560px) {
  .ts-venster { padding: 20px 16px; }
  .ts-venster__voet .ts-knop { flex-basis: 100%; }
}

/* De voetlink "Cookievoorkeuren" is een link naar /cookiebeleid/#voorkeuren die het venster opent. */