/* ============================================================
   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 (incl. bandenzoeker)
     13. Footer
     14. Zwevende acties (naar boven, mobiele belbalk)
     15. Toegankelijkheid, print en beweging
   ============================================================ */

/* De fonts staan bewust NIET meer als @import hier, maar als <link> in
   inc/header.php. Een @import wordt namelijk pas ontdekt als dit bestand
   binnen is: eerst style.css halen, dan pas de fonts opvragen. Twee
   render-blokkerende requests achter elkaar in plaats van naast elkaar.
   Verhuist de fontregel, pas dan ook de preconnects in header.php aan. */

/* ---------- 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;
  /* De werkplaatskaart bepaalt de hoogte van de hero, niet de tekst
     ernaast: die houdt op een breed scherm zo'n tachtig pixels over. De
     baan staat daarom strak - anders vult de hero het hele scherm en
     begint de pagina pas onder de vouw. */
  padding: 2.5rem 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:.95rem;
  background: var(--accent); border-radius:2px;
}
.hero-lead{
  color: var(--ink-2);
  max-width: 64ch;
  font-size: 1.06rem;
  margin-top: .95rem;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
/* 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.15rem 1.3rem 1.05rem;
  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:.7rem; margin-bottom:.7rem;
  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:.3rem; margin-bottom:.8rem; }
.hc-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.42rem .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:.8rem; padding-top:.7rem;
  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:.75rem; 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) .faq-item,
.section-light:nth-of-type(even) .metric{
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.section-dark{
  padding: 3.4rem 0;
  /* Bandenprofiel zoals op de slotoproep en de herokaart: een egaal zwart
     vlak over de volle breedte leest als een gat in de pagina. */
  background: var(--tex-tread), var(--dark);
  color: rgba(255,255,255,.82);
}
.section-dark h2, .section-dark h3{ color:#fff; }
/* Blokken uit de bouwer in een donkere baan. De witte kaarten mogen blijven
   (die steken juist mooi af), maar wat zelf al donker was valt weg: dat krijgt
   hier een lichte variant. */
.section-dark .pb-text{ color: rgba(255,255,255,.78); }
.section-dark .faq-side{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.section-dark .faq-item{ border-color: transparent; }
.section-dark .faq-item[open]{ border-color: var(--accent); }

.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;
  /* 250px leverde op een kaart over de volle breedte vijf smalle kolommen op,
     met zinnen over drie regels en een losse tegel op de laatste rij. Met
     300px blijven het er vier op een breed scherm en twee in een halve
     kolom. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 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; }

/* ---------- Veelgestelde vragen ----------
   <details>/<summary> en geen eigen accordeon: werkt zonder JavaScript, de
   browser regelt het toetsenbord, en het antwoord staat ook dichtgeklapt in
   de pagina - wat voor een zoekmachine het verschil is tussen inhoud die
   meetelt en inhoud die dat niet doet.
   Een vraag is tekst, dus begrensd op de leesbreedte en niet op 1130px. */
/* De vragen houden hun leesbreedte; de kolom ernaast draagt de actie. */
.pb-faq .faq-lijst{ max-width: 78ch; }
.faq-side{
  background: var(--tex-tread), var(--dark);
  border:1px solid var(--dark-3); border-radius: var(--r);
  padding:1.15rem;
}
.faq-side-kop{
  font-family: var(--font-display); font-weight:800; color:#fff;
  font-size:1.15rem; line-height:1.2; margin-bottom:.4rem;
}
.faq-side-tekst{ color: rgba(255,255,255,.72); font-size:.93rem; margin-bottom:1rem; }
.faq-item{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--bs-border-radius, 10px);
  margin-bottom:.6rem;
  overflow:hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faq-item:last-child{ margin-bottom:0; }
.faq-item:hover{ border-color: var(--line-2); }
.faq-item[open]{
  border-color: var(--accent-line, var(--line-2));
  box-shadow: 0 2px 10px rgba(14,17,22,.06);
}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem;
  cursor:pointer;
  font-family: var(--font-display);
  font-weight:700; font-size:1.02rem; line-height:1.35;
  color: var(--ink);
  list-style:none;                    /* het eigen driehoekje weg */
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color: var(--accent); }
.faq-item summary i{
  flex:0 0 auto; color: var(--accent); font-size:.95rem;
  transition: transform .18s var(--ease);
}
.faq-item[open] summary i{ transform: rotate(180deg); }
.faq-answer{
  padding:0 1.1rem 1.05rem;
  color: var(--ink-2);
  border-top:1px solid var(--line);
  padding-top:.85rem;
  margin-top:-1px;
}
.faq-answer > :last-child{ margin-bottom:0; }
/* Het vinkje/pijltje mag niet meebewegen als de bezoeker beweging heeft
   uitgezet; de rest van de regel hieronder in de stylesheet doet dat al
   globaal, dit is alleen de zekerheid dat de inhoud zichtbaar blijft. */
@media (prefers-reduced-motion: reduce){
  .faq-item, .faq-item summary i{ transition:none; }
}

/* ---------- 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);
}

/* ---------- 12c. Bandenzoeker (naar de eigen webshop) ----------
   Eén donkere kaart in plaats van drie gestapelde banden: links het verhaal,
   rechts het witte werkblad waar je iets invult. Zo is de kaart aan beide
   kanten gevuld - als strook over de volle breedte stond het zoekveld links
   met een halve pagina leegte ernaast. Geen hazard-streep: die staat al onder
   de header, boven de footer en op de herokaart. */
.tyre-finder{
  position:relative; overflow:hidden;
  border-radius: var(--r-lg);
  background: var(--tex-tread), var(--dark);
  border:1px solid var(--dark-3);
  box-shadow: var(--shadow);
}
/* Rode gloed achter het werkblad, net als achter de herokaart. Bewust geen
   schuine veeg met een rand: die knip las als een weergavefout zodra het
   witte paneel er half overheen viel. */
.tyre-finder::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(640px 340px at 76% 26%,
              color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  pointer-events:none;
}
.tf-grid{
  position:relative; z-index:1;
  display:grid; gap:1.7rem;
  grid-template-columns: 1fr minmax(360px, 440px);
  align-items:center;
  padding:1.9rem;
}

.tf-side{ color: rgba(255,255,255,.72); }
.tf-title{
  color:#fff; font-weight:800; line-height:1.1;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  margin:0 0 .55rem;
}
.tf-intro{ margin:0; max-width:46ch; font-size:.98rem; }
.tf-side-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem;
  margin-top:1.2rem; padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.92rem;
}
.tf-note i{ color: var(--accent2); margin-right:.45rem; }
.tf-bel{
  display:inline-flex; align-items:center; gap:.45rem;
  color:#fff; font-weight:700;
  font-family: var(--font-display); font-size:1.08rem;
}
.tf-bel:hover{ color: var(--accent2); }

/* Het werkblad. Licht vlak op de donkere kaart, met een diepe schaduw zodat
   het er echt op ligt en niet in wegvalt. */
.tf-panel{
  background: var(--surface);
  border-radius: var(--r);
  padding:1.15rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}

/* Twee manieren van zoeken, één schakelaar: geen losse knoppen waarvan de
   actieve toevallig zwart is, maar één rail met een zwart blokje erin. */
.tf-tabs{
  display:flex; gap:4px;
  padding:4px; margin-bottom:1.05rem;
  background: var(--surface-2); border-radius: var(--pill);
}
.tf-tab{
  appearance:none; cursor:pointer; border:0; background:transparent;
  border-radius: var(--pill); padding:.52rem .6rem;
  font-family: var(--font-body); font-weight:700; font-size:.9rem;
  color: var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  white-space:nowrap;   /* "Op bandenmaat" over twee regels maakt de rail scheef */
  flex:1 1 0; min-width:0;   /* twee of drie tabbladen vullen de rail samen */
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tf-tab:hover{ color: var(--ink); }
.tf-tab.is-active{ background: var(--ink); color:#fff; box-shadow: var(--shadow-1); }
.tf-tab.is-active i{ color: var(--accent2); }

.tf-pane[hidden]{ display:none; }
.tf-lbl{
  display:block; margin-bottom:.32rem;
  font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color: var(--muted);
}
/* De vier maatvelden op één rij: zo is het werkblad even hoog als bij het
   zoeken op kenteken en springt de pagina niet bij het wisselen van tab.
   De waarden zijn kort (205, 55, 16), dus de pijl mag dichter op de tekst. */
.tf-fields-maat{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.7rem .55rem; }
@media (min-width: 576px){
  .tf-fields-maat{ grid-template-columns:repeat(4, 1fr); }
  .tf-fields-maat .form-select{
    padding-left:.6rem; padding-right:1.55rem;
    background-position: right .45rem center;
  }
}
.tf-panel .form-control,
.tf-panel .form-select,
.tf-go{ height:52px; }
.tf-go{ width:100%; margin-top:.95rem; }
.tf-hint{ margin-top:.7rem; color: var(--muted); font-size:.85rem; }
.tf-hint i{ color: var(--accent); margin-right:.3rem; }

/* De kentekenplaat. Anders dan het veld in het contactformulier staat deze
   meteen op geel: hier is de plaat het onderdeel zelf, en een grijs vak met
   een blauw NL-blokje ernaast leest als een half afgemaakte plaat. */
.tf-plate{ position:relative; }
.tf-plate-eu{
  position:absolute; left:1px; top:1px; bottom:1px; width:32px; z-index:2;
  border-radius: calc(var(--r-sm) - 1px) 0 0 calc(var(--r-sm) - 1px);
  background:#1a3fa0; color:#fff;
  display:grid; place-items:center;
  font-size:.7rem; font-weight:700; letter-spacing:.03em;
}
.tf-plate-in{
  padding-left:44px;
  background:#f7d117; border-color:#d9b400; color:#101010;
  font-family: var(--font-display); font-weight:800;
  font-size:1.35rem; letter-spacing:.09em; text-transform:uppercase;
  font-variant-numeric: tabular-nums;
}
.tf-plate-in::placeholder{ color:#8a7400; opacity:1; letter-spacing:.06em; }
.tf-plate-in:focus{ background:#f7d117; border-color:#d9b400; color:#101010; }

/* Merken: geen formulier maar links, want het merk zit in het pad. Drie op een
   rij houdt het werkblad even hoog als de andere twee tabbladen. */
.tf-brands{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.45rem; }
.tf-brand{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:44px; padding:.55rem .5rem; border-radius: var(--r-sm);
  background: var(--surface-2); border:1px solid transparent;
  color: var(--ink); font-weight:700; font-size:.86rem; line-height:1.15;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.tf-brand:hover{ background:#fff; border-color: var(--accent-line); color: var(--accent); }

/* Onderbalk: de ingangen die geen zoekopdracht zijn maar een eigen pagina in de
   shop hebben. Op de donkere kaart, dus een eigen chip - .tag-chip is gemaakt
   voor lichte vlakken. */
.tf-quick{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  padding:.85rem 1.9rem;
  border-top:1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.28);
}
.tf-quick-lbl{
  margin-right:.25rem;
  color: rgba(255,255,255,.55);
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.tf-chip{
  display:inline-flex; align-items:center;
  padding:.32rem .75rem; border-radius: var(--pill);
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86); font-size:.84rem; font-weight:600;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.tf-chip:hover{ background: var(--accent); border-color: var(--accent); color:#fff; }

/* Tussen telefoon en desktop staat het werkblad onder de tekst en dus over de
   volle breedte van de kaart. De knop gaat dan naast de velden: een plaat van
   zeshonderd pixels voor zes tekens leest als een leeg vak. */
@media (min-width: 576px) and (max-width: 991.98px){
  /* Snelkoppelingen in een vast raster met het label erboven: anders viel er
     steeds één chip alleen op een tweede regel. Zes naast elkaar past pas
     vanaf 768px; daaronder wordt "Winterbanden" afgekapt. */
  .tf-quick{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.4rem; }
  .tf-quick-lbl{ grid-column:1 / -1; margin:0 0 .15rem; }
  .tf-chip{ justify-content:center; text-align:center; padding:.45rem .3rem; font-size:.8rem; }
  .tf-pane{ display:grid; grid-template-columns: minmax(0,1fr) max-content; gap:.7rem; align-items:end; }
  .tf-pane > .tf-field,
  .tf-fields-maat{ grid-column:1; }
  .tf-go{ grid-column:2; width:auto; margin-top:0; padding-inline:1.7rem; }
  .tf-hint{ grid-column:1 / -1; margin-top:0; }
}
@media (min-width: 768px) and (max-width: 991.98px){
  .tf-quick{ grid-template-columns:repeat(6, minmax(0,1fr)); }
}
@media (max-width: 991.98px){
  .tf-grid{ grid-template-columns:1fr; padding:1.5rem; gap:1.35rem; }
  .tf-quick{ padding:.8rem 1.5rem; }
  .tf-intro{ max-width:none; }
}
@media (max-width: 575.98px){
  .tf-grid{ padding:1.1rem; }
  .tf-panel{ padding:1rem; }
  .tf-tab{ font-size:.84rem; padding:.5rem .4rem; gap:.3rem; }
  .tf-tab i{ display:none; }   /* drie tabbladen naast elkaar op 360px */
  /* Drie smallere merkpillen in plaats van twee brede: dezelfde dertien
     merken in vijf rijen in plaats van zeven. */
  .tf-brands{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:.35rem; }
  .tf-brand{ min-height:40px; padding:.45rem .25rem; font-size:.76rem; }
  /* Snelkoppelingen als vast raster: alle zes in beeld, gelijke breedte.
     Een scrollrij verstopte de helft, en een vrije wrap gaf een rommelige
     trap van chips met elk een eigen breedte. */
  .tf-quick{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:.4rem; padding:.85rem 1.1rem;
  }
  .tf-quick-lbl{ grid-column:1 / -1; margin:0 0 .15rem; }
  .tf-chip{
    justify-content:center; text-align:center;
    padding:.45rem .35rem; font-size:.78rem; line-height:1.2;
  }
  .tf-side-foot{ margin-top:1rem; padding-top:.9rem; }
}

/* Kleinste telefoons (320px): drie tabbladen en drie chips naast elkaar
   passen alleen met een kleinere letter. Niets verbergen - dan raak je
   precies daar een ingang kwijt waar de ruimte het krapst is. */
@media (max-width: 374.98px){
  .tf-tab{ font-size:.72rem; padding:.45rem .2rem; }
  .tf-chip{ font-size:.72rem; padding:.42rem .2rem; }
  .tf-brand{ font-size:.72rem; padding:.45rem .15rem; }
  .tf-plate-in{ font-size:1.2rem; letter-spacing:.06em; }
}


/* ---------- Werkplaatsraster -----------------------------------------
   Een herhalende tegel met de gereedschappen en onderdelen waar deze
   garage mee werkt: banden, velgen, sleutels, een krik, een keuring.

   Waarom een tegel en geen raster van elementen: background-repeat vult
   elk vlak, hoe breed het scherm ook is. Een raster van vaste cellen
   houdt halverwege op zodra er meer kolommen op een rij passen dan waar
   het op berekend was.

   background-size stuurt de celmaat: de tegel is 13 bij 13 cellen, dus
   1040px is een cel van 80. Wil je de vormen groter of kleiner, dan is
   dat hier een getal en geen nieuw bestand.

   De dekking staat op het element en niet in het bestand, zodat een
   donker vlak en een licht vlak dezelfde tegel kunnen gebruiken.
   -------------------------------------------------------------------- */
.sb-raster{
  position:absolute; inset:0;
  background-image: url("/themes/skybanden/assets/img/raster.svg");
  background-repeat: repeat;
  background-size: clamp(720px, 68vw, 1040px);
  pointer-events:none;
}

/* Op de hero liggen de lijnen donker op een licht vlak. Het masker dooft
   het patroon links, waar de kop en de introtekst staan: een lijntekening
   dwars door een zin leest als vuil op het scherm. */
.hero .sb-raster{
  z-index:0;
  opacity:.085;
  filter: invert(1);
  mask-image: radial-gradient(120% 110% at 78% 42%, #000 6%, rgba(0,0,0,.45) 42%, transparent 92%);
  -webkit-mask-image: radial-gradient(120% 110% at 78% 42%, #000 6%, rgba(0,0,0,.45) 42%, transparent 92%);
}
/* De inhoud van de hero moet erboven blijven. */
.hero > .container{ position:relative; z-index:1; }

/* In de slotoproep is het vlak zwart en zijn de lijnen wit. Daar mag het
   patroon iets sterker staan: er ligt geen lopende tekst overheen, alleen
   een kop en twee knoppen. */
.cta-band .sb-raster{
  z-index:0;
  opacity:.14;
  mask-image: radial-gradient(110% 120% at 70% 50%, #000 10%, rgba(0,0,0,.5) 48%, transparent 94%);
  -webkit-mask-image: radial-gradient(110% 120% at 70% 50%, #000 10%, rgba(0,0,0,.5) 48%, transparent 94%);
}

/* Onder de tabletmaat staat er niets naast de tekst, dus werkt een masker
   van links naar rechts niet meer: daar loopt het patroon dwars achter de
   kop door. Van boven naar beneden wel - onderaan staat de werkplaatskaart
   die het vlak toch al afdekt. */
@media (max-width: 991.98px){
  .hero .sb-raster{
    opacity:.06;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.8) 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.8) 55%, transparent 100%);
  }
}

/* Een patroon is versiering. Wie beweging en ruis uitzet, hoeft het niet
   te zien - en op papier kost het alleen inkt. */
@media (prefers-reduced-motion: reduce){
  .sb-raster{ opacity:.05; }
}
@media print{
  .sb-raster{ display:none !important; }
}

/* ---------- 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,
  .tf-panel{ 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; }