/* ===========================================================================
   Nalatenschapcommunity - vormgeving
   ---------------------------------------------------------------------------
   Warme, rustige kleuren rond de gouden vlinder. Ingericht als een plek waar
   je scrollt en leest. Gemaakt voor de telefoon; op een breed scherm komt er
   een vaste zijbalk met alle kringen bij, zoals je van Reddit kent.
   ======================================================================== */

/* Zet iets in de app op "hidden", dan moet het ook echt weg zijn. Zonder deze
   regel wint een eigen "display" hieronder van het verbergen, en dan blijft er
   een knop staan waar niets achter zit. */
[hidden] {
  display: none !important;
}

:root {
  --papier: #faf6f0;
  --papier-diep: #f2ebe1;
  --kaart: #ffffff;
  --inkt: #2a2320;
  --inkt-zacht: #6b5f56;
  --goud: #a6763f;
  --goud-diep: #8a5f30;
  --lijn: #e0d5c6;
  --groen: #4f6b52;
  --rood: #9b4a3f;
  --schaduw: rgba(42, 35, 32, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1c1917;
    --papier-diep: #14120f;
    --kaart: #26221f;
    --inkt: #f0e9e0;
    --inkt-zacht: #a89b8f;
    --goud: #d9a870;
    --goud-diep: #e8bd8a;
    --lijn: #3a332e;
    --groen: #8fb094;
    --rood: #d9887c;
    --schaduw: rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --papier: #1c1917;
  --papier-diep: #14120f;
  --kaart: #26221f;
  --inkt: #f0e9e0;
  --inkt-zacht: #a89b8f;
  --goud: #d9a870;
  --goud-diep: #e8bd8a;
  --lijn: #3a332e;
  --groen: #8fb094;
  --rood: #d9887c;
  --schaduw: rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
  --papier: #faf6f0;
  --papier-diep: #f2ebe1;
  --kaart: #ffffff;
  --inkt: #2a2320;
  --inkt-zacht: #6b5f56;
  --goud: #a6763f;
  --goud-diep: #8a5f30;
  --lijn: #e0d5c6;
  --groen: #4f6b52;
  --rood: #9b4a3f;
  --schaduw: rgba(42, 35, 32, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Ruimte onderaan voor de knoppenbalk, ook op een iPhone met een streepje. */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --------------------------------------------------------------- oefenbalk */
.oefenbalk {
  background: var(--goud);
  color: #fff;
  text-align: center;
  font-size: 13px;
  padding: 6px 12px;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ----------------------------------------------------------------- kopbalk */
.kopbalk {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}

.kop-merk {
  flex: 1;
  /* Zonder dit weigert de naam te krimpen en duwt hij op een smal scherm de
     hele bladzijde breder dan de telefoon. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}

.kop-merk img {
  flex: none;
}

/* De vlinder zelf, niet het app-icoontje: doorzichtige achtergrond, dus hij
   staat gewoon op het papier. */
.kop-merk img {
  width: 44px;
  height: auto;
  flex: none;
}

.kop-naam {
  font-size: 18px;
  color: var(--goud-diep);
  letter-spacing: 0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kop-terug,
.kop-rond {
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--inkt);
  border-radius: 999px;
}

.kop-terug:active,
.kop-rond:active {
  background: var(--papier-diep);
}

/* ------------------------------------------------------------------ zoeken */
.zoekbalk {
  position: sticky;
  top: 52px;
  z-index: 19;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}

.zoekbalk input {
  flex: 1;
  font: inherit;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--kaart);
  color: var(--inkt);
}

/* ------------------------------------------------------------------ zijbalk */
/* De linkerkolom, zoals bij Reddit. Alleen op een breed scherm: op de
   telefoon zou hij de halve pagina opeten, en daar staat de knoppenbalk
   onderin al. */
.zijbalk {
  display: none;
}

@media (min-width: 1040px) {
  .zijbalk {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 252px;
    overflow-y: auto;
    padding: 22px 14px 40px;
    background: var(--papier-diep);
    border-right: 1px solid var(--lijn);
    z-index: 25;
  }

  /* Moet ná de regel hierboven staan, anders wint "display: block". */
  .zijbalk[hidden] {
    display: none;
  }

  /* Alles opzij schuiven zodat het niet onder de zijbalk verdwijnt. */
  body {
    padding-left: 252px;
  }
}

.zijbalk-merk {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 auto 20px;
  cursor: pointer;
}

.zijbalk-merk img {
  display: block;
  width: 132px;
  height: auto;
}

/* De leus onder de vlinder. Kort, en in het schuine schrift van de titels,
   zodat het als een belofte leest en niet als een menu-item. */
.zijbalk-leus {
  margin: -6px 0 22px;
  padding: 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--goud-diep);
  text-align: center;
}

.zijbalk-kop {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin: 0 0 8px 10px;
}

.zijbalk-kring {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 15px;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  color: var(--inkt);
  line-height: 1.3;
}

.zijbalk-kring:hover {
  background: var(--kaart);
}

.zijbalk-kring[aria-current="true"] {
  background: var(--goud);
  color: #fff;
}

.zijbalk-teken {
  font-size: 17px;
  width: 22px;
  text-align: center;
  flex: none;
}

.zijbalk-voet {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--lijn);
  display: grid;
  gap: 2px;
}

.zijbalk-link {
  text-align: left;
  font: inherit;
  font-size: 14px;
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--inkt-zacht);
  text-decoration: none;
}

/* De weg naar binnen mag opvallen tussen de gewone verwijzingen. */
.zijbalk-link.zijbalk-aanmelden {
  color: var(--goud-diep);
  font-weight: 700;
}

.zijbalk-link:hover {
  background: var(--kaart);
  color: var(--inkt);
}

/* ----------------------------------------------------------------- schermen */
.scherm {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

.scherm[hidden] {
  display: none;
}

.scherm-midden {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ------------------------------------------------------------------ teksten */
.kop {
  font-size: 26px;
  font-weight: normal;
  margin: 8px 0 4px;
}

.kop-klein {
  font-size: 19px;
  font-weight: normal;
  margin: 28px 0 8px;
  color: var(--goud-diep);
}

.titel {
  font-size: 34px;
  font-weight: normal;
  line-height: 1.15;
  margin: 0 0 6px;
}

.titel-onder {
  font-size: 22px;
  color: var(--goud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uitgever {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin: 0 0 12px;
}

.ondertitel,
.lead {
  color: var(--inkt-zacht);
  margin: 0 0 20px;
}

.leeg {
  text-align: center;
  color: var(--inkt-zacht);
  padding: 40px 20px;
  font-style: italic;
}

.fijnedruk {
  font-size: 13px;
  color: var(--inkt-zacht);
  line-height: 1.5;
  margin: 20px 0;
}

.foutmelding {
  color: var(--rood);
  background: color-mix(in srgb, var(--rood) 8%, transparent);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
}

.goedmelding {
  color: var(--groen);
  background: color-mix(in srgb, var(--groen) 10%, transparent);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
}

.logo {
  display: block;
  width: 170px;
  height: auto;
  margin: 0 0 16px -10px;
}

@media (prefers-color-scheme: dark) {
  .logo {
    filter: brightness(1.12);
  }
}

:root[data-theme="dark"] .logo {
  filter: brightness(1.12);
}

/* ------------------------------------------------------------------ knoppen */
.knop {
  font: inherit;
  font-size: 16px;
  background: var(--goud);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.15s;
}

.knop:hover {
  background: var(--goud-diep);
}

.knop:disabled {
  opacity: 0.5;
  cursor: default;
}

.knop-groot {
  width: 100%;
  padding: 15px 22px;
  font-size: 17px;
  margin-top: 8px;
}

.knop-klein {
  font-size: 14px;
  padding: 7px 16px;
}

.knop-meer {
  display: block;
  margin: 24px auto 0;
  background: none;
  color: var(--goud-diep);
  border: 1px solid var(--lijn);
}

.knop-meer:hover {
  background: var(--papier-diep);
}

.tekstlink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--goud-diep);
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------------ velden */
.veld {
  margin-bottom: 20px;
}

.veld label {
  display: block;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: 6px;
}

.veld input,
.veld select,
.veld textarea,
#veld-meldreden {
  width: 100%;
  font: inherit;
  font-size: 16px; /* niet kleiner: anders zoomt de iPhone in bij het tikken */
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--kaart);
  color: var(--inkt);
}

.veld textarea,
#veld-reactie,
#veld-meldreden {
  resize: vertical;
  line-height: 1.6;
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: 2px solid var(--goud);
  outline-offset: 1px;
}

.veld-hulp {
  font-size: 13px;
  color: var(--inkt-zacht);
  margin: 6px 0 0;
}

.optie {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 18px;
  cursor: pointer;
}

.optie input {
  margin-top: 5px;
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--goud);
}

.wissel {
  text-align: center;
  color: var(--inkt-zacht);
  font-size: 15px;
  margin: 16px 0 0;
}

/* -------------------------------------------------------------- vraagkaart */
.vraagkaart {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--goud) 14%, var(--kaart)),
    var(--kaart)
  );
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.vraagkaart-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud-diep);
  margin: 0 0 6px;
}

.vraagkaart-tekst {
  font-size: 19px;
  margin: 0 0 14px;
}

/* ----------------------------------------------------------------- kringrij */
/* De kringen stonden hier eerst in één rij die opzij schoof. Dat werkte niet:
   op een telefoon zag je er vier, en dat er nog vijf achter zaten kon je
   nergens aan zien. Wie dat niet toevallig ontdekte, miste de helft van het
   platform.

   Nu vallen ze gewoon door naar de volgende regel. Het kost een paar
   centimeter hoogte en dat is het waard: alles staat in beeld en er is niets
   meer om te ontdekken. Verborgen schuifrijen dus niet opnieuw invoeren. */
.kringrij {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 12px;
  margin: 0 0 8px;
}

.kringknop {
  flex: none;
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  background: var(--kaart);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
}

/* Op een telefoon net iets kleiner, zodat er twee naast elkaar passen. Met de
   grote maat kwam elke kring op een eigen regel en werd de rij bijna een half
   scherm hoog, voordat je één verhaal had gezien. */
@media (max-width: 520px) {
  .kringknop {
    font-size: 13px;
    padding: 6px 11px;
  }
}

.kringknop[aria-pressed="true"] {
  background: var(--goud);
  border-color: var(--goud);
  color: #fff;
}

/* -------------------------------------------------------------- kringkaarten */
.kringkaarten {
  display: grid;
  gap: 12px;
}

.kringkaart {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  color: inherit;
}

.kringkaart:hover {
  border-color: var(--goud);
}

.kringkaart-naam {
  font-size: 18px;
  margin: 0 0 2px;
}

.kringkaart-onder {
  font-size: 13px;
  color: var(--inkt-zacht);
  margin: 0 0 8px;
}

.kringkaart-uitleg {
  font-size: 15px;
  color: var(--inkt-zacht);
  margin: 0;
}

/* -------------------------------------------------------------- verhaalkaart */
.lijst {
  display: grid;
  gap: 12px;
}

.kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px var(--schaduw);
}

.kaart-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--inkt-zacht);
  margin-bottom: 8px;
}

.kaart-kring {
  color: var(--goud-diep);
}

.kaart-titel {
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 6px;
  cursor: pointer;
}

.kaart-tekst {
  margin: 0;
  color: var(--inkt-zacht);
  cursor: pointer;
  /* Maximaal vier regels in de lijst; de rest lees je in het verhaal zelf. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kaart-voet {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.kaart-knop {
  font: inherit;
  font-size: 14px;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--inkt-zacht);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.kaart-knop:hover {
  background: var(--papier-diep);
}

.kaart-knop[aria-pressed="true"] {
  color: var(--goud-diep);
}

.kaart-knop.rechts {
  margin-left: auto;
}

.verborgen-vlag {
  font-size: 13px;
  color: var(--rood);
  border: 1px solid var(--rood);
  border-radius: 999px;
  padding: 2px 10px;
}

/* --------------------------------------------------------------- verhaal vol */
.verhaal-vol .kaart-titel {
  font-size: 26px;
  cursor: default;
}

.verhaal-tekst {
  white-space: pre-wrap;
  margin: 0;
}

/* ------------------------------------------------------------------ reacties */
.reactie {
  border-top: 1px solid var(--lijn);
  padding: 14px 0;
}

.reactie-kop {
  font-size: 13px;
  color: var(--inkt-zacht);
  margin: 0 0 4px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.reactie-tekst {
  margin: 0;
  white-space: pre-wrap;
}

.reactieformulier {
  margin-top: 20px;
  display: grid;
  gap: 10px;
  justify-items: start;
}

.reactieformulier textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--kaart);
  color: var(--inkt);
}

/* ------------------------------------------------------------------- hulp */
.hulpkaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--groen);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.hulpkaart-naam {
  font-size: 17px;
  margin: 0 0 2px;
}

.hulpkaart-wanneer {
  font-size: 14px;
  color: var(--inkt-zacht);
  margin: 0 0 8px;
}

.hulpkaart a {
  color: var(--goud-diep);
  font-size: 15px;
  margin-right: 14px;
}

/* ------------------------------------------------------- foto's en video */
.media {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  border-radius: 14px;
  overflow: hidden;
}

/* Twee of vier foto's naast elkaar, één of drie onder elkaar groot. */
.media-2,
.media-4 {
  grid-template-columns: 1fr 1fr;
}

.media-item {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  background: var(--papier-diep);
}

.media-1 .media-item,
.media-3 .media-item {
  object-fit: contain;
  max-height: 520px;
}

/* --------------------------------------------- gekozen beeld in het formulier */
.mediavoorbeeld {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.voorbeeldje {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--lijn);
  background: var(--papier-diep);
}

.voorbeeldje img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.voorbeeld-video {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: system-ui, -apple-system, sans-serif;
}

.voorbeeld-weg {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* De bestandskiezer ziet er per browser anders uit; dit maakt hem rustiger. */
#veld-media {
  font: inherit;
  font-size: 15px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--inkt-zacht);
}

/* ------------------------------------------------------------------ het boek */
.boekkaart {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
  text-decoration: none;
  color: inherit;
}

.boekkaart:hover {
  border-color: var(--goud);
}

.boekkaart img {
  flex: none;
  width: 72px;
  height: auto;
}

.boekkaart-titel {
  display: block;
  font-size: 19px;
  margin-bottom: 4px;
}

.boekkaart-onder {
  display: block;
  font-size: 15px;
  color: var(--inkt-zacht);
  line-height: 1.5;
}

.boekkaart-link {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--goud-diep);
}

/* --------------------------------------------------------------- boekenfonds */
.tellerkaart {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--goud) 16%, var(--kaart)),
    var(--kaart)
  );
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  margin-bottom: 24px;
}

.teller-getal {
  font-size: 44px;
  line-height: 1;
  color: var(--goud-diep);
  margin: 0;
}

.teller-tekst {
  font-size: 15px;
  color: var(--inkt-zacht);
  margin: 6px 0 0;
  letter-spacing: 0.04em;
}

/* De donatieknop is een link, geen knop, hij moet er wel hetzelfde uitzien. */
a.knop {
  display: block;
  text-align: center;
  text-decoration: none;
}

.aanvraagkaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 14px 18px;
}

.aanvraag-mail {
  font-size: 16px;
  margin: 0 0 4px;
}

.aanvraag-bericht {
  font-size: 15px;
  color: var(--inkt-zacht);
  white-space: pre-wrap;
  margin: 0 0 10px;
}

.melding-kaart {
  background: color-mix(in srgb, var(--groen) 10%, var(--kaart));
  border: 1px solid var(--groen);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.melding-kaart p {
  margin: 0;
}

/* ------------------------------------------------------------ gezien worden */
.gelezen {
  margin-left: auto;
  font-size: 13px;
  color: var(--inkt-zacht);
  white-space: nowrap;
}

/* Antwoord op een reactie: één laag ingesprongen, met een lijntje ernaast
   zodat je op een telefoon ziet dat het bij elkaar hoort. */
.reactie-antwoord {
  margin-left: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--lijn);
}

.reactie-antwoordknop {
  font-size: 13px;
  color: var(--goud-diep);
}

.antwoordrij {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--inkt-zacht);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------- gastvrouw */
/* Eén rustig woordje naast de naam van een gastvrouw. Het moet te zien zijn
   dat hier een computer schrijft, maar het hoeft niet te schreeuwen: geen
   hoofdletters, geen rand, gewoon een zacht labeltje waar je op kunt tikken
   voor de uitleg. */
.gastvrouw-vlag {
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--papier-diep);
  border: 0;
  color: var(--inkt-zacht);
  border-radius: 999px;
  padding: 2px 9px;
  font-family: inherit;
  cursor: help;
}

.gastvrouw-vlag:hover {
  color: var(--inkt);
}

/* -------------------------------------------------------------- onderwerpen */
.onderwerpen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
}

.onderwerp {
  font: inherit;
  font-size: 13px;
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  color: var(--inkt-zacht);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
}

.onderwerp:hover {
  background: var(--kaart);
  color: var(--goud-diep);
}

.onderwerpkiezer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.onderwerpvink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}

.onderwerpvink:has(input:checked) {
  background: var(--goud);
  border-color: var(--goud);
  color: #fff;
}

/* ----------------------------------------------------------------- vertalen */
.vertaalrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 14px 16px;
  background: var(--papier-diep);
  border-radius: 12px;
  font-size: 15px;
}

.vertaalrij select {
  font: inherit;
  font-size: 15px;
  padding: 7px 10px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--kaart);
  color: var(--inkt);
}

/* --------------------------------------------------- nabestaandenregeling */
.regelingkaart {
  background: color-mix(in srgb, var(--groen) 8%, var(--kaart));
  border: 1px solid color-mix(in srgb, var(--groen) 32%, transparent);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.regelingkaart p {
  margin: 0 0 12px;
}

/* ----------------------------------------------------------- grote letters */
/* Wie hier schrijft is vaak vijftig tot tachtig. Dit bepaalt of iemand
   binnenkomt of afhaakt. */
:root.grote-letters body {
  font-size: 20px;
  line-height: 1.8;
}

:root.grote-letters .kaart-titel {
  font-size: 24px;
}

:root.grote-letters .knop,
:root.grote-letters .menu-rij,
:root.grote-letters input,
:root.grote-letters textarea,
:root.grote-letters select {
  font-size: 19px;
}

:root.grote-letters .kaart-knop {
  padding: 10px 14px;
}

:root.grote-letters .veld-hulp,
:root.grote-letters .fijnedruk {
  font-size: 16px;
}

/* ------------------------------------------------------------ iemands plek */
.kaart-naam {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
}

.kaart-naam:hover {
  color: var(--goud-diep);
}

.iemandkaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 22px;
}

.iemand-naam {
  margin: 0;
  font-size: 24px;
  color: var(--goud-diep);
}

/* Die ene regel over jezelf. Dit is het verschil tussen een gebruikersnaam
   en een mens, dus krijgt hij ruimte. */
.iemand-over {
  margin: 8px 0 0;
  font-style: italic;
}

.iemand-sinds {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--inkt-zacht);
}

/* -------------------------------------------------- opgedragen aan iemand */
.opdracht {
  margin: 0 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--goud-diep);
  font-size: 15px;
}

/* --------------------------------------------------------------- inspreken */
.spreekknoppen {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.knop-opnemen-bezig {
  background: var(--rood);
  color: #fff;
}

.spreektijd {
  font-variant-numeric: tabular-nums;
  color: var(--rood);
  font-weight: 600;
}

.spreekspeler {
  width: 100%;
  margin-top: 12px;
}

.geluidkaart {
  background: color-mix(in srgb, var(--goud) 7%, var(--kaart));
  border: 1px solid color-mix(in srgb, var(--goud) 30%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}

.geluid-label {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--goud-diep);
}

.geluid-speler {
  width: 100%;
}

/* Een herdenkbericht is geen melding maar een blijk van aandacht. Daarom
   zachter, en zonder doorklik. */
.herdenkbericht {
  cursor: default;
  background: color-mix(in srgb, var(--groen) 8%, var(--kaart));
  border-color: color-mix(in srgb, var(--groen) 30%, transparent);
}

/* ------------------------------------------------------------- herdenkdata */
.herdenkrij {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
}

.herdenk-datum {
  font-size: 14px;
  color: var(--inkt-zacht);
}

.veld-rij {
  display: flex;
  gap: 12px;
}

.veld-rij > span {
  flex: 1;
  min-width: 0;
}

.veld-rij input {
  width: 100%;
}

/* De vraag van de week is aanklikbaar: daarachter staan de antwoorden. */
.vraagkaart-tekst {
  cursor: pointer;
}

.vraagkaart-groot .vraagkaart-tekst {
  cursor: default;
}

/* ------------------------------------------------------- inloggen met Google */
.googlerij {
  margin-bottom: 4px;
}

.knop-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--kaart);
  color: var(--inkt);
  border: 1px solid var(--lijn);
  font-weight: 600;
}

.knop-google:hover {
  background: var(--papier-diep);
}

.google-g {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: #4285f4;
}

/* Het streepje met "of" ertussen. */
.scheiding {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
  color: var(--inkt-zacht);
  font-size: 14px;
}

.scheiding::before,
.scheiding::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lijn);
}

/* Het regeltje onder de kringrij dat vertelt waar je nu kijkt. */
.kringuitleg {
  margin: -2px 0 14px;
  font-style: italic;
  color: var(--inkt-zacht);
  font-size: 15px;
}

/* DE VOORPAGINA voor wie nog geen account heeft
   ---------------------------------------------------------------------------
   Dit is het eerste wat iemand ziet die de link doorgestuurd krijgt. Het moet
   in drie tellen twee dingen doen: laten zien waar dit over gaat, en laten
   voelen dat hij hier thuishoort. Vandaar de vlinder, de groetenrij en de
   zachte gouden gloed -- warm, niet druk. */
.meelezerkaart {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, var(--goud) 16%, var(--kaart)) 0%,
      color-mix(in srgb, var(--goud) 6%, var(--kaart)) 55%,
      var(--kaart) 100%
    );
  border: 1px solid color-mix(in srgb, var(--goud) 35%, transparent);
  border-radius: 18px;
  padding: 26px 22px 24px;
  margin-bottom: 22px;
}

.meelezerkaart p {
  margin: 0 0 12px;
}

/* De vlinder staat in de zijbalk, maar die is er op een telefoon niet. Daar
   is dit het enige beeld op het scherm, en dus draagt het de hele sfeer. */
.welkom-vlinder {
  display: block;
  width: 116px;
  height: auto;
  margin: 0 auto 14px;
}

/* De groeten in de talen die hier aan tafel gesproken worden. Zacht en klein:
   je leest het niet woord voor woord, je ziet in één blik dat er ruimte is. */
.welkom-groet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin: 0 0 16px !important;
  font-size: 13px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--goud-diep) 85%, var(--inkt-zacht));
}

.welkom-groet span {
  padding: 0 10px;
}

/* Een streepje tussen de groeten, behalve voor de eerste van elke regel.
   Zo blijft het een doorlopende zin en geen opsomming. */
.welkom-groet span + span {
  border-left: 1px solid color-mix(in srgb, var(--goud) 30%, transparent);
}

.welkom-knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}

/* Het echte bestandsvak: uit beeld, maar wel te bereiken met de tabtoets en
   voorleessoftware. Niet display:none, want dan verdwijnt het ook voor hen. */
.bestandvak-verstopt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* De zichtbare knop ervoor in de plaats. Een label met for="..." opent
   hetzelfde vak, dus dit werkt zonder één regel javascript. */
/* De naam van het veld staat er ook als label, en die is blok-breed. Daarom
   hier de veldnaam erbij: anders wordt de knop net zo breed als het scherm. */
.veld label.bestandknop {
  display: inline-block;
  width: auto;
  margin-top: 4px;
  /* De veldnamen op dit formulier staan in kleine hoofdletters. Een knop niet:
     "FOTO OF VIDEO KIEZEN" leest als geschreeuw. */
  text-transform: none;
  letter-spacing: normal;
  font-size: 16px;
  font-weight: inherit;
  text-align: center;
}

/* Met de tabtoets erop: dan hoort de knop op te lichten, anders weet iemand
   die niet met de muis werkt niet waar hij is. */
.bestandvak-verstopt:focus-visible + .bestandknop {
  outline: 2px solid var(--goud);
  outline-offset: 2px;
}

/* De strook met foto's die leden zelf bij hun verhaal zetten. Schuift opzij
   op een telefoon, past in één rij op een laptop. */
.fotostrook {
  margin: 0 0 22px;
}

.fotostrook-kop {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

.fotostrook-rij {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* Netjes stoppen bij elke foto in plaats van halverwege blijven hangen. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.fotostrook-rij::-webkit-scrollbar {
  height: 0;
}

.fotostrook-vak {
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  overflow: hidden;
  background: var(--papier-diep);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.fotostrook-vak:hover {
  transform: translateY(-2px);
  border-color: var(--goud);
}

.fotostrook-vak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* De eerste zin die iemand leest. Groot genoeg om te landen, klein genoeg om
   op een telefoon niet het halve scherm te vullen. */
.welkom-kop {
  font-size: 23px;
  line-height: 1.3;
  margin: 0 0 10px;
}

.welkom-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--inkt-zacht);
  margin: 0 0 18px;
}

.welkom-klein {
  font-size: 13px;
  color: var(--inkt-zacht);
  margin: 12px 0 0;
}

@media (min-width: 640px) {
  .welkom-kop {
    font-size: 27px;
  }
}

/* De knop rechtsboven in de kopbalk, voor wie nog geen account heeft. */
.knop-kop {
  padding: 8px 16px;
  font-size: 15px;
  white-space: nowrap;
}

/* De leus op het aanmeldscherm. */
.leus {
  margin: 2px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--goud-diep);
  text-align: center;
}

/* De noodmelding op de hulppagina. Moet opvallen zonder te schreeuwen: wie
   hier komt heeft het al zwaar genoeg. */
.noodkaart {
  background: color-mix(in srgb, var(--rood) 8%, var(--kaart));
  border: 1px solid color-mix(in srgb, var(--rood) 45%, transparent);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.noodkaart p {
  margin: 0 0 8px;
}

.noodkaart p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- profiel */
.profielkaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 10px;
}

.profiel-naam {
  font-size: 22px;
  margin: 0;
}

.profiel-sinds {
  font-size: 14px;
  color: var(--inkt-zacht);
  margin: 2px 0 0;
}

/* Moderator zijn is geen versiering maar een taak. Daarom rustig goud en
   niet groot: het staat er om je eraan te herinneren, niet om te pronken. */
.profiel-rol {
  font-size: 14px;
  color: var(--goud-diep);
  margin: 8px 0 0;
}

/* ----------------------------------------------------------------- families */
.familiekaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.familie-naam {
  font-size: 18px;
  margin: 0;
}

.familie-bij {
  font-size: 14px;
  color: var(--inkt-zacht);
  margin: 2px 0 0;
}

.familie-wie {
  font-size: 14px;
  color: var(--inkt-zacht);
  margin: 8px 0 0;
}

.familiekaart .knop-klein {
  margin-top: 10px;
}

/* --------------------------------------------------------------------- menu */
.menu {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0;
}

.menu-rij {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font: inherit;
  font-size: 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  padding: 15px 18px;
  cursor: pointer;
  color: var(--inkt);
  text-align: left;
}

.menu-rij:last-child {
  border-bottom: 0;
}

.menu-rij:hover {
  background: var(--papier-diep);
}

.menu-rij.gevaar {
  color: var(--rood);
}

/* --------------------------------------------------------------- tekstblok */
.tekstblok h3 {
  font-size: 18px;
  font-weight: normal;
  color: var(--goud-diep);
  margin: 26px 0 6px;
}

.tekstblok p,
.tekstblok li {
  color: var(--inkt-zacht);
}

.tekstblok ul {
  padding-left: 20px;
}

/* ---------------------------------------------------------------- onderbalk */
.onderbalk {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  background: var(--papier);
  border-top: 1px solid var(--lijn);
  padding-bottom: env(safe-area-inset-bottom);
}

.onder-knop {
  flex: 1;
  background: none;
  border: 0;
  padding: 8px 2px 6px;
  cursor: pointer;
  color: var(--inkt-zacht);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.onder-knop[aria-current="true"] {
  color: var(--goud-diep);
}

.onder-teken {
  font-size: 20px;
  line-height: 1;
}

.onder-tekst {
  font-size: 11px;
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
}

.onder-plus .onder-teken {
  background: var(--goud);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

/* -------------------------------------------------------------------- tegel */
/* Het kleine zwarte balkje dat even verschijnt na een handeling. */
.tegel {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  background: var(--inkt);
  color: var(--papier);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 4px 16px var(--schaduw);
  max-width: 90vw;
  text-align: center;
}

/* ------------------------------------------------------------------- venster */
.venster {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.venster[hidden] {
  display: none;
}

.venster-binnen {
  background: var(--papier);
  border-radius: 20px;
  padding: 24px;
  max-width: 460px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.venster-binnen .knop {
  width: 100%;
  margin-top: 12px;
}

.venster-binnen .tekstlink {
  display: block;
  margin: 14px auto 0;
}

/* -------------------------------------------------------------------- breed */
/* Zodra de zijbalk verschijnt doet die het werk van de knoppenbalk onderin.
   Twee menu's naast elkaar is verwarrend, dus die balk gaat dan weg. */
@media (min-width: 1040px) {
  body {
    padding-bottom: 0;
  }

  .onderbalk {
    display: none !important;
  }
}

/* --------------------------------------------------------------- storing */
.storingbalk {
  background: var(--rood);
  color: #fff;
  padding: 12px 16px;
  font-size: 15px;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.4;
}

/* ------------------------------------------------------ belletje & berichten */
.kop-bel {
  position: relative;
}

.belteller {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rood);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
}

.berichtkaart {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  color: inherit;
}

.berichtkaart:hover {
  border-color: var(--goud);
}

/* Nog niet gelezen: een gouden randje aan de zijkant. */
.berichtkaart.nieuw {
  border-left: 4px solid var(--goud);
}

.bericht-teken {
  font-size: 20px;
  flex: none;
}

.bericht-tekst {
  display: block;
  line-height: 1.45;
}

.bericht-tijd {
  display: block;
  font-size: 13px;
  color: var(--inkt-zacht);
  margin-top: 3px;
}

/* --------------------------------------------------------- kring volgen */
.kringkaart {
  padding: 0;
  overflow: hidden;
}

.kringkaart-open {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  padding: 16px 18px 12px;
  cursor: pointer;
  color: inherit;
}

.volgknop {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15px;
  background: none;
  border: 0;
  border-top: 1px solid var(--lijn);
  padding: 12px 18px;
  cursor: pointer;
  color: var(--goud-diep);
  text-align: left;
}

.volgknop:hover {
  background: var(--papier-diep);
}

.volgknop[aria-pressed="true"] {
  color: var(--inkt-zacht);
}

/* ===========================================================================
   HET LEVENSBOEK
   ---------------------------------------------------------------------------
   Staat normaal nergens. Druk je af of sla je op als PDF, dan verdwijnt de
   hele app en blijft alleen dit staan: je verhalen op volgorde, met een
   titelblad ervoor. Geen extra programma nodig; elke browser kan dit.
   ======================================================================== */
.levensboek {
  display: none;
}

@media print {
  body.drukstand > *:not(.levensboek) {
    display: none !important;
  }

  body.drukstand {
    padding: 0;
    background: #fff;
  }

  body.drukstand .levensboek {
    display: block;
    color: #000;
  }

  .boek-titelblad {
    text-align: center;
    padding: 28% 0 0;
    page-break-after: always;
  }

  .boek-titelblad h1 {
    font-size: 34pt;
    margin: 24pt 0 8pt;
    font-weight: normal;
  }

  .boek-onder {
    font-style: italic;
    font-size: 13pt;
  }

  .boek-datum {
    margin-top: 40pt;
    font-size: 10pt;
    color: #555;
  }

  .boek-verhaal {
    page-break-inside: avoid;
    margin-bottom: 26pt;
  }

  .boek-verhaal h2 {
    font-size: 17pt;
    margin: 4pt 0 8pt;
    font-weight: normal;
  }

  .boek-verhaal p {
    font-size: 11.5pt;
    line-height: 1.65;
    white-space: pre-wrap;
  }

  .boek-kring {
    font-size: 9pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
    margin: 0;
  }

  .boek-opdracht {
    font-style: italic;
    font-size: 11pt;
    margin: 6pt 0 0;
  }

  .boek-voet {
    margin-top: 40pt;
    font-size: 9pt;
    color: #666;
    border-top: 1px solid #ccc;
    padding-top: 10pt;
  }

  @page {
    margin: 22mm 20mm;
  }
}

/* ------------------------------------------------------------- gesprekken */
/* Privéberichten. Bewust anders vormgegeven dan de openbare reacties, zodat
   je aan het scherm ziet dat dit tussen twee mensen blijft. */
.gespreksbericht {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 15px;
  margin-bottom: 10px;
  max-width: 80%;
}

.gespreksbericht.van-mij {
  background: color-mix(in srgb, var(--goud) 12%, var(--kaart));
  border-color: color-mix(in srgb, var(--goud) 35%, transparent);
  border-radius: 14px 14px 4px 14px;
  margin-left: auto;
}

.gespreksbericht p {
  margin: 0 0 4px;
  white-space: pre-wrap;
}

.knop-zacht {
  background: none;
  border: 1px solid var(--lijn);
  color: var(--goud-diep);
}

.knop-zacht:hover {
  background: var(--papier-diep);
}

/* ===========================================================================
   EEN FOTO UITGELICHT
   ---------------------------------------------------------------------------
   Klikken op een foto zet hem groot op een donkere achtergrond. Donker en niet
   licht, want dan verdwijnt de rest van het scherm en blijft alleen de foto
   over. Bij een oude familiefoto is dat precies wat je wilt.
   ======================================================================== */
.media-item {
  cursor: zoom-in;
}

.uitgelicht {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 16, 14, 0.94);
}

/* Zonder deze regel blijft het scherm staan als de code het verbergt: de
   display hierboven wint anders van het verbergen door de browser. Zelfde
   valkuil als bij de fotostrook. */
.uitgelicht[hidden] {
  display: none;
}

.uitgelicht-beeld {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.uitgelicht-sluit {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.uitgelicht-sluit:hover {
  background: rgba(255, 255, 255, 0.26);
}