.kg-lesoverzicht {
display: grid;
gap: clamp(2rem, 4vw, 3rem);
max-width: none !important;
margin-block: var(--wp--preset--spacing--40);
}
.kg-lesoverzicht [data-doelgroep="jeugd"]       { --kg-kleur: var(--wp--custom--groep--jeugd); }
.kg-lesoverzicht [data-doelgroep="volwassenen"] { --kg-kleur: var(--wp--custom--groep--volwassenen); }
.kg-lesoverzicht [data-doelgroep="persoonlijk"] { --kg-kleur: var(--wp--custom--groep--persoonlijk); }
.kg-lesoverzicht .kg-les__voorlezen {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.kg-lesoverzicht .kg-lesgroep {
border-top: 1px solid var(--kg-lijn);
scroll-margin-top: 6rem;
}
.kg-lesoverzicht .kg-lesgroep__kop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.15rem 1.25rem;
padding-block: clamp(1rem, 2.5vw, 1.4rem);
list-style: none;
cursor: pointer;
}
.kg-lesoverzicht .kg-lesgroep__kop::-webkit-details-marker {
display: none;
}
.kg-lesoverzicht .kg-lesgroep__meta {
grid-column: 1;
color: color-mix(in srgb, var(--kg-kleur) 70%, var(--kg-tekst));
font-family: var(--wp--preset--font-family--display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.kg-lesoverzicht .kg-lesgroep__titel {
grid-column: 1;
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--custom--tekst--blokkop);
font-weight: 800;
line-height: 1;
letter-spacing: -0.01em;
text-transform: uppercase;
transition: color 0.15s ease;
}
@media (hover: hover) {
.kg-lesoverzicht .kg-lesgroep__kop:hover {
background: color-mix(in srgb, var(--kg-kleur) 7%, transparent);
}
.kg-lesoverzicht .kg-lesgroep__kop:hover .kg-lesgroep__titel {
color: color-mix(in srgb, var(--kg-kleur) 70%, var(--kg-tekst));
}
.kg-lesoverzicht .kg-lesgroep__kop:hover .kg-lesgroep__pijl {
border-color: var(--kg-kleur);
}
.kg-lesoverzicht .kg-les__kop:hover {
background: color-mix(in srgb, var(--kg-kleur) 12%, transparent);
border-left-color: var(--kg-kleur);
}
.kg-lesoverzicht .kg-les__kop:hover .kg-les__naam {
color: color-mix(in srgb, var(--kg-kleur) 70%, var(--kg-tekst));
}
.kg-lesoverzicht .kg-les__kop:hover::after {
border-color: var(--kg-kleur);
}
}
.kg-lesoverzicht summary:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: -2px;
}
.kg-lesoverzicht .kg-lesgroep__namen {
grid-column: 1;
margin-top: 0.35rem;
color: var(--kg-zacht);
font-size: var(--wp--custom--tekst--klein);
}
.kg-lesoverzicht .kg-lesgroep[open] .kg-lesgroep__namen {
display: none;
}
.kg-lesoverzicht .kg-lesgroep__pijl {
grid-column: 2;
grid-row: 1 / -1;
width: 0.65rem;
height: 0.65rem;
margin-right: 0.4rem;
border-right: 2px solid var(--kg-zacht);
border-bottom: 2px solid var(--kg-zacht);
transform: rotate(45deg) translate(-0.15rem, -0.15rem);
transition: transform 0.18s ease;
}
.kg-lesoverzicht .kg-lesgroep[open] .kg-lesgroep__pijl {
transform: rotate(-135deg);
}
.kg-lesoverzicht .kg-lesgroep__tekst {
margin: 0 0 1.1rem;
max-width: 44rem;
color: var(--kg-tekst);
font-size: var(--wp--custom--tekst--klein);
line-height: 1.6;
}
.kg-lesoverzicht .kg-leslijst {
margin: 0;
padding: 0;
list-style: none;
}
.kg-lesoverzicht .kg-les {
margin: 0;
border-top: 1px solid var(--kg-lijn);
}
.kg-lesoverzicht .kg-les:last-child {
border-bottom: 1px solid var(--kg-lijn);
}
.kg-lesoverzicht .kg-les__kop {
display: grid;
grid-template-columns: minmax(0, 1fr) 0.9rem;
align-items: center;
gap: 0.15rem 1rem;
padding: 0.85rem 0.9rem 0.85rem 0.75rem;
border-left: 3px solid transparent;
list-style: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kg-lesoverzicht .kg-les__kop::-webkit-details-marker {
display: none;
}
.kg-lesoverzicht .kg-les__kop::after {
content: "";
grid-column: 2;
grid-row: 1 / -1;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid var(--kg-zacht);
border-bottom: 2px solid var(--kg-zacht);
transform: rotate(45deg) translate(-0.1rem, -0.1rem);
transition: transform 0.18s ease, border-color 0.15s ease;
}
.kg-lesoverzicht .kg-les__uitklap[open] > .kg-les__kop::after {
transform: rotate(-135deg);
}
.kg-lesoverzicht .kg-les__uitklap[open] > .kg-les__kop {
background: color-mix(in srgb, var(--kg-kleur) 12%, transparent);
border-left-color: var(--kg-kleur);
}
.kg-lesoverzicht .kg-les__naam {
grid-column: 1;
grid-row: 1;
font-family: var(--wp--preset--font-family--display);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.15;
text-transform: uppercase;
transition: color 0.15s ease;
}
.kg-lesoverzicht .kg-les__leeftijd {
grid-column: 1;
grid-row: 2;
color: var(--kg-zacht);
font-size: 0.8125rem;
}
.kg-lesoverzicht .kg-les__kort {
display: none;
grid-column: 1;
grid-row: 4;
margin-top: 0.4rem;
color: var(--kg-tekst);
font-size: var(--wp--custom--tekst--klein);
line-height: 1.5;
}
.kg-lesoverzicht .kg-les__uitklap[open] > .kg-les__kop .kg-les__kort {
display: block;
}
.kg-lesoverzicht .kg-les__wanneer {
grid-column: 1;
grid-row: 3;
margin-top: 0.15rem;
}
.kg-lesoverzicht .kg-dagen {
display: block;
color: var(--kg-zacht);
font-family: var(--wp--preset--font-family--display);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.kg-lesoverzicht .kg-week {
display: none;
gap: 2px;
}
.kg-lesoverzicht .kg-week b {
display: grid;
place-items: center;
width: 1.6rem;
height: 1.4rem;
border-radius: 3px;
background: var(--kg-vlak-op);
color: color-mix(in srgb, var(--kg-tekst) 28%, transparent);
font-family: var(--wp--preset--font-family--display);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.kg-lesoverzicht .kg-week b.is-aan {
background: color-mix(in srgb, var(--kg-kleur) 78%, var(--wp--preset--color--contrast));
color: var(--wp--preset--color--base);
}
.kg-lesoverzicht .kg-les__geen {
display: block;
color: var(--kg-zacht);
font-family: var(--wp--preset--font-family--display);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.kg-lesoverzicht .kg-les__paneel {
display: grid;
gap: 1.1rem;
padding: 0.4rem 0.9rem 1.5rem 1.15rem;
border-left: 3px solid var(--kg-kleur);
scroll-margin-top: 11rem;
}
.kg-lesoverzicht .kg-les__beeld {
aspect-ratio: 16 / 9;
background:
repeating-linear-gradient(45deg,
color-mix(in srgb, var(--kg-kleur) 16%, transparent) 0 12px,
transparent 12px 24px),
color-mix(in srgb, var(--wp--preset--color--surface) 60%, var(--wp--preset--color--base));
}
.kg-lesoverzicht .kg-les__foto {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.kg-lesoverzicht .kg-les__tekst {
display: grid;
gap: 0.85rem;
align-content: start;
}
.kg-lesoverzicht .kg-les__waarom {
margin: 0;
max-width: 40rem;
color: var(--kg-tekst);
font-size: var(--wp--custom--tekst--klein);
line-height: 1.6;
}
.kg-lesoverzicht .kg-les__punten {
display: grid;
gap: 0.45rem;
margin: 0;
padding: 0;
max-width: 40rem;
list-style: none;
}
.kg-lesoverzicht .kg-les__punten li {
position: relative;
margin: 0;
padding-left: 1.4rem;
color: var(--kg-tekst);
font-size: var(--wp--custom--tekst--klein);
line-height: 1.5;
}
.kg-lesoverzicht .kg-les__punten li::before {
content: "";
position: absolute;
left: 0.2rem;
top: 0.58em;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: var(--kg-kleur);
}
.kg-lesoverzicht .kg-lestijden__onbekend {
margin: 0 !important;
max-width: 40rem;
}
.kg-lesoverzicht .kg-les__knoppen {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
max-width: none;
}
.kg-lesoverzicht .kg-knop--klein {
min-height: 44px;
padding: 0.6rem 1.1rem;
font-size: 0.75rem;
}
@media (prefers-reduced-motion: no-preference) {
.kg-lesoverzicht .kg-les:has(.kg-les__paneel:target) {
animation: kg-aangekomen 1.6s ease-out;
}
}
@keyframes kg-aangekomen {
from { background: color-mix(in srgb, var(--kg-kleur) 34%, transparent); }
to   { background: color-mix(in srgb, var(--kg-kleur) 12%, transparent); }
}
@media (min-width: 62em) {
.kg-lesoverzicht .kg-lesgroep__kop {
grid-template-columns: minmax(0, 1fr) auto;
}
.kg-lesoverzicht .kg-les__kop {
grid-template-columns: 14rem minmax(0, 1fr) auto 0.9rem;
gap: 0.1rem 1.75rem;
padding-inline: 0.75rem 0.9rem;
}
.kg-lesoverzicht .kg-les__kop::after {
grid-column: 4;
grid-row: 1 / 3;
}
.kg-lesoverzicht .kg-les__kort {
display: block;
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
margin-top: 0;
}
.kg-lesoverzicht .kg-les__wanneer {
grid-column: 3;
grid-row: 1 / 3;
margin-top: 0;
}
.kg-lesoverzicht .kg-week {
display: inline-flex;
}
.kg-lesoverzicht .kg-dagen {
display: none;
}
.kg-lesoverzicht .kg-les__paneel {
grid-template-columns: 17rem minmax(0, 1fr);
align-items: start;
gap: 1.3rem 2.25rem;
padding-block: 0.5rem 1.9rem;
}
.kg-lesoverzicht .kg-les__beeld {
grid-column: 1;
grid-row: 1;
aspect-ratio: 4 / 3;
}
.kg-lesoverzicht .kg-les__tekst {
grid-column: 2;
grid-row: 1;
}
.kg-lesoverzicht .kg-les__knoppen {
grid-column: 1 / -1;
grid-row: 2;
}
}
@media (prefers-reduced-motion: reduce) {
.kg-lesoverzicht .kg-les__kop,
.kg-lesoverzicht .kg-les__kop::after,
.kg-lesoverzicht .kg-les__naam,
.kg-lesoverzicht .kg-lesgroep__pijl,
.kg-lesoverzicht .kg-lesgroep__titel {
transition: none;
}
}
@media (forced-colors: active) {
.kg-lesoverzicht .kg-week b {
border: 1px solid;
}
}