/* nubeslist.nl - stijlsysteem */

:root {
  --blauw-900: #0d1b33;
  --blauw-800: #14294d;
  --blauw-700: #1c3a6e;
  --blauw-600: #24509a;
  --blauw-500: #3b7ad4;
  --blauw-100: #e4eefc;
  --blauw-50: #f3f8ff;

  --groen-600: #12795b;
  --groen-100: #d8f2e8;
  --oranje-600: #a35a06;
  --oranje-100: #fdeeda;
  --rood-600: #b3261e;
  --rood-100: #fbe4e2;
  --paars-600: #5b3fa6;
  --paars-100: #ece5fb;
  --grijs-600: #57657f;
  --grijs-100: #eff4fc;

  --tekst: #14213a;
  --tekst-zacht: #57657f;
  --achtergrond: #ffffff;
  --vlak: #ffffff;
  --papier: #f5f8fd;
  --rand: #e2e9f4;
  --rand-sterk: #cfd9ea;

  --radius: 14px;
  --radius-klein: 9px;
  --schaduw: 0 1px 2px rgba(20, 45, 90, .04), 0 10px 28px rgba(20, 45, 90, .06);
  --schaduw-klein: 0 1px 2px rgba(20, 45, 90, .06);
  --breedte: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Geen donkere variant: dit merk is wit met blauw, op elk apparaat gelijk.
     Anders ziet iemand met een donkere telefoon precies het omgekeerde. */
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 780; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); font-weight: 720; }
h3 { font-size: 1.16rem; font-weight: 680; }
p { margin: 0 0 1em; }
a { color: var(--blauw-600); }

.omhulsel { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 16px; }

/* ------------------------------------------------------------- navigatie -- */
.balk {
  position: sticky; top: 0; z-index: 30;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
/* Doorschijnend alleen waar de vervaging het ook echt doet; anders schemert
   de donkere banner erdoorheen zodra de pagina eronder doorschuift. */
@supports (backdrop-filter: blur(10px)) {
  .balk {
    background: color-mix(in srgb, var(--vlak) 94%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
  }
}
.balk__inhoud { display: flex; align-items: center; gap: 16px; height: 64px; }
.merk {
  display: flex; align-items: center; gap: 10px; font-weight: 760; color: var(--tekst);
  text-decoration: none; letter-spacing: -.025em; font-size: 1.06rem; white-space: nowrap;
}
.merk__teken { width: 32px; height: 32px; flex: none; }
.merk__punt { color: var(--blauw-600); }
.balk nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.balk nav a {
  color: var(--tekst-zacht); text-decoration: none; font-size: .93rem; font-weight: 560;
  padding: 8px 12px; border-radius: 8px;
}
.balk nav a:hover { color: var(--tekst); background: var(--grijs-100); }
.balk nav a.knop--primair { color: #fff; }
.nav-kort { display: none; }
@media (max-width: 720px) {
  .nav-lang { display: none; }
  .nav-kort { display: inline; }
}

/* ------------------------------------------------------------- menuknop -- */
/* Op een telefoon paste de balk niet, en toen verdwenen er links. Nu klapt
   alles uit achter één knop; de oproep tot actie blijft wel staan. */
.menuknop { display: none; }

@media (max-width: 860px) {
  .balk--met-menu .balk__inhoud { flex-wrap: wrap; height: auto; padding-block: 10px; }

  .balk--met-menu .menuknop {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    margin-left: 8px; order: 3;
    width: 42px; height: 42px; padding: 0 10px; flex: none;
    background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: 10px;
    cursor: pointer;
  }
  .balk--met-menu .menuknop:hover { border-color: var(--blauw-500); }
  .menuknop__streep {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--tekst); transition: transform .18s, opacity .18s;
  }
  .balk--open .menuknop__streep:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .balk--open .menuknop__streep:nth-child(2) { opacity: 0; }
  .balk--open .menuknop__streep:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Het paneel zelf.
     Niet de hele nav op display:none zetten: dan is de hoofdknop ook weg, en
     een kind kan niet ontsnappen aan een verborgen ouder. Daarom blijft de nav
     staan en verbergen we alleen de regels die niet in de balk horen. */
  /* [merk] ... [hoofdknop] [menuknop] - de menuknop uiterst rechts, waar een
     duim hem zoekt. Open schuift het paneel als laatste naar de nieuwe regel. */
  .balk--met-menu nav { order: 2; margin-left: auto; gap: 4px; }
  .balk--met-menu nav > *:not(.knop--primair) { display: none; }

  .balk--open nav {
    order: 4; margin-left: 0;
    width: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 0 4px; margin-top: 8px; border-top: 1px solid var(--rand);
  }
  /* Even zwaar als de verbergregel hierboven (twee klassen plus een element),
     en hij staat erna - anders wint het verbergen en gaat het paneel wel open
     maar blijft het leeg. */
  .balk--met-menu.balk--open nav > * { display: flex; }
  .balk--open nav a { padding: 12px 10px; border-radius: 10px; font-size: 1rem; }
  .balk--open nav a.knop { justify-content: flex-start; }
  /* In de balk moet de knoptekst kort ("Starten"), in het open paneel is er
     ruimte voor de hele zin - en dan hoort de korte versie weg, anders staat
     er "Controleer mijn briefStarten". */
  .balk--open nav .nav-lang { display: inline; }
  .balk--open nav .nav-kort { display: none; }

  /* De hoofdknop staat altijd in de balk; alleen in het open menu schuift hij
     mee in de kolom. */
  .balk--met-menu nav a.knop--primair { padding: 9px 14px; font-size: .88rem; }
  .balk--open nav a.knop--primair { width: 100%; padding: 12px 10px; font-size: 1rem; }
}
@media (max-width: 420px) {
  .balk--met-menu nav a.knop--primair { padding: 8px 11px; font-size: .82rem; }
}
}
.balk nav a.knop--primair:hover { color: #fff; background: var(--blauw-700); }

/* ---------------------------------------------------------------- knoppen -- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: .97rem; font-weight: 640; text-decoration: none;
  cursor: pointer; transition: background .15s, border-color .15s, transform .08s;
}
.knop:active { transform: translateY(1px); }
.knop--primair { background: var(--blauw-600); color: #fff; }
.knop--primair:hover { background: var(--blauw-700); }
.knop--zacht { background: var(--vlak); color: var(--tekst); border-color: var(--rand-sterk); }
.knop--zacht:hover { border-color: var(--blauw-500); color: var(--blauw-600); }
.knop--stil { background: transparent; color: var(--tekst-zacht); padding: 10px 14px; }
.knop--stil:hover { background: var(--grijs-100); color: var(--tekst); }
.knop--klein { padding: 8px 13px; font-size: .88rem; }
.knop[disabled] { opacity: .5; cursor: not-allowed; }
.knop--gevaar { background: var(--rood-100); color: var(--rood-600); }

/* ----------------------------------------------------------------- vlakken -- */
.kaart {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schaduw-klein);
}
.kaart--ruim { padding: 26px; }

.label-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 640;
  background: var(--grijs-100); color: var(--grijs-600); white-space: nowrap;
}
.label-chip--blauw { background: var(--blauw-100); color: var(--blauw-600); }
.label-chip--groen { background: var(--groen-100); color: var(--groen-600); }
.label-chip--oranje { background: var(--oranje-100); color: var(--oranje-600); }
.label-chip--rood { background: var(--rood-100); color: var(--rood-600); }
.label-chip--paars { background: var(--paars-100); color: var(--paars-600); }

.melding {
  border-radius: var(--radius-klein); padding: 14px 16px; margin: 0 0 16px;
  border: 1px solid var(--rand); background: var(--grijs-100); font-size: .93rem;
}
.melding strong { display: block; margin-bottom: 2px; }
.melding--let-op { background: var(--oranje-100); border-color: color-mix(in srgb, var(--oranje-600) 30%, transparent); color: var(--oranje-600); }
.melding--fout { background: var(--rood-100); border-color: color-mix(in srgb, var(--rood-600) 30%, transparent); color: var(--rood-600); }
.melding--goed { background: var(--groen-100); border-color: color-mix(in srgb, var(--groen-600) 30%, transparent); color: var(--groen-600); }
.melding--info { background: var(--blauw-50); border-color: var(--blauw-100); color: var(--tekst); }
.melding p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- formulier -- */
.veld { margin-bottom: 20px; }
.veld > label, .veld__kop {
  display: block; font-weight: 640; font-size: .95rem; margin-bottom: 6px;
}
.veld__hulp { font-size: .86rem; color: var(--tekst-zacht); margin: 0 0 8px; }
/* Onder een gevoelig veld: wat gebeurt er met dit nummer. */
.veld__slot {
  display: flex; gap: 7px; align-items: baseline;
  font-size: .84rem; color: var(--groen-600); margin: 7px 0 0;
}
.veld__slot-teken { flex: none; font-size: .8rem; }
.veld__fout { font-size: .86rem; color: var(--rood-600); margin-top: 6px; font-weight: 560; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .97rem;
  color: var(--tekst); background: var(--vlak);
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-klein);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .keuze:focus-within {
  outline: 2px solid var(--blauw-500); outline-offset: 1px;
}
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tekst-zacht) 50%), linear-gradient(135deg, var(--tekst-zacht) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.keuzes { display: grid; gap: 10px; }
.keuzes--twee { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.keuze {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; cursor: pointer;
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-klein); background: var(--vlak);
  transition: border-color .15s, background .15s;
}
.keuze:hover { border-color: var(--blauw-500); }
.keuze input { margin: 3px 0 0; accent-color: var(--blauw-600); flex: none; width: 17px; height: 17px; }
.keuze__tekst { font-weight: 580; font-size: .95rem; }
.keuze__uitleg { display: block; font-weight: 400; font-size: .85rem; color: var(--tekst-zacht); margin-top: 2px; }
.keuze:has(input:checked) { border-color: var(--blauw-600); background: var(--blauw-50); box-shadow: inset 0 0 0 1px var(--blauw-600); }

.rij { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------------------------------------------------------------- tijdlijn -- */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { position: relative; padding: 0 0 20px 30px; border-left: 2px solid var(--rand); }
.tijdlijn li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tijdlijn li::before {
  content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--vlak); border: 2px solid var(--rand-sterk);
}
.tijdlijn li[data-status="gehaald"]::before { background: var(--blauw-600); border-color: var(--blauw-600); }
.tijdlijn__datum { font-weight: 680; font-size: .95rem; }
.tijdlijn__label { font-size: .9rem; color: var(--tekst-zacht); }
.tijdlijn__toelichting { font-size: .83rem; color: var(--tekst-zacht); margin-top: 3px; }

/* -------------------------------------------------------------------- tabel -- */
.tabel-omhulsel { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--rand); background: var(--vlak); }
table.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tabel th {
  text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tekst-zacht); padding: 12px 14px; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
table.tabel td { padding: 13px 14px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
table.tabel tr:last-child td { border-bottom: none; }
table.tabel tbody tr { cursor: pointer; }
table.tabel tbody tr:hover { background: var(--blauw-50); }
.bedrag { font-variant-numeric: tabular-nums; font-weight: 680; white-space: nowrap; }

.verborgen { display: none !important; }
.alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.voet {
  margin-top: 64px; padding: 32px 0; border-top: 1px solid var(--rand);
  font-size: .87rem; color: var(--tekst-zacht);
}
.voet a { color: var(--tekst-zacht); }
.voet__merk { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.voet__merk svg { width: 26px; height: 26px; flex: none; }
.voet__merk span { font-weight: 720; color: var(--tekst); letter-spacing: -.02em; }
/* Links onder elkaar op mobiel, naast elkaar zodra het past; geen scheidingstekens. */
.voet__links { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.voet__links a { text-decoration: none; font-weight: 560; }
.voet__links a:hover { color: var(--blauw-600); text-decoration: underline; }

/* --------------------------------------------------------------- mobiel -- */
/* De merknaam bleef hier weg onder 380px, uit de tijd dat de hele navigatie
   in de balk moest passen. Met het uitklapmenu staat er nog maar [merk]
   [hoofdknop] [menuknop], en dan is er ruimte genoeg: een site waarvan je de
   naam niet ziet is een site die je niet onthoudt. */
@media (max-width: 380px) {
  .merk { font-size: .92rem; }
  .merk__teken { width: 28px; height: 28px; }
  .balk nav .knop--klein { padding: 8px 10px; font-size: .84rem; }
}

@media (max-width: 720px) {
  /* Hier stond dat de inhoudelijke links "wijken": display:none. Dat was geen
     responsief ontwerp maar verlies - "Hoe het werkt", "Kosten" en "Vragen"
     waren op een telefoon niet te bereiken. Ze zitten nu in het uitklapmenu;
     alleen zonder javascript wijken ze nog, want dan is er geen menu. */
  .balk:not(.balk--met-menu) nav a.nav-secundair { display: none; }
  .balk__inhoud { gap: 8px; }
  .balk nav { gap: 2px; }
  .knop--klein { padding: 8px 11px; }
  .merk { font-size: .96rem; }
  .lade { padding: 20px 16px; }
  .kop-rij .rechts { width: 100%; margin-left: 0; }
}

/* ------------------------------------------------- dynamische veldeisen -- */
.veld__vereist { font-weight: 400; font-size: .85rem; color: var(--tekst-zacht); }
.veld__reden { font-size: .84rem; color: var(--tekst-zacht); margin: 4px 0 8px; }
.veld__reden:empty { display: none; }