/* =====================================================================
   FAMILIESTIJL VOOR HORECA (de "Voor Horeca webstijl")
   Vastgelegd 8 okt 2026 op verzoek van Harold, na de pagina /voor-horeca
   op podcastvoorhoreca.com.

   REGEL (Harold, 8 okt 2026): geen nieuwe stijlen meer verzinnen. Dit is de
   vormgeving voor ALLE merken van de Voor Horeca-groep: zelfde opbouw,
   letters, kaarten, knopvorm, ritme en beweging. Per merk wisselt alleen de
   kenmerkkleur (donker + lichte tint). Het goud #BF9530 delen ze, behalve
   Grenzeloos Gastvrij: dat merk houdt zijn eigen goud #CBB26A (Harold, 8 okt 2026).
   De gouden microfoon blijft in de hoofdknoppen (Harold, 8 okt 2026); op een gouden knop donker.
   Uitleg: tools/huisstijl/LEESMIJ.md, kop "Familiestijl Voor Horeca".

   Gebruik: zet data-merk="..." op <body> (of op een sectie) om de kleuren
   van een merk te kiezen. Zonder data-merk krijg je Voor Horeca zelf.
   Fonts laden:
   <link href="https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
   ===================================================================== */

/* ---------- Kleuren die voor alle merken gelijk zijn ---------- */
:root{
  --vh-goud:#BF9530;        /* HET goud. Nooit lichter (#D9AE4A of #CFA43A ogen geel) */
  --vh-goud-hover:#B08A2C;  /* gouden knop bij hover */
  --vh-goud-donker:#8A6B1B; /* goud als tekst bij hover op licht */
  --vh-knoptekst:#101E29;   /* tekst op gouden knop */
  --vh-zand:#F2D4BC;        /* focusrand */
  --vh-taupe:#504746;       /* lopende tekst */
  --vh-taupe-licht:#6B6260; /* kleine bijschriften */
  --vh-wit:#ffffff;
  --vh-radius-kaart:20px;
  --vh-radius-knop:5px;
}

/* ---------- Kenmerkkleur per merk (bron: brandstijl-pdf, zie voor-horeca-familie) ----------
   --vh-donker = donkere vlakken en koppen op licht, --vh-licht = lichte vlakken en tekst op donker.
   Het verloop en de randen worden er automatisch van afgeleid. */
:root,[data-merk="vh"]  {--vh-donker:#122736;--vh-licht:#FAF2E9}  /* Voor Horeca (paraplu) */
[data-merk="wvh"]       {--vh-donker:#0E3B65;--vh-licht:#CCDDEB}  /* Website voor Horeca */
[data-merk="pvh"]       {--vh-donker:#1A5C66;--vh-licht:#D6E7EA}  /* Podcast voor Horeca */
[data-merk="avh"]       {--vh-donker:#2F6B4F;--vh-licht:#DDE9E0}  /* Advies voor Horeca */
[data-merk="mvh"]       {--vh-donker:#B23A6E;--vh-licht:#F7DEE9}  /* Marketing voor Horeca */
[data-merk="dvh"]       {--vh-donker:#C8632E;--vh-licht:#F6E3D6}  /* Drukwerk voor Horeca */
[data-merk="tvh"]       {--vh-donker:#1F7A6E;--vh-licht:#D7ECE8}  /* Tools voor Horeca */
[data-merk="vacvh"]     {--vh-donker:#B23B2E;--vh-licht:#F6DCD7}  /* Vacatures voor Horeca */
[data-merk="gg"]        {--vh-donker:#233142;--vh-licht:#F4F1EA;--vh-goud:#CBB26A;--vh-goud-hover:#A6823D;--vh-goud-donker:#A6823D}  /* Grenzeloos Gastvrij: eigen kleuren uit de GG-stijlgids 2026 (nachtblauw, eigen goud). Lichte tint #F4F1EA is afgeleid, nog checken met Harold. Turquoise #0097A7 en oranje #FF8F00 alleen voor call-to-actions */
:root,[data-merk]{
  --vh-donker-licht:color-mix(in srgb,var(--vh-donker) 88%,#ffffff); /* begin van het verloop */
  --vh-donker-diep:color-mix(in srgb,var(--vh-donker) 68%,#000000);  /* eind van het verloop */
  --vh-licht-rand:color-mix(in srgb,var(--vh-licht) 88%,var(--vh-donker)); /* randen op licht */
}
/* Ter controle, Voor Horeca exact zoals goedgekeurd: verloop #16303F > #122736 > #0C1A25, rand #EFE3D2 */
:root,[data-merk="vh"]{--vh-donker-licht:#16303F;--vh-donker-diep:#0C1A25;--vh-licht-rand:#EFE3D2}

/* ---------- Letters ---------- */
/* Anton alleen voor grote koppen, cijfers en woordmerken. Nooit voor kleine
   koppen (h3 in een FAQ): op klein formaat loopt Anton dicht. */
.vh-anton{font-family:"Anton",sans-serif;font-weight:400}
body{font-family:"Montserrat",sans-serif}

/* ---------- Secties: ritme donker, wit, creme ---------- */
.vh-sectie{padding:7rem 0}
.vh-sectie--donker{background-color:var(--vh-donker);background-image:linear-gradient(168deg,var(--vh-donker-licht) 0%,var(--vh-donker) 50%,var(--vh-donker-diep) 100%);color:var(--vh-licht);position:relative;overflow:hidden}
.vh-sectie--gloed{background-image:radial-gradient(ellipse 55% 65% at 82% 35%,rgba(191,149,48,.18),transparent 65%),linear-gradient(168deg,var(--vh-donker-licht) 0%,var(--vh-donker) 50%,var(--vh-donker-diep) 100%)}
.vh-sectie--wit{background-color:var(--vh-wit)}
.vh-sectie--creme{background-color:var(--vh-licht)}
/* Zachte gouden gloed linksboven in een donkere sectie. GEEN gouden cirkel in de header: afgewezen door Harold (8 okt 2026), voegt niets toe */
.vh-gloed-links::before{content:"";position:absolute;left:-140px;top:-140px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(191,149,48,.18),transparent 70%);pointer-events:none}

/* ---------- Kop van een sectie ---------- */
.vh-label{color:var(--vh-goud);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;margin-bottom:1rem}
.vh-h1{color:var(--vh-licht)}                 /* op donker */
.vh-h2{color:var(--vh-donker);margin-bottom:1rem}
.vh-sectie--donker .vh-h2{color:var(--vh-licht)}
.vh-intro{color:var(--vh-donker);max-width:44rem}
.vh-sectie--donker .vh-intro{color:color-mix(in srgb,var(--vh-licht) 82%,transparent)}
.vh-tekst{color:var(--vh-taupe)}
.vh-bijschrift{color:var(--vh-taupe-licht);font-size:.85rem}

/* ---------- Header in twee kolommen ---------- */
.vh-kop-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem 4rem;align-items:center}
.vh-witte-kaart{background:var(--vh-wit);border-radius:24px;padding:2.5rem 2.25rem 2rem;box-shadow:0 30px 70px rgba(0,0,0,.35)}
/* Merken als pillen onder een logo. GEEN lijn of streep ertussen (omgekeerde T afgewezen door Harold) */
.vh-pillen{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem}
.vh-pil{display:flex;align-items:center;gap:.6rem;background:var(--vh-licht);border:1px solid var(--vh-licht-rand);border-radius:999px;padding:.7rem 1rem;font-weight:600;font-size:.95rem;color:var(--vh-donker)}
.vh-stip{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:2px solid var(--vh-goud)}

/* ---------- Kaarten met merkkleur bovenop ---------- */
.vh-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.vh-kaart{display:flex;flex-direction:column;align-items:flex-start;background:var(--vh-wit);border:1px solid var(--vh-licht-rand);border-top:8px solid var(--vh-donker);border-radius:var(--vh-radius-kaart);padding:2rem 1.75rem;box-shadow:0 10px 30px rgba(18,39,54,.06);transition:transform .3s ease,box-shadow .3s ease}
/* Merkkleur via border-top-color. Let op: nooit border-color als verkorte regel op de kaart zetten, dan verdwijnt de merkrand */
.vh-kaart--gg{border-top-color:#233142}
.vh-kaart--wvh{border-top-color:#0E3B65}
.vh-kaart--pvh{border-top-color:#1A5C66}
.vh-kaart--tvh{border-top-color:#1F7A6E}
.vh-kaart--meer{border:2px dashed var(--vh-goud);background:var(--vh-licht);box-shadow:none}
.vh-kaart-logo{height:72px;display:flex;align-items:center;margin-bottom:1.25rem}
.vh-kaart-logo img{max-height:72px;max-width:220px;width:auto;height:auto}
/* Een svg-logo zonder eigen maat wordt 0 px breed: altijd een vaste breedte geven */
.vh-kaart-logo img[src$=".svg"]{width:240px;max-width:100%}
.vh-past{font-size:.85rem;color:var(--vh-taupe-licht);border-left:3px solid var(--vh-goud);padding-left:.75rem;margin-bottom:1.5rem}
.vh-kaart .vh-knop{margin-top:auto}

/* Statuslabel */
.vh-status{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:.3rem .75rem;margin-bottom:.9rem;background:#E6F2EA;color:#2F6B4F}
.vh-status--straks{background:#FBF1DA;color:var(--vh-goud-donker)}
.vh-status--hier{background:var(--vh-donker);color:var(--vh-licht)}

/* ---------- Stappen op donker ---------- */
.vh-stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.vh-stap{padding-top:1.5rem;border-top:2px dashed rgba(191,149,48,.55)}
.vh-stap-nr{font-family:"Anton",sans-serif;font-size:4.5rem;line-height:1;color:var(--vh-goud);margin-bottom:1rem}
.vh-stap p{color:color-mix(in srgb,var(--vh-licht) 82%,transparent)}
.vh-tag{display:inline-block;margin-top:1rem;border:1px solid var(--vh-goud);color:var(--vh-goud);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:.3rem .75rem}

/* ---------- Tegels (op creme) ---------- */
.vh-tegels{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.vh-tegel{background:var(--vh-wit);border-radius:18px;padding:1.5rem;box-shadow:0 10px 30px rgba(18,39,54,.08);transition:transform .3s ease,box-shadow .3s ease}
.vh-tegel--breed{grid-column:span 2;background:var(--vh-donker);color:var(--vh-licht)}
.vh-tegel-nr{font-family:"Anton",sans-serif;font-size:1.1rem;color:var(--vh-goud);margin-bottom:.5rem}
.vh-tegel-kop{font-family:"Anton",sans-serif;font-size:1.5rem;line-height:1.1;text-transform:uppercase;color:var(--vh-donker);margin-bottom:.5rem}
.vh-tegel--breed .vh-tegel-kop{color:var(--vh-licht)}

/* ---------- Verhaal met foto ---------- */
.vh-verhaal-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem 4.5rem;align-items:center}
.vh-foto-wrap{position:relative;padding-bottom:2.5rem}
.vh-foto{width:100%;height:520px;object-fit:cover;border-radius:24px;box-shadow:0 24px 60px rgba(18,39,54,.18)}
.vh-foto-kaart{position:absolute;right:-1.5rem;bottom:0;max-width:280px;background:var(--vh-donker);border-left:4px solid var(--vh-goud);border-radius:18px;padding:1.25rem 1.5rem;box-shadow:0 18px 40px rgba(18,39,54,.25)}
.vh-foto-kaart strong{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:1.6rem;color:var(--vh-goud)}
.vh-foto-kaart span{font-size:.9rem;color:color-mix(in srgb,var(--vh-licht) 85%,transparent)}
.vh-feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;border-top:1px solid var(--vh-licht-rand);padding-top:1.5rem}
.vh-feit-getal{font-family:"Anton",sans-serif;font-size:2rem;line-height:1;color:var(--vh-donker)}
.vh-principes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:5rem}
.vh-principe{background:var(--vh-licht);border-left:4px solid var(--vh-goud);border-radius:18px;padding:1.75rem}
.vh-principe-kop{font-family:"Anton",sans-serif;font-size:1.4rem;line-height:1.15;text-transform:uppercase;color:var(--vh-donker);margin-bottom:.6rem}

/* ---------- Vragen ---------- */
.vh-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem 4.5rem;align-items:start}
.vh-vraag{border:1px solid var(--vh-licht-rand);border-radius:16px;padding:1.4rem 1.6rem;background:var(--vh-wit);transition:border-color .3s ease}
.vh-vraag h3{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.125rem;line-height:1.35;text-transform:none;color:var(--vh-donker);margin:0 0 .5rem}
.vh-vraag p{color:var(--vh-taupe);font-size:1rem;line-height:1.6;margin:0}

/* ---------- Knoppen (zoals voorhoreca.com) ---------- */
.vh-knop{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:1rem 2.1rem;border-radius:var(--vh-radius-knop);border:1.5px solid var(--vh-goud);background:var(--vh-goud);color:var(--vh-knoptekst);font-weight:600;font-size:.95rem;letter-spacing:.03em;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -10px rgba(191,149,48,.75);transition:transform .22s cubic-bezier(.16,.84,.34,1),box-shadow .22s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.vh-knop:hover{transform:translateY(-2px);background:var(--vh-goud-hover);border-color:var(--vh-goud-hover);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 30px -10px rgba(191,149,48,.85)}
.vh-knop--omlijnd{background:transparent;color:var(--vh-donker);border-color:rgba(18,39,54,.35);box-shadow:none}
.vh-knop--omlijnd:hover{background:transparent;border-color:var(--vh-goud);color:var(--vh-goud-donker)}
.vh-sectie--donker .vh-knop--omlijnd{color:var(--vh-licht);border-color:rgba(242,212,188,.35);background:color-mix(in srgb,var(--vh-licht) 3%,transparent)}
.vh-sectie--donker .vh-knop--omlijnd:hover{color:var(--vh-goud);border-color:var(--vh-goud)}
.vh-knop:active{transform:translateY(0)}
.vh-knop:focus-visible{outline:2px solid var(--vh-zand);outline-offset:3px}

/* ---------- Hover en beweging ---------- */
@media (hover:hover) and (pointer:fine){
  .vh-kaart:not(.vh-kaart--meer):hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(18,39,54,.16)}
  .vh-tegel:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,39,54,.16)}
  .vh-vraag:hover{border-color:var(--vh-goud)}
}
.vh-puls{animation:vh-puls 2.2s ease-in-out infinite}
@keyframes vh-puls{0%,100%{box-shadow:0 0 0 0 rgba(191,149,48,.6)}50%{box-shadow:0 0 0 6px rgba(191,149,48,0)}}
/* Invliegen bij scrollen: zie script onderaan. Zonder script blijft alles zichtbaar. */
.vh-js .vh-in{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.34,1)}
.vh-js .vh-in.vh-zichtbaar{opacity:1;transform:none}

/* ---------- Mobiel ---------- */
@media (max-width:991px){
  .vh-kop-grid,.vh-verhaal-grid,.vh-faq-grid{grid-template-columns:1fr}
  .vh-kaarten{grid-template-columns:1fr 1fr}
  .vh-principes{grid-template-columns:1fr}
  .vh-foto{height:420px}
}
@media (max-width:767px){
  .vh-sectie{padding:4.5rem 0}
  .vh-kaarten,.vh-stappen{grid-template-columns:1fr}
}
@media (max-width:479px){
  .vh-pillen,.vh-tegels,.vh-feiten{grid-template-columns:1fr}
  .vh-tegel--breed{grid-column:span 1}
  .vh-foto{height:300px}
  .vh-foto-kaart{position:relative;right:0;max-width:none;margin:-2rem 1rem 0}
  .vh-knop{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .vh-js .vh-in{opacity:1;transform:none;transition:none}
  .vh-puls{animation:none}
  .vh-knop,.vh-kaart,.vh-tegel{transition:none}
  .vh-knop:hover,.vh-kaart:hover,.vh-tegel:hover{transform:none}
}

/* ---------- Script voor invliegen (onderaan de pagina plaatsen) ----------
<script>
(function(){
 if(!('IntersectionObserver' in window))return;
 document.documentElement.classList.add('vh-js');
 var els=document.querySelectorAll('.vh-kaart,.vh-stap,.vh-tegel,.vh-principe,.vh-vraag,.vh-foto-wrap,.vh-witte-kaart');
 var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){var t=e.target;t.classList.add('vh-zichtbaar');io.unobserve(t);setTimeout(function(){t.style.transitionDelay='';t.classList.remove('vh-in');},1400);}});},{threshold:.15});
 els.forEach(function(el){el.classList.add('vh-in');var i=Array.prototype.indexOf.call(el.parentElement.children,el);el.style.transitionDelay=(Math.min(i,5)*90)+'ms';io.observe(el);});
})();
</script>
------------------------------------------------------------------------- */