/* Schenkelaars Tandartsen by pimvdhurk.nl. Klassen hebben het voorvoegsel st- (nooit WordPress-UI-namen zoals button, media-, wp-).
   Maten 1-op-1 gemeten op de Elementor-site: desktop 1440, tablet tot en met 1024, telefoon tot en met 767.
   Ruimtes in em, zoals Elementor: 1em is 16px op desktop, 15px op tablet en 14px op de telefoon (de lettergrootte van body). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--st-blauw: #0c557c;
	--st-groen: #8fb828;
	--st-tekst: #666;
	--st-kop: #2a2a2a;
	--st-licht: #f5f8fa;
	--st-lijn: #dcdde8;
	--st-wit: #fff;
	--st-ster: #f0ad4e;
	--st-breed: 1280px;
	--st-schaduw: 0 0 60px rgba(0, 0, 0, .1);
	--st-font: "Inter", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--st-wit);
	color: var(--st-tekst);
	font-family: var(--st-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
[hidden]:not(.st-mobielmenu) { display: none !important; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.st-sr,
.st-skip:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.st-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 8px 16px; background: var(--st-wit); }

.st-icoon { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* Binnenkant van een sectie: maximaal 1280px; de sectie zelf geeft de ruimte aan de zijkant. */
.st-wrap { width: 100%; max-width: var(--st-breed); margin: 0 auto; }
.st-sectie { padding-inline: 1em; }

/* Foto als achtergrond (bewerkbaar met Pencilino), met een waas erover. */
.st-foto-achter { position: relative; isolation: isolate; overflow: hidden; }
.st-foto-achter__foto,
.st-foto-achter__foto > div { position: absolute; inset: 0; z-index: -2; }
.st-foto-achter__img { width: 100%; height: 100% !important; object-fit: cover; object-position: center; }
.st-foto-achter::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; opacity: .4; }

/* ---------- Typografie (Elementor-kit: Inter) ---------- */
.st-label { color: var(--st-groen); font-size: 14px; font-weight: 500; line-height: 1.6; text-transform: uppercase; }
.st-h2 { color: var(--st-kop); font-size: 39px; font-weight: 700; line-height: 1.2; }
.st-h3 { color: var(--st-kop); font-size: 31px; font-weight: 700; line-height: 1.3; }
.st-h5 { color: var(--st-kop); font-size: 20px; font-weight: 600; line-height: 1.4; }
.st-groot { font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
.st-kopblok { display: flex; flex-direction: column; }
.st-kopblok--midden { align-items: center; text-align: center; }

.st-tekst p,
.st-tekst ul,
.st-tekst ol { margin: 0 0 .9em; }
.st-tekst ul,
.st-tekst ol { padding-left: 40px; }
.st-tekst > :last-child,
.st-tekst .pencil-richtext > :last-child { margin-bottom: 0; }
.st-tekst--marge > :last-child,
.st-tekst--marge .pencil-richtext > :last-child { margin-bottom: .9em; }
.st-tekst a,
.st-privacyregel a { color: var(--st-groen); text-decoration: underline; }
.st-tekst a:hover,
.st-privacyregel a:hover { color: var(--st-blauw); }
.st-wit { color: var(--st-wit); }

/* ---------- Knoppen (Elementor-knop: groen, rond) ---------- */
.st-knop {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	border: 2px solid var(--st-groen);
	border-radius: 30px;
	background: var(--st-groen);
	color: var(--st-wit);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background .3s, border-color .3s, color .3s;
}
.st-knop:hover { border-color: #7fa522; background: #7fa522; color: var(--st-wit); }
.st-knop:focus:not(:focus-visible) { outline: none; }
.st-knop--klein { padding: 12px 24px; border: 0; }
.st-knop--zonderrand { border: 0; }
.st-knop--klein.st-knop--dun { border: 1px solid var(--st-groen); }
.st-knop--klein.st-knop--dun.st-knop--wit { border-color: var(--st-wit); }
.st-knop--middel-plat { font-size: 16px; }
.st-knop--middel { font-size: 16px; font-weight: 600; line-height: 1.4; }
.st-knop--groot { font-size: 18px; font-weight: 700; line-height: 1.4; }
.st-knop--wit { border-color: var(--st-wit); background: transparent; }
.st-knop--wit:hover { border-color: var(--st-wit); background: var(--st-wit); color: var(--st-blauw); }
.st-knop--rand { padding-inline: 20px; border-color: var(--st-blauw); border-radius: 200px; background: var(--st-wit); color: var(--st-blauw); font-weight: 700; }
.st-knop--rand:hover { border-color: var(--st-blauw); background: var(--st-blauw); color: var(--st-wit); }
.st-knop--onderstreept { text-decoration: underline; }
.st-knop__pijl { width: 14px; height: 14px; }
.st-knop .st-icoon { width: 1em; height: 1em; }
.st-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.st-knoppen--midden { justify-content: center; gap: 20px; }
/* Belknop met telefoonicoon ervoor (Pencilino-knoppen bevatten geen svg, dus via een masker). */
.st-knop--bel::before { content: ""; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("../icons/telefoon.svg") center / contain no-repeat; mask: url("../icons/telefoon.svg") center / contain no-repeat; }

/* ---------- Kop ---------- */
.st-header { position: relative; z-index: 300; }
.st-header__lijn { height: 5px; background: var(--st-blauw); }
.st-kop { padding: 0 2em; background: var(--st-wit); }
.st-kop__binnen { display: flex; justify-content: space-between; align-items: center; min-height: 80px; }
.st-logo { display: block; flex: none; width: 240px; line-height: 0; }
.st-logo__img { display: block; width: 100%; height: auto; }
.st-kop__rechts { display: flex; flex: none; justify-content: flex-end; align-items: center; gap: 14px; width: 41%; padding-right: 10px; }
.st-kop__knop { flex: none; }

.st-nav__lijst { display: flex; gap: 33px; margin: 0; padding: 0; list-style: none; }
.st-nav__lijst > li { position: relative; }
.st-nav__lijst > li > a { display: flex; align-items: center; padding: 25px 0; color: var(--st-kop); font-size: 16px; font-weight: 600; line-height: 24px; white-space: nowrap; transition: color .3s; }
.st-nav__lijst > li > a:hover,
.st-nav__lijst > li.is-open > a,
.st-nav__lijst > li.current-menu-item > a,
.st-nav__lijst > li.current-menu-ancestor > a { color: var(--st-groen); }
.st-nav__pijl { display: inline-flex; padding-left: 8px; }
.st-nav__pijl .st-icoon { width: 10px; height: 16px; }
.st-nav__lijst .sub-menu {
	position: absolute;
	top: 100%;
	left: -20px;
	z-index: 20;
	min-width: 260px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	border-radius: 10px;
	background: var(--st-wit);
	box-shadow: var(--st-schaduw);
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s, visibility .2s;
}
.st-nav__lijst > li:hover > .sub-menu,
.st-nav__lijst > li.is-open > .sub-menu,
.st-nav__lijst > li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.st-nav__lijst .sub-menu a { display: block; padding: 13px 20px; color: var(--st-kop); font-size: 16px; font-weight: 600; line-height: 20px; white-space: nowrap; transition: color .3s; }
.st-nav__lijst .sub-menu a:hover,
.st-nav__lijst .sub-menu .current-menu-item > a { color: var(--st-groen); }

.st-bereikbaar__link { display: flex; align-items: center; gap: 15px; }
.st-bereikbaar__icoon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--st-blauw); color: var(--st-wit); }
.st-bereikbaar__icoon .st-icoon { width: 16px; height: 16px; }
.st-bereikbaar__tekst { display: flex; flex-direction: column; }
.st-bereikbaar__titel { color: var(--st-tekst); font-size: 14px; font-weight: 500; line-height: 1; }
.st-bereikbaar__nummer { color: var(--st-blauw); font-size: 16px; font-weight: 600; line-height: 24px; }

.st-vlag { display: block; width: 20px; line-height: 0; }
.st-vlag__img { display: block; width: 18px; height: 18px; }

.st-hamburger { display: none; padding: 0; border: 0; background: none; color: var(--st-kop); line-height: 0; cursor: pointer; }
.st-hamburger .st-icoon { width: 21px; height: 21px; }
.st-hamburger:focus:not(:focus-visible) { outline: none; }

/* Mobiel menu: wit paneel dat van rechts inschuift (was een Elementor-popup). */
.st-mobielmenu { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: flex-end; }
.st-mobielmenu[hidden] { display: none; }
.st-mobielmenu__achtergrond { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s; }
.st-mobielmenu__paneel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 400px;
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	background: var(--st-wit);
	transform: translateX(100%);
	transition: transform .3s ease;
	outline: 0;
}
.st-mobielmenu.is-open .st-mobielmenu__achtergrond { opacity: 1; }
.st-mobielmenu.is-open .st-mobielmenu__paneel { transform: none; }
body.st-menu-open { overflow: hidden; }
.st-mobielmenu__kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 1em; border-bottom: 1px solid var(--st-lijn); }
.st-mobielmenu__logo { display: block; width: 180px; line-height: 0; }
.st-mobielmenu__sluit { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--st-licht); color: var(--st-blauw); cursor: pointer; }
.st-mobielmenu__sluit .st-icoon { width: 14px; height: 16px; }
.st-mobielmenu__nav { padding: 8px 1em; }
.st-mobielmenu__lijst { margin: 0; padding: 0; list-style: none; }
.st-mobielmenu__lijst > li { border-bottom: 1px solid var(--st-lijn); }
.st-mobielmenu__lijst > li > a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; color: var(--st-kop); font-size: 16px; font-weight: 600; line-height: 24px; }
.st-mobielmenu__lijst > li > a:hover,
.st-mobielmenu__lijst > li.current-menu-item > a { color: var(--st-groen); }
.st-mobielmenu__lijst .st-nav__pijl .st-icoon { transition: transform .3s; }
.st-mobielmenu__lijst > li.is-open .st-nav__pijl .st-icoon { transform: rotate(180deg); }
.st-mobielmenu__lijst .sub-menu { display: none; margin: 0; padding: 0 0 10px; list-style: none; }
.st-mobielmenu__lijst > li.is-open > .sub-menu { display: block; }
.st-mobielmenu__lijst .sub-menu a { display: block; padding: 8px 0 8px 14px; color: var(--st-tekst); font-size: 15px; font-weight: 500; line-height: 22px; }
.st-mobielmenu__lijst .sub-menu a:hover,
.st-mobielmenu__lijst .sub-menu .current-menu-item > a { color: var(--st-groen); }
.st-mobielmenu__onder { display: flex; flex-direction: column; gap: 20px; margin-top: auto; padding: 24px 1em 30px; }
.st-mobielmenu__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Icoonblok (Elementor icon-box: rond icoon links, kop en tekst rechts) ---------- */
.st-icoonblok { display: flex; align-items: center; gap: 14px; }
.st-icoonblok--boven { align-items: flex-start; }
.st-icoonblok__icoon { display: grid; flex: none; place-items: center; width: 77px; height: 77px; border-radius: 50%; background: var(--st-blauw); color: var(--st-wit); }
.st-icoonblok__icoon .st-icoon { width: 35px; height: 35px; }
.st-icoonblok__icoon--groot { width: 84px; height: 84px; }
.st-icoonblok__icoon--groot .st-icoon { width: 42px; height: 42px; }
.st-icoonblok__icoon--klein { width: 58px; height: 58px; }
.st-icoonblok__icoon--klein .st-icoon { width: 26px; height: 26px; }
.st-icoonblok__tekst { flex: 1; min-width: 0; }
.st-icoonblok__titel { margin-bottom: 0; color: var(--st-kop); font-size: 20px; font-weight: 600; line-height: 28px; }
.st-icoonblok--ruim .st-icoonblok__titel { margin-bottom: 7px; }

/* ---------- Banner: foto met donkere waas, tekst in het midden ---------- */
.st-banner { padding: 7em 1em; color: var(--st-wit); text-align: center; }
.st-banner__binnen { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 680px; margin: 0 auto; padding: 32px; }
.st-banner__titel { color: var(--st-wit); }
.st-banner__titel--ruim { font-size: 48px; font-weight: 700; line-height: 1.2; }
.st-banner--breed .st-banner__binnen { max-width: 810px; padding: 0; }
.st-banner--waas50::before { opacity: .5; }
.st-banner--p5 { padding-block: 5em; }
.st-banner--p4 { padding-block: 4em; }
.st-banner--p4 .st-banner__binnen { max-width: 680px; }

/* ---------- Homepage ---------- */
.st-hero { padding: 7em 1em 10em; color: var(--st-wit); }
.st-hero::before { background: linear-gradient(90deg, rgba(12, 85, 124, .878) 0%, rgba(12, 85, 124, .322) 100%); opacity: 1; }
.st-hero__binnen { display: flex; flex-direction: column; gap: 20px; width: 56%; padding: 32px 0 32px 32px; }
.st-hero__titel { color: var(--st-wit); }

.st-usps { position: relative; z-index: 2; padding: 0 1em; }
.st-usps__kaart { display: flex; align-items: center; gap: 48px; margin-top: -5em; padding: 1em 3em; border-radius: 100px; background: var(--st-licht); box-shadow: var(--st-schaduw); }
.st-usps__kaart .st-icoonblok { flex: 1; }

.st-behandelingen { padding: 5em 1em 7em; }
.st-behandelingen__kop { max-width: 717px; margin: 0 auto; padding: 32px; }
.st-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 31px 29.5px; }
.st-kaart { display: flex; flex-direction: column; gap: 20px; margin-top: 7em; padding: 0 21px 21px; border-radius: 10px; background: var(--st-licht); }
.st-kaart__foto { display: block; margin-top: -7em; line-height: 0; }
.st-kaart__img { display: block; width: 100%; height: 250px !important; border-radius: 10px; object-fit: cover; }
.st-kaart__kop { padding-bottom: 14px; border-bottom: 1px solid var(--st-lijn); }
.st-kaart__titel { color: var(--st-kop); font-size: 20px; font-weight: 600; line-height: 28px; }
.st-kaart__sub { line-height: 22.4px; }
.st-kaart__tekst { min-height: 96px; }
.st-kaart .st-knop { align-self: flex-start; }

.st-team-sectie { display: flex; flex-direction: column; gap: 50px; padding: 5em 1em 8em; }
.st-team-sectie__kop { max-width: 640px; margin: 0 auto; }
.st-team-sectie > .st-knop { align-self: center; }
.st-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: var(--st-breed); margin: 0 auto; }
.st-lid { display: flex; flex-direction: column; align-items: center; overflow: hidden; padding-bottom: 14px; border-radius: 7px; background: var(--st-licht); text-align: center; }
.st-lid > div { width: 100%; } /* Beheerd gebied van Pencilino om foto en tekst. */
.st-lid__foto { display: block; width: 100%; height: 325px !important; object-fit: cover; }
.st-lid__naam { margin-top: 14px; color: var(--st-kop); font-size: 20px; font-weight: 600; line-height: 28px; }
.st-lid__functie { line-height: 22.4px; }
.st-lid__big { color: #b6b6b6; font-size: 12px; line-height: 1.4; }

.st-speerpunten { position: relative; isolation: isolate; padding: 0 1em 7em; background: var(--st-licht); }
.st-speerpunten::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/stippen.png") left top / auto no-repeat; opacity: .1; }
.st-speerpunten__binnen { display: flex; justify-content: space-between; }
.st-speerpunten__tekst { display: flex; flex-direction: column; gap: 20px; width: 55%; padding: 80px 80px 16px 16px; }
.st-speerpunten__beeld { position: relative; width: 45%; margin-top: -16px; }
.st-speerpunten__img { display: block; width: 100%; height: 840px !important; border-radius: 10px 10px 300px 300px; object-fit: cover; }
.st-belblok { position: absolute; right: 0; bottom: 38px; display: flex; align-items: center; gap: 16px; padding: 14px 30px 14px 14px; border-radius: 50px; background: var(--st-blauw); color: var(--st-wit); }
.st-belblok__icoon { display: grid; flex: none; place-items: center; width: 77px; height: 77px; border-radius: 50%; background: var(--st-wit); color: var(--st-blauw); }
.st-belblok__icoon .st-icoon { width: 35px; height: 35px; }
.st-belblok__titel { display: block; font-size: 14px; font-weight: 500; line-height: 1.6; text-transform: uppercase; }
.st-belblok__nummer { display: block; font-size: 20px; font-weight: 600; line-height: 28px; }
.st-belblok a { color: var(--st-wit); }
.st-belblok a.st-belblok__icoon { color: var(--st-blauw); }

.st-ervaring { padding: 7em 1em; }
.st-ervaring__binnen { display: flex; justify-content: space-between; }
.st-ervaring__beeld { position: relative; display: flex; align-items: center; width: 47%; }
.st-ervaring__img { display: block; width: 100%; height: 550px !important; border-radius: 10px; object-fit: cover; }
.st-teller { position: absolute; top: calc(50% + 170px); left: calc(100% - 160px - 1px); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 160px; height: 160px; padding: 10px; border-radius: 50%; background: var(--st-blauw); box-shadow: var(--st-schaduw); color: var(--st-wit); text-align: center; }
.st-teller__getal { font-size: 48px; font-weight: 700; line-height: 1.1; }
.st-teller__titel { font-size: 14px; font-weight: 500; line-height: 1.6; text-transform: uppercase; }
.st-ervaring__tekst { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 50%; padding: 48px 16px 48px 64px; }
.st-visie { display: flex; flex-direction: column; gap: 20px; padding: 21px 0; border-top: 1px solid var(--st-lijn); border-bottom: 1px solid var(--st-lijn); }
.st-ervaring__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.st-ervaring__tel { color: var(--st-kop); font-size: 20px; font-weight: 600; line-height: 28px; }
.st-ervaring__tel a:hover { color: var(--st-groen); }

.st-aangesloten { padding: 1em; border-top: 1px solid var(--st-licht); border-bottom: 1px solid var(--st-licht); }
.st-aangesloten__binnen { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.st-aangesloten__titel { color: var(--st-kop); font-size: 22px; font-weight: 500; line-height: 32px; }
.st-logos { display: flex; gap: 20px; }
.st-logos a { display: block; width: 217px; line-height: 0; }
.st-logos img { display: block; width: 100%; height: auto; }
.st-logos img { filter: brightness(0) contrast(0); opacity: .3; transition: filter .3s, opacity .3s; }
.st-footer__logos img { filter: saturate(.02); opacity: .3; transition: filter .3s, opacity .3s; }
.st-logos a:hover img,
.st-footer__logos a:hover img { filter: none; opacity: 1; }

.st-reviews { position: relative; isolation: isolate; padding: 5em 1em 7em; background: var(--st-licht); }
.st-reviews::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/stippen.png") left top / 250px auto no-repeat; opacity: .2; }
.st-reviews__binnen { display: flex; flex-direction: column; gap: 40px; }
.st-reviews__kop { display: flex; justify-content: space-between; align-items: center; }
.st-score { display: flex; align-items: center; gap: 7px; padding: 16px 0; }
.st-score__google { width: 56px; height: 56px; color: var(--st-blauw); }
.st-score__tekst { display: flex; flex-direction: column; gap: 7px; padding-left: 14px; }
.st-sterren { display: inline-flex; gap: 0; color: var(--st-ster); }
.st-ster { position: relative; display: inline-block; width: 28px; height: 28px; }
.st-ster__leeg { width: 28px; height: 28px; color: #ccd6df; }
.st-ster__vol { position: absolute; inset: 0; width: var(--vulling); overflow: hidden; }
.st-ster__icoon { width: 28px; height: 28px; color: var(--st-ster); }
.st-carrousel { position: relative; padding-bottom: 40px; overflow: hidden; }
.st-carrousel__baan { display: flex; gap: 28px; transition: transform .5s ease; }
.st-review { flex: 0 0 calc((100% - 56px) / 3); padding: 32px; border-radius: 5px; background: var(--st-wit); }
.st-review__tekst { margin-bottom: 25px; font-style: italic; line-height: 22.4px; }
.st-review__tekst p { margin: 0; }
.st-review__naam { color: var(--st-kop); font-size: 16px; font-style: italic; font-weight: 600; line-height: 24px; }
.st-carrousel__stippen { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 12px; height: 22px; align-items: center; }
.st-carrousel__stip { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--st-blauw); opacity: .2; cursor: pointer; }
.st-carrousel__stip.is-actief { opacity: 1; }

/* Veelgestelde vragen met tabbladen (homepage en Behandelingen) */
.st-faq { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 5em 1em 7em; }
.st-tabs { display: flex; gap: 48px; width: 100%; max-width: var(--st-breed); }
.st-tabs__lijst { display: flex; flex: 0 0 320px; flex-direction: column; gap: 10px; }
.st-tabs__tab { display: flex; align-items: center; gap: 10px; padding: 14px; border: 0; border-radius: 10px; background: var(--st-licht); color: var(--st-tekst); font-size: 16px; font-weight: 600; line-height: 21px; text-align: left; cursor: pointer; transition: background .3s, color .3s; }
.st-tabs__tab .st-icoon { width: 21px; height: 21px; color: var(--st-blauw); }
.st-tabs__tab[aria-selected="true"] { background: var(--st-blauw); color: var(--st-wit); }
.st-tabs__tab[aria-selected="true"] .st-icoon { color: var(--st-wit); }
.st-tabs__tab:focus:not(:focus-visible) { outline: none; }
.st-tabs__paneel { flex: 1; min-width: 0; }
.st-faq__onder { text-align: center; }

/* Accordeon (ElementsKit): balken die openklappen, de open vraag blauw. */
.st-accordeon { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.st-accordeon__item { border-radius: 10px; }
.st-accordeon__vraag { display: flex; align-items: center; padding: 21px 42px 21px 21px; border-radius: 10px; background: var(--st-licht); color: var(--st-kop); font-size: 16px; font-weight: 600; line-height: 24px; list-style: none; cursor: pointer; transition: background .3s, color .3s; }
.st-accordeon__vraag::-webkit-details-marker { display: none; }
.st-accordeon__item[open] > .st-accordeon__vraag { background: var(--st-blauw); color: var(--st-wit); }
.st-accordeon__vraag:focus:not(:focus-visible) { outline: none; }
.st-accordeon__antwoord { padding: 21px; background: var(--st-wit); }

/* ---------- Pagina-opening: tekst naast een foto (De praktijk, Over ons, Spoed, Tarieven) ---------- */
.st-intro { padding: 5em 1em; }
.st-intro__binnen { display: flex; justify-content: space-between; align-items: center; }
.st-intro__tekst { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 50%; padding: 48px 16px 48px 64px; }
.st-intro__tekst--links { width: 47%; padding: 48px 16px 48px 0; }
.st-intro__beeld { position: relative; width: 47%; }
.st-intro__img { display: block; width: 100%; height: 400px !important; border-radius: 10px; object-fit: cover; }

/* ---------- Behandelingen (overzicht) ---------- */
.st-overzicht { padding: 3em 1em 7em; }
.st-overzicht__kop { padding: 32px; }

/* ---------- Behandelpagina ---------- */
.st-bhero { padding: 4em 1em 5em; color: var(--st-wit); }
.st-bhero::before { opacity: .37; }
.st-bhero__binnen { display: flex; flex-direction: column; gap: 20px; width: 56%; }
.st-bhero__titel { color: var(--st-wit); font-size: 39px; font-weight: 700; line-height: 1.2; }
.st-binhoud { padding: 5em 1em; }
.st-binhoud__binnen { display: flex; justify-content: space-between; align-items: flex-start; }
.st-binhoud__tekst { width: 55%; }
.st-lopend > h2 { margin: 54.4px 0 10px; color: var(--st-kop); font-size: 26px; font-weight: 700; line-height: 1.3; }
.st-lopend > h2:first-child { margin-top: 0; }
.st-lopend p,
.st-lopend ul,
.st-lopend ol { margin: 0 0 .9em; }
.st-lopend ul,
.st-lopend ol { padding-left: 40px; }
.st-lopend > :last-child { margin-bottom: 0; }
.st-lopend a { color: var(--st-groen); text-decoration: underline; }
.st-contactkaart { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 38%; padding: 32px; border-radius: 10px; background: var(--st-licht); }
.st-contactkaart__kop { display: flex; align-items: center; gap: 20px; }
.st-contactkaart__foto { display: block; flex: none; width: 60px; height: 60px; overflow: hidden; border-radius: 200px; }
.st-contactkaart__foto img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.st-contactkaart .st-knop { align-self: flex-start; margin-top: 4px; }
.st-meer { display: flex; flex-direction: column; gap: 50px; padding: 3em 1em; background: var(--st-licht); }
.st-meer__kop { display: flex; flex-direction: column; gap: 10px; padding: 0 32px; text-align: center; }
.st-meer__tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.st-meer__tegel,
.st-lopend .st-tegel { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; min-height: 100px; padding: 10px; overflow: hidden; border-radius: 12px; background: var(--st-wit); color: var(--st-kop); font-size: 18px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: background .3s, color .3s; }
.st-meer__tegel::before,
.st-lopend .st-tegel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/logo-omtrek.png") right bottom / contain no-repeat; opacity: .09; }
.st-meer__tegel:hover,
.st-lopend .st-tegel:hover { background: var(--st-groen); color: var(--st-wit); }
.st-lopend .st-tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0 0 .9em; }
.st-lopend .st-tegel { background-color: var(--st-licht); }
.st-meer__onder { text-align: center; }
.st-bvragen { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 3em 1em; }
.st-bvragen .st-accordeon { max-width: 800px; }

/* ---------- De praktijk ---------- */
.st-voorzieningen { padding: 5em 1em 3em; background: var(--st-licht); }
.st-voorzieningen__binnen { display: flex; flex-direction: column; gap: 20px; padding: 0 0 16px 16px; }
.st-voorzieningen__raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.st-diashow { padding: 0 1em 5em; background: var(--st-licht); }
.st-diashow__venster { position: relative; height: 600px; overflow: hidden; border-radius: 10px; }
.st-diashow__dia { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.st-diashow__dia.is-actief { opacity: 1; }
.st-diashow__dia img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.st-pvragen { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 3em 1em; }
.st-pvragen .st-accordeon { max-width: 800px; }
.st-tijdensectie { padding: 5em 2em; background: var(--st-licht); }
.st-tijdensectie__binnen { display: flex; flex-wrap: wrap; align-items: center; gap: 50px 100px; }
.st-tijdensectie__img { display: block; width: 602px; max-width: 100%; height: 460px !important; border-radius: 10px; object-fit: cover; }
.st-tijdensectie__tekst { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 20px; max-width: 486px; }
.st-tijden { display: flex; flex-direction: column; gap: 5px; }
.st-tijden__rij { display: flex; }
.st-tijden dt { width: 40%; }
.st-tijden dd { width: 60%; }
.st-kaartsectie { line-height: 0; }
.st-kaartframe { display: block; width: 100%; height: 390px; border: 0; }

/* ---------- Over ons ---------- */
.st-over-team { display: flex; flex-direction: column; gap: 50px; padding: 5em 1em; }
.st-over-team__kop { max-width: 600px; margin: 0 auto; }

/* ---------- Spoed ---------- */
.st-spoedblokken { padding: 0 2em 5em; }
.st-spoedblokken__binnen { display: flex; justify-content: space-between; align-items: flex-start; }
.st-spoedblok { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 48%; padding: 32px; border-radius: 12px; background: var(--st-licht); }
.st-spoedblok__titel { color: var(--st-kop); font-size: 30px; font-weight: 700; line-height: 1.2; }
.st-spoedblok .st-knop { align-self: flex-start; }
.st-spoedinfo { padding: 2em; }
.st-spoedinfo__binnen { display: flex; justify-content: space-between; gap: 40px; }
.st-spoedinfo__blok { display: flex; flex-direction: column; gap: 10px; width: 50%; }
.st-samenwerking { padding: 4em 2em; }
.st-samenwerking__binnen { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.st-samenwerking__tekst { display: flex; flex-direction: column; gap: 10px; width: 46%; }
.st-video { position: relative; width: 50%; aspect-ratio: 640 / 390; overflow: hidden; border-radius: 10px; background: var(--st-licht); }
.st-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-video__vak { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 24px; text-align: center; }
.st-video__vak { background: #1d2a33; }
.st-video__plaatje { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; filter: brightness(.45); }
.st-video__vak > :not(.st-video__plaatje) { position: relative; z-index: 1; }
.st-video__speel { width: 68px; height: 48px; border-radius: 12px; background: #c4302b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 28px no-repeat; }
.st-video__titel { color: var(--st-wit); font-size: 18px; font-weight: 600; }
.st-video__tekst { max-width: 420px; color: rgba(255, 255, 255, .8); font-size: 14px; }
/* Opening van Over ons (foto met teller), Spoed en Tarieven (foto links). */
.st-intro__img--hoog { height: 500px !important; }
.st-intro__beeld--teller { display: flex; align-items: center; align-self: stretch; }
.st-teller--over { top: 403px; left: 514px; background: radial-gradient(at top left, var(--st-blauw) 0%, var(--st-blauw) 100%); }
.st-visie--open { padding-bottom: 0; border-bottom: 0; }
.st-intro--spoed,
.st-intro--tarieven { padding-inline: 2em; }
.st-intro__beeld--smal { width: 46%; }
.st-intro__tekst--rechts { width: 47%; padding: 0; }

/* ---------- Tarieven ---------- */
.st-vergoeding { padding: 2em 1em; background: var(--st-licht); }
.st-vergoeding__binnen { display: flex; flex-direction: column; gap: 40px; }
.st-vergoeding__kop { display: flex; flex-direction: column; gap: 10px; }
.st-tweekolom { display: flex; justify-content: center; align-items: flex-start; gap: 10px 40px; }
.st-tweekolom__kolom { display: flex; flex: 1; flex-direction: column; gap: 30px; }
.st-blokje { display: flex; flex-direction: column; gap: 10px; }
.st-betaling { padding: 2em 1em; }

/* ---------- Folders ---------- */
.st-folderskop { padding: 0 2em; }
.st-folderskop__binnen { padding: 32px 32px 32px 0; }
.st-foldergroep { padding: 2em 2em 3em; }
.st-foldergroep--licht { background: var(--st-licht); }
.st-foldergroep__binnen { display: flex; flex-direction: column; gap: 30px; }
.st-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.st-folder { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 20px; border-radius: 10px; background: var(--st-wit); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); color: var(--st-blauw); transition: background .3s, color .3s; }
.st-folder__naam { display: flex; align-items: center; gap: 8px; line-height: 22.4px; }
.st-folder__icoon { width: 19px; height: 19px; color: var(--st-tekst); transition: color .3s; }
.st-folder__pijl { width: 14px; height: 14px; }
.st-folder:hover { background: var(--st-groen); color: var(--st-wit); }
.st-folder:hover .st-folder__icoon { color: var(--st-wit); }

/* ---------- Inschrijven en Contact ---------- */
.st-inschrijven { padding: 4em 1em 4em; }
.st-inschrijven__binnen { display: flex; justify-content: space-between; }
.st-inschrijven__tekst { display: flex; flex-direction: column; gap: 20px; width: 35%; padding: 48px 48px 48px 16px; }
.st-formkaart { display: flex; flex-direction: column; gap: 20px; width: 45%; padding: 48px; border-radius: 7px; background: var(--st-wit); box-shadow: var(--st-schaduw); }
.st-formkaart__titel { color: var(--st-kop); font-size: 20px; font-weight: 700; line-height: 1.2; }
.st-inschrijven__beeld { display: flex; flex-direction: column; justify-content: center; width: 20%; }
.st-inschrijven__img { display: block; width: 100%; height: 500px !important; border-radius: 0 7px 7px 0; object-fit: cover; }
.st-privacyregel { font-size: 14px; line-height: 18px; }


.st-contactkop { padding: 5em 2em 3em; }
.st-contactkop__binnen { display: flex; flex-direction: column; gap: 60px; }
.st-contactkop__regels { display: flex; }
.st-contactregel { display: flex; gap: 20px; width: 339px; }
.st-contactregel__icoon { width: 32px; height: 32px; margin-top: 7px; color: var(--st-blauw); }
.st-contactregel__icoon--spoed { width: 38px; height: 38px; margin-top: 4px; }
.st-contactregel__titel { color: var(--st-kop); font-size: 18px; font-weight: 600; line-height: 1.4; }
.st-contactregel__tekst { color: var(--st-kop); line-height: 22.4px; }
.st-contactregel a:hover { color: var(--st-groen); }
.st-contactregel__tekst .st-link { color: var(--st-groen); text-decoration: underline; }
.st-afzeggen { padding: 0 2em; }
.st-afzeggen__binnen { display: flex; }
.st-afzeggen__img { display: block; flex: 0 0 30%; width: 30%; height: 257px !important; border-radius: 12px 1px 0 12px; object-fit: cover; }
.st-afzeggen__tekst { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 30px; border-radius: 0 20px 20px 0; background: var(--st-licht); }
.st-afzeggen__tekst .st-tekst { line-height: 1.6; }
.st-contactform { padding: 4em 2em 3em; }
.st-contactform__kaart { display: flex; overflow: hidden; border-radius: 10px; background: var(--st-wit); box-shadow: 0 -3px 60px rgba(0, 0, 0, .1); }
.st-contactform__kaart > .st-kaartframe,
.st-contactform__kaart > .st-kaartvak { flex: 0 0 50%; width: 50%; height: auto; min-height: 700px; }
.st-contactform__vak { display: flex; flex: 0 0 50%; flex-direction: column; justify-content: center; gap: 20px; padding: 48px; }
.st-contacttijden { padding: 0 2em; }
.st-contacttijden__binnen { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; padding: 48px 0; }
.st-contacttijden__vakken { display: flex; gap: 20px; width: 100%; }
.st-tijdvak { display: flex; flex-direction: column; gap: 5px; width: 538px; max-width: 100%; padding: 32px; border-radius: 12px; background: var(--st-licht); }

/* Formulier (zelfde opbouw als het Elementor-formulier) */
.st-form__velden { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.st-form__veld { width: 100%; margin-bottom: 14px; padding: 0 7px; }
.st-form__veld--half { width: 50%; }
.st-form__veld label { display: block; padding-bottom: 5px; color: var(--st-kop); font-size: 16px; font-weight: 600; line-height: 1.5; }
.st-form__verplicht { padding-left: .2em; color: red; }
.st-form input,
.st-form textarea {
	display: block;
	width: 100%;
	padding: 8px 16px;
	border: 1px solid var(--st-licht);
	border-radius: 7px;
	background: var(--st-licht);
	box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .1);
	color: var(--st-kop);
	font: 400 16px/1.4 var(--st-font);
}
.st-form input[type="date"] { min-height: 42.4px; }
.st-form textarea { height: 101.6px; padding: 5px 14px; resize: vertical; }
.st-form input:focus,
.st-form textarea:focus { border-color: var(--st-blauw); outline: 0; background: var(--st-wit); box-shadow: inset 0 -10px 10px rgba(0, 0, 0, .1); color: var(--st-tekst); }
.st-form .is-fout input,
.st-form .is-fout textarea { border-color: #c0392b; }
.st-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-form__verstuur { padding: 0 7px; }
.st-form__verstuur .st-knop { width: 100%; height: 40px; padding: 0 24px; border: 0; }
.st-form .st-knop[disabled] { opacity: .6; cursor: wait; }
.st-form__melding { margin-top: 14px; line-height: 1.5; }
.st-form__melding--ok { color: #3c8a1e; }
.st-form__melding--fout { color: #c0392b; }

/* ---------- Gewone pagina's (privacyverklaring, voorwaarden, cookiebeleid) ---------- */
.st-pagina { padding: 2em; }
.st-pagina__binnen { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.st-pagina__kop { padding-right: 2em; }
.st-pagina .st-lopend h4 { margin: 30px 0 4px; color: var(--st-kop); font-size: 20px; font-weight: 600; line-height: 1.4; }
.st-pagina .st-lopend h3 { margin: 30px 0 8px; color: var(--st-kop); font-size: 25px; font-weight: 400; line-height: 1.3; }
.st-pagina .st-lopend a { color: var(--st-groen); }

/* Kaart die pas na toestemming laadt */
.st-kaartvak { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; min-height: 360px; padding: 32px; background: #e9eef2; text-align: center; line-height: 1.4; }
.st-kaartvak__icoon { color: var(--st-blauw); font-size: 32px; line-height: 0; }
.st-kaartvak__titel { color: var(--st-kop); font-size: 18px; font-weight: 600; }
.st-kaartvak__tekst { max-width: 420px; font-size: 14px; }
.st-kaartvak__link { font-size: 14px; text-decoration: underline; }

/* 404 */
.st-niet-gevonden { padding: 10em 1em; }
.st-niet-gevonden::before { opacity: 0; }
.st-niet-gevonden__kaart { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 450px; margin: 0 auto; padding: 3em; border-radius: 10px; background: var(--st-wit); text-align: center; }
.st-niet-gevonden__getal { color: var(--st-blauw); font-size: 48px; font-weight: 700; line-height: 1.1; }

/* ---------- Footer ---------- */
.st-footer { position: relative; isolation: isolate; background: var(--st-licht); }
.st-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/logo-omtrek.png") right bottom / contain no-repeat; opacity: .1; }
.st-footer__hoofd { display: flex; justify-content: space-between; padding: 3em 2em; max-width: calc(var(--st-breed) + 4em); }
.st-footer__merk { display: flex; flex-direction: column; gap: 40px; width: 30%; padding-bottom: 16px; }
.st-footer__intro { display: flex; flex-direction: column; gap: 20px; }
.st-footer__logo { display: block; width: 236px; line-height: 0; }
.st-footer__logoimg { display: block; width: 100%; height: auto; }
.st-footer__tekst { font-size: 14px; line-height: 1.4; }
.st-footer__logos { display: flex; gap: 20px; width: 260px; }
.st-footer__logos a { display: block; width: 73px; line-height: 0; }
.st-footer__logos img { display: block; width: 100%; height: auto; }
.st-footer__kolom { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.st-footer__kolom--behandelingen { width: 15%; }
.st-footer__kolom--over { width: 16%; }
.st-footer__kolom--overig { width: 13%; }
.st-footer__kop { color: var(--st-kop); font-size: 20px; font-weight: 600; line-height: 1.4; }
.st-footer__lijst { margin: 0; padding: 0; list-style: none; }
.st-footer__lijst li { padding-bottom: 3.5px; font-size: 14px; line-height: 1.4; }
.st-footer__lijst li + li { padding-top: 3.5px; }
.st-footer__lijst a { transition: color .3s; }
.st-footer__lijst a:hover { color: var(--st-groen); }
.st-footer__knop { margin-top: 4px; }
.st-footer__onder { padding: 1em 2em; border-top: 1px solid var(--st-lijn); }
.st-footer__onderbinnen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.st-footer__regel { display: flex; flex-wrap: wrap; gap: 0 5px; font-size: 13px; line-height: 1.5; }
.st-footer__regel a:hover { color: var(--st-groen); }
.st-footer__social { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--st-blauw); color: var(--st-wit); }
.st-footer__social .st-icoon { width: 14px; height: 14px; }

/* ---------- Tablet (tot en met 1024) ---------- */
@media (max-width: 1024px) {
	body { font-size: 15px; }
	.st-label { font-size: 13px; }
	.st-h2 { font-size: 31px; }
	.st-h3 { font-size: 25px; }
	.st-h5 { font-size: 18px; }
	.st-groot { font-size: 44px; }
	.st-banner__titel--ruim { font-size: 37px; }
	.st-knop { font-size: 13px; }
	.st-knop--middel { font-size: 15px; }
	.st-knop--groot { font-size: 17px; }

	.st-nav,
	.st-bereikbaar:not(.st-bereikbaar--mobiel) { display: none !important; }
	.st-hamburger { display: block; }
	.st-kop__rechts { width: auto; gap: 14px; }

	.st-hero::before { opacity: .8; }
	.st-hero__binnen { width: 100%; padding: 32px 16px; }
	.st-usps { padding: 0 14px; }
	.st-usps__kaart { align-items: flex-start; padding: 2em; gap: 28px; border-radius: 50px; }
	.st-usps .st-icoonblok { flex-direction: column; text-align: center; }
	.st-team { grid-template-columns: repeat(2, 1fr); }
	.st-speerpunten__binnen { flex-direction: column; gap: 50px; }
	.st-speerpunten__tekst { width: 100%; padding: 0; }
	.st-speerpunten__beeld { width: 100%; }
	.st-speerpunten__img { width: 50%; height: 500px !important; }
	.st-ervaring__binnen { flex-direction: column-reverse; gap: 40px; }
	.st-ervaring__beeld,
	.st-ervaring__tekst { width: 100%; padding: 0; }
	.st-ervaring__img { height: 500px !important; }
	.st-teller { top: auto; bottom: -40px; left: auto; right: -20px; }
	.st-aangesloten__titel { font-size: 20px; line-height: 1.4; }
	.st-logos { gap: 14px; }
	.st-logos a { width: 110px; }
	.st-behandelingen { padding: 1em 0 3em; }
	.st-kaarten { grid-template-columns: repeat(2, 1fr); }
	.st-banner { padding: 5em 1em; }
	.st-team-sectie { padding: 3em 1em; }
	.st-speerpunten { padding: 3em 1em; }
	.st-speerpunten__tekst { padding: 0 32px 0 0; }
	.st-speerpunten__beeld { margin-top: 0; }
	.st-speerpunten__img { height: 640px !important; }
	.st-ervaring { padding: 3em 1em; }
	.st-ervaring__tekst { padding: 0 0 0 32px; }
	.st-reviews { padding: 1em 1em 3em; }
	.st-review { flex-basis: calc((100% - 28px) / 2); }
	.st-faq { padding: 3em 1em; }
	.st-tabs { gap: 24px; }
	.st-tabs__lijst { flex-basis: 240px; }
	.st-intro__tekst { padding: 32px 0 32px 32px; }
	.st-intro__tekst--links { padding: 32px 32px 32px 0; }
	.st-binhoud__tekst { width: 58%; }
	.st-contactkaart { width: 38%; }
	.st-meer__tegels { grid-template-columns: repeat(2, 1fr); }
	.st-folders { grid-template-columns: repeat(2, 1fr); }
	.st-inschrijven__tekst { width: 40%; padding: 32px 32px 32px 0; }
	.st-formkaart { width: 60%; padding: 32px; }
	.st-inschrijven__beeld { display: none; }
	.st-footer__hoofd { flex-wrap: wrap; gap: 30px 0; }
	.st-footer__merk { width: 100%; }
	.st-footer__kolom--behandelingen,
	.st-footer__kolom--over,
	.st-footer__kolom--overig { width: 33%; }
}

/* ---------- Telefoon (tot en met 767) ---------- */
@media (max-width: 767px) {
	body { font-size: 14px; }
	.st-label { font-size: 12px; }
	.st-h2 { font-size: 24px; }
	.st-h3 { font-size: 20px; }
	.st-h5 { font-size: 16px; }
	.st-groot { font-size: 32px; }
	.st-banner__titel--ruim { font-size: 30px; }
	.st-knop { font-size: 12px; }
	.st-knop--middel { font-size: 16px; }
	.st-knop--groot { font-size: 16px; }
	.st-icoonblok__titel,
	.st-kaart__titel,
	.st-lid__naam,
	.st-footer__kop { font-size: 16px; line-height: 1.4; }
	.st-icoonblok { gap: 12px; }
	.st-icoonblok__icoon,
	.st-icoonblok__icoon--klein { width: 53px; height: 53px; }
	.st-icoonblok__icoon .st-icoon,
	.st-icoonblok__icoon--klein .st-icoon { width: 25px; height: 25px; }
	.st-icoonblok__icoon--groot { width: 67px; height: 67px; }
	.st-icoonblok__icoon--groot .st-icoon { width: 35px; height: 35px; }
	.st-usps .st-icoonblok { gap: 14px; }

	.st-kop { padding: 0 14px; }
	.st-kop__binnen { min-height: 70px; }
	.st-logo { width: 190px; }
	.st-kop__rechts { gap: 20px; padding-right: 10px; }
	.st-kop__rechts > .st-kop__knop { display: none !important; }

	.st-hero { padding: 5em 0 9em; }
	.st-hero::before { opacity: .88; }
	.st-hero__binnen { width: 100%; padding: 0 14px; }
	.st-usps { padding: 0 14px 2em; }
	.st-usps__kaart { flex-direction: column; align-items: stretch; padding: 28px; border-radius: 50px; }
	.st-behandelingen { padding: 0 14px 2em; }
	.st-behandelingen__kop { padding: 0; }
	.st-kaarten { grid-template-columns: 1fr; }
	.st-banner { padding: 2em 14px; }
	.st-banner__binnen { padding: 0; }
	.st-team-sectie { gap: 30px; padding: 2em 14px; }
	.st-team { grid-template-columns: repeat(2, 1fr); }
	.st-lid__foto { height: 200px !important; }
	.st-speerpunten { padding: 2em 14px; }
	.st-speerpunten__img { width: 100%; height: 350px !important; border-radius: 10px 10px 150px 150px; }
	.st-belblok { right: 0; bottom: 14px; gap: 12px; padding: 14px; }
	.st-belblok__icoon { width: 49px; height: 49px; }
	.st-belblok__icoon .st-icoon { width: 21px; height: 21px; }
	.st-ervaring { padding: 2em 14px 0; }
	.st-ervaring__img { height: 225px !important; }
	.st-teller { top: auto; bottom: -37px; left: auto; right: -7px; width: 100px; height: 100px; }
	.st-teller__getal { font-size: 30px; }
	.st-teller__titel { font-size: 10px; }
	.st-ervaring__acties { flex-direction: column; align-items: center; }
	.st-ervaring__acties .st-knop { width: 100%; font-size: 16px; }
	.st-ervaring__tel { font-size: 16px; }
	.st-aangesloten { padding: 3em 14px 2em; }
	.st-aangesloten__binnen { flex-direction: column; align-items: center; }
	.st-aangesloten__titel { text-align: center; }
	.st-logos { justify-content: space-between; width: 100%; }
	.st-logos a { width: calc((100vw - 28px - 40px) / 3); }
	.st-aangesloten__titel { font-size: 22px; }
	.st-reviews { padding: 2em 14px; }
	.st-reviews__kop { flex-direction: column; gap: 20px; text-align: center; }
	.st-review { flex-basis: 100%; }
	.st-faq { gap: 30px; padding: 2em 14px; }
	/* Op de telefoon staan de vragen direct onder hun tabblad, zoals bij Elementor. */
	.st-tabs { flex-direction: column; gap: 10px; }
	.st-tabs__lijst { display: contents; }
	.st-tabs__tab { font-size: 14px; }
	.st-tabs__paneel { margin-bottom: 14px; }
	.st-accordeon__vraag { padding: 16px 16px; font-size: 14px; line-height: 1.5; }
	.st-intro { padding: 2em 14px; }
	.st-intro__binnen { flex-direction: column; gap: 30px; }
	.st-intro__tekst,
	.st-intro__tekst--links,
	.st-intro__beeld { width: 100%; padding: 0; }
	.st-intro__img { height: 260px !important; }
	.st-intro--over .st-intro__binnen { flex-direction: column-reverse; }
	.st-intro--spoed .st-intro__beeld { display: none; }
	.st-spoedblokken { padding-bottom: 14px; }
	.st-overzicht { padding: 2em 14px; }
	.st-overzicht__kop { padding: 0; }
	.st-bhero { padding: 3em 14px; }
	.st-bhero__binnen { width: 100%; }
	.st-bhero__binnen { padding: 21px 7px; }
	.st-bhero__titel { font-size: 24px; }
	.st-binhoud { padding: 2em 14px; }
	.st-binhoud__binnen { flex-direction: column; gap: 30px; }
	.st-binhoud__tekst,
	.st-contactkaart { width: 100%; }
	.st-lopend > h2 { font-size: 20px; }
	.st-meer { padding: 2em 14px; gap: 30px; }
	.st-meer__kop { padding: 0; }
	.st-meer__tegel { min-height: 80px; font-size: 15px; }
	.st-bvragen,
	.st-pvragen { gap: 30px; padding: 2em 14px; }
	.st-voorzieningen { padding: 2em 14px; }
	.st-voorzieningen__binnen { padding: 0; }
	.st-voorzieningen__raster { grid-template-columns: 1fr; }
	.st-diashow { padding: 0 14px 2em; }
	.st-diashow__venster { height: 260px; }
	.st-tijdensectie { padding: 2em 14px; }
	.st-tijdensectie__binnen { gap: 30px; }
	.st-tijdensectie__img { height: 260px !important; }
	.st-spoedblokken,
	.st-spoedinfo,
	.st-samenwerking,
	.st-folderskop,
	.st-foldergroep,
	.st-afzeggen,
	.st-contactform,
	.st-contacttijden,
	.st-contactkop { padding-inline: 14px; }
	.st-spoedblokken__binnen,
	.st-spoedinfo__binnen,
	.st-samenwerking__binnen,
	.st-tweekolom { flex-direction: column; gap: 20px; }
	.st-spoedblok,
	.st-spoedinfo__blok,
	.st-samenwerking__tekst,
	.st-video { width: 100%; }
	.st-spoedblok { padding: 24px; }
	.st-spoedblok__titel { font-size: 26px; }
	.st-folders { grid-template-columns: 1fr; }
	.st-folderskop__binnen { padding: 2em 0 1em; }
	.st-inschrijven { padding: 2em 14px; }
	.st-inschrijven__binnen { flex-direction: column; gap: 20px; }
	.st-inschrijven__tekst,
	.st-formkaart { width: 100%; padding: 0; }
	.st-formkaart { padding: 24px; }
	.st-form__veld--half { width: 100%; }
	.st-form__veld label { font-size: 14px; }
	.st-contactkop { padding-block: 2em; }
	.st-contactkop__binnen { gap: 30px; }
	.st-contactkop__regels { gap: 0; }
	.st-contactregel { flex-direction: column; gap: 20px; width: 50%; }
	.st-contactregel__titel { font-size: 14px; }
	.st-afzeggen__binnen { flex-direction: column; }
	.st-afzeggen__img { flex-basis: auto; width: 100%; height: 200px !important; border-radius: 12px 12px 0 0; }
	.st-afzeggen__tekst { border-radius: 0 0 12px 12px; }
	.st-contactform__kaart { flex-direction: column; }
	.st-contactform__kaart > .st-kaartframe,
	.st-contactform__kaart > .st-kaartvak { flex-basis: auto; width: 100%; min-height: 250px; }
	.st-contactform__vak { padding: 24px; }
	.st-contacttijden__vakken { flex-direction: column; }
	.st-tijdvak { padding: 24px; }
	.st-pagina { padding: 2em 14px; }
	.st-footer::before { background-size: 250px auto; }
	.st-footer__hoofd { padding: 2em 14px; gap: 20px 0; }
	.st-footer__merk { gap: 30px; }
	.st-footer__kolom--behandelingen,
	.st-footer__kolom--over,
	.st-footer__kolom--overig { width: 100%; }
	.st-footer__onder { padding: 1em 14px; }
	.st-footer__tekst,
	.st-footer__lijst li { font-size: 12px; }
	.st-footer__logos { justify-content: space-between; width: 100%; }
	.st-footer__logos a { width: 27%; }
	.st-footer__regel { font-size: 11px; }
}

/* ---------- Cookiebanner ---------- */
.st-cookies { position: fixed; left: 24px; bottom: 24px; z-index: 350; width: min(440px, calc(100vw - 48px)); }
.st-cookies__kaart {
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 26px 26px 20px;
	border-radius: 12px;
	background: var(--st-wit);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}
.st-cookies.is-open .st-cookies__kaart { opacity: 1; transform: none; }
.st-cookies__titel { margin-bottom: 6px; color: var(--st-kop); font-size: 20px; font-weight: 700; line-height: 1.3; }
.st-cookies__tekst { font-size: 14px; line-height: 22px; }
.st-cookies__tekst p { margin: 0; }
.st-cookies__voorkeuren { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--st-lijn); }
.st-cookies__optie { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 21px; cursor: pointer; }
.st-cookies__optie input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--st-blauw); }
.st-cookies__optie strong { display: block; color: var(--st-kop); }
.st-cookies__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.st-cookies__knoppen .st-knop { flex: 1 1 auto; padding: 10px 18px; font-size: 14px; }
.st-cookies__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 14px; font-size: 13px; line-height: 20px; }
.st-cookies__link { padding: 0; border: 0; background: none; color: var(--st-tekst); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-cookies__link:hover { color: var(--st-blauw); }
@media (max-width: 767px) {
	.st-cookies { left: 12px; right: 12px; bottom: 12px; width: auto; }
	.st-cookies__kaart { padding: 22px 20px 18px; }
	.st-cookies__knoppen .st-knop { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}