/* =====================================================================
   Lodewijk.FRL — shared.css
   Gedeelde basis voor alle vier thema's. Definieert CSS-variabelen,
   de shell-indeling (topbalk, linker sidebar, hoofdpaneel, rechter
   sidebar, footer) en herbruikbare componenten. Kleuren en maten
   worden per thema overschreven in theme-*.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens — centrale variabelen (CMS-instelbaar)
   --------------------------------------------------------------------- */
:root {
  /* Typografie */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-root: 15px;

  /* Afstanden */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Shell-maten */
  --topbar-h: 46px;
  --sidebar-w: 248px;
  --rightbar-w: 240px;
  --panel-radius: 4px;
  --border-w: 1px;

  /* Statuskleuren (consistent over alle thema's) */
  --st-ok: #1f9d55;
  --st-ok-bg: rgba(31,157,85,.12);
  --st-warn: #d98211;
  --st-warn-bg: rgba(217,130,17,.14);
  --st-alert: #cf3a2f;
  /* Als losse tekst op een paneel (foutmelding bij een veld); de donkere stand zet hem lichter. */
  --st-alert-tekst: #cf3a2f;
  --st-alert-bg: rgba(207,58,47,.12);
  --st-info: #2563c9;
  --st-info-bg: rgba(37,99,201,.12);
  --st-idle: #7a8391;
  --st-idle-bg: rgba(122,131,145,.14);

  /* Semantische kleuren — lichte basis (thema's overschrijven dit) */
  --bg: #eef1f5;
  --bg-2: #e3e8ef;
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --ink: #1a2230;
  --ink-2: #47546a;
  --ink-3: #6b7688;
  --border: #d3dae4;
  --border-strong: #b7c1cf;
  --accent: #1f4e8c;
  --accent-2: #2f6fd0;
  /* Tekstkleur van links, apart van het VLAK `--accent-2`. Een vlak moet witte letters kunnen
     dragen en is dus donker; een link staat op een kaart en moet in het donker juist licht zijn.
     Eén kleur voor allebei betekent dat er altijd één van de twee slecht leesbaar is. */
  --link: #2f6fd0;
  --accent-hover: #1f4e8c;
  --accent-ink: #ffffff;
  --shadow-1: 0 1px 2px rgba(20,30,48,.06);
  --shadow-2: 0 4px 14px rgba(20,30,48,.10);
  --focus-ring: 0 0 0 3px rgba(47,111,208,.45);
}

/* ---------------------------------------------------------------------
   2. Reset & basis
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { font-size: var(--fs-root); scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  /* Integratie-fix: 'hidden' maakt de body een scrollcontainer waardoor de
     sticky topbar nergens tegen plakt; 'clip' knipt horizontaal net zo hard
     maar laat het scrollen (en dus sticky) aan de viewport. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.18; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-hover, var(--accent)); text-decoration: underline; }
img { max-width: 100%; display: block; }
code, .mono { font-family: var(--font-mono); }

/* Toegankelijke focus */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 3px;
}
/* Alleen de kleur; de werking staat in /assets/shared/css/verspringlink.css. */
.skip-to-content { background: var(--accent); color: #fff; }

/* ---------------------------------------------------------------------
   3. Topbalk
   --------------------------------------------------------------------- */
/* Springen naar een anker (#diensten, #projecten, #certificeringen, #bericht) moet
   onder de plakkerige kopbalk hieronder uitkomen, niet erachter.

   Ook :target en niet alleen section[id]: een anker hoeft geen <section> te zijn. Op de
   contactpagina is #bericht bijvoorbeeld een <h2>, en die kwam precies achter de balk
   terecht. Dat was al zo, maar met een hogere balk (v014.11.147) verdween er nog meer
   achter, dus het is hier meteen rechtgezet.

   :target geldt bewust voor élk anker en niet alleen voor een sectie: welke soort element
   een id draagt is aan het sjabloon, en een lijst bijhouden zou steeds achterlopen. Het
   zet alleen een afstand bij het springen, dus er valt niets mee te breken. */
section[id],
:target { scroll-margin-top: calc(var(--topbar-h) + 12px); }

.topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-4);
  background: var(--panel);
  border-bottom: var(--border-w) solid var(--border);
  font-size: 13px;
}
.topbar__group { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__group--right { margin-left: auto; }

.system-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--st-ok-bg);
  color: var(--st-ok); font-weight: 600; font-size: 12px;
}
.pulse-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--st-ok); position: relative; flex: none;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--st-ok); animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* icon knop */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--ink-2);
  border-radius: 4px; cursor: pointer; font-size: 16px;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Account/inloggen in de topbar: ingelogd = fotootje + naam (naar /admin),
   uitgelogd = het icon-btn-knopje (naar /admin/login). Zelfde patroon als de
   andere portalthema's. */
.topbar__account {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 4px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel-2); color: var(--ink-2);
  text-decoration: none; font-size: 12px; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.topbar__account:hover { border-color: var(--accent); color: var(--accent-hover, var(--accent)); text-decoration: none; }
.topbar__account-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--accent); color: #fff; font-size: 15px;
}
.topbar__account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.topbar__account-name { white-space: nowrap; }



.theme-switch button { font-size: 14px; }



/* Schaal de inhoud (px-teksten schalen mee via zoom) */
/* De standen en hun percentages staan in _local_portal/css/letterschaal.css, voor elke site
   hetzelfde. Hier alleen wát er meeschaalt: bewust de schil en de voet, en niet de body -- op
   de body raakt de plakkende kopbalk zijn houvast kwijt. */
.shell, .site-footer-v10 { zoom: var(--letterschaal, 1); }

/* ---------------------------------------------------------------------
   4. Shell-indeling
   --------------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rightbar-w);
  align-items: stretch;
}
.shell--no-aside { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
/* Footer-positie (Content → Footer, footer_position_mode). Lodewijk laadt
   themes/default/theme.css niet, dus dezelfde mechaniek als de portalthema's staat hier
   expliciet. De body-class (footer-mode-bottom|sticky|normal) wordt in layout.php gezet.
   - bottom (default): footer onderaan het venster, ook bij korte pagina's. De shell groeit
     mee, zodat de sidebar-achtergrond doorloopt tot aan de footer.
   - sticky: vaste balk onderaan; de inhoud krijgt onderruimte zodat er niets achter valt.
     Op smalle schermen valt hij terug op normaal (een vaste balk kost daar te veel hoogte).
   - normal: geen extra CSS — de footer volgt gewoon de inhoud. */
body.footer-mode-bottom { min-height: 100vh; display: flex; flex-direction: column; }
body.footer-mode-bottom .shell { flex: 1 0 auto; }
body.footer-mode-bottom .site-footer-v10 { margin-top: auto; }
body.footer-mode-sticky .site-footer-v10 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; box-shadow: 0 -12px 30px rgba(20, 32, 51, .10); }
body.footer-mode-sticky .main { padding-bottom: 200px; }
@media (max-width: 991.98px) {
  body.footer-mode-sticky .site-footer-v10 { position: static; box-shadow: none; }
  body.footer-mode-sticky .main { padding-bottom: 0; }
}
/* Menu-achtergrond doortrekken tot de footer: de sidebar is position:sticky en rekt dus
   niet mee. Een verloop op de shell kleurt de linkerkolom (paneelkleur + scheidingslijn)
   over de volle hoogte, ook onder de sticky sidebar. Alleen op desktop; de grens sluit
   precies aan op die van de sidebar zelf (max-width 991.98px). Stond hij op 992.02px, dan
   was 992px het ene venster waar de kolom er wél staat maar zijn achtergrond niet: een
   zichtbare naad onder de zijbalk. */
@media (min-width: 992px) {
  body.footer-mode-bottom .shell {
    background: linear-gradient(to right,
      var(--panel) 0,
      var(--panel) calc(var(--sidebar-w) - var(--border-w)),
      var(--border) calc(var(--sidebar-w) - var(--border-w)),
      var(--border) var(--sidebar-w),
      transparent var(--sidebar-w));
  }
}
/* Reviews-band (homepage) */
.reviews-band { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center; }
.reviews-band .rating-box { text-align: center; padding-right: var(--sp-5); border-right: 1px solid var(--border); }
.reviews-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); transition: opacity .4s ease; }
.reviews-quotes.fade { opacity: 0; }
.reviews-quotes blockquote { margin: 0; font-size: 13.5px; color: var(--ink-2); border-left: 3px solid var(--accent-2); padding-left: 12px; }
.reviews-quotes blockquote .who { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
/* Hulp-strip */
.help-strip { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.help-strip__title { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.help-strip__title i { font-size: 20px; color: var(--link); }
.help-strip__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.help-strip__note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) {
  .reviews-band { grid-template-columns: 1fr; }
  .reviews-band .rating-box { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 var(--sp-4); }
  .reviews-quotes { grid-template-columns: 1fr; }
}
.sidebar-left {
  background: var(--panel);
  border-right: var(--border-w) solid var(--border);
  display: flex; flex-direction: column;
}
.sidebar-top {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.sidebar-top::-webkit-scrollbar { width: 0; height: 0; display: none; }
.main { min-width: 0; padding: var(--sp-5); }
.sidebar-right {
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  background: var(--panel);
  border-left: var(--border-w) solid var(--border);
  padding: var(--sp-4);
}

/* Navigatie */
.nav-section { padding: var(--sp-3) var(--sp-3) 0; }
.nav-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); font-weight: 600; padding: 0 var(--sp-2) var(--sp-2);
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 4px;
  color: var(--ink-2); font-size: 14px; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.nav-list a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.nav-list a i { font-size: 17px; width: 20px; text-align: center; color: var(--ink-3); flex: none; }
.nav-list a[aria-current="page"] {
  background: var(--accent); color: var(--accent-ink);
  border-left-color: var(--accent-2); font-weight: 600;
}
.nav-list a[aria-current="page"] i { color: var(--accent-ink); }
.nav-list a .nav-badge {
  margin-left: auto; font-size: 10px; font-family: var(--font-mono);
  background: var(--st-ok-bg); color: var(--st-ok); padding: 1px 6px; border-radius: 3px;
}
/* Inklapbare navigatiegroep */
.nav-group { border: 0; }
.nav-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 4px; color: var(--ink-2); font-size: 14px; font-weight: 500;
  border-left: 3px solid transparent;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary > i:first-child { font-size: 17px; width: 20px; text-align: center; color: var(--ink-3); flex: none; }
.nav-group > summary:hover { background: var(--panel-2); color: var(--ink); }
.nav-group > summary .chev { margin-left: auto; font-size: 12px; color: var(--ink-3); transition: transform .2s ease; }
.nav-group[open] > summary .chev { transform: rotate(180deg); }
.nav-group[open] > summary { color: var(--ink); font-weight: 600; }
.nav-group .nav-list { margin: 1px 0 4px; }
.nav-group .nav-list a { padding-left: 33px; font-size: 13.5px; }
.nav-group[open] > .nav-list { animation: navSlide .42s cubic-bezier(.22,.61,.36,1); }
@keyframes navSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Zachte in- én uitklap waar de browser dit ondersteunt (Chrome 129+, e.d.) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .nav-group::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .4s cubic-bezier(.22,.61,.36,1), content-visibility .4s allow-discrete;
  }
  .nav-group[open]::details-content { block-size: auto; }
  .nav-group[open] > .nav-list { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-group[open] > .nav-list { animation: none; } }

/* Sidebar-voet */
.sidebar-foot {
  margin-top: auto; padding: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sidebar-foot .kv { display: flex; justify-content: space-between; gap: 8px; }
.sidebar-foot .kv b { font-weight: 600; color: var(--ink); }
.sidebar-foot .ver { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* ---------------------------------------------------------------------
   5. Panelen & kaarten
   --------------------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: var(--border-w) solid var(--border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-1);
}
.panel + .panel { margin-top: var(--sp-5); }
.panel__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
/* De kop van een paneel in de merkkleur, net als de iconen ernaast (verzoek Theo): het paars van de
   lotus in het logo. Via `--link` en niet via een eigen kleur, zodat hij meebeweegt met wat er bij
   Instellingen -> Kleuren is gekozen en in de nachtmodus vanzelf lichter wordt. */
.panel__head h2, .panel__head h3 { font-size: 15px; color: var(--link); }
.panel__head .panel__meta { margin-left: auto; font-size: 12px; color: var(--ink-2); font-family: var(--font-mono); }
.panel__body { padding: var(--sp-4); }
.panel__title-ico { color: var(--link); font-size: 18px; }

.section-title {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--sp-4);
}
.section-title h2 { font-size: 20px; }
.section-title .hint { font-size: 12.5px; color: var(--ink-3); }
.section-title .rule { flex: 1; height: 1px; background: var(--border); }

/* Statuslabel */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 3px;
  font-family: var(--font-mono); letter-spacing: .01em;
}
.status i { font-size: 12px; }
.status--ok { color: var(--st-ok); background: var(--st-ok-bg); }
.status--warn { color: var(--st-warn); background: var(--st-warn-bg); }
.status--alert { color: var(--st-alert); background: var(--st-alert-bg); }
.status--info { color: var(--st-info); background: var(--st-info-bg); }
.status--idle { color: var(--st-idle); background: var(--st-idle-bg); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--ok { background: var(--st-ok); } .dot--warn { background: var(--st-warn); }
.dot--alert { background: var(--st-alert); } .dot--info { background: var(--st-info); }
.dot--idle { background: var(--st-idle); }

/* ---------------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------------- */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  overflow: hidden;
}
.hero__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hero__eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--link);
  display: inline-flex; align-items: center; gap: 8px;
}
.hero h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; }
.hero__sub { font-size: 16px; color: var(--ink-2); max-width: 68ch; }
/* Regio-regel onder de introzin. De negatieve marge haalt de flex-gap van .hero__body
   (16px) er weer af: deze regel hoort visueel bij de zin erboven, niet als los blok. */
.hero__region {
  margin-top: calc(var(--sp-4) * -1 + 6px); font-size: 16px; font-weight: 600;
  color: var(--ink); display: flex; align-items: baseline; gap: 8px;
}
.hero__region .bi { color: var(--link); font-size: 15px; flex: none; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero__media {
  position: relative; display: flex; flex-direction: column; min-height: 260px; border-left: 1px solid var(--border);
  background: var(--panel-2); min-width: 0; overflow: hidden;
}
.hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.hero__stats--4 { grid-template-columns: repeat(4, 1fr); }
.hero__stats .stat {
  padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--border);
}
.hero__stats .stat:last-child { border-right: 0; }
.stat__num { font-size: 26px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -.02em; }
/* Sterren bij een beoordeling: twee rijen over elkaar, de gouden afgesneden op een
   percentage. Zo is elke tussenwaarde te tonen zonder halve-ster-plaatjes. */
.stars { position: relative; display: inline-block; vertical-align: middle; line-height: 1; white-space: nowrap; }
.stars__leeg, .stars__vol { display: block; }
.stars__leeg i { color: var(--border-strong); }
.stars__vol {
  position: absolute; inset: 0 auto 0 0; overflow: hidden;
  /* De gouden rij is even breed als de grijze en wordt alléén door de inline
     breedte afgesneden; zonder deze regel zou hij zelf smaller worden en de
     sterren erin herschikken. */
  max-width: none;
}
.stars__vol i { color: var(--st-warn); }
.stars i { font-size: 14px; letter-spacing: 1px; }
.stat__num--rating { display: flex; align-items: center; gap: 8px; font-size: 24px; }
.stat__num--rating .stars i { font-size: 15px; }
/* Het cijferblok als link: verder identiek aan .stat, dus alleen het linkgedrag
   terugzetten naar hoe de rest van het blok eruitziet. */
a.stat--link { display: block; color: inherit; text-decoration: none; transition: background .12s; }
a.stat--link:hover { background: var(--panel-2); }
a.stat--link:hover .stat__hint { color: var(--link); }
/* Het zinnetje onder een klikbaar cijferblok kost op een telefoon twee regels, en
   dat duwde de tekening van de bus 66 pixels verder onder de vouw. Daaronder blijft
   het blok gewoon aantikbaar; de pijl naast het cijfer laat zien dat er iets achter
   zit, en die kost geen extra hoogte. */
.stat__hint { display: none; font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
@media (min-width: 681px) { .stat__hint { display: block; } }
.stat__pijl { font-size: .5em; color: var(--ink-3); margin-left: 6px; vertical-align: middle; }
@media (min-width: 681px) { .stat__pijl { display: none; } }
a.stat--link:hover .stat__pijl { color: var(--link); }
.stat__hint .bi { font-size: 10px; }
.rating__link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--link); text-decoration: none; font-weight: 600; }
.rating__link:hover { text-decoration: underline; }
.rating__link .bi { font-size: 10px; }
.stat__label { font-size: 12.5px; color: var(--ink-2); }

/* Buttons */
.btn { --bs-btn-border-radius: 4px; font-weight: 600; }
.btn-brand {
  background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink);
}
.btn-brand:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border-strong); color: var(--ink);
}
.btn-ghost:hover { background: var(--panel-2); color: var(--ink); border-color: var(--ink-3); }

/* ---------------------------------------------------------------------
   7. Diensten-tegels
   --------------------------------------------------------------------- */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.service-tile {
  --tile: var(--accent-2);
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--panel); overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* getinte hoeklijn bovenaan in de huiskleur van de dienst */
.service-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--border-strong); opacity: .9;
}
.service-tile:hover, .service-tile:focus-visible {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow-2); border-color: var(--border-strong);
}
.service-tile__ico {
  position: relative; overflow: hidden;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; font-size: 29px; margin-bottom: 4px;
  color: var(--tile);
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tile) 20%, var(--panel)), color-mix(in srgb, var(--tile) 7%, var(--panel)));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--tile) 55%, transparent),
    inset 0 0 0 6px color-mix(in srgb, var(--tile) 10%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* fijne technische rastertextuur achter het icoon (zelfgemaakt) */
.service-tile__ico::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--tile) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tile) 22%, transparent) 1px, transparent 1px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
  opacity: .5;
}
.service-tile__ico > i { position: relative; z-index: 3; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
/* Diensttegel met grafisch ontwerp (line-art in huiskleur, geen foto) */
.service-tile__img { height: 120px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; padding: 10px; transition: border-color .15s; }
.service-tile__graphic { width: 100%; height: 100%; display: block; color: var(--tile); transform: scale(1.14); transform-origin: center; }
.service-tile__graphic .ln { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.service-tile__graphic .tn { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .6; stroke-linecap: round; }
.service-tile__graphic .fl { fill: currentColor; }
.service-tile__graphic .du { fill: currentColor; opacity: .34; }
.service-tile__graphic .du2 { fill: currentColor; opacity: .6; }
.service-tile__graphic .dw { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-tile__graphic .fw { fill: #fff; fill-opacity: .9; }
/* Isometrische illustratie (drawn, 3D-look) */
.service-tile__graphic .iso-t { fill: currentColor; }
.service-tile__graphic .iso-l { fill: currentColor; opacity: .66; }
.service-tile__graphic .iso-r { fill: currentColor; opacity: .42; }
.service-tile__graphic .iso-d { fill: none; stroke: #fff; stroke-opacity: .62; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-tile:hover .service-tile__img { border-color: var(--border-strong); }
/* roterende lichtsweep bij hover (premium, geen afbeelding) */
.service-tile__ico::after {
  content: ""; position: absolute; inset: -35%; z-index: 2; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0 62%,
    color-mix(in srgb, var(--tile) 42%, transparent) 80%,
    color-mix(in srgb, #fff 65%, transparent) 88%,
    transparent 92% 100%);
  opacity: 0; transition: opacity .3s ease;
}
.service-tile:hover .service-tile__ico {
  transform: scale(1.06);
  box-shadow:
    inset 0 0 0 2px var(--tile),
    inset 0 0 0 6px color-mix(in srgb, var(--tile) 14%, transparent),
    0 6px 18px color-mix(in srgb, var(--tile) 30%, transparent);
}
.service-tile:hover .service-tile__ico::after { opacity: .9; animation: icoSweep 2.8s linear infinite; }
.service-tile:hover .service-tile__ico > i { transform: translateY(-2px) scale(1.08); }
@keyframes icoSweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .service-tile:hover .service-tile__ico::after { animation: none; }
}
.service-tile__ico img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
  background: #fff;
}
.service-tile h3 { font-size: 18px; color: var(--ink); }
.service-tile p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.service-tile .service-tile__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px;
}
.service-tile .go { color: var(--ink-2); font-weight: 600; }

/* Stat-band / KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.kpi {
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--panel-radius);
  background: var(--panel); display: flex; flex-direction: column; gap: 4px;
}
.kpi__num { font-size: 30px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -.02em; }
.kpi__label { font-size: 13px; color: var(--ink-2); }
.kpi i { color: var(--link); font-size: 18px; }

/* Statuslijst */
.status-list { display: flex; flex-direction: column; }
.status-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.status-row:last-child { border-bottom: 0; }
.status-row .name { display: flex; align-items: center; gap: 8px; }
.status-row .name i { color: var(--ink-3); font-size: 15px; }
.status-row .status { margin-left: auto; }

/* Progress / kleine grafiek helper */
.bar { height: 8px; background: var(--panel-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.bar > span { display: block; height: 100%; background: var(--st-ok); }

/* ---------------------------------------------------------------------
   Blueprint-illustraties (technische line-art, kleurt mee per thema)
   --------------------------------------------------------------------- */
.blueprint {
  width: 100%; height: 100%; display: block; color: var(--link);
  background-color: var(--panel-2);
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
}
.blueprint .bp-line { stroke: currentColor; fill: none; stroke-width: 2; opacity: .8; }
.blueprint .bp-thin { stroke: currentColor; fill: none; stroke-width: 1.2; opacity: .45; }
.blueprint .bp-fill { fill: currentColor; opacity: .8; }
.blueprint .bp-soft { fill: color-mix(in srgb, var(--accent-2) 12%, transparent); stroke: none; }
.blueprint .bp-logo path { fill: color-mix(in srgb, var(--accent-2) 22%, transparent); stroke: currentColor; stroke-width: 1.2; }
.blueprint .bp-label { fill: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
.blueprint .bp-note { fill: var(--ink-3); font-family: var(--font-mono); font-size: 9px; opacity: .7; }
/* stromende leidingen */
.blueprint .bp-flow { stroke: var(--accent-2); fill: none; stroke-width: 3; stroke-dasharray: 5 7; animation: bpFlow 1.5s linear infinite; opacity: .7; }
@keyframes bpFlow { to { stroke-dashoffset: -24; } }
/* pulserende meetpunten */
.blueprint .bp-hot { fill: var(--st-ok); }
.blueprint .bp-hot-ring { fill: none; stroke: var(--st-ok); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: bpPulse 2.4s ease-out infinite; }
@keyframes bpPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
.blueprint .bp-hot-2 { animation-delay: .8s; }
.blueprint .bp-hot-3 { animation-delay: 1.6s; }
/* rondgaande diensten-tour (hero) */
.blueprint .bp-dot { fill: var(--st-ok); stroke: var(--panel-2); stroke-width: 1.5; opacity: .35; transition: opacity .35s ease; }
.blueprint .bp-dot.active { opacity: 1; }
.blueprint .bp-tour-glow { fill: var(--st-ok); opacity: .16; transition: cx .5s ease, cy .5s ease; }
.blueprint .bp-tour-ring { fill: none; stroke: var(--st-ok); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: cx .5s ease, cy .5s ease; animation: bpTourPulse 2.6s ease-out infinite; }
@keyframes bpTourPulse { 0% { transform: scale(.5); opacity: .85; } 75% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
.blueprint .bp-tour-caption { transition: opacity .3s ease; }
/* extra scene-animaties */
.blueprint .bp-spin { transform-box: fill-box; transform-origin: center; animation: bpSpin 7s linear infinite; }
@keyframes bpSpin { to { transform: rotate(360deg); } }
.blueprint .bp-blink { animation: bpBlink 1.8s ease-in-out infinite; }
@keyframes bpBlink { 0%,100% { opacity: .9; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .blueprint .bp-spin, .blueprint .bp-blink { animation: none; } }
/* hero-diavoorstelling */
.hero-slides { position: relative; width: 100%; flex: 1; min-height: 240px; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide .blueprint { width: 100%; height: 100%; }
.hero-slide .bp-note { font-size: 12px; opacity: .9; fill: var(--ink-2); font-weight: 500; }
/* bus-foto slide */
.bus-photo { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px 14px 24px; background-color: var(--panel-2); background-image: linear-gradient(color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.bus-photo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.bus-photo .bus-cap { position: absolute; left: 16px; bottom: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
/* bediening + tijdlijn */
.hero-controls { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--panel); min-width: 0; }
.hero-controls .nav-btn { flex: none; width: 30px; height: 30px; border: 1px solid var(--border); background: var(--panel-2); color: var(--ink-2); border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: background .12s, color .12s, border-color .12s; }
.hero-controls .nav-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.hero-timeline { display: flex; gap: 8px; flex: 1; min-width: 0; }
.hero-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 4px 0 0; cursor: pointer; text-align: left; }
.hero-seg .seg-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; position: relative; }
.hero-seg .seg-bar > i { display: block; position: absolute; inset: 0; width: 0; background: var(--accent-2); }
.hero-seg .seg-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.hero-seg:hover .seg-label { color: var(--ink); }
.hero-seg.active .seg-label { color: var(--link); font-weight: 600; }
.hero-seg.active .seg-bar { background: color-mix(in srgb, var(--accent-2) 22%, var(--border)); }
@media (max-width: 680px) { .hero-seg .seg-label { display: none; } .hero-seg { padding-top: 0; } }

/* Projecten subtieler op de homepage */
.project-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card__media .blueprint .bp-flow { animation: none; opacity: .35; }
.project-card__media .blueprint .bp-line { stroke-width: 1.6; opacity: .7; }
.project-card__media .blueprint .bp-label { opacity: .8; }

/* Roulerende review (compact) */
.review-rot { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); border-left: 3px solid var(--accent-2); padding: 2px 0 2px 10px; min-height: 46px; opacity: 1; transition: opacity .4s ease; }
.review-rot.fade { opacity: 0; }
.review-rot .who { display: block; margin-top: 5px; color: var(--ink-3); font-size: 11px; font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  .blueprint .bp-flow, .blueprint .bp-hot-ring, .blueprint .bp-tour-ring { animation: none; }
}

/* ---------------------------------------------------------------------
   8. Projecten
   --------------------------------------------------------------------- */
/* Projecten */
.section-band {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: var(--sp-5);
}
/* projectillustraties: papier-look, past zich aan dag/nacht aan */
.project-card__media .blueprint { opacity: .82; background-color: var(--panel); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.chip {
  border: 1px solid var(--border); background: var(--panel);
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
  color: var(--ink-2); font-weight: 500; transition: all .12s;
}
.chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip:hover:not([aria-pressed="true"]) { border-color: var(--accent-2); color: var(--ink); }

.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.project-card {
  display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: var(--panel-radius); overflow: hidden; background: var(--panel);
  transition: box-shadow .15s, border-color .15s;
}
.project-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.project-card__media { aspect-ratio: 16/10; }
.project-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.project-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
.project-card h3 { font-size: 15px; color: var(--ink); }
.project-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }

/* SVG placeholder (gestreept) */
.ph {
  width: 100%; height: 100%; min-height: 120px; display: block;
  background:
    repeating-linear-gradient(45deg, var(--panel-2) 0 10px, var(--bg-2) 10px 20px);
  position: relative;
}
/* Een gevuld beeldvak. De omlijsting eromheen bepaalt de maat (die stond er al voor
   de grijze plaatshouder), dus de afbeelding vult hem en snijdt bij wat niet past.
   Zo is een liggende foto in een staand vak nog steeds netjes, en verspringt de
   pagina niet zodra er een beeld in komt. */
.lw-beeld {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
.ph::after {
  content: attr(data-label);
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 8px;
}

/* ---------------------------------------------------------------------
   9. Waarom / features
   --------------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.why-item { display: flex; gap: 12px; padding: var(--sp-3) 0; }
.why-item i { color: var(--st-ok); font-size: 20px; flex: none; margin-top: 2px; }
.why-item h3 { font-size: 14.5px; color: var(--ink); margin-bottom: 2px; }
.why-item p { font-size: 13px; color: var(--ink-2); }
/* Waarom-accordeon (compact, uitklapbaar) */
details.why-item { display: block; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); overflow: hidden; padding: 0; }
details.why-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--ink); }
details.why-item > summary::-webkit-details-marker { display: none; }
details.why-item > summary > i:first-child { color: var(--st-ok); font-size: 18px; flex: none; margin-top: 0; }
details.why-item > summary > span { flex: 1; }
.why-item .why-chev { margin-left: auto; color: var(--ink-3); font-size: 13px; transition: transform .2s ease; }
details.why-item[open] .why-chev { transform: rotate(180deg); }
details.why-item[open] > summary { border-bottom: 1px solid var(--border); }
details.why-item > p { margin: 0; padding: 12px 14px 14px 42px; font-size: 13px; color: var(--ink-2); }

/* Certificeringen */
.cert-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cert {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  background: var(--panel); font-size: 13px; font-weight: 600;
}
.cert i { font-size: 20px; color: var(--link); }
.cert small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11px; }

/* Merken */
.brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.brand-badge {
  display: grid; place-items: center; min-height: 66px; padding: 10px;
  border: 1px solid var(--brand-chip-border, var(--border)); border-radius: var(--panel-radius);
  background: var(--brand-chip, #ffffff); cursor: pointer; transition: all .12s; text-align: center;
}
.brand-badge:hover { border-color: var(--brand, var(--accent-2)); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.brand-badge .wm {
  font-weight: 800; font-size: 17px; letter-spacing: -.02em; line-height: 1;
  color: var(--brand, #1a2230); white-space: nowrap;
}
.brand-badge small { display: block; margin-top: 5px; font-weight: 500; font-size: 10.5px; color: #6b7688; letter-spacing: .02em; }
[data-resolved-theme="dark"] .brand-badge { --brand-chip: var(--panel-2); --brand-chip-border: var(--border); }
[data-resolved-theme="dark"] .brand-badge .wm { color: color-mix(in srgb, var(--brand) 45%, white); }
[data-resolved-theme="dark"] .brand-badge small { color: var(--ink-3); }

/* Rechter-sidebar blokken */
.aside-block { margin-bottom: var(--sp-5); }
.aside-block > h3 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin-bottom: var(--sp-3); font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.help-actions { display: flex; flex-direction: column; gap: 8px; }
.help-actions a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  background: var(--panel); color: var(--ink); font-weight: 600; font-size: 13.5px;
  transition: all .12s;
}
.help-actions a:hover { text-decoration: none; border-color: var(--accent-2); transform: translateX(2px); }
.help-actions a i { font-size: 18px; width: 22px; text-align: center; }
.help-actions .a-call i { color: var(--st-ok); }
.help-actions .a-wa i { color: #25d366; }
.help-actions .a-spoed i { color: var(--st-alert); }
.help-actions .a-storing i { color: var(--st-warn); }

/* --- Spoed aan/uit-schakelaar -------------------------------------
   Zet data-spoed="on" of "off" op het <html>-element. Eén plek,
   werkt door op alle spoed/storing-onderdelen tegelijk. */
[data-spoed="off"] .spoed-on { display: none !important; }
[data-spoed="on"]  .spoed-off { display: none !important; }
/* veilige standaard: zonder attribuut geldt 'off' */
html:not([data-spoed="on"]) .spoed-on { display: none !important; }

.rating { display: flex; align-items: baseline; gap: 8px; }
.rating__num { font-size: 32px; font-weight: 700; font-family: var(--font-mono); }

.opening-list { font-size: 13px; }
.opening-list .row { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; border-bottom: 1px dashed var(--border); margin: 0; }
/* Zelfde neutralisering als bij .info-list: zonder deze regel geeft Bootstrap elke span de
   volle breedte en komt de tijd onder de dag te staan in plaats van ernaast. */
.opening-list .row > span { width: auto; max-width: none; flex: 0 1 auto; padding: 0; margin: 0; }
.opening-list .row span:last-child { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.opening-list .row:last-child { border-bottom: 0; }
.opening-list .row.today { font-weight: 700; color: var(--link); }

.region-note {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
  padding: 10px; border: 1px solid var(--st-warn); border-radius: var(--panel-radius);
  background: var(--st-warn-bg); color: var(--ink);
}
.region-note i { color: var(--st-warn); font-size: 16px; flex: none; }
/* Een link in dit gekleurde vlak leunt niet op de accentkleur: die is afgestemd op een gewone kaart
   en haalt op de getinte waarschuwingsachtergrond net te weinig contrast (4,3 waar 4,5 nodig is).
   Hier dus de tekstkleur van het vlak zelf, met een streep eronder zodat het nog steeds als link
   leest -- kleur alleen is sowieso nooit genoeg om iets aanklikbaars aan te wijzen. */
.region-note a { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------------
   10. Footer — de lodewijk-site gebruikt de gedeelde standaard CMS-footer
   (assets/shared/css/footer.css, geladen in layout.php), 1-op-1 gevoed uit
   Content → Footer. Geen thema-eigen footer-markup/CSS meer.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   11. Offcanvas / mobiele nav trigger
   --------------------------------------------------------------------- */
.mobile-only { display: none; }
.nav-toggle { display: none; }
/* De drie knoppen in de kop zijn even groot: 42 bij 42. Dat is ruim boven de vuistregel
   voor een raakvlak dat je met een duim moet raken (32, de maat van de gewone icon-btn,
   zat daaronder), en drie gelijke knoppen naast elkaar oogt rustiger dan twee kleine en
   een grote. De maat van de schakelaars staat bij .topbar__cycle; de hoogte van de balk
   rekent met deze maat, zie het blok voor smalle schermen onderaan. */
.topbar .nav-toggle {
  width: 42px; height: 42px;
  border-radius: 9px;
  font-size: 22px;
  color: var(--ink);
}
/* De hover-staat van .icon-btn heeft dezelfde specificiteit als de regel hierboven, en
   die staat later in het bestand: zonder deze regel won `color: var(--ink)` en werd het
   icoon donker op de donkerblauwe hoverkleur. In dagstand was dat een contrast van
   ongeveer 1,9 op 1, dus praktisch onzichtbaar; in nachtstand viel het niet op, want daar
   is --ink juist licht. Op een tablet blijft hover na een tik vaak plakken, dus dat zou
   je ook zonder muis raken. */
.topbar .nav-toggle:hover,
.topbar .nav-toggle:focus-visible { color: #fff; }
.topbar .nav-toggle i { line-height: 1; }

/* ---------------------------------------------------------------------
   12. Tooltip (eenvoudig, data-tip)
   --------------------------------------------------------------------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: #fff; font-size: 11px; padding: 5px 9px; border-radius: 4px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 50;
  font-family: var(--font-sans); font-weight: 500;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* In de bovenbalk klapt de uitleg naar beneden uit. Boven de balk is namelijk geen
   scherm meer: de balk plakt aan de bovenkant, dus een ballon die daarboven wil
   staan valt buiten beeld en je zag er alleen een streepje van langsschieten.
   Het meest rechtse knopje lijnt zijn ballon rechts uit: gecentreerd staat die
   ballon ('Naar het beheer') met zijn rechterrand al op zestien pixels van de
   schermrand, en een langere tekst zou eroverheen lopen. Body knipt dat af
   (overflow-x: clip), dus dan was hij half weg.

   Dat hangt bewust aan de KNOP en niet aan ":last-child". Die stand veranderde toen de
   hamburger naar rechts verhuisde (v014.11.146): die knop heeft zelf geen ballon, dus
   de regel raakte ineens niets meer en de uitleg van het accountknopje stak weer
   negentien pixels buiten beeld. Op deze twee knoppen zit de ballon die het nodig heeft,
   en ze blijven de meest rechtse mét uitleg, wat er verder ook achter komt te staan. */
.topbar [data-tip]::after {
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.topbar [data-tip]:hover::after, .topbar [data-tip]:focus-visible::after { transform: translateX(-50%) translateY(0); }
.topbar__group--right > .topbar__only-wide[data-tip]::after,
.topbar__group--right > .topbar__only-wide[data-tip]:hover::after,
.topbar__group--right > .topbar__only-wide[data-tip]:focus-visible::after { left: auto; right: 0; }
.topbar__group--right > .topbar__only-wide[data-tip]::after { transform: translateY(-4px); }
.topbar__group--right > .topbar__only-wide[data-tip]:hover::after,
.topbar__group--right > .topbar__only-wide[data-tip]:focus-visible::after { transform: translateY(0); }

/* Vet mét kleuraccent in de paginateksten.
   Dit stond als `style="color:var(--ink)"` op 504 plekken in de sjablonen. Sinds de
   teksten beheerbaar zijn (v014.11.108) kan dat niet meer: de zeef die de invoer
   schoonmaakt laat geen stijlattribuut door, dus het accent zou verdwijnen zodra Theo
   zo'n tekst één keer opslaat. Als <b> overleeft het accent het bewerken wél, en
   semantisch klopt het beter: dit is opmaak, geen nadruk. Gewone <strong> houdt de
   kleur van zijn alinea, precies zoals voorheen. */
.panel__body b,
.prose b,
.note-line b,
.region-note b { color: var(--ink); font-weight: 700; }

/* Count-up helper */
.counter { font-variant-numeric: tabular-nums; }

/* Subpagina's: prose + prijstabellen */
.prose p { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.prose h3 { margin: 20px 0 8px; font-size: 16px; color: var(--ink); }
.prose ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
.prose ul li { margin-bottom: 4px; }
.prose strong { color: var(--ink); }
.price-table { width: 100%; border-collapse: collapse; font-size: 14.5px; table-layout: fixed; }
.price-table th, .price-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
/* Vaste laatste kolom: bedragen in opeenvolgende tabellen lijnen zo uit. */
.price-table th:not(:first-child), .price-table td:not(:first-child) { width: 190px; }
.price-table.cols-4 th:not(:first-child), .price-table.cols-4 td:not(:first-child) { width: 160px; }
.price-table.cols-5 th:not(:first-child), .price-table.cols-5 td:not(:first-child) { width: 145px; }
.price-table th:last-child, .price-table td:last-child,
.price-table.cols-4 th:last-child, .price-table.cols-4 td:last-child,
.price-table.cols-5 th:last-child, .price-table.cols-5 td:last-child { width: 190px; }
/* Bedragen krijgen .mono en breken niet af; tekstwaarden mogen dat juist wel. */
.price-table td.mono, .price-table td[data-tarief] { font-variant-numeric: tabular-nums; }
.price-table td:last-child { text-align: right; font-family: var(--font-mono); white-space: normal; color: var(--ink); overflow-wrap: break-word; }
.price-table td.mono:last-child { white-space: nowrap; }
.price-table.spec td:last-child { text-align: left; font-family: inherit; }
.price-table.spec td.mono:last-child, .price-table.spec td.mono { text-align: right; font-family: var(--font-mono); }
.price-table.spec th:not(:first-child) { text-align: right; }
.price-table.spec.cols-4 th:nth-child(2), .price-table.spec.cols-4 td:nth-child(2) { text-align: left; }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table thead th, .price-table th[colspan] { background: var(--panel-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.note-line { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }
.page-lede { font-size: 16px; color: var(--ink-2); max-width: 66ch; line-height: 1.6; }
/* Subpagina sub-navigatie + productkaarten */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); }
.subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.subnav a:hover, .subnav a[aria-current="page"] { border-color: var(--accent-2); color: var(--ink); background: var(--panel-2); text-decoration: none; }
.subnav a i { color: var(--link); font-size: 15px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.product { border: 1px solid var(--border); border-radius: var(--panel-radius); padding: var(--sp-3); background: var(--panel); display: flex; flex-direction: column; gap: 3px; }
.product .p-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.product .p-art { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.product .p-price { font-family: var(--font-mono); font-weight: 700; color: var(--link); margin-top: 6px; }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .product-grid { grid-template-columns: 1fr; } }
/* Contactformulier */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field textarea, .field select { font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); color: var(--ink); width: 100%; }
/* Live validatie (contact-validatie.js): groen als het klopt, rood met een uitleg als het niet klopt. */
.field input.is-valid, .field textarea.is-valid { border-color: var(--st-ok); }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--st-bad, #b42318); }
.field .validation-message { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.field .validation-message.is-ok { color: var(--st-ok); }
.field .validation-message.is-fout { color: var(--st-bad, #b42318); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--focus-ring); }
.field .hint { font-size: 11.5px; color: var(--ink-3); }
.radio-set { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-opt { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--panel-radius); cursor: pointer; font-size: 13.5px; color: var(--ink); }
.radio-opt:hover { border-color: var(--accent-2); }
.radio-opt input { accent-color: var(--accent); }
.info-list { font-size: 14.5px; }
.info-list .row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--border); margin: 0; }
.info-list .row:last-child { border-bottom: 0; }
/* Bootstrap zet .row op display:grid met eigen gutters; die neutraliseren we hier. */
.info-list .row > span { width: auto; max-width: none; flex: 0 1 auto; padding: 0; margin: 0; }
.info-list .row span:first-child { color: var(--ink-3); }
.info-list .row span:last-child { font-family: var(--font-mono); color: var(--ink); text-align: right; }
/* Op een telefoon onder elkaar. Naast elkaar hield de waarde nog een derde van de breedte over, en
   dan breekt "15 m t/m 4,2 kW · 30 m vanaf 5,0 kW" af met alleen "kW" op de tweede regel, rechts
   uitgelijnd. Onder elkaar leest het als een gewoon lijstje en houdt de waarde de volle breedte. */
@media (max-width: 560px) {
  .info-list .row { flex-direction: column; gap: 2px; padding: 8px 0; }
  .info-list .row span:last-child { text-align: left; }
}
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

/* Meter / gauge rij (Machinekamer e.a.) */
.meter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.meter {
  border: 1px solid var(--border); border-radius: var(--panel-radius);
  padding: var(--sp-3) var(--sp-4); background: var(--panel-2);
  display: flex; flex-direction: column; gap: 4px;
}
.meter__label { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.meter__val { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.meter__val small { font-size: 13px; color: var(--ink-3); font-weight: 500; }

/* Kaart (regiokaart-thema) */
.map-wrap { position: relative; border-radius: var(--panel-radius); overflow: hidden; }
.map-point {
  cursor: pointer; transition: transform .15s;
  transform-box: fill-box; transform-origin: center;
}
.map-point:hover, .map-point:focus-visible { transform: scale(1.35); outline: none; }
.map-pop {
  position: absolute; z-index: 20; width: 240px;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-2);
  padding: var(--sp-3) var(--sp-4);
}
.map-pop h4 { font-size: 14px; margin-bottom: 4px; }
.map-pop .close { position: absolute; top: 6px; right: 8px; cursor: pointer; color: var(--ink-3); border: 0; background: none; font-size: 16px; }
.data-note {
  font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ---------------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0,1fr); }
  .sidebar-right {
    position: static; grid-column: 1 / -1; max-height: none;
    border-left: 0; border-top: var(--border-w) solid var(--border);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .sidebar-right .aside-block { margin-bottom: 0; }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .project-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 991.98px en niet 992px: de hamburger is `d-lg-none` en Bootstrap verbergt die
   vanaf 992px. Stond deze grens op 992px (inclusief), dan was op precies die breedte
   de zijbalk al weg én de hamburger al verborgen: een scherm zonder enige navigatie. */
@media (max-width: 991.98px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar-left { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero { grid-template-columns: 1fr; }
  .hero__media { min-height: 0; display: block; border-left: 0; border-top: 1px solid var(--border); }
  .hero-slides { flex: none; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .sidebar-right { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  /* Eén rij, niet omslaan: de kop draagt op een telefoon alleen nog de merknaam,
     de twee schakelaars en de hamburger, en die passen naast elkaar. Met flex-wrap
     sprong de balk bij een lange merknaam naar twee regels en schoof de hele
     pagina omlaag. */
  /* De zijruimte staat al op var(--sp-3) in het blok voor smalle schermen hieronder; hier
     alleen nog het niet-omslaan. */
  .topbar { flex-wrap: nowrap; }
  .topbar .hide-sm { display: none; }
  .sidebar-left { top: 0; height: 100vh; }
  .main { padding: var(--sp-4); }
  .hero__body { padding: var(--sp-4); }
  /* Twee naast elkaar en niet vier onder elkaar: op een telefoon duwden die vier
     regels de tekening van de bus helemaal onder de vouw. Nu piept hij er net
     onderuit, en de cijfers blijven goed leesbaar. */
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stats .stat { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  /* Geen streep aan de buitenrand: niet rechts in de rechterkolom, en niet naast een
     laatste blok dat alleen op zijn regel staat (een oneven aantal in twee kolommen). */
  .hero__stats .stat:nth-child(2n) { border-right: 0; }
  /* Geen streep onder de onderste regel. Geteld vanaf achteren en niet per aantal:
     het laatste blok staat altijd op de onderste regel, en het een-na-laatste alleen
     als het in de linkerkolom staat. Zo klopt het ook bij vijf of zes blokken, en de
     rijen-editor kent geen bovengrens. */
  .hero__stats .stat:last-child,
  .hero__stats .stat:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .service-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .sidebar-right { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Kopbalk op telefoon en tablet (verzoek Theo, v014.11.97)

   Links de merknaam, rechts de tekstgrootte, de dag-nachtknop en de hamburger
   (die stond tot v014.11.146 links; hij verhuisde naar de rechterrand omdat je
   daar met je duim bij kunt). Het telefoonnummer, het e-mailadres, de klok, het
   werkgebied en het accountpilletje vallen weg: die pasten er niet naast
   en stonden elkaar op een tablet in de weg. Telefoon en account staan
   onderin het uitschuifmenu, het nummer bovendien op /contact.

   Tot v014.11.97 verhuisden juist de tekstgrootte en de dag-nachtknop naar
   het menu; die staan nu weer in de kop, want daar zoekt een bezoeker ze.
   --------------------------------------------------------------------- */
/* De rouleerknoppen: één knop per schakelaar, alleen op smalle schermen. De knop
   toont de stand waar hij nu op staat, en zet bij een tik de volgende. */
.topbar__cycle {
  display: none;
  place-items: center;
  /* Even groot als de hamburger (verzoek Theo): drie knoppen van gelijke maat naast
     elkaar oogt rustiger dan twee kleine en een grote, en 42 is de maat die een duim
     nodig heeft. Deze knoppen bestaan alleen op smalle schermen (display:none daarbuiten),
     dus deze maat geldt vanzelf alleen daar. */
  width: 42px; height: 42px;
  padding: 0;
  border: var(--border-w) solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s;
}
.topbar__cycle:hover, .topbar__cycle:focus-visible { border-color: var(--accent); color: var(--accent-hover, var(--accent)); }
.topbar__cycle i { font-size: 18px; }
/* De letter draagt de stand: klein, normaal of groot. Meegeschaald met de knop, zodat het
   verschil tussen de drie standen even goed te zien blijft als bij de kleinere knop. */
.topbar__cycle[data-fontsize-cycle] span { font-weight: 700; line-height: 1; }
.topbar__cycle[data-fontsize-cycle][data-stand="klein"] span { font-size: 13px; }
.topbar__cycle[data-fontsize-cycle][data-stand="normaal"] span { font-size: 16px; }
.topbar__cycle[data-fontsize-cycle][data-stand="groot"] span { font-size: 20px; }

/* Deze stond op `display: none`, want op een breed scherm droeg het merkblok bovenaan het
   linkermenu de naam. Dat blok is weg sinds het logo in de kopbalk staat -- en daarmee was dit de
   ENIGE plek waar de naam op een breed scherm nog stond. Een site zonder kopbalklogo (een verse
   installatie, een kloon van dit thema) had daardoor helemaal geen merknaam meer op de computer.
   De naam en het logo sluiten elkaar in de template al uit, dus zichtbaar laten staan is genoeg. */
.topbar__brand {
  display: inline-flex;
  align-items: center;
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
  color: var(--ink); white-space: nowrap;
}
.topbar__brand span { color: var(--link); }
.topbar a.topbar__brand:hover { color: var(--accent-hover, var(--accent)); text-decoration: none; }

/* Het logo in de kopbalk.
   De hoogte stuurt, de breedte volgt: een logo is bijna altijd liggend en de kopbalk is een vaste
   strook. Met een maximum aan de breedte kan een heel breed logo de telefoon en het e-mailadres
   niet wegduwen; hij wordt dan gewoon kleiner. `object-fit: contain` houdt de verhouding heel,
   ook als iemand een vierkant logo kiest. */
.topbar__logo {
  display: inline-flex; align-items: center;
  flex: 0 0 auto; margin-right: 4px;
}
.topbar__logo img {
  display: block;
  /* 36 van de 46 pixels die de balk hoog is. Hij mocht duidelijker en daarna nog iets groter
     (verzoek Theo). Vijf pixels lucht boven en onder is het minimum dat nog als rand leest;
     hoger dan dit gaat het logo tegen de scheidingslijn aan zitten. */
  height: 36px; width: auto;
  max-width: 240px; object-fit: contain;
}
/* Op een smal scherm is de balk juist HOGER (67 in plaats van 46) omdat de knoppen daar 42 pixels
   meten. Het logo stond er op 28 en oogde daardoor kleiner dan de knoppen ernaast, terwijl er lucht
   zat. Op 42 staat het gelijk met de knoppen en loopt de balk visueel door.

   Telefoon en e-mail staan hier niet naast: die zijn op deze breedte verborgen (`hide-sm`), dus de
   ruimte links is van het logo alleen. Bij 42 hoog is dit logo 182 breed en houdt een scherm van
   375 nog een pixel of vijftien over naast de drie knoppen; de max-width vangt een breder logo op
   voordat het de knoppen wegduwt. */
@media (max-width: 575.98px) {
  .topbar__logo img { height: 42px; max-width: 200px; }
}
/* In de nachtmodus is een donker logo op een donkere balk onleesbaar. Het logo van Lodewijk.FRL
   heeft grijze letters die het net redden, maar dat geldt niet voor elk logo dat hier ooit komt te
   staan: een lichte gloed eronder houdt de vorm zichtbaar zonder de kleuren te veranderen.

   Op `data-resolved-theme` en niet op `data-theme`: dat eerste is de stand die de site werkelijk
   toont, het tweede is de KEUZE -- en die kan "auto" zijn. Op `data-theme` zou deze regel ook
   overdag meedoen zodra iemand op automatisch staat, en dan ligt er een gloed onder een logo op een
   witte balk. Zo doet de rest van dit thema het ook (zie theme-workshop.css). */
[data-resolved-theme="dark"] .topbar__logo img {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35));
}

@media (max-width: 991.98px) {
  /* De linkergroep moet kúnnen krimpen. Zonder min-width:0 groeit een lange
     merknaam gewoon door (nowrap) en schuift de rechtergroep het scherm af;
     body heeft overflow-x:clip, dus die knoppen zijn dan niet weg-gescrold maar
     onbereikbaar. De naam is een vrij invulveld van zestig tekens, dus dat is
     geen theoretisch geval. */
  .topbar__group { min-width: 0; }
  .topbar__brand { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar .system-status,
  .topbar__only-wide { display: none; }
  /* Zes knoppen naast elkaar aten de halve balk op. Op deze breedtes staan de twee
     schakelaars daarom als één rouleerknop elk; de volledige rijen blijven in de HTML
     staan (die worden door de rouleerknop bediend) maar zijn hier verborgen. */
  /* Evenveel lucht rondom de knoppen (verzoek Theo): 42 pixels knop plus twaalf boven,
     onder en opzij. Daarvóór was de balk 46 hoog en zat er nog twee pixels boven en onder
     de knop, wat naast de twaalf aan de rechterkant scheef stond.

     67 en niet 66, want de scheidingslijn onderaan telt mee in de hoogte (border-box).
     Bij 66 hield de knop elf en een halve pixel over: met het blote oog niet te zien, maar
     het is eenvoudiger om het gewoon te laten kloppen.

     De maat is een variabele en geen los getal: de plakkende zijbalken, het uitschuifmenu,
     de sprongafstand naar een sectie en de compensatie tijdens het scrollslot rekenen er
     allemaal mee. Eén getal hier, de rest volgt. Ook de zijruimte staat op twaalf, zodat
     het op een tablet net zo klopt als op een telefoon. */
  :root { --topbar-h: 67px; }
  .topbar { gap: var(--sp-3); padding: 0 var(--sp-3); }
  .topbar .letterschaal,
  .topbar .theme-switch { display: none; }
  .topbar__cycle { display: inline-grid; }
  .topbar__group--right { flex: none; gap: 8px; }
}

/* ---------------------------------------------------------------------
   Uitschuifmenu (portal-slide-panel-v20)

   Dezelfde klassen als de portalthema's, zodat het gedrag uit
   _local_portal/js/theme.js komt en dit thema alleen de vorm levert. De
   maten en de beweging spiegelen die van wieringerwerf; de kleuren komen
   uit de tokens van dit thema.
   --------------------------------------------------------------------- */
.portal-slide-panel-v20 {
  display: flex; position: fixed; inset: 0; z-index: 1200;
  align-items: flex-end;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s 280ms;
}
.portal-slide-panel-v20.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s 0s; }
.portal-slide-backdrop-v20 {
  position: absolute; inset: 0;
  background: rgba(5, 13, 28, .5);
  opacity: 0; cursor: pointer;
  transition: opacity 260ms cubic-bezier(.25,.46,.45,.94);
}
.portal-slide-panel-v20.is-open .portal-slide-backdrop-v20 { opacity: 1; }
.portal-slide-body-v20 {
  position: relative; width: 100%;
  /* Tot net onder de kopbalk (verzoek Theo): 88vh liet er een brede strook boven
     open, terwijl juist de navigatielijst daaronder ruimte tekortkwam. De kopbalk
     blijft in beeld (verdonkerd door het waas eroverheen, zie de regel hieronder),
     met een smalle kier ertussen zodat het paneel als een paneel leest en niet als
     een tweede pagina. `dvh` erachteraan voor telefoons waar de adresbalk mee in-
     en uitschuift. */
  max-height: calc(100vh - var(--topbar-h) - 6px);
  max-height: calc(100dvh - var(--topbar-h) - 6px);
  display: flex; flex-direction: column;
  background: var(--panel);
  border-top: var(--border-w) solid var(--border);
  border-radius: 20px 20px 0 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  box-shadow: 0 -12px 48px rgba(5, 13, 28, .28);
}
.portal-slide-panel-v20.is-open .portal-slide-body-v20 { transform: translateY(0); }
/* Zolang het paneel open staat: de kopbalk vastzetten in plaats van plakken.
   Het gedeelde script legt de pagina op slot met `overflow: hidden` op de body, en
   daarmee wordt de body zelf de scrollcontainer. Een `position: sticky` kop verliest
   dan zijn plakvlak en schuift het beeld uit: op een gescrolde pagina stond er boven
   het paneel dus geen kopbalk maar een strook verdonkerde pagina-inhoud, en de kier
   van zes pixels sloeg nergens op. Een code-review mat dat na (kop op -900 in plaats
   van 0). Alleen tijdens het openstaan, zodat de kop verder gewoon sticky blijft. */
body:has(.portal-slide-panel-v20.is-open) .topbar { position: fixed; top: 0; left: 0; right: 0; }
/* En de hoogte die de kop daarmee uit de bladspiegel haalt er weer bij optellen.
   Zonder dit schuift alles eronder de hoogte van de kopbalk omhoog zodra het paneel
   opengaat, en weer terug bij het sluiten: de pagina wipt zichtbaar op en neer
   achter het waas, precies tijdens het in- en uitschuiven. `body` heeft verder
   geen padding aan de bovenkant, dus dit valt exact weg tegen de vaste kop. */
body:has(.portal-slide-panel-v20.is-open) { padding-top: var(--topbar-h); }
.portal-slide-handle-v20 {
  width: 44px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 6px; padding: 6px 0;
  flex-shrink: 0; touch-action: none; cursor: grab;
  box-sizing: content-box;
}
.portal-slide-header-v20 {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.portal-slide-header-v20 strong { flex: 1; font-size: 15px; font-weight: 800; color: var(--ink); }
.portal-slide-close-v20 {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  border: var(--border-w) solid var(--border); border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.portal-slide-close-v20:hover, .portal-slide-close-v20:focus { background: var(--panel-2); color: var(--accent-hover, var(--accent)); }
.portal-slide-content-v20 {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* De gekloonde zijbalknavigatie zit in dit paneel: geen eigen rand, geen
   eigen hoogte, en niet meer sticky (dat hoort bij de kolom, niet bij een
   paneel dat zelf al scrolt). */
.portal-slide-content-v20 .sidebar-left { display: flex; height: auto; border-right: 0; position: static; background: transparent; }
.portal-slide-content-v20 .sidebar-top { position: static; max-height: none; overflow: visible; }
.drawer-tools {
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.drawer-tools .system-status { align-self: flex-start; }
.drawer-tools .btn { justify-content: center; }

/* ============================================================
   AUTH — inloggen, registreren, wachtwoord, tweestapscode
   ============================================================
   Sinds v014.10.431 renderen de auth-pagina's in Lodewijks eigen schil (topbar +
   sidebar + main) in plaats van in de gedeelde portal-layout. Het SJABLOON is nog
   steeds het gedeelde _local_portal/auth_*.php — bewust: één sjabloon per pagina.
   Die markup gebruikt portal-klassen, en de opmaak daarvoor staat in
   _local_portal/theme.css, die dit thema niet laadt. Vandaar dit blok: dezelfde
   klassen, maar in Lodewijks paneelvorm en met zijn tokens.

   Werk je aan de auth-sjablonen: elke nieuwe portal-klasse die daar bijkomt, heeft
   hier een tegenhanger nodig. ThemeShellServiceTest bewaakt de CSS-keten, niet de
   dekking van losse klassen.
   ============================================================ */

/* Spam-honeypot uit de gedeelde formulieren (registratie, contact). Staat in de
   referentie in themes/default/css/theme.css, en dit thema laadt dat bestand niet —
   zonder deze regel ziet een echte bezoeker een veld "Website" staan, vult het in, en
   wordt als bot geweigerd. Niet onder .lw-auth scopen: contact gebruikt hem ook. */
.hp-field{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

.lw-auth { display: flex; justify-content: center; padding-top: var(--sp-2); }

/* Het gedeelde sjabloon rendert naast de kaart ook de portal-navigatie: het mobiele
   switchboard en de twee zijpanelen ("Snel naar" / "Ontdek"). In de portal-layout is
   dat de enige navigatie die een uitgelogde bezoeker heeft. Hier niet: Lodewijk heeft
   zijn eigen sidebar op desktop en zijn eigen drawer op mobiel, dus die blokken zijn
   dubbel — en zonder de portal-CSS staan ze bovendien uitgeklapt boven het formulier. */
.lw-auth .portal-mobile-switchboard-v147,
.lw-auth .portal-quick-panel-v147,
.lw-auth .portal-local-panel-v147 { display: none; }

.lw-auth .portal-auth-v148 { width: 100%; max-width: 460px; }

/* De kaart is een gewoon Lodewijk-paneel: vlak, dunne rand, kleine radius. */
.lw-auth .portal-auth-card-v148 {
  padding: var(--sp-5);
  border: var(--border-w) solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--panel);
  box-shadow: var(--shadow-1);
}

.lw-auth .portal-auth-brand-v148 {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* Zonder display:block lopen merknaam en ondertitel aan elkaar vast. */
.lw-auth .portal-auth-brand-v148 strong,
.lw-auth .portal-auth-brand-v148 small { display: block; line-height: 1.15; }
.lw-auth .portal-auth-brand-v148 strong { color: var(--ink); font-size: 14px; }
.lw-auth .portal-auth-brand-v148 small { color: var(--ink-3); font-size: 12px; }
.lw-auth .portal-auth-brand-v148 .admin-logo-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--panel-radius);
  background: var(--accent); color: #fff;
  font-weight: 800; font-size: 17px;
}

.lw-auth .portal-section-label-v147 {
  display: block; margin-bottom: var(--sp-1);
  color: var(--ink-3); font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.lw-auth .portal-auth-card-v148 h1 { margin: 0 0 var(--sp-2); color: var(--ink); font-size: 21px; }
.lw-auth .portal-auth-card-v148 .lead { margin: 0 0 var(--sp-4); color: var(--ink-2); font-size: 14px; }

.lw-auth .portal-auth-form-v148 { display: grid; gap: var(--sp-3); }
.lw-auth .portal-auth-form-v148 label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink); }
.lw-auth .portal-auth-form-v148 input {
  width: 100%; min-height: 42px;
  padding: 9px var(--sp-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--panel); color: var(--ink);
  font-family: var(--font-sans); font-size: 14px;
}
.lw-auth .portal-auth-form-v148 input:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(47, 111, 208, .16);
}
/* Knoppen volgen .btn-brand; de sjablonen zetten geen klasse op de submit-knop. */
.lw-auth .portal-auth-form-v148 button,
.lw-auth .portal-auth-button-v148,
.lw-auth .portal-passkey-btn-v159 {
  width: 100%; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-1);
  border: var(--border-w) solid var(--accent);
  border-radius: var(--panel-radius);
  background: var(--accent); color: #fff;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  text-decoration: none; /* .portal-auth-button-v148 is een <a>; Bootstrap onderstreept die. */
  cursor: pointer;
}
.lw-auth .portal-auth-form-v148 button:hover,
.lw-auth .portal-auth-button-v148:hover,
.lw-auth .portal-passkey-btn-v159:hover:not(:disabled) {
  background: var(--accent-2); border-color: var(--accent-2);
}
.lw-auth .portal-passkey-btn-v159:disabled { opacity: .6; cursor: default; }
.lw-auth .portal-passkey-2fa-v159 { display: grid; gap: var(--sp-3); }
.lw-auth .portal-passkey-btn-v159 i { font-size: 17px; }
.lw-auth .portal-auth-divider-v159 {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-1) 0;
  color: var(--ink-3); font-size: 12px; font-weight: 600;
}
.lw-auth .portal-auth-divider-v159::before,
.lw-auth .portal-auth-divider-v159::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* label.-selector nodig: de algemene labelregel hierboven is even specifiek plus een elementnaam,
   en zonder dit wint zijn display:grid en staat het vinkje bovén de tekst in plaats van ernaast. */
.lw-auth .portal-auth-card-v148 label.portal-remember-v149 {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  color: var(--ink-2); font-size: 13px; line-height: 1.4;
}
.lw-auth .portal-auth-card-v148 label.portal-remember-v149 input { width: auto; min-height: 0; flex: 0 0 auto; margin-top: 2px; }

.lw-auth .portal-auth-links-v148 {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.lw-auth .portal-auth-links-v148 a,
.lw-auth .portal-auth-links-v148 button { color: var(--link); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.lw-auth .portal-auth-links-v148 a:hover,
.lw-auth .portal-auth-links-v148 button:hover { text-decoration: underline; }
.lw-auth .portal-auth-logout-form-v148 { display: contents; }
/* Op de 2FA-pagina staat de hint in een <small>; zonder display:block pakt de marge niet. */
.lw-auth .portal-auth-hint-v148 { display: block; margin-top: var(--sp-3); color: var(--ink-3); font-size: 12.5px; }

/* Meldingen: Bootstrap laadt hier wel, maar de kleuren volgen Lodewijks statustokens. */
.lw-auth .alert {
  padding: var(--sp-3);
  border: var(--border-w) solid transparent;
  border-radius: var(--panel-radius);
  font-size: 13.5px;
}
.lw-auth .alert-danger { border-color: var(--st-alert); background: var(--st-alert-bg); color: var(--st-alert); }
/* .success staat in auth_forgot_password.php als LOSSE klasse, niet als .alert.success. */
.lw-auth .alert.success,
.lw-auth .success { border-color: var(--st-ok); background: var(--st-ok-bg); color: var(--st-ok); }

@media (max-width: 720px) {
  .lw-auth { padding-top: 0; }
  .lw-auth .portal-auth-card-v148 { padding: var(--sp-4); }
}

/* =====================================================================
   ONTWERP-UPGRADE: bouwstenen voor de subpagina's
   Samengevoegd uit het ontwerppakket (augustus 2026). Deze onderdelen
   stonden daar deels in losse <style>-blokken per pagina; hier staan ze
   een keer, zodat een wijziging op een plek zit en het CSP-slot geen
   inline stijl per pagina hoeft toe te staan.
   ===================================================================== */

/* --- Brede tabellen schuifbaar op smalle schermen -------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* ---------------------------------------------------------------------
   Tabellen op een telefoon: blokjes in plaats van opzij slepen
   ---------------------------------------------------------------------
   Deze tabellen hebben vier of vijf kolommen. Op 375 pixels past daar hooguit één van; de rest
   viel buiten beeld, en omdat de kolombreedtes vastliggen hield de eerste kolom nul pixels over --
   de modelnaam liep dwars over de capaciteit heen. Opzij slepen loste dat niet op: je las de
   modelnaam en het getal nooit tegelijk.

   Nu wordt elke rij één blokje: het opschrift van de kolom links, de waarde rechts. De opschriften
   worden door shared.js uit de tabelkop overgenomen (`data-label`), dus dit geldt voor elke tabel op
   de site zonder dat er iets aan de sjablonen verandert.

   De grens ligt op 720px: daaronder komen de vier kolommen sowieso in de knel, daarboven leest de
   gewone tabel prettiger. */
@media (max-width: 720px) {
  .price-table.heeft-kopjes,
  .price-table.heeft-kopjes tbody,
  .price-table.heeft-kopjes tr,
  .price-table.heeft-kopjes td { display: block; width: auto; }
  /* Sommige van deze tabellen hebben een minimumbreedte in hun eigen opmaak staan (`min-width:720px`)
     om te voorkomen dat de kolommen op een breed scherm in elkaar schuiven. In blokvorm bestaan die
     kolommen niet meer, en zo'n minimum zou de kaartjes alsnog buiten beeld duwen. */
  .price-table.heeft-kopjes { min-width: 0 !important; }
  /* De vaste kolombreedtes hierboven staan op `.cols-4 td:not(:first-child)` en dat is specifieker
     dan de regel hiervoor: zonder deze regel houdt een cel in blokvorm nog zijn 160 pixels en staat
     de waarde halverwege het kaartje. */
  .price-table.heeft-kopjes td:not(:first-child),
  .price-table.heeft-kopjes.cols-4 td:not(:first-child),
  .price-table.heeft-kopjes.cols-5 td:not(:first-child),
  .price-table.heeft-kopjes.cols-6 td:not(:first-child),
  .price-table.heeft-kopjes td:last-child,
  .price-table.heeft-kopjes.cols-4 td:last-child,
  .price-table.heeft-kopjes.cols-5 td:last-child { width: auto; }
  /* De kop blijft bestaan voor een schermlezer, maar mag geen ruimte innemen. Let op de tweede
     regel: zonder `display: block` op de rij en de cellen houden die hun tabelbreedte, steken ze
     buiten de ingeklemde kop uit en schuift de hele tabel alsnog een stukje opzij -- onzichtbaar,
     maar wel meetbaar (67 pixels op de verdelerspagina). */
  .price-table.heeft-kopjes thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .price-table.heeft-kopjes thead tr,
  .price-table.heeft-kopjes thead th { display: block; width: auto; }
  .price-table.heeft-kopjes tr {
    border: 1px solid var(--border); border-radius: var(--panel-radius);
    padding: 4px 12px; margin-bottom: 10px; background: var(--panel);
  }
  .price-table.heeft-kopjes tbody tr:last-child { margin-bottom: 0; }
  /* Een raster met twee kolommen, precies zoals de tabellen in het beheer het doen
     (`97-cms-info.css`): een vaste strook voor het opschrift en de rest voor de waarde.

     Eerst stond hier flex met een krimpend opschrift. Dat hield alles binnen beeld, maar het label
     kromp door tot één letter breed en brak dan middenin het woord af: "TOEPASS/ING", "Luchtreini/ging".
     Gemeten: 45 opschriften van één woord op 13 pagina's. Dat is dezelfde soort onleesbaarheid
     waarmee deze taak begon, verplaatst van de waarde naar het label.

     Met een vaste kolom kan dat niet gebeuren: het opschrift heeft altijd minstens 112 pixels, en
     de waarde krijgt de rest (`minmax(0, 1fr)` -- de nul is wat hem laat krimpen in plaats van
     uitzetten). */
  .price-table.heeft-kopjes td {
    /* `auto` als ondergrens en niet 112 pixels: de kolom wordt zo breed als het langste woord in het
       opschrift en niet breder, zodat er ruimte overblijft voor de waarde. Met een vaste 150 pixels
       hield een prijsbereik nog 119 pixels over en liep het kaartje alsnog over. */
    display: grid; grid-template-columns: minmax(auto, 45%) minmax(0, 1fr);
    gap: 14px; align-items: baseline;
    width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0;
    padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: right;
    overflow-wrap: anywhere;
  }
  .price-table.heeft-kopjes tbody tr td:last-child { border-bottom: 0; }
  /* Het opschrift van de kolom, links van de waarde. Krimpt niet weg bij een lange waarde. */
  /* Op `[data-label]` en niet op elke cel: twee tabellen hebben een leeg eerste opschrift, en dan
     hoort er ook geen leeg blokje te staan. */
  .price-table.heeft-kopjes td[data-label]::before {
    content: attr(data-label);
    /* `break-word` en niet `anywhere`: een woord mag alleen afbreken als het echt niet past, niet
       zodra het raster daar zin in heeft. En als het dan toch moet -- bij de grote-letterstand of op
       een heel smal scherm -- dan op een lettergreep mét koppelteken, niet middenin: "leiding-" op de
       eerste regel leest, "LEIDINGDIAMETE / R" niet. De pagina's staan op Nederlands, dus de browser
       weet waar de lettergrepen liggen. */
    overflow-wrap: break-word; hyphens: auto;
    text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-3); font-weight: 600; font-family: var(--font-sans);
  }
  /* De eerste cel is de kop van het kaartje. Het opschrift staat er klein bóven in plaats van
     ervoor: "Binnen- + buitendeel: FTXF20E" op één regel leest als een formulier.

     Maar het opschrift wég laten is geen optie, en dat was de eerste versie wél. Op de meeste
     pagina's staat daar de naam van een model en dan raad je het zo, maar niet overal: bij het
     waterzijdig inregelen is de eerste kolom "Cv-ketel: aanvoer (°C)" en werd de kop van het kaartje
     dus een kale "80". Wat 80 was, stond nergens meer. */
  .price-table.heeft-kopjes td:first-child {
    display: block; text-align: left; font-size: 15px; padding-top: 10px;
  }
  .price-table.heeft-kopjes td:first-child::before {
    display: block; margin-bottom: 2px;
  }
  .price-table.heeft-kopjes td:first-child strong { font-weight: 700; }
  /* De opmaak van een `wide-desc`-tabel staat verderop in dit bestand en wint dus van de regels
     hierboven. In blokvorm bestaan die kolommen niet meer: een cel die niet mag afbreken duwt het
     kaartje buiten beeld, en een laatste cel die links uitlijnt staat scheef naast alle andere. */
  .price-table.heeft-kopjes.wide-desc td:first-child,
  .price-table.heeft-kopjes.wide-desc td { white-space: normal; }
  .price-table.heeft-kopjes.wide-desc td:last-child { text-align: right; }
  /* Dezelfde correctie voor `spec`-tabellen, en dat zijn er negentig van de honderddertig. Twee
     regels verderop in dit bestand zetten daar de tweede en de laatste kolom op links, omdat dat in
     een brede tabel prettig leest. In een kaartje staan die waarden dan als links-rechts-links onder
     elkaar: precies het scheve beeld waar Theo op wees. */
  .price-table.heeft-kopjes.spec td:last-child,
  .price-table.heeft-kopjes.spec.cols-4 td:nth-child(2),
  .price-table.heeft-kopjes.spec.cols-5 td:nth-child(2),
  .price-table.heeft-kopjes.spec td.mono:last-child { text-align: right; }
  .price-table.heeft-kopjes.spec td:first-child { text-align: left; }
  /* Een prijs of een maat mag in een tabel niet afbreken, want daar staat hij naast andere getallen
     in een smalle kolom. In een kaartje heeft hij de volle breedte en is afbreken juist beter dan
     het kaartje buiten beeld duwen. */
  .price-table.heeft-kopjes td.mono,
  .price-table.heeft-kopjes td.mono:last-child,
  .price-table.heeft-kopjes td:last-child { white-space: normal; }
  .price-table.heeft-kopjes.wide-desc td:first-child { text-align: left; }

  /* Twee standen waarin naast elkaar niet meer past: een heel smal toestel, en de grote-letterstand
     (die vergroot de hele pagina met 14 procent, dus de kolom voor het opschrift krimpt mee).

     Dan gaat het opschrift bóven de waarde staan, net als bij de eerste cel. Dat is beter dan het
     woord laten afbreken -- "LEIDINGDIAMETE / R" -- en het is precies de stand waarin iemand zit die
     de letters juist groter heeft gezet om beter te kunnen lezen. */

  /* Een tabel in blokvorm valt nooit buiten beeld, dus de sleep-hint hoort hier weg. */
  .table-scroll:has(.price-table.heeft-kopjes) + .table-hint { display: none; }
}

/* Onder de 360 pixels en in de grote-letterstand: opschrift boven de waarde in plaats van ernaast.
   Zie de toelichting in het blok hierboven. */
@media (max-width: 359.98px) {
  .price-table.heeft-kopjes td { display: block; text-align: left; }
  .price-table.heeft-kopjes td[data-label]::before { display: block; margin-bottom: 2px; }
}
@media (max-width: 720px) {
  html[data-schaal="groot"] .price-table.heeft-kopjes td { display: block; text-align: left; }
  html[data-schaal="groot"] .price-table.heeft-kopjes td[data-label]::before { display: block; margin-bottom: 2px; }
}

.table-hint { display: none; font-size: 11.5px; font-family: var(--font-mono); color: var(--ink-3); margin: 6px 0 0; }
.table-hint i { color: var(--link); }
/* De hint verschijnt alleen als er daadwerkelijk iets buiten beeld valt. */
.table-scroll.is-scrollable + .table-hint { display: block; }

/* --- Subnav-varianten ------------------------------------------------ */
.subnav--models { align-items: center; gap: 6px; margin-top: calc(-1 * var(--sp-3)); padding-bottom: 2px; }
.subnav--models .subnav__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin-right: 4px; flex: none; }
.subnav--models a { font-size: 13px; padding: 7px 12px; background: var(--panel-2); font-weight: 500; }
.subnav--anchors { margin-top: calc(-1 * var(--sp-3)); }
.subnav--anchors a { font-size: 12px; }
@media (max-width: 900px) {
  /* Op mobiel schuift de balk horizontaal in plaats van af te breken. */
  .subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; }
}

/* --- Derde menulaag: subgroep waarvan de kop zelf een link is -------- */
.nav-group--sub { border: 0; margin: 0; }
.nav-group--sub > summary { display: flex; align-items: center; gap: 0; padding: 0; list-style: none; cursor: pointer; border-radius: 9px; }
.nav-group--sub > summary::-webkit-details-marker { display: none; }
.nav-group--sub > summary > a { flex: 1; min-width: 0; }
.nav-group--sub > summary > .chev { flex: none; padding: 8px 10px; font-size: 11px; color: var(--ink-3); border-radius: 7px; transition: transform .2s ease, background .15s; }
.nav-group--sub > summary > .chev:hover { background: var(--panel-2); color: var(--ink); }
.nav-group--sub[open] > summary > .chev { transform: rotate(180deg); }
.nav-group--sub > .nav-list { padding-left: 18px; margin-top: 1px; }
.nav-group--sub > .nav-list a { font-size: 13px; padding: 7px 10px; }

/* --- Formulier-kit voor de rekenmodules ------------------------------ */
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--panel-radius); overflow: hidden; background: var(--panel-2); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg label { flex: 1 1 auto; text-align: center; padding: 7px 12px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); cursor: pointer; border-left: 1px solid var(--border); transition: background .12s ease, color .12s ease; }
.seg label:first-of-type { border-left: 0; }
.seg label:hover { background: var(--panel); color: var(--ink); }
.seg input:checked + label { background: var(--accent-2); color: #fff; font-weight: 600; }
/* Outline en niet box-shadow: footer.css drukt de box-shadow van labels weg en dan
   ziet een toetsenbordgebruiker niet welke knop de focus heeft. */
/* Ring in de outline zelf, niet in een box-shadow: footer.css zet box-shadow: none !important op
   alles wat niet zelf de focus heeft, en het label ís niet gefocust. Op een gekozen tegel (accent)
   is de ring in de inktkleur, anders in de accentkleur. */
.seg input:focus-visible + label { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.seg input:focus-visible:checked + label { outline: 2px solid #fff; outline-offset: -3px; }
.seg label small { display: block; font-size: 11.5px; font-weight: 400; color: inherit; margin-top: 1px; }

.calc-row { display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 8px 18px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.calc-row:last-child { border-bottom: 0; }
.calc-row .lbl { font-size: 13px; font-weight: 600; color: var(--ink); }
.calc-row .lbl small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); line-height: 1.35; margin-top: 2px; }
.calc-row label.lbl { cursor: pointer; }
.dim-group input[aria-invalid="true"] { border-color: var(--st-alert-tekst); box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-alert-tekst) 25%, transparent); }
.dim-group input::placeholder { color: var(--ink-3); opacity: 1; }
.kc-veldfout { margin-top: 6px; font-size: 13px; color: var(--st-alert-tekst); }

/* --- Koelcalculator: uitkomstkaart, maatladder, plakbalk ------------- */
.kc-uitkomst { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--panel-2); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.kc-uitkomst__kop { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.kc-uitkomst__kw { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.kc-uitkomst__sub { font-size: 13px; color: var(--ink-2); margin: 4px 0 10px; line-height: 1.45; }
.kc-uitkomst__maat { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.kc-uitkomst__hulp { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-top: 3px; }
.kc-uitkomst__vast { font-size: 13px; color: var(--ink-2); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.kc-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 3px; margin-top: 10px; min-height: 22px; }
.kc-ladder:empty { display: none; }
.kc-trede { min-width: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; line-height: 24px; border: 1px solid var(--border); border-radius: 4px; color: var(--ink-3); background: var(--panel); }
.kc-trede.is-onder { background: color-mix(in srgb, var(--accent-2) 14%, var(--panel)); border-color: color-mix(in srgb, var(--accent-2) 30%, var(--border)); }
.kc-trede.is-maat { background: var(--accent-2); border-color: var(--accent-2); color: #fff; font-weight: 700; }
.kc-note { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; border-left: 2px solid var(--accent-2); padding-left: 10px; }
.kc-warmtelink { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kc-details { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
.kc-details summary { cursor: pointer; font-size: 12.5px; font-weight: 600; }
/* kc = de rekenpagina-kit, gedeeld door de koelcalculator en de warmtepomp-check. */
.kc-details--klein { margin-top: 8px; padding: 7px 10px; }
.kc-details--klein summary { color: var(--link); }
.kc-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.kc-rij-uit { opacity: .55; }
.kc-note p { margin: 0 0 6px; }
.kc-note p:last-child { margin-bottom: 0; }
.calc-row .lbl small.kc-tag { color: var(--link); }
.kc-form .calc-row.kc-rij-breed { grid-template-columns: 1fr; gap: 6px; }
.kc-drieluik { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.kc-drieluik__kop { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
/* Drie groepjes naast elkaar in een cel van ~690 px laten per knop maar ~74 px over; met de
   maat hierboven brak "Gemiddeld" af tot "Gemid-deld". Iets kleiner en strakker past hij. */
.kc-form .kc-drieluik .seg label { padding-left: 3px; padding-right: 3px; font-size: 11.5px; }
.kc-calc { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); line-height: 1.65; margin-top: 8px; white-space: pre-line; }
.kc-letop { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.kc-onder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--border); }
.kc-onder .kc-details { margin-top: 0; }
.kc-samenvatting-lbl { display: block; margin-top: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
/* Het ontwerp toont alleen de kopieerknop; het veld blijft bestaan voor de terugval bij
   kopieren (selecteren en Ctrl+C) en staat daarom buiten beeld in plaats van weg. */
.kc-samenvatting { width: 100%; margin-top: 4px; font: inherit; font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); color: var(--ink-2); resize: none; }
.kc-samenvatting--verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.kc-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--border); }
.kc-voet .note-line { flex: 1 1 260px; }
.kc-hersteld { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 13px; color: var(--ink); }
.kc-hersteld__knop { font: inherit; font-size: 13px; font-weight: 600; color: var(--link); background: none; border: 0; padding: 10px 8px; margin: -10px -8px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* De cel moet de hele rijhoogte krijgen (de ouder zet align-items: start), anders heeft het
   plakkende blok geen ruimte om mee te lopen met het formulier. */
.kc-zij { align-self: stretch; }
.kc-zij__vast { position: sticky; top: calc(var(--topbar-h) + 12px); display: flex; flex-direction: column; max-height: calc(100vh - var(--topbar-h) - 28px); }
.kc-zij__scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; min-height: 0;
  background: linear-gradient(var(--panel) 30%, transparent), linear-gradient(transparent, var(--panel) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 25%, transparent), transparent), radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 25%, transparent), transparent) 0 100%;
  background-repeat: no-repeat; background-size: 100% 28px, 100% 28px, 100% 16px, 100% 16px; background-attachment: local, local, scroll, scroll; }
.kc-zij__voet { flex: none; padding-top: 4px; }
/* De plakbalk-link en het anker springen niet onder de kopbalk. */
.kc-uitkomst:focus { outline: none; }
.kc-form .lbl label { cursor: pointer; }
.btn.btn-brand.is-uit { opacity: .55; cursor: not-allowed; }
.btn.btn-brand:focus-visible, .btn.btn-ghost:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; box-shadow: none; }
.btn.btn-brand:focus-visible { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
#uitleg .prose a { text-decoration: underline; text-underline-offset: 2px; }
.kc-form .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 0; background: var(--panel-2); border: 1px solid var(--border); border-right: 0; border-bottom: 0; }
.kc-form .seg label { border-left: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--panel-2); min-height: 40px; min-width: 0; padding: 6px 5px; font-size: 12px; hyphens: auto; overflow-wrap: anywhere; display: flex; flex-direction: column; justify-content: center; }
/* Acht windrichtingen (koelcalculator): een raster van acht op één rij; het auto-fit-raster hierboven zou bij 92 px per knop op zes en twee uitkomen. */
.kc-form .seg.seg--acht { grid-template-columns: repeat(8, 1fr); }
.kc-form .seg.seg--acht label { padding-left: 3px; padding-right: 3px; }
/* De knoppenrij volgt de breedte van zijn cel, niet van het scherm: in een smalle cel (tablet met
   twee kolommen, of een zijbalk erbij) twee kolommen, en een woord dat niet past breekt in plaats
   van dat de knop buiten beeld valt.
   Vanaf 1400 px staat het formulier zelf in twee kolommen en is elke cel per definitie smal; daar
   zet het blok onderaan dit blad deze meting uit en vangt flex-wrap het op. */
.kc-form .calc-row > div:last-child { container-type: inline-size; }
@container (max-width: 399px) {
  .kc-form [aria-labelledby] .seg, .kc-form .seg { grid-template-columns: 1fr 1fr; }
  /* De acht windrichtingen: twee rijen van vier, want twee kolommen worden vier rijen. */
  .kc-form .seg.seg--acht { grid-template-columns: repeat(4, 1fr); }
  .kc-form .seg label:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }
}
.kc-form .seg input:checked + label { background: var(--accent-2); }
.kc-mini { display: none; }
@media (min-width: 721px) {
  .kc-mini.is-zichtbaar { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: calc(var(--topbar-h) + 12px); z-index: 5; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 13px; font-weight: 600; color: var(--ink); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .12)); }
  .kc-mini.is-zichtbaar a { font-size: 13px; font-weight: 600; white-space: nowrap; }
}
@media (max-width: 720px) {
  .kc-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 5; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 13px; font-weight: 600; color: var(--ink); }
  .kc-mini a { font-size: 13px; font-weight: 600; white-space: nowrap; }
  .kc-zij__vast { position: static; max-height: none; display: block; }
  .kc-zij__scroll { overflow: visible; }
  .kc-onder { grid-template-columns: 1fr; }
}
/* Tot en met een tablet: één kolom (de kaart onder het formulier), de vraag boven de knoppen,
   en tikvlakken van 44 px. In twee kolommen kregen de knoppenrijen op een iPad 226 px en vielen
   de laatste knoppen buiten beeld. */
@media (max-width: 1024px) {
  .kc-panel .lw-split { grid-template-columns: minmax(0, 1fr); }
  .kc-form .calc-row { grid-template-columns: 1fr; gap: 6px; }
  .kc-zij__vast { position: static; max-height: none; display: block; }
  .kc-zij__scroll { overflow: visible; }
  .kc-start, .hero__cta .btn, #uitleg .btn, .kc-warmtelink { min-height: 44px; }
  .kc-details summary { padding: 13px 0; }
  .kc-mini a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 8px; margin: -10px -8px; }
  .kc-form .dim-group input { min-height: 44px; }
  .kc-form .seg label { min-height: 44px; padding: 7px 8px; }
  .kc-form .dim-group input:not(.wide) { width: 64px; }
  .kc-form .dim-group input.kc-postcode { width: 84px; }
  .kc-form .dim-group select { min-height: 44px; }
  .dim-group .u { white-space: nowrap; }
  .kc-voet .btn, .kc-zij .btn, .kc-onder .btn { min-height: 44px; }
  .info-list a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: -12px -6px; }
}
@media (max-width: 640px) {
  .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
  .seg label { border-left: 0; background: var(--panel-2); min-height: 44px; padding: 7px 10px; font-size: 12.5px; display: flex; flex-direction: column; justify-content: center; }
  .seg input:checked + label { background: var(--accent-2); }
  .kc-form .seg { grid-template-columns: 1fr 1fr; }
  /* Op een telefoon blijft een keuzeknop een touchdoel van 44 px; de compactere maat hierboven
     is voor de muis, niet voor de duim. */
  .kc-form .seg label { min-height: 44px; padding: 7px 10px; font-size: 12.5px; }
  .kc-form .seg label:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }
  .kc-mini__extra { display: none; }
  .kc-ladder--tien { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
  .kc-ladder--tien .kc-trede { font-size: 10.5px; }
}
.kc-form .kc-drieluik .seg { grid-template-columns: repeat(3, 1fr); }
.kc-form .kc-drieluik .seg--twee { grid-template-columns: repeat(2, 1fr); }
.kc-form .kc-drieluik .seg label:nth-of-type(odd):last-of-type { grid-column: auto; }

.dim-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Een groepje velden per invoerkeuze; hidden moet winnen van de inline-flex. */
.dim-group .kc-grp { display: inline-flex; align-items: center; gap: 8px; }
.dim-group .kc-grp[hidden] { display: none; }
.dim-group input { width: 80px; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); color: var(--ink); text-align: center; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.dim-group input.wide { width: 100%; max-width: 320px; text-align: left; }
.dim-group input.kc-postcode { width: 96px; }
.dim-group select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); color: var(--ink); }
.kc-hint--fout { color: var(--st-alert-tekst); }
.kc-tekstknop { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--link); text-decoration: underline; cursor: pointer; }
.dim-group input:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--focus-ring); }
.dim-group input[aria-invalid="true"]:focus { border-color: var(--st-alert-tekst); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-alert-tekst) 35%, transparent); }
.dim-group .x { color: var(--ink-3); font-size: 13px; }
.dim-group .u { color: var(--ink-3); font-size: 11.5px; }
@media (max-width: 640px) {
  .calc-row { grid-template-columns: 1fr; }
  .dim-group input { width: 72px; }
}

/* --- Rekenpagina's: kopknop, snelstart, voorbeeldmelding, adres ophalen ---- */
/* Het eyebrow-label boven het adviesgetal, zoals in het ontwerp: klein, mono, hoofdletters. */
.kc-uitkomst__eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--link); margin-bottom: 4px; }
.kc-tip { cursor: help; text-transform: none; letter-spacing: 0; }
/* De voortgangsbalk uit het ontwerp: hoe vol de gekozen toestelmaat zit. */
.kc-balk { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 9px 0 10px; }
.kc-balk > div { height: 100%; width: 0; background: var(--accent-2); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .kc-balk > div { transition: none; } }

/* De knop "Opnieuw beginnen" hoort rechts in de paneelkop, na de meta-tekst. */
.panel__head .kc-kopknop { margin-left: 10px; flex: none; }
/* Op een telefoon past hij niet meer naast de titel en viel hij half buiten het scherm. Daar
   springt hij naar een eigen regel onder de titel, rechts uitgelijnd. */
@media (max-width: 640px) {
  .kc-panel .panel__head { flex-wrap: wrap; }
  .panel__head .kc-kopknop { margin-left: auto; }
}

/* Snel starten: een rij voorbeeldruimtes die alle keuzes in een keer zet. */
.kc-snel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.kc-snel__kop { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.kc-snel__uitleg { font-size: 11.5px; color: var(--ink-3); flex: 1 1 100%; }
@media (max-width: 1024px) { .kc-snel .chip { min-height: 44px; } }

/* De melding dat de uitkomst nog op de voorbeeldwaarden staat. */
.kc-voorbeeld { display: flex; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; background: var(--panel-2); font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.kc-voorbeeld i { color: var(--link); }

/* Het huisnummerveld draagt de toevoeging mee (12A), dus het is iets breder. */
.dim-group input.kc-huisnummer { width: 88px; }
@media (max-width: 1024px) { .kc-form .dim-group input.kc-huisnummer { width: 76px; } }

/* Compact op een groot scherm, zodat de hele rekenkaart in beeld past zonder te scrollen
   (zoals in het ontwerp). Onder 1025 px blijft alles op tikmaat: daar geldt dit niet. */
.kc-panel__body { padding: var(--sp-4) var(--sp-5); }
.kc-sectie { margin-top: var(--sp-4); margin-bottom: 4px; }
.kc-sectie--eerste { margin-top: 0; }
/* Beschermd telefoonnummer of e-mailadres (View::veiligContact). Zolang JavaScript het nog
   niet heeft ingevuld staat er "Bel ons" of "Mail ons" met een link naar het contactformulier;
   daarna de echte waarde. Een losse link (niet als knop) volgt de opmaak van de omringende lijst. */
.veilig-contact { color: inherit; text-decoration: none; }
.veilig-contact:hover { text-decoration: underline; text-underline-offset: 2px; }
.info-list .veilig-contact { font-family: var(--font-mono); white-space: nowrap; }

/* De hero van een rekenpagina: tekst links, beeld rechts. Het beeldvak loopt mee met de hoogte
   van de tekst ernaast in plaats van op een vaste 180 px te staan, en de illustratie past er
   helemaal in (contain) in plaats van dat de bovenkant eraf valt. */
.kc-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: var(--sp-5) var(--sp-6); align-items: stretch; }
.kc-hero__beeld { min-height: 220px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel-2); display: flex; }
.kc-hero__beeld > * { flex: 1 1 auto; min-width: 0; }
.kc-hero__beeld picture { display: flex; flex: 1 1 auto; min-width: 0; }
.kc-hero__beeld img, .kc-hero__beeld svg, .kc-hero__beeld image-slot { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 720px) {
  .kc-hero { grid-template-columns: minmax(0, 1fr); }
  .kc-hero__beeld { min-height: 180px; }
}
.kc-intro { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 74ch; margin: 0 0 10px; }

@media (min-width: 1025px) {
  .kc-panel__body { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .kc-form .calc-row { padding: 4px 0; gap: 6px 18px; }
  .kc-form .seg label { min-height: 34px; padding: 5px 6px; }
  .kc-form .calc-row .lbl small { line-height: 1.3; margin-top: 1px; }
  .kc-panel .kc-sectie { margin-top: 10px; margin-bottom: 2px; }
  .kc-snel { margin-bottom: 8px; }
  .kc-voet { margin-top: 10px; padding-top: 8px; }
  .kc-uitkomst { padding: 10px 12px; }
  .kc-uitkomst__kw { font-size: 26px; }
  .info-list .row { padding: 5px 0; }
  .kc-voorbeeld { margin-top: 8px; padding: 6px 9px; }
  .kc-note { margin-top: 8px; }
  .kc-details { margin-top: 8px; padding: 7px 10px; }
  .kc-letop { margin-top: 8px; }
  .kc-samenvatting-lbl { margin-top: 8px; }
  /* De uitkomstkaart loopt mee als een gewoon plakkend blok met zijn eigen hoogte, zoals in het
     ontwerp. De eerdere opzet (een kolom zo hoog als het venster met een eigen schuifbalk) maakte
     het paneel altijd hoger dan het scherm, waardoor de kaart nooit in een keer in beeld paste. */
  .kc-panel .kc-zij { align-self: start; }
  .kc-panel .kc-zij__vast { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: none; display: block; }
  .kc-panel .kc-zij__scroll { overflow: visible; background: none; }
}

/* De toelichting bij de uitkomst staat vanaf een tablet onder de kaart over de volle breedte,
   in tekstkolommen. In de smalle kolom naast het formulier was dezelfde tekst acht regels hoog en
   duwde hij de onderkant van de kaart buiten beeld; hier zijn het drie regels per kolom. Op een
   telefoon zet warmteverlies.js hem terug in de kaart, boven de knoppen, want daar staat maar een
   kolom en dan hoort de uitleg bij de getallen te blijven.
   Dit blok staat bewust ná het blok hierboven: `.kc-note { margin-top: 8px }` daarin heeft
   hetzelfde gewicht, dus alleen de volgorde beslist.
   De koelcalculator houdt zijn toelichting wel in de kaart: daar is het formulier de langste
   kolom en zou een strook eronder de kaart juist hoger maken. */
.kc-note--breed { margin-top: var(--sp-3); }
@media (min-width: 1025px) {
  .kc-note--breed { columns: 280px 5; column-gap: 26px; }
  /* Elke alinea blijft in een kolom staan: gesplitst midden in een zin leest hij niet meer. */
  .kc-note--breed p { break-inside: avoid; }
}

/* Vanaf een breed scherm staan de vragen in twee kolommen naast elkaar. Een vraag is smal
   (een label, een veld of een rijtje keuzeknoppen) en de kolom is dat niet, dus onder elkaar
   liep de kaart een half scherm door: je moest scrollen voor de laatste vraag terwijl de
   uitkomst ernaast al uit beeld was. Naast elkaar past het geheel in een scherm.
   Het label staat dan boven het veld: voor een labelkolom van 164 px is in een halve kolom
   geen plek. Een rij met drie groepjes knoppen (de isolatie van dak, gevel en vloer) of met
   de acht windrichtingen houdt de volle breedte; die past niet in een halve kolom. */
@media (min-width: 1400px) {
  .kc-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-5); row-gap: 0; }
  .kc-form > * { grid-column: 1 / -1; }
  .kc-form > .calc-row { grid-column: auto; }
  .kc-form > .calc-row:has(.seg--acht),
  .kc-form > .calc-row:has(.kc-drieluik .seg:not(.seg--twee)) { grid-column: 1 / -1; }
  .kc-form .calc-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 3px 0; align-content: start; }
  .kc-form .calc-row.kc-rij-breed { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* De knoppenrij keek naar zijn eigen cel en zette onder 399 px twee knoppen per rij; in een
     halve kolom zou elke rij dus in tweeen breken. De cel is daarom geen maatvoerder meer. */
  .kc-form .calc-row > div:last-child { container-type: normal; }
  /* De knoppen vullen de rij op in plaats van dat ze in een raster staan: bij vijf keuzes in
     vier kolommen bleef er anders een leeg vak met randen naast de laatste knop staan. */
  .kc-form .seg { display: flex; flex-wrap: wrap; }
  .kc-form .seg label { flex: 1 1 76px; }
  /* De drie groepjes van de isolatierij blijven wel een vast rijtje van drie: daar hoort
     slecht-gemiddeld-goed naast elkaar te staan, ook als het krap is. Net zo blijven de acht
     windrichtingen een raster van acht (die rij houdt hierboven de volle breedte). */
  .kc-form .kc-drieluik .seg { display: grid; }
  .kc-form .seg.seg--acht { display: grid; }
}

/* Draaiend rondje zolang het adres wordt opgehaald. */
.kc-spinner { width: 15px; height: 15px; flex: none; border: 2px solid var(--border); border-top-color: var(--accent-2); border-radius: 50%; animation: kc-draai .7s linear infinite; }
.kc-spinner[hidden] { display: none; }
@keyframes kc-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kc-spinner { animation-duration: 2.4s; } }

/* --- Projecten: filterbalk, kaartraster, feiten, galerij, stappen ---- */
.pr-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.pr-hero-stats b { display: block; font-family: var(--font-mono); font-size: 22px; color: var(--ink); line-height: 1.1; }
.pr-hero-stats span { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }

.pr-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--sp-4); }
.pr-filter .zoek { position: relative; flex: 1 1 220px; min-width: 180px; }
.pr-filter .zoek i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 13px; }
.pr-filter input { width: 100%; font: inherit; font-size: 13.5px; padding: 8px 11px 8px 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); color: var(--ink); }
.pr-filter input:focus { border-color: var(--accent-2); outline: none; box-shadow: var(--focus-ring); }

.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-4); }
.pr-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel-2); overflow: hidden; text-decoration: none; transition: border-color .14s, transform .14s; }
.pr-card:hover { border-color: var(--accent-2); transform: translateY(-2px); text-decoration: none; }
.pr-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--panel-2); overflow: hidden; }
.pr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pr-card__badge { position: absolute; left: 10px; top: 10px; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(9, 13, 24, .72); color: #fff; }
.pr-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pr-card__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 5px 10px; }
.pr-card h3 { font-size: 15.5px; margin: 0; color: var(--ink); line-height: 1.35; }
.pr-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0; flex: 1; }
.pr-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; }
.pr-card__go { color: var(--link); font-weight: 600; }
.pr-leeg { font-size: 14px; color: var(--ink-2); padding: var(--sp-4) 0; }

.pr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px var(--sp-5); }
.pr-facts div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.pr-facts span:first-child { color: var(--ink-2); }
.pr-facts span:last-child { font-family: var(--font-mono); color: var(--ink); text-align: right; }

.pr-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.pr-gal .slot { aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.pr-gal .slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-gal .slot.groot { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .pr-gal .slot.groot { grid-column: span 1; aspect-ratio: 4 / 3; } }

.pr-steps { counter-reset: st; display: grid; gap: 12px; margin: 0; padding: 0; }
.pr-steps li { counter-increment: st; list-style: none; display: flex; gap: 12px; align-items: flex-start; }
.pr-steps li::before { content: counter(st, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: #fff; background: var(--accent-2); border-radius: 7px; padding: 4px 7px; flex: none; line-height: 1.2; }
.pr-steps p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.pr-steps strong { color: var(--ink); }

/* --- Kennisbank: artikel, kruimelpad, inhoudsopgave, codeblokken ----- */
.kb-art h2 { font-size: 17px; margin: var(--sp-5) 0 10px; }
.kb-art h3 { font-size: 15px; margin: var(--sp-4) 0 8px; }
.kb-art p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0 0 12px; max-width: 78ch; }
.kb-art ul { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0 0 12px; padding-left: 20px; }
.kb-art li { margin-bottom: 5px; }

.kb-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; }
.kb-meta span { display: inline-flex; align-items: center; gap: 5px; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.kb-tags a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink-2); text-decoration: none; background: var(--panel-2); }
.kb-tags a:hover { border-color: var(--accent-2); color: var(--ink); text-decoration: none; }
.kb-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-bottom: 12px; }
.kb-crumbs a { color: var(--ink-2); text-decoration: none; }
.kb-crumbs a:hover { color: var(--link); }

.kb-toc ol { margin: 0; padding-left: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: var(--sp-5); }
.kb-toc li { counter-increment: toc; margin-bottom: 6px; break-inside: avoid; }
.kb-toc a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; display: flex; gap: 8px; }
.kb-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--link); padding-top: 2px; }
.kb-toc a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 640px) { .kb-toc ol { columns: 1; } }

pre.code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; white-space: pre; -webkit-overflow-scrolling: touch; }
pre.code.lang::before { content: attr(data-lang); display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }

/* Terminal-stijl codeblok met labelbalk en kopieerknop. De kleuren staan
   hier bewust vast: een terminal is donker, ook in de dagstand. */
.codewrap { margin: 0 0 14px; border: 1px solid var(--border-strong, var(--border)); border-radius: 10px; overflow: hidden; background: #0e1421; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.codewrap .codebar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-bottom: 1px solid rgba(255, 255, 255, .10); background: #141c2e; }
.codewrap .codebar .dots { display: inline-flex; gap: 5px; flex: none; }
.codewrap .codebar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: block; }
.codewrap .codebar .dots i:first-child { background: #e0654a; }
.codewrap .codebar .dots i:nth-child(2) { background: #d9a516; }
.codewrap .codebar .dots i:nth-child(3) { background: #3fae6a; }
.codewrap .codebar .lbl { flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codewrap pre.code { margin: 0; border: 0; border-radius: 0; padding: 14px 16px; background: #0e1421; color: #dde6f5; }
.codewrap pre.code.lang::before { display: none; }
.codewrap .copybtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 7px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .82); cursor: pointer; transition: border-color .12s, background .12s, color .12s; flex: none; }
.codewrap .copybtn:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .12); color: #fff; }
.codewrap .copybtn.ok { background: #3fae6a; border-color: #3fae6a; color: #fff; }
.codewrap .copybtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.kb-nextprev { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.kb-nextprev a { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel-2); text-decoration: none; }
.kb-nextprev a:hover { border-color: var(--accent-2); text-decoration: none; }
.kb-nextprev .dir { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.kb-nextprev .ttl { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* --- Zoeken en filteren: lege staat en teller ------------------------ */
.zoek-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* --- Prijstabel met een brede omschrijvingskolom --------------------- */
.price-table.wide-desc td:last-child,.price-table.wide-desc th:last-child{white-space:normal;text-align:left;font-family:inherit;color:var(--ink-2);font-size:13px;line-height:1.5}
.price-table.wide-desc td:nth-child(2){white-space:normal;line-height:1.5}
.price-table.wide-desc th:first-child,.price-table.wide-desc td:first-child{white-space:nowrap}
.price-table.wide-desc{table-layout:fixed}
.price-table.wide-desc th:nth-child(1){width:15%}
.price-table.wide-desc th:nth-child(2){width:34%}
.price-table.wide-desc th:nth-child(3){width:15%}
.price-table.wide-desc.cols-type th:nth-child(1){width:22%}
.price-table.wide-desc.cols-type th:nth-child(2){width:30%}
.price-table.wide-desc.cols-type td:first-child{white-space:normal}

/* --- Kennisbankoverzicht: kaarten, filterbalk en downloads ----------- */
.kb-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--border)}
.kb-hero-stats div{display:flex;flex-direction:column;gap:2px}
.kb-hero-stats b{font-family:var(--font-mono);font-size:20px;color:var(--ink);line-height:1.1}
.kb-hero-stats span{font-size:11.5px;color:var(--ink-3);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.kb-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:var(--sp-4)}
.kb-filter .zoek{position:relative;flex:1 1 220px;min-width:180px}
.kb-filter .zoek i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:13px}
.kb-filter input{width:100%;font:inherit;font-size:13.5px;padding:8px 11px 8px 32px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--ink)}
.kb-filter input:focus{border-color:var(--accent-2);outline:none}
.kb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.kb-card{display:flex;flex-direction:column;gap:9px;position:relative;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--panel-2);padding:var(--sp-4);text-decoration:none;overflow:hidden;transition:border-color .14s,transform .14s}
.kb-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-2);opacity:0;transition:opacity .14s}
.kb-card:hover{border-color:var(--border-strong,var(--accent-2));transform:translateY(-2px);text-decoration:none}
.kb-card:hover::before{opacity:1}
.kb-card__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.kb-card__cat{padding:2px 7px;border:1px solid var(--border);border-radius:999px;color:var(--ink-2)}
.kb-card__new{padding:2px 7px;border-radius:999px;background:var(--accent-2);color:#fff}
.kb-card h3{font-size:15.5px;margin:0;color:var(--ink);line-height:1.35}
.kb-card p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0;flex:1}
.kb-card__go{font-size:13px;color: var(--link);font-weight:600}
.kb-leeg{font-size:14px;color:var(--ink-2);padding:var(--sp-4) 0}
.kb-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px var(--sp-5)}
.kb-stack div{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--border)}
.kb-stack span:first-child{color:var(--ink-2)}
.kb-stack span:last-child{font-family:var(--font-mono);color:var(--ink)}
.kb-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-4)}
.kb-dl a{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--panel-2);padding:var(--sp-4);text-decoration:none}
.kb-dl a:hover{border-color:var(--accent-2);text-decoration:none}
.kb-dl i{color: var(--link);font-size:17px;flex:none;margin-top:1px}
.kb-dl b{display:block;font-family:var(--font-mono);font-size:13px;color:var(--ink);word-break:break-all}
.kb-dl small{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:3px}

/* --- Tweekoloms blok dat op een telefoon onder elkaar valt -----------
   Het ontwerp zet deze verdeling als inline stijl op het element zelf.
   Inline wint van een stylesheet, dus een mediaquery kwam er niet meer
   tussen: op 375px werd de tekstkolom tot één woord per regel geknepen
   terwijl de foto eroverheen viel. De verdeling staat daarom nu in
   variabelen, die het element wél inline mag meegeven, en de kolomregel
   zelf staat hier waar de mediaquery erbij kan. */
.lw-split {
  display: grid;
  grid-template-columns: minmax(0, var(--lw-split-a, 1.5fr)) minmax(var(--lw-split-min, 250px), var(--lw-split-b, 1fr));
}
@media (max-width: 720px) {
  .lw-split { grid-template-columns: minmax(0, 1fr); }
}


/* Het logo in de kop van het uitschuifmenu. Iets ruimer dan in de kopbalk: dit paneel is de
   volle schermbreedte, dus daar mag het merk wat groter staan. */
.portal-slide-logo-v20 { display: inline-flex; align-items: center; }
.portal-slide-logo-v20 img {
  display: block;
  /* Veertig, want de sluitknop ernaast meet 44: op 32 oogde het logo als het kleinere van de twee
     terwijl het de kop van dit paneel is. */
  height: 40px; width: auto;
  max-width: 220px; object-fit: contain;
}
[data-resolved-theme="dark"] .portal-slide-logo-v20 img {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35));
}

/* De drie A's en de drie weergaveknoppen krijgen dezelfde kleuren van dit thema; de MATEN staan
   in _local_portal/css/letterschaal.css en horen overal gelijk te blijven. Het is één rijtje van
   zes en een gekozen stand mag de vorm niet laten verspringen. */
.letterschaal,
.theme-switch {
  --letterschaal-lijn: var(--border);
  --letterschaal-vlak: var(--panel-2);
  --letterschaal-inkt: var(--ink-2);
  --letterschaal-aan: var(--accent);
  --letterschaal-aan-inkt: #fff;
  --letterschaal-hover: var(--bg-2);
}

/* ── Hulpklassen voor de sjablonen ───────────────────────────────────────
   Alle opmaak die tot v014.11.280 als style-attribuut in de sjablonen stond, staat hier als klasse:
   handnamen voor wat vaak voorkomt (lw-intro, lw-kaart-link, lw-beeldvak-340), automatische namen
   (lw-a-...) voor de rest. Eén plek om iets aan te passen. Gegenereerd en bijgehouden met
   scripts/lodewijk-inline-stijl.php (--css geeft dit blok); een nieuwe pagina gebruikt deze klassen
   en geen style-attribuut (LodewijkInlineStijlTest bewaakt dat). */
/* @lw-hulpklassen-begin */
/* Hulpklassen uit de omzetting van de style-attributen (v014.11.278 en v014.11.280, scripts/lodewijk-inline-stijl.php).
   Een style-attribuut won van elke regel in dit blad; een losse klasse verliest van `.panel h2` of `.prose p`.
   Daarom dragen deze klassen `!important`, net als de utilities van Bootstrap: ze zetten op één element iets
   vast en horen altijd te winnen. Nieuwe klasse nodig? Voeg hem hier toe, met dezelfde naamgeving. */
.lw-mb-5 { margin-bottom: var(--sp-5) !important; }
.lw-rij { display: flex !important; gap: 8px !important; align-items: flex-start !important; }
.lw-noot { font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.5 !important; margin: 0 !important; }
.lw-rij-icoon { color: var(--link) !important; font-size: 14px !important; margin-top: 2px !important; flex: none !important; }
.lw-tekst-mb { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
.lw-mt-4 { margin-top: var(--sp-4) !important; }
.lw-tekst { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; }
.lw-split-breed { --lw-split-a: 1.6fr !important; --lw-split-min: 250px !important; --lw-split-b: 1fr !important; gap: var(--sp-4) var(--sp-5) !important; align-items: stretch !important; }
.lw-tekst-strak { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.55 !important; }
.lw-kader-4-3 { aspect-ratio: 4/3 !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-rij-11 { display: flex !important; gap: 11px !important; align-items: flex-start !important; }
.lw-kop-strak { font-size: 15px !important; margin-bottom: 4px !important; }
.lw-pad-6 { padding: var(--sp-6) !important; }
.lw-mb-10 { margin-bottom: 10px !important; }
.lw-rij-icoon-groot { color: var(--link) !important; font-size: 17px !important; margin-top: 1px !important; flex: none !important; }
.lw-grid-240 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: 12px var(--sp-5) !important; }
.lw-intro { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.65 !important; max-width: 74ch !important; margin-bottom: var(--sp-4) !important; }
.lw-icoon-link { color: var(--link) !important; margin-top: 2px !important; }
.lw-kop-1 { font-size: clamp(24px,3vw,34px) !important; margin-bottom: 12px !important; }
.lw-scheiding { margin-top: var(--sp-5) !important; padding-top: var(--sp-5) !important; border-top: 1px solid var(--border) !important; }
.lw-rij-icoon-klein { color: var(--link) !important; font-size: 13px !important; margin-top: 3px !important; flex: none !important; }
.lw-kop-3 { font-size: 17px !important; margin-bottom: 10px !important; }
.lw-grid-240-strak { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: 0 var(--sp-5) !important; margin-top: var(--sp-4) !important; }
.lw-split-tekst-beeld { --lw-split-a: 1.45fr !important; --lw-split-min: 280px !important; --lw-split-b: .85fr !important; gap: var(--sp-5) var(--sp-6) !important; align-items: stretch !important; }
.lw-split-smal { --lw-split-a: 1.6fr !important; --lw-split-min: 200px !important; --lw-split-b: 1fr !important; gap: var(--sp-4) var(--sp-5) !important; align-items: stretch !important; }
.lw-flex { display: flex !important; }
.lw-beeldvak-150 { flex: 1 !important; min-height: 150px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-beeldvak-340 { border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden !important; background: var(--panel-2) !important; min-height: 340px !important; }
.lw-beeldvak-190 { border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; min-height: 190px !important; }
.lw-beeldvak-200 { border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; min-height: 200px !important; }
.lw-mt-18 { margin-top: 18px !important; }
.lw-rij-tekst { display: flex !important; gap: 9px !important; align-items: flex-start !important; font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.55 !important; }
.lw-icoon-link-3 { color: var(--link) !important; margin-top: 3px !important; flex: none !important; }
.lw-tabel-520 { min-width: 520px !important; }
.lw-mt-12 { margin-top: 12px !important; }
.lw-label-link { font-size: 13px !important; color: var(--link) !important; font-weight: 600 !important; }
.lw-tabel-560 { min-width: 560px !important; }
.lw-mt-16 { margin-top: 16px !important; }
.lw-kaart-plat { box-shadow: none !important; margin-top: 0 !important; display: flex !important; flex-direction: column !important; }
.lw-kaart-beeld-120 { height: 120px !important; border-bottom: 1px solid var(--border) !important; background: var(--panel-2) !important; }
.lw-kolom-8 { display: flex !important; flex-direction: column !important; gap: 8px !important; flex: 1 !important; }
.lw-rij-midden { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.lw-fs-155 { font-size: 15.5px !important; }
.lw-lijst-klein { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 5px !important; margin-top: 2px !important; font-size: 13px !important; color: var(--ink-2) !important; }
.lw-kaart-voet { margin-top: auto !important; padding-top: 10px !important; border-top: 1px dashed var(--border) !important; font-family: var(--font-mono) !important; font-size: 12px !important; color: var(--ink-3) !important; line-height: 1.5 !important; }
.lw-intro-breed { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.65 !important; margin-bottom: var(--sp-4) !important; max-width: 78ch !important; }
.lw-mt-5 { margin-top: var(--sp-5) !important; }
.lw-boven { align-self: start !important; }
.lw-kaart-link { display: flex !important; flex-direction: column !important; border: 1px solid var(--border) !important; border-radius: var(--panel-radius) !important; background: var(--panel-2) !important; overflow: hidden !important; text-decoration: none !important; }
.lw-kaart-inhoud { padding: var(--sp-4) !important; display: flex !important; flex-direction: column !important; gap: 7px !important; flex: 1 !important; }
.lw-kaart-titel { font-size: 15px !important; margin: 0 !important; color: var(--ink) !important; }
.lw-noot-vul { font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.5 !important; margin: 0 !important; flex: 1 !important; }
.lw-mb-12 { margin-bottom: 12px !important; }
.lw-mt-14 { margin-top: 14px !important; }
.lw-beeld-vul { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.lw-fs-15 { font-size: 15px !important; }
.lw-rij-verdeeld { display: flex !important; flex-wrap: wrap !important; gap: var(--sp-4) !important; align-items: center !important; justify-content: space-between !important; }
.lw-kop-2 { font-size: 19px !important; margin-bottom: 6px !important; }
.lw-pad-4-5 { padding: var(--sp-4) var(--sp-5) !important; }
.lw-etiket { font-size: 10.5px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--ink-2) !important; font-weight: 700 !important; margin: 0 0 3px !important; }
.lw-tekst-14 { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.55 !important; margin: 0 !important; }
.lw-beeldvak-150-vast { min-height: 150px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-grid-270 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)) !important; gap: var(--sp-5) var(--sp-6) !important; }
.lw-grid-280 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important; gap: var(--sp-5) var(--sp-6) !important; align-items: start !important; }
.lw-beeldvak-200-vast { height: 200px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-intro-klein { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; max-width: 74ch !important; margin-bottom: var(--sp-4) !important; }
.lw-beeldvak-340-wit { border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden !important; background: #fff !important; min-height: 340px !important; }
.lw-beeld-pas { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
.lw-knop-klein { font-size: 13px !important; padding: 8px 13px !important; }
.lw-kader-4-3-wit { aspect-ratio: 4/3 !important; background: #fff !important; }
.lw-rij-icoon-16 { color: var(--link) !important; font-size: 16px !important; margin-top: 2px !important; flex: none !important; }
.lw-kop-klein { font-size: 14px !important; margin-bottom: 3px !important; }
.lw-tekst-14-los { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.5 !important; }
.lw-kop-1-klein { font-size: clamp(23px,2.8vw,32px) !important; margin-bottom: 12px !important; }
.lw-tabel-640 { min-width: 640px !important; }
.lw-intro-16 { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-bottom: var(--sp-4) !important; max-width: 74ch !important; }
.lw-mt-5-mb-12 { margin-top: var(--sp-5) !important; margin-bottom: 12px !important; }
.lw-pil { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--link) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; padding: 2px 7px !important; }
.lw-grid-160 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)) !important; gap: var(--sp-3) !important; }
.lw-etiket-12 { font-size: 12px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--ink-2) !important; font-weight: 600 !important; margin: 0 0 var(--sp-3) !important; }
.lw-fs-15-strak { font-size: 15px !important; margin: 0 !important; }
.lw-intro-mb-5 { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-bottom: var(--sp-5) !important; max-width: 74ch !important; }
.lw-a-d-contents { display: contents !important; }
.lw-a-fs-20px { font-size: 20px !important; }
.lw-a-mt-sp-6 { margin-top: var(--sp-6) !important; }
.lw-a-fs-44px { font-size: 44px !important; }
.lw-a-fs-12px_c-ink-3_mt-4px { font-size: 12px !important; color: var(--ink-3) !important; margin-top: 4px !important; }
.lw-a-mt-sp-3 { margin-top: var(--sp-3) !important; }
.lw-a-fs-13p5px_c-ink-2 { font-size: 13.5px !important; color: var(--ink-2) !important; }
.lw-a-c-ink { color: var(--ink) !important; }
.lw-a-c-ink-2_mb-12px { color: var(--ink-2) !important; margin-bottom: 12px !important; }
.lw-a-bg-panel-2 { background: var(--panel-2) !important; }
.lw-a-d-flex_jc-space-between_mb-6px { display: flex !important; justify-content: space-between !important; margin-bottom: 6px !important; }
.lw-a-c-ink-3 { color: var(--ink-3) !important; }
.lw-a-c-ink-2_fs-13p5px { color: var(--ink-2) !important; font-size: 13.5px !important; }
.lw-a-bg-panel-2_c-ink-2_bc-border { background: var(--panel-2) !important; color: var(--ink-2) !important; border-color: var(--border) !important; }
.lw-a-c-link { color: var(--link) !important; }
.lw-a-mw-720px { max-width: 720px !important; }
.lw-a-c-ink-2_mb-14px { color: var(--ink-2) !important; margin-bottom: 14px !important; }
.lw-a-c-st-warn { color: var(--st-warn) !important; }
.lw-a-d-grid_gtc-auto280px-1fr_g-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important; gap: var(--sp-4) !important; }
.lw-a-b-1px-solid-border_br-10px_p-sp-4_bg-panel-2_d-flex_fd-column_g-10px { border: 1px solid var(--border) !important; border-radius: 10px !important; padding: var(--sp-4) !important; background: var(--panel-2) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.lw-a-d-flex_ai-center_g-9px { display: flex !important; align-items: center !important; gap: 9px !important; }
.lw-a-c-link_fs-18px { color: var(--link) !important; font-size: 18px !important; }
.lw-a-ff-font-mono_fs-10p5px_ls-p06em_tt-uppercase_c-link { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--link) !important; }
.lw-a-fs-17px_lh-1p25 { font-size: 17px !important; line-height: 1.25 !important; }
.lw-a-lst-none_d-flex_fd-column_g-6px_fs-13px_c-ink-2 { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 6px !important; font-size: 13px !important; color: var(--ink-2) !important; }
.lw-a-mt-auto_pt-6px { margin-top: auto !important; padding-top: 6px !important; }
.lw-a-mb-sp-4 { margin-bottom: var(--sp-4) !important; }
.lw-a-fd-row_ai-center_g-14px_fwr-wrap { flex-direction: row !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; }
.lw-a-fs-15px_mb-12px { font-size: 15px !important; margin-bottom: 12px !important; }
.lw-a-fs-15px_c-ink-2_lh-1p65_mb-sp-5_mw-74ch { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.65 !important; margin-bottom: var(--sp-5) !important; max-width: 74ch !important; }
.lw-a-d-grid_gtc-auto240px-1fr_g-sp-5_ai-start_mb-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: var(--sp-5) !important; align-items: start !important; margin-bottom: var(--sp-5) !important; }
.lw-a-fs-15px_c-ink-2_lh-1p65_mw-74ch { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.65 !important; max-width: 74ch !important; }
.lw-a-fs-14p5px_c-ink-2_lh-1p6_mb-sp-4 { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-bottom: var(--sp-4) !important; }
.lw-a-d-flex_fwr-wrap_g-10px { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.lw-a-mnw-600px { min-width: 600px !important; }
.lw-a-mnw-760px { min-width: 760px !important; }
.lw-a-d-grid_gtc-auto280px-1fr_g-10px-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important; gap: 10px var(--sp-5) !important; }
.lw-a-mt-8px { margin-top: 8px !important; }
.lw-a-d-grid_gtc-auto240px-1fr_g-12px-sp-5_mt-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: 12px var(--sp-5) !important; margin-top: var(--sp-4) !important; }
.lw-a-mb-14px { margin-bottom: 14px !important; }
.lw-a-gtc-repeat4-1fr { grid-template-columns: repeat(4,1fr) !important; }
.lw-a-h-80px_mw-200px_b-1px-solid-border_br-8px_ov-hidden_bg-panel-2 { height: 80px !important; max-width: 200px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-a-mnw-680px { min-width: 680px !important; }
.lw-a-d-flex_fwr-wrap_g-10px_ai-center_jc-space-between { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; justify-content: space-between !important; }
.lw-a-mnw-920px { min-width: 920px !important; }
.lw-a-mnw-620px { min-width: 620px !important; }
.lw-a-d-grid_gtc-auto150px-1fr_g-sp-2_mt-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) !important; gap: var(--sp-2) !important; margin-top: var(--sp-4) !important; }
.lw-a-m-sp-5-0-12px { margin: var(--sp-5) 0 12px !important; }
.lw-a-mnw-660px { min-width: 660px !important; }
.lw-a-lwsplita-1p5fr_lwsplitmin-220px_lwsplitb-1fr_g-sp-4-sp-5_ai-start { --lw-split-a: 1.5fr !important; --lw-split-min: 220px !important; --lw-split-b: 1fr !important; gap: var(--sp-4) var(--sp-5) !important; align-items: start !important; }
.lw-a-h-220px_b-1px-solid-border_br-8px_ov-hidden_bg-panel-2 { height: 220px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-a-m-sp-3-0 { margin: var(--sp-3) 0 !important; }
.lw-a-fs-13px_c-ink-3_lh-1p6_m-0 { font-size: 13px !important; color: var(--ink-3) !important; line-height: 1.6 !important; margin: 0 !important; }
.lw-a-mt-6px { margin-top: 6px !important; }
.lw-a-columns-2_columngap-32px { columns: 2 !important; column-gap: 32px !important; }
.lw-a-m-0 { margin: 0 !important; }
.lw-a-d-grid_gtc-auto260px-1fr_g-sp-5_ai-start { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)) !important; gap: var(--sp-5) !important; align-items: start !important; }
.lw-a-b-1px-solid-border_br-10px_p-sp-4_bg-panel-2 { border: 1px solid var(--border) !important; border-radius: 10px !important; padding: var(--sp-4) !important; background: var(--panel-2) !important; }
.lw-a-ff-font-mono_fs-11px_ls-p06em_tt-uppercase_c-link_mb-6px { font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--link) !important; margin-bottom: 6px !important; }
.lw-a-fs-21px_fw-700_lh-1p2_mb-8px { font-size: 21px !important; font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
.lw-a-w-100pct_mt-14px_jc-center { width: 100% !important; margin-top: 14px !important; justify-content: center !important; }
.lw-a-d-grid_gtc-auto250px-1fr_g-sp-3 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) !important; gap: var(--sp-3) !important; }
.lw-a-d-grid_gtc-auto280px-1fr_g-sp-4-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important; gap: var(--sp-4) var(--sp-5) !important; }
.lw-a-fs-12px_ls-p08em_tt-uppercase_c-ink-2_fw-600_m-0-0-10px { font-size: 12px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--ink-2) !important; font-weight: 600 !important; margin: 0 0 10px !important; }
.lw-a-fs-14p5px_c-ink-2_lh-1p6_pl-20px_m-0 { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; padding-left: 20px !important; margin: 0 !important; }
.lw-a-d-grid_gtc-auto150px-1fr_g-sp-2 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) !important; gap: var(--sp-2) !important; }
.lw-a-d-grid_gtc-auto230px-1fr_g-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)) !important; gap: var(--sp-4) !important; }
.lw-a-ar-4-3_bg-panel-2 { aspect-ratio: 4/3 !important; background: var(--panel-2) !important; }
.lw-a-d-grid_gtc-repeatauto-fill-minmax230px-1fr_g-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)) !important; gap: var(--sp-4) !important; }
.lw-a-d-grid_gtc-auto200px-1fr_g-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)) !important; gap: var(--sp-4) !important; }
.lw-a-c-ink-2_fs-14p5px_mw-56ch_lh-1p6 { color: var(--ink-2) !important; font-size: 14.5px !important; max-width: 56ch !important; line-height: 1.6 !important; }
.lw-a-d-grid_gtc-auto240px-1fr_g-sp-4-sp-5_mt-sp-5_pt-sp-5_bt-1px-solid-border { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: var(--sp-4) var(--sp-5) !important; margin-top: var(--sp-5) !important; padding-top: var(--sp-5) !important; border-top: 1px solid var(--border) !important; }
.lw-a-d-grid_gtc-auto280px-1fr_g-sp-5-sp-6 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important; gap: var(--sp-5) var(--sp-6) !important; }
.lw-a-d-flex_ai-center_g-9px_pb-10px_mb-12px_bb-1px-solid-border { display: flex !important; align-items: center !important; gap: 9px !important; padding-bottom: 10px !important; margin-bottom: 12px !important; border-bottom: 1px solid var(--border) !important; }
.lw-a-c-link_fs-17px { color: var(--link) !important; font-size: 17px !important; }
.lw-a-fs-14p5px { font-size: 14.5px !important; }
.lw-a-lst-none_d-flex_fd-column_g-11px { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 11px !important; }
.lw-a-d-grid_gtc-auto280px-1fr_g-sp-4-sp-6 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important; gap: var(--sp-4) var(--sp-6) !important; }
.lw-a-d-flex_g-14px_ai-flex-start { display: flex !important; gap: 14px !important; align-items: flex-start !important; }
.lw-a-fx-none_w-30px_h-30px_br-999px_b-1px-solid-border_bg-panel-2_d-flex_ai-cent { flex: none !important; width: 30px !important; height: 30px !important; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--panel-2) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-mono) !important; font-size: 13px !important; color: var(--link) !important; font-weight: 700 !important; }
.lw-a-d-grid_gtc-auto250px-1fr_g-sp-4-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) !important; gap: var(--sp-4) var(--sp-5) !important; }
.lw-a-fs-15px_c-ink-2_lh-1p65_mt-12px { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.65 !important; margin-top: 12px !important; }
.lw-a-lwsplita-1p25fr_lwsplitmin-280px_lwsplitb-p75fr_g-sp-5-sp-6_ai-start { --lw-split-a: 1.25fr !important; --lw-split-min: 280px !important; --lw-split-b: .75fr !important; gap: var(--sp-5) var(--sp-6) !important; align-items: start !important; }
.lw-a-fs-14px { font-size: 14px !important; }
.lw-a-fw-400_c-ink-3 { font-weight: 400 !important; color: var(--ink-3) !important; }
.lw-a-mt-10px { margin-top: 10px !important; }
.lw-a-w-100pct_mt-10px_jc-center { width: 100% !important; margin-top: 10px !important; justify-content: center !important; }
.lw-a-w-100pct_mt-8px_jc-center { width: 100% !important; margin-top: 8px !important; justify-content: center !important; }
.lw-a-fs-14p5px_c-ink-2_lh-1p6_mw-74ch_mb-12px { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; max-width: 74ch !important; margin-bottom: 12px !important; }
.lw-a-fs-12p5px_c-ink-3_mt-12px { font-size: 12.5px !important; color: var(--ink-3) !important; margin-top: 12px !important; }
.lw-a-c-ink-2_fs-14p5px_mw-60ch_lh-1p6 { color: var(--ink-2) !important; font-size: 14.5px !important; max-width: 60ch !important; line-height: 1.6 !important; }
.lw-a-fs-12p5px_c-ink-3 { font-size: 12.5px !important; color: var(--ink-3) !important; }
.lw-a-d-grid_gtc-auto230px-1fr_g-sp-3 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)) !important; gap: var(--sp-3) !important; }
.lw-a-b-1px-solid-border_br-10px_p-14px-16px_bg-panel-2 { border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 14px 16px !important; background: var(--panel-2) !important; }
.lw-a-fs-14p5px_mb-5px { font-size: 14.5px !important; margin-bottom: 5px !important; }
.lw-a-fs-14px_c-ink-2_lh-1p55 { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.55 !important; }
.lw-a-lwsplita-1p4fr_lwsplitmin-240px_lwsplitb-1fr_g-sp-4-sp-5_ai-start { --lw-split-a: 1.4fr !important; --lw-split-min: 240px !important; --lw-split-b: 1fr !important; gap: var(--sp-4) var(--sp-5) !important; align-items: start !important; }
.lw-a-mt-14px_h-160px_b-1px-solid-border_br-8px_ov-hidden_bg-panel-2 { margin-top: 14px !important; height: 160px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-a-lwsplita-1p5fr_lwsplitmin-230px_lwsplitb-1fr_g-sp-4-sp-5_ai-start { --lw-split-a: 1.5fr !important; --lw-split-min: 230px !important; --lw-split-b: 1fr !important; gap: var(--sp-4) var(--sp-5) !important; align-items: start !important; }
.lw-a-mnw-780px { min-width: 780px !important; }
.lw-a-gtc-repeat3-1fr { grid-template-columns: repeat(3,1fr) !important; }
.lw-a-ta-center_p-sp-6 { text-align: center !important; padding: var(--sp-6) !important; }
.lw-a-fs-22px_mb-8px { font-size: 22px !important; margin-bottom: 8px !important; }
.lw-a-m-0-auto-18px { margin: 0 auto 18px !important; }
.lw-a-jc-center { justify-content: center !important; }
.lw-a-d-flex_fwr-wrap_g-6px_ai-center_ff-font-mono_fs-11p5px_c-ink-3_mb-12px { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; font-family: var(--font-mono) !important; font-size: 11.5px !important; color: var(--ink-3) !important; margin-bottom: 12px !important; }
.lw-a-c-ink-2_td-none { color: var(--ink-2) !important; text-decoration: none !important; }
.lw-a-lwsplita-1p35fr_lwsplitmin-280px_lwsplitb-p9fr_g-sp-5-sp-6_ai-stretch { --lw-split-a: 1.35fr !important; --lw-split-min: 280px !important; --lw-split-b: .9fr !important; gap: var(--sp-5) var(--sp-6) !important; align-items: stretch !important; }
.lw-a-b-1px-solid-border_br-10px_ov-hidden_bg-panel-2_mh-320px { border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden !important; background: var(--panel-2) !important; min-height: 320px !important; }
.lw-a-p-0_m-0 { padding: 0 !important; margin: 0 !important; }
.lw-a-b-1px-solid-border_br-panel-radius_bg-panel-2_p-sp-4 { border: 1px solid var(--border) !important; border-radius: var(--panel-radius) !important; background: var(--panel-2) !important; padding: var(--sp-4) !important; }
.lw-a-d-flex_ai-center_g-9px_mb-10px { display: flex !important; align-items: center !important; gap: 9px !important; margin-bottom: 10px !important; }
.lw-a-fs-14px_c-ink-2_lh-1p6_m-0-0-10px { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin: 0 0 10px !important; }
.lw-a-fs-13px_c-ink-3_lh-1p55_m-0 { font-size: 13px !important; color: var(--ink-3) !important; line-height: 1.55 !important; margin: 0 !important; }
.lw-a-c-ink-2 { color: var(--ink-2) !important; }
.lw-a-d-grid_gtc-auto260px-1fr_g-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)) !important; gap: var(--sp-4) !important; }
.lw-a-d-flex_ai-center_g-9px_mb-9px { display: flex !important; align-items: center !important; gap: 9px !important; margin-bottom: 9px !important; }
.lw-a-d-inline-flex_ai-center_jc-center_w-24px_h-24px_br-50pct_bg-accent-2_c-fff { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--accent-2) !important; color: #fff !important; font-size: 12.5px !important; font-weight: 700 !important; flex: none !important; }
.lw-a-fs-14px_c-ink-2_lh-1p6_m-0-0-9px { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin: 0 0 9px !important; }
.lw-a-b-1px-solid-border_br-8px_ov-hidden_bg-panel-2_mh-210px { border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; min-height: 210px !important; }
.lw-a-d-grid_gtc-minmax0-1fr-minmax0-1fr_g-sp-4-sp-5_ai-start { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: var(--sp-4) var(--sp-5) !important; align-items: start !important; }
.lw-a-fs-14p5px_c-ink-2_lh-1p6_m-0 { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin: 0 !important; }
.lw-a-mt-sp-5_pt-sp-4_bt-1px-solid-border { margin-top: var(--sp-5) !important; padding-top: var(--sp-4) !important; border-top: 1px solid var(--border) !important; }
.lw-a-d-flex_fwr-wrap_g-10px_ai-flex-end_mb-12px { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: flex-end !important; margin-bottom: 12px !important; }
.lw-a-d-flex_fd-column_g-5px_fs-12p5px_c-ink-2_fw-600 { display: flex !important; flex-direction: column !important; gap: 5px !important; font-size: 12.5px !important; color: var(--ink-2) !important; font-weight: 600 !important; }
.lw-a-ff-font-mono_fs-14px_p-8px-11px_b-1px-solid-border_br-8px_bg-panel-2_c-ink { font-family: var(--font-mono) !important; font-size: 14px !important; padding: 8px 11px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; background: var(--panel-2) !important; color: var(--ink) !important; width: 150px !important; }
.lw-a-d-flex_g-6px_fwr-wrap_ai-center { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; align-items: center !important; }
.lw-a-lwsplita-2fr_lwsplitmin-230px_lwsplitb-p85fr_g-sp-5-sp-6_ai-start { --lw-split-a: 2fr !important; --lw-split-min: 230px !important; --lw-split-b: .85fr !important; gap: var(--sp-5) var(--sp-6) !important; align-items: start !important; }
.lw-a-fs-15px_c-ink-2_lh-1p6_mb-sp-4 { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-bottom: var(--sp-4) !important; }
.lw-a-fs-14px_mb-5px { font-size: 14px !important; margin-bottom: 5px !important; }
.lw-a-mnw-720px { min-width: 720px !important; }
.lw-a-d-none { display: none !important; }
.lw-a-lwsplita-1p6fr_lwsplitmin-250px_lwsplitb-1fr_g-sp-4-sp-5_ai-start { --lw-split-a: 1.6fr !important; --lw-split-min: 250px !important; --lw-split-b: 1fr !important; gap: var(--sp-4) var(--sp-5) !important; align-items: start !important; }
.lw-a-lwsplita-1p55fr_lwsplitmin-210px_lwsplitb-p9fr_g-sp-4-sp-5_ai-stretch { --lw-split-a: 1.55fr !important; --lw-split-min: 210px !important; --lw-split-b: .9fr !important; gap: var(--sp-4) var(--sp-5) !important; align-items: stretch !important; }
.lw-a-fs-14p5px_c-ink-2_lh-1p6_mb-10px { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-bottom: 10px !important; }
.lw-a-mt-sp-4_pt-sp-4_bt-1px-solid-border { margin-top: var(--sp-4) !important; padding-top: var(--sp-4) !important; border-top: 1px solid var(--border) !important; }
.lw-a-d-grid_gtc-auto230px-1fr_g-10px-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)) !important; gap: 10px var(--sp-5) !important; }
.lw-a-fs-12p5px_c-link_cur-pointer_fw-600 { font-size: 12.5px !important; color: var(--link) !important; cursor: pointer !important; font-weight: 600 !important; }
.lw-a-d-grid_gtc-auto230px-1fr_g-0-sp-5_mt-sp-3 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)) !important; gap: 0 var(--sp-5) !important; margin-top: var(--sp-3) !important; }
.lw-a-fs-12px_c-ink-2_lh-1p55_mt-sp-3 { font-size: 12px !important; color: var(--ink-2) !important; line-height: 1.55 !important; margin-top: var(--sp-3) !important; }
.lw-a-mt-sp-4_b-1px-solid-border_br-10px_bg-panel-2_p-sp-4 { margin-top: var(--sp-4) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--panel-2) !important; padding: var(--sp-4) !important; }
.lw-a-d-grid_gtc-auto215px-1fr_g-12px-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(215px,1fr)) !important; gap: 12px var(--sp-5) !important; }
.lw-a-fs-14px_fw-700_c-ink_m-0-0-3px { font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; margin: 0 0 3px !important; }
.lw-a-fs-12px_c-ink-2_lh-1p55_m-sp-3-0-0 { font-size: 12px !important; color: var(--ink-2) !important; line-height: 1.55 !important; margin: var(--sp-3) 0 0 !important; }
.lw-a-fs-13p5px_c-ink-2_lh-1p6_mt-sp-4_pt-sp-4_bt-1px-solid-border { font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-top: var(--sp-4) !important; padding-top: var(--sp-4) !important; border-top: 1px solid var(--border) !important; }
.lw-a-d-grid_gtc-auto270px-1fr_g-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)) !important; gap: var(--sp-4) !important; }
.lw-a-b-1px-solid-border_br-10px_bg-panel-2_p-sp-4_d-flex_fd-column_g-11px { border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--panel-2) !important; padding: var(--sp-4) !important; display: flex !important; flex-direction: column !important; gap: 11px !important; }
.lw-a-d-flex_g-9px_ai-flex-start { display: flex !important; gap: 9px !important; align-items: flex-start !important; }
.lw-a-d-inline-flex_ai-center_jc-center_w-22px_h-22px_br-50pct_bg-accent-2_c-fff { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: var(--accent-2) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; flex: none !important; }
.lw-a-fs-15px_m-0-0-3px { font-size: 15px !important; margin: 0 0 3px !important; }
.lw-a-ar-16-10_b-1px-solid-border_br-8px_ov-hidden_bg-panel { aspect-ratio: 16/10 !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel) !important; }
.lw-a-mt-auto_pt-9px_bt-1px-solid-border { margin-top: auto !important; padding-top: 9px !important; border-top: 1px solid var(--border) !important; }
.lw-a-d-grid_gtc-auto120px-1fr_g-14px_mt-sp-5_pt-sp-5_bt-1px-solid-border { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)) !important; gap: 14px !important; margin-top: var(--sp-5) !important; padding-top: var(--sp-5) !important; border-top: 1px solid var(--border) !important; }
.lw-a-d-block_ff-font-mono_fs-20px_c-ink_lh-1p1 { display: block !important; font-family: var(--font-mono) !important; font-size: 20px !important; color: var(--ink) !important; line-height: 1.1 !important; }
.lw-a-fs-11p5px_c-ink-3_ff-font-mono_ls-p04em_tt-uppercase { font-size: 11.5px !important; color: var(--ink-3) !important; font-family: var(--font-mono) !important; letter-spacing: .04em !important; text-transform: uppercase !important; }
.lw-a-p-0_m-0_lst-none_d-grid_g-12px { padding: 0 !important; margin: 0 !important; list-style: none !important; display: grid !important; gap: 12px !important; }
.lw-a-d-flex_g-12px_ai-flex-start { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
.lw-a-ff-font-mono_fs-12px_c-fff_bg-accent-2_br-7px_p-4px-7px_fx-none_lh-1p2 { font-family: var(--font-mono) !important; font-size: 12px !important; color: #fff !important; background: var(--accent-2) !important; border-radius: 7px !important; padding: 4px 7px !important; flex: none !important; line-height: 1.2 !important; }
.lw-a-m-0_fs-13p5px_c-ink-2_lh-1p55 { margin: 0 !important; font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.55 !important; }
.lw-a-ar-4-3_b-1px-solid-border_br-10px_ov-hidden_bg-panel-2 { aspect-ratio: 4/3 !important; border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-a-fs-13p5px_c-ink-2_lh-1p6_mt-sp-3 { font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.6 !important; margin-top: var(--sp-3) !important; }
.lw-a-d-grid_gtc-auto260px-1fr_g-12px-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)) !important; gap: 12px var(--sp-5) !important; }
.lw-a-fs-13p5px_c-ink-2_lh-1p55_mt-10px { font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.55 !important; margin-top: 10px !important; }
.lw-a-b-1px-solid-border_br-8px_ov-hidden_bg-panel-2_mh-170px { border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; min-height: 170px !important; }
.lw-a-d-flex_fd-column_g-10px { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.lw-a-b-1px-solid-border_br-8px_ov-hidden_bg-panel-2_mh-150px { border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; min-height: 150px !important; }
.lw-a-fs-13px_c-ink-2_m-6px-0-0 { font-size: 13px !important; color: var(--ink-2) !important; margin: 6px 0 0 !important; }
.lw-a-d-grid_gtc-auto250px-1fr_g-sp-4 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) !important; gap: var(--sp-4) !important; }
.lw-a-d-flex_fd-column_g-9px_b-1px-solid-border_br-panel-radius_bg-panel-2_p-sp-4 { display: flex !important; flex-direction: column !important; gap: 9px !important; border: 1px solid var(--border) !important; border-radius: var(--panel-radius) !important; background: var(--panel-2) !important; padding: var(--sp-4) !important; text-decoration: none !important; }
.lw-a-d-flex_ai-baseline_jc-space-between_g-10px { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; }
.lw-a-fs-15p5px_m-0_c-ink { font-size: 15.5px !important; margin: 0 !important; color: var(--ink) !important; }
.lw-a-fs-11px_c-ink-3_fx-none { font-size: 11px !important; color: var(--ink-3) !important; flex: none !important; }
.lw-a-fs-12px_c-link_m-0 { font-size: 12px !important; color: var(--link) !important; margin: 0 !important; }
.lw-a-fs-13p5px_c-ink-2_lh-1p55_m-0_fx-1 { font-size: 13.5px !important; color: var(--ink-2) !important; line-height: 1.55 !important; margin: 0 !important; flex: 1 !important; }
.lw-a-mnw-820px { min-width: 820px !important; }
.lw-a-b-1px-solid-border_br-8px_ov-hidden_bg-panel-2_mh-180px { border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; min-height: 180px !important; }
.lw-a-fs-13px_c-ink-3_ff-font-mono_ls-p05em_tt-uppercase_m-0-0-8px { font-size: 13px !important; color: var(--ink-3) !important; font-family: var(--font-mono) !important; letter-spacing: .05em !important; text-transform: uppercase !important; margin: 0 0 8px !important; }
.lw-a-mnw-700px { min-width: 700px !important; }
.lw-a-d-grid_gtc-auto150px-1fr_g-sp-2_mt-16px { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) !important; gap: var(--sp-2) !important; margin-top: 16px !important; }
.lw-a-h-130px_b-1px-solid-border_br-8px_ov-hidden_bg-panel-2 { height: 130px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-a-d-grid_gtc-auto240px-1fr_g-sp-4-sp-5_mt-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: var(--sp-4) var(--sp-5) !important; margin-top: var(--sp-5) !important; }
.lw-a-fs-12p5px_c-ink-3_mt-6px { font-size: 12.5px !important; color: var(--ink-3) !important; margin-top: 6px !important; }
.lw-a-fs-15px_c-ink-2_lh-1p65_mb-0_mw-78ch { font-size: 15px !important; color: var(--ink-2) !important; line-height: 1.65 !important; margin-bottom: 0 !important; max-width: 78ch !important; }
.lw-a-mnw-960px { min-width: 960px !important; }
.lw-a-mnw-940px { min-width: 940px !important; }
.lw-a-fs-15px_m-sp-5-0-10px { font-size: 15px !important; margin: var(--sp-5) 0 10px !important; }
.lw-a-mnw-840px { min-width: 840px !important; }
.lw-a-mt-sp-4_d-grid_gtc-auto200px-1fr_g-sp-4 { margin-top: var(--sp-4) !important; display: grid !important; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)) !important; gap: var(--sp-4) !important; }
.lw-a-d-grid_gtc-auto240px-1fr_g-sp-4-sp-5 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) !important; gap: var(--sp-4) var(--sp-5) !important; }
.lw-a-mt-14px_h-170px_b-1px-solid-border_br-8px_ov-hidden_bg-panel-2 { margin-top: 14px !important; height: 170px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; background: var(--panel-2) !important; }
.lw-a-lwsplita-1fr_lwsplitmin-260px_lwsplitb-1fr_g-sp-4-sp-5_ai-start { --lw-split-a: 1fr !important; --lw-split-min: 260px !important; --lw-split-b: 1fr !important; gap: var(--sp-4) var(--sp-5) !important; align-items: start !important; }
.lw-a-mnw-340px { min-width: 340px !important; }
.lw-a-mnw-1000px { min-width: 1000px !important; }
.lw-a-mnw-1020px { min-width: 1020px !important; }
.lw-a-mnw-800px { min-width: 800px !important; }
.lw-a-mnw-860px { min-width: 860px !important; }
.lw-a-p-0_m-0_lst-none_d-grid_g-12px_counterreset-st { padding: 0 !important; margin: 0 !important; list-style: none !important; display: grid !important; gap: 12px !important; counter-reset: st !important; }
.lw-a-counterincrement-st_d-flex_g-12px_ai-flex-start { counter-increment: st !important; display: flex !important; gap: 12px !important; align-items: flex-start !important; }
.lw-a-fs-14p5px_ls-p01em { font-size: 14.5px !important; letter-spacing: .01em !important; }
.lw-a-bg-panel-2_h-100pct { background: var(--panel-2) !important; height: 100% !important; }
.lw-a-fs-15px_mb-10px { font-size: 15px !important; margin-bottom: 10px !important; }
.lw-a-c-st-ok { color: var(--st-ok) !important; }
/* @lw-hulpklassen-einde */