/* Fraunces (SIL Open Font License, zelf gehost: geen Google Fonts, AVG) */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2"); }
/* C-FUND — publieke pagina's (28/29-10-2026). Licht en rustig; accentkleur karmijn (besluit 29-10). */
:root {
  --blauw: #B3263E; --blauw-d: #8E1C30; --tint: #FBEFF1; --tekst: #111827; --tekst-2: #374151; --mute: #6b7280;
  --lijn: #e5e7eb; --vlak: #f9fafb; --wit: #fff; --groen: #13a26b; --fout: #b42318; --r: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--vlak); color: var(--tekst); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--blauw); }
.cf-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.cf-top { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.cf-top-in { display: flex; align-items: baseline; gap: 10px; height: 56px; align-items: center; }
.cf-merk { display: block; line-height: 0; }
.cf-merk img { height: 32px; width: auto; display: block; }
.cf-van { color: var(--mute); font-size: 13px; }
.cf-van a { color: inherit; }
main { padding: 32px 0 56px; }

/* Overzicht */
.cf-held h1 { font-size: 32px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
.cf-held p { color: var(--tekst-2); margin: 0 0 28px; max-width: 640px; }
.cf-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.cf-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.cf-kaart:hover { border-color: #cbd5e1; box-shadow: 0 4px 16px rgba(17, 24, 39, .06); }
.cf-kaart-beeld { aspect-ratio: 16 / 9; background: #f6e7ea center / cover no-repeat; }
.cf-kaart-in { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cf-kaart h2 { font-size: 17px; margin: 0; line-height: 1.3; }
.cf-org { color: var(--mute); font-size: 13px; }
.cf-kaart p { margin: 0; color: var(--tekst-2); font-size: 14px; }
.cf-leeg { background: var(--wit); border: 1px dashed var(--lijn); border-radius: var(--r); padding: 32px; color: var(--mute); text-align: center; }

/* Voortgang */
.cf-balk { height: 8px; background: #eef2f7; border-radius: 99px; overflow: hidden; margin: 6px 0; }
.cf-balk span { display: block; height: 100%; background: var(--blauw); border-radius: 99px; }
.cf-cijfers { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--mute); }
.cf-cijfers strong { color: var(--tekst); }

/* Campagne */
.cf-camp { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.cf-camp h1 { font-size: 30px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.01em; }
.cf-intro { font-size: 18px; color: var(--tekst-2); margin: 12px 0 20px; }
.cf-beeld { width: 100%; border-radius: var(--r); display: block; margin: 0 0 20px; background: #eef2f7; }
.cf-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 20px; }
.cf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r); }
.cf-verhaal p { margin: 0 0 14px; color: var(--tekst-2); }
.cf-blok { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 20px; margin: 0 0 20px; }
.cf-blok h2 { font-size: 16px; margin: 0 0 12px; }
.cf-zijkant { position: sticky; top: 16px; }
.cf-opgehaald { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.cf-doel { color: var(--mute); font-size: 14px; }
.cf-houd { font-size: 13px; color: var(--mute); margin: 12px 0 0; }

/* Formulier */
.cf-form label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.cf-form input[type=text], .cf-form input[type=email], .cf-form textarea {
  width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--wit); color: var(--tekst); }
.cf-form textarea { min-height: 72px; resize: vertical; }
.cf-form input:focus, .cf-form textarea:focus { outline: 2px solid rgba(179, 38, 62, .22); border-color: var(--blauw); }
.cf-bedragen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cf-bedragen button { font: inherit; font-weight: 600; padding: 10px 0; border: 1px solid var(--lijn); background: var(--wit); border-radius: 8px; cursor: pointer; color: var(--tekst); }
.cf-bedragen button[aria-pressed=true] { border-color: var(--blauw); background: var(--tint); color: var(--blauw-d); }
.cf-euro { position: relative; margin-top: 8px; }
.cf-euro span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mute); }
.cf-euro input { padding-left: 28px !important; }
.cf-vink { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 14px !important; color: var(--tekst-2); }
.cf-vink input { margin-top: 3px; flex: none; }
.cf-beloning { display: block; border: 1px solid var(--lijn); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; cursor: pointer; font-weight: 400 !important; }
.cf-beloning:has(input:checked) { border-color: var(--blauw); background: var(--tint); }
.cf-beloning.vol { opacity: .55; cursor: not-allowed; }
.cf-beloning-kop { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.cf-beloning-kop > span:last-child { white-space: nowrap; }
.cf-beloning small { color: var(--mute); display: block; margin-top: 2px; }
.cf-knop { display: block; width: 100%; margin-top: 18px; font: inherit; font-weight: 600; font-size: 16px; padding: 13px; border: 0; border-radius: 10px; background: var(--blauw); color: #fff; cursor: pointer; text-align: center; text-decoration: none; }
.cf-knop:hover { background: var(--blauw-d); }
.cf-totaal { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--tekst-2); }
.cf-totaal strong { color: var(--tekst); }
.cf-fout { background: #fef3f2; border: 1px solid #fecdca; color: var(--fout); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }
.cf-ok { color: var(--groen); font-weight: 600; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-klein { font-size: 12px; color: var(--mute); margin-top: 10px; }

/* Berichten */
.cf-berichten { list-style: none; margin: 0; padding: 0; }
.cf-berichten li { padding: 12px 0; border-top: 1px solid var(--lijn); }
.cf-berichten li:first-child { border-top: 0; padding-top: 0; }
.cf-berichten strong { font-size: 14px; }
.cf-berichten p { margin: 4px 0 0; color: var(--tekst-2); font-size: 14px; }

.cf-smal { max-width: 560px; margin: 0 auto; }
.cf-voet { border-top: 1px solid var(--lijn); background: var(--wit); padding: 20px 0 28px; color: var(--mute); font-size: 12px; }
.cf-voet p { margin: 6px 0; }
.cf-voet a { color: inherit; }

@media (max-width: 860px) {
  .cf-camp { grid-template-columns: 1fr; }
  .cf-zijkant { position: static; }
  .cf-camp h1 { font-size: 26px; }
  .cf-held h1 { font-size: 26px; }
  main { padding-top: 20px; }
}

/* Navigatie en inhoudspagina's (29-10) */
.cf-nav { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 14px; }
.cf-nav a { color: var(--tekst-2); text-decoration: none; }
.cf-nav a:hover { color: var(--blauw); }
.cf-nav-knop { background: var(--blauw); color: #fff !important; padding: 7px 12px; border-radius: 8px; font-weight: 600; }
.cf-nav-knop:hover { background: var(--blauw-d); }
.cf-sectie { margin: 56px 0 0; }
.cf-sectie > h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.01em; }
.cf-sectie > p.cf-sub { color: var(--tekst-2); margin: 0 0 22px; max-width: 680px; }
.cf-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cf-stap { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 20px; }
.cf-stap b { display: inline-flex; width: 28px; height: 28px; border-radius: 99px; background: var(--tint); color: var(--blauw); align-items: center; justify-content: center; font-size: 14px; margin-bottom: 10px; }
.cf-stap h3 { margin: 0 0 6px; font-size: 16px; }
.cf-stap p { margin: 0; color: var(--tekst-2); font-size: 14px; }
.cf-tabel { width: 100%; border-collapse: collapse; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; font-size: 14px; }
.cf-tabel th, .cf-tabel td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--lijn); }
.cf-tabel th:first-child, .cf-tabel td:first-child { text-align: left; }
.cf-tabel thead th { background: var(--vlak); font-weight: 600; color: var(--tekst-2); }
.cf-tabel td.cf-wij { color: var(--blauw-d); font-weight: 700; }
.cf-tabel tr:last-child td { border-bottom: 0; }
.cf-vragen details { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 14px 16px; margin: 0 0 8px; }
.cf-vragen summary { cursor: pointer; font-weight: 600; }
.cf-vragen details p { margin: 10px 0 0; color: var(--tekst-2); }
.cf-tekst { max-width: 760px; }
.cf-tekst h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.01em; }
.cf-tekst h2 { font-size: 18px; margin: 28px 0 8px; }
.cf-tekst p, .cf-tekst li { color: var(--tekst-2); }
.cf-tekst ol, .cf-tekst ul { padding-left: 20px; }
.cf-label { display: inline-block; background: #fff7e6; color: #8a5a00; border: 1px solid #ffe0a3; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.cf-kaart .cf-label { align-self: flex-start; }
.cf-banier { background: #fff7e6; border: 1px solid #ffe0a3; color: #6b4600; border-radius: var(--r); padding: 12px 16px; margin: 0 0 20px; font-size: 14px; }
.cf-cta { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 28px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cf-cta h2 { margin: 0 0 4px; font-size: 20px; }
.cf-cta p { margin: 0; color: var(--tekst-2); }
.cf-cta .cf-knop { width: auto; margin: 0; padding: 12px 22px; }
@media (max-width: 860px) {
  .cf-stappen { grid-template-columns: 1fr; }
  .cf-nav:not(.cf-nav-dash) a:not(.cf-nav-knop):not([href='/fund/dashboard/']) { display: none; }
  .cf-nav-dash { gap: 12px; font-size: 13px; }
  .cf-van { display: none; }
  .cf-nav-knop { white-space: nowrap; font-size: 13px; padding: 6px 10px; }
  .cf-tabel th, .cf-tabel td { padding: 8px 10px; }
}

/* Schreefletter voor koppen (besluit 29-10): programmaboekje-gevoel */
:root { --kop: "Fraunces", Georgia, "Times New Roman", serif; }
.cf-held h1, .cf-camp h1, .cf-tekst h1, .cf-sectie > h2, .cf-cta h2, .cf-opgehaald, .cf-kaart h2 {
  font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-optical-sizing: auto; }
.cf-held h1 { font-size: 44px; line-height: 1.08; font-weight: 500; }
.cf-held h1 em { font-style: italic; color: var(--blauw); font-weight: 500; }
.cf-sectie > h2 { font-size: 30px; font-weight: 500; }
.cf-camp h1 { font-size: 36px; font-weight: 500; line-height: 1.12; }
.cf-opgehaald { font-size: 34px; font-weight: 600; }
.cf-kaart h2 { font-size: 19px; font-weight: 600; }
@media (max-width: 860px) { .cf-held h1 { font-size: 32px; } .cf-camp h1 { font-size: 28px; } .cf-sectie > h2 { font-size: 24px; } }

/* Dashboard (29-10) */
.cf-form input[type=password], .cf-form input[type=number], .cf-form input[type=date], .cf-form input[type=url], .cf-form select {
  width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--wit); color: var(--tekst); }
.cf-link-knop { background: none; border: 0; font: inherit; font-size: 14px; color: var(--tekst-2); cursor: pointer; padding: 0; }
.cf-link-knop:hover { color: var(--blauw); }
.cf-nav-dash a[aria-current=page] { color: var(--blauw); font-weight: 600; }
.cf-dash main { padding-top: 28px; }
.cf-gelukt { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 0 0 16px; }
.cf-kopregel { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.cf-kopregel h1 { font-family: var(--kop); font-weight: 500; font-size: 30px; margin: 0; letter-spacing: -.015em; }
.cf-kopregel .cf-knop { width: auto; margin: 0; padding: 10px 18px; font-size: 15px; }
.cf-lijst { width: 100%; border-collapse: collapse; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; font-size: 14px; }
.cf-lijst th, .cf-lijst td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.cf-lijst th { background: var(--vlak); font-weight: 600; color: var(--tekst-2); font-size: 13px; }
.cf-lijst tr:last-child td { border-bottom: 0; }
.cf-lijst td.r, .cf-lijst th.r { text-align: right; white-space: nowrap; }
.cf-lijst a { font-weight: 600; text-decoration: none; }
.cf-status { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #f1f5f9; color: #475569; }
.cf-status.live { background: #ecfdf3; color: #067647; }
.cf-status.beoordeling, .cf-status.gepland { background: #fff7e6; color: #8a5a00; }
.cf-status.afgewezen, .cf-status.gestopt { background: #fef3f2; color: #b42318; }
.cf-twee { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cf-rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-hulp { font-size: 12.5px; color: var(--mute); margin: 4px 0 0; }
.cf-knop-2 { display: inline-block; font: inherit; font-weight: 600; font-size: 14px; padding: 9px 14px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--wit); color: var(--tekst); cursor: pointer; text-decoration: none; }
.cf-knop-2:hover { border-color: #cbd5e1; }
.cf-knop-2.gevaar { color: #b42318; }
.cf-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cf-knoppen .cf-knop { width: auto; margin: 0; padding: 10px 18px; font-size: 15px; }
.cf-checklist { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.cf-checklist li { padding: 4px 0 4px 24px; position: relative; color: var(--tekst-2); }
.cf-checklist li::before { content: "○"; position: absolute; left: 0; color: var(--mute); }
.cf-checklist li.ok::before { content: "✓"; color: var(--groen); font-weight: 700; }
.cf-cijfer { font-family: var(--kop); font-size: 28px; font-weight: 600; }
@media (max-width: 860px) { .cf-twee, .cf-rij2 { grid-template-columns: 1fr; } .cf-lijst .m-weg { display: none; } }

/* Campagnepagina op telefoon (29-10): stand onder de titel, vaste doneerbalk onderin */
.cf-stand-kort, .cf-doneerbalk { display: none; }
@media (max-width: 860px) {
  .cf-stand-kort { display: block; margin: 4px 0 18px; }
  .cf-stand-kort strong { font-family: var(--kop); font-weight: 500; font-size: 26px; color: var(--tekst); }
  .cf-stand-kort span { color: var(--tekst-2); font-size: 14px; }
  .cf-stand-kort-onder { display: flex; justify-content: space-between; font-size: 13px; }
  .cf-doneerbalk { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--wit); border-top: 1px solid var(--lijn); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(17, 24, 39, .06);
    transition: transform .2s ease; }
  .cf-doneerbalk.weg { transform: translateY(110%); }
  .cf-doneerbalk strong { font-size: 17px; display: block; line-height: 1.2; }
  .cf-doneerbalk span { font-size: 12.5px; color: var(--tekst-2); }
  .cf-doneerbalk .cf-knop { width: auto; margin: 0; padding: 11px 26px; }
  body:has(.cf-doneerbalk) { padding-bottom: 72px; }
  #doneer { scroll-margin-top: 16px; }
}
/* Kleine telefoon (29-10): kop past niet met het brede logo, inloggen staat ook op Voor organisaties */
@media (max-width: 480px) {
  .cf-merk img { height: 24px; }
  .cf-nav:not(.cf-nav-dash) a[href='/fund/dashboard/'] { display: none; }
}

/* Donatieformulier (29-10): eerst het bedrag; tegenprestaties die bij het bedrag passen lichten op */
.cf-beloning.past:not(:has(input:checked)) { border-color: #e7a9b5; }
.cf-beloning.past .cf-vanaf::after { content: "past bij uw bedrag"; display: block; text-align: right; font-size: 12px; color: var(--blauw-d); font-weight: 500; }
.cf-bedragen button { font-size: 16px; padding: 12px 0; }
.cf-form label.cf-beloning { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
.cf-beloning > input { grid-row: 1 / span 6; margin: 4px 0 0; }
.cf-beloning > :not(input) { grid-column: 2; }

/* Kaart zonder beeld (29-10): stippenraster zoals het logo, met de naam van de organisatie */
.cf-kaart-beeld.cf-stippen { display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center;
  background: radial-gradient(circle, rgba(179, 38, 62, .22) 1.6px, transparent 2px) 0 0 / 12px 12px, var(--tint); }
.cf-kaart-beeld.cf-stippen span { font-family: var(--kop); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--blauw-d);
  background: var(--tint); padding: 4px 10px; border-radius: 6px; }

/* Overzicht (29-10): tabjes bij meer dan 9 campagnes */
.cf-tabs { display: flex; gap: 6px; margin: 0 0 16px; flex-wrap: wrap; }
.cf-tabs a { padding: 7px 14px; border: 1px solid var(--lijn); border-radius: 99px; font-size: 14px; color: var(--tekst-2); text-decoration: none; background: var(--wit); }
.cf-tabs a[aria-current=page] { border-color: var(--blauw); background: var(--tint); color: var(--blauw-d); font-weight: 600; }