/* ==========================================================================
   SuperFactuur — huisstijl van de website (site/)
   Eén stylesheet voor de homepage en alle subpagina's, met opzet zonder
   afhankelijkheden: deze map moet in zijn geheel op superfactuur.nl kunnen
   staan, zonder bouwstap en zonder externe lettertypen of scripts.
   De kleuren zijn dezelfde tokens als css/app.css, zodat de site en de app
   één geheel zijn.
   ========================================================================== */
:root {
  --bg: #f3f4f8;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --border: #e2e4ee;
  --text: #141a33;
  --text-2: #4f5674;
  --text-3: #666d8a;
  --merk: #f6b51e;          /* saffraan: alleen als vlak met --merk-ink erop */
  --merk-ink: #141a33;
  --primary: #343aa6;       /* indigo: knoppen en links */
  --primary-ink: #ffffff;
  --primary-hover: #2b3090;
  --primary-soft: #e6e8fb;
  --primary-text: #2f3494;
  --donker: #111933;
  --donker-2: #1b2550;
  --link: #3d46c4;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breed: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font); color: var(--text); background: var(--surface);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); font-weight: 750; }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 700; }
h3 { font-size: 1.06rem; font-weight: 650; }
p { margin: 0 0 1em; }
a { color: var(--link); }
.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.4rem; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knop-hoofd { background: var(--primary); color: var(--primary-ink); }
.knop-hoofd:hover { background: var(--primary-hover); color: var(--primary-ink); }
.knop-rand { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.knop-rand:hover { background: rgba(255,255,255,.1); color: #fff; }
.knop-licht { background: var(--surface); color: var(--text); border-color: var(--border); }
.knop-licht:hover { background: var(--surface-2); }
.knop:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
/* Op de donkere vlakken (kop, hero, prijsvlak) is de hoofdknop saffraan met inkt;
   in de witte pakketkaart blijft hij indigo (saffraan op wit haalt 1,8:1). */
.balk .knop-hoofd, .hero .knop-hoofd, .sub-hero .knop-hoofd, .prijs-vlak .knop-hoofd { background: var(--merk); color: var(--merk-ink); }
.balk .knop-hoofd:hover, .hero .knop-hoofd:hover, .sub-hero .knop-hoofd:hover, .prijs-vlak .knop-hoofd:hover { background: color-mix(in srgb, var(--merk) 85%, #fff); color: var(--merk-ink); }
.balk .knop:focus-visible, .hero .knop:focus-visible, .sub-hero .knop:focus-visible, .prijs-vlak .knop:focus-visible { outline-color: var(--merk); }
.prijs-vlak .pakket .knop-hoofd { background: var(--primary); color: var(--primary-ink); }
.prijs-vlak .pakket .knop-hoofd:hover { background: var(--primary-hover); color: var(--primary-ink); }
.prijs-vlak .pakket .knop:focus-visible { outline-color: var(--link); }

/* ---------- kop ---------- */
.balk { background: var(--donker); color: #fff; }
.balk-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.merk { display: flex; align-items: center; gap: .55rem; font-weight: 750; font-size: 1.12rem; color: #fff; text-decoration: none; }
.merk-vlak { width: 26px; height: 26px; border-radius: 50%; background: var(--merk); display: grid; place-items: center; color: var(--merk-ink); font-size: 15px; font-weight: 800; }
.balk nav { display: flex; align-items: center; gap: .35rem; }
.balk nav a { color: rgba(255,255,255,.86); text-decoration: none; padding: .45rem .7rem; border-radius: var(--radius); font-size: .95rem; font-weight: 550; }
.balk nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.balk nav a.knop { color: var(--merk-ink); }
.verberg-smal { display: none; }
@media (min-width: 720px) { .verberg-smal { display: inline-flex; } }

/* ---------- hero ---------- */
.hero { background: var(--donker); color: #fff; padding: 3rem 0 4rem; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lead { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: rgba(255,255,255,.82); max-width: 46ch; margin-bottom: 1.6rem; }
.hero-acties { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.1rem; }
.hero-acties .knop { flex: 1 1 auto; min-width: 12rem; }
.hero-klein { font-size: .92rem; color: rgba(255,255,255,.62); margin: 0; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } .hero-acties .knop { flex: 0 0 auto; } }

/* De schermschets: een factuur in wording, opgebouwd uit gewone elementen. */
.schets { background: var(--surface); border-radius: 8px; box-shadow: 0 18px 44px rgba(0,0,0,.28); overflow: hidden; color: var(--text); }
.schets-balk { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: .6rem .9rem; display: flex; align-items: center; gap: .4rem; }
.stip { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.schets-titel { margin-left: .4rem; font-size: .8rem; color: var(--text-2); }
.schets-in { padding: 1.1rem 1.2rem 1.3rem; }
.schets-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.schets-nr { font-size: 1.15rem; font-weight: 750; }
.schets-sub { font-size: .82rem; color: var(--text-2); }
.merkje { display: inline-block; padding: .15rem .5rem; border-radius: 20px; background: var(--primary-soft); color: var(--primary-text); font-size: .72rem; font-weight: 650; }
.schets table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.schets th { text-align: left; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 650; padding-bottom: .45rem; border-bottom: 1px solid var(--border); }
.schets td { padding: .5rem 0; border-bottom: 1px solid var(--surface-2); }
.schets td.n, .schets th.n { text-align: right; font-variant-numeric: tabular-nums; }
.schets tfoot td { border: 0; padding-top: .7rem; font-weight: 700; }
.schets tfoot .totaal { font-size: 1.02rem; }

/* ---------- vlakken ---------- */
section { padding: 3.4rem 0; }
.grijs { background: var(--bg); }
.kop-blok { max-width: 34rem; margin-bottom: 2rem; }
.kop-blok p { color: var(--text-2); margin: 0; }
.ogen { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--primary-text); margin: 0 0 .5rem; }

.rooster { display: grid; gap: 1rem; }
@media (min-width: 620px) { .rooster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .rooster { grid-template-columns: repeat(3, 1fr); } }
.kaart { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.3rem; }
.grijs .kaart { background: var(--surface); }
.kaart h3 { margin-bottom: .3rem; }
.kaart p { margin: 0; color: var(--text-2); font-size: .95rem; }
.icoon { width: 34px; height: 34px; border-radius: 7px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; margin-bottom: .8rem; }
.icoon svg { width: 19px; height: 19px; display: block; }

/* ---------- stappen ---------- */
.stappen { display: grid; gap: 1.6rem; counter-reset: stap; }
@media (min-width: 800px) { .stappen { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.stap { position: relative; padding-left: 3rem; }
.stap::before {
  counter-increment: stap; content: counter(stap);
  position: absolute; left: 0; top: -.15rem; width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--donker); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .98rem;
}
.stap h3 { margin-bottom: .25rem; }
.stap p { margin: 0; color: var(--text-2); font-size: .95rem; }

/* ---------- prijs ---------- */
.prijs-vlak { background: var(--donker); color: #fff; }
.prijs-vlak h2 { color: #fff; }
.bedrag { display: flex; align-items: baseline; gap: .35rem; margin: .2rem 0 .1rem; }
.bedrag b { font-size: 2.5rem; font-weight: 750; letter-spacing: -.03em; }
.bedrag span { color: var(--text-2); font-weight: 550; }
.tarief-regel { margin: 0; font-size: .84rem; color: var(--text-2); }   /* text-3 haalde maar 3:1 op wit, en hier staat het jaarbedrag */
.prijs-note { font-size: .86rem; color: var(--text-3); margin: .8rem 0 0; text-align: center; }

/* ---------- vragen ---------- */
.vragen { max-width: 44rem; }
details { border-bottom: 1px solid var(--border); }
details summary {
  cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; font-weight: 650; position: relative; list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.45rem; width: .5rem; height: .5rem;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg); transition: transform .15s;
}
details[open] summary::after { transform: rotate(-135deg); }
details .antwoord { padding: 0 0 1.15rem; color: var(--text-2); font-size: .96rem; }
details .antwoord p:last-child { margin-bottom: 0; }

/* ---------- slot ---------- */
.slot { text-align: center; }
.slot .knop { min-width: 14rem; }
footer { background: var(--donker-2); color: rgba(255,255,255,.7); font-size: .9rem; padding: 2.2rem 0; }
footer a { color: rgba(255,255,255,.9); }
.voet-in { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
footer p { margin: 0; }

/* ==========================================================================
   Subpagina's — lopende tekst
   Opzet: geen video's, wel echte uitleg die je kunt lézen. Daarom
   een smalle tekstkolom (rond de 68 tekens per regel) en wat meer ruimte tussen
   de alinea's dan op de homepage.
   ========================================================================== */
.sub-hero { background: var(--donker); color: #fff; padding: 2.6rem 0 2.8rem; }
.sub-hero h1 { color: #fff; max-width: 18ch; font-size: clamp(1.8rem, 4.6vw, 2.7rem); }
.sub-hero .lead { font-size: clamp(1.02rem, 2vw, 1.18rem); color: rgba(255,255,255,.82); max-width: 52ch; margin: 0; }

/* Kruimelpad: klein, rustig, en op een telefoon niet in de weg. */
.kruimels { font-size: .85rem; color: rgba(255,255,255,.6); margin: 0 0 1rem; }
.kruimels a { color: rgba(255,255,255,.85); text-decoration: none; }
.kruimels a:hover { text-decoration: underline; color: #fff; }
.kruimels span { padding: 0 .35rem; }

.artikel { max-width: 42rem; }
.artikel h2 { margin-top: 2.6rem; }
.artikel h2:first-child { margin-top: 0; }
.artikel p { font-size: 1.03rem; }
.artikel > p:last-child { margin-bottom: 0; }
.artikel ul { padding-left: 0; list-style: none; margin: 1.1rem 0; }
.artikel ul li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; }
.artikel ul li::before {
  content: ""; position: absolute; left: .1rem; top: .62em;
  width: .42rem; height: .42rem; border-radius: 50%; background: var(--primary);
}
.artikel .lijstkop { font-weight: 650; margin-bottom: .2rem; }
.artikel strong { font-weight: 650; }

/* Een uitgelicht blok voor iets dat je echt moet weten. */
.let-op {
  border-left: 3px solid var(--primary); background: var(--surface-2);
  padding: 1rem 1.1rem; margin: 1.6rem 0; border-radius: 0 6px 6px 0;
}
.let-op p:last-child { margin-bottom: 0; }
.let-op strong { color: var(--primary-text); }

/* Verder lezen: de andere onderwerpen, onderaan elke subpagina. */
/* 23-9-2026: de inleiding van het prijsblok stond in donkergrijs op donkerblauw,
   omdat .kop-blok p zwaarder weegt dan .prijs-intro. Deze regel wint wel. */
.prijs-vlak .kop-blok p { color: rgba(255,255,255,.82); }
.verder { display: grid; gap: .6rem; }
@media (min-width: 700px) { .verder { grid-template-columns: 1fr 1fr; } }
.verder a {
  display: block; padding: .9rem 1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text);
}
.verder a:hover { border-color: var(--primary-hover); background: var(--primary-soft); }
.verder b { display: block; font-weight: 650; margin-bottom: .1rem; }
.verder span { font-size: .9rem; color: var(--text-2); }

/* NOG NIET IN GEBRUIK: de regels hieronder tot "Subpagina's" en het blok
   "Subpagina's" zelf horen bij de subpagina's uit OPLEVERING.md §4, die er nog niet
   zijn. De voettekst heeft nu nog geen menu (.voet-nav); dat komt met die pagina's. */
@media (max-width: 899px) { .verberg-middel { display: none; } }
.voet-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.voet-nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .9rem; }
.voet-nav a:hover { color: #fff; text-decoration: underline; }
footer .voet-in { align-items: flex-start; }

/* ---------- drie pakketten ---------- */
/* Vervangt de oude prijs-grid met één kaart. De kaarten liggen op het donkere
   vlak, dus ze dragen hun eigen lichte achtergrond en tekstkleur; erft er iets
   de kleur van de sectie, dan wordt het wit-op-wit. */
.prijs-intro { color: rgba(255,255,255,.82); max-width: 40rem; margin-inline: auto; }
.prijs-vlak .kop-blok { text-align: center; margin-bottom: 2.2rem; }

.pakketten {
  display: grid; gap: 1.25rem; align-items: stretch;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .pakketten { grid-template-columns: repeat(3, 1fr); } }

.pakket {
  position: relative;
  background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 1.6rem 1.4rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
  display: flex; flex-direction: column; gap: 1rem;
}
/* Eén kaart krijgt nadruk, de andere twee blijven rustig. Zouden alle drie een
   rand of een lint krijgen, dan wijst niets meer ergens naartoe. */
.pakket-aan { outline: 2px solid var(--primary-hover); outline-offset: -2px; }
.pakket-tip {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .7rem; font-weight: 700;
  padding: .22rem .7rem; border-radius: 20px;
  background: var(--primary-hover); color: var(--primary-ink);
}
.pakket-kop h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
.pakket-sub { margin: 0; font-size: .88rem; color: var(--text-2); min-height: 2.6em; }
.pakket-prijs { border-top: 1px solid var(--border); padding-top: .9rem; }
.pakket-prijs .bedrag { margin-top: 0; }
.pakket-aan .bedrag b { color: var(--primary-text); }
/* Het maandtarief staat eronder en is kleiner, maar het staat er wél: niemand
   hoort het gevoel te krijgen dat hij in een jaarcontract wordt geduwd. */
.tarief-maand { margin: .45rem 0 0; font-size: .84rem; color: var(--text-2); }
.tarief-maand b { color: var(--text); }

.pakket-lijst { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; font-size: .89rem; }
/* Grid met VASTE verhouding, geen flex met space-between. Reden: de labels zijn
   in alle drie de kaarten dezelfde tekst, maar de waarden verschillen in breedte.
   Bij flex bepaalt de waarde hoeveel ruimte het label overhoudt, dus wikkelt
   "Bonnen automatisch inlezen" in de ene kaart wel en in de andere niet — en dan
   lopen de rijen van de drie kaarten niet meer naast elkaar. Met een vaste
   verhouding is de labelkolom overal even breed en wikkelt elk label overal
   hetzelfde. */
.pakket-lijst li {
  display: grid; grid-template-columns: 1.35fr 1fr; align-items: baseline;
  gap: .5rem; padding: .48rem 0; border-top: 1px solid var(--border);
}
.pakket-lijst li:first-child { border-top: 0; }
.pakket-lijst b { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Wat er niet bij zit treedt terug maar blijft leesbaar; doorstrepen zou juist
   alle aandacht trekken. */
.pakket-lijst li.uit, .pakket-lijst li.uit b { color: var(--text-2); font-weight: 400; }
.pakket .knop { width: 100%; }
.prijs-vlak .prijs-note { color: rgba(255,255,255,.72); max-width: 46rem; margin: 1.6rem auto 0; }

/* Copyrightregel onder in de voettekst (28-9-2026). */
.voet-copyright { font-size: 13px; opacity: .75; }