/* teveelerfbelasting.nl — design system v5
   v5 verwerkt de tweede design-review:
   - één typeschaal van vijf stappen in plaats van tien losse maten
   - één regelbreedte
   - drie breekpunten (640 / 900 / 1100) in plaats van acht
   - contrast op gemeten waarden, niet op aannames
   - geen zwevende kaart over de hero heen; identiteit staat in een eigen strook
   - Rethink Sans met 600 zodat lopende tekst een deadline kan benadrukken */

:root {
  --blue: #0168ff;          /* wit erop: 4,75:1 */
  --blue-dark: #0050cc;     /* op wit: 6,96:1 — voor tekstlinks */
  --blue-soft: #eaf2ff;
  --navy: #0f1a2d;
  --ink: #0f1a2d;           /* op wit: 17,4:1 */
  --ink-2: #4a5464;         /* op wit: 7,65:1 */
  --ink-3: #5c6675;         /* op wit: 5,81:1 — op grijs: 5,42:1 */
  --paper: #ffffff;
  --grey: #f6f7f9;
  --grey-2: #eceef2;
  --line: #dfe3ea;
  --line-2: #cbd1da;

  /* typeschaal — vijf stappen, en verder niets */
  --t-xs: .875rem;      /* 14 — fijndruk */
  --t-sm: .9375rem;     /* 15 — bijschrift, label */
  --t-md: 1.0625rem;    /* 17 — lopende tekst */
  --t-lg: 1.25rem;      /* 20 — lead, kaartkop */
  --t-xl: 1.625rem;     /* 26 — h3 groot, totaalregel */

  --measure: 62ch;

  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;

  --shadow-card: 0 1px 3px rgba(15,26,45,.05), 0 8px 28px rgba(15,26,45,.06);

  --sans: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Poppins', var(--sans);

  --pad-section: clamp(3.25rem, 7vw, 5.5rem);
  --pad-wrap: clamp(1.25rem, 4vw, 2rem);
  --container: 1220px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--t-md);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
strong, b { font-weight: 600; }

:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: .9rem 1.4rem; border-radius: 0 0 var(--r-sm) 0; text-decoration: none; }
.skip:focus { left: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-wrap); }
.wrap-narrow { max-width: 46rem; margin: 0 auto; padding: 0 var(--pad-wrap); }
.center { text-align: center; }

/* ---------- typografie ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(2.05rem, 3.7vw, 2.9rem); line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.2rem); line-height: 1.25; letter-spacing: -0.018em; }
h3 { font-size: var(--t-lg); line-height: 1.35; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; font-weight: 600; }
p { color: var(--ink-2); max-width: var(--measure); }
.lead { font-size: var(--t-lg); line-height: 1.55; color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.fine, .hint, .cap { font-size: var(--t-sm); color: var(--ink-3); }
.label { font-family: var(--display); font-size: var(--t-sm); color: var(--ink-3); }
.muted { color: var(--ink-3); }
a.inline { color: var(--blue-dark); text-underline-offset: 2px; }

/* ---------- header ---------- */
header.site { background: var(--paper); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 1.5rem; min-height: 4.75rem; flex-wrap: wrap; padding-top: .55rem; padding-bottom: .55rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; }
.brand-mark svg { width: 1.25rem; height: 1.25rem; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.012em; line-height: 1.2; }
.brand-name span { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0; }
nav.main { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
nav.main a.link { text-decoration: none; font-size: var(--t-md); color: var(--ink-2); padding: .7rem 0; }
nav.main a.link:hover { color: var(--blue-dark); }
nav.main a.link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }
.pill-contact {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: .7rem 1.25rem; font-size: var(--t-md); font-weight: 500; min-height: 2.75rem; white-space: nowrap;
}
.pill-contact:hover { border-color: var(--blue); color: var(--blue-dark); }
.pill-contact svg { width: 1.05rem; height: 1.05rem; color: var(--blue); }
/* het nummer alleen is niet genoeg: wie buiten kantooruren belt krijgt niemand */
.pill-tel { display: flex; flex-direction: column; line-height: 1.2; }
.pill-tel span { font-size: .72rem; font-weight: 400; color: var(--ink-3); letter-spacing: .01em; }
@media (max-width: 640px) {
  header.site .wrap { min-height: 0; gap: .75rem; }
  nav.main { width: 100%; gap: 1.25rem; }
  nav.main .pill-contact { margin-left: auto; padding: .6rem 1rem; }
  .brand-name span { display: none; }
}

/* beloftestrook — direct onder de hero, want dit is wat mensen tegenhoudt */
.beloftes { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.beloftes .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 2.5rem; padding-top: 2rem; padding-bottom: 2rem; }
.beloftes h2 { font-size: var(--t-md); font-weight: 600; margin-bottom: .4rem; line-height: 1.35; }
.beloftes p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; margin: 0; max-width: none; }
@media (max-width: 860px) { .beloftes .wrap { grid-template-columns: 1fr; gap: 1.25rem; } }

/* kerngegevens — echte tabel, want dit is wat zoekmachines en taalmodellen uitlezen */
.kern { width: 100%; border-collapse: collapse; margin: 1.5rem 0 1rem; font-size: var(--t-sm); }
.kern th, .kern td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--line); line-height: 1.5; }
.kern th { font-weight: 600; color: var(--ink); width: 34%; white-space: nowrap; }
.kern td { color: var(--ink-2); }
.kern tr:nth-child(odd) { background: var(--paper); }
@media (max-width: 560px) {
  .kern th, .kern td { display: block; width: auto; white-space: normal; border-bottom: none; padding: .45rem .9rem; }
  .kern th { padding-bottom: 0; }
  .kern tr { display: block; border-bottom: 1px solid var(--line); padding: .35rem 0; }
}

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: var(--t-md);
  padding: 1rem 1.9rem; min-height: 3.25rem; border-radius: var(--r-pill); border: none; cursor: pointer;
  transition: background .16s ease;
}
.btn:hover { background: var(--blue-dark); }
.btn-lg { padding: 1.1rem 2.25rem; min-height: 3.5rem; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: var(--grey-2); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--grey); }

/* ---------- hero ----------
   Het beeld heeft een eigen vorm en een eigen verhouding, en staat binnen dezelfde
   marges als de rest van de pagina. Daarmee is het een object naast de tekst in
   plaats van de ruimte die na de tekst overblijft. Drie varianten, één klasse. */
.hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3.25rem); }
.hero > .wrap { display: grid; align-items: center; gap: clamp(1.75rem, 4vw, 4rem); }

.hero-copy .kicker { font-size: var(--t-md); font-weight: 600; color: var(--blue-dark); margin-bottom: .9rem; letter-spacing: -0.005em; }
.hero-copy h1 { margin-bottom: 1.1rem; }
.hero-copy .lead { margin-bottom: 1.8rem; }
.hero-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.hero-note { font-size: var(--t-sm); color: var(--ink-3); }
/* startmelding — hoort bij de CTA, want de belofte "wij bellen u" hangt eraan */
.hero-start { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; margin-top: 1.5rem; padding-left: .9rem; border-left: 2px solid var(--blue); max-width: 30rem; }
.hero-start b { color: var(--ink); }

.hero-photo { background: var(--grey-2); border-radius: var(--r-lg); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* A — portret naast de tekst, verhouding 4:5 */
.hero-a > .wrap { grid-template-columns: 1fr minmax(0, 24rem); }
.hero-a .hero-photo { aspect-ratio: 4 / 5; }
.hero-a .hero-copy .lead { max-width: 30rem; }

/* B — het aanslagbiljet naast de tekst, zelfde raamwerk */
.hero-b > .wrap { grid-template-columns: 1fr minmax(0, 23rem); }
.hero-b .hero-photo { aspect-ratio: 4 / 5; }
.hero-b .hero-copy .lead { max-width: 30rem; }

/* C — tekst boven, brede beeldband eronder; ze concurreren niet */
.hero-c { padding-bottom: 0; }
.hero-c > .wrap { grid-template-columns: 1fr; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.hero-c .hero-copy { max-width: 46rem; }
.hero-c .hero-photo { aspect-ratio: 21 / 8; }
.hero-c .hero-actions { margin-bottom: .25rem; }

@media (max-width: 900px) {
  .hero-a > .wrap, .hero-b > .wrap { grid-template-columns: 1fr; }
  .hero-a .hero-photo, .hero-b .hero-photo { aspect-ratio: 3 / 2; max-height: 20rem; }
  .hero-c .hero-photo { aspect-ratio: 3 / 2; }
}


/* ---------- secties ---------- */
section { padding: var(--pad-section) 0; }
.band-grey { background: var(--grey); }
.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: .8rem; }

/* stappen als regels met nummer in de kantlijn */
.steps-rows { border-top: 1px solid var(--line); }
.steps-rows > div { display: grid; grid-template-columns: 3.5rem 14rem 1fr; gap: 1.75rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.steps-rows .sn { font-family: var(--display); font-size: var(--t-sm); color: var(--ink-3); padding-top: .3rem; }
.steps-rows h3 { font-size: var(--t-lg); }
.steps-rows p { font-size: var(--t-md); }
@media (max-width: 900px) { .steps-rows > div { grid-template-columns: 2.5rem 1fr; gap: .5rem 1rem; } .steps-rows p { grid-column: 2; } }

/* split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.split.rev .split-media { order: 2; }
.split-wide { grid-template-columns: 1.05fr .95fr; }
@media (max-width: 900px) { .split, .split-wide { grid-template-columns: 1fr; } .split.rev .split-media { order: 0; } }

/* foto's */
.photo { border-radius: var(--r-lg); overflow: hidden; background: var(--grey-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-wide { aspect-ratio: 16 / 11; }
.photo.ph { display: flex; align-items: center; justify-content: center; }
.photo.ph .ph-inner { text-align: center; padding: 1.75rem; color: #5f6875; max-width: 20rem; }
.photo.ph svg { width: 2rem; height: 2rem; margin: 0 auto .75rem; opacity: .6; }
.photo.ph .ph-label { font-size: var(--t-sm); line-height: 1.5; }

/* kaarten */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.card { background: var(--grey); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.25rem); }
.card.navy { background: var(--navy); color: #fff; }
.card.navy h3 { color: #fff; }
.card.navy p { color: rgba(255,255,255,.82); }
.card .label { display: block; margin-bottom: 1.25rem; color: var(--ink-2); }
.card.navy .label { color: rgba(255,255,255,.72); }
.card h3 { margin-bottom: 1.25rem; font-size: var(--t-xl); }
@media (max-width: 900px) { .cards-2 { grid-template-columns: 1fr; } }

/* lijst met dunne scheidingslijnen */
.flist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.flist > div { padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-md); display: flex; gap: .8rem; align-items: start; }
.flist > div > div span { display: block; color: var(--ink-3); font-size: var(--t-sm); line-height: 1.5; }
.flist .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--blue); flex: none; margin-top: .65rem; }
.flist-1 { grid-template-columns: 1fr; }
.card.navy .flist > div { border-color: rgba(255,255,255,.18); }
.card.navy .flist > div > div span { color: rgba(255,255,255,.68); }
.card.navy .flist .dot { background: #fff; }
@media (max-width: 900px) { .flist { grid-template-columns: 1fr; } }

/* rekenvoorbeeld */
.calc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1.35rem; border-bottom: 1px solid var(--line); }
.calc-row:last-child { border-bottom: none; }
.calc-row .cl { font-size: var(--t-md); color: var(--ink-2); min-width: 0; }
.calc-row .cv { font-family: var(--display); font-weight: 600; font-size: var(--t-lg); white-space: nowrap; letter-spacing: -0.02em; }
.calc-row.minus .cv { color: var(--blue-dark); }
.calc-row.sub { background: var(--grey); }
.calc-row.sub .cl, .calc-row.sub .cv { font-size: var(--t-md); color: var(--ink-3); }
.calc-row.total { background: var(--navy); }
.calc-row.total .cl { color: rgba(255,255,255,.85); }
.calc-row.total .cv { color: #fff; font-size: var(--t-xl); }

/* faq */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.5rem 0; display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1rem 3rem; }
.faq-item h3 { font-size: var(--t-md); font-weight: 600; }
.faq-item p { font-size: var(--t-md); }
@media (max-width: 900px) { .faq-item { grid-template-columns: 1fr; gap: .35rem; } }

/* licht afsluitend paneel op binnenpagina's */
.cta-panel { background: var(--grey); border-radius: var(--r-lg); padding: clamp(2.25rem, 5vw, 3.25rem) var(--pad-wrap); text-align: center; }
.cta-panel h2 { margin-bottom: .7rem; }
.cta-panel p { max-width: 32rem; margin: 0 auto 1.6rem; }

/* afsluitend blok dat overloopt in de footer */
.cta-band { background: var(--navy); color: #fff; padding: var(--pad-section) 0; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: .8rem; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 34rem; margin: 0 auto 1.9rem; }

/* ---------- artikel ---------- */
article.doc { padding: clamp(2rem, 5vw, 3rem) 0 2rem; }
article.doc h1 { margin-bottom: 1rem; }
article.doc .meta { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
article.doc h2 { font-size: var(--t-xl); margin: 2.25rem 0 .8rem; }
article.doc p { margin-bottom: 1rem; }
article.doc .faq-block { background: var(--grey); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2rem); margin-top: 2.25rem; }
article.doc .faq-block h2 { margin-top: 0; font-size: var(--t-lg); }
article.doc .faq-block p { font-size: var(--t-md); margin-bottom: .8rem; }
article.doc a { color: var(--blue-dark); }

/* kennisbank */
.kb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.kb-card { background: var(--grey); border-radius: var(--r-lg); padding: 1.6rem 1.6rem 1.75rem; text-decoration: none; display: block; }
.kb-card:hover { background: var(--grey-2); }
.kb-card h2 { margin-bottom: .5rem; font-size: var(--t-lg); line-height: 1.35; letter-spacing: -0.01em; }
.kb-card p { font-size: var(--t-md); }
@media (max-width: 900px) { .kb-grid { grid-template-columns: 1fr; } }

/* melding boven het formulier: eerlijk over de wachttijd */
.notice { background: #fdf3e3; border-radius: var(--r-md); padding: 1.15rem 1.35rem; margin-bottom: 1.5rem; }
.notice p { color: #6b4810; font-size: var(--t-sm); max-width: none; }
.notice a { color: #6b4810; }

/* ---------- formulier (aanvraagpagina) ---------- */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.25rem); }
label.field { display: block; font-weight: 600; font-size: var(--t-md); margin: 1.4rem 0 .5rem; }
label.field:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: .9rem 1.05rem; border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: var(--t-md); font-family: var(--sans); background: #fff; color: var(--ink); min-height: 3.25rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.file-drop { border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: 1.4rem; text-align: center; background: var(--grey); }
.hint { margin-top: .5rem; }
.checkrow { display: flex; gap: .8rem; align-items: flex-start; margin: 1.4rem 0 .5rem; font-size: var(--t-sm); color: var(--ink-2); }
.checkrow input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--blue); flex: none; }
.error { color: #a4231c; font-size: var(--t-sm); margin-top: .7rem; display: none; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- footer ---------- */
footer.site { background: var(--navy); color: #fff; padding: clamp(2.5rem, 6vw, 4rem) 0 2.5rem; }
footer.site .brand-name { color: #fff; }
footer.site .brand-name span { color: rgba(255,255,255,.66); display: block; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.5rem; }
footer.site .fh { font-family: var(--display); font-size: var(--t-md); font-weight: 500; margin-bottom: .75rem; color: #fff; letter-spacing: 0; }
footer.site p { color: rgba(255,255,255,.78); }
footer.site a { display: inline-block; text-decoration: none; color: rgba(255,255,255,.78); font-size: var(--t-sm); padding: .45rem 0; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site .fine { color: rgba(255,255,255,.7); margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.16); max-width: 52rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.concept-banner { background: #fdf3e3; color: #7a5212; text-align: center; font-size: var(--t-sm); padding: .7rem var(--pad-wrap); }