/* ============================================
   4 Soccer Talent – Hoofdstylesheet v2
   Navigatiestructuur:
     BALK 1 (topbalk): Diensten | Over ons | 4 Wie? | Ervaringen | Nieuws | Contact
     BALK 2 (nav-hoofd): Logo | POSITIEF COACHEN | PRAKTIJK... | ... | [contact opnemen]
   ============================================ */

/* ── Design tokens ── */
:root {
  /* ── Primaire kleur: groen – knoppen, accenten, nav-actief, links ── */
  --blauw:        #4DAA50;   /* primair groen – knoppen, highlights */
  --blauw-donker: #3d8a40;   /* hover op groene knop */
  --blauw-licht:  #4DAA50;   /* links – zelfde groen */

  /* ── Titels en navigatietekst ── */
  --titel-kleur:  #222222;   /* H1/H2/H3 – bijna zwart, zoals origineel */

  /* ── Achtergronden ── */
  --wit:          #ffffff;   /* hoofd achtergrond – wit */
  --lichtgrijs:   #f8f9fa;   /* subtiele sectieachtergrond */
  --grijs:        #e9ecef;   /* borders licht, nav-hover bg */

  /* ── Borders ── */
  --border:       #dee2e6;   /* kaartborders, tabellijnen */

  /* ── Tekst ── */
  --tekst:        #222222;   /* bodytekst – donker, bijna zwart */
  --tekst-licht:  #555555;   /* subteksten, omschrijvingen */
  --tekst-subtiel:#888888;   /* datums, meta-info */

  /* ── CTA sectie + footer – zwart ── */
  --cta-donker:   #1a1a1a;   /* donkere CTA sectie – zwart */
  --footer-bg:    #111111;   /* footer – zwart */

  /* ── Groene badges (tarieven) – zelfde groen ── */
  --groen:        #4DAA50;
  --groen-donker: #3d8a40;

  /* ── Schaduwen ── */
  --shadow-sm:    0 1px 4px rgba(0,0,0,.08);
  --shadow:       0 2px 10px rgba(0,0,0,.10);
  --shadow-md:    0 4px 18px rgba(0,0,0,.13);

  /* ── Layout ── */
  --radius:       4px;
  --radius-lg:    8px;
  --ease:         .2s ease;
  --max-w:        1140px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;font-size:1rem;line-height:1.7;color:var(--tekst);background:var(--wit)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blauw-licht);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}

.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.25rem}

/* ══════════════════════════════════════════
   NAVIGATIE
   ══════════════════════════════════════════ */

/* BALK 1 – Tekstlinks rechtsboven */
.nav-topbalk{
  background:#3a8a3d;
  border-bottom:1px solid #2e6e30;
}
.nav-topbalk .container{
  display:flex;justify-content:flex-end;
  gap:1.25rem;padding:.45rem 1.25rem;
}
.nav-topbalk a{
  color:rgba(255,255,255,.85);font-size:.82rem;font-weight:500;
  transition:color var(--ease);white-space:nowrap;
}
.nav-topbalk a:hover,.nav-topbalk a.actief{color:var(--wit);text-decoration:none}

/* BALK 2 – Logo + dienstlinks sticky */
.nav-hoofd{
  background:var(--blauw);
  border-bottom:2px solid var(--blauw-donker);
  position:sticky;top:0;z-index:200;
  box-shadow:var(--shadow-sm);
}
.nav-hoofd .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem 1.25rem;
}
.nav-logo img{height:48px;width:auto;display:block}
.nav-logo:hover{opacity:.85;text-decoration:none}

.nav-diensten{display:flex;align-items:center;gap:.1rem;flex-wrap:wrap}
.nav-diensten a{
  color:var(--wit);font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.4rem .65rem;border-radius:var(--radius);
  transition:background var(--ease),color var(--ease);white-space:nowrap;
}
.nav-diensten a:hover,.nav-diensten a.actief{
  background:rgba(0,0,0,.15);color:var(--wit);text-decoration:none;
}
.nav-diensten .nav-cta{
  background:var(--wit);color:var(--blauw)!important;
  padding:.4rem .9rem;border-radius:var(--radius);margin-left:.4rem;
}
.nav-diensten .nav-cta:hover{background:var(--lichtgrijs)!important;color:var(--blauw)!important;text-decoration:none}

/* Hamburger */
.nav-hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:.5rem;
}
.nav-hamburger span{display:block;width:24px;height:2px;background:var(--wit);border-radius:2px;transition:all var(--ease)}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobiel uitklapmenu */
.nav-mobiel{
  display:none;background:var(--wit);
  border-top:1px solid var(--grijs);
}
.nav-mobiel.open{display:block}
.nav-mobiel a{
  display:block;padding:.65rem 1.25rem;
  color:var(--tekst);font-weight:600;font-size:.9rem;
  border-bottom:1px solid var(--grijs);
  transition:background var(--ease);
}
.nav-mobiel a:last-child{border-bottom:none}
.nav-mobiel a:hover{background:var(--lichtgrijs);text-decoration:none}
.nav-sectie-label{
  display:block;padding:.75rem 1.25rem .25rem;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tekst-subtiel);font-weight:700;
}

/* ══════════════════════════════════════════
   PAGINAHEADER (interne pagina's)
   ══════════════════════════════════════════ */
.pagina-hero{
  background:var(--lichtgrijs);
  border-bottom:1px solid var(--grijs);
  padding:2.5rem 0 2rem;
}
.pagina-hero h1{
  font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;
  color:var(--titel-kleur);line-height:1.2;margin-bottom:.5rem;
}
.pagina-hero p{font-size:1rem;color:var(--tekst-licht);max-width:600px}

/* Breadcrumb */
.breadcrumb{
  display:flex;gap:.35rem;align-items:center;
  font-size:.8rem;color:var(--tekst-subtiel);margin-bottom:.75rem;
}
.breadcrumb a{color:var(--tekst-subtiel)}
.breadcrumb a:hover{color:var(--titel-kleur);text-decoration:none}
.breadcrumb-sep{opacity:.5}

/* ══════════════════════════════════════════
   HOMEPAGE HERO
   ══════════════════════════════════════════ */
.hero{background:var(--lichtgrijs);padding:4rem 0}
.hero .container{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:center;
}
.hero-tekst h1{
  font-size:clamp(2rem,4.5vw,3rem);font-weight:800;
  color:var(--titel-kleur);line-height:1.2;margin-bottom:1.25rem;
}
.hero-tekst p{
  font-size:1.05rem;color:var(--tekst-licht);
  max-width:480px;margin-bottom:2rem;
}
.hero-knoppen{display:flex;gap:.75rem;flex-wrap:wrap}
.hero-foto{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.hero-foto img{width:100%;height:370px;object-fit:cover}

/* ══════════════════════════════════════════
   KNOPPEN
   ══════════════════════════════════════════ */
.knop{
  display:inline-block;padding:.65rem 1.5rem;
  font-weight:700;font-size:.88rem;letter-spacing:.03em;
  border-radius:var(--radius);border:2px solid transparent;
  text-align:center;cursor:pointer;text-decoration:none!important;
  transition:background var(--ease),color var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.knop-primair{background:var(--blauw);color:var(--wit);border-color:var(--blauw)}
.knop-primair:hover{background:var(--blauw-donker);border-color:var(--blauw-donker);box-shadow:var(--shadow-sm)}
.knop-secundair{background:transparent;color:var(--titel-kleur);border-color:var(--titel-kleur)}
.knop-secundair:hover{background:var(--titel-kleur);color:var(--wit)}
.knop-wit{background:var(--wit);color:var(--titel-kleur);border-color:var(--wit)}
.knop-wit:hover{background:var(--lichtgrijs)}

/* ══════════════════════════════════════════
   VIDEO SECTIE (homepage)
   ══════════════════════════════════════════ */
.video-sectie{padding:4rem 0;background:var(--wit)}
.video-sectie .container{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:center;
}
.video-tekst h2{
  font-size:clamp(1.5rem,3vw,2rem);font-weight:700;
  color:var(--titel-kleur);margin-bottom:.4rem;
}
.video-tekst p{color:var(--tekst-licht);margin-bottom:1.5rem}
.video-tekst .hero-knoppen{margin-top:1.5rem}

/* YouTube thumbnail */
.yt-thumb-link{
  display:block;position:relative;
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);
}
.yt-thumb-link img{width:100%;height:auto;display:block;transition:opacity var(--ease)}
.yt-thumb-link:hover img{opacity:.9}
.yt-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;background:rgba(220,0,0,.85);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--wit);font-size:1.6rem;padding-left:4px;
  box-shadow:0 2px 12px rgba(0,0,0,.4);transition:background var(--ease),transform var(--ease);
}
.yt-thumb-link:hover .yt-play-btn{background:rgb(220,0,0);transform:translate(-50%,-50%) scale(1.08)}
#yt-wrapper{border-radius:var(--radius-lg);overflow:hidden}

/* ══════════════════════════════════════════
   SECTIE LAYOUT
   ══════════════════════════════════════════ */
.sectie{padding:4rem 0}
.sectie-licht{background:var(--lichtgrijs)}
.sectie-wit{background:var(--wit)}
.sectie-header{text-align:center;margin-bottom:2.5rem}
.sectie-header h2{
  font-size:clamp(1.5rem,3vw,2rem);font-weight:700;
  color:var(--titel-kleur);margin-bottom:.5rem;
}
.sectie-header p{color:var(--tekst-licht);font-size:.98rem}
.sectie-footer{text-align:center;margin-top:2rem}

/* ══════════════════════════════════════════
   DIENSTEN KAARTEN
   ══════════════════════════════════════════ */
.diensten-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1.5rem;
}
.dienst-kaart{
  background:var(--wit);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:box-shadow var(--ease),transform var(--ease);
}
.dienst-kaart:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.dienst-kaart-foto{width:100%;height:175px;object-fit:cover;background:var(--grijs)}
.dienst-kaart-foto-placeholder{
  width:100%;height:175px;
  background:linear-gradient(135deg,var(--blauw) 0%,var(--blauw-licht) 100%);
}
.dienst-kaart-body{padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.dienst-kaart h3{
  font-size:.82rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--titel-kleur);
}
.dienst-kaart p{color:var(--tekst-licht);font-size:.88rem;flex:1}
.dienst-kaart .knop{align-self:flex-start;margin-top:.5rem}

/* ══════════════════════════════════════════
   NIEUWS KAARTEN
   ══════════════════════════════════════════ */
.nieuws-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;
}
.nieuws-kaart{
  background:var(--wit);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:box-shadow var(--ease),transform var(--ease);
}
.nieuws-kaart:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.nieuws-kaart-foto{width:100%;height:195px;object-fit:cover;background:var(--grijs)}
.nieuws-kaart-body{padding:1.25rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.nieuws-kaart-datum{font-size:.76rem;color:var(--tekst-subtiel);font-weight:600}
.nieuws-kaart h3{font-size:.98rem;font-weight:700;color:var(--tekst);line-height:1.4;flex:1}
.nieuws-kaart p{color:var(--tekst-licht);font-size:.88rem}
.nieuws-lees-link{
  font-size:.86rem;font-weight:700;color:var(--titel-kleur);margin-top:.5rem;
  transition:color var(--ease);
}
.nieuws-lees-link:hover{color:var(--blauw-donker);text-decoration:none}

/* Nieuws als lijst (overzichtspagina) */
.nieuws-als-lijst{display:flex;flex-direction:column;gap:1.25rem}
.nieuws-als-lijst .nieuws-kaart{
  flex-direction:row;max-height:none;
}
.nieuws-als-lijst .nieuws-kaart-foto{
  width:200px;min-width:200px;height:auto;min-height:140px;
  border-radius:0;flex-shrink:0;
}
.nieuws-als-lijst .nieuws-kaart-body{justify-content:center}

/* ══════════════════════════════════════════
   REFERENTIES / ERVARINGEN
   ══════════════════════════════════════════ */
#refs-grid,.referenties-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.5rem;
}
.ref-kaart{
  background:var(--wit);border:1px solid var(--border);
  border-left:4px solid var(--titel-kleur);border-radius:var(--radius-lg);
  padding:1.5rem;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:.75rem;
  transition:box-shadow var(--ease);
}
.ref-kaart:hover{box-shadow:var(--shadow-md)}
.ref-quote{
  font-size:.98rem;font-weight:700;color:var(--tekst);
  line-height:1.45;font-style:italic;
}
.ref-quote::before{content:'\201C';color:var(--titel-kleur);font-size:1.6em;line-height:0;vertical-align:-.35em;margin-right:.05em}
.ref-persoon{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.ref-foto{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}
.ref-foto-initialen{
  width:46px;height:46px;border-radius:50%;background:var(--blauw);
  display:flex;align-items:center;justify-content:center;
  color:var(--wit);font-weight:700;font-size:1rem;flex-shrink:0;
}
.ref-naam{font-size:.86rem;font-weight:700;color:var(--tekst)}
.ref-club{font-size:.78rem;color:var(--tekst-subtiel)}
.refs-lees-link{font-size:.84rem;font-weight:700;color:var(--titel-kleur)}
.refs-lees-link:hover{color:var(--blauw-donker);text-decoration:none}

/* ══════════════════════════════════════════
   CTA SECTIE
   ══════════════════════════════════════════ */
.cta-sectie{
  position:relative;background:#2e7d31;color:var(--wit);
  padding:4.5rem 0;overflow:hidden;
}
.cta-sectie .container{
  position:relative;z-index:2;
  display:grid;grid-template-columns:auto 1fr;
  gap:3rem;align-items:center;
}
.cta-foto-wrapper{
  flex-shrink:0;
}
.cta-foto-wrapper img{
  width:220px;height:220px;object-fit:cover;
  border-radius:50%;border:4px solid rgba(255,255,255,.2);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.cta-inhoud h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;margin-bottom:.65rem}
.cta-inhoud p{font-size:.98rem;opacity:.85;max-width:560px;margin-bottom:1rem}
.cta-contact-info{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.25rem}
.cta-contact-info a{
  color:var(--wit);font-weight:600;font-size:.98rem;opacity:.9;
  transition:opacity var(--ease);
}
.cta-contact-info a:hover{opacity:1;text-decoration:none}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.footer{background:var(--footer-bg);color:rgba(255,255,255,.7);padding:3rem 0 0}
.footer .container{
  display:grid;grid-template-columns:180px 1fr 1fr 1fr;
  gap:2.5rem;padding-bottom:2rem;align-items:start;
}
.footer-logo-kolom img{height:72px;width:auto;margin-bottom:1rem;opacity:1}
.footer-social{display:flex;gap:.65rem;margin-top:.4rem}
.footer-social a{
  color:rgba(255,255,255,.55);transition:color var(--ease);
  display:flex;align-items:center;
}
.footer-social a:hover{color:var(--wit);text-decoration:none}
.footer-kolom h4{
  color:var(--wit);font-size:.82rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:.9rem;
}
.footer-kolom address{font-style:normal}
.footer-kolom address span{font-size:.86rem;line-height:1.8;display:block;margin-bottom:.3rem}
.footer-kolom a{
  display:block;font-size:.86rem;color:rgba(255,255,255,.6);
  margin-bottom:.3rem;transition:color var(--ease);
}
.footer-kolom a:hover{color:var(--wit);text-decoration:none}
.footer-bodem{
  border-top:1px solid rgba(255,255,255,.1);padding:1.1rem 0;
}
.footer-bodem-inner{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:.5rem;font-size:.78rem;color:rgba(255,255,255,.35);
}
.footer-bodem-links{display:flex;gap:1rem}
.footer-bodem-links a{color:rgba(255,255,255,.35);font-size:.78rem;transition:color var(--ease)}
.footer-bodem-links a:hover{color:var(--wit);text-decoration:none}

/* ══════════════════════════════════════════
   OVER ONS
   ══════════════════════════════════════════ */
.visie-sectie{padding:3rem 0}
.visie-blok{margin-bottom:2.25rem}
.visie-blok h2{font-size:1.2rem;font-weight:700;color:var(--titel-kleur);margin-bottom:.6rem}
.visie-blok p{color:var(--tekst-licht);line-height:1.8}

.profiel-sectie{background:var(--lichtgrijs);padding:3.5rem 0}
.profiel-sectie .container{
  display:grid;grid-template-columns:260px 1fr;
  gap:3rem;align-items:start;
}
.profiel-fotos{display:flex;flex-direction:column;gap:1rem}
.profiel-fotos img{
  width:100%;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);object-fit:cover;
}
.profiel-fotos img:first-child{height:260px}
.profiel-fotos img:last-child{height:200px}
.profiel-inhoud h2{font-size:1.55rem;font-weight:700;color:var(--titel-kleur);margin-bottom:.9rem}
.profiel-inhoud p{color:var(--tekst-licht);margin-bottom:.75rem;line-height:1.8}
.profiel-quote{
  border-left:4px solid var(--titel-kleur);
  padding:.9rem 1.25rem;margin:1.5rem 0;
  background:var(--wit);border-radius:0 var(--radius) var(--radius) 0;
}
.profiel-quote p{font-style:italic;font-weight:600;color:var(--tekst);margin:0 0 .35rem}
.profiel-quote cite{font-size:.8rem;color:var(--tekst-subtiel);font-style:normal}

.ervaring-lijst{margin-top:1.5rem}
.ervaring-lijst h3{font-size:.95rem;font-weight:700;color:var(--titel-kleur);margin-bottom:.85rem;text-transform:uppercase;letter-spacing:.04em}
.ervaring-item{
  display:grid;grid-template-columns:115px 1fr;
  gap:.5rem 1rem;padding:.45rem 0;
  border-bottom:1px solid var(--grijs);font-size:.86rem;
}
.ervaring-item:last-child{border-bottom:none}
.ervaring-periode{color:var(--titel-kleur);font-weight:700;font-size:.8rem}
.ervaring-tekst{color:var(--tekst-licht)}

/* ══════════════════════════════════════════
   DIENST DETAILPAGINA
   ══════════════════════════════════════════ */
.dienst-content{padding:3rem 0}
.dienst-content .container{
  display:grid;grid-template-columns:1fr 320px;
  gap:3rem;align-items:start;
}
.dienst-secties{display:flex;flex-direction:column;gap:2rem}
.dienst-sectie h2{
  font-size:1.2rem;font-weight:700;color:var(--titel-kleur);
  margin-bottom:1rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--grijs);
}
.dienst-item{margin-bottom:1.1rem}
.dienst-item-label{display:block;font-weight:700;color:var(--tekst);margin-bottom:.25rem;font-size:.93rem}
.dienst-item p{color:var(--tekst-licht)}
.dienst-item ul{margin-top:.5rem;padding-left:1.2rem}
.dienst-item ul li{list-style:disc;color:var(--tekst-licht);margin-bottom:.2rem;font-size:.93rem}

.dienst-sidebar{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:1.25rem}
.dienst-sidebar-foto{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.dienst-sidebar-foto img{width:100%;height:230px;object-fit:cover}
.dienst-sidebar-kaart{
  background:var(--lichtgrijs);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.4rem;
}
.dienst-sidebar-kaart h3{font-size:.9rem;font-weight:700;color:var(--titel-kleur);margin-bottom:.6rem}
.dienst-sidebar-kaart p{font-size:.85rem;color:var(--tekst-licht);margin-bottom:.9rem}
.dienst-sidebar-kaart .knop{width:100%;text-align:center;display:block}
.dienst-sidebar-kaart a:not(.knop){
  display:block;font-size:.86rem;color:var(--blauw-licht);
  margin-bottom:.35rem;transition:color var(--ease);
}
.dienst-sidebar-kaart a:not(.knop):hover{color:var(--titel-kleur);text-decoration:none}

/* ══════════════════════════════════════════
   TARIEVEN TABEL
   ══════════════════════════════════════════ */
.tarieven-wrapper{overflow-x:auto;margin:1.5rem 0}
.tarieven-tabel{width:100%;border-collapse:collapse;font-size:.88rem}
.tarieven-tabel th{
  background:var(--titel-kleur);color:var(--wit);
  padding:.7rem 1rem;text-align:left;font-weight:700;
  font-size:.8rem;letter-spacing:.04em;white-space:nowrap;
}
.tarieven-tabel td{
  padding:.65rem 1rem;border-bottom:1px solid var(--grijs);color:var(--tekst);
}
.tarieven-tabel tr:nth-child(even) td{background:var(--lichtgrijs)}
.tarieven-tabel tr:hover td{background:#e8f0f8}
.badge-basis{background:var(--titel-kleur);color:#fff;padding:.12rem .45rem;border-radius:3px;font-size:.73rem;font-weight:700}
.badge-advanced{background:var(--groen);color:#fff;padding:.12rem .45rem;border-radius:3px;font-size:.73rem;font-weight:700}
.tarieven-noot{font-size:.84rem;color:var(--tekst-licht);font-style:italic;margin-top:.65rem}

/* ══════════════════════════════════════════
   CONTACT PAGINA
   ══════════════════════════════════════════ */
.contact-sectie{padding:3rem 0}
.contact-sectie .container{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;align-items:start;
}
.contact-info h1{
  font-size:clamp(1.8rem,4vw,2.4rem);color:var(--titel-kleur);
  font-weight:800;margin-bottom:.6rem;
}
.contact-info > p.contact-intro{color:var(--tekst-licht);margin-bottom:2rem;font-size:1rem}
.contact-gegevens{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}
.contact-rij{display:flex;flex-direction:column;gap:.1rem}
.contact-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tekst-subtiel)}
.contact-rij a,.contact-rij address{color:var(--tekst);font-style:normal;font-size:.95rem}
.contact-rij a:hover{color:var(--titel-kleur);text-decoration:none}
.contact-aanvullend{font-size:.9rem;color:var(--tekst-licht);line-height:1.7;max-width:440px}
.contact-foto img{
  width:100%;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);object-fit:cover;max-height:460px;
}

/* ══════════════════════════════════════════
   NIEUWS DETAILPAGINA
   ══════════════════════════════════════════ */
.artikel-wrapper{padding:3rem 0}
.artikel-wrapper .container{
  display:grid;grid-template-columns:1fr 300px;
  gap:3rem;align-items:start;
}
.artikel-hoofd{display:flex;flex-direction:column;gap:1.25rem}
.artikel-meta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.artikel-datum{font-size:.8rem;color:var(--tekst-subtiel);font-weight:600}
.artikel-foto{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.artikel-intro{font-size:1.05rem;color:var(--tekst-licht);font-weight:600;line-height:1.7}
.artikel-inhoud p{color:var(--tekst-licht);line-height:1.85;margin-bottom:1rem}
.artikel-inhoud strong{color:var(--tekst);font-weight:700}
.artikel-sidebar{position:sticky;top:5.5rem}
.gerelateerd-sectie{margin-top:3rem;padding-top:2rem;border-top:2px solid var(--grijs)}
.gerelateerd-sectie h2{font-size:1.1rem;font-weight:700;color:var(--titel-kleur);margin-bottom:1.25rem}

/* ══════════════════════════════════════════
   REFERENTIE DETAILPAGINA
   ══════════════════════════════════════════ */
.ref-detail{padding:3rem 0}
.ref-detail .container{
  display:grid;grid-template-columns:1fr 280px;
  gap:3rem;align-items:start;
}
.ref-detail-inhoud{display:flex;flex-direction:column;gap:1.25rem}
.ref-detail-quote{
  font-size:1.15rem;font-style:italic;font-weight:700;
  color:var(--tekst);line-height:1.5;
  border-left:4px solid var(--blauw);padding:.75rem 1.25rem;
  background:var(--lichtgrijs);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.ref-detail-tekst{color:var(--tekst-licht);line-height:1.85}
.ref-detail-persoon{display:flex;align-items:center;gap:1rem}
.ref-detail-foto{width:70px;height:70px;border-radius:50%;object-fit:cover}
.ref-detail-naam{font-weight:700;font-size:1rem;color:var(--tekst)}
.ref-detail-club{font-size:.88rem;color:var(--tekst-subtiel)}

/* ══════════════════════════════════════════
   4 WIE PAGINA
   ══════════════════════════════════════════ */
.voor-wie-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1.5rem;margin-top:2rem;
}
.voor-wie-kaart{
  background:var(--lichtgrijs);border-radius:var(--radius-lg);
  padding:1.5rem;border-left:4px solid var(--blauw);
}
.voor-wie-kaart h2{font-size:1.05rem;color:var(--titel-kleur);font-weight:700;margin-bottom:.5rem}
.voor-wie-kaart p{font-size:.9rem;color:var(--tekst-licht)}

/* ══════════════════════════════════════════
   HULPKLASSEN
   ══════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tekst-center{text-align:center}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mb-2{margin-bottom:1rem}

/* ══════════════════════════════════════════
   RESPONSIVE – Tablet (≤900px)
   ══════════════════════════════════════════ */
@media(max-width:900px){
  .hero .container{grid-template-columns:1fr}
  .hero-foto{order:-1}
  .hero-foto img{height:260px}
  .video-sectie .container{grid-template-columns:1fr}
  .dienst-content .container{grid-template-columns:1fr}
  .dienst-sidebar{position:static}
  .profiel-sectie .container{grid-template-columns:1fr}
  .profiel-fotos{flex-direction:row}
  .profiel-fotos img{flex:1;height:200px!important}
  .contact-sectie .container{grid-template-columns:1fr}
  .cta-sectie .container{grid-template-columns:1fr}
  .cta-foto-wrapper{display:none}
  .footer .container{grid-template-columns:1fr 1fr}
  .artikel-wrapper .container{grid-template-columns:1fr}
  .artikel-sidebar{position:static}
  .ref-detail .container{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════
   RESPONSIVE – Mobiel (≤620px)
   ══════════════════════════════════════════ */
@media(max-width:620px){
  .nav-topbalk{display:none}
  .nav-diensten{display:none}
  .nav-hamburger{display:flex}

  .diensten-grid{grid-template-columns:1fr}
  .nieuws-grid{grid-template-columns:1fr}
  #refs-grid,.referenties-grid{grid-template-columns:1fr}
  .voor-wie-grid{grid-template-columns:1fr}

  .nieuws-als-lijst .nieuws-kaart{flex-direction:column;max-height:none}
  .nieuws-als-lijst .nieuws-kaart-foto{width:100%;height:175px;min-height:unset}

  .footer .container{grid-template-columns:1fr}
  .footer-bodem-inner{flex-direction:column;text-align:center}

  .ervaring-item{grid-template-columns:1fr}

  .hero-knoppen{flex-direction:column}
  .hero-knoppen .knop{width:100%;text-align:center}

  .profiel-fotos{flex-direction:column}
  .profiel-fotos img{height:220px!important}
}

/* ══════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════
   KENNISDELING PAGINA
   ══════════════════════════════════════════ */
.intro-woorden{
  display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;
}
.intro-woord{
  background:var(--blauw);color:var(--wit);
  padding:.5rem 1.25rem;border-radius:var(--radius);
  font-weight:700;font-size:.95rem;letter-spacing:.03em;
}
.gratis-sectie{
  background:var(--lichtgrijs);border-radius:var(--radius-lg);
  padding:2rem;margin:2rem 0;
}
.gratis-sectie h2{
  font-size:1.2rem;font-weight:700;color:var(--titel-kleur);margin-bottom:.35rem;
}
.gratis-sectie .gratis-sub{
  font-size:.9rem;color:var(--tekst-licht);margin-bottom:1.25rem;
}
.gratis-sectie .gratis-sub a{color:var(--blauw);font-weight:600}
.gratis-sectie .gratis-sub a:hover{text-decoration:underline}
#gratis-lijst{padding:0;list-style:none}
#gratis-lijst li{
  display:flex;gap:.75rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--grijs);
  font-size:.95rem;color:var(--tekst-licht);
}
#gratis-lijst li:last-child{border-bottom:none}
.item-nr{
  color:var(--blauw);font-weight:700;font-size:.9rem;
  flex-shrink:0;min-width:1.4rem;
}
.kennisdeling-ervaring{
  border-left:4px solid var(--blauw);
  padding:1.5rem 1.5rem 1.5rem 1.75rem;
  background:var(--lichtgrijs);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  margin-top:2rem;
}
.kennisdeling-ervaring p{
  color:var(--tekst-licht);line-height:1.8;margin-bottom:.75rem;
}
.kennisdeling-ervaring ul{
  padding-left:1.25rem;margin:.5rem 0 .75rem;
}
.kennisdeling-ervaring ul li{
  list-style:disc;color:var(--tekst-licht);margin-bottom:.3rem;font-size:.93rem;
}
.kennisdeling-ervaring .ervaring-auteur{
  font-weight:700;color:var(--titel-kleur);font-size:.95rem;margin-top:.5rem;
}

/* ══════════════════════════════════════════
   MEDIA PAGINA
   ══════════════════════════════════════════ */
.media-secties{display:flex;flex-direction:column;gap:2.5rem}
.media-sectie h2{
  font-size:1.15rem;font-weight:700;color:var(--titel-kleur);
  margin-bottom:1rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--grijs);
}
.media-lijst{list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem}
.media-lijst li{
  padding:.75rem 1rem;background:var(--lichtgrijs);
  border-radius:var(--radius);border-left:4px solid var(--blauw);
  font-size:.93rem;color:var(--tekst-licht);line-height:1.6;
}
.media-lijst li a{color:var(--blauw);font-weight:600}
.media-lijst li a:hover{text-decoration:underline}

/* ══════════════════════════════════════════
   EVENTS PAGINA
   ══════════════════════════════════════════ */
.events-wrapper{display:flex;flex-direction:column;gap:3rem}
.events-sectie-titel{
  font-size:1.25rem;font-weight:700;color:var(--titel-kleur);
  margin-bottom:1.5rem;padding-bottom:.5rem;
  border-bottom:3px solid var(--blauw);
}
.events-aankomend-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;
}
.events-afgelopen-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem;
}
.events-blok{
  background:var(--wit);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.events-jaar{
  background:var(--blauw);color:var(--wit);
  font-weight:700;font-size:.9rem;letter-spacing:.04em;
  padding:.5rem 1rem;
}
.events-aankomend-grid .events-jaar{
  background:var(--blauw);
}
.events-afgelopen-grid .events-jaar{
  background:var(--tekst-licht);
}
.events-lijst{
  list-style:none;padding:.75rem 1rem;
  display:flex;flex-direction:column;gap:.4rem;
}
.events-lijst li{
  font-size:.88rem;color:var(--tekst-licht);
  padding:.25rem 0;border-bottom:1px solid var(--grijs);
}
.events-lijst li:last-child{border-bottom:none}
.events-aankomend-grid .events-lijst li{
  color:var(--tekst);font-weight:500;
}

@media(max-width:620px){
  .intro-woorden{gap:.5rem}
  .events-aankomend-grid,.events-afgelopen-grid{grid-template-columns:1fr 1fr}
}

/* Tarieven info-blokken onder de tabel */
.tarieven-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (max-width: 600px) {
  .tarieven-info-grid { grid-template-columns: 1fr; }
}

/* YouTube subtitle tip */
.yt-tip {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #555;
  text-align: center;
  font-style: italic;
}

/* ── Cookie Banner ── */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  color: #fff;
  z-index: 9999;
  padding: 1rem 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.3);
}
.cookie-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner-inner p {
  flex: 1;
  font-size: .9rem;
  color: rgba(255,255,255,.85);
  margin: 0;
  min-width: 200px;
}
.cookie-banner-inner a {
  color: var(--blauw);
  text-decoration: underline;
}
.cookie-banner-knoppen {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.cookie-banner-knoppen .knop {
  padding: .5rem 1.25rem;
  font-size: .875rem;
}
.cookie-banner-knoppen .knop-secundair {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.6);
}
.cookie-banner-knoppen .knop-secundair:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
}