/* Aanvullingen op sf.css (dat 1:1 uit het ontwerp komt en niet wordt aangepast).
   Hier staat alleen wat het ontwerp met inline stijlen of gedrag oploste. */

/* hidden wint altijd, ook van display uit .sf-btn en andere componenten */
[hidden] { display: none !important; }

/* Knoppen op donkere header en drawer (in het ontwerp inline) */
.sf-header .sf-btn--primary,
.sf-drawer .sf-btn--primary { background: var(--sf-petrol-licht); color: var(--sf-asfalt) !important; }
.sf-drawer .sf-btn--secondary { border-color: var(--sf-petrol-licht); color: var(--sf-petrol-licht) !important; background: transparent; }
.sf-drawer__knoppen { margin-top: var(--sf-s-6); }
.sf-drawer__account { margin-top: var(--sf-s-6); }
.sf-drawer[hidden] { display: none; }
@media (min-width: 1024px) { .sf-drawer { display: none !important; } }

/* Profielmenu als uitklapper */
.sf-header__profielwrap { position: relative; display: none; }
@media (min-width: 1024px) { .sf-header__profielwrap { display: inline-flex; } }
.sf-header__dropdown { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.sf-header__dropdown[hidden] { display: none; }
/* Submenu's in het hoofdmenu op desktop: open bij hover en via de pijlknop. */
.sf-header__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.sf-header__groep { position: relative; display: inline-flex; align-items: center; }
.sf-header__groep > a { padding-right: 4px; }
.sf-header__subknop { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: var(--sf-target); border: 0; border-radius: var(--sf-r-2); background: transparent; color: var(--sf-beton); cursor: pointer; }
.sf-header__subknop:hover { background: var(--sf-antraciet); }
.sf-header__subknop .sf-i { transition: transform .15s; }
.sf-header__subknop[aria-expanded="true"] .sf-i { transform: rotate(180deg); }
.sf-header__sub { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; margin: 0; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.sf-header__sub[hidden] { display: none; }
.sf-header__nav .sf-header__sub a { color: var(--sf-text) !important; font-weight: 400; padding: 0 var(--sf-s-3); }
.sf-header__nav .sf-header__sub a:hover { background: var(--sf-bg-alt); }
.sf-menu form { margin: 0; }
img.sf-avatar { object-fit: cover; }

main:focus { outline: none; }

/* Witruimte tussen de laatste inhoud en de footer; zonder deze regel plakte
   een grijs blok onderaan (zoals 'Vragen over deze pagina?') tegen de footer. */
.sf-footer { margin-top: var(--sf-s-10); }
/* Getekend straatpatroon achter de footer, gedempt met een laag asfalt (70%)
   zodat de grijze teksten leesbaar blijven. De tegel is half zo groot als het
   bestand, dan blijft hij scherp op een retinascherm. Het patroon (116 KB)
   komt pas als de footer in de buurt komt: site.js zet dan --patroon, zodat
   het de foto's bovenaan niet ophoudt. */
.sf-footer { background-color: var(--sf-asfalt); }
.sf-footer--patroon {
  background-image: linear-gradient(rgb(18 20 23 / .7), rgb(18 20 23 / .7)), url(../img/footer-patroon.webp);
  background-size: auto, 627px;
}
.sf-footer__intro { color: var(--sf-donker-300); }

/* Flash-meldingen na een formulier */
.sf-flashes { padding-top: var(--sf-s-4); display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-flashes:focus { outline: none; }
.sf-flash { display: flex; gap: var(--sf-s-2); align-items: flex-start; padding: var(--sf-s-3) var(--sf-s-4); border-radius: var(--sf-r-2); background: var(--sf-subtle); color: var(--sf-on-subtle); font-weight: 500; }
.sf-flash--fout { background: var(--sf-rood-licht); color: var(--sf-rood); }

/* Foutpagina's */
.sf-foutpagina { padding-block: var(--sf-s-16) var(--sf-s-20); }

/* Kaarten: aanvullingen op sf.css, in plaats van de inline styles uit het ontwerp */
.sf-card__foot--stapel { flex-direction: column; align-items: stretch; }
.sf-assignment .sf-eyebrow { color: var(--sf-donker-300); }
.sf-promo .sf-eyebrow { color: var(--sf-grijs-600); }
.sf--donker .sf-promo .sf-eyebrow { color: var(--sf-donker-300); }
.sf-promo > img { width: 100%; height: 100%; object-fit: cover; }
.sf-promo--zonder-beeld { grid-template-columns: minmax(0, 1fr) !important; }
/* Eén regel naar het aanbod halverwege lange artikelen (partials/promo-regel.php) */
.sf-prose .sf-promo-regel { margin-block: var(--sf-s-8); padding-block: var(--sf-s-4); border-block: 1px solid var(--sf-border); }
.sf-prose .sf-promo-regel p { margin: 0; font-size: var(--sf-fs-2); }
.sf-promo-regel .sf-eyebrow { display: block; margin-bottom: var(--sf-s-1); color: var(--sf-grijs-600); }
.sf-promo-regel__titel { font-weight: 600; margin-right: var(--sf-s-2); }
.sf-photo__link img, .sf-kb > img, .sf-video__frame > img { width: 100%; height: auto; }
.sf-video__frame > img { display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-video__frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.sf-label-status--klein { min-height: 22px; padding: 0 8px; }
.sf-comment__text p + p { margin-top: var(--sf-s-2); }

/* Rij met kaarten: één kolom mobiel, twee vanaf md, drie vanaf lg */
.sf-kaartenrij { display: grid; gap: var(--sf-s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container sf (min-width: 768px) { .sf-kaartenrij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container sf (min-width: 1024px) { .sf-kaartenrij--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Styleguide */
.sf-styleguide__blok { padding-block: var(--sf-s-10); border-top: var(--sf-b-1); }
.sf-styleguide__blok > h2 { margin-bottom: var(--sf-s-6); }

/* sf.css zet .sf button op color: inherit, en dat wint van .sf-video__load */
.sf .sf-video__load { color: #fff; }

/* ─── Ledenprofiel, instellingen en vermeldingen (fase 2) ─── */
.sf-profiel__eigen { margin-bottom: var(--sf-s-6); }
@media (min-width: 768px) {
  .sf-profilehead__top > :first-child { grid-row: 1 / span 2; }
  .sf-profiel__tekst { grid-column: 2; grid-row: 2; }
  .sf-profiel__acties { grid-column: 3; grid-row: 1; }
}
.sf-bio { max-width: 62ch; }
.sf-bio__meer > summary { cursor: pointer; display: inline-block; color: var(--sf-petrol); text-decoration: underline; list-style: none; min-height: var(--sf-target); padding-block: 12px; }
.sf-bio__meer > summary::-webkit-details-marker { display: none; }
.sf-bio__meer .sf-bio__meer-dicht { display: none; }
.sf-bio__meer[open] .sf-bio__meer-dicht { display: inline; }
.sf-bio__meer[open] .sf-bio__meer-open { display: none; }
.sf-bio:has(details[open]) .sf-bio__kort { display: none; }
.sf-vermeldingen__jaar { display: grid; gap: var(--sf-s-2); padding-block: var(--sf-s-3); border-top: var(--sf-b-1); }
.sf-vermeldingen__jaartal { font-size: var(--sf-fs-h5, 1.125rem); font-weight: 600; }
@media (min-width: 720px) { .sf-vermeldingen__jaar { grid-template-columns: 96px minmax(0, 1fr); } }

.sf-instellingen__avatar { align-items: flex-start; gap: var(--sf-s-6); }
.sf-vermelding-rij { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-s-3); padding-block: var(--sf-s-2); }
.sf-vermelding-rij__acties { margin-left: auto; align-items: flex-start; }
.sf-i--omhoog { transform: rotate(180deg); }
.sf-bevestig { position: relative; }
.sf-bevestig > summary { list-style: none; cursor: pointer; }
.sf-bevestig > summary::-webkit-details-marker { display: none; }
.sf-bevestig__vak { position: absolute; right: 0; z-index: 5; display: grid; gap: var(--sf-s-3); width: 260px; margin-top: var(--sf-s-1); padding: var(--sf-s-4); background: var(--sf-surface); border: var(--sf-b-1); border-radius: var(--sf-r-2); box-shadow: 0 4px 16px rgb(0 0 0 / .12); }
.sf-beheer__sub { display: block; }
.sf-beheer__filterknop { align-self: flex-end; }
.sf-table .sf-bevestig__vak { position: static; width: 220px; box-shadow: none; }
.sf-vermelding-rij__acties .sf-bevestig__vak { max-width: calc(100vw - 2 * var(--sf-s-4)); }
.sf-table-wrap { position: relative; }
.sf-sorteer { display: inline-flex; align-items: center; gap: var(--sf-s-1); color: inherit; text-decoration: none; }
.sf-sorteer:hover, .sf-sorteer:focus-visible { text-decoration: underline; }
.sf-sorteer__pijl { font-size: .75em; }

/* Foto's (fase 3): galerij, ledenlijst, fotopagina en portfoliobeheer */
.sf-galerij__kop { max-width: 62ch; }
.sf-galerij__select { min-width: 180px; min-height: 44px; padding-block: 8px; }
/* Een keuzelijst met data-sf-direct verstuurt zichzelf (fotos.js). De knop 'Toon'
   valt al weg vóór het script draait, anders verschuift de pagina eronder (CLS). */
@media (scripting: enabled) { form:has(select[data-sf-direct]) button[type="submit"] { display: none; } }
/* Meer lucht onder elk bijschrift, zodat titel en fotograaf zichtbaar bij de foto erboven horen */
.sf .sf-grid-masonry > * { margin-bottom: var(--sf-s-6); }
@media (min-width: 768px) { .sf .sf-grid-masonry > * { margin-bottom: var(--sf-s-8); } }
.sf-galerij__fotos { padding-bottom: var(--sf-s-12, 96px); }

.sf-ledenlijst { padding-bottom: var(--sf-s-12, 96px); }
.sf-ledenlijst__zoek { max-width: 480px; flex-wrap: nowrap; }
.sf-ledenlijst__zoek .sf-input { flex: 1 1 auto; }
.sf-ledenlijst__raster { display: grid; gap: var(--sf-s-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sf-ledenlijst__kaart { display: flex; align-items: center; gap: var(--sf-s-4); height: 100%; padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-surface); color: var(--sf-text) !important; text-decoration: none !important; }
.sf-ledenlijst__kaart:hover { border-color: var(--sf-text); }
.sf-ledenlijst__kaart:hover .sf-strong { text-decoration: underline; }

.sf-foto { margin: 0; padding-block: var(--sf-s-6) var(--sf-s-4); }
.sf-foto__wrap { display: grid; gap: var(--sf-s-3); }
.sf-foto__zoom { display: block; cursor: zoom-in; }
.sf-foto__img, .sf-foto__zoom img { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: contain; }
/* Op een telefoon lager, zodat titel en fotograaf zonder scrollen in beeld komen */
@media (max-width: 767px) { .sf-foto__img, .sf-foto__zoom img { max-height: 60vh; } }
.sf-foto__onder { flex-wrap: wrap; }
.sf-foto__buren { gap: var(--sf-s-2); }
.sf-foto__info { padding-block: var(--sf-s-6) var(--sf-s-12, 96px); }
.sf-foto__maker { color: var(--sf-text) !important; }
.sf-foto__menu { position: relative; }
.sf-foto__menu > summary { list-style: none; cursor: pointer; }
.sf-foto__menu > summary::-webkit-details-marker { display: none; }
.sf-foto__menu > .sf-menu { position: absolute; left: 0; top: calc(100% + var(--sf-s-1)); z-index: 10; box-shadow: 0 8px 24px rgb(0 0 0 / .35); }
.sf-foto__meld > .sf-menu { width: min(320px, calc(100vw - 2 * var(--sf-s-4))); padding: var(--sf-s-4); }
.sf-foto__menukop { padding: var(--sf-s-2) var(--sf-s-3); }
.sf-foto__meer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-foto__meer img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sf-foto__verwant { background: var(--sf-bg-alt); }
.sf-foto__lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; }
.sf-foto__lightbox:not([open]) { display: none; }
.sf-foto__lightbox::backdrop { background: rgb(18 20 23 / .97); }
.sf-foto__lightbox .sf-lightbox__stage { min-height: 0; }
.sf-foto__lightbox img { max-width: 100%; max-height: calc(100vh - 96px); width: auto; height: auto; object-fit: contain; }
.sf-comment__actions form { display: contents; }

.sf-portfolio__upload > summary { list-style: none; cursor: pointer; margin: var(--sf-s-4); }
.sf-portfolio__upload > summary::-webkit-details-marker { display: none; }
.sf-portfolio__upload[open] > summary { margin-bottom: 0; }
.sf-portfolio__thumb { display: block; width: 72px; }
.sf-portfolio__thumb img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--sf-r-0); }
.sf-portfolio__item.is-uit .sf-portfolio__thumb img { opacity: .45; }
.sf-portfolio__knoppen { flex-wrap: wrap; gap: var(--sf-s-1); }
.sf-portfolio__knoppen form { display: contents; }

/* Profielknop: initialen als gegenereerde inhoud, zodat ze niet botsen met het aria-label (WCAG 2.5.3) */
.sf-avatar--initialen::before { content: attr(data-initialen); }

/* ─── Lezen (fase 4): kennisbank, beginnersroute, boeken, video's, tekstpagina's ─── */
.sf-lezen__kop { max-width: 62ch; }
.sf-lezen__lijst { padding-bottom: var(--sf-s-12, 96px); }
.sf-lezen__uitgelicht { padding-block: var(--sf-s-6) var(--sf-s-8); border-bottom: var(--sf-b-1); }
.sf-lezen__uitgelicht-raster { align-items: center; }
.sf-lezen__select { min-width: 180px; }
.sf-lezen__kopruimte { padding-bottom: var(--sf-s-6); }
.sf-lezen__beeld { margin-bottom: var(--sf-s-8); }
.sf-lezen__foto { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: cover; border-radius: var(--sf-r-2); }
.sf-lezen__body { padding-bottom: var(--sf-s-12, 96px); }
.sf-lezen__auteur { padding-top: var(--sf-s-6); border-top: var(--sf-b-1); }
.sf-lezen__volgende { align-self: flex-start; padding: 0; min-height: 0; white-space: normal; text-align: left; font-weight: 600; }

.sf-lezen__voortgang { max-width: 480px; }
.sf-lezen__route { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-s-3); }
.sf-lezen__stap { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sf-s-4); align-items: start; padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-surface); }
.sf-lezen__stap.is-volgende { border-color: var(--sf-primary); box-shadow: inset 4px 0 0 var(--sf-primary); }
.sf-lezen__nummer { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: var(--sf-b-strong); font-weight: 600; }
.sf-lezen__stap.is-gelezen .sf-lezen__nummer { background: var(--sf-primary); border-color: var(--sf-primary); color: var(--sf-on-primary); }

.sf-lezen__video { margin-bottom: var(--sf-s-6); }

.sf-lezen__tekst { padding-block: var(--sf-s-8) var(--sf-s-12, 96px); }
.sf-lezen__tekst .sf-prose { max-width: var(--sf-read); }
.sf-lezen__zijnav { align-self: start; }
.sf-lezen__vraag + .sf-lezen__vraag { margin-top: var(--sf-s-3); }
.sf-lezen__formulier { max-width: var(--sf-read); }
.sf-prose + .sf-lezen__formulier { margin-top: var(--sf-s-8); }
/* E-bookpagina: omslag naast de kop, op smalle schermen eronder. */
.sf-ebook__kop { display: grid; gap: var(--sf-s-6); align-items: center; }
.sf-ebook__omslag { width: min(50vw, 280px); height: auto; }
@container sf (min-width: 768px) {
  .sf-ebook__kop { grid-template-columns: 1fr 280px; gap: var(--sf-s-8); }
}
.sf-lezen__extra { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sf-concept { margin-top: var(--sf-s-4); }

/* ─── Beheer (fase 4): artikelen, items, pagina's en contact ─── */
.sf-beheer { padding-block: var(--sf-s-8) var(--sf-s-20, 80px); }
.sf-beheer__eyebrow { padding: 0 12px 8px; }
.sf-beheer__rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-s-3); align-items: center; padding-inline: 0; }
.sf-beheer__acties { display: flex; flex-wrap: wrap; gap: var(--sf-s-1); align-items: center; }
.sf-beheer__form { max-width: 860px; }
.sf-beheer__opslaan { display: flex; flex-wrap: wrap; gap: var(--sf-s-3); align-items: flex-end; padding-top: var(--sf-s-4); border-top: var(--sf-b-1); }
.sf-beheer__omslag { display: block; width: 120px; height: auto; border-radius: var(--sf-r-1, 4px); }
.sf-beheer__blokken { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sf-s-4); min-width: 0; }
.sf-beheer__blok { display: grid; gap: var(--sf-s-3); padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-bg-alt); }
.sf-beheer__bericht.is-afgehandeld { background: var(--sf-bg-alt); }
.sf-beheer__contacttabel td { vertical-align: top; }
.sf-beheer__datum { white-space: nowrap; }
.sf-beheer__uitklap > summary { cursor: pointer; color: var(--sf-petrol); text-decoration: underline; min-height: var(--sf-target); display: list-item; }
.sf-beheer__uitklap[open] > summary { margin-bottom: var(--sf-s-3); }
.sf-beheer__berichttekst { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ─── Straatpraat ─────────────────────────────────────────────────────────── */
.sf-forum__kop { align-items: flex-end; flex-wrap: wrap; gap: var(--sf-s-4); }
.sf-forum__gereedschap { flex-wrap: wrap; gap: var(--sf-s-4); align-items: flex-end; }
.sf-forum__tabs { border-bottom: 0; }
.sf-forum__zoek { flex: 1 1 220px; max-width: 280px; }
.sf-forum__categorieen { flex-direction: column; overflow: visible; }
.sf-forum__categorieen a { justify-content: space-between; white-space: normal; }
.sf-forum__categorieen a[aria-current="page"] { background: var(--sf-bg-alt); font-weight: 600; }
.sf-onderwerp__tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-bericht-foto { display: block; max-width: 420px; }
.sf-bericht-foto img { display: block; width: 100%; height: auto; border-radius: var(--sf-r-1, 4px); }
.sf-select--smal { width: auto; min-width: 0; }
.sf-foto-kiezer > summary { list-style: none; cursor: pointer; width: fit-content; }
.sf-foto-kiezer > summary::-webkit-details-marker { display: none; }
.sf-foto-kiezer[open] > summary { margin-bottom: var(--sf-s-3); }

.sf-vvdw__rij { align-items: center; flex-wrap: wrap; gap: var(--sf-s-4); }
.sf-vvdw__vraag { color: var(--sf-text); text-decoration: none; }
.sf-vvdw__vraag:hover { text-decoration: underline; }
.sf-vvdw-venster { padding: 0; border: 0; max-width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.sf-vvdw-venster:not([open]) { display: none; }
.sf-vvdw-venster::backdrop { background: rgb(18 20 23 / .6); }

/* Probleem melden: venster op de instellingen, en de melding in het beheer. */
.sf-probleem-venster { padding: 0; border: 0; width: min(560px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.sf-probleem-venster:not([open]) { display: none; }
.sf-probleem-venster::backdrop { background: rgb(18 20 23 / .6); }
.sf-probleem-kop { align-items: center; flex-wrap: wrap; gap: var(--sf-s-4); }
.sf-probleem__url { overflow-wrap: anywhere; }

/* ─── Meldingen ───────────────────────────────────────────────────────────── */
.sf-meldingen { border-top: var(--sf-b-1); }
.sf-melding { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sf-s-3); align-items: start; padding: var(--sf-s-4) var(--sf-s-3); border-bottom: var(--sf-b-1); }
.sf-melding.is-nieuw { background: var(--sf-bg-alt); }
.sf-melding.is-nieuw .sf-melding__link { font-weight: 600; }
.sf-melding__icoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sf-bg-alt); }
.sf-melding__link { color: var(--sf-text); text-decoration: none; }
.sf-melding__link:hover { text-decoration: underline; }
.sf-melding__link::after { content: ""; position: absolute; inset: 0; }
.sf-melding { position: relative; }

/* Beheer van Straatpraat: knoppen onderaan een rij met velden, en een smal getalveld. */
.sf-field--knop { align-self: flex-end; }
.sf-input--kort { width: 7rem; }

/* ─── Home (T1) ───────────────────────────────────────────────────────────── */
.sf-home-hero { align-items: center; }
.sf-assignment .sf-eyebrow { color: var(--sf-donker-300); }
.sf-home-winnaar img { width: 100%; height: 100%; object-fit: cover; }
.sf-home-winnaar::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(18 20 23 / .7)); }
.sf-home-winnaar .sf-ph__label { z-index: 1; color: #fff; }
.sf-home-winnaar:hover img { opacity: .88; }
.sf-home-opdracht__acties { margin-top: var(--sf-s-1); }
.sf-home-ebook { gap: var(--sf-s-4); }
.sf-home-promo { padding-bottom: var(--sf-s-16); }

/* ─── Maandopdracht (fase 5) ─── */
.sf-mo-held { background: var(--sf-asfalt); color: var(--sf-text); padding: 40px 0 56px; }
.sf-mo-held__tekst > * { max-width: 760px; }
.sf-mo-held__split { align-items: center; }
.sf-mo-held__foto { margin: 0; display: grid; gap: var(--sf-s-2); justify-items: center; }
.sf-mo-held__foto img { display: block; width: auto; max-width: 100%; max-height: 520px; height: auto; }
.sf-mo-tabs { padding-top: var(--sf-s-6); }
.sf-mo-mijn { display: grid; gap: var(--sf-s-2); color: var(--sf-text); text-decoration: none; }
.sf-mo-mijn__foto { width: 100%; height: auto; border-radius: var(--sf-r-1, 4px); }
.sf-mo-keuze__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-s-2); max-height: 420px; overflow-y: auto; padding: 4px; margin-top: var(--sf-s-3); }
.sf-mo-keuze__item { position: relative; }
.sf-mo-keuze__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-mo-keuze__item label { display: grid; gap: 4px; cursor: pointer; border-radius: var(--sf-r-1, 4px); padding: 3px; outline: 2px solid transparent; }
.sf-mo-keuze__foto { width: 100%; aspect-ratio: 1; object-fit: cover; height: auto; border-radius: 2px; }
.sf-mo-keuze__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-mo-keuze__radio:checked + label { outline: 3px solid var(--sf-primary); }
.sf-mo-keuze__radio:focus-visible + label { outline: 3px solid var(--sf-focus, var(--sf-primary)); outline-offset: 2px; }
.sf-mo-keuze__item.is-uit label { cursor: not-allowed; }
.sf-mo-keuze__item.is-uit img { opacity: .4; }
.sf-mo-kaart__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sf-mo-beheer { list-style: none; margin: 0; padding: 0; }
.sf-mo-beheer__rij { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sf-s-4); align-items: start; flex-direction: unset; }
.sf-mo-beheer__foto img { display: block; width: 100%; height: auto; border-radius: var(--sf-r-1, 4px); }
@media (max-width: 599px) { .sf-mo-beheer__rij { grid-template-columns: 1fr; } .sf-mo-beheer__foto { max-width: 200px; } }

/* Tipregel onder de opdrachtengenerator: gloeilamp voor de zin. */
.sf-mo-tip { display: flex; gap: var(--sf-s-2); align-items: flex-start; }
.sf-mo-tip .sf-i { color: var(--sf-petrol); margin-top: 2px; }

/* ─── Foto van de maand (fase 5) ─── */
.sf-fvdm-uitleg > * { max-width: 760px; }
.sf-fvdm-werking { max-width: 760px; }
.sf-fvdm-kandidaten { list-style: none; margin: 0; padding: 0; }
.sf-fvdm-kandidaat { scroll-margin-top: 96px; }
.sf-fvdm-kandidaat img { display: block; width: 100%; height: auto; }
.sf-fvdm-kandidaat .sf-photo__meta { justify-content: space-between; }
.sf-fvdm-start { max-width: 880px; }
.sf-fvdm-start img { display: block; width: 100%; height: auto; }
.sf-badge--fotovandemaand .sf-badge__mark { background: var(--sf-geel); color: var(--sf-asfalt); }

/* Gele ring om de avatar van de maker van de huidige foto van de maand */
.sf-avatar-ring { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.sf-avatar-ring > .sf-avatar { box-shadow: 0 0 0 2px var(--sf-surface), 0 0 0 4px var(--sf-geel); }
.sf-avatar-ring__ster { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sf-geel); color: var(--sf-asfalt); box-shadow: 0 0 0 2px var(--sf-surface); font-size: 10px; line-height: 1; }
.sf-avatar-ring:has(> .sf-avatar--lg) > .sf-avatar, .sf-avatar-ring:has(> .sf-avatar--xl) > .sf-avatar { box-shadow: 0 0 0 3px var(--sf-surface), 0 0 0 7px var(--sf-geel); }
.sf-avatar-ring:has(> .sf-avatar--lg) .sf-avatar-ring__ster, .sf-avatar-ring:has(> .sf-avatar--xl) .sf-avatar-ring__ster { top: -2px; right: -2px; width: 26px; height: 26px; font-size: 15px; box-shadow: 0 0 0 3px var(--sf-surface); }
.sf-faces .sf-avatar-ring > .sf-avatar { box-shadow: 0 0 0 2px var(--sf-surface), 0 0 0 4px var(--sf-geel); }

/* Erelijst en 'Deel je winst' op het profiel */
.sf-erelijst { display: grid; gap: var(--sf-s-3); }
.sf-erelijst__regel { display: inline-flex; align-items: center; gap: var(--sf-s-3); color: var(--sf-text); text-decoration: none; }
.sf-erelijst__regel img { width: 64px; height: 64px; object-fit: cover; display: block; }
.sf-erelijst__regel:hover .sf-strong { text-decoration: underline; }
.sf-deel { display: grid; gap: var(--sf-s-6); max-width: 760px; padding: var(--sf-s-6); overflow: visible; }
.sf-deel__maand { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sf-s-4); align-items: start; }
.sf-deel__embleem { display: block; width: 120px; height: 120px; }
.sf-deel__code { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; resize: vertical; }
@media (max-width: 599px) { .sf-deel__maand { grid-template-columns: 1fr; } }

/* Cookiebanner: vast onderaan, verborgen tot site.js hem toont. */
.sf-cookies { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--sf-asfalt); color: var(--sf-wit); box-shadow: 0 -2px 12px rgba(0, 0, 0, .2); }
.sf-cookies[hidden] { display: none; }
.sf-cookies__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-s-3) var(--sf-s-6); padding-block: var(--sf-s-3); }
.sf-cookies__tekst { flex: 1 1 320px; margin: 0; font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); }
.sf-cookies__tekst--lang { display: none; }
.sf-cookies__knoppen { flex-wrap: nowrap; gap: var(--sf-s-2); }
@container sf (min-width: 768px) {
  .sf-cookies__inner { padding-block: var(--sf-s-4); }
  .sf-cookies__tekst--lang { display: block; }
  .sf-cookies__tekst--kort { display: none; }
}
/* Zolang de banner er staat, houdt de pagina zijn hoogte vrij (site.js zet
   --sf-cookies-h), zodat niets met focus erachter verdwijnt (WCAG 2.4.11). */
html { scroll-padding-bottom: var(--sf-cookies-h, 0px); }
.sf.sf--cookies { padding-bottom: var(--sf-cookies-h, 0px); }
.sf-cookies a { color: var(--sf-wit); text-decoration: underline; }
.sf-cookies .sf-btn--text { color: var(--sf-wit) !important; }
.sf-footer__knop { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* Nieuwsbriefblok bovenaan de footer (partials/footer-nieuwsbrief.php) */
.sf-footer__nieuwsbrief { display: grid; gap: var(--sf-s-4) var(--sf-s-8); padding-bottom: var(--sf-s-8); margin-bottom: var(--sf-s-8); border-bottom: 1px solid var(--sf-donker-700); }
.sf-footer__nieuwsbrief h2 { font-size: var(--sf-fs-4); line-height: var(--sf-lh-4); text-transform: none; letter-spacing: 0; color: var(--sf-beton); }
.sf-footer__nieuwsbrief-tekst p { color: var(--sf-donker-300); max-width: 46ch; margin: 0; }
.sf-footer__nieuwsbrief-form { display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-footer__nieuwsbrief-rij { display: flex; flex-wrap: wrap; gap: var(--sf-s-2); }
.sf-footer__nieuwsbrief-rij .sf-input { flex: 1 1 14rem; width: auto; }
.sf-footer__nieuwsbrief-label { font-weight: 600; margin-bottom: calc(-1 * var(--sf-s-1)); }
.sf-footer__nieuwsbrief-melding { margin: 0; color: var(--sf-donker-300); }
/* Rand bij een fout in dezelfde lichte rood als .sf--donker .sf-error, het donkere rood valt weg tegen de footer */
.sf-footer__nieuwsbrief .sf-input.is-error { border-color: #FFB4AB; }
/* De fout staat in de rij na het veld: op mobiel tussen veld en knop, breder onder allebei.
   Geldt ook voor het blok onder een artikel (nieuwsbrief-artikel.php), daar in het gewone rood. */
.sf-footer__nieuwsbrief-rij .sf-error { flex-basis: 100%; }
@container sf (min-width: 480px) {
  .sf-footer__nieuwsbrief-rij .sf-error { order: 1; }
}
@container sf (min-width: 1024px) {
  .sf-footer__nieuwsbrief { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Premium: een rustig label met tekst, niet alleen een kleur. */
.sf-label-premium { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--sf-r-1); font-size: var(--sf-fs-1); line-height: 1; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }

/* Premium: achtergrondkleur van het profiel. Waarden gelijk aan PROFIELKLEUREN
   in src/profielkleur.php; tests/profielkleur.php bewaakt dat. Links altijd
   onderstreept, omdat link en tekst onderling weinig contrast hebben. */
.sf-profielkleur { background-color: var(--sf-bg); color: var(--sf-text); }
.sf-profielkleur a:not(.sf-btn):not(.sf-iconbtn) { text-decoration: underline; text-underline-offset: 3px; }
/* Vaste tekstkleuren elders op het profiel volgen hier het palet (tests/profielkleur.php). */
.sf-profielkleur .sf-bio__meer > summary { color: var(--sf-link); }
.sf-profielkleur .sf-input::placeholder { color: var(--sf-muted); }
.sf-profielkleur .sf-textarea::placeholder { color: var(--sf-muted); }
.sf-kleurstaal { display: inline-block; width: 20px; height: 20px; border: 1px solid var(--sf-border-strong); border-radius: 50%; vertical-align: middle; flex: none; }
.sf-profielkleur--zwart { --sf-bg: #111111; --sf-bg-alt: #1E1E1E; --sf-surface: #1E1E1E; --sf-subtle: #1E1E1E; --sf-text: #F2F2F2; --sf-link-hover: #F2F2F2; --sf-primary-hover: #F2F2F2; --sf-muted: #B5B5B5; --sf-border: #6B6B6B; --sf-border-strong: #6B6B6B; --sf-link: #8FCFE3; --sf-primary: #8FCFE3; --sf-on-subtle: #8FCFE3; --sf-focus: #8FCFE3; --sf-on-primary: #111111; background-color: #111111; }
.sf-profielkleur--wit { --sf-bg: #FFFFFF; --sf-bg-alt: #F4F4F2; --sf-surface: #F4F4F2; --sf-subtle: #F4F4F2; --sf-text: #1A1A1A; --sf-link-hover: #1A1A1A; --sf-primary-hover: #1A1A1A; --sf-muted: #595959; --sf-border: #8A8A8A; --sf-border-strong: #8A8A8A; --sf-link: #0B5A70; --sf-primary: #0B5A70; --sf-on-subtle: #0B5A70; --sf-focus: #0B5A70; --sf-on-primary: #FFFFFF; background-color: #FFFFFF; }
.sf-profielkleur--grijs { --sf-bg: #DCDCD8; --sf-bg-alt: #E8E8E5; --sf-surface: #E8E8E5; --sf-subtle: #E8E8E5; --sf-text: #1A1A1A; --sf-link-hover: #1A1A1A; --sf-primary-hover: #1A1A1A; --sf-muted: #454545; --sf-border: #6B6B6B; --sf-border-strong: #6B6B6B; --sf-link: #0A4A5C; --sf-primary: #0A4A5C; --sf-on-subtle: #0A4A5C; --sf-focus: #0A4A5C; --sf-on-primary: #DCDCD8; background-color: #DCDCD8; }
.sf-profielkleur--bordeaux { --sf-bg: #561C26; --sf-bg-alt: #64242F; --sf-surface: #64242F; --sf-subtle: #64242F; --sf-text: #F8EEEF; --sf-link-hover: #F8EEEF; --sf-primary-hover: #F8EEEF; --sf-muted: #E3C6CA; --sf-border: #B4848B; --sf-border-strong: #B4848B; --sf-link: #FFD3AD; --sf-primary: #FFD3AD; --sf-on-subtle: #FFD3AD; --sf-focus: #FFD3AD; --sf-on-primary: #561C26; background-color: #561C26; }
.sf-profielkleur--donkerblauw { --sf-bg: #15243F; --sf-bg-alt: #1D2E4D; --sf-surface: #1D2E4D; --sf-subtle: #1D2E4D; --sf-text: #F0F3F8; --sf-link-hover: #F0F3F8; --sf-primary-hover: #F0F3F8; --sf-muted: #C3CCDB; --sf-border: #7486A6; --sf-border-strong: #7486A6; --sf-link: #A8D0FF; --sf-primary: #A8D0FF; --sf-on-subtle: #A8D0FF; --sf-focus: #A8D0FF; --sf-on-primary: #15243F; background-color: #15243F; }
.sf-profielkleur--zachtroze { --sf-bg: #EBD6D6; --sf-bg-alt: #F3E4E4; --sf-surface: #F3E4E4; --sf-subtle: #F3E4E4; --sf-text: #2A1B1D; --sf-link-hover: #2A1B1D; --sf-primary-hover: #2A1B1D; --sf-muted: #5A4144; --sf-border: #8F6D71; --sf-border-strong: #8F6D71; --sf-link: #7A2335; --sf-primary: #7A2335; --sf-on-subtle: #7A2335; --sf-focus: #7A2335; --sf-on-primary: #EBD6D6; background-color: #EBD6D6; }
.sf-profielkleur--donkergroen { --sf-bg: #1E3A2C; --sf-bg-alt: #264736; --sf-surface: #264736; --sf-subtle: #264736; --sf-text: #EEF4EF; --sf-link-hover: #EEF4EF; --sf-primary-hover: #EEF4EF; --sf-muted: #C0D2C6; --sf-border: #729482; --sf-border-strong: #729482; --sf-link: #C6E6A0; --sf-primary: #C6E6A0; --sf-on-subtle: #C6E6A0; --sf-focus: #C6E6A0; --sf-on-primary: #1E3A2C; background-color: #1E3A2C; }

/* Kortingscode op /premium: in een keer te selecteren. */
.sf-kortingscode { font-size: 1.05em; padding: 0.15em 0.45em; user-select: all; letter-spacing: 0.04em; }
/* Galerij: foto en bijschrift samen in één kader, zodat titel en fotograaf onmiskenbaar bij die foto horen */
.sf-galerij__fotos .sf-photo { gap: 0; background: var(--sf-bg-alt); border: 1px solid var(--sf-border); }
.sf-galerij__fotos .sf-photo__meta { padding: var(--sf-s-3); }

/* Links naar de velden met een fout, in de foutmelding boven een formulier (site.js) */
.sf-alert__lijst { margin: var(--sf-s-2) 0 0; padding-left: 18px; }

/* Groter raakvlak voor 'Wachtwoord vergeten?' op een telefoon, zonder dat de regel hoger wordt */
.sf-aanmeld-bewijs { margin: 0; display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-aanmeld-bewijs__fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-s-2); }
.sf-aanmeld-bewijs__fotos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--sf-r-2, 4px); }
.sf-auth__vergeten { padding-block: 12px; margin-block: -12px; }

/* Zoeken */
.sf-zoeken__kop { max-width: 62ch; }
.sf-zoeken__form { max-width: 560px; flex-wrap: nowrap; }
.sf-zoeken__form .sf-input { flex: 1 1 auto; }
.sf-zoeken { padding-bottom: var(--sf-s-12, 96px); }
.sf-zoeken__aantal { font-weight: 400; }
.sf-zoeken__lijst { display: grid; gap: var(--sf-s-3); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sf-zoeken__treffer { display: flex; flex-direction: column; gap: var(--sf-s-1, 4px); padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-surface); position: relative; }
.sf-zoeken__treffer:hover { border-color: var(--sf-text); }
.sf-zoeken__titel { font-weight: 600; color: var(--sf-text) !important; }
.sf-zoeken__titel::after { content: ""; position: absolute; inset: 0; }
.sf-zoeken__overzichten { justify-content: center; flex-wrap: wrap; }
.sf-zoeken .sf-sectionhead { margin-bottom: 0; }