/* ============================================================
   TYPOGRAFIE & BASISVARIABELEN
   - Fonts, kleuren, spacing, globale variabelen
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --brand:#015742;
  --text:#0f172a;
  --bg:#ffffff;
  --header-h:120px;

  --content-max:1200px;
  --header-max:1440px;
  --footer-max:1440px;
  --edge-pad:clamp(12px,3.5vw,32px);

  --footer-bg:#0f5944;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* afstand header → eerste contentblok */
  --page-top: 48px;
}

html,
body{
  max-width: 100%;
  overflow-x: hidden;
  height:100%;
}

body{
  margin:0;
  font-family:'Poppins', Arial, sans-serif;
  background:#dfece9;
  color:var(--text);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

h1{ font-weight:500; }
h2,
h3{ font-weight:600; }

/* breedte-constraint voor content */
.container{
  max-width: var(--content-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* hoofdstructuur */
#site-header{ flex:0 0 auto; }
#site-footer{ flex:0 0 auto; width:100%; }
main{ flex:1 0 auto; padding-top:0; }
.page{ padding-top: var(--page-top); padding-bottom:60px; }

/* voorkom dubbele topmarges op eerste blok */
.page > *:first-child{ margin-top:0 !important; }

/* page header zonder extra top-padding */
.page-header{ padding:0 0 12px; }

/* anchors rekening houden met sticky header */
[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* standaard witte blokken */
.card,
.section-green,
.business-section,
.content{
  background:#fff;
}

/* kleine utility’s */
.hr-muted{
  border:0;
  border-top:1px solid #e5e7eb;
  margin:24px 0;
}
.muted{
  color:#475569;
  margin-top:8px;
  text-align:left;
}
.bullets{
  margin:10px 0 14px 20px;
}
.bullets li{
  margin:6px 0;
}


/* ============================================================
   HEADER & NAVIGATIE
   - Sticky header, nav, dropdown, CTA
============================================================ */
.site-header{
  position:sticky;
  top:0;
  width:100%;
  background:var(--bg);
  border-bottom:1px solid #ddd;
  z-index:10;
  overflow:visible;
}

/* full-width header met veilige randen */
.site-header .container{
  max-width:none;
  width:100%;
  padding-inline:clamp(24px, 4vw, 56px);
  margin-inline:auto;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
  gap: 16px;
}

.site-header .logo img{
  height:100px;
  width:auto;
  margin-top:16px;
}

.nav{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav ul{
  list-style:none;
  display:flex;
  gap:28px;
  align-items:center;
  margin:0;
  padding:0;
  font-size:1.12rem;
  font-weight:500;
}

.nav a{
  text-decoration:none;
  color:var(--text);
  padding:6px 0;
  border-bottom:4px solid transparent;  /* ruimte reserveren */
  transition:color .2s, box-shadow .2s;
}
.nav a:hover{
  color:var(--brand);
}
.nav a.active:not(.btn-outline){
  color:var(--brand);
  box-shadow:inset 0 -4px 0 var(--brand); /* geen layout-shift */
}

/* header CTA rechts */
.nav .btn-outline{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  line-height:1.1;
  padding:14px 26px;
  background:var(--brand);
  border:2px solid #fff;
  color:#fff;
  border-radius:10px;
  font-weight:700;
  transition:all .2s;
  font-size:1.2rem;
  margin-left:12px;
}
.nav .btn-outline:hover{
  background:#fff;
  color:var(--brand);
  border-color:var(--brand);
}

/* dropdown-menu */
.nav li{ position:relative; }
.has-submenu > a{ position:relative; }

.has-submenu .submenu{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:8px;
  min-width:220px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:none;
  z-index:20;
}
.has-submenu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu{
  display:block;
}

.submenu li{ list-style:none; }

.submenu a{
  display:block;
  padding:8px 10px;
  border-radius:6px;
  text-decoration:none;
  color:var(--text);
}
.submenu a:hover{
  background:#f2f7f6;
  color:var(--brand);
}

.has-submenu > a::after{
  content:"▾";
  font-size:1rem;
  margin-left:3px;
  color:var(--text);
  transition:transform .4s;
}
.has-submenu:hover > a::after,
.has-submenu:focus-within > a::after{
  transform:rotate(180deg);
}

/* header responsive */
@media (max-width:1200px){
  .nav ul{
    gap:20px;
    font-size:1.04rem;
    row-gap:8px;
  }
  .site-header .logo img{ height:90px; }
}

@media (max-width:900px){
  .nav ul{
    flex-wrap:wrap;
    row-gap:8px;
  }
  .nav .btn-outline{
    order:99;
  }
}

@media (max-width:768px){
  .site-header .container{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}

/* extra aanscherping voor kleine schermen */
@media (max-width:700px){
  :root{
    --header-h:80px;
  }

  .site-header .container{
    padding-inline:16px;
    padding-block:8px;
    gap:4px;
  }

  .site-header .logo img{
    height:72px;
    margin-top:4px;
  }

  .nav ul{
    gap:14px;
    font-size:.95rem;
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  .nav .btn-outline{
    padding:8px 14px;
    font-size:.9rem;
    margin-left:0;
  }
}

@media (max-width:500px){
  .site-header .container{
    align-items:center;
  }
  .nav{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }
  .nav ul{
    justify-content:center;
  }
}


/* ============================================================
   GENERIEKE KAARTEN & CONTENT BLOKKEN
   - .card, .content, algemene spacing
============================================================ */
.card{
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:20px;
  margin:0;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

/* standaard content-blokken (home, diensten, detailpagina’s) */
.content{
  border:1px solid #e5e7eb;
  border-radius:12px;
 padding:32px 32px 28px;
  margin:28px 0 40px;
  background:#fff;
}

/* laatste blok iets dichter bij footer */
.content:last-of-type{
  margin-bottom:24px;
}


/* ============================================================
   FORMULIEREN & BUTTONS
   - Grids, inputs, CTA-knoppen, consent-checkbox
============================================================ */
.form .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form label{
  display:flex;
  flex-direction:column;
  font-weight:600;
  gap:6px;
}
.form input,
.form select,
.form textarea{
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  font:inherit;
}
.form .full{
  grid-column:1 / -1;
}

textarea{
  resize:none;
}

select:invalid{ color:#9ca3af; }
option[value=""]{ color:#9ca3af; }

.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:6px;
  border:2px solid var(--brand);
  cursor:pointer;
}

.btn-primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  padding:8px 16px;   /* was groter */
  font-size:.9rem;
  text-decoration:none;
  font-weight:700;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  margin-top:24px;
}
.btn-primary.small{
  padding:6px 12px;
  font-size:.85rem;
  line-height:1.2;
  border-radius:6px;
}
.btn-primary:hover{
  background:#013f32;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.hero .btn-primary{
  font-size:1.1rem;
  padding:12px 24px;
}

.form button,
.form .btn{
  margin-top:12px;
}
main .btn-primary:last-of-type{
  display:inline-block;
  margin-bottom:30px;
}

.form button.btn-primary{
  padding:12px 24px;
  font-size:1rem;
}

/* consent-checkbox bij afsprakenformulier */
.form label.consent{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:0.5rem;
  font-weight:500;
  margin-top:24px;
  margin-bottom:15px;
  line-height:1.4;
}
.form label.consent input[type="checkbox"]{
  flex:0 0 auto;
  margin-top:2px;
  accent-color:var(--brand);
}
/* ============================================================
  engels/NL switch
============================================================ */
.lang-switch{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:16px;

}

.lang-switch .lang{
  display:flex;
  align-items:center;
  opacity:0.85;
  transition:opacity .2s, transform .15s;
}

.lang-switch .lang:hover{
  opacity:1;
  transform:translateY(-1px);
}

.lang-switch svg {
  height: 20px;   
  width: auto;   
  display: block;
}


/* ============================================================
   HOME – DIENSTEN & USP’S
   - Services-grid, service-cards, USP-kaarten
============================================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:24px;
  margin:24px 0 48px;
}

.service-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.service-card img{
  width:100%;
  max-width:240px;
  height:auto;
  border-radius:8px;
  margin-bottom:12px;
}
.service-card h2{
  margin:8px 0;
  font-weight:500;
}
.service-card p{
  flex:1;
  font-size:.95rem;
}
.service-card .btn-primary{
  margin-top:12px;
}

.services-subnav{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.services-subnav a{
  display:inline-block;
  padding:8px 14px;
  border:1px solid #9abbb2;
  border-radius:999px;
  text-decoration:none;
  color:#0f172a;
  background:#e9f3f1;
}
.services-subnav a:hover{
  background:#dbe9e6;
}

/* USP-kaarten */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px;
  margin-top:16px;
  margin-bottom:24px;
}
.feature-card{
  background:#e9f3f1;
  border:1px solid #9abbb2;
  border-radius:10px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature-card h3{
  margin:0;
  font-weight:500;
}
.feature-card p{
  margin:0;
  color:#334155;
}
.feature-card .icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--brand);
  display:grid;
  place-items:center;
  margin-bottom:4px;
}
.feature-card .icon svg{
  width:22px;
  height:22px;
  fill:#ffffff;
}

/* ============================================================
   HOME – KENNISBANK & MINI-FAQ
============================================================ */
/* algemene header layout voor blokken */
.kb-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.kb-more{
  color:var(--brand);
  text-decoration:none;
  font-weight:600;
}
.kb-more:hover{
  text-decoration:underline;
}

.kb-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:14px;
}
.kb-item{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:10px;
  padding:12px;
}
.kb-item img{
  width:88px;
  height:88px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.kb-body h3{
  margin:2px 0 4px;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.25;
}
.kb-body h3 a{
  color:var(--text);
  text-decoration:none;
}
.kb-body h3 a:hover{
  text-decoration:underline;
}
.kb-body p{
  margin:0;
  color:#334155;
  font-size:.95rem;
}
.kb-tag{
  display:inline-block;
  font-size:.8rem;
  line-height:1;
  padding:5px 9px;
  border-radius:999px;
  background:#e9f3f1;
  border:1px solid #9abbb2;
  color:#0f172a;
  text-decoration:none;
  margin-bottom:6px;
}

/* mini-FAQ */
.faq-mini .faq-mini-list{
  display:grid;
  gap:8px;
}
.faq-mini details{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:8px;
  padding:10px 12px;
}
.faq-mini summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  font-weight:600;
  padding-right:26px;
}
.faq-mini summary::-webkit-details-marker{
  display:none;
}
.faq-mini summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-weight:700;
  color:var(--brand);
  transition:transform .2s var(--ease);
}
.faq-mini details[open] summary::after{
  transform:translateY(-50%) rotate(45deg);
}
.faq-mini details p{
  margin:8px 0 0;
  color:#334155;
  line-height:1.55;
}

/* responsief tuning */
@media (max-width:700px){
  .kb-item{
    grid-template-columns:72px 1fr;
  }
  .kb-item img{
    width:72px;
    height:72px;
  }
}


/* ============================================================
   LOGO GRID – VERZEKERAARS / PARTNERS
============================================================ */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 36px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .logo-grid {
    grid-template-columns: 1fr;
  }
}

.logo-grid li {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-box {
  width: 180px;
  height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.logo-box a {
  display: inline-block;
  line-height: 0;
}

.logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.logo-box img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ============================================================
   DIENSTEN & DETAILPAGINA’S (Dietetiek/Fysio/Bedrijfsbegeleiding)
============================================================ */
/* twee-koloms blokken */
.service{
  display:grid;
  grid-template-columns:minmax(280px, 1fr) 1fr;
  gap:24px;
  align-items:start;
  margin:0 0 24px;
}
.service img{
  width:70%;
  height:300px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.service h2{ margin:0 0 8px; }
.service p{ margin:0 0 10px; }

@media (max-width:900px){
  .service{
    grid-template-columns:1fr;
  }
}

/* dienst-rows (dienstenpagina) */
.service-row{
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:24px;
  align-items:start;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:20px;
  margin:18px 0;
  background:#fff;
  scroll-margin-top:110px;
}
.service-row--alt{
  background:#f3f8f6;
}
.service-row_media img{
  box-shadow:none;
  background:transparent;
  border-radius:8px;
  display:block;
  width:100%;
  height:auto;
}
.service-row_body{
  line-height:1.6;
  display:flex;
  flex-direction:column;
}
.service-row_body h2{
  margin:0 0 10px;
}
.service-row_body p{
  margin:0 0 14px;
  color:#334155;
}

.actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}
.actions > *{
  margin:0;
}
/* algemene groene link-stijl */
.link{
  font-weight:600;
  color:var(--brand);
  text-decoration:none;
}
.link:hover{
  text-decoration:underline;
}

.actions .btn-primary,
.actions .link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  line-height:1;
  font-size:.95rem;
  box-sizing:border-box;  border:2px solid transparent;
}
.actions .link{
  font-weight:600;
  color:var(--brand);
  text-decoration:none;
}
.actions .link:hover{
  text-decoration:underline;
}

.services-quickbar{
  margin:24px 0 8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chip{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background:#015742;
  color:#fff;
  text-decoration:none;
  border:2px solid #015742;
}
.chip:hover{
  background:#013f32;
}

.badges{
  gap:10px;
  margin:10px 0 14px;
}


@media (max-width:900px){
  .service-row{
    grid-template-columns:1fr;
  }
  .service-row_media{
    order:-1;
  }
}


/* ============================================================
   VERGOEDING / TARIEVEN
============================================================ */
.section-green{
  color:var(--text);
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:24px;
  margin:16px 0 24px;
}
.section-green .grid{
  display:grid;
  grid-template-columns:.6fr 1.4fr;
  gap:24px;
  align-items:flex-start;
}
.section-green img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}
.notice{
  background:#e9f8f4;
  color:#014d3a;
  border-left:4px solid #9be7d6;
  border-radius:8px;
  padding:12px 16px;
  margin-top:16px;
}
@media (max-width:900px){
  .section-green .grid{
    grid-template-columns:1fr;
  }
}

/* tarieven tabel */
.badge-updated{
  display:inline-block;
  font-size:.8rem;
  border:1px solid #9abbb2;
  background:#e9f3f1;
  border-radius:999px;
  padding:4px 10px;
  margin:4px 0 12px;
}
.prices-table{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:12px;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
.prices-table thead th{
  background:#f8fafc;
  text-align:left;
  padding:12px 16px;
  font-weight:600;
  border-bottom:1px solid #e5e7eb;
}
.prices-table td,
.prices-table tbody th{
  padding:12px 16px;
  border-top:1px solid #e5e7eb;
}
.prices-table .num{
  text-align:right;
  white-space:nowrap;
}
.prices-table .section{
  background:#f3f8f6;
  font-weight:600;
  border-top:1px solid #e5e7eb;
}

/* caption voor prijzen */
.prices-table caption{
  caption-side:top;
  font-weight:600;
  font-size:.95rem;
  color:#475569;
  text-align:left;
  margin-bottom:6px;
  border:none;
  border-radius:0;
  border-collapse:separate;
  border-spacing:0;
  overflow:visible;
}

@media (max-width:900px){
  .prices-table thead{
    display:none;
  }

  .prices-table tr{
    display:block;
    padding:12px 16px;
    border-top:1px solid #e5e7eb;
  }

  .prices-table tbody th,
  .prices-table td{
    display:block;
    padding:4px 0;
    border-top:none;
  }

  .prices-table td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-weight:600;
    opacity:.7;
    margin-bottom:2px;
  }

  .prices-table .section{
    padding:10px 16px;
    background:#f3f8f6;
    font-weight:600;
  }

  .prices-table .num{
    text-align:left;
  }
}


/* ============================================================
   AFSPRAAK / CONTACT
============================================================ */
.contact-hero{
  display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;
  gap:24px;
  align-items:center;
  margin:8px 0 24px;
}
.contact-hero h2{
  text-align:center;
  margin-bottom:16px;
  font-size:1.4rem;
}
.contact-hero .contact-links{
  text-align:center;
  list-style:none;
  padding:0;
}
.contact-hero .contact-links li{
  font-size:1.25rem;     /* groter */
  margin:4px 0;          /* wat lucht ertussen */
}
.contact-hero .contact-links strong{
  font-size:1.25rem;
}

.contact-hero img{
  width:100%;
  height:auto;
  max-width:420px;
  max-height:360px;
  object-fit:contain;
  justify-self:start;
  border-radius:8px;
}
.lead-list{
  margin:8px 0 0 18px;
}

.openingstijden {
  margin-top: 0;
}

.openingstijden h3 {
  font-size: 1rem;
  margin: 0 0 4px;
}

.openingstijden-table td {
  font-size: .9rem;
  padding: 2px 0;
}

.locatie.service {
  align-items: center; /* of flex-start als je dat mooier vindt */
  gap: 32px;
}


/* ============================================================
   OVER ONS & TEAM PROFIELPAGINA’S
============================================================ */
.profile-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
}

/* LinkedIn icoon algemeen */
.social.li{
  display:inline-grid;
  place-items:center;
  margin-top:16px;
  margin-left:10px;
  width:36px;
  height:36px;
  border-radius:999px;
  background:var(--brand);
  text-decoration:none;
}
.social.li svg{
  width:18px;
  height:18px;
  fill:#fff;
}


/* team-blokken op over-pagina */
.service.team{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:32px;
  align-items:center;
  margin:32px 0;
}
.service.team img{
  width:100%;
  max-width:300px;
  height:280px;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
}

.team-body{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}
.team-body .profile-actions{
  margin-top:auto;
  display:flex;
  gap:12px;
  align-items:center;
}

@media (max-width:900px){
  .service.team{
    grid-template-columns:1fr;
  }
  .service.team img{
    max-width:100%;
    margin-bottom:16px;
  }
}

.team .profile-header {
  display: flex;
  align-items: flex-start; /* moet zo blijven, correct */
  gap: 14px;
}

.team .nameblock {
  display: flex;
  flex-direction: column;
}

.team .nameblock .name {
  margin-bottom: 2px;   /* dichter op de titel */
  line-height: 1.15;    /* compacter */
}

.team .nameblock .subtitle {
  font-size: 1.20rem;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 10px;
  line-height: 1.25;
}
/* LinkedIn icoon binnen team-header */
.team .profile-header .social.li{
  width:40px;
  height:40px;
  border-radius:4px;
  display:grid;
  place-items:center;
  background:#fff;
  border:2px solid #015742;
  margin-top:16px;   /* geen extra offset hier */
  margin-left:0;
}
.team .profile-header .social.li svg{
  width:24px;
  height:24px;
}

.team .profile-header .social.li svg path{
  fill:#015742;
}
.team .profile-header .social.li:hover{
  background:#015742;
}
.team .profile-header .social.li:hover svg path{
  fill:#fff;
}


/* klikbare media + naam zonder blauw */
.team .media-link{
  display:block;
}
.team .name a{
  color:inherit;
  text-decoration:none;
  transition:color .2s;
}
.team .name a:hover{
  color:var(--brand);
  text-decoration:underline;
}
.team .name a:focus-visible,
.team .media-link:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* profielactie-knoppen */
.profile-actions .btn-primary.small{
  height:44px;
  display:inline-flex;
  align-items:center;
}
.profile-actions .social.li{
  width:44px;
  height:44px;
}
.team .actions{
  margin-top:28px;
}

/* PROFIELPAGINA (Serhat/Mete) */
.kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}
.kpi{
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px;
  text-align:center;
  background:#f8fafc;
}
.kpi .val{
  font-size:1.35rem;
  font-weight:600;
}
.kpi .label{
  font-size:.9rem;
  color:#475569;
}

/* werkwijze – 6 stappen grid */
.stepper{
  counter-reset:step;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}
.step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
}
.step::before{
  counter-increment:step;
  content:counter(step);
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border-radius:50%;
  padding:0;
  line-height:1;
  box-sizing:border-box;
  background:#e9f3f1;
  border:1px solid #9abbb2;
  font-weight:700;
  color:var(--brand);
}
.step h3{
  margin:0 0 4px;
  font-size:1rem;
}
.step p{
  margin:0;
  font-size:.9rem;
  color:#475569;
}
.stats-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:12px;
}
.stat-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  margin-top:12px;
}
.stat-card h3{
  margin:0 0 4px;
  font-weight:600;
  font-size:1rem;
}
.stat-card p{
  margin:0;
  color:#334155;
  font-size:.9rem;
}

/* accent-variant (bijv. vergoeding/info) */
.stat-accent{
  background:#e9f8f4;
  border:1px solid #9be7d6;
}
.stat-accent h3,
.stat-accent p{
  color:var(--text);
}

/* quote-blok */
.quote{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  font-style:italic;
  margin-top:18px;
}
.quote footer{
  margin-top:8px;
  font-style:normal;
  color:#475569;
  font-size:.9rem;
}

/* profiel responsive */
@media (max-width:1000px){
  .stats-row{
    grid-template-columns:1fr 1fr;
  }
  .stepper{
    grid-template-columns:1fr 1fr;
  }
  .toc{
    position:static;
  }
}
@media (max-width:700px){
  .stats-row{
    grid-template-columns:1fr;
  }
  .stepper{
    grid-template-columns:1fr;
  }
}

/* PROFIEL – Opleiding & registraties blokken */
.profile-bg-grid{
  display:grid;
  grid-template-columns:minmax(260px,1.4fr) minmax(260px,1fr);
  gap:20px;
  align-items:flex-start;
}

/* losse kaarten binnen de grid */
.profile-block{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.profile-block h3{
  margin:0 0 10px;
  font-size:1.05rem;
}

/* accentkaart voor registraties */
.profile-block-accent{
  background:#e9f8f4;
  border-color:#9be7d6;
}

/* ================================
   PROFIEL – Opleiding tijdlijn
   ================================ */

.profile-timeline{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;              
}

.profile-timeline li{
  display:flex;
  flex-direction:column;
  gap:4px;           
  padding:4px 0;      
}

/* Tag bovenaan */
.profile-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:#e9f3f1;
  border:1px solid #9abbb2;
  font-size:1.0rem;
  font-weight:600;
  white-space:nowrap;
  margin:0;
  align-self:flex-start;
}

/* Titel */
.profile-timeline-body strong{
  display:block;
  font-size:.95rem;
  margin-bottom:2px;
  color:#1e293b; margin-left: 8px;
}

/* Bodytekst */
.profile-timeline-body p{
  margin:0;
  font-size:.9rem;
  color:#475569;
  line-height:1.45;margin-left: 8px;
}
/* lijst onder registraties */
.profile-list{
  list-style:none;
  margin:4px 0 8px;
  padding:0;
}
.profile-list li{
  margin:4px 0;
  font-size:.9rem;
  color:#334155;
}
.profile-list strong{
  font-weight:600;
}

/* kleine toelichting onder registraties */
.profile-note{
  margin:8px 0 0;
  font-size:.85rem;
  color:#64748b;
}

/* responsive – één kolom onder ~900px */
@media (max-width:900px){
  .profile-bg-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   KENNISBANK – ARTIKELLAY-OUT (pull-right, grote FAQ)
============================================================ */
.pull-right{
  float:right;
  margin:0 0 16px 24px;
  max-width:420px;
}
@media (max-width:900px){
  .pull-right{
    float:none;
    margin:12px 0;
    max-width:100%;
  }
}

.faq .faq-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.faq details{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:8px;
  padding:12px 14px;
}
.faq summary{
  position:relative;
  cursor:pointer;
  font-weight:600;
  list-style:none;
  padding-right:24px;
}
.faq summary::-webkit-details-marker{
  display:none;
}
.faq summary::after{
  content:"▾";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  transition:transform .25s ease;
  font-size:1rem;
  color:var(--brand);
}
.faq details[open] summary::after{
  transform:translateY(-50%) rotate(180deg);
}
.faq details p{
  margin:8px 0 0;
  color:#334155;
  line-height:1.6;
}


/* ============================================================
   ANIMATIES (fade-in, micro-interacties)
============================================================ */
.fade-section{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  will-change:opacity, transform;
}
.fade-section.inview{
  opacity:1;
  transform:translateY(0);
}
[data-ani]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:var(--delay, 0s);
}
.fade-section.inview [data-ani]{
  opacity:1;
  transform:translateY(0);
}

/* microinteracties */
.btn-primary{
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .fade-section,
  [data-ani],
  .feature-card,
  .btn-primary{
    transition:none !important;
    transform:none !important;
    animation:none !important;
  }
  .fade-section{ opacity:1; }
  [data-ani]{ opacity:1; }
}

/* ============================================================
   ACHTERGROND
   - Achtergrondafbeelding, overlay
============================================================ */
body{
  background-color:#dfece9;
  background-image:url("../img/achtergrond.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(223, 236, 233, 0.7);
  pointer-events:none;
  z-index:-1;
}
@media (max-width:900px){
  body{
    background-attachment:scroll;
  }
}

/* ============================================================
   FOOTER
   - Bovenste rij, meta-balk, CTA, kaartje
============================================================ */
.site-footer{
  background:var(--footer-bg);   /* gebruikt #0f5944 uit :root */
  color:#fff;
  font-size:.95rem;
  padding-top:24px;
  padding-bottom:16px;
}

/* bovenste rij: logo | adres + CTA | menu */
.footer-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:flex-start;
}

/* logo + instagram links */
.footer-left{
  display:flex;
  align-items:center;
  gap:14px; margin-top: 40px;
}
.footer-left img{
  height:100px;
  width:auto;
}
.social.ig{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-left:20px;
  border:2px solid #fff;
  border-radius:999px;
}
/* Inner wrapper voor hover-achtergrond */
.social.ig .ig-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-color: rgba(0, 255, 80, 0.08); /* lichte groene tint */
  transition: background-color 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
}

/* Hover states */
.social.ig:hover .ig-inner {
  background-color: rgba(0, 255, 80, 0.18);
  transform: scale(1.06);
}

.social.ig:hover svg {
  opacity: 0.85;
}


/* adres midden */
.footer-center{
  text-align:center;
}
.footer-contact{
  margin:0;margin-top: 20px;
  line-height:1.4;
}
.footer-contact a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* CTA-button midden onder adres */
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  border-radius:999px;
  border:2px solid #fff;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1rem; 
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.08);
}
.footer-cta-main{
  margin-top:50px;
}

/* menu rechts */
.footer-menu{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:right;
}
.footer-menu-title{
  margin:0 0 6px;
  font-size:.95rem;
  font-weight:700; /* dik "Menu" */
}
.footer-menu a{
  color:#fff;
  text-decoration:none;
}
.footer-menu a:hover{
  text-decoration:underline;
}

/* onderste balk met lijn en copyright links */
.footer-meta{
  border-top:2px solid rgba(255,255,255,.3);
  margin-top:40px;            /* lijn verder naar beneden */
  padding-top:12px;
  padding-bottom:4px;
  box-sizing:border-box;
  text-align:left;
}
.footer-meta .copyright{
  margin:0;
  font-size:.8rem;            /* kleiner */
}

/* footer breedte volledig */
.site-footer .container{
  max-width:none;
  width:100%;
  padding-inline:clamp(32px, 5vw, 80px);
  margin-inline:auto;
  box-sizing:border-box;
}

/* kaart-embed in footer/contact */
.map-embed{
  margin-top:16px;
}
.map-embed iframe{
  display:block;
  width:100%;
  height:360px;
  border:0;
  border-radius:8px;
}

/* FOOTER RESPONSIVE */
@media (max-width:900px){
  .footer-top{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .footer-menu{
    text-align:center;
  }
}
/* ============================================================
  back to top button
============================================================ */
/* Back-to-top knop – compleet definitief blok */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 999;

  background: #0f5944; /* jouw kleur */
  color: #fff;
  border: none;

  /* standaard onzichtbaar, wordt via .show aangezet */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);

  /* 3D + glow */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),      /* witte outline */
    0 0 14px rgba(255, 255, 255, 0.55),      /* zachte glow */
    0 6px 12px rgba(0, 0, 0, 0.35);          /* diepte */

  transition:
    opacity 0.2s ease,
    transform 0.22s ease,
    box-shadow 0.25s ease,
    background-color 0.2s ease;
}

/* Wordt door JS toegevoegd zodra je 300px gescrolld hebt */
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hover – meer 3D */
.back-to-top:hover {
  background-color: #14775a; /* iets lichtere variant */
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, 0.75),
    0 8px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

/* Klik – terug “in” de pagina drukken */
.back-to-top:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 10px rgba(255, 255, 255, 0.55),
    0 4px 8px rgba(0, 0, 0, 0.35);
}

html {
  scroll-behavior: smooth;
}


/* MOBIEL TWEAKS VOOR BACK-TO-TOP */
@media (max-width: 480px) {
  .back-to-top {
    /* verder van de randen af ipv dichterbij */
    bottom: 2.6rem;
    right: 2.6rem;

    /* iets kleiner op kleine schermen */
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.2rem;

    /* compactere glow zodat hij minder “uitsteekt” */
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.9),
      0 0 8px rgba(255, 255, 255, 0.45),
      0 3px 6px rgba(0, 0, 0, 0.30);
  }

  /* op mobiel iets minder lift zodat hij niet uit beeld schuift */
  .back-to-top:hover {
    transform: translateY(-1px);
  }
}



/* ============================================================
   MOBIEL TUNING (telefoon, tot 480px)
============================================================ */
@media (max-width:480px){
  /* iets minder grote blokken */
  .content{
    padding:16px;
    margin:20px 0 24px;
  }

  .hero h1{
    font-size:1.6rem;
  }

  .hero .lead,
  p{
    font-size:.95rem;
  }

  /* service-blokken: beeld boven tekst netjes */
  .service img{
    width:100%;
    height:auto;
    margin:0 auto 8px;
  }

  /* contact-links iets kleiner zodat het niet schreeuwt */
  .contact-hero .contact-links li{
    font-size:1.05rem;
  }
}

/* ============================================================
   MOBIEL – ALGEMEEN (tot 700px)
============================================================ */
@media (max-width:700px){
  /* blokken compacter */
  .content{
    padding:16px;
    margin:20px 0 24px;
  }

  .hero h1{
    font-size:1.6rem;
  }

  .hero .lead,
  p{
    font-size:.95rem;
  }

  /* formulier 1 kolom */
  .form .grid{
    grid-template-columns:1fr;
  }

  /* contactblok: beeld boven tekst */
  .contact-hero{
    grid-template-columns:1fr;
  }
  .contact-hero img{
    max-width:260px;
    margin:0 auto 12px;
    justify-self:center;
  }
  .contact-hero .contact-links li{
    font-size:1.05rem;
  }

  /* knoppen niet giga, maar wél klikbaar */
  .btn-primary{
    padding:8px 14px;
    font-size:.9rem;
    margin-top:20px;
  }
  .btn-primary.small{
    padding:6px 10px;
    font-size:.85rem;
  }
  .nav .btn-outline{
    padding:8px 14px;
    font-size:.95rem;
  }

  /* checkbox + tekst onder elkaar i.p.v. scheef */
  .form label.consent{
    flex-direction:column;
    align-items:flex-start;
  }
  .form label.consent input[type="checkbox"]{
    margin-top:0;
  }
}

/* fix voor overlappende woorden in header teamlid */
.card,
.service,
.team,
.kpi,
.stat-card,
.profile-header,
.nameblock {
  overflow-wrap: break-word;
  word-break: break-word;
}