/* Rolpaginas: een landingspagina per digitale medewerker.
   Bouwt voort op styles.css, hergebruikt alle bestaande variabelen en blokken.
   Gegenereerd door tools/genereer-rolpaginas.py, styling hier met de hand. */

.rol {
  --tint: var(--tint-indigo);
}
.rol--indigo { --tint: var(--tint-indigo); }
.rol--pink   { --tint: var(--tint-pink); }
.rol--amber  { --tint: var(--tint-amber); }
.rol--teal   { --tint: var(--tint-teal); }
.rol--sky    { --tint: var(--tint-sky); }
.rol--coral  { --tint: var(--tint-coral); }
.rol--sage   { --tint: var(--tint-sage); }

/* Mega menu in de navigatie */
.mega { position: relative; }
.mega__knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-dim);
  transition: color 0.15s ease;
}
.mega__knop::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.mega__knop:hover,
.mega__knop[aria-expanded="true"] { color: var(--ink); }
.mega__knop[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

.mega__paneel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 2px;
  width: max-content;
  max-width: 92vw;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(23, 37, 66, 0.12);
}
.mega__paneel[hidden] { display: none; }
.mega__paneel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--ink);
  transition: background 0.15s ease;
}
.mega__paneel a:hover { background: var(--bg-alt); }
.mega__paneel a[aria-current="page"] { background: var(--tint); }
.mega__paneel img { border-radius: 50%; object-fit: cover; flex: none; }
.mega__paneel span { display: flex; flex-direction: column; line-height: 1.25; }
.mega__paneel strong { font-size: 0.94rem; font-weight: 600; }
.mega__paneel em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ink-low);
}
.mega__alles {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius) !important;
  padding-top: 12px !important;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent) !important;
}

/* Kruimelpad */
.kruimels {
  font-size: 0.82rem;
  color: var(--ink-low);
  margin-bottom: 18px;
}
.kruimels a { color: var(--ink-low); }
.kruimels a:hover { color: var(--ink); }
.kruimels span[aria-hidden] { margin: 0 5px; opacity: 0.5; }

/* Hero van de rolpagina */
.rol-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) var(--pad) clamp(36px, 6vw, 72px);
}
@media (min-width: 900px) {
  .rol-hero {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
  }
}
.rol-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 18px;
}
.rol-hero .lede {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--ink-2);
  max-width: 56ch;
  line-height: 1.6;
}
.rol-hero__cta { margin-top: 28px; }
.rol-hero__note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--ink-dim);
}

.rol-hero__foto {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--tint);
  padding: 22px;
}
.rol-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.rol-hero__badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  padding: 7px 16px;
  background: var(--bg);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(23, 37, 66, 0.1);
}

.rol-hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--accent);
  margin: -8px 0 16px;
}
.rol-hero__rechts { display: grid; gap: 14px; }

/* Voorbeelden van output in de hero */
.arts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.art {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.art__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.art__label span {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-low);
}
.art__titel {
  margin-top: 5px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.art__note { font-size: 0.78rem; color: var(--ink-low); line-height: 1.35; }

/* Geruststellende labels */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.chips li {
  padding: 6px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.chips li::before { content: "\2713"; margin-right: 6px; color: var(--good); }
.chips--donker { justify-content: center; margin-top: 24px; }
.chips--donker li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
}

/* Herkenbaar, de vier pijnen */
.pijn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (min-width: 620px) { .pijn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pijn-grid { grid-template-columns: repeat(4, 1fr); } }
.pijn {
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pijn::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--tint);
}
.pijn h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.pijn p { font-size: 0.9rem; color: var(--ink-dim); line-height: 1.55; }

/* Voor wie */
.vw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 820px) { .vw-grid { grid-template-columns: repeat(3, 1fr); } }
.vw {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 28px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.vw__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.vw h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.25;
}
.vw__tekst { font-size: 0.92rem; color: var(--ink-dim); line-height: 1.6; flex: 1; }
.vw__uit {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.vw__uit::before { content: "\2192"; margin-right: 7px; color: var(--accent); }

/* Taken, met het weekoverzicht ernaast */
.taken-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 12px;
  align-items: start;
}
@media (min-width: 960px) {
  .taken-wrap { grid-template-columns: 360px 1fr; gap: 32px; }
  .todo { position: sticky; top: 90px; }
}
.todo {
  padding: 18px;
  background: var(--bg-dark);
  border-radius: var(--radius-lg);
  color: #FFFFFF;
}
.todo__kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.todo__week {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.todo__status { font-size: 0.74rem; color: var(--good); font-weight: 600; }
.todo__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.todo__lijst li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-left: 24px;
  position: relative;
  font-size: 0.88rem;
}
.todo__lijst li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  color: var(--bg-dark);
  background: var(--good);
  border-radius: 3px;
}
.todo__wat { color: rgba(255, 255, 255, 0.92); }
.todo__tag {
  flex: none;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.todo__stempel {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: right;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--good);
}

.taken-lijst { display: grid; gap: 2px; }
.taak {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.taak:last-child { border-bottom: none; }
.taak h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.taak p { font-size: 0.92rem; color: var(--ink-dim); line-height: 1.55; }
@media (min-width: 700px) {
  .taak { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: baseline; }
  .taak h3 { margin-bottom: 0; }
}

/* Zonder en met */
.verschil {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 760px) { .verschil { grid-template-columns: repeat(2, 1fr); } }
.verschil__kolom {
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.verschil__kolom h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.verschil__kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.verschil__kolom li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
  line-height: 1.5;
}
.verschil__kolom li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.verschil__kolom--zonder { background: var(--bg-soft); }
.verschil__kolom--zonder h3 { color: var(--ink-dim); }
.verschil__kolom--zonder li { color: var(--ink-dim); }
.verschil__kolom--zonder li::before { content: "\00D7"; color: var(--ink-low); font-size: 1.1rem; line-height: 1.2; }
.verschil__kolom--met { background: var(--tint); border-color: transparent; }
.verschil__kolom--met h3 { color: var(--ink); }
.verschil__kolom--met li { color: var(--ink); }
.verschil__kolom--met li::before { content: "\2713"; color: var(--good); }

/* De kern */
.kern-blok { padding: clamp(40px, 6vw, 76px) var(--pad); background: var(--bg-dark); }
.kern {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: #FFFFFF;
}
.kern .kicker { color: rgba(255, 255, 255, 0.55); }
.kern blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 12px 0 18px;
}
.kern > p {
  font-size: clamp(0.98rem, 1.4vw, 1.08rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
  max-width: 62ch;
  margin: 0 auto;
}

/* Werkwijze */
.stappen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 640px) { .stappen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stappen { grid-template-columns: repeat(4, 1fr); } }
.stap {
  padding: clamp(20px, 3vw, 26px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.stap__nr {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
}
.stap h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.stap p { font-size: 0.9rem; color: var(--ink-dim); line-height: 1.55; }

/* Investering */
.investering {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 12px;
  align-items: start;
}
@media (min-width: 900px) { .investering { grid-template-columns: 400px 1fr; gap: 36px; } }
.prijskaart {
  padding: clamp(24px, 3.5vw, 32px);
  background: var(--bg-dark);
  border-radius: var(--radius-lg);
  color: #FFFFFF;
}
.prijskaart__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.prijskaart__bedrag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}
.prijskaart__bedrag strong {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
}
.prijskaart__bedrag .prijs-oud { color: rgba(255, 255, 255, 0.45); font-size: 1.2rem; }
.prijskaart__bedrag span { color: rgba(255, 255, 255, 0.62); font-size: 0.95rem; }
.prijskaart__punten { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.prijskaart__punten li {
  position: relative;
  padding-left: 26px;
  font-size: 0.93rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.prijskaart__punten li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--good);
  font-weight: 700;
}
.prijskaart .cta { width: 100%; justify-content: center; }
.prijskaart__note {
  margin-top: 14px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* De rest van het team */
.anderen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (min-width: 620px) { .anderen { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .anderen { grid-template-columns: repeat(6, 1fr); } }
.ander {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ander:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.ander img { border-radius: 50%; object-fit: cover; }
.ander__naam {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.ander__rol {
  font-size: 0.78rem;
  color: var(--ink-low);
  line-height: 1.3;
}

/* Leeslinks vanaf de homepage en de teampagina naar de rolpagina */
.collega__meer,
.mw-meer {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.collega__meer:hover,
.mw-meer:hover { text-decoration: underline; }
.mw-meer { margin-top: 14px; margin-left: 16px; }

@media (max-width: 560px) {
  .mw-meer { display: block; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ander, .mega__knop::after { transition: none; }
  .ander:hover { transform: none; }
}

/* Op mobiel een compacte balk onderaan. De namen en rollen gaan eruit en de
   portretten komen naast elkaar te staan, anders dekt het paneel een derde
   van het scherm af en zitten de keuzeknoppen eronder. */
@media (max-width: 620px) {
  .teampop {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius) var(--radius) 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .teampop__kop { padding-bottom: 8px; margin-bottom: 8px; }
  .teampop__titel { font-size: 0.98rem; }

  .teampop__lijst {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .teampop__lijst::-webkit-scrollbar { display: none; }
  .teampop__lijst li {
    position: relative;
    flex: none;
    padding: 0;
    background: none;
  }
  .teampop__lijst img { width: 40px; height: 40px; }
  .teampop__lijst span { display: none; }
  .teampop__weg {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    font-size: 0.8rem;
    color: #fff;
    background: var(--ink);
    border: 2px solid var(--bg);
  }
  .teampop__weg:hover { background: var(--ink); color: #fff; }
  .teampop__note { margin-top: 8px; font-size: 0.72rem; }
}

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

/* Boven 980px staat op de homepage het mandje al naast het formulier,
   dan is een zwevend paneel dubbelop. */
@media (min-width: 980px) {
  .teampop { display: none; }
}

/* ---------------------------------------------------------------------------
   Homepage componenten: waar de collega's aan het werk zijn, de vergelijking
   van vier opties en het prijsblok. Eigen huisstijl, geen gradient buiten het
   logo, conform de brand guidelines v3.
--------------------------------------------------------------------------- */

/* Raster met rollen, elk met de eigen tintkleur */
.inzet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (min-width: 640px) { .inzet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .inzet-grid { grid-template-columns: repeat(4, 1fr); } }

.inzet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.inzet:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.inzet--indigo { --tint: var(--tint-indigo); }
.inzet--pink   { --tint: var(--tint-pink); }
.inzet--amber  { --tint: var(--tint-amber); }
.inzet--teal   { --tint: var(--tint-teal); }
.inzet--sky    { --tint: var(--tint-sky); }
.inzet--coral  { --tint: var(--tint-coral); }
.inzet--sage   { --tint: var(--tint-sage); }

.inzet__cat {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tint, var(--bg-alt));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.inzet__kop { display: flex; align-items: center; gap: 10px; }
.inzet__kop img { border-radius: 50%; object-fit: cover; flex: none; }
.inzet__kop > span { display: flex; flex-direction: column; line-height: 1.25; }
.inzet__kop strong { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; }
.inzet__kop em { font-style: normal; font-size: 0.78rem; color: var(--ink-low); }
.inzet__tekst { font-size: 0.88rem; color: var(--ink-dim); line-height: 1.55; flex: 1; }
.inzet__meer { font-size: 0.82rem; font-weight: 600; color: var(--accent); }

.inzet--leeg {
  border-style: dashed;
  background: transparent;
  align-items: flex-start;
}
.inzet__plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  font-size: 1.4rem;
  color: var(--ink-low);
}

/* Vier opties naast elkaar, met voors en tegens */
.opties {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
  align-items: stretch;
}
@media (min-width: 720px) { .opties { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .opties { grid-template-columns: repeat(4, 1fr); } }

.optie {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.5vw, 26px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.optie--wij {
  border-color: var(--ink);
  box-shadow: 0 1px 0 rgba(23, 37, 66, 0.04), 0 24px 48px -30px rgba(23, 37, 66, 0.5);
}
.optie__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-low);
  margin-bottom: 8px;
}
.optie--wij .optie__label { color: var(--accent); }
.optie h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.optie__prijs {
  margin: 10px 0 12px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.optie__prijs span {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-low);
  letter-spacing: 0;
}
.optie__prijs .prijs-oud { font-size: 0.95rem; font-weight: 500; }
.optie__quote {
  padding: 12px 0;
  margin-bottom: 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-2);
}
.optie__kop {
  margin-top: 14px;
  margin-bottom: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.optie__kop--voor { color: var(--good); }
.optie__kop--tegen { color: var(--ink-low); }
.optie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.optie li {
  position: relative;
  padding-left: 20px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.optie__voor li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: var(--good); font-weight: 700;
}
.optie__tegen li::before {
  content: "\2013";
  position: absolute; left: 0;
  color: var(--ink-low); font-weight: 700;
}
.optie__past {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-low);
}

/* Prijsblok: plan links, wat er wel en niet inzit rechts */
.prijsblok {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 12px;
  align-items: start;
}
@media (min-width: 940px) { .prijsblok { grid-template-columns: 380px 1fr; gap: 32px; } }

.prijsplan {
  padding: clamp(24px, 3.5vw, 32px);
  background: var(--bg-dark);
  border-radius: var(--radius-lg);
  color: #FFFFFF;
}
.prijsplan__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.prijsplan__bedrag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
}
.prijsplan__bedrag strong {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
}
.prijsplan__bedrag .prijs-oud { color: rgba(255, 255, 255, 0.45); font-size: 1.2rem; }
.prijsplan__bedrag span { width: 100%; color: rgba(255, 255, 255, 0.62); font-size: 0.9rem; }
.prijsplan__feiten {
  margin: 0 0 22px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 8px;
}
.prijsplan__feiten div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; }
.prijsplan__feiten dt { color: rgba(255, 255, 255, 0.62); }
.prijsplan__feiten dd { margin: 0; font-weight: 600; }
.prijsplan .cta { display: block; width: 100%; text-align: center; }
.prijsplan__note {
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.prijslijsten { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .prijslijsten { grid-template-columns: repeat(2, 1fr); } }
.prijslijst {
  padding: clamp(20px, 3vw, 26px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg);
}
.prijslijst--niet { background: var(--bg-soft); }
.prijslijst h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.prijslijst ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prijslijst li {
  position: relative;
  padding-left: 24px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.prijslijst li strong { color: var(--ink); font-weight: 600; }
.prijslijst--wel li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--good); font-weight: 700;
}
.prijslijst--niet li::before {
  content: "\00D7";
  position: absolute; left: 0; top: -1px;
  color: var(--ink-low); font-weight: 700; font-size: 1.05rem;
}

@media (prefers-reduced-motion: reduce) {
  .inzet { transition: none; }
  a.inzet:hover { transform: none; }
}

/* Kaartjes met een rol van twee regels mogen de rij niet uitrekken */
.portret { align-self: start; }

/* Duur per stap, zodat de bezoeker weet waar hij aan toe is */
.step__duur {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}


/* ---------------------------------------------------------------------------
   Keuzebalk: neemt je keuze mee over de hele lengte van de pagina, zodat je
   vanaf elke sectie kunt afronden zonder terug te scrollen.
--------------------------------------------------------------------------- */
.keuzebalk {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 16px;
  background: var(--bg-dark);
  border-radius: 999px;
  box-shadow: 0 20px 44px -20px rgba(23, 37, 66, 0.6);
  color: #FFFFFF;
  animation: keuzebalk-in 0.22s ease-out;
}
.keuzebalk[hidden] { display: none; }
@keyframes keuzebalk-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.mini--balk img { border-color: var(--bg-dark); box-shadow: none; }
.keuzebalk__tekst {
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.keuzebalk .cta {
  flex: none;
  padding: 9px 18px;
  font-size: 0.9rem;
  background: #FFFFFF;
  color: var(--ink);
}
.keuzebalk .cta:hover { background: var(--bg-alt); color: var(--ink); }
.keuzebalk__sluit {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.keuzebalk__sluit:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

@media (max-width: 560px) {
  .keuzebalk {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    max-width: none;
    animation: none;
    padding: 10px 10px 10px 14px;
  }
  .keuzebalk__tekst { display: none; }
  .mini--balk { flex: 1; }
  .keuzebalk .cta { flex: 1; text-align: center; }
}

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

/* Het achtste vak: werk dat er nog niet bij staat. Aanvinkbaar, zodat die
   wens meegaat met de aanmelding in plaats van te verdwijnen. */
.portret__foto--leeg {
  /* zonder afbeelding heeft dit vak geen eigen breedte, dus die moet expliciet,
     anders klapt het dicht en zie je alleen het vinkje zweven */
  width: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px dashed var(--line-strong);
  box-shadow: none;
}
.portret__plus { font-size: 1.7rem; color: var(--ink-low); line-height: 1; }
.portret--anders:hover .portret__foto--leeg { border-color: var(--accent); }
.portret--anders:hover .portret__plus { color: var(--accent); }
.portret--anders[aria-pressed="true"] .portret__foto--leeg {
  border-style: solid;
  border-color: var(--ink);
  background: var(--bg-alt);
}

/* Rijtje kleine portretjes van je gekozen team, rond en licht overlappend */
.mini { display: inline-flex; align-items: center; }
.mini:empty { display: none; }
.mini img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(23, 37, 66, 0.18);
  flex: none;
}
.mini img:not(:first-child) { margin-left: -10px; }
.wachtrij-card__kop .mini:not(:empty) { margin-right: 6px; }

/* Het vak zonder portret krijgt een gestippeld rondje in plaats van een foto */
.mini__leeg {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  background: var(--bg);
  font-size: 0.9rem;
  color: var(--ink-low);
  flex: none;
}
.mini__leeg:not(:first-child) { margin-left: -10px; }
.mini--balk .mini__leeg { background: var(--bg-dark); border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.75); }

/* De zwevende balk mag de laatste regels van de pagina niet afdekken */
body.heeft-keuzebalk { padding-bottom: 84px; }
@media (max-width: 560px) { body.heeft-keuzebalk { padding-bottom: 92px; } }


/* ---------------------------------------------------------------------------
   Header: tekst links, rechts de grote rolkaarten met daaronder het
   aanmeldvak. De kaart zelf is een link naar de rolpagina, de knop eronder
   zet de collega in je team. Twee doelen, dus twee losse klikvlakken.
--------------------------------------------------------------------------- */
.hero--merk {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px);
  align-items: start;
  max-width: var(--max);
  text-align: left;
  padding-bottom: clamp(32px, 5vw, 56px);
}
@media (min-width: 1080px) {
  .hero--merk {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    column-gap: clamp(36px, 4vw, 56px);
    align-items: center;
  }
}
.hero__tekst { grid-area: auto; max-width: 46ch; }
.hero__rechts { display: grid; gap: 18px; min-width: 0; }
.hero--merk .lede { margin-inline: 0; max-width: none; }
.hero__tekst h1 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); text-wrap: balance; }
.hero__team-note {
  margin-top: 18px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-low);
}

/* Grote rolkaarten */
.rolkaarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 560px)  { .rolkaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .rolkaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

.rolkaart {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tint, var(--bg-alt));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.rolkaart:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(23, 37, 66, 0.55); }

.rolkaart__link { display: block; color: var(--ink); }
.rolkaart__foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.rolkaart__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rolkaart__rol {
  display: block;
  padding: 10px 12px 12px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.rolkaart__link::after {
  content: "\2192";
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 0.95rem;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.rolkaart:hover .rolkaart__link::after { opacity: 0.7; transform: translateX(0); }

/* Knop om in je team te zetten, los van de link */
.rolkaart__kies {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 16px);
  padding: 5px 10px 5px 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.rolkaart__kiesicoon {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--ink-low);
}
.rolkaart__kiesicoon::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}
.rolkaart__kies:hover { border-color: var(--ink); }
.rolkaart__kies[aria-pressed="true"] {
  background: var(--good);
  border-color: var(--good);
  color: #FFFFFF;
}
.rolkaart__kies[aria-pressed="true"] .rolkaart__kiesicoon { border-color: #FFFFFF; }
.rolkaart__kies[aria-pressed="true"] .rolkaart__kiesicoon::after {
  border-left-color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}
.rolkaart__kies[aria-pressed="true"] .rolkaart__kiestekst::before { content: "In je team"; }
.rolkaart__kies[aria-pressed="true"] .rolkaart__kiestekst { font-size: 0; }
.rolkaart__kies[aria-pressed="true"] .rolkaart__kiestekst::before { font-size: 0.72rem; }

.rolkaart[class*="--"] { --tint: var(--bg-alt); }
.rolkaart--indigo { --tint: var(--tint-indigo); }
.rolkaart--pink   { --tint: var(--tint-pink); }
.rolkaart--amber  { --tint: var(--tint-amber); }
.rolkaart--teal   { --tint: var(--tint-teal); }
.rolkaart--sky    { --tint: var(--tint-sky); }
.rolkaart--coral  { --tint: var(--tint-coral); }
.rolkaart--sage   { --tint: var(--tint-sage); }

/* Aanmeldvak onder de kaarten */
.aanmeldvak {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 20px 44px -36px rgba(23, 37, 66, 0.5);
}
.aanmeldvak .wachtrij-card { padding: 0; background: none; border: none; box-shadow: none; }
.wachtrij-card__kop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-low);
  min-height: 34px;
}
.form-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .form-duo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.form-regel { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .form-regel { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .aanmeldvak .cta { margin-top: 0; width: auto; white-space: nowrap; padding-inline: 24px; }
}
.aanmeldvak .cta { display: block; width: 100%; text-align: center; }
.aanmeldvak .wachtrij-gerust {
  margin-top: 10px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-low);
}

@media (prefers-reduced-motion: reduce) {
  .rolkaart, .rolkaart__link::after, .rolkaart__kies { transition: none; }
  .rolkaart:hover { transform: none; }
}

/* Herstel en correcties op de header */
.hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Functietitels werden afgekapt omdat lange woorden niet braken */
.rolkaart__rol {
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: 0.88rem;
  padding-right: 26px;
}

/* Vier velden naast elkaar is te smal in dit vak, twee leest veel beter */
.form-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px)  { .form-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .form-duo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aanmeldvak label { white-space: nowrap; }
@media (max-width: 1239px) { .aanmeldvak label { white-space: normal; } }

/* Het aanmeldvak is smal, dus altijd twee kolommen. Een media query op
   schermbreedte klopt hier niet, want het vak is veel smaller dan het scherm. */
.form-duo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.aanmeldvak label { white-space: normal; }
.rolkaart__rol { hyphens: manual; font-size: 0.92rem; }

/* ---------------------------------------------------------------------------
   Aanmeldblok over de volle breedte onder de hero. Twee velden per rij, dus
   elk veld ongeveer een halve pagina breed, en de knop eronder in dezelfde
   breedte als de velden.
--------------------------------------------------------------------------- */
.aanmeldblok {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(32px, 5vw, 56px);
}
.aanmeldblok .aanmeldvak {
  padding: clamp(20px, 2.6vw, 28px);
}
.aanmeldblok .form-duo {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px;
}
.aanmeldblok .form-regel { display: contents; }
.aanmeldblok .cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 16px;
  padding-block: 15px;
}
.aanmeldblok .wachtrij-gerust {
  margin-top: 12px;
  font-size: 0.78rem;
  text-align: center;
}
.aanmeldblok .wachtrij-card__kop { justify-content: flex-start; }
.aanmeldblok input[type="text"],
.aanmeldblok input[type="email"],
.aanmeldblok input[type="tel"] { padding: 12px 14px; font-size: 1rem; }

/* Collega's kiezen direct in het formulier, zelfde keuze als bij de portretten */
.teamkeuze { margin: 6px 0 16px; }
.teamkeuze__label {
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin: 0 0 8px;
}
.teamkeuze__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.teamchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #FFFFFF;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.teamchip img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.teamchip__rol { color: var(--ink-dim); font-weight: 500; }
.teamchip::after {
  content: "+";
  font-weight: 700;
  color: var(--ink-low);
}
.teamchip:hover { border-color: var(--ink); }
.teamchip[aria-pressed="true"] {
  background: var(--good);
  border-color: var(--good);
  color: #FFFFFF;
}
.teamchip[aria-pressed="true"] .teamchip__rol { color: rgba(255, 255, 255, 0.85); }
.teamchip[aria-pressed="true"]::after { content: "\2713"; color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .teamchip { transition: none; }
}

/* De hero houdt alleen nog tekst en de rolkaarten */
.hero__rechts { gap: 0; }

/* De pijl plakte tegen de knoptekst omdat de knop op blokniveau staat */
.aanmeldblok .cta::after { margin-left: 8px; }
/* Genoeg lucht boven de plakkende header als je naar het formulier springt */
.aanmeldblok { scroll-margin-top: 100px; }

/* Twee velden naast elkaar is op een telefoon te smal om in te typen */
@media (max-width: 640px) {
  .aanmeldblok .form-duo { grid-template-columns: 1fr !important; }
}

/* De tekst hoort bovenaan uit te lijnen met de eerste rij foto's, niet
   verticaal gecentreerd in de kolom te hangen */
@media (min-width: 1080px) {
  .hero--merk { align-items: start; }
}

/* Demoknop in de hero, naast de uitleg */
.hero__demo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.hero__demo-note { font-size: 0.82rem; color: var(--ink-low); }