/* =========================================================
   BudgetEasy: de beeldtaal van de site (SiteBeeld, docs/website-makeover.md)

   Iconen en geanimeerde scènes. Elke scène is een doos met een vaste verhouding en
   `container-type: inline-size`: alles erin is getekend in `cqw` (een procent van de breedte),
   zodat hij op een telefoon precies zo oogt als op een groot scherm, alleen kleiner.

   Drie standen, en ze kloppen alle drie op zichzelf:
   - beweging: de keyframes hieronder, pas als de scène in beeld is (`is-live`, site.js);
   - stil: "Beweging pauzeren" zet alles op pauze (`.site-still`, site-tokens.css);
   - minder beweging: geen animatie, en dan tonen de basisregels de eindstand.
   Daarom staat de eindstand in de gewone regels, en de reis ernaartoe in de keyframes.

   Alleen kleuren uit site-tokens.css.
   ========================================================= */

/* ---------- Iconen ---------- */

.sb-icoon {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.14em;
}

/* Een icoon in een zacht rondje: de vaste vorm naast een kop of een punt. */
.sb-bol {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--site-teal-wash);
  color: var(--site-teal-deep);
  font-size: 22px;
}

.sb-bol--oranje {
  background: var(--site-glow-orange-14);
  color: var(--site-orange-text);
}

.sb-bol--inkt {
  background: var(--site-ink);
  color: var(--site-paper);
}

.sb-bol--klein {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 17px;
}

/* ---------- De scène ---------- */

.sb {
  position: relative;
  width: 100%;
  container-type: inline-size;
  font-family: var(--site-font);
  color: var(--site-ink);
  user-select: none;
  pointer-events: none;
}

.sb * {
  box-sizing: border-box;
}

/*
 * Met script beweegt een scène pas als hij in beeld is: een lus die al draaide terwijl je nog
 * bovenaan las, is halverwege als je erbij bent.
 */
.site-js .sb:not(.is-live) *,
.site-js .sb:not(.is-live) *::before,
.site-js .sb:not(.is-live) *::after {
  animation-play-state: paused;
}

/* Een kaartje in een scène: wit, rond, met de zachte schaduw van de rest. */
.sb-kaart {
  background: var(--site-paper);
  border-radius: 2.6cqw;
  box-shadow: var(--site-shadow-float);
}

/* =========================================================
   Held: de voorpagina (templates/website/beelden/held.inc.php)

   Twaalf seconden in drie tellen van vier, zonder stilstand ertussen: een kaartje verschijnt,
   glijdt in een boog de telefoon in, en de telefoon reageert op het moment van aankomst. De boog
   komt uit twee lagen: de buitenste schuift opzij met een uitloop, de binnenste zakt met een
   aanloop. Alles beweegt met transform en opacity, zodat de browser het op de grafische kaart
   doet. Aan het eind staat alles weer zoals aan het begin: de lus heeft geen naad.

      0 –  21 %   pinbetaling  →  Boodschappen krimpt, bedragen rollen
     30 –  51 %   brief        →  taak schuift boven op je lijstje
     63 –  83 %   betaling     →  vinkje tekent zich, streep, de taak gaat van je lijst (92 – 99 %)
   ========================================================= */

.sb--held {
  aspect-ratio: 100 / 88;
  --sbh-t: 12s;
  --sbh-glij: cubic-bezier(0.65, 0, 0.35, 1);
  --sbh-uit: cubic-bezier(0.22, 1, 0.36, 1);
  --sbh-opzij: cubic-bezier(0.3, 0.55, 0.35, 1);
  --sbh-zak: cubic-bezier(0.6, 0, 0.45, 1);
}

/* Hoe ver elk kaartje zakt: naar Boodschappen, naar de bovenste taak, en naar die taak. */
.sbh-in {
  --sbh-dy1: 22.5cqw;
  --sbh-dy2: 33cqw;
  --sbh-dy3: 7.3cqw;
}

.sb--held * {
  animation-duration: var(--sbh-t);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.sbh-kop {
  position: absolute;
  top: 0;
  font-size: max(10px, 2.1cqw);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--site-ink-3);
}

.sbh-kop--in { left: 1cqw; }
.sbh-kop--uit { left: 47cqw; }

/* De banen: een stippellijn die langzaam naar de telefoon stroomt. */
.sbh-banen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sbh-banen path {
  fill: none;
  stroke: var(--site-dash);
  stroke-width: 0.45;
  stroke-linecap: round;
  stroke-dasharray: 0.1 1.6;
  animation: sbh-stroom 1.6s linear infinite;
}

@keyframes sbh-stroom {
  to { stroke-dashoffset: -1.7; }
}

/* ---------- Wat er binnenkomt ---------- */

/* Onder de telefoon: een kaartje verdwijnt achter de rand, alsof het de telefoon in gaat. */
.sbh-in {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 36cqw;
}

.sbh-in--1 { top: 12cqw; }
.sbh-in--2 { top: 35.5cqw; }
.sbh-in--3 { top: 59cqw; }

.sbh-kaartje {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 2.2cqw 2.6cqw;
  border-radius: 3.2cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
  transform-origin: 85% 50%;
}

.sbh-kaartje__icoon {
  display: grid;
  place-items: center;
  flex: none;
  width: 7.6cqw;
  height: 7.6cqw;
  border-radius: 2.4cqw;
  background: var(--site-teal-wash);
  color: var(--site-teal-deep);
  font-size: 4.2cqw;
}

.sbh-kaartje__icoon--bank {
  background: var(--site-glow-orange-14);
  color: var(--site-orange-press);
}

.sbh-kaartje__tekst {
  display: grid;
  gap: 0.5cqw;
  min-width: 0;
}

.sbh-kaartje__wie {
  font-size: max(9px, 2.2cqw);
  color: var(--site-ink-3);
  white-space: nowrap;
}

.sbh-kaartje b {
  font-size: max(10px, 2.8cqw);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* De envelop: een echte tekening, met een klep en een zegel. */
.sbh-envelop {
  flex: none;
  width: 9cqw;
  height: 6.3cqw;
  overflow: visible;
}

.sbh-envelop rect:first-child {
  fill: var(--site-envelop);
  stroke: var(--site-orange-soft);
  stroke-width: 1.6;
}

.sbh-envelop path {
  fill: none;
  stroke: var(--site-orange-soft);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sbh-envelop__zegel {
  fill: var(--site-orange);
}

/* De reis: opzij (buiten), omlaag (midden), verschijnen en opgaan in de telefoon (binnen). */
.sbh-in--1 .sbh-in__x { animation-name: sbh-x-1; }
.sbh-in--1 .sbh-in__y { animation-name: sbh-y-1; }
.sbh-in--1 .sbh-kaartje { animation-name: sbh-kaart-1; }
.sbh-in--2 .sbh-in__x { animation-name: sbh-x-2; }
.sbh-in--2 .sbh-in__y { animation-name: sbh-y-2; }
.sbh-in--2 .sbh-kaartje { animation-name: sbh-kaart-2; }
.sbh-in--3 .sbh-in__x { animation-name: sbh-x-3; }
.sbh-in--3 .sbh-in__y { animation-name: sbh-y-3; }
.sbh-in--3 .sbh-kaartje { animation-name: sbh-kaart-3; }

@keyframes sbh-x-1 {
  0%, 8% { transform: none; animation-timing-function: var(--sbh-opzij); }
  21%, 100% { transform: translateX(40cqw); }
}
@keyframes sbh-y-1 {
  0%, 8% { transform: none; animation-timing-function: var(--sbh-zak); }
  21%, 100% { transform: translateY(var(--sbh-dy1)); }
}
@keyframes sbh-kaart-1 {
  0% { opacity: 0; transform: translateX(-3cqw); animation-timing-function: var(--sbh-uit); }
  5% { opacity: 1; transform: none; }
  8% { opacity: 1; transform: none; animation-timing-function: var(--sbh-glij); }
  18% { opacity: 1; transform: scale(0.8); animation-timing-function: ease-in; }
  21%, 100% { opacity: 0; transform: scale(0.7); }
}

@keyframes sbh-x-2 {
  0%, 38% { transform: none; animation-timing-function: var(--sbh-opzij); }
  51%, 100% { transform: translateX(40cqw); }
}
@keyframes sbh-y-2 {
  0%, 38% { transform: none; animation-timing-function: var(--sbh-zak); }
  51%, 100% { transform: translateY(var(--sbh-dy2)); }
}
@keyframes sbh-kaart-2 {
  0%, 30% { opacity: 0; transform: translateX(-3cqw) rotate(-4deg); animation-timing-function: var(--sbh-uit); }
  35% { opacity: 1; transform: rotate(-2deg); }
  38% { opacity: 1; transform: rotate(-2deg); animation-timing-function: var(--sbh-glij); }
  48% { opacity: 1; transform: scale(0.8) rotate(3deg); animation-timing-function: ease-in; }
  51%, 100% { opacity: 0; transform: scale(0.7) rotate(4deg); }
}

@keyframes sbh-x-3 {
  0%, 70% { transform: none; animation-timing-function: var(--sbh-opzij); }
  83%, 100% { transform: translateX(40cqw); }
}
@keyframes sbh-y-3 {
  0%, 70% { transform: none; animation-timing-function: var(--sbh-zak); }
  83%, 100% { transform: translateY(var(--sbh-dy3)); }
}
@keyframes sbh-kaart-3 {
  0%, 62% { opacity: 0; transform: translateX(-3cqw); animation-timing-function: var(--sbh-uit); }
  67% { opacity: 1; transform: none; }
  70% { opacity: 1; transform: none; animation-timing-function: var(--sbh-glij); }
  80% { opacity: 1; transform: scale(0.8); animation-timing-function: ease-in; }
  83%, 100% { opacity: 0; transform: scale(0.7); }
}

/* ---------- De telefoon ---------- */

.sbh-telefoon {
  position: absolute;
  z-index: 1;
  left: 45cqw;
  top: 5cqw;
  width: 45cqw;
  height: 82cqw;
  padding: 1.2cqw;
  border-radius: 7cqw;
  background: var(--site-ink);
  box-shadow: var(--site-shadow-phone);
}

.sbh-scherm {
  position: relative;
  height: 100%;
  padding: 5.2cqw 3cqw 3cqw;
  border-radius: 5.9cqw;
  background: var(--site-screen);
  overflow: hidden;
}

.sbh-scherm::before {
  content: '';
  position: absolute;
  top: 1.5cqw;
  left: 50%;
  width: 10cqw;
  height: 2.3cqw;
  border-radius: 99px;
  background: var(--site-ink);
  transform: translateX(-50%);
}

.sbh-boven {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(9px, 2cqw);
  color: var(--site-ink-3);
}

.sbh-dagen {
  padding: 0.5cqw 1.4cqw;
  border-radius: 99px;
  background: var(--site-teal-wash);
  color: var(--site-teal-deep);
  font-weight: 600;
}

.sbh-label {
  margin-top: 2.4cqw;
  font-size: max(9px, 2cqw);
  color: var(--site-ink-3);
}

.sbh-bedrag {
  font-size: 6.6cqw;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/*
 * Een bedrag dat rolt, zoals een teller: twee waarden onder elkaar in een venster van één regel.
 * Zonder beweging staat de tweede (de nieuwe) in beeld.
 */
.sbh-rol {
  display: inline-flex;
  flex-direction: column;
  height: 1.15em;
  overflow: hidden;
  vertical-align: bottom;
}

.sbh-rol > span {
  display: block;
  line-height: 1.15;
  transform: translateY(-100%);
  animation-name: sbh-rol;
}

.sbh-rol--klein > span {
  animation-name: sbh-rol-klein;
}

/* Aan het eind van de lus rolt hij niet terug (dat oogt als een fout) maar vervaagt hij en komt hij fris terug. */
@keyframes sbh-rol {
  0%, 22% { opacity: 1; transform: none; animation-timing-function: var(--sbh-glij); }
  28%, 94% { opacity: 1; transform: translateY(-100%); animation-timing-function: ease-in; }
  96.9% { opacity: 0; transform: translateY(-100%); }
  97% { opacity: 0; transform: none; animation-timing-function: ease-out; }
  100% { opacity: 1; transform: none; }
}

@keyframes sbh-rol-klein {
  0%, 21% { opacity: 1; transform: none; animation-timing-function: var(--sbh-glij); }
  26%, 94% { opacity: 1; transform: translateY(-100%); animation-timing-function: ease-in; }
  96.9% { opacity: 0; transform: translateY(-100%); }
  97% { opacity: 0; transform: none; animation-timing-function: ease-out; }
  100% { opacity: 1; transform: none; }
}

.sbh-sectie {
  margin: 3cqw 0 1.4cqw;
  font-size: max(8px, 1.8cqw);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--site-ink-3);
}

/* Je potjes: een rij per potje, met wat er nog in zit en een balk. */
.sbh-potjes {
  display: grid;
  gap: 0.6cqw;
  padding: 1cqw;
  border-radius: 3cqw;
  background: var(--site-paper);
}

.sbh-potje {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 1.8cqw;
  row-gap: 0.9cqw;
  align-items: center;
  padding: 1.3cqw 1.6cqw;
  border-radius: 2.2cqw;
}

.sbh-potje__icoon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 5.4cqw;
  height: 5.4cqw;
  border-radius: 50%;
  background: var(--zacht);
  color: var(--kleur);
  font-size: 3cqw;
}

.sbh-potje__naam {
  font-size: max(9px, 2.1cqw);
  font-weight: 600;
  white-space: nowrap;
}

.sbh-potje__over {
  font-size: max(9px, 2cqw);
  color: var(--site-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sbh-potje__balk {
  grid-column: 2 / -1;
  height: 1.1cqw;
  border-radius: 99px;
  background: var(--site-toggle-track);
  overflow: hidden;
}

.sbh-potje__balk i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--kleur);
  transform-origin: left;
  transform: scaleX(var(--vul));
}

.sbh-potje--eten { --kleur: var(--site-teal); --zacht: var(--site-teal-wash); --vul: 0.42; }
.sbh-potje--vervoer { --kleur: var(--site-orange); --zacht: var(--site-glow-orange-14); --vul: 0.55; }
.sbh-potje--vrij { --kleur: var(--site-orange-soft); --zacht: var(--site-glow-orange-14); --vul: 0.7; }

.sbh-potje--eten { animation-name: sbh-licht; }
.sbh-potje--eten .sbh-potje__over { color: var(--site-teal-deep); font-weight: 700; }
.sbh-potje--eten .sbh-potje__balk i { animation-name: sbh-krimp; }

@keyframes sbh-licht {
  0%, 20% { background-color: transparent; animation-timing-function: var(--sbh-uit); }
  23% { background-color: var(--site-teal-wash); animation-timing-function: ease-out; }
  36%, 100% { background-color: transparent; }
}

@keyframes sbh-krimp {
  0%, 21% { transform: scaleX(0.62); animation-timing-function: var(--sbh-uit); }
  30%, 94% { transform: scaleX(0.42); animation-timing-function: var(--sbh-glij); }
  100% { transform: scaleX(0.62); }
}

/*
 * Te doen: er staat al een taak, zodat het lijstje nooit leeg is. De nieuwe schuift erboven in
 * en duwt de oude een plek omlaag; afgevinkt glijdt hij weg en schuift de oude terug.
 */
.sbh-taken {
  position: relative;
  height: 18cqw;
}

.sbh-taak {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 2cqw;
  height: 8.2cqw;
  padding: 0 2.2cqw;
  border-radius: 2.6cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-tile);
}

.sbh-taak__tekst {
  display: grid;
  gap: 0.3cqw;
  min-width: 0;
}

.sbh-taak__tekst b {
  font-size: max(9px, 2.3cqw);
  white-space: nowrap;
}

.sbh-taak__tekst small {
  font-size: max(8px, 1.8cqw);
  color: var(--site-ink-3);
  white-space: nowrap;
}

.sbh-taak--oud {
  transform: translateY(9.6cqw);
  animation-name: sbh-oud;
}

.sbh-taak--nieuw {
  animation-name: sbh-nieuw;
}

@keyframes sbh-oud {
  0%, 50% { transform: none; animation-timing-function: var(--sbh-glij); }
  57%, 93% { transform: translateY(9.6cqw); animation-timing-function: var(--sbh-glij); }
  99%, 100% { transform: none; }
}

@keyframes sbh-nieuw {
  0%, 50% { opacity: 0; transform: translateY(-3cqw) scale(0.94); box-shadow: 0 0 0 0 transparent; animation-timing-function: var(--sbh-uit); }
  57% { opacity: 1; transform: none; box-shadow: 0 0 0 0.8cqw var(--site-glow-orange-16); animation-timing-function: ease-out; }
  68% { opacity: 1; transform: none; box-shadow: var(--site-shadow-tile); }
  92% { opacity: 1; transform: none; animation-timing-function: var(--sbh-glij); }
  98%, 100% { opacity: 0; transform: translateX(12cqw); }
}

/* Het rondje: leeg, vult zich, en het vinkje tekent zich in één lijn. */
.sbh-vink {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.8cqw;
  height: 4.8cqw;
  border-radius: 50%;
  background: var(--site-teal);
  box-shadow: inset 0 0 0 0.35cqw var(--site-teal);
  animation-name: sbh-rondje;
}

.sbh-vink--open {
  background: transparent;
  box-shadow: inset 0 0 0 0.35cqw var(--site-step-line);
  animation: none;
}

.sbh-vink svg {
  width: 72%;
  height: 72%;
  overflow: visible;
}

.sbh-vink path {
  fill: none;
  stroke: var(--site-paper);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
  animation-name: sbh-teken;
}

@keyframes sbh-rondje {
  0%, 83% { background-color: transparent; box-shadow: inset 0 0 0 0.35cqw var(--site-step-line); transform: none; animation-timing-function: var(--sbh-uit); }
  86% { background-color: var(--site-teal); box-shadow: inset 0 0 0 0.35cqw var(--site-teal); transform: scale(1.18); animation-timing-function: var(--sbh-glij); }
  89%, 100% { background-color: var(--site-teal); box-shadow: inset 0 0 0 0.35cqw var(--site-teal); transform: none; }
}

@keyframes sbh-teken {
  0%, 84.5% { stroke-dashoffset: 20; animation-timing-function: var(--sbh-glij); }
  88.5%, 100% { stroke-dashoffset: 0; }
}

/* De streep door de taak groeit van links naar rechts. */
.sbh-streep {
  position: absolute;
  left: 8.6cqw;
  right: 3cqw;
  top: 50%;
  height: 0.3cqw;
  border-radius: 99px;
  background: var(--site-ink-3);
  transform-origin: left;
  animation-name: sbh-streep;
}

@keyframes sbh-streep {
  0%, 87% { transform: scaleX(0); animation-timing-function: var(--sbh-glij); }
  91%, 100% { transform: none; }
}

/* Op een smalle scène: een grotere telefoon en smallere kaartjes, zodat de letters leesbaar blijven. */
@container (max-width: 480px) {
  .sbh-telefoon { left: 40cqw; width: 58cqw; }
  .sbh-kop--uit { left: 42cqw; }
  .sbh-in { width: 38cqw; }
  .sbh-kaartje__icoon, .sbh-envelop { display: none; }
  /* De minimale lettergrootte maakt de rijen hier hoger; twee potjes is genoeg om het te snappen. */
  .sbh-potje--vrij { display: none; }
  .sbh-sectie { margin: 2.2cqw 0 1cqw; }
  .sbh-label { margin-top: 1.6cqw; }
  .sbh-in { --sbh-dy1: 22.6cqw; --sbh-dy2: 23.4cqw; --sbh-dy3: -2.6cqw; }
}

/* =========================================================
   Gedeeld door de kleinere scènes
   ========================================================= */

.sb--koppelen,
.sb--scannen,
.sb--overzicht,
.sb--afvinken,
.sb--regeling,
.sb--sparen,
.sb--samen,
.sb--coach,
.sb--veilig,
.sb--rust {
  aspect-ratio: 100 / 66;
}

.sb--verdelen { aspect-ratio: 100 / 74; }
.sb--tarief { aspect-ratio: 100 / 72; }

/* Een kleine kop in een kaartje: icoon en een woord, grijs. */
.sbo-kop,
.sbt-kop,
.sbc-kop,
.sbm-kaart__kop {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: max(10px, 3.4cqw);
  font-weight: 600;
  color: var(--site-ink-3);
}

.sbo-kop .sb-icoon,
.sbt-kop .sb-icoon,
.sbc-kop .sb-icoon {
  font-size: 1.3em;
  color: var(--site-teal);
}

/* =========================================================
   Koppelen: bank → telefoon, vanzelf bijgewerkt
   ========================================================= */

.sb--koppelen { --t: 6s; }

.sbk-bank {
  position: absolute;
  left: 2cqw;
  top: 16cqw;
  width: 24cqw;
  display: grid;
  justify-items: center;
  gap: 2cqw;
  padding: 5cqw 2cqw 4cqw;
  border-radius: 5cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
  font-size: max(10px, 3.4cqw);
  font-weight: 600;
}

.sbk-bank__icoon {
  display: grid;
  place-items: center;
  width: 13cqw;
  height: 13cqw;
  border-radius: 4cqw;
  background: var(--site-glow-orange-14);
  color: var(--site-orange-text);
  font-size: 7cqw;
}

.sbk-draad {
  position: absolute;
  left: 27cqw;
  right: 37cqw;
  top: 30cqw;
  height: 0;
  border-top: 0.6cqw dashed var(--site-step-line);
}

.sbk-draad span {
  position: absolute;
  top: -1.8cqw;
  left: 0;
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background: var(--site-teal);
  box-shadow: 0 0 0 1cqw var(--site-teal-22);
  opacity: 0;
  animation: sbk-stip var(--t) linear infinite;
}

.sbk-draad span:nth-child(2) { animation-delay: calc(var(--t) / -3); }
.sbk-draad span:nth-child(3) { animation-delay: calc(var(--t) / -1.5); }

.sbk-oog {
  position: absolute;
  left: 28cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.4cqw 2.4cqw;
  border-radius: 99px;
  font-size: max(9px, 3cqw);
  font-weight: 600;
  white-space: nowrap;
}

.sbk-oog {
  top: 36cqw;
  background: var(--site-teal-wash);
  color: var(--site-teal-deep);
}

.sbk-tel {
  position: absolute;
  right: 3cqw;
  top: 4cqw;
  width: 33cqw;
  height: 58cqw;
  padding: 7cqw 2.6cqw 2.6cqw;
  border-radius: 6cqw;
  background: var(--site-screen);
  box-shadow: 0 0 0 1.3cqw var(--site-ink), var(--site-shadow-phone);
  display: grid;
  align-content: start;
  gap: 2cqw;
}

.sbk-rij {
  display: grid;
  gap: 0.6cqw;
  padding: 2cqw 2.4cqw;
  border-radius: 2.4cqw;
  background: var(--site-paper);
  font-size: max(8px, 2.7cqw);
  color: var(--site-ink-3);
  animation: sbk-rij var(--t) var(--site-ease) infinite both;
}

.sbk-rij b {
  font-size: max(10px, 3.4cqw);
  color: var(--site-ink);
  font-variant-numeric: tabular-nums;
}

.sbk-rij b.sbk-plus { color: var(--site-teal-deep); }
.sbk-rij--2 { animation-name: sbk-rij-2; }
.sbk-rij--3 { animation-name: sbk-rij-3; }

@keyframes sbk-stip {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes sbk-rij {
  0%, 12% { opacity: 0; transform: translateY(2cqw); }
  20%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

@keyframes sbk-rij-2 {
  0%, 30% { opacity: 0; transform: translateY(2cqw); }
  38%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

@keyframes sbk-rij-3 {
  0%, 48% { opacity: 0; transform: translateY(2cqw); }
  56%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* =========================================================
   Scannen: een brief onder de camera
   ========================================================= */

.sb--scannen { --t: 7s; }

.sbs-brief {
  position: absolute;
  left: 8cqw;
  top: 3cqw;
  width: 50cqw;
  height: 60cqw;
  padding: 5cqw 4.4cqw;
  border-radius: 1.6cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
  transform: rotate(-3deg);
  display: grid;
  align-content: start;
  gap: 2.4cqw;
}

.sbs-brief__afzender {
  width: max-content;
  padding: 1cqw 2cqw;
  border-radius: 1cqw;
  background: var(--site-ink);
  color: var(--site-paper);
  font-size: max(9px, 3cqw);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.sbs-regel {
  height: 1.6cqw;
  border-radius: 99px;
  background: var(--site-toggle-track);
}

.sbs-regel--kort { width: 60%; }

.sbs-veld {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1cqw 1.4cqw;
  margin: 0 -1.4cqw;
  border-radius: 1cqw;
  font-size: max(9px, 2.8cqw);
  color: var(--site-ink-3);
  background: var(--site-marker);
  animation: sbs-veld var(--t) var(--site-ease) infinite both;
}

.sbs-veld b {
  color: var(--site-ink);
  white-space: nowrap;
}

.sbs-veld--2 { animation-name: sbs-veld-2; }
.sbs-veld--3 { animation-name: sbs-veld-3; }

.sbs-zoeker {
  position: absolute;
  left: 4cqw;
  top: 0;
  width: 58cqw;
  height: 66cqw;
  animation: sbs-zoeker var(--t) var(--site-ease) infinite both;
}

.sbs-zoeker span {
  position: absolute;
  width: 7cqw;
  height: 7cqw;
  border: 0 solid var(--site-orange);
}

.sbs-zoeker span:nth-child(1) { left: 0; top: 0; border-width: 0.8cqw 0 0 0.8cqw; border-radius: 2cqw 0 0 0; }
.sbs-zoeker span:nth-child(2) { right: 0; top: 0; border-width: 0.8cqw 0.8cqw 0 0; border-radius: 0 2cqw 0 0; }
.sbs-zoeker span:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 0.8cqw 0.8cqw; border-radius: 0 0 0 2cqw; }
.sbs-zoeker span:nth-child(4) { right: 0; bottom: 0; border-width: 0 0.8cqw 0.8cqw 0; border-radius: 0 0 2cqw 0; }

.sbs-lijn {
  position: absolute;
  left: 3cqw;
  right: 3cqw;
  top: 0;
  height: 0.8cqw;
  border-radius: 99px;
  background: var(--site-orange);
  box-shadow: 0 0 3cqw 1cqw var(--site-glow-orange-40);
  opacity: 0;
  animation: sbs-lijn var(--t) ease-in-out infinite both;
}

.sbs-taak {
  position: absolute;
  right: 2cqw;
  bottom: 6cqw;
  width: 42cqw;
  display: flex;
  gap: 2cqw;
  align-items: flex-start;
  padding: 3cqw;
  border-radius: 3.4cqw;
  background: var(--site-ink);
  color: var(--site-paper);
  box-shadow: var(--site-shadow-phone);
  animation: sbs-taak var(--t) var(--site-ease) infinite both;
}

.sbs-taak > .sb-icoon {
  font-size: 5cqw;
  color: var(--site-orange-soft);
}

.sbs-taak span {
  display: grid;
  gap: 0.8cqw;
}

.sbs-taak b { font-size: max(10px, 3.2cqw); line-height: 1.25; }
.sbs-taak small { font-size: max(9px, 2.8cqw); color: var(--site-on-dark-2); }

@keyframes sbs-zoeker {
  0% { opacity: 0; transform: scale(1.06); }
  8%, 60% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: none; }
}

@keyframes sbs-lijn {
  0%, 8% { top: 3cqw; opacity: 0; }
  12% { opacity: 1; }
  38% { top: 62cqw; opacity: 1; }
  42%, 100% { top: 62cqw; opacity: 0; }
}

@keyframes sbs-veld {
  0%, 38% { background-color: transparent; }
  44%, 94% { background-color: var(--site-marker); }
  100% { background-color: transparent; }
}

@keyframes sbs-veld-2 {
  0%, 44% { background-color: transparent; }
  50%, 94% { background-color: var(--site-marker); }
  100% { background-color: transparent; }
}

@keyframes sbs-veld-3 {
  0%, 50% { background-color: transparent; }
  56%, 94% { background-color: var(--site-marker); }
  100% { background-color: transparent; }
}

@keyframes sbs-taak {
  0%, 60% { opacity: 0; transform: translateY(5cqw) scale(0.94); }
  68%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* =========================================================
   Overzicht: potjes links, lijstje rechts
   ========================================================= */

.sb--overzicht { --t: 7s; }

.sbo-kaart {
  position: absolute;
  top: 4cqw;
  bottom: 4cqw;
  display: grid;
  align-content: start;
  gap: 3cqw;
  padding: 4.4cqw 4cqw;
  border-radius: 4.4cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
}

.sbo-kaart--geld { left: 2cqw; width: 46cqw; }
.sbo-kaart--taken { right: 2cqw; width: 46cqw; top: 12cqw; bottom: auto; }

.sbo-potje {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.2cqw 2cqw;
  align-items: center;
  font-size: max(9px, 3cqw);
  color: var(--site-ink-3);
}

.sbo-potje b {
  color: var(--site-ink);
  font-variant-numeric: tabular-nums;
}

.sbo-potje__balk {
  grid-column: 1 / -1;
  height: 2cqw;
  border-radius: 99px;
  background: var(--site-toggle-track);
  overflow: hidden;
  order: 3;
}

.sbo-potje__balk i {
  display: block;
  height: 100%;
  width: var(--vul);
  border-radius: 99px;
  background: var(--kleur);
  animation: sbo-balk var(--t) var(--site-ease) infinite both;
}

.sbo-potje--eten { --vul: 37%; --kleur: var(--site-teal); }
.sbo-potje--vervoer { --vul: 43%; --kleur: var(--site-orange); }
.sbo-potje--vrij { --vul: 62%; --kleur: var(--site-orange-soft); }

.sbo-taak {
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: max(9px, 2.9cqw);
  line-height: 1.3;
}

.sbo-taak__vink {
  display: grid;
  place-items: center;
  flex: none;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  border: 0.5cqw solid var(--site-teal);
  background: var(--site-teal);
  color: var(--site-paper);
  font-size: 3cqw;
  animation: sbo-vink var(--t) var(--site-ease) infinite both;
}

.sbo-taak__vink .sb-icoon { animation: sbo-vinkje var(--t) var(--site-ease) infinite both; }

.sbo-taak__tekst {
  text-decoration: line-through;
  text-decoration-color: var(--site-ink-3);
  color: var(--site-ink-3);
  animation: sbo-streep var(--t) var(--site-ease) infinite both;
}

/* De derde taak blijft staan: er is altijd iets dat nog moet. */
.sbo-taak--3 .sbo-taak__vink { background: transparent; border-color: var(--site-step-line); animation: none; }
.sbo-taak--3 .sbo-taak__vink .sb-icoon { opacity: 0; animation: none; }
.sbo-taak--3 .sbo-taak__tekst { text-decoration: none; color: var(--site-ink); animation: none; }

.sbo-taak--2 .sbo-taak__vink,
.sbo-taak--2 .sbo-taak__vink .sb-icoon,
.sbo-taak--2 .sbo-taak__tekst { animation-delay: 1.2s; }

@keyframes sbo-balk {
  0% { width: 0; }
  18%, 100% { width: var(--vul); }
}

@keyframes sbo-vink {
  0%, 30% { background: transparent; border-color: var(--site-step-line); transform: none; }
  34% { background: var(--site-teal); border-color: var(--site-teal); transform: scale(1.25); }
  38%, 94% { background: var(--site-teal); border-color: var(--site-teal); transform: none; }
  100% { background: transparent; border-color: var(--site-step-line); }
}

@keyframes sbo-vinkje {
  0%, 31% { opacity: 0; }
  34%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sbo-streep {
  0%, 32% { text-decoration-color: transparent; color: var(--site-ink); }
  38%, 94% { text-decoration-color: var(--site-ink-3); color: var(--site-ink-3); }
  100% { text-decoration-color: transparent; color: var(--site-ink); }
}

/* =========================================================
   Verdelen: het maandbudget
   ========================================================= */

.sb--verdelen { --t: 10s; }

.sbv-salaris {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 2cqw 3.6cqw 2cqw 2cqw;
  border-radius: 99px;
  background: var(--site-ink);
  color: var(--site-paper);
  transform: translateX(-50%);
  box-shadow: var(--site-shadow-phone);
  white-space: nowrap;
  animation: sbv-salaris var(--t) var(--site-ease) infinite both;
}

.sbv-salaris__icoon {
  display: grid;
  place-items: center;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: var(--site-teal);
  font-size: 3.8cqw;
}

.sbv-salaris span:last-child { display: grid; }
.sbv-salaris small { font-size: max(8px, 2.2cqw); color: var(--site-on-dark-2); }
.sbv-salaris b { font-size: max(12px, 3.6cqw); font-variant-numeric: tabular-nums; }

/* Vijf takken van het salaris naar de potjes. */
.sbv-takken {
  position: absolute;
  left: 10cqw;
  right: 10cqw;
  top: 11cqw;
  height: 8cqw;
  border: 0.45cqw solid var(--site-step-line);
  border-bottom: 0;
  border-radius: 3cqw 3cqw 0 0;
  animation: sbv-takken var(--t) var(--site-ease) infinite both;
  transform-origin: top;
}

.sbv-takken i {
  position: absolute;
  top: -3.4cqw;
  width: 0.45cqw;
  height: 11.4cqw;
  background: var(--site-step-line);
}

.sbv-takken i:nth-child(1) { display: none; }
.sbv-takken i:nth-child(2) { left: 25%; top: 0; height: 8cqw; }
.sbv-takken i:nth-child(3) { left: 50%; top: -3.4cqw; }
.sbv-takken i:nth-child(4) { left: 75%; top: 0; height: 8cqw; }
.sbv-takken i:nth-child(5) { display: none; }

.sbv-potjes {
  position: absolute;
  left: 0;
  right: 0;
  top: 19cqw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2cqw;
}

.sbv-potje {
  display: grid;
  justify-items: center;
  gap: 1.4cqw;
  text-align: center;
}

.sbv-potje__glas {
  position: relative;
  width: 15cqw;
  height: 26cqw;
  border-radius: 2.4cqw 2.4cqw 4cqw 4cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
  overflow: hidden;
}

.sbv-potje__glas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2.6cqw;
  border-radius: 0 0 1cqw 1cqw;
  background: var(--site-toggle-track);
  z-index: 1;
}

.sbv-potje__vulling {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--vul);
  background: var(--kleur);
  animation: sbv-vul var(--t) var(--site-ease) infinite both;
}

.sbv-potje__icoon {
  position: absolute;
  left: 50%;
  bottom: 3cqw;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 7.4cqw;
  height: 7.4cqw;
  border-radius: 50%;
  background: var(--site-glass-80);
  color: var(--site-ink);
  font-size: 4.2cqw;
  transform: translateX(-50%);
}

.sbv-potje--vast { --vul: 90%; --vol: 90%; --kleur: var(--site-ink-3); }
.sbv-potje--eten { --vul: 62%; --vol: 74%; --kleur: var(--site-teal); }
.sbv-potje--vervoer { --vul: 56%; --vol: 64%; --kleur: var(--site-orange); }
.sbv-potje--sparen { --vul: 70%; --vol: 70%; --kleur: var(--site-teal-deep); }
.sbv-potje--vrij { --vul: 80%; --vol: 80%; --kleur: var(--site-orange-soft); }

.sbv-potje--eten .sbv-potje__vulling { animation-name: sbv-vul-eten; }
.sbv-potje--vervoer .sbv-potje__vulling { animation-name: sbv-vul-vervoer; }

.sbv-potje__naam {
  font-size: max(9px, 2.6cqw);
  font-weight: 600;
  line-height: 1.2;
}

.sbv-potje__bedrag {
  position: relative;
  height: 4cqw;
  width: 100%;
  font-size: max(9px, 2.6cqw);
  color: var(--site-ink-3);
  font-variant-numeric: tabular-nums;
}

.sbv-potje__bedrag span {
  position: absolute;
  left: 0;
  right: 0;
}

.sbv-potje__bedrag .sbv-potje__voor { opacity: 0; animation: sbv-voor var(--t) var(--site-ease) infinite both; }
.sbv-potje__bedrag .sbv-potje__na { color: var(--site-teal-deep); font-weight: 700; animation: sbv-na var(--t) var(--site-ease) infinite both; }
.sbv-potje--vervoer .sbv-potje__voor { animation-name: sbv-voor-2; }
.sbv-potje--vervoer .sbv-potje__na { color: var(--site-orange-text); animation-name: sbv-na-2; }

/* Twee betalingen die in hun potje vallen. */
.sbv-val {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.4cqw 2.4cqw;
  border-radius: 99px;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
  font-size: max(9px, 2.6cqw);
  white-space: nowrap;
  opacity: 0;
  animation: sbv-val var(--t) var(--site-ease) infinite both;
}

.sbv-val b { font-variant-numeric: tabular-nums; }
.sbv-val--1 { left: 13cqw; top: 8cqw; }
.sbv-val--2 { left: 47cqw; top: 8cqw; animation-name: sbv-val-2; }

@keyframes sbv-salaris {
  0% { opacity: 0; transform: translate(-50%, -4cqw); }
  8%, 100% { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes sbv-takken {
  0%, 8% { transform: scaleY(0); opacity: 0; }
  16%, 100% { transform: none; opacity: 1; }
}

@keyframes sbv-vul {
  0%, 14% { height: 0; }
  30%, 100% { height: var(--vul); }
}

@keyframes sbv-vul-eten {
  0%, 14% { height: 0; }
  30%, 50% { height: var(--vol); }
  56%, 100% { height: var(--vul); }
}

@keyframes sbv-vul-vervoer {
  0%, 14% { height: 0; }
  30%, 70% { height: var(--vol); }
  76%, 100% { height: var(--vul); }
}

@keyframes sbv-voor {
  0%, 50% { opacity: 1; }
  54%, 100% { opacity: 0; }
}

@keyframes sbv-na {
  0%, 50% { opacity: 0; }
  56%, 100% { opacity: 1; }
}

@keyframes sbv-voor-2 {
  0%, 70% { opacity: 1; }
  74%, 100% { opacity: 0; }
}

@keyframes sbv-na-2 {
  0%, 70% { opacity: 0; }
  76%, 100% { opacity: 1; }
}

@keyframes sbv-val {
  0%, 36% { opacity: 0; transform: translateY(-3cqw); }
  40% { opacity: 1; transform: none; }
  46% { opacity: 1; transform: translateY(2cqw); }
  52%, 100% { opacity: 0; transform: translateY(16cqw) scale(0.6); }
}

@keyframes sbv-val-2 {
  0%, 56% { opacity: 0; transform: translateY(-3cqw); }
  60% { opacity: 1; transform: none; }
  66% { opacity: 1; transform: translateY(2cqw); }
  72%, 100% { opacity: 0; transform: translateY(16cqw) scale(0.6); }
}

/* =========================================================
   Afvinken: taak en betaling, hetzelfde kenmerk
   ========================================================= */

.sb--afvinken { --t: 8s; }

.sba-labels {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 0;
  height: 100%;
  font-size: max(9px, 2.6cqw);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--site-ink-3);
}

.sba-labels span {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}

.sba-labels span:first-child { top: 1cqw; }
.sba-labels span:last-child { top: 38cqw; }

.sba-taak,
.sba-betaling {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 3.6cqw;
  border-radius: 4cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
}

.sba-taak { top: 7cqw; }
.sba-betaling { top: 44cqw; animation: sba-betaling var(--t) var(--site-ease) infinite both; }

.sba-taak__vink {
  display: grid;
  place-items: center;
  flex: none;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  border: 0.6cqw solid var(--site-teal);
  background: var(--site-teal);
  color: var(--site-paper);
  font-size: 4.2cqw;
  animation: sba-vink var(--t) var(--site-ease) infinite both;
}

.sba-taak__vink .sb-icoon { animation: sba-vinkje var(--t) var(--site-ease) infinite both; }

.sba-taak__tekst,
.sba-betaling__tekst {
  display: grid;
  gap: 1cqw;
  min-width: 0;
  flex: 1;
}

.sba-taak__tekst b,
.sba-betaling__tekst b {
  font-size: max(10px, 3.4cqw);
  line-height: 1.25;
}

.sba-taak__tekst b {
  text-decoration: line-through;
  text-decoration-color: var(--site-ink-3);
  animation: sba-streep var(--t) var(--site-ease) infinite both;
}

.sba-taak__tekst small,
.sba-betaling__tekst small {
  font-size: max(9px, 2.7cqw);
  color: var(--site-ink-3);
  white-space: nowrap;
}

.sba-taak mark,
.sba-betaling mark {
  padding: 0.2cqw 0.8cqw;
  border-radius: 0.8cqw;
  color: var(--site-ink);
  background: var(--site-marker);
  font-variant-numeric: tabular-nums;
  animation: sba-mark var(--t) var(--site-ease) infinite both;
}

.sba-taak__stempel {
  position: absolute;
  right: 3cqw;
  top: -3cqw;
  padding: 1cqw 2.4cqw;
  border-radius: 99px;
  background: var(--site-teal);
  color: var(--site-paper);
  font-size: max(9px, 2.6cqw);
  font-weight: 700;
  transform: rotate(4deg);
  animation: sba-stempel var(--t) var(--site-ease) infinite both;
}

.sba-lijn {
  position: absolute;
  left: 50%;
  top: 27cqw;
  height: 17cqw;
  border-left: 0.6cqw dashed var(--site-orange);
  animation: sba-lijn var(--t) var(--site-ease) infinite both;
  transform-origin: bottom;
}

.sba-betaling__icoon {
  display: grid;
  place-items: center;
  flex: none;
  width: 7cqw;
  height: 7cqw;
  border-radius: 2.2cqw;
  background: var(--site-glow-orange-14);
  color: var(--site-orange-text);
  font-size: 4.2cqw;
}

.sba-betaling__bedrag {
  font-size: max(11px, 3.8cqw);
  font-variant-numeric: tabular-nums;
}

@keyframes sba-betaling {
  0%, 12% { opacity: 0; transform: translateX(10cqw); }
  22%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

@keyframes sba-mark {
  0%, 28% { background-color: transparent; }
  34%, 94% { background-color: var(--site-marker); }
  100% { background-color: transparent; }
}

@keyframes sba-lijn {
  0%, 34% { transform: scaleY(0); opacity: 0; }
  44%, 94% { transform: none; opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

@keyframes sba-vink {
  0%, 50% { background: transparent; border-color: var(--site-step-line); transform: none; }
  54% { background: var(--site-teal); border-color: var(--site-teal); transform: scale(1.25); }
  58%, 94% { background: var(--site-teal); border-color: var(--site-teal); transform: none; }
  100% { background: transparent; border-color: var(--site-step-line); }
}

@keyframes sba-vinkje {
  0%, 51% { opacity: 0; }
  54%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sba-streep {
  0%, 52% { text-decoration-color: transparent; }
  58%, 94% { text-decoration-color: var(--site-ink-3); }
  100% { text-decoration-color: transparent; }
}

@keyframes sba-stempel {
  0%, 56% { opacity: 0; transform: rotate(4deg) scale(1.6); }
  62%, 94% { opacity: 1; transform: rotate(4deg) scale(1); }
  100% { opacity: 0; transform: rotate(4deg); }
}

/* =========================================================
   Tarief: een vaste last wordt duurder
   ========================================================= */

.sb--tarief { --t: 9s; }

.sbt-lijst {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 2cqw;
  display: grid;
  gap: 1.6cqw;
  padding: 4cqw;
  border-radius: 4.4cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
}

.sbt-rij {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.2cqw 2.4cqw;
  border-radius: 2.4cqw;
  font-size: max(10px, 3.2cqw);
}

.sbt-rij span {
  display: flex;
  align-items: center;
  gap: 2cqw;
}

.sbt-rij .sb-icoon { font-size: 1.3em; color: var(--site-ink-3); }
.sbt-rij b { font-variant-numeric: tabular-nums; }

.sbt-rij--nu {
  background: var(--site-glow-orange-14);
  animation: sbt-rij var(--t) var(--site-ease) infinite both;
}

.sbt-prijs {
  position: relative;
  display: inline-block;
  min-width: 14cqw;
  height: 4.2cqw;
  text-align: right;
}

.sbt-prijs span {
  position: absolute;
  right: 0;
  top: 0;
}

.sbt-prijs .sbt-prijs__oud { opacity: 0; animation: sbt-oud var(--t) var(--site-ease) infinite both; }
.sbt-prijs .sbt-prijs__nieuw { color: var(--site-orange-press); animation: sbt-nieuw var(--t) var(--site-ease) infinite both; }

.sbt-vraag {
  position: absolute;
  left: 12cqw;
  right: 12cqw;
  bottom: 0;
  display: grid;
  gap: 2cqw;
  padding: 3.6cqw 4cqw 4cqw;
  border-radius: 4.4cqw;
  background: var(--site-ink);
  color: var(--site-paper);
  box-shadow: var(--site-shadow-phone);
  animation: sbt-vraag var(--t) var(--site-ease) infinite both;
}

.sbt-vraag__kop {
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: max(10px, 3.2cqw);
}

.sbt-vraag__kop .sb-icoon { color: var(--site-orange-soft); font-size: 1.3em; }

.sbt-vraag__tekst {
  font-size: max(9px, 2.8cqw);
  color: var(--site-on-dark-2);
}

.sbt-vraag__knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2cqw;
}

.sbt-knop {
  padding: 1.8cqw;
  border-radius: 99px;
  border: 0.35cqw solid var(--site-on-dark-20);
  font-size: max(9px, 2.8cqw);
  font-weight: 600;
  text-align: center;
}

.sbt-knop--ja {
  background: var(--site-orange-button);
  border-color: var(--site-orange-button);
  animation: sbt-knop var(--t) var(--site-ease) infinite both;
}

@keyframes sbt-rij {
  0%, 18% { background-color: transparent; }
  24%, 94% { background-color: var(--site-glow-orange-14); }
  100% { background-color: transparent; }
}

@keyframes sbt-oud {
  0%, 20% { opacity: 1; transform: none; }
  24%, 96% { opacity: 0; transform: translateY(-3cqw); }
  100% { opacity: 1; transform: none; }
}

@keyframes sbt-nieuw {
  0%, 20% { opacity: 0; transform: translateY(3cqw); }
  25%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(3cqw); }
}

@keyframes sbt-vraag {
  0%, 32% { opacity: 0; transform: translateY(8cqw); }
  40%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(8cqw); }
}

@keyframes sbt-knop {
  0%, 60% { background-color: transparent; border-color: var(--site-on-dark-20); transform: none; }
  63% { transform: scale(0.94); }
  66%, 100% { background-color: var(--site-orange-button); border-color: var(--site-orange-button); transform: none; }
}

/* =========================================================
   Regeling: termijnen op een tijdlijn
   ========================================================= */

.sb--regeling { --t: 8s; }

.sbr-kaart {
  position: absolute;
  left: 3cqw;
  right: 3cqw;
  top: 4cqw;
  display: grid;
  gap: 5cqw;
  padding: 5cqw;
  border-radius: 4.4cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
}

.sbr-kop {
  display: flex;
  align-items: center;
  gap: 3cqw;
}

.sbr-kop__icoon {
  display: grid;
  place-items: center;
  width: 9cqw;
  height: 9cqw;
  border-radius: 3cqw;
  background: var(--site-teal-wash);
  color: var(--site-teal-deep);
  font-size: 5cqw;
}

.sbr-kop span:last-child { display: grid; gap: 0.6cqw; }
.sbr-kop b { font-size: max(11px, 3.6cqw); }
.sbr-kop small { font-size: max(9px, 2.8cqw); color: var(--site-ink-3); }

.sbr-punten {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4cqw;
}

.sbr-punt {
  height: 5.2cqw;
  border-radius: 1.4cqw;
  background: var(--site-toggle-track);
}

.sbr-punt[class*="sbr-punt--"] {
  background: var(--site-teal);
  animation: sbr-punt var(--t) var(--site-ease) infinite both;
}

.sbr-punt--2 { animation-delay: 0.45s !important; }
.sbr-punt--3 { animation-delay: 0.9s !important; }
.sbr-punt--4 { animation-delay: 1.35s !important; }
.sbr-punt--5 { animation-delay: 1.8s !important; }

.sbr-voet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2cqw;
  font-size: max(9px, 3cqw);
  color: var(--site-ink-3);
}

.sbr-voet b { color: var(--site-ink); }

.sbr-klaar {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.2cqw 2.4cqw;
  border-radius: 99px;
  background: var(--site-glow-orange-14);
  color: var(--site-orange-press);   /* op licht oranje haalt --site-orange-text maar 4,3:1 */
  font-weight: 700;
}

.sbr-melding {
  position: absolute;
  right: 6cqw;
  bottom: 2cqw;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 2cqw 3.2cqw;
  border-radius: 99px;
  background: var(--site-ink);
  color: var(--site-paper);
  font-size: max(9px, 2.8cqw);
  font-weight: 600;
  box-shadow: var(--site-shadow-phone);
  animation: sbr-melding var(--t) var(--site-ease) infinite both;
}

.sbr-melding .sb-icoon { color: var(--site-orange-soft); font-size: 1.3em; }

@keyframes sbr-punt {
  0%, 6% { background-color: var(--site-toggle-track); transform: none; }
  10% { background-color: var(--site-teal); transform: scaleY(1.25); }
  14%, 94% { background-color: var(--site-teal); transform: none; }
  100% { background-color: var(--site-toggle-track); }
}

@keyframes sbr-melding {
  0%, 36% { opacity: 0; transform: translateY(4cqw); }
  42%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(2cqw); }
}

/* =========================================================
   Sparen: doelen op volgorde
   ========================================================= */

.sb--sparen { --t: 8s; }

.sbp-inleg {
  position: absolute;
  left: 50%;
  top: 1cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.6cqw 3.2cqw;
  border-radius: 99px;
  background: var(--site-teal);
  color: var(--site-paper);
  font-size: max(9px, 2.9cqw);
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: var(--site-shadow-step3);
  animation: sbp-inleg var(--t) var(--site-ease) infinite both;
}

.sbp-doel {
  position: absolute;
  left: 3cqw;
  right: 3cqw;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6cqw 3cqw;
  align-items: center;
  padding: 3cqw 3.6cqw;
  border-radius: 3.6cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
}

.sbp-doel--1 { top: 11cqw; }
.sbp-doel--2 { top: 29cqw; }
.sbp-doel--3 { top: 47cqw; }

.sbp-doel__nr {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  background: var(--site-teal-wash);
  color: var(--site-teal-deep);
  font-size: max(10px, 3.4cqw);
  font-weight: 700;
}

.sbp-doel__tekst {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  font-size: max(9px, 3cqw);
}

.sbp-doel__tekst small { color: var(--site-ink-3); white-space: nowrap; }

.sbp-doel__balk {
  height: 2.2cqw;
  border-radius: 99px;
  background: var(--site-toggle-track);
  overflow: hidden;
}

.sbp-doel__balk i {
  display: block;
  height: 100%;
  width: var(--vul);
  border-radius: 99px;
  background: var(--site-teal);
  animation: sbp-balk var(--t) var(--site-ease) infinite both;
}

.sbp-doel--1 { --van: 86%; --vul: 100%; }
.sbp-doel--2 { --van: 38%; --vul: 55%; }
.sbp-doel--3 { --van: 0%; --vul: 0%; }
.sbp-doel--1 .sbp-doel__nr { background: var(--site-teal); color: var(--site-paper); }
.sbp-doel--2 .sbp-doel__balk i { animation-name: sbp-balk-2; }

@keyframes sbp-inleg {
  0% { opacity: 0; transform: translate(-50%, -3cqw); }
  8%, 60% { opacity: 1; transform: translate(-50%, 0); }
  70%, 100% { opacity: 0; transform: translate(-50%, 4cqw) scale(0.8); }
}

@keyframes sbp-balk {
  0%, 16% { width: var(--van); }
  30%, 96% { width: var(--vul); }
  100% { width: var(--van); }
}

@keyframes sbp-balk-2 {
  0%, 30% { width: var(--van); }
  46%, 96% { width: var(--vul); }
  100% { width: var(--van); }
}

/* =========================================================
   Samen: twee mensen, één lijstje
   ========================================================= */

.sb--samen { --t: 6s; }

.sbm-mens {
  position: absolute;
  top: 20cqw;
  display: grid;
  place-items: center;
  width: 17cqw;
  height: 17cqw;
  border-radius: 50%;
  font-size: 9cqw;
  box-shadow: var(--site-shadow-float);
  animation: sbm-zweef var(--t) ease-in-out infinite both;
}

.sbm-mens--a { left: 2cqw; background: var(--site-teal-wash); color: var(--site-teal-deep); }
.sbm-mens--b { right: 2cqw; background: var(--site-glow-orange-14); color: var(--site-orange-text); animation-delay: calc(var(--t) / -2); }

.sbm-draad {
  position: absolute;
  top: 28.5cqw;
  width: 12cqw;
  border-top: 0.6cqw dashed var(--site-step-line);
}

.sbm-draad--a { left: 19cqw; }
.sbm-draad--b { right: 19cqw; }

.sbm-kaart {
  position: absolute;
  left: 31cqw;
  right: 31cqw;
  top: 8cqw;
  display: grid;
  gap: 2.6cqw;
  padding: 4cqw 3.6cqw;
  border-radius: 4cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
}

.sbm-taak {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: max(9px, 2.8cqw);
  line-height: 1.25;
}

.sbm-vink {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: var(--site-teal);
  color: var(--site-paper);
  font-size: 2.8cqw;
  animation: sbm-vink var(--t) var(--site-ease) infinite both;
}

.sbm-taak--2 .sbm-vink { animation-delay: 0.8s; }

.sbm-hart {
  position: absolute;
  left: 50%;
  bottom: 4cqw;
  display: grid;
  place-items: center;
  width: 10cqw;
  height: 10cqw;
  border-radius: 50%;
  background: var(--site-orange-button);
  color: var(--site-paper);
  font-size: 5cqw;
  transform: translateX(-50%);
  box-shadow: var(--site-shadow-cta-s);
  animation: sbm-hart var(--t) var(--site-ease) infinite both;
}

@keyframes sbm-zweef {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2cqw); }
}

@keyframes sbm-vink {
  0%, 30% { background-color: var(--site-toggle-track); color: transparent; }
  36%, 100% { background-color: var(--site-teal); color: var(--site-paper); }
}

@keyframes sbm-hart {
  0%, 52% { transform: translateX(-50%) scale(1); }
  58% { transform: translateX(-50%) scale(1.25); }
  64%, 100% { transform: translateX(-50%) scale(1); }
}

/* =========================================================
   Coach: cliënten in één overzicht
   ========================================================= */

.sb--coach { --t: 7s; }

.sbc-kaart {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  top: 3cqw;
  display: grid;
  gap: 2.4cqw;
  padding: 4.4cqw;
  border-radius: 4.4cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
}

.sbc-kop__tel {
  margin-left: auto;
  padding: 0.6cqw 2cqw;
  border-radius: 99px;
  background: var(--site-teal-wash);
  color: var(--site-teal-deep);
}

.sbc-rij {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3cqw;
  align-items: center;
  padding: 2.2cqw 2.6cqw;
  border-radius: 2.6cqw;
  background: var(--site-screen);
  font-size: max(9px, 3cqw);
  animation: sbc-rij var(--t) var(--site-ease) infinite both;
}

.sbc-rij--2 { animation-delay: 0.2s; }
.sbc-rij--3 { animation-delay: 0.4s; }
.sbc-rij--4 { animation-delay: 0.6s; }

.sbc-wie {
  display: grid;
  place-items: center;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  background: var(--site-ink);
  color: var(--site-paper);
  font-size: max(8px, 2.6cqw);
  font-weight: 700;
}

.sbc-stip {
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
}

.sbc-stip--goed { background: var(--site-teal); }

.sbc-stip--let {
  background: var(--site-orange);
  animation: site-pulse 2.4s ease-out infinite;
}

@keyframes sbc-rij {
  0%, 4% { opacity: 0; transform: translateX(-3cqw); }
  14%, 100% { opacity: 1; transform: none; }
}

/* =========================================================
   Veilig: schild, ring, drie zekerheden
   ========================================================= */

.sbw-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52cqw;
  height: 52cqw;
  border-radius: 50%;
  border: 0.5cqw dashed var(--site-teal-40);
  transform: translate(-50%, -50%);
  animation: sbw-draai 60s linear infinite;
}

.sbw-schild {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 26cqw;
  height: 30cqw;
  border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
  background: var(--site-teal);
  color: var(--site-paper);
  font-size: 12cqw;
  transform: translate(-50%, -50%);
  box-shadow: var(--site-shadow-step3), 0 0 0 3cqw var(--site-teal-wash);
}

.sbw-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.8cqw 3cqw;
  border-radius: 99px;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
  font-size: max(9px, 2.9cqw);
  font-weight: 600;
  white-space: nowrap;
  animation: sbw-label 6s ease-in-out infinite both;
}

.sbw-label .sb-icoon { color: var(--site-teal); font-size: 1.3em; }
.sbw-label--1 { left: 2cqw; top: 8cqw; }
.sbw-label--2 { right: 1cqw; bottom: 14cqw; animation-delay: -2s; }
.sbw-label--3 { left: 4cqw; bottom: 3cqw; animation-delay: -4s; }
.sbw-label--3 .sb-icoon { color: var(--site-orange-text); }

@keyframes sbw-draai {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sbw-label {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.6cqw); }
}

/* =========================================================
   Rust: alles gedaan
   ========================================================= */

.sb--rust { --t: 7s; }

.sbu-kaart {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  top: 3cqw;
  display: grid;
  gap: 3cqw;
  padding: 5cqw;
  border-radius: 5cqw;
  background: var(--site-paper);
  box-shadow: var(--site-shadow-float);
}

.sbu-boven {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(9px, 3cqw);
  color: var(--site-ink-3);
}

.sbu-ring {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  color: var(--site-ink);
}

.sbu-ring i {
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  background: conic-gradient(var(--site-teal) 0 72%, var(--site-track) 72% 100%);
  -webkit-mask: radial-gradient(circle, transparent 52%, var(--site-mask) 53%);
          mask: radial-gradient(circle, transparent 52%, var(--site-mask) 53%);
}

.sbu-kop {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: max(14px, 5.4cqw);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sbu-kop .sb-icoon {
  color: var(--site-orange);
  animation: sbu-glans var(--t) var(--site-ease) infinite both;
}

.sbu-taak {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  font-size: max(10px, 3.2cqw);
  color: var(--site-ink-2);
}

.sbu-vink {
  display: grid;
  place-items: center;
  flex: none;
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 50%;
  background: var(--site-teal);
  color: var(--site-paper);
  font-size: 3.4cqw;
  animation: sbu-vink var(--t) var(--site-ease) infinite both;
}

.sbu-taak--2 .sbu-vink { animation-delay: 0.5s; }
.sbu-taak--3 .sbu-vink { animation-delay: 1s; }

@keyframes sbu-vink {
  0%, 10% { background-color: var(--site-toggle-track); color: transparent; transform: none; }
  15% { transform: scale(1.25); }
  20%, 94% { background-color: var(--site-teal); color: var(--site-paper); transform: none; }
  100% { background-color: var(--site-toggle-track); color: transparent; }
}

@keyframes sbu-glans {
  0%, 36% { transform: scale(0) rotate(-90deg); }
  44%, 100% { transform: none; }
}

/* =========================================================
   Secties met beeld: de voorpagina en de inhoudspagina's (pagina.inc.php)
   Staan hier en niet in home.css, omdat elke pagina ze gebruikt.
   ========================================================= */

/* ── Gedeeld door de secties van de makeover ─────────────────────────── */

/* Het woordje boven een kop: waar de sectie over gaat, met een icoon. */
.hc-oogje {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--site-teal-deep);
}

.hc-oogje .sb-icoon { font-size: 18px; }

/* "Meer hierover →": een link met een pijl die meeschuift. */
.hc-meer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-top: 22px;
  font-weight: 600;
  color: var(--site-teal-deep);
}

.hc-meer .sb-icoon { transition: transform 0.2s var(--site-ease); }
.hc-meer:hover .sb-icoon { transform: translateX(4px); }

/* ── Zo werkt het: drie kaarten met een scène ─────────────────────────── */

.hc-stappen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  counter-reset: stap;
}

.hc-stap {
  position: relative;
  display: grid;
  align-content: start;
  padding: 18px 22px 26px;
  border-radius: 28px;
  background: var(--site-glass-65);
  border: 1px solid var(--site-glass-border);
  box-shadow: var(--site-shadow-panel);
}

.hc-stap--2 { transition-delay: 0.1s; }
.hc-stap--3 { transition-delay: 0.2s; }

.hc-stap__beeld {
  margin: 0 -6px 14px;
  padding: 14px 10px 6px;
  border-radius: 20px;
  background: var(--site-screen);
}

.hc-stap__nr {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--site-orange-button);
  color: var(--site-paper);
  font-weight: 700;
  box-shadow: var(--site-shadow-cta-s);
}

.hc-stap--3 .hc-stap__nr {
  background: var(--site-teal);
  box-shadow: var(--site-shadow-step3);
}

.hc-stap__titel {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.hc-stap__tekst {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--site-ink-2);
}

/* ── Uitleg: tekst en een groot beeld naast elkaar ────────────────────── */

.hc-uitleg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .hc-uitleg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .hc-uitleg--om .hc-uitleg__tekst { order: 2; }
}

.hc-uitleg .site-h2,
.hc-uitleg .site-lead {
  text-align: left;
  margin-left: 0;
}

.hc-uitleg__lead {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--site-ink-2);
}

.hc-uitleg__beeld {
  padding: clamp(18px, 3vw, 32px);
  border-radius: 32px;
  background: var(--site-glass-55);
  border: 1px solid var(--site-glass-border);
  box-shadow: var(--site-shadow-panel);
  transition-delay: 0.12s;
}

.hc-punten {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
}

.hc-punten li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 16px;
  line-height: 1.45;
  color: var(--site-ink-2);
}

.hc-punten strong { color: var(--site-ink); }

/* Een woord uitgelegd, in een kadertje: voor wie het nog nooit hoorde. */
.hc-woord {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--site-glass-70);
  border: 1px solid var(--site-glass-border);
}

.hc-woord p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--site-ink-2);
}

.hc-woord strong { color: var(--site-ink); }

/* ── En verder: drie kaarten met een scène ────────────────────────────── */

.hc-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin-top: 40px;
}

.hc-kaart {
  display: grid;
  align-content: start;
  padding: 18px 22px 28px;
  border-radius: 28px;
  background: var(--site-glass-65);
  border: 1px solid var(--site-glass-border);
  box-shadow: var(--site-shadow-panel);
}

.hc-kaart--d1 { transition-delay: 0.1s; }
.hc-kaart--d2 { transition-delay: 0.2s; }

.hc-kaart__beeld {
  margin: 0 -6px 20px;
  padding: 16px 12px 10px;
  border-radius: 20px;
  background: var(--site-screen);
}

.hc-kaart__titel {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.25;
}

.hc-kaart__tekst {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--site-ink-2);
}

.hc-kaart .hc-meer { margin-top: 16px; }


/* ── De kop van een inhoudspagina: tekst en scène naast elkaar ────────── */

.site-page__head--beeld {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .site-page__head--beeld { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
}

.site-page__head--beeld .site-page__kop,
.site-page__head--beeld .site-h2,
.site-page__head--beeld .site-lead {
  text-align: left;
  margin-left: 0;
}

.site-page__head--beeld .site-page__join {
  margin-left: 0;
}

.site-page__kop .site-h2 {
  font-size: clamp(36px, 6vw, 60px);
}

/* ── Stappen en kaarten op een inhoudspagina: met een icoon ───────────── */

.hc-stap__rij {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.hc-stap__rij .hc-stap__nr {
  margin-bottom: 0;
}

.hc-stap--laatste .hc-stap__nr {
  background: var(--site-teal);
  box-shadow: var(--site-shadow-step3);
}

.hc-stap--laatste .sb-bol {
  background: var(--site-teal-wash);
}

@media (min-width: 1000px) {
  .hc-stappen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hc-kaart__icoon {
  margin-bottom: 18px;
}

/* De kop boven een rij kaarten: links, op de lijn van de kaarten eronder. */
.hc-sectiekop {
  max-width: 760px;
}

.hc-sectiekop .site-h2,
.hc-sectiekop .site-lead {
  text-align: left;
  margin-left: 0;
}