/* Afwerking van variant A. De oorspronkelijke kleuren en typografie blijven leidend. */
:focus-visible { outline: 2px solid #645643; outline-offset: 5px; }
h1[tabindex="-1"]:focus { outline: none; }
.skip-link { position: fixed; z-index: 1001; top: -80px; left: 16px; background: white; color: #2c2c2c; padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.demo-bar { display: flex; justify-content: space-between; gap: 16px; padding: 9px max(24px, calc((100vw - 1216px)/2)); background: #eae6df; color: #554e43; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.demo-bar span span { margin: 0 12px; opacity: .4; }
nav { padding-inline: max(24px, calc((100vw - 1216px)/2)); }
.nav-logo { text-decoration: none; flex-shrink: 0; }
.nav-links { gap: 1.5rem; align-items: center; }
.nav-links a { letter-spacing: .07em; }
.hero { gap: 5rem; margin-block: 3.5rem 4.5rem; max-width: 1216px; }
.hero-title { font-size: clamp(3rem, 4.5vw, 4.5rem); }
.hero-img { position: relative; height: 530px; background: #e9e5de; }
.hero-img img { object-position: 50% 50%; }
.hero-img figcaption { position: absolute; inset: auto 0 0; padding: 40px 26px 20px; color: white; background: linear-gradient(transparent, #262b2380); font-size: 11px; letter-spacing: .07em; }
.hero-sub { font-size: .95rem; }
.card { display: block; color: inherit; text-decoration: none; padding: 0 0 24px; border-top: 0; overflow: hidden; }
.card-photo { margin: 0 0 20px; height: 240px; overflow: hidden; }
.card-photo img { transition: transform .45s ease; }
.card:hover .card-photo img { transform: scale(1.035); }
.card-title, .card-text { margin-inline: 22px; }
.card-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.card-title::after { content: '↗'; font-family: var(--body); font-size: 17px; color: var(--accent); }
.card-text { font-size: .83rem; }
.praktijk-foto { position: relative; overflow: hidden; height: 470px; background: #e8e3dc; }
.praktijk-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.praktijk-foto figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px; background: linear-gradient(transparent, #292b2590); color: white; font-size: .8rem; }
.team-member, .team-member.reverse { grid-template-columns: 80px 1fr; direction: ltr; gap: 2.5rem; margin-bottom: 3rem; padding-bottom: 3rem; }
.team-number { font-family: var(--display); font-size: 4rem; color: #9e9280; line-height: 1; }
.team-bio { max-width: 670px; }
.demo-note { border-left: 2px solid #9d8d75; background: #eeebe5; color: #62594d; padding: 16px 20px; font-size: .8rem; line-height: 1.7; margin-bottom: 2rem; }
.beh-prices-title::after { content: ' · voorbeeldtarieven'; font-weight: 400; font-size: .75rem; text-transform: none; letter-spacing: 0; }
.contact-form label { display: block; font-size: .8rem; margin-bottom: 7px; }
.contact-form input, .contact-form textarea, .booking-demo select { border: 1px solid #c6beb1; background: #fff; color: #2c2c2c; border-radius: 0; padding: 14px; width: 100%; font: inherit; font-size: .9rem; }
.contact-form input, .contact-form textarea { margin-bottom: 20px; }
.form-result { color: #3e5744; border-left: 2px solid #6b8069; background: #eef1eb; padding: 18px; margin-top: 20px; font-size: .85rem; }
[hidden] { display: none !important; }
.booking-frame { min-height: 0; border: 1px solid var(--light); }
.booking-demo { display: grid; grid-template-columns: .9fr 1.1fr; text-align: left; }
.booking-controls, .booking-moments { padding: 2.5rem; min-width: 0; }
.booking-controls { background: #f0ede7; }
.step-label { color: #91806a; font-size: .75rem; letter-spacing: .1em; margin-bottom: 2rem; }
.step-label span { margin-left: 15px; text-transform: uppercase; color: #51493f; }
.booking-demo label { display: block; font-size: .8rem; margin: 24px 0 8px; }
.booking-help, .booking-example, .booking-summary { color: var(--mid); font-size: .8rem; margin-block: 20px; }
.booking-address { font-size: .8rem; border-top: 1px solid #d5cec3; padding-top: 22px; margin-top: 30px; }
.booking-days { display: flex; gap: 10px; margin-bottom: 24px; }
.booking-day { flex: 1; background: white; border: 1px solid #cfc7bb; padding: 16px 5px; color: #51493f; font: 1.6rem var(--display); cursor: pointer; }
.booking-day span { display: block; font: .65rem var(--body); margin-top: 8px; }
.booking-day.selected { border-color: #665b4d; background: #f0ede7; }
.booking-times { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.booking-time { font: .85rem var(--body); padding: 12px 4px; border: 1px solid #cfc7bb; background: white; color: #51493f; cursor: pointer; }
.booking-time[aria-pressed=true] { background: #51493f; color: white; }
button:disabled { opacity: .45; cursor: default; }
footer { padding: 3rem max(24px, calc((100vw - 1152px)/2)) 2rem; text-align: left; }
.footer-brand img { display: block; width: 155px; background: #f7f6f4; padding: 10px; margin-bottom: 18px; }
.footer-brand p { font-size: .8rem; line-height: 1.7; color: #ccc5ba; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.footer-links a { color: #e2dacf; text-decoration: none; font-size: .8rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .65rem; color: #c2b9ac; border-top: 1px solid #ffffff25; padding-top: 25px; margin-top: 35px; }
.footer-bottom span { color: inherit; }
body .sa-launcher { width: 54px; height: 54px; font-size: 0; }
body .sa-launcher::before { content: '?'; font: 1.8rem var(--display); }
body .sa-chat { border-radius: 4px; }
body .sa-msg, body .sa-chat-input textarea, body .sa-chat-input button { border-radius: 3px; }
@media(max-width:1000px) { nav { height: auto; min-height: 88px; gap: 18px; padding-block: 16px; flex-wrap: wrap; justify-content: center; } .nav-links { flex-wrap: wrap; justify-content: center; gap: 12px 20px; } .hero { gap: 2.5rem; } .hero-img { height: 470px; } }
@media(max-width:700px) {
 .demo-bar { font-size: 8px; padding: 9px 16px; letter-spacing: .04em; gap: 8px; }
 .demo-bar span span { margin: 0 5px; }
 nav { position: relative; padding: 15px 16px 20px; gap: 15px; }
 .nav-logo-full { height: 52px; }
 .nav-links { gap: 13px 17px; }
 .nav-links a { font-size: .63rem; }
 .hero { display: flex; flex-direction: column; align-items: stretch; padding-inline: 24px; margin: 24px auto 40px; gap: 30px; }
 .hero-img { order: 0; height: 370px; }
 .hero-title { font-size: 3.3rem; }
 .hero .btn { padding: 14px 18px; }
 .hero .btn-outline { margin-left: 8px; }
 .strip { font-size: .65rem; line-height: 2; padding-inline: 18px; }
 .intro, .behandelingen, .team-section, .contact-section, .prijs-section { padding-inline: 24px; }
 .section-header { align-items: start; gap: 18px; flex-direction: column; }
 .card-photo { height: 290px; }
 .team-member, .team-member.reverse { grid-template-columns: 45px 1fr; gap: 16px; }
 .team-number { font-size: 3rem; }
 .praktijk-foto { height: 350px; margin-inline: 24px; }
 .booking-demo { grid-template-columns: 1fr; }
 .booking-controls, .booking-moments { padding: 24px; }
 .booking-demo select { font-size: .78rem; padding-inline: 10px; }
 .footer-bottom { flex-direction: column; gap: 10px; }
 body .sa-launcher { right: 16px; bottom: 16px; }
 body .sa-chat { right: 16px; bottom: 82px; max-height: calc(100dvh - 105px); }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Boekingspagina van het praktijkprogramma in een kader: hoogte volgt de inhoud (bericht uit het kader). */
.booking-frame:has(.booking-iframe) { padding: 1rem 1.5rem; }
.booking-iframe { display: block; width: 100%; height: 900px; border: 0; background: transparent; }
.booking-fallback { margin-top: 1rem; font-size: .82rem; color: var(--mid); }
.booking-fallback a { color: inherit; }
@media (max-width: 640px) { .booking-frame:has(.booking-iframe) { padding: .5rem; } }