:root{--primary-dark:#0e1d40;--primary-light:#1f3d80;--primary-50:#eef1f9;--secondary-dark:#1d4ed8;--secondary-light:#60a5fa;--secondary-50:#eff6ff;--text:#0f172a;--text-muted:#475569;--text-light:#64748b;--text-on-dark:#f1f5f9;--text-on-dark-mut:rgba(255,255,255,0.78);--surface:#ffffff;--surface-alt:#f8fafc;--surface-tint:#f1f5f9;--surface-dark:#0e1d40;--border:#e2e8f0;--border-strong:#cbd5e1;--border-focus:var(--primary,#152B5D);--success:#047857;--success-bg:#ecfdf5;--warning:#d97706;--warning-bg:#fffbeb;--danger:#dc2626;--danger-bg:#fef2f2;--font-sans:'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--font-display:'Playfair Display','Inter',serif;--fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:16px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:36px;--fs-hero:clamp(32px,5.6vw,56px);--lh-tight:1.18;--lh-snug:1.35;--lh-normal:1.55;--lh-relaxed:1.7;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px;--shadow-xs:0 1px 2px rgba(15,23,42,.06);--shadow-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);--shadow-md:0 4px 14px rgba(15,23,42,.10);--shadow-lg:0 10px 28px rgba(15,23,42,.12);--shadow-xl:0 20px 48px rgba(15,23,42,.16);--shadow-primary:0 6px 18px rgba(21,43,93,.30);--shadow-accent:0 6px 18px rgba(37,99,235,.35);--ease:cubic-bezier(.2,.8,.2,1);--dur-fast:150ms;--dur:220ms;--dur-slow:360ms}body{font-family:var(--font-sans);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--lh-normal)}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{font-family:var(--font-sans);color:var(--text);line-height:var(--lh-snug);font-weight:800;letter-spacing:-0.01em}h1,.h1{font-weight:900;line-height:var(--lh-tight);letter-spacing:-0.02em}h2,.h2{font-weight:800;line-height:var(--lh-snug)}p,li{color:var(--text-muted);line-height:var(--lh-normal)}a{color:var(--primary,#152B5D);transition:color var(--dur-fast) var(--ease);text-decoration:none}a:hover{color:var(--primary-dark)}*:focus-visible{outline:2px solid var(--secondary,#2563eb);outline-offset:2px;border-radius:var(--r-sm)}.btn,.button,button.btn,a.btn,a.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;font-weight:700;font-size:var(--fs-base);border-radius:var(--r-md);border:none;cursor:pointer;transition:all var(--dur-fast) var(--ease);text-decoration:none;line-height:1.2}.btn-primary,.button.primary,button.primary,a.button-primary,.btn.primary{background:var(--primary,#152B5D) !important;color:var(--surface) !important;box-shadow:var(--shadow-primary)}.btn-primary:hover,.button.primary:hover,button.primary:hover,a.button-primary:hover{background:var(--primary-dark) !important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(21,43,93,.40);color:var(--surface) !important}.btn-accent,.btn-secondary,.button.accent,.button.secondary,.btn.accent,.btn.secondary,.btn-#2563eb,.button-#2563eb{background:var(--secondary,#2563eb) !important;color:var(--surface) !important;box-shadow:var(--shadow-accent)}.btn-accent:hover,.btn-secondary:hover,.button.accent:hover,.btn-#2563eb:hover{background:var(--secondary-dark) !important;transform:translateY(-2px);color:var(--surface) !important}.btn-outline,.btn.outline,.button.outline{background:transparent !important;color:var(--primary,#152B5D) !important;border:2px solid var(--primary,#152B5D) !important}.btn-outline:hover{background:var(--primary,#152B5D) !important;color:var(--surface) !important}.btn-ghost{background:rgba(255,255,255,.10) !important;color:var(--text-on-dark) !important;border:1.5px solid rgba(255,255,255,.55) !important}@media (max-width:768px){.btn,.button,button.btn,a.btn,a.button,input[type=submit],input[type=button]{min-height:44px !important;padding-top:12px !important;padding-bottom:12px !important}}.card,.dv-card,.feature-card,.testimonial-card,article.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur-fast);overflow:hidden}.card:hover,.feature-card:hover,.testimonial-card:hover,article.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=search],input[type=password],input[type=date],textarea,select{font-family:var(--font-sans);font-size:var(--fs-md);color:var(--text);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--r-md);padding:11px 14px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);width:100%;box-sizing:border-box}input:focus,textarea:focus,select:focus{border-color:var(--primary,#152B5D) !important;box-shadow:0 0 0 3px rgba(21,43,93,.14) !important;outline:none}::placeholder{color:var(--text-light);opacity:1}label{color:var(--text);font-weight:600}.req,label .req,.required{color:var(--danger) !important;font-weight:700 !important}@media (max-width:768px){input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=search],input[type=password],textarea,select{font-size:16px !important}}.badge,.tag,.pill{display:inline-block;padding:4px 12px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;letter-spacing:0.04em;text-transform:uppercase}.badge-primary{background:var(--primary,#152B5D);color:var(--surface)}.badge-accent{background:var(--secondary,#2563eb);color:var(--surface)}.badge-success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}.badge-warning{background:#fef3c7;color:#78350f;border:1px solid #fcd34d}.badge-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}.notice,.alert{padding:14px 18px;border-radius:var(--r-md);border-left:4px solid var(--primary,#152B5D);background:var(--surface-alt);color:var(--text)}.notice-info,.alert-info{border-left-color:var(--primary,#152B5D);background:var(--primary-50)}.notice-success,.alert-success{border-left-color:var(--success);background:var(--success-bg);color:#064e3b}.notice-warning,.alert-warning{border-left-color:var(--warning);background:var(--warning-bg);color:#78350f}.notice-danger,.alert-danger,.notice-error,.alert-error{border-left-color:var(--danger);background:var(--danger-bg);color:#7f1d1d}table.dv-table,.table{border-collapse:separate;border-spacing:0;width:100%;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}.table th{background:var(--surface-alt);color:var(--text);font-weight:700;text-align:left;padding:10px 14px;border-bottom:1px solid var(--border)}.table td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text)}.table tr:last-child td{border-bottom:0}.table tr:nth-child(even) td{background:var(--surface-alt)}img{max-width:100%;height:auto}.dv-img-rounded,figure img{border-radius:var(--r-md)}.stars,.rating-stars,[class*="star-"]{color:var(--secondary,#2563eb)}.rating-count,.reviews-count{color:var(--text-muted)}.section,section.hv-section{padding-top:var(--sp-16);padding-bottom:var(--sp-16)}.section-alt,section.hv-section.alt{background:var(--surface-alt)}::selection{background:var(--primary,#152B5D);color:var(--surface)}hr{border:none;border-top:1px solid var(--border);margin:var(--sp-8) 0}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}.card:hover,.feature-card:hover,.btn:hover{transform:none !important}}@media print{header,footer,.header,.footer,nav,.navbar,.dv-fab,[class*="floating"],#ilchat-widget,.ilchat-widget,.skip-link,.scroll-progress{display:none !important}body{color:#000;background:#fff}a{color:#000;text-decoration:underline}.card,.feature-card{box-shadow:none;border:1px solid #ccc}}header.site-header,header.main-header,.topbar,.header,header[role="banner"]{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.96);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);transition:box-shadow .22s ease,background .22s ease}header.site-header.dv-scrolled,header.main-header.dv-scrolled,.topbar.dv-scrolled,.header.dv-scrolled{background:rgba(255,255,255,0.99);box-shadow:0 4px 18px rgba(15,23,42,0.08)}@media (prefers-reduced-motion:no-preference){.dv-fade-in{opacity:0;transform:translateY(14px);transition:opacity 480ms cubic-bezier(.2,.8,.2,1),transform 480ms cubic-bezier(.2,.8,.2,1);will-change:opacity,transform}.dv-fade-in.is-visible{opacity:1;transform:translateY(0)}}@media (max-width:768px){nav.is-open a,.mobile-nav.is-open a,.nav-mobile.open a,.mobile-menu a,.nav-links.open a,[class*="menu-open"] .nav-links a{color:#fff !important;background:rgba(255,255,255,0.04)}nav.is-open a:hover,.mobile-nav.is-open a:hover,.mobile-menu a:hover,.nav-links.open a:hover{background:rgba(255,255,255,0.10);color:#fff !important}}footer.site-footer,footer.main-footer,footer[role="contentinfo"],footer.footer{background:#0e1d40 !important;color:#fff !important}/* 2026-08-09: was var(--secondary) #2563eb !important — blauwe links op een
   donkere footer haalden 3,2:1, onder de norm van 4,5:1. Dit stijlblad wordt
   door 8 sites van deze familie gebruikt en die hebben allemaal een donkere
   footer, dus wit is hier overal het juiste antwoord (12,8:1). Het !important
   blijft staan: zonder dat wint de generieke a-regel weer. */
footer.site-footer a,footer.main-footer a,footer[role="contentinfo"] a{color:rgba(255,255,255,.92) !important}footer.site-footer p,footer.main-footer p,footer.site-footer li,footer.main-footer li,footer.site-footer span,footer.main-footer span{color:rgba(255,255,255,0.85) !important}footer.site-footer h1,footer.site-footer h2,footer.site-footer h3,footer.site-footer h4,footer.site-footer h5,footer.site-footer h6{color:#fff !important}.hero h1,.hero .hero-title,.hero-subtitle,.page-hero h1,.page-hero p{text-shadow:0 2px 18px rgba(0,0,0,0.45)}footer .social-links a,footer .menu-social a{background:rgba(255,255,255,0.08) !important;color:#fff !important;border-radius:8px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}.chat-bubble-tooltip{bottom:calc(80px+env(safe-area-inset-bottom)) !important}@media (max-width:768px){.floating-chat-widget,[class*="floating-chat"]{bottom:calc(80px+env(safe-area-inset-bottom)) !important;right:12px !important}}.admin-login-logo img[src*="sites.itlive.nl/assets/images/logo-header.svg"]{display:none}.admin-login-logo::before{content:attr(data-brand);font-size:24px;font-weight:800;color:var(--primary,#152B5D)}@media (max-width:768px){.nav-logo,.nav-logo-img,header .logo,header .site-logo,.navbar-brand,header img.logo,header a.logo{max-width:200px !important;max-height:56px !important;width:auto !important;height:auto !important;object-fit:contain !important}header .logo a,.navbar-brand{display:inline-block !important;flex:0 0 auto !important}}

/* ── ITL-LEESBAARHEID 2026-08-09 ─────────────────────────────────────────────
   Deze site laadt per pagina ANDERE stijlbladen: de homepage klassiek.css, de
   sitemap styles.css + premium.css. Alleen design-system.css komt overal langs,
   dus paginabrede correcties horen hier — anders repareer je één pagina en
   blijft de rest staan (dat gebeurde: de sitemap-iconen bleven onleesbaar nadat
   klassiek.css al gecorrigeerd was).

   1. .sitemap-og-icon/.sitemap-og-badge stonden op `background:var(--primary-light);
      color:var(--primary)`. Dat werkt alleen als --primary-light licht IS, maar hij
      bevat #1f3d80 — donkerder dan --primary #152B5D zelf. Gaf 1,33:1.
   2. De routewidget zet .dvh-card-title/.dvh-tab op var(--accent) #2563eb bovenop
      een donkerblauw vlak (2,9 en 3,3:1). De widget spuit zijn eigen <style> in,
      dus !important is hier de enige manier.                                   */
.sitemap-og-icon,
.sitemap-og-icon i,
.sitemap-og-badge {
    color: #fff !important;
}
.sitemap-og-icon,
.sitemap-og-badge {
    background: #1f3d80 !important;
}
.sitemap-og-badge {
    border-color: rgba(255,255,255,.25) !important;
}
.dvh-card-title,
.dvh-card .dvh-card-title,
.dvh-tab,
.dvh-tab.active {
    color: #fff !important;
}

/* Nieuwsbrief-knop: wit op 85% over #2563eb haalt 4,19:1 — net onder de norm. */
.footer-newsletter .fn-btn,
.footer-newsletter .fn-btn span {
    color: #fff !important;
}

/* ── ITL-GRIJSTINTEN 2026-08-09 ──────────────────────────────────────────────
   Deze staan in design-system.css (overal geladen) mét !important, omdat de
   oorspronkelijke waarden uit inline <style>-blokken komen die ná de externe
   stijlbladen staan. Elke vervanger is doorgerekend op minstens 4,5:1.        */
.vg-anderen, .vg-anderen.vg-nee { color:#64748b !important; }   /* was #94a3b8  2,45 → 4,55 */
.calc-left em, .calc-left small, .rb-pct { color:#6b7280 !important; }  /* was #999/#888 → 4,62 */
.vg-wij.vg-ja { color:#15803d !important; }                     /* was #27ae60  2,75 → 4,79 */
.rb-stars { color:#2563eb !important; } /* [15-08-2026] was #b45309 (donkergoud, een
   rest van vóór de blauw-omzetting). Blauw haalt 5,17:1 op wit — beter dan de 4,80
   van het goud, en het past bij de rest van de site. */                         /* was #60a5fa  1,96 → 4,80 */
.vg-kenmerk { color:#475569 !important; }                       /* was #64748b  4,34 → 6,4  */
a.btn-#2563eb, a.dsb-cta { background:#2563eb !important; color:#fff !important; }
.hero-shimmer { color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* [15-08-2026] Mobiele aanraakvlakken — hoort HIER omdat design-system.css als enige
   op álle pagina's geladen wordt. De homepage gebruikt klassiek.css, de overige
   pagina's styles.css + premium.css; een regel in één van die twee raakt dus maar
   een deel van de site. Gemeten op 390px: knoppen van 16–36px hoog. Onder ~44px
   mis je ze met je duim. Alleen de hoogte opgerekt; vormgeving blijft gelijk. */
@media (max-width:640px){
  .site-topbar-link,.site-topbar-lang,
  .hm-pill,.dvh-tab,.dvh-mini-btn,.reviews-bar-more{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .hic-btn{min-width:44px;min-height:44px}
  .back-to-top{width:48px;height:48px}
}
/* [15-08-2026] Wizard- en cookieknoppen. De keuzeknoppen in de offertewizard
   ('Begane grond', '1e etage', …) waren 36px hoog en staken bovendien 14px buiten
   beeld; dat zijn juist de knoppen waar de klant het vaakst op tikt. */
@media (max-width:640px){
  .wz-choice{min-height:44px;max-width:100%;box-sizing:border-box}
  .cb-btn,.cookie-btn,.cookiebar button{min-height:44px}
}
/* [15-08-2026] Laatste te kleine knoppen uit de mobiele scan: etage-keuze in de
   offertewizard (.wz-etage-btn, 36px) en de formulierknoppen (.fs-btn). */
@media (max-width:640px){
  .wz-etage-btn,.fs-btn{min-height:44px}
}
/* [15-08-2026] Cookiebanner-knoppen: 40px hoog, net onder de 44px-ondergrens.
   De knoppen hebben geen klasse (inline stijl in cookie-banner.php), vandaar
   dat ze via hun container worden aangesproken. */
@media (max-width:640px){
  #dv-cookie-banner button,#cookieBanner button,.cookie-banner button{min-height:44px}
}
/* [15-08-2026] Tabellen op mobiel. Op de 636 routepagina's is de tabelinhoud breder
   dan het scherm (rijen liepen tot 409px op 390px); op /diensten/ zelfs tot 607px.
   Dat trok de hele pagina scheef. Nu schuift de tabel binnen zijn eigen kader —
   de gegevens blijven volledig leesbaar, de pagina niet meer.
   `display:block` is nodig om overflow op een <table> te laten werken. */
@media (max-width:640px){
  /* `overflow-x:auto` alleen werkt niet: met overflow-y op `visible` rekent de
     browser de x-as terug naar `hidden` — de inhoud wordt dan afgekapt in plaats
     van schuifbaar. Beide assen zetten lost dat op. */
  table{display:block;width:100%;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  table thead,table tbody,table tr{width:max-content;min-width:100%}
}
/* [15-08-2026] Vertrouwensbalk op mobiel. Staat HIER omdat de homepage alleen
   klassiek.css + design-system.css laadt — client-widgets.css komt daar niet.
   Een flexrij van 14 items met gap 40px werd 2790px breed op een scherm van 390;
   alles behalve de eerste twee viel buiten beeld. */
@media (max-width:640px){
  .trust-grid{flex-wrap:wrap!important;gap:10px 16px!important;justify-content:center}
  .trust-item{flex:0 1 auto}
}
/* [15-08-2026] Leesbaarheid op mobiel: een reeks labels stond op 10,9–11,7px.
   Onder 12px wordt tekst op een telefoon moeilijk leesbaar (en iOS zoomt bij
   invoervelden zelfs in). Opgetrokken naar 12px — klein genoeg om ondergeschikt
   te blijven, groot genoeg om te lezen. */
@media (max-width:640px){
  .rb-row,.rb-stars,.rb-pct,.hero-badge,.callback-trust-line,.google-label{font-size:12px}
}
/* [15-08-2026] Laatste aanraakvlakken: .fs-btn was 38px BREED (hoogte was al goed)
   en de contactlink in de voettekst 38px hoog. */
@media (max-width:640px){
  .fs-btn{min-width:44px}
  .footer-contact-link{min-height:44px;display:inline-flex;align-items:center}
}
/* [15-08-2026] Voettekst-links op mobiel: 33px hoog (22 stuks). Met een duim mis je
   die makkelijk, en ze staan dicht op elkaar. Alleen de tikhoogte opgerekt —
   de tekst zelf blijft even groot, dus de voettekst wordt niet langer dan nodig. */
@media (max-width:640px){
  .footer-links a{min-height:44px;display:inline-flex;align-items:center}
  .footer-links li{margin:0}
}
/* [15-08-2026] Keuzeknoppen in de wizard staken buiten beeld: de rasterkolommen waren
   samen 356px in een vak van 294. Zonder `minmax(0,…)` krimpt een rasteritem niet
   onder de breedte van zijn eigen inhoud — vandaar dat "Hoekwoning" en "Overig"
   eruit vielen. */
@media (max-width:640px){
  .wz-choices{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wz-choice{min-width:0;word-break:break-word;hyphens:auto}
}
/* [15-08-2026] Tellers voor uren en medewerkers. De CSS zei 36x36, maar gemeten was
   het 21x35: de knoppen werden platgedrukt door hun flex-container. Met een duim
   raak je die niet. Nu 44x44 en niet-krimpbaar; het invoerveld ernaast blijft
   handmatig te typen. */
@media (max-width:640px){
  .stepper{width:auto}
  /* 46px: de rand van .stepper (1,5px per kant) knabbelt er anders 2px af,
     waardoor het zichtbare vlak op 42px uitkwam. */
  .stepper button{min-width:46px;width:46px;height:46px;flex:0 0 46px;font-size:1.25rem;box-sizing:border-box}
  .stepper input{height:46px}
  .stepper input{min-width:56px;height:44px;font-size:1.05rem}
}
/* [15-08-2026] Schuifregelaar naast de uren-/medewerkerteller. Alleen op smalle
   schermen: op een telefoon sleep je sneller dan dat je twintig keer op + tikt.
   De teller en het invoerveld blijven bestaan, dus wie precies wil zijn kan typen. */
.stepper-slider{display:none}
@media (max-width:640px){
  /* De twee velden staan naast elkaar in een raster van 300px, dus elk 144px.
     Op een telefoon onder elkaar: dan is er ruimte om echt te slepen. */
  .calc-row-fields{grid-template-columns:1fr!important}
  .calc-field-wrap{flex-wrap:wrap}
  .stepper-slider{display:block;width:100%;margin-top:10px;height:32px;
    -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
  .stepper-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#e2e8f0}
  .stepper-slider::-moz-range-track{height:6px;border-radius:3px;background:#e2e8f0}
  .stepper-slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;
    border-radius:50%;background:#2563eb;border:3px solid #fff;margin-top:-11px;
    box-shadow:0 2px 6px rgba(37,99,235,.4)}
  .stepper-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;
    background:#2563eb;border:3px solid #fff;box-shadow:0 2px 6px rgba(37,99,235,.4)}
}