/* ==========================================================================
   JoppeDS Studio's — stijl
   Thema: broadcast-regie. Programmamonitor, lower thirds, tally-lampjes.
   ========================================================================== */

:root {
  /* Zorgt dat de browser zijn eigen onderdelen, zoals de datumkiezer en de
     schuifbalken, in donkere stijl tekent in plaats van het witte standaard. */
  color-scheme: dark;

  --bg:        #14161c;
  --bg-2:      #191c24;
  --panel:     #1e222b;
  --panel-2:   #232833;
  --line:      #2c313d;
  --line-2:    #3a4152;
  --text:      #e9eaee;
  --muted:     #8c92a3;
  --accent:    #ffdf59;
  --accent-dp: #b79a2e;
  --red:       #ff5b52;
  --green:     #4fd18b;

  --display: "Space Grotesk", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --max: 1180px;
  --r:   4px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

/* Het hidden-attribuut moet altijd winnen, ook van display:grid of :flex. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* De topbalk staat vast bovenaan. Zonder deze marge verdwijnt de titel
     van een sectie eronder zodra je er via het menu naartoe springt. */
  scroll-padding-top: 84px;
}
@media (max-width: 900px) { html { scroll-padding-top: 76px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* Lange links en woorden mogen nooit buiten hun kader vallen. */
p, li, blockquote, td, .dl__val { overflow-wrap: break-word; }

a { color: inherit; }

::selection { background: var(--accent); color: #14161c; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* --------------------------------------------------------------------------
   Herbruikbare onderdelen
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 20px;
}

.lead { color: var(--muted); max-width: 56ch; margin: 0; }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.btn--fill { --btn-bg: var(--accent); --btn-fg: #14161c; --btn-bd: var(--accent); font-weight: 700; }
.btn--fill:hover { --btn-bg: #ffe882; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* Tally-lampje: het signaal dat een bron "in beeld" is */
.tally {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
  flex: none;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.is-live .tally,
.tally--on {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 223, 89, .14);
}

/* --------------------------------------------------------------------------
   Topbalk
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(20, 22, 28, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.topbar.is-stuck { border-bottom-color: var(--line); }
.topbar__in { position: relative; }

.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 15px;
}
.brand__mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #14161c;
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.02em;
  flex: none;
  overflow: hidden;
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
/* Zolang assets/img/logo.svg ontbreekt, valt de mark terug op de letters JDS. */
.brand__mark img ~ .brand__fallback { display: none; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 10px 11px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--r);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--accent); }

/* De aanvraagknop is geen gewone menulink. Hij erfde eerst de padding van
   .nav a, waardoor de rand hem hoger maakte dan de rest en de balk scheef
   oogde. Daarom eigen maten en een vaste regelhoogte. */
.nav a.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  line-height: 1;
  margin-left: 10px;
  color: var(--accent);
  font-weight: 700;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav a.nav__cta:hover { background: var(--accent); color: #14161c; }


.timecode {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.timecode__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  animation: rec 2.4s var(--ease) infinite;
}
@keyframes rec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }


/* --------------------------------------------------------------------------
   Menu op telefoon en tablet
   --------------------------------------------------------------------------
   Vroeger verdwenen menu-items gewoon op smalle schermen. Nu schuift het
   volledige menu open onder de balk, zodat elke sectie bereikbaar blijft.
   -------------------------------------------------------------------------- */

.topbar__rechts { display: flex; align-items: center; gap: 14px; }

.hamburger {
  display: none;
  width: 42px; height: 42px;
  padding: 11px 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color .2s var(--ease);
}
.hamburger:hover { border-color: var(--accent); }
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.hamburger[aria-expanded="true"] span { background: var(--accent); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
  .hamburger { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px var(--gut) 22px;
    /* Volledig ondoorzichtig: de pagina eronder mag niet doorschijnen,
       anders is het menu slecht leesbaar boven de hero. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    z-index: 5;

    /* Dicht: onzichtbaar en niet aanklikbaar, maar wel netjes weg-animerend */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav a {
    padding: 15px 4px;
    font-size: 13px;
    letter-spacing: .1em;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-of-type { border-bottom: 0; }

  .nav a.nav__cta {
    margin: 16px 0 0;
    justify-content: center;
    padding: 15px;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Hero — de programmamonitor
   -------------------------------------------------------------------------- */

.hero { padding: 122px 0 0; position: relative; }

.hero::before {
  /* rasterlijnen, heel licht — als een monitor-overlay */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .28;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 78%);
  pointer-events: none;
}

.monitor {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: clamp(26px, 5vw, 58px);
  overflow: hidden;
}

/* Hoekmarkeringen zoals in een camerazoeker */
.monitor__corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--accent);
  opacity: .55;
}
.monitor__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.monitor__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.monitor__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.monitor__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.monitor__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(30px, 6vw, 60px);
}
.monitor__onair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-weight: 700;
}

/* Lower third: schuift in zoals een live-overlay */
.lower {
  position: relative;
  padding-left: clamp(16px, 3vw, 26px);
  max-width: 20ch;
}
.lower::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  animation: bar-in .6s var(--ease) .1s forwards;
}
@keyframes bar-in { to { transform: scaleY(1); } }

.hero__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.hero__title {
  font-size: clamp(42px, 9.5vw, 104px);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 700;
  margin: 0 0 22px;
}
.hero__title .apos { color: var(--accent); }

.hero__sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 34px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Elk element van de hero komt na elkaar in beeld, als een grafiek-sequentie */
.seq { opacity: 0; transform: translateY(14px); animation: seq-in .7s var(--ease) forwards; }
.seq--1 { animation-delay: .15s; }
.seq--2 { animation-delay: .28s; }
.seq--3 { animation-delay: .41s; }
.seq--4 { animation-delay: .54s; }
.seq--5 { animation-delay: .67s; }
@keyframes seq-in { to { opacity: 1; transform: none; } }

/* Statistiekenstrook onderaan de monitor.
   Op smalle schermen onder elkaar, vanaf 560px naast elkaar. */
.readout {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--panel);
  overflow: hidden;
}
.readout__cell {
  padding: 20px clamp(16px, 3vw, 30px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.readout__cell:first-child { border-top: 0; }

@media (min-width: 560px) {
  .readout { grid-template-columns: repeat(3, 1fr); }
  .readout__cell { border-top: 0; border-left: 1px solid var(--line); padding-block: 24px; }
  .readout__cell:first-child { border-left: 0; }
}

.readout__val {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.readout__val small { color: var(--accent); font-size: .6em; vertical-align: super; margin-right: 1px; }
.readout__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 9px;
}

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

.section { padding: clamp(76px, 11vw, 130px) 0; }
.section--line { border-top: 1px solid var(--line); }

/* Over mij */
.about { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 60px); }
@media (min-width: 860px) { .about { grid-template-columns: .85fr 1.15fr; align-items: start; } }

.about__text p { margin: 0 0 18px; color: var(--muted); max-width: 54ch; }
.about__text p:first-of-type { color: var(--text); font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -.01em; }

.facts { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); }
.facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
}
.facts span:first-child { color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.facts span:last-child { color: var(--text); }

/* --------------------------------------------------------------------------
   Placeholder voor afbeeldingen
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.frame::before {
  /* diagonale arcering — zichtbaar zolang er geen foto is */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 11px,
    rgba(255, 223, 89, .05) 11px 22px
  );
}
.frame::after {
  content: attr(data-label);
  position: absolute;
  left: 12px; bottom: 11px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(20, 22, 28, .8);
  padding: 4px 8px;
  border-radius: 2px;
}
.frame img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame img[hidden] { display: none; }
.frame:has(img:not([hidden]))::after { display: none; }

.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--portrait { aspect-ratio: 4 / 5; }

/* Zonder deze grens vult de staande foto op tablet de volle breedte en wordt
   ze meer dan duizend pixels hoog. */
.about .frame--portrait { max-width: 400px; }

/* --------------------------------------------------------------------------
   Projecten — het bronnenrack
   -------------------------------------------------------------------------- */

.rack { display: flex; flex-direction: column; }

.src {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
  transition: border-color .4s var(--ease);
}
.src:last-child { border-bottom: 1px solid var(--line); }
.src:hover { border-top-color: var(--line-2); }

/* Drie kolommen pas vanaf 900px. Op 820px bleef er na de bronkolom en de
   afbeelding maar zo'n 240px over voor de tekst, en dat las niet. */
@media (min-width: 900px) {
  .src {
    grid-template-columns: 70px minmax(270px, 1fr) minmax(250px, 320px);
    align-items: start;
  }
}

.src__id {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
  padding-top: 4px;
}

.src__type {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.src__title {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 12px;
}
.src__desc { color: var(--muted); margin: 0 0 20px; max-width: 52ch; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0 0 22px; padding: 0; }
.chips li {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--text);
  background: var(--panel);
}

.src__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.src__link:hover { border-bottom-color: var(--accent); gap: 14px; }

.src .frame { transition: transform .45s var(--ease); }
.src:hover .frame { transform: translateY(-4px); }

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
@media (min-width: 720px)  { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  margin: 0;
  padding: 26px 24px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.quote:hover { border-color: var(--line-2); transform: translateY(-3px); }

.quote__mark { color: var(--accent); flex: none; opacity: .9; }

/* Sterren */
.stars { display: flex; gap: 3px; }
.star { color: var(--line-2); flex: none; }
.star.is-on { color: var(--accent); }

/* Sterren kiezen in het reviewformulier.
   De sterren staan in omgekeerde volgorde in de HTML en worden met
   row-reverse teruggedraaid. Daardoor kan CSS alle sterren links van de
   aangeklikte ster inkleuren, wat met de gewone volgorde niet lukt. */
.sterkies {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 2px;
}
.sterkies input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sterkies label {
  cursor: pointer;
  color: var(--line-2);
  line-height: 0;
  padding: 3px;
  border-radius: 3px;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.sterkies label svg { width: 30px; height: 30px; display: block; }
.sterkies input:checked ~ label,
.sterkies label:hover,
.sterkies label:hover ~ label { color: var(--accent); }
.sterkies label:hover { transform: scale(1.08); }
.sterkies input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Alleen zichtbaar voor schermlezers */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Een los aanvinkvakje buiten een .checks-rij */
.check--los {
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  transition: border-color .2s var(--ease);
}
.check--los:has(input:checked) { border-color: var(--accent); }
.check--los input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px; height: 17px;
  min-height: 0;
  padding: 0; margin: 1px 0 0;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.check--los input::before {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #14161c;
  border-bottom: 2px solid #14161c;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .18s var(--ease);
}
.check--los input:checked { background: var(--accent); border-color: var(--accent); }
.check--los input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.quote blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  flex: 1;
}

.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.quote__naam { font-weight: 600; letter-spacing: -.01em; font-size: 15px; }
.quote__rol {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Prijzen
   -------------------------------------------------------------------------- */

.tarieven {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 34px;
}
@media (min-width: 780px) { .tarieven { grid-template-columns: repeat(3, 1fr); } }

.tarief {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding: 30px 26px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}

/* Kaarten netjes op één lijn.
   Zonder dit begint de puntenlijst bij elk pakket op een andere hoogte, want
   de ene beschrijving is langer dan de andere.

   Subgrid laat alle kaarten dezelfde vijf rijen delen: naam, prijs,
   beschrijving, punten, knop. Daarvoor moet de ouder die rijen wél zelf
   benoemen; zonder die regel hieronder heeft subgrid niets om zich op uit
   te lijnen en verschuift alles alsnog. */
@media (min-width: 780px) {
  @supports (grid-template-rows: subgrid) {
    .tarieven { grid-template-rows: auto auto auto 1fr auto; }
    .tarief {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
      align-content: start;
    }
  }

  /* Browsers zonder subgrid: dan lijnen we tenminste de knoppen uit. */
  @supports not (grid-template-rows: subgrid) {
    .tarief__wat { min-height: 5.5em; }
    .tarief__punten { min-height: 7em; }
  }
}

.tarief__vlag {
  position: absolute;
  top: -1px; right: 20px;
  transform: translateY(-50%);
  background: var(--accent);
  color: #14161c;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
}

.tarief__naam {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.tarief__prijs {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
}
.tarief__prijs--tekst { font-size: clamp(22px, 2.6vw, 27px); letter-spacing: -.02em; }
.tarief__prijs span {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.tarief__wat { margin: 0; color: var(--muted); font-size: 15px; }

.tarief__punten {
  list-style: none;
  margin: 4px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 11px;
  align-content: start;
}
.tarief__punten li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
}
.tarief__punten svg { color: var(--accent); flex: none; margin-top: 6px; }

.tarief .btn { justify-content: center; align-self: end; width: 100%; }

.tarieven__voet {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Opleidingen
   -------------------------------------------------------------------------- */

.courses { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 720px) { .courses { grid-template-columns: repeat(3, 1fr); } }

.course {
  padding: 26px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.course:hover { border-color: var(--accent); transform: translateY(-3px); }
.course h3 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 6px; }
.course p { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.course__mark {
  width: 26px; height: 26px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .contact { grid-template-columns: .9fr 1.1fr; align-items: start; } }

.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 8px; }
.field > label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.field > input,
.field > textarea,
.field > select {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--display);
  /* 16px is bewust: onder die grootte zoomt Safari op iPhone automatisch in
     zodra je een veld aantikt, en dan staat de pagina daarna scheef. */
  font-size: 16px;
  min-height: 48px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field > textarea { resize: vertical; min-height: 148px; line-height: 1.6; }

/* Datumvelden houden op iOS hun eigen opmaak tenzij je die uitzet. */
/* Datumvelden.
   Chrome tekent het agenda-icoontje standaard in zwart, en dat verdwijnt op
   een donkere achtergrond. Met invert wordt het wit. */
.field > input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  font-family: var(--mono);
  letter-spacing: .04em;
}
.field > input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: .55;
  cursor: pointer;
  padding: 4px;
  border-radius: 3px;
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.field > input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(255, 223, 89, .16);
}
/* De losse onderdelen dd / mm / jjjj */
.field > input[type="date"]::-webkit-datetime-edit-text,
.field > input[type="date"]::-webkit-datetime-edit-day-field,
.field > input[type="date"]::-webkit-datetime-edit-month-field,
.field > input[type="date"]::-webkit-datetime-edit-year-field { color: var(--text); }
.field > input[type="date"]:not(:focus):invalid::-webkit-datetime-edit { color: #5a6070; }

/* Het agenda-icoontje is standaard zwart en valt weg op de donkere achtergrond. */
.field > input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
  transition: opacity .2s var(--ease);
}
.field > input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.field > input[type="date"]::-webkit-datetime-edit { color: var(--text); }
.field > input[type="date"]:invalid::-webkit-datetime-edit { color: #5a6070; }

.field > input:focus,
.field > textarea:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.field > input::placeholder,
.field > textarea::placeholder { color: #5a6070; }

.form__note {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
}
.form__note[hidden] { display: none; }
.form__note--ok { border-color: var(--green); color: var(--green); }
.form__note--err { border-color: var(--red); color: var(--red); }

/* --------------------------------------------------------------------------
   Aanvraagpagina
   -------------------------------------------------------------------------- */

.aanvraag { padding: 106px 0 clamp(60px, 9vw, 110px); }

/* Eén kolombreedte voor de hele pagina. Eerder was het codeblok 660px breed
   en het formulier eronder de volle 1180px, wat er los uitzag. Een formulier
   van 1180px breed leest bovendien slecht: je ogen moeten te ver. */
.aanvraag .wrap { max-width: 780px; }

.monitor--slim .lower { max-width: none; }
.hero__title--sm { font-size: clamp(32px, 6vw, 56px); }

.codeform { display: grid; gap: 16px; max-width: 340px; margin-top: 30px; }
.codeform input {
  font-family: var(--mono);
  font-size: clamp(18px, 3.4vw, 24px);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  padding-block: 15px;
}
.codeform .btn { justify-content: center; }

.aanvraagform { display: grid; gap: 14px; margin-top: 34px; }

.fset {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: clamp(20px, 3vw, 26px) clamp(18px, 3vw, 28px);
  margin: 0;
  display: grid;
  gap: 16px;
}

.fset__kop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.fset__nr {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 3px 7px;
  flex: none;
}

.verplicht { color: var(--accent); }

.field > select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238c92a3' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}
.field > select:focus { outline: none; border-color: var(--accent); }
.field > select option { background: var(--bg-2); color: var(--text); }

.field--kort { max-width: 220px; }

.field__hint {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  margin: 2px 0 0;
}

/* Aanvinkbare labels.
   Alles staat hier expliciet omdat deze labels binnen een .field zitten en
   anders de opmaak van een gewoon invoerveld zouden overnemen. */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }

.checks .check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg-2);
  cursor: pointer;
  user-select: none;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  line-height: 1;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.checks .check:hover { border-color: var(--line-2); }
.checks .check:has(input:checked) { border-color: var(--accent); background: rgba(255, 223, 89, .08); }
.checks .check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.checks .check input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.checks .check input::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #14161c;
  border-bottom: 2px solid #14161c;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .18s var(--ease);
}
.checks .check input:checked { background: var(--accent); border-color: var(--accent); }
.checks .check input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.aanvraag__submit { display: grid; gap: 10px; justify-items: start; margin-top: 8px; }

.ref {
  font-family: var(--mono);
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
  margin: 0 0 26px;
}

@media (max-width: 620px) {
  .aanvraag { padding-top: 88px; }
  .codeform { max-width: none; }
  .aanvraag__submit { justify-items: stretch; }
  .aanvraag__submit .btn { justify-content: center; }
}


/* --------------------------------------------------------------------------
   Kleine knop en het detailvenster
   Worden gebruikt op de hoofdpagina (reviewformulier) en in de admin.
   -------------------------------------------------------------------------- */

.mini {
  padding: 7px 13px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.mini:hover { color: var(--accent); border-color: var(--accent); }
.mini--danger:hover { color: var(--red); border-color: var(--red); }

/* ---------- Detailvenster ---------- */

dialog.sheet {
  width: min(680px, calc(100vw - 24px));
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text);
  overflow: auto;
}
dialog.sheet::backdrop { background: rgba(10, 11, 15, .74); }

.sheet__head {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  z-index: 2;
}
.sheet__head h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sheet__body { padding: 20px 22px 26px; }
.sheet__foot {
  position: sticky;
  bottom: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 14px 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.dl { display: grid; margin: 0 0 22px; }
.dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .dl__row { grid-template-columns: 168px 1fr; gap: 16px; align-items: baseline; }
}
.dl__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dl__val { overflow-wrap: anywhere; white-space: pre-wrap; }
.dl__val a { color: var(--accent); }

.grid2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.item {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 18px;
  margin-bottom: 12px;
}
.item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.item__nr {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.item__tools { display: flex; gap: 6px; }

/* ---------- Opslaan ---------- */

.savebar {
  position: sticky;
  bottom: 0;
  margin-top: 22px;
  padding: 16px 0;
  background: linear-gradient(180deg, transparent, var(--bg) 32%);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.savebar .status { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.savebar .status.ok { color: var(--green); }
.savebar .status.err { color: var(--red); }


/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.crew {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 14px;
}
@media (min-width: 700px)  { .crew { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .crew { grid-template-columns: repeat(4, 1fr); } }

.lid { margin: 0; }
.lid .frame { transition: transform .35s var(--ease); }
.lid:hover .frame { transform: translateY(-4px); }

.frame--vierkant { aspect-ratio: 1 / 1; }

.lid figcaption { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; }
.lid__naam { font-weight: 600; letter-spacing: -.01em; font-size: 16px; }
.lid__functie {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lid__link {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  gap: 7px;
  transition: gap .25s var(--ease);
}
.lid__link:hover { gap: 11px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); padding: 40px 0 30px; }

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

/* Vanaf tablet: merk links, dan de kolommen in een vast raster. Eerder
   werden de kolommen als één blok naar rechts geduwd, waardoor de kopjes
   en de links onder elkaar niet uitlijnden. */
@media (min-width: 760px) {
  .footer__top { grid-template-columns: 2fr 1fr 1fr; gap: 40px; align-items: start; }
  /* Hierdoor worden de twee kolommen zelf rasteronderdelen. */
  .footer__kolommen { display: contents; }
}

.footer__naam { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.footer__slogan {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--accent);
  margin-top: 6px;
}

.footer__kolommen { display: flex; gap: 40px; flex-wrap: wrap; }
.footer__kolom { display: flex; flex-direction: column; gap: 12px; }
.footer__kolommen .footer__links { flex-direction: column; gap: 10px; align-items: flex-start; }
.footer__kop {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__onder {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
}
.footer__onder a { color: var(--muted); text-decoration: none; transition: color .2s var(--ease); }
.footer__onder a:hover { color: var(--accent); }

@media (max-width: 620px) {
  .footer__top { flex-direction: column; gap: 24px; }
  .footer__kolommen { gap: 28px; }
  .footer__onder { flex-direction: column; gap: 12px; }
}
.footer__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}
.footer a { color: var(--muted); text-decoration: none; transition: color .2s var(--ease); }
.footer a:hover { color: var(--accent); }
.footer__links { display: flex; gap: 18px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Onthullen bij scrollen
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Telefoon en tablet
   -------------------------------------------------------------------------- */

/* Het menu krimpt stap voor stap mee. De aanvraagknop blijft altijd staan;
   de gewone links verdwijnen als eerste, want die secties bereik je ook
   gewoon door te scrollen. */
@media (max-width: 900px) {
  .timecode { display: none; }
  .topbar__in { justify-content: space-between; position: relative; }
}



/* Op telefoon staat de afbeelding van een project bovenaan, dan de tekst.
   Zo zie je meteen waar het over gaat bij het scrollen. */
@media (max-width: 899px) {
  .src { gap: 18px; }
  .src .frame { order: 1; }
  .src__id { order: 2; padding-top: 0; }
  .src__body { order: 3; }
}

@media (max-width: 620px) {
  :root { --gut: 18px; }

  .topbar__in { height: 56px; }
  .brand span:not(.brand__mark):not(.brand__fallback) { display: none; }
  .nav a { padding: 10px 8px; font-size: 10px; letter-spacing: .08em; }

  .monitor { padding: 40px 20px 30px; }
  .monitor__corner { width: 13px; height: 13px; }
  .monitor__bar { font-size: 10px; letter-spacing: .12em; }

  .hero { padding-top: 96px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }

  .chips li { font-size: 10px; padding: 4px 9px; }

  .facts li { flex-direction: column; align-items: flex-start; gap: 3px; }

  .footer__in { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Zeer smalle toestellen */
@media (max-width: 420px) {
  .hero__title { font-size: clamp(36px, 11vw, 52px); }
  .nav a { padding: 10px 6px; }
}

/* Liggend op een telefoon: minder verticale ruimte verspillen. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: 84px; }
  .monitor__bar { margin-bottom: 22px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .seq, .reveal { opacity: 1 !important; transform: none !important; }
  .lower::before { transform: scaleY(1) !important; }
}

/* --------------------------------------------------------------------------
   Projectstatus
   -------------------------------------------------------------------------- */

.traject__kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

/* De tijdlijn met de fases van een project */
.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.stap {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  padding: 0 0 22px;
  position: relative;
}
.stap:last-child { padding-bottom: 0; }

/* De verbindingslijn tussen twee bollen */
.stap::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 26px;
  bottom: -4px;
  width: 2px;
  background: var(--line);
}
.stap:last-child::before { display: none; }
.stap.is-klaar::before { background: var(--accent); }

.stap__bol {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #14161c;
  position: relative;
  z-index: 1;
  flex: none;
}
.stap.is-klaar .stap__bol { background: var(--accent); border-color: var(--accent); }
.stap.is-nu .stap__bol {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(255, 223, 89, .12);
}
.stap.is-nu .stap__bol::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.stap div { padding-top: 4px; }
.stap strong { display: block; font-size: 16px; letter-spacing: -.01em; color: var(--muted); }
.stap span { display: block; font-size: 14px; color: #6b7183; margin-top: 3px; line-height: 1.5; }
.stap.is-klaar strong { color: var(--text); }
.stap.is-nu strong { color: var(--accent); }
.stap.is-nu span { color: var(--muted); }

/* Opgeleverd werk */
.levering {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
  margin-bottom: 12px;
}
@media (min-width: 640px) {
  .levering:has(.levering__beeld) { grid-template-columns: 220px 1fr; }
}

.levering__beeld { display: block; background: var(--panel); }
.levering__beeld img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
@media (min-width: 640px) {
  .levering__beeld img { aspect-ratio: auto; min-height: 100%; }
}

.levering__body { padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.levering__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.levering__top .msg__meta {
  font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto;
}
.levering__body h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.levering__nota { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.levering__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.levering__acts .btn { padding: 9px 16px; }

.badge--ok { color: var(--green); border-color: var(--green); }
.badge--wacht { color: #7fb2ff; border-color: #7fb2ff; }

/* Berichten heen en weer */
.gesprek { display: grid; gap: 10px; margin-bottom: 20px; }
.bericht {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 13px 16px;
}
.bericht.is-klant { border-left-color: var(--accent); }
.bericht__wie {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.bericht p { margin: 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .traject__kop { flex-direction: column; gap: 14px; }
  .levering__top .msg__meta { margin-left: 0; flex: 1 1 100%; }
}

/* Voorbeeldvenster bij een oplevering: YouTube of Google Drive */
.levering__kader {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-bottom: 1px solid var(--line);
}
.levering__kader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (min-width: 760px) {
  .levering:has(.levering__kader) { grid-template-columns: 1fr; }
  .levering__kader { border-bottom: 1px solid var(--line); border-right: 0; }
}

/* --------------------------------------------------------------------------
   Projectcode, overeenkomst en ingeklapte versies
   -------------------------------------------------------------------------- */

.codekaart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--panel);
}
.codekaart__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.codekaart__uitleg {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 46ch;
}
.codekaart__uitleg a { color: var(--accent); }

.volgcode {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: .12em;
  color: var(--accent);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 7px 12px;
  display: inline-block;
}

/* De overeenkomst */
.contract {
  margin: 0 0 18px;
  padding: 20px;
  max-height: 46vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--text);
}

.sheet--smal { width: min(460px, calc(100vw - 24px)); }

.betaalbedrag {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--accent);
  margin: 14px 0 6px;
}

/* Oudere versies staan ingeklapt */
.levering.is-ingeklapt { display: block; }
.levering__vouw {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--display);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.levering__vouw:hover { color: var(--text); background: var(--panel); }
.levering__vouwlabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  flex: none;
}

.levering__kader--leeg {
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Automatische berichten zien er anders uit dan die van een mens */
.bericht.is-systeem {
  border-left: 3px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  font-style: italic;
}

/* De prijs staat groot bovenaan de overeenkomst: dat is waar je echt
   voor tekent. */
.prijsblok {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: rgba(255, 223, 89, .06);
}
.prijsblok__lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.prijsblok__bedrag {
  font-size: clamp(30px, 6vw, 42px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Gratis
   --------------------------------------------------------------------------
   De volgorde vertelt het verhaal: eerst het bedrag, dan wordt het
   doorgestreept, dan valt het woord "Gratis" letter voor letter binnen,
   met confetti eroverheen.
   -------------------------------------------------------------------------- */

.gratis { position: relative; overflow: hidden; }

.gratis__lbl {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  opacity: 0;
  animation: opkomen .4s var(--ease) forwards;
}

.gratis__prijs {
  display: flex;
  justify-content: center;
  margin: 0 0 6px;
}
.gratis__prijs s {
  position: relative;
  text-decoration: none;
  font-size: clamp(26px, 6vw, 34px);
  color: var(--muted);
  opacity: 0;
  animation: opkomen .45s var(--ease) .25s forwards;
}
.gratis__prijs s::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: 52%;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: streep .45s var(--ease) .9s forwards;
}

/* Het woord Gratis komt letter voor letter binnen */
.gratis__woord {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin: 0 0 20px;
}
.gratis__woord span {
  font-size: clamp(40px, 11vw, 62px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--accent);
  opacity: 0;
  transform: translateY(18px) rotate(-8deg);
  animation: letter .5s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.gratis__woord span:nth-child(1) { animation-delay: 1.35s; }
.gratis__woord span:nth-child(2) { animation-delay: 1.43s; }
.gratis__woord span:nth-child(3) { animation-delay: 1.51s; }
.gratis__woord span:nth-child(4) { animation-delay: 1.59s; }
.gratis__woord span:nth-child(5) { animation-delay: 1.67s; }
.gratis__woord span:nth-child(6) { animation-delay: 1.75s; }

@keyframes opkomen { to { opacity: 1; } }
@keyframes streep { to { transform: scaleX(1); } }
@keyframes letter { to { opacity: 1; transform: translateY(0) rotate(0); } }

/* Confetti valt op het moment dat het woord verschijnt */
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti span {
  position: absolute;
  top: -16px;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  opacity: 0;
  animation: dwarrel 2.2s cubic-bezier(.3, .5, .5, 1) forwards;
}
.confetti span:nth-child(1)  { left:  6%; background: var(--accent); animation-delay: 1.4s; }
.confetti span:nth-child(2)  { left: 15%; background: #7fb2ff;       animation-delay: 1.62s; }
.confetti span:nth-child(3)  { left: 24%; background: var(--green);  animation-delay: 1.48s; }
.confetti span:nth-child(4)  { left: 33%; background: var(--accent); animation-delay: 1.78s; }
.confetti span:nth-child(5)  { left: 42%; background: #ff8ac4;       animation-delay: 1.44s; }
.confetti span:nth-child(6)  { left: 51%; background: var(--accent); animation-delay: 1.7s; }
.confetti span:nth-child(7)  { left: 60%; background: #7fb2ff;       animation-delay: 1.52s; }
.confetti span:nth-child(8)  { left: 69%; background: var(--green);  animation-delay: 1.85s; }
.confetti span:nth-child(9)  { left: 78%; background: var(--accent); animation-delay: 1.46s; }
.confetti span:nth-child(10) { left: 86%; background: #ff8ac4;       animation-delay: 1.74s; }
.confetti span:nth-child(11) { left: 93%; background: var(--accent); animation-delay: 1.58s; }
.confetti span:nth-child(12) { left: 70%; background: var(--accent); animation-delay: 2s; }

@keyframes dwarrel {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(340px) rotate(520deg); }
}

.kopknoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.klaar__acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Rondes op: het blok met de extra-rondeknop */
.rondeop {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
}
.rondeop__tekst { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .gratis__lbl,
  .gratis__prijs s,
  .gratis__woord span { animation: none; opacity: 1; transform: none; }
  .gratis__prijs s::after { animation: none; transform: scaleX(1); }
}

/* Een knop die eruitziet als een link, binnen een lopende zin */
.linkknop {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Versies als substappen onder "Klaar voor jouw feedback" */
.substap {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0 0 0 2px;
  display: grid;
  gap: 10px;
}
.substap__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 4px 11px;
  align-items: center;
  position: relative;
}
.substap__bol {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  background: var(--panel);
  grid-row: span 2;
  align-self: start;
  margin-top: 4px;
}
.substap__item.is-klaar .substap__bol { background: var(--accent); border-color: var(--accent); }
.substap__item.is-nu .substap__bol {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 223, 89, .16);
}
.substap__naam {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.substap__item.is-klaar .substap__naam,
.substap__item.is-nu .substap__naam { color: var(--text); }
.substap__item.is-nu .substap__naam { color: var(--accent); }
.substap__uitleg { font-size: 13px; color: var(--muted); grid-column: 2; }

/* --------------------------------------------------------------------------
   Showreel
   -------------------------------------------------------------------------- */

.reel { margin-top: 20px; }

.reel__kader {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.reel__kader iframe,
.reel__kader video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

/* Dezelfde zoekerhoeken als bij de hero, zodat het bij de rest past */
.reel__kader::before,
.reel__kader::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent);
  opacity: .5;
  pointer-events: none;
  z-index: 2;
}
.reel__kader::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.reel__kader::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* De geluidsknop op de showreel.
   Verschijnt alleen wanneer de video vanzelf start: browsers eisen dan dat
   hij gedempt begint. Eén klik zet het geluid aan. */
.reel__geluid {
  position: absolute;
  right: 16px;
  /* Bovenaan, want onderaan zit de bedieningsbalk van de speler zelf. */
  top: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  background: rgba(20, 22, 28, .84);
  backdrop-filter: blur(8px);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  animation: geluidpuls 2.4s var(--ease) 1.5s 3;
}
.reel__geluid:hover { background: var(--accent); color: #14161c; transform: translateY(-2px); }
.reel__geluidicoon { display: grid; place-items: center; line-height: 0; }

/* Het kruisje en de golfjes wisselen met de stand */
.reel__aan { display: none; }
.reel__geluid.is-aan .reel__uit { display: none; }
.reel__geluid.is-aan .reel__aan { display: block; }
.reel__geluid.is-aan {
  border-color: var(--line-2);
  color: var(--muted);
  animation: none;
}
.reel__geluid.is-aan:hover { background: var(--panel); color: var(--text); }

/* Even zachtjes de aandacht trekken, dan stoppen */
@keyframes geluidpuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 223, 89, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 223, 89, .16); }
}

@media (max-width: 620px) {
  .reel__geluid { right: 10px; top: 10px; padding: 8px 12px; font-size: 10px; }
}

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