/* =========================================================
   straatfotografie.nl  ·  designsysteem v1.0
   Eén stylesheet: tokens, basis, componenten, templates.
   Mobiel eerst. Breakpoints via container queries op .sf
   (werkt in elke breedte, ook in PHP partials).
   md 768 · lg 1024 · xl 1280
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root, .sf {
  /* basiskleuren (vast) */
  --sf-asfalt: #121417;
  --sf-antraciet: #1E2226;
  --sf-petrol: #1F5C63;
  --sf-petrol-donker: #174A50;
  --sf-petrol-licht: #DCE8E9;
  --sf-groen: #2E7D4F;
  --sf-groen-licht: #E6F2EA;
  --sf-beton: #F2F2EF;
  --sf-tekst: #1A1A1A;
  --sf-geel: #FFCC00;
  --sf-wit: #FFFFFF;
  --sf-grijs-600: #5C6166;   /* secundaire tekst op licht, 6.3:1 */
  --sf-grijs-400: #7D8389;   /* randen van bedieningselementen, 3.8:1 op wit, 3.4:1 op beton */
  --sf-grijs-200: #DEDED9;   /* scheidingslijnen */
  --sf-donker-300: #A7ADB2;  /* secundaire tekst op donker, 7:1 */
  --sf-donker-500: #767C82;  /* randen op donker, 4.4:1 op Asfalt, 3.8:1 op Antraciet */
  --sf-donker-700: #33393F;  /* scheidingslijnen op donker */
  --sf-rood: #B3261E;        /* alleen fouten en gevaar */
  --sf-rood-licht: #F7E3E1;

  /* semantisch, licht (standaard) */
  --sf-bg: var(--sf-wit);
  --sf-bg-alt: var(--sf-beton);
  --sf-surface: var(--sf-wit);
  --sf-text: var(--sf-tekst);
  --sf-muted: var(--sf-grijs-600);
  --sf-border: var(--sf-grijs-200);
  --sf-border-strong: var(--sf-grijs-400);
  --sf-link: var(--sf-petrol);
  --sf-link-hover: var(--sf-petrol-donker);
  --sf-primary: var(--sf-petrol);
  --sf-primary-hover: var(--sf-petrol-donker);
  --sf-on-primary: var(--sf-wit);
  --sf-subtle: var(--sf-petrol-licht);
  --sf-on-subtle: var(--sf-petrol-donker);
  --sf-focus: var(--sf-petrol);
  --sf-disabled-bg: #E6E6E2;
  --sf-disabled-text: var(--sf-grijs-600);

  /* typografie */
  --sf-font: "Sofia Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --sf-display: "Sofia Sans Extra Condensed", "Arial Narrow", var(--sf-font);
  /* Leestekst gebruikt dezelfde letter als de rest; de naam blijft voor de bestaande klassen. */
  --sf-serif: var(--sf-font);
  --sf-fs-1: 0.8125rem; --sf-lh-1: 1.125rem; /* 13/18  xs: kleiner wordt slecht leesbaar */
  --sf-fs-2: 0.875rem; --sf-lh-2: 1.25rem;   /* 14/20  sm */
  --sf-fs-3: 1rem;     --sf-lh-3: 1.5rem;    /* 16/24  basis */
  --sf-fs-4: 1.125rem; --sf-lh-4: 1.75rem;   /* 18/28  md */
  --sf-fs-5: 1.375rem; --sf-lh-5: 1.875rem;  /* 22/30  lg */
  --sf-fs-6: 1.75rem;  --sf-lh-6: 2.25rem;   /* 28/36  xl */
  --sf-fs-7: 1.875rem; --sf-lh-7: 2.375rem;  /* 30/38 mobiel, 36/44 vanaf md */
  --sf-fs-8: 2.25rem;  --sf-lh-8: 2.75rem;   /* 36/44 mobiel, 48/56 vanaf md */

  /* spacing, 4 px raster */
  --sf-s-1: 4px; --sf-s-2: 8px; --sf-s-3: 12px; --sf-s-4: 16px; --sf-s-5: 20px;
  --sf-s-6: 24px; --sf-s-8: 32px; --sf-s-10: 40px; --sf-s-12: 48px;
  --sf-s-16: 64px; --sf-s-20: 80px; --sf-s-24: 96px;

  /* radius en randen */
  --sf-r-0: 0;      /* foto's: altijd recht */
  --sf-r-1: 4px;    /* tags, badges */
  --sf-r-2: 8px;    /* knoppen, velden, kaarten */
  --sf-r-3: 12px;   /* modals, panelen */
  --sf-r-pill: 999px;
  --sf-b-1: 1px solid var(--sf-border);
  --sf-b-strong: 1px solid var(--sf-border-strong);

  /* maten */
  --sf-target: 44px;
  --sf-wrap: 1240px;
  --sf-read: 680px;
  --sf-gutter: 16px;
}

/* donkere modus: zelfde tokens, andere toewijzing */
.sf--donker {
  --sf-bg: var(--sf-asfalt);
  --sf-bg-alt: var(--sf-antraciet);
  --sf-surface: var(--sf-antraciet);
  --sf-text: var(--sf-beton);
  --sf-muted: var(--sf-donker-300);
  --sf-border: var(--sf-donker-700);
  --sf-border-strong: var(--sf-donker-500);
  --sf-link: var(--sf-petrol-licht);
  --sf-link-hover: var(--sf-wit);
  --sf-primary: var(--sf-petrol-licht);
  --sf-primary-hover: var(--sf-wit);
  --sf-on-primary: var(--sf-asfalt);
  --sf-subtle: var(--sf-antraciet);
  --sf-on-subtle: var(--sf-petrol-licht);
  --sf-focus: var(--sf-petrol-licht);
  --sf-disabled-bg: var(--sf-donker-700);
  --sf-disabled-text: var(--sf-donker-300);
}

/* ---------- 2. BASIS ---------- */
.sf {
  container: sf / inline-size;
  font-family: var(--sf-font);
  font-size: var(--sf-fs-3);
  line-height: var(--sf-lh-3);
  color: var(--sf-text);
  background: var(--sf-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf img { max-width: 100%; display: block; }
.sf h1, .sf h2, .sf h3, .sf h4, .sf h5, .sf p, .sf figure, .sf ul, .sf ol, .sf dl, .sf dd { margin: 0; }
.sf ul.sf-plain, .sf ol.sf-plain { list-style: none; padding: 0; }
.sf a { color: var(--sf-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sf a:hover { color: var(--sf-link-hover); text-decoration-thickness: 2px; }
.sf button { font: inherit; color: inherit; }
.sf :focus-visible, .sf .is-focus { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-skip { position: absolute; left: 8px; top: -60px; background: var(--sf-geel); color: var(--sf-asfalt) !important; padding: 12px 16px; z-index: 10; }
.sf-skip:focus { top: 8px; }

/* typografie */
/* Koppen in de smalle letter: een maat groter dan de schaal, omdat hij smaller loopt. */
.sf-h1, .sf-h2, .sf-h3, .sf-h4 { font-family: var(--sf-display); }
.sf-h1 { font-size: 2.75rem; line-height: 1; font-weight: 800; letter-spacing: -0.005em; }
.sf-h2 { font-size: 2.25rem; line-height: 1.05; font-weight: 800; }
.sf-h3 { font-size: 2rem; line-height: 1.1; font-weight: 700; }
.sf-h4 { font-size: 1.625rem; line-height: 1.15; font-weight: 700; }
.sf-h5 { font-size: var(--sf-fs-4); line-height: var(--sf-lh-4); font-weight: 600; }
.sf-lead { font-size: var(--sf-fs-4); line-height: var(--sf-lh-4); }
.sf-body { font-size: var(--sf-fs-3); line-height: var(--sf-lh-3); }
.sf-small { font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); }
.sf-xs { font-size: var(--sf-fs-1); line-height: var(--sf-lh-1); }
.sf-eyebrow { font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-muted { color: var(--sf-muted); }
.sf-strong { font-weight: 600; }
.sf-serif { font-family: var(--sf-serif); }
@container sf (min-width: 768px) {
  .sf-h1 { font-size: 4rem; }
  .sf-h2 { font-size: 2.75rem; }
}

/* lange leestekst */
.sf-prose { font-family: var(--sf-serif); font-size: var(--sf-fs-4); line-height: 1.7; max-width: var(--sf-read); }
/* met .sf ervoor, anders wint de reset '.sf p { margin: 0 }' op specificiteit */
.sf .sf-prose > * + *, .sf-prose > * + * { margin-top: 1.1em; }
.sf .sf-prose h2, .sf-prose h2 { font-family: var(--sf-display); font-size: 2rem; line-height: 1.1; font-weight: 700; margin-top: 2em; scroll-margin-top: 80px; }
.sf .sf-prose h3, .sf-prose h3 { font-family: var(--sf-display); font-size: 1.625rem; line-height: 1.15; font-weight: 700; margin-top: 1.6em; }
.sf-prose ul, .sf-prose ol { padding-left: 1.3em; }
.sf-prose li + li { margin-top: 0.4em; }
.sf .sf-prose figure, .sf-prose figure { margin-top: 1.6em; }
.sf .sf-prose blockquote, .sf-prose blockquote { margin: 1.6em 0; padding: 0 0 0 var(--sf-s-6); border-left: 3px solid var(--sf-text); font-style: italic; }
.sf-caption { font-family: var(--sf-font); font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); color: var(--sf-muted); margin-top: var(--sf-s-2); }

/* ---------- 3. LAYOUT ---------- */
.sf-wrap { max-width: var(--sf-wrap); margin-inline: auto; padding-inline: var(--sf-gutter); width: 100%; }
.sf-wrap--read { max-width: calc(var(--sf-read) + 2 * var(--sf-gutter)); }
.sf-section { padding-block: var(--sf-s-10); }
.sf-section--alt { background: var(--sf-bg-alt); }
.sf-section--tight { padding-block: var(--sf-s-6); }
.sf-stack { display: flex; flex-direction: column; gap: var(--sf-s-4); }
.sf-stack--2 { gap: var(--sf-s-2); } .sf-stack--3 { gap: var(--sf-s-3); } .sf-stack--6 { gap: var(--sf-s-6); } .sf-stack--8 { gap: var(--sf-s-8); } .sf-stack--12 { gap: var(--sf-s-12); }
.sf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-s-3); }
.sf-row--between { justify-content: space-between; }
.sf-row--top { align-items: flex-start; }
.sf-row--nowrap { flex-wrap: nowrap; }
.sf-grow { flex: 1 1 auto; min-width: 0; }
.sf-cols { display: grid; gap: var(--sf-s-6); grid-template-columns: minmax(0, 1fr); }
.sf-sectionhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sf-s-2) var(--sf-s-4); margin-bottom: var(--sf-s-6); }
.sf-divider { border: 0; border-top: var(--sf-b-1); margin: 0; }
.sf-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* zijbalk layouts */
.sf-layout { display: grid; gap: var(--sf-s-8); grid-template-columns: minmax(0, 1fr); }
@container sf (min-width: 768px) {
  .sf > * { --sf-gutter: 32px; }
  .sf-section { padding-block: var(--sf-s-16); }
  .sf-cols--2, .sf-cols--3, .sf-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sf (min-width: 1024px) {
  .sf > * { --sf-gutter: 48px; }
  .sf-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-layout--side { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sf-s-12); }
  .sf-layout--nav { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sf-s-12); }
  .sf-layout--article { grid-template-columns: 200px minmax(0, 1fr) 260px; gap: var(--sf-s-12); }
  .sf-layout--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-s-12); }
  .sf-sticky { position: sticky; top: 96px; align-self: start; }
}

/* ---------- 4. ICONEN (masker, kleurt mee met tekst) ---------- */
.sf-i { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.sf-i--sm { width: 16px; height: 16px; } .sf-i--lg { width: 24px; height: 24px; }
.sf-i--search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.sf-i--menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.sf-i--close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.sf-i--user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
.sf-i--chev-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.sf-i--chev-left{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E")}
.sf-i--chev-right{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")}
.sf-i--arrow{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.sf-i--upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E")}
.sf-i--check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
.sf-i--calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.sf-i--pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.sf-i--clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.sf-i--comment{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
.sf-i--share{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='m8.2 10.8 7.6-3.6M8.2 13.2l7.6 3.6'/%3E%3C/svg%3E")}
.sf-i--link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.sf-i--mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.sf-i--instagram{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='0.6'/%3E%3C/svg%3E")}
.sf-i--facebook{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M15 3h-2a4 4 0 0 0-4 4v3H6v4h3v7h4v-7h3l1-4h-4V7a1 1 0 0 1 1-1h2z'/%3E%3C/svg%3E")}
.sf-i--linkedin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7'/%3E%3C/svg%3E")}
.sf-i--play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")}
.sf-i--bell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.sf-i--globe{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E")}
.sf-i--alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20zM12 10v4M12 17v.01'/%3E%3C/svg%3E")}
.sf-i--info{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E")}
.sf-i--bulb{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.sf-i--image{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E")}
.sf-i--grip{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='9' cy='6' r='1.6'/%3E%3Ccircle cx='9' cy='12' r='1.6'/%3E%3Ccircle cx='9' cy='18' r='1.6'/%3E%3Ccircle cx='15' cy='6' r='1.6'/%3E%3Ccircle cx='15' cy='12' r='1.6'/%3E%3Ccircle cx='15' cy='18' r='1.6'/%3E%3C/svg%3E")}
.sf-i--eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.sf-i--lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.sf-i--trash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E")}
.sf-i--edit{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16zM14 6l4 4'/%3E%3C/svg%3E")}
.sf-i--plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.sf-i--users{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M3 20c0-3.5 3-5 6-5s6 1.5 6 5M16 4.5a3.5 3.5 0 0 1 0 7M18 15c2 .5 3 2 3 5'/%3E%3C/svg%3E")}
.sf-i--list{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")}
.sf-i--grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E")}
.sf-i--map{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2zM9 4v14M15 6v14'/%3E%3C/svg%3E")}
.sf-i--external{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E")}
.sf-i--route{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Cpath d='M8 19h8.5a3.5 3.5 0 0 0 0-7h-9a3.5 3.5 0 0 1 0-7H16'/%3E%3C/svg%3E")}
.sf-i--book{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2zM22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E")}
.sf-i--flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E")}
.sf-i--pushpin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v4M8 3h8l-1 6 3 3H6l3-3z'/%3E%3C/svg%3E")}
.sf-i--filter{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E")}
.sf-i--download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E")}
.sf-i--logout{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E")}
.sf-i--sliders{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E")}

/* ---------- 5. FOTO PLACEHOLDERS (vervalt in productie door <img>) ---------- */
.sf-ph { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; background: #565B60; color: #fff; overflow: hidden; border-radius: var(--sf-r-0); }
.sf-ph--portrait { aspect-ratio: 4 / 5; } .sf-ph--tall { aspect-ratio: 2 / 3; } .sf-ph--square { aspect-ratio: 1; } .sf-ph--wide { aspect-ratio: 16 / 9; } .sf-ph--pano { aspect-ratio: 21 / 9; }
.sf-ph--a { background: #2B2F33; } .sf-ph--b { background: #565B60; } .sf-ph--c { background: #8D9195; color: #121417; } .sf-ph--d { background: #B9BBB8; color: #121417; } .sf-ph--e { background: #6E655C; } .sf-ph--f { background: #3E4B4D; }
.sf-ph__label { position: absolute; left: 12px; bottom: 10px; right: 12px; font-size: var(--sf-fs-1); line-height: var(--sf-lh-1); opacity: .9; }

/* ---------- 6. KNOPPEN ---------- */
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-s-2); min-height: var(--sf-target); padding: 10px 20px; border-radius: var(--sf-r-2); border: 2px solid transparent; font-family: var(--sf-font); font-size: var(--sf-fs-3); line-height: 1.25; font-weight: 500; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background-color .12s, color .12s, border-color .12s; }
.sf-btn--primary { background: var(--sf-primary); color: var(--sf-on-primary) !important; }
.sf-btn--primary:hover, .sf-btn--primary.is-hover { background: var(--sf-primary-hover); }
.sf-btn--primary:active, .sf-btn--primary.is-active { background: var(--sf-asfalt); }
.sf--donker .sf-btn--primary:active, .sf--donker .sf-btn--primary.is-active { background: var(--sf-beton); }
.sf-btn--secondary { background: transparent; border-color: var(--sf-primary); color: var(--sf-link) !important; }
.sf-btn--secondary:hover, .sf-btn--secondary.is-hover { background: var(--sf-subtle); }
.sf-btn--secondary:active, .sf-btn--secondary.is-active { background: var(--sf-subtle); border-color: var(--sf-primary-hover); }
.sf-btn--text { background: transparent; color: var(--sf-link) !important; padding-inline: 8px; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-skip-ink: none; }
.sf-btn--text:hover, .sf-btn--text.is-hover { color: var(--sf-link-hover) !important; text-decoration-thickness: 2px !important; }
.sf-btn--danger { background: var(--sf-rood); color: #fff !important; }
.sf-btn--danger:hover, .sf-btn--danger.is-hover { background: #8E1E18; }
.sf-btn--ghost { background: transparent; color: var(--sf-text) !important; border-color: var(--sf-border-strong); }
.sf-btn--ghost:hover, .sf-btn--ghost.is-hover { border-color: var(--sf-text); }
.sf-btn--block { width: 100%; }
.sf-btn--icon { width: var(--sf-target); padding: 0; }
.sf-btn:disabled, .sf-btn.is-disabled { background: var(--sf-disabled-bg) !important; color: var(--sf-disabled-text) !important; border-color: transparent !important; cursor: not-allowed; text-decoration: none !important; }
.sf-btn.is-loading { pointer-events: none; }
.sf-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sf-spin .8s linear infinite; flex: none; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-spinner { animation-duration: 2.4s; } .sf * { transition: none !important; } }

/* ---------- 7. FORMULIEREN ---------- */
.sf-field { display: flex; flex-direction: column; gap: 6px; }
.sf-label { font-size: var(--sf-fs-3); line-height: var(--sf-lh-3); font-weight: 500; }
.sf-label__opt { font-weight: 400; color: var(--sf-muted); }
.sf-hint { font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); color: var(--sf-muted); }
.sf-input, .sf-select, .sf-textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: var(--sf-b-strong); border-radius: var(--sf-r-2); background: var(--sf-surface); color: var(--sf-text); font-family: var(--sf-font); font-size: var(--sf-fs-3); line-height: var(--sf-lh-3); }
.sf-textarea { min-height: 128px; resize: vertical; }
.sf-select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6166' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.sf-input::placeholder, .sf-textarea::placeholder { color: var(--sf-grijs-600); }
.sf--donker .sf-input::placeholder { color: var(--sf-donker-300); }
.sf-input:hover, .sf-input.is-hover, .sf-select:hover, .sf-textarea:hover { border-color: var(--sf-text); }
.sf-input:focus-visible, .sf-input.is-focus, .sf-select:focus-visible, .sf-textarea:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: 0; border-color: var(--sf-focus); }
.sf-input:disabled, .sf-input.is-disabled { background: var(--sf-disabled-bg); color: var(--sf-disabled-text); border-color: transparent; cursor: not-allowed; }
.sf-input.is-error, .sf-textarea.is-error { border: 2px solid var(--sf-rood); }
.sf-error { display: flex; gap: 6px; align-items: flex-start; color: var(--sf-rood); font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); font-weight: 500; }
.sf--donker .sf-error { color: #FFB4AB; }
.sf-error .sf-i { width: 16px; height: 16px; margin-top: 2px; }
.sf-input-icon { position: relative; }
.sf-input-icon .sf-i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sf-muted); pointer-events: none; }
.sf-input-icon .sf-input { padding-left: 44px; }
.sf-check { display: flex; align-items: center; gap: var(--sf-s-3); min-height: var(--sf-target); cursor: pointer; }
.sf-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--sf-petrol); flex: none; }
.sf-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-s-4); min-height: var(--sf-target); }
.sf-switch__ctl { position: relative; width: 48px; height: 28px; border-radius: var(--sf-r-pill); background: var(--sf-grijs-400); border: 0; flex: none; cursor: pointer; padding: 0; }
.sf-switch__ctl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .12s; }
.sf-switch__ctl[aria-checked="true"] { background: var(--sf-petrol); }
.sf-switch__ctl[aria-checked="true"]::after { left: 23px; }
.sf-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-fieldset legend { padding: 0; margin-bottom: var(--sf-s-1); font-weight: 500; }
.sf-visibility { display: inline-flex; align-items: center; gap: 6px; }
.sf-visibility .sf-select { min-height: var(--sf-target); width: auto; font-size: var(--sf-fs-2); padding-block: 8px; }
.sf-form-actions { display: flex; flex-wrap: wrap; gap: var(--sf-s-3); align-items: center; padding-top: var(--sf-s-2); }

/* upload */
.sf-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sf-s-3); text-align: center; padding: var(--sf-s-8) var(--sf-s-4); border: 2px dashed var(--sf-border-strong); border-radius: var(--sf-r-2); background: var(--sf-bg-alt); }
.sf-upload.is-hover, .sf-upload:hover { border-color: var(--sf-petrol); background: var(--sf-subtle); }
.sf-upload-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sf-s-3) var(--sf-s-4); padding: var(--sf-s-3); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-surface); }
.sf-upload-item .sf-ph { aspect-ratio: 1; }
.sf-progress { height: 8px; border-radius: var(--sf-r-pill); background: var(--sf-bg-alt); border: 1px solid var(--sf-border-strong); overflow: hidden; }
.sf-progress > span { display: block; height: 100%; background: var(--sf-petrol); }
.sf--donker .sf-progress > span { background: var(--sf-petrol-licht); }

/* ---------- 8. HEADER, MENU, FOOTER ---------- */
.sf-announce { background: var(--sf-geel); color: var(--sf-asfalt); }
.sf-announce__inner { display: flex; align-items: center; gap: var(--sf-s-3); min-height: 48px; }
.sf-announce__text { flex: 1 1 auto; font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); font-weight: 500; padding-block: 6px; }
.sf-announce a { color: var(--sf-asfalt) !important; font-weight: 600; }
.sf-announce__close { width: var(--sf-target); height: var(--sf-target); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--sf-asfalt); border-radius: var(--sf-r-2); cursor: pointer; flex: none; }
.sf-announce__close:focus-visible { outline-color: var(--sf-asfalt); }

.sf-header { background: var(--sf-asfalt); color: var(--sf-beton); --sf-focus: var(--sf-petrol-licht); position: relative; }
.sf-header__inner { display: flex; align-items: center; gap: var(--sf-s-2); min-height: 64px; }
.sf-header__logo { display: inline-flex; align-items: center; min-height: var(--sf-target); margin-right: auto; flex: none; }
.sf-header__logo img { height: 24px; width: auto; }
.sf-header__nav { display: none; }
.sf-header__nav a { display: inline-flex; align-items: center; min-height: var(--sf-target); padding: 0 12px; color: var(--sf-beton) !important; text-decoration: none; font-weight: 500; border-radius: var(--sf-r-2); position: relative; white-space: nowrap; }
.sf-header__nav a:hover { background: var(--sf-antraciet); }
.sf-header__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--sf-petrol-licht); }
.sf-header__search { display: none; }
.sf-header__search .sf-input { background: var(--sf-antraciet); border-color: var(--sf-donker-500); color: var(--sf-beton); min-height: var(--sf-target); padding-block: 9px; }
.sf-header__search .sf-input::placeholder { color: var(--sf-donker-300); }
.sf-header__search .sf-i { color: var(--sf-donker-300); }
.sf-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--sf-target); height: var(--sf-target); border: 0; border-radius: var(--sf-r-2); background: transparent; color: inherit; cursor: pointer; flex: none; text-decoration: none; position: relative; }
.sf-iconbtn:hover { background: var(--sf-antraciet); }
.sf:not(.sf--donker) .sf-iconbtn--light:hover { background: var(--sf-bg-alt); }
.sf-iconbtn__dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-petrol-licht); border: 2px solid var(--sf-asfalt); }
.sf-lang { display: inline-flex; border: 1px solid var(--sf-donker-500); border-radius: var(--sf-r-2); overflow: hidden; flex: none; }
.sf-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; font-size: var(--sf-fs-2); font-weight: 600; color: var(--sf-beton) !important; text-decoration: none; }
.sf-lang a[aria-current="true"] { background: var(--sf-petrol-licht); color: var(--sf-asfalt) !important; }
.sf-header__menu { display: inline-flex; }
.sf-header__profile { display: none; }
.sf-header__search-btn { display: inline-flex; }
@container sf (min-width: 1024px) {
  .sf-header__inner { min-height: 72px; gap: var(--sf-s-3); }
  .sf-header__logo { margin-right: var(--sf-s-4); }
  .sf-header__logo img { height: 30px; }
  .sf-header__nav { display: flex; gap: 2px; margin-right: auto; }
  .sf-header__menu { display: none; }
  .sf-header__profile { display: inline-flex; }
}
@container sf (min-width: 1280px) {
  .sf-header__search { display: block; width: 240px; }
  .sf-header__search-btn { display: none; }
}
/* mobiel menu (uitgeklapt) */
.sf-drawer { background: var(--sf-asfalt); color: var(--sf-beton); --sf-focus: var(--sf-petrol-licht); padding: var(--sf-s-2) var(--sf-gutter) var(--sf-s-8); }
.sf-drawer__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--sf-donker-700); color: var(--sf-beton) !important; text-decoration: none; font-size: var(--sf-fs-5); font-weight: 500; }
.sf-drawer__nav a[aria-current="page"] { color: var(--sf-petrol-licht) !important; }
.sf-drawer__sub { padding: var(--sf-s-2) 0 var(--sf-s-3) var(--sf-s-4); display: flex; flex-direction: column; }
.sf-drawer__sub a { font-size: var(--sf-fs-3); min-height: var(--sf-target); border: 0; color: var(--sf-donker-300) !important; }
/* uitklapmenu (profiel, deelmenu) */
.sf-menu { min-width: 240px; background: var(--sf-surface); color: var(--sf-text); border: var(--sf-b-strong); border-radius: var(--sf-r-3); padding: var(--sf-s-2); display: flex; flex-direction: column; }
.sf-menu__head { padding: var(--sf-s-3); border-bottom: var(--sf-b-1); margin-bottom: var(--sf-s-2); display: flex; gap: var(--sf-s-3); align-items: center; }
.sf-menu a, .sf-menu button { display: flex; align-items: center; gap: var(--sf-s-3); min-height: var(--sf-target); padding: 0 var(--sf-s-3); border-radius: var(--sf-r-2); color: var(--sf-text) !important; text-decoration: none; background: transparent; border: 0; text-align: left; cursor: pointer; width: 100%; }
.sf-menu a:hover, .sf-menu button:hover, .sf-menu .is-hover { background: var(--sf-bg-alt); }
.sf-menu__sep { border: 0; border-top: var(--sf-b-1); margin: var(--sf-s-2) 0; }

.sf-footer { background: var(--sf-asfalt); color: var(--sf-beton); --sf-focus: var(--sf-petrol-licht); padding-block: var(--sf-s-12) var(--sf-s-8); }
.sf-footer a { color: var(--sf-beton) !important; }
.sf-footer__grid { display: grid; gap: var(--sf-s-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sf-s-4); max-width: 360px; }
.sf-footer__brand img { height: 30px; width: auto; align-self: flex-start; }
.sf-footer h2 { font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-donker-300); margin-bottom: var(--sf-s-2); }
.sf-footer ul { list-style: none; padding: 0; margin: 0; }
.sf-footer li a { display: inline-flex; align-items: center; min-height: var(--sf-target); text-decoration: none; }
.sf-footer li a:hover { text-decoration: underline; }
.sf-footer__bottom { margin-top: var(--sf-s-10); padding-top: var(--sf-s-6); border-top: 1px solid var(--sf-donker-700); display: flex; flex-wrap: wrap; gap: var(--sf-s-2) var(--sf-s-6); color: var(--sf-donker-300); font-size: var(--sf-fs-2); }
@container sf (min-width: 1024px) {
  .sf-footer__grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
  .sf-footer__brand { grid-column: auto; }
}

/* ---------- 9. NAVIGATIEHULPEN ---------- */
.sf-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--sf-fs-2); }
.sf-breadcrumbs li { display: inline-flex; align-items: center; }
.sf-breadcrumbs li + li::before { content: "/"; color: var(--sf-muted); padding: 0 6px; }
.sf-breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--sf-target); }
.sf-breadcrumbs [aria-current] { color: var(--sf-muted); }
.sf-tabs { display: flex; gap: var(--sf-s-1); border-bottom: var(--sf-b-1); overflow-x: auto; }
.sf-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 var(--sf-s-4); border: 0; background: transparent; color: var(--sf-muted) !important; font-weight: 500; text-decoration: none !important; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.sf-tab:hover, .sf-tab.is-hover { color: var(--sf-text) !important; border-bottom-color: var(--sf-border-strong); }
.sf-tab[aria-selected="true"], .sf-tab[aria-current="page"] { color: var(--sf-text) !important; border-bottom-color: var(--sf-primary); font-weight: 600; }
.sf-tab__count { font-size: var(--sf-fs-1); background: var(--sf-bg-alt); border-radius: var(--sf-r-pill); padding: 2px 8px; color: var(--sf-text); }
.sf-pagination { display: flex; flex-wrap: wrap; gap: var(--sf-s-1); align-items: center; justify-content: center; }
.sf-pagination a, .sf-pagination span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--sf-target); min-height: var(--sf-target); padding: 0 10px; border-radius: var(--sf-r-2); text-decoration: none; color: var(--sf-text) !important; font-weight: 500; }
.sf-pagination a:hover { background: var(--sf-bg-alt); }
.sf-pagination [aria-current="page"] { background: var(--sf-text); color: var(--sf-bg) !important; }
.sf-pagination .is-disabled { color: var(--sf-disabled-text) !important; }
.sf-pagination__num { display: none !important; }
@container sf (min-width: 768px) { .sf-pagination__num { display: inline-flex !important; } .sf-pagination__compact { display: none !important; } }

/* chips en filterbalk */
.sf-filterbar { display: flex; flex-direction: column; gap: var(--sf-s-3); }
.sf-filterbar__chips { display: flex; flex-wrap: wrap; gap: var(--sf-s-2); padding: 4px 2px; margin: -4px -2px; }
.sf-filterbar__tools { display: flex; flex-wrap: wrap; gap: var(--sf-s-2); align-items: center; justify-content: space-between; }
.sf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--sf-target); padding: 0 16px; border-radius: var(--sf-r-pill); border: var(--sf-b-strong); background: var(--sf-surface); color: var(--sf-text) !important; font-weight: 500; text-decoration: none !important; white-space: nowrap; cursor: pointer; flex: none; }
.sf-chip:hover, .sf-chip.is-hover { border-color: var(--sf-text); }
.sf-chip[aria-pressed="true"], .sf-chip.is-active { background: var(--sf-primary); border-color: var(--sf-primary); color: var(--sf-on-primary) !important; }
.sf-chip:disabled, .sf-chip.is-disabled { color: var(--sf-disabled-text) !important; border-color: var(--sf-border); cursor: not-allowed; }
.sf-chip__x { margin-right: -6px; }
.sf-segment { display: inline-flex; border: var(--sf-b-strong); border-radius: var(--sf-r-2); overflow: hidden; }
.sf-segment a, .sf-segment button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; min-width: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--sf-text) !important; text-decoration: none; font-weight: 500; cursor: pointer; }
.sf-segment [aria-pressed="true"], .sf-segment [aria-current="true"] { background: var(--sf-text); color: var(--sf-bg) !important; }

/* tags (alleen tekst) en labels */
.sf-tags { display: flex; flex-wrap: wrap; gap: var(--sf-s-2); }
.sf-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: var(--sf-r-1); background: var(--sf-bg-alt); color: var(--sf-text) !important; font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); font-weight: 500; text-decoration: none !important; }
a.sf-tag { min-height: var(--sf-target); padding: 0 12px; border: var(--sf-b-strong); }
a.sf-tag:hover { border-color: var(--sf-text); }
.sf-label-status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: var(--sf-r-1); font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); font-weight: 600; }
.sf-label-status--ok { background: var(--sf-petrol-licht); color: var(--sf-petrol-donker); }
.sf-label-status--wacht { background: var(--sf-bg-alt); color: var(--sf-text); border: var(--sf-b-strong); }
.sf-label-status--vol { background: var(--sf-antraciet); color: var(--sf-beton); }
.sf-label-status--stop { background: var(--sf-rood-licht); color: var(--sf-rood); }
.sf-label-status--geel { background: var(--sf-geel); color: var(--sf-asfalt); }
.sf--donker .sf-label-status--vol { background: var(--sf-beton); color: var(--sf-asfalt); }

/* ---------- 10. KAARTEN ---------- */
.sf-card { display: flex; flex-direction: column; background: var(--sf-surface); border: var(--sf-b-1); border-radius: var(--sf-r-2); overflow: hidden; position: relative; color: var(--sf-text); }
.sf-card--flat { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.sf-card__body { display: flex; flex-direction: column; gap: var(--sf-s-2); padding: var(--sf-s-4); flex: 1 1 auto; }
.sf-card--flat .sf-card__body { padding: var(--sf-s-3) 0 0; }
.sf-card__title { font-size: var(--sf-fs-4); line-height: var(--sf-lh-4); font-weight: 600; }
.sf-card__title a { color: var(--sf-text) !important; text-decoration: none; }
.sf-card__title a::after { content: ""; position: absolute; inset: 0; } /* hele kaart klikbaar */
.sf-card__title a:focus-visible { outline: none; }
.sf-card:focus-within { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-card:hover .sf-card__title a, .sf-card.is-hover .sf-card__title a { text-decoration: underline; text-underline-offset: 3px; }
.sf-card:hover, .sf-card.is-hover { border-color: var(--sf-border-strong); }
.sf-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); color: var(--sf-muted); align-items: center; }
.sf-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.sf-card__foot { display: flex; flex-wrap: wrap; gap: var(--sf-s-2); align-items: center; padding: 0 var(--sf-s-4) var(--sf-s-4); position: relative; z-index: 1; }
.sf-card__foot--split { justify-content: space-between; }
.sf-card .sf-btn, .sf-card .sf-like, .sf-card a.sf-tag { position: relative; z-index: 1; }

/* fotokaart */
.sf-photo { position: relative; display: flex; flex-direction: column; gap: var(--sf-s-2); color: var(--sf-text); }
.sf-photo__link { display: block; position: relative; }
.sf-photo__link:hover .sf-ph, .sf-photo.is-hover .sf-ph { opacity: .88; }
.sf-photo__meta { display: flex; align-items: center; gap: var(--sf-s-2); min-width: 0; }
.sf-photo__title { font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-photo__by { font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-photo__badge { position: absolute; top: 8px; left: 8px; }
.sf-photo--loading .sf-ph { background: var(--sf-bg-alt); }

/* fotogrids */
.sf-grid-fixed { display: grid; gap: var(--sf-s-6) var(--sf-s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-fixed .sf-ph { aspect-ratio: 1; }
.sf-grid-masonry { columns: 2; column-gap: var(--sf-s-2); }
.sf-grid-masonry > * { break-inside: avoid; }
/* .sf ervoor: de reset (.sf figure {margin:0}) won anders, en dan plakte het bijschrift tegen de foto eronder */
.sf .sf-grid-masonry > * { margin-bottom: var(--sf-s-6); }
.sf-grid-cards { display: grid; gap: var(--sf-s-6) var(--sf-s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid-list { display: grid; gap: var(--sf-s-4); grid-template-columns: minmax(0, 1fr); }
.sf-hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--sf-s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sf-s-2); }
.sf-hscroll > * { scroll-snap-align: start; }
@container sf (min-width: 768px) {
  .sf-grid-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-s-8) var(--sf-s-3); }
  .sf-grid-masonry { columns: 3; column-gap: var(--sf-s-4); }
  .sf-grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-s-8) var(--sf-s-6); }
  .sf-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-s-6); }
  .sf-hscroll { grid-auto-columns: 42%; }
}
@container sf (min-width: 1024px) {
  .sf-grid-fixed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-grid-masonry { columns: 4; }
  .sf-grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-grid-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-hscroll { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .sf-hscroll--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* eventkaart */
.sf-event { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sf-s-4); padding: var(--sf-s-4); }
.sf-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 72px; border: 2px solid var(--sf-text); border-radius: var(--sf-r-2); line-height: 1; }
.sf-date__day { font-size: 1.75rem; font-weight: 600; }
.sf-date__month { font-size: var(--sf-fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-top: 4px; }

/* oproepkaart en minimum meter */
.sf-meter { display: flex; flex-direction: column; gap: 6px; }
.sf-meter__bar { position: relative; height: 10px; border-radius: var(--sf-r-pill); background: var(--sf-bg-alt); border: 1px solid var(--sf-border-strong); }
.sf-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--sf-r-pill); background: var(--sf-petrol); }
.sf--donker .sf-meter__fill { background: var(--sf-petrol-licht); }
.sf-meter__min { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--sf-text); }
.sf-meter__text { display: flex; justify-content: space-between; gap: var(--sf-s-2); font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); }
.sf-meter--stop .sf-meter__fill { background: var(--sf-grijs-400); }
.sf-faces { display: flex; }
.sf-faces > * + * { margin-left: -8px; }
.sf-faces .sf-avatar { box-shadow: 0 0 0 2px var(--sf-surface); }

/* boekkaart */
.sf-book { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sf-s-4); padding: var(--sf-s-4); }
.sf-book .sf-ph { aspect-ratio: 2 / 3; }
.sf-book > img, .sf-book > a > img { display: block; width: 100%; height: auto; }
.sf-affiliate { font-size: var(--sf-fs-1); line-height: var(--sf-lh-1); color: var(--sf-muted); }
.sf-book__buy { display: flex; flex-wrap: wrap; gap: var(--sf-s-2); position: relative; z-index: 1; }

/* videokaart (klik om te laden) */
.sf-video__frame { position: relative; }
.sf-video__load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sf-s-3); padding: var(--sf-s-4); text-align: center; color: #fff; background: rgba(18, 20, 23, .15); border: 0; width: 100%; cursor: pointer; font: inherit; }
.sf-video__play { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--sf-asfalt); display: inline-flex; align-items: center; justify-content: center; }
.sf-video__load:hover .sf-video__play { background: var(--sf-petrol-licht); }

/* opdrachtkaart */
.sf-assignment { background: var(--sf-asfalt); color: var(--sf-beton); border-color: var(--sf-asfalt); --sf-focus: var(--sf-petrol-licht); }
.sf-assignment .sf-card__body { padding: var(--sf-s-6); gap: var(--sf-s-3); }
.sf-assignment .sf-muted { color: var(--sf-donker-300); }
.sf-assignment .sf-btn--primary { background: var(--sf-petrol-licht); color: var(--sf-asfalt) !important; }
.sf-assignment .sf-btn--primary:hover { background: #fff; }
.sf-assignment .sf-btn--text { color: var(--sf-petrol-licht) !important; }
.sf-assignment__theme { font-size: var(--sf-fs-7); line-height: var(--sf-lh-7); font-weight: 600; }

/* kennisbankkaart */
.sf-kb .sf-card__body { gap: var(--sf-s-3); }
.sf-kb__excerpt { color: var(--sf-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* forumrij */
.sf-forum { border-top: var(--sf-b-1); }
.sf-forumrow { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sf-s-3); padding: var(--sf-s-4) 0; border-bottom: var(--sf-b-1); position: relative; }
.sf-forumrow:hover, .sf-forumrow.is-hover { background: var(--sf-bg-alt); }
.sf-forumrow__title { font-weight: 600; font-size: var(--sf-fs-3); line-height: var(--sf-lh-3); }
.sf-forumrow__title a { color: var(--sf-text) !important; text-decoration: none; }
.sf-forumrow__title a::after { content: ""; position: absolute; inset: 0; }
.sf-forumrow__title a:hover { text-decoration: underline; }
.sf-forumrow:focus-within { outline: 3px solid var(--sf-focus); outline-offset: 2px; }
.sf-forumrow__side { display: none; }
@container sf (min-width: 768px) {
  .sf-forumrow { grid-template-columns: 48px minmax(0, 1fr) 140px 160px; align-items: center; padding-inline: var(--sf-s-3); }
  .sf-forumrow__side { display: block; font-size: var(--sf-fs-2); color: var(--sf-muted); }
}

/* promoblok workshops */
.sf-promo { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--sf-beton); color: var(--sf-tekst); border-radius: var(--sf-r-2); overflow: hidden; }
.sf-promo__body { display: flex; flex-direction: column; gap: var(--sf-s-3); padding: var(--sf-s-6); }
.sf-promo__by { font-size: var(--sf-fs-2); color: var(--sf-grijs-600); }
.sf--donker .sf-promo { background: var(--sf-antraciet); color: var(--sf-beton); }
.sf--donker .sf-promo__by { color: var(--sf-donker-300); }
@container sf (min-width: 768px) {
  .sf-promo { grid-template-columns: 5fr 7fr; }
  .sf-promo .sf-ph { height: 100%; aspect-ratio: auto; min-height: 280px; }
  .sf-promo__body { padding: var(--sf-s-10); justify-content: center; }
}

/* ---------- 11. COMMUNITY ---------- */
.sf-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sf-petrol-licht); color: var(--sf-petrol-donker); font-weight: 600; font-size: var(--sf-fs-2); flex: none; overflow: visible; }
.sf-avatar--xs { width: 28px; height: 28px; font-size: var(--sf-fs-1); }
.sf-avatar--sm { width: 32px; height: 32px; font-size: var(--sf-fs-1); }
.sf-avatar--lg { width: 72px; height: 72px; font-size: var(--sf-fs-5); }
.sf-avatar--xl { width: 112px; height: 112px; font-size: var(--sf-fs-6); }
.sf-avatar--t2 { background: #E4E1DA; color: #4A4238; } .sf-avatar--t3 { background: var(--sf-antraciet); color: var(--sf-beton); } .sf-avatar--t4 { background: #D9DCDF; color: #2B2F33; }
.sf-avatar__badge { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sf-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.sf-avatar--xl .sf-avatar__badge, .sf-avatar--lg .sf-avatar__badge { width: 28px; height: 28px; font-size: 12px; border-width: 3px; }
.sf-avatar__badge--premium { background: var(--sf-asfalt); color: var(--sf-beton); }
.sf-avatar__badge--editor { background: var(--sf-petrol); color: #fff; }
.sf-avatar__badge--goud { background: var(--sf-geel); color: var(--sf-asfalt); }

/* badges */
.sf-badges { display: flex; flex-wrap: wrap; gap: var(--sf-s-3) var(--sf-s-4); }
.sf-badge { display: inline-flex; align-items: center; gap: var(--sf-s-2); font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); font-weight: 500; }
.sf-badge__mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: var(--sf-fs-3); flex: none; border: 2px solid transparent; }
.sf-badge--goud .sf-badge__mark { background: var(--sf-geel); color: var(--sf-asfalt); }
.sf-badge--zilver .sf-badge__mark { background: var(--sf-beton); color: var(--sf-asfalt); border-color: var(--sf-grijs-400); }
.sf-badge--brons .sf-badge__mark { background: var(--sf-antraciet); color: var(--sf-beton); }
.sf-badge--deelnemer .sf-badge__mark { background: var(--sf-petrol-licht); color: var(--sf-petrol-donker); }
.sf-badge--behulpzaam .sf-badge__mark { background: var(--sf-surface); color: var(--sf-petrol); border-color: var(--sf-petrol); }
.sf-badge--editor .sf-badge__mark { background: var(--sf-petrol); color: #fff; }
.sf-badge--premium .sf-badge__mark { background: var(--sf-asfalt); color: var(--sf-beton); }
.sf--donker .sf-badge--premium .sf-badge__mark { border-color: var(--sf-donker-500); }
.sf-badge--leeg .sf-badge__mark { background: transparent; color: var(--sf-muted); border: 2px dashed var(--sf-border-strong); }
.sf-badge__label small { display: block; color: var(--sf-muted); font-weight: 400; font-size: var(--sf-fs-1); line-height: var(--sf-lh-1); }

/* like (geel hartje) en reageren */
.sf-actions { display: flex; flex-wrap: wrap; gap: var(--sf-s-1); align-items: center; }
.sf-like, .sf-react { display: inline-flex; align-items: center; gap: var(--sf-s-2); min-height: var(--sf-target); padding: 0 14px 0 12px; border-radius: var(--sf-r-2); border: 1px solid color-mix(in srgb, var(--sf-border) 55%, transparent); background: transparent; color: var(--sf-text) !important; font-weight: 500; text-decoration: none !important; cursor: pointer; }
.sf-like:hover, .sf-like.is-hover, .sf-react:hover, .sf-react.is-hover { border-color: var(--sf-border); }
.sf-like__dot { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--sf-hart-leeg) center / contain no-repeat; mask: var(--sf-hart-leeg) center / contain no-repeat; --sf-hart-leeg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.2-9.4C1.6 7.6 3.9 4 7.4 4c2 0 3.6 1.1 4.6 2.7C13 5.1 14.6 4 16.6 4c3.5 0 5.8 3.6 4.6 7.1-1.7 4.8-9.2 9.4-9.2 9.4z'/%3E%3C/svg%3E"); }
.sf-like[aria-pressed="true"] .sf-like__dot { background: var(--sf-geel); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.2-9.4C1.6 7.6 3.9 4 7.4 4c2 0 3.6 1.1 4.6 2.7C13 5.1 14.6 4 16.6 4c3.5 0 5.8 3.6 4.6 7.1-1.7 4.8-9.2 9.4-9.2 9.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.2-9.4C1.6 7.6 3.9 4 7.4 4c2 0 3.6 1.1 4.6 2.7C13 5.1 14.6 4 16.6 4c3.5 0 5.8 3.6 4.6 7.1-1.7 4.8-9.2 9.4-9.2 9.4z'/%3E%3C/svg%3E"); }
.sf-like:disabled, .sf-like.is-disabled, .sf-like[aria-disabled="true"] { color: var(--sf-disabled-text) !important; border-color: var(--sf-border); cursor: not-allowed; }
.sf-like--compact { width: var(--sf-target); padding: 0; justify-content: center; border-color: transparent; }

/* reactiedraad */
.sf-thread { display: flex; flex-direction: column; gap: var(--sf-s-6); }
.sf-comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sf-s-3); }
.sf-comment__head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sf-comment__name { font-weight: 600; }
.sf-comment__name a { color: var(--sf-text) !important; text-decoration: none; }
.sf-comment__name a:hover { text-decoration: underline; }
.sf-comment__time { font-size: var(--sf-fs-2); color: var(--sf-muted); }
.sf-comment__text { margin-top: 4px; }
.sf-comment__actions { display: flex; gap: var(--sf-s-1); margin-top: 2px; margin-left: -8px; }
.sf-comment__actions .sf-btn--text { font-size: var(--sf-fs-2); color: var(--sf-muted) !important; text-decoration: none !important; }
.sf-comment__actions .sf-btn--text:hover { color: var(--sf-text) !important; text-decoration: underline !important; }
.sf-comment__replies { display: flex; flex-direction: column; gap: var(--sf-s-4); margin-top: var(--sf-s-4); padding-left: var(--sf-s-4); border-left: 2px solid var(--sf-border); }
.sf-comment--best { padding: var(--sf-s-4); border: 2px solid var(--sf-petrol); border-radius: var(--sf-r-2); }
.sf-comment--removed .sf-comment__text { color: var(--sf-muted); font-style: italic; }
.sf-composer { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sf-s-3); }

/* profielkop */
.sf-profilehead { display: flex; flex-direction: column; gap: var(--sf-s-4); }
.sf-profilehead__top { display: flex; gap: var(--sf-s-4); align-items: center; }
.sf-profilehead__name { font-size: var(--sf-fs-6); line-height: var(--sf-lh-6); font-weight: 600; }
.sf-socials { display: flex; gap: var(--sf-s-1); flex-wrap: wrap; }
.sf-socials a { color: var(--sf-text) !important; }
@container sf (min-width: 768px) {
  .sf-profilehead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sf-s-4) var(--sf-s-8); align-items: start; }
  .sf-profilehead__top { display: contents; }
  .sf-profilehead__name { font-size: var(--sf-fs-7); line-height: var(--sf-lh-7); }
}

/* deelmenu */
.sf-share { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* lightbox */
.sf-lightbox { position: relative; background: rgba(18, 20, 23, .97); color: var(--sf-beton); display: flex; flex-direction: column; --sf-focus: var(--sf-petrol-licht); }
.sf-lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-s-3); padding: var(--sf-s-2) var(--sf-s-3); }
.sf-lightbox__stage { display: flex; align-items: center; justify-content: center; gap: var(--sf-s-2); padding: var(--sf-s-4); flex: 1 1 auto; }
.sf-lightbox__nav { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--sf-donker-500); background: transparent; color: var(--sf-beton); display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; }
.sf-lightbox__nav:hover { background: var(--sf-antraciet); }
.sf-lightbox__caption { padding: var(--sf-s-3) var(--sf-s-4) var(--sf-s-4); font-size: var(--sf-fs-2); color: var(--sf-donker-300); text-align: center; }

/* ---------- 12. FEEDBACK ---------- */
.sf-alert { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--sf-s-3); align-items: start; padding: var(--sf-s-4); border-radius: 0; border-left-width: 5px !important; background: var(--sf-subtle); color: var(--sf-text); border: 1px solid transparent; }
.sf-alert .sf-i { margin-top: 2px; }
.sf-alert--info { background: var(--sf-petrol-licht); color: var(--sf-tekst); border-left-color: var(--sf-petrol); }
.sf-alert--info .sf-i { color: var(--sf-petrol); }
.sf-alert--succes { background: var(--sf-surface); border-color: var(--sf-petrol); }
.sf-alert--succes .sf-i { color: var(--sf-petrol); }
.sf-alert--fout { background: var(--sf-rood-licht); color: var(--sf-tekst); border-left-color: var(--sf-rood); }
.sf-alert--fout .sf-i { color: var(--sf-rood); }
.sf-alert--let { background: var(--sf-beton); border-color: var(--sf-grijs-400); color: var(--sf-tekst); }
.sf-alert__title { font-weight: 600; }
.sf-alert__close { margin: -10px -10px -10px 0; }
.sf-toast { display: flex; align-items: center; gap: var(--sf-s-3); padding: 6px 6px 6px var(--sf-s-4); min-height: 56px; background: var(--sf-asfalt); color: var(--sf-beton); border-radius: var(--sf-r-2); max-width: 440px; --sf-focus: var(--sf-petrol-licht); }
.sf-toast .sf-grow { padding-block: 8px; }
.sf-toast a { color: var(--sf-petrol-licht) !important; font-weight: 600; }
.sf--donker .sf-toast { background: var(--sf-beton); color: var(--sf-asfalt); --sf-focus: var(--sf-petrol); }
.sf--donker .sf-toast a { color: var(--sf-petrol) !important; }

.sf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sf-s-3); padding: var(--sf-s-10) var(--sf-s-6); border: 2px dashed var(--sf-border); border-radius: 0; }
.sf-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--sf-petrol); display: inline-flex; align-items: center; justify-content: center; color: var(--sf-wit); }
.sf--donker .sf-empty__icon { background: var(--sf-petrol-licht); color: var(--sf-asfalt); }
.sf-empty p { max-width: 420px; color: var(--sf-muted); }

.sf-skeleton { background: var(--sf-bg-alt); border-radius: var(--sf-r-1); }
.sf-skeleton--line { height: 14px; }

/* modal */
.sf-backdrop { background: rgba(18, 20, 23, .72); display: flex; align-items: flex-end; justify-content: center; padding: var(--sf-s-4); }
.sf-modal { width: 100%; max-width: 520px; background: var(--sf-surface); color: var(--sf-text); border-radius: var(--sf-r-3); display: flex; flex-direction: column; }
.sf-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-s-3); padding: var(--sf-s-4) var(--sf-s-3) var(--sf-s-2) var(--sf-s-6); }
.sf-modal__body { padding: 0 var(--sf-s-6) var(--sf-s-4); display: flex; flex-direction: column; gap: var(--sf-s-4); }
.sf-modal__foot { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--sf-s-3); padding: var(--sf-s-4) var(--sf-s-6) var(--sf-s-6); }
@container sf (min-width: 768px) { .sf-backdrop { align-items: center; } }

/* tabel */
.sf-table-wrap { overflow-x: auto; border: var(--sf-b-1); border-radius: var(--sf-r-2); }
.sf-table { width: 100%; border-collapse: collapse; font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); }
.sf-table th { text-align: left; font-weight: 600; background: var(--sf-bg-alt); padding: 12px 16px; white-space: nowrap; }
.sf-table td { padding: 12px 16px; border-top: var(--sf-b-1); vertical-align: middle; }
.sf-table tr:hover td { background: var(--sf-bg-alt); }

/* stappenindicator */
.sf-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sf-s-2); }
.sf-steps li { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); color: var(--sf-muted); }
.sf-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--sf-border); }
.sf-steps li.is-done::before { background: var(--sf-petrol); }
.sf-steps li.is-current::before { background: var(--sf-text); }
.sf-steps li.is-current { color: var(--sf-text); font-weight: 600; }
.sf-steps__label { display: none; }
.sf-steps li.is-current .sf-steps__label { display: block; }
@container sf (min-width: 768px) { .sf-steps__label { display: block; } }

/* limietmeter */
.sf-limit { display: flex; flex-direction: column; gap: var(--sf-s-2); padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-surface); }
.sf-limit__bar { height: 8px; border-radius: var(--sf-r-pill); background: var(--sf-bg-alt); border: 1px solid var(--sf-border-strong); overflow: hidden; }
.sf-limit__bar > span { display: block; height: 100%; background: var(--sf-petrol); }
.sf-limit--vol .sf-limit__bar > span { background: var(--sf-text); }

/* kennisbank onderdelen */
.sf-summary { background: var(--sf-petrol-licht); color: var(--sf-tekst); border-radius: var(--sf-r-2); padding: var(--sf-s-6); display: flex; flex-direction: column; gap: var(--sf-s-3); }
.sf-summary ul { margin: 0; padding-left: 1.2em; }
.sf-toc { display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--sf-border); }
.sf-toc a { display: flex; align-items: center; min-height: 40px; padding: 4px 0 4px var(--sf-s-4); margin-left: -2px; border-left: 2px solid transparent; color: var(--sf-muted) !important; text-decoration: none; font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); }
.sf-toc a:hover { color: var(--sf-text) !important; }
.sf-toc a[aria-current="true"] { color: var(--sf-text) !important; font-weight: 600; border-left-color: var(--sf-text); }
.sf-faq { border-top: var(--sf-b-1); }
.sf-faq details { border-bottom: var(--sf-b-1); }
.sf-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-s-4); min-height: 56px; padding: var(--sf-s-3) 0; font-weight: 600; cursor: pointer; list-style: none; }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq details[open] summary .sf-i { transform: rotate(180deg); }
.sf-faq__a { padding: 0 0 var(--sf-s-4); max-width: var(--sf-read); }
.sf-meta-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sf-s-2) var(--sf-s-4); font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); }
.sf-meta-list dt { color: var(--sf-muted); }
.sf-panel { border: var(--sf-b-1); border-radius: var(--sf-r-2); padding: var(--sf-s-6); background: var(--sf-surface); display: flex; flex-direction: column; gap: var(--sf-s-4); }
.sf-panel--alt { background: var(--sf-bg-alt); border-color: transparent; }

/* Infoblok: balk links, rond icoon en label erboven. Scherpe hoeken, net als alerts en lege staten. */
.sf-callout { border-left: 5px solid var(--sf-petrol); border-radius: 0; }
.sf--donker .sf-callout { border-left-color: var(--sf-petrol-licht); }
.sf-callout__kop { display: flex; align-items: center; gap: var(--sf-s-3); }
.sf-callout__kop > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-callout .sf-eyebrow { color: var(--sf-petrol); font-weight: 700; }
.sf--donker .sf-callout .sf-eyebrow { color: var(--sf-petrol-licht); }
.sf-callout__titel { font-family: var(--sf-display); font-size: 1.625rem; line-height: 1.1; font-weight: 800; }
.sf-badge { width: 44px; height: 44px; border-radius: 50%; background: var(--sf-petrol); color: var(--sf-wit); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sf-badge .sf-i { width: 22px; height: 22px; }
.sf--donker .sf-badge { background: var(--sf-petrol-licht); color: var(--sf-asfalt); }
.sf-stappen { display: flex; gap: 6px; }
.sf-stappen > span { width: 28px; height: 6px; background: var(--sf-border); }
.sf-stappen > .is-gedaan { background: var(--sf-petrol); }

/* agenda */
.sf-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: var(--sf-b-1); border-left: var(--sf-b-1); font-size: var(--sf-fs-2); }
.sf-cal > * { border-right: var(--sf-b-1); border-bottom: var(--sf-b-1); min-height: 44px; padding: 6px; }
.sf-cal__dow { font-weight: 600; background: var(--sf-bg-alt); min-height: 0; text-align: center; }
.sf-cal__day { display: flex; flex-direction: column; gap: 4px; }
.sf-cal__day.is-out { color: var(--sf-muted); background: var(--sf-bg-alt); }
.sf-cal__day.is-today .sf-cal__n { background: var(--sf-text); color: var(--sf-bg); border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.sf-cal__ev { display: none; font-size: var(--sf-fs-1); line-height: var(--sf-lh-1); padding: 3px 6px; border-radius: var(--sf-r-1); background: var(--sf-petrol-licht); color: var(--sf-petrol-donker) !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-petrol); }
@container sf (min-width: 768px) { .sf-cal > * { min-height: 104px; padding: 8px; } .sf-cal__ev { display: block; } .sf-cal__dot { display: none; } }
.sf-map { position: relative; background: #E3E5E1; border-radius: var(--sf-r-2); overflow: hidden; min-height: 240px; }
.sf-map__road { position: absolute; background: #FFFFFF; }
.sf-map__pin { position: absolute; width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--sf-petrol); border: 3px solid #fff; }
.sf-map__note { position: absolute; left: 12px; bottom: 12px; font-size: var(--sf-fs-1); background: #fff; color: var(--sf-tekst); padding: 4px 8px; border-radius: var(--sf-r-1); }

/* beheer */
/* Beheermenu: smal is het één knop die het menu uitklapt, breed staat het altijd open.
   Secties zijn <details>; dicht toont de kop het totaal van de badges erin. */
.sf-admin-nav__wrap > summary, .sf-admin-nav__sectie > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sf-s-3); min-height: var(--sf-target); padding: 0 var(--sf-s-3); border-radius: var(--sf-r-2); }
.sf-admin-nav__wrap > summary::-webkit-details-marker, .sf-admin-nav__sectie > summary::-webkit-details-marker { display: none; }
.sf-admin-nav__wrap > summary { border: var(--sf-b-1); font-weight: 600; }
.sf-admin-nav__wrap > summary > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-admin-nav__chev { margin-left: auto; transition: transform 0.15s; }
.sf-admin-nav__wrap[open] > summary .sf-admin-nav__chev, .sf-admin-nav__sectie[open] > summary .sf-admin-nav__chev { transform: rotate(180deg); }
.sf-admin-nav { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sf-s-2); }
.sf-admin-nav a { display: flex; align-items: center; gap: var(--sf-s-3); min-height: var(--sf-target); padding: 0 var(--sf-s-3); border-radius: var(--sf-r-2); color: var(--sf-text) !important; text-decoration: none; font-weight: 500; }
.sf-admin-nav a:hover, .sf-admin-nav__sectie > summary:hover, .sf-admin-nav__wrap > summary:hover { background: var(--sf-bg-alt); }
.sf-admin-nav a[aria-current="page"] { background: var(--sf-petrol-licht); color: var(--sf-petrol-donker) !important; }
.sf-admin-nav .sf-tab__count { margin-left: auto; }
.sf-admin-nav__sectie { margin-top: var(--sf-s-2); }
.sf-admin-nav__sectie > summary { font-size: var(--sf-fs-2); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-admin-nav__sectie > summary .sf-tab__count { text-transform: none; letter-spacing: 0; }
.sf-admin-nav__sectie > summary .sf-tab__count + .sf-admin-nav__chev { margin-left: 0; }
.sf-admin-nav__sectie[open] > summary .sf-tab__count { display: none; }
.sf-admin-nav__sectie[open] > summary .sf-admin-nav__chev { margin-left: auto; }
.sf-admin-nav__items { display: flex; flex-direction: column; gap: 2px; }
.sf-admin-nav__items a { padding-left: var(--sf-s-5); }
@container sf (min-width: 1024px) {
  .sf-admin-nav__wrap > summary { display: none; }
  .sf-admin-nav__wrap::details-content { content-visibility: visible; display: contents; }
  .sf-admin-nav { padding-top: 0; }
}
.sf-count { display: flex; flex-direction: column; gap: 2px; padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); text-decoration: none !important; color: var(--sf-text) !important; }
.sf-count:hover { border-color: var(--sf-text); }
.sf-count__n { font-size: var(--sf-fs-6); line-height: var(--sf-lh-6); font-weight: 600; }

/* auth */
.sf-auth { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
.sf-auth__photo { display: none; }
.sf-auth__form { padding: var(--sf-s-8) var(--sf-gutter) var(--sf-s-12); display: flex; justify-content: center; }
.sf-auth__box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--sf-s-6); }
.sf-or { display: flex; align-items: center; gap: var(--sf-s-3); color: var(--sf-muted); font-size: var(--sf-fs-2); }
.sf-or::before, .sf-or::after { content: ""; flex: 1; border-top: var(--sf-b-1); }
@container sf (min-width: 1024px) {
  .sf-auth { grid-template-columns: 1fr 1fr; }
  .sf-auth__photo { display: flex; flex-direction: column; justify-content: flex-end; background: var(--sf-asfalt); color: var(--sf-beton); position: relative; }
  .sf-auth__form { padding-block: var(--sf-s-20); align-items: flex-start; }
}

/* ---------- 13. UITBREIDINGEN (v1.1) ---------- */
/* prijsblok voor Premium en betaalpagina */
.sf-plans { display: grid; gap: var(--sf-s-4); grid-template-columns: minmax(0, 1fr); }
@container sf (min-width: 768px) { .sf-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-plan { display: flex; flex-direction: column; gap: var(--sf-s-4); padding: var(--sf-s-6); border: var(--sf-b-strong); border-radius: var(--sf-r-2); background: var(--sf-surface); }
.sf-plan--current { border: 2px solid var(--sf-primary); }
.sf-plan__price { font-size: var(--sf-fs-6); line-height: var(--sf-lh-6); font-weight: 600; }
.sf-plan__price small { font-size: var(--sf-fs-2); font-weight: 400; color: var(--sf-muted); }
.sf-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-plan li { display: flex; gap: var(--sf-s-2); align-items: flex-start; }
.sf-plan li .sf-i { color: var(--sf-petrol); margin-top: 2px; }
.sf-plan li .sf-i--check { color: var(--sf-groen); }

/* Premium: vinkjeslijst en vergelijking */
.sf-vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-s-3); grid-template-columns: minmax(0, 1fr); }
@container sf (min-width: 768px) { .sf-vinkjes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sf-s-6); } }
.sf-vinkjes li { display: flex; gap: var(--sf-s-3); align-items: flex-start; }
.sf-vinkjes__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sf-groen); color: #fff; }
.sf-vinkjes__mark .sf-i { width: 16px; height: 16px; }
.sf-vergelijk td:not(:first-child), .sf-vergelijk th:not(:first-child) { text-align: center; width: 7.5rem; }
.sf-vergelijk .sf-i--check { color: var(--sf-groen); }
.sf-vergelijk .sf-vergelijk__nee { color: var(--sf-muted); }
.sf-vergelijk th.sf-vergelijk__premium, .sf-vergelijk td:last-child { background: var(--sf-groen-licht); }
.sf-vergelijk tr:hover td:last-child { background: var(--sf-groen-licht); }
.sf-vergelijk tbody th, .sf-vergelijk tfoot th { background: none; font-weight: 400; white-space: normal; border-top: var(--sf-b-1); }
.sf-vergelijk tfoot th, .sf-vergelijk tfoot td { font-weight: 600; }
/* leerpad: verticale stappen voor de beginnersroute */
.sf-steps--vertical { flex-direction: column; gap: 0; counter-reset: sfstap; }
.sf-steps--vertical li { counter-increment: sfstap; flex-direction: row; gap: var(--sf-s-4); padding-bottom: var(--sf-s-6); position: relative; color: var(--sf-text); font-size: var(--sf-fs-3); line-height: var(--sf-lh-3); }
.sf-steps--vertical li::before { content: counter(sfstap); flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--sf-border-strong); background: var(--sf-surface); display: inline-flex; align-items: center; justify-content: center; font-size: var(--sf-fs-2); font-weight: 600; }
.sf-steps--vertical li::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--sf-border); }
.sf-steps--vertical li:last-child::after { display: none; }
.sf-steps--vertical li.is-done::before { background: var(--sf-petrol); border-color: var(--sf-petrol); color: #fff; }
.sf-steps--vertical li.is-current::before { border-color: var(--sf-text); }
.sf-steps--vertical .sf-steps__label { display: block; }
/* taalkeuze bij meer dan 2 talen */
.sf-lang--select .sf-select { min-height: 44px; width: auto; background-color: var(--sf-antraciet); color: var(--sf-beton); border-color: var(--sf-donker-500); font-size: var(--sf-fs-2); font-weight: 600; padding-block: 8px; }

/* documentatie op het canvas (niet voor productie) */
.sf-doc { padding: 64px; display: flex; flex-direction: column; gap: 56px; }
.sf-doc__sec { display: flex; flex-direction: column; gap: 20px; }
.sf-doc__h { font-size: 28px; line-height: 36px; font-weight: 600; padding-bottom: 12px; border-bottom: 2px solid var(--sf-text); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sf-doc__h code { font-size: 14px; font-weight: 400; color: var(--sf-muted); }
.sf-doc__label { font-size: 12px; line-height: 16px; font-family: ui-monospace, Menlo, monospace; color: var(--sf-muted); }
.sf-doc__states { display: grid; gap: 16px 24px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-items: end; }
.sf-doc__cell { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sf-doc__box { padding: 24px; border: 1px dashed var(--sf-border-strong); border-radius: 8px; }
.sf-swatch { display: flex; flex-direction: column; border: var(--sf-b-1); border-radius: 8px; overflow: hidden; }
.sf-swatch__c { height: 96px; display: flex; align-items: flex-end; padding: 10px; font-size: 12px; font-weight: 600; }
.sf-swatch__t { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; }
.sf-swatch__t code { font-size: 12px; color: var(--sf-muted); }