:root {
  /* Maatvoering (stijlgids: "Maatvoering"): alleen deze afrondingen, schaduwen en afstanden */
  --r-mini: 4px;
  --r-klein: 8px;
  --r: 12px;
  --r-groot: 16px;
  --schaduw-1: 0 1px 3px rgba(0, 0, 0, 0.09), 0 1px 2px rgba(0, 0, 0, 0.05);
  --schaduw-2: 0 4px 14px rgba(0, 0, 0, 0.13);
  --schaduw-3: 0 10px 32px rgba(0, 0, 0, 0.26);
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --snel: 0.1s;
  --soepel: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root {
  --kleur-hoofd: #0b6e6e;
  --kleur-hoofd-donker: #095656;
  --tekst-hoofd: var(--kleur-hoofd);
  --tekst-hoofd-donker: var(--kleur-hoofd-donker);
  --kleur-accent: #e8a33d;
  --kleur-achtergrond: #e9efee;
  --kleur-kaart: #ffffff;
  --kleur-tekst: #222;
  --kleur-tekst-licht: #666;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--letter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  line-height: 1.6;
}

/* Navigatie */
nav {
  background: var(--kleur-hoofd-donker);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

nav .logo {
  color: white;
  font-weight: bold;
  font-size: 1.3rem;
  text-decoration: none;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 0.95rem;
}

nav a:hover,
nav a.actief {
  text-decoration: underline;
}

/* Grote banner met logo op de homepage */
header.banner {
  background-image: linear-gradient(135deg, rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.55), rgba(var(--kleur-hoofd-donker-rgb, 9, 86, 86), 0.65)), var(--standaard-kop, url("/images/texel-banner.jpg"));
  background-size: cover;
  background-position: center 30%;
  color: white;
  padding: 5rem 1.5rem;
  text-align: center;
  position: relative;
}

header.banner .foto-credit {
  position: absolute;
  right: 0.75rem;
  bottom: 0.4rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

header.banner .foto-credit a {
  color: inherit;
}

.logo-groot {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.logo-groot svg {
  width: 64px;
  height: 64px;
}

.logo-groot .logo-tekst {
  text-align: left;
}

.logo-groot .logo-tekst .naam {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1;
}

.logo-groot .logo-tekst .plek {
  font-size: 1.1rem;
  letter-spacing: 4px;
  opacity: 0.85;
  text-transform: uppercase;
}

header.banner p.tagline {
  margin: 0.5rem 0 0 0;
  font-size: 1.15rem;
  opacity: 0.9;
}

/* Kleinere hero voor overige pagina's */
header.hero {
  background: linear-gradient(135deg, var(--kleur-hoofd), var(--kleur-hoofd-donker));
  color: white;
  padding: 3.5rem 1.5rem;
  text-align: center;
}

header.hero h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2.2rem;
}

header.hero p {
  margin: 0;
  font-size: 1.05rem;
  opacity: 0.9;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

section {
  margin-bottom: 2.5rem;
}

h2 {
  color: var(--tekst-hoofd-donker);
}

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.kaart {
  background: var(--kleur-kaart);
  border-radius: var(--r-klein);
  padding: 1.25rem;
  box-shadow: var(--schaduw-1);
}

.kaart h3 {
  margin-top: 0;
  color: var(--tekst-hoofd-donker);
}

button,
.knop {
  background: var(--kleur-accent);
  color: #222;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-klein);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
}

button:hover,
.knop:hover {
  opacity: 0.9;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 450px;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
}

input,
textarea {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: var(--r-klein);
  font-family: inherit;
  font-size: 1rem;
}

footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--kleur-tekst-licht);
  font-size: 0.9rem;
  border-top: 1px solid #e0e0e0;
}

@media (max-width: 500px) {
  nav {
    flex-direction: column;
    gap: 0.75rem;
  }
  header.hero h1 {
    font-size: 1.8rem;
  }
  .logo-groot {
    flex-direction: column;
    text-align: center;
  }
  .logo-groot .logo-tekst {
    text-align: center;
  }
  .logo-groot .logo-tekst .naam {
    font-size: 2rem;
  }
}

/* ---------- Gedeeld ---------- */
[hidden] { display: none !important; }
.klein { font-size: 0.85rem; color: var(--kleur-tekst-licht); }
.ruimte { flex: 1; }
.laden, .leeg { color: var(--kleur-tekst-licht); }
.fout-tekst { color: #b3261e; }

.knop-licht {
  background: #e7eeee;
  color: var(--tekst-hoofd-donker);
}
.link-knop {
  background: none;
  border: none;
  padding: 0;
  color: var(--tekst-hoofd);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.link-knop.gevaar { color: #b3261e; }
.klein-knop { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

.kop-met-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.kop-met-knop h2 { margin: 0; }

.leeg-blok {
  border: 2px dashed #cfd8d8;
  border-radius: var(--r-klein);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--kleur-tekst-licht);
  background: #fafafa;
}

#ingelogd { margin-left: auto; }
.ik-knop {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}
.dev-wissel {
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  border-radius: var(--r-klein);
  border: 1px dashed #e8a33d;
  background: #fff8ec;
}

#melding {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 150%);
  background: #222;
  color: white;
  padding: 0.75rem 1.1rem;
  border-radius: var(--r-klein);
  max-width: calc(100% - 2rem);
  white-space: pre-line;
  transition: transform 0.25s;
  z-index: 100;
}
#melding.zichtbaar { transform: translate(-50%, 0); }
#melding.fout { background: #b3261e; }

/* ---------- Dialogen ---------- */
.formulier-dialoog {
  border: none;
  border-radius: var(--r);
  padding: 1.5rem;
  width: min(480px, calc(100% - 2rem));
  box-shadow: var(--schaduw-3);
}
.formulier-dialoog::backdrop { background: rgba(0, 0, 0, 0.45); }
.formulier-dialoog h2 { margin-top: 0; }
.formulier-dialoog form { max-width: none; }
.formulier-dialoog label { display: flex; flex-direction: column; gap: 0.3rem; }
.twee-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.knoppen-rij { display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.klein-rij { justify-content: flex-start; gap: 1rem; }

.personen-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; }
.persoon-knop { background: #eef7f7; color: var(--tekst-hoofd-donker); }

/* ---------- Homepage ---------- */
header.banner.banner-compact { padding: 3rem 1.5rem; }

main.home {
  max-width: 1150px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2.5rem;
  align-items: start;
}

.jaar-blok { margin-bottom: 2rem; }
.jaar-kop {
  border-bottom: 2px solid var(--kleur-accent);
  padding-bottom: 0.3rem;
  color: var(--tekst-hoofd-donker);
}

.uitje-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.uitje-kaart {
  background: var(--kleur-kaart);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--schaduw-1);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.uitje-kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw-2); }
.uitje-kaart img, .uitje-kaart .geen-omslag {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.uitje-kaart .geen-omslag {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: #e7eeee;
}
.uitje-kaart-tekst { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.uitje-kaart.nieuw { outline: 3px solid var(--kleur-accent); }

.tabjes { display: flex; background: #e7eeee; border-radius: var(--r-klein); padding: 3px; }
.tabje {
  background: none;
  color: var(--tekst-hoofd-donker);
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
  border-radius: var(--r-klein);
}
.tabje.actief { background: white; box-shadow: var(--schaduw-1); }

.tijdlijn { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.tijdlijn li {
  background: var(--kleur-kaart);
  border-radius: var(--r-klein);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.6rem;
  box-shadow: var(--schaduw-1);
  border-left: 4px solid transparent;
}
.tijdlijn li.nieuw { border-left-color: var(--kleur-accent); }
.tijdlijn li.leeg, .tijdlijn li.laden { background: none; box-shadow: none; padding-left: 0; }
.tijdlijn p { margin: 0 0 0.3rem 0; line-height: 1.4; }
.tijdlijn a { color: var(--tekst-hoofd); }
.tijdlijn .tijd { font-size: 0.8rem; color: var(--kleur-tekst-licht); }
.tijdlijn .citaat {
  border-left: 3px solid #d7e3e3;
  padding-left: 0.6rem;
  color: #444;
  font-style: italic;
  overflow-wrap: anywhere;
}
.tijdlijn-fotos { display: flex; gap: 0.35rem; margin: 0.3rem 0 0.4rem; flex-wrap: wrap; }
.tijdlijn-fotos img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-mini); display: block; }

/* ---------- Uitje-pagina ---------- */
header.hero-uitje { position: relative; padding: 2.75rem 1.5rem 2.25rem; }
header.hero-uitje .terug {
  position: absolute;
  left: 1.25rem;
  top: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-decoration: none;
}
main.uitje-pagina { max-width: 1150px; }
.beschrijving { white-space: pre-line; max-width: 700px; }

.actie-balk { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

.upload-voortgang { margin-bottom: 1.25rem; }
.upload-voortgang .balk { height: 8px; background: #e7eeee; border-radius: var(--r-mini); overflow: hidden; }
.upload-voortgang .vulling { height: 100%; width: 0; background: var(--kleur-hoofd); transition: width 0.3s; }
.upload-voortgang .tekst { font-size: 0.85rem; color: var(--kleur-tekst-licht); }

.foto-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.foto-tegel {
  position: relative;
  padding: 0;
  border-radius: var(--r-klein);
  overflow: hidden;
  background: #ddd;
  aspect-ratio: 1 / 1;
  display: block;
}
.foto-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.foto-tegel:hover img { transform: scale(1.04); }
.tegel-tellers {
  position: absolute;
  right: 4px;
  bottom: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-mini);
  white-space: pre;
}

.kop-datum { font-weight: normal; }

/* ---------- Reacties ---------- */
.reacties { list-style: none; padding: 0; margin: 0 0 0.75rem 0; }
.reacties li { padding: 0.55rem 0; border-bottom: 1px solid #eee; }
.reactie-kop { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.reactie-kop .naam { font-weight: 700; color: var(--kleur-tekst); text-decoration: none; }
.reactie-kop .tijd { font-size: 0.8rem; color: var(--kleur-tekst-licht); }
.reactie-kop .link-knop { font-size: 0.75rem; font-weight: normal; color: var(--kleur-tekst-licht); }
.reactie-tekst { margin: 0.15rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.vermelding {
  color: var(--tekst-hoofd);
  background: #e3f1f1;
  border-radius: var(--r-mini);
  padding: 0 0.2rem;
  text-decoration: none;
  font-weight: 600;
}

.reactie-formulier { flex-direction: row; align-items: flex-end; gap: 0.5rem; max-width: none; }
.veld-met-suggesties { position: relative; flex: 1; }
.veld-met-suggesties textarea { width: 100%; resize: vertical; display: block; }
.suggesties {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  background: white;
  border-radius: var(--r-klein);
  box-shadow: var(--schaduw-2);
  min-width: 160px;
  z-index: 5;
}
.suggesties button {
  width: 100%;
  text-align: left;
  background: none;
  padding: 0.45rem 0.6rem;
  font-weight: normal;
}
.suggesties button:hover { background: #eef7f7; }

/* ---------- Fotoviewer ---------- */
.viewer {
  border: none;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: #111;
  color: #eee;
}
.viewer::backdrop { background: #111; }
.viewer[open] { display: flex; flex-direction: column; }

.viewer-balk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #000;
}
.viewer-knop {
  background: none;
  color: white;
  font-size: 1.25rem;
  padding: 0.35rem 0.6rem;
  text-decoration: none;
  line-height: 1;
}

.viewer-inhoud { flex: 1; display: flex; min-height: 0; }
.viewer-beeld {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.5rem;
}
.foto-houder { position: relative; display: inline-block; line-height: 0; }
.foto-houder img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 5rem);
  user-select: none;
}
.foto-houder.tag-modus { cursor: crosshair; outline: 2px dashed var(--kleur-accent); }

.tag-laag { position: absolute; inset: 0; pointer-events: none; }
.tag-label {
  position: absolute;
  transform: translate(-50%, 6px);
  background: rgba(0, 0, 0, 0.72);
  color: white;
  font-size: 0.8rem;
  line-height: 1.2;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-mini);
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
}
.tag-label::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: none;
  border-bottom-color: rgba(0, 0, 0, 0.72);
}
.tag-hint {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kleur-accent);
  color: #222;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  margin: 0;
  white-space: nowrap;
}
.tag-hint .link-knop { color: #222; }

.pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: white;
  font-size: 2rem;
  padding: 0.2rem 0.8rem 0.4rem;
  border-radius: var(--r-klein);
  z-index: 2;
}
.pijl.vorige { left: 0.5rem; }
.pijl.volgende { right: 0.5rem; }

.viewer-paneel {
  width: 360px;
  background: white;
  color: var(--kleur-tekst);
  overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.foto-info p { margin: 0 0 0.3rem; }
.bijschrift { font-size: 1.05rem; }
.tags-blok { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.tag-lijst { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #eef7f7;
  border-radius: 999px;
  padding: 0.15rem 0.35rem 0.15rem 0.7rem;
  font-size: 0.9rem;
}
.tag-chip a { color: var(--tekst-hoofd-donker); text-decoration: none; font-weight: 600; }
.chip-weg {
  background: none;
  padding: 0 0.3rem;
  font-size: 0.8rem;
  color: var(--kleur-tekst-licht);
}

/* ---------- Mobiel ---------- */
@media (max-width: 900px) {
  main.home { grid-template-columns: 1fr; }
  .tijdlijn-deel { order: -1; }
  .viewer-inhoud { flex-direction: column; overflow-y: auto; }
  .viewer-beeld { flex: none; min-height: 55dvh; }
  .foto-houder img { max-height: 70dvh; }
  .viewer-paneel { width: auto; flex: none; overflow: visible; }
}

@media (max-width: 500px) {
  main { padding: 1.5rem 1rem; }
  nav ul { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  #ingelogd { margin-left: 0; }
  header.banner.banner-compact { padding: 2rem 1rem; }
  .uitje-kaarten { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .uitje-kaart-tekst { padding: 0.5rem 0.6rem; }
  .foto-raster { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .twee-kolommen { grid-template-columns: 1fr; }
  .pijl { display: none; }
  .reactie-formulier { flex-direction: column; align-items: stretch; }
}

/* ---------- Spelletjes: gedeeld scorebord ---------- */
.speelt-als { margin: 0; font-size: 1.05rem; }
.record-melding { font-weight: 600; color: var(--tekst-hoofd-donker); min-height: 1.5em; }
#scorelijst li.ik { font-weight: 700; color: var(--tekst-hoofd-donker); }
#scorelijst li.leeg { color: var(--kleur-tekst-licht); display: block; }
.mijn-potjes h3 { margin: 1.25rem 0 0.25rem; font-size: 1rem; color: var(--tekst-hoofd-donker); }
#mijn-potjes { padding-left: 1.25rem; margin: 0; font-size: 0.9rem; }
#mijn-potjes li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; }
.tijdlijn .record-regel { font-size: 1.05rem; }
button:disabled { opacity: 0.5; cursor: default; }

/* ---------- Spelletjes op de telefoon ---------- */
/* Geen scrollen, zoomen of tekst selecteren terwijl je speelt */
.snake-spel #canvas,
.touch-knoppen {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Knoppen alleen op apparaten met een touchscreen */
.touch-knoppen { display: none; }

@media (pointer: coarse) {
  .touch-knoppen { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
  .touch-knoppen button {
    font-size: 1.4rem;
    padding: 0.85rem 0;
    -webkit-tap-highlight-color: transparent;
  }
  .touch-knoppen button:active { background: var(--kleur-hoofd); color: white; }

  .richtingkruis {
    grid-template-columns: repeat(3, 4.5rem);
    grid-template-areas: ". omhoog ." "links omlaag rechts";
    justify-content: center;
  }
  [data-richting="omhoog"] { grid-area: omhoog; }
  [data-richting="links"] { grid-area: links; }
  [data-richting="omlaag"] { grid-area: omlaag; }
  [data-richting="rechts"] { grid-area: rechts; }

  .flipperknoppen { grid-template-columns: 1fr 1fr 1fr; }
  .flipperknoppen button { font-size: 1rem; padding: 1.1rem 0; }
  .flipperknoppen [data-knop="plunger"] { background: var(--kleur-hoofd-donker); color: white; }
}

@media (max-width: 700px) {
  main .snake-layout { gap: 1rem; }
  main .snake-spel { padding: 0.75rem; width: 100%; }
  main .scorebord { width: 100%; }
  /* Speelveld zo groot mogelijk, maar altijd helemaal in beeld */
  .snake-spel #canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 12rem);
    margin: 0 auto;
  }
  main .scorebalk { font-size: 0.85rem; gap: 0.25rem 0.75rem; }
}

/* Grotere tikvlakken op touchscreens (minimaal ~44px) */
@media (pointer: coarse) {
  .tabje { padding: 0.55rem 1rem; }
  .viewer-knop { min-width: 44px; min-height: 44px; font-size: 1.4rem; }
  .chip-weg { min-width: 32px; min-height: 32px; font-size: 0.95rem; }
  .tag-chip { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .klein-rij .link-knop,
  .reactie-kop .link-knop { padding: 0.5rem 0; }
  .suggesties button { padding: 0.7rem 0.8rem; }
}

/* Aftelling 3-2-1 boven het speelveld */
.canvas-houder { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.aftelling {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--r-klein);
  color: white;
  font-size: clamp(3.5rem, 18vw, 8rem);
  font-weight: 800;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.aftelling .puls { display: inline-block; animation: aftel-puls 0.7s ease-out; }
@keyframes aftel-puls {
  from { transform: scale(1.6); opacity: 0; }
  30% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

/* Filmpjes */
.video-label {
  position: absolute;
  left: 4px;
  top: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-mini);
}
.foto-houder video {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 5rem);
  background: #000;
}
@media (max-width: 900px) {
  .foto-houder video { max-height: 70dvh; }
}

/* ---------- Emoji-reacties ---------- */
.emoji-balk { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.emoji-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #f1f4f4;
  border: 2px solid transparent;
  color: var(--kleur-tekst);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 40px;
  transition: transform 0.1s;
}
.emoji-knop .emoji { font-size: 1.2rem; line-height: 1; }
.emoji-knop.actief { background: #fff3df; border-color: var(--kleur-accent); }
.emoji-knop:active { transform: scale(1.15); }

/* ---------- Op deze dag ---------- */
.op-deze-dag { display: grid; gap: 0.75rem; margin-bottom: 2rem; }
.herinnering {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  background: linear-gradient(135deg, #fff8ec, #ffffff);
  border: 2px solid var(--kleur-accent);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.herinnering img, .herinnering .geen-omslag {
  width: 150px;
  min-height: 110px;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: #e7eeee;
}
.herinnering-tekst { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; padding: 0.75rem 1rem 0.75rem 0; }
.herinnering-wanneer { font-weight: 700; color: #b06d0b; font-size: 0.9rem; }
.herinnering strong { font-size: 1.15rem; }
.herinnering-actie { color: var(--tekst-hoofd); font-weight: 600; font-size: 0.9rem; }

.jaar-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.jaar-link { font-size: 0.9rem; font-weight: 600; color: var(--tekst-hoofd); text-decoration: none; }

/* ---------- Kaart ---------- */
header.hero-klein { padding: 2rem 1.5rem 1.75rem; }
main.kaart-pagina { max-width: 1150px; }
.kaart-balk { margin-bottom: 0.75rem; }
.schakelaar { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.kaart { height: min(70vh, 640px); border-radius: var(--r); box-shadow: var(--schaduw-1); z-index: 0; }
.kaart-pin {
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  background: var(--kleur-hoofd);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.kaart-pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaart-popup { display: flex; flex-direction: column; gap: 0.2rem; width: 180px; color: var(--kleur-tekst) !important; text-decoration: none; }
.kaart-popup img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-klein); margin-bottom: 0.3rem; }
.kaart-popup span { color: var(--kleur-tekst-licht); font-size: 0.8rem; }

/* ---------- Jaaroverzicht ---------- */
header.hero-jaar { padding: 2rem 1.5rem 2.5rem; }
header.hero-jaar h1 { font-size: 2.6rem; }
.jaar-keuze { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.jaar-tab {
  color: white;
  text-decoration: none;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}
.jaar-tab.actief { background: var(--kleur-accent); color: #222; }
main.jaar-pagina { max-width: 1100px; }

.cijfers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.cijfer {
  background: var(--kleur-kaart);
  border-radius: var(--r);
  padding: 1rem 0.5rem;
  text-align: center;
  box-shadow: var(--schaduw-1);
  display: flex;
  flex-direction: column;
}
.cijfer-icoon { font-size: 1.5rem; }
.cijfer strong { font-size: 1.8rem; color: var(--tekst-hoofd-donker); line-height: 1.2; }
.cijfer span:last-child { color: var(--kleur-tekst-licht); font-size: 0.85rem; }

.beste-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.beste-foto { position: relative; border-radius: var(--r-klein); overflow: hidden; aspect-ratio: 1 / 1; display: block; background: #ddd; }
.beste-foto.nummer-een { grid-column: span 2; grid-row: span 2; }
.beste-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beste-plek, .beste-hartjes {
  position: absolute;
  top: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.beste-plek { left: 6px; }
.beste-hartjes { right: 6px; }
.nummer-een .beste-plek { background: var(--kleur-accent); color: #222; font-size: 1rem; }
.beste-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.2rem 0.5rem 0.4rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prijzen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }
.prijs {
  background: var(--kleur-kaart);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  box-shadow: var(--schaduw-1);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  color: inherit;
  border-top: 4px solid var(--kleur-accent);
}
.prijs-kop { font-size: 0.85rem; font-weight: 700; color: var(--kleur-tekst-licht); text-transform: uppercase; letter-spacing: 0.03em; }
.prijs-winnaar { font-size: 1.6rem; color: var(--tekst-hoofd-donker); }
.prijs-winnaar::before { content: "🥇 "; }
.podium { list-style: none; padding: 0; margin: 0.5rem 0 0; border-top: 1px solid #eee; }
.podium li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; }

.uitgelicht-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.uitgelicht {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  background: var(--kleur-kaart);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--schaduw-1);
  text-decoration: none;
  color: inherit;
}
.uitgelicht img { width: 96px; height: 96px; object-fit: cover; flex-shrink: 0; }
.uitgelicht div { display: flex; flex-direction: column; padding-right: 0.75rem; }

@media (max-width: 700px) {
  .cijfers { grid-template-columns: repeat(3, 1fr); }
  .beste-fotos { grid-template-columns: repeat(3, 1fr); }
  .herinnering img, .herinnering .geen-omslag { width: 110px; }
  .kaart { height: 62vh; }
  header.hero-jaar h1 { font-size: 2rem; }
}

/* ---------- Personen en profiel ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.avatar-klein { width: 26px; height: 26px; font-size: 0.7rem; }
.avatar-groot { width: 88px; height: 88px; font-size: 2rem; border: 4px solid rgba(255, 255, 255, 0.85); }

.deelnemers-veld { border: 1px solid #ddd; border-radius: var(--r-klein); padding: 0.5rem 0.75rem 0.75rem; margin: 0; }
.deelnemers-veld legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.3rem; }
.deelnemers-kiezer { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 0.35rem; }
.deelnemer-optie {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: normal;
  padding: 0.3rem 0.4rem;
  border-radius: var(--r-klein);
  cursor: pointer;
}
.deelnemer-optie:has(input:checked) { background: #eef7f7; }
.deelnemer-optie input { margin: 0; }

.deelnemers-rij { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; align-items: center; margin-top: 0.9rem; }
.deelnemers-label { opacity: 0.85; font-size: 0.9rem; }
.deelnemer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.14);
  color: white;
  text-decoration: none;
  padding: 0.15rem 0.6rem 0.15rem 0.2rem;
  border-radius: 999px;
  font-size: 0.9rem;
}
.mini-avatars { display: flex; margin-top: 0.3rem; }
.mini-avatars .avatar { width: 22px; height: 22px; font-size: 0.6rem; border: 2px solid white; margin-left: -6px; }
.mini-avatars .avatar:first-child { margin-left: 0; }

header.hero-profiel { position: relative; padding: 2.5rem 1.5rem 1.75rem; }
header.hero-profiel h1 { margin-top: 0.6rem; }
.andere-personen { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; margin-top: 1rem; }
.andere-personen a { opacity: 0.8; text-decoration: none; }
.andere-personen a:hover { opacity: 1; }
main.profiel-pagina { max-width: 1100px; }

.aanwezig-jaar { margin-bottom: 1.25rem; }
.aanwezig-kop { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.aanwezig-balk { flex: 1; max-width: 240px; height: 8px; background: #e7eeee; border-radius: var(--r-mini); overflow: hidden; }
.aanwezig-balk span { display: block; height: 100%; background: var(--kleur-hoofd); }
.aanwezig-uitjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.5rem; }
.aanwezig-uitje {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  background: var(--kleur-kaart);
  border-radius: var(--r-klein);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--schaduw-1);
  border-left: 4px solid var(--kleur-hoofd);
}
.aanwezig-uitje img, .aanwezig-uitje .geen-omslag {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7eeee;
}
.aanwezig-tekst { display: flex; flex-direction: column; min-width: 0; padding-right: 0.5rem; }
.aanwezig-tekst strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aanwezig-uitje.gemist { border-left-color: #ccc; opacity: 0.55; }
.aanwezig-uitje.gemist img { filter: grayscale(1); }
.aanwezig-uitje.onbekend { border-left-color: #e0d2b8; }

.highscore-getal { font-size: 2rem; color: var(--tekst-hoofd-donker); line-height: 1.2; }
.beste-potjes { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.beste-potjes li span:first-child { font-weight: 600; margin-right: 0.5rem; }
.profiel-uitje h3 { margin-bottom: 0.5rem; }
.profiel-uitje h3 a { color: var(--tekst-hoofd-donker); }

/* Namen die naar een profiel linken */
.persoon-link { color: inherit; font-weight: 700; text-decoration: none; }
.persoon-link:hover { text-decoration: underline; color: var(--tekst-hoofd); }
.prijs-winnaar .persoon-link { color: var(--tekst-hoofd-donker); }
.prijs-link { margin-top: auto; padding-top: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--tekst-hoofd); text-decoration: none; }

/* ---------- Events ---------- */
.voorgesteld { margin-bottom: 2rem; }
.event-lijst { display: grid; gap: 0.75rem; }
.event-kaart {
  display: flex;
  gap: 0.9rem;
  background: var(--kleur-kaart);
  border-radius: var(--r);
  padding: 0.9rem 1rem;
  box-shadow: var(--schaduw-1);
  border-left: 5px solid var(--kleur-accent);
  transition: box-shadow 0.3s;
}
.event-kaart.geweest { opacity: 0.7; border-left-color: #ccc; }
.event-kaart.uitgelicht-kort { box-shadow: 0 0 0 4px var(--kleur-accent); }
.event-datum-blok {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 60px;
  background: #fff3df;
  border-radius: var(--r);
  color: #8a5300;
  line-height: 1.1;
}
.event-dag { font-size: 1.5rem; font-weight: 800; }
.event-maand { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.event-inhoud { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }
.event-kop { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.event-titel { font-size: 1.1rem; }
.event-aftel { font-size: 0.8rem; font-weight: 700; color: #b06d0b; background: #fff3df; padding: 0 0.45rem; border-radius: 999px; }
.event-beschrijving { margin: 0.2rem 0; white-space: pre-line; overflow-wrap: anywhere; }
.event-link { color: var(--tekst-hoofd); font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.event-aanmeldingen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.event-personen { display: inline-flex; vertical-align: middle; margin-left: 0.25rem; }
.event-personen a { margin-left: -5px; text-decoration: none; }
.event-personen a:first-child { margin-left: 0; }
.event-personen .avatar { border: 2px solid white; width: 24px; height: 24px; font-size: 0.6rem; }
.event-acties { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.35rem; }
.event-door { margin-left: auto; }
.aanmeld-knop {
  background: #eef7f7;
  color: var(--tekst-hoofd-donker);
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  border: 2px solid transparent;
}
.aanmeld-knop.actief { background: var(--kleur-hoofd); color: white; }
.event-kaart.compact .event-acties { margin-top: 0.15rem; }

/* Toevoegen aan agenda */
.agenda-menu { position: relative; }
.agenda-menu summary { list-style: none; cursor: pointer; }
.agenda-menu summary::-webkit-details-marker { display: none; }
.agenda-opties {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 10;
  background: white;
  border-radius: var(--r-klein);
  box-shadow: var(--schaduw-2);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  min-width: 230px;
}
.agenda-opties button, .agenda-opties a {
  background: none;
  color: var(--kleur-tekst);
  text-align: left;
  padding: 0.6rem 0.7rem;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--r-klein);
  text-decoration: none;
}
.agenda-opties button:hover, .agenda-opties a:hover { background: #eef7f7; }

/* ---------- Kalender ---------- */
main.kalender-pagina { max-width: 1150px; }
.kalender-kop { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kalender-kop h2 { margin: 0 0.4rem; min-width: 11ch; text-align: center; text-transform: capitalize; }
.kalender-legenda { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.6rem 0; }
.stip { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-mini); vertical-align: middle; }
.stip-event { background: var(--kleur-accent); }
.stip-uitje { background: var(--kleur-hoofd); }
.kalender {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: #dfe5e5;
  border: 1px solid #dfe5e5;
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.kalender-weekdag { background: #f1f4f4; text-align: center; font-weight: 700; font-size: 0.8rem; padding: 0.35rem 0; color: var(--kleur-tekst-licht); }
.kalender-dag { background: white; min-height: 92px; padding: 0.3rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.kalender-dag:hover { background: #fbfdfd; }
.kalender-dag.andere-maand { background: #fafafa; color: #aaa; }
.kalender-dag.verleden .kalender-nummer { color: #aaa; }
.kalender-dag.vandaag .kalender-nummer { background: var(--kleur-hoofd); color: white; }
.kalender-nummer {
  font-size: 0.85rem;
  font-weight: 700;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.kalender-items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kalender-item {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: var(--r-mini);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.item-event { background: #fff3df; color: #8a5300; }
.item-uitje { background: #e3f1f1; color: var(--tekst-hoofd-donker); }

@media (max-width: 700px) {
  .kalender-dag { min-height: 58px; padding: 0.15rem; }
  .kalender-item { font-size: 0; padding: 0; height: 6px; border-radius: var(--r-mini); }
  .item-event { background: var(--kleur-accent); }
  .item-uitje { background: var(--kleur-hoofd); }
  .event-kaart { padding: 0.75rem; gap: 0.7rem; }
  .event-door { margin-left: 0; width: 100%; }
  .agenda-opties { min-width: 210px; }
}

/* ---------- Uitgelicht in de header ---------- */
.uitgelicht-header { display: flex; justify-content: center; margin-top: 1.5rem; }
.uitgelicht-kaart {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  text-align: left;
  background: rgba(255, 255, 255, 0.95);
  color: var(--kleur-tekst);
  border-radius: var(--r-groot);
  overflow: hidden;
  max-width: 620px;
  width: 100%;
  box-shadow: var(--schaduw-3);
}
.uitgelicht-kaart > img { width: 190px; object-fit: cover; flex-shrink: 0; }
.uitgelicht-tekst { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1.1rem 0.9rem 0; min-width: 0; }
.uitgelicht-kaart > .uitgelicht-tekst:first-child { padding-left: 1.1rem; }
.uitgelicht-label { font-size: 0.8rem; font-weight: 800; color: #b06d0b; text-transform: uppercase; letter-spacing: 0.03em; }
.uitgelicht-titel { font-size: 1.35rem; font-weight: 800; color: var(--tekst-hoofd-donker); text-decoration: none; line-height: 1.2; }
.uitgelicht-titel:hover { text-decoration: underline; }
.uitgelicht-wanneer { font-size: 0.9rem; color: var(--kleur-tekst-licht); }
.uitgelicht-wie { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.uitgelicht-wie .mini-avatars { margin-top: 0; }
.uitgelicht-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.uitgelicht-link { color: var(--tekst-hoofd); font-weight: 600; font-size: 0.9rem; }

/* ---------- Wie gaan er mee? ---------- */
.aanmeld-lijst { display: flex; flex-direction: column; gap: 0.3rem; max-height: 60vh; overflow-y: auto; margin: 0.5rem 0 1rem; }
.aanmeld-rij { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid #f0f0f0; }
.aanmeld-naam { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; min-width: 0; }
.keuzes { display: inline-flex; background: #f1f4f4; border-radius: var(--r-klein); padding: 2px; flex-shrink: 0; }
.keuze {
  background: none;
  color: var(--kleur-tekst-licht);
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  border-radius: var(--r-klein);
  min-height: 36px;
}
.keuze.actief { background: white; color: var(--tekst-hoofd-donker); box-shadow: var(--schaduw-1); }
.keuze.actief:first-child { background: var(--kleur-hoofd); color: white; }

@media (max-width: 600px) {
  .uitgelicht-kaart { flex-direction: column; }
  .uitgelicht-kaart > img { width: 100%; height: 140px; }
  .uitgelicht-tekst { padding: 0.8rem 1rem; }
  .uitgelicht-titel { font-size: 1.2rem; }
  .keuze { padding: 0.35rem 0.5rem; }
}

/* Uitjes in de kalenderlijsten */
.event-omslag { width: 56px; height: 60px; object-fit: cover; border-radius: var(--r); flex-shrink: 0; }
.uitje-in-lijst { border-left-color: var(--kleur-hoofd); }
.uitje-in-lijst .event-aftel { background: #e3f1f1; color: var(--tekst-hoofd-donker); }
.uitje-in-lijst .event-titel { color: var(--kleur-tekst); font-weight: 700; text-decoration: none; }
.uitje-in-lijst .event-titel:hover { text-decoration: underline; }

/* ---------- Beheer ---------- */
main.beheer-pagina { max-width: 900px; }
.uitleg-blok {
  background: #eef7f7;
  border-left: 4px solid var(--kleur-hoofd);
  padding: 0.8rem 1rem;
  border-radius: var(--r-klein);
  margin: 1rem 0 1.5rem;
}
.beheer-nieuw { max-width: none; background: var(--kleur-kaart); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--schaduw-1); gap: 0.5rem; }
.beheer-nieuw h2 { margin: 0; font-size: 1.1rem; }
.beheer-velden { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0.6rem; align-items: center; }
.beheer-lijst { display: flex; flex-direction: column; gap: 0.4rem; }
.beheer-rij {
  display: grid;
  grid-template-columns: auto 1fr 1.3fr auto;
  gap: 0.6rem;
  align-items: center;
  background: var(--kleur-kaart);
  border-radius: var(--r-klein);
  padding: 0.5rem 0.7rem;
  box-shadow: var(--schaduw-1);
}
.beheer-rij.oud-lid { opacity: 0.75; }
.beheer-namen { display: flex; flex-direction: column; min-width: 0; }
.beheer-rij input { width: 100%; padding: 0.4rem 0.5rem; }
.deelnemer-optie.oud-lid, .persoon-knop.oud-lid { opacity: 0.7; font-style: italic; }
.oud-leden-knop { grid-column: 1 / -1; justify-self: start; }
.oud-lid-label { font-size: 0.9rem; font-weight: 600; background: rgba(255, 255, 255, 0.2); padding: 0.1rem 0.6rem; border-radius: 999px; vertical-align: middle; }

@media (max-width: 700px) {
  .beheer-velden { grid-template-columns: 1fr; }
  .beheer-rij { grid-template-columns: auto 1fr; }
  .beheer-rij > input, .beheer-rij > button, .beheer-rij > span:last-child { grid-column: 1 / -1; }
}

/* ---------- Installeren op beginscherm ---------- */
.installeer-melding {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(460px, calc(100% - 1.5rem));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  border-radius: var(--r-groot);
  padding: 0.75rem 0.8rem;
  box-shadow: var(--schaduw-3);
  z-index: 90;
  animation: installeer-in 0.3s ease-out;
}
.installeer-melding img { width: 44px; height: 44px; border-radius: var(--r); flex-shrink: 0; }
.installeer-tekst { display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.35; flex: 1; min-width: 0; }
.installeer-tekst strong { font-size: 0.95rem; }
.installeer-melding button { padding: 0.5rem 0.8rem; font-size: 0.9rem; flex-shrink: 0; }
.installeer-melding .installeer-sluit { background: none; color: var(--kleur-tekst-licht); padding: 0.4rem 0.5rem; }
@keyframes installeer-in { from { transform: translate(-50%, 120%); } to { transform: translate(-50%, 0); } }

/* ---------- AI-labels ---------- */
.ai-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: #f1f4f4;
  border-radius: var(--r-klein);
  padding: 0.5rem 0.8rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.label-filter, .label-rij { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.label-rij { margin-bottom: 0.3rem; }
.label-chip {
  background: #eef7f7;
  color: var(--tekst-hoofd-donker);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.label-chip.actief { background: var(--kleur-hoofd); color: white; }
.ai-blok { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.5rem; border-top: 1px solid #eee; }
.ai-beschrijving { margin: 0; font-style: italic; color: #444; }
.ai-nog {
  position: absolute;
  right: 4px;
  top: 4px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0 0.3rem;
  opacity: 0.85;
}

/* ---------- Muziek ---------- */
.muziek-deel { margin-top: 2rem; }
.muziek-lijst { margin-bottom: 1rem; }
.muziek-kop { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.muziek-speler { width: 100%; border: 0; border-radius: var(--r); display: block; }
.muziek-subkop { margin: 1rem 0 0.4rem; font-size: 1rem; color: var(--tekst-hoofd-donker); }
.nummers { margin: 0 0 1rem; padding-left: 1.4rem; }
.nummer { padding: 0.45rem 0; border-bottom: 1px solid #eee; }
.nummer { display: list-item; }
.nummer > * { vertical-align: middle; }
.nummer-tekst { display: inline-flex; flex-direction: column; min-width: 45%; margin-right: 0.5rem; }
.nummer-acties { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.nummer .muziek-speler { margin-top: 0.4rem; }
.muziek-formulier {
  max-width: 560px;
  background: var(--kleur-kaart);
  border-radius: var(--r);
  padding: 0.8rem;
  box-shadow: var(--schaduw-1);
  gap: 0.5rem;
}
.muziek-formulier .tabjes { align-self: flex-start; }

/* ---------- Uitspraken ---------- */
.quotes-deel { margin-top: 2rem; }
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
.quote {
  margin: 0;
  background: #fff8ec;
  border-radius: var(--r);
  padding: 1rem 1.1rem 0.8rem;
  position: relative;
  box-shadow: var(--schaduw-1);
}
.quote::before {
  content: "“";
  position: absolute;
  top: -0.4rem;
  left: 0.6rem;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--kleur-accent);
  font-family: Georgia, serif;
}
.quote blockquote {
  margin: 0.6rem 0 0.5rem;
  font-size: 1.1rem;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.quote figcaption { font-size: 0.9rem; color: var(--kleur-tekst-licht); display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; }
.quote-naam { font-weight: 700; color: var(--kleur-tekst); }
.quote-weg { margin-left: auto; font-size: 0.75rem; font-weight: normal; color: var(--kleur-tekst-licht); }
.formulier-dialoog select { padding: 0.6rem; border: 1px solid #ccc; border-radius: var(--r-klein); font-size: 1rem; }

/* Quote-likes */
.quote figcaption .ruimte { flex: 1; }
.quote-like {
  background: none;
  padding: 0.2rem 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kleur-tekst-licht);
  border-radius: 999px;
}
.quote-like.actief { color: #c0392b; background: rgba(192, 57, 43, 0.08); }
.quote-like:active { transform: scale(1.15); }
.quote-uitje { font-size: 0.85rem; color: var(--tekst-hoofd); text-decoration: none; }
.quote-weg { margin-left: 0; }
.quote-groot { grid-column: 1 / -1; padding: 1.4rem 1.6rem 1rem; }
.quote-groot::before { font-size: 5rem; }
.quote-groot blockquote { font-size: 1.6rem; margin-top: 0.9rem; }

/* ---------- Overzicht ---------- */
main.overzicht-pagina { max-width: 1150px; }
.overzicht-tabs { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }
.overzicht-tabs .jaar-tab { border: none; font-size: 0.95rem; }
.overzicht-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.zoekveld { flex: 1 1 260px; }
.filter-keuze { padding: 0.55rem; border: 1px solid #ccc; border-radius: var(--r-klein); font-size: 0.95rem; background: white; }
.resultaat { margin: 0 0 0.6rem; }
.meer-knop { display: block; margin: 1rem auto; }
.overzicht-muziek section { margin-bottom: 1.25rem; }
.overzicht-muziek h3 a { color: var(--tekst-hoofd-donker); }

/* ---------- Kopbalk en mobiele navigatie ---------- */
nav { position: sticky; top: 0; z-index: 60; }
.menu-knop { display: none; }
.nav-pagina { display: none; }

@media (max-width: 700px) {
  nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 0.55rem 0.9rem;
    box-shadow: var(--schaduw-2);
  }
  nav .logo { font-size: 1.15rem; }
  .nav-pagina {
    display: inline;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-left: 0.4rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-pagina::before { content: "· "; }
  .menu-knop {
    display: block;
    margin-left: auto;
    background: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    min-width: 44px;
    min-height: 40px;
  }
  nav ul {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 0.4rem;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }
  nav.open ul { display: flex; }
  nav ul li a { display: block; padding: 0.75rem 0.3rem; font-size: 1.05rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  nav ul li a.actief { text-decoration: none; color: var(--kleur-accent); font-weight: 700; }
  nav ul #ingelogd { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0 0.3rem; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0; }
  nav ul #ingelogd a { border: none; padding: 0.4rem 0.8rem; font-size: 0.95rem; }
}

/* ---------- Homepage: tabbladen op mobiel ---------- */
.home-tabs { display: none; }

@media (max-width: 900px) {
  .home-tabs {
    display: flex;
    background: var(--kleur-achtergrond);
    margin: 0 0 0.75rem;
    padding: 0.5rem 0;
    gap: 0.4rem;
    border-bottom: 1px solid #e3e8e8;
  }
  .home-tab {
    flex: 1;
    background: #e7eeee;
    color: var(--tekst-hoofd-donker);
    padding: 0.6rem 0.4rem;
    font-size: 0.95rem;
    border-radius: var(--r-klein);
  }
  .home-tab.actief { background: var(--kleur-hoofd); color: white; }
  .tab-teller {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0 0.35rem;
    margin-left: 0.25rem;
    border-radius: 999px;
    background: var(--kleur-accent);
    color: #222;
    font-size: 0.8rem;
    line-height: 1.4rem;
  }
  main.home { padding-top: 0.5rem; }
  main.home .tijdlijn-deel { order: 0; }
  main.home[data-tab="uitjes"] .tijdlijn-deel,
  main.home[data-tab="tijdlijn"] .uitjes-deel { display: none; }
}

/* ---------- Terug-links en uitje in de viewer ---------- */
header.hero-uitje .terug { display: flex; gap: 1rem; }
header.hero-uitje .terug a { color: inherit; text-decoration: none; }
header.hero-uitje .terug a:hover { text-decoration: underline; }
.viewer-terug {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: var(--r-klein);
  background: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.viewer-uitje {
  background: none;
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.35rem 0.4rem;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.viewer-uitje:hover { text-decoration: underline; }
.foto-uitje a { color: var(--tekst-hoofd); font-weight: 600; }
@media (max-width: 500px) {
  .viewer-balk { gap: 0.25rem; }
  .viewer-uitje { max-width: 34vw; font-size: 0.8rem; }
  #viewer-teller { font-size: 0.8rem; }
}

/* Cijfers in het jaaroverzicht zijn links */
a.cijfer { text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
a.cijfer:hover { transform: translateY(-2px); box-shadow: var(--schaduw-2); }
#uitjes-van-het-jaar { scroll-margin-top: calc(var(--nav-hoogte, 60px) + 1rem); }

.overzicht-reacties li { display: flex; gap: 0.7rem; align-items: flex-start; }
.reactie-foto img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-klein); display: block; }

/* ---------- Foto in elke paginakop ---------- */
header.banner {
  background-image: linear-gradient(135deg, rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.55), rgba(var(--kleur-hoofd-donker-rgb, 9, 86, 86), 0.65)),
    var(--kop-foto, var(--standaard-kop, url("/images/texel-banner.jpg")));
  background-position: center;
}
header.hero {
  position: relative;
  background-color: var(--kleur-hoofd-donker);
  background-image: linear-gradient(135deg, rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.82), rgba(6, 60, 60, 0.9)),
    var(--kop-foto, var(--standaard-kop, url("/images/texel-banner.jpg")));
  background-size: cover;
  background-position: center 40%;
}
header .foto-credit {
  position: absolute;
  right: 0.75rem;
  bottom: 0.35rem;
  margin: 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.65);
}
header .foto-credit a { color: inherit; }

/* ---------- Tabjes en jaarknoppen op de groene kop: licht, goed contrast ---------- */
.jaar-tab,
.overzicht-tabs .jaar-tab {
  background: rgba(255, 255, 255, 0.92);
  color: var(--tekst-hoofd-donker);
  border: none;
  box-shadow: var(--schaduw-1);
}
.jaar-tab:hover { background: white; }
.jaar-tab.actief,
.overzicht-tabs .jaar-tab.actief { background: var(--kleur-accent); color: #222; }

/* ---------- Moderne invoervelden ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  font: inherit;
  font-size: 1rem;
  color: var(--kleur-tekst);
  background-color: #fff;
  border: 1.5px solid #d5dddd;
  border-radius: var(--r);
  padding: 0.65rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  min-width: 0;
}
input::placeholder,
textarea::placeholder { color: #9aa6a6; }
input:not([type="checkbox"]):not([type="radio"]):hover,
textarea:hover,
select:hover { border-color: #b7c6c6; }
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--kleur-hoofd);
  box-shadow: 0 0 0 3px rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.18);
}
textarea { resize: vertical; line-height: 1.45; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  cursor: pointer;
  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 1l5 5 5-5' fill='none' stroke='%23095656' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--kleur-hoofd); width: 1.1rem; height: 1.1rem; }
input[type="date"], input[type="time"] { min-height: 2.8rem; }
/* Zoekveld met vergrootglas */
input[type="search"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  padding-left: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23668080' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
}
/* Velden binnen rijen niet uitrekken als dat niet de bedoeling is */
.overzicht-filters select,
.filter-keuze { width: auto; flex: 0 1 auto; }
.zoekveld { width: auto; }
.dev-wissel { width: auto; padding: 0.25rem 1.8rem 0.25rem 0.5rem; font-size: 0.85rem; border-radius: var(--r-klein); }

/* Labels boven velden */
.formulier-dialoog label,
form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #3d4a4a;
}
.formulier-dialoog { border-radius: var(--r-groot); padding: 1.5rem 1.4rem; }
.formulier-dialoog h2 { font-size: 1.3rem; }
.formulier-dialoog form { gap: 0.9rem; }
.deelnemer-optie, .schakelaar { flex-direction: row !important; font-weight: 500 !important; color: var(--kleur-tekst) !important; }

/* Knoppen iets moderner */
button, .knop { border-radius: var(--r); transition: transform 0.1s, opacity 0.15s, background-color 0.15s; }
button:active:not(:disabled), .knop:active { transform: scale(0.97); }
.knop-licht { background: #e7eeee; }
.knop-licht:hover { background: #dbe6e6; opacity: 1; }

/* Formulierkaartjes (muziek, beheer, reacties) */
.muziek-formulier, .beheer-nieuw { border-radius: var(--r-groot); padding: 1rem 1.1rem; }
.reactie-formulier textarea { min-height: 2.8rem; }

/* ---------- Meldingen ---------- */
.meldingen-blok { background: var(--kleur-kaart); border-radius: var(--r-groot); padding: 1rem 1.2rem; box-shadow: var(--schaduw-1); }
.meldingen-blok h2 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.meldingen-vraag {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: #eef7f7; border: 1.5px solid #cfe4e4; border-radius: var(--r); padding: 0.7rem 0.9rem; margin-bottom: 1rem; font-weight: 600;
}

/* ---------- Delen vanuit de galerij ---------- */
main.deel-pagina { max-width: 700px; }
.deel-voorbeelden video { width: 100%; height: 100%; object-fit: cover; display: block; }
.deel-formulier { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1rem; background: var(--kleur-kaart); border-radius: var(--r-groot); padding: 1rem 1.1rem; box-shadow: var(--schaduw-1); }
.deel-formulier label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.85rem; }

/* Profielfoto in plaats van letters */
.avatar-foto { background-size: cover; background-position: center; background-color: #ccd; color: transparent; }
.profielfoto-knoppen { display: flex; gap: 0.8rem; justify-content: center; margin-top: 0.4rem; }
.profielfoto-knoppen .link-knop { color: rgba(255, 255, 255, 0.9); }
.profielfoto-dialoog { width: min(720px, calc(100% - 2rem)); }

/* =====================================================================
   Donkere modus: volgt de instelling van je telefoon of computer
   ===================================================================== */
/* Donker thema (data-thema="donker" op <html>, zie js/huisstijl.js) */
:root:where([data-thema="donker"]) {
    color-scheme: dark;
    --kleur-achtergrond: #080d0d;
    --kleur-kaart: #1b2828;
    /* Kaartjes vallen op door een dun licht randje en een donkere schaduw */
    --schaduw-1: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.45);
    --schaduw-2: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 6px 18px rgba(0, 0, 0, 0.55);
    --kleur-tekst: #e6eeee;
    --kleur-tekst-licht: #9fb1b1;
    --rand: #2c3a3a;
    --vlak: #233232;
    --vlak-sterk: #2c3f3f;
    --tekst-hoofd: #7fd1c7;
    --tekst-hoofd-donker: #8fd6cc;
  }
:where([data-thema="donker"]) body { background: var(--kleur-achtergrond); color: var(--kleur-tekst); }
:where([data-thema="donker"]) nav { background: #062f2f; }
:where([data-thema="donker"]) h2, :where([data-thema="donker"]) h3, :where([data-thema="donker"]) .jaar-kop, :where([data-thema="donker"]) .kaart h3, :where([data-thema="donker"]) .scorebord h2, :where([data-thema="donker"]) .prijs-winnaar .persoon-link, :where([data-thema="donker"]) .highscore-getal, :where([data-thema="donker"]) .cijfer strong, :where([data-thema="donker"]) .muziek-subkop, :where([data-thema="donker"]) .overzicht-muziek h3 a, :where([data-thema="donker"]) .profiel-uitje h3 a { color: #8fd6cc; }
:where([data-thema="donker"]) a { color: #7fd1c7; }
:where([data-thema="donker"]) footer { border-top-color: var(--rand); }
/* Kaarten en vlakken */
:where([data-thema="donker"]) .uitje-kaart, :where([data-thema="donker"]) .tijdlijn li, :where([data-thema="donker"]) .event-kaart, :where([data-thema="donker"]) .prijs, :where([data-thema="donker"]) .cijfer, :where([data-thema="donker"]) .uitgelicht, :where([data-thema="donker"]) .aanwezig-uitje, :where([data-thema="donker"]) .beheer-rij, :where([data-thema="donker"]) .beheer-nieuw, :where([data-thema="donker"]) .muziek-formulier, :where([data-thema="donker"]) .deel-formulier, :where([data-thema="donker"]) .meldingen-blok, :where([data-thema="donker"]) .snake-spel, :where([data-thema="donker"]) .scorebord, :where([data-thema="donker"]) .kalender-dag, :where([data-thema="donker"]) .formulier-dialoog, :where([data-thema="donker"]) .viewer-paneel, :where([data-thema="donker"]) .suggesties, :where([data-thema="donker"]) .agenda-opties {
    background: var(--kaart, var(--kleur-kaart));
    color: var(--kleur-tekst);
  }
:where([data-thema="donker"]) .tijdlijn li.leeg, :where([data-thema="donker"]) .tijdlijn li.laden { background: none; }
:where([data-thema="donker"]) .leeg-blok { background: var(--vlak); border-color: var(--rand); color: var(--kleur-tekst-licht); }
:where([data-thema="donker"]) .quote { background: #2a2418; }
:where([data-thema="donker"]) .quote blockquote { color: #f1e6cf; }
:where([data-thema="donker"]) .herinnering { background: linear-gradient(135deg, #2a2418, var(--kleur-kaart)); }
:where([data-thema="donker"]) .uitgelicht-kaart { background: rgba(26, 35, 35, 0.95); color: var(--kleur-tekst); }
:where([data-thema="donker"]) .uitgelicht-titel { color: #8fd6cc; }
:where([data-thema="donker"]) .event-datum-blok, :where([data-thema="donker"]) .event-aftel { background: #2a2418; color: #f0b860; }
:where([data-thema="donker"]) .herinnering-wanneer, :where([data-thema="donker"]) .uitgelicht-label { color: #f0b860; }
:where([data-thema="donker"]) .uitleg-blok, :where([data-thema="donker"]) .ai-status, :where([data-thema="donker"]) .meldingen-vraag { background: var(--vlak); border-color: var(--rand); }
:where([data-thema="donker"]) .tijdlijn .citaat { border-left-color: var(--rand); color: #c3d1d1; }
:where([data-thema="donker"]) .ai-beschrijving { color: #c3d1d1; }
/* Knoppen, chips en tabjes */
:where([data-thema="donker"]) .knop-licht, :where([data-thema="donker"]) .tabjes, :where([data-thema="donker"]) .label-chip, :where([data-thema="donker"]) .aanmeld-knop, :where([data-thema="donker"]) .persoon-knop, :where([data-thema="donker"]) .tag-chip, :where([data-thema="donker"]) .emoji-knop, :where([data-thema="donker"]) .keuzes, :where([data-thema="donker"]) .home-tab, :where([data-thema="donker"]) .tabje, :where([data-thema="donker"]) .viewer-terug { background: var(--vlak-sterk); color: #cfe7e3; }
:where([data-thema="donker"]) .knop-licht:hover { background: #33484a; }
:where([data-thema="donker"]) .tabje.actief, :where([data-thema="donker"]) .keuze.actief { background: #3a5050; color: #fff; }
:where([data-thema="donker"]) .label-chip.actief, :where([data-thema="donker"]) .aanmeld-knop.actief, :where([data-thema="donker"]) .home-tab.actief { background: var(--kleur-hoofd); color: #fff; }
:where([data-thema="donker"]) .uitje-kaart .geen-omslag, :where([data-thema="donker"]) .herinnering .geen-omslag, :where([data-thema="donker"]) .aanwezig-uitje .geen-omslag { background: var(--vlak-sterk); }
:where([data-thema="donker"]) .suggesties button:hover, :where([data-thema="donker"]) .agenda-opties button:hover, :where([data-thema="donker"]) .agenda-opties a:hover { background: var(--vlak-sterk); }
/* Tabjes op de kopfoto blijven licht */
:where([data-thema="donker"]) .jaar-tab:not(.actief), :where([data-thema="donker"]) .overzicht-tabs .jaar-tab:not(.actief) { color: #095656; }
:where([data-thema="donker"]) .filter-keuze { background: #121b1b; color: var(--kleur-tekst); border-color: var(--rand); }
:where([data-thema="donker"]) .uitje-in-lijst .event-aftel { background: #173a38; color: #9fe0d6; }
:where([data-thema="donker"]) .dev-wissel { background: #2a2418; }
:where([data-thema="donker"]) .kalender-dag.andere-maand { color: #5f7070; }
:where([data-thema="donker"]) .emoji-knop.actief { background: #3a3020; border-color: var(--kleur-accent); }
:where([data-thema="donker"]) .home-tabs { background: var(--kleur-achtergrond); border-bottom-color: var(--rand); }
:where([data-thema="donker"]) .deelnemer-optie:has(input:checked) { background: var(--vlak-sterk); }
:where([data-thema="donker"]) .vermelding { background: #1f3a38; color: #8fd6cc; }
:where([data-thema="donker"]) .quote-like.actief { background: rgba(231, 111, 81, 0.15); }
/* Invoervelden */
:where([data-thema="donker"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :where([data-thema="donker"]) textarea, :where([data-thema="donker"]) select {
    background-color: #121b1b;
    color: var(--kleur-tekst);
    border-color: var(--rand);
  }
:where([data-thema="donker"]) input::placeholder, :where([data-thema="donker"]) textarea::placeholder { color: #6f8585; }
:where([data-thema="donker"]) select { 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 1l5 5 5-5' fill='none' stroke='%238fd6cc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
:where([data-thema="donker"]) .formulier-dialoog label, :where([data-thema="donker"]) form label { color: #b9c9c9; }
:where([data-thema="donker"]) .deelnemers-veld { border-color: var(--rand); }
/* Kalender */
:where([data-thema="donker"]) .kalender { background: var(--rand); border-color: var(--rand); }
:where([data-thema="donker"]) .kalender-weekdag { background: #152020; }
:where([data-thema="donker"]) .kalender-dag:hover { background: #1f2a2a; }
:where([data-thema="donker"]) .kalender-dag.andere-maand { background: #141c1c; }
:where([data-thema="donker"]) .item-event { background: #3a3020; color: #f0c880; }
:where([data-thema="donker"]) .item-uitje { background: #173a38; color: #9fe0d6; }
/* Lijnen */
:where([data-thema="donker"]) .reacties li, :where([data-thema="donker"]) .nummer, :where([data-thema="donker"]) .podium, :where([data-thema="donker"]) .aanmeld-rij, :where([data-thema="donker"]) .ai-blok, :where([data-thema="donker"]) #scorelijst li { border-color: var(--rand); }
:where([data-thema="donker"]) .aanwezig-balk, :where([data-thema="donker"]) .upload-voortgang .balk { background: var(--vlak-sterk); }
:where([data-thema="donker"]) .foto-tegel { background: #223; }
:where([data-thema="donker"]) #melding { background: #e6eeee; color: #0f1616; }
:where([data-thema="donker"]) .installeer-melding { background: var(--kleur-kaart); color: var(--kleur-tekst); }

/* =====================================================================
   Vloeiende overgangen tussen pagina's (browsers die het kunnen)
   ===================================================================== */
@view-transition { navigation: auto; }
nav { view-transition-name: kopbalk; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.09s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Confetti */
.confetti-doek { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* =====================================================================
   Galerij in rijen: tegels in de verhouding van de foto, rijen precies vol
   (legInRijen in api.js zet breedte en hoogte; dit is de start ervoor)
   ===================================================================== */
.foto-raster.in-rijen { display: flex; flex-wrap: wrap; gap: 4px; }
.foto-raster.in-rijen .foto-tegel {
  aspect-ratio: auto;
  flex: none;
  width: calc(var(--r, 1) * 115px);
  height: 115px;
  border-radius: var(--r-mini);
}
.foto-raster.in-rijen > .leeg-blok { width: 100%; }
@media (max-width: 700px) {
  .foto-raster.in-rijen { gap: 3px; }
}

/* =====================================================================
   Diavoorstelling
   ===================================================================== */
body.diashow-open { overflow: hidden; }
.diashow { position: fixed; inset: 0; z-index: 10000; background: #000; color: #fff; overflow: hidden; cursor: pointer; user-select: none; }
.dia-beeld {
  position: absolute; inset: 0;
  background: center / contain no-repeat;
  opacity: 0; transition: opacity 1.2s ease;
}
.dia-beeld.zichtbaar { opacity: 1; }
.dia-beeld.zoom-a { animation: dia-zoom-a 7s ease-out forwards; }
.dia-beeld.zoom-b { animation: dia-zoom-b 7s ease-out forwards; }
@keyframes dia-zoom-a { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
@keyframes dia-zoom-b { from { transform: scale(1.08) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
.diashow.gepauzeerd .dia-beeld { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dia-beeld.zoom-a, .dia-beeld.zoom-b { animation: none; } }
.dia-balk {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 0.4rem;
  padding: max(0.6rem, env(safe-area-inset-top)) 0.8rem 1.5rem;
  background: linear-gradient(rgba(0, 0, 0, 0.65), transparent);
  cursor: default; transition: opacity 0.4s;
}
.diashow:not(.gepauzeerd) .dia-balk { opacity: 0.35; }
.diashow:not(.gepauzeerd) .dia-balk:hover { opacity: 1; }
.dia-titel { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-teller { font-size: 0.85rem; opacity: 0.8; margin-right: 0.3rem; }
.dia-knop {
  background: rgba(255, 255, 255, 0.15); color: #fff; border: none;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.1rem; padding: 0;
  display: grid; place-items: center; cursor: pointer;
}
.dia-knop:hover { background: rgba(255, 255, 255, 0.3); }
.dia-tekst {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 2rem 1rem max(1rem, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  text-align: center; font-size: 1rem; text-shadow: 0 1px 3px #000;
}
.dia-tekst:empty { display: none; }
.dia-muziek { position: absolute; right: 1rem; bottom: 4rem; width: min(320px, calc(100vw - 2rem)); cursor: default; }
.dia-muziek iframe { width: 100%; border: 0; border-radius: var(--r); }
.resultaat-rij { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.4rem 0; }
.resultaat-rij .resultaat { margin: 0; }

/* Weerbericht bij events */
.event-weer { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.88rem; margin-top: 0.15rem; }
.weer-dag { white-space: nowrap; font-weight: 600; }
.weer-naam { font-weight: 400; color: var(--kleur-tekst-licht); margin-right: 0.25rem; }
.weer-min { font-weight: 400; color: var(--kleur-tekst-licht); }
.weer-regen { font-weight: 400; color: #3a7bd5; }
/* Donker thema (data-thema="donker" op <html>, zie js/huisstijl.js) */
:where([data-thema="donker"]) .weer-regen { color: #7fb2ff; }

/* =====================================================================
   Badges op het profiel
   ===================================================================== */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.badge {
  --badge-kleur: #cd7f32;
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.1rem;
  background: var(--kleur-kaart); border-radius: var(--r); padding: 0.8rem 0.6rem 0.7rem;
  border: 2px solid var(--badge-kleur);
  box-shadow: var(--schaduw-1);
}
.badge.zilver { --badge-kleur: #a8b3bd; }
.badge.goud { --badge-kleur: #e8a33d; box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08); }
.badge.nog-niet { --badge-kleur: transparent; opacity: 0.55; filter: grayscale(1); border-style: dashed; border-color: #bbb; }
.badge-icoon { font-size: 2rem; line-height: 1.2; }
.badge-naam { font-size: 0.95rem; }
.badge-niveau {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--badge-kleur); color: #222; border-radius: 999px; padding: 0 0.5rem;
}
.badge-uitleg { font-size: 0.78rem; color: var(--kleur-tekst-licht); }
.badge-voortgang { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-size: 0.72rem; color: var(--kleur-tekst-licht); width: 100%; margin-top: 0.25rem; }
.badge-balk { display: block; width: 80%; height: 5px; border-radius: var(--r-mini); background: #e7eeee; overflow: hidden; }
.badge-balk > span { display: block; height: 100%; background: var(--kleur-hoofd); }
@media (max-width: 700px) { .badges { grid-template-columns: repeat(2, 1fr); } }
/* Donker thema (data-thema="donker" op <html>, zie js/huisstijl.js) */
:where([data-thema="donker"]) .badge.nog-niet { border-color: #445; }
:where([data-thema="donker"]) .badge-balk { background: var(--vlak-sterk); }

/* =====================================================================
   Foto van de maand (homepage)
   ===================================================================== */
.fotomaand { background: var(--kleur-kaart); border-radius: var(--r); padding: 1rem; margin-bottom: 1.25rem; box-shadow: var(--schaduw-1); }
.fotomaand h2 { margin-top: 0; }
.fotomaand-inhoud { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; align-items: start; }
.fotomaand-inhoud > :only-child { grid-column: 1 / -1; }
.fotomaand-tegel { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: #ddd; }
.fotomaand-tegel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fotomaand-tegel.klein img { aspect-ratio: 1; }
.fotomaand-winnaar p { margin: 0.4rem 0 0; }
.fotomaand-stand { display: flex; flex-direction: column; gap: 0.5rem; }
.fotomaand-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fotomaand-stand p { margin: 0; }
@media (max-width: 700px) { .fotomaand-inhoud { grid-template-columns: 1fr; } }


/* Vinkje met tekst in een dialoog */
.vink-regel { display: flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; margin: 0.5rem 0; }

/* Beheer: dubbele foto's */
.dubbel-lijst { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.dubbel-groep { border: 1px solid var(--rand, #ddd); border-radius: var(--r); padding: 0.75rem; }
.dubbel-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 0.6rem; }
.dubbel-foto { display: flex; flex-direction: column; gap: 0.2rem; cursor: pointer; font-size: 0.9rem; }
.dubbel-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-klein); border: 3px solid transparent; }
.dubbel-foto:has(input:checked) img { border-color: var(--kleur-accent); }
.dubbel-kies { font-weight: 700; }
.formulier-dialoog label.vink-regel { display: flex; flex-direction: row; font-weight: normal; }

/* =====================================================================
   Versiegeschiedenis
   ===================================================================== */
footer a { color: inherit; }
.versies-pagina { max-width: 760px; }
.versie { background: var(--kleur-kaart); border-radius: var(--r); padding: 1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--schaduw-1); }
.versie.nieuwste { border-left: 4px solid var(--kleur-accent); }
.versie-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.versie-kop h2 { margin: 0; font-size: 1.15rem; }
.versie-nummer { font-weight: 800; background: var(--kleur-hoofd); color: #fff; border-radius: 999px; padding: 0.05rem 0.6rem; font-size: 0.9rem; }
.versie-label { font-size: 0.75rem; font-weight: 700; background: var(--kleur-accent); color: #222; border-radius: 999px; padding: 0 0.5rem; }
.versie ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.versie li { margin: 0.25rem 0; }

/* =====================================================================
   Wensenlijst
   ===================================================================== */
.wens-formulier { display: grid; gap: 0.5rem; background: var(--kleur-kaart); border-radius: var(--r); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--schaduw-1); }
.wens-formulier button { justify-self: start; }
.wens { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--kleur-kaart); border-radius: var(--r); padding: 1rem; margin-bottom: 0.8rem; box-shadow: var(--schaduw-1); }
.wens.status-klaar, .wens.status-niet { opacity: 0.7; }
.wens-stem {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 3rem; padding: 0.4rem;
  border-radius: var(--r); background: var(--vlak-sterk, #e7eeee); color: inherit; border: 2px solid transparent; cursor: pointer;
}
.wens-stem.actief { border-color: var(--kleur-accent); background: rgba(232, 163, 61, 0.15); }
.wens-inhoud { flex: 1; min-width: 0; }
.wens-kop { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; }
.wens-kop h2 { margin: 0; font-size: 1.1rem; }
.wens-status { font-size: 0.8rem; font-weight: 700; background: var(--vlak-sterk, #e7eeee); border-radius: 999px; padding: 0.05rem 0.55rem; }
.wens-uitleg { margin: 0.4rem 0 0; }
.wens-notitie { margin-top: 0.5rem; background: var(--vlak, #f3f6f6); border-radius: var(--r-klein); padding: 0.5rem 0.75rem; }
.wens-notitie summary { cursor: pointer; font-weight: 700; }
.wens-notitie p { white-space: pre-line; margin: 0.5rem 0 0; font-size: 0.92rem; }
.wens-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin-top: 0.5rem; }

/* =====================================================================
   Taggen (gezichtsherkenning)
   ===================================================================== */
.tag-pagina { max-width: 900px; }
.tag-analyse { background: var(--kleur-kaart); border-radius: var(--r); padding: 0.8rem 1rem; margin: 0.8rem 0; box-shadow: var(--schaduw-1); }
.tag-analyse p { margin: 0 0 0.5rem; }
.tag-lijst { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.tag-kaart { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; background: var(--kleur-kaart); border-radius: var(--r); padding: 0.8rem; box-shadow: var(--schaduw-1); }
.tag-beeld { position: relative; width: 100%; border-radius: var(--r-klein); overflow: hidden; background: #222; align-self: start; }
.tag-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.tag-vak { position: absolute; border: 2px solid var(--kleur-accent); border-radius: var(--r-mini); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.tag-vak.getagd { border-color: #2a9d8f; }
.tag-vak.genegeerd { border-color: rgba(255, 255, 255, 0.35); border-style: dashed; }
.tag-vak-naam { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.7rem; padding: 0 0.3rem; border-radius: var(--r-mini); white-space: nowrap; }
.tag-rijen { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.tag-foto-kop { margin: 0; }
.tag-rij { display: flex; gap: 0.6rem; align-items: flex-start; }
.tag-gezicht { position: relative; flex: none; width: 64px; height: 64px; border-radius: var(--r); overflow: hidden; background: #222; border: 2px solid var(--kleur-accent); }
.tag-gezicht img { position: absolute; max-width: none; }
.tag-keuzes { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; min-width: 0; }
.tag-keuzes select { max-width: 11rem; padding: 0.35rem 1.8rem 0.35rem 0.5rem; font-size: 0.9rem; }
@media (max-width: 700px) { .tag-kaart { grid-template-columns: 1fr; } }

/* Profiel: gezichtsherkenning aan/uit */
.herkenning-blok { background: var(--kleur-kaart); border-radius: var(--r); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--schaduw-1); }
.herkenning-blok h2 { margin-top: 0; }

/* =====================================================================
   Samenvattingsblokjes
   ===================================================================== */
.samenvatting { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.samenvatting-item {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  background: var(--kleur-kaart); border-radius: 999px; padding: 0.3rem 0.75rem;
  font-size: 0.88rem; color: var(--kleur-tekst-licht); box-shadow: var(--schaduw-1);
}
.samenvatting-item strong { color: var(--kleur-tekst); }
.samenvatting-icoon { font-size: 0.95rem; }
.samenvatting.klein-blok .samenvatting-item { font-size: 0.8rem; padding: 0.2rem 0.6rem; }
.opslag-balk { height: 8px; border-radius: var(--r-mini); background: var(--vlak-sterk, #e7eeee); overflow: hidden; margin: 0.4rem 0; }
.opslag-balk span { display: block; height: 100%; background: var(--kleur-hoofd); }

/* =====================================================================
   Wie is er online (linksonder)
   ===================================================================== */
.online-blok { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 900; font-size: 0.85rem; }
.online-knop {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--kleur-kaart); color: var(--kleur-tekst); border: none; border-radius: 999px;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem; box-shadow: var(--schaduw-2); cursor: pointer; font-weight: 600;
}
.online-knop .mini-avatars .avatar { width: 22px; height: 22px; font-size: 0.6rem; }
.online-stip { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25); }
.online-lijst { display: none; list-style: none; margin: 0 0 0.4rem; padding: 0.5rem 0.7rem; background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-2); max-width: 260px; }
.online-blok.open .online-lijst { display: block; }
.online-blok { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.online-lijst li { padding: 0.2rem 0; display: flex; align-items: center; gap: 0.2rem; }
.online-lijst a { display: inline-flex; align-items: center; gap: 0.35rem; color: inherit; text-decoration: none; font-weight: 600; }
.online-lijst .avatar { width: 24px; height: 24px; font-size: 0.65rem; }
/* Beheer: bezoekoverzicht */
.bezoek-tabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bezoek-tabel th, .bezoek-tabel td { text-align: left; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--rand, #eee); vertical-align: middle; }
.bezoek-tabel th { font-size: 0.8rem; color: var(--kleur-tekst-licht); font-weight: 600; }
.bezoek-naam { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.bezoek-naam .avatar { width: 26px; height: 26px; font-size: 0.65rem; }
.bezoek-tabel .nooit { color: var(--kleur-tekst-licht); font-style: italic; }
@media (max-width: 700px) { .bezoek-tabel .smal-weg { display: none; } }

/* Vangnet: laden mislukt */
.laad-fout { background: var(--kleur-kaart); border-left: 4px solid #e76f51; border-radius: var(--r); padding: 0.9rem 1rem; margin: 1rem 0; box-shadow: var(--schaduw-1); }
.laad-fout p { margin: 0 0 0.6rem; }

.deel-onleesbaar { display: grid; place-items: center; width: 100%; height: 100%; padding: 0.4rem; font-size: 0.75rem; text-align: center; color: var(--kleur-tekst-licht); background: var(--vlak-sterk, #e7eeee); }

.deel-tegel { position: relative; }

/* Aanmelden: "Ik kan niet" en wie nog niet gereageerd heeft */
.aanmeld-knop.aanmeld-nee.actief { background: #e76f51; color: #fff; }
.event-personen.kan-niet .avatar { opacity: 0.55; filter: grayscale(0.6); }
.event-personen.nog-niet .avatar { opacity: 0.45; }

/* Filmpje dat de browser niet kan afspelen (bijv. AVI waarvan omzetten niet lukte) */
.niet-afspeelbaar {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  width: min(340px, 90%); box-sizing: border-box;
  background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: var(--r); padding: 0.8rem 1rem; text-align: center;
}
.niet-afspeelbaar p { position: static; margin: 0; line-height: 1.35; font-size: 0.95rem; }
.niet-afspeelbaar a { position: static; display: inline-block; }

/* Klikbare bolletjes in de samenvatting */
.samenvatting-item.klikbaar { cursor: pointer; border: 1.5px solid transparent; font: inherit; text-decoration: none; }
.samenvatting-item.klikbaar:hover { border-color: var(--kleur-hoofd); }
.samenvatting-item.klikbaar.actief { border-color: var(--kleur-accent); background: rgba(232, 163, 61, 0.15); color: var(--kleur-tekst); }

/* ---------- Startpagina (dashboard) ---------- */
header.banner.banner-home { padding: 2.2rem 1.5rem 2rem; }
.dash {
  max-width: 1150px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.75rem 2.25rem;
  align-items: start;
  padding-top: 1.5rem;
}
.dash-kolom { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.dash section, .dash .dash-blok { margin: 0; }
.dash h2 { margin: 0; font-size: 1.25rem; }
.dash .kop-met-knop { margin-bottom: 0.7rem; }
.dash .meldingen-vraag { grid-column: 1 / -1; }

.snelknoppen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.snelknop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  background: var(--kleur-kaart); color: var(--tekst-hoofd-donker); border-radius: var(--r);
  padding: 0.7rem 0.3rem; font-weight: 700; font-size: 0.92rem; text-decoration: none;
  box-shadow: var(--schaduw-1); border: none; cursor: pointer; font-family: inherit; line-height: 1.2;
}
.snelknop span { font-size: 1.4rem; }
.snelknop:hover { box-shadow: var(--schaduw-2); transform: translateY(-1px); }

.dash-aankomend .uitgelicht-kaart { max-width: none; width: 100%; }
.dash-aankomend .event-lijst { margin-top: 0.8rem; }
.dash-aankomend > div > .jaar-link { display: inline-block; margin-top: 0.6rem; }
.klein-leeg { padding: 1.2rem 1rem; }
.klein-leeg p { margin: 0 0 0.7rem; }

/* Laatste uitjes: strook om opzij te vegen */
.uitjes-strook {
  display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 0.8rem; margin: -4px -4px 0; scrollbar-width: thin;
}
.uitjes-strook .uitje-kaart { flex: 0 0 220px; scroll-snap-align: start; }
.uitjes-strook .uitje-kaart:hover { transform: none; }
.uitjes-strook .strook-meer {
  flex-basis: 150px; background: var(--kleur-kaart); border: 2px dashed var(--rand, #cfd8d8); box-shadow: none; cursor: pointer; font: inherit; font-weight: 700; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; color: var(--tekst-hoofd); padding: 1rem;
}

.dash-tijdlijn .kop-met-knop { flex-wrap: wrap; gap: 0.5rem; }
.dash-tijdlijn .tijdlijn { margin-bottom: 0.6rem; }

/* Highscores */
.highscore-rij { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-top: 0.7rem; }
.highscore-kaart {
  display: flex; flex-direction: column; gap: 0.3rem; background: var(--kleur-kaart); border-radius: var(--r);
  padding: 0.75rem 0.9rem; text-decoration: none; color: inherit; box-shadow: var(--schaduw-1);
}
.highscore-kaart:hover { box-shadow: var(--schaduw-2); }
.highscore-spel { color: var(--tekst-hoofd-donker); }
.highscore-top { list-style: none; margin: 0; padding: 0; }
.highscore-top li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.12rem 0; font-size: 0.95rem; }
.highscore-top li.ik { font-weight: 700; color: var(--tekst-hoofd); }
.highscore-punten { font-variant-numeric: tabular-nums; }
.highscore-ik { color: var(--kleur-tekst-licht); }
.dash-cijfers #samenvatting { margin-top: 0.7rem; }

/* Uitjespagina */
.uitjes-pagina { max-width: 1150px; }
.uitjes-balk { display: flex; gap: 0.6rem; margin: 0 0 1.5rem; }
.uitjes-balk input { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .dash { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .dash-kolom { display: contents; }
  .dash-herinnering { order: 1; }
  .dash-aankomend { order: 1; }
  .dash-voorstellen { order: 2; }
  .dash-laatste { order: 2; }
  .dash-tijdlijn { order: 3; }
  .dash-opdezedag { order: 4; }
  .dash-fotomaand { order: 5; }
  .dash-highscores { order: 6; }
  .dash-cijfers { order: 7; }
  .highscore-rij { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 700px) {
  header.banner.banner-home { padding: 1.1rem 1rem 1rem; }
  .banner-home .logo-groot { flex-direction: row; gap: 0.6rem; margin-bottom: 0.3rem; }
  .banner-home .logo-groot svg { width: 40px; height: 40px; }
  .banner-home .logo-groot .logo-tekst { text-align: left; }
  .banner-home .logo-groot .logo-tekst .naam { font-size: 1.6rem; }
  .banner-home .logo-groot .logo-tekst .plek { font-size: 0.8rem; }
  header.banner.banner-home p.tagline { font-size: 0.95rem; }
  .dash { padding: 1rem 1rem 2rem; }
  .snelknoppen { gap: 0.45rem; }
  .snelknop { font-size: 0.78rem; padding: 0.55rem 0.2rem; }
  .snelknop span { font-size: 1.25rem; }
  .uitjes-strook .uitje-kaart { flex-basis: 68vw; max-width: 240px; }
  .highscore-rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
  .highscore-kaart { flex: 0 0 72vw; max-width: 260px; scroll-snap-align: start; }
}

/* Voorstellen in de strook: datumvlak bovenaan, aanmeldknoppen onderaan */
.voorstel-kaart .uitje-kaart-tekst { flex: 1; }
.voorstel-datum {
  display: flex; align-items: baseline; justify-content: center; gap: 0.35rem; flex-wrap: wrap;
  aspect-ratio: 5 / 2; padding: 0.5rem; text-decoration: none; background: #fff3df; color: #8a5300; align-content: center;
}
.voorstel-datum .event-dag { font-size: 2.2rem; }
.voorstel-datum .event-maand { font-size: 1rem; }
.voorstel-aftel { flex-basis: 100%; text-align: center; font-size: 0.8rem; font-weight: 700; }
.voorstel-titel { font-weight: 800; color: var(--tekst-hoofd-donker); text-decoration: none; }
.voorstel-titel:hover { text-decoration: underline; }
.voorstel-knoppen { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: auto; padding-top: 0.5rem; }
.voorstel-knoppen .aanmeld-knop { font-size: 0.8rem; padding: 0.3rem 0.55rem; }
/* Donker thema (data-thema="donker" op <html>, zie js/huisstijl.js) */
:where([data-thema="donker"]) .voorstel-datum { background: #2a2418; color: #f0b860; }

/* Knop aanwijzen (snelknop "Foto's" vanaf de startpagina) */
.aandacht { animation: aandacht 0.9s ease-in-out 4; }
@keyframes aandacht {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 163, 61, 0.9); }
  50% { box-shadow: 0 0 0 10px rgba(232, 163, 61, 0); transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .aandacht { animation: none; outline: 3px solid var(--kleur-accent); } }

/* Uitjekaartje met een knop eronder (laatste uitjes op de startpagina) */
.uitje-kaart.met-knop:hover { transform: none; }
.uitje-kaart-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.uitje-kaart-acties { padding: 0 0.9rem 0.8rem; }
.uitje-kaart-acties .knop { width: 100%; text-align: center; }

/* "Nog foto's van ...?" bovenaan de startpagina */
.dash-herinnering {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1rem;
  background: #fff3df; border-left: 4px solid var(--kleur-accent); border-radius: var(--r); padding: 0.8rem 1rem;
}
.dash-herinnering .herinnering-tekst { display: flex; flex-direction: column; gap: 0.15rem; }
.dash-herinnering .knoppen-rij { margin: 0; align-items: center; }
/* Donker thema (data-thema="donker" op <html>, zie js/huisstijl.js) */
:where([data-thema="donker"]) .dash-herinnering { background: #2a2418; }

/* Nu bezig: feestelijk blok tijdens het uitje */
.nu-bezig {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--r-groot); color: #fff;
  background: linear-gradient(135deg, var(--kleur-hoofd) 0%, var(--kleur-hoofd) 45%, var(--kleur-accent) 130%);
  box-shadow: 0 6px 22px rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.35);
}
.nu-bezig::after {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%); pointer-events: none;
}
.nu-bezig-kop { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nu-bezig-live {
  background: #e63946; color: #fff; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem 0.2rem 1.35rem; border-radius: 999px; position: relative;
}
.nu-bezig-live::before {
  content: ""; position: absolute; left: 0.5rem; top: 50%; width: 0.45rem; height: 0.45rem; margin-top: -0.225rem;
  border-radius: 50%; background: #fff; animation: live-knipper 1.2s ease-in-out infinite;
}
@keyframes live-knipper { 50% { opacity: 0.2; } }
.nu-bezig-dag { font-weight: 700; font-size: 0.9rem; opacity: 0.95; }
.nu-bezig-titel { font-size: 1.6rem; font-weight: 800; color: #fff; text-decoration: none; line-height: 1.15; }
.nu-bezig-titel:hover { text-decoration: underline; }
.nu-bezig-wanneer, .nu-bezig-tellers { font-size: 0.9rem; opacity: 0.92; }
.nu-bezig .event-weer, .nu-bezig .event-weer * { color: #fff; }
.nu-bezig-hype { margin: 0.2rem 0; font-size: 1.05rem; font-weight: 700; }
.nu-bezig .uitgelicht-wie { color: #fff; }
.nu-bezig-fotos { display: flex; gap: 0.4rem; overflow-x: auto; }
.nu-bezig-fotos:empty { display: none; }
.nu-bezig-fotos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-klein); display: block; border: 2px solid rgba(255, 255, 255, 0.6); }
.nu-bezig-knoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }
.nu-bezig-knoppen .knop { padding: 0.6rem 1rem; }
.nu-bezig-knoppen .knop-licht { background: rgba(255, 255, 255, 0.9); color: var(--kleur-hoofd-donker); }
.nu-bezig-knoppen .uitgelicht-link { color: #fff; }
@media (prefers-reduced-motion: reduce) { .nu-bezig-live::before { animation: none; } }

/* Knop "Toon tags" in de fotoviewer: aan = gekleurd */
.viewer-knop.tags-knop { font-size: 0.9rem; white-space: nowrap; min-width: 0; padding: 0.35rem 0.7rem; border-radius: 999px; }
.viewer-knop.tags-knop[aria-pressed="true"] { background: var(--kleur-accent); color: #222; }

/* Tagscherm: op de foto tikken om iemand zelf te taggen */
.tik-om-te-taggen { cursor: crosshair; }
.tag-stip {
  position: absolute; transform: translate(-50%, -50%); background: var(--kleur-accent); color: #222;
  font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px; pointer-events: none; white-space: nowrap;
}

/* Muziek die doorspeelt: de site in een venster, de speler eronder */
body.speler-schil { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--kleur-achtergrond); }
.speler-pagina { flex: 1; width: 100%; border: 0; display: block; min-height: 0; }
.speler-balk {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.7rem; background: var(--kleur-hoofd-donker); color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25); padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
}
.speler-info { display: flex; flex-direction: column; min-width: 0; flex: 0 1 200px; font-size: 0.8rem; }
.speler-info strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speler-info span { opacity: 0.8; }
.speler-vak { flex: 1; min-width: 0; }
.speler-vak iframe { display: block; width: 100%; height: 80px; border: 0; border-radius: var(--r); }
.speler-balk[data-soort="youtube"] .speler-vak iframe { height: 90px; max-width: 160px; }
.speler-balk.groot .speler-vak iframe { height: 352px; max-width: none; }
.speler-balk[data-soort="youtube"].groot .speler-vak iframe { height: 240px; }
.speler-knoppen { display: flex; flex-direction: column; gap: 0.3rem; }
.speler-knop { background: rgba(255, 255, 255, 0.15); color: #fff; min-width: 40px; min-height: 36px; padding: 0.2rem; font-size: 1.1rem; }
@media (max-width: 600px) {
  .speler-balk { flex-wrap: wrap; }
  .speler-info { flex: 1 1 60%; }
  .speler-knoppen { flex-direction: row; order: 2; }
  .speler-vak { flex-basis: 100%; order: 3; }
}
.viewer-balk .tags-knop { flex-shrink: 0; }
@media (max-width: 500px) { .viewer-knop.tags-knop { padding: 0.3rem 0.55rem; font-size: 0.85rem; } }

/* ---------- Albums ---------- */
.albums-pagina, .spellen-pagina { max-width: 1150px; }
.album-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.album-kaart {
  display: flex; flex-direction: column; background: var(--kleur-kaart); border-radius: var(--r); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--schaduw-1);
}
.album-kaart:hover { box-shadow: var(--schaduw-2); }
.album-omslag { aspect-ratio: 1; display: grid; gap: 2px; background: #e7eeee; }
.album-omslag img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.album-omslag.aantal-2, .album-omslag.aantal-4 { grid-template-columns: 1fr 1fr; }
.album-omslag.aantal-3 { grid-template-columns: 1fr 1fr; }
.album-omslag.aantal-3 img:first-child { grid-row: span 2; }
.album-omslag.leeg { display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.album-kaart-tekst { padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.album-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 1rem; }
.album-wie { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.album-wie .mini-avatars { margin-top: 0; }
.foto-tegel { position: relative; }
.album-weg {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.95rem; line-height: 30px;
}
.album-keuzes { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0 1rem; max-height: 40vh; overflow-y: auto; }
.album-nieuw { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--rand, #e0e6e6); }
.album-nieuw input:not([type]) { flex: 1 1 180px; }
/* Donker thema (data-thema="donker" op <html>, zie js/huisstijl.js) */
:where([data-thema="donker"]) .album-omslag { background: var(--vlak-sterk, #2a3b3b); }

/* ---------- Spelletjes ---------- */
.spel-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.spel-kaart {
  display: flex; flex-direction: column; gap: 0.6rem; background: var(--kleur-kaart); border-radius: var(--r);
  padding: 1rem 1.1rem; box-shadow: var(--schaduw-1);
}
.spel-kaart .knop { margin-top: auto; text-align: center; }
.spel-kop { display: flex; gap: 0.8rem; align-items: center; text-decoration: none; color: inherit; }
.spel-kop > span:last-child { display: flex; flex-direction: column; gap: 0.15rem; }
.spel-kop strong { font-size: 1.15rem; color: var(--tekst-hoofd-donker); }
.spel-emoji { font-size: 2.4rem; line-height: 1; }
.spel-kaart .highscore-top .avatar { width: 20px; height: 20px; font-size: 0.6rem; vertical-align: middle; }

/* Teller "nieuw" naast een kop (bijv. Laatst gewijzigd) */
.tab-teller {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 0.4em;
  margin-left: 0.35rem; border-radius: 999px; background: var(--kleur-accent); color: #222;
  font-size: 0.72em; font-weight: 800; line-height: 1; vertical-align: 0.15em;
}

/* ---------- App (single page) ---------- */
/* Spelletje in een venster onder het menu */
.app-venster { display: block; width: 100%; height: calc(100dvh - 60px); border: 0; background: var(--kleur-achtergrond); }
body.met-venster > footer { display: none; }
/* Binnen dat venster: geen eigen menu en voettekst (dat doet de app) */
.in-app-venster body > nav, .in-app-venster body > footer { display: none; }

/* Muziek die onderin blijft staan */
.speler-balk.vast { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; }
body.met-muziek { padding-bottom: var(--muziek-h, 104px); }
body.met-muziek .online-blok, body.met-muziek .taken-blok { bottom: calc(var(--muziek-h, 104px) + 8px); }
body.met-muziek .app-venster { height: calc(100dvh - 60px - var(--muziek-h, 104px)); }
@media (max-width: 600px) {
  .speler-balk.vast .speler-uitleg { display: none; }
  .speler-balk.vast .speler-knoppen .speler-knop { min-height: 32px; }
}

/* Lange taken (uploaden) rechtsonder, op elke pagina */
.taken-blok { position: fixed; right: 12px; bottom: 12px; z-index: 75; display: flex; flex-direction: column; gap: 0.4rem; max-width: min(320px, calc(100vw - 24px)); }
.taak {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.8rem; border-radius: var(--r); text-decoration: none;
  background: var(--kleur-hoofd-donker); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); font-size: 0.9rem;
}
.taak .klein { color: rgba(255, 255, 255, 0.8); }
.taak-tekst { display: flex; flex-direction: column; }
.taak-balk { height: 5px; border-radius: var(--r-mini); background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.taak-balk span { display: block; height: 100%; background: var(--kleur-accent); transition: width 0.3s; }
.taak.klaar { background: #2a9d8f; }
.taak.fout { background: #e76f51; }

/* ---------- Schaken en dammen ---------- */
.bord-pagina { max-width: 1100px; }
.spellen-pagina h2 { margin: 1.5rem 0 0.8rem; }
.bord-blok { margin-bottom: 1.8rem; }
.bord-uitdagen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bord-lijst { display: flex; flex-direction: column; gap: 0.5rem; }
.bord-regel {
  display: flex; gap: 0.8rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: var(--r);
  background: var(--kleur-kaart); color: inherit; text-decoration: none; box-shadow: var(--schaduw-1);
}
.bord-regel.aan-zet { box-shadow: 0 0 0 3px var(--kleur-accent); }
.bord-regel-spel { font-size: 1.6rem; }
.bord-regel-tekst { display: flex; flex-direction: column; }
.bord-klaar { margin-top: 0.8rem; }
.bord-klaar summary { cursor: pointer; font-weight: 700; margin-bottom: 0.5rem; }
.bord-ranglijsten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.bord-ranglijsten h3 { margin: 0 0 0.4rem; }

.bord-opzet { display: grid; grid-template-columns: minmax(0, 560px) minmax(220px, 1fr); gap: 1.5rem; align-items: start; }
.bord-kant { display: flex; flex-direction: column; gap: 0.5rem; }
.bord-speler { display: flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.bord-speler.aan-zet { color: var(--tekst-hoofd); }
.bord-kleur { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #888; margin-right: 0.2rem; }
.bord-kleur.w { background: #fff; }
.bord-kleur.z { background: #222; }
.speelbord {
  display: grid; grid-template-columns: repeat(var(--n), 1fr); aspect-ratio: 1; width: 100%;
  border-radius: var(--r-klein); overflow: hidden; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25); user-select: none;
}
.bordveld {
  position: relative; border: 0; border-radius: 0; padding: 0; margin: 0; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; cursor: default;
}
.speelbord.schaak .licht { background: #eedcb3; }
.speelbord.schaak .donker { background: #b58863; }
.speelbord.dammen .licht { background: #f1e3c6; }
.speelbord.dammen .donker { background: #8a5a3b; }
.bordveld.kiesbaar, .bordveld.doel { cursor: pointer; }
.bordveld.laatste::after { content: ""; position: absolute; inset: 0; background: rgba(255, 214, 0, 0.35); pointer-events: none; }
.bordveld.gekozen::after { content: ""; position: absolute; inset: 0; background: rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.55); pointer-events: none; }
.bordveld.schaak { background: radial-gradient(circle, #ff5252 0%, #c62828 70%) !important; }
.bordveld.doel::before { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.6); z-index: 1; pointer-events: none; }
.bordveld.doel.slaan::before { width: 86%; height: 86%; background: none; border: 4px solid rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.7); }
.stuk { font-size: min(8.5vw, 52px); line-height: 1; position: relative; z-index: 2; pointer-events: none; }
.stuk.wit { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, 0.6); }
.stuk.zwart { color: #1b1b1b; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(255, 255, 255, 0.3); }
.schijf { width: 76%; height: 76%; border-radius: 50%; position: relative; z-index: 2; pointer-events: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4); }
.schijf.wit { background: radial-gradient(circle at 35% 30%, #fff, #d9d2c3); }
.schijf.zwart { background: radial-gradient(circle at 35% 30%, #555, #111); }
.schijf.dam::after { content: "♛"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 60%; color: #e8a33d; }
.bord-status { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.6rem; }
.bord-status.mijn-beurt { color: var(--tekst-hoofd); }
.bord-zetten { max-height: 260px; overflow-y: auto; padding-left: 1.6rem; margin: 0 0 0.8rem; font-variant-numeric: tabular-nums; }
.bord-zetten li span { display: inline-block; min-width: 4.5em; }
.promotie-knop { font-size: 1.1rem; }
@media (max-width: 800px) { .bord-opzet { grid-template-columns: 1fr; } }

/* Spelletjes: compactere kaarten, kleine speelknop rechtsonder */
.spel-kaarten { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; }
.spel-kaart { padding: 0.8rem 0.9rem; gap: 0.4rem; }
.spel-kaart .spel-knop { margin-top: auto; align-self: flex-end; text-align: center; padding: 0.4rem 0.9rem; }
.spel-emoji { font-size: 2rem; }
.spel-kaart .highscore-ik { margin: 0; }
.spellen-pagina h2 { margin: 1.2rem 0 0.6rem; font-size: 1.2rem; }
@media (max-width: 600px) {
  .spel-kaart .highscore-top li { font-size: 0.88rem; }
}
@media (max-width: 600px) {
  /* Twee kaartjes naast elkaar: naam, de koploper en je plek; uitleg weg */
  .spel-kaarten { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .spel-kaart { padding: 0.65rem 0.7rem; gap: 0.3rem; }
  .spel-kop { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .spel-kop .klein { display: none; }
  .spel-kop strong { font-size: 1rem; }
  .spel-emoji { font-size: 1.6rem; }
  .spel-kaart .highscore-top li:not(:first-child) { display: none; }
  .spel-kaart .highscore-top li { font-size: 0.8rem; }
  .spel-kaart .highscore-top .avatar { display: none; }
  .spel-kaart .highscore-ik, .spel-kaart > p.klein { font-size: 0.75rem; }
  .spel-kaart .spel-knop { align-self: stretch; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
}

/* Eigen logo van de groep (in plaats van de tekening) */
.logo-groot img.groep-logo { width: 64px; height: 64px; object-fit: contain; border-radius: var(--r-groot); }
@media (max-width: 700px) { .banner-home .logo-groot img.groep-logo { width: 40px; height: 40px; } }

/* Beheer: huisstijl */
.huisstijl-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem 1rem; }
.huisstijl-velden label { display: flex; flex-direction: column; gap: 0.2rem; }
.huisstijl-kleuren { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin: 0.8rem 0; }
.kleur-regel { display: flex; align-items: center; gap: 0.4rem; }
.kleur-regel { white-space: normal; flex-direction: row !important; align-items: center; gap: 0.6rem; }
.kleur-regel input[type="color"] { width: 48px; height: 36px; padding: 3px; border: 1px solid var(--rand, #cfd8d8); border-radius: var(--r-klein); background: var(--kleur-kaart); cursor: pointer; flex-shrink: 0; }
.huisstijl-beeld { display: flex; gap: 0.9rem; align-items: center; margin-top: 1rem; }
.huisstijl-beeld > img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--r); background: var(--vlak, #eef3f3); }
.huisstijl-beeld > span { width: 72px; text-align: center; }
.huisstijl-beeld p { margin: 0.2rem 0 0.4rem; }

/* ---------- Beheer: tabbladen en dashboard ---------- */
.beheer-tabs { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0 0 1.4rem; padding-bottom: 0.3rem; scrollbar-width: thin; }
.beheer-tab {
  flex-shrink: 0; padding: 0.5rem 0.9rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.92rem;
  background: var(--kleur-kaart); color: var(--tekst-hoofd-donker); box-shadow: var(--schaduw-1);
}
.beheer-tab.actief { background: var(--kleur-hoofd); color: #fff; }
.beheer-dashboard { display: flex; flex-direction: column; gap: 1.2rem; }
.beheer-dashboard section { margin: 0; }
.beheer-aandacht { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.beheer-aandacht a {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border-radius: var(--r); text-decoration: none; color: inherit;
  background: var(--vlak, #f3f6f6); border-left: 4px solid var(--kleur-accent);
}
.beheer-aandacht a > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aandacht-icoon { font-size: 1.4rem; }
.aandacht-pijl { color: var(--tekst-hoofd); font-weight: 800; }
.beheer-acties { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.beheer-onderdelen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.beheer-onderdeel {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; border-radius: var(--r); text-decoration: none; color: inherit;
  background: var(--kleur-kaart); box-shadow: var(--schaduw-1);
}
.beheer-onderdeel:hover { box-shadow: var(--schaduw-2); }
.beheer-onderdeel strong { color: var(--tekst-hoofd-donker); font-size: 1.05rem; }
/* Kleurkiezer: vast vlakje links, uitleg ernaast op één regel */
.huisstijl-kleuren .kleur-regel { display: flex; width: 100%; max-width: 420px; margin: 0; }
.huisstijl-kleuren .kleur-regel input[type="color"] { width: 48px !important; min-width: 48px; flex: 0 0 48px; margin: 0; }
.huisstijl-kleuren input[type="color"] { padding: 3px !important; height: 36px; }
.huisstijl-kleuren input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.huisstijl-kleuren input[type="color"]::-webkit-color-swatch { border: none; border-radius: var(--r-klein); }
.huisstijl-kleuren input[type="color"]::-moz-color-swatch { border: none; border-radius: var(--r-klein); }

/* ==========================================================================
   Stijlgids (zie STIJLGIDS.md): gedeelde onderdelen voor alle pagina's
   ========================================================================== */

/* Cijferbolletjes: de rest achter "+ N meer" */
.samenvatting .samenvatting-item.extra { display: none; }
.samenvatting.open .samenvatting-item.extra { display: inline-flex; }
.samenvatting-meer { background: none; border: 1.5px dashed var(--rand, #cfd8d8); color: var(--tekst-hoofd); cursor: pointer; font: inherit; font-weight: 700; }

/* Tabbladen: één stijl voor onderdelen van een pagina (Beheer, Profiel, Uitje, Jaar, Taggen) */
.tabbalk { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0 0 1.2rem; padding-bottom: 0.3rem; scrollbar-width: thin; }
.tabbalk .tab, .tabbalk a.tab {
  flex-shrink: 0; padding: 0.5rem 0.95rem; border-radius: 999px; border: none; text-decoration: none; font: inherit;
  font-weight: 700; font-size: 0.92rem; cursor: pointer; line-height: 1.2;
  background: var(--kleur-kaart); color: var(--tekst-hoofd-donker); box-shadow: var(--schaduw-1);
}
.tabbalk .tab.actief { background: var(--kleur-hoofd); color: #fff; }
.tabbalk .tab:focus-visible { outline: 2px solid var(--kleur-accent); outline-offset: 2px; }

/* Knoppen met alleen een icoon (met title/aria-label), en actieknoppen in een rij */
.icoon-knop { min-width: 44px; min-height: 44px; padding: 0.4rem 0.7rem; font-size: 1.15rem; line-height: 1; }
.actie-knop {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.45rem 0.85rem; border-radius: var(--r);
  background: var(--vlak-sterk, #e7eeee); color: var(--tekst-hoofd-donker); border: none; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; list-style: none;
}
.actie-knop::-webkit-details-marker { display: none; }
.acties-rij { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }

/* "⋯ Meer": minder gebruikte acties, verwijderen onderaan */
.meer-menu { position: relative; }
.meer-menu > summary { list-style: none; }
.meer-lijst {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); min-width: 230px; display: flex; flex-direction: column;
  background: var(--kleur-kaart); border-radius: var(--r); padding: 0.35rem; box-shadow: var(--schaduw-3);
}
.meer-item {
  display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--r-klein); padding: 0.65rem 0.75rem;
  font: inherit; font-size: 0.95rem; color: var(--kleur-tekst); cursor: pointer; text-decoration: none;
}
.meer-item:hover, .meer-item:focus-visible { background: var(--vlak, #eef3f3); }
.meer-item.gevaar { color: #d64533; border-top: 1px solid var(--rand, #dfe6e6); border-radius: 0 0 8px 8px; margin-top: 0.25rem; }

/* Uitleg achter een ⓘ */
details.uitleg { margin: 0 0 1rem; }
details.uitleg > summary { cursor: pointer; color: var(--tekst-hoofd); font-weight: 700; font-size: 0.9rem; list-style: none; display: inline-flex; gap: 0.35rem; align-items: center; min-height: 36px; }
details.uitleg > summary::-webkit-details-marker { display: none; }
details.uitleg[open] > summary { margin-bottom: 0.4rem; }

/* Filters achter één knop (Archief) */
.filter-paneel { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.9rem; border-radius: var(--r); background: var(--kleur-kaart); margin: 0 0 1rem; }
.filter-paneel .samenvatting { margin: 0; }
.overzicht-pagina > #samenvatting { display: none; }

/* Tekstlinks als knop: op de telefoon groot genoeg om te raken */
@media (pointer: coarse) {
  .link-knop { min-height: 40px; padding: 0.45rem 0.25rem; }
}

/* Titel over de kopfoto: altijd leesbaar */
header.hero h1, header.banner .logo-tekst, header.hero > p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4); }

/* Lagere kop op de telefoon; de vaste uitlegzin onder de titel weg */
@media (max-width: 700px) {
  header.hero.hero-klein { padding: 1.25rem 1rem 1.6rem; }
  header.hero.hero-klein h1 { font-size: 1.6rem; margin: 0; }
  header.hero.hero-klein > p:not([id]) { display: none; }
  header.hero .foto-credit { font-size: 0.62rem; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; bottom: 0.2rem; }
  /* Labels op één regel om opzij te vegen */
  .label-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: none; }
  .label-filter .label-chip { flex-shrink: 0; }
  /* Albums twee naast elkaar */
  .album-kaarten { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .album-kaart-tekst { padding: 0.55rem 0.65rem; }
  .album-kaart-tekst strong { font-size: 0.95rem; }
}

/* Uitje: één rij knoppen */
.actie-balk.acties-rij { flex-wrap: nowrap; }
.actie-balk .upload-knop { flex: 1 1 auto; text-align: center; }
@media (min-width: 701px) { .actie-balk .upload-knop { flex: 0 0 auto; } }

/* Fotoviewer */
.viewer-paneel #eigen-foto-knoppen { margin: 0.2rem 0 0.8rem; }
.foto-details { margin-top: 0.8rem; }
.foto-details > summary { cursor: pointer; font-weight: 700; color: var(--tekst-hoofd); min-height: 36px; display: flex; align-items: center; }
.viewer-paneel .foto-info .bijschrift { font-size: 1.02rem; }

/* Startpagina: highscores als regels */
.highscore-rij:has(.highscore-regel) { display: flex !important; flex-direction: column; gap: 0.35rem; overflow: visible; }
.highscore-regel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.8rem; align-items: baseline; padding: 0.6rem 0.8rem;
  border-radius: var(--r); background: var(--kleur-kaart); color: inherit; text-decoration: none; box-shadow: var(--schaduw-1);
}
.highscore-regel .highscore-top1 { font-variant-numeric: tabular-nums; text-align: right; font-size: 0.92rem; }
.highscore-regel .highscore-top1.ik { color: var(--tekst-hoofd); font-weight: 700; }
.highscore-regel .highscore-ik { grid-column: 2; text-align: right; }

/* Kalender: maand of lijst */
.kalender-weergave { flex-shrink: 0; }
.kalender-pagina.weergave-lijst #kalender, .kalender-pagina.weergave-lijst .kalender-legenda,
.kalender-pagina.weergave-lijst #vorige-maand, .kalender-pagina.weergave-lijst #volgende-maand,
.kalender-pagina.weergave-lijst #deze-maand, .kalender-pagina.weergave-lijst #maand-titel { display: none; }
.kalender-legenda { margin-top: 0.6rem; }

/* Installeermelding in de pagina */
.installeer-melding { position: static !important; transform: none !important; margin: 0 0 1rem; width: auto !important; max-width: none !important; box-shadow: none; }

/* Taggen: melding om gezichten te zoeken */
.tag-analyse .knoppen-rij { align-items: center; }

/* Kop van een uitje of profiel op de telefoon: lager, deelnemers op één regel om opzij te vegen */
@media (max-width: 700px) {
  header.hero-uitje { padding: 1.9rem 1rem 1.3rem; }
  header.hero-uitje h1 { font-size: 1.55rem; margin: 0.2rem 0 0.1rem; }
  header.hero-uitje .deelnemers-rij { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-top: 0.6rem; padding-bottom: 0.2rem; }
  header.hero-uitje .deelnemers-rij > * { flex-shrink: 0; }
  .uitje-pagina .beschrijving { margin-bottom: 0.6rem; }
}
/* "⋯ Meer" opent naar rechts onder de knop; vier acties passen op één regel op de telefoon */
.meer-lijst { left: 0; right: auto; }
.acties-rij > .meer-menu:last-child .meer-lijst { left: auto; right: 0; }
@media (max-width: 420px) {
  .actie-knop { padding: 0.45rem 0.6rem; font-size: 0.84rem; gap: 0.25rem; }
  .acties-rij { gap: 0.35rem; }
}
/* Eventkaart: aanmelden op één regel, de rest onder "⋯ Meer" */
.event-acties { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.event-acties .meer-menu .actie-knop { min-height: 34px; padding: 0.35rem 0.75rem; }

/* Kaart: knop op de kaart, kaart vult het scherm op de telefoon */
.kaart-houder { position: relative; }
.kaart-knop {
  position: absolute; z-index: 5; top: 10px; right: 10px; min-height: 40px; padding: 0.45rem 0.85rem; border-radius: 999px;
  border: none; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  background: var(--kleur-kaart); color: var(--tekst-hoofd-donker); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.kaart-knop.actief { background: var(--kleur-hoofd); color: #fff; }
#zonder-plek { margin-top: 0.9rem; }
.zonder-plek-lijst { margin: 0.3rem 0 0; padding-left: 1.2rem; columns: 2 14rem; }
@media (max-width: 700px) {
  main.kaart-pagina { padding-top: 0.75rem; }
  .kaart { height: calc(100svh - var(--nav-hoogte, 56px) - 150px); min-height: 340px; }
}

/* Versies: regel over dit toestel, oudere versies ingeklapt */
.toestel-regel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.7rem 0.9rem; border-radius: var(--r); background: var(--kleur-kaart); margin-bottom: 1rem; }
.toestel-regel.achter { outline: 2px solid var(--kleur-accent); }
details.versie.oud { padding: 0.55rem 1rem; margin-bottom: 0.5rem; box-shadow: none; }
details.versie.oud > summary { cursor: pointer; list-style: none; }
details.versie.oud > summary::-webkit-details-marker { display: none; }
details.versie.oud > summary h2 { font-size: 1rem; font-weight: 600; }
details.versie.oud:not([open]) .versie-datum { margin-left: auto; }
details.versie.oud[open] { box-shadow: var(--schaduw-1); }

/* Wensen: invoer op één regel, acties onder ⋯ */
.wens-formulier { gap: 0.5rem; padding: 0.7rem; }
.wens-regel { display: flex; gap: 0.5rem; }
.wens-regel input { flex: 1; min-width: 0; }
.wens-keuze { align-self: flex-start; width: fit-content; margin-bottom: 0.9rem; }
.wens > .meer-menu { flex-shrink: 0; }
.wens > .meer-menu > summary { min-height: 36px; padding: 0.3rem 0.7rem; background: none; }
.wens > .meer-menu .meer-lijst { left: auto; right: 0; }

/* "Nog … te taggen" op de startpagina: zelfde blok als "Nog foto's van …?", in de hoofdkleur */
.dash-herinnering.tag-melding { background: rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.08); border-left-color: var(--kleur-hoofd); }
/* Donker thema (data-thema="donker" op <html>, zie js/huisstijl.js) */
:where([data-thema="donker"]) .dash-herinnering.tag-melding { background: rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.18); }

/* Meldingen bovenaan de startpagina: één compacte regel (tekst, knop, ✕) */
.dash-herinnering { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.4rem 0.55rem 0.85rem; flex-wrap: nowrap; }
.dash-herinnering .herinnering-tekst { gap: 0; padding: 0; min-width: 0; line-height: 1.3; }
.dash-herinnering .herinnering-tekst > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-herinnering .herinnering-tekst strong { font-size: 0.95rem; }
.dash-herinnering .klein-knop { white-space: nowrap; }
.melding-weg { background: none; border: none; color: var(--kleur-tekst-licht); font: inherit; font-size: 1rem; cursor: pointer; width: 36px; height: 40px; border-radius: var(--r-klein); padding: 0; }
.melding-weg:hover, .melding-weg:focus-visible { background: rgba(0, 0, 0, 0.06); }
.dash-herinnering .herinnering-tekst strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Kop: lege regel onder de titel weg; keuze via de titel (jaar, persoon) */
header.hero > p:empty { display: none; }
.kop-keuze { position: relative; display: inline-block; }
.kop-keuze > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; border-radius: var(--r); padding: 0 0.4rem; }
.kop-keuze > summary::-webkit-details-marker { display: none; }
.kop-keuze > summary:hover, .kop-keuze[open] > summary { background: rgba(255, 255, 255, 0.14); }
.kop-keuze > summary:focus-visible { outline: 2px solid var(--kleur-accent); outline-offset: 2px; }
.kop-pijl { font-size: 0.55em; opacity: 0.85; transition: transform 0.15s; }
.kop-keuze[open] .kop-pijl { transform: rotate(180deg); }
.kop-keuze-lijst {
  left: 50%; right: auto; transform: translateX(-50%); max-height: min(60vh, 420px); overflow-y: auto;
  text-shadow: none; font-size: 1rem; font-weight: 400; text-align: left; min-width: 220px;
}
.kop-keuze-lijst .meer-item { display: flex; align-items: center; gap: 0.6rem; }
.kop-keuze-lijst .meer-item.actief { font-weight: 700; background: rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.12); }
.kop-keuze-lijst .avatar { width: 28px; height: 28px; font-size: 0.75rem; flex-shrink: 0; }
header.hero-uitje .terug:empty { display: none; }
.overzicht-pagina > .tabbalk { margin-bottom: 0.9rem; }
.overzicht-tabs.tabbalk { justify-content: flex-start; flex-wrap: nowrap; margin-top: 0; }

/* ==========================================================================
   Iconen (Lucide, via js/iconen.js)
   ========================================================================== */
.icoon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -0.2em; }
.nav-icoon { display: none; }

/* ==========================================================================
   Menu onderaan op de telefoon, "Meer" als paneel van onderen
   ========================================================================== */
.onderbalk { display: none; }
@media (max-width: 700px) {
  :root.met-onderbalk { --onderbalk-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .met-onderbalk body { padding-bottom: var(--onderbalk-h); }
  .onderbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 0 0.25rem env(safe-area-inset-bottom, 0px); background: var(--kleur-kaart);
    border-top: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.07);
  }
  .onderbalk-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px; padding: 0;
    background: none; border: none; font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
    color: var(--kleur-tekst-licht); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .onderbalk-item .icoon { width: 22px; height: 22px; padding: 4px 16px; box-sizing: content-box; border-radius: 999px; transition: background-color 0.2s, color 0.2s; }
  .onderbalk-item.actief, .onderbalk-item.open { color: var(--tekst-hoofd); }
  .onderbalk-item.actief .icoon, .onderbalk-item.open .icoon { background: rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.14); stroke-width: 2.3; }
  .onderbalk-item:active .icoon { transform: scale(0.92); }

  /* Het ☰-menu wordt het Meer-paneel */
  .met-onderbalk .menu-knop { display: none; }
  .met-onderbalk nav ul {
    position: fixed; left: 0; right: 0; bottom: var(--onderbalk-h); z-index: 64; max-height: 72dvh; overflow-y: auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 1rem 1rem 1.1rem;
    background: var(--kleur-hoofd-donker); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.3);
    transform: translateY(calc(100% + var(--onderbalk-h))); visibility: hidden; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.18s;
  }
  .met-onderbalk nav.open ul { transform: none; visibility: visible; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .met-onderbalk nav ul li:has(> a[href="/index.html"]), .met-onderbalk nav ul li:has(> a[href="/uitjes.html"]),
  .met-onderbalk nav ul li:has(> a[href="/overzicht.html"]), .met-onderbalk nav ul li:has(> a[href="/kalender.html"]) { display: none; }
  .met-onderbalk nav ul li:not(#ingelogd):not(.meer-links) > a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 78px; padding: 0.6rem 0.3rem;
    border: none; border-radius: var(--r-groot); background: rgba(255, 255, 255, 0.08); font-size: 0.85rem; font-weight: 600; text-align: center;
  }
  .met-onderbalk nav ul li a.actief { background: rgba(255, 255, 255, 0.18); color: #fff; }
  .met-onderbalk nav ul li a:active { transform: scale(0.97); }
  .met-onderbalk .nav-icoon { display: block; width: 24px; height: 24px; }
  .met-onderbalk nav ul #ingelogd { grid-column: 1 / -1; justify-content: center; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 0.8rem; margin-top: 0.2rem; }
  .met-onderbalk nav ul #ingelogd a { background: rgba(255, 255, 255, 0.1); border-radius: 999px; }
  /* Donkere laag achter het paneel */
  .menu-open body::after { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.35); animation: vervaag-in 0.2s; }

  /* Wat onderaan zweeft, schuift boven de balk */
  .met-onderbalk .online-blok, .met-onderbalk .taken-blok { bottom: calc(var(--onderbalk-h) + 8px); }
  .met-onderbalk .speler-balk.vast { bottom: var(--onderbalk-h); }
  .met-onderbalk body.met-muziek { padding-bottom: calc(var(--onderbalk-h) + var(--muziek-h, 104px)); }
  .met-onderbalk body.met-muziek .online-blok, .met-onderbalk body.met-muziek .taken-blok { bottom: calc(var(--onderbalk-h) + var(--muziek-h, 104px) + 8px); }
  .met-onderbalk .app-venster { height: calc(100dvh - 60px - var(--onderbalk-h)); }
  .met-onderbalk body.met-muziek .app-venster { height: calc(100dvh - 60px - var(--onderbalk-h) - var(--muziek-h, 104px)); }
  .met-onderbalk body > footer { display: none; }
}
@keyframes vervaag-in { from { opacity: 0; } }
.alleen-meer { display: none; }
@media (max-width: 700px) { .met-onderbalk nav ul .alleen-meer { display: block; } }
@media (max-width: 700px) {
  .met-onderbalk nav ul #ingelogd { align-items: center; }
  .met-onderbalk nav ul #ingelogd a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 42px; padding: 0.45rem 1rem; font-weight: 600; }
  .met-onderbalk nav ul #ingelogd .nav-icoon { width: 20px; height: 20px; }
  .menu-open .online-blok, .menu-open .taken-blok { visibility: hidden; }
}

/* Snelknoppen op de startpagina: twee acties naast elkaar, icoon voor de tekst */
.snelknoppen { grid-template-columns: repeat(2, 1fr); }
.snelknop { flex-direction: row; gap: 0.5rem; padding: 0.7rem 0.8rem; min-height: 48px; }
.snelknop span[data-icoon] { font-size: 1.15rem; display: inline-flex; color: var(--tekst-hoofd); }
@media (max-width: 700px) { .snelknop { font-size: 0.92rem; padding: 0.6rem 0.6rem; } .snelknop span[data-icoon] { font-size: 1.15rem; } }

/* ==========================================================================
   Kleine bewegingen (stijlgids: "Beweging"): indrukken, lijstjes die opduiken
   ========================================================================== */
button, .knop, .knop-licht, .actie-knop, .icoon-knop, .snelknop, .tab, .tabje, .label-chip, .samenvatting-item, .meer-item {
  transition: transform var(--snel) var(--soepel), background-color var(--snel), box-shadow var(--snel), color var(--snel);
}
button:not(:disabled):active, .knop:active, .knop-licht:active, .actie-knop:active, .icoon-knop:active, .snelknop:active,
.tab:active, .tabje:active, .label-chip:active, a.samenvatting-item:active, button.samenvatting-item:active { transform: scale(0.96); }
.uitje-kaart:active, .album-kaart:active, .spel-kaart:active { transform: scale(0.985); }

@keyframes opduiken { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes opduiken-midden { from { opacity: 0; transform: translate(-50%, -6px) scale(0.98); } }
@keyframes inschuiven { from { opacity: 0; transform: translateY(8px); } }
@keyframes dialoog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.meer-menu[open] > .meer-lijst { animation: opduiken 0.1s var(--soepel); transform-origin: top right; }
.kop-keuze[open] > .kop-keuze-lijst { animation: opduiken-midden 0.1s var(--soepel); }
details.uitleg[open] > :not(summary), .filter-paneel { animation: inschuiven 0.12s var(--soepel); }
.dash-herinnering:not([hidden]) { animation: inschuiven 0.15s var(--soepel); }
dialog.formulier-dialoog[open] { animation: dialoog-in 0.12s var(--soepel); }
dialog[open]::backdrop { animation: vervaag-in 0.2s; }
.tab-paneel > * { animation: vervaag-in 0.08s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
#melding { opacity: 0; transition: transform 0.25s var(--soepel), opacity 0.2s; }
#melding.zichtbaar { opacity: 1; }
@media (max-width: 700px) { .met-onderbalk #melding { bottom: calc(var(--onderbalk-h) + 12px); } }

/* Knoppen en velden in hetzelfde lettertype als de rest */
button, input, select, textarea { font-family: inherit; }

/* Icoon voor de tekst in knoppen, koppen en menu's (zie js/iconen.js, vervangEmoji) */
.icoon-tekst { margin-right: 0.4em; }
h2 > .icoon-tekst, h3 > .icoon-tekst { color: var(--tekst-hoofd); width: 1.05em; height: 1.05em; vertical-align: -0.12em; }
.samenvatting-icoon > .icoon-tekst { margin-right: 0; }
.tab > .icoon-tekst, .tabje > .icoon-tekst { width: 1.05em; height: 1.05em; }
.icoon-knop > .icoon-tekst { margin-right: 0; width: 1.25rem; height: 1.25rem; }

/* Uitjekaartje met knoppen: Bekijken en + Foto's naast elkaar */
.uitje-kaart-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.uitje-kaart-acties .knop { width: 100%; display: inline-flex; align-items: center; justify-content: center; }

/* Compacte kaartjes op de startpagina (voorstellen en laatste uitjes) */
.kaart-regel { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.kaart-regel .mini-avatars { margin-top: 0; }
.voorstel-kop { display: flex; gap: 0.65rem; align-items: center; padding: 0.75rem 0.8rem 0; }
.voorstel-kop .voorstel-datum {
  flex: 0 0 auto; width: 50px; aspect-ratio: auto; height: 54px; padding: 0; border-radius: var(--r-klein);
  flex-direction: column; flex-wrap: nowrap; gap: 0; align-items: center; justify-content: center; line-height: 1;
}
.voorstel-kop .voorstel-datum .event-dag { font-size: 1.35rem; font-weight: 800; }
.voorstel-kop .voorstel-datum .event-maand { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.voorstel-kop-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.voorstel-kop-tekst .voorstel-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.voorstel-kaart .uitje-kaart-tekst { flex: 1; padding: 0.45rem 0.8rem 0; gap: 0.25rem; }
.voorstel-kaart .voorstel-knoppen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; margin: 0; padding: 0.55rem 0.8rem 0.75rem;
}
.voorstel-kaart .voorstel-knoppen .aanmeld-knop { font-size: 0.76rem; padding: 0.4rem 0.2rem; min-height: 34px; white-space: nowrap; text-align: center; }
.uitjes-strook .uitje-kaart img, .uitjes-strook .uitje-kaart .geen-omslag { aspect-ratio: 16 / 9; }
.uitjes-strook .uitje-kaart-tekst { padding: 0.55rem 0.8rem; gap: 0.1rem; }
.uitjes-strook .uitje-kaart-acties { padding: 0 0.8rem 0.7rem; }

/* Fotoviewer: "⋯ Meer" klapt open in het paneel zelf (zwevend viel het buiten het smalle,
   scrollende paneel, achter de foto) */
.viewer-paneel .acties-rij .meer-menu[open] { flex-basis: 100%; }
.viewer-paneel .acties-rij .meer-menu[open] > summary { display: inline-flex; }
.viewer-paneel .meer-lijst { position: static; min-width: 0; margin-top: 0.45rem; box-shadow: var(--schaduw-1); border: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); }
.viewer-paneel .meer-menu[open] > .meer-lijst { animation: inschuiven 0.1s var(--soepel); }

/* Laatst gewijzigd: één lijst met regels in plaats van losse kaartjes */
.dash-tijdlijn .tijdlijn { background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); overflow: hidden; }
.dash-tijdlijn .tijdlijn li {
  background: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0.6rem 0.85rem 0.6rem 0.75rem;
  border-left: 3px solid transparent; border-bottom: 1px solid var(--rand, rgba(0, 0, 0, 0.07));
}
.dash-tijdlijn .tijdlijn li:last-child { border-bottom: none; }
.dash-tijdlijn .tijdlijn li.nieuw { border-left-color: var(--kleur-accent); background: rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.04); }
.dash-tijdlijn .tijdlijn li.leeg, .dash-tijdlijn .tijdlijn li.laden { padding: 0.8rem; }
.dash-tijdlijn .tijdlijn p { margin: 0; line-height: 1.4; font-size: 0.93rem; }
.dash-tijdlijn .tijdlijn p .tijd { font-size: 0.78rem; white-space: nowrap; }
.dash-tijdlijn .tijdlijn-fotos { flex-wrap: nowrap; overflow: hidden; margin: 0.35rem 0 0; gap: 0.3rem; }
.dash-tijdlijn .tijdlijn-fotos img { width: 40px; height: 40px; }
.dash-tijdlijn .tijdlijn .citaat { margin: 0.3rem 0 0; font-size: 0.88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-tijdlijn .tijdlijn li:has(> .tijdlijn-fotos) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; }
.dash-tijdlijn .tijdlijn li > .tijdlijn-fotos { margin: 0; max-width: 84px; justify-content: flex-end; }

/* Voettekst altijd onderaan, ook als de pagina korter is dan het scherm */
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > * { flex-shrink: 0; }
body > main { width: 100%; }
body > footer { margin-top: auto; }

/* Instellingen: blokken met regels (naam en uitleg links, bediening rechts) */
.instellingen-blok { background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 0.9rem 1rem 0.6rem; margin-bottom: 1rem; }
.instellingen-blok > h2 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.instellingen-regels { display: flex; flex-direction: column; }
.instelling { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.65rem 0; }
.instelling + .instelling { border-top: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); }
.instelling-tekst { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; line-height: 1.35; }
.instelling-tekst .klein { color: var(--kleur-tekst-licht); }
.instelling > :last-child:not(.instelling-tekst) { flex-shrink: 0; }
.instellingen-blok details.uitleg { margin: 0.1rem 0 0.3rem; }
@media (max-width: 480px) { .instelling:has(.tabjes) { flex-direction: column; align-items: stretch; } .instelling .tabjes { align-self: flex-start; } }

/* Schakelaar (aan/uit) */
.schakel {
  position: relative; width: 50px; height: 30px; padding: 0; border: none; border-radius: 999px; cursor: pointer; flex-shrink: 0;
  background: var(--vlak-sterk, #c9d4d4); transition: background-color 0.2s;
}
.schakel::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s var(--soepel);
}
.schakel[aria-checked="true"] { background: var(--kleur-hoofd); }
.schakel[aria-checked="true"]::after { transform: translateX(20px); }
.schakel:disabled { opacity: 0.6; }
.schakel:focus-visible { outline: 2px solid var(--kleur-accent); outline-offset: 2px; }
button.schakel:active { transform: none; }

/* Beheer → Logboek */
.logboek-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.logboek-filters select { flex: 1 1 140px; min-width: 0; }
.logboek { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.logboek li { padding: 0.55rem 0; border-bottom: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); }
.logboek li:last-child { border-bottom: none; }
.logboek-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: start; }
.logboek-regel .avatar { width: 28px; height: 28px; font-size: 0.7rem; }
.logboek-tekst { line-height: 1.4; font-size: 0.93rem; overflow-wrap: anywhere; }
.logboek-tijd { white-space: nowrap; color: var(--kleur-tekst-licht); }
.logboek li.weg .logboek-tekst strong { color: #d64533; }
.logboek-status { margin-left: 0.4rem; font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; background: #d64533; color: #fff; }
.logboek-details { margin: 0.35rem 0 0 2.4rem; }
.logboek-details summary { cursor: pointer; font-size: 0.82rem; color: var(--tekst-hoofd); }
.logboek-details pre { margin: 0.3rem 0 0.5rem; padding: 0.5rem 0.6rem; border-radius: var(--r-klein); background: var(--vlak, #eef3f3); font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }

/* Beheer → Prullenbak */
.prullenbak { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; }
.prullenbak li { padding: 0.55rem 0; border-bottom: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); }
.prullenbak li:last-child { border-bottom: none; }
.prullenbak-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; }
.prullenbak-regel input[type="checkbox"], .prullenbak-kop input { width: 20px; height: 20px; }
.prullenbak-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.prullenbak-tekst strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; }
.prullenbak-tekst .klein { color: var(--kleur-tekst-licht); }
.prullenbak-regel img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-mini); }
.gevaar-knop:not(:disabled) { color: #d64533; }

/* ==========================================================================
   Tijdens het laden: grijze voorbeeldvlakken in de vorm van wat er komt
   (de tekst "Laden…" blijft voor schermlezers, maar is onzichtbaar)
   ========================================================================== */
:root { --skelet: rgba(0, 0, 0, 0.06); --skelet-glans: rgba(255, 255, 255, 0.55); }
:root:where([data-thema="donker"]) { --skelet: rgba(255, 255, 255, 0.06); --skelet-glans: rgba(255, 255, 255, 0.07); }
@keyframes skelet { from { background-position: -150% 0, 0 0; } to { background-position: 250% 0, 0 0; } }
p.laden, li.laden, .tijdlijn li.laden, .dash-tijdlijn .tijdlijn li.laden {
  color: transparent !important; user-select: none; list-style: none; margin: 0; padding: 0;
  min-height: 7rem; border-radius: var(--r); box-shadow: none; border: none;
  background: linear-gradient(90deg, transparent, var(--skelet-glans), transparent) no-repeat, var(--skelet);
  background-size: 50% 100%, 100% 100%;
  animation: skelet 1.3s ease-in-out infinite;
}
/* Strook (voorstellen, laatste uitjes): twee kaartjes */
.uitjes-strook > p.laden { position: relative; flex: 0 0 220px; height: 13rem; min-height: 0; }
.uitjes-strook > p.laden::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% + 0.9rem); width: 100%;
  border-radius: inherit; background: inherit; background-size: inherit; animation: inherit;
}
@media (max-width: 700px) { .uitjes-strook > p.laden { flex-basis: 62vw; } }
/* Lijst (laatst gewijzigd): drie regels */
.tijdlijn li.laden, .dash-tijdlijn .tijdlijn li.laden { min-height: 11rem; }
/* Hele pagina-inhoud: een groter vlak */
#inhoud > p.laden, #versies > p.laden, #wensen > p.laden, #uitjes-lijst > p.laden { min-height: 16rem; }

/* Welkomstpagina (eerste keer inloggen) */
.welkom-dialoog { max-width: 30rem; }
.welkom-dialoog h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 1.25rem; text-wrap: balance; }
.welkom-stappen { display: flex; gap: 0.35rem; justify-content: center; margin-bottom: 0.9rem; }
.welkom-stappen span { width: 8px; height: 8px; border-radius: 50%; background: var(--vlak-sterk, #d5dede); transition: background-color 0.2s, width 0.2s; }
.welkom-stappen span.actief { width: 22px; border-radius: 999px; background: var(--kleur-hoofd); }
.welkom-punten { list-style: none; padding: 0; margin: 0.4rem 0 0.9rem; display: flex; flex-direction: column; gap: 0.65rem; }
.welkom-punten li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; line-height: 1.45; }
.welkom-punten li > .icoon { color: var(--tekst-hoofd); width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; }
.welkom-knoppen { justify-content: flex-end; }
.welkom-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.4rem; }
.welkom-keuze button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
@media (max-width: 420px) { .welkom-keuze { grid-template-columns: 1fr; } }

/* Wisselen tussen groepen: icoon naast de naam in de kopbalk */
.groep-apps { position: relative; margin-left: 0.35rem; }
.groep-apps > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-klein); color: rgba(255, 255, 255, 0.85);
}
.groep-apps > summary::-webkit-details-marker { display: none; }
.groep-apps > summary:hover, .groep-apps[open] > summary { background: rgba(255, 255, 255, 0.14); color: #fff; }
.groep-apps > summary .icoon { width: 20px; height: 20px; }
.groep-lijst { left: 0; right: auto; min-width: 230px; animation: opduiken 0.1s var(--soepel); }
.groep-kop { padding: 0.35rem 0.75rem 0.2rem; color: var(--kleur-tekst-licht); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; font-weight: 700; }
.groep-lijst .meer-item { display: flex; align-items: center; gap: 0.6rem; }
.groep-lijst .meer-item.actief { font-weight: 700; cursor: default; }
.groep-bol { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.groep-vink { margin-left: auto; color: var(--tekst-hoofd); width: 18px; height: 18px; }
nav .groep-lijst a { color: var(--kleur-tekst); text-decoration: none; font-size: 0.95rem; }
@media (max-width: 700px) { .groep-apps { order: 0; } }
nav .groep-lijst a:hover { text-decoration: none; background: var(--vlak, #eef3f3); }
.groep-apps { margin-right: auto; }
@media (max-width: 700px) { nav .nav-pagina + .groep-apps, nav .groep-apps + .nav-pagina { flex: 0 1 auto; } .groep-apps { margin-right: auto; } }

/* Tekstpagina's (privacy, licenties) */
.tekst-pagina section { background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 0.9rem 1.1rem; margin-bottom: 1rem; }
.tekst-pagina h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.tekst-pagina ul { padding-left: 1.2rem; margin: 0.3rem 0; }
.tekst-pagina li { margin: 0.35rem 0; line-height: 1.5; }
.tekst-pagina p { line-height: 1.55; max-width: 68ch; }

/* Beheer → Leden: wat iemand zelf heeft ingesteld */
.instelling-labels { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.instelling-label { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--vlak, #eef3f3); color: var(--kleur-tekst-licht); }
.instelling-label.aan { background: rgba(var(--kleur-hoofd-rgb, 11, 110, 110), 0.14); color: var(--tekst-hoofd); }
.instelling-label.open { background: rgba(232, 163, 61, 0.18); color: #9a5b00; }
:where([data-thema="donker"]) .instelling-label.open { color: #f0b860; }

/* Meer-paneel: kleine links onderaan (wensen, versies, privacy, licenties) */
@media (max-width: 700px) {
  .met-onderbalk nav ul li.meer-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.1rem; padding-top: 0.2rem; }
  .met-onderbalk nav ul li.meer-links a { display: inline; padding: 0.35rem 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); border: none; text-decoration: underline; text-underline-offset: 3px; min-height: 0; background: none; }
  .met-onderbalk nav ul li.meer-links a.actief { color: #fff; font-weight: 700; }
}

/* Taggen: foto in de gewone opbouw, grote uitsnede, iedereen met één tik */
.tag-beeld { aspect-ratio: auto; background: none; }
.tag-beeld img { position: static; display: block; width: 100%; height: auto; }
.tag-gezicht { width: 88px; height: 88px; }
.tag-rij { gap: 0.75rem; }
.tag-keuzes { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0.45rem; flex: 1; }
.tag-vraag { font-weight: 700; color: var(--kleur-tekst); }
.tag-personen { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.persoon-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  border: none; border-radius: 999px; background: var(--vlak-sterk, #e7eeee); color: var(--kleur-tekst); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.persoon-chip .avatar { width: 30px; height: 30px; font-size: 0.72rem; }
.persoon-chip small { font-weight: 700; opacity: 0.8; }
.persoon-chip.sterk { background: var(--kleur-hoofd); color: #fff; }
.persoon-chip.misschien { outline: 2px solid var(--kleur-hoofd); outline-offset: -2px; }
.tag-extra { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tag-extra select { max-width: 10rem; }
@media (max-width: 700px) {
  .tag-kaart { gap: 0.6rem; padding: 0.6rem; }
  /* De foto hooguit ~40% van het scherm hoog, zodat de keuzes er direct onder staan */
  .tag-beeld { width: min(100%, calc(40vh * var(--r, 1.333))); justify-self: center; }
  .tag-rij { flex-direction: row; }
}

/* Bordspel tegen de computer */
.computer-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--vlak-sterk, #e7eeee); font-size: 0.9rem; }

/* Onderdelen die de groep heeft uitgezet (Beheer → Onderdelen) */
html[data-uit~="albums"] [data-onderdeel="albums"],
html[data-uit~="kalender"] [data-onderdeel="kalender"],
html[data-uit~="kaart"] [data-onderdeel="kaart"],
html[data-uit~="jaren"] [data-onderdeel="jaren"],
html[data-uit~="spellen"] [data-onderdeel="spellen"],
html[data-uit~="bordspellen"] [data-onderdeel="bordspellen"],
html[data-uit~="muziek"] [data-onderdeel="muziek"],
html[data-uit~="uitspraken"] [data-onderdeel="uitspraken"],
html[data-uit~="wensen"] [data-onderdeel="wensen"],
html[data-uit~="herkenning"] [data-onderdeel="herkenning"],
html[data-uit~="ailabels"] [data-onderdeel="ailabels"],
html[data-uit~="fotovandemaand"] [data-onderdeel="fotovandemaand"],
html[data-uit~="reacties"] [data-onderdeel="reacties"],
html[data-uit~="reacties"] .reacties-deel,
html[data-uit~="reacties"] #emoji-balk,
html[data-uit~="reacties"] .reactie-formulier,
html[data-uit~="spelletjes"] [data-onderdeel="spelletjes"] { display: none !important; }
/* Menu onderaan: de ruimte verdelen over de knoppen die er zijn (een onderdeel kan uit staan) */
@media (max-width: 700px) {
  .onderbalk { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
}

/* Rechten van je rol (Beheer → Rollen): knoppen om iets toe te voegen verbergen */
html[data-mag-niet~="voorstellen"] [data-recht="voorstellen"],
html[data-mag-niet~="voorstellen"] #voorstel-knop,
html[data-mag-niet~="voorstellen"] #nieuw-event-knop,
html[data-mag-niet~="uitjes"] [data-recht="uitjes"],
html[data-mag-niet~="uitjes"] #nieuw-uitje-knop,
html[data-mag-niet~="uitjes"] #bewerk-knop,
html[data-mag-niet~="fotos"] [data-recht="fotos"],
html[data-mag-niet~="fotos"] .upload-knop,
html[data-mag-niet~="taggen"] [data-recht="taggen"],
html[data-mag-niet~="taggen"] #tag-knop,
html[data-mag-niet~="taggen"] [data-actie="tag-modus"],
html[data-mag-niet~="reageren"] [data-recht="reageren"],
html[data-mag-niet~="reageren"] .emoji-balk,
html[data-mag-niet~="reageren"] .reactie-formulier,
html[data-mag-niet~="reageren"] .quote-like,
html[data-mag-niet~="uitspraken"] [data-recht="uitspraken"],
html[data-mag-niet~="uitspraken"] #quote-knop,
html[data-mag-niet~="muziek"] [data-recht="muziek"],
html[data-mag-niet~="muziek"] .muziek-formulier,
html[data-mag-niet~="albums"] [data-recht="albums"],
html[data-mag-niet~="wensen"] [data-recht="wensen"],
html[data-mag-niet~="wensen"] .wens-formulier,
html[data-mag-niet~="wensen"] .wens-stem,
html[data-mag-niet~="aanmelden"] [data-recht="aanmelden"],
html[data-mag-niet~="aanmelden"] .aanmeld-knop,
html[data-mag-niet~="aanmelden"] .voorstel-knoppen { display: none !important; }

/* Beheer → Rollen */
.rol-kop { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; }
.rol-kop input { flex: 1; min-width: 0; font-weight: 700; }
.rol-deel { margin-top: 0.4rem; }
.rol-deel > summary { cursor: pointer; font-weight: 700; color: var(--tekst-hoofd); padding: 0.35rem 0; }
.rol-nieuw { margin: 0; }
.beheer-rij select { max-width: 9rem; }

/* Poker (poker.html) */
:root { --pk-vilt: #1d6a4c; --pk-vilt-rand: #13452f; }
:root:where([data-thema="donker"]) { --pk-vilt: #17503a; --pk-vilt-rand: #0c2b1f; }
.poker-pagina { max-width: 60rem; }
.pk-budget { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 0.8rem 1rem; margin-bottom: 1rem; }
.pk-budget > div { display: flex; flex-direction: column; }
.pk-budget p { margin: 0; flex: 1 1 16rem; color: var(--kleur-tekst-licht); }
.pk-budget-getal { font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--tekst-hoofd); }
.pk-tafels { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.pk-tafel-kaart { display: flex; flex-direction: column; gap: 0.5rem; background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 0.8rem 1rem; }
.pk-tafel-kop { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.pk-tafel-kop .klein { color: var(--kleur-tekst-licht); }
.pk-tafel-knoppen { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pk-stand { list-style: none; padding: 0; margin: 0 0 0.6rem; background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); }
.pk-stand li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; }
.pk-stand li + li { border-top: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); }
.pk-stand li.ik { font-weight: 700; }
.pk-stand-plek { width: 1.4rem; color: var(--kleur-tekst-licht); font-variant-numeric: tabular-nums; }
.pk-stand-naam { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-stand-winst { font-variant-numeric: tabular-nums; }
.pk-stand-winst.plus { color: #2e7d32; }
.pk-stand-winst.min { color: #c62828; }
:where([data-thema="donker"]) .pk-stand-winst.plus { color: #81c784; }
:where([data-thema="donker"]) .pk-stand-winst.min { color: #ef9a9a; }
.pk-archief { margin: 0.6rem 0; }
.pk-regels { padding-left: 1.1rem; }

/* De tafel: stoelen rond een ovaal, jij onderaan */
.pk-tafel { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 30rem; margin: 0.4rem auto 0.8rem; }
.pk-vilt { position: absolute; inset: 15% 20%; border-radius: 999px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--pk-vilt) 80%, white) 0%, var(--pk-vilt) 70%); border: 0.45rem solid var(--pk-vilt-rand); box-shadow: inset 0 0 1.5rem rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; }
.pk-midden { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; color: #fff; text-align: center; padding: 0 0.4rem; }
.pk-bord { display: flex; gap: 0.2rem; }
.pk-pot { font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.3); border-radius: 999px; padding: 0.15rem 0.7rem; min-height: 1.4rem; }
.pk-pot:empty { display: none; }
.pk-uitslag { font-weight: 700; font-size: 0.85rem; background: rgba(0, 0, 0, 0.3); border-radius: var(--r-klein); padding: 0.25rem 0.6rem; }
.pk-volgende { color: rgba(255, 255, 255, 0.85); }
.pk-stoel { position: absolute; transform: translate(-50%, -50%); width: 5.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 0.3rem 0.25rem; font-size: 0.8rem; text-align: center; transition: box-shadow var(--snel), opacity var(--snel); }
.pk-stoel.leeg { width: 4rem; background: transparent; box-shadow: none; border: 1px dashed var(--rand, rgba(0, 0, 0, 0.2)); min-height: 2.4rem; justify-content: center; font-size: 0.75rem; }
.pk-stoel.gefold { opacity: 0.55; }
.pk-stoel.beurt { box-shadow: 0 0 0 3px var(--kleur-accent), var(--schaduw-1); }
.pk-stoel.winnaar { box-shadow: 0 0 0 3px #f2c14e, var(--schaduw-1); }
.pk-stoel-kop { display: flex; align-items: center; gap: 0.25rem; max-width: 100%; }
.pk-stoel-kop .avatar { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.pk-naam { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk-fiches { font-variant-numeric: tabular-nums; color: var(--kleur-tekst-licht); }
.pk-knop-schijf { flex-shrink: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; color: #222; border: 1px solid #999; font-size: 0.65rem; font-weight: 800; line-height: 1rem; }
.pk-label { font-size: 0.7rem; color: var(--kleur-tekst-licht); }
.pk-inzet { position: absolute; bottom: -0.7rem; right: -0.4rem; background: #f2c14e; color: #3a2a00; border-radius: 999px; padding: 0 0.4rem; font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.pk-hand { display: flex; gap: 0.1rem; }
.pk-klok { position: absolute; left: 0.4rem; right: 0.4rem; bottom: 0.15rem; height: 3px; border-radius: 3px; background: var(--kleur-accent); transform-origin: left; transform: scaleX(var(--over, 1)); transition: transform 0.25s linear; }
.pk-klok[data-krap="ja"] { background: #c62828; }
.pk-stoel[data-pos="0"] { left: 50%; top: 91%; }
.pk-stoel[data-pos="1"] { left: 16%; top: 80%; }
.pk-stoel[data-pos="2"] { left: 14%; top: 52%; }
.pk-stoel[data-pos="3"] { left: 16%; top: 24%; }
.pk-stoel[data-pos="4"] { left: 50%; top: 8%; }
.pk-stoel[data-pos="5"] { left: 84%; top: 24%; }
.pk-stoel[data-pos="6"] { left: 86%; top: 52%; }
.pk-stoel[data-pos="7"] { left: 84%; top: 80%; }
@media (min-width: 700px) {
  .pk-tafel { aspect-ratio: 16 / 9; max-height: 30rem; }
  .pk-vilt { inset: 14% 10%; }
  .pk-stoel { width: 7rem; font-size: 0.85rem; }
  .pk-stoel[data-pos="0"] { left: 50%; top: 88%; }
  .pk-stoel[data-pos="1"] { left: 22%; top: 86%; }
  .pk-stoel[data-pos="2"] { left: 7%; top: 50%; }
  .pk-stoel[data-pos="3"] { left: 24%; top: 12%; }
  .pk-stoel[data-pos="4"] { left: 50%; top: 10%; }
  .pk-stoel[data-pos="5"] { left: 76%; top: 12%; }
  .pk-stoel[data-pos="6"] { left: 93%; top: 50%; }
  .pk-stoel[data-pos="7"] { left: 78%; top: 86%; }
}

/* Kaarten: altijd wit, zoals echte kaarten */
.pk-kaart { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 1.55rem; height: 2.15rem; border-radius: 0.25rem; background: #fff; color: #1b1b1b; border: 1px solid #bbb; line-height: 1; font-size: 0.78rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.pk-kaart b { font-weight: 800; }
.pk-kaart i { font-style: normal; }
.pk-kaart.rood { color: #c62828; }
.pk-kaart.dicht { background: repeating-linear-gradient(45deg, #8e2430 0 4px, #a93642 4px 8px); border-color: #fff; }
.pk-kaart.plek { background: rgba(255, 255, 255, 0.12); border: 1px dashed rgba(255, 255, 255, 0.4); box-shadow: none; }
.pk-bord .pk-kaart { width: 2.1rem; height: 2.9rem; font-size: 1rem; }
.pk-kaart.groot { width: 3.2rem; height: 4.4rem; font-size: 1.4rem; border-radius: 0.4rem; }
@media (min-width: 700px) { .pk-bord .pk-kaart { width: 2.7rem; height: 3.7rem; font-size: 1.2rem; } }

/* Jouw deel onder de tafel */
.pk-mijn { display: flex; flex-direction: column; gap: 0.6rem; background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 0.8rem 1rem; margin-bottom: 1rem; }
.pk-mijn.beurt { box-shadow: 0 0 0 2px var(--kleur-accent), var(--schaduw-1); }
.pk-mijn > p { margin: 0; }
.pk-mijn-kaarten { display: flex; gap: 0.35rem; justify-content: center; }
.pk-mijn-kaarten:empty { display: none; }
.pk-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pk-verhogen { display: flex; flex-direction: column; gap: 0.4rem; }
.pk-snel { display: flex; gap: 0.8rem; justify-content: center; }
.pk-schuif { display: flex; gap: 0.5rem; align-items: center; }
.pk-schuif input[type="range"] { flex: 1; min-width: 0; }
.pk-schuif input[type="number"] { flex: 0 0 5.5rem; width: 5.5rem; font-variant-numeric: tabular-nums; }
.pk-mijn-extra { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pk-weg { display: flex; align-items: center; gap: 0.3rem; }
.pk-log-hand { padding: 0.4rem 0; }
.pk-log-hand + .pk-log-hand { border-top: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); }
.pk-log-hand ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.pk-log-bord { display: inline-flex; gap: 0.1rem; vertical-align: middle; }
.pk-log-bord .pk-kaart { width: 1.3rem; height: 1.8rem; font-size: 0.68rem; }

.pk-onder { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.pk-kies-lijst { display: flex; flex-direction: column; gap: 0.2rem; max-height: 50vh; overflow-y: auto; margin-bottom: 0.8rem; }
.pk-kies { display: flex; align-items: center; gap: 0.45rem; min-height: 40px; }
.pk-kies .avatar { width: 1.6rem; height: 1.6rem; }
.formulier-dialoog .pk-kies { flex-direction: row; justify-content: flex-start; text-align: left; font-weight: 400; }
.pk-kies input[type="checkbox"] { width: auto; margin: 0; flex: none; }

/* Alleen lezen (lib/alleenlezen.js): balk onder het menu, en knoppen voor spelen weg */
.alleen-lezen-balk { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 0.45rem 1rem; background: #fff4d6; color: #5a4300; font-size: 0.85rem; line-height: 1.35; text-align: center; }
:where([data-thema="donker"]) .alleen-lezen-balk { background: #3a3014; color: #f5e2a8; }
html[data-mag-niet~="spelen"] [data-recht="spelen"] { display: none !important; }

/* Knop in een melding ("Ongedaan maken") */
#melding { display: flex; align-items: center; gap: 0.9rem; }
#melding:not(.zichtbaar) { pointer-events: none; }
.melding-knop { background: none; border: 0; padding: 0.25rem 0; min-height: 0; color: #9fe3dc; font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; box-shadow: none; }
:where([data-thema="donker"]) .melding-knop { color: #0b5c56; }
/* Tagscherm: al getagd, met weghalen */
.tag-getagd { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; vertical-align: middle; }
.tag-getagd-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.2rem 0.1rem 0.55rem; border-radius: 999px; background: var(--vlak, rgba(0, 0, 0, 0.06)); font-size: 0.8rem; }
.tag-getagd-chip button { background: none; border: 0; box-shadow: none; min-height: 0; width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; color: var(--kleur-tekst-licht); cursor: pointer; line-height: 1; }
.tag-getagd-chip button:hover { background: rgba(0, 0, 0, 0.08); color: #b3261e; }
.tag-vak.getagd, .tag-stip { cursor: pointer; }
#melding { width: max-content; }
#melding > span { flex: 1 1 auto; min-width: 0; }

/* Keuzelijst in een instellingenregel (bijv. Taal): compact rechts, de uitleg krijgt de ruimte */
.instelling-tekst { flex: 1 1 auto; }
.instelling > select { width: auto; max-width: min(15rem, 55%); flex: 0 1 auto; padding: 0.45rem 2.2rem 0.45rem 0.75rem; font-size: 0.95rem; }
@media (max-width: 480px) {
  .instelling:has(> select) { flex-direction: column; align-items: stretch; }
  .instelling > select { max-width: 100%; align-self: flex-start; }
}

/* Beheer → Debug (debuglogboek) */
.debug-sessie { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.debug-sessie .logboek-tekst { flex: 1; min-width: 0; }
.debug-sessie .label-chip { margin-left: 0.4rem; }
.debug-vink { display: inline-flex; align-items: center; gap: 0.35rem; }
.debug-vink input { width: auto; margin: 0; }
.debug-regels { list-style: none; padding: 0; margin: 0.6rem 0 0; font-size: 0.82rem; }
.debug-regel { display: grid; grid-template-columns: 4.2rem 5.5rem 1fr; gap: 0.5rem; padding: 0.3rem 0.2rem; border-top: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); align-items: start; }
.debug-tijd { color: var(--kleur-tekst-licht); font-variant-numeric: tabular-nums; }
.debug-soort { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.debug-bericht { min-width: 0; overflow-wrap: anywhere; }
.debug-bericht pre, .debug-blok pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.75rem; max-height: 22rem; overflow: auto; background: var(--vlak, rgba(0, 0, 0, 0.05)); padding: 0.4rem 0.5rem; border-radius: var(--r-klein); }
.debug-regel.niveau-fout { background: rgba(198, 40, 40, 0.08); }
.debug-regel.niveau-fout .debug-soort { color: #c62828; }
.debug-regel.niveau-waarschuwing .debug-soort { color: #b26a00; }
:where([data-thema="donker"]) .debug-regel.niveau-fout .debug-soort { color: #ef9a9a; }
:where([data-thema="donker"]) .debug-regel.niveau-waarschuwing .debug-soort { color: #f0b860; }
@media (max-width: 600px) { .debug-regel { grid-template-columns: 3.6rem 1fr; } .debug-bericht { grid-column: 1 / -1; } }
.debug-stand > summary { cursor: pointer; font-weight: 700; color: var(--tekst-hoofd); padding: 0.2rem 0; }

/* Wachten tot de telefoon de gekozen foto's klaar heeft (niet te meten): bewegende balk */
.upload-voortgang.wachten .vulling { width: 30% !important; animation: upload-wachten 1.4s ease-in-out infinite; }
@keyframes upload-wachten { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .upload-voortgang.wachten .vulling { animation: none; width: 100% !important; opacity: 0.4; } }

/* ---------- Beheer: nieuwe indeling (5.25) ---------- */
/* Tabbladen binnen een deel: kleiner en vlakker dan de delen erboven */
.beheer-sub > .tabbladen > .tabbalk { margin-bottom: 1rem; gap: 0.3rem; }
.beheer-sub > .tabbladen > .tabbalk .tab { padding: 0.35rem 0.8rem; font-size: 0.85rem; box-shadow: none; background: var(--vlak, rgba(0, 0, 0, 0.05)); color: var(--kleur-tekst); }
.beheer-sub > .tabbladen > .tabbalk .tab.actief { background: var(--tekst-hoofd); color: var(--kleur-kaart); }

/* Leden: zoeken, filter en nieuw lid op één regel */
.leden-balk { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0 0.8rem; }
.leden-balk input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.leden-balk select { flex: 0 1 13rem; width: auto; }
.leden-nieuw { flex: 0 0 auto; }
.leden-nieuw > summary { list-style: none; cursor: pointer; }
.leden-nieuw > summary::-webkit-details-marker { display: none; }
.leden-nieuw[open] { flex-basis: 100%; }
.leden-nieuw[open] > summary { margin-bottom: 0.5rem; }

/* Eén regel per lid */
.leden-lijst { display: flex; flex-direction: column; background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); overflow: hidden; margin-bottom: 1rem; }
.lid-rij { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.9rem; color: inherit; text-decoration: none; min-height: 3.2rem; }
.lid-rij + .lid-rij { border-top: 1px solid var(--rand, rgba(0, 0, 0, 0.08)); }
.lid-rij:hover { background: var(--vlak, rgba(0, 0, 0, 0.04)); }
.lid-rij.oud-lid { opacity: 0.7; }
.lid-tekst { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.lid-tekst strong, .lid-tekst .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lid-tekst .klein { color: var(--kleur-tekst-licht); }
.lid-labels { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; max-width: 45%; }
.lid-labels .label-chip { font-size: 0.72rem; padding: 0.1rem 0.5rem; }
.label-chip.let-op { background: rgba(232, 163, 61, 0.2); color: #8a5300; }
:where([data-thema="donker"]) .label-chip.let-op { color: #f0b860; }
.lid-pijl { color: var(--kleur-tekst-licht); font-size: 1.4rem; line-height: 1; }
.lid-avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.lid-avatar.online::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #2ea44f; border: 2px solid var(--kleur-kaart); }
.lid-avatar.groot .avatar { width: 3.6rem; height: 3.6rem; font-size: 1.3rem; }
.lid-avatar.groot.online::after { width: 0.9rem; height: 0.9rem; }
@media (max-width: 520px) {
  .lid-rij { flex-wrap: wrap; }
  .lid-labels { order: 3; max-width: none; justify-content: flex-start; flex-basis: 100%; padding-left: calc(2rem + 0.7rem); }
}

/* Lidkaart */
.lid-kaart { display: flex; flex-direction: column; gap: 0; }
.lid-terug { align-self: flex-start; margin-bottom: 0.6rem; }
.lid-kop { display: flex; align-items: center; gap: 0.9rem; background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 0.9rem 1rem; margin-bottom: 1rem; }
.lid-kop-tekst { min-width: 0; }
.lid-kop h2 { margin: 0; }
.lid-kop p { margin: 0.1rem 0 0.2rem; color: var(--kleur-tekst-licht); }
.lid-waarde { font-variant-numeric: tabular-nums; text-align: right; color: var(--kleur-tekst); }
.lid-kaart .instelling > input { width: auto; flex: 0 1 18rem; min-width: 0; }
.lid-deel { margin-bottom: 1rem; }
.lid-deel > h2 { font-size: 1.05rem; margin: 0.4rem 0 0.5rem; }
.logboek-blok.ingebed, .debug-blok.ingebed { box-shadow: var(--schaduw-1); }
@media (max-width: 480px) {
  .lid-kaart .instelling:has(> input) { flex-direction: column; align-items: stretch; }
  .lid-kaart .instelling > input { flex-basis: auto; }
}

/* ---------- Verjaardagen (js/verjaardagen.js) ---------- */
/* Profiel → Instellingen: dag, maand en (optioneel) jaar naast elkaar */
.verjaardag-invoer { display: grid; grid-template-columns: 4.6rem minmax(7rem, 1fr) 5.6rem; gap: var(--ruimte-2); flex: 0 1 22rem; min-width: 0; }
.verjaardag-invoer .verjaardag-jaar { font-variant-numeric: tabular-nums; }
.verjaardag-weg { display: flex; justify-content: flex-end; }
.verjaardag-weg:has(> [hidden]) { display: none; }
@media (max-width: 480px) {
  .instelling:has(> .verjaardag-invoer) { flex-direction: column; align-items: stretch; }
  .verjaardag-invoer { flex-basis: auto; grid-template-columns: 4.2rem minmax(0, 1fr) 5.2rem; }
}
/* Profiel: verjaardag bovenaan het overzicht */
.profiel-verjaardag { margin: 0 0 var(--ruimte-3); color: var(--kleur-tekst-licht); }
.profiel-verjaardag:empty { display: none; }
/* Startpagina: "Vandaag jarig" in de accentkleur, zoals de andere meldingen bovenaan */
.dash-herinnering.verjaardag-melding { background: rgba(232, 163, 61, 0.14); border-left-color: var(--kleur-accent); }
:where([data-thema="donker"]) .dash-herinnering.verjaardag-melding { background: rgba(232, 163, 61, 0.16); }
/* Kalender: verjaardag in het vakje van de dag, en de lijst onderaan */
.item-jarig { background: #fde8ef; color: #9a2f55; }
.stip-jarig { background: #d9658f; }
:where([data-thema="donker"]) .item-jarig { background: #3a2230; color: #f2b3c8; }
@media (max-width: 700px) {
  .item-jarig { background: #d9658f; }
}
.verjaardag-lijst { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.verjaardag-rij {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ruimte-3);
  background: var(--kleur-kaart); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: var(--ruimte-2) var(--ruimte-4);
  color: inherit; text-decoration: none;
}
.verjaardag-rij:hover { box-shadow: var(--schaduw-2); }
.verjaardag-rij.vandaag { box-shadow: inset 4px 0 0 var(--kleur-accent), var(--schaduw-1); }
.verjaardag-naam { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.verjaardag-naam > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verjaardag-wanneer { color: var(--kleur-tekst-licht); white-space: nowrap; }
:where([data-thema="donker"]) .verjaardag-rij { border: 1px solid var(--rand); }