/* Mobiel eerst, stijl van de Warmtefonds-mail (warmtefonds_mail_v3.html). Lettertypen staan op eigen domein, niets van Google: klantpagina's sturen geen IP-adres naar derden. */
@font-face { font-family:'Manrope'; src:url('/fonts/manrope.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
@font-face { font-family:'Schibsted Grotesk'; src:url('/fonts/schibsted-grotesk.woff2') format('woff2'); font-weight:400 900; font-display:swap; }
:root { --bg:#EFEEE9; --donker:#04383A; --teal:#007C81; --teal-donker:#0A5054; --accent:#6FCAC5; --roze:#C43A73; --ink:#26332F; --muted:#5E6E6B; --zacht:#F5FAF8; --zacht-accent:#E9F5F2; --lijn:#E4EFEB; --fout:#a4120f; --kop:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif; --schaduw:0 1px 2px rgba(16,48,47,.04),0 8px 24px rgba(16,48,47,.05); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 'Manrope',-apple-system,'Segoe UI',Arial,sans-serif; }
header { padding:22px 20px 18px; }
header img { width:150px; height:auto; display:block; margin:0 auto; }
main { max-width:600px; margin:0 auto 24px; padding:0 12px; }

.hero { background:var(--donker); border-radius:22px; overflow:hidden; box-shadow:var(--schaduw); margin-bottom:16px; }
.hero img { display:block; width:100%; height:160px; object-fit:cover; object-position:center 20%; }
.hero-tekst { padding:24px 20px 28px; text-align:center; }
.hero-chip { display:inline-block; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.30); color:#EAF6F3; font:700 12px/1.3 var(--kop); letter-spacing:.10em; text-transform:uppercase; padding:8px 18px; border-radius:999px; }
.hero-kop { margin:14px 0 0; font:800 30px/1.08 var(--kop); letter-spacing:-.028em; color:#fff; }
.hero-kop span { color:var(--accent); }
body[data-scherm="s-ongeldig"] .hero, body[data-scherm="s-fout"] .hero { display:none; }
@media (min-width:560px) { .hero img { height:240px; } .hero-kop { font-size:38px; } .hero-tekst { padding:32px 40px 36px; } }

.kaart { background:#fff; border-radius:22px; padding:28px 22px; box-shadow:var(--schaduw); }
@media (min-width:560px) { .kaart { padding:34px; } }
.chip { display:inline-block; background:var(--zacht-accent); color:var(--teal-donker); font:800 11.5px/1.3 var(--kop); letter-spacing:.12em; text-transform:uppercase; border-radius:999px; padding:7px 14px; margin-bottom:12px; }
h1 { font:800 25px/1.12 var(--kop); letter-spacing:-.02em; color:var(--ink); margin:0 0 12px; }
h1:focus { outline:none; }
h2 { font:800 20px/1.2 var(--kop); letter-spacing:-.02em; margin:0 0 10px; }
p { margin:0 0 12px; color:var(--muted); }
.muted { color:var(--muted); font-size:14.5px; }
.rij { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:16px 0; }
.rij button { background:var(--zacht); border:1px solid var(--lijn); border-radius:16px; color:var(--ink); font:700 15.5px/1.3 var(--kop); min-height:62px; padding:12px; }
.rij button:hover { background:var(--zacht-accent); border-color:var(--teal); }
button, .knop { font:700 15.5px/1.3 var(--kop); cursor:pointer; min-height:50px; border-radius:999px; border:1px solid var(--teal); background:#fff; color:var(--teal); padding:12px 24px; text-align:center; text-decoration:none; display:inline-block; }
button:hover { background:var(--zacht-accent); }
button.primair { background:var(--teal); border-color:var(--teal); color:#fff; }
button.primair:hover { background:var(--teal-donker); border-color:var(--teal-donker); }
button.stil { border-color:var(--lijn); color:var(--muted); }
button:disabled { opacity:.55; cursor:default; }
:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
.acties { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.laden { display:flex; gap:16px; align-items:center; }
.laden h1 { margin-bottom:6px; }
.laden p { margin:0; }
.spinner { flex:none; width:34px; height:34px; border:4px solid var(--zacht-accent); border-top-color:var(--teal); border-radius:50%; animation:draai 1s linear infinite; }
@keyframes draai { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation:none; border-top-color:var(--accent); } }
.melding { background:#fdecec; color:var(--fout); border-radius:14px; padding:12px 16px; margin:12px 0; }
.samenvatting { background:var(--zacht-accent); border:1px solid #CFE9E3; border-radius:16px; color:var(--ink); font:800 17px/1.35 var(--kop); padding:16px 18px; margin:14px 0; }
.tel { font:800 22px/1.3 var(--kop); color:var(--teal); }
.tel a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
.verborgen { position:absolute; left:-9999px; }
label { display:block; font-weight:700; margin-bottom:6px; }
textarea { width:100%; font:inherit; border:1px solid var(--lijn); border-radius:14px; padding:12px; min-height:90px; }
.veldgroep { border:0; padding:0; margin:14px 0 8px; }
.veldgroep legend { font:800 15.5px/1.3 var(--kop); color:var(--ink); margin-bottom:10px; padding:0; }
label.keuze { display:flex; gap:10px; align-items:center; background:var(--zacht); border:1px solid var(--lijn); border-radius:16px; color:var(--ink); cursor:pointer; font-weight:600; font-size:15px; line-height:1.4; margin-bottom:8px; padding:14px 16px; }
label.keuze:has(input:checked) { background:var(--zacht-accent); border-color:var(--teal); }
label.keuze input { accent-color:var(--teal); flex:none; margin:0; width:18px; height:18px; }

footer { background:var(--donker); border-radius:22px; margin:0 12px 24px; padding:30px 24px; text-align:center; box-shadow:var(--schaduw); }
@media (min-width:624px) { footer { max-width:576px; margin:0 auto 24px; } }
footer img { display:block; width:148px; height:auto; margin:0 auto 14px; }
footer p { margin:0; color:#7FA6A1; font-size:11.5px; line-height:1.9; }
footer .reviews { color:rgba(255,255,255,.60); margin-bottom:12px; }
footer .sterren { color:#D8A93A; letter-spacing:1px; }
footer .reviews b { color:rgba(255,255,255,.78); }
footer a { color:#fff; font-weight:700; text-decoration:none; }