/* Compacte homepage voor alle dokter-sites: visueel en kort. Alleen variabelen van de site, dus licht en donker volgen vanzelf. */
.hm-hero { padding: 34px 0 40px; background: linear-gradient(180deg, var(--accent-soft), var(--bg)); border-bottom: 1px solid var(--line); }
.hm-hero .wrap { display: grid; gap: 28px 44px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 920px) { .hm-hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.hm-hero h1 { margin: 0 0 12px; }
.hm-hero .acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
.hm-mozaiek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hm-tegel { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.hm-tegel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hm { padding: 28px 0; }
.hm h2 { margin: 0 0 14px; }
.hm-keuze { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hm-kaart { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--ink); text-decoration: none; }
.hm-kaart:hover { border-color: var(--accent); }
.hm-kaart:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hm-kaart .foto { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #fff; border-radius: 10px; overflow: hidden; }
.hm-kaart .foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hm-kaart b { font-size: 1.2rem; }
.hm-kaart .meer { color: var(--accent-tekst); font-weight: 600; }
.hm-diensten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.hm-dienst { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--ink); text-decoration: none; }
.hm-dienst:hover { border-color: var(--accent); }
.hm-dienst b { font-size: 1.05rem; }
.hm-dienst span { color: var(--ink-2); font-size: .93rem; }
.hm-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hm-stappen li { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); font-size: .93rem; color: var(--ink-2); }
.hm-stappen b { color: var(--ink); }
.hm-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 700; }
.hm-aanvraag { background: var(--accent-soft); border-top: 1px solid var(--accent-line); }
.hm-aanvraag .wrap { display: grid; gap: 28px 44px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 920px) { .hm-aanvraag .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); } }
.hm .usps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 24px; }
.hm .usps h3 { font-size: 1rem; margin: 0 0 4px; }
.hm .kolommen .faq { columns: 2 340px; column-gap: 28px; }
.hm .kolommen details { break-inside: avoid; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hm-chips a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--ink); text-decoration: none; font-size: .92rem; }
.hm-chips a:hover { border-color: var(--accent); }
@media (max-width: 520px) { .hm-mozaiek { gap: 8px; } .hm-tegel { padding: 6px; border-radius: 10px; } }

.hm-ext section { padding: 28px 0; }
.hm-ext section h2 { margin-top: 0; }

/* Compacter: prijskaarten schuiven op mobiel, minder selectorfoto's, ingeklapte kaarten onderaan. */
.hm-meer3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.hm-meer3 .ob-meer { margin: 0; }
.hm-meer3 ul { margin: 0 0 8px; padding-left: 1.1rem; }
.hm-pagina .km-pop li:nth-child(n+9) { display: none; }
@media (max-width: 760px) {
  .hm-pagina .km-pop li:nth-child(n+7) { display: none; }
  .hm-pagina .prices { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; }
  .hm-pagina .prices .pg { scroll-snap-align: start; }
}
.hm-pagina .klist { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.hm-pagina .klist span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: .92rem; }
.hm-pagina .klist a { font-weight: 600; }

/* Gedeeld door alle sites: details-kaarten onderaan en de hero met de aanmeldstappen ernaast. */
.ob-meer { margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 0 16px; font-size: 1rem; }
.ob-meer summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.ob-meer[open] { padding-bottom: 12px; }
.hm-hero.hm-wiz .wrap { align-items: start; }
.hm-hero.hm-wiz #aanvraag { scroll-margin-top: 90px; }
.hm-slot { background: var(--accent-soft); border-top: 1px solid var(--accent-line); }
.hm-slot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.hm-slot h2 { margin: 0 0 4px; }
.hm-slot p { margin: 0; }
.hm-hero .facts { margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, auto); gap: 14px 28px; justify-content: start; }
.hm-hero .facts li { max-width: 18ch; font-size: 15px; color: var(--ink-2); }
.hm-hero .facts b { display: block; color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
@media (max-width: 480px) { .hm-hero .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .hm-hero .facts li { font-size: 13px; max-width: none; } .hm-hero .facts b { font-size: 18px; } }
.a.hm-tegel, a.hm-tegel { text-decoration: none; } a.hm-tegel:hover { border-color: var(--accent); }
.hm-tegel { position: relative; overflow: hidden; }
.hm-tegel img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
@media (max-width: 520px) { .hm-tegel img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); } }
.hm-hero .facts li { overflow-wrap: anywhere; }
@media (max-width: 480px) { .hm-hero .facts b { font-size: 16px; } .hm-hero .facts li { font-size: 12.5px; } }
/* Snelkeuze in de hero (per site aan te zetten): meteen naar de aanmeldstappen met het apparaat ingevuld. */
.hm-snel { margin: 4px 0 8px; font-size: 15px; color: var(--ink-2); }
.hm-snelkeuze { margin-bottom: 6px; }
.hm-snelkeuze a { font-weight: 500; }