/* v4-laag.css — de gedeelde laag van bouwinstructie v4 (12-09-2026).
   Staat naast Brams stijl.css en wordt op alle 27 routes geladen (ook op de
   cases, die stijl.css niet laden). Alleen eigen klassen (v4-, wa-, logobalk,
   testimonial, tussen-cta, script-z) plus de gedeelde vergelijkingstabel. */

/* De WhatsApp-knop zelf staat sinds 12-09 in /v3/wa-knop.css (altijd geladen, ook zonder v4-laag). */

/* ===== mobiele navigatie (7.1), alleen onder 700px ===== */
.v4-mnav-knop,.v4-mnav{display:none}
@media(max-width:700px){
  body{overflow-x:hidden}
  .v4-mnav-knop{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:14px;right:16px;z-index:1200;
    width:48px;height:48px;border-radius:12px;cursor:pointer;
    /* leesbaar op donkere én witte headers (de cases hebben een wit sitenav) */
    background:#12333B;color:#fff;border:2px solid rgba(255,255,255,.4);
    box-shadow:0 2px 8px rgba(0,0,0,.25);
  }
  .v4-mnav-knop svg{width:26px;height:26px}
  .v4-mnav-knop .v4-kruis,.v4-mnav-knop[aria-expanded="true"] .v4-hamburger{display:none}
  .v4-mnav-knop[aria-expanded="true"] .v4-kruis{display:block}
  .v4-mnav{
    display:block;position:fixed;inset:0;z-index:1100;
    background:rgba(7,48,59,.55);
    opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s;
  }
  .v4-mnav.is-open{opacity:1;visibility:visible}
  .v4-mnav-paneel{
    position:absolute;top:0;right:0;width:min(86vw,360px);height:100%;
    overflow-y:auto;background:#12333B;color:#fff;
    padding:76px 22px 32px;box-shadow:-10px 0 30px rgba(0,0,0,.3);
    transform:translateX(100%);transition:transform .18s ease;
    font-family:"Montserrat",system-ui,sans-serif;
  }
  .v4-mnav.is-open .v4-mnav-paneel{transform:none}
  .v4-mnav-paneel a{display:flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font-weight:800;font-size:1.05rem;text-transform:lowercase}
  .v4-mnav-paneel .v4-sub a{min-height:44px;padding-left:18px;font-weight:600;font-size:.98rem;color:#BFD8DC}
  .v4-mnav-paneel .v4-groep{border-top:1px solid rgba(255,255,255,.14);padding:6px 0}
  .v4-mnav-paneel .v4-groep:first-child{border-top:0}
  .v4-mnav-paneel .wa-knop{
    display:inline-flex;margin-top:18px;padding:15px 24px;border-radius:999px;
    background:#FF3D9A;color:#fff;font-size:1rem;text-transform:none;
    box-shadow:0 6px 0 rgba(0,0,0,.25);
  }
}

/* de cases hebben een sticky header: dan blijft de knop mee in beeld (zet het script) */
.v4-mnav-knop.is-vast{position:fixed}

/* ===== sticky WhatsApp-knop (7.2), alleen onder 700px ===== */
.v4-sticky{display:none}
@media(max-width:700px){
  .v4-sticky{
    display:inline-flex;position:fixed;left:50%;bottom:0;z-index:50;
    transform:translate(-50%,calc(100% + 24px));
    margin-bottom:calc(14px + env(safe-area-inset-bottom));
    padding:14px 26px;border-radius:999px;background:#FF3D9A;color:#fff;
    font-family:"Montserrat",system-ui,sans-serif;font-weight:800;font-size:1rem;
    text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.3);
    transition:transform .2s ease;white-space:nowrap;
  }
  .v4-sticky.is-zichtbaar{transform:translate(-50%,0)}
}

/* ===== handschrift met een z (7.4): Gochi Hand toont de z als 3 ===== */
.script-z{font-family:"Caveat","Gochi Hand",cursive;font-weight:600}

/* ===== logobalk (2.1 en 6.1) ===== */
.logobalk{margin-top:44px}
.logobalk-kop{font-family:"Baloo 2","Montserrat",system-ui,sans-serif;font-weight:800;text-transform:lowercase;font-size:1rem;color:#5B7C85;margin-bottom:14px}
.logobalk-rij{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px}
.logobalk-rij img{display:block;height:32px;width:auto;max-width:180px;object-fit:contain;opacity:.7;transition:opacity .15s}
.logobalk-rij img:hover{opacity:1}
.logobalk-rij a{display:block;line-height:0}
.logobalk-rij a:hover img{opacity:1}
.logobalk-rij img[alt="logo ANP"]{height:30px}
/* optisch gewicht: de Volkskrant is een lange tekstregel, TEDx en Leadinfo compacter */
.logobalk-rij img[alt="logo de Volkskrant"]{height:28px}
.logobalk-rij img[alt="logo TEDxEindhoven"]{height:36px}
@media(max-width:700px){
  .logobalk-rij{gap:16px 24px}
  .logobalk-rij img{height:24px;max-width:140px}
  .logobalk-rij img[alt="logo de Volkskrant"]{height:22px}
  .logobalk-rij img[alt="logo TEDxEindhoven"]{height:26px}
  .logobalk-rij img[alt="logo ANP"]{height:22px}
}

/* ===== testimonials (2.2 en 6.2), in de donkere cases-sectie ===== */
.testimonials{margin-top:40px}
.testimonials-kop{font-size:1.25rem;margin-bottom:18px}
.testimonial-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.testimonial-rij{grid-template-columns:1fr}}
.testimonial{
  margin:0;background:#fff;color:#12333B;border-radius:22px;padding:24px 24px 20px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);display:grid;
  grid-template-columns:48px 1fr;grid-template-rows:auto 1fr auto;gap:6px 14px;
}
.testimonial-portret{grid-row:1;width:48px;height:48px;border-radius:50%;object-fit:cover;background:#DDE9EB}
.testimonial figcaption{grid-column:2;grid-row:1;align-self:center}
.testimonial-naam{font-weight:800;margin:0;line-height:1.2}
.testimonial-bedrijf{margin:0;font-size:.85rem;color:#3C5A61}
.testimonial blockquote{grid-column:1/-1;margin:10px 0 0;font-style:italic;line-height:1.6}
/* klantlogo's: één vast kader, zelfde maat voor alle drie, links uitgelijnd (Pim 12-09) */
/* logo's op één lijn: de kaarten zijn even hoog (grid stretch), de quote-rij rekt mee (1fr) en het logo staat onderaan */
.testimonial-logo{grid-column:1/-1;align-self:end;width:160px;height:52px;object-fit:contain;object-position:left center;margin-top:12px;opacity:.9}

/* ===== vergelijkingstabel (7.6): gedeeld voor /, /methode/, /leadgeneratie-uitbesteden/ =====
   Desktop: Brams .tabelwrap uit stijl.css blijft, kolomlabels onzichtbaar.
   Mobiel: elke rij een kaart met de vraag als kop en de drie antwoorden mét label. */
.kolomlabel{display:none}
@media(max-width:767px){
  .tabelwrap{overflow-x:visible;border-radius:0;box-shadow:none}
  .tabelwrap table{display:block;min-width:0;background:transparent;font-size:1rem}
  .tabelwrap thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tabelwrap tbody,.tabelwrap tr,.tabelwrap tbody th,.tabelwrap td{display:block}
  .tabelwrap tr{background:#fff;border-radius:22px;box-shadow:0 14px 34px rgba(0,0,0,.12);padding:20px;margin-bottom:16px}
  .tabelwrap tbody th{white-space:normal;border-bottom:1px solid #DDE9EB;padding:0 0 12px;margin-bottom:14px;font-size:1.08rem;font-weight:800;color:#12333B;line-height:1.35}
  .tabelwrap td{border-bottom:0;padding:0;margin-bottom:14px}
  .tabelwrap tr td:last-child{margin-bottom:0}
  .tabelwrap td.ja{background:rgba(255,61,154,.09);border-left:4px solid #FF3D9A;border-radius:10px;padding:12px 14px}
  /* label op eigen regel, kleiner, gedempt; in Baloo 2 (Gochi Hand toont "Driftzz" en "zelf doen" als 33) */
  .kolomlabel{display:block;font-family:"Baloo 2","Montserrat",system-ui,sans-serif;font-weight:700;font-size:.82rem;line-height:1.2;color:#5B7C85;margin-bottom:4px;text-transform:lowercase}
  .tabelwrap td.ja .kolomlabel{color:#12333B;text-transform:none}
}

/* ===== tikdoelen en leesbaarheid (7.9), onder 700px ===== */
@media(max-width:700px){
  .footer-links a{font-size:14px;line-height:40px}
  .filter button{min-height:44px}
  .case .lees,.case .naam,.stempel,.kaart .lees{font-size:14px}
  /* 7.7: minder lucht boven elke hero */
  .hero,.hero.klein{padding-top:32px}
}