/* [Land]klaar — landing + calculator. Huisstijl = swappable merksysteem:
   per land wissel je alleen het LAND-CONFIG-blok (accent + beeld + data). */

/* ===== LAND-CONFIG — swap dit blok per land (Spanjeklaar → Portugalklaar → …) ===== */
:root {
  --accent:      #c0532a;   /* Spanje = terracotta. Portugal → azulejo #2b6ca3; Griekenland → egeïsch #1a7fb5 */
  --accent-dark: #a2401c;
  --accent-soft: #f4e7dc;
}
/* ===== einde LAND-CONFIG — alles hieronder is constant over alle landen ===== */

:root {
  color-scheme: light;
  --bg: #f7f2e9;              /* warm kalk/crème */
  --paper-2: #efe6d6;         /* zand — secties.alt */
  --card: #fffdf9;
  --ink: #23201b;             /* warm bijna-zwart */
  --ink-2: #5f584e;
  --muted: #948b7d;
  --line: #e7decd;
  --trust: #1f5a5e;           /* diep petrol — constant, mediterraan, landneutraal (trust-accenten) */
  --trust-soft: #e5eeed;
  /* typografie: Poppins (modern schreefloos) voor koppen/logo + Inter voor body */
  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* chart-rollen (gevalideerd palet) */
  --surface-1: #fcfcfb;
  --series-nl: #2a78d6;
  --series-es: #008300;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --status-good: #0ca30c;
  --status-warn: #fab219;
  --status-crit: #d03b3b;
  --good-text: #006300;
  --warn-text: #8a5a00;
  --crit-text: #a82f2f;
}

* { box-sizing: border-box; }
/* [hidden] moet altijd winnen — anders overschrijft een display:flex-component het */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.06rem;          /* ruimer basisformaat — leesbaar voor 55+ */
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* zichtbare focus voor toetsenbord-/screenreadergebruik */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
/* koppen: iets minder dik (600) + merk-kleur petrol op lichte secties */
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; color: var(--trust); }
h1 { font-size: clamp(2rem, 5.2vw, 3.2rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -.005em; }
p { margin: 0 0 1em; }
a { color: var(--accent-dark); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }
@media (max-width: 700px) { .wrap { padding: 0 28px; } }

/* header */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; text-decoration: none;
  color: var(--ink); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: .4em; }
.brand .mark { height: 1.5em; width: auto; flex: none; }
.brand .dot { color: var(--accent); }

/* hero — full-bleed foto; header + tekst eroverheen, scrim voor leesbaarheid */
.hero-wrap { position: relative; isolation: isolate; background: #14100a; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,14,8,.60) 0%, rgba(20,14,8,.12) 16%, rgba(20,14,8,0) 30%),
    linear-gradient(90deg, rgba(20,14,8,.88) 0%, rgba(20,14,8,.62) 42%, rgba(20,14,8,.20) 70%, rgba(20,14,8,0) 100%),
    linear-gradient(0deg, rgba(20,14,8,.55) 0%, rgba(20,14,8,0) 34%);
}

/* meescrollende header: transparant over de hero, solide zodra je scrollt */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.brand-group { display: flex; align-items: center; gap: 18px; min-width: 0; }
/* transparante staat (over de foto): alles licht */
.site-header .brand { color: #fff; --accent: #ec8a5c; --trust: #d7e6e4; }
.site-header .brand .dot { color: #f0a578; }
.brand-tag {
  font-size: .82rem; line-height: 1.25; color: rgba(255,250,244,.85);
  max-width: 340px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.30);
}
.brand-tag strong { color: #fff; font-weight: 650; }
@media (max-width: 900px) { .brand-tag { display: none; } }
.btn.secondary.on-dark {
  color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.10);
  backdrop-filter: blur(3px);
}
.btn.secondary.on-dark:hover { background: rgba(255,255,255,.20); border-color: #fff; }
/* solide staat (na scroll): crème balk, donkere tekst */
.site-header.scrolled {
  background: rgba(247,242,233,.94); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(29,28,26,.06);
}
.site-header.scrolled .brand { color: var(--ink); --accent: #c0532a; --trust: #1f5a5e; }
.site-header.scrolled .brand .dot { color: var(--accent); }
.site-header.scrolled .brand-tag { color: var(--ink-2); border-left-color: var(--line); }
.site-header.scrolled .brand-tag strong { color: var(--ink); }
.site-header.scrolled .btn.secondary.on-dark {
  color: var(--accent-dark); border-color: var(--accent); background: transparent; backdrop-filter: none;
}
.site-header.scrolled .btn.secondary.on-dark:hover { background: var(--accent-soft); border-color: var(--accent); }

.hero { padding: 0; }
.hero-inner {
  position: relative;
  min-height: min(62vh, 540px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: 84px; padding-bottom: 44px;
}
/* op desktop staat deze zin in de header; op mobiel als pill in de hero */
.hero .kicker {
  display: none; background: rgba(255,251,244,.14); color: #fdeee0;
  border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(2px);
  font-weight: 600; font-size: .82rem; padding: 5px 13px; border-radius: 999px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .hero .kicker { display: inline-block; } }
.hero h1 { color: #fff; text-shadow: 0 2px 20px rgba(10,6,2,.5); }
.hero p.lead { font-size: 1.12rem; color: rgba(255,250,244,.93); max-width: 560px;
  text-shadow: 0 1px 12px rgba(10,6,2,.45); }
.hero .btn.big { box-shadow: 0 8px 24px rgba(10,6,2,.4); }

/* MOBIEL: hero gestapeld — fotobanner boven (header eroverheen), tekst eronder op licht.
   Geen drukke tekst-over-foto meer. */
@media (max-width: 700px) {
  .hero-wrap { background: var(--bg); }
  .hero-bg { position: relative; inset: auto; height: 300px; z-index: 0; }
  .hero-bg img { object-position: 60% center; }
  .hero-scrim {
    inset: 0 0 auto 0; height: 300px; z-index: 1;
    background:
      linear-gradient(180deg, rgba(20,14,8,.5) 0%, rgba(20,14,8,.04) 38%, rgba(20,14,8,0) 55%),
      linear-gradient(0deg, rgba(20,14,8,.66) 0%, rgba(20,14,8,.08) 28%, rgba(20,14,8,0) 46%);
  }
  /* header compacter op mobiel zodat logo + knop met marge op één regel passen */
  .brand { font-size: 1.2rem; }
  .topbar { gap: 12px; flex-wrap: wrap; }
  .topbar .btn { padding: 10px 14px; font-size: .95rem; min-height: 46px; }
  .site-header .btn.secondary { padding: 9px 15px; font-size: .85rem; min-height: 44px; }

  .hero { padding: 0; }
  .hero-inner { position: static; min-height: 0; padding-top: 22px; padding-bottom: 8px; }
  /* targeting-zin als bijschrift ín de foto (onderaan de banner) */
  .hero .kicker {
    position: absolute; left: 28px; right: 28px; top: 300px; transform: translateY(-100%);
    z-index: 3; margin: 0; padding: 0 0 14px;
    display: block; background: none; border: 0; backdrop-filter: none;
    color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.3;
    text-shadow: 0 1px 10px rgba(10,6,2,.7);
  }
  .hero h1 { color: var(--trust); text-shadow: none; }
  .hero p.lead { color: var(--ink-2); text-shadow: none; max-width: none; }
  .hero .btn.big { display: block; width: 100%; text-align: center; box-shadow: none; margin-top: 4px; }
}


/* knoppen — royaal aanraakoppervlak (min. 52px hoog) en duidelijk contrast */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 1.05rem; font-weight: 650; border-radius: 12px;
  padding: 15px 28px; min-height: 54px;
  background: var(--accent); color: #fff; transition: background .15s, transform .06s;
  box-shadow: 0 2px 8px rgba(29,28,26,.10);
}
.btn:hover { background: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: #fff; color: var(--accent-dark); border: 2px solid var(--accent); box-shadow: none; }
.btn.secondary:hover { background: var(--accent-soft); }
.btn.big { font-size: 1.18rem; padding: 18px 34px; min-height: 62px; }

/* secties */
section { padding: 44px 0; }
section.alt { background: var(--paper-2); }
.section-kicker { color: var(--accent-dark); font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }

/* calculator */
.calc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; box-shadow: 0 2px 14px rgba(29,28,26,.05);
}
.calc-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .calc-grid { grid-template-columns: 1fr; } }
/* ===== INVOERVELDEN — groot, duidelijk en goed aanwijsbaar (55+) ===== */
.field { margin-bottom: 4px; }
.field label { display: block; font-weight: 700; font-size: 1.02rem; margin-bottom: 9px; color: var(--ink); }
.field select,
.field input[type=email], .field input[type=text],
.field input[type=date], .field input[type=number],
input.big-input, select.big-select {
  width: 100%; font: inherit; font-size: 1.08rem; font-weight: 500;
  padding: 15px 16px; min-height: 58px;
  border: 2px solid #cdbfa8; border-radius: 12px;
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 3px rgba(29,28,26,.05);
}
/* dropdowns: eigen, goed zichtbare pijl */
.field select, select.big-select {
  appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2401c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 20px;
}
/* datumvelden: volle breedte i.p.v. het kleine standaard-pilletje */
.field input[type=date] { cursor: pointer; }
.field input[type=date]::-webkit-calendar-picker-indicator {
  width: 26px; height: 26px; cursor: pointer; opacity: .75; padding: 2px;
}
.field select:hover, .field input:hover { border-color: var(--accent); }
.field select:focus, .field input:focus {
  outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field .hint { display: block; font-size: .95rem; color: var(--ink-2); margin-top: 7px; }

/* keuzeknoppen — echte knoppen, niet kleine pilletjes */
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg button {
  font: inherit; font-weight: 600; font-size: 1.02rem; cursor: pointer;
  padding: 13px 20px; min-height: 54px; border-radius: 12px;
  border: 2px solid #cdbfa8; background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; gap: .45em; transition: all .12s;
}
.seg button:hover { border-color: var(--accent); background: var(--accent-soft); }
.seg button::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid #c3b49c; background: #fff;
}
.seg button[aria-pressed="true"] {
  background: var(--trust); border-color: var(--trust); color: #fff; font-weight: 700;
}
.seg button[aria-pressed="true"]::before {
  border-color: #fff; background: #fff;
  box-shadow: inset 0 0 0 4px var(--trust);
}
.slider-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.slider-val { font-weight: 800; font-size: 1.35rem; color: var(--accent-dark); }
input[type=range] { width: 100%; accent-color: var(--accent); height: 44px; cursor: pointer; }

/* resultaten */
.results { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 22px; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tile .label { font-size: 1rem; color: var(--ink-2); margin-bottom: 2px; }
.tile .value { font-size: 1.9rem; font-weight: 650; }
.tile .sub { font-size: .95rem; color: var(--ink-2); }

/* stoplicht-verdict: status = kleur + icoon + tekst, nooit kleur alleen */
.verdict { display: flex; gap: 14px; align-items: flex-start; border-radius: 14px;
  padding: 20px 22px; margin-bottom: 24px; border: 2px solid var(--line); background: var(--surface-1); font-size: 1.05rem; }
.verdict .icon { font-size: 1.4rem; line-height: 1.3; }
.verdict .title { font-weight: 700; font-size: 1.15rem; }
.verdict.good  { border-color: var(--status-good); }
.verdict.good .title  { color: var(--good-text); }
.verdict.warn  { border-color: var(--status-warn); }
.verdict.warn .title  { color: var(--warn-text); }
.verdict.crit  { border-color: var(--status-crit); }
.verdict.crit .title  { color: var(--crit-text); }

/* chart */
.viz-root { background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.viz-title { font-weight: 700; font-size: 1.14rem; margin-bottom: 2px; }
.viz-sub { font-size: 1rem; color: var(--ink-2); margin-bottom: 14px; }
.legend { display: flex; gap: 22px; font-size: 1rem; color: var(--ink-2); margin-bottom: 14px; }
.legend .key { display: inline-flex; align-items: center; gap: 7px; }
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bargroup { margin-bottom: 14px; }
.bargroup .cat { font-size: 1.02rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.barrow { display: grid; grid-template-columns: 1fr; gap: 2px; }  /* 2px surface-gap */
.bar-line { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.bar {
  height: 18px; border-radius: 0 4px 4px 0; /* 4px data-end, recht op baseline */
  min-width: 2px; transition: width .35s ease;
}
.bar.nl { background: var(--series-nl); }
.bar.es { background: var(--series-es); }
.bar-val { font-size: .96rem; color: var(--ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.viz-note { font-size: .95rem; color: var(--ink-2); margin-top: 10px; }
.viz-table { margin-top: 12px; font-size: 1rem; }
.viz-table summary { cursor: pointer; color: var(--ink-2); padding: 12px 0; font-weight: 600;
  min-height: 48px; display: flex; align-items: center; }
.viz-table table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.viz-table th, .viz-table td { text-align: right; padding: 4px 10px; border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums; }
.viz-table th:first-child, .viz-table td:first-child { text-align: left; }

/* gemiste-kosten teaser */
.teaser { background: var(--accent-soft); border-radius: 14px; padding: 20px 22px; margin-top: 24px;
  font-size: 1.05rem; border: 2px solid #ecdccb; }
.teaser strong { color: var(--accent-dark); }

/* e-mail capture */
.capture-card {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--trust);
  border-radius: 16px;
  padding: 32px 26px; text-align: center; box-shadow: 0 2px 14px rgba(29,28,26,.05);
}
.capture-card p { max-width: 560px; margin-left: auto; margin-right: auto; }
.email-form { display: flex; gap: 10px; max-width: 460px; margin: 16px auto 0; }
.capture-card .email-form .btn { white-space: nowrap; }
@media (max-width: 540px) { .email-form { flex-direction: column; } }
.email-form input[type=email] { flex: 1; font: inherit; font-size: 1.08rem; padding: 15px 16px;
  min-height: 58px; border: 2px solid #cdbfa8; border-radius: 12px; }
.form-msg { margin-top: 12px; font-size: 1.05rem; font-weight: 600; min-height: 1.4em; }
.form-msg.ok { color: var(--good-text); font-weight: 600; }
.form-msg.err { color: var(--crit-text); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* kit */
.kit-card { background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  padding: 28px; box-shadow: 0 2px 14px rgba(29,28,26,.05); }
/* kop-beeld dat tot de kaartranden bloedt */
.kit-cover { position: relative; margin: -28px -28px 26px; }
.kit-cover img { width: 100%; height: clamp(170px, 22vw, 250px); object-fit: cover; display: block; }
.kit-cover figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 26px 16px;
  color: #fff; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.25;
  text-shadow: 0 1px 12px rgba(10,6,2,.5);
  background: linear-gradient(0deg, rgba(20,14,8,.66) 0%, rgba(20,14,8,.12) 62%, rgba(20,14,8,0) 100%);
}
.kit-cols { display: grid; gap: 28px; grid-template-columns: 1.2fr 1fr; align-items: start; }
@media (max-width: 720px) { .kit-cols { grid-template-columns: 1fr; } }
.kit-list { list-style: none; padding: 0; margin: 0 0 8px; }
.kit-list li { padding: 11px 0 11px 34px; position: relative; font-size: 1.05rem; }
.kit-list li::before { content: "✓"; position: absolute; left: 2px; top: 10px; color: var(--status-good); font-weight: 800; font-size: 1.2rem; }
.price-box { background: var(--accent-soft); border-radius: 12px; padding: 20px; text-align: center; }
.price-old { text-decoration: line-through; color: var(--ink-2); font-size: 1.15rem; }
.price-now { font-size: 2.7rem; font-weight: 750; color: var(--accent-dark); }
.price-note { font-size: 1rem; color: var(--ink-2); margin-bottom: 14px; }

/* kit-CTA onder de gratis checklist — dit is het moment waarop iemand het
   meest gemotiveerd is, dus een echte knop en geen tekstlink in een alinea. */
.kit-cta { background: var(--card); border: 2px solid var(--accent); border-radius: 16px;
  padding: 30px 26px; margin-top: 36px; text-align: center;
  box-shadow: 0 4px 20px rgba(29,28,26,.08); }
.kit-cta h3 { font-size: 1.5rem; margin: 6px 0 10px; }
.kit-cta p { max-width: 560px; margin-left: auto; margin-right: auto; }
.kit-cta .kit-cta-prijs { font-size: 1.15rem; margin: 16px 0 18px; color: var(--ink); }
.kit-cta .kit-cta-prijs .oud { text-decoration: line-through; color: var(--ink-2); margin-right: 8px; }
.kit-cta .kit-cta-prijs strong { font-size: 1.9rem; font-weight: 750; color: var(--accent-dark); }
.kit-cta .btn { display: inline-block; text-decoration: none; }
.kit-cta .kit-cta-note { font-size: .95rem; color: var(--ink-2); margin: 14px 0 0; font-weight: 600; }
@media (max-width: 540px) { .kit-cta .btn { display: block; width: 100%; } }

/* faq / footer */
.faq details { border-bottom: 2px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.12rem; padding: 12px 0;
  min-height: 52px; display: flex; align-items: center; }
.faq p { margin-top: 10px; color: var(--ink-2); font-size: 1.05rem; max-width: 760px; }
footer { padding: 34px 0 44px; color: var(--ink-2); font-size: .98rem; }
.persona-switch { margin-top: 14px; color: var(--ink-2); }
.persona-switch a { color: var(--accent-dark); font-weight: 600; }
footer p { margin-bottom: .4em; }

/* ===== BELANGRIJKE INFO — groot in beeld, nooit kleine lettertjes ===== */
.notice {
  display: flex; gap: 16px; align-items: flex-start;
  border-radius: 14px; padding: 20px 22px; margin: 22px 0;
  font-size: 1.06rem; line-height: 1.6;
  border: 2px solid; border-left-width: 8px;
}
.notice .ico { font-size: 1.6rem; line-height: 1.2; flex: none; }
.notice .nb { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem;
  display: block; margin-bottom: 5px; }
.notice p:last-child { margin-bottom: 0; }
.notice.attention { background: #fdf1e7; border-color: var(--status-warn); }
.notice.attention .nb { color: #7a4e00; }
.notice.danger { background: #fdeced; border-color: var(--status-crit); }
.notice.danger .nb { color: var(--crit-text); }
.notice.tip { background: var(--trust-soft); border-color: var(--trust); }
.notice.tip .nb { color: var(--trust); }
.notice.good { background: #edf6ea; border-color: var(--status-good); }
.notice.good .nb { color: var(--good-text); }

/* ===== STAPPEN-UITLEG: "zo werkt het" ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0 6px; counter-reset: st; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  padding: 22px 20px; position: relative;
}
.step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 12px;
  background: var(--trust); color: #fff; font-family: var(--font-head);
  font-weight: 700; font-size: 1.25rem;
}
.step h3 { margin: 0 0 6px; font-size: 1.2rem; color: var(--ink); }
.step p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.step.done { border-color: var(--status-good); }

/* ===== VOORTGANG ===== */
.progress-card {
  background: var(--card); border: 2px solid var(--trust); border-radius: 16px;
  padding: 18px 22px; margin: 0 0 26px;
}
.progress-card .pt { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--trust); }
.progress-bar { height: 16px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 12px 0 6px; }
.progress-bar > i { display: block; height: 100%; background: var(--status-good); border-radius: 999px;
  transition: width .3s ease; }
.progress-card .ps { font-size: 1rem; color: var(--ink-2); }

/* checklistpagina */
.phase { margin-bottom: 38px; }
.phase h3 { color: var(--accent-dark); font-size: 1.4rem; }
/* fase-kop als duidelijke balk */
.phase-head {
  background: var(--trust); color: #fff; border-radius: 14px 14px 0 0;
  padding: 16px 20px; margin-bottom: 0;
}
.phase-head h3 { color: #fff; margin: 0; font-size: 1.3rem; }
.phase-head .when { font-size: 1rem; opacity: .92; margin-top: 3px; }
.phase-body { border: 2px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px;
  padding: 8px 20px 14px; background: var(--card); }
/* vinkvakjes: groot en makkelijk te raken */
.check-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.check-item:last-child { border-bottom: 0; }
.check-item input[type=checkbox] {
  width: 30px; height: 30px; margin: 2px 0 0; flex: none; accent-color: var(--status-good); cursor: pointer;
}
.check-item label { cursor: pointer; }
.check-item .why { font-size: 1rem; color: var(--ink-2); margin-top: 6px; }
.check-item input:checked + label { opacity: .62; }
.check-item input:checked + label > strong { text-decoration: line-through; }
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  /* elke fase op een eigen PDF-pagina; losse items niet over de paginarand knippen */
  .phase { break-before: page; page-break-before: always; }
  .phase:first-of-type { break-before: auto; page-break-before: auto; }
  .phase h3 { break-after: avoid-page; }
  .phase-head { break-after: avoid-page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .check-item { break-inside: avoid; page-break-inside: avoid; }
  .notice, .progress-card, .step { break-inside: avoid; page-break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .progress-card { display: none; }   /* voortgang is schermfunctie */
}

/* ===== Tabellen passend houden op smalle schermen =====
   Zonder table-layout:fixed duwen lange woorden de tabel breder dan het scherm,
   wat horizontaal scrollen van de héle pagina veroorzaakt. */
@media (max-width: 700px) {
  .kit-tbl, table.dom { table-layout: fixed; width: 100%; }
  .kit-tbl th, .kit-tbl td, table.dom th, table.dom td {
    padding: 11px 10px; overflow-wrap: anywhere; hyphens: auto;
  }
}

/* ---- Micro-feedback onder het calculator-resultaat -------------------------
   Doel: één klik, geen formulier, geen e-mail (dus ook geen AVG-vraagstuk).
   Erft de merkkleuren, dus elk [Land]klaar-project krijgt dit automatisch. */
.mf { margin-top: 22px; padding: 18px 20px; background: var(--paper-2);
      border: 1px solid var(--line); border-radius: 14px; }
.mf-vraag { font-weight: 600; margin-bottom: 12px; }
.mf-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-knop { font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
           min-height: 44px; padding: 10px 16px; border-radius: 999px;
           border: 2px solid var(--line); background: var(--card); color: var(--ink);
           transition: border-color .15s, background .15s; }
.mf-knop:hover { border-color: var(--trust); }
.mf-knop[aria-pressed="true"] { border-color: var(--trust); background: var(--trust); color: #fff; }
.mf-vervolg { margin-top: 14px; }
.mf-label { display: block; font-size: .95rem; margin-bottom: 6px; }
.mf-label span { color: var(--ink-2); font-weight: 400; }
.mf-tekst { width: 100%; font: inherit; font-size: .98rem; padding: 10px 12px;
            border: 2px solid var(--line); border-radius: 10px; background: var(--card);
            color: var(--ink); resize: vertical; }
.mf-tekst:focus { outline: none; border-color: var(--trust); }
.mf-verstuur { margin-top: 10px; font: inherit; font-size: .95rem; font-weight: 700;
               cursor: pointer; min-height: 44px; padding: 10px 20px; border: 0;
               border-radius: 10px; background: var(--accent); color: #fff; }
.mf-dank { margin-top: 12px; font-weight: 600; color: var(--good-text); }

/* ---- Regelval ------------------------------------------------------------
   Zonder deze regels breekt de browser puur op breedte af: koppen krijgen een
   eenzaam laatste woord en korte alinea's vallen scheef. `balance` verdeelt de
   regels van korte blokken gelijkmatig, `pretty` voorkomt weeskinderen in
   lopende tekst. Scheelt handmatige <br>'s — die breken juist op mobiel. */
h1, h2, h3, h4, .lead, .section-kicker, .kicker,
.tile .label, .tile .sub, .step h3, .price-note, .verdict .title {
  text-wrap: balance;
}
p, li, .note, .viz-sub { text-wrap: pretty; }
/* lange Nederlandse samenstellingen mogen afbreken i.p.v. de layout oprekken */
body { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h1, h2, h3, .price-now, .value { hyphens: none; }

/* ---- Utilities ------------------------------------------------------------
   Vervangen 300+ herhaalde inline styles. Reden: een inline style wint het van
   elke stylesheet, dus zolang ze er staan kun je de site niet centraal
   bijsturen (een kleur of marge wijzigen betekende 40 bestanden langs). Deze
   klassen doen exact hetzelfde, maar dan op één plek aanpasbaar. */
.m0        { margin: 0; }
.mt-6      { margin-top: 6px; }
.mt-22     { margin-top: 22px; }
.mt-30     { margin-top: 30px; }
.mb-tight  { margin: .4em 0 0; }
.muted     { color: var(--ink-2); }
.muted-mt  { margin-top: 22px; color: var(--ink-2); }
.prose     { max-width: 860px; }
.prose-wide{ max-width: 1000px; padding-bottom: 50px; }
.stampline { font-weight: 600; color: var(--trust); }
.plainlink { text-decoration: none; color: inherit; }
.img-full  { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.img-plain { width: 100%; border-radius: 8px; display: block; }