/* ==========================================================================
   TOOLIFY – APPS-OVERZICHT (sinds V2.2.0). Basiswaarden en kaarten: css/basis.css
   ========================================================================== */
.overzichtpagina main { padding: 0; max-width: none; overflow: visible; }

/* kop met zoeken en filters */
.ov-kop, .ov-kop.wrap { padding: 48px 24px 8px; text-align: center; position: relative; }
.ov-kop::before {
  content: ""; position: absolute; inset: -40px 0 auto; height: 340px; pointer-events: none;
  background: radial-gradient(560px 220px at 50% 0, var(--merk-zacht), transparent 70%);
}
.ov-kop > * { position: relative; }
.ov-kop h1 { font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; margin: 14px 0 8px; }
.ov-kop > p { color: var(--tekst-2); font-size: var(--fs-l); max-width: 620px; margin: 0 auto 26px; line-height: 1.55; }

.ov-zoek { max-width: 560px; margin: 0 auto; position: relative; }
.ov-zoek .zoek-icoon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--tekst-3); pointer-events: none; }
.ov-zoek input {
  width: 100%; height: 52px; padding: 0 48px 0 46px; border-radius: var(--r-m); border: 1px solid var(--rand);
  background: var(--vlak); color: var(--tekst); font: 400 var(--fs-m) var(--font-tekst); box-shadow: var(--schaduw-2);
  -webkit-appearance: none; appearance: none;
}
.ov-zoek input::-webkit-search-cancel-button { display: none; }
.ov-zoek input:focus { outline: none; border-color: var(--merk); box-shadow: var(--ring), var(--schaduw-2); }
.ov-wis { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center;
          border: 0; background: transparent; color: var(--tekst-3); border-radius: var(--r-s); cursor: pointer; }
.ov-wis:hover { color: var(--tekst); background: var(--vlak-2); }

.ov-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 980px; }
.ov-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-rond);
  border: 1px solid var(--rand); background: var(--vlak); color: var(--tekst-2); font: 500 var(--fs-s) var(--font-tekst); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ov-chip svg.i { color: var(--k, var(--merk-tekst)); }
.ov-chip small { font-size: var(--fs-xs); color: var(--tekst-3); font-weight: 600; }
.ov-chip:hover { border-color: color-mix(in srgb, var(--k, var(--merk)) 60%, var(--rand)); color: var(--tekst); }
.ov-chip[aria-pressed="true"] { background: var(--merk); border-color: var(--merk); color: #fff; }
.ov-chip[aria-pressed="true"] svg.i, .ov-chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }

/* groepen per categorie */
.ov-groep, .ov-groep.wrap { padding: 36px 24px 8px; scroll-margin-top: calc(var(--kop-hoogte) + 16px); }
.ov-groep-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rand-zacht); }
.ov-groep-kop .tegel { color: var(--k); background: color-mix(in srgb, var(--k) 15%, transparent); }
.ov-groep-kop h2 { font-size: var(--fs-xl); margin: 0; font-weight: 600; }
.ov-aantal { margin-left: auto; }
.ov-groep .tool[hidden] { display: none; }
#ov-geen, #ov-geen.wrap { padding: 28px 24px 0; }

/* idee */
.ov-idee-wrap, .ov-idee-wrap.wrap { padding: 40px 24px 8px; }
.ov-idee { display: flex; align-items: center; gap: 18px; background: linear-gradient(140deg, var(--merk-zacht), transparent 65%), var(--vlak); }
.ov-idee .tegel { --k: var(--let-op); }
.ov-idee h2 { font-size: var(--fs-l); margin: 0 0 4px; }
.ov-idee p { margin: 0; color: var(--tekst-2); font-size: var(--fs-s); }
.ov-idee > div { flex: 1; }

@media (max-width: 760px) {
  .ov-kop, .ov-kop.wrap { padding: 32px 16px 4px; }
  .ov-kop h1 { font-size: 1.9rem; }
  .ov-kop > p { font-size: var(--fs-m); }
  .ov-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .ov-chip { flex: none; }
  .ov-groep, .ov-groep.wrap, .ov-idee-wrap, .ov-idee-wrap.wrap, #ov-geen, #ov-geen.wrap { padding-left: 16px; padding-right: 16px; }
  .ov-idee { flex-direction: column; align-items: flex-start; }
}