/* Kaliber Zorg -- huisstijl (matched aan de bestaande live site)
   Kleuren en font zijn overgenomen van kaliberzorg.nl, niet opnieuw bedacht:
   blauw en teal als kleurvlakken, een stevig geometrisch sans-serif lettertype. */

:root {
  --blue: #3d6ed4;
  --blue-dark: #2f58ac;
  --blue-soft: #eaf0fc;
  --teal: #79c6c1;
  --teal-dark: #5fada7;
  --ink: #24282a;
  --ink-soft: #5b6266;
  --paper: #ffffff;
  --card: #f6f6f6;
  --line: #e6e6e6;
  --on-color: #ffffff;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(36, 40, 42, 0.06), 0 12px 28px -14px rgba(36, 40, 42, 0.25);
  --shadow-hover: 0 2px 6px rgba(36, 40, 42, 0.08), 0 18px 34px -16px rgba(36, 40, 42, 0.32);
  --ease: cubic-bezier(0.22, 0.8, 0.36, 1);

  /* De site is bewust altijd licht, ongeacht het systeemthema van de bezoeker. */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 0.6em;
  color: var(--ink);
}

h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1.1em; max-width: 62ch; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 2px;
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-block;
  margin-bottom: 0.7rem;
}

/* ---------- knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s var(--ease), background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s var(--ease), color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.05s; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

.btn-arrow {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(36, 40, 42, 0.12);
  flex-shrink: 0;
  transition: transform 0.18s var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(2px); }
.btn-primary .btn-arrow { background: rgba(255, 255, 255, 0.25); }

.btn-primary { background: var(--blue); color: var(--on-color); }
.btn-primary:hover { background: var(--blue-dark); color: var(--on-color); box-shadow: 0 10px 22px -10px rgba(61, 110, 212, 0.5); }

.btn-blue { background: var(--blue); color: var(--on-color); }
.btn-blue:hover { background: var(--blue-dark); color: var(--on-color); box-shadow: 0 10px 22px -10px rgba(61, 110, 212, 0.5); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

/* Solide witte knop voor als de gewone blauwe knop op een blauwe achtergrond zou verdwijnen */
.btn-white { background: #fff; color: var(--blue-dark); }
.btn-white:hover { background: var(--blue-soft); color: var(--blue-dark); }
.btn-white .btn-arrow { background: var(--blue-soft); }
.btn-white:hover .btn-arrow { background: #fff; }

.btn-small { padding: 0.5rem 1rem; font-size: 0.86rem; }
.btn-danger { background: #fbe3e0; color: #a3403a; border-color: transparent; }
.btn-danger:hover { background: #a3403a; color: #fff; }

/* ---------- header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 80px;
}

.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.logo img { height: 30px; width: auto; display: block; }
.logo .logo-text { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--ink); white-space: nowrap; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.96rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.main-nav a:hover, .main-nav a.actief { border-color: var(--teal); color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 0.9rem; }
.nav-cta .btn { white-space: nowrap; }

.nav-toggle {
  display: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.nav-toggle:hover { border-color: var(--blue); }

@media (max-width: 1080px) {
  .main-nav { position: absolute; top: 80px; left: 0; right: 0; background: var(--paper);
              border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start;
              gap: 0; padding: 0.5rem 1.5rem 1rem;
              opacity: 0; visibility: hidden; transform: translateY(-8px);
              transition: opacity 0.2s ease, transform 0.2s var(--ease), visibility 0.2s; }
  .main-nav.open { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { width: 100%; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .nav-cta .btn-ghost { display: none; }
  .nav-toggle {
    display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
    border: 1.5px solid var(--line); border-radius: var(--radius-s); background: none; cursor: pointer;
  }

  /* Header krapper op mobiel, zodat logo en "Bekijk vacatures" gegarandeerd
     op één regel blijven staan. */
  .site-header .wrap { padding: 0 1rem; gap: 0.6rem; }
  .nav-cta { gap: 0.5rem; }
  .nav-cta .btn { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
}

@media (max-width: 420px) {
  .site-header .wrap { padding: 0 0.85rem; gap: 0.45rem; }
  .logo { gap: 0.4rem; }
  .logo img { height: 24px; }
  .logo .logo-text { font-size: 1rem; }
  .nav-cta { gap: 0.4rem; }
  .nav-cta .btn { padding: 0.48rem 0.7rem; font-size: 0.78rem; }
  .nav-toggle { width: 36px; height: 36px; }
}

/* ---------- hero (foto met tekst erop) ---------- */

.hero-photo {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  padding: 3rem 1.5rem 9rem;
  overflow: hidden;
}
.hero-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,22,24,0.45) 0%, rgba(20,22,24,0.15) 45%, rgba(20,22,24,0.55) 100%);
}
.hero-photo .hero-content { position: relative; z-index: 1; max-width: 780px; }
.hero-photo h1 { color: #fff; }
.hero-photo .hero-dek { color: rgba(255,255,255,0.92); max-width: 52ch; margin: 0 auto; font-size: 1.1rem; }

.hero-cards {
  max-width: 1160px;
  margin: -7rem auto 4.5rem;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
@media (max-width: 760px) { .hero-cards { grid-template-columns: 1fr; margin-top: -5rem; margin-bottom: 3rem; } }

.hero-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-l);
  padding: 2.2rem 2.4rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.hero-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
@media (prefers-reduced-motion: reduce) { .hero-card:hover { transform: none; } }
.hero-card.card-light { background: var(--card); color: var(--ink); }
.hero-card.card-teal { background: var(--teal); color: var(--on-color); }
/* De algemene h1-h4-regel zet color:var(--ink) direct op ieder kopje, dus
   die overschrijft de (via overerving werkende) witte tekst van de kaart
   zelf -- vandaar deze expliciete override op de kop van de teal kaart. */
.hero-card.card-teal h3 { color: var(--on-color); }
.hero-card h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.hero-card p { font-size: 0.96rem; margin-bottom: 1.2rem; }
/* De twee kaarten staan altijd even hoog (grid-rijen rekken standaard mee),
   maar de tekst erboven is niet altijd even lang -- door de knop onderin
   de flex-kolom te ankeren (margin-top: auto) staan "Solliciteer nu" en
   "Contact opnemen" hierdoor altijd op exact dezelfde hoogte. */
.hero-card > .btn { margin-top: auto; align-self: flex-start; }

/* Eenvoudige hero (zonder foto) voor de binnenpagina's -- licht, net als
   de originele kaliberzorg.nl (geen vol blauw vlak, blauw is een accent). */
.hero-solid {
  background: var(--paper);
  color: var(--ink);
  padding: 4rem 0 3.5rem;
  text-align: center;
}
.hero-solid h1 { color: var(--ink); }
.hero-solid .eyebrow { color: var(--blue); }
.hero-solid .hero-dek { color: var(--ink-soft); max-width: 56ch; margin: 0 auto; }
.hero-solid.hero-solid-links { text-align: left; }
.hero-solid.hero-solid-links .hero-dek { margin: 0; }

.hero-solid.hero-solid-split { text-align: left; }
.hero-solid.hero-solid-split .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
}
.hero-solid.hero-solid-split .hero-dek { margin: 0; }
@media (max-width: 860px) {
  .hero-solid.hero-solid-split .wrap { grid-template-columns: 1fr; }
}

/* Blauwe hero-variant -- specifiek voor zorgorganisatie/zorgprofessional,
   op verzoek weer terug naar vol blauw met witte tekst in plaats van de
   lichte variant hierboven. */
.hero-solid.hero-blauw { background: var(--blue); color: var(--on-color); }
.hero-solid.hero-blauw h1 { color: var(--on-color); }
.hero-solid.hero-blauw .eyebrow { color: rgba(255, 255, 255, 0.85); }
.hero-solid.hero-blauw .hero-dek { color: rgba(255, 255, 255, 0.9); }

.btn-teal { background: var(--teal); color: var(--on-color); }
.btn-teal:hover { background: var(--teal-dark); color: var(--on-color); box-shadow: 0 10px 22px -10px rgba(95, 173, 167, 0.55); }
.btn-teal .btn-arrow { background: rgba(255, 255, 255, 0.25); }

.hero-fotokaart {
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 20px 45px -18px rgba(10, 16, 30, 0.5);
}
.hero-fotokaart img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .hero-fotokaart { margin-top: 0.5rem; } }

.foto-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.6rem;
}
.foto-strip img {
  width: 100%; height: 220px; object-fit: cover;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
@media (max-width: 700px) {
  .foto-strip { grid-template-columns: 1fr; }
  .foto-strip img { height: 240px; }
}

/* ---------- secties ---------- */

section.blok { padding: 4.5rem 0; }
section.blok.blue { background: var(--blue); color: #fff; }
section.blok.blue h2, section.blok.blue .eyebrow { color: #fff; }
section.blok.blue p { color: rgba(255,255,255,0.88); }
section.blok.teal { background: var(--teal); color: var(--on-color); }
section.blok.teal h2 { color: var(--on-color); }
section.blok.teal .eyebrow { color: var(--on-color); opacity: 0.85; }
section.blok.card { background: var(--card); }
.blok-head { max-width: 62ch; margin-bottom: 2.4rem; }
.blok-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Twee-koloms: tekst + formulier-kaart (zoals "Samen versterken door verbinding") */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 860px) { .split-grid { grid-template-columns: 1fr; } }

.form-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-l);
  padding: 2.2rem;
  box-shadow: var(--shadow-card);
}
.form-card h3 { color: var(--blue); font-size: 1.4rem; }

/* ---------- kernwaarden grid ---------- */

.waarden-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 780px) { .waarden-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .waarden-grid { grid-template-columns: 1fr; } }

.waarde-card {
  background: var(--card);
  border-radius: var(--radius-m);
  padding: 1.6rem;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.waarde-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
@media (prefers-reduced-motion: reduce) { .waarde-card:hover { transform: none; } }
.blok.blue .waarde-card, .blok.teal .waarde-card { background: rgba(255,255,255,0.14); }
.blok.teal .waarde-card { background: rgba(255,255,255,0.45); }
.waarde-nummer {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue);
  margin-bottom: 0.5rem;
  display: block;
}
.blok.blue .waarde-nummer { color: #fff; opacity: 0.7; }
.blok.teal .waarde-nummer { color: var(--ink); opacity: 0.6; }
.waarde-card h3 { margin-bottom: 0.4rem; }
.waarde-card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.blok.blue .waarde-card p { color: rgba(255,255,255,0.85); }

/* ---------- verhalen / team ---------- */

.stemmen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media (max-width: 900px) { .stemmen-grid { grid-template-columns: 1fr; } }

.stem-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.8rem;
  display: flex;
  gap: 1.1rem;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s ease;
}
.stem-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .stem-card:hover { transform: none; } }
.stem-foto {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--card);
}
.stem-rol { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.2rem; display: block; }
.stem-naam { font-family: "Poppins", sans-serif; font-weight: 600; }
.stem-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0.6rem 0 0; }

/* ---------- testimonials ---------- */

.testimonial-scroller { position: relative; }

.testimonial-grid {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.2rem 0.2rem 0.9rem;
  margin: -0.2rem -0.2rem 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 40, 42, 0.25) transparent;
}
.testimonial-grid::-webkit-scrollbar { height: 7px; }
.testimonial-grid::-webkit-scrollbar-track { background: transparent; }
.testimonial-grid::-webkit-scrollbar-thumb { background: rgba(36, 40, 42, 0.22); border-radius: 10px; }
.blok.teal .testimonial-grid { scrollbar-color: rgba(36, 40, 42, 0.3) transparent; }

.testimonial-pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(36, 40, 42, 0.12);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  z-index: 2;
  padding: 0;
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.testimonial-pijl:hover { background: var(--blue-soft); color: var(--blue); transform: translateY(-50%) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .testimonial-pijl:hover { transform: translateY(-50%); } }
.testimonial-pijl-links { left: -14px; }
.testimonial-pijl-rechts { right: -14px; }
.testimonial-pijl { display: none; }
.testimonial-scroller.kan-scrollen .testimonial-pijl { display: flex; }
@media (max-width: 720px) { .testimonial-pijl { display: none !important; } }

.testimonial {
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.4rem 1.3rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
}
@media (max-width: 600px) { .testimonial { width: 82vw; } }
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
@media (prefers-reduced-motion: reduce) { .testimonial:hover { transform: none; } }
.testimonial::before {
  content: "\201C";
  position: absolute; top: -0.3rem; right: 0.7rem;
  font-family: "Poppins", serif;
  font-size: 4rem; font-weight: 700; line-height: 1;
  color: var(--blue-soft);
  z-index: 0;
}
.blok.teal .testimonial::before { color: rgba(36, 40, 42, 0.08); }
.testimonial p, .testimonial cite, .testimonial-sterren { position: relative; z-index: 1; }

/* ---------- zwevende WhatsApp-knop ---------- */
.whatsapp-knop {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 58px; height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(15, 20, 30, 0.45);
  z-index: 80;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.whatsapp-knop svg { width: 29px; height: 29px; display: block; }
.whatsapp-knop:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px -8px rgba(15, 20, 30, 0.5); }
@media (prefers-reduced-motion: reduce) { .whatsapp-knop:hover { transform: none; } }
@media (max-width: 600px) {
  .whatsapp-knop { right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
  .whatsapp-knop svg { width: 26px; height: 26px; }
}
.testimonial-sterren { display: block; color: #f5a623; font-size: 0.95rem; letter-spacing: 0.14em; margin-bottom: 0.55rem; }
.testimonial p { font-size: 0.94rem; margin: 0 0 0.7rem; color: var(--ink); }
.testimonial cite { font-style: normal; font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- certificeringen ---------- */

.cert-strip {
  display: flex; flex-wrap: wrap; gap: 2.2rem; align-items: center; justify-content: center;
}
.cert-strip img { height: 34px; width: auto; opacity: 0.92; }

/* ---------- vacature kaarten ---------- */

.vacatures-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) { .vacatures-layout { grid-template-columns: 1fr; } }

.filter-paneel {
  background: var(--card);
  border-radius: var(--radius-m);
  padding: 1.4rem;
  position: sticky;
  top: 100px;
}
.filter-groep { margin-bottom: 1.4rem; }
.filter-groep h4 { margin-bottom: 0.6rem; font-size: 0.92rem; }
.filter-optie {
  display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem;
  color: var(--ink-soft); margin-bottom: 0.45rem; cursor: pointer;
}
.filter-optie input { accent-color: var(--blue); width: 16px; height: 16px; }
.filter-optie { transition: color 0.18s ease; }
.filter-optie:hover { color: var(--ink); }

.vacature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
@media (max-width: 1020px) { .vacature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vacature-grid { grid-template-columns: 1fr; } }

.vacature-kaart {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
/* Dun kleurverloop bovenaan de kaart -- een subtiele merkaccent in plaats
   van een platte witte kaart. */
.vacature-kaart::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  opacity: 0; transition: opacity 0.22s var(--ease);
}
.vacature-kaart:hover {
  border-color: rgba(61, 110, 212, 0.35);
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -22px rgba(61, 110, 212, 0.35);
}
.vacature-kaart:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vacature-kaart:hover { transform: none; } }

.vacature-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.vacature-kaart h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; letter-spacing: -0.01em; }
.vacature-kaart-pijl {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.vacature-kaart:hover .vacature-kaart-pijl { background: var(--blue); color: var(--on-color); transform: translateX(2px) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .vacature-kaart:hover .vacature-kaart-pijl { transform: none; } }

/* "Nieuw"-label -- alleen getoond bij recent geplaatste vacatures, dus het
   betekent ook echt iets in plaats van decoratie te zijn. */
.vacature-nieuw-label {
  position: absolute; top: 1.1rem; right: -2.15rem;
  transform: rotate(38deg);
  background: var(--teal); color: var(--on-color);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.22rem 2.4rem; box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.vacature-locatie {
  font-size: 0.88rem; color: var(--ink-soft); font-weight: 500;
  display: flex; align-items: center; gap: 0.4rem;
}
.vacature-locatie svg { flex-shrink: 0; opacity: 0.8; color: var(--blue); }
.vacature-samenvatting {
  font-size: 0.92rem; color: var(--ink-soft); margin: 0;
  /* Houdt kaarten in een rij even hoog ook als een samenvatting lang is. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vacature-tags {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto;
  padding-top: 0.9rem; border-top: 1px solid var(--line);
}

.tag {
  font-size: 0.76rem; font-weight: 600; padding: 0.3rem 0.7rem;
  border-radius: 999px; background: rgba(121, 198, 193, 0.16); color: var(--teal-dark);
  white-space: nowrap;
}
.tag.tag-accent { background: var(--blue-soft); color: var(--blue-dark); }

.resultaten-balk {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.3rem; gap: 1rem; flex-wrap: wrap;
}
.resultaten-balk form { display: flex; gap: 0.6rem; align-items: center; }

select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
  font-family: inherit; font-size: 0.95rem; padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink); width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3.5px var(--blue-soft); outline: none; }

.zoekveld { display: flex; gap: 0.5rem; }
.zoekveld input { flex: 1 1 auto; min-width: 0; }
.zoekveld .btn { flex: 0 0 auto; }

.filter-topbalk { display: flex; gap: 0.6rem; align-items: stretch; }
.filter-topbalk .zoekveld { flex: 1 1 auto; }

.filter-toggle-knop {
  display: none; /* alleen zichtbaar op mobiel, zie media query hieronder */
  flex: 0 0 auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink);
  cursor: pointer; position: relative; padding: 0;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.filter-toggle-knop:hover { border-color: var(--blue); color: var(--blue); }
.filter-toggle-knop.heeft-filters::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); border: 1.5px solid var(--paper);
}

/* Op mobiel: alleen de zoekbalk + filterknop staan meteen open, de rest
   van de filters (regio, dienstverband, opleiding, sortering) klapt pas
   open zodra je op de filterknop tikt -- zo zie je meteen de vacatures
   in plaats van eerst een lange filterlijst te moeten scrollen. */
@media (max-width: 860px) {
  .filter-toggle-knop { display: inline-flex; }
  .filter-extra { display: none; }
  .filter-extra.open { display: block; margin-top: 1.3rem; }
}

.leeg-resultaat {
  padding: 3rem 1rem; text-align: center; color: var(--ink-soft);
  border: 1.5px dashed var(--line); border-radius: var(--radius-m);
}

.paginering { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; }
.paginering a, .paginering span {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink);
  font-size: 0.9rem; font-weight: 600;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.paginering a:hover { border-color: var(--blue); color: var(--blue); }
.paginering .actief { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- vacature detail ---------- */

.vacature-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; justify-content: center; }
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; padding-top: 3rem; padding-bottom: 3rem; }
/* Behoudt witregels die een recruiter in de omschrijving typt (textarea in het
   beheerscherm) -- zonder dit worden alinea's in de tekst plat getrokken. */
.detail-grid > div > p { white-space: pre-line; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-zijbalk {
  background: var(--card); border-radius: var(--radius-m); padding: 1.6rem;
  height: fit-content; position: sticky; top: 100px;
}
.detail-zijbalk dl { margin: 0; }
.detail-zijbalk dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-top: 1rem; }
.detail-zijbalk dt:first-child { margin-top: 0; }
.detail-zijbalk dd { margin: 0.15rem 0 0; font-weight: 600; }
.detail-zijbalk .btn { width: 100%; justify-content: center; margin-top: 1.5rem; }

/* ---------- footer ---------- */

.site-footer { background: var(--teal); color: rgba(255,255,255,0.9); padding: 3.5rem 0 2rem; }
.site-footer a { color: rgba(255,255,255,0.9); transition: color 0.18s ease; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.9rem; color: rgba(255,255,255,0.65); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.55rem; }
.footer-grid a { text-decoration: none; font-size: 0.93rem; }
.footer-logo img { height: 26px; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.25);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  font-size: 0.85rem; color: rgba(255,255,255,0.75);
}
.footer-bottom img { transition: opacity 0.18s ease; }
.footer-bottom img:hover { opacity: 1 !important; }

/* Kleine, losstaande toegang tot het beheer -- alleen voor recruiters, dus
   bewust een subtiel icoontje onderaan in plaats van een tekstlink tussen
   de klantgerichte footerlinks. */
.footer-beheer-link {
  display: inline-flex; align-items: center;
  margin-left: 1.1rem; padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.7);
  transition: color 0.18s ease;
}
.footer-beheer-link:hover { color: #fff; }
/* De hover-achtergrond staat op een los binnen-icoontje (vaste 30x30px-cirkel,
   geen padding/border erin) zodat hij altijd een nette cirkel blijft -- op de
   link zelf zou de padding-left het rond ipv een cirkel maken. */
.footer-beheer-icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  transition: background 0.18s ease;
}
.footer-beheer-link:hover .footer-beheer-icoon { background: rgba(255,255,255,0.14); }

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info-kaart { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info-icoon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-item h3 { font-size: 0.98rem; margin: 0 0 0.25rem; }
.contact-info-item p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); }
.contact-info-item a { color: var(--ink); text-decoration: none; }
.contact-info-item a:hover { color: var(--blue); }
.contact-map {
  margin-top: 0.3rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.contact-map iframe { display: block; width: 100%; height: 260px; border: 0; }
.veld { margin-bottom: 1.2rem; }
.veld label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.veld-hint { margin: -0.2rem 0 0.5rem; font-size: 0.82rem; color: var(--ink-soft); }

/* Live vetweergave: je typt rechtstreeks in een veld dat zijn eigen inhoud
   toont, inclusief **dubbele sterretjes** als dikgedrukte tekst -- er is
   maar één versie van de tekst (geen los, onzichtbaar tekstveld met een
   aparte zichtbare kopie erachter die net even anders kan teruglopen), dus
   er is niets om uit de pas mee te lopen: klikken belandt altijd op de
   juiste plek en de tekst past altijd precies in het vak.
   Zonder JS krijgt .vet-live-actief nooit toegevoegd en blijft het
   oorspronkelijke, verborgen tekstveld gewoon zichtbaar en bruikbaar. */
.vet-live { position: relative; }
.vet-live-editor {
  display: none;
  font-family: inherit; font-size: 0.95rem; line-height: 1.6;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--paper); color: var(--ink);
  width: 100%; box-sizing: border-box;
  white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.vet-live-editor:focus { border-color: var(--blue); box-shadow: 0 0 0 3.5px var(--blue-soft); outline: none; }
.vet-live-editor:empty::before { content: attr(data-placeholder); color: var(--ink-soft); }
.vet-live-editor[data-vet-live-meerdere-regels] {
  white-space: pre-wrap; overflow-wrap: break-word;
  overflow-x: hidden; overflow-y: auto;
}
.vet-live-editor--groot { min-height: 9.5rem; }
.vet-live-editor--klein { min-height: 4.8rem; }
.vet-live-editor strong { font-weight: 700; }
.vet-live-editor .vet-teken { color: var(--ink-soft); }

.vet-live-actief > input,
.vet-live-actief > textarea { display: none; }
.vet-live-actief > .vet-live-editor { display: block; }

.veld-fout { color: #a3403a; font-size: 0.85rem; margin-top: 0.3rem; }
/* Honeypot-veld voor spambescherming (contact-/sollicitatieformulier): met
   opzet NIET display:none of visibility:hidden -- sommige spambots slaan
   zulke velden juist over, terwijl ze een veld dat gewoon "aanwezig" is maar
   buiten beeld staat vaak nog wel invullen. Voor mensen (en schermlezers,
   dankzij aria-hidden) is het onzichtbaar en niet met Tab te bereiken. */
.hp-veld { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding-succes {
  background: var(--blue-soft); border-radius: var(--radius-m);
  padding: 1rem 1.3rem; margin-bottom: 1.5rem; color: var(--blue-dark);
}

/* ---------- 404/500 ---------- */
.foutpagina { padding-top: 6rem; padding-bottom: 6rem; text-align: center; }

/* ================================================================
   /beheer -- backend UI (functioneel, data-dicht)
   ================================================================ */

.beheer-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 800px) { .beheer-layout { grid-template-columns: 1fr; } }

.beheer-sidebar {
  background: var(--ink); color: #fff; padding: 1.6rem 1.2rem;
  display: flex; flex-direction: column;
}
.beheer-sidebar .logo-text { color: #fff; }
.beheer-sidebar-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.beheer-menu-knop {
  display: none; flex-shrink: 0; width: 38px; height: 38px; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.3); border-radius: var(--radius-s); background: none; color: #fff; cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.beheer-menu-knop:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }
.beheer-sidebar-inhoud { display: flex; flex-direction: column; flex: 1; }
.beheer-nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; margin-top: 1.5rem; }
.beheer-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  color: rgba(255,255,255,0.8); text-decoration: none;
  padding: 0.65rem 0.8rem; border-radius: var(--radius-s); font-size: 0.94rem; font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.beheer-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.beheer-nav a.actief { background: var(--blue); color: #fff; }
/* Groepslabel boven "Contactberichten"/"Sollicitaties" -- maakt in de
   zijbalk zelf al duidelijk dat dit twee verschillende soorten berichten
   zijn, in plaats van één ononderscheiden lijstje. */
.beheer-nav-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  color: rgba(255,255,255,0.4); padding: 0.9rem 0.8rem 0.15rem;
}
.beheer-nav-badge {
  background: var(--teal); color: #fff; font-size: 0.74rem; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 0.4rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.beheer-nav a.actief .beheer-nav-badge { background: rgba(255,255,255,0.3); }
.beheer-gebruiker { font-size: 0.82rem; color: rgba(255,255,255,0.55); padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.15); }

.beheer-main { padding: 2.2rem 2.6rem 4rem; max-width: 1440px; min-width: 0; }

@media (max-width: 800px) {
  .beheer-main { padding: 1.3rem; min-width: 0; }

  /* Sidebar wordt een smalle balk met logo + menuknop -- de inhoud
     (navigatielinks + gebruiker/uitloggen) klapt pas open na een tik,
     zodat de pagina op mobiel meteen met de eigenlijke inhoud begint. */
  .beheer-sidebar { padding: 1rem 1.2rem; }
  .beheer-menu-knop { display: inline-flex; }
  .beheer-sidebar-inhoud { display: none; margin-top: 1.2rem; }
  .beheer-sidebar-inhoud.open { display: flex; }
}

.beheer-kop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap; }

.kpi-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 2.5rem; }
@media (max-width: 900px) { .kpi-rij { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .kpi-rij { grid-template-columns: 1fr; } }
.kpi-kaart { background: var(--card); border-radius: var(--radius-m); padding: 1.4rem; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.kpi-kaart:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
@media (prefers-reduced-motion: reduce) { .kpi-kaart:hover { transform: none; } }
.kpi-getal { font-family: "Poppins", sans-serif; font-size: 2.1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue); }
.kpi-label { font-size: 0.85rem; color: var(--ink-soft); }

.data-tabel-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); }
table.data-tabel { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data-tabel th {
  text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data-tabel td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data-tabel tr:last-child td { border-bottom: none; }
table.data-tabel td.nowrap { white-space: nowrap; }
table.data-tabel td.tekst-afgekapt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data-tabel .btn { white-space: nowrap; }
table.data-tabel form { display: inline-flex; }
table.data-tabel th.kolom-selectie, table.data-tabel td.kolom-selectie { width: 2.6rem; text-align: center; padding-right: 0; }
table.data-tabel input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--blue); }

.bulk-balk {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--blue-soft); border: 1px solid var(--blue); border-radius: var(--radius-m);
  padding: 0.7rem 1.1rem; margin-bottom: 1.1rem;
}
/* Zonder deze regel wint onze eigen "display: flex" hierboven het van de
   ingebouwde browserregel voor het hidden-attribuut, waardoor de balk altijd
   in beeld zou blijven staan -- ook als er niets geselecteerd is. */
.bulk-balk[hidden] { display: none; }
.bulk-balk span { font-size: 0.88rem; font-weight: 700; color: var(--blue-dark); }

/* Klikbare rijen (contactberichten/sollicitaties) -- de hele rij is te
   klikken om het volledige bericht te openen, met een duidelijke hover
   zodat dat ook zichtbaar is. */
table.data-tabel tbody tr[data-href] { cursor: pointer; transition: background-color 0.14s ease; }
table.data-tabel tbody tr[data-href]:hover { background: var(--blue-soft); }
table.data-tabel tbody tr[data-href]:hover td { border-color: rgba(61, 110, 212, 0.18); }
.rij-titel-link { color: var(--ink); text-decoration: none; font-weight: 600; }
table.data-tabel tbody tr[data-href]:hover .rij-titel-link { color: var(--blue-dark); }

.pil { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.pil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pil-live { background: #e3f3f1; color: #2f8078; }
.pil-concept { background: #fdf0d9; color: #a4720f; }
.pil-ongelezen { background: var(--blue-soft); color: var(--blue-dark); }
.pil-gelezen { background: var(--card); color: var(--ink-soft); }

/* ---------- beheer detailpagina (bericht / sollicitatie) ---------- */

.beheer-terug {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem;
  color: var(--ink-soft); text-decoration: none; margin-bottom: 1.4rem;
}
.beheer-terug:hover { color: var(--blue); }
.beheer-detail { max-width: 740px; }
.beheer-detail-kaart {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 2rem 2.2rem;
}
.beheer-detail-velden {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.3rem;
  margin: 0 0 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line);
}
.beheer-detail-velden > div { min-width: 0; }
.beheer-detail-velden dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 0.25rem; }
.beheer-detail-velden dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.beheer-detail-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 0.6rem; }
/* overflow-wrap breekt ook een enkel, heel lang woord zonder spaties af (bv.
   een geplakte lange tekst zonder witruimte), zodat die de kaart niet breder
   duwt dan de pagina -- white-space: pre-line respecteert nog steeds de
   eigen regeleindes uit het bericht. */
.beheer-detail-tekst { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.7; font-size: 1rem; }
.beheer-detail-acties { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; }

.rij-acties { display: flex; gap: 0.5rem; }
.rij-acties form { display: inline; }

.form-kaart { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 2rem; max-width: 760px; }
.form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 600px) { .form-rij { grid-template-columns: 1fr; } }
.checkbox-groep { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.checkbox-chip {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem;
  border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.88rem; cursor: pointer;
  transition: border-color 0.18s ease;
}
.checkbox-chip:hover { border-color: var(--blue); }
.checkbox-chip input { accent-color: var(--blue); }
.form-acties { display: flex; gap: 0.8rem; margin-top: 1.6rem; align-items: center; }

.flash-lijst { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.flash {
  padding: 0.85rem 1.1rem; border-radius: var(--radius-s); font-size: 0.92rem;
  border: 1px solid var(--line); background: var(--card);
}
.flash.succes { border-color: var(--teal); background: #eef8f7; }
.flash.fout { border-color: #a3403a; background: #fbe3e0; color: #a3403a; }

.login-scherm {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem;
  background: var(--blue);
}
.login-kaart { background: var(--paper); border-radius: var(--radius-l); padding: 2.6rem; width: 100%; max-width: 400px; box-shadow: var(--shadow-card); }
.login-kaart .logo { display: flex; margin-bottom: 1.8rem; }

.helptekst { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.35rem; }