: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"); }
/* π³π± Vlaggen ook op Windows (0.121.3): Windows heeft geen vlag-emoji en toont π³π± als de letters NL. Dit kleine lettertype
(Twemoji Country Flags, zelf gehost, MIT + CC BY 4.0, zie fonts/LICENSE-TwemojiCountryFlags.md) tekent alleen de vlaggen;
alle andere tekens en emoji komen gewoon uit de eigen letters. Het staat vooraan in elke font-stack. */
@font-face { font-family: "Twemoji Country Flags"; src: url(/fonts/TwemojiCountryFlags.woff2) format("woff2"); font-display: swap;
unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; }
/* βΏ Tekst in de clubkleuren: licht iets donkerder, donker iets lichter dan de kleur zelf, zodat hij 4,5:1 contrast haalt
(ook op de lichtblauwe en lichtroze vlakken). Knoppen met witte tekst gebruiken color-mix(in srgb, var(--primair) 88%, black) (primair 88% naar zwart). */
:root { --primair-tekst: color-mix(in srgb, var(--primair) 86%, black); --accent-tekst: color-mix(in srgb, var(--accent) 86%, black); }
html.donker { --primair-tekst: color-mix(in srgb, var(--primair-licht) 70%, white); --accent-tekst: color-mix(in srgb, var(--accent) 74%, white); }
/* Altijd ruimte voor de scrollbalk, zodat pagina's niet verspringen. */
html { scrollbar-gutter: stable; overflow-y: scroll; }
body { margin: 0; font-family: "Twemoji Country Flags", Nunito, Arial, sans-serif; background: #EEF9FE; color: #313131; }
/* π± viewport-fit=cover (partials/begin.ejs): liggend op een iPhone blijft de inhoud naast de inkeping, zoals voorheen. Staand is dit 0. */
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
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: "Twemoji Country Flags", 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: 40px; min-width: 40px; padding: 0 12px; }
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: "Twemoji Country Flags", 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-tekst); 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-tekst); 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: "Twemoji Country Flags", 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: color-mix(in srgb, var(--primair) 88%, black);
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-tekst); }
.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-tekst); 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; }
/* Een stand die aandacht vraagt (bijvoorbeeld π nog geen noodblad). */
.status.waarschuwing { color: #AD5900; font-weight: 700; }
html.donker .status.waarschuwing { color: #FFC078; }
.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; }
/* Let op, maar geen fout (bijvoorbeeld β οΈ in een taak zonder opgave). */
.melding.let { background: #FFF3BF; color: #5C3D00; }
.melding.let ul { margin: 6px 0 0; padding-left: 20px; }
.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: #646B78; } /* βΏ iets donkerder dan #6B7280: 4,5:1 op het lichtblauw */
@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: color-mix(in srgb, var(--primair) 88%, black) !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 .melding.let { background: #3D3214 !important; color: #FFE8A3 !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; } }
/* π Home en π‘ Gebouw lijken op elkaar: bij Gebouw blijft de tekst staan (tot het hamburgermenu het overneemt). */
@media (min-width: 601px) and (max-width: 860px) { header .gebouw-keuze .pil-tekst { display: inline; } }
/* 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: "Twemoji Country Flags", 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-tekst); }
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; }
/* Paneel zoals de bel van het licentiebeheer: glas, kop met kleine knoppen en een rond β, rijen met een rond β ernaast. */
/* π Ruim (0.116.0): breed tot 520 px, lucht tussen de meldingen; op de telefoon zo breed als de menubalk en tot 80% van het scherm hoog. */
header .meldingen-paneel { width: min(520px, calc(100vw - 32px)); max-height: min(75vh, 640px); overflow-y: auto; overscroll-behavior: contain; padding: 12px !important; box-sizing: border-box;
background: rgba(255,255,255,.86) !important; -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255,255,255,.7) !important; }
html.donker header .meldingen-paneel { background: rgba(23,35,43,.9) !important; border-color: rgba(255,255,255,.08) !important; }
header .meldingen-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px 8px 6px; }
header .meldingen-kop b { font-size: 1rem; }
header .meldingen-kop-knoppen { display: flex; align-items: center; gap: 6px; }
header .meldingen-kop .klein { width: auto !important; min-height: 0; padding: 4px 10px !important; font-size: 12px !important; }
header .menu-paneel .meldingen-sluit, header .menu-paneel .melding-weg { flex: none; width: 30px !important; height: 30px; min-height: 0; margin: 0; padding: 0 !important; display: grid; place-items: center;
border: 0; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; color: #9AA5B1 !important; font-size: 14px; cursor: pointer; }
header .menu-paneel .meldingen-sluit:hover, header .menu-paneel .meldingen-sluit:focus-visible { background: rgba(0,137,192,.12) !important; color: var(--primair-tekst) !important; }
.melding-regel { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.melding-regel .melding-link { flex: 1; min-width: 0; display: grid !important; gap: 3px; font-weight: 400 !important; padding: 10px 12px; color: inherit; text-decoration: none; border-radius: 10px; transition: background-color .2s ease;
line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
header .meldingen-paneel .melding-regel { border-radius: 0; }
header .meldingen-paneel .melding-regel + .melding-regel { margin-top: 4px; border-top: 1px solid rgba(127,127,127,.14); padding-top: 4px; }
/* β Werkt nu / Nog niet goed (feedback.js) naast elkaar, niet als volle regels zoals de rest van het menu. */
header .menu-paneel .fb-reactie button { display: inline-flex; width: auto !important; flex: 0 0 auto; align-items: center; padding: 6px 12px; border: 1px solid rgba(127,127,127,.3); border-radius: 999px; font-size: 13px; }
header .menu-paneel .fb-reactie .fb-nee-tekst { flex: 1 1 180px; min-width: 0; }
.melding-regel .melding-link:hover, .melding-regel .melding-link:focus-visible { background: rgba(0,137,192,.12); }
.melding-regel small { color: #6B7280; font-size: 11px; }
html.donker .melding-regel small { color: #9AA5B1; }
.melding-regel.nieuw .melding-link { font-weight: 700 !important; }
/* Meer regels (basis.js toonMeldingen): "Het ging over: β¦" (π§ͺ feedback) als citaat, afgekapt op 2 regels tot je erop tikt. */
.melding-regel .melding-verder { font-weight: 400; }
.melding-regel .melding-citaat { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 2px 0;
padding: 4px 8px; border-left: 3px solid var(--primair); border-radius: 0 6px 6px 0; background: rgba(0,137,192,.07); color: #374151; font-size: 13px; font-weight: 400; font-style: normal; }
.melding-regel .melding-citaat b { font-weight: 600; }
.melding-regel .melding-citaat.afgekapt { cursor: zoom-in; }
.melding-regel .melding-citaat.open { display: block; -webkit-line-clamp: unset; line-clamp: none; }
html.donker .melding-regel .melding-citaat { border-left-color: color-mix(in srgb, var(--primair-licht) 70%, white); background: rgba(79,195,247,.09); color: #D5DEE6; }
.melding-regel.nieuw .melding-link > span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.melding-regel .melding-weg { flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #9AA5B1; font-size: 14px; cursor: pointer; }
.melding-regel .melding-weg:hover, .melding-regel .melding-weg:focus-visible { background: rgba(224,49,49,.12) !important; color: #E03131 !important; }
header .meldingen-alle { text-align: center !important; color: var(--primair-tekst) !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 .topbalk { position: relative; } header .meldingen-keuze { position: static; }
header .meldingen-paneel { left: 0; right: 0; width: auto; max-height: 80dvh; }
}
/* 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; }
/* β Gelezen: rechts in de balk, klein en rustig. */
.mededeling:has(> .mededeling-weg) { padding-right: 48px; padding-left: 48px; }
.mededeling > .mededeling-weg { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: inherit; font: inherit; font-size: 14px; line-height: 30px; cursor: pointer; }
.mededeling > .mededeling-weg:hover { background: rgba(255,255,255,.4); }
.mededeling > .mededeling-weg:disabled { opacity: .5; cursor: wait; }
@media print { .mededeling-weg { display: none; } }
.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.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: "Twemoji Country Flags", Poppins, Arial, sans-serif; font-size: 14pt; color: var(--primair-tekst); }
.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-tekst); }
.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; }
/* Knoppenrij van beheer.js (ook buiten het kampdocument, bijvoorbeeld π Licentie): vaste ruimte tussen de knoppen. */
.kd-knoppen { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.kd-knoppen.links { justify-content: flex-start; margin-top: 8px; }
.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-tekst); cursor: pointer; }
.weergave-keuze button[aria-pressed="true"] { background: color-mix(in srgb, var(--primair) 88%, black); border-color: color-mix(in srgb, var(--primair) 88%, black); 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: color-mix(in srgb, var(--primair) 88%, black) !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: #646B78; 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: #646B78; 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); outline: 3px solid var(--primair); outline-offset: -3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--primair); outline-offset: 2px; }
.agenda-item.klikbaar:focus-visible, .pl-rij.klikbaar:focus-visible, .klikbaar:focus-visible { outline: 3px solid var(--primair); outline-offset: -3px; }
/* 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[hidden], .mooi-groep[hidden] { display: none; }
/* π Zoeken in een lange keuzelijst, en de kopjes van de groepen. */
.mooi-paneel.met-zoek { max-height: 380px; }
.mooi-zoek { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 4px; padding: 10px 12px; border: 0; border-bottom: 1px solid #E5E7EB; border-radius: 12px 12px 0 0; font: inherit; font-size: 14px; background: #fff; outline: none; }
.mooi-groep { padding: 8px 12px 2px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-tekst, #C2188B); }
html.donker .mooi-zoek { background: #17232B; color: #E3EAF0; border-color: #26343D; }
.mooi-optie.aan { background: color-mix(in srgb, var(--primair-licht) 10%, white); color: var(--primair-tekst); 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-tekst); }
.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: #AD5900; }
html.donker .bestuur-opties { background: #3D3110; border-color: #5C4A12; }
/* Glaseffect (html.glas, standaard aan): zachte kleurvlekken achter doorschijnende kaarten en panelen. */
/* π± Op html, één keer en meeschuivend (0.121.2): iOS kent background-attachment: fixed niet en tekende het verloop van body dan ten
opzichte van de pagina, herhaald; onder een korte pagina (en bij het doorveren) begon het patroon opnieuw, met een harde schuine band
onder de voettekst. Nu is html minstens zo hoog als het venster, staan de vlekken bovenin op een vaste afstand (vh) en de onderste
tegen de onderkant van de pagina, en loopt de kleur door tot onderaan. */
html.glas { min-height: 100%; min-height: 100dvh; background-color: #EAF6FC; background-repeat: no-repeat; background-attachment: scroll;
background-image: radial-gradient(42vw 42vw at 8% 18vh, rgba(0,174,239,.30), transparent 62%),
radial-gradient(36vw 36vw at 92% 28vh, rgba(236,0,140,.16), transparent 62%),
radial-gradient(48vw 48vw at 55% 105%, rgba(0,137,192,.24), transparent 62%); }
html.glas body { background: transparent; }
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); }
/* Met het glaseffect is elke kaart een eigen laag: een open zwevend menu (functies, + dag, taken) zou onder de volgende kaart vallen. */
html.glas .kaart:has(.functie-menu[open], .taak-menu[open]) { position: relative; z-index: 60; }
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 { background-color: #0E171D;
background-image: radial-gradient(42vw 42vw at 8% 18vh, rgba(0,137,192,.22), transparent 62%),
radial-gradient(36vw 36vw at 92% 28vh, rgba(236,0,140,.12), transparent 62%),
radial-gradient(48vw 48vw at 55% 105%, rgba(0,100,150,.20), transparent 62%); }
html.glas.donker body { background: transparent !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, 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-tekst); 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: #AD5900; 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; }
/* π Verhuizen (verhuizen.js, de tegel in βοΈ Instellingen): elk veld met het label erboven, de link over de volle breedte, de tijden naast elkaar. */
.verhuis-form { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.verhuis-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; }
.verhuis-label { font-weight: 700; }
.verhuis-link-rij { display: flex; gap: 8px; align-items: center; }
.verhuis-link-rij input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.verhuis-check { color: #2B8A3E; font-weight: 700; overflow-wrap: anywhere; }
.verhuis-check .verhuis-kort { color: #6B7280; font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html.donker .verhuis-check { color: #8CE99A; }
html.donker .verhuis-check .verhuis-kort { color: #9AA8B4; }
.verhuis-tijden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.verhuis-tijden input { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .verhuis-tijden { grid-template-columns: 1fr; } }
.verhuis-form .veld-fout { color: #C92A2A; }
html.donker .verhuis-form .veld-fout { color: #FF8787; }
.verhuis-knoppen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.verhuis-stand { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; font-size: 14px; }
.verhuis-stand dt { font-weight: 700; }
.verhuis-stand dd { margin: 0; overflow-wrap: anywhere; }
.verhuis-uitleg { margin-top: 12px; }
.verhuis-acties { align-items: stretch; }
@media (max-width: 600px) { .verhuis-acties > .knop, .verhuis-knoppen > .knop { flex: 1 1 100%; } }
/* Een rode knop (afblazen, weghalen) buiten een vraagvenster, even hoog als de andere knoppen. */
.knop.gevaar { background: #E03131; border-color: #E03131; color: #fff; }
.knop.gevaar:hover { background: #C92A2A; }
html.donker .knop.gevaar { background: #C92A2A; color: #fff; }
.verhuis-uitleg summary { cursor: pointer; font-weight: 700; }
/* π₯ Naar wie (uitnodigdoel.js): knopjes Alle leiding, Bestuur en per groep; het aantal met op aanvraag de namen. */
.doel-keuze { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.doel-kop { font-size: 14px; }
.doel-knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.doel-knop.aan { background: color-mix(in srgb, var(--primair) 88%, black); color: #fff; border-color: transparent; }
html.donker .doel-knop.aan { background: color-mix(in srgb, var(--primair) 88%, black) !important; color: #fff !important; border-color: transparent !important; }
.doel-uitleg { color: #6B7280; font-size: 13px; }
html.donker .doel-uitleg { color: #9AA8B4; }
.uitnodig-bereik .doel-dubbel { color: #6B7280; }
html.donker .uitnodig-bereik .doel-dubbel { color: #9AA8B4; }
.uitnodig-bereik .doel-leeg { color: #AD5900; font-weight: 700; }
html.donker .uitnodig-bereik .doel-leeg { color: #FFB46B; }
.doel-wie { margin-top: 4px; }
.doel-wie summary { cursor: pointer; color: var(--primair-tekst); font-weight: 700; width: max-content; }
.doel-wie p { margin: 4px 0 0; }
.opgave-doel { margin: 0 0 10px; }
/* 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); }
/* πͺ Venster met titel en eigen inhoud (vraagVenster in basis.js): verplaatsen, afgelasten. */
.ck-venster-titel { margin: 0 0 10px; font-size: 19px; }
.ck-venster .vv-tekst { margin: 0 0 8px; line-height: 1.5; }
.ck-venster .vv-vink { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid rgba(0, 0, 0, .07); cursor: pointer; }
.ck-venster .vv-vink input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.ck-venster .vv-vink small { display: block; color: #6B7280; font-size: 13px; }
.ck-venster .vv-vink.uit { opacity: .55; cursor: default; }
.ck-venster .vv-let { background: #FFF8E1; color: #5C4400; border-radius: 10px; padding: 9px 12px; font-size: 14px; margin: 10px 0; }
.ck-venster textarea { width: 100%; box-sizing: border-box; min-height: 64px; margin: 6px 0 14px; font: inherit; }
html.donker .ck-venster .vv-vink { border-color: rgba(255, 255, 255, .08); } html.donker .ck-venster .vv-vink small { color: #9AA9B4; }
html.donker .ck-venster .vv-let { background: #3A2E12; color: #FFE3A3; }
/* π₯οΈ Op een groot scherm ruimer (breder, meer lucht, iets grotere letter); op de telefoon zoals hierboven. */
@media (min-width: 900px) {
.ck-dialoog { width: min(600px, calc(100vw - 64px)); padding: 28px 32px 24px; }
.ck-dialoog-tekst { font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.ck-dialoog-knoppen { gap: 10px; }
}
.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: #F142AA; color: var(--accent-tekst); }
html.donker main.bingo-main th { color: #fff; }
/* βοΈ Eenvoudige opmaakbalk (opmaakbalk.js { eenvoudig }: notities van een avond, π§ͺ Feedback): vast boven het tekstvak, zoals de
balk van de draaiboek-editor (editor.css): platte knoppen in groepen met scheidingsstreepjes; het tekstvak sluit er direct op aan. */
.opmaak-balk { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin: 8px 0 0; padding: 5px 6px;
background: #F8F9FA; border: 1px solid #DEE2E6; border-bottom: 0; border-radius: 10px 10px 0 0; box-sizing: border-box; }
.opmaak-balk button { font: inherit; font-size: 14px; font-weight: 700; min-width: 36px; height: 34px; min-height: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 8px;
background: transparent; color: #313131; cursor: pointer; line-height: 1; }
.opmaak-balk button:hover, .opmaak-balk button:focus-visible { background: color-mix(in srgb, var(--primair-licht) 10%, white); color: var(--primair-tekst); border-color: color-mix(in srgb, var(--primair-licht) 20%, white); }
.opmaak-balk .scheiding { width: 1px; height: 20px; background: #DEE2E6; margin: 0 4px; }
.opmaak-balk + textarea { margin-top: 0 !important; border-top-left-radius: 0; border-top-right-radius: 0; }
html.donker .opmaak-balk { background: #17232B; border-color: #33444F; }
html.donker .opmaak-balk button { color: #E3EAF0; }
html.donker .opmaak-balk button:hover, html.donker .opmaak-balk button:focus-visible { background: color-mix(in srgb, var(--primair) 25%, #17232B); color: color-mix(in srgb, var(--primair-licht) 70%, white); border-color: #2F5568; }
html.donker .opmaak-balk .scheiding { background: #33444F; }
@media (max-width: 600px) { .opmaak-balk button { min-width: 40px; height: 38px; } }
/* Mededelingen: opmaakbalk, voorbeeld en eerdere mededelingen. */
.mededeling-balk { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; } /* ruimte tussen de knoppen en het tekstvak */
.mededeling-balk .klein { min-width: 36px; }
/* Alle knoppen in de balk even hoog en op één lijn, ook de uitklapmenu's (de summary staat dan niet op een tekstregel). */
.mededeling-balk > .klein, .mededeling-balk .emoji-menu > summary.klein { box-sizing: border-box; height: 30px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; line-height: 1; }
.mededeling-balk .emoji-menu { display: flex; }
/* π¨ 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-tekst); font-size: 13px; line-height: normal; }
html.donker .mededeling-balk .emoji-menu > summary.klein { background: transparent !important; border-color: #33444F !important; color: var(--primair-tekst) !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-tekst); 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; }
/* π Een invulveld dat pas bij het versturen ingevuld wordt ({datum} enz.): een labeltje in het voorbeeld. */
.mm-veld { display: inline-block; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--primair-licht) 10%, white); color: var(--primair-tekst); font-size: .85em; font-weight: 700; line-height: 1.5; }
html.donker .mm-veld { background: color-mix(in srgb, var(--primair) 25%, #17232B); color: color-mix(in srgb, var(--primair-licht) 40%, white); }
.mm-magenta { color: var(--accent-tekst); } .mm-blauw { color: var(--primair-tekst); } .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-tekst); 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-tekst); }
.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-tekst); }
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; }
/* π Rijbewijs op het eigen profiel (profiel.js rijbewijsVeld): zelfde raster als de andere gegevens (naam links, keuzes rechts), per soort voertuig een rij knopjes. */
.velden-recht .delen-rij { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: start; column-gap: 12px; row-gap: 2px; }
.velden-recht .delen-rij > .delen-naam { padding-top: 6px; }
.velden-recht .delen-rij > .delen-keuze { grid-column: 2; justify-self: start; width: auto; margin-top: 4px; font-size: 13px; }
.rijbewijs-keuzes { display: grid; gap: 6px; min-width: 0; }
.rijbewijs-groep { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: center; column-gap: 8px; }
.rijbewijs-soort { font-size: 13px; color: #4B5563; white-space: nowrap; }
.rijbewijs-knoppen { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.rijbewijs-knoppen .klein { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; }
.rijbewijs-knoppen .klein small { font-weight: 400; font-size: 12px; color: #6B7280; }
.rijbewijs-knoppen .klein.vinkje.aan { background: #EBFBEE; color: #2B8A3E; border-color: #B2F2BB; }
.rijbewijs-knoppen .klein.vinkje.aan small { color: #2F6B3A; }
.rijbewijs-gekozen { margin: 2px 0 0; font-size: 12px; color: #6B7280; }
.rijbewijs-uitleg, .auto-rijbewijs { font-size: 12px; color: #6B7280; }
.auto-velden .auto-rijbewijs { grid-column: 1 / -1; margin: -2px 0 0 4px; }
.auto-rijbewijzen small { color: #4B5563; }
html.donker .rijbewijs-soort, html.donker .auto-rijbewijzen small { color: #CBD5E1; }
html.donker :is(.rijbewijs-knoppen .klein small, .rijbewijs-gekozen, .rijbewijs-uitleg, .auto-rijbewijs) { color: #9AA9B4; }
/* De donkere .klein krijgt met !important een doorzichtige achtergrond (zie boven); het gekozen knopje blijft groen. */
html.donker .rijbewijs-knoppen .klein.vinkje.aan { background: #1F3326 !important; color: #8CE99A; border-color: #2B5A36 !important; }
html.donker .rijbewijs-knoppen .klein.vinkje.aan small { color: #B2F2BB; }
@media (max-width: 560px) {
.velden-recht .delen-rij { grid-template-columns: minmax(0, 1fr); }
.velden-recht .delen-rij > .delen-keuze { grid-column: 1; }
.rijbewijs-groep { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
}
/* πͺͺ 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 */
#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; } }
/* β in een foutmelding (die blijft staan tot je hem wegklikt). */
.toast .toast-weg { margin-left: 12px; background: transparent; border: 0; color: inherit; font-size: 15px; cursor: pointer; padding: 0 2px; }
/* Een melding met een knop (toast(tekst, false, { actie }), zoals βΆ Ongedaan maken). */
.toast.met-actie { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; max-width: calc(100vw - 32px); box-sizing: border-box; }
.toast .toast-actie { font: inherit; font-weight: 800; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); color: #8BE0FF; padding: 7px 12px; cursor: pointer; white-space: nowrap; min-height: 0; }
.toast .toast-actie:hover, .toast .toast-actie:focus-visible { background: rgba(255,255,255,.24); }
@media (max-width: 600px) { .toast.met-actie { left: 12px; right: 12px; transform: none; justify-content: space-between; } }
/* Alleen voor schermlezers (bijvoorbeeld een aankondiging), niet in beeld. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* π Bestandsvelden (basis.js, 0.121.1): het echte veld visueel verborgen (niet display: none), ervoor een lichte knop en de naam. */
.ck-bestand { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 100%; min-width: 0; vertical-align: middle; }
.ck-bestand > input[type=file] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0);
clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; min-height: 0; }
.ck-bestand-knop { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.ck-bestand > input:focus-visible + .ck-bestand-knop { outline: 3px solid var(--primair); outline-offset: 2px; }
.ck-bestand > input:disabled + .ck-bestand-knop { opacity: .5; cursor: not-allowed; }
.ck-bestand-keuze { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.ck-bestand-naam { min-width: 0; font-size: 13px; font-weight: 400; color: #646B78; overflow-wrap: anywhere; }
.ck-bestand-naam.gekozen { color: inherit; font-weight: 700; }
.ck-bestand-weg { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #DEE2E6; border-radius: 999px; background: #fff;
color: #646B78; font: inherit; font-size: 13px; cursor: pointer; }
.ck-bestand-weg[hidden] { display: none; }
html.donker .ck-bestand-knop { background: color-mix(in srgb, var(--primair) 25%, #17232B); color: #E3EAF0; }
html.donker .ck-bestand-naam { color: #9AA5B1; }
html.donker .ck-bestand-naam.gekozen { color: #E3EAF0; }
html.donker .ck-bestand-weg { background: transparent; border-color: #33444F; color: #9AA5B1; }
/* π§ͺ Proefclub op een ontwikkelserver (PROEFGEGEVENS=1). */
/* Magenta in licht en donker, en een magenta rand om het hele scherm (ook na scrollen): hier wil je nooit denken dat het echt is. */
.proef-balk { margin: 0; padding: 7px 16px; background: repeating-linear-gradient(135deg, #C2255C 0 16px, #A61E4D 16px 32px); color: #fff; font-size: 13.5px; font-weight: 700; text-align: center; letter-spacing: .2px; }
.proef-balk::after { content: ""; position: fixed; inset: 0; border: 4px solid #E64980; pointer-events: none; z-index: 2147483000; }
@media print { .proef-balk, .proef-balk::after { 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; }
.bovenbalken .mededeling:has(> .mededeling-weg) { padding-right: 48px; padding-left: 48px; }
@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: color-mix(in srgb, var(--primair) 88%, black); border-color: color-mix(in srgb, var(--primair) 88%, black); 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 "Twemoji Country Flags", 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 "Twemoji Country Flags", 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 "Twemoji Country Flags", 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; }
/* Formulieren links (labels boven de velden), zoals overal; alleen kop en uitleg in het midden. */
.beeld-kaart label, .beeld-kaart .raster, .beeld-kaart form { text-align: left; } }
/* 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; }
/* π Een code van 6 cijfers (uit de mail of de authenticator-app): overal dezelfde stijl, ook in het licentiebeheer en de tunnel. */
input.code-veld { box-sizing: border-box; max-width: 320px; padding: 12px 14px; font-size: 1.8rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; border-radius: 12px; }
input.code-veld::placeholder { letter-spacing: .5em; }
/* π 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-onthouden { margin: 0 0 12px; }
.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: color-mix(in srgb, var(--primair) 88%, black); border-color: color-mix(in srgb, var(--primair) 88%, black); 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; box-shadow: 0 0 0 3px rgba(0, 137, 192, .18); }
.inricht-soort.aan b::after { content: " β"; color: var(--primair-tekst); }
/* π Herstelbestand: of de wachtwoorden lang genoeg en gelijk zijn. */
.wachtwoord-stand { min-height: 1.3em; font-weight: 600; }
.wachtwoord-stand.goed { color: #2F9E44; }
.wachtwoord-stand.fout { color: #C92A2A; }
.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-tekst); 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; }
/* π€ Commissies in de wizard (0.123.0): tegels met een vinkje, in drie groepjes; wat er al is, staat grijs met "bestaat al". */
.inricht-comm-kop { font-size: 15px; }
.inricht-commissies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; margin: 6px 0 4px; }
.inricht-commissie { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .12); background: #fff; cursor: pointer; min-width: 0; }
.inricht-commissie input { margin-top: 3px; flex: none; }
.inricht-commissie > span { min-width: 0; }
.inricht-commissie b { overflow-wrap: anywhere; }
.inricht-commissie small { display: block; }
.inricht-commissie:has(input:checked:not(:disabled)) { border-color: var(--primair, var(--primair)); background: rgba(0, 137, 192, .08); }
.inricht-commissie.al { cursor: default; opacity: .75; }
.inricht-commissie.eigen { align-items: center; justify-content: space-between; cursor: default; border-color: var(--primair, var(--primair)); background: rgba(0, 137, 192, .08); }
.inricht-comm-erbij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.inricht-comm-erbij input { flex: 1 1 220px; min-width: 0; }
html.donker .inricht-commissie { background: #17232B; border-color: rgba(255, 255, 255, .18); }
html.donker .inricht-commissie:has(input:checked:not(:disabled)), html.donker .inricht-commissie.eigen { border-color: var(--primair, var(--primair-licht)); background: rgba(0, 174, 239, .16); }
.inricht-groepen, .inricht-mensen { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
/* Elke rij dezelfde kolommen: ook zonder β (een bestaande groep) blijft er ruimte voor, zodat alles onder elkaar uitlijnt. */
.inricht-groep { display: grid; grid-template-columns: minmax(0, 1fr) 160px 36px; gap: 8px; align-items: center; }
.inricht-groep > button { grid-column: 3; grid-row: 1; justify-self: 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 en Instellingen van een groep (soortenBeheer in basis.js). */
.soorten-raster { display: grid; gap: 6px; margin: 6px 0; }
.soort-rij { display: grid; grid-template-columns: auto 3.5rem minmax(0, 1fr) 9.5rem 14rem 2.4rem; gap: 8px; align-items: center; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, .06); }
.soort-rij.kop { border: 0; padding: 0; font-size: 12px; font-weight: 700; color: #6B7280; }
.soort-rij .s-emoji { text-align: center; }
.soort-rij .s-naamcel { display: flex; align-items: center; gap: 6px; min-width: 0; }
.soort-rij .s-naamcel input { flex: 1; min-width: 0; }
.soort-rij .s-label { font-size: 11px; font-weight: 700; background: #FFF4D6; color: #8A5A00; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.soort-rij .s-vast { font-size: 13px; color: #6B7280; }
.soort-rij select { width: 100%; min-width: 0; }
.soort-rij .s-weg { padding: 4px 8px; }
html.donker .soort-rij { border-color: rgba(255, 255, 255, .08); }
html.donker .soort-rij .s-label { background: #3A2E12; color: #FFE3A3; }
@media (max-width: 640px) {
.soort-rij { grid-template-columns: auto 3rem minmax(0, 1fr) 2.4rem; row-gap: 6px; }
.soort-rij .s-werkt, .soort-rij .s-wie { grid-column: 2 / 5; }
.soort-rij .s-weg { grid-column: 4; grid-row: 1; }
.soort-rij.kop { display: none; }
}
/* πͺ 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: #AD5900; }
.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; }
/* π§ Eerste keer: "Zo begin je" op Home (views/home.ejs, src/rondleiding.ts). */
.rondleiding-kaart { border-left: 6px solid var(--accent, var(--accent)); margin-bottom: 16px; }
.rondleiding-kaart h2 { margin: 0 0 4px; }
.rondleiding-stappen { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.rondleiding-stappen a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #DEE2E6; border-radius: 10px; color: inherit; text-decoration: none; height: 100%; box-sizing: border-box; }
.rondleiding-stappen a:hover, .rondleiding-stappen a:focus-visible { border-color: var(--accent, var(--accent)); }
.rondleiding-stappen b { display: block; }
.rondleiding-stappen small { display: block; color: #646B78; }
html.donker .rondleiding-stappen a { border-color: #2E3D47; }
html.donker .rondleiding-stappen small { color: #9AA5B1; }
.rl-icoon { font-size: 1.4em; line-height: 1; }
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-soort.aan { border-color: var(--primair, var(--primair-licht)); background: rgba(0, 174, 239, .16); box-shadow: 0 0 0 3px rgba(0, 174, 239, .25); }
html.donker .inricht-soort.aan b::after { color: #7DD3FC; }
html.donker .wachtwoord-stand.goed { color: #69DB7C; }
html.donker .wachtwoord-stand.fout { color: #FF8787; }
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 36px; }
}
/* π¨ 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, .sf-golfbaan .sf-heuvel { fill: #B2DFAE; } html.donker .sf-algemeen .sf-heuvel, html.donker .sf-golfbaan .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, .sf-gras-fiets, .sf-gras-kart, .sf-gras-auto, .sf-gras-korfbal, .sf-gras-paard, .sf-gras-water, .sf-gras-golfbaan { fill: #BFE3B4; }
.sf-gras-waterscouting { fill: #2F7A48; } .sf-gras-handbal, .sf-gras-vechtsport { fill: rgba(0, 137, 192, .10); } .sf-gras-volleybal { fill: #F3E3B5; }
html.donker .sf-gras-golfbaan, html.donker .sf-gras-fiets, html.donker .sf-gras-kart, html.donker .sf-gras-auto, html.donker .sf-gras-korfbal, html.donker .sf-gras-paard, html.donker .sf-gras-water, 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); } }
/* β³ Golfbaan: fairway met gemaaide banen, de green, een bunker, het golfkarretje en de bal die van de tee in de hole rolt. */
.sf-gras-golfbaan { fill: #A6D894 !important; }
.sf-fairway path { fill: #74BE63; } .sf-fairway .sf-maaibaan { fill: none; stroke: #9DDB8C; stroke-width: 14; stroke-linecap: round; }
.sf-green { fill: #95DC84; } .sf-greenrand { fill: none; stroke: #fff; stroke-width: 1.4; opacity: .5; } .sf-hole { fill: #1B2A1F; }
.sf-bunker path:first-child { fill: #EADBB0; } .sf-hark { fill: none; stroke: #CDB880; stroke-width: 1; stroke-linecap: round; }
.sf-karbak { fill: #F8F9FA; stroke: #ADB5BD; stroke-width: 1.2; } .sf-karstang { stroke: #868E96; stroke-width: 2; stroke-linecap: round; }
.sf-kardak { fill: var(--primair, var(--primair)); } .sf-golftas { fill: var(--accent, var(--accent)); } .sf-tasclubs { stroke: #495057; stroke-width: 1.6; stroke-linecap: round; }
.sf-karwiel { fill: #343A40; } .sf-karnaaf { fill: #ADB5BD; }
.sf-golfbal, .sf-golfbal-stil { fill: #fff; stroke: #ADB5BD; stroke-width: 1; }
.sf-golfbal { animation: sf-golfbal 3.4s ease-in-out infinite; }
@keyframes sf-golfbal { 0%, 12% { transform: translate(0, 0); opacity: 1; } 48% { transform: translate(92px, -98px); } 78% { transform: translate(166px, -40px); } 88% { transform: translate(178px, -42px); opacity: 1; } 94%, 100% { transform: translate(178px, -42px); opacity: 0; } }
html.donker .sf-fairway, html.donker .sf-green { opacity: .55; } html.donker .sf-bunker path:first-child { fill: #8E8466; } html.donker .sf-karbak { fill: #CED4DA; }
.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 "Twemoji Country Flags", 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)); }
/* ποΈ Publiek (sfeer-illustratie.ejs: tribune, zaal), reclameborden, scheidsrechtersstoel, bankje. */
.sf-tribune { fill: #DCE5EE; } .sf-tribune-rij { stroke: #C3D1DE; stroke-width: 2; }
html.donker .sf-tribune { fill: #2A3A48; } html.donker .sf-tribune-rij { stroke: #3B4F61; }
.sf-zaal { opacity: .92; }
.sf-wip { animation: sf-wip .9s ease-in-out infinite alternate; }
@keyframes sf-wip { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.sf-bord-p { fill: var(--primair, var(--primair)); } .sf-bord-a { fill: var(--accent, var(--accent)); } .sf-bord-g { fill: #F2A900; }
.sf-stoel-poot { fill: none; stroke: #6B7280; stroke-width: 3; stroke-linecap: round; } .sf-stoel-zit { fill: #8D6E63; }
.sf-bank rect { fill: #8D6E63; } .sf-bank path { stroke: #6B4F3A; stroke-width: 3; stroke-linecap: round; }
/* π΄ Fietsen, ποΈ karting en π auto (sfeer-illustratie.ejs). */
.sf-weg path:first-child { fill: #ADB5BD; } .sf-weglijn { fill: none; stroke: #fff; stroke-width: 2.4; stroke-dasharray: 12 10; }
.sf-wiel { fill: none; stroke: #313131; stroke-width: 3; } .sf-spaken path { stroke: #868E96; stroke-width: 1; } .sf-spaken { transform-origin: 0 0; animation: sf-rond 1.2s linear infinite; }
.sf-zadel, .sf-stuur { fill: none; stroke: #313131; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sf-wiebel { animation: sf-wiebel 1.6s ease-in-out infinite; } .sf-wiebel-b { animation-delay: -.7s; }
@keyframes sf-wiebel { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.sf-rol { animation: sf-rolweg 3s ease-in-out infinite alternate; } .sf-rol-wiel { animation: sf-rond 1.4s linear infinite; }
@keyframes sf-rolweg { from { transform: translate(380px, 258px); } to { transform: translate(400px, 262px); } }
.sf-stuurbuis { stroke: #868E96; stroke-width: 7; stroke-linecap: round; } .sf-handvat { stroke: #313131; stroke-width: 8; stroke-linecap: round; }
.sf-belkap { fill: #CED4DA; stroke: #868E96; stroke-width: 2; } .sf-belvoet { fill: #868E96; } .sf-belknop { fill: #868E96; }
.sf-belhendel path { stroke: var(--accent, var(--accent)); stroke-width: 4; stroke-linecap: round; } .sf-belhendel circle { fill: var(--accent, var(--accent)); }
.sf-belhendel { transform-origin: 18px 24px; animation: sf-tring 2.4s ease-in-out infinite; } @keyframes sf-tring { 0%, 70%, 100% { transform: rotate(0); } 78%, 92% { transform: rotate(-22deg); } 85% { transform: rotate(6deg); } }
.sf-geluid path { fill: none; stroke: var(--accent, var(--accent)); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: sf-geluid 2.4s ease-out infinite; }
@keyframes sf-geluid { 0%, 72% { opacity: 0; } 82% { opacity: .8; } 100% { opacity: 0; } }
.sf-kwijt .sf-bel { transform-origin: 0 14px; animation: sf-slinger-wild .3s ease-in-out infinite alternate; } .sf-kwijt .sf-belhendel { animation-duration: .6s; } .sf-kwijt .sf-geluid path { animation-duration: .6s; }
.sf-kartbaan path:first-child, .sf-circuit path:first-child { fill: #868E96; } .sf-kartbaan .sf-lijn, .sf-circuit .sf-lijn { fill: none; stroke: #fff; stroke-width: 2; opacity: .85; }
.sf-curb-w { fill: none; stroke: #fff; stroke-width: 7; } .sf-curb-r { fill: none; stroke: #FA5252; stroke-width: 7; stroke-dasharray: 8 8; }
.sf-finishlijn { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 3 3; }
.sf-banden rect { fill: #212529; } .sf-bandstreep { stroke: #fff; stroke-width: 2; }
.sf-sporen { fill: none; stroke: #343A40; stroke-width: 3; opacity: .45; stroke-linecap: round; }
.sf-chassis { fill: none; stroke: #343A40; stroke-width: 3; stroke-linecap: round; } .sf-kartwiel { fill: #212529; }
.sf-autowiel { fill: #212529; } .sf-velg { fill: #ADB5BD; } .sf-startnummer { font: 800 9px "Twemoji Country Flags", Poppins, Nunito, sans-serif; fill: #313131; }
.sf-snelheid { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; animation: sf-snel .6s linear infinite; }
@keyframes sf-snel { from { transform: translateX(0); opacity: .8; } to { transform: translateX(-10px); opacity: .2; } }
.sf-race { animation: sf-wiebel .35s ease-in-out infinite; }
.sf-pionnen path:first-child { fill: #FD7E14; } .sf-pion-streep { stroke: #fff; stroke-width: 2.4; }
.sf-lamp { fill: #495057; } .sf-lamp-1 { animation: sf-start1 5s infinite; } .sf-lamp-2 { animation: sf-start2 5s infinite; } .sf-lamp-3 { animation: sf-start3 5s infinite; } .sf-lamp-4 { animation: sf-start4 5s infinite; }
@keyframes sf-start1 { 0%, 8% { fill: #495057; } 10%, 58% { fill: #FA5252; } 60%, 88% { fill: #40C057; } 90%, 100% { fill: #495057; } }
@keyframes sf-start2 { 0%, 20% { fill: #495057; } 22%, 58% { fill: #FA5252; } 60%, 88% { fill: #40C057; } 90%, 100% { fill: #495057; } }
@keyframes sf-start3 { 0%, 32% { fill: #495057; } 34%, 58% { fill: #FA5252; } 60%, 88% { fill: #40C057; } 90%, 100% { fill: #495057; } }
@keyframes sf-start4 { 0%, 44% { fill: #495057; } 46%, 58% { fill: #FA5252; } 60%, 88% { fill: #40C057; } 90%, 100% { fill: #495057; } }
.sf-kwijt .sf-lamp { animation: sf-knipper .8s steps(2) infinite; } @keyframes sf-knipper { from { fill: #F59F00; } to { fill: #495057; } }
.sf-rodezone { fill: none; stroke: #FA5252; stroke-width: 6; }
.sf-kmu { font: 700 11px "Twemoji Country Flags", Nunito, sans-serif; fill: #6B7280; }
.sf-gas path { stroke: var(--accent, var(--accent)); stroke-width: 4; stroke-linecap: round; } .sf-gas { transform-origin: 0 0; animation: sf-gas 4s ease-in-out infinite alternate; }
@keyframes sf-gas { from { transform: rotate(-110deg); } to { transform: rotate(95deg); } }
.sf-kwijt .sf-gas { animation: sf-rond .8s linear infinite; }
html.donker .sf-kmu { fill: #CBD5E1; }
/* π₯
Korfbal, π€Ύ handbal, π΄ paard, β΅ water, π₯ vechtsport, π toneel, πΆ waterscouting (sfeer-illustratie.ejs). */
.sf-korf { fill: #FFD43B; stroke: #F59F00; stroke-width: 1.5; } .sf-korfstreep { stroke: #F59F00; stroke-width: 2; } .sf-korfbal-bal { fill: #fff; stroke: #F59F00; stroke-width: 2; }
.sf-doelpaal { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: round; } .sf-doelpaal-r { fill: none; stroke: #FA5252; stroke-width: 5; stroke-dasharray: 8 8; stroke-linejoin: round; }
.sf-handbal-bal { fill: #4DABF7; stroke: #1C7ED6; stroke-width: 1.5; }
.sf-hekpaal { stroke: #fff; stroke-width: 5; stroke-linecap: round; } .sf-hekplank { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .9; }
.sf-standaard { stroke: #fff; stroke-width: 6; stroke-linecap: round; } .sf-balk { fill: #FA5252; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 8 8; }
.sf-paardsprong { animation: sf-paardsprong 2.4s ease-in-out infinite; } @keyframes sf-paardsprong { 0%, 100% { transform: translate(-14px, 6px); } 50% { transform: translate(10px, -12px); } }
.sf-lint { fill: var(--accent, var(--accent)); } .sf-blad { fill: var(--accent, var(--accent)); } .sf-plaats { font: 800 44px "Twemoji Country Flags", Poppins, Nunito, sans-serif; fill: var(--primair, var(--primair)); }
.sf-schommel { transform-origin: 0 -46px; animation: sf-schommel 4s ease-in-out infinite; } @keyframes sf-schommel { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.sf-kwijt .sf-schommel { animation: sf-slinger-wild .6s ease-in-out infinite alternate; }
.sf-meer path:first-child { fill: #74C0FC; } .sf-golfje { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.sf-steiger rect { fill: #A0785A; } .sf-steiger path { stroke: #6B4F3A; stroke-width: 4; stroke-linecap: round; }
.sf-dobber-b { animation-delay: -1.4s; } .sf-peddel { animation: sf-peddel 1.6s ease-in-out infinite alternate; } @keyframes sf-peddel { from { transform: translate(0, -20px) rotate(-22deg); } to { transform: translate(0, -20px) rotate(22deg); } }
.sf-spaak { stroke: #8D6E63; stroke-width: 5; stroke-linecap: round; } .sf-handgreep { fill: #8D6E63; } .sf-roerrand { fill: none; stroke: #A0785A; stroke-width: 7; }
.sf-roerwiel { transform-origin: 0 0; animation: sf-roer 6s ease-in-out infinite alternate; } @keyframes sf-roer { from { transform: rotate(-40deg); } to { transform: rotate(40deg); } }
.sf-kwijt .sf-roerwiel { animation: sf-rond 1s linear infinite; }
.sf-tatami path:first-child { fill: #FA5252; } .sf-tatami-binnen { fill: #4DABF7; }
.sf-gongframe { fill: none; stroke: #6B4F3A; stroke-width: 7; stroke-linecap: round; } .sf-gongtouw { stroke: #868E96; stroke-width: 2.4; }
.sf-gongrand { fill: #E0A94A; } .sf-gongvlak { fill: #F2C66D; } .sf-gongmidden { fill: #E0A94A; }
.sf-gongschijf { transform-origin: 0 -40px; animation: sf-gong 3s ease-in-out infinite; } @keyframes sf-gong { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(3deg); } 84% { transform: rotate(-2deg); } 92% { transform: rotate(1deg); } }
.sf-hamer path { stroke: #6B4F3A; stroke-width: 4; stroke-linecap: round; } .sf-hamer ellipse { fill: #C92A2A; }
.sf-hamer { transform-origin: 58px 40px; animation: sf-hamer 3s ease-in-out infinite; } @keyframes sf-hamer { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-16deg); } 75% { transform: rotate(4deg); } }
.sf-kwijt .sf-gongschijf { animation: sf-slinger-wild .5s ease-in-out infinite alternate; }
.sf-doek path { fill: #C92A2A; } .sf-doek .sf-doekplooi { fill: none; stroke: #A61E1E; stroke-width: 3; } .sf-franje { fill: none; stroke: #F2A900; stroke-width: 4; stroke-dasharray: 2 3; }
.sf-masker-blij path:first-child { fill: #FFD43B; } .sf-masker-droef path:first-child { fill: #74C0FC; } .sf-maskeroog { fill: #1F2933; } .sf-maskermond { fill: none; stroke: #1F2933; stroke-width: 2.6; stroke-linecap: round; }
.sf-maskerwip { transform-box: fill-box; transform-origin: 50% 50%; animation: sf-wiebel 3s ease-in-out infinite; } .sf-maskerwip-b { animation-delay: -1.5s; }
.sf-kwijt .sf-maskerwip { animation: sf-rond 2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.sf-paardsprong, .sf-schommel, .sf-peddel, .sf-roerwiel, .sf-gongschijf, .sf-hamer, .sf-maskerwip { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.sf-spaken, .sf-wiebel, .sf-rol, .sf-rol-wiel, .sf-belhendel, .sf-geluid path, .sf-snelheid, .sf-race, .sf-lamp, .sf-gas, .sf-kwijt .sf-bel { animation: none !important; }
.sf-lamp-1, .sf-lamp-2 { fill: #FA5252; } .sf-geluid path { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
.sf-wip,
.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-golfbal, .sf-volleybal-klein, .sf-zwemmer, .sf-armrond, .sf-gloed, .sf-vonk, .sf-rook { animation: none !important; }
}
/* π« Acties (views/acties.ejs): het overzicht per groep, de balk naar het doel en per lid meegegeven, verkocht en ingeleverd. */
.ac-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ac-teams { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ac-balk { height: 10px; border-radius: 999px; background: rgba(127, 127, 127, .2); overflow: hidden; margin: 6px 0 2px; }
.ac-balk > span { display: block; height: 100%; background: var(--primair, var(--primair)); border-radius: 999px; }
.ac-groepen { margin-top: 8px; }
.ac-groep { border-top: 1px solid rgba(127, 127, 127, .18); margin-top: 8px; padding-top: 6px; }
.ac-lid { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(3, 84px) 190px; align-items: end; gap: 6px 10px; padding: 8px 0; border-top: 1px solid rgba(127, 127, 127, .12); }
.ac-lid.zonder-geld { grid-template-columns: minmax(120px, 1fr) repeat(2, 84px) 190px; }
.ac-naam { align-self: center; }
.ac-veld { display: grid; gap: 2px; min-width: 0; }
.ac-veld input { width: 100%; box-sizing: border-box; text-align: right; }
.ac-eind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
.ac-overzicht td:not(:first-child) { white-space: nowrap; }
@media (max-width: 600px) {
.ac-lid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-lid.zonder-geld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-naam, .ac-eind { grid-column: 1 / -1; }
.ac-eind:empty { display: none; }
}
.ac-open { color: #9A3412; font-weight: 700; }
/* πΆ Subsidies: de datum die eraan komt, krap = binnen twee weken; afgerond en afgewezen rustiger. */
.sb-kaart .inz-acties { flex-wrap: wrap; justify-content: flex-end; }
.sb-stand { width: auto; padding: 4px 8px; }
.sb-wanneer { font-weight: 700; margin: 4px 0; }
.sb-krap { color: #9A3412; }
html.donker .sb-krap { color: #FDBA74; }
.sb-verantwoord, .sb-afgewezen { opacity: .8; }
.sb-tekst > summary { cursor: pointer; font-weight: 600; margin: 4px 0; }
.sb-telling { border-top: 1px solid rgba(127, 127, 127, .18); margin-top: 8px; padding-top: 6px; }
.sb-telling td:not(:first-child), .sb-telling th:not(:first-child) { text-align: right; white-space: nowrap; }
/* ποΈ Kaartverkoop: soorten kopen, kaartjes met QR-code, en aan de deur de uitkomst groot in beeld (groen, oranje, rood). */
.kv-soort { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.kv-soort input { width: 84px; text-align: right; }
.kv-totaal { font-weight: 700; min-height: 1.4em; }
.kv-soortrij { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 8px; margin-bottom: 6px; }
.kv-kaartjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kv-kaartje { display: flex; align-items: center; gap: 14px; }
.kv-kaartje.binnen { opacity: .65; }
.kv-qr { flex: none; width: 150px; line-height: 0; background: #FFFFFF; border-radius: 10px; padding: 6px; }
.kv-qr svg { width: 100%; height: auto; }
.kv-kaartje.groot { flex-direction: column; text-align: center; }
.kv-kaartje.groot .kv-qr { width: min(280px, 80vw); }
.kv-uitkomst { display: grid; gap: 6px; padding: 22px 18px; border-radius: 16px; text-align: center; }
.kv-uitkomst b { font-size: 28px; line-height: 1.2; }
.kv-uitkomst.goed, .kaart.kv-uitkomst.goed { background: #D3F9D8; color: #14532D; }
.kv-uitkomst.let-op, .kaart.kv-uitkomst.let-op { background: #FFF4E6; color: #7C2D12; }
.kv-uitkomst.fout, .kaart.kv-uitkomst.fout { background: #FFE3E3; color: #7F1D1D; }
html.donker .kv-uitkomst.goed, html.donker .kaart.kv-uitkomst.goed { background: #14532D; color: #D3F9D8; }
html.donker .kv-uitkomst.let-op, html.donker .kaart.kv-uitkomst.let-op { background: #7C2D12; color: #FFF4E6; }
html.donker .kv-uitkomst.fout, html.donker .kaart.kv-uitkomst.fout { background: #7F1D1D; color: #FFE3E3; }
.kv-uitkomst form, .kv-uitkomst .knop { justify-self: center; }
.kv-video { width: 100%; max-height: 50vh; border-radius: 12px; margin-top: 10px; background: #000000; }
@media (max-width: 560px) { .kv-soortrij { grid-template-columns: minmax(0, 1fr) 110px auto; } }
html.donker .ac-open { color: #FDBA74; }
/* πΈ Foto's (views/fotos.ejs, ouders-fotos.ejs, het blok in ouders-gezin.ejs): albums, het raster met een status per foto en het venster. */
.fo-album { display: flex; gap: 12px; align-items: flex-start; }
.fo-voorplaat { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; flex: none; }
.fo-album-tekst { flex: 1; min-width: 0; }
/* πΈ Albums: β° Lijst (zoals het was), β¦ Tegels (gelijke kaarten met de voorplaat groot) of β¨ Collage (fotos.js zet --k en --r). */
.fo-weergave { display: inline-flex; align-items: center; border: 1px solid #DEE2E6; border-radius: 999px; padding: 2px; }
.fo-weergave button { border: 0; background: none; font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 999px; cursor: pointer; color: #6B7280; min-height: 0; }
.fo-weergave button[aria-pressed="true"] { background: color-mix(in srgb, var(--primair-licht) 10%, white); color: var(--primair-tekst); font-weight: 700; }
.fo-albums { display: grid; gap: 10px; }
.fo-albums.als-tegels { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.fo-albums.als-tegels .fo-album { flex-direction: column; gap: 8px; }
.fo-albums.als-tegels .fo-voorplaat { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.fo-albums.als-tegels .fo-album-tekst { width: 100%; }
.fo-albums.als-collage { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 170px; grid-auto-flow: dense; gap: 12px; }
.fo-albums.als-collage .fo-album { position: relative; grid-column: span var(--k, 2); grid-row: span var(--r, 1); overflow: hidden; border-radius: 14px; padding: 0; display: block; background: color-mix(in srgb, var(--primair-licht) 10%, white); }
.fo-albums.als-collage .fo-voorplaat { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.fo-albums.als-collage .fo-album-tekst { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; }
.fo-albums.als-collage .fo-album-tekst .tekst { color: rgba(255, 255, 255, .85); margin: 2px 0 0; font-size: 12.5px; }
.fo-albums.als-collage .fo-album.zonder-foto .fo-album-tekst { inset: 0; background: none; color: inherit; display: grid; align-content: end; }
.fo-albums.als-collage .fo-album.zonder-foto .fo-album-tekst .tekst { color: #6B7280; }
@media (max-width: 600px) { .fo-albums.als-collage { grid-auto-rows: 200px; } }
html.donker .fo-weergave { border-color: #2A3B47; }
html.donker .fo-weergave button[aria-pressed="true"] { background: #12313F; color: #7FD3F2; }
html.donker .fo-albums.als-collage .fo-album { background: #17232B; }
.fo-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.fo-tegel { position: relative; display: block; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; background: rgba(127, 127, 127, .12); aspect-ratio: 4 / 3; cursor: pointer; }
.fo-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fo-tegel.nakijken { border-color: #F59F00; } .fo-tegel.beperkt { border-color: #C92A2A; } .fo-tegel.intern { border-color: #1C7ED6; } .fo-tegel.sociaal { border-color: #2B8A3E; }
.fo-tegel > .fo-st { position: absolute; left: 4px; top: 4px; }
.fo-st { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1F2937; }
.fo-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fo-legenda .fo-st.nakijken { box-shadow: inset 0 0 0 2px #F59F00; } .fo-legenda .fo-st.beperkt { box-shadow: inset 0 0 0 2px #C92A2A; }
.fo-legenda .fo-st.intern { box-shadow: inset 0 0 0 2px #1C7ED6; } .fo-legenda .fo-st.sociaal { box-shadow: inset 0 0 0 2px #2B8A3E; }
.fo-dialoog { max-width: min(760px, 96vw); }
.fo-dialoog { max-height: 94vh; overflow-y: auto; }
.fo-dialoog img { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto 8px; border-radius: 8px; }
.fo-leden { display: flex; flex-wrap: wrap; gap: 6px; }
.fo-merk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .fo-merk { grid-template-columns: minmax(0, 1fr); } }
.fo-merk-velden { display: grid; gap: 10px; min-width: 0; }
.fo-merk-velden > label, .fo-merk-velden .ac-rij > label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.fo-merk-velden > label small { font-weight: 400; }
.fo-merk-velden input:not([type=checkbox]), .fo-merk-velden select { width: 100%; box-sizing: border-box; min-width: 0; }
.fo-merk-velden .ac-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fo-merk-vink { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fo-merk-vink label.vink { display: flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.fo-merk-vink label.vink > input { width: auto; margin: 0; }
.fo-merk-voorbeeld { margin: 0; } .fo-merk-voorbeeld canvas { width: 100%; height: auto; border-radius: 10px; display: block; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.fo-titel { display: grid; gap: 4px; margin: 4px 0 8px; } .fo-titel input { width: 100%; box-sizing: border-box; }
.fo-figuur { margin: 0; min-width: 0; }
.fo-figuur figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; padding: 3px 2px 0; min-height: 22px; }
.fo-figuur figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-figuur figcaption a { text-decoration: none; flex: none; }
.fo-albums-ouder { display: grid; gap: 8px; }
.fo-album-ouder { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.fo-album-ouder img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.fo-album-ouder span { display: grid; }
/* ποΈ 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; flex-wrap: wrap; gap: 6px; } .inz-vraag input { flex: 1 1 180px; min-width: 0; } .inz-vraag select { width: auto; min-width: 0; max-width: 100%; }
.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-dagen { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.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: color-mix(in srgb, var(--primair) 88%, black); border-color: color-mix(in srgb, var(--primair) 88%, black); 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: color-mix(in srgb, var(--primair) 88%, black); border-color: color-mix(in srgb, var(--primair) 88%, black); 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; }
/* β¨ 6 ideeΓ«n op een breed scherm: twee rijen van drie, in een breder venster. */
.ck-dialoog.ai-hulp.breed { width: min(1120px, calc(100vw - 24px)); }
.ah-ideeen.ah-zes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ah-veeg { display: none; margin: 6px 0 0; text-align: center; font-size: 12px; color: #6B7280; }
/* π± Telefoon: de ideeΓ«n naast elkaar om doorheen te vegen (elk bijna de hele breedte, de volgende piept erachter). */
@media (max-width: 640px) {
.ah-ideeen, .ah-ideeen.ah-zes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.ah-ideeen > .ah-idee { flex: 0 0 86%; scroll-snap-align: center; }
.ah-veeg { display: block; }
}
/* ποΈ Voorbeeld van een item uit de bibliotheek. */
.ah-vb-kop h3 { margin: 0 0 6px; font-size: 18px; }
.ah-vb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-vb-omschrijving { margin: 10px 0 0; font-size: 14px; color: #495057; }
.ah-vb-tekst { margin-top: 10px; max-height: 55vh; overflow: auto; }
/* π‘ Tips van eerdere keren (AI-hulp-voorbeeld en de pagina van een onderdeel). */
.ah-vb-tips, .item-tips { background: #FFF9DB; box-shadow: inset 0 0 0 1px #FFE066; }
.ah-vb-tips { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.ah-vb-tips p, .item-tip { margin: 4px 0; }
html.donker .ah-vb-tips, html.donker .item-tips { background: #3A3420; box-shadow: inset 0 0 0 1px #6B5A1A; }
html.donker .ah-vb-omschrijving { color: #ADB5BD; }
.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: color-mix(in srgb, var(--primair) 88%, black); 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: color-mix(in srgb, var(--primair) 88%, black); 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; }
/* π§ De wizard na een verhuizing (public/js/verhuiswizard.js): één stap per keer, de actie als grote knop. */
.verhuis-wizard { width: min(480px, calc(100vw - 32px)); }
.verhuis-wizard h2 { margin: 2px 0 8px; font-size: 1.2rem; }
.vw-teller { color: #6B7280; font-weight: 600; }
.vw-uitleg, .vw-hoe { margin: 0 0 10px; line-height: 1.5; }
.vw-actie { display: grid; gap: 8px; margin: 6px 0 16px; justify-items: start; }
.vw-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.vw-ok { margin: 0; font-weight: 700; color: #2B8A3E; }
.vw-tip { margin: 0; font-size: 13px; color: #6B7280; }
html.donker .vw-teller, html.donker .vw-tip { color: #9AA5B1; }
html.donker .vw-ok { color: #69DB7C; }
html.donker .verhuis-tekst small { color: #9AA9B4; }
/* π Welkomstvenster op Home, de allereerste keer (public/js/welkom.js). */
.welkom-venster { width: min(640px, calc(100vw - 32px)); padding: 32px 36px 28px; }
@media (max-width: 560px) { .welkom-venster { padding: 24px 20px 20px; } }
.welkom-venster h2 { margin: 0 0 8px; }
.welkom-venster ul { margin: 14px 0 18px; padding-left: 4px; list-style: none; display: grid; gap: 10px; line-height: 1.5; }
.welkom-venster .knoppen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.welkom-venster .knoppen .knop { min-width: 7em; text-align: center; justify-content: center; }
/* π Op slot zonder geldige licentie (views/licentie-slot.ejs): een grijze, wazige "app" op de achtergrond met een glazen venster. */
body.licentie-slot { min-height: 100vh; margin: 0; overflow-x: hidden; background: #E9EDF1; }
.slot-achter { position: fixed; inset: 0; padding: 18px; filter: blur(9px) grayscale(1); opacity: .55; pointer-events: none; }
.slot-balk { height: 64px; border-radius: 18px; background: linear-gradient(125deg, #6B7C88, #9AA8B2); margin-bottom: 18px; }
.slot-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.slot-kaart { height: 150px; border-radius: 18px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.08); } .slot-kaart.hoog { height: 240px; }
.slot-venster { position: relative; z-index: 2; box-sizing: border-box; width: min(620px, calc(100% - 32px)); margin: 6vh auto 32px; padding: 28px 26px 22px; border-radius: 24px;
background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
border: 1px solid rgba(255,255,255,.8); box-shadow: 0 30px 80px rgba(20,30,40,.28), inset 0 1px 0 rgba(255,255,255,.9); }
.slot-icoon { font-size: 44px; line-height: 1; } .slot-venster h1 { margin: 10px 0 6px; font-size: 1.6rem; }
.slot-groot { font-size: 1.08rem; margin: 0 0 10px; }
.slot-bewaard { padding: 10px 14px; border-radius: 12px; background: rgba(0,137,192,.08); border: 1px solid rgba(0,137,192,.2); }
.slot-stappen h2 { font-size: 1.1rem; margin: 18px 0 6px; } .slot-stappen ol { margin: 0; padding-left: 22px; } .slot-stappen li { margin: 0 0 8px; }
.slot-acties details { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.06); }
.slot-acties summary { cursor: pointer; font-weight: 700; } .slot-acties label { display: grid; gap: 4px; margin-top: 8px; font-weight: 600; }
.slot-acties textarea { width: 100%; box-sizing: border-box; margin-top: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.slot-acties .knoppen, .slot-onder { justify-content: flex-end; }
.slot-uitkomst { min-height: 1.2em; margin: 10px 0 0; font-weight: 700; } .slot-uitkomst.goed { color: #2B8A3E; } .slot-uitkomst.fout { color: #C92A2A; }
html.donker body.licentie-slot { background: #0E171D; } html.donker .slot-kaart { background: #1C2A33; }
html.donker .slot-venster { background: rgba(23,35,43,.9); border-color: rgba(255,255,255,.08); }
html.donker .slot-acties details { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
/* Op slot: echt grijs (ook met het glaseffect aan), zodat het duidelijk "stil" voelt. */
html body.licentie-slot, html.glas body.licentie-slot, html.glas.donker body.licentie-slot { background: #DDE3E8 !important; background-image: none !important; }
html.donker body.licentie-slot, html.glas.donker body.licentie-slot { background: #10181E !important; }
/* De kleurvlekken van het glas staan op html: op slot ook daar grijs. */
html.glas:has(> body.licentie-slot) { background: #DDE3E8; } html.glas.donker:has(> body.licentie-slot) { background: #10181E; }
.slot-venster .knoppen button, .slot-venster .knoppen .knop { font-size: 15px; padding: 9px 16px; }
/* π Seizoensversiering: de lijst feesten bij π’ Afdeling. */
.feest-keuze summary { cursor: pointer; font-weight: 700; }
/* Strak: het vinkje naast de naam, het oogje klein erachter (de rasterlabels van .velden-recht gelden hier niet). */
.feest-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; margin-top: 8px; max-width: 760px; }
@media (max-width: 560px) { .feest-lijst { grid-template-columns: minmax(0, 1fr); } }
.feest-rij { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 0; }
.feest-lijst .feest-rij label.vink { display: flex; flex-direction: row; grid-template-columns: none; align-items: center; font-size: inherit; gap: 8px; margin: 0; padding: 0; font-weight: 400; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.feest-lijst .feest-rij label.vink > input { width: auto; margin: 0; flex: 0 0 auto; }
.feest-kijk { flex: 0 0 auto; text-decoration: none; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 8px; opacity: .7; }
.feest-kijk:hover, .feest-kijk:focus-visible { opacity: 1; background: rgba(127, 127, 127, .15); }
/* π Codeveld (script bovenaan beheer.js / onderaan basis.js): 6 cijfers als 123 456, de bolletjes vullen zich bij het typen. */
.cv { position: relative; display: block; width: 100%; max-width: 320px; }
.cv:has(.venster-code) { max-width: none; margin-top: 6px; }
.rij-form > .cv { flex: 1 1 220px; }
/* π± Smal (veld en knop onder elkaar, 0.121.2): het codeveld even breed als de knop eronder, links en rechts gelijk. Eerst hield
max-width: 320px het veld smaller dan de knop. Ook waar formulier.css niet geladen is (de tweede stap op het profiel). */
.rij-form:has(> .cv, > input.code-veld) { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
.rij-form:has(> .cv, > input.code-veld) > * { flex: 1 1 100%; }
.rij-form > .cv, .rij-form > input.code-veld, .rij-form > .cv > input.code-veld { max-width: none; }
}
.cv > input { margin: 0 !important; width: 100%; color: transparent !important; -webkit-text-fill-color: transparent !important; caret-color: transparent; }
/* Ingevuld door een wachtwoordkluis (Bitwarden, iCloud): de browser kleurt de tekst dan zelf; zonder dit zie je de cijfers dubbel. */
.cv > input:-webkit-autofill, .cv > input:autofill { -webkit-text-fill-color: transparent !important; transition: background-color 600000s 0s, color 600000s 0s; }
.cv > input::placeholder { color: transparent; }
.cv > input::selection { background: transparent; color: transparent; }
.cv-toon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font: 600 1.8rem/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; color: inherit; }
.cv-vak { display: inline-block; width: 1.1ch; margin: 0 .12em; text-align: center; opacity: .35; }
.cv-vak.vol { opacity: 1; }
.cv-vak:nth-child(3) { margin-right: .6em; }
.cv-vak.nu { opacity: 1; color: var(--primair-tekst); animation: cv-knipper 1s steps(1) infinite; }
html.donker .cv-vak.nu { color: #6FD0F5; }
@keyframes cv-knipper { 50% { opacity: .25; } }
/* βοΈ π Een e-mailadres of telefoonnummer dat niet klopt (public/js/basis.js, veldControle): rode rand en een melding eronder.
In een raster of een rij staat de melding op een eigen regel achteraan. */
input.ongeldig, input.ongeldig:focus { border-color: #C92A2A !important; box-shadow: 0 0 0 2px rgba(201, 42, 42, .18); }
.veld-fout { display: block; color: #C92A2A; font-size: 12.5px; font-weight: 600; margin-top: 3px; grid-column: 1 / -1; order: 99; flex-basis: 100%; }
html.donker .veld-fout { color: #FF8787; }
html.donker input.ongeldig { border-color: #FF8787 !important; }
/* βΈοΈ Tijdelijk niet actief (public/js/lidpauze.js), bij de aanwezigheid: op de groepspagina en bij π§ Leden. */
.aw-pauze { margin: 10px 0 4px; display: grid; gap: 6px; }
.aw-pauze-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.aw-pauze-lijst li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: #F1F3F5; }
.aw-pauze-naam { font-weight: 700; }
.aw-pauze-lijst small { color: #646B78; flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.aw-pauze-knop { justify-self: start; }
.aw-pauze-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px 12px; align-items: end; padding: 10px; border-radius: 10px; border: 1px dashed #CED4DA; }
.aw-pauze-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; min-width: 0; }
.aw-pauze-form small { grid-column: 1 / -1; color: #646B78; }
.lid-pauze-form { grid-column: 1 / -1; margin-top: 6px; } .lid-pauze-form > b { grid-column: 1 / -1; }
.aw-pauze-form input, .aw-pauze-form select { width: 100%; min-width: 0; box-sizing: border-box; }
html.donker .aw-pauze-lijst li { background: #1B2A33; }
html.donker .aw-pauze-lijst small, html.donker .aw-pauze-form small { color: #9AA5B1; }
html.donker .aw-pauze-form { border-color: #2E3D47; }
/* π¬ Berichten per groep (groepsberichten.ejs, ouders-berichten.ejs) */
.gb-form { display: grid; gap: 8px; margin-bottom: 14px; } .gb-form textarea { width: 100%; box-sizing: border-box; }
.gb-lijst { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.gb-bericht { padding: 10px 12px; border-radius: 12px; background: var(--vlak, #F4F8FB); border: 1px solid var(--rand, #DCE6EE); max-width: 46rem; }
.gb-bericht.gb-leiding { border-left: 4px solid var(--primair, var(--primair)); }
.gb-bericht.gb-eigen { margin-left: auto; }
.gb-bericht.gb-verborgen { opacity: .6; }
.gb-kop { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .gb-kop small { color: var(--zacht, #5B6B76); }
.gb-tekst { margin: 4px 0 0; overflow-wrap: anywhere; } /* opmaak: nieuwe regels zijn
(opmaakHtml / mededelingHtml) */
.gb-acties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .gb-acties form { margin: 0; }
.gb-kanalen { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.gb-kanaal { border: 1px solid var(--rand, #DCE6EE); background: var(--vlak, #F4F8FB); color: inherit; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.gb-kanaal.aan { background: var(--primair, var(--primair)); border-color: var(--primair, var(--primair)); color: #fff; }
/* Donker: --vlak en --rand bestaan niet, dus de lichte terugval gaf een witte knop met lichte tekst. */
html.donker .gb-kanaal:not(.aan) { background: #17232B; border-color: #26343D; color: #E3EAF0; }
.gb-nieuw { display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--accent, var(--accent)); color: #fff; font-size: .8rem; }
.gb-wacht { font-size: .9rem; font-weight: 600; color: var(--zacht, #5B6B76); align-self: center; }
.gb-bevestig { padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; border: 2px solid var(--primair, var(--primair)); background: var(--vlak, #F4F8FB); }
.gb-bevestig blockquote { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--primair, var(--primair)); background: var(--achter, #fff); }
/* π Wat is er aangepast in de planning (views/planning-wijziging.ejs): zoals de mail, per avond Was (rood, doorgestreept) β Wordt (groen). */
.pw-tijd { color: #6B7280; }
.pw-mijn { font-weight: 700; }
.pw-blok { border: 1px solid #E3E8EC; border-left: 4px solid var(--primair); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.pw-kop { font-weight: 700; margin-bottom: 6px; }
.pw-regel { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid #F1F3F5; font-size: 15px; }
.pw-regel:first-of-type { border-top: 0; }
.pw-wat { color: #4B5563; }
.pw-was { color: #C92A2A; overflow-wrap: anywhere; }
.pw-wordt { color: #2B8A3E; font-weight: 700; overflow-wrap: anywhere; }
.pw-pijl { color: #9CA3AF; }
.pw-uitleg { margin: 0 0 6px; font-size: 13px; color: #6B7280; }
.pw-groep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.pw-maand { font-size: 13px; font-weight: 700; color: #4B5563; min-width: 6em; }
.pw-label { padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pw-label.goed { background: #D3F9D8; color: #2B8A3E; }
.pw-label.fout { background: #FFE3E3; color: #C92A2A; }
.pw-label.grijs { background: #F1F3F5; color: #6B7280; }
.pw-knoppen { margin: 16px 0 0; }
@media (max-width: 560px) { .pw-regel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .pw-wat { grid-column: 1 / -1; font-size: 13px; } }
html.donker .pw-blok { border-color: #26343D; border-left-color: color-mix(in srgb, var(--primair-licht) 70%, white); }
html.donker .pw-regel { border-top-color: #26343D; }
html.donker :is(.pw-wat, .pw-maand) { color: #CBD5E1; }
html.donker .pw-was { color: #FFA8A8; }
html.donker .pw-wordt { color: #8CE99A; }
html.donker .pw-label.goed { background: #1E3A26; color: #8CE99A; }
html.donker .pw-label.fout { background: #3A1E22; color: #FFA8A8; }
html.donker .pw-label.grijs { background: #26343D; color: #CBD5E1; }
/* β
Aanwezigheid-knoppen: tik op een persoon (avatar en naam) voor aanwezig; afgemeld oranje, introducees/gasten paars.
Gebruikt bij β
Aanwezigheid (ledenaanwezig.js, aanwezigtegel.js) en π Wie was er? (opgave.js). */
.aanwezig-lijst { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.aanwezig-knop .avatar, .opgave-mee .avatar { box-shadow: none; flex: none; }
.aanwezig-knop { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 700; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid #DEE2E6; background: #fff; color: #495057; cursor: pointer; min-height: 44px; }
.aanwezig-knop.aan { background: #EBFBEE; border-color: #8CE99A; color: #2B8A3E; }
.aanwezig-knop.afgemeld { background: #FFF4E6; border-color: #FFD8A8; color: #AD5900; }
html.donker .aanwezig-knop { background: #17232B; border-color: #33444F; color: #C9D2D9; }
html.donker .aanwezig-knop.aan { background: #1E3A24; border-color: #2B5C34; color: #8CE99A; }
html.donker .aanwezig-knop.afgemeld { background: #3A2A12; border-color: #6B4A1A; color: #FFC078; }
.aanwezig-knop.aw-intro { background: #F8F5FF; border-color: #D0BFFF; color: #6741D9; padding-left: 14px; }
.aanwezig-knop.aw-intro.aan { background: #E5DBFF; border-color: #9775FA; color: #5F3DC4; }
.aanwezig-knop.aw-intro-nieuw { border-style: dashed; color: #7048E8; padding-left: 14px; }
html.donker .aanwezig-knop.aw-intro { background: #211B36; border-color: #3E3266; color: #B197FC; }
html.donker .aanwezig-knop.aw-intro.aan { background: #33285A; border-color: #6C4FD1; color: #D0BFFF; }
/* β Afgelast en π
Nieuwe datum in agenda's (ledenpagina, groepspagina). */
.agenda-titel.afgelast { text-decoration: line-through; color: #6B7280; }
.tag.afgelast-tag { background: #FDECEC; color: #A32D2D; }
.tag.nieuw-tag { background: color-mix(in srgb, var(--primair-licht) 10%, white); color: #005A7D; }
html.donker .tag.afgelast-tag { background: #3A1818; color: #FFB3B3; } html.donker .tag.nieuw-tag { background: #12384A; color: color-mix(in srgb, var(--primair-licht) 40%, white); }
/* β¨ Sfeerbeelden met detail (views/partials/sfeer-illustratie.ejs, STIJL "detail" of "rijk"): gezichten, handen, schoenen, schaduw,
bomen in lagen, gras en bloemen, zon/maan en sterren, glans op het middelpunt. Rijk = ook verlopen, halo, blosjes en vuurvliegjes. */
.sf-schaduw { fill: #0B2233; opacity: .16; } .sf-buiten .sf-schaduw { opacity: .3; }
.sf-schoen { fill: #2B2B33; } .sf-oog { fill: #1F2933; } .sf-mond { fill: none; stroke: #7A3B2E; stroke-width: 1.2; stroke-linecap: round; }
.sf-wang { fill: #FF8FAB; opacity: .45; }
.sf-kraag { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; stroke-linecap: round; }
.sf-plooi { fill: #0B2233; opacity: .14; } .sf-rugzakband { stroke: #5A189A; stroke-width: 2; stroke-linecap: round; }
.kb-boom rect { fill: #7A5240; } .sf-boom-licht path { fill: #fff; opacity: .13; } .sf-boom-ver + .sf-boom-licht path { opacity: .08; }
.sf-graspol path { fill: none; stroke: #2B8A3E; stroke-width: 1.8; stroke-linecap: round; } .sf-buiten .sf-graspol path { stroke: #1E5631; }
.sf-bloemhart { fill: #F59F00; }
.sf-zonbol { fill: #FFD43B; } .sf-zonstralen path { stroke: #FFC107; stroke-width: 3; stroke-linecap: round; }
.sf-zonstralen { transform-origin: 0 0; animation: sf-rond 40s linear infinite; }
.sf-maanbol { fill: #FFF3BF; } .sf-krater { fill: #F2DE9A; }
.sf-ster { fill: #fff; animation: sf-lampje 3s ease-in-out infinite; } .sf-ster-1 { animation-delay: -1s; } .sf-ster-2 { animation-delay: -2s; fill: #FFE066; }
.sf-heuvel-ver { fill: #1B3550; opacity: .9; } .sf-dag .sf-heuvel-ver, .sf-stijl-rijk:not(.sf-buiten) .sf-heuvel-ver { fill: #9BD3A8; opacity: .6; }
.sf-middelschaduw { fill: #0B2233; opacity: .18; }
.sf-glans { pointer-events: none; opacity: .9; } .sf-glimp { fill: #fff; opacity: .9; }
.sf-tentnaad { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1.4; stroke-dasharray: 2 3; } .kb-tent .sf-tentlicht { fill: #0B2233; opacity: .18; }
.kb-tent .sf-tentpin { fill: #ADB5BD; }
.sf-stenen ellipse { fill: #6C757D; stroke: #495057; stroke-width: 1; } .sf-nerf { fill: none; stroke: #6B4F3A; stroke-width: 1.2; stroke-linecap: round; opacity: .7; }
.sf-jaarring { fill: #C9A27E; stroke: #6B4F3A; stroke-width: 1; }
.sf-vlieg { fill: #E9FAC8; filter: drop-shadow(0 0 3px #D8F5A2); animation: sf-vlieg 4s ease-in-out infinite alternate; } .sf-vlieg-1 { animation-delay: -1.3s; } .sf-vlieg-2 { animation-delay: -2.6s; }
@keyframes sf-vlieg { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(10px, -12px); opacity: .3; } }
/* Rijk: iets meer kleur in de grond en de schaduw van het middelpunt alleen waar het in de lucht hangt. */
.sf-stijl-detail .sf-wang, .sf-stijl-detail .sf-plooi { display: none; }
html.donker .sf-schaduw { opacity: .35; } html.donker .sf-maanbol { fill: #FFE8A3; } html.donker .sf-glans { opacity: .35; } html.donker .sf-zonbol { fill: #F2C94C; }
html.donker .sf-middelschaduw { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .sf-zonstralen, .sf-ster, .sf-vlieg { animation: none !important; } }
.sf-raamkruis { stroke: #fff; stroke-width: 2; } .sf-deurknop { fill: #FFD43B; } .sf-dakrand { fill: none; stroke: #8F1D1D; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sf-plint { stroke: #ADB5BD; stroke-width: 3; } .sf-schoorsteen { fill: #8F1D1D; }
/* π Aankleding van de sfeerbeelden (lichtmasten, lichtbrug, vlinders, meeuwen, uil, paddenstoelen, confetti, planten vooraan). */
.sf-streep { stroke: rgba(255, 255, 255, .45); stroke-width: 3; } .sf-haarglans { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: .45; }
.sf-wolk-onder { fill: #B8D4EA !important; opacity: .8; } .sf-wolk-c { animation-duration: 22s; animation-direction: alternate-reverse; }
.sf-maststok { stroke: #8795A1; stroke-width: 3; } .sf-mastkop { fill: #495057; } .sf-mastlamp { fill: #FFF3BF; }
.sf-maststraal { fill: #FFF8DB; opacity: .32; } html.donker .sf-maststraal { opacity: .12; }
.sf-trussbalk { stroke: #868E96; stroke-width: 2.4; } .sf-trusskruis { fill: none; stroke: #868E96; stroke-width: 1.2; }
.sf-trusslamp { fill: #343A40; } .sf-trusslens { filter: drop-shadow(0 0 4px #FFE066); }
.sf-vleugels { transform-origin: 0 2px; animation: sf-fladder .35s ease-in-out infinite alternate; } .sf-vlinderlijf { stroke: #343A40; stroke-width: 1.6; stroke-linecap: round; }
@keyframes sf-fladder { to { transform: scaleX(.3); } }
.sf-vlinder { animation: sf-vlinder 6s ease-in-out infinite alternate; } .sf-vlinder-1 { animation-delay: -3s; }
@keyframes sf-vlinder { 0% { translate: 0 0; } 50% { translate: 16px -14px; } 100% { translate: -10px -6px; } }
.sf-meeuw { fill: none; stroke: #495057; stroke-width: 1.8; stroke-linecap: round; animation: sf-vogels 7s ease-in-out infinite alternate; } html.donker .sf-meeuw { stroke: #CBD5E1; }
.sf-uillijf { fill: #8D6E63; } .sf-uiloog { fill: #FFE8A3; } .sf-uilborst { fill: none; stroke: #C9A27E; stroke-width: 1.4; stroke-linecap: round; }
.sf-uil .sf-oog { animation: sf-knipoog 5s infinite; transform-box: fill-box; transform-origin: center; } @keyframes sf-knipoog { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.sf-paddosteel { fill: #F8F0E3; } .sf-paddohoed { fill: #E03131; } .sf-paddostip { fill: #fff; }
.sf-vallend { stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 120 24 0; animation: sf-vallend 7s linear infinite; opacity: .9; }
@keyframes sf-vallend { 0%, 80% { stroke-dashoffset: 0; opacity: 0; } 82% { opacity: 1; } 100% { stroke-dashoffset: -150; opacity: 0; } }
.sf-snipper { animation: sf-snipper 3.4s ease-in-out infinite alternate; transform-box: fill-box; } .sf-snipper-1 { animation-delay: -1.1s; } .sf-snipper-2 { animation-delay: -2.2s; }
@keyframes sf-snipper { to { translate: 0 8px; opacity: .55; } }
.sf-voorgrond path { fill: #2F7A48; opacity: .9; } .sf-voorgrond .sf-voorblad-licht { fill: none; stroke: #fff; stroke-width: 1; opacity: .25; } .sf-buiten .sf-voorgrond path, .sf-waterscouting .sf-voorgrond path { fill: #0E2E1B; }
.sf-ringlicht { fill: none; stroke: #fff; stroke-width: 1.6; opacity: .45; } .sf-ringdonker { fill: none; stroke: #0B2233; stroke-width: 3; opacity: .14; stroke-linecap: round; }
html.donker .sf-halo { opacity: .3; } html.donker .sf-luchtlicht { opacity: .5; } html.donker .sf-wolk-onder { opacity: .2; }
@media (prefers-reduced-motion: reduce) { .sf-vleugels, .sf-vlinder, .sf-meeuw, .sf-uil .sf-oog, .sf-vallend, .sf-snipper { animation: none !important; } .sf-vallend { opacity: 0; } }
/* π© Bevestiging van het middelpunt (paal, wegwijzer, haak, touw, kist). */
.sf-paal-m { fill: #8795A1; } .sf-paalvoet { fill: #6B7785; } .sf-gongpoot { fill: #6B4F3A; } .sf-hout { fill: #8D6E63; }
.sf-wijsbord path { fill: #C08A5B; stroke: #8D5E3C; stroke-width: 1.4; } .sf-wijsbord text { font: 800 8px "Twemoji Country Flags", Nunito, sans-serif; fill: #FFF3DC; letter-spacing: .5px; }
.sf-wijsbord { transform-box: fill-box; transform-origin: 0 50%; animation: sf-wijs 5s ease-in-out infinite; } .sf-wijsbord-b { transform-origin: 100% 50%; animation-delay: -2.5s; }
@keyframes sf-wijs { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
.sf-haak { fill: none; stroke: #6B7785; stroke-width: 2.4; stroke-linecap: round; } .sf-kist { fill: #5C3D2E; } .sf-kistrand { stroke: #8D6E63; stroke-width: 2; }
.sf-hangtouw { stroke-width: 1.6; }
@media (prefers-reduced-motion: reduce) { .sf-wijsbord { animation: none !important; } }
/* π§ Figuren (mens() in de partial): broek als vlak, zoom, oren, wenkbrauwen, oogglans en neus; ze ademen, knikken en knipperen. */
.sf-broekvlak { fill: #2F3E4E; } html.donker .sf-broekvlak { fill: #4B5D70; }
.sf-zoom { stroke: #0B2233; stroke-width: 1.6; opacity: .18; } .sf-shirtlicht { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .3; }
.sf-wenkbrauw { fill: none; stroke: #3B2A1A; stroke-width: 1; stroke-linecap: round; opacity: .8; } .sf-ooglicht { fill: #fff; }
.sf-neus { fill: none; stroke: #0B2233; stroke-width: .9; stroke-linecap: round; opacity: .35; }
.sf-adem { animation: sf-adem 3.6s ease-in-out infinite; } .sf-adem-1 { animation-delay: -.7s; } .sf-adem-2 { animation-delay: -1.4s; } .sf-adem-3 { animation-delay: -2.1s; } .sf-adem-4 { animation-delay: -2.8s; }
@keyframes sf-adem { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7px); } }
.sf-kop { animation: sf-knik 6s ease-in-out infinite; } .sf-kop-1 { animation-delay: -1.2s; } .sf-kop-2 { animation-delay: -2.4s; animation-duration: 7s; } .sf-kop-3 { animation-delay: -3.6s; } .sf-kop-4 { animation-delay: -4.8s; animation-duration: 5s; }
@keyframes sf-knik { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
.sf-ogen { transform-box: fill-box; transform-origin: center; animation: sf-knipoog 4.4s infinite; } .sf-ogen-1 { animation-delay: -1s; } .sf-ogen-2 { animation-delay: -2.2s; } .sf-ogen-3 { animation-delay: -3.1s; } .sf-ogen-4 { animation-delay: -.4s; }
.sf-staart { transform-box: fill-box; transform-origin: 80% 0; animation: sf-wapper 2.6s ease-in-out infinite; } @keyframes sf-wapper { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .sf-adem, .sf-kop, .sf-ogen, .sf-staart { animation: none !important; } }
/* π«οΈ Sfeer: heuvelrand, mist, korrel, zonnebundels, vuurlicht, rook, blaadjes, glinsteringen; π οΈ onderhoud en π΄ offline. */
.sf-heuvelrand { fill: none; stroke: #9EC5E8; stroke-width: 1.6; opacity: .35; } .sf-heuvelschaduw { fill: #0B2233; opacity: .16; }
.sf-algemeen .sf-heuvelrand, .sf-golfbaan .sf-heuvelrand, .sf-paard .sf-heuvelrand, .sf-fiets .sf-heuvelrand, .sf-water .sf-heuvelrand { stroke: #fff; opacity: .5; }
.sf-mistbank { fill: #fff; opacity: .1; animation: sf-mist 18s ease-in-out infinite alternate; } .sf-mistbank-b { animation-duration: 24s; animation-direction: alternate-reverse; }
.sf-podium-mist, .sf-muziek .sf-mistbank, .sf-dans .sf-mistbank, .sf-toneel .sf-mistbank { opacity: .16; }
@keyframes sf-mist { from { transform: translateX(-20px); } to { transform: translateX(24px); } }
.sf-korrel { fill: #fff; opacity: .22; mix-blend-mode: soft-light; pointer-events: none; }
.sf-zonbundel { animation: sf-bundel 7s ease-in-out infinite alternate; } @keyframes sf-bundel { from { opacity: .45; } to { opacity: 1; } }
.sf-vuurlicht { mix-blend-mode: screen; pointer-events: none; animation: sf-flakker 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sf-flakker { 0%, 100% { opacity: .9; transform: scale(1); } 30% { opacity: .7; transform: scale(.97); } 60% { opacity: 1; transform: scale(1.02); } }
.sf-pluim { fill: #CBD5E1; opacity: 0; animation: sf-pluim 4s ease-out infinite; } .sf-pluim-b { animation-delay: -1.3s; } .sf-pluim-c { animation-delay: -2.6s; }
@keyframes sf-pluim { 0% { transform: translate(0, 0) scale(.6); opacity: .8; } 100% { transform: translate(14px, -40px) scale(2.2); opacity: 0; } }
.sf-blad-v { animation: sf-blad 9s linear infinite; opacity: 0; } .sf-blad-v1 { animation-delay: -2.2s; } .sf-blad-v2 { animation-delay: -4.6s; } .sf-blad-v3 { animation-delay: -6.8s; }
@keyframes sf-blad { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(-18px, 70px) rotate(160deg); } 90% { opacity: .8; } 100% { transform: translate(10px, 140px) rotate(320deg); opacity: 0; } }
.sf-glinstering { fill: #fff; opacity: 0; animation: sf-glinster 2.8s ease-in-out infinite; } .sf-glinstering-1 { animation-delay: -.9s; } .sf-glinstering-2 { animation-delay: -1.8s; }
@keyframes sf-glinster { 0%, 100% { opacity: 0; } 50% { opacity: .95; } }
.kb-vlag { transform-box: fill-box; transform-origin: 0 50%; animation: sf-vlag 1.6s ease-in-out infinite; } @keyframes sf-vlag { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(6deg) scaleX(.9); } }
.sf-ladder { fill: none; stroke: #A0785A; stroke-width: 3; stroke-linecap: round; } .sf-ladderbalk { fill: none; stroke: #A0785A; stroke-width: 2.2; stroke-linecap: round; }
.sf-sleutel { animation: sf-sleutel .9s ease-in-out infinite alternate; } @keyframes sf-sleutel { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } }
.sf-tand { stroke: #868E96; stroke-width: 5; stroke-linecap: round; } .sf-tandkern { fill: #ADB5BD; } .sf-tandgat { fill: #fff; }
.sf-tandwiel > * { transform-origin: 0 0; animation: sf-rond 6s linear infinite; } .sf-tandwiel-b > * { animation-direction: reverse; animation-duration: 4s; }
.sf-bokpoot { stroke: #868E96; stroke-width: 2.6; stroke-linecap: round; } .sf-bokbord { fill: #fff; stroke: #F08C00; stroke-width: 1.6; } .sf-bokstreep { stroke: #F08C00; stroke-width: 4; }
.sf-kistje { fill: #E03131; } .sf-kistjehengsel { fill: none; stroke: #495057; stroke-width: 2; }
.sf-bubbelvlak { fill: #fff; stroke: #CED4DA; stroke-width: 1.4; } .sf-bubbel { animation: sf-zweef 3.6s ease-in-out infinite; }
.sf-wifi path { fill: none; stroke: #ADB5BD; stroke-width: 2.6; stroke-linecap: round; } .sf-wifi circle { fill: #ADB5BD; }
.sf-wifistreep { stroke: var(--accent, var(--accent)); stroke-width: 3; stroke-linecap: round; }
.sf-wifi path { animation: sf-zoekbereik 2.4s steps(1) infinite; } .sf-wifi path:nth-child(2) { animation-delay: .4s; } .sf-wifi path:nth-child(3) { animation-delay: .8s; }
@keyframes sf-zoekbereik { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .25; } }
.sf-scherm { fill: #74C0FC; animation: sf-lampje 1.6s ease-in-out infinite; }
.sf-zoek { animation: sf-zoek 2.4s ease-in-out infinite; } @keyframes sf-zoek { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
.sf-puntjes circle { fill: #ADB5BD; animation: sf-puntje 1.4s ease-in-out infinite; } .sf-puntjes circle:nth-child(2) { animation-delay: .2s; } .sf-puntjes circle:nth-child(3) { animation-delay: .4s; }
@keyframes sf-puntje { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
.sf-offline .sf-lampje, .sf-offline .sf-mastlamp { opacity: .35; animation: none; }
html.donker .sf-bubbelvlak { fill: #26343D; stroke: #3B4F61; } html.donker .sf-bokbord { fill: #26343D; }
@media (prefers-reduced-motion: reduce) { .sf-mistbank, .sf-zonbundel, .sf-vuurlicht, .sf-pluim, .sf-blad-v, .sf-glinstering, .kb-vlag, .sf-sleutel, .sf-tandwiel > *, .sf-bubbel, .sf-wifi path, .sf-scherm, .sf-zoek, .sf-puntjes circle { animation: none !important; } .sf-blad-v, .sf-pluim { opacity: 0; } }
/* πͺ§ Bordje onder het middelpunt (niet gevonden, onderhoud, offline) en dikte van het middelpunt (rijk). */
.sf-dikte { fill: color-mix(in srgb, var(--primair, var(--primair)) 62%, black); }
.sf-bordje { fill: #C08A5B; stroke: #8D5E3C; stroke-width: 1.4; } .sf-bordje-dikte { fill: #6B4428; } .sf-bordtouw { fill: none; stroke: #6B7280; stroke-width: 1.4; }
.sf-onderhoud .sf-bordje { fill: #FFD43B; stroke: #F08C00; } .sf-onderhoud .sf-bordje-dikte { fill: #C77700; }
.sf-offline .sf-bordje { fill: #E9ECEF; stroke: #ADB5BD; } .sf-offline .sf-bordje-dikte { fill: #868E96; } .sf-offline .sf-bordtekst { fill: #495057; }
.sf-bordtekst { font: 800 14px "Twemoji Country Flags", Poppins, Nunito, sans-serif; fill: #FFF3DC; letter-spacing: .2px; } .sf-bordglans { fill: #fff; opacity: .22; } .sf-bordspijker { fill: #6B4428; }
.sf-bordje-hang { animation: sf-bungel 3.4s ease-in-out infinite; } @keyframes sf-bungel { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.sf-kwijt .sf-bordje-hang { animation-duration: 1.6s; }
.sf-denkwolk { animation: sf-zweef 3s ease-in-out infinite; } .sf-denkvraag { font: 800 12px "Twemoji Country Flags", Poppins, Nunito, sans-serif; fill: var(--accent, var(--accent)); }
.sf-krab { animation: sf-krab .6s ease-in-out infinite alternate; } @keyframes sf-krab { from { transform: rotate(-30deg); } to { transform: rotate(-10deg); } }
.sf-tandwiel > g { transform-origin: 0 0; animation: sf-rond 6s linear infinite; } .sf-tandwiel-b > g { animation-direction: reverse; animation-duration: 4s; }
html.donker .sf-bordje-dikte { fill: #3B2A1A; }
@media (prefers-reduced-motion: reduce) { .sf-bordje-hang, .sf-denkwolk, .sf-krab, .sf-tandwiel > g { animation: none !important; } }
/* πͺ§ Het bordje springt eerst groot in beeld en "ademt" daarna af en toe even groter. */
.sf-bordje-groei { animation: sf-bord-in .9s cubic-bezier(.3, 1.6, .5, 1) both, sf-bord-puls 4.5s ease-in-out 1.2s infinite; }
@keyframes sf-bord-in { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes sf-bord-puls { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.14); } 90% { transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .sf-bordje-groei { animation: none !important; } }
/* πͺ§ Echte borden: hout (niet gevonden, met een grote 404), bouwbord (onderhoud) en emaille (offline). */
.sf-bordschaduw { fill: #0B2233; opacity: .32; }
.sf-bordtouw { fill: none; stroke: #8B6B4A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sf-bordtouw-draai { fill: none; stroke: #5C4430; stroke-width: 2.4; stroke-dasharray: 1.4 2.6; stroke-linejoin: round; }
.sf-bordhaak { fill: none; stroke: #868E96; stroke-width: 2; }
.sf-bordrand-hout { fill: #6B4428; } .sf-bordrand-bouw { fill: #B07800; } .sf-bordrand-emaille { fill: #8899A6; }
.sf-plank { stroke: #6B4428; stroke-width: 1.6; opacity: .55; } .sf-nerf-b { fill: none; stroke: #7A4E2C; stroke-width: 1; opacity: .35; }
.sf-noest { fill: none; stroke: #7A4E2C; stroke-width: 1; opacity: .5; }
.sf-emaillerand { fill: none; stroke: var(--primair, var(--primair)); stroke-width: 2.2; } .sf-emailleschilfer { fill: #495057; opacity: .5; }
.sf-bordlicht { stroke: #fff; stroke-width: 1.4; opacity: .5; } .sf-bordglimp { fill: #fff; opacity: .08; }
.sf-schroef circle { fill: #ADB5BD; stroke: #6B7785; stroke-width: .8; } .sf-schroef path { stroke: #6B7785; stroke-width: .8; }
.sf-bord404 { font: 800 30px "Twemoji Country Flags", Poppins, Nunito, sans-serif; fill: #FFF3DC; letter-spacing: 1px; } .sf-bord404-schaduw { font: 800 30px "Twemoji Country Flags", Poppins, Nunito, sans-serif; fill: #5C3A1E; letter-spacing: 1px; opacity: .75; }
.sf-bordklein { font: 700 9.5px "Twemoji Country Flags", Nunito, sans-serif; fill: #FFF3DC; letter-spacing: .3px; }
.sf-bordtekst-schaduw { font: 800 14px "Twemoji Country Flags", Poppins, Nunito, sans-serif; fill: #000; opacity: .18; }
.sf-onderhoud .sf-bordtekst { fill: #1F2933; } .sf-offline .sf-bordtekst { fill: var(--primair, var(--primair)); } .sf-offline .sf-bordklein { fill: #495057; }
.sf-offline .sf-bordtekst-schaduw { opacity: .08; }
/* ποΈ Publiek in diepte: achteraan vager, vooraan groter; een paar staan, klappen of zwaaien. */
.sf-publiek-ver { opacity: .72; } .sf-tribune-dak { stroke: #C3D1DE; stroke-width: 3; stroke-linecap: round; opacity: .0; }
.sf-reling { stroke: #9AA8B6; stroke-width: 2; stroke-linecap: round; } html.donker .sf-reling { stroke: #4B5D70; }
.sf-klap circle:first-child { animation: sf-klap .5s ease-in-out infinite alternate; } @keyframes sf-klap { to { transform: translateX(1.6px); } }
@media (prefers-reduced-motion: reduce) { .sf-klap circle { animation: none !important; } }
/* βοΈ Licht in het kamp is warm; π zaallampen binnen; π wijzen. */
.sf-buiten .sf-shirtlicht, .sf-waterscouting .sf-shirtlicht { stroke: #FFC078; opacity: .6; stroke-width: 2; }
.sf-lampkap { fill: #495057; } .sf-lamplicht { fill: #FFF3BF; } .sf-lampkegel { fill: #FFF8DB; opacity: .13; animation: sf-bundel 6s ease-in-out infinite alternate; } .sf-lampkegel-1 { animation-delay: -2s; } .sf-lampkegel-2 { animation-delay: -4s; }
html.donker .sf-lampkegel { opacity: .08; }
.sf-wijs { animation: sf-wijs2 2.6s ease-in-out infinite; } @keyframes sf-wijs2 { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .sf-lampkegel, .sf-wijs { animation: none !important; } }
/* π₯οΈ beheer (licentiebeheer): beheerkamer met raam, dashboard, serverkasten, bureau met laptops en een sleutel als middelpunt. */
.sf-lucht-kantoor { fill: #DCE8F2; } html.donker .sf-lucht-kantoor { fill: #1D2B36; } .sf-gras-beheer { fill: #B9C6D2; } html.donker .sf-gras-beheer { fill: #2A3A48; }
.sf-plint-w { stroke: #A9B8C6; stroke-width: 4; } .sf-raamkozijn { fill: #fff; } .sf-raamlucht { fill: #7CC4F2; } .sf-stad { fill: #5B7A99; } .sf-raamkruis-w { stroke: #fff; stroke-width: 3; }
.sf-stadlicht { fill: #FFE066; animation: sf-lampje 4s ease-in-out infinite; } .sf-stadlicht-1 { animation-delay: -1.4s; } .sf-stadlicht-2 { animation-delay: -2.8s; }
html.donker .sf-raamlucht { fill: #22375A; } html.donker .sf-raamkozijn { fill: #3B4F61; }
.sf-dashrand { fill: #2B3440; } .sf-dashvlak { fill: #17212B; } .sf-dashkop { fill: #4DABF7; opacity: .7; } .sf-dashstip { fill: #40C057; animation: sf-lampje 1.6s ease-in-out infinite; }
.sf-dashbalk { fill: var(--primair, var(--primair)); transform-box: view-box; animation: sf-dashbalk 2.4s ease-in-out infinite alternate; } .sf-dashbalk-1 { animation-delay: -.4s; fill: var(--accent, var(--accent)); } .sf-dashbalk-2 { animation-delay: -.8s; } .sf-dashbalk-3 { animation-delay: -1.2s; fill: #F2A900; } .sf-dashbalk-4 { animation-delay: -1.6s; } .sf-dashbalk-5 { animation-delay: -2s; fill: #40C057; }
@keyframes sf-dashbalk { 0% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }
.sf-dashlijn { fill: none; stroke: #63E6BE; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; animation: sf-teken 3s ease-in-out infinite; } .sf-dashpunt { fill: #63E6BE; }
@keyframes sf-teken { 0% { stroke-dashoffset: 60; } 60%, 100% { stroke-dashoffset: 0; } }
.sf-rek { fill: #2B3440; } .sf-rekzijde { fill: #1F2730; } .sf-rekunit { fill: #3B4655; } .sf-rekgleuf { stroke: #252D37; stroke-width: 1.2; }
.sf-led { fill: #40C057; animation: sf-led 1.1s steps(2) infinite; } .sf-led-1 { animation-delay: -.3s; fill: #4DABF7; } .sf-led-2 { animation-delay: -.7s; } .sf-led-3 { animation-duration: 1.7s; fill: #FFD43B; }
.sf-led-rood { fill: #FA5252 !important; animation-duration: .6s; } @keyframes sf-led { 0% { opacity: 1; } 50% { opacity: .25; } }
.sf-rekdeur { fill: #3B4655; stroke: #252D37; stroke-width: 1.4; } .sf-kabel { fill: none; stroke: #343A40; stroke-width: 2.4; stroke-linecap: round; }
.sf-blad { fill: #C8A27A; } .sf-bladrand { fill: #8D6E63; } .sf-bureaufront { fill: #A9805C; } .sf-lade { stroke: #8D6447; stroke-width: 1.4; } .sf-ladeknop { fill: #6B4F3A; }
.sf-laptopdeksel { fill: #ADB5BD; } .sf-laptoplogo { fill: #fff; opacity: .7; } .sf-laptopvoet { fill: #868E96; }
.sf-schermgloed { fill: color-mix(in srgb, var(--primair-licht) 40%, white); opacity: .14; mix-blend-mode: screen; animation: sf-bundel 3s ease-in-out infinite alternate; }
.sf-typ { animation: sf-typ .28s ease-in-out infinite alternate; } .sf-typ-b { animation-delay: -.14s; } @keyframes sf-typ { from { transform: rotate(-4deg); } to { transform: rotate(6deg); } }
.sf-mokvlak { fill: var(--accent, var(--accent)); } .sf-mokoor { stroke: var(--accent, var(--accent)); stroke-width: 2; }
.sf-damp { fill: none; stroke: #ADB5BD; stroke-width: 1.4; stroke-linecap: round; opacity: .7; animation: sf-rook 3s ease-in infinite; }
.sf-pot { fill: #E8590C; } .sf-plantblad { fill: #2B9348; } .sf-plant { animation: none; }
.sf-sleutelring { fill: none; stroke: #F2A900; stroke-width: 7; } .sf-sleutelgat { fill: none; } .sf-sleutelbaard { fill: #F2A900; }
.sf-sleuteldraai { transform-origin: -14px 0; animation: sf-sleuteldraai 6s ease-in-out infinite; } @keyframes sf-sleuteldraai { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-20deg); } 86% { transform: rotate(8deg); } }
.sf-kwijt .sf-sleuteldraai { animation: sf-rond 1.4s linear infinite; }
.sf-vinkje circle { fill: #40C057; } .sf-vinkje path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .sf-stadlicht, .sf-dashstip, .sf-dashbalk, .sf-dashlijn, .sf-led, .sf-schermgloed, .sf-typ, .sf-damp, .sf-sleuteldraai { animation: none !important; } }
.sf-beheer .sf-lampkegel { opacity: .07; }
/* π€ Commissies (0.119.0): teller op π’ Afdeling, de rij commissies bij Naar wie?, de taken van de commissie op een activiteit en de kaart op Home. */
header .pil .pil-tel { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent, var(--accent)); color: #fff; font-size: 11px; line-height: 18px; text-align: center; box-sizing: border-box; }
.doel-groep { font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
html.donker .doel-groep { color: #9AA8B4; }
.commissie-taken { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #F4F8FB; border: 1px solid #DCE6EE; display: grid; gap: 6px; }
.commissie-taken .ct-van, .commissie-taken .ct-kop { font-size: 14px; }
.commissie-taken .ct-kop small { color: #6B7280; }
.commissie-taken .ct-taak { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid #E5ECF2; }
.commissie-taken .ct-taak input { width: 20px; height: 20px; flex: none; accent-color: #2B8A3E; }
.commissie-taken .ct-tekst { flex: 1; min-width: 0; display: grid; }
.commissie-taken .ct-tekst small { color: #6B7280; }
.commissie-taken .ct-taak.klaar .ct-naam { text-decoration: line-through; color: #868E96; }
.commissie-taken .ct-taak.mijn .ct-naam { font-weight: 700; }
.commissie-taken small.ct-bijna { color: #A84300; font-weight: 700; }
.commissie-taken small.ct-laat { color: #C92A2A; font-weight: 700; }
html.donker .commissie-taken { background: #1D2A33; border-color: #2C3B46; }
html.donker .commissie-taken .ct-taak { border-color: #2C3B46; }
html.donker .commissie-taken :is(.ct-kop small, .ct-tekst small) { color: #9AA5B1; }
/* βΏ !important: de algemene regel voor small in donker (hierboven) heeft het ook */
html.donker .commissie-taken small.ct-bijna { color: #FFC078 !important; }
html.donker .commissie-taken small.ct-laat { color: #FF8787 !important; }
.mijn-commissies { display: grid; gap: 6px; }
.mijn-commissies a.form { align-items: flex-start; }
.mijn-commissies .mc-emoji { font-size: 24px; line-height: 1.1; flex: none; }
.mijn-commissies .mc-midden { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mijn-commissies .mc-regel { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: #495057; }
.mijn-commissies .mc-roze { color: var(--accent-tekst); font-weight: 700; }
html.donker .mijn-commissies .mc-regel { color: #CED4DA; }
html.donker .mijn-commissies .mc-roze { color: color-mix(in srgb, var(--accent) 35%, white); }
/* π Label "Aanbevolen" (passkey) en het seintje op Home (0.120.0). */
.aanbevolen { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: #EBFBEE; color: #1B6B2F; vertical-align: 1px; white-space: nowrap; }
html.donker .aanbevolen { background: #1F3326; color: #8CE99A; }
.passkey-seintje { margin: 0 0 16px; padding: 16px 20px; border-radius: 18px; background: #F4FCF5; border: 2px solid #B2F2BB; }
.passkey-seintje h2 { margin: 0 0 6px; font-size: 18px; }
.passkey-seintje p { margin: 0 0 10px; }
html.donker .passkey-seintje { background: #17232B; border-color: #2B5A36; }
/* π§ Subnavigatie (0.121.3): één tabbalk voor alle pagina's (commissie, gebouw, bibliotheek, reserveren, kamplijsten, documenten,
sjablonen, verhuur). Altijd de laatste rij van een kopkaart (label, titel, uitleg en knoppen erboven mogen weg); zonder die rijen
een kaart met alleen de tabs (.subnav-kaart, views/partials/subnav.ejs). Gewone tabs met een dunne lijn eronder; de actieve in de
hoofdkleur, vet en 2px onderstreept. Een link naar een ander onderdeel (.subnav-verder, met βΊ) staat rechts. Op de telefoon één
regel die zijwaarts schuift, met een vervaging aan de rand zolang er meer is (.rand, basis.js). De !important's houden de oude
knopstijlen (.klein, .tab, .knop) eruit, die er via de id's en klassen voor de scripts nog aan hangen. */
.subnav { display: flex; align-items: stretch; gap: 2px; margin: 16px 0 0; padding: 0; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 #E3ECF2; }
.subnav::-webkit-scrollbar { display: none; }
.subnav[hidden] { display: none; }
.subnav > :is(a, button) { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 10px 12px 12px !important; min-height: 0;
border: 0 !important; border-radius: 8px 8px 0 0 !important; background: none !important; box-shadow: none !important;
font: inherit; font-size: 14px !important; font-weight: 600; line-height: 1.2; color: #646B78 !important; text-decoration: none; white-space: nowrap; cursor: pointer; }
.subnav > :is(a, button)[hidden] { display: none; }
.subnav > :is(a, button):hover { color: var(--primair-tekst) !important; background: rgba(0, 137, 192, .06) !important; }
.subnav > :is(a, button):focus-visible { outline: 2px solid var(--primair); outline-offset: -2px; }
.subnav > :is(.aan, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"]) { color: var(--primair-tekst) !important; font-weight: 700; box-shadow: inset 0 -2px 0 currentColor !important; }
.subnav > .subnav-verder { margin-left: auto; color: var(--primair-tekst) !important; font-weight: 700; }
.subnav :is(.subnav-tel, .cm-tel) { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent, var(--accent)); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.subnav small { font-weight: 400; }
.subnav small.tag { background: #EEF1F4; color: inherit; box-shadow: none; }
html.donker .subnav { box-shadow: inset 0 -1px 0 #26343D; }
/* Dubbel .subnav: sterker dan html.donker :is(.chip, .tab, β¦, .melding.info) met zijn !important. */
html.donker .subnav.subnav > :is(a, button) { background: none !important; color: #9AA5B1 !important; }
html.donker .subnav.subnav > :is(a, button):hover { color: color-mix(in srgb, var(--primair-licht) 40%, white) !important; background: rgba(79, 195, 247, .08) !important; }
html.donker .subnav.subnav > :is(.aan, [aria-current="page"], [aria-selected="true"], [aria-pressed="true"], .subnav-verder) { color: color-mix(in srgb, var(--primair-licht) 40%, white) !important; }
html.donker .subnav small.tag { background: #26343D; }
.subnav.rand { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
/* Als laatste rij van een kopkaart: iets dichter op de onderrand. Een kaart met alleen de tabs: smal, zonder eigen lijn. */
.subnav:not(:last-child) { margin-bottom: 12px; }
.kaart > .subnav:last-child { margin-bottom: -6px; }
.kaart.subnav-kaart { padding: 6px 12px 0; }
.kaart.subnav-kaart > .subnav { margin: 0; box-shadow: none; }
/* Een tabkaart boven een main die het script zelf vult (gebouw): even breed als main, en net als de eerste kaart over de kop. */
.subnav-boven { position: relative; z-index: 1; max-width: 680px; margin: -20px auto 0; padding: 0 14px; }
@media (min-width: 900px) { .subnav-boven { max-width: 1000px; padding: 0 20px; } }
@media (min-width: 1300px) { .subnav-boven { max-width: 1200px; } }
@media (min-width: 1700px) { .subnav-boven { max-width: 1400px; } }
.subnav-boven + main { margin-top: 0; }
@media (max-width: 600px) {
.subnav { margin-left: -4px; margin-right: -4px; }
.subnav > :is(a, button) { padding: 10px 10px 12px !important; }
.subnav > .subnav-verder { margin-left: 0; }
.subnav-boven { padding: 0 8px; }
.kaart.subnav-kaart { padding: 4px 8px 0; }
}
@media print { .subnav, .subnav-kaart { display: none !important; } }
/* πΌοΈ Het eigen pictogram van een commissie (0.121.3): in de kop van de pagina, op Home (Mijn commissies) en bij de taken van een activiteit. */
header h1 .kop-icoon { display: inline-block; width: 1.1em; height: 1.1em; object-fit: contain; vertical-align: -0.18em; margin-right: .3em; border-radius: 6px; }
.mijn-commissies .mc-emoji img { display: block; width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.ct-pict { display: inline-block; width: 1.2em; height: 1.2em; object-fit: contain; vertical-align: -0.25em; border-radius: 4px; }
/* βΈ Inklapbare kaarten (0.121.3): een met een kop (h2/h3) in de summary, en elke .inzage-kaart. Geen pijltje van de browser
(dat stond los boven de kop, want de kop is een blok), wel βΈ / βΎ achter de kop, op elke pagina hetzelfde. Kaarten met een eigen
pijltje (.kd-gebruik, de cijfers) houden dat. */
:is(.inzage-kaart, details:has(> summary > :is(h2, h3))):not(.kd-gebruik) > summary { list-style: none; cursor: pointer; }
:is(.inzage-kaart, details:has(> summary > :is(h2, h3))):not(.kd-gebruik) > summary::-webkit-details-marker { display: none; }
:is(.inzage-kaart, details:has(> summary > :is(h2, h3))):not(.kd-gebruik) > summary > :is(h2, h3) { display: inline-block; margin: 0; }
:is(.inzage-kaart, details:has(> summary > :is(h2, h3))):not(.kd-gebruik) > summary::after { content: " βΈ"; color: #9AA5B1; }
:is(.inzage-kaart, details:has(> summary > :is(h2, h3))):not(.kd-gebruik)[open] > summary::after { content: " βΎ"; }
details.kaart:not(.inzage-kaart):not(.kd-gebruik)[open] > summary:has(> :is(h2, h3)) { margin-bottom: 12px; }
/* π 0.123.0 Klopt dit? (src/landvraag.ts): de kaart op Home, de knoppen in de bel, de pagina Was jij dit?, π Toegang dicht bij Personen
en π Verwachte landen. Vlaggen zijn emoji (het eigen vlaglettertype tekent ze ook op Windows). */
/* π Klopt dit? op Home: per open vraag een regel. Warm (oranje), niet rood: het is een vraag, nog geen alarm. */
.landvraag { margin: 0 0 16px; padding: 16px 20px 6px; border-radius: 18px; background: #FFF7EC; border: 2px solid #FFD8A8; }
.landvraag h2 { margin: 0 0 2px; font-size: 18px; }
.landvraag > .lv-intro { margin: 0 0 6px; color: #6B5B45; font-size: 14px; }
.lv-rij { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-top: 1px solid rgba(160, 110, 40, .18); }
.lv-rij:first-of-type { border-top: 0; }
.lv-rij > .avatar { grid-row: 1 / span 4; margin-top: 2px; }
.lv-wat { margin: 0; line-height: 1.45; }
.lv-wat b { font-weight: 800; }
.lv-wanneer { margin: 2px 0 0; font-size: 13px; color: #6B7280; }
.lv-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.lv-knoppen .knop { padding: 9px 14px; }
.lv-weet { font: inherit; font-size: 13px; font-weight: 700; border: 0; background: none; color: var(--primair-tekst, color-mix(in srgb, var(--primair) 88%, black)); padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lv-stand { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--primair-licht) 10%, white); color: #0B4F6C; font-size: 13px; font-weight: 700; justify-self: start; }
.lv-uitleg { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #6B7280; }
html.donker .landvraag { background: #2A2116; border-color: #6B4A1E; }
html.donker .landvraag > .lv-intro { color: #D9C6A5; }
html.donker .lv-rij { border-top-color: rgba(255, 200, 120, .14); }
html.donker .lv-wanneer, html.donker .lv-uitleg { color: #9AA5B1; }
html.donker .lv-stand { background: rgba(79, 195, 247, .14); color: #A5DFF7; }
html.donker .lv-weet { color: color-mix(in srgb, var(--primair-licht) 70%, white); }
@media (max-width: 560px) {
.landvraag { padding: 14px 14px 4px; }
.lv-rij { column-gap: 10px; }
.lv-knoppen .knop { flex: 1 1 auto; text-align: center; }
}
/* π In de bel: de knoppen onder de tekst (zelfde plek als de feedbackknoppen). */
.melding-regel.lv-met-knoppen { flex-wrap: wrap; }
.melding-regel .lv-bel { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 10px; }
.melding-regel .lv-bel .lv-stand { margin: 0; }
header .menu-paneel .lv-bel button.klein { display: inline-flex; align-items: center; width: auto; min-height: 32px; padding: 5px 12px; border: 1px solid #DEE2E6; border-radius: 999px;
background: #fff; color: var(--primair-tekst); font-size: 13px; }
header .menu-paneel .lv-bel button.klein.gevaar { color: #C92A2A; border-color: #FFC9C9; }
header .menu-paneel .lv-bel button.klein:hover { background: #EEF9FE; }
header .menu-paneel .lv-bel button.klein.gevaar:hover { background: #FFF0F0; }
html.donker header .menu-paneel .lv-bel button.klein { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #A5DFF7; }
html.donker header .menu-paneel .lv-bel button.klein.gevaar { color: #FF8787; border-color: rgba(255, 107, 107, .35); }
.landvraag a { color: var(--primair-tekst, color-mix(in srgb, var(--primair) 88%, black)); font-weight: 700; }
html.donker .landvraag a { color: color-mix(in srgb, var(--primair-licht) 70%, white); }
/* π Was jij dit? (de pagina via de mail of de melding) */
.inlogvraag .lv-groot { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.inlogvraag .knoppen-rij { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.inlogvraag .knoppen-rij .knop { flex: 1 1 200px; text-align: center; padding: 13px 16px; }
.inlogvraag dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #F3FBFE; font-size: 15px; }
.inlogvraag dt { color: #6B7280; }
.inlogvraag dd { margin: 0; font-weight: 700; }
html.donker .inlogvraag dl { background: #17232B; }
/* π Toegang dicht (Personen): een regel onder de persoon, zoals bij vertrek. */
.toegang-dicht-rij td { background: #FFF0F0; font-size: 13px; padding: 9px 10px; line-height: 1.5; }
.toegang-dicht-rij td b { color: #C92A2A; }
.toegang-dicht-rij .klein { margin-left: 6px; }
.toegang-dicht-rij .dicht-inhoud { position: sticky; left: 10px; max-width: calc(100vw - 92px); white-space: normal; }
tr.dicht td input, tr.dicht td summary { opacity: .55; }
.dicht-teken { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #FFE3E3; color: #C92A2A; font-size: 12px; font-weight: 800; white-space: nowrap; }
html.donker .toegang-dicht-rij td { background: #3A1A1C; }
html.donker .toegang-dicht-rij td b { color: #FF8787; }
html.donker .dicht-teken { background: rgba(255, 107, 107, .16); color: #FF8787; }
/* π Verwachte landen (βοΈ Instellingen) */
.landen-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; padding: 0; list-style: none; }
.land-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #F3FBFE; border: 1px solid color-mix(in srgb, var(--primair-licht) 20%, white); font-weight: 700; }
.land-chip .code { color: #6B7280; font-size: 12px; font-weight: 700; }
.land-chip .weg { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: #9AA5B1; font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.land-chip .weg:hover, .land-chip .weg:focus-visible { background: rgba(224, 49, 49, .12); color: #E03131; }
html.donker .land-chip { background: #17232B; border-color: #2A4250; }
html.donker .land-chip .code { color: #9AA5B1; }
.land-zoek { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; max-width: 520px; }
.land-veld { position: relative; flex: 1 1 240px; min-width: 0; }
.land-veld input { width: 100%; box-sizing: border-box; margin: 0; }
.land-erbij-kop { margin: 18px 0 8px; font-size: 15px; }
#landenStand { margin-top: 10px; }
.landen-recent li .klein { margin-left: 4px; }
.land-keuzes { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 40, 70, .18); border: 1px solid #E3E8EC; }
.land-keuzes li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.land-keuzes li .code { margin-left: auto; color: #6B7280; font-size: 12px; font-weight: 700; }
.land-keuzes li[aria-selected="true"] { background: color-mix(in srgb, var(--primair-licht) 10%, white); }
html.donker .land-keuzes { background: #17232B; border-color: #2A4250; }
html.donker .land-keuzes li[aria-selected="true"] { background: rgba(79, 195, 247, .14); }
.landen-recent { margin: 16px 0 0; }
.landen-recent h3 { margin: 0 0 6px; font-size: 15px; }
.landen-recent ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.landen-recent li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.landen-recent .uitkomst { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.landen-recent .uitkomst.goed { background: #E6FFEC; color: #116329; }
.landen-recent .uitkomst.fout { background: #FFE3E3; color: #C92A2A; }
.landen-recent .uitkomst.open { background: #FFF3E0; color: #8A4B00; }
html.donker .landen-recent .uitkomst.goed { background: rgba(81, 207, 102, .14); color: #8CE99A; }
html.donker .landen-recent .uitkomst.fout { background: rgba(255, 107, 107, .16); color: #FF8787; }
html.donker .landen-recent .uitkomst.open { background: rgba(255, 169, 77, .16); color: #FFC078; }
.vlag-emoji { font-size: 1.15em; line-height: 1; }
.inlogvraag .lv-stap2 { border: 1px solid color-mix(in srgb, var(--primair-licht) 20%, white); border-radius: 12px; padding: 10px 14px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
.inlogvraag .lv-stap2 legend { font-weight: 700; padding: 0 4px; }
.inlogvraag .lv-stap2 input { width: 100%; box-sizing: border-box; font-size: 20px; letter-spacing: .3em; text-align: center; }
html.donker .inlogvraag .lv-stap2 { border-color: #2A4250; }
/* De keuzelijst van Land erbij over de kaart eronder (die heeft een eigen stapel door de blur). */
#landenKaart:has(.land-keuzes:not([hidden])) { position: relative; z-index: 20; }