/* Voorleesspeler — volgt de themakleuren. */
.sae-speler {
	display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center;
	margin: 0 0 2.4rem; padding: 1.1rem 1.3rem;
	background: #fff; border: 1px solid #e7e3db; border-radius: 10px;
	font-family: var(--sat-sans, system-ui, sans-serif); font-size: .92rem; color: var(--sat-donker, #2a2a2a);
}
.sae-speler__icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sat-groen, #60734e); color: #fff; grid-row: span 2; }
.sae-speler__titel { margin: 0 !important; font-family: var(--sat-serif, Georgia, serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.sae-speler__sub { margin: .1rem 0 0 !important; color: #6b6b6b; font-size: .84rem; }
.sae-speler__bediening { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .5rem; }
.sae-speler audio { flex: 1 1 280px; min-width: 0; height: 40px; }
.sae-speler__snelheid { display: flex; gap: .25rem; }
.sae-speler__snelheid button { border: 1px solid #e7e3db; background: #fff; border-radius: 999px; padding: .3rem .6rem; font: inherit; font-size: .78rem; color: #555; cursor: pointer; }
.sae-speler__snelheid button.is-actief { background: var(--sat-groen, #60734e); border-color: var(--sat-groen, #60734e); color: #fff; }
.sae-speler__maak { background: var(--sat-groen, #60734e); color: #fff; border: 0; border-radius: 999px; padding: .7rem 1.3rem; font: inherit; font-weight: 500; cursor: pointer; }
.sae-speler__maak[disabled] { opacity: .6; cursor: default; }
.sae-speler__noot { grid-column: 1 / -1; margin: .2rem 0 0 !important; font-size: .72rem; color: #8a857d; }
@media print { .sae-speler { display: none; } }

/* 1.1.6: compacte speler achter het koptelefoontje op de regel met de pdf- en printknop. */
html.sae-js:not(.sae-speler-klaar) .sae-speler[data-sae-heeft-audio],
.sae-speler.is-compact:not(.is-open) { display: none; }
.sae-speler.is-compact { margin: -0.6rem 0 2rem; }
.sae-heeft-luister { display: flex !important; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sae-luister {
	display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 0 auto; padding: 0 1rem 0 .8rem; height: 2.4rem;
	border: 1px solid var(--sat-rand, #e7e3db); border-radius: 999px; background: transparent;
	font: 500 .9rem/1 var(--sat-sans, system-ui, sans-serif); color: var(--sat-donker, #2a2a2a); cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.sae-luister svg { color: var(--sat-groen, #60734e); flex: 0 0 auto; }
.sae-luister__duur { color: var(--sat-zacht, #6b6b6b); font-weight: 400; }
.sae-luister__duur:empty { display: none; }
.sae-luister__duur::before { content: "·"; margin-right: .45rem; }
.sae-luister:hover, .sae-luister[aria-expanded="true"] { background: var(--sat-groen, #60734e); border-color: var(--sat-groen, #60734e); color: #fff; }
.sae-luister:hover svg, .sae-luister[aria-expanded="true"] svg, .sae-luister:hover .sae-luister__duur, .sae-luister[aria-expanded="true"] .sae-luister__duur { color: #fff; }
.sae-luister:focus-visible { outline: 2px solid var(--sat-goud, #cba545); outline-offset: 2px; }
@media print { .sae-luister { display: none; } }