:root{--primair:#0089C0;--primair-licht:#00AEEF;--accent:#EC008C}
/* Huisstijl Jong Nederland Bergen: JN-blauw (var(--primair-licht)) en JN-roze (var(--accent)), zoals op jnbergen.nl. */
/* Lettertypes staan zelf op de server: geen IP-adressen naar Google. */
@font-face { font-family: Nunito; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nunito-400.woff2) format("woff2"); }
@font-face { font-family: Nunito; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-700.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700.woff2) format("woff2"); }
/* Altijd ruimte voor de scrollbalk, zodat pagina's niet verspringen. */
html { scrollbar-gutter: stable; overflow-y: scroll; }
body { margin: 0; font-family: Nunito, Arial, sans-serif; background: #EEF9FE; color: #313131; }
header { position: relative; background: linear-gradient(120deg, var(--primair-licht) 0%, var(--primair) 65%, color-mix(in srgb, var(--accent) 77%, black) 130%); color: #fff; padding: 22px 14px 40px; }
/* 🎨 De drie kleuren van de afdeling (themaStijl) ook in de kop; zonder color-mix blijft het standaardverloop hierboven. */
@supports (background: color-mix(in srgb, red 50%, black)) {
  header { background: linear-gradient(120deg, var(--primair-licht, var(--primair-licht)) 0%, var(--primair, var(--primair)) 65%, color-mix(in srgb, var(--accent, var(--accent)) 77%, black) 130%); }
}
/* Kop en navigatie even breed als de kaarten eronder. */
header .kop, header .topbalk { max-width: 652px; margin: 0 auto; }
@media (min-width: 900px) { header { padding-left: 20px; padding-right: 20px; } header .kop, header .topbalk { max-width: 960px; } }
@media (min-width: 1300px) { header .kop, header .topbalk { max-width: 1160px; } }
@media (min-width: 1700px) { header .kop, header .topbalk { max-width: 1360px; } }
header a { color: #fff; }

/* Hoofdmenu onder logo en titel: één lichte balk. */
header .topbalk { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding: 6px;
                  border-radius: 14px; background: rgba(255,255,255,.12); box-sizing: border-box; }
/* Te smal voor één regel (basis.js zet .smal): Uitleg en Meldingen alleen als pictogram. */
header .topbalk.smal .rechts .pil-tekst { display: none; }
/* ℹ️ Uitleg en 🔔 Meldingen altijd alleen als pictogram (de naam staat in title en aria-label). */
header .pil-icoon .pil-tekst { display: none; }
header .topbalk .links, header .topbalk .rechts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
header .topbalk form { display: inline; margin: 0; }
header .pil { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 0;
              background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none;
              cursor: pointer; transition: background .15s, transform .15s; box-sizing: border-box; }
header .pil:hover { background: rgba(255,255,255,.14); }
header .pil.rond { width: 34px; padding: 0; justify-content: center; font-size: 18px; }
header .pil.rond:hover { transform: translateX(-2px); }
header select.pil { appearance: none; -webkit-appearance: none; min-height: 0 !important; color: #fff !important; background-color: transparent !important;
                    border: 0 !important; box-shadow: none !important; padding: 0 30px 0 14px;
                    background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%) !important;
                    background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px !important; background-size: 5px 5px !important; background-repeat: no-repeat !important; }
header select.pil option { color: #313131; background: #fff; }
html.donker header select.pil option { color: #E3EAF0; background: #17232B; }
html.donker header select.pil { background-color: transparent !important; color: #fff !important; border: 0 !important; }
header .thema-keuze { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.18); }
header .thema-keuze button { border: 0; background: none; border-radius: 999px; width: 30px; height: 30px; font-size: 14px; cursor: pointer; opacity: .65; padding: 0; }
header .thema-keuze button:hover { opacity: 1; }
header .thema-keuze button[aria-pressed="true"] { background: #fff; opacity: 1; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
html.donker header .thema-keuze button[aria-pressed="true"] { background: #17232B; }

header .kop { display: flex; align-items: center; justify-content: flex-start; gap: 22px; }
header .kop-tekst { text-align: left; }
header .kop-tekst { min-width: 0; overflow-wrap: anywhere; }
header h1 { font-family: Poppins, Arial, sans-serif; margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
header .kop-tekst p { margin: 4px 0 0; opacity: .9; font-size: 15px; }
header .logo { flex: none; display: inline-block; background: #fff; border-radius: 16px; padding: 8px 14px;
               box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: rotate(-5deg); transition: transform .25s ease; }
header .logo:hover { transform: rotate(3deg) scale(1.06); }
header .logo img { display: block; height: 46px; }
header .logo.merk { padding: 6px; border-radius: 14px; }
/* Kaarten schuiven iets over de kop; main moet dan ook gepositioneerd zijn, anders valt de kop eroverheen. */
main { position: relative; z-index: 1; max-width: 680px; margin: -20px auto 40px; padding: 0 14px; }
@media (min-width: 900px) { main { max-width: 1000px; padding: 0 20px; } }
@media (min-width: 1300px) { main { max-width: 1200px; } }
@media (min-width: 1700px) { main { max-width: 1400px; } }
@media (max-width: 600px) {
  header { padding: 14px 8px 32px; }
  header .topbalk { margin-top: 12px; padding: 4px; }
  header .pil { height: 32px; padding: 0 11px; }
  header .pil-tekst { display: none; }
  header .kop { gap: 14px; }
  header h1 { font-size: 21px; }
  header .logo img { height: 40px; }
  main { padding: 0 8px; }
  .kaart { padding: 16px 14px; border-radius: 14px; }
  h2 { font-size: 17px; }
}
.home-raster { display: grid; gap: 16px; }
@media (min-width: 900px) { .home-raster { grid-template-columns: 1fr 1fr; align-items: start; } .home-raster .kaart { margin-bottom: 0; } }
.home-beheer { margin-top: 10px; }
/* Agenda-items: titel, dan datum en tijd, dan labels. */
.agenda-item { display: grid; gap: 4px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; border-bottom: 1px solid #F1F3F5; }
.agenda-item:last-of-type { border-bottom: 0; }
.agenda-item.klikbaar { cursor: pointer; transition: background .15s; }
.agenda-item.klikbaar:hover, .agenda-item.klikbaar:focus-visible { background: color-mix(in srgb, var(--primair-licht) 10%, white); outline: none; }
.agenda-item.voorbij { opacity: .6; }
.agenda-titel { font-family: Poppins, Arial, sans-serif; font-size: 16px; }
.agenda-wanneer { font-size: 14px; color: #6B7280; }
.agenda-labels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.tag { font-size: 12px; font-weight: 700; color: var(--primair); background: color-mix(in srgb, var(--primair-licht) 10%, white); border-radius: 999px; padding: 2px 9px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primair-licht) 40%, white); }
.tag.groep { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, white); }
.tag.plek { color: #495057; background: #F1F3F5; box-shadow: inset 0 0 0 1px #CED4DA; font-weight: 400; }
.agenda-knoppen { margin-left: auto; display: inline-flex; gap: 6px; }
html.donker .agenda-item { border-color: #26343D !important; }
html.donker .agenda-item.klikbaar:hover { background: color-mix(in srgb, var(--primair) 25%, #17232B) !important; }
html.donker .tag { background: color-mix(in srgb, var(--primair) 25%, #17232B) !important; color: color-mix(in srgb, var(--primair-licht) 40%, white) !important; }
html.donker .tag.groep { background: color-mix(in srgb, var(--accent) 25%, #17232B) !important; color: color-mix(in srgb, var(--accent) 35%, white) !important; }
html.donker .tag.plek { background: #26343D !important; color: #CED4DA !important; }
html.donker .agenda-wanneer { color: #9AA5B1 !important; }

[hidden], .uit { display: none !important; }
.kaart { background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
@media (min-width: 900px) { .kaart { padding: 24px 28px; } }
h2 { font-family: Poppins, Arial, sans-serif; font-size: 18px; margin: 0 0 12px; }
.knop { display: inline-block; font: inherit; font-weight: 700; border: 0; border-radius: 10px; padding: 10px 16px; background: var(--primair);
        color: #fff; cursor: pointer; text-decoration: none; text-align: center; }
.knop:hover { background: var(--primair-licht); }
.knop.licht { background: color-mix(in srgb, var(--primair-licht) 10%, white); color: var(--primair); }
.knop.groot { display: block; border-radius: 12px; padding: 14px 16px; font-size: 17px; }
.klein { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid #DEE2E6; border-radius: 999px; padding: 4px 10px;
         background: #fff; color: var(--primair); cursor: pointer; white-space: nowrap; text-decoration: none; }
.klein.gevaar { color: #C92A2A; }
/* Een kleine knop in een knoppenrij of balk naast een gewone knop (zoals ＋ Tarief naast Tarieven opslaan, ▤ Compact naast ＋ Verhuur):
   even groot, als lichte knop. */
:is([class*="knoppen"], [class*="acties"], [class*="balk"]):has(> .knop:not(.klein)) > .klein:not(.knop) { font-size: inherit; padding: 10px 16px; border-radius: 10px;
  border: 0; background: color-mix(in srgb, var(--primair-licht) 10%, white); }
html.donker :is([class*="knoppen"], [class*="acties"], [class*="balk"]):has(> .knop:not(.klein)) > .klein:not(.knop) { background: color-mix(in srgb, var(--primair) 25%, #17232B) !important; border-color: transparent !important; }
html.donker :is([class*="knoppen"], [class*="acties"], [class*="balk"]):has(> .knop:not(.klein)) > .klein:not(.knop):not(.gevaar) { color: #E3EAF0; }
input, select, textarea { font: inherit; font-size: 15px; border: 1px solid #DEE2E6; border-radius: 10px; padding: 10px 12px; min-height: 42px;
                          background: #F8F9FA; color: inherit; box-sizing: border-box; max-width: 100%; }
input[type=checkbox], input[type=radio] { min-height: 0; padding: 0; }
/* Safari (Mac/iPhone) maakt datum- en tijdvelden een paar pixels hoger dan de andere velden (binnenmarges van de datumdelen). */
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; line-height: 1.2; }
input::-webkit-date-and-time-value { margin: 0; text-align: left; }
input::-webkit-datetime-edit, input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=color] { padding: 2px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primair); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primair-licht) 20%, white); }
textarea { width: 100%; min-height: 110px; resize: vertical; }
/* Keuzelijsten even hoog als invoervelden: Safari (Mac/iPhone) negeert hoogte en padding van een standaard-select,
   daarom zonder systeemopmaak en met een eigen pijltje. */
select:not([multiple]):not(.pil):not(.st) { -webkit-appearance: none; appearance: none; padding-right: 30px !important; line-height: 1.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 8px !important; }
html.donker select:not([multiple]):not(.pil):not(.st) { background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 8px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239AA5B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
/* Statusknoppen in de planning (✓ Ja / Verhinderd): geen pijltje, tekst in het midden. */
select.st { -webkit-appearance: none; appearance: none; background-image: none !important; text-align: center; text-align-last: center; }
/* Op telefoons: 16px voorkomt dat iOS inzoomt, knoppen en velden zijn makkelijk te raken. */
@media (max-width: 600px) {
  input, select, textarea { font-size: 16px; min-height: 46px; }
  .knop { padding: 12px 16px; }
  .klein { padding: 6px 12px; }
}
.status { font-size: 14px; color: #6B7280; }
.status.fout { color: #C92A2A; }
.leeg { text-align: center; color: #6B7280; }
.melding { border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-top: 12px; }
.melding.info { background: color-mix(in srgb, var(--primair-licht) 10%, white); }
.melding.goed { background: #D3F9D8; }
.melding.fout { background: #FFE3E3; color: #C92A2A; }
.toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #313131; color: #fff; border-radius: 10px;
         padding: 10px 16px; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 50; }
.toast.fout { background: #C92A2A; }
footer { text-align: center; font-size: 12px; color: #6B7280; margin-bottom: 30px; }
footer a { color: inherit; }
.formulieren { display: grid; gap: 10px; }
.form { display: flex; gap: 12px; align-items: center; text-decoration: none; background: color-mix(in srgb, var(--primair-licht) 10%, white); border-radius: 12px; padding: 12px 14px; color: #313131; }
.form .emoji { font-size: 28px; }
.form small { display: block; color: #6B7280; }
@media (min-width: 900px) { .formulieren.twee { grid-template-columns: 1fr 1fr; } }

/* Donkere modus: knop in de kop (licht/donker/apparaat), zie js/thema.js. Pagina's zetten eigen (lichte) kleuren, daarom !important. */
html.donker { color-scheme: dark; }
html.donker body { background: #0E171D !important; color: #E3EAF0 !important; }
html.donker header { background: linear-gradient(120deg, color-mix(in srgb, var(--primair) 88%, black) 0%, color-mix(in srgb, var(--primair) 65%, black) 65%, color-mix(in srgb, var(--accent) 52%, black) 130%) !important; }
@supports (background: color-mix(in srgb, red 50%, black)) {
  html.donker header { background: linear-gradient(120deg, color-mix(in srgb, var(--primair-licht, var(--primair-licht)) 70%, black) 0%, color-mix(in srgb, var(--primair, var(--primair)) 66%, black) 65%, color-mix(in srgb, var(--accent, var(--accent)) 52%, black) 130%) !important; }
}
html.donker :is(.kaart, .balk, .paneel, .ster, td, th) { background-color: #17232B !important; color: #E3EAF0; }
html.donker :is(.chip, .form, .tab, .apparaat, .knop.licht, .menu > summary, .melding.info) { background: color-mix(in srgb, var(--primair) 25%, #17232B) !important; color: #E3EAF0 !important; }
html.donker .menu[open] > summary { background: var(--primair) !important; color: #fff !important; }
html.donker .chip.rol { background: color-mix(in srgb, var(--accent) 25%, #17232B) !important; }
html.donker .chip.aan { background: color-mix(in srgb, var(--primair) 40%, #17232B) !important; }
html.donker code { background: #26343D !important; }
/* Planning: namen zonder pil (zoals de personenlijst); alleen de kleur van verantwoordelijk, ik en verhinderd. */
html.donker .pl-wie .naam { background: transparent !important; }
html.donker .pl-wie .naam.hoofd { color: color-mix(in srgb, var(--accent) 35%, white) !important; }
html.donker .pl-wie .naam.ik:not(.hoofd) { color: color-mix(in srgb, var(--primair-licht) 70%, white) !important; }
html.donker .apparaat-lijst { background: #0F1A21 !important; }
html.donker .pl-wie .naam.weg { background: transparent !important; color: #6B7A86 !important; }
html.donker .melding.goed { background: #1C3A25 !important; }
html.donker .melding.fout { background: #4A2326 !important; color: #FFA8A8 !important; }
html.donker :is(input, select, textarea) { background: #0F1A21 !important; border-color: #33444F !important; color: #E3EAF0 !important; }
html.donker :is(input, select):disabled { background: transparent !important; border-color: transparent !important; }
/* Vaste velden (ingesteld door de afdeling): als gewone tekst, ook een keuzelijst (geen pijltje). */
:is(input, select)[data-vast]:disabled { background: transparent !important; border-color: transparent !important; background-image: none !important; -webkit-appearance: none; appearance: none; opacity: 1; color: #6B7280; -webkit-text-fill-color: #6B7280; }
html.donker :is(input, select)[data-vast]:disabled { color: #9AA5B1 !important; -webkit-text-fill-color: #9AA5B1; }
html.donker :is(.afm, .klein) { background: transparent !important; border-color: #33444F !important; }
html.donker .st { background: #26343D !important; color: #9AA5B1 !important; }
html.donker .st.ja { background: #1C3A25 !important; color: #8CE99A !important; }
html.donker .st.nee { background: #26343D !important; color: #CED4DA !important; }
html.donker .st.verhinderd { background: #4A2326 !important; color: #FFA8A8 !important; }
html.donker .ster.aan { background: #4A3B0F !important; }
html.donker tr.geen td { background: #2A1C20 !important; }
html.donker tr.geen .weeklabel { color: #FF8787 !important; }
html.donker tr.geen .act { color: #FFA8A8 !important; }
html.donker :is(tr.vak td, table.log tr.nieuw td) { background: #33201F !important; }
html.donker tr.vakbalk td { background: #4A2326 !important; color: #FFA8A8 !important; }
html.donker .vakmenu > summary { background: #17232B !important; color: #FFA8A8 !important; border-color: #7A3A3E !important; }
html.donker :is(.vakmenu > summary:hover, .vakmenu[open] > summary) { background: #C92A2A !important; color: #fff !important; }
html.donker .vakmenu .paneel { background: none !important; }
html.donker .vakmenu .paneel button { background: #2A1A1C !important; color: #FFA8A8 !important; }
html.donker :is(tr.nu td, .pl-rij.nu) { background: #22202C !important; }
html.donker .pl-rij.geen { background: #2A1C20 !important; }
html.donker .pl-rij.geen b { color: #FFA8A8 !important; }
html.donker .pl-rij.geen .weeklabel { color: #FF8787 !important; }
html.donker :is(.pl-rij, .daarna div, td, th, .leider, hr, .sjabloon) { border-color: #26343D !important; }
html.donker :is(.form, .tekst, h2, h3) { color: #E3EAF0 !important; }
html.donker :is(small, .regio, .status, .leeg, .pl-datum, .form small, footer) { color: #9AA5B1 !important; }
html.donker .status.fout { color: #FF8787 !important; }
html.donker :is(.tekst a, .form a, a.bewerk) { color: color-mix(in srgb, var(--primair-licht) 70%, white) !important; }
html.donker .functie-rij td { background: color-mix(in srgb, var(--primair) 25%, #17232B) !important; }

/* 🖨️ Op papier een document, geen afgedrukte webpagina: geen marge van de browser (dan ook geen kop- en voettekst met datum,
   titel, adres en paginanummer); de marges zitten in de pagina zelf. */
@page { size: A4; margin: 0; }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; }
  main { padding: 14mm 16mm !important; box-sizing: border-box; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* Ook de balken boven de pagina (demo, mededelingen) niet op papier. */
  header, footer, .geen-print, .bovenbalken { display: none !important; }
  /* Op het scherm schuift main 20px onder de kop; op papier is er geen kop, dus niet omhoog (anders valt het logo half weg). */
  main { margin-top: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .kaart { box-shadow: none !important; }
}
.metselwerk { grid-auto-rows: 1px; row-gap: 0 !important; }
.metselwerk > * { margin-bottom: 0 !important; align-self: start; }
/* Uitgerekt tot de onderkant van de langste kaart ernaast (vóór een brede kaart, basis.js); de 16px onderaan blijft de ruimte tussen kaarten. */
.metselwerk > .vult-hoogte { align-content: start; box-sizing: border-box; }
.kaart > h2.inklap { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.kaart > h2.inklap::after { content: "▾"; margin-left: auto; font-size: 16px; opacity: .45; transition: transform .2s; }
.kaart > h2.inklap:hover::after { opacity: .9; }
.kaart.ingeklapt > h2.inklap { margin-bottom: 0; }
.kaart.ingeklapt > h2.inklap::after { transform: rotate(-90deg); }
.kaart.ingeklapt > :not(h2) { display: none !important; }
.home-raster > .kaart:only-child { grid-column: 1 / -1; }
header .kruimels { max-width: 652px; margin: 10px auto 0; font-size: 13px; }
@media (min-width: 900px) { header .kruimels { max-width: 960px; } }
@media (min-width: 1300px) { header .kruimels { max-width: 1160px; } }
@media (min-width: 1700px) { header .kruimels { max-width: 1360px; } }
header .kruimels ol { display: flex; flex-wrap: wrap; gap: 2px 0; list-style: none; margin: 0; padding: 0 8px; }
header .kruimels li { display: flex; align-items: center; }
header .kruimels li + li::before { content: "›"; margin: 0 8px; opacity: .6; }
header .kruimels a { color: #fff; opacity: .85; text-decoration: none; font-weight: 700; }
header .kruimels a:hover { opacity: 1; text-decoration: underline; }
header .kruimels span { opacity: .95; }
/* Koppelingen (AI/Spotify): instellingen, beheer en profiel. */
.koppelblok { border-top: 1px solid #F1F3F5; padding-top: 10px; margin-top: 10px; }
.koppelblok:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.koppelblok h3 { font-size: 15px; margin: 0 0 4px; }
.koppelrij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.koppelrij > b { min-width: 80px; }
.koppelrij input, .koppelrij select { flex: 1 1 160px; }
.koppelblok .uitleg { display: block; color: #6B7280; margin: 4px 0 0 88px; }
/* Hoofdmenu: actief onderdeel, accountmenu en tabbladen van een groepsavond. */
header .pil.aan { background: rgba(255,255,255,.2); }
header .account > summary.pil { background: rgba(255,255,255,.16); }
header select.pil.aan, html.donker header select.pil.aan { background-color: rgba(255,255,255,.2) !important; }
header .topbalk { flex-wrap: nowrap; }
header .topbalk .links { flex-wrap: nowrap; min-width: 0; }
header select.pil { max-width: 220px; text-overflow: ellipsis; }
header .menu-keuze { position: relative; display: flex; align-items: center; margin: 0; }
header .menu-keuze > summary.pil { display: inline-flex; margin: 0; }
header .menu-keuze > summary { list-style: none; user-select: none; }
header .menu-keuze > summary::-webkit-details-marker { display: none; }
header .menu-paneel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; background: #fff; color: #313131; border-radius: 14px;
                         box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 6px; display: flex; flex-direction: column; }
header .menu-paneel a, header .menu-paneel button { display: block; text-align: left; padding: 9px 12px; border-radius: 10px; color: #313131; text-decoration: none;
                         font: inherit; font-size: 14px; font-weight: 700; background: none; border: 0; cursor: pointer; width: 100%; min-height: 0; }
header .menu-paneel a:hover, header .menu-paneel button:hover { background: #EEF9FE; }
header .account-paneel form { display: block; border-top: 1px solid #F1F3F5; margin-top: 4px; padding-top: 4px; }
header .account-thema { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; font-size: 13px; color: #6B7280; }
header .account-thema .thema-keuze { background: #EEF9FE; }
html.donker header .menu-paneel { background: #17232B; color: #E3EAF0; }
html.donker header .menu-paneel :is(a, button) { color: #E3EAF0; }
html.donker header .menu-paneel :is(a, button):hover, html.donker header .account-thema .thema-keuze { background: color-mix(in srgb, var(--primair) 25%, #17232B); }
html.donker header .account-paneel form { border-color: #26343D; }
/* Tabbladen: onderstreept in de header (de tegels schuiven er net als op de startpagina een stukje overheen). */
header .kruimels .terug-knop { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.18); opacity: 1; }
header .kruimels li.terug + li::before { content: ""; margin: 0 4px; }
@media (max-width: 860px) { header .pil-tekst { display: none; } header select.pil { max-width: 160px; } }
/* Avatar: foto of initialen. */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; object-fit: cover; color: #fff;
          font-family: Poppins, Arial, sans-serif; font-weight: 700; line-height: 1; vertical-align: middle; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
header .account > summary.pil { padding-left: 6px; }
.foto-blok { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.foto-blok .avatar { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.foto-kies { display: inline-flex; cursor: pointer; margin-right: 8px; }
header .kop-keuze .menu-paneel { left: 0; right: auto; min-width: 240px; max-width: 340px; }
header .kop-keuze .menu-paneel small { display: block; font-weight: 400; color: #6B7280; font-size: 12px; }
header .menu-paneel a.aan { background: color-mix(in srgb, var(--primair-licht) 10%, white); color: var(--primair); }
html.donker header .menu-paneel a.aan { background: color-mix(in srgb, var(--primair) 40%, #17232B); color: color-mix(in srgb, var(--primair-licht) 40%, white); }
html.donker header .kop-keuze .menu-paneel small { color: #9AA5B1; }
header .menu-paneel a, header .menu-paneel button { box-sizing: border-box; }
/* Meldingen (🔔) in de kop. */
header .meldingen-keuze > summary { position: relative; }
/* Rood bolletje met het aantal ongelezen meldingen. */
header .teller { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: #E03131;
                 color: #fff; font-size: 11px; line-height: 20px; text-align: center; font-weight: 700; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
header .teller[hidden] { display: none; }
header .meldingen-paneel { width: 340px; max-height: 420px; overflow-y: auto; }
header .meldingen-paneel { max-width: calc(100vw - 16px); box-sizing: border-box; }
header .meldingen-kop { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; }
header .meldingen-kop button { width: auto !important; padding: 4px 8px !important; font-size: 12px !important; color: var(--primair) !important; }
.melding-regel { display: flex; align-items: flex-start; gap: 2px; border-radius: 10px; }
.melding-regel .melding-link { flex: 1; min-width: 0; display: flex !important; flex-direction: column; gap: 2px; font-weight: 400 !important; padding: 9px 12px; color: inherit; text-decoration: none; border-radius: 10px; }
.melding-regel small { color: #6B7280; font-size: 11px; }
.melding-regel.nieuw { background: #FFF0F8; }
.melding-regel.nieuw .melding-link { font-weight: 700 !important; }
html.donker .melding-regel.nieuw { background: #2A1C26 !important; }
.melding-regel .melding-weg, header .menu-paneel .melding-weg { flex: none; width: 32px !important; height: 32px; margin: 4px; padding: 0 !important; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: #9AA5B1 !important; font-size: 14px; cursor: pointer; }
.melding-regel .melding-weg:hover { background: rgba(224,49,49,.12) !important; color: #E03131 !important; }
header .meldingen-alle { text-align: center !important; color: var(--primair) !important; font-size: 13px !important; border-top: 1px solid rgba(127,127,127,.18); border-radius: 0 0 10px 10px !important; }
.meldingen-vol .melding-regel { border-bottom: 1px solid rgba(127,127,127,.15); }
.meldingen-vol .melding-link:hover { background: rgba(0,137,192,.06); }
.meldingen-acties { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
@media (max-width: 600px) { header .meldingen-paneel { width: 290px; right: -60px; } }
/* Mededelingen helemaal bovenaan. */
/* Mededelingen: glazen balk bovenaan die meescrolt, tekst in het midden, niet weg te klikken. */
/* De balk heeft altijd eigen randen (haarlijn boven en onder, schaduw, glans), zodat hij ook opvalt als de pagina of het thema
   dezelfde kleur heeft als de mededeling (de lichtblauwe achtergrond ligt dicht bij de info-kleur). */
.mededelingen { position: sticky; top: 0; z-index: 50; box-shadow: 0 6px 22px rgba(11, 74, 102, .22), 0 1px 0 rgba(11, 74, 102, .35); }
.mededeling { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 11px 16px; font-size: 14px; font-weight: 800; text-align: center;
              color: #062F43; background: linear-gradient(180deg, rgba(160, 224, 250, .9) 0%, rgba(98, 196, 240, .88) 100%);
              -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
              box-shadow: none; }
/* Glas: een zachte glans over de bovenste helft en een lichte bovenrand. */
.mededeling::before { content: ""; position: absolute; inset: 0 0 50% 0; pointer-events: none;
                      background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.mededeling > * { position: relative; }
.mededeling-icoon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
                    background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(11, 74, 102, .25), 0 2px 6px rgba(11, 74, 102, .2); font-size: 14px; }
/* Meerdere mededelingen onder elkaar: één blok met één schaduw, alleen een dun lijntje ertussen. */
.mededeling:first-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.mededeling + .mededeling { border-top: 1px solid rgba(255, 255, 255, .3); }
/* Andere stijlen met .info (zoals op de leidingpagina) mogen geen ruimte tussen de balken zetten. */
.mededelingen .mededeling { margin: 0; flex-wrap: nowrap; gap: 10px; }
html.donker .mededeling + .mededeling { border-top-color: rgba(255, 255, 255, .08); }
html.donker .mededeling:first-child { box-shadow: none; }
.mededeling.letop { color: #5A3600; background: linear-gradient(180deg, rgba(255, 236, 153, .88) 0%, rgba(255, 216, 102, .84) 100%); }
.mededeling.belangrijk { color: #fff; background: linear-gradient(180deg, rgba(224, 49, 49, .86) 0%, rgba(176, 30, 30, .86) 100%); }
.mededeling.belangrijk::before { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); }
.mededeling-tekst { white-space: pre-line; max-width: 1100px; }
html.donker .mededeling { color: #E3F6FE !important; background: linear-gradient(180deg, rgba(20, 78, 106, .86) 0%, rgba(12, 52, 72, .86) 100%) !important; }
html.donker .mededeling::before { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }
html.donker .mededelingen { box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 1px 0 rgba(158, 221, 247, .35); }
html.donker .mededeling-icoon { background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 1px rgba(158, 221, 247, .35); }
html.donker .mededeling.letop { color: #FFE066 !important; background: linear-gradient(180deg, rgba(92, 72, 18, .88) 0%, rgba(61, 49, 16, .88) 100%) !important; }
html.donker .mededeling.belangrijk { color: #fff !important; background: linear-gradient(180deg, rgba(160, 38, 38, .9) 0%, rgba(122, 31, 31, .9) 100%) !important; }
.mededeling-rij { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #F1F3F5; }
.mededeling-rij small { display: block; color: #6B7280; }
.mededeling-acties { display: flex; gap: 6px; flex: none; }
.mededeling-form { display: grid; gap: 8px; margin-top: 12px; }
.mededeling-opties { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; }
.mededeling-form textarea { min-height: 60px; }
.mededeling-form .knop { justify-self: start; }
html.donker .mededeling-rij { border-color: #26343D; }
/* Pulserende gloed zolang er ongelezen meldingen zijn (niet bij "minder beweging"). */
@keyframes meldingGloed { 0%, 100% { box-shadow: 0 0 0 0 rgba(236,0,140,.55); } 50% { box-shadow: 0 0 0 7px rgba(236,0,140,0); } }
header .heeft-meldingen { animation: meldingGloed 2s ease-in-out infinite; background: rgba(255,255,255,.22); }
header .heeft-meldingen .teller { animation: meldingGloed 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { header .heeft-meldingen, header .heeft-meldingen .teller { animation: none; } }
.melding-soorten { display: grid; gap: 0; margin: 8px 0 12px; }
/* Aan/uit-schakelaar: <label class="schakelaar"><input type="checkbox"><span class="knopje"></span> Tekst</label> */
label.schakelaar { position: relative; display: flex; gap: 12px; align-items: center; cursor: pointer; }
/* Rij-variant: tekst en uitleg links, schakelaar helemaal rechts. */
label.schakelaar[hidden], .activiteit-form > label[hidden] { display: none !important; }
label.schakelaar.rij { justify-content: space-between; padding: 8px 0; }
label.schakelaar.rij + label.schakelaar.rij { border-top: 1px solid #F1F3F5; }
label.schakelaar .sch-tekst { flex: 1 1 auto; min-width: 0; }
label.schakelaar:not(.rij) { display: inline-flex; }
label.schakelaar:not(.rij) .sch-tekst { flex: 0 1 auto; }
label.schakelaar .sch-tekst b { display: block; font-size: 14px; }
label.schakelaar .sch-tekst small { display: block; color: #6B7280; font-size: 12px; font-weight: 400; }
label.schakelaar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.schakelaar .knopje { flex: none; position: relative; width: 44px; height: 24px; border-radius: 12px; background: #CBD5E1; transition: background .2s; }
label.schakelaar .knopje::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
label.schakelaar input:checked + .knopje { background: var(--primair, var(--primair)); }
/* Donker thema: de schakelaar in de uit-stand niet als fel licht vlak. */
html.donker label.schakelaar input:not(:checked) + .knopje { background: #3A4A55; }
label.schakelaar input:checked + .knopje::after { transform: translateX(20px); }
label.schakelaar input:focus-visible + .knopje { outline: 2px solid var(--primair, var(--primair)); outline-offset: 2px; }
label.schakelaar input:disabled + .knopje { opacity: .5; }
@media (prefers-reduced-motion: reduce) { label.schakelaar .knopje, label.schakelaar .knopje::after { transition: none; } }
.mededeling-openbaar { max-width: 560px; }
label.schakelaar.mededeling-openbaar input:checked + .knopje { background: var(--accent); }
/* Afdrukken en PDF: logo bovenaan, rustige marges. */
.print-kop { display: none; }
@media print {
  @page { margin: 14mm 14mm 16mm; }
  .print-kop { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 3px solid var(--primair); }
  .print-kop img { height: 46px; width: auto; }
  .print-kop b { display: block; font-family: Poppins, Arial, sans-serif; font-size: 14pt; color: var(--primair); }
  .print-kop span { display: block; font-size: 10pt; color: #6B7280; }
  .mededelingen { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Nieuw agenda-item: velden in een raster, labels boven de velden. */
.nieuwe-activiteit { margin: 4px 0 16px; padding: 12px 14px; border-radius: 14px; background: #F3FBFE; border: 1px solid color-mix(in srgb, var(--primair-licht) 20%, white); }
.nieuwe-activiteit > summary { cursor: pointer; font-weight: 700; color: var(--primair); }
.activiteit-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; margin-top: 12px; }
.activiteit-form > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.activiteit-form > label.schakelaar { flex-direction: row; font-weight: 400; }
.activiteit-form .breed { grid-column: 1 / -1; }
.activiteit-form textarea { min-height: 70px; }
.activiteit-knoppen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* Links en webadressen in lopende tekst nooit over twee regels: ze schuiven als geheel naar de volgende regel
   (en worden afgekapt met … als ze breder zijn dan het scherm). Niet in documenten/draaiboeken. */
main :is(p, small, li, label, .tekst) a:not(.knop):not(.klein):not(.form):not(.personen-chip) { white-space: nowrap; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
main :is(.document, .editor, [contenteditable], .mededeling-tekst) a { white-space: normal !important; display: inline !important; }
/* Rijen knoppen/links naast elkaar: altijd ruimte ertussen, netjes uitgelijnd. */
.knoppen, .activiteit-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knoppen { margin-top: 12px; }
.activiteit-links { margin: 10px 0; }
html.donker .nieuwe-activiteit { background: #12232D; border-color: #26343D; }
/* Weergave op het profiel: drie knoppen, de gekozen is gevuld. */
.weergave-keuze { display: flex; flex-wrap: wrap; gap: 8px; }
label.schakelaar.rij + .weergave-keuze { margin-top: 8px; }
.weergave-keuze button { font: inherit; font-weight: 700; padding: 10px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--primair-licht) 20%, white); background: #F3FBFE; color: var(--primair); cursor: pointer; }
.weergave-keuze button[aria-pressed="true"] { background: var(--primair); border-color: var(--primair); color: #fff; }
html.donker .weergave-keuze button { background: #12232D; border-color: #26343D; color: color-mix(in srgb, var(--primair-licht) 20%, white); }
html.donker .weergave-keuze button[aria-pressed="true"] { background: var(--primair) !important; color: #fff !important; }
/* Uitleg-knop rechts in de kop, met een paneel eronder. */
header .kop { position: relative; }
header .uitleg-paneel { right: 0; left: auto; width: min(440px, calc(100vw - 48px)); max-height: 70vh; overflow-y: auto; padding: 12px 16px; color: #313131; font-size: 14px; line-height: 1.5; font-weight: 400; }
header .uitleg-paneel p { margin: 0 0 8px; }
header .uitleg-paneel p:last-child { margin-bottom: 0; }
.uitleg-knoppen { display: flex; justify-content: flex-end; gap: 6px; margin: -4px -6px 6px 0; position: sticky; top: -12px; padding-top: 4px; z-index: 1; }
header .uitleg-paneel .uitleg-knoppen .klein { display: inline-flex; width: auto; flex: 0 0 auto; padding: 3px 10px; min-height: 0; border: 1px solid #DEE2E6; border-radius: 999px; background: rgba(255, 255, 255, .95); font-size: 12px; }
html.donker header .uitleg-paneel .uitleg-knoppen .klein { background: rgba(23, 35, 43, .95); border-color: #2A3B46; color: #E3EAF0; }
/* Groot: een venster midden op het scherm, met de tekst in kolommen als er ruimte is. */
header .pagina-uitleg.groot .uitleg-paneel { position: fixed; top: 4vh; left: max(16px, calc(50vw - 480px)); right: max(16px, calc(50vw - 480px)); width: auto; max-height: 92vh; transform: none !important;
  padding: 18px 24px 22px; font-size: 16px; line-height: 1.6; z-index: 1001; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); display: block; background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.donker header .pagina-uitleg.groot .uitleg-paneel { background: #17232B !important; }
header .pagina-uitleg.groot .uitleg-paneel p { margin: 0 0 12px; }
@media (min-width: 900px) { header .pagina-uitleg.groot .uitleg-paneel { column-width: 400px; column-gap: 32px; } header .pagina-uitleg.groot .uitleg-paneel p { break-inside: avoid; } header .pagina-uitleg.groot .uitleg-knoppen { column-span: all; } }
html.uitleg-groot body::after { content: ""; position: fixed; inset: 0; background: rgba(10, 30, 45, .45); z-index: 1000; pointer-events: none; }
html.donker header .uitleg-paneel { color: #E3EAF0; }
@media print { header .pagina-uitleg { display: none; } }
/* Home: leiding per groepsavond, beheerders dikgedrukt. */
.form small.leiding-regel { margin-top: 3px; line-height: 1.4; }
/* 🗓️ Tegel van een groepsavond op de beginpagina: de groepsnaam is een link over de hele tegel; de namen (met avatar) liggen erboven
   en zijn met Profielen aan zelf links. Zo kan een link in de tegel, zonder link-in-link. */
.groep-tegel { position: relative; }
.groep-tegel:hover, .groep-tegel:focus-within { filter: brightness(.98); }
.groep-tekst { display: block; min-width: 0; }
.form a.groep-link, html.donker .form a.groep-link { color: inherit !important; text-decoration: none; }
.groep-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.groep-link:focus-visible { outline: none; }
.groep-link:focus-visible::after { box-shadow: 0 0 0 3px var(--primair); }
.groep-tegel small.groep-volgende { margin-top: 4px; color: #0B4A66; }
.groep-tegel small.groep-volgende b { display: inline; font-size: inherit; }
html.donker .groep-tegel small.groep-volgende { color: color-mix(in srgb, var(--primair-licht) 20%, white) !important; }
/* Vast raster: labels even breed, personen in kolommen van gelijke breedte, zodat de avatars van alle groepsavonden recht onder elkaar staan. */
.groep-tegel .groep-tekst { flex: 1; min-width: 0; }
.groep-mensen { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; column-gap: 8px; margin-top: 6px; }
.groep-tegel small.groep-label { display: block; font-size: 12px; font-weight: 700; color: #6B7280; line-height: 24px; }
.groep-namen { display: grid; grid-template-columns: repeat(auto-fill, 8.5rem); gap: 4px 10px; }
.groep-persoon { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; min-width: 0; line-height: 24px; font-size: 13px; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .groep-mensen { grid-template-columns: minmax(0, 1fr); } .groep-namen { grid-template-columns: repeat(auto-fill, 7.5rem); } }
a.groep-persoon:hover, a.groep-persoon:focus-visible { text-decoration: underline; }
.groep-persoon .avatar { flex: none; }
/* De witte rand om de avatar (2px) valt binnen de tegel; anders knipt overflow hem aan de zijkant af. */
.groep-persoon { padding: 2px 0 2px 2px; }
/* 👥 Leiding als detail in de groepstegel: boven de link over de hele tegel, zodat uitklappen werkt. */
.groep-detail { position: relative; z-index: 1; margin-top: 6px; }
.groep-detail > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: #6B7280; list-style: none; padding: 2px 10px 2px 2px; border-radius: 999px; }
.groep-detail > summary::-webkit-details-marker { display: none; }
.groep-detail > summary::after { content: "▸"; transition: transform .15s; } .groep-detail[open] > summary::after { transform: rotate(90deg); }
.groep-detail > summary:hover { background: rgba(0, 137, 192, .08); }
.groep-detail-avatars { display: inline-flex; padding-left: 4px; } .groep-detail-avatars .avatar { margin-left: -4px; }
.groep-detail[open] .groep-detail-avatars { display: none; }
html.donker .groep-detail > summary { color: #9CA3AF; }
/* 🎉 Vandaag jarig: een feestje rechtsboven op de avatar (partials/avatar.ejs en avatar() in basis.js). */
.avatar-jarig { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
/* Het feestje ín de avatar (rechtsonder, binnen de gouden ring), zodat geen chip het afknipt. */
.jarig-feest { position: absolute; right: -1px; bottom: -1px; font-size: max(9px, calc(var(--maat, 24px) * .45)); line-height: 1; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.avatar-jarig .avatar { box-shadow: 0 0 0 2px #FAB005 !important; }
/* 👥 personenLijst (basis.js): dezelfde stijl als de groepstegel, overal waar mensen in beeld staan.
   Compact = één regel met een stapel avatars; uitgeklapt = per groep een label en een vast raster van avatar + naam. */
.personen { margin: 4px 0; }
.personen > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; padding: 2px 10px 2px 4px; border-radius: 999px; }
.personen > summary::-webkit-details-marker { display: none; }
.personen > summary::after { content: "▸"; color: #6B7280; transition: transform .15s; } .personen[open] > summary::after { transform: rotate(90deg); }
.personen > summary:hover { background: rgba(0, 137, 192, .08); }
/* Geen witte focusrand na een klik; met het toetsenbord een zachte achtergrond (zoals hover). */
.personen > summary:focus { outline: none; }
.personen > summary:focus-visible { background: rgba(0, 137, 192, .14); }
/* Stapel: elke avatar met een ring in de kleur van zijn groep; zonder groepskleur een ring in de achtergrondkleur (de avatars schuiven over elkaar). */
.personen-stapel { display: inline-flex; padding-left: 4px; }
.personen-stapel-item { display: inline-flex; margin-left: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--kaart-achtergrond, #fff); }
html.donker .personen-stapel-item { box-shadow: 0 0 0 2px #17232B; }
.personen-stapel-item .avatar { box-shadow: none; }
.personen-stapel-item.ring-hoofd { box-shadow: 0 0 0 2px var(--accent); }
.personen-stapel-item.ring-nee { box-shadow: 0 0 0 2px #E03131; }
.personen-stapel-item.ring-deels { box-shadow: 0 0 0 2px #F08C00; }
.personen-stapel-item.ring-nee .avatar { opacity: .75; }
.personen-meer { margin-left: 6px; font-size: 12px; color: #6B7280; align-self: center; }
.personen[open] .personen-stapel { display: none; }
.personen-groepen { display: grid; grid-template-columns: max-content minmax(0, 1fr); row-gap: 3px; margin-top: 3px; }
.personen-groep { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; column-gap: 10px; padding: 3px 8px; border-radius: 8px; border-left: 3px solid #CED4DA; background: rgba(0, 0, 0, .02); }
.personen-groep.hoofd { border-left-color: var(--accent); }
/* 🫅 Verantwoordelijke in de groepstegel op de beginpagina: met een kleine avatar, zoals overal. */
.groep-verantw { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.groep-verantw .avatar { box-shadow: none; }
.personen-groep.ja { border-left-color: #2B8A3E; } .personen-groep.deels { border-left-color: #F08C00; } .personen-groep.nee { border-left-color: #E03131; } .personen-groep.open { border-left-color: #ADB5BD; }
html.donker .personen-groep { background: rgba(255, 255, 255, .03); }
.personen-label { font-size: 12px; font-weight: 700; color: #6B7280; line-height: 24px; white-space: nowrap; }
/* De namen lopen achter elkaar door en breken af waar de regel vol is (geen vaste kolommen, geen lege ruimte ernaast). */
.personen-raster { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.personen-chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 1px 0 1px 2px; line-height: 24px; font-size: 13px; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; }
a.personen-chip:hover .personen-naam, a.personen-chip:focus-visible .personen-naam { text-decoration: underline; }
.personen-chip .avatar { flex: none; }
.personen-naam { overflow: hidden; text-overflow: ellipsis; }
.personen-extra { color: #6B7280; font-size: 11px; flex: none; }
.personen.altijd .personen-groepen { margin-top: 0; }
/* Rij per persoon (sleutels, leden, VOG …): de avatar voor de naam, de rest van de rij blijft zoals hij was. */
.persoon-rij-naam { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.persoon-rij-naam > .avatar { flex: none; box-shadow: none; }
.chip.persoon-chip { display: inline-flex; align-items: center; gap: 6px; padding-left: 3px; }
.chip.persoon-chip .avatar { box-shadow: none; flex: none; }
@media (max-width: 480px) { .personen-groepen { grid-template-columns: minmax(0, 1fr); } }
.form small.leiding-regel b { display: inline; font-size: inherit; color: #313131; }
html.donker .form small.leiding-regel b { color: #E3EAF0 !important; }
/* Kaarten indelen. */
body.indelen main .kaart[draggable="true"] { outline: 2px dashed color-mix(in srgb, var(--primair-licht) 40%, white); outline-offset: 3px; cursor: grab; }
body.indelen .kaart.sleept { opacity: .45; }
.indeel-knoppen { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin: -6px 0 8px; }
.indeel-knoppen .greep { margin-right: auto; color: #9AA5B1; font-size: 18px; cursor: grab; }
.indeel-balk { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
               padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
               box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 14px; max-width: calc(100vw - 24px); box-sizing: border-box; }
.indeel-balk > span { flex: 1 1 240px; }
html.donker .indeel-balk { background: rgba(23,35,43,.9); color: #E3EAF0; }
@media print { .indeel-balk, .indeel-knoppen { display: none !important; } }
/* Eigen keuzepaneel voor keuzelijsten (computer), in de stijl van het groepsavondmenu. */
.mooi-paneel { position: fixed; z-index: 80; max-height: 300px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px;
               background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); box-sizing: border-box; }
.mooi-optie { font: inherit; font-size: 14px; text-align: left; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: #313131; cursor: pointer; white-space: nowrap; }
.mooi-optie:hover, .mooi-optie:focus { background: #EEF9FE; outline: none; }
.mooi-optie.aan { background: color-mix(in srgb, var(--primair-licht) 10%, white); color: var(--primair); font-weight: 700; }
.mooi-optie:disabled { opacity: .45; cursor: default; }
select.mooi-open { border-color: var(--primair) !important; box-shadow: 0 0 0 3px rgba(0,137,192,.15); }
html.donker .mooi-paneel { background: #17232B; }
/* Suggesties bij locatievelden. */
.adres-paneel { position: fixed; z-index: 90; max-height: 280px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); box-sizing: border-box; max-width: calc(100vw - 16px); }
.adres-optie { font: inherit; font-size: 14px; text-align: left; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: #313131; cursor: pointer; }
.adres-optie:hover, .adres-optie.aan { background: #EEF9FE; color: var(--primair); }
.adres-bezig { font-size: 13px; color: #6B7280; padding: 6px 12px; }
html.donker .adres-paneel { background: #17232B; }
html.donker .adres-optie { color: #E3EAF0; }
html.donker .adres-optie:hover, html.donker .adres-optie.aan { background: color-mix(in srgb, var(--primair) 25%, #17232B); color: color-mix(in srgb, var(--primair-licht) 40%, white); }
html.donker .mooi-optie { color: #E3EAF0; }
html.donker .mooi-optie:hover, html.donker .mooi-optie:focus { background: color-mix(in srgb, var(--primair) 25%, #17232B); }
html.donker .mooi-optie.aan { background: color-mix(in srgb, var(--primair) 40%, #17232B); color: color-mix(in srgb, var(--primair-licht) 40%, white); }
/* Datumvelden: zelfde afronding als de andere velden; de kalender zelf tekent de browser. */
input[type=date], input[type=time] { border-radius: 10px; }
/* Bestuursopties bij een nieuw agenda-item. */
.bestuur-opties { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #FFF9DB; border: 1px solid #FFE8A1; }
.bestuur-opties[hidden], .optie-datums[hidden] { display: none !important; }
.optie-datums { display: grid; gap: 6px; padding: 6px 0 4px; font-size: 13px; }
.optie-rij { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.optie-rij label { display: flex; gap: 6px; align-items: center; font-weight: 700; }
.optie-datums > button { justify-self: start; }
.tag.bestuur { background: #FFF3BF; color: #7A4A00; } .tag.optie { background: #fff; border: 1px dashed #F08C00; color: #B35C00; }
html.donker .bestuur-opties { background: #3D3110; border-color: #5C4A12; }
/* Glaseffect (html.glas, standaard aan): zachte kleurvlekken achter doorschijnende kaarten en panelen. */
html.glas body { background-color: #EAF6FC;
  background-image: radial-gradient(42vw 42vw at 8% 18%, rgba(0,174,239,.30), transparent 62%),
                    radial-gradient(36vw 36vw at 92% 28%, rgba(236,0,140,.16), transparent 62%),
                    radial-gradient(48vw 48vw at 55% 105%, rgba(0,137,192,.24), transparent 62%);
  background-attachment: fixed; }
html.glas .kaart { background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 8px 30px rgba(0,60,90,.10), inset 0 1px 0 rgba(255,255,255,.85); }
html.glas :is(header .menu-paneel, .mooi-paneel, .functie-paneel, .taak-paneel, .uitleg-paneel) { background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.7); }
html.glas .balk { background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.glas.donker body { background-color: #0E171D !important;
  background-image: radial-gradient(42vw 42vw at 8% 18%, rgba(0,137,192,.22), transparent 62%),
                    radial-gradient(36vw 36vw at 92% 28%, rgba(236,0,140,.12), transparent 62%),
                    radial-gradient(48vw 48vw at 55% 105%, rgba(0,100,150,.20), transparent 62%) !important; }
html.glas.donker :is(.kaart, .balk) { background-color: rgba(23,35,43,.62) !important; border-color: rgba(255,255,255,.08); box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
html.glas.donker :is(header .menu-paneel, .mooi-paneel, .functie-paneel, .taak-paneel) { background: rgba(23,35,43,.85) !important; border-color: rgba(255,255,255,.08); }
@media print { html.glas body { background: #fff !important; } html.glas .kaart { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; } }
/* Home: geplande opties, één regel per item met alle datums. */
.optie-datums-regel a { color: var(--primair); font-weight: 700; text-decoration: none; }
.optie-datums-regel a:hover { text-decoration: underline; }
/* Persoonlijk brede kaart: in een raster met kolommen over de hele breedte. */
.kaart.kaart-breed { grid-column: 1 / -1; }
/* Tegel-icoon (Kaarten indelen). */
.tegel-icoon { display: inline-block; vertical-align: -2px; fill: currentColor; opacity: .85; }
.indeel-balk .tegel-icoon { fill: var(--primair); margin-right: 4px; }
/* Uitklappers met een ＋ in de tekst: geen extra pijltje ervoor. */
details.nieuwe-activiteit > summary, details#toevoegen > summary { list-style: none; }
details.nieuwe-activiteit > summary::-webkit-details-marker, details#toevoegen > summary::-webkit-details-marker { display: none; }
/* Uitnodiging: ontvangers en herinneringen. */
.uitnodig-extra { margin: -4px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(0,137,192,.07); }
.uitnodig-bereik { margin: 0 0 8px; font-size: 14px; }
.uitnodig-bereik small { display: block; color: #B35C00; margin-top: 2px; }
.herinner-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.herinner-rij select { width: auto; min-width: 90px; }
.herinner-rij input[type=number] { width: 64px; }
.herinner-rij label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.uitnodig-extra[hidden] { display: none; }
.uitnodig-tekst { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.uitnodig-tekst small { font-weight: 400; color: #6B7280; }
.uitnodig-tekst textarea { font-weight: 400; }
.opgave-acties .uitnodig-tekst, .opgave-acties .herinner-rij { flex-basis: 100%; }
.opgave-acties .uitnodig-tekst textarea { width: 100%; box-sizing: border-box; }
/* Metselwerk met vaste kolommen: elke kaart vult de eerste vrije plek in zijn eigen kolom. */
.metselwerk.vast { grid-auto-flow: row dense; }
/* Documenten koppelen. */
.koppel-rij { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(127,127,127,.15); }
.koppel-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.koppel-info small { color: #6B7280; }
.koppel-acties { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.koppel-acties select { max-width: 340px; }
.home-email { margin: 0 0 16px; }
/* Vragen en bevestigingen in de stijl van de app. */
.ck-dialoog { border: 0; border-radius: 18px; padding: 22px 22px 18px; width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
  background: #fff; color: #313131; box-shadow: 0 20px 60px rgba(0, 40, 70, .35); }
.ck-dialoog::backdrop { background: rgba(10, 30, 45, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ck-dialoog-tekst { margin: 0 0 14px; white-space: pre-line; line-height: 1.5; font-size: 15px; }
.ck-dialoog input { width: 100%; box-sizing: border-box; margin: 0 0 14px; }
.ck-dialoog-knoppen { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ck-dialoog .knop.gevaar { background: #E03131; border-color: #E03131; color: #fff; }
html.donker .ck-dialoog { background: #17232B; color: #E3EAF0; }
html.glas .ck-dialoog { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
html.glas.donker .ck-dialoog { background: rgba(23, 35, 43, .9); }
/* Tabelkoppen in donker ook in de accentkleur (magenta), iets lichter voor genoeg contrast. */
html.donker main :is(table.raster, table.log, .document table, table) th { color: #F2409F; color: color-mix(in srgb, var(--accent, var(--accent)) 78%, #ffffff); }
html.donker main.bingo-main th { color: #fff; }
/* Mededelingen: opmaakbalk, voorbeeld en eerdere mededelingen. */
.mededeling-balk { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mededeling-balk .klein { min-width: 36px; }
/* 🎨 Kleur en 😀 Emoji zijn uitklapmenu's: in de opmaakbalk zien ze eruit als de andere knoppen (B, I, U, S), ook in de donkere modus. */
.mededeling-balk .emoji-menu > summary.klein { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid #DEE2E6; background: #fff; color: var(--primair); font-size: 13px; line-height: normal; }
html.donker .mededeling-balk .emoji-menu > summary.klein { background: transparent !important; border-color: #33444F !important; color: var(--primair) !important; }
.emoji-menu { position: relative; }
.emoji-menu > summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--primair-licht) 10%, white); color: var(--primair); font-weight: 700; font-size: 13px; }
.emoji-menu > summary::-webkit-details-marker { display: none; }
.emoji-paneel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; grid-template-columns: repeat(6, 38px); gap: 4px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.emoji-knop { width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; font-size: 20px; cursor: pointer; padding: 0; }
.emoji-knop:hover { background: #EEF9FE; }
html.donker .emoji-paneel { background: #17232B; }
html.donker .emoji-menu > summary { background: color-mix(in srgb, var(--primair) 25%, #17232B); color: color-mix(in srgb, var(--primair-licht) 40%, white); }
/* Bij meer groepsavonden: voor welke groep (of de hele afdeling) een mededeling is. */
.mededeling-groep { display: inline-block; font-size: 12px; font-weight: 800; padding: 1px 8px; margin-right: 4px; border-radius: 999px; background: rgba(0,0,0,.08); vertical-align: 1px; white-space: nowrap; }
html.donker .mededeling-groep, .mededeling.belangrijk .mededeling-groep { background: rgba(255,255,255,.18); }
/* Uitgebreide opmaak in mededelingen (zie mededelingHtml). */
.mm-kop { display: block; font-size: 1.25em; font-weight: 800; line-height: 1.25; }
.mm-punt { display: block; }
.mm-punt::before { content: "• "; }
.mededeling a, .mededeling-voorbeeld a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mededeling mark, .mededeling-voorbeeld mark, .mededeling-rij mark { background: #FFE066; color: #3D3110; padding: 0 3px; border-radius: 4px; }
.mm-magenta { color: var(--accent); } .mm-blauw { color: var(--primair); } .mm-geel { color: #B88600; } .mm-rood { color: #C92A2A; } .mm-groen { color: #2B8A3E; }
.mededeling.belangrijk :is(.mm-magenta, .mm-blauw, .mm-geel, .mm-rood, .mm-groen) { color: #fff; background: rgba(0,0,0,.25); padding: 0 4px; border-radius: 4px; }
html.donker .mm-magenta { color: #FF5CB8; } html.donker .mm-blauw { color: #6FD0F5; } html.donker .mm-geel { color: #FFE066; } html.donker .mm-rood { color: #FF8787; } html.donker .mm-groen { color: #8CE99A; }
html.donker .mededeling .mm-magenta { color: #FF5CB8 !important; }
.kleur-paneel { grid-template-columns: 1fr; min-width: 120px; }
.kleur-paneel .klein { font-weight: 800; text-align: left; }
.mededeling-hulp summary { cursor: pointer; font-size: 13px; color: #6B7280; }
.mededeling-hulp small { display: block; color: #6B7280; line-height: 1.6; margin-top: 4px; }
.mededeling-voorbeeld small { display: block; color: #6B7280; margin-bottom: 4px; }
.mededeling-voorbeeld .mededeling { position: static; border-radius: 12px; box-shadow: none; }
.mededeling-archief { margin-top: 10px; font-size: 14px; }
.mededeling-archief > summary { cursor: pointer; color: var(--primair); font-weight: 700; padding: 6px 0; }
.mededeling-tekst { font-weight: 500; }
.mededeling-tekst b { font-weight: 800; }

/* Afdeling beheren: kampbeheerders per afdelingskamp. */
.kampbeheer-rij { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid #F1F3F5; }
.kampbeheer-rij small { color: #6B7280; }
.kampbeheer-rij .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kampbeheer-rij .chip { display: inline-flex; gap: 6px; align-items: center; background: color-mix(in srgb, var(--primair-licht) 10%, white); border-radius: 999px; padding: 4px 10px; font-size: 13px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primair-licht) 40%, white); }
.kampbeheer-rij .chip-weg { border: 0; background: none; cursor: pointer; color: #C92A2A; font-size: 13px; padding: 0; }
select.kampbeheer-kies { width: auto; min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; border-radius: 999px; }
html.donker .kampbeheer-rij { border-color: #26343D; }
html.donker .kampbeheer-rij .chip { background: color-mix(in srgb, var(--primair) 25%, #17232B); box-shadow: inset 0 0 0 1px #2F5A70; }

/* Afdeling beheren → 💶 Betalen bij opgaven */
.betaal-instelling { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #F8F9FA; margin-top: 6px; }
.betaal-instelling[hidden] { display: none !important; }
.betaal-keuze { display: grid; gap: 4px; }
.betaal-keuze select { max-width: 420px; }
.betaal-velden { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.betaal-velden[hidden] { display: none !important; }
.betaal-velden label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; flex: 1 1 220px; }
.betaal-status { font-size: 13px; color: #2B8A3E; font-weight: 700; padding-bottom: 10px; }
.betaal-uitleg summary { cursor: pointer; font-weight: 700; color: var(--primair); }
.betaal-uitleg-tekst { font-size: 14px; line-height: 1.55; }
.betaal-uitleg-tekst h4 { margin: 12px 0 4px; }
.betaal-uitleg-tekst ol { margin: 0; padding-left: 20px; }
html.donker .betaal-instelling { background: #121C22; }
html.donker .betaal-status { color: #8CE99A; }

/* Hamburgermenu op de telefoon: de knoppen links in de menubalk komen onder ☰ Menu, met hun naam erbij. */
header .hamburger { display: none; }
@media (max-width: 600px) {
  header .topbalk { position: relative; }
  header .hamburger { display: inline-flex; font-size: 15px; }
  header .hamburger span { font-size: 13px; }
  header .hamburger[aria-expanded="true"] { background: rgba(255,255,255,.2); }
  header .topbalk .links { display: none; }
  header .topbalk.open .links { display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
    width: min(300px, calc(100vw - 16px)); background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 6px; gap: 2px; box-sizing: border-box; }
  header .topbalk.open .links .pil { color: #313131; height: auto; min-height: 42px; padding: 8px 12px; justify-content: flex-start; width: 100%; font-size: 15px; }
  header .topbalk.open .links .pil-tekst { display: inline; }
  header .topbalk.open .links .pil:hover, header .topbalk.open .links .pil.aan { background: #EEF9FE; }
  header .topbalk.open .links .menu-keuze { display: block; }
  header .topbalk.open .links .menu-keuze > summary.pil { width: 100%; }
  header .topbalk.open .links .menu-paneel { position: static; transform: none !important; box-shadow: none; background: transparent; min-width: 0; max-width: none; padding: 0 0 4px 22px; }
  html.donker header .topbalk.open .links { background: #17232B; }
  html.donker header .topbalk.open .links .pil { color: #E3EAF0; }
  html.donker header .topbalk.open .links .pil:hover, html.donker header .topbalk.open .links .pil.aan { background: color-mix(in srgb, var(--primair) 25%, #17232B); }
}
/* 🗓️ Groepsavondmenu met meer groepen: elke groep een kolom (zoals het afdelingsmenu), met de naam (naar het overzicht)
   en daaronder de onderdelen. Zo wordt het menu breed in plaats van een pagina lang; op een smal scherm onder elkaar. */
header .kop-keuze .menu-paneel.groepen-paneel { display: grid; grid-template-columns: repeat(var(--kolommen, 2), minmax(170px, 210px)); gap: 4px 8px;
  max-width: min(1160px, calc(100vw - 24px)); }
header .groepen-paneel .groep-menu { min-width: 0; }
header .groepen-paneel .groep-menu.hier { background: rgba(0, 137, 192, .06); border-radius: 12px; }
header .groepen-paneel .groep-menu.hier .groep-menu-naam b { color: var(--primair); }
header .groepen-paneel .groep-menu-tabs a { font-size: 14px; padding: 7px 12px; }
html.donker header .groepen-paneel .groep-menu.hier { background: rgba(158, 221, 247, .06); }
html.donker header .groepen-paneel .groep-menu.hier .groep-menu-naam b { color: color-mix(in srgb, var(--primair-licht) 40%, white); }
@media (max-width: 860px) {
  header .kop-keuze .menu-paneel.groepen-paneel { grid-template-columns: 1fr; max-width: 340px; }
  header .groepen-paneel .groep-menu + .groep-menu { border-top: 1px solid rgba(0, 0, 0, .08); padding-top: 4px; }
  html.donker header .groepen-paneel .groep-menu + .groep-menu { border-top-color: rgba(255, 255, 255, .1); }
}
/* Kopje in een uitklapmenu (bijvoorbeeld "Andere groepsavond"). */
header .menu-paneel .menu-kop { display: block; padding: 10px 12px 4px; margin-top: 4px; border-top: 1px solid #F1F3F5; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; }
html.donker header .menu-paneel .menu-kop { border-color: #26343D; color: #9AA5B1; }
.melding-soorten h3.melding-groep { margin: 14px 0 2px; font-size: 14px; color: #6B7280; text-transform: none; }
.melding-soorten h3.melding-groep:first-child { margin-top: 0; }
html.donker .melding-soorten h3.melding-groep { color: #9AA9B4; }
/* Groep met één soort van dezelfde naam: alleen de scheiding, geen kop (die stond er dubbel). */
.melding-soorten h3.melding-groep.melding-groep-los { margin: 10px 0 0; font-size: 0; min-height: 0; }
.melding-soorten .herinnering-rij { display: grid; gap: 6px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 137, 192, .06); }
.melding-soorten .herinnering-rij small { color: #6B7280; font-weight: 400; }
.melding-soorten .herinnering-rij select { justify-self: start; }
html.donker .melding-soorten .herinnering-rij small { color: #9AA9B4; }
details.melding-instellen > summary { cursor: pointer; font-weight: 700; list-style: none; }
details.melding-instellen > summary::-webkit-details-marker { display: none; }
details.melding-instellen[open] > summary { margin-bottom: 10px; }
details.melding-instellen h2#meldingInstellingen { display: none; }
.melding-soorten .herinnering-rij { display: flex; flex-wrap: wrap; align-items: baseline; }
.melding-soorten .herinnering-rij small { flex-basis: 100%; }
.te-doen .formulieren { display: grid; gap: 6px; }
.te-doen a.form { display: flex; justify-content: space-between; align-items: center; border-left: 4px solid #F08C00; }
.te-doen .pijl { font-size: 20px; color: #9AA9B4; }
.menu-paneel .menu-groep { margin: 6px 10px 2px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B7280; }
html.donker .menu-paneel .menu-groep { border-top-color: rgba(255, 255, 255, .1); color: #9AA9B4; }
/* Kaart waar een link naartoe leidde (bijvoorbeeld /beheer#rechten): kort oplichten. */
.kaart.oplichten { box-shadow: 0 0 0 3px rgba(0, 153, 214, .55), var(--schaduw, 0 8px 24px rgba(0, 0, 0, .08)); transition: box-shadow .4s; }
.iban-status { display: block; margin-top: 3px; font-size: 12px; color: #6B7280; }
/* Invoervelden recht onder elkaar: het label in een vaste kolom links, het veld (en de IBAN-controle) erachter; op de telefoon onder elkaar. */
.velden-recht label:not(.vink) { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; }
.velden-recht label:not(.vink) > :is(input, select, textarea) { width: 100%; box-sizing: border-box; }
.velden-recht label:not(.vink) > .iban-status { grid-column: 2; }
/* In een kader (fieldset) de rand en binnenruimte aftrekken, zodat de velden op dezelfde lijn staan als erbuiten. */
.velden-recht fieldset label:not(.vink) { grid-template-columns: calc(9.5rem - 13px) minmax(0, 1fr); }
.velden-recht label:not(.vink) > .delen-keuze { grid-column: 2; justify-self: start; width: auto; margin-top: 4px; font-size: 13px; }
@media (max-width: 560px) { .velden-recht label:not(.vink) > .delen-keuze { grid-column: 1; } }
.delen-email { color: #4B5563; font-weight: 400; }
/* 🪪 Profiel van iemand van de leiding (/persoon/…). */
.profiel-kop { display: flex; align-items: center; gap: 16px; }
.profiel-kop h2 { margin: 0 0 6px; }
.persoon-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.persoon-groepen { margin: 6px 0 0; padding-left: 20px; }
.persoon-waarde { white-space: pre-line; }
a.persoon-link, .pl-wie a.naam, .persoon-kop a.naam-link { color: inherit; text-decoration: none; }
a.persoon-link:hover, a.persoon-link:focus-visible, .pl-wie a.naam:hover, .pl-wie a.naam:focus-visible, .persoon-kop a.naam-link:hover { text-decoration: underline; }
.leiding-profielen { margin: -2px 0 10px 14px; color: #6B7280; }
/* 📋 Rustige tabel met ruimte rond de tekst (huurovereenkomst, licentie): dunne lijnen tussen de rijen, kop links in een vaste kolom. */
table.tabel-plat { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; }
table.tabel-plat :is(th, td) { text-align: left; vertical-align: top; padding: 9px 14px; border-bottom: 1px solid rgba(127, 127, 127, .22); }
table.tabel-plat tr:last-child > :is(th, td) { border-bottom: 0; }
table.tabel-plat tbody th { white-space: nowrap; font-weight: 700; color: #4B5563; width: 1%; }
table.tabel-plat thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; border-bottom-width: 2px; }
html.donker table.tabel-plat tbody th { color: #CBD5E1; }
@media (max-width: 560px) { table.tabel-plat :is(th, td) { padding: 8px 10px; } }
@media (max-width: 560px) { .velden-recht label:not(.vink) { grid-template-columns: minmax(0, 1fr); } .velden-recht label:not(.vink) > .iban-status { grid-column: 1; } }
.iban-status.goed { color: #2B8A3E; }
.iban-status.fout { color: #C92A2A; }
html.donker .iban-status.goed { color: #8CE99A; }
html.donker .iban-status.fout { color: #FF8787; }
.bank-toon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bank-form { display: grid; gap: 8px; max-width: 420px; }
.bank-form label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; }
.bank-form .knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
/* ⚓ Kaart waar een link met anker naartoe gaat: even oplichten. */
.kaart { scroll-margin-top: 12px; }
.kaart.anker-doel { animation: ankerDoel 1.8s ease; }
@keyframes ankerDoel { 0%, 40% { box-shadow: 0 0 0 3px var(--accent, var(--accent)); } 100% { box-shadow: none; } }
/* ‹ Terug in de menubalk: alleen als app (beginscherm), want dan is er geen terugknop van de browser. */
header .topbalk .app-terug { display: none; }
@media (display-mode: standalone) { header .topbalk .app-terug { display: inline-flex; } }
html.app-modus header .topbalk .app-terug { display: inline-flex; }

/* 🏢 Afdelingsmenu: groepen naast elkaar (breed paneel); op een smal scherm en in het mobiele menu onder elkaar. */
header .afdeling-keuze .menu-paneel.menu-kolommen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 220px); gap: 4px 8px; max-width: min(1160px, calc(100vw - 24px)); }
header .afdeling-keuze .menu-kolom { min-width: 0; }
header .afdeling-keuze .menu-kolommen .menu-groep { margin: 2px 10px 4px; padding-top: 0; border-top: 0; }
@media (max-width: 860px) {
  header .afdeling-keuze .menu-paneel.menu-kolommen { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; max-width: 340px; }
  header .afdeling-keuze .menu-kolommen .menu-kolom + .menu-kolom .menu-groep { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, .08); }
  html.donker header .afdeling-keuze .menu-kolommen .menu-kolom + .menu-kolom .menu-groep { border-top-color: rgba(255, 255, 255, .1); }
}
/* ‹ Terug: een eigen vierkant kader (zoals 🔔 Meldingen), en op de telefoon direct naast ☰ Menu in plaats van een gat ertussen. */
header .topbalk .app-terug { background: rgba(255,255,255,.16); font-size: 26px !important; font-weight: 700; line-height: 1; padding: 0 10px 3px; min-width: 36px; justify-content: center; }
header .topbalk .app-terug:hover, header .topbalk .app-terug:active { background: rgba(255,255,255,.26); }
@media (max-width: 600px) {
  header .topbalk .app-terug { width: 32px; min-width: 32px; padding: 0 0 3px; }
  header .topbalk .app-terug + .hamburger { margin-right: auto; }
}

/* 🎨 Icoon kiezen */
.emoji-kiezer { width: 2.6em; height: 2.6em; flex: 0 0 2.6em; font-size: 1.15em; line-height: 1; padding: 0; border-radius: 10px; border: 1px solid #CBD5E1; background: #fff; cursor: pointer; }
.emoji-kiezer:hover, .emoji-kiezer:focus-visible { border-color: var(--primair, var(--primair)); }
/* Paneel van de emojikiezer (basis.js emojiKiezer); los van .emoji-paneel van de opmaakbalk, dat een smal raster is. */
.emoji-kiezer-paneel { position: absolute; z-index: 1000; background: #fff; border: 1px solid #CBD5E1; border-radius: 12px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); width: min(320px, calc(100vw - 16px)); }
.emoji-raster { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-raster button { font-size: 1.25em; padding: 4px 0; border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.emoji-raster button:hover, .emoji-raster button:focus-visible { background: #E7F5FC; }
.emoji-eigen { display: flex; gap: 6px; margin-top: 6px; }
.emoji-eigen input { flex: 1; min-width: 0; }
html.donker .emoji-kiezer, html.donker .emoji-kiezer-paneel { background: #13212B; border-color: #2A3B46; }
html.donker .emoji-raster button:hover { background: #1F3442; }

/* 🔔 Meldingen per soort met drie losse kanalen (partials/melding-instellingen.ejs): tekst over de breedte, rechts 🔔 App, ✉️ Mail, 📱 Push.
   Op de telefoon staan de drie schakelaars onder de tekst, met hun naam erbij. */
.melding-kolommen, .melding-soort-rij { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 64px); gap: 8px; align-items: center; }
.melding-kolommen { font-size: 12px; font-weight: 700; color: #6B7280; text-align: center; padding-bottom: 4px; }
.melding-kolommen span:first-child { text-align: left; }
.melding-soort-rij { padding: 9px 0; border-top: 1px solid rgba(0, 0, 0, .06); }
.melding-soort-tekst b { display: block; font-size: 14px; }
.melding-soort-tekst small { display: block; color: #6B7280; font-size: 12px; }
.melding-kanaal { position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; cursor: pointer; }
.melding-kanaal input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.melding-kanaal .knopje { flex: none; position: relative; width: 38px; height: 22px; border-radius: 11px; background: #CBD5E1; transition: background .2s; }
.melding-kanaal .knopje::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.melding-kanaal input:checked + .knopje { background: var(--primair, var(--primair)); }
.melding-kanaal input:checked + .knopje::after { transform: translateX(16px); }
.melding-kanaal input:focus-visible + .knopje { outline: 2px solid var(--primair, var(--primair)); outline-offset: 2px; }
.melding-kanaal .kanaal-naam { display: none; font-size: 12px; color: #4B5563; }
#meldingen .melding-push-uit, .melding-instellen .melding-push-uit { margin: 6px 0 10px; }
html.donker .melding-soort-rij { border-color: rgba(255, 255, 255, .08); } html.donker .melding-soort-tekst small, html.donker .melding-kolommen, html.donker .melding-kanaal .kanaal-naam { color: #9AA9B4; }
@media (max-width: 600px) {
  .melding-kolommen { display: none; }
  .melding-soort-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 6px; }
  .melding-soort-tekst { grid-column: 1 / -1; }
  .melding-kanaal { justify-content: flex-start; }
  .melding-kanaal .kanaal-naam { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .melding-kanaal .knopje, .melding-kanaal .knopje::after { transition: none; } }

/* ✍️ Eigen tekst in een uitnodiging: opmaakbalk en voorbeeld zoals in de mail */
.uitnodig-tekst > label { font-weight: 700; }
.uitnodig-tekst .mededeling-balk { margin: 2px 0 0; }
details.opmaak-voorbeeld > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #6B7280; padding: 4px 0; }
details.opmaak-voorbeeld[open] > summary { margin-bottom: 4px; }
html.donker details.opmaak-voorbeeld > summary { color: #9AA5B1; }
.opmaak-voorbeeld .opmaak-tekst { font-weight: 400; font-size: 15px; line-height: 1.5; padding: 8px 12px; border-radius: 10px; background: rgba(0, 137, 192, .06); }
.opmaak-tekst mark { background: #FFE066; color: #3D3110; padding: 0 3px; border-radius: 4px; }
.template-keuze { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14px; }
.template-keuze select { font-weight: 400; }

/* Lijst met rijen (API-sleutels, uitnodigingstemplates) */
.api-lijst { display: grid; gap: 8px; margin: 8px 0 12px; }
.api-rij { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: rgba(0, 137, 192, .06); }
.api-rij.ingetrokken { opacity: .55; }
.api-rij .kd-voorbeeld { margin-top: 8px; }
.api-rij { align-items: center; }
@media (max-width: 600px) { .api-rij { flex-direction: column; } }

/* 📨 Uitnodigingstemplate aanpassen (pagina Documenten) */
.uitnodig-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.uitnodig-form > label:not(.schakelaar) { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
.uitnodig-form .breed { grid-column: 1 / -1; }

/* ✉️ Sjablonen: tabbladen */
.sjabloon-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sjabloon-tabs button.aan { background: var(--primair); color: #fff; border-color: var(--primair); }
.sjabloon-tabs button.aan .tag { background: rgba(255,255,255,.25); color: #fff; box-shadow: none; }
#tab-verhuur .materiaal-form > label.schakelaar { display: flex; justify-content: space-between; align-items: center; }
/* 🎭 Rolkiezer in de demo-omgeving (src/demo.ts): bovenaan elke pagina. */
.demo-rolbalk { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px; background: #2B2D42; color: #fff; font-size: 14px; }
.demo-rolbalk-label { font-weight: 700; margin-right: 4px; }
.demo-rol { color: #fff; text-decoration: none; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); white-space: nowrap; }
.demo-rol:hover { background: rgba(255,255,255,.12); }
.demo-rol.aan { background: #FFD43B; border-color: #FFD43B; color: #2B2D42; font-weight: 700; }
.demo-rolbalk-noot { margin-left: auto; font-size: 12px; opacity: .75; }
/* 👀 Wat je als de gekozen demorol ziet (bijvoorbeeld alleen wat bij een functie hoort). */
.demo-rolzie { margin: 0; padding: 4px 16px; background: #3A3D5C; color: #E9ECF5; font-size: 12.5px; }
@media print { .demo-rolzie { display: none; } }
/* Rolbalk en mededelingen plakken samen bovenaan; de mededeling blijft net zo opvallend als zonder demo. */
.bovenbalken { position: sticky; top: 0; z-index: 60; }
.bovenbalken .demo-rolbalk, .bovenbalken .mededelingen { position: static; }
.bovenbalken .demo-rolbalk { padding: 5px 16px; font-size: 13px; }
.bovenbalken .demo-rol { padding: 2px 10px; }
.bovenbalken .mededeling { font-size: 15px; padding: 12px 16px; }
@media (max-width: 700px) {
  .demo-rolbalk { flex-wrap: nowrap; overflow-x: auto; padding: 8px 12px; }
  .demo-rolbalk-label { white-space: nowrap; }
  .demo-rolbalk-noot { display: none; }
}
/* 🙋 Wizard: een nieuwe aanmelding indelen (/aanmelding/…); labels in een vaste kolom, keuzes als pillen. */
.wz-wie { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wz-wie small { display: block; color: #6B7280; }
/* Stappenbalk: zelfde als de instelwizard (.inricht-stappen); afgeronde stappen zijn aan te klikken. */
.inricht-stappen li.klaar[tabindex] { cursor: pointer; }
.wz-rij { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 6px 12px; align-items: center; margin: 10px 0; }
.wz-lab { color: #4B5563; font-weight: 700; font-size: 14px; }
.wz-keuze { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-pil { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: inherit; cursor: pointer; }
.wz-pil.aan { background: var(--primair); border-color: var(--primair); color: #fff; }
.wz-let { color: #B45309; }
.wz-samen { line-height: 1.9; }
.wz-knoppen { justify-content: space-between; }
.wz-rechts { display: flex; gap: 8px; }
.wz-klaar { text-align: center; padding: 8px 0; }
.wz-icoon { font-size: 34px; margin: 0; }
.wacht-kaart { text-align: center; }
.wacht-icoon { font-size: 40px; margin: 0; }
html.donker .wz-lab { color: #CBD5E1; }

@media (max-width: 560px) { .wz-rij { grid-template-columns: minmax(0, 1fr); } }
.wacht-blok { border: 1px solid rgba(245, 159, 0, .55); background: rgba(255, 236, 153, .25); border-radius: 12px; padding: 10px 14px; margin: 8px 0 14px; }
.wacht-blok h3 { margin: 0 0 8px; }
.wacht-rij { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.wacht-rij + .wacht-rij { border-top: 1px solid rgba(127, 127, 127, .2); }
.wacht-naam { flex: 1; min-width: 0; }
.wacht-naam small { display: block; color: #6B7280; }
/* 🧭 Pagina met illustratie (views/partials/kamp-illustratie.ejs): 404 (melding.ejs) en inloggen (login.ejs). Schermbreed, links het
   beeld en rechts de tekst; op de telefoon onder elkaar. Kleuren volgen het thema van de afdeling en de donkere modus. */
/* Even breed als de beginpagina: de gewone breedte van main (1000, 1200 of 1400 px). */
.beeld-kaart { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 28px 32px; }
.beeld { width: 100%; height: auto; max-height: 360px; }
.beeld-tekst h2 { font-size: 26px; margin: 0 0 8px; }
.beeld-tekst .knoppen { margin-top: 18px; }
.kb-grond { fill: rgba(0, 137, 192, .10); }
.kb-pad { fill: none; stroke: var(--accent, var(--accent)); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .8; }
.kb-boom path { fill: #2F9E44; } .kb-boom rect { fill: #8D6E63; } .kb-boom-klein path { fill: #40C057; }
.kb-tent path { fill: var(--primair, var(--primair)); } .kb-tent .kb-tent-deur { fill: #0B4A66; } .kb-tent .kb-touw { fill: none; stroke: #6B7280; stroke-width: 1.5; }
.kb-vraag { font: 800 40px Poppins, Nunito, sans-serif; fill: var(--accent, var(--accent)); }
.kb-rand { fill: var(--primair, var(--primair)); }
.kb-vlak { fill: #fff; stroke: rgba(0, 0, 0, .08); stroke-width: 2; }
.kb-streepjes path { stroke: #9AA5B1; stroke-width: 3; stroke-linecap: round; }
.kb-windstreek { font: 700 13px Nunito, sans-serif; fill: #4B5563; }
.kb-naald-n { fill: var(--accent, var(--accent)); } .kb-naald-z { fill: #ADB5BD; } .kb-as { fill: #313131; }
.kb-naald { transform-origin: 0 0; animation: kb-zoeken 5s ease-in-out infinite; }
.kb-404 { font: 800 76px Poppins, Nunito, sans-serif; fill: var(--primair, var(--primair)); opacity: .16; }
@keyframes kb-zoeken { 0% { transform: rotate(-35deg); } 20% { transform: rotate(60deg); } 35% { transform: rotate(20deg); } 55% { transform: rotate(160deg); } 70% { transform: rotate(110deg); } 85% { transform: rotate(250deg); } 100% { transform: rotate(325deg); } }
@media (prefers-reduced-motion: reduce) { .kb-naald { animation: none; transform: rotate(35deg); } }
html.donker .kb-vlak { fill: #17232B; stroke: rgba(255, 255, 255, .12); }
html.donker .kb-windstreek { fill: #CBD5E1; } html.donker .kb-as { fill: #E3EAF0; } html.donker .kb-grond { fill: rgba(158, 221, 247, .10); }
html.donker .kb-404 { opacity: .25; }
@media (max-width: 700px) { .beeld-kaart { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; text-align: center; } .beeld-tekst .knoppen { justify-content: center; } }
/* Welkom (inloggen): de naald wiegt rustig rond het noorden, het vuur flakkert, een vlag op de tent en een paar sterren. */
.kb-welkom .kb-naald { animation: kb-rust 6s ease-in-out infinite; }
@keyframes kb-rust { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.kb-vlagstok { stroke: #6B7280; stroke-width: 2; }
.kb-vlag { fill: var(--accent, var(--accent)); }
.kb-hout { stroke: #8D6E63; stroke-width: 4; stroke-linecap: round; }
.kb-vlam { fill: #F59F00; transform-origin: 0 -2px; animation: kb-vlam 1.6s ease-in-out infinite; }
.kb-vlam-binnen { fill: #FFE066; transform-origin: 0 -3px; animation: kb-vlam 1.1s ease-in-out infinite reverse; }
@keyframes kb-vlam { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.9, 1.12); } }
.kb-ster circle { fill: #F59F00; opacity: .7; }
html.donker .kb-ster circle { fill: #FFE066; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .kb-welkom .kb-naald, .kb-vlam, .kb-vlam-binnen { animation: none; } .kb-welkom .kb-naald { transform: none; } }
/* Inloggen: het formulier rechts, op volle breedte van zijn kolom. */
.beeld-tekst .rij-form { display: flex; gap: 8px; flex-wrap: wrap; }
.beeld-tekst .rij-form input { flex: 1 1 220px; min-width: 0; }
/* 🔐 Tweede stap: QR-code van de authenticator-app, herstelcodes en de blokken op het profiel. */
.ts-qr svg { display: block; width: 180px; height: 180px; margin: 8px 0; border-radius: 10px; background: #fff; padding: 6px; }
.ts-codes { margin: 6px 0; padding: 10px 14px; border-radius: 10px; background: #F1F3F5; font: 600 15px/1.7 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; columns: 2; }
.ts-blok { margin-top: 12px; padding-top: 10px; border-top: 1px solid #E5E7EB; }
.ts-blok h3 { margin: 0 0 6px; font-size: 16px; }
.ts-rij { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.ts-app { margin-top: 8px; }
.stap2-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; margin: 6px 0 10px; }
.ts-herstel { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #FFF4E6; }
html.donker .ts-codes { background: #1F2B33; color: #E3EAF0; }
html.donker .ts-blok { border-color: #26343D; }
html.donker .ts-herstel { background: #3A2A12; }
@media (max-width: 700px) { .beeld-tekst .rij-form > * { flex: 1 1 100%; } }
/* 🧭 Instelwizard (views/inrichten.ejs): schermbreed in één tegel, links het sfeerbeeld (blijft staan tijdens het scrollen), rechts de stappen.
   Op de telefoon staat het beeld klein bovenaan. Kaart op de beginpagina: .inricht-kaart. */
.inricht-tegel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; padding: 28px 32px; }
.inricht-beeld { position: sticky; top: 16px; }
.inricht-wizard { min-width: 0; }
.inricht-stappen { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; }
.inricht-stappen li { font-size: 13px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .12); color: #6B7280; }
.inricht-stappen li.aan { background: var(--primair, var(--primair)); border-color: var(--primair, var(--primair)); color: #fff; font-weight: 700; }
.inricht-stappen li.klaar { color: #2B8A3E; border-color: rgba(43, 138, 62, .35); }
.inricht-wizard h2 { margin: 0 0 6px; }
.inricht-wizard h3 { margin: 22px 0 4px; }
.inricht-knoppen { justify-content: space-between; margin-top: 22px; }
.inricht-soorten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.inricht-soort { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .14); background: #fff; color: inherit; cursor: pointer; font: inherit; }
.inricht-soort b { font-size: 15px; }
.inricht-soort small { color: #6B7280; }
.inricht-soort:hover { border-color: var(--primair, var(--primair)); }
.inricht-soort.aan { border: 2px solid var(--primair, var(--primair)); background: rgba(0, 137, 192, .08); padding: 13px; }
.inricht-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inricht-logo-vak { width: 72px; height: 72px; border-radius: 12px; border: 1px dashed rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #6B7280; overflow: hidden; background: #fff; flex: none; }
.inricht-logo-vak img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inricht-advies { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: rgba(0, 137, 192, .10); font-size: 14px; }
.inricht-staal { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }
.inricht-kleuren { display: flex; gap: 8px; }
.inricht-kleuren input { width: 54px; height: 38px; padding: 2px; }
.inricht-voorbeeld { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .1); max-width: 420px; }
/* Uitleg onder het veld (tweede kolom), het advies en het kleurvoorbeeld op één lijn met de velden. */
.inricht-wizard .velden-recht label:not(.vink) > small { grid-column: 2; }
.inricht-wizard .velden-recht > .inricht-advies, .inricht-wizard .velden-recht > .inricht-voorbeeld { margin-left: calc(9.5rem + 12px); }
@media (max-width: 560px) { .inricht-wizard .velden-recht label:not(.vink) > small { grid-column: 1; } .inricht-wizard .velden-recht > .inricht-advies, .inricht-wizard .velden-recht > .inricht-voorbeeld { margin-left: 0; } }
.inricht-voorbeeld-kop { color: #fff; font-weight: 700; padding: 10px 14px; }
.inricht-voorbeeld-lijf { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: #fff; }
.inricht-voorbeeld-knop { color: #fff; border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 700; }
.inricht-voorbeeld-licht { border-radius: 8px; padding: 5px 12px; font-size: 13px; color: #1F2933; }
.inricht-modules { display: flex; flex-direction: column; margin-top: 8px; }
.inricht-module-rij { border-top: 1px solid rgba(0, 0, 0, .08); padding: 9px 0; }
.inricht-module { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
/* Uitklapmenu met de onderdelen van een module (bijv. Betalingen: contant, QR-code, Tikkie, iDEAL). */
.inricht-onderdelen { margin: 6px 0 0 26px; border-radius: 10px; background: rgba(0, 137, 192, .06); padding: 6px 12px; }
.inricht-onderdelen summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--primair, var(--primair)); padding: 2px 0; }
.inricht-onderdeel { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 14px; cursor: pointer; }
.inricht-onderdeel input { margin-top: 3px; flex: none; }
.inricht-onderdeel small { display: block; }
.inricht-module input { margin-top: 4px; flex: none; }
.inricht-module small { display: block; }
.inricht-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #D3F9D8; color: #2B8A3E; }
.inricht-groepen, .inricht-mensen { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.inricht-groep { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 8px; align-items: center; }
/* Meer dagen per groep: de extra dagen van dezelfde groep. */
.inricht-extra-dagen { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inricht-extra-dagen select { width: auto; }
.inricht-mens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.inricht-mens input, .inricht-mens select, .inricht-groep input, .inricht-groep select { min-width: 0; width: 100%; }
.inricht-mens .inricht-vink { grid-column: 3 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4B5563; }
.inricht-mens .inricht-vink input { width: auto; margin: 0; flex: none; }
.inricht-taken { display: flex; flex-direction: column; }
.inricht-taak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.inricht-taak small { display: block; }
.inricht-overzicht { line-height: 1.8; padding-left: 20px; }
.inricht-log { list-style: none; padding: 0; font-size: 14px; line-height: 1.8; }
.inricht-log .fout { color: #C92A2A; }
/* 🔑 Sleutelakkoord op het profiel (views/profiel.ejs) en ✏️ eerdere namen (src/hernoemen.ts). */
.sleutel-akkoorden { display: grid; gap: 8px; margin: 6px 0 10px; }
.sleutel-akkoord { padding: 10px 12px; border-radius: 12px; background: #F3FBFE; }
.sleutel-akkoord p { margin: 4px 0; font-size: 14px; }
.sleutel-akkoord small { color: #6B7280; }
.sleutel-afspraken { white-space: pre-line; font-size: 13px; color: #4B5563; padding: 6px 10px; border-left: 3px solid var(--primair, var(--primair)); background: rgba(255, 255, 255, .6); border-radius: 6px; }
.sleutel-afspraken-invoer { width: 100%; box-sizing: border-box; margin: 6px 0; }
.materiaal-info.eerder, .chip-uitleg { display: block; font-size: 12px; color: #6B7280; font-style: italic; }
.chip-uitleg { margin: -2px 0 6px 4px; }
html.donker .sleutel-akkoord { background: #12232D; } html.donker .sleutel-afspraken { background: rgba(0, 0, 0, .2); color: #CBD5E1; } html.donker .materiaal-info.eerder, html.donker .chip-uitleg, html.donker .sleutel-akkoord small { color: #9AA9B4; }
/* 📅 Meer dagen per groep (Afdeling beheren → Groepsavonden): de dag met een klein uitklapmenu voor extra dagen. */
.dag-cel { display: flex; gap: 6px; align-items: center; }
.dagen-menu summary { white-space: nowrap; font-size: 12px; }
/* 📅 Soorten activiteiten bij Afdeling beheren. */
.soorten-raster { display: grid; gap: 6px; margin: 6px 0; }
.soort-rij { display: grid; grid-template-columns: auto 3.5rem minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.soort-rij .s-emoji { text-align: center; }
.soort-rij .s-leden { white-space: nowrap; }
/* 🚪 Vertrekwizard (views/vertrek.ejs): keuzes en punten om af te vinken, de mail-opties, overdragen. Bij Personen: wat nog openstaat. */
.vertrek-lijst { display: grid; gap: 6px; margin: 0 0 14px; }
.vertrek-punt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: #F3FBFE; cursor: pointer; }
.vertrek-punt input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.vertrek-punt small { display: block; color: #6B7280; font-weight: 400; margin-top: 2px; }
.vertrek-punt:has(input:checked) { background: #EBFBEE; }
.vertrek-mail { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 137, 192, .08); }
.vertrek-mail .vertrek-punt { background: transparent; padding: 0; }
.vertrek-voorbeeld { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); font-size: 14px; }
.vertrek-voorbeeld p { margin: 0 0 4px; } .vertrek-voorbeeld ul { margin: 0; padding-left: 20px; }
.vertrek-over { display: flex; flex-direction: column; }
.vertrek-over-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.vertrek-over-rij small { display: block; color: #6B7280; } .vertrek-over-rij small.let, .inricht-overzicht .let { color: #B35C00; }
.inricht-wizard textarea { width: 100%; box-sizing: border-box; margin-top: 8px; }
.vertrek-open-rij td { background: #FFF8E6; font-size: 13px; padding: 8px 10px; }
.vertrek-open-punt { display: inline-flex; align-items: center; gap: 6px; margin: 2px 12px 2px 0; }
html.donker .vertrek-punt { background: #12232D; } html.donker .vertrek-punt:has(input:checked) { background: #1E3A24; } html.donker .vertrek-punt small, html.donker .vertrek-over-rij small { color: #9AA9B4; }
html.donker .vertrek-voorbeeld { background: #17232B; border-color: rgba(255, 255, 255, .12); } html.donker .vertrek-open-rij td { background: #3A2E12; }
html.donker .vertrek-over-rij small.let, html.donker .inricht-overzicht .let { color: #FFC078; }
@media (max-width: 560px) { .vertrek-over-rij { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.inricht-kaart { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 6px solid var(--accent, var(--accent)); }
.inricht-kaart h2 { margin: 0 0 4px; }
.inricht-kaart p { margin: 0; }
html.donker .inricht-soort, html.donker .inricht-logo-vak, html.donker .inricht-voorbeeld-lijf { background: #17232B; }
html.donker .inricht-soort small, html.donker .inricht-stappen li, html.donker .inricht-mens .inricht-vink { color: #CBD5E1; }
html.donker .inricht-stappen li, html.donker .inricht-soort { border-color: rgba(255, 255, 255, .18); }
html.donker .inricht-stappen li.aan { color: #fff; }
html.donker .inricht-module-rij, html.donker .inricht-taak { border-color: rgba(255, 255, 255, .1); }
html.donker .inricht-onderdelen { background: rgba(158, 221, 247, .08); }
html.donker .inricht-onderdelen summary { color: color-mix(in srgb, var(--primair-licht) 40%, white); }
html.donker .inricht-tag { background: #1C3A25; color: #8CE99A; }
@media (max-width: 900px) {
  .inricht-tegel { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 16px; }
  .inricht-beeld { position: static; }
  .inricht-beeld .beeld { max-height: 150px; }
  .inricht-mens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .inricht-mens input[type=email] { grid-column: 1 / -1; }
  .inricht-mens > button { grid-column: 2; grid-row: 4; justify-self: end; }
  .inricht-mens .inricht-vink { grid-column: 1; grid-row: 4; }
  .inricht-taak { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .inricht-groep { grid-template-columns: minmax(0, 1fr) 130px auto; }
}
/* 🎨 Sfeerbeelden (views/partials/sfeer-illustratie.ejs): sport, zwemmen, muziek, dans en algemeen. Gedeeld met buiten: .kb-rand, .kb-vlak,
   .kb-streepjes, .kb-as, .kb-vraag, .kb-404, .kb-grond. Kwijt (niet gevonden) = het middelpunt slaat op hol; minder beweging = stil. */
.sf-veld path { fill: #51CF66; } .sf-veld .sf-lijn, .sf-veld ellipse.sf-lijn { fill: none; stroke: #fff; stroke-width: 2; opacity: .85; }
.sf-doel path { fill: none; stroke: #ADB5BD; stroke-width: 4; stroke-linejoin: round; } .sf-doel .sf-net { stroke: #CED4DA; stroke-width: 1.2; }
.sf-bal circle { fill: #fff; stroke: #313131; stroke-width: 1.5; } .sf-bal path { fill: #313131; }
.sf-knop { fill: #ADB5BD; }
.sf-wijzer path { stroke: var(--accent, var(--accent)); stroke-width: 4; stroke-linecap: round; }
.sf-wijzer { transform-origin: 0 0; animation: sf-tik 8s steps(8) infinite; }
.sf-kwijt .sf-wijzer { animation: sf-rond 1.4s linear infinite; }
@keyframes sf-tik { to { transform: rotate(360deg); } }
@keyframes sf-rond { to { transform: rotate(360deg); } }
.sf-bad rect { fill: #4DABF7; } .sf-bad .sf-baan { stroke: #fff; stroke-width: 2; stroke-dasharray: 6 6; opacity: .9; }
.sf-golven path { fill: none; stroke: color-mix(in srgb, var(--primair-licht) 22%, white); stroke-width: 3; stroke-linecap: round; opacity: .9; }
.sf-trap path { fill: none; stroke: #ADB5BD; stroke-width: 4; stroke-linecap: round; }
.sf-eend path { fill: #FFD43B; } .sf-eend .sf-oog { fill: #313131; }
.sf-band { fill: #fff; stroke: #ADB5BD; stroke-width: 1.5; } .sf-band-gat { fill: color-mix(in srgb, var(--primair-licht) 40%, white); } .sf-band-strepen { fill: #FA5252; } .sf-touw { fill: none; stroke: #868E96; stroke-width: 2; }
.sf-dobber { animation: sf-dobber 3.2s ease-in-out infinite; }
.sf-kwijt .sf-dobber { animation: sf-drijf 4s ease-in-out infinite; transform-origin: 0 0; }
@keyframes sf-dobber { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@keyframes sf-drijf { 0% { transform: translate(-6px, 0) rotate(-10deg); } 50% { transform: translate(8px, 6px) rotate(14deg); } 100% { transform: translate(-6px, 0) rotate(-10deg); } }
.sf-podium path { fill: #8D6E63; }
.sf-trom-vel { fill: #F1F3F5; stroke: #ADB5BD; stroke-width: 1.5; } .sf-trom-romp { fill: var(--primair, var(--primair)); } .sf-trom-touw { fill: none; stroke: #FFE066; stroke-width: 2; }
.sf-stok { stroke: #8D6E63; stroke-width: 4; stroke-linecap: round; }
.sf-noten path { fill: none; stroke: var(--accent, var(--accent)); stroke-width: 3; } .sf-noten ellipse { fill: var(--accent, var(--accent)); }
.sf-zweven { animation: sf-zweef 4s ease-in-out infinite; }
@keyframes sf-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sf-slinger path { stroke: #313131; stroke-width: 3; stroke-linecap: round; } .sf-gewicht { fill: var(--accent, var(--accent)); }
.sf-slinger { transform-origin: 0 46px; animation: sf-slinger 2s ease-in-out infinite alternate; }
.sf-kwijt .sf-slinger { animation: sf-slinger-wild .5s ease-in-out infinite alternate; }
@keyframes sf-slinger { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes sf-slinger-wild { from { transform: rotate(-48deg); } to { transform: rotate(48deg); } }
.sf-vloer path { fill: #845EF7; } .sf-vloer .sf-lijn { fill: none; stroke: #fff; stroke-width: 1.5; opacity: .5; }
.sf-straal { fill: #FFE066; opacity: .18; animation: sf-spot 3s ease-in-out infinite alternate; } .sf-straal-2 { animation-delay: 1.5s; }
.sf-spot { fill: #495057; }
@keyframes sf-spot { from { opacity: .08; } to { opacity: .28; } }
.sf-bol { fill: #CED4DA; stroke: #868E96; stroke-width: 2; } .sf-facetten path { fill: none; stroke: #868E96; stroke-width: 1.2; }
.sf-facetten { transform-origin: 0 0; animation: sf-schitter 6s linear infinite; }
.sf-kwijt .sf-facetten { animation-duration: 1.2s; }
@keyframes sf-schitter { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.sf-glinster path { fill: #FFE066; }
.sf-dak { fill: #C92A2A; } .sf-muur { fill: #F1F3F5; stroke: #ADB5BD; stroke-width: 1.5; } .sf-deur { fill: var(--primair, var(--primair)); } .sf-raam { fill: color-mix(in srgb, var(--primair-licht) 40%, white); }
.sf-uur path, .sf-minuut path { stroke: #313131; stroke-width: 4; stroke-linecap: round; } .sf-minuut path { stroke: var(--accent, var(--accent)); stroke-width: 3; }
.sf-uur, .sf-minuut { transform-origin: 0 0; } .sf-minuut { animation: sf-rond 60s linear infinite; } .sf-uur { transform: rotate(60deg); }
.sf-kwijt .sf-minuut { animation-duration: 1s; } .sf-kwijt .sf-uur { animation: sf-rond 4s linear infinite reverse; }
html.donker .sf-slinger path, html.donker .sf-uur path { stroke: #E3EAF0; } html.donker .sf-muur { fill: #26343D; } html.donker .sf-trom-vel { fill: #26343D; }
@media (prefers-reduced-motion: reduce) { .sf-wijzer, .sf-dobber, .sf-zweven, .sf-slinger, .sf-straal, .sf-facetten, .sf-minuut, .sf-uur { animation: none !important; } }
/* 🎨 Sportthema's: tennis, basketbal, hockey, volleybal en atletiek (stopwatch = .sf-stopwatch, net als voetbal). */
.sf-baan-tennis path { fill: #3D8B66; } .sf-baan-tennis .sf-lijn, .sf-vloer-hout .sf-lijn, .sf-veld-hockey .sf-lijn, .sf-zand .sf-lijn, .sf-baan .sf-lijn { fill: none; stroke: #fff; stroke-width: 2; opacity: .85; }
.sf-net .sf-netpaal { stroke: #495057; stroke-width: 4; stroke-linecap: round; } .sf-net .sf-netband { stroke: #F1F3F5; stroke-width: 4; } .sf-net .sf-netmaas { fill: none; stroke: #868E96; stroke-width: 1; opacity: .8; }
.sf-racket-rand { fill: none; stroke: var(--accent, var(--accent)); stroke-width: 4; } .sf-racket-snaar { stroke: #ADB5BD; stroke-width: 1; } .sf-racket-greep { stroke: #495057; stroke-width: 6; stroke-linecap: round; }
.sf-bal-tennis { fill: #D8F55B; stroke: #A9C23B; stroke-width: 2; } .sf-tennisnaad { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.sf-vloer-hout path { fill: #E8A35C; }
.sf-paal { stroke: #495057; stroke-width: 6; } .sf-bord { fill: #fff; stroke: #868E96; stroke-width: 2; } .sf-bord-vak { fill: none; stroke: #FA5252; stroke-width: 2; }
.sf-ring { fill: none; stroke: #F76707; stroke-width: 4; } .sf-netje { fill: none; stroke: #CED4DA; stroke-width: 1.4; }
.sf-bal-basket { fill: #F76707; stroke: #C2410C; stroke-width: 2; } .sf-basketlijn { fill: none; stroke: #5C2A0E; stroke-width: 2.5; }
.sf-veld-hockey path { fill: #1C7ED6; } .sf-stick path { fill: none; stroke: #495057; stroke-width: 5; stroke-linecap: round; } .sf-hockeybal { fill: #fff; stroke: #ADB5BD; }
.sf-zand path { fill: #F4D58D; } .sf-bal-volley { fill: #fff; stroke: #ADB5BD; stroke-width: 2; } .sf-volleylijn { fill: none; stroke: #1C7ED6; stroke-width: 3; }
.sf-baan path { fill: #E03131; } .sf-horde-poot { stroke: #495057; stroke-width: 4; } .sf-horde-plank { fill: #fff; stroke: #E03131; stroke-width: 2; }
.sf-finishvlag { fill: #fff; stroke: #313131; stroke-width: 1; } .sf-finishblok { fill: #313131; }
.sf-tol { transform-origin: 0 0; animation: sf-tol 12s linear infinite; }
.sf-welkom .sf-bal-groot { animation: sf-stuiter 2.4s ease-in-out infinite; }
.sf-kwijt .sf-tol { animation-duration: 1.2s; } .sf-kwijt .sf-bal-groot { animation: sf-weg 3s ease-in-out infinite; }
@keyframes sf-weg { 0%, 100% { transform: translate(256px, 112px); } 50% { transform: translate(270px, 120px); } }
@keyframes sf-tol { to { transform: rotate(360deg); } }
@keyframes sf-stuiter { 0%, 100% { transform: translate(262px, 108px); } 50% { transform: translate(262px, 118px); } }
html.donker .sf-bord, html.donker .sf-bal-volley { fill: #E9ECEF; }
@media (prefers-reduced-motion: reduce) { .sf-tol, .sf-bal-groot { animation: none !important; } }
/* 🎨 Sfeerbeelden met leven (0.50): lucht en grond zonder kader (masker in de partial), mensen (.sf-broek, armen en benen die bewegen),
   achtergrond (bomen, struiken, wolken, vogels, lampjes) en het spel (bal, zwemmers, dansers). Stand "totziens": iemand loopt weg. */
.sf-lucht-dag { fill: #D7ECFB; } .sf-lucht-nacht { fill: #2C4A72; } .sf-lucht-podium { fill: #4A3F75; opacity: .85; }
html.donker .sf-lucht-dag { opacity: .22; } html.donker .sf-lucht-nacht { opacity: .8; }
.sf-heuvel { fill: #24543A; } .sf-algemeen .sf-heuvel { fill: #B2DFAE; } html.donker .sf-algemeen .sf-heuvel { fill: #24543A; }
.sf-gras { fill: rgba(0, 137, 192, .10); } .sf-gras-buiten { fill: #2F7A48; }
.sf-gras-sport, .sf-gras-hockey, .sf-gras-atletiek, .sf-gras-tennis, .sf-gras-algemeen { fill: #BFE3B4; } .sf-gras-volleybal { fill: #F3E3B5; }
html.donker .sf-gras-sport, html.donker .sf-gras-hockey, html.donker .sf-gras-atletiek, html.donker .sf-gras-tennis, html.donker .sf-gras-algemeen, html.donker .sf-gras-volleybal { opacity: .35; }
.sf-boom-ver path { fill: #3C8D55; opacity: .75; } .sf-buiten .sf-boom-ver path { fill: #1E4D2B; opacity: 1; }
.sf-struik ellipse { fill: #4CAF6A; opacity: .8; } .sf-buiten .sf-struik ellipse { fill: #24543A; }
.sf-wolk path { fill: #fff; opacity: .95; } .sf-wolk { animation: sf-wolk 14s ease-in-out infinite alternate; } .sf-wolk-b { animation-duration: 18s; }
html.donker .sf-wolk path { opacity: .3; }
@keyframes sf-wolk { to { transform: translateX(24px); } }
.sf-vogels { fill: none; stroke: #4B5563; stroke-width: 1.6; stroke-linecap: round; animation: sf-vogels 6s ease-in-out infinite alternate; }
html.donker .sf-vogels { stroke: #CBD5E1; }
@keyframes sf-vogels { to { transform: translate(30px, -6px); } }
.sf-slinger-lijn { fill: none; stroke: #6B7280; stroke-width: 1.2; }
.sf-lampje { fill: #FFD166; animation: sf-lampje 2.4s ease-in-out infinite; } .sf-lampje-1 { fill: #FF8FAB; animation-delay: .8s; } .sf-lampje-2 { fill: #8EECF5; animation-delay: 1.6s; }
@keyframes sf-lampje { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.sf-palmstam { fill: none; stroke: #8D6E63; stroke-width: 6; stroke-linecap: round; } .sf-palmblad { fill: #2B9348; }
.sf-parasolstok { stroke: #6B7280; stroke-width: 3; } .sf-parasoldoek { fill: var(--accent, var(--accent)); }
/* Mensen */
.sf-broek { stroke: #2F3E4E; } html.donker .sf-broek { stroke: #4B5D70; }
.sf-zwaai { animation: sf-zwaai 1.3s ease-in-out infinite; }
@keyframes sf-zwaai { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(30deg); } }
.sf-juich { animation: sf-juich 1s ease-in-out infinite; }
@keyframes sf-juich { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
.sf-slag { animation: sf-slag 2.6s ease-in-out infinite; } .sf-slag-b { animation-delay: -1.3s; }
@keyframes sf-slag { 0%, 8% { transform: rotate(-35deg); } 16% { transform: rotate(45deg); } 32%, 100% { transform: rotate(-35deg); } }
.sf-smash { animation: sf-smash 1.8s ease-in-out infinite; }
@keyframes sf-smash { 0%, 40% { transform: rotate(-40deg); } 55% { transform: rotate(50deg); } 70%, 100% { transform: rotate(-40deg); } }
.sf-trommel { animation: sf-trommel .45s ease-in-out infinite alternate; }
@keyframes sf-trommel { from { transform: rotate(-10deg); } to { transform: rotate(30deg); } }
.sf-dirigeer { animation: sf-dirigeer 1.6s ease-in-out infinite; }
@keyframes sf-dirigeer { 0%, 100% { transform: rotate(-20deg); } 25% { transform: rotate(20deg); } 50% { transform: rotate(-5deg); } 75% { transform: rotate(35deg); } }
.sf-ren { animation: sf-ren .5s ease-in-out infinite alternate; }
@keyframes sf-ren { to { transform: translateY(-3px); } }
.sf-been1, .sf-been2 { transform-box: fill-box; transform-origin: 50% 0; animation: sf-been .5s ease-in-out infinite alternate; } .sf-been2 { animation-direction: alternate-reverse; }
@keyframes sf-been { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.sf-duik { transform-box: fill-box; transform-origin: 50% 100%; animation: sf-duik 2.4s ease-in-out infinite; }
@keyframes sf-duik { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(18deg); } }
.sf-spring { animation: sf-spring 1.8s ease-in-out infinite; } .sf-spring-b { animation-delay: -.9s; }
@keyframes sf-spring { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-20px); } }
.sf-dans { transform-box: fill-box; transform-origin: 50% 100%; animation: sf-dans 1.1s ease-in-out infinite; } .sf-dans-b { animation-delay: -.35s; } .sf-dans-c { animation-delay: -.7s; }
@keyframes sf-dans { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
/* Het spel */
.sf-schot { animation: sf-schot 2.4s ease-in infinite; }
@keyframes sf-schot { 0%, 20% { transform: translate(0, 0); } 70% { transform: translate(-82px, -34px); opacity: 1; } 80%, 100% { transform: translate(-82px, -34px); opacity: 0; } }
.sf-tennisbal, .sf-tennisbal-stil { fill: #D8F55B; stroke: #A9C23B; stroke-width: 1.5; }
.sf-tennisbal { animation: sf-tennisbal 2.6s ease-in-out infinite; }
@keyframes sf-tennisbal { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-90px, -64px); } 50% { transform: translate(-184px, -50px); } 75% { transform: translate(-90px, -58px); } }
.sf-basketbal-klein { fill: #F76707; stroke: #C2410C; stroke-width: 1.5; }
.sf-volleybal-klein { fill: #fff; stroke: #F2A900; stroke-width: 2; animation: sf-volley 1.8s ease-in-out infinite; }
@keyframes sf-volley { 0%, 40% { transform: translate(0, 0); } 60% { transform: translate(70px, 50px); } 80% { transform: translate(40px, -20px); } 100% { transform: translate(0, 0); } }
.sf-zwemmer { animation: sf-zwem 7s ease-in-out infinite alternate; } .sf-zwemmer-b { animation-duration: 9s; animation-delay: -3s; }
@keyframes sf-zwem { from { transform: translateX(-60px); } to { transform: translateX(80px); } }
.sf-armrond { animation: sf-rond 1.2s linear infinite; } .sf-armrond-b { animation-delay: -.6s; }
.sf-schuim { fill: #fff; opacity: .7; }
.sf-ballon { fill: var(--accent, var(--accent)); }
.sf-stam { fill: #8D6E63; }
.sf-gloed { animation: sf-gloed 2s ease-in-out infinite; }
@keyframes sf-gloed { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.sf-vonk { fill: #FFD166; animation: sf-vonk 2.4s linear infinite; } .sf-vonk-2 { animation-delay: .8s; } .sf-vonk-3 { animation-delay: 1.6s; }
@keyframes sf-vonk { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(8px, -70px); opacity: 0; } }
.sf-rook { fill: #CBD5E1; animation: sf-rook 3s ease-in infinite; } .sf-rook-2 { animation-delay: 1.4s; }
@keyframes sf-rook { 0% { transform: translateY(0); opacity: .7; } 100% { transform: translateY(-30px); opacity: 0; } }
/* Scorebord (tennis, basketbal, volleybal) */
.sf-score { font: 800 26px Poppins, Nunito, sans-serif; fill: var(--primair, var(--primair)); }
.sf-paaltje { stroke: #6B7280; stroke-width: 6; stroke-linecap: round; }
html.donker .sf-score { fill: color-mix(in srgb, var(--primair-licht) 40%, white); }
.sf-kwijt .sf-score { fill: var(--accent, var(--accent)); }
@media (prefers-reduced-motion: reduce) {
  .sf-wolk, .sf-vogels, .sf-lampje, .sf-zwaai, .sf-juich, .sf-slag, .sf-smash, .sf-trommel, .sf-dirigeer, .sf-ren, .sf-been1, .sf-been2, .sf-duik, .sf-spring, .sf-dans,
  .sf-schot, .sf-tennisbal, .sf-volleybal-klein, .sf-zwemmer, .sf-armrond, .sf-gloed, .sf-vonk, .sf-rook { animation: none !important; }
}
/* 🗑️ Inzamelingen (views/inzamelingen.ejs, inzamelen.ejs): tijdvakken met teller, inschrijven en wie helpt. */
.inz-kaart { border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.inz-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.inz-acties { display: flex; gap: 6px; }
.inz-waar, .inz-uitleg { margin: 4px 0; }
.inz-tijdvak { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid rgba(127, 127, 127, .18); }
.inz-tijdvak.voorbij { opacity: .55; }
.inz-wanneer { flex: 1 1 200px; }
/* Teller per tijdvak als label: amber zolang er nog mensen nodig zijn, groen als het vol is (goed leesbaar, ook in donker). */
.inz-teller { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #FFF3BF; color: #7A4A00; }
.inz-teller.vol { background: #D3F9D8; color: #2B8A3E; }
html.donker .inz-teller { background: rgba(250, 176, 5, .16); color: #FFD8A8; }
html.donker .inz-teller.vol { background: rgba(64, 192, 87, .16); color: #8CE99A; }
.inz-tijdvak .klein.aan { background: #2B8A3E; color: #fff; border-color: #2B8A3E; }
.inz-hulp { flex-basis: 100%; } .inz-hulp ul { margin: 6px 0 0; padding-left: 20px; } .inz-hulp li { margin: 4px 0; }
.inz-antwoord { display: block; color: #6B7280; }
.inz-tijdvakken { display: grid; gap: 8px; }
.inz-tv-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inz-tv-rij input[type=date] { width: auto; } .inz-tv-rij input[type=time] { width: auto; } .inz-tv-rij input[type=number] { width: 70px; }
.inz-vragen { display: grid; gap: 8px; margin: 8px 0; } .inz-vraag { display: flex; gap: 6px; } .inz-vraag input { flex: 1; min-width: 0; } .inz-vraag select { width: auto; }
.inz-publiek { display: grid; gap: 12px; }
.inz-momenten { border: 1px solid rgba(127, 127, 127, .3); border-radius: 10px; padding: 8px 12px; display: grid; gap: 6px; }
.inz-publiek-kop { margin-top: 6px; }
.inz-moment { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 137, 192, .06); cursor: pointer; font-weight: 400; }
.inz-moment span { flex: 1; } .inz-moment small { color: #6B7280; } .inz-moment input { width: auto; }
.inz-moment.vol { opacity: .55; cursor: default; }
.inz-moment:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primair); }
html.donker .inz-moment { background: rgba(158, 221, 247, .08); }
/* 📍 Reserveren (views/reserveren.ejs): tabs per baan/training, dagen, tijdsloten als tegels. */
.res-tabs, .res-dagen { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.res-tab { font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(127, 127, 127, .4); background: transparent; color: inherit; cursor: pointer; }
.res-tab.aan { background: var(--primair); border-color: var(--primair); color: #fff; }
.res-dag { font: inherit; font-size: 12px; min-width: 56px; padding: 6px 4px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .3); background: transparent; color: #6B7280; cursor: pointer; text-align: center; }
.res-dag b { display: block; font-size: 16px; color: var(--tekst, #313131); }
.res-dag.aan { background: rgba(0, 137, 192, .12); border-color: var(--primair); }
html.donker .res-dag b { color: #E3EAF0; }
.res-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.res-slot { font: inherit; text-align: left; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(127, 127, 127, .25); background: transparent; color: inherit; cursor: pointer; }
.res-slot b { display: block; font-size: 15px; } .res-slot small { display: block; font-size: 12px; margin-top: 2px; }
.res-slot.vrij { background: rgba(43, 138, 62, .10); border-color: rgba(43, 138, 62, .45); }
.res-slot.vrij small { color: #2B8A3E; }
.res-slot.mijn { background: var(--primair); border-color: var(--primair); color: #fff; }
.res-slot.wacht { background: rgba(245, 159, 0, .16); border-color: rgba(245, 159, 0, .6); }
.res-slot.blok { background: rgba(127, 127, 127, .10); color: #6B7280; cursor: default; }
.res-slot.bezet { background: rgba(201, 42, 42, .06); cursor: pointer; }
.res-slot.voorbij, .res-slot:disabled { opacity: .5; cursor: default; }
.res-mijn-rij, .res-bron-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(127, 127, 127, .18); }
.res-form { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid rgba(127, 127, 127, .25); }
.res-form > div.velden-recht { display: grid; gap: 10px; }
.res-dagkeuze { display: flex; flex-wrap: wrap; gap: 8px; } .res-dagvink { display: inline-flex !important; align-items: center; gap: 4px; font-weight: 400 !important; } .res-dagvink input { width: auto !important; }
.res-momenten { display: grid; gap: 6px; margin: 6px 0; } .res-moment { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .res-moment select, .res-moment input[type=time] { width: auto; } .res-moment input:not([type]) { flex: 1 1 160px; }
.res-regels { display: grid; gap: 10px; }
/* ✨ AI-hulp (public/js/aihulp.js): kiezen, drie ideeën als kaartjes, uitwerking */
.ck-dialoog.ai-hulp { width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
.ah-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.ah-kop h2 { margin: 0; }
.ah-titel { margin: 0 0 12px; color: #6B7280; font-size: 14px; }
.ah-rij { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; align-items: start; margin: 10px 0; }
.ah-label { font-weight: 700; font-size: 14px; padding-top: 6px; }
.ah-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-chip { border: 1px solid #CBD5E1; background: transparent; color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.ah-chip.aan { background: var(--primair, var(--primair)); border-color: var(--primair, var(--primair)); color: #fff; }
.ah-eigen { flex: 1 1 160px; min-width: 120px; }
.ah-vrij { display: grid; gap: 6px; margin: 12px 0; }
.ah-vrij textarea { width: 100%; box-sizing: border-box; }
.ah-weet { margin: 8px 0; font-size: 13px; color: #6B7280; }
.ah-weet summary { cursor: pointer; list-style: none; }
.ah-weet summary::-webkit-details-marker { display: none; }
.ah-weet summary::after { content: " ▾"; color: #9AA5B1; }
.ah-weet:not([open]) summary::after { content: " ▸"; }
.ah-weet ul { margin: 6px 0 0; padding-left: 18px; }
.ah-privacy { margin: 4px 0 0; font-size: 12px; color: #6B7280; }
.ah-vraag { margin: 6px 0 0; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45;
  background: #F6F8FA; border: 1px solid #E3E8EE; border-radius: 8px; padding: 8px 10px; color: #374151; }
.ah-knoppen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.ah-bezig { padding: 18px 8px 26px; text-align: center; font-size: 15px; }
.ah-bezig p { margin: 6px 0 0; }
/* 🧭 Nadenken: het kompas zoekt (zelfde beweging als op Niet gevonden), het denkwolkje knippert om de beurt. */
.ah-denk { width: 150px; height: 128px; display: block; margin: 0 auto; }
.ah-denk .ah-rand { fill: var(--primair, var(--primair)); }
.ah-denk .ah-wijzer { fill: none; stroke: #fff; stroke-width: 4; }
.ah-denk .ah-wit { fill: #fff; }
.ah-denk .ah-rood { fill: var(--accent, var(--accent)); }
.ah-denk .ah-as { fill: var(--primair, var(--primair)); stroke: #fff; stroke-width: 2; }
.ah-denk .ah-naald { transform-box: view-box; transform-origin: 60px 66px; animation: kb-zoeken 3.6s ease-in-out infinite; }
.ah-denk .ah-stip { fill: var(--primair-licht, var(--primair-licht)); opacity: .25; animation: ah-stip 1.5s ease-in-out infinite; }
.ah-denk .s2 { animation-delay: .25s; } .ah-denk .s3 { animation-delay: .5s; }
@keyframes ah-stip { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ah-denk .ah-naald, .ah-denk .ah-stip { animation: none; } .ah-denk .ah-stip { opacity: .7; } }
.ah-bieb { align-self: flex-start; font-size: 12px; }
/* 💭 Waar hij aan denkt: een zinnetje dat zacht in- en uitfadet. */
.ah-gedachte { min-height: 1.4em; margin-top: 10px !important; color: #6B7280; font-size: 14px; font-style: italic; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.ah-gedachte.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ah-gedachte { transition: none; transform: none; } }
.ah-ideeen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ah-idee { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #DEE2E6; border-radius: 14px; }
.ah-idee h3 { margin: 0; font-size: 16px; }
.ah-idee p { margin: 0; font-size: 14px; }
.ah-klein { color: #6B7280; font-size: 13px !important; }
.ah-idee-knoppen { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.ah-uitwerking { max-height: 55vh; overflow: auto; padding: 4px 14px; border: 1px solid #DEE2E6; border-radius: 12px; font-size: 14px; }
.ah-uitwerking table { border-collapse: collapse; width: 100%; }
.ah-uitwerking td, .ah-uitwerking th { border: 1px solid #DEE2E6; padding: 4px 6px; text-align: left; vertical-align: top; }
@media (max-width: 560px) { .ah-rij { grid-template-columns: minmax(0, 1fr); } .ah-label { padding-top: 0; } }
html.donker .ah-chip { border-color: #33444F; }
html.donker .ah-vraag { background: #17232B; border-color: #2A3B46; color: #D5DEE5; }
html.donker .ah-idee, html.donker .ah-uitwerking, html.donker .ah-uitwerking td, html.donker .ah-uitwerking th { border-color: #2A3B46; }

/* 🥚 Verrassingen (public/js/verrassing.js): een laag boven alles waar je doorheen klikt. */
.vr-laag { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2000; }
.vr-deeltje { position: absolute; top: -40px; line-height: 1; animation: vr-val linear forwards; will-change: transform; }
.vr-deeltje.snipper { width: 9px; height: 14px; border-radius: 2px; }
.vr-deeltje.omhoog { top: auto; bottom: -40px; animation-name: vr-stijg; }
@keyframes vr-val { from { transform: translate(0, 0) rotate(0); opacity: 1; } 85% { opacity: 1; } to { transform: translate(var(--zij, 0), 110vh) rotate(var(--draai, 180deg)); opacity: 0; } }
@keyframes vr-stijg { from { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translate(var(--zij, 0), -70vh) scale(1.2); opacity: 0; } }
.vr-groot { position: absolute; left: 50%; top: 42%; font-size: 120px; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .25)); }
.vr-groot.draai { animation: vr-draai 3s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes vr-draai { 0% { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1) rotate(1080deg); opacity: 1; }
  85% { transform: translate(-50%, -50%) scale(1) rotate(1065deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(1080deg); opacity: 0; } }
.vr-vleermuis { position: absolute; left: -60px; top: 30%; font-size: 44px; animation: vr-vlieg 6s ease-in-out forwards; }
@keyframes vr-vlieg { 0% { transform: translate(0, 0); } 25% { transform: translate(30vw, -12vh) rotate(-8deg); } 50% { transform: translate(55vw, 6vh) rotate(6deg); }
  75% { transform: translate(80vw, -10vh) rotate(-6deg); } 100% { transform: translate(110vw, 0); } }
.vr-glim { animation: vr-glim 1.2s ease-in-out 3; }
@keyframes vr-glim { 50% { box-shadow: 0 0 0 6px rgba(255, 212, 59, .55); transform: scale(1.05); } }
.vr-uil { opacity: .85; white-space: nowrap; }
.vr-kop-om { display: inline-block; animation: vr-om 2.6s ease-in-out; }
@keyframes vr-om { 20%, 80% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .vr-laag { display: none; } .vr-kop-om, .vr-glim { animation: none !important; } }
.vr-gevonden { display: flex; flex-wrap: wrap; gap: 6px; }
/* 🏆 Ranglijst op de 🥚-kaart. */
.vr-ranglijst { list-style: none; margin: 12px 0 6px; padding: 0; display: grid; gap: 6px; }
.vr-ranglijst li { display: grid; grid-template-columns: 28px auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(0, 137, 192, .06); }
.vr-ranglijst li.ik { outline: 2px solid var(--primair, var(--primair)); }
.vr-ranglijst .vr-medaille { font-size: 22px; text-align: center; }
.vr-ranglijst .vr-aantal { font-weight: 700; white-space: nowrap; }
.vr-mijnplek { margin: 4px 0 8px; }
.vr-verbergen { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #6B7280; }
.vr-verbergen input { width: auto; margin: 0; }
html.donker .vr-ranglijst li { background: rgba(0, 153, 214, .12); }
html.donker .vr-verbergen { color: #9AA9B4; }

/* 🗓️ Dienstenrooster (public/js/diensten.js) */
.dienst-dag { margin: 14px 0 6px; font-size: 14px; text-transform: capitalize; color: #6B7280; }
.dienst { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 12px; margin-bottom: 6px; }
.dienst.ik { border-color: var(--primair, var(--primair)); box-shadow: inset 3px 0 0 var(--primair, var(--primair)); }
.dienst.vol:not(.ik) { opacity: .8; }
.dienst-tekst { display: grid; gap: 3px; min-width: 0; }
.dienst-tekst small { color: #6B7280; }
.dienst-uitleg { font-style: italic; }
.dienst-plekken { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.dienst-mens { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #EEF6FB; color: #0B4A66; }
.dienst-mens.ik { background: var(--primair, var(--primair)); color: #fff; font-weight: 700; }
.dienst-mens.ruil { background: #FFF4E6; color: #8A4B08; }
.dienst-mens.leeg { background: transparent; border: 1px dashed #CBD5E1; color: #9AA5B1; }
.dienst-acties { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.gevaar-tekst { color: #C92A2A; }
.dienst-nieuw { margin-top: 12px; }
.dienst-nieuw summary { cursor: pointer; font-weight: 700; }
.dienst-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px 12px; margin: 10px 0; }
.dienst-form label { display: grid; gap: 4px; font-size: 14px; }
.dienst-form .vinkje-rij { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; }
.dienst-form .vinkje-rij input { width: auto; }
@media (max-width: 560px) { .dienst { grid-template-columns: 1fr; } .dienst-acties { justify-content: flex-start; } }
html.donker .dienst { border-color: #26343D; }
html.donker .dienst-tekst small, html.donker .dienst-dag { color: #9AA9B4; }
html.donker .dienst-mens { background: color-mix(in srgb, var(--primair) 25%, #17232B); color: #CFE8F5; }
html.donker .dienst-mens.ik { background: var(--primair, var(--primair)); color: #fff; }
html.donker .dienst-mens.ruil { background: #3A2A12; color: #FFD8A8; }
html.donker .dienst-mens.leeg { border-color: #33444F; color: #7F8E99; }
html.donker .gevaar-tekst { color: #FF8787; }

/* 🚚 Verhuizen (0.78.0): het lijstje na de verhuizing en de uitslag van de zelftest */
.knoppen-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.verhuis-lijst { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.verhuis-lijst li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid #E5E7EB; }
.verhuis-lijst li.gedaan { opacity: .7; }
.verhuis-tekst { display: grid; gap: 2px; }
.verhuis-tekst small { color: #6B7280; }
.verhuis-actie { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.verhuis-vink { font-size: 20px; }
@media (max-width: 560px) { .verhuis-lijst li { grid-template-columns: auto 1fr; } .verhuis-actie { grid-column: 1 / -1; justify-content: flex-start; } }
html.donker .verhuis-lijst li { border-color: #26343D; }
html.donker .verhuis-tekst small { color: #9AA9B4; }