/* ============================================================
   Sky Banden - huisstijl bovenop Bootstrap 5.3
   Bootstrap doet het raster en de utilities; dit bestand zet de
   tokens, de typografie en alle eigen onderdelen.

   Huisstijl in het kort:
     - Werkplaats, geen webshop: beton-grijze ondergrond, witte
       kaarten, asfaltzwarte koppen. De pagina mag "hard" ogen.
     - Rood is signaal, geen behang: alleen op acties, iconen en
       accenten. De hoofdmassa is zwart/wit/grijs.
     - Diagonale waarschuwingsstrepen (hazard) als merkdetail onder
       de kop en boven de voettekst - hetzelfde gevoel als de vloer
       van een garage.
     - Techniek zichtbaar maken: kenteken, tijden en cijfers in
       tabulaire cijfers, kleine bovenschriften (eyebrow) boven een
       blok, en een open/gesloten-status die echt klopt.

   Opbouw:
      1. Tokens
      2. Basis en typografie
      3. Knoppen en formulieren
      4. Header, navigatie, statusbalk en vertrouwensbalk
      5. Hero
      6. Secties en sectiekoppen
      7. Kaarten en tegels
      8. Media
      9. Paneel (contactformulier)
     10. Diensten-schakelaar (menu + werkblad)
     11. Openingstijden
     12. Paginabouwer-blokken
     13. Footer
     14. Zwevende acties (naar boven, mobiele belbalk)
     15. Toegankelijkheid, print en beweging
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@600;700;800&family=Saira:wght@400;500;600;700&display=swap');

/* ---------- 1. Tokens ---------- */
:root{
  /* Merk. --accent wordt door de header uit het beheer geïnjecteerd. */
  --accent:  #b00020;
  --accent2: #d1002a;
  --accent-600: color-mix(in srgb, var(--accent) 84%, #000);
  --accent-050: color-mix(in srgb, var(--accent) 7%,  #fff);
  --accent-120: color-mix(in srgb, var(--accent) 14%, #fff);
  --accent-line: color-mix(in srgb, var(--accent) 26%, #fff);

  /* Inkt en vlakken. Het canvas is bewust grijzer dan de kaarten,
     anders lopen kaart en achtergrond in elkaar over. */
  --ink:     #0e1116;
  --ink-2:   #3c444e;
  /* Was #79818c: dat haalde 3,94:1 op wit, 3,55:1 op --bg en 3,39:1 op
     --surface-2 en bleef daarmee overal onder de 4,5:1. Deze tint haalt
     5,30 / 4,78 / 4,56 en blijft duidelijk lichter dan --ink-2. */
  --muted:   #656c76;
  --line:    #e2e5e9;
  --line-2:  #cbd1d8;
  --bg:      #f2f3f5;
  --surface: #ffffff;
  --surface-2:#eceef1;
  --dark:    #0e1116;
  --dark-2:  #171b21;
  --dark-3:  #232830;

  /* Status */
  --ok:      #1e8e3e;
  --ok-050:  #eaf6ee;
  /* Was #b8860b: als icoon of randkleur haalde dat 2,97:1 op het eigen
     let-op-vlak, net onder de 3:1 die een dragend teken nodig heeft.
     Deze tint haalt 3,51 op dat vlak, 3,85 op wit en 3,47 op --bg, en is
     op het oog hetzelfde donkere goud. */
  --warn:    #a87a09;
  --warn-050:#fbf4e3;

  /* Vorm */
  --r-sm:  6px;
  --r:    10px;
  --r-lg: 16px;
  --pill: 999px;

  --shadow-1: 0 1px 2px rgba(14,17,22,.06);
  --shadow:   0 1px 2px rgba(14,17,22,.05), 0 6px 20px -8px rgba(14,17,22,.18);
  --shadow-lg:0 24px 50px -22px rgba(14,17,22,.40);

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 76px;

  --font-display: "Saira Condensed", system-ui, sans-serif;
  --font-body:    "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bootstrap laten meelopen met de huisstijl */
  --bs-body-bg:        var(--bg);
  --bs-body-color:     var(--ink);
  --bs-border-color:   var(--line);
  --bs-border-radius:  var(--r);
  --bs-link-color:     var(--accent);
  --bs-link-color-rgb: 176, 0, 32;
  --bs-focus-ring-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Werkplaatstexturen. Alle drie bewust op het randje van zichtbaar: ze mogen
   het vlak leven geven, niet de aandacht van de inhoud afpakken.
     - dots  = geperforeerde staalplaat, voor de grijze banen
     - tread = bandenprofiel, schuine fijne strepen voor donkere vlakken
     - grid  = werkbladraster, voor de witte banen */
:root{
  --tex-dots:  radial-gradient(rgba(14,17,22,.07) 1px, transparent 1.6px) 0 0 / 22px 22px;
  --tex-grid:  linear-gradient(rgba(14,17,22,.028) 1px, transparent 1px) 0 0 / 100% 38px,
               linear-gradient(90deg, rgba(14,17,22,.028) 1px, transparent 1px) 0 0 / 38px 100%;
  --tex-tread: repeating-linear-gradient(-45deg,
                 rgba(255,255,255,.028) 0 2px, transparent 2px 10px);
}

/* Hazard: de diagonale waarschuwingsstreep. Als variabele zodat we hem
   op meerdere plekken identiek kunnen inzetten. */
:root{
  --hazard: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 14px,
    var(--ink)    14px 28px
  );
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

/* ---------- 2. Basis en typografie ---------- */
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body{
  font-family: var(--font-body);
  background:
    /* zachte veeg rechtsboven: geeft het vlak diepte zonder ruis */
    radial-gradient(900px 420px at 100% -60px, rgba(14,17,22,.05), transparent 70%),
    var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main{ flex: 1 0 auto; }

a{ color: var(--accent); text-decoration:none; transition: color .14s var(--ease); }
a:hover{ color: var(--accent-600); }

h1,h2,h3,h4,h5{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink);
}
.fw-black{ font-weight:800 !important; }
.text-accent{ color: var(--accent) !important; }
/* Tegenhanger van .text-accent voor het let-op-blok: daar hoort het icoon de
   waarschuwingskleur te dragen en niet het rood van een actie. */
.text-warn{ color: var(--warn) !important; }
.text-muted{ color: var(--muted) !important; }

p{ margin-bottom: 1rem; }
strong,b{ font-weight:700; color: var(--ink); }
/* Op donkere vlakken erft vet gewoon de tekstkleur - anders valt het weg. */
.dark-card strong, .dark-card b,
.section-dark strong, .section-dark b,
.cta-band strong, .cta-band b,
.footer-pro strong, .footer-pro b,
.panel-head strong, .menu-link.active strong{ color: inherit; }

/* Vanaf 992px gebruiken de hero en het split-blok `g-lg-5` / `g-xl-5`: die
   rijen trekken zichzelf 24px naar buiten, terwijl de container standaard
   maar 12px binnenmarge heeft. Op de breedtes waar de container geen speling
   meer overhoudt (precies op 992px, en tussen 1400 en 1465px) stak de pagina
   daardoor een paar pixels uit en verscheen er een horizontale scrollbalk.
   Dezelfde binnenmarge als de grootste gutter haalt dat weg. */
@media (min-width: 992px){
  .container{ padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* Op een breed scherm mag de inhoud meeademen; anders staat alles in een
   smalle kolom met veel leegte links en rechts. */
@media (min-width: 1400px){ .container{ max-width: 1440px; } }
.measure{ max-width: 68ch; }

/* Cijfers, kentekens en tijden uitlijnen als in een werkorder */
.num, .metric .n, .footer-hours-row, .topbar-item, .status-pill,
input[name="plate"], #plate{ font-variant-numeric: tabular-nums; }

/* Kenteken in de bekende gele stijl - kleine knipoog, grote herkenning */
#plate{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
#plate:not(:placeholder-shown){
  background: #f7d117;
  border-color: #d9b400;
  color: #101010;
}

/* Bovenschrift boven een blok: klein, rood, gespatieerd */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-body);
  font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent);
  margin-bottom:.55rem;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background: var(--accent); border-radius:2px;
}
.eyebrow-light{ color: rgba(255,255,255,.8); }
.eyebrow-light::before{ background: var(--accent2); }

/* Hazard-band: herbruikbaar streepje "werkplaatsvloer" */
.hazard{ height:6px; background: var(--hazard); background-size: auto; }

/* ---------- 3. Knoppen en formulieren ---------- */
.btn{
  --bs-btn-font-weight: 700;
  font-family: var(--font-body);
  border-radius: var(--r-sm);
  letter-spacing:.01em;
  padding:.6rem 1.05rem;
  transition: background .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.btn-lg{ padding:.8rem 1.3rem; font-size:1rem; }

.btn-accent{
  background: var(--accent); border:1.5px solid var(--accent); color:#fff;
}
.btn-accent:hover{
  background: var(--accent-600); border-color: var(--accent-600); color:#fff;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  transform: translateY(-1px);
}
.btn-accent:active{ transform: translateY(1px); box-shadow:none; }

.btn-outline-dark{
  border:1.5px solid var(--ink) !important; color: var(--ink) !important; background:#fff;
}
.btn-outline-dark:hover{ background: var(--ink); color:#fff !important; transform: translateY(-1px); }

.btn-light-accent{
  background:#fff; color: var(--accent); border:1.5px solid var(--accent-line);
}
.btn-light-accent:hover{ background: var(--accent); border-color: var(--accent); color:#fff; }

/* Knop op donkere ondergrond (header, footer) */
.btn-ghost{
  background: rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.18);
  color:#fff;
}
.btn-ghost:hover{ background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); color:#fff; }

.btn-wa{ background:#25d366; border:1.5px solid #25d366; color:#0b2e18; }
.btn-wa:hover{ background:#1fb857; border-color:#1fb857; color:#062a12; }

/* Formulier */
.form-label{ color: var(--ink-2); font-weight:600; font-size:.88rem; margin-bottom:.3rem; }
.form-control, .form-select{
  border-radius: var(--r-sm);
  border:1.5px solid var(--line);
  background-color:#fff; color: var(--ink);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.form-control-lg, .form-select-lg{ font-size:.98rem; padding:.62rem .8rem; }
/* Bootstrap haalt bij een keuzelijst de systeempijl weg (appearance:none) en
   tekent er zelf een als achtergrondafbeelding. De regel hierboven zette
   background als verkorte notatie en wiste die afbeelding, en de padding
   hierboven haalde ook de ruimte ernaast weg: de keuzelijst zag er daarna
   precies zo uit als een tekstveld ernaast. Eigen pijl in de inktkleur. */
.form-select, .form-select-lg{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233c444e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 12px 8px;
  padding-right: 2.3rem;
}
.form-control::placeholder{ color:#a2a9b2; }
.form-control:focus, .form-select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 14%, transparent);
}
.form-msg{ font-size:.9rem; color: var(--muted); }
.form-msg.is-ok{ color: var(--ok); font-weight:600; }
.form-msg.is-err{ color: var(--accent); font-weight:600; }
.form-control.is-invalid{ border-color: var(--accent) !important; }
.form-control.is-valid{ border-color: var(--ok) !important; }

/* ---------- 4. Header, navigatie, statusbalk en vertrouwensbalk ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background: var(--accent); color:#fff; padding:.6rem 1rem; font-weight:700;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; color:#fff; }

/* Alleen de navigatiebalk plakt. De topbalk en de vertrouwensbalk staan er
   los boven en onder en scrollen gewoon weg - zo verandert er tijdens het
   scrollen niets aan de hoogte van de balk en springt de pagina nooit. */
.site-header{
  position: sticky; top:0; z-index:1030;
  background: var(--dark);
}
.site-header::after{
  content:""; display:block; height:4px; background: var(--hazard);
}
/* Alleen een schaduw als de balk los over de inhoud ligt: puur visueel,
   geen hoogteverandering, dus geen sprong in de pagina. */
.site-header.is-stuck{ box-shadow: 0 10px 26px -18px rgba(0,0,0,.85); }

/* Topbalk: status links, contact rechts */
.topbar{
  background:#080a0d;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:.34rem 0;
  font-size:.83rem;
  color: rgba(255,255,255,.62);
}
.topbar-inner{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center; justify-content:space-between; }
.topbar-group{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; align-items:center; }
.topbar-item{ display:inline-flex; align-items:center; gap:.4rem; color: rgba(255,255,255,.66); }
.topbar-item i{ color: var(--accent2); font-size:.95em; }
.topbar a{ color: rgba(255,255,255,.82); }
.topbar a:hover{ color:#fff; }

/* Open / gesloten - de belangrijkste regel van de hele site voor een garage */
.status-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.16rem .6rem .16rem .5rem;
  border-radius: var(--pill);
  font-size:.79rem; font-weight:700; letter-spacing:.01em;
  border:1px solid transparent;
}
.status-pill .dot{ width:7px; height:7px; border-radius:50%; background: currentColor; flex:none; }
/* Open = groen vlak, gesloten = rood vlak. Geen twijfel mogelijk, ook niet
   vanuit een ooghoek: dit is de eerste vraag van elke bezoeker. */
.status-pill.is-open{
  color:#fff; background: var(--ok); border-color: var(--ok);
}
.status-pill.is-open .dot{
  background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);
  animation: sb-pulse 2.4s infinite;
}
.status-pill.is-closed{
  color:#fff; background: var(--accent); border-color: var(--accent);
}
.status-pill.is-closed .dot{ background:#fff; }
@keyframes sb-pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow:0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* Navigatie */
.nav-premium{
  background: var(--dark) !important;
  padding-top:.55rem; padding-bottom:.55rem;
  transition: padding .2s var(--ease);
}
.navbar-brand{ gap:.75rem; }
.navbar-brand img{ display:block; transition: height .2s var(--ease); }
.brand-tag{
  display:none; padding-left:.75rem; border-left:1px solid rgba(255,255,255,.16);
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:.72rem; font-weight:700; color: rgba(255,255,255,.55); line-height:1.25;
}
@media (min-width:1200px){ .brand-tag{ display:block; } }

.navbar .navbar-nav{ gap:.1rem; }
.navbar .nav-link{
  color: rgba(255,255,255,.76) !important;
  font-weight:600; font-size:.95rem;
  padding:.5rem .85rem !important;
  border-radius: var(--r-sm);
  position:relative;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.navbar .nav-link:hover{ color:#fff !important; background: rgba(255,255,255,.07); }
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{ color:#fff !important; }
.navbar .nav-link.active::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.16rem;
  height:3px; background: var(--accent2); border-radius:2px;
}
.nav-cta{ display:flex; gap:.5rem; align-items:center; }
.nav-cta .btn{ white-space:nowrap; }
.nav-phone{
  display:none; text-align:right; line-height:1.15; margin-right:.25rem;
}
.nav-phone .lbl{ display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.45); font-weight:700; }
.nav-phone a{ font-family: var(--font-display); font-size:1.12rem; font-weight:700; color:#fff; }
.nav-phone a:hover{ color: var(--accent2); }
@media (min-width:1400px){ .nav-phone{ display:block; } }

.navbar-toggler{
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius: var(--r-sm); padding:.4rem .55rem;
}
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler-icon{ filter: invert(1) grayscale(1) brightness(1.7); }

/* Tussen 992 en 1199px is er geen ruimte voor twee knoppen naast een
   menu van zes items: alleen de belknop blijft staan. */
@media (min-width: 992px) and (max-width: 1199.98px){
  .nav-cta .btn-ghost{ display:none; }
  .navbar .nav-link{ padding:.5rem .6rem !important; font-size:.9rem; }
  .navbar .nav-link.active::after{ left:.6rem; right:.6rem; }
}

@media (max-width: 991.98px){
  .navbar .navbar-collapse{ padding:.6rem 0 .2rem; border-top:1px solid rgba(255,255,255,.08); margin-top:.5rem; }
  .navbar .nav-link{ padding:.62rem .75rem !important; }
  .navbar .nav-link.active{ background: rgba(255,255,255,.08); }
  .navbar .nav-link.active::after{ display:none; }
  .nav-cta{ width:100%; }
  .nav-cta .btn{ flex:1 1 0; }
}

/* Vertrouwensbalk: waar een garageklant op let */
.trustbar{
  background: var(--surface);
  border-bottom:1px solid var(--line);
}
.trustbar-inner{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.2rem 1.6rem;
  padding:.5rem 0;
}
.trust-item{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.85rem; font-weight:600; color: var(--ink-2);
  padding:.15rem 0;
}
.trust-item i{ color: var(--ok); font-size:1rem; }
@media (max-width: 767.98px){
  .trustbar-inner{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .trustbar-inner::-webkit-scrollbar{ display:none; }
  .trust-item{ white-space:nowrap; }
}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative;
  padding: 3.4rem 0;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* Diagonale rode veeg rechtsboven: beweging in een verder stil vlak */
/* Zachte verdieping aan de rechterkant, achter de werkplaatskaart. Bewust
   zonder harde rand: een schuine vlek met een zichtbare knip leest als een
   weergavefout in plaats van als vormgeving. */
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg,
      transparent 0%,
      transparent 38%,
      rgba(14,17,22,.035) 62%,
      rgba(14,17,22,.06) 100%),
    radial-gradient(680px 420px at 88% 22%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }
.hero-title{
  font-weight:800;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  letter-spacing:-.02em;
  line-height:1.08;
  color: var(--ink);
  margin-bottom:0;
}
.hero-title::after{
  content:""; display:block; width:72px; height:4px; margin-top:1.15rem;
  background: var(--accent); border-radius:2px;
}
.hero-lead{
  color: var(--ink-2);
  max-width: 64ch;
  font-size: 1.06rem;
  margin-top: 1.15rem;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
/* Onder 407px passen "Bel voor een afspraak" (239px) en "App ons" (134px)
   niet meer naast elkaar en vielen ze als een trapje onder elkaar: twee
   knoppen van verschillende breedte tegen de linkerrand. De rest van de site
   maakt op smalle schermen juist gelijke knoppen (de belbalk, de knoppen in
   de werkplaatskaart, de knoppen in de kop). Hier ook: ze vullen de regel
   waar ze op staan, dus naast elkaar samen en gestapeld allebei vol. */
@media (max-width: 575.98px){
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
}

/* Werkplaatskaart naast de herotekst: openingstijden, bellen, appen, route.
   Vult de rechterkant van de hero en geeft direct antwoord op de twee vragen
   die een garageklant altijd heeft: zijn ze open en hoe bereik ik ze. */
.hero-card{
  position:relative;
  background: var(--tex-tread), var(--dark);
  border:1px solid var(--dark-3);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.4rem 1.4rem 1.2rem;
  color: rgba(255,255,255,.8);
  overflow:hidden;
}
.hero-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background: var(--hazard);
}
.hero-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding-bottom:.85rem; margin-bottom:.85rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.hc-label{
  font-family: var(--font-display); text-transform:uppercase;
  letter-spacing:.09em; font-weight:700; font-size:1rem; color:#fff;
}
.hero-card-hours{ display:grid; gap:.35rem; margin-bottom:1.1rem; }
.hc-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.5rem .7rem; border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-variant-numeric: tabular-nums;
}
.hc-row.is-nu{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.hc-day{ font-weight:700; color:#fff; font-size:.95rem; }
.hc-dag{ font-weight:500; color: rgba(255,255,255,.45); font-size:.85rem; }
.hc-time{ font-weight:700; color:#fff; font-size:.98rem; white-space:nowrap; }
.hc-row.is-dicht .hc-day, .hc-row.is-dicht .hc-time{ color: rgba(255,255,255,.45); }

.hc-call{
  display:flex; width:100%; justify-content:center;
  font-family: var(--font-display); font-size:1.35rem; letter-spacing:.01em;
}
.hc-actions{ display:flex; gap:.5rem; margin-top:.55rem; }
.hc-actions .btn{ flex:1 1 0; justify-content:center; display:flex; align-items:center; }
.hc-foot{
  display:flex; align-items:flex-start; gap:.5rem;
  margin-top:1rem; padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6); font-size:.9rem;
}
.hc-foot i{ color: var(--accent2); }

@media (min-width: 992px){
  .hero-card{ margin-left:auto; max-width: 420px; }
}
.hero-note{
  display:flex; align-items:center; gap:.45rem;
  margin-top:.9rem; color: var(--muted); font-size:.88rem; font-weight:500;
}
.hero-note i{ color: var(--accent); }

/* Chips onder de hero of in een blok */
.footer-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tag-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .78rem; border-radius: var(--pill);
  background:#fff; border:1px solid var(--line);
  color: var(--ink-2); font-weight:600; font-size:.87rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.tag-chip:hover{
  border-color: var(--accent-line);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-1px);
}
.tag-chip i{ color: var(--accent); }

/* ---------- 6. Secties en sectiekoppen ---------- */
.section{ position:relative; }

/* Banen afwisselen: grijs met staalplaat-stippen, wit met een werkbladraster.
   Zonder dat wisselen wordt een lange pagina één egaal grijs vlak. */
.section-light{
  padding: 3.6rem 0;
  background: var(--tex-dots), var(--bg);
  border-top:1px solid var(--line);
}
.section-light:nth-of-type(even){
  background: var(--tex-grid), var(--surface);
}
/* Fijne schaduwrand aan de bovenkant van elke baan, zodat de overgang tussen
   twee vlakken een echte naad is in plaats van een kale lijn. */
.section-light::before{
  content:""; position:absolute; left:0; right:0; top:0; height:22px;
  background: linear-gradient(180deg, rgba(14,17,22,.045), transparent);
  pointer-events:none;
}
.section-light > .container{ position:relative; z-index:1; }
/* In een witte baan zou een witte kaart wegvallen: daar krijgen kaarten een
   iets steviger rand en schaduw zodat ze los van de ondergrond blijven staan. */
.section-light:nth-of-type(even) .white-card,
.section-light:nth-of-type(even) .info-card,
.section-light:nth-of-type(even) .svc-card,
.section-light:nth-of-type(even) .menu-card,
.section-light:nth-of-type(even) .stage-card,
.section-light:nth-of-type(even) .metric{
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.section-dark{
  padding: 3.4rem 0;
  background: var(--dark);
  color: rgba(255,255,255,.82);
}
.section-dark h2, .section-dark h3{ color:#fff; }

.section-head{ margin-bottom: 1.8rem; max-width: 62ch; }
.section-head h2{
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight:800; letter-spacing:-.02em; margin:0;
}
.section-head p{ color: var(--muted); margin:.6rem 0 0; }

.accent-divider{
  height:2px; border:0; opacity:1;
  background: linear-gradient(90deg, var(--accent) 0 64px, var(--line) 64px);
}

/* ---------- 7. Kaarten en tegels ---------- */
.white-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: 1.5rem;
  position:relative;
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.white-card:hover{ box-shadow: var(--shadow); }
.white-card h1,.white-card h2,.white-card h3,.white-card h4{ color: var(--ink); }
.white-card p{ color: var(--ink-2); }
.white-card > :last-child{ margin-bottom:0; }

.dark-card{
  background: var(--tex-tread), var(--dark);
  border:1px solid var(--dark-3);
  border-radius: var(--r);
  overflow:hidden;
}
.dark-card-head{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.09);
}
.dc-ic{
  width:42px; height:42px; border-radius: var(--r-sm); flex:0 0 auto;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff;
}
.dc-title{ color:#fff; font-weight:700; font-family: var(--font-display); }
.dc-sub{ color: rgba(255,255,255,.6); font-size:.9rem; }
.dark-card-body{ padding:16px 18px; color: rgba(255,255,255,.8); }
.dark-card-body p{ color: rgba(255,255,255,.8); }
.dark-card .text-accent{ color: var(--accent2) !important; }

/* Informatietegel: icoon links, tekst rechts, rode rand als markering */
.info-card{
  display:flex; align-items:flex-start; gap:13px;
  height:100%;
  border-radius: var(--r);
  background: var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent);
  padding: 15px 17px;
  transition: box-shadow .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease);
}
.info-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }
.info-ic{
  width:44px; height:44px; border-radius: var(--r-sm); flex:0 0 auto;
  display:grid; place-items:center; font-size:1.15rem;
  background: var(--accent-050); border:1px solid var(--accent-line); color: var(--accent);
}
/* Modifier uit de paginabouwer: net iets nadrukkelijker dan de basistegel. */
.info-card-accent{ border-left-width:4px; }
.info-card-accent:hover{ border-color: var(--accent-line); border-left-color: var(--accent); }

/* Een tegel met een link erachter (bellen, appen, mailen, route) laat dat ook
   zien: het icoonvlak vult zich, het pijltje schuift mee. Een tegel die
   aanklikbaar is en er niet anders uitziet dan een tegel die dat niet is, is
   een tegel waar niemand op klikt. */
.info-card-link{ text-decoration:none; color: var(--ink); align-items:center; }
.info-card-link .info-go{
  margin-left:auto; flex:0 0 auto; align-self:center;
  color: var(--line-2); font-size:1.05rem;
  transition: color .16s var(--ease), transform .16s var(--ease);
}
.info-card-link:hover{ color: var(--ink); border-color: var(--accent-line); }
.info-card-link:hover .info-ic{ background: var(--accent); border-color: var(--accent); color:#fff; }
.info-card-link:hover .info-go{ color: var(--accent); transform: translateX(3px); }
.info-card-link .info-s{ overflow-wrap:anywhere; }
.info-card > div:last-child{ flex:1 1 auto; min-width:0; }
.info-t{ font-weight:700; color: var(--ink); font-family: var(--font-display); font-size:1.05rem; letter-spacing:0; }
.info-s{ color: var(--muted); font-weight:500; font-size:.93rem; line-height:1.5; }

/* Puntenlijst als afvinkraster. Vult zichzelf: op een breed scherm stonden er
   twee kolommen van bijna 600px met drie woorden erin, wat een halfleeg blok
   opleverde. Nu passen er vier naast elkaar zodra de ruimte er is. */
.spec-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:10px;
}
.spec-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 13px; border-radius: var(--r-sm);
  background: var(--surface-2); border:1px solid var(--line);
  font-size:.94rem; color: var(--ink-2); font-weight:500;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.spec-item:hover{ background:#fff; border-color: var(--line-2); }
.spec-item > span:first-child{
  color: var(--accent); font-weight:800; line-height:1.35; flex:none;
}

/* Cijfertegel */
.metric{
  height:100%;
  padding:1.15rem .9rem; border-radius: var(--r);
  border:1px solid var(--line); background: var(--surface); text-align:center;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.metric:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.metric .n{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height:1.1; color: var(--ink);
}
.metric .t{ color: var(--muted); font-weight:600; font-size:.84rem; margin-top:.25rem; }
.metric-accent{ border-top:3px solid var(--accent); }
.metric-accent .n{ color: var(--accent); }

/* Uitgelicht blok */
.callout{
  padding:1rem 1.1rem; border-radius: var(--r);
  border:1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.callout-accent{
  position:relative;
  background: var(--accent-050);
  border:1px solid var(--accent-line);
  border-left:4px solid var(--accent);
  border-radius: var(--r-sm);
  padding:1rem 1.1rem; color: var(--ink-2);
}
.callout-accent > :last-child{ margin-bottom:0; }
.callout-warn{
  background: var(--warn-050);
  border:1px solid color-mix(in srgb, var(--warn) 30%, #fff);
  border-left:4px solid var(--warn);
}

/* Merkenrij */
.brand-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.brand{
  padding:.45rem .8rem; border-radius: var(--r-sm);
  border:1px solid var(--line); background: var(--surface);
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-weight:700; color: var(--ink-2); font-size:.9rem;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.brand:hover{ color: var(--ink); border-color: var(--line-2); }

/* Label / pil */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.36rem .7rem; border-radius: var(--pill);
  background: var(--surface-2); border:1px solid var(--line);
  font-weight:600; color: var(--ink-2); font-size:.84rem;
}
.pill-today{
  margin-left:.45rem; padding:.05rem .45rem;
  background: var(--accent); border:0; color:#fff;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
}

/* ---------- 8. Media ---------- */
.media-placeholder{
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--surface);
  overflow:hidden; position:relative;
  box-shadow: var(--shadow-1);
}
.media-hero{ height: 400px; min-height: 400px; }
.media-stage{ height: 280px; }
.media-map{ height: 400px; }
/* De embed-code van Google draagt zijn eigen height="450" mee; in een vak van
   400px werd daar de onderste 50px af geknipt, inclusief de knoppen van de
   kaart. De iframe vult nu gewoon zijn vak. */
.media-map iframe{ display:block; width:100%; height:100%; border:0; }
.hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-badge{
  position:absolute; left:12px; bottom:12px;
  display:inline-flex; align-items:center;
  padding:.4rem .7rem; border-radius: var(--pill);
  background: rgba(14,17,22,.78); color:#fff;
  backdrop-filter: blur(4px);
  font-weight:600; font-size:.8rem;
}
@media (max-width: 991.98px){
  .media-hero{ height: 300px; }
  .media-map{ height: 320px; }
}

/* ---------- 9. Paneel (contactformulier) ---------- */
.panel{
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow:hidden;
}
/* Erfenis uit de oude opzet: het paneel was ooit donker, nu is alleen de
   kop donker. De klasse blijft staan zodat opgeslagen blokken blijven werken. */
.panel-dark{ background: var(--surface); }
.panel-head{
  padding:1rem 1.15rem;
  background: var(--tex-tread), var(--dark);
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  border-bottom:3px solid var(--accent);
}
.panel-title{
  color:#fff; font-weight:700; font-size:1.15rem;
  font-family: var(--font-display); letter-spacing:.01em;
}
.panel-sub{ color: rgba(255,255,255,.6); font-size:.84rem; font-weight:500; }
.panel-icon{
  width:42px; height:42px; border-radius: var(--r-sm); flex:none;
  display:grid; place-items:center;
  background: var(--accent); color:#fff; font-size:1.15rem;
}
.panel-body{ padding:1.2rem; }
.panel-divider{ height:1px; background: var(--line); }
.panel-actions{ color: var(--muted); font-size:.92rem; }

/* ---------- 10. Diensten-schakelaar (menu + werkblad) ---------- */
.menu-card{
  border-radius: var(--r);
  background: var(--surface); border:1px solid var(--line);
  box-shadow: var(--shadow-1); overflow:hidden;
  align-self: flex-start;   /* niet uitrekken: anders blijft er wit vlak over */
}
.menu-link{
  width:100%; display:flex; align-items:center; gap:.8rem;
  padding:.9rem 1rem; border:0; background:transparent;
  color: var(--ink); font-weight:600; text-align:left;
  border-bottom:1px solid var(--line);
  position:relative;
  transition: background .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease);
}
.menu-link:last-of-type{ border-bottom:0; }
.menu-link::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .18s var(--ease);
}
.menu-link:hover{ background: var(--surface-2); }
.menu-link:hover::before{ transform: scaleY(1); }
.m-ic{
  width:38px; height:38px; border-radius: var(--r-sm);
  display:grid; place-items:center; flex:0 0 auto;
  background: var(--surface-2); border:1px solid var(--line); color: var(--accent);
}
.m-txt{ flex:1 1 auto; min-width:0; }
.m-arr{ color: var(--line-2); transition: transform .15s var(--ease); }
.menu-link:hover .m-arr{ transform: translateX(2px); }
.menu-link.active{ background: var(--ink); color:#fff; }
.menu-link.active::before{ transform: scaleY(1); }
.menu-link.active .m-ic{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color:#fff; }
.menu-link.active .m-arr{ color: rgba(255,255,255,.8); }
.menu-foot{ padding:1rem; background: var(--surface-2); border-top:1px solid var(--line); }

.stage-card{
  border-radius: var(--r);
  background: var(--surface); border:1px solid var(--line);
  box-shadow: var(--shadow-1); padding:1.6rem;
  height:100%;
}
.pane{ display:none; }
.pane.active{ display:block; animation: sb-fade .28s var(--ease); }
@keyframes sb-fade{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
.pane-head{ margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.kicker{
  display:inline-block; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.72rem; color: var(--accent); margin-bottom:.3rem;
}
.pane-title{ font-weight:800; letter-spacing:-.015em; margin:0 0 .35rem; font-size:1.5rem; }
.pane-sub{ color: var(--muted); font-weight:500; }

/* ---------- 11. Openingstijden ---------- */
.hours{
  border-radius: var(--r-sm);
  border:1px solid var(--line); background: var(--surface-2);
  padding:.75rem .9rem;
}
.hours-row{
  display:flex; align-items:center; gap:.6rem;
  color: var(--ink-2); font-weight:500; font-size:.93rem; padding:.28rem 0;
  font-variant-numeric: tabular-nums;
}
.hours-row .dots{ flex:1; border-bottom:1px dotted var(--line-2); transform: translateY(-3px); }
.hours-row.muted{ color: var(--muted); }
.hours-row.is-today{ color: var(--ink); font-weight:700; }
.hours-row.is-today .dots{ border-bottom-color: var(--accent-line); }

/* ---------- 12. Paginabouwer-blokken ---------- */
.pb-page > .pb-block{ margin-bottom: 2rem; }
.pb-page > .pb-block:last-child{ margin-bottom:0; }

/* De pagina heeft één linkerrand. De hero, de sectiekoppen en het
   dienstenraster beginnen allemaal links in de container, dus de blokken doen
   dat ook. Een gecentreerde, smallere kolom voor alleen de blokken heeft hier
   gestaan en dat las verkeerd: dan heeft dezelfde pagina twee linkerranden en
   lijkt het midden ingesprongen.
   Alleen de leesbreedte van lopende tekst is begrensd - dat is normaal, en het
   is iets anders dan een kolom die naar binnen springt. */
.pb-text > p, .pb-text > ul, .pb-text > ol{ max-width: 78ch; }
/* Een los kaartje dat iemand in een tekstblok zet (een adres, een let-op) is
   ook tekst en hoort dezelfde leesbreedte te krijgen. Zonder dit werd een
   adreskaartje met twee regels uitgerekt over de volle 1130px, met een meter
   leegte ernaast. */
.pb-text > .info-card,
.pb-text > .callout,
.pb-text > .callout-accent,
.pb-text > .callout-warn,
.pb-text > .dark-card,
.pb-text > .white-card{ max-width: 78ch; }

/* Kaartenrij en cijferrij vullen zichzelf, net als het afvinkraster en het
   dienstenraster. Met een vast raster van twee kolommen werden vier korte
   kaartjes twee stapels van 580px breed met één regel tekst erin. */
.pb-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 1rem;
}
/* Een halve rij tegels rekte zichzelf uit: met twee items werd elke kaart op
   1440 zo'n 688px breed, een icoonvierkant en één regel tekst met een halve
   pagina leegte ernaast. Vier tegels krijgen daar 336px. Bij twee of drie
   houden we die maat aan en begint de rij links, tegen dezelfde linkerrand
   als de rest van de pagina. */
@media (min-width: 992px){
  .pb-cards:has(> :nth-child(2):last-child),
  .pb-cards:has(> :nth-child(3):last-child){
    grid-template-columns: repeat(auto-fit, minmax(275px, 340px));
    justify-content: start;
  }
}
.pb-metrics{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}
/* Twee kaarten naast elkaar met verschillende hoeveelheid tekst kregen ook
   verschillende hoogtes; dan hangt de ene onderrand een regel lager dan de
   andere en lijkt het blok scheef. */
.pb-columns > [class*="col-"]{ display:flex; }
.pb-columns > [class*="col-"] > .white-card{ width:100%; }
.pb-heading{
  margin:0 0 .8rem;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight:800; letter-spacing:-.02em; color: var(--ink);
  position:relative; padding-left:1rem;
}
.pb-heading::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px;
  background: var(--accent); border-radius:2px;
}
h3.pb-heading, h4.pb-heading{ font-size:1.25rem; padding-left:.85rem; }
/* Koppen die in een tekstblok zijn getypt krijgen dezelfde rode markering
   als een los kopblok - anders staan er twee soorten koppen op één pagina. */
.pb-text > h2, .pb-text > h3{
  position:relative; padding-left:1rem; margin:0 0 .7rem;
  font-weight:800; letter-spacing:-.02em; color: var(--ink);
}
.pb-text > h2{ font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.pb-text > h3{ font-size:1.25rem; padding-left:.85rem; }
.pb-text > h2::before, .pb-text > h3::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px;
  background: var(--accent); border-radius:2px;
}
.pb-text{ color: var(--ink-2); }
.pb-text > :last-child{ margin-bottom:0; }
.pb-text ul, .pb-text ol{ padding-left:1.15rem; }
.pb-text li{ margin-bottom:.35rem; }
.pb-image{ margin:0; }
.pb-image img{
  width:100%; height:auto; display:block;
  border-radius: var(--r); border:1px solid var(--line); box-shadow: var(--shadow-1);
}
.pb-image figcaption{ color: var(--muted); font-size:.88rem; margin-top:.55rem; }
.pb-button{ display:flex; gap:.6rem; flex-wrap:wrap; }
/* Drie los getypte knopblokken (mail, telefoon, WhatsApp) stonden als een
   trapje onder elkaar, elk zo breed als zijn eigen tekst. Achter elkaar op één
   regel lezen ze als wat ze zijn: één rijtje manieren om contact op te nemen.
   Ze breken vanzelf af als de regel vol is. */
.pb-page > .pb-block:has(> .pb-button){
  display: inline-block; vertical-align: top; margin-bottom: .6rem;
}
.pb-page > .pb-block:has(> .pb-button) + .pb-block:has(> .pb-button){ margin-left: .6rem; }
/* Het eerstvolgende gewone blok krijgt de normale tussenruimte terug. */
.pb-page > .pb-block:has(> .pb-button) + .pb-block:not(:has(> .pb-button)){ margin-top: 1.4rem; }
/* Openingstijden: de dagen links, de stand van nu en de knoppen rechts. Als
   losse strook was dit een lijstje van 1130px breed waarin dag en tijd een
   halve meter uit elkaar stonden, of een smal blok met een lege pagina
   ernaast. In twee kolommen klopt allebei. */
.hours-side{
  display:flex; flex-direction:column; align-items:flex-start; gap:.85rem;
  padding:1.1rem 1.15rem;
  background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r);
}
.hours-note{ color: var(--ink-2); margin:0; font-size:.95rem; }
.hours-acties{ display:flex; flex-wrap:wrap; gap:.55rem; width:100%; }
.hours-acties .btn{ flex:1 1 auto; justify-content:center; }
@media (min-width: 992px){
  /* De zijkolom staat op de hoogte van de lijst, niet erboven te zweven. */
  .pb-hours .hours-side{ margin-top: 2.6rem; }
}

.pb-embed{ height:auto; aspect-ratio: 16 / 9; }
.pb-embed iframe{ width:100%; height:100%; border:0; display:block; }
.pb-checklist .spec-grid{ margin-top:.2rem; }
.pb-callout{ max-width: 78ch; }

/* ---------- 12b. Dienstenraster en slotoproep ----------
   Twee blokken die op elke pagina automatisch onderaan verschijnen: eerst
   waar je nog meer terecht kunt, dan een duidelijke oproep om te bellen.
   Zo eindigt geen enkele pagina in het niets. */
.svc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.svc-card{
  display:flex; flex-direction:column; gap:.45rem;
  padding:1.25rem 1.3rem 1.1rem;
  background: var(--surface);
  border:1px solid var(--line);
  border-top:3px solid transparent;
  border-radius: var(--r);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.svc-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-top-color: var(--accent);
  color: var(--ink);
}
.svc-ic{
  width:46px; height:46px; border-radius: var(--r-sm);
  display:grid; place-items:center; font-size:1.25rem;
  background: var(--accent-050); border:1px solid var(--accent-line); color: var(--accent);
  margin-bottom:.35rem;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.svc-card:hover .svc-ic{ background: var(--accent); border-color: var(--accent); color:#fff; }
.svc-t{
  font-family: var(--font-display); font-weight:800;
  font-size:1.2rem; letter-spacing:-.01em; line-height:1.2;
}
.svc-s{ color: var(--muted); font-size:.93rem; line-height:1.5; flex:1 1 auto; }
.svc-go{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.5rem; color: var(--accent);
  font-weight:700; font-size:.88rem; letter-spacing:.02em;
}
.svc-go i{ transition: transform .18s var(--ease); }
.svc-card:hover .svc-go i{ transform: translateX(4px); }

.cta-band{
  position:relative; overflow:hidden;
  background: var(--tex-tread), var(--dark);
  color: rgba(255,255,255,.78);
  padding: 2.8rem 0;
  border-top:1px solid var(--dark-3);
}
/* Rode diagonaal rechts: hetzelfde gebaar als in de hero, maar omgekeerd. */
.cta-band::before{
  content:""; position:absolute; top:-40%; right:-6%;
  width:42%; height:180%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%);
  transform: skewX(-12deg);
  pointer-events:none;
}
.cta-band > .container{ position:relative; z-index:1; }
.cta-band-inner{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  align-items:center; justify-content:space-between;
}
.cta-band-body{ flex:1 1 420px; }
.cta-band-title{
  color:#fff; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin:0 0 .5rem;
}
.cta-band-text{ color: rgba(255,255,255,.7); max-width:56ch; margin:0 0 .9rem; }
.cta-band-actions{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
}
.cta-band-mail{
  display:inline-flex; align-items:center;
  /* Was 23px hoog: een link over de volle breedte maar te plat om te raken. */
  min-height:44px;
  width:100%; color: rgba(255,255,255,.55); font-size:.9rem; font-weight:500;
}
.cta-band-mail:hover{ color:#fff; }
@media (max-width: 575.98px){
  .cta-band-actions .btn{ width:100%; justify-content:center; }
}

/* Afvinkregels binnen een donkere kaart: donkere variant, anders knallen er
   lichtgrijze blokken uit een zwarte kaart. */
.dark-card .spec-item{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.82);
}
.dark-card .spec-item:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.dark-card .spec-item > span:first-child{ color: var(--accent2); }
.dark-card .callout-accent{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  border-left-color: var(--accent);
  color: rgba(255,255,255,.82);
}

/* ---------- 13. Footer ---------- */
.footer-pro{
  background: var(--tex-tread), var(--dark);
  color:#fff;
  position:relative;
  flex-shrink:0;
}
.footer-pro::before{
  content:""; display:block; height:6px; background: var(--hazard);
}
.footer-mid{ padding: 2.8rem 0 2rem; }

/* Vijf kolommen passen niet in een raster van twaalf: het snelmenu kreeg
   een twaalfde (zo'n 80px) en brak midden in 'WhatsApp' en 'E-mail'. Een
   eigen raster geeft elke kolom de breedte die zijn inhoud nodig heeft. */
.footer-grid{
  display: grid;
  gap: 2rem 1.75rem;
  grid-template-columns: 1.35fr .8fr .8fr 1.25fr 1.3fr;
}
.footer-col{ min-width: 0; }
.footer-logo{ width:auto; height:84px; display:block; margin-bottom:14px; }
/* Onder 1200px passen vijf kolommen niet meer. Vijf blokken vallen nooit
   netjes in drie of vier kolommen - er blijft altijd een gat over. Daarom
   gaat het merkblok dan over de volle breedte en tegelen de vier lijstjes
   er twee bij twee onder. */
@media (max-width: 1199.98px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-col-brand{ grid-column: 1 / -1; }
  .footer-col-brand .footer-text{ max-width: 58ch; }
}
@media (max-width: 479.98px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-head{
  color:#fff; font-weight:700; margin-bottom:.85rem;
  font-family: var(--font-display); text-transform:uppercase;
  letter-spacing:.08em; font-size:.92rem;
  display:flex; align-items:center; gap:.55rem;
}
.footer-head::after{ content:""; height:2px; flex:1; background: rgba(255,255,255,.1); }
.footer-text{ color: rgba(255,255,255,.62); font-weight:400; }

.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.42rem; }
.footer-links a{
  color: rgba(255,255,255,.62); font-weight:500;
  display:inline-flex; align-items:center; gap:.4rem;
  transition: color .14s var(--ease), transform .14s var(--ease);
}
/* Op een telefoon waren deze links 25,6px hoog met 6,7px ertussen: te klein
   voor een duim en te dicht op elkaar om de goede te raken. Het raakvlak gaat
   naar 44px; de tussenruimte gaat eruit zodat de lijst optisch even dicht
   blijft staan en de footer maar een paar pixels per link groeit.
   Deze mediaquery stond eerst boven de basisregel hierboven. Dat ging nu
   toevallig goed omdat die geen padding zet, maar het is precies de volgorde
   waarin een breekpunt stilletjes doodloopt - dus hij staat er nu onder. */
@media (max-width: 767.98px){
  .footer-links{ gap:0; }
  .footer-links a{ padding:.575rem 0; }
}
.footer-links a::before{ content:"›"; color: var(--accent2); opacity:0; transform: translateX(-4px); transition: all .14s var(--ease); }
.footer-links a:hover{ color:#fff; }
.footer-links a:hover::before{ opacity:1; transform:none; }

.footer-social{ display:flex; gap:.5rem; margin-top:.2rem; }
.social-btn{
  width:44px; height:44px; border-radius: var(--r-sm);
  display:grid; place-items:center; font-size:1.05rem;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color:#fff;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.social-btn:hover{ background: var(--accent); border-color: var(--accent); color:#fff; transform: translateY(-2px); }

.footer-cards{ display:grid; gap:.6rem; }
.footer-card{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.85rem; border-radius: var(--r-sm);
  border:1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.footer-card:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.footer-card-ic{
  width:38px; height:38px; border-radius: var(--r-sm);
  display:grid; place-items:center; flex:0 0 auto;
  background: var(--accent); color:#fff;
}
.footer-card-title{ font-weight:700; color:#fff; font-size:.94rem; }
.footer-card-text{ color: rgba(255,255,255,.62); font-weight:500; font-size:.92rem; }
.footer-card-text a{ color: rgba(255,255,255,.9); }
.footer-card-text a:hover{ color: var(--accent2); }
/* Dit zijn het adres, het e-mailadres en de twee telefoonnummers: op een
   telefoon geen bijschrift maar de handeling zelf, en ze waren 23px hoog. */
@media (max-width: 767.98px){
  .footer-card-text a{ display:inline-flex; align-items:center; min-height:44px; }
}

/* Openingstijden in de footer (donkere variant) */
.footer-hours{
  border-radius: var(--r-sm);
  border:1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035);
  padding:.8rem .95rem;
}
.footer-hours-row{
  display:flex; align-items:center; gap:.6rem;
  color: rgba(255,255,255,.72); font-weight:500; font-size:.92rem; padding:.26rem 0;
}
.footer-hours-row .dots{ flex:1; border-bottom:1px dotted rgba(255,255,255,.18); transform: translateY(-3px); }
.footer-hours-row.muted{ color: rgba(255,255,255,.42); }
.footer-hours-row.is-today{ color:#fff; font-weight:700; }
.footer-hours-row.is-today .dots{ border-bottom-color: rgba(255,255,255,.32); }

.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:1rem 0; }
/* Onderaan de pagina landt de zwevende 'naar boven'-knop precies op deze
   regel; die krijgt daarom rechts ruimte zodat het pijltje niet over de
   woorden valt. */
@media (min-width: 768px){ .footer-bottom .d-flex > .small:last-child{ padding-right: 3.5rem; } }
.footer-bottom .small{ color: rgba(255,255,255,.48); line-height:1.6; }
.footer-bottom a{ color: rgba(255,255,255,.6); margin-left:1.1rem; }
.footer-bottom a:hover{ color:#fff; }
/* Contact / Bel ons / Naar boven onderaan: 22px hoog, en op een telefoon is
   dit de plek waar de 'naar boven'-knop niet staat, dus juist hier moet je
   hem kunnen raken. */
@media (max-width: 767.98px){
  .footer-bottom a{ display:inline-flex; align-items:center; min-height:44px; }
}

/* ---------- 14. Zwevende acties ---------- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

.to-top{
  position: fixed; right:18px; bottom:18px;
  width:46px; height:46px; border-radius: var(--r-sm);
  border:none; background: var(--ink); color:#fff;
  display:grid; place-items:center; font-size:1.1rem;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .15s var(--ease);
  z-index:1035;
  box-shadow: var(--shadow-lg);
}
.to-top:hover{ background: var(--accent); }
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }

/* Mobiele belbalk: op een telefoon is bellen de conversie */
.cta-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:1040;
  display:none;
  background: var(--dark);
  border-top:1px solid rgba(255,255,255,.1);
  box-shadow: 0 -8px 26px -14px rgba(0,0,0,.7);
  padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
  gap:.5rem;
}
.cta-bar a{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  /* Was 41,2px hoog. Op een telefoon is bellen de conversie, dus juist deze
     drie mogen niet net onder de duimmaat blijven steken. */
  min-height:44px;
  padding:.72rem .5rem; border-radius: var(--r-sm);
  font-weight:700; font-size:.94rem; line-height:1;
}
.cta-call{ background: var(--accent); color:#fff; }
.cta-call:hover{ background: var(--accent-600); color:#fff; }
.cta-wa{ background:#25d366; color:#08301a; }
.cta-wa:hover{ background:#1fb857; color:#062a12; }
.cta-route{ background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16); }
.cta-route:hover{ background: rgba(255,255,255,.15); color:#fff; }

@media (max-width: 767.98px){
  .cta-bar{ display:flex; }
  body{ padding-bottom: 68px; }
  /* Geen tweede zwevend ding boven de belbalk: het knopje stond over de
     tekst en over formuliervelden heen. 'Naar boven' staat onderin de
     footer, dus de functie blijft bestaan. */
  .to-top{ display:none; }
}

/* ---------- 15. Toegankelijkheid, print en beweging ---------- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}
.site-header :focus-visible, .footer-pro :focus-visible, .cta-bar :focus-visible{
  outline-color:#fff;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header, .cta-bar, .to-top, .media-map, .trustbar, .footer-social{ display:none !important; }
  body{ background:#fff; padding-bottom:0; }
  .white-card, .panel, .info-card{ box-shadow:none; border-color:#ccc; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#666; }
}

/* Scrollbar - merkrood, volgt --accent */
html{
  scrollbar-color: var(--accent) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background-color: var(--accent);
  border-radius: var(--pill);
  border:3px solid transparent;
  background-clip: padding-box;
  min-height:40px;
}
::-webkit-scrollbar-thumb:hover{ background-color: var(--accent-600); background-clip: padding-box; }
::-webkit-scrollbar-button{ display:none; width:0; height:0; }
::-webkit-scrollbar-corner{ background: transparent; }

/* Tekstselectie in merkkleur */
::selection{ background: var(--accent); color:#fff; }