/* === LEZA LITE === */
/* Merk & Bootstrap primary */
:root{
  --bs-primary:#f97e01;
  --bs-primary-rgb:249,126,1;
  --leza-radius:16px;
}

/* Glass card */
.glass{
  background:rgba(255,255,255,.65);
  backdrop-filter:saturate(1.25) blur(14px);
  -webkit-backdrop-filter:saturate(1.25) blur(14px);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--leza-radius);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Buttons netjes rond */
.btn{ border-radius:14px; }

/* Segmented view-knoppen */
.segmented{
  display:inline-flex; gap:.4rem; padding:.35rem;
  border:1px solid rgba(0,0,0,.08); border-radius:12px;
  backdrop-filter:blur(10px);
}
.segmented .seg-btn{
  border:0; border-radius:10px; padding:.45rem .85rem; font-weight:600;
}
.segmented .seg-btn.active{ background:var(--bs-primary); color:#fff; }

/* ORANJE GLASS PAGINATION */
.pagination.fx-pager{ gap:.4rem; }
.pagination.fx-pager .page-item{ display:inline-flex; }
.pagination.fx-pager .page-link{
  min-width:2.25rem; height:2.25rem; padding:0 .8rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid rgba(0,0,0,.12);
  background:radial-gradient(800px 300px at 50% -20%, rgba(0,0,0,.03), transparent), rgba(255,255,255,.7);
  backdrop-filter:blur(6px);
  transition:transform .12s ease, box-shadow .12s ease;
}
.pagination.fx-pager .page-link:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.pagination.fx-pager .page-item.active .page-link{
  background:color-mix(in oklab, var(--bs-primary) 92%, white 8%);
  color:#fff; border-color:color-mix(in oklab, var(--bs-primary), black 20%);
  box-shadow:0 4px 14px color-mix(in oklab, var(--bs-primary), black 30%);
}
.pagination.fx-pager .page-item.disabled .page-link{ opacity:.45; cursor:not-allowed; }

/* ★ Favoriet blijft klikbaar naast stretched-link */
.grid-card{ position:relative; }
.grid-card .stretched-link::after{ z-index:1; }
.grid-card .star, .grid-card .card-footer .btn, .grid-card header .btn{
  position:relative; z-index:2;
}
/* ---------- ROOT TOKENS ---------- */
:root {
  /* Brand */
  --leza-orange: #F26722;
  --leza-grey: #6B7280;
  --leza-navy: #0F2A4A;
  --leza-success: #22C55E;
  --leza-danger: #EF4444;

  /* Bootstrap variables override */
  --bs-primary: #f97e01;                /* Leza oranje */
  --bs-primary-rgb: 249, 126, 1;
  --bs-secondary: var(--leza-grey);
  --bs-success: var(--leza-success);
  --bs-danger: var(--leza-danger);
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: color-mix(in oklab, var(--bs-link-color), black 15%);
  --bs-link-decoration: none;

  /* Elevation & motion */
  --leza-radius: 16px;
  --leza-radius-lg: 24px;
  --leza-radius-pill: 9999px;
  --leza-shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --leza-shadow-md: 0 14px 32px rgba(0,0,0,.10);
  --leza-shadow-lg: 0 26px 60px rgba(0,0,0,.14);
  --leza-anim: 180ms cubic-bezier(.2,.8,.2,1);

  /* Glass layer */
  --glass-tint: 220 20% 97%;
  --glass-stroke: 220 18% 85%;
  --glass-alpha: .55;
  --glass-blur: 16px;
  --glass-saturate: 1.35;

  /* Light surfaces */
  --surface-0: #f7f8fa;
  --surface-1: rgba(255,255,255,.65);
  --surface-2: rgba(255,255,255,.42);

  --text-1: #111827;
  --text-2: #4b5563;

  /* Focus ring */
  --bs-focus-ring-color: color-mix(in oklab, var(--bs-primary), white 30%);
}



/* ---------- BASE ---------- */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(249,126,1,.08), transparent 40%),
    radial-gradient(1200px 800px at 100% 10%, rgba(15,42,74,.14), transparent 45%),
    var(--surface-0);
  color: var(--text-1);
}

/* Links nooit onderlijnd */
a, a:hover, a:focus, a:active, .btn-link { text-decoration: none !important; }

/* ---------- GLASS PRIMITIVES ---------- */
.glass {
  position: relative;
  background: var(--surface-1);
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  border: 1px solid hsl(var(--glass-stroke) / .35);
  border-radius: var(--leza-radius);
  box-shadow: var(--leza-shadow-sm);
}
.glass.toolbar { background: var(--surface-2); border-radius: 18px; }
.glass.elev-2 { box-shadow: var(--leza-shadow-md); }
.glass.elev-3 { box-shadow: var(--leza-shadow-lg); }

/* Subtiele inner highlight */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0));
}

/* ---------- BUTTONS (Bootstrap-aware) ---------- */
.btn {
  border-radius: calc(var(--leza-radius) - 4px);
  transition: transform var(--leza-anim), box-shadow var(--leza-anim),
              background-color var(--leza-anim), border-color var(--leza-anim), color var(--leza-anim);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--leza-shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,.06) inset; }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-primary:hover {
  background: color-mix(in oklab, var(--bs-primary), black 10%);
  border-color: color-mix(in oklab, var(--bs-primary), black 12%);
}
.btn-primary:active {
  background: color-mix(in oklab, var(--bs-primary), black 18%);
  border-color: color-mix(in oklab, var(--bs-primary), black 20%);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--leza-success);
  --bs-btn-border-color: var(--leza-success);
  --bs-btn-focus-shadow-rgb: 34,197,94;
}
.btn-success:hover { background: color-mix(in oklab, var(--leza-success), black 10%); }

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--leza-danger);
  --bs-btn-border-color: var(--leza-danger);
  --bs-btn-focus-shadow-rgb: 239,68,68;
}
.btn-danger:hover { background: color-mix(in oklab, var(--leza-danger), black 10%); }

.btn-outline-success {
  --bs-btn-color: var(--leza-success);
  --bs-btn-border-color: var(--leza-success);
  --bs-btn-hover-bg: var(--leza-success);
  --bs-btn-hover-border-color: var(--leza-success);
  --bs-btn-hover-color: #fff;
}
.btn-outline-danger {
  --bs-btn-color: var(--leza-danger);
  --bs-btn-border-color: var(--leza-danger);
  --bs-btn-hover-bg: var(--leza-danger);
  --bs-btn-hover-border-color: var(--leza-danger);
  --bs-btn-hover-color: #fff;
}

/* Ghost / Pill */
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-1); }
.btn-ghost:hover { background: color-mix(in oklab, var(--bs-primary), white 92%); }
.btn-pill { border-radius: var(--leza-radius-pill) !important; padding-inline: 1rem; }

/* Filter pills (outline-secondary → oranje) */
.filter-btn.btn-outline-secondary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--bs-primary);
  text-decoration: none;
}
.filter-btn.active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}

/* Segmented control (macOS) + view switches */
.segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 12px;
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--glass-stroke) / .45);
}
.segmented .seg-btn {
  padding: .45rem .85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  transition: background var(--leza-anim), color var(--leza-anim), transform var(--leza-anim);
}
.segmented .seg-btn:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--bs-primary), white 92%); }
.view-btns .seg-btn.active,
.segmented .seg-btn.active { color: #fff; background: var(--bs-primary); }

/* ---------- FORMS ---------- */
.form-control, .form-select {
  background: var(--surface-1);
  border: 1px solid hsl(var(--glass-stroke)/.45);
  border-radius: var(--leza-radius);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: border-color var(--leza-anim), box-shadow var(--leza-anim);
}
.form-control:focus, .form-select:focus {
  border-color: color-mix(in oklab, var(--bs-primary), white 15%);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}

.form-check-label { cursor: pointer; }
.form-check-input:checked ~ .form-check-label { font-weight: 500; }

/* Module checkboxes container */
.module-checkboxes {
  max-height: 200px;
  overflow-y: auto;
  padding: .5rem 0;
  border-radius: .375rem;
  border: 1px solid #dee2e6;
  background-color: white;
}
.module-checkbox-item {
  padding: .375rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.module-checkbox-item:hover { background-color: #f8f9fa; }

/* ---------- CARDS / PANELS ---------- */
.card {
  position: relative;
  border: none;
  border-radius: var(--leza-radius-lg);
  box-shadow: var(--leza-shadow-sm);
  overflow: hidden;
  transition: transform var(--leza-anim), box-shadow var(--leza-anim);
}
.card.glass { background: var(--surface-1); }
.card:hover { transform: translateY(-2px); box-shadow: var(--leza-shadow-md); }
.card-header, .card-footer { background: transparent; border: 0; }

/* Hover accent voor grid cards */
.kb-card-hover:hover .card {
  box-shadow: var(--leza-shadow-md);
  border-color: rgba(0,0,0,.08);
}

/* ---------- LAYOUT HELPERS ---------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  padding: 1rem;
  background: var(--surface-2);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--glass-stroke)/.45);
}
.main-content { min-height: 100vh; padding-top: 1rem; }

/* Pills/filters clusters */
.pill-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-group .btn { padding: .375rem .75rem; }

/* Categorie/Module pill varianten */
.btn-cat    { border-color: var(--bs-secondary); }
.btn-cat:not(.active) { color: var(--bs-secondary); }
.btn-mod    { border-color: var(--bs-info); }
.btn-mod:not(.active) { color: var(--bs-info); }
.btn-cat.active { background: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.btn-mod.active { background: var(--bs-info);      border-color: var(--bs-info);      color: #fff; }

/* ---------- TABLE ---------- */
.table-shell { overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid hsl(var(--glass-stroke)/.35);
  color: var(--text-2);
}
.table th {
  text-align: left;
  color: var(--text-1);
  font-weight: 700;
  white-space: nowrap;
}
#list-view .list-item { border-bottom: 1px solid #e9ecef; padding: .75rem 0; }
.table tr:hover { background: color-mix(in oklab, var(--bs-primary), white 96%); }

/* ---------- SEARCH ---------- */
.search {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid #e9ecef; border-radius: var(--leza-radius);
  padding: .45rem .7rem; box-shadow: var(--leza-shadow-sm);
}
.search input { border: 0; outline: none; width: 100%; }
.search:focus-within { box-shadow: 0 0 0 4px color-mix(in oklab, var(--bs-primary), white 70%); border-color: color-mix(in oklab, var(--bs-primary), black 15%); }

/* ---------- UTILITIES ---------- */
.kb-clickable { cursor: pointer; }
.kb-hover:hover { background-color: rgba(0,0,0,.03); }

.elevate-1 { box-shadow: var(--leza-shadow-sm) !important; }
.elevate-2 { box-shadow: var(--leza-shadow-md) !important; }
.elevate-3 { box-shadow: var(--leza-shadow-lg) !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .sidebar {
    border: 1px solid hsl(var(--glass-stroke)/.45);
    min-height: auto;
  }
  .sidebar h5 { text-align: center; }
  .filter-buttons { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
/* --- Weergave-toolbar alignment fix --- */
.weergave-toolbar{
  display: grid;
  grid-template-columns: auto 1fr auto; /* label | segment | Nieuw */
  align-items: center;
  gap: .75rem;
}

/* Segment mag naar de linkerkant uitlijnen en krimpen naar inhoud */
.weergave-toolbar .segmented{
  justify-self: start;
  /* haal volle breedte weg als je die ergens had staan */
  width: auto;
}

/* Zorg dat de “Nieuw” knop visueel op 1 lijn staat */
.weergave-toolbar .btn{
  margin-left: .25rem;
}

/* Kleinere schermen: label boven segment, knop rechts */
@media (max-width: 576px){
  .weergave-toolbar{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label   nieuw"
      "segment nieuw";
  }
  .weergave-toolbar .form-label{ grid-area: label; }
  .weergave-toolbar .segmented { grid-area: segment; }
  .weergave-toolbar .btn       { grid-area: nieuw; }
}
/* ====== Professionele polish voor main ====== */
.kb-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-bottom: 1rem;
}
.toolbar-card {
  border-radius: 18px;
  padding: .75rem 1rem;
  border: 1px solid hsl(var(--glass-stroke, 220 18% 85%) / .45);
}
.kb-toolbar__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 1rem;
  align-items: center;
}
.kb-toolbar__controls {
  display: inline-grid;
  grid-auto-flow: column;
  gap: .75rem 1rem;
  align-items: end;
}
.kb-toolbar__controls .form-group { display: grid; gap: .25rem; min-width: 220px; }
.kb-toolbar__actions {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.kb-toolbar .divider {
  width: 1px; height: 28px;
  background: hsl(var(--glass-stroke, 220 18% 85%) / .55);
  border-radius: 2px;
}
.view-section { scroll-margin-top: 84px; } /* fijn bij ankers */

/* Table: sticky header en nette scheiding */
.table-head-sticky th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-1, rgba(255,255,255,.65));
  backdrop-filter: blur(8px);
}
.table-shell { border-radius: 14px; overflow: hidden; }

/* Grid cards: subtiele balans in spacing */
.card-header + .card-body { padding-top: .5rem; }
.card-footer { padding-top: 0; }

/* Formulariseringen in toolbar wat compacter */
.kb-toolbar .form-select { max-width: 220px; }
@media (max-width: 768px){
  .kb-toolbar__row { grid-template-columns: 1fr; }
  .kb-toolbar__actions { justify-content: space-between; }
  .kb-toolbar .form-select { max-width: 100%; }
}
/* ===== LEZA Orange Glass Pagination ===== */
.pagination.fx-pager {
  --fx-accent: var(--bs-primary, #f97e01);
  --fx-bg: color-mix(in oklab, white 92%, var(--fx-accent) 0%);
  --fx-stroke: color-mix(in oklab, #000, white 70%);
  --fx-text: #374151;
  --fx-text-muted: #6b7280;
  --fx-blur: blur(6px);
  gap: .4rem;
}


/* reset tight layout */
.pagination.fx-pager .page-item { display: inline-flex; }

/* pill buttons with glass */
.pagination.fx-pager .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .8rem;
  border-radius: 999px;
  border: 1px solid var(--fx-stroke);
  background:
    radial-gradient(800px 300px at 50% -20%, rgba(0,0,0,.03), transparent),
    var(--fx-bg);
  backdrop-filter: var(--fx-blur);
  -webkit-backdrop-filter: var(--fx-blur);
  color: var(--fx-text);
  box-shadow:
    0 0 0 0 rgba(0,0,0,0),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

/* hover lift */
.pagination.fx-pager .page-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.35);
  text-decoration: none;
}

/* focus ring (oranje) */
.pagination.fx-pager .page-link:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--fx-accent), white 70%);
}

/* active = filled orange */
.pagination.fx-pager .page-item.active .page-link {
  background: color-mix(in oklab, var(--fx-accent) 92%, white 8%);
  color: #fff;
  border-color: color-mix(in oklab, var(--fx-accent), black 20%);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--fx-accent), black 30%);
}

/* disabled */
.pagination.fx-pager .page-item.disabled .page-link {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* compact op mobiel */
@media (max-width: 480px){
  .pagination.fx-pager .page-link{
    min-width: 2rem; height: 2rem; padding: 0 .6rem;
  }
}

/* optioneel: pijlen iets dikker */
.pagination.fx-pager .page-link:is(:first-child,:last-child) {
  font-weight: 600;
}
/* Zorg dat de stretched-link overlay achter interactieve UI blijft */
.grid-card { position: relative; }
.grid-card .stretched-link::after {
  z-index: 1;           /* overlay laag */
}

/* Interactieve elementen vóór de overlay */
.grid-card .star,
.grid-card .card-footer .btn,
.grid-card header .btn {
  position: relative;
  z-index: 2;           /* boven de overlay */
}

/* (optioneel) iets grotere klik-hitbox voor ster */
.grid-card .star { padding: .125rem .25rem; line-height: 1; }

/* ===== Sidebar – responsive polish ===== */

/* Groot: sticky card-gevoel; Klein: full-width, luchtig */
.sidebar{
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  padding: 1rem;
}
@media (max-width: 992px){
  .sidebar{
    position: static;
    height: auto;
    max-height: none;
    border-radius: 16px;
    padding: 12px;
  }
}

/* ---------- Weergave-toolbar (Grid / Lijst / Details + Nieuw) ---------- */
/* Zorg dat de segmented control nooit uit beeld klipt */
.weergave-toolbar .segmented{
  max-width: 100%;
  flex-wrap: wrap;
}
.weergave-toolbar .segmented .seg-btn{
  flex: 1 0 auto;                /* knoppen mogen ontover elkaar wrappen */
  min-width: 84px;               /* leesbare knopbreedte */
}
@media (max-width: 420px){
  /* extra zeker: horizontale scroll i.p.v. overflow */
  .weergave-toolbar .segmented{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* ---------- Zoeken / Alleen favorieten / Wissen ---------- */
/* Netjes stapelen en geen overlap van de switch-tekst */
.search-toolbar{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: .5rem;
}
.search-toolbar-actions{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .5rem;
}
.search-toolbar .form-check-label{ white-space: nowrap; }
.search-toolbar .form-check{ min-width: max-content; }

/* Fallback wanneer je de HTML niet aanpast en de oude d-flex laat staan */
.mb-3 > .d-flex.justify-content-between.align-items-center{
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.mb-3 > .d-flex .form-check.form-switch{ min-width: max-content; }

/* Search field blijft comfortabel en krijgt focus-ring uit je thema */
.search{
  width: 100%;
}

/* ---------- Actieve filters & Categorieën ---------- */
/* Chips/pills kunnen breken maar blijven mooi gecentreerd op mobiel */
#activeChips,
#categoryPills{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
@media (max-width: 768px){
  #categoryPills{ justify-content: center; }
}

/* ---------- Modules-lijst ---------- */
/* Iets hogere scrolbox op grote schermen, compacter op kleine */
.module-checkboxes{
  max-height: 280px;
}
@media (max-width: 576px){
  .module-checkboxes{ max-height: 220px; }
}

/* ---------- Kleine visuele verfijningen ---------- */
/* Labels uitlijnen en micro-spacing consistent */
.form-label{ font-weight: 600; }
.pill-group .btn,
#categoryPills .btn{ padding: .4rem .7rem; }

/* Zorg dat buttons en toggles nooit worden 'geplet' */
.btn, .form-check, .segmented{ min-height: 36px; }

/* Extra veiligheid: lange woorden knakken ipv overlappen */
.sidebar{ word-wrap: break-word; overflow-wrap: anywhere; }
/* ===== Layout variabelen ===== */
:root{
  --fsb-w: 360px;                     /* open breedte > desktop */
  --fsb-w-min: 300px;                 /* min bij kleinere desktops */
  --fsb-gap: 18px;
  --fsb-radius: 18px;
  --fsb-stroke: rgba(15,42,74,.14);
  --fsb-bg: rgba(255,255,255,.55);
  --fsb-shadow: 0 16px 40px rgba(15,42,74,.16);
  --fsb-muted: #6B7280; --fsb-title:#0F2A4A;
  --fsb-focus: 0 0 0 3px rgba(249,126,1,.28);
  --break-overlay: 1024px;            /* < dit is de breakpoint voor overlay */
}

/* ===== Grid layout: sidebar + main ===== */
.app{
  display:grid;
  grid-template-columns: var(--fsb-w) 1fr;   /* standaard open */
  gap: var(--fsb-gap);
  align-items: start;
}

/* gesloten stand: sidebar neemt geen ruimte; main schuift naar links */
.app[data-fsb-state="closed"]{
  grid-template-columns: 0 1fr;
}

/* --- overlay-modus (klein scherm): sidebar zweeft, main full-width --- */
@media (max-width: var(--break-overlay)){
  .app{
    grid-template-columns: 1fr;   /* main pakt alles */
    gap: 0;
  }
}

/* ===== Floating Glass Sidebar ===== */
.fsb{
  position: sticky;                 /* blijft binnen viewport scrollen */
  top: 14px;
  height: calc(100dvh - 28px);
  min-width: var(--fsb-w-min);
  width: var(--fsb-w);
  border-radius: var(--fsb-radius);
  border: 1px solid var(--fsb-stroke);
  background: var(--fsb-bg);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: var(--fsb-shadow);
  overflow: clip;
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.9,.34,1), opacity .3s ease, width .3s ease;
}

/* wanneer grid gesloten is, schuif panel visueel een tikje in (maar het zit in col 0px) */
.app[data-fsb-state="closed"] .fsb{
  transform: translateX(-16px) scale(.98);
  opacity: .0;
  pointer-events: none;
}

/* overlay op kleine schermen */
@media (max-width: var(--break-overlay)){
  .fsb{
    position: fixed;
    left: 14px; right: 14px; top: 14px; bottom: 14px;
    width: auto; height: auto;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 60;
  }
  .app[data-fsb-state="closed"] .fsb{
    transform: translateY(10px) scale(.98);
  }
}

/* Header vast, body scrolt */
.fsb-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px;
  background: linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,.35));
  border-bottom: 1px solid var(--fsb-stroke);
}
.fsb-brand{ margin:0; font-size:1rem; font-weight:800; letter-spacing:.2px; color:var(--fsb-title); }
.fsb-x{ border:0; background:transparent; padding:8px; border-radius:10px; cursor:pointer; }
.fsb-x:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }
.fsb-body{ padding: 14px; overflow:auto; height: 100%; }

/* ===== Rond “uitsparing”-tabsje met pijl ===== */
.fsb-notch{
  position: absolute;
  right: -24px;                     /* half buiten de rand */
  top: 42%;
  width: 48px; height: 48px;
  border-radius: 50%;
  display:grid; place-items:center;
  border: 1px solid var(--fsb-stroke);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 24px rgba(15,42,74,.18);
  cursor: pointer;
  z-index: 2;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fsb-notch:hover{ transform: translateX(2px); }
.fsb-notch:focus-visible{ outline: none; box-shadow: var(--fsb-focus); }

/* pijltje draait wanneer gesloten */
.app[data-fsb-state="closed"] .fsb-notch svg{ transform: rotate(180deg); transition: transform .3s ease; }

/* klein scherm: plaats notch rechtsboven voor bereikbaarheid */
@media (max-width: var(--break-overlay)){
  .fsb-notch{
    right: 14px; top: 18px;
    width: 40px; height: 40px;
  }
}

/* ===== Scrim voor overlay ===== */
.fsb-scrim{
  position: fixed; inset: 0;
  background: rgba(15,42,74,.32);
  backdrop-filter: blur(2px);
  z-index: 50;
}

/* ===== Main content ===== */
.app-main{
  min-height: 100dvh;
  padding: 16px;
  transition: padding .3s ease;
}

/* ===== Typo/controls reuse (verkorte variant) ===== */
.fsb-head{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.fsb-title{ margin:0; font-size:.95rem; font-weight:700; color:var(--fsb-title); }
.text-muted{ color: var(--fsb-muted); }

.segmented{ display:flex; gap:6px; flex-wrap:wrap; border:1px solid var(--fsb-stroke); border-radius:999px; padding:4px; background: rgba(255,255,255,.55); }
.seg-btn{ border:0; background:transparent; padding:8px 14px; border-radius:999px; font-weight:600; cursor:pointer; }
.seg-btn.is-active{ background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.seg-btn:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }
@media (max-width:420px){
  .segmented{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
  .seg-btn{ flex:0 0 auto; min-width:88px; text-align:center; }
}

.fsb-search{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--fsb-stroke); border-radius:12px; padding:10px; }
.fsb-input{ border:0; outline:0; width:100%; background:transparent; font-size:.95rem; }
.fsb-input:focus-visible{ outline:none; box-shadow: var(--fsb-focus); border-radius:6px; }

.fsb-chips,.fsb-pills{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:768px){ .fsb-pills{ justify-content:center; } }
.pill-btn{ border:1px solid var(--fsb-stroke); background:#fff; color:#111; border-radius:999px; padding:6px 12px; font-size:.9rem; cursor:pointer; transition:.08s ease; }
.pill-btn:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }
.pill-btn[aria-pressed="true"]{ background: rgba(249,126,1,.1); border-color: rgba(249,126,1,.35); }

.fsb-modules{ display:grid; gap:6px; max-height:280px; overflow:auto; padding-right:4px; border:1px solid var(--fsb-stroke); border-radius:12px; background:#fff; }
.fsb-mod-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.06); }
.fsb-mod-item:last-child{ border-bottom:0; }

.fsb-select{ width:100%; border:1px solid var(--fsb-stroke); border-radius:12px; padding:.6rem .75rem; background:#fff; }
.fsb-select:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .fsb, .fsb-notch, .seg-btn, .pill-btn{ transition:none !important; }
}
:root{
  --fsb-w: 360px;          /* desktop open breedte */
  --fsb-w-min: 300px;
  --fsb-gap: 18px;
  --fsb-radius: 18px;
  --fsb-stroke: rgba(15,42,74,.14);
  --fsb-bg: rgba(255,255,255,.55);
  --fsb-shadow: 0 16px 40px rgba(15,42,74,.16);
  --fsb-muted: #6B7280;
  --fsb-title:#0F2A4A;
  --fsb-focus: 0 0 0 3px rgba(249,126,1,.28);
  --break-overlay: 1024px; /* < deze breedte = overlay modus */
}

/* grid: sidebar + main */
.app{ display:grid; grid-template-columns: var(--fsb-w) 1fr; gap: var(--fsb-gap); align-items:start; width:100%; }
.app[data-fsb-state="closed"]{ grid-template-columns: 0 1fr; }
@media (max-width: var(--break-overlay)){ .app{ grid-template-columns: 1fr; gap:0; } }

/* sidebar */
.fsb{
  position: sticky; top:14px;
  height: calc(100dvh - 28px);
  min-width: var(--fsb-w-min);
  width: var(--fsb-w);
  border-radius: var(--fsb-radius);
  border: 1px solid var(--fsb-stroke);
  background: var(--fsb-bg);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: var(--fsb-shadow);
  overflow: clip;
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22,.9,.34,1), opacity .3s ease;
}
.app[data-fsb-state="closed"] .fsb{ transform: translateX(-16px) scale(.98); opacity: 0; pointer-events:none; }

/* overlay (mobiel/tablet) */
@media (max-width: var(--break-overlay)){
  .fsb{ position: fixed; left:14px; right:14px; top:14px; bottom:14px; width:auto; height:auto; z-index:60; opacity:1; transform:none; pointer-events:auto; }
  .app[data-fsb-state="closed"] .fsb{ transform: translateY(10px) scale(.98); opacity:0; pointer-events:none; }
}

/* header/body */
.fsb-bar{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background: linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,.35)); border-bottom:1px solid var(--fsb-stroke); }
.fsb-brand{ margin:0; font-size:1rem; font-weight:800; letter-spacing:.2px; color:var(--fsb-title); }
.fsb-x{ border:0; background:transparent; padding:8px; border-radius:10px; cursor:pointer; }
.fsb-x:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }
.fsb-body{ padding:14px; overflow:auto; height:100%; }

.fsb-block{ padding:8px 0 6px; }
.fsb-sep{ margin:10px 0; border:0; border-top:1px solid var(--fsb-stroke); }
.fsb-head{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.fsb-title{ margin:0; font-size:.95rem; font-weight:700; color:var(--fsb-title); }
.fsb-actions{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.text-muted{ color: var(--fsb-muted); }

/* dock-knop (altijd zichtbaar) */
.fsb-dock{
  position: fixed;
  left: calc(14px + var(--fsb-w) + var(--fsb-gap) - 24px); /* half over de rand wanneer open */
  top: 42%;
  width: 48px; height: 48px; border-radius: 50%;
  display:grid; place-items:center; cursor:pointer; z-index: 65;
  border:1px solid var(--fsb-stroke);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 24px rgba(15,42,74,.18);
  transition: left .45s cubic-bezier(.22,.9,.34,1), transform .25s ease, box-shadow .25s ease;
}
.app[data-fsb-state="closed"] .fsb-dock{ left: 14px; }  /* aan de rand */
.fsb-dock:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }
.app[data-fsb-state="closed"] .fsb-dock svg{ transform: rotate(180deg); transition: transform .3s ease; }

/* overlay: dock verplaatst naar rechtsboven */
@media (max-width: var(--break-overlay)){
  .fsb-dock{ right: 18px; left: auto; top: 18px; width: 44px; height: 44px; }
}

/* scrim */
.fsb-scrim{ position:fixed; inset:0; background: rgba(15,42,74,.32); backdrop-filter: blur(2px); z-index:55; }

/* main */
.app-main{ min-height:100dvh; padding:16px; width:100%; }

/* besturingen */
.segmented{ display:flex; gap:6px; flex-wrap:wrap; border:1px solid var(--fsb-stroke); border-radius:999px; padding:4px; background: rgba(255,255,255,.55); }
.seg-btn{ border:0; background:transparent; padding:8px 14px; border-radius:999px; font-weight:600; cursor:pointer; }
.seg-btn.is-active{ background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.seg-btn:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }
@media (max-width:420px){ .segmented{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; } .seg-btn{ flex:0 0 auto; min-width:88px; text-align:center; } }

.fsb-search{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--fsb-stroke); border-radius:12px; padding:10px; }
.fsb-input{ border:0; outline:0; width:100%; background:transparent; font-size:.95rem; }
.fsb-input:focus-visible{ outline:none; box-shadow: var(--fsb-focus); border-radius:6px; }

.fsb-chips,.fsb-pills{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:768px){ .fsb-pills{ justify-content:center; } }
.pill-btn{ border:1px solid var(--fsb-stroke); background:#fff; color:#111; border-radius:999px; padding:6px 12px; font-size:.9rem; cursor:pointer; transition:.08s ease; }
.pill-btn:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }
.pill-btn[aria-pressed="true"]{ background: rgba(249,126,1,.1); border-color: rgba(249,126,1,.35); }

/* modules */
.fsb-modules{ display:grid; gap:6px; max-height:280px; overflow:auto; padding-right:4px; border:1px solid var(--fsb-stroke); border-radius:12px; background:#fff; }
.fsb-mod-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.06); }
.fsb-mod-item:last-child{ border-bottom:0; }

/* select */
.fsb-select{ width:100%; border:1px solid var(--fsb-stroke); border-radius:12px; padding:.6rem .75rem; background:#fff; }
.fsb-select:focus-visible{ outline:none; box-shadow: var(--fsb-focus); }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .fsb, .fsb-dock, .seg-btn, .pill-btn{ transition:none !important; }
}

/* helper a11y */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Centraal uitlijnen segmented control (Weergave) */
.fsb .segmented{
  /* laat het kader de inhoud ‘huggen’ en centreer het binnen de sectie */
  width: max-content;
  margin-inline: auto;
  justify-content: center;
}

/* Telefoons: niet knellen, laat 'm desnoods volbreed met horizontale scroll */
@media (max-width: 420px){
  .fsb .segmented{
    width: 100%;
    margin-inline: 0;        /* neem volle breedte op klein scherm */
    justify-content: center; /* blijft visueel gecentreerd */
    overflow-x: auto;        /* bestaande scroll-gedrag */
    -webkit-overflow-scrolling: touch;
  }
  .fsb .segmented .seg-btn{
    flex: 0 0 auto;          /* knoppen behouden hun eigen breedte */
  }
}
/* Categorieën gecentreerd en strak */
#categoryPills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;            /* rij/kolom-gap */
  justify-content: center;   /* elke rij centreren */
  max-width: 720px;          /* 'hug' breedte voor een mooie kolom */
  margin-inline: auto;       /* midden in de sectie */
  padding-block: 4px;        /* klein beetje lucht */
}

/* optioneel: iets compacter pill-design */
#categoryPills .pill-btn{
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
}
/* Body scrolt en heeft extra ruimte onderin (voor ronde hoek / safe-area) */
.fsb .fsb-body{
  overflow: auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom) + 56px) !important;
  overscroll-behavior: contain;
  scroll-padding-bottom: 72px; /* bij focus/scroll blijft onderrand vrij */
}

/* Extra spacer voor browsers die padding-bottom ‘negeren’ bij momentum scroll */
.fsb .fsb-body::after{
  content:"";
  display:block;
  height: max(16px, env(safe-area-inset-bottom) + 12px);
}
/* 1) Firefox: dun + kleuren */
.fsb .fsb-body,
.fsb .fsb-modules{
  scrollbar-width: thin;                          /* Firefox */
  scrollbar-color: rgba(15,42,74,.35) transparent;/* thumb / track */
  scrollbar-gutter: stable both-edges;            /* geen layout shift */
}

/* 2) WebKit (Chrome/Edge/Safari): maat & stijl */
.fsb .fsb-body::-webkit-scrollbar,
.fsb .fsb-modules::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.fsb .fsb-body::-webkit-scrollbar-track,
.fsb .fsb-modules::-webkit-scrollbar-track{
  background: transparent;
}

.fsb .fsb-body::-webkit-scrollbar-thumb,
.fsb .fsb-modules::-webkit-scrollbar-thumb{
  background: rgba(15,42,74,.28);         /* duimkleur */
  border-radius: 999px;
  border: 3px solid transparent;          /* “air gap” */
  background-clip: padding-box;
}

.fsb .fsb-body::-webkit-scrollbar-thumb:hover,
.fsb .fsb-modules::-webkit-scrollbar-thumb:hover{
  background: rgba(15,42,74,.45);
}

/* 3) Zachte fade aan boven/onderkant van de scrollcontainer */
.fsb .fsb-body{
  /* laat inhoud subtiel in/uitfaden bij randen */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
/* =========================
   DESKTOP (≥1025px): GEEN interne scrollbar — pagina scrolt
========================= */
@media (min-width: 1025px){
  /* panel mag zo hoog worden als nodig; pagina scrolt mee */
  .fsb{
    height: auto !important;       /* i.p.v. calc(100dvh - ...) */
    overflow: visible !important;  /* geen clipping/scroll in het panel */
  }
  .fsb .fsb-body{
    overflow: visible !important;  /* content mag uitzetten */
    padding-bottom: 0 !important;  /* verwijder extra bodemruimte */
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  /* "Sticky laatste blok" uitschakelen op desktop */
  .fsb .fsb-block:last-of-type{
    position: static !important;
    background: transparent !important;
    border-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =========================
   MOBIEL/TABLET (<1025px): overlay blijft intern scrollen
   — maar zonder zichtbare scrollbar
========================= */
@media (max-width: 1024px){
  .fsb .fsb-body{
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* soepel iOS */
    padding-bottom: max(24px, env(safe-area-inset-bottom) + 56px);
    /* verberg scrollbar, maar behoud scroll */
    scrollbar-width: none;                 /* Firefox */
  }
  .fsb .fsb-body::-webkit-scrollbar{ width: 0; height: 0; } /* Chrome/Edge/Safari */

  /* sticky footer hieronder weer aan in overlay (zodat knoppen nooit wegvallen) */
  .fsb .fsb-block:last-of-type{
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,.75));
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--fsb-stroke);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}
/* Zorg dat de suggestiebox netjes ONDER de zoekbalk valt */
form[autocomplete="off"] {
  position: relative;
  z-index: 1; /* zoekbalk blijft onder de dropdown */
}

.kb-suggest {
  position: absolute;
  top: calc(100% + 6px);  /* ietsje ruimte onder inputveld */
  left: 0;
  right: 0;
  z-index: 10;            /* boven andere content */
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  overflow: hidden;
}
.kb-suggest.show {
  display: block;
}
.kb-suggest:not(.show) {
  display: none;
}

/* optioneel: subtiel schaduw en hover accent */
.kb-suggest .dropdown-item:hover {
  background-color: rgba(249,126,1,.08);
}
/* ====== LEZA HEADER + ZOEKVELD INTEGRATIE ====== */

/* Bovenbalk */
#leza-header {
  background: linear-gradient(180deg, #0a1018, #1a2430);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Layout container */
#leza-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 2rem;
  gap: 1.5rem;
}

/* Logo */
#leza-header .brand img {
  height: 48px;
  width: auto;
}

/* Zoekveld in header */
#leza-header .search-form {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

#leza-header .search-form input[type="search"] {
  width: 100%;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: .5rem 1.25rem .5rem 2.5rem;
  font-size: 1rem;
  outline: none;
  transition: all .2s ease;
}

#leza-header .search-form input[type="search"]:focus {
  border-color: #f97e01;
  background: rgba(255, 255, 255, 0.2);
}

#leza-header .search-form svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
}

/* Knoppen rechts */
#leza-header .actions a {
  border: none;
  border-radius: 50px;
  padding: .45rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
}

#leza-header .btn-leza {
  background: #f97e01;
  color: #fff;
  box-shadow: 0 3px 10px rgba(249,126,1,.3);
}

#leza-header .btn-leza:hover {
  background: #ff8f1e;
  box-shadow: 0 5px 18px rgba(249,126,1,.45);
  transform: translateY(-1px);
}

/* Accentlijn onder header */
#leza-header .accent {
  height: 2px;
  background: linear-gradient(90deg, transparent, #f97e01, transparent);
  opacity: .8;
  filter: blur(.2px);
}

/* Mobiel */
@media (max-width: 768px) {
  #leza-header .bar {
    flex-wrap: wrap;
    justify-content: center;
  }

  #leza-header .search-form {
    order: 3;
    width: 100%;
    max-width: none;
  }
}
/* ===== LEZA tokens ===== */
:root{
  --leza-orange:#f97e01;
  --leza-orange-2:#ff8f1e;
  --leza-text:#0f172a;
  --leza-muted:#64748b;
  --leza-border:#e5e7eb;
  --leza-bg:#ffffff;
}
html,body{background:#fff;color:var(--leza-text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}

/* Topbar */
.topbar{background:#fafafa;border-bottom:1px solid var(--leza-border)}
.topbar a{color:#475569;text-decoration:none}
.topbar a:hover{color:#111827}

/* Header/Nav */
.leza-nav{background:#fff;border-bottom:1px solid var(--leza-border);position:sticky;top:0;z-index:1030}
.leza-nav .brand img{height:70px;width:auto}
.leza-nav .nav-link{color:#111827;font-weight:600;padding:.75rem .9rem;border-radius:.5rem}
.leza-nav .nav-link:hover{background:#f6f7f8}
.btn-mijn{background:var(--leza-orange);color:#fff;border:none;font-weight:700;
  padding:.55rem 1rem;border-radius:999px;text-decoration:none}
.btn-mijn:hover{background:var(--leza-orange-2)}

/* Hero */
.kb-hero{
  padding:56px 0 40px;
  background: radial-gradient(900px 260px at 50% -120px, rgba(249,126,1,.08), transparent);
  border-bottom:1px solid var(--leza-border)
}
.kb-hero h1{font-weight:800;letter-spacing:-.2px}
.lead-muted{color:var(--leza-muted)}

/* Zoekveld */
.search-lg{
  max-width:720px;margin-inline:auto;position:relative;
  border:1px solid var(--leza-border);border-radius:999px;background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.04)
}
.search-lg input{
  width:100%;border:0;outline:0;box-shadow:none;background:transparent;
  padding:1rem 1.2rem;padding-left:46px;font-size:1.05rem;color:var(--leza-text)
}
.search-lg input::placeholder{color:#94a3b8}
.search-lg .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.6}

/* Suggest dropdown */
.kb-suggest{position:absolute;left:0;right:0;margin:auto;max-width:720px;
  border:1px solid var(--leza-border);border-radius:16px;background:#fff;z-index:1031;
  transform:translateY(10px);overflow:hidden}
.kb-suggest[hidden]{display:none}
.kb-suggest .item{display:flex;gap:.75rem;align-items-start;padding:.7rem 1rem;border-top:1px solid #f1f5f9;text-decoration:none;color:inherit;position:relative}
.kb-suggest .item:first-child{border-top:0}
.kb-suggest .item:hover{background:#f8fafc}
.kb-suggest .title{font-weight:700;line-height:1.2}
.kb-suggest .meta{font-size:.9rem;color:var(--leza-muted)}
.kb-suggest .percent{margin-left:auto;font-weight:800}
.kb-suggest .badge{border:1px solid var(--leza-border)}
.kb-suggest .empty{padding:.9rem 1rem;color:var(--leza-muted)}

/* Chips */
.chip{display:inline-block;padding:.45rem .9rem;border:1px solid var(--leza-border);
  color:#0f172a;border-radius:999px;background:#fff;font-weight:600;margin:.25rem .25rem 0 0;text-decoration:none}
.chip:hover{border-color:#d6dae1;background:#f8fafc}

/* Cards */
.kb-card{border:1px solid var(--leza-border);border-radius:14px;padding:1rem;height:100%;
  transition:transform .12s ease,box-shadow .12s ease;background:#fff}
.kb-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.06)}
.kb-card .title{font-weight:700}
.kb-card .meta{font-size:.92rem;color:var(--leza-muted)}
.badge.border{border-color:var(--leza-border)!important}

.btn-pill{border-radius:999px}
.leza-footer{border-top:1px solid var(--leza-border);color:#475569}