/* ------------------------------------------------------------------ *
 * 70plus.nl demo
 * Ontwerpregels: basisletter 20px, koppen 32px en groter, regelafstand 1.6,
 * wit vlak, donkerblauw voor koppen en knoppen, oranje alleen voor de
 * primaire knop. Een actie per scherm. Maximaal 680px breed.
 * Het logo staat altijd linksboven. De inhoud staat verticaal in het midden.
 * ------------------------------------------------------------------ */

:root {
  --blauw: #1f3a5f;
  --blauw-licht: #eaf0f7;
  --blauw-rand: #c6d5e6;
  --oranje: #e8702a;
  --oranje-donker: #c85a1a;
  --wit: #ffffff;
  --tekst: #1b2733;
  --rand: #1f3a5f;
  --max-breedte: 680px;
  --max-breed: 1120px;
  --balk-hoogte: 76px;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--wit);
  color: var(--tekst);
  font-family: "Albert Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.6;
}

/* Balk met het logo, altijd linksboven ------------------------------ */

.balk {
  position: sticky;
  top: 0;
  z-index: 10;
  flex: 0 0 auto;
  background: var(--wit);
  border-bottom: 2px solid var(--blauw-rand);
  padding: 16px 20px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

.logo {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blauw);
  letter-spacing: -0.5px;
}

.logo-punt {
  color: var(--oranje);
}

/* Inhoud, verticaal gecentreerd ------------------------------------- */

#app {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--max-breed);
  margin: 0 auto;
  padding: 32px 20px calc(48px + env(safe-area-inset-bottom, 0px));
}

/* De gewone schermen blijven smal. Alleen de bestelschermen zijn breed,
   zodat de vertrouwenskolom ernaast past en alles op een scherm valt. */
.scherm {
  width: 100%;
  max-width: var(--max-breedte);
  margin-inline: auto;
}

.scherm-breed {
  max-width: var(--max-breed);
}

/* Schermen -------------------------------------------------------- */

.scherm {
  display: none;
}

/* margin-block:auto centreert het scherm verticaal binnen #app, en knijpt
   lange pagina's zoals het advies niet af aan de bovenkant. */
.scherm.is-actief {
  display: block;
  width: 100%;
  margin-block: auto;
  animation: verschijn 0.25s ease-out;
}

@keyframes verschijn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

/* Tekst ----------------------------------------------------------- */

h1 {
  font-size: 34px;
  line-height: 1.3;
  color: var(--blauw);
  margin: 0 0 24px;
}

h2 {
  font-size: 26px;
  line-height: 1.35;
  color: var(--blauw);
  margin: 0 0 12px;
}

h3 {
  font-size: 26px;
  line-height: 1.3;
  color: var(--blauw);
  margin: 0 0 6px;
}

p {
  margin: 0 0 20px;
}

a {
  color: var(--blauw);
}

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Homepage -------------------------------------------------------- */

.lead {
  font-size: 30px;
  line-height: 1.45;
  color: var(--blauw);
  margin-bottom: 40px;
}

.vertrouwen {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.vertrouwen li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
  font-size: 20px;
}

.vertrouwen li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 14px;
  height: 8px;
  border-left: 4px solid var(--blauw);
  border-bottom: 4px solid var(--blauw);
  transform: rotate(-45deg);
}

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

.knop {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 16px 24px;
  font-family: inherit;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  text-align: left;
  border-radius: 8px;
  border: 3px solid var(--rand);
  background: var(--wit);
  color: var(--blauw);
  cursor: pointer;
}

.knop-primair {
  background: var(--oranje);
  border-color: var(--oranje-donker);
  color: var(--wit);
  text-align: center;
  font-size: 24px;
  min-height: 72px;
}

.knop-primair:hover {
  background: var(--oranje-donker);
}

.knop-primair:disabled {
  background: #f0f0f0;
  border-color: #9a9a9a;
  color: #4a4a4a;
  cursor: not-allowed;
}

.knop-keuze {
  margin-bottom: 20px;
}

.knop-keuze:hover {
  background: var(--blauw-licht);
}

.knop-terug {
  margin-top: 32px;
  border: 3px solid var(--blauw-rand);
  background: var(--wit);
  color: var(--blauw);
  text-align: center;
  font-size: 20px;
  min-height: 60px;
}

.knop-terug:hover {
  background: var(--blauw-licht);
  border-color: var(--blauw);
}

.knop:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 4px solid var(--oranje);
  outline-offset: 3px;
}

/* Situatie -------------------------------------------------------- */

textarea {
  width: 100%;
  font-family: inherit;
  font-size: 20px;
  line-height: 1.6;
  padding: 16px;
  border: 3px solid var(--blauw);
  border-radius: 8px;
  background: var(--wit);
  color: var(--tekst);
  resize: vertical;
  margin-bottom: 28px;
}

.hint {
  font-size: 18px;
  color: var(--blauw);
  margin-top: 12px;
}

.hint.is-verborgen {
  visibility: hidden;
}

/* Vragen ---------------------------------------------------------- */

.voortgang {
  font-size: 20px;
  font-weight: 700;
  color: var(--blauw);
  background: var(--blauw-licht);
  border: 2px solid var(--blauw-rand);
  border-radius: 6px;
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 24px;
}

.toelichting {
  font-size: 20px;
  color: var(--tekst);
  margin-top: -12px;
  margin-bottom: 28px;
}

/* Laadscherm ------------------------------------------------------ */

#scherm-laden.is-actief {
  text-align: center;
}

.laad-titel {
  font-size: 30px;
  margin-top: 40px;
}

.laad-sub {
  font-size: 20px;
  color: var(--blauw);
}

.laad-ring {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.laad-ring span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blauw);
  animation: adem 1.4s ease-in-out infinite;
}

.laad-ring span:nth-child(2) {
  animation-delay: 0.2s;
}

.laad-ring span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes adem {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .laad-ring span {
    animation: none;
    opacity: 0.7;
  }
}

/* Advies ---------------------------------------------------------- */

.kop-label {
  margin-top: -4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--oranje-donker);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.advies-kort {
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 40px;
}

.blok {
  margin-bottom: 40px;
  border-top: 3px solid var(--blauw-rand);
  padding-top: 28px;
}

/* Het eerste blok op een scherm krijgt geen streep erboven. */
.scherm > .blok:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Een regel met het telefoonnummer, onderaan elk adviesscherm. */
.bel-regel {
  font-size: 19px;
  text-align: center;
  margin-top: 28px;
  margin-bottom: 0;
}

.bel-regel a {
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 3px solid var(--oranje);
  text-decoration: none;
}

.blok-intro {
  font-size: 19px;
  margin-bottom: 24px;
}

/* Wat voor u belangrijk is ----------------------------------------- */

.eisen {
  list-style: none;
  counter-reset: eis;
  margin: 0;
  padding: 0;
}

.eisen li {
  counter-increment: eis;
  position: relative;
  padding-left: 56px;
  margin-bottom: 26px;
  min-height: 40px;
}

.eisen li::before {
  content: counter(eis);
  position: absolute;
  left: 0;
  top: 2px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--blauw);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: var(--blauw);
}

.eis-naam {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--blauw);
  line-height: 1.4;
}

.eis-waarom {
  display: block;
  margin-top: 2px;
}

.eis-basis {
  display: block;
  font-size: 18px;
  color: var(--blauw);
  margin-top: 4px;
}

/* Losse puntenlijsten ---------------------------------------------- */

.punten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.punten li {
  margin-bottom: 24px;
  padding-left: 30px;
  position: relative;
}

.punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blauw);
}

.punt-basis {
  display: block;
  font-size: 18px;
  color: var(--blauw);
  margin-top: 4px;
}

.blok-onzeker {
  background: var(--blauw-licht);
  border: 3px solid var(--blauw-rand);
  border-radius: 10px;
  padding: 24px;
}

.blok-onzeker .punten li:last-child {
  margin-bottom: 0;
}

/* Productkaart ---------------------------------------------------- */

.kaart {
  border: 3px solid var(--blauw-rand);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
}

.kaart-beste {
  border-color: var(--blauw);
  border-width: 4px;
}

.kaart-label {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: var(--wit);
  background: var(--blauw);
  border-radius: 6px;
  padding: 6px 14px;
  margin-bottom: 16px;
}

.kaart-merk {
  font-size: 18px;
  font-weight: 700;
  color: var(--blauw);
  margin-bottom: 20px;
}

.voldoet-kop {
  font-size: 19px;
  font-weight: 700;
  color: var(--blauw);
  margin-bottom: 14px;
}

.voldoet {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.voldoet li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 20px;
}

/* Een vinkje als versiering naast tekst die het punt zelf al benoemt. */
.voldoet li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 15px;
  height: 9px;
  border-left: 4px solid var(--blauw);
  border-bottom: 4px solid var(--blauw);
  transform: rotate(-45deg);
}

.voldoet-eigenschap {
  display: block;
  font-weight: 700;
  color: var(--blauw);
  line-height: 1.45;
}

.voldoet-bewijs {
  display: block;
  margin-top: 2px;
}

.voldoet-bron {
  display: inline-block;
  font-size: 18px;
  line-height: 1.5;
  margin-top: 4px;
}

.kaart-conclusie {
  font-size: 21px;
  font-weight: 700;
  color: var(--blauw);
  background: var(--blauw-licht);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.kaart-prijs {
  font-size: 18px;
  color: var(--tekst);
  margin-bottom: 20px;
}

.kaart details {
  border-top: 2px solid var(--blauw-rand);
  padding-top: 16px;
}

.kaart summary {
  font-size: 20px;
  font-weight: 700;
  color: var(--blauw);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}

.kaart summary::-webkit-details-marker {
  display: none;
}

.kaart summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border: 3px solid var(--blauw);
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}

.kaart details[open] summary::before {
  content: "\2212";
}

.bronnen {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.bronnen li {
  margin-bottom: 18px;
}

.bronnen a {
  display: inline-block;
  font-size: 18px;
  word-break: break-word;
  line-height: 1.5;
  min-height: 44px;
}

.bron-titel {
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
}

/* Contact en disclaimer ------------------------------------------- */

.telefoon {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 8px;
}

.telefoon a {
  color: var(--blauw);
  text-decoration: none;
  border-bottom: 3px solid var(--oranje);
}

.openingstijden {
  font-size: 18px;
}

.disclaimer {
  font-size: 18px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--blauw-licht);
  border: 2px solid var(--blauw-rand);
  border-radius: 8px;
  padding: 20px;
}

/* Kleine schermen ------------------------------------------------- */

@media (max-width: 480px) {
  .balk {
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }

  .logo {
    font-size: 26px;
  }

  #app {
    padding: 24px 16px calc(40px + env(safe-area-inset-bottom, 0px));
  }

  h1 {
    font-size: 30px;
  }

  .lead {
    font-size: 26px;
  }

  .advies-kort {
    font-size: 28px;
  }

  .kaart,
  .blok-onzeker {
    padding: 18px;
  }

  .eisen li {
    padding-left: 48px;
  }

  .eisen li::before {
    width: 36px;
    height: 36px;
  }
}

/* ------------------------------------------------------------------ *
 * Bestellen
 * ------------------------------------------------------------------ */

.knop-bestel {
  margin-top: 24px;
  background: var(--oranje);
  border-color: var(--oranje-donker);
  color: var(--wit);
  text-align: center;
  font-size: 22px;
  min-height: 68px;
}

.knop-bestel:hover {
  background: var(--oranje-donker);
}

.bestel-toelichting {
  font-size: 18px;
  text-align: center;
  margin: 12px 0 0;
}

/* Wat u bestelt --------------------------------------------------- */

.bestel-product {
  border: 3px solid var(--blauw);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 40px;
}

.bestel-naam {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--blauw);
  margin: 0 0 4px;
}

.bestel-merk {
  font-size: 19px;
  font-weight: 700;
  color: var(--blauw);
  margin: 0;
}

/* Prijstabel ------------------------------------------------------ */

.prijs-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.prijs-tabel th,
.prijs-tabel td {
  text-align: left;
  font-size: 21px;
  font-weight: 400;
  padding: 14px 0;
  border-bottom: 2px solid var(--blauw-rand);
}

.prijs-tabel td {
  text-align: right;
  white-space: nowrap;
  padding-left: 16px;
}

.prijs-totaal th,
.prijs-totaal td {
  font-size: 26px;
  font-weight: 700;
  color: var(--blauw);
  border-bottom: none;
  border-top: 3px solid var(--blauw);
  padding-top: 16px;
}

.prijs-uitleg {
  font-size: 19px;
  margin-bottom: 40px;
}

/* Kaders met uitleg ----------------------------------------------- */

.kader {
  background: var(--blauw-licht);
  border: 3px solid var(--blauw-rand);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 40px;
}

.kader h2 {
  margin-bottom: 12px;
}

.kader p:last-child,
.kader .punten li:last-child {
  margin-bottom: 0;
}

.kader-eerlijk {
  background: var(--wit);
  border-color: var(--blauw);
}

.geen-marge {
  font-size: 19px;
}

/* Tijdlijn -------------------------------------------------------- */

.tijdlijn {
  list-style: none;
  counter-reset: stap;
  margin: 0 0 40px;
  padding: 0;
}

.tijdlijn li {
  counter-increment: stap;
  position: relative;
  padding-left: 56px;
  margin-bottom: 26px;
}

.tijdlijn li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 2px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--blauw);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: var(--blauw);
}

.tijdlijn-wanneer {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--blauw);
}

/* Invulvelden ----------------------------------------------------- */

.veld {
  margin-bottom: 28px;
}

.veld label {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--blauw);
  margin-bottom: 8px;
}

.veld-uitleg {
  font-size: 18px;
  margin: 0 0 10px;
}

.veld input {
  display: block;
  width: 100%;
  min-height: 64px;
  font-family: inherit;
  font-size: 22px;
  line-height: 1.4;
  padding: 14px 16px;
  border: 3px solid var(--blauw);
  border-radius: 8px;
  background: var(--wit);
  color: var(--tekst);
}

.veld input:focus-visible {
  outline: 4px solid var(--oranje);
  outline-offset: 3px;
}

/* Betaalkeuze ----------------------------------------------------- */

.knop-betaal {
  padding: 20px 24px;
}

.betaal-titel {
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.betaal-uitleg {
  display: block;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

/* Controleren ----------------------------------------------------- */

.controle {
  border-top: 3px solid var(--blauw-rand);
  padding-top: 24px;
  margin-bottom: 32px;
}

.controle:first-of-type {
  border-top: none;
  padding-top: 0;
}

.controle-regel {
  margin-bottom: 12px;
  white-space: pre-line;
}

.controle-nadruk {
  font-size: 24px;
  font-weight: 700;
  color: var(--blauw);
}

.knop-wijzig {
  width: auto;
  min-height: 56px;
  padding: 12px 24px;
  font-size: 19px;
  border: 3px solid var(--blauw-rand);
  text-align: center;
}

.knop-wijzig:hover {
  background: var(--blauw-licht);
  border-color: var(--blauw);
}

.kader-gerust {
  background: var(--wit);
  border-color: var(--blauw);
}

/* Bevestiging ----------------------------------------------------- */

.bevestiging-vink {
  width: 64px;
  height: 64px;
  margin: 0 0 24px;
  border: 4px solid var(--blauw);
  border-radius: 50%;
  position: relative;
}

.bevestiging-vink::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 17px;
  width: 24px;
  height: 13px;
  border-left: 5px solid var(--blauw);
  border-bottom: 5px solid var(--blauw);
  transform: rotate(-45deg);
}

.bevestiging-nummer {
  font-size: 24px;
}

.bevestiging-nummer strong {
  font-size: 28px;
  color: var(--blauw);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .kader,
  .bestel-product {
    padding: 18px;
  }

  .prijs-tabel th,
  .prijs-tabel td {
    font-size: 19px;
  }

  .prijs-totaal th,
  .prijs-totaal td {
    font-size: 23px;
  }

  .tijdlijn li {
    padding-left: 48px;
  }

  .tijdlijn li::before {
    width: 36px;
    height: 36px;
  }

  .knop-wijzig {
    width: 100%;
  }
}

/* Zichtbare demomelding. Haalt u dit weg, haal dan ook de regel met
   class="demo-regel" uit index.html. */
.demo-regel {
  font-size: 18px;
  text-align: center;
  color: var(--tekst);
  background: #fdf3ee;
  border: 2px dashed var(--oranje-donker);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 8px;
}

/* ------------------------------------------------------------------ *
 * Bestellen in twee kolommen
 *
 * Links de handeling, rechts de vertrouwenskolom. Samen passen ze op een
 * scherm, zodat een oudere bezoeker niet hoeft te scrollen om de knop en
 * de geruststelling tegelijk te zien.
 * ------------------------------------------------------------------ */

.kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}

.hoofdkolom {
  min-width: 0;
}

.steunkolom {
  min-width: 0;
}

/* De bestelschermen zijn compacter dan de rest, anders passen ze niet. */
.scherm-breed h1 {
  font-size: 30px;
  margin-bottom: 20px;
}

.scherm-breed .knop-primair {
  margin-top: 4px;
}

.scherm-breed .knop-terug {
  margin-top: 14px;
}

.scherm-breed .blok-intro {
  margin-bottom: 20px;
}

.scherm-breed .bestel-product {
  margin-bottom: 24px;
}

.scherm-breed .prijs-uitleg {
  margin-bottom: 24px;
}

.scherm-breed .kader {
  margin-bottom: 24px;
  padding: 18px 20px;
}

.scherm-breed .kader h2 {
  font-size: 22px;
}

.scherm-breed .veld {
  margin-bottom: 18px;
}

.scherm-breed .controle {
  margin-bottom: 22px;
  padding-top: 18px;
}

/* Twee velden naast elkaar: postcode en woonplaats horen bij elkaar. */
.veld-paar {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
}

/* Vakken in de vertrouwenskolom ------------------------------------ */

.vak {
  border: 2px solid var(--blauw-rand);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: var(--wit);
}

.vak-kop {
  font-size: 18px;
  font-weight: 700;
  color: var(--blauw);
  margin: 0 0 14px;
}

.vak-voet {
  font-size: 16px;
  line-height: 1.5;
  margin: 12px 0 0;
}

.vak-partners {
  background: var(--blauw-licht);
  border-color: var(--blauw);
}

.vak-eerlijk {
  border-color: var(--blauw);
}

.vak-bellen {
  background: var(--blauw-licht);
}

.rail-telefoon {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.rail-telefoon a {
  color: var(--blauw);
  text-decoration: none;
  border-bottom: 3px solid var(--oranje);
  white-space: nowrap;
}

/* Logoplekken.
   Dit zijn met opzet woordmerken in tekst, geen nagemaakte beeldmerken.
   Vervang elke .logo-plek door een <img> met het echte logobestand zodra
   u dat van de organisatie heeft gekregen. */

.logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Elke logotegel is even hoog, zodat merken met heel verschillende
   verhoudingen toch een nette rij vormen. Laadt een bestand niet, dan valt
   de tegel terug op de naam in tekst. */
.logo-tegel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 54px;
  min-width: 104px;
  padding: 8px 12px;
  background: var(--wit);
  border: 2px solid var(--blauw-rand);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blauw);
  text-align: center;
  line-height: 1.2;
}

.logo-tegel img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.logos-klein .logo-tegel {
  height: 46px;
  min-width: 86px;
  padding: 6px 10px;
  font-size: 14px;
}

.logo-woord {
  background: var(--blauw-licht);
}

/* Personen, met ruimte voor een echte foto ------------------------- */

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

.portret {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--blauw);
  color: var(--wit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
}

/* Zolang er geen foto is, staan de initialen in de cirkel. */
.portret::before {
  content: attr(data-initialen);
}

.portret img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persoon-naam {
  font-size: 19px;
  font-weight: 700;
  color: var(--blauw);
  margin: 0;
  line-height: 1.3;
}

.persoon-rol {
  font-size: 16px;
  margin: 0;
  line-height: 1.4;
}

.quote {
  font-size: 17px;
  line-height: 1.5;
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 4px solid var(--oranje);
}

/* Vinkjeslijstjes -------------------------------------------------- */

.vinkjes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vinkjes li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.5;
}

.vinkjes li:last-child {
  margin-bottom: 0;
}

.vinkjes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 3px solid var(--blauw);
  border-bottom: 3px solid var(--blauw);
  transform: rotate(-45deg);
}

/* Compacte tijdlijn in de kolom ------------------------------------ */

.tijdlijn-klein {
  margin-bottom: 0;
}

.tijdlijn-klein li {
  padding-left: 40px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.45;
}

.tijdlijn-klein li:last-child {
  margin-bottom: 0;
}

.tijdlijn-klein li::before {
  width: 28px;
  height: 28px;
  font-size: 15px;
  border-width: 2px;
  top: 0;
}

.tijdlijn-klein .tijdlijn-wanneer {
  font-size: 16px;
}

/* Betaalknoppen ---------------------------------------------------- */

.knop-betaal {
  position: relative;
  padding: 18px 22px;
  margin-bottom: 16px;
}

.betaal-aanbevolen {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--wit);
  background: var(--blauw);
  border-radius: 5px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

.knop-betaal .logos {
  margin-top: 12px;
}

.kader-waarschuwing {
  background: #fdf3ee;
  border-color: var(--oranje-donker);
}

/* Twee knoppen naast elkaar, scheelt hoogte op de bestelschermen. */

.knoppenrij {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.knoppenrij .knop {
  margin: 0;
}

.knoppenrij .knop-primair {
  font-size: 21px;
}

.knoppenrij .knop-terug {
  font-size: 18px;
}

/* Smaller dan de twee kolommen aankunnen --------------------------- */

@media (max-width: 980px) {
  .kolommen {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .scherm-breed {
    max-width: var(--max-breedte);
  }

  .steunkolom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
  }

  .vak {
    margin-bottom: 0;
  }
}

@media (max-width: 520px) {
  .knoppenrij {
    grid-template-columns: minmax(0, 1fr);
  }

  .veld-paar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .steunkolom {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ *
 * Compacter maken van de bestelschermen
 *
 * Doel: alles op een scherm, zonder te scrollen. De letters blijven ruim
 * genoeg voor 70-plus, maar de witruimte gaat eruit. Dit geldt alleen
 * binnen .scherm-breed, de rest van de site blijft zoals hij was.
 * ------------------------------------------------------------------ */

.scherm-breed {
  font-size: 19px;
}

.scherm-breed .voortgang {
  font-size: 18px;
  padding: 4px 14px;
  margin-bottom: 14px;
}

.scherm-breed h1 {
  font-size: 27px;
  margin-bottom: 18px;
}

.scherm-breed .kolommen {
  gap: 32px;
}

/* Linkerkolom */

.scherm-breed .bestel-product {
  padding: 14px 18px;
  margin-bottom: 18px;
}

.scherm-breed .bestel-naam {
  font-size: 23px;
}

.scherm-breed .bestel-merk {
  font-size: 17px;
}

.scherm-breed .prijs-tabel {
  margin-bottom: 10px;
}

.scherm-breed .prijs-tabel th,
.scherm-breed .prijs-tabel td {
  font-size: 19px;
  padding: 9px 0;
}

.scherm-breed .prijs-totaal th,
.scherm-breed .prijs-totaal td {
  font-size: 23px;
  padding-top: 12px;
}

.scherm-breed .prijs-uitleg {
  font-size: 17px;
  margin-bottom: 18px;
}

.scherm-breed .kader {
  padding: 14px 18px;
  margin-bottom: 18px;
}

.scherm-breed .kader h2 {
  font-size: 20px;
  margin-bottom: 8px;
}

.scherm-breed .kader p {
  font-size: 17px;
  margin-bottom: 0;
}

.scherm-breed .knop-primair {
  min-height: 60px;
  font-size: 20px;
  padding: 12px 18px;
}

.scherm-breed .knop-terug {
  min-height: 60px;
  font-size: 18px;
  padding: 12px 18px;
  margin-top: 12px;
}

.scherm-breed .knop-keuze {
  min-height: 56px;
  margin-bottom: 14px;
}

.scherm-breed .hint {
  font-size: 16px;
  margin-top: 8px;
  margin-bottom: 0;
}

.scherm-breed .blok-intro {
  font-size: 18px;
  margin-bottom: 16px;
}

/* Velden */

.scherm-breed .veld {
  margin-bottom: 14px;
}

.scherm-breed .veld label {
  font-size: 19px;
  margin-bottom: 5px;
}

.scherm-breed .veld-uitleg {
  font-size: 16px;
  margin-bottom: 6px;
}

.scherm-breed .veld input {
  min-height: 54px;
  font-size: 19px;
  padding: 10px 14px;
}

.scherm-breed .veld-paar {
  gap: 14px;
}

/* Controleren */

.scherm-breed .controle {
  padding-top: 14px;
  margin-bottom: 16px;
}

.scherm-breed .controle h2 {
  font-size: 20px;
  margin-bottom: 8px;
}

.scherm-breed .controle-regel {
  font-size: 18px;
  margin-bottom: 8px;
}

.scherm-breed .controle-nadruk {
  font-size: 21px;
}

.scherm-breed .knop-wijzig {
  min-height: 46px;
  padding: 8px 18px;
  font-size: 17px;
  margin-top: 0;
}

/* Rechterkolom */

.scherm-breed .vak {
  padding: 14px 16px;
  margin-bottom: 12px;
}

.scherm-breed .vak-kop {
  font-size: 17px;
  margin-bottom: 10px;
}

.scherm-breed .vak-voet {
  font-size: 15px;
  margin-top: 10px;
}

.scherm-breed .vinkjes li {
  font-size: 15px;
  margin-bottom: 7px;
  padding-left: 26px;
}

.scherm-breed .tijdlijn-klein li {
  font-size: 15px;
  margin-bottom: 10px;
  padding-left: 36px;
}

.scherm-breed .tijdlijn-klein li::before {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.scherm-breed .tijdlijn-klein .tijdlijn-wanneer {
  font-size: 15px;
}

.scherm-breed .logo-tegel {
  height: 46px;
  min-width: 92px;
}

.scherm-breed .logos-klein .logo-tegel {
  height: 40px;
  min-width: 78px;
}

.scherm-breed .rail-telefoon {
  font-size: 25px;
}

.scherm-breed .portret {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.scherm-breed .persoon-naam {
  font-size: 17px;
}

.scherm-breed .persoon-rol {
  font-size: 15px;
}

.scherm-breed .quote {
  font-size: 16px;
  margin-top: 10px;
}

.scherm-breed .betaal-titel {
  font-size: 21px;
}

.scherm-breed .betaal-uitleg {
  font-size: 17px;
}

.scherm-breed .betaal-aanbevolen {
  font-size: 14px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

/* Minder lucht boven en onder op de bestelschermen. */
.scherm-breed.is-actief {
  margin-block: 0;
}

@media (min-width: 981px) {
  #app:has(.scherm-breed.is-actief) {
    padding-top: 20px;
    padding-bottom: 28px;
  }
}

/* Tijdlijn met alles op een regel. */
.scherm-breed .tijdlijn-klein li {
  margin-bottom: 8px;
  line-height: 1.4;
}

.scherm-breed .tijdlijn-klein li b {
  color: var(--blauw);
}

/* De logorij past op een regel in de kolom. */
.scherm-breed .vak-partners .logo-tegel {
  height: 42px;
  min-width: 0;
  flex: 1 1 0;
  padding: 6px 8px;
  font-size: 13px;
}

/* Twee even brede velden naast elkaar. */
.veld-paar-gelijk {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Nog een slag compacter waar dat kan zonder dat het krap wordt. */
.scherm-breed .veld {
  margin-bottom: 11px;
}

.scherm-breed .veld label {
  margin-bottom: 3px;
}

.scherm-breed .veld input {
  min-height: 50px;
}

.scherm-breed .controle {
  padding-top: 11px;
  margin-bottom: 13px;
}

/* De partnerlogo's mogen groter, ze waren nauwelijks te herkennen. */
.scherm-breed .vak-partners .logo-tegel {
  height: 52px;
  padding: 7px 6px;
}

.scherm-breed .vak-partners .logo-tegel img {
  max-height: 38px;
}

/* Kopje en wijzigknop op een regel, scheelt hoogte bij het controleren. */
.controle-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.controle-kop h2 {
  margin: 0;
}

.controle-kop .knop-wijzig {
  flex: 0 0 auto;
  margin: 0;
}

/* iDEAL is het merk dat mensen moeten herkennen, dus die krijgt meer ruimte. */
.scherm-breed .logos-klein .logo-ideal {
  min-width: 118px;
}

.scherm-breed .logos-klein .logo-ideal img {
  max-height: 30px;
}

.scherm-breed .kader-waarschuwing {
  margin-bottom: 14px;
}

/* Laatste paar pixels van stap 3, zodat ook dat scherm in een keer past. */
.scherm-breed .knop-betaal {
  margin-bottom: 12px;
}

.scherm-breed .kader-waarschuwing {
  padding: 12px 18px;
}

/* ------------------------------------------------------------------ *
 * Productfoto's
 *
 * De bezoeker moet zien wat hij bestelt. Elke foto staat in een wit
 * kader met een vaste verhouding, zodat plaatjes van verschillende
 * leveranciers toch een nette rij vormen.
 * ------------------------------------------------------------------ */

.product-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--wit);
  border: 2px solid var(--blauw-rand);
  border-radius: 8px;
  overflow: hidden;
}

.product-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Op de adviespagina */

.kaart-kop {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.kaart-kop > div {
  min-width: 0;
}

.kaart-kop .product-foto {
  width: 128px;
  height: 128px;
  padding: 8px;
}

.kaart-kop h3 {
  margin-bottom: 6px;
}

.kaart-kop .kaart-merk {
  margin-bottom: 0;
}

/* Op de bestelpagina */

.bestel-product {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bestel-product > div {
  min-width: 0;
}

.scherm-breed .bestel-product .product-foto {
  width: 92px;
  height: 92px;
  padding: 6px;
}

@media (max-width: 520px) {
  .kaart-kop {
    gap: 14px;
  }

  .kaart-kop .product-foto {
    width: 92px;
    height: 92px;
  }
}

/* ================================================================== *
 * ONTWERP, TWEEDE RONDE
 *
 * Warmer, rustiger en menselijker. Drie ideeen dragen het geheel:
 * 1. Een warm papieren oppervlak in plaats van kaal wit, met witte
 *    kaarten erop. Dat geeft diepte zonder drukte.
 * 2. Marijke als vaste gids. Een gezicht en een naam wekken meer
 *    vertrouwen dan een formulier.
 * 3. Knoppen die eruitzien alsof u ze kunt indrukken, met een randje
 *    eronder en een pijl erin.
 * ================================================================== */

:root {
  --grond: #faf6f0;
  --grond-rand: #ebe3d6;
  --schaduw: 0 1px 2px rgba(31, 58, 95, 0.06), 0 10px 28px rgba(31, 58, 95, 0.09);
  --groen: #1c6b4a;
}

body {
  background: var(--grond);
}

/* Balk ------------------------------------------------------------ */

.balk {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 71px;
  padding: 10px 24px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 2px solid var(--grond-rand);
}

a.logo {
  text-decoration: none;
}

.balk-tagline {
  font-size: 16px;
  color: var(--blauw);
  padding-left: 18px;
  border-left: 2px solid var(--blauw-rand);
  line-height: 1.3;
}

.balk-bel {
  margin-left: auto;
  text-align: right;
  text-decoration: none;
  color: var(--blauw);
  line-height: 1.25;
  padding: 4px 8px;
  border-radius: 8px;
}

.balk-bel:hover {
  background: var(--blauw-licht);
}

.balk-bel-klein {
  display: block;
  font-size: 15px;
}

.balk-bel-nummer {
  display: block;
  font-size: 23px;
  font-weight: 700;
  white-space: nowrap;
}

/* Knoppen die indrukbaar ogen ------------------------------------- */

.knop {
  border-radius: 12px;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.knop-primair {
  box-shadow: 0 4px 0 var(--oranje-donker);
}

.knop-primair:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--oranje-donker);
}

.knop-primair:disabled {
  box-shadow: 0 4px 0 #9a9a9a;
}

.scherm:not(.scherm-breed) .knop-primair:not(:disabled)::after {
  content: "\2192";
  display: inline-block;
  margin-left: 12px;
  font-weight: 400;
}

.knop-keuze,
.knop-terug,
.knop-wijzig {
  box-shadow: 0 3px 0 var(--blauw-rand);
}

.knop-keuze:active,
.knop-terug:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--blauw-rand);
}

/* Keuzeknoppen met een pijl, zodat duidelijk is dat ze ergens heen gaan. */
.knop-keuze:not(.knop-betaal) {
  position: relative;
  padding-right: 64px;
}

.knop-keuze:not(.knop-betaal)::after {
  content: "\203A";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-54%);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  color: var(--blauw);
}

.knop-keuze:hover {
  border-color: var(--blauw);
}

.keuze-titel {
  display: block;
}

.keuze-uitleg {
  display: block;
  font-size: 18px;
  font-weight: 400;
  margin-top: 2px;
}

/* De schermen van de flow liggen als een vel papier op de ondergrond. */

.scherm-papier {
  background: var(--wit);
  border: 1px solid var(--grond-rand);
  border-radius: 20px;
  padding: 32px 40px 36px;
  box-shadow: var(--schaduw);
}

.scherm-papier .knop-terug {
  margin-top: 24px;
}

/* Stappenbalk ------------------------------------------------------ */

.stappen {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
}

.stappen li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.25;
  color: #4c5d70;
  padding-top: 10px;
  border-top: 5px solid var(--blauw-rand);
}

.stappen li span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--blauw-rand);
  font-size: 15px;
  font-weight: 700;
  background: var(--wit);
}

.stappen[data-actief="1"] li:nth-child(-n + 1),
.stappen[data-actief="2"] li:nth-child(-n + 2),
.stappen[data-actief="3"] li:nth-child(-n + 3) {
  border-top-color: var(--blauw);
  color: var(--blauw);
  font-weight: 700;
}

.stappen[data-actief="1"] li:nth-child(-n + 1) span,
.stappen[data-actief="2"] li:nth-child(-n + 2) span,
.stappen[data-actief="3"] li:nth-child(-n + 3) span {
  background: var(--blauw);
  border-color: var(--blauw);
  color: var(--wit);
}

/* Marijke als gids -------------------------------------------------- */

.gids {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.portret-gids {
  width: 68px;
  height: 68px;
  font-size: 22px;
  border: 3px solid var(--wit);
  box-shadow: 0 0 0 2px var(--blauw-rand);
}

.gids-ballon {
  position: relative;
  flex: 1 1 auto;
  background: var(--blauw-licht);
  border: 2px solid var(--blauw-rand);
  border-radius: 4px 16px 16px 16px;
  padding: 14px 18px;
}

.gids-ballon p {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
}

.gids-ballon .gids-naam {
  font-size: 15px;
  font-weight: 700;
  color: var(--blauw);
  margin-bottom: 4px;
}

#scherm-vragen .gids {
  margin-top: -6px;
}

.toelichting {
  margin-top: 0;
}

/* Laadscherm met Marijke */

.portret-laden {
  width: 116px;
  height: 116px;
  font-size: 34px;
  margin: 8px auto 28px;
  border: 4px solid var(--wit);
  box-shadow: 0 0 0 3px var(--blauw-rand);
}

#scherm-laden.is-actief {
  padding-top: 48px;
  padding-bottom: 56px;
}

/* Invoerveld -------------------------------------------------------- */

textarea {
  border-radius: 12px;
  background: #fffdfa;
}

textarea::placeholder {
  color: #5d6b7a;
}

/* Advies ------------------------------------------------------------ */

.gecontroleerd {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--wit);
  border: 2px solid var(--blauw-rand);
  border-radius: 16px;
  padding: 14px 20px;
  margin: -12px 0 28px;
}

.gecontroleerd .portret {
  width: 60px;
  height: 60px;
}

.gecontroleerd p {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

.gecontroleerd strong {
  display: block;
  color: var(--blauw);
}

.kaart {
  background: var(--wit);
  border-radius: 18px;
  box-shadow: var(--schaduw);
}

.kaart-conclusie {
  border-radius: 12px;
}

.blok-onzeker,
.disclaimer {
  border-radius: 16px;
}

.bestel-product,
.vak,
.kader {
  border-radius: 14px;
}

.vak {
  background: var(--wit);
}

/* Kleinere schermen -------------------------------------------------- */

@media (max-width: 980px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: 8px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .hero-kaartje {
    left: 16px;
    bottom: 16px;
  }

  .zo-werkt-lijst,
  .cijfers,
  .voet {
    grid-template-columns: minmax(0, 1fr);
  }

  .marijke {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px;
    gap: 24px;
  }

  .marijke-foto {
    max-width: 220px;
  }
}

@media (max-width: 640px) {
  .balk {
    padding-left: 16px;
    padding-right: 16px;
  }

  .balk-tagline,
  .balk-bel-klein {
    display: none;
  }

  .balk-bel-nummer {
    font-size: 19px;
  }

  .scherm-papier {
    padding: 22px 18px 26px;
    border-radius: 16px;
  }

  .stappen li {
    font-size: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero .lead {
    font-size: 20px;
  }

  .hero-kaartje {
    position: static;
    max-width: none;
    margin-top: 14px;
  }

  .logos-strip .logo-tegel {
    height: 60px;
    min-width: 120px;
  }

  .marijke-quote {
    font-size: 21px;
  }

  .gids-ballon p {
    font-size: 18px;
  }

  .portret-gids {
    width: 54px;
    height: 54px;
  }

  .voet {
    padding: 28px 24px;
  }
}

/* Logostrip als strak raster van zes gelijke tegels. */
.logos-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.logos-strip .logo-tegel {
  min-width: 0;
  width: 100%;
}

@media (max-width: 980px) {
  .logos-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .logos-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Advieskop: eerste zin groot, de uitleg eronder gewoon leesbaar. */
.advies-kort {
  font-size: 34px;
  line-height: 1.25;
  margin-bottom: 16px;
}

.advies-uitleg {
  font-size: 23px;
  line-height: 1.55;
  margin-bottom: 32px;
}

/* Op de hoofdkaart mag de foto groot, de bezoeker moet zien wat het is. */
.kaart-beste .kaart-kop {
  align-items: center;
}

.kaart-beste .kaart-kop .product-foto {
  width: 176px;
  height: 176px;
}

@media (max-width: 520px) {
  .advies-kort {
    font-size: 28px;
  }

  .advies-uitleg {
    font-size: 20px;
  }

  .kaart-beste .kaart-kop .product-foto {
    width: 110px;
    height: 110px;
  }
}

/* De bestelknop hoort bij dezelfde familie als de andere oranje knoppen. */
.knop-bestel {
  box-shadow: 0 4px 0 var(--oranje-donker);
}

.knop-bestel:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--oranje-donker);
}

.bestel-toelichting {
  margin-bottom: 20px;
}

/* De balk blijft even hoog als voorheen, anders passen de bestelschermen
   op een kleine laptop net niet meer. */
.balk {
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  padding-bottom: 6px;
}

.balk-bel {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Het logo: 70 en plus in blauw, het plusteken in oranje. */
.logo-svg {
  display: block;
  height: 44px;
  width: auto;
}

.logo-plusteken {
  stroke: var(--oranje);
}

.voet-logo .logo-svg {
  height: 48px;
}

.voet-logo .logo-plusteken {
  stroke: #ff9a5c;
}

@media (max-width: 480px) {
  .logo-svg {
    height: 38px;
  }
}

/* Laadscherm zonder advies: bolletjes weg, twee knoppen eronder. */
.laad-ring[hidden],
.laad-uitweg[hidden] {
  display: none;
}

.laad-uitweg {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.laad-uitweg .knop {
  text-align: center;
  text-decoration: none;
}