/* CrewTrack — promotionele website
 *
 * Eén stylesheet voor de drie pagina's: de homepage, het contactformulier en de
 * over-pagina. Gebouwd naar het ontwerp van Claude Design (blokken 3a, 3b, 3c).
 *
 * De schermen van het product zijn hier nagebouwd in HTML en CSS, en het zijn
 * dus geen afbeeldingen. Dat was een bewuste keuze in het ontwerp: het blijft
 * scherp op elk scherm, het weegt niets, en het is bij te werken zonder dat er
 * iemand een schermafdruk hoeft te maken.
 *
 * De kleuren komen uit de huisstijl van de webapp. De telefoonschermen gebruiken
 * de iets warmere waarden van de app zelf, zodat het verschil tussen "achter een
 * scherm" en "op de telefoon" ook in kleur te zien is.
 */

:root {
  --canvas: #020617;
  --vlak: #0f172a;
  --vlak-op: #1e293b;
  --vlak-diep: #0b1220;
  --vlak-diep-warm: #0b1120;
  --lijn: #1e293b;
  --lijn-nadruk: #334155;
  --fg: #f8fafc;
  --fg-zacht: #94a3b8;
  --fg-dof: #64748b;
  --accent: #6366f1;
  --accent-licht: #a5b4fc;
  --accent-hover: #818cf8;
  --goed: #22c55e;
  --waarschuwing: #f59e0b;
  --fout: #ef4444;

  /* De huisstijl van de telefoon-app. */
  --app-bg: #0f1420;
  --app-vlak: #171d2b;
  --app-lijn: #2a3142;
  --app-accent: #4263eb;
  --app-fg: #ffffff;
  --app-dof: #8a94a6;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --breedte: 1200px;
  --zij: 40px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.binnen {
  width: min(var(--breedte), 100%);
  margin: 0 auto;
  padding: 0 var(--zij);
}

/* Secties worden gescheiden door één haarlijn, zoals in het ontwerp. */
.sectie { padding: 56px 0; border-top: 1px solid var(--lijn); }
.sectie--vlak { background: var(--vlak); }

/* Een sectie waar het menu naartoe springt. De bovenbalk blijft staan, dus de
   kop moet eronderuit komen en niet erachter verdwijnen. */
.anker { scroll-margin-top: 80px; }

.ogen {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-licht);
}

h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 750;
}

h2 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h3 { margin: 0; font-size: 18px; font-weight: 650; }

/* De koppen van de kleinere secties: "wat het niet doet" en "wie erachter
   zit". Iets rustiger dan een sectiekop. */
.kop-klein { font-size: clamp(21px, 2.6vw, 24px); }
.onderkop { margin: 6px 0 18px; font-size: 14px; }

/* Een alinea onder een sectiekop, in de twee-koloms secties. */
.lopende { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--fg-zacht); }
.voetnoot { margin-top: 18px; }

p { margin: 0; }

a { color: var(--accent-licht); text-decoration: none; }
a:hover { color: var(--fg); }

.midden { text-align: center; }
.smal { max-width: 58ch; margin-left: auto; margin-right: auto; }

.zacht { color: var(--fg-zacht); }
.dof { color: var(--fg-dof); font-size: 13px; }

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--accent);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.knop:hover { background: var(--accent-hover); color: var(--fg); }

.knop--rustig {
  background: transparent;
  border-color: var(--lijn-nadruk);
  color: var(--fg);
}

.knop--rustig:hover { background: rgba(99, 102, 241, 0.1); border-color: var(--accent); color: var(--fg); }

.knop--klein { padding: 9px 18px; font-size: 14px; }
.knop--groot { flex: 0 0 auto; padding: 14px 28px; }

.knoppen { display: flex; flex-wrap: wrap; gap: 14px; }
.knoppen--midden { justify-content: center; }

/* --- Bovenbalk ----------------------------------------------------------- */

.balk {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(2, 6, 23, 0.9);
  border-bottom: 1px solid var(--lijn);
  backdrop-filter: blur(8px);
}

.balk__binnen {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px var(--zij);
  width: min(var(--breedte), 100%);
  margin: 0 auto;
}

.merk {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.merk:hover { color: var(--fg); }

.merk__teken {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.balk__menu {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 14px;
}

.balk__menu a { color: var(--fg-zacht); }
.balk__menu a:hover { color: var(--fg); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-top: 64px; padding-bottom: 48px; }
.hero h1 { max-width: 22ch; margin: 0 auto; }
.hero__intro { margin: 18px auto 28px; max-width: 58ch; font-size: 17px; line-height: 1.6; color: var(--fg-zacht); }

/* De doelgroepkiezer. Nu alleen een keuze in beeld; de opzet met data-soort
   maakt het mogelijk om er later per soort evenement eigen tekst aan te hangen
   zonder de opmaak te veranderen. */
.kiezer {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
  padding: 6px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--vlak);
}

.kiezer__knop {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-zacht);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.kiezer__knop:hover { color: var(--fg); }

.kiezer__knop[aria-pressed="true"] {
  background: var(--accent);
  color: var(--fg);
  font-weight: 600;
}

/* --- Zonder / met CrewTrack --------------------------------------------- */

.sectiekop { margin-bottom: 40px; }
.sectiekop h2 { margin-top: 10px; }
.sectiekop p { margin: 12px auto 0; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--fg-zacht); }

.paren { display: grid; gap: 18px; }

.paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  overflow: hidden;
}

.paar__zonder, .paar__met { padding: 26px 28px; }
.paar__zonder { background: var(--vlak-diep-warm); }
.paar__met { background: var(--vlak); border-left: 1px solid var(--lijn); }

.paar__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.paar__label--zonder { color: var(--fout); }
.paar__label--met { color: var(--goed); }

.paar p { margin-top: 10px; font-size: 17px; line-height: 1.55; }
.paar__zonder p { color: var(--fg-zacht); }
.paar__met p { color: var(--fg); }

/* --- Samenspel ---------------------------------------------------------- */

.samenspel {
  display: grid;
  grid-template-columns: 1.3fr auto 0.9fr;
  gap: 28px;
  align-items: center;
}

.pijlen {
  display: grid;
  gap: 10px;
  justify-items: center;
  color: var(--accent);
}

.pijlen__teken { font-size: 22px; line-height: 1; }

.pijlen__uitleg {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dof);
  text-align: center;
}

/* --- Nagebouwde schermen: het kader -------------------------------------- */

.scherm {
  background: var(--vlak);
  border: 1px solid var(--lijn-nadruk);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
}

.scherm__balk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--canvas);
  border-bottom: 1px solid var(--lijn);
  font-size: 12px;
  color: var(--fg-zacht);
}

.scherm__balk .rechts { margin-left: auto; color: var(--fg-dof); }

.stip-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--goed);
  flex: 0 0 auto;
}

.melding-regel {
  padding: 12px 16px;
  border-bottom: 1px solid var(--lijn);
  border-left: 3px solid transparent;
}

.melding-regel:last-child { border-bottom: none; }
.melding-regel--rood { border-left-color: var(--fout); background: rgba(99, 102, 241, 0.06); }
.melding-regel--oranje { border-left-color: var(--waarschuwing); }
.melding-regel--groen { border-left-color: var(--goed); }

.melding-regel__titel { font-size: 14px; font-weight: 600; }
.melding-regel__meta { margin-top: 3px; font-size: 12px; color: var(--fg-zacht); }

.scherm__stap { padding: 12px 16px; border-bottom: 1px solid var(--lijn); font-size: 13px; color: var(--fg-zacht); }
.scherm__stap:last-child { border-bottom: none; }
.scherm__stap strong { color: var(--fg); }
.scherm__stap--dof { color: var(--fg-dof); }

/* --- Nagebouwde schermen: de telefoon ------------------------------------ */

.telefoon {
  display: grid;
  gap: 10px;
  width: 210px;
  padding: 16px 14px;
  background: var(--app-bg);
  border: 1px solid var(--app-lijn);
  border-radius: 26px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
  justify-self: center;
}

.telefoon--groot { width: 250px; padding: 18px 16px; border-radius: 30px; gap: 12px; }
.telefoon__label { font-size: 12px; color: var(--app-dof); }

.telefoon__titelregel { display: flex; align-items: center; justify-content: space-between; }
.telefoon__titelregel strong { font-size: 15px; color: var(--app-fg); }

.telefoon__kaart {
  padding: 10px;
  border-radius: 10px;
  background: var(--app-vlak);
}

.telefoon__kaart--actief { border-left: 3px solid var(--app-accent); }
.telefoon__kaart--melding { border-left: 3px solid var(--fout); }
.telefoon__kop { font-size: 12px; font-weight: 700; color: var(--app-accent); }
.telefoon__kaart p { font-size: 13px; color: var(--app-fg); }
.telefoon__kaart p.dofje { font-size: 12px; color: var(--app-dof); font-weight: 400; }
.telefoon__kaart p.goedje { font-size: 13px; color: var(--goed); font-weight: 600; }

.telefoon__tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding-top: 6px;
  text-align: center;
}

.telefoon__tab span {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  border-radius: 6px;
  background: var(--app-lijn);
}

.telefoon__tab small { display: block; margin-top: 3px; font-size: 9px; color: var(--app-dof); }
.telefoon__tab--actief span { background: var(--app-accent); }
.telefoon__tab--actief small { color: var(--app-accent); }

.telefoon__streepjes { display: flex; justify-content: space-between; gap: 6px; padding-top: 4px; }
.telefoon__streepjes i { width: 26px; height: 8px; border-radius: 2px; background: var(--app-lijn); }
.telefoon__streepjes i.aan { background: var(--app-accent); }

/* --- Livekaart ----------------------------------------------------------- */

.kaart-uitleg { display: grid; gap: 12px; margin-top: 20px; }

.kaart-punt { display: flex; gap: 12px; }
.kaart-punt span.bol { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; }
.bol--groen { background: var(--goed); }
.bol--indigo { background: var(--accent); }
.bol--oranje { background: var(--waarschuwing); }
.kaart-punt p { font-size: 15px; line-height: 1.5; color: var(--fg-zacht); }
.kaart-punt strong { color: var(--fg); }

.livekaart {
  position: relative;
  height: 360px;
  background: var(--vlak-diep);
  overflow: hidden;
}

.livekaart__weg {
  position: absolute;
  left: -40px;
  top: 200px;
  width: 130%;
  height: 34px;
  background: #111a2c;
  transform: rotate(-4deg);
}

.livekaart__pad {
  position: absolute;
  left: 160px;
  top: -40px;
  width: 26px;
  height: 130%;
  background: #0e1626;
  transform: rotate(6deg);
}

.livekaart__zone {
  position: absolute;
  border-radius: 10px;
  border: 1.5px dashed var(--accent);
  background: rgba(99, 102, 241, 0.07);
}

.livekaart__zone--parkeren { border-color: var(--goed); background: rgba(34, 197, 94, 0.06); }

.livekaart__zonenaam {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-licht);
}

.livekaart__zonenaam--groen { color: var(--goed); }

.livekaart__post, .livekaart__crew, .livekaart__melding {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
}

.livekaart__post i { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); }
.livekaart__crew i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--goed);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
  /* Een rustige hartslag, zodat de kaart leeft zonder te knipperen. */
  animation: hartslag 2.6s ease-in-out infinite;
}

@keyframes hartslag {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.07); }
}
.livekaart__melding i { width: 12px; height: 12px; border-radius: 50%; background: var(--fout); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.25); }

.livekaart__naam {
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(2, 6, 23, 0.8);
  font-size: 11px;
  white-space: nowrap;
}

.livekaart__post .livekaart__naam { color: var(--accent-licht); }
.livekaart__crew .livekaart__naam { color: #e2e8f0; }
.livekaart__melding .livekaart__naam { color: #fecaca; background: rgba(2, 6, 23, 0.85); }

.livekaart__spoor { position: absolute; border-radius: 50%; background: var(--fg-zacht); }

.livekaart__spoorlabel { position: absolute; font-size: 10px; color: var(--fg-dof); }

.livekaart__verkeer {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 180px;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.9);
}

.livekaart__verkeer .kop {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dof);
}

.livekaart__verkeer .waarde { margin-top: 6px; font-size: 13px; color: var(--fg); }
.livekaart__verkeer .waarde strong { color: var(--waarschuwing); }
.livekaart__verkeer .rest { margin-top: 4px; font-size: 12px; color: var(--fg-zacht); }

/* --- Rondleiding: vier nagebouwde schermen ------------------------------- */

.rondleiding { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.toon {
  border: 1px solid var(--lijn);
  border-radius: 12px;
  overflow: hidden;
  background: var(--vlak);
}

.toon__kop { padding: 14px 18px; background: var(--canvas); border-bottom: 1px solid var(--lijn); }
.toon__kop h3 { font-size: 15px; font-weight: 600; }
.toon__kop p { margin-top: 2px; font-size: 13px; color: var(--fg-zacht); }
.toon__lijf { padding: 16px 18px; }
.toon__lijf--strak { padding: 8px 0; }

/* Dagplanning */
.tijdas, .baan {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: center;
}

.tijdas { margin-bottom: 8px; font-size: 11px; color: var(--fg-dof); }
.tijdas__uren { display: flex; justify-content: space-between; }

.baan { margin-bottom: 8px; }
.baan:last-child { margin-bottom: 0; }
.baan__naam { font-size: 12px; color: var(--fg-zacht); }
.baan__spoor { position: relative; height: 24px; border-radius: 6px; background: var(--canvas); }

.baan__blok {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 4px;
  background: var(--accent);
}

.baan__blok--groen { background: var(--goed); }
.baan__blok--oranje { background: var(--waarschuwing); }

/* Draaiboek */
.programma-regel {
  display: grid;
  grid-template-columns: 58px 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 18px;
}

.programma-regel--nu { background: rgba(99, 102, 241, 0.08); border-left: 3px solid var(--accent); padding-left: 15px; }
.programma-regel__tijd { font-family: var(--mono); font-size: 12px; color: var(--fg-dof); }
.programma-regel--nu .programma-regel__tijd { color: var(--accent-licht); }

.vink {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--lijn-nadruk);
  font-size: 11px;
  font-weight: 700;
}

.vink--klaar { border: none; background: rgba(34, 197, 94, 0.2); color: var(--goed); }
.vink--nu { border-color: var(--accent); }

.programma-regel__wat { font-size: 14px; color: var(--fg); }
.programma-regel--klaar .programma-regel__wat { color: var(--fg-zacht); text-decoration: line-through; }
.programma-regel--nu .programma-regel__wat { font-weight: 600; }
.programma-regel__wie { font-size: 11px; color: var(--fg-dof); }
.programma-regel--nu .programma-regel__wie { color: var(--accent-licht); }

/* Berichten */
.gesprek { display: grid; gap: 10px; }

.bel {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 12px 12px 12px 4px;
  background: var(--vlak-op);
  justify-self: start;
}

.bel--uit { justify-self: end; border-radius: 12px 12px 4px 12px; background: var(--accent); }
.bel__van { font-size: 11px; font-weight: 600; color: var(--accent-licht); }
.bel p { margin-top: 2px; font-size: 14px; color: var(--fg); }
.bel__gelezen { margin-top: 4px; font-size: 11px; color: var(--fg-zacht); }

.chip-regel { display: flex; align-items: center; gap: 8px; padding-top: 2px; font-size: 12px; color: var(--fg-dof); }
.chip { padding: 3px 9px; border: 1px solid var(--lijn-nadruk); border-radius: 6px; }

/* Briefing */
.briefingkaart { padding: 14px 16px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--canvas); }
.briefingkaart__kop { display: flex; align-items: center; gap: 8px; }
.briefingkaart__kop h4 { margin: 0; font-size: 14px; font-weight: 600; }

.pil {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--goed);
  font-size: 11px;
}

.briefingkaart p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--fg-zacht); }

.lees { margin-top: 14px; }
.lees__kop { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; color: var(--fg-zacht); }
.lees__kop strong { color: var(--fg); }
.lees__balk { height: 8px; border-radius: 4px; background: var(--canvas); overflow: hidden; }
.lees__balk i { display: block; height: 100%; border-radius: 4px; background: var(--goed); }
.lees__namen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.naamchip {
  padding: 4px 10px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 12px;
  color: var(--fg-zacht);
}

.naamchip--wacht { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.1); color: var(--waarschuwing); }

/* --- De app uitgelicht --------------------------------------------------- */

.twee-kolom { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.twee-kolom--omgekeerd { grid-template-columns: 0.8fr 1.2fr; gap: 44px; }

.genummerd { display: grid; gap: 12px; margin-top: 22px; }
.genummerd__regel { display: flex; gap: 12px; }

.genummerd__nr {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(66, 99, 235, 0.2);
  color: var(--accent-licht);
  font-size: 12px;
  font-weight: 700;
}

.genummerd p { font-size: 15px; line-height: 1.5; color: var(--fg-zacht); }
.genummerd strong { color: var(--fg); }

/* --- Fasen en kaartjes --------------------------------------------------- */

.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fase { padding: 24px; border: 1px solid var(--lijn); border-radius: 12px; }
.fase--nu { border-color: var(--accent); }
.fase__nr { font-size: 13px; font-weight: 700; color: var(--accent-licht); }
.fase h3 { margin: 8px 0 6px; }
.fase p { font-size: 14px; line-height: 1.55; color: var(--fg-zacht); }

.tweeluik { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.grens {
  padding: 14px 18px;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background: var(--vlak);
  font-size: 14px;
  color: var(--fg-zacht);
}

.grens strong { color: var(--fg); }

/* --- De doelgroepkiezer, met antwoord -------------------------------------
 *
 * De knoppen stonden er al; wat eronder komt is nieuw. Het vak houdt een vaste
 * hoogte aan zodat de pagina niet op en neer springt als je een ander soort
 * evenement kiest. De tekst is de langste van de negen plus wat lucht.
 */

.hero__vraag {
  margin-top: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dof);
}

.kiezer { margin-top: 12px; }

.kiezer__antwoord {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  max-width: 660px;
  margin: 16px auto 0;
  padding: 0 4px;
}

.kiezer__tekst {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-zacht);
}

/* --- Het beschikbaarheidsraster ------------------------------------------
 *
 * Nagebouwd zoals de rest van de schermen op deze pagina: geen afbeelding,
 * maar tekst. De kolommen zijn de dagen; de eerste is de naam en krijgt de
 * ruimte die overblijft.
 */

.raster { font-size: 12px; }

.raster__rij {
  display: grid;
  grid-template-columns: 1fr repeat(5, 34px);
  align-items: center;
  gap: 4px;
  padding: 5px 0;
  border-bottom: 1px solid var(--lijn);
}

.raster__rij:last-child { border-bottom: none; }

.raster__kop {
  padding-bottom: 7px;
  color: var(--fg-dof);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.raster__kop span:first-child { text-align: left; }
.raster__naam { color: var(--fg); font-size: 13px; }

.raster .vink-ja,
.raster .vink-nee,
.raster .vink-mss,
.raster .vink-leeg {
  justify-self: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
}

.vink-ja { background: rgba(34, 197, 94, 0.16); color: var(--goed); }
.vink-nee { background: rgba(239, 68, 68, 0.14); color: var(--fout); }
.vink-mss { background: rgba(245, 158, 11, 0.16); color: var(--waarschuwing); }
.vink-leeg { background: var(--vlak-op); }

/* Een regel onder een nagebouwd scherm die zegt wat je ziet. */
.toon__voet {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--lijn);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-dof);
}

/* --- Materiaaluitgifte ---------------------------------------------------- */

.spullen { font-size: 13px; }

.spullen__kop {
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lijn);
  font-size: 12px;
  color: var(--fg-dof);
}

.spullen__kop strong { color: var(--fg-zacht); }

.spullen__rij {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 2px 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lijn);
}

.spullen__rij:last-child { border-bottom: none; }
.spullen__naam { font-weight: 600; }

.spullen__wie {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--fg-dof);
}

.stand {
  align-self: start;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.stand--uit { background: rgba(99, 102, 241, 0.18); color: var(--accent-licht); }
.stand--vrij { background: var(--vlak-op); color: var(--fg-dof); }

/* --- De evaluatielijst ---------------------------------------------------- */

.eval { padding: 4px 0; }

.eval__rij {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--lijn);
  font-size: 13px;
  line-height: 1.5;
}

.eval__rij:last-child { border-bottom: none; }

.eval__soort {
  align-self: start;
  padding: 3px 0;
  border-radius: 6px;
  background: var(--vlak-op);
  color: var(--fg-dof);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.eval__soort--goed { background: rgba(34, 197, 94, 0.16); color: var(--goed); }
.eval__soort--fout { background: rgba(239, 68, 68, 0.14); color: var(--fout); }

.eval__bron {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--fg-dof);
}

/* --- Vier fasen ----------------------------------------------------------- */

.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.vier .fase { padding: 20px; }

/* --- Hoe het geregeld is -------------------------------------------------- */

.geregeld { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }

.regel-kaart {
  padding: 20px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--vlak);
}

.regel-kaart h3 { margin-bottom: 8px; font-size: 16px; }
.regel-kaart p { font-size: 14px; line-height: 1.55; color: var(--fg-zacht); }

/* --- Beginnen, en de handout in de slotband ------------------------------- */

.smal-midden { max-width: 720px; }
.smal-midden .lopende { margin-left: auto; margin-right: auto; }

.slotband__knoppen { display: grid; gap: 14px; justify-items: start; }

/* De handout is de kleine stap naast de grote. Hij staat er bewust als link en
   niet als tweede knop: twee knoppen naast elkaar laten je kiezen, en dan kiest
   iemand het liefst geen van beide. */
.slotband__handout {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

.slotband__handout span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-dof);
}

.slotband__handout:hover { color: var(--accent-licht); }
.slotband__handout:hover span { color: var(--fg-zacht); }

/* --- Slotband ------------------------------------------------------------ */

.slotband {
  padding: 56px 0;
  border-top: 1px solid var(--lijn);
  background: var(--vlak);
}

.slotband__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.slotband p { margin-top: 10px; max-width: 48ch; font-size: 15px; color: var(--fg-zacht); }

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

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

.voet__binnen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  padding: 20px var(--zij);
  width: min(var(--breedte), 100%);
  margin: 0 auto;
  font-size: 13px;
  color: var(--fg-dof);
}

.voet__binnen a { color: var(--fg-dof); }
.voet__binnen a:hover { color: var(--fg); }
.voet__rek { margin-left: auto; }

/* --- Formulier (contactpagina) ------------------------------------------ */

.contact { display: grid; grid-template-columns: 1fr 0.7fr; gap: 48px; padding-top: 56px; padding-bottom: 56px; }

.h1--pagina { font-size: clamp(27px, 4vw, 34px); line-height: 1.15; }
.contact__intro { margin: 14px 0 28px; font-size: 16px; line-height: 1.6; color: var(--fg-zacht); }

.formulier__melding { font-size: 13px; color: var(--goed); }
.formulier__melding--fout { color: var(--fout); }

/* Voor programma's die formulieren vanzelf invullen. Een mens ziet dit niet. */
.veld--verborgen {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier { display: grid; gap: 18px; }
.formulier__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.veld label, .veld > span.label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-zacht);
}

.veld label .los { font-weight: 400; color: var(--fg-dof); }

.veld input, .veld textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--lijn-nadruk);
  border-radius: 10px;
  background: var(--vlak);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
}

.veld textarea { min-height: 84px; resize: vertical; }
.veld input::placeholder, .veld textarea::placeholder { color: var(--fg-dof); }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--accent); }

.veld--fout input, .veld--fout textarea { border-color: var(--fout); }

.veld__fout { display: none; margin-top: 6px; font-size: 13px; color: var(--fout); }
.veld--fout .veld__fout { display: block; }

.pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.pil-knop {
  padding: 7px 14px;
  border: 1px solid var(--lijn-nadruk);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-zacht);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.pil-knop:hover { color: var(--fg); }

.pil-knop[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-licht);
  font-weight: 600;
}

.versturen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.infokaart { padding: 22px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); }
.infokaart h3 { margin-bottom: 8px; font-size: 16px; }
.infokaart__regels { display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--fg-zacht); }
.infokaart__regel { display: flex; gap: 10px; }
.infokaart__nr { color: var(--accent-licht); font-weight: 700; }

.zijkolom { display: grid; gap: 16px; align-content: start; }

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

/* De over-pagina houdt haar tekst smal, maar wel netjes links in dezelfde
   kolom als de rest van de site. Vandaar een maat op het blok zelf en niet op
   de omhullende .binnen. */
.over-hero { padding-top: 64px; padding-bottom: 48px; max-width: 760px; }
.over-hero h1 { margin-top: 12px; font-size: clamp(28px, 4.2vw, 38px); line-height: 1.15; }
.over-hero p { margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--fg-zacht); }

.wie { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; padding-bottom: 56px; max-width: 900px; }
.knoppen--wie { margin-top: 22px; }

.wie__foto {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px solid var(--lijn-nadruk);
  border-radius: 14px;
  background: var(--vlak);
  text-align: center;
  font-size: 13px;
  color: var(--fg-dof);
  overflow: hidden;
}

.wie__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.wie p { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--fg-zacht); }
.wie strong { color: var(--fg); }

.kenmerk { padding: 20px; border: 1px solid var(--lijn); border-radius: 12px; }
.kenmerk strong { font-size: 15px; }
.kenmerk p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--fg-zacht); }

/* --- Smallere schermen -------------------------------------------------- */

@media (max-width: 960px) {
  :root { --zij: 22px; }

  .sectie { padding: 40px 0; }
  .hero { padding-top: 40px; padding-bottom: 32px; }

  .paar { grid-template-columns: 1fr; }
  .paar__met { border-left: none; border-top: 1px solid var(--lijn); }

  /* Het samenspel stapelt: eerst het scherm van de commandopost, dan de
     telefoon. De pijl draait een kwartslag mee. */
  .samenspel { grid-template-columns: 1fr; gap: 20px; }
  .pijlen__teken { transform: rotate(90deg); display: inline-block; }

  .twee-kolom, .twee-kolom--omgekeerd { grid-template-columns: 1fr; gap: 28px; }
  .rondleiding { grid-template-columns: 1fr; }
  .drie { grid-template-columns: 1fr; }
  .vier { grid-template-columns: repeat(2, 1fr); }
  .geregeld { grid-template-columns: repeat(2, 1fr); }
  .tweeluik { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 32px; }
  .wie { grid-template-columns: 1fr; gap: 24px; }
  .wie__foto { max-width: 220px; }

  .slotband__binnen { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Het menu blijft staan, maar de balk schuift dichter op elkaar. */
  .balk__binnen { gap: 18px; }
  .balk__menu { gap: 14px; font-size: 13px; }
  .balk .knop--klein { padding: 8px 14px; font-size: 13px; }
}

/* Pas als het menu echt niet meer past, blijft de balk beperkt tot het merk en
   de hoofdknop. De links staan dan nog in de voet. */
@media (max-width: 720px) {
  .balk__menu { display: none; }
}

@media (max-width: 620px) {
  .vier { grid-template-columns: 1fr; }
  .geregeld { grid-template-columns: 1fr; }
  .kiezer__antwoord { min-height: 96px; }
  .kiezer__knop { font-size: 12px; }
  .eval__rij { grid-template-columns: 1fr; gap: 6px; padding: 11px 14px; }
  .eval__soort { justify-self: start; padding: 3px 10px; }
  .livekaart { height: 260px; }
  .livekaart__naam, .livekaart__zonenaam, .livekaart__spoorlabel { display: none; }
  .livekaart__verkeer { width: 150px; padding: 10px; }
  .formulier__rij { grid-template-columns: 1fr; }
  .telefoon { width: 100%; max-width: 250px; }
  .knoppen .knop { width: 100%; }
}

/* Wie beweging op zijn scherm liever niet heeft, krijgt het niet. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .livekaart__crew i { animation: none !important; }
}