/* ═══════════════════════════════════════════════════
   HORECAPROFS.NL — Stijl Nice
   Titels/hero: Krona One · Body/knoppen: Work Sans
   Kleuren: wit + lichtgeel hero + #F5CF1A + zwart + rood accent
   ═══════════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Lato:wght@400;700&family=Work+Sans:wght@400;500;600;700;800&display=swap');

   /* ─── MOBIEL-VERGRENDELING ───────────────────────── */
   html {
     overflow-x: hidden;
     scroll-behavior: smooth;
   }
   body {
     overflow-x: hidden;
     max-width: 100vw;
     font-family: 'Work Sans', sans-serif;
     background: #FFFFFF;
     color: #111111;
     font-size: 15px;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
   }
   
   /* ─── TOKENS ─────────────────────────────────────── */
   :root {
     --groen:        #F5CF1A;
     --groen-dark:   #E5C800;
     --groen-light:  #FBE96A;
     --groen-lichtst:#FEFAE8;
     --zwart:        #111111;
     --zwart-mid:    #333333;
     --footer:       #111111;
     --wit:          #FFFFFF;
     --bg:           #FFFFFF;
     --bg-card:      #FFFFFF;
     --rand:         #CCCCCC;
     --tekst:        #111111;
     --tekst-mid:    #333333;
     --tekst-licht:  #888888;
     --oranje:       #FF6B28;
     --oranje-dark:  #CC4A10;
     --r-sm:         2px;
     --r:            4px;
     --r-lg:         6px;
     --schaduw:      0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
     --font-titel:   'Krona One', sans-serif;
     --font-body:    'Work Sans', sans-serif;
     --font-lees:    'Lato', sans-serif;
   }
   
   /* ─── RESET ──────────────────────────────────────── */
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     min-width: 0;
   }
   h1, h2, h3 { line-height: 1.2; font-family: var(--font-titel); }
   a { color: inherit; text-decoration: none; }
   button { cursor: pointer; font-family: var(--font-body); }
   ul { list-style: none; }
   img, video { max-width: 100%; display: block; }
   
   /* ─── NAV ────────────────────────────────────────── */
   .nav {
     background: #FFFFFF;
     border-bottom: 1px solid var(--rand);
     position: sticky;
     top: 0;
     z-index: 100;
     width: 100%;
     overflow: visible;
   }
   .nav-inner {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 1.5rem;
     height: 64px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
   }
   .logo {
     display: flex;
     align-items: center;
     gap: 6px;
     cursor: pointer;
     flex-shrink: 0;
   }
   .logo svg {
     filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.12));
   }
   .logo-naam {
     font-family: var(--font-body);
     font-size: 22px;
     font-weight: 800;
     letter-spacing: -0.5px;
     color: var(--zwart);
     white-space: nowrap;
   }
   .logo-naam span { color: var(--groen); }
   .logo-dot {
     width: 7px;
     height: 7px;
     background: var(--oranje);
     border-radius: 50%;
     margin-bottom: 8px;
     flex-shrink: 0;
   }
   .nav-rechts {
     display: flex;
     align-items: center;
     gap: 4px;
     flex-shrink: 0;
   }
   .nav-link {
     font-size: 14px;
     font-weight: 500;
     color: var(--tekst-mid);
     padding: 7px 14px;
     border-radius: var(--r-sm);
     background: none;
     border: none;
     transition: background .15s, color .15s;
     white-space: nowrap;
     font-family: var(--font-body);
   }
   .nav-link:hover { background: var(--groen-lichtst); color: var(--zwart); }
   .nav-btn {
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px 6px 8px;
    border-radius: var(--r-sm);
    border: none;
    transition: background .15s;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
  }
  .nav-btn:hover { background: #333; }
  .nav-blog-mobiel { display: none !important; }

  .nav-btn-plus {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(145deg, #F5CF1A, #F5CF1A);
    color: #111;
    border: none;
    font-size: 22px;
    font-weight: 300;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .15s, box-shadow .15s;
    line-height: 1;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    box-shadow: none;
  }
  .nav-btn-plus:hover { transform: scale(1.08); }
  .nav-btn-plus:active { transform: scale(0.95); }
  .nav-btn .plus-cirkel {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
    color: #fff;
    padding-bottom: 1px;
  }
   
   /* ─── HERO — lichtgroen + Krona One ─────────────── */
   .hero {
     background: var(--groen-lichtst);
     padding: 2.1rem 1.5rem 1.6rem;
     text-align: center;
     width: 100%;
     border-bottom: 1px solid var(--groen-light);
   }
   .hero-inner {
     max-width: 640px;
     margin: 0 auto;
     width: 100%;
   }
   .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: var(--groen-light);
     color: #222;
     font-size: 11px;
     font-weight: 600;
     padding: 5px 16px;
     border-radius: 20px;
     margin-bottom: 1.5rem;
     letter-spacing: .06em;
     text-transform: uppercase;
     font-family: var(--font-body);
   }
   .hero-badge-dot {
     width: 6px;
     height: 6px;
     background: var(--groen);
     border-radius: 50%;
     flex-shrink: 0;
   }
   .hero h1 {
     font-size: 34px;
     font-weight: 400;
     letter-spacing: -1px;
     margin-bottom: 1rem;
     color: var(--zwart);
     line-height: 1.1;
     font-family: var(--font-titel);
   }
   .hero h1 em {
     font-style: normal;
     color: var(--groen);
   }
   .hero-sub {
     font-size: 16px;
     color: var(--tekst-mid);
     max-width: 480px;
     margin: 0 auto 2rem;
     line-height: 1.7;
     font-weight: 400;
     font-family: var(--font-body);
   }
   
   /* ─── ZOEKBALK ───────────────────────────────────── */
   .zoekbalk {
     display: flex;
     align-items: center;
     background: #FFFFFF;
     border-radius: 50px;
     padding: 8px 8px 8px 24px;
     max-width: 560px;
     width: 100%;
     margin: 0 auto 1.625rem;
     box-shadow: 0 2px 20px rgba(21,143,24,0.15);
     border: 1.5px solid var(--groen-light);
     gap: 0;
   }
   .zoekbalk input {
     flex: 1;
     border: none;
     background: transparent;
     font-size: 16px;
     font-family: var(--font-body);
     color: var(--tekst);
     outline: none;
     min-width: 0;
     min-height: 44px;
     padding: 0 8px;
   }
   .zoekbalk input::placeholder { color: var(--tekst-licht); }
   .zoekbalk select {
     border: none;
     background: transparent;
     font-size: 13px;
     font-family: var(--font-body);
     color: var(--tekst-mid);
     outline: none;
     padding: 0 10px;
     border-left: 1px solid var(--rand);
     cursor: pointer;
     min-width: 0;
     height: 100%;
     max-width: 140px;
     flex-shrink: 0;
   }
   .zoek-btn {
     background: var(--groen);
     color: #fff;
     border: none;
     padding: 0 22px;
     border-radius: 40px;
     font-size: 15px;
     font-weight: 600;
     font-family: var(--font-body);
     transition: background .15s;
     white-space: nowrap;
     flex-shrink: 0;
     height: 44px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
     margin-left: 4px;
   }
   .zoek-btn:hover { background: var(--groen-dark); }
   
   /* ─── HERO STATS ─────────────────────────────────── */
   .hero-stats {
     display: flex;
     justify-content: center;
     gap: 3rem;
     flex-wrap: wrap;
   }
   .stat-num {
     font-size: 28px;
     font-weight: 800;
     color: var(--zwart);
     letter-spacing: -1px;
     font-family: var(--font-body);
   }
   .stat-num em { color: var(--groen); font-style: normal; }
   .stat-lbl {
     font-size: 12px;
     color: var(--tekst-licht);
     margin-top: 2px;
     font-weight: 400;
     font-family: var(--font-body);
   }
   
   /* ─── SECTOR CHIPS ───────────────────────────────── */
   .sectoren {
     background: var(--wit);
     border-bottom: 1px solid var(--rand);
     padding: .9rem 1.5rem;
     width: 100%;
     overflow: hidden;
   }
   .sectoren-inner {
     max-width: 1100px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
   }
   .sectoren-label {
     font-size: 11px;
     font-weight: 600;
     color: var(--tekst-licht);
     text-transform: uppercase;
     letter-spacing: .08em;
     margin-right: 4px;
     white-space: nowrap;
     flex-shrink: 0;
     font-family: var(--font-body);
   }
   .chip {
     display: flex;
     align-items: center;
     gap: 5px;
     padding: 6px 14px;
     border-radius: 20px;
     border: 1px solid var(--rand);
     font-size: 13px;
     font-weight: 500;
     background: var(--wit);
     color: var(--tekst-mid);
     transition: all .15s;
     white-space: nowrap;
     font-family: var(--font-body);
     flex-shrink: 0;
   }
   .chip:hover { border-color: var(--groen); color: #222; background: var(--groen-lichtst); }
   .chip.actief { border-color: var(--groen); color: #222; background: var(--groen-light); font-weight: 600; }
   
   /* ─── HOOFDLAYOUT ────────────────────────────────── */
   .hoofd {
     max-width: 1100px;
     margin: 2rem auto;
     padding: 0 1.5rem;
     display: grid;
     grid-template-columns: 240px minmax(0, 1fr) 300px;
     gap: 1.75rem;
     align-items: start;
   }
   
   /* ─── SIDEBAR ────────────────────────────────────── */
   .sidebar {
     background: var(--wit);
     border: 1px solid var(--rand);
     border-radius: var(--r-lg);
     padding: 1.5rem;
     position: sticky;
     top: 80px;
     box-shadow: var(--schaduw);
   }
   .sidebar-blok { margin-bottom: 1.5rem; }
   .sidebar-blok:last-of-type { margin-bottom: 0; }
   .sidebar-titel {
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .08em;
     color: var(--tekst-licht);
     margin-bottom: 10px;
     font-family: var(--font-body);
   }
   .filter-rij { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
   .filter-rij input[type="checkbox"] {
     width: 15px;
     height: 15px;
     accent-color: var(--groen);
     flex-shrink: 0;
     cursor: pointer;
   }
   .filter-rij label { font-size: 13.5px; color: var(--tekst-mid); cursor: pointer; flex: 1; font-family: var(--font-body); }
   .filter-rij .ftl {
     font-size: 11px;
     color: var(--tekst-licht);
     background: var(--bg);
     padding: 2px 7px;
     border-radius: 20px;
   }
   .wis-btn {
     font-size: 13px;
     color: #222;
     background: none;
     border: none;
     font-family: var(--font-body);
     font-weight: 500;
     padding: 0;
     margin-top: 8px;
   }
   .wis-btn:hover { text-decoration: underline; }
   
   /* ─── VACATURELIJST ──────────────────────────────── */
   /* Vacaturekaarten altijd vol breed */
   .hoofd > div:last-child {
     min-width: 0;
     width: 100%;
   }

   /* Rechter sidebar */
   .sidebar-rechts {
     background: var(--wit);
     border: 1px solid var(--rand);
     border-radius: var(--r-lg);
     padding: 1.5rem;
     position: sticky;
     top: 80px;
     align-self: start;
     box-shadow: var(--schaduw);
   }

   .lijst-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1rem;
   }
   .lijst-titel { font-size: 15px; font-weight: 600; color: var(--tekst); font-family: var(--font-body); }
   .sort-sel {
     border: 1px solid var(--rand);
     background: var(--wit);
     border-radius: var(--r-sm);
     font-size: 13px;
     padding: 6px 10px;
     color: var(--tekst-mid);
     outline: none;
     font-family: var(--font-body);
     cursor: pointer;
   }
   
   /* ─── VACATUREKAART ──────────────────────────────── */

   #vacature-lijst {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

   .kaart {
    will-change: transform;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.4rem;
    margin-bottom: 0;
    cursor: pointer;
    width: 100%;
  
    box-shadow:
      0 1px 2px rgba(0,0,0,0.04),
      0 4px 12px rgba(0,0,0,0.06);
  
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }
  
  .kaart:hover {
    transform: translateY(-2px);
  
    box-shadow:
      0 8px 22px rgba(0,0,0,0.08),
      0 16px 32px rgba(0,0,0,0.06);
  }
  
  /* Mobile safe */
  @media (hover: none) {
    .kaart:hover {
      transform: none;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 12px rgba(0,0,0,0.06);
    }
  }
  
   .kaart-rij { display: flex; align-items: flex-start; gap: 14px; }
   .bedrijf-logo {
     width: 46px;
     height: 46px;
     min-width: 46px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     font-weight: 700;
     flex-shrink: 0;
     background: #fff;
     color: var(--tekst-licht);
     border: 1px solid var(--rand);
     letter-spacing: -.5px;
     font-family: var(--font-body);
   }
   .kaart-inhoud { flex: 1; min-width: 0; overflow: hidden; }
   .kaart-kop {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 4px;
   }
   .kaart-titel {
     font-size: clamp(14px, 1.2vw, 17px);
     font-weight: 600; /* of 650 als je font dat ondersteunt */
     letter-spacing: -0.2px;
     color: #2F2F2F;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     min-width: 0;
     font-family: var(--font-titel)
   }
   .kaart-salaris {
     font-size: 13px;
     font-weight: 700;
     color: #222;
     white-space: nowrap;
     flex-shrink: 0;
     font-family: var(--font-body);
   }
   .kaart-bedrijf {
     font-size: 13px;
     color: var(--tekst-mid);
     margin-bottom: 10px;
     font-weight: 400;
     font-family: var(--font-body);
   }
   .kaart-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
   .tag {
     font-size: 11.5px;
     font-weight: 500;
     padding: 3px 10px;
     border-radius: 20px;
     white-space: nowrap;
     font-family: var(--font-body);
   }
   .tag-type { background: var(--groen-light); color: #222; }
   .tag-loc { background: var(--bg); color: var(--tekst-mid); border: 1px solid var(--rand); }
   .tag-sector { background: var(--bg); color: var(--tekst-licht); border: 1px solid var(--rand); }
   .tag-nieuw { background: var(--zwart); color: #fff; }
   .tag-uitgelicht { background: #111; color: #fff; }
   .kaart-datum { font-size: 12px; color: var(--tekst-licht); margin-top: 9px; font-family: var(--font-body); }
   .kaart-meta { font-size: 12px; color: var(--tekst-licht); margin-top: 4px; font-family: var(--font-body); display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
   .supajob-link {
    display: inline-block;
    margin-top: 6px;
    font-weight: 700;
    color: #222222;
    background: transparent;
    border: none;
    font-size: 11px;
    padding: 0;
    text-decoration: none;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    }
  .supajob-link:hover { color: #444444; }
   .leeg { text-align: center; padding: 4rem 1rem; color: var(--tekst-mid); font-family: var(--font-body); }
   .leeg p:first-child { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
   
   /* ─── DETAIL PANEEL ──────────────────────────────── */
   .overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.25);
     z-index: 300;
   }
   .overlay.open { display: block; }
   .paneel {
     position: fixed;
     top: 0;
     right: -520px;
     bottom: 0;
     width: 500px;
     background: var(--wit);
     border-left: 1px solid var(--rand);
     overflow-y: auto;
     z-index: 400;
     transition: right .28s cubic-bezier(.4,0,.2,1);
   }
   .paneel.open { right: 0; }
   .paneel-header {
     padding: 1.25rem 1.5rem 1rem;
     border-bottom: 1px solid var(--rand);
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: var(--groen-lichtst);
   }
   .paneel-terug {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     font-weight: 500;
     color: #E8264A;
     background: var(--wit);
     border: 1.5px solid #E8264A;
     border-radius: var(--r-sm);
     padding: 4px 8px;
     transition: background .15s;
     font-family: var(--font-body);
     white-space: nowrap;
     flex-shrink: 1;
     min-width: 0;
   }
   .deel-btn {
    background: #E8264A;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
  }
  .deel-btn:hover { background: #C41E3A; }
  .deel-btn .material-symbols-outlined {
    font-size: 20px;
    color: #fff;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  .deel-menu {
    display: none;
    position: absolute;
    top: 36px;
    right: 0;
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: var(--r);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 500;
    overflow: hidden;
  }
  .deel-menu.open { display: block; }
  .deel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tekst-mid);
    cursor: pointer;
    transition: background .12s;
    font-family: var(--font-body);
    border-bottom: 1px solid var(--rand);
  }
  .deel-item:last-child { border-bottom: none; }
  .deel-item:hover { background: var(--groen-lichtst); color: var(--zwart); }

   .paneel-terug:hover { background: var(--bg); }
   .paneel-body { padding: 1.5rem; }
   .paneel-logo {
     width: 52px;
     height: 52px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     font-weight: 700;
     background: var(--groen-light);
     color: #222;
     border: 1.5px solid var(--groen-light);
     margin-bottom: 1rem;
     font-family: var(--font-body);
   }
   .paneel h2 {
     font-size: 20px;
     font-weight: 400;
     letter-spacing: -.5px;
     margin-bottom: 4px;
     color: var(--tekst);
     font-family: var(--font-titel);
   }
   .paneel-bedrijf { font-size: 14px; color: var(--tekst-mid); margin-bottom: 1rem; font-family: var(--font-body); }
   .paneel-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.25rem; }
   .hr { border: none; border-top: 1px solid var(--rand); margin: 1.25rem 0; }
   .psec { margin-bottom: 1.25rem; }
   .psec h4 {
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .08em;
     color: var(--tekst-licht);
     margin-bottom: 8px;
     font-family: var(--font-body);
   }
   .psec p, .psec li { font-size: 14px; color: var(--tekst-mid); line-height: 1.7; font-family: var(--font-body); }
   .psec ul { padding-left: 1.2rem; list-style: disc; }
   .psec li { margin-bottom: 4px; }
   .soll-btn {
     width: 100%;
     background: var(--zwart);
     color: #fff;
     border: none;
     padding: 14px;
     border-radius: var(--r);
     font-size: 15px;
     font-weight: 600;
     font-family: var(--font-body);
     transition: background .15s;
   }
   .soll-btn:hover { background: var(--groen); }
   .bewaar-btn {
     width: 100%;
     background: transparent;
     color: var(--zwart);
     border: 1.5px solid var(--zwart);
     padding: 11px;
     border-radius: var(--r);
     font-size: 14px;
     font-weight: 500;
     font-family: var(--font-body);
     margin-top: 10px;
     transition: all .15s;
   }
   .bewaar-btn:hover { background: var(--groen-lichtst); border-color: var(--groen); color: #222; }
   
   /* ─── VACATURE PLAATSEN ──────────────────────────── */
   .plaatsen-wrap {
     display: none;
     max-width: 640px;
     margin: 2rem auto;
     padding: 0 1.5rem 5rem;
     width: 100%;
   }
   .plaatsen-wrap.actief { display: block; }
   .form-terug {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
     font-weight: 500;
     color: var(--tekst-mid);
     background: none;
     border: 1px solid var(--rand);
     border-radius: var(--r-sm);
     padding: 7px 14px;
     font-family: var(--font-body);
     margin-bottom: 2rem;
     transition: background .15s;
   }
   .form-terug:hover { background: var(--bg); }
   .plaatsen-titel {
     font-size: 34px;
     font-weight: 400;
     letter-spacing: -0.5px;
     margin-bottom: 8px;
     color: var(--tekst);
     font-family: var(--font-titel);
     text-align: center;
   }
   .plaatsen-sub { font-size: 16px; color: var(--tekst-mid); line-height: 1.65; margin-bottom: 2.5rem; font-weight: 400; font-family: var(--font-body); text-align: center; }
   .formulier { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
   .form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
   .form-rij-3 { grid-template-columns: 2fr 1fr 1fr; }
   .veld label {
     font-size: 11px;
     font-weight: 600;
     color: var(--tekst-mid);
     display: block;
     margin-bottom: 6px;
     text-transform: uppercase;
     letter-spacing: .06em;
     font-family: var(--font-body);
   }
   .veld input, .veld select, .veld textarea {
     width: 100%;
     border: 1px solid var(--rand);
     border-radius: var(--r);
     padding: 11px 14px;
     font-size: 14px;
     background: var(--wit);
     color: var(--tekst);
     font-family: var(--font-body);
     outline: none;
     transition: border-color .15s;
   }
   .veld input:focus, .veld select:focus, .veld textarea:focus {
     border-color: var(--groen);
     box-shadow: 0 0 0 3px rgba(21,143,24,0.08);
   }
   .veld input::placeholder, .veld textarea::placeholder { color: var(--tekst-licht); }
   .veld textarea { resize: vertical; line-height: 1.65; }
   
   /* ─── LOGO UPLOAD ────────────────────────────────── */
   .logo-upload-wrap {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   .logo-upload-knop {
     border: 1.5px dashed #0A66C2;
     border-radius: var(--r);
     padding: 10px 16px;
     font-size: 13px;
     font-weight: 600;
     color: #0A66C2;
     cursor: pointer;
     font-family: var(--font-body);
     transition: all .15s;
     background: #f0f6ff;
   }
   .logo-upload-knop:hover { border-color: #084d96; color: #084d96; background: #ddeeff; }

   /* ─── PAKKET KAARTEN ─────────────────────────────── */
   .pakket-kaarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
   .pk {
     border: 1px solid var(--rand);
     border-radius: var(--r);
     padding: 1rem;
     cursor: pointer;
     transition: all .15s;
     text-align: center;
     background: var(--wit);
   }
   .pk:hover { border-color: var(--groen); background: var(--groen-lichtst); }
   .pk.gekozen { border-color: var(--groen); border-width: 2px; background: var(--groen-light); }
   .pk-naam { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--tekst); font-family: var(--font-body); }
   .pk-prijs { font-size: 28px; font-weight: 800; color: #222; letter-spacing: -1px; margin-bottom: 4px; font-family: var(--font-body); }
   .pk-info { font-size: 11.5px; color: var(--tekst-licht); line-height: 1.5; font-family: var(--font-body); }
   .verstuur-btn {
     width: 100%;
     background: var(--zwart);
     color: #fff;
     border: none;
     padding: 14px;
     border-radius: var(--r);
     font-size: 15px;
     font-weight: 600;
     font-family: var(--font-body);
     transition: background .15s;
     margin-top: 6px;
   }
   .verstuur-btn:hover { background: var(--groen); }
   .verstuur-btn:disabled { background: var(--tekst-licht); cursor: not-allowed; }

   /* ─── PREVIEW KAART ─────────────────────────────── */
   .preview-kaart {
    background: var(--bg-card);
    border: 1px solid var(--rand);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--schaduw);
  }
   
   /* ─── TABS ───────────────────────────────────────── */
   .tabs { display: flex; gap: 0; margin-bottom: 1.5rem; background: var(--bg); border-radius: 10px; padding: 4px; border: 1px solid var(--rand); }
   .tab { flex: 1; padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--tekst-mid); cursor: pointer; transition: all .15s; text-align: center; }
   .tab.actief { background: #fff; color: #222222; font-weight: 700; border: 1px solid #222222; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
   .tab-badge { display: inline-block; background: var(--oranje); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
   .voordelen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; margin-bottom: .5rem; }
   .voordeel { font-size: 12px; color: #222; background: var(--groen-light); padding: 3px 10px; border-radius: 20px; font-weight: 500; font-family: var(--font-body); }
   .prijs-info { background: var(--groen-lichtst); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--groen-light); }
   .prijs-groot { font-family: var(--font-body); font-size: 26px; font-weight: 800; color: #222; }
   .prijs-info-tekst { font-size: 12px; color: var(--tekst-mid); line-height: 1.5; font-family: var(--font-body); }
   .verborgen { display: none; }
   
   /* ─── FOOTER CTA ─────────────────────────────────── */
   .footer-cta {
     background: #f5f5f3;
     border-top: 1px solid var(--rand);
     padding: 4rem 1.5rem;
     text-align: center;
     margin-top: 4rem;
     width: 100%;
   }
   .footer-cta h3 {
     font-size: 32px;
     font-weight: 400;
     letter-spacing: -0.5px;
     color: var(--zwart);
     margin-bottom: .75rem;
     font-family: var(--font-titel);
   }
   .footer-cta h3 span { color: #222; }
   .footer-cta p {
     color: var(--tekst-mid);
     font-size: 16px;
     margin-bottom: 1.75rem;
     line-height: 1.65;
     max-width: 480px;
     margin-left: auto;
     margin-right: auto;
     font-weight: 400;
     font-family: var(--font-body);
   }
   .footer-cta-btn {
     background: #fff;
     color: #158F18;
     border: 1.5px solid var(--rand);
     padding: 10px 24px;
     border-radius: var(--r);
     font-size: 14px;
     font-weight: 600;
     font-family: var(--font-body);
     transition: border-color .15s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     line-height: 1;
     cursor: pointer;
     text-decoration: none;
   }
   .footer-cta-btn:hover { border-color: #aaa; }
   .footer-cta-btn .plus-cirkel {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: rgba(255,255,255,0.22);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-size: 17px;
     font-weight: 300;
     line-height: 1;
     color: #fff;
     padding-bottom: 1px;
   }
   
   /* ─── FOOTER ─────────────────────────────────────── */
   .footer {
     background: #fff;
     border-top: 1px solid var(--rand);
     padding: 3rem 1.5rem 2rem;
     width: 100%;
   }
   .footer-inner {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 2rem;
   }
   .footer h4 {
     font-size: 11px;
     font-weight: 600;
     margin-bottom: 1rem;
     color: var(--tekst-licht);
     text-transform: uppercase;
     letter-spacing: .08em;
     font-family: var(--font-body);
   }
   .footer li { margin-bottom: 8px; }
   .footer a { font-size: 13.5px; color: var(--tekst-mid); transition: color .15s; font-family: var(--font-body); }
   .footer a:hover { color: #158F18; }
   .footer-logo-blok p { font-size: 13.5px; color: var(--tekst-licht); margin-top: 10px; line-height: 1.65; max-width: 280px; font-weight: 400; font-family: var(--font-body); }
   .footer-onderkant {
     max-width: 1100px;
     margin: 2rem auto 0;
     padding-top: 1.5rem;
     border-top: 1px solid var(--rand);
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 12.5px;
     color: var(--tekst-licht);
     flex-wrap: wrap;
     gap: 8px;
     font-family: var(--font-body);
   }
   
   /* ═══════════════════════════════════════════════════
      MOBIEL — max 820px
      ═══════════════════════════════════════════════════ */
   @media (max-width: 820px) {
   
     .nav-inner { 
      padding: 0 1rem; height: 58px; 
      overflow: visible;
      position: relative;
    }
     .nav-link { display: none; }
     .nav-btn { display: none; }
     .nav-btn-plus {
      width: 38px;
      height: 38px;
      font-size: 20px;
      margin-right: 8px;
    }
     .logo-naam { font-size: 19px; }
     .logo svg { width: 150px; height: 32px; }
   
     .hero { padding: 2.5rem 0.75rem 2rem; }
     .hero h1 { font-size: 28px; letter-spacing: -0.5px; line-height: 1.15; }
     .hero-sub { font-size: 14px; margin-bottom: 1.5rem; }
     .hero-badge { font-size: 10px; padding: 4px 12px; }
   
     input, textarea, select { font-size: 16px !important; }

     .zoekbalk {
       border-radius: 14px;
       padding: 12px;
       flex-direction: column;
       gap: 10px;
       width: 100%;
       max-width: 100%;
       margin-left: 0;
       margin-right: 0;
       height: auto;
       align-items: stretch;
       box-shadow: 0 2px 16px rgba(21,143,24,0.12);
     }
     .zoekbalk input {
       width: 100% !important;
       min-height: 52px !important;
       height: 52px !important;
       padding: 0 16px !important;
       font-size: 17px !important;
       border-radius: 10px !important;
       background: #fff !important;
       border: 1.5px solid var(--groen-light) !important;
       box-sizing: border-box !important;
     }
     .zoekbalk select {
       width: 100%;
       height: 56px;
       padding: 0 16px;
       border-left: none;
       border-radius: 10px;
       background: #fff;
       border: 1.5px solid var(--groen-light);
       max-width: 100%;
       flex: none;
       font-size: 17px;
     }
     .zoek-btn {
       width: 100%;
       border-radius: 10px;
       height: 58px;
       margin-left: 0;
       font-size: 18px;
       font-weight: 700;
       padding: 0 16px;
     }
   
     .hero-stats { gap: 1.25rem; }
     .stat-num { font-size: 20px; }
     .stat-lbl { font-size: 11px; }
   
     .sectoren { padding: .75rem 1rem; overflow-x: auto; }
     .sectoren-inner {
       flex-wrap: nowrap;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       padding-bottom: 4px;
     }
   
     .hoofd {
       grid-template-columns: 1fr;
       padding: 0 1rem;
       margin: 1rem auto;
       gap: 1rem;
       display: flex;
       flex-direction: column;
       max-width: 100%;
     }
     .sidebar {
       display: block;
       order: -1;
       width: 100%;
       box-sizing: border-box;
       padding: 1rem;
     }
     .sidebar-blok { margin-bottom: 1rem; }
     #filters-.toggle { display: block !important; }
     .sidebar-rechts { display: none !important; }
     #mededelingen-mobiel { display: block !important; }
     .nav-blog-mobiel { display: inline-flex !important; }
     #filters-inhoud { display: none; }
     .filter-rij label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
   
     .kaart { padding: 1rem; }
     .kaart-titel { font-size: 14px; white-space: normal; overflow: visible; text-overflow: unset; }
     .kaart-salaris { font-size: 12px; }
     .kaart-bedrijf { font-size: 12px; }
   
     .paneel { width: 100%; right: -100%; }
     .paneel.open { right: 0; }
   
     .plaatsen-wrap { margin: 1.5rem auto; padding: 0 1rem 4rem; }
     .plaatsen-titel { font-size: 24px; letter-spacing: 0; }
     .plaatsen-sub { font-size: 14px; margin-bottom: 1.5rem; }
     .form-rij { grid-template-columns: 1fr; }
     .form-rij-3 { grid-template-columns: 1fr; }
     .pakket-kaarten { grid-template-columns: repeat(2, 1fr); gap: 8px; }
   
     .footer-cta { padding: 2.5rem 1rem; }
     .footer-cta h3 { font-size: 22px; letter-spacing: 0; }
     .footer-cta p { font-size: 14px; }
     .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
     .footer { padding: 2rem 1rem 1.5rem; }
   }
   
   /* ═══════════════════════════════════════════════════
      KLEIN MOBIEL — max 480px
      ═══════════════════════════════════════════════════ */
   @media (max-width: 480px) {
     .sidebar-rechts { display: none !important; }
     .hero h1 { font-size: 22px; letter-spacing: 0; line-height: 1.2; }
     .hero-stats { gap: 1rem; }
     .stat-num { font-size: 18px; }
     .footer-inner { grid-template-columns: 1fr; }
     .logo-naam { font-size: 17px; }
     .nav-btn { font-size: 12px; padding: 7px 12px 7px 8px; }
     .nav-btn .plus-cirkel { width: 18px; height: 18px; font-size: 14px; }
     .footer-cta h3 { font-size: 20px; }
     .plaatsen-titel { font-size: 20px; }
   }

  /* ─── DROPDOWN ───────────────────────────────────── */
  .nav-dropdown { position: relative; }
  .nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: var(--r);
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 200;
    overflow: hidden;
  }
  .nav-dropdown-menu.open { display: block !important; }
  #nav-dropdown-menu2 { min-width: 140px; }
  .nav-dropdown-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tekst-mid);
    border-bottom: 1px solid var(--rand);
    font-family: var(--font-body);
    transition: background .12s;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-dropdown-menu a:last-child { border-bottom: none; }
  .nav-dropdown-menu a:hover { background: var(--groen-lichtst); color: var(--zwart); }

  /* ─── HAMBURGER ──────────────────────────────────── */
  .hamburger {
    display: none;
    background: none;
    border: 1px solid var(--rand);
    border-radius: var(--r-sm);
    padding: 0;
    width: 38px;
    height: 38px;
    font-size: 18px;
    cursor: pointer;
    color: var(--tekst-mid);
    flex-shrink: 0;
  }

  /* ─── MOBIEL MENU ────────────────────────────────── */
.mobiel-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  position: absolute;
  top: 58px;
  right: 1rem;
  width: 200px;
  z-index: 200;
  overflow: hidden;
}

.mobiel-menu.open {
  display: flex;
}

.mobiel-menu a {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tekst-mid);
  border-bottom: 1px solid var(--rand);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .12s;
  text-align: left;
}

.mobiel-menu a:last-child {
  border-bottom: none;
}

.mobiel-menu a:hover {
  background: var(--groen-lichtst);
  color: var(--zwart);
}

/* ─── NAV COMPACT ─────────────────────────── */
@media (max-width: 820px) {
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-dropdown {
    display: none;
  }

  .nav-rechts {
    gap: 8px;
    overflow: visible;
    flex-shrink: 0;
  }

  .nav-btn-plus {
    width: 38px;
    height: 38px;
    font-size: 22px;
    border-radius: 50%;
    padding: 0;
  }
}

/* ─── TOOLTIP MOBIEL ─────────────────────────── */
@media (max-width: 700px) {
  #supajob-tab-tooltip {
    max-width: 160px;
    width: auto;
    font-size: 11px;
    padding: 6px 10px;
    bottom: calc(100% + 4px);
  }

  .soll-btn {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }

}
  .vacature-info-blok {
    padding: 12px 14px;
    border-radius: 12px;
    background: #faf9f6; /* iets lichter */
    border: none; /* rand weg */
  }

  .vacature-info-blok p {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(0,0,0,0.6);
    font-style: italic; /* 👈 dit geeft die editorial feel */
  }

  .vacature-info-blok strong {
    font-weight: 600;
    color: rgba(0,0,0,0.75); /* nog wel duidelijk, maar niet zwart */
    font-style: normal; /* belangrijk: niet italic */
  }

/* ─── FILTERS OP ECHTE MOBIEL ─────────────────────────── */
@media (max-width: 820px) and (hover: none) and (pointer: coarse) {
  #filters-toggle {
    display: block !important;
  }

  #filters-inhoud {
    display: none;
  }
}

/* ─── FILTERS OP KLEINE LAPTOP / SMAL DESKTOP ─────────── */
@media (min-width: 701px) and (max-width: 820px) and (hover: hover) {
  #filters-toggle {
    display: none !important;
  }

  #filters-inhoud {
    display: block !important;
  }
}

/* ─── FILTERS OP GROTER DESKTOP ───────────────────────── */
@media (min-width: 821px) {
  #filters-toggle {
    display: none !important;
  }

  #filters-inhoud {
    display: block !important;
  }
}

/* ─── SMALL DESKTOP FIX (tussen desktop en tablet) ─────────────────── */
@media (max-width: 1200px) {
  .hoofd {
    grid-template-columns: 260px 1fr;
    gap: 24px;
  }

  #vacature-lijst {
    width: 100%;
    max-width: none;
  }

  .kaart {
    width: 100%;
  }
}

/* ─── TABLET / SMALL LAPTOP FIX ─────────────────────────── */
@media (max-width: 1024px) {
  .hoofd {
    display: block;
  }

  .sidebar,
  .sidebar-rechts {
    width: 100%;
    max-width: 640px;
    margin: 0 auto 16px auto;
  }

  .sidebar-rechts {
    display: none;
  }

  #vacature-lijst {
    max-width: 640px;
    margin: 0 auto;
  }

  .lijst-top {
    max-width: 640px;
    margin: 0 auto 12px auto;
  }

  .kaart {
    padding: 18px 20px;
    border-radius: 16px;
  }

  .kaart-rij {
    gap: 16px;
    align-items: flex-start;
  }

  .kaart-kop {
    margin-bottom: 2px;
  }

  .bedrijf-logo {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 14px;
    font-size: 28px;
  }

  .kaart-inhoud {
    min-width: 0;
  }

  .kaart-titel {
    font-size: 24px;
    line-height: 1.15;
    margin-bottom: 6px;
  }

  .kaart-bedrijf {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .kaart-meta {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .kaart-datum {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* ─── KAARTEN TUNING MOBIEL ─────────────────────────── */
@media (max-width: 700px) {
  .kaart {
    padding: 16px 16px;
  }

  .kaart-rij {
    gap: 14px;
  }

  .bedrijf-logo {
    width: 64px;
    height: 64px;
    min-width: 64px;
    font-size: 24px;
  }

  .kaart-titel {
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 5px;
  }

  .kaart-bedrijf {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .kaart-meta,
  .kaart-datum {
    font-size: 12.5px;
  }
}

@media (max-width: 700px) {
  .vac-titel {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
}

.vac-logo-wrapper {
  display: none !important;
}

/* ─── VACATUREPAGINA ──────────────────────────────── */
    .vac-hero {
      background: #fff;
      border-bottom: 1px solid var(--rand);
      padding: 2.5rem 0 2rem;
    }

    .vac-hero-inner {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .vac-terug {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--tekst-mid);
      background: #fff;
      border: 1.5px solid var(--rand);
      border-radius: var(--r-sm);
      padding: 6px 14px;
      text-decoration: none;
      margin-bottom: 1.5rem;
      transition: background .15s;
    }

    .vac-terug:hover {
      background: var(--bg);
    }

    .vac-kop {
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }

    .vac-logo-wrapper {
      width: 78px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .vac-logo {
      width: 64px;
      height: 64px;
      min-width: 64px;
      border-radius: 12px;
      background: #fff;
      color: var(--tekst-licht);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font-body);
      border: 1px solid var(--rand);
      flex-shrink: 0;
    }

    .claim-link-top {
      margin-top: 8px;
      font-size: 11px;
      line-height: 1.2;
      color: #E8264A;
      text-decoration: none;
      font-weight: 600;
      opacity: .82;
      white-space: nowrap;
    }

    .vac-kop-content {
      min-width: 0;
      flex: 1;
    }

    .vac-titel {
      font-family: var(--font-titel);
      font-size: clamp(18px, 2.5vw, 22px);
      color: #333;
      letter-spacing: -0.5px;
      line-height: 1.2;
      margin: 0 0 6px 0;
    }

    .vac-bedrijf {
      font-size: 15px;
      color: var(--tekst-mid);
      margin-bottom: 12px;
    }

    .vac-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .v-hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 14px;
    }

    .vac-body {
      max-width: 860px;
      margin: 0 auto;
      padding: 2.5rem 1.5rem;
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 2rem;
      align-items: start;
    }

    .vac-content {
      background: #fff;
      border: 1.5px solid var(--rand);
      border-radius: var(--r-lg);
      padding: 1.75rem 2rem;
    }

    .vac-content h2 {
      font-family: var(--font-titel);
      font-size: 18px;
      color: #111;
      margin: 1.75rem 0 0.75rem;
    }

    .vac-content h3 {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 700;
      color: #111;
      margin: 1.25rem 0 0.5rem;
    }

    .vac-content p {
      font-size: 15px;
      color: #333333;
      line-height: 1.8;
      margin-bottom: 0.85rem;
      font-family: 'Lato', sans-serif;
    }

    .vac-content ul,
    .vac-content ol {
      padding-left: 1.4rem;
      margin-bottom: 1rem;
      list-style: disc;
    }

    .vac-content ol {
      list-style: decimal;
    }

    .vac-content li[data-list="bullet"] {
      list-style: disc;
    }

    .vac-content li[data-list="ordered"] {
      list-style: decimal;
    }

    .vac-content li {
      font-size: 15px;
      color: #333333;
      line-height: 1.75;
      margin-bottom: 4px;
      font-family: 'Lato', sans-serif;
    }

    .vac-content strong {
      color: #111;
    }

    .vac-content ul li::marker {
      color: var(--groen);
    }

    .vac-sidebar {
      position: sticky;
      top: 84px;
      align-self: start;
      min-height: 100px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .vac-kaart {
      background: #fff;
      border: 1.5px solid var(--rand);
      border-radius: var(--r-lg);
      padding: 1.5rem;
    }

    .vac-kaart-titel {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--tekst-licht);
      margin-bottom: 1rem;
    }

    .vac-detail-rij {
      display: grid;
      grid-template-columns: 24px 110px 1fr;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--rand);
      font-size: 14px;
      color: var(--tekst-mid);
    }

    .vac-detail-rij:last-child {
      border-bottom: none;
    }

    .vac-detail-icoon {
      width: 20px;
      text-align: center;
      color: var(--groen);
      flex-shrink: 0;
    }

    .vac-detail-label {
      font-weight: 600;
      color: #222;
    }

    .vac-detail-rij div:last-child {
      color: var(--tekst-mid);
    }

    .soll-blok {
      background: #111;
      border-radius: var(--r-lg);
      padding: 1.5rem;
    }

    .soll-blok-titel {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 1rem;
      font-family: var(--font-body);
    }

    .soll-knop {
      display: block;
      width: 100%;
      text-align: center;
      padding: 8px 16px;
      border-radius: var(--r);
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-body);
      text-decoration: none;
      transition: background .15s;
      margin-bottom: 10px;
      border: none;
      cursor: pointer;
    }

    .soll-knop-mail {
      background: #fff;
      color: #158F18;
      font-weight: 600;
      border: 1.5px solid var(--rand) !important;
    }

    .soll-knop-mail:hover {
      background: #f9f9f9;
      border-color: #aaa !important;
    }

    .soll-knop-wa {
      background: #25D366;
      color: #fff;
    }

    .soll-knop-wa:hover {
      background: #1da851;
    }

    .soll-knop-site {
      background: rgba(255,255,255,0.1);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.2) !important;
    }

    .soll-knop-site:hover {
      background: rgba(255,255,255,0.2);
    }

    .deel-rij {
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;
    }

    .deel-knop {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1.5px solid var(--rand);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .15s;
      text-decoration: none;
      font-size: 18px;
      flex-shrink: 0;
    }

    .deel-knop:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    @media (max-width: 700px) {
      .vac-body {
        grid-template-columns: 1fr;
        padding: 1.5rem 1rem;
      }
      
      .vac-detail-rij {
        grid-template-columns: 20px 90px 1fr;
        gap: 10px;
        padding: 9px 0;
        font-size: 13.5px;
      }

      .vac-detail-rij div:last-child {
        padding-left: 40px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .vac-detail-label {
    white-space: nowrap;
  }

      .vac-detail-label {
        white-space: nowrap;
      }

      .vac-sidebar {
        position: static;
      }

      .vac-hero {
        padding: 1.5rem 1rem;
      }

      .vac-kop {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
      }

      .vac-logo-wrapper {
        width: 70px;
      }

      .claim-link-top {
        font-size: 10px;
        margin-top: 7px;
      }

      .vac-titel {
        font-size: 32px;
        line-height: 0.98;
        margin-bottom: 8px;
      }

      .vac-bedrijf {
        font-size: 17px;
        line-height: 1.35;
        margin-bottom: 10px;
      }

      .vac-tags {
        margin-bottom: 12px;
      }

      .v-hero-cta .soll-knop,
      .v-hero-cta a {
        width: 100%;
        justify-content: center;
        text-align: center;
      }
    }

  .vac-logo-placeholder {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 12px;
    background: var(--groen-lichtst);
    border: 1px solid var(--groen-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--groen-light);
    font-family: var(--font-body);
    flex-shrink: 0;
    letter-spacing: 0.5px;
  }

  .hero-cta-logo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--rand);
    background: #fff;
    padding: 4px;
  }

  .hero-cta-logo-placeholder {
    min-width: 44px;
    align-self: stretch;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--rand);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tekst-licht);
    font-family: var(--font-body);
    flex-shrink: 0;
    letter-spacing: -.5px;
  }