/*
Theme Name: Veron Administratiekantoor
Theme URI: https://veronadministratiekantoor.nl
Author: Veron Administratiekantoor
Author URI: https://veron.nl
Description: Professioneel WordPress thema voor Veron Administratiekantoor — multi-page versie.
Version: 3.15.0
License: Proprietary
Text Domain: veron
*/

/* ============================================
   CSS VARIABLES & RESET
   ============================================ */
:root {
  --veron-red: #C8102E;
  --veron-red-dark: #A00D24;
  --veron-red-light: #E8334D;
  --veron-dark: #1A1A2E;
  --veron-dark-bg: #16213E;
  --veron-darker: #0F0F1A;
  --veron-white: #FFFFFF;
  --veron-gray-100: #F5F5F5;
  --veron-gray-200: #E8E8E8;
  --veron-gray-300: #D1D1D1;
  /* Was #888888: op wit een contrast van ~3,9:1, onder de WCAG AA-eis van
     4,5:1. Deze kleur wordt sitewide gebruikt voor kaartteksten, footerlinks
     en contactgegevens, dus dit repareert alle plekken tegelijk. #6B6B6B
     haalt ~5,3:1 en oogt vrijwel identiek. */
  --veron-gray-500: #6B6B6B;
  --veron-gray-700: #444444;
  --veron-green: #28A745;
  --veron-font-heading: 'Montserrat', sans-serif;
  --veron-font-body: 'Open Sans', sans-serif;
  --veron-max-width: 1320px;
  --veron-radius: 12px;
  --veron-radius-sm: 8px;
  --veron-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --veron-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  /* Was 'all 0.3s ease'. Met 'all' bewaakt de browser élke wijzigbare
     eigenschap, inclusief layout-eigenschappen die je niet wilt animeren en die
     bij een class-toggle onbedoeld gaan meebewegen. Expliciet is sneller en
     voorspelbaarder. */
  --veron-transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease, opacity .3s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--veron-font-body);
  color: var(--veron-gray-700);
  line-height: 1.7;
  background: var(--veron-white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--veron-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--veron-dark);
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
a { color: var(--veron-red); text-decoration: none; transition: var(--veron-transition); }
a:hover { color: var(--veron-red-dark); }
img { max-width: 100%; height: auto; display: block; }
.container {
  max-width: var(--veron-max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.mb-16 { margin-bottom: 16px; }
.mb-48 { margin-bottom: 48px; }

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
  background: var(--veron-white);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 3px solid var(--veron-red);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--veron-max-width);
  margin: 0 auto;
  gap: 16px;
}
.site-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}
.site-logo .logo-name {
  font-family: var(--veron-font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--veron-dark);
  letter-spacing: 2px;
}
.site-logo .logo-sub {
  font-family: var(--veron-font-body);
  font-size: 0.65rem;
  color: var(--veron-red);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
}
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
  align-items: center;
}
.main-nav a {
  color: var(--veron-dark);
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0.85;
  transition: var(--veron-transition);
  cursor: pointer;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav li.current-menu-item > a,
.main-nav li.current-page-ancestor > a,
.main-nav li.active > a {
  opacity: 1;
  color: var(--veron-red);
}
/* Dropdown */
.main-nav li { position: relative; }
.main-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--veron-white);
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius-sm);
  padding: 8px 0;
  min-width: 200px;
  box-shadow: var(--veron-shadow-lg);
  flex-direction: column;
  gap: 0;
  z-index: 100;
}
.main-nav li:hover > ul { display: flex; }
.main-nav ul ul a {
  display: block;
  padding: 10px 20px;
  font-size: 0.85rem;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-noab {
  border: 1px solid var(--veron-gray-300);
  color: var(--veron-dark);
  padding: 8px 20px;
  border-radius: var(--veron-radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--veron-transition);
}
.btn-noab:hover { border-color: var(--veron-dark); color: var(--veron-dark); }
.lang-switch a {
  color: var(--veron-gray-500);
  font-size: 0.85rem;
  font-weight: 400;
}
.lang-switch a.active { color: var(--veron-dark); font-weight: 700; }
.lang-switch a:hover { color: var(--veron-dark); }
.btn-portal {
  background: var(--veron-red);
  color: var(--veron-white) !important;
  padding: 10px 24px;
  border-radius: var(--veron-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--veron-transition);
}
.btn-portal:hover { background: var(--veron-red-dark); }
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--veron-dark);
  margin: 6px 0;
  transition: var(--veron-transition);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 60%, #f0f2f8 100%);
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(200,16,46,0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  position: relative;
}
.hero-content {
  width: 66.67%;
  position: relative;
  z-index: 2;
}
/* Vliegtuig-overlay over het hero-gebied */
.ha-plane-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.ha-plane-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-content h1 {
  color: var(--veron-dark);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  margin-bottom: 24px;
  line-height: 1.1;
}
.hero-content p {
  color: var(--veron-gray-700);
  font-size: 1.15rem;
  margin-bottom: 40px;
  max-width: 500px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary {
  background: var(--veron-red);
  color: var(--veron-white) !important;
  padding: 16px 36px;
  border-radius: var(--veron-radius-sm);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--veron-transition);
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--veron-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,16,46,0.3);
}
.btn-secondary {
  background: var(--veron-gray-200);
  color: var(--veron-dark) !important;
  padding: 16px 36px;
  border-radius: var(--veron-radius-sm);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--veron-transition);
  border: none;
  cursor: pointer;
}
.btn-secondary:hover {
  background: var(--veron-gray-100);
  transform: translateY(-2px);
  box-shadow: var(--veron-shadow);
}
.hero-image {
  background: var(--veron-gray-100);
  border-radius: var(--veron-radius);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  border: 1px solid var(--veron-gray-200);
}
.hero-image-placeholder {
  color: var(--veron-gray-500);
  font-size: 0.9rem;
  text-align: center;
  padding: 32px;
}
.hero-image-placeholder .placeholder-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  display: block;
  opacity: 0.3;
}
/* Echte hero-foto */
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--veron-radius);
  display: block;
}

/* ============================================
   HERO ANIMATION v2 — doorlopende reis
   ============================================ */
.hero-anim-wrap {
  width: 100%;
  padding: 4px 0;
}
.hero-anim-wrap svg { display: block; width: 100%; height: auto; }

/* STATS BAR */
.stats-bar {
  background: var(--veron-red);
  padding: 24px 0;
}
.stats-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--veron-font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--veron-white);
  display: block;
}
.stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}

/* ============================================
   SECTIONS
   ============================================ */
.section { padding: 80px 0; }
.section-dark { background: var(--veron-gray-100); color: var(--veron-dark); }
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 { color: var(--veron-dark) !important; }
.section-gray { background: var(--veron-gray-100); }
.section-label {
  color: var(--veron-red);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 16px;
}
.section-title { margin-bottom: 48px; }
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--veron-red);
  margin-top: 16px;
  border-radius: 2px;
}
.text-center { text-align: center; }

/* ============================================
   AANBOD CAROUSEL
   ============================================ */
.aanbod-carousel { position: relative; margin-top: 40px; }
.aanbod-track-wrapper { overflow: hidden; border-radius: var(--veron-radius); }
.aanbod-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Kaart standaard (geen foto) ─────────────────── */
.aanbod-card {
  min-width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--veron-radius);
  cursor: pointer;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  background: var(--veron-white);
  border: 1px solid var(--veron-gray-200);
  box-shadow: var(--veron-shadow);
}
.aanbod-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-color: transparent;
  transition: transform 0.6s ease;
}
/* Sluier over de foto: wit en van links naar rechts uitdovend, zodat de tekst
   links rustig leesbaar blijft en de illustratie rechts zichtbaar is. Past bij
   de lichte stijl van de site — een donkere sluier maakte de kaart zwaar. */
.aanbod-card.has-bg .aanbod-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.93) 36%,
    rgba(255,255,255,0.52) 64%,
    rgba(255,255,255,0.08) 100%);
}
.aanbod-card.has-bg:hover .aanbod-bg { transform: scale(1.04); }
.aanbod-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.aanbod-content {
  position: relative;
  z-index: 2;
  padding: 48px 40px;
  width: 100%;
}

/* Tekst zonder foto: donker */
.aanbod-card h3 { color: var(--veron-dark); margin-bottom: 12px; font-size: 1.4rem; }
.aanbod-card p { color: var(--veron-gray-700); font-size: 0.95rem; margin-bottom: 24px; max-width: 680px; }
.aanbod-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--veron-white);
  background: var(--veron-red);
  padding: 10px 22px;
  border-radius: var(--veron-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.aanbod-card .card-link:hover { background: var(--veron-red-dark); }

/* Tekst met foto: blijft donker — de witte sluier zorgt voor het contrast */
.aanbod-card.has-bg h3 { color: var(--veron-dark); }
.aanbod-card.has-bg p { color: var(--veron-gray-700); }

/* Navigatiepijlen en dots: passen bij lichte sectie-achtergrond */
.aanbod-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.aanbod-arrow {
  background: var(--veron-white);
  border: 1px solid var(--veron-gray-300);
  color: var(--veron-dark);
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--veron-transition);
  box-shadow: var(--veron-shadow);
}
.aanbod-arrow:hover { background: var(--veron-red); border-color: var(--veron-red); color: white; }
.aanbod-dots { display: flex; gap: 8px; align-items: center; }
.aanbod-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--veron-gray-300);
  cursor: pointer;
  transition: var(--veron-transition);
  border: none;
}
.aanbod-dot.active { background: var(--veron-red); width: 24px; border-radius: 4px; }

/* ============================================
   SOFTWARE LOGOS MARQUEE
   ============================================ */
.software-bar {
  background: var(--veron-white);
  padding: 48px 0;
  border-top: 1px solid var(--veron-gray-200);
  border-bottom: 1px solid var(--veron-gray-200);
  overflow: hidden;
}
.sw-marquee-wrapper {
  overflow: hidden;
  margin-top: 24px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.sw-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: swScroll var(--sw-duur, 28s) linear infinite;
}
.sw-track:hover { animation-play-state: paused; }
/* De rij bevat de logo's minstens twee keer. De animatie schuift precies één
   set op en springt dan terug naar het begin — omdat de volgende set identiek
   is, ziet het oog geen sprong.

   veron.js meet die ene set in pixels en zet de uitkomst in --sw-shift, en
   bepaalt met --sw-duur hoe lang een rondgang duurt, zodat de snelheid gelijk
   blijft bij vier of bij tien logo's. Zonder JavaScript is -50% de terugval:
   dat klopt bij precies twee sets, op de tussenruimte na. */
@keyframes swScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--sw-shift, -50%)); }
}
.sw-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius);
  transition: var(--veron-transition);
  background: white;
  flex-shrink: 0;
}
.sw-card-item:hover { border-color: var(--veron-red); box-shadow: var(--veron-shadow); }
.sw-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
  overflow: hidden;
}
.sw-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.sw-name { font-weight: 700; font-size: 0.88rem; color: var(--veron-dark); white-space: nowrap; }
.sw-sub { font-size: 0.72rem; color: var(--veron-gray-500); white-space: nowrap; }

/* ============================================
   SERVICES GRID
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.service-card {
  background: var(--veron-white);
  border-radius: var(--veron-radius);
  padding: 40px 32px;
  box-shadow: var(--veron-shadow);
  transition: var(--veron-transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--veron-red);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--veron-shadow-lg);
}
.service-card-icon {
  width: 64px; height: 64px;
  background: var(--veron-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 1.5rem;
  color: var(--veron-white);
}
.service-card h3 { margin-bottom: 12px; font-size: 1.3rem; }
.service-card p { color: var(--veron-gray-500); font-size: 0.95rem; margin-bottom: 24px; }
.service-card ul { color: var(--veron-gray-500); padding-left: 20px; margin-bottom: 24px; list-style: disc; }
.service-card ul li { margin-bottom: 6px; font-size: 0.9rem; }

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
  background: var(--veron-gray-100);
  padding: 60px 0 48px;
  border-bottom: 1px solid var(--veron-gray-200);
}
.page-header .breadcrumb {
  color: var(--veron-gray-500);
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.page-header .breadcrumb a { color: var(--veron-gray-500); }
.page-header .breadcrumb a:hover { color: var(--veron-dark); }
.page-header h1 {
  color: var(--veron-dark);
  position: relative;
  padding-bottom: 16px;
}
.page-header h1::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 80px; height: 4px;
  background: var(--veron-red);
  border-radius: 2px;
}
.page-header p {
  color: var(--veron-gray-700);
  font-size: 1.05rem;
  margin-top: 20px;
  max-width: 700px;
}

/* ============================================
   DIENST CARDS
   ============================================ */
.dienst-cards {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 48px 0;
}
.dienst-card {
  background: var(--veron-white);
  border-radius: var(--veron-radius);
  padding: 28px;
  box-shadow: var(--veron-shadow);
  position: relative;
  transition: var(--veron-transition);
  border-top: 4px solid var(--veron-red);
}
.dienst-card:hover { transform: translateY(-4px); box-shadow: var(--veron-shadow-lg); }
.dienst-card.selected { border-color: var(--veron-red); background: #fff8f9; }
.dienst-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.dienst-card p { color: var(--veron-gray-500); font-size: 0.88rem; margin-bottom: 16px; }
.select-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--veron-gray-500);
  font-weight: 500;
  font-size: 0.9rem;
}
.select-check input[type="checkbox"] {
  accent-color: var(--veron-red);
  width: 18px; height: 18px;
}
.check-label { transition: var(--veron-transition); }
.dienst-card.selected .check-label { color: var(--veron-red); font-weight: 700; }
.dienst-card { cursor: pointer; }
.dienst-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dienst-card-header h3 { font-size: 1.1rem; margin: 0; flex: 1; }
.dienst-expand-icon { font-size: 1.4rem; color: var(--veron-red); transition: transform 0.3s ease; flex-shrink: 0; line-height: 1.1; }
.dienst-card.expanded .dienst-expand-icon { transform: rotate(90deg); }
.dienst-kort { color: var(--veron-gray-500); font-size: 0.88rem; margin: 8px 0 0; }
.dienst-card .dienst-lang { display: none; margin-top: 14px; font-size: 0.93rem; color: #2a2a3e; line-height: 1.7; padding-top: 14px; border-top: 1px solid rgba(200,16,46,0.15); }
.dienst-card.expanded .dienst-lang { display: block; }
.dienst-card.expanded { background: #fff8f9; box-shadow: var(--veron-shadow-lg); border-top-color: var(--veron-red); }
.dienst-card .dienst-cta { display: none; margin-top: 18px; background: var(--veron-red); color: #fff !important; padding: 10px 22px; border-radius: var(--veron-radius-sm); font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: background 0.2s; text-decoration: none; }
.dienst-card.expanded .dienst-cta { display: inline-flex; align-items: center; gap: 6px; }
.dienst-cta:hover { background: #a00d25; }

/* ── Dienstenfilter (doelgroepen) ────────────────── */
.dienst-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 32px;
}
.dienst-filter-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--veron-gray-500);
}
.dienst-filter-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.dienst-filter-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--veron-white);
  border: 1.5px solid var(--veron-gray-300);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--veron-dark);
  cursor: pointer;
  transition: var(--veron-transition);
}
.dienst-filter-knop:hover { border-color: var(--veron-red); color: var(--veron-red); }
.dienst-filter-knop.actief {
  background: var(--veron-red);
  border-color: var(--veron-red);
  color: #fff;
}
.dienst-filter-aantal {
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--veron-gray-100);
  color: var(--veron-gray-500);
  border-radius: 999px;
  padding: 1px 8px;
  transition: var(--veron-transition);
}
.dienst-filter-knop.actief .dienst-filter-aantal { background: rgba(255,255,255,0.22); color: #fff; }

/* Kaart valt buiten het actieve filter */
.dienst-card.is-verborgen { display: none; }

.dienst-geen-resultaat {
  text-align: center;
  color: var(--veron-gray-500);
  font-size: 0.95rem;
  margin: 0 0 48px;
}

@media (max-width: 600px) {
  .dienst-filter { gap: 10px; }
  .dienst-filter-label { width: 100%; }
  .dienst-filter-knop { padding: 8px 14px; font-size: 0.85rem; }
}

/* CTA Banner */
.cta-banner {
  background: var(--veron-gray-100);
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 48px 0;
}
.cta-banner h3 { color: var(--veron-dark); font-size: 1.4rem; margin-bottom: 8px; }
.cta-banner p { color: var(--veron-gray-700); }

/* Step indicator */
.veron-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 48px;
}
.veron-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: var(--veron-transition);
}
.veron-step.active { opacity: 1; }
.veron-step.current .step-num { background: var(--veron-red); color: #fff; }
.step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--veron-gray-200);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  transition: var(--veron-transition);
}
.veron-step.active .step-num { background: var(--veron-red); color: #fff; }
.step-label { font-size: 0.75rem; font-weight: 600; color: var(--veron-gray-700); white-space: nowrap; }
.veron-step-line { width: 80px; height: 2px; background: var(--veron-gray-200); margin-bottom: 22px; transition: var(--veron-transition); }
.veron-step-line.done { background: var(--veron-red); }
.flow-nav {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.btn-outline {
  background: transparent;
  color: var(--veron-gray-700);
  padding: 12px 24px;
  border-radius: var(--veron-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--veron-gray-300);
  cursor: pointer;
  transition: var(--veron-transition);
}
.btn-outline:hover { border-color: var(--veron-dark); }
/* Niet globaal: deze regel raakte ook de knoppen ín de intake-wizard, die zelf
   al een lichtgrijze achtergrond krijgen. Samen leverde dat een knop op 40%
   dekking op die nauwelijks te lezen was — juist op het moment dat duidelijk
   moet zijn wat er nog moet gebeuren. */
button:disabled:not([class*="vint-"]) { opacity: 0.4; cursor: not-allowed; }
.vraag-block { margin-bottom: 32px; }
.vraag-dienst-title {
  font-size: 1.1rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vraag-num {
  background: var(--veron-red);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.vraag-item { margin-bottom: 20px; }
.vraag-label { font-weight: 600; display: block; margin-bottom: 10px; font-size: 0.95rem; }
.vraag-opties { display: flex; flex-wrap: wrap; gap: 10px; }
.vraag-optie {
  padding: 10px 18px;
  border: 1px solid var(--veron-gray-200);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  display: flex; align-items: center; gap: 8px;
  transition: var(--veron-transition);
}
.vraag-optie:hover { border-color: var(--veron-red); }
.vraag-optie.active { border-color: var(--veron-red); background: #fff8f9; color: var(--veron-red); font-weight: 600; }
.radio-dot, .check-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--veron-gray-300);
  display: inline-block;
  transition: var(--veron-transition);
  flex-shrink: 0;
}
.check-dot { border-radius: 4px; }
.vraag-optie.active .radio-dot,
.vraag-optie.active .check-dot {
  border-color: var(--veron-red);
  background: var(--veron-red);
}
.result-dienst { margin-bottom: 24px; }
.result-dienst h4 { font-size: 1rem; margin-bottom: 12px; color: var(--veron-dark); }
.result-qa { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--veron-gray-200); font-size: 0.9rem; gap: 16px; }
.result-q { color: var(--veron-gray-500); }
.result-a { font-weight: 600; }
.prijs-label { font-size: 0.9rem; color: var(--veron-gray-500); margin-bottom: 8px; }
.prijs-range {
  font-family: var(--veron-font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--veron-dark);
  margin-bottom: 12px;
}
.prijs-disclaimer { font-size: 0.82rem; color: var(--veron-gray-500); }
.offerte-form h3 { margin-bottom: 8px; }
.offerte-form p { color: var(--veron-gray-500); margin-bottom: 20px; font-size: 0.9rem; }

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-text p { margin-bottom: 16px; font-size: 1.05rem; }
.about-image {
  background: var(--veron-gray-100);
  border-radius: var(--veron-radius);
  height: 350px;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  color: var(--veron-gray-300);
  overflow: hidden;
  text-align: center;
  flex-direction: column;
  gap: 8px;
}
/* Echte kantoorafbeelding */
.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Teamlid foto als afbeelding */
.team-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.team-member { text-align: center; }
.team-member-photo {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--veron-gray-200);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  overflow: hidden;
}
.team-member h4 { font-size: 1.05rem; margin-bottom: 4px; }
.team-member .role { color: var(--veron-red); font-size: 0.9rem; font-weight: 500; }
.team-member-bio { font-size: 0.85rem; color: var(--veron-gray-500); line-height: 1.55; margin-top: 8px; text-align: center; }
.noab-section {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 32px;
  background: var(--veron-gray-100);
  border-radius: var(--veron-radius);
}
.noab-badge {
  background: var(--veron-white);
  color: var(--veron-dark);
  border: 1px solid var(--veron-gray-200);
  padding: 20px 24px;
  border-radius: var(--veron-radius-sm);
  text-align: center;
  min-width: 80px;
  flex-shrink: 0;
}
.noab-badge strong { font-size: 1.2rem; font-family: var(--veron-font-heading); display: block; }
.noab-badge span { font-size: 0.8rem; opacity: 0.7; }

/* ============================================
   VACATURES
   ============================================ */
.vacature-card {
  background: var(--veron-white);
  border-radius: var(--veron-radius);
  padding: 40px;
  box-shadow: var(--veron-shadow);
  margin-bottom: 24px;
  transition: var(--veron-transition);
}
.vacature-card:hover { box-shadow: var(--veron-shadow-lg); transform: translateY(-2px); }
.vacature-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.vacature-card p { color: var(--veron-gray-500); margin-bottom: 16px; }
.vacature-tags { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.vacature-tags span {
  background: var(--veron-gray-100);
  color: var(--veron-gray-700);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0 56px;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: var(--veron-white);
  border-radius: var(--veron-radius);
  box-shadow: var(--veron-shadow);
  border: 1px solid var(--veron-gray-200);
  transition: var(--veron-transition);
}
.contact-method:hover { border-color: var(--veron-red); box-shadow: var(--veron-shadow-lg); }
.contact-method-icon {
  width: 52px; height: 52px;
  background: var(--veron-red);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--veron-white);
  font-size: 1.3rem;
  flex-shrink: 0;
}
.contact-method-text h4 { font-size: 0.95rem; margin-bottom: 4px; }
.contact-method-text p { color: var(--veron-gray-500); font-size: 0.85rem; line-height: 1.5; }
.contact-method-text a { color: var(--veron-red); font-size: 0.85rem; }
.contact-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}
.contact-sidebar-box {
  background: var(--veron-gray-100);
  border-radius: var(--veron-radius);
  padding: 36px;
  margin-bottom: 24px;
}
.contact-sidebar-box:last-child { margin-bottom: 0; }
.contact-sidebar-box h3 {
  font-size: 1rem;
  font-family: var(--veron-font-heading);
  font-weight: 700;
  color: var(--veron-dark);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--veron-red);
  display: inline-block;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--veron-gray-200);
}
.contact-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.contact-info-icon {
  width: 36px; height: 36px;
  background: var(--veron-red);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.contact-info-text strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--veron-dark); margin-bottom: 2px; }
.contact-info-text span, .contact-info-text a { font-size: 0.82rem; color: var(--veron-gray-500); }
.contact-info-text a { color: var(--veron-red); }
.location-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--veron-gray-200);
}
.location-item:last-child { border-bottom: none; padding-bottom: 0; }
.location-item .loc-pin { font-size: 1rem; margin-top: 1px; }
.location-item strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--veron-dark); margin-bottom: 2px; }
.location-item span { font-size: 0.82rem; color: var(--veron-gray-500); }
.cf7-form-wrap {
  background: var(--veron-white);
  border-radius: var(--veron-radius);
  padding: 44px;
  box-shadow: var(--veron-shadow-lg);
  border: 1px solid var(--veron-gray-200);
}
.cf7-form-wrap h2 { font-size: 1.5rem; margin-bottom: 6px; }
.cf7-form-wrap .cf7-sub { color: var(--veron-gray-500); font-size: 0.9rem; margin-bottom: 32px; }
.cf7-form { display: flex; flex-direction: column; gap: 0; }
.cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.cf7-row.full { grid-template-columns: 1fr; }
.cf7-group { display: flex; flex-direction: column; gap: 7px; }
.cf7-group label {
  font-family: var(--veron-font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--veron-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cf7-group label .req { color: var(--veron-red); }
.cf7-group input,
.cf7-group select,
.cf7-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--veron-gray-200);
  border-radius: var(--veron-radius-sm);
  font-family: var(--veron-font-body);
  font-size: 0.95rem;
  color: var(--veron-dark);
  background: var(--veron-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.cf7-group input:focus,
.cf7-group select:focus,
.cf7-group textarea:focus {
  outline: none;
  border-color: var(--veron-red);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.08);
}
.cf7-select-wrap { position: relative; }
.cf7-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--veron-gray-500);
  pointer-events: none;
  font-size: 0.85rem;
}
.cf7-group textarea { min-height: 150px; resize: vertical; }
.cf7-privacy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  margin-top: 4px;
}
.cf7-privacy input[type="checkbox"] {
  width: 17px; height: 17px;
  margin-top: 3px;
  accent-color: var(--veron-red);
  flex-shrink: 0;
}
.cf7-privacy-label { font-size: 0.82rem; color: var(--veron-gray-500); line-height: 1.55; }
.cf7-privacy-label a { color: var(--veron-red); }
.cf7-required-note { font-size: 0.78rem; color: var(--veron-gray-500); margin-top: 16px; }
.cf7-success {
  display: none;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--veron-radius-sm);
  padding: 18px 22px;
  color: #166534;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 16px;
}
.cf7-success.show { display: block; }
.cf7-error-msg {
  display: none;
  background: #fff5f5;
  border: 1.5px solid #fca5a5;
  border-radius: var(--veron-radius-sm);
  padding: 14px 18px;
  color: #991b1b;
  font-size: 0.88rem;
  margin-top: 12px;
}
.cf7-error-msg.show { display: block; }

/* CF7 Modal */
.cf7-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,15,26,0.65);
  z-index: 8900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.cf7-modal-overlay.active { display: flex; }
.cf7-modal {
  background: white;
  border-radius: var(--veron-radius);
  padding: 44px 48px;
  width: 100%;
  max-width: 560px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  max-height: 92vh;
  overflow-y: auto;
}
.cf7-modal-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--veron-gray-500);
  line-height: 1;
  transition: color 0.2s;
  padding: 4px;
}
.cf7-modal-close:hover { color: var(--veron-dark); }
.cf7-modal h3 { font-size: 1.4rem; margin-bottom: 6px; }
.cf7-modal > p { color: var(--veron-gray-500); font-size: 0.88rem; margin-bottom: 28px; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--veron-gray-100);
  color: var(--veron-gray-700);
  border-top: 1px solid var(--veron-gray-200);
  padding: 48px 0 24px;
  font-size: 0.9rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--veron-gray-500); font-size: 0.85rem; }
.footer-links a:hover { color: var(--veron-dark); }
.footer-logo-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-logo-img { max-height: 36px; width: auto; display: block; }

/* ============================================
   FLOATING CTA
   ============================================ */
/* ============================================
   INTAKE WIZARD MODAL
   ============================================ */
.intake-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,15,26,0.72);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.intake-overlay.active {
  display: flex;
  animation: fadeOverlay 0.2s ease;
}
@keyframes fadeOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.intake-modal {
  position: relative;
  background: var(--veron-white);
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow: hidden;
  overflow-y: auto;
  padding: 0;
  box-shadow: 0 16px 64px rgba(0,0,0,0.25);
  animation: slideUp 0.25s ease;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.intake-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--veron-transition);
  z-index: 10;
}
.intake-modal-close:hover { background: rgba(255,255,255,0.25); color: #fff; }
/* Moderne scrollbar voor de intake modal */
.intake-modal::-webkit-scrollbar          { width: 5px; }
.intake-modal::-webkit-scrollbar-track   { background: transparent; }
.intake-modal::-webkit-scrollbar-thumb   { background: rgba(160,13,36,.25); border-radius: 10px; }
.intake-modal::-webkit-scrollbar-thumb:hover { background: rgba(160,13,36,.5); }
/* .intake-pane verwijderd — één instantie, modus via vintReset() */

/* Formulier-elementen binnen de intake modal */
.intake-modal input[type="text"],
.intake-modal input[type="email"],
.intake-modal input[type="tel"],
.intake-modal textarea,
.intake-modal select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius-sm);
  font-family: var(--veron-font-body);
  font-size: 0.9rem;
  color: var(--veron-dark);
  background: var(--veron-white);
  margin-bottom: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.intake-modal input:focus,
.intake-modal textarea:focus,
.intake-modal select:focus {
  outline: none;
  border-color: var(--veron-red);
  /* Alleen een randkleurwissel van grijs naar rood is bij kleurenblindheid
     nauwelijks waarneembaar. Dezelfde ring als bij het contactformulier
     elders op de site maakt de focus ook zonder kleurwaarneming zichtbaar. */
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}
.intake-modal textarea { min-height: 110px; resize: vertical; }
.intake-modal label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--veron-gray-700);
  margin-bottom: 5px;
}
.intake-modal button[type="submit"],
.intake-modal input[type="submit"] {
  display: inline-block;
  padding: 13px 28px;
  background: var(--veron-red);
  color: var(--veron-white);
  border: none;
  border-radius: var(--veron-radius-sm);
  font-family: var(--veron-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--veron-transition);
  margin-top: 4px;
}
.intake-modal button[type="submit"]:hover,
.intake-modal input[type="submit"]:hover {
  background: var(--veron-red-dark);
}

@media (max-width: 600px) {
  .intake-modal { padding: 28px 20px 24px; max-height: 95vh; }
}

/* ── Logo als afbeelding — achtergrond matcht header ── */
.site-logo--image {
  display: flex;
  align-items: center;
  text-decoration: none;
  background: transparent;
}
/* custom-logo-link is de <a> die WordPress zelf genereert via the_custom_logo() */
.custom-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: transparent !important;
  text-decoration: none;
  line-height: 0;
  padding: 0;
  margin: 0;
}
img.custom-logo {
  max-height: 48px;
  width: auto;
  display: block;
  background: transparent;
}

/* ── Popup sluitknop ── */
.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--veron-gray-500);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: var(--veron-transition);
}
.popup-close:hover { background: var(--veron-gray-200); color: var(--veron-dark); }

/* ── Popup in formuliermodus ── */
.popup-balloon--form {
  width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px 24px 24px;
}
.popup-balloon--form h3 { margin-bottom: 16px; }
.popup-form-wrap { margin-top: 4px; }

/* Formulier elementen binnen popup aanpassen */
.popup-form-wrap input[type="text"],
.popup-form-wrap input[type="email"],
.popup-form-wrap input[type="tel"],
.popup-form-wrap textarea,
.popup-form-wrap select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius-sm);
  font-family: var(--veron-font-body);
  font-size: 0.88rem;
  color: var(--veron-dark);
  background: var(--veron-white);
  margin-bottom: 12px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.popup-form-wrap input:focus,
.popup-form-wrap textarea:focus,
.popup-form-wrap select:focus {
  outline: none;
  border-color: var(--veron-red);
}
.popup-form-wrap textarea { min-height: 90px; resize: vertical; }
.popup-form-wrap label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--veron-gray-700);
  margin-bottom: 4px;
}
.popup-form-wrap button[type="submit"],
.popup-form-wrap input[type="submit"] {
  width: 100%;
  padding: 12px;
  background: var(--veron-red);
  color: var(--veron-white);
  border: none;
  border-radius: var(--veron-radius-sm);
  font-family: var(--veron-font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--veron-transition);
  margin-top: 4px;
}
.popup-form-wrap button[type="submit"]:hover,
.popup-form-wrap input[type="submit"]:hover {
  background: var(--veron-red-dark);
}
/* Privacy checkbox */
.popup-form-wrap .cf7-privacy,
.popup-form-wrap .wpcf7-checkbox,
.popup-form-wrap p { font-size: 0.8rem; margin-bottom: 10px; }

/* Witte cirkel, zwart icoon, rode rand */
.floating-cta {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 52px; height: 52px;
  background: var(--veron-white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #000;
  font-size: 0;
  border: 3px solid var(--veron-red);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  z-index: 2000;
  transition: var(--veron-transition);
}
.floating-cta:hover {
  transform: scale(1.08);
  background: var(--veron-red);
  color: var(--veron-white);
  box-shadow: 0 6px 28px rgba(200,16,46,0.35);
}
.floating-cta svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Verfijnde popup balloon */
.popup-balloon {
  position: fixed;
  bottom: 96px;
  right: 32px;
  background: var(--veron-white);
  border-radius: var(--veron-radius);
  padding: 18px 18px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  width: 230px;
  z-index: 2000;
  display: none;
}
.popup-balloon.active { display: block; animation: popIn 0.22s ease; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.popup-balloon h3 {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
  padding-right: 22px;
  line-height: 1.4;
  color: var(--veron-dark);
}
.popup-balloon p { font-size: 0.8rem; color: var(--veron-gray-500); margin-bottom: 12px; }
.popup-option {
  display: block;
  padding: 9px 13px;
  background: var(--veron-gray-100);
  border-radius: var(--veron-radius-sm);
  color: var(--veron-dark);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
  transition: var(--veron-transition);
  text-decoration: none;
}
.popup-option:last-child { margin-bottom: 0; }
.popup-option:hover { background: var(--veron-red); color: var(--veron-white); }

/* ============================================
   COOKIE BANNER
   ============================================ */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 99999;
  background: #ffffff;
  border-top: 3px solid #C8102E;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
#cookie-banner.hidden { display: none; }
.cookie-text { flex: 1; min-width: 220px; }
.cookie-text p { color: #444444; font-size: 0.88rem; line-height: 1.55; margin: 0; }
.cookie-text a { color: #C8102E; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn-accept {
  background: #C8102E; color: #fff;
  border: none; border-radius: 6px;
  padding: 10px 22px; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.cookie-btn-accept:hover { background: #a50d25; }
.cookie-btn-decline {
  background: transparent; color: #444444;
  border: 1px solid #d1d1d1; border-radius: 6px;
  padding: 10px 18px; font-size: 0.88rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.cookie-btn-decline:hover { border-color: #444444; color: #1A1A2E; }

/* ============================================
   OFFERTE FORM (Stap 3 Prijsindicatie)
   ============================================ */
.offerte-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--veron-gray-200); }

/* Bedankt pagina */
.bedankt-wrap {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  padding: 72px 32px 80px;
}
.bedankt-icon {
  width: 88px; height: 88px;
  background: var(--veron-red);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 auto 36px;
  box-shadow: 0 8px 32px rgba(200,16,46,0.28);
}
.bedankt-wrap h2 { font-size: clamp(1.6rem,4vw,2.2rem); margin-bottom: 16px; }
.bedankt-sub { font-size: 1.05rem; color: var(--veron-gray-500); margin-bottom: 40px; max-width: 440px; margin-left: auto; margin-right: auto; }
.bedankt-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .main-nav ul { gap: 14px; }
  .main-nav a { font-size: 0.82rem; }
  .header-actions { gap: 8px; }
  .hero-inner { gap: 40px; }
  .stats-inner { gap: 24px; }
  .stat-item { padding: 20px 16px; }
  .dienst-cards {
  align-items: start; grid-template-columns: repeat(2, 1fr); }
  .flow-cards { grid-template-columns: repeat(2, 1fr); }
  .noab-section { flex-direction: column; gap: 16px; }
}

/* ============================================
   RESPONSIVE — SMALL TABLET / LARGE PHONE (≤ 900px)
   ============================================ */
@media (max-width: 900px) {
  /* Header */
  .main-nav { display: none; }
  .main-nav.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--veron-white);
    padding: 16px 24px 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--veron-gray-200);
    z-index: 999;
  }
  .main-nav.active > ul {
    flex-direction: column;
    gap: 0;
  }
  .main-nav.active > ul > li {
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 4px 0;
  }
  .main-nav.active > ul > li > a {
    display: block;
    padding: 10px 4px;
    font-size: 0.95rem;
  }
  /* Dropdown in mobile menu */
  .main-nav.active ul ul {
    display: block;
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0 0 8px 16px;
    min-width: unset;
    border: none;
  }
  .main-nav.active ul ul a {
    padding: 6px 4px;
    font-size: 0.85rem;
    opacity: 0.7;
  }
  .menu-toggle { display: block; }
  .site-header { position: sticky; }

  /* Hero */
  .hero { padding: 64px 0 48px; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-image { display: none; }
  .hero-content { text-align: center; width: 100%; }
  .hero-buttons { justify-content: center; flex-wrap: wrap; }

  /* Stats */
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat-item { padding: 24px 16px; border-right: none; }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }

  /* Sections */
  .section { padding: 56px 0; }
  .section-title { text-align: center; }

  /* Aanbod carousel */
  .aanbod-card { min-height: 260px; }
  .aanbod-content { padding: 32px 24px; }
  /* Smalle kaart: de tekst ligt over de hele breedte, dus een gelijkmatiger
     sluier in plaats van een die naar rechts wegvalt. */
  .aanbod-card.has-bg .aanbod-bg::after {
    background: linear-gradient(to right,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.88) 60%,
      rgba(255,255,255,0.72) 100%);
  }

  /* Services / page grids */
  .services-grid { grid-template-columns: 1fr; gap: 24px; }
  .dienst-cards {
  align-items: start; grid-template-columns: 1fr; }
  .flow-cards { grid-template-columns: repeat(2, 1fr); }

  /* About */
  .about-grid { grid-template-columns: 1fr; }
  .about-image { display: none; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Contact */
  .contact-methods { grid-template-columns: 1fr; gap: 16px; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .cf7-row { grid-template-columns: 1fr; gap: 16px; }
  .cf7-form-wrap { padding: 28px 24px; }
  .cf7-modal { padding: 32px 24px; max-width: 95vw; }

  /* CTA Banner */
  .cta-banner { flex-direction: column; align-items: center; text-align: center; gap: 24px; }

  /* Pricing tool */
  .step-indicators { gap: 12px; }
  .step-indicator span { font-size: 0.78rem; }
  .result-grid { grid-template-columns: 1fr; }

  /* Page headers */
  .page-header { padding: 48px 0 32px; }
  .page-header h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }

  /* Vacature cards */
  .vacature-card { padding: 28px 24px; }
  .vacature-tags { flex-wrap: wrap; gap: 8px; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px; }
}

/* ============================================
   RESPONSIVE — MOBILE (≤ 600px)
   ============================================ */
@media (max-width: 600px) {
  /* Header */
  .header-inner { padding: 14px 16px; }
  .site-logo .logo-name { font-size: 1.3rem; }
  .btn-portal { display: none; }
  .lang-switch { font-size: 0.8rem; }

  /* Container padding */
  .container { padding: 0 16px; }

  /* Hero */
  .hero { padding: 48px 0 40px; }
  .hero-buttons { flex-direction: column; gap: 12px; }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary { width: 100%; text-align: center; }

  /* Stats */
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 1.8rem; }

  /* Sections */
  .section { padding: 40px 0; }
  .section-label { font-size: 0.7rem; letter-spacing: 2px; }

  /* Aanbod */
  .aanbod-card { min-height: 240px; }
  .aanbod-content { padding: 24px 20px; }
  .aanbod-controls { margin-top: 16px; }

  /* Team */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .team-member-photo { width: 64px; height: 64px; font-size: 1.8rem; }

  /* Flow / pricing */
  .flow-cards { grid-template-columns: 1fr; gap: 12px; }
  .step-indicators { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .step-line { min-width: 24px; }

  /* Contact */
  .contact-method { flex-direction: column; text-align: center; align-items: center; }
  .contact-sidebar-box { padding: 20px 16px; }
  .cf7-form-wrap { padding: 20px 16px; border-radius: var(--veron-radius-sm); }
  .cf7-modal { padding: 24px 16px; border-radius: var(--veron-radius-sm); margin: 16px; max-width: calc(100vw - 32px); }
  .cf7-modal .cf7-row { grid-template-columns: 1fr; }

  /* Popup balloon */
  .popup-balloon { left: 12px; right: 12px; bottom: 80px; width: auto; }
  .popup-balloon--form { width: auto; max-height: 75vh; }

  /* Cookie banner */
  #cookie-banner { flex-direction: column; align-items: flex-start; padding: 18px 16px; gap: 16px; }
  .cookie-actions { width: 100%; display: flex; gap: 8px; }
  .cookie-btn-accept, .cookie-btn-decline { flex: 1; text-align: center; }

  /* Buttons */
  .btn-primary, .btn-secondary { padding: 12px 20px; font-size: 0.9rem; }

  /* Page headers */
  .page-header { padding: 36px 0 24px; }

  /* Vacature */
  .vacature-card { padding: 20px 16px; }
  .vacature-tags span { font-size: 0.72rem; padding: 4px 10px; }

  /* SW marquee */
  .sw-track { gap: 24px; }
  .sw-item { font-size: 0.85rem; padding: 6px 12px; }

  /* CTA Banner */
  .cta-banner { padding: 32px 16px; border-radius: var(--veron-radius-sm); }
  .cta-banner .btn-primary { width: 100%; text-align: center; }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE (≤ 380px)
   ============================================ */
@media (max-width: 380px) {
  .site-logo .logo-name { font-size: 1.15rem; letter-spacing: 1px; }
  .site-logo .logo-sub { font-size: 0.55rem; letter-spacing: 2px; }
  .stat-num { font-size: 1.5rem; }
  .team-grid { grid-template-columns: 1fr; }
  .step-indicators { gap: 6px; }
  .step-indicator span { display: none; }
}

/* ============================================
   DIENST SINGLE PAGE (dedicated URL per dienst)
   ============================================ */
.diensten-intro-tekst {
  font-size: 1.05rem;
  color: var(--veron-gray-500);
  margin-bottom: 36px;
  max-width: 720px;
}

.dienst-single {
  background: #fff8f9;
  border: 1px solid var(--veron-red);
  border-top: 4px solid var(--veron-red);
  border-radius: var(--veron-radius);
  padding: 44px 48px;
  box-shadow: var(--veron-shadow-lg);
  margin-bottom: 40px;
}

.dienst-single-lang {
  font-size: 1rem;
  color: #2a2a3e;
  line-height: 1.85;
  margin-bottom: 28px;
}

.dienst-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.dienst-feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--veron-gray-700);
  background: var(--veron-white);
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius-sm);
  padding: 12px 18px;
}

.dienst-feature-list li::before {
  content: '✓';
  color: var(--veron-red);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

.dienst-single-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.dienst-terug-link {
  margin-bottom: 8px;
}

.dienst-terug-link a {
  font-size: 0.93rem;
  color: var(--veron-gray-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--veron-transition);
}

.dienst-terug-link a:hover {
  color: var(--veron-red);
}

@media (max-width: 768px) {
  .dienst-single {
    padding: 28px 20px;
  }
  .dienst-feature-list {
    grid-template-columns: 1fr;
  }
  .dienst-single-actions {
    flex-direction: column;
  }
  .dienst-single-actions .btn-primary,
  .dienst-single-actions .btn-secondary {
    text-align: center;
    justify-content: center;
  }
}

/* ============================================
   FAQ ACCORDION (homepage, ingeklapt)
   ============================================ */
.veron-faq .faq-list { max-width: 840px; margin: 40px auto 0; }
.faq-item {
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius-sm);
  background: var(--veron-white);
  margin-bottom: 12px;
  overflow: hidden;
  transition: var(--veron-transition);
}
.faq-item[open] { box-shadow: var(--veron-shadow); border-color: var(--veron-gray-300); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--veron-font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--veron-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--veron-red); }
.faq-icon {
  color: var(--veron-red);
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 24px 22px; }
.faq-a p { margin: 0; color: var(--veron-gray-700); line-height: 1.7; }


/* ============================================
   FOOTER KEURMERKEN (NOAB / RB)
   ============================================ */
.footer-keurmerken { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-keurmerken .keurmerk { display: inline-flex; align-items: center; }
.footer-keurmerken .keurmerk img { max-height: 46px; width: auto; display: block; }
.keurmerk-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--veron-white);
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius-sm);
  padding: 8px 16px;
  line-height: 1.15;
  transition: var(--veron-transition);
}
.keurmerk-badge strong { font-family: var(--veron-font-heading); font-size: 1rem; color: var(--veron-dark); letter-spacing: 1px; }
.keurmerk-badge span { font-size: 0.68rem; color: var(--veron-gray-500); text-transform: uppercase; letter-spacing: 1px; }
.footer-keurmerken .keurmerk:hover .keurmerk-badge { border-color: var(--veron-red); }
@media (max-width: 768px) { .footer-keurmerken { justify-content: center; } }


/* ============================================
   SITE-TAALKNOP (NL|EN) + PLUGIN-SCHAKELAAR
   ============================================ */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; }
.lang-switch a { cursor: pointer; }
.lang-switch .lang-sep { color: var(--veron-gray-300); font-size: 0.85rem; }
/* Het plugin-formulier heeft een eigen NL/EN-knop; die verbergen we omdat de
   taal automatisch de site-taalknop volgt. */
/* De taalschakelaar van de plugin wordt hier verborgen omdat het thema zijn
   eigen NL|EN-knop in de header heeft; twee schakelaars op één pagina is
   verwarrend. Zonder !important, zodat de plugin het desgewenst nog kan
   overrulen — een blinde override vanuit het thema maakte een refactor daar
   stilletjes onmogelijk. */
.vint-taal-schakelaar { display: none; }

/* Teamlid e-mailadres (klikbaar) */
.team-member .team-email { display: inline-block; margin-top: 4px; font-size: 0.85rem; color: var(--veron-gray-700); word-break: break-word; }
.team-member .team-email:hover { color: var(--veron-red); }

/* NOAB/RB-logo binnen de certificeringsbadge op Over ons */
.noab-badge img { max-width: 120px; max-height: 80px; width: auto; height: auto; display: block; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   VERWANTE DIENSTEN (detailpagina van een dienst)
   Geeft de bezoeker een logische volgende stap en zorgt voor interne links
   tussen de detailpagina's onderling.
   ══════════════════════════════════════════════════════════════════════════ */
.dienst-verwant { margin-top: 56px; }
.dienst-verwant .section-title { font-size: 1.4rem; margin-bottom: 20px; }
.dienst-verwant-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.dienst-verwant-item {
  display: block;
  padding: 20px;
  border: 1px solid var(--veron-gray-200);
  border-radius: var(--veron-radius-sm);
  background: var(--veron-white);
  color: var(--veron-dark);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dienst-verwant-item:hover,
.dienst-verwant-item:focus-visible {
  border-color: var(--veron-red);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
}
.dienst-verwant-naam {
  display: block;
  font-family: var(--veron-font-heading);
  font-weight: 700;
  margin-bottom: 6px;
  overflow-wrap: break-word;
}
.dienst-verwant-kort {
  display: block;
  font-size: .9rem;
  color: var(--veron-gray-700, #444);
  line-height: 1.5;
}
.dienst-single-extra { margin-top: 24px; }

/* ══════════════════════════════════════════════════════════════════════════
   BEWEGING BEPERKEN — BEWUST NIET

   Hier stond tot v3.14.1 een @media (prefers-reduced-motion: reduce)-blok dat
   de logobalk, de carousel en de hero-animatie stilzette zodra een bezoeker in
   zijn systeem had aangegeven bewegend beeld te willen beperken (Windows:
   Instellingen → Toegankelijkheid → Visuele effecten → Animatie-effecten;
   macOS: Toegankelijkheid → Beeldscherm → Beperk beweging).

   Op verzoek van de eigenaar is dat er in v3.15.0 uit gehaald: de animaties
   moeten bij élke bezoeker draaien. Dezelfde controle is ook uit veron.js
   (startAanbodTimer) en hero.js (launch) verwijderd.

   ► Wil je het terug, dan is v3.14.1 de laatste versie waarin het zat.

   Let op bij testen: staat die systeeminstelling op jouw eigen machine aan,
   dan zag je vóór v3.15.0 een stilstaande site terwijl er niets mis was. Wissel
   in Chrome via DevTools → Esc → More tools → Rendering → "Emulate CSS media
   feature prefers-reduced-motion" tussen beide weergaven.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SKIPLINK — "Direct naar de inhoud"

   Onzichtbaar tot hij focus krijgt. Voor wie met het toetsenbord werkt is dit
   de eerste tab-stop, zodat je niet elke pagina opnieuw door het hele menu
   hoeft te tabben om bij de inhoud te komen.
   ══════════════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--veron-red);
  color: var(--veron-white) !important;
  font-weight: 600;
  border-radius: 0 0 var(--veron-radius-sm) 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--veron-dark);
  outline-offset: 2px;
}

/* Dienstkaart als knop: zichtbare focus voor toetsenbordgebruikers. */
.dienst-card[role="button"]:focus-visible {
  outline: 3px solid var(--veron-red);
  outline-offset: 3px;
}

/* ── Achtergrondafbeelding van de aanbod-slider als echte <img> ──
   Was een CSS-achtergrond; die kan de browser niet vroeg ontdekken, krijgt geen
   srcset en geen fetchpriority. Op de homepage is dit het grootste zichtbare
   beeld en dus bepalend voor hoe snel de pagina "klaar" oogt. */
.aanbod-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}