/* Ronde 3 voor timondhaeze.com, gegenereerd door Design system/ronde3/bouw-site-ronde3.py
   uit tokens.json. NIET met de hand wijzigen. Laadt na site.css en wint daarom overal. */

@font-face { font-family: "Cal Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/css/fonts/cal-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/css/fonts/manrope-var.woff2) format("woff2"); }

:root {
  --creme-100: #F2E8DA;
  --creme-200: #F6F6F6;
  --creme-300: #F6F6F6;
  --ink: #1A1A1A;
  --donker: #1A1A1A;
  --blauw: #8A6D39;
  --blauw-donker: #1A1A1A;
  --rood: #8F2E22;
  --grijs: #5B5B5B;
  --wit: #F6F6F6;
  --rand: rgba(26,26,26,0.14);
  --rand-sterk: rgba(26,26,26,0.2);
  --display: "Cal Sans", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --mono: "Manrope", system-ui, sans-serif;
  --radius-knop: 999px;
  --radius-kaart: 24px;
  --gloed: none;
}

/* Cal Sans bestaat in één gewicht: nooit een nagemaakt vet of cursief (tokens letter.kop). */
h1, h2, h3, h4, h5, h3.h4, .pakket .prijs, .consultkop .prijs { font-weight: 400; font-style: normal; }
em, i { font-style: normal; color: #8A6D39; }
section.donker em, .donker-groep em { color: #D3B27E; }

/* Koppen en cijfers in de kopletter, met de letterafstand uit de tokens. */
h1, h2, h3, h4, h5, h3.h4 { letter-spacing: -0.01em; }
.stat b, .transfo-voet .cijfer, .duotekst .cijfer, .vk-tekst .cijfer, .scorebadge b,
.pakket .prijs, .consultkop .prijs { font-family: "Cal Sans", system-ui, sans-serif; font-weight: 400; letter-spacing: -0.01em; }
.hero-plaats { color: #D3B27E; }

/* Het logo is een lockup op twee regels: nooit laten krimpen, anders wordt de naam onleesbaar. */
.nav-logo, .nav-logo img { flex: none; }
@media (max-width: 479px) { .nav-logo img { height: 32px; } }
/* In het Frans en Engels is de oproep langer: op een smalle gsm moet het menu-icoon binnen beeld blijven. */
@media (max-width: 400px) { .nav-cta { padding: 10px 12px; } }

/* De voettekst liep op gsm buiten het scherm (twee kolommen breder dan de pagina, al zo vóór de
   rebranding, gevonden op 28 sep 2026). Een kolom mag krimpen en lange woorden breken. */
.footer-kolommen > * { min-width: 0; }
.footer-kolommen a { overflow-wrap: anywhere; }

/* De grond draagt de korrel, zoals op het brandboard. */
body { background-color: #F2E8DA; background-image: url(/css/korrel-180.png);
  background-size: 180px 180px; background-blend-mode: multiply; }

/* Donkere secties: geen blauwe gloed meer. */
section.donker::before, .donker-groep::before { display: none; }
section.donker, .donker-groep { color: #F2E8DA; }

/* Knoppen. De primaire knop is de ene oproep (healthcheck): goud met charcoal tekst. */
.knop-primair { background: #D3B27E; color: #1A1A1A; border-color: #D3B27E; }
a.knop[href*="healthcheck"], .hero .knop-wit { background: #D3B27E; color: #1A1A1A; border-color: #D3B27E; }
a.knop[href*="healthcheck"]:hover { background: #F2E8DA; color: #1A1A1A; border-color: #F2E8DA; }
.knop-primair:hover { background: #1A1A1A; color: #F2E8DA; border-color: #1A1A1A; }

/* Badges en gekozen staten die wit op blauw droegen: ivory op charcoal. */
.pakket .badge, .kiezer-dag[aria-pressed=true], .kiezer-uur[aria-pressed=true],
.huis .blok.aan, .transfo .duo figure:last-child figcaption, .duobeeld .etiket.rechts,
.yt-speel, .chat-bel { background: #1A1A1A; border-color: #1A1A1A; color: #F2E8DA; box-shadow: none; }
.veld input:focus, .veld textarea:focus, .veld select:focus,
.nieuwsbrief-form input[type=email]:focus { border-color: #1A1A1A; box-shadow: 0 0 0 3px rgba(26,26,26,0.16); }
.toestemming input { accent-color: #1A1A1A; }

/* De toestemmingsbanner zet eigen kleuren via js/toestemming.js; hier gaan ze mee om. */
body .tdc-toestemming { background: #F2E8DA; color: #1A1A1A; }
body .tdc-toestemming h2 { font-weight: 400; }
body .tdc-toestemming button { color: #F2E8DA; }
body .tdc-toestemming button.tdc-nee { color: #1A1A1A; }
/* Compacter (Timon, 28 sep 2026): de banner blokkeert de pagina niet meer. Wie niet gestoord wordt,
   klikt minder snel "Liever niet" om er vanaf te zijn. Beide knoppen blijven even zichtbaar. */
body .tdc-toestemming { max-width: 360px; padding: 16px 18px 14px; font-size: 14px; }
body .tdc-toestemming h2 { font-size: 17px; margin-bottom: 4px; }
body .tdc-toestemming p { margin-bottom: 12px; }
body .tdc-toestemming button { padding: 9px 14px; font-size: 14px; }
@media (max-width: 600px) {
  body .tdc-toestemming { left: 8px; right: 8px; bottom: 8px; max-width: none; padding: 12px 14px; border-radius: 14px; }
  body .tdc-toestemming p { font-size: 13.5px; line-height: 1.45; }
  body .tdc-toestemming a { width: auto; margin-left: auto; font-size: 12.5px; }
}
body .tdc-toestemming button:hover { background: #D3B27E; border-color: #D3B27E; color: #1A1A1A; }