/* Letterlijk overgenomen uit marktlink.generatiealles.nl/stijl.css (de delen die deze pagina gebruikt). */
:root {
  --accent: #17479d;
  --accent2: #17479d;
  --accent2-zacht: rgba(23,71,157,.28);
  --marker: rgba(23,71,157,.16);
  --rij: rgba(23,71,157,.05);
  --status-review-bg: rgba(23,71,157,.12);
  --status-review-ink: #17479d;
  --status-klaar-bg: rgba(94,185,143,.22);
  --status-klaar-ink: #1f6b4b;
  /* Marktlink Capital, overgenomen uit hun eigen stylesheet */
  --primary: #071735;
  --mint: #5eb98f;
  --blauw: #17479d;
  --goud: #d8d5cb;

  --accent: #071735;
  --geel: #5eb98f;

  --ink: #071735;
  --ink-zacht: #55606f;
  --ink-licht: #939aa5;
  --lijn: #e4e7eb;
  --lijn-licht: #f1f3f5;
  --vlak: #f4f6f7;
  --ink-uit: #bfc5cd;
  --zand-diep: #b9a583;

  --kop: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --tekst: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #fff;
  color: var(--ink-zacht);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 2.2rem; }

.balk { border-bottom: 1px solid var(--lijn); }
.balk .wrap { display: flex; align-items: center; height: 70px; }
.merk { display: flex; align-items: baseline; gap: .42rem; font-family: var(--kop); font-size: 1rem; letter-spacing: -.01em; line-height: 1; }
.merk b { font-weight: 600; color: var(--ink); }
.merk span { font-weight: 400; font-size: .9375rem; color: var(--ink-licht); }
.merk i { display: inline-block; width: 7px; height: 7px; margin: 0 .42rem; align-self: center; }

.hoofd { padding: 5.5rem 0 4rem; }
.kicker { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-licht); margin-bottom: 1rem; }
h1 {
  font-family: var(--kop); font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.03em; color: var(--ink); max-width: none;
}
h1 .mark, .lead .mark {
  background: linear-gradient(transparent 50%, var(--marker) 50%);
  padding: 0 .12em; margin: 0 -.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lead { margin-top: 1.5rem; max-width: 69ch; font-size: 1.02rem; }

.sectie-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--lijn); }
.sectie-kop h2 { font-family: var(--kop); font-weight: 500; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.sectie-kop .zij { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-licht); }
.sectie-kop .acties { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.status { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; padding: .3rem .55rem; border-radius: 5px; white-space: nowrap; }
.status.volgt { border: 1px solid var(--lijn); color: var(--ink-licht); }
.status.review { background: var(--status-review-bg); color: var(--status-review-ink); }
.status.klaar { background: var(--status-klaar-bg); color: var(--status-klaar-ink); }

.voet { border-top: 1px solid var(--lijn); }
.voet .wrap { display: flex; align-items: center; gap: .55rem; padding-top: 1.6rem; padding-bottom: 3.5rem; font-size: .82rem; color: var(--ink-zacht); }
.voet i { width: 7px; height: 7px; flex: none; }

/* De stip boven en onder: één merkteken, een rustige ademhaling */
.merk i, .voet i {
  position: relative;
  border-radius: 50%;
  background: var(--blauw);
}
.merk i::after, .voet i::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(23,71,157,.26);
  animation: stip-ademt 4.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes stip-ademt {
  0% { transform: scale(.7); opacity: 0; }
  30% { opacity: .6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .merk i::after, .voet i::after { animation: none; opacity: .35; transform: none; }
}

/* Navigatie tussen de onderdelen van het werkdocument */
.stappen { border-bottom: 1px solid var(--lijn); background: #fff; }
.stappen .wrap { display: flex; gap: .3rem; flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem; }
.stap { font-family: var(--tekst); font-size: .88rem; font-weight: 450; letter-spacing: -.005em; padding: .44rem .8rem; border-radius: 7px; color: var(--ink-licht); }
.stap:hover { background: var(--vlak); color: var(--ink); }
.stap.hier { background: var(--accent); color: #fff; }

.substappen { border-bottom: 1px solid var(--lijn-licht); background: var(--vlak); }
.substappen .wrap { display: flex; gap: .25rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.substap { font-family: var(--tekst); font-size: .82rem; font-weight: 450; padding: .34rem .8rem; border-radius: 6px; color: var(--ink-licht); }
.substap:hover { background: #fff; color: var(--ink); }
.substap.hier { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lijn); }

.mengknop { font-family: var(--tekst); font-size: .84rem; font-weight: 450; padding: .44rem .95rem; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.mengknop:hover { background: var(--vlak); border-color: var(--ink-licht); color: var(--ink); }
.mengknop.aan { background: var(--accent); border-color: var(--accent); color: #fff; }
.mengknop.aan:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.kaart { border: 1px solid var(--lijn); border-radius: 10px; padding: 1rem 1.05rem 1.05rem; transition: border-color .15s; display: flex; flex-direction: column; }
.kaart:hover { border-color: var(--ink-licht); }

@media (max-width: 760px) {
  .wrap { padding: 0 1.3rem; }
  .balk .wrap { height: auto; padding-top: .9rem; padding-bottom: .9rem; }
  .merk { flex-wrap: wrap; font-size: .92rem; row-gap: .2rem; }
  .merk i { display: none; }
  .merk span { flex-basis: 100%; top: 0; }
  .hoofd { padding: 3.2rem 0 2.6rem; }
  .sectie-kop { flex-direction: column; align-items: flex-start; gap: .25rem; }
}