/* TSPSB — variant D "Donker en technisch" (mockups/ronde2/D, gekozen door Heico 2026-10-30).
   Alle kleuren en fonts komen uit tokens.css; hier alleen de maten van de site. */

:root {
  /* de site draait op de maten van mockup D; tokens.css' --pad blijft voor de webshop */
  --pad: 56px;
  --kol: 112px;  /* middenkolom = kabelkanaal, ligt precies op 50% */
  --as: 50%;
}

@media (max-width: 1200px) {
  :root { --pad: 40px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--dark); scroll-behavior: smooth; }
body {
  margin: 0;
  position: relative;
  overflow-x: clip;
  background: var(--dark);
  color: var(--on-dark);
  font: 17px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
h1, h2, h3 { font-family: var(--font-head); }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: var(--pad); top: -60px; z-index: 20;
  background: var(--cream); color: var(--dark); padding: 10px 14px; font-weight: 600;
}
.skip:focus { top: 12px; }

h2 {
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* het raster: kolom · kabelkanaal · kolom */
.split, .legenda, .werk-kop, .over, .contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kol) minmax(0, 1fr);
  padding-inline: var(--pad);
}

/* ---------- nav ---------- */
.nav {
  position: absolute; top: 0; left: 0; z-index: 10;
  width: 50%;  /* de nav blijft links van de kabel, de foto rechts staat vrij */
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  padding: 30px 24px 30px var(--pad);
}
.mark { margin-right: auto; }
.mark img { width: 240px; }
.menu ul { display: flex; gap: 28px; font-size: 15.5px; color: var(--on-dark-2); }
.menu a { transition: color .2s; }
.menu a:hover { color: var(--cream); }
.lang { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--on-dark-3); }
.lang a {
  font: 600 13px/1 var(--font-body); letter-spacing: .06em;
  padding: 8px 4px; color: var(--on-dark-3); transition: color .2s;
}
.lang a:hover { color: var(--cream); }
.lang a[aria-current] { color: var(--cream); text-decoration: underline; text-underline-offset: 5px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: clamp(680px, 100svh, 980px);
  display: flex; align-items: center;
  padding: 150px var(--pad) 96px;
}
.hero-foto {
  position: absolute; top: 0; bottom: 0; left: 47%; right: 0;
  overflow: hidden; background: var(--dark);
}
.hero-foto img {
  width: 109%; max-width: none; height: 100%;
  object-fit: cover; object-position: 50% 70%;
  /* het enige verloop op de pagina: het masker dat de foto in het donker laat lopen */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 14%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.label {
  position: absolute; right: var(--pad); bottom: 40px;
  background: var(--dark); color: var(--cream);
  font-size: 13.5px; padding: 8px 12px;
}
.label b { font-family: var(--font-head); font-weight: 600; margin-right: 6px; }
.label span { color: var(--on-dark-2); }

.hero-tekst {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: calc(50% - 56px);
}
.eyebrow { font: 600 15px/1 var(--font-head); letter-spacing: .01em; color: var(--on-dark-2); }
h1 {
  margin-top: 26px;
  font-weight: 700;
  font-size: clamp(48px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -0.025em;
}
h1 span { display: block; color: var(--on-dark-2); }
.sub { margin: 28px 0 40px; font-size: 21px; line-height: 1.42; max-width: 22em; color: var(--cream); }

.cta {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--red); color: var(--on-red);
  font: 600 17px/1 var(--font-body);
  padding: 18px 26px; border: 0; border-radius: 0; cursor: pointer;
  transition: background .2s;
}
.cta i { font-style: normal; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.cta:hover { background: var(--red-press); }
.cta:hover i { transform: translateX(4px); }

.snel {
  display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 4px;
  margin-top: 44px; padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  font-size: 15.5px; align-self: stretch;
}
.snel dt { flex-basis: 100%; font-size: 12.5px; color: var(--on-dark-3); margin-bottom: 2px; }
.snel dd { font-weight: 600; }
.snel a { transition: color .2s; }
.snel a:hover { color: var(--on-dark-2); }

/* ---------- diensten: het schema ---------- */
.diensten { padding-block: 150px 112px; }
.split h2 { grid-column: 1; }

/* de thuisbatterij voorop: haar tekst staat als bijschrift naast de batterij in het schema.
   Posities in % van het schema, dat met de breedte meeschaalt (viewBox 1120x470). */
.schema-blok { position: relative; margin: 72px var(--pad) 0; }
.lead { position: absolute; z-index: 3; left: 57.5%; top: 8.5%; width: 30.5%; }
.lead h3 { font-size: clamp(21px, 1.85vw, 27px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.lead p { margin-top: 12px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.45; }
.schema-breed .lbl-lead { display: none; }
.glyph { display: none; }

.schema { position: relative; z-index: 2; }
.schema-breed { display: block; width: 100%; height: auto; overflow: visible; }
.schema-breed * { vector-effect: non-scaling-stroke; }
.schema-breed .rail-aan { vector-effect: none; }  /* pathLength-streepjes kloppen alleen zonder non-scaling */

.lbl { font: 15px var(--font-body); fill: var(--on-dark-2); text-anchor: middle; transition: fill .3s; }
.lbl-lead { font: 600 22px var(--font-head); fill: var(--cream); text-anchor: start; }
.lbl-klein { font-size: 13px; letter-spacing: .04em; fill: var(--on-dark-3); }

.knoop { color: var(--draad-aan); transition: color .5s var(--d, 0s); }
.tak { fill: none; stroke: currentColor; stroke-width: 1.5; }
.romp { fill: var(--dark); stroke: var(--draad-aan); stroke-width: 1.5; }
.cel {
  fill: var(--draad-aan); stroke: var(--draad-aan); stroke-width: 1.5;
  transition: fill .3s var(--d, 0s), stroke .3s var(--d, 0s);
}
.raam { fill: var(--cream); stroke: var(--draad-aan); stroke-width: 1.5; transition: fill .5s .2s; }
.rail { fill: none; stroke: var(--draad); stroke-width: 1.25; transition: stroke .3s; }
.rail-aan {
  fill: none; stroke: var(--draad-aan); stroke-width: 2;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .55s cubic-bezier(.3, .6, .3, 1);
}
.knooppunt { fill: var(--red); transition: opacity .2s; }
.rotor { animation: draai 7s linear infinite paused; }
.schema-breed:has(.bus.aan) .rotor, html:not(.js) .rotor { animation-play-state: running; }
@keyframes draai { to { transform: rotate(360deg); } }

/* uit-toestand: alleen met JS, zodat de pagina zonder JS volledig "aan" staat */
.js .schema-breed:not(:has(.bus.aan)) .knoop { color: var(--draad); }
.js .accu:not(.aan) .cel, .js .glyph-accu:not(.aan) .cel { fill: transparent; stroke: var(--draad); }
.js .huis:not(.aan) .raam, .js .glyph-huis:not(.aan) .raam { fill: var(--dark); }
.js .bus:not(.aan) .rail-aan { stroke-dashoffset: 1; }
.js .bus:not(.aan) .knooppunt { opacity: 0; }

/* lijst met dienstnamen en klanttekst, desktop: twee tekstkolommen naast het kabelkanaal */
.legenda { margin-top: 72px; }
.legenda li {
  grid-column: 1;
  display: grid; grid-template-columns: 11em minmax(0, 1fr); column-gap: 24px;
  padding: 18px 0 28px;
  border-top: 1px solid var(--line-dark);
  transition: border-color .25s;
}
.legenda li:nth-child(1), .legenda li:nth-child(5) { grid-row: 1; }
.legenda li:nth-child(2), .legenda li:nth-child(6) { grid-row: 2; }
.legenda li:nth-child(3), .legenda li:nth-child(7) { grid-row: 3; }
.legenda li:nth-child(4) { grid-row: 4; }
.legenda li:nth-child(n+5) { grid-column: 3; }
.legenda li:hover { border-top-color: var(--draad-aan); }
.legenda h3 { font-size: 18px; font-weight: 600; line-height: 1.25; }
.legenda p { font-size: 15.5px; line-height: 1.5; color: var(--on-dark-2); }
.legenda .sym { display: none; }

/* hover op een dienst licht zijn symbool in het schema op */
.diensten:has(li[data-node=zon]:hover) .n-zon,
.diensten:has(li[data-node=wind]:hover) .n-wind,
.diensten:has(li[data-node=wkk]:hover) .n-wkk,
.diensten:has(li[data-node=trafo]:hover) .n-trafo,
.diensten:has(li[data-node=mobiel]:hover) .n-mobiel,
.diensten:has(li[data-node=laad]:hover) .n-laad { color: var(--cream); transition-delay: 0s; }
.diensten:has(li[data-node=zon]:hover) .n-zon .lbl,
.diensten:has(li[data-node=wind]:hover) .n-wind .lbl,
.diensten:has(li[data-node=wkk]:hover) .n-wkk .lbl,
.diensten:has(li[data-node=trafo]:hover) .n-trafo .lbl,
.diensten:has(li[data-node=mobiel]:hover) .n-mobiel .lbl,
.diensten:has(li[data-node=laad]:hover) .n-laad .lbl,
.diensten:has(li[data-node=grid]:hover) .bus .lbl { fill: var(--cream); }
.diensten:has(li[data-node=grid]:hover) .bus .rail { stroke: var(--cream); }

/* ---------- werk: de lichtbak ---------- */
.werk { padding-top: 24px; }
.werk-kop { padding-bottom: 44px; }
.werk-kop h2 { grid-column: 1; }

.lichtbak { position: relative; z-index: 2; background: var(--cream); color: var(--dark); }
.rail-l, .rail-r { position: absolute; top: 0; height: 3px; background: var(--red); transition: transform var(--tr, .45s) linear .05s; }
.rail-l { left: 0; width: var(--as); transform-origin: 100% 50%; transition-duration: var(--tl, .45s); }
.rail-r { left: var(--as); right: 0; transform-origin: 0 50%; }
.rail-knoop {
  position: absolute; top: -3px; left: calc(var(--as) - 4.5px);
  width: 9px; height: 9px; border-radius: 50%; background: var(--red);
}
.js .lichtbak:not(.aan) .rail-l, .js .lichtbak:not(.aan) .rail-r { transform: scaleX(0); }

.strook {
  display: flex; gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  padding: 56px var(--pad) 36px;
  scrollbar-width: thin; scrollbar-color: var(--line-cream) transparent;
}
.strook:focus-visible { outline-color: var(--dark); outline-offset: -6px; }
.tegel { flex: 0 0 clamp(220px, 20vw, 300px); position: relative; scroll-snap-align: start; }
.tegel::before {
  content: ""; position: absolute; left: calc(50% - 1px); top: -56px;
  width: 2px; height: 56px; background: var(--red);
  transform-origin: 50% 0; transition: transform .3s cubic-bezier(.3, .6, .3, 1) calc(var(--d, .12s) - .12s);
}
.tegel::after {
  content: ""; position: absolute; left: calc(50% - 4px); top: -7px;
  width: 8px; height: 7px; background: var(--red);
  transition: opacity .1s calc(var(--d, .12s) + .14s);
}
.js .lichtbak:not(.aan) .tegel::before { transform: scaleY(0); }
.js .lichtbak:not(.aan) .tegel::after { opacity: 0; }
.ph { aspect-ratio: 3 / 4; background: var(--dark-2); overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.js .tegel img { filter: brightness(.28) saturate(.5); }
.js .lichtbak.aan .tegel img { filter: none; animation: aan .9s linear var(--d, .12s) both; }
@keyframes aan {
  0% { filter: brightness(.28) saturate(.5); }
  12% { filter: brightness(1.08) saturate(1); }
  20% { filter: brightness(.5) saturate(.7); }
  30% { filter: brightness(1.04) saturate(1); }
  40%, 100% { filter: none; }
}
.tegel figcaption { display: grid; padding-top: 14px; line-height: 1.3; }
.tegel figcaption b { font: 600 13px/1.3 var(--font-head); color: var(--ink-2); letter-spacing: .02em; margin-bottom: 4px; }
.plek { font-size: 17px; font-weight: 600; }
.opst { font-size: 14px; color: var(--ink-2); }

/* ---------- over: één foto die de kabel aftakt ---------- */
.over { padding-block: 150px 140px; align-items: start; }
.over h2 { grid-column: 1; grid-row: 1; }
/* tekst op dezelfde hoogte als de foto, zodat de aftakking midden tussen beide door loopt */
.over p { grid-column: 3; grid-row: 2; align-self: center; margin-top: 56px; font-size: 22px; line-height: 1.5; max-width: 32em; }
.over-foto { grid-column: 1; grid-row: 2; position: relative; width: min(100%, 480px); margin-top: 56px; }
.over-foto .ph { aspect-ratio: 4 / 5; }
.over-foto .label { left: 16px; right: auto; bottom: 16px; }
/* de aftakking: van de kabel (--tap, gemeten door site.js) naar de rand van de foto */
.tap {
  position: absolute; top: 50%; left: 100%;
  width: var(--tap, 0px); height: 2.5px; margin-top: -1.25px;
  background: var(--red);
  transform-origin: 100% 50%; transition: transform .35s cubic-bezier(.3, .6, .3, 1);
}
.tap::before {
  content: ""; position: absolute; right: -4.5px; top: -3.25px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--red);
}
.tap::after {
  content: ""; position: absolute; left: 0; top: -2.75px;
  width: 7px; height: 8px; background: var(--red);
  transition: opacity .1s .4s;
}
.js .over-foto:not(.aan) .tap { transform: scaleX(0); }
.js .over-foto:not(.aan) .tap::after { opacity: 0; }
.js .over-foto img { filter: brightness(.28) saturate(.5); }
.js .over-foto.aan img { filter: none; animation: aan .9s linear .42s both; }

/* ---------- contact ---------- */
.contact { padding-bottom: 150px; align-items: start; }
.contact-kop { grid-column: 1; }
.contact .intro { margin-top: 24px; max-width: 30em; color: var(--on-dark-2); }
.snel-blok { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.snel-blok h3 { font: 400 12.5px/1.5 var(--font-body); color: var(--on-dark-3); margin-bottom: 6px; }
.snel-blok address { display: grid; gap: 2px; font-weight: 600; }

.form {
  grid-column: 3;
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px 28px;
  padding-top: 10px;
}
.field { position: relative; display: flex; flex-direction: column; }
.field label { font-size: 13px; color: var(--on-dark-2); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  appearance: none; width: 100%;
  background: transparent; color: var(--cream);
  font: 17px/1.4 var(--font-body);
  border: 0; border-bottom: 1px solid var(--draad); border-radius: 0;
  padding: 8px 0 10px; transition: border-color .2s, box-shadow .2s;
}
.field select { padding-right: 24px; cursor: pointer; }
.field select option { background: var(--dark); color: var(--cream); }
.field:has(select)::after {
  content: ""; position: absolute; right: 4px; bottom: 19px;
  width: 7px; height: 7px; pointer-events: none;
  border-right: 1.5px solid var(--on-dark-2); border-bottom: 1.5px solid var(--on-dark-2);
  transform: rotate(45deg);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--cream); box-shadow: 0 1px 0 var(--cream);
}
.field-wide, .send, .note { grid-column: 1 / -1; }
.send { padding-top: 6px; }
.note { font-size: 15px; color: var(--on-dark-2); }
.note:empty { display: none; }

/* ---------- footer ---------- */
.footer {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 32px;
  margin-inline: var(--pad); padding: 40px 0 56px;
  border-top: 1px solid var(--line-dark);
  font-size: 14.5px; color: var(--on-dark-2);
}
.footer-logo { width: 200px; }
.footer-info { display: grid; gap: 8px; justify-items: end; }
.footer a { transition: color .2s; }
.footer a:hover { color: var(--cream); }
.legal { font-size: 13px; color: var(--on-dark-3); display: flex; gap: 14px; }

/* ---------- de kabel (getekend door site.js) ---------- */
#kabel { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
#kabel .goot { fill: none; stroke: var(--goot); stroke-width: 1.5; }
#kabel .live { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: square; }
#kabel .clip { fill: var(--draad); }
#kabel .kop { fill: var(--cream); transition: opacity .3s; }

/* tussenmaat: te smal voor het bijschrift naast de batterij, dan staat de tekst boven het schema */
@media (max-width: 1100px) and (min-width: 861px) {
  .schema-blok { display: flex; flex-direction: column; }
  .lead { position: static; order: -1; width: auto; margin: 0 0 64px calc(50% + 56px); }
  .lead p { font-size: 18px; }
  .schema-breed .lbl-lead { display: inline; }
}

/* ---------- smal ---------- */
@media (max-width: 860px) {
  :root { --pad: 28px; }

  .split, .legenda, .werk-kop, .over, .contact { display: block; }

  .nav { position: relative; width: auto; flex-wrap: wrap; row-gap: 10px; column-gap: 20px; padding: 20px var(--pad) 18px; }
  .mark img { width: 150px; }
  .menu { order: 3; flex-basis: 100%; }
  .menu ul { gap: 22px; font-size: 14.5px; }

  .hero { display: block; min-height: 0; padding: 0 0 72px; }
  .hero-foto { position: relative; inset: auto; height: 62svh; max-height: 560px; min-height: 360px; }
  .hero-foto img {
    width: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 72%, transparent 100%);
  }
  .label { left: var(--pad); right: auto; max-width: calc(100% - 2 * var(--pad)); bottom: 64px; font-size: 12.5px; }
  .hero-tekst { max-width: none; margin-top: -40px; padding-inline: var(--pad); }
  h1 { margin-top: 18px; }
  .sub { font-size: 18.5px; margin: 20px 0 0; }
  .snel { order: 3; margin: 28px 0 32px; }
  .cta { order: 4; }

  .diensten { padding-block: 104px 96px; }
  .split, .legenda { padding-inline: var(--pad); }
  .schema-blok { margin: 28px var(--pad) 0; }
  .lead { position: relative; left: auto; top: auto; width: auto; }
  .lead h3 { font-size: 25px; }
  .lead p { font-size: 18.5px; }
  .glyph { display: block; overflow: visible; }
  .glyph > * { fill: var(--dark); stroke: var(--draad-aan); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .glyph .cel { fill: var(--draad-aan); }
  .glyph .raam { fill: var(--cream); }
  .glyph-accu { position: absolute; left: calc(12px - var(--pad) - 11px); top: 0; width: 22px; height: 40px; }
  .glyph-huis { width: 24px; height: 26px; margin-top: 18px; }

  .schema { display: none; }
  .legenda { margin-top: 44px; }
  .legenda li { display: block; position: relative; padding: 16px 0 22px 64px; border-top: 0; }
  .legenda li::before {
    content: ""; position: absolute; left: calc(12px - var(--pad)); top: 33px;
    width: calc(var(--pad) - 12px + 2px); height: 1.5px; background: var(--draad-aan);
    transition: background .4s;
  }
  .legenda .sym {
    display: block; position: absolute; left: 4px; top: 18px; width: 44px; height: 32px;
    color: var(--draad-aan); overflow: visible; transition: color .4s;
  }
  #sym-grid circle { fill: var(--dark); }
  .js .legenda li:not(.aan)::before { background: var(--draad); }
  .js .legenda li:not(.aan) .sym { color: var(--draad); }
  .legenda h3 { font-size: 18px; margin-bottom: 4px; }

  .werk { padding-top: 24px; }
  .werk-kop { padding-bottom: 40px; }
  .strook { gap: 20px; }

  .over { padding-block: 104px 96px; }
  .over-foto { width: 100%; margin-top: 32px; }
  .over-foto .label { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .over p { margin-top: 32px; font-size: 19px; }
  /* smal ligt de kabel links van de foto: de aftakking loopt naar links */
  .tap { left: auto; right: 100%; transform-origin: 0 50%; }
  .tap::before { right: auto; left: -4.5px; }
  .tap::after { left: auto; right: 0; }

  .contact { padding-bottom: 104px; }
  .form { margin-top: 48px; grid-template-columns: 1fr; gap: 26px; }

  .footer { flex-direction: column; align-items: flex-start; }
  .footer-logo { width: 170px; }
  .footer-info { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}