/* Mijn Nalatenschap - vormgeving
   Warme, rustige kleuren. Werkt op telefoon en laptop, in licht en donker. */

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

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

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

:root[data-theme="light"] {
  --rood: #b4432c;
  --attentie: #8a5a12;
  --attentie-vlak: #fbf1de;
  --papier: #faf6f0;
  --papier-diep: #f2ebe1;
  --inkt: #2a2320;
  --inkt-zacht: #6b5f56;
  --goud: #a6763f;
  --goud-diep: #8a5f30;
  --lijn: #e0d5c6;
  --groen: #4f6b52;
  --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;
}

.binnen {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

.scherm {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}

/* Zonder deze regel wint "display: flex" van het verbergen, en zie je de
   knoppenbalk van de quiz ook op het welkomstscherm staan. */
.scherm[hidden] {
  display: none;
}

#quiz {
  justify-content: flex-start;
  padding: 0 0 140px;
}

/* --------------------------------------------------------- de voordeur */
/* Het logo draagt zelf de naam. Er stond eerst een merkteken met daarnaast
   nog eens "Erfgoedkluis" in letters; dat was de naam twee keer, en het gaf
   het beeldmerk een verhouding die niet klopte.

   Nu staat de kop gecentreerd: logo, dan de zin die raakt, dan de zin die
   uitlegt. Alles daaronder blijft links uitgelijnd, want gecentreerde
   invulvelden en opsommingen lezen slecht. */
.voordeur-kop {
  text-align: center;
  margin: 0 0 30px;
}

.merk-kop {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.merk-logo {
  display: block;
  width: min(300px, 72vw);
  height: auto;
  margin: 0 auto 18px;
}

/* De zinnen onder het logo staan gecentreerd en houden hun leeslengte,
   anders lopen ze over de volle breedte uit elkaar. */
.voordeur-kop .slogan,
.voordeur-kop .omschrijving,
.voordeur-kop .omschrijving-fijn {
  margin-left: auto;
  margin-right: auto;
}

/* De derde regel legt uit wat persoonlijk erfgoed is. Die hoort er wel te
   staan, maar mag de eerste twee niet overstemmen: dus kleiner en rustiger. */
.voordeur-kop .omschrijving-fijn {
  /* Iets smaller dan de regel erboven, zodat de kop naar beneden toe
     rustig versmalt in plaats van uit te lopen. */
  max-width: 26rem;
  margin-top: 10px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--inkt-zacht);
  text-align: center;
  text-wrap: balance;
}

.logo {
  display: block;
  width: 128px;
  height: auto;
  margin: 0 0 20px -6px;
}

.logo-klein {
  width: 34px;
  height: auto;
  opacity: 0.85;
}

/* Op donkere achtergrond mag het goud iets warmer oplichten. */
@media (prefers-color-scheme: dark) {
  .logo,
  .logo-klein,
  .merk-logo {
    filter: brightness(1.12);
  }
}

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

:root[data-theme="light"] .logo,
:root[data-theme="light"] .logo-klein,
:root[data-theme="light"] .merk-logo {
  filter: none;
}

/* ----------------------------------------------------------- typografie */
.titel {
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  line-height: 1.1;
  margin: 8px 0 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ondertitel {
  color: var(--inkt-zacht);
  font-size: 1.05rem;
  margin: 0 0 32px;
}

.uitgever {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.7rem;
  color: var(--goud);
  margin: 0;
}

.kop {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 4px 0 12px;
}

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

.opening {
  border-left: 2px solid var(--goud);
  margin: 0 0 36px;
  padding: 4px 0 4px 20px;
  color: var(--inkt-zacht);
  font-style: italic;
}

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

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

.disclaimer {
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--lijn);
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  font-family: system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------- het aanbod */
/* De proefbalk is het enige echt gekleurde vlak op de voordeur. Daarom mag
   hij opvallen: hier staat wat iemand krijgt voordat hij iets hoeft te geven. */
.proefbalk {
  position: relative;
  background: color-mix(in srgb, var(--goud) 10%, var(--papier));
  border: 1px solid color-mix(in srgb, var(--goud) 30%, transparent);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 22px;
}

.proefbalk-kop {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--goud-diep);
  margin: 0 0 4px;
}

.proefbalk-tekst {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--inkt-zacht);
  margin: 0;
}

.proefbalk-tekst strong {
  color: var(--inkt);
  font-weight: 600;
}

/* Drie korte beloftes. Het vinkje is met opmaak getekend en niet met een
   teken uit het toetsenbord: zo ziet het er op elk apparaat hetzelfde uit. */
.beloftes {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

/* Zelfde valkuil als eerder: zonder deze twee regels blijft het staan als de
   code het verbergt bij het inloggen. */
.proefbalk[hidden],
.beloftes[hidden] {
  display: none;
}

.beloftes li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  line-height: 1.5;
}

.beloftes li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--goud);
  border-bottom: 2px solid var(--goud);
  transform: rotate(-45deg);
}

.opslag-melding {
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  font-family: system-ui, -apple-system, sans-serif;
  margin: 12px 0 0;
}

.notitie {
  margin: 32px 0 0;
  padding: 16px 20px;
  background: var(--papier-diep);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--inkt-zacht);
  font-family: system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------- knoppen */
.knop {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 12px 24px;
  border: 1px solid var(--goud);
  border-radius: 999px;
  background: var(--goud);
  color: var(--papier);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.knop:hover:not(:disabled) {
  background: var(--goud-diep);
  border-color: var(--goud-diep);
}

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

.knop-stil {
  background: transparent;
  color: var(--inkt-zacht);
  border-color: var(--lijn);
}

.knop-stil:hover:not(:disabled) {
  background: var(--papier-diep);
  color: var(--inkt);
  border-color: var(--lijn);
}

.knop-groot {
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-size: 1.05rem;
  margin-bottom: 12px;
}

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

.knop-terug {
  background: transparent;
  border: none;
  color: var(--inkt-zacht);
  padding: 0 0 24px;
  font-size: 0.9rem;
}

.knop-terug:hover {
  background: transparent;
  color: var(--goud);
}

/* -------------------------------------------------------------- overzicht */
.hoofdstuk-kaart {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--lijn);
  padding: 18px 0;
  cursor: pointer;
  color: inherit;
}

.hoofdstuk-kaart:hover .hoofdstuk-titel {
  color: var(--goud);
}

.hoofdstuk-nummer {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--goud);
}

.hoofdstuk-titel {
  font-size: 1.25rem;
  margin: 2px 0 6px;
  transition: color 0.15s ease;
}

.hoofdstuk-meta {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  color: var(--inkt-zacht);
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-balk {
  flex: 1;
  height: 4px;
  max-width: 140px;
  background: var(--lijn);
  border-radius: 99px;
  overflow: hidden;
}

.mini-balk span {
  display: block;
  height: 100%;
  background: var(--groen);
  border-radius: 99px;
}

.odo {
  font-style: italic;
  color: var(--inkt-zacht);
  font-size: 0.9rem;
  margin: 8px 0 0;
}

/* ------------------------------------------------------------------ quiz */
/* Twee kolommen: links altijd het overzicht, rechts waar je aan werkt.
   Op een telefoon schuift de linkerkolom in en uit. */

#quiz {
  padding: 0;
  min-height: 100vh;
}

.werkblad {
  display: flex;
  min-height: 100vh;
}

/* --------------------------------------------------------------- zijbalk */
.zijbalk {
  width: 290px;
  flex-shrink: 0;
  background: var(--papier-diep);
  border-right: 1px solid var(--lijn);
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

.zijbalk-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.zijbalk-sluiten {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--inkt-zacht);
  cursor: pointer;
  padding: 0 6px;
}

.voortgang-blok {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: 11px;
  padding: 13px 15px;
  margin-bottom: 20px;
}

.voortgang-cijfer {
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.voortgang-label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  color: var(--inkt-zacht);
  margin-top: 2px;
}

.voortgang-balk {
  height: 5px;
  background: var(--lijn);
  border-radius: 99px;
  margin-top: 10px;
  overflow: hidden;
}

.voortgang-balk span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--goud);
  border-radius: 99px;
  transition: width 0.3s ease;
}

.zijbalk-nav {
  flex: 1;
  margin-bottom: 16px;
}

.nav-groep {
  margin-bottom: 14px;
}

.nav-kop {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud);
  font-weight: 600;
  padding: 0 8px;
  margin: 0 0 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--inkt);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.86rem;
  text-align: left;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-item:hover {
  background: var(--lijn);
}

.nav-item.actief {
  background: color-mix(in srgb, var(--goud) 16%, var(--papier));
  color: var(--goud-diep);
  font-weight: 600;
}

.nav-naam {
  flex: 1;
  min-width: 0;
}

.stip {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--lijn);
  flex-shrink: 0;
  border: 1px solid var(--inkt-zacht);
}

.stip.half {
  background: var(--goud);
  border-color: var(--goud);
  opacity: 0.5;
}

.stip.vol {
  background: var(--groen);
  border-color: var(--groen);
}

.nav-tel {
  font-size: 0.73rem;
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.zijbalk-terug {
  width: 100%;
}

.zijbalk-waas {
  display: none;
}

/* ------------------------------------------------------------ werkgebied */
.werkgebied {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.werk-kop {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  padding: 13px 32px calc(13px);
  padding-top: calc(13px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.menuknop {
  display: none;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  padding: 8px 14px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: transparent;
  color: var(--inkt-zacht);
  cursor: pointer;
}

.stap-teller {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  margin-left: auto;
}

.werk-inhoud {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 32px 120px;
}

.hoofdstuk-label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--goud);
  margin: 0;
}

/* ------------------------------------------------------------ formulier */
.veld {
  margin-bottom: 28px;
}

.veld label,
.veld legend {
  display: block;
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--inkt);
}

input[type="text"],
input[type="date"],
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--inkt);
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease;
}

input[type="text"]:focus,
input[type="date"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--goud);
}

textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
}

textarea.groot {
  min-height: 240px;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.optie {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  cursor: pointer;
  font-size: 0.97rem;
}

.optie input {
  margin: 4px 0 0;
  width: 17px;
  height: 17px;
  accent-color: var(--goud);
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ voet */
.quiz-voet {
  position: sticky;
  bottom: 0;
  background: var(--papier);
  border-top: 1px solid var(--lijn);
  box-shadow: 0 -4px 20px var(--schaduw);
}

.quiz-voet-binnen {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 32px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quiz-voet-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.bewaard {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  color: var(--groen);
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
}

.bewaard.zichtbaar {
  opacity: 1;
}

/* -------------------------------------------------------------- toegang */
.toegang-formulier {
  margin-bottom: 8px;
}

.toegang-formulier .veld {
  margin-bottom: 20px;
}

input[type="email"],
input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--inkt);
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease;
}

input[type="email"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--goud);
}

.veld-hulp {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  margin: 7px 0 0;
}

.toestemming {
  align-items: flex-start;
  margin: 4px 0 20px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
}

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

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

.wissel {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
  text-align: center;
  margin: 4px 0 0;
}

.foutmelding,
.goedmelding {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  border-radius: 10px;
  padding: 12px 15px;
  margin: 0 0 18px;
}

.foutmelding {
  background: color-mix(in srgb, #b4432c 12%, var(--papier));
  color: color-mix(in srgb, #b4432c 75%, var(--inkt));
  border: 1px solid color-mix(in srgb, #b4432c 28%, transparent);
}

.goedmelding {
  background: color-mix(in srgb, var(--groen) 14%, var(--papier));
  color: color-mix(in srgb, var(--groen) 80%, var(--inkt));
  border: 1px solid color-mix(in srgb, var(--groen) 30%, transparent);
}

/* De drie stukjes stonden eerst gescheiden door een punt. Die is eruit, dus
   de ruimte komt nu uit de opmaak - anders plakken ze aan elkaar. */
.accountregel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  color: var(--inkt-zacht);
  margin: 10px 0 0;
}

/* Zonder deze regel wint "display: flex" van het verbergen, en zie je
   "Ingelogd als" ook als je niet bent ingelogd. Dezelfde valkuil als bij
   .scherm hierboven. */
.accountregel[hidden] {
  display: none;
}

.accountregel strong {
  color: var(--inkt);
  font-weight: 600;
}

/* -------------------------------------------------------- privacytekst */
.tekstblok h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 28px 0 6px;
}

.tekstblok p {
  color: var(--inkt-zacht);
  margin: 0 0 12px;
}

.tekstblok a {
  color: var(--goud);
}

.tekstblok ul,
.tekstblok ol {
  color: var(--inkt-zacht);
  margin: 0 0 14px;
  padding-left: 22px;
}

.tekstblok li {
  margin-bottom: 7px;
}

.tekstblok strong,
.tekstblok em {
  color: var(--inkt);
}

.tekstblok .tekstlink {
  font-size: inherit;
}

/* Een zin die je echt gelezen moet hebben. Geen uitroepteken, geen rood -
   alleen een gouden streep en wat meer contrast. */
.nadruk {
  border-left: 2px solid var(--goud);
  padding: 2px 0 2px 16px;
  color: var(--inkt) !important;
  margin: 0 0 16px;
}

.versieregel {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--inkt-zacht);
  margin: -18px 0 4px;
}

/* ------------------------------------------------- bedrijfsgegevens-lijst */
.gegevenslijst {
  margin: 0 0 12px;
  border-top: 1px solid var(--lijn);
}

.gegevenslijst > div {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
}

.gegevenslijst dt {
  flex: 0 0 34%;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--inkt-zacht);
  padding-top: 2px;
}

.gegevenslijst dd {
  flex: 1;
  margin: 0;
}

/* Zolang een bedrijfsgegeven nog niet is ingevuld in bedrijf.js, staat er
   geen verzonnen waarde maar dit. Zichtbaar genoeg om op te vallen, rustig
   genoeg om de pagina niet te verpesten. */
.ontbreekt {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85em;
  color: var(--attentie);
  background: var(--attentie-vlak);
  border: 1px dashed var(--attentie);
  border-radius: 6px;
  padding: 1px 8px;
}

/* -------------------------------------------- juridische waarschuwingen */
/* Boven de hoofdstukken over erfenis en gezag. Dit moet opvallen zonder te
   schreeuwen: iemand zit hier met een onderwerp dat al zwaar genoeg is. */
.juridisch-vak {
  background: var(--attentie-vlak);
  border-left: 3px solid var(--attentie);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 0 0 28px;
}

/* Iemand wilde verder zonder te bevestigen. Het vak laat even van zich horen
   in plaats van dat er ergens onderaan een rode regel verschijnt die niemand
   ziet. */
.juridisch-vak.dringt {
  animation: juridisch-tik 0.5s ease;
}

@keyframes juridisch-tik {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .juridisch-vak.dringt {
    animation: none;
    outline: 2px solid var(--attentie);
    outline-offset: 3px;
  }
}

.juridisch-melding {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--attentie);
  margin: 10px 0 0;
}

.juridisch-kop {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--attentie);
  margin: 0 0 6px;
}

.juridisch-tekst {
  font-size: 0.93rem;
  color: var(--inkt);
  margin: 0;
}

.juridisch-optie {
  margin-top: 14px;
  font-size: 0.9rem;
}

.juridisch-bevestigd {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  color: var(--groen);
  margin: 12px 0 0;
}

/* ---------------------------------------------------- mijn gegevens-pagina */
#gegevens .tekstblok {
  border-top: 1px solid var(--lijn);
  padding-top: 20px;
  margin-bottom: 8px;
}

#gegevens .tekstblok:first-of-type {
  border-top: none;
  padding-top: 0;
}

.knop-gevaar {
  background: transparent;
  color: var(--rood);
  border-color: var(--rood);
}

.knop-gevaar:hover:not(:disabled) {
  background: var(--rood);
  border-color: var(--rood);
  color: var(--papier);
}

.bevestigvak {
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--papier-diep);
  border-radius: 12px;
}

.bevestigvak p {
  margin-top: 0;
}

.bevestigvak .knop {
  margin-right: 8px;
}

/* --------------------------------------------- vaste balk onderaan alles */
.vaste-voet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--papier);
  border-top: 1px solid var(--lijn);
  padding: 9px 0;
  z-index: 5;
}

.vaste-voet-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.76rem;
  color: var(--inkt-zacht);
}

.vaste-disclaimer {
  margin: 0;
}

/* Vier links passen op een laptop naast elkaar; op een telefoon mogen ze
   afbreken naar een tweede regel in plaats van eraf te lopen. */
.vaste-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  flex-shrink: 0;
}

.vaste-links .tekstlink {
  font-size: 0.76rem;
}

/* Ruimte houden zodat de balk niets afdekt. */
.scherm {
  padding-bottom: 92px;
}

/* ------------------------------------------------------- proefperiode */
.proefmelding {
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 24px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
}

.proefmelding-proef {
  background: var(--papier-diep);
  color: var(--inkt-zacht);
  border: 1px solid var(--lijn);
}

.proefmelding-verlopen {
  background: color-mix(in srgb, var(--goud) 14%, var(--papier));
  color: color-mix(in srgb, var(--goud-diep) 85%, var(--inkt));
  border: 1px solid color-mix(in srgb, var(--goud) 35%, transparent);
}

.proefmelding strong {
  color: var(--inkt);
}

.proefmelding-tekst {
  margin: 0 0 12px;
}

.proefmelding .knop-klein {
  margin: 0;
}

/* De twee keuzes: per jaar en per maand. Even groot en even opvallend - wie
   zijn nalatenschap vastlegt hoort niet in een keuze geduwd te worden. Op een
   smal scherm gaan ze onder elkaar staan. */
.proefmelding-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.proefmelding-knoppen .knop {
  flex: 1 1 auto;
  min-width: 150px;
}

/* De maandknop is de rustige van de twee: even goed, maar niet de eerste
   waar je oog op valt. */
.proefmelding-knoppen .knop:last-child {
  background: transparent;
  color: var(--goud-diep);
}

.proefmelding-knoppen .knop:last-child:hover:not(:disabled) {
  background: color-mix(in srgb, var(--goud) 14%, transparent);
  color: var(--goud-diep);
}

.proefmelding-bijschrift {
  margin: 10px 0 0;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Velden die niet meer bewerkt mogen worden. */
input[readonly],
textarea[readonly] {
  opacity: 0.72;
  cursor: default;
}

.optie input:disabled + span {
  opacity: 0.5;
}

/* --------------------------------------------------------------- FAQ */
.tekstblok details {
  border-bottom: 1px solid var(--lijn);
  padding: 4px 0;
}

.tekstblok summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tekstblok summary::-webkit-details-marker {
  display: none;
}

.tekstblok summary::before {
  content: "+";
  color: var(--goud);
  font-size: 1.2rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.tekstblok details[open] summary::before {
  content: "−";
}

.tekstblok details[open] summary {
  color: var(--goud);
}

.tekstblok details p {
  padding-left: 24px;
  margin: 0 0 14px;
}

/* ------------------------------------------------------------ voortgang */
.voortgang-samenvatting {
  background: var(--papier-diep);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

.voortgang-samenvatting strong {
  color: var(--inkt);
  font-weight: 600;
}

/* ====================================================== op de telefoon */

/* Ruimte vrijhouden voor de inkeping bovenaan en de streep onderaan bij
   moderne telefoons, zodat er niets onder wegvalt. */
.quiz-kop {
  padding-top: env(safe-area-inset-top);
}

.quiz-voet,
.vaste-voet {
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

.binnen {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* Voorkomt dat de telefoon inzoomt zodra je in een veld tikt. Dat gebeurt
   bij lettergroottes onder de 16 pixels. */
input,
textarea,
select {
  font-size: max(16px, 1rem);
}

/* Als de app vanaf het beginscherm wordt geopend, is er geen adresbalk die
   je per ongeluk kunt aantikken - dan mag alles iets ruimer. */
@media (display-mode: standalone) {
  .quiz-binnen {
    padding-top: 28px;
  }
}

.knop-installeren {
  display: block;
  width: 100%;
  margin-top: 4px;
}

/* Dezelfde valkuil als bij .scherm: "display: block" wint van het verbergen.
   Zonder deze regel stond de knop "Zet Erfgoedkluis op je beginscherm" er
   altijd, ook op een iPhone waar hij niets doet, en ook als de app al
   geinstalleerd is. */
.knop-installeren[hidden] {
  display: none;
}

@media (max-width: 520px) {
  .binnen {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  body {
    font-size: 16px;
  }
  /* Vingers zijn geen muizen: knoppen en aanvinkhokjes ruimer maken. */
  .knop {
    padding: 14px 22px;
  }
  .optie {
    padding: 12px 0;
  }
  .optie input {
    width: 21px;
    height: 21px;
  }
  .tekstblok summary {
    padding: 17px 0;
  }
  .titel {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
  .quiz-voet-binnen .bewaard {
    display: none;
  }
  /* Op een smal scherm past de disclaimer niet naast de links. */
  .vaste-voet-binnen {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .scherm {
    padding-bottom: 112px;
  }
  .logo {
    width: 96px;
    margin-bottom: 16px;
  }
  /* Op een smal scherm is er geen ruimte voor knop + logo + teller. */
  .logo-klein {
    display: none;
  }
}

/* ------------------------------------------------------------- vlinder */
/* De vlinder hoort bij het boek: transformatie, voortleven. Hij staat op de
   plekken waar het gevoel telt (net binnen, en bij de terugblik). Op de
   voordeur staat het kluis-logo, want daar telt vertrouwen. */
.vlinder {
  display: block;
  width: 170px;
  height: auto;
  margin: 0 auto 24px;
  opacity: 0.95;
}

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

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

:root[data-theme="light"] .vlinder {
  filter: none;
}

@media (max-width: 520px) {
  .vlinder {
    width: 130px;
  }
}

/* ------------------------------------------------------ verwijzing quiz */
/* Voor bezoekers die nog twijfelen: eerst zeven vragen, dan pas een account. */
.quizverwijzing {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--papier-diep);
  border-radius: 12px;
}

.quizverwijzing p {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
  color: var(--inkt-zacht);
  line-height: 1.5;
  margin: 0 0 14px;
}

.quizverwijzing strong {
  color: var(--inkt);
}

.quizverwijzing .knop {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* ---------------------------------------------------- documenten uploaden */
.veld-bestanden .veld-hulp {
  margin: 0 0 12px;
}

.bestandenlijst {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.bestand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  margin-bottom: 8px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.88rem;
}

.bestand-naam {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--goud);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

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

.bestand-grootte {
  color: var(--inkt-zacht);
  font-size: 0.8rem;
  white-space: nowrap;
}

.bestand-weg {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.bestand-weg:hover:not(:disabled) {
  color: #b4432c;
}

.bestand-weg:disabled {
  opacity: 0.4;
  cursor: default;
}

.bestand-leeg {
  color: var(--inkt-zacht);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  padding: 4px 0 8px;
}

.bestand-kies {
  display: inline-block;
  cursor: pointer;
}

.bestandmelding {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.84rem;
  margin: 0 0 12px;
}

.bestandmelding.goed {
  color: var(--groen);
}

.bestandmelding.fout {
  color: #b4432c;
}

.bestandmelding.info {
  color: var(--inkt-zacht);
}

/* ------------------------------------- invulscherm op tablet en telefoon */
@media (max-width: 900px) {
  /* De zijbalk schuift over de inhoud heen in plaats van ernaast te staan. */
  .zijbalk {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    width: min(300px, 85vw);
    max-height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px var(--schaduw);
    padding-top: calc(20px + env(safe-area-inset-top));
  }

  .zijbalk.open {
    transform: none;
  }

  .zijbalk-sluiten {
    display: block;
  }

  .zijbalk-waas {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.4);
  }

  .zijbalk-waas[hidden] {
    display: none;
  }

  .menuknop {
    display: inline-block;
  }

  .werk-kop {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  .werk-inhoud {
    padding: 28px max(20px, env(safe-area-inset-left)) 110px;
  }

  .quiz-voet-binnen {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* ---------------------------------------------------------------- slogan */
/* Direct onder de naam: wat dit portaal is, in één zin. */
/* Twee regels: de eerste raakt, de tweede legt uit. Eén zin kan niet
   allebei tegelijk. */
.slogan {
  font-size: 1.22rem;
  line-height: 1.4;
  color: var(--inkt);
  font-style: italic;
  margin: 0 0 12px;
  max-width: 28ch;
}

.omschrijving {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--inkt-zacht);
  margin: 0 0 20px;
  max-width: 42ch;
}

.slogan + .ondertitel {
  font-size: 0.95rem;
  margin-bottom: 28px;
}

@media (max-width: 520px) {
  .slogan {
    font-size: 1.05rem;
  }
}

/* =====================================================================
   LOSSE PAGINA'S: privacy, voorwaarden, contact
   ---------------------------------------------------------------------
   Deze drie bestaan twee keer: als scherm in de app, en als eigen pagina
   met een eigen adres (erfgoedkluis.nl/privacy). Dat laatste is nodig
   omdat Stripe, Google en iedereen die je controleert om een echte link
   vraagt. Ze worden gemaakt door tools/maak_juridische_paginas.py uit
   dezelfde tekst, dus er kunnen nooit twee versies ontstaan.

   Zo'n losse pagina heeft geen .scherm eromheen, dus de ruimte en de
   uitlijning moeten hier vandaan komen.
   ================================================================== */
.losse-pagina {
  padding: 40px 0 0;
}

.losse-pagina .binnen {
  padding-bottom: 40px;
}

.losse-pagina .knop-terug {
  display: inline-block;
  text-decoration: none;
  padding: 0 0 20px;
}

.logo-los {
  display: block;
  width: 56px;
  height: auto;
  margin: 0 0 18px -2px;
}

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

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

:root[data-theme="light"] .logo-los {
  filter: none;
}

.losse-voet {
  border-top: 1px solid var(--lijn);
  padding: 20px 0 40px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  color: var(--inkt-zacht);
}

.losse-voet .binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding-bottom: 0;
}

.losse-voet .vaste-disclaimer {
  margin: 0;
}

.losse-voet .vaste-links a {
  color: var(--goud);
  text-decoration: none;
  margin-right: 16px;
}

.losse-voet .vaste-links a:hover {
  text-decoration: underline;
}

/* ===================================================== het boek van jou

   Het blok bovenaan "Mijn gegevens" waar iemand zijn naam, de titel van zijn
   boek en zijn hoofdstukken kiest. */

.welkom-groet {
  color: var(--goud-diep);
  font-size: 1.05rem;
  margin: 0 0 18px;
}

.welkom-groet[hidden] {
  display: none;
}

.hoofdstukkeuze {
  border: none;
  margin: 26px 0 0;
  padding: 0;
}

.hoofdstukkeuze legend {
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--inkt);
}

#hoofdstuk-keuzes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

#hoofdstuk-keuzes .optie {
  padding: 7px 0;
}

.keuze-bij {
  color: var(--inkt-zacht);
  font-size: 0.88rem;
}

.melding {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  margin: 14px 0 0;
}

.melding[hidden] {
  display: none;
}

.melding.goed {
  color: var(--groen);
}

.melding.fout {
  color: var(--rood);
}

/* ------------------------------------------------ wat dit niet is
   Eén regel op de voordeur, in dezelfde stille stijl als de beloftes erboven.
   Iemand hoort te weten wat dit niet is voordat hij tekent, maar het hoeft
   niet groot in beeld; de volledige tekst staat onderaan de pagina. */
.voordeur-let-op {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
  margin: -18px 0 28px;
  padding-left: 26px;
  opacity: 0.9;
}

/* ================================================================ stamboom

   Geen strak schema met vaste hokjes: de rijen staan onder elkaar met een
   verbindingslijn ertussen, en binnen een rij staan de groepen naast elkaar.
   Zo past een familie met drie ouders of zonder vader er net zo goed in als
   een familie die precies in het plaatje valt. */

.boom-doek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 28px;
}

.boom-doek[hidden] {
  display: none;
}

.boom-rij {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px 28px;
  position: relative;
  padding: 22px 0;
  width: 100%;
}

/* De verbindingslijn naar de rij erboven. De eerste rij krijgt er geen. */
.boom-rij + .boom-rij::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 22px;
  background: var(--lijn);
}

.boom-groep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 15rem;
}

.boom-label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud);
  margin: 0 0 2px;
  text-align: center;
}

.boom-naam {
  font-family: inherit;
  font-size: 0.97rem;
  line-height: 1.35;
  color: var(--inkt);
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

button.boom-naam:hover {
  border-color: var(--goud);
}

/* Jijzelf staat in het midden en mag opvallen: dit is jouw boek. */
.boom-ik {
  background: color-mix(in srgb, var(--goud) 14%, var(--papier));
  border-color: color-mix(in srgb, var(--goud) 40%, transparent);
  font-size: 1.08rem;
  padding: 10px 20px;
  cursor: default;
}

/* Een lege plek nodigt uit in plaats van te schreeuwen dat er iets ontbreekt.
   Geen rood kruis bij een vader die niemand kent. */
.boom-leeg .knop {
  margin-top: 12px;
}

button.boom-leeg {
  color: var(--inkt-zacht);
  background: transparent;
  border-style: dashed;
  font-size: 0.88rem;
}

.boom-erbij {
  width: 100%;
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.boom-uitleg {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  color: var(--inkt-zacht);
  margin: 10px 0 0;
  text-align: center;
}

@media (max-width: 520px) {
  .boom-rij {
    gap: 12px 16px;
    padding: 18px 0;
  }
  .boom-naam {
    font-size: 0.92rem;
    padding: 7px 12px;
  }
}

/* De regel over de introductieprijs, onder het aanbod. Rustig van toon: het
   is een belofte, geen uitroepteken. Een streepje boven scheidt hem van de
   bedragen erboven zonder er een tweede vlak van te maken. */
.proefbalk-actie {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--inkt-zacht);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--goud) 25%, transparent);
}

.proefbalk-actie strong {
  color: var(--goud-diep);
  font-weight: 600;
}

/* De "wachtwoord vergeten"-regel staat wat rustiger dan de wisselknop erboven,
   want het is een uitweg en geen hoofdweg. */
.wissel-vergeten {
  margin-top: -8px;
  font-size: 0.88rem;
}

.wissel-vergeten[hidden] {
  display: none;
}

/* Tip over inspreken, uit de eerste testronde. Staat alleen bij de eerste
   stappen: daarna weet iemand het wel en wordt het behang. */
.tip-inspreken {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  background: var(--papier-diep);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
}

.tip-inspreken[hidden] {
  display: none;
}

.deel-melding {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  margin: -6px 0 16px;
}

.deel-melding[hidden] {
  display: none;
}

/* Het linkje onder het akkoord-vinkje. Klein, want het is een geruststelling
   voor wie erom vraagt en niet iets om aandacht mee te trekken. */
.toestemming-vraag {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  margin: -8px 0 18px;
}

.toestemming-vraag[hidden] {
  display: none;
}

/* Onderaan een bladzijde: nog een recept, nog een deel. Rustig gehouden, want
   het is een aanbod en geen aansporing. */
.stap-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.stap-extra[hidden] {
  display: none;
}

/* De eigen hoofdstukken onder Mijn gegevens. */
.eigen-blok {
  border: 1px solid var(--lijn);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.eigen-kop {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.eigen-kop input {
  flex: 1;
  font-weight: 600;
}

.eigen-stuk {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 8px 18px;
}

.eigen-stuk input {
  flex: 1;
}

/* Weghalen wist tekst. Daarom geen rode knal-knop die uitnodigt om te klikken,
   maar een stille die je pas ziet als je hem zoekt. */
.eigen-weg {
  flex: 0 0 auto;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  background: none;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}

.eigen-weg:hover {
  border-color: #a8433a;
  color: #a8433a;
}

.eigen-erbij {
  margin-left: 18px;
}

/* Voorlezen. Geen knal-knop: hij moet er zijn voor wie hem nodig heeft en
   niet in de weg zitten voor de rest. */
.knop-voorlezen {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  background: none;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 7px 15px 7px 12px;
  margin: 0 0 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.knop-voorlezen:hover {
  border-color: var(--inkt-zacht);
  color: var(--inkt);
}

.knop-voorlezen[hidden] {
  display: none;
}

/* Het driehoekje en het blokje zijn met opmaak getekend, niet met een teken
   uit het toetsenbord: zo zien ze er op elk apparaat hetzelfde uit. */
.voorlees-teken {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}

.knop-voorlezen.aan .voorlees-teken {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 2px;
  background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .knop-voorlezen {
    transition: none;
  }
}

/* ============================================== het tweede slot

   Gevraagd door Whitney: een steviger slot, en een sleutel die je kunt
   doorgeven. De opmaak volgt die twee delen: eerst rustig instellen, dan de
   codes die er duidelijk uitspringen omdat je ze maar één keer ziet. */

.slot-stappen {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--inkt-zacht);
  line-height: 1.7;
}

.slot-stappen li {
  margin-bottom: 8px;
}

/* Het vierkant met de QR staat op wit, ook in het donkere thema: een
   telefoonapp leest een donkere code op een lichte ondergrond het best. */
.slot-vierkant {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 18px;
  margin: 0 auto 18px;
  max-width: 260px;
}

.slot-vierkant svg {
  width: 100%;
  height: auto;
  max-width: 210px;
  display: block;
}

.slot-uitwijk {
  margin-bottom: 18px;
  color: var(--inkt-zacht);
}

.slot-uitwijk summary {
  cursor: pointer;
  padding: 6px 0;
}

.slot-geheim {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  word-break: break-all;
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--inkt);
}

/* De codes. Twee kolommen op een breed scherm, één op een telefoon, en een
   lettertype waarin elk teken even breed is - dan zie je meteen of je er een
   hebt overgeslagen bij het overtypen. */
.slot-codelijst {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.slot-codelijst li {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-align: center;
  background: var(--papier-diep);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 12px 8px;
  color: var(--inkt);
}

/* ------------------------------------------------- de sleutelbrief

   Op het scherm is dit blad onzichtbaar. Bij het printen verdwijnt juist de
   rest van de app en blijft alleen dit over. */
#sleutelbrief {
  display: none;
}

@media print {
  /* De app heeft een warme crèmekleur. Op papier is dat een vlak van inkt
     over de hele bladzijde, en dat wil je niet: een brief hoort wit te zijn. */
  html,
  body {
    background: #ffffff !important;
    margin: 0;
  }

  body > *:not(#sleutelbrief) {
    display: none !important;
  }

  #sleutelbrief {
    display: block !important;
    color: #000000;
    background: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.6;
    max-width: 17cm;
    margin: 0 auto;
    padding: 1cm 0;
  }

  #sleutelbrief h1 {
    font-size: 26pt;
    margin: 0 0 4px;
  }

  .brief-onderkop {
    margin: 0 0 26px;
    font-size: 12pt;
    color: #444444;
  }

  .brief-uitleg p {
    margin: 0 0 12px;
    font-size: 12pt;
  }

  .brief-codes {
    margin: 26px 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
  }

  .brief-codes li {
    font-family: "Courier New", Courier, monospace;
    font-size: 15pt;
    letter-spacing: 0.1em;
    border: 1px solid #999999;
    border-radius: 4px;
    padding: 10px 12px;
    text-align: center;
    /* Zorgt dat een code nooit over twee bladzijden wordt gebroken. */
    break-inside: avoid;
  }

  .brief-voet {
    border-top: 1px solid #999999;
    padding-top: 14px;
    font-size: 10pt;
    color: #444444;
  }

  .brief-voet p {
    margin: 0 0 6px;
  }
}